/* ═══════════════════════════════════════════════════════════════════════════
   OCC DESIGN SYSTEM — Apr 10 2026
   Shared across: OCC_CRM.html, OCC_Command_Center.html, COG_Crew_App.html, COG_Grid_Mockup.html
   Single source of truth for tokens, typography, and common chrome.
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  /* ── BRAND TOKENS (WHITE-LABEL OVERRIDE POINT) ──────────────────────
     Override these 6 variables on a per-client basis to reskin the entire
     platform. Example:
       [data-brand="acme"] { --brand-primary: #7e1a1a; --brand-logo: url('...'); }
     Every chrome surface, accent, hover, and active state derives from these. */
  --brand-primary:        #0a2e7a;   /* OCC navy — active states, buttons, borders */
  --brand-primary-dark:   #082560;   /* chrome surfaces (top bar, sidebar) — slightly darker than primary for depth */
  --brand-primary-darker: #051843;   /* deepest chrome — pressed, modal scrims */
  --brand-primary-light:  #1e4fb8;   /* hover on brand surfaces */
  --brand-accent:         #6db3ff;   /* the ONE decorative accent — hover links, focus rings, highlights */
  --brand-logo:           url('https://www.ohiocleancans.com/wp-content/uploads/2021/12/occ-logo.png');

  /* ── BRAND ALIASES (legacy, point to brand tokens — don't reference directly) ─ */
  --occ-navy:         var(--brand-primary);
  --occ-navy-dark:    var(--brand-primary-darker);
  --occ-navy-light:   var(--brand-primary-light);

  /* ── CHROME (derived from brand) ───────────────────────────────────── */
  --chrome-900:       var(--brand-primary-dark);      /* top bar + sidebar */
  --chrome-800:       var(--brand-primary);           /* dropdowns, collapsed bars */
  --chrome-700:       var(--brand-primary-light);     /* hover/active on chrome */
  --chrome-border:    rgba(255,255,255,.10);
  --chrome-border-strong: rgba(255,255,255,.22);
  --chrome-text:      #eef2f9;
  --chrome-text-muted:rgba(255,255,255,.72);
  --chrome-text-dim:  rgba(255,255,255,.48);

  /* ── CONTENT (light surfaces, text) ────────────────────────────────── */
  --bg:               #f8fafc;
  --card:             #ffffff;
  --card-hover:       #f1f5f9;
  --border:           #e2e8f0;
  --border-strong:    #cbd5e1;
  --text:             #0f172a;   /* primary text on light surfaces */
  --text-2:           #334155;   /* secondary text */
  --text-3:           #64748b;   /* tertiary / labels */
  --text-inverse:     #ffffff;

  /* ── STATUS COLORS ─────────────────────────────────────────────────── */
  --green:            #16a34a;
  --green-bg:         #dcfce7;
  --red:              #dc2626;
  --red-bg:           #fef2f2;
  --amber:            #d97706;
  --amber-bg:         #fef3c7;
  --blue:             #2563eb;
  --blue-bg:          #dbeafe;
  --purple:           #7c3aed;
  --purple-bg:        #ede9fe;

  /* ── ROUTE COLORS (R1–R4, unchanged across all apps) ───────────────── */
  --route-1:          #f97316;   /* orange */
  --route-2:          #2563eb;   /* blue */
  --route-3:          #7c3aed;   /* purple */
  --route-4:          #16a34a;   /* green */

  /* ── TYPOGRAPHY SCALE ───────────────────────────────────────────────
     Floor = 11px. No sub-11px text anywhere.
     Ramp = 11 / 12 / 13 / 14 / 16 / 18 / 20 / 24 / 32. */
  --fs-xs:            11px;   /* labels, small meta */
  --fs-sm:            12px;   /* secondary text, captions */
  --fs-base:          13px;   /* body, default */
  --fs-md:            14px;   /* emphasized body, button text */
  --fs-lg:            16px;   /* subheadings */
  --fs-xl:            18px;   /* headings */
  --fs-2xl:           20px;   /* page titles */
  --fs-3xl:           24px;   /* KPI numbers */
  --fs-4xl:           32px;   /* hero numbers */

  --fw-normal:        400;
  --fw-med:           500;
  --fw-semi:          600;
  --fw-bold:          700;
  --fw-heavy:         800;
  --fw-black:         900;

  --lh-tight:         1.15;
  --lh-normal:        1.4;
  --lh-relaxed:       1.6;

  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
  --font-mono: 'SF Mono', Consolas, 'Courier New', monospace;

  /* ── SPACING ────────────────────────────────────────────────────────
     Scale = 4 / 6 / 8 / 12 / 16 / 20 / 24 / 32 / 40 / 48 / 64 */
  --sp-1:   4px;
  --sp-2:   6px;
  --sp-3:   8px;
  --sp-4:   12px;
  --sp-5:   16px;
  --sp-6:   20px;
  --sp-7:   24px;
  --sp-8:   32px;
  --sp-9:   40px;
  --sp-10:  48px;
  --sp-11:  64px;

  /* ── RADII ──────────────────────────────────────────────────────────
     Scale = 4 / 6 / 8 / 12 / 16 / 24 / full */
  --r-sm:   4px;
  --r-md:   6px;
  --r-lg:   8px;
  --r-xl:   12px;
  --r-2xl:  16px;
  --r-3xl:  24px;
  --r-full: 9999px;

  /* ── SHADOWS ────────────────────────────────────────────────────────── */
  --shadow-sm: 0 1px 2px rgba(0,0,0,.06);
  --shadow-md: 0 2px 6px rgba(0,0,0,.1);
  --shadow-lg: 0 6px 16px rgba(0,0,0,.14);
  --shadow-chrome: 0 2px 8px rgba(0,0,0,.3);

  /* ── CHROME DIMENSIONS ─────────────────────────────────────────────── */
  --top-bar-h:     52px;
  --sidebar-w:     72px;
  --sidebar-btn:   56px;

  /* ── TRANSITIONS ──────────────────────────────────────────────────── */
  --t-fast: 120ms ease;
  --t-med:  200ms ease;
  --t-slow: 320ms ease;

  /* ── Z-INDEX RAMP ─────────────────────────────────────────────────── */
  --z-sidebar:  550;
  --z-topbar:   560;
  --z-dropdown: 600;
  --z-modal:    800;
  --z-toast:    900;
}

