/* ── Rostrum MVP — Redesigned to match sketch ─────────────────────────────── */

:root {
  --bg: #f1f5f9;
  --bg-card: #ffffff;
  --bg-sidebar: #ffffff;
  --border: #e2e8f0;
  --border-light: #f1f5f9;
  --text: #1e293b;
  --text-muted: #64748b;
  --text-light: #94a3b8;
  --accent: #2563eb;
  --accent-hover: #1d4ed8;
  --accent-light: #dbeafe;
  --surface-subtle: #f8fafc;
  --danger: #ef4444;
  --danger-light: #fee2e2;
  --success: #22c55e;
  --success-light: #dcfce7;
  --warning: #f59e0b;
  --warning-light: #fef3c7;
  /* "strong" text tints — the darker on-soft text shades (#171/#166 residue).
     Same values as before; now one token per semantic instead of ~43 raw hexes. */
  --danger-strong: #b91c1c;    /* red-700   — text on danger-soft */
  --warning-strong: #92400e;   /* amber-800 — text on warning/note-soft */
  --success-strong: #166534;   /* green-800 — text on success-soft */
  --slate-600: #475569;        /* mid-dark slate — secondary emphasis text */
  --radius: 8px;
  --radius-lg: 12px;
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.08);
  --shadow: 0 2px 8px rgba(0,0,0,0.1);
  --dark: #1e293b;
  --dark-hover: #334155;
  --overlay-light: rgba(255,255,255,0.15);
  --overlay-medium: rgba(255,255,255,0.25);
  --warning-bg: #fef9c3;
  --warning-border: #facc15;
  --warning-text: #78350f;
  --note-bg: #fef3c7;
  --note-border: #f59e0b;
  --note-text: var(--warning-strong);
  --tag-w-full: 260px;
  --tag-w-half: 130px;
  --tag-h: 40px;
  --tag-radius: 10px;
  --am-color: #1e40af;
  --pm-color: #b45309;
  --am-soft: #dbeafe;
  --pm-soft: #fef3c7;
  --avatar-w: 0; /* reserved for future avatar slot */
  /* Leave-type canon (DESIGN.md): one hue per concept on every surface.
     Same hexes may appear as modality/grade colours in app.js data — separate concepts, keep separate tokens. */
  --leave-sick: var(--danger);
  --leave-sick-soft: var(--danger-light);
  --leave-annual: #1e40af;
  --leave-annual-soft: #dbeafe;
  --leave-study: #0891b2;
  --leave-study-soft: #cffafe;
  --leave-parents: #0f766e;
  --leave-parents-soft: #ccfbf1;
  --leave-longterm: #7c3aed;
  --leave-longterm-soft: #ede9fe;
  /* Profile balance-card accents (#171) — AL reads the leave-annual canon;
     TOIL/DKP are not leave concepts, so they keep their own accent families. */
  --balance-toil: #f97316;        /* orange-500 border */
  --balance-toil-strong: #c2410c; /* orange-700 number */
  --balance-toil-soft: #fff7ed;   /* orange-50 fill */
  --balance-dkp: #8b5cf6;         /* violet-500 border */
  --balance-dkp-strong: #6d28d9;  /* violet-700 number */
  --balance-dkp-soft: #f5f3ff;    /* violet-50 fill */
  --lead-gold: #eab308;
  --training: #4f46e5;        /* #162 — present-and-learning (≠ study-cyan = absent) */
  --training-soft: #e0e7ff;
  --radius-sm: 4px;
  --radius-pill: 9999px;
  --danger-hover: #dc2626;
  --success-hover: #16a34a; /* green-600 — hover fill for success-filled buttons, mirrors --danger-hover */
  --focus-ring: 0 0 0 2px rgba(37,99,235,0.2);
  --phone-bezel: #0f172a;   /* slate-900 — staff-app preview device frame (Session 50) */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-7: 32px;
}

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

html, body {
  min-height: 100vh;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 13px;
  background: var(--bg);
  color: var(--text);
}

button, select { font: inherit; cursor: pointer; }

/* ── Base buttons (#169, DESIGN.md components) ─────────────────────────────────
   Phase B (2026-07-12): rota week-nav re-classed onto .btn/.btn-ghost/.btn-sm;
   topbar nav re-scoped `.topbar-nav button` → `.topbar-tab`. Migration note:
   context selectors (0,1,1) outweigh these class-only rules (0,1,0); re-scope
   to a class when migrating a button, don't !important. */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: var(--sp-2) var(--sp-4); /* md */
  border-radius: var(--radius);
  border: 1px solid transparent;
  font: inherit; font-size: 13px; font-weight: 600;
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s, color 0.12s;
}
.btn:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.btn:disabled { opacity: 0.45; cursor: not-allowed; }
.btn-primary { background: var(--accent); color: #fff; }
.btn-primary:hover:not(:disabled) { background: var(--accent-hover); }
.btn-secondary { background: var(--bg-card); color: var(--accent); border-color: var(--border); }
.btn-secondary:hover:not(:disabled) { border-color: var(--accent); background: var(--surface-subtle); }
.btn-ghost { background: transparent; color: var(--accent); }
.btn-ghost:hover:not(:disabled) { background: var(--accent-light); }
.btn-destructive { background: var(--danger); color: #fff; }
.btn-destructive:hover:not(:disabled) { background: var(--danger-hover); }
.btn-sm { padding: 6px 12px; font-size: 12px; }
.btn-lg { padding: 12px 24px; font-size: 14px; }

/* ── Top bar ──────────────────────────────────────────────────────────────── */

.shell {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.topbar {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 10px var(--sp-5);
  background: var(--dark);
  color: var(--surface-subtle);
  font-size: 13px;
  position: sticky;
  top: 0;
  z-index: 10;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-weight: 700;
  font-size: 16px;
  letter-spacing: 0.01em;
  color: var(--surface-subtle);
}
.brand-mark { flex: none; display: block; }
.brand-wm { line-height: 1; }

.hospital-name {
  flex: 1;
  text-align: center;
  color: #cbd5e1;
}

.today-date {
  color: var(--text-light);
  font-size: 12px;
}

.topbar-nav {
  display: flex;
  gap: 6px;
  margin-left: var(--sp-4);
}

.topbar-tab {
  padding: 6px 14px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.15);
  background: transparent;
  color: #cbd5e1;
  font-size: 12px;
  transition: all 150ms;
}

.topbar-tab:hover { background: rgba(255,255,255,0.1); }
/* #209 (Session 50c) — the ONE blue accent, not amber: amber reads as
   "warning" on the same screen (no-lead chips, understaffed pills). */
.topbar-tab.is-active {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
  font-weight: 600;
}
.topbar-tab.is-active:hover { background: var(--accent-hover); border-color: var(--accent-hover); }

/* ── Layout shell ─────────────────────────────────────────────────────────── */

.layout-shell {
  display: grid;
  grid-template-columns: 320px minmax(0, 1fr);
  flex: 1;
  min-height: 0;
}

/* ── Sidebar ──────────────────────────────────────────────────────────────── */

.sidebar {
  background: var(--bg-sidebar);
  border-right: 1px solid var(--border);
  padding: 0;
  overflow-y: auto;
  height: calc(100vh - 44px);
  position: sticky;
  top: 44px;
}

.day-tabs {
  display: flex;
  gap: 0;
  border-bottom: 1px solid var(--border);
  padding: 0;
}

.day-tab {
  flex: 1;
  padding: 10px var(--sp-1);
  border: none;
  background: transparent;
  color: var(--text-muted);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border-bottom: 2px solid transparent;
  transition: all 150ms;
}

.day-tab:hover { background: var(--bg); }
.day-tab.is-active {
  color: var(--accent);
  border-bottom-color: var(--accent);
  background: var(--accent-light);
}

.pool-section {
  padding: var(--sp-3) 14px var(--sp-2);
  border-bottom: 1px solid var(--border-light);
}

.pool-section h3 {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  margin-bottom: var(--sp-2);
  font-weight: 700;
}

/* ── Staff filter bar ────────────────────────────────────────────────────────── */
.staff-filter-bar {
  padding: var(--sp-2) 10px 6px;
  border-bottom: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 6px;
  background: var(--bg-sidebar);
}
.staff-filter-search {
  display: flex;
  align-items: center;
  gap: 6px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 0 var(--sp-2);
}
.staff-filter-search:focus-within { border-color: var(--accent); background: var(--bg-card); }
.filter-search-icon { color: var(--text-light); flex-shrink: 0; }
.filter-search-input {
  flex: 1;
  border: none;
  background: none;
  font-size: 12px;
  color: var(--text);
  padding: 5px 0;
  outline: none;
  min-width: 0;
}
.filter-search-input::placeholder { color: var(--text-light); }
.filter-search-clear {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--text-muted);
  font-size: 14px;
  padding: 0 2px;
  line-height: 1;
  flex-shrink: 0;
}
.filter-search-clear:hover { color: var(--text); }
.filter-chips-row {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
.filter-chip {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 3px var(--sp-2);
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--bg-card);
  color: var(--text-muted);
  cursor: pointer;
  transition: all 0.12s;
}
.filter-chip:hover { border-color: var(--accent); color: var(--accent); }
.filter-chip.is-active { background: var(--accent); border-color: var(--accent); color: #fff; }
.filter-room-row { display: flex; }
.filter-room-chip {
  display: flex;
  align-items: center;
  gap: 6px;
  background: var(--room-accent, var(--accent));
  color: #fff;
  border-radius: 999px;
  padding: 3px 6px 3px 10px;
  font-size: 11px;
  font-weight: 600;
  max-width: 100%;
  overflow: hidden;
}
.filter-room-chip span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.filter-room-clear {
  background: rgba(255,255,255,0.25);
  border: none;
  border-radius: 50%;
  width: 16px;
  height: 16px;
  cursor: pointer;
  color: #fff;
  font-size: 11px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  padding: 0;
  line-height: 1;
}
.filter-room-clear:hover { background: rgba(255,255,255,0.45); }
.pool-count-total { font-size: 10px; color: var(--text-muted); font-weight: 500; }

.pool-count {
  display: inline-block;
  background: var(--bg);
  border-radius: 999px;
  padding: 1px 7px;
  font-size: 10px;
  color: var(--text-muted);
  margin-left: var(--sp-1);
}

.pool-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.pool-item {
  display: flex;
  align-items: center;
  gap: 6px;
}

.pool-actions {
  display: flex;
  gap: 3px;
  flex-shrink: 0;
}

.pool-actions button {
  width: 26px;
  height: 26px;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition: all 150ms;
}

.pool-actions button:hover {
  background: var(--accent-light);
  border-color: var(--accent);
  color: var(--accent);
}

.pool-actions button[data-restore-sick] {
  width: auto;
  padding: var(--sp-1) 10px;
  font-size: 11px;
  font-weight: 600;
}

/* ── Unified staff tag ────────────────────────────────────────────────────────
   Single visual used in sidebar and daily rooms.
   Fixed width (--tag-w-full); inner content uses text-overflow:ellipsis if it
   overruns the inner flex box.
*/
.staff-tag {
  width: var(--tag-w-full);
  height: var(--tag-h);
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  padding: var(--sp-1) var(--sp-2);
  border: 1px solid var(--border);
  border-radius: var(--tag-radius);
  background: var(--bg-card);
  color: var(--text);
  text-align: left;
  font-size: 12px;
  font-weight: 500;
  transition: border-color 150ms, box-shadow 150ms, background 150ms;
  cursor: grab;
}
.staff-tag:active { cursor: grabbing; }
.staff-tag:hover {
  border-color: var(--accent);
  box-shadow: var(--shadow-sm);
}
.staff-tag.is-selected {
  border-color: var(--accent);
  background: var(--accent-light);
  box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.2);
}
.staff-tag.is-dragging {
  opacity: 0.4;
  outline: 2px dashed var(--accent);
}
.staff-tag.is-placed:hover {
  background: var(--danger-light);
  border-color: var(--danger);
  color: var(--danger);
}

/* AM / PM zones — left and right edge pills on a fullday tag.
   Each is a small dark pill labelled AM or PM; users can drag from a zone to
   pick up just that half, or drag from the body to pick up the whole day.
   On half-tags only the matching pill is rendered. */
.staff-tag-zone-am,
.staff-tag-zone-pm {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 18px;
  padding: 0 var(--sp-1);
  border-radius: 999px;
  font-size: 9px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0.04em;
  color: #fff;
  cursor: grab;
  user-select: none;
  opacity: 0;
  pointer-events: none;
  transition: opacity 150ms, background 150ms;
}
.staff-tag-zone-am { background: var(--am-color); }
.staff-tag-zone-pm { background: var(--pm-color); }
.staff-tag:hover .staff-tag-zone-am,
.staff-tag:hover .staff-tag-zone-pm {
  opacity: 1;
  pointer-events: auto;
}
.staff-tag.is-half-am .staff-tag-zone-am {
  opacity: 1;
  pointer-events: auto;
}
.staff-tag.is-half-am .staff-tag-zone-pm { display: none; }

.staff-tag.is-half-pm .staff-tag-zone-pm {
  opacity: 1;
  pointer-events: auto;
}
.staff-tag.is-half-pm .staff-tag-zone-am { display: none; }
.staff-tag-zone-am:hover,
.staff-tag-zone-pm:hover { filter: brightness(1.1); }
.staff-tag-zone-am:active,
.staff-tag-zone-pm:active { cursor: grabbing; }
.staff-tag-zone-label { pointer-events: none; }

/* Body — the centre region that drags as a fullday */
.staff-tag-body {
  flex: 1 1 auto;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  min-width: 0;
}

/* Half-tag = fixed width with curved outer corner + flat inner corner with
   coloured dashed border showing which half (AM blue / PM amber) is filled. */
.staff-tag.is-half-am {
  width: var(--tag-w-half);
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  border-right: 2px dashed var(--am-color);
}
.staff-tag.is-half-pm {
  width: var(--tag-w-half);
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  border-left: 2px dashed var(--pm-color);
}

/* Hide modality stripes on half-tags only — fullday tags keep them visible. */
.staff-tag.is-half-am .staff-stripes,
.staff-tag.is-half-pm .staff-stripes {
  display: none;
}

/* Display-only tags (On Call Tonight) — read-only mirror of someone's day. */
.staff-tag.is-display-only {
  cursor: default;
  opacity: 0.92;
}
.staff-tag.is-display-only .staff-tag-zone-am,
.staff-tag.is-display-only .staff-tag-zone-pm {
  display: none;
}
.staff-tag.is-display-only:hover {
  border-color: var(--border);
  box-shadow: none;
}

/* Name shrinks with ellipsis when the tag is narrow */
.staff-name {
  flex: 1 1 auto;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-weight: 500;
}

/* Skill stripes stay visible on wide tags, hide when extremely narrow */
.staff-stripes {
  display: inline-flex;
  gap: 3px;
  flex-shrink: 0;
}
.staff-tag.ctx-room .staff-stripes {
  /* Room slot tags are usually narrower — still show stripes but smaller gap */
  gap: 2px;
}

.skill-stripe {
  width: 5px;
  height: 18px;
  border-radius: 2px;
}

.empty-copy {
  color: var(--text-light);
  font-size: 12px;
  font-style: italic;
  padding: var(--sp-1) 0;
}

.sidebar-message {
  padding: var(--sp-3) 14px;
  border-top: 1px solid var(--border-light);
}

.sidebar-message p {
  font-size: 12px;
  color: var(--text-muted);
  line-height: 1.4;
}

/* ── Main area / room grid ────────────────────────────────────────────────── */

.main-area {
  padding: var(--sp-4);
  overflow-y: auto;
}

.rooms-grid {
  display: grid;
  /* Fixed 320px columns aligned to sidebar (260px slot-names + 36px grade label + 4px gap + 16px padding = 316px, with 4px slack). Extra horizontal space becomes a gap on the right. */
  grid-template-columns: repeat(auto-fill, 320px);
  gap: 12px;
  justify-content: start;
}

/* ── Room cards ───────────────────────────────────────────────────────────── */

.room-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: opacity 150ms, transform 150ms, box-shadow 150ms;
  box-shadow: var(--shadow-sm);
  /* Flex column so room-notes always sits at the very bottom of the card */
  display: flex;
  flex-direction: column;
}

.room-card.is-dimmed { opacity: 0.35; }
.room-card.is-highlighted {
  box-shadow: 0 0 0 2px var(--room-accent, var(--accent)), var(--shadow);
  transform: translateY(-1px);
}

.room-header {
  padding: var(--sp-2) var(--sp-3);
  /* --room-accent is set INLINE by app.js (renderRoomCard / filter chip) — it is not a
     :root token, so never "collapse" this fallback in a token migration. */
  background: var(--room-accent, var(--text-muted));
  color: #fff;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.02em;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  user-select: none;
  transition: filter 0.1s;
}
.room-header:hover { filter: brightness(1.12); }
.room-header.is-filter-active {
  outline: 3px solid #fff;
  outline-offset: -3px;
  filter: brightness(1.15);
}
.room-header-filter-badge {
  font-size: 10px;
  opacity: 0.85;
  flex-shrink: 0;
}

.room-unstaffable-badge {
  font-size: 11px;
  color: var(--warning);
  flex-shrink: 0;
  cursor: help;
}

.room-slots {
  padding: var(--sp-2) var(--sp-2) 10px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  /* Fills available space so notes are pushed to card bottom */
  flex: 1;
}

/* ── Capability flat room model (#142) ── */
.room-flat { gap: 5px; }
.room-flat.is-drop-target { outline: 2px dashed var(--accent); outline-offset: -2px; border-radius: var(--radius); }
.room-flat.is-droppable { background: var(--success-light); }
.room-person { display: flex; align-items: center; gap: 4px; }
/* Flat-model half pair (#146): two .room-half columns, each holding its own
   lead star + a flex-shrinking tag so two starred halves fit the 320px room
   card. Scoped to .room-person so the planner's .slot-names .slot-half-pair
   (old grade rows, 2 direct tag children at width:50%) is untouched. */
.room-person.slot-half-pair { width: 100%; gap: 4px; align-items: center; }
.room-person.slot-half-pair > .room-half {
  flex: 1 1 50%;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 2px;
}
.room-person.slot-half-pair > .room-half > .staff-tag,
.room-person.slot-half-pair > .room-half > .empty-slot.is-half {
  width: auto;
  flex: 1 1 auto;
  min-width: 0;
}
.room-lead-star {
  border: 0; background: none; cursor: pointer; flex: 0 0 auto;
  font-size: 17px; line-height: 1; color: var(--text-light);
  min-width: 26px; min-height: 26px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 6px; position: relative; z-index: 2;
}
.room-lead-star:hover { color: var(--warning); background: var(--warning-light); }
.room-lead-star.is-lead { color: var(--lead-gold); }
.room-cap {
  font-size: 11px; font-weight: 700; color: var(--text-muted);
  margin-left: auto; flex: 0 0 auto; padding: 1px 6px; border-radius: 999px; background: var(--bg);
}
.room-cap.is-under { color: var(--warning-text); background: var(--warning-light); }
.room-no-lead {
  font-size: 10px; font-weight: 600; color: var(--warning-text);
  background: var(--warning-light); padding: 1px 6px; border-radius: 999px; flex: 0 0 auto;
}
/* #150 — placed person now on leave/absence */
.room-leave-warn {
  font-size: 10px; font-weight: 700; color: var(--danger-strong);
  background: var(--danger-light); padding: 1px 6px; border-radius: 999px; flex: 0 0 auto; cursor: help;
}
.room-drop-zone {
  border: 1px dashed var(--border); background: transparent; color: var(--text-light);
  border-radius: var(--radius); padding: 6px 8px; font-size: 12px; cursor: pointer;
  text-align: center; width: 100%;
}
.room-drop-zone:hover { border-color: var(--accent); color: var(--accent); }
/* Closed room (#136) */
.room-card.is-closed { opacity: 0.7; }
.room-card.is-closed .room-flat { background: repeating-linear-gradient(45deg, var(--bg), var(--bg) 8px, var(--border-light) 8px, var(--border-light) 10px); }
.room-closed-tag { margin-left: auto; font-size: 10px; font-weight: 700; color: var(--danger); background: var(--danger-light); padding: 1px 7px; border-radius: 999px; }
.room-closed-banner { text-align: center; color: var(--text-muted); font-size: 13px; font-weight: 600; padding: 18px 8px; }
.room-close-toggle { width: 100%; margin-top: 4px; border: 1px solid var(--border); background: transparent; color: var(--text-muted); border-radius: var(--radius); padding: 4px 8px; font-size: 11px; cursor: pointer; }
.room-close-toggle:hover { border-color: var(--danger); color: var(--danger); }
.room-close-toggle.is-closed { border-color: var(--success); color: var(--success-strong); }
.room-drop-zone.is-droppable { border-color: var(--success); color: var(--success-strong); background: var(--success-light); }
.room-drop-zone.is-drop-target { border-style: solid; border-color: var(--accent); background: var(--accent-light); color: var(--accent); }

