/* ============================================================
   Qiyu AI Capability — Admin Console
   Design system: system fonts + neutral grays + 1 accent blue
   Inspired by Apple HIG / Google Material 3 (clean, minimal, generous spacing)
   ============================================================ */

:root {
  /* surfaces */
  --bg: #f6f7fa;
  --surface: #ffffff;
  --surface-2: #f8f9fc;
  --surface-hover: #f0f2f7;

  /* ink */
  --ink: #1a1f2e;
  --ink-strong: #0b1220;
  --ink-muted: #5f6775;
  --ink-subtle: #97a0b3;

  /* line */
  --line: #d8dde6;
  --line-strong: #c2c9d6;

  /* accent — brand blue → cyan gradient */
  --accent: #4477ff;
  --accent-hover: #2f63e8;
  --accent-strong: #1f46b8;
  --accent-soft: #eef3ff;
  --gradient: linear-gradient(135deg, #4477ff, #00bfff);

  /* semantic */
  --ok: #047857;
  --ok-soft: #ecfdf5;
  --warn: #b45309;
  --warn-soft: #fffbeb;
  --danger: #dc2626;
  --danger-soft: #fef2f2;

  /* spacing scale */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 48px;

  /* radii */
  --r-sm: 8px;
  --r: 12px;
  --r-lg: 14px;

  /* shadows */
  --sh-1: 0 1px 2px rgba(15, 23, 42, 0.04), 0 1px 3px rgba(15, 23, 42, 0.06);
  --sh-2: 0 4px 8px -2px rgba(15, 23, 42, 0.06), 0 2px 4px -1px rgba(15, 23, 42, 0.04);
  --sh-3: 0 12px 24px -8px rgba(15, 23, 42, 0.12), 0 4px 8px -2px rgba(15, 23, 42, 0.06);
  --sh-brand: 0 8px 22px rgba(68, 119, 255, 0.32);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
}

body {
  min-height: 100vh;
  background: var(--bg);
  color: var(--ink);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC",
    "Microsoft YaHei UI", "Microsoft YaHei", "Hiragino Sans GB",
    "Noto Sans SC", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 14px;
  line-height: 1.55;
  letter-spacing: 0;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

button, input, textarea, select { font: inherit; color: inherit; }

/* ===== Buttons ===== */
button {
  min-height: 36px;
  padding: 0 20px;
  border-radius: 999px;
  border: 0;
  background: var(--gradient);
  color: #fff;
  font-weight: 600;
  letter-spacing: 0.01em;
  cursor: pointer;
  transition: transform 0.14s ease, box-shadow 0.14s ease, opacity 0.14s ease;
}
button:hover { transform: translateY(-1px); box-shadow: var(--sh-brand); }
button:active { transform: translateY(0); }
button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
button.secondary {
  background: var(--surface);
  color: var(--ink-strong);
  border: 1px solid var(--line-strong);
  font-weight: 500;
}
button.secondary:hover { background: var(--surface-hover); border-color: var(--ink-subtle); transform: none; box-shadow: none; }
button:disabled { opacity: 0.5; cursor: not-allowed; transform: none; box-shadow: none; }

/* ===== Links ===== */
a { color: var(--accent-strong); text-decoration: none; transition: color 0.12s ease; }
a:hover { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }

/* ===== App shell ===== */
.app {
  display: grid;
  grid-template-columns: 232px minmax(0, 1fr);
  min-height: 100vh;
}

.rail {
  background: var(--surface);
  border-right: 1px solid var(--line);
  padding: var(--sp-5) var(--sp-4);
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
}

.brand {
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--ink-strong);
  padding: var(--sp-2) var(--sp-3);
  margin-bottom: var(--sp-5);
}

.nav { display: flex; flex-direction: column; gap: 2px; }
.nav button {
  position: relative;
  width: 100%;
  min-height: 38px;
  padding: 0 var(--sp-3);
  text-align: left;
  border: none;
  background: transparent;
  color: var(--ink-muted);
  font-weight: 500;
  border-radius: var(--r-sm);
  transition: background 0.12s ease, color 0.12s ease;
}
.nav button:hover { background: var(--surface-hover); color: var(--ink-strong); }
.nav button.active {
  background: var(--accent-soft);
  color: var(--accent);
  font-weight: 600;
}
.nav button.active::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 20px;
  border-radius: 0 3px 3px 0;
  background: var(--gradient);
}

/* ===== Main area ===== */
.main { padding: var(--sp-5) var(--sp-6); max-width: 1440px; }

.topbar {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--sp-4);
  margin-bottom: var(--sp-5);
}
.topbar .actions { margin-top: 0; flex-shrink: 0; }
#cycleSelect { max-width: 280px; }
.topbar h1 { position: relative; padding-bottom: 10px; }
.topbar h1::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 64px;
  height: 3px;
  border-radius: 2px;
  background: var(--gradient);
}

