/**
 * src/css/design-system.css
 * DocPilot Design System — "Industrial Modern"
 * ─────────────────────────────────────────────────────────────────────────────
 * ONE canonical token sheet for the whole app. Everything else consumes these
 * custom properties. Loaded AFTER styles.css so it wins equal-specificity ties.
 *
 * Brand identity (kept, refined):
 *   Navy  #022448  — sidebar / primary
 *   Amber #fea619  — accent / CTA
 *   Surface #F8FAFC, Inter typeface
 *
 * Contents:
 *   1. Color tokens        5. Elevation ramp      9.  Global a11y (focus, motion)
 *   2. Spacing scale       6. Motion tokens       10. Shared components (dp-*)
 *   3. Radii               7. Z-index scale       11. Mobile drawer + scrim
 *   4. Type scale          8. Layout tokens       12. Safe-area / mobile helpers
 */

:root {
  /* ── 1. Color ─────────────────────────────────────────────────────────── */
  /* Navy ramp (primary). 500 = brand base. */
  --navy-50:  #eef4fb;
  --navy-100: #d7e4f3;
  --navy-200: #aec9e6;
  --navy-300: #7ba3d0;
  --navy-400: #3f6ea8;
  --navy-500: #022448;   /* brand */
  --navy-600: #021f3e;
  --navy-700: #011a34;
  --navy-800: #01152a;
  --navy-900: #010f1f;

  /* Amber ramp (accent / CTA). 500 = brand base. */
  --amber-50:  #fff7e8;
  --amber-100: #feefc9;
  --amber-200: #fde0a3;
  --amber-300: #fdc96a;
  --amber-400: #feb53c;
  --amber-500: #fea619;  /* brand */
  --amber-600: #e08f08;
  --amber-700: #b06f06;
  --amber-800: #7c4e05;
  --amber-900: #4d2f03;
  --on-amber:  #3d2800;  /* AA on amber-500 */

  /* Neutrals (surface ramp, cool gray) */
  --surface-0:   #ffffff;
  --surface-50:  #f8fafc;
  --surface-100: #f1f5f9;
  --surface-200: #e2e8f0;
  --surface-300: #cbd5e1;
  --surface-400: #94a3b8;
  --surface-500: #64748b;
  --surface-600: #475569;
  --surface-700: #334155;
  --surface-800: #1e293b;
  --surface-900: #0f172a;

  --bg-app:      var(--surface-50);
  --bg-card:     var(--surface-0);
  --bg-subtle:   var(--surface-100);
  --border:      var(--surface-200);
  --border-soft: #e8edf3;
  --text-1:      var(--surface-900);  /* headings */
  --text-2:      var(--surface-700);  /* body strong */
  --text-3:      var(--surface-500);  /* secondary */
  --text-4:      var(--surface-400);  /* placeholder / disabled */

  /* Semantic */
  --success:      #15803d; --success-bg: #f0fdf4; --success-border: #bbf7d0;
  --warning:      #b45309; --warning-bg: #fffbeb; --warning-border: #fde68a;
  --danger:       #b91c1c; --danger-bg:  #fef2f2; --danger-border:  #fecaca;
  --info:         #1d4ed8; --info-bg:    #eff6ff; --info-border:    #bfdbfe;

  --ring:        rgba(254, 166, 25, 0.55); /* focus ring (amber, visible on navy+white) */
  --ring-navy:   rgba(2, 36, 72, 0.35);

  /* Fixed-tone pairs (additive — mirror the Tailwind inline config color
     values already shipped per-page as 'primary-fixed' / 'on-primary-fixed' /
     'on-primary-container', exposed here as real custom properties so
     page CSS can reference one source instead of re-hardcoding hex). */
  --primary-fixed:      #d5e3ff;
  --on-primary-fixed:   #001c3b;
  --on-primary-container: #8aa4cf;
  --border-variant:     var(--surface-300);

  /* ── 2. Spacing (4px base) ────────────────────────────────────────────── */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px; --sp-5: 20px;
  --sp-6: 24px; --sp-8: 32px; --sp-10: 40px; --sp-12: 48px; --sp-16: 64px;

  /* ── 3. Radii ─────────────────────────────────────────────────────────── */
  --r-sm: 6px; --r-md: 10px; --r-lg: 12px; --r-xl: 16px; --r-2xl: 20px;
  --r-full: 9999px;

  /* ── 4. Type scale (Inter) ────────────────────────────────────────────── */
  --font-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --fs-11: 0.6875rem; --lh-11: 1rem;      /* micro labels, badges */
  --fs-12: 0.75rem;   --lh-12: 1.125rem;  /* captions, table meta */
  --fs-13: 0.8125rem; --lh-13: 1.25rem;   /* dense body (data grids) */
  --fs-14: 0.875rem;  --lh-14: 1.375rem;  /* body default */
  --fs-16: 1rem;      --lh-16: 1.5rem;    /* emphasized body */
  --fs-18: 1.125rem;  --lh-18: 1.625rem;  /* card titles */
  --fs-20: 1.25rem;   --lh-20: 1.75rem;   /* section titles */
  --fs-24: 1.5rem;    --lh-24: 2rem;      /* page titles */
  --fs-30: 1.875rem;  --lh-30: 2.375rem;  /* hero / empty states */
  --tracking-tight: -0.015em;
  --tracking-label: 0.06em;               /* uppercase micro labels */
  --tnum: 'tnum' 1, 'cv11' 1;             /* tabular numerals for quantities */

  /* ── 5. Elevation ramp (real shadows, cool-tinted) ────────────────────── */
  --sh-xs: 0 1px 2px rgba(15, 23, 42, 0.05);
  --sh-sm: 0 1px 2px rgba(15, 23, 42, 0.06), 0 1px 3px rgba(15, 23, 42, 0.04);
  --sh-md: 0 2px 4px rgba(15, 23, 42, 0.05), 0 6px 16px rgba(15, 23, 42, 0.07);
  --sh-lg: 0 4px 8px rgba(15, 23, 42, 0.06), 0 14px 32px rgba(15, 23, 42, 0.10);
  --sh-xl: 0 8px 16px rgba(2, 36, 72, 0.10), 0 24px 56px rgba(2, 36, 72, 0.16);
  --sh-focus: 0 0 0 3px var(--ring);

  /* ── 6. Motion ────────────────────────────────────────────────────────── */
  --dur-1: 150ms; --dur-2: 200ms; --dur-3: 250ms;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);     /* entrances, drawers */
  --ease-std: cubic-bezier(0.2, 0, 0, 1);        /* state changes */

  /* ── 7. Z-index scale — the ONE stacking authority ────────────────────── */
  --z-base: 0;
  --z-raised: 10;       /* sticky table headers, chips above content */
  --z-sticky: 20;
  --z-header: 40;       /* top bar */
  --z-sidebar: 50;      /* desktop sidebar, mobile bottom nav */
  --z-scrim: 55;        /* drawer scrim (above sidebar, below drawer) */
  --z-drawer: 60;       /* mobile drawer */
  --z-overlay: 70;      /* page overlays (info drawer etc.) */
  --z-modal: 80;
  --z-popover: 90;      /* dropdowns, menus */
  --z-toast: 100;
  --z-dock: 9998;       /* DoBo panels (legacy, kept above everything) */

  /* ── 8. Layout ────────────────────────────────────────────────────────── */
  --topbar-h: 64px;
  --sidebar-w: 240px;
  --sidebar-w-collapsed: 64px;
  --bottomnav-h: 64px;
  --touch: 44px;        /* minimum touch target */
}