.slot-row {
  display: flex;
  align-items: flex-start;
  gap: 4px;
  min-height: 22px;
}

.grade-label {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  width: 36px;
  flex-shrink: 0;
  /* Align with the first slot on the right */
  padding-top: 6px;
  /* Truncate longer grade names (e.g. "Radiographer", "Rad Assistant") at narrow width */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.slot-names {
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: var(--tag-w-full);
  align-items: stretch;
}

/* Inside slot-names (a 260px-wide vertical column), each child fills the column width.
   align-items: stretch on the parent handles width; flex: 0 0 auto keeps each child at
   its natural height (no vertical inflation in column mode). */
.slot-names > .staff-tag,
.slot-names > .empty-slot,
.slot-names > .slot-half-pair {
  flex: 0 0 auto;
}

/* Split pair container — one row with an AM half and a PM half side by side.
   Parent .slot-names is 260px; this pair is 100% = 260px; each child flex 1 1 50% = 130px. */
.slot-half-pair {
  display: flex;
  gap: 4px;
  width: 100%;
  align-items: stretch;
}
.slot-half-pair > .staff-tag,
.slot-half-pair > .empty-slot {
  width: 50%;
  min-width: 0;
}

/* Half-slot empty state — visually a half-width empty slot with a period chip. */
.empty-slot.is-half {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  gap: 6px;
  padding: 3px var(--sp-2);
}
/* "+ AM" companion sits on the LEFT (next to a PM half on its right).
   Its right edge meets the PM half's left edge — both should show amber
   dashed. So the companion's right border is amber. Tinted background uses
   AM-soft to identify what's MISSING from this slot. */
.empty-slot.is-half[data-joined-side="left"] {
  width: var(--tag-w-half);
  height: var(--tag-h);
  border: 1px solid var(--border);
  border-right: 2px dashed var(--pm-color);
  border-top-left-radius: var(--tag-radius);
  border-bottom-left-radius: var(--tag-radius);
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  background: var(--am-soft);
  color: var(--am-color);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.03em;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* "+ PM" companion sits on the RIGHT (next to an AM half on its left).
   Its left edge meets the AM half's right edge — both should show blue
   dashed. So the companion's left border is blue. Tinted background uses
   PM-soft. */
.empty-slot.is-half[data-joined-side="right"] {
  width: var(--tag-w-half);
  height: var(--tag-h);
  border: 1px solid var(--border);
  border-left: 2px dashed var(--am-color);
  border-top-right-radius: var(--tag-radius);
  border-bottom-right-radius: var(--tag-radius);
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  background: var(--pm-soft);
  color: var(--pm-color);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.03em;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.empty-slot {
  font-size: 12px;
  color: var(--text-light);
  padding: 2px var(--sp-2);
  background: transparent;
  border: 1px dashed var(--border);
  border-radius: 4px;
  transition: all 150ms;
  min-width: 30px;
  text-align: center;
}

.empty-slot:hover:not(:disabled) {
  border-color: var(--success);
  background: var(--success-light);
  color: var(--success);
}

.empty-slot.is-drop-target {
  border-color: var(--success);
  background: var(--success-light);
  color: var(--success);
}

.empty-slot.is-droppable {
  border-color: var(--success);
  background: var(--success-light);
  color: var(--success);
  animation: droppable-pulse 1s ease-in-out infinite;
}
@keyframes droppable-pulse {
  0%, 100% { border-color: var(--success); }
  50% { border-color: var(--accent); background: var(--accent-light); }
}

.empty-slot:disabled {
  opacity: 0.4;
  cursor: default;
}
.empty-slot.is-ineligible {
  opacity: 0.4;
  cursor: default;
}
.empty-slot.is-eligible {
  border-color: var(--success);
  cursor: pointer;
}

/* Pool drop zone feedback (drag staff to sick/leave/rest). Scoped to the
   [data-drop-section] elements that ever receive these state classes —
   (0,2,0) outweighs any single-class pool styling without !important. */
[data-drop-section].is-pool-droppable {
  border: 2px dashed var(--text-light);
  border-radius: var(--radius);
  transition: all 150ms;
}
[data-drop-section].is-pool-drop-target {
  border-color: var(--success);
  background: var(--success-light);
}

/* (Legacy scissors button and split-pair styles removed — AM/PM halves now live
   intrinsically per-staff per-day; see .staff-tag-zone-am / -pm below.) */

/* No-skill + can-transfer modifiers for placed tags */
.staff-tag.no-skill {
  border-color: var(--warning);
  background: var(--warning-light);
}
.staff-tag.no-skill::after {
  content: " \26A0";
  margin-left: var(--sp-1);
  color: var(--warning-text);
}
.staff-tag.can-transfer {
  outline: 2px dashed var(--success);
  outline-offset: 2px;
  box-shadow: 0 0 0 1px var(--success-light);
}

/* ── Below rooms: On Call + Rest Day ──────────────────────────────────────── */

.below-rooms-divider {
  border-top: 2px solid var(--border);
  margin: var(--sp-6) 0 var(--sp-4);
}

.below-rooms-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.on-call-section,
.rest-day-section {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--sp-4);
  box-shadow: var(--shadow-sm);
}

.on-call-section h3,
.rest-day-section h3 {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  font-weight: 700;
  margin-bottom: var(--sp-2);
  padding-bottom: var(--sp-2);
  border-bottom: 1px solid var(--border-light);
}

.on-call-list,
.rest-day-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  min-height: 32px;
}

.on-call-placeholder {
  font-size: 12px;
  color: var(--text-light);
  font-style: italic;
  line-height: 1.5;
}

.rest-tag {
  font-size: 12px;
  color: var(--text);
  padding: var(--sp-1) var(--sp-3);
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-weight: 500;
}

/* ── Add-slot button + grade picker popup ─────────────────────────────────── */

.add-slot-row {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: var(--sp-1) 0 2px;
  position: relative;
}

.add-slot-btn {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1.5px dashed var(--border);
  background: transparent;
  color: var(--text-light);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition: all 150ms;
}

.add-slot-btn:hover,
.add-slot-btn.is-open {
  border-color: var(--success);
  color: var(--success);
  background: var(--success-light);
  border-style: solid;
}

/* Grade picker popup — floats above the + button */
.grade-picker-popup {
  position: absolute;
  bottom: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
  background: var(--dark);
  border-radius: var(--radius);
  padding: 6px;
  display: flex;
  gap: 4px;
  z-index: 50;
  box-shadow: 0 4px 16px rgba(0,0,0,0.25);
  white-space: nowrap;
}

.grade-picker-popup::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 5px solid transparent;
  border-top-color: var(--dark);
}

.grade-pick-btn {
  padding: var(--sp-1) 10px;
  border-radius: 4px;
  border: 1px solid rgba(255,255,255,0.15);
  background: transparent;
  color: #cbd5e1;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.03em;
  cursor: pointer;
  transition: all 120ms;
}

.grade-pick-btn:hover {
  background: var(--success);
  border-color: var(--success);
  color: #fff;
}

/* ── Room settings popup (gear icon) ──────────────────────────────────────── */

.room-gear-btn {
  background: none;
  border: none;
  color: rgba(255,255,255,0.5);
  cursor: pointer;
  padding: 2px var(--sp-1);
  margin-left: auto;
  line-height: 1;
  transition: color 120ms;
  flex-shrink: 0;
}
.room-gear-btn:hover { color: rgba(255,255,255,0.9); }

.room-header {
  display: flex;
  align-items: center;
  gap: 6px;
}
.room-header > span { cursor: pointer; }

.room-settings-popup {
  position: relative;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 10px var(--sp-3);
  margin: 0 10px 6px;
  box-shadow: var(--shadow);
  z-index: 40;
}

.rs-header {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
}
.rs-scope-label {
  font-size: 10px;
  color: var(--accent);
  font-weight: 600;
  margin: 2px 0 var(--sp-1);
}
.rs-scope-hint {
  font-size: 9px;
  color: var(--text-light);
  margin: 6px 0 0;
  font-style: italic;
  margin-bottom: var(--sp-2);
}

.rs-row {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 3px 0;
}

.rs-grade {
  font-size: 11px;
  font-weight: 600;
  color: var(--text);
  min-width: 50px;
}
.rs-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--text);
  flex: 1;
}
.rs-toggle-row {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--text);
  padding: 6px 0 2px;
  cursor: pointer;
}
.rs-leads { border-top: 1px solid var(--border-light); margin-top: 6px; padding-top: 6px; }
.rs-subhead { font-size: 11px; font-weight: 700; color: var(--text-muted); margin-bottom: 4px; }
.rs-lead-item { display: flex; align-items: center; gap: 6px; font-size: 12px; padding: 2px 0; }
.rs-lead-rank {
  flex: 0 0 auto; width: 16px; height: 16px; border-radius: 50%;
  background: var(--accent); color: #fff; font-size: 10px; font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center;
}
.rs-lead-name { flex: 1; }
.rs-lead-grade { font-size: 10px; color: var(--text-light); font-weight: 600; }

/* Add staff form (#144) */
.profile-add-staff-btn {
  margin-left: auto; padding: 6px 12px; border: 1px solid var(--accent);
  background: var(--accent); color: #fff; border-radius: var(--radius);
  font: inherit; font-size: 13px; font-weight: 600; cursor: pointer;
}
.profile-add-staff-btn:hover { background: var(--accent-light); color: var(--accent); }
.addstaff-form {
  background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-lg);
  padding: var(--sp-4) 18px; margin-bottom: 16px; max-width: 520px;
  display: flex; flex-direction: column; gap: 10px;
}
.addstaff-form h3 { margin: 0 0 4px; font-size: 15px; }
.addstaff-field { display: flex; flex-direction: column; gap: 4px; font-size: 12px; font-weight: 600; color: var(--text-muted); }
.addstaff-input { padding: 8px 10px; border: 1px solid var(--border); border-radius: var(--radius); font: inherit; font-size: 13px; color: var(--text); }
.addstaff-mods-label { display: block; margin-bottom: 4px; }
.addstaff-mods { display: flex; flex-wrap: wrap; gap: 8px; }
.addstaff-mod { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 500; color: var(--text); }
.addstaff-actions { display: flex; gap: 8px; margin-top: 4px; }
.rs-lead-remove { border: 0; background: none; color: var(--text-light); cursor: pointer; font-size: 14px; padding: 0 4px; }
.rs-lead-remove:hover { color: var(--danger); }
.rs-lead-add { width: 100%; margin-top: 4px; padding: 5px 8px; border: 1px solid var(--border); border-radius: var(--radius); font: inherit; font-size: 12px; }

.rs-btn {
  width: 22px;
  height: 22px;
  border-radius: 4px;
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--text);
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  line-height: 1;
}
.rs-btn:hover { background: var(--accent-light); border-color: var(--accent); color: var(--accent); }

.rs-count {
  font-size: 12px;
  font-weight: 700;
  color: var(--text);
  min-width: 18px;
  text-align: center;
}

.rs-add-grade {
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px solid var(--border-light);
}
.rs-add-grade select {
  font-size: 11px;
  padding: 3px 6px;
  border-radius: 4px;
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--text-muted);
  width: 100%;
}

.rs-close {
  position: absolute;
  top: 4px;
  right: 6px;
  background: none;
  border: none;
  font-size: 16px;
  color: var(--text-muted);
  cursor: pointer;
  padding: 2px var(--sp-1);
  line-height: 1;
}
.rs-close:hover { color: var(--danger); }

/* ── Weekend banner ───────────────────────────────────────────────────────── */

.weekend-banner {
  background: linear-gradient(135deg, var(--dark), var(--dark-hover));
  color: var(--surface-subtle);
  border-radius: var(--radius-lg);
  padding: var(--sp-6) 28px;
  margin-bottom: var(--sp-5);
}

.weekend-banner h2 {
  font-size: 18px;
  margin: 0 0 6px;
}

.weekend-banner p {
  font-size: 13px;
  color: var(--text-light);
  margin: 0;
}

.on-call-weekend {
  min-height: 200px;
}

.rest-day-tag {
  font-size: 12px;
  color: var(--text);
  padding: var(--sp-1) var(--sp-3);
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 6px;
  font-weight: 500;
  display: inline-block;
}

.rest-day-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.placeholder-text {
  font-size: 12px;
  color: var(--text-light);
  font-style: italic;
}

/* ── Staff app (Session 50 redesign) ──────────────────────────────────────────
   ONE markup for the manager preview (.phone-shell) and staff.html
   (.staff-standalone): slate header + hero band → light card body → icon tab
   bar. Leave + AM/PM colours follow the DESIGN.md canon; icons are iconSvg().
   Mobile base is 14px (manager stays 13px dense); inputs are 16px so iOS
   doesn't zoom on focus. */

svg.ic { flex: none; vertical-align: -0.15em; }

/* Manager-side preview surface */
.staff-surface {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-4);
  padding: var(--sp-5) var(--sp-4) var(--sp-7);
}
.staff-picker-bar {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: 13px;
  color: var(--text-muted);
}
.staff-picker-bar select {
  padding: 6px 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-card);
  color: var(--text);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
}
.staff-picker-bar select:focus-visible { outline: none; border-color: var(--accent); box-shadow: var(--focus-ring); }

/* Phone frame — the preview reads as a real handset in a demo */
.phone-shell {
  position: relative;
  width: 390px;
  max-width: 100%;
  height: min(812px, calc(100vh - 150px));
  min-height: 560px;
  padding: 10px;
  background: var(--phone-bezel);
  border-radius: 48px;
  box-shadow: 0 0 0 1px var(--dark-hover), 0 24px 48px -16px rgba(15, 23, 42, 0.45);
}
.phone-notch {
  position: absolute;
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
  width: 92px;
  height: 26px;
  border-radius: var(--radius-pill);
  background: var(--phone-bezel);
  z-index: 6;
}
.phone-shell::after {   /* home indicator */
  content: "";
  position: absolute;
  bottom: 18px;
  left: 50%;
  transform: translateX(-50%);
  width: 118px;
  height: 4px;
  border-radius: var(--radius-pill);
  background: var(--text);
  z-index: 6;
}
.phone-shell .sa { height: 100%; border-radius: 38px; overflow: hidden; }
.phone-shell .sa-top { padding-top: 50px; }
.phone-shell .sa-tabbar { padding-bottom: 26px; }
.phone-shell .sa-screen { scrollbar-width: none; }   /* phones don't show a scroll gutter */
.phone-shell .sa-screen::-webkit-scrollbar { display: none; }
.phone-shell .staff-toast { top: 104px; }

/* App frame */
.sa {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  color: var(--text);
  font-size: 14px;
  line-height: 1.4;
}
.sa-top {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--sp-3) var(--sp-4);
  background: var(--dark);
  color: #fff;
  position: relative;
  z-index: 2;
  box-shadow: 0 1px 0 var(--dark);   /* covers the sub-pixel seam onto the hero */
}
.sa-brand {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.01em;
}
.sa-avatar {
  width: 34px;
  height: 34px;
  padding: 0;
  border-radius: 50%;
  border: 1.5px solid var(--overlay-medium);
  background: var(--overlay-light);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.02em;
  display: grid;
  place-items: center;
  transition: background 150ms;
}
.sa-avatar:hover { background: var(--overlay-medium); }
.sa-avatar:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--overlay-medium); }
.sa-screen {
  flex: 1;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding-bottom: var(--sp-6);
}

/* Hero band — every tab opens with one */
.sa-hero {
  background: var(--dark);
  color: #fff;
  padding: var(--sp-1) var(--sp-5) var(--sp-6);
  border-radius: 0 0 24px 24px;
}
.sa-hero.is-home { padding-bottom: 48px; }
.sa-hero.is-profile { text-align: center; padding-top: var(--sp-2); }
.sa-hero-greet { margin: 0; font-size: 14px; color: var(--text-light); }
.sa-hero-title {
  margin: 2px 0 0;
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.15;
  color: #fff;
}
.sa-hero-sub {
  margin: var(--sp-1) 0 0;
  font-size: 13px;
  color: var(--text-light);
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--sp-2);
}
.sa-hero.is-profile .sa-hero-sub { justify-content: center; }
.sa-avatar-lg {
  width: 72px;
  height: 72px;
  margin: 0 auto var(--sp-3);
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--accent);
  color: #fff;
  font-size: 26px;
  font-weight: 700;
  box-shadow: 0 0 0 4px var(--overlay-light);
}
.sa-source {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px var(--sp-2);
  border-radius: var(--radius-pill);
  background: var(--overlay-light);
  color: var(--text-light);
  font-size: 11px;
  font-weight: 600;
}
.sa-source.is-cloud { color: #fff; }
.sa-source.is-cloud i { width: 6px; height: 6px; border-radius: 50%; background: var(--success); }

/* Body + cards */
.sa-body {
  padding: var(--sp-4);
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}
.sa-home > .sa-today:first-child { margin-top: -40px; }
.sa-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: var(--sp-4);
}
.sa-eyebrow {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
}
.sa-section { display: flex; flex-direction: column; gap: var(--sp-2); margin-top: var(--sp-2); }
.sa-section-title {
  margin: 0 var(--sp-1);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
}
.sa-list { padding: 0; overflow: hidden; }
.sa-list > * + * { border-top: 1px solid var(--border-light); }
.sa-list-month {
  padding: 6px var(--sp-4);
  background: var(--surface-subtle);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
}
.sa-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-1);
  padding: var(--sp-6) var(--sp-4);
  text-align: center;
  color: var(--text-muted);
  font-size: 13px;
}
.sa-empty svg.ic { color: var(--text-light); margin-bottom: var(--sp-1); }
.sa-empty strong { color: var(--text); font-size: 14px; }
.sa-footnote { margin: 0 var(--sp-1); font-size: 12px; line-height: 1.45; color: var(--text-light); }
.sa-error { margin: 0; font-size: 13px; color: var(--danger-strong); }

/* Today card */
.sa-today { display: flex; flex-direction: column; gap: var(--sp-2); box-shadow: var(--shadow); }
.sa-today-head { display: flex; align-items: center; justify-content: space-between; }
.sa-today-row { display: flex; align-items: stretch; gap: var(--sp-3); }
.sa-today-row + .sa-today-row { padding-top: var(--sp-2); border-top: 1px solid var(--border-light); }
.sa-bar { flex: none; width: 4px; border-radius: var(--radius-pill); background: var(--accent); }
.sa-today-title {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.25;
}
.sa-today-meta { margin-top: 2px; font-size: 13px; color: var(--text-muted); }
.sa-today.is-free .sa-bar,
.sa-today.st-rest .sa-bar,
.sa-today.st-partTimeOff .sa-bar,
.sa-today.st-partTimeLeave .sa-bar { background: var(--border); }
.sa-today.st-sick .sa-bar { background: var(--leave-sick); }
.sa-today.st-leave .sa-bar { background: var(--leave-annual); }
.sa-today.st-studyLeave .sa-bar { background: var(--leave-study); }
.sa-today.st-parentsLeave .sa-bar { background: var(--leave-parents); }
.sa-today.st-longTerm .sa-bar { background: var(--leave-longterm); }
.sa-chip {
  padding: 2px 10px;
  border-radius: var(--radius-pill);
  font-size: 11px;
  font-weight: 700;
}
.sa-chip.is-working { background: var(--success-light); color: var(--success-strong); }
.sa-period {
  padding: 1px 6px;
  border-radius: var(--radius-pill);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
}
.sa-period.is-am { background: var(--am-soft); color: var(--am-color); }
.sa-period.is-pm { background: var(--pm-soft); color: var(--pm-color); }

/* Balance tiles — equal columns for however many are enabled */
.sa-tiles { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: var(--sp-3); }
.sa-tile {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: var(--sp-3) var(--sp-4);
  min-width: 0;
}
.sa-tile-val {
  font-size: 24px;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}
