/* ==========================================================
   FleetFixer  - Shared App Design System
   Used by: admin.html, maintenance.html, inventory.html
   ========================================================== */

/* ===== DESIGN TOKENS  (Pine & Citrus) =====
   The FleetFixer house brand: deep pine green with a fresh sea-green
   highlight over warm bark neutrals. Mirrors design-system/ff-tokens.css
   (the estate source of truth, see brand-spec.html) and additionally
   re-points the app's own legacy token names, the navy --ink-* ramp, the
   teal --accent-NNN ramp, --brass-*, and the dark --chrome-* shell, onto
   Pine & Citrus, so every token-driven component below re-skins with no
   markup change. Per-club accent can still override --accent at runtime.
   Display type Hanken Grotesk, body Inter; light is the default theme. */
:root {
  color-scheme: light;

  /* ---- Pine ramp (brand primary) ---- */
  --pine-50:#EAF7F1; --pine-100:#C9ECE0; --pine-200:#97D8C2; --pine-300:#5DBE9D;
  --pine-400:#2E9B79; --pine-500:#1C7A5C; --pine-600:#15614A; --pine-700:#0F4D3A;
  --pine-800:#0A3A2B; --pine-900:#06281D;

  /* ---- Sea-green ramp (lead light accent) ---- */
  --sea-50:#EDF8F2; --sea-100:#D6F1E3; --sea-200:#A9E3C9; --sea-300:#6FD0A8;
  --sea-400:#3FB680; --sea-500:#2FA06E; --sea-600:#247E58; --sea-700:#1C6446;

  /* ---- Citrus ramp (rare accent) ---- */
  --citrus-50:#FBFEE8; --citrus-100:#F4F9D8; --citrus-200:#EAF4B4; --citrus-300:#DCEC86;
  --citrus-400:#C7E04A; --citrus-500:#B4D02E; --citrus-600:#9CB81F; --citrus-700:#7C9417;
  --citrus-800:#5E7014; --citrus-900:#4A5814;

  /* ---- Bark neutrals (warm green-tinted) ---- */
  --bark-50:#F4F3EE; --bark-100:#ECEBE4; --bark-200:#DEDDD3; --bark-300:#C4C5B8;
  --bark-400:#9AA095; --bark-500:#737A6F; --bark-600:#555C52; --bark-700:#3A423A;
  --bark-800:#26382F; --bark-900:#14201B; --bark-950:#0E1714;

  /* ---- Legacy app ramps re-pointed onto Pine & Citrus ----
     --ink-* (was navy) now reads as bark/pine; the old teal --accent-NNN
     ramp now reads as sea-green; --brass-* now reads as citrus. */
  --ink-950:#06281D; --ink-900:#0A3A2B; --ink-800:#0F4D3A; --ink-700:#15614A;
  --ink-600:#1C7A5C; --ink-500:#3A423A; --ink-400:#5A6B61; --ink-300:#9AA095;
  --ink-200:#C4C5B8; --ink-150:#DEDDD3; --ink-100:#ECEBE4; --ink-50:#F4F3EE;

  --accent-50:#EDF8F2; --accent-100:#D6F1E3; --accent-200:#A9E3C9; --accent-300:#6FD0A8;
  --accent-400:#3FB680; --accent-500:#2FA06E; --accent-600:#247E58; --accent-700:#1C6446;
  --accent-800:#0F4D3A; --accent-900:#06281D;

  --brass-600:var(--citrus-700); --brass-100:var(--citrus-100); --brass-50:var(--citrus-50);

  /* ---- Brand (semantic; --accent is the primary action colour) ---- */
  --accent:        var(--pine-600);   /* AA with white */
  --accent-strong: var(--pine-700);   /* hover/pressed */
  --accent-2:      var(--pine-500);
  --accent-light:  var(--sea-400);
  --accent-glow:   var(--sea-300);
  --accent-soft:   var(--sea-50);
  --accent-weak:   var(--sea-50);     /* tint for selected / hover surfaces */
  --accent-contrast:#FFFFFF;          /* text on accent fills */

  /* Highlight: a fresh, elegant sea-green */
  --highlight:        var(--sea-400);
  --highlight-strong: var(--sea-500);
  --highlight-ink:    #06281D;

  --brand-gradient:      linear-gradient(135deg, var(--pine-700) 0%, var(--pine-500) 55%, var(--sea-400) 100%);
  --brand-gradient-soft: linear-gradient(135deg, var(--pine-500) 0%, var(--sea-300) 110%);

  /* ---- Surfaces and semantic neutrals (LIGHT) ---- */
  --bg:         #F1F5EF;
  --panel:      #FFFFFF;
  --panel-2:    #FAFCF8;
  --surface-2:  #E8F0E6;
  --stroke:     #E1E9DD;
  --stroke-strong: #CDD8C6;
  --text:       #14201B;
  --text-strong:#0A1410;
  --muted:      #5A6B61;   /* secondary text */
  --muted-2:    #7C8A80;   /* tertiary text */
  --hero-dark:  #0A1410;

  /* Page backdrop wash, faint sea-green for a calm natural canvas */
  --backdrop:
    radial-gradient(1100px 520px at 82% -8%, rgba(111,208,168,.12), transparent 62%),
    radial-gradient(900px 480px at -5% 102%, rgba(21,97,74,.06), transparent 62%);

  /* ---- Dark chrome (premium pine app shell) ---- */
  --chrome-bg:          #0A3A2B;
  --chrome-elevated:    #0F4D3A;
  --chrome-border:      rgba(150,216,194,.16);
  --chrome-text:        #EAF7F1;
  --chrome-text-muted:  #9CC7B6;
  --chrome-active-bg:   rgba(63,182,128,.18);
  --chrome-active-text: #6FD0A8;

  /* ---- Glass (Apple-style translucency) ---- */
  --glass-bg:rgba(255,255,255,.72);
  --glass-border:rgba(20,32,27,.07);
  --glass-hi:rgba(255,255,255,.80);
  --glass-blur:16px;
  --glass-sat:150%;
  --glass-shadow:0 8px 28px rgba(20,32,27,.08);

  /* ---- Radius scale (brand-spec) ---- */
  --radius-sm:  8px;
  --radius:     14px;
  --radius-lg:  18px;
  --radius-xl:  24px;
  --radius2:    var(--radius-lg);   /* legacy alias */
  --radius-pill: 999px;

  /* ---- Elevation (soft, low, bark-tinted) ---- */
  --shadow-xs:  0 1px 2px rgba(20,32,27,.04);
  --shadow-sm:  0 1px 6px rgba(20,32,27,.06);
  --shadow:     0 6px 22px rgba(20,32,27,.07);
  --shadow-lg:  0 24px 60px rgba(20,32,27,.10);

  /* ---- Focus ring (pine-tinted) ---- */
  --focus-ring: 0 0 0 3px rgba(46,155,121,.34);

  /* ---- Status ---- */
  --danger:   #E5544B;  --danger-soft:rgba(229,84,75,.14);   --danger-50:#FCEBEA;
  --warning:  #E8A33D;  --warning-soft:rgba(232,163,61,.16); --warning-50:#FBF1E0;
  --success:  #1FA971;  --success-soft:rgba(31,169,113,.14); --success-50:#E6F6EE;
  --info:     #3FA6B8;  --info-soft:rgba(63,166,184,.14);    --info-50:#E6F3F6;

  /* ---- Motion ---- */
  --ease: cubic-bezier(.2,.6,.2,1);
  --ease-out: cubic-bezier(.16,.84,.44,1);
  --dur-1: .12s; --dur-2: .18s; --dur-3: .28s;

  /* ---- Spacing scale (4 / 8 rhythm) ---- */
  --space-1: 4px;  --space-2: 8px;  --space-3: 12px; --space-4: 16px;
  --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px; --space-12: 48px;

  /* ---- Typography ---- */
  --font-display:'Hanken Grotesk','Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --font-body:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --font-mono:ui-monospace,Menlo,Monaco,'Cascadia Code',monospace;
}

