/* ============================================================
   EXPLORE GROUP — Asset Mgmt App Design Tokens
   Shared across every page in the app. Mirrors the tokens in
   the design bundle (claude.ai/design) so the look stays
   consistent no matter which page you're on.
   Tokens are chosen so existing inline :root blocks on legacy
   pages can be safely removed — variable NAMES match what the
   app already uses.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Geist:wght@300;400;500;600;700;800&family=Geist+Mono:wght@400;500;600&family=Barlow+Condensed:wght@400;500;600;700;800&family=Barlow:wght@300;400;500;600&display=swap');

/* ---------- DARK (default) ---------- */
:root {
  /* Canvas + surfaces */
  --bg:              #152240;                         /* ink-950 */
  --bg-solid:        #0F172A;                         /* slate-900 */
  --surface:         rgba(15, 23, 42, 0.78);          /* translucent panel */
  --surface-strong:  rgba(15, 23, 42, 0.92);          /* stronger panel */
  --surface-solid:   #111A2E;                         /* opaque alternative */
  --hover:           rgba(148, 163, 184, 0.08);
  --input-bg:        #1E293B;                         /* slate-800 */

  /* Borders */
  --border:          rgba(148, 163, 184, 0.16);       /* panel line */
  --border2:         rgba(148, 163, 184, 0.10);       /* softer divider */
  --border-strong:   #334155;                         /* slate-700 */

  /* Accent (amber — Explore signature) */
  --accent:          #F59E0B;                         /* amber-500 */
  --accent2:         #D97706;                         /* amber-600 — hover */
  --accent-soft:     rgba(245, 158, 11, 0.18);        /* soft fill */
  --accent-ink:      #0A0F1A;                         /* text on accent */

  /* Semantic + hover-state pairs (used by checkin/index for btn hover) */
  --green:           #10B981;                         /* emerald-500 */
  --green2:          #059669;                         /* emerald-600 — hover */
  --red:             #EF4444;
  --red2:            #DC2626;                         /* red-600 — hover */
  --blue:            #3B82F6;
  --blue2:           #2563EB;                         /* blue-600 — hover */

  /* Typography */
  --text:            #F1F5F9;                         /* ink-100 */
  --muted:           #94A3B8;                         /* ink-400 */
  --label:           #CBD5E1;                         /* ink-300 */

  /* Radii */
  --radius:          6px;                             /* inputs / tight ctrls */
  --radius-md:       10px;                            /* buttons, small cards */
  --radius-lg:       16px;                            /* mid-size panels */
  --radius-panel:    28px;                            /* hero panels — signature */

  /* Panel shadows + glass */
  --panel-shadow:    0 18px 40px rgba(2, 6, 23, 0.28);
  --panel-shadow-lg: 0 22px 48px rgba(2, 6, 23, 0.34);
  --panel-blur:      18px;

  /* Canvas gradient backdrop */
  --canvas-grad:     linear-gradient(180deg, #1C2D52 0%, #152240 100%);

  /* Chart surface tokens — used inside SVG fills in dashboard.html so the
     Active Trucks / Tons Delivered / Cumulative Tons charts flip cleanly
     between dark and light modes. JS reads these via getComputedStyle. */
  --chart-zone-night:  #0C111A;
  --chart-zone-day:    #111827;
  --chart-grid:        #1E2636;
  --chart-axis-label:  #6B7A99;
  --chart-zone-label:  #374151;
  --chart-callout-bg:  #1D2438;
  --chart-accent-future: #3D2A00;
  --chart-blue-future:   #1E3A5F;
  --chart-purple-future: #2A1A3F;

  /* Fonts */
  --font-head:       'Barlow Condensed', sans-serif;
  --font-body:       'Geist', 'Barlow', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-mono:       'Geist Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Tracking (the signature uppercase eyebrow spacing) */
  --tracking-eyebrow: 0.22em;
}

/* ---------- LIGHT ---------- */
:root[data-theme="light"] {
  --bg:              #F5F7FB;
  --bg-solid:        #ffffff;
  --surface:         #ffffff;
  --surface-strong:  #ffffff;
  --surface-solid:   #ffffff;
  --hover:           rgba(15, 23, 42, 0.04);
  --input-bg:        #F8FAFC;

  --border:          rgba(15, 23, 42, 0.08);
  --border2:         rgba(15, 23, 42, 0.05);
  --border-strong:   #CBD5E1;

  --accent:          #D97706;
  --accent2:         #B45309;
  --accent-soft:     rgba(217, 119, 6, 0.12);
  --accent-ink:      #ffffff;

  --green:           #059669;
  --red:             #DC2626;
  --blue:            #2563EB;

  --text:            #0F172A;
  --muted:           #475569;
  --label:           #64748B;

  --panel-shadow:    0 8px 24px rgba(15, 23, 42, 0.06);
  --panel-shadow-lg: 0 12px 32px rgba(15, 23, 42, 0.10);

  --canvas-grad:     linear-gradient(180deg, #ffffff 0%, #F1F5F9 100%);

  /* Chart surface tokens — light variants. Matching zones but in light greys
     so the Active Trucks / Tons Delivered / Cumulative Tons charts are
     readable on white panels. */
  --chart-zone-night:  #F1F5F9;
  --chart-zone-day:    #E2E8F0;
  --chart-grid:        #CBD5E1;
  --chart-axis-label:  #64748B;
  --chart-zone-label:  #94A3B8;
  --chart-callout-bg:  #ffffff;
  --chart-accent-future: #FEF3C7;
  --chart-blue-future:   #DBEAFE;
  --chart-purple-future: #EDE9FE;
}

/* ---------- BASE ---------- */
html, body {
  background: var(--canvas-grad);
  background-attachment: fixed;
  color: var(--text);
}
html { scroll-behavior: smooth; }

::selection { background: var(--accent-soft); color: var(--text); }

/* ---------- SHARED HELPERS (opt-in) ---------- */
/* Uppercase eyebrow label — used above section titles / panel tops */
.eyebrow {
  font-family: var(--font-head);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--label);
  line-height: 1;
}

/* Mono (use for numbers, BOLs, IDs) */
.mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }

