/**
 * OKP-inspired design tokens (light / dark)
 * Source: KT DESIGN.md — visual only; does not change app behavior.
 *
 * Usage:
 *   :root              → light (default)
 *   [data-theme="dark"] → dark
 *   Toggle via js/themeToggle.js (localStorage key: kt-theme)
 */

:root {
  color-scheme: light;
  --bg: #F5F5F7;
  --surface: #FFFFFF;
  --surface-2: #FAFAFC;
  --text: #1D1D1F;
  --text-2: #6E6E73;
  --hairline: rgba(0, 0, 0, 0.08);
  --accent: #0071E3;
  --positive: #248A3D;
  --negative: #D70015;
  --attention: #C93400;
  --muted-series: #C7C7CC;

  --radius-card: 20px;
  --radius-inner: 12px;
  --radius-chip: 999px;

  --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.04), 0 8px 24px rgba(0, 0, 0, 0.06);
  --header-frost: rgba(255, 255, 255, 0.72);

  --font-sans: -apple-system, BlinkMacSystemFont, 'Inter Variable', Inter, 'Segoe UI', system-ui, sans-serif;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;

  /* Bridge for staffing/sales Excel-style table headers */
  --header-bg: var(--surface-2);
  --header-border: var(--hairline);

  /* Staffing/Sales sheet vars (light = Excel-like) */
  --grid: #d0d0d0;
  --grid-dark: #9a9a9a;
  --input-bg: #fff2cc;
  --edit-highlight: #e8f4fd;
  --edit-border: #0071E3;
  --zebra: #f5f5f5;
  --row-hover: #ebebeb;
  --totals-bg: #f7f7f7;
}

[data-theme="dark"] {
  color-scheme: dark;
  --bg: #000000;
  --surface: #1C1C1E;
  --surface-2: #2C2C2E;
  --text: #F5F5F7;
  --text-2: #98989D;
  --hairline: rgba(255, 255, 255, 0.10);
  --accent: #2997FF;
  --positive: #30D158;
  --negative: #FF453A;
  --attention: #FF9F0A;
  --muted-series: #48484A;

  --shadow-card: none;
  --header-frost: rgba(28, 28, 30, 0.72);

  --header-bg: #2C2C2E;
  --header-border: rgba(255, 255, 255, 0.12);

  /* Dark sheet: no cream inputs / no light zebra */
  --grid: rgba(255, 255, 255, 0.10);
  --grid-dark: rgba(255, 255, 255, 0.18);
  --input-bg: #252528;
  --edit-highlight: #1A3355;
  --edit-border: #2997FF;
  --zebra: #161618;
  --row-hover: #2A2A2E;
  --totals-bg: #1C1C1E;
}

/* --- Additive utilities (safe; pages opt in gradually) --- */

/* Override common page utility backgrounds without fighting component layouts */
html.kt-theme-ready,
html.kt-theme-ready body {
  background-color: var(--bg) !important;
  color: var(--text);
  font-family: var(--font-sans);
}

html.kt-theme-ready body.bg-slate-50,
html.kt-theme-ready body.bg-neutral-50,
html.kt-theme-ready body.bg-white {
  background-color: var(--bg) !important;
}

.kt-card {
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
}

.kt-surface {
  background: var(--surface);
  color: var(--text);
}

.kt-text-secondary {
  color: var(--text-2);
}

.kt-tabular {
  font-variant-numeric: tabular-nums;
}

/* Frosted sticky header strip (optional class) */
.kt-header-frost {
  background: var(--header-frost);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border-bottom: 1px solid var(--hairline);
}

/* Theme toggle control */
.kt-theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 1px solid transparent;
  border-radius: var(--radius-chip);
  background: rgba(255, 255, 255, 0.18);
  color: #fff;
  cursor: pointer;
  transition: background 0.15s ease, transform 0.15s ease, border-color 0.15s ease;
  flex-shrink: 0;
}

.kt-theme-toggle:hover {
  background: rgba(255, 255, 255, 0.28);
}

.kt-theme-toggle:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.kt-theme-toggle svg {
  width: 18px;
  height: 18px;
  display: block;
}

.kt-theme-toggle .kt-icon-moon {
  display: none;
}

.kt-theme-toggle .kt-icon-sun {
  display: block;
}

[data-theme="dark"] .kt-theme-toggle .kt-icon-moon {
  display: block;
}

[data-theme="dark"] .kt-theme-toggle .kt-icon-sun {
  display: none;
}

/* When header is not on the blue gradient (future shell), keep contrast */
.kt-theme-toggle.kt-theme-toggle--on-surface {
  background: var(--surface-2);
  color: var(--text);
  border-color: var(--hairline);
}

.kt-theme-toggle.kt-theme-toggle--on-surface:hover {
  background: var(--surface);
}

