/* ============================================================
   Darra GitHub 风格皮肤 (darra-gh-skin.css)
   2026-08-05 · git.darra.xyz · GitLab CE 19.2
   参考 GitHub Primer 设计语言, Darra 蓝 #1E90FF 为主色

   原理:
   - GitLab 是 CSS 变量驱动 (--gl-color-neutral-* 色板 → --gl-background-* /
     --gl-border-* / --gl-text-* 语义 token)。本文件覆盖这些变量,
     组件细节用实测类名 (super-sidebar / gl-new-card / readme-holder /
     tree-table / gl-tabs-nav / gl-button 等) 补充。
   - 主题作用域: 浅色 = :root 默认 (js 设 data-darra-theme="light");
     深色 = html.gl-dark (GitLab 自带 class, js 设 data-darra-theme="dark")。
   - 与 darra-ux-theme.css 并行不冲突 (theme 管动作色/链接/焦点/hljs,
     本文件管背景/边框/圆角/阴影/文本/组件形状)。
   ============================================================ */

/* ============================================================
   0. 浅色 — GitHub Primer light (#1E90FF 主色)
   ============================================================ */
:root,
:root[data-darra-theme="light"] {
  /* ---- GitHub Primer 灰阶 → GitLab neutral 色板 ---- */
  --gl-color-neutral-0: #ffffff;
  --gl-color-neutral-10: #f6f8fa;
  --gl-color-neutral-20: #f6f8fa;
  --gl-color-neutral-30: #eaeef2;
  --gl-color-neutral-40: #eaeef2;
  --gl-color-neutral-50: #eaeef2;
  --gl-color-neutral-100: #d1d9e0;
  --gl-color-neutral-200: #b6c2cf;
  --gl-color-neutral-300: #8b949e;
  --gl-color-neutral-400: #8b949e;
  --gl-color-neutral-500: #59636e;
  --gl-color-neutral-600: #59636e;
  --gl-color-neutral-700: #59636e;
  --gl-color-neutral-800: #1f2328;
  --gl-color-neutral-900: #24292f;
  --gl-color-neutral-950: #0d1117;

  /* ---- 语义 token: 背景 (GitHub canvas) ---- */
  --gl-background-color-default: #ffffff;
  --gl-background-color-subtle: #f6f8fa;
  --gl-background-color-strong: #f6f8fa;
  --gl-background-color-canvas: #f6f8fa;
  --gl-background-color-canvas-default: #f6f8fa;
  --gl-surface-color-default: #ffffff;
  --gl-surface-color-subtle: #f6f8fa;
  --gl-surface-color-raised: #ffffff;
  --gl-panel-background-color-default: #ffffff;
  --gl-panel-background-color-muted: #f6f8fa;

  /* ---- 语义 token: 边框 (GitHub border) ---- */
  --gl-border-color-default: #d1d9e0;
  --gl-border-color-subtle: #eaeef2;
  --gl-border-color-strong: #b6c2cf;

  /* ---- 语义 token: 文本 (GitHub fg) ---- */
  --gl-text-color-primary: #1f2328;
  --gl-text-color-default: #1f2328;
  --gl-text-color-secondary: #59636e;
  --gl-text-color-tertiary: #6e7781;

  /* ---- 阴影 (GitHub Primer box-shadow 分层) ---- */
  --gl-shadow-color-default: rgba(140, 149, 159, 0.15);
  --gl-shadow-x-small: 0 1px 0 rgba(31, 35, 40, 0.04);
  --gl-shadow-small: 0 1px 0 rgba(31, 35, 40, 0.04);
  --gl-shadow-medium: 0 1px 0 rgba(31, 35, 40, 0.04), 0 2px 8px rgba(140, 149, 159, 0.15);
  --gl-shadow-large: 0 8px 24px rgba(140, 149, 159, 0.2);
  --gl-shadow-lg: 0 8px 24px rgba(140, 149, 159, 0.2);
  --gl-shadow-xl: 0 12px 48px rgba(140, 149, 159, 0.24);

  /* ---- 圆角 (GitHub 6px, 卡片 8px) ---- */
  --gl-border-radius-small: 6px;
  --gl-border-radius-medium: 6px;
  --gl-border-radius-base: 6px;
  --gl-border-radius-large: 8px;
  --gl-button-radius: 6px;
}

