/* =============================================================================
   StaffSteady — shared design system (single source of truth)
   Calm · clean · modern. One cool accent, generous white space, soft depth.

   This file is the ONLY place colours, type, spacing and radii are defined.
   Per-page stylesheets consume these tokens — never hard-coded hex/px.

   Legacy token aliases (--clay, --green, --ink, --gold, --bg, --card, --line,
   --rs, --r, --sh …) are mapped to the new system at the bottom so existing
   page markup is reskinned instantly without rewrites.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');

:root {
  /* ---- Brand / accent (calm indigo) ---------------------------------- */
  --primary-50:  #eef2ff;
  --primary-100: #e0e7ff;
  --primary-200: #c7d2fe;
  --primary-500: #6366f1;
  --primary:     #4f46e5;   /* primary action */
  --primary-600: #4f46e5;
  --primary-700: #4338ca;   /* hover / pressed */
  --primary-ink: #ffffff;   /* text on primary */

  /* ---- Neutrals (cool slate) ---------------------------------------- */
  --bg:        #f6f7f9;     /* app background */
  --bg-2:      #eef1f5;     /* subtle inset / striping */
  --surface:   #ffffff;     /* cards, inputs */
  --surface-2: #fbfcfd;     /* raised header / secondary surface */
  --border:    #e3e7ee;     /* hairlines */
  --border-2:  #d3dae4;     /* stronger dividers / control borders */

  --text:        #0f172a;   /* primary text (slate-900) */
  --text-2:      #475569;   /* secondary text (slate-600, AA on white) */
  --text-muted:  #5b6675;   /* tertiary / meta (AA on both bg and surface) */
  --text-on-dark:#f8fafc;

  /* ---- Semantic states ---------------------------------------------- */
  --success:    #0f7a52;  --success-bg:#e7f4ee;
  --warning:    #b45309;  --warning-bg:#fdf3e6;
  --danger:     #b91c1c;  --danger-bg: #fdeceb;
  --info:       #2563eb;  --info-bg:   #e8f0fe;
  --accent-2:    #0d9488;  /* calm teal — sparse secondary accent */
  --accent-2-50: #ccfbf1;
  --accent-2-700:#0f766e;

  /* ---- Demand levels (2026 tidy-up) — quiet recedes, busy pops -------- */
  --quiet:      #7c8194;  --quiet-bg: #f4f5f8;
  --busy:       #c2780b;  --busy-bg:  #fcf3e3;  --busy-line:  #eccf95;
  --vbusy:      #b5480e;  --vbusy-bg: #fcefe7;  --vbusy-line: #eebb9d;

  /* ---- Type scale (1.25-ish, readable) ------------------------------ */
  /* 2026 tidy-up: Plus Jakarta Sans everywhere (Inter kept as fallback). */
  --font-ui:      "Plus Jakarta Sans", "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-display: "Plus Jakarta Sans", "Inter", system-ui, sans-serif;
  --text-xs:   12px;
  --text-sm:   13px;
  --text-base: 15px;
  --text-md:   16px;
  --text-lg:   18px;
  --text-xl:   22px;
  --text-2xl:  28px;
  --text-3xl:  34px;
  --text-4xl:  44px;
  --leading-tight: 1.2;
  --leading:       1.55;

  /* ---- Spacing scale (4px base) ------------------------------------- */
  --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; --space-16: 64px;

  /* ---- Radii --------------------------------------------------------- */
  --radius-xs:   6px;
  --radius-sm:   8px;
  --radius:      12px;
  --radius-lg:   16px;
  --radius-xl:   22px;
  --radius-full: 999px;

  /* ---- Elevation (cool, soft) --------------------------------------- */
  --shadow-xs: 0 1px 2px rgba(15,23,42,.05);
  --shadow-sm: 0 1px 2px rgba(15,23,42,.05), 0 1px 1px rgba(15,23,42,.04);
  --shadow:    0 1px 3px rgba(15,23,42,.06), 0 8px 24px rgba(15,23,42,.07);
  --shadow-lg: 0 4px 12px rgba(15,23,42,.08), 0 24px 48px rgba(15,23,42,.10);
  --ring:      0 0 0 3px rgba(79,70,229,.30);

  /* ---- Motion -------------------------------------------------------- */
  --t-fast: 120ms cubic-bezier(.4,0,.2,1);
  --t:      180ms cubic-bezier(.4,0,.2,1);
  --t-slow: 280ms cubic-bezier(.16,1,.3,1);

  /* =========================================================================
     LEGACY ALIASES — keep existing page CSS working, reskinned to the new look
     ====================================================================== */
  --ink: var(--text);
  --muted: var(--text-muted);
  --card: var(--surface);
  --line: var(--border);
  --ui: var(--font-ui);
  --display: var(--font-display);

  --clay: var(--primary);
  --clay-d: var(--primary-700);
  --green: var(--primary);          /* scheduler "primary" → accent */
  --green-light: var(--primary-700);
  --gold: var(--accent-2);          /* secondary accent → calm teal */

  --ok: var(--success);
  --warn: var(--warning);
  --event: var(--primary-50);

  /* level / area category colours (recooled to slate + accents) */
  --senior: #1e293b;
  --mid:    #64748b;
  --junior: #94a3b8;
  --kitchen: var(--primary);
  --bar:     #0d9488;
  --restaurant: #6366f1;

  /* radius / shadow aliases used by various pages */
  --rs: var(--radius-sm);
  --r:  var(--radius);
  --sh: var(--shadow);
  --shadow-sm: var(--shadow-sm);
}

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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--font-ui);
  background: var(--bg);
  color: var(--text);
  font-size: var(--text-base);
  line-height: var(--leading);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  color: var(--text);
  line-height: var(--leading-tight);
  letter-spacing: -0.01em;
}