.sa-tile-val small { margin-left: 1px; font-size: 13px; font-weight: 600; color: var(--text-light); }
.sa-tile-lbl { margin-top: 2px; font-size: 12px; font-weight: 500; color: var(--text-muted); }
.sa-tile.is-al .sa-tile-val { color: var(--leave-annual); }
.sa-tile.is-toil .sa-tile-val { color: var(--balance-toil-strong); }
.sa-tile.is-dkp .sa-tile-val { color: var(--balance-dkp-strong); }
.sa-meter {
  height: 4px;
  margin-top: var(--sp-2);
  border-radius: var(--radius-pill);
  background: var(--leave-annual-soft);
  overflow: hidden;
}
.sa-meter span { display: block; height: 100%; border-radius: inherit; background: var(--leave-annual); }

/* Icon row cards (next on-call, notifications prompt) */
.sa-row-card { display: flex; align-items: center; gap: var(--sp-3); }
.sa-ic-badge {
  flex: none;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-lg);
  display: grid;
  place-items: center;
  background: var(--surface-subtle);
  color: var(--text-muted);
}
.sa-row-card.is-oncall .sa-ic-badge,
.sa-push .sa-ic-badge { background: var(--accent-light); color: var(--accent); }
.sa-push.is-on .sa-ic-badge { background: var(--success-light); color: var(--success-strong); }
.sa-push.is-hint { background: var(--surface-subtle); box-shadow: none; }
.sa-row-main { flex: 1; min-width: 0; }
.sa-row-title { margin-top: 1px; font-size: 15px; font-weight: 700; }
.sa-row-meta { margin-top: 1px; font-size: 13px; line-height: 1.4; color: var(--text-muted); }

/* Notifications feed */
.sa-notif { display: flex; align-items: flex-start; gap: var(--sp-3); padding: var(--sp-3) var(--sp-4); }
.sa-notif .sa-dot { width: 8px; height: 8px; margin-top: 6px; background: var(--text-light); }
.sa-notif.kind-rota_published .sa-dot { background: var(--accent); }
.sa-notif.kind-leave_approved .sa-dot,
.sa-notif.kind-sick_cert_approved .sa-dot { background: var(--success); }
.sa-notif.kind-leave_declined .sa-dot { background: var(--danger); }
.sa-notif.kind-sick_cert_queried .sa-dot { background: var(--warning); }
.sa-notif-title { font-size: 13px; font-weight: 600; }
.sa-notif-body { margin-top: 1px; font-size: 12px; line-height: 1.4; color: var(--text-muted); }

/* Rota fortnight + on-call rows */
.sa-day,
.sa-oc { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-3) var(--sp-4); }
.sa-day-date {
  flex: none;
  width: 38px;
  display: flex;
  flex-direction: column;
  align-items: center;
  line-height: 1.1;
}
.sa-dow { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-muted); }
.sa-dom { font-size: 18px; font-weight: 700; font-variant-numeric: tabular-nums; }
.sa-day-body { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 3px; }
.sa-day-line { display: flex; align-items: center; gap: var(--sp-2); min-width: 0; max-width: 100%; }
.sa-dot { flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--accent); }
.sa-day-room { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.sa-day-none { font-size: 13px; color: var(--text-light); }
.sa-day-oncall { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 600; color: var(--accent); }
.sa-day.is-today { background: var(--surface-subtle); box-shadow: inset 3px 0 0 var(--accent); }
.sa-day.is-today .sa-dow,
.sa-day.is-today .sa-dom { color: var(--accent); }
.sa-day.is-weekend .sa-day-date { opacity: 0.55; }
.sa-today-tag {
  flex: none;
  padding: 2px var(--sp-2);
  border-radius: var(--radius-pill);
  background: var(--accent-light);
  color: var(--accent);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.sa-oc-main { flex: 1; min-width: 0; }
.sa-oc-name { font-weight: 600; }
.sa-oc-time { margin-top: 1px; font-size: 12px; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.staff-ical-btn { margin-top: var(--sp-1); }

/* Status pills — leave canon (DESIGN.md) + request decisions */
.sa-status {
  display: inline-flex;
  align-items: center;
  flex: none;
  padding: 3px 10px;
  border-radius: var(--radius-pill);
  background: var(--surface-subtle);
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}
.sa-status.st-sick { background: var(--leave-sick-soft); color: var(--danger-strong); }
.sa-status.st-leave { background: var(--leave-annual-soft); color: var(--leave-annual); }
.sa-status.st-studyLeave { background: var(--leave-study-soft); color: var(--leave-study); }
.sa-status.st-parentsLeave { background: var(--leave-parents-soft); color: var(--leave-parents); }
.sa-status.st-longTerm { background: var(--leave-longterm-soft); color: var(--leave-longterm); }
.sa-status.st-rest,
.sa-status.st-partTimeOff,
.sa-status.st-partTimeLeave { background: var(--bg-card); border: 1px solid var(--border); color: var(--text-muted); }
.sa-status.st-req-pending { background: var(--warning-light); color: var(--warning-strong); }
.sa-status.st-req-approved { background: var(--success-light); color: var(--success-strong); }
.sa-status.st-req-declined { background: var(--danger-light); color: var(--danger-strong); }

/* Leave tab */
.sa-balance { display: flex; align-items: center; gap: var(--sp-4); }
.sa-balance-num {
  font-size: 36px;
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1;
  color: var(--leave-annual);
  font-variant-numeric: tabular-nums;
}
.sa-balance-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.sa-balance-txt strong { font-size: 14px; }
.sa-balance-txt span { font-size: 12px; color: var(--text-muted); }
.sa-req { display: flex; align-items: flex-start; gap: var(--sp-3); padding: var(--sp-3) var(--sp-4); }
.sa-req-main { flex: 1; min-width: 0; }
.sa-req-range { font-weight: 600; }
.sa-req-kind { margin-top: 1px; font-size: 12px; color: var(--text-muted); }
.sa-req-reason { margin-top: var(--sp-1); font-size: 12px; font-style: italic; color: var(--text-muted); }

/* Buttons, fields, forms */
.sa-btn-block { width: 100%; }
.sa .btn-lg,
.staff-auth .btn-lg { min-height: 48px; border-radius: var(--radius-lg); font-size: 15px; }
.btn.sa-signout { margin-top: var(--sp-2); color: var(--danger-strong); }
.btn.sa-signout:hover:not(:disabled) { border-color: var(--danger); background: var(--danger-light); }
.sa-form { display: flex; flex-direction: column; gap: var(--sp-3); }
.sa-form-title { margin: 0; font-size: 16px; font-weight: 700; }
.sa-field { display: flex; flex-direction: column; gap: 6px; font-size: 12px; font-weight: 600; color: var(--text-muted); }
.sa-field em { font-style: normal; font-weight: 400; color: var(--text-light); }
.sa-field select,
.sa-field input,
.sa-input {
  width: 100%;
  min-height: 44px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-card);
  color: var(--text);
  font: inherit;
  font-size: 16px;
  font-weight: 400;
}
.sa-field select:focus-visible,
.sa-field input:focus-visible,
.sa-input:focus-visible { outline: none; border-color: var(--accent); box-shadow: var(--focus-ring); }
.sa-form-actions { display: flex; gap: var(--sp-2); margin-top: var(--sp-1); }
.sa-form-actions .btn { flex: 1; min-height: 44px; }

/* Me tab */
.sa-kv { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-3) var(--sp-4); }
.sa-kv-ic { display: grid; color: var(--text-light); }
.sa-kv-lbl { font-size: 13px; color: var(--text-muted); }
.sa-kv-val { margin-left: auto; min-width: 0; text-align: right; font-weight: 600; overflow-wrap: anywhere; }

/* #139 P2b §16.7 — "My sick leave" (Me tab) */
.staff-sick-banner {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-2);
  padding: var(--sp-3);
  border: 1px solid var(--warning-border);
  border-radius: var(--radius-lg);
  background: var(--warning-light);
  color: var(--warning-strong);
  font-size: 13px;
  font-weight: 600;
}
.staff-sick-episode { display: flex; flex-direction: column; gap: var(--sp-1); padding: var(--sp-3) var(--sp-4); }
.staff-sick-episode .ep-main { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-2); }
.staff-sick-episode .ep-days { font-size: 12px; color: var(--text-muted); }
.staff-sick-episode .ep-sub { display: flex; align-items: center; flex-wrap: wrap; gap: var(--sp-2); font-size: 12px; color: var(--text-muted); }
.staff-sick-episode .cert-chip { margin-left: 0; }
.staff-sick-episode .ep-query { font-style: italic; color: var(--warning-strong); }
.staff-sick-episode .ep-upload-btn { align-self: flex-start; margin-top: var(--sp-1); }

/* Icon tab bar */
.sa-tabbar {
  flex: none;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  padding: 6px var(--sp-2) 10px;
  background: var(--bg-card);
  border-top: 1px solid var(--border);
}
.sa-tab {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 2px 0;
  border: 0;
  background: none;
  color: var(--text-muted);
  font-size: 11px;
  font-weight: 600;
}
.sa-tab-ic {
  width: 56px;
  height: 30px;
  border-radius: var(--radius-pill);
  display: grid;
  place-items: center;
  transition: background 150ms, color 150ms;
}
.sa-tab:hover .sa-tab-ic { background: var(--surface-subtle); }
.sa-tab.is-active { color: var(--accent); }
.sa-tab.is-active .sa-tab-ic { background: var(--accent-light); }
.sa-tab:focus-visible { outline: none; }
.sa-tab:focus-visible .sa-tab-ic { box-shadow: var(--focus-ring); }

/* #181 — toast (setMessage confirmations + the #194 save-failed warning) */
.staff-toast {
  position: absolute;
  top: 64px;
  left: var(--sp-3);
  right: var(--sp-3);
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-4);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--bg-card);
  color: var(--text);
  font-size: 13px;
  font-weight: 600;
  box-shadow: 0 10px 28px -8px rgba(15, 23, 42, 0.45);   /* lifts it off the slate hero too */
}
.staff-toast-x {
  padding: 0 2px;
  border: 0;
  background: transparent;
  color: var(--text-light);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
}

/* #182 P1 — standalone staff app (staff.html): full viewport, no phone frame */
.staff-standalone {
  max-width: 520px;
  margin: 0 auto;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  background: var(--bg);
}
.staff-standalone .sa { min-height: 100vh; min-height: 100dvh; }
.staff-standalone .sa-top {
  position: sticky;
  top: 0;
  z-index: 4;
  padding-top: calc(var(--sp-3) + env(safe-area-inset-top));
}
.staff-standalone .sa-screen { overflow: visible; padding-bottom: calc(96px + env(safe-area-inset-bottom)); }
.staff-standalone .sa-tabbar {
  position: fixed;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  z-index: 4;
  width: 100%;
  max-width: 520px;
  padding-bottom: calc(10px + env(safe-area-inset-bottom));
}
.staff-standalone .staff-toast {
  position: fixed;
  top: calc(66px + env(safe-area-inset-top));
  left: 50%;
  right: auto;
  transform: translateX(-50%);
  width: min(496px, calc(100% - 24px));
}

/* Sign-in screens */
.staff-auth {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--sp-5);
  padding: var(--sp-6) var(--sp-5) var(--sp-7);
}
.staff-auth-brand {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--text);
}
.staff-auth-brand .brand-mark { width: 40px; height: 40px; }
.staff-auth-card {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  padding: var(--sp-6) var(--sp-5);
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
}
.staff-auth-card h2 { margin: 0; font-size: 22px; font-weight: 700; letter-spacing: -0.01em; }
.staff-auth-card p { margin: 0 0 var(--sp-1); font-size: 14px; line-height: 1.5; color: var(--text-muted); }
.staff-auth-card .staff-auth-error { margin: 0; font-size: 13px; color: var(--danger-strong); }
.staff-auth-ic {
  width: 44px;
  height: 44px;
  border-radius: var(--radius-lg);
  display: grid;
  place-items: center;
  background: var(--accent-light);
  color: var(--accent);
}
.staff-auth-foot { margin: 0; text-align: center; font-size: 12px; color: var(--text-light); }
/* #213 — sign-in code screen */
.sa-field .sa-otp-input {
  font-size: 26px;
  font-weight: 700;
  letter-spacing: 0.3em;
  text-align: center;
  font-variant-numeric: tabular-nums;
  min-height: 56px;
}
.sa-field .sa-otp-input::placeholder { color: var(--border); font-weight: 600; }
.staff-auth-card .staff-auth-notice { margin: 0; font-size: 13px; color: var(--success-strong); }
.staff-auth-card .staff-auth-hint { margin: 0; font-size: 12px; line-height: 1.45; color: var(--text-light); }
.staff-auth-links { display: flex; justify-content: space-between; gap: var(--sp-2); flex-wrap: wrap; }

/* #218 — manager sign-in lock: the staff sign-in card, centred on a desktop */
.manager-lock { max-width: 440px; }
.lock-form { display: flex; flex-direction: column; gap: var(--sp-3); }
/* username for password managers on password-only screens; never seen */
.lock-hidden-user { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.cloud-lock-row { display: flex; align-items: center; flex-wrap: wrap; gap: var(--sp-2); margin-top: 10px; }
.cloud-lock-row .settings-hint { margin: 0; }
.cloud-lock-row .settings-info-select { flex: 0 0 auto; }

/* #218 — ?demo reminder strip under the topbar */
.demo-bar {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-4);
  background: var(--warning-light);
  border-bottom: 1px solid var(--warning-border);
  color: var(--warning-strong);
  font-size: 13px;
}
.demo-bar svg { flex-shrink: 0; }
.demo-bar a { margin-left: auto; color: var(--accent); font-weight: 600; white-space: nowrap; }


.staff-subtle { font-size: 13px; color: var(--text-muted); margin: 0; }


/* #185 — Staff App URL row in Cloud Sync */
.cloud-staffurl-row { margin-top: 10px; display: flex; flex-direction: column; gap: 4px; }



/* ── Competency warning (staff assigned to room they're not trained for) ───── */

.staff-tag.no-skill {
  background: var(--warning-bg);
  border-color: var(--warning-border);
  color: var(--warning-text);
}
.staff-tag.no-skill:hover {
  background: var(--danger-light);
  border-color: var(--danger);
  color: var(--danger);
}

/* ── Room notes ───────────────────────────────────────────────────────────── */

.room-notes {
  border-top: 1px solid var(--border-light);
  padding: 5px 10px 6px;
  transition: background 200ms;
}

.room-notes.has-note {
  background: var(--note-bg);
  border-top-color: var(--warning);
}

.room-notes-input {
  width: 100%;
  resize: none;
  border: none;
  background: transparent;
  font-family: inherit;
  font-size: 11px;
  font-weight: 700;
  color: var(--text-muted);
  line-height: 1.4;
  min-height: 20px;
  overflow: hidden;
  display: block;
}

.room-notes-input::placeholder {
  font-weight: 400;
  color: var(--text-light);
  font-style: italic;
}

.room-notes-input:focus {
  outline: none;
}

.room-notes.has-note .room-notes-input {
  color: var(--note-text);
}

/* (The .btn-leave / .btn-al / .btn-sl / .btn-pl sidebar leave-button styles
   were removed 2026-07-13 (#169 C2) — no markup has used those classes since
   the pool-actions rework; the leave canon lives on in the --leave-* tokens.) */

/* ── Daily Notes section ──────────────────────────────────────────────────── */

.daily-notes-section {
  border-top: 2px solid var(--border);
  margin-top: var(--sp-1);
}

.daily-notes-section h3 {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  font-weight: 700;
  padding: 10px 14px 6px;
}

.daily-notes-input {
  width: 100%;
  resize: none;
  border: none;
  border-top: 1px solid var(--border-light);
  border-bottom: 1px solid var(--border-light);
  background: #fffbeb;
  font-family: inherit;
  font-size: 12px;
  color: var(--text);
  padding: var(--sp-2) 14px;
  line-height: 1.5;
  min-height: 56px;
  overflow: hidden;
  display: block;
}

.daily-notes-input::placeholder {
  color: var(--text-light);
  font-style: italic;
}

.daily-notes-input:focus {
  outline: none;
  background: #fefce8;
  border-color: var(--warning);
}

/* Auto-collected room notes beneath daily notes */
.room-alerts-list {
  padding: var(--sp-2) 14px 10px;
}

.room-alerts-list h4 {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-light);
  font-weight: 700;
  margin-bottom: 6px;
}

.room-alert-item {
  font-size: 11px;
  color: var(--note-text);
  background: var(--note-bg);
  border: 1px solid #fde68a;
  border-radius: 4px;
  padding: var(--sp-1) var(--sp-2);
  margin-bottom: var(--sp-1);
  line-height: 1.4;
}

.room-alert-item strong {
  font-weight: 700;
  margin-right: var(--sp-1);
}

/* ── Topbar action buttons ────────────────────────────────────────────────── */

.nav-divider {
  width: 1px;
  background: rgba(255,255,255,0.15);
  align-self: stretch;
  margin: 0 2px;
}

.btn-topbar-action {
  padding: 5px var(--sp-3);
  border-radius: 6px;
  border: 1px solid rgba(255,255,255,0.2);
  background: rgba(255,255,255,0.07);
  color: #e2e8f0;
  font-size: 12px;
  font-weight: 500;
  transition: all 150ms;
}

.btn-topbar-action:hover {
  background: rgba(255,255,255,0.15);
  color: #fff;
}

/* ── Print styles ─────────────────────────────────────────────────────────── */

@media print {
  .topbar, .sidebar, .below-rooms-split, .add-slot-row, .room-notes-input::placeholder,
  [data-reset-demo], [data-clear-day], [data-import-excel], [data-print-roster] {
    display: none !important;
  }

  body { background: var(--bg-card); font-size: 11px; }

  .layout-shell { display: block; }

  .main-area { padding: 0; overflow: visible; }

  .rooms-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
    page-break-inside: avoid;
  }

  .room-card {
    border: 1px solid #ccc;
    border-radius: 4px;
    box-shadow: none;
    page-break-inside: avoid;
  }

  .room-header {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  .room-notes.has-note {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  .empty-slot { display: none; }

  .staff-tag.no-skill {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  .add-slot-row { display: none; }
}

/* ── Responsive ───────────────────────────────────────────────────────────── */

/* Rooms-grid keeps fixed 320px columns at every breakpoint, aligned with the 320px
   sidebar so room/tag widths stay consistent (260px slot-names + 36px grade label +
   4px gap + 16px padding = 316px, with 4px slack). Extra horizontal space becomes a
   gap on the right. */

@media (max-width: 900px) {
  .layout-shell { grid-template-columns: 1fr; }
  .sidebar {
    position: static;
    height: auto;
    border-right: none;
    border-bottom: 1px solid var(--border);
  }
  .below-rooms-split { grid-template-columns: 1fr; }
}

@media (max-width: 600px) {
  .topbar { flex-wrap: wrap; gap: 8px; padding: 8px 12px; }
  .hospital-name { display: none; }
  .rooms-grid { grid-template-columns: 1fr; }
  .main-area { padding: 10px; }
}

/* ── Staff Profile View ──────────────────────────────────────────────────── */

.profile-surface {
  padding: var(--sp-6) 28px;
  max-width: 1100px;
  margin: 0 auto;
}

.profile-selector-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: var(--sp-6);
}

.profile-selector-label {
  font-size: 13px;
  color: var(--text-muted);
  white-space: nowrap;
}

.profile-staff-select {
  padding: var(--sp-2) var(--sp-3);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-card);
  font-size: 14px;
  color: var(--text);
  min-width: 260px;
}

.profile-layout {
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: 20px;
  align-items: start;
}

.profile-main, .profile-sidebar {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* Header card */
.profile-header-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--sp-5) var(--sp-6);
  display: flex;
  align-items: center;
  gap: 18px;
  box-shadow: var(--shadow-sm);
}

.profile-avatar {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  font-weight: 700;
  color: #fff;
  flex-shrink: 0;
  letter-spacing: 0.02em;
}

.profile-identity {
  flex: 1;
}

.profile-identity h2 {
  font-size: 18px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 6px;
}

.profile-grade-chip {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 999px;
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.profile-contract-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-left: auto;
}

.profile-pill {
  padding: var(--sp-1) 10px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--bg);
  font-size: 11px;
  color: var(--text-muted);
  font-weight: 500;
  white-space: nowrap;
}