/* ============================================================
   1. 深色 — GitHub Primer dark (#0d1117 / #161b22 / #21262d)
      作用域: html.gl-dark (GitLab 自带深色 class) 或 data-darra-theme=dark
   ============================================================ */
:root.gl-dark,
:root[data-darra-theme="dark"] {
  /* ---- GitHub dark 灰阶 → GitLab neutral 色板 ---- */
  --gl-color-neutral-0: #f0f6fc;
  --gl-color-neutral-10: #eaeef2;
  --gl-color-neutral-20: #d1d9e0;
  --gl-color-neutral-30: #b1bac4;
  --gl-color-neutral-40: #9198a1;
  --gl-color-neutral-50: #d1d9e0;
  --gl-color-neutral-100: #b1bac4;
  --gl-color-neutral-200: #9198a1;
  --gl-color-neutral-300: #6e7681;
  --gl-color-neutral-400: #59636e;
  --gl-color-neutral-500: #4b535d;
  --gl-color-neutral-600: #3d444d;
  --gl-color-neutral-700: #3d444d;
  --gl-color-neutral-800: #21262d;
  --gl-color-neutral-900: #161b22;
  --gl-color-neutral-950: #0d1117;

  /* ---- 语义 token: 背景 ---- */
  --gl-background-color-default: #161b22;
  --gl-background-color-subtle: #21262d;
  --gl-background-color-strong: #0d1117;
  --gl-background-color-canvas: #0d1117;
  --gl-background-color-canvas-default: #0d1117;
  --gl-surface-color-default: #161b22;
  --gl-surface-color-subtle: #21262d;
  --gl-surface-color-raised: #21262d;
  --gl-panel-background-color-default: #161b22;
  --gl-panel-background-color-muted: #21262d;

  /* ---- 语义 token: 边框 ---- */
  --gl-border-color-default: #3d444d;
  --gl-border-color-subtle: #21262d;
  --gl-border-color-strong: #4b535d;

  /* ---- 语义 token: 文本 ---- */
  --gl-text-color-primary: #f0f6fc;
  --gl-text-color-default: #f0f6fc;
  --gl-text-color-secondary: #9198a1;
  --gl-text-color-tertiary: #6e7681;

  /* ---- 阴影 (GitHub dark) ---- */
  --gl-shadow-color-default: rgba(1, 4, 9, 0.5);
  --gl-shadow-x-small: 0 1px 0 rgba(1, 4, 9, 0.4);
  --gl-shadow-small: 0 1px 0 rgba(1, 4, 9, 0.4);
  --gl-shadow-medium: 0 1px 0 rgba(1, 4, 9, 0.4), 0 3px 6px rgba(1, 4, 9, 0.5);
  --gl-shadow-large: 0 8px 24px rgba(1, 4, 9, 0.6);
  --gl-shadow-lg: 0 8px 24px rgba(1, 4, 9, 0.6);
  --gl-shadow-xl: 0 12px 48px rgba(1, 4, 9, 0.7);

  /* ---- 圆角同浅色 ---- */
  --gl-border-radius-small: 6px;
  --gl-border-radius-medium: 6px;
  --gl-border-radius-base: 6px;
  --gl-border-radius-large: 8px;
  --gl-button-radius: 6px;
}

/* ============================================================
   2. 页面画布 (GitHub 浅灰 canvas #f6f8fa / 深色 #0d1117)
   ============================================================ */