/* ===== DARK THEME =====
   Inert unless an ancestor sets [data-theme="dark"]; values mirror the
   estate's canonical design-system/ff-tokens.css so the app is dark-ready. */
[data-theme="dark"]{
  color-scheme: dark;

  --accent:var(--sea-400);
  --accent-strong:var(--sea-300);
  --accent-2:var(--sea-300);
  --accent-light:var(--sea-200);
  --accent-glow:var(--sea-300);
  --accent-soft:rgba(63,182,128,.18);
  --accent-weak:rgba(63,182,128,.18);
  --accent-contrast:#06281D;

  --highlight:var(--sea-300);
  --highlight-strong:var(--sea-200);

  --ink-950:#EAF3EC; --ink-900:#EAF3EC; --ink-800:#D6F1E3; --ink-700:#A9E3C9;
  --ink-600:#9DB0A6; --ink-500:#9DB0A6; --ink-400:#7E9387; --ink-300:#555C52;
  --ink-200:#3A423A; --ink-150:#26382F; --ink-100:#26382F; --ink-50:#14201B;

  /* Neutral charcoal surfaces. The dark theme is grey, not green:
     pine/sea green is reserved for accents, not the canvas. The step
     from --bg to --panel is wide enough that cards read on their own
     surface, so dark-on-dark shadows are no longer the only separator. */
  --bg:#141517;
  --panel:#1C1D20;
  --panel-2:#222327;
  --surface-2:#292A2E;
  --stroke:rgba(255,255,255,.09);
  --stroke-strong:rgba(255,255,255,.16);
  --text:#E9ECEA;
  --text-strong:#FFFFFF;
  --muted:#A2A8A4;
  --muted-2:#838A85;
  --hero-dark:#0D0E0F;

  /* Sidebar chrome: neutral graphite in dark (pine only in light). */
  --chrome-bg:#0E0F11;
  --chrome-elevated:#1A1C1F;
  --chrome-border:rgba(255,255,255,.10);
  --chrome-text:#E9ECEA;
  --chrome-text-muted:#A2A8A4;
  --chrome-active-bg:rgba(63,182,128,.20);
  --chrome-active-text:#6FD0A8;

  /* Faint green corner glow only: an accent, not a wash over the grey. */
  --backdrop:
    radial-gradient(1100px 520px at 82% -8%, rgba(63,182,128,.06), transparent 62%),
    radial-gradient(900px 480px at -5% 102%, rgba(111,208,168,.03), transparent 62%);

  --brand-gradient:linear-gradient(135deg,var(--pine-700) 0%,var(--pine-500) 60%,var(--sea-400) 100%);
  --brand-gradient-soft:linear-gradient(135deg,var(--sea-400) 0%,var(--sea-200) 100%);

  --glass-bg:rgba(20,32,27,.55);
  --glass-border:rgba(255,255,255,.10);
  --glass-hi:rgba(255,255,255,.08);
  --glass-shadow:0 16px 44px rgba(0,0,0,.50);

  --danger-soft:rgba(229,84,75,.22);   --danger-50:rgba(229,84,75,.22);
  --warning-soft:rgba(232,163,61,.22); --warning-50:rgba(232,163,61,.22);
  --success-soft:rgba(31,169,113,.20); --success-50:rgba(31,169,113,.20);
  --info-soft:rgba(63,166,184,.20);    --info-50:rgba(63,166,184,.20);

  /* Lighter drop shadows in dark. A heavy black halo on a charcoal
     canvas reads as grime, not elevation: dark cards lift via their
     lighter --panel surface and stroke, with the shadow only a hint. */
  --shadow-xs:0 1px 2px rgba(0,0,0,.30);
  --shadow-sm:0 2px 8px rgba(0,0,0,.30);
  --shadow:0 12px 28px rgba(0,0,0,.34);
  --shadow-lg:0 24px 52px rgba(0,0,0,.44);

  --focus-ring:0 0 0 3px rgba(93,190,157,.40);
}

