/* ==========================================================================
   OPD Room, OPD Main Hall, Doctor Pending, Sehat Card — clinical styling.
   Requires QueueTheme.css (all colours are its tokens).
   ========================================================================== */

.qd-app--toolbar { grid-template-rows: auto auto minmax(0, 1fr); }

.qs-main {
    display: flex;
    flex-direction: column;
    gap: var(--gap);
    min-width: 0;
    min-height: 0;
}

.qs-header__mid { flex: 1; min-width: 0; }

.qs-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: rgb(255 255 255 / 0.85);
}

.qs-eyebrow .qd-live-dot { color: #34d399; width: 0.55rem; height: 0.55rem; }

/* ── Summary tiles ──────────────────────────────────────────────────────── */

.qs-summary {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--gap);
}

.qs-tile {
    --c: var(--color-brand-2);
    --soft: var(--color-brand-soft);
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.9rem 1.2rem;
}

.qs-tile--done    { --c: var(--color-done-strong);    --soft: var(--color-done-soft); }
.qs-tile--pending { --c: var(--color-waiting-strong); --soft: var(--color-waiting-soft); }
.qs-tile--serving { --c: var(--color-serving-strong); --soft: var(--color-serving-soft); }

.qs-tile__icon {
    display: grid;
    place-items: center;
    flex-shrink: 0;
    width: 3.2rem;
    height: 3.2rem;
    border-radius: 0.7rem;
    font-size: 1.35rem;
    color: var(--c);
    background: var(--soft);
}

.qs-tile__label {
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-ink-3);
}

.qs-tile__value {
    margin-top: 0.15rem;
    font-size: 2.3rem;
    font-weight: 800;
    line-height: 1;
    font-variant-numeric: tabular-nums;
    color: var(--color-ink);
    border-radius: 0.3rem;
}

.qs-tile--pending .qs-tile__value { color: var(--color-waiting-strong); }
.qs-tile__value small { margin-left: 0.3rem; font-size: 0.9rem; font-weight: 700; color: var(--color-ink-3); }

/* ── Board ──────────────────────────────────────────────────────────────── */

.qs-board {
    position: relative;
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
    padding: 1rem 1.1rem;
}

.qs-board__bar {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 0.8rem;
}

.qs-board__pager {
    margin-left: auto;
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--color-ink-3);
    font-variant-numeric: tabular-nums;
}

.qs-board__progress { margin: -0.3rem 0 0.5rem; }

/* ── Department filter (OPD Main Hall board bar) ─────────────────────────
   <label class="qs-dept-filter"><i/><span/><select/></label>
   A native select, so tablets and touch TVs open their own picker.
   .is-active = a department is chosen: the pill turns brand blue. */

.qs-dept-filter {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    min-width: 0;
    max-width: 26rem;
    padding: 0 0.4rem 0 1rem;
    border-radius: 999px;
    font-size: 1rem;
    font-weight: 700;
    color: var(--color-ink-2);
    background: var(--color-surface);
    border: 1.5px solid var(--color-border-strong);
    box-shadow: var(--shadow-sm);
    cursor: pointer;
    touch-action: manipulation;
    transition: background-color 0.2s, border-color 0.2s, color 0.2s;
}

.qs-dept-filter:hover { border-color: var(--color-brand-2); }
.qs-dept-filter:focus-within { outline: 3px solid rgb(2 132 199 / 0.35); outline-offset: 2px; }
.qs-dept-filter i { font-size: 0.9rem; color: var(--color-brand-2); }

.qs-dept-filter__label {
    font-size: 0.78rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-ink-3);
    white-space: nowrap;
}

.qs-dept-filter__select {
    appearance: none;
    -webkit-appearance: none;
    min-width: 0;
    min-height: 2.6rem;
    padding: 0 2rem 0 0.1rem;
    border: 0;
    font: inherit;
    font-weight: 800;
    color: var(--color-ink);
    background: transparent;
    text-overflow: ellipsis;
    cursor: pointer;
}

.qs-dept-filter__select:focus { outline: none; }
.qs-dept-filter__select option { color: var(--color-ink); background: var(--color-surface); font-weight: 600; }

/* Chevron */
.qs-dept-filter::after {
    content: "";
    position: absolute;
    right: 1rem;
    top: 50%;
    width: 0.45rem;
    height: 0.45rem;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: translateY(-70%) rotate(45deg);
    pointer-events: none;
}