h1 {
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--ink-strong);
  margin: 0;
}
h2 {
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.005em;
  color: var(--ink-strong);
  margin: 0 0 var(--sp-3);
}
h2::before {
  content: "";
  display: inline-block;
  width: 4px;
  height: 14px;
  border-radius: 2px;
  background: var(--gradient);
  vertical-align: -1px;
  margin-right: 8px;
}
h3 { font-size: 14px; font-weight: 600; margin: 0 0 var(--sp-2); }

.muted { color: var(--ink-muted); }
.small { font-size: 12px; }
.xs { font-size: 11px; line-height: 1.4; }
.error { color: var(--danger); }
.ok { color: var(--ok); }
.hidden { display: none !important; }

/* ===== Panels (cards) ===== */
.panel {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: var(--sp-5);
  margin-bottom: var(--sp-4);
  box-shadow: var(--sh-1);
}

/* ===== Metrics ===== */
.metrics {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-3);
  margin-bottom: var(--sp-5);
}
@media (min-width: 640px) { .metrics { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.metric {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: var(--sp-4) var(--sp-5);
  box-shadow: var(--sh-1);
  transition: box-shadow 0.14s ease, transform 0.14s ease, border-color 0.14s ease;
}
.metric:hover {
  box-shadow: var(--sh-2);
  border-color: var(--line-strong);
  transform: translateY(-1px);
}
.metric span {
  display: block;
  color: var(--ink-muted);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.02em;
}
.metric strong {
  display: block;
  margin-top: var(--sp-2);
  font-size: 30px;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.1;
  color: var(--ink-strong);
  font-variant-numeric: tabular-nums;
}
.metric.danger { background: var(--danger-soft); border-color: #fecaca; }
.metric.danger strong { color: var(--danger); }

/* ===== Grid (panels in 2-col) ===== */
.grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-3);
}

/* ===== Forms ===== */
.form-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--sp-3);
}
label {
  display: grid;
  gap: var(--sp-1);
  color: var(--ink-muted);
  font-size: 12px;
  font-weight: 500;
}
input, textarea, select {
  width: 100%;
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-sm);
  padding: 9px 12px;
  color: var(--ink);
  font-size: 14px;
  transition: border-color 0.12s ease, box-shadow 0.12s ease;
}
input:hover, textarea:hover, select:hover { border-color: var(--ink-subtle); }
input:focus, textarea:focus, select:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
textarea { min-height: 96px; resize: vertical; line-height: 1.55; }

.actions {
  display: flex;
  gap: var(--sp-2);
  align-items: center;
  flex-wrap: wrap;
  margin-top: var(--sp-3);
}

/* ===== Tables ===== */
table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
th, td {
  padding: 12px 10px;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--line);
}
th {
  color: var(--ink-muted);
  font-weight: 600;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  background: var(--surface-2);
  border-bottom: 1px solid var(--line);
}
tbody tr { transition: background 0.1s ease; }
tbody tr:hover { background: var(--surface-2); }
tbody tr:last-child td { border-bottom: none; }

/* Test rows highlight */
tr.test-row { background: linear-gradient(0deg, transparent, rgba(245, 158, 11, 0.04)); }
tr.test-row:hover { background: rgba(245, 158, 11, 0.07); }

