/* ============================================================
   OR Case & Staffing Log — mobile-first clinical UI
   ============================================================ */

:root {
  /* Surfaces / ink */
  --bg:#eef2f6; --surface:#ffffff; --surface-2:#f5f8fb; --card:var(--surface);
  --ink:#16202b; --ink-2:#3a4754; --muted:#5c6875;
  --line:#e3e8ee; --line-strong:#c8d2dd;

  /* Brand */
  --brand:#1a6a86; --brand-dark:#114a60; --brand-light:#e4f0f4; --accent:#0f8f83;

  /* Status: OR utilization */
  --status-cancelled:#c0392b; --status-delayed:#a56a00; --status-ranover:#5b4bd1;
  /* Status: extra-site */
  --status-requested:#1a6a86; --status-covered:#157347;
  --status-not-covered:#c0392b; --status-scancelled:#5c6875;
  /* Legacy aliases */
  --red:var(--status-cancelled); --amber:var(--status-delayed); --violet:var(--status-ranover);

  --today:#fff4d6; --today-line:#8a6400;   /* darkened: white-on-gold ring now 5.4:1 (AA) */

  --ok-bg:#e6f4ea; --ok-ink:#1a5c34;
  --err-bg:#fdecea; --err-ink:#8f1a12;
  --warn-bg:#fff7e0; --warn-ink:#7a5c00;

  --focus-ring:rgba(26,106,134,.35);

  --r-sm:8px; --r-md:10px; --r-lg:14px; --r-pill:999px; --radius:var(--r-lg);
  --shadow-sm:0 1px 2px rgba(16,33,51,.05);
  --shadow-md:0 1px 2px rgba(16,33,51,.04), 0 6px 18px rgba(16,33,51,.07);
  --shadow-lg:0 8px 28px rgba(16,33,51,.16);
  --shadow:var(--shadow-md);
}

* { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; }
body {
  margin:0; color:var(--ink); background:var(--bg);
  font:15px/1.55 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  min-height:100vh;
}
a { color:var(--brand); text-decoration:none; }
a:hover { text-decoration:underline; }
h1 { font-size:23px; } h2 { font-size:21px; }
.mt { margin-top:20px; }