/* ── DARK MODE OVERRIDES ──────────────────────────────────────────────── */
html[data-theme="dark"] {
  --bg:            #0f172a;
  --card:          #1e293b;
  --card-hover:    #334155;
  --border:        #334155;
  --border-strong: #475569;
  --text:          #e2e8f0;
  --text-2:        #cbd5e1;
  --text-3:        #94a3b8;
}

/* ═══════════════════════════════════════════════════════════════════════════
   RESET + BASE
   ═══════════════════════════════════════════════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box; }
body {
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Floor all text at 11px — Howard is 50+, uses the app all day.
   This rule prevents any element from rendering sub-11px text. */
body, body * {
  font-size: clamp(11px, 1em, 999px);
}
/* Allow explicit large sizes via specific classes to break this clamp */
body .ds-unclamp, body h1, body h2, body h3 { font-size: inherit; }

/* ═══════════════════════════════════════════════════════════════════════════
   CHROME — Top bar + Sidebar
   ═══════════════════════════════════════════════════════════════════════════ */

/* Unified 52px top bar — CSS grid 1fr auto 1fr for dead-center middle column */
.ds-topbar {
  height: var(--top-bar-h);
  background: var(--chrome-900);
  color: var(--chrome-text);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  column-gap: var(--sp-4);
  align-items: center;
  padding: 0 var(--sp-5);
  border-bottom: 1px solid var(--chrome-border);
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: var(--z-topbar);
  box-shadow: var(--shadow-chrome);
}
.ds-topbar-left   { display: flex; align-items: center; justify-content: flex-start; gap: var(--sp-3); min-width: 0; }
.ds-topbar-center { display: flex; align-items: center; justify-content: center; }
.ds-topbar-right  { display: flex; align-items: center; justify-content: flex-end; gap: var(--sp-3); min-width: 0; }

/* Sidebar — 72px wide, same chrome color as top bar for seamless surface */
.ds-sidebar {
  position: fixed;
  top: var(--top-bar-h);
  left: 0;
  width: var(--sidebar-w);
  height: calc(100vh - var(--top-bar-h));
  background: var(--chrome-900);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: var(--sp-3) 0 var(--sp-5) 0;
  gap: var(--sp-3);
  z-index: var(--z-sidebar);
  border-right: 1px solid var(--chrome-border);
}
.ds-sidebar-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  width: var(--sidebar-btn);
  height: var(--sidebar-btn);
  padding: 0;
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--r-lg);
  color: var(--chrome-text);
  cursor: pointer;
  transition: background var(--t-fast), border-color var(--t-fast), color var(--t-fast);
  font-family: var(--font-sans);
}
.ds-sidebar-btn:hover {
  background: rgba(255,255,255,.08);
  border-color: var(--chrome-border-strong);
}
.ds-sidebar-btn:focus-visible {
  outline: 2px solid var(--occ-navy);
  outline-offset: 2px;
}
.ds-sidebar-btn.active,
.ds-sidebar-btn[aria-current="page"] {
  background: rgba(255,255,255,.14);
  border-color: var(--chrome-border-strong);
  box-shadow: 0 0 0 1px rgba(255,255,255,.1) inset;
}
.ds-sidebar-btn svg { width: 22px; height: 22px; stroke: currentColor; }
.ds-sidebar-btn-label {
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  letter-spacing: .3px;
  color: rgba(255,255,255,.88);
  line-height: 1;
}
.ds-sidebar-divider {
  width: 44px;
  height: 1px;
  background: rgba(255,255,255,.14);
  margin: var(--sp-2) 0;
  flex: 0 0 auto;
}
.ds-sidebar-spacer { flex: 1; }

