/* ============================================================
   Darra 导入 IDE 按钮 (darra-ux-import.css)
   2026-08-05 · git.darra.xyz 工业仓储 · Release 页核心交互
   2026-08-18 · 用户裁定: UI 全面改为 GitLab 19.2 原生 (Pajamas) 风格。
     主按钮 = GitLab 19.2 .btn-confirm 确认按钮 token 链:
       深色中性平面 (#3a383d 默认 / #171717 hover / #050506 active),
       白字, 8px 圆角 (--gl-button-border-radius = --gl-border-radius-lg),
       medium 尺寸 (min-height 2rem / padding 0 12px / font 14px),
       无渐变 / 无投影 / 无浮起, 焦点环 = GitLab 19.2 focus ring
       (内 1px 白 + 外 3px blue-500 #1f75cb)。
     小菜单 = Pajamas 下拉面板 token 链:
       surface --gl-dropdown-background-color (=--gl-background-color-overlap),
       圆角 --gl-dropdown-border-radius (=--gl-border-radius-lg 8px),
       无边框, 三层 drop-shadow (--gl-shadow-color-default #050506 16%),
       z-index 1000; 条目 4px 圆角, hover = rgba(5,5,6,.06)。
     旧 token (--gl-border-radius-base / --gl-border-color-dropdown /
       --gl-button-confirm-background-color) 在 19.2 已不存在, 不再引用。
   功能:
     1. 单主按钮 "导入 IDE" (第一位置) + 小菜单 (PLC IDE / AI Studio
        深链 + 复制克隆命令引导; ?ide= 预选态 = GitLab 选中条目样式)
     2. 下载 zip 按钮视觉降级为 GitLab 默认按钮 (排后)
   约束: 只加不改, 不破坏既有注入; class 由 darra-ux-import.js
         运行时标记 (避免误伤其它页面); 所有值走 var() 链 + 19.2 实测兜底。
   ============================================================ */

/* ---------- 1. 导入 IDE 主按钮 + 小菜单 ---------- */
/* ul 内注入时 wrap 是 li, 需要去除列表样式 */
.darra-import-wrap {
  display: inline-flex;
  align-items: center;
  position: relative;
  margin: 2px 0;
}
li.darra-import-wrap {
  list-style: none;
  margin: 2px 4px 2px 0;
}

