/* ============================================================
   FLY CAPE TOWN — Ops Platform · Admin shared styles
   Professional dark ops theme on the FCT brand ink ramp.
   Surfaces : ink-900 #02081C base · ink-700 #0E2036 panels · navy #1B4664 raised
   Actions  : brand cyan #129FC0 (hover #0C7CA4)
   Highlight: electric cyan #2FC1D3 — key metrics only
   Type     : Archivo (display/metrics) · Hanken Grotesk (body)
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@500;600;700;800;900&family=Hanken+Grotesk:wght@400;500;600;700;800&display=swap');

:root {
  /* Brand core */
  --fct-cyan-electric: #2FC1D3;
  --fct-cyan:          #129FC0;
  --fct-teal-deep:     #0C7CA4;
  --fct-navy:          #1B4664;
  --fct-ink-900: #02081C;
  --fct-ink-800: #081227;
  --fct-ink-700: #0E2036;
  --fct-ink-600: #1B4664;
  --fct-ink-500: #2C5A7C;

  /* Surfaces (ink ramp) */
  --bg: var(--fct-ink-900);
  --panel: var(--fct-ink-700);
  --panel-2: var(--fct-ink-600);
  --line: rgba(113, 159, 175, 0.22);          /* steel hairline on ink */
  --line-strong: rgba(113, 159, 175, 0.38);

  /* Text — contrast-checked on the ink ramp */
  --ink: #EAF2F6;        /* body on ink-900 ≈ 16.5:1 */
  --ink-strong: #FFFFFF; /* payroll figures ≥ 7:1 on all surfaces */
  --muted: #9FB4C2;      /* ≈ 7.5:1 on ink-900, ≥ 4.6:1 on navy */

  /* Brand / actions */
  --accent: var(--fct-cyan);            /* primary actions #129FC0 */
  --accent-hover: var(--fct-teal-deep); /* #0C7CA4 */
  --accent-2: var(--fct-cyan-electric); /* electric — key metrics/highlights */
  --link: #57CCDF;                      /* cyan-300, AA on ink surfaces */

  /* Semantic — harmonised to the cool palette */
  --good: #3DDC97;
  --warn: #F2B544;
  --danger: #FF6B7E;

  --radius: 10px;
  --focus-ring: 0 0 0 2px var(--fct-ink-900), 0 0 0 4px var(--fct-cyan-electric);

  --font-display: 'Archivo', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-body: 'Hanken Grotesk', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}

* { box-sizing: border-box; }
html, body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 14px/1.5 var(--font-body);
}
a { color: var(--link); text-decoration: none; }
a:hover { text-decoration: underline; }

:where(a, button, select, input, [tabindex]):focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
  border-radius: 6px;
}

/* ============================================================
   BASE COMPONENT LAYER (relocated from the file tail, where it
   was unintentionally overriding every modern design layer).
   Everything below the G-wave marker progressively refines this.
   ============================================================ */

/* ---------- Topbar: logo lockup + nav ---------- */
.topbar {
  display: flex; align-items: center; gap: 22px;
  padding: 12px 22px;
  background: linear-gradient(90deg, var(--fct-ink-800), var(--fct-ink-900));
  border-bottom: 1px solid var(--line);
  position: sticky; top: 0; z-index: 10;
}
.topbar .brand {
  display: flex; align-items: center; gap: 10px;
  font-family: var(--font-display);
  font-weight: 800; letter-spacing: .12em; font-size: 13px;
  text-transform: uppercase; color: var(--ink-strong);
  white-space: nowrap;
}
.topbar .brand img { height: 30px; width: auto; display: block; }
.topbar .brand .ops { color: var(--accent-2); }
.topbar .brand a { color: inherit; display: flex; align-items: center; gap: 10px; }
.topbar .brand a:hover { text-decoration: none; }
.topbar nav { display: flex; gap: 4px; flex-wrap: wrap; }
.topbar nav a {
  padding: 6px 12px; border-radius: 8px; color: var(--muted); font-weight: 600;
  border: 1px solid transparent;
}
.topbar nav a:hover { background: var(--panel); color: var(--ink); text-decoration: none; }
.topbar nav a.active {
  background: var(--accent); color: var(--fct-ink-900);
  font-weight: 700;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.18);
}

