/* ==========================================================================
   Soft-TechBd DoctorDesk — responsive layer
   --------------------------------------------------------------------------
   This file is mobile-first in its measurements: every number in it was
   chosen for a thumb first and the desktop rule is the one that widens.

   Breakpoints
     <= 1280px  wide two-column layouts loosen
      <=  767px  the rail becomes a drawer, the tab bar appears (phones only)
     <=  820px  tables restack, forms collapse, spacing tightens
     <=  560px  compact phones — smallest spacing, shortest labels
     <=  380px  narrow phones (320 / 360 / 375)

   Two rules that are never broken here:
     1. Nothing hides horizontal overflow. If it does not fit, the layout is
        wrong and gets rebuilt, not clipped.
     2. No fixed height on anything whose content can wrap or grow.

   Phone widths explicitly checked: 320 / 360 / 375 / 390 / 412 / 430 px.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Touch ergonomics: no double-tap zoom, and 16px controls so focusing a
   field never zooms the page on iOS.
   -------------------------------------------------------------------------- */

button, a, .btn, .tab, .nav-link, .segmented button, .tabbar__item {
    touch-action: manipulation;
}

@media (pointer: coarse), (max-width: 820px) {
    .input, .select, .textarea,
    .filters .input, .filters .select {
        font-size: 16px;
        padding: 10px 12px;
    }
    .select { padding-right: 34px; }
    .textarea { line-height: 1.5; }
    .btn { min-height: 42px; padding: 9px 14px; }
    .btn--sm { min-height: 36px; }
    .btn--icon { width: 42px; height: 42px; }
    .btn--icon.btn--sm { width: 36px; height: 36px; }
    .btn-quiet { width: 36px; height: 36px; }
    .topbar__toggle { width: 42px; height: 42px; }
    .check { min-height: 42px; align-items: center; }
    .check input[type="checkbox"], .check input[type="radio"] { margin-top: 0; }
    .switch { min-height: 42px; }
    .page-link { min-width: 38px; height: 38px; }
}

/* ==========================================================================
   <= 1280px
   ========================================================================== */

@media (max-width: 1280px) {
    .grid--sidebar { grid-template-columns: minmax(0, 1fr) 300px; }
    .grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ==========================================================================
   <= 767px  — drawer navigation + thumb tab bar (phones only; tablets keep
   the desktop rail)
   ========================================================================== */

@media (max-width: 767px) {
    :root {
        --gutter: 16px;
        --tabbar-h: 62px;
    }

    /* --- The rail becomes a drawer ----------------------------------
       Narrower than before (280–300px): readable labels, compact
       padding, 44px+ touch rows. Desktop rail untouched. */
    .sidebar {
        position: fixed;
        top: 0;
        left: 0;
        bottom: 0;
        height: 100dvh;
        width: min(82vw, 230px);
        max-width: 230px;
        flex-basis: auto;
        transform: translateX(-100%);
        transition: transform .24s var(--ease);
        box-shadow: none;
        z-index: 70;
        will-change: transform;
    }
    .app-shell.is-nav-open .sidebar { transform: translateX(0); }
    .app-shell.is-nav-open .sidebar-backdrop { display: block; z-index: 65; }

    .sidebar__close { display: grid; }

    /* The drawer reaches the bottom edge, so it needs the inset itself. */
    .sidebar__nav { padding: 12px 12px calc(18px + env(safe-area-inset-bottom, 0px)); }
    .sidebar__brand { padding-left: 12px; padding-right: 12px; }
    .nav-group__title { padding: 8px 12px 5px; }
    .nav-link {
        font-size: 14px;
        padding: 11px 12px;
        gap: 11px;
        min-height: 44px;
        white-space: nowrap;
    }
    .sidebar__foot { padding-left: 12px; padding-right: 12px; }

    /* The tab bar's "More" item opens the drawer, so a second menu button in
       the topbar would be two controls for one job. The hamburger stays in
       the markup for the landscape case, where the tab bar is hidden. */
    .main { width: 100%; }

    /* --- Room for the tab bar, so the last row is never covered ----- */
    .page {
        padding-bottom: calc(var(--tabbar-h) + 18px + env(safe-area-inset-bottom, 0px));
    }
    .page--flush {
        padding-bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom, 0px));
    }

    .tabbar { display: grid; }

    /* The list itself reserves the room both bars need. */
    .pad-wrap { padding-bottom: calc(var(--tabbar-h) + 96px); }

    .toast-host { bottom: calc(var(--tabbar-h) + 14px + env(safe-area-inset-bottom, 0px)); }
    /* The rail is off-canvas here, so the badge returns to the screen edge. */
    .dev-meter {
        left: 8px;
        bottom: calc(var(--tabbar-h) + 8px + env(safe-area-inset-bottom, 0px));
    }

    /* --- The global lookup drops out of the flow --------------------- */
    .topbar__search { flex: 1 1 90px; max-width: none; }

    .topbar__search .ac__list {
        position: fixed;
        top: var(--topbar-h);
        left: var(--gutter);
        right: var(--gutter);
        width: auto;
        max-height: 60vh;
    }

    /* The dashboard's side column drops under the main one. Without this the
       two keep sharing the row and the narrower one squeezes to nothing. */
    .grid--sidebar,
    .grid--2 { grid-template-columns: minmax(0, 1fr); }

    .filters .field,
    .filters .field--wide { flex: 1 1 46%; max-width: none; }
    .filters__actions { margin-left: 0; flex: 1 1 100%; }
}

/* ==========================================================================
   <= 820px  — restacked tables, single-column forms, tighter rhythm
   ========================================================================== */

/* Compact patient rows (patients/index.php) live here but switch on only
   inside the media query below: desktop never sees .pt-list, phones never
   see the patients table. Same data, same links, same permission gates. */
.pt-list { display: none; }

/* Same treatment for the appointment board: desktop never sees .appt-list,
   phones never see the appointments table (appointments/index.php). */
.appt-list { display: none; }

