/* ============================================================
   Darra Industrial UX Theme (darra-ux-theme.css)
   2026-08-04 · git.darra.xyz · GitLab CE 19.2.1
   Darra 工业主题细节与微交互 — #1E90FF 工业蓝统一

   原理:
   - GitLab 是 CSS 变量驱动 (--gl-* design tokens)。
     浅色主题变量在 :root, 深色在 .gl-dark / .gl-dark-scope。
     本文件只做"变量覆盖 + 少量组件细节", 不重写每个元素。
   - 全部选择器以 :root / .gl-dark 显式作用域声明, 避免误伤。
   ============================================================ */

/* ---------- 0. 品牌色基准 (Darra 工业蓝 #1E90FF) ---------- */
:root {
  --darra-blue: #1E90FF;
  --darra-blue-strong: #0b7ae0;      /* hover/active 深一档 */
  --darra-blue-soft: rgba(30, 144, 255, 0.12);   /* 选中态浅底 */
  --darra-blue-border: rgba(30, 144, 255, 0.45);
  --darra-transition: 150ms ease;
}

/* ============================================================
   1. 主题色增强 — 按钮/链接/焦点环/选中态统一 #1E90FF
   ============================================================ */

/* --- 1.1 浅色主题动作色 (confirm = 主要按钮) --- */
:root {
  /* 主要按钮背景: #1E90FF */
  --gl-action-confirm-background-color-default: #1E90FF;
  --gl-action-confirm-background-color-hover: var(--darra-blue-strong);
  --gl-action-confirm-background-color-active: #0a6ed1;
  --gl-action-confirm-background-color-focus: #1E90FF;
  /* 主要按钮边框 */
  --gl-action-confirm-border-color-default: #1E90FF;
  --gl-action-confirm-border-color-hover: var(--darra-blue-strong);
  --gl-action-confirm-border-color-active: #0a6ed1;
  --gl-action-confirm-border-color-focus: #1E90FF;
  /* 主要按钮文字 (白) */
  --gl-action-confirm-foreground-color-default: #FFFFFF;
  --gl-action-confirm-foreground-color-hover: #FFFFFF;
  --gl-action-confirm-foreground-color-active: #FFFFFF;
  --gl-action-confirm-foreground-color-focus: #FFFFFF;

  /* 强主要按钮 (strong confirm, 如创建/提交类) */
  --gl-action-strong-confirm-background-color-default: #1E90FF;
  --gl-action-strong-confirm-background-color-hover: var(--darra-blue-strong);
  --gl-action-strong-confirm-background-color-active: #0a6ed1;
  --gl-action-strong-confirm-background-color-focus: #1E90FF;
  --gl-action-strong-confirm-border-color-default: #1E90FF;
  --gl-action-strong-confirm-border-color-hover: var(--darra-blue-strong);
  --gl-action-strong-confirm-border-color-active: #0a6ed1;
  --gl-action-strong-confirm-border-color-focus: #1E90FF;
  --gl-action-strong-confirm-foreground-color-default: #FFFFFF;
  --gl-action-strong-confirm-foreground-color-hover: #FFFFFF;
  --gl-action-strong-confirm-foreground-color-active: #FFFFFF;
  --gl-action-strong-confirm-foreground-color-focus: #FFFFFF;

  /* 选中态 (nav/列表选中): #1E90FF */
  --gl-action-selected-background-color-default: var(--darra-blue-soft);
  --gl-action-selected-background-color-hover: rgba(30, 144, 255, 0.2);
  --gl-action-selected-background-color-active: rgba(30, 144, 255, 0.25);
  --gl-action-selected-background-color-focus: var(--darra-blue-soft);
  --gl-action-selected-border-color-default: #1E90FF;
  --gl-action-selected-border-color-hover: #1E90FF;
  --gl-action-selected-border-color-active: #1E90FF;
  --gl-action-selected-border-color-focus: #1E90FF;
  --gl-action-selected-foreground-color-default: #0a5db5;
  --gl-action-selected-foreground-color-hover: #0a5db5;
  --gl-action-selected-foreground-color-active: #0a5db5;
  --gl-action-selected-foreground-color-focus: #0a5db5;

  /* 链接色: 工业蓝 (浅色用 blue-600 保证对比度) */
  --gl-text-color-link: var(--darra-blue-strong);
  --gl-feedback-strong-link-color: var(--darra-blue-strong);
  --gl-icon-color-link: var(--darra-blue-strong);

  /* 焦点环: #1E90FF 半透明 */
  --gl-focus-ring-color: rgba(30, 144, 255, 0.55);
  --gl-focus-ring-outer-color: var(--darra-blue);
}

