/* ============================================================
   FacilityOS — Design System Tokens
   Type: Geist (UI) + Geist Mono (IDs / numbers / timestamps)
   Color: refined teal primary, cool-tinted neutrals,
          status hues at consistent chroma/lightness
   ============================================================ */

:root {
  /* Accent (teal) — overridable by Tweaks via inline --accent on :root */
  --accent: oklch(0.60 0.098 184);
  --accent-strong: oklch(0.52 0.10 184);
  --accent-fg: #ffffff;

  /* Status hues (priority + state) — same L≈0.60 C≈0.13, hue varies */
  --c-critical: oklch(0.585 0.205 25);   /* red    */
  --c-high:     oklch(0.66 0.165 55);    /* orange */
  --c-medium:   oklch(0.74 0.14 80);     /* amber  */
  --c-normal:   oklch(0.62 0.10 184);    /* teal   */
  --c-low:      oklch(0.62 0.035 250);   /* slate  */
  --c-info:     oklch(0.60 0.13 250);    /* blue   */
  --c-done:     oklch(0.62 0.13 155);    /* green  */
  --c-violet:   oklch(0.60 0.16 295);

  /* Neutrals — light (cool tint, hue 250) */
  --bg:        oklch(0.984 0.003 250);
  --surface:   oklch(1 0 0);
  --surface-2: oklch(0.972 0.004 250);
  --surface-3: oklch(0.955 0.005 250);
  --border:    oklch(0.915 0.006 250);
  --border-strong: oklch(0.86 0.008 250);
  --text:      oklch(0.255 0.022 256);
  --text-muted:oklch(0.52 0.018 256);
  --text-faint:oklch(0.64 0.013 256);

  --sidebar-bg:   oklch(1 0 0);
  --sidebar-text: var(--text-muted);
  --sidebar-active-bg: color-mix(in oklch, var(--accent) 12%, var(--surface));
  --sidebar-active-text: var(--accent-strong);

  --shadow-xs: 0 1px 2px oklch(0.4 0.02 256 / 0.06);
  --shadow-sm: 0 1px 3px oklch(0.4 0.02 256 / 0.07), 0 1px 2px oklch(0.4 0.02 256 / 0.05);
  --shadow-md: 0 4px 12px oklch(0.4 0.02 256 / 0.08), 0 2px 4px oklch(0.4 0.02 256 / 0.05);
  --shadow-lg: 0 16px 40px oklch(0.35 0.03 256 / 0.14), 0 4px 12px oklch(0.4 0.02 256 / 0.07);

  /* Geometry — radius is tweakable */
  --radius: 14px;
  --radius-lg: calc(var(--radius) + 4px);
  --radius-md: calc(var(--radius) - 2px);
  --radius-sm: calc(var(--radius) - 6px);
  --radius-xs: calc(var(--radius) - 8px);

  /* Density — row height + padding scale (tweakable) */
  --density: 1;
  --row-h: calc(52px * var(--density));
  --pad: calc(16px * var(--density));

  --sidebar-w: 248px;
  --sidebar-w-collapsed: 72px;
  --topbar-h: 64px;

  --font-sans: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "Geist Mono", ui-monospace, "SF Mono", "JetBrains Mono", monospace;
}

[data-theme="dark"] {
  --accent: oklch(0.72 0.105 184);
  --accent-strong: oklch(0.80 0.11 184);
  --accent-fg: oklch(0.18 0.02 220);

  --c-critical: oklch(0.66 0.185 25);
  --c-high:     oklch(0.72 0.155 55);
  --c-medium:   oklch(0.80 0.135 82);
  --c-normal:   oklch(0.72 0.10 184);
  --c-low:      oklch(0.70 0.03 250);
  --c-info:     oklch(0.70 0.12 250);
  --c-done:     oklch(0.72 0.125 155);
  --c-violet:   oklch(0.70 0.15 295);

  --bg:        oklch(0.185 0.012 256);
  --surface:   oklch(0.225 0.014 256);
  --surface-2: oklch(0.258 0.015 256);
  --surface-3: oklch(0.295 0.016 256);
  --border:    oklch(0.32 0.014 256);
  --border-strong: oklch(0.40 0.016 256);
  --text:      oklch(0.955 0.004 256);
  --text-muted:oklch(0.73 0.014 256);
  --text-faint:oklch(0.60 0.013 256);

  --sidebar-bg:   oklch(0.205 0.013 256);
  --sidebar-text: var(--text-muted);
  --sidebar-active-bg: color-mix(in oklch, var(--accent) 18%, var(--surface));
  --sidebar-active-text: var(--accent-strong);

  --shadow-xs: 0 1px 2px oklch(0 0 0 / 0.3);
  --shadow-sm: 0 1px 3px oklch(0 0 0 / 0.35), 0 1px 2px oklch(0 0 0 / 0.25);
  --shadow-md: 0 4px 14px oklch(0 0 0 / 0.4), 0 2px 5px oklch(0 0 0 / 0.3);
  --shadow-lg: 0 18px 44px oklch(0 0 0 / 0.55), 0 6px 14px oklch(0 0 0 / 0.4);
}

