/* ==========================================================================
   TWENTY 1 MANAGEMENT SYSTEM - v2.0
   Dark theme using brand colors:
   - Black:   #0B0C0C
   - Red:     #8A1915
   - Cream:   #F6E8D8
   ========================================================================== */

* { margin: 0; padding: 0; box-sizing: border-box; }

:root {
  /* BOTTOM NAV HEIGHT — single source of truth (V24.5).
     Twelve dock/padding rules used to hard-code "60px + safe-area", so the bar
     could not be resized without them drifting out of step. Change it here.

     --nav-safe trims the iOS home-indicator inset rather than taking all of it:
     the full 34pt left a dead band under the labels. Subtracting 12pt reclaims
     that space while keeping the labels clear of both the home indicator and
     the curved bottom corners; the 10px floor covers devices with no inset. */
  --nav-safe: max(10px, calc(env(safe-area-inset-bottom, 0px) - 12px));
  --nav-h: calc(52px + var(--nav-safe));

  /* Brand palette */
  --brand-black: #0B0C0C;
  --brand-red: #8A1915;
  --brand-red-hover: #A21E18;
  --brand-red-bright: #C43A34;   /* interactive accents on dark */
  --brand-cream: #F6E8D8;

  /* Gold / brass accent — premium highlights, use sparingly */
  --gold: #C9A961;
  --gold-bright: #E0C283;
  --gold-dim: rgba(201,169,97,0.14);
  --gold-border: rgba(201,169,97,0.35);

  /* Typography */
  --font-display: 'Space Grotesk', 'Inter', -apple-system, sans-serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  /* Surfaces */
  --bg: #0B0C0C;
  --bg-elevated: #15171A;
  --bg-elevated-2: #1D2024;
  --bg-hover: #22262B;

  /* Borders */
  --border: #2A2E34;
  --border-strong: #3A3F47;

  /* Text */
  --text: #F6E8D8;
  --text-muted: #B3A899;
  --text-subtle: #847C70;

  /* Status colors (tuned for dark bg) */
  --success: #4ADE80;
  --warning: #FBBF24;
  --danger:  #EF4444;
  --info:    #60A5FA;

  /* Shadows */
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.4);
  --shadow:    0 4px 12px rgba(0,0,0,0.5);
  --shadow-lg: 0 12px 32px rgba(0,0,0,0.6);
  --shadow-lift: 0 8px 24px rgba(0,0,0,0.45), 0 2px 6px rgba(0,0,0,0.35);

  /* Focus ring */
  --ring: 0 0 0 3px rgba(196,58,52,0.35);

  /* Misc */
  --radius: 8px;
  --radius-lg: 12px;
  --transition: 160ms ease;
}

html, body {
  height: 100%;
}

/* Stop iOS Safari text autosizing — it inflates fonts in wide/scrollable
   tables based on content amount, making sizes look random (e.g. stock
   category titles growing when more categories are selected). */
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

/* NO ZOOM ANYWHERE (Filip, 2026-08-02). `manipulation` removes DOUBLE-TAP zoom
   and the legacy 300ms tap delay while leaving normal panning and fast repeated
   taps alone — which matters, because the till's quantity steppers are tapped
   twice in quick succession all the time. Pinch is blocked separately in
   auth.js (Safari gesture events); the viewport meta covers Android.
   ⚠ This reverses trap #11's advice on purpose — see auth.js preventAllZoom. */
html, body { touch-action: manipulation; }

body {
  font-family: var(--font-body);
  color: var(--text);
  background: var(--bg);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a { color: inherit; }

h1, h2, h3, .page-header h1, .db-greeting, .db-card-title,
.login-header p, .pipeline-column h3, .tr-module-title, .tr-progress-count {
  font-family: var(--font-display);
}

/* Global focus visibility — keyboard users get a clear ring everywhere */
:focus-visible {
  outline: none;
  box-shadow: var(--ring);
  border-radius: 4px;
}
input:focus-visible, select:focus-visible, textarea:focus-visible { box-shadow: none; }

/* ==========================================================================
   LOGIN PAGE
   ========================================================================== */
.login-page {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  background:
    radial-gradient(circle at 20% 20%, rgba(138,25,21,0.25), transparent 50%),
    radial-gradient(circle at 80% 80%, rgba(138,25,21,0.15), transparent 50%),
    var(--brand-black);
  padding: 20px;
}

.login-container {
  width: 100%;
  max-width: 420px;
}

.login-card {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}

.login-header {
  background: var(--brand-black);
  padding: 40px 30px 30px;
  text-align: center;
  border-bottom: 1px solid var(--border);
}

.login-header .logo {
  max-width: 180px;
  height: auto;
  margin: 0 auto 8px;
  display: block;
}

.login-header h1 {
  font-size: 24px;
  color: var(--text);
  font-weight: 600;
  letter-spacing: 0.5px;
}

.login-header p {
  color: var(--text-muted);
  font-size: 13px;
  margin-top: 4px;
}

.login-form {
  padding: 30px;
}

.login-footer {
  background: var(--bg-elevated-2);
  padding: 14px;
  text-align: center;
  font-size: 12px;
  color: var(--text-subtle);
  border-top: 1px solid var(--border);
}

/* ==========================================================================
   FORMS
   ========================================================================== */
.form-group { margin-bottom: 18px; }

.form-group label {
  display: block;
  margin-bottom: 6px;
  font-weight: 500;
  color: var(--text-muted);
  font-size: 13px;
}

.form-group input,
.form-group select,
.form-group textarea {
  width: 100%;
  padding: 10px 12px;
  background: var(--bg-elevated-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-size: 14px;
  color: var(--text);
  transition: border-color var(--transition), box-shadow var(--transition);
  font-family: inherit;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  outline: none;
  border-color: var(--brand-red);
  box-shadow: 0 0 0 3px rgba(138,25,21,0.2);
}

.form-group input::placeholder,
.form-group textarea::placeholder {
  color: var(--text-subtle);
}

.form-group textarea { resize: vertical; min-height: 70px; }

/* Consistent control heights — selects/date inputs must match text inputs.
   42px is THE control height app-wide; do not introduce new heights. */
.form-group input:not([type="checkbox"]):not([type="radio"]),
.form-group select { height: 42px; }
.fs-row input, .fs-row select { height: 42px; font-size: 14px; }

/* iOS gives date/time pickers intrinsic sizing — flatten so they match text inputs */
input[type="date"], input[type="time"], input[type="datetime-local"] {
  -webkit-appearance: none;
  appearance: none;
  min-height: 42px;
}

.form-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 14px;
  margin-bottom: 14px;
}

/* ==========================================================================
   BUTTONS
   ========================================================================== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px 18px;
  border: 1px solid transparent;
  border-radius: var(--radius);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: background var(--transition), border-color var(--transition), transform var(--transition);
  text-decoration: none;
  text-align: center;
  font-family: inherit;
}

.btn-primary {
  background: var(--brand-red);
  color: var(--brand-cream);
  border-color: var(--brand-red);
}
.btn-primary:hover {
  background: var(--brand-red-hover);
  border-color: var(--brand-red-hover);
}

.btn-secondary {
  background: var(--bg-elevated-2);
  color: var(--text);
  border-color: var(--border-strong);
}
.btn-secondary:hover { background: var(--bg-hover); }

.btn-success { background: var(--success); color: var(--brand-black); }

/* Destructive actions are QUIET by default. --danger (#EF4444) is brighter AND
   more saturated than the brand primary (#8A1915), so a filled Delete outshouted
   the safe Open sitting next to it on every list row — the alert colour was
   ranking the destructive action above the primary one. Carrying it as text on a
   hairline keeps "this one is dangerous" legible without that inversion.
   Where a loud fill IS right — a final confirm, or a paired terminal decision —
   opt in with .btn-danger-solid rather than reaching back for the raw colour. */
.btn-danger {
  background: transparent;
  color: var(--danger);
  border-color: var(--danger);
}
.btn-danger:hover { background: rgba(239, 68, 68, 0.12); }

.btn-danger-solid {
  background: var(--danger);
  color: var(--text);
  border-color: var(--danger);
}
.btn-danger-solid:hover { background: #DC2626; border-color: #DC2626; }

.btn-small { padding: 5px 10px; font-size: 12px; }
.btn-block { width: 100%; }
.btn:disabled { opacity: 0.55; cursor: not-allowed; }
.btn:active { transform: translateY(1px); }

/* ==========================================================================
   MESSAGES
   ========================================================================== */
.error-message,
.success-message {
  padding: 12px 14px;
  border-radius: var(--radius);
  margin-bottom: 14px;
  font-size: 14px;
  border: 1px solid;
}

.error-message {
  background: rgba(239,68,68,0.12);
  border-color: rgba(239,68,68,0.4);
  color: #FCA5A5;
}

.success-message {
  background: rgba(74,222,128,0.12);
  border-color: rgba(74,222,128,0.4);
  color: #86EFAC;
}

/* ==========================================================================
   APP LAYOUT
   ========================================================================== */
.app-container {
  display: flex;
  min-height: 100vh;
  background: transparent;
}

.sidebar {
  width: calc(250px + env(safe-area-inset-left, 0px));
  padding-left: env(safe-area-inset-left, 0px);
  background: var(--bg-elevated);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  position: sticky;
  top: 0;
  height: 100vh;
}

.sidebar-header {
  padding: 24px 20px;
  border-bottom: 1px solid var(--border);
  text-align: center;
}

.sidebar-header .logo {
  max-width: 140px;
  height: auto;
  margin: 0 auto 6px;
  display: block;
}

.sidebar-header h2 {
  font-size: 18px;
  color: var(--text);
  font-weight: 600;
  letter-spacing: 0.4px;
}

.sidebar-header p {
  display: inline-block;
  font-size: 11.5px;
  color: var(--text-muted);
  margin-top: 8px;
  text-transform: capitalize;
  background: var(--bg-elevated-2);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 3px 12px;
  letter-spacing: 0.02em;
}

.nav-menu {
  padding: 16px 10px 0;
  list-style: none;
}

/* Role-gated nav items: only apply hiding once auth.js has decided which
   items the user is allowed to see. applyNavRoles() sets .nav-roles-ready
   on <html> and adds .nav-role-allowed to permitted items. If auth.js
   hasn't run yet (or a cached older version is in play), nothing hides —
   items paint normally instead of leaving admins with a blank nav. */
html.nav-roles-ready [data-roles]:not(.nav-role-allowed) { display: none; }

.nav-menu li { margin-bottom: 2px; }

/* Nav popup (sidebar extras shown in sidebar on desktop, popup on mobile) */
.nav-popup { padding: 0 10px 8px; }
.nav-popup-list { list-style: none; margin: 0; padding: 0; }
.nav-popup-list li { margin-bottom: 2px; }

/* Burgundy gradient divider between sections. Same visual as the desktop
   nav-menu → nav-popup divider (::before below). Hidden by the role-gate
   CSS above when data-roles doesn't match. */
.nav-section-divider {
  display: block;
  height: 2px;
  margin: 10px 6px;
  border: 0;
  border-radius: 1px;
  background: linear-gradient(to right, var(--brand-red) 0%, rgba(138,25,21,0.25) 65%, transparent 100%);
}

/* Desktop: burgundy gradient divider between nav-menu and nav-popup */
@media (min-width: 769px) and (min-height: 641px), (min-width: 769px) and (hover: hover) {
  .nav-popup::before {
    content: '';
    display: block;
    height: 2px;
    margin: 12px 6px;
    border-radius: 1px;
    background: linear-gradient(to right, var(--brand-red) 0%, rgba(138,25,21,0.25) 65%, transparent 100%);
  }
}

/* Mobile-topbar + its children hidden on desktop */
.mobile-topbar { display: none; }
.nav-logout-mobile { display: none; }
.topbar-title { display: none; }

/* Mobile primary-action bar (docked above bottom nav) — hidden on desktop */
.mobile-action-bar { display: none; }

/* Bottom-docked edit control (Cocktails + Allergens + Stock archive/editor
   + Training's manager New Module button). Fixed above the sidebar on
   desktop, above the bottom nav on mobile. Hidden by default (inherits
   .mobile-action-bar); .dock-active reveals the one that matches. */
.cocktails-edit-dock, .allergen-edit-dock,
.stock-archive-dock, .stock-editor-dock,
.training-new-dock, .clock-add-dock, .rp-dock {
  position: fixed;
  left: 260px; right: 20px;
  bottom: 20px;
  padding: 0;
  z-index: 900;
  max-width: none;
}
@media (max-width: 768px), (max-height: 640px) and (pointer: coarse) {
  .cocktails-edit-dock, .allergen-edit-dock,
  .stock-archive-dock, .stock-editor-dock,
  .training-new-dock, .clock-add-dock, .rp-dock {
    left: 12px; right: 12px;
    bottom: var(--nav-h);
  }
}
/* V16.16: the Logs "+ Log …" dock was never in the desktop-visible list,
   so on desktop it stayed display:none — no add button on any Logs tab. */
.rp-dock:not(.dock-active) { display: none !important; }
.rp-dock.dock-active { display: block; }
.rp-dock .btn { min-height: 48px; font-size: 15px; font-weight: 600; }
.training-new-dock:not(.dock-active) { display: none !important; }
.training-new-dock.dock-active { display: block; }
.training-new-dock .btn { min-height: 48px; font-size: 15px; font-weight: 600; }
/* Reveal rules — only the dock with .dock-active shows. Explicit
   display:none !important beats the mobile .mobile-action-bar
   { display: block } rule so the wrong dock never leaks through. */
.cocktails-edit-dock:not(.dock-active),
.allergen-edit-dock:not(.dock-active),
.stock-archive-dock:not(.dock-active),
.stock-editor-dock:not(.dock-active),
.shiftlog-archive-dock:not(.dock-active),
.clock-add-dock:not(.dock-active) { display: none !important; }
.clock-add-dock.dock-active { display: block; }
.clock-add-dock .btn { min-height: 48px; font-size: 15px; font-weight: 600; }
.shiftlog-archive-dock.dock-active { display: block; }

/* V16 clock dock: week nav (left, flex) + icon-only "+" (right), CRM-style.
   Higher-specificity selectors so they beat the generic
   .mobile-action-bar .btn { width:100% } rule on mobile. */
.mobile-action-bar.clock-dock,
.mobile-action-bar.clock-dock.dock-active {
  display: flex; align-items: center; gap: 10px;
}
.mobile-action-bar.clock-dock .clock-week-nav {
  flex: 1; min-width: 0;
  display: flex; align-items: center; justify-content: center; gap: 6px;
  pointer-events: all;
  background: var(--bg-elevated); border: 1px solid var(--border);
  border-radius: 999px; padding: 5px 8px; min-height: 56px;
  box-shadow: var(--shadow-lg);
  overflow-x: auto;
}
.mobile-action-bar.clock-dock .clock-week-nav .btn {
  /* 44px, not 36. This rule is (0,4,0) and beat the global .btn-tiny floor, so
     the week-nav arrows stayed the smallest controls on the page. The pill that
     holds them grows to match — see min-height above. */
  width: auto; min-width: 0; min-height: 44px; height: 44px;
  font-size: 13px; box-shadow: none; white-space: nowrap;
}
.mobile-action-bar.clock-dock #clockWeekLabel {
  font-size: 12.5px; color: var(--text); font-weight: 600;
  white-space: nowrap; padding: 0 4px; font-variant-numeric: tabular-nums;
}
.mobile-action-bar.clock-dock .clock-dock-add {
  flex: 0 0 auto; width: 48px; min-width: 48px; height: 48px; padding: 0;
  border-radius: 999px; font-size: 24px; line-height: 1; font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center;
  pointer-events: all;
}
/* Desktop-only button: hide on the same mobile media gate as the dock. */
@media (max-width: 768px), (max-height: 640px) and (pointer: coarse) {
  .shiftlog-archive-desk { display: none !important; }
}
.stock-editor-dock .stock-back-btn { flex: 0 0 56px; padding: 0; }
.stock-editor-dock .stock-save-btn { flex: 1; font-weight: 600; }
.cocktails-edit-dock.dock-active,
.allergen-edit-dock.dock-active { display: block; }
.stock-archive-dock.dock-active { display: flex; gap: 8px; align-items: stretch; }
.stock-editor-dock.dock-active { display: flex; gap: 6px; align-items: stretch; }
.stock-archive-dock .btn { min-height: 44px; height: 44px; }
.stock-par-btn { flex: 0 0 48px; padding: 0 !important; display: inline-flex; align-items: center; justify-content: center; }
.stock-par-btn svg { width: 20px; height: 20px; }
.stock-new-btn { flex: 1; font-weight: 600; }

/* ============================================================
   PAR SETTINGS modal (V15.22) — dark theme, roomier, reorderable
   ============================================================ */
.par-modal-body {
  padding: 4px 4px 6px;
  background: var(--bg-elevated);
}
.par-add-panel {
  background: var(--bg-elevated-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 14px 16px;
  margin-bottom: 18px;
}
.par-add-row {
  display: flex; align-items: flex-end; gap: 8px; flex-wrap: wrap;
}
.par-add-field { display: flex; flex-direction: column; gap: 6px; flex: 1 1 160px; min-width: 0; }
.par-add-cat { flex: 1 1 140px; }
.par-add-field label {
  font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--text-subtle); font-weight: 600;
}
.par-add-field input {
  height: 44px; padding: 0 12px;
  font-size: 14.5px; font-family: inherit;
  background: var(--bg-elevated); color: var(--text);
  border: 1px solid var(--border); border-radius: var(--radius);
}
.par-add-field input:focus {
  outline: none; border-color: var(--brand-red);
  box-shadow: 0 0 0 3px rgba(138,25,21,0.14);
}
.par-add-field input::placeholder { color: var(--text-subtle); }
.par-add-btn { flex: 0 0 auto; height: 44px; padding: 0 22px; }

.par-table-wrap {
  border: 1px solid var(--border); border-radius: var(--radius-lg);
  overflow: hidden;
}
.par-table {
  width: 100%; border-collapse: collapse;
  font-size: 14px; color: var(--text); background: var(--bg-elevated-2);
}
.par-table th {
  font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--text-subtle); font-weight: 600;
  padding: 10px 12px; text-align: left;
  background: var(--bg-elevated); border-bottom: 1px solid var(--border);
}
.par-table td { padding: 8px 12px; border-bottom: 1px solid var(--border); vertical-align: middle; }
.par-table tr:last-child td { border-bottom: none; }
.par-col-order { width: 56px; text-align: center; padding-left: 10px !important; padding-right: 6px !important; }
.par-col-par   { width: 100px; text-align: center; }
.par-col-del   { width: 44px; text-align: center; padding-right: 10px !important; }
.par-table th.par-col-par { text-align: center; }
.par-cat-row td {
  background: var(--brand-red); color: var(--brand-cream);
  font-family: var(--font-display); font-weight: 600; font-size: 11.5px;
  letter-spacing: 0.16em; text-transform: uppercase;
  padding: 8px 14px !important;
}
.par-input {
  width: 100%; height: 40px;
  padding: 0 12px; font-size: 14px; font-family: inherit;
  background: var(--bg-elevated); color: var(--text);
  border: 1px solid var(--border); border-radius: 6px;
}
.par-input:focus {
  outline: none; border-color: var(--brand-red);
  box-shadow: 0 0 0 2px rgba(138,25,21,0.14);
}
.par-input-name { text-align: left; }
.par-input-num  { text-align: center; font-variant-numeric: tabular-nums; font-size: 12.5px; padding: 0 6px; }

/* Category input + chevron overlay + fallback picker */
.par-cat-wrap { position: relative; }
.par-cat-wrap input { padding-right: 34px; width: 100%; }
.par-cat-chevron {
  position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  width: 26px; height: 32px; padding: 0;
  background: transparent; border: none;
  color: var(--text-muted); font-size: 14px; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
}
.par-cat-chevron:hover { color: var(--brand-cream); }
.par-cat-picker {
  position: absolute; left: 0; right: 0; top: calc(100% + 4px);
  background: var(--bg-elevated); border: 1px solid var(--border-strong);
  border-radius: var(--radius); box-shadow: var(--shadow-lg);
  z-index: 950; max-height: 220px; overflow-y: auto;
  padding: 4px;
}
.par-cat-opt {
  display: block; width: 100%; text-align: left;
  padding: 8px 10px; font-size: 13px; color: var(--text);
  background: none; border: none; cursor: pointer; font-family: inherit;
  border-radius: 6px;
}
.par-cat-opt:hover { background: var(--bg-hover); color: var(--brand-cream); }
.par-cat-empty { padding: 10px; font-size: 12px; color: var(--text-muted); }

/* "+ Add to [category]" row at the bottom of each category group */
.par-cat-add-row td {
  padding: 6px 12px !important;
  background: var(--bg-elevated);
  border-top: 1px dashed var(--border);
}
.par-cat-add-btn {
  background: transparent; border: 1px dashed var(--border-strong);
  color: var(--text-muted); font-family: inherit; font-size: 12px;
  padding: 6px 12px; border-radius: 6px; cursor: pointer;
  letter-spacing: 0.02em;
  transition: color var(--transition), border-color var(--transition), background var(--transition);
}
.par-cat-add-btn:hover {
  color: var(--brand-cream); border-color: var(--brand-red);
  background: rgba(138,25,21,0.10);
}

.par-order-btns { display: flex; flex-direction: column; gap: 2px; align-items: center; }
.par-order-btn {
  width: 26px; height: 20px; padding: 0;
  background: var(--bg-elevated); color: var(--text-muted);
  border: 1px solid var(--border); border-radius: 4px;
  cursor: pointer; font-size: 10px; line-height: 1;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background var(--transition), color var(--transition), border-color var(--transition);
}
.par-order-btn:hover:not(:disabled) { background: var(--bg-hover); color: var(--brand-cream); border-color: var(--brand-red); }
.par-order-btn:disabled { opacity: 0.25; cursor: not-allowed; }

.par-del-btn {
  width: 30px; height: 30px; border-radius: 6px;
  background: transparent; color: var(--danger);
  border: 1px solid transparent;
  cursor: pointer; font-size: 14px;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background var(--transition), border-color var(--transition);
}
.par-del-btn:hover { background: rgba(239,68,68,0.12); border-color: rgba(239,68,68,0.35); }

@media (max-width: 640px) {
  .par-add-row { flex-direction: column; align-items: stretch; }
  .par-add-btn { width: 100%; }
  .par-col-par { width: 78px; }
  .par-table th, .par-table td { padding: 8px 8px; font-size: 13px; }
  .par-col-order { width: 44px; padding-left: 6px !important; }
  .par-order-btn { width: 22px; }
}

/* Inline toolbar above the stock editor (Export ▾ only — Filters moved
   back into the docked bar per Filip). Kept as a lightweight row. */
.stock-editor-toolbar {
  display: flex; align-items: center; gap: 8px;
  margin-bottom: 10px;
  min-height: 32px;
}

/* Editor dock Filters button: drop-up popup with chips + All/None */
.stock-filter-wrap { position: relative; flex: 1; }
.stock-filters-btn { width: 100%; }
.stock-filters-btn.is-active {
  background: var(--bg-hover); color: var(--brand-cream);
}
/* Popup breaks out of the (narrow) Filters button wrap so category chips
   have room to wrap. Uses `position: fixed` anchored above the dock so the
   width comes from the viewport, not from the tiny flex:1 button column. */
.stock-filter-popup {
  position: fixed;
  bottom: calc(var(--nav-h) + 60px);
  left: 12px; right: 12px;
  display: none;
  background: var(--bg-elevated);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: 12px 14px;
  z-index: 960;
  max-height: min(60vh, 460px);
  overflow-y: auto;
  pointer-events: all;
}
/* Desktop: the archive/editor docks sit at bottom-right of main-content
   (left: 260px, right: 20px, bottom: 20px). Anchor the popup to sit just
   above the dock in that same slot. */
@media (min-width: 769px) and (min-height: 641px), (min-width: 769px) and (hover: hover) {
  .stock-filter-popup { left: 260px; right: 20px; bottom: 76px; }
}
.stock-filter-popup.open { display: block; }
.stock-filter-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; margin-bottom: 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border);
}
.stock-filter-title {
  font-family: var(--font-display);
  font-size: 11px; font-weight: 600;
  color: var(--brand-cream);
  text-transform: uppercase; letter-spacing: 0.12em;
}
.stock-filter-quick { display: flex; gap: 6px; }
.stock-filter-popup .cat-chips { margin: 0; }
.stock-filter-popup .cat-chip-all {
  border: 1px solid var(--brand-red);
  color: var(--brand-red-bright);
  background: transparent;
  font-weight: 600; letter-spacing: 0.04em;
}
.stock-filter-popup .cat-chip-all:hover {
  background: rgba(138,25,21,0.12);
  color: var(--brand-cream);
}
.stock-editor-dock .btn { min-height: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; }
/* Par modal footer: New Category on the left, Close on the right. */
.par-modal-footer { display: flex; justify-content: space-between; align-items: center; gap: 10px; }

/* ==========================================================================
   DOCUMENTS (V16.1) — branded checklist/log library + editor
   ========================================================================== */
.docs-intro { color: var(--text-muted); font-size: 13.5px; margin-bottom: 18px; }
.docs-cat-label {
  font-family: var(--font-display); font-size: 12px; font-weight: 600;
  color: var(--gold); text-transform: uppercase; letter-spacing: 0.12em;
  margin: 18px 0 10px;
}
.docs-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 10px; }
.doc-card {
  display: flex; align-items: center; gap: 12px;
  background: var(--bg-elevated-2); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: 13px 15px; cursor: pointer;
  transition: border-color var(--transition), transform var(--transition);
}
.doc-card:hover { border-color: var(--brand-red); transform: translateY(-1px); }
.doc-card-icon { flex: 0 0 auto; width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center;
  background: var(--bg-elevated); border: 1px solid var(--border); border-radius: 9px; color: var(--gold); }
