/* ────────── tokens ────────── */
:root{
  /* dark theme (default) */
  --bg:#0b1020;
  --bg-grad-1:#1a2250; --bg-grad-2:#0f2a3a;
  --panel:#121a33; --panel-2:#182245;
  --surface-input:#0e1530;
  --surface-rail:#0d152e;
  --surface-head:#101a3a;
  --surface-head-hover:#172455;
  --surface-btn:#1a2550;
  --surface-btn-hover:#243066;
  --surface-hover:#142046;
  --surface-slot-has:#0e1f3e;
  --ink:#e6ebff; --muted:#8a95c2;
  --accent:#7aa2ff; --accent-2:#5cd2c1;
  --ok:#4ade80; --warn:#fbbf24; --bad:#f87171;
  --border:#253063; --border-strong:#39458a;
  --shadow:0 8px 24px rgba(0,0,0,.35);
  --radius:12px;
  --rail-w:220px; --hour-w:60px;
  --appbar-h:52px; --header-row-h:44px;
  color-scheme: dark;
}

[data-theme="light"]{
  --bg:#f4f6fc;
  --bg-grad-1:#dde6ff; --bg-grad-2:#d3eee9;
  --panel:#ffffff; --panel-2:#f3f6fd;
  --surface-input:#f7f9fe;
  --surface-rail:#f0f4fb;
  --surface-head:#eef2fb;
  --surface-head-hover:#e3e9f7;
  --surface-btn:#eef2fb;
  --surface-btn-hover:#dde4f4;
  --surface-hover:#e7ecf7;
  --surface-slot-has:#eaf2ff;
  --ink:#1a213d; --muted:#6c769a;
  --accent:#2f54e0; --accent-2:#0b9a8d;
  --ok:#16a34a; --warn:#d97706; --bad:#dc2626;
  --border:#d8deec; --border-strong:#b9c2d9;
  --shadow:0 8px 20px rgba(20,30,80,.10);
  color-scheme: light;
}

*{box-sizing:border-box}
html, body{ height:100%; margin:0 }
body{
  background:
    radial-gradient(1100px 500px at 8% -10%, var(--bg-grad-1) 0%, transparent 60%),
    radial-gradient(900px 500px at 110% 0%, var(--bg-grad-2) 0%, transparent 60%),
    var(--bg);
  color:var(--ink);
  font:14px/1.5 -apple-system,BlinkMacSystemFont,"SF Pro Text","Inter",system-ui,sans-serif;
  display:grid; grid-template-rows: var(--appbar-h) 1fr;
  overflow:hidden;
  transition: background-color .2s ease, color .2s ease;
}
button{font:inherit; color:inherit}

/* ────────── app bar ────────── */
.appbar{
  display:grid;
  grid-template-columns: 1fr auto 1fr;
  align-items:center;
  gap:16px; padding:0 16px;
  border-bottom:1px solid var(--border);
  background:linear-gradient(180deg,
    color-mix(in oklab, var(--panel) 92%, transparent),
    color-mix(in oklab, var(--bg) 88%, transparent));
  backdrop-filter: blur(12px);
  /* backdrop-filter creates a stacking context. <main> is a later sibling
     so it would paint on top by default — lift the appbar above so the
     combo dropdown can extend over the calendar without being clipped. */
  position:relative; z-index:30;
}
.bar-left{ display:flex; align-items:center; min-width:0 }
.bar-center{ display:flex; align-items:center; gap:8px; justify-self:center; min-width:0 }
.bar-right{ display:flex; align-items:center; gap:10px; justify-content:flex-end; min-width:0 }

/* ────────── buttons ────────── */
.icon-btn{
  background:var(--surface-btn);
  border:1px solid var(--border);
  border-radius:8px;
  width:32px; height:32px;
  display:inline-flex; align-items:center; justify-content:center;
  cursor:pointer; color:var(--ink); font-size:13px;
  transition:background .12s, border-color .12s;
}
.icon-btn:hover{ background:var(--surface-btn-hover); border-color:var(--border-strong) }
.icon-btn:focus-visible{ outline:2px solid var(--accent); outline-offset:2px }
.icon-btn[disabled]{ opacity:.4; cursor:not-allowed }
.icon-btn[disabled]:hover{ background:var(--surface-btn); border-color:var(--border) }