/* ═══════════════════════════════════════════════════════════════════════════
   BUTTONS
   ═══════════════════════════════════════════════════════════════════════════ */
.ds-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  height: 36px;
  padding: 0 var(--sp-5);
  background: var(--card);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-lg);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  font-weight: var(--fw-semi);
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--t-fast), border-color var(--t-fast), transform 80ms ease;
  box-shadow: var(--shadow-sm);
}
.ds-btn:hover { background: var(--card-hover); border-color: var(--occ-navy); }
.ds-btn:active { transform: translateY(1px); }
.ds-btn:focus-visible { outline: 2px solid var(--occ-navy); outline-offset: 2px; }
.ds-btn-primary {
  background: var(--occ-navy);
  color: var(--text-inverse);
  border-color: var(--occ-navy);
}
.ds-btn-primary:hover { background: var(--occ-navy-dark); border-color: var(--occ-navy-dark); }
.ds-btn-ghost {
  background: transparent;
  border-color: var(--chrome-border-strong);
  color: var(--chrome-text);
  box-shadow: none;
}
.ds-btn-ghost:hover { background: rgba(255,255,255,.08); }
.ds-btn-icon {
  width: 36px;
  height: 36px;
  padding: 0;
  border-radius: var(--r-lg);
}

/* Icon-only button with native title tooltip, fits chrome */
.ds-chrome-icon-btn {
  width: 38px;
  height: 38px;
  background: transparent;
  border: 1px solid var(--chrome-border);
  border-radius: var(--r-lg);
  color: var(--chrome-text);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background var(--t-fast), border-color var(--t-fast);
  padding: 0;
}
.ds-chrome-icon-btn:hover {
  background: rgba(255,255,255,.08);
  border-color: var(--chrome-border-strong);
}
.ds-chrome-icon-btn:focus-visible {
  outline: 2px solid var(--occ-navy);
  outline-offset: 2px;
}
.ds-chrome-icon-btn svg { width: 20px; height: 20px; stroke: currentColor; }

/* Bell with badge */
.ds-bell { position: relative; color: var(--amber); border-color: rgba(251,191,36,.25); }
.ds-bell:hover { background: rgba(251,191,36,.12); border-color: rgba(251,191,36,.45); }
.ds-bell-badge {
  position: absolute;
  top: -5px;
  right: -5px;
  background: var(--red);
  color: var(--text-inverse);
  border-radius: var(--r-full);
  min-width: 18px;
  height: 18px;
  padding: 0 var(--sp-1);
  font-size: var(--fs-xs);
  font-weight: var(--fw-heavy);
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--chrome-900);
  line-height: 1;
}
.ds-bell-badge.hidden { display: none; }

/* ═══════════════════════════════════════════════════════════════════════════
   CARDS, PANELS, INPUTS
   ═══════════════════════════════════════════════════════════════════════════ */
.ds-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  padding: var(--sp-5);
  box-shadow: var(--shadow-sm);
}
.ds-card-header {
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  letter-spacing: .5px;
  color: var(--text-3);
  margin-bottom: var(--sp-4);
}

.ds-input {
  height: 36px;
  padding: 0 var(--sp-4);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-lg);
  background: var(--card);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  outline: none;
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.ds-input:focus {
  border-color: var(--occ-navy);
  box-shadow: 0 0 0 3px rgba(10,46,122,.2);
}
.ds-input::placeholder { color: var(--text-3); }

/* Chrome-hosted search input — light background even on dark chrome */
.ds-chrome-search {
  position: relative;
  display: flex;
  align-items: center;
}
.ds-chrome-search input {
  width: 300px;
  height: 34px;
  padding: 0 var(--sp-4) 0 34px;
  background: var(--card);
  color: var(--text);
  border: 1px solid var(--chrome-border);
  border-radius: var(--r-lg);
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  outline: none;
  box-shadow: var(--shadow-sm);
}
.ds-chrome-search input:focus {
  border-color: var(--occ-navy);
  box-shadow: 0 0 0 3px rgba(10,46,122,.28), var(--shadow-sm);
}
.ds-chrome-search-icon {
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-3);
  width: 16px;
  height: 16px;
  pointer-events: none;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ═══════════════════════════════════════════════════════════════════════════
   DATE NAV (used in CRM top bar, could be reused)
   ═══════════════════════════════════════════════════════════════════════════ */