/* ---- Topbar (sticky, notch-aware) ---- */
.topbar {
  position:sticky; top:0; z-index:40;
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:max(13px, env(safe-area-inset-top)) 20px 13px;
  background:linear-gradient(135deg, var(--brand-dark), var(--brand));
  color:#fff; box-shadow:var(--shadow-sm);
}
.topbar .brand { font-weight:700; letter-spacing:.2px; font-size:16px; }
.who { display:none; }
@media (min-width:768px){
  .who { display:flex; gap:16px; font-size:13px; align-items:center; }
  .who-link { color:#fff; text-decoration:underline; }
}

/* ---- Content wrap (clears fixed bottom bar; notch gutters) ---- */
.wrap {
  max-width:1040px; margin:0 auto;
  padding:22px max(14px, env(safe-area-inset-left)) calc(80px + env(safe-area-inset-bottom)) max(14px, env(safe-area-inset-right));
}
@media (min-width:768px){ .wrap { padding-bottom:40px; } }
/* Hash-anchor jumps (#add, #day) must clear the sticky topbar */
#add, #day { scroll-margin-top: calc(60px + env(safe-area-inset-top)); }

/* ============================================================
   Navigation — bottom tab bar (mobile) / pill row (desktop)
   ============================================================ */
.tabbar {
  position:fixed; inset:auto 0 0 0; z-index:50;
  display:grid; grid-template-columns:repeat(5,1fr); align-items:stretch;
  background:var(--surface);   /* solid fallback for Safari < 16.2 (no color-mix) */
  background:color-mix(in srgb, var(--surface) 92%, transparent);
  -webkit-backdrop-filter:saturate(180%) blur(12px); backdrop-filter:saturate(180%) blur(12px);
  border-top:1px solid var(--line); padding-bottom:env(safe-area-inset-bottom);
  box-shadow:0 -1px 0 rgba(16,33,51,.04), 0 -8px 24px rgba(16,33,51,.06);
}
.tabbar-item {
  position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:2px; min-height:56px; padding:7px 0 5px; font-size:11px; font-weight:600;
  color:var(--muted); text-decoration:none;
}
.tabbar-item:hover { text-decoration:none; }
.tabbar-item .ti { width:24px; height:24px; }
.tabbar-item.on { color:var(--brand); }
.tabbar-item.on::before { content:""; position:absolute; top:0; width:28px; height:3px; border-radius:0 0 3px 3px; background:var(--brand); }
.tabbar-add {
  align-self:center; justify-self:center; width:52px; height:52px; border-radius:50%;
  display:grid; place-items:center; color:#fff; background:var(--brand); box-shadow:var(--shadow-md); margin-top:-14px;
}
.tabbar-add:hover { text-decoration:none; background:var(--brand-dark); }
.tabbar-add:active { transform:scale(.94); }
.tabbar-more { position:static; }
.tabbar-more > summary { list-style:none; cursor:pointer; }
.tabbar-more > summary::-webkit-details-marker { display:none; }
.more-menu {
  position:fixed; right:10px; bottom:calc(64px + env(safe-area-inset-bottom));
  display:flex; flex-direction:column; min-width:180px;
  background:var(--surface); border:1px solid var(--line); border-radius:12px;
  box-shadow:var(--shadow-lg); overflow:hidden; z-index:60;
}
.more-menu a { padding:14px 16px; min-height:48px; display:flex; align-items:center; color:var(--ink); }
.more-menu a:hover { background:var(--surface-2); text-decoration:none; }

@media (min-width:768px){
  .tabbar {
    position:static; display:flex; gap:6px; grid-template-columns:none;
    background:none; backdrop-filter:none; -webkit-backdrop-filter:none; border:0; box-shadow:none; padding:0; margin-bottom:20px;
  }
  .tabbar-item { flex-direction:row; min-height:40px; padding:9px 16px; border-radius:999px; font-size:14px; }
  .tabbar-item .ti { width:18px; height:18px; }
  .tabbar-item.on { background:var(--brand); color:#fff; }
  .tabbar-item.on::before { display:none; }
  .tabbar-add { margin:0 0 0 auto; width:auto; height:auto; border-radius:10px; padding:9px 16px; }
  .tabbar-add::after { content:"Log event"; font-size:14px; font-weight:700; margin-left:6px; }
  .tabbar-more { display:none; }
}

/* ---- Month nav ---- */
.monthnav { display:flex; align-items:center; justify-content:center; gap:12px; margin:6px 0 14px; }
.monthnav h2 { margin:0; font-size:21px; letter-spacing:.2px; }
.navbtn {
  display:inline-flex; align-items:center; justify-content:center; min-height:44px;
  padding:8px 14px; border:1px solid var(--line-strong); border-radius:10px;
  background:var(--surface); color:var(--brand-dark); font-weight:600; box-shadow:var(--shadow-sm);
}
.navbtn:hover { text-decoration:none; background:var(--brand-light); border-color:var(--brand); }
.navbtn.ghost { box-shadow:none; }

/* ============================================================
   Calendar
   ============================================================ */
.calendar { display:grid; grid-template-columns:repeat(7,1fr); gap:6px; }
.calendar .dow { text-align:center; font-size:11px; letter-spacing:.6px; text-transform:uppercase; color:var(--muted); font-weight:700; padding:2px 0 6px; }
.cell { min-height:70px; border:1px solid var(--line); border-radius:12px; background:var(--surface); padding:8px; box-shadow:var(--shadow-sm); }
.cell.empty { background:transparent; border:none; box-shadow:none; }
.cell.day { display:flex; flex-direction:column; justify-content:space-between; color:var(--ink); }
.cell.day:hover { text-decoration:none; border-color:var(--brand); }
.cell.day.today { background:var(--today); border-color:var(--today-line); }
.cell.day.sel { outline:2px solid var(--brand); outline-offset:-1px; }
.cell .dn { font-weight:700; font-size:13px; color:var(--ink-2); }
.cell.day.today .dn { display:inline-grid; place-items:center; width:22px; height:22px; border-radius:50%; background:var(--today-line); color:#fff; }
.cell .dots { display:flex; gap:5px; }
.dot { display:inline-block; width:9px; height:9px; border-radius:50%; background:var(--muted); }
.dot.d { background:var(--status-cancelled); }
.dot.s { background:var(--accent); }
.swatch { display:inline-block; width:12px; height:12px; border-radius:4px; vertical-align:-1px; }
.swatch.today { background:var(--today); border:1px solid var(--today-line); }
.legend { text-align:center; color:var(--muted); font-size:13px; margin:12px 0 0; }
.legend .dot { vertical-align:0; margin-right:2px; }
@media (max-width:767px){
  .calendar { gap:4px; }
  .cell { min-height:0; box-shadow:none; padding:6px; border-radius:10px; }
  .cell.day { aspect-ratio:1/1; min-height:44px; position:relative; justify-content:flex-start; }
  .cell .dn { font-size:13px; }
  .cell .dots { position:absolute; left:0; right:0; bottom:6px; justify-content:center; gap:4px; }
  .dot { width:7px; height:7px; }
}
@media (max-width:360px){   /* recover a few px for touch targets on the smallest phones */
  .wrap { padding-left:10px; padding-right:10px; }
  .calendar { gap:3px; }
}

/* ---- Selected-day panel ---- */
.daypanel-head { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:12px; }
.daypanel-head h3 { margin:0; }
.btn-add-day { display:inline-flex; align-items:center; min-height:44px; padding:0 16px; border-radius:10px; background:var(--brand); color:#fff; font-weight:700; }
.btn-add-day:hover { background:var(--brand-dark); text-decoration:none; }
.daylist { list-style:none; margin:0; padding:0; }
.daylist li { display:flex; align-items:center; gap:10px; flex-wrap:wrap; padding:10px 0; border-bottom:1px solid var(--line); }
.daylist li:last-child { border-bottom:0; }
.daylist-main { font-weight:600; }

/* ============================================================
   Cards / headings
   ============================================================ */
.card { background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:20px; margin:16px 0; box-shadow:var(--shadow-md); }
.card.narrow { max-width:440px; margin:48px auto; }
.card h1 { margin:0 0 14px; font-size:23px; }
.card h3 { margin:0 0 16px; font-size:17px; color:var(--brand-dark); }

/* ============================================================
   Forms
   ============================================================ */
label { display:block; margin:0 0 14px; font-size:13px; font-weight:600; color:var(--ink-2); }
input, select, textarea {
  display:block; width:100%; margin-top:5px; padding:12px 12px; min-height:48px; font-size:16px;
  border:1px solid var(--line-strong); border-radius:10px; background:#fff; color:var(--ink);
}
input:focus, select:focus, textarea:focus { outline:none; border-color:var(--brand); box-shadow:0 0 0 3px var(--focus-ring); }
input[type=checkbox], input[type=radio] { width:auto; min-height:0; margin:0; }
select {
  -webkit-appearance:none; appearance:none; padding-right:40px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%235c6875' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 14px center;
}
textarea { min-height:88px; resize:vertical; }
@media (min-width:768px){ input, select, textarea { font-size:15px; min-height:44px; padding:10px 11px; } }

.grid2 { display:grid; grid-template-columns:1fr; gap:0 20px; }
.grid2 .full { grid-column:1/-1; }
@media (min-width:768px){ .grid2 { grid-template-columns:1fr 1fr; } }

fieldset { border:0; margin:0 0 14px; padding:0; }
fieldset legend { font-size:13px; font-weight:700; color:var(--ink-2); padding:0; margin-bottom:6px; }
.reasons { border:1px solid var(--line); border-radius:12px; padding:12px 14px; background:var(--surface-2); }
.reasons legend { color:var(--brand-dark); padding:0 4px; }

.chkgrid { display:grid; grid-template-columns:1fr; gap:8px; }
@media (min-width:560px){ .chkgrid { grid-template-columns:1fr 1fr; } }
.chk {
  display:flex; align-items:center; gap:10px; min-height:48px; padding:0 14px; margin:0;
  border:1px solid var(--line-strong); border-radius:12px; background:#fff; font-weight:500; cursor:pointer;
  transition:border-color .12s, background .12s, color .12s;
}
.chk input[type=checkbox] { width:20px; height:20px; margin:0; accent-color:var(--brand); flex:none; }
.chk:has(input:checked) { border-color:var(--brand); background:var(--brand-light); color:var(--brand-dark); font-weight:600; }

/* Chip toggles (status) */
.chipset { display:flex; flex-wrap:wrap; gap:8px; }
.chipset.seg { display:grid; grid-template-columns:repeat(3,1fr); }
.chip { position:relative; margin:0; }
.chip input { position:absolute; opacity:0; width:1px; height:1px; }
.chip span {
  display:flex; align-items:center; justify-content:center; min-height:48px; padding:10px 16px;
  border-radius:12px; border:1px solid var(--line-strong); background:#fff; color:var(--ink);
  font-size:15px; font-weight:600; text-align:center;
}
.chip input:checked + span { border-color:var(--brand); background:var(--brand-light); color:var(--brand-dark); }
.chip input[value="cancelled"]:checked + span { background:var(--status-cancelled); border-color:var(--status-cancelled); color:#fff; }
.chip input[value="delayed"]:checked + span   { background:var(--status-delayed);   border-color:var(--status-delayed);   color:#fff; }
.chip input[value="ran_over"]:checked + span   { background:var(--status-ranover);   border-color:var(--status-ranover);   color:#fff; }
/* Keyboard focus on the (visually hidden) radio must show on the visible pill */
.chip input:focus-visible + span { outline:2px solid var(--brand); outline-offset:2px; }
.chip input:focus + span { outline:2px solid var(--brand); outline-offset:2px; }

/* Save action */
button {
  cursor:pointer; padding:11px 20px; border:none; border-radius:10px; min-height:44px;
  background:var(--brand); color:#fff; font:inherit; font-weight:700; box-shadow:var(--shadow-sm);
}
button:hover { background:var(--brand-dark); }
button.link { background:none; color:var(--brand); padding:2px 6px; font-weight:600; box-shadow:none; min-height:0; }
button.link:hover { background:none; text-decoration:underline; }
button.link.danger { color:var(--status-cancelled); }
.inline { display:inline; }
.form-actions { margin-top:8px; }
@media (max-width:767px){
  .form-actions {
    position:sticky; bottom:calc(80px + env(safe-area-inset-bottom));
    background:linear-gradient(to top, var(--surface) 72%, transparent); padding:10px 0 4px; margin-top:8px;
  }
  .form-actions button[type=submit] { width:100%; min-height:52px; font-size:16px; }
}

/* ============================================================
   Tables — dense on desktop, cards on mobile
   ============================================================ */
.tablewrap { overflow-x:auto; border-radius:10px; }
table.list { width:100%; border-collapse:collapse; font-size:14px; }
table.list th, table.list td { text-align:left; padding:9px 12px; border-bottom:1px solid var(--line); vertical-align:top; }
table.list thead th { font-size:11px; text-transform:uppercase; letter-spacing:.4px; color:var(--muted); background:var(--surface-2); position:sticky; top:0; z-index:2; }
table.list tbody tr:hover { background:var(--surface-2); }
table.list td, .kpi-num { font-variant-numeric:tabular-nums; }
.barcell { width:45%; }
.bar { display:inline-block; height:12px; min-width:4px; border-radius:6px; background:linear-gradient(90deg, var(--brand), var(--accent)); }
.bar.is-red { background:var(--status-not-covered); }

@media (max-width:767px){
  .tablewrap { overflow:visible; }
  /* In card mode each cell self-labels via data-label, so the header row is
     redundant; hide it outright (display:none) — a clipped table-header-group
     still lays out its cells at content width and caused horizontal overflow. */
  table.list.cards thead { display:none; }
  table.list.cards, table.list.cards tbody, table.list.cards tr, table.list.cards td { display:block; width:auto; }
  table.list.cards tr { background:var(--surface); border:1px solid var(--line); border-radius:12px; box-shadow:var(--shadow-sm); padding:6px 14px 10px; margin:0 0 12px; }
  table.list.cards td { display:grid; grid-template-columns:92px 1fr; gap:10px; align-items:baseline; padding:8px 0; border:0; border-bottom:1px solid var(--line); }
  table.list.cards td:last-child { border-bottom:0; }
  table.list.cards td::before { content:attr(data-label); font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.4px; color:var(--muted); }
  table.list.cards td[data-label="Date"], table.list.cards td[data-label="Date needed"] { font-weight:700; font-size:15px; color:var(--brand-dark); }
  table.list.cards td[data-label="Note"] { grid-template-columns:1fr; }
  table.list.cards td[data-label="Note"]:empty, table.list.cards td[data-label="Room"]:empty,
  table.list.cards td[data-label="Case"]:empty, table.list.cards td[data-label="Location"]:empty,
  table.list.cards td[data-label="Service"]:empty, table.list.cards td[data-label="Delay"]:empty { display:none; }
  table.list.cards td[data-label=""]::before { display:none; }
  .row-actions { display:flex; flex-wrap:wrap; gap:8px; justify-content:flex-end; padding-top:6px; }
  .row-actions button.link, .row-actions a.link { min-height:44px; display:inline-flex; align-items:center; padding:0 12px; }
}

/* ---- Badges ---- */
.badge { display:inline-block; padding:3px 10px; border-radius:var(--r-pill); font-size:12px; font-weight:700; color:#fff; }
.badge.cancelled { background:var(--status-cancelled); }
.badge.delayed { background:var(--status-delayed); }
.badge.ran_over { background:var(--status-ranover); }
.badge.s-requested { background:var(--status-requested); }
.badge.s-covered { background:var(--status-covered); }
.badge.s-not_covered { background:var(--status-not-covered); }
.badge.s-cancelled { background:var(--status-scancelled); }

/* ============================================================
   Reports
   ============================================================ */
.reports-toolbar { display:flex; flex-direction:column; gap:12px; }
@media (min-width:768px){ .reports-toolbar { flex-direction:row; align-items:center; justify-content:space-between; flex-wrap:wrap; } }
.segrange { display:grid; grid-template-columns:repeat(3,1fr); background:var(--surface-2); border-radius:12px; padding:3px; gap:2px; }
.segbtn { text-align:center; min-height:44px; display:grid; place-items:center; border-radius:9px; font-weight:600; color:var(--muted); }
.segbtn.on { background:var(--surface); color:var(--brand-dark); box-shadow:var(--shadow-sm); }
.segbtn:hover { text-decoration:none; }
.period-nav { display:flex; align-items:center; gap:12px; justify-content:center; }
.period-label { font-size:17px; font-weight:700; }
.toolbar-actions { display:flex; flex-wrap:wrap; gap:8px; }
.custom-range { display:flex; gap:12px; align-items:flex-end; flex-wrap:wrap; }
.custom-range label { margin:0; }
.report-filter { display:flex; gap:12px; align-items:flex-end; flex-wrap:wrap; width:100%; padding-top:12px; border-top:1px solid var(--line); }
.report-filter label { margin:0; }
.report-filter label:has(select), .report-filter label:has(input) { flex:1 1 160px; }

.kpis { display:grid; grid-template-columns:repeat(2,1fr); gap:12px; }
@media (min-width:560px){ .kpis { grid-template-columns:repeat(3,1fr); } }
@media (min-width:900px){ .kpis { grid-template-columns:repeat(6,1fr); } }
.kpi { position:relative; background:var(--surface); border:1px solid var(--line); border-radius:14px; padding:16px 14px; overflow:hidden; }
.kpi::before { content:""; position:absolute; inset:0 auto 0 0; width:4px; background:var(--line-strong); }
.kpi-num { font-size:30px; font-weight:800; color:var(--ink); line-height:1; letter-spacing:-.02em; }
.kpi-lbl { font-size:12px; color:var(--muted); margin-top:6px; }
.kpi-cancelled::before { background:var(--status-cancelled); }
.kpi-delayed::before { background:var(--status-delayed); }
.kpi-ranover::before { background:var(--status-ranover); }
.kpi-risk::before { background:var(--status-not-covered); }
.kpi-risk .kpi-num { color:var(--status-not-covered); }

.details-summary { cursor:pointer; font-weight:700; color:var(--brand-dark); min-height:44px; display:flex; align-items:center; }

/* ============================================================
   Alerts / misc
   ============================================================ */
.alert { padding:11px 14px; border-radius:10px; font-size:14px; margin:0 0 16px; }
.alert.ok { background:var(--ok-bg); color:var(--ok-ink); }
.alert.err { background:var(--err-bg); color:var(--err-ink); }
.alert.warn { background:var(--warn-bg); color:var(--warn-ink); }
.muted { color:var(--muted); font-weight:400; }
.js-hide { display:none !important; }

/* Length-of-delay field: highlighted, shown only when "Delayed" is chosen */
.delay-field { background:var(--warn-bg); border:1px solid #f0d98a; border-radius:12px; padding:10px 14px; }
.delay-field input { max-width:220px; }

/* Top-of-page HIPAA disclaimer (shown on every page) */
.phi-banner {
  display:flex; gap:10px; align-items:flex-start;
  background:var(--warn-bg); color:var(--warn-ink);
  border:1px solid #f0d98a; border-left:4px solid var(--today-line);
  border-radius:10px; padding:11px 14px; margin:0 0 18px; font-size:13.5px; line-height:1.45;
}
.phi-banner strong { color:#6b5200; }
.phi-icon { font-size:17px; line-height:1.2; flex:none; }
.foot { text-align:center; color:var(--muted); font-size:13px; padding:22px; border-top:1px solid var(--line); }
.foot strong { color:var(--ink-2); }

/* ============================================================
   Focus / touch / motion
   ============================================================ */
:where(a,button,summary,input,select,textarea,.chk,.chip,.segbtn,.tabbar-item):focus-visible {
  outline:2px solid var(--brand); outline-offset:2px; border-radius:var(--r-sm);
}
* { -webkit-tap-highlight-color:transparent; }
.tabbar-item,.chip,.chk,.cell.day,.segbtn,.navbtn { touch-action:manipulation; }
@media (prefers-reduced-motion:reduce){ * { transition:none !important; animation:none !important; } }
@media (hover:none){ .cell.day:hover { border-color:var(--line); } table.list tbody tr:hover { background:transparent; } }
@media (prefers-contrast:more){ :root { --line:#b8c2cd; --muted:#4a5661; } }

/* ============================================================
   Print — clean leadership one-pager
   ============================================================ */
.print-header { display:none; }
@media print {
  @page { margin:14mm; }
  .topbar, .tabbar, .reports-toolbar, .form-actions, .row-actions, .monthnav, .calendar, .legend,
  .daypanel, .navbtn, button, .who, .phi-banner, details.tabbar-more { display:none !important; }
  body { background:#fff; color:#000; font-size:11pt; }
  .wrap { max-width:none; padding:0; }
  .card { box-shadow:none; border:1px solid #ccc; break-inside:avoid; page-break-inside:avoid; margin:0 0 10pt; }
  .kpis { grid-template-columns:repeat(6,1fr); }
  .kpi, .kpi::before, .kpi-risk .kpi-num, .bar, .badge { -webkit-print-color-adjust:exact; print-color-adjust:exact; }
  .badge { color:#000 !important; background:#eee !important; border:1px solid #999; }
  table.list.cards, table.list.cards thead, table.list.cards tbody, table.list.cards tr, table.list.cards td { display:revert; }
  table.list.cards thead { position:static; width:auto; height:auto; clip:auto; clip-path:none; }
  table.list.cards td::before { content:none; }
  details { display:block !important; } details > summary { display:none; }
  .print-header { display:block !important; border-bottom:2px solid #000; margin-bottom:10pt; padding-bottom:6pt; }
  .foot { border:none; color:#444; margin-top:10pt; }
}