/* Name column compact */
.col-name { max-width: 150px; min-width: 90px; }
.col-name .name {
  font-weight: 600;
  color: var(--ink-strong);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ellipsis { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 210px; }

/* Multi-link column (员工列表/结果列表 链接 칸) */
.col-links { min-width: 150px; }
.col-links .link {
  display: block;
  padding: 2px 0;
  font-size: 13px;
  font-weight: 500;
}
.col-links .link.sub { color: var(--ink-muted); font-size: 12px; font-weight: 400; }
.col-links .link.sub:hover { color: var(--accent); }
.col-links .link-row-sub {
  margin-top: var(--sp-2);
  padding-top: var(--sp-2);
  border-top: 1px dashed var(--line);
  display: flex;
  gap: var(--sp-3);
}
.col-links .link-row-sub .link { display: inline; padding: 0; }
.col-links .link-done { color: var(--ok) !important; }

.col-action { max-width: 240px; }
.col-evidence { max-width: 320px; font-size: 13px; color: var(--ink-muted); line-height: 1.5; }

/* 结果列表 — 评分细分 / 自评对比 / 悬停详情 (2026-06) */
.score-cell { white-space: nowrap; line-height: 1.3; }
.score-cell .score-total { font-weight: 700; font-size: 15px; }
.score-cell.self .score-total { font-weight: 600; color: var(--ink-muted); }
.score-cell .score-abc { display: block; font-size: 11px; color: var(--ink-muted); margin-top: 1px; }
.score-cell .diff { display: inline-block; margin-top: 3px; font-size: 11px; padding: 0 6px; border-radius: 7px; border: 1px solid transparent; white-space: nowrap; }
.diff.diff-neg { color: var(--warn); background: var(--warn-soft); border-color: #facc15; }
.diff.diff-pos { color: var(--ok); background: var(--ok-soft); border-color: #a7e3c8; }
.diff.diff-zero { color: var(--ink-muted); background: transparent; }
.hovercell { position: relative; max-width: 130px; cursor: default; }
.hovercell .clip { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 12px; color: var(--ink-muted); line-height: 1.45; }
.hovercell .full {
  display: none; position: absolute; z-index: 60; right: 0; top: calc(100% + 4px);
  width: 420px; max-width: 56vw; max-height: 340px; overflow-y: auto;
  background: #fff; border: 1px solid #e3e3e6; border-radius: 8px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.18); padding: 12px 14px;
  font-size: 13px; line-height: 1.65; color: #20242e; white-space: pre-wrap; text-align: left;
}
.hovercell:hover .full { display: block; }

/* ===== Badges ===== */
.badge {
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
  height: 22px;
  padding: 0 10px;
  border-radius: 999px;
  border: 1px solid var(--line-strong);
  color: var(--ink-muted);
  background: var(--surface);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-decoration: none;
}
.badge:hover { text-decoration: none; }
.badge.ok { color: var(--ok); border-color: #a7e3c8; background: var(--ok-soft); }
.badge.warn { color: var(--warn); border-color: #facc15; background: var(--warn-soft); }
.badge.danger { color: var(--danger); border-color: #fca5a5; background: var(--danger-soft); }
.badge.primary { color: #fff; border-color: var(--accent); background: var(--accent); }
.badge.primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); color: #fff; }

/* ===== Tree (files panel) ===== */
.tree {
  margin-top: var(--sp-4);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: var(--sp-4);
  background: var(--surface-2);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 13px;
  max-height: 560px;
  overflow: auto;
}
.tree-root { margin-bottom: var(--sp-2); color: var(--ink-strong); }
.tree-dept { margin: var(--sp-3) 0 var(--sp-1) var(--sp-3); color: var(--ink-strong); }
.tree-emp { margin: var(--sp-2) 0 var(--sp-1) var(--sp-5); line-height: 1.7; }
.tree-files { margin: 0 0 var(--sp-2) var(--sp-7); padding: 0; list-style: none; color: var(--ink-muted); }
.tree-files li { padding: 1px 0; }
.tree-empty { margin-left: var(--sp-7); font-size: 12px; color: var(--ink-subtle); font-style: italic; }
.tree-subdir { margin: 2px 0 0 var(--sp-7); font-size: 12px; font-weight: 600; color: var(--ink-strong); }
.tree-subfiles { margin-left: calc(var(--sp-7) + var(--sp-3)); }
.seg-filter { display: inline-flex; border: 1px solid var(--line); border-radius: 999px; overflow: hidden; margin: 6px 0 2px; }
.seg-filter .seg { border: none; background: transparent; padding: 6px 16px; font-size: 13px; color: var(--ink-muted); cursor: pointer; border-radius: 0; }
.seg-filter .seg + .seg { border-left: 1px solid var(--line); }
.seg-filter .seg span { font-weight: 600; margin-left: 2px; }
.seg-filter .seg:hover { background: var(--surface-2); color: var(--ink-strong); }
.seg-filter .seg.active { background: var(--accent); color: #fff; }
.seg-filter .seg.active span { color: #fff; }
.dot { display: inline-block; margin-right: 4px; }
.dot.ok { color: var(--ok); }
.dot.off { color: var(--ink-subtle); }

/* ===== Login panel ===== */
.login {
  width: min(420px, calc(100vw - 32px));
  margin: 12vh auto;
  padding: var(--sp-6);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-3);
}
.login h1 { font-size: 20px; margin-bottom: var(--sp-2); }
.login p.muted { margin: 0 0 var(--sp-5); }
.login label { margin-bottom: var(--sp-4); }

/* ===== Submit shell (used by review/process pages too) ===== */
.submit-shell { max-width: 1120px; margin: 0 auto; padding: var(--sp-5); }
.section-title {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-3);
}

/* ===== Responsive ===== */
@media (max-width: 1000px) {
  .app { grid-template-columns: 1fr; }
  .rail { position: static; height: auto; border-right: 0; border-bottom: 1px solid var(--line); padding: var(--sp-3) var(--sp-4); }
  .nav { flex-direction: row; flex-wrap: wrap; }
  .nav button { width: auto; }
  .brand { margin-bottom: var(--sp-3); }
  .metrics, .grid, .form-grid { grid-template-columns: 1fr; }
  .main, .submit-shell { padding: var(--sp-4); }
  h1 { font-size: 20px; }
}