/* SimPLex shell — Phase 0
   Theming via CSS custom properties so each tenant can be re-skinned later. */

/* The UA stylesheet's `[hidden] { display: none }` has zero specificity, so ANY
   class that sets `display: flex/grid/block` silently beats it and the element
   renders while JS believes it is hidden. That has caused three separate
   production bugs here (the recurring series that only ever booked Monday, and
   the dictation panel covering Submit among them). Individual
   `.thing[hidden] { display: none }` patches kept being forgotten, so make it
   structural: nothing in this app shows while it carries [hidden]. Every
   existing `[hidden]` rule in our CSS already resolves to display:none, so this
   changes no intended behaviour. */
[hidden] { display: none !important; }

:root {
    /* Brand / theme tokens (override per-tenant in a future phase) */
    --bg:            #f0f0f0;
    --surface:       #ffffff;
    --topbar-bg:     #3d4144;   /* Fusion charcoal */
    --topbar-fg:     #c3c7ca;
    --topbar-fg-active: #ffffff;
    --rail-bg:       #3d4144;   /* Fusion: sidebar matches the top bar */
    --rail-bg-2:     #34383b;
    --rail-fg:       #e8eaec;
    --rail-fg-muted: #979da2;
    --icon-color:    #c3c7ca;   /* nav/util icons (user-themeable) */
    --accent:        #1f8aa6;   /* teal/blue accent, Fusion-like */
    --accent-2:      #16677d;
    --line:          #dfe4ea;
    --text:          #2a3340;
    --text-muted:    #6b7682;
    --ok:            #2e9b57;
    --bad:           #cf4040;
    --radius:        10px;
    --shadow:        0 1px 3px rgba(20,30,45,.08), 0 6px 18px rgba(20,30,45,.06);
    --rail-w:        242px;
    --rail-pad:      12px;   /* rail inner side padding; collapse control aligns to it */
    --topbar-h:      92px;
    --font:          system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
    margin: 0;
    font-family: var(--font);
    color: var(--text);
    background: var(--bg);
    -webkit-font-smoothing: antialiased;
}
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

.app { min-height: 100%; }

/* ---------- Top bar (Fusion: dark charcoal, white module tab cards) ---------- */
.topbar {
    height: var(--topbar-h);
    background-color: var(--topbar-bg);
    color: var(--topbar-fg);
    display: flex;
    align-items: stretch;
    position: sticky;
    top: 0;
    z-index: 40;
}
.topbar__menu {
    display: none;
    background: none; border: 0; color: var(--topbar-fg);
    width: 52px; cursor: pointer;
}
.topbar__menu i { font-size: 20px; }

/* Rail column of the topbar: sits exactly above the sidebar and owns the
   brand plus the collapse control, so the control always lines up with the
   rail's right edge (minus the rail's inner padding) at any --rail-w. */
.topbar__rail {
    display: flex; align-items: center;
    width: var(--rail-w); flex: 0 0 var(--rail-w);
    min-width: 0;
    padding-right: var(--rail-pad);
}
.brand {
    display: flex; align-items: center;
    padding: 0 18px;
    flex: 1 1 auto; min-width: 0;
}
.brand:hover { text-decoration: none; }
.brand__logo { height: 44px; width: auto; display: block; filter: brightness(0) invert(1); }
.brand__mark { height: 36px; width: auto; display: none; filter: brightness(0) invert(1); }

/* Module tabs: card-shaped, active one is a white card with blue icon+label
   that extends slightly below the bar (Fusion style). */