/* ---------- Layout & headings ---------- */
main { max-width: 1180px; margin: 0 auto; padding: 22px; }
h1 {
  font-family: var(--font-display);
  font-size: 21px; font-weight: 800; letter-spacing: -0.01em;
  margin: 4px 0 2px; color: var(--ink-strong);
}
.sub { color: var(--muted); margin: 0 0 18px; }

/* ---------- Cards (metrics) ---------- */
.grid { display: grid; gap: 14px; }
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 14px; }
.card {
  background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 16px;
}
a.card { color: var(--ink); transition: border-color .12s ease; }
a.card:hover { border-color: var(--accent); text-decoration: none; }
.card .label {
  color: var(--muted); font-size: 12px; font-weight: 600;
  text-transform: uppercase; letter-spacing: .09em;
}
.card .value {
  font-family: var(--font-display);
  font-size: 26px; font-weight: 800; margin-top: 6px;
  font-variant-numeric: tabular-nums; letter-spacing: -0.01em;
  color: var(--ink-strong);
}
.card .value.accent { color: var(--accent-2); }
.card .value.warn { color: var(--warn); }
.card .value.danger { color: var(--danger); }
.card .hint { color: var(--muted); font-size: 12px; margin-top: 4px; }

/* ---------- Panels ---------- */
.panel {
  background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 18px; margin-top: 16px;
}
.panel h2 {
  margin: 0 0 12px; font-size: 14px;
  font-family: var(--font-display); font-weight: 700;
  letter-spacing: .04em; text-transform: uppercase; color: var(--ink-strong);
}

/* ---------- Tables ---------- */
table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; padding: 9px 10px; border-bottom: 1px solid var(--line); }
th {
  color: var(--muted); font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .07em;
}
td { color: var(--ink); }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }
td.num { color: var(--ink-strong); font-weight: 600; }
tfoot td {
  font-weight: 800; border-top: 2px solid var(--line-strong);
  color: var(--ink-strong); font-variant-numeric: tabular-nums;
}