/* GitLab 19.2 确认按钮 (native primary): 深色中性平面, 8px 圆角, medium 尺寸 */
.darra-import-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 2rem; /* GitLab medium = 32px */
  padding: 0 12px;  /* --gl-spacing-scale-4 */
  border: 1px solid var(--gl-button-confirm-primary-border-color-default, var(--gl-color-alpha-0, rgba(0, 0, 0, 0)));
  border-radius: var(--gl-button-border-radius, var(--gl-action-border-radius, var(--gl-border-radius-lg, 8px)));
  font-size: 14px;  /* --gl-font-size-base */
  line-height: 1rem;
  font-weight: 400;
  color: var(--gl-button-confirm-primary-foreground-color-default, var(--gl-color-neutral-0, #ffffff));
  background: var(--gl-button-confirm-primary-background-color-default, var(--gl-color-neutral-800, #3a383d));
  box-shadow: none;
  cursor: pointer;
  transition: background-color 0.2s cubic-bezier(0.22, 0.61, 0.36, 1),
              border-color 0.2s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.darra-import-btn:hover {
  background: var(--gl-button-confirm-primary-background-color-hover, var(--gl-color-neutral-950, #171717));
  color: var(--gl-button-confirm-primary-foreground-color-hover, var(--gl-color-neutral-0, #ffffff));
  box-shadow: none;
  transform: none;
  filter: none;
}
.darra-import-btn:active {
  background: var(--gl-button-confirm-primary-background-color-active, var(--gl-color-neutral-1000, #050506));
}
.darra-import-btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 1px var(--gl-focus-ring-inner-color, var(--gl-background-color-default, #ffffff)),
              0 0 0 3px var(--gl-focus-ring-outer-color, var(--gl-color-blue-500, #1f75cb));
}
.darra-import-btn svg { flex: none; }
.darra-import-btn .darra-import-caret {
  opacity: 0.85;
  transition: transform 0.15s ease;
}
.darra-import-wrap.open .darra-import-btn .darra-import-caret {
  transform: rotate(180deg);
}

/* Pajamas 下拉面板: overlap surface, lg 圆角, 无边框, 三层阴影 */
.darra-import-menu {
  display: none;
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  min-width: 200px;
  margin: 0;
  padding: 4px;
  list-style: none;
  background: var(--gl-dropdown-background-color, var(--gl-background-color-overlap, var(--gl-color-neutral-0, #ffffff)));
  border: 0;
  border-radius: var(--gl-dropdown-border-radius, var(--gl-border-radius-lg, 8px));
  box-shadow: 0 0 0.5px var(--gl-shadow-color-default, rgba(5, 5, 6, 0.16)),
              0 0.5px 1px var(--gl-shadow-color-default, rgba(5, 5, 6, 0.16)),
              0 1px 3px var(--gl-shadow-color-default, rgba(5, 5, 6, 0.16));
  z-index: 1000;
}
.darra-import-wrap.open .darra-import-menu { display: block; }

.darra-import-menu-item-li { margin: 0; padding: 0; }

/* 条目: 4px 圆角, hover = rgba(5,5,6,.06), 文本 = neutral-800 */
.darra-import-menu-item {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 32px;
  padding: 0 8px; /* --gl-spacing-scale-3 */
  border-radius: var(--gl-border-radius-default, var(--gl-border-radius-md, 4px));
  font-size: 14px;
  line-height: 1rem;
  font-weight: 400;
  color: var(--gl-text-color-default, var(--gl-color-neutral-800, #3a383d)) !important;
  text-decoration: none !important;
}
.darra-import-menu-item:hover {
  background: var(--gl-dropdown-option-background-color-unselected-hover, var(--gl-action-neutral-background-color-hover, var(--gl-color-alpha-dark-6, rgba(5, 5, 6, 0.06))));
  color: var(--gl-text-color-default, var(--gl-color-neutral-800, #3a383d)) !important;
  text-decoration: none !important;
}
.darra-import-menu-item:focus-visible {
  outline: none;
  box-shadow: inset 0 0 0 2px var(--gl-focus-ring-outer-color, var(--gl-color-blue-500, #1f75cb)),
              inset 0 0 0 3px var(--gl-focus-ring-inner-color, var(--gl-background-color-default, #ffffff));
}
.darra-import-menu-item .darra-import-menu-icon {
  flex: none;
  display: inline-flex;
  color: var(--gl-text-color-subtle, var(--gl-color-neutral-600, #626168));
}
.darra-import-menu-item .darra-import-menu-label {
  flex: 1 1 auto;
  text-align: left;
}
/* 选中态 (?:ide= 预选): GitLab 选中条目 = neutral-50 + 蓝勾 */
.darra-import-check {
  flex: none;
  display: none;
  color: var(--gl-color-blue-500, #1f75cb);
}
.darra-import-menu-item.is-preselected {
  background: var(--gl-dropdown-option-background-color-selected-default, var(--gl-color-neutral-50, #ececef));
  color: var(--gl-text-color-default, var(--gl-color-neutral-800, #3a383d)) !important;
}
.darra-import-menu-item.is-preselected .darra-import-check { display: inline-flex; }

/* 分隔线 */
.darra-import-menu-sep {
  height: 1px;
  margin: 4px 0;
  background: var(--gl-border-color-default, var(--gl-color-neutral-100, #dcdcdc));
}

/* 复制克隆命令 → 已复制提示 (GitLab 成功绿) */
.darra-import-menu-copy.copied .darra-import-menu-label::after {
  content: attr(data-darra-copied-label);
  color: var(--gl-text-color-success, var(--gl-color-green-600, #2f7549));
  font-weight: 600;
}

/* ---------- 2. 下载 zip 按钮降级 (GitLab 默认按钮, 排后) ---------- */
.darra-import-wrap + li .darra-rel-zip-btn,
li:has(+ .darra-import-wrap) .darra-rel-zip-btn,
li.darra-import-wrap + li .darra-rel-zip-btn {
  color: var(--gl-text-color-default, var(--gl-color-neutral-800, #3a383d)) !important;
  background: var(--gl-button-default-primary-background-color-default, var(--gl-background-color-default, var(--gl-color-neutral-0, #ffffff)));
  border: 1px solid var(--gl-button-default-primary-border-color-default, var(--gl-border-color-default, var(--gl-color-neutral-100, #dcdcdc)));
  border-radius: var(--gl-button-border-radius, var(--gl-action-border-radius, var(--gl-border-radius-lg, 8px)));
  box-shadow: none;
  font-weight: 400;
}
.darra-import-wrap + li .darra-rel-zip-btn:hover,
li:has(+ .darra-import-wrap) .darra-rel-zip-btn:hover,
li.darra-import-wrap + li .darra-rel-zip-btn:hover {
  color: var(--gl-text-color-default, var(--gl-color-neutral-800, #3a383d)) !important;
  background: var(--gl-action-neutral-background-color-hover, var(--gl-color-alpha-dark-6, rgba(5, 5, 6, 0.06)));
  border-color: var(--gl-color-neutral-300, #babac0);
  filter: none;
  transform: none;
  box-shadow: none;
}