/* Скин v2 «Штурвал» — общий слой поверх офисных модулей.
   Включается атрибутом html[data-skin="v2"] (ставит хук в app.py).
   "v2h" — только шапка (модули со своим дизайном, напр. /orders).
   !important — только палитра, шрифты и фокус; раскладку не трогаем. */

/* ---------- Ф1. Токены ---------- */
html[data-skin="v2"]:not([data-theme="light"]) {
  color-scheme: dark;
  --sk-bg: #07131a;
  --sk-bg-2: #0b1a22;
  --sk-panel: #10222b;
  --sk-panel-2: #142a34;
  --sk-input: #0c1d25;
  --sk-line: rgba(212, 165, 116, 0.22);
  --sk-border: #22404a;
  --sk-fg: #e8edf0;
  --sk-fg-dim: #9fb2b8;
  --sk-fg-mute: #6b7d84;
  --sk-brass: #d4a574;
  --sk-teal: #3d9b8f;
  --sk-btn: #2f857a;
  --sk-btn-hover: #379a8d;
  --sk-ok: #3d9b8f;
  --sk-warn: #d4a574;
  --sk-err: #d96a5a;
  --sk-idle: #6b7d84;
  --sk-head-bg: rgba(212, 165, 116, 0.06);
  --sk-row-hover: rgba(61, 155, 143, 0.08);

  /* Переменные модулей → токены скина */
  --bg: var(--sk-bg);
  --bg0: var(--sk-bg);
  --bg1: var(--sk-bg-2);
  --bg2: var(--sk-bg-2);
  --panel: var(--sk-panel);
  --panel2: var(--sk-panel-2);
  --panel-2: var(--sk-panel-2);
  --panel-solid: var(--sk-panel);
  --card-bg: var(--sk-panel);
  --text: var(--sk-fg);
  --fg: var(--sk-fg);
  --muted: var(--sk-fg-dim);
  --accent: var(--sk-btn);
  --accent-2: var(--sk-btn);
  --border: var(--sk-border);
  --line: var(--sk-line);
  --input: var(--sk-input);
  --ok: #4fb3a5;
  --warn: var(--sk-warn);
  --fail: var(--sk-err);
  --danger: var(--sk-err);
}

html[data-skin="v2"][data-theme="light"] {
  color-scheme: light;
  --sk-bg: #f3f1ea;
  --sk-bg-2: #ebe7dc;
  --sk-panel: #ffffff;
  --sk-panel-2: #f7f4ec;
  --sk-input: #ffffff;
  --sk-line: rgba(160, 112, 62, 0.28);
  --sk-border: #d9d1c2;
  --sk-fg: #16252b;
  --sk-fg-dim: #4f6168;
  --sk-fg-mute: #7b8a90;
  --sk-brass: #a8743f;
  --sk-teal: #2a7d72;
  --sk-btn: #2a7d72;
  --sk-btn-hover: #23695f;
  --sk-ok: #2a7d72;
  --sk-warn: #a8743f;
  --sk-err: #c0503f;
  --sk-idle: #7b8a90;
  --sk-head-bg: rgba(168, 116, 63, 0.07);
  --sk-row-hover: rgba(42, 125, 114, 0.06);

  --bg: var(--sk-bg);
  --panel: var(--sk-panel);
  --panel2: var(--sk-panel-2);
  --panel-2: var(--sk-panel-2);
  --text: var(--sk-fg);
  --muted: var(--sk-fg-dim);
  --accent: var(--sk-btn);
  --accent-2: var(--sk-btn);
  --border: var(--sk-border);
  --line: var(--sk-line);
  --input: var(--sk-input);
  --ok: var(--sk-ok);
  --warn: var(--sk-warn);
  --fail: var(--sk-err);
  --danger: var(--sk-err);
}

html[data-skin="v2"][data-theme="light"] .stat,
html[data-skin="v2"][data-theme="light"] .kpi,
html[data-skin="v2"][data-theme="light"] .metric {
  background: var(--sk-panel-2) !important;
}

html[data-skin="v2"] body {
  font-family: "Manrope", "Segoe UI", system-ui, sans-serif !important;
  background: radial-gradient(1200px 500px at 50% -200px, var(--sk-bg-2), var(--sk-bg) 70%) fixed !important;
  color: var(--sk-fg);
  font-size: 14px;
}

html[data-skin="v2"] code,
html[data-skin="v2"] pre,
html[data-skin="v2"] kbd,
html[data-skin="v2"] .mono {
  font-family: "JetBrains Mono", ui-monospace, monospace !important;
}