.qs-dept-filter.is-active {
    color: var(--color-on-brand);
    background: var(--color-brand);
    border-color: var(--color-brand);
}
.qs-dept-filter.is-active i,
.qs-dept-filter.is-active .qs-dept-filter__label,
.qs-dept-filter.is-active .qs-dept-filter__select { color: var(--color-on-brand); }

[data-theme="dark"] .qs-dept-filter.is-active { background: #1d4ed8; border-color: #1d4ed8; }

@media (pointer: coarse) {
    .qs-dept-filter__select { min-height: max(44px, 2.6rem); }
}

.qs-board__body {
    position: relative;
    flex: 1;
    min-height: 0;
}

/* ── Table / grid hybrid ────────────────────────────────────────────────── */

.ct-table {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
}

.ct-table--hall   { --ct-cols: 8.5rem minmax(0, 2.6fr) repeat(4, minmax(0, 1fr)); }
.ct-table--doctor { --ct-cols: 7rem minmax(0, 2.2fr) minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, 1.3fr) minmax(0, 0.8fr) minmax(0, 1fr); }
.ct-table--sehat  { --ct-cols: 4.5rem minmax(0, 0.8fr) minmax(0, 1.7fr) minmax(0, 2.1fr) minmax(0, 2.3fr) minmax(0, 0.75fr); }

/* Ward names are long ("Female Surgical Ward - Unit II"), so the Ward column is the
   widest after the name and its badge wraps onto extra lines instead of being cut off.
   The font is a touch smaller so three lines still fit in one TV row (--ct-row-h). */
.ct-table--sehat .ct-ward { font-size: 1.05rem; white-space: normal; overflow: visible; }
.ct-table--sehat .ct-ward .qd-dept {
    align-items: flex-start;
    padding: 0.3em 0.7em;
    line-height: 1.2;
    white-space: normal;
    overflow: visible;
    overflow-wrap: break-word;
}
.ct-table--sehat .ct-ward .qd-dept::before { margin-top: 0.35em; }

.ct-head,
.ct-row {
    display: grid;
    grid-template-columns: var(--ct-cols);
    align-items: center;
    gap: 1rem;
    padding: 0 1.2rem;
}

.ct-head {
    min-height: 3rem;
    border-radius: var(--radius-sm);
    background: var(--color-surface-2);
    border: 1px solid var(--color-border);
    font-size: 0.85rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--color-ink-3);
}

.ct-head > span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.ct-body {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-top: 0.5rem;
}

.ct-row {
    position: relative;
    flex: 0 0 var(--ct-row-h, 4.8rem);
    min-height: var(--ct-row-h, 4.8rem);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-sm);
}

.ct-row:nth-child(even) { background: var(--color-surface-2); }

/* Left status stripe */
.ct-row::before {
    content: "";
    position: absolute;
    left: -1px;
    top: -1px;
    bottom: -1px;
    width: 0.3rem;
    border-radius: var(--radius-sm) 0 0 var(--radius-sm);
    background: var(--stripe, transparent);
}

.ct-row.is-next     { --stripe: var(--color-waiting); }
.ct-row.is-priority { --stripe: var(--color-priority); }
.ct-row.is-serving  { --stripe: var(--color-serving); }

.ct-row.is-entering { animation: rowIn 0.45s var(--ease) both; animation-delay: calc(var(--i, 0) * 40ms); }
.ct-row.is-leaving  { animation: rowOut 0.3s ease-in forwards; animation-delay: calc(var(--i, 0) * 20ms); }