/* Hero panel styling — opt-in helper. Legacy pages don't have to use it. */
.panel-surface {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-panel);
  box-shadow: var(--panel-shadow);
  backdrop-filter: blur(var(--panel-blur));
}
:root[data-theme="light"] .panel-surface { backdrop-filter: none; }

/* ---------- HEADER THEME TOGGLE ---------- */
.theme-toggle {
  display: inline-flex;
  align-items: center;
  background: var(--input-bg);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 3px;
  cursor: pointer;
  flex-shrink: 0;
}
.theme-toggle button {
  background: none;
  border: none;
  cursor: pointer;
  padding: 5px 12px;
  border-radius: 16px;
  font-family: var(--font-head);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: background .15s, color .15s;
}
.theme-toggle button:hover { color: var(--text); }
.theme-toggle button.on {
  background: var(--accent);
  color: var(--accent-ink);
}
.theme-toggle svg { width: 12px; height: 12px; }
@media (max-width: 900px) {
  .theme-toggle button { padding: 5px 8px; }
  .theme-toggle button span { display: none; }
}

/* ---------- MOBILE WAFFLE NAV ----------
   Auto-injected on every page by nav-waffle.js. The desktop horizontal
   .header-nav is hidden on mobile in favour of a 3×3 waffle button that
   opens a slide-from-right drawer with the same nav links + theme +
   sign-out controls. Each page only has to include the script tag. */