.profile-pill-point {
  opacity: 0.65;
  font-weight: 600;
}

.profile-pill-on {
  background: var(--success-light);
  border-color: var(--success);
  color: var(--success-strong);
}

.profile-pill-off {
  background: var(--bg);
  color: var(--text-light);
}

/* Sections */
.profile-section {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 18px var(--sp-5);
  box-shadow: var(--shadow-sm);
}

.profile-section-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 8px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.profile-section-hint {
  font-size: 12px;
  color: var(--text-muted);
  margin-bottom: var(--sp-3);
  line-height: 1.5;
}

/* Leave table */
.profile-leave-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.profile-leave-table thead th {
  text-align: right;
  padding: 6px var(--sp-3);
  font-size: 12px;
  font-weight: 700;
  color: var(--text-muted);
  border-bottom: 2px solid var(--border);
}

.profile-leave-table thead th:first-child {
  text-align: left;
}

.profile-leave-table tbody tr:not(:last-child) td {
  border-bottom: 1px solid var(--border-light);
}

.profile-leave-label {
  padding: 9px var(--sp-3) 9px 0;
  color: var(--text);
  font-weight: 500;
}

.profile-leave-val {
  text-align: right;
  padding: 9px var(--sp-3);
  font-variant-numeric: tabular-nums;
  color: var(--text-muted);
}

.profile-leave-val.profile-leave-flag {
  color: var(--warning);
  font-weight: 700;
}

.profile-ytd-badge {
  display: inline-block;
  background: var(--accent-light);
  color: var(--accent);
  font-size: 9px;
  padding: 1px 6px;
  border-radius: 999px;
  font-weight: 600;
  letter-spacing: 0.04em;
  vertical-align: middle;
}

.profile-leave-flag-inline {
  color: var(--warning);
  font-weight: 600;
}

/* DKP */
.profile-dkp-row {
  display: flex;
  align-items: baseline;
  gap: 10px;
}

.profile-dkp-num {
  font-size: 36px;
  font-weight: 800;
  color: var(--accent);
  line-height: 1;
}

.profile-dkp-label {
  font-size: 13px;
  color: var(--text-muted);
}

/* Competency badges */
.profile-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.profile-badge {
  padding: var(--sp-1) 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  color: #fff;
  letter-spacing: 0.02em;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.badge-remove {
  background: none;
  border: none;
  color: rgba(255,255,255,0.6);
  font-size: 14px;
  cursor: pointer;
  padding: 0;
  line-height: 1;
  margin-left: 2px;
}
.badge-remove:hover { color: #fff; }

.profile-add-skill {
  font-size: 11px;
  padding: var(--sp-1) var(--sp-2);
  border-radius: 999px;
  border: 1px dashed var(--border);
  background: var(--bg);
  color: var(--text-muted);
  cursor: pointer;
}

.profile-empty {
  color: var(--text-light);
  font-size: 12px;
}

/* Private tag */
.profile-private-tag {
  font-size: 10px;
  font-weight: 500;
  background: var(--warning-light);
  color: var(--note-text);
  padding: 2px 7px;
  border-radius: 999px;
  text-transform: none;
  letter-spacing: 0;
}

/* Manager notes */
.profile-notes-input {
  width: 100%;
  padding: 10px var(--sp-3);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font: inherit;
  font-size: 13px;
  color: var(--text);
  background: var(--bg);
  resize: vertical;
  line-height: 1.5;
  transition: border-color 150ms;
}

.profile-notes-input:focus {
  outline: none;
  border-color: var(--accent);
  background: var(--bg-card);
}

.profile-notes-hint {
  font-size: 11px;
  color: var(--text-light);
  margin-top: 6px;
}

@media (max-width: 900px) {
  .profile-layout {
    grid-template-columns: 1fr;
  }
  .profile-contract-pills {
    margin-left: 0;
    margin-top: 10px;
  }
  .profile-header-card {
    flex-wrap: wrap;
  }
}

/* ── Editable profile pills ──────────────────────────────────────────────── */

.profile-pill-btn {
  cursor: pointer;
  border: 1px solid var(--border);
  background: var(--bg);
  border-radius: 999px;
  padding: var(--sp-1) 10px;
  font-size: 11px;
  color: var(--text-muted);
  font-weight: 500;
  transition: all 150ms;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.profile-pill-btn::after { content: " ▾"; font-size: 9px; opacity: 0.6; }
.profile-pill-btn:hover  { border-color: var(--accent); color: var(--accent); background: var(--accent-light); }
.profile-pill-btn.is-editing { border-color: var(--accent); background: var(--accent-light); color: var(--accent); font-weight: 600; }

.profile-pill-auto {
  background: var(--bg);
  border: 1px dashed var(--border);
  color: var(--text-muted);
  font-size: 11px;
  padding: var(--sp-1) 10px;
  border-radius: 999px;
  font-style: italic;
}

/* Long-term leave banner (canon: --leave-longterm violet, not warning amber) */
.lt-banner {
  background: var(--leave-longterm-soft);
  border: 1px solid var(--leave-longterm);
  border-radius: var(--radius);
  padding: var(--sp-2) 14px;
  font-size: 12px;
  color: var(--leave-longterm);
  margin-bottom: var(--sp-3);
}

/* ── Employment editor ───────────────────────────────────────────────────── */

.emp-editor {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--sp-4) 18px;
  margin-bottom: 14px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.emp-type-row, .emp-lt-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.emp-type-btn {
  padding: 5px var(--sp-3);
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--bg-card);
  font-size: 12px;
  color: var(--text-muted);
  cursor: pointer;
  transition: all 120ms;
}
.emp-type-btn:hover    { border-color: var(--accent); color: var(--accent); }
.emp-type-btn.is-active { background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 600; }

.emp-lt-btn { font-size: 11px; }

.emp-hint {
  font-size: 11px;
  color: var(--text-muted);
  line-height: 1.5;
}

.emp-date-input {
  padding: 6px 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font: inherit;
  font-size: 12px;
  color: var(--text);
  background: var(--bg-card);
  display: block;
  margin-top: var(--sp-1);
  width: 100%;
}

.pt-date-row, .lt-notes-row {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}
.pt-date-row label, .lt-notes-row label {
  flex: 1;
  min-width: 160px;
  font-size: 12px;
  color: var(--text-muted);
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.lt-notes-input {
  padding: var(--sp-2) 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font: inherit;
  font-size: 12px;
  resize: vertical;
  background: var(--bg-card);
  margin-top: var(--sp-1);
}

.emp-editor-actions {
  display: flex;
  gap: 8px;
}
.emp-save-btn {
  padding: 7px 18px;
  background: var(--accent);
  color: #fff;
  border: none;
  border-radius: var(--radius);
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: opacity 150ms;
}
.emp-save-btn:hover { opacity: 0.88; }
.emp-cancel-btn {
  padding: 7px 14px;
  background: transparent;
  color: var(--text-muted);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font: inherit;
  font-size: 12px;
  cursor: pointer;
}

/* ── Part-time schedule grid ─────────────────────────────────────────────── */

.pt-grid-wrap { display: flex; flex-direction: column; gap: 10px; }
.pt-grid-hint { font-size: 12px; color: var(--text-muted); }

.pt-grid {
  border-collapse: collapse;
  font-size: 12px;
  width: auto;
}
.pt-grid th, .pt-grid td { padding: 4px 8px; text-align: center; }
.pt-grid thead th { color: var(--text-muted); font-weight: 600; font-size: 11px; }
.grid-row-label {
  text-align: left;
  color: var(--text-muted);
  font-weight: 600;
  font-size: 11px;
  padding-right: var(--sp-3);
  white-space: nowrap;
}
.grid-col-label { min-width: 44px; }

.grid-cell-label {
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.grid-cell-label input[type="checkbox"] { display: none; }
.grid-check-box {
  width: 22px;
  height: 22px;
  border: 2px solid var(--border);
  border-radius: 5px;
  background: var(--bg-card);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 120ms;
}
.grid-check-box.is-checked {
  background: var(--accent);
  border-color: var(--accent);
}
.grid-check-box.is-checked::after { content: "✓"; font-size: 13px; color: #fff; font-weight: 700; }

.pt-grid-calc {
  display: flex;
  align-items: center;
  gap: 14px;
}
.pt-hrs-display {
  font-size: 22px;
  font-weight: 800;
  color: var(--accent);
  line-height: 1;
}
.pt-grid-note { font-size: 12px; color: var(--text-muted); }

.pt-notes-row { display: flex; flex-direction: column; gap: 4px; }
.pt-notes-row label { font-size: 12px; color: var(--text-muted); font-weight: 500; }
.pt-schedule-notes {
  padding: var(--sp-2) 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font: inherit;
  font-size: 12px;
  resize: vertical;
  background: var(--bg-card);
}

/* ── Change log ──────────────────────────────────────────────────────────── */

.change-log { display: flex; flex-direction: column; gap: 8px; }
.change-log-entry {
  display: flex;
  gap: 10px;
  font-size: 12px;
  padding: 7px 10px;
  background: var(--bg);
  border-radius: var(--radius);
  border-left: 3px solid var(--border);
}
.change-log-date { color: var(--text-light); white-space: nowrap; flex-shrink: 0; font-size: 11px; }
.change-log-desc { color: var(--text); }

/* ── Sidebar: long-term leave + part-time off ───────────────────────────── */

.lt-leave-tag {
  display: inline-block;
  padding: 3px 9px;
  border-radius: 999px;
  background: var(--leave-longterm-soft);
  color: var(--leave-longterm);
  font-size: 11px;
  font-weight: 600;
  border: 1px solid var(--leave-longterm);
}

.pt-off-tag {
  display: inline-block;
  padding: 3px 9px;
  border-radius: 999px;
  background: var(--bg-card);
  color: var(--text-muted);
  font-size: 11px;
  font-weight: 500;
  border: 1px solid var(--border);
}

/* ── Manager Settings panel ─────────────────────────────────────────────── */

.topbar-nav .btn-gear {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.2);
  background: rgba(255,255,255,0.07);
  color: #e2e8f0;
  cursor: pointer;
  transition: all 150ms;
  flex-shrink: 0;
}
.topbar-nav .btn-gear:hover { background: rgba(255,255,255,0.15); color: #fff; }
.topbar-nav .btn-gear.is-active { background: var(--accent); border-color: var(--accent); color: #fff; }

.settings-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.35);
  z-index: 100;
  display: none;
  align-items: flex-start;
  justify-content: flex-end;
}
.settings-overlay.is-open { display: flex; }

.settings-panel {
  width: 460px;
  max-width: 95vw;
  height: 100vh;
  background: var(--bg-card);
  box-shadow: -4px 0 24px rgba(0,0,0,0.15);
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}

.settings-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: var(--sp-5) var(--sp-5) var(--sp-3);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  background: var(--bg-card);
  z-index: 1;
}
.settings-header h2 { font-size: 15px; font-weight: 700; margin-bottom: 2px; }
.settings-header p  { font-size: 12px; color: var(--text-muted); }

.settings-close-btn {
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: 16px;
  cursor: pointer;
  padding: 2px 6px;
  border-radius: var(--radius-sm);
  line-height: 1;
  transition: background 120ms;
}
.settings-close-btn:hover { background: var(--bg); }

.settings-section {
  padding: var(--sp-4) var(--sp-5);
  border-bottom: 1px solid var(--border-light);
}
.settings-section h3 { font-size: 13px; font-weight: 700; margin-bottom: 6px; }

.settings-collapsible-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  padding: var(--sp-1) 0;
  user-select: none;
}
.settings-collapsible-header:hover { color: var(--accent); }
.settings-chevron { font-size: 10px; color: var(--text-muted); }

.settings-pay-grade { margin-bottom: 4px; }
.settings-pay-grade-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--sp-2) var(--sp-3);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  color: var(--text);
}
.settings-pay-grade-header:hover { background: var(--accent-light); }
.settings-pay-grade-count { font-size: 11px; color: var(--text-muted); font-weight: 400; }
.settings-pay-points { padding: 8px 0 4px; }
.settings-pay-point-row {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 3px 0;
  font-size: 12px;
}
.settings-pay-point-row.is-lsi { border-top: 2px solid var(--warning); padding-top: 6px; margin-top: 4px; }
.settings-pay-point-label { width: 80px; color: var(--text-muted); font-weight: 500; }
.settings-pay-point-currency { color: var(--text-muted); }
.settings-pay-point-input {
  width: 90px;
  padding: 3px 6px;
  border: 1px solid var(--border);
  border-radius: 4px;
  font-size: 12px;
  text-align: right;
}
.btn-settings-action.settings-pay-save {
  margin-top: var(--sp-2);
  background: var(--accent);
  color: #fff;
  font-weight: 600;
}
.btn-settings-action.settings-pay-save:hover { background: var(--accent-hover); }

.settings-hint {
  font-size: 12px;
  color: var(--text-muted);
  margin-bottom: var(--sp-3);
  line-height: 1.5;
}

.settings-grade-grid { display: flex; flex-direction: column; gap: 8px; }
.settings-grade-row  {
  display: flex;
  align-items: center;
  gap: 10px;
}
.settings-grade-label { width: 60px; font-size: 13px; font-weight: 600; color: var(--text); }
.settings-hours-input {
  width: 72px;
  padding: 6px 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font: inherit;
  font-size: 13px;
  text-align: center;
  color: var(--text);
  background: var(--bg);
  transition: border-color 150ms;
}
.settings-hours-input:focus { outline: none; border-color: var(--accent); background: var(--bg-card); }
.settings-grade-unit { font-size: 12px; color: var(--text-muted); }

.settings-toggle-label {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  font-size: 13px;
  color: var(--text);
  line-height: 1.4;
}
.settings-toggle-label input[type="checkbox"] { display: none; }
.settings-toggle-track {
  width: 36px;
  height: 20px;
  border-radius: 999px;
  background: var(--border);
  flex-shrink: 0;
  position: relative;
  transition: background 200ms;
}
.settings-toggle-track::after {
  content: '';
  position: absolute;
  top: 3px; left: 3px;
  width: 14px; height: 14px;
  border-radius: 50%;
  background: var(--bg-card);
  transition: transform 200ms;
  box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}
.settings-toggle-label input:checked ~ .settings-toggle-track { background: var(--accent); }
.settings-toggle-label input:checked ~ .settings-toggle-track::after { transform: translateX(16px); }
.settings-toggle-label + .settings-toggle-label { margin-top: 10px; }

.settings-body { overflow-y: auto; flex: 1; }

/* Department info grid */
.settings-info-grid { display: flex; flex-direction: column; gap: 6px; }
.settings-info-row  { display: flex; align-items: center; gap: 10px; font-size: 13px; }
.settings-info-label { width: 110px; color: var(--text-muted); font-weight: 500; flex-shrink: 0; }
.settings-info-value { color: var(--text); font-weight: 600; }

/* Import section */
.settings-import-section { background: var(--bg); }
.settings-import-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.cloud-signin-form { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-top: 4px; }
.cloud-input {
  padding: var(--sp-2) 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font: inherit;
  font-size: 13px;
  min-width: 200px;
  flex: 1 1 200px;
}
.btn-settings-import {
  padding: var(--sp-2) 18px;
  background: var(--accent);
  color: #fff;
  border: none;
  border-radius: var(--radius);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background 150ms;
}
.btn-settings-import:hover { background: var(--accent-hover); }
.btn-settings-action {
  padding: var(--sp-2) 14px;
  background: var(--bg-card);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font: inherit;
  font-size: 13px;
  cursor: pointer;
  transition: background 150ms;
}
.btn-settings-action:hover { background: var(--bg); }
.btn-settings-reset { color: var(--danger); border-color: var(--danger); }
.btn-settings-reset:hover { background: rgba(239,68,68,0.08); }

/* Settings: Room management */
.settings-room-list { display: flex; flex-direction: column; gap: 4px; margin-bottom: 10px; }
.settings-room-row { display: flex; align-items: center; gap: 8px; padding: 5px 8px; background: var(--bg); border-radius: var(--radius-sm); font-size: 12px; }
.settings-room-name { font-weight: 600; color: var(--text); min-width: 160px; }
.settings-room-slots { color: var(--text-muted); font-size: 11px; flex: 1; }
.settings-room-delete { background: none; border: none; color: var(--text-muted); font-size: 16px; cursor: pointer; padding: 0 4px; line-height: 1; }
.settings-room-delete:hover { color: var(--danger); }
.settings-add-room { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.settings-add-room input, .settings-add-room select { flex: 1; min-width: 120px; }

/* Modalities & Rooms nested hierarchy */
.settings-mod-group { margin-bottom: 4px; }
.settings-mod-header {
  display: flex; align-items: center; gap: 8px; width: 100%;
  background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius);
  padding: var(--sp-2) var(--sp-3); font-size: 12px; font-weight: 600; cursor: pointer; color: var(--text);
}
.settings-mod-header:hover { background: var(--accent-light); }
.settings-mod-swatch { width: 16px; height: 16px; border-radius: 4px; flex-shrink: 0; }
.settings-mod-name { flex: 1; text-align: left; }
.settings-mod-count { font-size: 11px; color: var(--text-muted); font-weight: 400; }
.settings-mod-body { padding: 8px 0 4px 20px; border-left: 2px solid var(--border); margin-left: 8px; }
.settings-mod-settings { margin-bottom: 8px; }
.settings-mod-settings-row { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.settings-colour-grid { display: flex; flex-wrap: wrap; gap: 4px; }
.settings-colour-swatch {
  width: 24px; height: 24px; border-radius: 4px; border: 2px solid transparent;
  cursor: pointer; padding: 0;
}
.settings-colour-swatch:hover { border-color: var(--text); }
.settings-colour-swatch.is-active { border-color: var(--text); box-shadow: 0 0 0 2px var(--accent); }

.settings-room-item { margin-bottom: 2px; }
.settings-room-header {
  display: flex; align-items: center; gap: 8px; width: 100%;
  background: var(--bg-card); border: 1px solid var(--border-light); border-radius: var(--radius-sm);
  padding: 6px 10px; font-size: 12px; cursor: pointer; color: var(--text);
}
.settings-room-header:hover { background: var(--bg); }
.settings-room-swatch { width: 12px; height: 12px; border-radius: 3px; flex-shrink: 0; }
.settings-room-slots-tag { font-size: 10px; color: var(--text-muted); margin-left: auto; }
.settings-room-edit { padding: 8px 0 8px 12px; }

.settings-room-slots-edit { margin: 8px 0; }
.settings-slot-row { display: flex; align-items: center; gap: 6px; margin-bottom: 3px; }
.settings-slot-grade { width: 90px; font-size: 11px; color: var(--text-muted); }
.settings-slot-btn {
  width: 24px; height: 24px; border: 1px solid var(--border); border-radius: 4px;
  background: var(--bg); cursor: pointer; font-size: 14px; line-height: 1;
  display: flex; align-items: center; justify-content: center; color: var(--text);
}
.settings-slot-btn:hover { background: var(--accent-light); color: var(--accent); }
.settings-slot-count { width: 24px; text-align: center; font-size: 13px; font-weight: 600; }

.settings-add-inline {
  display: block; width: 100%; padding: 6px; margin-top: 6px;
  background: none; border: 1px dashed var(--border); border-radius: var(--radius-sm);
  color: var(--text-muted); font-size: 11px; cursor: pointer; text-align: center;
}
.settings-add-inline:hover { border-color: var(--accent); color: var(--accent); }

.btn-settings-action.btn-settings-danger { background: var(--danger); color: #fff; margin-top: var(--sp-2); }
.btn-settings-action.btn-settings-danger:hover { background: var(--danger-hover); }

/* Grades section */
.settings-grade-item { margin-bottom: 2px; }
.settings-grade-header-row {
  display: flex; align-items: center; gap: 4px; margin-bottom: 2px;
}
.settings-grade-arrows {
  display: flex; flex-direction: column; gap: 1px;
}
.settings-rank-btn {
  width: 18px; height: 14px; border: 1px solid var(--border); border-radius: 3px;
  background: var(--bg-card); cursor: pointer; font-size: 8px; line-height: 1;
  display: flex; align-items: center; justify-content: center; color: var(--text-muted); padding: 0;
}
.settings-rank-btn:hover { background: var(--accent-light); color: var(--accent); border-color: var(--accent); }
.settings-rank-btn-spacer { width: 18px; height: 14px; display: block; }
.settings-grade-header {
  display: flex; align-items: center; gap: 8px; flex: 1;
  background: var(--bg); border: 1px solid var(--border); border-radius: 6px;
  padding: var(--sp-2) var(--sp-3); font-size: 12px; cursor: pointer; color: var(--text);
}
.settings-grade-header:hover { background: var(--accent-light); }
.settings-grade-code { font-weight: 700; min-width: 80px; }
.settings-grade-desc { flex: 1; color: var(--text-muted); font-size: 11px; }
.settings-grade-info { font-size: 10px; color: var(--text-light); white-space: nowrap; }
.settings-grade-edit { padding: 8px 0 8px 12px; }

/* On-call shifts */
.settings-shift-row {
  display: flex; gap: 8px; padding: 5px 8px; font-size: 12px;
  border-bottom: 1px solid var(--border-light);
}
.settings-shift-name { flex: 1; font-weight: 500; }
.settings-shift-hours { width: 40px; color: var(--text-muted); }
.settings-shift-timeoff { flex: 1; color: var(--text-muted); font-size: 11px; }
.settings-add-room-buttons { display: flex; gap: 8px; margin-top: 8px; }
.settings-add-room-panel {
  margin-top: 10px;
  padding: var(--sp-3);
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.settings-add-room-label { font-size: 12px; font-weight: 700; color: var(--text); margin: 0; }
.settings-add-room-actions { display: flex; gap: 8px; margin-top: 4px; }
.settings-add-room-colour-row { display: flex; align-items: center; gap: 8px; }
.btn-settings-action.btn-settings-cancel { background: var(--bg-card); color: var(--text-muted); border: 1px solid var(--border); }

/* Settings tables (grades, on-call) */
.settings-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
  margin-top: var(--sp-2);
}
.settings-table th {
  text-align: left;
  padding: 5px var(--sp-2);
  border-bottom: 1px solid var(--border);
  color: var(--text-muted);
  font-weight: 600;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}
.settings-table td {
  padding: var(--sp-1) var(--sp-2);
  border-bottom: 1px solid var(--border-light);
  color: var(--text);
}

/* Modality colours grid */
.settings-modality-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.settings-modality-item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  padding: var(--sp-1) 10px;
  background: var(--bg);
  border-radius: var(--radius);
  border: 1px solid var(--border-light);
}
.settings-colour-swatch {
  width: 14px;
  height: 14px;
  border-radius: 3px;
  flex-shrink: 0;
}

/* On-call shift sections */
.settings-oncall-type { margin-bottom: var(--sp-3); }
.settings-oncall-type h4 { font-size: 12px; font-weight: 600; margin-bottom: 4px; color: var(--text); }
.settings-oncall-type:last-child { margin-bottom: 0; }

/* ── Pool profile link (Parents Leave "Manage via Profile") ──────────────────── */
.pool-profile-link {
  color: var(--accent);
  text-decoration: underline;
  cursor: pointer;
  font-size: 11px;
}
.pool-profile-link:hover {
  color: var(--accent-hover, var(--accent));
  opacity: 0.85;
}

/* ── Leave history table: 5-year layout ──────────────────────────────────────── */
/* Narrow the numeric columns so 5 fit comfortably */
.profile-leave-table td.profile-leave-val,
.profile-leave-table th:not(:first-child) {
  min-width: 52px;
  white-space: nowrap;
}
.profile-leave-table .profile-leave-label {
  min-width: 120px;
}

/* ── Pay scale editor (inside profile pay band panel) ───────────────────────── */
.pay-scale-editor { max-width: 420px; }
.pay-scale-editor-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
  margin: 0 0 10px;
}
.pay-scale-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: var(--sp-2);
}
.pay-scale-key {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
}
.pay-scale-grade-select {
  font-size: 12px;
  font-weight: 600;
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: var(--sp-1) var(--sp-2);
  background: var(--bg);
  cursor: pointer;
  max-width: 280px;
}
.pay-scale-grade-select:hover { border-color: var(--accent); }
.pay-scale-type-tag {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  background: var(--accent-light);
  color: var(--accent);
  border-radius: 999px;
  padding: 1px 7px;
}