/* ═══════════════════════════════════════════════════════════════════════════
   9. Global accessibility & polish (additive — no selector here restyles an
   existing component against its will; these fill gaps Tailwind leaves open)
   ═══════════════════════════════════════════════════════════════════════════ */

/* Visible keyboard focus on EVERY interactive element */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible,
[role="button"]:focus-visible {
  outline: 2px solid var(--amber-500);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}

/* Respect reduced motion everywhere */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Momentum scrolling on the main scroll panes (iOS) */
main, .dobo2-chat, .chat-messages, #chatThread, #convoList {
  -webkit-overflow-scrolling: touch;
}

/* Numeric density: quantities align everywhere they are opted in */
.tnum, td.num, .stat-val {
  font-variant-numeric: var(--tnum);
}

::selection {
  background: rgba(254, 166, 25, 0.28);
}

/* ═══════════════════════════════════════════════════════════════════════════
   10. Shared components (opt-in dp-* classes + small refinements of existing
   patterns that are safe, e.g. the .status-dot that was never defined)
   ═══════════════════════════════════════════════════════════════════════════ */

/* — Cards — */
.dp-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-xs);
  transition: box-shadow var(--dur-2) var(--ease-std),
              transform var(--dur-2) var(--ease-std),
              border-color var(--dur-2) var(--ease-std);
}
.dp-card--hover:hover {
  box-shadow: var(--sh-md);
  transform: translateY(-2px);
  border-color: var(--surface-300);
}