.nav-waffle-btn {
  display: none;
  align-items: center; justify-content: center;
  background: var(--input-bg); border: 1px solid var(--border);
  color: var(--text); border-radius: 8px;
  width: 38px; height: 38px;
  cursor: pointer; padding: 0; flex-shrink: 0;
  transition: border-color .15s, color .15s;
}
.nav-waffle-btn:hover { border-color: var(--accent); color: var(--accent); }
.nav-waffle-backdrop {
  position: fixed; inset: 0; background: rgba(0,0,0,.55); z-index: 998;
  opacity: 0; pointer-events: none; transition: opacity .2s;
}
.nav-waffle-backdrop.open { opacity: 1; pointer-events: auto; }
.nav-waffle-drawer {
  position: fixed; top: 0; right: 0; bottom: 0;
  width: min(320px, 86vw);
  background: var(--surface-solid, var(--surface));
  border-left: 2px solid var(--accent);
  z-index: 999; display: flex; flex-direction: column;
  transform: translateX(100%); transition: transform .25s cubic-bezier(.2,.8,.2,1);
  box-shadow: -12px 0 32px rgba(0,0,0,.4);
}
.nav-waffle-drawer.open { transform: translateX(0); }
.nav-waffle-head {
  padding: 1rem 1.1rem; border-bottom: 1px solid var(--border);
  display: flex; align-items: center; justify-content: space-between; gap: .5rem;
}
.nav-waffle-head .nwn-name { font-weight: 600; color: var(--text); font-size: .92rem; }
.nav-waffle-head .nwn-eyebrow {
  font-family: var(--font-head); font-size: .62rem;
  letter-spacing: .18em; text-transform: uppercase; color: var(--muted);
  margin-bottom: 2px;
}
.nav-waffle-close {
  background: none; border: 1px solid var(--border); color: var(--muted);
  padding: .25rem .55rem; border-radius: 4px; cursor: pointer;
  font-family: var(--font-head); font-size: .72rem; letter-spacing: .06em;
  text-transform: uppercase;
}
.nav-waffle-close:hover { border-color: var(--red); color: var(--red); }
.nav-waffle-section {
  padding: .9rem 1.1rem .85rem;
  border-bottom: 1px solid var(--border2);
}
.nav-waffle-section:last-child { border-bottom: none; }
.nav-waffle-eyebrow {
  font-family: var(--font-head); font-size: .6rem;
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--muted); margin-bottom: .55rem;
}
.nav-waffle-link {
  display: block; padding: .6rem .75rem;
  font-family: var(--font-head); font-size: .82rem; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--text); text-decoration: none;
  border-radius: 6px;
  border: 1px solid transparent;
  margin-bottom: .15rem;
  transition: background .12s, border-color .12s, color .12s;
}
.nav-waffle-link:hover { background: var(--hover); }
.nav-waffle-link.active { color: var(--accent); border-color: var(--accent); background: var(--accent-soft); }
.nav-waffle-link.danger { color: var(--red); }
.nav-waffle-theme {
  flex: 1; background: var(--input-bg); border: 1px solid var(--border);
  color: var(--text); padding: .55rem .75rem; border-radius: 6px;
  font-family: var(--font-head); font-size: .72rem; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase; cursor: pointer;
}
.nav-waffle-theme.on { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.nav-waffle-signout {
  width: 100%; background: none; border: 1px solid var(--red); color: var(--red);
  padding: .65rem; border-radius: 6px;
  font-family: var(--font-head); font-size: .78rem; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase; cursor: pointer;
}
.nav-waffle-signout:hover { background: var(--red); color: #fff; }

/* Show waffle / hide desktop chrome on mobile.
   Breakpoint raised from 820 → 1100 (Walt 2026-05-12: the desktop nav
   has grown — Assignments + Maintenance + Dashboard + Settlements +
   PDF Sender + theme toggle + user badge + Sign Out — and at half-
   screen widths (~960px on a 1920 monitor) it was wrapping or
   clipping. 1100 ensures the waffle takes over BEFORE the desktop
   chrome breaks. iPad portrait + landscape both trigger waffle. */
@media (max-width: 1100px) {
  .nav-waffle-btn { display: inline-flex; }
  /* Hide horizontal nav links and the desktop user-area chrome — the
     drawer takes over. */
  header .header-nav { display: none !important; }
  header .header-user .theme-toggle,
  header .header-user .user-badge,
  header .header-user .btn-signout,
  header .header-user #admin-nav-link,
  header .header-user a[href="admin.html"] { display: none !important; }
  /* Tighten the header padding so the title still fits next to the logo */
  header { padding: 0 12px !important; gap: .5rem; }
  header .header-sep { display: none !important; }
  header .header-left { min-width: 0; flex: 1; gap: 8px !important; }
  header .header-logo { flex-shrink: 0; }
  header .header-title {
    font-size: .85rem !important; letter-spacing: .08em !important;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    min-width: 0;
  }
  header .header-user { flex-shrink: 0; }
  .nav-waffle-btn { flex-shrink: 0; }
}

/* ── SKELETON LOADING ──
   Shimmer placeholder for slow initial loads. Use instead of a spinner
   when you want the page to feel populated before the data arrives.
   Three building blocks:
     .skeleton          — base shimmer (apply to any block)
     .skeleton-line     — 1-line text placeholder; modifiers .sm / .lg
     .skeleton-row      — table-row-shaped placeholder; can stack
   Usage:
     <div class="skeleton-row" style="height:40px"></div>
     <div class="skeleton-line lg"></div>
*/
.skeleton {
  background: linear-gradient(90deg, var(--border) 0%, var(--border2, var(--hover)) 50%, var(--border) 100%);
  background-size: 200% 100%;
  border-radius: 4px;
  animation: skeleton-pulse 1.4s ease-in-out infinite;
}
@keyframes skeleton-pulse {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
.skeleton-line {
  height: .9rem;
  border-radius: 3px;
  margin: .4rem 0;
  /* Inherit .skeleton — combinable: <div class="skeleton skeleton-line"> */
}
.skeleton-line.sm { height: .7rem; width: 60%; }
.skeleton-line.lg { height: 1.4rem; width: 40%; }
.skeleton-row {
  height: 48px;
  border-radius: 6px;
  margin-bottom: .35rem;
}
.skeleton-row.sm { height: 32px; }
.skeleton-row.lg { height: 64px; }