html,
body {
  background-color: var(--gl-background-color-canvas, #f6f8fa) !important;
}

/* ---- GitHub 字体系统 (Primer: system-ui 栈) ---- */
body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans",
    Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
    "Segoe UI Symbol";
}
/* ---- GitHub 等宽字体 (代码) ---- */
.gl-code,
.code,
pre,
code,
.blob-content,
.file-content.code,
.file-content.gl-code,
.highlight,
.gl-markdown pre {
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
    "Liberation Mono", monospace;
  font-size: 13px;
}

/* ============================================================
   3. 侧边栏 (super-sidebar) — GitHub 左导航 (白/深底 + 细右边框)
   ============================================================ */
.super-sidebar,
.js-super-sidebar {
  background-color: var(--gl-background-color-default) !important;
  border-right: 1px solid var(--gl-border-color-subtle);
}
/* 侧边栏导航项 hover/active 圆角 (GitHub 菜单手感) */
.super-sidebar .gl-nav-item,
.super-sidebar .gl-nav-item-with-tooltip {
  border-radius: 6px;
  margin-inline: 6px;
  width: calc(100% - 12px);
}
.super-sidebar .gl-nav-item:hover {
  background-color: var(--gl-background-color-subtle);
}

/* ============================================================
   4. 卡片 / 面板 — GitHub 白卡 + 1px 边框 + 分层阴影 (6-8px 圆角)
   ============================================================ */
.gl-new-card,
.gl-card,
.card,
.panel,
.project-home-panel,
.project-show-panel {
  border-radius: 8px;
  border: 1px solid var(--gl-border-color-default);
  box-shadow: var(--gl-shadow-small);
  background-color: var(--gl-background-color-default);
}
.gl-new-card:hover,
.project-home-panel:hover {
  border-color: var(--gl-border-color-strong);
  box-shadow: var(--gl-shadow-medium);
}

/* 侧栏信息面板 (项目信息 / 群组信息) — GitHub 浅灰面板 */
[data-testid="project-side-panel"],
.sidebar-project-panel,
.project-information-panel,
.nav-panel,
.issues-sidebar,
.js-sidebar-widgets {
  background-color: var(--gl-background-color-subtle) !important;
  border: 1px solid var(--gl-border-color-subtle);
  border-radius: 8px;
}

/* ============================================================
   5. 按钮 — GitHub 风格 (浅灰底 + 1px 边框 + hover 加深 + 6px 圆角)
   ============================================================ */
