/* ============================================================
   Surgical Residency Training Portal — stylesheet
   ============================================================ */
:root {
    --navy: #122d4f;
    --navy-2: #0d2240;
    --teal: #0e7c7b;
    --teal-dark: #0a5e5d;
    --bg: #f2f5f8;
    --card: #ffffff;
    --line: #dfe6ee;
    --text: #1f2a37;
    --muted: #64748b;
    --danger: #b3372e;
    --warn: #a16207;
    --ok: #15803d;
    --info: #1d4ed8;
    --radius: 10px;
    --shadow: 0 1px 3px rgba(16, 35, 61, .08), 0 4px 14px rgba(16, 35, 61, .05);
}

/* Academic presentation assessments: shared evaluation controls, scoped reports. */
.academic-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px; }
.academic-stats { margin-bottom: 20px; }
.academic-settings { border: 1px solid var(--line); border-radius: 8px; padding: 10px 16px 16px; }
.academic-settings legend { font-weight: 600; padding: 0 6px; }
.academic-score { display: flex; flex-direction: column; gap: 3px; min-width: 100px; }
.academic-score meter { width: 100%; max-width: 180px; height: 12px; accent-color: var(--teal); }
.academic-score meter::-webkit-meter-optimum-value { background: var(--teal); }
.academic-score meter::-moz-meter-bar { background: var(--teal); }
#pending { scroll-margin-top: 72px; }
@media (max-width: 560px) {
    .academic-stats.cols-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .academic-tabs .btn { flex: 1 1 auto; text-align: center; }
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
    font: 15px/1.6 -apple-system, "Segoe UI", "Leelawadee UI", "Noto Sans Thai", Roboto, "Helvetica Neue", Arial, sans-serif;
    background: var(--bg);
    color: var(--text);
    overflow-wrap: anywhere;
}
img, svg, video { max-width: 100%; }
pre { white-space: pre-wrap; overflow-wrap: anywhere; }
a { color: var(--teal-dark); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3 { line-height: 1.25; }

/* ---------- App layout (sidebar + main) ---------- */
body.app { display: flex; min-height: 100vh; }

.sidebar {
    width: 248px; flex: 0 0 248px;
    background: linear-gradient(180deg, var(--navy) 0%, var(--navy-2) 100%);
    color: #d6e1ee;
    display: flex; flex-direction: column;
    position: sticky; top: 0; height: 100vh;
}
.brand { display: flex; gap: 10px; align-items: center; padding: 18px 16px 14px; border-bottom: 1px solid rgba(255,255,255,.08); }
.brand-mark { font-size: 26px; }
.brand-name { font-weight: 700; color: #fff; font-size: 14px; line-height: 1.3; }
.brand-sub { font-size: 11.5px; color: #8fa6c0; }
.nav { padding: 10px 8px; overflow-y: auto; flex: 1; }
.nav-link {
    display: flex; align-items: center; gap: 10px;
    padding: 9px 12px; margin: 2px 0;
    color: #c3d2e3; border-radius: 8px; font-size: 14px;
}
.nav-link:hover { background: rgba(255,255,255,.07); text-decoration: none; color: #fff; }
.nav-link.active { background: var(--teal); color: #fff; font-weight: 600; }
.nav-ico { width: 20px; text-align: center; }
/* Unread marker on a sidebar item: a count pill pushed to the right edge, plus a
   left rule on the item itself so the flag is not carried by the pill alone.
   Amber = something changed; red + 📌 = it was the viewer's own presentation.
   Colours are chosen against the dark navy sidebar, not the page background. */
.nav-badge {
    margin-left: auto; flex: none;
    background: var(--warn); color: #fff;   /* white: 4.9:1 on this amber; dark text fails */
    font-size: 11px; font-weight: 700; line-height: 1;
    padding: 3px 7px; border-radius: 999px; white-space: nowrap;
}
.nav-badge-personal { background: var(--danger); color: #fff; }
.nav-link.nav-flagged { box-shadow: inset 3px 0 0 var(--warn); color: #fff; }
.nav-link.nav-flagged-personal { box-shadow: inset 3px 0 0 var(--danger); }

/* Visually hidden, still read aloud by screen readers. */
.sr-only {
    position: absolute; width: 1px; height: 1px;
    padding: 0; margin: -1px; overflow: hidden;
    clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.nav-sep { margin: 14px 12px 4px; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: #7a90ab; }
.sidebar-foot { padding: 12px 16px; font-size: 11px; color: #7a90ab; border-top: 1px solid rgba(255,255,255,.08); }
/* Mobile-only close controls for the slide-in sidebar (shown in the 920px query). */
.sidebar-close {
    display: none; margin-left: auto; flex: 0 0 auto;
    width: 36px; height: 36px; align-items: center; justify-content: center;
    font-size: 18px; color: #d6e1ee; background: rgba(255,255,255,.08);
    border: 1px solid rgba(255,255,255,.15); border-radius: 8px; cursor: pointer;
}
.sidebar-close:hover { background: rgba(255,255,255,.16); color: #fff; }
.sidebar-backdrop { display: none; }

.main { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.topbar {
    display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
    background: var(--card); border-bottom: 1px solid var(--line);
    padding: 10px 22px; position: sticky; top: 0; z-index: 20;
}
.menu-btn { display: none; font-size: 20px; background: none; border: 1px solid var(--line); border-radius: 8px; padding: 4px 10px; cursor: pointer; }
.page-title { font-size: 19px; margin: 0; flex: 1 1 220px; min-width: 0; }
.userchip { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; min-width: 0; max-width: 100%; }
.userchip-info { display: flex; flex-direction: column; line-height: 1.2; }
.userchip-info small { color: var(--muted); }
.avatar {
    width: 36px; height: 36px; border-radius: 50%;
    background: var(--teal); color: #fff; font-weight: 700; font-size: 14px;
    display: inline-flex; align-items: center; justify-content: center; flex: 0 0 36px;
}
.avatar.lg { width: 56px; height: 56px; font-size: 20px; flex-basis: 56px; }

.content { padding: 22px; max-width: 1280px; width: 100%; }
.page-foot { padding: 14px 22px; color: var(--muted); font-size: 12.5px; }

/* ---------- Cards & grids ---------- */
.card {
    background: var(--card); border: 1px solid var(--line);
    border-radius: var(--radius); box-shadow: var(--shadow);
    padding: 18px 20px; margin-bottom: 20px; min-width: 0;
}
.card > h2 { margin: 0 0 12px; font-size: 16.5px; }
.card > h2 .badge { vertical-align: 2px; }
.card-sub { color: var(--muted); font-size: 13px; margin: -8px 0 14px; }

.grid { display: grid; gap: 18px; }
.grid > *, .form-row > *, .flex > *, .person > *, .pub-nav > * { min-width: 0; max-width: 100%; }
.cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.stat {
    background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
    box-shadow: var(--shadow); padding: 14px 16px;
}
.stat .stat-num { font-size: 26px; font-weight: 700; color: var(--navy); }
.stat .stat-num.ok { color: var(--ok); }
.stat .stat-num.warn { color: var(--warn); }
.stat .stat-num.danger { color: var(--danger); }
.stat .stat-label { color: var(--muted); font-size: 13px; }
.stat .stat-extra { margin-top: 6px; font-size: 12px; }

/* ---------- Tables ---------- */
.table-wrap { min-width: 0; max-width: 100%; }
table.data { width: 100%; table-layout: fixed; border-collapse: collapse; font-size: 14px; }
table.data th {
    text-align: left; font-size: 12px; text-transform: uppercase; letter-spacing: .04em;
    color: var(--muted); padding: 8px 10px; border-bottom: 2px solid var(--line); white-space: normal;
}
table.data td { padding: 9px 10px; border-bottom: 1px solid var(--line); vertical-align: middle; }
table.data tr:hover td { background: #f8fafc; }
table.data td.num, table.data th.num { text-align: right; }
table.data th, table.data td { min-width: 0; overflow-wrap: anywhere; }
table.data .row-actions { white-space: normal; text-align: right; }
table.data .nowrap, table.data .lock-note { white-space: normal; }
table.data .min-w-180, table.data .academic-score { min-width: 0; }
table.data .btn, table.data .badge { max-width: 100%; white-space: normal; }
table.data .eval-assign select { min-width: 0; }
/* Account actions need more room than the short PGY and status columns. */
.accounts-table .accounts-pgy-col { width: 80px; }
.accounts-table .accounts-status-col { width: 112px; }
.accounts-table .accounts-actions-col { width: 288px; }
.account-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: flex-end; }
.account-actions > .btn, .account-actions > .inline-form { flex: 0 0 auto; min-width: 0; max-width: 100%; }
.account-actions > .inline-form { display: flex; margin: 0; }
table.accounts-table .account-actions .btn { white-space: nowrap; }
tr.highlight td { background: #ecfdf5 !important; }

/* ---------- Badges & chips ---------- */
.badge {
    display: inline-block; padding: 2px 9px; border-radius: 999px;
    font-size: 11.5px; font-weight: 600; line-height: 1.6; white-space: normal; max-width: 100%;
}
.b-ok      { background: #dcfce7; color: var(--ok); }
.b-danger  { background: #fee2e2; color: var(--danger); }
.b-warn    { background: #fef3c7; color: var(--warn); }
.b-info    { background: #dbeafe; color: var(--info); }
.b-muted   { background: #e5e7eb; color: #4b5563; }
.badge.pgy   { background: #e0f2f1; color: var(--teal-dark); }
.badge.pgy-1 { background: #e0f2fe; color: #0369a1; }
.badge.pgy-2 { background: #dcfce7; color: #15803d; }
.badge.pgy-3 { background: #fef3c7; color: #a16207; }
.badge.pgy-4 { background: #fae8ff; color: #86198f; }
.badge.role-director { background: var(--navy); color: #fff; }
.badge.role-staff    { background: #e0e7ff; color: #3730a3; }
.badge.role-trainee  { background: #e0f2f1; color: var(--teal-dark); }
.badge.role-coordinator { background: #fef3c7; color: #92400e; }

/* ---------- Announcements ---------- */
.ann { padding: 14px 0; border-bottom: 1px solid var(--line); }
.ann:last-child { border-bottom: none; padding-bottom: 4px; }
.ann .ann-title { font-size: 15.5px; font-weight: 700; }
.ann .ann-meta { font-size: 12px; color: var(--muted); margin: 2px 0 6px; }
.ann .ann-body { font-size: 14px; }

/* ---------- Forms ---------- */
form.stack label, .field label { display: block; font-size: 13px; font-weight: 600; margin: 12px 0 4px; }
input:not([type]), input[type=text], input[type=password], input[type=email], input[type=date],
input[type=number], input[type=file], input[type=search], input[type=url],
input[type=tel], input[type=time], input[type=month], select, textarea {
    width: 100%; padding: 8px 10px; border: 1px solid #cbd5e1; border-radius: 8px;
    font: inherit; background: #fff; color: var(--text); min-width: 0; max-width: 100%;
}
textarea { min-height: 110px; resize: vertical; }
input:focus, select:focus, textarea:focus { outline: 2px solid rgba(14,124,123,.35); border-color: var(--teal); }
.form-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr)); gap: 0 14px; }
.form-row > .span-2 { grid-column: 1 / -1; }
fieldset { min-width: 0; max-width: 100%; }
.checkbox-line { display: flex; gap: 8px; align-items: center; margin-top: 12px; font-size: 14px; }
.checkbox-line input { width: auto; }
.research-progress-text { margin-top: 8px; overflow-wrap: anywhere; }
.research-doc-grid { align-items: start; }
.research-doc-card { padding: 16px; border: 1px solid var(--line); border-radius: 10px; background: #f8fafc; overflow-wrap: anywhere; }
.research-doc-card h3 { margin: 0 0 8px; font-size: 15px; }
.research-doc-facts { margin: 10px 0; font-size: 13px; }
.research-doc-facts > div { display: flex; flex-wrap: wrap; gap: 4px 12px; margin: 4px 0; }
.research-doc-facts dt { color: var(--muted); }
.research-doc-facts dd { margin: 0; min-width: 0; }
.research-doc-upload > summary { white-space: normal; text-align: left; }
.research-doc-upload > summary::before { content: '+ '; }
.research-doc-upload[open] > summary::before { content: '− '; }
.research-doc-upload > form { margin-top: 12px; padding-top: 4px; border-top: 1px solid var(--line); }
.research-study-panel { overflow-wrap: anywhere; }
.research-study-panel .btn { white-space: normal; }
.research-project-picker { display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0; }
.research-project-picker > a { min-width: 0; max-width: 100%; text-align: left; }
.research-study-fields > h3 { margin: 20px 0 8px; }
.research-manuscripts { border-top: 1px solid var(--line); margin-top: 24px; padding-top: 8px; }
.form-actions { margin-top: 16px; display: flex; gap: 10px; flex-wrap: wrap; }
.hint { font-size: 12.5px; color: var(--muted); margin-top: 4px; }
.inline-form { display: inline; }
/* A read-only value with a Copy button beside it (calendar_sync.php). */
.copy-field { display: flex; gap: 8px; align-items: center; }
.copy-field input { flex: 1; min-width: 0; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12.5px; }
.privacy-ack-form { display: inline; margin-left: 6px; }
.form-panel {
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 12px 14px;
    margin: 12px 0 16px;
    background: #f8fafc;
}

/* 24-hour time field + tap-to-pick panel (topics.php, assets/time-picker.js).
   No `display` on the button, panel or error box: they rely on [hidden]. */
.time-input { position: relative; display: flex; gap: 6px; }
.time-input input { font-size: 16px; letter-spacing: .04em; font-variant-numeric: tabular-nums; }
.time-open {
    flex: 0 0 42px; border: 1px solid #cbd5e1; border-radius: 8px;
    background: #f8fafc; font-size: 18px; line-height: 1; cursor: pointer;
}
.time-open:hover, .time-open[aria-expanded="true"] { background: #e0f2f1; border-color: var(--teal); }
.time-pop {
    position: absolute; top: calc(100% + 6px); left: 0; z-index: 15;
    width: 20rem; max-width: 100%;
    background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
    box-shadow: 0 8px 24px rgba(16, 35, 61, .18); padding: 8px 12px 12px;
}
.time-pop.time-pop-right { left: auto; right: 0; }
.time-pop-label { font-size: 12.5px; font-weight: 600; color: var(--muted); margin: 6px 0; }
.time-pop-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 5px; }
.time-pop-grid button {
    min-height: 38px; border: 1px solid var(--line); border-radius: 7px; background: #f8fafc;
    font: inherit; font-size: 15px; font-variant-numeric: tabular-nums; color: var(--text); cursor: pointer;
    min-width: 0; padding: 4px 2px;
}
.time-pop-grid button:hover:not(:disabled) { background: #e0f2f1; border-color: var(--teal); }
.time-pop-grid button[aria-pressed="true"] { background: var(--teal); border-color: var(--teal); color: #fff; font-weight: 700; }
.time-pop-grid button:disabled { opacity: .4; cursor: not-allowed; }
.time-pop-actions { display: flex; justify-content: space-between; gap: 8px; margin-top: 10px; }
.field-error { color: var(--danger); font-size: 13px; font-weight: 600; margin-top: 4px; }
input[aria-invalid="true"], select[aria-invalid="true"] { border-color: var(--danger); background: #fef2f2; }
input[aria-invalid="true"]:focus, select[aria-invalid="true"]:focus { outline-color: rgba(179, 55, 46, .35); border-color: var(--danger); }
fieldset[aria-invalid="true"] { border-color: var(--danger); }
/* Keep a form jumped to by #fragment clear of the sticky top bar. */
#topic-form { scroll-margin-top: 72px; }

.btn {
    display: inline-block; padding: 8px 16px; border-radius: 8px; border: 1px solid transparent;
    background: var(--teal); color: #fff !important; font: inherit; font-weight: 600; font-size: 14px;
    cursor: pointer; text-decoration: none !important; max-width: 100%; white-space: normal; overflow-wrap: anywhere;
}
.btn:hover { background: var(--teal-dark); }
.btn.secondary { background: var(--navy); }
.btn.secondary:hover { background: var(--navy-2); }
.btn.danger { background: #fff; color: var(--danger) !important; border-color: #fca5a5; }
.btn.danger:hover { background: #fef2f2; }
.btn.ghost { background: transparent; color: var(--navy) !important; border-color: var(--line); }
.btn.ghost:hover { background: #f1f5f9; }
.btn.small { padding: 4px 10px; font-size: 12.5px; font-weight: 600; }
.btn[disabled] { opacity: .5; cursor: not-allowed; }
[data-qr-end-window][hidden] { display: none; }
button.linklike { background: none; border: none; color: var(--teal-dark); cursor: pointer; font: inherit; padding: 0; }

/* ---------- Flash ---------- */
.flash { padding: 11px 16px; border-radius: 8px; margin-bottom: 18px; font-size: 14px; border: 1px solid; }
.flash-success { background: #f0fdf4; color: var(--ok); border-color: #bbf7d0; }
.flash-error   { background: #fef2f2; color: var(--danger); border-color: #fecaca; }
.flash-info    { background: #eff6ff; color: var(--info); border-color: #bfdbfe; }
.flash-warning { background: #fffbeb; color: var(--warn); border-color: #fde68a; }

/* ---------- Toasts + busy buttons (form feedback in assets/app.js) ---------- */
.toast-region {
    position: fixed; top: 14px; right: 14px; z-index: 1100; /* top is set under the top bar by app.js */
    width: min(420px, calc(100vw - 28px));
    display: flex; flex-direction: column; gap: 10px;
    pointer-events: none; /* only the cards take clicks */
}
.toast {
    pointer-events: auto;
    display: flex; align-items: flex-start; gap: 10px;
    background: var(--card); color: var(--text);
    border: 1px solid var(--line); border-left: 4px solid var(--info);
    border-radius: var(--radius); box-shadow: 0 6px 24px rgba(16, 35, 61, .18);
    padding: 12px 12px 12px 14px; font-size: 14px; line-height: 1.5;
}
.toast-success { border-left-color: var(--ok); }
.toast-error   { border-left-color: var(--danger); }
.toast-warning { border-left-color: #d97706; }
.toast-icon {
    flex: 0 0 24px; width: 24px; height: 24px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    font-weight: 700; font-size: 13px; color: #fff; background: var(--info);
}
.toast-success .toast-icon { background: var(--ok); }
.toast-error .toast-icon   { background: var(--danger); }
.toast-warning .toast-icon { background: #d97706; }
.toast-body { flex: 1 1 auto; min-width: 0; }
.toast-title { display: block; margin-bottom: 2px; }
.toast-text, .toast-note { white-space: pre-line; overflow-wrap: anywhere; }
.toast-note { margin-top: 6px; padding-top: 6px; border-top: 1px dashed var(--line); color: var(--muted); }
.toast-kept { margin-top: 8px; padding: 8px 10px; background: #f8fafc; border-radius: 8px; font-size: 13px; max-height: 40vh; overflow: auto; white-space: pre-wrap; }
.toast-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.toast-close {
    flex: 0 0 auto; background: none; border: none; cursor: pointer;
    font-size: 20px; line-height: 1; color: var(--muted); padding: 0 4px;
}
.toast-close:hover { color: var(--text); }
@media (max-width: 600px) {
    .toast-region { left: 8px; right: 8px; width: auto; }
}
/* The open mobile menu must stay usable: messages wait until it closes. */
body.sidebar-open .toast-region { display: none; }
/* A page-level message shown as a toast stays readable for screen readers in place. */
.pf-sr-only {
    position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.btn.is-busy, .btn.is-busy[disabled] { opacity: .85; cursor: progress; }
.pf-spinner {
    display: inline-block; width: 1em; height: 1em; vertical-align: -.15em;
    border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%;
    animation: pf-spin .8s linear infinite;
}
@keyframes pf-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .pf-spinner { animation: none; border-right-color: currentColor; opacity: .6; } }
/* A value put back after a failed save. */
.pf-restored { box-shadow: 0 0 0 2px #fde68a; }
textarea[aria-invalid="true"] { border-color: var(--danger); background: #fef2f2; }

/* ---------- EPA level bars ---------- */
.lvlbar { position: relative; height: 10px; background: #e5e7eb; border-radius: 999px; min-width: 0; }
.lvlbar-fill { height: 100%; border-radius: 999px; }
.lvlbar-fill.good { background: var(--ok); }
.lvlbar-fill.mid  { background: #f59e0b; }
.lvlbar-fill.none { background: transparent; }
.lvlbar-target { position: absolute; top: -3px; width: 2px; height: 16px; background: var(--navy); opacity: .65; }

.minibar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.minibar .lvlbar { flex: 1 1 40px; }
.minibar > span { min-width: 0; max-width: 100%; }

/* ---------- Rotation year-overview grid ---------- */
.rota-grid th, .rota-grid td { padding: 6px 6px; }
.rota-grid th { font-size: 11px; text-align: center; }
.rota-grid th:first-child { text-align: left; }
.rota-grid td:first-child, .rota-grid th:first-child {
    position: sticky; left: 0; background: #fff; z-index: 2;
    box-shadow: 1px 0 0 var(--line); min-width: 170px; max-width: 200px;
}
.rota-grid tr:hover td:first-child { background: #f8fafc; }
.rota-grid th.now, .rota-grid td.now { background: #ecfdf5; }
.rota-grid .rota-name { font-weight: 600; font-size: 13px; }
.rota-grid .svc {
    display: block; margin: 1px 0; padding: 2px 7px; border-radius: 6px;
    font-size: 11px; font-weight: 600; line-height: 1.5;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 130px;
}
.rota-grid .rota-group td {
    background: var(--navy) !important; color: #fff;
    font-size: 11.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
    padding: 5px 10px;
}
.rota-grid .rota-group .rota-group-label {
    position: sticky; left: 0; z-index: 3;
    box-shadow: 1px 0 0 rgba(255,255,255,.12);
}
.rota-grid .rota-group .rota-group-fill {
    padding: 0; box-shadow: none; max-width: none;
}
.rota-grid .rota-group .rota-group-month {
    text-align: center; box-shadow: none; min-width: 0; max-width: none;
}

.draft-grid td { min-width: 92px; }
.draft-grid .rota-name { min-width: 170px; }

/* Published rotation board: all twelve months fit; draft editor stays unchanged. */
.rotation-overview, .rotation-manage, .rota-overview-wrap { min-width: 0; }
.rotation-import { margin: 4px 0 12px; font-size: 13px; }
.rotation-import > summary { cursor: pointer; color: var(--teal-dark); font-weight: 600; }
table.data.rota-overview { table-layout: fixed; width: 100%; }
.rota-overview .rota-resident-col { width: 18%; }
table.data.rota-overview th, table.data.rota-overview td {
    padding: 4px 2px; text-align: center; white-space: normal;
    overflow-wrap: anywhere; font-size: 11px; letter-spacing: 0;
}
table.data.rota-overview th:first-child, table.data.rota-overview td:first-child {
    min-width: 0; max-width: none; position: static; box-shadow: none;
}
table.data.rota-overview .rota-name { text-align: left; font-size: 12px; font-weight: 600; text-transform: none; color: var(--text); }
table.data.rota-overview .rota-group th, table.data.rota-overview .rota-group td { background: var(--navy) !important; color: #fff; padding: 5px 3px; }
table.data.rota-overview .rota-group th { text-align: left; }
table.data.rota-overview .svc {
    max-width: none; padding: 4px 1px; font-size: 11px; line-height: 1.25;
    white-space: normal; overflow-wrap: anywhere; overflow: visible; text-overflow: clip;
}
.rota-overview .svc:focus-visible { outline: 2px solid var(--navy); outline-offset: 1px; }
.rota-legend { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 11px; margin-top: 12px; }
.rota-legend > span { max-width: 100%; overflow-wrap: anywhere; }
.rota-legend strong { padding: 2px 5px; border-radius: 4px; }
.rotation-overview .form-row > *, .rotation-manage .form-row > * { min-width: 0; }
.rotation-overview input, .rotation-manage input, .rotation-manage select { min-width: 0; max-width: 100%; }
table.data.rota-entries { table-layout: fixed; }
table.data.rota-entries th, table.data.rota-entries td { white-space: normal; overflow-wrap: anywhere; padding: 7px 5px; }
.rota-entries .rota-entry-value { min-width: 0; overflow-wrap: anywhere; }
.rota-entries .row-actions .rota-entry-value { display: flex; flex-wrap: wrap; gap: 4px; }
.rota-entries .row-actions .btn { max-width: 100%; white-space: normal; }
.rota-entries tr[id] { scroll-margin-top: 90px; }
@media screen and (max-width: 1100px) {
    table.data.rota-entries, .rota-entries tbody { display: block; }
    .rota-entries thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); }
    .rota-entries tr { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border: 1px solid var(--line); border-radius: 8px; margin: 10px 0; }
    table.data.rota-entries td { display: block; min-width: 0; text-align: left; padding: 8px; }
    .rota-entries td[data-label]::before { content: attr(data-label); display: block; font-size: 11px; font-weight: 600; color: var(--muted); margin-bottom: 3px; }
    .rota-entries .rota-entry-empty { grid-template-columns: 1fr; }
}
@media screen and (max-width: 700px) {
    table.data.rota-overview, .rota-overview tbody { display: block; }
    .rota-overview colgroup { display: none; }
    .rota-overview thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); }
    .rota-overview .rota-resident { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 10px 0; border: 1px solid var(--line); border-radius: 6px; }
    table.data.rota-overview .rota-name { grid-column: 1 / -1; font-size: 13px; padding: 8px; background: #f1f5f9; }
    table.data.rota-overview .rota-month { display: block; min-width: 0; padding: 5px; }
    table.data.rota-overview .svc { padding: 5px 2px; }
    .rota-overview .rota-month::before { content: attr(data-month); display: block; color: var(--muted); font-weight: 600; font-size: 11px; margin-bottom: 3px; }
    .rota-overview .rota-group { display: block; }
    table.data.rota-overview .rota-group th { display: block; padding: 6px 8px; }
    table.data.rota-overview .rota-group-fill { display: none; }
    .rotation-overview .span-2 { grid-column: auto; }
    .rotation-overview .form-row, .rotation-manage .form-row { grid-template-columns: minmax(0, 1fr); }
}
@media screen and (max-width: 480px) {
    .rota-entries tr { grid-template-columns: minmax(0, 1fr); }
}

/* Presentation calendar */
.cal-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; margin-top: 12px; }
.cal-dow { text-align: center; font-size: 11px; font-weight: 700; color: #64748b; padding: 4px 0; }
.cal-cell { min-height: 74px; min-width: 0; border: 1px solid var(--line); border-radius: 8px; padding: 4px; background: #fff; }
.cal-date-label, .cal-event-full, .cal-event-detail { display: none; }
.cal-cell.cal-empty { background: transparent; border: none; }
.cal-cell.cal-today { outline: 2px solid var(--navy); }
.cal-day { font-size: 11px; font-weight: 700; color: #64748b; }
.cal-ev { font-size: 10.5px; background: #eef2ff; border-radius: 5px; padding: 2px 5px; margin-top: 3px; line-height: 1.25; overflow: hidden; }
.cal-ev a { text-decoration: none; font-weight: 600; }
.cal-ev-who { display: block; color: #64748b; }
/* A talk that has already been given: muted + ticked, so the calendar reads
   "done" at a glance without relying on colour alone. */
.cal-ev-done { background: #f1f5f9; color: #64748b; }
.cal-ev-done .cal-ev-who { color: #94a3b8; }
/* Guest lecture: amber tint + a star on the speaker line, so an outside speaker
   is distinguishable from a resident at a glance (star, not colour alone). */
.cal-ev-guest { background: #fef3c7; }
.cal-ev-guest.cal-ev-done { background: #f1f5f9; }

/* Leave calendar. A clash day is marked by a red tint, a red outline AND a ⚠️
   in the day number, so it does not depend on colour alone. Pending requests get
   a dashed border to separate "asked" from "granted". */
.cal-cell.cal-clash { background: #fef2f2; outline: 2px solid var(--danger); }
.cal-ev-conf { background: #fef3c7; }
.cal-ev-pending { border: 1px dashed #94a3b8; background: transparent; }
/* Month-nav arrows jump back to #calendar after the reload; keep the card clear
   of the sticky topbar when the browser scrolls to the anchor. */
#calendar { scroll-margin-top: 64px; }
/* Public holiday: rose tint + the holiday name in the cell, so it never relies
   on colour alone. A clash outline still wins visually (declared above). */
.cal-cell.cal-holiday { background: #fff1f2; }
.cal-hol-name { font-size: 9.5px; color: #be123c; line-height: 1.2; margin-top: 1px;
                overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.b-holiday { background: #ffe4e6; color: #be123c; }
@media (max-width: 720px) { .cal-cell { min-height: 52px; } .cal-ev { font-size: 9px; } .cal-day { font-size: 9px; } }

/* ----- Presented (locked) schedule rows -----
   Presented talks are frozen records, not schedule entries. They get a green
   edge, a tick and a padlock — three cues, none of them colour-only, so the
   state survives greyscale printing and colour-blind readers. */
table.data tr.row-presented td { background: #f6fdf9; color: #475569; }
table.data tr.row-presented:hover td { background: #eefaf3; }
table.data tr.row-presented td:first-child { border-left: 3px solid var(--ok); }
.row-presented .done-tick {
    display: inline-block; width: 16px; height: 16px; line-height: 16px; text-align: center;
    border-radius: 50%; background: #dcfce7; color: var(--ok); font-size: 11px; font-weight: 700;
}
.lock-note { white-space: nowrap; }
/* Row buttons in two short rows (the main action above, Edit / Delete below)
   instead of one long nowrap line, which pushed the topic list off-screen. */
table.data .row-actions .action-stack { display: flex; flex-direction: column; align-items: flex-end; gap: 5px; }
.action-stack .action-row { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 5px; }
.action-stack .action-note { white-space: normal; max-width: 170px; text-align: right; }
table.data.topic-list td { vertical-align: top; }

/* Unread schedule-change rows in the feed: amber edge + a "new" badge, so an
   unseen reschedule stands out without relying on colour alone. */
table.data tr.feed-new td { background: #fffbeb; }
table.data tr.feed-new:hover td { background: #fef3c7; }
table.data tr.feed-new td:first-child { border-left: 3px solid var(--warn); }
/* A change to the viewer's OWN talk — strongest cue in the feed. */
table.data tr.feed-mine td:first-child { border-left: 3px solid var(--danger); }

/* A roster row needing attention (e.g. a missing IRB application). The ⚠️ badge
   in the row carries the meaning; this tint only helps find it in a long table. */
table.data tr.row-flagged td { background: #fffbeb; }
table.data tr.row-flagged td:first-child { border-left: 3px solid var(--danger); }

/* "Your presentation was changed" banner. */
.alert-card { border-left: 4px solid var(--warn); background: #fffbeb; }
.alert-card .alert-item { padding: 8px 0; border-bottom: 1px solid #fde68a; }
.alert-card .alert-item:last-of-type { border-bottom: none; }
.alert-card .alert-title { margin-bottom: 2px; }

/* When and where a schedule change takes place (topic_change_slot_html()). A
   reschedule shows "Was" muted, with the changed parts struck through, above
   "Now" in a teal box, with the changed parts highlighted. The labels carry the
   meaning, so it does not rely on colour alone. */
.slot { margin: 4px 0 2px; font-size: 13.5px; }
.slot .slot-date, .slot .slot-time { font-weight: 600; white-space: normal; }
/* "Presentation date": names the date, so it is not read as the assigned date. */
.slot-label { font-size: 12px; font-weight: 600; color: var(--muted); margin-right: 2px; }
.slot-new .slot-label { color: var(--teal-dark); }
.slot-tag {
    display: inline-block; min-width: 38px; padding: 0 7px; margin-right: 4px;
    border-radius: 999px; font-size: 11.5px; font-weight: 700; text-align: center;
    background: #e2e8f0; color: var(--muted); vertical-align: 1px;
}
.slot-old { color: var(--muted); }
.slot-old .slot-date, .slot-old .slot-time { font-weight: 400; }
.slot-old s { text-decoration-color: var(--danger); text-decoration-thickness: 2px; }
.slot-new {
    display: inline-block; max-width: 100%; padding: 5px 10px; border-radius: 8px;
    background: #e6f4f3; border-left: 4px solid var(--teal);
    color: var(--teal-dark); font-size: 15.5px; font-weight: 700;
}
.slot-new .slot-tag { background: var(--teal); color: #fff; }
.slot-new mark { background: #fde68a; color: var(--text); padding: 0 4px; border-radius: 4px; }
.slot-gone { color: var(--muted); text-decoration: line-through; }

/* A cancelled talk is shown in red and struck through: the feed row, its slot line,
   the "your presentation" alert, and the topic lists. The ✕ badge and tag say
   "cancelled" in words too, so this does not rely on colour. Declared after the
   feed-new amber, so red wins on an unread cancellation. */
.badge-alarm { background: var(--danger); color: #fff; font-weight: 700; }
.slot-cancelled { color: var(--danger); }
.slot-cancelled .slot-tag { background: var(--danger); color: #fff; }
.slot-cancelled .slot-label { color: var(--danger); }
.slot-cancelled .slot-struck { text-decoration: line-through; text-decoration-thickness: 2px; }
table.data tr.feed-cancelled td,
table.data tr.row-cancelled td { background: #fef2f2; }
table.data tr.feed-cancelled:hover td,
table.data tr.row-cancelled:hover td { background: #fee2e2; }
table.data tr.feed-cancelled td:first-child,
table.data tr.row-cancelled td:first-child { border-left: 3px solid var(--danger); }
table.data tr.row-cancelled .topic-title,
table.data tr.row-cancelled .topic-when {
    color: #7f1d1d; text-decoration: line-through;
    text-decoration-color: var(--danger); text-decoration-thickness: 2px;
}
.alert-card .alert-item.alert-cancelled {
    margin: 0 -12px; padding: 8px 12px; border-radius: 8px;
    background: #fef2f2; border-left: 3px solid var(--danger);
}
/* The topbar badge when the change is the viewer's own. */
.notif-bell.notif-personal { border-color: var(--danger); }
.draft-options {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr));
    gap: 10px;
}
.draft-option {
    display: flex; flex-direction: column; gap: 6px;
    border: 1px solid var(--line); border-radius: 8px;
    background: #fff; padding: 10px 12px;
}
.draft-option:hover { text-decoration: none; border-color: var(--teal); }
.draft-option.active {
    border-color: var(--teal);
    box-shadow: inset 4px 0 0 var(--teal), var(--shadow);
}
.draft-cell {
    width: 78px; min-height: 28px;
    border: 1px solid #cbd5e1; border-radius: 6px;
    padding: 4px 6px; text-align: center;
    font-size: 12px; font-weight: 700;
    background: var(--draft-cell-bg, #fff);
    color: var(--draft-cell-fg, var(--text));
}
.draft-cell:focus {
    outline: 2px solid rgba(14,124,123,.35);
    border-color: var(--teal);
}

/* ---------- Rotation planner ---------- */
.rules-editor {
    width: 100%; min-height: 300px; margin-top: 8px;
    font: 12.5px/1.5 Consolas, "Courier New", monospace;
    background: #0d2240; color: #d6e8ff; border-radius: 8px; border: 1px solid #1d3a63;
}
.rules-editor.short { min-height: 110px; }
.rules-editor.tall { min-height: 150px; }
.rules-editor:focus { outline: 2px solid rgba(14,124,123,.5); }
.rule-summary { cursor: pointer; font-weight: 600; }
.rules-help summary { cursor: pointer; font-weight: 600; font-size: 13.5px; }
.vault-details summary { cursor: pointer; font-weight: 600; color: var(--teal-dark); }
.plan-notes {
    background: #f8fafc; border: 1px solid var(--line); border-radius: 8px;
    padding: 10px 14px; font-size: 13px; color: #334155;
}
table.census td, table.census th { text-align: center; padding: 5px 6px; font-size: 12.5px; }
table.census td:first-child, table.census th:first-child { text-align: left; }
.note-editor { min-height: 70px; }
.note-editor.short { min-height: 60px; }
.note-editor.medium { min-height: 80px; }
.svc-inline { display: inline-block; }

/* ---------- Member directory ---------- */
.people { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr)); gap: 14px; }
.person {
    display: flex; gap: 12px; align-items: center;
    border: 1px solid var(--line); border-radius: var(--radius); padding: 12px 14px; background: #fff;
}
.person .p-name { font-weight: 600; font-size: 14px; }
.person .p-sub { font-size: 12.5px; color: var(--muted); }

/* ---------- Public pages (landing / login / report) ---------- */
body.public { display: block; background: var(--bg); }
.pub-header {
    background: linear-gradient(135deg, var(--navy) 0%, #173a66 60%, var(--teal-dark) 100%);
    color: #fff; padding: 0 0 60px;
}
.pub-nav { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; max-width: 1080px; margin: 0 auto; padding: 18px 22px; }
.pub-nav .brand-name { font-size: 16px; }
.pub-nav .spacer { flex: 1; }
.pub-nav a { color: #d8e4f0; }
.hero { max-width: 1080px; margin: 0 auto; padding: 50px 22px 0; }
.hero h1 { font-size: 34px; margin: 0 0 14px; max-width: 720px; }
.hero p { font-size: 17px; color: #c9d8e8; max-width: 640px; }
.hero .form-actions { margin-top: 26px; }
.pub-body { max-width: 1080px; margin: -34px auto 0; padding: 0 22px 50px; }
.pub-foot { text-align: center; color: var(--muted); font-size: 13px; padding: 26px; }

.auth-wrap { max-width: 420px; margin: 7vh auto; padding: 0 16px; }
.auth-logo { text-align: center; font-size: 40px; }
.auth-wrap h1 { text-align: center; font-size: 21px; }
/* Login page: the passkey button above the form, the other ways in under it. */
.passkey-login { margin-bottom: 4px; }
.passkey-login .flash { margin-bottom: 8px; }
.auth-or { text-align: center; color: var(--muted); font-size: 13px; margin: 12px 0 0; }
/* First-login progress line (mfa_verify.php, change_password.php). */
.steps { font-size: 13px; color: var(--muted); margin: 0 0 10px; }
.steps strong { color: var(--navy); }
.auth-alt { text-align: center; font-size: 14px; margin: 10px 0 0; }
.passkey-intro-dialog { width: min(520px, calc(100% - 32px)); max-height: calc(100dvh - 32px); padding: 0; border: 0; border-radius: 12px; color: var(--text); overflow-y: auto; }
.passkey-intro-dialog::backdrop { background: rgba(15, 23, 42, .55); }
.passkey-intro-dialog .card { margin: 0; box-shadow: none; }

.report-wrap { max-width: 760px; margin: 30px auto; padding: 0 16px 60px; }

.tracking-code {
    font-family: Consolas, monospace; font-size: 26px; font-weight: 700;
    background: #0d2240; color: #7ce3b1; border-radius: 10px;
    padding: 14px 20px; text-align: center; letter-spacing: .12em; margin: 14px 0;
}
.demo-account-list { margin: 8px 0 0; padding-left: 18px; }

.timeline { list-style: none; margin: 0; padding: 0; }
.timeline li { padding: 8px 0 8px 22px; border-left: 2px solid var(--line); margin-left: 8px; position: relative; font-size: 14px; }
.timeline li::before {
    content: ""; position: absolute; left: -7px; top: 13px;
    width: 12px; height: 12px; border-radius: 50%; background: var(--teal); border: 2px solid #fff;
}

/* ---------- Misc ---------- */
.muted { color: var(--muted); }
.small { font-size: 12.5px; }
.mt0 { margin-top: 0; } .mb0 { margin-bottom: 0; }
.mt-8 { margin-top: 8px; }
.mt-10 { margin-top: 10px; }
.mt-12 { margin-top: 12px; }
.mt-14 { margin-top: 14px; }
.mt-16 { margin-top: 16px; }
.mt-18 { margin-top: 18px; }
.my-6-10 { margin: 6px 0 10px; }
.my-10 { margin: 10px 0; }
.mb-10 { margin-bottom: 10px; }
.mb-14 { margin-bottom: 14px; }
.ml-6 { margin-left: 6px; }
.text-right { text-align: right; }
.text-center { text-align: center; }
.span-2 { grid-column: span 2; }
.align-end { align-self: end; }
.align-items-end { align-items: flex-end; }
.align-items-center { align-items: center; }
.full-width { width: 100%; }
.w-24p { width: 24%; }
.w-26p { width: 26%; }
.w-30p { width: 30%; }
.w-45p { width: 45%; }
.w-140 { width: 140px; }
.mw-220 { max-width: 220px; }
.mw-260 { max-width: 260px; }
.max-480 { max-width: 480px; }
.max-640 { max-width: 640px; }
.min-w-0 { min-width: 0; }
.min-w-180 { min-width: min(100%, 180px); }
.nowrap { white-space: nowrap; }
/* Solid light button for the dark public hero — high contrast so the
   anonymous-risk-report CTA is clearly visible (was navy-on-navy before). */
.btn.on-dark { background: #fff; color: var(--navy) !important; border-color: #fff; }
.btn.on-dark:hover { background: #e6eef7; border-color: #e6eef7; }
.hidden-field { display: none; }
.card-muted { background: #f8fafc; box-shadow: none; }
.divider-line { border: none; border-top: 1px solid var(--line); margin: 16px 0; }
.brand-mark-inline { font-size: 26px; }
.list-tight { margin: 6px 0 0; padding-left: 20px; }
.month-label { margin: 0 6px; }
.avatar.small-avatar { width: 28px; height: 28px; font-size: 11px; flex-basis: 28px; }
.avatar.navy-avatar { background: var(--navy); }
.checkbox-line.flush { margin: 0; }
.flex { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.flex .spacer { flex: 1; }
.section-title { margin: 26px 0 12px; font-size: 17px; }
.empty { color: var(--muted); font-style: italic; padding: 14px 4px; }
.filters { display: flex; gap: 10px; flex-wrap: wrap; align-items: end; margin-bottom: 14px; }
.filters label { font-size: 12px; font-weight: 600; display: block; margin-bottom: 3px; }
.filters .field { min-width: min(100%, 160px); max-width: 100%; }
.chip-row { display: flex; gap: 8px; flex-wrap: wrap; margin: 6px 0 14px; }
.chip-row a { border: 1px solid var(--line); padding: 4px 12px; border-radius: 999px; font-size: 13px; background: #fff; }
.chip-row a.active { background: var(--navy); color: #fff; border-color: var(--navy); }
.chip-row a:hover { text-decoration: none; border-color: var(--teal); }
.chip-row .spacer { flex: 1; }

/* ---------- Responsive ---------- */
@media (max-width: 920px) {
    body.app { flex-direction: column; }
    .sidebar { position: fixed; left: -260px; transition: left .2s ease; z-index: 50; height: 100vh; height: 100dvh; }
    .sidebar.open { left: 0; box-shadow: 0 0 40px rgba(0,0,0,.4); }
    .sidebar-close { display: inline-flex; }
    .sidebar.open ~ .sidebar-backdrop { display: block; position: fixed; inset: 0; z-index: 45; background: rgba(15,23,42,.45); }
    body.sidebar-open { overflow: hidden; }
    .menu-btn { display: inline-block; }
    .cols-2, .cols-3, .cols-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .userchip-info { display: none; }
}
@media (max-width: 600px) {
    .cols-2, .cols-3, .cols-4 { grid-template-columns: minmax(0, 1fr); }
    .content { padding: 14px; }
}
@media print {
    @page { size: A4 landscape; margin: 10mm; }
    .sidebar, .topbar, .page-foot, .btn, .menu-btn, .no-print { display: none !important; }
    body { background: #fff; }
    .card { box-shadow: none; border: none; padding: 0; }
    .content { padding: 0; max-width: none; }
    .table-wrap { overflow: visible; }
    .rota-grid td:first-child, .rota-grid th:first-child { position: static; box-shadow: none; }
    .rota-grid .svc { max-width: none; font-size: 9px; padding: 1px 4px; }
    .rota-grid th, .rota-grid td { padding: 3px 4px; }
    .cookie-overlay { display: none; }
}

/* ---------- Cookie consent (non-blocking notice) ---------- */
.cookie-overlay {
    position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 1000;
    display: flex; justify-content: center;
    pointer-events: none; /* the empty area lets clicks through — never blocks the page */
}
.cookie-modal {
    pointer-events: auto; /* but the notice card itself is interactive */
    background: #fff; color: var(--text);
    width: 100%; max-width: 460px; margin: 0;
    border-radius: var(--radius); box-shadow: var(--shadow);
    padding: 18px 20px; font-size: 14px; line-height: 1.5;
    max-height: calc(100vh - 32px); overflow: auto;
}
.cookie-modal h2 { margin: 0 0 8px; font-size: 17px; }
.cookie-modal a { color: var(--teal-dark); text-decoration: underline; }
.cookie-actions { margin-top: 14px; display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.cookie-custom { margin-top: 12px; border-top: 1px solid var(--line); padding-top: 10px; }
.cookie-custom summary { cursor: pointer; font-weight: 600; color: var(--teal-dark); }
.cookie-cat { display: flex; gap: 9px; align-items: flex-start; margin: 12px 0; font-size: 13.5px; }
.cookie-cat input { margin-top: 3px; }

/* ---------- Quick EPA assessment (assess.php / PWA) ---------- */
.lvl-picker { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; margin-top: 4px; }
.lvl-opt { position: relative; }
.lvl-opt input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.lvl-opt .lvl-box {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
    min-height: 68px; padding: 8px 4px; text-align: center; cursor: pointer;
    border: 2px solid var(--line); border-radius: 10px; background: #fff;
}
.lvl-opt .lvl-box strong { font-size: 17px; color: var(--navy); }
.lvl-opt .lvl-box small { font-size: 11px; color: var(--muted); line-height: 1.25; }
.lvl-opt input:checked + .lvl-box { border-color: var(--teal); background: #e0f2f1; }
.lvl-opt input:checked + .lvl-box strong { color: var(--teal-dark); }
.lvl-opt input:focus-visible + .lvl-box { outline: 2px solid rgba(14,124,123,.35); }

.req-item { display: flex; gap: 12px; align-items: flex-start; padding: 12px 0; border-bottom: 1px solid var(--line); }
.req-item:last-child { border-bottom: none; padding-bottom: 4px; }
.req-main { flex: 1; min-width: 0; }
.req-actions { display: flex; flex-direction: column; gap: 6px; align-items: stretch; flex: 0 0 auto; }
.feedback-note { background: #f8fafc; border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; margin-top: 6px; font-size: 13.5px; }

.notif-bell { white-space: nowrap; }
.notif-count {
    display: inline-block; margin-left: 4px; padding: 0 6px;
    background: var(--danger); color: #fff; border-radius: 999px;
    font-size: 11px; font-weight: 700; line-height: 1.6;
}

@media (max-width: 560px) {
    .lvl-picker { gap: 6px; }
    .lvl-opt .lvl-box { min-height: 60px; padding: 6px 2px; }
    .req-item { flex-direction: column; gap: 8px; }
    .req-actions { flex-direction: row; flex-wrap: wrap; }
}

/* ---------- Monthly rotation evaluations (evaluations.php, evaluation.php) ---------- */
.row-muted td { color: var(--muted); background: #f8fafc; }
.eval-assign select { min-width: 190px; }
.eval-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 170px), 1fr)); gap: 10px 18px; margin: 14px 0 6px; }
.eval-facts > div > span { display: block; font-size: 12.5px; color: var(--muted); }
.eval-facts strong { font-size: 14.5px; }
.external-evaluation { margin: 0 auto; max-width: 960px; }
.elective-period { border: 1px solid var(--line); border-radius: 8px; padding: 14px; margin: 12px 0; }
.elective-period legend { padding: 0 6px; font-weight: 600; }
.elective-period .form-row > * { min-width: 0; }
.elective-period input, .elective-period select { max-width: 100%; min-width: 0; }
[data-elective-plan] [hidden] { display: none !important; }
#electiveform, #draft-elective { scroll-margin-top: 80px; }
.eval-item { border: 0; border-top: 1px solid var(--line); margin: 0; padding: 12px 0 10px; min-width: 0; }
.eval-item:first-of-type { border-top: 0; padding-top: 2px; }
.eval-item legend { float: left; width: 100%; padding: 0; margin-bottom: 8px; font-size: 14.5px; font-weight: 600; }
.eval-item legend + * { clear: left; }
.eval-item.has-error legend { color: var(--danger); }
.eval-scale { display: flex; flex-wrap: wrap; gap: 6px; }
.eval-pill { position: relative; margin: 0 !important; font-weight: 600; cursor: pointer; }
.eval-pill input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.eval-pill span {
    display: inline-block; min-width: 42px; padding: 7px 11px; text-align: center;
    border: 1px solid #cbd5e1; border-radius: 8px; background: #fff; font-size: 14px;
}
.eval-pill:hover span { border-color: var(--teal); }
.eval-pill input:focus-visible + span { outline: 2px solid rgba(14,124,123,.45); outline-offset: 1px; }
.eval-pill input:checked + span { background: var(--teal); border-color: var(--teal); color: #fff; }
.eval-pill.eval-na input:checked + span { background: #64748b; border-color: #64748b; }
.eval-pill.eval-pass input:checked + span { background: var(--ok); border-color: var(--ok); }
.eval-pill.eval-fail input:checked + span { background: var(--danger); border-color: var(--danger); }
.eval-overall { margin-top: 10px; border-top: 1px solid var(--line); }
.eval-view td:first-child { width: 80%; }
.w-160 { max-width: 160px; }
@media (max-width: 560px) {
    .eval-pill span { min-width: 38px; padding: 7px 8px; }
}

/* Rotation draft and archived matrices keep twelve months and every control. */
.rota-matrix-wrap { min-width: 0; width: 100%; }
table.data.rota-matrix { width: 100%; table-layout: fixed; }
.rota-matrix .rota-matrix-col { width: 18%; }
table.data.rota-matrix th, table.data.rota-matrix td {
    min-width: 0; max-width: none; padding: 4px 2px; text-align: center;
    font-size: 11px; white-space: normal; overflow-wrap: anywhere; letter-spacing: 0;
}
table.data.rota-matrix th:first-child, table.data.rota-matrix td:first-child {
    min-width: 0; max-width: none; position: static; box-shadow: none;
}
table.data.rota-matrix .rota-matrix-name {
    font-size: 12px; text-align: left; text-transform: none; background: #fff;
}
table.data.rota-matrix .rota-group > th, table.data.rota-matrix .rota-group > td {
    background: var(--navy); color: #fff; padding: 5px 2px;
}
table.data.rota-matrix .rota-group-label { text-align: left; }
table.data.rota-matrix .svc {
    max-width: 100%; padding: 3px 2px; white-space: normal; overflow: visible;
    overflow-wrap: anywhere; text-overflow: clip; font-size: 11px; line-height: 1.3;
}
table.data.rota-matrix .draft-cell {
    width: 100%; min-width: 0; max-width: 100%; padding: 4px 1px;
    min-height: 30px; font-size: 11px;
}
.draft-cell-value { display: block; margin-top: 3px; font-size: 10px; line-height: 1.3; overflow-wrap: anywhere; }
.draft-cell-value:empty { display: none; }
.census-breakdown > summary { cursor: pointer; min-height: 24px; }
.census-classes { display: block; font-size: 10px; line-height: 1.35; overflow-wrap: anywhere; }
@media screen and (max-width: 1100px) {
    table.data.draft-grid.rota-matrix, .draft-grid.rota-matrix > tbody { display: block; }
    .draft-grid.rota-matrix > colgroup { display: none; }
    table.data.draft-grid.rota-matrix > tbody > tr {
        display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
        margin-bottom: 12px; border: 1px solid var(--line);
    }
    table.data.draft-grid.rota-matrix .rota-matrix-name {
        grid-column: 1 / -1; padding: 9px; background: #f1f5f9;
    }
    table.data.draft-grid.rota-matrix .rota-matrix-month { padding: 6px; border: 1px solid var(--line); }
    .draft-grid.rota-matrix .rota-matrix-month::before {
        content: attr(data-month); display: block; margin-bottom: 4px; color: var(--muted); font-size: 11px;
    }
    table.data.draft-grid.rota-matrix > tbody > tr.rota-group { display: block; }
    table.data.draft-grid.rota-matrix .rota-group > th { display: block; padding: 8px; }
    table.data.draft-grid.rota-matrix .rota-group > .rota-group-month { display: none; }
}
@media screen and (max-width: 700px) {
    table.data.rota-matrix, .rota-matrix > tbody { display: block; }
    .rota-matrix > colgroup { display: none; }
    .rota-matrix > thead {
        position: absolute; width: 1px; height: 1px; overflow: hidden;
        clip-path: inset(50%); white-space: nowrap;
    }
    table.data.rota-matrix > tbody > tr {
        display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
        margin-bottom: 12px; border: 1px solid var(--line);
    }
    table.data.rota-matrix .rota-matrix-name {
        grid-column: 1 / -1; padding: 9px; background: #f1f5f9;
    }
    table.data.rota-matrix .rota-matrix-month { padding: 6px; border: 1px solid var(--line); }
    .rota-matrix .rota-matrix-month::before {
        content: attr(data-month); display: block; margin-bottom: 4px; color: var(--muted); font-size: 11px;
    }
    table.data.rota-matrix > tbody > tr.rota-group { display: block; }
    table.data.rota-matrix .rota-group > th { display: block; padding: 8px; }
    table.data.rota-matrix .rota-group > .rota-group-month { display: none; }
}

/* Shared tables keep their original cells and forms. app.js supplies labels and
   switches only tables whose own container is too narrow for readable columns. */
.table-cell-label { display: none; }
@media screen {
    table.accounts-table.table-stacked > colgroup { display: none; }
    table.accounts-table.table-stacked .row-actions { grid-column: 1 / -1; }
    .table-stacked .account-actions { justify-content: flex-start; }
    table.data.table-stacked, .table-stacked > thead,
    .table-stacked > tbody, .table-stacked > tfoot { display: block; }
    .table-stacked .responsive-table-head:not(.table-head-controls),
    .table-stacked .table-head-controls > :not(.table-head-control) {
        position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden;
        clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap;
    }
    .table-stacked .responsive-table-row, .table-stacked .table-head-controls {
        display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr));
        border: 1px solid var(--line); border-radius: 8px; margin: 10px 0;
    }
    table.data.table-stacked .responsive-table-row > td,
    table.data.table-stacked .responsive-table-row > th {
        display: block; width: auto; min-width: 0; max-width: none; padding: 9px 10px;
        text-align: left; white-space: normal;
    }
    .table-stacked .responsive-table-row > :first-child,
    .table-stacked .responsive-table-row > [colspan] { grid-column: 1 / -1; }
    .table-stacked .responsive-table-row > :first-child { background: #f8fafc; }
    .table-stacked .table-cell-label {
        display: block; margin-bottom: 4px; font-size: 12px; font-weight: 600;
        color: var(--muted); line-height: 1.4;
    }
    .table-stacked .row-actions .action-stack { align-items: flex-start; }
    .table-stacked .action-stack .action-row { justify-content: flex-start; }
    .table-stacked .action-stack .action-note { text-align: left; max-width: 100%; }
    .table-stacked .eval-assign select { max-width: 100%; min-width: 0; }
}
@media screen and (max-width: 600px) {
    /* Keep the plain-table fallback usable when JavaScript is unavailable. */
    table.accounts-table:not(.table-stacked) col { width: auto; }
    table.accounts-table:not(.table-stacked) .account-actions .btn { white-space: normal; }
    .topbar { padding: 10px 14px; gap: 8px; }
    .page-title { flex-basis: calc(100% - 60px); }
    .userchip { gap: 8px; }
    .card { padding: 14px; }
    .form-row, .grid { min-width: 0; }
    .grid > .span-2 { grid-column: 1 / -1; }
    .filters .field { flex: 1 1 160px; }
    .copy-field { flex-wrap: wrap; }
    .cal-grid { grid-template-columns: minmax(0, 1fr); gap: 8px; }
    .cal-grid > .cal-dow, .cal-grid > .cal-empty,
    .cal-day-number, .cal-event-short { display: none; }
    .cal-date-label, .cal-event-full { display: inline; }
    .cal-event-detail { display: block; color: var(--muted); margin-top: 3px; }
    .cal-cell { padding: 8px; min-height: 0; }
    .cal-day { font-size: 12px; }
    .cal-ev { font-size: 13px; padding: 6px 8px; overflow: visible; }
    .cal-hol-name { display: block; -webkit-line-clamp: unset; overflow: visible; font-size: 12px; }
    table.data:not(.table-stacked):not(.rota-grid):not(.census) th,
    table.data:not(.table-stacked):not(.rota-grid):not(.census) td { padding: 6px 1px; }
    table.data:not(.table-stacked) .badge { padding: 2px 1px; }
    table.data:not(.table-stacked) .btn { padding: 4px 2px; }
}

/* Optional conference QR pilot and the resident's focused confirmation page. */
.attendance-qr-code { width: min(100%, 340px); margin: 18px auto; }
.attendance-qr-code svg { display: block; width: 100%; height: auto; background: #fff; }
.attendance-qr-display { max-width: 800px; padding: 24px; margin: 0 auto; text-align: center; }
.attendance-qr-display .attendance-qr-code { width: min(90vw, 480px); }
.attendance-checkin { max-width: 680px; margin-inline: auto; }
.attendance-checkin .form-actions { flex-wrap: wrap; }

/* Topic scheduling keeps attendance as the primary action and the month visible
   on small screens. These rules deliberately leave other calendars unchanged. */
.topics-page .topic-section-heading { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin-bottom: 16px; }
.topics-page .topic-section-heading h2 { margin: 0; }
.topics-page .topic-section-heading > .spacer { flex: 1; }
.topics-page .topic-page-intro { margin: 0 0 18px; color: var(--muted); }
.topics-page .topics-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; margin-bottom: 18px; }
.topics-page .topics-toolbar > p { flex: 1 1 220px; margin: 0; }
.topics-page .topic-list-filters { margin-bottom: 16px; }
.topics-page .topic-list-filters > summary { display: flex; align-items: center; min-height: 44px; padding: 8px 0; font-weight: 600; color: var(--navy); cursor: pointer; }
.topics-page .topic-list-filters > summary::after { content: ' ▾'; margin-left: 8px; }
.topics-page .topic-list-filters[open] > summary::after { content: ' ▴'; }
.topics-page .topic-list { width: 100%; }
.topics-page .topic-list .topic-title > strong { color: var(--navy); font-weight: 700; }
.topics-page .topic-list .topic-title + .hint { margin-top: 4px; }
.topics-page .topic-list td:first-child { min-width: 108px; }
.topics-page .topic-list .row-actions { width: 250px; }
.topics-page .topic-participants { min-width: 125px; }
.topics-page .topic-attendee-names > summary { cursor: pointer; color: var(--teal); min-height: 44px; }
.topics-page .topic-attendee-names > summary strong { white-space: nowrap; }
.topics-page .topic-attendee-names ul { margin: 6px 0 0; padding-left: 20px; overflow-wrap: anywhere; }
.topics-page .topic-attendee-names li + li { margin-top: 4px; }
.topics-page .topic-main-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px; }
.topics-page .topic-main-actions > .btn { display: inline-flex; justify-content: center; align-items: center; }
.topics-page .topic-attendance-link { display: inline-flex; align-items: center; justify-content: center; gap: 6px; text-align: center; white-space: normal; }
.topics-page .topic-more-actions { margin-top: 8px; font-size: 12px; text-align: right; }
.topics-page .topic-more-actions > summary { display: inline-flex; align-items: center; min-height: 36px; color: var(--muted); cursor: pointer; }
.topics-page .topic-more-actions > summary::after { content: ' ▾'; margin-left: 6px; }
.topics-page .topic-more-actions[open] > summary::after { content: ' ▴'; }
.topics-page .topic-more-actions > .flex { justify-content: flex-end; margin-top: 8px; }
.topics-page .topic-more-actions .inline-form { display: inline-flex; max-width: 100%; }
.topics-page .topic-calendar .cal-cell { min-height: 102px; }
.topics-page .topic-calendar .cal-cell.is-selected { background: #edf9f8; border-color: var(--teal); }
.topics-page .topic-cal-day-button { display: inline-flex; justify-content: center; align-items: center; min-width: 30px; min-height: 30px; padding: 2px 6px; border: 0; border-radius: 6px; background: transparent; color: var(--navy); font: inherit; font-size: 12px; font-weight: 700; cursor: pointer; }
.topics-page .topic-cal-day-button:hover { background: #e3edee; }
.topics-page .topic-cal-day-button[aria-pressed="true"] { color: #fff; background: var(--teal); }
.topics-page .topic-cal-day-button:focus-visible { outline: 2px solid var(--navy); outline-offset: 2px; }
.topics-page .topic-calendar .cal-ev { padding: 5px 6px; line-height: 1.4; }
.topics-page .topic-calendar .cal-ev .topic-attendance-link { margin-top: 5px; }
.topics-page .topic-cal-dots { display: none; }
.topics-page .topic-day-agenda { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--line); }
.topics-page .topic-day-agenda h3 { margin: 0 0 12px; font-size: 15px; }
.topics-page .topic-agenda-event { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.topics-page .topic-agenda-event:last-child { border-bottom: 0; padding-bottom: 0; }
.topics-page .topic-agenda-event > .topic-agenda-detail { flex: 1 1 180px; min-width: 0; }
.topics-page .topic-agenda-event .topic-title { color: var(--navy); font-weight: 700; }
.topics-page .topic-day-agenda[hidden], .topics-page .topic-agenda-event[hidden],
.topics-page [data-topic-agenda-date][hidden] { display: none; }

/* The individual activity page pairs QR with the roster without shrinking the
   checkbox targets to the size of the native control. */
.attendance-topic .attendance-topic-header .form-actions { margin-top: 0; margin-bottom: 16px; }
.attendance-topic .attendance-topic-header h2 { margin: 0 0 12px; }
.attendance-topic .attendance-topic-header .card-sub { margin: 0; }
.attendance-topic .attendance-topic-roster .checkbox-line { min-height: 44px; }
.attendance-topic .attendance-topic-roster > .card-sub { margin: 10px 0 14px; }
.attendance-topic .attendance-topic-checkbox { display: inline-flex; justify-content: center; align-items: center; gap: 8px; min-width: 44px; min-height: 44px; margin: 0; cursor: pointer; }
.attendance-topic .attendance-topic-checkbox input { flex: 0 0 22px; width: 22px; height: 22px; margin: 0; accent-color: var(--teal); }
.attendance-topic .attendance-topic-actions { align-items: center; padding-top: 8px; }
.attendance-topic .attendance-topic-actions > .btn { min-height: 44px; }
.attendance-focus-note { padding: 12px; border-left: 4px solid var(--teal); background: var(--bg); }
.attendance-topic .attendance-focused-resident { background: #e8f5f3; outline: 2px solid var(--teal); outline-offset: -2px; scroll-margin-top: 100px; }
.attendance-resident-detail .form-actions { margin-top: 0; }
.attendance-resident-summary { margin-top: 20px; }
.attendance-resident-report > summary { cursor: pointer; min-height: 44px; padding: 8px 0; }
.attendance-resident-report > summary h2 { display: inline; margin: 0 12px 0 0; }
.attendance-resident-report > summary:focus-visible { outline: 2px solid var(--teal); outline-offset: 4px; }
.attendance-resident-report[open] > summary { margin-bottom: 16px; }
.attendance-resident-report[open] .attendance-report-expand,
.attendance-resident-report:not([open]) .attendance-report-collapse { display: none; }
.attendance-resident-ledger td { vertical-align: top; }
.attendance-resident-ledger td:nth-child(2) { min-width: 180px; overflow-wrap: anywhere; }
.attendance-resident-ledger td:nth-child(5) { min-width: 210px; }
.attendance-resident-ledger .row-actions .btn { min-height: 36px; }

@media screen and (max-width: 900px) {
    .topics-page .topic-list.table-stacked .row-actions { width: auto; grid-column: 1 / -1; }
    .topics-page .topic-list.table-stacked .topic-main-actions { justify-content: flex-start; }
    .topics-page .topic-list.table-stacked .topic-more-actions { text-align: left; }
    .topics-page .topic-list.table-stacked .topic-more-actions > .flex { justify-content: flex-start; }
}
@media screen and (max-width: 600px) {
    .attendance-resident-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .attendance-resident-detail .chip-row { flex-wrap: wrap; }
    .attendance-resident-ledger:not(.table-stacked), .attendance-resident-ledger:not(.table-stacked) > tbody { display: block; }
    .attendance-resident-ledger:not(.table-stacked) > thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); }
    .attendance-resident-ledger:not(.table-stacked) > tbody > tr { display: block; margin: 12px 0; border: 1px solid var(--line); border-radius: 8px; }
    table.data.attendance-resident-ledger:not(.table-stacked) > tbody > tr > td { display: block; min-width: 0; width: auto; padding: 9px 10px; text-align: left; }
    .attendance-resident-ledger:not(.table-stacked) td[data-label]::before { content: attr(data-label); display: block; margin-bottom: 4px; font-size: 12px; font-weight: 600; color: var(--muted); }
    .topics-page .topic-section-heading { align-items: flex-start; }
    .topics-page table.topic-list:not(.table-stacked),
    .topics-page .topic-list:not(.table-stacked) > thead,
    .topics-page .topic-list:not(.table-stacked) > tbody { display: block; }
    .topics-page .topic-list:not(.table-stacked) > thead,
    .topics-page .topic-list:not(.table-stacked) > tbody > tr:has(> th) { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); }
    .topics-page .topic-list:not(.table-stacked) > tbody > tr:has(> td) { display: block; margin: 12px 0; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
    .topics-page table.data.topic-list:not(.table-stacked) > tbody > tr > td { display: block; width: auto; padding: 9px 10px; text-align: left; }
    .topics-page .topic-list:not(.table-stacked) td[data-label]::before { content: attr(data-label); display: block; margin-bottom: 4px; font-size: 12px; font-weight: 600; color: var(--muted); }
    .topics-page .topic-list:not(.table-stacked) .row-actions { width: auto; }
    .topics-page .topic-list:not(.table-stacked) .topic-main-actions { justify-content: flex-start; }
    .topics-page .topic-list:not(.table-stacked) .topic-more-actions { text-align: left; }
    .topics-page .topic-list:not(.table-stacked) .topic-more-actions > .flex { justify-content: flex-start; }
    .topics-page .topic-list.table-stacked .responsive-table-row { grid-template-columns: minmax(0, 1fr); }
    .topics-page .topic-list.table-stacked .action-stack { width: 100%; }
    .topics-page .topic-list.table-stacked .topic-main-actions { width: 100%; }
    .topics-page .topic-calendar .cal-grid { grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 3px; }
    .topics-page .topic-calendar .cal-grid > .cal-dow { display: block; font-size: 10px; }
    .topics-page .topic-calendar .cal-grid > .cal-empty { display: block; }
    .topics-page .topic-calendar .cal-cell { min-height: 55px; padding: 2px; text-align: center; border-radius: 6px; }
    .topics-page .topic-calendar .cal-day-number { display: inline; }
    .topics-page .topic-calendar .cal-date-label,
    .topics-page .topic-calendar .cal-ev,
    .topics-page .topic-calendar .cal-hol-name { display: none; }
    .topics-page .topic-cal-day-button { width: 100%; min-width: 0; min-height: 34px; padding: 2px; font-size: 12px; }
    .topics-page .topic-cal-dots { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 3px; min-height: 9px; padding: 2px 0; }
    .topics-page .topic-cal-dots > span { display: block; width: 5px; height: 5px; border-radius: 50%; background: var(--teal); }
    .topics-page .topic-cal-dots > .topic-cal-dot-done { background: var(--muted); }
    .topics-page .topic-cal-dots > .topic-cal-dot-guest { background: var(--warn); }
    .topics-page .topic-agenda-event { align-items: flex-start; }
    .topics-page .topic-agenda-event .topic-main-actions { width: 100%; justify-content: flex-start; }
    .attendance-topic .attendance-topic-header .form-actions > .btn { min-height: 44px; }
    .attendance-topic .attendance-topic-actions { padding-top: 12px; border-top: 1px solid var(--line); }
    .attendance-topic .attendance-topic-actions > .btn { flex: 1 1 160px; text-align: center; }
}
@media print {
    .attendance-qr-display { padding: 0; }
    .attendance-qr-code { break-inside: avoid; }
}