@media (max-width: 820px) {
    :root { --gutter: 14px; }

    .page-head { margin-bottom: 14px; gap: 10px; align-items: flex-start; }
    .page-head__text { flex-basis: 100%; }
    .page-head__actions { width: 100%; }

    .card__body { padding: 14px; }
    .card__head { padding: 12px 14px; flex-wrap: wrap; }
    .card__tools { margin-left: 0; width: 100%; }
    .card__foot { padding: 12px 14px; }

    /* --- KPI tiles: value-led, two per row, no wasted height -------- */
    .stat-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
    }
    .stat { padding: 12px; gap: 0; }
    .stat__icon { display: none; }
    .stat__value { font-size: var(--fs-xl); }
    .stat__label { font-size: 10.5px; letter-spacing: .04em; margin-bottom: 4px; }

    .form-grid, .form-grid--2, .form-grid--3, .form-grid--4 { grid-template-columns: minmax(0, 1fr); }
    .grid--3 { grid-template-columns: minmax(0, 1fr); }
    .grid { gap: 14px; }

    .filters { padding: 12px 14px; }
    /* Two short filters share a row — one per row doubles the height for
       nothing. Full width is kept for .field--wide (search, date ranges). */
    .filters .field { flex: 1 1 46%; max-width: none; }
    .filters .field--wide { flex: 1 1 100%; max-width: none; }

    /* ---- Tables become stacked cards -------------------------------- */
    .table--cards { font-size: 13.5px; }
    .table--cards thead { display: none; }
    .table--cards tbody,
    .table--cards tr,
    .table--cards td { display: block; width: 100%; }
    /* Rows become full-bleed sections separated by a rule, not cards inside a
       card: a bordered box inside an already-bordered card reads as two
       frames around one patient, and it cost 20px of height per row. */
    .table--cards tr {
        border: 0;
        border-bottom: 1px solid var(--line);
        border-radius: 0;
        margin: 0;
        padding: 2px 14px 8px;
        background: var(--paper);
    }
    .table--cards tr:last-child { border-bottom: 0; }
    .table--cards tbody tr:hover { background: var(--paper); }
    /* Status-coloured rows keep a full-width tint so they still stand out. */
    .table--cards tr.is-current { background: var(--brand-soft); }
    .table--cards tr.is-highlight { background: var(--brand-softer); }
    .table--cards td {
        display: flex;
        align-items: baseline;
        justify-content: space-between;
        gap: 12px;
        padding: 7px 0;
        border-bottom: 1px dashed var(--line-soft);
        text-align: right;
    }
    .table--cards td:last-child { border-bottom: 0; }
    .table--cards td::before {
        content: attr(data-label);
        flex: 0 0 auto;
        font-size: 10.5px;
        font-weight: 700;
        letter-spacing: .04em;
        text-transform: uppercase;
        color: var(--muted);
        text-align: left;
        padding-right: 8px;
    }
    html[lang="bn"] .table--cards td::before { letter-spacing: 0; text-transform: none; }
    .table--cards td:not([data-label])::before { content: none; }
    /* The primary cell reads as a heading, not a label/value pair. */
    .table--cards td.cell-title {
        display: block;
        text-align: left;
        padding: 10px 0 8px;
        border-bottom: 1px solid var(--line-soft);
        font-size: var(--fs-md);
        font-weight: 600;
        color: var(--ink);
    }
    .table--cards td.cell-title::before { content: none; }
    .table--cards td.cell-actions {
        display: flex;
        justify-content: flex-end;
        flex-wrap: wrap;
        gap: 8px;
        padding-top: 10px;
        border-top: 1px solid var(--line-soft);
        border-bottom: 0;
    }
    .table--cards td.cell-actions::before { content: none; }
    .table--cards .token-pill { min-width: 52px; }
    .table--cards .truncate { max-width: 62%; }

    /* ---- Instant Visit compact form (visits/instant.php) ---------------
       Same fields, tighter rhythm: two short fields share every row,
       8px inputs (16px text kept so iOS never zooms), small labels,
       checkboxes without the 42px coarse rule, slim divider + footer. */
    .instant-page .card__body { padding: 12px 14px; }
    .instant-page .card__title { flex-wrap: wrap; row-gap: 4px; }
    .instant-page .form-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 10px; }
    .instant-page .field__label { margin-bottom: 3px; }
    .instant-page .input,
    .instant-page .select { padding: 8px 10px; }
    .instant-page .field__hint { margin-top: 2px; font-size: 11px; line-height: 1.4; }
    .instant-page .pad-readonly-value { font-size: 13px; min-height: 0; }
    .instant-page .check { min-height: 0; font-size: 13px; }
    .instant-page .check + .check { margin-top: 6px; }
    .instant-page .instant-div { margin: 2px 0 0; font-size: 13px; }
    .instant-page .card__foot { padding: 10px 14px; gap: 8px; }
    .instant-page .card__foot .btn--lg { padding: 9px 16px; }

    /* ---- Pre-check board (precheck/index.php, phones only) --------------
       Slim stat tiles (date/vitals hints already live in the filters, so
       the meta lines hide), compact filters, and 3-line patient rows:
       token · name · status / code · age · gender / vitals-or-waiting
       with edit + send + view icons. Desktop keeps the pc-table. */
    .precheck-stats { gap: 8px; margin-bottom: 10px; }
    .precheck-stats .stat { padding: 8px 12px; }
    .precheck-stats .stat__label { margin-bottom: 2px; }
    .precheck-stats .stat__value { font-size: var(--fs-xl); }
    .precheck-stats .stat__meta { display: none; }
    .precheck-page .table-wrap { display: none; }
    .precheck-page .filters { padding: 10px 14px; gap: 8px; }
    .precheck-page .empty-state { padding: 16px 12px; }
    .pc-list { display: block; padding: 0 14px 6px; }
    .pc-row { padding: 7px 0; border-bottom: 1px solid var(--line-soft); }
    .pc-row:last-child { border-bottom: 0; }
    .pc-row__line1 {
        display: flex;
        align-items: center;
        gap: 7px;
        min-width: 0;
    }
    .pc-row .token-pill { min-width: 0; padding: 2px 7px; font-size: 12px; }
    .pc-row__name {
        flex: 1 1 auto;
        min-width: 0;
        font-weight: 600;
        font-size: 14px;
        line-height: 1.35;
        color: var(--ink);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .pc-row__status { flex: 0 0 auto; }
    .pc-row .badge { font-size: 11px; padding: 1px 8px; }
    .pc-row__line2 {
        margin-top: 1px;
        font-size: 12px;
        line-height: 1.5;
        color: var(--muted);
    }
    .pc-row__line3 {
        display: flex;
        align-items: center;
        gap: 6px;
        margin-top: 1px;
        min-width: 0;
    }
    .pc-row__vitals {
        flex: 1 1 auto;
        min-width: 0;
        font-size: 12px;
        line-height: 1.5;
        color: var(--body);
    }
    .pc-row__tools {
        flex: 0 0 auto;
        display: flex;
        align-items: center;
        gap: 2px;
    }

    /* ---- Pre-check vitals form (precheck/form.php, phones only) ---------
       Same groups (patient / vitals / notes), tighter rhythm: 2-column
       vitals, 4px labels, ~42px inputs, slim footer. */
    .precheck-form .card__body { padding: 12px 14px; }
    .precheck-form .form-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 10px; }
    .precheck-form .field__label { margin-bottom: 4px; }
    .precheck-form .input { padding: 9px 11px; }
    .precheck-form .field__hint { margin-top: 2px; font-size: 11px; }
    .precheck-form .section-title { margin: 4px 0 8px; }
    .precheck-form .textarea { min-height: 64px; }
    .precheck-form .card__foot { padding: 10px 14px; }
    .precheck-form .card__foot .btn--lg { padding: 9px 16px; }
    .precheck-form .alert { margin-bottom: 10px; }

    /* ---- Patient profile (patients/view.php, phones only) --------------
       Summary: tighter body, 20px name, compact action buttons.
       Tabs card: only pv-table lists collapse (overview tables keep
       their columns), pv rows mirror the appointment language. */
    .pf-page { margin-bottom: 10px; }
    .pf-page .card__body { padding: 12px 14px; }
    .pf-page h2 { font-size: 20px; }
    .pf-page .badge { min-height: 30px; }
    .pf-page .btn-row { gap: 6px; margin-top: 8px; }
    .pf-page .btn-row .btn { min-height: 42px; padding: 8px 12px; font-size: 13px; }
    .pf-tabs table.pv-table { display: none; }
    .pf-tabs .table-wrap:has(> table.pv-table) { display: none; }
    .pf-tabs .tabs { padding: 0 14px; }
    .pf-tabs .pv-list { display: block; padding: 0 14px 6px; }
    .pv-row { padding: 8px 0; border-bottom: 1px solid var(--line-soft); }
    .pv-row:last-child { border-bottom: 0; }
    .pv-row__line1 {
        display: flex;
        align-items: center;
        gap: 8px;
        min-width: 0;
    }
    .pv-row__title { flex: 0 0 auto; font-weight: 700; font-size: 14px; color: var(--ink); }
    .pv-row__status { margin-left: auto; flex: 0 0 auto; }
    .pv-row .badge { font-size: 11px; padding: 1px 8px; }
    .pv-row__meta {
        margin-top: 1px;
        font-size: 12.5px;
        line-height: 1.5;
        color: var(--muted);
    }
    .pv-row__actions { display: flex; gap: 6px; margin-top: 6px; }
    .pv-row__actions .btn { min-height: 40px; }
    /* One button system inside the tabs card: every small action —
       View, print, history, receipt — shares a 40px touch height. */
    .pf-tabs .btn--sm { min-height: 40px; }
    .pf-tabs .card__body { padding: 10px 14px 13px; }
    .pf-tabs .section-title { font-size: var(--fs-base); margin: 0 0 8px; }
    .pf-tabs .detail-grid { gap: 12px 20px; }
    .pf-tabs .detail__key { font-size: 11px; }
    .pf-tabs .detail__val { font-size: 14px; }
    .pf-tabs .hr { margin: 12px 0; }
    .pf-tabs .alert { margin-bottom: 10px; }
    .pf-tabs .card__foot { padding: 10px 14px; }
    .pf-tabs .card__foot .flex { gap: 8px 14px; }
    .pf-tabs .empty-state { padding: 16px 12px; }
    .pf-tabs .empty-state__icon { width: 48px; height: 48px; margin-bottom: 10px; }
    /* Timeline stays a timeline, just tighter. Rail indent reduced so
       item content shares the card's left boundary. */
    .pf-tabs .timeline { padding-left: 18px; }
    .pf-tabs .timeline::before { left: 4px; }
    .pf-tabs .timeline__dot { left: -19px; }
    .pf-tabs .timeline__item { padding-bottom: 10px; }
    .pf-tabs .timeline__body { padding: 10px 12px; }
    .pf-tabs .timeline__head { gap: 5px; }
    .pf-tabs .timeline__head .btn { min-height: 40px; }
    .pf-tabs .timeline__row { margin-top: 4px; }
    .pf-tabs .timeline__head .btn--ghost { padding-left: 8px; padding-right: 8px; }

    /* ---- Strict 2-line visit rows (visits/index.php, phones only) ------
       Line 1: date · code / status. Line 2: name · age / View. No
       doctor, diagnosis or medicine info on mobile; details page has it. */
    .visit-page .table-wrap { display: none; }
    .visit-page .filters { padding: 10px 14px; gap: 8px; }
    .visit-page .card__head { flex-wrap: nowrap; gap: 8px; padding: 10px 14px; align-items: center; }
    .visit-page .card__title { font-size: 15px; white-space: nowrap; }
    .visit-page .card__tools { width: auto; margin-left: auto; flex: 0 0 auto; gap: 6px; }
    .visit-page .card__tools .badge { font-size: 11px; }
    .vs-list { display: block; padding: 0 14px 6px; }
    .vs-row { padding: 8px 0; border-bottom: 1px solid var(--line-soft); }
    .vs-row:last-child { border-bottom: 0; }
    .vs-line1, .vs-line2 {
        display: flex;
        align-items: center;
        gap: 8px;
        min-width: 0;
    }
    .vs-line2 { margin-top: 3px; }
    .vs-datecode {
        flex: 1 1 auto;
        min-width: 0;
        font-size: 12.5px;
        color: var(--muted);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .vs-datecode strong { color: var(--ink); font-weight: 600; }
    .vs-status { flex: 0 0 auto; }
    .vs-row .badge { font-size: 11px; padding: 1px 8px; }
    .vs-name {
        flex: 1 1 auto;
        min-width: 0;
        font-weight: 600;
        font-size: 14.5px;
        line-height: 1.35;
        color: var(--ink);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .vs-name span { font-weight: 400; font-size: 12.5px; color: var(--muted); }
    .vs-line2 .btn { flex: 0 0 auto; }

    /* ---- Visit details (visits/view.php, phones only) ------------------
       Same language: 2-column identity facts, tight summary sections,
       inline vitals, wrapping chips, compact advice + stacked meds. */
    .visit-page .card__body { padding: 12px 14px; }
    .visit-page .card__foot { padding: 10px 14px; }
    .visit-page .card__foot .btn { min-height: 40px; font-size: 13px; }
    .visit-page .detail-grid { grid-template-columns: 1fr 1fr; gap: 8px 14px; }
    .visit-page .detail__key { font-size: 11px; }
    .visit-page .detail__val { font-size: 14px; }
    .visit-page .section-title { margin: 0 0 6px; }
    .visit-page .mb-2 { margin-bottom: 8px; }
    .visit-page .mb-3 { margin-bottom: 10px; }
    .visit-page .mt-3 { margin-top: 12px; }
    .visit-page .alert { margin-bottom: 10px; }
    .visit-page .flex.gap-4 { gap: 8px 14px; }
    .visit-page .pad-readonly-value { font-size: 13.5px; }
    .visit-page .pad-readonly-list { font-size: 13px; line-height: 1.5; }
    .visit-page .pad-readonly-list li + li { margin-top: 5px; }
    .visit-page .chip { font-size: 12.5px; padding: 2px 6px 2px 9px; }
    .visit-page .table--cards td { padding: 6px 0; }

    /* ---- Visit medicines as single flowing rows (phones only) ----------
       The desktop table above stays untouched. Desktop vitals flex
       hides here; the short-label line shows instead. */
    .visit-page .table-wrap { display: none; }
    .visit-page .rx-vitals-d { display: none; }
    .visit-page .rx-vitals-m {
        display: block;
        font-size: 13px;
        line-height: 1.5;
        color: var(--body);
    }
    /* ---- Visit medicines mirror the printed pad (phones only) --------
       Same structure + class names as prescriptions/print.php; screen
       sizing/tokens here since print.css never loads on this page. */
    .rx-list { display: block; padding: 0 14px 12px; }
    .rx-list .rx-med-list { list-style: decimal; margin: 0; padding-left: 22px; }
    .rx-list .rx-med-list li::marker { color: var(--brand); font-weight: 700; }
    .rx-list .rx-med { padding: 7px 0; border-bottom: 1px solid var(--line-soft); }
    .rx-list .rx-med:last-child { border-bottom: 0; }
    .rx-list .rx-med__name { font-weight: 700; font-size: 14px; color: var(--ink); }
    .rx-list .rx-med__sched { display: flex; align-items: baseline; gap: 8px; margin-top: 1px; font-size: 12.5px; flex-wrap: wrap; }
    .rx-list .rx-med__dose { font-weight: 600; color: var(--brand-darker); }
    .rx-list .rx-med__meal { color: var(--body); }
    .rx-list .rx-med__dur { margin-left: auto; color: var(--body); white-space: nowrap; }
    .rx-list .rx-med__note { font-size: 12px; color: var(--muted); margin-top: 1px; }

    /* ---- Compact patient rows (patients/index.php, phones only) --------
       Same design language as the appointment board: avatar | name +
       inline meta | call pill + action icons, subtle separators. */
    .patients-page .table-wrap { display: none; }
    .patients-page .filters { padding: 10px 14px; gap: 8px; }
    /* One-line card head: title + total on the left, New-patient on the
       right — no wrapping into two rows on phones. ~55–65px tall. */
    .patients-page .card__head { flex-wrap: nowrap; gap: 8px; padding: 8px 14px; align-items: center; }
    .patients-page .card__title { font-size: 15px; white-space: nowrap; flex: 0 1 auto; overflow: hidden; text-overflow: ellipsis; }
    .patients-page .card__tools { width: auto; margin-left: auto; flex: 0 0 auto; gap: 8px; flex-wrap: nowrap; }
    .patients-page .card__tools .badge { font-size: 12px; min-height: 32px; padding: 5px 10px; display: inline-flex; align-items: center; }
    .patients-page .card__tools .btn { min-height: 40px; padding: 8px 14px; font-size: 14px; }
    .patients-page .filters .input,
    .patients-page .filters .select { padding: 8px 10px; }
    .patients-page .filters .field__label { margin-bottom: 3px; }
    .patients-page .filters__actions .btn { min-height: 40px; }
    .pt-list {
        display: block;
        margin: 0;
        padding: 0 14px 6px;
    }
    .pt-row {
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 10px 0;
        border-bottom: 1px solid var(--line-soft);
        background: var(--paper);
    }
    .pt-row:last-child { border-bottom: 0; }
    .pt-row__avatar {
        width: 44px;
        height: 44px;
        flex: 0 0 44px;
        font-size: 15px;
        margin-top: 0;
        align-self: center;
    }
    .pt-row__main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; justify-content: center; }
    .pt-row__name {
        display: block;
        font-weight: 600;
        font-size: 15px;
        line-height: 1.35;
        color: var(--ink);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .pt-row__name:hover { color: var(--brand-dark); }
    .pt-row__sub {
        font-size: 12px;
        line-height: 1.4;
        color: var(--muted);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .pt-row__meta {
        font-size: 12px;
        line-height: 1.5;
        color: var(--muted);
    }
    .pt-row__sep { margin: 0 4px; }
    .pt-row__side {
        flex: 0 0 auto;
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        justify-content: space-between;
        align-self: stretch;
        gap: 6px;
    }
    /* Compact row actions: same 15px glyphs, smaller boxes, tighter gap. */
    .pt-row__actions { display: flex; gap: 5px; }
    .pt-row__actions .btn { min-height: 34px; }
    .pt-row__actions .btn--icon.btn--sm { width: 34px; height: 34px; padding: 2px; }
    .pt-call {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        max-width: 100%;
        min-height: 36px;
        padding: 6px 10px;
        border: 1px solid var(--brand-line);
        border-radius: 999px;
        background: var(--brand-soft);
        color: var(--brand-darker);
        font-size: 12.5px;
        font-weight: 700;
        line-height: 1.2;
        white-space: nowrap;
        text-decoration: none;
    }
    .pt-call:hover { background: var(--brand-softer); color: var(--brand-darker); text-decoration: none; }
    .pt-call .icon { flex: 0 0 auto; }
    .pt-call__num { font-variant-numeric: tabular-nums; }
    .pt-call--none {
        background: transparent;
        border-color: transparent;
        min-height: 0;
        padding: 7px 2px;
    }
    .pt-row__actions { display: flex; gap: 6px; }

    /* Any table without the card treatment still scrolls inside its wrap. */
    .table-wrap { -webkit-overflow-scrolling: touch; }

    /* Short fact rows stay on ONE line (key left, value right) instead of
       stacking key-above-value: four facts read as four lines, not eight. */
    .def-list__row { flex-direction: row; gap: 8px; padding: 6px 0; align-items: baseline; }
    .def-list__key { flex: 0 0 40%; max-width: 40%; }
    .def-list__val { flex: 1 1 auto; min-width: 0; }

    /* ---- Modals become bottom sheets ------------------------------- */
    .modal-backdrop { padding: 0; place-items: end stretch; }
    .modal,
    .modal--wide {
        width: 100%;
        max-width: none;
        max-height: 88dvh;
        border-radius: var(--radius-lg) var(--radius-lg) 0 0;
        border-bottom: 0;
        animation: sheet-in .22s var(--ease);
    }
    .modal__head { padding: 14px 16px 12px; }
    .modal__head::before {
        content: "";
        position: absolute;
        top: 6px;
        left: 50%;
        transform: translateX(-50%);
        width: 38px;
        height: 4px;
        border-radius: 99px;
        background: var(--line-strong);
    }
    .modal__head { position: relative; }
    .modal__body { padding: 16px; }
    .modal__foot { padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px)); }
    .modal__foot .btn { flex: 1 1 auto; }

    @keyframes sheet-in { from { transform: translateY(14px); opacity: 0; } }

    .toast-host { left: 12px; right: 12px; max-width: none; }

    .dropdown__menu { right: 0; min-width: 190px; max-width: calc(100vw - 24px); }

    /* The account name is the first thing to go when space is short — the
       avatar still identifies the signed-in user. */
    .user-chip .user-chip__name { display: none; }

    /* --- Compact, non-wrapping action rows ------------------------- */
    .btn-row { gap: 7px; }
    .quick-actions { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
    .week-grid { grid-template-columns: repeat(auto-fit, minmax(132px, 1fr)); }
    .trend { min-height: 108px; }
    .trend__col { height: 108px; }
}

/* ==========================================================================
   <= 560px  — compact phones
   ========================================================================== */

@media (max-width: 560px) {
    :root { --gutter: 12px; --topbar-h: 58px; --tabbar-h: 60px; }

    /* ---- Appointment rows: two lines per patient ---------------------
       Kept in the 560px block as a safety net; the real phone layout is
       the dedicated max-width: 767px block at the end of this file. */
    .appt-page .appt-table tbody td.num { display: none; }

    h1 { font-size: var(--fs-xl); }
    .page-head__title { font-size: var(--fs-lg); }
    .topbar__title { font-size: var(--fs-md); }

    /* The page description adds a line but no information on a phone;
       the title alone already answers "where am I?". */
    .topbar__crumb { display: none; }

    /* One icon row is enough: the language switch moves into the account menu. */
    .topbar__lang { display: none; }
    .topbar__lang-inline { display: block; }

    /* Two rows on a phone: identity and account above, the patient lookup on
       a row of its own below. The lookup is the control a receptionist uses
       most, so it gets full width and a 16px field rather than being squeezed
       into whatever is left of a 320px bar. */
    .topbar { flex-wrap: wrap; row-gap: 7px; }
    .topbar__heading { order: 1; flex: 1 1 auto; }
    .topbar__spacer { display: none; }

    /* Children of this wrapper join the topbar's own flex line. */
    .topbar__actions { display: contents; }
    .topbar__actions .theme-toggle { order: 2; }
    .topbar__actions .dropdown { order: 3; }
    .topbar__search {
        order: 4;
        flex: 1 1 100%;
        max-width: none;
    }

    /* The lookup list hangs off its own field again now that the field is
       the full width of the bar. */
    .topbar__search .ac__list {
        position: absolute;
        top: calc(100% + 5px);
        left: 0;
        right: 0;
        max-height: 58vh;
    }

    .stat-grid { gap: 8px; }
    .stat { border-radius: var(--radius-md); padding: 10px 11px; }
    .stat__value { font-size: var(--fs-lg); }

    /* Fact grids (patient file, visit meta): two compact facts per row
       instead of one stacked pair per row. */
    .detail-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 12px; }
    .detail__key { font-size: 10.5px; margin-bottom: 1px; }
    .detail__val { font-size: 13.5px; }

    .grid { gap: 12px; }
    .page-head { margin-bottom: 12px; }
    .modal__body { padding: 14px; }

    /* Spacing utilities step down one notch — the same rhythm, less air. */
    .gap-4 { gap: 12px; }
    .mt-3 { margin-top: 12px; }
    .mb-3 { margin-bottom: 12px; }

    .card { border-radius: var(--radius-md); }
    .card__body { padding: 13px; }
    .card__head { padding: 11px 13px; gap: 8px; }
    .card__title { font-size: var(--fs-base); }
    .card__foot { padding: 11px 13px; }

    .pagination { padding: 10px 13px; gap: 8px; justify-content: space-between; }
    .pagination__info { flex: 1 1 100%; }
    .pagination__pages { margin-left: 0; }
    /* Keep the pager on one line: swap the long window for prev/next. */
    .pagination__pages .page-link:not(.is-active):not(:first-child):not(:last-child) { display: none; }

    .user-chip { padding: 3px; gap: 0; border-color: transparent; background: transparent; }
    .user-chip .user-chip__name { display: none; }
    .user-chip .icon { display: none; }
    .user-chip:hover { background: transparent; }

    /* Appointment booking keeps field pairs per row (date+time,
       fee+discount, source+referral) instead of stacking everything,
       like the instant-visit form. */
    #appointmentForm .form-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 8px; }
    #appointmentForm .field__hint { margin-top: 2px; }
    #appointmentForm #patientSummary { margin-top: 6px; }
    #appointmentForm [role="radiogroup"] { gap: 4px 10px; }
    #appointmentForm [role="radiogroup"] .check { min-height: 36px; font-size: 13px; }

    .table--cards tr { padding: 2px 13px 7px; }
    .table--cards td { font-size: 13px; }
    .table--cards td.cell-title { font-size: var(--fs-base); }

    .pt-list { padding: 0 13px 5px; }
    .pt-row { gap: 8px; padding: 7px 0; }
    .pt-call { font-size: 12px; padding: 6px 10px; }
    .patients-page .filters { padding: 10px 13px; }

    .empty-state { padding: 22px 14px; }
    .empty-state__text { max-width: 100%; }

    .ac__list { max-height: 250px; }

    .section-title { font-size: var(--fs-base); }
    .quick-action { padding: 10px; font-size: 12.5px; }
    .quick-action .icon { width: 28px; height: 28px; padding: 6px; }

    .timeline { padding-left: 20px; }
    .timeline__dot { left: -20px; }
}

