:root{
  --paper:#F7F5F1; --surface:#FFFFFF; --ink:#10233B; --ink-soft:#4C5A6E; --ink-faint:#8C97A6;
  --line:#DDE3EA; --line-soft:#EBEEF2;
  --brand-light:#82B5DA; --brand-mid:#5E8BC2; --brand-navy:#1E4694; --brand-navy-deep:#123166;
  --teal:var(--brand-navy); --teal-deep:var(--brand-navy-deep); --teal-soft:#E4EBF6;
  --amber:#A8671C; --amber-soft:#FBEEDC; --rose:#B03B3B; --rose-soft:#F8E5E3;
  --green:#3D7A5C; --green-soft:#E5F1EB;
  --shadow: 0 1px 2px rgba(16,35,59,.06), 0 6px 20px -8px rgba(16,35,59,.14);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --paper:#111A26; --surface:#182636; --ink:#EAF0F7; --ink-soft:#AAB8C8; --ink-faint:#78889B;
    --line:#2B3D50; --line-soft:#233144;
    --brand-light:#8FC1E5; --brand-mid:#6D9BD1; --brand-navy:#6FA0DD; --brand-navy-deep:#9CC4EA;
    --teal:var(--brand-navy); --teal-deep:var(--brand-navy-deep); --teal-soft:#1E3350;
    --amber:#E3A868; --amber-soft:#3A2E1C; --rose:#E88A85; --rose-soft:#3C2422;
    --green:#8FCB9C; --green-soft:#1F3323;
    --shadow: 0 1px 2px rgba(0,0,0,.3), 0 8px 24px -8px rgba(0,0,0,.5);
  }
}
*{box-sizing:border-box;}
html,body{ margin:0; background:var(--paper); color:var(--ink); font-family:"IBM Plex Sans",system-ui,sans-serif; font-size:14px; line-height:1.5; }
h1,h2,h3,.serif{ font-family:"IBM Plex Sans",system-ui,sans-serif; }
.wrap{ max-width:1180px; margin:0 auto; padding:20px 24px 80px; }
.kicker{ font-size:11px; text-transform:uppercase; letter-spacing:.14em; color:var(--ink-faint); font-weight:600; margin-bottom:4px;}
h1{ font-size:25px; font-weight:700; margin:0 0 4px; color:var(--brand-navy-deep); letter-spacing:-.01em;}
.subhead{ color:var(--ink-soft); font-size:14px; margin:2px 0 22px; max-width:64ch;}

/* brand header */
.brandmark{ display:flex; align-items:center; gap:12px; margin-bottom:2px; }
.brandmark img{ width:34px; height:auto; flex:none; }
.brandmark .word{ font-size:12px; font-weight:700; letter-spacing:.16em; color:var(--brand-navy-deep); line-height:1.35; }
.brandmark .word small{ display:block; font-size:9.5px; font-weight:600; letter-spacing:.14em; color:var(--ink-faint); }

/* auth screens */
.authwrap{ min-height:100vh; display:flex; align-items:center; justify-content:center; padding:24px; }
.auth-card{ max-width:420px; width:100%; }
.auth-card input{ width:100%; margin-top:4px; }
.status-line{ font-size:11.5px; color:var(--ink-faint); min-height:16px; margin-top:8px; }

/* top bar */
.topbar-outer{ background:var(--surface); border-bottom:1px solid var(--line); }
.topbar-inner{ max-width:1180px; margin:0 auto; padding:8px 24px; display:flex; align-items:center; justify-content:space-between; gap:12px; }
.whoami{ font-size:12px; color:var(--ink-soft); }

.topbar{ display:flex; align-items:baseline; justify-content:space-between; gap:16px; flex-wrap:wrap; margin-bottom:6px;}

/* tabs */
.tabs{ display:flex; gap:2px; border-bottom:1px solid var(--line); margin-bottom:24px; flex-wrap:wrap;}
.tab{ appearance:none; border:none; background:none; font:inherit; font-weight:600; font-size:13.5px;
  color:var(--ink-faint); padding:10px 16px; cursor:pointer; border-bottom:2px solid transparent; margin-bottom:-1px; transition:color .15s;}
