/* ===========================================================
 * Theme compatibility and dark-surface repair layer.
 *
 * This file is injected after page-owned styles. The html[data-theme]
 * specificity intentionally beats legacy inline :root declarations while
 * all values stay aligned with tokens.css.
 * =========================================================== */

html[data-theme='dark'],
html[data-theme='dark'] body {
  color-scheme: dark;

  --c-bg: #121416;
  --c-bg2: #181b1f;
  --c-bg3: #22262b;
  --c-card: #1a1d21;
  --c-card-hover: #24282e;
  --c-card-subtle: #1e2227;
  --c-card-active: #2a2f36;

  --c-border-faint: rgba(232,235,238,.07);
  --c-border-subtle: rgba(232,235,238,.075);
  --c-border: rgba(232,235,238,.11);
  --c-border-hi: rgba(232,235,238,.18);
  --c-border-solid: #353b43;

  --c-table-head: #24282e;
  --c-table-row: #1a1d21;
  --c-table-row-alt: #1d2025;
  --c-table-row-hover: #282d34;
  --c-sticky-shadow: color-mix(in srgb, var(--c-shadow-base) 36%, transparent);

  --c-text: #f3f4f5;
  --c-text2: #d4d8dc;
  --c-text3: #a0a7b0;
  --c-text4: #7e8690;
  --c-muted: var(--c-text3);

  --c-primary: #f4b740;
  --c-primary-hover: #ffd166;
  --c-accent: #f4b740;
  --c-accent-hover: #ffd166;
  --c-accent-violet: #dc9b24;
  --c-accent-muted: #b47a16;
  --c-accent-rgb: 244, 183, 64;
  --c-on-accent: #241805;

  --c-good: #55c987;
  --c-warn: #f79b45;
  --c-bad: #ff8582;
  --c-info: #6bb8eb;
  --c-green: var(--c-good);
  --c-yellow: var(--c-warn);
  --c-red: var(--c-bad);
  --c-blue: var(--c-info);

  --c-good-bg: rgba(85,201,135,.13);
  --c-warn-bg: rgba(247,155,69,.13);
  --c-bad-bg: rgba(255,133,130,.12);
  --c-info-bg: rgba(107,184,235,.13);
  --c-good-border: rgba(85,201,135,.30);
  --c-warn-border: rgba(247,155,69,.30);
  --c-bad-border: rgba(255,133,130,.30);
  --c-info-border: rgba(107,184,235,.30);

  --c-overlay: rgba(9,10,11,.70);
  --c-modal-bg: #20242a;
  --c-modal-border: var(--c-border);
  --c-modal-input-bg: #171a1e;
  --c-modal-input-border: var(--c-border);
  --c-modal-footer-from: rgba(32,36,42,0);
  --c-modal-footer-to: #20242a;
  --c-tooltip-bg: #2a2f36;
  --c-tooltip-text: #f3f4f5;
  --c-input-bg: #171a1e;
  --c-input-bg-hover: #20242a;
  --c-input-border: var(--c-border);
  --c-input-ring: rgba(244,183,64,.48);
  --c-footer-border: rgba(232,235,238,.10);

  /* Legacy aliases used by older page-local styles. */
  --bg: var(--c-bg);
  --bg2: var(--c-bg2);
  --bg3: var(--c-bg3);
  --card: var(--c-card);
  --card2: var(--c-card-subtle);
  --border: var(--c-border);
  --text: var(--c-text);
  --sub: var(--c-text2);
  --muted: var(--c-text3);
  --accent: var(--c-accent);
}