/* Scale points list */
.pay-scale-points {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-bottom: var(--sp-3);
  max-height: 220px;
  overflow-y: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg);
}
.pay-point-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: var(--sp-2) var(--sp-3);
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  border-bottom: 1px solid var(--border-light);
  transition: background 0.1s;
}
.pay-point-row:last-child { border-bottom: none; }
.pay-point-row:hover { background: var(--accent-light); }
.pay-point-row.is-active {
  background: var(--accent);
}
.pay-point-row.is-active .pay-point-label,
.pay-point-row.is-active .pay-point-salary,
.pay-point-row.is-active .pay-point-tick { color: #fff; }
.pay-point-label {
  flex: 1;
  font-size: 12px;
  font-weight: 600;
  color: var(--text);
}
.pay-point-salary {
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
.pay-point-tick {
  width: 16px;
  font-size: 12px;
  color: var(--text-muted);
  text-align: center;
}

/* Summary row below scale */
.pay-scale-summary {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  margin-bottom: var(--sp-2);
}
.pay-scale-summary-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--sp-2) var(--sp-3);
  border-bottom: 1px solid var(--border-light);
  font-size: 13px;
}
.pay-scale-summary-row:last-child { border-bottom: none; }
.pay-scale-summary-label { color: var(--text-muted); font-weight: 500; }
.pay-scale-summary-val   { color: var(--text); font-weight: 700; font-variant-numeric: tabular-nums; }
.pay-scale-summary-highlight { background: var(--success-light); }
.pay-scale-summary-highlight .pay-scale-summary-label { color: var(--success-strong); }
.pay-scale-summary-highlight .pay-scale-summary-val   { color: var(--success-strong); font-size: 14px; }

.pay-point-row.is-lsi {
  border-top: 2px solid var(--warning);
}
.pay-point-row.is-lsi .pay-point-label {
  color: var(--warning);
  font-weight: 700;
}

.pay-increment-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 0;
  border-top: 1px solid var(--border);
  margin-top: 6px;
}
.pay-increment-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
  white-space: nowrap;
}
.pay-increment-input {
  font-size: 12px;
  padding: var(--sp-1) var(--sp-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text);
}
.pay-increment-info {
  font-size: 11px;
  color: var(--text-muted);
  font-style: italic;
}

/* ── Editable AL input in settings grades table ─────────────────────────────── */
.settings-al-input {
  width: 54px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 3px 6px;
  text-align: center;
  outline: none;
}
.settings-al-input:focus { border-color: var(--accent); background: var(--bg-card); }

/* ── Profile balances row ────────────────────────────────────────────────────── */
.profile-balances-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: var(--sp-1);
}
.profile-balance-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--sp-3) 18px 10px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--bg);
  min-width: 100px;
  text-align: center;
  gap: 1px;
}
.profile-balance-num {
  font-size: 26px;
  font-weight: 800;
  line-height: 1;
  color: var(--text);
}
.profile-balance-sub {
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 1px;
}
.profile-balance-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-top: var(--sp-1);
}
/* AL card reads the annual-leave canon (confirmed 2026-07-12) — was a stray sky family. */
.profile-balance-al   { border-color: var(--leave-annual); background: var(--leave-annual-soft); }
.profile-balance-al   .profile-balance-num { color: var(--leave-annual); }
.profile-balance-toil { border-color: var(--balance-toil); background: var(--balance-toil-soft); }
.profile-balance-toil .profile-balance-num { color: var(--balance-toil-strong); }
.profile-balance-dkp  { border-color: var(--balance-dkp); background: var(--balance-dkp-soft); }
.profile-balance-dkp  .profile-balance-num { color: var(--balance-dkp-strong); }

/* ── Editable settings inputs ────────────────────────────────────────────────── */
.settings-info-input {
  flex: 1;
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 5px;
  padding: 3px var(--sp-2);
  outline: none;
  transition: border-color 0.15s;
  min-width: 0;
}
.settings-info-input:focus { border-color: var(--accent); background: var(--bg-card); }
.settings-info-select { cursor: pointer; }
.settings-info-num { width: 70px; flex: none; }

.settings-colour-picker {
  width: 28px;
  height: 28px;
  border: none;
  background: none;
  padding: 0;
  cursor: pointer;
  border-radius: 5px;
  flex-shrink: 0;
}
.settings-colour-picker::-webkit-color-swatch-wrapper { padding: 0; }
.settings-colour-picker::-webkit-color-swatch { border-radius: 4px; border: 1px solid rgba(0,0,0,0.15); }
.settings-modality-name { font-size: 12px; color: var(--text); }

/* ── On Call view ────────────────────────────────────────────────────────────── */
.oc-view {
  flex: 1;
  overflow-y: auto;
  padding: var(--sp-5) var(--sp-5) var(--sp-7);
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-height: 0;
}
.oc-view-header { display: flex; align-items: flex-start; justify-content: space-between; }
.oc-view-title { font-size: 20px; font-weight: 700; color: var(--text); margin-bottom: 2px; }
.oc-view-subtitle { font-size: 13px; color: var(--text-muted); }

/* Stats row */
.oc-stats-row {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.oc-stat-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: var(--sp-3) var(--sp-4);
  min-width: 90px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
}
.oc-stat-total {
  background: var(--accent);
  border-color: var(--accent);
}
.oc-stat-total .oc-stat-num,
.oc-stat-total .oc-stat-label { color: #fff; }
.oc-stat-num {
  font-size: 24px;
  font-weight: 800;
  color: var(--text);
  line-height: 1;
}
.oc-stat-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  text-align: center;
}

/* Body layout */
.oc-body {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  align-items: start;
}
@media (max-width: 860px) {
  .oc-body { grid-template-columns: 1fr; }
}
.oc-col-staff,
.oc-col-info { display: flex; flex-direction: column; gap: 14px; }

/* Panel */
.oc-panel {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
}
.oc-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--sp-3) var(--sp-4) var(--sp-2);
  border-bottom: 1px solid var(--border-light);
}
.oc-panel-head h3 {
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
  margin: 0;
}
.oc-panel-count {
  font-size: 11px;
  color: var(--text-muted);
  background: var(--bg);
  border-radius: 999px;
  padding: 2px var(--sp-2);
  font-weight: 600;
}

/* Type grid inside staff panel */
.oc-type-grid { padding: 12px 16px; display: flex; flex-direction: column; gap: 14px; }
.oc-type-block { display: flex; flex-direction: column; gap: 4px; }
.oc-type-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 12px;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding-bottom: var(--sp-1);
  border-bottom: 1px solid var(--border-light);
}
.oc-type-count {
  background: var(--accent-light);
  color: var(--accent);
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  padding: 1px 7px;
}
.oc-staff-list { display: flex; flex-direction: column; gap: 2px; }
.oc-staff-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--sp-1) 6px;
  border-radius: var(--radius-sm);
}
.oc-staff-row:hover { background: var(--bg); }
.oc-staff-name { font-size: 13px; color: var(--text); }
.oc-staff-grade {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 2px 7px;
  border-radius: 999px;
  color: #fff;
}

/* Grade colours for on-call staff list */
.grade-csr    { background: #0f766e; }
.grade-snr    { background: #2563eb; }
.grade-radiographer,
.grade-worker { background: #64748b; }
.grade-hca    { background: var(--slate-600); }
.grade-trainee{ background: #7c3aed; }
.grade-rsm-1,
.grade-rsm-2,
.grade-rsm-3  { background: #b45309; }
.grade-rad-assistant,
.grade-rad-asst { background: #16a34a; }

/* Sub-sections inside panels */
.oc-sub-section { padding: var(--sp-2) var(--sp-4) var(--sp-1); }
.oc-sub-section + .oc-sub-section { border-top: 1px solid var(--border-light); }
.oc-sub-heading {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
  margin: 0 0 6px;
}

/* Tables inside panels */
.oc-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
  margin-bottom: 6px;
}
.oc-table th {
  text-align: left;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
  padding: 3px var(--sp-1) var(--sp-1);
  border-bottom: 1px solid var(--border);
}
.oc-table td {
  padding: var(--sp-1) var(--sp-1);
  color: var(--text);
  border-bottom: 1px solid var(--border-light);
}
.oc-table tr:last-child td { border-bottom: none; }
.oc-td-num { text-align: right; font-variant-numeric: tabular-nums; }

.oc-empty {
  font-size: 13px;
  color: var(--text-muted);
  padding: var(--sp-3) var(--sp-4);
  font-style: italic;
}

/* ── Rota Tab Strip ─────────────────────────────────────────── */
.rota-tab-strip {
  display: flex;
  align-items: flex-end;
  gap: 3px;
  padding: 0 0.75rem;
  background: var(--bg-sidebar);
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}

.rota-tab {
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--radius) var(--radius) 0 0;
  border: 1px solid var(--border);
  border-bottom: none;
  background: transparent;
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: color 0.15s, background 0.15s;
  margin-bottom: -1px;
  white-space: nowrap;
}

.rota-tab:hover { color: var(--text); background: var(--bg); }

.rota-tab.is-active {
  background: var(--accent-light);
  color: var(--accent);
  border-color: var(--border);
}
.rota-tab.is-today {
  border-bottom: 2px solid var(--success);
  font-weight: 700;
}
.rota-tab.is-today:not(.is-active)::after {
  content: "";
  display: block;
  width: 5px;
  height: 5px;
  background: var(--success);
  border-radius: 50%;
  margin: 2px auto 0;
}
.rota-today-btn {
  background: var(--success);
  color: #fff;
  font-weight: 600;
}
.rota-today-btn:hover:not(:disabled) { background: var(--success-hover); }

/* Weekend tab shown only because on-call data exists — dimmed to signal "not a normal working day". */
.rota-tab.is-weekend-oncall {
  opacity: 0.7;
  font-style: italic;
}
.rota-tab.is-weekend-oncall.is-active {
  opacity: 1;
  font-style: normal;
}

.rota-week-nav {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding-bottom: 6px;
  position: relative; /* anchors the hidden date-jump input's picker (#178) */
}

/* Week-nav buttons are .btn .btn-ghost .btn-sm (#175); only the idiom
   modifiers below (.rota-week-jump / .rota-clear-btn / .rota-today-btn) remain. */

/* Date-jump (#178) — the week label is a button opening the native date
   picker. The input must stay RENDERED (not display:none) or showPicker()
   refuses to open; it hides via opacity and sits under the label so the
   browser anchors the popup there. */
.rota-week-jump:hover {
  color: var(--accent);
  border-color: var(--accent);
}
.rota-jump-input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
  border: 0;
  padding: 0;
}

/* Clear Day / Clear Wk — live beside the day/week context they act on (#177).
   Quiet at rest; red on hover, matching the on-call roster's Clear idiom. */
.rota-nav-sep {
  width: 1px;
  height: 16px;
  background: var(--border);
  margin: 0 2px;
}
.rota-clear-btn { color: var(--text-muted); }
.rota-clear-btn:hover:not(:disabled) {
  background: #fef2f2;
  color: var(--danger-strong);
  border-color: #fca5a5;
}

/* ── Smart Fill button (sidebar header) ──────────────────────── */
.smart-fill-btn {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--accent);
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  padding: 3px 6px;
  border-radius: 5px;
  cursor: pointer;
  margin-left: var(--sp-1);
  vertical-align: middle;
}
.smart-fill-btn:hover {
  background: var(--accent-light, rgba(37, 99, 235, 0.08));
  border-color: var(--accent);
}

/* ── Annual Leave Views ────────────────────────────────────────────────────── */

/* Tab badge */
.al-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: var(--radius-pill);
  background: var(--danger);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  margin-left: var(--sp-1);
  vertical-align: middle;
}

/* Layout shell */
.al-surface {
  flex: 1;
  overflow-y: auto;
  padding: var(--sp-5);
  background: var(--bg);
}
.al-layout {
  display: flex;
  gap: var(--sp-5);
  max-width: 1400px;
  margin: 0 auto;
}

/* Side navigation */
.al-sidenav {
  display: flex;
  flex-direction: column;
  gap: 4px;
  width: 160px;
  flex-shrink: 0;
}
.al-sidenav-btn {
  padding: 10px var(--sp-3);
  border: none;
  border-radius: 8px;
  background: transparent;
  text-align: left;
  font-size: 14px;
  font-weight: 500;
  color: var(--text-muted);
  cursor: pointer;
  transition: background 0.15s;
}
.al-sidenav-btn:hover { background: var(--border); }
.al-sidenav-btn.is-active {
  background: var(--accent);
  color: #fff;
}
.al-main { flex: 1; min-width: 0; }

/* Year View */
.al-year-header { margin-bottom: var(--sp-5); }
.al-year-header h2 { font-size: 18px; margin: 0 0 4px; }
.al-year-header p { color: var(--text-muted); margin: 0 0 12px; }
.al-year-selector {
  display: flex;
  align-items: center;
  gap: 12px;
}
.al-year-btn {
  border: 1px solid var(--border);
  background: var(--bg-card);
  padding: 6px var(--sp-3);
  border-radius: var(--radius);
  cursor: pointer;
  font-size: 13px;
}
.al-year-btn:hover { background: var(--bg); }
.al-year-current { font-size: 15px; font-weight: 700; }

.al-year-body {
  display: flex;
  gap: 1.5rem;
}
.al-month-grid {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}
@media (max-width: 1000px) { .al-month-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 700px) { .al-month-grid { grid-template-columns: 1fr; } }

/* Month card */
.al-month-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: var(--sp-3);
  box-shadow: 0 1px 3px rgba(0,0,0,0.06);
}
.al-month-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: var(--sp-2);
}
.al-month-name {
  margin: 0;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
}
.al-month-name:hover { color: var(--accent); }
.al-badge-peak {
  display: inline-block;
  padding: 2px var(--sp-2);
  border-radius: 4px;
  background: var(--warning-light);
  color: var(--warning-strong);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.al-badge-offpeak {
  display: inline-block;
  padding: 2px var(--sp-2);
  border-radius: 4px;
  background: #f0fdf4;
  color: var(--success-strong);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* Week rows */
.al-week-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 0;
  border-bottom: 1px solid var(--border-light);
  cursor: pointer;
  transition: background 0.1s;
}
.al-week-row:last-child { border-bottom: none; }
.al-week-row:hover { background: var(--surface-subtle); }
.al-week-label { font-size: 12px; color: var(--text-muted); width: 32px; flex-shrink: 0; }
.al-week-fraction { font-size: 12px; font-weight: 600; width: 60px; text-align: right; flex-shrink: 0; }
.al-week-bar {
  flex: 1;
  height: 8px;
  background: var(--border);
  border-radius: 4px;
  overflow: hidden;
}
.al-week-bar-fill {
  height: 100%;
  border-radius: 4px;
  transition: width 0.3s;
}
.al-bar-available { background: var(--success); }
.al-bar-critical { background: var(--warning); }
.al-bar-full { background: var(--danger); }
.al-week-edit-btn {
  border: none;
  background: transparent;
  cursor: pointer;
  font-size: 14px;
  opacity: 0.4;
  padding: 2px var(--sp-1);
}
.al-week-edit-btn:hover { opacity: 1; }

/* Pending sidebar */
.al-pending-sidebar {
  width: 280px;
  flex-shrink: 0;
}
.al-pending-sidebar h3 {
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-muted);
  margin: 0 0 var(--sp-3);
}
.al-pending-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: var(--sp-3);
  margin-bottom: var(--sp-2);
}
.al-pending-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-bottom: var(--sp-2);
}
.al-pending-info strong { font-size: 14px; }
.al-pending-grade { font-size: 12px; color: var(--text-muted); text-transform: uppercase; }
.al-pending-dates { font-size: 12px; color: var(--text-muted); }
.al-pending-note { font-size: 12px; font-style: italic; color: var(--text-light); }
.al-pending-actions { display: flex; gap: 6px; }
.btn-al-decline {
  padding: 5px var(--sp-3);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-card);
  font-size: 12px;
  cursor: pointer;
}
.btn-al-decline:hover { background: #fef2f2; border-color: #fca5a5; }
.btn-al-approve {
  padding: 5px var(--sp-3);
  border: none;
  border-radius: var(--radius);
  background: var(--leave-annual);
  color: #fff;
  font-size: 12px;
  cursor: pointer;
}
.btn-al-approve:hover { background: #1e3a8a; }
.al-empty-msg { font-size: 13px; color: var(--text-light); font-style: italic; }

/* ── #139 P2b — sick-cert review queue (AL sidebar) ─────────────────────── */
.cert-queue { margin-top: var(--sp-5); }
.cert-queue h3 {
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--text-muted); font-weight: 700; margin: 0 0 var(--sp-2);
}
.cert-esc {
  font-size: 12px; color: var(--warning-strong);
  background: var(--warning-light);
  border: 1px solid var(--warning-border);
  border-radius: var(--radius);
  padding: var(--sp-2) var(--sp-3);
  margin-bottom: var(--sp-2);
  line-height: 1.5;
}
.cert-card { flex-direction: column; align-items: stretch; }
.cert-chip {
  display: inline-block; font-size: 10px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.04em;
  border-radius: var(--radius-pill); padding: 1px 8px; margin-left: var(--sp-1);
}
.cert-chip.is-pending  { background: var(--accent-light);  color: var(--accent-hover); }
.cert-chip.is-queried  { background: var(--warning-light); color: var(--warning-strong); }
.cert-chip.is-approved { background: var(--success-light); color: var(--success-strong); }
.cert-mismatch {
  font-size: 12px; color: var(--danger-strong);
  background: var(--danger-light);
  border-radius: var(--radius);
  padding: var(--sp-2) var(--sp-3);
  margin-top: var(--sp-2);
  line-height: 1.5;
}
.cert-inline-form { margin-top: var(--sp-2); display: flex; flex-direction: column; gap: var(--sp-2); }
.cert-received-form {
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--radius); padding: var(--sp-3);
}
.cert-received-form label { display: flex; flex-direction: column; gap: 2px; font-size: 12px; color: var(--text-muted); }
.cert-received-btn { width: 100%; margin-top: var(--sp-2); }
.cert-chip.is-none { background: var(--surface-subtle); color: var(--text-muted); }