.tab:hover{ color:var(--ink); }
.tab.active{ color:var(--teal-deep); border-bottom-color:var(--teal); }
.panel{ display:none; }
.panel.active{ display:block; animation:fade .25s ease; }
@keyframes fade{ from{opacity:0; transform:translateY(2px);} to{opacity:1; transform:none;} }

/* cards */
.card{ background:var(--surface); border:1px solid var(--line); border-radius:12px; box-shadow:var(--shadow); }
.card-pad{ padding:20px 22px; }

/* roster */
table.roster{ width:100%; border-collapse:collapse; font-size:13.5px;}
table.roster th{ text-align:left; font-size:11px; text-transform:uppercase; letter-spacing:.06em; color:var(--ink-faint); padding:0 10px 8px; border-bottom:1px solid var(--line); font-weight:700;}
table.roster td{ padding:9px 10px; border-bottom:1px solid var(--line-soft); vertical-align:middle;}
table.roster tr:last-child td{ border-bottom:none; }
.pill{ display:inline-block; font-size:11px; font-weight:700; padding:2px 9px; border-radius:99px; letter-spacing:.02em;}
.pill.ft{ background:var(--teal-soft); color:var(--teal-deep);}
.pill.prn{ background:var(--line-soft); color:var(--ink-soft);}
.icon-btn{ appearance:none; border:1px solid var(--line); background:var(--surface); color:var(--ink-soft); border-radius:7px; width:26px; height:26px; cursor:pointer; font-size:14px; line-height:1;}
.icon-btn:hover{ border-color:var(--rose); color:var(--rose); }
input[type=text], input[type=number], input[type=email], select, textarea{
  font:inherit; padding:6px 9px; border-radius:7px; border:1px solid var(--line); background:var(--surface); color:var(--ink);
}
input:focus, select:focus, textarea:focus{ outline:2px solid var(--teal-soft); border-color:var(--teal); }
.btn{ appearance:none; border:1px solid var(--teal); background:var(--teal); color:#fff; font:inherit; font-weight:600; font-size:13px;
  padding:8px 14px; border-radius:8px; cursor:pointer; }
.btn:hover{ background:var(--teal-deep); border-color:var(--teal-deep); }
.btn.ghost{ background:transparent; color:var(--teal-deep); }
.btn.ghost:hover{ background:var(--teal-soft); }
.btn.small{ padding:5px 10px; font-size:12px; }
.row-add{ display:flex; gap:8px; margin-top:14px; align-items:center; flex-wrap:wrap;}

/* planner */
.planner-head{ display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap; margin-bottom:16px;}
.month-select{ display:flex; align-items:center; gap:8px; }
.subtabs{ display:flex; gap:6px; }
.subtab{ appearance:none; border:1px solid var(--line); background:var(--surface); color:var(--ink-soft); font:inherit; font-weight:600;
  font-size:12.5px; padding:6px 12px; border-radius:99px; cursor:pointer;}