/* --- 1.2 深色主题动作色 (#1E90FF 在暗底上提亮) --- */
.gl-dark,
.gl-dark-scope {
  /* 主要按钮: 暗底用更亮的 #2194FF 保持识别度 */
  --gl-action-confirm-background-color-default: #2194FF;
  --gl-action-confirm-background-color-hover: #3ea3ff;
  --gl-action-confirm-background-color-active: #0b7ae0;
  --gl-action-confirm-background-color-focus: #2194FF;
  --gl-action-confirm-border-color-default: #2194FF;
  --gl-action-confirm-border-color-hover: #3ea3ff;
  --gl-action-confirm-border-color-active: #0b7ae0;
  --gl-action-confirm-border-color-focus: #2194FF;
  --gl-action-confirm-foreground-color-default: #FFFFFF;
  --gl-action-confirm-foreground-color-hover: #FFFFFF;
  --gl-action-confirm-foreground-color-active: #FFFFFF;
  --gl-action-confirm-foreground-color-focus: #FFFFFF;

  --gl-action-strong-confirm-background-color-default: #2194FF;
  --gl-action-strong-confirm-background-color-hover: #3ea3ff;
  --gl-action-strong-confirm-background-color-active: #0b7ae0;
  --gl-action-strong-confirm-background-color-focus: #2194FF;
  --gl-action-strong-confirm-border-color-default: #2194FF;
  --gl-action-strong-confirm-border-color-hover: #3ea3ff;
  --gl-action-strong-confirm-border-color-active: #0b7ae0;
  --gl-action-strong-confirm-border-color-focus: #2194FF;
  --gl-action-strong-confirm-foreground-color-default: #FFFFFF;
  --gl-action-strong-confirm-foreground-color-hover: #FFFFFF;
  --gl-action-strong-confirm-foreground-color-active: #FFFFFF;
  --gl-action-strong-confirm-foreground-color-focus: #FFFFFF;

  /* 选中态: 暗底更柔和的蓝底 */
  --gl-action-selected-background-color-default: rgba(30, 144, 255, 0.22);
  --gl-action-selected-background-color-hover: rgba(30, 144, 255, 0.3);
  --gl-action-selected-background-color-active: rgba(30, 144, 255, 0.35);
  --gl-action-selected-background-color-focus: rgba(30, 144, 255, 0.22);
  --gl-action-selected-border-color-default: #2194FF;
  --gl-action-selected-border-color-hover: #3ea3ff;
  --gl-action-selected-border-color-active: #0b7ae0;
  --gl-action-selected-border-color-focus: #2194FF;
  --gl-action-selected-foreground-color-default: #9fceff;
  --gl-action-selected-foreground-color-hover: #b6dbff;
  --gl-action-selected-foreground-color-active: #9fceff;
  --gl-action-selected-foreground-color-focus: #9fceff;

  /* 链接: 暗底用 blue-300 亮蓝 */
  --gl-text-color-link: #63a6e9;
  --gl-feedback-strong-link-color: #63a6e9;
  --gl-icon-color-link: #63a6e9;

  /* 焦点环 */
  --gl-focus-ring-color: rgba(33, 148, 255, 0.55);
  --gl-focus-ring-outer-color: #2194FF;
}

/* --- 1.3 代码高亮工业蓝调 ---
   浅色 highlight 主题 (white-*.css) 硬编码颜色, 此处显式覆盖为 Darra 蓝调;
   深色 highlight 主题用 --color-hljs-* 变量, 一并覆盖。
   作用域限定 .code.highlight, 不影响 UI。 */