/* Dark-mode card crispness: a 1px top inner highlight gives the panel a
   clean lifted edge against the grey canvas, so elevation no longer
   depends on a dark drop shadow fighting a dark background. */
[data-theme="dark"] .card{
  box-shadow:var(--shadow-sm), inset 0 1px 0 rgba(255,255,255,.04);
}
[data-theme="dark"] .card.is-interactive:hover,
[data-theme="dark"] a.card:hover,
[data-theme="dark"] button.card:hover{
  box-shadow:var(--shadow), inset 0 1px 0 rgba(255,255,255,.05);
  border-color:var(--stroke-strong);
}

/* ===== RESET ===== */
*{ box-sizing: border-box; }

body{
  margin: 0;
  font-family: var(--font-body);
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}

/* Headings on the display face (Hanken Grotesk) per the brand spec */
h1, h2, h3, h4,
.brand-title, .page-title, .topbar-title, .modal-title{
  font-family: var(--font-display);
  letter-spacing: -.01em;
}

.wrap{ max-width: none; margin: 0; padding: 0; }

/* ===== FORM CONTROLS ===== */
input, select, textarea{
  background: var(--panel);
  border: 1px solid var(--stroke);
  color: var(--text);
  padding: 8px 10px;
  border-radius: 10px;
  font-size: 13px;
  font-family: inherit;
}

textarea{ resize: vertical; }

/* Full-width labelled input (config forms) */
.input{
  border: 1px solid var(--stroke);
  border-radius: 12px;
  padding: 9px 10px;
  font-size: 13px;
  width: 100%;
  background: var(--panel);
  color: var(--text);
}

.input:focus{
  outline: none;
  border-color: var(--accent);
  box-shadow: var(--focus-ring);
}

/* Base control focus: token-driven ring on every text field */
input:focus, select:focus, textarea:focus{
  outline: none;
  border-color: var(--accent);
  box-shadow: var(--focus-ring);
}

/* ===== BUTTONS =====
   One canonical set: primary / secondary / ghost / danger, all token-driven.
   Radius unified on --radius; .btn-pill is the opt-in for tabs and chips. */
.btn{
  border: 1px solid transparent;
  cursor: pointer;
  padding: 9px 14px;
  border-radius: var(--radius);
  font-size: 13px;
  font-weight: 600;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: background-color .12s ease, box-shadow .12s ease, border-color .12s ease, filter .12s ease;
}

.btn:hover{ filter: brightness(.97); }
.btn:active{ transform: translateY(.5px); }
.btn-pill{ border-radius: var(--radius-pill); }

.btn-primary{ background: var(--accent); color: #fff; }
.btn-primary:hover{ background: var(--accent-strong); filter: none; }
.btn-secondary{ background: var(--info); color: #fff; }
.btn-ghost{ background: var(--panel); border-color: var(--stroke); color: var(--text); }
.btn-ghost:hover{ background: var(--surface-2); border-color: var(--stroke-strong); filter: none; }
.btn-danger{ background: var(--danger); color: #fff; }