a { color: var(--primary-700); }

::selection { background: var(--primary-100); color: var(--text); }

/* Accessible focus ring everywhere (keyboard users) */
:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
  border-radius: var(--radius-xs);
}
/* Don't double-up when a control manages its own ring */
.btn:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 2px solid transparent;
  box-shadow: var(--ring);
  border-radius: var(--radius-sm);
}

/* Skip link for keyboard / screen-reader users */
.skip-link {
  position: absolute; left: var(--space-3); top: -48px;
  background: var(--primary); color: #fff; padding: 10px 16px;
  border-radius: var(--radius-sm); z-index: 1000; font-weight: 600;
  transition: top var(--t);
}
.skip-link:focus { top: var(--space-3); }

.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;
}

/* ====================== Shared component defaults ====================== */
/* Pages may override; these give unstyled/new markup a consistent baseline. */

/* Every management page opens with the same head: page title + one-line
   purpose on the left, optional status/actions on the right. */
.pagehead { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-4); margin-bottom: var(--space-5); flex-wrap: wrap; }
.pagehead h1 { font-family: var(--font-display); font-size: var(--text-2xl); font-weight: 700; margin: 0; letter-spacing: -0.01em; }
.pagehead p { color: var(--text-2); margin: 4px 0 0; font-size: var(--text-base); max-width: 60ch; }

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}

/* Inputs */
input, select, textarea {
  font: inherit;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border-2);
  border-radius: var(--radius-sm);
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
input::placeholder, textarea::placeholder { color: var(--text-muted); }
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: var(--ring);
}

/* Buttons */
/* ---------------------------------------------------------------------------
   [hidden] must actually hide.
   The HTML `hidden` attribute is only a USER-AGENT `display: none`, so ANY
   author rule that sets display beats it. `.btn` below sets
   `display: inline-flex`, which meant every `<button class="btn" hidden>` in
   this app stayed visible and clickable.
   That shipped a live bug: the planner's "Load saved" button
   (public/index.html) was deliberately retired and marked `hidden`, but
   remained on screen — clicking it called openRota() for the selected week and
   appeared to do nothing, which is exactly how it was reported.
   The trap had already been found and patched THREE times locally —
   public/swaps.html's tablist, public/nav.js's `.sn-item[hidden]`, and
   public/staffnav.js, whose comment says "an explicit display defeats [hidden]
   — restore it". Three local patches and the fourth case was missed, which is
   the same one-rule-in-several-places failure this project has recorded for keg
   cover and staff_premises. This is the single global fix; the three local ones
   are now redundant but harmless.
   `!important` is load-bearing: without it any component class that sets
   display re-breaks it. Verified safe first — every element carrying `hidden`
   in public/*.html is revealed by toggling the ATTRIBUTE (`el.hidden = false`,
   login.html's `show()` helper), never by writing `style.display`, so nothing
   depends on the broken behaviour.
   --------------------------------------------------------------------------- */
[hidden] { display: none !important; }

.btn {
  --btn-bg: var(--primary);
  --btn-fg: var(--primary-ink);
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: var(--font-ui); font-weight: 600; font-size: var(--text-sm);
  line-height: 1; cursor: pointer; white-space: nowrap;
  background: var(--btn-bg); color: var(--btn-fg);
  border: 1px solid transparent;
  padding: 10px 16px; border-radius: var(--radius-sm);
  transition: background var(--t-fast), border-color var(--t-fast),
              box-shadow var(--t-fast), transform var(--t-fast);
}
.btn:hover { background: var(--primary-700); }
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: .55; cursor: default; transform: none; }

.btn.ghost {
  --btn-bg: var(--surface); --btn-fg: var(--text);
  border-color: var(--border-2);
}
.btn.ghost:hover { background: var(--bg-2); border-color: var(--primary-200); }

.btn.danger {
  --btn-bg: var(--surface); --btn-fg: var(--danger);
  border-color: var(--danger);
}
.btn.danger:hover { background: var(--danger-bg); }

.btn.sm { padding: 6px 11px; font-size: var(--text-xs); }
.btn.lg { padding: 13px 22px; font-size: var(--text-md); }

/* Pills / tags baseline */
.tag, .pill {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: var(--text-xs); font-weight: 600;
}

/* Tables */
table { width: 100%; border-collapse: collapse; }
th { color: var(--text-muted); font-weight: 600; }

.muted { color: var(--text-muted); }

/* Respect users who prefer less motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}

/* Nice, unobtrusive scrollbars */
* { scrollbar-width: thin; scrollbar-color: var(--border-2) transparent; }
*::-webkit-scrollbar { height: 10px; width: 10px; }
*::-webkit-scrollbar-thumb { background: var(--border-2); border-radius: var(--radius-full); border: 2px solid var(--bg); }
*::-webkit-scrollbar-thumb:hover { background: #b9c2cf; }