.ct-cell {
    min-width: 0;
    font-size: 1.35rem;
    font-weight: 600;
    color: var(--color-ink);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ct-num {
    text-align: right;
    font-size: 1.9rem;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}

.ct-head .ct-num { font-size: inherit; font-weight: inherit; }
.ct-center { text-align: center; }
.ct-muted  { color: var(--color-ink-3); }
.ct-num.ct-done { color: var(--color-done-strong); }
.ct-num small { margin-left: 0.25rem; font-size: 0.55em; font-weight: 700; color: var(--color-ink-3); }

.ct-room {
    display: inline-block;
    min-width: 4.5rem;
    padding: 0.35rem 0.7rem;
    border-radius: 0.5rem;
    text-align: center;
    font-size: 1.45rem;
    font-weight: 800;
    color: var(--color-on-brand);
    background: var(--color-brand);
}

[data-theme="dark"] .ct-room { background: #1d4ed8; }

.ct-stack { display: flex; flex-direction: column; gap: 0.25rem; min-width: 0; }

.ct-title {
    display: block;
    max-width: 100%;
    font-size: 1.45rem;
    font-weight: 800;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ct-stack .qd-dept { align-self: flex-start; font-size: 0.85rem; }

/* Status badges */
.ct-badge {
    --c: var(--color-brand-2);
    --soft: var(--color-brand-soft);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    max-width: 100%;
    padding: 0.25rem 0.75rem;
    border-radius: 999px;
    font-size: 1rem;
    font-weight: 800;
    color: var(--c);
    background: var(--soft);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ct-badge--pending  { --c: var(--color-waiting-strong);  --soft: var(--color-waiting-soft); }
.ct-badge--serving  { --c: var(--color-serving-strong);  --soft: var(--color-serving-soft); }
.ct-badge--done     { --c: var(--color-done-strong);     --soft: var(--color-done-soft); }
.ct-badge--priority { --c: var(--color-priority);        --soft: var(--color-priority-soft); }
.ct-badge--muted    { --c: var(--color-ink-3);           --soft: var(--color-surface-2); }

/* Large pending count */
.ct-badge--count {
    min-width: 4.2rem;
    padding: 0.2rem 0.9rem;
    font-size: 1.8rem;
    font-variant-numeric: tabular-nums;
}

.ct-badge--tag { align-self: flex-start; padding: 0.1rem 0.6rem; font-size: 0.8rem; }

.ct-cell--right { display: flex; justify-content: flex-end; }

/* Shown only on the stacked Sehat Card patient card */
.ct-doc__icon { display: none; }

/* Token badge (Doctor Pending) */
.ct-token {
    display: inline-block;
    min-width: 5rem;
    padding: 0.3rem 0.6rem;
    border-radius: 0.5rem;
    text-align: center;
    font-size: 1.7rem;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    color: var(--color-waiting-strong);
    background: var(--color-waiting-soft);
    border: 1px solid var(--color-waiting);
}

.ct-row.is-priority .ct-token { color: var(--color-priority); background: var(--color-priority-soft); border-color: var(--color-priority); }

/* ── OPD Room ───────────────────────────────────────────────────────────── */

.qs-room-view {
    display: grid;
    grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
    gap: var(--gap);
    min-height: 0;
}

.qs-hero {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 0;
    padding: 1.5rem;
    overflow: hidden;
    text-align: center;
    border-top: 0.45rem solid var(--color-serving);
}

.qs-hero .qd-pill { position: absolute; top: 1.3rem; left: 1.5rem; }
.qs-hero__rings { display: none; }

/* New token: one soft green tint that fades — no flashing */
.qs-hero.is-called { animation: callTint 4s var(--ease); }

.qs-hero__label {
    font-size: 1.4rem;
    font-weight: 800;
    letter-spacing: 0.25em;
    text-transform: uppercase;
    color: var(--color-ink-3);
}

.qs-hero__token {
    display: inline-block;
    font-size: clamp(6rem, min(22vw, 34vh), 22rem);
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
    color: var(--color-serving-strong);
}

.qs-hero__token.is-out { animation: tokenOut 0.3s ease-in forwards; }
.qs-hero__token.is-in  { animation: tokenIn 0.5s var(--ease) both; }

.qs-hero__hint {
    margin-top: 0.8rem;
    font-size: 1.4rem;
    font-weight: 600;
    color: var(--color-ink-2);
}

.qs-side {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--gap);
    min-height: 0;
}

.qs-doctor { display: flex; flex-direction: column; gap: 0.8rem; padding: 1.3rem 1.5rem; }
.qs-doctor__dept { align-self: flex-start; font-size: 1.1rem; }

.qs-doctor__name {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    font-size: 2.1rem;
    font-weight: 800;
    line-height: 1.15;
}

.qs-doctor__name i {
    display: grid;
    place-items: center;
    flex-shrink: 0;
    width: 3.2rem;
    height: 3.2rem;
    border-radius: 0.7rem;
    font-size: 1.4rem;
    color: var(--color-brand-2);
    background: var(--color-brand-soft);
}

.qs-metric {
    --c: var(--color-brand-2);
    --soft: var(--color-brand-soft);
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 0.5rem;
    min-height: 0;
    padding: 1.2rem 1.5rem;
}

.qs-metric--wait { --c: var(--color-waiting-strong); --soft: var(--color-waiting-soft); }

.qs-metric__label {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    font-size: 1rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-ink-3);
}

.qs-metric__label i {
    display: grid;
    place-items: center;
    width: 2.4rem;
    height: 2.4rem;
    border-radius: 0.6rem;
    color: var(--c);
    background: var(--soft);
}

.qs-metric__value {
    font-size: clamp(3rem, 7vw, 6.5rem);
    font-weight: 800;
    line-height: 1;
    font-variant-numeric: tabular-nums;
    color: var(--c);
    border-radius: 0.5rem;
}

.value-updated { animation: valueBump 0.9s var(--ease); }

/* ── Empty state: medical cross ─────────────────────────────────────────── */

.qs-empty {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    padding: 1rem;
}

.qs-hero .qs-empty { z-index: 5; background: var(--color-surface); }

.qs-empty__card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.9rem;
    max-width: 34rem;
    padding: 2.4rem 3rem;
    text-align: center;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    animation: fadeUp 0.5s var(--ease) both;
}

.ct-cross {
    position: relative;
    width: 6rem;
    height: 6rem;
    border-radius: 50%;
    background: var(--color-brand-soft);
}

.ct-cross::before,
.ct-cross::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    border-radius: 0.3rem;
    background: var(--color-brand-2);
    transform: translate(-50%, -50%);
}