/* ---------- Status pills / badges ---------- */
.badge {
  display: inline-block; padding: 2px 9px; border-radius: 999px;
  font-size: 11px; font-weight: 700; letter-spacing: .02em;
  border: 1px solid var(--line);
  background: rgba(14, 32, 54, 0.6); color: var(--muted);
}
.badge.queued { color: var(--muted); }
.badge.sent { color: #57CCDF; border-color: rgba(18,159,192,.45); background: rgba(18,159,192,.12); }
.badge.delivered { color: #8FDDEB; border-color: rgba(47,193,211,.45); background: rgba(47,193,211,.10); }
.badge.read { color: var(--accent-2); border-color: rgba(47,193,211,.55); background: rgba(47,193,211,.14); }
.badge.replied { color: var(--good); border-color: rgba(61,220,151,.45); background: rgba(61,220,151,.10); }
.badge.failed { color: var(--danger); border-color: rgba(255,107,126,.45); background: rgba(255,107,126,.10); }
.badge.confirmed { color: var(--good); border-color: rgba(61,220,151,.45); background: rgba(61,220,151,.10); }
.badge.pending_deposit { color: var(--warn); border-color: rgba(242,181,68,.45); background: rgba(242,181,68,.10); }
.badge.rescheduled { color: #57CCDF; border-color: rgba(18,159,192,.45); background: rgba(18,159,192,.12); }
.badge.cancelled { color: var(--danger); border-color: rgba(255,107,126,.45); background: rgba(255,107,126,.10); }
.badge.completed { color: var(--good); border-color: rgba(61,220,151,.45); background: rgba(61,220,151,.10); }
.badge.draft { color: var(--muted); }
.badge.approved { color: #57CCDF; border-color: rgba(18,159,192,.45); background: rgba(18,159,192,.12); }
.badge.paid { color: var(--good); border-color: rgba(61,220,151,.45); background: rgba(61,220,151,.10); }
.badge.active { color: var(--good); border-color: rgba(61,220,151,.45); background: rgba(61,220,151,.10); }
.badge.partially_redeemed { color: #57CCDF; border-color: rgba(18,159,192,.45); background: rgba(18,159,192,.12); }
.badge.redeemed { color: var(--muted); }
.badge.expired { color: var(--danger); border-color: rgba(255,107,126,.45); background: rgba(255,107,126,.10); }
.badge.expiring { color: var(--warn); border-color: rgba(242,181,68,.45); background: rgba(242,181,68,.10); }
.badge.pending_payment { color: var(--warn); border-color: rgba(242,181,68,.45); background: rgba(242,181,68,.10); }
.badge.passthrough { color: var(--warn); border-color: rgba(242,181,68,.45); background: rgba(242,181,68,.10); }

/* ---------- Buttons (base) ---------- */
button {
  font: inherit; font-family: var(--font-body); font-weight: 700; cursor: pointer;
  border: 1px solid var(--line-strong); background: var(--panel-2); color: var(--ink-strong);
  padding: 9px 16px; border-radius: 9px;
  transition: background .12s ease, border-color .12s ease;
}
button:hover { border-color: var(--accent-2); }
button.primary { background: var(--accent); color: var(--fct-ink-900); border-color: var(--accent); }
button.primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); color: #FFFFFF; }
button.good { background: var(--good); color: var(--fct-ink-900); border-color: var(--good); }
button.good:hover { filter: brightness(1.08); }
button:disabled { opacity: .5; cursor: not-allowed; }
.btn-row { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 14px; align-items: center; }

/* ---------- Misc components ---------- */
.qr { display: inline-flex; gap: 8px; margin-top: 6px; }
.qr .chip {
  padding: 5px 12px; border-radius: 8px; border: 1px solid var(--line);
  background: var(--panel-2); font-size: 12px; font-weight: 700; color: var(--ink);
}
.preview {
  background: var(--fct-ink-800); border: 1px solid rgba(61,220,151,.35); border-radius: 12px;
  padding: 14px; white-space: pre-wrap; max-width: 460px;
}
.preview .meta { color: var(--muted); font-size: 11px; margin-bottom: 8px; }
label.sel { display: flex; align-items: center; gap: 8px; cursor: pointer; }
select, input[type="checkbox"] { accent-color: var(--accent); }
.muted { color: var(--muted); }
.note {
  margin-top: 10px; padding: 10px 12px; border-radius: 8px;
  background: rgba(14, 32, 54, 0.7); border: 1px dashed var(--line-strong);
  color: var(--muted); font-size: 12px;
}
.note strong, .note code { color: var(--ink); }
.ok-toast { color: var(--good); font-weight: 700; }
.bar { height: 8px; border-radius: 6px; background: var(--panel-2); overflow: hidden; }
.bar > span { display: block; height: 100%; background: linear-gradient(90deg, var(--accent), var(--accent-2)); }

/* ---------- G-wave: modern form controls everywhere ---------- */
/* Native popups/pickers follow the dark scheme instead of OS defaults. */
:root { color-scheme: dark; }

input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
select, textarea {
  appearance: none;
  -webkit-appearance: none;
  padding: 9px 12px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, .16);
  background: rgba(255, 255, 255, .055);
  color: var(--ink, #EAF4F7);
  font: inherit;
  transition: border-color .15s, background .15s, box-shadow .15s;
}
input:hover, select:hover, textarea:hover { border-color: rgba(47, 193, 211, .45); }
input:focus, select:focus, textarea:focus {
  border-color: #2FC1D3;
  background: rgba(47, 193, 211, .07);
}
input::placeholder, textarea::placeholder { color: rgba(234, 244, 247, .35); }

/* Selects: custom chevron + solid dark popup (translucent bgs go unreadable). */
select {
  background-color: #0E2430;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%232FC1D3' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 34px;
  cursor: pointer;
}
select option { background: #0E2430; color: #EAF4F7; padding: 8px 10px; }
select option:checked { background: #2FC1D3; color: #06222B; font-weight: 600; }

/* Date/time pickers: cyan calendar glyph instead of the grey OS one. */
input[type="date"], input[type="time"], input[type="datetime-local"] { cursor: pointer; }
input::-webkit-calendar-picker-indicator {
  filter: invert(70%) sepia(60%) saturate(500%) hue-rotate(140deg);
  cursor: pointer;
}
input[type="number"] { font-variant-numeric: tabular-nums; }

/* Buttons: consistent modern shape; primary = brand cyan. */
button {
  appearance: none;
  font: inherit;
  font-weight: 600;
  padding: 9px 16px;
  border-radius: 10px;
  border: 1px solid rgba(47, 193, 211, .5);
  background: rgba(47, 193, 211, .12);
  color: var(--ink-strong, #fff);
  cursor: pointer;
  transition: background .15s, transform .05s, border-color .15s;
}
button:hover:not([disabled]) { background: rgba(47, 193, 211, .24); border-color: #2FC1D3; }
button:active:not([disabled]) { transform: translateY(1px); }
button[disabled] { opacity: .4; cursor: not-allowed; }

/* Checkboxes match the brand. */
input[type="checkbox"], input[type="radio"] { accent-color: #2FC1D3; width: 16px; height: 16px; }

label { user-select: none; }

/* ---------- J-wave: responsive shell (mobile + desktop) ---------- */
.panel { overflow-x: auto; } /* wide tables scroll inside their card, never the page */
table { min-width: 480px; }

@media (max-width: 760px) {
  .topbar { flex-wrap: wrap; gap: 10px; padding: 10px 14px; }
  .topbar .brand img { height: 26px; }
  /* Nav becomes a swipeable pill row — no hidden hamburger states to fight. */
  .topbar nav {
    order: 3; width: 100%;
    display: flex; flex-wrap: nowrap; gap: 6px;
    overflow-x: auto; -webkit-overflow-scrolling: touch;
    scrollbar-width: none; padding-bottom: 2px;
    scroll-snap-type: x proximity;
  }
  .topbar nav::-webkit-scrollbar { display: none; }
  .topbar nav a {
    flex: 0 0 auto; scroll-snap-align: start;
    padding: 8px 14px; font-size: 13px;
    background: rgba(255,255,255,.06); border-radius: 999px;
  }
  .topbar nav a.active { border-radius: 999px; }
  .topbar .auth-chip { margin-left: auto !important; }
  main { padding: 14px; }
  h1 { font-size: 18px; }
  .cards { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; }
  .card { padding: 12px; }
  td, th { padding: 8px 8px; font-size: 13px; }
  button { padding: 10px 14px; } /* comfortable touch targets */
  .actions { margin-left: 0; width: 100%; }
  .actions button { flex: 1 1 auto; }
}

@media (min-width: 1400px) {
  main { max-width: 1320px; }
}

/* ============================================================
   K-wave — refined visual system ("calm, precise, branded").
   Loads last so it overrides the legacy look without breaking
   any class contracts the pages rely on.
   ============================================================ */

body {
  background:
    radial-gradient(1100px 500px at 85% -10%, rgba(47, 193, 211, .07), transparent 60%),
    radial-gradient(900px 480px at -10% 0%, rgba(18, 115, 186, .08), transparent 55%),
    #07121A;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Frosted, hairline topbar */
.topbar {
  background: rgba(10, 22, 32, .72);
  backdrop-filter: saturate(160%) blur(18px);
  -webkit-backdrop-filter: saturate(160%) blur(18px);
  border-bottom: 1px solid rgba(255, 255, 255, .07);
}
.topbar nav a { border-radius: 999px; font-weight: 500; letter-spacing: .01em; }
.topbar nav a.active {
  background: #2FC1D3; color: #06222B;
  box-shadow: 0 1px 10px rgba(47, 193, 211, .35);
}

/* Typography rhythm */
h1 { font-size: 24px; letter-spacing: -0.02em; margin: 10px 0 4px; }
.sub { font-size: 13.5px; line-height: 1.55; max-width: 70ch; }
.panel h2 {
  font-size: 13px; font-weight: 600; text-transform: uppercase;
  letter-spacing: .08em; color: rgba(234, 244, 247, .55);
  margin-bottom: 14px;
}

/* Panels: soft glass cards with an inner top highlight */
.panel {
  background: linear-gradient(180deg, rgba(255, 255, 255, .045), rgba(255, 255, 255, .02));
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 18px;
  padding: 20px 22px;
  box-shadow: 0 14px 36px rgba(0, 0, 0, .28), inset 0 1px 0 rgba(255, 255, 255, .05);
  margin-bottom: 18px;
}

/* Metric cards */
.card {
  background: linear-gradient(180deg, rgba(255, 255, 255, .05), rgba(255, 255, 255, .02));
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 16px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05);
  transition: transform .15s ease, border-color .15s ease;
}
.card:hover { transform: translateY(-1px); border-color: rgba(47, 193, 211, .35); }
.card .label { font-size: 11px; text-transform: uppercase; letter-spacing: .07em; opacity: .55; }
.card .value { font-size: 22px; font-weight: 700; letter-spacing: -0.01em; }

/* Tables: hairline separators, no grid walls, sticky header, hover tint */
table { border-collapse: separate; border-spacing: 0; }
th {
  position: sticky; top: 0; z-index: 1;
  background: rgba(10, 22, 32, .92);
  font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .07em;
  color: rgba(234, 244, 247, .5);
  border-bottom: 1px solid rgba(255, 255, 255, .12);
  padding: 10px 12px;
}
td {
  border-bottom: 1px solid rgba(255, 255, 255, .055);
  padding: 11px 12px;
  font-size: 13.5px;
}
tbody tr { transition: background .12s ease; }
tbody tr:hover { background: rgba(47, 193, 211, .05); }
tfoot td { border-top: 1px solid rgba(255, 255, 255, .18); border-bottom: none; font-weight: 700; }

/* Badges: quiet pills */
.badge {
  border-radius: 999px; padding: 3px 10px; font-size: 11px; font-weight: 600;
  letter-spacing: .02em;
}

/* Buttons: one primary voice, calm secondaries */
button {
  border-radius: 12px;
  transition: background .15s ease, transform .06s ease, border-color .15s ease, box-shadow .15s ease;
}
button:hover:not([disabled]) { box-shadow: 0 2px 14px rgba(47, 193, 211, .2); }
button.primary, .actions button:first-child {
  background: #2FC1D3; border-color: #2FC1D3; color: #06222B; font-weight: 700;
}
button.primary:hover:not([disabled]), .actions button:first-child:hover:not([disabled]) {
  background: #4BD2E2;
}

/* Inputs: roomier, calmer */
input:not([type="checkbox"]):not([type="radio"]):not([type="file"]), select, textarea {
  border-radius: 12px;
  background: rgba(255, 255, 255, .04);
  border-color: rgba(255, 255, 255, .12);
}

/* Status boxes (payout page reuses these) */
.warnbox, .errbox, .okbox { border-radius: 12px; }

/* ------------------------------------------------------------
   ui-ux-pro-max review pass (priority 1–2 CRITICAL, 5–7 HIGH/MED)
   ------------------------------------------------------------ */

/* §1 Accessibility: respect reduced-motion (anti-pattern: ignoring it) */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* §1 Accessibility: muted text was drifting below 4.5:1 on the dark surface */
.muted, .sub, .hint { color: rgba(214, 230, 236, .72); }
.card .label, .panel h2 { color: rgba(214, 230, 236, .62); }

/* §1 Accessibility: stronger, consistent focus ring (2–4px, visible) */
:where(a, button, select, input, textarea, [tabindex]):focus-visible {
  outline: 2px solid #2FC1D3;
  outline-offset: 2px;
  box-shadow: none;
}

/* §2 Touch: small table-action buttons must still hit 44px on touch screens */
@media (pointer: coarse) {
  td button { min-height: 40px; min-width: 44px; }
  input:not([type="checkbox"]):not([type="radio"]), select { min-height: 44px; }
}

/* §5 Layout: 16px inputs on mobile stop iOS auto-zoom on focus */
@media (max-width: 760px) {
  input:not([type="checkbox"]):not([type="radio"]), select, textarea { font-size: 16px; }
}

/* §6 Typography: tabular figures everywhere money/counts align in columns */
td.num, th.num, .card .value, .num {
  font-variant-numeric: tabular-nums;
}

/* §2 Interaction: cursor + press feedback on interactive rows */
tbody tr[style*="cursor:pointer"]:active { background: rgba(47, 193, 211, .1); }
button:active:not([disabled]) { transform: translateY(1px) scale(.99); }

/* §3 Performance/CLS: reserve space for async panels so content doesn't jump */
#activity:empty, #proposals:empty, #availability:empty, #issue-certs:empty, #cal:empty, #compliance:empty {
  min-height: 56px;
}

/* ============================================================
   L-wave — app shell: LEFT SIDEBAR on desktop (≥1100px).
   Pure CSS transform of the existing .topbar markup, so every
   page gets it without HTML surgery. Mobile keeps the swipeable
   pill row. The signed-in chip is pinned top-right by guard.ts.
   ============================================================ */
@media (min-width: 1100px) {
  /* Only topbars that carry a nav become the rail — pages without one
     (login) keep a plain header instead of an empty 218px strip. */
  .topbar:has(nav) {
    position: fixed;
    top: 0; left: 0; bottom: 0;
    width: 218px;
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    padding: 18px 14px;
    border-bottom: none;
    border-right: 1px solid rgba(255, 255, 255, .07);
    overflow-y: auto;
  }
  .topbar .brand { padding: 4px 8px 16px; }
  .topbar .brand img { height: 34px; }
  .topbar nav {
    flex-direction: column;
    gap: 4px;
    align-items: stretch;
  }
  .topbar nav a {
    display: flex;
    align-items: center;
    padding: 10px 14px;
    border-radius: 12px;
    font-size: 14px;
  }
  .topbar nav a.active { box-shadow: 0 1px 10px rgba(47, 193, 211, .25); }
  /* auth chip is re-homed top-right by guard.ts; hide any in-nav copy */
  .topbar .auth-chip { display: none; }
  body:has(.topbar nav) main {
    margin-left: 218px;
    max-width: 1180px;
    padding: 26px 34px 60px;
  }
  /* breathing room under the fixed top-right chip */
  main > h1:first-child { margin-top: 18px; }
}

/* ---- L-wave: collapsible icon rail (slide in/out) ---- */
.nav-ico { flex: 0 0 auto; opacity: .9; }
.topbar nav a { gap: 11px; }
.nav-toggle { display: none; }

@media (min-width: 1100px) {
  .topbar { transition: width .22s ease; }
  main { transition: margin-left .22s ease; }

  /* Collapsed: 64px icon rail; labels fade out, icons stay centred */
  .nav-collapsed .topbar { width: 64px; padding: 18px 10px; }
  /* Collapsed rail: logo would be illegibly small — swap to an "FCT" wordlet */
  .nav-collapsed .topbar .brand { justify-content: center; padding: 4px 0 16px; }
  .nav-collapsed .topbar .brand img { display: none; }
  /* Wordlet lives on the home link (guard.ts wraps the logo in <a href="./index.html">)
     so it stays clickable when collapsed; bare-.brand fallback kept for safety. */
  .nav-collapsed .topbar .brand a::after,
  .nav-collapsed .topbar .brand:not(:has(a))::after {
    content: "FCT";
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 15px;
    letter-spacing: .12em;
    color: var(--accent-2, #2FC1D3);
  }
  .nav-collapsed .topbar nav a { justify-content: center; padding: 11px 0; }
  .nav-collapsed .topbar .nav-label { display: none; }
  .nav-collapsed main { margin-left: 64px; }

  /* Toggle: pinned at the rail's foot, chevron flips when collapsed */
  .nav-toggle {
    display: flex; align-items: center; justify-content: center;
    margin-top: auto;
    width: 100%; padding: 10px 0;
    background: rgba(255, 255, 255, .05);
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: 12px;
    color: rgba(234, 244, 247, .75);
  }
  .nav-toggle:hover { color: #2FC1D3; border-color: rgba(47, 193, 211, .45); }
  .nav-toggle .nav-ico { transition: transform .22s ease; }
  .nav-collapsed .nav-toggle .nav-ico { transform: rotate(180deg); }
}

/* Mobile pill row: icons inline with labels, no toggle needed */
@media (max-width: 1099px) {
  .topbar nav a { display: inline-flex; align-items: center; gap: 7px; }
  .nav-ico { width: 16px; height: 16px; }
}

/* Signed-in chip — fixed top right on every viewport */
.user-chip {
  position: fixed;
  top: 12px;
  right: 16px;
  z-index: 50;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 7px 14px;
  border-radius: 999px;
  font-size: 12.5px;
  background: rgba(10, 22, 32, .8);
  border: 1px solid rgba(255, 255, 255, .12);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
.user-chip a { color: #2FC1D3; font-weight: 600; }
@media (max-width: 1099px) {
  .user-chip { top: 8px; right: 10px; padding: 5px 10px; font-size: 11.5px; }
}
@media print { .user-chip, .topbar { display: none !important; } }

/* K-wave: two-column form desk (vouchers page space saver) */
.duo {
  display: grid; grid-template-columns: 1fr 1fr; gap: 18px;
}
.duo > div { min-width: 0; }
.duo h3 {
  font-size: 12px; font-weight: 600; text-transform: uppercase;
  letter-spacing: .07em; color: rgba(234, 244, 247, .55); margin: 0 0 10px;
}
.duo label { display: block !important; margin: 0 0 8px !important; }
.duo input, .duo select { width: 100%; box-sizing: border-box; }
@media (max-width: 860px) { .duo { grid-template-columns: 1fr; } }

/* K-wave: guided stepper — Dispatch (F4) progressive disclosure.
   A .panel.step shows only a slim header until it's the active step;
   completed steps collapse to a one-line summary + Edit, future steps dim. */
.step { padding: 0; overflow: hidden; }
.step .step-head { display: flex; align-items: center; gap: 12px; padding: 14px 22px; min-width: 0; }
.step .step-num {
  flex: 0 0 auto; width: 26px; height: 26px; border-radius: 999px;
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-weight: 700; font-size: 12.5px;
  background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .14);
  color: rgba(234, 244, 247, .8);
}
.step.is-active .step-num { background: var(--accent-2); border-color: var(--accent-2); color: #06222B; }
.step.is-done .step-num { background: rgba(61, 220, 151, .14); border-color: rgba(61, 220, 151, .5); color: var(--good); }
.step .step-title {
  min-width: 0; font-family: var(--font-display); font-weight: 600; font-size: 13px;
  text-transform: uppercase; letter-spacing: .08em; color: rgba(234, 244, 247, .85);
}
.step .step-summary {
  display: none; margin-left: 10px;
  font-family: var(--font-body); font-size: 13px; font-weight: 500;
  text-transform: none; letter-spacing: 0; color: rgba(214, 230, 236, .72);
}
.step.is-done .step-summary { display: inline; }
.step .step-edit { display: none; margin-left: auto; padding: 5px 14px; font-size: 12px; border-radius: 999px; }
.step.is-done .step-edit { display: inline-flex; }
.step.is-done .step-head { cursor: pointer; }
.step.is-done .step-head:hover .step-title { color: var(--accent-2); }
.step .step-body { display: none; padding: 2px 22px 20px; overflow-x: auto; }
.step.is-active .step-body { display: block; }
.step.is-active { border-color: rgba(47, 193, 211, .35); }
.step.is-locked { opacity: .45; pointer-events: none; }
@media (max-width: 760px) {
  .step .step-head { padding: 12px 14px; }
  .step .step-body { padding: 2px 14px 16px; }
}

/* K-wave: quiet disclosure (Customise message, Audit trail) */
.disclosure > summary {
  display: inline-flex; align-items: center; gap: 7px;
  cursor: pointer; list-style: none;
  font-weight: 600; font-size: 13px; color: var(--link);
}
.disclosure > summary::-webkit-details-marker { display: none; }
.disclosure > summary::before { content: "▸"; font-size: 11px; transition: transform .15s ease; }
.disclosure[open] > summary::before { transform: rotate(90deg); }

/* (legacy component styles relocated above the modern layers — end of file is
   reserved for the highest-priority design layers from here on) */

/* (badges/buttons/misc legacy styles relocated to the base layer above —
   nothing may be appended below the design layers without a review) */

/* ============================================================
   M-wave — MOBILE HARDENING (owner: "super mobile friendly").
   Audited against a 380px viewport. Two tiers: ≤860px (matches
   the existing .duo breakpoint) and a tighter ≤480px set.
   This is the new top design layer — append future layers BELOW.
   CASCADE NOTE: page <style> blocks (payout.html, calendar.html)
   load AFTER this file, so rules that must beat them carry extra
   specificity; !important appears ONLY where a TS inline style
   (style="width:…") is the opponent.
   ============================================================ */

/* §1 Containment: the page itself never scrolls sideways — wide
   tables scroll inside their .panel / .step-body (J-wave) instead.
   `clip` (not hidden) so no scroll container is created and the
   sticky topbar/th keep working. */
html { overflow-x: clip; }
body { overflow-x: clip; }
.panel, .step .step-body { -webkit-overflow-scrolling: touch; }

/* §1b Blanket guard: TS inline widths (420/280/220/200/170px on
   inputs & selects) can never out-grow their card. */
.panel input, .panel select, .panel textarea,
.step-body input, .step-body select, .step-body textarea {
  max-width: 100%;
}

@media (max-width: 860px) {
  /* §1c Sticky first column where it pays: day-detail Time column,
     payout schedule/summary Pilot column. Solid bg so rows don't
     ghost through while the rest of the table scrolls under it. */
  #day-detail table th:first-child,
  #day-detail table td:first-child,
  #results table th:first-child,
  #results table td:first-child {
    position: sticky; left: 0; z-index: 2;
    background: #0E1D29;
  }
  #day-detail table th:first-child,
  #results table th:first-child { z-index: 3; } /* above the sticky-top th row */

  /* §2 .step pattern: head wraps cleanly — number + title stack,
     summary drops to its own line, Edit pill stays tappable. */
  .step .step-head { flex-wrap: wrap; row-gap: 4px; padding: 12px 14px; }
  .step .step-title { flex: 1 1 0; min-width: 0; }
  .step.is-done .step-summary {
    display: block; margin-left: 0; margin-top: 2px;
    white-space: normal; overflow-wrap: anywhere;
  }
  .step .step-edit { flex: 0 0 auto; min-height: 36px; padding: 6px 16px; }
  .step .step-body { padding: 2px 14px 16px; }

  /* §5 Payout actions row: page <style> re-asserts margin-left:auto
     after the J-wave fix — out-specify it (.controls .actions) so the
     export buttons wrap full-width instead of overflowing. */
  .controls .actions { margin-left: 0; width: 100%; flex-wrap: wrap; }
  .controls .actions button { flex: 1 1 auto; }
  .controls > div { min-width: 0; }
  .controls select { max-width: 100%; }
}

/* ---------- ≤480px: phone-tight set (380px audit target) ---------- */
@media (max-width: 480px) {
  main { padding: 12px 10px 40px; }
  .panel { padding: 14px; }
  h1 { font-size: 17px; }

  /* §3 Payout: adjustments editor lines stack to a column, inputs
     full width. Page CSS sets .adj-line input.adj-amount{width:110px}
     at (0,2,1) — td.adjust-editor prefix out-specifies it. */
  td.adjust-editor .adj-line { flex-direction: column; align-items: stretch; }
  td.adjust-editor .adj-line input.adj-label,
  td.adjust-editor .adj-line input.adj-amount { width: 100%; min-width: 0; }
  td.adjust-editor .adj-line button { align-self: flex-end; }

  /* §3 Rates disclosure: fields stack, inputs full width
     (beats .controls .rate input{width:90px} from payout.html). */
  .controls .rates-fields { flex-direction: column; gap: 10px; }
  .controls .rates-fields .rate input { width: 100%; }
  .controls .rates-box summary { overflow-wrap: anywhere; }

  /* §4 Calendar month grid at 380px: ~46px cells stay legible.
     .panel prefix beats calendar.html's own 760px block. */
  .panel .cal-grid { gap: 3px; }
  .panel .cal-cell { min-height: 54px; padding: 4px 3px; border-radius: 7px; }
  .panel .cal-cell .dnum { font-size: 11px; }
  .panel .cal-ev { font-size: 9px; padding: 1px 3px; border-radius: 4px; }
  .panel .cal-more {
    font-size: 9px; white-space: nowrap;
    overflow: hidden; text-overflow: ellipsis; /* flown-line stays one line */
  }
  .panel .cal-toolbar { gap: 8px; }
  .panel .cal-toolbar button { padding: 8px 12px; }

  /* §4b Day-detail inline editors go full width. !important is
     required ONLY here: the reassign select and cancel-reason input
     carry TS inline min-widths (160px / 220px). */
  #day-detail td select { width: 100% !important; min-width: 0 !important; }
  #day-detail .btn-row input { min-width: 0 !important; }

  /* §5 Button rows never overflow; stretch to share the row. */
  .btn-row { gap: 8px; }
  .btn-row button { flex: 1 1 auto; }

  /* §6 Message-log one-liners: the booking ref takes its own line
     (TS inline min-width:118px released), badges flow below it and
     the auto-margin timestamp wraps instead of forcing overflow. */
  #audit strong { min-width: 0 !important; flex-basis: 100%; }
  #audit > div > div { row-gap: 4px; }
  #send-results strong { overflow-wrap: anywhere; }
}