.doc-card-icon svg { width: 17px; height: 17px; }
.doc-card-body { flex: 1; min-width: 0; }
.doc-card-title { font-family: var(--font-display); font-weight: 600; font-size: 14px; color: var(--brand-cream);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.doc-card-sub { font-size: 11px; color: var(--text-muted); margin-top: 2px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.doc-card-type {
  flex: 0 0 auto; font-size: 9.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em;
  padding: 3px 8px; border-radius: 999px; background: var(--bg-elevated); color: var(--text-muted);
  border: 1px solid var(--border);
}
/* Editor */
.docs-ed-meta { background: var(--bg-elevated); border: 1px solid var(--border); border-radius: var(--radius-lg);
  padding: 14px 16px; margin-bottom: 14px; }
.docs-section {
  background: var(--bg-elevated); border: 1px solid var(--border); border-radius: var(--radius-lg);
  padding: 12px 14px; margin-bottom: 12px;
}
.docs-section-head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.docs-sec-title {
  flex: 1; min-width: 0; font-family: var(--font-display); font-weight: 600; font-size: 14px;
  text-transform: uppercase; letter-spacing: 0.06em;
  background: var(--bg-elevated-2); border: 1px solid var(--border); border-radius: 8px;
  color: var(--brand-cream); padding: 9px 12px; min-height: 42px;
}
.docs-sec-note {
  width: 100%; font-size: 12px; font-style: italic;
  background: transparent; border: 1px dashed var(--border); border-radius: 8px;
  color: var(--text-muted); padding: 7px 12px; margin-bottom: 10px;
}
.docs-item-row { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.docs-item-input {
  flex: 1; min-width: 0; font-size: 13.5px;
  background: var(--bg-elevated-2); border: 1px solid var(--border); border-radius: 8px;
  color: var(--text); padding: 9px 12px; min-height: 42px;
}
.docs-section .al-cat-add-btn { margin-top: 4px; }
/* Docks */
.docs-dock { position: fixed; left: 260px; right: 20px; bottom: 20px; z-index: 900; }
.docs-dock:not(.dock-active) { display: none !important; }
.docs-dock.dock-active { display: flex; gap: 10px; align-items: stretch; }
.docs-dock .btn { min-height: 48px; pointer-events: all; }
.docs-back-btn { flex: 0 0 auto; width: 52px; display: inline-flex; align-items: center; justify-content: center; }
.docs-list-dock.dock-active .btn { flex: 1; }
@media (max-width: 768px), (max-height: 640px) and (pointer: coarse) {
  .docs-dock { left: 12px; right: 12px; bottom: var(--nav-h); }
  body:has(.docs-dock) .main-content { padding-bottom: 110px; }
}

/* ==========================================================================
   RECRUITMENT (V16.1) — applicant mini-CRM in HR
   ========================================================================== */
.recruit-dock { position: fixed; left: 260px; right: 20px; bottom: 20px; z-index: 900; }
.recruit-dock:not(.dock-active) { display: none !important; }
.recruit-dock.dock-active { display: block; }
.recruit-dock .btn { min-height: 48px; pointer-events: all; }
@media (max-width: 768px), (max-height: 640px) and (pointer: coarse) {
  .recruit-dock { left: 12px; right: 12px; bottom: var(--nav-h); }
}
.cand-filters { display: flex; flex-wrap: wrap; gap: 6px; }
.cand-status {
  flex-shrink: 0; font-size: 9.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em;
  padding: 3px 8px; border-radius: 999px; border: 1px solid transparent;
}
.cand-status-applied { background: var(--bg-elevated); color: var(--text-muted); border-color: var(--border-strong); }
.cand-status-interviewed { background: rgba(96,165,250,0.13); color: #93C5FD; border-color: rgba(96,165,250,0.4); }
.cand-status-trial_scheduled { background: rgba(201,169,97,0.14); color: var(--gold-bright); border-color: rgba(201,169,97,0.45); }
.cand-status-trial_completed { background: rgba(167,139,250,0.13); color: #C4B5FD; border-color: rgba(167,139,250,0.4); }
.cand-status-hired { background: rgba(74,222,128,0.13); color: var(--success); border-color: rgba(74,222,128,0.4); }
.cand-status-rejected { background: rgba(239,68,68,0.10); color: #FCA5A5; border-color: rgba(239,68,68,0.35); }
.cand-meta { display: flex; flex-wrap: wrap; gap: 6px; }
.cand-chip {
  font-size: 11px; padding: 3px 9px; border-radius: 999px;
  background: var(--bg-elevated); color: var(--text); border: 1px solid var(--border);
  font-variant-numeric: tabular-nums;
}
.cand-chip-trial { border-color: rgba(201,169,97,0.5); color: var(--gold-bright); }
.cand-stars { color: var(--gold); letter-spacing: 1px; }
/* Trial strip — horizontal scroll of upcoming trial cards */
.trial-strip { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 4px; }
.trial-card {
  flex: 0 0 auto; display: flex; align-items: center; gap: 10px;
  background: var(--bg-elevated-2); border: 1px solid var(--border);
  border-radius: 12px; padding: 10px 14px; cursor: pointer; min-width: 190px;
  transition: border-color var(--transition);
}
.trial-card:hover { border-color: var(--gold); }
.trial-card-date {
  display: flex; flex-direction: column; align-items: center; line-height: 1.2;
  font-size: 10.5px; color: var(--text-muted); min-width: 40px;
  padding-right: 10px; border-right: 1px solid var(--border);
}
.trial-card-date b { font-family: var(--font-display); font-size: 13px; color: var(--gold-bright); }
.trial-card-name { font-weight: 600; font-size: 13px; color: var(--brand-cream); }
.trial-card-sub { font-size: 11px; color: var(--text-muted); }
/* Interview form */
.iv-section {
  font-family: var(--font-display); font-size: 12px; font-weight: 600;
  color: var(--gold); text-transform: uppercase; letter-spacing: 0.12em;
  margin: 18px 0 10px; padding-bottom: 6px; border-bottom: 1px solid var(--border);
}
.iv-q { margin-bottom: 14px; }
.iv-q-text { font-size: 13.5px; font-weight: 600; color: var(--brand-cream); margin-bottom: 2px; }
.iv-q-look { font-size: 11px; font-style: italic; color: var(--text-subtle); margin-bottom: 6px; }
.iv-q-row { display: flex; gap: 8px; align-items: stretch; }
.iv-q-notes {
  flex: 1; min-width: 0; background: var(--bg-elevated-2); border: 1px solid var(--border);
  border-radius: 8px; color: var(--text); padding: 9px 12px; font-size: 13px; min-height: 42px;
}
.iv-q-score { flex: 0 0 auto; display: flex; align-items: center; gap: 4px; color: var(--text-muted); font-size: 12px; }
.iv-q-scoreinput {
  width: 54px; text-align: center; background: var(--bg-elevated-2); border: 1px solid var(--border);
  border-radius: 8px; color: var(--brand-cream); font-weight: 700; padding: 9px 4px; min-height: 42px;
  font-variant-numeric: tabular-nums;
}
.iv-total-row {
  display: flex; justify-content: space-between; align-items: center;
  background: var(--bg-elevated); border: 1px solid var(--gold); border-radius: 10px;
  padding: 12px 16px; margin: 14px 0;
  font-size: 13px; color: var(--text-muted);
}
.iv-total-row b { font-family: var(--font-display); font-size: 19px; color: var(--gold-bright); font-variant-numeric: tabular-nums; }
.iv-trial-gate {
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  background: var(--bg-elevated); border: 1px solid var(--border); border-radius: 10px;
  padding: 10px 14px; margin-bottom: 12px;
}
.iv-trial-label { font-size: 13.5px; font-weight: 600; color: var(--brand-cream); }
.iv-conflict {
  font-size: 12.5px; color: #FDE68A; background: rgba(251,191,36,0.08);
  border-left: 3px solid var(--warning); border-radius: 0 8px 8px 0;
  padding: 9px 12px; margin-bottom: 10px;
}
/* Assessment stars */
.review-stars { display: flex; gap: 6px; }
.as-star {
  background: none; border: none; font-size: 30px; line-height: 1; cursor: pointer;
  color: var(--border-strong); padding: 2px; transition: color var(--transition), transform var(--transition);
}
.as-star.on { color: var(--gold); }
.as-star:hover { transform: scale(1.12); }

/* Clock error popup (V16.2) — persistent until dismissed */
.clock-error-content {
  max-width: 360px; text-align: center; padding: 28px 24px 22px;
  border-top: 3px solid var(--danger);
}
.clock-error-icon {
  width: 52px; height: 52px; margin: 0 auto 14px;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(239,68,68,0.12); border: 1px solid rgba(239,68,68,0.4);
  border-radius: 50%; color: #FCA5A5;
}
.clock-error-icon svg { width: 26px; height: 26px; }
.clock-error-content h2 {
  font-family: var(--font-display); font-size: 18px; font-weight: 700;
  color: var(--brand-cream); margin-bottom: 8px;
}
.clock-error-content p {
  font-size: 13.5px; line-height: 1.6; color: var(--text-muted); margin-bottom: 18px;
}
/* This popup must beat the dashboard dock + mobile nav stacking */
#clockErrorModal, #remoteNoteModal { z-index: 1200; }
/* Clock-out note popup (V16.3) */
.remote-note-content { border-top-color: var(--gold); text-align: left; }
.remote-note-content h2, .remote-note-content p { text-align: center; }
.remote-note-icon { background: rgba(201,169,97,0.12); border-color: rgba(201,169,97,0.4); color: var(--gold-bright); }
.remote-note-content textarea {
  width: 100%; background: var(--bg-elevated-2); border: 1px solid var(--border);
  border-radius: 10px; color: var(--text); font-family: inherit; font-size: 14px;
  padding: 10px 12px; margin-bottom: 14px; resize: vertical; min-height: 74px;
}
.remote-note-content textarea:focus { outline: none; border-color: var(--gold); }
.remote-note-btns { display: flex; gap: 10px; }
.remote-note-btns .btn { flex: 1; }
/* Error log (V16.4) — severity badges + card accents */
.err-sev {
  flex-shrink: 0; font-size: 10px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.05em; padding: 3px 9px; border-radius: 999px;
  border: 1px solid transparent;
}
.err-sev-low { background: var(--bg-elevated); color: var(--text-muted); border-color: var(--border-strong); }
.err-sev-medium { background: rgba(251,191,36,0.13); color: #FDE68A; border-color: rgba(251,191,36,0.4); }
.err-sev-high { background: rgba(251,146,60,0.15); color: #FDBA74; border-color: rgba(251,146,60,0.45); }
.err-sev-critical { background: var(--danger); color: #fff; border-color: var(--danger); }
.err-card { border-left: 3px solid var(--border-strong); }
/* V16.4.1 card layout: title left, severity + ✕ right, small meta line */
.err-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; margin-bottom: 4px; }
.err-title {
  font-family: var(--font-display); font-size: 14.5px; font-weight: 600;
  color: var(--brand-cream); min-width: 0; line-height: 1.35;
}
.err-head-right { display: inline-flex; align-items: center; gap: 8px; flex-shrink: 0; }
.err-meta { font-size: 11.5px; color: var(--text-subtle); margin-bottom: 8px; }
.err-sev-border-medium { border-left-color: var(--warning); }
.err-sev-border-high { border-left-color: #FB923C; }
.err-sev-border-critical { border-left-color: var(--danger); }

/* Cash-up history action icons + read-only view (V16.4.1) */
.cu-actions { white-space: nowrap; text-align: right; }
.cu-icon-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; padding: 0; margin-left: 4px;
  background: var(--bg-elevated); border: 1px solid var(--border);
  border-radius: 8px; color: var(--text-muted); cursor: pointer;
  transition: color var(--transition), border-color var(--transition);
}
.cu-icon-btn svg { width: 15px; height: 15px; }
.cu-icon-btn:hover { color: var(--brand-cream); border-color: var(--brand-red); }
.cu-icon-danger:hover { color: #FCA5A5; border-color: var(--danger); background: rgba(239,68,68,0.08); }
.cuv-rows { font-size: 13.5px; }
.cuv-row { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 6px 0; }
.cuv-row span { color: var(--text-muted); }
.cuv-row b { font-variant-numeric: tabular-nums; color: var(--brand-cream); }
.cuv-sep { border-top: 1px solid var(--border); margin: 8px 0; }
.cuv-notes { margin-top: 10px; padding: 10px 12px; background: var(--bg-elevated-2); border-radius: 8px;
  font-size: 12.5px; line-height: 1.55; color: var(--text); }
.cuv-notes span { display: block; font-size: 10px; text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--text-subtle); margin-bottom: 4px; }

/* Quick-deduction dock button + minute chips */
.mobile-action-bar.clock-dock .clock-dock-deduct {
  flex: 0 0 auto; width: auto; min-width: 0; height: 48px; padding: 0 16px;
  border-radius: 999px; font-size: 13.5px; white-space: nowrap; pointer-events: all;
}
.ded-quick { display: flex; gap: 6px; margin: -4px 0 14px; }

/* Week summary strip under the clock entries table */
.clock-week-summary {
  display: flex; gap: 10px; flex-wrap: wrap;
  margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--border);
}
.cws-item {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--bg-elevated); border: 1px solid var(--border);
  border-radius: 999px; padding: 8px 14px;
}
.cws-item span { font-size: 11px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.05em; }
.cws-item b { font-family: var(--font-display); font-size: 15px; color: var(--gold-bright); font-variant-numeric: tabular-nums; }

/* Note flag chip in Clock Manager */
.clock-flag-note {
  background: rgba(201,169,97,0.12); color: var(--gold-bright);
  border: 1px solid rgba(201,169,97,0.4); max-width: 260px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  display: inline-block; vertical-align: middle;
}
/* On phones the shared .modal rule goes full-screen — keep this one a card */
@media (max-width: 768px), (max-height: 640px) and (pointer: coarse) {
  /* V16.12: ALL small modals (anything without an .fs-wide form) present as
     centred cards on mobile — consistent with the clock error popup. Full
     -screen sheet treatment stays reserved for the big fs-wide forms. */
  .modal:not(:has(.fs-wide)) { align-items: center; padding: 24px; background: rgba(0,0,0,0.7); }
  .modal:not(:has(.fs-wide)) .modal-content {
    min-height: 0; border-radius: 16px; width: 100%; max-width: 440px;
    max-height: 86vh; overflow-y: auto;
  }
  #clockErrorModal .modal-content { max-width: 360px; }
}
.stock-back-btn { flex-shrink: 0; padding: 0 14px; width: 48px; }
.stock-editor-dock #filtersToggleBtn { flex: 1; padding: 0 14px; }
.stock-editor-dock #filtersToggleBtn.is-active { background: var(--bg-hover); color: var(--brand-cream); }
.stock-editor-dock .export-menu-wrap { flex: 0 0 auto; }
.stock-editor-dock .export-menu-wrap .btn { padding: 0 14px; }
.stock-save-btn { flex: 1; padding: 0 18px; }

.nav-link {
  position: relative;
  display: flex;
  align-items: center;
  padding: 11px 14px;
  color: var(--text-muted);
  text-decoration: none;
  border-radius: var(--radius);
  transition: background var(--transition), color var(--transition);
  font-size: 13.5px;
  font-weight: 500;
  letter-spacing: 0.01em;
}

.nav-link:hover {
  background: var(--bg-hover);
  color: var(--text);
}

.nav-link.active {
  background: rgba(138,25,21,0.16);
  color: var(--brand-cream);
}
.nav-link.active::before {
  content: '';
  position: absolute;
  left: 0; top: 8px; bottom: 8px;
  width: 3px;
  border-radius: 3px;
  background: var(--brand-red-bright);
  box-shadow: 0 0 8px rgba(196,58,52,0.5);
}
.nav-link.active .nav-icon { color: var(--brand-red-bright); }

.nav-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-right: 11px;
  width: 20px;
  color: var(--text-subtle);
  transition: color var(--transition);
}
.nav-icon svg { width: 18px; height: 18px; }
.nav-link:hover .nav-icon { color: var(--text-muted); }

.sidebar-footer {
  margin-top: auto;
  padding: 16px;
  border-top: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: stretch;
}

/* Announcements composer dock (manager+ only).
   Textarea stacks directly above the Pin/Post row so the whole compose
   surface sits thumb-reachable at the bottom of the screen. On desktop
   it floats to the right of the sidebar. */
.ann-compose-shell {
  display: none;
  position: fixed;
  left: 260px; right: 20px;
  bottom: 20px;
  z-index: 900;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: 12px;
}
.ann-compose-shell.is-open { display: block; }
@media (max-width: 768px), (max-height: 640px) and (pointer: coarse) {
  .ann-compose-shell {
    left: 8px; right: 8px;
    bottom: var(--nav-h);
    padding: 8px;
  }
}
.ann-compose-shell textarea {
  width: 100%; min-height: 68px;
  resize: vertical;
  font-family: inherit;
  font-size: 14px;
  background: var(--bg-elevated-2);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 10px 12px;
}
.ann-compose-shell textarea:focus {
  outline: none; border-color: var(--brand-red);
}
.ann-compose-actions {
  display: flex; gap: 8px; margin-top: 8px; align-items: stretch;
}
.ann-compose-actions .btn { min-height: 44px; }
.ann-pin-btn {
  flex: 1;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
}
.ann-pin-btn.is-pinned {
  background: rgba(201,169,97,0.16);
  color: var(--gold-bright);
  border-color: var(--gold-border);
  box-shadow: 0 0 0 1px rgba(201,169,97,0.35);
  font-weight: 600;
}
.ann-post-btn { flex: 1.6; }
/* Nudge the list so the fixed dock doesn't overlap the last card */
body.has-ann-compose #announceList { padding-bottom: 180px; }
@media (max-width: 768px), (max-height: 640px) and (pointer: coarse) {
  body.has-ann-compose #announceList { padding-bottom: 210px; }
}

/* Announcements board — replaces the old Logbook handover */
.ann-card {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-left: 3px solid var(--brand-red);
  border-radius: var(--radius-lg);
  padding: 12px 16px;
  margin-bottom: 10px;
}
.ann-card.ann-pinned { border-left-color: var(--gold-bright); background: linear-gradient(180deg, rgba(201,169,97,0.06), var(--bg-elevated)); }
.ann-card.ann-unread { box-shadow: 0 0 0 1px rgba(196,58,52,0.35); }
.ann-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 6px; }
.ann-tag { font-size: 10px; font-weight: 700; letter-spacing: 0.08em; padding: 2px 8px; border-radius: 4px; text-transform: uppercase; }
.ann-tag-pin { background: rgba(201,169,97,0.16); color: var(--gold-bright); border: 1px solid rgba(201,169,97,0.4); }
.ann-meta { font-size: 11.5px; color: var(--text-muted); }
.ann-actions { margin-left: auto; display: flex; gap: 6px; }
.ann-body { font-size: 13.5px; color: var(--text); line-height: 1.55; white-space: pre-wrap; word-wrap: break-word; }

/* HR page — card per staff member */
.hr-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(258px, 1fr));
  gap: 10px;
}
.hr-card {
  background: var(--bg-elevated-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 11px 13px;
  display: flex;
  flex-direction: column;
  gap: 9px;
}
.hr-card-head {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 8px;
}
.hr-card-idblock { min-width: 0; }
.hr-card-name {
  font-family: var(--font-display);
  font-weight: 600; font-size: 14.5px; color: var(--brand-cream);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.hr-card-sub { font-size: 11px; color: var(--text-muted); margin-top: 1px; }
.hr-card-badge {
  font-size: 9.5px; letter-spacing: 0.03em; text-transform: uppercase;
  padding: 2px 7px; border-radius: 999px; white-space: nowrap; flex-shrink: 0;
  border: 1px solid transparent;
}
.hr-card-badge-warn {
  background: rgba(196,58,52,0.14);
  color: var(--brand-red-bright);
  border-color: rgba(196,58,52,0.35);
}
.hr-card-badge-ok {
  background: rgba(74,222,128,0.12);
  color: var(--success);
  border-color: rgba(74,222,128,0.30);
}
.hr-card-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 6px 12px;
  font-size: 12px;
}
.hr-card-grid > div { display: flex; flex-direction: column; min-width: 0; }
.hr-card-grid span {
  font-size: 9.5px; color: var(--text-subtle); text-transform: uppercase;
  letter-spacing: 0.05em; margin-bottom: 1px;
}
.hr-card-grid strong {
  color: var(--text); font-weight: 500;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.hr-card-full { grid-column: 1 / -1; }
/* Compact footer: docs count on the left, Export on the right. */
.hr-card-foot {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding-top: 8px; border-top: 1px solid var(--border);
}
.hr-card-docs { font-size: 11px; color: var(--text-subtle); }
.hr-card { cursor: pointer; transition: border-color var(--transition); }
.hr-card:hover { border-color: var(--brand-red); }

/* Export dropdown inside the HR card */
.hr-export-wrap { position: relative; }
.hr-export-menu {
  position: absolute;
  right: 0; top: calc(100% + 4px);
  min-width: 160px;
  background: var(--bg-elevated);
  border: 1px solid var(--border-strong);
  border-radius: 8px;
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  z-index: 20;
  display: none;
}
.hr-export-menu.open { display: block; }
.hr-export-menu a {
  display: block;
  padding: 10px 14px;
  font-size: 13px;
  color: var(--text);
  text-decoration: none;
}
.hr-export-menu a:hover { background: var(--bg-hover); }

/* Dashboard HR-completion alert — shown at the very top of dashboard when
   the current user has missing required HR fields. */
.db-hr-alert {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 16px;
  background: linear-gradient(135deg, rgba(138,25,21,0.20), rgba(138,25,21,0.10));
  /* Hairline + LEFT-EDGE accent. This carried a full red ring, which is the
     treatment Filip rejected twice (gold ring, Home V25 and CRM V25.4) — the
     accent does the same job without boxing the card in colour. */
  border: 1px solid var(--t1-hairline, rgba(255,255,255,0.08));
  border-left: 4px solid var(--brand-red-bright);
  border-radius: var(--t1-r-card, 16px);
  margin-bottom: 18px;
}
.db-hr-alert > div { flex: 1; min-width: 0; }
.db-hr-alert strong {
  display: block;
  font-family: var(--font-display);
  font-size: 14.5px; font-weight: 600;
  color: var(--brand-cream);
  margin-bottom: 2px;
}
.db-hr-alert span {
  font-size: 12.5px; line-height: 1.5;
  color: var(--text-muted);
}
.db-hr-alert .btn { flex-shrink: 0; }
@media (max-width: 640px) {
  .db-hr-alert { flex-direction: column; align-items: stretch; }
  .db-hr-alert .btn { width: 100%; }
}

/* Username/role chip lives in the sidebar-footer but is hidden on desktop
   (Filip: redundant with the profile-based nav). Kept in the DOM because
   several pages fill #userInfo for other purposes. */
.sidebar-user-chip { display: none; }

.main-content {
  flex: 1;
  padding: 28px 32px 28px max(32px, env(safe-area-inset-right, 32px));
  overflow-y: auto;
  /* Transparent so the chevron field on the root element shows through on
     every module. This was var(--bg) — an opaque sheet over the whole scroll
     area, which is why the texture only ever appeared on the lock screen. */
  background: transparent;
}

.page-header {
  margin-bottom: 26px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
}

.page-header h1 {
  font-size: 26px;
  color: var(--text);
  font-weight: 600;
  letter-spacing: 0.3px;
}

.page-header h2 {
  font-size: 20px;
  color: var(--text);
  font-weight: 600;
}

.mt-20 { margin-top: 20px; }

/* ==========================================================================
   DASHBOARD CARDS
   ========================================================================== */
.dashboard-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 18px;
}

.dashboard-card {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 24px;
  transition: transform var(--transition), border-color var(--transition), box-shadow var(--transition);
}

.dashboard-card:hover {
  transform: translateY(-2px);
  border-color: var(--brand-red);
  box-shadow: var(--shadow);
}

.dashboard-card h3 {
  margin-bottom: 8px;
  color: var(--text);
  font-size: 17px;
  font-weight: 600;
}

.dashboard-card p {
  color: var(--text-muted);
  margin-bottom: 18px;
  font-size: 13px;
  line-height: 1.55;
}

/* ==========================================================================
   TABLES
   ========================================================================== */
.table-container {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  margin-bottom: 20px;
}

table {
  width: 100%;
  border-collapse: collapse;
  color: var(--text);
}

thead { background: var(--bg-elevated-2); }

th, td {
  padding: 12px 15px;
  text-align: left;
  border-bottom: 1px solid var(--border);
  font-size: 14px;
  vertical-align: middle;
}

th {
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  font-size: 12px;
  letter-spacing: 0.5px;
}

tbody tr {
  transition: background var(--transition);
}

tbody tr:hover { background: var(--bg-hover); }

.text-center { text-align: center; }

/* ==========================================================================
   STOCK TABS + EXPORT
   ========================================================================== */
.stock-tab-bar {
  display: flex;
  gap: 4px;
  margin-bottom: 12px;
}

.stock-tab {
  padding: 8px 20px;
  background: var(--bg-elevated);
  color: var(--text-muted);
  border: 1px solid var(--border);
  border-radius: 6px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 500;
  transition: background 0.15s, color 0.15s;
}

.stock-tab:hover { background: var(--bg-elevated-2); color: var(--text); }

.stock-tab.active {
  background: var(--brand-red);
  color: #fff;
  border-color: var(--brand-red);
}

.stock-export-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  padding: 10px 14px;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: 8px;
  margin-bottom: 14px;
}

.export-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
  margin-right: 4px;
}

/* ==========================================================================
   STOCK TABLE — V15.20 snapshot editor. Counts + Total share the same font
   colour/size so the row reads as one unit.
   ========================================================================== */
.stock-table .count-input,
.stock-table .par-input {
  width: 44px;
  padding: 3px 4px;
  text-align: center;
  background: var(--bg-elevated-2);
  color: var(--text-muted);
  border: 1px solid var(--border);
  border-radius: 5px;
  font-size: 12.5px;
  font-weight: 500;
  font-family: inherit;
  font-variant-numeric: tabular-nums;
}
.stock-count-th, .stock-total-th { width: 48px; text-align: center; font-size: 10.5px; letter-spacing: 0.06em; color: var(--text-subtle); }
.stock-total-th { width: 60px; }
.stock-total-cell {
  text-align: center;
  color: var(--text-muted);
  font-size: 12.5px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}
.stock-item-cell { font-size: 13px; color: var(--text); }

#parTab .stock-table .par-input { width: 70px; }

.stock-table th,
.stock-table td { padding: 6px 6px; }

.total-count { font-weight: 500; color: var(--text-muted); font-size: 12.5px; }

.needs-order-row { background: rgba(239,68,68,0.07); }

.order-flag {
  display: inline-block;
  background: var(--danger);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.5px;
  padding: 2px 6px;
  border-radius: 4px;
}

.order-ok {
  display: inline-block;
  color: var(--success);
  font-size: 11px;
  font-weight: 600;
}

.stock-table .count-input:focus,
.stock-table .par-input:focus {
  outline: none;
  border-color: var(--brand-red);
}

.category-header {
  background: var(--brand-red);
  color: var(--brand-cream);
  font-weight: 600;
  text-transform: uppercase;
  font-size: 12px;
  letter-spacing: 0.6px;
  padding: 10px 15px !important;
}

/* ==========================================================================
   COCKTAILS
   ========================================================================== */
.cocktail-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(380px, 1fr));
  gap: 20px;
}

.cocktail-card {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 22px;
  transition: border-color var(--transition);
}

.cocktail-card:hover { border-color: var(--brand-red); }

.cocktail-header {
  display: flex;
  justify-content: space-between;
  align-items: start;
  margin-bottom: 16px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--border);
}

.cocktail-header h3 {
  font-size: 20px;
  color: var(--brand-cream);
  font-weight: 600;
  letter-spacing: 0.4px;
}

.cocktail-header small {
  color: var(--text-subtle);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.cocktail-meta {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
  margin-bottom: 16px;
  font-size: 13px;
}

.cocktail-meta-item {
  background: var(--bg-elevated-2);
  padding: 10px;
  border-radius: 6px;
  border: 1px solid var(--border);
}

.cocktail-meta-item strong {
  display: block;
  color: var(--text-subtle);
  font-size: 10px;
  text-transform: uppercase;
  margin-bottom: 3px;
  letter-spacing: 0.6px;
  font-weight: 600;
}

.cocktail-meta-item span { color: var(--text); }

.cocktail-recipes {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
}

.recipe-section h4 {
  margin-bottom: 10px;
  color: var(--brand-red);
  font-size: 14px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.4px;
}

.ingredient-list { list-style: none; }

.ingredient-list li {
  padding: 7px 0;
  font-size: 13px;
  border-bottom: 1px solid var(--border);
  color: var(--text);
  display: flex;
  gap: 8px;
}

.ingredient-list li:last-child { border-bottom: none; }

.ingredient-amount {
  font-weight: 600;
  color: var(--brand-cream);
  min-width: 36px;
}

.ing-row {
  display: flex;
  gap: 6px;
  align-items: center;
  margin-bottom: 6px;
}

.ing-row input {
  background: var(--bg-elevated-2);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 6px 8px;
  font-size: 13px;
}

/* ==========================================================================
   ALLERGENS
   ========================================================================== */
.allergen-table { font-size: 12px; }

.allergen-table th {
  padding: 8px 4px;
  text-align: center;
  min-width: 36px;
  vertical-align: bottom;
}

.allergen-table th:first-child {
  text-align: left;
  min-width: 180px;
  vertical-align: middle;
}

.allergen-icon-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  font-size: 18px;
  line-height: 1;
  padding: 4px 0;
}

.allergen-icon-header small {
  font-size: 9.5px;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  color: var(--text-muted);
  white-space: nowrap;
  margin-top: 2px;
}

.allergen-checkbox {
  width: 22px;
  height: 22px;
  cursor: pointer;
  accent-color: var(--brand-red);
}

.allergen-checkbox:disabled { cursor: not-allowed; opacity: 0.4; }

/* ==========================================================================
   STOCK + ALLERGENS — MOBILE (sticky item column left, totals right,
   count columns scroll between; everything scaled down one notch)
   ========================================================================== */
@media (max-width: 768px), (max-height: 640px) and (pointer: coarse) {
  .table-container { overflow-x: auto; -webkit-overflow-scrolling: touch; }

  /* --- Stock count table --- */
  .stock-table th, .stock-table td { font-size: 11.5px; padding: 5px 4px; }
  .stock-table td:first-child, .stock-table th:first-child {
    position: sticky; left: 0; z-index: 2;
    background: var(--bg-elevated);
    min-width: 108px; max-width: 38vw;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    text-align: left;
    font-size: 12px;
  }
  .stock-table thead th:first-child { background: var(--bg-elevated-2); z-index: 3; }
  /* Edit mode: name column must fit the X button + a readable input */
  .stock-table td.stock-name-editcell {
    min-width: 160px; max-width: 52vw;
    overflow: visible; text-overflow: clip;
  }

  /* Total pinned right (count columns scroll underneath) */
  #countTab .stock-table th:nth-child(7), #countTab .stock-table td:nth-child(7) {
    position: sticky; right: 0; z-index: 2;
    background: var(--bg-elevated);
    min-width: 48px; width: 48px;
    font-variant-numeric: tabular-nums;
  }
  #countTab .stock-table thead th:nth-child(7) { background: var(--bg-elevated-2); z-index: 3; }

  /* Sticky cells on flagged rows need a solid tint (transparent bg would leak scroll) */
  .needs-order-row td:first-child,
  #countTab .needs-order-row td:nth-child(7) { background: #261418; }

  /* Count inputs: uniform 5-across; 16px font stops iOS focus-zoom */
  .stock-table .count-input {
    width: 44px; height: 36px; padding: 2px;
    font-size: 16px;
  }
  .stock-table .par-input { height: 36px; font-size: 16px; }

  /* Category titles on phone: small burgundy text labels, not heavy bands.
     Must NOT inherit the sticky first-col rules (colspan td:first-child —
     sticky+max-width would clip them). */
  .category-header,
  .stock-table td.category-header,
  .allergen-table td.category-header {
    position: static; max-width: none;
    background: transparent !important;
    color: var(--brand-red-bright);
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: 0.4px;
    padding: 10px 4px 3px !important;
    border-bottom: 1px solid var(--border);
  }
  .order-flag { font-size: 9px; padding: 2px 4px; }
  .order-ok { font-size: 10px; }

  /* --- Allergen matrix --- */
  .allergen-table { font-size: 11px; }
  .allergen-table th { padding: 6px 3px; min-width: 32px; }
  .allergen-table td { padding: 5px 3px; }
  .allergen-table th:first-child, .allergen-table td:first-child {
    position: sticky; left: 0; z-index: 2;
    background: var(--bg-elevated);
    min-width: 110px; max-width: 40vw;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    font-size: 12px;
  }
  .allergen-table thead th:first-child { background: var(--bg-elevated-2); z-index: 3; }
  .allergen-table .category-header { position: static; max-width: none; }
  /* Emoji + label need breathing room; label wraps under a taller header */
  .allergen-icon-header { font-size: 15px; gap: 9px; padding: 4px 0 2px; }
  .allergen-icon-header small { font-size: 8px; letter-spacing: 0.2px; }
  .allergen-table th { vertical-align: bottom; padding: 8px 3px 7px; }
  .allergen-checkbox { width: 16px; height: 16px; }
  .allergen-viewcell { height: 30px; }
}

/* ==========================================================================
   PRIVATE HIRE PIPELINE
   ========================================================================== */
.pipeline-tabs {
  display: flex;
  justify-content: center;
  gap: 6px;
  margin-bottom: 18px;
  border-bottom: 1px solid var(--border);
}

.pipeline-tab {
  padding: 9px 18px;
  background: transparent;
  border: none;
  /* Active tab sits between two red strips (top + bottom), equidistant text */
  border-top: 2px solid transparent;
  border-bottom: 2px solid transparent;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
  transition: color var(--transition), border-color var(--transition);
  font-family: inherit;
}

.pipeline-tab:hover { color: var(--text); }

.pipeline-tab.active {
  color: var(--brand-cream);
  border-top-color: var(--brand-red);
  border-bottom-color: var(--brand-red);
}

/* Tabs docked at the top of the bottom bar (above the filters). Solid, no
   scroll-through; the active tab is framed by a strip above and below. */
.crm-bottom-dock .pipeline-tabs {
  margin: 0; border-bottom: none;
  justify-content: space-around; gap: 2px;   /* 3 tabs, centred + evenly spaced */
  order: -1;                      /* first row of the dock */
}
.crm-bottom-dock .pipeline-tab { padding: 8px 10px; font-size: 13.5px; }

.pipeline-board {
  display: grid;
  /* One track per visible column so hiding stages doesn't leave empty tracks */
  grid-auto-flow: column;
  grid-auto-columns: minmax(220px, 1fr);
  gap: 12px;
  overflow-x: auto;
  padding-bottom: 12px;
}

/* Board stage-selector chips (toggle which pipeline columns show) */
.board-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.board-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px; border-radius: 999px;
  background: var(--bg-elevated-2); border: 1px solid var(--border);
  color: var(--text-muted); font-family: inherit; font-size: 12.5px; font-weight: 600;
  cursor: pointer; opacity: 0.55;
  transition: opacity var(--transition), border-color var(--transition), background var(--transition), color var(--transition);
}
.board-chip:hover { opacity: 0.85; }
.board-chip.active { opacity: 1; color: var(--text); border-color: var(--brand-red); background: rgba(140,20,30,0.14); }
.board-chip-n {
  font-size: 11px; font-weight: 700; color: var(--text-muted);
  background: var(--bg); border-radius: 999px; padding: 1px 7px; font-variant-numeric: tabular-nums;
}
.board-chip.active .board-chip-n { color: var(--text); }

.pipeline-column {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px;
  min-height: 240px;
}

.pipeline-column h3 {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-muted);
  margin-bottom: 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border);
  font-weight: 600;
}

.pipeline-card {
  background: var(--bg-elevated-2);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 12px;
  margin-bottom: 8px;
  cursor: pointer;
  transition: border-color var(--transition), transform var(--transition);
}

.pipeline-card:hover {
  border-color: var(--brand-red);
  transform: translateY(-1px);
}

.pipeline-card-name {
  font-weight: 600;
  color: var(--brand-cream);
  margin-bottom: 4px;
  font-size: 14px;
}

.pipeline-card-info {
  font-size: 12px;
  color: var(--text-muted);
}

/* ==========================================================================
   CASH UP
   ========================================================================== */
.cashup-form {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 24px;
  margin-bottom: 24px;
}

.cashup-form h3 {
  margin-bottom: 18px;
  color: var(--text);
  font-size: 17px;
  font-weight: 600;
}

.variance-display {
  background: var(--bg-elevated-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 18px;
  margin-top: 16px;
}

.variance-display h3 {
  margin-bottom: 12px;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-muted);
}

.variance-row {
  display: flex;
  justify-content: space-between;
  padding: 6px 0;
  font-size: 15px;
  color: var(--text);
}

.variance-value { font-weight: 700; font-size: 17px; }
.variance-positive { color: var(--success); }
.variance-negative { color: var(--danger); }
.variance-neutral  { color: var(--text-muted); }

.cashup-count-section {
  background: var(--bg-elevated-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px;
  margin-bottom: 14px;
}

/* Cashup notes editor — matches app dark theme. .form-group textarea rules
   already set base colours; this extends the height/typography for the
   full-panel note view swapped in by the Notes toggle. */
.cu-notes-input {
  width: 100%;
  min-height: 340px;
  resize: vertical;
  font-family: inherit;
  font-size: 14px;
  line-height: 1.55;
}

/* Inline pair: main figure + green/red variance indicator (Expected Cash and
   Opening Balance rows). The indicator sits to the right of the value. */
.cu-inline-pair {
  display: inline-flex; align-items: baseline; gap: 10px;
  justify-content: flex-end;
}
.cu-indicator {
  font-size: 13px; font-weight: 700;
  font-variant-numeric: tabular-nums;
  min-width: 60px; text-align: right;
}

/* Cashup dock date picker — styled to sit between Cancel and Save buttons.
   Uses the same 42px control height as the app's buttons. pointer-events:all
   is required because the .mobile-action-bar container has pointer-events:none
   and only re-enables .btn by default. */
.cu-dock-date {
  flex: 1.2;
  min-height: 42px;
  padding: 0 12px;
  background: var(--bg-elevated-2);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-size: 13.5px;
  font-weight: 500;
  text-align: center;
  cursor: pointer;
  pointer-events: all;
  -webkit-appearance: none;
  appearance: none;
}
.cu-dock-date:focus { outline: 2px solid var(--brand-red); outline-offset: 1px; }
.cu-dock-date::-webkit-calendar-picker-indicator { opacity: 0.7; cursor: pointer; }

/* Opening + Closing counts side-by-side on desktop AND mobile (Filip's spec).
   On phones the grids compress hard so both fit without horizontal scroll,
   inputs shrink height so more of the variance summary sits above the fold. */
.cashup-counts-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.cashup-counts-row .cashup-count-section { margin-bottom: 0; }

@media (max-width: 768px), (max-height: 640px) and (pointer: coarse) {
  .cashup-counts-row { gap: 5px; }
  .cashup-counts-row .cashup-count-section { padding: 6px 5px; }
  .cashup-counts-row .cashup-count-header { margin-bottom: 4px; }
  .cashup-counts-row .cashup-count-title { font-size: 11px; }
  .cashup-counts-row .cashup-count-title::before { width: 5px; height: 5px; }

  /* Tighter denom grid: 26px label + qty + 40px line total, small gutter */
  .cashup-counts-row .denom-grid {
    grid-template-columns: 26px 1fr 1fr 40px;
    gap: 3px 4px;
    max-width: 100%;
  }
  .cashup-counts-row .denom-grid input.denom-bags {
    min-height: 30px; height: 30px; padding: 2px 4px; font-size: 13.5px;
  }
  .cashup-counts-row .denom-head { font-size: 8px; }
  .cashup-counts-row .denom-grid .denom-label { font-size: 10.5px; font-weight: 600; }
  .cashup-counts-row .denom-grid .denom-line { font-size: 10px; }
  .cashup-counts-row .denom-grid input.denom-qty {
    min-height: 30px; height: 30px;
    padding: 2px 4px;
    font-size: 13.5px;
    text-align: center;
  }
  .cashup-counts-row .cashup-count-footer {
    margin-top: 6px;
    padding: 5px 4px;
  }
  .cashup-counts-row .cashup-count-footer .label { font-size: 10px; }
  .cashup-counts-row .cashup-count-footer .value { font-size: 13px; }

  /* Summary block below counts — shrink so more of it sits above the fold */
  .variance-display { padding: 10px 12px; margin-top: 10px; }
  .variance-row { font-size: 12.5px; padding: 3px 0; }
  .variance-row small { font-size: 10px; }
  .variance-value { font-size: 13.5px; }
  .cu-indicator { font-size: 12px; min-width: 52px; }
  .cashup-inline-input { min-height: 32px !important; height: 32px; font-size: 14px !important; padding: 2px 6px; width: 90px; text-align: right; }
}

.cashup-count-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

.cashup-count-title {
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-muted);
}

.cashup-count-total {
  font-size: 18px;
  font-weight: 700;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}

.cashup-inline-input {
  width: 120px;
  text-align: right;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text);
  padding: 6px 8px;
  font-size: 15px;
}

/* ==========================================================================
   MODALS
   ========================================================================== */
.modal {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.7);
  z-index: 1000;
  align-items: flex-start;
  justify-content: center;
  padding: 40px 20px;
  overflow-y: auto;
}

.modal.active { display: flex; }

.modal-content {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 28px;
  width: 100%;
  max-width: 600px;
  box-shadow: var(--shadow-lg);
}

.modal-header {
  margin-bottom: 20px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--border);
}

.modal-header h2 {
  font-size: 20px;
  font-weight: 600;
  color: var(--text);
}

.modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 24px;
  padding-top: 18px;
  border-top: 1px solid var(--border);
}

/* Function-sheet modal: footer (Export/Cancel/Save) pinned while scrolling */
.fs-wide .modal-footer {
  position: sticky;
  bottom: 0;
  z-index: 5;
  background: var(--bg-elevated);
  margin: 24px -28px 0;
  padding: 12px 28px;
}
@media (max-width: 768px), (max-height: 640px) and (pointer: coarse) {
  .fs-wide .modal-footer {
    flex-wrap: wrap;
    gap: 8px;
    padding: 10px 28px calc(10px + env(safe-area-inset-bottom, 0px));
  }
  .fs-wide .modal-footer .btn {
    flex: 1 1 40%;
    min-height: 46px;
    font-size: 13px;
    white-space: nowrap;
  }
}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width: 900px) {
  /* NOTE: sidebar/nav intentionally NOT touched here — desktop sidebar persists
     until 768px, where the mobile two-bar layout takes over completely. */
  .main-content { padding: 18px; }
  .page-header h1 { font-size: 22px; }
  .cocktail-grid { grid-template-columns: 1fr; }
}

/* Scrollbar styling */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb {
  background: var(--border-strong);
  border-radius: 5px;
}
::-webkit-scrollbar-thumb:hover { background: var(--brand-red); }







/* ==========================================================================
   ENQUIRY TYPE BADGES (PH / LG)  — v5
   ========================================================================== */
.type-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  vertical-align: middle;
  line-height: 1.5;
}
.type-badge.type-ph { background: var(--brand-red); color: var(--brand-cream); }
.type-badge.type-lg { background: var(--bg-hover); color: var(--text-muted); border: 1px solid var(--border-strong); }
.pipeline-card-name .type-badge { margin-left: 6px; }
.pipeline-card-name { display: flex; align-items: center; flex-wrap: wrap; gap: 2px; }

/* ==========================================================================
   CRM TOOLBAR — v9 unified pill toolbar
   ========================================================================== */
.crm-toolbar {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin-bottom: 18px;
}

/* Row A: filter badges (PH/LG · Day/Night) on the left, view switcher
   on the right. Chips are click-to-filter triggers. */
.crm-toolbar-chips { margin-bottom: 10px; }
.crm-view-switch { margin-left: auto; }

/* "More filters" drop-up popup — same pattern as Allergens filter */
.crm-more-wrap { position: relative; }
.crm-more-btn { display: inline-flex; align-items: center; gap: 8px; }
.crm-more-btn.is-active {
  background: var(--brand-red); color: var(--brand-cream);
  border-color: var(--brand-red);
}
.crm-more-badge {
  min-width: 20px; padding: 1px 7px; border-radius: 999px;
  background: var(--gold-bright); color: #0B0C0C;
  font-size: 10.5px; font-weight: 700; letter-spacing: 0;
}
.crm-more-popup {
  position: absolute;
  left: 0; top: calc(100% + 8px);
  display: none;
  min-width: 320px; max-width: 420px;
  background: var(--bg-elevated);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: 14px 16px;
  z-index: 950;
  max-height: 70vh; overflow-y: auto;
  pointer-events: all;
}
.crm-more-popup.open { display: block; }
.crm-more-head {
  display: flex; align-items: center; justify-content: space-between;
  padding-bottom: 8px; margin-bottom: 10px;
  border-bottom: 1px solid var(--border);
}
.crm-more-title {
  font-family: var(--font-display);
  font-size: 12px; font-weight: 600;
  color: var(--brand-cream);
  text-transform: uppercase; letter-spacing: 0.14em;
}
.crm-more-clear {
  background: none; border: none;
  color: var(--brand-red-bright);
  font-family: inherit; font-size: 11px; font-weight: 600;
  letter-spacing: 0.04em; cursor: pointer;
  text-transform: uppercase;
}
.crm-more-clear:hover { color: var(--brand-cream); }
.crm-more-section { margin-bottom: 12px; }
.crm-more-section:last-child { margin-bottom: 0; }
.crm-more-section-label {
  display: block;
  font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--text-subtle); font-weight: 600;
  margin-bottom: 6px;
}
.crm-more-chips {
  display: flex; flex-wrap: wrap; gap: 6px;
}
.crm-more-chips .cat-chip { font-size: 11.5px; padding: 4px 10px; }
@media (max-width: 640px) {
  .crm-more-popup { min-width: calc(100vw - 40px); left: -20px; right: auto; }
}

/* Row B: search + sort side-by-side */
.crm-toolbar-search { margin-bottom: 16px; }
.crm-toolbar-search .tb-search { flex: 2 1 260px; max-width: none; }
.crm-toolbar-search .tb-sort { flex: 1 1 200px; }

/* Search pill */
.tb-search {
  display: flex; align-items: center; gap: 8px;
  /* 48px, not the old 42px: this is the app's control height, and the search
     pill is a primary one-handed target in the dock. */
  flex: 1 1 240px; max-width: 420px; height: 48px;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 0 8px 0 14px;
  transition: border-color var(--transition), box-shadow var(--transition), background var(--transition);
}
.tb-search:hover { border-color: var(--border-strong); }
.tb-search:focus-within {
  border-color: var(--brand-red);
  box-shadow: 0 0 0 3px rgba(138,25,21,0.25);
  background: var(--bg-elevated-2);
}
.tb-search-icon { width: 16px; height: 16px; color: var(--text-subtle); flex: 0 0 auto; }
.tb-search:focus-within .tb-search-icon { color: var(--text-muted); }
.tb-search input {
  flex: 1; min-width: 0; height: 100%;
  background: transparent; border: none; outline: none;
  color: var(--text); font-size: 16px; font-family: inherit;  /* 16px = no iOS focus-zoom */
}
.tb-search input::placeholder { color: var(--text-subtle); }
.tb-search-clear {
  display: none; align-items: center; justify-content: center;
  width: 26px; height: 26px; border-radius: 50%; padding: 0; flex: 0 0 auto;
  background: var(--bg-hover); border: none; color: var(--text-muted);
  cursor: pointer;
  transition: background var(--transition), color var(--transition);
}
.tb-search-clear svg { width: 12px; height: 12px; }
.tb-search-clear:hover { background: var(--border-strong); color: var(--text); }
.tb-search.has-value .tb-search-clear { display: inline-flex; }

/* Segmented pill control */
.tb-segmented {
  display: inline-flex; align-items: center; gap: 2px; height: 42px;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: 999px; padding: 3px;
}
.tb-segmented button {
  display: inline-flex; align-items: center; justify-content: center;
  height: 34px; padding: 0 16px; border-radius: 999px;
  background: transparent; border: none; color: var(--text-muted);
  font-size: 13px; font-weight: 600; font-family: inherit; cursor: pointer;
  transition: background var(--transition), color var(--transition), box-shadow var(--transition);
}
.tb-segmented button:hover { color: var(--text); }
.tb-segmented button.active {
  background: var(--brand-red); color: #fff;
  box-shadow: 0 2px 8px rgba(138,25,21,0.4);
}
.tb-segmented-icons button { padding: 0 12px; }
.tb-segmented-icons svg { width: 16px; height: 16px; display: block; }