.intersect-btn[aria-pressed="true"]{
  background:color-mix(in oklab, var(--accent) 28%, var(--surface-btn));
  border-color:var(--accent);
  color:var(--accent);
}
.intersect-btn[aria-pressed="true"]:hover{
  background:color-mix(in oklab, var(--accent) 38%, var(--surface-btn));
}

/* ────────── search ────────── */
.search-stack{
  display:flex; align-items:center; gap:8px; min-width:0;
}
.add-slot-btn{
  flex-shrink:0;
  background:var(--surface-input);
  border:1px dashed var(--border-strong);
  color:var(--accent);
}
.add-slot-btn:hover{ background:var(--surface-hover); border-style:solid }
.add-slot-btn[hidden]{ display:none }

.combo{ position:relative; width:280px }
.combo.doc-combo{ width:240px }
.combo .slot-dot{
  display:inline-block; width:10px; height:10px; border-radius:50%;
  background:var(--slot-color, var(--accent));
  box-shadow:0 0 0 2px color-mix(in oklab, var(--slot-color, var(--accent)) 30%, transparent);
  transition:background .12s, box-shadow .12s;
}
/* Doctor visibility checkbox. Rendered as a standalone absolutely-positioned
   button (NOT inside combo-icon) so its click target sits cleanly above the
   input in painting order — the input's click area can otherwise mask the
   icon when the icon is small. Sized 26x26 for a touch-friendly target. */