.code.highlight .hljs-comment,
.code.duo-message-pre-block .hljs-comment { color: #7d8794; font-style: italic; }
.code.highlight .hljs-keyword,
.code.duo-message-pre-block .hljs-keyword { color: #0b6fd0; font-weight: 600; }
.code.highlight .hljs-string,
.code.duo-message-pre-block .hljs-string { color: #087e5c; }
.code.highlight .hljs-number,
.code.highlight .hljs-literal,
.code.duo-message-pre-block .hljs-number { color: #b4520f; }
.code.highlight .hljs-title,
.code.highlight .hljs-title.function_,
.code.highlight .hljs-title.class_ { color: #1E90FF; }
.code.highlight .hljs-attr,
.code.highlight .hljs-attribute,
.code.highlight .hljs-property { color: #1E90FF; }
.code.highlight .hljs-built_in,
.code.highlight .hljs-type { color: #0a6ed1; }
.code.highlight .hljs-operator,
.code.highlight .hljs-punctuation { color: #4b5563; }
.code.highlight .hljs-meta,
.code.highlight .hljs-symbol { color: #6b7280; }
.code.highlight .hljs-selector-tag,
.code.highlight .hljs-selector-class { color: #0b6fd0; }
.code.highlight .hljs-regexp { color: #0a6ed1; }

/* 深色 highlight: 变量覆盖 (深色主题自带变量, 补蓝调) */
.gl-dark .code.highlight .hljs-title,
.gl-dark .code.highlight .hljs-title.function_,
.gl-dark .code.highlight .hljs-title.class_,
.gl-dark .code.highlight .hljs-attr { color: #5ba9f5; }
.gl-dark .code.highlight .hljs-keyword { color: #7cb8f2; }
.gl-dark .code.highlight .hljs-string { color: #7bd3a5; }
.gl-dark .code.highlight .hljs-comment { color: #8b95a1; }
.gl-dark .code.highlight .hljs-number,
.gl-dark .code.highlight .hljs-literal { color: #e0a15e; }

/* ============================================================
   2. 微交互 — 按钮过渡 150ms / 加载状态 / Toast 统一
   ============================================================ */

/* --- 2.1 按钮 hover/active 动效 (150ms 过渡) --- */
.btn,
.gl-button,
[class*="gl-button"] {
  transition:
    background-color var(--darra-transition),
    border-color var(--darra-transition),
    color var(--darra-transition),
    box-shadow var(--darra-transition),
    transform 150ms ease;
}
.btn:not(:disabled):active,
.gl-button:not(:disabled):active,
[class*="gl-button"]:not(:disabled):active {
  transform: translateY(1px);
}
/* 可点击行/卡片轻微反馈 */
.gl-new-card:not([class*="disabled"]) {
  transition: box-shadow var(--darra-transition), border-color var(--darra-transition);
}
.gl-new-card:not([class*="disabled"]):hover {
  box-shadow: 0 2px 8px rgba(30, 144, 255, 0.15);
  border-color: var(--darra-blue-border);
}

/* --- 2.2 加载状态: 工业风 spinner / 进度条 --- */
.gl-spinner {
  border-color: var(--darra-blue-border) !important;
  border-top-color: #1E90FF !important;
  transition: border-color var(--darra-transition);
}
/* 顶部进度条 (turbo 页面加载): Darra 蓝 */
.turbo-progress-bar {
  background-color: #1E90FF !important;
  box-shadow: 0 0 6px rgba(30, 144, 255, 0.7);
}
/* gl-progress 内嵌进度 */
.gl-progress .progress-bar {
  background-color: #1E90FF;
  transition: width 300ms ease;
}
/* 骨架屏 loading 闪烁保持原样, 仅统一到蓝色系 */
.gl-skeleton-loader {
  --gl-skeleton-loader-color: var(--darra-blue-border);
}

/* --- 2.3 通知 / Toast 统一 Darra 蓝 --- */
.b-toaster .toast,
.gl-toast {
  border-left: 3px solid #1E90FF;
}
.b-toaster .toast .toast-header,
.gl-toast .toast-header {
  border-bottom-color: var(--darra-blue-border);
}
/* 页面顶部 flash 提示 (成功/信息类) 蓝调统一 */
.flash-container .flash-notice,
.flash-container .flash-success {
  border-left-color: #1E90FF;
}
.flash-container .flash-notice .flash-icon,
.flash-container .flash-success .flash-icon {
  color: #1E90FF;
}

/* ============================================================
   3. 状态徽章 — 仓库可见性 / 分支 / 标签统一美化
   ============================================================ */

/* --- 3.1 仓库可见性徽章 (公开/私有) --- */
/* 公开: 蓝底白字; 私有: 中性深灰 (工业风) */
[data-testid="project-visibility-badge"] .gl-badge,
.badge[title*="公开"] .gl-badge,
.badge[title*="Public"] .gl-badge {
  background-color: #1E90FF !important;
  color: #FFFFFF !important;
  border-color: #1E90FF !important;
}
[data-testid="project-visibility-badge"] .gl-badge[aria-label*="私有"],
[data-testid="project-visibility-badge"] .gl-badge[aria-label*="Private"],
[data-testid="project-visibility-badge"] .gl-badge[title*="私有"],
[data-testid="project-visibility-badge"] .gl-badge[title*="Private"],
.badge[title*="私有"] .gl-badge {
  background-color: #4b5563 !important;
  color: #FFFFFF !important;
  border-color: #4b5563 !important;
}
/* 内部 (restricted) */
[data-testid="project-visibility-badge"] .gl-badge[title*="内部"],
[data-testid="project-visibility-badge"] .gl-badge[title*="Internal"] {
  background-color: #6b7280 !important;
  color: #FFFFFF !important;
  border-color: #6b7280 !important;
}

/* --- 3.2 分支 / 标签徽章: 细边框 + 蓝描边 --- */
.branch-name,
[data-testid="branch-name"],
[data-testid="ref-name"] {
  background-color: var(--darra-blue-soft) !important;
  color: var(--darra-blue-strong) !important;
  border: 1px solid var(--darra-blue-border) !important;
  border-radius: 4px !important;
}
.gl-dark .branch-name,
.gl-dark [data-testid="branch-name"],
.gl-dark [data-testid="ref-name"] {
  background-color: rgba(30, 144, 255, 0.16) !important;
  color: #9fceff !important;
  border-color: rgba(33, 148, 255, 0.4) !important;
}
/* 标签 chips */
[data-testid="project-tags"] .gl-badge,
.tags .gl-badge {
  background-color: var(--darra-blue-soft) !important;
  color: var(--darra-blue-strong) !important;
  border: 1px solid var(--darra-blue-border) !important;
}
.gl-dark [data-testid="project-tags"] .gl-badge,
.gl-dark .tags .gl-badge {
  background-color: rgba(30, 144, 255, 0.16) !important;
  color: #9fceff !important;
  border-color: rgba(33, 148, 255, 0.4) !important;
}

/* --- 2.4 侧边栏 / 下拉菜单 hover 过渡 (Vue 渲染, 类名稳定) --- */
.super-sidebar .gl-nav-item,
.gl-new-dropdown-item {
  transition: background-color var(--darra-transition);
}
.super-sidebar .gl-nav-item:hover {
  background-color: rgba(30, 144, 255, 0.08);
}
.gl-dark .super-sidebar .gl-nav-item:hover {
  background-color: rgba(30, 144, 255, 0.14);
}
.gl-new-dropdown-item:hover,
.gl-new-dropdown-item.is-highlighted {
  background-color: rgba(30, 144, 255, 0.08);
}
.gl-dark .gl-new-dropdown-item:hover {
  background-color: rgba(30, 144, 255, 0.14);
}
/* 当前激活导航项: 左侧 3px 工业蓝条 */
.super-sidebar .gl-nav-item.is-active,
.super-sidebar .gl-nav-item[aria-current="page"] {
  box-shadow: inset 3px 0 0 #1E90FF;
}
.gl-dark .super-sidebar .gl-nav-item.is-active,
.gl-dark .super-sidebar .gl-nav-item[aria-current="page"] {
  box-shadow: inset 3px 0 0 #2194FF;
}

/* --- 2.5 表单控件工业蓝 (accent-color, 不重写结构) --- */
input[type="checkbox"],
input[type="radio"],
input[type="range"] {
  accent-color: #1E90FF;
}

/* --- 2.6 滚动条工业蓝调 (WebKit) --- */
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-thumb {
  background: rgba(30, 144, 255, 0.4);
  border-radius: 5px;
  border: 2px solid transparent;
  background-clip: padding-box;
}
*::-webkit-scrollbar-thumb:hover {
  background: rgba(30, 144, 255, 0.65);
  border: 2px solid transparent;
  background-clip: padding-box;
}
*::-webkit-scrollbar-track { background: transparent; }

/* --- 2.7 页面内容淡入 (Turbo 导航后由 JS 加 darra-page-ready) --- */
@keyframes darra-page-fade-in {
  from { opacity: 0; transform: translateY(3px); }
  to   { opacity: 1; transform: none; }
}
html.darra-page-ready .layout-page,
html.darra-page-ready .content-wrapper > .container-fluid {
  animation: darra-page-fade-in 200ms ease;
}

/* ============================================================
   4. 品牌细节 — 顶部 Darra 横幅优化 (渐变 + 阴影)
   ============================================================ */
.header-message {
  background-image: linear-gradient(90deg, #0b7ae0 0%, #1E90FF 55%, #4aa8ff 100%) !important;
  color: #FFFFFF !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.18);
  box-shadow: 0 1px 6px rgba(30, 144, 255, 0.35);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
  letter-spacing: 0.02em;
}
.header-message p {
  font-weight: 600;
}

/* --- 页脚工业感: 已有 "Darra Industrial Git · git.darra.xyz", 加轻描边 --- */
.system-footer .gl-footer,
footer .footer,
.gl-system-footer {
  border-top: 1px solid var(--darra-blue-border);
}

/* ============================================================
   5. 可读性 — 工业现场对比度 / 字号 (只在主题作用域内微调)
   ============================================================ */
:root {
  /* 行高 / 文字对比度微调 */
  --gl-font-size-base: 14px;
}

/* 表格 / 列表 hover 行: 蓝调浅底 */
.table tbody tr:hover,
.gl-table tbody tr:hover,
[data-testid="project-list"] li:hover,
.gl-new-card:hover {
  background-color: rgba(30, 144, 255, 0.045);
}