/* Legend */
.al-legend {
  margin-top: var(--sp-6);
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: var(--sp-3);
}
.al-legend h4 {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-muted);
  margin: 0 0 var(--sp-2);
}
.al-legend-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  margin-bottom: var(--sp-1);
}
.al-legend-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}

/* ── Scheduler View ────────────────────────────────────────────────────────── */
.al-scheduler-header {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 1.5rem;
}
.al-scheduler-header h2 { margin: 0; font-size: 1.5rem; }
.al-month-nav {
  border: 1px solid var(--border);
  background: var(--bg-card);
  padding: 6px var(--sp-3);
  border-radius: 6px;
  cursor: pointer;
  font-size: 16px;
}
.al-month-nav:hover { background: var(--bg); }

.al-scheduler-body {
  display: flex;
  gap: 1.5rem;
}
.al-calendar { flex: 1; }

/* Calendar grid */
.al-cal-row {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 0;
}
.al-cal-header { margin-bottom: 4px; }
.al-cal-day-header {
  text-align: center;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
  padding: 6px 0;
}
.al-cal-cell {
  min-height: 54px;
  border: 1px solid var(--border-light);
  padding: var(--sp-1) 6px;
  position: relative;
  background: var(--bg-card);
}
.al-cal-cell:hover { background: var(--surface-subtle); }
.al-cal-empty { background: transparent; border-color: transparent; }
.al-cal-num { font-size: 13px; font-weight: 500; }
.al-cal-dot {
  position: absolute;
  bottom: 6px;
  left: 50%;
  transform: translateX(-50%);
  width: 6px;
  height: 6px;
  border-radius: 50%;
}
.al-cal-dot-some { background: var(--warning); }
.al-cal-dot-full { background: var(--danger); }

/* Week group */
.al-cal-week-group {
  cursor: pointer;
  transition: background 0.15s;
}
.al-cal-week-group:hover { background: rgba(37, 99, 235, 0.03); }

/* Week detail panel */
.al-week-detail {
  background: var(--bg-card);
  border: 2px solid var(--accent);
  border-radius: 10px;
  padding: var(--sp-4);
  margin: var(--sp-2) 0;
}
.al-week-detail-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}
.al-week-detail-header h3 { margin: 0; font-size: 16px; }
.al-cap-badge {
  padding: 3px 10px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 600;
}
.al-badge-ok { background: #f0fdf4; color: var(--success-strong); }
.al-badge-critical { background: var(--warning-light); color: var(--warning-strong); }
.al-badge-full { background: #fef2f2; color: #991b1b; }
.btn-al-add {
  padding: 6px 14px;
  border: 1px solid var(--accent);
  border-radius: 6px;
  background: var(--bg-card);
  color: var(--accent);
  font-size: 13px;
  cursor: pointer;
  margin-left: auto;
}
.btn-al-add:hover { background: #eff6ff; }

/* Booking cards */
.al-week-bookings {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 14px;
}
.al-booking-card {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: var(--sp-2) var(--sp-3);
  background: var(--surface-subtle);
  border: 1px solid var(--border);
  border-radius: 8px;
}
.al-booking-name { font-weight: 600; font-size: 13px; }
.al-booking-grade { font-size: 11px; color: var(--text-muted); text-transform: uppercase; }
.al-booking-type { font-size: 11px; color: var(--accent); font-weight: 500; }
.al-booking-remove {
  border: none;
  background: transparent;
  cursor: pointer;
  font-size: 18px;
  color: var(--text-light);
  padding: 0 2px;
  line-height: 1;
}
.al-booking-remove:hover { color: var(--danger); }

/* Flex row (daily flex slots) */
.al-week-detail-body h4 { font-size: 13px; color: var(--text-muted); margin: 12px 0 6px; }
.al-flex-row {
  display: flex;
  gap: 8px;
}
.al-flex-day {
  flex: 1;
  min-width: 0;
  background: var(--surface-subtle);
  border: 1px solid var(--border-light);
  border-radius: 6px;
  padding: var(--sp-2);
}
.al-flex-day-header {
  font-size: 12px;
  font-weight: 600;
  margin-bottom: 6px;
}
.al-flex-count { font-weight: 400; color: var(--text-light); }
.al-flex-booking {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 4px;
  font-size: 11px;
  padding: 3px 0;
  border-top: 1px solid var(--border-light);
}
.al-flex-period { font-size: 10px; color: var(--accent); font-weight: 600; }

/* Staff sidebar (scheduler) */
.al-staff-sidebar {
  width: 240px;
  flex-shrink: 0;
}
.al-staff-sidebar h3 { font-size: 14px; margin: 0 0 8px; }
.al-staff-search {
  width: 100%;
  padding: 7px 10px;
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 13px;
  margin-bottom: var(--sp-2);
  box-sizing: border-box;
}
.al-staff-list { max-height: 400px; overflow-y: auto; }
.al-staff-item {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: var(--sp-2) 10px;
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.1s;
}
.al-staff-item:hover { background: var(--bg); }
.al-staff-name { font-size: 13px; font-weight: 500; flex: 1; }
.al-staff-grade { font-size: 11px; color: var(--text-muted); text-transform: uppercase; }
.al-staff-bal { font-size: 11px; color: var(--text-light); }

/* ── Dashboard View ────────────────────────────────────────────────────────── */
.al-dashboard-header { margin-bottom: 1.5rem; }
.al-dashboard-header h2 { font-size: 1.5rem; margin: 0 0 4px; }
.al-dashboard-header p { color: var(--text-muted); margin: 0; }

.al-summary-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  margin-bottom: 1.5rem;
}
@media (max-width: 800px) { .al-summary-cards { grid-template-columns: 1fr; } }
.al-summary-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 18px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.06);
}
.al-summary-card h4 {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-muted);
  margin: 0 0 var(--sp-2);
}
.al-summary-value {
  font-size: 2rem;
  font-weight: 700;
  margin: 0 0 var(--sp-1);
  color: var(--text);
}
.al-summary-sub { font-size: 12px; color: var(--text-light); margin: 0; }

.al-dashboard-body {
  display: flex;
  gap: 1.5rem;
}
@media (max-width: 900px) { .al-dashboard-body { flex-direction: column; } }

/* Entitlement list */
.al-entitlement-list {
  flex: 1;
  min-width: 0;
}
.al-entitlement-list h3 { font-size: 16px; margin: 0 0 12px; }
/* #149 — search header for the staff leave entitlement list */
.al-entitlement-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; margin-bottom: 12px; flex-wrap: wrap;
}
.al-entitlement-head h3 { margin: 0; }
.al-dash-search {
  flex: 0 1 220px; min-width: 140px;
  padding: 6px 10px; border: 1px solid var(--border);
  border-radius: var(--radius); font-size: 13px;
}
.al-entitlement-row {
  display: flex;
  gap: 16px;
  padding: 14px var(--sp-4);
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 8px;
  margin-bottom: var(--sp-2);
  align-items: center;
}
.al-entitlement-info {
  width: 160px;
  flex-shrink: 0;
}
.al-entitlement-info strong { display: block; font-size: 14px; }
.al-entitlement-info span { font-size: 12px; color: var(--text-muted); }
.al-entitlement-bar-container { flex: 1; }
.al-entitlement-label { font-size: 11px; color: var(--text-muted); }
.al-entitlement-fraction { float: right; font-size: 12px; font-weight: 600; }
.al-entitlement-bar {
  height: 8px;
  background: var(--border);
  border-radius: 4px;
  overflow: hidden;
  margin-top: var(--sp-1);
}
.al-entitlement-bar-fill {
  height: 100%;
  border-radius: 4px;
  transition: width 0.3s;
}
.al-util-green { background: var(--success); }
.al-util-amber { background: var(--warning); }
.al-util-red { background: var(--danger); }

/* Alerts panel */
.al-alerts-panel {
  width: 320px;
  flex-shrink: 0;
}
.al-alerts-panel h3 { font-size: 16px; margin: 0 0 12px; }
.al-alert-card {
  display: flex;
  gap: 10px;
  padding: 14px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-left: 3px solid var(--warning);
  border-radius: 8px;
  margin-bottom: 10px;
}
.al-alert-icon { font-size: 20px; flex-shrink: 0; }
.al-alert-body strong { display: block; font-size: 13px; margin-bottom: 4px; }
.al-alert-body p { font-size: 12px; color: var(--text-muted); margin: 0 0 6px; }
.al-alert-action {
  font-size: 11px;
  font-weight: 600;
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}



/* ── Settings: AL Config ───────────────────────────────────────────────────── */
.al-peak-months { margin-top: 12px; }
.al-peak-month-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 6px;
}
.al-peak-month-label {
  display: flex;
  align-items: center;
  gap: 3px;
  padding: 3px var(--sp-2);
  border: 1px solid var(--border);
  border-radius: 4px;
  font-size: 12px;
  cursor: pointer;
  background: var(--bg-card);
}
.al-peak-month-label:has(input:checked) {
  background: var(--warning-light);
  border-color: var(--warning);
}
.al-peak-month-label input { margin: 0; }

/* AL Inline Add Form */
.al-add-form {
  background: var(--surface-subtle);
  border: 1px solid var(--accent);
  border-radius: 8px;
  padding: 14px;
  margin: var(--sp-2) 0;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: flex-end;
}
.al-add-form-row {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 140px;
}
.al-add-form-row label {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.3px;
}
.al-add-select {
  padding: 7px 10px;
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 13px;
  min-width: 180px;
  background: var(--bg-card);
}
.al-add-form-actions {
  display: flex;
  gap: 6px;
  margin-left: auto;
}

/* ── On-Call Templates ───────────────────────────────────────────────────── */
.oc-templates-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
}
@media (max-width: 900px) { .oc-templates-grid { grid-template-columns: 1fr; } }

.oc-template-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: var(--sp-4);
  box-shadow: 0 1px 3px rgba(0,0,0,0.06);
}
.oc-template-card h3 { margin: 0 0 12px; font-size: 16px; }
.oc-template-slots { display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px; }
.oc-template-slot {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px var(--sp-2);
  background: var(--surface-subtle);
  border: 1px solid var(--border-light);
  border-radius: var(--radius);
  flex-wrap: wrap;
}
.oc-tmpl-name { width: 120px; padding: 4px 6px; border: 1px solid var(--border); border-radius: 4px; font-size: 13px; }
.oc-tmpl-type { width: 90px; padding: 4px 4px; border: 1px solid var(--border); border-radius: 4px; font-size: 12px; }
.oc-tmpl-time { width: 75px; padding: 4px 4px; border: 1px solid var(--border); border-radius: 4px; font-size: 12px; }
.oc-tmpl-rest { width: 120px; padding: 4px 4px; border: 1px solid var(--border); border-radius: 4px; font-size: 12px; }
.oc-tmpl-offset { width: 50px; padding: 4px 4px; border: 1px solid var(--border); border-radius: 4px; font-size: 12px; }
.oc-tmpl-delete { border: none; background: transparent; color: var(--text-light); font-size: 18px; cursor: pointer; padding: 0 4px; }
.oc-tmpl-delete:hover { color: var(--danger); }

/* ── On-Call Rest Table ──────────────────────────────────────────────────── */
.oc-section { margin-top: var(--sp-5); }
.oc-section h3 { font-size: 15px; margin: 0 0 var(--sp-2); }
.oc-rest-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.oc-rest-table th { text-align: left; padding: 6px 10px; background: var(--bg); font-weight: 600; border-bottom: 2px solid var(--border); }
.oc-rest-table td { padding: 6px 10px; border-bottom: 1px solid var(--border-light); }

/* ── On-Call Roster ──────────────────────────────────────────────────────── */
.oc-roster-header {
  display: flex; align-items: center; gap: 16px; margin-bottom: var(--sp-5);
}
.oc-roster-header h2 { margin: 0; font-size: 18px; }
.oc-roster-body { display: flex; gap: 1.5rem; }
/* #172 dedup (Session 38): grid def merged from the old v2 section (flex:1 here
   + display/direction/gap there both applied); dayheaders keeps the 4px that
   won the cascade (the 8px here was dead — v2's 4px came later). */
