:root {
  --bg: #e8f0f9;
  --surface: #ffffff;
  --text: #1a2535;
  --muted: #5a6d84;
  --line: #c4d2e4;
  --accent: #1e6fa8;
  --accent-soft: #ddeefa;
  --warn: #b83232;
  --ok: #16846e;
  --radius: 10px;
  --portal-nav-h: 40px;
  --banner-height: 0px;
  --tabs-height: 0px;
  --sticky-chrome-height: 0px;
  --settings-subtabs-height: 0px;
  --people-subtabs-height: 0px;
  --tr-header-row-1-height: 0px;

  /* Glass theme tokens */
  --glass-bg: linear-gradient(140deg, rgba(255,255,255,0.38), rgba(255,255,255,0.26));
  --glass-bg-strong: linear-gradient(140deg, rgba(255,255,255,0.5), rgba(255,255,255,0.3));
  --glass-border: rgba(255,255,255,0.72);
  --glass-shadow: 0 8px 24px rgba(12,29,48,0.10);
  --glass-inner: inset 0 1px 0 rgba(255,255,255,0.42);
  --accent-start: rgba(55,122,182,0.9);
  --accent-end: rgba(38,93,147,0.88);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  overflow-y: scroll; /* permanently reserve scrollbar space — prevents layout shift/flicker */
  font-family: "Manrope", "Segoe UI", "Avenir Next", system-ui, sans-serif;
  font-size: 14px;
  color: var(--text);
  background:
    radial-gradient(circle at 10% 8%,  rgba(116,162,238,0.09), transparent 38%),
    radial-gradient(circle at 88% 10%, rgba(92,164,229,0.10),  transparent 40%),
    radial-gradient(circle at 52% 90%, rgba(86,168,232,0.06),  transparent 42%),
    linear-gradient(155deg, #f2f7ff 0%, #e8f0fb 55%, #e2ecf9 100%);
  background-attachment: fixed;
}

/* ── Background orbs ───────────────────────────────────── */
.bg-orb {
  position: fixed;
  z-index: -1;
  border-radius: 50%;
  filter: blur(50px);
  opacity: 0.10;
  pointer-events: none;
  animation: bg-orb-drift 14s ease-in-out infinite alternate;
}
.bg-orb-1 { width: 380px; height: 380px; background: #6aa4ff; left: -130px; top: -90px; }
.bg-orb-2 { width: 320px; height: 320px; background: #57c6ff; right: -110px; top: 60px; animation-duration: 18s; }
@keyframes bg-orb-drift {
  from { transform: translate3d(0,0,0); }
  to   { transform: translate3d(18px,-14px,0); }
}

/* ── Topbar ──────────────────────────────────────────── */
.topbar {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
  position: sticky;
  top: var(--portal-nav-h, 40px);
  z-index: 10002;
  padding: 6px 16px;
  background: linear-gradient(135deg, #121c2e 0%, #163054 100%);
  color: #fff;
  border-bottom: 1px solid rgba(255,255,255,0.10);
  box-shadow: 0 4px 20px rgba(0,0,0,0.28), inset 0 1px 0 rgba(255,255,255,0.08);
  /* No backdrop-filter: it creates an isolated GPU compositing layer whose
     texture bounds clip the topbar's own border-box. Without it, z-index:10002
     correctly lets magnified pills overflow upward above the portal-nav. */
  overflow: visible;
}
.topbar-brand { line-height: 1.2; flex-shrink: 0; margin-right: auto; }
.topbar h1    { margin: 0; font-size: 20px; font-weight: 700; letter-spacing: -.3px; white-space: nowrap; }
.subtitle     { font-size: 11px; opacity: .75; margin: 0; }

/* ── Week navigator: single-row layout ───────────────── */
.week-nav {
  flex-shrink: 0;
  min-width: 0;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 4px;
  margin-left: 16px;
}
.week-nav-top, .week-nav-strip { display: contents; }

.year-filter-pills {
  display: flex;
  gap: 4px;
  align-items: center;
}
.year-filter-pill {
  padding: 1px 9px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.28);
  background: rgba(255,255,255,.1);
  color: rgba(255,255,255,.75);
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  transition: background .14s, color .14s;
  white-space: nowrap;
}
.year-filter-pill:hover { background: rgba(255,255,255,.2); color: #fff; }
.year-filter-pill.active {
  background: rgba(255,255,255,.92);
  color: #1a2d4a;
  border-color: transparent;
}
.week-selected-label {
  font-size: 11px;
  color: rgba(255,255,255,.82);
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 6px;
}
.week-label-current-badge {
  display: inline-block;
  padding: 1px 7px;
  border-radius: 999px;
  background: #22d3ee;
  color: #0c4a6e;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .03em;
}
.week-jump-wrap {
  margin-left: auto;
  position: relative;
}
.btn-week-jump {
  flex-shrink: 0;
  padding: 3px 8px;
  border-radius: 6px;
  border: 1px solid rgba(255,255,255,.22);
  background: rgba(255,255,255,.10);
  color: rgba(255,255,255,.8);
  font-size: 13px;
  cursor: pointer;
  white-space: nowrap;
  line-height: 1;
}
.btn-week-jump:hover { background: rgba(255,255,255,.22); }
.week-jump-select {
  display: none;
  position: absolute;
  right: 0;
  top: calc(100% + 5px);
  z-index: 9300;
  background: #102040;
  color: #e8f2ff;
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 10px;
  font-size: 13px;
  padding: 4px 0;
  box-shadow: 0 12px 36px rgba(0,0,0,0.40);
  min-width: 240px;
  cursor: pointer;
}
.week-jump-select.open { display: block; }

.week-nav-arrow {
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  border-radius: 6px;
  border: 1px solid rgba(255,255,255,.22);
  background: rgba(255,255,255,.10);
  color: #fff;
  font-size: 11px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .14s;
}
.week-nav-arrow:hover  { background: rgba(255,255,255,.26); }
.week-nav-arrow:active { background: rgba(255,255,255,.38); }

.week-pills-scroll {
  flex: 1;
  min-width: 0;
  overflow-x: auto;
  overflow-y: visible;
  clip-path: inset(-10px 0 -10px 0);
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,.22) transparent;
}
.week-pills-scroll::-webkit-scrollbar { height: 3px; }
.week-pills-scroll::-webkit-scrollbar-track { background: transparent; }
.week-pills-scroll::-webkit-scrollbar-thumb { background: rgba(255,255,255,.22); border-radius: 2px; }

.week-pills {
  display: flex;
  gap: 3px;
  padding: 2px 1px;
  width: max-content;
}
.week-pills-year-div {
  display: flex;
  align-items: center;
  padding: 0 8px;
  color: rgba(255,255,255,.38);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  user-select: none;
  white-space: nowrap;
}
.week-pill {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 3px 8px;
  border-radius: 7px;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.1);
  color: rgba(255,255,255,.78);
  cursor: pointer;
  min-width: 52px;
  line-height: 1.3;
  transition: background .2s ease, color .2s ease, border-color .2s ease,
              box-shadow .2s ease, padding .18s ease, min-width .18s ease,
              transform .12s ease;
  white-space: nowrap;
  position: relative;
  transform-origin: center center;
  will-change: transform;
}
.week-pill:hover {
  background: rgba(255,255,255,.2);
  color: #fff;
  border-color: rgba(255,255,255,.35);
}
.week-pill.selected {
  background: rgba(255,255,255,.94);
  color: #1a2d4a;
  border-color: transparent;
  box-shadow: 0 2px 10px rgba(0,0,0,.28);
  /* same padding/min-width as unselected — no size jump */
}
/* Current-week cyan dot */
/* Current week: cyan border + tint when unselected */
.week-pill.is-current:not(.selected) {
  border-color: #22d3ee;
  background: rgba(34, 211, 238, .18);
  color: #fff;
}
.week-pill.is-current:not(.selected):hover {
  background: rgba(34, 211, 238, .28);
}
.week-pill.selected.is-current {
  border-color: #0891b2;
  box-shadow: 0 0 0 2px rgba(34,211,238,.45), 0 2px 8px rgba(0,0,0,.2);
}
/* "Now" micro-label inside the pill */
.wp-now {
  font-size: 8px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #22d3ee;
  line-height: 1;
  margin-top: 1px;
}
.week-pill.selected .wp-now { color: #0891b2; }
.week-pill .wp-type { font-size: 11px; font-weight: 700; }
.week-pill .wp-date { font-size: 9px; opacity: .82; }
.week-pill.selected .wp-type { color: #1a2d4a; }
.week-pill.selected .wp-date { opacity: .7; }

/* Week picker slide-in transition when selected week changes */
@keyframes weekPillsFromRight {
  from { transform: translateX(14px); opacity: 0.35; }
  to   { transform: translateX(0);    opacity: 1; }
}
@keyframes weekPillsFromLeft {
  from { transform: translateX(-14px); opacity: 0.35; }
  to   { transform: translateX(0);     opacity: 1; }
}
#weekPills.slide-right { animation: weekPillsFromRight 0.22s ease both; }
#weekPills.slide-left  { animation: weekPillsFromLeft  0.22s ease both; }

/* Roster content slide-in when week changes — starts at 60% opacity so
   there is no full blink, just a short glide from nearby position */
@keyframes rosterFromRight {
  from { transform: translateX(18px); opacity: 0.55; }
  to   { transform: translateX(0);    opacity: 1; }
}
@keyframes rosterFromLeft {
  from { transform: translateX(-18px); opacity: 0.55; }
  to   { transform: translateX(0);     opacity: 1; }
}
.roster-slide-right { animation: rosterFromRight 0.18s ease-out both; }
.roster-slide-left  { animation: rosterFromLeft  0.18s ease-out both; }
/* Ellipsis overflow pills */
.week-pill.week-pill-more {
  min-width: 28px;
  padding: 3px 5px;
  font-size: 14px;
  opacity: .55;
  letter-spacing: -.05em;
}
.week-pill.week-pill-more:hover { opacity: 1; }

/* ── Shortcuts floating panel ─────────────────────────── */
.sc-topbar-wrap { position: relative; }
.sc-modal-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 9490;
  background: rgba(15, 23, 42, .22);
  backdrop-filter: blur(3px);
}
.sc-modal-backdrop.open { display: block; }
.sc-panel {
  display: none;
  position: fixed;
  z-index: 9500;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 760px;
  max-width: calc(100vw - 24px);
  height: 76vh;
  max-height: 76vh;
  overflow: hidden;
  background: linear-gradient(140deg, rgba(255,255,255,0.88) 0%, rgba(240,248,255,0.82) 100%);
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  border: 1px solid rgba(255,255,255,0.72);
  border-radius: 10px;
  box-shadow: 0 20px 50px rgba(12,29,48,0.22), inset 0 1px 0 rgba(255,255,255,0.60);
}
.sc-panel.open { display: block; }
#stab-shortcuts #shortcutsPanel {
  display: block;
  position: relative;
  top: auto; left: auto; transform: none;
  width: 100%; max-width: none;
  height: auto; max-height: none;
  box-shadow: none;
  border-radius: 0 0 8px 8px;
  border: none;
}
#stab-shortcuts .sc-close-btn { display: none; }
.sc-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px 8px;
  border-bottom: 1px solid #e2e8f0;
}
.sc-panel-title { font-weight: 700; font-size: 14px; color: #0f172a; }
.sc-hint-text { font-size: 11px; color: #64748b; padding: 8px 14px; margin: 0; line-height: 1.45; }
.sc-list {
  padding: 8px 10px;
  min-height: 28px;
  max-height: calc(76vh - 190px);
  overflow: auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px 10px;
}
.sc-empty { grid-column: 1 / -1; color: #94a3b8; font-style: italic; font-size: 12px; padding: 6px 4px; }
.sc-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 6px;
  padding: 4px 6px;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  background: #fbfdff;
}
.sc-map {
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr);
  align-items: center;
  gap: 6px;
  min-width: 0;
}
.sc-key-badge {
  display: inline-block;
  background: #f1f5f9;
  border: 1px solid #cbd5e1;
  border-radius: 4px;
  padding: 1px 7px;
  font-size: 11px;
  font-family: monospace;
  min-width: 56px;
  text-align: left;
  color: #1e293b;
}
.sc-arrow { color: #94a3b8; font-size: 12px; }
.sc-code-label {
  min-width: 0;
  font-size: 12px;
  font-weight: 600;
  color: #1e293b;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sc-del-btn { flex-shrink: 0; }
.sc-add-area { display: flex; align-items: center; gap: 6px; padding: 8px 14px; border-top: 1px solid #e2e8f0; }
.sc-record-btn.sc-btn-recording { background: #fef2f2 !important; border-color: #f87171 !important; color: #dc2626 !important; }
.sc-add-sep { color: #94a3b8; }
.sc-code-input { flex: 1; min-width: 80px; padding: 5px 8px; border: 1px solid #d4d4d8; border-radius: 5px; font-size: 12px; }
.sc-panel-footer { display: flex; align-items: center; justify-content: space-between; padding: 8px 14px; border-top: 1px solid #e2e8f0; }
.sc-dirty-badge { font-size: 11px; color: #dc2626; font-weight: 600; }

@media (max-width: 820px) {
  .sc-panel { width: calc(100vw - 24px); }
  .sc-list { grid-template-columns: 1fr; }
}

/* ── Tabs ────────────────────────────────────────────── */
.tabs {
  display: flex;
  gap: 4px;
  position: sticky;
  top: calc(var(--topbar-height) + var(--banner-height));
  z-index: 9100;
  padding: 10px 16px 0;
  background: rgba(232,240,249,0.82);
  backdrop-filter: blur(16px) saturate(150%);
  -webkit-backdrop-filter: blur(16px) saturate(150%);
  border-bottom: 2px solid var(--line);
  overflow-x: auto;
}
.tab {
  padding: 8px 16px;
  border: 1px solid transparent;
  border-bottom: none;
  border-radius: 8px 8px 0 0;
  background: transparent;
  cursor: pointer;
  font-size: 13px;
  color: var(--muted);
  white-space: nowrap;
  transition: color .15s, background .15s;
}
.tab:hover  { color: var(--text); background: rgba(255,255,255,0.55); }
.tab.active {
  background: rgba(255,255,255,0.90);
  border-color: var(--line);
  color: var(--accent);
  font-weight: 600;
  position: relative;
  box-shadow: 0 2px 8px rgba(55,122,182,0.10), inset 0 1px 0 rgba(255,255,255,0.75);
}
.tab.active::after {
  content: "";
  position: absolute;
  bottom: -2px;
  left: 0; right: 0;
  height: 2px;
  background: rgba(255,255,255,0.90);
}

/* ── Regular role: read-only cell lock ────────────────────────────
   Prevents inline editors from opening — pointer-events disabled
   so click handlers in render-smo.js / render-trainee.js never fire. */
body[data-user-role="regular"] td[data-person],
body[data-user-role="regular"] td[data-plan-field],
body[data-user-role="regular"] td[data-tr-person],
body[data-user-role="regular"] td[data-td-role] {
  pointer-events: none;
  cursor: default;
}

/* ── Main / Views ─────────────────────────────────────── */
main {
  padding: 14px;
  display: grid;
  gap: 12px;
  min-height: calc(100vh - var(--sticky-chrome-height));
}
.view {
  display: none;
  gap: 12px;
  min-height: 0;
  scroll-margin-top: calc(var(--sticky-chrome-height) + 12px);
}
.view.active {
  display: grid;
  min-height: calc(100vh - var(--sticky-chrome-height) - 28px);
  align-content: start;
}

#view-smo-roster.view.active,
#view-reg-roster.view.active {
  height: calc(100vh - var(--sticky-chrome-height) - 28px);
}

/* ── Shared subtabs / section visibility ──────────────── */
.subtabs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.subtab {
  padding: 5px 10px;
  border: 1px solid rgba(255,255,255,0.70);
  border-radius: 999px;
  background: rgba(255,255,255,0.55);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: var(--muted);
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  transition: all .15s ease;
  box-shadow: 0 1px 4px rgba(12,29,48,0.06), inset 0 1px 0 rgba(255,255,255,0.65);
}
.subtab:hover {
  color: var(--text);
  border-color: rgba(255,255,255,0.85);
  background: rgba(255,255,255,0.75);
}
.subtab.active {
  color: #114b73;
  border-color: rgba(169,199,223,0.80);
  background: rgba(232,243,251,0.90);
  box-shadow: 0 2px 8px rgba(55,122,182,0.12), inset 0 1px 0 rgba(255,255,255,0.80);
}

.stab-section { display: none; }
.stab-section.active { display: block; }
.subview { display: none; }
.subview.active { display: block; }

/* ── Settings layout ──────────────────────────────────── */
#view-settings {
  align-content: start;
  gap: 8px;
}
#settingsSubtabs {
  position: sticky;
  top: var(--sticky-chrome-height);
  z-index: 9050;
  background: linear-gradient(140deg, rgba(255,255,255,0.78) 0%, rgba(248,252,255,0.68) 100%);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border: 1px solid rgba(255,255,255,0.68);
  border-radius: 12px;
  padding: 10px;
  box-shadow: 0 2px 12px rgba(12,29,48,0.07), inset 0 1px 0 rgba(255,255,255,0.55);
}
.stab-section > .split,
.stab-section > .tpl-layout,
.stab-section > .surg-tpl-layout {
  margin-top: 4px;
}

/* ── Panel ───────────────────────────────────────────── */
.panel {
  border: 1px solid rgba(255,255,255,0.70);
  border-radius: var(--radius);
  background: linear-gradient(140deg, rgba(255,255,255,0.70) 0%, rgba(255,255,255,0.52) 100%);
  backdrop-filter: blur(12px) saturate(130%);
  -webkit-backdrop-filter: blur(12px) saturate(130%);
  padding: 12px 14px;
  box-shadow: 0 4px 20px rgba(12,29,48,0.08), inset 0 1px 0 rgba(255,255,255,0.55);
  min-width: 0;
}

#view-summary .panel,
#view-smo-roster .panel,
#view-reg-roster .panel {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  min-height: calc(100vh - var(--sticky-chrome-height) - 28px);
}

#view-smo-roster .panel,
#view-reg-roster .panel {
  height: 100%;
  min-height: 0;
}
.panel-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  margin-bottom: 4px;
}
.panel-head h2, .panel-head h3 { margin: 0; }
.panel-head h2 { font-size: 16px; }
.panel-head h3 { font-size: 14px; font-weight: 600; }
.hint { color: var(--muted); margin: 6px 0 10px; font-size: 13px; }

.badge-readonly {
  font-size: 11px;
  padding: 3px 9px;
  border-radius: 999px;
  background: #fef3c7;
  color: #92400e;
  border: 1px solid #fbd34d;
  font-weight: 600;
}

/* ── Table base ──────────────────────────────────────── */
.table-wrap {
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: 8px;
  max-height: calc(100vh - 150px);
  max-width: 100%;
  position: relative;
}

#view-summary .table-wrap,
#view-smo-roster .table-wrap,
#view-reg-roster .table-wrap {
  min-height: 0;
  height: 100%;
  max-height: none;
}
table { border-collapse: collapse; width: 100%; font-size: 11px; }
th, td { border: 1px solid var(--line); padding: 5px 6px; text-align: center; vertical-align: middle; white-space: nowrap; box-sizing: border-box; }
th { position: sticky; top: 0; z-index: 2; background: #f0f5fb; font-weight: 600; font-size: 10px; text-transform: uppercase; letter-spacing: .3px; }

/* Keep roster header row visible while vertical scrolling within table-wrap. */
#view-smo-roster .long-grid th,
#view-reg-roster .long-grid th {
  position: sticky;
  top: 0;
  z-index: 5;
  background: #f0f5fb;
}

/* ── Sticky columns ──────────────────────────────────── */
.sc1 { position: sticky; left: 0;    z-index: 3; background: #fff; }
.sc2 { position: sticky; left: 43px; z-index: 3; background: #fff; }
.sc3 { position: sticky; left: 127px;z-index: 3; background: #fff; }
.sc4 { position: sticky; left: 201px;z-index: 3; background: #fff; }
.sc5 { position: sticky; left: 275px;z-index: 3; background: #fff; }
.sc6 { position: sticky; left: 349px;z-index: 3; background: #fff; }
.sc7 { position: sticky; left: 389px;z-index: 3; background: #fff; }
.sc8 { position: sticky; left: 429px;z-index: 3; background: #fff; box-shadow: 2px 0 5px rgba(15,23,42,.12); }
thead .sc1, thead .sc2, thead .sc3,
thead .sc4, thead .sc5, thead .sc6,
thead .sc7, thead .sc8 { z-index: 4; }

/* Frozen left columns must sit above scrolling header/body cells. */
#view-smo-roster .long-grid .sc1,
#view-smo-roster .long-grid .sc2,
#view-smo-roster .long-grid .sc3,
#view-smo-roster .long-grid .sc4,
#view-smo-roster .long-grid .sc5,
#view-smo-roster .long-grid .sc6,
#view-smo-roster .long-grid .sc7,
#view-smo-roster .long-grid .sc8,
#view-reg-roster .long-grid .sc1,
#view-reg-roster .long-grid .sc2,
#view-reg-roster .long-grid .sc3,
#view-reg-roster .long-grid .sc4,
#view-reg-roster .long-grid .sc5,
#view-reg-roster .long-grid .sc6,
#view-reg-roster .long-grid .sc7,
#view-reg-roster .long-grid .sc8 {
  z-index: 8;
}

#view-smo-roster .long-grid thead .sc1,
#view-smo-roster .long-grid thead .sc2,
#view-smo-roster .long-grid thead .sc3,
#view-smo-roster .long-grid thead .sc4,
#view-smo-roster .long-grid thead .sc5,
#view-smo-roster .long-grid thead .sc6,
#view-smo-roster .long-grid thead .sc7,
#view-smo-roster .long-grid thead .sc8,
#view-reg-roster .long-grid thead .sc1,
#view-reg-roster .long-grid thead .sc2,
#view-reg-roster .long-grid thead .sc3,
#view-reg-roster .long-grid thead .sc4,
#view-reg-roster .long-grid thead .sc5,
#view-reg-roster .long-grid thead .sc6,
#view-reg-roster .long-grid thead .sc7,
#view-reg-roster .long-grid thead .sc8 {
  z-index: 10;
}

/* ── Weekly Summary board (read-only) ────────────────── */
.weekly-board thead th {
  background: linear-gradient(180deg, #1a2d4a 0%, #213860 100%);
  color: #e8eef8;
  font-size: 11px;
}
.weekly-board thead tr:first-child th {
  padding-top: 9px;
  padding-bottom: 9px;
}
.weekly-board .wb-day-hdr,
.weekly-board .wb-we-hdr {
  font-size: 12px;
  line-height: 1.2;
}
.weekly-board thead tr:nth-child(2) th {
  background: linear-gradient(180deg, #6f8193 0%, #5f7184 100%) !important;
  color: #f3f6fb !important;
}
.weekly-board .left-col-item {
  min-width: 215px;
  max-width: 215px;
  width: 215px;
  text-align: left;
  background: #e7edf4;
  color: #1e293b;
  font-weight: 600;
  font-size: 10px;
  border-right: 1px solid #cbd5e1;
  word-wrap: break-word;
  word-break: break-word;
  overflow-wrap: break-word;
}
.wb-scroll-wrap                   { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.weekly-board { table-layout: fixed; width: auto; min-width: 500px; }
.weekly-board th, .weekly-board td { padding: 2px 1px; text-align: center; vertical-align: middle; }
.weekly-board .left-col-item { text-align: left; }
.wb-smo-hdr, .wb-smo              { width: 114px; }
.wb-tr-hdr, .wb-tr                { width: 114px; }
.wb-we-hdr-sub, .weekend-cell     { width: 114px; }
.weekly-board .wb-tr-hdr,
.weekly-board .wb-tr,
.weekly-board .wb-day-hdr {
  border-right: 2px solid #8fa3b8;
}
/* Remove the vertical border between SMO and Trainee sub-columns within each day */
.weekly-board .wb-smo-hdr,
.weekly-board .wb-smo { border-right: none; }
.weekly-board .wb-tr-hdr,
.weekly-board .wb-tr { border-left: none; }
.weekly-board .wb-we-hdr,
.weekly-board .wb-we-hdr-sub,
.weekly-board .weekend-cell {
  border-left: 2px solid #8fa3b8;
}
.weekly-board tbody tr.wb-loc-pm td {
  border-bottom: 2px solid #8fa3b8;
}
.weekly-board tbody tr.wb-loc-am > td.left-col-item {
  border-bottom: 2px solid #8fa3b8;
}
/* Faint AM/PM divider within each location row.
   In border-collapse, dotted < solid in priority, so BOTH sides must be dotted.
   AM row is earlier in source and wins the tie → shows 1px dotted. */
.weekly-board tbody tr.wb-loc-am > td:not(.left-col-item):not(.weekend-cell) {
  border-bottom: 1px dotted rgba(143,163,184,0.55);
}
.weekly-board tbody tr.wb-loc-pm > td:not(.left-col-item):not(.weekend-cell) {
  border-top: 1px dotted rgba(143,163,184,0.55);
}
.weekly-board tbody tr.wb-teach-am > td.left-col-item,
.weekly-board tbody td.wb-after-teach-we {
  border-bottom: 3px solid #5f7184;
}
.weekly-board tbody tr.wb-after-teach td {
  border-bottom: 3px solid #5f7184;
}
.weekly-board tbody tr            { height: 20px; }
.wb-we-stacked                    { vertical-align: top; padding: 2px 3px; }
.wb-we-stacked .wb-sat,
.wb-we-stacked .wb-sun            { display: block; }
.wb-we-stacked .wb-sat            { border-bottom: 1px solid var(--line); }
.wb-we-sat-div                    { border-right: 2px solid #9fb8d0 !important; }
.weekly-row-core   .left-col-item { background: #e7edf4; color: #1e293b; }
.weekly-row-support .left-col-item { background: #e7edf4; color: #1e293b; }
.weekly-row-oncall td { background: #f0f9ff; }
.weekly-row-oncall .left-col-item { background: #ddeaf5; color: #0369a1; }
.weekly-row-comment td { background: #fffbeb; }
.weekly-row-comment .left-col-item { background: #f2efe1; color: #92400e; }
.weekend-cell { background: #f5faf0 !important; }
.muted-cell { color: #94a3b8; font-style: italic; }

/* ── Weekly Summary Mobile — tab + table view (sb-) ── */
.sb-wrap {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.sb-tabs {
  display: flex;
  gap: 6px;
  padding-bottom: 2px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.sb-tabs::-webkit-scrollbar { display: none; }
.sb-tab {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  flex-shrink: 0;
  padding: 7px 11px 6px;
  min-width: 54px;
  border: 1px solid rgba(200,216,234,0.60);
  border-radius: 10px;
  background: rgba(255,255,255,0.58);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, box-shadow 0.15s;
}
.sb-tab-name { font-size: 13px; font-weight: 700; color: #1e3a5f; line-height: 1; }
.sb-tab-date { font-size: 10px; color: #7a9bb5; line-height: 1; }
.sb-tab-active {
  background: linear-gradient(135deg, #1e6fa8 0%, #2984d4 100%);
  border-color: transparent;
  box-shadow: 0 3px 12px rgba(30,111,168,0.35);
}
.sb-tab-active .sb-tab-name,
.sb-tab-active .sb-tab-date { color: #fff; }
.sb-tab-today:not(.sb-tab-active) {
  border-color: rgba(30,111,168,0.50);
  box-shadow: 0 0 0 2px rgba(30,111,168,0.12);
}
.sb-tab-today:not(.sb-tab-active) .sb-tab-name { color: #1e6fa8; }
.sb-tab-past:not(.sb-tab-active) { opacity: 0.48; }
.sb-card {
  background: rgba(255,255,255,0.68);
  backdrop-filter: blur(16px) saturate(130%);
  -webkit-backdrop-filter: blur(16px) saturate(130%);
  border: 1px solid rgba(255,255,255,0.72);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(12,29,48,0.08), inset 0 1px 0 rgba(255,255,255,0.65);
}
.sb-hol-notice {
  padding: 7px 14px;
  font-size: 12px;
  font-weight: 600;
  color: #713f12;
  background: rgba(253,230,138,0.42);
  border-bottom: 1px solid rgba(253,200,90,0.45);
}
.sb-hol-banner {
  padding: 28px 20px 26px;
  text-align: center;
  background: rgba(253,230,138,0.38);
  border-bottom: 1px solid rgba(253,200,90,0.45);
}
.sb-hol-banner-name {
  font-size: 19px;
  font-weight: 800;
  color: #713f12;
  line-height: 1.2;
}
.sb-hol-banner-sub {
  font-size: 11px;
  font-weight: 600;
  color: #92400e;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  margin-top: 7px;
}
.sb-hol-badge {
  font-size: 10px;
  font-weight: 700;
  background: rgba(253,230,138,0.60);
  color: #713f12;
  border: 1px solid rgba(253,200,90,0.55);
  border-radius: 999px;
  padding: 2px 8px;
}
.sb-table { width: 100%; border-collapse: collapse; table-layout: fixed; }
.sb-th-role {
  width: 150px;
  padding: 7px 6px 6px 12px;
  text-align: left;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: #3a556e;
  background: rgba(232,241,251,0.70);
  border-bottom: 2px solid rgba(200,216,234,0.65);
}
.sb-th-sess {
  text-align: center;
  padding: 7px 8px 6px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .04em;
  color: #1e3a5f;
  background: rgba(232,241,251,0.70);
  border-bottom: 2px solid rgba(200,216,234,0.65);
  border-left: 1px solid rgba(200,216,234,0.45);
}
.sb-group-hdr td {
  padding: 5px 13px 4px;
  font-size: 9.5px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .10em;
  color: #3a556e;
  background: rgba(220,232,246,0.50);
  border-top: 1px solid rgba(200,216,234,0.55);
  border-bottom: 1px solid rgba(200,216,234,0.55);
}
.sb-row td {
  padding: 8px 8px 7px;
  vertical-align: top;
  border-bottom: 1px solid rgba(200,216,234,0.28);
  font-size: 13px;
  line-height: 1.3;
}
.sb-row:last-child td { border-bottom: none; }
.sb-td-role {
  width: 150px;
  padding-left: 12px !important;
  font-size: 11.5px;
  font-weight: 700;
  color: #1e3a5f;
  white-space: normal;
  word-break: break-word;
}
.sb-td-sess {
  font-weight: 600;
  color: #132336;
  border-left: 1px solid rgba(200,216,234,0.28);
  text-align: center;
}
.sb-td-oncall {
  font-weight: 600;
  color: #132336;
  border-left: 1px solid rgba(200,216,234,0.28);
  text-align: center;
}
.sb-row-oncall td { background: rgba(240,248,255,0.30); }
.sb-empty { color: rgba(84,105,127,0.32) !important; font-weight: 400 !important; }
.sb-trainee-name {
  display: block;
  font-size: 11px;
  font-weight: 400;
  color: #5b7fa6;
  margin-top: 2px;
}
.sb-gap-badge {
  display: inline-block;
  font-size: 8.5px;
  font-weight: 700;
  letter-spacing: .05em;
  border-radius: 4px;
  padding: 1px 5px;
  margin-left: 3px;
  vertical-align: middle;
}
.sb-gap-e { background: #fee2e2; color: #991b1b; }
.sb-gap-m { background: #fef3c7; color: #92400e; }
.sb-gap-l { background: #f0fdf4; color: #166534; }
.sb-comment-row {
  display: flex;
  gap: 8px;
  align-items: baseline;
  padding: 8px 12px;
  margin-top: 2px;
  font-size: 12.5px;
  font-style: italic;
  color: #713f12;
  background: rgba(255,251,235,0.70);
  border: 1px solid rgba(253,200,90,0.42);
  border-radius: 10px;
}
.sb-comment-label {
  font-style: normal;
  font-size: 9.5px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: #92400e;
  flex-shrink: 0;
}
.sb-wknd-grid {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.sb-wknd-col { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.sb-wknd-head {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 2px 2px 6px;
}
.sb-wknd-name { font-size: 15px; font-weight: 800; color: #132336; }
.sb-wknd-date { font-size: 11px; color: #54697f; }

/* Print-only heading — invisible on screen */
.print-only-heading { display: none; }

/* ── Print styles for A4 landscape ──────────────────── */
@page {
  size: A4 landscape;
  margin: 12mm 14mm;
}

@media print {
  .weekly-board td.wb-gap-e,
  .weekly-board td.wb-gap-m,
  .weekly-board td.wb-gap-l { box-shadow: none !important; background: transparent !important; }
  * {
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }
  body { margin: 0; padding: 0; background: #fff; }
  /* Hide all chrome; only the roster table and print heading should appear */
  #portal-nav, .topbar, .tabs, #storageWarningBanner { display: none !important; }
  #view-summary .panel-head { display: none !important; }
  .print-only-heading {
    display: block;
    font-size: 13px;
    font-weight: 700;
    color: #0f172a;
    letter-spacing: -.2px;
    padding-bottom: 4px;
  }
  .view.active { min-height: auto; }
  main { padding: 0; min-height: auto; }
  .panel { border: none; box-shadow: none; padding: 0; }
  /* Flatten the panel grid so the table can expand to its natural height */
  #view-summary .panel { display: block; min-height: 0; height: auto; }
  #view-summary .table-wrap { height: auto; }
  .table-wrap { max-height: none; border: none; overflow: visible; }
  /* Stretch the board to fill the full A4 landscape page height.
     In CSS paged media 100vh = page content area height = 202mm with our @page margins.
     Subtract the print heading height (~28px). Rows distribute evenly to fill. */
  #rosterContainer .weekly-board { height: calc(100vh - 28px); }
  #rosterContainer .weekly-board tbody tr { height: auto !important; }
  .weekly-board { width: 100%; font-size: 7px; page-break-inside: avoid; break-inside: avoid; table-layout: fixed; }
  .weekly-board th { background: #1a2d4a !important; color: #fff !important; padding: 2px 1px; text-align: center; vertical-align: middle; }
  .weekly-board td { text-align: center; vertical-align: middle; }
  .weekly-board .left-col-item {
    min-width: 124px;
    max-width: 124px;
    width: 124px;
    padding: 2px 2px;
    text-align: left;
    font-size: 8px !important;
    font-weight: 700 !important;
    line-height: 1.05;
    color: #0f172a !important;
    background: #e8eef5 !important;
  }
  .weekly-board th, .weekly-board td { border: 0.5px solid #999; }
  .weekly-board .wb-day-hdr,
  .weekly-board .wb-we-hdr { font-size: 9px; line-height: 1.05; }
  .weekly-board .wb-sub { font-size: 7px; }
  .weekly-board tbody tr { height: 15px; page-break-inside: avoid; break-inside: avoid; }
  .weekly-board .wb-we-stacked { padding: 1px 1px; }
  .weekly-board .tag { padding: 0 1px; font-size: 6px !important; line-height: 1.05; }
  .weekly-board .cell-btn { min-height: 0 !important; padding: 0 !important; font-size: 7px !important; line-height: 1.05; }
  .wb-smo-hdr, .wb-smo { width: calc((100% - 124px) / 12); }
  .wb-tr-hdr, .wb-tr { width: calc((100% - 124px) / 12); }
  .wb-we-hdr-sub, .weekend-cell { width: calc((100% - 124px) / 6); }
  .weekly-board .wb-smo-hdr,
  .weekly-board .wb-tr-hdr {
    background: #6f8193 !important;
    color: #f8fbff !important;
  }
  .weekly-board .wb-tr-hdr,
  .weekly-board .wb-tr,
  .weekly-board .wb-day-hdr { border-right: 1.2px solid #4f647a !important; }
  .weekly-board .wb-we-hdr,
  .weekly-board .wb-we-hdr-sub,
  .weekly-board .weekend-cell { border-left: 1.2px solid #4f647a !important; }
  .weekly-board tbody tr.wb-loc-pm td,
  .weekly-board tbody tr.wb-loc-am > td.left-col-item { border-bottom: 1.2px solid #4f647a !important; }
  .weekly-board tbody tr.wb-teach-am > td.left-col-item,
  .weekly-board tbody td.wb-after-teach-we { border-bottom: 1.6px solid #3b4e62 !important; }
  .weekly-board tbody tr.wb-after-teach td { border-bottom: 1.6px solid #3b4e62 !important; }
  .weekly-board tbody tr.wb-single-row td { border-bottom: 1.2px solid #4f647a !important; }
}

.cell-btn {
  border: 0;
  width: 100%;
  background: transparent;
  padding: 1px 2px;
  cursor: default;
  min-height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1.05;
  font-size: 12px;
}
.tag {
  display: inline-block;
  max-width: 100%;
  padding: 1px 3px;
  border-radius: 0;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.05;
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: normal;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  background: none;
  color: #1e293b;
}
.tag-compact { font-size: 11px; }
.tag-tight { font-size: 10px; letter-spacing: -0.01em; }
.tag.ok      { background: none; color: #065f46; font-weight: 600; }
.tag.conflict{ background: none; color: #991b1b; font-weight: 600; }

/* Uncovered required location indicators (screen only) */
.weekly-board td.wb-gap-e { box-shadow: inset 0 0 0 1.5px #f87171; background: #fffafa !important; }
.weekly-board td.wb-gap-m { box-shadow: inset 0 0 0 1.5px #fbbf24; background: #fffcf2 !important; }
.weekly-board td.wb-gap-l { box-shadow: inset 0 0 0 1px #93c5fd; background: #f7fbff !important; }

/* ── Long-grid (SMO & Reg Roster) ────────────────────── */
.long-grid thead th {
  background: #f0f5fb;
  color: var(--text);
}
.long-grid .col-week {
  min-width: 43px; max-width: 43px; width: 43px;
  font-weight: 700;
  font-size: 11px;
  background: #1a2d4a;
  color: #c8d8ee;
}
/* ── Week publish badge ──────────────────────────────────────────────────── */
.wk-pub-cell { cursor: pointer; user-select: none; }
.wk-pub-badge {
  display: block;
  margin-top: 4px;
  font-size: 9px;
  font-weight: 700;
  line-height: 1;
  text-align: center;
  border-radius: 3px;
  padding: 2px 4px;
  letter-spacing: 0;
}
.wk-pub-badge--draft {
  background: rgba(255,255,255,.15);
  color: rgba(200,220,245,.75);
  border: 1px solid rgba(200,220,245,.25);
}
.wk-pub-badge--published {
  background: rgba(34,197,94,.35);
  color: #bbf7d0;
  border: 1px solid rgba(34,197,94,.4);
}
.wk-pub-badge--modified {
  background: rgba(234,179,8,.35);
  color: #fef08a;
  border: 1px solid rgba(234,179,8,.4);
}
/* ── Publish popup ─────────────────────────────────────────────────────── */
.pub-popup {
  position: fixed;
  z-index: 10025;
  min-width: 230px;
  max-width: 300px;
  background: #fff;
  border: 1px solid #cbd5e1;
  border-radius: 9px;
  box-shadow: 0 12px 32px rgba(15,23,42,.22);
  padding: 10px 12px;
  display: grid;
  gap: 7px;
}
.pub-popup-title {
  font-size: 11px;
  font-weight: 700;
  color: #475569;
}
.pub-popup-info {
  font-size: 12px;
  color: #334155;
  line-height: 1.5;
  display: flex;
  align-items: flex-start;
  gap: 6px;
}
.pub-status-dot {
  display: inline-block;
  width: 8px; height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
  margin-top: 4px;
}
.pub-status-dot--published { background: #22c55e; }
.pub-status-dot--draft     { background: #94a3b8; }
/* ── Publish status chip (Weekly Summary header + My Schedule week labels) ── */
.pub-status-chip {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 99px;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.5;
  white-space: nowrap;
}
.pub-status-chip--published {
  background: rgba(34,197,94,.12);
  color: #15803d;
  border: 1px solid rgba(34,197,94,.3);
}
.pub-status-chip--modified {
  background: rgba(234,179,8,.12);
  color: #b45309;
  border: 1px solid rgba(234,179,8,.3);
}
.pub-status-chip--draft {
  background: #f1f5f9;
  color: #94a3b8;
  border: 1px solid #e2e8f0;
}
.pub-popup-warn {
  font-size: 11px;
  color: #b45309;
  background: #fef9c3;
  border-radius: 5px;
  padding: 5px 7px;
  line-height: 1.4;
}
.pub-popup-btns {
  display: flex;
  gap: 6px;
}
.pub-btn {
  flex: 1;
  font-size: 12px;
  font-weight: 600;
  border: none;
  border-radius: 5px;
  padding: 5px 8px;
  cursor: pointer;
}
.pub-btn--publish   { background: #16a34a; color: #fff; }
.pub-btn--publish:hover { background: #15803d; }
.pub-btn--unpublish { background: #e2e8f0; color: #475569; }
.pub-btn--unpublish:hover { background: #cbd5e1; }
.pub-btn--skip      { background: #f1f5f9; color: #64748b; border: 1px solid #cbd5e1; }
.pub-btn--skip:hover { background: #e2e8f0; }

/* NCD sacrifice review */
.pub-popup-body { display: flex; flex-direction: column; gap: 8px; }
.pub-sacrifice-hdr {
  font-size: 12px;
  font-weight: 700;
  color: #b45309;
  background: rgba(234,179,8,.08);
  border: 1px solid rgba(234,179,8,.28);
  border-radius: 6px;
  padding: 5px 9px;
}
.pub-sacrifice-list {
  margin: 0;
  padding: 0 0 0 4px;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.pub-sacrifice-item {
  font-size: 12px;
  color: #334155;
  padding: 2px 6px;
  border-left: 2px solid #fbbf24;
}
.pub-sacrifice-confirmed-section {
  border-top: 1px solid #e2e8f0;
  padding-top: 7px;
  margin-top: 2px;
}
.pub-sacrifice-confirmed-hdr {
  font-size: 11px;
  font-weight: 600;
  color: #94a3b8;
  margin-bottom: 4px;
}
.pub-sacrifice-list--sm .pub-sacrifice-item {
  font-size: 11px;
  color: #64748b;
  border-left-color: #94a3b8;
}
.pub-sacrifice-counter {
  font-size: 11px;
  font-weight: 600;
  color: #94a3b8;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.pub-sacrifice-card {
  display: flex;
  flex-direction: column;
  gap: 2px;
  background: rgba(234,179,8,.08);
  border: 1px solid rgba(234,179,8,.28);
  border-left: 3px solid #fbbf24;
  border-radius: 6px;
  padding: 7px 10px;
  font-size: 13px;
  color: #334155;
}
.pub-sacrifice-card span {
  font-size: 12px;
  color: #64748b;
}

/* Sacrifice row in popup (with remove button) */
.pub-sac-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  padding: 2px 0;
}
.pub-sac-row-lbl {
  font-size: 11px;
  color: #64748b;
  flex: 1;
}
.pub-sac-remove-btn {
  flex-shrink: 0;
  background: none;
  border: none;
  color: #94a3b8;
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  padding: 0 2px;
  border-radius: 3px;
}
.pub-sac-remove-btn:hover { color: #dc2626; background: #fee2e2; }

/* ── NCD Sacrifice Log panel (admin, below SMO long view) ── */
.sac-log-panel {
  border-top: 1px solid #e2e8f0;
  margin: 0;
  padding: 0;
}
.sac-log-summary {
  cursor: pointer;
  padding: 10px 16px;
  font-size: 13px;
  font-weight: 600;
  color: #475569;
  user-select: none;
  list-style: none;
}
.sac-log-summary::-webkit-details-marker { display: none; }
.sac-log-summary::before {
  content: '▶ ';
  font-size: 10px;
  color: #94a3b8;
}
details[open] .sac-log-summary::before { content: '▼ '; }
.sac-log-empty {
  padding: 12px 16px;
  font-size: 13px;
  color: #94a3b8;
  font-style: italic;
}
#ncdSacrificeLogContainer {
  max-height: 260px; /* ~7 rows */
  overflow-y: auto;
}
.sac-log-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}
.sac-log-table thead th {
  text-align: left;
  padding: 5px 10px;
  background: #f8fafc;
  color: #64748b;
  font-weight: 600;
  border-bottom: 1px solid #e2e8f0;
}
.sac-log-row td {
  padding: 5px 10px;
  border-bottom: 1px solid #f1f5f9;
  vertical-align: middle;
}
.sac-log-row:hover td { background: #f8fafc; }
.sac-log-week { font-weight: 600; color: #1e293b; white-space: nowrap; }
.sac-log-name { color: #1e293b; }
.sac-log-was  { color: #64748b; }
.sac-log-code { font-weight: 600; color: #b45309; }
.sac-log-by   { color: #64748b; }
.sac-log-date { font-size: 11px; color: #94a3b8; }
.sac-log-remove-btn {
  background: none;
  border: none;
  color: #94a3b8;
  font-size: 15px;
  cursor: pointer;
  padding: 2px 5px;
  border-radius: 4px;
  line-height: 1;
}
.sac-log-remove-btn:hover { color: #dc2626; background: #fee2e2; }

/* ── My Schedule sacrifice banner ── */
.ms-sacrifice-banner {
  background: rgba(245,158,11,.08);
  border: 1px solid rgba(245,158,11,.3);
  border-radius: 8px;
  padding: 9px 12px;
  margin: 0 0 4px 0;
  font-size: 12px;
}
.ms-sacrifice-banner-hdr {
  font-weight: 700;
  color: #b45309;
  margin-bottom: 5px;
}
.ms-sacrifice-banner-list {
  margin: 0;
  padding-left: 16px;
  color: #64748b;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.long-grid .col-day {
  min-width: 72px; max-width: 72px; width: 72px;
  font-weight: 600;
  font-size: 11px;
  background: #213860;
  color: #d0e0f4;
}
.long-grid .col-sess {
  min-width: 38px; max-width: 38px;
  font-size: 10px;
  color: var(--muted);
  background: #edf2f9;
}
.long-grid .col-oncall {
  min-width: 72px; max-width: 72px; width: 72px;
  font-size: 11px;
  font-weight: 600;
}
.long-grid .col-person {
  min-width: 48px; max-width: 48px;
  font-size: 11px;
  font-weight: 700;
  cursor: default;
}
.long-grid .col-plan-comment {
  min-width: 170px;
  max-width: 170px;
  width: 170px;
  font-size: 11px;
}
.long-grid .col-metric {
  min-width: 38px; max-width: 38px;
  font-size: 11px;
}
thead .long-grid .col-week, thead .long-grid .col-day { background: #1a2d4a; color: #c8d8ee; }

#view-smo-roster,
#view-reg-roster,
#smoLongContainer,
#regLongContainer {
  min-width: 0;
  max-width: 100%;
}

#regLongContainer .sc3 { left: 115px; }

/* ── Trainee Visibility Bar ───────────────────────────── */
.tr-visibility-bar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px 16px;
  padding: 5px 12px;
  background: #f8fafc;
  border-bottom: 1px solid #e2e8f0;
  font-size: 12px;
  color: #475569;
}
.tr-visibility-title { font-weight: 700; color: #1e293b; white-space: nowrap; }
.tr-vis-label { display: flex; align-items: center; gap: 4px; white-space: nowrap; cursor: pointer; }
.tr-vis-label input[type="number"] { width: 44px; padding: 1px 4px; border: 1px solid #cbd5e1; border-radius: 4px; font-size: 12px; text-align: center; }
.tr-visibility-note { margin-left: auto; font-size: 11px; color: #94a3b8; white-space: nowrap; }

/* ── Registrar (RMO) Roster column layout ─────────────── */
#regLongContainer .tr-grid {
  width: max-content;
  table-layout: fixed;
  font-size: 11px;
}
/* Centre all cells */
#regLongContainer .tr-grid th,
#regLongContainer .tr-grid td {
  text-align: center;
  vertical-align: middle;
}
/* Session column: 35px (150% of previous 23px) */
#regLongContainer .col-sess { min-width: 35px; max-width: 35px; width: 35px; }

/* Header first-row (name row): 3× height + wrapping */
#regLongContainer .tr-hdr-name-row {
  height: 72px;
  white-space: normal;
  overflow-wrap: break-word;
  word-break: break-word;
  overflow: hidden;
  vertical-align: bottom;
  padding-bottom: 3px;
  line-height: 1.2;
}

/* Column widths per group */
#regLongContainer .col-person.tr-col-reg    { min-width: 85px; max-width: 85px; width: 85px; }
#regLongContainer .col-person.tr-col-other  { min-width: 54px; max-width: 54px; width: 54px; }
#regLongContainer .col-person.tr-col-fellow { min-width: 85px; max-width: 85px; width: 85px; }

/* Daily oncall cols (Fellow Oncall, LD, Duty Reg, N) */
#regLongContainer .tr-daily-col {
  min-width: 59px; max-width: 59px; width: 59px;
  font-size: 10px; text-align: center;
  white-space: normal; overflow-wrap: break-word; word-break: break-word;
  vertical-align: bottom; padding-bottom: 3px; line-height: 1.2;
}
#regLongContainer .tr-daily-cell {
  min-width: 59px; max-width: 59px; width: 59px;
  font-size: 10px; text-align: center; cursor: pointer;
}
/* LD and N are per-day: the merged AM+PM cell gets vertically centred */
#regLongContainer .tr-daily-cell.tr-daily-day-once {
  vertical-align: middle;
}

/* Vertical group separators */
.tr-group-divider { border-left: 2px solid #374151 !important; }
.tr-daily-divider  { border-left: 2px solid #374151 !important; }

/* Registrar exam-stream colour coding — headers */
#regLongContainer th.tr-stream-non-exam  { background: #dbeafe; color: #1e3a8a; }
#regLongContainer th.tr-stream-exam      { background: #fef3c7; color: #78350f; }
#regLongContainer th.tr-stream-post-exam { background: #d1fae5; color: #065f46; }

/* Registrar exam-stream colour coding — body cells (empty slots only) */
#regLongContainer td.long-cell.tr-stream-non-exam.long-cell-empty:not(.long-cell-weekend)   { background: #eff6ff !important; }
#regLongContainer td.long-cell.tr-stream-exam.long-cell-empty:not(.long-cell-weekend)       { background: #fefce8 !important; }
#regLongContainer td.long-cell.tr-stream-post-exam.long-cell-empty:not(.long-cell-weekend)  { background: #f0fdf4 !important; }

/* Fellows colour coding — dark blue transparent */
#regLongContainer th.tr-col-fellow { background: rgba(30, 58, 138, 0.12); color: #1e3a8a; }
#regLongContainer td.long-cell.tr-col-fellow.long-cell-empty:not(.long-cell-weekend) { background: rgba(30, 58, 138, 0.06) !important; }
/* X (default off) mark — grey text */
#regLongContainer td.long-cell.tr-cell-x-default { color: #9ca3af; }

/* Weekend rows — grey (override the default green long-cell-weekend tint) */
#regLongContainer .tr-grid tr.weekend-slot td.long-cell,
#regLongContainer .tr-grid tr.weekend-slot td.tr-daily-cell {
  background: #e5e7eb !important;
  color: #374151 !important;
}
/* Weekend Session col */
#regLongContainer .tr-grid tr.weekend-slot td.col-sess {
  background: #e5e7eb !important;
  color: #374151 !important;
}

/* Holiday rows — olive tint across all cols except col-week and col-day */
#regLongContainer .tr-grid tr.holiday-slot td:not(.col-week):not(.col-day) {
  background: #e8ecd2 !important;
  color: #3f4b1f !important;
}
#regLongContainer .tr-grid tr.weekend-slot td.tr-cell-x-default,
#regLongContainer .tr-grid tr.holiday-slot td.tr-cell-x-default {
  color: #9ca3af !important;
}

#smoLongContainer .long-grid {
  width: max-content;
  min-width: 100%;
  table-layout: fixed;
  font-size: 11px;
}

#smoLongContainer .long-grid thead th {
  font-size: 10px;
}

#smoLongContainer .sc1 { left: 0; }
#smoLongContainer .sc2 { left: 43px; }
#smoLongContainer .sc3 { left: 115px; }
#smoLongContainer .sc4 { left: 180px; }
#smoLongContainer .sc5 { left: 245px; }
#smoLongContainer .sc6 { left: 310px; }
#smoLongContainer .sc7 { left: 344px; }
#smoLongContainer .sc8 { left: 378px; box-shadow: 2px 0 5px rgba(15,23,42,.14); }

#smoLongContainer .col-oncall {
  min-width: 65px;
  max-width: 65px;
  width: 65px;
  font-size: 10px;
}

#smoLongContainer .col-sess,
#smoLongContainer .col-metric {
  min-width: 34px;
  max-width: 34px;
  width: 34px;
  font-size: 10px;
}

#smoLongContainer .col-person,
#smoLongContainer .long-cell {
  min-width: 43px;
  max-width: 43px;
  width: 43px;
  font-size: 9px;
}

#smoLongContainer .col-plan-comment {
  min-width: 176px;
  max-width: 176px;
  width: 176px;
  font-size: 11px;
}

#smoLongContainer .long-cell {
  font-weight: 600;
  padding: 4px 2px;
  line-height: 1.05;
  overflow: hidden;
}

#smoLongContainer .col-day {
  min-width: 72px;
  max-width: 72px;
  width: 72px;
}

/* Week-type row tints — unselected weeks are muted/receded */
.wt-a,
.wt-b,
.wt-c,
.wt-d { background: #f8fafc; color: #94a3b8; }
.wt-a .col-week,
.wt-b .col-week,
.wt-c .col-week,
.wt-d .col-week { background: #cbd5e1; color: #475569; }
.wt-a .col-day,
.wt-b .col-day,
.wt-c .col-day,
.wt-d .col-day  { background: #dde4ed; color: #475569; }
/* Mute data cell text for unselected weeks */
.long-grid tr:not(.wk-selected) > td { color: #94a3b8; }
.long-grid tr:not(.wk-selected) > td.col-week,
.long-grid tr:not(.wk-selected) > td.col-day { color: #475569; }

/* Selected week — bold and prominent */
.long-grid tr.wk-selected > td                 { background: #edf5ff; color: #1e293b; }
.long-grid tr.wk-selected > td.col-week        { background: #1a4a7a; color: #fff; }
.long-grid tr.wk-selected > td.col-day         { background: #1e5a96; color: #e8f4ff; }
.long-grid tr.wk-selected > td.weekend-cell    { background: #e8f5e6; color: #1e293b; }
.long-grid tr.wk-selected.holiday-slot > td              { background: #fef9ec; color: #1e293b; }
.long-grid tr.wk-selected.holiday-slot > td.col-week     { background: #1a4a7a; color: #fff; }
.long-grid tr.wk-selected.holiday-slot > td.col-day      { background: #1e5a96; color: #e8f4ff; }

.holiday-name {
  display: block;
  margin-top: 2px;
  text-align: center;
  position: relative;
  min-width: 26px;
  max-width: calc(100% - 8px);
  padding: 1px 5px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .22);
  color: inherit;
  font-size: 8px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  line-height: 1.05;
  cursor: default;
}

.holiday-name:hover::after {
  content: attr(data-full);
  position: absolute;
  left: 50%;
  bottom: calc(100% + 5px);
  transform: translateX(-50%);
  white-space: nowrap;
  background: rgba(15, 23, 42, 0.92);
  color: #f8fafc;
  border: 1px solid rgba(148, 163, 184, 0.5);
  border-radius: 6px;
  padding: 3px 7px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.01em;
  box-shadow: 0 4px 14px rgba(2, 6, 23, 0.3);
  pointer-events: none;
  z-index: 10;
}

/* Holiday badge: slightly stronger on hover */
.holiday-name:hover {
  background: rgba(255, 255, 255, .42);
  color: #ffffff;
}

.weekend-slot .col-day  { background: #4b5563 !important; color: #f3f4f6 !important; }
.weekend-slot .col-oncall,
.weekend-slot .col-sess,
.weekend-slot .col-metric,
.weekend-slot .col-plan-comment,
.weekend-slot td[data-person] {
  background: #e5e7eb !important;
  color: #374151 !important;
}

.holiday-slot .col-day {
  background: #5f6b2f !important;
  color: #f4f7e6 !important;
}
.holiday-slot .col-oncall,
.holiday-slot .col-sess,
.holiday-slot .col-metric,
.holiday-slot .col-plan-comment,
.holiday-slot td[data-person] {
  background: #e8ecd2 !important;
  color: #3f4b1f !important;
}

.col-plan-comment-cell {
  cursor: pointer;
  vertical-align: top;
  padding: 6px 8px;
  line-height: 1.3;
  background: #f8fafc;
}

.col-plan-comment-cell:hover {
  background: #eef6ff !important;
  outline: 2px solid #93c5fd;
  outline-offset: -2px;
}

.col-plan-comment-empty {
  color: #94a3b8;
  font-style: italic;
}

.col-plan-comment-text {
  white-space: normal;
  word-break: break-word;
}

.inline-oncall-select,
.inline-note-input,
.inline-plan-comment-input {
  width: 100%;
  border: 1px solid #93c5fd;
  border-radius: 6px;
  background: #ffffff;
  color: #0f172a;
  font: inherit;
}

.inline-oncall-select,
.inline-note-input {
  padding: 4px 6px;
}

.inline-plan-comment-input {
  min-height: 58px;
  padding: 6px 8px;
  resize: vertical;
  line-height: 1.35;
}

/* Long-grid cells */
.long-cell {
  cursor: pointer;
  min-width: 48px;
  font-size: 10px;
  font-weight: 600;
  transition: background .1s;
  position: relative;
}
.long-cell:hover { background: #ddeef9 !important; outline: 2px solid #5aabdb; }
.long-cell-off          { background: transparent !important; color: #7f97b8 !important; font-style: italic; }
.long-cell-assigned     { background: transparent !important; color: inherit; }
.long-cell-autofill {
  background: linear-gradient(180deg, rgba(186, 230, 253, 0.8) 0%, rgba(224, 242, 254, 0.92) 100%) !important;
  box-shadow: inset 0 0 0 2px #38bdf8, inset 0 -10px 16px rgba(14, 165, 233, 0.12);
  color: #0f172a;
  animation: long-cell-autofill-pulse 1.8s ease-in-out infinite;
}
.long-cell-leave        { color: #b45309; }
.long-cell-pc           { color: navy !important; background: #e8edff !important; }
.long-cell-pending-leave {
  outline: 1.5px dashed #f59e0b !important;
  outline-offset: -2px;
  background: #fffbeb !important;
}
.pending-leave-icon {
  position: absolute;
  top: 1px;
  right: 2px;
  font-size: 8px;
  line-height: 1;
  color: #d97706;
  pointer-events: auto;
  cursor: pointer;
}
.long-cell-tpl-location { color: #9ca3af !important; font-style: italic; background: transparent !important; }
.long-cell-empty        { color: #ccc; }
.long-cell-active       { outline: 2px solid #1e6fa8 !important; background: #ddeef9 !important; }
.long-cell-weekend      { background: #f0f5e8 !important; color: #3d6e20; }
.long-cell-editing  { background: #bfdbfe !important; outline: 2px solid #2563eb !important; outline-offset: -1px; color: rgba(37, 99, 235, 0.4) !important; }
.long-cell-selected { outline: 2px solid #2563eb !important; outline-offset: -1px; }
.long-cell-annotating { background: #ffedd5 !important; outline: 2px solid #f59e0b !important; outline-offset: -1px; }
.tr-daily-editing   { background: #bfdbfe !important; outline: 2px solid #2563eb !important; outline-offset: -1px; color: rgba(37, 99, 235, 0.4) !important; }

.cell-note-dot,
.cell-note-dot-off,
.pc-conflict-dot,
.pc-accepted-dot {
  position: absolute;
  width: 6px;
  height: 6px;
  border-radius: 999px;
  border: none;
  box-shadow: none;
  opacity: .72;
}
.long-cell,
.long-cell-empty,
.long-cell-assigned,
.long-cell-tpl-location,
.long-cell-off,
.long-cell-leave {
  position: relative;
}
.cell-note-dot { top: 3px; right: 3px; background: rgba(156, 163, 175, .9); }
.cell-note-dot-grey { background: rgba(156, 163, 175, .9); }
.cell-note-dot-purple { background: rgba(124, 58, 237, .9); }
.cell-note-dot-magenta { background: rgba(219, 39, 119, .9); }
.cell-note-dot-cyan { background: rgba(8, 145, 178, .9); }
.cell-note-dot-brown { background: rgba(146, 64, 14, .9); }
.cell-note-dot-off { top: 3px; right: 3px; background: rgba(245, 158, 11, .9); }
.pc-conflict-dot { top: 3px; left: 3px; background: rgba(220, 38, 38, .9); }
.long-cell-sacrificed::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: repeating-linear-gradient(
    135deg,
    transparent,
    transparent 4px,
    rgba(245,158,11,.25) 4px,
    rgba(245,158,11,.25) 6px
  );
}

@keyframes long-cell-autofill-pulse {
  0%, 100% { box-shadow: inset 0 0 0 2px #38bdf8, inset 0 -10px 16px rgba(14, 165, 233, 0.12); }
  50% { box-shadow: inset 0 0 0 2px #0ea5e9, inset 0 -10px 18px rgba(14, 165, 233, 0.2); }
}
.pc-accepted-dot { top: 3px; left: 3px; background: rgba(22, 163, 74, .9); }

/* ── Session Override (Cancelled Lists) ────────────────────────────────────── */
.sc6.col-sess { white-space: nowrap; }

.sess-ov-td {
  cursor: pointer;
}
.sess-ov-icon {
  display: inline-block;
  margin-left: 2px;
  font-size: 10px;
  color: #94a3b8;
  vertical-align: middle;
  opacity: 0;
  transition: opacity .15s;
}
.sess-ov-td:hover .sess-ov-icon { opacity: 1; }
.sess-ov-td:hover { background: #f1f5f9 !important; }

.sess-ov-dot {
  display: inline-block;
  margin-left: 3px;
  font-size: 10px;
  font-weight: 700;
  vertical-align: middle;
  color: #64748b;
}
.sess-ov-dot.sess-ov-cancelled { color: #d97706; }
.sess-ov-dot.sess-ov-added    { color: #1d4ed8; }
.sess-ov-dot.sess-ov-cancelled.sess-ov-added { color: #d97706; }

/* Floating panel */
.sess-ov-panel {
  position: absolute;
  z-index: 10050;
  width: 440px;
  max-width: calc(100vw - 16px);
  background: linear-gradient(140deg, rgba(255,255,255,0.90) 0%, rgba(240,248,255,0.84) 100%);
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  border: 1px solid rgba(255,255,255,0.72);
  border-radius: 10px;
  box-shadow: 0 16px 40px rgba(12,29,48,0.18), inset 0 1px 0 rgba(255,255,255,0.60);
  font-size: 13px;
  color: #1e293b;
}
.sess-ov-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  border-bottom: 1px solid #e2e8f0;
  font-size: 13px;
}
.sess-ov-close-btn {
  background: none;
  border: none;
  cursor: pointer;
  color: #94a3b8;
  font-size: 14px;
  padding: 0 2px;
  line-height: 1;
}
.sess-ov-close-btn:hover { color: #ef4444; }
.sess-ov-body {
  display: flex;
  gap: 0;
}
.sess-ov-col {
  flex: 1;
  padding: 8px 10px;
  min-width: 0;
}
.sess-ov-col-left  { border-right: 1px solid #e2e8f0; }
.sess-ov-col-title {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: #64748b;
  margin-bottom: 5px;
}
.sess-ov-col-left  .sess-ov-col-title { color: #15803d; }
.sess-ov-col-right .sess-ov-col-title { color: #b45309; }
.sess-ov-list {
  list-style: none;
  margin: 0;
  padding: 0;
  max-height: 220px;
  overflow-y: auto;
}
.sess-ov-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 4px;
  padding: 4px 6px;
  border-radius: 5px;
  cursor: pointer;
  font-size: 12px;
  transition: background .12s;
}
.sess-ov-item-left  { flex-direction: row; }
.sess-ov-item-right { flex-direction: row-reverse; }
.sess-ov-item:hover { background: #f1f5f9; }
.sess-ov-item-left:hover  { background: #fef2f2; }
.sess-ov-item-right:hover { background: #f0fdf4; }
.sess-ov-arrow { color: #94a3b8; font-size: 11px; flex-shrink: 0; }
.sess-ov-item-left:hover  .sess-ov-arrow { color: #dc2626; }
.sess-ov-item-right:hover .sess-ov-arrow { color: #16a34a; }
.sess-ov-tag-added, .sess-ov-tag-cancelled {
  display: inline-block;
  padding: 0 4px;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 600;
  flex-shrink: 0;
}
.sess-ov-tag-added     { background: #dbeafe; color: #1d4ed8; }
.sess-ov-tag-cancelled { background: #fef3c7; color: #92400e; }
.sess-ov-empty { color: #94a3b8; font-size: 12px; font-style: italic; padding: 4px 6px; }
.sess-ov-footer {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 8px 12px;
  border-top: 1px solid #e2e8f0;
}
.sess-ov-reset-btn, .sess-ov-done-btn {
  padding: 5px 14px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  border: none;
  transition: background .12s;
}
.sess-ov-reset-btn { background: #f1f5f9; color: #475569; border: 1px solid #cbd5e1; }
.sess-ov-reset-btn:hover { background: #e2e8f0; }
.sess-ov-done-btn  { background: #0f172a; color: #fff; }
.sess-ov-done-btn:hover { background: #1e293b; }

.cell-note-popup {
  position: fixed;
  z-index: 10010;
  max-width: min(280px, 50vw);
  padding: 6px 8px;
  border: 1px solid #cbd5e1;
  border-radius: 7px;
  background: #fff;
  color: #334155;
  font-size: 12px;
  line-height: 1.3;
  box-shadow: 0 8px 22px rgba(15, 23, 42, .18);
}
.cell-note-popup-by {
  margin-top: 4px;
  font-size: 10px;
  color: #94a3b8;
  font-style: italic;
}
.annot-editor-by {
  font-size: 10px;
  color: #94a3b8;
  font-style: italic;
  margin-top: -2px;
}

.annot-editor-panel {
  position: fixed;
  z-index: 10020;
  width: 260px;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 12px 30px rgba(15, 23, 42, .2);
  padding: 8px;
  display: grid;
  gap: 6px;
}

.pc-conflict-popup {
  z-index: 10030;
  min-width: 240px;
  max-width: min(320px, 52vw);
  padding: 10px 12px;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  background: rgba(255, 255, 255, .98);
  color: #1f2937;
  box-shadow: 0 12px 30px rgba(15, 23, 42, .22);
}

.pc-conflict-popup-title {
  font-size: 12px;
  font-weight: 700;
  color: #991b1b;
  margin-bottom: 6px;
}

.pc-accepted-popup-title {
  color: #166534;
}

.pc-conflict-popup-msg {
  font-size: 11px;
  line-height: 1.4;
  color: #334155;
  margin-bottom: 8px;
}

.pc-conflict-popup-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  justify-content: flex-end;
}

.pc-conflict-popup-actions button {
  border: 1px solid #cbd5e1;
  border-radius: 6px;
  background: #ffffff;
  color: #334155;
  font-size: 11px;
  font-weight: 600;
  padding: 4px 8px;
  cursor: pointer;
}

.pc-conflict-popup-actions .pc-btn-accept {
  border-color: #d97706;
  background: #fff7ed;
  color: #9a3412;
}

.pc-conflict-popup-actions .pc-btn-change {
  border-color: #2563eb;
  background: #eff6ff;
  color: #1d4ed8;
}

.pc-conflict-popup-actions .pc-btn-revoke {
  border-color: #16a34a;
  background: #f0fdf4;
  color: #166534;
}
.annot-editor-input {
  width: 100%;
  border: 1px solid #cbd5e1;
  border-radius: 6px;
  padding: 6px 8px;
  font-size: 12px;
}
.annot-editor-colors {
  display: grid;
  gap: 4px;
}
.annot-editor-color-label {
  font-size: 10px;
  color: #64748b;
  font-weight: 600;
}
.annot-editor-swatches {
  display: flex;
  align-items: center;
  gap: 6px;
}
.annot-color-swatch {
  width: 14px;
  height: 14px;
  border-radius: 999px;
  border: 1px solid rgba(148, 163, 184, .45);
  cursor: pointer;
  padding: 0;
}
.annot-color-swatch.active {
  outline: 2px solid #334155;
  outline-offset: 1px;
}
.annot-color-swatch-grey { background: #9ca3af; }
.annot-color-swatch-purple { background: #7c3aed; }
.annot-color-swatch-magenta { background: #db2777; }
.annot-color-swatch-cyan { background: #0891b2; }
.annot-color-swatch-brown { background: #92400e; }
.annot-editor-btns {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
}
.annot-editor-btn {
  border: 1px solid #cbd5e1;
  border-radius: 6px;
  background: #fff;
  color: #334155;
  font-size: 11px;
  font-weight: 600;
  padding: 3px 8px;
  cursor: pointer;
}
.annot-editor-btn-save {
  border-color: #15803d;
  background: #16a34a;
  color: #fff;
}
.annot-editor-btn-clear {
  border-color: #dc2626;
  background: #fff1f2;
  color: #b91c1c;
}

/* Day separators in long-grid — inset box-shadow bypasses border-collapse.
   !important ensures it overrides .sc8 { box-shadow: ... } on sticky Avail col. */
.long-grid tr.day-sep > td {
  box-shadow: inset 0 1px 0 0 #dc2626 !important;
}
/* Lighter dotted AM/PM divider — applies to ALL weekday AM rows (Mon–Fri).
   day-sep rows (Tue–Fri AM) have both day-sep (top red) and sess-am (bottom dotted);
   those are on opposite sides so they don't conflict. */
.long-grid tr.sess-am > td {
  border-bottom: 1px dotted rgba(143,163,184,0.45);
}
.long-grid tr.sess-pm > td {
  border-top: 1px dotted rgba(143,163,184,0.45);
}
.tpl-grid  tr.day-sep > td { border-top: 1px solid #c5d2e4; }

.metric-req        { background: #fef3c7; color: #78350f; font-weight: 700; }
.metric-avail-good { background: #d1fae5 !important; color: #065f46 !important; font-weight: 700; }
.metric-avail-warn { background: #fed7aa !important; color: #9a3412 !important; font-weight: 700; }
.metric-avail-zero { background: #fee2e2 !important; color: #991b1b !important; font-weight: 700; }
.metric-avail-neg  { background: #7f1d1d !important; color: #fecaca !important; font-weight: 700; }

/* ── Template grid (long-view style) ────────────────── */
/* Compact sticky col offsets & widths for tpl-grid */
.tpl-grid .sc1 { left: 0; }
.tpl-grid .sc2 { left: 24px; }
.tpl-grid .sc3 { left: 60px; }
.tpl-grid .sc4 { left: 86px; }
.tpl-grid .sc5 { left: 116px; }
.tpl-grid .sc6 { left: 146px; }
/* Compact padding for pinned left columns in tpl-grid */
.tpl-grid .sc1, .tpl-grid .sc2, .tpl-grid .sc3,
.tpl-grid .sc4, .tpl-grid .sc5, .tpl-grid .sc6 { padding: 3px 4px; }
.tpl-grid .col-week    { min-width: 24px;  max-width: 24px;  font-size: 10px; font-weight: 700; }
.tpl-grid .col-day     { min-width: 36px;  max-width: 36px;  font-size: 11px; }
.tpl-grid .col-sess    { min-width: 26px;  max-width: 26px;  font-size: 10px; }
.tpl-grid .col-demand  { min-width: 30px;  max-width: 30px;  font-size: 11px; }
.tpl-grid .col-supply  { min-width: 30px;  max-width: 30px;  font-size: 11px; }
.tpl-grid .col-balance { min-width: 34px;  max-width: 34px;  font-size: 11px; font-weight: 700; }
.tpl-grid .col-person  { min-width: 38px;  max-width: 38px;  cursor: pointer; }

/* Avail column — steel blue, distinct from working cells */
.tpl-col-supply           { background: #e0f2fe; color: #0369a1; font-weight: 700; }
.tpl-col-supply.tpl-supply-low { background: #fee2e2 !important; color: #991b1b !important; }

/* Balance column */
.tpl-col-balance          { font-weight: 700; }
.tpl-col-balance.tpl-bal-surplus { background: #dcfce7; color: #166534; }
.tpl-col-balance.tpl-bal-deficit { background: #fee2e2; color: #991b1b; }
.tpl-col-balance.tpl-bal-hi  { background: #dcfce7; color: #166534; }
.tpl-col-balance.tpl-bal-mid { background: #fff3cd; color: #92400e; }
.tpl-col-balance.tpl-bal-lo  { background: #fee2e2; color: #991b1b; }

/* Status cell colours */
.tpl-cell {
  cursor: pointer;
  min-width: 38px; max-width: 38px;
  font-size: 10px;
  font-weight: 600;
  transition: opacity .1s;
}
.tpl-cell:hover { opacity: .75; }
.tpl-cell-work  { background: #f5f5f5;  color: #9ca3af; } /* neutral: indicates available */
.tpl-cell-off   { background: #fee2e2;  color: #991b1b; } /* red: unavailable */
.tpl-cell-admin { background: #dbeafe;  color: #1e40af; } /* blue: admin */
.tpl-cell-ncd   { background: #ede9fe;  color: #5b21b6; } /* purple: NCD */
.tpl-cell-al    { background: #fef3c7;  color: #92400e; } /* amber: annual leave */
.tpl-cell-sl    { background: #fce7f3;  color: #9d174d; } /* pink: sick leave */

/* Horizontal separator between week types */
.tpl-grid tr.tpl-wt-sep > td { border-top: 2px solid #64748b; }

/* week-type separators in tpl-grid */
.tpl-grid tr:first-child.wt-b td,
.tpl-grid tr:first-child.wt-c td,
.tpl-grid tr:first-child.wt-d td { border-top: 2px solid var(--line); }

/* ── Floating cell menus ─────────────────────────────── */
.smo-menu-pop {
  position: fixed;
  z-index: 10000;
  overflow: visible;
}
.smo-menu {
  min-width: 150px;
  max-width: 240px;
  max-height: min(62vh, 420px);
  overflow-x: hidden;
  overflow-y: auto;
  border: 1px solid #c9d8ea;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 10px 28px rgba(15, 23, 42, .22);
  padding: 4px;
}
.smo-menu-section-label {
  margin: 6px 6px 4px;
  font-size: 10px;
  font-weight: 700;
  color: #64748b;
  letter-spacing: .03em;
  text-transform: uppercase;
}
.smo-menu-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 6px 8px;
  border-radius: 6px;
  font-size: 12px;
  color: #1f2937;
  cursor: pointer;
  user-select: none;
}
.smo-menu-item:hover {
  background: #eef6ff;
}
.smo-menu-item.smo-menu-item-active {
  background: #dbeafe;
  color: #1d4ed8;
  font-weight: 700;
}
.smo-menu-has-sub {
  position: relative;
}
.smo-menu-subtrigger {
  padding-right: 10px;
}
.smo-submenu-arrow {
  font-size: 10px;
  color: #64748b;
  transition: transform .15s ease;
}
.smo-menu-has-sub.sub-open .smo-submenu-arrow {
  transform: rotate(90deg);
}
.smo-submenu {
  min-width: 148px;
  max-width: 220px;
  padding: 4px;
  border: 1px solid #c9d8ea;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 10px 28px rgba(15, 23, 42, .18);
}
.smo-submenu-floating {
  position: fixed;
  z-index: 10010;
  max-height: min(62vh, 420px);
  overflow-y: auto;
}

.tr-daily-picker {
  position: fixed;
  z-index: 10000;
  width: min(280px, 42vw);
  min-width: 200px;
  border: 1px solid #c9d8ea;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 10px 28px rgba(15, 23, 42, .22);
  padding: 8px;
}
.tr-daily-picker-input {
  width: 100%;
  margin: 0 0 8px;
}
.tr-daily-picker-list {
  max-height: min(45vh, 260px);
  overflow: auto;
  display: grid;
  gap: 2px;
}
.tr-daily-picker-item {
  border-radius: 6px;
  padding: 6px 8px;
  font-size: 12px;
  cursor: pointer;
}
.tr-daily-picker-item:hover,
.tr-daily-picker-item:focus-visible {
  background: #eef6ff;
  outline: none;
}
.tr-daily-picker-active {
  background: #dbeafe;
  color: #1d4ed8;
  font-weight: 700;
}
.tr-daily-picker-init {
  display: inline-block;
  min-width: 28px;
  font-weight: 700;
  color: #475569;
}
.tr-daily-picker-name {
  color: #1f2937;
}

/* ── Editor ──────────────────────────────────────────── */
.editor {
  border: 1px dashed var(--line);
  border-radius: 8px;
  padding: 14px;
  background: #fafcff;
  min-height: 60px;
}
.editor.empty { color: var(--muted); font-size: 13px; }
.editor-title { font-size: 13px; margin-bottom: 10px; }
.editor-title strong { font-size: 14px; }
.badge-off {
  display: inline-block;
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 4px;
  background: #fee2e2;
  color: #991b1b;
  margin-left: 8px;
}

/* ── Forms ───────────────────────────────────────────── */
.form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px;
  margin-bottom: 12px;
}
.form-grid label {
  display: grid;
  gap: 4px;
  font-size: 13px;
  text-align: left;
}
input, select { padding: 7px 10px; border: 1px solid rgba(180,210,240,0.75); border-radius: 6px; font: inherit; font-size: 13px; background: rgba(255,255,255,0.82); }
input:focus, select:focus { outline: 2px solid #90c4e4; border-color: #90c4e4; background: rgba(255,255,255,0.96); }
button {
  padding: 7px 14px;
  border: 1px solid rgba(180,210,240,0.70);
  border-radius: 6px;
  background: rgba(255,255,255,0.72);
  cursor: pointer;
  font: inherit;
  font-size: 13px;
}
button:hover { border-color: var(--accent); color: var(--accent); background: rgba(255,255,255,0.90); }
button[type="submit"] { background: var(--accent); color: #fff; border-color: var(--accent); }
button[type="submit"]:hover { background: #155893; }

/* ── People ──────────────────────────────────────────── */
.split { display: grid; grid-template-columns: 2fr 1fr; gap: 12px; }
.stack { display: grid; gap: 8px; }
.contact-card { border: 1px solid rgba(255,255,255,0.65); border-radius: 8px; padding: 14px; background: linear-gradient(140deg, rgba(255,255,255,0.62) 0%, rgba(240,248,255,0.50) 100%); backdrop-filter: blur(10px) saturate(120%); -webkit-backdrop-filter: blur(10px) saturate(120%); }
.contact-card.empty { color: var(--muted); }
.small { font-size: 12px; color: var(--muted); }

#stab-people .split {
  align-items: stretch;
  height: calc(100vh - var(--sticky-chrome-height) - var(--settings-subtabs-height) - 48px);
  min-height: 0;
}
#stab-people .panel.stack {
  align-content: start;
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr);
  min-height: 0;
}

#stab-people {
  min-height: 0;
}

#stab-people .subview,
#stab-people .subview.active,
#stab-people .subviews-wrapper {
  min-height: 0;
}

.people-side-stack {
  align-self: stretch;
  position: static;
  min-height: 0;
  max-height: 100%;
  overflow: auto;
  padding-right: 2px;
}
.people-side-panel .panel-head h3 {
  font-size: 13px;
  letter-spacing: .01em;
}

.contact-card {
  padding: 12px;
  background: linear-gradient(180deg, #f8fbff 0%, #f3f8ff 100%);
}
.contact-name {
  margin: 0 0 2px;
  font-size: 16px;
  color: #1e293b;
}
.contact-role {
  margin: 0 0 10px;
  font-size: 12px;
  color: #64748b;
}
.contact-line {
  margin: 0 0 6px;
  font-size: 12px;
  color: #334155;
}
.contact-line strong {
  color: #475569;
  margin-right: 4px;
}
.contact-status {
  display: inline-block;
  padding: 1px 7px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
}
.contact-status.is-active {
  background: #dcfce7;
  color: #166534;
}
.contact-status.is-inactive {
  background: #fef3c7;
  color: #92400e;
}

.person-form-grid {
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 8px;
}
.person-form-grid > label,
.person-trainee-row,
.person-locgroups-row,
.person-loctext-row,
.person-check-row {
  grid-column: 1 / -1;
}
.person-form-grid > label.person-inline-third {
  grid-column: span 2;
}
.person-form-grid > label.person-inline-half {
  grid-column: span 3;
}
.person-trainee-row > label {
  display: grid;
  gap: 4px;
}
.trainee-run-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.person-locgroups-title {
  font-size: 12px;
  font-weight: 700;
  color: #334155;
  margin-bottom: 5px;
}
.person-locgroups-row {
  border: 1px solid #dbe4f0;
  border-radius: 8px;
  background: #f8fbff;
  padding: 8px;
}
.person-locgroups-row .loc-group-checks {
  margin-top: 1px;
  display: grid;
  grid-template-columns: repeat(2, minmax(120px, 1fr));
  gap: 3px 8px;
  max-height: none;
  overflow: visible;
  background: #fff;
}
.person-locgroups-row .loc-group-check-item {
  display: flex;
  align-items: center;
  gap: 6px;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  padding: 3px 6px;
  min-height: 24px;
  background: #fff;
  line-height: 1.15;
}
.person-locgroups-row .loc-group-check-item input[type="checkbox"] {
  margin: 0;
  flex: 0 0 auto;
}

.person-form-grid label.person-check-row {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  font-size: 12px;
  color: #334155;
  padding: 3px 0;
  line-height: 1.2;
}
.person-form-grid label.person-check-row span {
  display: inline;
}
.person-form-grid label.person-check-row input[type="checkbox"] {
  width: 14px;
  height: 14px;
  flex: 0 0 auto;
}
.person-form-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding-top: 2px;
}
.person-form-actions button {
  min-height: 30px;
}

#peopleSubtabs {
  position: sticky;
  top: calc(var(--sticky-chrome-height) + var(--settings-subtabs-height) + 6px);
  z-index: 9040;
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  min-height: 30px;
  overflow: visible;
  gap: 6px;
  margin: 6px 0 10px;
  padding-top: 8px;
  padding-bottom: 10px;
  background: var(--surface);
  border-bottom: 1px solid #e2e8f0;
}
#peopleSubtabs .subtab {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: center;
  height: 28px;
  min-height: 28px;
  max-height: 28px;
  padding: 0 12px;
  border-width: 1px;
  line-height: 1;
  white-space: nowrap;
  appearance: none;
  flex: 0 0 auto;
  margin: 0;
  transition: color .15s ease, border-color .15s ease, background-color .15s ease;
}
#peopleSubtabs .subtab.active,
#peopleSubtabs .subtab[data-group="other"],
#peopleSubtabs .subtab[data-group="other"].active {
  padding-top: 0;
  padding-bottom: 0;
  min-height: 28px;
  max-height: 28px;
}
.subviews-wrapper {
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  background: #fbfdff;
  padding: 10px;
  display: grid;
  min-height: 0;
  overflow: hidden;
}
.subviews-wrapper > .subview.active {
  display: grid;
  min-height: 0;
}
.subviews-wrapper > .subview.active > .table-wrap {
  min-height: 0;
  height: 100%;
  max-height: none;
}
.people-subtable {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}
.people-subtable th,
.people-subtable td {
  border-color: #d8e3f1;
}
.people-subtable th { font-size: 11px; }

#smoLongContainer .long-grid thead th {
  position: sticky;
  top: 0;
  z-index: 4;
  background: #f0f5fb;
}

#smoLongContainer .long-grid .sc1,
#smoLongContainer .long-grid .sc2,
#smoLongContainer .long-grid .sc3,
#smoLongContainer .long-grid .sc4,
#smoLongContainer .long-grid .sc5,
#smoLongContainer .long-grid .sc6,
#smoLongContainer .long-grid .sc7,
#smoLongContainer .long-grid .sc8 {
  z-index: 11;
}

#smoLongContainer .long-grid thead .sc1,
#smoLongContainer .long-grid thead .sc2,
#smoLongContainer .long-grid thead .sc3,
#smoLongContainer .long-grid thead .sc4,
#smoLongContainer .long-grid thead .sc5,
#smoLongContainer .long-grid thead .sc6,
#smoLongContainer .long-grid thead .sc7,
#smoLongContainer .long-grid thead .sc8 {
  z-index: 12;
}

#regLongContainer .tr-grid thead tr:first-child th {
  position: sticky;
  top: 0;
  z-index: 6;
}

#regLongContainer .tr-grid thead tr:nth-child(2) th {
  position: sticky;
  top: var(--tr-header-row-1-height);
  z-index: 5;
}

#regLongContainer .tr-grid thead th[rowspan="2"] {
  top: 0;
  z-index: 7;
}

.people-subtable td { font-size: 12px; }

#stab-people .table-wrap {
  min-height: 0;
  height: 100%;
  max-height: none;
}

.people-subtable .people-main-row {
  transition: background-color .14s ease;
}
.people-subtable .people-main-row:hover {
  background: #f8fbff;
}

/* Registrar stream colour coding in People table */
.people-subtable .people-main-row.ppl-stream-non-exam:not(.person-selected-row):not(.person-oncall-row) {
  background: #f4f8ff;
}

.people-subtable .people-main-row.ppl-stream-exam:not(.person-selected-row):not(.person-oncall-row) {
  background: #fff8f1;
}

.people-subtable .people-main-row.ppl-stream-post-exam:not(.person-selected-row):not(.person-oncall-row) {
  background: #f1fcf6;
}

.people-subtable .people-main-row.ppl-stream-non-exam td:nth-child(5) {
  color: #1e3a8a;
}

.people-subtable .people-main-row.ppl-stream-exam td:nth-child(5) {
  color: #9a3412;
}

.people-subtable .people-main-row.ppl-stream-post-exam td:nth-child(5) {
  color: #065f46;
}

.people-subtable .person-selected-row {
  background: #e8f3fb !important;
  box-shadow: inset 3px 0 0 #1e6fa8;
}

.people-subtable .person-oncall-row {
  background: #fff8dc;
}
.people-subtable .person-oncall-row.person-selected-row {
  background: #f5efc6 !important;
  box-shadow: inset 3px 0 0 #c28800;
}

.people-subtable .person-expand-row {
  display: none;
}
.people-subtable .person-expand-row.open {
  display: table-row;
}
.people-subtable .person-expand-row > td {
  white-space: normal;
}
.person-expand-inner {
  padding: 8px 10px;
  border-radius: 8px;
  background: #f8fbff;
  color: #334155;
  line-height: 1.45;
  white-space: normal;
  overflow-wrap: anywhere;
}
.person-expand-label {
  color: #64748b;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .03em;
}
.person-expand-empty {
  color: #94a3b8;
  font-style: italic;
}
.person-expand-line + .person-expand-line {
  margin-top: 6px;
}
.person-loc-pill {
  display: inline-block;
  margin: 2px 4px 2px 0;
  padding: 2px 7px;
  border-radius: 999px;
  border: 1px solid #dbe4f0;
  background: #ffffff;
  color: #334155;
  font-size: 11px;
  max-width: 100%;
  white-space: normal;
  overflow-wrap: anywhere;
}
.person-loc-pill-code {
  border-color: #bfdbfe;
  background: #eff6ff;
  color: #1d4ed8;
}

.expand-col {
  width: 34px;
  text-align: center;
}
.person-expand-btn {
  min-width: 24px;
  padding: 2px 4px;
  border-radius: 6px;
  color: #475569;
}
.person-expand-btn:hover {
  background: #eef4fb;
}

.loc-group-checks {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 8px;
  border: 1px solid #dbe4f0;
  border-radius: 8px;
  background: #f8fbff;
}
.loc-group-check-item {
  display: inline-flex;
  gap: 6px;
  align-items: center;
  font-size: 12px;
  color: #334155;
}

.loc-groups-editor {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 360px);
  gap: 14px;
  align-items: stretch;
  min-height: 0;
  height: 100%;
  overflow: hidden;
}
#people-group-locations {
  min-height: 0;
}
#people-group-locations .loc-groups-editor > .panel {
  min-width: 0;
  min-height: 0;
}
#people-group-locations .loc-groups-editor > .panel:first-child {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
}
#locGroupsContainer {
  min-height: 0;
  overflow: auto;
  padding-right: 2px;
}
#locGroupFormPanel {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  overflow: hidden;
}
#locGroupForm {
  min-height: 0;
  overflow: auto;
}
.loc-groups-editor .panel-head {
  margin-bottom: 10px;
}
.loc-groups-empty {
  padding: 16px;
  border: 1px dashed #cbd5e1;
  border-radius: 10px;
  background: #f8fbff;
  color: #64748b;
  font-size: 13px;
}
.loc-groups-list-head {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-bottom: 8px;
  color: #334155;
}
.loc-groups-list-sub {
  font-size: 12px;
  color: #64748b;
}
.loc-groups-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
  background: #fff;
  border-radius: 10px;
  overflow: hidden;
  table-layout: fixed;
}
.loc-groups-table th,
.loc-groups-table td {
  border: 1px solid #dbe3ef;
  padding: 6px 8px;
  text-align: left;
  vertical-align: middle;
}
.loc-groups-table th:nth-child(2) { width: 28%; }
.loc-groups-table th:nth-child(4),
.loc-groups-table td:nth-child(4) {
  width: 78px;
  text-align: right;
  white-space: nowrap;
}
.loc-groups-table td:nth-child(2),
.loc-groups-table td:nth-child(3) {
  overflow-wrap: anywhere;
}
.loc-code-list {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  align-items: flex-start;
}
.loc-groups-table thead th {
  background: #f8fbff;
  color: #475569;
  font-size: 11px;
}
.loc-groups-table tbody tr:hover {
  background: #f8fbff;
}
.loc-code-tag {
  display: inline-block;
  padding: 2px 7px;
  border-radius: 999px;
  border: 1px solid #bfdbfe;
  background: #eff6ff;
  color: #1d4ed8;
  font-size: 11px;
  font-weight: 600;
}
.drag-handle,
.drag-handle-th {
  width: 28px;
  text-align: center;
  color: #64748b;
}
.drag-handle {
  cursor: grab;
}
.dragging {
  opacity: .55;
}
.drag-over {
  outline: 2px dashed #93c5fd;
  outline-offset: -2px;
}
.loc-hints {
  margin-top: 10px;
  padding: 10px;
  border: 1px solid #dbe4f0;
  border-radius: 10px;
  background: #f8fbff;
}
.loc-hints-title {
  font-size: 12px;
  font-weight: 700;
  color: #334155;
}
.loc-hints-sub {
  margin-top: 2px;
  font-size: 11px;
  color: #64748b;
}
.loc-hints-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  max-height: 176px;
  overflow: auto;
  margin-top: 10px;
}
.loc-hint-chip {
  padding: 5px 9px;
  border: 1px solid #bfd0e6;
  border-radius: 999px;
  background: #fff;
  color: #334155;
  font-size: 11px;
  font-weight: 600;
  line-height: 1;
}
.loc-hint-chip:hover {
  border-color: #93c5fd;
  background: #eff6ff;
  color: #1d4ed8;
}
.loc-hint-chip.is-selected {
  border-color: #93c5fd;
  background: #dbeafe;
  color: #1d4ed8;
}
.loc-group-codes-input {
  width: 100%;
  min-height: 58px;
  resize: vertical;
  overflow: hidden;
  line-height: 1.35;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

/* ── SMO Template Settings ───────────────────────────── */
.tpl-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 16px minmax(310px, 390px);
  gap: 8px;
  align-items: stretch;
}
#stab-smo-template {
  min-height: 0;
}
#stab-smo-template .tpl-layout {
  height: calc(100vh - var(--sticky-chrome-height) - var(--settings-subtabs-height) - 48px);
  min-height: 0;
}
.tpl-layout.tpl-right-collapsed {
  grid-template-columns: minmax(0, 1fr) 16px 0;
  gap: 6px;
}
.tpl-left {
  min-width: 0;
  min-height: 0;
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr);
}
.tpl-left .table-wrap {
  min-height: 0;
  height: 100%;
  max-height: none;
}
.tpl-toggle-btn {
  align-self: center;
  width: 16px;
  min-width: 16px;
  height: 88px;
  padding: 0;
  border-radius: 999px;
  background: #f8fbff;
  color: #334155;
  border-color: #dbe4f0;
  font-size: 11px;
  line-height: 1;
}
.tpl-toggle-btn:hover {
  background: #eef6ff;
  color: #1d4ed8;
}
.tpl-right-panel {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #ffffff;
  min-width: 0;
  min-height: 0;
  height: 100%;
  box-shadow: 0 1px 3px rgba(15, 23, 42, .05);
  overflow: hidden;
  transition: opacity .16s ease, border-color .16s ease, box-shadow .16s ease;
}
.tpl-right-panel.collapsed {
  border-color: transparent;
  box-shadow: none;
  opacity: 0;
  pointer-events: none;
}
.tpl-right-inner {
  height: 100%;
  min-height: 0;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
}
.tpl-right-panel.collapsed .tpl-right-inner {
  visibility: hidden;
}
.tpl-right-head {
  padding: 8px 10px;
  border-bottom: 1px solid #e2e8f0;
  background: #f8fbff;
}
.tpl-right-head h3 { margin: 0; font-size: 14px; }
.tpl-right-body {
  padding: 8px 10px;
  min-height: 0;
  overflow: auto;
}
.tpl-person-label {
  display: grid;
  gap: 4px;
  font-size: 12px;
  margin-bottom: 10px;
  color: #475569;
}
.pers-tpl-wrap {
  border: 1px solid #dbe4f0;
  border-radius: 8px;
  padding: 8px;
  background: #fbfdff;
  margin-bottom: 10px;
  overflow-x: auto;
}
.pers-tpl-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 11px;
}
.pers-tpl-table th,
.pers-tpl-table td {
  border: 1px solid #dde6f2;
  padding: 4px;
  text-align: center;
}
.pers-day-label {
  text-align: left;
  font-weight: 700;
  color: #334155;
}
.pers-wk-col { width: 28px; }
.pers-tpl-wt-header { font-weight: 700; background: #f1f5f9; color: #334155; }
.pers-tpl-sess-header { font-size: 9px; color: #64748b; font-weight: 600; background: #f8fafc; }
.pers-tpl-cell {
  cursor: pointer;
  font-size: 10px;
  font-weight: 700;
  min-width: 20px;
  padding: 3px 2px !important;
  line-height: 14px;
}
.pers-tpl-cell:hover { filter: brightness(0.88); }
.pers-tpl-work  { background: #f1f5f9; color: #94a3b8; }
.pers-tpl-off   { background: #fee2e2; color: #991b1b; }
.pers-tpl-admin { background: #dbeafe; color: #1e40af; }
.pers-tpl-ncd   { background: #ede9fe; color: #5b21b6; }
.pers-tpl-al    { background: #fef3c7; color: #92400e; }
.pers-tpl-sl    { background: #fce7f3; color: #9d174d; }

/* Pending (staged) template cell */
.pers-tpl-pending {
  outline: 2px dashed #f59e0b;
  outline-offset: -2px;
  position: relative;
}
.pers-tpl-pending-dot {
  position: absolute;
  top: 1px; right: 1px;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: #f59e0b;
  pointer-events: none;
}
/* Apply button — highlighted when changes are pending */
#btnTplApply:not(:disabled) {
  background: #f59e0b !important;
  color: #1e293b !important;
  font-weight: 700;
  border-color: #d97706 !important;
}

.tpl-eff-row {
  display: flex;
  gap: 8px;
  align-items: end;
  margin-bottom: 12px;
}
.tpl-eff-row label {
  display: grid;
  gap: 4px;
  font-size: 12px;
  color: #475569;
}
.tpl-changelog {
  border-top: 1px solid #e2e8f0;
  padding-top: 10px;
}
.tpl-cl-title {
  margin: 0 0 6px;
  font-size: 12px;
  color: #334155;
}
.tpl-cl-list { display: grid; gap: 8px; max-height: 340px; overflow-y: auto; padding-right: 2px; }
.tpl-cl-entry {
  border: 1px solid #dbe4f0;
  border-radius: 8px;
  background: #fff;
}
.tpl-cl-summary {
  display: flex;
  gap: 8px;
  align-items: center;
  padding: 6px 8px;
  cursor: pointer;
  border-radius: 8px;
}
.tpl-cl-summary:hover { background: #f8fbff; }
.tpl-cl-name { font-size: 12px; font-weight: 700; color: #1e293b; }
.tpl-cl-meta { font-size: 11px; color: #64748b; }
.tpl-cl-arrow { margin-left: auto; color: #64748b; }
.tpl-cl-diff { display: none; padding: 6px 8px; gap: 8px; grid-template-columns: 1fr 1fr; }
.tpl-cl-entry.open .tpl-cl-diff { display: grid; }
.tpl-cl-entry.open .tpl-cl-arrow { transform: rotate(90deg); }
.tpl-cl-diff-side h5 { margin: 0 0 6px; font-size: 11px; color: #475569; }

.tpl-quick-input-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 8px;
}
.tpl-quick-input-item {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  border: 1px solid #bfdbfe;
  background: #eff6ff;
  color: #1d4ed8;
  border-radius: 999px;
  padding: 2px 7px;
  font-size: 11px;
  font-weight: 700;
}
.tpl-quick-input-code { letter-spacing: .01em; }
.tpl-quick-input-remove {
  padding: 0 4px;
  border: 0;
  background: transparent;
  color: #93c5fd;
}
.tpl-quick-input-remove:hover { color: #ef4444; }
.tpl-quick-input-add {
  display: flex;
  gap: 6px;
  align-items: center;
}
.tpl-quick-input-text { max-width: 120px; }

/* ── Template Review – Roster Inline ─────────────────── */
.tpl-rv-roster-banner {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 8px;
  padding: 8px 14px;
  background: #1e293b; color: #f1f5f9;
  font-size: 12px;
  border-bottom: 2px solid #3b82f6;
  position: sticky; top: 0; z-index: 50;
}
.tpl-rv-roster-banner-left  { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.tpl-rv-roster-banner-right { display: flex; align-items: center; gap: 8px; }
.tpl-rv-roster-name   { font-weight: 700; color: #93c5fd; font-size: 13px; }
.tpl-rv-roster-eff    { color: #94a3b8; font-size: 11px; }
.tpl-rv-roster-legend { display: flex; gap: 8px; font-size: 11px; }
.tpl-rv-leg-freed     { color: #86efac; font-weight: 600; }
.tpl-rv-leg-blocked   { color: #fcd34d; font-weight: 600; }
.tpl-rv-leg-conflict  { color: #fca5a5; font-weight: 600; }
.tpl-rv-roster-msg    { font-size: 11px; color: #94a3b8; }
.tpl-rv-roster-cancel {
  padding: 4px 12px; border-radius: 5px;
  border: 1px solid #475569; background: transparent;
  color: #cbd5e1; cursor: pointer; font-size: 12px;
}
.tpl-rv-roster-cancel:hover  { background: #334155; }
.tpl-rv-roster-confirm {
  padding: 4px 12px; border-radius: 5px;
  border: none; background: #2563eb;
  color: #fff; cursor: pointer; font-size: 12px; font-weight: 700;
}
.tpl-rv-roster-confirm:hover { background: #1d4ed8; }
/* Reviewed person's column header */
th.tpl-rv-roster-col-header {
  background: #1e3a8a !important; color: #bfdbfe !important;
  outline: 2px solid #3b82f6;
}
/* Unchanged cells in the reviewed person's column */
td.tpl-rv-roster-col-focus { background: rgba(59, 130, 246, 0.07) !important; }
/* Freed (was OFF/non-WORK → now WORK) */
td.tpl-rv-cell-freed   { background: #bbf7d0 !important; color: #166534 !important; font-weight: 700; }
/* Newly blocked (was WORK → now non-WORK, no assignment) */
td.tpl-rv-cell-blocked { background: #fef9c3 !important; color: #854d0e !important; font-weight: 700; }
/* Conflict (now non-WORK but has an assignment) */
td.tpl-rv-cell-conflict {
  background: #fee2e2 !important; cursor: pointer !important;
  outline: 2px solid #ef4444; position: relative;
}
td.tpl-rv-cell-conflict:hover { background: #fecaca !important; }
/* Resolution badge shown on conflict cells after a choice is made */
.rv-res-badge {
  display: block; font-size: 8px; font-weight: 700;
  border-radius: 2px; padding: 0 2px; margin-top: 1px; line-height: 1.4;
  text-align: center;
}
.rv-res-badge-keep  { background: #16a34a; color: #fff; }
.rv-res-badge-clear { background: #d97706; color: #fff; }

/* ── Template Review: Conflict Floater ────────────────── */
.tpl-rv-cf {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  box-shadow: 0 8px 30px rgba(15, 23, 42, 0.18);
  width: 280px;
  z-index: 9000;
  font-size: 13px;
  overflow: hidden;
}
.tpl-rv-cf-header {
  display: flex; justify-content: space-between; align-items: center;
  padding: 10px 12px 6px;
  border-bottom: 1px solid #f1f5f9;
}
.tpl-rv-cf-title { font-weight: 700; color: #1e293b; font-size: 13px; }
.tpl-rv-cf-close {
  background: none; border: none; cursor: pointer;
  color: #94a3b8; font-size: 14px; line-height: 1; padding: 2px 4px;
}
.tpl-rv-cf-close:hover { color: #1e293b; }
.tpl-rv-cf-where {
  padding: 4px 12px;
  font-size: 11px; color: #64748b; font-weight: 600;
  background: #f8fafc;
  border-bottom: 1px solid #f1f5f9;
}
.tpl-rv-cf-desc {
  margin: 0; padding: 10px 12px 6px;
  font-size: 12px; color: #475569; line-height: 1.5;
}
.tpl-rv-cf-cur { color: #991b1b; }
.tpl-rv-cf-new { color: #1d4ed8; }
.tpl-rv-cf-options {
  display: flex; flex-direction: column; gap: 6px;
  padding: 6px 12px 12px;
}
.tpl-rv-cf-btn {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 12px; border-radius: 7px;
  border: 2px solid #e2e8f0; background: #f8fafc;
  cursor: pointer; text-align: left; width: 100%;
  transition: border-color 0.12s, background 0.12s;
}
.tpl-rv-cf-btn:hover { border-color: #94a3b8; background: #f1f5f9; }
.tpl-rv-cf-btn.tpl-rv-cf-selected { border-color: #2563eb; background: #eff6ff; }
.tpl-rv-cf-keep.tpl-rv-cf-selected  { border-color: #16a34a; background: #f0fdf4; }
.tpl-rv-cf-replace.tpl-rv-cf-selected { border-color: #d97706; background: #fffbeb; }
.tpl-rv-cf-btn-icon { font-size: 18px; flex-shrink: 0; }
.tpl-rv-cf-btn-body { display: flex; flex-direction: column; gap: 1px; }
.tpl-rv-cf-btn-label { font-size: 12px; font-weight: 600; color: #1e293b; }
.tpl-rv-cf-btn-sub   { font-size: 10px; color: #64748b; }

/* ── Requirements Template Settings ──────────────────── */
#stab-req-template {
  min-height: 0;
}
#stab-req-template .surg-tpl-layout {
  height: calc(100vh - var(--sticky-chrome-height) - var(--settings-subtabs-height) - 48px);
  min-height: 0;
}
.surg-tpl-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 8px;
  align-items: stretch;
}
.surg-tpl-left {
  min-width: 0;
  min-height: 0;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
}
.surg-tpl-left .table-wrap {
  min-height: 0;
  height: 100%;
  max-height: none;
}
.surg-wt-pills {
  display: inline-flex;
  gap: 6px;
  flex-wrap: wrap;
}
.surg-wt-pill {
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
}
.surg-wt-pill.active {
  background: #e8f3fb;
  color: #114b73;
  border-color: #a9c7df;
}

.surg-grid {
  width: 100%;
  border-collapse: collapse;
  font-size: 10px;
}
.surg-grid th,
.surg-grid td {
  border: 1px solid #dbe4f0;
  padding: 3px 3px;
  text-align: center;
}
.surg-loc-head,
.surg-loc-name {
  text-align: left;
  min-width: 140px;
  max-width: 180px;
}
.surg-loc-name-inner {
  display: flex;
  align-items: center;
  gap: 4px;
}
.surg-drag-handle {
  color: #64748b;
  cursor: grab;
}
.surg-loc-label {
  font-weight: 700;
  color: #1e293b;
}
.surg-edit-loc-btn,
.surg-del-loc-btn {
  padding: 1px 5px;
  font-size: 10px;
}
.surg-code-list { margin-top: 2px; }
.surg-code-badge {
  display: inline-block;
  margin: 1px 2px 1px 0;
  padding: 0px 4px;
  border-radius: 999px;
  border: 1px solid #bfdbfe;
  background: #eff6ff;
  color: #1d4ed8;
  font-size: 9px;
  font-weight: 700;
}
.surg-cell { cursor: pointer; min-width: 46px; }
.surg-cell:hover { filter: brightness(0.96); }
.surg-cell-act,
.surg-cell-code {
  display: block;
  line-height: 1.15;
}
.surg-cell-act { font-size: 10px; font-weight: 700; }
.surg-cell-code { color: #64748b; font-size: 9px; }
.surg-cell-empty { color: #9ca3af; }
/* Priority cell background colours */
.surg-pri-e   { background: #fee2e2; }
.surg-pri-m   { background: #fef9c3; }
.surg-pri-l   { background: #dcfce7; }
/* Hide the old dot indicator */
.surg-pri-dot { display: none; }
.surg-pri-dot-e { background: #dc2626; }
.surg-pri-dot-m { background: #f59e0b; }
.surg-pri-dot-l { background: #16a34a; }

.surg-copy-bar,
.surg-loc-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
  align-items: center;
}
.surg-copy-label { font-size: 12px; color: #475569; align-self: center; }
.surg-copy-btn,
.surg-add-loc-btn { font-size: 12px; padding: 6px 12px; line-height: 1.4; }

.surg-tpl-right {
  border: 1px solid #dbe4f0;
  border-radius: 10px;
  background: #fbfdff;
  padding: 8px;
  min-height: 0;
  height: 100%;
  overflow: auto;
  box-sizing: border-box;
}
.surg-cov-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
}
.surg-cov-head h3 { margin: 0; font-size: 14px; }
.surg-cov-hint { font-size: 11px; color: #64748b; }
.surg-cov-body { display: grid; gap: 8px; }
.surg-cov-day {
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  background: #fff;
  padding: 8px;
}
.surg-cov-day-name { font-size: 12px; font-weight: 700; margin-bottom: 4px; color: #334155; }
.surg-cov-sess { font-size: 11px; color: #334155; margin-bottom: 3px; }
.surg-cov-sess-label { font-weight: 700; margin-right: 4px; }
.surg-cov-pri { font-weight: 700; }
.surg-cov-pri-e { color: #991b1b; }
.surg-cov-pri-m { color: #92400e; }
.surg-cov-pri-l { color: #166534; }
.surg-cov-code {
  display: inline-block;
  padding: 1px 5px;
  margin: 0 3px 2px 0;
  border-radius: 999px;
  font-size: 10px;
  background: #eef2ff;
  color: #3730a3;
}
.surg-cov-empty { color: #64748b; font-size: 12px; }

.surg-cell-editor {
  border: 1px solid #cfdced;
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 8px 24px rgba(15, 23, 42, .12);
  padding: 10px;
}
.surg-add-loc-panel {
  position: fixed;
  z-index: 9100;
  max-height: 80vh;
  overflow-y: auto;
}
.surg-ce-title { font-weight: 700; color: #1e293b; }
.surg-ce-row { display: grid; gap: 6px; margin-bottom: 8px; }
.surg-ce-prirow,
.surg-ce-btnrow { display: flex; gap: 6px; flex-wrap: wrap; }
.surg-ce-select,
.surg-ce-input { width: 100%; }
.surg-ce-btn,
.surg-ce-save,
.surg-ce-clear { font-size: 12px; padding: 4px 10px; }
.surg-ce-btn.active { background: #e8f3fb; color: #114b73; border-color: #a9c7df; }
.surg-ce-hint { font-size: 11px; color: #64748b; margin-bottom: 8px; }

/* ── Menu Customisation Settings ─────────────────────── */
.menu-custom-panel .panel-head {
  align-items: baseline;
  margin-bottom: 0;
}
.menu-custom-panel .panel-head h2 { letter-spacing: -.01em; }
.menu-custom-panel .panel-head-sub {
  font-size: 12px;
  color: #94a3b8;
  font-weight: 500;
  margin-left: 8px;
}
.menu-custom-body {
  margin-top: 10px;
  padding: 14px;
  border-radius: 10px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
}
.mc-roster-title {
  font-size: 15px;
  font-weight: 700;
  color: #1e293b;
  margin: 20px 0 8px;
  padding-bottom: 4px;
  border-bottom: 2px solid #e2e8f0;
}
.mc-roster-title-sep { margin-top: 22px; }
.menu-custom-layout {
  display: grid;
  grid-template-columns: repeat(2, minmax(260px, 1fr));
  gap: 10px;
  align-items: stretch;
}
.menu-custom-section {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  padding: 10px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
  transition: border-color .16s ease, box-shadow .16s ease;
}
.menu-custom-section:hover {
  border-color: #cbd5e1;
  box-shadow: 0 3px 10px rgba(15, 23, 42, .08);
}
.menu-custom-preview-section { grid-column: 1 / -1; }
.menu-custom-hint { color: #475569; font-size: 13px; margin: 0 0 14px; }
.menu-custom-section-title { font-size: 14px; font-weight: 650; margin: 0 0 6px; color: #1f2937; }
.menu-custom-sub { color: #64748b; font-size: 12px; line-height: 1.35; margin: 0 0 10px; }

.mc-chips { display: flex; flex-wrap: wrap; gap: 5px; min-height: 28px; margin-bottom: 8px; }
.mc-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: #eff6ff;
  border: 1px solid #93c5fd;
  color: #1d4ed8;
  border-radius: 999px;
  padding: 2px 7px 2px 9px;
  font-size: 11px;
  font-weight: 500;
}
.mc-chip-draggable { cursor: grab; user-select: none; }
.mc-chip-draggable:active { cursor: grabbing; }
.mc-chip-dragging { opacity: 0.45; }
.mc-chip-drop-target { outline: 2px dashed #3b82f6; outline-offset: 1px; }
.mc-chip-del {
  background: none;
  border: none;
  cursor: pointer;
  color: #93c5fd;
  padding: 0 1px;
  font-size: 12px;
  line-height: 1;
}
.mc-chip-del:hover { color: #ef4444; }
.mc-chip-locked { background: #f1f5f9; border-color: #cbd5e1; color: #475569; }
.mc-lock { font-size: 10px; opacity: 0.7; margin-right: 2px; }
.mc-empty-hint { font-size: 12px; color: #9ca3af; font-style: italic; }

.menu-custom-adder { display: flex; align-items: center; gap: 6px; margin-top: 2px; }
.mc-add-input { flex: 1; min-width: 110px; max-width: 160px; padding: 4px 7px; border: 1px solid #d4d4d8; border-radius: 5px; font-size: 11px; }
.mc-add-btn { padding: 4px 8px; font-size: 11px; background: #eff6ff; border: 1px solid #93c5fd; color: #1d4ed8; border-radius: 5px; cursor: pointer; }
.mc-add-btn:hover { background: #dbeafe; }
.mc-restore-btn { background: none; border: 1px solid #e2e8f0; border-radius: 4px; padding: 2px 7px; font-size: 10px; color: #64748b; cursor: pointer; margin-top: 8px; }
.mc-restore-btn:hover { background: #f1f5f9; }
.mc-add-input:focus-visible,
.mc-add-btn:focus-visible,
.mc-restore-btn:focus-visible,
.mc-chip-del:focus-visible {
  outline: 2px solid #90c4e4;
  outline-offset: 1px;
}

.mc-order-strip { margin-bottom: 10px; padding-bottom: 8px; border-bottom: 1px dashed #e2e8f0; }
.mprev-box {
  background: #fff;
  border: 1px solid #d4d4d8;
  border-radius: 8px;
  padding: 5px;
  width: min(100%, 320px);
  min-height: 190px;
  font-size: 12px;
  box-shadow: 0 2px 8px rgba(0,0,0,.08);
}
.mprev-label { padding: 4px 10px 2px; font-size: 10px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase; color: #94a3b8; }
.mprev-item { padding: 5px 10px; border-radius: 4px; }
.mprev-item:hover { background: #f1f5f9; }
.mprev-clear { color: #6b7280; font-style: italic; }
.mprev-faded { color: #94a3b8; }
.mprev-disabled { color: #d1d5db; }
.mprev-has-sub { cursor: pointer; display: flex; align-items: center; justify-content: space-between; user-select: none; }
.mprev-arrow { margin-left: 4px; color: #94a3b8; font-size: 10px; }
.mprev-sub-panel { display: none; }
.mprev-sub-panel.mprev-sub-open { display: block; }
.mprev-sub-item { padding: 4px 10px 4px 22px; border-radius: 4px; color: #374151; }
.mprev-sub-item:hover { background: #f1f5f9; }

/* ── Year Manager Settings ───────────────────────────── */
.year-mgr-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  align-items: start;
}
.year-mgr-card {
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  padding: 10px;
  background: #fff;
  box-shadow: 0 1px 3px rgba(15, 23, 42, .05);
}
.year-mgr-card:last-child { grid-column: 1 / -1; }
.year-mgr-title {
  margin: 0 0 8px;
  font-size: 14px;
  color: #1e293b;
}
.year-mgr-head-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
}
.year-mgr-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin-bottom: 8px;
}
.year-mgr-label { font-size: 12px; color: #475569; }
.year-mgr-meta {
  margin: 0 0 4px;
  font-size: 12px;
  color: #64748b;
}
.ym-bootstrap-year { width: 110px; }
.ym-check-row {
  display: flex;
  gap: 6px;
  align-items: center;
  font-size: 12px;
  color: #475569;
  margin-top: 6px;
}
.ym-archive-btn {
  background: #fee2e2;
  color: #991b1b;
  border-color: #fca5a5;
}
.year-mgr-table-wrap {
  max-height: 240px;
  overflow: auto;
}
.year-mgr-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}
.year-mgr-table th,
.year-mgr-table td {
  text-align: left;
  padding: 6px;
  border-bottom: 1px solid #e2e8f0;
}
.year-mgr-table thead th {
  position: sticky;
  top: 0;
  background: #f8fbff;
  z-index: 1;
}
.ym-empty-row { color: #64748b; }

/* ── Details/summary ─────────────────────────────────── */
details > summary {
  cursor: pointer;
  padding: 8px 10px;
  background: var(--bg);
  border-radius: 6px;
  font-size: 13px;
  font-weight: 600;
  color: var(--accent);
  user-select: none;
}
details[open] > summary { margin-bottom: 10px; }

/* ── Responsive ──────────────────────────────────────── */
@media (max-width: 900px) {
  .topbar { flex-direction: column; align-items: flex-start; }
  .week-nav { width: 100%; }
  .split  { grid-template-columns: 1fr; }
  .loc-groups-editor { grid-template-columns: 1fr; }
  #locGroupsContainer,
  #locGroupForm { overflow: visible; }
  .person-form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .person-form-grid > label.person-inline-third,
  .person-form-grid > label.person-inline-half { grid-column: 1 / -1; }
  .person-locgroups-row .loc-group-checks { grid-template-columns: 1fr; }
  .tpl-layout { grid-template-columns: 1fr; }
  #stab-smo-template .tpl-layout { height: auto; }
  .tpl-toggle-btn { display: none; }
  .tpl-left,
  .tpl-right-panel,
  .tpl-right-inner,
  .tpl-right-body { min-height: initial; height: auto; overflow: visible; }
  .surg-tpl-layout { grid-template-columns: 1fr; }
  #stab-req-template .surg-tpl-layout { height: auto; }
  .surg-tpl-left { grid-template-rows: auto; display: block; }
  .surg-tpl-left .table-wrap { height: auto; max-height: 60vh; }
  .surg-tpl-right { height: auto; overflow: visible; }
  .year-mgr-grid { grid-template-columns: 1fr; }
  .menu-custom-layout { grid-template-columns: 1fr; }
  .menu-custom-preview-section { grid-column: 1; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   STATS TAB
   ═════════════════════════════════════════════════════════════════════════ */

#view-stats { padding: 0; }
.stats-wrap { max-width: none; margin: 0; padding: 20px 28px 48px; display: flex; flex-direction: column; gap: 14px; }

/* ── Builder ─────────────────────────────────────────────────────────────── */
.stats-builder { background: linear-gradient(160deg, #f0f6ff 0%, #e8f2fe 100%); border: 1px solid rgba(147,197,253,0.50); border-top: 4px solid #1e3a5f; border-radius: 14px; padding: 20px 24px 18px; display: grid; grid-template-columns: minmax(0,1.4fr) minmax(0,1fr); column-gap: 20px; row-gap: 16px; align-items: start; box-shadow: 0 6px 28px rgba(12,29,48,0.13), 0 1px 4px rgba(12,29,48,0.07); }
/* Full-width rows */
.stats-builder > .stats-builder-top,
.stats-builder > .stats-section--people,
.stats-builder > .stats-builder-footer { grid-column: 1 / -1; }
/* Sacrifice mode: config bar spans full width (no code-group neighbour) */
.stats-builder--sacrifice > .stats-config-bar { grid-column: 1 / -1; }

/* Mode bar */
.stats-builder-top { display: flex; align-items: center; border-bottom: 1px solid rgba(147,197,253,0.40); padding-bottom: 14px; }

/* Segmented pill control */
.stats-seg-pills { display: inline-flex; border-radius: 9px; border: 1.5px solid rgba(96,165,250,0.45); overflow: hidden; background: rgba(255,255,255,0.08); }
.stats-seg-pill { font-size: 12px; padding: 5px 14px; border: none; border-right: 1.5px solid rgba(96,165,250,0.30); background: transparent; color: #bfdbfe; cursor: pointer; font-weight: 500; transition: background 0.12s, color 0.12s; white-space: nowrap; line-height: 1.5; }
.stats-seg-pill:last-child { border-right: none; }
.stats-seg-pill:hover:not(.active) { background: rgba(255,255,255,0.12); color: #e0f2fe; }
.stats-seg-pill.active { background: #2563eb; color: #fff; font-weight: 600; box-shadow: inset 0 1px 0 rgba(255,255,255,0.20); }

/* Mode seg — slightly larger, lighter since it sits on white */
.stats-mode-seg { border-radius: 10px; border-width: 1.5px; border-color: rgba(147,197,253,0.55); background: rgba(219,234,254,0.35); }
.stats-mode-seg .stats-seg-pill { font-size: 13px; padding: 6px 24px; font-weight: 500; letter-spacing: 0.01em; color: #1e3a5f; border-right-color: rgba(147,197,253,0.40); }
.stats-mode-seg .stats-seg-pill:hover:not(.active) { background: rgba(219,234,254,0.60); color: #1e3a5f; }
.stats-mode-seg .stats-seg-pill.active { background: #1d4ed8; color: #fff; font-weight: 700; box-shadow: none; }

/* Section with sub-header */
.stats-section { display: flex; flex-direction: column; gap: 8px; }
.stats-section-hdr { display: flex; align-items: center; gap: 8px; }
.stats-section-label { font-size: 10px; font-weight: 700; color: #4a6d8c; text-transform: uppercase; letter-spacing: 0.07em; flex: 1; }
.stats-section--people .stats-section-hdr { border-bottom: none; padding-bottom: 0; margin-bottom: -4px; }
.stats-section--people { background: rgba(219,234,254,0.22); border: 1px solid rgba(147,197,253,0.38); border-radius: 10px; padding: 12px 14px; gap: 10px; }

/* Config bar (Date / Period / Show) */
.stats-config-bar { display: flex; flex-direction: column; gap: 12px; background: linear-gradient(160deg, rgba(22,44,80,0.72) 0%, rgba(18,36,68,0.78) 100%); border: 1px solid rgba(96,165,250,0.30); border-radius: 10px; padding: 14px 16px; align-self: stretch; backdrop-filter: blur(14px) saturate(150%); -webkit-backdrop-filter: blur(14px) saturate(150%); }
.stats-config-item { display: flex; flex-direction: column; gap: 5px; }
.stats-config-lbl { font-size: 10px; font-weight: 700; color: #93c5fd; text-transform: uppercase; letter-spacing: 0.06em; }
.stats-config-val { display: flex; align-items: flex-start; gap: 6px; flex-wrap: wrap; }
.stats-config-sep { display: none; }

/* Group pills row (code groups) */
.stats-builder-row { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.stats-builder-row--groups { align-items: flex-start; }
.stats-codes-bar { padding: 2px 0; min-height: 20px; display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.stats-code-badge { display: inline-block; background: #eef2ff; color: #4338ca; border-radius: 5px; padding: 2px 7px; font-size: 11px; font-family: monospace; font-weight: 500; letter-spacing: 0.02em; }
.stats-codes-bar .muted { font-size: 11px; color: #94a3b8; font-style: italic; }

.stats-group-pills-row { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.stats-group-pill { font-size: 12px; padding: 5px 14px; border-radius: 7px; border: 1.5px solid rgba(147,197,253,0.50); background: rgba(239,246,255,0.80); color: #1e3a5f; cursor: pointer; font-weight: 500; transition: all 0.15s; letter-spacing: 0.01em; }
.stats-group-pill:hover { border-color: #60a5fa; color: #1d4ed8; background: rgba(219,234,254,0.80); }
.stats-group-pill.active { background: #1d4ed8; border-color: #1d4ed8; color: #fff; font-weight: 600; box-shadow: 0 2px 6px rgba(29,78,216,0.25); }
.stats-edit-groups-btn { font-size: 14px; padding: 4px 8px; background: rgba(219,234,254,0.35); border: 1px solid rgba(147,197,253,0.50); cursor: pointer; color: #4a6580; border-radius: 7px; transition: color 0.15s, border-color 0.15s, background 0.15s; }
.stats-edit-groups-btn:hover { color: #1e3a5f; border-color: #60a5fa; background: rgba(219,234,254,0.65); }

.stats-select { font-size: 13px; padding: 4px 8px; border: 1px solid rgba(96,165,250,0.40); border-radius: 7px; background: rgba(255,255,255,0.10); color: #e0f2fe; }
.stats-select option { background: #1e3a5f; color: #e0f2fe; }
.stats-date-input { font-size: 12px; padding: 2px 6px; border: 1px solid rgba(96,165,250,0.40); border-radius: 6px; background: rgba(255,255,255,0.10); color: #e0f2fe; height: 27px; }
.stats-date-sep { font-size: 12px; color: #93c5fd; margin: 0 3px; }
.stats-date-sep { font-size: 12px; color: #94a3b8; margin: 0 3px; }

/* (old .stats-ctrl-* / .stats-radio-* removed — superseded by .stats-seg-pills) */

/* People */
.stats-person-list { display: flex; flex-wrap: wrap; gap: 3px 0; flex: 1; }
.stats-person-check {
  font-size: 12.5px;
  color: #1e3a5f;
  display: flex;
  align-items: center;
  gap: 5px;
  cursor: pointer;
  padding: 3px 10px 3px 0;
  border-radius: 5px;
  transition: background 0.1s;
  min-width: 130px;
}
.stats-person-check:hover { background: rgba(219,234,254,0.45); }
.stats-person-check input[type="checkbox"] { accent-color: #1d4ed8; width: 13px; height: 13px; flex-shrink: 0; cursor: pointer; }
.stats-person-groups { display: flex; flex-wrap: wrap; gap: 10px; flex: 1; }
.stats-person-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 200px;
  flex: 1;
  background: rgba(255,255,255,0.72);
  border: 1px solid rgba(147,197,253,0.45);
  border-top: 2px solid #1e3a5f;
  border-radius: 8px;
  padding: 10px 12px 10px;
  box-shadow: 0 2px 8px rgba(12,29,48,0.06);
}
.stats-person-group-hdr {
  display: flex;
  align-items: center;
  gap: 4px;
  border-bottom: 1px solid rgba(147,197,253,0.30);
  padding-bottom: 6px;
  margin-bottom: 2px;
}
.stats-person-group-name { font-size: 10px; font-weight: 800; color: #1e3a5f; text-transform: uppercase; letter-spacing: 0.08em; flex: 1; }
.stats-people-btns { display: flex; gap: 4px; margin-left: auto; align-items: center; }

/* Footer */
.stats-builder-footer { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; border-top: 1px solid rgba(147,197,253,0.35); padding-top: 14px; margin-top: 2px; }
.stats-run-btn { background: linear-gradient(135deg, #1d4ed8 0%, #2563eb 100%); color: #fff; border: none; border-radius: 9px; padding: 9px 26px; font-size: 13px; font-weight: 600; cursor: pointer; transition: all 0.15s; letter-spacing: 0.01em; box-shadow: 0 2px 8px rgba(29,78,216,0.3); }
.stats-run-btn:hover { background: linear-gradient(135deg, #1e40af 0%, #1d4ed8 100%); box-shadow: 0 4px 12px rgba(29,78,216,0.4); transform: translateY(-1px); }
.stats-run-btn:active { transform: translateY(0); box-shadow: 0 2px 4px rgba(29,78,216,0.28); }
.stats-avail-toggle-btn { background: rgba(219,234,254,0.40); color: #1e3a5f; border: 1px solid rgba(147,197,253,0.50); border-radius: 8px; padding: 7px 14px; font-size: 12px; cursor: pointer; transition: background 0.12s, border-color 0.12s; }
.stats-avail-toggle-btn:hover { background: rgba(219,234,254,0.70); border-color: #60a5fa; }
.stats-copy-btn { background: #f0fdf4; color: #166534; border: 1px solid #bbf7d0; border-radius: 8px; padding: 7px 14px; font-size: 12px; font-weight: 600; cursor: pointer; transition: background 0.12s; }
.stats-copy-btn:hover { background: #dcfce7; }
.stats-text-btn { background: none; border: none; color: #3b82f6; font-size: 12px; cursor: pointer; padding: 2px 6px; border-radius: 4px; }
.stats-text-btn:hover { background: #eff6ff; }
.muted { color: #94a3b8; font-style: italic; }

/* ── Availability panel ──────────────────────────────────────────────────── */
.stats-avail-panel { background: #ffffff; border: 1px solid rgba(147,197,253,0.40); border-top: 3px solid #1e3a5f; border-radius: 10px; padding: 16px 18px; display: flex; flex-direction: column; gap: 10px; box-shadow: 0 2px 12px rgba(12,29,48,0.08); }
.stats-avail-header { font-size: 13px; font-weight: 700; color: #0f172a; }
.avail-always-off code { background: #f1f5f9; padding: 2px 6px; border-radius: 4px; font-size: 11px; color: #475569; }
.avail-code-grid { display: flex; flex-wrap: wrap; gap: 6px 16px; }
.avail-code-check { display: flex; align-items: center; gap: 5px; font-size: 12px; color: #334155; cursor: pointer; }
.avail-code-check code { background: #e2e8f0; border-radius: 4px; padding: 1px 5px; font-size: 11px; color: #1e293b; }
.avail-custom-badge { font-size: 10px; background: #dbeafe; color: #1e40af; border-radius: 10px; padding: 0 5px; }
.avail-del-custom { background: none; border: none; color: #ef4444; font-size: 13px; cursor: pointer; padding: 0 2px; line-height: 1; }
.avail-add-row { display: flex; gap: 8px; align-items: center; }
.avail-custom-input { font-size: 12px; padding: 4px 8px; border: 1px solid #cbd5e1; border-radius: 6px; width: 140px; }
.stats-avail-note { font-size: 11px; }

/* ── Group editor ────────────────────────────────────────────────────────── */
.stats-group-editor { background: #ffffff; border: 1px solid rgba(147,197,253,0.40); border-top: 3px solid #1e3a5f; border-radius: 10px; padding: 16px 18px; box-shadow: 0 2px 12px rgba(12,29,48,0.08); }
.ge-table { width: 100%; border-collapse: collapse; font-size: 12px; margin-top: 10px; }
.ge-table th { text-align: left; padding: 5px 8px; font-size: 10px; color: #4a6d8c; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; border-bottom: 1px solid rgba(147,197,253,0.40); }
.ge-table td { padding: 6px 8px; vertical-align: middle; border-bottom: 1px solid rgba(147,197,253,0.25); }
.ge-name { font-weight: 600; color: #1e293b; white-space: nowrap; }
.ge-codes code { background: #eef2ff; color: #4338ca; border-radius: 4px; padding: 1px 5px; font-size: 11px; margin: 1px; display: inline-block; }
.ge-actions { white-space: nowrap; }
.ge-name-input, .ge-codes-input { font-size: 12px; padding: 4px 7px; border: 1px solid #cbd5e1; border-radius: 6px; }
.ge-name-input { width: 140px; }
.ge-codes-input { width: 260px; }
.ge-add-row { margin-top: 10px; }

/* ── Output wrapper ──────────────────────────────────────────────────────── */
.stats-output { display: flex; flex-direction: column; gap: 18px; }
.stats-empty { color: #94a3b8; font-size: 13px; padding: 48px 0; text-align: center; }
.stats-loading { color: #64748b; font-size: 13px; padding: 24px 0; text-align: center; font-style: italic; }
.stats-output-header { display: flex; align-items: baseline; gap: 12px; border-bottom: 2px solid #1e3a5f; padding-bottom: 10px; }
.stats-output-title { font-size: 16px; font-weight: 700; color: #0f172a; letter-spacing: -0.01em; }
.stats-output-meta { font-size: 12px; color: #64748b; margin-left: auto; }

/* ── Summary cards ───────────────────────────────────────────────────────── */
.stats-summary-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.stats-card { background: linear-gradient(150deg, #ffffff 0%, #eef5ff 100%); border: 1px solid rgba(147,197,253,0.45); border-top: 3px solid #475569; border-radius: 14px; padding: 16px 18px 14px; display: flex; flex-direction: column; gap: 3px; box-shadow: 0 4px 16px rgba(12,29,48,0.10); }
.stats-card--high { border-top-color: #16a34a; border-color: rgba(134,239,172,0.50); background: linear-gradient(150deg, #f0fdf4 0%, #dcfce7 100%); }
.stats-card--low  { border-top-color: #dc2626; border-color: rgba(252,165,165,0.50); background: linear-gradient(150deg, #fff1f2 0%, #fee2e2 100%); }
.stats-card--var  { border-top-color: #d97706; border-color: rgba(253,211,77,0.50); background: linear-gradient(150deg, #fffbeb 0%, #fef3c7 100%); }
.stats-card-value { font-size: 26px; font-weight: 800; color: #0f172a; line-height: 1; letter-spacing: -0.02em; margin-top: 4px; }
.stats-card-label { font-size: 10px; font-weight: 700; color: #64748b; text-transform: uppercase; letter-spacing: 0.07em; }
.stats-card-sub   { font-size: 12px; color: #475569; margin-top: 3px; }
.stats-card--high .stats-card-value { color: #16a34a; }
.stats-card--low  .stats-card-value { color: #dc2626; }
.stats-card--var  .stats-card-value { color: #d97706; }

/* ── Results 2-column grid ───────────────────────────────────────────────── */
.stats-results-grid { display: grid; grid-template-columns: minmax(300px, 38%) minmax(0, 1fr); gap: 20px; align-items: start; }
.stats-chart-col { position: sticky; top: 8px; }
.stats-table-col { min-width: 0; }
.stats-sort-hint { font-size: 11px; color: #94a3b8; margin: 6px 0 0; text-align: right; }

/* ── Sortable table ──────────────────────────────────────────────────────── */
.stats-table-wrap { overflow-x: auto; border: 1px solid rgba(147,197,253,0.40); border-top: 3px solid #1e3a5f; border-radius: 10px; background: #ffffff; box-shadow: 0 4px 16px rgba(12,29,48,0.10); }
.stats-table { border-collapse: collapse; font-size: 12px; width: 100%; }
.stats-table th { background: linear-gradient(180deg, #1e3a5f 0%, #1a3357 100%); color: #dbeafe; padding: 8px 12px; font-size: 11px; font-weight: 600; text-align: center; white-space: nowrap; letter-spacing: 0.02em; }
.stats-table th.stats-name-col { text-align: left; }
.stats-sort-hdr { cursor: pointer; user-select: none; transition: background 0.12s; }
.stats-sort-hdr:hover { background: linear-gradient(180deg, #2a4f7e 0%, #264876 100%); }
.stats-sort-hdr.sorted { background: linear-gradient(180deg, #1e50a0 0%, #1b4a96 100%); }
.sort-ind { opacity: 0.4; font-size: 10px; margin-left: 3px; }
.sort-ind.active { opacity: 1; }

.stats-table td { padding: 0; border-bottom: 1px solid rgba(220,235,255,0.55); text-align: center; }
.stats-table td.stats-name-col { padding: 5px 12px; text-align: left; font-weight: 600; color: #1e293b; white-space: nowrap; }
.stats-table tbody tr:nth-child(even) td { background: rgba(235,245,255,0.30); }
.stats-table tbody tr:hover td { background: #eff6ff !important; }
.stats-table tbody tr:hover .stats-cell-inner { background: transparent; }
.stats-total-row td { background: rgba(219,234,254,0.38) !important; font-weight: 700; border-top: 2px solid rgba(147,197,253,0.55); }

/* ── Heat-fill table cells ───────────────────────────────────────────────── */
.stats-cell { position: relative; overflow: hidden; min-width: 70px; }
.stats-cell--nodata, .stats-cell--empty { color: #cbd5e1; padding: 6px; min-width: 50px; }
.stats-cell-inner { position: relative; min-height: 32px; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 3px 6px; }
.stats-cell-bar { position: absolute; left: 0; top: 0; height: 100%; border-radius: 0 2px 2px 0; z-index: 0; transition: width 0.3s ease; }
.stats-cell-text { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 1px; }
.stats-pct { font-size: 12px; font-weight: 700; color: #1e293b; }
.stats-count { font-size: 10px; color: #64748b; }
.stats-avail-denom { color: #94a3b8; }
.stats-cell--total .stats-pct { color: #1e293b; }

/* ── Chart ───────────────────────────────────────────────────────────────── */
.stats-chart-wrap { border: 1px solid rgba(147,197,253,0.40); border-top: 3px solid #1e3a5f; border-radius: 10px; background: linear-gradient(160deg, #f0f6ff 0%, #e8f2fe 100%); padding: 14px 12px 10px; box-shadow: 0 4px 16px rgba(12,29,48,0.10); }
.stats-chart, .stats-chart-svg { display: block; width: 100%; max-width: 100%; font-family: inherit; }
.chart-person-label { font-size: 10.5px; fill: #334155; font-weight: 500; }
.chart-legend-label { font-size: 10px; fill: #475569; }
.chart-bar-val { font-size: 9.5px; fill: #475569; }
.chart-bar-val-inside { font-size: 9px; fill: #fff; font-weight: 600; }
.chart-axis-label { font-size: 9.5px; fill: #94a3b8; }

/* ── Legacy classes kept for safety ─────────────────────────────────────── */
.stats-builder-section { display: flex; flex-direction: column; gap: 6px; }
.stats-step-label { font-size: 11px; font-weight: 700; color: #64748b; text-transform: uppercase; letter-spacing: 0.06em; }
.heat-high { color: #166534; }
.heat-mid  { color: #854d0e; }
.heat-low  { color: #1e3a8a; }

@media (max-width: 900px) {
  .stats-results-grid { grid-template-columns: 1fr; }
  .stats-chart-col { position: static; }
  .stats-summary-cards { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 560px) {
  .stats-summary-cards { grid-template-columns: 1fr 1fr; }
  .stats-builder-row--controls { flex-direction: column; align-items: flex-start; gap: 8px; }
  .stats-ctrl-sep { display: none; }
}

@media print {
  .stats-builder, .stats-avail-panel, .stats-group-editor, .stats-sort-hint { display: none !important; }
  .stats-chart-wrap { page-break-inside: avoid; }
  .stats-table-wrap { overflow: visible; border: none; }
  .stats-results-grid { grid-template-columns: 1fr; }
}

/* ── Stats mode toggle ───────────────────────────────────────────────────── */
/* (legacy mode-pill rules superseded by .stats-seg-pill / .stats-mode-seg) */

/* ── Oncall day pills ────────────────────────────────────────────────────── */
.stats-section--oncall { gap: 8px; }
.oncall-ph-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 4px; }
.oncall-day-pills { display: flex; gap: 4px; flex-wrap: wrap; padding-left: 2px; }
.oncall-day-pill { font-size: 11px; padding: 3px 10px; border-radius: 6px; border: 1.5px solid rgba(147,197,253,0.50); background: rgba(239,246,255,0.75); color: #1e3a5f; cursor: pointer; font-weight: 500; transition: all 0.12s; }
.oncall-day-pill:hover { border-color: #60a5fa; color: #1d4ed8; background: rgba(219,234,254,0.70); }
.oncall-day-pill.active { background: #dbeafe; border-color: #3b82f6; color: #1d4ed8; font-weight: 600; }
.oncall-day-quick { display: flex; gap: 4px; align-items: center; margin-left: auto; }
/* .oncall-ph-ctrl removed — superseded by .oncall-ph-row */
.oncall-ph-list { display: flex; flex-wrap: wrap; gap: 4px 12px; padding: 4px 0 0; width: 100%; }
.oncall-ph-check { display: flex; align-items: center; gap: 4px; font-size: 12px; color: #334155; cursor: pointer; white-space: nowrap; }

/* ── Oncall table cells ──────────────────────────────────────────────────── */
.stats-sort-th { cursor: pointer; user-select: none; transition: background 0.12s; }
.stats-sort-th:hover { background: linear-gradient(180deg, #2a4f7e 0%, #264876 100%); }
.oncall-count-cell { padding: 6px 14px; font-size: 13px; font-variant-numeric: tabular-nums; color: #334155; }
.oncall-total-cell { background: #f1f5f9; border-left: 1px solid #e2e8f0; }

/* ── Oncall chart ────────────────────────────────────────────────────────── */
.oncall-chart-wrap { min-width: 280px; }
.stats-chart-label { font-size: 10.5px; fill: #334155; font-weight: 500; }
.stats-chart-val   { font-size: 9.5px;  fill: #475569; }

/* ═══════════════════════════════════════════════════════════════════════════
   AUTH OVERLAYS (login + change-password)
   ═══════════════════════════════════════════════════════════════════════════ */
.auth-overlay {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  overflow: hidden;
  background: linear-gradient(135deg, #080f1e 0%, #0e1f3d 40%, #132a55 70%, #0a1830 100%);
}

/* Animated glow orbs behind the card */
.auth-overlay::before {
  content: '';
  position: absolute;
  width: 560px; height: 560px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(30,111,168,0.38) 0%, transparent 68%);
  top: -220px; left: -180px;
  animation: auth-orb-a 14s ease-in-out infinite alternate;
  pointer-events: none;
}
.auth-overlay::after {
  content: '';
  position: absolute;
  width: 440px; height: 440px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(48,160,210,0.22) 0%, transparent 68%);
  bottom: -180px; right: -120px;
  animation: auth-orb-b 18s ease-in-out infinite alternate;
  pointer-events: none;
}
@keyframes auth-orb-a {
  from { transform: translate(0,0) scale(1); }
  to   { transform: translate(34px,22px) scale(1.12); }
}
@keyframes auth-orb-b {
  from { transform: translate(0,0) scale(1); }
  to   { transform: translate(-24px,32px) scale(1.08); }
}

/* Glass card */
.auth-card {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 400px;
  border-radius: 24px;
  background: linear-gradient(145deg, rgba(255,255,255,0.13) 0%, rgba(255,255,255,0.07) 100%);
  border: 1px solid rgba(255,255,255,0.18);
  backdrop-filter: blur(36px) saturate(180%);
  -webkit-backdrop-filter: blur(36px) saturate(180%);
  box-shadow: 0 32px 72px rgba(0,0,0,0.48), 0 0 0 1px rgba(255,255,255,0.05) inset, inset 0 1px 0 rgba(255,255,255,0.22);
  overflow: hidden;
}

/* Branding header */
.auth-card-header {
  padding: 36px 32px 20px;
  text-align: center;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.auth-logo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 54px; height: 54px;
  border-radius: 16px;
  background: linear-gradient(135deg, #1e6fa8 0%, #38b0e0 100%);
  box-shadow: 0 8px 24px rgba(30,111,168,0.50), inset 0 1px 0 rgba(255,255,255,0.28);
  margin: 0 auto 18px;
}
.auth-logo svg { width: 28px; height: 28px; color: #fff; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.auth-card-title    { margin: 0 0 6px; font-size: 22px; font-weight: 800; letter-spacing: -0.4px; color: #f0f7ff; }
.auth-card-subtitle { margin: 0; font-size: 13px; color: rgba(190,215,242,0.78); }

/* Form body */
.auth-form     { padding: 24px 32px 32px; display: flex; flex-direction: column; gap: 16px; }
.auth-label    { display: flex; flex-direction: column; gap: 6px; font-size: 13px; font-weight: 600; color: rgba(210,230,250,0.88); }
.auth-hint     { font-weight: 400; color: rgba(170,198,228,0.65); font-size: 11px; }
.auth-pw-wrap  { position: relative; display: flex; align-items: center; }
.auth-pw-wrap .auth-input { flex: 1; padding-right: 42px; }
.auth-pw-eye {
  position: absolute;
  right: 12px;
  background: none;
  border: none;
  padding: 2px;
  cursor: pointer;
  color: rgba(150,190,225,0.6);
  display: flex;
  align-items: center;
  transition: color .15s;
}
.auth-pw-eye:hover { color: rgba(210,238,255,0.95); }
.eye-icon { width: 18px; height: 18px; display: block; }
.auth-input {
  padding: 11px 14px;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.16);
  border-radius: 10px;
  font-size: 14px;
  color: #f0f7ff;
  outline: none;
  width: 100%;
  transition: border-color .15s, background .15s, box-shadow .15s;
  font-family: inherit;
}
.auth-input::placeholder { color: rgba(150,185,220,0.45); }
.auth-input:focus {
  border-color: rgba(60,160,230,0.65);
  background: rgba(255,255,255,0.12);
  box-shadow: 0 0 0 3px rgba(30,111,168,0.28);
}
.auth-check-row { display: flex; align-items: center; gap: 8px; font-size: 13px; color: rgba(180,208,236,0.82); cursor: pointer; }
.auth-check-row input { width: 15px; height: 15px; accent-color: #4ab0f0; }
.auth-error {
  font-size: 12.5px;
  color: #fca5a5;
  background: rgba(220,38,38,0.15);
  border: 1px solid rgba(248,113,113,0.32);
  border-radius: 8px;
  padding: 8px 12px;
  display: none;
}
.auth-error:not(:empty) { display: block; }
.auth-submit-btn {
  padding: 12px;
  background: linear-gradient(135deg, #1e6fa8 0%, #2a90d8 100%);
  color: #fff;
  border: none;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: opacity .15s, transform .1s, box-shadow .15s;
  margin-top: 2px;
  font-family: inherit;
  box-shadow: 0 4px 18px rgba(30,111,168,0.45), inset 0 1px 0 rgba(255,255,255,0.22);
  letter-spacing: 0.01em;
}
.auth-submit-btn:hover  { opacity: 0.92; box-shadow: 0 6px 22px rgba(30,111,168,0.55), inset 0 1px 0 rgba(255,255,255,0.22); }
.auth-submit-btn:active { transform: scale(.98); }
.auth-submit-btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }

/* ═══════════════════════════════════════════════════════════════════════════
   TOPBAR USER MENU
   ═══════════════════════════════════════════════════════════════════════════ */
.topbar-user-menu {
  position: relative;
  margin-left: 12px;
  flex-shrink: 0;
}
.topbar-user-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px 5px 6px;
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.22);
  border-radius: 999px;
  color: #fff;
  cursor: pointer;
  font-size: 13px;
  font-family: inherit;
  transition: background .14s;
  white-space: nowrap;
}
.topbar-user-btn:hover { background: rgba(255,255,255,.22); }
.topbar-user-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px; height: 24px;
  border-radius: 50%;
  background: rgba(255,255,255,.25);
  font-size: 11px;
  font-weight: 700;
  flex-shrink: 0;
}
.topbar-user-name  { max-width: 120px; overflow: hidden; text-overflow: ellipsis; }
.topbar-user-caret { font-size: 9px; opacity: .7; }
.topbar-user-dropdown {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  background: linear-gradient(145deg, rgba(18,28,52,0.97) 0%, rgba(14,24,44,0.99) 100%);
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 12px;
  box-shadow: 0 12px 36px rgba(0,0,0,.40), inset 0 1px 0 rgba(255,255,255,0.10);
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  min-width: 160px;
  z-index: 9300;
  overflow: hidden;
}
.topbar-dd-item {
  display: block;
  width: 100%;
  padding: 10px 16px;
  text-align: left;
  background: none;
  border: none;
  font-size: 13.5px;
  color: #d8eafc;
  cursor: pointer;
  font-family: inherit;
  transition: background .12s;
}
.topbar-dd-item:hover { background: rgba(255,255,255,0.10); }
.topbar-dd-item--danger        { color: #fca5a5; }
.topbar-dd-item--danger:hover  { background: rgba(220,38,38,0.18); }

/* ═══════════════════════════════════════════════════════════════════════════
   PRESENCE BAR  (who's also editing)
   ═══════════════════════════════════════════════════════════════════════════ */
.presence-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-left: 12px;
  flex-shrink: 0;
}
.presence-label {
  font-size: 11px;
  color: rgba(255,255,255,.6);
  white-space: nowrap;
}
.presence-avatar {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--presence-color, #6366f1);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  cursor: default;
  border: 2px solid rgba(255,255,255,.35);
  flex-shrink: 0;
  transition: transform .12s;
}
.presence-avatar:hover {
  transform: scale(1.15);
  z-index: 1;
}
.presence-tooltip {
  display: none;
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  left: auto;
  transform: none;
  background: rgba(15,23,42,.92);
  color: #fff;
  font-size: 11.5px;
  font-weight: 500;
  white-space: nowrap;
  padding: 4px 8px;
  border-radius: 6px;
  pointer-events: none;
  z-index: 9400;
}
.presence-avatar:hover .presence-tooltip { display: block; }

@media (max-width: 600px) {
  .presence-label { display: none; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   MOBILE PAGE BASE  (My Schedule / Oncall / Profile)
   ═══════════════════════════════════════════════════════════════════════════ */
.mob-loading { padding: 32px; text-align: center; color: var(--muted); font-size: 14px; }
.mob-error   { padding: 20px 24px; color: #dc2626; background: #fef2f2; border-radius: 10px; margin: 16px; font-size: 13px; }
.mob-notice  { padding: 16px 20px; background: var(--accent-soft); color: #1e3a5f; border-radius: 10px; margin: 16px; font-size: 13px; }

.mob-page {
  max-width: 680px;
  margin: 0 auto;
  padding: 16px 12px 40px;
}
.mob-page-title {
  font-size: 20px;
  font-weight: 700;
  color: var(--text);
  margin: 0 0 4px;
}
.mob-page-sub {
  font-size: 13px;
  color: var(--muted);
  margin: 0 0 16px;
}
.mob-section-title {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--muted);
  margin: 0 0 10px;
}

/* Week block */
.mob-week-block { margin-bottom: 20px; }
.mob-week-header {
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
  padding: 12px 2px;
  border-bottom: 2px solid var(--accent);
  margin-bottom: 12px;
}

/* Day card */
.mob-day-card {
  background: linear-gradient(140deg, rgba(255,255,255,0.62) 0%, rgba(255,255,255,0.46) 100%);
  backdrop-filter: blur(14px) saturate(130%);
  -webkit-backdrop-filter: blur(14px) saturate(130%);
  border: 1px solid rgba(255,255,255,0.72);
  border-radius: 12px;
  margin-bottom: 8px;
  overflow: hidden;
  box-shadow: 0 4px 18px rgba(12,29,48,0.08), inset 0 1px 0 rgba(255,255,255,0.62);
  transition: box-shadow .15s, transform .15s;
}
.mob-day-card:hover { box-shadow: 0 8px 24px rgba(12,29,48,0.13), inset 0 1px 0 rgba(255,255,255,0.70); }
.mob-day-today {
  border-color: rgba(30,111,168,0.65);
  background: linear-gradient(140deg, rgba(232,243,251,0.72) 0%, rgba(208,232,252,0.52) 100%);
  box-shadow: 0 0 0 2.5px rgba(30,111,168,.28), 0 6px 24px rgba(12,29,48,0.12), inset 0 1px 0 rgba(255,255,255,0.80);
}
.mob-day-today .mob-day-head {
  background: rgba(30,111,168,0.09);
  border-bottom-color: rgba(30,111,168,0.20);
}
.mob-day-past { opacity: .62; }
.mob-day-no-schedule .mob-day-head { border-bottom: none; }
.mob-no-sched-msg {
  padding: 14px 16px;
  font-size: 13px;
  color: #3a6a8a;
  font-style: italic;
  opacity: .85;
}

.mob-day-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px 8px;
  background: rgba(255,255,255,0.42);
  border-bottom: 1px solid rgba(255,255,255,0.55);
}
.mob-day-label {
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
  flex: 1;
}
.mob-day-date  { font-size: 12px; font-weight: 400; color: var(--muted); margin-left: 4px; }
.mob-today-badge {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  background: var(--accent);
  color: #fff;
  border-radius: 999px;
  padding: 2px 8px;
}
.mob-oncall-badge {
  font-size: 11px;
  font-weight: 700;
  background: #fef3c7;
  color: #92400e;
  border: 1px solid #fde68a;
  border-radius: 999px;
  padding: 2px 9px;
}

/* Sessions */
.mob-sessions { padding: 8px 14px 6px; display: flex; flex-direction: column; gap: 4px; }
.mob-section-title {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--muted);
  margin-bottom: 4px;
}
.mob-session-block {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 8px 0;
  border-bottom: 1px solid rgba(200,216,235,0.42);
}
.mob-session-block:last-child { border-bottom: none; }
.mob-session-row { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.mob-session-label {
  width: 56px;
  flex-shrink: 0;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--muted);
}
.mob-code-pill {
  font-size: 11px;
  font-weight: 700;
  border-radius: 6px;
  padding: 2px 8px;
  white-space: nowrap;
}
.code-clinical  { background: #dbeafe; color: #1e40af; }
.code-nonclin   { background: #f1f5f9; color: #475569; }
.code-leave     { background: #fef3c7; color: #92400e; }

.mob-pairing {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-left: 64px;
}
.mob-pairing-label {
  font-size: 11px;
  font-weight: 700;
  color: var(--muted);
}
.mob-pairing-empty {
  font-size: 12px;
  color: var(--muted);
  font-style: italic;
}

/* Colleagues */
.mob-colleague-row { display: flex; align-items: center; gap: 8px; padding: 4px 0; font-size: 13px; flex-wrap: wrap; }
.mob-colleague-name  { font-weight: 600; color: var(--text); }
.mob-colleague-role  { font-size: 11px; color: #5b7fa6; background: #e8f0f9; border-radius: 4px; padding: 1px 6px; }

/* Coordinator row */
.mob-coordinator-wrap {
  padding: 6px 14px 10px;
  border-top: 1px solid rgba(255,255,255,0.55);
  background: rgba(240,248,255,0.40);
}
.mob-coord-period {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 6px;
}
.mob-coord-period:last-child { margin-bottom: 0; }
.mob-coord-period-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--muted);
  min-width: 22px;
  padding-top: 3px;
  flex-shrink: 0;
}
.mob-coord-period-body {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
}
.mob-coordinator {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 2px 0;
  font-size: 13px;
  flex-wrap: wrap;
}
.mob-coord-type {
  font-size: 11px;
  font-weight: 700;
  color: var(--accent);
  white-space: nowrap;
  min-width: 14px;
}
.mob-coord-name { font-weight: 600; color: var(--text); }

@media (max-width: 560px) {
  .mob-pairing { padding-left: 0; }
}

/* Phone link */
.mob-phone-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  color: var(--accent);
  text-decoration: none;
  padding: 3px 8px;
  border: 1px solid var(--accent);
  border-radius: 6px;
  white-space: nowrap;
  transition: background .12s;
}
.mob-phone-btn:hover { background: var(--accent-soft); }

/* Oncall roles */
.mob-oncall-card {
  background: linear-gradient(140deg, rgba(255,255,255,0.62) 0%, rgba(255,255,255,0.46) 100%);
  backdrop-filter: blur(14px) saturate(130%);
  -webkit-backdrop-filter: blur(14px) saturate(130%);
  border: 1px solid rgba(255,255,255,0.72);
  border-radius: 12px;
  margin-bottom: 8px;
  overflow: hidden;
  box-shadow: 0 4px 18px rgba(12,29,48,0.08), inset 0 1px 0 rgba(255,255,255,0.62);
}
.mob-oncall-card.mob-day-today {
  border-color: rgba(30,111,168,0.65);
  background: linear-gradient(140deg, rgba(232,243,251,0.72) 0%, rgba(208,232,252,0.52) 100%);
  box-shadow: 0 0 0 2.5px rgba(30,111,168,.28), 0 6px 24px rgba(12,29,48,0.12), inset 0 1px 0 rgba(255,255,255,0.80);
}
.mob-oncall-card.mob-day-today .mob-day-head {
  background: rgba(30,111,168,0.09);
  border-bottom-color: rgba(30,111,168,0.20);
}
.mob-oncall-roles { padding: 8px 14px 10px; display: flex; flex-direction: column; gap: 6px; }
.mob-oncall-role-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 0;
  border-bottom: 1px solid rgba(200,216,235,0.42);
  flex-wrap: wrap;
  font-size: 13px;
}
.mob-oncall-role-row:last-child { border-bottom: none; }
.mob-oncall-role-label {
  width: 130px;
  flex-shrink: 0;
  font-size: 11.5px;
  font-weight: 700;
  color: var(--muted);
}
.mob-oncall-name   { font-weight: 600; color: var(--text); flex: 1; }
.mob-oncall-empty  { color: var(--muted); font-style: italic; font-size: 12.5px; flex: 1; }
.mob-oncall-me .mob-oncall-name { color: var(--accent); }
.mob-oncall-me     { background: rgba(30,111,168,.05); border-radius: 6px; padding: 4px 6px; margin: 0 -6px; }

/* Profile page */
.mob-profile-card {
  display: flex;
  align-items: center;
  gap: 16px;
  background: linear-gradient(140deg, rgba(255,255,255,0.66) 0%, rgba(255,255,255,0.50) 100%);
  backdrop-filter: blur(14px) saturate(130%);
  -webkit-backdrop-filter: blur(14px) saturate(130%);
  border: 1px solid rgba(255,255,255,0.72);
  border-radius: 12px;
  padding: 16px 18px;
  margin-bottom: 16px;
  box-shadow: 0 4px 18px rgba(12,29,48,0.08), inset 0 1px 0 rgba(255,255,255,0.65);
}
.mob-profile-avatar {
  width: 52px; height: 52px;
  border-radius: 50%;
  background: linear-gradient(135deg, #1a2d4a 0%, #1e4d7b 100%);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 22px; font-weight: 700;
  flex-shrink: 0;
}
.mob-profile-name     { font-size: 17px; font-weight: 700; color: var(--text); }
.mob-profile-role     { font-size: 12px; color: var(--accent); font-weight: 600; text-transform: capitalize; }
.mob-profile-username { font-size: 12px; color: var(--muted); margin-top: 2px; }

.mob-profile-form {
  background: linear-gradient(140deg, rgba(255,255,255,0.66) 0%, rgba(255,255,255,0.50) 100%);
  backdrop-filter: blur(14px) saturate(130%);
  -webkit-backdrop-filter: blur(14px) saturate(130%);
  border: 1px solid rgba(255,255,255,0.72);
  border-radius: 12px;
  padding: 16px 18px;
  box-shadow: 0 4px 18px rgba(12,29,48,0.08), inset 0 1px 0 rgba(255,255,255,0.65);
}
.mob-profile-hint { font-size: 12px; color: var(--muted); margin: 0 0 12px; }
.mob-field-label  { display: flex; flex-direction: column; gap: 5px; font-size: 13px; font-weight: 600; color: #374151; margin-bottom: 10px; }
.mob-input {
  padding: 9px 12px;
  border: 1.5px solid #d1d5db;
  border-radius: 8px;
  font-size: 14px;
  color: #111827;
  outline: none;
  font-family: inherit;
  transition: border-color .15s, box-shadow .15s;
}
.mob-input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(30,111,168,.15); }
.mob-input:disabled { background: #f9fafb; color: #9ca3af; }
.mob-form-actions { display: flex; align-items: center; gap: 10px; margin-top: 4px; flex-wrap: wrap; }
.mob-form-ok  { font-size: 13px; color: var(--ok);   font-weight: 600; }
.mob-form-err { font-size: 13px; color: var(--warn); font-weight: 600; }
.mob-btn {
  padding: 9px 18px;
  border-radius: 8px;
  font-size: 13.5px;
  font-weight: 700;
  cursor: pointer;
  border: none;
  font-family: inherit;
  transition: background .14s;
}
.mob-btn-primary  { background: var(--accent); color: #fff; }
.mob-btn-primary:hover   { background: #1a5c8e; }
.mob-btn-primary:disabled { background: #94a3b8; cursor: default; }
.mob-btn-outline  { background: #fff; color: var(--accent); border: 1.5px solid var(--accent); }
.mob-btn-outline:hover { background: var(--accent-soft); }

/* ─── Mobile side-menu (hamburger + drawer) ─────────────────────────────── */
.mobile-menu-btn {
  display: none; /* shown only at ≤680px via media query */
  flex-direction: column;
  justify-content: space-between;
  width: 34px;
  height: 34px;
  padding: 8px 7px;
  flex-shrink: 0;
  background: rgba(255,255,255,0.14);
  border: 1px solid rgba(255,255,255,0.22);
  border-radius: 8px;
  cursor: pointer;
  gap: 0;
}
.mobile-menu-btn span {
  display: block;
  height: 2px;
  border-radius: 2px;
  background: #fff;
  transition: opacity 0.15s;
}
.mobile-menu-btn:hover { background: rgba(255,255,255,0.24); }

.mobile-menu-overlay {
  position: fixed;
  top: var(--topbar-height, 0px);
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 9400;
  background: rgba(10,20,35,0.45);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}

.mobile-menu-drawer {
  position: fixed;
  top: var(--topbar-height, 0px);
  left: 0;
  bottom: 0;
  width: 260px;
  z-index: 9500;
  background: rgba(240,246,255,0.97);
  backdrop-filter: blur(24px) saturate(160%);
  -webkit-backdrop-filter: blur(24px) saturate(160%);
  border-right: 1px solid rgba(200,216,234,0.55);
  box-shadow: 4px 0 32px rgba(12,29,48,0.22);
  display: flex;
  flex-direction: column;
  transform: translateX(-100%);
  transition: transform 0.22s cubic-bezier(0.4,0,0.2,1);
}
.mobile-menu-drawer--open { transform: translateX(0); }

.mobile-menu-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 16px 12px;
  border-bottom: 1px solid rgba(200,216,234,0.40);
}
.mobile-menu-title {
  font-size: 15px;
  font-weight: 800;
  color: #1e3a5f;
  letter-spacing: -.2px;
}
.mobile-menu-close {
  width: 30px; height: 30px;
  border: none;
  border-radius: 8px;
  background: rgba(200,216,234,0.35);
  color: #3a556e;
  font-size: 14px;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.mobile-menu-close:hover { background: rgba(200,216,234,0.70); }

.mobile-menu-nav {
  flex: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  padding: 8px 0;
}
.mobile-menu-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 15px 20px;
  background: none;
  border: none;
  text-align: left;
  font-size: 14px;
  font-weight: 600;
  color: #2c4a6a;
  cursor: pointer;
  border-left: 3px solid transparent;
  transition: background 0.12s, border-color 0.12s;
}
.mobile-menu-item:hover { background: rgba(200,216,234,0.22); }
.mobile-menu-item.active {
  background: rgba(30,111,168,0.09);
  border-left-color: #1e6fa8;
  color: #1e6fa8;
  font-weight: 700;
}

/* ─── Responsive tweaks for narrow screens ──────────────────────────────── */
@media (max-width: 680px) {
  .mobile-menu-btn { display: flex; }
  .tabs { display: none; } /* replaced by hamburger menu on mobile */

  /* Allow weekly summary cell text to wrap rather than overflow */
  .weekly-board td { white-space: normal; word-break: break-word; }

  /* ── SMO / Trainee roster: scrollable + pinch-zoomable ── */
  #view-smo-roster.view.active,
  #view-reg-roster.view.active {
    height: auto;
  }
  #view-smo-roster .panel,
  #view-reg-roster .panel {
    padding: 8px 8px;
    min-height: 0;
    height: auto;
    display: flex;
    flex-direction: column;
    gap: 8px;
  }
  #view-smo-roster .table-wrap,
  #view-reg-roster .table-wrap {
    overflow: scroll;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-x pan-y pinch-zoom;
    height: calc(100svh - 120px);
    max-height: none;
    border-radius: 6px;
  }
  #view-smo-roster .long-grid,
  #view-reg-roster .long-grid {
    width: auto;
    table-layout: auto;
  }
  /* Freeze sc1 (Wk) + sc2 (Date) on mobile; disable sc3–sc8 only */
  #view-smo-roster .long-grid .sc3, #view-smo-roster .long-grid .sc4,
  #view-smo-roster .long-grid .sc5, #view-smo-roster .long-grid .sc6,
  #view-smo-roster .long-grid .sc7, #view-smo-roster .long-grid .sc8,
  #view-reg-roster .long-grid .sc3, #view-reg-roster .long-grid .sc4,
  #view-reg-roster .long-grid .sc5, #view-reg-roster .long-grid .sc6,
  #view-reg-roster .long-grid .sc7, #view-reg-roster .long-grid .sc8 {
    position: static;
    box-shadow: none;
  }
  /* sc2 becomes the last frozen column on mobile — add right-edge shadow */
  #view-smo-roster .long-grid .sc2,
  #view-reg-roster .long-grid .sc2 {
    box-shadow: 2px 0 5px rgba(15,23,42,.12);
  }
  /* Trainee: both header rows must sit above sticky-left body cells on mobile.
     Uses #regLongContainer (spec 1,2,3) to beat the out-of-query rule of same
     spec and all .sc1/.sc2 thead rules (spec 1,2,1). */
  #regLongContainer .tr-grid thead tr:first-child th { z-index: 12; }
  #regLongContainer .tr-grid thead tr:nth-child(2) th { z-index: 11; }
  /* Compact single-row topbar on mobile */
  .topbar {
    flex-direction: row;
    align-items: center;
    padding: 6px 10px;
    gap: 6px;
    flex-wrap: nowrap;
  }
  .topbar h1 { font-size: 13px; white-space: nowrap; letter-spacing: -.2px; }
  .subtitle { display: none; }
  .week-nav {
    flex: 1;
    flex-direction: row;
    align-items: center;
    gap: 2px;
    margin-left: 8px;
  }
  .year-filter-pills,
  .week-label-current-badge { display: none; }
  .week-selected-label { font-size: 11px; }
  .week-pills-scroll { display: none; }
  .week-nav-arrow { width: 24px; height: 24px; font-size: 10px; padding: 0; }
  .btn-week-jump { font-size: 12px; padding: 3px 6px; }
  .topbar-user-name { display: none; }
  .topbar-user-caret { display: none; }
}

@media (max-width: 480px) {
  .mob-page { padding: 10px 8px 32px; }
  .mob-oncall-role-label { width: 100px; }
  .topbar-user-name { display: none; }
  .topbar-user-caret { display: none; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   MY SCHEDULE — liquid-glass responsive layout  (mirrors On-Call style)
   Mobile  (<768px) : .ms-cards visible, .ms-table-wrap hidden
   Desktop (≥768px) : .ms-table-wrap visible, .ms-cards hidden
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Page shell ──────────────────────────────────────────────────── */
.ms-page {
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 0 56px;
}

/* ── Hero header ─────────────────────────────────────────────────── */
.ms-hero {
  position: relative;
  overflow: hidden;
  background: linear-gradient(140deg, rgba(255,255,255,0.50) 0%, rgba(240,248,255,0.36) 100%);
  backdrop-filter: blur(16px) saturate(130%);
  -webkit-backdrop-filter: blur(16px) saturate(130%);
  border: 1px solid rgba(255,255,255,0.74);
  border-radius: 0;
  box-shadow: 0 6px 20px rgba(12,29,48,0.09), inset 0 1px 0 rgba(255,255,255,0.55);
  outline: 1px solid rgba(98,136,182,0.16);
  outline-offset: 0;
  padding: 36px 24px 32px;
  margin-bottom: 30px;
}
/* Diagonal shimmer — mimics the light refraction on real glass */
.ms-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    118deg,
    rgba(255,255,255,0.28) 0%,
    rgba(255,255,255,0.00) 45%,
    rgba(212,232,255,0.12) 100%
  );
  pointer-events: none;
}
.ms-hero::after {
  content: '';
  position: absolute;
  bottom: 0; left: 8%; right: 8%;
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.80) 40%, rgba(180,210,255,0.60) 60%, transparent 100%);
}
.ms-hero-glow {
  position: absolute;
  top: -80px; right: -100px;
  width: 360px; height: 360px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(120,175,255,0.08) 0%, transparent 60%);
  pointer-events: none;
}
.ms-hero-content { position: relative; z-index: 1; }
.ms-hero-eyebrow {
  display: inline-flex;
  align-items: center;
  padding: 3px 12px;
  margin-bottom: 10px;
  background: linear-gradient(140deg, rgba(55,122,182,0.14), rgba(38,93,147,0.10));
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(104,137,178,0.45);
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: #1a5fa8;
  box-shadow: 0 1px 4px rgba(12,29,48,0.08), inset 0 1px 0 rgba(255,255,255,0.50);
}
.ms-hero-title {
  font-size: 26px;
  font-weight: 800;
  color: #132336;
  margin: 0 0 7px;
  letter-spacing: -.025em;
  line-height: 1.1;
  text-shadow: 0 1px 0 rgba(255,255,255,0.45);
}
.ms-hero-sub {
  font-size: 12.5px;
  color: #54697f;
  margin: 0;
  font-weight: 400;
  letter-spacing: .01em;
}

/* ── Week section ────────────────────────────────────────────────── */
.ms-week-block { margin-bottom: 36px; padding: 0 16px; }
.ms-week-label {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
}
.ms-week-pill {
  display: inline-flex;
  align-items: center;
  padding: 3px 13px;
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(55,122,182,0.88) 0%, rgba(38,93,147,0.84) 100%);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,0.32);
  color: #fff;
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .07em;
  box-shadow: 0 4px 12px rgba(30,111,168,0.28), inset 0 1px 0 rgba(255,255,255,0.25);
}
.ms-week-range {
  font-size: 13px;
  color: #54697f;
  font-weight: 500;
}

/* ── Mobile cards (default visible) ─────────────────────────────── */
.ms-table-wrap { display: none; }
.ms-cards      { display: block; }

/* ── Desktop table (hidden by default, shown ≥768px) ────────────── */
@media (min-width: 768px) {
  .ms-hero         { padding: 52px 40px 44px; }
  .ms-hero-title   { font-size: 36px; }
  .ms-week-block   { padding: 0 32px; }

  .ms-table-wrap {
    display: block;
    overflow-x: auto;
    border-radius: 16px;
    border: 1px solid rgba(255,255,255,0.72);
    background: linear-gradient(140deg, rgba(255,255,255,0.78) 0%, rgba(240,248,255,0.65) 100%);
    backdrop-filter: blur(16px) saturate(145%);
    -webkit-backdrop-filter: blur(16px) saturate(145%);
    box-shadow: 0 8px 32px rgba(12,29,48,0.10), inset 0 1px 0 rgba(255,255,255,0.65);
  }
  .ms-cards { display: none; }
}

/* ── Table base ──────────────────────────────────────────────────── */
.ms-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  color: var(--text);
  white-space: nowrap;
}

/* Header row */
.ms-table thead tr { background: #1e3a5f; }
.ms-th {
  background: #1e3a5f;
  padding: 14px 16px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: #fff;
  text-align: left;
  border-right: 1px solid rgba(255,255,255,.1);
}
.ms-th:last-child { border-right: none; }
.ms-th-day {
  min-width: 104px;
  font-weight: 700;
  position: sticky;
  top: 0;
  left: 0;
  z-index: 3;
  background: #152d4a;
  border-right: 1px solid rgba(255,255,255,.15);
}

/* ── Day sticky column ───────────────────────────────────────────── */
.ms-td-day {
  background: rgba(230,242,255,0.82);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  position: sticky;
  left: 0;
  z-index: 1;
  padding: 13px 16px;
  border-right: 1px solid rgba(255,255,255,0.55);
  min-width: 104px;
  vertical-align: top;
  transition: background .15s;
}
.ms-day-name {
  display: block;
  font-weight: 800;
  font-size: 13.5px;
  color: var(--text);
  line-height: 1.2;
}
.ms-day-date {
  display: block;
  font-size: 11px;
  color: var(--muted);
  margin-top: 2px;
  font-weight: 400;
}
.ms-today-badge {
  display: inline-block;
  margin-top: 5px;
  padding: 2px 8px;
  border-radius: 20px;
  background: linear-gradient(90deg, #1e6fa8, #2984d4);
  color: #fff;
  font-size: 9.5px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .06em;
  box-shadow: 0 0 10px rgba(30,111,168,.5), 0 2px 6px rgba(30,111,168,.4);
}

/* ── Data cells ──────────────────────────────────────────────────── */
.ms-td {
  padding: 12px 16px;
  vertical-align: top;
  min-width: 136px;
  border-right: 1px solid rgba(205,214,228,.4);
  transition: background .15s;
  white-space: normal;
}
.ms-td:last-child { border-right: none; }
.ms-td-coords { min-width: 200px; }

/* ── Row variants ────────────────────────────────────────────────── */
.ms-row td              { border-bottom: 1px solid rgba(205,214,228,.5); }
.ms-row:last-child td   { border-bottom: none; }

.ms-row-today td {
  background: rgba(30,111,168,.06);
}
.ms-row-today .ms-td-day {
  border-left: 3px solid var(--accent);
  background: rgba(30,111,168,.11);
  box-shadow: inset 4px 0 14px rgba(30,111,168,.15);
}
.ms-td-no-sched {
  vertical-align: middle;
}
.ms-no-sched-msg {
  font-size: 13px;
  color: #3a6a8a;
  font-style: italic;
  opacity: .85;
}

.ms-row-past td        { opacity: .5; }

.ms-row:not(.ms-row-past):hover td           { background: rgba(30,111,168,.04); }
.ms-row-today:hover td                       { background: rgba(30,111,168,.07); }
.ms-row:not(.ms-row-past):hover .ms-td-day,
.ms-row-today:hover .ms-td-day               { background: rgba(30,111,168,.11); }

/* ── Code pill ─────────────────────────────────────────────────────── */
.ms-code-pill {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  border-radius: 6px;
  padding: 2px 8px;
  margin-bottom: 4px;
}

/* ── Session cell ──────────────────────────────────────────────────── */
.ms-cell-slot { margin-bottom: 8px; }
.ms-cell-slot:last-child { margin-bottom: 0; }

/* ── Coworkers in table ─────────────────────────────────────────────── */
.ms-coworkers { display: flex; flex-direction: column; gap: 4px; margin-top: 4px; }
.ms-coworkers-label { font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: rgba(91,127,166,.7); margin-bottom: 2px; }
.ms-coworker  { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; }
.ms-coworker-name { font-weight: 600; font-size: 12.5px; }
.ms-coworker-role {
  font-size: 10px;
  color: #5b7fa6;
  background: #e8f0f9;
  border-radius: 4px;
  padding: 1px 5px;
}
.ms-phone {
  font-size: 11px;
  color: var(--accent);
  text-decoration: none;
  white-space: nowrap;
}
.ms-phone:hover { text-decoration: underline; }
.ms-empty {
  color: rgba(107,122,144,.4);
  font-size: 15px;
  font-weight: 300;
}

/* ── Coordinator cell ─────────────────────────────────────────────── */
.ms-coord-period {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  margin-bottom: 6px;
}
.ms-coord-period:last-child { margin-bottom: 0; }
.ms-coord-period-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--muted);
  min-width: 18px;
  padding-top: 2px;
  flex-shrink: 0;
}
.ms-coord-rows { display: flex; flex-direction: column; gap: 3px; flex: 1; }
.ms-coord-row  { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; }
.ms-coord-role {
  font-size: 10px;
  font-weight: 700;
  color: var(--accent);
  min-width: 14px;
  flex-shrink: 0;
}
.ms-coord-name { font-weight: 600; font-size: 12.5px; }

/* ═══════════════════════════════════════════════════════════════════════════
   ONCALL PAGE — liquid-glass responsive layout
   Mobile  (<768px) : oc-cards visible, oc-table-wrap hidden
   Desktop (≥768px) : oc-table-wrap visible, oc-cards hidden
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Page shell ──────────────────────────────────────────────────── */
.oc-page {
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 0 56px;
}

/* ── Hero header ─────────────────────────────────────────────────── */
.oc-hero {
  position: relative;
  overflow: hidden;
  background: linear-gradient(140deg, rgba(255,255,255,0.50) 0%, rgba(240,248,255,0.36) 100%);
  backdrop-filter: blur(16px) saturate(130%);
  -webkit-backdrop-filter: blur(16px) saturate(130%);
  border: 1px solid rgba(255,255,255,0.74);
  border-radius: 0;
  box-shadow: 0 6px 20px rgba(12,29,48,0.09), inset 0 1px 0 rgba(255,255,255,0.55);
  outline: 1px solid rgba(98,136,182,0.16);
  outline-offset: 0;
  padding: 36px 24px 32px;
  margin-bottom: 30px;
}
.oc-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    118deg,
    rgba(255,255,255,0.28) 0%,
    rgba(255,255,255,0.00) 45%,
    rgba(212,232,255,0.12) 100%
  );
  pointer-events: none;
}
.oc-hero::after {
  content: '';
  position: absolute;
  bottom: 0; left: 8%; right: 8%;
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.80) 40%, rgba(180,210,255,0.60) 60%, transparent 100%);
}
.oc-hero-glow {
  position: absolute;
  top: -80px; right: -100px;
  width: 360px; height: 360px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(120,175,255,0.08) 0%, transparent 60%);
  pointer-events: none;
}
.oc-hero-content { position: relative; z-index: 1; }
.oc-hero-eyebrow {
  display: inline-flex;
  align-items: center;
  padding: 3px 12px;
  margin-bottom: 10px;
  background: linear-gradient(140deg, rgba(55,122,182,0.14), rgba(38,93,147,0.10));
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(104,137,178,0.45);
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: #1a5fa8;
  box-shadow: 0 1px 4px rgba(12,29,48,0.08), inset 0 1px 0 rgba(255,255,255,0.50);
}
.oc-hero-title {
  font-size: 26px;
  font-weight: 800;
  color: #132336;
  margin: 0 0 7px;
  letter-spacing: -.025em;
  line-height: 1.1;
  text-shadow: 0 1px 0 rgba(255,255,255,0.45);
}
.oc-hero-sub {
  font-size: 12.5px;
  color: #54697f;
  margin: 0;
  font-weight: 400;
  letter-spacing: .01em;
}

/* ── Week section ────────────────────────────────────────────────── */
.oc-week-block { margin-bottom: 36px; padding: 0 16px; }
.oc-week-label {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
}
.oc-week-pill {
  display: inline-flex;
  align-items: center;
  padding: 3px 13px;
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(55,122,182,0.88) 0%, rgba(38,93,147,0.84) 100%);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,0.32);
  color: #fff;
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .07em;
  box-shadow: 0 4px 12px rgba(30,111,168,0.28), inset 0 1px 0 rgba(255,255,255,0.25);
}
.oc-week-range {
  font-size: 13px;
  color: #54697f;
  font-weight: 500;
}

/* ── Mobile cards (default visible) ─────────────────────────────── */
.oc-table-wrap { display: none; }
.oc-cards      { display: block; }

/* ── Desktop table (hidden by default, shown ≥768px) ────────────── */
@media (min-width: 768px) {
  .oc-hero         { padding: 52px 40px 44px; }
  .oc-hero-title   { font-size: 36px; }
  .oc-week-block   { padding: 0 32px; }

  .oc-table-wrap {
    display: block;
    overflow-x: auto;
    border-radius: 16px;
    border: 1px solid rgba(255,255,255,0.72);
    background: linear-gradient(140deg, rgba(255,255,255,0.78) 0%, rgba(240,248,255,0.65) 100%);
    backdrop-filter: blur(16px) saturate(145%);
    -webkit-backdrop-filter: blur(16px) saturate(145%);
    box-shadow: 0 8px 32px rgba(12,29,48,0.10), inset 0 1px 0 rgba(255,255,255,0.65);
  }
  .oc-cards { display: none; }
}

/* ── Table base ──────────────────────────────────────────────────── */
.oc-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  color: var(--text);
  white-space: nowrap;
}

/* Header row */
.oc-table thead tr {
  background: #1e3a5f;
}
.oc-th {
  background: #1e3a5f;
  padding: 14px 16px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: #fff;
  text-align: left;
  border-right: 1px solid rgba(255,255,255,.1);
}
.oc-th:last-child { border-right: none; }
.oc-th-day {
  min-width: 104px;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  position: sticky;
  top: 0;
  left: 0;
  z-index: 3;
  background: #152d4a;
  border-right: 1px solid rgba(255,255,255,.15);
}

/* ── Day sticky column ───────────────────────────────────────────── */
.oc-td-day {
  background: rgba(230,242,255,0.82);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  position: sticky;
  left: 0;
  z-index: 1;
  padding: 13px 16px;
  border-right: 1px solid rgba(255,255,255,0.55);
  min-width: 104px;
  transition: background .15s;
}
.oc-day-name {
  display: block;
  font-weight: 800;
  font-size: 13.5px;
  color: var(--text);
  line-height: 1.2;
}
.oc-day-date {
  display: block;
  font-size: 11px;
  color: var(--muted);
  margin-top: 2px;
  font-weight: 400;
}
.oc-today-badge {
  display: inline-block;
  margin-top: 5px;
  padding: 2px 8px;
  border-radius: 20px;
  background: linear-gradient(90deg, #1e6fa8, #2984d4);
  color: #fff;
  font-size: 9.5px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .06em;
  box-shadow: 0 0 10px rgba(30,111,168,.5), 0 2px 6px rgba(30,111,168,.4);
}

/* ── Data cells ──────────────────────────────────────────────────── */
.oc-td {
  padding: 12px 16px;
  vertical-align: top;
  min-width: 136px;
  border-right: 1px solid rgba(205,214,228,.4);
  transition: background .15s;
}
.oc-td:last-child { border-right: none; }
.oc-name {
  display: block;
  font-weight: 600;
  font-size: 13px;
  color: var(--text);
  line-height: 1.3;
}
.oc-me {
  color: var(--accent) !important;
  font-weight: 700 !important;
}
.oc-phone {
  display: block;
  font-size: 11px;
  color: var(--muted);
  text-decoration: none;
  margin-top: 2px;
  transition: color .12s;
}
.oc-phone:hover  { color: var(--accent); }
.oc-phone-icon   { font-style: normal; text-decoration: none; }
.oc-empty {
  color: rgba(107,122,144,.4);
  font-size: 15px;
  font-weight: 300;
}
.oc-td-me { background: rgba(30,111,168,.05); }

/* ── Row variants ────────────────────────────────────────────────── */
.oc-row td              { border-bottom: 1px solid rgba(205,214,228,.5); }
.oc-row:last-child td   { border-bottom: none; }

.oc-row-today td {
  background: rgba(30,111,168,.06);
}
.oc-row-today .oc-td-day {
  border-left: 3px solid var(--accent);
  background: rgba(30,111,168,.11);
  box-shadow: inset 4px 0 14px rgba(30,111,168,.15);
}

.oc-row-past td        { opacity: .5; }

.oc-row:not(.oc-row-past):hover td            { background: rgba(30,111,168,.04); }
.oc-row-today:hover td                        { background: rgba(30,111,168,.07); }
.oc-row:not(.oc-row-past):hover .oc-td-day,
.oc-row-today:hover .oc-td-day               { background: rgba(30,111,168,.11); }

/* ── User Management Panel ─────────────────────────────────────────────── */

/* Page shell */
.ua-page{display:flex;flex-direction:column;gap:18px;padding:0 4px}
.ua-page-header{display:flex;align-items:flex-end;justify-content:space-between}
.ua-cp-title{margin:0 0 3px;font-size:19px;font-weight:800;color:var(--text,#1a2535);letter-spacing:-0.3px}
.ua-cp-subtitle{margin:0;font-size:12.5px;color:var(--muted,#5a6d84)}

/* Two-column grid */
.ua-two-col{display:grid;grid-template-columns:1fr 280px;gap:16px;align-items:start}
.ua-col-main{display:flex;flex-direction:column;gap:14px;min-width:0}
.ua-col-side{display:flex;flex-direction:column;gap:14px}

/* Glass panel cards */
.ua-panel-card{border:1px solid rgba(255,255,255,0.72);border-radius:14px;background:linear-gradient(140deg,rgba(255,255,255,0.84) 0%,rgba(255,255,255,0.64) 100%);backdrop-filter:blur(12px) saturate(130%);-webkit-backdrop-filter:blur(12px) saturate(130%);padding:18px 20px;box-shadow:0 4px 20px rgba(12,29,48,0.07),inset 0 1px 0 rgba(255,255,255,0.55)}
.ua-panel-card--flush{padding:0;overflow:hidden}
.ua-panel-title{margin:0 0 12px;font-size:10.5px;font-weight:700;color:var(--muted,#5a6d84);text-transform:uppercase;letter-spacing:0.07em}

/* Flash banners */
.ua-flash-row{margin-bottom:-2px}
.ua-flash{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;padding:11px 14px;border-radius:10px;font-size:13px;line-height:1.5}
.ua-flash code{font-family:ui-monospace,monospace;font-size:12px;padding:1px 5px;border-radius:4px}
.ua-flash-success{background:#f0fdf4;border:1px solid #bbf7d0;color:#14532d}
.ua-flash-success code{background:#dcfce7}
.ua-flash-error{background:#fef2f2;border:1px solid #fecaca;color:#7f1d1d}
.ua-flash-close{background:none;border:none;cursor:pointer;font-size:13px;color:inherit;opacity:0.55;padding:0;flex-shrink:0;line-height:1.5}
.ua-flash-close:hover{opacity:1}

/* Create panel */
.ua-create-panel {
  border: 1.5px dashed var(--line, #c4d2e4);
  border-radius: 12px;
  padding: 11px 16px;
  background: rgba(255,255,255,0.45);
  transition: background 0.15s, border-color 0.15s;
}
.ua-create-panel--open {
  border-style: solid;
  border-color: rgba(30,111,168,0.25);
  background: linear-gradient(140deg, rgba(255,255,255,0.82) 0%, rgba(255,255,255,0.62) 100%);
  box-shadow: 0 2px 12px rgba(12,29,48,0.06), inset 0 1px 0 rgba(255,255,255,0.55);
}
.ua-create-toggle {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: none;
  border: none;
  cursor: pointer;
  font-size: 13px;
  font-family: inherit;
  font-weight: 600;
  color: var(--accent, #1e6fa8);
  padding: 0;
}
.ua-create-toggle:hover { color: #165e90; }
.ua-create-toggle-icon { font-size: 17px; line-height: 1; }
.ua-create-body { padding-top: 14px; }
.ua-create-grid {
  display: grid;
  grid-template-columns: 1.1fr 0.85fr 0.85fr auto auto;
  gap: 8px 12px;
  align-items: flex-end;
}
.ua-access-setup--row { display: flex; flex-direction: column; gap: 5px; }
.ua-access-cards--compact .ua-access-card { padding: 7px 12px; }
.ua-access-cards--compact .ua-access-card-title { font-size: 12.5px; }
.ua-create-action-cell { display: flex; flex-direction: column; align-items: flex-end; gap: 5px; }
.ua-create-msg { font-size: 11.5px; color: #c0392b; text-align: right; }

/* Fields */
.ua-field { display: flex; flex-direction: column; gap: 5px; }
.ua-field-label {
  font-size: 10.5px;
  font-weight: 700;
  color: var(--muted, #5a6d84);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.ua-field input {
  padding: 8px 10px;
  border: 1px solid var(--line, #c4d2e4);
  border-radius: 8px;
  font-size: 13px;
  font-family: inherit;
  color: var(--text, #1a2535);
  background: rgba(255,255,255,0.65);
  transition: border-color 0.15s, box-shadow 0.15s, background 0.15s;
}
.ua-field input:focus {
  outline: none;
  border-color: var(--accent, #1e6fa8);
  box-shadow: 0 0 0 3px rgba(30,111,168,0.12);
  background: rgba(255,255,255,0.95);
}
.ua-field input:disabled { opacity: 0.5; cursor: not-allowed; background: rgba(0,0,0,0.04); }

/* Access cards */
.ua-access-setup { display: flex; flex-direction: column; gap: 7px; }
.ua-access-label { font-size: 10.5px; font-weight: 700; color: var(--muted, #5a6d84); text-transform: uppercase; letter-spacing: 0.06em; }
.ua-access-cards { display: flex; gap: 8px; }
.ua-access-cards--vertical { flex-direction: column; gap: 6px; }
.ua-access-card {
  flex: 1;
  border: 1.5px solid var(--line, #c4d2e4);
  border-radius: 10px;
  background: rgba(255,255,255,0.50);
  padding: 10px 14px;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.14s, background 0.14s, box-shadow 0.13s;
}
.ua-access-card:hover { border-color: var(--accent, #1e6fa8); background: var(--accent-soft, #ddeefa); }
.ua-access-card--selected { border-color: var(--accent, #1e6fa8); background: var(--accent-soft, #ddeefa); box-shadow: 0 0 0 3px rgba(30,111,168,0.10); }
.ua-access-card--implied { cursor: default; opacity: 0.72; }
.ua-access-card--implied:hover { border-color: var(--accent, #1e6fa8); background: var(--accent-soft, #ddeefa); }
.ua-access-card-title { font-size: 13px; font-weight: 700; color: var(--text, #1a2535); }
.ua-access-card--selected .ua-access-card-title { color: var(--accent, #1e6fa8); }
.ua-access-hint { margin: 4px 0 0; font-size: 11.5px; color: var(--muted, #5a6d84); font-style: italic; }

/* Buttons */
.ua-btn {
  padding: 5px 12px;
  border-radius: 7px;
  border: 1px solid transparent;
  font-size: 12px;
  font-weight: 500;
  font-family: inherit;
  cursor: pointer;
  line-height: 1.45;
  transition: background 0.13s, border-color 0.13s;
  white-space: nowrap;
}
.ua-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.ua-btn-primary { background: var(--accent, #1e6fa8); color: #fff; border-color: var(--accent, #1e6fa8); box-shadow: 0 1px 4px rgba(30,111,168,0.22); }
.ua-btn-primary:hover:not(:disabled) { background: #175f92; border-color: #175f92; }
.ua-btn-muted { background: rgba(255,255,255,0.65); color: var(--text, #1a2535); border-color: var(--line, #c4d2e4); }
.ua-btn-muted:hover:not(:disabled) { background: rgba(255,255,255,0.92); border-color: #a8bcd4; }
.ua-btn-ok { background: #dcfce7; color: #166534; border-color: #86efac; }
.ua-btn-ok:hover:not(:disabled) { background: #bbf7d0; }
.ua-btn-danger { background: #fee2e2; color: #991b1b; border-color: #fca5a5; }
.ua-btn-danger:hover:not(:disabled) { background: #fecaca; }

/* Section headers */
.ua-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 11px 16px;
  border-bottom: 1px solid rgba(0,0,0,0.055);
}
.ua-section-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  font-weight: 700;
  color: var(--text, #1a2535);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  white-space: nowrap;
}
.ua-section-label--dim { color: var(--muted, #5a6d84); }
.ua-count-badge { background: var(--accent-soft, #ddeefa); color: var(--accent, #1e6fa8); border-radius: 999px; padding: 1px 8px; font-size: 11px; font-weight: 700; letter-spacing: 0; }
.ua-count-badge--dim { background: rgba(0,0,0,0.06); color: var(--muted, #5a6d84); }
.ua-search-input {
  padding: 5px 10px;
  border: 1px solid var(--line, #c4d2e4);
  border-radius: 7px;
  font-size: 12.5px;
  font-family: inherit;
  background: rgba(255,255,255,0.65);
  color: var(--text, #1a2535);
  width: 200px;
  transition: border-color 0.14s, box-shadow 0.14s, background 0.14s;
}
.ua-search-input:focus { outline: none; border-color: var(--accent, #1e6fa8); box-shadow: 0 0 0 3px rgba(30,111,168,0.10); background: rgba(255,255,255,0.95); }

/* Scrollable table wrapper */
.ua-table-scroll    { max-height: 680px; overflow-y: auto; }
.ua-table-scroll--sm { max-height: 300px; overflow-y: auto; }

/* Users table */
.ua-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.ua-table th, .ua-table td { padding: 10px 14px; border-bottom: 1px solid rgba(0,0,0,0.05); text-align: left; vertical-align: middle; }
.ua-table tbody tr:last-child > td { border-bottom: none; }
.ua-table thead th {
  position: sticky; top: 0; z-index: 1;
  background: rgba(245,249,255,0.96);
  backdrop-filter: blur(8px);
  color: var(--muted, #5a6d84);
  font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em;
  border-bottom: 1px solid rgba(0,0,0,0.07);
}
.ua-table thead th:first-child { border-radius: 14px 0 0 0; }
.ua-table thead th:last-child  { border-radius: 0 14px 0 0; }
.ua-table tbody tr { transition: background 0.12s; }
.ua-table tbody tr:hover:not(.ua-edit-row):not(.ua-row-editing) { background: rgba(30,111,168,0.04); }
.ua-td-mono   { font-family: ui-monospace, monospace; font-size: 12px; color: var(--muted, #5a6d84); }
.ua-td-actions { white-space: nowrap; text-align: right; }
.ua-td-actions .ua-btn + .ua-btn { margin-left: 4px; }

/* Empty cell inside table */
.ua-empty-td { text-align: center; padding: 22px 14px; color: var(--muted, #5a6d84); font-size: 13px; font-style: italic; }

/* Deactivated users section */
.ua-inactive-panel { margin-top: 2px; }
.ua-inactive-panel .ua-table tbody td { color: var(--muted, #5a6d84); }

/* User avatar + info */
.ua-user-row { display: flex; align-items: center; gap: 10px; }
.ua-avatar { width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 800; flex-shrink: 0; }
.ua-avatar--sm { width: 26px; height: 26px; font-size: 10px; }
.ua-user-info { min-width: 0; }
.ua-user-name { font-weight: 600; color: var(--text, #1a2535); font-size: 13px; }
.ua-user-meta { font-size: 11.5px; color: var(--muted, #5a6d84); margin-top: 1px; }

/* Editing row - clear visual ownership, gentle styling */
.ua-row-editing > td { background: rgba(30,111,168,0.05); }
.ua-row-editing > td:first-child { border-left: 3px solid var(--accent, #1e6fa8); padding-left: 11px; }

/* Inline edit form */
.ua-edit-row > td { padding: 0; background: rgba(30,111,168,0.025); }
.ua-edit-form {
  padding: 14px 18px 16px;
  display: flex;
  flex-direction: column;
  gap: 13px;
  border-top: 1.5px solid rgba(30,111,168,0.14);
}
.ua-edit-ctx-header { display: flex; align-items: center; gap: 9px; padding-bottom: 10px; border-bottom: 1px solid rgba(0,0,0,0.06); }
.ua-edit-ctx-label { font-size: 13px; color: var(--muted, #5a6d84); flex: 1; }
.ua-edit-ctx-label strong { color: var(--text, #1a2535); }
.ua-edit-ctx-close { background: none; border: none; cursor: pointer; font-size: 13px; color: var(--muted, #5a6d84); padding: 2px 5px; border-radius: 5px; line-height: 1; transition: background 0.12s, color 0.12s; }
.ua-edit-ctx-close:hover { background: rgba(0,0,0,0.07); color: var(--text, #1a2535); }
.ua-edit-grid { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; gap: 9px 12px; }
.ua-edit-access { display: flex; flex-direction: column; gap: 7px; }
.ua-edit-footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-top: 4px; border-top: 1px solid rgba(0,0,0,0.06); }
.ua-edit-msg { font-size: 12px; color: #c0392b; flex: 1; }
.ua-edit-actions { display: flex; gap: 8px; }

/* Status / role badges */
.ua-status-badge, .ua-role-badge { display: inline-flex; align-items: center; padding: 3px 9px; border-radius: 999px; font-size: 11px; font-weight: 600; white-space: nowrap; }
.ua-status-active   { background: #dcfce7; color: #166534; border: 1px solid #bbf7d0; }
.ua-status-inactive { background: rgba(0,0,0,0.05); color: var(--muted, #5a6d84); border: 1px solid rgba(0,0,0,0.08); }
.ua-role-regular    { background: rgba(0,0,0,0.05); color: var(--muted, #5a6d84); border: 1px solid rgba(0,0,0,0.07); }
.ua-role-rostering  { background: #e0f2fe; color: #0369a1; border: 1px solid #bae6fd; }
.ua-role-admin      { background: #ede9fe; color: #5b21b6; border: 1px solid #ddd6fe; }

/* Security activity feed */
.ua-audit-feed { display: flex; flex-direction: column; max-height: 400px; overflow-y: auto; }
.ua-audit-item { display: flex; align-items: flex-start; gap: 10px; padding: 8px 0; border-bottom: 1px solid rgba(0,0,0,0.05); }
.ua-audit-item:last-child { border-bottom: none; }
.ua-audit-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; margin-top: 5px; background: var(--muted, #5a6d84); }
.ua-audit-dot--created { background: #16a34a; }
.ua-audit-dot--deleted { background: #dc2626; }
.ua-audit-dot--updated { background: var(--accent, #1e6fa8); }
.ua-audit-dot--reset   { background: #d97706; }
.ua-audit-body   { min-width: 0; }
.ua-audit-summary { font-size: 12.5px; color: var(--text, #1a2535); line-height: 1.4; }
.ua-audit-detail  { font-size: 11.5px; color: var(--muted, #5a6d84); margin-top: 2px; line-height: 1.35; }
.ua-audit-time    { font-size: 11px; color: var(--muted, #5a6d84); margin-top: 2px; }

/* Empty / no-access states */
.ua-empty-state { padding: 16px 0; color: var(--muted, #5a6d84); font-size: 13px; }
.ua-no-access   { padding: 14px 0; color: var(--muted, #5a6d84); font-size: 13px; }

/* Linked-person select (create panel + edit row) */
.ua-edit-person {
  width: 100%; padding: 7px 10px;
  border: 1px solid var(--line, #c4d2e4); border-radius: 8px;
  font-size: 13px; font-family: inherit; color: var(--text, #1a2535);
  background: rgba(255,255,255,0.65);
  transition: border-color 0.15s, box-shadow 0.15s, background 0.15s;
}
.ua-edit-person:focus {
  outline: none; border-color: var(--accent, #1e6fa8);
  box-shadow: 0 0 0 3px rgba(30,111,168,0.12);
  background: rgba(255,255,255,0.95);
}
.ua-create-link-row { padding-top: 10px; border-top: 1px solid rgba(0,0,0,0.06); margin-top: 6px; }

/* Bulk create panel */
.ua-bulk-panel {
  border: 1.5px dashed var(--line, #c4d2e4);
  border-radius: 12px;
  padding: 11px 16px;
  background: rgba(255,255,255,0.40);
  transition: background 0.15s, border-color 0.15s;
}
.ua-bulk-panel--open {
  border-style: solid;
  border-color: rgba(30,111,168,0.20);
  background: rgba(255,255,255,0.60);
  box-shadow: 0 2px 12px rgba(12,29,48,0.05);
}
.ua-bulk-toggle {
  display: inline-flex; align-items: center; gap: 8px;
  background: none; border: none; cursor: pointer;
  font-size: 13px; font-family: inherit; font-weight: 600;
  color: var(--muted, #5a6d84); padding: 0;
}
.ua-bulk-toggle:hover { color: var(--text, #1a2535); }
.ua-bulk-body { padding-top: 12px; display: flex; flex-direction: column; gap: 10px; }
.ua-bulk-controls {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  padding-bottom: 8px; border-bottom: 1px solid rgba(0,0,0,0.06);
}
.ua-bulk-controls label { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--muted, #5a6d84); cursor: pointer; }
.ua-bulk-controls select {
  padding: 4px 8px; border: 1px solid var(--line, #c4d2e4); border-radius: 6px;
  font-size: 12.5px; font-family: inherit; background: rgba(255,255,255,0.8);
}
.ua-bulk-list {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 3px 10px; max-height: 220px; overflow-y: auto; padding: 2px;
}
.ua-bulk-item {
  display: flex; align-items: center; gap: 7px;
  font-size: 12.5px; color: var(--text, #1a2535);
  padding: 4px 6px; border-radius: 6px; cursor: pointer;
}
.ua-bulk-item:hover { background: rgba(30,111,168,0.05); }
.ua-bulk-item input[type="checkbox"] { cursor: pointer; flex-shrink: 0; }
.ua-bulk-actions { display: flex; gap: 8px; align-items: center; }
.ua-bulk-results { border-top: 1px solid rgba(0,0,0,0.07); padding-top: 10px; display: flex; flex-direction: column; gap: 8px; }
.ua-bulk-results-success { background: #f0fdf4; border: 1px solid #bbf7d0; border-radius: 8px; padding: 10px 14px; }
.ua-bulk-results-success strong { color: #15803d; display: block; margin-bottom: 5px; font-size: 12.5px; }
.ua-bulk-results-success ul { margin: 0; padding: 0 0 0 16px; font-size: 12px; color: #166534; line-height: 1.7; }
.ua-bulk-results-success code { background: #dcfce7; padding: 1px 4px; border-radius: 3px; font-size: 11.5px; }
.ua-bulk-results-error { background: #fef2f2; border: 1px solid #fecaca; border-radius: 8px; padding: 10px 14px; }
.ua-bulk-results-error strong { color: #991b1b; display: block; margin-bottom: 5px; font-size: 12.5px; }
.ua-bulk-results-error ul { margin: 0; padding: 0 0 0 16px; font-size: 12px; color: #7f1d1d; line-height: 1.7; }

@media (max-width: 960px) {
  .ua-two-col { grid-template-columns: 1fr; }
  .ua-col-side { order: -1; }
}
@media (max-width: 820px) {
  .ua-create-grid { grid-template-columns: 1fr 1fr 1fr; }
  .ua-create-grid .ua-access-setup--row,
  .ua-create-grid .ua-create-action-cell { grid-column: span 3; }
  .ua-edit-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  .ua-create-grid { grid-template-columns: 1fr; }
  .ua-create-grid .ua-access-setup--row,
  .ua-create-grid .ua-create-action-cell { grid-column: 1; }
  .ua-edit-grid { grid-template-columns: 1fr; }
  .ua-access-cards { flex-direction: column; }
  .ua-td-actions { white-space: normal; }
  .ua-td-actions .ua-btn { margin-bottom: 3px; }
}

/* ── Stats: NCD Sacrifice output ─────────────────────────────── */
.sac-output {
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding: 4px 0;
}
.stats-result-section {
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: #ffffff;
  border: 1px solid rgba(147,197,253,0.40);
  border-top: 3px solid #1e3a5f;
  border-radius: 10px;
  padding: 14px 16px;
  box-shadow: 0 2px 12px rgba(12,29,48,0.08);
}
.stats-result-hdr {
  font-size: 13px;
  font-weight: 700;
  color: #1e293b;
  border-bottom: 1px solid rgba(147,197,253,0.35);
  padding-bottom: 6px;
  margin-bottom: 2px;
}
.stats-result-hdr-sub {
  font-weight: 400;
  font-size: 12px;
  color: #94a3b8;
}
/* Person bar-chart table */
.sac-table-scroll {
  overflow-x: auto;
  overflow-y: auto;
  max-height: 318px; /* ~10 rows */
}
.sac-table-scroll thead th {
  position: sticky;
  top: 0;
  z-index: 1;
}
.sac-person-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}
.sac-person-table thead th {
  text-align: left;
  padding: 5px 10px;
  background: linear-gradient(180deg, #1e3a5f 0%, #1a3357 100%);
  color: #dbeafe;
  font-size: 11px;
  font-weight: 600;
  border-bottom: none;
  white-space: nowrap;
}
.sac-person-row td {
  padding: 6px 10px;
  border-bottom: 1px solid rgba(220,235,255,0.55);
  vertical-align: middle;
}
.sac-person-row:hover td { background: rgba(235,245,255,0.45); }
.sac-person-name {
  font-weight: 600;
  color: #1e293b;
  white-space: nowrap;
  min-width: 100px;
}
.sac-person-bar-cell {
  min-width: 140px;
  width: 200px;
}
.sac-bar-wrap {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 120px;
}
.sac-bar {
  height: 10px;
  background: #f59e0b;
  border-radius: 3px;
  min-width: 4px;
  flex-shrink: 0;
}
.sac-bar-val {
  font-size: 12px;
  font-weight: 700;
  color: #b45309;
  flex-shrink: 0;
}
.sac-person-codes {
  white-space: nowrap;
}
.sac-person-repl {
  white-space: nowrap;
}
/* Snap-code chips (NCD / ADMIN / PC-NCD) */
.sac-snap-chip {
  display: inline-block;
  padding: 1px 6px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 600;
  background: rgba(245,158,11,.15);
  color: #92400e;
  margin-right: 3px;
}
.sac-snap-chip--ncd    { background: rgba(245,158,11,.18); color: #92400e; }
.sac-snap-chip--admin  { background: rgba(99,102,241,.15); color: #3730a3; }
.sac-snap-chip--pcncd  { background: rgba(16,185,129,.15); color: #065f46; }
/* Replaced-with chips */
.sac-repl-chip {
  display: inline-block;
  padding: 1px 6px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 600;
  background: rgba(255,255,255,0.60);
  border: 1px solid rgba(203,213,225,0.60);
  color: #475569;
  margin-right: 3px;
}
/* Week table */
.sac-week-scroll {
  overflow-y: auto;
  max-height: 318px; /* ~10 rows */
}
.sac-week-scroll thead th {
  position: sticky;
  top: 0;
  z-index: 1;
}
.sac-week-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
  max-width: 480px;
}
.sac-week-table thead th {
  text-align: left;
  padding: 5px 10px;
  background: linear-gradient(180deg, #1e3a5f 0%, #1a3357 100%);
  color: #dbeafe;
  font-size: 11px;
  font-weight: 600;
  border-bottom: none;
}
.sac-week-table tbody tr td {
  padding: 5px 10px;
  border-bottom: 1px solid rgba(220,235,255,0.55);
  vertical-align: middle;
}
.sac-week-table tbody tr:hover td { background: rgba(235,245,255,0.45); }
.sac-wk-label { font-weight: 600; color: #1e293b; white-space: nowrap; }
.sac-wk-count {
  font-weight: 700;
  color: #b45309;
  text-align: center;
  width: 60px;
}
.sac-wk-who { color: #64748b; font-size: 11px; }
/* Replaced-with global row */
.sac-repl-row {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  padding: 4px 0;
}

/* ── Delete Person modal ─────────────────────────────────────────── */
.dp-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 99999;
  background: rgba(8, 18, 36, 0.55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}
.dp-modal-overlay[hidden] { display: none; }
.dp-modal-card {
  background: linear-gradient(145deg, #ffffff, #f0f6ff);
  border: 1px solid rgba(180, 210, 245, 0.7);
  border-radius: 18px;
  box-shadow: 0 24px 56px rgba(10, 30, 60, 0.28), inset 0 1px 0 rgba(255,255,255,0.9);
  padding: 1.75rem 1.9rem 1.5rem;
  width: min(420px, 90vw);
  animation: dp-modal-in 0.18s ease both;
}
@keyframes dp-modal-in {
  from { transform: scale(0.94) translateY(8px); opacity: 0; }
  to   { transform: scale(1)    translateY(0);   opacity: 1; }
}
.dp-modal-title {
  font-size: 1.1rem;
  font-weight: 700;
  color: #132336;
  margin: 0 0 0.85rem;
}
.dp-modal-body {
  font-size: 0.88rem;
  color: #354f6a;
  line-height: 1.6;
  margin: 0 0 1.4rem;
}
.dp-modal-actions {
  display: flex;
  gap: 0.6rem;
  justify-content: flex-end;
  flex-wrap: wrap;
}
.dp-btn-inactive {
  background: linear-gradient(135deg, #2d5f8a, #1e4268);
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 0.5rem 1.1rem;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  transition: opacity 0.15s;
}
.dp-btn-inactive:hover { opacity: 0.85; }
.dp-btn-delete {
  background: linear-gradient(135deg, #b91c1c, #7f1d1d);
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 0.5rem 1.1rem;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  transition: opacity 0.15s;
}
.dp-btn-delete:hover { opacity: 0.85; }
#btnDpCancel {
  background: transparent;
  color: #5a7a96;
  border: 1px solid #c8d8e8;
  border-radius: 8px;
  padding: 0.5rem 1rem;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s;
}
#btnDpCancel:hover { background: rgba(100,150,200,0.1); }