/* Sort pill */
.tb-sort {
  position: relative; display: inline-flex; align-items: center;
  height: 42px; padding: 0 14px;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: 999px;
  transition: border-color var(--transition), box-shadow var(--transition);
}

/* Filter pill — mirrors .tb-sort shape/size, icon-only. Sits inline with
   the sort pill in the top strip. Badge shows the active-filter count. */
.tb-filter-pill { position: relative; }
.tb-filter-btn {
  display: inline-flex; align-items: center; justify-content: center;
  height: 42px; width: 42px; padding: 0;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--text-muted); cursor: pointer;
  transition: border-color var(--transition), box-shadow var(--transition), color var(--transition);
}
.tb-filter-btn:hover { border-color: var(--border-strong); color: var(--text); }
.tb-filter-btn svg { width: 16px; height: 16px; display: block; }
.tb-filter-btn.is-active,
.tb-filter-pill:has(.crm-more-popup.open) .tb-filter-btn {
  border-color: var(--brand-red);
  box-shadow: 0 0 0 3px rgba(138,25,21,0.25);
  color: var(--brand-cream);
}
.tb-filter-pill .crm-more-badge {
  position: absolute; top: -4px; right: -4px;
  min-width: 18px; height: 18px; padding: 0 5px;
  border-radius: 999px;
  background: var(--gold-bright); color: #0B0C0C;
  font-size: 10px; font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center;
}
.tb-sort:hover { border-color: var(--border-strong); }
.tb-sort:focus-within { border-color: var(--brand-red); box-shadow: 0 0 0 3px rgba(138,25,21,0.25); }
.tb-sort-icon { width: 15px; height: 15px; color: var(--text-subtle); margin-right: 8px; flex: 0 0 auto; }

/* Icon-only sort pill (dock): 42x42, native select overlaid transparent so
   tapping the arrows-icon opens the full sort menu — "just the icon" per V16. */
.tb-sort-icon-only {
  width: 42px; height: 42px; padding: 0;
  justify-content: center; overflow: hidden; flex: 0 0 auto;
}
.tb-sort-icon-only .tb-sort-icon { margin-right: 0; width: 17px; height: 17px; color: var(--text-muted); }
.tb-sort-icon-only select {
  position: absolute; inset: 0;
  width: 100%; height: 100%; padding: 0; margin: 0;
  opacity: 0; cursor: pointer;
  appearance: none; -webkit-appearance: none; border: none; background: transparent;
}
.tb-sort select {
  appearance: none; -webkit-appearance: none; height: 100%;
  background: transparent; border: none; outline: none;
  color: var(--text); font-size: 13px; font-weight: 500; font-family: inherit;
  padding-right: 22px; cursor: pointer;
}
.tb-sort select option { background: var(--bg-elevated-2); color: var(--text); }
.tb-sort-chevron {
  width: 14px; height: 14px; color: var(--text-subtle);
  position: absolute; right: 12px; pointer-events: none;
}

@media (max-width: 768px), (max-height: 640px) and (pointer: coarse) {
  .crm-toolbar { gap: 8px; }
  .tb-search { flex: 1 1 100%; max-width: none; }
}

/* ==========================================================================
   CRM BOTTOM DOCK (V15.13) — search + PH/LG + sun/moon + Filters + "+"
   always docked at the bottom of the viewport. Replaces the old top
   search/chip rows so all controls are thumb-reachable on phone.
   ========================================================================== */
.crm-bottom-dock {
  position: fixed;
  left: 250px; right: 0;                 /* desktop: clear the sidebar */
  bottom: 0;
  padding: 8px 14px 12px;
  background: var(--bg);                  /* solid — nothing scrolls through */
  border-top: 1px solid var(--border);
  z-index: 910;
  display: flex; flex-direction: column; gap: 8px;
  transition: bottom 0.2s ease;          /* smooth ride with the keyboard, no snap */
}
.crm-toolbar-top { margin-bottom: 14px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.crm-dock-chips { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.crm-dock-search { display: flex; gap: 8px; align-items: stretch; }
.crm-dock-search .tb-search { flex: 1; min-width: 0; max-width: none; }
.crm-dock-add {
  flex: 0 0 auto;
  min-width: 44px; height: 44px; padding: 0;
  border-radius: 999px;
  font-size: 22px; line-height: 1; font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center;
}
/* Keep card content clear of the docked bar (tabs + filters + search rows) */
body:has(.crm-bottom-dock) .main-content { padding-bottom: 210px; }

/* Multi-select segmented variant — each button is its own toggle, no "All"
   bookend. Both PH+LG can be on together; both ☀+☾ can be on together. */
.tb-segmented-multi { padding: 3px; }
.tb-segmented-multi button { border-radius: 999px; padding: 6px 12px; }
.tb-segmented-multi button.active {
  background: var(--brand-red); color: var(--brand-cream);
  box-shadow: 0 0 0 1px var(--brand-red-bright);
}

/* Popup drops UP from the Filter pill (pill lives in the bottom dock). */
.tb-filter-pill .crm-more-popup {
  top: auto;
  bottom: calc(100% + 10px);
  left: auto; right: 0;
  z-index: 970;
  max-height: min(78vh, 660px);
}

/* Mobile: dock sits above the bottom nav; popup spans the viewport width */
@media (max-width: 768px), (max-height: 640px) and (pointer: coarse) {
  .crm-bottom-dock {
    left: 0; right: 0;
    bottom: var(--nav-h);
  }
  /* Derived from the dock's MEASURED height (private-hire.html sets
     --crm-dock-h via ResizeObserver), not a constant. The dock is a flex
     column — tabs + chips + search — so it gains a row when the chips wrap on
     a narrow phone and loses two when kb-open hides them. The old hardcoded
     262px left just 40px over the real 160px dock + 62px nav, so a single
     wrapped row buried the end of the list behind the search bar with no way
     to scroll to it. The fallback covers the moment before JS runs. */
  body:has(.crm-bottom-dock) .main-content {
    padding-bottom: calc(var(--crm-dock-h, 200px) + var(--nav-h) + 16px);
  }
  /* Fixed (viewport-relative) so it spans the screen above the dock instead
     of collapsing to the 42px pill width. Sits just above the 3-row dock
     (tabs + filters + search). */
  .tb-filter-pill .crm-more-popup {
    position: fixed;
    left: 8px; right: 8px;
    top: calc(56px + env(safe-area-inset-top, 0px) + 8px);
    bottom: calc(var(--nav-h) + 224px);
    min-width: 0; max-width: none;
    max-height: none;   /* fill top→dock so every section (incl. Event date) shows */
  }
  .crm-dock-chips { gap: 6px; }
  .crm-dock-chips .btn-small { padding: 6px 10px; }
}

/* ==========================================================================
   FUNCTION-SHEET FORM — dark theme
   ========================================================================== */
.fs-section {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 18px; margin-bottom: 16px;
}
.fs-section > h3 {
  margin: 0 0 14px; font-size: 0.85rem; font-weight: 600;
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-muted);
}
.fs-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 12px; }
.fs-bar-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 10px; }
.fs-row { display: flex; gap: 8px; align-items: center; margin-bottom: 8px; flex-wrap: wrap; }
.fs-row input, .fs-row select {
  flex: 1 1 auto; min-width: 90px;
  background: var(--bg-elevated-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text); padding: 8px 10px; font-size: 14px; font-family: inherit;
}
.fs-row input:focus, .fs-row select:focus {
  outline: none; border-color: var(--brand-red);
  box-shadow: 0 0 0 3px rgba(138,25,21,0.2);
}
.fs-row .fs-item { flex: 3 1 200px; }
.fs-row .fs-comment { flex: 2 1 160px; }
/* Timeline rows: fixed-width time box, label fills, remove button centered */
.fs-row .tl-time { flex: 0 0 110px; width: 110px; }
.fs-row .tl-label { flex: 1 1 160px; }
.fs-row .btn-remove { align-self: center; }
.fs-course {
  background: var(--bg-elevated-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 12px; margin-bottom: 12px;
}
.fs-course-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; gap: 8px; }
.fs-course-head strong { font-size: 0.85rem; color: var(--text); text-transform: uppercase; letter-spacing: 0.04em; }
.fs-course-btns { display: flex; gap: 6px; align-items: center; flex-shrink: 0; }
.btn-tiny { padding: 5px 12px; font-size: 0.8rem; border-radius: 6px; font-family: inherit; cursor: pointer; }
.btn-remove { background: var(--brand-red); color: var(--brand-cream); border: none; cursor: pointer; }
.btn-remove:hover { background: var(--brand-red-hover); }
.modal-content.fs-wide { max-width: 920px; width: 95%; }

/* ==========================================================================
   PIPELINE VIEWS
   ========================================================================== */
.pipeline-list { display: flex; flex-direction: column; gap: 6px; }
.pipeline-list-item {
  /* V16.13: block layout — the old flex-row container mangled the stacked
     cardBody (invisible name, clipped deposit). List = board card, wider. */
  display: block;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px 16px; cursor: pointer;
  transition: border-color var(--transition), transform var(--transition);
}
.pipeline-list-item:hover { border-color: var(--brand-red); }
.pipeline-list-info { flex: 1; min-width: 0; }
.pipeline-list-date {
  flex: 0 0 auto; min-width: 90px; text-align: right;
  font-size: 12px; font-weight: 600; color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}
.pipeline-list-date .pld-day { font-size: 13px; color: var(--text); display: block; }
.pipeline-list-date .pld-nodate { font-style: italic; font-weight: 400; }
.pipeline-list-name {
  font-weight: 600; color: var(--brand-cream); font-size: 15px;
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
}
.pipeline-list-meta { font-size: 12px; color: var(--text-muted); margin-top: 2px; }
.pipeline-list-stage {
  background: var(--bg-elevated-2);
  border: 1px solid var(--border);
  border-radius: 999px; padding: 4px 10px;
  font-size: 11px; font-weight: 600; color: var(--text-muted);
  white-space: nowrap; text-transform: uppercase; letter-spacing: 0.3px;
}

/* Deposit + min-spend chips — rounded rectangles (not pills). Colour tells
   the story on the deposit chip: green = paid, gold = pending. Min-spend
   uses a neutral steel look so it doesn't compete with deposit status. */
.pipeline-card-chips { margin-top: 8px; display: flex; flex-wrap: wrap; gap: 4px; }
.dep-chip {
  display: inline-block; padding: 3px 10px; border-radius: 6px;
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.3px;
  line-height: 1.35;
}
.dep-chip.dep-paid { background: rgba(74,222,128,0.15); color: var(--success); border: 1px solid rgba(74,222,128,0.4); }
.dep-chip.dep-due { background: rgba(201,169,97,0.14); color: var(--gold-bright); border: 1px solid rgba(201,169,97,0.45); }
.dep-chip.min-chip { background: rgba(255,255,255,0.05); color: var(--text); border: 1px solid var(--border); }