/* ==========================================================================
   <= 380px  — narrow phones (320 / 360 / 375)
   --------------------------------------------------------------------------
   At this width every padding step is spent deliberately: the content keeps
   its full width and the chrome gives its own space back.
   ========================================================================== */

@media (max-width: 380px) {
    :root { --gutter: 10px; --fs-base: 13.5px; --tabbar-h: 58px; }

    .topbar { padding: 7px var(--gutter); gap: 8px; }
    .topbar__actions { gap: 4px; }

    .stat__value { font-size: var(--fs-md); }
    .stat__label { font-size: 10px; }

    .card__head { padding: 10px 11px; }
    .card__body { padding: 11px; }
    .card__foot { padding: 10px 11px; }

    .table--cards tr { padding: 2px 10px 4px; }
    .table--cards td { padding: 6px 0; }
    .table--cards .truncate { max-width: 52%; }

    .pt-list { padding: 0 11px 4px; }
    .pt-row__actions { gap: 5px; }
    .patients-page .filters { padding: 10px 11px; }
    .patients-page .card__head { padding: 8px 11px; }

    .appt-list { padding: 0 11px 5px; }
    .appt-types { padding: 7px 11px; }
    .appt-page .filters { padding: 10px 11px; }

    .pc-list { padding: 0 11px 5px; }
    .precheck-page .filters { padding: 10px 11px; }
    .precheck-form .card__body { padding: 11px; }
    .precheck-form .form-grid--4 { grid-template-columns: minmax(0, 1fr); }
    .precheck-form .card__foot { padding: 10px 11px; }

    .pv-list { padding: 0 11px 5px; }

    .vs-list { padding: 0 11px 5px; }
    .visit-page .filters { padding: 10px 11px; }
    .visit-page .card__head { padding: 8px 11px; }

    .visit-page .card__body { padding: 11px; }
    .visit-page .card__foot { padding: 10px 11px; }
    .rx-list { padding: 0 11px 10px; }

    /* Booking form at <=380px: the 3-column billing row and the one-line
       type pills cannot fit — stack billing, let type pills wrap. Never
       squeeze to overlap. */
    #appointmentForm .appt-billing { grid-template-columns: minmax(0, 1fr); }
    #appointmentForm .appt-billing .appt-fee,
    #appointmentForm .appt-billing .appt-discount,
    #appointmentForm .appt-billing .appt-total { grid-column: auto; grid-row: auto; }
    #appointmentForm [role="radiogroup"] { flex-wrap: wrap; }
    #appointmentForm [role="radiogroup"] .check { flex: 1 1 40%; white-space: normal; text-align: center; }

    .avatar--lg { width: 46px; height: 46px; flex-basis: 46px; font-size: var(--fs-md); }

    .tabbar__item { font-size: 10px; padding: 5px 1px; }
    .tabbar__label { letter-spacing: 0; }

    .dropdown__menu { min-width: 172px; }
}