html[data-skin="v2"] table,
html[data-skin="v2"] .num,
html[data-skin="v2"] .badge,
html[data-skin="v2"] .stat,
html[data-skin="v2"] .kpi {
  font-variant-numeric: tabular-nums;
}

html[data-skin^="v2"] :focus-visible {
  outline: 2px solid var(--sk-teal, #3d9b8f) !important;
  outline-offset: 2px;
}

/* ---------- Ф2. Шапка ---------- */
html[data-skin^="v2"] .wrap > h1,
html[data-skin^="v2"] .page-head h1 {
  font-family: "Unbounded", "Manrope", system-ui, sans-serif !important;
  font-weight: 700;
  letter-spacing: 0.01em;
}

html[data-skin^="v2"] h1 .sk-ico {
  width: 1.6em;
  height: 1.6em;
  border-radius: 0.35em;
  vertical-align: middle;
  margin: -0.2em 0.45em 0 0;
  box-shadow: 0 0 0 1px rgba(212, 165, 116, 0.25);
  flex: none;
}

html[data-skin^="v2"] .sk-crumb {
  color: var(--sk-fg-mute, #6b7d84);
  font-size: 0.86rem;
  margin-left: 0.4em;
}
html[data-skin^="v2"] .sk-crumb a {
  color: var(--sk-brass, #d4a574);
  text-decoration: none;
}
html[data-skin^="v2"] .sk-crumb a:hover { text-decoration: underline; }

html[data-skin="v2"] a.back {
  color: var(--sk-fg-dim) !important;
}
html[data-skin="v2"] a.back:hover { color: var(--sk-brass) !important; }

html[data-skin="v2"] .page-head {
  padding-bottom: 10px;
  border-bottom: 1px solid var(--sk-line);
}

html[data-skin="v2"] h2 {
  font-family: "Unbounded", "Manrope", system-ui, sans-serif;
  font-weight: 600;
}

/* ---------- Ф3. Панели, вкладки, кнопки, таблицы ---------- */
/* Кнопки и панели берут --accent / --panel из модулей — их подменяют токены выше.
   Явно трогаем только вкладки, вторичные кнопки, поля и таблицы. */
html[data-skin="v2"] .panel-head {
  border-bottom-color: var(--sk-line) !important;
  background: var(--sk-head-bg);
}

html[data-skin="v2"] .tabs button,
html[data-skin="v2"] .tabs .tab {
  background: transparent !important;
  color: var(--sk-fg-dim) !important;
  border-color: var(--sk-border) !important;
}
html[data-skin="v2"] .tabs button:hover,
html[data-skin="v2"] .tabs .tab:hover {
  color: var(--sk-fg) !important;
  border-color: var(--sk-line) !important;
}
html[data-skin="v2"] .tabs button.active,
html[data-skin="v2"] .tabs .tab.active {
  background: rgba(212, 165, 116, 0.10) !important;
  color: var(--sk-fg) !important;
  border-color: var(--sk-brass) !important;
  box-shadow: inset 0 -2px 0 var(--sk-brass);
}

html[data-skin="v2"] button.secondary:hover:not(:disabled),
html[data-skin="v2"] button.ghost:hover:not(:disabled) {
  border-color: var(--sk-brass);
}

html[data-skin="v2"] input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]),
html[data-skin="v2"] select,
html[data-skin="v2"] textarea {
  background: var(--sk-input) !important;
  border-color: var(--sk-border) !important;
  color: var(--sk-fg) !important;
}
html[data-skin="v2"] input:focus,
html[data-skin="v2"] select:focus,
html[data-skin="v2"] textarea:focus {
  border-color: var(--sk-teal) !important;
}
html[data-skin="v2"] input[type="checkbox"],
html[data-skin="v2"] input[type="radio"] {
  accent-color: var(--sk-teal);
}

html[data-skin="v2"] table th {
  color: var(--sk-fg-dim) !important;
  background: var(--sk-panel-2) !important;
  border-color: var(--sk-line) !important;
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.03em;
}
html[data-skin="v2"] table td {
  border-color: var(--sk-border) !important;
}
html[data-skin="v2"] table tbody tr:hover td {
  background: var(--sk-row-hover);
}

html[data-skin="v2"] .hint code,
html[data-skin="v2"] p code {
  background: var(--sk-panel-2) !important;
}

html[data-skin="v2"] .hint a,
html[data-skin="v2"] p a,
html[data-skin="v2"] td a {
  color: var(--sk-teal);
}

html[data-skin="v2"] ::selection { background: rgba(61, 155, 143, 0.35); }

html[data-skin="v2"] * {
  scrollbar-color: var(--sk-border) transparent;
}