/* Refine the JS-injected project cards (index) — the inline #projectGrid>div
   rule provides layout; this adds the premium layer (same specificity + later
   in cascade via the extra class). */
#projectGrid > div.project-card {
  border-radius: var(--r-lg);
  border-color: var(--border);
  box-shadow: var(--sh-xs);
  transition: box-shadow var(--dur-2) var(--ease-std),
              transform var(--dur-2) var(--ease-std),
              border-color var(--dur-2) var(--ease-std);
}
#projectGrid > div.project-card:hover {
  box-shadow: var(--sh-md);
  border-color: var(--surface-300);
  transform: translateY(-2px);
}
#projectGrid > div.project-card:focus-visible {
  outline: 2px solid var(--amber-500);
  outline-offset: 2px;
}

/* .status-dot is rendered by dashboard.js but was never styled anywhere —
   define it once here instead of per-page. */
.status-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: var(--r-full);
  flex-shrink: 0;
}

/* — Buttons — */
.dp-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  min-height: var(--touch);
  padding: 0 var(--sp-5);
  border-radius: var(--r-md);
  border: 1px solid transparent;
  font-family: var(--font-sans);
  font-size: var(--fs-14);
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  user-select: none;
  transition: background var(--dur-1) var(--ease-std),
              border-color var(--dur-1) var(--ease-std),
              color var(--dur-1) var(--ease-std),
              box-shadow var(--dur-1) var(--ease-std),
              transform var(--dur-1) var(--ease-std);
}
.dp-btn:active { transform: scale(0.98); }
.dp-btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }
.dp-btn--primary { background: var(--navy-500); color: #fff; }
.dp-btn--primary:hover:not(:disabled) { background: var(--navy-400); }
.dp-btn--accent { background: var(--amber-500); color: var(--on-amber); box-shadow: var(--sh-sm); }
.dp-btn--accent:hover:not(:disabled) { background: var(--amber-400); }
.dp-btn--ghost {
  background: var(--surface-0); color: var(--text-2); border-color: var(--border);
}
.dp-btn--ghost:hover:not(:disabled) { background: var(--surface-100); border-color: var(--surface-300); }

/* — Inputs — */
.dp-input {
  width: 100%;
  min-height: var(--touch);
  padding: 0 var(--sp-4);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--surface-0);
  color: var(--text-1);
  font: inherit;
  font-size: var(--fs-14);
  transition: border-color var(--dur-1) var(--ease-std),
              box-shadow var(--dur-1) var(--ease-std),
              background var(--dur-1) var(--ease-std);
}
.dp-input::placeholder { color: var(--text-4); }
.dp-input:hover { border-color: var(--surface-300); }
.dp-input:focus { outline: none; border-color: var(--navy-400); box-shadow: 0 0 0 3px var(--ring-navy); }

/* — Skeleton loading — */
@keyframes dp-shimmer {
  from { background-position: 200% 0; }
  to { background-position: -200% 0; }
}
.dp-skeleton {
  border-radius: var(--r-md);
  background: linear-gradient(90deg, var(--surface-100) 25%, var(--surface-200) 37%, var(--surface-100) 63%);
  background-size: 400% 100%;
  animation: dp-shimmer 1.4s ease infinite;
}
.dp-skeleton-card {
  height: 148px;
  border-radius: var(--r-lg);
  background: linear-gradient(90deg, var(--surface-100) 25%, #e9eef4 37%, var(--surface-100) 63%);
  background-size: 400% 100%;
  animation: dp-shimmer 1.4s ease infinite;
  border: 1px solid var(--border-soft);
}

/* — Empty states — */
.dp-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--sp-3);
  padding: var(--sp-16) var(--sp-6);
  text-align: center;
  color: var(--text-3);
}
.dp-empty .material-symbols-outlined {
  font-size: 40px;
  color: var(--surface-300);
}
.dp-empty-title {
  font-size: var(--fs-16);
  font-weight: 600;
  color: var(--text-2);
  margin: 0;
}
.dp-empty-sub {
  font-size: var(--fs-13);
  color: var(--text-3);
  margin: 0;
  max-width: 42ch;
}

/* — Badges / chips — */
.dp-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  padding: 2px var(--sp-2);
  border-radius: var(--r-full);
  font-size: var(--fs-11);
  font-weight: 600;
  letter-spacing: 0.02em;
  line-height: 1.5;
}

/* — Nav-bar action group (the hook DoBo mounts into) — */
#navActions {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  flex-shrink: 0;
}