/* ==========================================================================
   Patient timeline, phones — one compact record per visit.
   --------------------------------------------------------------------------
   Mobile-only: every rule lives inside this query, so the desktop card is
   untouched. Related facts share rows, labels stay small caps, chips stay
   tappable, and nothing may scroll sideways at 320px.
   ========================================================================== */

@media (max-width: 767px) {
    .timeline { padding-left: 18px; }
    .timeline::before { left: 4px; width: 2px; }
    .timeline__dot {
        left: -18px;
        top: 9px;
        width: 9px;
        height: 9px;
        box-shadow: 0 0 0 2px var(--paper);
    }
    .timeline__item { padding-bottom: 10px; }
    .timeline__body { padding: 10px 11px; line-height: 1.3; }

    /* Header: intro + Print history share one ~44px row. */
    .timeline__toolbar { flex-wrap: nowrap; gap: 8px; margin-bottom: 10px; min-height: 42px; }
    .timeline__toolbar p {
        font-size: 12px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .timeline__toolbar .btn { flex: 0 0 auto; min-height: 32px; padding: 5px 10px; font-size: 12px; }

    /* Date + visit no. + status + View flow in one wrapping row. */
    .timeline__head { gap: 5px; margin-bottom: 3px; }
    .timeline__date { font-size: 13.5px; }
    .timeline__head .badge { font-size: 10.5px; padding: 1px 7px; line-height: 1.6; }
    .timeline__head .btn { min-height: 30px; padding: 4px 8px; font-size: 12px; }

    /* Doctor + visit id: one muted 12px line. */
    .timeline__meta {
        font-size: 12px;
        line-height: 1.25;
        margin-bottom: 2px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    /* Fact rows: label + values inline, 5px apart. */
    .timeline__row { gap: 6px; margin-top: 5px; font-size: 12.5px; line-height: 1.3; }
    .timeline__key { min-width: 0; font-size: 10.5px; }

    /* Investigation chips: compact pills that wrap naturally. */
    .timeline__chips { gap: 5px; }
    .timeline__chips .chip { font-size: 11.5px; padding: 2px 5px 2px 8px; gap: 5px; line-height: 1.5; }
    .timeline__chips .chip .badge { font-size: 10px; padding: 1px 6px; }
}

/* ==========================================================================
   Landscape phones — the sticky topbar would eat the little height there is
   ========================================================================== */

@media (max-height: 500px) and (orientation: landscape) {
    .topbar { position: static; }
    .sidebar { overflow-y: auto; }
    .tabbar { display: none; }
    .page, .page--flush { padding-bottom: var(--gutter); }
    .toast-host { bottom: 14px; }
    .dev-meter { bottom: 8px; }
    /* No tab bar here, so the drawer needs its own opener back. */
    .topbar__toggle { display: inline-flex; }
    .bottom-bar { bottom: 0; }
    .has-bottom-bar { padding-bottom: calc(74px + env(safe-area-inset-bottom, 0px)); }
}

/* ==========================================================================
   Module bottom action bar (queue board, prescription pad)
   ========================================================================== */

.has-bottom-bar { padding-bottom: calc(74px + env(safe-area-inset-bottom, 0px)); }

.bottom-bar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 50;
    background: var(--paper);
    border-top: 1px solid var(--line);
    padding: 10px 14px calc(10px + env(safe-area-inset-bottom, 0px));
    box-shadow: 0 -4px 18px rgba(11, 26, 31, .08);
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

@media (min-width: 768px) {
    .bottom-bar { display: none; }
    .has-bottom-bar { padding-bottom: 0; }
}

/* --------------------------------------------------------------------------
   Stacking above the tab bar.

   This block sits after the .bottom-bar definition above on purpose: a
   module's own action bar and the prescription pad's toolbar both declare
   bottom: 0, and a rule placed earlier in the file would lose to them. Here
   they are lifted clear of the tab bar instead of hiding behind it, after
   the tab bar has already been given its height.
   -------------------------------------------------------------------------- */

@media (max-width: 767px) {
    .bottom-bar,
    .pad-actions {
        bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom, 0px));
        z-index: 55;
    }

    .bottom-bar { padding-bottom: 10px; }
    .pad-actions { padding-bottom: 10px; }
}