@media (prefers-reduced-motion: reduce) {
  .kt-theme-toggle,
  .kt-card {
    transition: none !important;
  }
}

/* ========== Header / nav gradient (replaces inline light-blue wash) ========== */

.kt-nav-bar {
  background: linear-gradient(to right, #C5DBE8, #7BA3C4, #25538e);
  align-items: flex-end;
  padding-bottom: 12px;
}

[data-theme="dark"] .kt-nav-bar {
  /* Deep navy / charcoal — no white wash on the left */
  background: linear-gradient(to right, #0B1220, #132A4A, #1A4A7A);
}

/* ========== Scrollbars (theme-aware) ========== */

html.kt-theme-ready {
  scrollbar-width: thin;
  scrollbar-color: var(--muted-series) var(--surface-2);
}

html.kt-theme-ready * {
  scrollbar-width: thin;
  scrollbar-color: var(--muted-series) var(--surface-2);
}

html.kt-theme-ready ::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

html.kt-theme-ready ::-webkit-scrollbar-track {
  background: var(--surface-2);
}

html.kt-theme-ready ::-webkit-scrollbar-thumb {
  background: var(--muted-series);
  border-radius: 999px;
  border: 2px solid var(--surface-2);
}

html.kt-theme-ready ::-webkit-scrollbar-thumb:hover {
  background: var(--text-2);
}

html.kt-theme-ready ::-webkit-scrollbar-corner {
  background: var(--surface-2);
}

/* ========== Phase 2: shared shell / component overrides ========== */

html.kt-theme-ready .settings-menu {
  background: var(--surface) !important;
  border: 1px solid var(--hairline) !important;
  box-shadow: var(--shadow-card) !important;
  color: var(--text);
}

html.kt-theme-ready .settings-menu-item {
  color: var(--text) !important;
  border-bottom-color: var(--hairline) !important;
}

html.kt-theme-ready .settings-menu-item:hover {
  background: var(--surface-2) !important;
}

html.kt-theme-ready .settings-menu-item.role-display {
  background: var(--surface-2) !important;
  color: var(--text-2) !important;
}

html.kt-theme-ready .settings-menu-item.role-display:hover {
  background: var(--surface-2) !important;
}

html.kt-theme-ready .modal {
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
}

html.kt-theme-ready .card,
html.kt-theme-ready .card-sm {
  background: var(--surface) !important;
  border-color: var(--hairline) !important;
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  color: var(--text);
}

html.kt-theme-ready input[type='text'],
html.kt-theme-ready input[type='number'],
html.kt-theme-ready input[type='email'],
html.kt-theme-ready input[type='password'],
html.kt-theme-ready select,
html.kt-theme-ready textarea {
  background: var(--surface-2);
  color: var(--text);
  border-color: var(--hairline);
}

html.kt-theme-ready .btn-primary {
  background: var(--accent) !important;
  border-color: var(--accent);
}

/* Table selection (staffing/sales) — accent-tinted, no layout-shifting border */
html.kt-theme-ready tbody tr.selected-row td,
html.kt-theme-ready tbody tr.selected-row td.freeze-name,
html.kt-theme-ready tbody tr.selected-row td.input-cell {
  background-color: color-mix(in srgb, var(--accent) 28%, var(--surface)) !important;
}

html.kt-theme-ready tbody tr.selected-row:hover td,
html.kt-theme-ready tbody tr.selected-row:hover td.input-cell {
  background-color: color-mix(in srgb, var(--accent) 18%, var(--surface)) !important;
}

/* Labor config / generic panels */
html.kt-theme-ready .left-menu,
html.kt-theme-ready .menu-section,
html.kt-theme-ready .content-panel,
html.kt-theme-ready .panel,
html.kt-theme-ready .drawer,
html.kt-theme-ready .side-nav {
  background-color: var(--surface);
  color: var(--text);
  border-color: var(--hairline);
}

/* Sticky table cells that hardcode #fff in page CSS */
html.kt-theme-ready .freeze-name,
html.kt-theme-ready thead th,
html.kt-theme-ready tbody td.freeze-name,
html.kt-theme-ready .totals-row td {
  background-color: var(--surface) !important;
  color: var(--text);
  border-color: var(--hairline);
}

html.kt-theme-ready thead th {
  background-color: var(--header-bg) !important;
  color: var(--text);
}

/* Landing / Tailwind card shells that still use bg-white */
html.kt-theme-ready .bg-white {
  background-color: var(--surface) !important;
  color: var(--text);
}

html.kt-theme-ready .border-slate-200,
html.kt-theme-ready .border-neutral-200 {
  border-color: var(--hairline) !important;
}

html.kt-theme-ready .text-slate-900,
html.kt-theme-ready .text-neutral-900,
html.kt-theme-ready .text-slate-800 {
  color: var(--text) !important;
}

html.kt-theme-ready .text-slate-600,
html.kt-theme-ready .text-neutral-600,
html.kt-theme-ready .text-slate-500,
html.kt-theme-ready .text-slate-400,
html.kt-theme-ready .text-neutral-500,
html.kt-theme-ready .text-gray-500,
html.kt-theme-ready .text-gray-600 {
  color: var(--text-2) !important;
}

/* Headings / body copy generated by Tailwind @apply in styles.css */
html.kt-theme-ready h1,
html.kt-theme-ready h2,
html.kt-theme-ready h3,
html.kt-theme-ready h4,
html.kt-theme-ready h5,
html.kt-theme-ready h6 {
  color: var(--text) !important;
}

html.kt-theme-ready p,
html.kt-theme-ready label,
html.kt-theme-ready .form-group label,
html.kt-theme-ready td,
html.kt-theme-ready th,
html.kt-theme-ready .cell-input,
html.kt-theme-ready input.cell-input {
  color: var(--text);
}

html.kt-theme-ready .no-data-text,
html.kt-theme-ready .empty-state,
html.kt-theme-ready .empty-state-subtext,
html.kt-theme-ready .muted,
html.kt-theme-ready .help-text {
  color: var(--text-2) !important;
}

/* Tabular metrics */
html.kt-theme-ready .kpi-value,
html.kt-theme-ready .col-num,
html.kt-theme-ready .col-wide,
html.kt-theme-ready .col-savings,
html.kt-theme-ready td.col-num,
html.kt-theme-ready .kt-tabular {
  font-variant-numeric: tabular-nums;
}

/* Links on dark surfaces */
html.kt-theme-ready a:not(.settings-menu-item):not([class*="text-white"]) {
  color: var(--accent);
}

/* ========== Staffing / Sales data tables (force theme over page !important) ========== */

html.kt-theme-ready table.sheet,
html.kt-theme-ready .sheet-wrap,
html.kt-theme-ready .totals-wrap,
html.kt-theme-ready .totals-table {
  color: var(--text);
}

html.kt-theme-ready thead th {
  background: var(--header-bg) !important;
  border-color: var(--header-border) !important;
  color: var(--text) !important;
}

html.kt-theme-ready thead th.sortable:hover {
  background: var(--surface-2) !important;
}

html.kt-theme-ready tbody td {
  background: var(--surface) !important;
  border-color: var(--grid) !important;
  color: var(--text) !important;
}

html.kt-theme-ready tbody td.input-cell,
html.kt-theme-ready tbody td.input-cell.freeze-1,
html.kt-theme-ready tbody td.input-cell.freeze-2,
html.kt-theme-ready tbody td.input-cell.freeze-3 {
  background: var(--input-bg) !important;
  color: var(--text) !important;
}

html.kt-theme-ready input.cell-input {
  background: transparent !important;
  color: var(--text) !important;
  -webkit-text-fill-color: var(--text);
}

html.kt-theme-ready tbody tr:nth-child(even) td,
html.kt-theme-ready tbody tr:nth-child(even) td.input-cell {
  background-color: var(--zebra) !important;
}

html.kt-theme-ready tbody tr:hover td,
html.kt-theme-ready tbody tr:hover td.input-cell,
html.kt-theme-ready tbody tr:hover td.freeze-name {
  background-color: var(--row-hover) !important;
}

html.kt-theme-ready tbody tr.selected-row td,
html.kt-theme-ready tbody tr.selected-row td.freeze-name,
html.kt-theme-ready tbody tr.selected-row td.input-cell {
  background-color: color-mix(in srgb, var(--accent) 28%, var(--surface)) !important;
  color: var(--text) !important;
}

html.kt-theme-ready tbody tr.selected-row:hover td,
html.kt-theme-ready tbody tr.selected-row:hover td.input-cell {
  background-color: color-mix(in srgb, var(--accent) 18%, var(--surface)) !important;
}

html.kt-theme-ready .totals-wrap,
html.kt-theme-ready tfoot td,
html.kt-theme-ready tfoot td.freeze-name {
  background: var(--totals-bg) !important;
  color: var(--text) !important;
  border-color: var(--header-border) !important;
}

html.kt-theme-ready .sheet-wrap {
  background: var(--bg) !important;
}

html.kt-theme-ready td.override-cell {
  background: color-mix(in srgb, var(--attention) 22%, var(--surface)) !important;
}

html.kt-theme-ready body.read-only .cell-input {
  color: var(--text) !important;
  -webkit-text-fill-color: var(--text);
}

html.kt-theme-ready body.read-only td.input-cell {
  background: var(--surface) !important;
}

/* Division chips / badges inside cells */
html.kt-theme-ready .division-badge,
html.kt-theme-ready td .badge {
  background: var(--surface-2) !important;
  color: var(--text-2) !important;
  border-color: var(--hairline) !important;
}