.ct-cross::before { width: 2.6rem; height: 0.85rem; }
.ct-cross::after  { width: 0.85rem; height: 2.6rem; }

.qs-empty__title { font-size: 1.6rem; font-weight: 800; color: var(--color-ink); }
.qs-empty__text  { font-size: 1.1rem; font-weight: 500; color: var(--color-ink-3); }

/* ── Filter toolbar (Sehat Card) ────────────────────────────────────────── */

.qs-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.8rem 1.4rem;
    padding: 0.75rem 1.2rem;
}

.qs-filter { display: flex; align-items: center; gap: 0.6rem; }

.qs-filter label {
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-ink-3);
}

.qs-status { margin-left: auto; }

.qs-toolbar .select2-container { width: 15rem !important; }

.qs-toolbar .select2-container--default .select2-selection--single {
    display: flex !important;
    align-items: center !important;
    height: 2.6rem !important;
    border-radius: 0.5rem !important;
    border: 1px solid var(--color-border-strong) !important;
    background: var(--color-surface) !important;
}

.qs-toolbar .select2-container--default .select2-selection--single .select2-selection__rendered {
    padding-left: 0.9rem !important;
    font-size: 1rem !important;
    font-weight: 700 !important;
    line-height: 2.6rem !important;
    color: var(--color-ink) !important;
}

.qs-toolbar .select2-container--default .select2-selection--single .select2-selection__arrow { height: 2.6rem !important; right: 0.4rem !important; }

.select2-dropdown {
    z-index: 9999999 !important;
    overflow: hidden;
    border-radius: 0.5rem !important;
    border: 1px solid var(--color-border-strong) !important;
    background: var(--color-surface) !important;
    box-shadow: var(--shadow);
}

.select2-container--default .select2-results__option {
    padding: 0.55rem 0.9rem !important;
    font-size: 1rem !important;
    font-weight: 600 !important;
    color: var(--color-ink) !important;
}

.select2-container--default .select2-results__option--highlighted[aria-selected],
.select2-container--default .select2-results__option--highlighted.select2-results__option--selectable {
    color: var(--color-on-brand) !important;
    background: var(--color-brand) !important;
}

/* Select2 menus are attached to <body>, so no card or panel can clip them.
   Keep every menu inside the screen: the option list is at most 45% of the
   screen height (it scrolls inside), and the menu never runs past the edges. */
.select2-dropdown { max-width: calc(100vw - 1rem); }

.select2-container--default .select2-results > .select2-results__options {
    max-height: min(18rem, 45vh) !important;
    max-height: min(18rem, 45dvh) !important;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
}