/* ==========================================================================
   Book Appointment, phones — a sectioned clinical workflow.
   --------------------------------------------------------------------------
   Mobile-only: desktop keeps the plain two-column form. Sections group
   patient, appointment, billing, referral and chamber info with one divider
   each; billing pairs fee beside a strong total; the visit type becomes
   segmented pills. No markup hooks, ids or names change — only presentation.
   ========================================================================== */

/* Book Appointment sections read as grouped blocks on every width. */
.appt-sec + .appt-sec { margin-top: 20px; }

@media (max-width: 767px) {
    .appt-sec { margin: 0; }
    .appt-sec + .appt-sec { margin-top: 14px; }
    .appt-sec__title {
        font-size: 13px;
        font-weight: 700;
        letter-spacing: .06em;
        text-transform: uppercase;
        color: var(--brand-darker);
        margin: 0 0 10px;
        padding-bottom: 6px;
        border-bottom: 1px solid var(--line-soft);
    }
    html[lang="bn"] .appt-sec__title { letter-spacing: 0; }

    /* Billing: fee beside a strong total, discount full width below.
       Placement pairs with the two-column billing grid, which only holds
       at compact widths (see below) — wider phones stack normally. */
    #appointmentForm #feeTotal {
        font-size: 19px;
        font-weight: 700;
        line-height: 1.25;
        color: var(--brand-darker);
    }

    /* Visit type as segmented pills on ONE line; the checked one fills. */
    #appointmentForm [role="radiogroup"] { display: flex; flex-wrap: nowrap; gap: 6px; }
    #appointmentForm [role="radiogroup"] .check {
        flex: 1 1 auto;
        min-width: 0;
        min-height: 40px;
        margin: 0;
        padding: 6px 4px;
        align-items: center;
        justify-content: center;
        border: 1px solid var(--line);
        border-radius: 10px;
        font-size: 12px;
        white-space: nowrap;
        overflow: hidden;
    }
    #appointmentForm [role="radiogroup"] .check span {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    #appointmentForm [role="radiogroup"] .check input { flex: 0 0 auto; }
    #appointmentForm [role="radiogroup"] .check:has(input:checked) {
        border-color: var(--brand);
        background: var(--brand-softer);
        color: var(--brand-darker);
        font-weight: 700;
    }
    #appointmentForm [role="radiogroup"] .check input { accent-color: var(--brand); }

    /* Compact patient summary + chamber banner. */
    #appointmentForm #patientSummary { padding: 8px 10px; }
    #appointmentForm #patientSummary strong { font-size: 13.5px; }
    #appointmentForm #patientSummary .faint.small { font-size: 12px; }
    #appointmentForm .appt-chamber { padding: 10px 12px; font-size: 12.5px; }

    /* Save leads, cancel follows — both reachable above the tab bar. */
    #appointmentForm .card__foot { gap: 8px; }
    #appointmentForm .card__foot .btn--primary { flex: 1 1 auto; min-height: 46px; }

    /* The report card always stacks below the booking form on phones,
       never beside it. Full-width title, hint and buttons. */
    #reportSection { display: block; width: 100%; max-width: 100%; min-width: 0; float: none; position: static; clear: both; box-sizing: border-box; margin: 12px 0 0; }
    #reportSection[hidden] { display: none; }
    #reportSection .card__title { font-size: 19px; font-weight: 700; line-height: 1.3; }
    #reportSection .field__hint { font-size: 12.5px; line-height: 1.45; }
    #reportSection .card__foot { flex-direction: column; align-items: stretch; }
    #reportSection .card__foot .btn { width: 100%; min-height: 46px; justify-content: center; }
}