.gl-button,
.btn {
  border-radius: var(--gl-button-radius, 6px);
  transition:
    background-color 150ms ease,
    border-color 150ms ease,
    color 150ms ease,
    box-shadow 150ms ease,
    transform 150ms ease;
}
.gl-button:not(.gl-button-confirm):not(.btn-confirm):not(.btn-warning):not(.gl-button-danger),
.btn:not(.btn-confirm):not(.btn-warning):not(.btn-danger) {
  background-color: var(--gl-button-default-background, #f6f8fa);
  border-color: var(--gl-border-color-default);
  color: var(--gl-text-color-primary);
}
.gl-button:not(.gl-button-confirm):not(.btn-confirm):not(.btn-warning):not(.gl-button-danger):hover,
.btn:not(.btn-confirm):not(.btn-warning):not(.btn-danger):hover {
  background-color: var(--gl-button-default-hover-background, #eaeef2);
  border-color: var(--gl-border-color-strong);
}
.gl-button:not(:disabled):active,
.btn:not(:disabled):active {
  transform: translateY(1px);
}
.gl-button:focus-visible,
.btn:focus-visible {
  box-shadow: 0 0 0 3px rgba(30, 144, 255, 0.35);
}

/* 主要按钮 (confirm) — Darra 蓝 (变量已由 darra-ux-theme.css 覆盖, 这里补圆角) */
.gl-button-confirm,
.btn-confirm {
  border-radius: 6px;
}

/* ============================================================
   6. Tab 导航 — GitHub 底部 2px 高亮条风格
   ============================================================ */
.gl-tabs-nav {
  border-bottom: 1px solid var(--gl-border-color-default);
}
.gl-tabs-nav .gl-tabs-nav-list {
  gap: 4px;
}
.gl-tabs-nav li,
.gl-tabs-nav .gl-tabs-nav-item,
.gl-tabs-nav-list > li {
  border-radius: 6px 6px 0 0;
  transition: background-color 150ms ease;
}
.gl-tabs-nav li:hover,
.gl-tabs-nav .gl-tabs-nav-item:hover {
  background-color: var(--gl-background-color-subtle);
}
.gl-tabs-nav li.active,
.gl-tabs-nav .gl-tabs-nav-item.active,
.gl-tabs-nav li.gl-tabs-nav-item-active,
.gl-tabs-nav [aria-selected="true"] {
  background-color: transparent;
  box-shadow: inset 0 -2px 0 0 #1e90ff;
}

/* ============================================================
   7. 输入框 — GitHub 风 (浅灰底 + 边框 + 蓝焦点环)
   ============================================================ */
.gl-form-input,
input[type="search"],
.gl-search-box-by-type .gl-form-input,
.gl-listbox-search-input {
  border-radius: 6px;
  border-color: var(--gl-border-color-default);
  background-color: var(--gl-background-color-default);
  color: var(--gl-text-color-primary);
  transition: border-color 150ms ease, box-shadow 150ms ease;
}
.gl-form-input:focus,
input[type="search"]:focus,
.gl-search-box-by-type .gl-form-input:focus,
.gl-listbox-search-input:focus {
  border-color: #1e90ff;
  box-shadow: 0 0 0 3px rgba(30, 144, 255, 0.3);
  outline: none;
}

/* ============================================================
   8. 下拉菜单 — GitHub 白卡 + 大阴影 + 8px 圆角
   ============================================================ */
.gl-new-dropdown-contents,
.gl-dropdown-contents,
.gl-new-dropdown-contents-with-scrim-overlay {
  border-radius: 8px;
  border: 1px solid var(--gl-border-color-default);
  box-shadow: var(--gl-shadow-large);
  background-color: var(--gl-background-color-default) !important;
}
.gl-new-dropdown-item:hover {
  background-color: var(--gl-background-color-subtle);
}

/* ============================================================
   9. README / 文件内容 — GitHub 白卡样式
   ============================================================ */
.readme-holder,
.file-holder {
  border: 1px solid var(--gl-border-color-default);
  border-radius: 8px;
  overflow: hidden;
  box-shadow: var(--gl-shadow-small);
  background-color: var(--gl-background-color-default);
}
.file-content,
.md,
.gl-markdown {
  background-color: var(--gl-background-color-default);
  color: var(--gl-text-color-primary);
}

/* 文件树 — 行 hover 高亮 */
.tree-table tbody tr:hover,
.tree-row:hover,
[data-testid="file-row"]:hover {
  background-color: var(--gl-background-color-subtle);
}
.tree-table {
  border: 1px solid var(--gl-border-color-subtle);
  border-radius: 8px;
  overflow: hidden;
}
.tree-table th {
  background-color: var(--gl-background-color-subtle);
  border-bottom: 1px solid var(--gl-border-color-default);
}

/* 代码视图容器 */
.blob-viewer,
.blob-content,
.file-content.code,
.diff-wrap,
.diff-file {
  border: 1px solid var(--gl-border-color-subtle);
  border-radius: 8px;
  overflow: hidden;
}

/* ============================================================
   10. 仓库列表 (explore / dashboard) — GitHub 列表卡片
   ============================================================ */
.project-row,
[data-testid="project-list-item"] {
  border-radius: 8px;
  border: 1px solid transparent;
  transition: background-color 150ms ease, border-color 150ms ease, box-shadow 150ms ease;
}
.project-row:hover,
[data-testid="project-list-item"]:hover {
  background-color: var(--gl-background-color-subtle);
  border-color: var(--gl-border-color-subtle);
  box-shadow: var(--gl-shadow-small);
}

/* explore 页项目行 (GitLab 19.2 Tailwind 布局: ul > li > .gl-border-b 行) */
.content ul.gl-list-none > li > .gl-border-b,
.content li > .gl-border-b.gl-flex.gl-items-start {
  border-radius: 8px;
  border: 1px solid var(--gl-border-color-subtle) !important;
  border-bottom-width: 1px !important;
  margin-bottom: 8px;
  background-color: var(--gl-background-color-default);
  box-shadow: var(--gl-shadow-x-small);
  transition: border-color 150ms ease, box-shadow 150ms ease, background-color 150ms ease;
}
.content ul.gl-list-none > li > .gl-border-b:hover,
.content li > .gl-border-b.gl-flex.gl-items-start:hover {
  border-color: var(--gl-border-color-default) !important;
  box-shadow: var(--gl-shadow-medium);
  background-color: var(--gl-background-color-subtle);
}

/* ============================================================
   11. 徽章 / 头像 / 其他细节
   ============================================================ */
.gl-badge,
.badge {
  border-radius: 6px;
  border: 1px solid var(--gl-border-color-default);
}
.gl-avatar,
.avatar {
  border-radius: 6px;
}
.gl-alert {
  border-radius: 8px;
  border: 1px solid var(--gl-border-color-default);
}
/* 用户菜单头像 */
.super-sidebar-user-dropdown .gl-avatar {
  border-radius: 50%;
}

/* ============================================================
   12. 外观切换按钮 (darra-gh-skin.js 注入, 右下角浮动)
   ============================================================ */
.darra-gh-skin-btn {
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 3000;
  display: flex;
  align-items: center;
  gap: 6px;
  height: 32px;
  padding: 0 12px;
  border-radius: 8px;
  border: 1px solid var(--gl-border-color-default);
  background-color: var(--gl-background-color-default);
  color: var(--gl-text-color-primary);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  box-shadow: var(--gl-shadow-medium);
  transition: border-color 150ms ease, box-shadow 150ms ease, transform 150ms ease;
}
.darra-gh-skin-btn:hover {
  border-color: var(--gl-border-color-strong);
  box-shadow: var(--gl-shadow-large);
  transform: translateY(-1px);
}
.darra-gh-skin-btn svg {
  width: 16px;
  height: 16px;
  fill: currentColor;
}

.darra-gh-skin-menu {
  position: fixed;
  right: 16px;
  bottom: 56px;
  z-index: 3001;
  min-width: 168px;
  padding: 4px;
  border-radius: 8px;
  border: 1px solid var(--gl-border-color-default);
  background-color: var(--gl-background-color-default);
  box-shadow: var(--gl-shadow-large);
  display: none;
}
.darra-gh-skin-menu.open { display: block; }
.darra-gh-skin-opt {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  padding: 6px 10px;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: var(--gl-text-color-primary);
  font-size: 13px;
  text-align: left;
  cursor: pointer;
}
.darra-gh-skin-opt:hover {
  background-color: var(--gl-background-color-subtle);
}
.darra-gh-skin-opt.active {
  color: #1e90ff;
  font-weight: 600;
}
.darra-gh-skin-opt .check {
  opacity: 0;
}
.darra-gh-skin-opt.active .check {
  opacity: 1;
}

/* 窄屏 (≤ 480px) 只留圆形图标 */
@media (max-width: 480px) {
  .darra-gh-skin-btn {
    width: 36px;
    height: 36px;
    padding: 0;
    justify-content: center;
    border-radius: 50%;
  }
  .darra-gh-skin-btn .darra-gh-skin-label { display: none; }
}