.select2-container--default .select2-results__option { white-space: normal; overflow-wrap: anywhere; }

.select2-selection, .select2-results__option, .qs-filter label { touch-action: manipulation; }

/* Touch screens (kiosks, tablets, phones): every target at least 44px tall */
@media (pointer: coarse) {
    .qs-toolbar .select2-container--default .select2-selection--single { height: max(44px, 2.6rem) !important; }
    .qs-toolbar .select2-container--default .select2-selection--single .select2-selection__rendered { line-height: max(44px, 2.6rem) !important; }
    .qs-toolbar .select2-container--default .select2-selection--single .select2-selection__arrow { height: max(44px, 2.6rem) !important; }
    .select2-container--default .select2-results__option {
        display: flex !important;
        align-items: center;
        min-height: 44px;
        padding-top: 0.4rem !important;
        padding-bottom: 0.4rem !important;
    }
}

/* ── Responsive ─────────────────────────────────────────────────────────── */

@media (min-width: 901px) and (max-width: 1400px) and (min-height: 561px) and (orientation: landscape) {
    .ct-cell { font-size: 1.15rem; }
    .ct-num { font-size: 1.6rem; }
}

/* Tablets / portrait / phones: rows become labelled cards. The page stays one
   screen tall; only the board body (.qd-scroll-panel) scrolls. */
@media (orientation: portrait), (max-width: 900px), (max-height: 560px) {
    .qs-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gap); }

    .qs-board { flex: 1 1 0; min-height: 0; padding: 0.8rem 0.9rem; }
    .qs-board__bar { margin-bottom: 0.5rem; }
    .qs-board__body { flex: 1 1 0; height: auto; }
    .qs-board__pager { display: none; }
    .ct-body { flex: none; }
    .qs-board .qs-empty { position: static; }

    .ct-head { display: none; }

    .ct-row {
        flex: none;
        min-height: 0;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.6rem 1rem;
        padding: 0.9rem 1rem 0.9rem 1.2rem;
    }

    .ct-row > .ct-wide { grid-column: 1 / -1; }

    .ct-cell { white-space: normal; text-align: left; min-width: 0; }
    .ct-title { white-space: normal; overflow-wrap: anywhere; }
    .ct-cell--right { justify-content: flex-start; }
    .ct-num { font-size: 1.5rem; text-align: left; }

    .ct-cell[data-label]::before {
        content: attr(data-label);
        display: block;
        margin-bottom: 0.15rem;
        font-size: 0.72rem;
        font-weight: 700;
        letter-spacing: 0.06em;
        text-transform: uppercase;
        color: var(--color-ink-3);
    }

    .ct-cell--right[data-label] { flex-direction: column; align-items: flex-start; }

    /* OPD Room: token card fills the space, the three facts sit in one row below */
    .qs-room-view { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto; }
    .qs-hero { min-height: 0; padding: 1rem; }
    /* Pill sits above the label instead of floating over it */
    .qs-hero .qd-pill { position: static; align-self: flex-start; margin-bottom: 0.6rem; }
    .qs-hero__token { font-size: clamp(5rem, min(24vw, 22vh), 16rem); }
    .qs-hero__label, .qs-hero__hint { font-size: 1.1rem; }
    .qs-hero .qs-empty__card { padding: 1.4rem 1.2rem; }
    .qs-side { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: auto; }
    .qs-doctor, .qs-metric { padding: 0.8rem 1rem; gap: 0.4rem; }
    .qs-doctor__name { font-size: 1.3rem; }
    .qs-doctor__name i { width: 2.2rem; height: 2.2rem; font-size: 1rem; }
    .qs-metric__label { font-size: 0.8rem; gap: 0.5rem; }
    .qs-metric__label i { width: 1.8rem; height: 1.8rem; }
    .qs-metric__value { font-size: clamp(2rem, 6vw, 3.4rem); }

    /* Sehat Card / Ward Admitted: each patient becomes a compact card
         [ 1 ] PATIENT NAME (wraps)
               Dr. physician
               [WARD] [TYPE]            ID 18733            */
    .ct-table--sehat .ct-row {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 0.4rem 0.6rem;
        padding: 0.85rem 1rem 0.85rem 1.1rem;
    }

    .ct-table--sehat .ct-cell[data-label]::before { content: none; }
    .ct-table--sehat .ct-cell { font-size: 0.95rem; }

    .ct-table--sehat .ct-sr {
        order: 0;
        flex: 0 0 2.4rem;
        align-self: flex-start;
        padding: 0.15rem 0;
        border-radius: 0.4rem;
        font-size: 0.85rem;
        font-weight: 800;
        text-align: center;
        background: var(--color-surface-2);
        border: 1px solid var(--color-border);
    }

    .ct-table--sehat .ct-name { order: 1; flex: 1 1 0; min-width: 0; }
    .ct-table--sehat .ct-title { font-size: 1.15rem; line-height: 1.25; }

    /* Lines under the name are indented past the serial badge (2.4rem + gap) */
    .ct-table--sehat .ct-doc {
        order: 3;
        flex: 1 1 100%;
        padding-left: 3rem;
        color: var(--color-ink-2);
        overflow-wrap: anywhere;
    }
    .ct-table--sehat .ct-doc__icon { display: inline; margin-right: 0.4rem; color: var(--color-ink-3); }

    .ct-table--sehat .ct-ward { order: 4; flex: 0 1 auto; max-width: calc(100% - 3rem); margin-left: 3rem; font-size: 0.85rem; }
    .ct-table--sehat .ct-type { order: 5; flex: none; }
    .ct-table--sehat .ct-type .ct-badge { font-size: 0.75rem; padding: 0.15rem 0.6rem; }

    .ct-table--sehat .ct-pid { order: 6; flex: none; margin-left: auto; font-size: 0.85rem; }
    .ct-table--sehat .ct-pid::before { content: "ID "; font-weight: 700; }
}