@media (max-width: 560px) {
    /* Fee, discount and total share ONE row. */
    #appointmentForm .appt-billing { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px 6px; }
    .appt-billing .field__label { font-size: 10.5px; letter-spacing: .02em; }
    .appt-billing .appt-fee { grid-column: 1; grid-row: 1; }
    .appt-billing .appt-discount { grid-column: 2; grid-row: 1; }
    .appt-billing .appt-total { grid-column: 3; grid-row: 1; }
    .appt-billing .input { padding-left: 8px; padding-right: 8px; }
    #appointmentForm #feeTotal { font-size: 17px; }

    /* Tighter sections so the whole form fits one screen height. */
    .appt-sec + .appt-sec { margin-top: 12px; }
    .appt-sec__title { margin-bottom: 8px; }

    /* PC checkbox rides at input height beside the referral select. */
    .appt-pccheck { align-self: center; }
    .appt-pccheck .check { min-height: 44px; }
}

/* ==========================================================================
   APPOINTMENT LIST - PHONE ONLY (<= 767px)
   --------------------------------------------------------------------------
   Desktop keeps its full table. On phones each patient is two lines:

     line 1   token/time   patient name            status badge
     line 2   patient code (the .faint.small line) check-in / actions

   Age, gender, phone, fee, type, doctor and the extra status badges are
   dropped - they are the reason a row used to run to 6-7 lines. Cells are
   matched by role class (added in appointments/_panel.php), never by
   data-label, because labels are translated and every tab has its own
   column set. No markup, status or action was changed.
   ========================================================================== */