html[data-theme='light'],
html[data-theme='light'] body {
  color-scheme: light;
  --c-bg: #f8fafc;
  --c-bg2: #ffffff;
  --c-bg3: #e2e8f0;
  --c-card: #ffffff;
  --c-card-hover: #f1f5f9;
  --c-card-subtle: #f8fafc;
  --c-card-active: #e2e8f0;
  --c-border: #e2e8f0;
  --c-border-faint: #f1f5f9;
  --c-border-hi: #cbd5e1;
  --c-border-solid: #cbd5e1;
  --c-text: #1e293b;
  --c-text2: #475569;
  --c-text3: #64748b;
  --c-text4: #94a3b8;
  --c-muted: #64748b;
  --c-primary: #e59a12;
  --c-primary-hover: #c77e08;
  --c-accent: #e59a12;
  --c-accent-hover: #c77e08;
  --c-on-accent: #241805;
  --c-green: #16a34a;
  --c-yellow: #d97706;
  --c-red: #dc2626;
  --c-blue: #2563eb;
  --c-table-head: #f8fafc;
  --c-table-row: #ffffff;
  --c-table-row-alt: #f8fafc;
  --c-table-row-hover: #f1f5f9;
  --c-border-subtle: #f1f5f9;
  --c-input-bg: #ffffff;
  --c-input-bg-hover: #f1f5f9;
  --c-input-border: #e2e8f0;
  --c-modal-bg: #ffffff;
  --c-modal-border: #e2e8f0;
  --c-modal-input-bg: #f8fafc;
  --c-modal-input-border: #e2e8f0;
  --bg: var(--c-bg);
  --bg2: var(--c-bg2);
  --bg3: var(--c-bg3);
  --card: var(--c-card);
  --card2: var(--c-card-subtle);
  --border: var(--c-border);
  --text: var(--c-text);
  --sub: var(--c-text2);
  --muted: var(--c-text3);
  --accent: var(--c-accent);
}

html[data-theme='dark'] body,
html[data-theme='light'] body {
  background: var(--c-bg) !important;
  color: var(--c-text) !important;
}

/* Shared dark controls. Native color-scheme alone is not consistent across
   Chromium input types, so these surfaces are explicit and opaque. */
html[data-theme='dark'] :where(input, select, textarea) {
  background-color: var(--c-input-bg);
  border-color: var(--c-input-border);
  color: var(--c-text);
}
html[data-theme='dark'] :where(input, select, textarea):hover {
  border-color: var(--c-border-hi);
}
html[data-theme='dark'] :where(input, select, textarea):focus {
  border-color: var(--c-accent);
  outline-color: var(--c-input-ring);
}
html[data-theme='dark'] :where(input, textarea)::placeholder {
  color: var(--c-text4);
  opacity: 1;
}
html[data-theme='dark'] option {
  background: var(--c-bg2);
  color: var(--c-text);
}
html[data-theme='dark'] :where(input[type='checkbox'], input[type='radio']) {
  accent-color: var(--c-accent);
}
html[data-theme='dark'] :where(
  .btn.primary, .tt-btn.primary, .button.primary, .btn-primary,
  button.primary, .segmented button.active, .tt-tabs .tt-tab.active
) {
  color: var(--c-on-accent);
}

/* Common surfaces: this catches legacy pages that only supplied a class name
   and relied on transparent white cards. Page-specific semantic backgrounds
   still win because :where() contributes no extra specificity. */
html[data-theme='dark'] :where(
  .card, .panel, .table-shell, .table-panel, .table-wrap, .toolbar,
  .section, .summary, .metric, .kpi, .kpi-card, .status-card,
  .task-card, .flow-card, .queue-card, .helper-card, .goods-card,
  .import-section, .import-card, .import-summary-card, .import-file-card,
  .owner-cluster, .owner-card, .signal-card, .filter-item, .mini-card,
  .preview-table-wrap, .role-card, .store-card, .alert-card
) {
  background-color: var(--c-card);
  border-color: var(--c-border);
  color: var(--c-text);
}
html[data-theme='dark'] :where(.modal, .dialog, .drawer, .popover, .dropdown-menu) {
  background-color: var(--c-modal-bg);
  border-color: var(--c-modal-border);
  color: var(--c-text);
}