.slot-toggle{
  position:absolute; left:5px; top:50%; transform:translateY(-50%);
  background:transparent; border:none; cursor:pointer;
  width:26px; height:26px;
  display:inline-flex; align-items:center; justify-content:center;
  border-radius:50%;
  z-index:2;
}
.slot-toggle:hover{ background:color-mix(in oklab, var(--slot-color, var(--accent)) 22%, transparent) }
.slot-toggle:focus-visible{ outline:2px solid var(--accent); outline-offset:1px }
.slot-toggle i{ font-size:14px; color:var(--slot-color, var(--accent)); transition:filter .12s }
.slot-toggle[aria-pressed="false"] i{ color:var(--muted) }
.combo.doc-combo:has(.slot-toggle) .combo-icon{ display:none }
.combo.doc-combo.slot-hidden input{ opacity:.55; text-decoration:line-through }
.combo.doc-combo input{ padding-right:30px }
.combo.doc-combo:not(:first-child) .doc-clear:hover{ background:var(--bad); color:#fff }
.combo.doc-combo.has-doctor input{
  font-weight:500;
  border-color:color-mix(in oklab, var(--slot-color) 60%, var(--border));
  box-shadow: inset 3px 0 0 var(--slot-color);
}
.combo.doc-combo.loading{ opacity:.85 }
.combo-icon{
  position:absolute; left:10px; top:50%; transform:translateY(-50%);
  color:var(--muted); font-size:12px; pointer-events:none;
}
.combo input{
  width:100%; background:var(--surface-input); color:var(--ink);
  border:1px solid var(--border); border-radius:10px;
  padding:7px 30px 7px 30px; font:inherit; font-size:13px; outline:none;
  transition:border .15s, box-shadow .15s;
}
.combo input::placeholder{ color:var(--muted) }
.combo input:focus{ border-color:var(--accent); box-shadow:0 0 0 3px color-mix(in oklab, var(--accent) 22%, transparent) }
.combo-clear{
  position:absolute; right:4px; top:50%; transform:translateY(-50%);
  background:transparent; border:none; color:var(--muted); cursor:pointer;
  width:24px; height:24px; border-radius:50%; font-size:12px; line-height:1;
  display:inline-flex; align-items:center; justify-content:center;
}
.combo-clear:hover{ background:var(--surface-btn); color:var(--ink) }
.combo-form{ margin:0 }
.combo-form input{ font-variant-numeric:tabular-nums }
.combo-form.busy .combo-icon i{ color:var(--accent) }
.combo-menu{
  position:absolute; left:0; right:0; top:calc(100% + 6px);
  margin:0; padding:4px; list-style:none;
  background:var(--panel); border:1px solid var(--border-strong); border-radius:10px;
  box-shadow:var(--shadow);
  max-height:380px; overflow:auto; z-index:50;
}
.menu-item{
  display:flex; justify-content:space-between; align-items:center; gap:10px;
  padding:7px 9px; border-radius:7px; cursor:pointer;
}
.menu-item:hover, .menu-item:focus{ background:var(--surface-hover); outline:none }
.menu-name{ font-size:13px }
.menu-meta{ color:var(--muted); font-size:11px; font-variant-numeric:tabular-nums }
.menu-empty{ padding:10px; color:var(--muted); font-size:13px }

.status{ font-size:11px; color:var(--muted); white-space:nowrap; max-width:200px;
  text-overflow:ellipsis; overflow:hidden }
.status.ok{ color:var(--ok) }
.status.err{ color:var(--bad) }

.id-chip{
  display:inline-block; margin-left:4px;
  padding:1px 6px; border-radius:5px;
  background:var(--surface-btn); border:1px solid var(--border);
  font-size:10px; color:var(--ink);
  font-variant-numeric:tabular-nums; letter-spacing:.02em;
}
.tele-flag{
  display:inline-flex; align-items:center; margin-left:6px;
  color:var(--accent-2); font-size:10px;
}

/* ────────── main / grid ────────── */
main{
  display:flex; min-height:0; overflow:hidden;
  padding:10px 12px 12px;
}
.grid{
  flex:1; min-height:0; min-width:0;
  display:flex;
}
.grid.empty{
  border:1px dashed var(--border-strong); border-radius:var(--radius);
  align-items:center; justify-content:center;
  color:var(--muted);
  background:color-mix(in oklab, var(--panel) 50%, transparent);
}
.empty-msg{ font-size:13px; display:inline-flex; align-items:center; gap:8px }
.empty-msg .fa-calendar{ color:var(--accent); font-size:16px }

.cal{
  flex:1;
  display:grid;
  grid-template-columns: var(--hour-w) repeat(var(--days), minmax(0,1fr)) var(--rail-w);
  grid-template-rows: var(--header-row-h) repeat(var(--hours), minmax(0,1fr));
  background:var(--panel);
  border:1px solid var(--border); border-radius:var(--radius);
  overflow:hidden;
  box-shadow:var(--shadow);
}

.cell{
  border-right:1px solid var(--border);
  border-bottom:1px solid var(--border);
  padding:3px 4px;
  background:transparent;
  position:relative;
  min-width:0; min-height:0;
}
.cell.corner{
  background:linear-gradient(180deg, var(--surface-btn), var(--panel));
  border:none;
  border-right:1px solid var(--border);
  border-bottom:1px solid var(--border);
  display:flex; align-items:center; justify-content:center;
  cursor:pointer; font:inherit; color:inherit;
  transition:background .12s;
}
.cell.corner:hover{
  background:linear-gradient(180deg, var(--surface-btn-hover), var(--panel));
}
.cell.corner i{ font-size:14px; color:var(--accent) }

.day-head, .hour-head{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  background:var(--surface-head); color:var(--ink);
  border:none; border-right:1px solid var(--border); border-bottom:1px solid var(--border);
  cursor:pointer; padding:4px;
  transition:background .12s, color .12s;
  font:inherit;
}
.day-head:hover, .hour-head:hover{ background:var(--surface-head-hover) }
.day-head .dh-line{ font-size:13px; font-weight:600; line-height:1.1 }
.day-head .dh-name{ color:var(--muted); font-size:11px; font-weight:400; text-transform:uppercase; letter-spacing:.06em }
.day-head .dh-num{ color:var(--ink); font-size:14px; margin-left:2px }
.day-head .dh-mon{ color:var(--muted); font-size:10px; text-transform:uppercase; letter-spacing:.05em }
.day-head.today .dh-num{ color:var(--accent) }
.day-head.sunday .dh-name{ color:var(--bad) }
.day-head.pref{
  background:linear-gradient(180deg,
    color-mix(in oklab, var(--accent) 22%, transparent),
    color-mix(in oklab, var(--accent) 8%, transparent));
  box-shadow: inset 0 -3px 0 var(--accent);
}
.day-head.pref .dh-name{ color:var(--accent) }

.hour-head{ font-variant-numeric:tabular-nums }
.hour-head .hh-num{ font-size:11px; color:var(--muted); white-space:nowrap }
.hour-head.pref{
  background:linear-gradient(90deg,
    color-mix(in oklab, var(--accent-2) 22%, transparent),
    color-mix(in oklab, var(--accent-2) 5%, transparent));
  box-shadow: inset -3px 0 0 var(--accent-2);
}
.hour-head.pref .hh-num{ color:var(--accent-2); font-weight:600 }

.hosp-head{
  background:var(--surface-head);
  color:inherit;
  display:flex; align-items:center; justify-content:center;
  padding:0;
  border:none;
  border-bottom:1px solid var(--border);
  border-left:1px solid var(--border);
  cursor:pointer; font:inherit;
  transition:background .12s;
}
.hosp-head:hover{ background:var(--surface-head-hover) }
.hosp-head i{ font-size:14px; color:var(--accent) }

.slot{
  display:flex; flex-wrap:wrap; gap:3px;
  align-content:flex-start;
  background:var(--surface-input);
  overflow:hidden;
}
.slot.has{ background:var(--surface-slot-has) }

.chip{
  display:inline-flex; align-items:center;
  padding:3px 8px;
  border-radius:6px;
  background:color-mix(in oklab, var(--c) 22%, var(--surface-input));
  border:1px solid color-mix(in oklab, var(--c) 50%, transparent);
  border-left:3px solid var(--c);
  color:var(--ink); font:inherit; cursor:pointer;
  transition:transform .08s, opacity .15s, box-shadow .15s;
  text-align:left;
  font-size:11px; line-height:1.4;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  max-width:100%;
}
.chip:hover{ transform:translateY(-1px); box-shadow:0 4px 12px rgba(0,0,0,.30); z-index:2 }
.doc-badge{
  display:inline-flex; align-items:center; justify-content:center;
  width:13px; height:13px; border-radius:50%;
  font-size:8px; font-weight:700; line-height:1;
  color:#fff;
  flex-shrink:0;
  margin-right:5px;
  letter-spacing:0;
  box-shadow: 0 0 0 1.5px color-mix(in oklab, var(--surface-input) 70%, transparent);
}
.chip.full{ opacity:.5 }
.chip.full::after{ content:" full"; color:var(--bad); font-weight:400; margin-left:3px }
.chip.dim{ opacity:.30; filter:saturate(.5) }
.chip.match.avail{
  box-shadow: 0 0 0 1px var(--ok) inset,
              0 0 8px color-mix(in oklab, var(--c) 35%, transparent);
}
/* Intersection highlight — sessions that participate in a doable
   multi-doctor visit at the same hospital on the same day. */
.chip.intersection{
  box-shadow: 0 0 0 2px var(--accent),
              0 0 14px color-mix(in oklab, var(--accent) 55%, transparent);
  transform:translateY(-1px);
  z-index:3;
}
.chip.intersection::before{
  content:"\f1e0"; /* fa-share-nodes — small node-link mark */
  font-family:"Font Awesome 6 Free"; font-weight:900;
  font-size:8px; margin-right:4px; color:var(--accent);
}

/* ────────── hospital rail ────────── */
.hosp-rail{
  background:var(--surface-rail);
  padding:8px 10px;
  display:flex; flex-direction:column; gap:5px;
  border-left:1px solid var(--border);
  border-right:none;
  overflow:hidden; min-height:0;
}
.rail-empty{ color:var(--muted); font-size:11px; padding:8px 0 }
.rail-list{
  list-style:none; padding:0; margin:0;
  display:flex; flex-direction:column; gap:4px;
  overflow-y:auto; min-height:0; flex:1;
}
.hosp-chip{
  width:100%; display:flex; align-items:center; gap:8px;
  background:var(--surface-input); border:1px solid var(--border); border-radius:8px;
  padding:5px 8px; text-align:left; cursor:pointer; color:var(--ink);
  transition:background .12s, border-color .12s, opacity .12s;
}
.hosp-chip:hover{ background:var(--surface-hover); border-color:var(--border-strong) }
.hosp-chip .hosp-check{
  flex:0 0 auto; font-size:13px; color:var(--c);
  display:inline-flex; align-items:center; justify-content:center;
  width:14px; height:14px;
}
.hosp-chip.off .hosp-check{ color:var(--muted) }
.hosp-chip .hosp-text{ display:flex; flex-direction:column; min-width:0; line-height:1.2 }
.hosp-chip .hosp-name{
  font-size:11px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.hosp-chip .hosp-city{ font-size:10px; color:var(--muted) }
.hosp-chip.on{
  background:color-mix(in oklab, var(--c) 14%, var(--surface-input));
  border-color:color-mix(in oklab, var(--c) 50%, transparent);
}
.hosp-chip.off{ opacity:.55 }
.hosp-chip.off .hosp-name{ text-decoration:line-through; color:var(--muted) }

/* ────────── view switching ────────── */
body.view-calendar #lookupView{ display:none }
body.view-calendar #lookupForm{ display:none }
body.view-lookup #grid{ display:none }
body.view-lookup #docSearch,
body.view-lookup #status{ display:none }

/* ────────── browse: specs / doctors ────────── */
.browse-view{
  flex:1; min-height:0; min-width:0;
  display:flex; flex-direction:column;
  background:var(--panel);
  border:1px solid var(--border); border-radius:var(--radius);
  overflow:hidden;
  box-shadow:var(--shadow);
}
.browse-head{
  padding:9px 14px;
  border-bottom:1px solid var(--border);
  display:flex; align-items:center; gap:12px;
  background:var(--surface-head);
  flex-shrink:0;
}
.browse-title{
  font-size:13px; font-weight:600;
  display:inline-flex; align-items:center; gap:8px;
}
.browse-title i{ color:var(--accent) }
.browse-count{ color:var(--muted); font-size:12px; font-variant-numeric:tabular-nums }
.browse-head .spacer{ flex:1 }
.combo-form.mini{ width:200px }
.combo-form.mini input{ font-size:12px; padding:6px 4px 6px 26px }
.combo-form.mini .combo-icon{ left:8px; font-size:11px }

.back-btn{
  background:var(--surface-btn); color:var(--ink);
  border:1px solid var(--border); border-radius:8px;
  padding:5px 10px; cursor:pointer; font-size:12px; font:inherit;
  display:inline-flex; align-items:center; gap:6px;
  transition:background .12s;
}
.back-btn:hover{ background:var(--surface-btn-hover) }
.back-btn i{ font-size:10px }

.specs-grid, .doctor-cards{
  flex:1; overflow:auto;
  padding:12px;
  display:grid; gap:8px;
  align-content:start;
}
.specs-grid{ grid-template-columns:repeat(auto-fill, minmax(200px, 1fr)) }
.doctor-cards{ grid-template-columns:repeat(auto-fill, minmax(280px, 1fr)) }

.spec-card, .doc-card{
  background:var(--surface-input);
  border:1px solid var(--border); border-radius:10px;
  padding:10px 12px;
  cursor:pointer; text-align:left;
  color:var(--ink); font:inherit;
  transition:background .12s, border-color .12s, transform .08s;
  position:relative;
  min-width:0;
}
.spec-card:hover, .doc-card:hover{
  background:var(--surface-hover);
  border-color:color-mix(in oklab, var(--accent) 60%, var(--border-strong));
  transform:translateY(-1px);
}
.spec-card{ display:flex; align-items:center; gap:10px }
.spec-icon{
  width:30px; height:30px; flex:0 0 auto;
  border-radius:8px;
  display:inline-flex; align-items:center; justify-content:center;
  background:color-mix(in oklab, var(--accent) 18%, var(--surface-input));
  color:var(--accent);
  font-size:13px;
}
.spec-name{
  font-size:13px; font-weight:500;
  word-break:break-word;
  min-width:0;
}

.doc-card{ display:flex; flex-direction:column; gap:4px }
.doc-name{
  font-size:13px; font-weight:600;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  padding-right:24px; /* room for tele icon */
}
.doc-meta{
  font-size:11px; color:var(--muted);
  display:inline-flex; align-items:center; gap:5px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.doc-meta i{ font-size:9px }
.doc-meta .doc-specs{ overflow:hidden; text-overflow:ellipsis; min-width:0 }
.doc-tele{
  position:absolute; top:10px; right:12px;
  color:var(--accent-2); font-size:11px;
}

.browse-loading{
  flex:1;
  display:flex; align-items:center; justify-content:center;
  gap:8px; color:var(--muted); font-size:13px;
  padding:24px;
}

/* ────────── lookup view ────────── */
.lookup-view{
  flex:1; min-height:0; min-width:0;
  display:flex; flex-direction:column;
  overflow:hidden;
}
.lookup-result{
  flex:1; min-height:0; min-width:0;
  display:flex; flex-direction:column;
  overflow:hidden;
}
.lookup-result .empty{ color:var(--muted); font-size:13px; padding:14px 0; text-align:center }
.lookup-result .err{ color:var(--bad); font-size:13px; padding:14px 0; text-align:center }

.lookup-empty{
  flex:1;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; gap:10px;
  color:var(--muted);
  border:1px dashed var(--border-strong); border-radius:var(--radius);
  background:color-mix(in oklab, var(--panel) 50%, transparent);
}
.lookup-empty .big{ font-size:48px; color:var(--accent); opacity:.7 }
.lookup-empty .lead{ margin:0; font-size:15px; color:var(--ink) }
.lookup-empty .hint{ margin:0; font-size:12px; max-width:520px; padding:0 16px }
.lookup-empty .hint code{
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size:11px; padding:1px 5px; border-radius:4px;
  background:var(--surface-input); border:1px solid var(--border); color:var(--ink);
}

/* ────────── receipt (full-page, doctor-hospital-patient flow) ────────── */
.receipt{
  flex:1; min-height:0;
  display:flex; flex-direction:column;
  gap:14px;
  background:var(--panel);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:14px;
  box-shadow:var(--shadow);
  overflow:auto;
}
.receipt-row{
  display:grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap:36px;
  align-items:stretch;
}
.receipt-row > *{ position:relative; min-width:0 }
/* dashed connector between cards (doctor → hospital → patient) */
.receipt-row > *:not(:last-child)::after{
  content:'';
  position:absolute;
  top:calc(50% - 1px);
  right:-36px;
  width:36px; height:0;
  border-top:2px dashed color-mix(in oklab, var(--accent) 55%, var(--border-strong));
  pointer-events:none;
}

.r-ref{
  display:flex; align-items:center; gap:10px;
  background:var(--surface-input); border:1px solid var(--border); border-radius:10px;
  padding:10px 12px;
}
.r-ref .label{
  color:var(--muted); font-size:11px; text-transform:uppercase; letter-spacing:.06em;
  white-space:nowrap;
}
.r-ref code{
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size:13px; color:var(--ink); flex:1;
  word-break:break-all;
}
.r-ref .copy{
  background:transparent; border:1px solid var(--border); color:var(--ink);
  padding:5px 10px; border-radius:7px; cursor:pointer; font-size:12px;
  display:inline-flex; align-items:center; gap:5px;
  transition:background .12s; white-space:nowrap;
}
.r-ref .copy:hover{ background:var(--surface-hover) }
.r-ref .copy.ok{ color:var(--ok); border-color:var(--ok) }

.r-doctor{
  position:relative;
  display:flex; flex-direction:column; gap:6px;
  padding:14px 14px 14px 46px;
  background:color-mix(in oklab, var(--accent) 14%, var(--surface-input));
  border:1px solid color-mix(in oklab, var(--accent) 38%, transparent);
  border-radius:10px;
}
.r-doctor .name{ font-size:17px; font-weight:600; line-height:1.2 }
.r-doctor .specialty{
  color:var(--accent-2); font-size:12px; font-weight:500;
  text-transform:uppercase; letter-spacing:.04em;
}
.r-doctor .when{
  color:var(--accent); font-size:14px; font-weight:500;
  font-variant-numeric:tabular-nums;
  margin-top:4px;
  display:inline-flex; align-items:center; flex-wrap:wrap; gap:8px;
}
.r-doctor .when .slot{
  display:inline-flex; align-items:center; gap:5px;
  background:var(--panel); border:1px solid var(--border);
  border-radius:999px; padding:3px 10px;
  font-size:11px; font-weight:500; color:var(--ink);
  font-variant-numeric:tabular-nums;
}
.r-doctor .when .slot i{ color:var(--accent-2); font-size:10px }
.r-pno{
  display:inline-flex; align-items:center; gap:6px;
  background:var(--panel); border:1px solid var(--border);
  border-radius:999px; padding:3px 11px; font-size:12px;
  color:var(--ink); font-variant-numeric:tabular-nums;
  align-self:flex-start; margin-top:4px;
}

/* vertical spine label on the left edge of each card */
.spine{
  position:absolute;
  top:0; left:0; bottom:0;
  width:32px;
  display:flex; align-items:center; justify-content:center;
  background:color-mix(in oklab, var(--accent) 18%, var(--surface-input));
  border-right:1px solid color-mix(in oklab, var(--accent) 35%, var(--border));
  border-radius:9px 0 0 9px;
  pointer-events:none;
}
.spine span{
  writing-mode:vertical-rl;
  transform:rotate(180deg);
  font-size:10px; font-weight:700; letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--accent);
  white-space:nowrap;
}
.r-doctor .spine{
  background:color-mix(in oklab, var(--accent) 32%, var(--panel));
  border-right-color:color-mix(in oklab, var(--accent) 60%, transparent);
}

.r-section{
  position:relative;
  background:var(--surface-input); border:1px solid var(--border); border-radius:10px;
  padding:13px 13px 13px 46px;
  display:flex; flex-direction:column; gap:5px;
}
.r-section .line{ font-size:14px; color:var(--ink); font-weight:500 }
.r-section .sub{ font-size:12px; color:var(--muted) }
.r-section .sub i{ width:14px; color:var(--muted); margin-right:2px }
.r-section a{ color:var(--accent); text-decoration:none }
.r-section a:hover{ text-decoration:underline }

.charges-grid{
  display:grid;
  grid-template-columns: 1fr auto;
  gap:24px;
  align-items:center;
}
.r-prices{ display:flex; flex-direction:column; gap:4px; font-size:13px }
.r-prices .p{
  display:flex; justify-content:space-between; gap:24px;
  color:var(--muted); font-variant-numeric:tabular-nums;
}
.r-prices .p span:last-child{ color:var(--ink) }
.charges-total{
  display:flex; flex-direction:column; align-items:flex-end; gap:2px;
  padding:12px 18px;
  background:color-mix(in oklab, var(--accent) 14%, var(--surface-input));
  border:1px solid color-mix(in oklab, var(--accent) 38%, transparent);
  border-radius:10px;
  min-width:140px;
}
.charges-total .label{
  font-size:11px; text-transform:uppercase; letter-spacing:.06em; color:var(--muted);
}
.charges-total .amount{
  font-size:22px; font-weight:700; color:var(--ink);
  font-variant-numeric:tabular-nums; line-height:1.1;
}

.r-meta{
  display:flex; gap:14px; flex-wrap:wrap;
  font-size:12px; color:var(--muted);
}
.r-meta .item{ display:inline-flex; align-items:center; gap:5px }

.r-actions{ display:flex; gap:8px; flex-wrap:wrap; align-items:center }
.r-actions .spacer{ flex:1 }
.r-actions a, .r-actions button{
  display:inline-flex; align-items:center; gap:6px;
  background:var(--surface-btn); color:var(--ink);
  border:1px solid var(--border); border-radius:9px;
  padding:8px 12px; font:inherit; font-size:13px;
  text-decoration:none; cursor:pointer;
  transition:background .12s;
}
.r-actions a:hover, .r-actions button:hover{ background:var(--surface-btn-hover) }

/* ────────── responsive ────────── */
@media (max-width:1100px){
  :root{ --rail-w:180px; --hour-w:54px }
  .combo{ width:220px }
}
@media (max-width:820px){
  .appbar h1 span{ display:none }
  .week-label{ min-width:90px; font-size:12px }
  .grid{ overflow:auto }
  .cal{ min-width:760px; min-height:520px }
  .receipt-row{ grid-template-columns: 1fr; gap:12px }
  .receipt-row > *:not(:last-child)::after{ display:none }
  .charges-grid{ grid-template-columns: 1fr; gap:12px }
  .charges-total{ align-items:center }
}