/* ---- Accent palette options (Tweaks) — keep theme adaptation ---- */
:root[data-accent="indigo"] { --accent: oklch(0.52 0.16 266); --accent-strong: oklch(0.46 0.17 266); --accent-fg: #fff; }
[data-theme="dark"][data-accent="indigo"] { --accent: oklch(0.70 0.15 266); --accent-strong: oklch(0.80 0.12 266); --accent-fg: oklch(0.18 0.02 266); }

:root[data-accent="amber"] { --accent: oklch(0.74 0.145 70); --accent-strong: oklch(0.62 0.15 58); --accent-fg: oklch(0.25 0.03 60); }
[data-theme="dark"][data-accent="amber"] { --accent: oklch(0.80 0.145 75); --accent-strong: oklch(0.86 0.13 80); --accent-fg: oklch(0.22 0.03 60); }

:root[data-accent="violet"] { --accent: oklch(0.56 0.20 300); --accent-strong: oklch(0.50 0.21 300); --accent-fg: #fff; }
[data-theme="dark"][data-accent="violet"] { --accent: oklch(0.72 0.17 300); --accent-strong: oklch(0.82 0.14 300); --accent-fg: oklch(0.18 0.02 300); }

:root[data-accent="rose"] { --accent: oklch(0.58 0.185 16); --accent-strong: oklch(0.52 0.20 14); --accent-fg: #fff; }
[data-theme="dark"][data-accent="rose"] { --accent: oklch(0.70 0.175 16); --accent-strong: oklch(0.80 0.14 18); --accent-fg: oklch(0.18 0.02 16); }

/* Card style tweak */
[data-cards="flat"] .card { box-shadow: none !important; }
[data-cards="flat"] .card:hover { box-shadow: none !important; }
[data-cards="elevated"] .card { box-shadow: var(--shadow-md); }

/* Inverted sidebar tweak (dark sidebar even in light mode) */
[data-sidebar="inverted"]:not([data-theme="dark"]) {
  --sidebar-bg: oklch(0.235 0.018 256);
  --sidebar-text: oklch(0.72 0.014 256);
  --sidebar-active-bg: color-mix(in oklch, var(--accent) 26%, oklch(0.235 0.018 256));
  --sidebar-active-text: oklch(0.95 0.02 184);
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; height: 100%; }

body {
  font-family: var(--font-sans);
  background: var(--bg);
  color: var(--text);
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-feature-settings: "cv01" 1, "ss01" 1;
}

#root { height: 100%; }

::selection { background: color-mix(in oklch, var(--accent) 30%, transparent); }

/* Scrollbars */
* { scrollbar-width: thin; scrollbar-color: var(--border-strong) transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-thumb {
  background: var(--border-strong);
  border-radius: 99px;
  border: 3px solid var(--bg);
}
*::-webkit-scrollbar-track { background: transparent; }

.mono { font-family: var(--font-mono); font-feature-settings: "ss01" 1; }
.tnum { font-variant-numeric: tabular-nums; }

/* Focus ring */
:where(button, a, input, select, [tabindex]):focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 4px;
}

/* Smooth theme transition (color excluded — var-based color transitions can stick) */
body, .surface, .sidebar, .topbar, .card, .badge, .btn, .kpi, .row, input, select, textarea {
  transition: background-color .25s ease, border-color .25s ease, box-shadow .2s ease;
}

@keyframes fadeUp {
  from { transform: translateY(9px); opacity: 0.4; }
  to { transform: translateY(0); opacity: 1; }
}
@keyframes fadeIn { from { opacity: 0.45; } to { opacity: 1; } }
@keyframes slideOver {
  from { transform: translateX(100%); }
  to { transform: translateX(0); }
}
@keyframes scaleIn {
  from { opacity: 0; transform: scale(0.96) translateY(6px); }
  to { opacity: 1; transform: scale(1) translateY(0); }
}
@keyframes growW { from { width: 0; } }
@keyframes growH { from { transform: scaleY(0); } }
@keyframes dash {
  from { stroke-dashoffset: var(--dash-from); }
}

.fade-up { animation: fadeUp .4s cubic-bezier(.22,.61,.36,1); }

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* ---------------- Layout helpers + responsive ---------------- */
.page { padding: clamp(16px, 2.4vw, 28px); max-width: 1500px; margin: 0 auto; width: 100%; }
.content-scroll { flex: 1; overflow-y: auto; min-width: 0; }

.only-mobile { display: none !important; }

/* Tablet: collapse 2-col grids, hide some table cols */
@media (max-width: 1100px) {
  .dash-grid, .detail-grid, .req-grid { grid-template-columns: 1fr !important; }
  .docs-layout { grid-template-columns: 200px minmax(0,1fr) !important; }
  .hide-md { display: none !important; }
}
@media (max-width: 1240px) {
  .kpi-grid { grid-template-columns: repeat(3, minmax(0,1fr)) !important; }
}

/* Phone */
@media (max-width: 720px) {
  :root { --pad: 13px; }
  .kpi-grid { grid-template-columns: repeat(2, minmax(0,1fr)) !important; }
  .hide-sm { display: none !important; }
  .docs-layout { grid-template-columns: 1fr !important; }
  .docs-rail { position: static !important; }
  .sidebar.desktop-sidebar { display: none !important; }
  .only-mobile { display: inline-flex !important; }
  .mobile-nav { display: grid !important; }
  .content-scroll { padding-bottom: 78px; }
  .req-detail { display: none !important; }
  .req-grid.show-detail .req-list { display: none !important; }
  .req-grid.show-detail .req-detail { display: block !important; }
}

/* Mobile drawer */
.drawer-backdrop { position: fixed; inset: 0; background: oklch(0 0 0 / 0.45); z-index: 45; animation: fadeIn .2s ease; }
.drawer { position: fixed; top: 0; left: 0; bottom: 0; z-index: 46; animation: slideInLeft .25s cubic-bezier(.4,0,.2,1); }
@keyframes slideInLeft { from { transform: translateX(-100%); } }