html[data-theme='dark'] :where(table, .table, .tt-table, .data-table) {
  color: var(--c-text);
}
html[data-theme='dark'] :where(table th, .table th, .tt-table th, .data-table th) {
  background-color: var(--c-table-head);
  border-color: var(--c-border);
  color: var(--c-text2);
}
html[data-theme='dark'] :where(table td, .table td, .tt-table td, .data-table td) {
  background-color: var(--c-table-row);
  border-color: var(--c-border-subtle);
  color: var(--c-text2);
}
html[data-theme='dark'] :where(
  table tbody tr:nth-child(even) td,
  .table tbody tr:nth-child(even) td,
  .tt-table tbody tr:nth-child(even) td,
  .data-table tbody tr:nth-child(even) td
) {
  background-color: var(--c-table-row-alt);
}
html[data-theme='dark'] :where(
  table tbody tr:hover td,
  .table tbody tr:hover td,
  .tt-table tbody tr:hover td,
  .data-table tbody tr:hover td
) {
  background-color: var(--c-table-row-hover);
}

html[data-theme='dark'] ::selection {
  background: var(--c-accent-28);
  color: var(--c-text);
}
html[data-theme='dark'] * {
  scrollbar-color: var(--c-border-hi) var(--c-bg2);
}
html[data-theme='dark'] *::-webkit-scrollbar { width: 10px; height: 10px; }
html[data-theme='dark'] *::-webkit-scrollbar-track { background: var(--c-bg2); }
html[data-theme='dark'] *::-webkit-scrollbar-thumb {
  background: var(--c-border-hi);
  border: 2px solid var(--c-bg2);
  border-radius: 8px;
}

/* ===========================================================
 * 统一基线（round 3 · design-language.md §2）
 *
 * 本段由 shell.js 在「每个页面内联 <style> 之后」注入（appendChild 到
 * head 末尾），因此与页面内联规则同特异性时本段胜出；不需要 !important。
 * 只归一「共享语义元素」（表格/徽章/页面标题）；页面私有类名
 * （.foo-table、.dev-btn 等）的漂移值在各页批次内收敛
 * （见 tt-ui-tuning/overhaul/per-page-changelog.md）。
 * 双主题通用：所有值来自 tokens.css，浅色主题自动对齐。
 * =========================================================== */

/* 表格：表头 11px/510/三级灰，正文 12px/400/二级灰
   （消灭 8.5–13px 字号、400–750 字重的页面级漂移） */
body table { font-size: var(--fs-small, 12px); }
body table th {
  font-size: var(--fs-label, 11px);
  font-weight: var(--fw-medium, 510);
  color: var(--c-text3);
  letter-spacing: 0;
}
body table td {
  font-size: var(--fs-small, 12px);
  font-weight: var(--fw-normal, 400);
  color: var(--c-text2);
}

/* 徽章/标签：11px/510（圆角 4px 已由 tt-ui-kit 统一；这里补字号字重） */
body .tag,
body .pill,
body .badge,
body .chip {
  font-size: var(--fs-label, 11px);
  font-weight: var(--fw-medium, 510);
}

/* 页面标题节奏：h1 20px/590，h2 16px/590（消灭 11–26px、400–750 漂移） */
body h1 {
  font-size: var(--fs-heading-md, 20px);
  font-weight: var(--fw-semibold, 590);
  line-height: var(--lh-heading, 1.18);
  letter-spacing: -0.01em;
}
body h2 {
  font-size: var(--fs-heading-xs, 14px);
  font-weight: var(--fw-semibold, 590);
  line-height: 1.3;
}
/* 例外：弹窗/抽屉里的标题不套页面标题规格 */
body .modal h1, body .dialog h1, body .drawer h1,
body .modal h2, body .dialog h2, body .drawer h2 {
  font-size: var(--fs-heading-xs, 14px);
  font-weight: var(--fw-semibold, 590);
}