.topnav { display: flex; align-items: stretch; gap: 2px; }
.topnav__item {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 6px; min-width: 88px; padding: 0 16px;
    color: var(--topbar-fg); font-size: 13.5px; font-weight: 600;
    position: relative;
}
.topnav__item:hover { color: #fff; text-decoration: none; background: rgba(255,255,255,.05); }
.topnav__icon i { font-size: 21px; color: var(--icon-color); }
.topnav__item:hover .topnav__icon i { color: #fff; }
.topnav__item.is-active {
    background: var(--surface); color: var(--accent);
    align-self: flex-start; height: calc(var(--topbar-h) + 4px); z-index: 41;
    box-shadow: 0 2px 6px rgba(0,0,0,.18);
}
.topnav__item.is-active .topnav__icon i { color: var(--accent); }

.topbar__utils { margin-left: auto; display: flex; align-items: center; gap: 4px; padding-right: 16px; }
.topbar__pill {
    display: inline-flex; align-items: center; gap: 8px;
    background: #fff; color: var(--accent-2);
    border-radius: 999px; padding: 7px 14px; margin-right: 6px;
    font-size: 13px; font-weight: 700; white-space: nowrap;
}
.topbar__pill i { color: #e8a416; font-size: 14px; }
.topbar__pill:hover { text-decoration: none; box-shadow: 0 0 0 3px rgba(255,255,255,.18); }
.topbar__pill.is-active { box-shadow: 0 0 0 3px rgba(255,255,255,.28); }
.util {
    background: none; border: 0; color: var(--topbar-fg); cursor: pointer;
    display: inline-flex; align-items: center; gap: 8px; padding: 8px; border-radius: 8px;
    position: relative;
}
.util:hover { color: #fff; background: rgba(255,255,255,.08); }
.util i { font-size: 19px; color: var(--icon-color); }
.util:hover i { color: #fff; }
.util--user { font-size: 13.5px; }
.util--user i { font-size: 24px; }
.util__name { color: #e6e9ee; font-weight: 600; }
.util--mail .util__count {
    position: absolute; top: 0; right: -2px;
    background: #e23b3b; color: #fff; font-size: 10px; font-weight: 800;
    line-height: 1; padding: 3px 5px; border-radius: 999px; min-width: 16px; text-align: center;
}
.lang-switcher__select {
    background: rgba(255,255,255,.08); color: var(--topbar-fg);
    border: 1px solid rgba(255,255,255,.14); border-radius: 6px;
    font-size: 12px; padding: 4px 6px; cursor: pointer;
}
.lang-switcher__select option { color: #2a3340; }

/* ---------- Layout ---------- */
.layout { display: flex; min-height: calc(100vh - var(--topbar-h)); }

/* ---------- Sidebar (Fusion: same charcoal as the top bar) ---------- */
.sidebar {
    width: var(--rail-w); flex: 0 0 var(--rail-w);
    background-color: var(--rail-bg);
    color: var(--rail-fg);
    display: flex; flex-direction: column;
    position: sticky; top: var(--topbar-h);
    height: calc(100vh - var(--topbar-h));
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: #5a5f63 var(--rail-bg);
}
.sidebar::-webkit-scrollbar { width: 8px; }
.sidebar::-webkit-scrollbar-track { background: var(--rail-bg); }
.sidebar::-webkit-scrollbar-thumb { background: #5a5f63; border-radius: 4px; }
.sidebar::-webkit-scrollbar-thumb:hover { background: #6d7276; }
.sidebar__title {
    font-size: 26px; font-weight: 600; color: #fff;
    padding: 16px 16px 4px; line-height: 1.2;
}
.sidebar__search {
    display: flex; align-items: stretch; gap: 0;
    margin: 10px 12px 8px; border-radius: 6px; overflow: hidden;
    background: var(--rail-bg-2); box-shadow: inset 0 1px 3px rgba(0,0,0,.28);
}
.sidebar__search-icon { display: flex; align-items: center; padding-left: 10px; }
.sidebar__search-icon i { font-size: 14px; color: var(--rail-fg-muted); }
.sidebar__search input {
    background: none; border: 0; color: var(--rail-fg); width: 100%; font-size: 13.5px; outline: none;
    padding: 9px 8px;
}
.sidebar__search input::placeholder { color: var(--rail-fg-muted); }
.sidebar__search-add {
    display: flex; align-items: center; justify-content: center;
    flex: 0 0 36px; background: #45494c; color: var(--rail-fg);
    border-left: 1px solid rgba(0,0,0,.25);
}
.sidebar__search-add:hover { background: #505558; color: #fff; text-decoration: none; }
.sidebar__search-add i { font-size: 14px; }

.sidenav { padding: 4px 0 12px; }
.sidenav__heading {
    font-size: 11px; text-transform: uppercase; letter-spacing: 1.2px;
    color: var(--rail-fg-muted); padding: 14px 16px 6px;
}
.sidenav__item {
    display: flex; align-items: center; justify-content: space-between; gap: 8px;
    padding: 11px 14px 11px 16px; color: var(--rail-fg); font-size: 14px;
    border-left: 3px solid transparent;
}
.sidenav__main { display: flex; align-items: center; gap: 11px; min-width: 0; }
.sidenav__ico { width: 16px; text-align: center; color: var(--icon-color); font-size: 13px; flex: 0 0 auto; }
.sidenav__side { display: inline-flex; align-items: center; gap: 8px; flex: 0 0 auto; }
.sidenav__chev { font-size: 10px; color: var(--rail-fg-muted); }
.sidenav__badge {
    font-style: normal; font-size: 11px; font-weight: 700; line-height: 1;
    background: rgba(0,0,0,.35); color: #fff;
    padding: 4px 8px; border-radius: 999px; min-width: 14px; text-align: center;
}
a.sidenav__item:hover { background: rgba(255,255,255,.06); color: #fff; text-decoration: none; }
a.sidenav__item:hover .sidenav__chev { color: #fff; }
.sidenav__item--soon { color: var(--rail-fg-muted); cursor: default; }
/* Collapsible sidebar groups */
.navgroup__head {
    display: flex; align-items: center; justify-content: space-between; width: 100%;
    background: none; border: 0; cursor: pointer; font-family: inherit;
    padding: 12px 14px 8px 16px; font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 1.1px;
    color: var(--rail-fg-muted);
}
.navgroup__head:hover { color: #fff; }
.navgroup__chev { font-size: 10px; opacity: .75; transition: transform .18s ease; }
.navgroup.is-collapsed .navgroup__chev { transform: rotate(-90deg); }
.navgroup.is-collapsed .navgroup__items { display: none; }
.navgroup .navgroup__items .sidenav__item { padding-left: 22px; }
/* Collapsible hub sub-lists (meeting 2026-10-09 D3) */
.navsub__row { display: flex; align-items: center; position: relative; }
.navsub__row > .sidenav__item { flex: 1 1 auto; min-width: 0; }
.navsub__row .sidenav__chev { display: none; }
.navsub__toggle {
    flex: 0 0 auto; display: flex; align-items: center; justify-content: center;
    width: 30px; height: 30px; margin-right: 6px; border: 0; border-radius: 6px;
    background: none; color: var(--rail-fg-muted); cursor: pointer; font-size: 10px;
}
.navsub__toggle:hover { background: rgba(255,255,255,.08); color: #fff; }
.navsub__toggle i { transition: transform .18s ease; transform: rotate(-90deg); }
.navsub.is-open .navsub__toggle i { transform: none; }
.navsub__items { display: none; padding: 0 0 4px; }
.navsub.is-open .navsub__items { display: block; }
.navsub__items .sidenav__item { padding-left: 34px; font-size: 13px; }
.navsub.has-active > .navsub__row > .sidenav__item { color: #fff; }
/* Module search (D2) — lives in the top bar, left of the time clock */
.topsearch {
    display: flex; align-items: center; align-self: center; height: 32px; width: 230px; margin-right: 8px;
    border-radius: 6px; background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.18);
}
.topsearch:focus-within { background: rgba(255,255,255,.2); border-color: rgba(255,255,255,.35); }
.topsearch__icon { padding: 0 6px 0 10px; font-size: 13px; color: rgba(255,255,255,.7); }
.topsearch input {
    flex: 1; min-width: 0; height: 100%; background: none; border: 0; outline: none;
    color: #fff; font-size: 13px; padding: 0 4px;
}
.topsearch input::placeholder { color: rgba(255,255,255,.65); }
.topsearch .navsearch__results { left: auto; right: 0; width: 320px; }
@media (max-width: 900px) { .topsearch { width: 150px; } }
.navsearch { position: relative; overflow: visible; }
.navsearch__kbd {
    align-self: center; margin-right: 8px; padding: 0 6px; border-radius: 4px;
    border: 1px solid rgba(255,255,255,.18); color: var(--rail-fg-muted);
    font-size: 11px; line-height: 18px; font-family: inherit;
}
.navsearch:focus-within .navsearch__kbd { display: none; }
.navsearch__results {
    position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 60;
    max-height: 60vh; overflow-y: auto; border-radius: 8px; padding: 4px;
    background: #2b2f33; box-shadow: 0 10px 28px rgba(0,0,0,.45); border: 1px solid rgba(255,255,255,.08);
}
.navsearch__hit {
    display: flex; align-items: center; gap: 10px; padding: 7px 9px; border-radius: 6px;
    color: #e8edf4; text-decoration: none; font-size: 13px;
}
.navsearch__hit i { width: 16px; text-align: center; color: rgba(255,255,255,.5); flex: 0 0 auto; }
.navsearch__hit:hover, .navsearch__hit.is-sel { background: rgba(255,255,255,.09); text-decoration: none; color: #fff; }
.navsearch__txt { display: flex; flex-direction: column; min-width: 0; }
.navsearch__label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.navsearch__path { font-size: 11px; color: rgba(255,255,255,.5); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.navsearch__empty { padding: 8px 10px; font-size: 12.5px; color: rgba(255,255,255,.55); }
.sidenav__item--soon em {
    font-style: normal; font-size: 10px; text-transform: uppercase; letter-spacing: .6px;
    background: rgba(255,255,255,.06); color: var(--rail-fg-muted);
    padding: 2px 6px; border-radius: 999px;
}
.sidebar__foot {
    margin-top: auto; padding: 12px 16px; font-size: 11px; color: var(--rail-fg-muted);
    border-top: 1px solid rgba(255,255,255,.05);
}

/* ---------- System console extras ---------- */
.topbar--system { border-bottom: 3px solid var(--accent); }
.system-tag {
    display: flex; align-items: center; padding: 0 16px; font-size: 13px; font-weight: 700;
    letter-spacing: .6px; color: #8fd0e0; text-transform: uppercase;
}
a.sidenav__item.is-active { background: var(--rail-bg-2); color: #fff; border-left-color: var(--accent); font-weight: 600; }
a.sidenav__item.is-active .sidenav__ico { color: #fff; }
a.sidenav__item.is-active .sidenav__chev { color: #fff; }

.stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 16px; max-width: 820px; margin-bottom: 22px; }
.stat {
    background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
    box-shadow: var(--shadow); padding: 18px 20px;
}
.stat__num { font-size: 30px; font-weight: 800; color: var(--accent-2); line-height: 1; }
.stat__label { font-size: 13px; color: var(--text-muted); margin-top: 6px; }

/* ---------- Content ---------- */
.content { flex: 1 1 auto; min-width: 0; }
.content__head {
    background: var(--surface); border-bottom: 1px solid var(--line);
    padding: 18px 28px;
}
.content__head h1 { margin: 0; font-size: 24px; font-weight: 600; color: var(--dk-text, #33475b); }
.content__body { padding: 24px 28px; }

/* In-app Back control (App\Support\NavHistory) — sits above the heading band. */
.content__back { padding: 12px 28px 0; }
.nav-back {
    display: inline-flex; align-items: center; gap: 8px;
    font-size: 13px; font-weight: 600; line-height: 1;
    padding: 8px 14px; border-radius: 999px; text-decoration: none;
    color: var(--text-muted, #64748b);
    border: 1px solid var(--line, #d9e0e8);
    background: var(--surface, #fff);
}
.nav-back:hover { color: var(--dk-text, #33475b); border-color: var(--text-muted, #94a3b8); }
.nav-back i { font-size: 11px; }

/* ---------- Cards ---------- */
.card {
    background: var(--surface); border: 1px solid var(--line);
    border-radius: var(--radius); box-shadow: var(--shadow);
    padding: 22px 24px; max-width: 980px;
}
.card h2 { margin: 0 0 8px; font-size: 19px; }
.card p { color: var(--text-muted); line-height: 1.55; margin: 8px 0; }
.card--placeholder { position: relative; }
.card__badge {
    display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: .4px;
    color: var(--accent-2); background: var(--dk-accent-bg, #e3f1f5); border: 1px solid var(--dk-line, #c3e2ea);
    padding: 4px 10px; border-radius: 999px; margin-bottom: 10px;
}
.muted { color: var(--text-muted); }

/* ---------- Calendar skeleton (decorative) ---------- */
.cal-skeleton { margin-top: 18px; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.cal-skeleton__head { display: grid; grid-template-columns: repeat(7, 1fr); background: var(--dk-surface-2, #f6f8fa); }
.cal-skeleton__day { padding: 8px; text-align: center; font-size: 12px; color: var(--text-muted); border-right: 1px solid var(--line); }
.cal-skeleton__day:last-child { border-right: 0; }
.cal-skeleton__grid { display: grid; grid-template-columns: repeat(7, 1fr); }
.cal-skeleton__cell { height: 34px; border-right: 1px solid var(--line); border-top: 1px solid var(--line); }
.cal-skeleton__cell:nth-child(7n) { border-right: 0; }

/* ---------- Status table ---------- */
.status-table { width: 100%; border-collapse: collapse; margin-top: 14px; }
.status-table th, .status-table td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--line); font-size: 14px; }
.status-table th { font-size: 12px; text-transform: uppercase; letter-spacing: .6px; color: var(--text-muted); }
.status-detail { color: var(--text-muted); font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 12.5px; }
.pill { display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 700; }
.pill--ok  { background: var(--dk-ok-bg, #e4f6ec); color: var(--ok); }
.pill--bad { background: var(--dk-danger-bg, #fae3e3); color: var(--bad); }

/* ---------- Mobile backdrop ---------- */
.sidebar-backdrop {
    display: none; position: fixed; inset: var(--topbar-h) 0 0 0;
    background: rgba(15,20,28,.45); z-index: 30;
}
body.sidebar-open .sidebar-backdrop { display: block; }

/* ---------- Auth (login / 2FA) ---------- */
.auth-body { min-height: 100vh; display: flex; flex-direction: column; background: #1b2733; }
.auth-bg {
    position: fixed; inset: 0; z-index: -2;
    background-size: cover; background-position: center; background-repeat: no-repeat;
    transform: scale(1.08); /* hides blurred edges */
}
.auth-overlay { position: fixed; inset: 0; z-index: -1; }
.auth-wrap { flex: 1; display: flex; align-items: center; justify-content: center; padding: 24px; }
.auth-footer {
    position: relative; z-index: 1; text-align: center; padding: 14px 16px 20px;
    color: rgba(255,255,255,.9); font-size: 12.5px; line-height: 1.5;
    text-shadow: 0 1px 3px rgba(0,0,0,.5);
}
.turnstile-wrap { display: flex; justify-content: center; min-height: 4px; }
.auth-card {
    width: 100%; max-width: 400px; background: var(--surface);
    border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow);
    padding: 30px 28px;
}
.auth-card__brand { text-align: center; margin-bottom: 18px; }
.auth-card__brand img { height: 42px; width: auto; }
.auth-title { font-size: 21px; margin: 4px 0 4px; color: var(--accent-2); text-align: center; }
.auth-sub { color: var(--text-muted); font-size: 14px; text-align: center; margin: 0 0 18px; line-height: 1.5; }
.auth-card__note { margin-top: 18px; text-align: center; font-size: 11.5px; color: var(--text-muted); }
.auth-card { box-shadow: 0 10px 40px rgba(10,20,35,.35); }
.auth-actions { margin-top: 16px; text-align: center; color: var(--text-muted); font-size: 13px; }
.auth-actions .inline { display: inline; }
.dot { margin: 0 6px; color: var(--text-muted); }

.auth-form { display: flex; flex-direction: column; gap: 14px; }
.field { display: flex; flex-direction: column; gap: 6px; }
.field > span { font-size: 13px; font-weight: 600; color: var(--text); }
.field input, .field select, .field textarea,
.appt-req__row select, .appt-req__row input[type=number],
.pay-rem__row select, .pay-rem__row input[type=number] {
    padding: 10px 12px; border: 1px solid var(--dk-line, #d7dee4); border-radius: 9px;
    font-size: 14.5px; font-family: inherit; background: var(--dk-surface, #fff); color: var(--text);
    transition: border-color .12s ease, box-shadow .12s ease, background-color .12s ease;
}
.field input, .field select, .field textarea { width: 100%; }
.field input:hover, .field select:hover, .field textarea:hover,
.appt-req__row select:hover, .appt-req__row input:hover,
.pay-rem__row select:hover, .pay-rem__row input:hover { border-color: var(--dk-line-strong, #b3bfc7); }
.field input:focus, .field select:focus, .field textarea:focus,
.appt-req__row select:focus, .appt-req__row input:focus,
.pay-rem__row select:focus, .pay-rem__row input:focus {
    outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(31,138,166,.14);
}
.field input::placeholder, .field textarea::placeholder { color: var(--dk-muted, #9aa4ad); }
.field select, .appt-req__row select, .pay-rem__row select {
    -webkit-appearance: none; -moz-appearance: none; appearance: none; cursor: pointer;
    padding-right: 34px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%236b7681' d='M6 8.6 1.4 4l1-1L6 6.6 9.6 3l1 1z'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 12px center;
}
.field input[type=number], .appt-req__row input[type=number], .pay-rem__row input[type=number] { -moz-appearance: textfield; }
.field input[type=number]::-webkit-inner-spin-button, .field input[type=number]::-webkit-outer-spin-button,
.appt-req__row input[type=number]::-webkit-inner-spin-button, .pay-rem__row input[type=number]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.code-input { letter-spacing: 8px; text-align: center; font-size: 22px !important; }
.input-wrap { position: relative; display: block; }
.input-wrap > i { position: absolute; left: 13px; top: 50%; transform: translateY(-50%); color: var(--text-muted); font-size: 14px; pointer-events: none; }
.input-wrap > input { padding-left: 38px; }

/* ---------- Buttons ---------- */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    padding: 10px 16px; border-radius: 9px; border: 1px solid transparent;
    font-size: 14px; font-weight: 600; cursor: pointer; font-family: inherit; text-decoration: none;
}
.btn--primary { background: var(--accent); color: #fff; }
.btn--primary:hover { background: var(--accent-2); text-decoration: none; }
.btn--block { width: 100%; }
.btn--ghost { background: var(--dk-surface, #fff); border-color: var(--line); color: var(--text); }
.btn--ghost:hover { background: var(--dk-surface-2, #f5f8fa); text-decoration: none; }
.btn--danger { background: var(--bad); color: #fff; }
.btn--sm { padding: 6px 10px; font-size: 13px; }
.linkbtn { background: none; border: 0; color: var(--accent); cursor: pointer; font: inherit; padding: 0; }
.linkbtn:hover { text-decoration: underline; }

/* ---------- Flash ---------- */
.flash { padding: 10px 12px; border-radius: 9px; font-size: 13.5px; margin-bottom: 14px; border: 1px solid transparent; }
.flash--error   { background: var(--dk-danger-bg, #fae3e3); color: var(--dk-danger, #a12d2d); border-color: #f0c3c3; }
.flash--success { background: var(--dk-ok-bg, #e4f6ec); color: var(--dk-ok, #1f7a44); border-color: #bfe6cd; }
.flash--info    { background: var(--dk-accent-bg, #e3f1f5); color: var(--dk-accent, #15677d); border-color: var(--dk-line, #c3e2ea); }
.flash--warning { background: var(--dk-warn-bg, #fdf0d8); color: var(--dk-warn, #9a6a12); border-color: #f0dcae; }

/* ---------- Data tables / admin ---------- */
.data-table { width: 100%; border-collapse: collapse; background: var(--surface); }
.data-table th, .data-table td { text-align: left; padding: 11px 14px; border-bottom: 1px solid var(--line); font-size: 14px; }
.data-table th { font-size: 12px; text-transform: uppercase; letter-spacing: .5px; color: var(--text-muted); background: var(--dk-surface-2, #f7f9fa); }
.data-table tr:hover td { background: var(--dk-surface-2, #fafcfd); }
/* overflow-x must be auto, not hidden: these tables are sized for a desktop grid, so on a
   narrow window (a tablet, a split screen) `hidden` silently clips the right-hand columns —
   including the row actions — with no way to reach them. `auto` gives a scrollbar only when
   it's actually needed. overflow-y stays hidden so the rounded corners still clip. */
.table-wrap { border: 1px solid var(--line); border-radius: var(--radius); overflow-x: auto; overflow-y: hidden; box-shadow: var(--shadow); -webkit-overflow-scrolling: touch; }
.page-actions { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; gap: 12px; flex-wrap: wrap; }
.badge { display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: 11.5px; font-weight: 700; }
.badge--green { background: var(--dk-ok-bg, #e4f6ec); color: var(--dk-ok, #1f7a44); }
.badge--gray  { background: var(--dk-surface-3, #eceff2); color: var(--dk-text-2, #5b6672); }
.badge--amber { background: var(--dk-warn-bg, #fdf0d8); color: var(--dk-warn, #9a6a12); }
.badge--teal  { background: var(--dk-accent-bg, #e3f1f5); color: var(--dk-accent, #15677d); }

/* Permission matrix dots (Roles) */
.perm-cell { text-align: center; }
.perm { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%; line-height: 1; }
.perm--on { background: #2e9b57; color: #fff; font-size: 14px; box-shadow: 0 2px 6px rgba(46,155,87,.45); }
.perm--off { width: 14px; height: 14px; border: 2px solid var(--dk-line, #d7dee4); background: var(--dk-surface-2, #f5f7f9); }

/* User signature pad (draw / upload / link) */
.sig-current { margin-bottom: 16px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 10px; background: var(--dk-surface-2, #fafcfd); }
.sig-current__img { display: block; max-width: 320px; max-height: 120px; background: var(--dk-surface, #fff); border: 1px solid var(--line); border-radius: 6px; padding: 6px; }
.sig-remove { display: inline-flex; align-items: center; gap: 6px; margin-top: 10px; font-size: 13px; font-weight: 600; color: var(--bad); cursor: pointer; }
.sig-remove input { width: auto; }
.sig-methods { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
.sig-method-pick { display: inline-flex; align-items: center; gap: 7px; padding: 8px 15px; border: 1px solid var(--line); border-radius: 999px; cursor: pointer; font-size: 13px; font-weight: 600; color: var(--text-muted); background: var(--dk-surface, #fff); user-select: none; }
.sig-method-pick input { display: none; }
.sig-method-pick i { font-size: 12px; }
.sig-method-pick.is-active { border-color: var(--accent); color: var(--accent-2); background: var(--dk-accent-bg, #eaf4f7); }
.sig-method-pick:has(input:checked) { border-color: var(--accent); color: var(--accent-2); background: var(--dk-accent-bg, #eaf4f7); }
/* Upload source toggle (Files: upload vs link) — pure CSS */
.usrc-url { display: none; }
.usrc:has(input[name="file_source"][value="url"]:checked) .usrc-url { display: block; }
.usrc:has(input[name="file_source"][value="url"]:checked) .usrc-file { display: none; }
.usrc-file, .usrc-url { margin-top: 4px; }
/* Inline prompt raised by upload-guard.js before the form is allowed to POST
   (no file chosen / file bigger than the server will accept). */
.upload-guard__error {
    margin: 10px 0 0; padding: 8px 10px; font-size: 12.5px; line-height: 1.45;
    color: var(--danger-2, #8c1d1d); background: var(--danger-bg, #fdecec);
    border: 1px solid var(--danger-border, #f3c2c2); border-radius: 8px;
}
input[type=file][aria-invalid="true"], input[type=url][aria-invalid="true"] {
    outline: 2px solid var(--danger, #c0392b); outline-offset: 2px; border-radius: 4px;
}
/* Modern native file input (button + filename) */
input[type=file] { font-size: 13.5px; color: var(--text-muted); max-width: 100%; }
input[type=file]::file-selector-button {
    font-family: inherit; font-size: 13px; font-weight: 600;
    padding: 9px 16px; margin-right: 12px; cursor: pointer;
    border: 1px solid var(--line); border-radius: 8px;
    background: var(--dk-surface, #fff); color: var(--accent-2);
    transition: background-color .12s ease, border-color .12s ease, box-shadow .12s ease;
}
input[type=file]::file-selector-button:hover { background: var(--dk-accent-bg, #eaf4f7); border-color: var(--accent); }
/* Resource edit — current file row */
.res-filerow {
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
    margin-top: 6px; padding: 10px 12px; border: 1px solid var(--line);
    border-radius: 9px; background: var(--dk-surface-2, #f7f9fa); font-size: 14px;
}
.res-filerow > i { color: var(--text-muted); }
.res-filerow .linkbtn { margin-left: auto; }
/* Modern patient files list */
.filelist { list-style: none; margin: 0 0 18px; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.file-item { display: flex; align-items: center; gap: 14px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); transition: box-shadow .15s, border-color .15s; }
.file-item:hover { border-color: var(--dk-line, #cfdbe0); box-shadow: 0 3px 10px rgba(20,40,60,.07); }
.file-ico { flex: 0 0 auto; width: 42px; height: 42px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; font-size: 19px; }
.file-ico--pdf { background: var(--dk-danger-bg, #fdecea); color: #d0433a; }
.file-ico--word { background: var(--dk-accent-bg, #e8f0fb); color: var(--dk-accent, #2b6cb0); }
.file-ico--excel { background: var(--dk-ok-bg, #e7f6ec); color: var(--dk-ok, #1f8a4c); }
.file-ico--image { background: var(--dk-surface-2, #f1ecfb); color: #6b46c1; }
.file-ico--ppt { background: var(--dk-surface-2, #fdeee6); color: #c05621; }
.file-ico--zip { background: var(--dk-surface-2, #f0eefb); color: #5a4bd1; }
.file-ico--text, .file-ico--generic { background: var(--dk-surface-2, #eef1f4); color: var(--dk-text-2, #5b6672); }
.file-title { display: inline-block; font-size: 14.5px; text-decoration: none; color: var(--text); }
.file-title:hover strong { color: var(--accent); text-decoration: underline; }
.filesection { display: inline-flex; align-items: center; gap: 4px; font-weight: 600; color: var(--dk-muted, #6b7681); }
.file-main { flex: 1; min-width: 0; }
.file-meta { font-size: 11.5px; color: var(--text-muted); margin-top: 3px; padding-left: 9px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.file-meta__name { font-weight: 600; color: var(--dk-muted, #6b7681); }
.file-actions { display: flex; align-items: center; gap: 2px; flex: 0 0 auto; }
/* Share-link drawer: a full-width row that expands under the file it belongs to.
   .file-item is a flex row, so the drawer has to claim its own line. */
.file-item { flex-wrap: wrap; }
.file-share { flex: 0 0 100%; margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--line); }
.file-share[hidden] { display: none; }
.file-share__form { display: flex; align-items: flex-end; gap: 12px; flex-wrap: wrap; }
.file-share__form .field--inline { margin: 0; }
.file-share__state { margin: 0 0 4px; font-size: 12.5px; color: var(--ok-2, #1e7a4d); }
.file-share .checkline { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--text-muted); }
.iconbtn.is-on { color: var(--accent, #2b8a9e); }

/* IPOS/ABA Data (patient chart tab) */
.ipos-list { display: flex; flex-direction: column; gap: 12px; }
.ipos-record { border: 1px solid var(--line); border-radius: 12px; background: var(--surface); overflow: hidden; }
.ipos-record__head { display: flex; align-items: center; gap: 10px; padding: 10px 14px; background: var(--dk-surface-2, #f7f9fa); border-bottom: 1px solid var(--line); }
.ipos-agency { font-size: 10.5px; font-weight: 700; letter-spacing: .4px; text-transform: uppercase; color: var(--dk-accent, #16677d); background: var(--dk-accent-bg, #e4f1f5); border-radius: 999px; padding: 3px 9px; }
.ipos-record__title { font-weight: 700; color: var(--accent-2); font-size: 14px; }
.ipos-record__date { margin-left: auto; font-size: 13px; color: var(--text-muted); }
.ipos-meta { display: flex; flex-wrap: wrap; gap: 4px 16px; padding: 8px 14px; font-size: 12.5px; color: var(--text-muted); }
.ipos-meta i { margin-right: 4px; opacity: .8; }
.ipos-section { padding: 8px 14px; border-top: 1px dashed var(--line); }
.ipos-section__label { font-size: 11px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase; color: var(--dk-muted, #6b7681); margin-bottom: 5px; }
.ipos-section__grid { display: flex; flex-wrap: wrap; gap: 8px 22px; align-items: center; font-size: 13.5px; }
.ipos-k { color: var(--text-muted); font-size: 11px; display: block; }
.ipos-trainer { display: inline-flex; align-items: center; gap: 8px; }
.ipos-sig { border: 1px solid var(--line); background: var(--dk-surface, #fff); border-radius: 6px; padding: 2px; cursor: pointer; line-height: 0; }
.ipos-sig img { height: 26px; width: auto; max-width: 130px; object-fit: contain; display: block; }
.ipos-sig:hover { border-color: var(--accent); }
.ipos-record__foot { display: flex; flex-wrap: wrap; gap: 8px; padding: 10px 14px; border-top: 1px solid var(--line); }
.ipos-record__detail { padding: 2px 14px 14px; border-top: 1px solid var(--line); background: var(--dk-surface-2, #fbfdfe); }
.ipos-detail__label { font-size: 11px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase; color: var(--dk-muted, #6b7681); margin: 10px 0 6px; }
.ipos-staff { display: flex; flex-wrap: wrap; gap: 10px; }
.ipos-staff__item { border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; background: var(--dk-surface, #fff); min-width: 150px; }
.ipos-staff__name { font-size: 13px; font-weight: 600; margin-bottom: 5px; }
.ipos-staff__trainer { margin-top: 6px; padding-top: 6px; border-top: 1px dashed var(--line); display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.ipos-raw { margin-top: 12px; }
.ipos-raw summary { cursor: pointer; font-size: 12.5px; color: var(--accent-2); font-weight: 600; }
.ipos-raw__table { width: 100%; border-collapse: collapse; margin-top: 8px; font-size: 12.5px; }
.ipos-raw__table td { border: 1px solid var(--line); padding: 4px 8px; vertical-align: top; }
.ipos-raw__k { font-weight: 600; color: var(--dk-muted, #6b7681); width: 40%; word-break: break-word; }
.filelabel { display: flex; align-items: center; gap: 4px; margin: 0; }
.filelabel input { flex: 1; min-width: 0; border: 1px solid transparent; background: transparent; border-radius: 7px; padding: 5px 9px; font-weight: 600; font-size: 14.5px; color: var(--text); }
.filelabel input::placeholder { font-weight: 400; color: var(--dk-muted, #9aa4ad); }
.filelabel input:hover { border-color: var(--line); }
.filelabel input:focus { border-color: var(--accent); background: var(--dk-surface, #fff); outline: none; box-shadow: 0 0 0 3px rgba(31,138,166,.12); }
.filelabel .iconbtn--save { opacity: 0; transform: scale(.9); transition: opacity .15s, transform .15s; }
.filelabel:focus-within .iconbtn--save { opacity: 1; transform: scale(1); }
.iconbtn--save { color: var(--accent); }
.iconbtn:hover { background: var(--dk-surface-2, #eef3f5); }
button.file-ico, a.file-ico { border: 0; cursor: pointer; padding: 0; text-decoration: none; transition: transform .1s ease, filter .1s ease; }
button.file-ico:hover, a.file-ico:hover { filter: brightness(.95); transform: translateY(-1px); }
/* Lightbox image viewer */
.lightbox { display: none; position: fixed; inset: 0; z-index: 120; background: rgba(10,15,20,.85); align-items: center; justify-content: center; padding: 30px; }
.lightbox.is-open { display: flex; }
.lightbox__img { max-width: 92vw; max-height: 86vh; border-radius: 8px; box-shadow: 0 12px 44px rgba(0,0,0,.55); background: var(--dk-surface, #fff); }
.lightbox__close { position: absolute; top: 16px; right: 24px; background: none; border: 0; color: #fff; font-size: 36px; line-height: 1; cursor: pointer; }
.lightbox__cap { position: absolute; bottom: 20px; left: 0; right: 0; text-align: center; color: #eef2f5; font-size: 14px; padding: 0 20px; }

/* Location → Users table + Document Header */
.userlist { max-height: 340px; overflow: auto; }
.svc { color: var(--accent); font-weight: 700; font-size: 13px; }
.dh-image, .dh-text { margin-top: 14px; }
.dh:has(input[name="doc_header_mode"][value="image"]:checked) .dh-text { display: none; }
.dh:has(input[name="doc_header_mode"][value="text"]:checked) .dh-image { display: none; }
.dh-url { display: none; }
.dh:has(input[name="doc_header_img_source"][value="link"]:checked) .dh-url { display: block; }
.dh:has(input[name="doc_header_img_source"][value="link"]:checked) .dh-file { display: none; }
.dh-preview img { max-width: 100%; max-height: 170px; border: 1px solid var(--line); border-radius: 8px; background: var(--dk-surface, #fff); padding: 8px; display: block; }
/* Document Headers list — preview cells */
.dh-cell { display: block; border: 1px solid var(--line); border-radius: 8px; background: var(--dk-surface, #fff); padding: 10px; text-decoration: none; transition: border-color .12s, box-shadow .12s; }
.dh-cell:hover { border-color: var(--dk-line, #cfdbe0); box-shadow: 0 3px 10px rgba(20,40,60,.07); }
.dh-cell__img { max-width: 100%; max-height: 120px; display: block; margin: 0 auto; }
.dh-cell__html { color: var(--text); font-size: 13px; max-height: 120px; overflow: hidden; }
.dh-cell__locs { vertical-align: top; }
.dh-locname { display: block; color: var(--accent-2); font-weight: 600; font-size: 13px; line-height: 1.55; }
/* Quick Phrases — full-text cell */
.qp-text { color: var(--accent-2); font-size: 13px; line-height: 1.5; white-space: pre-line; word-break: break-word;
    display: -webkit-box; -webkit-line-clamp: 6; -webkit-box-orient: vertical; overflow: hidden; max-height: 120px; }
.qp-click { cursor: pointer; }
.qp-row:hover td { background: var(--dk-surface-2, #f5f8fa); }
/* Intake form renderer (preview / patient view) */
.ifr-sheet { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 26px; max-width: 860px; }
.ifr-preview-note { background: var(--dk-accent-bg, #eaf4f7); color: var(--accent-2); padding: 8px 12px; border-radius: 8px; font-size: 13px; margin-bottom: 18px; }
.ifr { display: flex; flex-wrap: wrap; gap: 14px 16px; align-items: flex-end; }
.ifr-heading { flex-basis: 100%; font-size: 16px; margin: 14px 0 2px; color: var(--accent-2); border-bottom: 1px solid var(--line); padding-bottom: 6px; }
.ifr-para { flex-basis: 100%; color: var(--text); font-size: 13.5px; line-height: 1.55; margin: 0; }
/* min-width:0 is load-bearing: .ifr is a flex row, and a flex item defaults to
   min-width:auto, meaning it refuses to shrink below its content's min-content
   width. A wide table/grid inside a field would therefore stretch the field (and
   the whole card) past the viewport instead of scrolling inside its .table-wrap.
   Overriding to 0 lets the field shrink and hands the overflow to the wrapper. */
.ifr-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.ifr-field > span { font-size: 13px; font-weight: 600; color: var(--text); }
.ifr-w-full { flex-basis: 100%; }
.ifr-w-half { flex-basis: calc(50% - 8px); }
.ifr-w-third { flex-basis: calc(33.33% - 11px); }
.ifr-field input, .ifr-field select, .ifr-field textarea { width: 100%; padding: 9px 11px; border: 1px solid var(--dk-line, #d7dee4); border-radius: 8px; font: inherit; font-size: 14px; background: var(--dk-surface, #fbfcfd); color: var(--text); }
.ifr-req { color: var(--bad); }
.ifr-choices { display: flex; gap: 16px; flex-wrap: wrap; margin-top: 2px; }
.ifr-choices--stack { flex-direction: column; gap: 8px; }
.ifr-choice { font-weight: 400; font-size: 14px; display: inline-flex; align-items: center; gap: 6px; }
.ifr-sign { border: 1px dashed var(--dk-line, #cdd8de); border-radius: 8px; padding: 18px; color: var(--text-muted); text-align: center; }
.ifr-table { width: 100%; border-collapse: collapse; }
.ifr-table th, .ifr-table td { border: 1px solid var(--line); padding: 6px 8px; font-size: 13px; text-align: left; }
.ifr-table th { background: var(--dk-surface-2, #f2f5f7); font-weight: 600; }
.ifr-table td input { width: 100%; border: 0; background: transparent; padding: 4px; font: inherit; }
.ifr-grid-row { white-space: nowrap; }
.badge--red { background: var(--dk-danger-bg, #fdecea); color: var(--dk-danger, #a5322a); border: 1px solid #f3c6c1; }
/* ---------- Public patient portal (unauthenticated intake) ---------- */
.portal-body { margin: 0; background: #eef2f5; color: var(--text); font-family: inherit; min-height: 100vh; display: flex; flex-direction: column; }
.portal-top { background: var(--topbar-bg, #12202c); color: #fff; padding: 14px 20px; text-align: center; }
.portal-top__clinic { font-weight: 700; font-size: 16px; letter-spacing: .2px; }

/* ---- Branding & Style overrides -------------------------------------------
   The --portal-* custom properties are emitted per-clinic by PortalBranding::cssVars()
   into the portal layout's <style>. Everything is scoped to .portal-body--branded so
   staff pages keep the stock theme. */
.portal-body--branded { font-family: var(--portal-font); background: var(--portal-bg); }
.portal-body--branded .portal-top { background: var(--portal-header-bg); display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap; }
.portal-top__logo { max-height: 40px; max-width: 190px; width: auto; height: auto; display: block; }
.portal-body--branded .portal-card { border-radius: var(--portal-radius); }
.portal-body--branded .btn--primary { background: var(--portal-accent); border-color: var(--portal-accent); }
.portal-body--branded .btn--primary:hover { background: var(--portal-accent-dark); border-color: var(--portal-accent-dark); }
.portal-body--branded .portal-prog__bar span { background: var(--portal-accent); }
.portal-body--branded .portal-hero__ico { background: var(--portal-accent-wash); color: var(--portal-accent); }
.portal-body--branded .portal-h2 { color: var(--portal-accent-dark); }
.portal-body--branded a { color: var(--portal-accent); }
.portal-body--branded .portal-forms--live a:hover { border-color: var(--portal-accent); }
.portal-body--branded .ifr-field input:focus, .portal-body--branded .ifr-field select:focus,
.portal-body--branded .ifr-field textarea:focus { outline: 2px solid var(--portal-accent); outline-offset: 1px; border-color: var(--portal-accent); }
.portal-body--branded .ifr-choice input, .portal-body--branded .ifr-cgopt input,
.portal-body--branded .ifr-consent__opt--pick input { accent-color: var(--portal-accent); }
.portal-body--branded .rv-multi, .portal-body--branded .portal-ready i { color: var(--portal-accent); }
/* Headings pick up the brand font's personality; body copy stays maximally legible. */
.portal-body--branded .portal-card h1, .portal-body--branded .ifr-heading { font-family: var(--portal-font); letter-spacing: -.2px; }
.portal-welcome { margin: 0 0 6px; font-size: 14.5px; line-height: 1.55; }
.portal-main { flex: 1; width: 100%; max-width: 640px; margin: 0 auto; padding: 22px 16px 40px; }
.portal-foot { text-align: center; padding: 16px; color: var(--text-muted); font-size: 12px; }
.portal-foot p { margin: 0; }
.portal-card { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 26px 22px; box-shadow: 0 2px 10px rgba(20,40,60,.05); }
.portal-card--narrow { max-width: 460px; margin: 30px auto; }
.portal-hero { text-align: center; margin-bottom: 22px; }
.portal-hero__ico { width: 58px; height: 58px; margin: 0 auto 12px; border-radius: 50%; background: #eaf4f7; color: var(--accent-2); display: flex; align-items: center; justify-content: center; font-size: 24px; }
.portal-hero__ico--muted { background: #eef1f4; color: var(--text-muted); }
.portal-card h1 { margin: 0 0 6px; font-size: 22px; }
.portal-h2 { margin: 22px 0 10px; font-size: 15px; color: var(--accent-2); }
.portal-steps { display: flex; flex-direction: column; gap: 10px; margin-bottom: 6px; }
.portal-step { display: flex; align-items: center; gap: 12px; padding: 11px 13px; border: 1px solid var(--line); border-radius: 10px; background: #fbfcfd; }
.portal-step__n { flex: 0 0 auto; width: 26px; height: 26px; border-radius: 50%; background: var(--accent-2); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 13px; }
.portal-step strong { display: block; font-size: 14px; }
.portal-step span { font-size: 12.5px; color: var(--text-muted); }
.portal-forms { margin: 0; padding-left: 22px; display: flex; flex-direction: column; gap: 7px; }
.portal-forms li { font-size: 14px; line-height: 1.4; }
.portal-forms i { color: var(--accent); margin-right: 5px; }
.portal-soon { display: flex; gap: 11px; align-items: flex-start; margin-top: 22px; padding: 13px 15px; background: #fff8e6; border: 1px solid #f1d78a; border-left: 4px solid #e0a800; border-radius: 10px; font-size: 13.5px; line-height: 1.5; }
.portal-soon i { color: #e0a800; margin-top: 2px; }
/* ---- Deploy Packet: KPI row + list -----------------------------------------
   The KPI cards are the status filter, so they're anchors, not decoration. */
.kpi-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(155px, 1fr)); gap: 12px; margin-bottom: 18px; }
.kpi {
    position: relative; display: flex; align-items: center; gap: 12px;
    padding: 14px 15px; background: var(--surface); border: 1px solid var(--line);
    border-radius: var(--radius); box-shadow: var(--shadow); color: var(--text);
    text-decoration: none; transition: border-color .14s, box-shadow .14s, transform .14s;
}
.kpi:hover { text-decoration: none; border-color: var(--accent); transform: translateY(-1px); box-shadow: 0 4px 14px rgba(20,40,60,.10); }
.kpi.is-on { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent), var(--shadow); background: var(--dk-surface-2, #f7fbfc); }
.kpi__ico { flex: 0 0 auto; width: 38px; height: 38px; border-radius: 9px; display: flex; align-items: center; justify-content: center; font-size: 15px; }
.kpi__body { display: flex; flex-direction: column; min-width: 0; }
.kpi__n { font-size: 22px; font-weight: 700; line-height: 1.1; letter-spacing: -.4px; }
.kpi__label { font-size: 11.5px; color: var(--text-muted); text-transform: uppercase; letter-spacing: .4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kpi--slate .kpi__ico { background: var(--dk-surface-2, #eef1f4); color: var(--dk-text-2, #64707d); }
.kpi--teal  .kpi__ico { background: var(--dk-accent-bg, #e4f1f4); color: var(--accent-2); }
.kpi--amber .kpi__ico { background: var(--dk-warn-bg, #fdf3dc); color: var(--dk-warn, #a67c00); }
.kpi--green .kpi__ico { background: var(--dk-ok-bg, #e6f6ec); color: var(--dk-ok, #1f7a45); }
/* A quiet nudge that something is actually waiting on a human. */
.kpi__dot { position: absolute; top: 9px; right: 9px; width: 8px; height: 8px; border-radius: 50%; background: var(--bad); box-shadow: 0 0 0 3px rgba(207,64,64,.16); }

.head-tools { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.filter-note { margin: 0 0 12px; font-size: 13px; color: var(--text-muted); }
.filter-note i { margin-right: 5px; color: var(--accent); }

.dep-table td { vertical-align: middle; }
.dep-pat { display: flex; align-items: center; gap: 11px; }
.dep-avatar {
    flex: 0 0 auto; width: 34px; height: 34px; border-radius: 50%;
    background: var(--dk-accent-bg, #e4f1f4); color: var(--accent-2);
    display: flex; align-items: center; justify-content: center;
    font-size: 12px; font-weight: 700; letter-spacing: .3px;
}
.dep-pat__txt { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.dep-sub { font-size: 12px; color: var(--text-muted); }
.dep-sub--note { font-style: italic; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 260px; }
.dep-contact { font-size: 12.5px; color: var(--text-muted); display: flex; align-items: center; gap: 6px; }
.dep-contact i { width: 13px; opacity: .7; }
.dep-nocontact { font-size: 12px; color: var(--dk-warn, #b0741a); display: inline-flex; align-items: center; gap: 6px; }
.dep-prog { display: flex; flex-direction: column; gap: 4px; }
.dep-prog__txt { font-size: 11.5px; color: var(--text-muted); }
.dep-act { font-size: 12px; color: var(--text-muted); }
.dep-act i { width: 13px; opacity: .7; margin-right: 3px; }
/* One flex row keeps the actions from wrapping into a broken stack. */
.dep-tools { display: flex; align-items: center; justify-content: flex-end; gap: 5px; flex-wrap: nowrap; }
.dep-tools .inline { display: inline-flex; margin: 0; }
.dep-tools .btn--sm { white-space: nowrap; }
.dep-tools .btn:disabled { opacity: .45; cursor: not-allowed; }
.iconbtn.is-done { color: var(--ok); }
tr.is-off { opacity: .55; }
tr.is-off .dep-avatar { background: var(--dk-surface-2, #eef1f4); color: var(--dk-muted, #97a1ab); }

@media (max-width: 900px) {
    .kpi-row { grid-template-columns: repeat(auto-fit, minmax(132px, 1fr)); gap: 8px; }
    .kpi { padding: 11px 12px; gap: 9px; }
    .kpi__ico { width: 32px; height: 32px; font-size: 13px; }
    .kpi__n { font-size: 18px; }
}

/* Ollama setup — the local/cloud choice */
.field-lbl { display: block; font-size: 13px; font-weight: 600; margin-bottom: 8px; }
.mode-picks { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 12px; margin-bottom: 18px; }
.mode-pick { display: flex; gap: 12px; padding: 14px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--dk-surface, #fbfcfd); cursor: pointer; transition: border-color .14s, background .14s, box-shadow .14s; }
.mode-pick:hover { border-color: var(--accent); }
.mode-pick.is-on { border-color: var(--accent); background: var(--dk-accent-bg, #f4fafb); box-shadow: inset 0 0 0 1px var(--accent); }
.mode-pick input { position: absolute; opacity: 0; pointer-events: none; }
.mode-pick__ico { flex: 0 0 auto; width: 38px; height: 38px; border-radius: 9px; background: var(--dk-accent-bg, #eaf0f3); color: var(--accent-2); display: flex; align-items: center; justify-content: center; font-size: 15px; }
.mode-pick.is-on .mode-pick__ico { background: var(--accent); color: #fff; }
.mode-pick__body { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.mode-pick__body strong { font-size: 14px; }
.mode-pick__body > span { font-size: 12.5px; color: var(--text-muted); line-height: 1.45; }
.mode-pick__tag { display: inline-flex; align-items: center; gap: 5px; align-self: flex-start; margin-top: 2px; padding: 3px 8px; border-radius: 99px; font-size: 11px; font-weight: 700; }
.mode-pick__tag--ok { background: var(--dk-ok-bg, #e6f6ec); color: var(--dk-ok, #1f7a45); }
.mode-pick__tag--warn { background: var(--dk-warn-bg, #fdf0e3); color: var(--dk-warn, #a4560d); }
.mode-panel[hidden] { display: none; }
.model-lbl { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 13px; font-weight: 600; }
.model-lbl .linkbtn { font-size: 12px; font-weight: 600; }
.model-pick { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.model-pick select { flex: 1; min-width: 220px; }
.model-state { font-size: 12px; color: var(--text-muted); white-space: nowrap; }
.model-state--busy { color: var(--text-muted); }
.model-state--busy::before { content: ''; display: inline-block; width: 10px; height: 10px; margin-right: 6px; border: 2px solid var(--dk-line-strong, #cfd6dd); border-top-color: var(--accent); border-radius: 50%; animation: spin .7s linear infinite; vertical-align: -1px; }
.model-state--ok { color: var(--dk-ok, #1f7a45); }
.model-state--bad { color: var(--bad); }
@keyframes spin { to { transform: rotate(360deg); } }
.model-warn { display: flex; gap: 8px; margin-top: 8px; padding: 9px 11px; background: var(--dk-warn-bg, #fdf0e3); border: 1px solid #f0cfa8; border-radius: 8px; font-size: 12.5px; line-height: 1.45; color: var(--dk-warn, #7a4a10); }
.model-warn[hidden] { display: none; }
.model-warn i { color: var(--dk-warn, #a4560d); margin-top: 2px; }
.tset-foot { margin-top: 18px; }
.tset-test { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--line); display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.tset-test .help-text { flex: 1; min-width: 180px; }
code { background: var(--dk-surface-2, #eef1f4); padding: 1px 5px; border-radius: 4px; font-size: 12.5px; }

/* Onboarding (intake → chart) */
.onboard-modal .form-grid { max-width: none; }
.warn-box { display: flex; gap: 11px; align-items: flex-start; padding: 12px 14px; margin-bottom: 14px; background: var(--dk-warn-bg, #fff8e6); border: 1px solid #f1d78a; border-left: 4px solid var(--dk-warn, #e0a800); border-radius: 10px; font-size: 13.5px; line-height: 1.5; }
.warn-box > i { color: var(--dk-warn, #e0a800); margin-top: 2px; }
.warn-box--stop { background: var(--dk-danger-bg, #fdf0f0); border-color: #f0c2c2; border-left-color: var(--bad); }
.warn-box--stop > i { color: var(--bad); }
.warn-box .help-text { display: block; margin-top: 4px; }
.dupe-list { margin: 6px 0 0; padding-left: 18px; font-size: 13px; display: flex; flex-direction: column; gap: 4px; }
.onboard-ctx { margin-top: 16px; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.onboard-ctx__h { display: block; padding: 9px 13px; background: var(--dk-surface-2, #f7f9fa); border-bottom: 1px solid var(--line); font-size: 12.5px; font-weight: 700; }
.onboard-ctx__row { display: flex; gap: 14px; padding: 7px 13px; border-bottom: 1px dashed var(--dk-line, #eef1f4); font-size: 13px; }
.onboard-ctx__row:last-child { border-bottom: 0; }
.onboard-ctx__row > span:first-child { flex: 0 0 42%; color: var(--text-muted); }
.onboard-case { margin-top: 16px; padding: 14px; border: 1px dashed var(--line); border-radius: 10px; background: var(--dk-surface, #fbfcfd); }
.onboard-case__h { display: block; margin-bottom: 10px; font-size: 13px; font-weight: 700; color: var(--accent-2); }

/* Branding & Style (admin) — settings on the left, live phone preview on the right */
.brand-cols { display: grid; grid-template-columns: minmax(0,1fr) 320px; gap: 20px; align-items: start; }
.brand-side { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.brand-side .form-card { max-width: none; padding: 18px 20px; }
.card-h { margin: 0 0 10px; font-size: 14px; color: var(--accent-2); }
.brand-logo-now { display: flex; align-items: center; gap: 14px; padding: 12px; background: #2b333d; border-radius: 8px; margin-bottom: 12px; flex-wrap: wrap; }
.brand-logo-now img { max-height: 44px; max-width: 180px; }
.brand-remove { color: #fff; font-size: 12.5px; display: inline-flex; align-items: center; gap: 6px; }
.checkline { display: inline-flex; align-items: center; gap: 8px; font-size: 13.5px; margin-top: 10px; }
.font-picks { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 10px; }
.font-pick { display: flex; align-items: center; gap: 11px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; cursor: pointer; background: var(--dk-surface, #fbfcfd); transition: border-color .15s, background .15s; }
.font-pick:hover { border-color: var(--accent); }
.font-pick.is-on { border-color: var(--accent); background: var(--dk-accent-bg, #f0f8fa); box-shadow: inset 0 0 0 1px var(--accent); }
.font-pick input { position: absolute; opacity: 0; pointer-events: none; }
.font-pick__demo { flex: 0 0 auto; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; background: var(--dk-surface, #fff); border: 1px solid var(--line); border-radius: 8px; font-size: 19px; font-weight: 600; }
.font-pick__meta { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.font-pick__meta strong { font-size: 13.5px; }
.font-pick__meta span { font-size: 11.5px; color: var(--text-muted); line-height: 1.35; }
.colorline { display: flex; align-items: center; gap: 9px; }
.colorline input[type=color] { width: 46px; height: 34px; padding: 2px; border: 1px solid var(--line); border-radius: 7px; background: var(--dk-surface, #fff); cursor: pointer; }
.colorline output { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 12.5px; color: var(--text-muted); }
.brand-foot { display: flex; justify-content: flex-end; gap: 10px; margin-top: 18px; }

/* Phone preview */
.brand-preview { position: sticky; top: 14px; }
.brand-preview__bar { font-size: 12.5px; font-weight: 600; color: var(--text-muted); margin-bottom: 8px; text-align: center; }
.phone { border: 8px solid #2b333d; border-radius: 24px; overflow: hidden; box-shadow: 0 8px 26px rgba(20,40,60,.16); background: var(--dk-surface, #fff); }
.phone__top { padding: 10px; text-align: center; color: #fff; font-weight: 700; font-size: 12px; display: flex; align-items: center; justify-content: center; gap: 7px; flex-wrap: wrap; }
.phone__top img { max-height: 22px; max-width: 110px; }
.phone__body { padding: 12px; min-height: 340px; }
.phone__card { background: var(--dk-surface, #fff); border: 1px solid var(--line); padding: 14px; }
.phone__ico { width: 34px; height: 34px; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 8px; font-size: 14px; }
.phone__card h4 { margin: 0 0 3px; text-align: center; font-size: 14px; }
.phone__sub { margin: 0 0 8px; text-align: center; font-size: 11px; color: var(--text-muted); }
.phone__welcome { margin: 0 0 8px; text-align: center; font-size: 10.5px; color: var(--text-muted); line-height: 1.45; }
.phone__prog { height: 5px; border-radius: 99px; background: #e6ebef; overflow: hidden; }
.phone__prog span { display: block; height: 100%; width: 35%; border-radius: 99px; }
.phone__progtxt { margin: 5px 0 10px; text-align: center; font-size: 10px; color: var(--text-muted); }
.phone__btn { color: #fff; text-align: center; padding: 9px; border-radius: 8px; font-size: 11.5px; font-weight: 600; margin-bottom: 10px; }
.phone__row { display: flex; align-items: center; gap: 7px; padding: 8px 9px; border: 1px solid var(--line); border-radius: 7px; font-size: 11px; margin-bottom: 5px; background: var(--dk-surface, #fbfcfd); color: var(--text); }
@media (max-width: 900px) {
    .brand-cols { grid-template-columns: 1fr; }
    .brand-preview { position: static; max-width: 320px; margin: 0 auto; }
}

/* Review Data — staff-facing packet reader */
.mini-prog { height: 5px; border-radius: 99px; background: var(--dk-surface-3, #e6ebef); overflow: hidden; margin-bottom: 4px; max-width: 110px; }
.mini-prog span { display: block; height: 100%; background: var(--accent); border-radius: 99px; }
.rv-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; flex-wrap: wrap; margin-bottom: 18px; }
.rv-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.rv-form { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); margin-bottom: 14px; overflow: hidden; }
.rv-form__head { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 11px 15px; background: var(--dk-surface-2, #f7f9fa); border-bottom: 1px solid var(--line); }
.rv-form__title { font-weight: 700; font-size: 14px; }
.rv-form__body { padding: 6px 15px; }
.rv-row { display: flex; gap: 16px; padding: 9px 0; border-bottom: 1px dashed var(--dk-line, #eef1f4); font-size: 13.5px; }
.rv-row:last-child { border-bottom: 0; }
.rv-label { flex: 0 0 40%; max-width: 300px; color: var(--text-muted); }
.rv-val { flex: 1; min-width: 0; word-break: break-word; }
.rv-blank { color: var(--dk-faint, #b6bfc9); font-style: italic; }
.rv-multi { display: inline-block; background: var(--dk-accent-bg, #eaf4f7); color: var(--accent-2); border-radius: 5px; padding: 2px 7px; margin: 0 4px 4px 0; font-size: 12.5px; }
.rv-sig { font-family: "Segoe Script", "Brush Script MT", cursive; font-size: 17px; }
.rv-table { border-collapse: collapse; }
.rv-table td { border: 1px solid var(--line); padding: 4px 8px; font-size: 12.5px; }
/* Scanned documents in Review.
   Staff are comparing the AI's reading against the card, so the image has to be big enough
   to actually read — the previous 130px thumbnail made that impossible, and the cramped text
   column broke policy numbers across lines. Two cards per row max, each with real room. */
/* Capped, not 1fr: with one document, auto-fit would stretch a single card across the whole
   page and strand a small image in a sea of white. 640px is enough for a readable card plus
   its values; extra width goes to the next card instead. */
.rv-docs { padding: 16px; display: grid; grid-template-columns: repeat(auto-fit, minmax(460px, 640px)); justify-content: start; gap: 16px; }
.rv-doc { border: 1px solid var(--line); border-radius: 12px; background: var(--dk-surface, #fbfcfd); overflow: hidden; }
.rv-doc__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 11px 14px; background: var(--dk-surface, #fff); border-bottom: 1px solid var(--line); }
.rv-doc__kind { font-size: 13.5px; font-weight: 700; }
.rv-doc__ai { display: inline-flex; align-items: center; gap: 6px; padding: 3px 9px; border-radius: 99px; background: var(--dk-accent-bg, #eaf4f7); color: var(--accent-2); font-size: 11px; font-weight: 700; white-space: nowrap; }
.rv-doc__ai--bad { background: var(--dk-danger-bg, #fdf0f0); color: var(--bad); }
.rv-doc__grid { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 16px; padding: 14px; align-items: start; }
.rv-doc__img { position: relative; display: block; border-radius: 9px; overflow: hidden; border: 1px solid var(--line); background: var(--dk-surface, #fff); }
.rv-doc__img img { width: 100%; height: auto; display: block; }
.rv-doc__zoom { position: absolute; inset: auto 0 0 0; padding: 5px; background: rgba(16,32,43,.72); color: #fff; font-size: 11px; text-align: center; opacity: 0; transition: opacity .14s; }
.rv-doc__img:hover .rv-doc__zoom { opacity: 1; }
.rv-doc__body { min-width: 0; }
.rv-doc__hint { margin: 0 0 9px; font-size: 12px; color: var(--text-muted); line-height: 1.45; }
/* Fixed label column: values line up and stop wrapping mid-token. */
.rv-doc__vals { margin: 0; display: grid; grid-template-columns: 128px minmax(0, 1fr); gap: 6px 12px; align-items: baseline; }
.rv-doc__vals dt { font-size: 11.5px; color: var(--text-muted); line-height: 1.35; }
.rv-doc__vals dd { margin: 0; font-size: 13.5px; font-weight: 600; overflow-wrap: anywhere; }
.rv-doc__meta { margin: 10px 0 0; padding-top: 9px; border-top: 1px dashed var(--line); font-size: 11.5px; color: var(--text-muted); }
@media (max-width: 720px) {
    .rv-docs { grid-template-columns: 1fr; padding: 12px; }
    .rv-doc__grid { grid-template-columns: 1fr; }
    .rv-doc__img { max-width: 280px; }
    .rv-doc__vals { grid-template-columns: 110px minmax(0, 1fr); }
}

.rv-attest { display: flex; align-items: center; gap: 12px; padding: 10px 15px; background: var(--dk-surface-2, #fafdfb); border-top: 1px solid var(--line); font-size: 12.5px; color: var(--text-muted); flex-wrap: wrap; }
.rv-attest > i { color: var(--ok); }
/* The drawn mark itself — a signature you can't see isn't evidence of anything. */
.rv-attest__sig { height: 44px; width: auto; max-width: 190px; background: var(--dk-surface, #fff); border: 1px solid var(--line); border-radius: 6px; padding: 3px 6px; }
.rv-attest__txt { min-width: 0; }
@media (max-width: 640px) { .rv-row { flex-direction: column; gap: 2px; } .rv-label { flex-basis: auto; max-width: none; } }

.portal-soon--ok { background: #eefaf2; border-color: #b7e3c8; border-left-color: var(--ok); }
.portal-soon--ok i { color: var(--ok); }
.portal-hero__ico--done { background: #eefaf2; color: var(--ok); }

/* Progress + primary call to action */
.portal-prog { margin: 4px 0 18px; }
.portal-prog__bar { height: 8px; border-radius: 99px; background: #e6ebef; overflow: hidden; }
.portal-prog__bar span { display: block; height: 100%; background: var(--accent); border-radius: 99px; transition: width .3s ease; }
.portal-prog__txt { margin: 8px 0 0; font-size: 13px; color: var(--text-muted); text-align: center; }
.portal-prog--slim { margin: 0 0 18px; }
.portal-cta { width: 100%; justify-content: center; padding: 13px; font-size: 15px; }
.portal-submit { text-align: center; }
.portal-submit .help-text { display: block; margin-top: 9px; }
.portal-ready { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 0 0 12px; padding: 11px; background: #eefaf2; border: 1px solid #b7e3c8; border-radius: 10px; font-size: 13.5px; }
.portal-ready i { color: var(--ok); }

/* Clickable form checklist */
.portal-forms--live { padding-left: 0; list-style: none; gap: 8px; }
.portal-forms--live a { display: flex; align-items: center; gap: 10px; padding: 12px 13px; border: 1px solid var(--line); border-radius: 10px; background: #fbfcfd; color: var(--text); text-decoration: none; transition: border-color .15s, background .15s; }
.portal-forms--live a:hover { border-color: var(--accent); background: #f5fafc; text-decoration: none; }
.portal-forms--live i { color: #b6bfc9; margin: 0; }
.portal-forms--live .is-done i, .portal-forms li.is-done i { color: var(--ok); }
.portal-forms__t { flex: 1; font-size: 14px; }
.portal-forms__s { font-size: 11.5px; color: var(--text-muted); text-transform: uppercase; letter-spacing: .4px; white-space: nowrap; }
.portal-forms--live .is-done a { background: #fafdfb; }

/* Form page */
.portal-card--form { padding: 20px 22px 24px; }
.portal-formhead { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.portal-back { font-size: 13px; font-weight: 600; }
.portal-stepcount { font-size: 12px; color: var(--text-muted); text-transform: uppercase; letter-spacing: .5px; }
.portal-formfoot { display: flex; gap: 10px; justify-content: space-between; align-items: center; margin-top: 24px; padding-top: 18px; border-top: 1px solid var(--line); }

/* Live inputs inside the public renderer (the admin twin is disabled/preview-only) */
.ifr--fill input[type=text], .ifr--fill input[type=date], .ifr--fill select, .ifr--fill textarea { background: var(--dk-surface, #fff); }
.ifr--fill .ifr-consent__opt--pick { cursor: pointer; }
.ifr--fill .ifr-consent__opt--pick:hover { background: var(--dk-surface-2, #f5fafc); }
/* Document upload + AI scan (patient portal) */
.ifr-upload { background: var(--dk-surface, #fbfcfd); border: 1px dashed var(--line); border-radius: 10px; padding: 13px; }
.ifr-drop { display: flex; align-items: center; gap: 12px; padding: 14px; margin-top: 8px; background: var(--dk-surface, #fff); border: 1px dashed var(--dk-line, #c6d3db); border-radius: 10px; cursor: pointer; transition: border-color .14s, background .14s; }
.ifr-drop:hover { border-color: var(--portal-accent, var(--accent)); background: var(--dk-surface-2, #f7fbfc); }
.ifr-drop__ico { flex: 0 0 auto; width: 44px; height: 44px; border-radius: 50%; background: var(--portal-accent-wash, #eaf4f7); color: var(--portal-accent, var(--accent-2)); display: flex; align-items: center; justify-content: center; font-size: 17px; }
.ifr-drop__txt { display: flex; flex-direction: column; gap: 2px; }
.ifr-drop__txt strong { font-size: 14.5px; }
.ifr-drop__txt span { font-size: 12.5px; color: var(--text-muted); }
.ifr-upload__state { margin-top: 9px; font-size: 13px; display: flex; align-items: center; gap: 7px; }
.ifr-upload__state.is-ok { color: var(--dk-ok, #1f7a45); }
.ifr-upload__state.is-warn { color: var(--dk-warn, #a4560d); }
.ifr-upload__state.is-bad { color: var(--bad); }
.ifr-upload__state.is-busy { color: var(--text-muted); }
.ifr-spin { display: inline-block; width: 13px; height: 13px; border: 2px solid var(--dk-line-strong, #cfd6dd); border-top-color: var(--portal-accent, var(--accent)); border-radius: 50%; animation: spin .7s linear infinite; }
/* What the model claims it read — shown so autofill is never a black box. */
.ifr-readback { margin-top: 10px; padding: 11px 13px; background: var(--dk-surface-2, #f2f9fb); border: 1px solid var(--dk-line, #cfe6ee); border-radius: 9px; }
.ifr-readback[hidden] { display: none; }
.ifr-readback__h { display: block; font-size: 12.5px; font-weight: 700; color: var(--accent-2); margin-bottom: 7px; }
.ifr-readback dl { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 3px 12px; }
.ifr-readback dt { font-size: 12.5px; color: var(--text-muted); }
.ifr-readback dd { margin: 0; font-size: 13px; font-weight: 600; word-break: break-word; }
/* A value the family didn't type — visibly different so it invites a check. */
.ifr--fill input.is-autofilled { background: var(--dk-warn-bg, #fffdf2); border-color: #e6c25a; box-shadow: inset 3px 0 0 var(--dk-warn, #e0a800); }

.ifr-signbox { background: var(--dk-surface, #fbfcfd); border: 1px dashed var(--line); border-radius: 10px; padding: 13px; }

/* Drawn signature pad (patient portal) */
.ifr-sigpad { margin-top: 8px; }
.ifr-sigpad .sig-canvas {
    width: 100%; height: 170px; display: block;
    background: var(--dk-surface, #fff); border: 1px solid var(--dk-line, #d7dee4); border-radius: 9px;
    /* Without this the browser pans the page instead of drawing under a finger. */
    touch-action: none; cursor: crosshair;
}
.ifr-sigpad.is-signed .sig-canvas { border-color: var(--ok); }
.ifr-sigtools { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 8px; flex-wrap: wrap; }
.ifr-sigtools .help-text { margin: 0; }
.ifr-sigdone { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.ifr-sigdone img { max-height: 90px; max-width: 100%; background: var(--dk-surface, #fff); border: 1px solid var(--ok); border-radius: 9px; padding: 6px; }
.ifr-sigdraw[hidden], .ifr-sigdone[hidden] { display: none; }
/* A signature is a fingertip target — keep it comfortable on a phone. */
@media (max-width: 640px) { .ifr-sigpad .sig-canvas { height: 150px; } }

/* ---- Patient portal: mobile ------------------------------------------------
   Most families fill this in on a phone, one-handed, so the portal gets its own
   touch rules rather than inheriting the staff-desktop sizing.

   The 16px input floor is not cosmetic: iOS Safari force-zooms the viewport on
   focus for any input below 16px, which leaves families pinching back out after
   every field. Everything here must stay >= 16px. */
.portal-body .ifr-field input,
.portal-body .ifr-field select,
.portal-body .ifr-field textarea { font-size: 16px; padding: 11px 12px; }

/* 44px is the accepted minimum touch target — the default 13px radio is a miss-tap magnet. */
.portal-body .ifr-choice,
.portal-body .ifr-cgopt,
.portal-body .ifr-consent__opt--pick { min-height: 44px; align-items: center; padding: 4px 0; font-size: 15px; }
.portal-body .ifr-choice input[type=radio],
.portal-body .ifr-choice input[type=checkbox],
.portal-body .ifr-cgopt input,
.portal-body .ifr-consent__opt--pick input { width: 21px; height: 21px; flex: 0 0 auto; accent-color: var(--accent); }
.portal-body .ifr-consent__opt--pick { align-items: flex-start; padding: 10px; border-radius: 8px; }
.portal-body .ifr-consent__opt--pick input { margin-top: 2px; }
.portal-body .ifr-field > span { font-size: 14px; }
.portal-body .ifr-rich, .portal-body .ifr-para { font-size: 15px; line-height: 1.65; }
.portal-body .ifr-heading { font-size: 18px; }

/* Staff tables clip (overflow:hidden) because they're sized for a desktop grid. A packet
   table is ~960px and will never fit a phone or a tablet, so in the portal it always
   scrolls inside its own box at every width, and gets a hint so it's discoverable. */
.portal-body .table-wrap { overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; }
.portal-body .ifr-scrollhint { display: none; font-size: 12px; color: var(--text-muted); margin-top: 5px; }
.portal-body .ifr-scrollhint i { margin-right: 4px; }

@media (max-width: 640px) {
    .portal-main { padding: 14px 10px 28px; }
    .portal-card { padding: 18px 14px; border-radius: 12px; }
    .portal-card--form { padding: 16px 14px 20px; }
    .portal-card h1 { font-size: 19px; }

    /* Half/third columns are unreadable at phone width — every field goes full width. */
    .portal-body .ifr-w-half, .portal-body .ifr-w-third { flex-basis: 100%; }
    .portal-body .ifr { gap: 14px; }

    /* Keep the primary action reachable without scrolling to the end of a long form. */
    .portal-formfoot {
        position: sticky; bottom: 0; z-index: 5;
        flex-direction: column-reverse; gap: 8px;
        margin: 20px -14px -20px; padding: 12px 14px;
        background: var(--surface); border-top: 1px solid var(--line);
        box-shadow: 0 -4px 14px rgba(20,40,60,.07);
    }
    .portal-formfoot .btn { width: 100%; justify-content: center; padding: 13px; font-size: 15px; }
    .portal-formfoot .help-text { text-align: center; }
    .portal-forms__s { display: none; }
    .portal-forms--live a { padding: 14px 12px; }
    .portal-forms__t { font-size: 15px; }

    /* Wide grids scroll inside their own box rather than bursting the page width. */
    .portal-body .ifr-table th, .portal-body .ifr-table td { font-size: 14px; white-space: nowrap; }
    .portal-body .ifr-table input { min-width: 120px; font-size: 16px; }
    .portal-body .ifr-scrollhint { display: block; }
}
/* Formatted (policy) text block */
.ifr-rich { flex-basis: 100%; font-size: 13.5px; line-height: 1.55; color: var(--text); }
.ifr-rich p { margin: 0 0 9px; }
.ifr-rich ul, .ifr-rich ol { margin: 6px 0 10px; padding-left: 26px; }
.ifr-rich li { margin: 3px 0; }
.ifr-rich h4 { margin: 12px 0 4px; font-size: 14px; }
.ifr-rich u { text-decoration: underline; }
.ifr-rich > :first-child { margin-top: 0; }
/* Checkbox grid (multi-column checklist, e.g. the Enhanced Health Services screener) */
.ifr-checkgrid td { vertical-align: top; padding: 9px 10px; }
.ifr-checkgrid th { text-align: center; }
.ifr-cgopt { display: flex; align-items: flex-start; gap: 7px; font-size: 12.5px; line-height: 1.45; font-weight: 400; }
/* Consent box (PDF-accurate: grey header bar + boxed give / do-not-give options) */
.ifr-consent { flex-basis: 100%; border: 1px solid var(--dk-line, #c9d0d6); background: var(--dk-surface, #fff); }
/* consecutive consents form one continuous table: cancel the .ifr row-gap + share borders */
.ifr-consent + .ifr-consent { margin-top: -14px; border-top: none; }
.ifr-consent__head { background: var(--dk-surface-3, #e4e7ea); text-align: center; font-weight: 700; font-size: 13.5px; color: var(--text); padding: 7px 10px; border-bottom: 1px solid var(--dk-line, #c9d0d6); }
.ifr-consent__body { padding: 12px 16px; display: flex; flex-direction: column; gap: 12px; }
.ifr-consent__opt { display: flex; align-items: flex-start; gap: 9px; font-size: 13.5px; line-height: 1.5; }
.ifr-cbox { flex: 0 0 auto; width: 12px; height: 12px; border: 1px solid var(--dk-line-strong, #5b6672); border-radius: 2px; background: var(--dk-surface, #fff); margin-top: 4px; }
.ifr-donot { font-weight: 700; text-decoration: underline; }
/* Emphasized (important) fields — stand out so patients don't skip them */
.ifr-field--emph { flex-basis: 100%; background: var(--dk-warn-bg, #fff8e6); border: 1px solid #f1d78a; border-left: 4px solid var(--dk-warn, #e0a800); border-radius: 10px; padding: 14px 16px; box-shadow: 0 1px 3px rgba(160,120,0,.08); }
.ifr-field--emph > span { color: var(--dk-warn, #8a6d00); font-weight: 700; font-size: 14.5px; }
.ifr-field--emph input, .ifr-field--emph textarea, .ifr-field--emph select { border-color: #e6c25a; background: var(--dk-surface, #fff); }
.ifr-emph-ico { color: var(--dk-warn, #e0a800); }
/* Intake form builder (editor) */
.ifb-bar { display: flex; gap: 16px; align-items: flex-end; margin-bottom: 18px; flex-wrap: wrap; }
.ifb-bar__actions { display: flex; gap: 10px; }
.ifb-list { display: flex; flex-direction: column; gap: 12px; }
.ifb-card { border: 1px solid var(--line); border-radius: 10px; background: var(--surface); }
.ifb-card__head { display: flex; justify-content: space-between; align-items: center; padding: 8px 12px; background: var(--dk-surface-2, #f6f8fa); border-bottom: 1px solid var(--line); border-radius: 10px 10px 0 0; }
.ifb-card__type { font-weight: 700; font-size: 12.5px; color: var(--text-muted); text-transform: uppercase; letter-spacing: .3px; }
.ifb-card__tools { display: flex; gap: 2px; }
.ifb-card__body { padding: 14px; display: flex; flex-wrap: wrap; gap: 12px; }
.ifb-f { display: flex; flex-direction: column; gap: 5px; flex: 1; min-width: 180px; }
.ifb-f > span { font-size: 12px; font-weight: 600; color: var(--text-muted); }
.ifb-f--wide { flex-basis: 100%; }
.ifb-f--sm { flex: 0 0 130px; }
.ifb-f--chk { flex: 0 0 auto; flex-direction: row; align-items: center; gap: 6px; font-size: 13px; align-self: flex-end; padding-bottom: 8px; }
.ifb-f input, .ifb-f select, .ifb-f textarea { border: 1px solid var(--dk-line, #d7dee4); border-radius: 8px; padding: 8px 10px; font: inherit; font-size: 14px; }
.ifb-f--chk input { border: 0; }
.ifb-add { margin-top: 16px; display: flex; gap: 10px; align-items: center; }
.ifb-add__type { border: 1px solid var(--dk-line, #d7dee4); border-radius: 8px; padding: 9px 11px; font: inherit; }
/* Quick Phrases — PIN lock (modal popup) */
.modal.pinlock-modal { max-width: 400px; }
.pinlock-modal .modal__body { padding: 26px 26px 22px; }
.pinlock-form { text-align: center; }
.pinlock-form .code-input { width: 100%; }
/* Appointment Presets — color swatch + picker + scrollable code list */
.preset-swatch { display: inline-block; width: 20px; height: 20px; border-radius: 5px; border: 1px solid rgba(0,0,0,.18); vertical-align: middle; }

/* Whole-row modal opener: hint that the row is clickable, but keep its own controls neutral. */
.row-modal { cursor: pointer; }
.data-table tbody tr.row-modal:hover { background: var(--dk-surface-2, #f4f8fa); }
.row-modal form, .row-modal .switch, .row-modal .iconbtn { cursor: default; }

/* Toggle switch (enable/disable), used in the Active column */
.switch { position: relative; width: 40px; height: 22px; padding: 0; border: 0; border-radius: 999px; background: var(--dk-surface-3, #cfd6dd); cursor: pointer; transition: background .15s; vertical-align: middle; }
.switch__dot { position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; border-radius: 50%; background: var(--dk-surface, #fff); box-shadow: 0 1px 2px rgba(0,0,0,.25); transition: left .15s; }
.switch.is-on { background: #2e9b57; }
.switch.is-on .switch__dot { left: 20px; }
.switch:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.apr-timing input[type=color] { width: 58px; height: 38px; padding: 3px; cursor: pointer; }
.checklist--scroll { max-height: 300px; overflow-y: auto; padding-right: 4px; }
/* Rich text editor */
.rte { border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.rte-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 2px; padding: 6px 8px; background: var(--dk-surface-2, #f2f5f7); border-bottom: 1px solid var(--line); }
.rte-toolbar button { min-width: 30px; height: 30px; border: 1px solid transparent; background: none; border-radius: 6px; cursor: pointer; font-size: 13px; font-weight: 700; color: var(--dk-text-2, #4b5a63); display: inline-flex; align-items: center; justify-content: center; }
.rte-toolbar button:hover { background: var(--dk-surface-2, #e4eaee); }
.rte-sep { width: 1px; height: 20px; background: var(--line); margin: 0 4px; }
.rte-colorwrap { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 6px; cursor: pointer; color: var(--dk-text-2, #4b5a63); }
.rte-colorwrap:hover { background: var(--dk-surface-2, #e4eaee); }
.rte-colorwrap input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.rte-editor { min-height: 130px; padding: 12px 14px; font-size: 14px; line-height: 1.55; outline: none; background: var(--dk-surface, #fff); }
.rte-editor:focus { box-shadow: inset 0 0 0 2px rgba(31,138,166,.18); }
.rte-source { display: none; width: 100%; min-height: 150px; border: 0; padding: 12px 14px; font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 12.5px; resize: vertical; outline: none; }
.rte.is-source .rte-editor { display: none; }
.rte.is-source .rte-source { display: block; }
.rte.is-source .rte-src-btn { background: var(--dk-surface-3, #dbe4e8); }
/* Payer reminders tab (visits / days rows) */
.pay-rem { display: flex; flex-direction: column; gap: 14px; padding: 6px 0; }
.pay-rem__row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.pay-rem__lbl { flex: 0 0 180px; text-align: right; font-weight: 600; font-size: 14px; }
.pay-rem__row input[type=number] { width: 88px; }
/* Billing codes "Create Claims" dot */
.cdot { display: inline-block; width: 12px; height: 12px; border-radius: 50%; }
.cdot--on { background: #2e9b57; }
.cdot--off { background: var(--dk-surface-3, #cdd4da); }
/* Avatar/photo edit (users & physicians) + list avatars */
.avatar-edit { display: flex; gap: 16px; align-items: flex-start; margin-bottom: 16px; }
.avatar-edit__preview { flex: 0 0 96px; width: 96px; height: 96px; border-radius: 12px; border: 2px dashed var(--dk-line-strong, #cbd3d9); display: flex; align-items: center; justify-content: center; color: var(--dk-faint, #cbd3d9); font-size: 34px; background: var(--dk-surface-2, #fafcfd); overflow: hidden; }
.avatar-edit__preview.has { border: 1px solid var(--line); background: var(--dk-surface, #fff); }
.avatar-edit__btn { padding: 0; border: 0; background: none; cursor: pointer; width: 100%; height: 100%; }
.avatar-edit__btn img { width: 100%; height: 100%; object-fit: cover; display: block; }
.avatar-edit__ctrl { flex: 1; min-width: 0; }
.avatar-edit__ctrl .sig-remove { margin-top: 8px; }
.ph-url { display: none; }
.ph:has(input[name="photo_source"][value="link"]:checked) .ph-url { display: block; }
.ph:has(input[name="photo_source"][value="link"]:checked) .ph-file { display: none; }
.ucell { display: flex; align-items: center; gap: 11px; }
.avatar--img { padding: 0; border: 0; overflow: hidden; cursor: pointer; }
.avatar--img img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Patient Cases (case types) — service boxes + appointment-request rows */
.svc-boxes { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 6px; }
.svc-box { display: inline-flex; align-items: center; gap: 7px; padding: 8px 14px; border: 1px solid var(--line); border-radius: 8px; font-weight: 700; font-size: 13px; color: var(--text-muted); cursor: pointer; }
.svc-box:has(input:checked) { border-color: var(--accent); color: var(--accent-2); background: var(--dk-accent-bg, #eaf4f7); }
.svc-box input { width: auto; }
/* Vertical pick list (e.g. Goal Bank import) */
.checklist { list-style: none; margin: 6px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.checklist__row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 14px; border: 1px solid var(--line); border-radius: 9px; background: var(--surface); transition: border-color .12s, background-color .12s; }
.checklist__row:has(input:checked) { border-color: var(--accent); background: var(--dk-accent-bg, #eaf4f7); }
.checklist__pick { display: flex; align-items: center; gap: 10px; cursor: pointer; font-weight: 600; margin: 0; }
.checklist__pick input { width: auto; }
.checklist__meta { font-size: 12px; color: var(--text-muted); white-space: nowrap; }
.appt-req { display: flex; flex-direction: column; gap: 12px; }
.appt-req__row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.appt-req__lbl { flex: 0 0 150px; text-align: right; font-weight: 600; font-size: 14px; }
.appt-req__row select { width: 158px; }
.appt-req__row input[type=number] { width: 78px; text-align: center; }
.pay-rem__row input[type=number] { text-align: center; }
/* Tenant Settings tiles */
.tile-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; max-width: 920px; }
.tile { display: flex; align-items: center; gap: 14px; padding: 16px 18px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); color: inherit; transition: box-shadow .15s ease, border-color .15s ease, transform .1s ease; }
.tile:hover { border-color: var(--accent); box-shadow: 0 4px 14px rgba(20,40,60,.08); text-decoration: none; transform: translateY(-1px); }
.tile__ico { flex: 0 0 auto; width: 46px; height: 46px; border-radius: 11px; background: var(--dk-accent-bg, #eaf4f7); color: var(--accent-2); display: inline-flex; align-items: center; justify-content: center; font-size: 20px; }
.tile__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.tile__title { font-weight: 700; font-size: 15px; color: var(--accent-2); display: flex; align-items: center; gap: 8px; }
.tile__desc { font-size: 12.5px; color: var(--text-muted); line-height: 1.4; }
.tile__arrow { color: var(--dk-faint, #b7c2c9); font-size: 14px; }
.tset-head { display: flex; align-items: center; gap: 14px; }
.sig-canvas { width: 100%; max-width: 600px; height: auto; aspect-ratio: 3 / 1; border: 2px dashed var(--dk-line, #c4ccd2); border-radius: 10px; background: var(--dk-surface, #fff); touch-action: none; cursor: crosshair; display: block; }
.sig-toolbar { display: flex; align-items: center; gap: 12px; margin-top: 10px; flex-wrap: wrap; }
.sig-body--file input[type=file] { font-size: 14px; }

/* Patient roster (Fusion-style list) */
.pat-tabs { display: flex; gap: 4px; flex-wrap: wrap; }
.pat-tab { display: inline-flex; align-items: center; gap: 7px; padding: 7px 14px; border-radius: 8px 8px 0 0; font-size: 14px; font-weight: 600; color: var(--text-muted); border-bottom: 2px solid transparent; }
.pat-tab:hover { color: var(--accent-2); text-decoration: none; background: var(--dk-surface-2, #f3f7f9); }
.pat-tab.is-active { color: var(--accent-2); border-bottom-color: var(--accent); background: var(--dk-accent-bg, #eaf4f7); }
.pat-tab__count { font-size: 11.5px; font-weight: 700; background: var(--dk-surface-3, #e1e7ec); color: var(--dk-text-2, #5b6672); border-radius: 999px; padding: 1px 8px; }
.pat-tab.is-active .pat-tab__count { background: var(--accent); color: #fff; }
.filter-bar { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin: 14px 0; }
.filter-bar__search { min-width: 300px; flex: 1 1 280px; }
.filter-bar select { height: 40px; }
.filter-bar__export { margin-left: auto; }
.data-table--roster td { vertical-align: middle; }
.pat-cell { display: inline-flex; align-items: center; gap: 11px; color: inherit; }
.pat-cell:hover { text-decoration: none; }
.pat-cell:hover .pat-cell__txt strong { color: var(--accent); }
.avatar { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 50%; color: #fff; font-size: 13px; font-weight: 700; flex: 0 0 auto; letter-spacing: .3px; }
.pat-cell__txt { display: flex; flex-direction: column; line-height: 1.3; }
.pat-cell__sub { font-size: 11.5px; color: var(--text-muted); text-transform: uppercase; letter-spacing: .4px; }
.disc-badge { display: inline-block; padding: 2px 8px; border-radius: 6px; font-size: 11.5px; font-weight: 700; background: var(--dk-surface-2, #eef3f5); color: var(--accent-2); border: 1px solid var(--dk-line, #d7e6ea); }
.pager { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 16px; flex-wrap: wrap; }
.pager__info { color: var(--text-muted); font-size: 13.5px; }
.pager__nav { display: flex; align-items: center; gap: 4px; }
.pager__page { display: inline-flex; align-items: center; justify-content: center; min-width: 34px; height: 34px; padding: 0 8px; border-radius: 8px; font-size: 14px; font-weight: 600; color: var(--text-muted); border: 1px solid var(--line); background: var(--dk-surface, #fff); }
.pager__page:hover { color: var(--accent-2); text-decoration: none; border-color: var(--accent); }
.pager__page.is-active { background: var(--accent); color: #fff; border-color: var(--accent); }
.btn.is-disabled { opacity: .45; pointer-events: none; }

/* Patient list — Fusion 4-column */
.pat-head { align-items: flex-end; }
.pat-search { display: flex; align-items: center; gap: 8px; margin: 0; }
.pat-search .input-wrap { min-width: 260px; }
/* Modern in-page search box (patients / resources / billing codes / …) */
.pat-search .input-wrap > i { transition: color .12s ease; z-index: 1; }
.pat-search input[type=search] {
    width: 100%; padding: 9px 34px 9px 38px;
    border: 1px solid var(--dk-line, #d7dee4); border-radius: 10px;
    font-size: 14.5px; font-family: inherit; color: var(--text); background: var(--dk-surface-2, #f6f8fa);
    transition: border-color .12s ease, box-shadow .12s ease, background-color .12s ease;
    -webkit-appearance: none; appearance: none;
}
.pat-search input[type=search]::placeholder { color: var(--dk-muted, #9aa4ad); }
.pat-search input[type=search]:hover { border-color: var(--dk-line-strong, #b3bfc7); background: var(--dk-surface, #fff); }
.pat-search input[type=search]:focus {
    outline: none; border-color: var(--accent); background: var(--dk-surface, #fff);
    box-shadow: 0 0 0 3px rgba(31,138,166,.14);
}
.pat-search .input-wrap:focus-within > i { color: var(--accent); }
.pat-search input[type=search]::-webkit-search-cancel-button {
    -webkit-appearance: none; appearance: none; height: 15px; width: 15px; cursor: pointer;
    background: var(--text-muted); opacity: .55;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 6.6 12.3 2.3l1.4 1.4L9.4 8l4.3 4.3-1.4 1.4L8 9.4l-4.3 4.3-1.4-1.4L6.6 8 2.3 3.7l1.4-1.4z'/%3E%3C/svg%3E") center/contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 6.6 12.3 2.3l1.4 1.4L9.4 8l4.3 4.3-1.4 1.4L8 9.4l-4.3 4.3-1.4-1.4L6.6 8 2.3 3.7l1.4-1.4z'/%3E%3C/svg%3E") center/contain no-repeat;
}
.pat-search input[type=search]::-webkit-search-cancel-button:hover { opacity: 1; }
.pat-link { color: var(--accent-2); }
.pat-link:hover strong { color: var(--accent); }
.iconbtn { background: none; border: 0; cursor: pointer; font-size: 15px; padding: 4px 7px; border-radius: 6px; color: var(--text-muted); }
/* Inline table-row action cluster (e.g. Edit + Files on the Users list). */
.row-actions { display: inline-flex; align-items: center; gap: 6px; }
.row-actions > a.iconbtn { text-decoration: none; line-height: 1; }
.row-actions form { margin: 0; display: inline-flex; }

/* Transient toast (row action feedback) */
.toast { position: fixed; left: 50%; bottom: 26px; transform: translate(-50%, 16px); background: #12303f; color: #fff; padding: 12px 18px; border-radius: 10px; font-size: 14px; line-height: 1.4; box-shadow: 0 10px 28px rgba(10,30,45,.28); z-index: 9999; opacity: 0; transition: opacity .25s, transform .25s; max-width: 92vw; }
.toast.is-in { opacity: 1; transform: translate(-50%, 0); }
.toast--err { background: #a1362f; }
/* Inline role dropdown on the Users list — reads as text until hover/focus. */
.role-quickedit { margin: 0; display: inline-flex; align-items: center; gap: 6px; }
.role-select { border: 1px solid transparent; background: transparent; border-radius: 7px; padding: 5px 8px; font-size: 14px; color: var(--text); cursor: pointer; max-width: 190px; transition: border-color .15s, background .15s; }
.role-select:hover { border-color: var(--line); background: var(--dk-surface, #fff); }
.role-select:focus { border-color: var(--accent); background: var(--dk-surface, #fff); outline: none; box-shadow: 0 0 0 3px rgba(31,138,166,.12); }
.role-select:disabled { opacity: .6; cursor: progress; }
.role-saved { color: var(--ok, #1f8a4c); opacity: 0; transform: scale(.8); transition: opacity .15s, transform .15s; font-size: 13px; }
.role-quickedit.is-saved .role-saved { opacity: 1; transform: scale(1); }

/* Users list toolbar: live search + filters + sort */
.list-toolbar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin: 4px 0 14px; }
.list-toolbar__search { position: relative; flex: 1 1 260px; min-width: 200px; }
.list-toolbar__search i { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--text-muted); font-size: 13px; pointer-events: none; }
.list-toolbar__search input { width: 100%; padding: 9px 12px 9px 34px; border: 1px solid var(--line); border-radius: 9px; font-size: 14px; background: var(--surface); }
.list-toolbar__search input:focus { border-color: var(--accent); outline: none; box-shadow: 0 0 0 3px rgba(31,138,166,.12); }
.list-toolbar select { padding: 9px 12px; border: 1px solid var(--line); border-radius: 9px; font-size: 14px; background: var(--surface); cursor: pointer; }
.list-toolbar select:focus { border-color: var(--accent); outline: none; box-shadow: 0 0 0 3px rgba(31,138,166,.12); }
.list-toolbar__count { margin-left: auto; font-size: 13px; white-space: nowrap; }
/* Users results fade slightly while a page/search fetch is in flight */
[data-users-results] { transition: opacity .12s; }
[data-users-results].is-loading { opacity: .5; pointer-events: none; }

/* Admin rows stand out; inactive rows recede */
.data-table tr.is-admin td { background: var(--dk-warn-bg, #fff7ec); }
.data-table tr.is-admin:hover td { background: var(--dk-warn-bg, #fdefdb); }
.data-table tr.is-admin td:first-child { box-shadow: inset 3px 0 0 var(--dk-warn, #e2a03f); }
.data-table tr.is-inactive td { color: var(--text-muted); }
.data-table tr.is-inactive .ucell strong { color: var(--text-muted); font-weight: 600; }
.pill--admin { display: inline-flex; align-items: center; gap: 4px; font-size: 10.5px; font-weight: 700; letter-spacing: .3px; text-transform: uppercase; color: var(--dk-warn, #b06f13); background: var(--dk-warn-bg, #fbe6c4); border-radius: 999px; padding: 2px 8px; vertical-align: middle; }

/* Inline active/inactive toggle on the Users list */
.status-cell form { display: inline-flex; align-items: center; gap: 8px; margin: 0; }
.status-switch { position: relative; display: inline-block; width: 40px; height: 22px; flex: 0 0 auto; }
.status-switch input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.status-switch__slider { position: absolute; inset: 0; background: var(--dk-surface-3, #cfd6dd); border-radius: 999px; transition: background .15s; }
.status-switch__slider::before { content: ''; position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; border-radius: 50%; background: var(--dk-surface, #fff); box-shadow: 0 1px 2px rgba(0,0,0,.25); transition: left .15s; }
.status-switch input:checked + .status-switch__slider { background: #2e9b57; }
.status-switch input:checked + .status-switch__slider::before { left: 20px; }
.status-switch input:focus-visible + .status-switch__slider { box-shadow: 0 0 0 3px rgba(31,138,166,.25); }
.status-switch input:disabled { cursor: progress; }
.status-label { font-size: 12.5px; color: var(--text-muted); min-width: 52px; }
.status-quickedit.is-saved .status-label { color: var(--ok, #1f8a4c); }
.iconbtn--danger { color: var(--dk-danger, #c0473f); }
.iconbtn--danger:hover { background: var(--dk-danger-bg, #fdecea); }
.iconbtn--on { color: var(--dk-ok, #1f8a4c); }
.iconbtn--on:hover { background: var(--dk-ok-bg, #e7f6ec); }
/* Appointment Reminders — timing row + disabled state */
.apr-timing { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 6px; }
.apr-timing input[type=number] { width: 92px; }
.apr-timing select { width: auto; min-width: 130px; }
tr.is-off { opacity: .5; }
tr.is-off .pat-link { color: var(--text-muted); }
.iconbtn--off { color: var(--dk-faint, #c2c9cf); cursor: default; display: inline-block; }
.pat-footer { display: flex; align-items: center; gap: 14px; margin-top: 16px; flex-wrap: wrap; }
.pat-footer__actions { margin-left: auto; display: flex; gap: 10px; }

/* Patient chart modal (Fusion-style: left tabs + bottom action bar) */
.modal:has(.pchart) { max-width: 1040px; }
/* Picking from 16 forms in a 760px modal means a cramped, scrolling list — give the
   deploy and preset builders room so the whole packet is visible at once. */
.modal:has(.deploy-modal), .modal:has(.preset-modal) { max-width: 1000px; }

/* Form presets */
.preset-bar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 11px 13px; margin-bottom: 14px; background: var(--dk-surface-2, #f4f8fa); border: 1px solid var(--dk-line, #d8e6ec); border-radius: 10px; }
.preset-bar__lbl { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; color: var(--accent-2); }
.preset-bar__lbl i { margin-right: 4px; }
.preset-bar__manage { margin-left: auto; font-size: 12.5px; }
.preset-chip { display: inline-flex; align-items: center; gap: 7px; padding: 7px 12px; border: 1px solid var(--line); border-radius: 99px; background: var(--dk-surface, #fff); font: inherit; font-size: 13px; font-weight: 600; color: var(--text); cursor: pointer; transition: border-color .12s, background .12s, color .12s; }
.preset-chip:hover { border-color: var(--accent); color: var(--accent-2); }
.preset-chip.is-on { background: var(--accent); border-color: var(--accent); color: #fff; }
.preset-chip__n { display: inline-flex; align-items: center; justify-content: center; min-width: 19px; height: 19px; padding: 0 5px; border-radius: 99px; background: var(--dk-accent-bg, #eaf0f3); color: var(--text-muted); font-size: 11px; font-weight: 700; }
.preset-chip.is-on .preset-chip__n { background: rgba(255,255,255,.28); color: #fff; }

.pick-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 8px; }
.pick-head > span:first-child { font-size: 13px; font-weight: 600; }
.pick-tools { display: inline-flex; align-items: center; gap: 12px; }
.pick-count { font-size: 12px; font-weight: 700; color: var(--accent-2); background: var(--dk-accent-bg, #eaf4f7); border-radius: 99px; padding: 3px 10px; white-space: nowrap; }
.pick-count.is-none { color: var(--text-muted); background: var(--dk-surface-2, #eef1f4); }

/* Two columns so a 16-form packet reads at a glance instead of scrolling */
.checklist--grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 8px; }
.checklist--grid .checklist__row { padding: 9px 12px; }
.checklist--grid .checklist__label { font-size: 13px; }

.save-preset { margin-top: 6px; padding: 12px 14px; border: 1px dashed var(--line); border-radius: 10px; background: var(--dk-surface, #fbfcfd); }
.save-preset input[type=text] { width: 100%; margin-top: 9px; padding: 9px 11px; border: 1px solid var(--dk-line, #d7dee4); border-radius: 8px; font: inherit; font-size: 13.5px; }
.save-preset input[type=text]:disabled { background: var(--dk-surface-2, #f1f4f6); color: var(--dk-muted, #9aa4ad); }
.modal__body:has(.pchart) { display: flex; flex-direction: column; flex: 1; min-height: 0; overflow: hidden; }
.pchart { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.pchart-sub { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding: 14px 22px; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.pchart-sub__name { font-size: 18px; font-weight: 700; color: var(--accent-2); display: flex; align-items: center; gap: 10px; }
.pchart-sub__meta { color: var(--text-muted); font-size: 13.5px; }
.pchart-body { display: flex; flex: 1; min-height: 0; }
.pchart-tabs { flex: 0 0 170px; display: flex; flex-direction: column; border-right: 1px solid var(--line); background: var(--dk-surface-2, #f7f9fa); padding: 10px 0; }
.pchart-tabs .mtab { display: flex; align-items: center; gap: 10px; justify-content: flex-start; text-align: left; padding: 11px 18px; border: 0; border-left: 3px solid transparent; background: none; font-size: 14px; font-weight: 600; color: var(--text-muted); cursor: pointer; }
.pchart-tabs .mtab i { width: 16px; text-align: center; font-size: 13px; }
.pchart-tabs .mtab:hover { background: var(--dk-surface-2, #eef3f5); color: var(--accent-2); }
.pchart-tabs .mtab.is-active { background: var(--surface); color: var(--accent-2); border-left-color: var(--accent); }
.pchart-content { flex: 1; min-width: 0; overflow-y: auto; padding: 20px 24px; }
.pchart-panel-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.pchart-panel-head h3 { margin: 0; font-size: 18px; color: var(--accent-2); }
.pchart-id { color: var(--text-muted); font-size: 13.5px; }
.psection { border: 1px solid var(--line); border-radius: 10px; margin-bottom: 18px; overflow: hidden; }
.psection__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; background: var(--dk-surface-2, #f2f5f7); padding: 11px 16px; font-weight: 700; font-size: 14px; color: var(--accent-2); }
.psection__actions { display: flex; gap: 18px; font-size: 13px; font-weight: 600; }
.psection .kv { padding: 16px; }
.pbasic { display: flex; gap: 24px; padding: 16px; flex-wrap: wrap; }
.pbasic__photo { flex: 0 0 240px; }
.pbasic__dropzone { min-height: 150px; border: 2px dashed var(--dk-line-strong, #cbd3d9); border-radius: 10px; display: flex; align-items: center; justify-content: center; color: var(--dk-faint, #cbd3d9); font-size: 54px; background: var(--dk-surface-2, #fafcfd); overflow: hidden; }
.pbasic__dropzone--has { min-height: 0; padding: 0; border: 1px solid var(--line); background: var(--dk-surface, #fff); cursor: pointer; display: block; width: 100%; }
.pbasic__dropzone--has:hover { border-color: var(--accent); box-shadow: 0 2px 8px rgba(20,40,60,.09); }
.pbasic__dropzone img { display: block; width: 100%; height: auto; border-radius: 9px; }
.pphoto-btn { cursor: pointer; color: var(--accent); font-weight: 600; }
.pphoto-btn:hover { color: var(--accent-2); }
.pbasic__grid { flex: 1; min-width: 280px; }
/* Fusion-style label-left / value-right rows with separators */
.pdl { margin: 0; padding: 16px; }
.pbasic .pdl { padding: 0; }
.pdl__row { display: flex; justify-content: space-between; align-items: baseline; gap: 18px; padding: 9px 0; border-bottom: 1px solid var(--line); }
.pdl > .pdl__row:last-child { border-bottom: 0; }
.pdl__row dt { color: var(--text-muted); font-size: 13px; flex: 0 0 auto; }
.pdl__row dd { margin: 0; font-weight: 600; text-align: right; color: var(--text); }
.pdl--grid { display: grid; grid-template-columns: 1fr 1fr; column-gap: 40px; }
.pdl--grid > .pdl__row:nth-last-child(-n+2) { border-bottom: 0; }
.pchart-actions { display: flex; gap: 10px; padding: 14px 22px; border-top: 1px solid var(--line); background: var(--dk-surface-2, #f7f9fa); flex-wrap: wrap; }
@media (max-width: 720px) { .pchart-body { flex-direction: column; } .pchart-tabs { flex-direction: row; flex: 0 0 auto; overflow-x: auto; border-right: 0; border-bottom: 1px solid var(--line); } .pchart-tabs .mtab { border-left: 0; border-bottom: 3px solid transparent; white-space: nowrap; } .pchart-tabs .mtab.is-active { border-bottom-color: var(--accent); } }

/* ---------- Modal + tabs (Fusion-style add/edit dialogs) ---------- */
.modal-overlay {
    display: none; position: fixed; inset: 0; z-index: 80;
    background: rgba(15, 22, 31, .55);
    align-items: flex-start; justify-content: center; padding: 40px 16px; overflow-y: auto;
}
.modal-overlay.is-open { display: flex; }
body.modal-open { overflow: hidden; }
.modal {
    width: 100%; max-width: 760px; background: var(--surface);
    border-radius: 12px; box-shadow: 0 20px 60px rgba(0,0,0,.4);
    display: flex; flex-direction: column; max-height: calc(100vh - 80px);
}
.modal__head {
    background: var(--topbar-bg); color: #fff; border-radius: 12px 12px 0 0;
    padding: 16px 22px; display: flex; align-items: center; justify-content: space-between;
}
.modal__title { font-size: 19px; font-weight: 700; }
.modal__close { background: none; border: 0; color: #c7ccd3; font-size: 26px; line-height: 1; cursor: pointer; padding: 0 4px; }
.modal__close:hover { color: #fff; }
.modal__body { padding: 0; overflow-y: auto; }
.modal-loading { padding: 40px; text-align: center; color: var(--text-muted); }

/* form inside modal */
.modal-form { display: flex; flex-direction: column; }
.mtabs { display: flex; gap: 4px; flex-wrap: wrap; padding: 0 22px; border-bottom: 1px solid var(--line); }
.modal-form:not(.mtabs-on) .mtabs { display: none; }
.mtab {
    background: none; border: 0; cursor: pointer; font-family: inherit;
    padding: 14px 14px 12px; font-size: 13px; font-weight: 700; letter-spacing: .6px; text-transform: uppercase;
    color: var(--text-muted); border-bottom: 3px solid transparent; margin-bottom: -1px;
}
.mtab:hover { color: var(--accent); }
.mtab.is-active { color: var(--accent-2); border-bottom-color: var(--accent); }
.mtab-panel { padding: 22px; }
.mtabs-on .mtab-panel { display: none; }
.mtabs-on .mtab-panel.is-active { display: block; }
.modal-form__foot {
    border-top: 1px solid var(--line); padding: 14px 22px; display: flex; justify-content: flex-end; gap: 10px;
    background: var(--dk-surface-2, #f7f9fa); border-radius: 0 0 12px 12px;
}
/* Note editor: keep Save / Sign reachable at every width, and above the floating
   AI dictation panel (z-index 500), which used to sit on top of these buttons. */
.note-editor .modal-form__foot {
    position: sticky;
    bottom: 0;
    z-index: 600;
    box-shadow: 0 -2px 10px rgba(20,40,60,.06);
}

/* min-width:0 is load-bearing, same reason as .ifr-field above: .pchart is a
   grid, and a grid item defaults to min-width:auto — it refuses to shrink below
   its content's min-content width. <fieldset> is worse: the UA sheet gives it
   min-inline-size:min-content, which min-width:auto cannot relax at all.
   The goal-data fieldset therefore stretched to its 7-column table's ~773px
   min-content and widened the single grid track, so *every* row of the editor
   — including the right-aligned sticky action bar — was dragged off a 375px
   viewport and Save/Sign could only be reached by scrolling sideways.
   Overriding to 0 lets the rows shrink and hands the overflow to .note-scroll-x. */
.note-editor .pchart > *,
.note-editor fieldset { min-width: 0; }

/* Horizontal scroll container for the editor's wide data grids (goal data,
   evaluation measurements / test scores). Scrolls the table, not the page. */
.note-editor .note-scroll-x {
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
}

@media (max-width: 640px) {
    .modal-overlay { padding: 0; }
    .modal { max-width: 100%; min-height: 100vh; max-height: 100vh; border-radius: 0; }
    .modal__head { border-radius: 0; }
}

/* ---------- Patient chart ---------- */
.chart { max-width: 1080px; }
.chart .card, .chart .form-card { max-width: none; }
.chart-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; margin-bottom: 14px; flex-wrap: wrap; }
.chart-head__name { font-size: 22px; font-weight: 700; color: var(--accent-2); display: flex; align-items: center; gap: 10px; }
.chart-head__meta { color: var(--text-muted); font-size: 13.5px; margin-top: 4px; }
.chart-head__actions { display: flex; gap: 8px; }
.chart-tabs { display: flex; gap: 4px; flex-wrap: wrap; margin-bottom: 18px; border-bottom: 1px solid var(--line); }
.chart-tabs a { padding: 8px 12px; font-size: 13.5px; font-weight: 600; color: var(--text-muted); border-bottom: 2px solid transparent; }
.chart-tabs a:hover { color: var(--accent); text-decoration: none; border-bottom-color: var(--accent); }
.card h3.sub { font-size: 12px; text-transform: uppercase; letter-spacing: .6px; color: var(--text-muted); margin: 6px 0 10px; }
.kv { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px 24px; }
.kv > div { display: flex; flex-direction: column; gap: 2px; font-size: 14px; }
.kv > div > span { font-size: 11px; text-transform: uppercase; letter-spacing: .5px; color: var(--text-muted); }
.kv--tight { gap: 8px 24px; margin-top: 8px; }
/* Clinic Options — Fusion-style section cards */
.opt-page { max-width: 920px; }
.opt-card { margin-bottom: 18px; }
.opt-card__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-bottom: 12px; border-bottom: 1px solid var(--line); margin-bottom: 4px; }
.opt-card__head h2 { margin: 0; font-size: 17px; display: flex; align-items: center; gap: 9px; }
.opt-card__head h2 i { color: var(--accent); font-size: 15px; }
.case-row { border: 1px solid var(--line); border-radius: 10px; padding: 14px 16px; margin-bottom: 12px; }
.case-row__head { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.dx-list { margin-top: 10px; font-size: 13px; color: var(--text-muted); display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.subform { border-top: 1px dashed var(--line); padding-top: 14px; margin-top: 6px; }
.note-item { border-left: 3px solid var(--accent); padding: 8px 12px; margin-bottom: 10px; background: var(--dk-surface-2, #fafcfd); border-radius: 0 8px 8px 0; }
.note-item__body { font-size: 14px; }
.note-item__meta { font-size: 12px; margin-top: 4px; }

/* ---------- Login appearance preview (superadmin) ---------- */
.login-preview {
    position: relative; height: 170px; max-width: 540px; border-radius: 10px;
    overflow: hidden; background-size: cover; background-position: center; border: 1px solid var(--line);
}
.login-preview__overlay { position: absolute; inset: 0; }
.login-preview__label {
    position: absolute; bottom: 8px; left: 10px; z-index: 1; color: #fff; font-size: 12px;
    text-shadow: 0 1px 3px rgba(0,0,0,.6);
}

/* ---------- Theme live preview (preferences) ---------- */
.theme-prev { border: 1px solid var(--line); border-radius: 10px; overflow: hidden; max-width: 560px; box-shadow: var(--shadow); }
.tp-top { display: flex; align-items: center; gap: 18px; padding: 0 14px; height: 46px; }
.tp-brand { font-weight: 800; font-size: 15px; }
.tp-navitem, .tp-srow { display: flex; align-items: center; gap: 7px; }
.tp-navitem { font-size: 12px; }
.tp-ico { width: 14px; height: 14px; border-radius: 3px; display: inline-block; }
.tp-txt { font-size: 12px; }
.tp-body { display: flex; height: 130px; }
.tp-side { width: 150px; padding: 10px 0; display: flex; flex-direction: column; gap: 2px; }
.tp-srow { padding: 7px 14px; }
.tp-content { flex: 1; background: var(--dk-surface, #fff); display: flex; align-items: center; justify-content: center; color: var(--text-muted); font-size: 13px; }

/* ---------- Email preview (superadmin) ---------- */
.email-preview { border: 1px solid var(--line); border-radius: 10px; overflow: hidden; background: var(--dk-surface-2, #eef1f4); }
.email-preview iframe { width: 100%; height: 560px; border: 0; display: block; background: var(--dk-surface-2, #eef1f4); }

/* ---------- Impersonation banner ---------- */
.impersonation-bar {
    background: #9a6a12; color: #fff; text-align: center; font-size: 13px;
    padding: 7px 14px; display: flex; align-items: center; justify-content: center; gap: 14px;
}
.impersonation-bar a { color: #fff; text-decoration: underline; font-weight: 700; }

/* ---------- Misc forms in content ---------- */
.form-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px 18px; max-width: 720px; }
.form-grid .field.full { grid-column: 1 / -1; }
.form-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 22px 24px; max-width: 820px; }
.form-card h2 { margin-top: 0; }
.help-text { font-size: 12px; color: var(--text-muted); }

/* ---------- Responsive ---------- */
@media (max-width: 860px) {
    :root { --topbar-h: 60px; }
    .topbar__menu { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; }
    .topbar__rail { width: auto; flex: 0 0 auto; padding-right: 0; }
    .brand { width: auto; padding: 0 8px; }
    .brand__logo { display: none; }
    .brand__mark { display: block; height: 30px; }
    .topnav__label { display: none; }
    /* Tabs become a horizontally-scrollable strip instead of fixed-width cards,
       so the hamburger + utils no longer get pushed into overflow. */
    .topnav {
        flex: 1 1 0; min-width: 0; overflow-x: auto; overflow-y: hidden;
        -webkit-overflow-scrolling: touch; scrollbar-width: none; -ms-overflow-style: none;
    }
    .topnav::-webkit-scrollbar { display: none; }
    .topnav__item { flex: 0 0 auto; min-width: 44px; padding: 0 10px; }
    .topbar__pill { padding: 7px 10px; margin-right: 2px; }
    .topbar__pill-label { display: none; }
    .topbar__utils { flex: 0 0 auto; margin-left: 0; padding-right: 10px; }
    .util__name { display: none; }
    .sidebar__title { font-size: 20px; padding-top: 12px; }

    /* System console shell: .system-tag / .clinic-switcher have no width limits
       of their own (see system.php) — cap them so a long clinic name can't
       force the topbar wider than the viewport. */
    .system-tag { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .clinic-switcher { flex: 1 1 0; min-width: 0; }
    .clinic-switcher__btn { display: flex; align-items: center; gap: 6px; min-width: 0; max-width: 100%; overflow: hidden; }
    .clinic-switcher__label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

    .sidebar {
        position: fixed; left: 0; top: var(--topbar-h); z-index: 35;
        transform: translateX(-100%); transition: transform .22s ease;
        box-shadow: 2px 0 16px rgba(0,0,0,.25);
    }
    body.sidebar-open .sidebar { transform: translateX(0); }
    .content__body { padding: 16px; }
    .content__head { padding: 14px 16px; }
}

/* ---- WS8 Scheduling advanced ------------------------------------------- */
.sched-wrap { display: flex; gap: 14px; align-items: flex-start; }
.sched-grid { display: flex; flex: 1; overflow-x: auto; border: 1px solid var(--border, #d6dde2); border-radius: 8px; background: var(--surface, #fff); }
.sched-col { flex: 1; min-width: 150px; border-left: 1px solid var(--border, #e2e8ec); }
.sched-col--times { flex: 0 0 74px; min-width: 74px; border-left: 0; }
.sched-col__head { padding: 8px 6px; font-weight: 600; font-size: 13px; text-align: center; border-bottom: 2px solid var(--border, #d6dde2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sched-col__body { position: relative; background: repeating-linear-gradient(180deg, rgba(0,0,0,.045) 0 30px, rgba(0,0,0,.075) 30px 60px); }
.sched-col--times .sched-col__body { background: none; }
.sched-slot { height: 30px; box-sizing: border-box; border-bottom: 1px dotted rgba(0,0,0,.08); cursor: pointer; }
.sched-slot--time { cursor: default; font-size: 11px; color: var(--muted, #7b8a94); text-align: right; padding-right: 6px; }
.sched-slot--over { outline: 2px dashed var(--accent); outline-offset: -2px; }
body.sched-pasting .sched-slot:not(.sched-slot--time):hover { outline: 2px dashed var(--accent); outline-offset: -2px; }
/* Availability shading: bookable windows render light on the shaded day. */
.sched-avail { position: absolute; left: 0; right: 0; background: var(--surface, #fff); pointer-events: none; box-sizing: border-box; border-top: 1px solid rgba(31,138,166,.35); border-bottom: 1px solid rgba(31,138,166,.35); }
.sched-appt { position: absolute; left: 3px; right: 3px; box-sizing: border-box; background: var(--surface, #fff); border: 1px solid var(--border, #cfd8dd); border-left: 4px solid var(--accent); border-radius: 4px; padding: 2px 5px; font-size: 11.5px; overflow: hidden; box-shadow: 0 1px 2px rgba(0,0,0,.12); z-index: 2; }
.sched-appt__label { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sched-appt__meta { color: var(--muted, #7b8a94); font-size: 10.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sched-appt__actions { position: absolute; top: 1px; right: 2px; display: none; gap: 2px; }
.sched-appt:hover .sched-appt__actions { display: flex; }
.sched-appt--ghost { opacity: .35; }               /* WS8.5 other-location transparency */
.sched-appt--outside { border-style: dashed; }     /* booked past the override modal */
.sched-pinboard { flex: 0 0 210px; border: 1px solid var(--border, #d6dde2); border-radius: 8px; background: var(--surface, #fff); padding: 10px 12px; position: sticky; top: 10px; }
.sched-pinboard h3 { margin: 0 0 8px; font-size: 13px; }
.sched-pin { border: 1px solid var(--border, #d6dde2); border-left: 4px solid var(--accent); border-radius: 4px; padding: 6px 8px; margin-bottom: 8px; font-size: 12px; cursor: grab; background: var(--surface, #fff); }
.sched-pin strong { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sched-pin__actions { margin-top: 4px; display: flex; gap: 10px; }
.sched-book { position: fixed; inset: 0; margin: auto; height: fit-content; max-height: 90vh; overflow: auto; width: 360px; max-width: calc(100vw - 30px); background: var(--surface, #fff); border: 1px solid var(--border, #d6dde2); border-radius: 8px; box-shadow: 0 10px 40px rgba(0,0,0,.35); padding: 16px; z-index: 60; }
.sched-book h3 { margin-top: 0; }
.sched-book__error { color: var(--bad); font-size: 12.5px; margin-top: 8px; }
.sched-toolbar { display: flex; gap: 8px; align-items: center; margin: 0; }
.avail-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 12px; }
.avail-day { border: 1px solid var(--border, #d6dde2); border-radius: 6px; padding: 8px 10px; }
.avail-day legend { font-weight: 600; font-size: 13px; padding: 0 4px; }
.avail-row { display: flex; gap: 6px; align-items: center; margin-bottom: 6px; }
.avail-row select { flex: 1; min-width: 0; }

/* ==========================================================================
   Mobile / tablet improvements — therapists use phones + tablets in-clinic.
   Breakpoints:
     • 860px — existing sidebar-collapse + topnav label-hide (unchanged)
     • 768px — tablet adjustments: form grids, schedule toolbar
     • 600px — topbar: hide low-priority utils so the scrollable topnav
       strip + remaining utils always fit ≥360px with zero overflow
     • 480px — phone-only: sticky note footer, full-width controls, tap targets
   ========================================================================== */

/* ---- Touch targets: all interactive buttons get a minimum 44×44px hit area.
   This applies app-wide so tapping is comfortable without squinting. ---------- */
@media (max-width: 768px) {
    .btn { min-height: 44px; padding: 10px 18px; }
    .btn--sm { min-height: 38px; padding: 8px 12px; }
    .iconbtn { min-width: 36px; min-height: 36px; display: inline-flex; align-items: center; justify-content: center; }

    /* ---- Form grid: 2-col → 1-col on tablet/phone ---- */
    .form-grid { grid-template-columns: 1fr; }

    /* ---- Inputs: every field stretches full-width (avoids tiny side-by-side fields) ---- */
    .filter-bar__search { min-width: 0; }
    .filter-bar { gap: 8px; }

    /* ---- page-actions header: stack heading + button instead of side-by-side ---- */
    .page-actions { flex-direction: column; align-items: flex-start; }
    .page-actions > a.btn, .page-actions > .btn { align-self: flex-start; }

    /* ---- Patient list filter bar ---- */
    .pat-head { flex-direction: column; align-items: flex-start; gap: 10px; }
    .pat-search .input-wrap { min-width: 0; width: 100%; }
    .pat-search { width: 100%; }

    /* ---- Pager: wrap cleanly on tablet ---- */
    .pager { flex-direction: column; align-items: center; gap: 8px; }

    /* ---- Card: full-width, remove fixed max-width ---- */
    .card { max-width: 100%; }
    .form-card { max-width: 100%; }

    /* ---- Content padding tightened slightly ---- */
    .content__body { padding: 16px 14px; }
    .content__head { padding: 14px 14px; }

    /* ---- Appointment request rows: stack label + fields vertically ---- */
    .appt-req__row { flex-direction: column; align-items: flex-start; }
    .appt-req__lbl { flex: none; text-align: left; }
    .appt-req__row select { width: 100%; }
    .appt-req__row input[type=number] { width: 100%; }
    .pay-rem__row { flex-direction: column; align-items: flex-start; }
    .pay-rem__lbl { flex: none; text-align: left; }
    .pay-rem__row input[type=number] { width: 100%; }

    /* ---- Tile grid: 1-col on mobile ---- */
    .tile-grid { grid-template-columns: 1fr; }

    /* ---- Payer/case form rows ---- */
    .colorline input[type=color] { width: 52px; height: 44px; }

    /* ---- Review docs: drop below 460px min to use available width ---- */
    .rv-docs { grid-template-columns: 1fr; }

    /* ---- List toolbar wraps gracefully ---- */
    .list-toolbar { gap: 8px; }
    .list-toolbar__count { margin-left: 0; }
}

/* ---- Topbar: hide low-priority utils so the fixed-width items (hamburger,
   brand, remaining utils) always leave room for the scrollable topnav strip,
   down to a 360px viewport. Avatar icon, mail, sign-out and the punch-clock
   stay (all compact already); staff-file, theme toggle and help go first. ---- */
@media (max-width: 600px) {
    .topbar__utils { gap: 2px; padding-right: 6px; }
    .util { padding: 6px; }
    .topbar__utils .sc-theme-switch,
    .topbar__utils .util[aria-label="My Staff File"],
    .topbar__utils .util[aria-label="Help"] { display: none; }
}

/* ---- Phone-only (≤480px): sticky note footer, full controls, compact topnav ---- */
@media (max-width: 480px) {

    /* ---- Topnav items are narrower on a 375px phone ---- */
    .topnav__item { min-width: 46px; padding: 0 8px; }
    .topbar__utils { gap: 0; padding-right: 6px; }
    .util { padding: 6px; }

    /* ---- Content body padding ---- */
    .content__body { padding: 12px 10px; }
    .content__head { padding: 12px 10px; }

    /* ---- Note editor: sticky save/sign bar at bottom of screen.
       The note editor footer (.modal-form__foot used inline inside the page form)
       becomes sticky so therapists can save without scrolling back to the top. ---- */
    .note-editor .modal-form__foot {
        position: sticky;
        bottom: 0;
        /* Must outrank .dictation-panel (z-index 500) — at this width the panel is
           nearly full-bleed and used to bury the Save / Sign buttons completely. */
        z-index: 600;
        background: var(--surface);
        border-top: 1px solid var(--line);
        box-shadow: 0 -3px 12px rgba(20,40,60,.10);
        margin: 0 -10px -12px;
        padding: 12px 10px;
        flex-wrap: wrap;
        gap: 8px;
    }
    .note-editor .modal-form__foot .btn { flex: 1 1 auto; justify-content: center; min-height: 48px; font-size: 15px; }

    /* ---- Note editor SOAP textareas: taller for thumb typing ---- */
    .note-editor textarea { font-size: 16px; } /* prevents iOS auto-zoom on focus */

    /* ---- Goal bank select: full-width ---- */
    #goalBankPick { max-width: 100%; width: 100%; }
    .note-editor [style*="display:flex"][style*="gap:8px"] { flex-wrap: wrap; }

    /* ---- Schedule toolbar: stack nav + filters vertically ---- */
    .sched-toolbar { flex-direction: column; align-items: stretch; }
    .sched-toolbar__filters { flex-wrap: wrap; }
    .sched-toolbar__filters select { flex: 1 1 100%; }
    .sched-toolbar__filters .btn { min-height: 44px; }
    .sched-viewtoggle { display: flex; }
    .sched-viewtoggle .btn { flex: 1; justify-content: center; }

    /* ---- Hide week-view toggle on phone; default to day view via JS init ---- */
    .sched-toolbar__filters .sched-viewtoggle [data-cal-view="week"] { display: none; }

    /* ---- Modals already go full-screen at 640px; ensure schedule ones do too ---- */
    .sched-modal { padding: 0; align-items: flex-end; }
    .sched-modal__panel { border-radius: 12px 12px 0 0; max-height: 92vh; width: 100%; max-width: 100%; }

    /* ---- Patient chart modal tabs: already go horizontal at 720px; on phone make them scrollable ---- */
    .pchart-tabs { overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
    .pchart-tabs::-webkit-scrollbar { display: none; }
    .pchart-tabs .mtab { padding: 10px 14px; font-size: 13px; }

    /* ---- Filter bar dropdowns: full-width on phone ---- */
    .filter-bar select { width: 100%; }

    /* ---- KPI row: 2-up even on phone ---- */
    .kpi-row { grid-template-columns: repeat(2, 1fr); gap: 8px; }
    .kpi { padding: 10px 10px; gap: 8px; }
    .kpi__n { font-size: 20px; }

    /* ---- Data table: ensure .table-wrap hint is visible for horizontal scroll ---- */
    .table-wrap { position: relative; }
    .table-wrap::after {
        content: '';
        position: absolute;
        top: 0; right: 0; bottom: 0;
        width: 24px;
        background: linear-gradient(to right, transparent, rgba(255,255,255,.7));
        pointer-events: none;
        border-radius: 0 var(--radius) var(--radius) 0;
    }

    /* ---- ifr (intake form renderer) half/third columns → full width ---- */
    .ifr-w-half, .ifr-w-third { flex-basis: 100%; }
    .ifr-field input, .ifr-field select, .ifr-field textarea { font-size: 16px; }

    /* ---- dep-tools: allow wrapping so row actions don't overflow ---- */
    .dep-tools { flex-wrap: wrap; justify-content: flex-start; gap: 4px; }
    .dep-tools .btn--sm { flex: 0 0 auto; }

    /* ---- Chart tabs: scrollable strip ---- */
    .chart-tabs { overflow-x: auto; flex-wrap: nowrap; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
    .chart-tabs::-webkit-scrollbar { display: none; }
    .chart-tabs a { white-space: nowrap; }
}

/* ---- Selected-patient context tab bar ---- */
/* Selected-patient tab strip: thin light strip directly under the dark top bar. */
.patient-ctx-bar {
    display: flex; align-items: center; gap: 6px; flex-wrap: nowrap; overflow-x: auto;
    padding: 5px 14px; background: var(--dk-surface-2, #f4f6f8);
    border-bottom: 1px solid var(--line, #e2e6ea); font-size: 13px;
}
.patient-ctx-bar__label { color: var(--muted, #7a8794); margin-right: 2px; flex: 0 0 auto; }
.patient-ctx-tab {
    display: inline-flex; align-items: center; gap: 2px; flex: 0 0 auto;
    border: 1px solid var(--border, #d8dee4); border-radius: 999px;
    padding: 2px 4px 2px 10px; background: var(--surface-2, #f5f7f9);
}
.patient-ctx-tab.is-active { background: var(--accent-soft, #e7f0fb); border-color: var(--accent, #2f6fb3); }
.patient-ctx-tab__link { text-decoration: none; color: inherit; white-space: nowrap; }
.patient-ctx-tab.is-active .patient-ctx-tab__link { font-weight: 600; }
.patient-ctx-tab__close {
    border: 0; background: none; cursor: pointer; color: var(--muted, #7a8794);
    font-size: 14px; line-height: 1; padding: 2px 6px; border-radius: 999px;
}
.patient-ctx-tab__close:hover { color: var(--danger, #c0392b); }
.sched-details a[data-cal-pick-patient] { text-decoration: underline dotted; cursor: pointer; color: inherit; }

/* ---- Hub landing pages (Tracking / No-Shows / My HR / generic /hub/{module}/{slug}) ----
   Card grid moved here from views/tracking/index.php. Ad-hoc vars (--card-bg,
   --border-color, ...) are re-pointed by console-skin.css in dark mode; the
   fallbacks resolve to the shell tokens in light mode. */
.tracking-hub {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 12px;
    padding: 20px 0 8px;
}
.tracking-card {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 18px;
    background: var(--card-bg, var(--surface));
    border: 1px solid var(--border-color, var(--line));
    border-radius: 8px;
    text-decoration: none;
    color: inherit;
    transition: box-shadow .12s, border-color .12s;
}
.tracking-card:hover {
    box-shadow: 0 2px 8px rgba(0,0,0,.09);
    border-color: var(--accent-color, var(--accent));
    text-decoration: none;
}
.tracking-card__icon {
    width: 42px;
    height: 42px;
    border-radius: 8px;
    background: var(--accent-light, rgba(31,138,166,.12));
    color: var(--accent-color, var(--accent));
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 17px;
    flex-shrink: 0;
}
.tracking-card__body { flex: 1; min-width: 0; }
.tracking-card__label {
    font-weight: 600;
    font-size: 14px;
    color: var(--text-color, var(--text));
}
.tracking-card__desc {
    font-size: 12px;
    color: var(--muted-color, var(--text-muted));
    margin-top: 3px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.tracking-card__badge {
    background: var(--accent-color, var(--accent));
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 10px;
    flex-shrink: 0;
}
.tracking-card__chev {
    color: var(--muted-color, var(--text-muted));
    font-size: 12px;
    flex-shrink: 0;
}
.tracking-hub__group {
    margin: 22px 0 -10px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .6px;
    text-transform: uppercase;
    color: var(--muted-color, var(--text-muted));
}
.tracking-hub__group:first-of-type { margin-top: 8px; }
.tracking-hub__empty {
    margin-top: 20px;
    padding: 36px 20px;
    text-align: center;
    border: 1px dashed var(--border-color, var(--line));
    border-radius: 8px;
    color: var(--muted-color, var(--text-muted));
}
.tracking-hub__empty i { font-size: 26px; margin-bottom: 10px; display: block; }
.tracking-hub__empty p { margin: 0; }

/* Accidental-dismissal guard: a backdrop click on a modal that holds form
   fields nudges the panel instead of throwing the input away (see app.js). */
@keyframes modal-nudge {
    0%, 100% { transform: translateX(0); }
    20% { transform: translateX(-5px); }
    45% { transform: translateX(4px); }
    70% { transform: translateX(-2px); }
}
#appModal .modal.is-nudge { animation: modal-nudge .22s ease-in-out; }

/* Note editor: therapy-activity type-ahead (2026-10-12) */
.note-act-suggest { position:absolute; left:0; right:0; top:calc(100% + 4px); z-index:30; max-height:280px; overflow:auto;
  background:var(--surface,#fff); border:1px solid var(--border,#d9dce1); border-radius:8px; box-shadow:0 8px 24px rgba(0,0,0,.12); padding:4px; }
.note-act-suggest__opt { padding:7px 10px; border-radius:6px; cursor:pointer; font-size:14px; }
.note-act-suggest__opt:hover, .note-act-suggest__opt.is-sel { background:var(--accent-soft,#fdeee6); }
.note-act-suggest__empty { padding:7px 10px; font-size:13px; color:var(--text-muted,#6b7280); }
.note-act-chip { display:inline-flex; align-items:center; gap:6px; padding:4px 6px 4px 10px; border-radius:999px; font-size:13px;
  background:var(--accent-soft,#fdeee6); border:1px solid var(--border,#e5d6cc); }
.note-act-chip button { border:0; background:none; cursor:pointer; font-size:15px; line-height:1; color:inherit; padding:0 4px; }

/* ---- Phone card tables (front-desk audit 2026-10-20) ----------------------
   Add .table--cards to a .data-table and data-label="Column" to each <td>:
   at phone width each row becomes a card of label/value lines instead of a
   table wider than the screen. Cells without data-label span the card. */
@media (max-width: 640px) {
    table.table--cards, table.table--cards tbody, table.table--cards tr, table.table--cards td { display: block; width: 100%; }
    table.table--cards thead { display: none; }
    table.table--cards tr { border: 1px solid var(--line, var(--border, #e5e7eb)); border-radius: 10px; margin: 0 0 10px; padding: 8px 12px; background: var(--surface, #fff); }
    table.table--cards td { border: 0 !important; padding: 3px 0 !important; text-align: left !important; white-space: normal; }
    table.table--cards td[data-label] { display: grid; grid-template-columns: 38% 1fr; gap: 8px; }
    table.table--cards td[data-label]::before { content: attr(data-label); font-size: .78rem; font-weight: 600; color: var(--text-muted, var(--muted, #6b7280)); }
}

/* New Invitation existing-patient lookup (meeting 2026-10-20 D18) */
.ipl { position: relative; margin-bottom: 12px; display: flex; flex-direction: column; gap: 4px; }
.ipl .input-wrap { display: flex; align-items: center; gap: 8px; }
.ipl .input-wrap input { flex: 1; min-width: 0; }
.ipl__results { position: absolute; z-index: 50; left: 0; right: 0; top: 100%; background: var(--surface, #fff); border: 1px solid var(--line, #d5dde3); border-radius: 8px; box-shadow: 0 8px 24px rgba(0,0,0,.14); max-height: 300px; overflow-y: auto; padding: 4px 0; }
.ipl__item { display: block; width: 100%; text-align: left; background: none; border: 0; padding: 7px 12px; cursor: pointer; color: inherit; line-height: 1.3; }
.ipl__item:hover, .ipl__item:focus { background: var(--dk-surface-2, #eef3f5); }
.ipl__name { font-weight: 600; font-size: 13.5px; }
.ipl__meta, .ipl__empty { font-size: 12px; color: var(--text-muted, #5f6b76); }
.ipl__empty { padding: 8px 12px; }

/* Deploy status badge ("Started 40%") stays on one line */
.dep-table .badge { white-space: nowrap; }