@media (max-width: 767px) {
    /* --- Section shell: no dead space around the list ------------------- */
    .appt-page .card__body { padding: 0; }
    .appt-page .card__head { padding: 9px 12px; }
    .appt-page .pagination {
        padding: 6px 12px;
        font-size: 11.5px;
        gap: 6px;
    }
    .appt-page .pagination__info { line-height: 1.3; }

/* --- Search / date / filter row ------------------------------------ */
    /* Two fields per line instead of one: this block was 179px tall on a
       360px screen, which is more than the list itself. */
    .appt-page .filters { padding: 7px 10px; gap: 5px 6px; }
    .appt-page .filters .field { flex: 1 1 46%; min-width: 0; }
    .appt-page .filters .field--wide { flex: 1 1 46%; }
    .appt-page .filters .field__label { margin-bottom: 2px; font-size: 10.5px; }
    /* 16px text is kept on purpose: anything smaller makes iOS zoom on focus. */
    .appt-page .filters .input,
    .appt-page .filters .select { padding: 6px 8px; }
    .appt-page .filters__actions {
        flex: 1 1 46%;
        gap: 4px;
        margin-left: 0;
    }
    .appt-page .filters__actions .btn {
        min-height: 34px;
        padding: 0 9px;
        font-size: 12.5px;
    }
    .appt-page .filters__actions .btn--icon {
        width: 34px;
        height: 34px;
    }

    /* --- New / follow-up / report counter strip ------------------------- */
    .appt-page .appt-types {
        padding: 5px 10px;
        gap: 3px 9px;
        font-size: 11px;
    }

    /* --- Status tabs: one dense, scrollable strip ----------------------- */
    .appt-page .appt-tabs {
        display: flex;
        padding: 0 8px;
        gap: 2px;
        overflow-x: auto;
        scrollbar-width: none;
        -ms-overflow-style: none;
        -webkit-overflow-scrolling: touch;
    }
    .appt-page .appt-tabs::-webkit-scrollbar { display: none; }
    .appt-page .appt-tabs .tab {
        flex: 0 0 auto;
        padding: 6px 8px;
        font-size: 12px;
        line-height: 1.3;
        white-space: nowrap;
    }
    .appt-page .appt-tabs .tab__count {
        margin-left: 4px;
        padding: 0 5px;
        font-size: 10px;
        line-height: 1.5;
    }
    .appt-page .appt-panel { min-height: 72px; }

    /* --- Rows ------------------------------------------------------------ */
    .appt-page .appt-table tbody tr {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr) auto;
        align-items: center;
        column-gap: 8px;
        row-gap: 0;
        padding: 7px 10px;
        border-bottom: 1px solid var(--line-soft);
        border-radius: 0;
    }
    /* Keep only: token/time, name, status, actions. */
    .appt-page .appt-table tbody td:not(.cell-title):not(.cell-actions):not(.cell-status):not(.cell-token):not(.cell-time) {
        display: none;
    }
    .appt-page .appt-table tbody td {
        padding: 0;
        border-bottom: 0;
        text-align: left;
    }
    .appt-page .appt-table tbody td::before { content: none; }

    /* Line 1 + 2 of the name cell: name over the code/time sub-line. */
    .appt-page .appt-table tbody td.cell-title {
        grid-column: 2;
        grid-row: 1 / span 2;
        display: grid;
        gap: 0;
        min-width: 0;
        font-size: 14.5px;
        font-weight: 600;
        line-height: 1.3;
    }
    .appt-page .appt-table tbody td.cell-title .cell-strong {
        display: block;
        min-width: 0;
        font-size: 14.5px;
        font-weight: 600;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .appt-page .appt-table tbody td.cell-title .faint.small {
        font-size: 11.5px;
        font-weight: 400;
        line-height: 1.35;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    /* Line 1 right: the one status badge. */
    .appt-page .appt-table tbody td.cell-status {
        grid-column: 3;
        grid-row: 1;
        justify-self: end;
        align-self: center;
    }
    .appt-page .appt-table tbody td.cell-status .badge {
        font-size: 10.5px;
        padding: 1px 7px;
    }
    /* Only the first badge: "Next" / "Awaiting pre-check" are secondary here. */
    .appt-page .appt-table tbody td.cell-status .badge ~ .badge { display: none; }

    /* Line 2 right: check-in stays a real button, the rest shrink to icons. */
    .appt-page .appt-table tbody td.cell-actions {
        grid-column: 3;
        grid-row: 2;
        justify-self: end;
        align-self: center;
        display: flex;
        gap: 5px;
    }
    .appt-page .appt-table tbody td.cell-actions .btn {
        min-height: 30px;
        padding: 0 9px;
        font-size: 12px;
        gap: 4px;
    }
    .appt-page .appt-table tbody td.cell-actions .btn--icon,
    .appt-page .appt-table tbody td.cell-actions .btn-quiet {
        width: 30px;
        height: 30px;
        min-height: 30px;
        padding: 0;
    }

    /* Token / time column. */
    .appt-page .appt-table tbody td.cell-token .token-pill,
    .appt-page .appt-table tbody td.cell-time {
        font-size: 12px;
        padding: 2px 7px;
        min-width: 0;
    }
    .appt-page .appt-table tbody td.cell-token .rep-check { display: none; }

    /* Empty state still needs some air. */
    .appt-page .empty-state { padding: 14px 12px; }
}