.subtab.active{ background:var(--teal); border-color:var(--teal); color:#fff; }

.summary-bar{ display:flex; gap:10px; margin-bottom:16px; flex-wrap:wrap;}
.summary-chip{ flex:1; min-width:140px; border:1px solid var(--line); border-radius:10px; padding:10px 14px; background:var(--surface);}
.summary-chip .num{ font-family:"IBM Plex Mono",monospace; font-size:20px; font-weight:600;}
.summary-chip .lbl{ font-size:11.5px; color:var(--ink-soft); margin-top:1px;}
.summary-chip.gap .num{ color:var(--rose);}
.summary-chip.over .num{ color:var(--amber);}
.summary-chip.ok .num{ color:var(--green);}

.day-list{ display:flex; flex-direction:column; gap:8px;}
.day-row{ display:grid; grid-template-columns:118px 1fr 190px; gap:14px; align-items:start;
  border:1px solid var(--line); border-radius:10px; background:var(--surface); padding:12px 14px; }
.day-row.weekend{ background:var(--paper); }
.day-row.status-gap{ border-color:var(--rose); box-shadow:inset 3px 0 0 var(--rose);}
.day-row.status-over{ border-color:var(--amber); box-shadow:inset 3px 0 0 var(--amber);}
.day-row.status-ok{ box-shadow:inset 3px 0 0 var(--green);}
.day-row.status-none{ opacity:.62; }
.day-row.status-past{ opacity:.5; }
.date-col .d{ font-weight:700; font-size:15px; }
.date-col .w{ font-size:11px; color:var(--ink-faint); text-transform:uppercase; letter-spacing:.05em;}
.block-note{ font-size:11.5px; color:var(--ink-faint); margin-top:5px; }
.block-note b{ color:var(--ink-soft); font-weight:600; }

.need-row{ display:flex; align-items:center; gap:10px; margin-bottom:8px; flex-wrap:wrap;}
.need-badge{ font-size:11px; font-weight:700; padding:3px 9px; border-radius:99px; }
.need-badge.none{ background:var(--line-soft); color:var(--ink-faint);}
.need-badge.standard{ background:var(--teal-soft); color:var(--teal-deep);}
.need-badge.bounce{ background:#EFD9A8; color:#7A5615;}
.need-badge.eval{ background:var(--line-soft); color:var(--ink-soft);}
.rooms-ctl{ display:flex; align-items:center; gap:6px; font-size:12px; color:var(--ink-soft);}
.rooms-ctl select{ padding:3px 6px; font-size:12px;}
.rooms-ctl label{ display:flex; align-items:center; gap:4px; }

.slots{ display:flex; gap:16px; flex-wrap:wrap;}
.slot{ min-width:150px; }
.slot .slot-lbl{ font-size:10.5px; text-transform:uppercase; letter-spacing:.06em; color:var(--ink-faint); font-weight:700; margin-bottom:4px;}
.chip-row{ display:flex; flex-wrap:wrap; gap:5px; align-items:center;}
.staff-chip{ display:inline-flex; align-items:center; gap:5px; background:var(--teal-soft); color:var(--teal-deep); font-size:12px; font-weight:600;
  padding:3px 6px 3px 9px; border-radius:99px;}
.staff-chip button{ appearance:none; border:none; background:none; color:inherit; opacity:.55; cursor:pointer; font-size:12px; padding:0 2px;}
.staff-chip button:hover{ opacity:1; }
.staff-chip.open{ background:var(--rose-soft); color:var(--rose); border:1px dashed var(--rose); font-style:italic;}
.staff-chip.tentative{ background:var(--surface); border:1px dashed var(--teal); color:var(--teal-deep); }
.staff-chip.tentative i{ font-style:normal; opacity:.6; font-size:10px; margin-left:1px; }
.add-select{ font-size:11.5px; padding:3px 5px; max-width:150px; }
.stepper-btn{ appearance:none; border:1px solid var(--line); background:var(--surface); color:var(--ink-soft); width:18px; height:18px; line-height:1;
  border-radius:5px; cursor:pointer; font-size:12px; padding:0; }
.stepper-btn:hover{ border-color:var(--teal); color:var(--teal-deep); }
.stepper-val{ font-family:"IBM Plex Mono",monospace; font-weight:600; font-size:12px; min-width:14px; display:inline-block; text-align:center; }

.status-tag{ justify-self:end; font-size:11px; font-weight:700; padding:4px 10px; border-radius:99px; white-space:nowrap; height:fit-content;}
.status-tag.gap{ background:var(--rose-soft); color:var(--rose);}
.status-tag.over{ background:var(--amber-soft); color:var(--amber);}
.status-tag.ok{ background:var(--green-soft); color:var(--green);}
.status-tag.none{ background:var(--line-soft); color:var(--ink-faint);}
.status-tag.past{ background:var(--line-soft); color:var(--ink-faint);}

/* availability grid (shared: staff view + admin sub-tab) */
.who-row{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.avail-wrap{ overflow-x:auto; border:1px solid var(--line); border-radius:10px; }
table.avail{ border-collapse:collapse; font-size:12px; width:100%;}
table.avail th, table.avail td{ border-bottom:1px solid var(--line-soft); border-right:1px solid var(--line-soft); padding:0; text-align:center; }
table.avail th{ background:var(--paper); font-size:10.5px; padding:7px 4px; color:var(--ink-soft); position:sticky; top:0;}
table.avail td.datecell{ text-align:left; padding:6px 10px; font-weight:600; white-space:nowrap; background:var(--paper); position:sticky; left:0; }
table.avail td.datecell span{ color:var(--ink-faint); font-weight:400; margin-left:4px;}
table.avail td.namecell{ text-align:left; padding:7px 10px; font-weight:600; white-space:nowrap; background:var(--paper); }
table.avail td.namecell .role{ font-weight:400; color:var(--ink-faint); font-size:10.5px; margin-left:4px;}
.avail-cell{ width:64px; height:32px; font-size:10.5px; font-weight:700; user-select:none; }
.avail-cell.editable{ cursor:pointer; }
.avail-cell.mine{ outline:2px solid var(--teal); outline-offset:-2px; }
.avail-cell.empty{ color:var(--ink-faint); }
.avail-cell.available{ background:var(--green-soft); color:var(--green); }
.avail-cell.prefer-preop{ background:var(--teal-soft); color:var(--teal-deep); }
.avail-cell.prefer-pacu{ background:#DCE7F5; color:#2B537D; }
.avail-cell.prefer-float{ background:#EDE3F5; color:#6B3F8C; }
.avail-cell.unavailable{ background:var(--rose-soft); color:var(--rose); text-decoration:line-through; }
.legend{ display:flex; gap:14px; flex-wrap:wrap; margin:12px 0 18px; font-size:12px; color:var(--ink-soft);}
.legend .sw{ display:inline-block; width:11px; height:11px; border-radius:3px; margin-right:5px; vertical-align:-1px;}

.note{ font-size:12.5px; color:var(--ink-soft); background:var(--paper); border:1px solid var(--line); border-radius:8px; padding:10px 13px; margin-top:16px;}
.section-title{ font-size:17px; font-weight:600; margin:0 0 4px; }
.section-desc{ font-size:13px; color:var(--ink-soft); margin:0 0 16px; max-width:70ch;}

textarea.import-box{ width:100%; min-height:150px; font-family:"IBM Plex Mono",ui-monospace,monospace; font-size:12px; resize:vertical; }
.import-preview{ margin-top:12px; }

footer.credit{ text-align:center; font-size:11.5px; color:var(--ink-faint); margin-top:40px; }
footer.credit .credit-logo{ width:26px; height:auto; display:block; margin:0 auto 8px; opacity:.9; }
footer.credit .credit-name{ font-weight:700; letter-spacing:.2em; font-size:12px; color:var(--brand-navy-deep); }
footer.credit .credit-org{ font-weight:600; color:var(--ink-soft); margin-top:1px; }
footer.credit .credit-sub{ margin-top:3px; color:var(--ink-faint); }

/* tab unread badge */
.tab{ position:relative; }
.tab .badge{ display:inline-block; min-width:16px; padding:1px 5px; margin-left:6px; border-radius:99px;
  background:var(--rose); color:#fff; font-size:10px; font-weight:700; line-height:1.4; text-align:center; vertical-align:2px; }
.tab .badge:empty, .tab .badge[data-count="0"]{ display:none; }

/* notification opt-in control (top bar) */
.notif-toggle{ appearance:none; border:1px solid var(--line); background:var(--surface); color:var(--ink-soft);
  font:inherit; font-size:11.5px; font-weight:600; padding:5px 10px; border-radius:99px; cursor:pointer; display:inline-flex; align-items:center; gap:5px; }
.notif-toggle:hover{ border-color:var(--teal); color:var(--teal-deep); }
.notif-toggle.on{ background:var(--teal-soft); border-color:var(--teal); color:var(--teal-deep); }
.notif-toggle .dot{ width:7px; height:7px; border-radius:99px; background:var(--ink-faint); flex:none; }
.notif-toggle.on .dot{ background:var(--teal); }

/* case schedule (no PHI — surgeon, procedure, times, bouncing only) */
.case-day{ border:1px solid var(--line); border-radius:10px; background:var(--surface); padding:12px 14px; margin-bottom:8px; }
.case-day.weekend{ background:var(--paper); }
.case-day .day-hd{ display:flex; align-items:baseline; gap:10px; margin-bottom:8px; flex-wrap:wrap; }
.case-day .day-hd .d{ font-weight:700; font-size:14.5px; }
.case-day .day-hd .w{ font-size:11px; color:var(--ink-faint); text-transform:uppercase; letter-spacing:.05em; }
.case-day .day-hd .none-note{ font-size:12px; color:var(--ink-faint); }
table.case-table{ width:100%; border-collapse:collapse; font-size:12.5px; }
table.case-table th{ text-align:left; font-size:10.5px; text-transform:uppercase; letter-spacing:.05em; color:var(--ink-faint); padding:4px 8px; font-weight:700; }
table.case-table td{ padding:5px 8px; border-top:1px solid var(--line-soft); vertical-align:top; }
table.case-table td.or-label{ font-family:"IBM Plex Mono",monospace; font-weight:600; color:var(--teal-deep); white-space:nowrap; }
table.case-table td.time-col{ font-family:"IBM Plex Mono",monospace; font-size:11.5px; color:var(--ink-soft); white-space:nowrap; }
.bounce-flag{ display:inline-block; margin-left:6px; font-size:10px; font-weight:700; letter-spacing:.04em; padding:1px 7px; border-radius:99px; background:#EFD9A8; color:#7A5615; }
.case-edit-row{ display:grid; grid-template-columns:100px 1fr 1fr 100px 100px 34px; gap:6px; align-items:center; margin-top:6px; }
.case-edit-row input, .case-edit-row select{ font-size:12px; padding:5px 7px; }
@media (max-width:900px){ .case-edit-row{ grid-template-columns:1fr 1fr; } }

/* published schedule (staff read-only view + admin live-edit view share this) */
.pub-note{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.pub-note .stamp{ font-size:11.5px; color:var(--ink-faint); }

/* communication */
.msg-list{ display:flex; flex-direction:column; gap:6px; }
.msg-row{ display:flex; align-items:center; justify-content:space-between; gap:10px; border:1px solid var(--line); border-radius:10px;
  background:var(--surface); padding:10px 14px; cursor:pointer; }
.msg-row:hover{ border-color:var(--teal); }
.msg-row.unread{ border-color:var(--teal); box-shadow:inset 3px 0 0 var(--teal); }
.msg-row .subj{ font-weight:600; font-size:13.5px; }
.msg-row .meta{ font-size:11.5px; color:var(--ink-faint); }
.msg-row .status-pill{ font-size:10.5px; font-weight:700; padding:2px 9px; border-radius:99px; }
.msg-row .status-pill.open{ background:var(--amber-soft); color:var(--amber); }
.msg-row .status-pill.answered{ background:var(--green-soft); color:var(--green); }
.msg-thread{ display:flex; flex-direction:column; gap:10px; margin:14px 0; }
.msg-bubble{ max-width:75%; padding:9px 13px; border-radius:12px; font-size:13px; line-height:1.45; }
.msg-bubble .who{ font-size:10.5px; font-weight:700; color:var(--ink-faint); margin-bottom:3px; text-transform:uppercase; letter-spacing:.04em; }
.msg-bubble.from-staff{ background:var(--paper); border:1px solid var(--line); align-self:flex-start; border-bottom-left-radius:3px; }
.msg-bubble.from-admin{ background:var(--teal-soft); align-self:flex-end; border-bottom-right-radius:3px; }
.reply-row{ display:flex; gap:8px; align-items:flex-end; }
.reply-row textarea{ flex:1; min-height:44px; resize:vertical; }
.back-link{ background:none; border:none; color:var(--teal-deep); font:inherit; font-weight:600; font-size:12.5px; cursor:pointer; padding:0; margin-bottom:12px; }
.back-link:hover{ text-decoration:underline; }

/* admin: "view as staff" preview */
.viewas-row{ display:flex; align-items:center; gap:8px; margin:0 0 18px; font-size:12.5px; color:var(--ink-soft); }
.viewas-row label{ font-weight:600; }
.viewas-row select{ font-size:12.5px; padding:5px 8px; }
#adminPreviewBar{ position:sticky; top:0; z-index:50; display:flex; align-items:center; justify-content:space-between; gap:12px;
  background:var(--amber-soft); color:var(--amber); border:1px solid var(--amber); border-radius:8px;
  padding:8px 14px; margin-bottom:18px; font-size:12.5px; font-weight:600; }
#staffApp.preview-mode .tab[data-tab="staff-avail"],
#staffApp.preview-mode .tab[data-tab="staff-comm"]{ display:none; }

/* communication: per-row delete (admin inbox only) */
.msg-row .msg-row-main{ flex:1; min-width:0; display:flex; align-items:center; justify-content:space-between; gap:10px; cursor:pointer; }
.icon-btn.danger:hover{ border-color:var(--rose); color:var(--rose); }
.btn.ghost.danger{ color:var(--rose); }
.btn.ghost.danger:hover{ background:var(--rose-soft); }