.oc-roster-grid { flex: 1; display: flex; flex-direction: column; gap: 4px; }
.oc-roster-row { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; margin-bottom: 4px; }
.oc-roster-dayheaders { margin-bottom: 4px; }
.oc-roster-dayheader {
  text-align: center;
  font-size: 13px; font-weight: 700;
  color: var(--text);
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--sp-2) var(--sp-1);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.oc-roster-cell {
  background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 6px; min-height: 100px; font-size: 11px;
}
.oc-roster-cell.is-bank-hol { background: var(--warning-light); border-color: var(--warning); }
.oc-roster-cell-header { display: flex; align-items: center; gap: 4px; margin-bottom: 4px; }
.oc-cell-date { font-weight: 700; font-size: 13px; }
.oc-bank-hol-badge { background: var(--warning); color: #fff; font-size: 9px; font-weight: 700; padding: 1px 4px; border-radius: var(--radius-sm); }
.oc-roster-slots { display: flex; flex-direction: column; gap: 2px; }
/* .oc-roster-slot base def lives ONCE in the 2-row-grid section (search "Each slot: 2-row CSS grid")
   — two older flex defs were deduped 2026-06-10; state variants below still apply. */
.oc-roster-slot.is-filled { background: #f0fdf4; }
.oc-roster-slot.is-empty { background: var(--warning-light); }
.oc-roster-slot:hover { filter: brightness(0.95); }
/* #150 — leave/absence conflict on an issued shift */
.oc-roster-slot.has-conflict { background: #fef2f2; box-shadow: inset 0 0 0 1px #fca5a5; }
.oc-slot-conflict { color: var(--danger-strong); font-size: 11px; cursor: help; flex-shrink: 0; }
.oc-conflict-badge {
  background: var(--danger-light); color: var(--danger-strong); font-size: 11px; font-weight: 700;
  padding: 2px var(--sp-2); border-radius: 999px; cursor: help; white-space: nowrap;
}
.oc-slot-shift { font-weight: 600; font-size: 10px; min-width: 55px; }
.oc-slot-staff { font-size: 10px; flex: 1; }
.oc-unfilled { color: var(--warning-strong); font-style: italic; }
.oc-type-chip {
  font-size: 8px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.3px;
  padding: 1px var(--sp-1); border-radius: var(--radius-sm); flex-shrink: 0;
}
/* Type pill colours aligned to BASE_COLOUR_PALETTE in app.js (backlog #94). */
.oc-type-general { background: #cffafe; color: #0e7490; }   /* General ≈ X-Ray (cyan) */
.oc-type-ct      { background: var(--accent-light); color: var(--accent-hover); }   /* CT (blue) */
.oc-type-mri     { background: #fce7f3; color: #be123c; }   /* MRI (coral) */
.oc-type-ir      { background: #e0e7ff; color: #4338ca; }   /* I.R. (lavender) */
.oc-type-cath    { background: #ffedd5; color: #c2410c; }   /* Cath Lab (orange) */
.oc-no-roster { font-size: 10px; color: var(--text-light); font-style: italic; margin: 0; }
.oc-roster-sidebar { width: 160px; flex-shrink: 0; }
.oc-roster-stat {
  background: var(--bg-card); border: 1px solid var(--border); border-radius: 8px;
  padding: var(--sp-2) var(--sp-3); margin-bottom: 8px; font-size: 13px;
}
.oc-roster-stat strong { display: block; font-size: 20px; }

/* ── On-Call Daily Footer ────────────────────────────────────────────────── */
.oc-daily-footer {
  display: flex;
  gap: 1.5rem;
  margin-top: var(--sp-5);
  padding-top: var(--sp-5);
  border-top: 2px solid var(--border);
}
.oc-footer-section { flex: 1; }
.oc-footer-section h3 { font-size: 14px; margin: 0 0 var(--sp-2); color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.5px; }
.oc-footer-list { display: flex; flex-direction: column; gap: 6px; }
.oc-footer-row {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 10px; background: var(--surface-subtle); border-radius: var(--radius);
  border: 1px solid var(--border-light);
}
.oc-footer-shift { font-weight: 600; font-size: 13px; min-width: 80px; }
.oc-footer-period { font-size: 12px; font-weight: 600; color: var(--accent); }
.oc-footer-source { font-size: 11px; color: var(--text-light); }

/* ── Bank Holidays ───────────────────────────────────────────────────────── */
.oc-bh-list { display: flex; flex-direction: column; gap: 4px; margin-bottom: 10px; }
.oc-bh-item { display: flex; align-items: center; justify-content: space-between; padding: 6px 10px; background: var(--surface-subtle); border-radius: 6px; font-size: 13px; }
.oc-bh-add { display: flex; gap: 8px; align-items: center; }

/* ── On-Call Pay Rates ────────────────────────────────────────────────── */
.oc-rates-list { display: flex; flex-direction: column; gap: 10px; margin-bottom: 12px; }
.oc-rate-card {
  background: var(--surface-subtle);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: var(--sp-2) var(--sp-3);
}
.oc-rate-header {
  display: flex; align-items: center; gap: 10px; margin-bottom: 8px;
}
.oc-rate-name {
  flex: 1; padding: 5px 8px; border: 1px solid var(--border);
  border-radius: 4px; font-size: 13px; font-weight: 600;
}
.oc-rate-current { font-size: 13px; color: var(--text-muted); }
.oc-rate-delete, .oc-rate-version-delete {
  border: none; background: transparent; color: var(--text-light);
  font-size: 18px; cursor: pointer; padding: 0 4px;
}
.oc-rate-delete:hover, .oc-rate-version-delete:hover { color: var(--danger); }
.oc-rate-versions { display: flex; flex-direction: column; gap: 4px; margin-bottom: 6px; }
.oc-rate-version {
  display: flex; align-items: center; gap: 6px;
  padding: var(--sp-1) 6px; background: var(--bg-card); border-radius: 4px;
}
.oc-rate-date, .oc-rate-amount {
  padding: var(--sp-1) 6px; border: 1px solid var(--border-light);
  border-radius: 4px; font-size: 12px;
}
.oc-rate-date { width: 130px; }
.oc-rate-amount { width: 80px; }
.oc-rate-arrow { color: var(--text-light); font-size: 14px; }
.oc-rate-currency { font-size: 11px; color: var(--text-muted); }
.oc-rate-add-version {
  font-size: 11px; padding: 3px 8px; background: transparent;
  border: 1px dashed var(--border); border-radius: 4px;
  color: var(--text-muted); cursor: pointer;
}
.oc-rate-add-version:hover { border-color: var(--accent); color: var(--accent); }

/* ── On-Call Templates v2 ─────────────────────────────────────────────── */
.oc-day-tabs { display: flex; gap: 4px; margin-bottom: 16px; flex-wrap: wrap; }
.oc-day-tab {
  padding: var(--sp-2) var(--sp-3); background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--radius); cursor: pointer; font-size: 13px;
}
.oc-day-tab.is-active { background: var(--accent); color: #fff; border-color: var(--accent); }
.oc-day-count { font-size: 11px; opacity: 0.7; margin-left: 2px; }
.oc-shifts-list { display: flex; flex-direction: column; gap: 10px; margin-bottom: 12px; }
.oc-shift-card {
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: 8px; padding: 12px;
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 12px; align-items: center;
}
/* Up/down reorder column on the left of each shift card (backlog #93). */
.oc-shift-order {
  display: flex; flex-direction: column; gap: 2px;
  flex-shrink: 0;
}
.oc-shift-move {
  width: 26px; height: 22px; padding: 0;
  border: 1px solid var(--border);
  background: var(--surface-subtle); color: var(--text-muted);
  border-radius: 4px; cursor: pointer; font-size: 10px;
  line-height: 1; display: grid; place-items: center;
}
.oc-shift-move:hover:not(:disabled) {
  background: var(--accent); color: #fff; border-color: var(--accent);
}
.oc-shift-move:disabled {
  opacity: 0.35; cursor: not-allowed;
}
.oc-shift-body { min-width: 0; }
.oc-shift-header { display: flex; align-items: center; gap: 10px; margin-bottom: 4px; }
.oc-shift-name { font-weight: 600; font-size: 14px; }
.oc-shift-type-chip {
  font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.3px;
  padding: 2px var(--sp-2); border-radius: 4px; background: var(--accent-light); color: var(--accent-hover);
}
.oc-shift-meta { font-size: 12px; color: var(--text-muted); margin-bottom: 8px; }
.oc-shift-actions { display: flex; gap: 6px; align-items: center; }

.oc-shift-editor { background: var(--bg-card); border: 1px solid var(--border); border-radius: 8px; padding: 16px; }
.oc-editor-row { display: flex; gap: 16px; margin-bottom: 16px; }
.oc-editor-row label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; font-weight: 600; color: var(--text-muted); }
.oc-shift-name-input, .oc-shift-type-select { padding: 6px 10px; border: 1px solid var(--border); border-radius: 4px; font-size: 13px; min-width: 200px; }

.oc-blocks-list, .oc-rests-list { display: flex; flex-direction: column; gap: 6px; margin-bottom: 8px; }
.oc-block-row, .oc-rest-row {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: var(--sp-2) 10px; background: var(--surface-subtle); border: 1px solid var(--border-light); border-radius: var(--radius);
}
.oc-block-row label, .oc-rest-row label { display: flex; align-items: center; gap: 4px; font-size: 11px; color: var(--text-muted); }
.oc-block-num { width: 60px; padding: 4px 6px; border: 1px solid var(--border); border-radius: 4px; font-size: 12px; }
.oc-block-time, .oc-block-rate, .oc-rest-type, .oc-rest-dow, .oc-rest-period { padding: 4px 6px; border: 1px solid var(--border); border-radius: 4px; font-size: 12px; }
.oc-block-time { width: 90px; }
.oc-block-rate { min-width: 140px; }
.oc-rest-label { flex: 1; min-width: 140px; padding: 4px 8px; border: 1px solid var(--border); border-radius: 4px; font-size: 12px; }
.oc-block-checkbox { font-size: 11px; }

/* ── On-Call Roster v2 ────────────────────────────────────────────────── */
/* #172 dedup (Session 38): the grid/row/dayheader/cell/slots/state rules that
   were repeated here verbatim now live ONCE in the primary roster section
   above (search "oc-roster-header"); the slot BASE lives in the #120
   2-row-grid section (search "Each slot: 2-row CSS grid"). Probe-verified
   before/after — computed styles identical. Only v2-unique rules remain. */
.oc-roster-slot.is-picking { background: var(--accent-light); cursor: default; padding: 4px; gap: 4px; flex-wrap: wrap; }

/* Dense day (5+ shifts) — 2-column slot layout so 10 shifts fit in 5 rows
   instead of 10. Backlog #92. Cells already auto-grow on min-height.
   Uses native CSS columns (not grid) so shifts fill top-to-bottom in
   column 1, then continue in column 2 — matches reading order rather
   than the left-right-left-right of grid auto-flow. */
.oc-roster-cell.is-dense .oc-roster-slots {
  display: block;
  column-count: 2;
  column-gap: 3px;
}
.oc-roster-cell.is-dense .oc-roster-slot {
  font-size: 10px; padding: 2px 4px; gap: 2px;
  min-width: 0;
  break-inside: avoid;
  margin-bottom: 2px;
}
.oc-roster-cell.is-dense .oc-slot-shift {
  min-width: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.oc-roster-cell.is-dense .oc-slot-staff {
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* When a slot is in pick-staff mode, give it the full width so the picker fits. */
.oc-roster-cell.is-dense .oc-roster-slot.is-picking {
  column-span: all;
}
.oc-roster-slot.is-picking:hover { filter: none; }
.oc-assign-picker {
  flex: 1; min-width: 0; font-size: 10px; padding: 2px 3px;
  border: 1px solid var(--accent); border-radius: var(--radius-sm); background: var(--bg-card);
  max-width: 100%; box-sizing: border-box;
}
.oc-assign-cancel {
  border: none; background: var(--danger-light); color: var(--danger-strong); font-weight: 700;
  width: 18px; height: 18px; border-radius: var(--radius-sm); cursor: pointer;
  font-size: 12px; line-height: 1; padding: 0;
}
.oc-assign-cancel:hover { background: var(--danger-light); }
.oc-slot-shift { font-weight: 600; font-size: 10px; min-width: 60px; }
.oc-slot-staff { font-size: 10px; flex: 1; }
.oc-unfilled { color: var(--warning-strong); font-style: italic; }
.oc-type-chip { font-size: 8px; font-weight: 700; text-transform: uppercase; padding: 1px 4px; border-radius: var(--radius-sm); }
/* Type pill colours aligned to BASE_COLOUR_PALETTE in app.js (backlog #94). */
.oc-type-general { background: #cffafe; color: #0e7490; }   /* General ≈ X-Ray (cyan) */
.oc-type-ct      { background: var(--accent-light); color: var(--accent-hover); }   /* CT (blue) */
.oc-type-mri     { background: #fce7f3; color: #be123c; }   /* MRI (coral) */
.oc-type-ir      { background: #e0e7ff; color: #4338ca; }   /* I.R. (lavender) */
.oc-type-cath    { background: #ffedd5; color: #c2410c; }   /* Cath Lab (orange) */
.oc-no-roster { font-size: 10px; color: var(--text-light); font-style: italic; margin: 0; }

/* ── Coverage tab (Session 50 rota-style pass, #153/#152) ─────────────────────
   Managing on-call rota membership + modality skills (#89/#90/#91, CRUD #115).
   Built from the Rota page's own pieces so the two read as one app:
   .room-card shell + a solid --room-accent header (mirrors .room-header) +
   .room-cap count pill; the sidebar's .staff-filter-search + .pool-count;
   .staff-tag nameplates in the Staff pool; members in a FIXED column grid
   (#152 — no more ragged 2-per-row wrapping). Drag-drop model unchanged.     */
.coverage-view {
  display: grid;
  grid-template-columns: 320px minmax(0, 1fr);   /* = .layout-shell sidebar */
  align-items: start;
  min-height: calc(100vh - 52px);
}
.coverage-rail {
  position: sticky;
  top: 52px;                                   /* under the sticky topbar */
  height: calc(100vh - 52px);
  display: flex;
  flex-direction: column;
  background: var(--bg-sidebar);
  border-right: 1px solid var(--border);
  overflow: hidden;
}
.cov-rail-head {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  padding: var(--sp-3) 14px var(--sp-2);
  border-bottom: 1px solid var(--border-light);
}
.cov-eyebrow {                                 /* = .pool-section h3 */
  margin: 0;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
}
.cov-rail-head .staff-filter-search svg.ic { color: var(--text-light); }
.cov-rail-list {
  flex: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: var(--sp-2) 14px var(--sp-4);
}
.cov-rail-item.cov-dragging { opacity: 0.5; }
.cov-pt {
  flex: none;
  padding: 1px 5px;
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  background: var(--surface-subtle);
  color: var(--text-muted);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.04em;
}
.cov-rail-foot {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-2);
  padding: 10px 14px;
  border-top: 1px solid var(--border-light);
  background: var(--surface-subtle);
  font-size: 11px;
  line-height: 1.45;
  color: var(--text-muted);
}
.cov-rail-foot svg.ic { margin-top: 1px; color: var(--text-light); }

/* Main column — a white strip like the rota's day-tab strip, then the canvas */
.coverage-main { min-width: 0; }
.cov-strip {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--sp-3);
  min-height: 42px;
  padding: 10px var(--sp-4) var(--sp-2);
  background: var(--bg-sidebar);
  border-bottom: 1px solid var(--border);
}
.cov-strip-title { margin: 0; font-size: 15px; font-weight: 700; }
.cov-strip-sub { font-size: 12px; color: var(--text-muted); }
.coverage-body { padding: var(--sp-4) var(--sp-4) 80px; }
.coverage-section + .coverage-section { margin-top: var(--sp-6); }
.cov-section-head {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--sp-3);
  margin-bottom: var(--sp-3);
}
.cov-section-meta { font-size: 12px; color: var(--text-muted); }
.btn.cov-add { margin-left: auto; }

/* Cards — .room-card shell + a rota-style solid header */
.cov-rota-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 12px;
  align-items: start;
}
.cov-mod-list { display: flex; flex-direction: column; gap: 12px; }
.cov-card-head {                               /* mirrors .room-header */
  display: flex;
  align-items: center;
  gap: 6px;
  min-height: 36px;
  padding: var(--sp-1) var(--sp-2) var(--sp-1) var(--sp-3);
  background: var(--room-accent, var(--text-muted));
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.02em;
}
.cov-card-title { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.room-cap.cov-count { display: inline-flex; align-items: center; gap: 4px; }
.cov-head-actions { display: inline-flex; gap: 2px; }
.cov-head-icon {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  padding: 0;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: rgba(255, 255, 255, 0.6);             /* = .room-gear-btn idiom */
  cursor: pointer;
  transition: color 120ms, background 120ms;
}
.cov-head-icon:hover { color: #fff; background: var(--overlay-light); }
.cov-head-icon:focus-visible { outline: none; color: #fff; box-shadow: 0 0 0 2px var(--overlay-medium); }

/* Members — fixed column grid of compact nameplates (#152) */
.cov-members {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(148px, 1fr));
  gap: 6px;
  align-content: start;
  min-height: 56px;
  padding: 10px;
}
.cov-chip {                                    /* compact .staff-tag */
  display: flex;
  align-items: center;
  gap: 5px;
  height: 30px;
  min-width: 0;
  padding: 0 4px 0 10px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--tag-radius);
  font-size: 12px;
  font-weight: 500;
  cursor: grab;
  user-select: none;
  transition: border-color 150ms, box-shadow 150ms;
}
.cov-chip:hover { border-color: var(--accent); box-shadow: var(--shadow-sm); }
.cov-chip:active { cursor: grabbing; }
.cov-chip.cov-dragging { opacity: 0.5; }
.cov-nm { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cov-gr { flex: none; font-size: 10px; font-weight: 700; letter-spacing: 0.02em; color: var(--text-muted); }
.cov-pct { flex: none; font-size: 10px; font-weight: 600; color: var(--text-muted); }
.cov-x {
  flex: none;
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--text-light);
  cursor: pointer;
  opacity: 0;
  transition: opacity 120ms, background 120ms, color 120ms;
}
.cov-chip:hover .cov-x,
.cov-x:focus-visible { opacity: 1; }
.cov-x:hover { background: var(--danger-light); color: var(--danger-strong); }
.cov-empty {                                   /* = .room-drop-zone */
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  padding: 6px var(--sp-2);
  border: 1px dashed var(--border);
  border-radius: var(--radius);
  font-size: 12px;
  color: var(--text-light);
  text-align: center;
}
.cov-empty-block { min-height: 96px; background: var(--bg-card); }
[data-cov-drop].cov-drop-hover {
  background: var(--accent-light);
  outline: 2px dashed var(--accent);
  outline-offset: -2px;
}

/* Modality cards — rooms row + specialist sub-lists */
.cov-rooms-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  padding: var(--sp-2) 10px;
  background: var(--surface-subtle);
  border-bottom: 1px solid var(--border-light);
}
.cov-rooms-lbl {
  margin-right: 2px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
}
.cov-room-chip {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  height: 24px;
  padding: 0 4px 0 10px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  font-size: 11px;
  font-weight: 600;
  color: var(--text);
}
.cov-room-chip.is-specialist { padding-left: var(--sp-2); }
.cov-room-chip.is-specialist > svg.ic { color: var(--text-muted); }
.cov-room-actions { display: inline-flex; opacity: 0; transition: opacity 120ms; }
.cov-room-chip:hover .cov-room-actions,
.cov-room-chip:focus-within .cov-room-actions { opacity: 1; }
.cov-room-icon {
  display: grid;
  place-items: center;
  width: 18px;
  height: 18px;
  padding: 0;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
}
.cov-room-icon:hover { background: var(--border-light); color: var(--text); }
.cov-room-icon.cov-room-delete:hover { background: var(--danger-light); color: var(--danger-strong); }
.btn.cov-add-room,
.btn.cov-add-specialist { padding: 3px var(--sp-2); font-size: 11px; }
.cov-specialists {
  padding: var(--sp-2) 10px;
  background: var(--surface-subtle);
  border-top: 1px solid var(--border-light);
}
.cov-spec-head {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-bottom: var(--sp-1);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
}
.cov-spec-row {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  padding: 6px 0;
  border-bottom: 1px dashed var(--border);
}
.cov-spec-row:last-of-type { border-bottom: 0; }
.cov-spec-label { flex: 0 0 200px; display: flex; align-items: center; min-height: 30px; }
.cov-members.cov-spec-members { flex: 1; min-height: 30px; padding: 0; }

/* Colour picker — inline under the card header */
.cov-colour-picker {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  padding: var(--sp-2) 10px;
  background: var(--bg-card);
  border-bottom: 1px solid var(--border-light);
}
.cov-picker-label { font-size: 11px; font-weight: 600; color: var(--text-muted); }
.cov-picker-palette { display: flex; flex-wrap: wrap; gap: 4px; }
.cov-picker-swatch {
  width: 22px;
  height: 22px;
  padding: 0;
  border: 2px solid var(--bg-card);
  border-radius: var(--radius-sm);
  box-shadow: 0 0 0 1px var(--border);
  cursor: pointer;
}
.cov-picker-swatch:hover { box-shadow: 0 0 0 1px var(--text); }
.cov-picker-swatch.is-active { box-shadow: 0 0 0 2px var(--text); }
.btn.cov-picker-close { margin-left: auto; }

/* ── Onboarding checklist banner (backlog #117) ───────────────────────────
   Appears after a successful Excel import. Lists items that need manual
   review (PT schedules, non-default AL, balances, bank holidays, etc.) */
.onboarding-checklist {
  margin: var(--sp-4) auto;
  max-width: 1200px;
  background: var(--bg-card);
  border: 1px solid #fcd34d;
  border-left: 4px solid var(--warning);
  border-radius: 8px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.04);
  overflow: hidden;
}
.checklist-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 14px;
  background: #fffbeb;
  border-bottom: 1px solid #fde68a;
}
.checklist-head-title {
  font-size: 13px; font-weight: 700; color: var(--warning-strong);
}
.checklist-dismiss {
  background: transparent; border: 0; cursor: pointer;
  font-size: 18px; color: var(--warning-strong); padding: 0 6px;
  line-height: 1;
}
.checklist-dismiss:hover { color: var(--text); }

.checklist-items { padding: 4px 0; }
.checklist-item {
  display: grid;
  grid-template-columns: 28px 1fr auto auto; /* icon · body · action · #202 per-item × */
  gap: 12px;
  padding: 10px 14px;
  border-bottom: 1px solid #f3f4f6;
  align-items: center;
}
/* #202 — dismiss ONE flag (the head × still dismisses the whole banner) */
.checklist-item-x {
  background: transparent; border: 0; cursor: pointer;
  font-size: 15px; color: var(--text-light); padding: 0 var(--sp-1);
  line-height: 1;
}
.checklist-item-x:hover { color: var(--text); }
.checklist-item:last-child { border-bottom: 0; }
.checklist-icon {
  font-size: 16px; text-align: center;
  width: 24px; height: 24px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--border-light);
}
.checklist-item.is-info  .checklist-icon { background: var(--accent-light); color: var(--accent-hover); }
.checklist-item.is-warn  .checklist-icon { background: var(--warning-light); color: var(--warning-strong); }
.checklist-item.is-error .checklist-icon { background: var(--danger-light); color: var(--danger-strong); }
.checklist-title { font-size: 13px; font-weight: 600; color: var(--text); }
.checklist-desc  { font-size: 12px; color: var(--text-muted); margin-top: 2px; }
.checklist-action {
  background: var(--accent); color: #fff; border: 0;
  padding: 6px var(--sp-3); border-radius: 6px;
  font: inherit; font-size: 12px; font-weight: 500; cursor: pointer;
}
.checklist-action:hover { background: var(--accent-hover); }

/* Backlog #125 — checklist drill-down (expand to show specific staff) */
.checklist-expand {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 1px 7px;
  font: inherit; font-size: 10px; font-weight: 600;
  color: var(--slate-600);
  cursor: pointer;
  margin-left: 6px;
  line-height: 1.3;
}
.checklist-expand:hover { background: var(--border); }
.checklist-affected {
  margin: 6px 0 0;
  padding: 6px var(--sp-3);
  list-style: none;
  background: var(--surface-subtle);
  border-radius: 6px;
  border: 1px solid var(--border-light);
}
.checklist-affected li {
  padding: 3px 0;
  font-size: 12px;
  border-bottom: 1px solid var(--border-light);
}
.checklist-affected li:last-child { border-bottom: 0; }
.checklist-affected-name { font-weight: 600; color: var(--text); }
.checklist-affected-detail { color: var(--text-muted); }
/* #202 — names that are real staff deep-link to the profile */
.checklist-affected-link { color: var(--accent); cursor: pointer; text-decoration: none; }
.checklist-affected-link:hover { color: var(--accent-hover); text-decoration: underline; }

/* #201 — Contact & IDs card (profile sidebar) */
.profile-identity { display: flex; flex-direction: column; gap: var(--sp-2); }
.identity-row { display: flex; flex-direction: column; gap: 2px; }
.identity-label {
  font-size: 11px; font-weight: 600; color: var(--text-muted);
  text-transform: uppercase; letter-spacing: 0.04em;
}
.identity-input {
  padding: 6px 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font: inherit; font-size: 13px;
  background: var(--bg-card); color: var(--text);
}
.identity-input:focus { outline: none; border-color: var(--accent); box-shadow: var(--focus-ring); }
.identity-input::placeholder { color: var(--text-light); }

/* Backlog #126 — Bank holiday calendar picker */
.bh-cal-nav {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: var(--sp-3); flex-wrap: wrap;
}
.bh-cal-year { font-size: 16px; min-width: 60px; text-align: center; }
.bh-cal-count {
  margin-left: auto;
  font-size: 12px; color: var(--text-muted);
}
.btn-ghost-sm {
  background: var(--surface-subtle);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: var(--sp-1) 10px;
  font: inherit; font-size: 12px; cursor: pointer;
}
.btn-ghost-sm:hover { background: var(--bg); }
.bh-cal-grid-wrap {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 12px;
}
.bh-cal-month {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: var(--sp-2);
}
.bh-cal-month-name {
  font-size: 12px; font-weight: 700;
  text-align: center;
  margin-bottom: var(--sp-1);
  color: var(--text);
}
.bh-cal-dow {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 1px;
  font-size: 9px; font-weight: 600;
  color: var(--text-light);
  text-align: center;
  margin-bottom: 2px;
}
.bh-cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 1px;
}
.bh-cal-cell {
  background: transparent;
  border: 1px solid transparent;
  font: inherit;
  font-size: 10px;
  padding: 3px 0;
  border-radius: 3px;
  cursor: pointer;
  color: var(--slate-600);
  text-align: center;
  min-height: 22px;
}
.bh-cal-cell:hover {
  background: var(--accent-light);
  border-color: var(--accent);
}
.bh-cal-cell.is-blank { cursor: default; }
.bh-cal-cell.is-blank:hover { background: transparent; border-color: transparent; }
.bh-cal-cell.is-weekend { color: var(--text-light); }
.bh-cal-cell.is-bh {
  background: #fce7f3;
  color: #be185d;
  font-weight: 700;
  border-color: #f9a8d4;
}
.bh-cal-cell.is-bh:hover {
  background: #fbcfe8;
  border-color: #ec4899;
}

.bh-cal-list {
  margin-top: var(--sp-3);
  padding: 10px var(--sp-3);
  background: var(--surface-subtle);
  border: 1px solid var(--border-light);
  border-radius: 6px;
  display: flex; flex-wrap: wrap; gap: 6px;
}
.bh-chip {
  display: inline-flex; align-items: center; gap: 4px;
  background: #fce7f3;
  color: #be185d;
  border: 1px solid #f9a8d4;
  border-radius: 999px;
  padding: 2px var(--sp-2);
  font-size: 11px;
  font-weight: 600;
}
.bh-chip-x {
  background: transparent;
  border: 0;
  color: #be185d;
  cursor: pointer;
  font-size: 14px;
  padding: 0;
  line-height: 1;
  opacity: 0.7;
}
.bh-chip-x:hover { opacity: 1; }

/* ── Auto-Fill (#82) ───────────────────────────────────────────────────── */
.btn-autofill {
  background: #7c3aed; color: #fff;
  border: 0; padding: 6px 12px; border-radius: 6px;
  font: inherit; font-weight: 600; font-size: 13px; cursor: pointer;
  margin-left: 6px;
}
.btn-autofill:hover { background: #6d28d9; }
/* #150 — Clear assignments (secondary/outline, destructive on hover) */
.btn-clear-roster {
  background: var(--bg-card); color: var(--text); border: 1px solid var(--border);
  padding: 6px var(--sp-3); border-radius: 6px; font: inherit; font-weight: 600;
  font-size: 13px; cursor: pointer; margin-left: 6px;
}
.btn-clear-roster:hover { background: #fef2f2; color: var(--danger-strong); border-color: #fca5a5; }
.btn-autofill-primary {
  background: #7c3aed; color: #fff;
  border: 0; padding: 8px 14px; border-radius: 6px;
  font: inherit; font-weight: 600; font-size: 13px; cursor: pointer;
}
.btn-autofill-primary:hover { background: #6d28d9; }

/* #174 — collapsible "how auto-fill picks people" legend in the dialog */
.autofill-legend {
  margin: 0 var(--sp-4) 10px;
  font-size: 12px;
  color: var(--text-muted);
}
.autofill-legend summary {
  cursor: pointer;
  color: var(--accent);
  font-weight: 600;
}
.autofill-legend dl {
  margin: var(--sp-2) 0 0;
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: 4px 10px;
}
.autofill-legend dt { font-weight: 600; color: var(--text); }
.autofill-legend dd { margin: 0; }
.autofill-legend-tldr {
  margin: var(--sp-2) 0 0;
  font-style: italic;
}

.autofill-dialog {
  margin: var(--sp-3) 0;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.08);
  overflow: hidden;
  max-width: 700px;
}
.autofill-dialog-head {
  padding: var(--sp-3) var(--sp-4);
  background: linear-gradient(to bottom, #faf5ff, var(--bg-card));
  border-bottom: 1px solid #ede9fe;
  display: flex; justify-content: space-between; align-items: center;
}
.autofill-dialog-head h3 {
  margin: 0; font-size: 15px; font-weight: 700; color: #5b21b6;
}
.autofill-dialog-close {
  background: transparent; border: 0;
  font-size: 20px; cursor: pointer; color: var(--text-muted);
  padding: 0 var(--sp-2); line-height: 1;
}
.autofill-dialog-close:hover { color: var(--text); }
.autofill-dialog-body { padding: 14px 16px 16px; }
.autofill-dialog-help {
  font-size: 12px; color: var(--text-muted); margin: 0 0 12px;
  line-height: 1.45;
}
.autofill-presets {
  display: flex; align-items: center; gap: 6px;
  margin-bottom: var(--sp-3); flex-wrap: wrap;
}
.autofill-presets-label {
  font-size: 12px; font-weight: 600; color: var(--slate-600);
  margin-right: var(--sp-1);
}
.autofill-preset {
  background: var(--bg); color: var(--text); border: 1px solid var(--border);
  padding: 5px 10px; border-radius: 6px; font: inherit; font-size: 12px;
  font-weight: 500; cursor: pointer;
}
.autofill-preset:hover { background: #ede9fe; border-color: #c4b5fd; }
.autofill-range {
  display: flex; gap: 12px; margin-bottom: 14px; flex-wrap: wrap;
}
.autofill-range label {
  display: flex; flex-direction: column; gap: 4px;
  font-size: 12px; font-weight: 600; color: var(--slate-600);
}
.autofill-range input {
  padding: 6px 10px; border: 1px solid var(--border);
  border-radius: 6px; font: inherit; font-size: 13px;
}
.autofill-dialog-actions {
  display: flex; gap: 8px; justify-content: flex-end;
  padding-top: 6px; border-top: 1px solid var(--border-light);
}

.autofill-proposal-banner {
  margin: var(--sp-3) 0;
  background: var(--bg-card);
  border: 1px solid #c4b5fd;
  border-left: 4px solid #7c3aed;
  border-radius: 8px;
  padding: 10px 14px;
  display: flex; justify-content: space-between; align-items: center;
  flex-wrap: wrap; gap: 12px;
}
.autofill-proposal-text { font-size: 13px; color: var(--text); }
.autofill-proposal-text strong { display: block; margin-bottom: 4px; }
.autofill-stats { display: inline-flex; gap: 14px; flex-wrap: wrap; }
.autofill-stat { font-size: 11px; color: var(--slate-600); }
.autofill-stat-label { font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.04em; }
.autofill-proposal-actions { display: flex; gap: 8px; }

/* Proposal cell / slot styling — dimmed amber + dashed border so the
   manager can distinguish suggested assignments from committed ones. */
.oc-roster-cell.is-proposal-cell {
  background: linear-gradient(to bottom, #fdf4ff, var(--bg-card) 30%);
  border-color: #d8b4fe;
  border-style: dashed;
}
.oc-roster-slot.is-proposal {
  background: #f5f3ff;
  border: 1px dashed #c4b5fd;
  position: relative;
}
.oc-roster-slot.is-proposal.is-filled { background: #f5f3ff; color: #4c1d95; }
/* Unfilled proposal slot — auto-fill couldn't pick a candidate.
   Bright red treatment so the manager spots it from across the grid.
   Distinct from regular .is-empty (pale amber) and from
   .is-proposal.is-filled (pale purple). */
.oc-roster-slot.is-proposal.is-empty {
  background: var(--danger-light);
  border: 1px solid #dc2626;
  color: #991b1b;
  font-weight: 600;
}
.oc-roster-slot.is-proposal.is-empty .oc-unfilled {
  color: #991b1b;
  font-style: normal;
  font-weight: 700;
}
.oc-proposal-reject {
  margin-left: auto;
  background: transparent; border: 0;
  width: 16px; height: 16px;
  border-radius: 50%; cursor: pointer;
  font-size: 10px; line-height: 1;
  color: var(--text-light); opacity: 0;
  transition: opacity .12s;
}
.oc-roster-slot.is-proposal:hover .oc-proposal-reject { opacity: 1; }
.oc-proposal-reject:hover { background: var(--danger-light); color: var(--danger-strong); }

/* CV / fairness chip — used in proposal banner + dashboard */
.autofill-cv { font-weight: 700; padding: 1px 6px; border-radius: 4px; }
.autofill-cv.is-good { background: var(--success-light); color: var(--success-strong); }
.autofill-cv.is-ok   { background: var(--warning-light); color: var(--warning-strong); }
.autofill-cv.is-warn { background: var(--danger-light); color: var(--danger-strong); }

.autofill-imbalance-warn {
  margin-top: var(--sp-2);
  background: var(--warning-light);
  border: 1px solid #fcd34d;
  border-radius: 6px;
  padding: 6px 10px;
  font-size: 11px;
  color: var(--warning-strong);
  line-height: 1.5;
}

.autofill-fairness-section { margin: 18px 0; }
.autofill-fairness-section h3 {
  margin: 0 0 6px;
  font-size: 14px; font-weight: 700; color: var(--text);
}
.autofill-fairness-help {
  font-size: 12px; color: var(--text-muted); margin: 0 0 10px;
}
.autofill-fairness-table {
  width: 100%; max-width: 700px;
  border-collapse: collapse;
  font-size: 12px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
}
.autofill-fairness-table th {
  background: var(--surface-subtle);
  padding: var(--sp-2) var(--sp-3);
  text-align: left;
  font-weight: 600; color: var(--slate-600);
  border-bottom: 1px solid var(--border);
}
.autofill-fairness-table td {
  padding: var(--sp-2) var(--sp-3);
  border-bottom: 1px solid var(--border-light);
}
.autofill-fairness-table tr:last-child td { border-bottom: 0; }
.autofill-fairness-overall { background: var(--surface-subtle); font-weight: 600; }

.autofill-last-run {
  margin-top: 14px;
  padding: 10px 14px;
  background: var(--surface-subtle);
  border: 1px solid var(--border);
  border-radius: 6px;
}
.autofill-last-run h3 {
  margin: 0 0 var(--sp-1);
  font-size: 12px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--text-muted);
}
.autofill-last-run p { margin: 0; font-size: 12px; color: var(--text); }

/* ── On-Call view — wide layout (sub-tabs at top instead of left rail) ── */
.oc-surface { padding: 0; }
.oc-subtab-strip {
  display: flex; gap: 4px;
  padding: var(--sp-3) var(--sp-4) 0;
  border-bottom: 1px solid var(--border-light);
}
.oc-subtab-btn {
  background: transparent; border: 0;
  padding: var(--sp-2) var(--sp-4);
  border-bottom: 2px solid transparent;
  font: inherit; font-size: 13px; font-weight: 500;
  color: var(--text-muted); cursor: pointer;
}
.oc-subtab-btn:hover { color: var(--text); }
.oc-subtab-btn.is-active {
  color: var(--accent);
  border-bottom-color: var(--accent);
}
.oc-main-wide {
  padding: var(--sp-4) var(--sp-5) var(--sp-6);
  width: 100%;
  max-width: none; /* let the roster grid use full width */
}

/* Roster cells — strict column widths + vertical-stack slots (backlog #120).
   Two-line slot: shift name on top, staff name underneath. Both ellipsis-
   truncated. Cells can't grow beyond their 1/7th column share. (User pref A.) */
.oc-roster-row {
  /* minmax(0, 1fr) is the magic — without the 0 lower bound, cells stretch
     to fit their largest content and break grid alignment. */
  grid-template-columns: repeat(7, minmax(0, 1fr)); /* later-in-file wins over the #120 base def */
}
.oc-roster-cell {
  min-height: 130px;
  overflow: hidden;          /* prevent any rogue child from forcing widening */
  min-width: 0;              /* allow grid track to shrink the cell */
}
.oc-roster-cell .oc-roster-slots {
  min-width: 0;
}

/* Each slot: 2-row CSS grid. Row 1 = shift name + type dot. Row 2 = staff.
   This is the ONE base def (two older flex defs deduped 2026-06-10 — the transition
   below used to come from the first of them). */
.oc-roster-slot {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-rows: auto auto;
  column-gap: 4px;
  row-gap: 0;
  padding: 3px 6px;
  border-radius: 4px;
  cursor: pointer;
  min-height: 32px;
  align-items: center;
  min-width: 0;
  transition: background 0.1s;
}
.oc-slot-shift {
  grid-column: 1;
  grid-row: 1;
  font-size: 10px;
  font-weight: 600;
  color: var(--text-muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  min-width: 0;
  max-width: none;            /* override the older 60% cap */
}
.oc-type-chip {
  grid-column: 2;
  grid-row: 1;
  display: inline-block;
  width: 8px; height: 8px;
  font-size: 0; line-height: 0;
  padding: 0;
  border-radius: 50%;
  flex-shrink: 0;
  align-self: center;
}
.oc-slot-staff {
  grid-column: 1 / -1;
  grid-row: 2;
  font-size: 11px;
  font-weight: 500;
  color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  min-width: 0;
}
.oc-slot-staff .oc-unfilled {
  color: var(--text-light);
  font-style: italic;
}
/* Picking-mode slot keeps its single-row look so the dropdown fits */
.oc-roster-slot.is-picking {
  display: flex;
  grid-template-columns: none;
  grid-template-rows: none;
}

/* Part-time Leave grid (profile editor) */
.pt-leave-section { margin-top: 12px; }
.pt-leave-section-title {
  font-size: 11px;
  font-weight: 600;
  color: var(--slate-600);
  margin: 0 0 6px 0;
}
.pt-leave-grid-wrap { margin-top: 8px; }
.pt-leave-grid-hint { font-size: 10px; color: var(--text-muted); margin-bottom: 6px; }
.pt-leave-grid { border-collapse: collapse; font-size: 11px; }
.pt-leave-grid th, .pt-leave-grid td { padding: 4px 6px; text-align: center; }
.pt-leave-grid th.pt-leave-rowlabel { text-align: right; font-weight: 600; color: var(--slate-600); }
.pt-leave-cell {
  width: 26px; height: 26px;
  border: 1px solid var(--border); background: var(--bg-card); border-radius: var(--radius-sm);
  cursor: pointer; color: var(--text-light); font-size: 14px;
}
.pt-leave-cell.is-on {
  background: var(--accent); border-color: var(--accent-hover); color: #fff;
}
.pt-leave-cell:hover { border-color: var(--accent); }

/* Sidebar PT-leave pool action chip */
.pt-leave-tag {
  display: inline-block;
  padding: 2px var(--sp-2);
  border-radius: 10px;
  background: var(--accent-light);
  color: var(--accent-hover);
  font-size: 10px;
  font-weight: 600;
}

/* ── #162 Training (dated in-room training assignment) ─────────────────────
   Bounding box: outline, NOT border — consumes no layout width, so the tag /
   room-card rhythm survives untouched (#146 lesson). The tag itself is
   unchanged; only the box + 🎓 pill mark the training state. */
.staff-tag.is-training {
  outline: 2px dashed var(--training);
  outline-offset: 2px;
}
.training-pill {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  margin-left: var(--sp-1);
  padding: 1px 5px;
  border-radius: var(--radius-pill);
  background: var(--training-soft);
  color: var(--training);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.02em;
  flex: 0 0 auto;
}
.staff-tag.is-half .training-pill-label { display: none; } /* half tags: 🎓 only */

/* Capacity badge keeps its pill; the +n🎓 rides inside the same text. */

/* Training card (Profiles) */
.trn-card { display: flex; flex-direction: column; gap: var(--sp-2); }
.trn-row {
  padding: var(--sp-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface-subtle);
  font-size: 12px;
}
.trn-row-main { display: flex; align-items: center; gap: var(--sp-2); }
.trn-row-sub { margin-top: 2px; color: var(--text-muted); display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; }
.trn-row-note { margin-top: 2px; color: var(--text-muted); font-style: italic; }
.trn-row-conflicts { margin-top: 2px; font-size: 11px; color: var(--accent-hover); } /* ℹ info-level, never red */
.trn-signoff { border-style: solid; border-color: var(--training); }
.trn-chip {
  padding: 1px 7px;
  border-radius: var(--radius-pill);
  font-size: 10px;
  font-weight: 600;
}
.trn-chip.is-active    { background: var(--training-soft); color: var(--training); }
.trn-chip.is-planned   { background: var(--accent-light); color: var(--accent-hover); }
.trn-chip.is-lapsed    { background: var(--warning-light); color: var(--warning-strong); }
.trn-chip.is-cancelled { background: var(--border-light); color: var(--text-muted); }
.trn-chip.is-completed { background: var(--success-light); color: var(--success-strong); }
.trn-counts {
  padding: 1px 6px;
  border-radius: var(--radius-pill);
  background: var(--warning-light);
  color: var(--warning-strong);
  font-size: 10px;
  font-weight: 600;
}
.trn-actions { margin-left: auto; display: inline-flex; gap: var(--sp-1); }
.trn-btn {
  padding: 2px var(--sp-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg-card);
  font-size: 11px;
  cursor: pointer;
}
.trn-btn:hover { border-color: var(--accent); }
.trn-btn.is-primary { background: var(--accent); border-color: var(--accent); color: var(--bg-card); }
.trn-btn.is-danger:hover { border-color: var(--danger-hover); color: var(--danger-hover); }
.trn-add { align-self: flex-start; }
.trn-form { display: flex; flex-direction: column; gap: var(--sp-2); padding: var(--sp-2); border: 1px dashed var(--training); border-radius: var(--radius-sm); }
.trn-form label { display: flex; flex-direction: column; gap: 2px; font-size: 11px; font-weight: 600; color: var(--text-muted); }
.trn-form-dates { display: flex; gap: var(--sp-2); }
.trn-form-dates label { flex: 1; }
.trn-input { font-size: 12px; padding: 3px 6px; border: 1px solid var(--border); border-radius: var(--radius-sm); font-family: inherit; }
.trn-form .trn-check { flex-direction: row; align-items: center; gap: var(--sp-2); font-weight: 400; }
.trn-form-actions { display: flex; gap: var(--sp-2); }

/* ── #188 Import preview (dry run) ────────────────────────────────────────── */
.ip-overlay {
  position: fixed; inset: 0;
  background: rgba(15, 23, 42, 0.45);
  display: flex; align-items: center; justify-content: center;
  z-index: 400;
}
.ip-card {
  background: var(--bg-card);
  border-radius: 10px;
  border: 1px solid var(--border);
  box-shadow: 0 20px 50px rgba(15, 23, 42, 0.25);
  padding: var(--sp-5);
  width: min(560px, calc(100vw - 32px));
  max-height: 80vh;
  overflow-y: auto;
  font-size: 13px;
}
.ip-title { margin: 0 0 var(--sp-1); font-size: 16px; }
.ip-sub { margin: 0 0 var(--sp-3); color: var(--text-muted); }
.ip-list { margin: 0 0 var(--sp-3); padding-left: var(--sp-5); display: flex; flex-direction: column; gap: var(--sp-1); }
.ip-names { color: var(--text-muted); font-size: 12px; }
.ip-warnings {
  background: var(--warning-light);
  border: 1px solid var(--warning);
  border-radius: var(--radius-sm);
  padding: var(--sp-2) var(--sp-3);
  margin-bottom: var(--sp-3);
}
.ip-warnings ul { margin: var(--sp-1) 0 0; padding-left: var(--sp-4); }
.ip-actions { display: flex; gap: var(--sp-2); }
.ip-actions .ip-proceed { font-size: 13px; padding: 6px 14px; }
.ip-actions .trn-btn { font-size: 13px; padding: 6px 14px; }

/* ── #210 (Session 50) — controls that now carry line icons ───────────────────
   Emoji → iconSvg() across the manager app; these centre icon + label. Kept
   last so source order wins without !important. */
.smart-fill-btn,
.btn-ghost-sm,
.checklist-expand,
.oc-conflict-badge,
.room-leave-warn,
.room-cap,
.trn-chip { display: inline-flex; align-items: center; gap: 3px; }
.btn-topbar-action,
.btn-autofill,
.btn-autofill-primary,
.profile-add-staff-btn { display: inline-flex; align-items: center; gap: 6px; }
.room-close-toggle,
.room-closed-banner { display: flex; align-items: center; justify-content: center; gap: 6px; }
.room-lead-star.is-lead svg.ic { fill: currentColor; }          /* filled gold star = the lead */
.settings-chevron,
.al-week-edit-btn { display: inline-grid; place-items: center; }
.al-week-edit-btn { color: var(--text-muted); }
.al-alert-icon { display: grid; place-items: start center; color: var(--warning-strong); }
.settings-close-btn { display: inline-grid; place-items: center; }
.pay-point-tick { display: inline-grid; place-items: center; }