/* Phones held sideways: little height, so the summary is one slim row */
@media (orientation: landscape) and (max-height: 560px) {
    /* OPD Room: TV-style split (token | doctor + metrics), token sized by height */
    .qs-room-view { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); }
    .qs-side { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr) minmax(0, 1fr); }
    .qs-hero { padding: 0.6rem 0.9rem; }
    .qs-hero .qd-pill { margin-bottom: 0.2rem; }
    .qs-hero__token { font-size: clamp(3rem, 24vh, 9rem); }
    .qs-hero__hint { display: none; }
    .qs-hero .qs-empty__card { padding: 0.8rem 1rem; gap: 0.4rem; }
    .qs-hero .ct-cross { width: 2.8rem; height: 2.8rem; }
    .qs-metric__value { font-size: clamp(1.6rem, 9vh, 2.6rem); }

    .qs-summary { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .qs-tile { padding: 0.45rem 0.7rem; }
    .qs-tile__icon { display: none; }
    .qs-tile__value { font-size: 1.4rem; }
    .qs-toolbar { padding: 0.5rem 0.9rem; gap: 0.5rem 1rem; }
    .qs-status { display: none; } /* the header title already names the list */
}

@media (max-width: 640px) {
    .qs-tile { padding: 0.55rem 0.7rem; gap: 0.6rem; }
    .qs-tile__icon { width: 2.4rem; height: 2.4rem; font-size: 1rem; }
    .qs-tile__value { font-size: 1.6rem; }
    .qs-tile__label { font-size: 0.62rem; letter-spacing: 0.04em; }

    /* Filters: one per line, labels in a fixed column so the dropdowns line up */
    .qs-toolbar { gap: 0.6rem; padding: 0.75rem 0.9rem; }
    .qs-filter { flex: 1 1 100%; display: grid; grid-template-columns: 3.2rem minmax(0, 1fr); }
    .qs-toolbar .select2-container { width: 100% !important; min-width: 0; }
    .qs-status { display: none; } /* the header title already names the list */

    .qs-board__bar:has(.qs-dept-filter) { flex-wrap: wrap; gap: 0.6rem; }
    .qs-dept-filter { flex: 1 1 100%; max-width: none; }
    .qs-dept-filter__label { display: none; }

    .qs-doctor__name { font-size: 1.2rem; }
    .qs-side { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .qs-doctor { grid-column: 1 / -1; flex-direction: row; align-items: center; flex-wrap: wrap; }
    .qs-empty__card { padding: 1.2rem 1rem; }
    .ct-cross { width: 4rem; height: 4rem; }
}