.ds-date-nav {
  display: flex;
  align-items: center;
  gap: 3px;
}
.ds-date-nav-btn {
  min-width: 34px;
  height: 34px;
  padding: 0 var(--sp-3);
  background: rgba(255,255,255,.08);
  border: 1px solid var(--chrome-border);
  color: var(--chrome-text);
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  font-weight: var(--fw-semi);
  border-radius: var(--r-md);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background var(--t-fast), border-color var(--t-fast);
}
.ds-date-nav-btn:hover {
  background: rgba(255,255,255,.18);
  border-color: var(--chrome-border-strong);
}
.ds-date-nav-btn:focus-visible {
  outline: 2px solid var(--occ-navy);
  outline-offset: 2px;
}
.ds-date-nav-btn.today {
  min-width: auto;
  padding: 0 var(--sp-4);
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  letter-spacing: .5px;
  text-transform: uppercase;
}
.ds-date-nav-display {
  color: var(--text-inverse);
  font-size: var(--fs-base);
  font-weight: var(--fw-semi);
  font-family: var(--font-sans);
  padding: 0 var(--sp-3);
  white-space: nowrap;
  letter-spacing: .2px;
}

/* ═══════════════════════════════════════════════════════════════════════════
   CoG BRAND MARK — Orbitron + metallic silver gradient + spinning gear.
   This is THE canonical OCC brand. Used identically in CRM, Command Center,
   Crew App, and Grid. Howard locked this in. DO NOT flatten or remove the spin.
   The font import for Orbitron must be loaded by each app.
   ═══════════════════════════════════════════════════════════════════════════ */
.ds-cog-logo {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: var(--sp-2) var(--sp-3);
  background: transparent;
  border: none;
  cursor: pointer;
  user-select: none;
  border-radius: var(--r-md);
  font-family: 'Orbitron', sans-serif;
  font-weight: 900;
  font-size: 20px;
  background-image: linear-gradient(135deg, #e8e8e8, #a0a0a0, #d0d0d0);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  line-height: 1;
  transition: filter var(--t-fast);
}
.ds-cog-logo:hover { filter: brightness(1.15); }
.ds-cog-logo:focus-visible {
  outline: 2px solid #4a9eff;
  outline-offset: 2px;
}
.ds-cog-logo svg {
  width: 24px;
  height: 24px;
  stroke: url(#cogGearGrad);
  stroke-width: 2;
  fill: none;
  animation: ds-cog-spin 8s linear infinite;
}
@keyframes ds-cog-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .ds-cog-logo svg { animation: none; }
}
.ds-cog-label {
  font-family: 'Orbitron', sans-serif;
  font-size: 20px;
  font-weight: 900;
  background-image: linear-gradient(135deg, #e8e8e8, #a0a0a0, #d0d0d0);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin-left: var(--sp-2);
  letter-spacing: 3px;
  line-height: 1;
}

/* ═══════════════════════════════════════════════════════════════════════════
   STATUS PILLS + BADGES
   ═══════════════════════════════════════════════════════════════════════════ */
.ds-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  padding: 3px var(--sp-3);
  border-radius: var(--r-full);
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  letter-spacing: .4px;
}
.ds-pill-green  { background: var(--green-bg);  color: var(--green); }
.ds-pill-red    { background: var(--red-bg);    color: var(--red); }
.ds-pill-amber  { background: var(--amber-bg);  color: var(--amber); }
.ds-pill-blue   { background: var(--blue-bg);   color: var(--blue); }
.ds-pill-purple { background: var(--purple-bg); color: var(--purple); }
.ds-pill-navy   { background: var(--occ-navy);  color: var(--text-inverse); }

/* ═══════════════════════════════════════════════════════════════════════════
   UTILITIES
   ═══════════════════════════════════════════════════════════════════════════ */
.ds-sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.ds-hide { display: none !important; }
.ds-flex { display: flex; }
.ds-flex-col { display: flex; flex-direction: column; }
.ds-items-center { align-items: center; }
.ds-justify-between { justify-content: space-between; }
.ds-gap-1 { gap: var(--sp-1); }
.ds-gap-2 { gap: var(--sp-2); }
.ds-gap-3 { gap: var(--sp-3); }
.ds-gap-4 { gap: var(--sp-4); }
.ds-flex-1 { flex: 1; }

/* Global focus ring default — any interactive element that isn't explicitly styled still gets keyboard feedback */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--occ-navy);
  outline-offset: 2px;
}

/* Motion preference — respect prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   END OCC DESIGN SYSTEM
   ═══════════════════════════════════════════════════════════════════════════ */