.form-msg {
  padding: 10px 14px; border-radius: var(--radius);
  font-size: 13px; margin-top: 12px; width: 100%;
}
.form-msg-error { background: rgba(239,68,68,0.12); color: #FCA5A5; border: 1px solid rgba(239,68,68,0.3); }
.form-msg-ok    { background: rgba(74,222,128,0.10); color: var(--success); border: 1px solid rgba(74,222,128,0.25); }

/* ==========================================================================
   CASH UP — denomination counter
   ========================================================================== */
.denom-grid {
  display: grid;
  /* V16.6: label | loose coins | coin bags | line total */
  grid-template-columns: 44px 1fr 1fr 84px;
  gap: 8px 10px; align-items: center; max-width: 480px;
}
.denom-head {
  font-size: 9.5px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.08em; color: var(--text-subtle);
  text-align: center; /* V16.9.1: centred over the count fields */
}
input.denom-bags {
  background: var(--bg-elevated-2);
  border: 1px solid rgba(201,169,97,0.35);
  border-radius: var(--radius); color: var(--text);
  padding: 8px 10px; font-size: 15px; text-align: center;
  font-family: inherit; width: 100%;
}
input.denom-bags:focus { outline: none; border-color: var(--gold); }
.denom-bag-none { text-align: center; color: var(--text-subtle); font-size: 11px; }
.denom-grid .denom-label { color: var(--text-muted); font-weight: 600; font-size: 14px; }
.denom-grid input.denom-qty {
  background: var(--bg-elevated-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text); padding: 8px 10px; font-size: 15px; text-align: center;
  font-family: inherit; width: 100%;
}
.denom-grid input.denom-qty:focus { outline: none; border-color: var(--brand-red); }
.denom-grid .denom-line { text-align: right; color: var(--text); font-variant-numeric: tabular-nums; }

/* ==========================================================================
   NAV — desktop: hide More toggle, show everything
   ========================================================================== */
.nav-more { display: none; }
.nav-more-check { display: none; }

/* ==========================================================================
   MOBILE BOTTOM NAV — 4 primary + More sheet, iPhone safe areas
   ========================================================================== */
@media (max-width: 768px), (max-height: 640px) and (pointer: coarse) {
  /* Two-bar layout: top (hamburger+logout) + bottom (Dashboard/Rota/Training).
     Sidebar is a single position:fixed full-height transparent overlay — no nested fixed
     elements, which avoids an iOS Safari bug where nested fixed siblings reposition. */
  .app-container {
    flex-direction: column;
    padding-top: calc(52px + env(safe-area-inset-top, 0px));
    padding-bottom: var(--nav-h);
  }

  /* Sidebar: full-height transparent overlay — pointer-events only on the bars.
     width/height MUST be reset to auto: the desktop rules set width:250px and
     height:100vh, and explicit sizes override the right/bottom anchors of inset:0
     (250px-wide bar, bottom bar pushed below Safari's visible viewport). */
  .sidebar {
    position: fixed; inset: 0;
    width: auto; height: auto;
    border: none; background: transparent;
    flex-direction: column; justify-content: space-between;
    z-index: 910; overflow: visible; padding: 0;
    pointer-events: none;
  }
  .sidebar-header { display: none; }
  .sidebar-footer { display: none; }

  /* Top bar: hamburger left, logout right.
     order:-1 because .nav-menu precedes .mobile-topbar in the DOM — without this
     the two bars render inverted (nav links on top, hamburger at the bottom). */
  .mobile-topbar {
    order: -1;
    display: flex; flex-direction: row; align-items: center;
    width: 100%; flex-shrink: 0;
    height: calc(52px + env(safe-area-inset-top, 0px));
    padding-top: env(safe-area-inset-top, 0px);
    padding-left: env(safe-area-inset-left, 0px);
    padding-right: env(safe-area-inset-right, 0px);
    /* Translucent, not solid: the chevron field shows through so the top of
       the screen is continuous with the rest of it. A solid --bg-elevated
       here read as a grey slab pasted over the pattern. */
    background: rgba(20, 22, 22, .72);
    -webkit-backdrop-filter: saturate(140%) blur(14px);
    backdrop-filter: saturate(140%) blur(14px);
    border-bottom: 1px solid var(--border);
    box-shadow: 0 4px 16px rgba(0,0,0,0.4);
    pointer-events: all;
  }
  .mobile-topbar .nav-more { display: flex; align-items: stretch; }
  .mobile-topbar .nav-logout-mobile { display: flex; align-items: stretch; margin-left: auto; }
  /* Top bar items match the bottom bar items exactly: same icon, font, spacing */
  .mobile-topbar .nav-link {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 3px; height: 52px; min-width: 72px; padding: 4px 8px;
    font-size: 11px; font-weight: 500; border-radius: 0;
    text-align: center; white-space: nowrap; overflow: hidden; cursor: pointer;
    color: var(--text-muted);
  }
  .mobile-topbar .nav-link:hover { color: var(--text); background: var(--bg-hover); }
  .mobile-topbar .nav-icon svg { width: 22px; height: 22px; }
  .mobile-topbar .nav-logout-mobile button.nav-link {
    background: none; border: none; font-family: inherit; cursor: pointer;
  }

  /* Page title centered between Menu and Log Out */
  .topbar-title {
    display: block; flex: 1; min-width: 0; align-self: center;
    text-align: center;
    font-family: var(--font-display);
    font-size: 16px; font-weight: 600; color: var(--brand-cream);
    line-height: 1.25;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    padding: 0 4px;
  }
  .topbar-title .topbar-sub {
    display: block; font-size: 10.5px; font-weight: 500; color: var(--text-muted);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .topbar-title .topbar-sub::before {
    content: ''; display: inline-block; width: 14px; height: 2px;
    background: var(--gold); border-radius: 1px;
    margin-right: 6px; vertical-align: middle;
  }

  /* In-page titles move to the top bar on mobile */
  .page-header h1 { display: none; }
  .page-header { margin-bottom: 12px; }
  /* V16.4.1: on Holidays the header holds ONLY the hidden h1, so its
     leftover margin made the topbar→allowance gap bigger than every
     other section gap (16px). Collapse it: all gaps equal. */
  body:has(.hol-allowance-card) .page-header { display: none; }
  .db-greeting, .db-date { display: none; }

  /* Primary action docked above the bottom nav, thumb reach */
  .mobile-action-bar {
    display: block;
    position: fixed; left: 0; right: 0;
    bottom: var(--nav-h);
    padding: 10px 14px 12px;
    background: linear-gradient(to top, rgba(11,12,12,0.95) 55%, transparent);
    z-index: 905;
    pointer-events: none;
  }
  .mobile-action-bar .btn {
    width: 100%; min-height: 52px; font-size: 15px; font-weight: 600;
    pointer-events: all;
    box-shadow: var(--shadow-lg);
  }
  body:has(.mobile-action-bar) .main-content { padding-bottom: 96px; }
  /* Header buttons replaced by the action bar on mobile */
  #addContactBtn, #newCashupBtn { display: none !important; }

  /* (V16.4.1) history table is now 4 columns — Date/Revenue/Variance/Actions —
     the old 8-column hiding rules are gone so the action icons show on mobile. */

  /* Bottom bar: Dashboard / Rota / Training — no position:fixed, flows at bottom of overlay */
  .nav-menu {
    display: flex; flex-direction: row; align-items: stretch;
    width: 100%; flex-shrink: 0;
    height: var(--nav-h);
    padding: 0 env(safe-area-inset-right, 0px) var(--nav-safe) env(safe-area-inset-left, 0px);
    background: var(--bg-elevated);
    border-top: 1px solid var(--border);
    box-shadow: 0 -4px 16px rgba(0,0,0,0.4);
    pointer-events: all;
    margin: 0; overflow: visible;
  }
  .nav-menu li { flex: 1 1 0; margin: 0; }
  .nav-link {
    flex-direction: column; justify-content: center; align-items: center;
    gap: 3px; height: 60px; padding: 8px 4px;
    font-size: 11px; font-weight: 500; border-radius: 0;
    text-align: center; white-space: nowrap; overflow: hidden; cursor: pointer;
  }
  .nav-link.active {
    background: transparent; color: var(--brand-red-bright);
    border-top: 2px solid var(--brand-red-bright); margin-top: -1px;
    border-bottom: none; margin-bottom: 0;
  }
  .nav-link.active::before { display: none; }
  .nav-icon { margin-right: 0; width: auto; }
  .nav-icon svg { width: 22px; height: 22px; }
  .main-content { padding: 16px 14px; }

  /* Popup: absolute within the full-height overlay, below top bar */
  .nav-popup {
    display: none;
    position: absolute;
    top: calc(56px + env(safe-area-inset-top, 0px));
    left: 10px; right: auto; bottom: auto;
    width: 210px;
    background: var(--bg-elevated-2);
    border: 1px solid var(--border-strong);
    border-radius: 10px;
    box-shadow: var(--shadow-lg);
    z-index: 950; overflow: hidden; padding: 0;
    pointer-events: all;
  }
  .sidebar:has(.nav-more-check:checked) .nav-popup { display: block; }
  .nav-popup-list { list-style: none; margin: 0; padding: 0; }
  .nav-popup .nav-link {
    flex-direction: row; justify-content: flex-start;
    height: 48px; gap: 10px; padding: 0 14px;
    font-size: 14px; border-radius: 0;
  }
  .nav-popup .nav-icon svg { width: 18px; height: 18px; }

  /* Form modal full-screen on mobile. Explicit background stops the
     modal-content area appearing transparent when the body scrolls past
     the last field on iOS (the min-height:100vh gap was showing the
     dimmed overlay behind). */
  .modal { padding: 0; align-items: stretch; background: var(--bg-elevated); overscroll-behavior: contain; }
  /* V16.4.1: uniform scroll background — while any modal is open, iOS
     rubber-banding / keyboard viewport shifts could reveal the darker
     page background (--bg) behind the modal, so the grey visibly
     "switched" mid-scroll on long forms. Pin html+body to the modal
     grey whenever a modal is active. */
  html:has(.modal.active), body:has(.modal.active) { background: var(--bg-elevated); }
  .modal-content.fs-wide {
    max-width: 100%; width: 100%; border-radius: 0;
    min-height: 100vh; max-height: none;
    background: var(--bg-elevated);
  }
  .fs-grid { grid-template-columns: 1fr 1fr; }
  .fs-bar-grid { grid-template-columns: 1fr; }
  .fs-row .fs-item, .fs-row .fs-comment { flex-basis: 100%; }

  /* Pipeline board on mobile (V16.13): HORIZONTAL stage pager — swipe
     right/left to move New -> Unqualified -> Didn't Reach... Each stage is
     a full-screen page (next column peeks 8% as a swipe affordance); cards
     scroll vertically INSIDE the stage. */
  .pipeline-board {
    display: flex; flex-direction: row;
    grid-template-columns: none;
    gap: 12px;
    overflow-x: auto; overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    margin: 0 -14px; padding: 0 14px 8px;
  }
  .pipeline-column {
    flex: 0 0 92%;
    scroll-snap-align: center;
    min-height: calc(100vh - 260px);
    min-height: calc(100dvh - 260px);
    max-height: calc(100dvh - 250px);
    overflow-y: auto;
    border-radius: var(--radius-lg);
  }
  .pipeline-column h3 { position: sticky; top: 0; background: var(--bg-elevated); z-index: 2; }

  .denom-grid { max-width: 100%; }
}

/* Bigger tap targets on touch devices */
@media (hover: none) and (pointer: coarse) {
  .btn { min-height: 44px; }
  .form-group input,
  .form-group select,
  .form-group textarea { min-height: 44px; font-size: 16px; }
  .pipeline-card { padding: 14px; }
  .pipeline-list-item { padding: 16px; }
  .denom-grid input.denom-qty, .denom-grid input.denom-bags { min-height: 44px; font-size: 16px; }
  /* On touch, :hover sticks after a tap — the mobile top-bar burger/links
     kept a grey (--bg-hover) background until another element was tapped.
     Neutralise the hover background so nothing stays greyed post-tap. */
  .mobile-topbar .nav-link:hover { background: none; color: var(--text-muted); }
  .mobile-topbar .nav-link { -webkit-tap-highlight-color: transparent; }
}


/* ==========================================================================
   TRAINING MODULE — v6
   ========================================================================== */
.tr-cat {
  font-size: 13px; text-transform: uppercase; letter-spacing: 0.6px;
  color: var(--text-muted); margin: 8px 0 12px; font-weight: 600;
}
.tr-card { cursor: pointer; }
.tr-card-foot { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 4px; }
.tr-chip {
  display: inline-block; padding: 3px 10px; border-radius: 999px;
  font-size: 11px; font-weight: 700; letter-spacing: 0.3px;
}
.tr-chip.tr-type { background: var(--bg-elevated-2); color: var(--text-muted); border: 1px solid var(--border); }
.tr-chip.tr-pending { background: var(--bg-hover); color: var(--text-subtle); border: 1px solid var(--border-strong); }
.tr-chip.tr-passed { background: rgba(74,222,128,0.15); color: var(--success); border: 1px solid rgba(74,222,128,0.4); }
.tr-chip.tr-signed { background: rgba(96,165,250,0.14); color: var(--info); border: 1px solid rgba(96,165,250,0.4); }

.tr-progress {
  height: 4px; background: var(--bg-elevated-2); border-radius: 2px;
  margin-top: 12px; overflow: hidden;
}
.tr-progress-bar {
  height: 100%; width: 0%; background: var(--brand-red);
  border-radius: 2px; transition: width 240ms ease;
}
.tr-section { padding: 6px 2px; }
.tr-section h3 { color: var(--brand-cream); font-size: 18px; margin-bottom: 12px; }
.tr-content { color: var(--text); font-size: 15px; line-height: 1.75; }

.quiz-option {
  display: flex; align-items: center; gap: 10px;
  background: var(--bg-elevated-2); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 12px 14px; margin: 8px 0;
  cursor: pointer; font-size: 14px; color: var(--text);
  transition: border-color var(--transition);
}
.quiz-option:hover { border-color: var(--brand-red); }
.quiz-option input[type="radio"] { accent-color: var(--brand-red); width: 18px; height: 18px; flex: 0 0 auto; }
.tr-question { margin-bottom: 20px; }
.tr-question > p { margin-bottom: 8px; color: var(--text); }

.tr-signoff {
  display: flex; align-items: center; gap: 10px;
  background: var(--bg-elevated-2); border: 1px solid var(--border-strong);
  border-radius: var(--radius); padding: 14px; margin-top: 16px;
  font-size: 14px; color: var(--text); cursor: pointer;
}
.tr-signoff input[type="checkbox"] { width: 20px; height: 20px; accent-color: var(--brand-red); flex: 0 0 auto; }

.tr-result { text-align: center; padding: 30px 10px; }
.tr-result-icon { font-size: 44px; margin-bottom: 10px; }
.tr-matrix-done { color: var(--success); font-weight: 600; }

/* --- My Training: Flow-style redesign --- */
.tr-progress-header {
  background: var(--bg-elevated); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: 18px 20px; margin-bottom: 24px;
}
.tr-progress-summary {
  display: flex; align-items: baseline; gap: 14px; margin-bottom: 10px;
}
.tr-progress-count {
  font-size: 22px; font-weight: 700; color: var(--brand-cream);
}
.tr-progress-count span { font-size: 16px; color: var(--text-muted); font-weight: 400; }
.tr-progress-done { font-size: 14px; color: var(--success); }

.tr-section-label {
  font-size: 12px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.08em; color: var(--text-muted);
  margin: 0 0 12px; display: flex; align-items: center; gap: 8px;
}
.tr-section-done { margin-top: 28px; }
.tr-section-count {
  background: var(--bg-elevated-2); border-radius: 12px;
  padding: 1px 8px; font-size: 11px; color: var(--text-subtle);
}

.tr-modules-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 14px; margin-bottom: 8px;
}
.tr-module-card {
  background: var(--bg-elevated); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: 16px 18px;
  cursor: pointer; transition: border-color var(--transition);
  display: flex; flex-direction: column; gap: 8px;
}
.tr-module-card:hover { border-color: var(--border-strong); }
.tr-module-card.tr-done { opacity: 0.65; }
.tr-module-card.tr-done:hover { opacity: 1; }

.tr-module-top {
  display: flex; align-items: center; gap: 8px; justify-content: space-between;
}
.tr-module-cat {
  font-size: 11px; font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.06em; color: var(--brand-red);
}
.tr-complete-badge {
  font-size: 11px; font-weight: 600; color: var(--success);
  background: rgba(74,222,128,0.12); border-radius: 10px;
  padding: 2px 8px;
}
.tr-module-title {
  font-size: 15px; font-weight: 700; color: var(--brand-cream); line-height: 1.3;
}
.tr-module-desc {
  font-size: 13px; color: var(--text-muted); line-height: 1.5;
  flex: 1;
}
.tr-module-foot {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin-top: 4px; padding-top: 10px; border-top: 1px solid var(--border);
}
.tr-module-btn {
  margin-left: auto; font-size: 13px; padding: 6px 14px; white-space: nowrap;
}


/* ==========================================================================
   ROTA — v7
   ========================================================================== */
.rota-weekbar { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; flex-wrap: wrap; }
.rota-weeklabel { font-weight: 600; color: var(--brand-cream); font-size: 15px; min-width: 170px; text-align: center; }

/* View toggle: My Week / Full Team */
.rota-view-toggle {
  display: flex; gap: 2px;
  background: var(--bg-elevated); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 3px; width: fit-content; margin-bottom: 14px;
}
.rota-view-btn {
  border: none; background: none; padding: 5px 16px; border-radius: 6px;
  font-size: 12px; font-weight: 500; color: var(--text-muted); cursor: pointer; font-family: inherit;
  transition: background var(--transition), color var(--transition);
}
.rota-view-btn.active { background: var(--bg-elevated-2); color: var(--text); }
.rota-view-btn:hover:not(.active) { color: var(--text); }

/* Personal view — day cards */
.rota-personal { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; }
.rota-day-card {
  display: flex; align-items: center; gap: 12px;
  padding: 11px 14px;
  background: var(--bg-elevated); border: 1px solid var(--border); border-radius: var(--radius);
  transition: background var(--transition);
}
.rota-day-card.rota-today { border-color: var(--brand-red); background: rgba(138,25,21,0.06); }
.rota-day-card.rota-day-hasshift { border-left: 3px solid var(--success); }
.rota-day-name { font-weight: 700; font-size: 13px; color: var(--brand-cream); min-width: 36px; }
.rota-day-date { font-weight: 400; font-size: 12px; color: var(--text-muted); margin-left: 5px; }
.rota-day-info { display: flex; align-items: center; gap: 8px; flex: 1; flex-wrap: wrap; }
.rota-day-time { font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; }
.rota-day-role { font-size: 11px; color: var(--text-muted); background: var(--bg-elevated-2); padding: 2px 6px; border-radius: 4px; }
.rota-day-hours { font-size: 11px; color: var(--text-muted); margin-left: auto; }
.rota-day-off { color: var(--text-subtle); font-size: 12px; font-style: italic; }

/* Team grid — tight rows: cell padding trimmed so a row's height matches
   the shift-chip footprint (no extra padding stretching the name cell). */
.rota-table th, .rota-table td { min-width: 96px; vertical-align: middle; padding: 5px 8px; }
.rota-table td:first-child, .rota-table th:first-child { min-width: 110px; }
.rota-table td { cursor: default; position: relative; }
.rota-today { background: rgba(138,25,21,0.08); }
.rota-shift {
  background: var(--bg-elevated-2);
  border: 1px solid var(--border-strong);
  border-left: 3px solid var(--brand-red);
  border-radius: 6px;
  padding: 5px 10px; margin: 0 0 3px 0;
  color: var(--text);
  cursor: pointer; white-space: nowrap;
  font-variant-numeric: tabular-nums;
  /* Two stacked lines: start time on top, end time below. No role. */
  display: flex; flex-direction: column; justify-content: center; align-items: center;
  gap: 3px;
  height: 44px; line-height: 1;
}
.rota-shift-start {
  font-size: 11.5px; font-weight: 700; color: var(--text);
}
.rota-shift-end {
  font-size: 10.5px; font-weight: 500; color: var(--text-muted);
}
.rota-shift:hover { border-color: var(--brand-red); }
.rota-shift.rota-mine { border-left-color: var(--success); }
.rota-table td > .rota-shift:only-child,
.rota-table td > .rota-shift:last-of-type { margin-bottom: 0; }

/* Staff usernames all-caps in the team grid — makes them scannable regardless
   of underlying account-name casing */
.rota-name-cell, .rota-name-cell b { text-transform: uppercase; letter-spacing: 0.02em; }
.rota-table thead th:first-child { text-transform: uppercase; letter-spacing: 0.02em; }
.rota-addhint {
  opacity: 0; text-align: center; color: var(--text-subtle);
  font-size: 15px; padding: 2px 0; transition: opacity var(--transition);
}
td:hover .rota-addhint { opacity: 0.7; cursor: pointer; }
.rota-cost-row td { font-variant-numeric: tabular-nums; color: var(--brand-cream); background: var(--bg-elevated); text-align: center; }
.rota-cost-row td:first-child { text-align: left; }

/* Hrs column: center the number, header, and any content inside */
.rota-hrs-cell { text-align: center; }
.rota-hrs-cell .rota-cell-inner { justify-content: center; }
.rota-table thead th:last-child { text-align: center; }

/* Section dividers between Management + Staff (Filip's separate manager box) */
.rota-section-divider td {
  height: 24px !important; padding: 4px 12px !important;
  background: var(--bg);
  color: var(--text-subtle);
  font-family: var(--font-body);
  font-size: 10px; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  text-align: left;
}
.rota-section-manager td { color: var(--gold); border-top-color: var(--gold-border); border-bottom-color: var(--gold-border); }

/* Mobile: team grid gets horizontal scroll + sticky name column */
@media (max-width: 768px), (max-height: 640px) and (pointer: coarse) {
  .rota-grid-container { overflow-x: auto !important; -webkit-overflow-scrolling: touch; }
  .rota-table th, .rota-table td { min-width: 70px; font-size: 11px; padding: 7px 5px; white-space: nowrap; }
  .rota-table td:first-child, .rota-table th:first-child {
    min-width: 64px; max-width: 80px;
    position: sticky; left: 0; z-index: 2;
    background: var(--bg-elevated-2);
    overflow: hidden; text-overflow: ellipsis;
  }
  .rota-shift { padding: 4px 6px; height: 40px; gap: 2px; }
  .rota-shift-start { font-size: 10.5px; }
  .rota-shift-end { font-size: 9.5px; }
  .rota-name-cell, .rota-hrs-cell { font-size: 11px; }
  /* Mobile row heights match the shrunk chip */
  .rota-table tbody td { height: 46px; padding: 3px 6px; }
  body.rota-edit-mode .rota-table tbody td { height: 60px; }
}


/* ==========================================================================
   DASHBOARD — v8
   ========================================================================== */
.db-greeting {
  font-size: 24px; font-weight: 700; color: var(--brand-cream);
  margin-bottom: 4px;
}
.db-date {
  font-size: 14px; color: var(--text-muted); margin-bottom: 24px;
}
.db-row {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 16px; margin-bottom: 16px;
}
.db-card {
  background: var(--bg-elevated); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: 18px 20px;
  display: flex; flex-direction: column;
  min-width: 0; /* grid item must shrink so nowrap rows (leads, modules) can ellipsize */
}
.db-card-highlight { border-color: var(--brand-red); }
.db-card-warn { border-color: var(--warning); }
.db-card-link { cursor: pointer; transition: border-color var(--transition); }
.db-card-link:hover { border-color: var(--border-strong); }
.db-card-title {
  font-size: 14px; font-weight: 700; color: var(--brand-cream);
  margin-bottom: 14px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.db-card-date {
  font-size: 12px; font-weight: 400; color: var(--text-muted); margin-left: auto;
}
.db-empty { font-size: 13px; color: var(--text-muted); margin-bottom: 10px; }
.db-link {
  font-size: 13px; color: var(--brand-red); text-decoration: none;
  margin-top: auto;
}
.db-link:hover { text-decoration: underline; }

/* Shifts */
.db-shift-row {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 0; border-bottom: 1px solid var(--border);
  font-size: 13px;
}
.db-shift-row:last-of-type { border-bottom: none; }
.db-shift-day { color: var(--text); font-weight: 600; min-width: 48px; }
.db-shift-time { color: var(--brand-cream); font-variant-numeric: tabular-nums; }
.db-shift-role {
  font-size: 11px; color: var(--text-muted);
  background: var(--bg-elevated-2); border-radius: 4px;
  padding: 2px 6px; margin-left: auto;
}

/* Training progress */
.db-progress-row {
  display: flex; align-items: center; gap: 10px; margin-bottom: 8px;
}
.db-progress-bar-wrap {
  flex: 1; height: 8px; background: var(--bg-elevated-2);
  border-radius: 4px; overflow: hidden;
}
.db-progress-bar-fill {
  height: 100%; background: var(--brand-red);
  border-radius: 4px; transition: width 0.4s ease;
}
.db-progress-label { font-size: 13px; color: var(--text-muted); white-space: nowrap; }
.db-training-list { display: flex; flex-direction: column; gap: 4px; margin-bottom: 12px; }
.db-training-item {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 10px; border-radius: var(--radius);
  background: var(--bg-elevated-2); font-size: 13px; color: var(--text-muted);
  text-decoration: none; transition: background var(--transition), color var(--transition);
}
.db-training-item:hover { color: var(--text); }
.db-training-item:hover { background: var(--bg-hover); }
.db-training-icon { width: 16px; height: 16px; flex: 0 0 auto; display: flex; align-items: center; color: var(--text-muted); }
.db-training-icon svg { width: 14px; height: 14px; }
.db-training-action {
  margin-left: auto; font-size: 12px; color: var(--brand-red); font-weight: 600;
}

/* Today's functions */
.db-fn-item {
  padding: 10px 0; border-bottom: 1px solid var(--border);
}
.db-fn-item:last-child { border-bottom: none; }
.db-fn-meta { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.db-fn-tag {
  font-size: 10px; font-weight: 700; letter-spacing: 0.04em;
  padding: 2px 7px; border-radius: 4px; text-transform: uppercase;
}
.db-fn-tag-ph { background: rgba(138,25,21,0.25); color: #F87171; }
.db-fn-tag-lg { background: rgba(74,222,128,0.15); color: #4ADE80; }
.db-fn-session { font-size: 12px; color: var(--text-muted); }
.db-fn-name { font-size: 15px; font-weight: 600; color: var(--brand-cream); }

/* Follow-ups */
.db-followup-item {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 8px 0; border-bottom: 1px solid var(--border); font-size: 13px;
}
.db-followup-item:last-child { border-bottom: none; }
.db-followup-name { flex: 1; color: var(--text); min-width: 80px; }
.db-badge {
  font-size: 11px; font-weight: 600; padding: 2px 8px;
  border-radius: 12px; white-space: nowrap;
}
.db-badge-red { background: rgba(239,68,68,0.2); color: #FCA5A5; }
.db-badge-orange { background: rgba(251,191,36,0.2); color: #FDE68A; }
.db-badge-gray { background: var(--bg-elevated-2); color: var(--text-muted); }

/* Cash-up summary */
.db-cashup-row { display: flex; gap: 24px; margin-bottom: 10px; flex-wrap: wrap; align-items: flex-end; }
.db-cashup-stat { display: flex; flex-direction: column; gap: 2px; }
.cu-sparkline { display: block; overflow: visible; margin-bottom: 2px; }
.db-cashup-label { font-size: 11px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.05em; }
.db-cashup-val { font-size: 26px; font-weight: 700; color: var(--brand-cream); font-variant-numeric: tabular-nums; }

@media (max-width: 768px), (max-height: 640px) and (pointer: coarse) {
  .db-greeting { font-size: 20px; }
  .db-row { grid-template-columns: 1fr; }
  .db-cashup-val { font-size: 22px; }
}


/* ==========================================================================
   V9 — DEPTH, MOTION & GOLD ACCENTS
   ========================================================================== */

/* Card lift on hover (interactive cards only) */
.db-card, .tr-module-card, .pipeline-card, .pipeline-list-item, .dashboard-card {
  transition: border-color var(--transition), transform var(--transition),
              box-shadow var(--transition), opacity var(--transition);
}
.db-card-link:hover, .tr-module-card:hover,
.pipeline-card:hover, .pipeline-list-item:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-lift);
  border-color: var(--border-strong);
}

/* Button press + primary glow */
.btn:active { transform: translateY(1px) scale(0.99); }
.btn-primary { box-shadow: 0 2px 10px rgba(138,25,21,0.35); }
.btn-primary:hover { box-shadow: 0 4px 16px rgba(138,25,21,0.5); }

/* Icon inside page-header buttons and card titles */
.icon-inline { display: inline-flex; vertical-align: -3px; }
.icon-inline svg { width: 17px; height: 17px; }
.db-card-title .icon-inline { color: var(--text-muted); }
.db-card-title .icon-inline svg { width: 16px; height: 16px; }

/* Gold accents — money + premium states */
.db-cashup-val { color: var(--gold-bright); }
.db-cashup-val.variance-negative { color: var(--danger); }
.db-cashup-val.variance-positive { color: var(--success); }
/* (dep-paid green + dep-due gold defined above; former gold-paid override removed) */
.db-greeting { position: relative; padding-bottom: 10px; }
.db-greeting::after {
  content: '';
  position: absolute; left: 0; bottom: 0;
  width: 44px; height: 2px; border-radius: 2px;
  background: linear-gradient(90deg, var(--gold), transparent);
}
.tr-complete-badge {
  background: var(--gold-dim); color: var(--gold-bright);
}
.tr-progress-done { color: var(--gold-bright); }

/* Skeleton shimmer for dashboard loading */
.skeleton {
  border-radius: var(--radius-lg);
  background: linear-gradient(100deg, var(--bg-elevated) 40%, var(--bg-elevated-2) 50%, var(--bg-elevated) 60%);
  background-size: 200% 100%;
  animation: skeleton-wave 1.4s ease infinite;
}
@keyframes skeleton-wave {
  0% { background-position: 120% 0; }
  100% { background-position: -80% 0; }
}

/* Smooth page-content entrance — opacity ONLY. Never animate transform here:
   a filled transform animation makes the element the containing block for
   position:fixed descendants in WebKit, silently breaking any fixed
   sheet/dock/button rendered inside main-content sections. */
@media (prefers-reduced-motion: no-preference) {
  .main-content > * { animation: rise-in 320ms ease both; }
  @keyframes rise-in {
    from { opacity: 0; }
    to   { opacity: 1; }
  }
}

/* Login polish */
.login-card { box-shadow: 0 24px 64px rgba(0,0,0,0.7), 0 0 0 1px rgba(201,169,97,0.08); }
.login-footer { letter-spacing: 0.04em; }


/* ==========================================================================
   V9.1 — PUNCH LIST
   ========================================================================== */

/* Pipeline stage colors */
.stage-pill {
  display: inline-block; padding: 3px 11px; border-radius: 999px;
  font-size: 11px; font-weight: 600; white-space: nowrap; letter-spacing: 0.02em;
}
.st-new               { background: rgba(96,165,250,0.15);  color: #93C5FD; }
.st-unqualified       { background: var(--bg-elevated-2);   color: var(--text-subtle); }
.st-didnt_reach       { background: rgba(251,146,60,0.15);  color: #FDBA74; }
.st-needs_followup    { background: rgba(251,191,36,0.15);  color: #FDE68A; }
.st-pending_decision  { background: rgba(167,139,250,0.15); color: #C4B5FD; }
.st-under_negotiation { background: rgba(34,211,238,0.13);  color: #67E8F9; }
.st-pre_agreed        { background: var(--gold-dim);        color: var(--gold-bright); }
.st-closed_won        { background: rgba(74,222,128,0.15);  color: #86EFAC; }
.st-closed_lost       { background: rgba(239,68,68,0.15);   color: #FCA5A5; }

/* Board column headers pick up the stage color as an underline */
.pipeline-column h3 { border-bottom: 2px solid var(--border); padding-bottom: 8px; }
.pipeline-column.col-new h3               { border-bottom-color: #60A5FA; }
.pipeline-column.col-unqualified h3       { border-bottom-color: var(--border-strong); }
.pipeline-column.col-didnt_reach h3       { border-bottom-color: #FB923C; }
.pipeline-column.col-needs_followup h3    { border-bottom-color: #FBBF24; }
.pipeline-column.col-pending_decision h3  { border-bottom-color: #A78BFA; }
.pipeline-column.col-under_negotiation h3 { border-bottom-color: #22D3EE; }
.pipeline-column.col-pre_agreed h3        { border-bottom-color: var(--gold); }
.pipeline-column.col-closed_won h3        { border-bottom-color: var(--success); }
.pipeline-column.col-closed_lost h3       { border-bottom-color: var(--danger); }

/* Small inline SVG icons in CRM cards */
.mini-icon { display: inline-flex; vertical-align: -2px; color: var(--text-subtle); }
.mini-icon svg { width: 13px; height: 13px; }

/* Cash up — denomination line totals: bold, display font, gold when non-zero */
.denom-grid .denom-line {
  font-family: var(--font-display);
  font-weight: 700; font-size: 15px;
  color: var(--gold-bright);
}
.denom-grid .denom-line.denom-zero { color: var(--text-subtle); font-weight: 500; }

/* Cash up — colored section identity + total moved below the grid */
.cashup-count-title { display: inline-flex; align-items: center; gap: 8px; }
.cashup-count-title::before {
  content: ''; width: 9px; height: 9px; border-radius: 50%;
}
.cashup-count-section:nth-of-type(1) .cashup-count-title::before { background: var(--info); box-shadow: 0 0 8px rgba(96,165,250,0.6); }
.cashup-count-section:nth-of-type(2) .cashup-count-title::before { background: var(--brand-red-bright); box-shadow: 0 0 8px rgba(196,58,52,0.6); }
.cashup-count-footer {
  display: flex; justify-content: space-between; align-items: center;
  margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--border);
  max-width: 440px;
}
.cashup-count-footer .label { font-size: 13px; color: var(--text-muted); font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; }
.cashup-count-footer .value {
  font-family: var(--font-display); font-size: 22px; font-weight: 700;
  color: var(--gold-bright); font-variant-numeric: tabular-nums;
}

/* Bar arrangements: yes/no + comment rows */
.bar-arr-row {
  display: grid; grid-template-columns: 130px 88px 1fr; gap: 8px;
  align-items: center; margin-bottom: 8px;
}
.bar-arr-row label { font-size: 13px; color: var(--text-muted); font-weight: 500; }
.bar-arr-row select, .bar-arr-row input {
  background: var(--bg-elevated-2); border: 1px solid var(--border);
  border-radius: var(--radius); color: var(--text);
  padding: 8px 10px; font-size: 13.5px; font-family: inherit; height: 38px;
}
.bar-arr-row select:focus, .bar-arr-row input:focus {
  outline: none; border-color: var(--brand-red); box-shadow: 0 0 0 3px rgba(138,25,21,0.2);
}
.bar-arr-row select.val-yes { color: var(--success); font-weight: 600; }
.bar-arr-row select.val-no  { color: var(--text-subtle); }
@media (max-width: 600px) {
  .bar-arr-row { grid-template-columns: 100px 80px 1fr; }
}

/* Stock + Allergens filter bar: chips container. */
.cat-filter-bar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px; margin-bottom: 10px;
}
.al-filter-bar {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 10px 12px;
  margin-bottom: 12px;
}

/* Search bar above the allergen matrix — same pill styling as CRM. */
.al-search {
  display: flex; align-items: center; gap: 8px;
  height: 44px; padding: 0 10px 0 14px;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: 999px;
  margin-bottom: 12px;
  max-width: 520px;
}
.al-search:focus-within {
  border-color: var(--brand-red);
  box-shadow: 0 0 0 3px rgba(138,25,21,0.14);
}
.al-search-icon { width: 16px; height: 16px; color: var(--text-subtle); flex: 0 0 auto; }
.al-search input {
  flex: 1; min-width: 0; height: 100%; padding: 0;
  background: transparent; border: none; outline: none;
  color: var(--text); font-family: inherit; font-size: 14px;
}
.al-search input::placeholder { color: var(--text-subtle); }
.al-search-clear {
  width: 26px; height: 26px; padding: 0;
  background: transparent; border: none;
  color: var(--text-subtle); cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; border-radius: 50%;
}
.al-search-clear svg { width: 12px; height: 12px; }
.al-search-clear:hover { color: var(--brand-cream); background: var(--bg-hover); }

/* Filter drop-up: floats above the Filters button in the dock */
.al-filter-popup {
  position: absolute;
  left: 0; right: 0;
  bottom: calc(100% + 8px);
  display: none;
  background: var(--bg-elevated);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: 12px 14px;
  z-index: 950;
  max-height: 60vh;
  overflow-y: auto;
  pointer-events: all;
}
.al-filter-popup.open { display: block; }
.al-filter-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; margin-bottom: 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border);
}
.al-filter-title {
  font-family: var(--font-display);
  font-size: 11px; font-weight: 600;
  color: var(--brand-cream);
  text-transform: uppercase; letter-spacing: 0.12em;
}
.al-filter-quick { display: flex; gap: 6px; }
.al-filter-popup .cat-chips { margin: 0; }
.al-filter-popup .cat-chip-all {
  border: 1px solid var(--brand-red);
  color: var(--brand-red-bright);
  background: transparent;
  font-weight: 600; letter-spacing: 0.04em;
}
.al-filter-popup .cat-chip-all:hover {
  background: rgba(138,25,21,0.12);
  color: var(--brand-cream);
}

/* Allergen row reorder cell + up/down buttons (edit mode) */
.al-order-cell {
  width: 72px; padding: 6px 6px !important;
  text-align: center; vertical-align: middle;
}
/* Delete ✕ sits on the LEFT and is as tall as the two arrows combined. */
.al-order-wrap {
  display: flex; flex-direction: row; gap: 8px; align-items: center; justify-content: center;
}
.al-order-btns {
  display: flex; flex-direction: column; gap: 2px; align-items: center;
}
.al-del-btn {
  width: 24px; height: 42px; padding: 0; flex-shrink: 0;
  background: var(--brand-red); color: var(--brand-cream);
  border: none; border-radius: 5px;
  cursor: pointer; font-size: 13px; line-height: 1;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background var(--transition);
}
.al-del-btn:hover { background: var(--brand-red-hover); }

/* Per-category "+ Add to X" row (edit mode) — mirrors the Stock par style. */
.al-cat-add-row td { padding: 4px 8px 10px !important; }
.al-cat-add-btn {
  display: inline-flex; align-items: center; gap: 4px;
  background: transparent; border: 1px dashed var(--brand-red);
  color: var(--brand-red-bright); cursor: pointer;
  font-family: inherit; font-size: 12px; font-weight: 600;
  padding: 6px 14px; border-radius: 6px;
  transition: background var(--transition), color var(--transition);
}
.al-cat-add-btn:hover { background: rgba(138,25,21,0.10); color: var(--brand-cream); }
.al-order-btn {
  width: 26px; height: 20px; padding: 0;
  background: var(--bg-elevated); color: var(--text-muted);
  border: 1px solid var(--border); border-radius: 4px;
  cursor: pointer; font-size: 10px; line-height: 1;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background var(--transition), color var(--transition), border-color var(--transition);
}
.al-order-btn:hover:not(:disabled) { background: var(--bg-hover); color: var(--brand-cream); border-color: var(--brand-red); }
.al-order-btn:disabled { opacity: 0.25; cursor: not-allowed; }

/* Allergen edit dock now stacks: filter/column/export row + edit row */
.al-dock-stack { display: flex; flex-direction: column; gap: 6px; width: 100%; }
.al-dock-row { display: flex; gap: 6px; align-items: stretch; }
.al-dock-row .btn { min-height: 42px; }

/* Column show/hide — body class per allergen field hides matching col */
body.al-hide-celery .al-col-celery,
body.al-hide-gluten .al-col-gluten,
body.al-hide-crustaceans .al-col-crustaceans,
body.al-hide-eggs .al-col-eggs,
body.al-hide-fish .al-col-fish,
body.al-hide-lupin .al-col-lupin,
body.al-hide-milk .al-col-milk,
body.al-hide-molluscs .al-col-molluscs,
body.al-hide-mustard .al-col-mustard,
body.al-hide-nuts .al-col-nuts,
body.al-hide-peanuts .al-col-peanuts,
body.al-hide-sesame .al-col-sesame,
body.al-hide-soya .al-col-soya,
body.al-hide-sulphur_dioxide .al-col-sulphur_dioxide {
  display: none;
}
.cat-modes {
  display: flex; gap: 2px;
  background: var(--bg-elevated); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 3px;
}
.cat-mode {
  border: none; background: none; padding: 5px 12px; border-radius: 6px;
  font-size: 12px; font-weight: 500; color: var(--text-muted);
  cursor: pointer; font-family: inherit;
  transition: background var(--transition), color var(--transition);
}
.cat-mode.active { background: var(--bg-elevated-2); color: var(--text); }
.cat-mode:hover:not(.active) { color: var(--text); }

/* pointer-events:all is REQUIRED, not decoration (trap #10). This wrap lives
   inside .mobile-action-bar, which is pointer-events:none so the transparent
   gradient does not swallow taps meant for the page — and only `.btn` is
   re-enabled. The menu's rows are bare <a>/<button>, not .btn, so they
   inherited `none` and every tap fell straight through to the page behind:
   Export opened a menu that could not be used. Set on the wrap so the whole
   subtree inherits it. */
.export-menu-wrap { position: relative; display: none; pointer-events: all; }
.export-menu {
  display: none; position: absolute; right: 0; top: calc(100% + 6px);
  min-width: 175px;
  background: var(--bg-elevated-2); border: 1px solid var(--border-strong);
  border-radius: 10px; box-shadow: var(--shadow-lg);
  z-index: 800; overflow: hidden;
}
.export-menu-wrap.open .export-menu { display: block; }
.export-menu a, .export-menu button {
  display: block; width: 100%; text-align: left;
  padding: 11px 14px; font-size: 13px; color: var(--text);
  background: none; border: none; border-bottom: 1px solid var(--border);
  cursor: pointer; text-decoration: none; font-family: inherit;
}
.export-menu a:last-child, .export-menu button:last-child { border-bottom: none; }
.export-menu a:hover, .export-menu button:hover { background: var(--bg-hover); }

/* Stock dock (inside mobile-action-bar): filters+export row, tabs+save row.
   pointer-events:all is REQUIRED — the action bar container is pointer-events:none
   and only .btn gets re-enabled by default; dock tabs/modes are not .btn. */
.stock-dock-row { display: flex; align-items: center; gap: 10px; pointer-events: all; }
.stock-dock-row + .stock-dock-row { margin-top: 8px; }
.stock-dock-tabs {
  display: flex; gap: 2px; flex-shrink: 0;
  background: var(--bg-elevated); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 3px;
}
.export-menu-wrap.drop-up .export-menu { top: auto; bottom: calc(100% + 6px); }

/* Stock edit mode: add-item bar + editable name cells */
.add-item-bar {
  display: flex; align-items: center; gap: 8px;
  background: var(--bg-elevated); border: 1px solid var(--gold-border);
  border-radius: var(--radius); padding: 8px 10px; margin-bottom: 10px;
}
.add-item-bar input {
  height: 38px; padding: 6px 10px; font-size: 13px;
  background: var(--bg-elevated-2); color: var(--text);
  border: 1px solid var(--border); border-radius: 6px; font-family: inherit;
  min-width: 0;
}
.add-item-bar #newItemName { flex: 2 1 140px; }
.add-item-bar #newItemCat { flex: 1 1 100px; }
.add-item-bar input:focus { outline: none; border-color: var(--brand-red); }
.stock-name-editwrap { display: flex; align-items: center; gap: 4px; }
.stock-name-editwrap .btn-remove { flex-shrink: 0; }
.stock-name-input {
  flex: 1; width: auto; min-width: 0;
  height: 30px; padding: 2px 6px; font-size: 12px;
  background: var(--bg-elevated-2); color: var(--text);
  border: 1px solid var(--border); border-radius: 5px; font-family: inherit;
}
.stock-name-input:focus { outline: none; border-color: var(--brand-red); }

/* Stock category filter chips */
.cat-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 14px; }
.cat-chip {
  background: var(--bg-elevated); border: 1px solid var(--border);
  color: var(--text-muted); border-radius: 999px;
  padding: 5px 12px; font-size: 12px; font-weight: 600; font-family: inherit;
  cursor: pointer;
  transition: background var(--transition), color var(--transition), border-color var(--transition);
}
.cat-chip:hover { color: var(--text); border-color: var(--border-strong); }
.cat-chip.active {
  background: rgba(138,25,21,0.18); border-color: var(--brand-red);
  color: var(--brand-cream);
}
.cat-chip-all.active { background: var(--brand-red); color: #fff; }
.cat-chip-toggle {
  background: var(--bg-elevated-2); border: 1px solid var(--border-strong);
  color: var(--text-muted); border-radius: 999px;
  padding: 5px 12px; font-size: 12px; font-weight: 600; font-family: inherit;
  cursor: pointer;
  transition: background var(--transition), color var(--transition);
}
.cat-chip-toggle:hover { background: var(--bg-hover); color: var(--text); }

@media (max-width: 768px), (max-height: 640px) and (pointer: coarse) {
  /* Desktop stock controls replaced entirely by the dock on mobile */
  #saveBtn, #editBtn, .stock-tab-bar, .stock-export-bar, .cat-filter-bar { display: none !important; }
  body:has(.stock-dock) .page-header { display: none; }
  body.can-manage .stock-dock .export-menu-wrap { display: block; }

  /* Dock sizing */
  .stock-dock .stock-dock-row .btn { width: auto; min-height: 46px; font-size: 13px; }
  .stock-dock .stock-dock-row .btn-success { flex: 1; font-size: 14px; }
  .stock-dock .stock-tab { min-height: 38px; padding: 8px 16px; }
  .stock-dock .cat-mode { padding: 7px 10px; font-size: 11.5px; }
  .stock-dock .cat-modes-dock { flex: 1; }
  .stock-dock .cat-modes-dock .cat-mode { flex: 1; }
  .stock-dock .export-menu-wrap .btn { min-height: 34px; font-size: 12px; }

  /* The category chips live INSIDE .stock-filter-popup now. This rule used to
     pin them as a full-bleed fixed sheet above the `.stock-dock` layout — and
     `.stock-dock` appears in NO page any more. All it still did was break the
     chips out of their popup and float them across the docked bar at a
     hardcoded 172px offset. Keep the scroll cap, drop the positioning. */
  #catChips { margin: 0; max-height: 38vh; overflow-y: auto; }

  /* Chips: smaller on mobile */
  .cat-chip, .cat-chip-toggle { font-size: 11px; padding: 4px 10px; }
}

/* Allergens edit-mode toggle */
.allergen-viewmode .allergen-editable { pointer-events: none; }
.allergen-viewcell { height: 36px; }
.allergen-dot {
  display: inline-block; width: 10px; height: 10px; border-radius: 50%;
  background: var(--gold); opacity: 0.85;
}
.mode-badge {
  font-size: 11px; font-weight: 600; padding: 4px 10px; border-radius: 999px;
  background: var(--bg-elevated-2); color: var(--text-muted);
  border: 1px solid var(--border); transition: background 0.2s, color 0.2s;
}
.mode-badge.editing { background: rgba(251,191,36,0.15); color: #FDE68A; border-color: rgba(251,191,36,0.4); }

/* ============================================================
   TRAINING V2 — card-deck reader, pathways, compliance
   ============================================================ */

/* --- Full-screen deck overlay --- */
.tr-deck {
  /* V16.10: ABOVE all page chrome (bottom nav 905-910, docks 900, modals
     1000/1200) — the reader owns the whole screen while open. */
  position: fixed; inset: 0; z-index: 1300;
  background: radial-gradient(120% 90% at 50% 0%, #17181B 0%, #0B0C0C 70%);
  display: none; flex-direction: column;
}
/* Belt & braces: page docks can't bleed through while reading */
body:has(.tr-deck.active) .mobile-action-bar { display: none !important; }
.tr-deck.active { display: flex; }
.tr-deck-top {
  flex: 0 0 auto; padding: 14px 18px 0;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.tr-deck-modtitle {
  font-size: 12px; font-weight: 600; color: var(--text-muted);
  text-transform: uppercase; letter-spacing: 0.08em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.tr-deck-close {
  flex: 0 0 auto; width: 34px; height: 34px; border-radius: 50%;
  background: var(--bg-elevated); border: 1px solid var(--border);
  color: var(--text-muted); font-size: 16px; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: border-color var(--transition), color var(--transition);
}
.tr-deck-close:hover { border-color: var(--brand-red); color: var(--text); }
.tr-deck-track {
  flex: 0 0 auto; height: 3px; margin: 12px 18px 0;
  background: var(--bg-elevated-2); border-radius: 2px; overflow: hidden;
}
.tr-deck-fill {
  height: 100%; background: linear-gradient(90deg, var(--brand-red-bright), var(--gold));
  border-radius: 2px; transition: width 0.28s ease;
}
.tr-deck-card-wrap {
  flex: 1 1 auto; overflow-y: auto; -webkit-overflow-scrolling: touch;
  display: flex; justify-content: center; padding: 24px 18px;
}
.tr-deck-card {
  width: 100%; max-width: 660px; margin: auto 0;
  background: var(--bg-elevated); border: 1px solid var(--border);
  border-radius: 16px; padding: 32px;
  box-shadow: 0 18px 44px rgba(0,0,0,0.45);
  animation: deckCardIn 0.26s ease both;
}
@keyframes deckCardIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .tr-deck-card { animation: none; } .tr-deck-fill { transition: none; } }
.tr-deck-kicker {
  font-size: 11px; font-weight: 700; color: var(--gold);
  text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: 10px;
}
.tr-deck-card h2 {
  font-family: var(--font-display); font-size: 25px; font-weight: 700;
  color: var(--brand-cream); margin: 0 0 14px; line-height: 1.25;
}
.tr-deck-content { font-size: 15px; line-height: 1.75; color: var(--text); }
.tr-deck-content b, .tr-deck-content strong { color: var(--brand-cream); }
.tr-deck-nav {
  flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 14px 18px calc(14px + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--border); background: rgba(11,12,12,0.85); backdrop-filter: blur(8px);
}
.tr-deck-count { font-size: 12px; color: var(--text-subtle); font-variant-numeric: tabular-nums; }
.tr-deck-nav .btn:disabled { opacity: 0.45; cursor: not-allowed; transform: none; box-shadow: none; }
@media (max-width: 768px), (max-height: 640px) and (pointer: coarse) {
  /* V16.10 phone reader: top-aligned card (no floating dead space), full
     width, safe-area aware top bar, thumb-size nav with Next dominant. */
  .tr-deck-top { padding: calc(10px + env(safe-area-inset-top, 0px)) 14px 0; }
  .tr-deck-track { margin: 10px 14px 0; height: 4px; }
  .tr-deck-card-wrap { padding: 14px 12px 18px; }
  .tr-deck-card {
    margin: 0 auto auto;
    padding: 22px 18px; border-radius: 14px;
  }
  .tr-deck-card h2 { font-size: 21px; }
  .tr-deck-content { font-size: 15px; line-height: 1.8; }
  .tr-deck-nav { gap: 10px; }
  .tr-deck-nav .btn { min-height: 54px; font-size: 15.5px; }
  #deckNext { flex: 1; }
  #deckBack { min-width: 96px; }
  .tr-deck-count { display: none; } /* progress bar carries this on phone */
  .tr-opt { padding: 15px 16px; font-size: 15px; }
  .tr-tf-row .tr-opt-tf { padding: 20px 10px; font-size: 16px; }
}
/* Swipe hint (V16.10): first content card shows a one-time nudge */
.tr-swipe-hint {
  /* Sits above the training deck's own nav row. Was 92px, tuned to the
     old 94px bottom bar; now tracks the bar so it can't drift. */
  position: absolute; bottom: calc(var(--nav-h) + 18px); left: 50%; transform: translateX(-50%);
  background: rgba(11,12,12,0.85); border: 1px solid var(--border);
  color: var(--text-muted); font-size: 12px; padding: 7px 14px;
  border-radius: 999px; pointer-events: none; white-space: nowrap;
  animation: hintFade 3.5s ease forwards;
}
@keyframes hintFade { 0%,70% { opacity: 1; } 100% { opacity: 0; } }

/* --- Check / quiz option buttons --- */
.tr-opt {
  display: flex; align-items: flex-start; gap: 10px; width: 100%;
  text-align: left; margin-top: 10px; padding: 13px 15px;
  background: var(--bg-elevated-2); border: 1.5px solid var(--border);
  border-radius: 10px; color: var(--text); font-size: 14.5px; line-height: 1.45;
  cursor: pointer; font-family: inherit;
  transition: border-color var(--transition), background var(--transition), transform var(--transition);
}
.tr-opt:hover:not(:disabled) { border-color: var(--border-strong); transform: translateY(-1px); }
.tr-opt:disabled { cursor: default; }
.tr-opt.sel { border-color: var(--gold); background: rgba(201,169,97,0.08); }
.tr-opt.right { border-color: var(--success); background: rgba(74,222,128,0.10); color: #C8F5D5; }
.tr-opt.wrong { border-color: var(--danger); background: rgba(239,68,68,0.10); color: #F5C8C8; }
.tr-opt.dim { opacity: 0.55; }
.tr-opt-mark { flex: 0 0 auto; font-weight: 700; }
.tr-expl {
  margin-top: 14px; padding: 12px 14px;
  border-left: 3px solid var(--gold); border-radius: 0 8px 8px 0;
  background: rgba(201,169,97,0.07); font-size: 13.5px; line-height: 1.6; color: var(--text);
}

/* --- V16.1 rich content, scenarios, true/false, callouts --- */
.tr-deck-content p { margin: 0 0 12px; }
.tr-deck-content p:last-child { margin-bottom: 0; }
.tr-bullets { margin: 0 0 12px; padding: 0; list-style: none; }
.tr-bullets li {
  position: relative; padding-left: 20px; margin-bottom: 8px; line-height: 1.6;
}
.tr-bullets li::before {
  content: ''; position: absolute; left: 2px; top: 0.62em;
  width: 7px; height: 7px; border-radius: 2px;
  background: var(--brand-red); transform: rotate(45deg);
}
/* Scenario situation box — reads like a story prompt above the question */
.tr-scenario-box {
  padding: 14px 16px; margin-bottom: 14px;
  background: var(--bg-elevated-2); border: 1px solid var(--border);
  border-left: 3px solid var(--info, #60A5FA); border-radius: 0 10px 10px 0;
  font-size: 14px; line-height: 1.65; color: var(--text); font-style: italic;
}
.tr-scenario-box p { margin: 0 0 8px; } .tr-scenario-box p:last-child { margin: 0; }
/* True/False pair renders side-by-side, big tap targets */
.tr-tf-row { display: flex; gap: 10px; margin-top: 10px; }
.tr-tf-row .tr-opt-tf { flex: 1; justify-content: center; text-align: center; padding: 18px 10px; font-weight: 600; font-size: 15px; margin-top: 0; }
/* Callout variants (kicker + content tint) */
.tr-deck-kicker.tr-card-tip { color: var(--gold-bright); }
.tr-deck-kicker.tr-card-warning { color: var(--brand-red-bright); }
.tr-deck-content.tr-card-tip {
  padding: 14px 16px; border-left: 3px solid var(--gold);
  background: rgba(201,169,97,0.06); border-radius: 0 10px 10px 0;
}
.tr-deck-content.tr-card-warning {
  padding: 14px 16px; border-left: 3px solid var(--brand-red);
  background: rgba(138,25,21,0.08); border-radius: 0 10px 10px 0;
}
.tr-expl .tr-expl-label {
  display: block; font-size: 10.5px; font-weight: 700; color: var(--gold);
  text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 4px;
}

/* --- Result review --- */
.tr-score-hero { text-align: center; padding: 8px 0 4px; }
.tr-score-num {
  font-family: var(--font-display); font-size: 54px; font-weight: 700; line-height: 1;
  color: var(--gold-bright);
}
.tr-score-num.fail { color: var(--text-muted); }
.tr-score-sub { font-size: 13px; color: var(--text-muted); margin-top: 6px; }
.tr-review-item { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--border); }
.tr-review-q { font-size: 14px; font-weight: 600; color: var(--brand-cream); margin-bottom: 8px; }
.tr-review-line { display: flex; gap: 8px; font-size: 13px; margin-top: 4px; align-items: baseline; }
.tr-review-line .ok { color: var(--success); font-weight: 700; }
.tr-review-line .bad { color: var(--danger); font-weight: 700; }

/* --- Sign-off card --- */
.tr-signoff-box {
  display: flex; gap: 10px; align-items: flex-start; margin-top: 18px;
  padding: 14px; background: var(--bg-elevated-2); border: 1px solid var(--border); border-radius: 10px;
  font-size: 14px; cursor: pointer;
}
.tr-signoff-box input { width: 18px; height: 18px; accent-color: var(--brand-red); flex: 0 0 auto; margin-top: 1px; }

/* --- Pathway journey (My Training) --- */
.tr-journey {
  background: var(--bg-elevated); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 20px; margin-bottom: 24px;
}
.tr-journey-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 4px; }
.tr-journey-title { font-family: var(--font-display); font-size: 18px; font-weight: 700; color: var(--brand-cream); }
.tr-journey-count { font-size: 12px; color: var(--gold); font-weight: 600; }
.tr-journey-desc { font-size: 12.5px; color: var(--text-muted); margin-bottom: 6px; }
.tr-phase-label {
  font-size: 10.5px; font-weight: 700; color: var(--gold);
  text-transform: uppercase; letter-spacing: 0.1em;
  margin: 16px 0 6px; display: flex; align-items: center; gap: 10px;
}
.tr-phase-label::after { content: ''; flex: 1; height: 1px; background: var(--border); }
.tr-step {
  display: flex; align-items: center; gap: 12px; padding: 10px 12px;
  border: 1px solid transparent; border-radius: 10px; cursor: pointer;
  transition: background var(--transition), border-color var(--transition);
}
.tr-step:hover { background: var(--bg-hover); }
.tr-step.next { border-color: var(--brand-red); background: rgba(196,58,52,0.06); }
.tr-step-bubble {
  flex: 0 0 28px; width: 28px; height: 28px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 700;
  background: var(--bg-elevated-2); border: 1.5px solid var(--border); color: var(--text-muted);
}
.tr-step.done .tr-step-bubble { background: var(--gold); border-color: var(--gold); color: #171310; }
.tr-step.next .tr-step-bubble { border-color: var(--brand-red-bright); color: var(--brand-cream); }
.tr-step-info { flex: 1; min-width: 0; }
.tr-step-title { font-size: 14px; font-weight: 600; color: var(--text); }
.tr-step.done .tr-step-title { color: var(--text-muted); }
.tr-step-meta { font-size: 11.5px; color: var(--text-subtle); margin-top: 1px; }
.tr-step-tag {
  flex: 0 0 auto; font-size: 10.5px; font-weight: 700; padding: 3px 9px; border-radius: 999px;
  background: rgba(196,58,52,0.15); color: #F0A9A5; text-transform: uppercase; letter-spacing: 0.05em;
}

/* --- Compliance chips --- */
.tr-chip.tr-expired { background: rgba(239,68,68,0.14); color: #FCA5A5; border-color: rgba(239,68,68,0.35); }
.tr-chip.tr-await { background: rgba(251,191,36,0.12); color: #FDE68A; border-color: rgba(251,191,36,0.3); }
.tr-chip.tr-verified { background: rgba(201,169,97,0.14); color: var(--gold-bright); border-color: rgba(201,169,97,0.35); }
.tr-cert-btn {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 11.5px; font-weight: 600; color: var(--gold);
  background: none; border: 1px solid rgba(201,169,97,0.4); border-radius: 999px;
  padding: 4px 11px; cursor: pointer;
  transition: background var(--transition), border-color var(--transition);
}
.tr-cert-btn:hover { background: rgba(201,169,97,0.1); border-color: var(--gold); }
.tr-step-cert { flex: 0 0 auto; }
/* On narrow phones, collapse the certificate button to just the icon */
@media (max-width: 480px) {
  .tr-step-cert { font-size: 0; padding: 6px 9px; }
  .tr-step-cert svg { margin-right: 0 !important; width: 14px; height: 14px; }
}

/* --- Matrix compliance states --- */
.tr-mx-expired { color: #FCA5A5 !important; }
.tr-mx-soon { color: #FDE68A !important; }
.tr-mx-verify {
  font-size: 10.5px; padding: 2px 8px; margin-top: 3px;
  background: var(--bg-elevated-2); border: 1px solid var(--border); border-radius: 6px;
  color: var(--text-muted); cursor: pointer;
}
.tr-mx-verify:hover { border-color: var(--gold); color: var(--gold); }

/* --- Pathway cards (Manage > Pathways) --- */
.tr-pw-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; }
.tr-pw-card {
  background: var(--bg-elevated); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 18px;
}
.tr-pw-name { font-family: var(--font-display); font-size: 16px; font-weight: 700; color: var(--brand-cream); }
.tr-pw-meta { font-size: 12px; color: var(--text-muted); margin: 6px 0 12px; }
.tr-pw-role {
  display: inline-block; font-size: 10.5px; font-weight: 700; padding: 3px 9px; border-radius: 999px;
  background: rgba(201,169,97,0.12); color: var(--gold); text-transform: uppercase; letter-spacing: 0.05em;
  margin-bottom: 8px;
}
.pw-step-row { display: flex; gap: 8px; align-items: center; margin-bottom: 8px; }
.pw-step-row select { flex: 1; }
.pw-step-row .pw-phase { flex: 0 0 130px; }
.pw-member-list { display: flex; flex-wrap: wrap; gap: 8px; }
.pw-member {
  display: inline-flex; align-items: center; gap: 6px; font-size: 13px;
  padding: 7px 12px; background: var(--bg-elevated-2);
  border: 1px solid var(--border); border-radius: 999px; cursor: pointer;
}
.pw-member input { width: 15px; height: 15px; accent-color: var(--brand-red); }

/* ============================================================
   FLOOR PLAN DESIGNER
   ============================================================ */
/* Plan list — clean cards: name + created date + Open/Delete */
.fp-plan-list { display: flex; flex-direction: column; gap: 8px; }
.fp-plan-card {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 14px 16px;
  cursor: pointer;
  transition: border-color var(--transition);
}
.fp-plan-card:hover { border-color: var(--brand-red); }
.fp-plan-name {
  font-family: var(--font-display);
  font-weight: 600; font-size: 15px; color: var(--brand-cream);
}
.fp-plan-date { font-size: 12px; color: var(--text-muted); margin-top: 2px; }
.fp-plan-actions { display: flex; gap: 8px; flex-shrink: 0; }

@media (max-width: 768px), (max-height: 640px) and (pointer: coarse) {
  #newPlanBtnTop { display: none; }
  .fp-plan-actions .btn { min-height: 40px; padding: 8px 14px; }
}

.fp-toolbar {
  display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
  background: var(--bg-elevated); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 10px 14px; margin-bottom: 16px;
}
.fp-palette, .fp-selected { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.fp-tool-label {
  font-size: 10.5px; font-weight: 700; color: var(--text-muted);
  text-transform: uppercase; letter-spacing: 0.08em;
}
.fp-dirty { font-size: 12px; color: #FDE68A; font-weight: 600; margin-left: auto; }

.fp-room-wrap { display: flex; justify-content: center; }
.fp-room {
  position: relative; width: 100%; max-width: 540px;
  aspect-ratio: 571 / 790;
  background: #F4EFE9;
  border: 4px solid var(--brand-red);
  border-radius: 4px;
  touch-action: none;
  user-select: none; -webkit-user-select: none;
  overflow: hidden;
}
.fp-fixture {
  position: absolute; background: #141414;
  display: flex; align-items: center; justify-content: center;
  pointer-events: none;
}
.fp-fixture span {
  color: #C4A5A0; font-family: var(--font-display); font-weight: 700;
  letter-spacing: 3px; transform: rotate(-90deg); white-space: nowrap;
}
.fp-kitchen { left: 0; top: 57%; width: 50%; height: 43%; }
.fp-kitchen span { font-size: 26px; }
.fp-bar { right: 0; top: 77%; width: 20%; height: 23%; }
.fp-bar span { font-size: 17px; }
/* Pass snaps to the top-right corner of the kitchen fixture. Kitchen
   spans left:0 → 50%, top:57% → 100%, so its top-right corner is at
   ~left:50%, top:57%. Pass drops just inside that corner. */
.fp-pass {
  position: absolute; left: 44%; top: 57.5%;
  background: #F4EFE9; border: 1px solid #141414; color: #141414;
  font-size: 7px; font-weight: 700; letter-spacing: 1px;
  padding: 10px 3px; writing-mode: vertical-rl;
  pointer-events: none;
}
.fp-table {
  position: absolute; cursor: grab;
  background: #3A3D40; border: 1.5px solid #23262A;
  display: flex; align-items: center; justify-content: center;
  border-radius: 2px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.25);
  transition: box-shadow var(--transition);
}
.fp-table:active { cursor: grabbing; }
.fp-table span {
  color: #fff; font-size: 9px; font-weight: 700;
  pointer-events: none; white-space: nowrap;
}
.fp-table.fp-sq { background: #6E7276; }
.fp-table.fp-r10 { background: #C4A5A0; border-color: #9a7d77; color: #3a2e2b; }
.fp-table.fp-r10 span { color: #3a2e2b; }
/* Centre icon distinguishing rect variants — scaled up so it reads across
   the room at a glance. r6 (dark grey) = X, r10 (beige/pink) = square. */
.fp-glyph {
  width: 85%; height: 85%; max-width: 34px; max-height: 24px;
  opacity: 0.9; pointer-events: none;
}
.fp-table.fp-r6 .fp-glyph { color: #f0f2f5; }
.fp-table.fp-r10 .fp-glyph { color: #3a2e2b; }

/* Add-table button: icon on top, small label under. Wraps to two lines. */
.fp-toolbar-add { justify-content: flex-start; gap: 10px; padding: 12px 14px; }
.fp-add-btn {
  display: inline-flex; flex-direction: column; align-items: center;
  gap: 4px; min-width: 78px;
  padding: 8px 10px; height: auto; min-height: 60px;
  font-size: 11px; letter-spacing: 0.02em;
}
.fp-add-btn svg { width: 28px; height: 22px; color: var(--text); }
.fp-add-btn:hover svg { color: var(--brand-cream); }

/* Editor dock: single row of equal-width icon buttons. Back, three add
   buttons, rotate, delete. 44px tall so hits are comfortable on phone.
   Hidden by default (inherits .mobile-action-bar); .dock-active reveals
   it, which JS toggles on show/hide of the editor view. */
.fp-editor-dock.dock-active { display: flex; gap: 6px; align-items: stretch; }
.fp-icon-btn {
  flex: 1; height: 44px; min-height: 44px;
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0 6px;
}
.fp-icon-btn svg { width: 20px; height: 20px; }
.fp-add-icon svg { width: 26px; height: 20px; }
.fp-icon-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.fp-hint {
  font-size: 12px; color: var(--text-subtle);
  text-align: center; margin-top: 10px;
}

/* List-view dock: single big + New Floor Plan CTA snapped above the
   bottom nav on phones, floating right of the sidebar on desktop.
   Same visibility rule as editor dock — .dock-active reveals it.
   Explicit :not(.dock-active) hide beats the mobile
   .mobile-action-bar { display:block } so only the active dock shows. */
.fp-list-dock:not(.dock-active),
.fp-editor-dock:not(.dock-active) { display: none !important; }
.fp-list-dock.dock-active { display: block; }
.fp-list-dock .btn { height: 48px; font-size: 15px; font-weight: 600; }

/* Desktop: dock floats to the right of the sidebar */
@media (min-width: 769px) and (min-height: 641px), (min-width: 769px) and (hover: hover) {
  .fp-editor-dock.dock-active,
  .fp-list-dock.dock-active {
    position: fixed;
    left: 270px; right: 24px;
    bottom: 20px;
    z-index: 900;
    padding: 10px 12px;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    max-width: none;
  }
}
.fp-table.fp-sel {
  border-color: var(--gold); box-shadow: 0 0 0 2.5px rgba(201,169,97,0.55), 0 4px 12px rgba(0,0,0,0.4);
  z-index: 5;
}
@media (max-width: 768px), (max-height: 640px) and (pointer: coarse) {
  .fp-room { max-width: 100%; }
  .fp-table span { font-size: 8px; }
  .fp-dirty { margin-left: 0; }
}

/* ============================================================
   PERFORMANCE HUB (manager/ops/admin)
   ============================================================ */
.perf-tabs {
  display: flex; gap: 2px; width: fit-content;
  background: var(--bg-elevated); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 3px; margin-bottom: 18px;
}
.perf-tab {
  border: none; background: none; padding: 7px 18px; border-radius: 6px;
  font-size: 13px; font-weight: 500; color: var(--text-muted);
  cursor: pointer; font-family: inherit;
  transition: background var(--transition), color var(--transition);
}
.perf-tab.active { background: var(--bg-elevated-2); color: var(--text); }
.perf-tab:hover:not(.active) { color: var(--text); }

.perf-panel {
  background: var(--bg-elevated); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: 16px 18px; margin-bottom: 16px;
}
.perf-panel-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 12px;
}
.perf-panel-head h3 {
  font-family: var(--font-display); font-size: 15px; font-weight: 600;
  color: var(--brand-cream);
}
.perf-muted { font-size: 12px; color: var(--text-muted); margin-left: 6px; }
.perf-empty {
  color: var(--text-muted); font-size: 13px;
  padding: 16px 18px;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  line-height: 1.55;
}

/* KPI cards */
.perf-kpi-row {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px; margin-bottom: 16px;
}
.perf-kpi {
  background: var(--bg-elevated); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: 14px 16px;
}
.perf-kpi-label {
  font-size: 10.5px; font-weight: 700; color: var(--text-muted);
  text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 6px;
}
.perf-kpi-value {
  font-family: var(--font-display); font-size: 24px; font-weight: 700;
  color: var(--gold-bright); line-height: 1.1;
  font-variant-numeric: tabular-nums;
}
.perf-kpi-value.perf-bad { color: var(--danger); }
.perf-kpi-value.perf-good { color: var(--success); }
.perf-delta { display: inline-block; font-size: 11px; font-weight: 700; margin-top: 4px; }
.perf-delta-up { color: var(--success); }
.perf-delta-down { color: var(--danger); }

/* Charts */
.perf-chart-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 0; }
.perf-chart { width: 100%; }
/* Aspect-locked so viewBox 100×44 renders without stretching text or bars.
   preserveAspectRatio="none" is safe now that container and viewBox match. */
.perf-svg { width: 100%; aspect-ratio: 100 / 44; height: auto; display: block; }
@media (max-width: 768px), (max-height: 640px) and (pointer: coarse) {
  .perf-chart-row { grid-template-columns: 1fr; }
  .perf-tabs { width: 100%; }
  .perf-tab { flex: 1; padding: 7px 6px; font-size: 12px; text-align: center; }
}

/* Staff snapshot + cards */
.perf-staff-table th, .perf-staff-table td { font-size: 13px; }
.perf-role-chip {
  display: inline-block; font-size: 9px; font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.05em; color: var(--text-muted);
  background: var(--bg-elevated-2); border: 1px solid var(--border);
  border-radius: 999px; padding: 1px 7px; margin-left: 0;
}
/* V16: stack the name over the role chip so they don't crowd on one line. */
.perf-name-cell { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; min-width: 0; }
.perf-name-cell .perf-name,
.perf-name-cell b { font-family: var(--font-display); font-weight: 600; color: var(--brand-cream); font-size: 13px; }
.perf-name-cell .perf-role-chip { align-self: flex-start; }
.perf-tbar {
  display: inline-block; vertical-align: middle;
  width: 70px; height: 6px; border-radius: 3px;
  background: var(--bg-elevated-2); overflow: hidden; margin-right: 6px;
}
.perf-tbar-fill { height: 100%; border-radius: 3px; }
.perf-tbar-label { font-size: 11px; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.star-on { color: var(--gold); }
.star-off { color: var(--border-strong); }

/* V15.13: Staff tab now uses the same table layout as the Overview
   snapshot so managers can scan Hours/Training/Reviews across the team
   like a rota grid. Old .perf-staff-cards grid retained for anything else
   that might use it. */
.perf-staff-grid .perf-staff-table th,
.perf-staff-grid .perf-staff-table td { padding: 10px 12px; vertical-align: middle; }
.perf-staff-grid .perf-staff-row + .perf-staff-row td { border-top: 1px solid var(--border); }
.perf-staff-grid .perf-staff-row:hover td { background: var(--bg-elevated-2); }
.perf-staff-name-cell b { font-family: var(--font-display); font-weight: 600; color: var(--brand-cream); }
.perf-staff-num { font-variant-numeric: tabular-nums; font-weight: 600; color: var(--brand-cream); }
.perf-staff-actions { text-align: right; white-space: nowrap; }
.perf-staff-actions .btn { margin-left: 6px; }
@media (max-width: 768px), (max-height: 640px) and (pointer: coarse) {
  .perf-staff-grid .perf-staff-table th,
  .perf-staff-grid .perf-staff-table td { padding: 8px 6px; font-size: 12px; }
  .perf-staff-actions .btn { padding: 5px 10px; font-size: 11.5px; }
}
.perf-staff-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.perf-staff-card {
  background: var(--bg-elevated); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: 14px 16px;
}
.perf-staff-card-head { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 10px; }
.perf-staff-name { font-family: var(--font-display); font-weight: 600; font-size: 15px; color: var(--brand-cream); }
.perf-staff-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 12px; font-size: 12px; }
.perf-staff-stats > div { display: flex; flex-direction: column; gap: 2px; }
.perf-staff-stats .perf-muted { margin-left: 0; font-size: 10px; text-transform: uppercase; letter-spacing: 0.05em; }

/* Shift log */
.perf-date-input {
  height: 38px; padding: 6px 10px; background: var(--bg-elevated-2);
  color: var(--text); border: 1px solid var(--border); border-radius: 6px;
  font-family: inherit; font-size: 13px;
}
.sl-section { border-top: 1px solid var(--border); padding-top: 14px; margin-top: 14px; }
.sl-section:first-of-type { border-top: none; padding-top: 0; margin-top: 0; }
.sl-section-title {
  font-size: 11px; font-weight: 700; color: var(--gold);
  text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 10px;
}
.sl-section .form-group textarea, .sl-section .form-group input {
  width: 100%; padding: 8px 10px; background: var(--bg-elevated-2);
  color: var(--text); border: 1px solid var(--border);
  border-radius: var(--radius); font-family: inherit; font-size: 14px;
}
.obs-add-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 8px; }
.obs-add-row select {
  height: 38px; min-width: 140px; padding: 4px 8px; background: var(--bg-elevated-2);
  color: var(--text); border: 1px solid var(--border); border-radius: 6px;
  font-family: inherit; font-size: 13px;
}
.obs-add-row input { flex: 1 1 180px; height: 38px; padding: 6px 10px; background: var(--bg-elevated-2);
  color: var(--text); border: 1px solid var(--border); border-radius: 6px; font-family: inherit; font-size: 13px; min-width: 0; }
.obs-stars { display: flex; gap: 2px; }
.star-btn {
  border: none; background: none; font-size: 20px; line-height: 1;
  color: var(--border-strong); cursor: pointer; padding: 2px;
  transition: color var(--transition);
}
.star-btn.on { color: var(--gold); }
.obs-item {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  background: var(--bg-elevated-2); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 8px 10px; margin-bottom: 6px; font-size: 13px;
}
.obs-item-note { color: var(--text-muted); flex: 1; }
.obs-item .btn-remove { margin-left: auto; }
.perf-obs-chip {
  font-size: 10.5px; font-weight: 600; color: var(--gold-bright);
  background: var(--gold-dim); border: 1px solid var(--gold-border);
  border-radius: 999px; padding: 2px 8px;
}

/* SWOT grid */
.swot-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.swot-cell { border-radius: var(--radius); padding: 10px 12px; border: 1px solid var(--border); }
.swot-cell label {
  display: block; font-size: 10.5px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 6px;
}
.swot-cell textarea {
  width: 100%; background: rgba(0,0,0,0.25); color: var(--text);
  border: 1px solid var(--border); border-radius: 6px;
  padding: 8px 10px; font-family: inherit; font-size: 13px; resize: vertical;
}
.swot-s { background: rgba(74,222,128,0.06); }  .swot-s label { color: var(--success); }
.swot-w { background: rgba(239,68,68,0.06); }   .swot-w label { color: var(--danger); }
.swot-o { background: rgba(96,165,250,0.06); }  .swot-o label { color: var(--info); }
.swot-h { background: rgba(251,191,36,0.06); }  .swot-h label { color: var(--warning); }
@media (max-width: 768px), (max-height: 640px) and (pointer: coarse) {
  .swot-grid { grid-template-columns: 1fr; }
}

/* Audits */
.audit-template-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; }
.audit-template-row .btn { min-height: 58px; line-height: 1.3; }
.audit-row {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  border-top: 1px solid var(--border); padding: 10px 2px; font-size: 13px;
}
.audit-row:first-child { border-top: none; }
.audit-badge {
  font-size: 12px; font-weight: 700; border-radius: 999px; padding: 3px 10px;
  font-variant-numeric: tabular-nums; flex-shrink: 0;
}
.audit-badge-good { background: rgba(74,222,128,0.14); color: #86EFAC; border: 1px solid rgba(74,222,128,0.3); }
.audit-badge-mid  { background: rgba(251,191,36,0.12); color: #FDE68A; border: 1px solid rgba(251,191,36,0.3); }
.audit-badge-bad  { background: rgba(239,68,68,0.12); color: #FCA5A5; border: 1px solid rgba(239,68,68,0.3); }
.audit-fails { font-size: 11.5px; color: var(--danger); margin-top: 4px; line-height: 1.5; }
.audit-check-row {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  border-top: 1px solid var(--border); padding: 9px 0;
}
.audit-check-row:first-child { border-top: none; }
.audit-check-label { flex: 1 1 200px; font-size: 13px; }
.audit-check-btns { display: flex; gap: 6px; flex-shrink: 0; }
.audit-ok, .audit-fail {
  border: 1px solid var(--border); background: var(--bg-elevated-2);
  color: var(--text-muted); border-radius: 6px; padding: 5px 14px;
  font-size: 12px; font-weight: 600; cursor: pointer; font-family: inherit;
}
.audit-ok.sel { background: rgba(74,222,128,0.16); border-color: var(--success); color: #86EFAC; }
.audit-fail.sel { background: rgba(239,68,68,0.16); border-color: var(--danger); color: #FCA5A5; }
.audit-check-note {
  flex: 1 1 100%; height: 34px; padding: 4px 10px;
  background: var(--bg-elevated-2); color: var(--text);
  border: 1px solid var(--border); border-radius: 6px;
  font-family: inherit; font-size: 12px;
}
.audit-score-live {
  font-family: var(--font-display); font-size: 22px; font-weight: 700;
  color: var(--gold-bright); height: 42px; display: flex; align-items: center;
}

/* Print: overview as a clean report */
@media print {
  .sidebar, .perf-tabs, .page-header .btn, .mobile-action-bar { display: none !important; }
  body, .app-container, .main-content, .perf-panel, .perf-kpi { background: #fff !important; color: #000 !important; border-color: #ccc !important; }
  .perf-kpi-value, .perf-panel-head h3 { color: #000 !important; }
  .app-container { padding: 0 !important; }
}

/* ============================================================
   V14 OPS TOOLKIT — Logbook + time clock
   ============================================================ */
/* Dashboard shift tools (clock in/out + notifications) */
.db-shift-tools {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  margin: -8px 0 22px;
}
.db-shift-tools #clockBtn { min-width: 130px; min-height: 46px; font-weight: 600; }
.db-clock-status { font-size: 13px; color: var(--text-muted); }

/* Handover composer */
.lb-composer textarea {
  width: 100%; padding: 10px 12px;
  background: var(--bg-elevated-2); color: var(--text);
  border: 1px solid var(--border); border-radius: var(--radius);
  font-family: inherit; font-size: 14px; resize: vertical;
}
.lb-composer-row { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 8px; }
.lb-check { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--text-muted); cursor: pointer; }
.lb-check input { accent-color: var(--brand-red); width: 15px; height: 15px; }

/* Board notes */
.lb-note {
  background: var(--bg-elevated); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: 12px 14px; margin-bottom: 8px;
}
.lb-note-unread { border-left: 3px solid var(--gold); }
.lb-note-announcement { border-color: var(--gold-border); background: linear-gradient(to right, var(--gold-dim), var(--bg-elevated) 40%); }
.lb-note-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 6px; }
.lb-note-meta { font-size: 11.5px; color: var(--text-subtle); }
.lb-note-actions { margin-left: auto; display: flex; gap: 6px; }
.lb-note-body { font-size: 14px; line-height: 1.55; }
.lb-pin {
  font-size: 9.5px; font-weight: 700; letter-spacing: 0.08em;
  color: var(--brand-cream); background: var(--brand-red);
  border-radius: 4px; padding: 2px 6px;
}
.lb-ann-tag {
  font-size: 9.5px; font-weight: 700; letter-spacing: 0.08em;
  color: var(--gold-bright); border: 1px solid var(--gold-border);
  border-radius: 4px; padding: 2px 6px;
}
.lb-read-btn { color: var(--gold-bright); border: 1px solid var(--gold-border); border-radius: 5px; background: none; cursor: pointer; font-size: 11px; padding: 2px 8px; font-family: inherit; }

/* Incidents */
.lb-incident { padding: 12px 14px; }
.lb-sev {
  font-size: 10px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase;
  border-radius: 999px; padding: 2px 8px;
}
.lb-sev-minor    { background: var(--bg-elevated-2); color: var(--text-muted); border: 1px solid var(--border); }
.lb-sev-moderate { background: rgba(251,191,36,0.12); color: #FDE68A; border: 1px solid rgba(251,191,36,0.3); }
.lb-sev-serious  { background: rgba(239,68,68,0.12); color: #FCA5A5; border: 1px solid rgba(239,68,68,0.3); }
.lb-sev-riddor   { background: var(--danger); color: #fff; border: 1px solid var(--danger); }
.lb-inc-line { font-size: 12.5px; color: var(--text-muted); margin-top: 4px; }
.lb-inc-line b { color: var(--text); font-weight: 600; }

/* Maintenance */
.lb-maint { padding: 12px 14px; }
.lb-maint-fixed { opacity: 0.6; }
.lb-prio {
  font-size: 10px; font-weight: 700; letter-spacing: 0.05em;
  border-radius: 999px; padding: 2px 8px;
}
.lb-prio-low    { background: var(--bg-elevated-2); color: var(--text-subtle); border: 1px solid var(--border); }
.lb-prio-normal { background: var(--bg-elevated-2); color: var(--text-muted); border: 1px solid var(--border-strong); }
.lb-prio-urgent { background: var(--danger); color: #fff; }
.lb-status { font-size: 11px; font-weight: 600; }
.lb-status-open { color: var(--warning); }
.lb-status-in_progress { color: var(--info); }
.lb-status-fixed { color: var(--success); }
.lb-maint-actions { display: flex; gap: 8px; margin-top: 8px; }

/* Add buttons: inline on desktop, docked bar on mobile */
.lb-desktop-add { margin-top: 4px; }
@media (max-width: 768px), (max-height: 640px) and (pointer: coarse) {
  .lb-desktop-add { display: none; }
  .db-shift-tools #clockBtn { flex: 1; }
}

/* ============================================================
   V15 CRM CARD REDESIGN — pipeline card + list item shared body
   ============================================================ */
/* V16.13.1: round delete button pinned top-right of the contact card
   (same affordance as shift cancellation on the rota). Cards need
   position:relative to anchor it; name keeps clear of it. */
.pipeline-card, .pipeline-list-item { position: relative; }
.pc-del {
  position: absolute; top: 10px; right: 10px;
  width: 26px; height: 26px; border-radius: 50%; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--bg-elevated-2); border: 1px solid var(--border);
  color: var(--text-subtle); font-size: 12px; line-height: 1; cursor: pointer;
  transition: color var(--transition), border-color var(--transition), background var(--transition);
  z-index: 2;
}
.pc-del:hover { color: #FCA5A5; border-color: var(--danger); background: rgba(239,68,68,0.10); }
.pc-name { padding-right: 34px; }

/* V16.13 card layout — name leads; one bottom strip carries
   [stage + PH/LG + session] left and the deposit chip right. */
.pc-strip {
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px; margin-top: 2px;
}
.pc-strip-left { display: inline-flex; align-items: center; gap: 6px; min-width: 0; flex-wrap: wrap; }
.pc-strip .stage-pill { font-size: 9.5px; padding: 3px 9px; border-radius: 999px; }
.pc-strip .dep-chip { flex-shrink: 0; font-size: 11px; padding: 3px 10px; border-radius: 999px;
  min-width: 46px; text-align: center; font-variant-numeric: tabular-nums; }
.pc-indicators { display: inline-flex; align-items: center; gap: 6px; flex-shrink: 0; }
.pc-indicators .type-badge { flex-shrink: 0; }
.pc-indicators .mini-icon { flex-shrink: 0; }
.pc-name { font-family: var(--font-display); font-weight: 600; font-size: 15.5px; color: var(--brand-cream);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-bottom: 6px; }
.pc-meta { font-size: 12px; color: var(--text-muted); display: flex; align-items: center; flex-wrap: wrap; gap: 4px 6px; margin-bottom: 8px; }
.pc-meta .mini-icon { color: var(--text-subtle); }
.pc-meta .pc-min { color: var(--text); font-variant-numeric: tabular-nums; }
.pc-dot { color: var(--text-subtle); opacity: 0.6; margin: 0 2px; }
.pc-chips { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 2px; }
.pc-chips .dep-chip { font-size: 11px; padding: 3px 10px; border-radius: 999px;
  min-width: 46px; text-align: center; font-variant-numeric: tabular-nums; }

/* Phone row: number on the left, Call + Copy action buttons on the right. */
.pc-phone {
  display: flex; align-items: center; gap: 8px; margin-bottom: 8px;
  padding: 6px 6px 6px 10px; border-radius: 8px;
  background: var(--bg-elevated); border: 1px solid var(--border);
}
.pc-phone-num {
  flex: 1; min-width: 0; font-size: 12.5px; color: var(--text);
  font-variant-numeric: tabular-nums; letter-spacing: 0.01em;
  display: inline-flex; align-items: center; gap: 6px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pc-phone-num .mini-icon { color: var(--text-subtle); flex-shrink: 0; }
.pc-tel-btn {
  position: relative; flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 8px; padding: 0;
  border: 1px solid var(--border-strong); cursor: pointer;
  color: var(--brand-cream); text-decoration: none;
  transition: background var(--transition), border-color var(--transition), color var(--transition);
}
.pc-tel-btn svg { width: 16px; height: 16px; }
a.pc-tel-btn { background: var(--brand-red); border-color: var(--brand-red); }
a.pc-tel-btn:hover { background: var(--brand-red-hover); }
.pc-copy-btn { background: var(--bg-elevated-2); color: var(--text-muted); }
.pc-copy-btn:hover { color: var(--text); border-color: var(--brand-red); }
.pc-copy-ok {
  position: absolute; inset: 0; display: none; align-items: center; justify-content: center;
  background: var(--success); color: #05210f; border-radius: 7px;
}
.pc-copy-ok svg { width: 16px; height: 16px; }
.pc-copy-btn.copied .pc-copy-ok { display: inline-flex; }

.pc-followup {
  margin-top: 8px; padding: 5px 9px; border-radius: 6px;
  font-size: 11.5px; font-weight: 500;
  background: var(--bg-elevated-2); color: var(--text-muted);
  border-left: 3px solid var(--border-strong);
  display: flex; align-items: center; gap: 6px;
}
.pc-fu-soon { border-left-color: var(--gold); color: var(--gold-bright); }
.pc-fu-today { border-left-color: var(--warning); color: #FDE68A; background: rgba(251,191,36,0.08); }
.pc-fu-overdue { border-left-color: var(--danger); color: #FCA5A5; background: rgba(239,68,68,0.08); }

.fu-badge {
  font-size: 9.5px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase;
  border-radius: 999px; padding: 2px 7px; margin-left: auto;
}
.fu-today { background: var(--warning); color: #000; }
.fu-overdue { background: var(--danger); color: #fff; }

/* Tab count pill (Follow-ups) */
.crm-count-pill {
  display: inline-block; font-size: 10px; font-weight: 700;
  min-width: 18px; padding: 0 6px; border-radius: 999px;
  background: var(--bg-elevated-2); color: var(--text-muted);
  margin-left: 4px; vertical-align: middle;
}
.crm-count-pill:empty { display: none; }
.crm-count-hot { background: var(--danger); color: #fff; }

/* Session filter styling */
#sessionFilter button { padding: 5px 10px; font-size: 12px; }

/* Nav unread badge (currently used by Logbook link, extensible) */
.nav-unread {
  display: inline-block; font-size: 10px; font-weight: 700;
  min-width: 18px; padding: 0 6px; height: 16px; line-height: 16px;
  border-radius: 999px; background: var(--brand-red); color: #fff;
  margin-left: 4px; vertical-align: middle;
  text-align: center;
}

/* ============================================================
   V15.5 POLISH — audit template editor, staff trend hint, logbook toolbar
   ============================================================ */
.tpl-block {
  background: var(--bg-elevated-2); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 12px 14px; margin-bottom: 12px;
}
.tpl-head { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.tpl-label {
  flex: 1; min-width: 0; height: 38px; padding: 6px 10px; font-size: 15px;
  font-family: var(--font-display); font-weight: 600; color: var(--brand-cream);
  background: var(--bg-elevated); border: 1px solid var(--border);
  border-radius: 6px;
}
.tpl-label:focus { outline: none; border-color: var(--brand-red); }
.tpl-items { display: flex; flex-direction: column; gap: 6px; }
.tpl-item-row { display: flex; gap: 6px; align-items: center; }
.tpl-item-row input {
  flex: 1; height: 34px; padding: 4px 10px; font-size: 13px;
  background: var(--bg-elevated); color: var(--text);
  border: 1px solid var(--border); border-radius: 5px; font-family: inherit;
}
.tpl-item-row input:focus { outline: none; border-color: var(--brand-red); }

.perf-staff-card { transition: border-color var(--transition); }
.perf-staff-card:hover { border-color: var(--brand-red); }
.perf-staff-card-hint {
  font-size: 10.5px; color: var(--text-subtle); text-align: right;
  margin-top: 8px; letter-spacing: 0.04em;
}

.lb-toolbar {
  display: flex; justify-content: flex-end; gap: 8px;
  margin-bottom: 10px;
}

/* ============================================================
   V15.6 CLOCK MANAGER — table + week nav + flags
   ============================================================ */
.clock-week-nav {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  font-family: var(--font-display); font-weight: 600; color: var(--brand-cream);
}
.clock-week-nav > span { min-width: 180px; text-align: center; font-size: 14px; }

.clock-mgr-table th, .clock-mgr-table td { font-size: 13px; }
.clock-mgr-table .mono { font-variant-numeric: tabular-nums; font-family: 'Space Grotesk', ui-monospace, monospace; }
.clock-mgr-table tr:hover { background: var(--bg-hover); }

.clock-flag {
  display: inline-block;
  font-size: 10px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase;
  border-radius: 999px; padding: 2px 8px; margin-right: 4px;
}
.clock-flag-warn { background: rgba(251,191,36,0.14); color: #FDE68A; border: 1px solid rgba(251,191,36,0.35); }
.clock-flag-open { background: rgba(74,222,128,0.14); color: #86EFAC; border: 1px solid rgba(74,222,128,0.35); }
.clock-flag-edit { background: var(--bg-elevated-2); color: var(--text-muted); border: 1px solid var(--border); }

@media (max-width: 768px), (max-height: 640px) and (pointer: coarse) {
  .clock-mgr-table th:nth-child(5), .clock-mgr-table td:nth-child(5),
  .clock-mgr-table th:nth-child(8), .clock-mgr-table td:nth-child(8) { display: none; }
  .clock-mgr-table th, .clock-mgr-table td { font-size: 11.5px; padding: 6px 5px; }
  .clock-week-nav > span { min-width: 130px; font-size: 12.5px; }
}

/* ============================================================
   V15.7 TIME OFF — request cards + status pills
   ============================================================ */
/* ============================================================
   REPORTING (Incidents + Maintenance under one nav item)
   ============================================================ */
.rp-tabs {
  display: flex; gap: 6px; margin-bottom: 14px;
  background: var(--bg-elevated); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 4px; width: fit-content;
}
.rp-tab {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 14px; border-radius: 6px;
  background: none; border: none; cursor: pointer;
  font-family: inherit; font-size: 13px; font-weight: 500;
  color: var(--text-muted);
  transition: background var(--transition), color var(--transition);
}
.rp-tab svg { width: 16px; height: 16px; }
.rp-tab:hover { color: var(--text); }
.rp-tab.active {
  background: var(--brand-red); color: var(--brand-cream);
}
/* Modal body inside the reporting forms — no extra inset (was 22px left/right
   which mis-aligned the fields against the modal header + footer). Ensures
   the modal has a single consistent inner width from top to bottom. */
.rp-modal-body {
  padding: 0;
  background: var(--bg-elevated);
}
.rp-modal-body .perf-panel-head {
  margin-top: 18px !important;
  padding-top: 14px;
  border-top: 1px solid var(--border);
}
.rp-modal-body .perf-panel-head:first-child {
  margin-top: 4px !important;
  border-top: none;
  padding-top: 0;
}
.rp-modal-body .perf-panel-head h3 {
  font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--brand-red);
}
/* Textareas in the form need a fixed base height so the row heights stay
   symmetric across two-column form-rows and content doesn't clip. */
.rp-modal-body textarea {
  min-height: 68px; line-height: 1.5;
}

.rp-follow, .rp-safety {
  font-size: 10px; font-weight: 700; letter-spacing: 0.05em;
  padding: 2px 8px; border-radius: 4px;
  background: rgba(201,169,97,0.16); color: var(--gold-bright);
  border: 1px solid rgba(201,169,97,0.4);
  text-transform: uppercase;
}
.rp-safety {
  background: rgba(196,58,52,0.14); color: var(--brand-red-bright);
  border-color: rgba(196,58,52,0.4);
}
.rp-maint-meta {
  display: flex; flex-wrap: wrap; gap: 12px 18px;
  margin-top: 8px; padding-top: 8px;
  border-top: 1px dotted var(--border);
  font-size: 12px; color: var(--text-muted);
}
.rp-maint-meta b {
  color: var(--text-subtle); font-weight: 500;
  text-transform: uppercase; font-size: 10px; letter-spacing: 0.08em;
  margin-right: 4px;
}

/* Holiday allowance card — total / booked / pending / remaining */
.hol-allowance-card {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 14px 18px;
  margin-bottom: 14px;
}
/* V16.4.1: stats centred per Filip */
.hol-allow-stat {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  text-align: center;
}
.hol-allow-label {
  font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--text-subtle); font-weight: 600;
}
.hol-allow-val {
  font-family: var(--font-display);
  font-size: 22px; font-weight: 700; color: var(--brand-cream);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.hol-allow-remaining .hol-allow-val { color: var(--gold-bright); }
@media (max-width: 640px) {
  .hol-allowance-card { grid-template-columns: repeat(4, 1fr); gap: 8px; padding: 12px; }
  .hol-allow-val { font-size: 18px; }
  .hol-allow-label { font-size: 9.5px; letter-spacing: 0.06em; }
}

/* View toggle: List / Calendar */
.hol-view-toggle {
  display: inline-flex; gap: 4px;
  background: var(--bg-elevated); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 3px;
  margin-bottom: 14px;
}
.hol-view-btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 14px; border-radius: 6px;
  background: none; border: none; cursor: pointer;
  font-family: inherit; font-size: 13px; font-weight: 500;
  color: var(--text-muted);
  transition: background var(--transition), color var(--transition);
}
.hol-view-btn svg { width: 15px; height: 15px; }
.hol-view-btn:hover { color: var(--text); }
.hol-view-btn.active {
  background: var(--brand-red); color: var(--brand-cream);
}

/* List section (chip filters + request cards) sits below the calendar.
   V16.4.1: 32px was double every other gap on the page (summary→calendar
   is 16px, chips→cards is 14px) — normalised to the same rhythm. */
.hol-list-wrap { margin-top: 16px; }

/* Chip row (My Leave filters) */
/* Equal-width columns so All/Pending/Booked/Rejected/Past have identical
   spacing regardless of label length or presence of a count pill. */
.hol-chips {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
  margin-bottom: 14px;
}
@media (max-width: 480px) {
  .hol-chips { grid-template-columns: repeat(3, 1fr); }
}
.hol-chip {
  border: 1px solid var(--border);
  background: var(--bg-elevated);
  color: var(--text-muted);
  border-radius: 999px;
  padding: 6px 14px;
  font-size: 12.5px; font-weight: 500;
  cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  font-family: inherit;
  transition: background var(--transition), color var(--transition);
}
.hol-chip:hover { color: var(--text); border-color: var(--border-strong); }
.hol-chip.active {
  background: var(--success); color: #06210f; border-color: var(--success);
  font-weight: 700;
}
.hol-chip-count {
  background: rgba(0,0,0,0.2);
  padding: 1px 8px; border-radius: 999px;
  font-size: 11px; font-weight: 700;
}
.hol-chip.active .hol-chip-count { background: rgba(0,0,0,0.28); color: #06210f; }

/* Calendar */
.hol-cal-wrap {
  background: var(--bg-elevated); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: 14px 16px;
  margin-top: 16px;
}
.hol-cal-head {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 12px;
}
.hol-cal-title {
  font-family: var(--font-display); font-weight: 600; font-size: 15.5px;
  color: var(--brand-cream);
  flex: 1; text-align: center;
}
.hol-cal-head .hol-today { margin-left: auto; }

.hol-cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
}
.hol-cal-dow {
  font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--text-subtle);
  text-align: center; padding: 4px 0;
}
.hol-cal-cell {
  aspect-ratio: 1 / 1;
  min-height: 48px;
  background: var(--bg-elevated-2);
  border: 1px solid var(--border);
  border-radius: 8px;
  display: flex; flex-direction: column; align-items: center; justify-content: space-between;
  padding: 5px 4px 6px;
  cursor: pointer;
  font-family: inherit;
  color: var(--text);
  transition: border-color var(--transition), background var(--transition);
}
.hol-cal-cell.hol-cal-empty { visibility: hidden; cursor: default; }
.hol-cal-cell:hover:not(.hol-cal-empty) { border-color: var(--brand-red); }
.hol-cal-cell.hol-cal-today { border-color: var(--gold); background: rgba(201,169,97,0.10); }
.hol-cal-cell.hol-cal-has { background: rgba(74,222,128,0.06); border-color: rgba(74,222,128,0.35); }
.hol-cal-cell.hol-cal-selected {
  background: rgba(138,25,21,0.24);
  border-color: var(--brand-red-bright);
  box-shadow: 0 0 0 2px rgba(201,169,97,0.55) inset;
}

/* Docked "Request N days" bar — appears when the user selects calendar days */
.hol-select-dock {
  display: flex !important; gap: 8px; align-items: stretch;
  position: fixed;
  left: 260px; right: 20px;
  bottom: 20px;
  padding: 0;
  z-index: 910;
  max-width: none;
}
.hol-select-dock .btn { min-height: 48px; }
/* V16: scale the "Request N days" label down — 15px was too large for the
   longer "N selected days" text and crowded the button. */
.hol-select-dock .btn-primary { font-size: 13px; padding-left: 10px; padding-right: 10px; }
@media (max-width: 768px), (max-height: 640px) and (pointer: coarse) {
  .hol-select-dock {
    left: 12px; right: 12px;
    bottom: var(--nav-h);
  }
  .hol-select-dock .btn-primary { font-size: 13px; }
}
.hol-cal-num {
  font-size: 12.5px; font-weight: 600;
  color: var(--text);
}
.hol-cal-cell.hol-cal-today .hol-cal-num { color: var(--gold-bright); }
.hol-cal-dots {
  display: flex; flex-wrap: wrap; gap: 2px;
  justify-content: center;
  min-height: 8px;
}
.hol-cal-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: #999;
}
.hol-cal-dot.hol-status-approved { background: var(--success); }
/* V16.4.1: dark orange = day already booked by another staff member */
.hol-cal-dot.hol-status-others   { background: #C05A0E; }
/* V16.4.2: your own request awaiting approval — translucent gold ring
   ("alpha" gold): hollow = not yet confirmed, solid = confirmed. */
.hol-cal-dot.hol-status-mine-pending {
  background: rgba(201,169,97,0.30);
  border: 1.5px solid var(--gold-bright);
  box-sizing: border-box;
}
.hol-cal-dot.hol-status-pending  { background: var(--warning); }
.hol-cal-dot.hol-status-mine     {
  background: var(--brand-red-bright);
  box-shadow: 0 0 0 1.5px rgba(196,58,52,0.4);
}
.hol-cal-more { font-size: 9px; color: var(--text-muted); font-weight: 700; }

.hol-cal-legend {
  display: flex; gap: 14px; flex-wrap: wrap;
  margin-top: 12px; padding-top: 10px;
  border-top: 1px solid var(--border);
  font-size: 11.5px; color: var(--text-muted);
}
.hol-legend-item { display: inline-flex; align-items: center; gap: 6px; }
.hol-legend-dot {
  display: inline-block; width: 10px; height: 10px; border-radius: 50%;
}
.hol-legend-dot.hol-status-approved { background: var(--success); }
.hol-legend-dot.hol-status-others   { background: #C05A0E; }
.hol-legend-dot.hol-status-mine-pending {
  background: rgba(201,169,97,0.30);
  border: 1.5px solid var(--gold-bright);
  box-sizing: border-box;
}
.hol-legend-dot.hol-status-pending  { background: var(--warning); }
.hol-legend-dot.hol-status-mine     { background: var(--brand-red-bright); }

/* Day detail panel that pops up under the grid */
.hol-cal-detail {
  margin-top: 14px; padding: 12px 14px;
  background: var(--bg-elevated-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.hol-day-head {
  font-family: var(--font-display); font-weight: 600; font-size: 14px;
  color: var(--brand-cream);
  margin-bottom: 8px;
}
.hol-day-list { display: flex; flex-direction: column; gap: 6px; }
.hol-day-item {
  display: flex; align-items: center; gap: 8px;
  font-size: 12.5px; color: var(--text);
}
.hol-day-type { color: var(--text-muted); }
.hol-day-status {
  margin-left: auto;
  font-size: 10px; font-weight: 700; letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 2px 8px; border-radius: 999px;
}
.hol-day-status.hol-pending  { background: rgba(251,191,36,0.14); color: #FDE68A; border: 1px solid rgba(251,191,36,0.35); }
.hol-day-status.hol-approved { background: rgba(74,222,128,0.14); color: #86EFAC; border: 1px solid rgba(74,222,128,0.35); }
.hol-day-status.hol-rejected { background: rgba(239,68,68,0.14); color: #FCA5A5; border: 1px solid rgba(239,68,68,0.35); }

.hol-card {
  background: var(--bg-elevated); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: 14px 18px; margin-bottom: 10px;
}
.hol-card.hol-status-pending  { border-left: 3px solid var(--warning); }
.hol-card.hol-status-approved { border-left: 3px solid var(--success); }
.hol-card.hol-status-rejected { border-left: 3px solid var(--danger); }
.hol-card-head {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 6px;
}
.hol-status {
  font-size: 10px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase;
  border-radius: 999px; padding: 2px 8px;
}
.hol-pending  { background: rgba(251,191,36,0.14); color: #FDE68A; border: 1px solid rgba(251,191,36,0.35); }
.hol-approved { background: rgba(74,222,128,0.14); color: #86EFAC; border: 1px solid rgba(74,222,128,0.35); }
.hol-rejected { background: rgba(239,68,68,0.14); color: #FCA5A5; border: 1px solid rgba(239,68,68,0.35); }
.hol-days {
  font-family: var(--font-display); font-size: 13px; font-weight: 700;
  color: var(--gold-bright); font-variant-numeric: tabular-nums;
}
.hol-user { font-size: 12px; color: var(--text-muted); margin-left: auto; }
.hol-card-range {
  font-family: var(--font-display); font-size: 14.5px; font-weight: 600;
  color: var(--brand-cream); margin-bottom: 6px;
}
.hol-card-notes {
  font-size: 13px; color: var(--text-muted); margin-bottom: 6px; line-height: 1.5;
}
.hol-decision-line {
  font-size: 12px; color: var(--text-subtle);
  border-top: 1px solid var(--border); padding-top: 6px; margin-top: 6px;
}
.hol-card-actions { display: flex; gap: 8px; margin-top: 8px; }

#allFilter {
  height: 34px; padding: 4px 10px; background: var(--bg-elevated-2);
  color: var(--text); border: 1px solid var(--border); border-radius: 6px;
  font-family: inherit; font-size: 13px;
}

/* ============================================================
   V15.9 SETTINGS + FIRST-LOGIN + STAFF ONBOARDING
   ============================================================ */
.settings-first-login {
  background: linear-gradient(to right, rgba(239,68,68,0.16), rgba(239,68,68,0.06));
  border: 1px solid rgba(239,68,68,0.35);
  border-left: 3px solid var(--danger);
  color: #FCA5A5;
  border-radius: var(--radius-lg);
  padding: 12px 16px;
  margin-bottom: 16px;
  font-size: 13.5px;
  line-height: 1.5;
}
.settings-first-login strong {
  display: block; color: #fff; font-family: var(--font-display);
  font-weight: 600; font-size: 15px; margin-bottom: 2px;
}
.settings-logout-block {
  border-top: 1px solid var(--border);
  padding-top: 20px; margin-top: 8px; margin-bottom: 32px;
}
.settings-logout-block .btn { min-height: 48px; }

/* Dashboard docked "Set your password" bar — same footprint as other action bars */
.first-login-bar .btn {
  width: 100%; min-height: 52px; font-size: 15px; font-weight: 600;
  background: var(--danger); border: none;
  display: flex; align-items: center; justify-content: center;
  text-decoration: none;
}

/* ============================================================
   V15.12 — Rota mobile dock (per Filip reference)
   Row 1: [icons pill] [◀] [•] [▶] dd/mm - dd/mm [BADGE]
   Row 2 (mgr+, view): [Edit Rota] [£ Rates]
   Row 2 (mgr+, edit): [Save Draft] [Publish Rota]
   ============================================================ */
.rota-dock-row { display: flex; gap: 6px; pointer-events: all; align-items: stretch; }
.rota-dock-row + .rota-dock-row { margin-top: 6px; }
.rota-dock-row .btn { flex: 1; min-height: 42px; font-size: 13px; font-weight: 600; white-space: nowrap; padding: 6px 8px; }

.rota-dock-toprow { align-items: center; }
.rd-viewicons {
  display: flex; gap: 2px; padding: 3px;
  background: var(--bg-elevated); border: 1px solid var(--border);
  border-radius: var(--radius); flex-shrink: 0;
}
.rd-viewicon {
  width: 34px; height: 34px; border: none; background: none;
  border-radius: 6px; color: var(--text-muted); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background var(--transition), color var(--transition);
  padding: 0;
}
.rd-viewicon svg { width: 18px; height: 18px; }
.rd-viewicon.active { background: var(--bg-elevated-2); color: var(--brand-cream); }
.rd-viewicon:hover:not(.active) { color: var(--text); }

/* Arrows narrow, dot in the middle (jump-to-current), then date range + badge */
.rota-dock-toprow .rd-arrow { flex: 0 0 36px; min-height: 40px; font-size: 14px; padding: 0; }
.rota-dock-toprow .rd-dot {
  flex: 0 0 30px; min-height: 40px; font-size: 22px; line-height: 1;
  padding: 0; color: var(--text-muted);
}
.rota-dock-toprow .rd-dot:hover { color: var(--brand-cream); }
.rd-weeklabel {
  flex: 1; min-width: 0; text-align: center;
  font-family: var(--font-display); font-weight: 600; font-size: 12.5px;
  color: var(--brand-cream); align-self: center;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  font-variant-numeric: tabular-nums;
  padding: 0 4px;
}
.rota-dock-toprow .rota-pub-badge { flex-shrink: 0; align-self: center; }

.rota-dock-actions .btn-primary { flex: 2; }
.rota-dock-actions .btn-secondary { flex: 1; }
.rota-dock-editactions .btn { flex: 1; }

/* Desktop weekbar dot button */
.rd-arrow-btn { min-width: 42px; }
.rd-dot-btn {
  min-width: 30px; font-size: 22px; line-height: 1;
  color: var(--text-muted); padding: 0 10px;
}
.rd-dot-btn:hover { color: var(--brand-cream); }

/* Every cell wraps its content in .rota-cell-inner — a flex box with a
   fixed min-height that guarantees every cell (name, day chip, empty)
   is exactly the same height. Table's own vertical-align does the rest. */
.rota-table tbody td { padding: 3px 8px; vertical-align: middle; }
body.rota-edit-mode .rota-table tbody td { padding: 3px 6px; }
.rota-name-cell, .rota-hrs-cell { line-height: 1.15; }

.rota-cell-inner {
  display: flex; align-items: center; justify-content: center;
  min-height: 44px;    /* matches .rota-shift height so all rows == chip footprint */
  width: 100%;
}
.rota-cell-inner-left { justify-content: flex-start; }
body.rota-edit-mode .rota-cell-inner {
  min-height: 57px;   /* two 27px inputs + 3px gap */
}
@media (max-width: 768px), (max-height: 640px) and (pointer: coarse) {
  .rota-cell-inner { min-height: 40px; }
  body.rota-edit-mode .rota-cell-inner { min-height: 54px; }
}

/* Header day cells: centered date under the day name (Filip's request) */
.rota-day-th { text-align: center; }
.rota-day-th-date { display: block; font-weight: 400; font-size: 11px; color: var(--text-muted); margin-top: 2px; }
.rota-day-td { text-align: center; }
.rota-day-td > .rota-shift { display: inline-flex; margin-left: auto; margin-right: auto; }

/* Inline edit cell — two time inputs stacked, sized to fit inside 57px
   inner (27 + 3 gap + 27 = 57). Fits desktop and mobile without overlap. */
.rota-edit-cell {
  display: flex; flex-direction: column; gap: 3px;
  width: 100%;
  position: relative;
}
.rota-edit-cell input[type="time"] {
  width: 100%; height: 27px;
  padding: 0 4px;
  font-size: 12.5px; font-weight: 600;
  background: var(--bg-elevated-2); color: var(--text);
  border: 1px solid var(--border); border-radius: 5px;
  font-family: inherit;
  font-variant-numeric: tabular-nums;
  min-width: 0;
  box-sizing: border-box;
  -webkit-appearance: none; appearance: none;
  line-height: 1;
  text-align: center;
}
.rota-edit-cell input[type="time"]::-webkit-datetime-edit,
.rota-edit-cell input[type="time"]::-webkit-datetime-edit-fields-wrapper {
  text-align: center;
  justify-content: center;
  width: 100%;
}

/* "×" clear button pinned to the top-right corner. Only visible once the
   cell has values — an empty cell doesn't need clearing. */
.rota-edit-clear {
  position: absolute;
  top: -7px; right: -7px;
  width: 20px; height: 20px;
  border-radius: 50%;
  background: var(--danger); color: #fff;
  border: 2px solid var(--bg-elevated);
  font-size: 14px; font-weight: 700; line-height: 1;
  cursor: pointer; padding: 0;
  display: none;
  align-items: center; justify-content: center;
  z-index: 5;
}
.rota-edit-cell:not(.rota-edit-empty) .rota-edit-clear { display: flex; }
/* Darkened --danger, not the flat-UI 'pomegranate' #C0392B it used to be —
   that literal appeared exactly once and belonged to no palette. */
.rota-edit-clear:hover { background: #DC2626; }
.rota-edit-cell input[type="time"]:focus {
  outline: none; border-color: var(--brand-red);
  box-shadow: 0 0 0 2px rgba(138,25,21,0.25);
}

/* Safari renders empty time inputs with a "12:30" ghost / picker default.
   These pseudo-elements silence it so blank cells actually LOOK blank. */
.rota-edit-cell.rota-edit-empty input[type="time"]::-webkit-datetime-edit,
.rota-edit-cell.rota-edit-empty input[type="time"]::-webkit-datetime-edit-hour-field,
.rota-edit-cell.rota-edit-empty input[type="time"]::-webkit-datetime-edit-minute-field,
.rota-edit-cell.rota-edit-empty input[type="time"]::-webkit-datetime-edit-ampm-field,
.rota-edit-cell.rota-edit-empty input[type="time"]::-webkit-datetime-edit-text {
  color: transparent;
}
.rota-edit-cell.rota-edit-empty input[type="time"]:focus::-webkit-datetime-edit,
.rota-edit-cell.rota-edit-empty input[type="time"]:focus::-webkit-datetime-edit-hour-field,
.rota-edit-cell.rota-edit-empty input[type="time"]:focus::-webkit-datetime-edit-minute-field {
  color: inherit;
}
/* Also dim the border so empty reads as "no shift here" at a glance */
.rota-edit-cell.rota-edit-empty input[type="time"] { border-style: dashed; opacity: 0.6; }
.rota-edit-cell.rota-edit-empty input[type="time"]:focus { opacity: 1; border-style: solid; }

/* Chrome/Edge time picker chevron indicator — hide so height is predictable */
.rota-edit-cell input[type="time"]::-webkit-calendar-picker-indicator {
  opacity: 0.4; padding: 0; margin-left: 2px;
}

.rota-edit-cell.rota-edit-dirty input[type="time"] {
  border-color: var(--gold);
}
.rota-edit-cell.rota-edit-partial input[type="time"] {
  border-color: var(--danger);
}

@media (max-width: 768px), (max-height: 640px) and (pointer: coarse) {
  /* Hide desktop-header rota controls on mobile — dock owns them all */
  #addShiftBtn, #editRotaBtn, #saveDraftBtn, #publishRotaBtn, #ratesBtn,
  .rota-weekbar, #rotaViewToggle { display: none !important; }
  /* Reserve bottom space so the rota grid never sits under the dock */
  body:has(.rota-dock) .main-content { padding-bottom: 160px; }
  .rota-grid-container { overflow-x: auto; }
}

/* ============================================================
   V15.11 — Rota publish state chip + dock status row + menu lines
   ============================================================ */
.rota-pub-badge {
  display: inline-block;
  font-size: 10px; font-weight: 800; letter-spacing: 0.08em;
  padding: 3px 10px; border-radius: 999px;
  font-family: var(--font-body);
}
.rota-pub-draft {
  background: rgba(251,191,36,0.16);
  color: #FDE68A;
  border: 1px solid rgba(251,191,36,0.4);
}
.rota-pub-published {
  background: rgba(74,222,128,0.14);
  color: #86EFAC;
  border: 1px solid rgba(74,222,128,0.35);
}

/* Menu status line — bigger, load-bearing for the manager decision */
.rota-pub-line {
  padding: 10px 14px;
  border-radius: var(--radius);
  font-size: 13px; font-weight: 600;
}
.rota-pub-draft-line {
  background: rgba(251,191,36,0.10);
  color: #FDE68A;
  border-left: 3px solid var(--warning);
}
.rota-pub-published-line {
  background: rgba(74,222,128,0.10);
  color: #86EFAC;
  border-left: 3px solid var(--success);
}

/* rota-dock-status was replaced by the inline badge in the top row (V15.12) */

/* ============================================================
   V15.15 — Dashboard clock+break dock, Breaks module
   ============================================================ */
/* Dashboard dock: mobile only. Desktop mirrors these buttons inside the
   greeting area via .db-shift-tools-desktop. */
.dashboard-dock-row {
  display: flex; gap: 8px; pointer-events: all;
}
.dashboard-dock-row .btn {
  flex: 1; min-height: 50px; font-size: 14px; font-weight: 600;
  white-space: nowrap;
}
#dashboardDock #clockStatus {
  pointer-events: all;
  font-size: 12px; color: var(--text-muted);
  padding: 0 4px 6px;
  text-align: center;
  min-height: 16px;
}
@media (min-width: 769px) {
  /* Desktop: hide the dock (buttons live inline in the greeting area) */
  #dashboardDock { display: none; }
}
@media (max-width: 768px), (max-height: 640px) and (pointer: coarse) {
  /* Mobile: hide the desktop-inline shift tools; dock is the source of truth */
  .db-shift-tools-desktop { display: none; }
  body:has(#dashboardDock) .main-content { padding-bottom: 130px; }
}

/* Ops Now strip (V16.12) — manager dashboard live counts */
.ops-now { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 16px; }
.ops-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 14px; border-radius: 999px; text-decoration: none;
  background: var(--bg-elevated); border: 1px solid var(--border);
  color: var(--text-muted); font-size: 12.5px; font-weight: 600;
  transition: border-color var(--transition), color var(--transition);
}
.ops-chip b { color: var(--brand-cream); font-size: 14px; font-variant-numeric: tabular-nums; }
.ops-chip:hover { border-color: var(--brand-red); color: var(--text); }
.ops-chip-hot { border-color: rgba(196,58,52,0.55); background: rgba(138,25,21,0.12); color: #FCA5A5; }
.ops-chip-hot b { color: #FCA5A5; }
.ops-chip-gold { border-color: rgba(201,169,97,0.5); color: var(--gold-bright); }
.ops-chip-gold b { color: var(--gold-bright); }

/* Warning button (used for "Finish Break" active state) */
.btn-warning {
  background: var(--warning); color: #000;
  border: 1px solid var(--warning);
}
/* Darkened --warning (#FBBF24) rather than the unrelated #F5A623 amber. */
.btn-warning:hover { background: #F59E0B; }

/* Gold button (V16.3) — Start Break. Brand gold, dark text. */
.btn-gold {
  background: var(--gold); color: #14100a;
  border: 1px solid var(--gold);
  font-weight: 700;
}
.btn-gold:hover { background: var(--gold-bright); border-color: var(--gold-bright); }

/* V16.3: bigger dock buttons + status chips (shift timer / break timer) */
.dashboard-dock-row .btn { min-height: 58px; font-size: 15.5px; border-radius: 14px; }
.db-chip-row {
  display: flex; gap: 6px; flex-wrap: wrap; justify-content: center;
  pointer-events: none;
}
.db-chip {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 11.5px; font-weight: 600; letter-spacing: 0.02em;
  padding: 4px 10px; border-radius: 999px;
  background: var(--bg-elevated); border: 1px solid var(--border);
  color: var(--text); font-variant-numeric: tabular-nums;
}
.db-chip-shift { color: var(--success); border-color: rgba(74,222,128,0.35); }
.db-chip-timer { color: var(--brand-cream); }
.db-chip-break { color: var(--gold-bright); border-color: rgba(201,169,97,0.45); }
#dashboardDock #clockStatus { padding-bottom: 8px; }

/* Breaks module — totals panel + open-break marker */
.breaks-totals {
  background: var(--bg-elevated); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 12px 16px; margin-bottom: 14px;
}
.breaks-totals:empty { display: none; }
.breaks-totals-summary {
  display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap;
  margin-bottom: 10px;
}
.breaks-totals-label {
  font-size: 11px; font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--text-muted);
}
.breaks-totals-value {
  font-family: var(--font-display); font-size: 22px; font-weight: 700;
  color: var(--gold-bright); font-variant-numeric: tabular-nums;
}
.breaks-totals-count { font-size: 12px; color: var(--text-subtle); }
.breaks-totals-pills { display: flex; flex-wrap: wrap; gap: 6px; }
.breaks-total-pill {
  font-size: 12px; padding: 4px 10px; border-radius: 999px;
  background: var(--bg-elevated-2); border: 1px solid var(--border);
  color: var(--text-muted);
}
.breaks-total-pill b { color: var(--brand-cream); font-variant-numeric: tabular-nums; }
.breaks-open {
  color: var(--warning); font-weight: 700; font-size: 11px;
  letter-spacing: 0.06em; text-transform: uppercase;
}

/* ==========================================================================
   V15.13 — LANDSCAPE PHONE DEFENSIVE OVERRIDE
   Belt-and-braces: any landscape touch device up to ~1000px wide gets the
   mobile shell (no left sidebar; burger top-left, bottom nav). Fixes iOS
   Safari cases where dynamic address-bar changes push the reported height
   above the 640px gate mid-session.
   ========================================================================== */
@media (orientation: landscape) and (pointer: coarse) and (max-width: 1000px) {
  .app-container { flex-direction: column; }
  .sidebar {
    position: fixed; inset: 0;
    width: auto; height: auto;
    border: none; background: transparent;
    z-index: 910; overflow: visible; padding: 0;
    pointer-events: none;
  }
  .sidebar-header, .sidebar-footer { display: none; }
}

/* ── Menu → OpenTable plain-text export overlay ─────────────────── */
.menu-export-overlay{
  position:fixed; inset:0; z-index:1000;
  background:rgba(0,0,0,.55);
  display:flex; align-items:center; justify-content:center;
  padding:20px;
}
.menu-export-box{
  width:100%; max-width:460px; max-height:85vh; overflow:auto;
  background:var(--bg-elevated); color:var(--text);
  border:1px solid var(--border); border-radius:var(--radius-lg);
  box-shadow:var(--shadow-lg); padding:18px;
}
.menu-export-head{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:10px; }
.menu-export-head strong{ font-family:var(--font-display); font-size:1.05rem; }
.menu-export-hint{ color:var(--text-muted); font-size:.85rem; margin:0 0 12px; }
.menu-export-text{
  width:100%; min-height:220px; resize:vertical;
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-size:.9rem; line-height:1.5;
  background:var(--bg); color:var(--text);
  border:1px solid var(--border-strong); border-radius:var(--radius); padding:12px;
  white-space:pre;
}
.menu-export-actions{ display:flex; justify-content:flex-end; gap:10px; margin-top:14px; }

/* ==== Interactive training minigames (V20) ========================== */
.tr-ic { width: 22px; height: 22px; flex: 0 0 auto; }
.tr-kick-game { color: var(--gold); }
.tr-mini-instr {
  margin: 6px 0 14px; font-size: 13.5px; line-height: 1.5; color: var(--text-muted);
}
.tr-mini-done {
  margin-top: 16px; padding: 11px 14px; border-radius: 10px; text-align: center;
  font-weight: 600; font-size: 14px; color: #C8F5D5;
  background: rgba(74,222,128,0.10); border: 1.5px solid var(--success);
  animation: trPop .32s cubic-bezier(.2,.9,.3,1.3);
}

/* --- Match: two tap columns, colour swatch chips --- */
.tr-match { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 6px; }
.tr-match-col { display: flex; flex-direction: column; gap: 9px; }
.tr-match-chip {
  display: flex; align-items: center; gap: 9px; width: 100%; min-height: 48px;
  text-align: left; padding: 10px 12px; font-family: inherit; font-size: 13.5px; line-height: 1.35;
  color: var(--text); background: var(--bg-elevated-2); border: 1.5px solid var(--border);
  border-radius: 10px; cursor: pointer;
  transition: border-color var(--transition), background var(--transition), transform var(--transition), opacity var(--transition);
}
.tr-match-chip:hover:not(:disabled) { border-color: var(--border-strong); transform: translateY(-1px); }
.tr-match-chip.sel { border-color: var(--gold); background: rgba(201,169,97,0.12); box-shadow: 0 0 0 3px rgba(201,169,97,0.15); }
.tr-match-chip.done { border-color: var(--success); background: rgba(74,222,128,0.10); color: #C8F5D5; cursor: default; opacity: .92; }
.tr-match-chip.wrong { border-color: var(--danger); background: rgba(239,68,68,0.12); animation: trShake .4s; }
.tr-swatch { flex: 0 0 auto; width: 20px; height: 30px; border-radius: 4px; border: 1px solid rgba(255,255,255,0.35); box-shadow: inset 0 -6px 0 rgba(0,0,0,0.18); }
.tr-match-ic { flex: 0 0 auto; color: var(--gold); }

/* --- Tapfind: hazard tile grid --- */
.tr-find-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; margin-top: 6px; }
.tr-find-tile {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: 7px;
  padding: 14px 8px; font-family: inherit; color: var(--text);
  background: var(--bg-elevated-2); border: 1.5px solid var(--border); border-radius: 12px;
  cursor: pointer; transition: border-color var(--transition), background var(--transition), transform var(--transition), opacity var(--transition);
}
.tr-find-tile:hover:not(:disabled) { border-color: var(--border-strong); transform: translateY(-2px); }
.tr-find-tile .tr-find-ic { color: var(--text-muted); transition: color var(--transition); }
.tr-find-ic .tr-ic { width: 28px; height: 28px; }
.tr-find-label { font-size: 12px; line-height: 1.25; text-align: center; }
.tr-find-tile.flagged { border-color: var(--gold); background: rgba(201,169,97,0.12); }
.tr-find-tile.flagged .tr-find-ic { color: var(--gold); }
.tr-find-tile.right { border-color: var(--success); background: rgba(74,222,128,0.12); animation: trPop .3s; }
.tr-find-tile.right .tr-find-ic { color: var(--success); }
.tr-find-tile.miss { border-color: var(--danger); border-style: dashed; }
.tr-find-tile.miss .tr-find-ic { color: var(--danger); }
.tr-find-tile.wrong { border-color: var(--danger); background: rgba(239,68,68,0.08); opacity: .7; }
.tr-find-tile.dim { opacity: .45; }
.tr-find-mark { position: absolute; top: 5px; right: 7px; font-weight: 800; font-size: 14px; }
.tr-find-mark.ok { color: var(--success); }
.tr-find-mark.no { color: var(--danger); }
.tr-find-notes { margin-top: 14px; display: flex; flex-direction: column; gap: 8px; }
.tr-find-note {
  display: flex; align-items: flex-start; gap: 9px; padding: 10px 12px;
  background: rgba(201,169,97,0.07); border-left: 3px solid var(--gold); border-radius: 0 8px 8px 0;
  font-size: 13px; line-height: 1.5;
}
.tr-find-note .tr-ic { width: 18px; height: 18px; color: var(--gold); margin-top: 1px; }

/* --- Order: numbered slots + tap pool --- */
.tr-order-slots { display: flex; flex-direction: column; gap: 8px; margin-top: 4px; min-height: 40px; }
.tr-slot {
  display: flex; align-items: center; gap: 10px; padding: 11px 13px; border-radius: 10px;
  font-size: 13.5px; line-height: 1.4; border: 1.5px solid var(--success);
  background: rgba(74,222,128,0.10); color: #C8F5D5; animation: trPop .28s cubic-bezier(.2,.9,.3,1.3);
}
.tr-slot.empty { border-style: dashed; border-color: var(--border-strong); background: transparent; color: var(--text-muted); justify-content: center; animation: none; }
.tr-slot-n { flex: 0 0 auto; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; font-size: 12.5px; background: var(--success); color: #06210f; }
.tr-order-pool { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 14px; }
.tr-order-chip {
  padding: 11px 14px; font-family: inherit; font-size: 13.5px; color: var(--text);
  background: var(--bg-elevated-2); border: 1.5px solid var(--border); border-radius: 999px;
  cursor: pointer; transition: border-color var(--transition), background var(--transition), transform var(--transition);
}
.tr-order-chip:hover { border-color: var(--gold); transform: translateY(-1px); }
.tr-order-chip.wrong { border-color: var(--danger); background: rgba(239,68,68,0.12); animation: trShake .4s; }

@keyframes trPop { 0% { transform: scale(.9); opacity: .4; } 100% { transform: scale(1); opacity: 1; } }
@keyframes trShake { 0%,100% { transform: translateX(0); } 20% { transform: translateX(-5px); } 40% { transform: translateX(5px); } 60% { transform: translateX(-3px); } 80% { transform: translateX(3px); } }
@media (prefers-reduced-motion: reduce) {
  .tr-mini-done, .tr-find-tile.right, .tr-slot, .tr-match-chip.wrong, .tr-order-chip.wrong { animation: none; }
}
@media (max-width: 768px), (max-height: 640px) and (pointer: coarse) {
  .tr-match-chip { font-size: 12.5px; padding: 9px 10px; }
  .tr-find-label { font-size: 11px; }
  .tr-find-ic .tr-ic { width: 24px; height: 24px; }
}

/* ==== Illustrated match + first-card nav (V20.1) ==================== */
.tr-deck-nav.tr-nav-solo #deckNext { flex: 1; }

.tr-match-figchip { flex-direction: column; align-items: center; gap: 6px; padding: 12px 8px 10px; text-align: center; position: relative; min-height: 0; }
.tr-match-fig { display: block; line-height: 0; }
.tr-ext-svg { width: 52px; height: auto; display: block; filter: drop-shadow(0 3px 5px rgba(0,0,0,.38)); transition: transform var(--transition); }
.tr-match-figchip:hover:not(:disabled) .tr-ext-svg { transform: translateY(-2px) scale(1.04); }
.tr-match-figchip.sel { border-color: var(--gold); background: rgba(201,169,97,0.12); box-shadow: 0 0 0 3px rgba(201,169,97,0.18); }
.tr-match-figchip.sel .tr-ext-svg { transform: scale(1.07); }
.tr-match-figchip.done { opacity: 1; }
.tr-match-figchip.done .tr-ext-svg { animation: trBounce .55s; }
.tr-match-cap { font-size: 12px; line-height: 1.2; font-weight: 600; }
.tr-match-tick { position: absolute; top: 6px; right: 8px; width: 20px; height: 20px; border-radius: 50%; background: var(--success); color: #06210f; font-weight: 800; font-size: 12px; display: grid; place-items: center; animation: trPop .3s; z-index: 2; }
.tr-match-tick.sm { position: static; width: 18px; height: 18px; display: inline-grid; margin-right: 5px; vertical-align: middle; flex: 0 0 auto; }
.tr-match-right { align-items: center; }
@keyframes trBounce { 0% { transform: scale(1); } 30% { transform: translateY(-6px) scale(1.08); } 55% { transform: translateY(0) scale(.97); } 100% { transform: scale(1); } }
@media (prefers-reduced-motion: reduce) { .tr-match-figchip.done .tr-ext-svg, .tr-match-tick { animation: none; } }
@media (max-width: 768px), (max-height: 640px) and (pointer: coarse) { .tr-ext-svg { width: 46px; } }

/* Match: right-hand "use" boxes all equal height (tallest wins) */
.tr-match-col-right { display: grid; grid-auto-rows: 1fr; align-content: start; gap: 9px; }
.tr-match-col-right .tr-match-right { height: 100%; justify-content: center; text-align: center; }

/* ==== V22.9 — top app-bar (burger + Settings) + left slide-in drawer =====
   Burger returns to the top-left and Settings to the top-right (3-part app
   bar); the menu is a slim drawer that slides in from the left over a dimmed
   backdrop. Open it via the burger, close via the backdrop, or swipe from the
   left edge (auth.js, best-effort on iOS). Replaces the V22.3 full-screen
   tile menu. Desktop keeps the inline sidebar list — all drawer rules are
   inside the mobile media query. */
.nav-backdrop { display: none; }
.nav-drawer-head { display: none; }

@media (max-width: 768px), (max-height: 640px) and (pointer: coarse) {
  /* --- Top app bar: settings | greeting/title | burger (V24.7) --- */
  .mobile-topbar .nav-burger,
  .mobile-topbar .topbar-settings {
    display: flex; align-items: center; justify-content: center;
    flex: 0 0 42px; width: 42px; height: 42px;
    color: var(--text-muted); cursor: pointer; text-decoration: none;
    border-radius: 10px; -webkit-tap-highlight-color: transparent;
    transition: color var(--transition), background var(--transition);
  }
  /* Nudge the glyphs inward so they line up with the content cards' 14px edge
     (icon is centred in a 42px box → 9.5px inset; +5px margin ≈ 14px).
     Swapped with the controls: the burger is on the RIGHT now. */
  .mobile-topbar .topbar-settings { margin-left: 5px; }
  .mobile-topbar .nav-burger { margin-right: 5px; }
  .mobile-topbar .nav-burger svg,
  .mobile-topbar .topbar-settings svg { width: 23px; height: 23px; }
  .mobile-topbar .nav-burger:active,
  .mobile-topbar .topbar-settings:active { color: var(--text); background: var(--bg-hover); }
  .mobile-topbar .topbar-title { flex: 1 1 auto; text-align: center; min-width: 0; }
  /* Burger turns red while the drawer is open */
  .sidebar:has(.nav-more-check:checked) .nav-burger { color: var(--brand-red-bright); }

  /* --- Dimmed backdrop + page lock --- */
  .nav-backdrop {
    display: block; position: fixed; inset: 0; z-index: 1290;
    background: rgba(0,0,0,0.55); opacity: 0; pointer-events: none;
    transition: opacity 240ms ease;
  }
  .sidebar:has(.nav-more-check:checked) .nav-backdrop { opacity: 1; pointer-events: auto; }
  body:has(.nav-more-check:checked) { overflow: hidden; }

  /* --- RIGHT slide-in drawer (V24.7) ---
     Moved from the left so the module list falls under the thumb of a
     right-handed grip, and so the LEFT edge is free to mean "back" — which
     is what iOS already trains people to expect there.

     Width is capped at half the viewport: the drawer must never cross the
     centre line, so the page stays visible behind it. */
  .nav-popup {
    display: flex; flex-direction: column;
    position: fixed; top: 0; right: 0; bottom: 0; left: auto;
    width: 50vw; max-width: 340px;   /* never crosses the centre line */
    transform: translateX(100%);
    transition: transform 260ms cubic-bezier(.4, 0, .2, 1);
    background: var(--bg-elevated);
    border: none; border-left: 1px solid var(--border-strong);
    border-radius: 0; box-shadow: -6px 0 30px rgba(0,0,0,0.55);
    z-index: 1300; padding: 0 0 calc(8px + env(safe-area-inset-bottom, 0px));
    overflow-y: auto; -webkit-overflow-scrolling: touch; pointer-events: auto;
  }
  .sidebar:has(.nav-more-check:checked) .nav-popup { transform: translateX(0); display: flex; }
  .sidebar:has(.nav-more-check:checked) .nav-popup::before { content: none; }

  /* Drawer brand header */
  .nav-drawer-head {
    display: flex; align-items: center; flex: 0 0 auto;
    padding: calc(14px + env(safe-area-inset-top, 0px)) 14px 11px;
    border-bottom: 1px solid var(--border); margin-bottom: 4px;
  }
  .nav-drawer-logo { height: 21px; width: auto; }

  /* Drawer list rows */
  .nav-popup-list { padding: 2px 6px; }
  .nav-popup-list li { margin: 0; }
  .nav-popup .nav-link {
    flex-direction: row; justify-content: flex-start; align-items: center;
    height: 41px; gap: 10px; padding: 0 10px; border-radius: 9px;
    font-size: 13.5px; font-weight: 500; color: var(--text-muted);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .nav-popup .nav-link:active { background: var(--bg-hover); }
  .nav-popup .nav-link.active { background: rgba(140,20,30,0.14); color: var(--text); }
  .nav-popup .nav-link.active .nav-icon { color: var(--brand-red-bright); }
  .nav-popup .nav-icon { margin: 0; display: flex; flex: 0 0 auto; }
  .nav-popup .nav-icon svg { width: 18px; height: 18px; }
  .nav-section-divider { display: block; margin: 5px 12px; opacity: 0.7; }

  /* Account (Settings / Log Out) pinned to the bottom of the drawer; collapses
     to inline + scroll when the list is taller than the screen. */
  .nav-popup-account { display: block; }
  .nav-popup-account-div { display: block; margin-top: auto; }
}

/* ==== CRM message drafts (V22.1) =================================== */
.pc-phone { flex-wrap: wrap; }
.crm-drafts-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin: 8px 2px 14px; }
.crm-drafts-hint { font-size: 12.5px; color: var(--text-muted); line-height: 1.5; margin: 0; max-width: 640px; }
.crm-drafts-hint code { background: var(--bg-elevated-2); padding: 1px 5px; border-radius: 4px; font-size: 11.5px; }
.crm-draft-card { background: var(--bg-elevated); border: 1px solid var(--border); border-radius: 12px; padding: 12px 14px; margin-bottom: 10px; }
.crm-draft-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
.crm-draft-body { white-space: pre-wrap; word-break: break-word; font-family: var(--font-body); font-size: 13px; line-height: 1.5; color: var(--text-muted); margin: 0; max-height: 220px; overflow-y: auto; }
.crm-draft-overlay { position: fixed; inset: 0; z-index: 1400; background: rgba(0,0,0,0.55); display: flex; align-items: center; justify-content: center; padding: 18px; }
.crm-draft-editor { width: 100%; max-width: 560px; max-height: 88vh; overflow-y: auto; background: var(--bg-elevated); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); padding: 18px; }
.crm-draft-ed-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.crm-draft-ed-head strong { font-family: var(--font-display); font-size: 1.05rem; }
.crm-draft-ed-row { border: 1px solid var(--border); border-radius: 10px; padding: 10px; margin-bottom: 10px; background: var(--bg); }
.crm-draft-ed-rowhead { display: flex; gap: 8px; margin-bottom: 8px; }
.crm-draft-ed-rowhead .dft-title { flex: 1; }
.crm-draft-editor input, .crm-draft-editor textarea { width: 100%; box-sizing: border-box; background: var(--bg-elevated-2); border: 1.5px solid var(--border); border-radius: 8px; color: var(--text); font-family: inherit; font-size: 14px; padding: 9px 11px; }
.crm-draft-editor textarea { font-size: 13px; line-height: 1.5; resize: vertical; }
.crm-draft-ed-foot { display: flex; justify-content: flex-end; gap: 10px; margin-top: 6px; }
.crm-draft-picker { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.crm-draft-picker .dft-pick.active { border-color: var(--gold); background: rgba(201,169,97,0.14); color: var(--text); }
.crm-draft-merged { width: 100%; box-sizing: border-box; background: var(--bg); border: 1.5px solid var(--border-strong); border-radius: 8px; color: var(--text); font-family: var(--font-body); font-size: 13px; line-height: 1.55; padding: 12px; white-space: pre-wrap; }

/* ==== CRM calendar view (V22.2) =================================== */
.crm-cal { padding: 4px 0 12px; }
.crm-cal-head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.crm-cal-month { font-family: var(--font-display); font-size: 1.05rem; font-weight: 600; min-width: 150px; }
.crm-cal-head .btn-small { padding: 6px 12px; }
.crm-cal-today { margin-left: auto; }
.crm-cal-legend { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 12px; font-size: 12px; color: var(--text-muted); }
.crm-cal-legend span { display: inline-flex; align-items: center; gap: 6px; }
.cal-dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; flex: 0 0 auto; }
.cal-green { background: var(--success); } .cal-amber { background: var(--warning); }
.cal-red { background: var(--danger); } .cal-blue { background: var(--info); }
.crm-cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 5px; }
.crm-cal-dow { text-align: center; font-size: 11px; font-weight: 600; color: var(--text-subtle); padding-bottom: 4px; }
.crm-cal-cell {
  display: flex; flex-direction: column; align-items: flex-start; gap: 4px;
  min-height: 62px; padding: 6px; border-radius: 9px; cursor: pointer;
  background: var(--bg-elevated-2); border: 1.5px solid transparent; color: var(--text);
  font-family: inherit; transition: border-color var(--transition), background var(--transition);
}
.crm-cal-cell.empty { background: transparent; cursor: default; }
.crm-cal-cell.has:hover { border-color: var(--border-strong); }
.crm-cal-cell.today { border-color: var(--gold); }
.crm-cal-cell.sel { border-color: var(--brand-red); background: rgba(140,20,30,0.12); }
.crm-cal-num { font-size: 12.5px; font-weight: 600; color: var(--text-muted); }
.crm-cal-cell.today .crm-cal-num { color: var(--gold); }
.crm-cal-dots { display: flex; flex-wrap: wrap; gap: 3px; align-items: center; }
.cal-more { font-size: 10px; color: var(--text-subtle); }
.crm-cal-day { margin-top: 16px; }
.crm-cal-day-head { font-family: var(--font-display); font-weight: 600; font-size: 0.98rem; margin-bottom: 10px; padding-bottom: 8px; border-bottom: 1px solid var(--border); }
@media (max-width: 768px), (max-height: 640px) and (pointer: coarse) {
  .crm-cal-cell { min-height: 52px; padding: 4px 4px 5px; border-radius: 8px; }
  .crm-cal-num { font-size: 11.5px; }
  .cal-dot { width: 7px; height: 7px; }
  .crm-cal-grid { gap: 4px; }
  .crm-cal-month { min-width: 0; font-size: 0.98rem; }
}

/* Drafts main view: compact rows with Copy/View/Edit */
.crm-draft-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  background: var(--bg-elevated); border: 1px solid var(--border); border-radius: 12px; padding: 12px 14px; margin-bottom: 9px; }
.crm-draft-name { font-family: var(--font-display); font-weight: 600; font-size: 0.98rem; }
.crm-draft-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.crm-draft-del { color: var(--danger); border-color: rgba(239,68,68,0.4); }

/* ==== Dashboard follow-ups summary (V22.4) ======================== */
.db-fu-summary { display: flex; gap: 8px; margin-top: 4px; }
.db-fu-stat { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px;
  background: var(--bg-elevated-2); border: 1px solid var(--border); border-radius: 10px; padding: 12px 6px; }
.db-fu-num { font-family: var(--font-display); font-weight: 700; font-size: 1.6rem; line-height: 1; color: var(--text); font-variant-numeric: tabular-nums; }
.db-fu-lbl { font-size: 11px; color: var(--text-muted); text-align: center; }
.db-fu-stat.db-fu-today .db-fu-num { color: var(--warning); }
.db-fu-stat.db-fu-today { border-color: var(--warning); }
.db-fu-stat.db-fu-overdue .db-fu-num { color: var(--danger); }
.db-fu-stat.db-fu-overdue { border-color: var(--danger); }
.db-fu-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--danger); vertical-align: middle; margin-left: 2px; }

/* ==== V22.5 — bottom bar (label above icon), active red, greeting centred ==== */
@media (max-width: 768px), (max-height: 640px) and (pointer: coarse) {
  /* Top bar: dashboard greeting / module name centred */
  .mobile-topbar { justify-content: center; }
  .mobile-topbar .topbar-title { text-align: center; flex: 1 1 auto; }

  /* Bottom bar = icon on top, small label below (standard tab-bar convention,
     V22.8) with clear breathing room between the two. DOM order is icon span
     then label span, so plain column puts the icon on top. */
  .nav-menu .nav-link {
    flex-direction: column; justify-content: center; align-items: center;
    gap: 5px; padding: 5px 2px 4px; background: none; box-sizing: border-box;
    color: var(--text-muted);
  }
  .nav-menu .nav-link > span:not(.nav-icon) {
    display: block; font-size: 9.5px; font-weight: 600; line-height: 1;
    letter-spacing: 0.02em; color: inherit;
  }
  .nav-menu .nav-icon { margin: 0; display: flex; }
  .nav-menu .nav-icon svg { width: 21px; height: 21px; display: block; }
  /* Kill sticky grey on touch */
  .nav-menu .nav-link:hover, .nav-menu .nav-link:active { background: none; }
  /* Active page item = red text + a short red bar across the top of the item.
     Stays active while the drawer is open (standard drawer behaviour). */
  .nav-menu .nav-link.active {
    color: var(--brand-red-bright); background: none;
    border-top: 2px solid var(--brand-red-bright); margin-top: -1px;
  }
}

/* Add-contact (and any <button>) phone-action button: proper dark bg, not the
   browser default white — so the icon is visible (V22.6) */
button.pc-tel-btn { background: var(--bg-elevated-2); color: var(--text-muted); }
button.pc-tel-btn:hover { color: var(--text); border-color: var(--brand-red); }

/* ==== V22.10 — CRM overview dashboard (default landing view) ========= */
.crm-db { display: flex; flex-direction: column; gap: 14px; padding: 4px 0 14px; }
.crm-db-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.crm-kpi {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  background: var(--bg-elevated); border: 1px solid var(--border);
  border-radius: 12px; padding: 14px 8px; cursor: pointer;
  font-family: inherit; text-align: center;
  transition: border-color var(--transition), background var(--transition);
}
.crm-kpi:hover { border-color: var(--border-strong); }
.crm-kpi-num { font-family: var(--font-display); font-weight: 700; font-size: 1.7rem; line-height: 1; color: var(--text); font-variant-numeric: tabular-nums; }
.crm-kpi-lbl { font-size: 11px; color: var(--text-muted); }
.crm-kpi-warn { border-color: var(--danger); }
.crm-kpi-warn .crm-kpi-num { color: var(--danger); }
.crm-kpi-info { border-color: var(--info); }
.crm-kpi-info .crm-kpi-num { color: var(--info); }

.crm-db-card { background: var(--bg-elevated); border: 1px solid var(--border); border-radius: 14px; padding: 14px 16px; }
.crm-db-card-warn { border-color: var(--warning); }
.crm-db-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 6px; }
.crm-db-title { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-display); font-weight: 600; font-size: 0.98rem; color: var(--brand-cream); }
.crm-db-title .mini-icon { color: var(--text-muted); }
.crm-db-count { font-size: 12px; font-weight: 700; color: var(--text-muted); background: var(--bg-elevated-2); border-radius: 999px; padding: 2px 9px; font-variant-numeric: tabular-nums; }
.crm-db-count-hot { background: rgba(239,68,68,0.16); color: var(--danger); }
.crm-db-link { background: none; border: none; color: var(--brand-red); font-family: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer; padding: 8px 2px 0; }
.crm-db-link:hover { color: var(--brand-red-bright); }

.crm-db-row {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%;
  background: none; border: none; border-top: 1px solid var(--border);
  padding: 10px 2px; cursor: pointer; font-family: inherit; text-align: left;
}
.crm-db-row:first-of-type { border-top: none; }
.crm-db-row:hover .crm-db-row-name { color: var(--brand-cream); }
.crm-db-row-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.crm-db-row-name { font-size: 14px; font-weight: 600; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.crm-db-row-sub { font-size: 12px; color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.crm-db-row-right { display: inline-flex; align-items: center; gap: 8px; flex-shrink: 0; }
.crm-db-date { font-size: 12.5px; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.crm-db-when { font-size: 11.5px; font-weight: 600; }
.crm-db-over { color: var(--danger); }
.crm-db-today { color: var(--warning); }
.crm-db-tag-new { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--info); background: rgba(96,165,250,0.14); border-radius: 4px; padding: 2px 7px; }
.crm-db-empty { font-size: 13px; color: var(--text-muted); padding: 6px 2px; margin: 0; }
@media (max-width: 768px), (max-height: 640px) and (pointer: coarse) {
  .crm-db-kpis { grid-template-columns: repeat(2, 1fr); }
}

/* ==== V22.7 — compact dashboard cards (follow-ups + training) ========
   Fewer / smaller "big red buttons": summary line + up to 3 tappable rows +
   a small red-outline pill action. HR alert docks above Clock In on mobile. */
.db-card-compact { padding: 15px 16px; }

/* Red-outline pill action (replaces the full-width filled buttons) */
.db-pill-btn {
  display: inline-flex; align-items: center; align-self: flex-start; gap: 6px;
  margin-top: 2px; padding: 7px 16px; border-radius: 999px;
  border: 1.5px solid var(--brand-red); background: transparent;
  color: var(--brand-red-bright); font-family: var(--font-body);
  font-size: 13px; font-weight: 600; text-decoration: none; cursor: pointer;
  transition: background var(--transition), border-color var(--transition), color var(--transition);
}
.db-pill-btn:hover { background: rgba(140,20,30,0.14); color: var(--brand-cream); }

/* Follow-ups: one-line count summary + tappable lead rows */
.db-fu-line { font-size: 12.5px; color: var(--text-muted); margin: 0 0 10px; line-height: 1.5; }
.db-fu-line b { color: var(--text); font-weight: 700; font-variant-numeric: tabular-nums; }
.db-fu-line b.db-fu-hl-today { color: var(--warning); }
.db-fu-line b.db-fu-hl-over { color: var(--danger); }
.db-dot-sep { margin: 0 7px; color: var(--text-subtle); }
.db-fu-leads { display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px; }
.db-fu-lead {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 9px 11px; border-radius: 10px; background: var(--bg-elevated-2);
  border: 1px solid var(--border); text-decoration: none;
  transition: border-color var(--transition), background var(--transition);
}
.db-fu-lead:hover { border-color: var(--border-strong); background: var(--bg-hover); }
.db-fu-lead-name { font-size: 13px; font-weight: 600; color: var(--text);
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.db-fu-lead-when { font-size: 11.5px; color: var(--text-muted); flex-shrink: 0; }
.db-fu-lead-when.db-fu-w-over { color: var(--danger); font-weight: 600; }
.db-fu-lead-when.db-fu-w-today { color: var(--warning); font-weight: 600; }

/* Training card module rows reuse .db-training-item — give the title a truncating cell */
.db-training-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* HR completion alert docked above the Clock In button on the mobile shell */
@media (max-width: 768px), (max-height: 640px) and (pointer: coarse) {
  .db-hr-alert-docked {
    pointer-events: all;
    flex-direction: row; align-items: center;
    margin: 0 0 8px; padding: 10px 12px; gap: 10px;
    box-shadow: var(--shadow-lg);
  }
  .db-hr-alert-docked > div { min-width: 0; }
  .db-hr-alert-docked strong { font-size: 13px; margin-bottom: 1px; }
  .db-hr-alert-docked span {
    font-size: 11px; line-height: 1.35;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  }
  /* The `.mobile-action-bar` ancestor is load-bearing, not decoration. This
     alert is injected INTO #dashboardDock, so the V25.1 rule
     `.mobile-action-bar .btn { width:100%; min-height:54px }` also matches this
     button. Both selectors were (0,2,0) and V25.1 is declared ~500 lines later,
     so it won on source order: the button stretched to the full dock width and
     sat on top of the alert's own text, clipping it mid-word. Naming the
     ancestor here makes this (0,3,0) so the compact treatment actually wins. */
  .mobile-action-bar .db-hr-alert-docked .btn {
    /* min-height was 0 — added in V25.8 to stop the docked button inheriting
       the 54px docked-primary height and covering the alert's own text. It did
       that job, and then also cancelled the 44px touch floor, leaving this at
       40px: the last control in the app under the minimum, on a bar whose only
       purpose is to be tapped. 44 is short enough not to swamp the alert. */
    width: auto; flex-shrink: 0; min-height: 44px;
    padding: 0 14px; font-size: 12.5px; border-radius: var(--t1-r-ctl, 11px);
    box-shadow: none;
  }
}

/* ==== V22.11 — no iOS focus-zoom on inputs ==========================
   Mobile Safari zooms the whole viewport when you focus any field whose
   font-size is under 16px (jarring, loses navigation context). Force 16px on
   form controls at mobile widths so tapping a field never zooms. Pinch-zoom
   stays available (we don't touch maximum-scale). */
@media (max-width: 768px), (max-height: 640px) and (pointer: coarse) {
  input, select, textarea,
  .tb-search input,
  .form-group input, .form-group select, .form-group textarea,
  .fs-row input, .fs-row select {
    font-size: 16px;
  }
}

/* ==== V22.10.2 — CRM board: scrollable columns + sticky header + compact ====
   Fixes: (a) the "buttons peeking above the column header" bug — the sticky
   header now covers the full top of the column; (b) columns no longer run off
   behind the bottom dock — each is bounded and scrolls internally; (c) compact
   cards so ~4 contacts show before scrolling. */
.pipeline-column {
  display: flex; flex-direction: column;
  padding: 0 14px 14px;                       /* top space handled by the sticky header */
  max-height: calc(100vh - 300px);
  overflow-y: auto;
}
.pipeline-column h3 {
  position: sticky; top: 0; z-index: 5;
  margin: 0 -14px 10px; padding: 14px 14px 10px;
  background: var(--bg-elevated);
}
/* The board shows the phone row too (Filip, 2026-08-01) — it was the last of
   the four views without it. It used to be hidden here to keep columns short so
   ~4 contacts fit before scrolling, but a card you cannot call from is a card
   you have to open first, and the whole point of these actions is not opening
   anything. Density is the cheaper thing to give up: the columns scroll.
   Kept tighter than elsewhere so the cost is as small as possible — the number
   sits on its own line above the buttons rather than beside them. */
.pipeline-column .pipeline-card { padding: 12px; }
.pipeline-column .pc-phone {
  flex-wrap: wrap; gap: 6px; padding: 6px 8px; margin-top: 8px;
}
.pipeline-column .pc-phone-num { flex: 1 0 100%; font-size: 12px; }
.pipeline-column .pc-tel-btn { min-width: 44px; min-height: 44px; }

@media (max-width: 768px), (max-height: 640px) and (pointer: coarse) {
  /* Bound each column to the space between the top bar and the bottom dock so
     no card is cut off; scroll for the rest. Uses svh (NOT dvh): iOS shrinks
     dvh when the keyboard opens, which resized the column and shifted its scroll
     — svh stays stable while typing so the scroll position doesn't drift. */
  .pipeline-column {
    min-height: calc(100svh - 300px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px));
    max-height: calc(100svh - 300px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px));
  }
}

/* ==== V22.12 — keyboard-open behaviour (a field is focused) ==========
   auth.js sets body.kb-open while typing and --kb = on-screen keyboard height
   (via visualViewport). Hide the bottom nav so it isn't stranded above the
   keyboard, and sit the CRM search dock right on top of the keyboard (opaque)
   so no list card shows behind it. */
@media (max-width: 768px), (max-height: 640px) and (pointer: coarse) {
  body.kb-open .nav-menu { display: none; }
  /* Sit flush on top of the keyboard (--kb from visualViewport; ≈0 when iOS
     shrinks the layout for the keyboard, = keyboard height otherwise). */
  body.kb-open .crm-bottom-dock {
    bottom: var(--kb, 0px);
    box-shadow: 0 -8px 24px rgba(0,0,0,0.6);
  }
  /* While typing you only need the search box — hide the tabs + filter row so
     the dock is a single slim bar on the keyboard, not a tall floating block. */
  body.kb-open .crm-bottom-dock .pipeline-tabs,
  body.kb-open .crm-bottom-dock .crm-dock-chips { display: none; }
}

/* ===== V23 — Inbox tab: email enquiry suggestions ===== */
/* Cards in the CRM Inbox tab. Deliberately distinct from a lead card: these
   are candidates, not pipeline entries, so no stage pill and no tap-to-open. */
.sug-card { display: block; cursor: default; }
.sug-head { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.sug-score {
  flex: 0 0 auto; min-width: 22px; height: 22px; padding: 0 6px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 999px; background: var(--gold, #C9A961); color: #111;
  font-size: 11px; font-weight: 700; font-variant-numeric: tabular-nums;
}
.sug-from { flex: 1 1 auto; font-weight: 600; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sug-when { flex: 0 0 auto; font-size: 11px; color: var(--text-muted); }
.sug-subject { font-size: 13.5px; font-weight: 600; margin-bottom: 4px; }
.sug-meta { font-size: 12px; color: var(--gold, #C9A961); margin-bottom: 4px; }
.sug-preview {
  font-size: 12px; line-height: 1.45; color: var(--text-muted);
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.sug-acct { font-size: 10.5px; color: var(--text-muted); opacity: .75; margin-top: 6px; word-break: break-all; }
.sug-actions { display: flex; gap: 8px; margin-top: 10px; }
.sug-actions .btn { flex: 1 1 0; min-height: 40px; font-size: 13px; padding: 0 10px; }
.sug-dismiss { background: transparent; border: 1px solid var(--border); color: var(--text-muted); }
.sug-dismiss:hover { color: var(--text); border-color: var(--text-muted); }

/* ===== Display scale (V24.8) =====
   Per-user preference, set in Settings. Applied to the SCROLLING CONTENT
   only — the fixed chrome keeps its tuned sizes, because those were set to
   clear the iOS home indicator and curved corners, and because shrinking tap
   targets below ~44px is an accessibility regression rather than a feature.

   `zoom` is used rather than transform: transform would create a containing
   block for the fixed docks inside .main-content and throw them off screen
   (trap #6). zoom re-lays-out instead, so fixed descendants stay anchored. */
:root { --ui-scale: 1; }

.main-content { zoom: var(--ui-scale); }

/* Firefox had no `zoom` before 126. There, fall back to scaling the text
   only — less complete, but it never breaks the layout. */
@supports not (zoom: 1) {
  .main-content { zoom: normal; font-size: calc(1rem * var(--ui-scale)); }
}

/* Scale the drawer list too: it is the other place with a lot of rows, and
   leaving it fixed while content scales looks like a bug. */
@media (max-width: 768px), (max-height: 640px) and (pointer: coarse) {
  .nav-popup-list { zoom: var(--ui-scale); }
}

/* Live preview swatches in Settings */
.scale-opts { display: grid; grid-template-columns: repeat(auto-fit, minmax(132px, 1fr)); gap: 10px; }
.scale-opt {
  display: grid; gap: 4px; padding: 13px 12px; text-align: left; cursor: pointer;
  background: var(--bg-elevated); border: 1px solid var(--border);
  border-radius: 12px; color: var(--text);
}
.scale-opt.on { border-color: var(--brand-red-bright); box-shadow: 0 0 0 1px var(--brand-red-bright) inset; }
.scale-opt-name { font-weight: 600; font-size: 14px; }
.scale-opt-sub { font-size: 11.5px; color: var(--text-muted); }
.scale-opt-demo {
  margin-top: 6px; padding: 7px 9px; border-radius: 8px;
  background: var(--bg); border: 1px solid var(--border);
  color: var(--text-muted); line-height: 1.35;
}

/* ===== BOOT SPLASH (V24.22) =====
   Transparent, so it sits ON the same chevron field as the passcode screen
   rather than covering it with flat black — the two screens are now one
   continuous surface and the handover has nothing to give it away.

   The mark is treated as a BADGE: a dark disc with the emblem inside and the
   loading ring outside it, matching the app icon. */
.splash {
  position: fixed; inset: 0; z-index: 3000;
  display: grid; place-items: center; align-content: center;
  background: transparent;
  transition: opacity 420ms ease, transform 420ms ease;
}
.splash.gone { opacity: 0; transform: scale(1.06); pointer-events: none; }

.splash-stack {
  position: relative; z-index: 1;
  display: grid; place-items: center;
  width: min(320px, 74vw); aspect-ratio: 1;
  animation: splashIn 1200ms cubic-bezier(.16,.84,.28,1) both;
}
@keyframes splashIn {
  0%   { opacity: 0; transform: translateY(20px) scale(.88); filter: blur(6px); }
  60%  { opacity: 1; }
  100% { opacity: 1; transform: none; filter: none; }
}

/* The badge disc — same idea as the home-screen icon. */
.splash-badge {
  position: absolute; inset: 13%;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 34%, #1a1d1d 0%, #0e1010 70%);
  border: 1px solid rgba(255,255,255,.08);
  box-shadow: 0 10px 34px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.05);
}
.splash-logo {
  position: relative; z-index: 2;
  width: 40%; height: auto; display: block;   /* scaled down inside the badge */
}

.splash-glow {
  position: absolute; width: 70vmax; height: 70vmax; border-radius: 50%;
  background: radial-gradient(circle, rgba(140,20,30,.20) 0%, rgba(140,20,30,0) 62%);
  animation: splashPulse 5.2s ease-in-out infinite;
}
@keyframes splashPulse {
  0%, 100% { transform: scale(.88); opacity: .45; }
  50%      { transform: scale(1.06); opacity: .85; }
}

/* The ring sits OUTSIDE the badge with clear air between them — it was
   touching the emblem before. */
.splash-load { position: absolute; inset: 0; display: grid; place-items: center; }
.splash-ring {
  position: absolute; inset: 0; border-radius: 50%;
  border: 2px solid rgba(255,255,255,.06);
  animation: ringFade 500ms ease 260ms both;
}
.splash-ring::after {
  content: ''; position: absolute; inset: -2px; border-radius: 50%;
  border: 2px solid transparent;
  /* Both arcs are the SAME red. The trailing quarter used to be
     rgba(209,73,91,.30) — #D1495B, a pink-leaning red in the palette nowhere —
     so the ring showed two hues chasing each other at 1.05s. It is now
     --brand-red-bright (#C43A34) at 30%, matching the head. */
  border-top-color: var(--brand-red-bright, #C43A34);
  border-right-color: rgba(196, 58, 52, .30);
  animation: ringSpin 1.05s linear infinite;
}
@keyframes ringFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes ringSpin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .splash-stack, .splash-glow, .splash-ring, .splash-ring::after { animation: none; }
}
body.booting .login-container { opacity: 0; }
.login-container { transition: opacity 300ms ease 60ms; }

/* Settings — profile picture (V24.14) */
.avatar-row { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.avatar-preview {
  width: 76px; height: 76px; flex: 0 0 auto; border-radius: 999px;
  background: var(--bg) center/cover no-repeat; border: 2px solid var(--border-strong);
  display: grid; place-items: center;
  color: var(--text-muted); font: 600 27px/1 'Space Grotesk', sans-serif;
}
.avatar-preview.has-img span { display: none; }
/* Emblem stand-in for "no photo uploaded" — the shorthand above sets
   background-size:cover, which would crop the line-art, so size it down here.
   Two classes beats the one-class shorthand, so this wins. */
.avatar-preview.is-emblem {
  background-size: 56% auto;
  background-color: var(--bg-elevated);
}
.avatar-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.avatar-actions .btn { min-height: 42px; cursor: pointer; }

/* ===== Arrival animation (V24.15) =====
   Continues the lock screen's zoom on the other side: the page fades up from
   slightly enlarged while content blocks slide into place in sequence.

   TRAP #6: transform is applied ONLY to content blocks. Animating
   .main-content itself would make it a containing block for the fixed docks
   inside it and throw them off screen. */
body.arriving { animation: arriveFade 420ms cubic-bezier(.2,.7,.2,1) both; }
@keyframes arriveFade { from { opacity: 0; } to { opacity: 1; } }

.enter-in {
  animation: enterIn 520ms cubic-bezier(.2,.75,.25,1) both;
  animation-delay: var(--enter-delay, 0ms);
}
@keyframes enterIn {
  from { opacity: 0; transform: translateY(16px) scale(.985); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  body.arriving, .enter-in { animation: none; }
}


/* ===== Chevron field, app-wide (V24.22) =====
   ON THE ROOT ELEMENT, not a child. The html background propagates to the
   canvas and paints the ENTIRE viewport including behind the status bar and
   the home indicator. A fixed child cannot be relied on to do that — which is
   why a dark band kept appearing at the top of the screen no matter how far
   the element was inset. */
html {
  background-color: #0B0C0C;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 170' preserveAspectRatio='xMidYMid slice'><path d='M-12 32.0 L50 -14.0 L112 32.0' stroke='%23ffffff' stroke-opacity='0.022' stroke-width='0.30' fill='none' stroke-linejoin='round'/><path d='M-12 36.6 L50 -9.4 L112 36.6' stroke='%23ffffff' stroke-opacity='0.0232' stroke-width='0.30' fill='none' stroke-linejoin='round'/><path d='M-12 41.2 L50 -4.800000000000001 L112 41.2' stroke='%23ffffff' stroke-opacity='0.0244' stroke-width='0.30' fill='none' stroke-linejoin='round'/><path d='M-12 45.8 L50 -0.20000000000000107 L112 45.8' stroke='%23ffffff' stroke-opacity='0.0255' stroke-width='0.30' fill='none' stroke-linejoin='round'/><path d='M-12 50.4 L50 4.399999999999999 L112 50.4' stroke='%23ffffff' stroke-opacity='0.0267' stroke-width='0.30' fill='none' stroke-linejoin='round'/><path d='M-12 55.0 L50 9.0 L112 55.0' stroke='%23ffffff' stroke-opacity='0.0279' stroke-width='0.30' fill='none' stroke-linejoin='round'/><path d='M-12 59.599999999999994 L50 13.599999999999998 L112 59.599999999999994' stroke='%23ffffff' stroke-opacity='0.0291' stroke-width='0.30' fill='none' stroke-linejoin='round'/><path d='M-12 64.19999999999999 L50 18.199999999999996 L112 64.19999999999999' stroke='%23ffffff' stroke-opacity='0.0302' stroke-width='0.30' fill='none' stroke-linejoin='round'/><path d='M-12 68.8 L50 22.799999999999997 L112 68.8' stroke='%23ffffff' stroke-opacity='0.0314' stroke-width='0.30' fill='none' stroke-linejoin='round'/><path d='M-12 73.4 L50 27.4 L112 73.4' stroke='%23ffffff' stroke-opacity='0.0326' stroke-width='0.30' fill='none' stroke-linejoin='round'/><path d='M-12 78.0 L50 32.0 L112 78.0' stroke='%23ffffff' stroke-opacity='0.0338' stroke-width='0.30' fill='none' stroke-linejoin='round'/><path d='M-12 82.6 L50 36.599999999999994 L112 82.6' stroke='%23ffffff' stroke-opacity='0.0349' stroke-width='0.30' fill='none' stroke-linejoin='round'/><path d='M-12 87.19999999999999 L50 41.199999999999996 L112 87.19999999999999' stroke='%23ffffff' stroke-opacity='0.0361' stroke-width='0.30' fill='none' stroke-linejoin='round'/><path d='M-12 91.8 L50 45.8 L112 91.8' stroke='%23ffffff' stroke-opacity='0.0373' stroke-width='0.30' fill='none' stroke-linejoin='round'/><path d='M-12 96.39999999999999 L50 50.39999999999999 L112 96.39999999999999' stroke='%23ffffff' stroke-opacity='0.0385' stroke-width='0.30' fill='none' stroke-linejoin='round'/><path d='M-12 101.0 L50 55.0 L112 101.0' stroke='%23ffffff' stroke-opacity='0.0396' stroke-width='0.30' fill='none' stroke-linejoin='round'/><path d='M-12 105.6 L50 59.599999999999994 L112 105.6' stroke='%23ffffff' stroke-opacity='0.0408' stroke-width='0.30' fill='none' stroke-linejoin='round'/><path d='M-12 110.19999999999999 L50 64.19999999999999 L112 110.19999999999999' stroke='%23ffffff' stroke-opacity='0.042' stroke-width='0.30' fill='none' stroke-linejoin='round'/><path d='M-12 114.8 L50 68.8 L112 114.8' stroke='%23ffffff' stroke-opacity='0.0432' stroke-width='0.30' fill='none' stroke-linejoin='round'/><path d='M-12 119.39999999999999 L50 73.39999999999999 L112 119.39999999999999' stroke='%23ffffff' stroke-opacity='0.0444' stroke-width='0.30' fill='none' stroke-linejoin='round'/><path d='M-12 124.0 L50 78.0 L112 124.0' stroke='%23ffffff' stroke-opacity='0.0455' stroke-width='0.30' fill='none' stroke-linejoin='round'/><path d='M-12 128.6 L50 82.6 L112 128.6' stroke='%23ffffff' stroke-opacity='0.0467' stroke-width='0.30' fill='none' stroke-linejoin='round'/><path d='M-12 133.2 L50 87.19999999999999 L112 133.2' stroke='%23ffffff' stroke-opacity='0.0479' stroke-width='0.30' fill='none' stroke-linejoin='round'/><path d='M-12 137.8 L50 91.8 L112 137.8' stroke='%23ffffff' stroke-opacity='0.0491' stroke-width='0.30' fill='none' stroke-linejoin='round'/><path d='M-12 142.39999999999998 L50 96.39999999999999 L112 142.39999999999998' stroke='%23ffffff' stroke-opacity='0.0502' stroke-width='0.30' fill='none' stroke-linejoin='round'/><path d='M-12 147.0 L50 100.99999999999999 L112 147.0' stroke='%23ffffff' stroke-opacity='0.0514' stroke-width='0.30' fill='none' stroke-linejoin='round'/><path d='M-12 151.6 L50 105.6 L112 151.6' stroke='%23ffffff' stroke-opacity='0.0526' stroke-width='0.30' fill='none' stroke-linejoin='round'/><path d='M-12 156.2 L50 110.19999999999999 L112 156.2' stroke='%23ffffff' stroke-opacity='0.0538' stroke-width='0.30' fill='none' stroke-linejoin='round'/><path d='M-12 160.79999999999998 L50 114.79999999999998 L112 160.79999999999998' stroke='%23ffffff' stroke-opacity='0.0549' stroke-width='0.30' fill='none' stroke-linejoin='round'/><path d='M-12 165.39999999999998 L50 119.39999999999998 L112 165.39999999999998' stroke='%23ffffff' stroke-opacity='0.0561' stroke-width='0.30' fill='none' stroke-linejoin='round'/><path d='M-12 170.0 L50 124.0 L112 170.0' stroke='%23ffffff' stroke-opacity='0.0573' stroke-width='0.30' fill='none' stroke-linejoin='round'/><path d='M-12 174.6 L50 128.6 L112 174.6' stroke='%23ffffff' stroke-opacity='0.0585' stroke-width='0.30' fill='none' stroke-linejoin='round'/><path d='M-12 179.2 L50 133.2 L112 179.2' stroke='%23ffffff' stroke-opacity='0.0596' stroke-width='0.30' fill='none' stroke-linejoin='round'/><path d='M-12 183.79999999999998 L50 137.79999999999998 L112 183.79999999999998' stroke='%23ffffff' stroke-opacity='0.0608' stroke-width='0.30' fill='none' stroke-linejoin='round'/></svg>");
  background-size: 158vmax 158vmax;
  background-position: 50% 10%;
  background-repeat: no-repeat;
  background-attachment: fixed;
  animation: chevAppDrift 9s ease-in-out infinite;
}
@keyframes chevAppDrift {
  0%, 100% { background-position: 50% 12%; background-size: 152vmax 152vmax; }
  50%      { background-position: 50% -2%; background-size: 186vmax 186vmax; }
}
/* Body must not paint over it. */
body { background: transparent; }
@media (prefers-reduced-motion: reduce) { html { animation: none; } }
/* ===== In-app confirm sheet (V24.18) =====
   Used where a native prompt() would otherwise appear. A browser dialog is
   unstyled, cannot explain itself, and on iOS looks nothing like the app. */
.t1-sheet-wrap { position: fixed; inset: 0; z-index: 1500; display: flex; align-items: flex-end; }
.t1-sheet-wrap[hidden] { display: none; }
.t1-sheet-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,.62); }
.t1-sheet {
  position: relative; width: 100%; max-height: 88vh; display: flex; flex-direction: column;
  background: var(--bg-elevated); border-radius: 20px 20px 0 0;
  border-top: 1px solid var(--border-strong);
  padding-bottom: env(safe-area-inset-bottom);
  animation: t1SheetUp .18s ease-out;
}
@keyframes t1SheetUp { from { transform: translateY(14px); opacity: .6; } to { transform: none; opacity: 1; } }
@media (min-width: 760px) {
  .t1-sheet-wrap { align-items: center; justify-content: center; }
  .t1-sheet { max-width: 420px; border-radius: 18px; }
}
@media (prefers-reduced-motion: reduce) { .t1-sheet { animation: none; } }
.t1-sheet-head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 16px 18px 12px; border-bottom: 1px solid var(--border);
}
.t1-sheet-head h3 { margin: 0; font: 600 16.5px/1.25 'Space Grotesk', sans-serif; }
.t1-sheet-x {
  width: 34px; height: 34px; border-radius: 9px; border: 0;
  background: rgba(255,255,255,.06); color: var(--text); font-size: 20px; cursor: pointer;
}
.t1-sheet-body { padding: 16px 18px; }
.t1-sheet-note { margin: 0 0 14px; font-size: 13px; line-height: 1.55; color: var(--text-muted); }
.t1-sheet-note strong { color: var(--text); font-weight: 600; }
/* Wide-tracked digits so a 4-digit code reads like a code, not a password. */
.t1-pin-input {
  width: 100%; min-height: 58px; padding: 0 16px; border-radius: 13px;
  border: 1px solid var(--border-strong); background: var(--bg);
  color: var(--text); text-align: center;
  font: 600 26px/1 'Space Grotesk', Inter, sans-serif; letter-spacing: .38em; text-indent: .38em;
}
.t1-pin-input:focus { outline: none; border-color: var(--gold, #C9A961); }
.t1-sheet-err { min-height: 18px; margin-top: 10px; font-size: 12.5px; color: var(--danger); text-align: center; }
.t1-sheet-foot {
  display: flex; gap: 10px; padding: 4px 18px 18px;
}
.t1-sheet-foot .btn { flex: 1; min-height: 48px; }

/* ===== Module transitions (V24.30) =====
   TRAP #6: .main-content gets OPACITY only. Transforming it would make it a
   containing block for the fixed docks inside and throw them off screen. */
body.page-out .main-content,
body.page-out .till-main { opacity: 0; transition: opacity 160ms ease; }

.enter-in {
  animation: enterIn 460ms cubic-bezier(.2,.75,.25,1) both;
  animation-delay: var(--enter-delay, 0ms);
}
@keyframes enterIn {
  from { opacity: 0; transform: translateY(13px) scale(.99); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  body.page-out .main-content, body.page-out .till-main { opacity: 1; }
  .enter-in { animation: none; }
}

/* ===== Handover splash (V24.31) =====
   The launch screen reused as the passcode → app transition. Transparent, so
   it sits on the same chevron field the app already carries and the two
   screens are one continuous surface. */
.splash.handover { background: transparent; z-index: 2900; }

/* Hold the page under it, then bring it in as the splash dissolves.
   ⚠ THE TILL IS NOT BUILT FROM .main-content. It is a single .till-app shell
   with its own top bar, screens and nav, so none of the selectors below matched
   it and nothing was held back — the splash is TRANSPARENT by design, so on the
   till its emblem simply hung over a fully-rendered screen (Filip, 2026-08-02:
   "the 21 logo emblem overlaps the already loaded screen"). Any future
   full-screen shell needs adding here too. */
body.handover-wait .main-content,
body.handover-wait .mobile-topbar,
body.handover-wait .nav-menu,
body.handover-wait .till-app { opacity: 0; }
body.handover-in .main-content,
body.handover-in .mobile-topbar,
body.handover-in .nav-menu,
body.handover-in .till-app {
  animation: handoverIn 520ms cubic-bezier(.2,.75,.25,1) both;
}
@keyframes handoverIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
/* Content blocks rise and settle as the screen resolves. */
body.handover-in .main-content > .card,
body.handover-in .main-content > .page-header,
body.handover-in .db-card,
body.handover-in .main-content > .table-container {
  animation: handoverBlock 560ms cubic-bezier(.2,.75,.25,1) both;
}
body.handover-in .main-content > *:nth-child(1) { animation-delay: 40ms; }
body.handover-in .main-content > *:nth-child(2) { animation-delay: 90ms; }
body.handover-in .main-content > *:nth-child(3) { animation-delay: 140ms; }
body.handover-in .main-content > *:nth-child(4) { animation-delay: 190ms; }
body.handover-in .main-content > *:nth-child(n+5) { animation-delay: 235ms; }
@keyframes handoverBlock {
  from { opacity: 0; transform: translateY(20px) scale(.985); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  body.handover-wait .main-content, body.handover-wait .mobile-topbar,
  body.handover-wait .nav-menu, body.handover-wait .till-app { opacity: 1; }
  body.handover-in .main-content, body.handover-in .mobile-topbar,
  body.handover-in .nav-menu, body.handover-in .main-content > *,
  body.handover-in .till-app { animation: none; }
}

/* ============================================================================
   V25 — VISUAL HARMONISATION
   ----------------------------------------------------------------------------
   The passcode screen, Rota and the Holidays calendar share one language:
   ONE contained surface per block, a hairline border, generous radius, and
   colour used sparingly as an accent rather than as an outline. Home did not
   follow it — two competing card styles, a full gold ring around an alert,
   heavy inner slabs and two different button treatments — so it read as a
   different app.

   These are tokens plus surface rules applied globally, so every module moves
   together rather than Home being patched in isolation. Visual properties
   only: nothing here changes layout or flow.
   ========================================================================= */
:root {
  --t1-surface:      rgba(255, 255, 255, 0.038);
  --t1-surface-2:    rgba(255, 255, 255, 0.055);
  --t1-hairline:     rgba(255, 255, 255, 0.085);
  --t1-hairline-str: rgba(255, 255, 255, 0.14);
  --t1-r-card: 16px;
  --t1-r-row: 12px;
  --t1-r-ctl: 11px;
}

/* ---- 1. One surface treatment for every block ---- */
.card,
.db-card,
.perf-panel,
.table-container,
.stat-card,
.docs-doc-card,
.fp-plan-card {
  background: var(--t1-surface);
  border: 1px solid var(--t1-hairline);
  border-radius: var(--t1-r-card);
  box-shadow: none;
}

/* ---- 2. Attention without shouting ----
   A full gold ring around the follow-ups card competed with the content and
   matched nothing else in the app. State is now a left edge plus the dot the
   card already has — the same idea as Rota's shift chips. */
.db-card.db-card-highlight {
  border-color: var(--t1-hairline);
  border-left: 3px solid var(--gold, #C9A961);
  background: linear-gradient(90deg, rgba(201,169,97,.055) 0%, var(--t1-surface) 42%);
}

/* ---- 3. Inner rows sit ON the card, not fight it ---- */
.db-fn-item,
.db-training-item,
.db-fu-row,
.db-list-row,
.ta-item,
.menu-row {
  background: var(--t1-surface-2);
  border: 1px solid transparent;
  border-radius: var(--t1-r-row);
}
.db-fn-item:active,
.db-training-item:active,
.menu-row:active { background: rgba(255,255,255,.085); }

/* ---- 4. Primary actions: same height and radius everywhere ----
   Declared BEFORE the pill rule: many pills also carry .btn, and a later
   .btn radius would flatten them back to a rounded rectangle. */
.btn { border-radius: var(--t1-r-ctl); }
.btn-primary { box-shadow: none; }
.btn-block { min-height: 50px; }

/* ---- 5. One pill-button treatment ----
   Home had a red-outline pill and a plain outline pill doing the same job.
   Comes after .btn so the pill shape wins on elements carrying both. */
.db-pill-btn,
.btn-outline,
.docs-print-btn,
.ta-quick,
.btn.db-pill-btn,
.btn.btn-outline {
  min-height: 40px;
  padding: 0 15px;
  border-radius: 999px;
  border: 1px solid var(--t1-hairline-str);
  background: transparent;
  color: var(--text);
  font: 600 13px/1 Inter, sans-serif;
}
.db-pill-btn:active,
.btn-outline:active { background: rgba(255,255,255,.07); }

/* ---- 6. Floating status chips anchor to the content they describe ---- */
.db-alert-pill,
.crm-count-pill {
  border-radius: 999px;
  border: 1px solid var(--t1-hairline-str);
  background: var(--t1-surface-2);
}

/* ---- 7. Consistent vertical rhythm ----
   Home had a large dead gap between the last card and the docked alert
   because each card carried its own bottom margin. */
.db-card + .db-card,
.card + .card,
.perf-panel + .perf-panel { margin-top: 14px; }

/* ---- 8. Section headings read the same everywhere ---- */
.db-card-title,
.perf-panel-head h3,
.page-header h1 { letter-spacing: -0.01em; }

/* ---- 9. Till inherits the same tokens ---- */
.tab-card, .item-btn, .bill-totals, .ta-kpi {
  border-radius: var(--t1-r-card);
  border-color: var(--t1-hairline);
  background: var(--t1-surface);
}
.till-sheet, .t1-sheet { border-top-color: var(--t1-hairline-str); }

/* ============================================================================
   V25.1 — DOCKED ACTIONS, INPUTS AND SHEETS
   ----------------------------------------------------------------------------
   Filip: "bottom clock in button could look better like in launchpad style…
   buttons always on bottom well aligned. Across the entire app, including
   till."

   The docked bar was a flat gradient with a full-bleed slab button on top.
   The launchpad's controls read better because they are INSET, rounded, and
   sit on a blurred surface rather than a hard gradient — so the content
   scrolling underneath stays visible instead of being wiped out.
   ========================================================================= */
@media (max-width: 768px), (max-height: 640px) and (pointer: coarse) {
  .mobile-action-bar {
    /* Blurred glass rather than an opaque gradient: content stays legible as
       it passes underneath, which is what makes the launchpad feel light. */
    background: linear-gradient(to top, rgba(11,12,12,.92) 40%, rgba(11,12,12,.55) 78%, transparent);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    padding: 12px 16px calc(10px + env(safe-area-inset-bottom, 0px) * 0.2);
  }
  .mobile-action-bar .btn {
    /* Inset and rounded to match the launchpad's destination chips, instead
       of a full-width slab pinned to the screen edges. */
    width: 100%;
    min-height: 54px;
    border-radius: 15px;
    font-size: 15.5px;
    font-weight: 600;
    letter-spacing: -0.01em;
    box-shadow: 0 8px 26px rgba(0, 0, 0, .45);
  }
  /* Stacking margin for docks that lay their buttons out VERTICALLY
     (.training-new-dock, .rp-dock, .cocktails-edit-dock … all display:block). */
  .mobile-action-bar .btn + .btn { margin-top: 8px; }
  .mobile-action-bar .dock-row { display: flex; gap: 8px; }
  /* …and the escape hatch for every dock that lays them out HORIZONTALLY.
     `.dock-row` alone was not enough: it appears in ZERO pages, so the margin
     above was landing on every side-by-side row and staircasing it — the first
     button kept margin-top:0 while its neighbours dropped 8px, and
     `align-items: stretch` then inflated the first one to match (Stock's gear
     54px vs its primary 8px lower; Rota's Cancel 62px vs Save/Publish 54px).
     Every horizontal container has to be named here or the bug comes back. */
  .mobile-action-bar .dock-row .btn,
  .mobile-action-bar .al-dock-row .btn,
  .mobile-action-bar .dashboard-dock-row .btn,
  .mobile-action-bar .rota-dock-row .btn,
  .mobile-action-bar .stock-dock-row .btn,
  .mobile-action-bar.clock-dock > .btn,
  .mobile-action-bar.dashboard-dock > .btn,
  .mobile-action-bar.docs-dock > .btn,
  .mobile-action-bar.fp-editor-dock > .btn,
  .mobile-action-bar.rota-dock > .btn,
  .mobile-action-bar.stock-archive-dock > .btn,
  .mobile-action-bar.stock-editor-dock > .btn { margin-top: 0; }
}

/* ---- Inputs: one field treatment everywhere ----
   Fields were a mix of radii, heights and borders depending on which module
   they were written in. 16px font is mandatory: below it iOS zooms the
   viewport on focus (trap #11). */
input[type="text"], input[type="password"], input[type="email"],
input[type="tel"], input[type="number"], input[type="search"],
input[type="date"], input[type="time"], input[type="datetime-local"],
select, textarea, .form-group input, .form-group select, .form-group textarea {
  min-height: 48px;
  padding: 0 14px;
  border-radius: var(--t1-r-ctl);
  border: 1px solid var(--t1-hairline-str);
  background: rgba(0, 0, 0, .28);
  color: var(--text);
  font-size: 16px;
  -webkit-appearance: none;
  appearance: none;
  transition: border-color 140ms ease, background 140ms ease;
}
textarea { min-height: 96px; padding: 12px 14px; line-height: 1.5; }
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--gold, #C9A961);
  background: rgba(0, 0, 0, .38);
}
input::placeholder, textarea::placeholder { color: var(--text-subtle, #6d7373); }
.form-group label {
  display: block; margin-bottom: 7px;
  font-size: 12.5px; font-weight: 500; color: var(--text-muted);
}
/* Native pickers ignore sizing without this (trap #9). */
input[type="date"], input[type="time"], input[type="datetime-local"] {
  -webkit-appearance: none; min-height: 48px;
}

/* ---- COMPOSED FIELDS: the WRAPPER is the control, the input is bare ----
   .tb-search / .al-search / .menu-search are pills that hold an icon, a naked
   input and a clear button. Each already declared `border:none;
   background:transparent` on its input — but those rules are (0,1,1), exactly
   the same weight as `input[type="search"]` above, and they sit ~4000 lines
   EARLIER, so the global treatment won on source order and gave the inner
   input its own 48px box, 11px radius, border and background. The result was a
   rounded rectangle sitting inside — and overlapping — the pill: two borders,
   two radii, the input 3px taller than its own wrapper. Filip flagged it in
   the CRM ("a rectangle one overlapping it") and preferred the pill.

   This block MUST stay after the global field rule. Focus is shown by the
   wrapper via :focus-within, so the input's own focus ring is cleared too or
   a gold rectangle appears inside the pill. */
.tb-search input,
.al-search input,
.menu-search input {
  min-height: 0;
  height: 100%;
  padding: 0;
  border: none;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  font-size: 16px;            /* keep 16px — below it iOS zooms on focus (trap #11) */
}
.tb-search input:focus,
.al-search input:focus,
.menu-search input:focus {
  border: none;
  background: transparent;
  box-shadow: none;
  outline: none;
}

/* ---- Sheets and popups: one surface ---- */
.modal-content, .crm-more-popup, .al-filter-popup,
.stock-filter-popup, .export-menu {
  border-radius: 18px;
  border: 1px solid var(--t1-hairline-str);
  background: var(--bg-elevated);
  box-shadow: 0 18px 50px rgba(0, 0, 0, .55);
}
.modal-content { border-radius: 20px; }
@media (max-width: 768px) {
  /* Full-width sheets rise from the bottom edge, like every other sheet in
     the app, rather than floating as a centred card. */
  .modal-content { border-radius: 20px 20px 0 0; }
}

/* ============================================================================
   V25.4 — DEFECTS FOUND BY REVIEWING THE RUNNING APP IN CHROME
   ----------------------------------------------------------------------------
   Opened each module in the browser rather than reading the markup. These are
   things that only show up rendered.
   ========================================================================= */

/* ---- CRM KPI tiles used off-palette accents ----
   One tile was outlined in #60A5FA blue, the next in danger red, against a
   palette that is otherwise black, cream, brand red and gold. Two arbitrary
   colours sitting side by side read as unfinished. State now shows as a top
   edge in the palette's own colours. */
.crm-kpi { border-radius: var(--t1-r-card, 16px); background: var(--t1-surface); border-color: var(--t1-hairline); }
.crm-kpi-info {
  border-color: var(--t1-hairline);
  border-top: 2px solid var(--gold, #C9A961);
}
.crm-kpi-info .crm-kpi-num { color: var(--gold, #C9A961); }
.crm-kpi-warn {
  border-color: var(--t1-hairline);
  border-top: 2px solid var(--brand-red-bright, #C43A34);
}

/* ---- The gold ring survived here ----
   V25 replaced it on Home's .db-card-highlight, but the CRM's own card class
   was untouched and still drew a full amber outline. Same treatment as Home:
   a left edge, not a ring. */
.crm-db-card {
  background: var(--t1-surface);
  border: 1px solid var(--t1-hairline);
  border-radius: var(--t1-r-card, 16px);
}
.crm-db-card-warn {
  border-color: var(--t1-hairline);
  border-left: 3px solid var(--gold, #C9A961);
  background: linear-gradient(90deg, rgba(201,169,97,.055) 0%, var(--t1-surface) 42%);
}

/* ---- Filter chips were ~30px tall ----
   Below the 44px touch minimum, in a popup used one-handed on a phone mid
   service. Raised with real spacing between them so neighbours are not
   mis-tapped. */
.crm-more-chips { gap: 8px; }
.crm-more-chips .cat-chip {
  min-height: 38px;
  padding: 0 14px;
  font-size: 12.5px;
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
}
.crm-more-popup {
  border-radius: 18px;
  border: 1px solid var(--t1-hairline-str);
  box-shadow: 0 18px 50px rgba(0,0,0,.6);
  max-height: 72vh;
  overflow-y: auto;
}

/* ---- CRM list rows were bare text on the card ----
   Home's rows now sit on their own surface; these did not, so the same
   information looked different in two places. */
.crm-db-row, .crm-db-item, .crm-fu-row {
  background: var(--t1-surface-2);
  border-radius: var(--t1-r-row, 12px);
  border: 1px solid transparent;
}

/* ---- HR: staff names were being truncated to "Aay…", "Kam…", "Shiv…" ----
   The completeness badge is flex-shrink:0 with nowrap, so it never yields;
   the name carries text-overflow:ellipsis and lost every time. A staff list
   where you cannot read the names is broken regardless of how it looks.
   The name now takes the row and the badge wraps beneath it when it has to. */
.hr-card-head { flex-wrap: wrap; }
.hr-card-idblock { flex: 1 1 auto; min-width: 58%; }
.hr-card-name {
  white-space: normal;          /* wrap a long name rather than clip it */
  overflow: visible;
  text-overflow: clip;
  line-height: 1.25;
}
.hr-card-badge {
  font-size: 9px;
  padding: 3px 8px;
  opacity: .92;
}

/* ============================================================================
   V25.6 — REMAINING MODULES: same defect classes, found by pattern
   ----------------------------------------------------------------------------
   Chrome was not connected for this pass, but the visual review established
   what these defects look like in code. Each fix below is the same class of
   bug already confirmed on screen in another module.
   ========================================================================= */

/* ---- Stock + Allergens filter chips were ~26px tall ----
   The SAME defect as the CRM chips (fixed at 38px in V25.4), in the same
   one-handed mid-service popup — and these were even smaller. The base rule
   now matches, so every module's chips agree. */
.cat-chip {
  min-height: 38px;
  padding: 0 14px;
  font-size: 12.5px;
  display: inline-flex;
  align-items: center;
}
.cat-chips { gap: 8px; }

/* ---- Till PIN in User Management (V25.11) ----
   Small print under a field, and the marker on a user still holding the shared
   default PIN — gold because it is a "needs attention", not an error. */
.form-hint {
  margin: 6px 0 0;
  font-size: 12px; line-height: 1.5;
  color: var(--text-muted);
}
.form-hint strong { color: var(--gold); font-weight: 600; }
.pin-default-dot {
  color: var(--gold);
  font-size: 15px; line-height: 1;
  vertical-align: middle;
}

/* ---- Holidays "My Leave" chips were 34px ----
   The third recurrence of the same defect (CRM 30px in V25.4, Stock/Allergens
   26px in V25.6): a padding-derived chip height in a one-handed phone filter
   row. Same 38px standard so it stops coming back a module at a time. */
.hol-chip {
  min-height: 38px;
  padding: 0 14px;
  font-size: 12.5px;
}

/* ---- Chrome-accent blue, the KPI-tile class of bug ----
   Blue is SEMANTIC in the stage system (CRM new = blue on columns, tags and
   calendar dots) and stays there. These three used it as decoration:

   Cash Up's opening-count dot glowed blue for no reason — gold keeps the
   open/close sections distinguishable inside the palette. */
.cashup-count-section:nth-of-type(1) .cashup-count-title::before {
  background: var(--gold, #C9A961);
  box-shadow: 0 0 8px rgba(201, 169, 97, 0.55);
}
/* Training's scenario box had a blue edge; the app's highlight treatment is
   the gold left edge (Home V25, CRM V25.4). */
.tr-scenario-box {
  border-left-color: var(--gold, #C9A961);
}
/* "Signed off" chip in the training matrix: verified-by-manager reads as the
   premium accent, not an arbitrary blue. */
.tr-chip.tr-signed {
  background: rgba(201, 169, 97, 0.14);
  color: var(--gold, #C9A961);
  border: 1px solid rgba(201, 169, 97, 0.4);
}

/* ---- Stale surfaces pre-dating the tokens ----
   Cash Up count sections, Rota's My Week day cards and the Holidays allowance
   card still carried --bg-elevated + full border. Same information, different
   dress, one module apart. */
.cashup-count-section,
.rota-day-card,
.hol-allowance-card {
  background: var(--t1-surface);
  border: 1px solid var(--t1-hairline);
  border-radius: var(--t1-r-card, 16px);
}
/* State accents on those cards keep their meaning. */
.rota-day-card.rota-today {
  border-color: var(--t1-hairline);
  border-left: 3px solid var(--brand-red, #8C1410);
  background: linear-gradient(90deg, rgba(138,25,21,.07) 0%, var(--t1-surface) 42%);
}

/* ---- Monthly kitchen records (V26.15, split into three V26.24) ----
   Sits above the stored documents in the Documents module. These are the sheets
   with a legal retention period behind them, so they get the top of the page.
   Three cards rather than one pack: running out of delivery sheets should not
   mean printing fridge and cooking sheets nobody asked for. */
.kr-month {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin: 0 0 12px;
}
.kr-month label {
  font: 600 11px/1 'Space Grotesk', sans-serif; letter-spacing: .08em;
  text-transform: uppercase; color: var(--text-muted);
}
/* 16px, or iOS zooms the viewport on focus (trap #11). */
.kr-month select {
  min-height: 44px; padding: 0 12px; font-size: 16px;
  background: var(--t1-surface-2, #16191a); color: var(--text);
  border: 1px solid var(--t1-hairline, #262a2a); border-radius: var(--t1-r-ctl, 11px);
}
.kr-hint { font-size: 12px; color: var(--text-muted); }

.kr-grid { margin-bottom: 20px; }
.doc-card.kr-doc {
  border-left: 3px solid var(--gold, #C9A961);
  display: flex; flex-direction: column; gap: 4px; cursor: pointer;
}
.kr-doc-title { font: 600 15px/1.3 'Space Grotesk', sans-serif; color: var(--text); }
.kr-doc-sub { font-size: 12.5px; line-height: 1.5; color: var(--text-muted); }
.kr-doc-go {
  margin-top: auto; padding-top: 10px;
  font: 600 12px/1 'Space Grotesk', sans-serif; letter-spacing: .06em;
  text-transform: uppercase; color: var(--gold, #C9A961);
}
.doc-card.kr-doc:focus-visible { outline: 2px solid var(--gold, #C9A961); outline-offset: 2px; }
@media (max-width: 768px), (max-height: 640px) and (pointer: coarse) {
  .kr-month select { flex: 1; min-width: 0; }
}

/* Print straight from the document card — the Print button used to exist only
   inside the editor, so getting a paper copy meant opening a checklist into an
   edit form and risking saving a stray change to it. 44px, and it stops the
   click reaching the card so it prints instead of opening. */
.doc-card { position: relative; }
/* Raised only while its print menu is open. Without this the menu paints under
   the NEXT card: sibling cards are position:relative with z-index auto, so paint
   order between them is DOM order and the menu's own z-index cannot escape its
   card. Removed again on close so the cards keep their normal hover/lift. */
.doc-card.print-open { z-index: 60; }
.doc-card-print {
  flex: 0 0 auto; width: 44px; height: 44px; margin: -6px -6px -6px 2px;
  display: grid; place-items: center; border-radius: 999px;
  background: transparent; border: 1px solid var(--t1-hairline, #262a2a);
  color: var(--text-muted, #8b9090); cursor: pointer;
}
.doc-card-print:hover { color: var(--gold, #C9A961); border-color: var(--gold, #C9A961); }
.doc-card-print:active { transform: scale(.94); }

/* Print-style switch (V26.18). Colour or black-and-white is really a property
   of the printer you are standing at — the office has a colour one, the kitchen
   wall gets the mono laser — so it is a remembered setting rather than a dialog
   in front of every print. */
.docs-head-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px; flex-wrap: wrap; margin-bottom: 8px;
}
.pstyle-switch {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 4px; border: 1px solid var(--t1-hairline, #262a2a);
  border-radius: 999px; background: var(--t1-surface, #141616);
}
.pstyle-l {
  font: 600 10px/1 Inter, sans-serif; letter-spacing: .08em;
  text-transform: uppercase; color: var(--text-subtle, #6d7373); padding: 0 8px 0 6px;
}
.pstyle-switch button {
  min-height: 32px; padding: 0 13px; border: 0; border-radius: 999px;
  background: transparent; color: var(--text-muted, #8b9090);
  font: 600 12px/1 Inter, sans-serif; cursor: pointer; white-space: nowrap;
}
.pstyle-switch button.on {
  background: var(--brand-red, #8f1d2b); color: #fff;
}
@media (max-width: 768px), (max-height: 640px) and (pointer: coarse) {
  .pstyle-switch { width: 100%; justify-content: center; }
  .pstyle-switch button { flex: 1; min-height: 40px; }
}

/* Print menu on a document card (V26.19). Colour or black-and-white chosen at
   the moment of printing — a remembered setting elsewhere on the page meant
   pressing Print gave whatever it happened to be set to, with nothing on screen
   saying there was another option. */
.print-menu {
  position: absolute; right: 10px; top: calc(100% - 6px); z-index: 40;
  min-width: 232px; padding: 6px;
  /* OPAQUE. This used var(--t1-surface-2), and the V25 surface tokens are
     TRANSLUCENT by design — rgba(255,255,255,.055) — so they pick up whatever
     is behind them. That is right for a panel sitting on the page and wrong for
     a popover floating over content: the card underneath showed straight
     through the menu, its title and badge reading over the two options. Every
     other floating surface in the app already uses an opaque value; this was
     the only one that did not. */
  background: #1B1D1D;
  border: 1px solid var(--t1-hairline-str, #2a2f2f);
  border-radius: var(--t1-r-card, 14px);
  box-shadow: 0 18px 44px rgba(0, 0, 0, .6);
}
.print-menu button {
  display: block; width: 100%; min-height: 52px; padding: 8px 12px;
  text-align: left; border: 0; border-radius: var(--t1-r-row, 11px);
  background: transparent; color: var(--text, #e9e6e1); cursor: pointer;
}
.print-menu button + button { margin-top: 2px; }
.print-menu button:hover { background: rgba(201, 169, 97, .12); }
.print-menu b { display: block; font: 600 14px/1.2 Inter, sans-serif; }
.print-menu em {
  display: block; margin-top: 2px; font: 400 11.5px/1.3 Inter, sans-serif;
  font-style: normal; color: var(--text-muted, #8b9090);
}

/* Scorecard editor note (V26.20) — a scorecard's questions live in the seed
   script so the printed sheet and the Recruitment module cannot disagree. */
.docs-score-note {
  padding: 14px 16px; margin: 4px 0 8px;
  background: var(--t1-surface, #141616);
  border: 1px solid var(--t1-hairline, #262a2a);
  border-left: 3px solid var(--gold, #C9A961);
  border-radius: var(--t1-r-card, 14px);
  font-size: 13px; line-height: 1.55; color: var(--text-muted, #8b9090);
}
.docs-score-note b { display: block; color: var(--text, #e9e6e1); margin-bottom: 4px; }
.docs-score-note code {
  font-family: ui-monospace, Menlo, monospace; font-size: 12px;
  color: var(--gold, #C9A961);
}

/* ---- Touch targets, app-wide (V26.27) ----
   Audited every module at 440×956 by measuring rendered heights rather than
   reading markup. Three things were under the 44px minimum on EVERY page,
   which is why they had never been noticed as a per-page bug:

   · .mobile-topbar .topbar-settings — 42px. The settings gear, top-right, on
     all 21 pages.
   · .nav-link — 41px. The drawer rows AND the bottom-bar items.
   · .btn-small — 27px. 49 of them on Users alone (per-user Change Password,
     Till PIN, Delete), and 39 uses across 16 files. A 27px destructive control
     on a phone is a mis-tap waiting to happen.

   Only raised on COARSE POINTERS. A mouse is precise and 27px is a perfectly
   good desktop button; forcing 44px everywhere would inflate dense admin tables
   that work well as they are. */
/* ⚠ Gated on the CANONICAL MOBILE PAIR, not on pointer type. The first version
   of this used `(hover:none),(pointer:coarse)` and was silently INERT in every
   environment where the mobile shell is actually active but a mouse is present
   — a narrow desktop window, a tablet in desktop mode, and the audit harness
   that was measuring it. The mobile layout in this app switches on WIDTH, so
   anything sized for that layout has to switch on the same condition or the two
   disagree. This is the pair documented in CLAUDE.md and used by 27 other
   rules. */
@media (max-width: 768px), (max-height: 640px) and (pointer: coarse) {
  .mobile-topbar .topbar-settings { flex: 0 0 44px; width: 44px; height: 44px; }
  .nav-link { min-height: 44px; }
  /* padding-block:0 so min-height does the work — leaving 5px padding on top of
     a 44px floor would make these 54px and break the rows they sit in. */
  .btn-small { min-height: 44px; padding-top: 0; padding-bottom: 0; }
  /* THE BASE BUTTON ITSELF was 39px — 10px padding on a 14px line. Every plain
     .btn in the app inherited that, and only the ones that had been given an
     explicit height (docked primaries at 54, sheet buttons at 48) escaped it.
     Found via #addUserBtn, which is as ordinary a button as exists here. */
  .btn { min-height: 44px; }
  /* .btn-tiny renders at 23px — the smallest interactive control in the app,
     and it is used for row actions in HR. */
  .btn-tiny { min-height: 44px; padding-top: 0; padding-bottom: 0; }
  /* Tab strips and filter chips: 29px and 38px. These are the primary
     navigation of the page they sit on, so they are tapped constantly. */
  .perf-tab { min-height: 44px; }
  .hol-chip { min-height: 44px; }
  /* Dashboard: the Ops Now chips a manager taps to jump to what needs attention,
     and the follow-up lead rows that deep-link into the CRM. Both are the whole
     point of the card they sit in. */
  .ops-chip { min-height: 44px; }
  .db-fu-lead, .db-training-item { min-height: 44px; }
  /* Rota's My Week / Full Team toggle, at 34px the smallest thing left in the
     app — and it is how a staff member switches what the page is showing. */
  .rota-dock-row .btn, #btnMineDock, #btnTeamDock { min-height: 44px; }
  /* Cash Up and Clock row actions (view / edit / delete an entry) at 34px, and
     the training certificate buttons at 26px — the smallest remaining in the
     app. Both are icon-only, which makes an undersized target worse: there is
     no label edge to aim at, only the glyph. */
  .cu-icon-btn { min-width: 44px; min-height: 44px; }
  .tr-cert-btn { min-height: 44px; padding-top: 0; padding-bottom: 0; }
  /* Allergens search: the pill and its clear button, matching the CRM and till
     search treatment those were modelled on. */
  #alSearch { min-height: 44px; }
  #alSearchClear { min-width: 44px; min-height: 44px; }
  /* The dashboard's red-outline pills ("View all follow-ups", "Continue
     training") — not .btn, so the base floor never reached them. */
  .db-pill-btn { min-height: 44px; }
  /* CRM: the dashboard deep-links at 23px were the smallest control found
     anywhere in this audit, and they are how a manager opens the lead the card
     is telling them about. The pipeline tabs are that page's primary nav. */
  .crm-db-link { min-height: 44px; }
  .pipeline-tab { min-height: 44px; }
  /* Floor plan row actions. .btn-small is floored above, but these carry a
     variant class too and a floorplan-local rule was winning. */
  .fp-plan-card .btn, .fp-plan-card .btn-small { min-height: 44px; }
  /* Two I built THIS session and never measured: the Documents print-style
     toggle and the Till Reports tab strip. Same mistake as everywhere else —
     designed at a comfortable desktop size and never checked at 440px. */
  .pstyle-switch button { min-height: 44px; }
  .ta-tab { min-height: 44px; }
  /* The CRM dock's segmented controls — PH / LG / afternoon / evening and the
     list-vs-board switcher — at 34px. These are the filters Filip uses daily,
     and they were the last thing in the app under the minimum. */
  .tb-segmented button { min-height: 44px; }
  .tb-filter-btn { min-height: 44px; }
}

/* CRM dashboard leads now use the SAME card as the list and calendar views, so
   the phone actions (call / text / copy / save to contacts) are available from
   the dashboard too. They sit inside .crm-db-card, which has its own padding —
   these just need separating from each other. */
.crm-db-lead + .crm-db-lead { margin-top: 8px; }
.crm-db-card .crm-db-lead:first-of-type { margin-top: 2px; }

/* Enquiry types: PH · LG · RB, plus untyped (V26.39).
   RB (regular booking) is the third real category. Untyped renders NO badge at
   all — a web enquiry arrives unclassified and saying so is more useful than
   guessing, which is what defaulting everything to PH was doing. */
.type-badge.type-rb {
  background: rgba(74, 142, 190, .18); color: #7FB8DE;
  border: 1px solid rgba(74, 142, 190, .45);
}
/* Enquiry type is a 3-letter choice — it does not need a third of the row.
   The names take the space instead. */
.form-row-name { align-items: end; }
.form-row-name .fg-type { flex: 0 0 92px; max-width: 92px; }
@media (max-width: 768px), (max-height: 640px) and (pointer: coarse) {
  .form-row-name { display: flex; flex-wrap: wrap; gap: 10px; }
  .form-row-name .fg-type { flex: 0 0 84px; max-width: 84px; }
  .form-row-name .form-group:not(.fg-type) { flex: 1 1 40%; min-width: 0; }
}


/* CRM — "changed on another device" notice (V26.56).
   Amber, not red: nothing has gone wrong, the form is simply looking at an
   older copy. Red here would read as an error the user caused. */
.crm-stale {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  margin: 0 0 14px; padding: 10px 14px; border-radius: 10px;
  border: 1px solid rgba(201, 169, 97, .45); background: rgba(201, 169, 97, .10);
  color: var(--gold, #C9A961); font: 500 13px/1.4 Inter, sans-serif;
}
.crm-stale[hidden] { display: none; }
.crm-stale button {
  margin-left: auto; min-height: 36px; padding: 0 14px; border-radius: 8px;
  border: 1px solid var(--gold, #C9A961); background: transparent;
  color: var(--gold, #C9A961); font: 600 13px/1 Inter, sans-serif; cursor: pointer;
}
.crm-stale button:active { background: rgba(201, 169, 97, .18); }

/* ============================================================================
   V26.60 — RECRUITMENT: applicants as CRM contacts
   Pipeline board / trial calendar / list, and the applicant record modal.
   The calendar deliberately reuses the .crm-cal-* block above rather than
   getting its own: it is the same question asked of different rows, and two
   calendars that look different inside one app is two things to learn.
   ========================================================================= */
.rec-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }

.rec-view-switch { display: flex; gap: 2px; background: var(--t1-surface-2, #16191a);
  border: 1px solid var(--t1-hairline, #262a2a); border-radius: var(--t1-r-ctl, 11px); padding: 3px; }
.rec-view-switch button {
  min-height: 34px; padding: 0 14px; border: 0; border-radius: 8px; cursor: pointer;
  background: transparent; color: var(--text-muted);
  font: 600 12.5px/1 'Space Grotesk', sans-serif; letter-spacing: .02em;
}
.rec-view-switch button.active { background: var(--brand-red, #8C1410); color: #fff; }

/* ---- Pipeline board ---- */
.rec-board { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(212px, 1fr);
  gap: 12px; overflow-x: auto; padding: 4px 2px 8px; align-items: start; }
.rec-col { background: var(--t1-surface, #141616); border: 1px solid var(--t1-hairline, #262a2a);
  border-radius: var(--t1-r-card, 16px); padding: 10px 10px 4px; min-width: 0; }
.rec-col-h { margin: 0 0 8px; display: flex; align-items: center; justify-content: space-between; gap: 8px;
  font: 600 12px/1 'Space Grotesk', sans-serif; letter-spacing: .08em; text-transform: uppercase;
  color: var(--text-muted); }
.rec-col-n { min-width: 22px; text-align: center; padding: 2px 6px; border-radius: 999px;
  background: var(--t1-surface-2, #16191a); color: var(--text); font-size: 11px; letter-spacing: 0; }
.rec-col-body { display: flex; flex-direction: column; gap: 8px; }
.rec-col-empty { margin: 2px 0 8px; color: var(--text-muted); font-size: 13px; }
.rec-col .hr-card { margin: 0; }

/* ---- First impression. Filip's own words, so no translation step mid-interview. ---- */
.fi-scale { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.fi-btn { min-height: 40px; padding: 0 14px; cursor: pointer; border-radius: 999px;
  background: var(--t1-surface-2, #16191a); color: var(--text-muted);
  border: 1px solid var(--t1-hairline, #262a2a);
  font: 600 13px/1 'Space Grotesk', sans-serif; }
.fi-btn.on { color: #fff; border-color: transparent; }
.fi-btn.fi-no.on     { background: #8C2018; }
.fi-btn.fi-maybe.on  { background: #8A5A12; }
.fi-btn.fi-okay.on   { background: #6F6A2E; }
.fi-btn.fi-good.on   { background: #2E6B3E; }
.fi-btn.fi-strong.on { background: #1F7A4C; }
.fi-clear { min-height: 40px; min-width: 40px; cursor: pointer; border-radius: 999px;
  background: transparent; border: 1px solid var(--t1-hairline, #262a2a); color: var(--text-muted); }

/* The same five states, read-only, on a card.
   ⚠ SCOPED TO .fi-pill. These were bare .fi-no / .fi-good etc, which also
   matched the BUTTONS of the same name — so every option in the scale rendered
   filled and the sheet showed all five as if all five were chosen. Caught by
   opening it, not by reading the diff. */
.fi-pill { flex: 0 0 auto; padding: 3px 9px; border-radius: 999px; color: #fff;
  font: 600 11px/1.5 'Space Grotesk', sans-serif; letter-spacing: .03em; }
.fi-pill.fi-no     { background: #8C2018; } .fi-pill.fi-maybe { background: #8A5A12; }
.fi-pill.fi-okay   { background: #6F6A2E; } .fi-pill.fi-good  { background: #2E6B3E; }
.fi-pill.fi-strong { background: #1F7A4C; }
.hr-card .fi-pill { align-self: flex-start; }

/* ---- Applicant record modal ---- */
.cand-modal-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.cand-sec-h { margin: 20px 0 8px; padding-top: 14px; border-top: 1px solid var(--t1-hairline, #262a2a);
  font: 600 12px/1 'Space Grotesk', sans-serif; letter-spacing: .09em; text-transform: uppercase;
  color: var(--gold, #C9A961); }
.cand-hint { margin: 6px 0 0; font-size: 12.5px; line-height: 1.5; color: var(--text-muted); }
/* The notes box is the point of the screen, so it is given the room to look
   like it — a 3-row textarea invites three lines. */
.cand-notes-group textarea { min-height: 190px; line-height: 1.55; }
.cand-phone-actions { display: flex; gap: 8px; flex-wrap: wrap; margin: -4px 0 4px; }
.cand-phone-actions .btn { min-height: 40px; }

.cand-fold { margin-top: 20px; border-top: 1px solid var(--t1-hairline, #262a2a); padding-top: 14px; }
.cand-fold > summary { cursor: pointer; list-style: none; min-height: 44px; display: flex;
  align-items: center; gap: 8px; flex-wrap: wrap;
  font: 600 12px/1 'Space Grotesk', sans-serif; letter-spacing: .09em; text-transform: uppercase;
  color: var(--gold, #C9A961); }
.cand-fold > summary::-webkit-details-marker { display: none; }
.cand-fold > summary::before { content: '▸'; color: var(--text-muted); }
.cand-fold[open] > summary::before { content: '▾'; }
.cand-fold-sub { font-weight: 400; letter-spacing: .01em; text-transform: none; color: var(--text-muted); font-size: 12px; }
.cand-footer { display: flex; gap: 8px; flex-wrap: wrap; }
.cand-footer .btn-danger { margin-right: auto; }

@media (max-width: 768px), (max-height: 640px) and (pointer: coarse) {
  /* One stage fills the phone and the next peeks, the same pager shape the CRM
     board uses — five columns squeezed onto a phone is five unreadable ones. */
  .rec-board { grid-auto-columns: 86%; scroll-snap-type: x mandatory; }
  .rec-col { scroll-snap-align: start; }
  .rec-view-switch button { min-height: 44px; padding: 0 12px; }
  .fi-btn, .fi-clear { min-height: 44px; }
  .cand-footer .btn-danger { margin-right: 0; width: 100%; order: 3; }
}