/* ═══════════════════════════════════════════════════════════════════════════
   11. Mobile drawer + scrim
   The desktop sidebar (.sidebar-nav, hidden below md by Tailwind) becomes a
   real drawer on small screens: scrim, slide-in, focus trap + ESC + swipe
   handled in src/js/mobile-drawer.js.
   ═══════════════════════════════════════════════════════════════════════════ */
.dp-scrim {
  position: fixed;
  inset: 0;
  z-index: var(--z-scrim);
  background: rgba(2, 20, 40, 0.45);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--dur-3) var(--ease-std);
}
.dp-scrim.open {
  opacity: 1;
  pointer-events: auto;
}

@media (max-width: 767px) {
  /* Drawer geometry; hidden by default (translated off-canvas). Selectors
     are deliberately high-specificity: every page ships inline !important
     rules for the desktop collapsed state that must not shrink the drawer.
     :not(#sidebar) excludes admin.html, which ships its own drawer system. */
  nav.sidebar-nav:not(#sidebar),
  body > nav.sidebar-nav:not(#sidebar).sidebar-collapsed,
  html.sidebar-pre-collapsed body nav.sidebar-nav:not(#sidebar) {
    position: fixed;
    left: 0;
    top: 0;
    bottom: 0;
    width: min(300px, 84vw) !important;
    z-index: var(--z-drawer);
    display: flex !important;             /* override Tailwind .hidden */
    transform: translateX(-105%);
    visibility: hidden;
    transition: transform var(--dur-3) var(--ease-out),
                visibility 0s linear var(--dur-3);
    box-shadow: var(--sh-xl);
  }
  nav.sidebar-nav:not(#sidebar).drawer-open,
  body > nav.sidebar-nav:not(#sidebar).sidebar-collapsed.drawer-open,
  html.sidebar-pre-collapsed body nav.sidebar-nav:not(#sidebar).drawer-open {
    transform: translateX(0);
    visibility: visible;
    transition: transform var(--dur-3) var(--ease-out);
  }
  /* On mobile the collapse state makes no sense — always show labels */
  nav.sidebar-nav:not(#sidebar) .sidebar-text,
  nav.sidebar-nav:not(#sidebar) .sidebar-brand-text,
  nav.sidebar-nav:not(#sidebar) .sidebar-admin-label,
  nav.sidebar-nav:not(#sidebar).sidebar-collapsed .sidebar-text,
  nav.sidebar-nav:not(#sidebar).sidebar-collapsed .sidebar-brand-text,
  nav.sidebar-nav:not(#sidebar).sidebar-collapsed .sidebar-admin-label,
  html.sidebar-pre-collapsed body nav.sidebar-nav:not(#sidebar) .sidebar-text,
  html.sidebar-pre-collapsed body nav.sidebar-nav:not(#sidebar) .sidebar-brand-text,
  html.sidebar-pre-collapsed body nav.sidebar-nav:not(#sidebar) .sidebar-admin-label {
    display: inline !important;
  }
  nav.sidebar-nav:not(#sidebar) .sidebar-link,
  nav.sidebar-nav:not(#sidebar).sidebar-collapsed .sidebar-link,
  html.sidebar-pre-collapsed body nav.sidebar-nav:not(#sidebar) .sidebar-link {
    justify-content: flex-start !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
    min-height: var(--touch);
  }
  /* Main content never indents on mobile */
  body .main-content,
  body .main-content.sidebar-collapsed,
  html.sidebar-pre-collapsed body .main-content {
    margin-left: 0 !important;
  }
  /* Hide the desktop collapse toggle inside the drawer */
  .sidebar-nav:not(#sidebar) #sidebarToggle { display: none; }
  /* Bigger touch targets in the drawer */
  .sidebar-nav:not(#sidebar) .sidebar-link { font-size: var(--fs-14); }
}

/* Body scroll lock while the drawer is open */
html.drawer-lock, html.drawer-lock body {
  overflow: hidden !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   12. Safe-area + mobile helpers
   ═══════════════════════════════════════════════════════════════════════════ */
@supports (padding: env(safe-area-inset-bottom)) {
  .bottom-nav,
  nav.safe-bottom {
    padding-bottom: env(safe-area-inset-bottom);
    height: auto;
    min-height: var(--bottomnav-h);
  }
  .safe-bottom-pad {
    padding-bottom: calc(var(--sp-5) + env(safe-area-inset-bottom));
  }
}

/* No horizontal page scroll, ever — belt and suspenders on small screens */
@media (max-width: 767px) {
  html, body {
    overflow-x: hidden;
    max-width: 100vw;
  }
}