/* Clinic door link on the Clinics Control roster: quiet mono chip,
   click to copy the clinic's sign-in URL. */
.clinic-door-copy {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-top: 4px;
    padding: 2px 7px;
    min-height: 0;
    border: 1px solid var(--old-border, #d9dee5);
    background: transparent;
    color: var(--old-muted, #64748b);
    font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
    font-size: 10.5px;
    cursor: pointer;
    border-radius: 0;
}
.clinic-door-copy:hover {
    color: var(--eyeston-navy, #1f3f68);
    border-color: var(--eyeston-navy, #1f3f68);
}

/* ── Brand type: FUTURA ──────────────────────────────────────────────
   Real Futura when the machine has it (macOS ships it; licensed
   installs), Century Gothic as the common Windows cousin, self-hosted
   Jost as the guaranteed web floor. The brand face SPEAKS (headings,
   public surfaces); the system stack WORKS (dense UI, tables, forms). */
@font-face {
    font-family: 'Jost';
    src: url('fonts/jost-latin.woff2') format('woff2');
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20A0-20CF, U+2122;
}
@font-face {
    font-family: 'Jost';
    src: url('fonts/jost-latin-ext.woff2') format('woff2');
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0;
}
:root {
    /* "Futura Cyrillic Demi" = the owner's installed real Futura (split
       families, one per weight - Demi is the classic branding weight). */
    --font-brand: "Futura Cyrillic Demi", "Futura PT", Futura, "Century Gothic", CenturyGothic, 'Jost', sans-serif;
}

:root {
    color-scheme: light;
    --brand-navy: #1f3f68;
    --brand-navy-deep: #071525;
    --brand-green: #36a66a;
    --brand-green-deep: #268452;
    --brand-split: linear-gradient(115deg, var(--brand-navy) 0 49.8%, var(--brand-green) 50.2% 100%);
    --bg: #f3f4f8;
    --bg-soft: #f3f4f8;
    --panel: rgba(243, 244, 248, 0.86);
    --panel-solid: #f3f4f8;
    --panel-raised: rgba(243, 244, 248, 0.94);
    --ink: #142033;
    --ink-strong: #071525;
    --muted: #5d6f84;
    --line: rgba(15, 23, 42, 0.09);
    --line-strong: rgba(15, 23, 42, 0.16);
    --accent: var(--brand-navy);
    --accent-2: #2b5a8d;
    --accent-3: var(--brand-green);
    --accent-soft: color-mix(in srgb, #1f3f68 7%, #ffffff);
    --danger: #b42318;
    --success: var(--brand-green-deep);
    --shadow: 0 22px 70px rgba(13, 39, 70, 0.1);
    --shadow-soft: 0 12px 35px rgba(13, 39, 70, 0.08);
    --sidebar: #06101d;
    --sidebar-ink: #f4f8fb;
    --sidebar-muted: #afbdca;
    --input: #f3f4f8;
    --focus: 0 0 0 4px rgba(54, 166, 106, 0.2);
}

/* Public patient appointment booking */
.booking-body {
    min-height: 100vh;
    padding: 0 !important;
    background: linear-gradient(115deg, #1f3f68 0 44%, #36a66a 44.2% 100%) !important;
    place-items: stretch;
}

.booking-page {
    font-family: var(--font-brand) !important;
    --booking-accent: var(--brand-green);
    min-height: 100vh;
    padding: 0 24px 42px;
    color: var(--ink);
    background: linear-gradient(115deg, #1f3f68 0 44%, #36a66a 44.2% 100%) !important;
}

.booking-page * {
    font-family: var(--font-brand) !important;
}

.booking-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: min(1180px, 100%);
    margin: 0 auto;
    padding: 22px 0 18px;
    gap: 18px;
}

.booking-brand {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    min-width: 0;
    color: var(--ink-strong);
}

.booking-brand-mark {
    width: 240px !important;
    height: 90px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: visible !important;
    flex: 0 0 auto;
}

.booking-brand-mark .brand-logo-light {
    display: none !important;
}

.booking-brand-mark .brand-logo-dark {
    display: block !important;
}

.booking-brand span {
    display: grid;
    gap: 2px;
    min-width: 0;
}

.booking-brand strong {
    font-size: 20px;
    font-weight: 800;
    color: #ffffff !important;
}

.booking-brand small {
    color: rgba(255, 255, 255, 0.8) !important;
    font-size: 13px;
}

.booking-nav {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    flex-wrap: wrap;
}

.booking-specialty-link,
.booking-signin {
    display: inline-flex;
    align-items: center;
    min-height: 38px;
    padding: 0 14px;
    border: 1px solid var(--line);
    border-radius: 0;
    background: rgba(255, 255, 255, 0.72);
    color: var(--ink);
    font-size: 13px;
    font-weight: 800;
}

.booking-specialty-link.active {
    background: var(--booking-accent);
    color: #ffffff;
    border-color: transparent;
}

.booking-signin {
    background: var(--brand-navy);
    color: #ffffff;
    border-color: transparent;
}

.booking-choice-shell,
.booking-shell {
    width: min(1180px, 100%);
    margin: 0 auto;
}

.booking-choice-shell {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(300px, 0.6fr);
    gap: 24px;
    align-items: start;
    padding-top: 18px;
}

.booking-choice-copy {
    display: grid;
    gap: 22px;
    padding: 34px;
    border: 1px solid rgba(31, 63, 104, 0.12);
    border-radius: 0;
    background: #ffffff;
    box-shadow: none;
}

.booking-kicker {
    margin: 0;
    color: var(--booking-accent);
    font-size: 12px;
    font-weight: 900;
    text-transform: uppercase;
}

.booking-choice-copy h1,
.booking-sidebar h1 {
    margin: 0;
    color: var(--ink-strong);
    font-size: 42px;
    line-height: 1.12;
}

.booking-choice-copy p,
.booking-sidebar p,
.booking-form-heading p,
.booking-success p,
.booking-share-box p {
    margin: 0;
    color: var(--muted);
    line-height: 1.65;
}

.booking-specialty-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.booking-specialty-card {
    display: grid;
    gap: 12px;
    min-height: 192px;
    padding: 22px;
    border: 1px solid color-mix(in srgb, var(--specialty-color) 30%, var(--line));
    border-left: 5px solid var(--specialty-color);
    border-radius: 0;
    background: #ffffff;
    color: var(--ink);
}

/* Flat and sharp: the card answers a hover with its own colour, never a lift
   or a shadow. */
.booking-specialty-card:hover {
    border-color: var(--specialty-color);
    background: color-mix(in srgb, var(--specialty-color) 5%, #ffffff);
}

.booking-specialty-icon {
    display: inline-grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border-radius: 0;
    color: var(--specialty-color);
    background: color-mix(in srgb, var(--specialty-color) 12%, #ffffff);
}

.booking-specialty-card strong {
    color: var(--ink-strong);
    font-size: 20px;
}

.booking-specialty-card small {
    color: var(--muted);
    font-size: 13px;
    line-height: 1.55;
}

.booking-shell {
    display: grid;
    grid-template-columns: minmax(300px, 0.72fr) minmax(0, 1.28fr);
    gap: 24px;
    align-items: start;
    padding-top: 18px;
}

.booking-sidebar {
    position: sticky;
    top: 18px;
    display: grid;
    gap: 22px;
    padding: 30px;
    border-radius: 0 !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    background: rgba(31, 63, 104, 0.95) !important;
    color: #ffffff;
    box-shadow: none !important;
    overflow: hidden;
}

.booking-sidebar .booking-kicker,
.booking-sidebar h1,
.booking-sidebar p {
    color: #ffffff;
}

.booking-sidebar p {
    color: rgba(255, 255, 255, 0.76);
}

.booking-clinic-list,
.booking-confirmation {
    display: grid;
    gap: 12px;
    margin: 0;
}

/* Tiles over the navy. A white overlay would wash the brand blue into a
   lighter blue that is not ours, so these use the deepened brand blue with its
   brand border, the same pair every field in the app uses. Flat and sharp. */
.booking-clinic-list div,
.booking-confirmation div {
    display: grid;
    gap: 4px;
    padding: 12px;
    border-radius: 0;
    background: #152b49;
    border: 1px solid #2b4a77;
}

.booking-clinic-list dt,
.booking-confirmation dt {
    color: rgba(255, 255, 255, 0.62);
    font-size: 11px;
    font-weight: 900;
    text-transform: uppercase;
}

.booking-clinic-list dd,
.booking-confirmation dd {
    margin: 0;
    color: #ffffff;
    font-weight: 800;
    overflow-wrap: anywhere;
}

.booking-share-box {
    display: grid;
    gap: 12px;
    padding: 16px;
    border: 1px solid #2b4a77;
    border-radius: 0;
    background: #152b49;
}

.booking-share-box-large {
    padding: 24px;
    background: #ffffff;
    color: var(--ink);
    border-color: rgba(31, 63, 104, 0.12);
    box-shadow: none;
}

.booking-share-box span {
    color: rgba(255, 255, 255, 0.78);
    font-size: 12px;
    font-weight: 900;
}

.booking-share-box-large span {
    color: var(--muted);
}

.booking-share-box h2 {
    margin: 0;
    color: var(--ink-strong);
    font-size: 24px;
}

.booking-copy-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px;
}

.booking-copy-row input {
    min-height: 42px;
    border-radius: 0;
    background: rgba(255, 255, 255, 0.92);
    color: var(--ink);
    font-size: 13px;
}

.booking-sidebar .booking-copy-row input {
    background: #152b49;
    border: 1px solid #2b4a77;
    color: #ffffff;
    border-color: rgba(255, 255, 255, 0.18);
}

.booking-share-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.booking-share-actions.compact {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 4px;
}

.booking-share-actions.compact a {
    color: rgba(255, 255, 255, 0.9) !important;
    font-weight: 600 !important;
    font-size: 12px !important;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 0;
    background: #152b49;
    border: 1px solid #2b4a77;
    transition: background 0.2s ease, border-color 0.2s ease;
}

.booking-share-actions.compact a:hover {
    color: #ffffff !important;
    background: #1f3f68;
    border-color: var(--brand-green, #36a66a);
}

.booking-share-actions.compact a svg {
    width: 14px;
    height: 14px;
    fill: currentColor;
    flex-shrink: 0;
}

.booking-card {
    padding: 40px !important;
    border: 1px solid rgba(15, 23, 42, 0.15) !important;
    border-radius: 0 !important;
    background: #ffffff !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
}

.booking-form-heading {
    display: grid;
    gap: 8px;
    margin-bottom: 22px;
}

.booking-form-heading h2,
.booking-success h2 {
    margin: 0;
    color: var(--ink-strong);
    font-size: 28px;
    line-height: 1.2;
}

.booking-form {
    display: grid;
    gap: 16px;
}

.booking-field-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.booking-field-grid.three {
    grid-template-columns: 0.82fr 0.9fr 1.28fr;
}

.booking-field-grid.single {
    grid-template-columns: 1fr;
}

.booking-field {
    display: grid;
    gap: 6px;
    color: var(--ink);
    font-weight: 600;
}

.booking-field span {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    color: #475569 !important;
    font-size: 12.5px !important;
    font-weight: 600 !important;
}

.booking-field input,
.booking-field select,
.booking-field textarea {
    min-height: 40px;
    border-radius: 0 !important;
    background: #ffffff !important;
    border: 1px solid #cbd5e1 !important;
    padding: 8px 12px !important;
    font-size: 13px !important;
    transition: border-color 0.15s ease-in-out !important;
    color: #0f172a !important;
    width: 100%;
    box-shadow: none !important;
}

.booking-field input::placeholder,
.booking-field select::placeholder,
.booking-field textarea::placeholder {
    color: #94a3b8 !important;
    font-size: 13px !important;
    font-weight: 400 !important;
    opacity: 1 !important;
}

.booking-field input:focus,
.booking-field select:focus,
.booking-field textarea:focus {
    border-color: var(--booking-accent) !important;
    background: #ffffff !important;
    box-shadow: none !important;
    outline: none !important;
}

.booking-field textarea {
    resize: vertical;
}

/* The branded select replaces the native one with a div, so the rule above
   never reaches it and it fell back to the dashboard panel token (grey
   #f3f4f8 in light, charcoal #161616 in dark). A dropdown must look like the
   text field beside it, so it is pinned to the same paint here, and to brand
   blue in dark mode via eyeston-select.css. */
.booking-page .eyeston-select-trigger {
    min-height: 40px;
    padding: 8px 12px;
    border-radius: 0;
    background: #ffffff;
    border: 1px solid #cbd5e1;
    color: #0f172a;
    font-size: 13px;
}

.booking-page .eyeston-select > select:focus ~ .eyeston-select-trigger,
.booking-page .eyeston-select.is-open .eyeston-select-trigger {
    border-color: var(--booking-accent);
    outline: none;
}

.booking-field.has-error input,
.booking-field.has-error select,
.booking-field.has-error textarea {
    border-color: var(--danger);
}

.booking-field small {
    color: var(--danger);
    font-size: 12px;
    font-weight: 800;
}

.booking-alert {
    margin-bottom: 16px;
    padding: 12px 14px;
    border-radius: 0;
    font-weight: 800;
}

.booking-alert.error {
    background: rgba(180, 35, 24, 0.1);
    color: var(--danger);
}

.booking-form-section {
    margin-bottom: 28px;
    padding-bottom: 24px;
    border-bottom: 1px solid rgba(31, 63, 104, 0.08);
}

.booking-form-section:last-of-type {
    margin-bottom: 16px;
    padding-bottom: 0;
    border-bottom: none;
}

.booking-section-title {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 15px;
    font-weight: 800;
    color: var(--ink-strong);
    margin: 0 0 20px;
}

.section-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 0;
    background: var(--booking-accent);
    color: #ffffff;
    font-size: 11px;
    font-weight: 900;
    box-shadow: none;
}

.booking-form-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 6px;
}

/* Pre-visit form offer on the booking confirmation: flat, green rail, sharp. */
.booking-intake {
    border: 1px solid var(--line, #e2e8f0);
    border-left: 3px solid var(--brand-green, #36a66a);
    padding: 14px 16px;
    margin: 18px 0 6px;
}

.booking-intake-title {
    margin: 0 0 6px;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--brand-green, #36a66a);
}

.booking-intake-text {
    margin: 0 0 12px;
    font-size: 13.5px;
    line-height: 1.55;
}

.booking-intake-note {
    margin: 10px 0 0;
    font-size: 11.5px;
    color: var(--muted, #5d6f84);
}

.booking-button,
.booking-icon-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 42px;
    border: 0;
    border-radius: 0 !important;
    background: linear-gradient(135deg, var(--booking-accent), color-mix(in srgb, var(--booking-accent) 80%, #000000)) !important;
    color: #ffffff !important;
    font-weight: 700 !important;
    box-shadow: none !important;
    transition: opacity 0.2s ease-in-out !important;
}

.booking-button {
    padding: 0 24px;
}

.booking-icon-button {
    width: 42px;
    padding: 0;
}

.booking-button.secondary {
    background: #ffffff !important;
    color: #1f3f68 !important;
    border: 1px solid #cbd5e1 !important;
    box-shadow: none !important;
}

.booking-button.ghost {
    background: transparent;
    color: var(--brand-navy);
    border: 1px solid var(--line-strong);
}

.booking-button:hover,
.booking-icon-button:hover {
    transform: none !important;
    opacity: 0.9 !important;
}

.booking-page .q-icon {
    width: 18px;
    height: 18px;
    flex: 0 0 auto;
}

.booking-success {
    display: grid;
    gap: 14px;
    place-items: start;
}

.booking-success-icon {
    display: inline-grid;
    place-items: center;
    width: 50px;
    height: 50px;
    border-radius: 0;
    background: color-mix(in srgb, var(--booking-accent) 12%, #ffffff);
    color: var(--booking-accent);
}

.booking-success-icon .q-icon {
    width: 26px;
    height: 26px;
}

.booking-footer {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: min(1180px, 100%);
    margin: 48px auto 0;
    padding: 24px 0;
    border-top: 1px dashed rgba(255, 255, 255, 0.24);
    color: rgba(255, 255, 255, 0.82);
    text-align: center;
    font-size: 13px;
}

.booking-footer p {
    margin: 0;
    color: rgba(255, 255, 255, 0.92);
    font-weight: 600;
}

.booking-footer div {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    color: rgba(255, 255, 255, 0.68);
}

.booking-footer a {
    color: #ffffff;
    font-weight: 750;
    text-decoration: none;
}

.booking-footer a:hover {
    opacity: 0.82;
}

.booking-confirmation {
    width: 100%;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin-top: 8px;
}

.booking-confirmation div {
    background: #f8fafc;
    border: 1px solid var(--line);
}

.booking-confirmation dt {
    color: var(--muted);
}

.booking-confirmation dd {
    color: var(--ink-strong);
}

/* Dark mode on a PUBLIC page stays blue. The charcoal family (#1a1a1a,
   #202020, #2c2c2c) is dashboard-only under the charcoal boundary, and this
   page is the first thing a patient ever sees of the brand, so it keeps the
   brand navy and the deepened brand blue for every surface and field. */
:root[data-theme="dark"] .booking-body,
:root[data-theme="dark"] .booking-page {
    background: linear-gradient(115deg, #14284a 0 44%, #1d6b48 44.2% 100%) !important;
}
:root[data-theme="dark"] .booking-card {
    background: #0f2038 !important;
    border-color: #2b4a77 !important;
    box-shadow: none !important;
}
:root[data-theme="dark"] .booking-field input,
:root[data-theme="dark"] .booking-field select,
:root[data-theme="dark"] .booking-field textarea {
    background: #152b49 !important;
    border-color: #2b4a77 !important;
    color: #e6edf5 !important;
    box-shadow: none !important;
}
:root[data-theme="dark"] .booking-field input:focus,
:root[data-theme="dark"] .booking-field select:focus,
:root[data-theme="dark"] .booking-field textarea:focus {
    background: #152b49 !important;
    border-color: var(--brand-green, #36a66a) !important;
    box-shadow: none !important;
}

:root[data-theme="dark"] .booking-choice-copy,
:root[data-theme="dark"] .booking-specialty-card,
:root[data-theme="dark"] .booking-share-box-large {
    background: #0f2038;
    border-color: #2b4a77;
    box-shadow: none !important;
}

:root[data-theme="dark"] .booking-specialty-link,
:root[data-theme="dark"] .booking-button.secondary,
:root[data-theme="dark"] .booking-button.ghost {
    background: #152b49;
    color: #ffffff;
    border-color: #2b4a77;
}

:root[data-theme="dark"] .booking-brand strong,
:root[data-theme="dark"] .booking-choice-copy h1,
:root[data-theme="dark"] .booking-form-heading h2,
:root[data-theme="dark"] .booking-success h2,
:root[data-theme="dark"] .booking-specialty-card strong,
:root[data-theme="dark"] .booking-field span,
:root[data-theme="dark"] .booking-field {
    color: #ffffff;
}

:root[data-theme="dark"] .booking-brand small,
:root[data-theme="dark"] .booking-choice-copy p,
:root[data-theme="dark"] .booking-form-heading p,
:root[data-theme="dark"] .booking-success p,
:root[data-theme="dark"] .booking-specialty-card small {
    color: #93a1b3;
}

:root[data-theme="dark"] .booking-field input,
:root[data-theme="dark"] .booking-field select,
:root[data-theme="dark"] .booking-field textarea,
:root[data-theme="dark"] .booking-copy-row input,
:root[data-theme="dark"] .booking-confirmation div {
    background: #152b49;
    border-color: #2b4a77;
    color: #ffffff;
}

:root[data-theme="dark"] .booking-confirmation dt {
    color: #93a1b3;
}

:root[data-theme="dark"] .booking-confirmation dd {
    color: #ffffff;
}

@media (max-width: 980px) {
    .booking-choice-shell,
    .booking-shell {
        grid-template-columns: 1fr;
    }

    .booking-sidebar {
        position: relative;
        top: auto;
    }

    .booking-confirmation {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 720px) {
    .booking-page {
        padding: 0 16px 28px;
    }

    .booking-header {
        align-items: flex-start;
        flex-direction: column;
    }

    .booking-nav {
        justify-content: flex-start;
        width: 100%;
    }

    .booking-specialty-link,
    .booking-signin {
        flex: 1 1 auto;
        justify-content: center;
    }

    .booking-choice-copy,
    .booking-sidebar,
    .booking-card,
    .booking-share-box-large {
        padding: 22px;
    }

    .booking-choice-copy h1,
    .booking-sidebar h1 {
        font-size: 32px;
    }

    .booking-specialty-grid,
    .booking-field-grid,
    .booking-field-grid.three,
    .booking-confirmation {
        grid-template-columns: 1fr;
    }

    .booking-form-actions {
        justify-content: stretch;
    }

    .booking-form-actions .booking-button,
    .booking-form-actions a {
        width: 100%;
    }
}

@media (max-width: 460px) {
    .booking-brand {
        align-items: flex-start;
        flex-direction: column;
    }

    .booking-brand-mark {
        width: min(280px, 86vw) !important;
    }

    .booking-copy-row {
        grid-template-columns: 1fr;
    }

    .booking-copy-row .booking-icon-button,
    .booking-copy-row .booking-button {
        width: 100%;
    }
}

:root[data-theme="dark"] {
    color-scheme: dark;
    --brand-split: linear-gradient(115deg, #1f3f68 0 49.8%, #36a66a 50.2% 100%);
    --bg: #121212;
    --bg-soft: #181818;
    --panel: #161616;
    --panel-solid: #161616;
    --panel-raised: #202020;
    --ink: #cccccc;
    --ink-strong: #ffffff;
    --muted: #a7a29a;
    --line: #2c2c2c;
    --line-strong: #3c3c3c;
    --accent: #cccccc;
    --accent-2: #dddddd;
    --accent-3: #eeeeee;
    --accent-soft: rgba(255, 255, 255, 0.08);
    --danger: #ef4444;
    --success: #a7a29a;
    --shadow: 0 24px 80px rgba(0, 0, 0, 0.5);
    --shadow-soft: 0 14px 40px rgba(0, 0, 0, 0.4);
    --sidebar: #161616;
    --sidebar-ink: #f7f6f3;
    --sidebar-muted: #a7a29a;
    --input: #202020;
    --focus: 0 0 0 4px rgba(255, 255, 255, 0.15);
    --old-bg: #121212;
    --old-card: #161616;
    --old-card-soft: #1a1a1a;
    --old-border: #2c2c2c;
    --old-text: #cccccc;
    --old-muted: #a7a29a;
}

* {
    box-sizing: border-box;
}

html {
    min-height: 100%;
    background: var(--bg);
}

body {
    min-height: 100vh;
    margin: 0;
    background: var(--bg);
    color: var(--ink);
    font-family: "SF Pro Display", "Geist Sans", "Helvetica Neue", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    letter-spacing: 0;
}

:root[data-theme="dark"] body {
    background: #050b14;
}

a {
    color: inherit;
    text-decoration: none;
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

button,
input,
select,
textarea {
    font: inherit;
}

.auth-body {
    display: grid;
    min-height: 100vh;
    place-items: center;
    padding: 24px;
}

.landing-body {
    min-height: 100vh;
}

.landing {
    width: 100%;
    min-height: 100vh;
}

.landing-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: min(1160px, calc(100% - 40px));
    margin: 0 auto;
    padding: 24px 0;
}

.landing-links {
    display: flex;
    align-items: center;
    gap: 20px;
    color: var(--muted);
    font-weight: 750;
}

.brand {
    display: inline-flex;
    align-items: center;
    gap: 14px;
}

.brand strong {
    color: var(--ink-strong);
}

.brand small {
    display: block;
    color: var(--muted);
    font-size: 12px;
}

.brand-mark {
    display: inline-flex;
    position: relative;
    width: 190px;
    height: 72px;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.sidebar-brand-mark {
    width: 220px;
    height: 84px;
}

.landing-brand-mark {
    width: min(430px, 46vw);
    height: auto;
    aspect-ratio: 430 / 248;
    max-width: 100%;
}

.brand-logo {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.brand-logo-dark {
    display: none;
}

:root[data-theme="dark"] .brand-logo-light {
    display: none;
}

:root[data-theme="dark"] .brand-logo-dark {
    display: block;
}

.hero {
    display: grid;
    min-height: calc(100vh - 96px);
    place-items: center;
    padding: 28px 20px 72px;
}

.hero > div {
    width: min(920px, 100%);
    text-align: center;
}

.hero h1 {
    max-width: 880px;
    margin: 14px auto;
    color: var(--ink-strong);
    font-size: clamp(44px, 7vw, 80px);
    line-height: 0.98;
}

.hero p {
    width: min(720px, 100%);
    margin: 0 auto;
    color: var(--muted);
    font-size: 19px;
    line-height: 1.7;
}

.hero-actions {
    display: flex;
    justify-content: center;
    gap: 16px;
    margin-top: 30px;
    flex-wrap: wrap;
}

.url-preview {
    align-self: center;
    padding: 10px 14px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--panel);
    color: var(--muted);
    font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
    box-shadow: var(--shadow-soft);
}

.auth-card {
    width: min(460px, 100%);
    padding: 34px;
    background: var(--panel-raised);
    border: 1px solid var(--line-strong);
    border-radius: 18px;
    box-shadow: var(--shadow);
    backdrop-filter: blur(24px);
}

.auth-brand {
    margin-bottom: 28px;
}

.auth-card h1 {
    margin: 0 0 8px;
    color: var(--ink-strong);
    font-size: 34px;
}

.auth-card p,
.card p {
    color: var(--muted);
    line-height: 1.65;
}

.form {
    display: grid;
    gap: 16px;
    margin-top: 24px;
}

.form label {
    display: grid;
    gap: 8px;
    color: var(--ink);
    font-weight: 700;
}

input,
select,
textarea {
    width: 100%;
    border: 1px solid var(--line-strong);
    border-radius: 12px;
    padding: 12px 14px;
    background: var(--input);
    color: var(--ink);
    outline: none;
}

input::placeholder,
textarea::placeholder {
    /* Hint, not content: a lighter (300) weight so it reads as thin, plus
       the muted colour softened to ~65% opacity so it recedes from the
       bold field label while the format examples ("e.g., 6/6") stay
       legible for newer staff. */
    color: color-mix(in srgb, var(--muted), transparent 35%);
    font-weight: 300;
}

input:focus,
select:focus,
textarea:focus {
    border-color: var(--accent);
    box-shadow: var(--focus);
}

.button,
button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 0 18px;
    border: 0;
    border-radius: 4px;
    background: var(--brand-navy);
    color: #fff;
    font-weight: 800;
    cursor: pointer;
    box-shadow: none;
}

.button:hover,
button:hover {
    transform: translateY(-1px);
}

.button.secondary {
    background: var(--panel-raised);
    color: var(--ink-strong);
    border: 1px solid var(--line-strong);
    box-shadow: var(--shadow-soft);
}

.button.ghost {
    background: transparent;
    color: var(--ink-strong);
    border: 1px solid var(--line-strong);
    box-shadow: none;
}

.theme-toggle {
    gap: 8px;
    min-height: 38px;
    padding: 0 12px;
    background: var(--panel-raised);
    color: var(--ink);
    border: 1px solid var(--line-strong);
    box-shadow: var(--shadow-soft);
}

.theme-toggle-icon {
    position: relative;
    width: 30px;
    height: 18px;
    border-radius: 999px;
    background: var(--accent-soft);
    border: 1px solid var(--line-strong);
}

.theme-toggle-icon::after {
    content: "";
    position: absolute;
    top: 2px;
    left: 2px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--accent);
    transition: transform 180ms ease;
}

:root[data-theme="dark"] .theme-toggle-icon::after {
    transform: translateX(12px);
}

.floating-theme-toggle {
    position: fixed;
    top: 18px;
    right: 18px;
    z-index: 20;
}

.demo-users {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin-top: 22px;
    color: var(--muted);
    font-size: 13px;
}

.demo-users strong {
    grid-column: 1 / -1;
    color: var(--ink);
}

.demo-users button {
    min-height: 36px;
    padding: 0 10px;
    background: var(--accent-soft);
    color: var(--accent);
    border: 1px solid var(--line-strong);
    box-shadow: none;
    font-size: 12px;
}

.password-field {
    position: relative;
    display: block;
}

.password-field input {
    padding-right: 72px;
}

.password-toggle {
    position: absolute;
    top: 50%;
    right: 8px;
    min-height: 30px;
    padding: 0 10px;
    border-radius: 8px;
    background: transparent;
    color: var(--muted);
    box-shadow: none;
    transform: translateY(-50%);
    font-size: 12px;
}

.password-toggle:hover {
    background: var(--accent-soft);
    transform: translateY(-50%);
}

.auth-footnote {
    margin-top: 24px;
    text-align: center;
}

.auth-footnote p {
    margin: 8px 0 0;
    color: var(--muted);
    font-size: 14px;
}

.auth-footnote a {
    color: var(--accent);
    font-weight: 800;
}

.app-shell {
    display: grid;
    grid-template-columns: 272px 1fr;
    min-height: 100vh;
}

.sidebar {
    position: sticky;
    top: 0;
    height: 100vh;
    padding: 22px;
    background: var(--sidebar);
    color: var(--sidebar-ink);
    border-right: 1px solid rgba(255, 255, 255, 0.1);
}

.sidebar .brand strong {
    color: var(--sidebar-ink);
}

.sidebar .brand small {
    color: var(--sidebar-muted);
}

.sidebar .brand-mark {
    color: #ffffff;
}

.nav {
    display: grid;
    gap: 7px;
    margin-top: 34px;
}

.nav a {
    padding: 12px 13px;
    border-radius: 12px;
    color: var(--sidebar-muted);
}

.nav a:hover {
    background: rgba(255, 255, 255, 0.11);
    color: #fff;
}

.main {
    padding: 28px;
}

.topbar {
    display: flex;
    justify-content: space-between;
    gap: 24px;
    align-items: center;
    margin-bottom: 24px;
}

.topbar h1 {
    margin: 4px 0 0;
    color: var(--ink-strong);
    font-size: 30px;
}

.eyebrow {
    margin: 0;
    color: var(--accent);
    font-size: 12px;
    font-weight: 850;
    letter-spacing: 0;
    text-transform: uppercase;
}

.user-chip {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px 8px 14px;
    background: var(--panel-raised);
    border: 1px solid var(--line-strong);
    border-radius: 999px;
    box-shadow: var(--shadow-soft);
}

.user-chip strong {
    color: var(--muted);
    font-size: 12px;
    text-transform: uppercase;
}

.user-chip button:not(.theme-toggle) {
    min-height: 32px;
    padding: 0 12px;
    border-radius: 999px;
}

.grid {
    display: grid;
    gap: 18px;
}

.landing-section {
    width: min(1120px, calc(100% - 40px));
    margin: 0 auto 46px;
}

.pricing-card {
    display: grid;
    gap: 12px;
}

.pricing-card.featured {
    border-color: var(--accent);
    box-shadow: var(--shadow-soft);
}

.pricing-card .button {
    margin-top: 8px;
}

.landing-flash {
    width: min(1120px, calc(100% - 40px));
    margin: 12px auto 0;
    padding: 12px 14px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 760;
}

.landing-flash.success {
    border: 1px solid rgba(54, 166, 106, 0.28);
    background: rgba(54, 166, 106, 0.11);
    color: #155e3d;
}

.landing-flash.error {
    border: 1px solid rgba(185, 28, 28, 0.28);
    background: rgba(185, 28, 28, 0.09);
    color: #991b1b;
}

.access-request-section {
    scroll-margin-top: 90px;
}

.access-request-form {
    display: grid;
    gap: 14px;
    padding: 22px;
    border: 1px solid var(--line-strong);
    border-radius: 8px;
    background: var(--panel-raised);
    box-shadow: var(--shadow-soft);
}

.access-request-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
}

.access-request-form label {
    display: grid;
    gap: 7px;
    color: var(--ink);
    font-size: 13px;
    font-weight: 760;
}

.access-request-form label span {
    color: var(--ink-strong);
}

.access-request-form input,
.access-request-form select,
.access-request-form textarea {
    min-height: 40px;
    border-radius: 6px;
}

.access-request-form .button {
    justify-self: start;
}

:root[data-theme="dark"] .access-request-form {
    background: var(--old-card);
    border-color: var(--old-border);
    box-shadow: none;
}

:root[data-theme="dark"] .access-request-form label span {
    color: #ffffff;
}

:root[data-theme="dark"] .landing-flash.success {
    color: #9be7bb;
}

:root[data-theme="dark"] .landing-flash.error {
    color: #fca5a5;
}

@media (max-width: 900px) {
    .access-request-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 640px) {
    .access-request-grid {
        grid-template-columns: 1fr;
    }

    .access-request-form .button {
        width: 100%;
    }
}

.landing-cta {
    margin-top: 44px;
    padding: 64px 20px;
    background: var(--brand-navy-deep);
    color: #ffffff;
    text-align: center;
}

.landing-cta h2 {
    margin: 0 0 12px;
    font-size: 34px;
}

.landing-cta p {
    width: min(680px, 100%);
    margin: 0 auto;
    color: #d8d7d2;
    font-size: 18px;
}

.button.light,
.landing-cta .button.ghost {
    color: #ffffff;
    border-color: rgba(255, 255, 255, 0.7);
}

.landing-footer {
    display: grid;
    grid-template-columns: 2fr repeat(3, 1fr);
    gap: 28px;
    padding: 46px max(20px, calc((100% - 1120px) / 2));
    background: #06101d;
    color: #ffffff;
}

.landing-footer p,
.landing-footer a,
.landing-footer span {
    display: block;
    margin-top: 10px;
    color: #9ca3af;
}

.landing-footer h4 {
    margin: 0 0 10px;
}

.landing-footer .brand strong {
    color: #ffffff;
}

.landing-footer .brand-mark {
    color: #ffffff;
}

.landing-footer .landing-brand-mark {
    width: min(360px, 100%);
}

.landing-footer .brand-logo-light {
    display: none;
}

.landing-footer .brand-logo-dark {
    display: block;
}

.section-heading {
    width: min(720px, 100%);
    margin-bottom: 18px;
}

.section-heading h2 {
    margin: 8px 0;
    color: var(--ink-strong);
    font-size: 34px;
}

.section-heading p:not(.eyebrow) {
    color: var(--muted);
    line-height: 1.65;
}

.stats-strip {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px;
}

.stats-strip article {
    padding: 22px;
    text-align: center;
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 16px;
    box-shadow: var(--shadow-soft);
}

.stats-strip strong {
    display: block;
    color: var(--accent);
    font-size: 30px;
}

.stats-strip span {
    color: var(--muted);
}

.grid.two {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.grid.three {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.grid.four {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.card,
.stat-card {
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 16px;
    padding: 22px;
    box-shadow: var(--shadow-soft);
    backdrop-filter: blur(22px);
}

.card h2,
.card h3 {
    margin: 10px 0 8px;
    color: var(--ink-strong);
}

.specialty-card {
    position: relative;
    overflow: hidden;
}

.specialty-card::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 5px;
    background: var(--accent);
}

.intro {
    margin-bottom: 18px;
    border-left: 5px solid var(--accent);
}

.compact {
    min-height: 122px;
}

.card-link {
    display: inline-block;
    margin-top: 12px;
    color: var(--accent);
    font-weight: 850;
}

.pill {
    display: inline-flex;
    align-items: center;
    min-height: 27px;
    padding: 0 10px;
    border-radius: 999px;
    background: var(--accent-soft);
    color: var(--accent);
    font-size: 12px;
    font-weight: 850;
    text-transform: uppercase;
}

.stats {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px;
    margin-bottom: 18px;
}

.stat-card span {
    color: var(--muted);
    font-size: 13px;
    font-weight: 800;
}

.stat-card strong {
    display: block;
    margin-top: 10px;
    color: var(--ink-strong);
    font-size: 31px;
}

.section-header {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    align-items: center;
}

.table-wrap {
    overflow-x: auto;
    margin-top: 18px;
    border: 1px solid var(--line);
    border-radius: 0;
}

.module-summary {
    margin-top: 16px;
}

.module-summary article {
    padding: 16px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: var(--panel-raised);
}

.module-summary span {
    color: var(--muted);
    font-size: 13px;
    font-weight: 800;
}

.module-summary strong {
    display: block;
    margin-top: 8px;
    color: var(--ink-strong);
    font-size: 26px;
}

.workflow-page {
    width: min(1280px, 100%);
    margin: 0 auto;
    padding: 24px;
}

.workflow-hero {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 20px;
    padding: 24px;
    border: 1px solid var(--old-border);
    border-left: 5px solid var(--accent);
    border-radius: 10px;
    background: var(--old-card);
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.08);
}

.workflow-hero h1 {
    margin: 10px 0 8px;
    color: var(--old-text);
    font-size: 32px;
}

.workflow-hero p {
    max-width: 760px;
    margin: 0;
    color: var(--old-muted);
    line-height: 1.65;
}

.workflow-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 10px;
}

.workflow-stats {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
    margin-bottom: 20px;
}

.superadmin-page {
    width: min(1480px, 100%);
    margin: 0 auto;
    padding: 24px;
}

.devportal-page {
    width: min(1480px, 100%);
    margin: 0 auto;
    padding: 24px;
}

.superadmin-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 18px;
    align-items: end;
    margin-bottom: 18px;
    padding-bottom: 18px;
    border-bottom: 1px solid var(--old-border);
}

.devportal-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 18px;
    align-items: end;
    margin-bottom: 18px;
    padding: 20px;
    border: 1px solid var(--old-border);
    border-left: 5px solid #36a66a;
    border-radius: 8px;
    background: var(--old-card-soft);
}

.superadmin-kicker,
.superadmin-label,
.superadmin-timestamp {
    color: var(--old-muted);
    font-size: 11px;
    font-weight: 760;
    letter-spacing: 0;
    text-transform: uppercase;
}

.superadmin-hero h1 {
    margin: 8px 0 8px;
    color: var(--old-text);
    font-size: 34px;
    line-height: 1.08;
    letter-spacing: 0;
}

.devportal-hero h1 {
    margin: 8px 0 8px;
    color: var(--old-text);
    font-size: 34px;
    line-height: 1.08;
    letter-spacing: 0;
}

.superadmin-hero p {
    max-width: 860px;
    margin: 0;
    color: var(--old-muted);
    line-height: 1.55;
}

.devportal-hero p {
    max-width: 860px;
    margin: 0;
    color: var(--old-muted);
    line-height: 1.55;
}

.superadmin-hero-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 10px;
}

.superadmin-kpis {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    margin-bottom: 18px;
}

.superadmin-kpi {
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr);
    gap: 12px;
    min-height: 118px;
    align-items: start;
    padding: 16px;
    border: 1px solid var(--old-border);
    border-radius: 8px;
    background: var(--old-card-soft);
}

.superadmin-kpi-icon {
    display: grid;
    width: 38px;
    height: 38px;
    place-items: center;
    border-radius: 8px;
    color: #1f3f68;
    background: rgba(31, 63, 104, 0.08);
}

.superadmin-kpi-icon svg {
    width: 19px;
    height: 19px;
}

.superadmin-kpi span,
.superadmin-kpi small {
    display: block;
    color: var(--old-muted);
    font-size: 12px;
    line-height: 1.35;
}

.superadmin-kpi strong {
    display: block;
    margin: 5px 0 5px;
    color: var(--old-text);
    font-size: 26px;
    line-height: 1;
}

.tone-green .superadmin-kpi-icon,
.superadmin-kpi.tone-green .superadmin-kpi-icon {
    color: #16834b;
    background: rgba(54, 166, 106, 0.12);
}

.tone-amber .superadmin-kpi-icon,
.superadmin-kpi.tone-amber .superadmin-kpi-icon {
    color: #b45309;
    background: rgba(245, 158, 11, 0.14);
}

.tone-red .superadmin-kpi-icon,
.superadmin-kpi.tone-red .superadmin-kpi-icon {
    color: #b42318;
    background: rgba(239, 68, 68, 0.12);
}

.superadmin-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 380px;
    gap: 18px;
    align-items: start;
}

.devportal-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 380px;
    gap: 18px;
    align-items: start;
}

.superadmin-main,
.superadmin-side {
    display: grid;
    gap: 18px;
}

.superadmin-section {
    min-width: 0;
    border: 1px solid var(--old-border);
    border-radius: 8px;
    background: var(--old-card-soft);
    overflow: hidden;
}

.superadmin-section-head {
    display: flex;
    min-height: 64px;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 16px 18px;
    border-bottom: 1px solid var(--old-border);
}

.superadmin-section-head h2 {
    margin: 3px 0 0;
    color: var(--old-text);
    font-size: 17px;
    line-height: 1.2;
}

.superadmin-section-head a {
    color: #1f3f68;
    font-size: 13px;
    font-weight: 760;
}

.superadmin-product-list,
.attention-list,
.check-list {
    display: grid;
}

.superadmin-product-row {
    display: grid;
    grid-template-columns: 46px minmax(0, 1fr) auto;
    gap: 14px;
    align-items: center;
    padding: 16px 18px;
    color: inherit;
    border-bottom: 1px solid var(--old-border);
}

.superadmin-product-row:last-child,
.attention-row:last-child,
.check-row:last-child {
    border-bottom: 0;
}

.superadmin-product-row:hover,
.attention-row:hover {
    background: var(--old-hover);
}

.product-mark {
    display: grid;
    width: 46px;
    height: 46px;
    place-items: center;
    border-radius: 8px;
    color: #ffffff;
    font-size: 12px;
    font-weight: 850;
}

.product-eye {
    background: #1f3f68;
}

.product-dental {
    background: #36a66a;
}

.product-main {
    min-width: 0;
}

.product-main div {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.product-main strong {
    color: var(--old-text);
    font-size: 15px;
}

.product-main span,
.product-main p,
.product-metrics span {
    color: var(--old-muted);
    font-size: 12px;
}

.product-main span {
    padding: 2px 7px;
    border: 1px solid var(--old-border);
    border-radius: 999px;
}

.product-main p {
    margin: 5px 0 0;
    line-height: 1.45;
}

.product-metrics {
    display: grid;
    grid-template-columns: repeat(3, auto);
    gap: 10px;
    text-align: right;
}

.product-metrics b {
    color: var(--old-text);
}

.superadmin-table-wrap {
    overflow-x: auto;
}

.superadmin-table {
    width: 100%;
    min-width: 860px;
    border-collapse: collapse;
}

.superadmin-table th,
.superadmin-table td {
    padding: 14px 18px;
    border-bottom: 1px solid var(--old-border);
    text-align: left;
    vertical-align: middle;
}

.superadmin-table th {
    color: var(--old-muted);
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
}

.superadmin-table td {
    color: var(--old-text);
    font-size: 13px;
}

.superadmin-table td strong,
.superadmin-table td span {
    display: block;
}

.superadmin-table td span {
    color: var(--old-muted);
    font-size: 12px;
}

.superadmin-badge,
.status-pill {
    display: inline-flex !important;
    width: fit-content;
    min-height: 24px;
    align-items: center;
    padding: 0 8px;
    border: 1px solid var(--old-border);
    border-radius: 999px;
    color: var(--old-text) !important;
    font-size: 11px !important;
    font-weight: 760;
}

.status-active {
    border-color: rgba(54, 166, 106, 0.28);
    background: rgba(54, 166, 106, 0.1);
}

.status-trial {
    border-color: rgba(245, 158, 11, 0.32);
    background: rgba(245, 158, 11, 0.12);
}

.status-suspended {
    border-color: rgba(239, 68, 68, 0.28);
    background: rgba(239, 68, 68, 0.1);
}

.usage-cell {
    display: grid;
    min-width: 96px;
    gap: 6px;
}

.usage-cell > span {
    color: var(--old-text) !important;
    font-size: 12px;
    font-weight: 720;
}

.usage-track {
    height: 6px;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(15, 23, 42, 0.08);
}

.usage-track i {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #1f3f68, #36a66a);
}

.plan-grid {
    display: grid;
}

.plan-row {
    display: grid;
    grid-template-columns: 1.1fr repeat(4, minmax(92px, 1fr));
    gap: 10px;
    align-items: center;
    padding: 14px 18px;
    border-bottom: 1px solid var(--old-border);
}

.plan-row:last-child {
    border-bottom: 0;
}

.plan-row strong {
    color: var(--old-text);
}

.plan-row span {
    color: var(--old-muted);
    font-size: 12px;
}

.attention-row {
    display: grid;
    gap: 3px;
    padding: 14px 18px;
    color: inherit;
    border-bottom: 1px solid var(--old-border);
    border-left: 4px solid #1f3f68;
}

.attention-row span,
.attention-row small {
    color: var(--old-muted);
    font-size: 11px;
    font-weight: 720;
}

.attention-row strong {
    color: var(--old-text);
    font-size: 14px;
}

.attention-row.tone-green {
    border-left-color: #36a66a;
}

.attention-row.tone-amber {
    border-left-color: #d97706;
}

.attention-row.tone-red {
    border-left-color: #dc2626;
}

.signal-list {
    display: grid;
    margin: 0;
}

.signal-list div {
    display: grid;
    gap: 5px;
    padding: 14px 18px;
    border-bottom: 1px solid var(--old-border);
}

.signal-list div:last-child {
    border-bottom: 0;
}

.signal-list dt {
    color: var(--old-muted);
    font-size: 11px;
    font-weight: 780;
    text-transform: uppercase;
}

.signal-list dd {
    margin: 0;
    color: var(--old-text);
    font-size: 13px;
    font-weight: 720;
    line-height: 1.4;
}

.health-score {
    color: #16834b;
    font-size: 18px;
}

.check-row {
    display: grid;
    grid-template-columns: 10px minmax(0, 1fr);
    gap: 10px;
    align-items: center;
    padding: 12px 18px;
    border-bottom: 1px solid var(--old-border);
}

.check-row span {
    width: 8px;
    height: 8px;
    border-radius: 999px;
}

.check-row strong {
    color: var(--old-text);
    font-size: 13px;
}

.check-ok {
    background: #36a66a;
}

.check-warn {
    background: #d97706;
}

.dev-tool-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    padding: 16px;
}

.dev-tool-card {
    display: grid;
    gap: 9px;
    min-height: 148px;
    padding: 16px;
    border: 1px solid var(--old-border);
    border-radius: 8px;
    color: inherit;
    background: var(--old-card);
}

.dev-tool-card:hover {
    background: var(--old-hover);
}

.dev-tool-card > span {
    display: grid;
    width: 36px;
    height: 36px;
    place-items: center;
    border-radius: 8px;
    color: #16834b;
    background: rgba(54, 166, 106, 0.12);
}

.dev-tool-card svg {
    width: 18px;
    height: 18px;
}

.dev-tool-card strong {
    color: var(--old-text);
    font-size: 14px;
}

.dev-tool-card small {
    color: var(--old-muted);
    font-size: 12px;
    line-height: 1.45;
}

.dev-tenant-table {
    min-width: 920px;
}

.dev-team-list {
    display: grid;
}

.dev-team-row {
    display: grid;
    grid-template-columns: 36px minmax(0, 1fr);
    gap: 11px;
    align-items: center;
    padding: 13px 18px;
    border-bottom: 1px solid var(--old-border);
}

.dev-team-row:last-child {
    border-bottom: 0;
}

.dev-team-row > span {
    display: grid;
    width: 36px;
    height: 36px;
    place-items: center;
    border-radius: 8px;
    color: #ffffff;
    background: #1f3f68;
    font-size: 12px;
    font-weight: 850;
}

.dev-team-row strong,
.dev-team-row small {
    display: block;
}

.dev-team-row strong {
    color: var(--old-text);
    font-size: 13px;
}

.dev-team-row small {
    margin-top: 3px;
    color: var(--old-muted);
    font-size: 11px;
    line-height: 1.4;
}

.tenant-access-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin: 16px 24px 0;
    padding: 14px 16px;
    border: 1px solid rgba(217, 119, 6, 0.32);
    border-left: 5px solid #d97706;
    border-radius: 8px;
    background: rgba(245, 158, 11, 0.1);
}

.tenant-access-banner.is-impersonating {
    border-color: rgba(180, 35, 24, 0.32);
    border-left-color: #b42318;
    background: rgba(239, 68, 68, 0.1);
}

.tenant-access-banner div {
    display: grid;
    gap: 3px;
}

.tenant-access-banner span,
.tenant-access-banner small {
    color: var(--old-muted);
    font-size: 11px;
    font-weight: 760;
}

.tenant-access-banner strong {
    color: var(--old-text);
    font-size: 15px;
}

.tenant-access-banner form {
    margin: 0;
    flex-shrink: 0;
}

.access-state {
    display: grid;
    gap: 16px;
    max-width: 640px;
    margin: 28px auto;
}

.access-state-panel,
.access-state-details {
    border: 1px solid var(--line-strong);
    border-radius: 8px;
    background: var(--panel-raised);
    box-shadow: var(--shadow-soft);
}

.access-state-panel {
    display: grid;
    grid-template-columns: 72px minmax(0, 1fr);
    gap: 16px 18px;
    align-items: start;
    padding: clamp(34px, 5vw, 46px) clamp(22px, 4vw, 34px) clamp(22px, 4vw, 34px);
    border: 2px solid transparent;
    background:
        linear-gradient(var(--panel-raised), var(--panel-raised)) padding-box,
        var(--brand-split) border-box;
    position: relative;
    overflow: hidden;
}

.access-state-panel::before {
    content: "";
    position: absolute;
    inset: 0;
    border-top: 6px solid transparent;
    border-image: var(--brand-split) 1;
    pointer-events: none;
}

.access-state-panel::after,
.module-state::after,
.platform-register-card::after,
.table-empty-state::after,
.visit-empty-state::after,
.print-empty-state::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 86px;
    height: 86px;
    background: var(--brand-split);
    clip-path: polygon(100% 0, 0 0, 100% 100%);
    opacity: 0.14;
    pointer-events: none;
}

.access-state-panel > * {
    position: relative;
    z-index: 1;
}

.access-state-brand {
    grid-column: 1 / -1;
    grid-row: 3;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    justify-self: end;
    min-width: 0;
    margin: 14px -8px -10px 0;
    pointer-events: none;
}

.access-state-brand-mark {
    width: min(190px, 48vw);
    height: 68px;
}

.access-state-brand-mark .brand-logo {
    object-fit: contain;
}

.access-state-mark,
.module-state-mark {
    display: grid;
    place-items: center;
    width: 68px;
    height: 68px;
    border-radius: 8px;
    border: 2px solid transparent;
    background:
        linear-gradient(var(--panel-raised), var(--panel-raised)) padding-box,
        var(--brand-split) border-box;
    color: var(--brand-navy);
    position: relative;
    overflow: hidden;
}

.access-state-mark {
    grid-column: 1;
    grid-row: 1 / span 2;
}

.access-state-mark::before,
.module-state-mark::before {
    content: "";
    position: absolute;
    inset: 5px;
    border-radius: 6px;
    background: linear-gradient(135deg, rgba(31, 63, 104, 0.12) 0 49%, rgba(54, 166, 106, 0.18) 49.5% 100%);
}

.access-state-mark svg,
.module-state-mark svg {
    position: relative;
    z-index: 1;
}

.module-state-mark {
    margin-bottom: 14px;
}

.access-state-copy {
    grid-column: 2;
    grid-row: 1;
    min-width: 0;
}

.access-state-kicker {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    padding: 0 10px;
    border-radius: 999px;
    background: var(--accent-soft);
    color: var(--ink-strong);
    font-size: 11px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0;
}

.access-state h1 {
    margin: 0 0 8px;
    color: var(--ink-strong);
    font-size: clamp(24px, 3vw, 36px);
    line-height: 1.08;
    letter-spacing: 0;
}

.access-state p {
    max-width: 680px;
    margin: 0;
    color: var(--muted);
    font-size: 15px;
    line-height: 1.65;
}

.access-state-actions {
    grid-column: 2;
    grid-row: 2;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 0;
}

.access-state-actions .button {
    text-decoration: none;
}

.access-state-details {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 1px;
    overflow: hidden;
    background: var(--line);
}

.access-state-details div {
    display: grid;
    gap: 6px;
    min-height: 86px;
    padding: 16px;
    background: var(--panel-raised);
}

.access-state-details span {
    color: var(--muted);
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0;
}

.access-state-details strong {
    color: var(--ink-strong);
    font-size: 15px;
    line-height: 1.35;
}

.auth-state {
    width: min(760px, calc(100vw - 32px));
    margin: 0;
}

.module-state {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(260px, 340px);
    gap: 20px;
    align-items: stretch;
    margin-bottom: 22px;
    padding: clamp(22px, 4vw, 34px);
    border: 2px solid transparent;
    border-radius: 8px;
    background:
        linear-gradient(var(--panel-raised), var(--panel-raised)) padding-box,
        linear-gradient(115deg, var(--brand-navy) 0 49.8%, var(--specialty-color, var(--brand-green)) 50.2% 100%) border-box;
    box-shadow: var(--shadow-soft);
    position: relative;
    overflow: hidden;
}

.module-state::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(118deg, color-mix(in srgb, var(--specialty-color, var(--brand-green)) 13%, transparent) 0 34%, transparent 34.2%);
    pointer-events: none;
}

.module-state > * {
    position: relative;
    z-index: 1;
}

.module-state-lockup {
    grid-column: 1 / -1;
}

.module-state-copy {
    min-width: 0;
}

.module-state h1 {
    margin: 12px 0 8px;
    color: var(--ink-strong);
    font-size: clamp(26px, 3vw, 40px);
    line-height: 1.05;
    letter-spacing: 0;
}

.module-state p {
    max-width: 720px;
    margin: 0 0 18px;
    color: var(--muted);
    font-size: 15px;
    line-height: 1.65;
}

.module-state .access-state-actions {
    grid-column: auto;
}

.module-state-meta {
    display: grid;
    border: 1px solid var(--line);
    border-radius: 8px;
    overflow: hidden;
    background: var(--line);
}

.module-state-meta div {
    display: grid;
    gap: 5px;
    padding: 16px;
    background: var(--panel-raised);
}

.module-state-meta span {
    color: var(--muted);
    font-size: 11px;
    font-weight: 850;
    text-transform: uppercase;
    letter-spacing: 0;
}

.module-state-meta strong {
    color: var(--ink-strong);
    font-size: 15px;
}

:root[data-theme="dark"] .access-state-details {
    background: var(--old-card);
    border-color: var(--old-border);
    box-shadow: none;
}

:root[data-theme="dark"] .access-state-panel {
    background:
        linear-gradient(var(--old-card), var(--old-card)) padding-box,
        var(--brand-split) border-box;
    box-shadow: none;
}

:root[data-theme="dark"] .access-state-details {
    background: var(--old-border);
}

:root[data-theme="dark"] .access-state-details div {
    background: var(--old-card);
}

:root[data-theme="dark"] .access-state-mark,
:root[data-theme="dark"] .module-state-mark {
    background:
        linear-gradient(var(--old-card), var(--old-card)) padding-box,
        var(--brand-split) border-box;
    color: #ffffff;
}

:root[data-theme="dark"] .access-state-mark::before,
:root[data-theme="dark"] .module-state-mark::before {
    background: linear-gradient(135deg, rgba(127, 165, 207, 0.22) 0 49%, rgba(93, 214, 138, 0.24) 49.5% 100%);
}

:root[data-theme="dark"] .access-state-kicker {
    background: rgba(255, 255, 255, 0.08);
    color: #ffffff;
}

:root[data-theme="dark"] .access-state h1,
:root[data-theme="dark"] .access-state-details strong {
    color: #ffffff;
}

:root[data-theme="dark"] .access-state p,
:root[data-theme="dark"] .access-state-details span {
    color: #a7a29a;
}

:root[data-theme="dark"] .module-state {
    background:
        linear-gradient(var(--old-card), var(--old-card)) padding-box,
        linear-gradient(115deg, var(--brand-navy) 0 49.8%, var(--specialty-color, var(--brand-green)) 50.2% 100%) border-box;
    box-shadow: none;
}

:root[data-theme="dark"] .module-state::before {
    background: linear-gradient(118deg, color-mix(in srgb, var(--specialty-color, var(--brand-green)) 12%, transparent) 0 34%, transparent 34.2%);
}

:root[data-theme="dark"] .module-state h1,
:root[data-theme="dark"] .module-state-meta strong {
    color: #ffffff;
}

:root[data-theme="dark"] .module-state p,
:root[data-theme="dark"] .module-state-meta span {
    color: #a7a29a;
}

:root[data-theme="dark"] .module-state-meta {
    background: var(--old-border);
    border-color: var(--old-border);
}

:root[data-theme="dark"] .module-state-meta div {
    background: var(--old-card-soft);
}

@media (max-width: 720px) {
    .access-state {
        margin: 16px 0;
    }

    .access-state-panel {
        grid-template-columns: 1fr;
        padding-top: clamp(30px, 8vw, 40px);
    }

    .access-state-mark,
    .access-state-copy,
    .access-state-actions,
    .access-state-brand {
        grid-column: 1;
    }

    .access-state-mark,
    .access-state-copy,
    .access-state-actions,
    .access-state-brand {
        grid-row: auto;
    }

    .access-state-actions {
        margin-top: 2px;
    }

    .access-state-actions .button {
        width: 100%;
    }

    .access-state-brand {
        justify-self: end;
        margin: 12px -4px -6px 0;
    }

    .access-state-brand-mark {
        width: min(170px, 50vw);
        height: 62px;
    }

    .module-state {
        grid-template-columns: 1fr;
    }
}

.platform-control-section {
    margin-top: 20px;
}

.platform-clinic-table {
    min-width: 1180px;
}

.platform-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    justify-content: flex-end;
}

.platform-actions form {
    margin: 0;
}

.platform-clinic-table th:last-child,
.platform-clinic-table td:last-child {
    width: 340px;
    vertical-align: top;
}

.platform-clinic-tools {
    display: grid;
    min-width: 300px;
    gap: 8px;
}

.platform-quick-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
    justify-content: flex-end;
}

.platform-quick-actions form {
    margin: 0;
}

.platform-tool-stack {
    display: grid;
    gap: 8px;
}

.platform-inline-tool {
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--panel);
}

.platform-inline-tool summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    min-height: 42px;
    padding: 9px 11px;
    list-style: none;
    cursor: pointer;
}

.platform-inline-tool summary::-webkit-details-marker {
    display: none;
}

.platform-inline-tool summary::after {
    content: '+';
    display: grid;
    width: 22px;
    height: 22px;
    flex: 0 0 auto;
    place-items: center;
    border-radius: 999px;
    background: color-mix(in srgb, var(--old-muted) 12%, transparent);
    color: var(--old-text);
    font-size: 15px;
    font-weight: 850;
    line-height: 1;
}

.platform-inline-tool[open] summary::after {
    content: '-';
}

.platform-inline-tool summary span {
    display: grid;
    min-width: 0;
    gap: 2px;
}

.platform-inline-tool summary strong {
    color: var(--old-text);
    font-size: 12px;
    line-height: 1.25;
}

.platform-inline-tool summary small {
    color: var(--old-muted);
    font-size: 11px;
    line-height: 1.3;
}

.platform-inline-tool-panel {
    padding: 11px;
    border-top: 1px solid var(--line);
}

.platform-inline-tool-panel form,
.platform-inline-tool-panel label {
    display: grid;
    gap: 8px;
}

.platform-inline-tool-panel form {
    gap: 12px;
}

.platform-inline-tool-panel label span {
    color: var(--muted);
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0;
}

.platform-inline-tool-panel input,
.platform-inline-tool-panel select {
    width: 100%;
    min-height: 36px;
    border: 1px solid var(--line-strong);
    border-radius: 6px;
    background: var(--input);
    color: var(--ink-strong);
    padding: 0 9px;
}

.platform-inline-tool-panel .platform-limit-grid {
    gap: 8px;
}

.platform-inline-tool-panel .platform-feature-grid {
    grid-template-columns: 1fr;
    gap: 6px;
}

.platform-inline-tool-panel .platform-check-field {
    min-height: 34px;
    padding: 8px;
}

.platform-inline-tool-panel .button {
    width: 100%;
    min-height: 36px;
}

.platform-request-table {
    min-width: 980px;
}

.platform-request-actions {
    align-items: stretch;
}

.platform-request-actions form {
    display: flex;
    max-width: 360px;
    gap: 6px;
    align-items: center;
}

.platform-request-actions input,
.platform-request-actions select {
    width: min(140px, 100%);
    min-height: 32px;
    padding: 0 8px;
    border: 1px solid var(--line-strong);
    border-radius: 6px;
    background: var(--input);
    color: var(--ink-strong);
    font-size: 12px;
}

.platform-empty-row td {
    padding: 0 !important;
}

.table-empty-state {
    display: grid;
    gap: 6px;
    margin: 12px;
    padding: 22px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background:
        linear-gradient(122deg, rgba(54, 166, 106, 0.1) 0 32%, transparent 32.2%),
        var(--panel-raised);
    text-align: left;
    position: relative;
    overflow: hidden;
}

.table-empty-state strong {
    color: var(--ink-strong);
    font-size: 15px;
}

.table-empty-state span {
    color: var(--muted);
    font-size: 13px;
    line-height: 1.5;
}

:root[data-theme="dark"] .table-empty-state {
    border-color: var(--old-border);
    background:
        linear-gradient(122deg, rgba(127, 165, 207, 0.08) 0 32%, transparent 32.2%),
        var(--old-card);
}

:root[data-theme="dark"] .table-empty-state strong {
    color: #ffffff;
}

:root[data-theme="dark"] .table-empty-state span {
    color: #a7a29a;
}

.platform-limit-details {
    position: relative;
}

.platform-limit-details summary {
    list-style: none;
    cursor: pointer;
}

.platform-limit-details summary::-webkit-details-marker {
    display: none;
}

.platform-limit-popover {
    position: absolute;
    z-index: 30;
    top: 40px;
    right: 0;
    width: min(340px, 82vw);
    padding: 16px;
    border: 1px solid var(--line-strong);
    border-radius: 8px;
    background: var(--panel-raised);
    box-shadow: 0 18px 42px rgba(15, 23, 42, 0.16);
}

.platform-limit-popover form,
.platform-limit-popover label {
    display: grid;
    gap: 8px;
}

.platform-limit-popover form {
    gap: 14px;
}

.platform-limit-popover label span {
    color: var(--muted);
    font-size: 11px;
    font-weight: 780;
    text-transform: uppercase;
    letter-spacing: 0;
}

.platform-limit-popover input,
.platform-limit-popover select,
.platform-limit-popover textarea {
    width: 100%;
    min-height: 38px;
    border: 1px solid var(--line-strong);
    border-radius: 6px;
    background: var(--input);
    color: var(--ink-strong);
    padding: 0 10px;
}

.platform-limit-popover textarea {
    min-height: 86px;
    padding: 10px;
    resize: vertical;
}

.platform-feature-popover {
    width: min(440px, calc(100vw - 48px));
}

.platform-feature-head {
    display: grid;
    gap: 3px;
    padding-bottom: 6px;
    border-bottom: 1px solid var(--line);
}

.platform-feature-head strong {
    color: var(--old-text);
    font-size: 14px;
}

.platform-feature-head span {
    color: var(--old-muted);
    font-size: 12px;
}

.platform-feature-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

.platform-feature-grid .platform-check-field {
    min-height: 36px;
    padding: 8px;
    border: 1px solid var(--line);
    border-radius: 6px;
    background: var(--panel);
}

.platform-color-field {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr);
    gap: 8px;
    align-items: center;
}

.platform-color-field input[type="color"] {
    width: 44px;
    min-height: 38px;
    padding: 3px;
    cursor: pointer;
}

.platform-check-field {
    grid-template-columns: auto 1fr;
    align-items: center;
    cursor: pointer;
}

.platform-check-field input {
    width: 17px;
    min-height: 17px;
    padding: 0;
}

.platform-register-head {
    margin-top: 18px;
    padding-top: 24px;
    border-top: 1px solid var(--line);
}

.platform-register-card {
    padding: 22px;
    border: 1px solid var(--line-strong);
    border-radius: 8px;
    background:
        linear-gradient(125deg, rgba(54, 166, 106, 0.12) 0 30%, transparent 30.2%),
        var(--panel-raised);
    box-shadow: var(--shadow-soft);
    position: relative;
    overflow: hidden;
}

.platform-tenant-details {
    padding: 14px;
}

.platform-tenant-details summary {
    display: flex;
    min-height: 44px;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 0 12px;
    border: 1px solid var(--line-strong);
    border-radius: 8px;
    background: var(--panel-raised);
    color: var(--ink-strong);
    cursor: pointer;
}

.platform-tenant-details summary::-webkit-details-marker {
    display: none;
}

.platform-tenant-details summary span {
    color: var(--muted);
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0;
}

.platform-tenant-details summary strong {
    font-size: 13px;
}

.platform-tenant-details[open] summary {
    margin-bottom: 12px;
}

.platform-tenant-card {
    padding: 14px;
}

.platform-register-card form {
    display: grid;
    gap: 16px;
    max-width: 720px;
}

.platform-tenant-card form {
    max-width: none;
    gap: 10px;
}

.platform-register-card h3 {
    margin: 10px 0 0;
    color: var(--ink-strong);
    font-size: 14px;
    line-height: 1.25;
}

.platform-register-card label {
    display: grid;
    gap: 8px;
}

.platform-register-card label span,
.platform-register-card small {
    color: var(--muted);
    font-size: 12px;
    font-weight: 780;
}

.platform-register-card label span {
    color: var(--ink-strong);
}

.platform-register-card input,
.platform-register-card select,
.platform-register-card textarea {
    width: 100%;
    border: 1px solid var(--line-strong);
    border-radius: 6px;
    background: var(--input);
    color: var(--ink-strong);
}

.platform-register-card textarea {
    min-height: 96px;
    resize: vertical;
}

.platform-form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.platform-tenant-card .platform-form-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
}

.platform-tenant-card input,
.platform-tenant-card select {
    min-height: 36px;
}

:root[data-theme="dark"] .platform-limit-popover,
:root[data-theme="dark"] .platform-inline-tool,
:root[data-theme="dark"] .platform-tenant-details summary,
:root[data-theme="dark"] .platform-register-card {
    background:
        linear-gradient(125deg, rgba(127, 165, 207, 0.1) 0 28%, transparent 28.2%),
        var(--old-card);
    border-color: var(--old-border);
    box-shadow: none;
}

:root[data-theme="dark"] .platform-inline-tool summary strong,
:root[data-theme="dark"] .platform-tenant-details summary strong,
:root[data-theme="dark"] .platform-register-card h3,
:root[data-theme="dark"] .platform-register-card label span {
    color: #ffffff;
}

:root[data-theme="dark"] .platform-limit-popover label span,
:root[data-theme="dark"] .platform-inline-tool summary small,
:root[data-theme="dark"] .platform-inline-tool-panel label span,
:root[data-theme="dark"] .platform-tenant-details summary span,
:root[data-theme="dark"] .platform-register-card small {
    color: #a7a29a;
}

:root[data-theme="dark"] .platform-limit-popover input,
:root[data-theme="dark"] .platform-limit-popover textarea,
:root[data-theme="dark"] .platform-inline-tool-panel input,
:root[data-theme="dark"] .platform-inline-tool-panel select,
:root[data-theme="dark"] .platform-request-actions input,
:root[data-theme="dark"] .platform-request-actions select,
:root[data-theme="dark"] .platform-register-card input,
:root[data-theme="dark"] .platform-register-card select,
:root[data-theme="dark"] .platform-register-card textarea {
    background: var(--old-card-soft);
    border-color: var(--old-border);
    color: #ffffff;
}

:root[data-theme="dark"] .platform-register-head {
    border-color: var(--old-border);
}

@media (max-width: 760px) {
    .platform-limit-popover {
        left: 0;
        right: auto;
        width: min(340px, calc(100vw - 56px));
    }

    .platform-clinic-tools {
        min-width: 260px;
    }

    .platform-quick-actions {
        justify-content: flex-start;
    }

    .platform-form-grid {
        grid-template-columns: 1fr;
    }

    .platform-tenant-card .platform-form-grid {
        grid-template-columns: 1fr;
    }
}

.platform-limit-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.platform-module-page {
    width: min(1540px, 100%);
    padding: 22px;
}

.platform-module-page .platform-module-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
    margin-bottom: 14px;
    padding: 22px;
    border: 1px solid var(--old-border);
    border-radius: 8px;
    background:
        linear-gradient(90deg, rgba(31, 63, 104, 0.14), transparent 40%),
        linear-gradient(180deg, var(--old-card-soft), var(--old-card));
    box-shadow: 0 14px 36px rgba(15, 23, 42, 0.08);
}

.platform-module-page .platform-module-hero h1 {
    font-size: 30px;
}

.platform-module-console {
    display: grid;
    gap: 14px;
}

.platform-dev-console .platform-command-kpis {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.platform-command-kpis {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 10px;
}

.platform-command-kpis article {
    display: grid;
    min-height: 104px;
    align-content: space-between;
    gap: 8px;
    padding: 14px;
    border: 1px solid var(--old-border);
    border-radius: 8px;
    background: var(--old-card-soft);
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.06);
}

.platform-command-kpis span,
.platform-command-kpis small {
    color: var(--old-muted);
    font-size: 11px;
    font-weight: 780;
    line-height: 1.35;
    text-transform: uppercase;
    letter-spacing: 0;
}

.platform-command-kpis strong {
    overflow-wrap: anywhere;
    color: var(--old-text);
    font-size: clamp(21px, 2vw, 30px);
    line-height: 1;
}

.platform-command-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.platform-command-panel {
    min-width: 0;
    border: 1px solid var(--old-border);
    border-radius: 8px;
    background: var(--old-card-soft);
    box-shadow: 0 16px 38px rgba(15, 23, 42, 0.07);
    overflow: visible;
}

.platform-command-panel .superadmin-table-wrap {
    border-radius: 0 0 8px 8px;
}

.platform-command-panel .superadmin-table th,
.platform-command-panel .superadmin-table td {
    padding: 12px 14px;
}

.platform-command-panel .superadmin-table tbody tr:hover {
    background: var(--old-hover);
}

.platform-mini-list {
    display: grid;
    gap: 10px;
    padding: 14px;
}

.platform-mini-list div {
    display: grid;
    gap: 4px;
    padding: 12px;
    border: 1px solid var(--old-border);
    border-radius: 8px;
    background: var(--old-card);
}

.platform-mini-list span,
.platform-mini-list small {
    color: var(--old-muted);
    font-size: 11px;
    font-weight: 780;
    line-height: 1.35;
    text-transform: uppercase;
    letter-spacing: 0;
}

.platform-mini-list strong {
    color: var(--old-text);
    font-size: 14px;
    line-height: 1.35;
}

.platform-focus-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 10px;
    padding: 14px;
}

.platform-focus-grid div {
    display: grid;
    gap: 8px;
    min-height: 100px;
    align-content: start;
    padding: 13px;
    border: 1px solid var(--old-border);
    border-radius: 8px;
    background: var(--old-card);
}

.platform-focus-grid span {
    color: var(--old-muted);
    font-size: 11px;
    font-weight: 820;
    line-height: 1.35;
    text-transform: uppercase;
    letter-spacing: 0;
}

.platform-focus-grid strong {
    color: var(--old-text);
    font-size: 13px;
    font-weight: 680;
    line-height: 1.5;
}

.platform-chip-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 14px;
}

.platform-chip-list span {
    display: inline-flex;
    min-height: 30px;
    align-items: center;
    padding: 0 10px;
    border: 1px solid var(--old-border);
    border-radius: 999px;
    background: var(--old-card);
    color: var(--old-text);
    font-size: 12px;
    font-weight: 820;
}

.platform-signal-list {
    display: grid;
    gap: 0;
    margin: 0;
    padding: 4px 14px 14px;
}

.platform-signal-list div {
    display: grid;
    grid-template-columns: minmax(150px, 0.65fr) minmax(0, 1fr);
    gap: 12px;
    padding: 12px 0;
    border-bottom: 1px solid var(--old-border);
}

.platform-signal-list div:last-child {
    border-bottom: 0;
}

.platform-signal-list dt {
    color: var(--old-muted);
    font-size: 11px;
    font-weight: 820;
    text-transform: uppercase;
    letter-spacing: 0;
}

.platform-signal-list dd {
    margin: 0;
    color: var(--old-text);
    font-size: 13px;
    line-height: 1.45;
}

.platform-settings-form {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    padding: 14px;
}

.platform-settings-form label {
    display: grid;
    gap: 6px;
}

.platform-settings-form label.field-wide,
.platform-settings-form button {
    grid-column: 1 / -1;
}

.platform-settings-form span {
    color: var(--old-muted);
    font-size: 10px;
    font-weight: 820;
    text-transform: uppercase;
    letter-spacing: 0;
}

.platform-settings-form input,
.platform-settings-form select {
    width: 100%;
    min-height: 36px;
    padding: 0 10px;
    border: 1px solid var(--old-border);
    border-radius: 6px;
    background: var(--old-card);
    color: var(--old-text);
    font-size: 12px;
}

.platform-product-strip {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
    gap: 10px;
    padding: 14px;
}

.platform-product-strip article {
    display: grid;
    gap: 6px;
    min-height: 112px;
    padding: 14px;
    border: 1px solid var(--old-border);
    border-top: 4px solid var(--specialty-color, var(--brand-navy));
    border-radius: 8px;
    background: var(--old-card);
}

.platform-product-strip strong {
    color: var(--old-text);
    font-size: 15px;
}

.platform-product-strip span,
.platform-product-strip small {
    color: var(--old-muted);
    font-size: 12px;
    line-height: 1.45;
}

.platform-check-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 10px;
    padding: 14px;
}

.platform-check-grid div {
    display: grid;
    gap: 8px;
    min-height: 86px;
    align-content: start;
    padding: 12px;
    border: 1px solid var(--old-border);
    border-radius: 8px;
    background: var(--old-card);
}

.platform-check-grid span {
    display: inline-flex;
    width: max-content;
    min-height: 24px;
    align-items: center;
    padding: 0 8px;
    border-radius: 999px;
    color: #ffffff;
    font-size: 10px;
    font-weight: 840;
}

.platform-check-grid .is-ok span {
    background: var(--brand-green-deep);
}

.platform-check-grid .is-warn span {
    background: var(--danger);
}

.platform-check-grid strong {
    color: var(--old-text);
    font-size: 13px;
    line-height: 1.35;
}

.platform-check-grid.compact {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.platform-check-grid.compact div {
    min-height: 72px;
}

.platform-subscriber-table {
    min-width: 1120px;
}

.platform-billing-table,
.platform-revenue-table,
.platform-appointments-table,
.platform-access-table,
.platform-dev-table {
    min-width: 980px;
}

.platform-products-console {
    margin-bottom: 14px;
}

:root[data-theme="dark"] .platform-module-page .platform-module-hero,
:root[data-theme="dark"] .platform-command-kpis article,
:root[data-theme="dark"] .platform-command-panel {
    background: var(--old-card-soft);
    border-color: var(--old-border);
    box-shadow: none;
}

:root[data-theme="dark"] .platform-mini-list div,
:root[data-theme="dark"] .platform-focus-grid div,
:root[data-theme="dark"] .platform-chip-list span,
:root[data-theme="dark"] .platform-settings-form input,
:root[data-theme="dark"] .platform-settings-form select,
:root[data-theme="dark"] .platform-product-strip article,
:root[data-theme="dark"] .platform-check-grid div {
    background: var(--old-card);
    border-color: var(--old-border);
    color: #ffffff;
}

@media (max-width: 1180px) {
    .platform-command-kpis {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .platform-dev-console .platform-command-kpis {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .platform-command-grid,
    .settings-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 760px) {
    .platform-module-page {
        padding: 16px;
    }

    .platform-module-page .platform-module-hero {
        grid-template-columns: 1fr;
    }

    .platform-command-kpis,
    .platform-dev-console .platform-command-kpis,
    .platform-settings-form {
        grid-template-columns: 1fr;
    }

    .platform-signal-list div {
        grid-template-columns: 1fr;
    }
}

.platform-clinics-page {
    width: min(1540px, 100%);
    padding: 22px;
}

.platform-clinics-page .platform-clinics-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
    margin-bottom: 14px;
    padding: 22px;
    border: 1px solid var(--old-border);
    border-radius: 8px;
    background:
        linear-gradient(90deg, rgba(54, 166, 106, 0.12), transparent 36%),
        linear-gradient(180deg, var(--old-card-soft), var(--old-card));
    box-shadow: 0 14px 36px rgba(15, 23, 42, 0.08);
}

.platform-clinics-page .platform-clinics-hero h1 {
    font-size: 30px;
}

.platform-clinics-console {
    display: grid;
    gap: 14px;
}

.platform-clinics-overview {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 10px;
}

.platform-clinics-overview article {
    display: grid;
    min-height: 104px;
    align-content: space-between;
    gap: 8px;
    padding: 14px;
    border: 1px solid var(--old-border);
    border-radius: 8px;
    background: var(--old-card-soft);
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.06);
}

.platform-clinics-overview span,
.platform-clinics-overview small {
    color: var(--old-muted);
    font-size: 11px;
    font-weight: 780;
    line-height: 1.35;
    text-transform: uppercase;
    letter-spacing: 0;
}

.platform-clinics-overview strong {
    color: var(--old-text);
    font-size: 30px;
    line-height: 1;
}

.platform-clinics-panel {
    min-width: 0;
    border: 1px solid var(--old-border);
    border-radius: 8px;
    background: var(--old-card-soft);
    box-shadow: 0 16px 38px rgba(15, 23, 42, 0.07);
    overflow: visible;
}

.platform-panel-head {
    display: flex;
    min-height: 58px;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 14px 16px;
    border-bottom: 1px solid var(--old-border);
}

.platform-panel-head h2 {
    margin: 3px 0 0;
    color: var(--old-text);
    font-size: 16px;
    line-height: 1.2;
}

.platform-count-badge {
    display: inline-flex;
    min-height: 28px;
    align-items: center;
    padding: 0 10px;
    border: 1px solid var(--old-border);
    border-radius: 999px;
    background: var(--old-card);
    color: var(--old-text);
    font-size: 12px;
    font-weight: 820;
    white-space: nowrap;
}

.platform-clinics-console .superadmin-table-wrap {
    border-radius: 0 0 8px 8px;
}

.platform-clinics-console .superadmin-table th,
.platform-clinics-console .superadmin-table td {
    padding: 12px 14px;
}

.platform-clinics-console .superadmin-table tbody tr:hover {
    background: var(--old-hover);
}

.platform-request-table {
    min-width: 1120px;
}

.platform-clinic-table {
    min-width: 1240px;
}

.platform-request-actions {
    justify-content: flex-start;
}

.platform-request-actions form {
    display: flex;
    max-width: none;
    gap: 6px;
    align-items: center;
}

.platform-request-actions input,
.platform-request-actions select {
    width: 132px;
    min-height: 32px;
    padding: 0 8px;
    border: 1px solid var(--old-border);
    border-radius: 6px;
    background: var(--old-card);
    color: var(--old-text);
    font-size: 12px;
}

.platform-manual-setup {
    padding: 10px;
}

.platform-manual-setup .platform-tenant-details {
    padding: 0;
}

.platform-manual-setup .platform-tenant-details summary {
    min-height: 54px;
    padding: 0 14px;
    border-color: var(--old-border);
    background: var(--old-card);
}

.platform-manual-setup .platform-tenant-details summary em {
    color: var(--old-muted);
    font-size: 12px;
    font-style: normal;
    font-weight: 760;
}

.platform-manual-setup .platform-tenant-details[open] summary {
    margin-bottom: 10px;
}

.platform-tenant-card {
    margin: 0;
    padding: 12px;
    border-color: var(--old-border);
    background: var(--old-card);
    box-shadow: none;
}

.platform-tenant-card form {
    display: grid;
    gap: 10px;
    max-width: none;
}

.platform-tenant-section {
    display: grid;
    gap: 10px;
    padding: 12px;
    border: 1px solid var(--old-border);
    border-radius: 8px;
    background: var(--old-card-soft);
}

.platform-tenant-section h3 {
    margin: 0;
    color: var(--old-text);
    font-size: 13px;
    line-height: 1.2;
}

.platform-tenant-form-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 9px;
    align-items: end;
}

.platform-tenant-form-grid label {
    display: grid;
    min-width: 0;
    gap: 5px;
}

.platform-tenant-form-grid label.field-wide {
    grid-column: span 2;
}

.platform-tenant-form-grid span {
    color: var(--old-muted);
    font-size: 10px;
    font-weight: 820;
    text-transform: uppercase;
    letter-spacing: 0;
}

.platform-tenant-form-grid input,
.platform-tenant-form-grid select {
    width: 100%;
    min-height: 34px;
    padding: 0 9px;
    border: 1px solid var(--old-border);
    border-radius: 6px;
    background: var(--old-card);
    color: var(--old-text);
    font-size: 12px;
}

.platform-tenant-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding-top: 2px;
}

.platform-tenant-footer small {
    color: var(--old-muted);
    font-size: 12px;
    line-height: 1.4;
}

.platform-tenant-footer .button {
    min-width: 150px;
}

:root[data-theme="dark"] .platform-clinics-page .platform-clinics-hero,
:root[data-theme="dark"] .platform-clinics-overview article,
:root[data-theme="dark"] .platform-clinics-panel,
:root[data-theme="dark"] .platform-tenant-section {
    background: var(--old-card-soft);
    border-color: var(--old-border);
    box-shadow: none;
}

:root[data-theme="dark"] .platform-count-badge,
:root[data-theme="dark"] .platform-request-actions input,
:root[data-theme="dark"] .platform-request-actions select,
:root[data-theme="dark"] .platform-manual-setup .platform-tenant-details summary,
:root[data-theme="dark"] .platform-tenant-card,
:root[data-theme="dark"] .platform-tenant-form-grid input,
:root[data-theme="dark"] .platform-tenant-form-grid select {
    background: var(--old-card);
    border-color: var(--old-border);
    color: #ffffff;
}

@media (max-width: 1180px) {
    .platform-clinics-overview {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .platform-tenant-form-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 760px) {
    .platform-clinics-page {
        padding: 16px;
    }

    .platform-clinics-page .platform-clinics-hero,
    .platform-panel-head,
    .platform-tenant-footer {
        align-items: stretch;
        grid-template-columns: 1fr;
        flex-direction: column;
    }

    .platform-clinics-overview,
    .platform-tenant-form-grid {
        grid-template-columns: 1fr;
    }

    .platform-tenant-form-grid label.field-wide {
        grid-column: auto;
    }

    .platform-request-actions,
    .platform-request-actions form {
        align-items: stretch;
        flex-direction: column;
    }

    .platform-request-actions input,
    .platform-request-actions select,
    .platform-tenant-footer .button {
        width: 100%;
    }
}

@media (max-width: 1180px) {
    .superadmin-kpis {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .superadmin-layout,
    .devportal-layout {
        grid-template-columns: 1fr;
    }

    .superadmin-side {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .attention-panel {
        grid-column: 1 / -1;
    }

    .dev-tool-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 820px) {
    .superadmin-page,
    .devportal-page {
        padding: 16px;
    }

    .superadmin-hero,
    .devportal-hero {
        grid-template-columns: 1fr;
        align-items: start;
    }

    .superadmin-hero-actions {
        justify-content: flex-start;
    }

    .superadmin-kpis,
    .superadmin-side {
        grid-template-columns: 1fr;
    }

    .superadmin-product-row {
        grid-template-columns: 40px minmax(0, 1fr);
    }

    .product-metrics {
        grid-column: 1 / -1;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        text-align: left;
    }

    .plan-row {
        grid-template-columns: 1fr 1fr;
    }

    .superadmin-hero h1 {
        font-size: 28px;
    }

    .devportal-hero h1 {
        font-size: 28px;
    }

    .dev-tool-grid {
        grid-template-columns: 1fr;
    }

    .tenant-access-banner {
        align-items: stretch;
        flex-direction: column;
        margin: 12px 16px 0;
    }

    .tenant-access-banner .button {
        width: 100%;
    }
}

.workflow-grid {
    display: grid;
    grid-template-columns: minmax(280px, 0.75fr) minmax(0, 1.25fr);
    gap: 20px;
    margin-bottom: 20px;
}

.workflow-grid .old-card:only-child {
    grid-column: 1 / -1;
}

.workflow-steps {
    display: grid;
    gap: 12px;
    margin: 0;
    padding: 22px 22px 22px 48px;
}

.workflow-steps li {
    color: var(--old-text);
    font-weight: 700;
}

.form-preview {
    display: grid;
    gap: 20px;
    padding: 22px;
}

.form-preview h3 {
    margin: 0;
    color: var(--old-text);
}

.field-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.field-grid label {
    display: grid;
    gap: 6px;
    color: var(--old-muted);
    font-size: 13px;
    font-weight: 800;
}

.medication-grid {
    grid-template-columns: minmax(220px, 1.8fr) repeat(4, minmax(110px, 1fr));
    align-items: end;
    border: 1px solid var(--old-border);
    border-radius: 8px;
    background: rgba(95, 93, 88, 0.04);
    padding: 12px;
}

:root[data-theme="dark"] .medication-grid {
    background: rgba(255, 255, 255, 0.05);
}

.medication-grid label {
    min-width: 0;
}

.medication-grid input {
    min-width: 0;
}




.patient-history-panel {
    display: grid;
    gap: 12px;
    border-top: 1px solid var(--old-border);
    border-bottom: 1px solid var(--old-border);
    background: rgba(95, 93, 88, 0.035);
    padding: 16px 22px;
}

:root[data-theme="dark"] .patient-history-panel {
    background: rgba(255, 255, 255, 0.05);
}

.patient-history-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
}

.patient-history-head h3 {
    margin: 0 0 4px;
}

.patient-history-head p {
    margin: 0;
    color: var(--old-muted);
    font-size: 13px;
}

.patient-history-head > span {
    border-radius: 999px;
    background: var(--old-bg);
    color: var(--old-text);
    font-size: 12px;
    font-weight: 850;
    padding: 6px 10px;
    white-space: nowrap;
}

.visit-history-list {
    display: grid;
    max-height: 360px;
    gap: 8px;
    overflow: auto;
    padding-right: 4px;
}

.patient-history-card {
    overflow: visible;
}

.patient-history-card .patient-history-panel {
    display: block;
    max-height: min(72vh, 760px);
    overflow-y: auto;
    min-height: 0;
}

.patient-history-card .visit-history-list {
    max-height: none;
    overflow: visible;
}

.visit-history-item {
    overflow: hidden;
    border: 1px solid var(--line-strong);
    border-radius: 8px;
    background: var(--panel-raised);
}

.visit-history-summary {
    display: grid;
    grid-template-columns: minmax(190px, 0.65fr) minmax(0, 1fr);
    align-items: center;
    gap: 12px;
    cursor: pointer;
    list-style: none;
    padding: 12px;
    background:
        linear-gradient(122deg, color-mix(in srgb, var(--specialty-color, var(--brand-navy)) 10%, transparent) 0 32%, transparent 32.2%),
        var(--panel-raised);
    border-bottom: 1px solid var(--line);
}

.visit-history-item summary::-webkit-details-marker {
    display: none;
}

.visit-history-date {
    color: var(--ink-strong);
    font-size: 13px;
}

.visit-history-meta {
    display: block;
    margin-top: 3px;
    color: var(--muted);
    font-size: 11px;
    font-weight: 650;
}

.visit-history-item b {
    color: var(--ink-strong);
    font-weight: 850;
}

.visit-details-content {
    padding: 14px;
    background: var(--panel);
}

.visit-notes {
    margin: 0;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--panel-raised);
    color: var(--muted);
    font-size: 13px;
    line-height: 1.6;
    padding: 12px;
}

.visit-note-field {
    padding-bottom: 4px;
    border-bottom: 1px solid var(--line);
}

.visit-note-field strong {
    display: block;
    margin-bottom: 2px;
    color: var(--muted);
    font-size: 10.5px;
    text-transform: uppercase;
    letter-spacing: 0;
}

.visit-note-field span {
    color: var(--ink-strong);
    font-size: 12px;
    font-weight: 650;
}

.visit-note-text {
    grid-column: 1 / -1;
    margin-top: 2px;
    padding-left: 8px;
    border-left: 2px solid var(--line-strong);
    color: var(--ink);
    font-size: 12px;
    font-weight: 650;
}

.visit-referral-body {
    margin-top: 4px;
    padding: 10px;
    border: 1px solid var(--line);
    border-radius: 6px;
    background: var(--panel);
    color: var(--ink);
    font-family: "SF Mono", "Geist Mono", Consolas, monospace;
    font-size: 11px;
    line-height: 1.45;
    white-space: pre-wrap;
}

.visit-empty-state,
.print-empty-state {
    margin: 0;
    padding: 20px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background:
        linear-gradient(122deg, color-mix(in srgb, var(--specialty-color, var(--brand-navy)) 10%, transparent) 0 32%, transparent 32.2%),
        var(--panel-raised);
    color: var(--muted);
    text-align: center;
    font-size: 13px;
    font-weight: 700;
    position: relative;
    overflow: hidden;
}

.print-empty-state {
    padding: 38px;
}

:root[data-theme="dark"] .visit-history-item,
:root[data-theme="dark"] .visit-history-summary,
:root[data-theme="dark"] .visit-notes,
:root[data-theme="dark"] .visit-referral-body,
:root[data-theme="dark"] .visit-empty-state,
:root[data-theme="dark"] .print-empty-state {
    border-color: var(--old-border);
    background:
        linear-gradient(122deg, rgba(127, 165, 207, 0.08) 0 32%, transparent 32.2%),
        var(--old-card);
}

:root[data-theme="dark"] .visit-details-content,
:root[data-theme="dark"] .visit-referral-body {
    background: var(--old-card-soft);
}

:root[data-theme="dark"] .visit-history-date,
:root[data-theme="dark"] .visit-note-field span {
    color: #ffffff;
}

:root[data-theme="dark"] .visit-history-meta,
:root[data-theme="dark"] .visit-notes,
:root[data-theme="dark"] .visit-note-field strong,
:root[data-theme="dark"] .visit-note-text,
:root[data-theme="dark"] .visit-referral-body,
:root[data-theme="dark"] .visit-empty-state,
:root[data-theme="dark"] .print-empty-state {
    color: #a7a29a;
}

.appointment-page,
.followup-page {
    display: grid;
    gap: 16px;
}

.frontdesk-workpage,
.frontdesk-patients-page {
    display: grid;
    gap: 16px;
}

.frontdesk-page-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
}

/* MOBILE ONLY: on a phone the four stat tiles cannot sit in a row, and the
   head cannot sit beside them. Stack the head, drop the stats to two columns,
   and let the grid item shrink (min-width:0) so nothing pushes past the
   viewport. Desktop keeps the original side-by-side row untouched. */
@media (max-width: 680px) {
    .frontdesk-page-head {
        flex-direction: column;
        min-width: 0;
    }

    .frontdesk-page-head > * {
        min-width: 0;
    }

    .frontdesk-mini-stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        width: 100%;
        min-width: 0;
    }
}

.frontdesk-page-head h2 {
    margin: 0 0 4px;
    color: var(--old-text);
    font-size: 18px;
}

.frontdesk-page-head p {
    margin: 0;
    color: var(--old-muted);
}

.frontdesk-mini-stats {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
}

.frontdesk-mini-stats article {
    border: 1px solid var(--old-border);
    border-radius: 8px;
    background: var(--old-card);
    padding: 14px;
}

.frontdesk-mini-stats p {
    margin: 0 0 6px;
    color: var(--old-muted);
    font-size: 12px;
    font-weight: 850;
    text-transform: uppercase;
}

.frontdesk-mini-stats strong {
    color: var(--old-text);
    font-size: 19px;
}

.frontdesk-mini-stats .red { border-color: color-mix(in srgb, var(--danger), transparent 60%); }
.frontdesk-mini-stats .gray { border-color: color-mix(in srgb, var(--gray), transparent 60%); }
.frontdesk-mini-stats .yellow { border-color: color-mix(in srgb, #ca8a04, transparent 60%); }
.frontdesk-mini-stats .purple { border-color: color-mix(in srgb, var(--purple), transparent 60%); }
.frontdesk-mini-stats .green { border-color: color-mix(in srgb, var(--success), transparent 60%); }

.frontdesk-searchbar {
    display: grid;
    grid-template-columns: minmax(220px, 1fr) minmax(170px, 230px) auto auto;
    gap: 10px;
    align-items: center;
}

.frontdesk-patients-page .frontdesk-searchbar {
    grid-template-columns: minmax(220px, 1fr) auto auto;
}

.frontdesk-searchbar input,
.frontdesk-searchbar select {
    min-height: 44px;
    border-radius: 8px;
    border-color: var(--old-border);
    background: var(--old-card);
    color: var(--old-text);
}

.frontdesk-patient-grid,
.frontdesk-billing-list,
.frontdesk-activity-feed {
    display: grid;
    gap: 12px;
}

.frontdesk-patient-card,
.frontdesk-billing-card,
.frontdesk-activity-card,
.frontdesk-stock-card {
    border: 1px solid var(--old-border);
    border-radius: 8px;
    background: var(--old-card);
    padding: 16px;
}

.frontdesk-patient-card,
.frontdesk-billing-card {
    display: grid;
    gap: 14px;
}

.frontdesk-patient-head,
.frontdesk-billing-head,
.frontdesk-activity-card {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
}

.frontdesk-patient-head h3,
.frontdesk-billing-head h3,
.frontdesk-activity-card h3,
.frontdesk-stock-card h3 {
    margin: 0 0 4px;
    color: var(--old-text);
}

.frontdesk-patient-head p,
.frontdesk-billing-head p,
.frontdesk-activity-card p,
.frontdesk-stock-card p,
.frontdesk-activity-card time {
    margin: 0;
    color: var(--old-muted);
}

.frontdesk-patient-head > span {
    border-radius: 999px;
    background: var(--old-bg);
    color: var(--old-text);
    padding: 6px 10px;
    font-size: 12px;
    font-weight: 850;
}

.frontdesk-patient-meta,
.frontdesk-money-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
}

.frontdesk-patient-meta {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.frontdesk-patient-meta span,
.frontdesk-money-grid span {
    display: grid;
    gap: 3px;
    border-radius: 8px;
    background: var(--old-bg);
    color: var(--old-text);
    padding: 10px;
}

.frontdesk-patient-meta b,
.frontdesk-money-grid b {
    color: var(--old-muted);
    font-size: 11px;
    text-transform: uppercase;
}

.frontdesk-billing-items {
    margin: 0;
    padding: 10px 12px;
    border: 1px solid var(--old-border);
    border-radius: 8px;
    background: var(--old-card-soft);
    color: var(--old-muted);
    font-size: 12px;
    line-height: 1.45;
}

.frontdesk-patient-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.frontdesk-checkin-form {
    display: grid;
    grid-template-columns: minmax(180px, 1fr) minmax(160px, 220px) 140px auto;
    gap: 10px;
    align-items: center;
}

.frontdesk-checkin-form input,
.frontdesk-checkin-form select {
    min-height: 42px;
    border-radius: 8px;
    border-color: var(--old-border);
    background: var(--old-bg);
    color: var(--old-text);
}

.frontdesk-activity-card {
    align-items: center;
    justify-content: flex-start;
}

.frontdesk-activity-card > div {
    flex: 1;
}

.frontdesk-activity-card time {
    white-space: nowrap;
}

.frontdesk-stock-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 12px;
}

.frontdesk-stock-card {
    display: grid;
    gap: 10px;
    border-left: 5px solid var(--purple);
}

.frontdesk-stock-card.low {
    border-left-color: var(--danger);
}

.frontdesk-stock-card strong {
    color: var(--old-text);
    font-size: 17px;
}

.frontdesk-stock-card span {
    color: var(--old-muted);
}

.frontdesk-stock-card b {
    color: var(--danger);
}

.appointment-header,
.followup-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
}

.appointment-header h2,
.followup-header h2 {
    margin: 0 0 4px;
    color: var(--old-text);
    font-size: 24px;
}

.appointment-header p,
.followup-header p {
    margin: 0;
    color: var(--old-muted);
}

.appointment-stats,
.followup-stats {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
}

.appointment-stat,
.followup-stat {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border: 1px solid var(--old-border);
    border-radius: 4px;
    background: var(--old-card);
    padding: 16px 20px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.015);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.appointment-stat:hover,
.followup-stat:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(0,0,0,0.035);
}

.appointment-stat p,
.followup-stat p {
    margin: 0 0 4px;
    color: var(--old-muted);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.appointment-stat strong,
.followup-stat strong {
    color: var(--old-text);
    font-size: 28px;
    font-weight: 700;
}

.appointment-stat-content {
    display: flex;
    flex-direction: column;
}

.appointment-stat-icon.soft-icon {
    width: 44px;
    height: 44px;
    border-radius: 4px;
    flex-shrink: 0;
}

.appointment-stat.red,
.followup-stat.red {
    border-color: color-mix(in srgb, var(--danger), transparent 60%);
}

.appointment-stat.gray,
.followup-stat.gray {
    border-color: color-mix(in srgb, var(--gray), transparent 60%);
}

.appointment-stat.purple,
.followup-stat.purple {
    border-color: color-mix(in srgb, var(--purple), transparent 60%);
}

.appointment-stat.green,
.followup-stat.green {
    border-color: color-mix(in srgb, var(--success), transparent 60%);
}

.appointment-stat.yellow {
    border-color: color-mix(in srgb, #ca8a04, transparent 60%);
}

.appointment-controls,
.followup-controls {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
    background: var(--old-card);
    border: 1px solid var(--old-border);
    border-radius: 4px;
    padding: 14px 18px;
    margin-bottom: 20px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.01);
}

.appointment-controls input[type="search"],
.followup-controls input[type="search"] {
    flex: 2;
    min-width: 200px;
}

.appointment-controls input[type="date"],
.appointment-controls select,
.followup-controls select {
    flex: 1;
    min-width: 150px;
}

.appointment-controls input,
.appointment-controls select,
.followup-controls input,
.followup-controls select {
    min-height: 44px;
    border-radius: 4px;
    border: 1px solid var(--old-border);
    background: var(--old-card);
    color: var(--old-text);
    padding: 0 12px;
}

.appointment-controls .button,
.followup-controls .button {
    min-height: 44px;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.appointment-worklist,
.followup-list {
    display: grid;
    gap: 12px;
}

.appointment-card {
    display: grid;
    grid-template-columns: 110px minmax(0, 1fr);
    gap: 20px;
    border: 1px solid var(--old-border);
    border-left: 5px solid var(--purple);
    border-radius: 4px;
    background: var(--old-card);
    padding: 20px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.015);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.appointment-card:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(0,0,0,0.03);
}

.appointment-card.status-neutral { border-left-color: var(--gray); }
.appointment-card.status-yellow { border-left-color: #ca8a04; }
.appointment-card.status-purple { border-left-color: var(--purple); }
.appointment-card.status-green { border-left-color: var(--success); }
.appointment-card.status-gray { border-left-color: #6b7280; }
.appointment-card.status-red { border-left-color: var(--danger); }

.appointment-card-time {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    border-right: 1px solid var(--old-border);
    padding-right: 16px;
    height: fit-content;
    align-self: center;
}

.appointment-card-time strong {
    color: var(--accent);
    font-size: 18px;
    font-weight: 700;
}

.appointment-card-time span {
    color: var(--old-muted);
    font-size: 11.5px;
    margin-top: 4px;
}

.appointment-note {
    background: rgba(0,0,0,0.015);
    border-left: 3px solid var(--old-muted);
    padding: 8px 12px;
    border-radius: 0 6px 6px 0;
    font-size: 13.5px;
    margin: 12px 0 6px;
    color: var(--old-text);
    font-style: italic;
}

.appointment-card-main {
    display: grid;
    gap: 12px;
    min-width: 0;
}

.appointment-card-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.appointment-card h3 {
    margin: 0 0 4px;
    color: var(--old-text);
    font-size: 16px;
    font-weight: 650;
}

.appointment-card p {
    margin: 0;
    color: var(--old-muted);
    font-size: 13.5px;
}

.appointment-metadata-bar {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
    margin: 8px 0;
    padding: 12px 16px;
    background: var(--old-bg);
    border: 1px solid var(--old-border);
    border-radius: 4px;
}

.meta-item {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.meta-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 4px;
    background: var(--accent-soft);
    color: var(--accent);
    flex-shrink: 0;
}

:root[data-theme="dark"] .meta-icon {
    background: rgba(255, 255, 255, 0.05);
    color: var(--accent);
}

.meta-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.meta-text small {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--old-muted);
    line-height: 1.2;
}

.meta-text strong {
    font-size: 13px;
    font-weight: 600;
    color: var(--old-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.3;
}

.appointment-card-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 14px;
    border-top: 1px solid rgba(0,0,0,0.03);
    padding-top: 12px;
}

.appointment-card-actions form {
    margin: 0;
}

@media (max-width: 900px) {
    .appointment-metadata-bar {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
    }
}

@media (max-width: 768px) {
    .appointment-controls,
    .followup-controls {
        flex-direction: column;
        align-items: stretch;
    }
    .appointment-controls input,
    .appointment-controls select,
    .appointment-controls .button,
    .followup-controls input,
    .followup-controls select,
    .followup-controls .button {
        width: 100% !important;
        flex: none !important;
    }
    .appointment-metadata-bar {
        grid-template-columns: 1fr;
        gap: 10px;
    }
}

.followup-card {
    display: grid;
    gap: 14px;
    border: 1px solid var(--old-border);
    border-left: 5px solid var(--purple);
    border-radius: 8px;
    background: var(--old-card);
    padding: 16px;
}

.followup-card-main,
.followup-actions {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
}

.followup-card h3 {
    margin: 0 0 4px;
    color: var(--old-text);
}

.followup-card p {
    margin: 0;
    color: var(--old-muted);
}

.followup-meta-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
}

.followup-meta-grid span {
    display: grid;
    gap: 3px;
    border-radius: 8px;
    background: var(--old-bg);
    color: var(--old-text);
    font-size: 13px;
    padding: 10px;
}

.followup-meta-grid b {
    color: var(--old-muted);
    font-size: 11px;
    text-transform: uppercase;
}

.followup-diagnosis {
    display: grid;
    gap: 6px;
    color: var(--old-text);
}

.followup-diagnosis p {
    line-height: 1.6;
}

.rx-repeater {
    display: grid;
    gap: 10px;
}

.rx-line {
    display: grid;
    gap: 10px;
    align-items: end;
    border: 1px solid var(--old-border);
    border-radius: 8px;
    background: rgba(95, 93, 88, 0.04);
    padding: 12px;
}

:root[data-theme="dark"] .rx-line {
    background: rgba(255, 255, 255, 0.05);
}

.medication-line {
    grid-template-columns: minmax(180px, 1.5fr) repeat(4, minmax(85px, 1fr)) 36px;
}

.glasses-line {
    grid-template-columns: minmax(130px, 0.7fr) minmax(170px, 1fr) minmax(190px, 1.3fr) 36px;
}

@media (min-width: 921px) and (max-width: 1400px) {
    .medication-line {
        grid-template-columns: repeat(2, 1fr) 36px;
    }
    .medication-line label:first-child {
        grid-column: span 2;
    }
    .medication-line label:nth-child(2),
    .medication-line label:nth-child(3),
    .medication-line label:nth-child(4),
    .medication-line label:nth-child(5) {
        grid-column: span 1;
    }
    .medication-line .repeater-remove {
        grid-column: 3;
        grid-row: 1 / span 2;
        align-self: center;
    }

    .glasses-line {
        grid-template-columns: 1fr 1fr 36px;
    }
    .glasses-line label:first-child {
        grid-column: span 1;
    }
    .glasses-line label:nth-child(2) {
        grid-column: span 1;
    }
    .glasses-line label:nth-child(3) {
        grid-column: span 2;
    }
    .glasses-line .repeater-remove {
        grid-column: 3;
        grid-row: 1 / span 2;
        align-self: center;
    }
}

.rx-line label {
    display: grid;
    min-width: 0;
    gap: 6px;
    color: var(--old-muted);
    font-size: 12px;
    font-weight: 800;
}

.rx-line input {
    min-width: 0;
}

.repeater-remove {
    width: 36px;
    height: 40px;
    border: 1px solid var(--old-border);
    border-radius: 8px;
    background: var(--old-card);
    color: var(--old-muted);
    cursor: pointer;
    font-size: 18px;
    font-weight: 900;
}

/* "Fulfil from stock" strip - its own full-width row under the prescription,
   so the pickers never get clipped by the fixed prescription grid. */
.rx-line .rx-fulfil-strip {
    grid-column: 1 / -1;
    display: flex;
    flex-wrap: wrap;
    align-items: end;
    gap: 10px 14px;
    margin-top: 6px;
    padding-top: 12px;
    border-top: 1px dashed var(--old-border);
}
.rx-fulfil-lead {
    align-self: center;
    max-width: 210px;
    font-size: 12px;
    font-weight: 800;
    color: var(--old-muted);
    line-height: 1.35;
}
.rx-fulfil-lead small { display: block; font-weight: 600; opacity: 0.82; }
.rx-fulfil-strip label {
    display: grid;
    gap: 6px;
    min-width: 0;
    color: var(--old-muted);
    font-size: 12px;
    font-weight: 800;
}
.rx-fulfil-strip select { min-width: 240px; }
.rx-fulfil-strip .rx-qty,
.rx-fulfil-strip .rx-qty input { width: 90px; min-width: 90px; }

.repeater-remove:hover {
    border-color: rgba(220, 38, 38, 0.35);
    color: var(--red);
}

.repeater-add {
    justify-self: start;
}

/* Diagnosis + OD/OS/OU laterality picker (eye-care consultation) */
.dx-field {
    grid-column: 1 / -1;
    display: grid;
    gap: 8px;
}
.dx-field-label {
    color: var(--old-muted);
    font-size: 12px;
    font-weight: 800;
}
.dx-repeater .dx-row {
    display: flex;
    gap: 10px;
    align-items: center;
}
.dx-row input[data-dx-input] {
    flex: 1 1 auto;
    min-width: 0;
}
.dx-row .dx-eye {
    flex: 0 0 auto;
    width: 160px;
}
@media (max-width: 620px) {
    .dx-row { flex-wrap: wrap; }
    .dx-row .dx-eye { flex: 1 1 auto; width: auto; }
}

/* Clinical sections: flat cards that echo the patient-history visit log, so
   the note page reads as one system. Sharp (4px), no shadow; a brand-green
   left rail + tinted icon mark the open section. Colour via tokens => dark
   aware. Pure restyle of the existing <details>/<summary> markup. */
.clinical-section {
    background: var(--panel-raised);
    border: 1px solid var(--line);
    border-left: 2px solid transparent;
    border-radius: 4px;
    overflow: hidden;
}

.clinical-section[open] {
    border-left-color: var(--accent);
}

.clinical-section-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 9px 12px;
    margin: 0;
    cursor: pointer;
    list-style: none;
    user-select: none;
}

.clinical-section-summary::-webkit-details-marker {
    display: none;
}

.clinical-section-summary:hover {
    background: color-mix(in srgb, var(--brand-navy) 4%, transparent);
}

.clinical-section[open] > .clinical-section-summary {
    border-bottom: 1px solid var(--line);
}

/* title block takes the row so the heading never word-wraps per word */
.clinical-section-summary > div {
    flex: 1 1 auto;
    min-width: 0;
}

.clinical-section-summary h3 {
    font-size: 13px;
    font-weight: 800;
    line-height: 1.25;
    margin: 0;
    overflow-wrap: anywhere;
}

/* icon rendered as a small tinted chip */
.clinical-section-summary .clinical-section-icon {
    flex: none;
    width: 28px;
    height: 28px;
    padding: 6px;
    box-sizing: border-box;
    border-radius: 4px;
    color: var(--muted);
    background: color-mix(in srgb, var(--ink) 6%, transparent);
    transition: color 0.18s ease, background 0.18s ease;
}

.clinical-section[open] .clinical-section-summary .clinical-section-icon {
    color: var(--accent);
    background: color-mix(in srgb, var(--accent) 14%, transparent);
}

.section-chevron {
    flex: none;
    width: 9px;
    height: 9px;
    border-right: 2px solid var(--muted);
    border-bottom: 2px solid var(--muted);
    transform: rotate(-45deg);
    transition: transform 0.18s ease, border-color 0.18s ease;
}

.clinical-section[open] .section-chevron {
    transform: rotate(45deg);
    border-color: var(--accent);
}

/* section body: pad the fields inside the card, top-gap only when open */
.clinical-section > :not(.clinical-section-summary) {
    padding-left: 14px;
    padding-right: 14px;
}

.clinical-section[open] > .clinical-section-summary + * {
    padding-top: 12px;
}

.clinical-section > :not(.clinical-section-summary):last-child {
    padding-bottom: 14px;
}

.field-grid textarea {
    min-height: 88px;
    resize: vertical;
}

/* One typeface everywhere in the app: form fields inherit the base UI
   stack. (Poppins survives only on the public booking page.) */

.eye-exam-table {
    display: grid;
    overflow: hidden;
    border: 1px solid var(--old-border);
    border-radius: 8px;
    background: var(--old-card);
}

.eye-exam-row {
    display: grid;
    grid-template-columns: minmax(150px, 0.62fr) repeat(2, minmax(0, 1fr));
    align-items: stretch;
    border-top: 1px solid var(--old-border);
}

.eye-exam-row:first-child {
    border-top: 0;
}

.eye-exam-head {
    min-height: 36px;
    background: rgba(95, 93, 88, 0.08);
    color: var(--old-text);
    font-size: 12px;
    font-weight: 900;
    text-transform: uppercase;
}

.eye-exam-head span,
.eye-exam-anatomy {
    display: flex;
    align-items: center;
    padding: 8px 10px;
}

.eye-exam-head span + span,
.eye-exam-cell {
    border-left: 1px solid var(--old-border);
}

.eye-exam-anatomy {
    color: var(--old-text);
    font-size: 13px;
    font-weight: 850;
}

.eye-exam-cell {
    display: grid;
    gap: 8px;
    align-items: center;
    padding: 8px;
    color: var(--old-muted);
    font-size: 12px;
    font-weight: 800;
}

.eye-exam-cell > span {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
}

.eye-exam-cell input {
    min-height: 40px;
    width: 100%;
    border-radius: 8px;
    padding: 8px 12px;
    color: var(--old-text);
}

.checkbox-field {
    display: inline-flex;
    min-height: 44px;
    align-items: center;
    gap: 10px;
    border: 1px solid var(--line-strong);
    border-radius: 12px;
    padding: 0 12px;
    background: var(--input);
    color: var(--old-text);
}

.checkbox-field input {
    width: 18px;
    height: 18px;
}

.form-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 12px;
    border-top: 1px solid var(--old-border);
    padding-top: 18px;
}

.intake-reasons {
    margin-top: 14px;
}

.service-picker,
.queue-board-grid {
    display: grid;
    gap: 12px;
}

.service-line {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto 92px;
    gap: 14px;
    align-items: center;
    border: 1px solid var(--old-border);
    border-radius: 8px;
    background: rgba(249, 250, 251, 0.58);
    padding: 14px;
}

:root[data-theme="dark"] .service-line {
    background: rgba(30, 41, 59, 0.45);
}

.service-line strong,
.queue-patient-card strong {
    color: var(--old-text);
}

.service-line small,
.queue-patient-card small {
    display: block;
    margin-top: 4px;
    color: var(--old-muted);
}

.service-line > span {
    color: var(--old-text);
    font-weight: 850;
}

.service-line label {
    display: grid;
    gap: 4px;
    color: var(--old-muted);
    font-size: 12px;
    font-weight: 800;
}

.queue-workboard {
    margin-bottom: 20px;
}

.queue-board-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    padding: 22px;
}

.queue-patient-card {
    display: grid;
    gap: 12px;
    border: 1px solid var(--old-border);
    border-left: 1px solid var(--old-border);
    border-radius: 8px;
    background: rgba(249, 250, 251, 0.58);
    padding: 16px;
}

:root[data-theme="dark"] .queue-patient-card {
    background: rgba(30, 41, 59, 0.45);
}

.queue-patient-card.status-waiting {
    border-left-color: var(--yellow);
}

.queue-patient-card.status-in-consultation {
    border-left-color: var(--old-border);
}

.queue-patient-card.status-billing {
    border-left-color: var(--purple);
}

.queue-patient-card.status-completed {
    border-left-color: var(--green);
}

.queue-patient-head,
.queue-meta,
.queue-action-form {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}

.queue-patient-head {
    justify-content: space-between;
}

.queue-patient-card p {
    margin: 0;
    color: var(--old-text);
    font-weight: 750;
}

.queue-meta span {
    border-radius: 999px;
    background: var(--accent-soft);
    color: var(--accent);
    padding: 5px 10px;
    font-size: 12px;
    font-weight: 800;
    text-transform: capitalize;
}

.queue-action-form select {
    width: min(210px, 100%);
    min-height: 40px;
    border-radius: 8px;
}

.queue-action-form .button {
    min-height: 38px;
    border-radius: 8px;
    padding: 0 12px;
}

.field-grid input:disabled {
    opacity: 0.85;
    cursor: not-allowed;
}

.field-suggestion-select {
    min-height: 40px;
    border-radius: 8px;
    padding: 8px 12px;
    color: var(--old-muted);
}

.suggestion-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.suggestion-chip {
    min-height: 32px;
    border: 1px solid color-mix(in srgb, var(--accent), transparent 68%);
    border-radius: 999px;
    padding: 0 12px;
    background: var(--accent-soft);
    color: var(--accent);
    box-shadow: none;
    font-size: 12px;
    font-weight: 800;
}

.suggestion-chip:hover {
    background: color-mix(in srgb, var(--accent), transparent 86%);
    transform: translateY(-1px);
}

.workflow-table-card {
    margin-bottom: 20px;
}

.table-wrap.flush {
    margin-top: 0;
    border-width: 0;
    border-radius: 0;
}

.empty-state {
    padding: 28px;
}

.empty-state h3 {
    margin: 0 0 6px;
    color: var(--old-text);
}

.empty-state p {
    margin: 0;
    color: var(--old-muted);
}

/* Table standard (owner-picked, from the Find Patient roster): compact
   12px rows, slim 6px cell padding, small uppercase headers, compact
   controls inside cells. Every table app-wide inherits this. */
table {
    width: 100%;
    border-collapse: collapse;
    background: var(--panel-solid);
    font-size: 12px;
}

th,
td {
    padding: 6px 10px;
    border-bottom: 1px solid var(--line);
    text-align: left;
    white-space: nowrap;
    vertical-align: middle;
}

th {
    color: var(--muted);
    font-size: 10.5px;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

td .button,
td .mini-button {
    padding: 2px 8px;
    font-size: 10.5px;
    min-height: 0;
    height: auto;
    line-height: 1.7;
    white-space: nowrap;
}
td .badge {
    padding: 2px 6px;
    font-size: 10.5px;
    white-space: nowrap;
}

tbody tr:hover {
    background: var(--accent-soft);
}

.empty {
    color: var(--muted);
    text-align: center;
}

.alert {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 12px 0 14px;
    padding: 2px 12px;
    border-radius: 0; /* flat and sharp: no curve */
    font-size: 12.5px;
    font-weight: 600;
    line-height: 1.4;
    overflow-wrap: anywhere; /* long order refs wrap, never overflow */
}

.alert.error {
    background: color-mix(in srgb, var(--danger), transparent 90%);
    color: var(--danger);
    border: 1px solid color-mix(in srgb, var(--danger), transparent 62%);
    border-left: 3px solid var(--danger);
}

.alert.success {
    background: color-mix(in srgb, var(--success), transparent 90%);
    color: var(--success);
    border: 1px solid color-mix(in srgb, var(--success), transparent 62%);
    border-left: 3px solid var(--success);
}

.alert .alert-close {
    flex-shrink: 0;
    margin-left: auto;
    background: none;
    border: 0;
    border-radius: 0;
    color: currentColor;
    opacity: 0.55;
    font-size: 15px;
    line-height: 1;
    cursor: pointer;
    padding: 0 2px;
    transition: opacity 0.15s ease;
}

.alert .alert-close:hover { opacity: 1; }

.alert.hide {
    animation: alertFadeOut 0.25s ease-in forwards;
}

@keyframes alertFadeOut {
    from { opacity: 1; }
    to { opacity: 0; transform: translateY(-4px); }
}

code {
    padding: 2px 6px;
    border-radius: 7px;
    background: var(--accent-soft);
    color: var(--ink);
}

@media (max-width: 1080px) {
    .grid.four,
    .stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 920px) {
    .app-shell {
        grid-template-columns: 1fr;
    }

    .sidebar {
        position: static;
        height: auto;
    }

    .grid.two,
    .grid.three,
    .grid.four,
    .stats,
    .stats-strip,
    .landing-footer {
        grid-template-columns: 1fr;
    }

    .topbar {
        align-items: flex-start;
        flex-direction: column;
        border-radius: 0 !important;
    }

    .section-header,
    .user-chip {
        align-items: flex-start;
        flex-direction: column;
        border-radius: 16px;
    }
}

@media (max-width: 900px) {
    .landing-nav {
        width: calc(100% - 32px) !important;
        margin: 0 auto !important;
        padding: 16px 0 !important;
        display: flex !important;
        flex-direction: row !important;
        justify-content: space-between !important;
        align-items: center !important;
        position: relative !important;
    }

    /* Landing Page mobile menu button (hidden on desktop) */
    .landing-menu-toggle {
        display: block !important;
        position: relative !important;
        width: 32px !important;
        height: 32px !important;
        min-height: 0 !important;
        background: transparent !important;
        border: none !important;
        cursor: pointer !important;
        padding: 0 !important;
        z-index: 2001 !important;
        color: var(--ink-strong) !important;
        flex-shrink: 0 !important;
        box-shadow: none !important;
        border-radius: 0 !important;
    }

    .landing-menu-toggle:hover {
        transform: none !important;
    }

    :root[data-theme="dark"] .landing-menu-toggle {
        color: #ffffff !important;
    }

    .landing-menu-toggle .hamburger-line {
        position: absolute !important;
        left: 6px !important;
        right: 6px !important;
        height: 2px !important;
        background-color: currentColor !important;
        border-radius: 2px !important;
        transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
    }

    .landing-menu-toggle .hamburger-line:nth-child(1) {
        top: 10px !important;
    }

    .landing-menu-toggle .hamburger-line:nth-child(2) {
        top: 15px !important;
    }

    .landing-menu-toggle .hamburger-line:nth-child(3) {
        top: 20px !important;
    }

    .landing-menu-toggle.active .hamburger-line:nth-child(1) {
        transform: translateY(5px) rotate(45deg) !important;
    }

    .landing-menu-toggle.active .hamburger-line:nth-child(2) {
        opacity: 0 !important;
    }

    .landing-menu-toggle.active .hamburger-line:nth-child(3) {
        transform: translateY(-5px) rotate(-45deg) !important;
    }

    /* Landing Links Mobile Dropdown style */
    .landing-links {
        display: flex !important;
        position: absolute !important;
        top: 100% !important;
        left: 0 !important;
        right: 0 !important;
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 8px !important;
        padding: 20px !important;
        background: rgba(255, 255, 255, 0.98) !important;
        border: 1px solid rgba(0, 0, 0, 0.08) !important;
        border-radius: 16px !important;
        box-shadow: 0 12px 30px rgba(0, 0, 0, 0.1) !important;
        z-index: 2000 !important;
        backdrop-filter: blur(12px) !important;
        -webkit-backdrop-filter: blur(12px) !important;
        
        /* Animation: starts hidden, slides & fades in */
        opacity: 0 !important;
        visibility: hidden !important;
        transform: translateY(-10px) !important;
        transition: opacity 0.25s ease, transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.25s !important;
    }

    :root[data-theme="dark"] .landing-links {
        background: rgba(18, 18, 18, 0.98) !important;
        border-color: rgba(255, 255, 255, 0.08) !important;
        box-shadow: 0 12px 30px rgba(0, 0, 0, 0.5) !important;
    }

    .landing-links.mobile-open {
        opacity: 1 !important;
        visibility: visible !important;
        transform: translateY(0) !important;
    }

    .landing-links a {
        display: block !important;
        padding: 12px 16px !important;
        font-size: 16px !important;
        font-weight: 700 !important;
        color: var(--ink-strong) !important;
        border-radius: 8px !important;
        transition: background 0.2s ease, color 0.2s ease !important;
        text-align: center !important;
        text-decoration: none !important;
    }

    :root[data-theme="dark"] .landing-links a {
        color: #ffffff !important;
    }

    .landing-links a:not(.button):hover {
        background: rgba(0, 0, 0, 0.04) !important;
    }

    :root[data-theme="dark"] .landing-links a:not(.button):hover {
        background: rgba(255, 255, 255, 0.04) !important;
    }

    .landing-links a.button {
        margin-top: 8px !important;
        padding: 14px 20px !important;
    }
}

@media (max-width: 560px) {
    .auth-body,
    .main {
        padding: 18px;
    }

    .auth-card {
        padding: 24px;
    }

    .landing-brand-mark {
        width: min(360px, 86vw);
        height: auto;
    }

    .floating-theme-toggle {
        top: auto;
        right: 16px;
        bottom: 16px;
    }
}

/* Eyeston CMR role workflow shell */
:root {
    --old-bg: #f3f4f8;
    --old-card: #f3f4f8;
    --old-card-soft: rgba(243, 244, 248, 0.72);
    --old-border: rgba(15, 23, 42, 0.08);
    --old-text: #071525;
    --old-muted: #5d6f84;
    --old-sidebar: rgba(243, 244, 248, 0.75);
    --old-hover: rgba(31, 63, 104, 0.06);
    --old-active: rgba(31, 63, 104, 0.1);
    --neutral: #1f3f68;
    --green: #36a66a;
    --yellow: #956400;
    --orange: #b45309;
    --purple: #1f3f68;
    --indigo: #1f3f68;
    --pink: #db2777;
    --red: #dc2626;
    --gray: #6b7280;
}

:root[data-theme="dark"] {
    --old-bg: #121212;
    --old-card: #161616;
    --old-card-soft: #1a1a1a;
    --old-border: #2c2c2c;
    --old-text: #cccccc;
    --old-muted: #a7a29a;
    --old-sidebar: #161616;
    --old-hover: rgba(255, 255, 255, 0.06);
    --old-active: rgba(255, 255, 255, 0.09);
}

.app-body {
    background: var(--old-bg);
    color: var(--old-text);
}

.old-workflow-shell {
    display: block;
    min-height: 100vh;
}

.old-sidebar {
    position: fixed;
    inset: 0 auto 0 0;
    z-index: 50;
    display: flex;
    width: 256px;
    height: 100vh;
    flex-direction: column;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 0;
    background: var(--old-sidebar);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    color: var(--old-text);
    border-right: 1px solid var(--old-border);
    transition: width 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.sidebar-collapsed .old-sidebar {
    overflow-x: visible;
    overflow-y: visible;
}

.sidebar-header {
    display: flex;
    height: 68px;
    align-items: center;
    justify-content: flex-start;
    border-bottom: 1px solid var(--old-border);
    gap: 12px;
    padding: 0 18px;
    flex-shrink: 0;
    transition: padding 0.25s cubic-bezier(0.4, 0, 0.2, 1), justify-content 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.specialty-mark {
    display: grid;
    width: 34px;
    height: 34px;
    place-items: center;
    color: var(--specialty-color);
    border: 1px solid color-mix(in srgb, var(--specialty-color) 25%, transparent);
    background: color-mix(in srgb, var(--specialty-color) 10%, var(--old-card));
    border-radius: 10px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.07);
    flex-shrink: 0;
    transition: width 0.25s ease, height 0.25s ease;
}

.sidebar-brand {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
    overflow: hidden;
    opacity: 1;
    transition: opacity 0.2s ease, max-width 0.2s ease;
    white-space: nowrap;
}

.sidebar-brand-name {
    font-size: 16px;
    font-weight: 800;
    letter-spacing: 0;
    color: var(--old-text);
    line-height: 1;
}

.sidebar-specialty-pill {
    display: inline-block;
    font-size: 10.5px;
    font-weight: 600;
    color: var(--specialty-color);
    background: color-mix(in srgb, var(--specialty-color) 10%, transparent);
    border: 1px solid color-mix(in srgb, var(--specialty-color) 20%, transparent);
    border-radius: 999px;
    padding: 1px 7px;
    line-height: 1.5;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

/* ---- Sidebar Footer (user card + toggle) ---- */
.sidebar-footer {
    display: flex;
    flex-direction: column;
    gap: 0;
    border-top: 1px solid var(--old-border);
    margin-top: auto;
}

.sidebar-user-card {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 14px 16px;
    border-bottom: 1px solid var(--old-border);
    transition: background 0.15s ease;
}

.sidebar-user-card:hover {
    background: var(--old-hover);
}

.sidebar-avatar {
    display: grid;
    place-items: center;
    flex-shrink: 0;
    width: 34px;
    height: 34px;
    border-radius: 10px;
    background: color-mix(in srgb, var(--specialty-color) 15%, var(--old-card));
    color: var(--specialty-color);
    font-size: 13px;
    font-weight: 800;
    border: 1px solid color-mix(in srgb, var(--specialty-color) 25%, transparent);
    user-select: none;
}

.sidebar-user-info {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    transition: opacity 0.2s ease, max-width 0.2s ease;
}

.sidebar-user-info strong {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: var(--old-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sidebar-user-info span {
    display: block;
    font-size: 11px;
    color: var(--old-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.old-nav {
    display: block;
    flex: 1;
    margin: 0;
    padding: 12px 0;
    overflow-y: auto;
    overflow-x: hidden;
}

.sidebar-collapsed .old-nav {
    overflow: visible;
}

.nav-category {
    position: relative;
    margin-bottom: 6px;
}

.old-nav > .nav-direct {
    min-height: 40px;
    margin-bottom: 4px;
    color: var(--old-muted);
}

.nav-category summary {
    display: flex;
    width: auto;
    min-height: 40px;
    align-items: center;
    justify-content: space-between;
    list-style: none;
    cursor: pointer;
    border-radius: 8px;
    padding: 8px 12px;
    margin: 2px 8px;
    color: var(--old-muted);
    font-size: 13.5px;
    font-weight: 500;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.nav-category summary::-webkit-details-marker {
    display: none;
}

.nav-category summary:hover {
    background: var(--old-hover);
    color: var(--old-text);
}

.nav-icon {
    display: inline-flex;
    width: 20px;
    height: 20px;
    flex: 0 0 20px;
    align-items: center;
    justify-content: center;
    background: transparent !important;
    color: var(--old-muted);
    transition: color 0.15s ease, transform 0.15s ease;
}

.nav-icon .q-icon {
    width: 16px;
    height: 16px;
}

.nav-icon.small .q-icon {
    width: 14px;
    height: 14px;
}

.specialty-svg {
    width: 18px;
    height: 18px;
}

.nav-category summary span:nth-child(2) {
    flex: 1;
    margin-left: 10px;
}

.nav-chevron {
    color: var(--old-muted);
    transform: rotate(0deg);
    transition: transform 160ms ease;
}

.nav-category[open] .nav-chevron {
    transform: rotate(90deg);
}

.nav-items {
    display: grid;
    gap: 2px;
    margin: 4px 0 4px 16px;
    padding-left: 12px;
    border-left: 1px solid var(--old-border);
}

.old-nav a,
.sidebar-bottom a {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 38px;
    border-radius: 8px;
    padding: 8px 12px;
    margin: 2px 8px;
    color: var(--old-muted);
    font-size: 13.5px;
    font-weight: 500;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.old-nav a:hover,
.sidebar-bottom a:hover {
    background: var(--old-hover);
    color: var(--old-text);
}

.old-nav a:hover .nav-icon,
.sidebar-bottom a:hover .nav-icon {
    color: var(--old-text);
}

.old-nav a.active {
    background: var(--old-active);
    color: var(--old-text);
    font-weight: 600;
}

.old-nav a.active .nav-icon {
    color: #1f3f68 !important;
}

.old-nav a.active::before {
    content: "";
    position: absolute;
    left: 0;
    top: 8px;
    bottom: 8px;
    width: 3px;
    border-radius: 0 4px 4px 0;
    background: #d8d7d2;
}

.nav-icon.small {
    width: 18px;
    height: 18px;
    flex-basis: 18px;
    color: var(--old-muted);
}

.sidebar-bottom {
    display: grid;
    gap: 2px;
    padding: 8px 0;
}

.sidebar-bottom a {
    margin: 2px 8px;
}

.sidebar-toggle-wrapper {
    display: flex;
    justify-content: flex-end;
    padding: 10px 16px;
    border-top: 1px solid var(--old-border);
}

.sidebar-toggle-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    border: 1px solid var(--old-border);
    background: var(--old-card);
    color: var(--old-muted);
    cursor: pointer;
    transition: all 0.2s ease;
}

.sidebar-toggle-btn:hover {
    color: var(--old-text);
    background: var(--old-hover);
    border-color: color-mix(in srgb, var(--old-border), var(--old-text) 25%);
}

.sidebar-toggle-btn .toggle-arrow {
    display: inline-block;
    font-size: 16px;
    line-height: 1;
    transform: rotate(0deg);
    transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.old-main {
    min-height: 100vh;
    margin-left: 256px;
    padding: 0;
    background: var(--old-bg);
    transition: margin-left 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

@media (min-width: 821px) {
    /* Collapsed Sidebar */
    .sidebar-collapsed .old-sidebar {
        width: 68px;
    }

    .sidebar-collapsed .old-main {
        margin-left: 68px;
    }

.sidebar-collapsed .old-sidebar .sidebar-header {
        height: 72px;
        min-height: 72px;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        padding: 0;
    }

    .sidebar-collapsed .old-sidebar .sidebar-brand-mark {
        width: 54px;
        height: 38px;
    }

    /* Hide all text labels when collapsed */
    .sidebar-collapsed .old-sidebar .sidebar-brand,
    .sidebar-collapsed .old-sidebar .sidebar-user-info,
    .sidebar-collapsed .old-sidebar .nav-category summary span:not(.nav-icon),
    .sidebar-collapsed .old-sidebar .old-nav a span:not(.nav-icon),
    .sidebar-collapsed .old-sidebar .sidebar-bottom a span:not(.nav-icon),
    .sidebar-collapsed .old-sidebar .nav-chevron {
        opacity: 0;
        max-width: 0;
        padding: 0;
        margin: 0;
        overflow: hidden;
        pointer-events: none;
        display: none !important;
    }

    .sidebar-collapsed .old-sidebar .old-nav a,
    .sidebar-collapsed .old-sidebar .sidebar-bottom a,
    .sidebar-collapsed .old-sidebar .nav-category summary {
        margin: 2px 8px;
        padding: 8px 0;
        justify-content: center;
    }

    /* Compact user card when collapsed */
    .sidebar-collapsed .old-sidebar .sidebar-user-card {
        padding: 10px 0;
        justify-content: center;
        border-bottom: none;
    }

    .sidebar-collapsed .old-sidebar .sidebar-toggle-wrapper {
        justify-content: center;
        padding: 10px 0;
    }

    .sidebar-collapsed .old-sidebar .sidebar-toggle-btn .toggle-arrow {
        transform: rotate(180deg);
    }

    /* Flyout menu on hover for category items when collapsed */
    .sidebar-collapsed .old-sidebar .nav-category .nav-items {
        position: absolute;
        left: calc(100% + 6px);
        top: 0;
        display: none !important;
        background: var(--old-card);
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        border: 1px solid var(--old-border);
        border-radius: 10px;
        box-shadow: 0 18px 42px rgba(15, 23, 42, 0.2), 0 4px 12px rgba(15, 23, 42, 0.12);
        opacity: 1;
        padding: 6px;
        min-width: 188px;
        z-index: 120;
        margin: 0;
    }

    /* Override closed details display on hover */
    .sidebar-collapsed .old-sidebar details.nav-category:hover .nav-items,
    .sidebar-collapsed .old-sidebar details.nav-category:not([open]):hover .nav-items {
        display: grid !important;
    }

    .sidebar-collapsed .old-sidebar .nav-category .nav-items a {
        margin: 2px 4px;
        padding: 8px 10px;
        justify-content: flex-start;
    }

    .sidebar-collapsed .old-sidebar .nav-category .nav-items a span:not(.nav-icon) {
        display: inline-block !important;
        opacity: 1 !important;
        max-width: 200px !important;
        pointer-events: auto !important;
    }
}


.old-topbar {
    position: sticky;
    top: 0;
    z-index: 60;
    display: flex;
    min-height: 64px;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    margin: 0;
    padding: 0 28px;
    background: var(--old-sidebar);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border-bottom: 1px solid var(--old-border);
    box-shadow: 0 1px 12px rgba(0, 0, 0, 0.04);
}

.topbar-title {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1;
    min-width: 0;
}

.topbar-context {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.topbar-page-title {
    font-size: 15px;
    font-weight: 700;
    color: var(--old-text);
    letter-spacing: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1;
}

.topbar-breadcrumb {
    font-size: 11.5px;
    color: var(--old-muted);
    font-weight: 500;
    white-space: nowrap;
}

.breadcrumb-link {
    color: inherit;
    text-decoration: none;
    transition: opacity 0.15s ease;
}

.breadcrumb-link:hover {
    text-decoration: underline;
    opacity: 0.85;
}

.priority-pill,
.status-pill {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    border-radius: 999px;
    padding: 0 10px;
    color: #ffffff;
    font-size: 12px;
    font-weight: 800;
    text-transform: capitalize;
}

.role-badge {
    display: inline-flex;
    align-items: center;
    min-height: 20px;
    border-radius: 999px;
    padding: 0 8px;
    color: var(--specialty-color) !important;
    background-color: color-mix(in srgb, var(--specialty-color) 12%, transparent) !important;
    font-size: 11px;
    font-weight: 600;
    text-transform: capitalize;
    border: 1px solid color-mix(in srgb, var(--specialty-color) 20%, transparent);
}

.topbar-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 12px;
}

.topbar-actions select {
    width: auto;
    min-height: 34px;
    border-radius: 999px;
    padding: 0 28px 0 14px;
    background-color: var(--old-hover);
    color: var(--old-text);
    border: 1px solid transparent;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23787774'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2.5' d='M19 9l-7 7-7-7'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 12px;
}

:root[data-theme="dark"] .topbar-actions select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23a7a29a'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2.5' d='M19 9l-7 7-7-7'/%3E%3C/svg%3E");
}

.topbar-actions select:not([disabled]):hover {
    background-color: var(--old-active);
}

.topbar-actions select[disabled] {
    opacity: 0.6;
    cursor: not-allowed;
}

.topbar-actions select:focus {
    outline: none;
    border-color: var(--specialty-color);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--specialty-color) 20%, transparent);
}

.role-switcher {
    position: relative;
    min-width: 168px;
}

.role-switcher summary {
    position: relative;
    display: flex;
    min-height: 42px;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    border: 1px solid var(--old-border);
    border-radius: 10px;
    background: var(--old-card);
    color: var(--old-text);
    cursor: pointer;
    list-style: none;
    padding: 7px 34px 7px 12px;
    transition: background-color 0.16s ease, border-color 0.16s ease, transform 0.16s ease;
}

.role-switcher summary::-webkit-details-marker {
    display: none;
}

.role-switcher summary::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 14px;
    width: 8px;
    height: 8px;
    border-right: 1.5px solid var(--old-muted);
    border-bottom: 1.5px solid var(--old-muted);
    transform: translateY(-65%) rotate(45deg);
    transition: transform 0.16s ease;
}

.role-switcher[open] summary {
    border-color: color-mix(in srgb, var(--accent) 28%, var(--old-border));
    background: color-mix(in srgb, var(--accent) 5%, var(--old-card));
}

.role-switcher[open] summary::after {
    transform: translateY(-25%) rotate(225deg);
}

.role-switcher summary small,
.role-switcher-menu a small {
    display: block;
    color: var(--old-muted);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.08em;
    line-height: 1.2;
    text-transform: uppercase;
}

.role-switcher summary strong,
.role-switcher-menu a strong {
    display: block;
    color: var(--old-text);
    font-size: 13px;
    font-weight: 750;
    line-height: 1.35;
}

.role-switcher-menu {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    z-index: 90;
    display: grid;
    width: min(260px, calc(100vw - 32px));
    gap: 4px;
    border: 1px solid var(--old-border);
    border-radius: 12px;
    background: var(--old-card);
    box-shadow: 0 18px 45px rgba(15, 23, 42, 0.12);
    padding: 6px;
}

:root[data-theme="dark"] .role-switcher-menu {
    box-shadow: 0 20px 45px rgba(0, 0, 0, 0.4);
}

.role-switcher-menu a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    border: 1px solid transparent;
    border-radius: 8px;
    padding: 10px;
    transition: background-color 0.16s ease, border-color 0.16s ease;
}

.role-switcher-menu a:hover {
    border-color: var(--old-border);
    background: var(--old-hover);
}

.role-switcher-menu a.active {
    border-color: color-mix(in srgb, var(--accent) 28%, var(--old-border));
    background: color-mix(in srgb, var(--accent) 7%, var(--old-card));
}

.role-switcher-menu b {
    flex: 0 0 auto;
    border: 1px solid color-mix(in srgb, var(--accent) 25%, transparent);
    border-radius: 6px;
    background: color-mix(in srgb, var(--accent) 8%, transparent);
    color: var(--accent);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.06em;
    padding: 4px 6px;
    text-transform: uppercase;
}

.role-switcher-desk summary {
    min-width: 184px;
}

@media (max-width: 640px) {
    .role-switcher,
    .role-switcher summary {
        width: 100%;
    }

    .role-switcher-menu {
        right: auto;
        left: 0;
        width: 100%;
    }
}

.topbar-actions .theme-toggle {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    border-radius: 999px;
    padding: 0 14px;
    background-color: var(--old-hover);
    color: var(--old-text);
    border: 1px solid transparent;
    box-shadow: none;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
}

.topbar-actions .theme-toggle:hover {
    background-color: var(--old-active);
}

.topbar-actions .theme-toggle-icon {
    border-color: var(--old-border);
    background: var(--old-active);
}

/* ---- Topbar user chip ---- */
.topbar-user-chip {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 6px 4px 10px;
    background: var(--old-hover);
    border: 1px solid var(--old-border);
    border-radius: 0;
    transition: background 0.15s ease;
}

.topbar-user-chip:hover {
    background: var(--old-active);
}

.topbar-avatar {
    display: grid;
    place-items: center;
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--specialty-color) 15%, var(--old-card));
    color: var(--specialty-color);
    font-size: 12px;
    font-weight: 800;
    border: 1.5px solid color-mix(in srgb, var(--specialty-color) 30%, transparent);
    text-decoration: none;
    transition: opacity 0.15s ease;
    user-select: none;
}

.topbar-avatar:hover {
    opacity: 0.85;
}

.topbar-user-name {
    font-size: 13px;
    font-weight: 600;
    color: var(--old-text);
    white-space: nowrap;
    max-width: 160px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.topbar-link {
    display: inline-flex;
    align-items: center;
    min-height: 32px;
    border-radius: 999px;
    padding: 0 12px;
    color: var(--old-muted);
    font-size: 13px;
    font-weight: 500;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.topbar-link:hover {
    background-color: var(--old-hover);
    color: var(--old-text);
}

.topbar-link.muted {
    color: var(--old-muted);
}

.topbar-link.purple {
    color: var(--purple);
}

/* Logout wears the exact signature chip - the diagonal split with the
   knife-cut slanted edge - in both themes (brand blue stays exact in
   dark mode). One authoritative rule; the old shell/theme overrides
   are retired below. */
.logout-button {
    min-height: 24px;
    /* Hairline edge so the navy half never melts into a navy backdrop. */
    border: 1px solid rgba(255, 255, 255, 0.45);
    border-radius: 0;
    padding: 3px 16px 3px 12px;
    background: linear-gradient(115deg, #1f3f68 0 52%, #36a66a 52.2% 100%);
    color: #ffffff;
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    cursor: pointer;
    clip-path: polygon(0 0, 100% 0, calc(100% - 6px) 100%, 0 100%);
    box-shadow: none;
    transition: opacity 0.15s ease;
}

.logout-button:hover {
    opacity: 0.85;
}

.old-page {
    width: min(1280px, 100%);
    margin: 0 auto;
    padding: 24px;
}

.doctor-surface {
    width: 100%;
    max-width: none;
    min-height: calc(100vh - 64px);
    padding: 32px;
}

.eyecare-surface {
    background: #f7f6f3;
}

.dental-surface {
    background: #f7f6f3;
}

:root[data-theme="dark"] .eyecare-surface {
    background: #111111;
}

:root[data-theme="dark"] .dental-surface {
    background: #111111;
}

.dashboard-heading {
    margin-bottom: 28px;
}

.dashboard-heading.split {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
}

.dashboard-heading h1 {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0 0 8px;
    color: var(--old-text);
    font-size: 32px;
    line-height: 1.15;
}

.doctor-surface .dashboard-heading h1 {
    font-size: 40px;
}

.dashboard-heading p {
    margin: 0;
    color: var(--old-muted);
    font-size: 16px;
}

.dashboard-heading strong {
    color: #1f3f68;
}

.heading-icon {
    display: inline-grid;
    width: 34px;
    height: 34px;
    place-items: center;
    border-radius: 8px;
    background: #f7f6f3;
    color: #1f3f68;
    font-size: 10px;
    font-weight: 900;
}

.heading-icon,
.soft-icon {
    font-size: 0;
}

.heading-icon::before,
.soft-icon::before {
    display: none !important;
}

.heading-icon svg,
.heading-icon .q-icon,
.soft-icon svg,
.soft-icon .q-icon {
    width: 20px;
    height: 20px;
    stroke-width: 2px;
    display: block;
}

.soft-icon.large svg,
.soft-icon.large .q-icon {
    width: 30px;
    height: 30px;
}

.date-panel {
    text-align: right;
}

.date-panel strong,
.date-panel span {
    display: block;
}

.date-panel strong {
    color: var(--old-text);
    font-size: 20px;
}

.date-panel span {
    color: var(--old-muted);
    margin-top: 4px;
}

.old-stats,
.doctor-stat-grid,
.front-stat-grid,
.content-grid,
.consultation-grid,
.quick-tile-grid {
    display: grid;
    gap: 24px;
}

.old-stats {
    margin-bottom: 24px;
}

.old-stats.four {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.old-stats.three {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.doctor-stat-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin-bottom: 32px;
}

.front-stat-grid {
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 16px;
    margin-bottom: 24px;
}

.content-grid.admin-grid,
.content-grid.frontdesk-grid {
    grid-template-columns: 1fr 2fr;
    margin-bottom: 24px;
}

.content-grid.doctor-grid {
    grid-template-columns: 2fr 1fr;
    margin-bottom: 32px;
}

.old-card,
.old-stat-card,
.doctor-stat-card,
.front-stat-card {
    background: var(--old-card-soft);
    border: 1px solid var(--old-border);
    border-radius: 16px;
    box-shadow: 0 8px 30px -4px rgba(15, 23, 42, 0.04), 0 1px 3px var(--old-border);
    transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.2s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.2s ease;
}

:root[data-theme="dark"] .old-card,
:root[data-theme="dark"] .old-stat-card,
:root[data-theme="dark"] .doctor-stat-card,
:root[data-theme="dark"] .front-stat-card {
    box-shadow: 0 12px 40px -8px rgba(0, 0, 0, 0.4), 0 1px 3px var(--old-border);
}

/* glass-card: visual style only - no backdrop-filter to avoid stacking context */
.glass-card,
.doctor-stat-card {
    background: var(--old-card-soft);
}

.old-card {
    overflow: hidden;
}

.old-card-header {
    display: flex;
    align-items: center;
    min-height: 57px;
    border-bottom: 1px solid var(--old-border);
    padding: 0 24px;
}

.old-card-header.spread {
    justify-content: space-between;
}

.old-card-header h2 {
    margin: 0;
    color: var(--old-text);
    font-size: 18px;
}

/* Table-card chrome follows the compact table standard: any card that
   holds a table slims its header, title, and header controls so the
   frame matches the density of what it frames. Non-table cards keep
   their normal proportions. */
.old-card:has(.table-wrap) .old-card-header,
.old-card:has(:scope > table) .old-card-header,
.workflow-table-card .old-card-header {
    min-height: 38px;
    padding: 0 14px;
}
.old-card:has(.table-wrap) .old-card-header h2,
.workflow-table-card .old-card-header h2 {
    font-size: 12.5px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.old-card:has(.table-wrap) .old-card-header .button,
.old-card:has(.table-wrap) .old-card-header a.button,
.workflow-table-card .old-card-header .button {
    min-height: 0;
    padding: 4px 11px;
    font-size: 11.5px;
}

.old-card-header a {
    color: #1f3f68;
    font-size: 14px;
    font-weight: 750;
}

.old-stat-card {
    padding: 24px;
}

.front-stat-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px;
}

.doctor-stat-card {
    display: flex;
    align-items: center;
    gap: 22px;
    padding: 24px;
    cursor: pointer;
}

.doctor-stat-card:hover {
    transform: translateY(-2px);
    border-color: #d8d7d2;
    box-shadow: 0 12px 36px -8px rgba(15, 23, 42, 0.08), 0 1px 3px var(--old-border);
}

:root[data-theme="dark"] .doctor-stat-card:hover {
    box-shadow: 0 16px 44px -8px rgba(0, 0, 0, 0.45), 0 1px 3px var(--old-border);
}

.old-stat-card p,
.front-stat-card p,
.doctor-stat-card p {
    margin: 0;
    color: var(--old-muted);
    font-size: 13px;
    font-weight: 750;
}

.old-stat-card strong,
.front-stat-card strong,
.doctor-stat-card strong {
    display: block;
    margin-top: 6px;
    color: var(--old-text);
    font-size: 24px;
}

.doctor-stat-card strong {
    font-size: 30px;
}

.stat-row,
.stat-between {
    display: flex;
    align-items: center;
    gap: 16px;
}

.stat-between {
    justify-content: space-between;
}

.old-stat-card small,
.action-row small,
.activity-card small,
.activity-line small,
.queue-main small,
.consult-card small {
    display: block;
    margin-top: 6px;
    color: var(--old-muted);
    font-size: 13px;
}

.soft-icon {
    display: inline-grid;
    width: 36px;
    height: 36px;
    flex: 0 0 36px;
    place-items: center;
    border-radius: 10px;
    font-size: 13px !important;
    font-weight: 700;
    line-height: 1;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.soft-icon.large {
    width: 54px;
    height: 54px;
    flex: 0 0 54px;
    border-radius: 14px;
    font-size: 16px !important;
}

.soft-icon.gray { background: #f7f6f3; color: #1f3f68; }
.soft-icon.green { background: color-mix(in srgb, var(--green) 10%, transparent); color: var(--green); }
.soft-icon.yellow { background: color-mix(in srgb, var(--yellow) 10%, transparent); color: var(--yellow); }
.soft-icon.orange { background: color-mix(in srgb, var(--orange) 10%, transparent); color: var(--orange); }
.soft-icon.purple { background: color-mix(in srgb, var(--purple) 10%, transparent); color: var(--purple); }
.soft-icon.indigo { background: color-mix(in srgb, var(--indigo) 10%, transparent); color: var(--indigo); }
.soft-icon.pink { background: color-mix(in srgb, var(--pink) 10%, transparent); color: var(--pink); }
.soft-icon.red { background: color-mix(in srgb, var(--red) 10%, transparent); color: var(--red); }

/* Dark mode: no icon boxes - the tinted glyph alone carries the meaning.
   (Solid tiles read as noisy blue/gray squares on dark surfaces.) */
:root[data-theme="dark"] .soft-icon.gray { background: transparent; color: #d2d8de; }
:root[data-theme="dark"] .soft-icon.green { background: transparent; color: color-mix(in srgb, var(--green) 85%, #fff); }
:root[data-theme="dark"] .soft-icon.yellow { background: transparent; color: color-mix(in srgb, var(--yellow) 85%, #fff); }
:root[data-theme="dark"] .soft-icon.orange { background: transparent; color: color-mix(in srgb, var(--orange) 85%, #fff); }
:root[data-theme="dark"] .soft-icon.purple { background: transparent; color: color-mix(in srgb, var(--purple) 85%, #fff); }
:root[data-theme="dark"] .soft-icon.indigo { background: transparent; color: color-mix(in srgb, var(--indigo) 85%, #fff); }
:root[data-theme="dark"] .soft-icon.pink { background: transparent; color: color-mix(in srgb, var(--pink) 85%, #fff); }
:root[data-theme="dark"] .soft-icon.red { background: transparent; color: color-mix(in srgb, var(--red) 85%, #fff); }

.neutral-text { color: var(--neutral) !important; }
.gray-text { color: var(--gray) !important; }
.green-text { color: var(--green) !important; }
.yellow-text { color: var(--yellow) !important; }
.orange-text { color: var(--orange) !important; }

.stack {
    display: grid;
    gap: 16px;
    padding: 24px;
}

.action-row,
.activity-card,
.activity-line,
.queue-row,
.appointment-row {
    display: flex;
    align-items: center;
    gap: 14px;
    border: 1px solid var(--old-border);
    border-radius: 8px;
    background: var(--old-card);
    padding: 14px;
}

.action-row:hover,
.queue-row:hover {
    background: var(--old-hover);
}

.action-row span:nth-child(2),
.activity-card span:nth-child(2),
.activity-line span:nth-child(2),
.queue-main,
.appointment-main {
    flex: 1;
}

.action-row strong,
.activity-card strong,
.activity-line strong,
.queue-main h3,
.appointment-main h3,
.consult-card h3 {
    color: var(--old-text);
    font-size: 15px;
}

.activity-card {
    align-items: flex-start;
}

.activity-card.success { background: #f0fdf4; border-color: #bbf7d0; }
.activity-card.warning { background: #fefce8; border-color: #fde68a; }
.activity-card.info { background: color-mix(in srgb, #1f3f68 6%, #ffffff); border-color: color-mix(in srgb, #1f3f68 20%, #ffffff); }

:root[data-theme="dark"] .activity-card.success,
:root[data-theme="dark"] .activity-card.warning,
:root[data-theme="dark"] .activity-card.info {
    background: var(--old-card);
    border-color: var(--old-border);
}

.circle-meter {
    width: 48px;
    height: 48px;
    margin-left: auto;
    border-radius: 50%;
    position: relative;
    border: 4px solid #d8d7d2;
    background: transparent;
}

.appointment-row {
    border-left-width: 4px;
    background: rgba(249, 250, 251, 0.58);
}

.appointment-row.status-green { border-left-color: var(--green); }
.appointment-row.status-neutral { border-left-color: var(--neutral); }
.appointment-row.status-yellow { border-left-color: var(--yellow); }
.appointment-row.status-gray { border-left-color: #9ca3af; }

.appointment-time {
    width: 80px;
    text-align: center;
}

.appointment-time strong,
.appointment-time span {
    display: block;
}

.appointment-time strong {
    color: #1f2937;
    font-size: 18px;
}

:root[data-theme="dark"] .appointment-time strong {
    color: #f9fafb;
}

.appointment-time span,
.appointment-main p,
.queue-main p,
.consult-card p {
    margin: 4px 0 0;
    color: var(--old-muted);
    font-size: 14px;
}

.appointment-main {
    border-left: 1px solid var(--old-border);
    padding-left: 16px;
}

.appointment-actions,
.queue-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}

.mini-button {
    display: inline-flex;
    align-items: center;
    min-height: 34px;
    border-radius: 4px;
    padding: 0 14px;
    color: #ffffff;
    font-size: 13px;
    font-weight: 800;
}

.mini-button.neutral { background: #111111; }
.mini-button.yellow { background: #eab308; }
.mini-button.green { background: var(--green); }

.priority-red { background: #fee2e2; color: #991b1b; }
.priority-orange { background: #ffedd5; color: #9a3412; }
.priority-green { background: #dcfce7; color: #166534; }
.priority-neutral,
.priority-purple,
.priority-gray { background: #f7f6f3; color: #1f3f68; }

.quick-tile-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    padding: 24px;
}

.quick-tile-grid a {
    display: flex;
    min-height: 105px;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    border: 1px solid var(--old-border);
    border-radius: 14px;
    background: color-mix(in srgb, var(--old-text) 2%, transparent);
    text-align: center;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.quick-tile-grid a:hover {
    transform: translateY(-2px);
    background: #fbfbfa;
    border-color: #d8d7d2;
    box-shadow: none;
}

.quick-tile-grid a:hover .soft-icon {
    transform: scale(1.08);
}

.quick-tile-grid strong {
    color: var(--old-text);
    font-size: 14px;
}

.consultation-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    padding: 24px;
}

.consult-card {
    border: 1px solid var(--old-border);
    border-radius: 12px;
    background: color-mix(in srgb, var(--old-text) 2%, transparent);
    padding: 16px;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.consult-card:hover {
    transform: translateY(-2px);
    background: #fbfbfa;
    border-color: #d8d7d2;
    box-shadow: none;
}

:root[data-theme="dark"] .consult-card:hover {
    box-shadow: 0 12px 30px -8px rgba(0, 0, 0, 0.3);
}

.consult-card > div {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 12px;
}

.front-stat-card p {
    font-size: 12px;
}

.front-stat-card strong {
    font-size: 20px;
}

.queue-row {
    justify-content: space-between;
}

.queue-dot {
    width: 12px;
    height: 12px;
    flex: 0 0 12px;
    border-radius: 999px;
}

.queue-dot.status-yellow { background: #eab308; }
.queue-dot.status-neutral { background: #d8d7d2; }
.queue-dot.status-green { background: var(--green); }
.queue-dot.status-purple { background: var(--purple); }

.queue-main h3 {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0;
}

.queue-main h3 small {
    display: inline;
    margin: 0;
    color: var(--old-muted);
    font-size: 12px;
}

.status-pill.status-yellow { background: #fef3c7; color: #92400e; border: 1px solid #fcd34d; }
.status-pill.status-neutral { background: #f7f6f3; color: #1f3f68; border: 1px solid #eaeaea; }
.status-pill.status-green { background: #dcfce7; color: #166534; border: 1px solid #86efac; }
.status-pill.status-purple { background: #fef3c7; color: #92400e; border: 1px solid #fcd34d; }
.status-pill.status-gray { background: #f3f4f6; color: #374151; border: 1px solid #d1d5db; }
.status-pill.status-red { background: #fee2e2; color: #991b1b; border: 1px solid #fecaca; }

.activity-line {
    justify-content: space-between;
}

.activity-line b {
    color: var(--green);
}

@media (max-width: 1180px) {
    .old-stats.four,
    .doctor-stat-grid,
    .frontdesk-mini-stats,
    .appointment-stats,
    .followup-stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .front-stat-grid,
    .fd-stat-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .content-grid.admin-grid,
    .content-grid.frontdesk-grid,
    .content-grid.doctor-grid,
    .consultation-grid {
        grid-template-columns: 1fr;
    }
}

/* ==========================================================================
   FRONTDESK DASHBOARD REDESIGN
   ========================================================================== */

.fd-stat-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 20px;
    margin-bottom: 28px;
}

.fd-stat-card {
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 22px 24px;
    background: var(--old-card-soft);
    border: 1px solid var(--old-border);
    border-radius: 16px;
    box-shadow: 0 8px 30px -4px rgba(15, 23, 42, 0.04), 0 1px 3px var(--old-border);
    transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.fd-stat-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 16px 40px -8px rgba(15, 23, 42, 0.1), 0 1px 4px var(--old-border);
}

:root[data-theme="dark"] .fd-stat-card {
    box-shadow: 0 12px 40px -8px rgba(0, 0, 0, 0.4), 0 1px 3px var(--old-border);
}

.fd-stat-body {
    flex: 1;
    min-width: 0;
}

.fd-stat-body p {
    margin: 0;
    color: var(--old-muted);
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.fd-stat-body strong {
    display: block;
    margin-top: 4px;
    color: var(--old-text);
    font-size: 19px;
    font-weight: 800;
    line-height: 1;
}

.fd-stat-body small {
    display: block;
    margin-top: 5px;
    color: var(--old-muted);
    font-size: 12px;
}

/* Queue row status bar accent */
.queue-row {
    position: relative;
    padding-left: 12px;
}

.queue-status-bar {
    position: absolute;
    left: 0;
    top: 8px;
    bottom: 8px;
    width: 3px;
    border-radius: 999px;
    background: var(--old-border);
}

.queue-row.status-yellow .queue-status-bar { background: var(--yellow, #eab308); }
.queue-row.status-neutral .queue-status-bar { background: #d8d7d2; }
.queue-row.status-green  .queue-status-bar { background: var(--green,  #22c55e); }
.queue-row.status-purple .queue-status-bar { background: var(--yellow, #ca8a04); }
.queue-row.status-gray   .queue-status-bar { background: var(--old-border); }

/* Activity amount badge */
.activity-amount {
    flex-shrink: 0;
    color: var(--green);
    font-size: 14px;
    font-weight: 700;
}

@media (max-width: 1180px) {
    .fd-stat-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 640px) {
    .fd-stat-grid {
        grid-template-columns: 1fr 1fr;
        gap: 12px;
    }

    .fd-stat-card {
        padding: 16px;
        gap: 12px;
    }

    .fd-stat-body strong {
        font-size: 20px;
    }
}

/* Minimal frontdesk refinement */
.frontdesk-dashboard-page,
.frontdesk-workpage,
.frontdesk-patients-page {
    max-width: 1180px;
    padding: 20px;
}

.frontdesk-dashboard-page .dashboard-heading {
    margin-bottom: 10px;
    position: relative;
    overflow: hidden;
    padding: 10px 12px 10px 14px;
    border: 1px solid var(--old-border);
    border-radius: 8px;
    background:
        linear-gradient(128deg, color-mix(in srgb, var(--brand-navy) 10%, transparent) 0 49.8%, color-mix(in srgb, var(--brand-green) 8%, transparent) 50.2% 100%),
        linear-gradient(180deg, color-mix(in srgb, #ffffff 86%, var(--old-card)) 0%, var(--old-card) 100%);
}

.frontdesk-dashboard-page .dashboard-heading::after {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 5px;
    background: var(--brand-split);
}

.frontdesk-dashboard-page .dashboard-heading > * {
    position: relative;
    z-index: 1;
}

.frontdesk-dashboard-page .dashboard-heading .heading-actions,
.doctor-surface .dashboard-heading .heading-actions {
    align-self: center;
    flex-shrink: 0;
}

.frontdesk-dashboard-page .dashboard-heading .heading-actions .button,
.doctor-surface .dashboard-heading .heading-actions .button {
    color: #fff;
    font-weight: 800;
    transition: transform 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border-radius: 4px;
}

.frontdesk-dashboard-page .dashboard-heading .heading-actions .button {
    background: var(--brand-navy);
    box-shadow: 0 4px 12px rgba(31, 63, 104, 0.2);
    min-height: 34px;
    padding: 0 12px;
}

.frontdesk-dashboard-page .dashboard-heading .heading-actions .button:hover {
    background: var(--brand-navy-deep);
    box-shadow: 0 6px 16px rgba(31, 63, 104, 0.3);
    transform: translateY(-2px);
}

.doctor-surface .dashboard-heading .heading-actions .button {
    background: var(--brand-navy);
    box-shadow: 0 4px 12px rgba(31, 63, 104, 0.2);
}

.doctor-surface .dashboard-heading .heading-actions .button:hover {
    background: var(--brand-navy-deep);
    box-shadow: 0 6px 16px rgba(31, 63, 104, 0.3);
    transform: translateY(-2px);
}

.frontdesk-dashboard-page .dashboard-heading .heading-actions .button svg,
.doctor-surface .dashboard-heading .heading-actions .button svg {
    width: 18px;
    height: 18px;
    stroke: currentColor;
    stroke-width: 2px;
    fill: none;
}

@media (max-width: 768px) {
    .frontdesk-dashboard-page .dashboard-heading .heading-actions,
    .doctor-surface .dashboard-heading .heading-actions {
        align-self: flex-start;
        margin-top: 12px;
        width: 100%;
    }
    .frontdesk-dashboard-page .dashboard-heading .heading-actions .button,
    .doctor-surface .dashboard-heading .heading-actions .button {
        width: 100%;
        justify-content: center;
    }
}

.frontdesk-dashboard-page .dashboard-heading h1,
.frontdesk-dashboard-page .dashboard-heading h2,
.frontdesk-page-head h2,
.appointment-page.frontdesk-workpage .appointment-header h2 {
    font-size: 18px;
    letter-spacing: 0;
}

.frontdesk-dashboard-page .dashboard-heading h2 {
    margin: 0 0 3px;
    line-height: 1.18;
}

.frontdesk-dashboard-page .dashboard-heading p,
.frontdesk-page-head p {
    font-size: 13px;
    line-height: 1.35;
}

.frontdesk-kicker {
    display: inline-flex;
    margin-bottom: 8px;
    color: var(--accent);
    font-size: 11px;
    font-weight: 850;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.frontdesk-dashboard-page .date-panel {
    min-width: 132px;
    border: 1px solid var(--old-border);
    border-radius: 8px;
    background: var(--old-card);
    padding: 10px 12px;
}

.frontdesk-dashboard-page .date-panel strong {
    font-size: 14px;
}

.frontdesk-dashboard-page .date-panel span {
    font-size: 12px;
}

.frontdesk-dashboard-page .fd-stat-grid,
.frontdesk-dashboard-page .front-stat-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    margin-bottom: 14px;
}

.frontdesk-dashboard-page .content-grid.frontdesk-grid {
    grid-template-columns: minmax(0, 1.2fr) minmax(280px, 0.8fr);
    gap: 14px;
    margin-bottom: 16px;
}

.frontdesk-dashboard-page .old-card,
.frontdesk-dashboard-page .fd-stat-card,
.frontdesk-dashboard-page .front-stat-card,
.frontdesk-mini-stats article,
.frontdesk-patient-card,
.frontdesk-billing-card,
.frontdesk-activity-card,
.frontdesk-stock-card,
.appointment-page.frontdesk-workpage .appointment-card,
.appointment-page.frontdesk-workpage .appointment-stat {
    background: var(--old-card);
    border-color: var(--old-border);
    border-radius: 8px;
    box-shadow: none;
}

.frontdesk-dashboard-page .fd-stat-card,
.frontdesk-dashboard-page .front-stat-card {
    position: relative;
    min-height: 78px;
    overflow: hidden;
    padding: 12px;
    gap: 12px;
    transition: border-color 0.16s ease, background-color 0.16s ease, transform 0.16s ease;
}

.frontdesk-dashboard-page .fd-stat-card {
    --fd-tone: var(--neutral);
    background: var(--old-card);
}

.frontdesk-dashboard-page .fd-stat-card::before {
    content: none;
}

.frontdesk-dashboard-page .fd-stat-card[data-tone="neutral"] { --fd-tone: var(--neutral); }
.frontdesk-dashboard-page .fd-stat-card[data-tone="green"] { --fd-tone: var(--green); }
.frontdesk-dashboard-page .fd-stat-card[data-tone="yellow"] { --fd-tone: var(--yellow); }
.frontdesk-dashboard-page .fd-stat-card[data-tone="orange"] { --fd-tone: var(--orange); }
.frontdesk-dashboard-page .fd-stat-card[data-tone="purple"] { --fd-tone: var(--accent); }

.frontdesk-dashboard-page .fd-stat-card:hover {
    border-color: color-mix(in srgb, var(--old-text) 18%, var(--old-border));
    background: var(--old-hover);
    transform: translateY(-1px);
}

.frontdesk-dashboard-page .fd-stat-card:hover {
    box-shadow: none;
}

.frontdesk-dashboard-page .fd-stat-body p,
.frontdesk-dashboard-page .front-stat-card p,
.frontdesk-mini-stats p,
.appointment-page.frontdesk-workpage .appointment-stat p {
    font-size: 11px;
    letter-spacing: 0;
    text-transform: none;
}

.frontdesk-dashboard-page .fd-stat-body strong,
.frontdesk-dashboard-page .front-stat-card strong,
.frontdesk-mini-stats strong,
.appointment-page.frontdesk-workpage .appointment-stat strong {
    font-family: "SF Mono", "Geist Mono", Consolas, monospace;
    font-size: 19px;
}

.frontdesk-dashboard-page .fd-stat-body small {
    margin-top: 3px;
    font-size: 11px;
}

.frontdesk-dashboard-page .soft-icon,
.frontdesk-activity-card .soft-icon {
    width: 32px;
    height: 32px;
    border-radius: 8px;
}

.frontdesk-dashboard-page .old-card-header {
    min-height: 48px;
    padding: 0 16px;
}

.frontdesk-dashboard-page .old-card-header h2 {
    font-size: 15px;
}

.frontdesk-dashboard-page .stack {
    gap: 8px;
    padding: 12px;
}

.frontdesk-dashboard-page .action-row,
.frontdesk-dashboard-page .queue-row,
.frontdesk-dashboard-page .activity-line {
    min-height: 54px;
    border: 1px solid transparent;
    border-radius: 8px;
    background: transparent;
    padding: 10px;
}

.frontdesk-dashboard-page .queue-row {
    padding-left: 10px;
}

.frontdesk-dashboard-page .queue-status-bar {
    display: none;
}

.frontdesk-dashboard-page .action-row {
    display: grid;
    grid-template-columns: 32px minmax(0, 1fr) 24px;
    align-items: center;
}

.frontdesk-dashboard-page .action-row b {
    display: grid;
    width: 24px;
    height: 24px;
    place-items: center;
    border: 1px solid var(--old-border);
    border-radius: 6px;
    color: var(--old-muted);
    font-size: 16px;
    line-height: 1;
    transition: transform 0.16s ease, color 0.16s ease, border-color 0.16s ease;
}

.frontdesk-dashboard-page .action-row:hover b {
    border-color: color-mix(in srgb, var(--accent) 30%, var(--old-border));
    color: var(--accent);
    transform: translateX(2px);
}

:root[data-theme="dark"] .frontdesk-dashboard-page {
    background: #111111;
}

:root[data-theme="dark"] .frontdesk-dashboard-page .dashboard-heading,
:root[data-theme="dark"] .frontdesk-page-head {
    /* One quiet navy-tinted surface - the old split band put a green half
       under the navy Register Patient button (blue on green, no contrast). */
    background:
        linear-gradient(128deg, rgba(31, 63, 104, 0.22), rgba(31, 63, 104, 0.08)),
        #181818;
    border-color: #2a2a2a;
}

:root[data-theme="dark"] .frontdesk-dashboard-page .old-card,
:root[data-theme="dark"] .frontdesk-dashboard-page .fd-stat-card,
:root[data-theme="dark"] .frontdesk-dashboard-page .front-stat-card,
:root[data-theme="dark"] .frontdesk-dashboard-page .date-panel {
    background: #181818;
    border-color: #2a2a2a;
}

:root[data-theme="dark"] .frontdesk-dashboard-page .action-row,
:root[data-theme="dark"] .frontdesk-dashboard-page .queue-row,
:root[data-theme="dark"] .frontdesk-dashboard-page .activity-line {
    border-color: transparent;
    background: transparent;
}

:root[data-theme="dark"] .frontdesk-dashboard-page .action-row:hover,
:root[data-theme="dark"] .frontdesk-dashboard-page .queue-row:hover,
:root[data-theme="dark"] .frontdesk-dashboard-page .activity-line:hover {
    border-color: #303030;
    background: #202020;
}

:root[data-theme="dark"] .frontdesk-dashboard-page .soft-icon {
    background: transparent;
    border-color: transparent;
}

.frontdesk-dashboard-page .action-row:hover,
.frontdesk-dashboard-page .queue-row:hover,
.frontdesk-dashboard-page .activity-line:hover {
    border-color: var(--old-border);
    background: var(--old-bg);
}

.frontdesk-page-head,
.appointment-page.frontdesk-workpage .appointment-header {
    position: relative;
    overflow: hidden;
    padding: 16px;
    border: 1px solid var(--old-border);
    border-radius: 8px;
    background:
        linear-gradient(128deg, color-mix(in srgb, var(--brand-navy) 10%, transparent) 0 49.8%, color-mix(in srgb, var(--brand-green) 8%, transparent) 50.2% 100%),
        linear-gradient(180deg, color-mix(in srgb, #ffffff 86%, var(--old-card)) 0%, var(--old-card) 100%);
}

.frontdesk-page-head::after,
.appointment-page.frontdesk-workpage .appointment-header::after {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 5px;
    background: var(--brand-split);
}

.frontdesk-page-head > *,
.appointment-page.frontdesk-workpage .appointment-header > * {
    position: relative;
    z-index: 1;
}

:root[data-theme="dark"] .frontdesk-page-head,
:root[data-theme="dark"] .appointment-page.frontdesk-workpage .appointment-header {
    background:
        linear-gradient(128deg, rgba(31, 63, 104, 0.22) 0 49.8%, rgba(54, 166, 106, 0.16) 50.2% 100%),
        #181818;
    border-color: #2a2a2a;
}

.frontdesk-mini-stats,
.appointment-page.frontdesk-workpage .appointment-stats {
    gap: 10px;
}

.frontdesk-mini-stats article,
.appointment-page.frontdesk-workpage .appointment-stat {
    padding: 12px;
}

.frontdesk-searchbar,
.appointment-page.frontdesk-workpage .appointment-controls {
    border: 1px solid var(--old-border);
    border-radius: 8px;
    background: var(--old-card);
    padding: 10px;
}

.frontdesk-searchbar input,
.frontdesk-searchbar select,
.frontdesk-checkin-form input,
.frontdesk-checkin-form select,
.appointment-page.frontdesk-workpage .appointment-controls input,
.appointment-page.frontdesk-workpage .appointment-controls select {
    min-height: 40px;
    border-radius: 6px;
    background: var(--old-bg);
}

.frontdesk-patient-card,
.frontdesk-billing-card,
.frontdesk-activity-card,
.frontdesk-stock-card,
.appointment-page.frontdesk-workpage .appointment-card {
    padding: 14px;
}

.frontdesk-patient-head > span,
.frontdesk-patient-meta span,
.frontdesk-money-grid span,
.appointment-page.frontdesk-workpage .appointment-meta-grid span {
    background: transparent;
    border: 1px solid var(--old-border);
    border-radius: 6px;
}

.frontdesk-patient-actions .button,
.frontdesk-checkin-form .button,
.frontdesk-billing-card .button,
.appointment-page.frontdesk-workpage .button {
    min-height: 38px;
    border-radius: 6px;
    box-shadow: none;
}

.frontdesk-checkin-form {
    border-top: 1px solid var(--old-border);
    padding-top: 12px;
}

.frontdesk-stock-card {
    border-left-width: 3px;
}

@media (max-width: 1180px) {
    .frontdesk-dashboard-page .fd-stat-grid,
    .frontdesk-dashboard-page .front-stat-grid,
    .frontdesk-dashboard-page .content-grid.frontdesk-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 920px) {
    .frontdesk-dashboard-page,
    .frontdesk-workpage,
    .frontdesk-patients-page {
        padding: 16px;
    }

    .frontdesk-dashboard-page .fd-stat-grid,
    .frontdesk-dashboard-page .front-stat-grid,
    .frontdesk-dashboard-page .content-grid.frontdesk-grid {
        grid-template-columns: 1fr;
    }
}

/* ==========================================================================
   DOCTOR WORKFLOW MODERNIZATION & SPLIT LAYOUT
   ========================================================================== */


/* Call Banner */
.next-patient-banner {
    display: flex;
    align-items: center;
    gap: 24px;
    background: var(--old-card);
    border: 1px solid var(--old-border);
    border-radius: 16px;
    padding: 24px;
    margin-bottom: 32px;
    box-shadow: none;
    position: relative;
    overflow: hidden;
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.next-patient-banner:hover {
    transform: translateY(-2px);
    box-shadow: none;
}

.next-patient-banner::before {
    content: none;
    position: absolute;
    top: 0;
    left: 0;
    width: 6px;
    height: 100%;
    background: #d8d7d2;
}

.banner-icon-side {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.pulse-ring {
    content: '';
    position: absolute;
    width: 64px;
    height: 64px;
    border: 2px solid #d8d7d2;
    border-radius: 50%;
    animation: banner-pulse 1.8s infinite cubic-bezier(0.24, 0, 0.38, 1);
    opacity: 0;
}

@keyframes banner-pulse {
    0% {
        transform: scale(0.6);
        opacity: 0.8;
    }
    100% {
        transform: scale(1.3);
        opacity: 0;
    }
}

.banner-info {
    flex: 1;
}

.banner-badge {
    display: inline-block;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    color: #1f3f68;
    background: #f7f6f3;
    padding: 4px 10px;
    border-radius: 6px;
    margin-bottom: 8px;
    text-transform: uppercase;
}

.banner-info h2 {
    font-size: 1.35rem;
    font-weight: 800;
    color: var(--old-text);
    margin: 0 0 6px 0;
    letter-spacing: 0;
}

.banner-info p {
    font-size: 0.92rem;
    color: var(--old-muted);
    margin: 0;
}

.banner-info p strong {
    color: var(--old-text);
}

.banner-action {
    margin: 0;
}

.banner-button {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #111111;
    color: #ffffff;
    border: 0;
    border-radius: 12px;
    padding: 14px 24px;
    font-size: 0.95rem;
    font-weight: 700;
    cursor: pointer;
    box-shadow: none;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.banner-button:hover {
    transform: translateY(-1px);
    box-shadow: none;
    filter: brightness(1.08);
}

.banner-button:active {
    transform: translateY(1px);
}

.banner-button svg.button-svg {
    width: 18px;
    height: 18px;
    fill: currentColor;
}

/* Unified Timeline Card */
.unified-timeline-card {
    padding: 0 !important;
}

.unified-timeline-card .stack {
    display: flex;
    flex-direction: column;
}

.appointment-row {
    display: flex;
    align-items: center;
    padding: 18px 24px;
    border-bottom: 1px solid var(--old-border);
    transition: background-color 0.2s ease;
    gap: 20px;
}

.appointment-row:last-child {
    border-bottom: 0;
}

.appointment-row:hover {
    background-color: var(--old-hover);
}

.appointment-time {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 60px;
    flex-shrink: 0;
}

.appointment-time strong {
    font-size: 1.15rem;
    font-weight: 800;
    color: var(--old-text);
    line-height: 1.1;
}

.appointment-time span {
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--old-muted);
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.appointment-main {
    flex: 1;
    border-left: 1px solid var(--old-border);
    padding-left: 20px;
}

.appointment-main h3 {
    font-size: 1rem;
    font-weight: 700;
    margin: 0 0 4px 0;
    color: var(--old-text);
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.appointment-main p {
    font-size: 0.88rem;
    color: var(--old-muted);
    margin: 0;
}

.appointment-actions {
    display: flex;
    align-items: center;
    gap: 12px;
}

/* Status colors for rows */
.appointment-row.status-neutral {
    border-left: 1px solid var(--old-border);
    background: transparent;
}

.appointment-row.status-yellow {
    border-left: 4px solid var(--yellow);
    background: color-mix(in srgb, var(--yellow) 4%, transparent);
}

.appointment-row.status-green {
    border-left: 4px solid var(--green);
    background: color-mix(in srgb, var(--green) 4%, transparent);
}

.appointment-row.status-purple {
    border-left: 4px solid var(--purple);
    background: color-mix(in srgb, var(--purple) 4%, transparent);
}

.appointment-row.status-gray {
    border-left: 4px solid var(--gray);
    background: color-mix(in srgb, var(--gray) 4%, transparent);
}

/* Priority pills */
.priority-pill {
    font-size: 0.65rem;
    font-weight: 800;
    padding: 3px 8px;
    border-radius: 4px;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

/* GlaucomaOne linkage chip: house-flat, brand green (linked) / amber (candidate). */
.g1-chip {
    font-size: 11px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 4px;
    border: 1px solid transparent;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    white-space: nowrap;
    line-height: 1.4;
}
.g1-chip-linked { background: rgba(54, 166, 106, 0.12); color: #2b7d51; border-color: rgba(54, 166, 106, 0.4); }
.g1-chip-signal { background: rgba(217, 130, 43, 0.12); color: #a35f14; border-color: rgba(217, 130, 43, 0.4); }
:root[data-theme="dark"] .g1-chip-linked { background: rgba(54, 166, 106, 0.18); color: #7fd6a6; border-color: rgba(54, 166, 106, 0.45); }
:root[data-theme="dark"] .g1-chip-signal { background: rgba(217, 130, 43, 0.18); color: #e6b980; border-color: rgba(217, 130, 43, 0.45); }

.priority-red {
    background: #fee2e2;
    color: #991b1b;
}
:root[data-theme="dark"] .priority-red {
    background: rgba(239, 68, 68, 0.2);
    color: #fca5a5;
}

.priority-orange {
    background: #ffedd5;
    color: #9a3412;
}
:root[data-theme="dark"] .priority-orange {
    background: rgba(249, 115, 22, 0.2);
    color: #fdba74;
}

.priority-green {
    background: #dcfce7;
    color: #166534;
}
:root[data-theme="dark"] .priority-green {
    background: rgba(34, 197, 94, 0.2);
    color: #86efac;
}

.mini-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 8px;
    padding: 8px 16px;
    font-size: 0.85rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.15s ease;
}

.mini-button.neutral {
    background: #111111;
    color: #ffffff;
    box-shadow: none;
}

.mini-button.neutral:hover {
    filter: brightness(1.08);
    transform: translateY(-1px);
}

.mini-button.yellow {
    background: #111111;
    color: #ffffff;
    box-shadow: none;
}

.mini-button.yellow:hover {
    filter: brightness(1.08);
    transform: translateY(-1px);
}

.status-pill {
    font-size: 0.72rem;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 6px;
    text-transform: capitalize;
    letter-spacing: 0.02em;
}

.status-pill.status-green {
    background: color-mix(in srgb, var(--green) 10%, transparent);
    color: var(--green);
    border: 1px solid color-mix(in srgb, var(--green) 20%, transparent);
}

.status-pill.status-neutral {
    background: #f7f6f3;
    color: #1f3f68;
    border: 1px solid #eaeaea;
}

.status-pill.status-yellow {
    background: color-mix(in srgb, var(--yellow) 10%, transparent);
    color: var(--yellow);
    border: 1px solid color-mix(in srgb, var(--yellow) 20%, transparent);
}

.status-pill.status-purple {
    background: color-mix(in srgb, var(--purple) 10%, transparent);
    color: var(--purple);
    border: 1px solid color-mix(in srgb, var(--purple) 20%, transparent);
}

.status-pill.status-gray {
    background: color-mix(in srgb, var(--gray) 10%, transparent);
    color: var(--gray);
    border: 1px solid color-mix(in srgb, var(--gray) 20%, transparent);
}

/* Split Consultation Note layout */
.patient-history-sidebar {
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 4px;
    padding: 14px;
    position: sticky;
    top: 96px;
    max-height: calc(100vh - 120px);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.sidebar-header {
    border-bottom: 1px solid var(--line);
    margin-bottom: 16px;
    padding-bottom: 12px;
}

.sidebar-header h2 {
    font-size: 1.15rem;
    font-weight: 700;
    margin: 0;
    color: var(--ink-strong);
}

.patient-history-panel {
    flex: 1;
    overflow-y: auto;
    padding-right: 4px;
}

.patient-history-sidebar .patient-history-panel {
    display: flex;
    flex-direction: column;
    gap: 14px;
    min-height: 0;
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    border: 0;
    background: transparent;
    /* Symmetric horizontal padding: overflow-x:hidden clips at the padding box,
       so children must not sit flush at the left edge or their 1px left border
       (the search field stroke, a card's accent rail) gets shaved off. */
    padding: 2px 6px 12px 6px;
}

.patient-history-sidebar .patient-history-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 12px;
    align-items: start;
    border: 1px solid var(--line);
    border-radius: 4px;
    background:
        linear-gradient(122deg, color-mix(in srgb, var(--specialty-color, var(--brand-navy)) 8%, transparent) 0 34%, transparent 34.2%),
        var(--panel-raised);
    padding: 10px 12px;
}

.patient-history-sidebar .patient-history-head h3 {
    font-size: 15px;
    line-height: 1.25;
    margin: 0 0 6px;
}

.patient-history-sidebar .patient-history-head p {
    line-height: 1.5;
}

.patient-history-sidebar .patient-history-head > span {
    background: color-mix(in srgb, var(--specialty-color, var(--brand-navy)) 10%, transparent);
    border: 1px solid color-mix(in srgb, var(--specialty-color, var(--brand-navy)) 20%, transparent);
    color: var(--ink-strong);
}

.patient-history-sidebar .visit-history-list {
    max-height: none;
    gap: 10px;
    padding-right: 2px;
}

.patient-history-sidebar .visit-history-item {
    border-radius: 4px;
}

.patient-history-sidebar .visit-history-summary {
    grid-template-columns: 1fr;
    align-items: start;
    gap: 5px;
    padding: 9px 11px;
}

.patient-history-sidebar .visit-history-summary > b {
    color: var(--ink-strong);
    line-height: 1.35;
}

.patient-history-sidebar .visit-history-item > p {
    margin: 0;
    padding: 12px 14px 0;
    color: var(--muted);
}

.patient-history-sidebar .visit-notes {
    margin: 0 12px 12px;
}

.patient-history-sidebar .visit-print-actions {
    margin: 0 12px 12px !important;
}

/* Thin Glassmorphic Scrollbar */
.patient-history-panel::-webkit-scrollbar {
    width: 6px;
}
.patient-history-panel::-webkit-scrollbar-track {
    background: transparent;
}
.patient-history-panel::-webkit-scrollbar-thumb {
    background: var(--line-strong);
    border-radius: 3px;
}
.patient-history-panel::-webkit-scrollbar-thumb:hover {
    background: var(--accent);
}

/* =====================================================================
   Visit log (patient history, rebuilt): a flat, sharp, compact accordion.
   Collapse uses grid-template-rows (0fr -> 1fr) so an open visit animates
   its real height and never clips, and each header is a real <button> so
   the toggle always responds. All colour via tokens => dark-mode aware.
   ===================================================================== */
.vlog { display: flex; flex-direction: column; }

.vlog-search-wrap { margin-bottom: 8px; }
.vlog-search {
    width: 100%; height: 34px; padding: 0 10px;
    font-size: 12px; color: var(--ink);
    background: var(--panel-raised);
    border: 1px solid var(--line); border-radius: 4px; outline: none;
}
.vlog-search:focus { border-color: var(--accent); }

.vlog-list { list-style: none; margin: 0; padding: 0; }

.vlog-item {
    background: var(--panel-raised);
    border: 1px solid var(--line);
    border-left: 2px solid transparent;
    border-radius: 4px;
    overflow: hidden;
}
.vlog-item + .vlog-item { margin-top: 6px; }
.vlog-item.is-open { border-left-color: var(--accent); }
.vlog-item.vlog-hide { display: none; }

.vlog-head {
    width: 100%;
    display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 8px;
    padding: 8px 10px; margin: 0;
    background: transparent; border: 0; text-align: left; cursor: pointer;
    font: inherit; color: inherit;
}
.vlog-head:hover { background: color-mix(in srgb, var(--brand-navy) 5%, transparent); }
.vlog-head-main { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.vlog-date { font-size: 12px; font-weight: 700; color: var(--ink-strong); line-height: 1.3; }
.vlog-meta { font-size: 10.5px; color: var(--muted); line-height: 1.3; }
.vlog-dx {
    margin-top: 3px; font-size: 12px; font-weight: 600; color: var(--ink); line-height: 1.35;
    overflow-wrap: anywhere;
}
.vlog-chevron { flex: none; color: var(--muted); transition: transform .2s ease; }
.vlog-item.is-open .vlog-chevron { transform: rotate(180deg); color: var(--accent); }

/* grid-rows collapse: the inner wrapper carries all padding + borders. */
.vlog-body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .22s ease; }
.vlog-item.is-open .vlog-body { grid-template-rows: 1fr; }
.vlog-body-inner { overflow: hidden; min-height: 0; }
.vlog-item.is-open .vlog-body-inner {
    border-top: 1px solid var(--line);
    padding: 9px 10px 10px;
}

.vlog-followup {
    margin: 0 0 8px; font-size: 12px; color: var(--ink);
    display: flex; align-items: baseline; gap: 6px;
}
.vlog-followup span {
    font-size: 10px; font-weight: 700; letter-spacing: .3px; text-transform: uppercase; color: var(--muted);
}

.vlog-fields { display: flex; flex-direction: column; gap: 6px; }
.vlog-field { display: flex; flex-direction: column; gap: 1px; }
.vlog-field-label { font-size: 10px; font-weight: 700; letter-spacing: .3px; text-transform: uppercase; color: var(--muted); }
.vlog-field-value { font-size: 12px; font-weight: 500; color: var(--ink); white-space: pre-wrap; word-break: break-word; }
.vlog-field-heading {
    margin-top: 6px; padding-bottom: 2px; border-bottom: 1px solid var(--line);
    font-size: 10.5px; font-weight: 800; letter-spacing: .4px; text-transform: uppercase; color: var(--ink-strong);
}
.vlog-field-text {
    font-size: 12px; font-weight: 500; color: var(--ink);
    padding-left: 6px; border-left: 2px solid var(--line);
    white-space: pre-wrap; word-break: break-word;
}

.vlog-referral { margin-top: 10px; padding-top: 8px; border-top: 1px dashed var(--line); }
.vlog-referral-label { font-size: 10.5px; font-weight: 800; letter-spacing: .4px; text-transform: uppercase; color: var(--ink-strong); }
.vlog-referral-body {
    margin-top: 4px; padding: 8px; font-family: Consolas, monospace; font-size: 11px; line-height: 1.4;
    color: var(--ink); background: var(--panel); border: 1px solid var(--line);
    white-space: pre-wrap; word-break: break-word;
}

.vlog-empty-note { margin: 0; font-size: 12px; font-style: italic; color: var(--muted); }

.vlog-actions { margin-top: 10px; padding-top: 8px; border-top: 1px dashed var(--line); display: flex; flex-wrap: wrap; gap: 6px; }
.vlog-actions .mini-button { padding: 2px 8px; font-size: 11px; height: auto; display: inline-flex; align-items: center; gap: 4px; }

.vlog-noresults { margin: 8px 2px 0; font-size: 12px; color: var(--muted); }

.vlog-more { width: 100%; margin-top: 8px; justify-content: center; }

@media (prefers-reduced-motion: reduce) {
    .vlog-body, .vlog-chevron { transition: none; }
}

.active-consultation-panel {
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 4px;
    padding: 18px;
    display: flex;
    flex-direction: column;
}

.panel-header {
    border-bottom: 1px solid var(--line);
    margin-bottom: 20px;
    padding-bottom: 16px;
}

.panel-header h2 {
    font-size: 1.25rem;
    font-weight: 700;
    margin: 0;
    color: var(--ink-strong);
}

@media (max-width: 920px) {
    .old-sidebar {
        position: fixed !important;
        top: 0;
        left: 0;
        bottom: 0;
        width: 280px;
        height: 100vh !important;
        z-index: 2000 !important;
        box-shadow: 20px 0 40px rgba(0, 0, 0, 0.15);
        transform: translateX(-100%);
        transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
        display: flex !important;
    }

    .old-sidebar.mobile-open {
        transform: translateX(0) !important;
    }

    .sidebar-toggle-wrapper {
        display: none !important;
    }

    .old-main {
        margin-left: 0;
    }

    .old-topbar,
    .dashboard-heading.split {
        align-items: flex-start;
        flex-direction: column;
        padding: 18px;
    }

    .topbar-title,
    .topbar-actions {
        justify-content: flex-start;
        width: 100%;
    }

    .doctor-surface,
    .old-page {
        padding: 18px;
    }

        .old-stats.three,
        .old-stats.four,
        .doctor-stat-grid,
        .front-stat-grid,
        .quick-tile-grid,
        .workflow-stats,
        .workflow-grid,
        .queue-board-grid,
        .frontdesk-mini-stats,
        .frontdesk-searchbar,
        .frontdesk-patient-meta,
        .frontdesk-money-grid,
        .frontdesk-checkin-form,
        .appointment-stats,
        .appointment-controls,
        .appointment-meta-grid,
        .followup-stats,
        .followup-controls,
        .followup-meta-grid,
        .medication-grid,
        .medication-line,
        .glasses-line,
        .field-grid {
        grid-template-columns: 1fr;
    }

    .followup-card-main,
    .frontdesk-page-head,
    .frontdesk-patient-head,
    .frontdesk-billing-head,
    .frontdesk-activity-card,
    .appointment-card-head,
    .followup-actions {
        flex-direction: column;
    }

    .appointment-card {
        grid-template-columns: 1fr;
    }

    .appointment-card-time {
        border-right: 0;
        border-bottom: 1px solid var(--old-border);
        padding-right: 0;
        padding-bottom: 12px;
    }

    .appointment-card-actions {
        justify-content: flex-start;
    }

    .repeater-remove {
        width: 100%;
    }

    .eye-exam-head {
        display: none;
    }

    .eye-exam-row {
        grid-template-columns: 1fr;
    }

    .eye-exam-row + .eye-exam-row {
        border-top: 1px solid var(--old-border);
    }

    .eye-exam-cell,
    .eye-exam-head span + span {
        border-left: 0;
    }

    .eye-exam-cell {
        grid-template-columns: 42px minmax(0, 1fr);
    }

    .eye-exam-cell > span {
        position: static;
        width: auto;
        height: auto;
        overflow: visible;
        clip: auto;
        color: var(--old-text);
        font-weight: 900;
    }

    .eye-exam-cell input {
        grid-column: 2;
    }

    .service-line {
        grid-template-columns: 1fr;
    }

    .workflow-hero {
        flex-direction: column;
    }

    .workflow-actions {
        justify-content: flex-start;
    }

    .appointment-row,
    .queue-row,
    .activity-line {
        align-items: flex-start;
        flex-direction: column;
    }

    .appointment-actions,
    .queue-actions {
        width: 100%;
        justify-content: space-between;
        margin-top: 8px;
    }

    .appointment-main {
        border-left: 0;
        padding-left: 0;
    }

    .date-panel {
        text-align: left;
    }

    /* Mobile overrides for layout modernization */
    .patient-history-sidebar {
        position: static;
        max-height: none;
        overflow: visible;
    }

    .next-patient-banner {
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
    }

    .banner-button {
        width: 100%;
        justify-content: center;
    }
}

/* Final compact doctor/admin pass. Keep this after the legacy dashboard rules. */
.admin-dashboard-page,
.doctor-surface {
    max-width: 1180px;
    min-height: auto;
    padding: 20px;
    background: var(--old-bg);
}

.admin-dashboard-page .dashboard-heading,
.doctor-surface .dashboard-heading {
    margin-bottom: 18px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--old-border);
}

.desk-kicker {
    display: inline-flex;
    margin-bottom: 8px;
    color: var(--accent);
    font-size: 11px;
    font-weight: 850;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.admin-dashboard-page .dashboard-heading h1,
.doctor-surface .dashboard-heading h1 {
    font-size: 24px;
    letter-spacing: 0;
}

.admin-dashboard-page .dashboard-heading p,
.doctor-surface .dashboard-heading p {
    max-width: 640px;
    font-size: 14px;
}

.admin-dashboard-page .old-stats,
.doctor-surface .doctor-stat-grid,
.doctor-surface .content-grid.doctor-grid {
    gap: 10px;
    margin-bottom: 16px;
}

.admin-dashboard-page .old-stats.four {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.admin-dashboard-page .old-stats.three {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.admin-dashboard-page .content-grid.admin-grid {
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    gap: 14px;
    margin-bottom: 16px;
}

.doctor-surface .content-grid.doctor-grid {
    grid-template-columns: minmax(0, 1.2fr) minmax(280px, 0.8fr);
}

.doctor-day-panel {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(320px, 0.85fr);
    align-items: stretch;
    gap: 14px;
    margin: 10px 0 16px;
}

.doctor-focus-card,
.doctor-flow-panel {
    border: 1px solid var(--old-border);
    border-radius: 8px;
    background: var(--old-card);
    box-shadow: none;
}

.doctor-focus-card {
    position: relative;
    overflow: hidden;
    padding: 0;
    border-top: 3px solid var(--brand-navy);
    background: linear-gradient(90deg, var(--old-card) 0 68%, color-mix(in srgb, var(--brand-navy) 5%, var(--old-card)) 68% 100%);
}

.doctor-focus-card::after {
    content: none;
}

.doctor-focus-card > * {
    position: relative;
    z-index: 1;
}

/* Calm empty state: no patient waiting. A quiet icon + one helpful line,
   instead of reusing the "Visit reason / Time" tiles with nonsense labels. */
.doctor-focus-empty {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 18px 16px;
}
.doctor-focus-empty-art {
    flex: none;
    width: 96px;
    max-width: 34%;
}
.doctor-focus-empty-art svg,
.doctor-focus-empty-art img {
    display: block;
    width: 100%;
    height: auto;
}
.doctor-focus-empty p {
    margin: 0;
    color: var(--old-muted);
    font-size: 13px;
    line-height: 1.5;
}

.doctor-eyebrow {
    display: inline-flex;
    margin-bottom: 8px;
    color: var(--old-muted);
    font-size: 11px;
    font-weight: 850;
    letter-spacing: 0;
    text-transform: uppercase;
}

.doctor-focus-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    padding: 16px;
    border-bottom: 1px solid var(--old-border);
    background: color-mix(in srgb, var(--brand-navy) 3%, transparent);
}

.doctor-focus-patient {
    min-width: 0;
}

.doctor-focus-card h2 {
    margin: 0;
    color: var(--old-text);
    font-size: 26px;
    line-height: 1.12;
    overflow-wrap: anywhere;
}

.doctor-focus-state {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    padding: 0 12px;
    border: 1px solid transparent;
    border-radius: 6px;
    background: linear-gradient(115deg, var(--brand-navy) 0 49.8%, var(--brand-green-deep) 50.2% 100%);
    color: #ffffff;
    font-size: 11px;
    font-weight: 850;
    justify-self: end;
    white-space: nowrap;
}

.doctor-focus-reason {
    padding: 14px 16px;
    border-bottom: 1px solid var(--old-border);
    background: color-mix(in srgb, var(--brand-navy) 4%, transparent);
}

.doctor-focus-reason span,
.doctor-focus-meta small {
    display: block;
    margin: 0 0 4px;
    color: var(--old-muted);
    font-size: 11px;
    font-weight: 850;
}

.doctor-focus-reason strong {
    display: block;
    color: var(--old-text);
    font-size: 15px;
    line-height: 1.35;
}

.doctor-focus-meta {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
    gap: 8px;
    margin: 0;
    padding: 14px 16px;
}

.doctor-focus-meta > span {
    display: grid;
    grid-template-columns: 18px minmax(0, 1fr);
    align-items: start;
    gap: 6px;
    min-height: 52px;
    padding: 10px;
    border: 1px solid var(--old-border);
    border-radius: 6px;
    background: var(--old-card-soft);
    color: var(--old-text);
}

.doctor-focus-meta strong {
    display: block;
    min-width: 0;
    overflow: hidden;
    color: var(--old-text);
    font-size: 12px;
    font-weight: 850;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.doctor-focus-meta svg,
.doctor-focus-actions svg,
.doctor-flow-head svg {
    width: 16px;
    height: 16px;
}

.doctor-focus-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    padding: 2px 16px 16px;
}

.doctor-focus-actions form {
    margin: 0;
}

.doctor-focus-actions .button {
    min-height: 38px;
    border-radius: 6px;
    transform: none;
}

.doctor-flow-panel {
    padding: 16px;
}

.doctor-flow-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--old-border);
}

.doctor-flow-head h3 {
    margin: 0;
    color: var(--old-text);
    font-size: 18px;
    line-height: 1.2;
}

.doctor-flow-head a {
    color: var(--brand-navy);
    font-size: 12px;
    font-weight: 850;
    text-decoration: none;
}

.doctor-flow-strip {
    display: grid;
    gap: 8px;
    margin-top: 12px;
}

.doctor-flow-stat {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr);
    align-items: center;
    gap: 12px;
    padding: 11px 12px;
    border: 1px solid var(--old-border);
    border-radius: 4px;
    background: var(--old-card-soft);
}

.doctor-flow-stat .soft-icon {
    border: 1px solid var(--brand-navy-deep);
    background: var(--brand-navy);
    color: #ffffff;
}

.doctor-flow-stat .doctor-flow-num {
    display: block;
    margin: 0;
    font-size: 22px;
    font-weight: 800;
    line-height: 1.05;
    color: var(--old-text);
}

.doctor-flow-stat p {
    display: block;
    margin: 2px 0 0;
    font-size: 12px;
    font-weight: 700;
    text-transform: none;
    color: var(--old-text);
}

.doctor-flow-stat small {
    display: block;
    margin-top: 1px;
    font-size: 11px;
    color: var(--old-muted);
}

.admin-dashboard-page .old-card,
.admin-dashboard-page .old-stat-card,
.doctor-surface .old-card,
.doctor-surface .doctor-stat-card,
.doctor-surface .consult-card {
    border-color: var(--old-border);
    border-radius: 8px;
    background: var(--old-card);
    box-shadow: none;
}

.admin-dashboard-page .old-stat-card,
.doctor-surface .doctor-stat-card {
    min-height: 78px;
    padding: 12px;
    gap: 12px;
    cursor: default;
}

.admin-dashboard-page .old-stat-card:hover,
.doctor-surface .doctor-stat-card:hover {
    border-color: color-mix(in srgb, var(--old-text) 18%, var(--old-border));
    background: var(--old-hover);
    box-shadow: none;
    transform: none;
}

.admin-dashboard-page .old-stat-card p,
.admin-dashboard-page .old-stat-card small,
.doctor-surface .doctor-stat-card p,
.doctor-surface .consult-card small {
    font-size: 11px;
}

.admin-dashboard-page .old-stat-card strong,
.doctor-surface .doctor-stat-card strong {
    font-family: "SF Mono", "Geist Mono", Consolas, monospace;
    font-size: 21px;
}

.doctor-surface .circle-meter {
    display: none;
}

.admin-dashboard-page .old-card-header,
.doctor-surface .old-card-header {
    min-height: 48px;
    padding: 0 16px;
    border-bottom: 1px solid var(--old-border);
}

.admin-dashboard-page .old-card-header h2,
.doctor-surface .old-card-header h2 {
    font-size: 15px;
}

.admin-dashboard-page .stack,
.doctor-surface .stack {
    gap: 8px;
    padding: 12px;
}

.admin-dashboard-page .action-row,
.admin-dashboard-page .activity-card {
    min-height: 54px;
    border: 1px solid transparent;
    border-radius: 8px;
    background: transparent;
    padding: 10px;
}

.admin-dashboard-page .action-row:hover,
.admin-dashboard-page .activity-card:hover {
    border-color: var(--old-border);
    background: var(--old-hover);
}

.doctor-surface .appointment-row,
.doctor-surface .appointment-row.status-neutral,
.doctor-surface .appointment-row.status-yellow,
.doctor-surface .appointment-row.status-green,
.doctor-surface .appointment-row.status-purple,
.doctor-surface .appointment-row.status-gray {
    border-left: 0;
    border-right: 0;
    border-top: 0;
    border-bottom: 1px solid var(--old-border);
    border-radius: 0;
    background: transparent;
    padding: 12px;
}

.doctor-surface .appointment-main {
    border-left: 0;
    padding-left: 0;
}

.doctor-surface .patient-code {
    display: inline-flex;
    margin-right: 8px;
    color: var(--old-text);
    font-size: 11px;
    font-weight: 850;
}

.doctor-surface .quick-tile-grid {
    gap: 8px;
    padding: 12px;
}

.doctor-surface .doctor-care-tools {
    grid-template-columns: 1fr;
}

.doctor-surface .quick-tile-grid a {
    min-height: 54px;
    flex-direction: row;
    justify-content: flex-start;
    border: 1px solid transparent;
    border-radius: 8px;
    background: transparent;
    padding: 10px;
    text-align: left;
}

.doctor-surface .quick-tile-grid a:hover {
    border-color: var(--old-border);
    background: var(--old-hover);
    box-shadow: none;
    transform: none;
}

.doctor-surface .consultation-grid {
    gap: 0;
}

.doctor-surface .consult-card {
    border: 0;
    border-right: 1px solid var(--old-border);
    border-radius: 0;
}

.doctor-surface .consult-card:last-child {
    border-right: 0;
}

.clinical-note-timeline {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.clinical-note-item {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr);
    gap: 10px;
    padding: 16px;
    border-right: 1px solid var(--old-border);
}

.clinical-note-item:last-child {
    border-right: 0;
}

.clinical-note-marker {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border: 1px solid var(--brand-navy-deep);
    border-radius: 6px;
    background: var(--brand-navy);
    color: #ffffff !important;
}

.clinical-note-marker svg,
.clinical-note-marker .q-icon {
    width: 16px;
    height: 16px;
    color: currentColor !important;
    stroke: currentColor !important;
    filter: none !important;
}

.clinical-note-body > div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.clinical-note-body h3,
.clinical-note-body p,
.clinical-note-body small {
    margin: 0;
}

.clinical-note-body h3 {
    color: var(--old-text);
    font-size: 14px;
}

.clinical-note-body p {
    margin-top: 8px;
    color: var(--old-muted);
    font-size: 13px;
    line-height: 1.45;
}

.clinical-note-body small {
    display: block;
    margin-top: 8px;
    color: var(--old-muted);
    font-size: 11px;
}

.clinical-note-link {
    display: inline-flex;
    margin-top: 10px;
    color: var(--brand-navy);
    font-size: 12px;
    font-weight: 850;
    text-decoration: none;
}

:root[data-theme="dark"] .admin-dashboard-page,
:root[data-theme="dark"] .doctor-surface {
    background: #111111;
}

:root[data-theme="dark"] .admin-dashboard-page .old-card,
:root[data-theme="dark"] .admin-dashboard-page .old-stat-card,
:root[data-theme="dark"] .doctor-surface .old-card,
:root[data-theme="dark"] .doctor-surface .doctor-stat-card,
:root[data-theme="dark"] .doctor-surface .consult-card,
:root[data-theme="dark"] .doctor-surface .date-panel {
    border-color: #2a2a2a;
    background: #181818;
}

:root[data-theme="dark"] .admin-dashboard-page .soft-icon,
:root[data-theme="dark"] .doctor-surface .soft-icon {
    border-color: transparent;
    background: transparent;
}

:root[data-theme="dark"] .doctor-focus-card,
:root[data-theme="dark"] .doctor-flow-panel,
:root[data-theme="dark"] .doctor-flow-stat {
    border-color: #2a2a2a;
    background: #181818;
}

:root[data-theme="dark"] .doctor-focus-card {
    border-top-color: #1f3f68;
    background: linear-gradient(90deg, #181818 0 68%, #101010 68% 100%);
}

:root[data-theme="dark"] .doctor-focus-card::after {
    content: none;
}

:root[data-theme="dark"] .doctor-eyebrow,
:root[data-theme="dark"] .doctor-flow-head a,
:root[data-theme="dark"] .clinical-note-link {
    color: #f7f6f3;
}

:root[data-theme="dark"] .doctor-focus-head {
    background: #181818;
}

:root[data-theme="dark"] .doctor-focus-meta > span {
    border-color: #343434;
    background: #101010;
    color: #ffffff;
}

:root[data-theme="dark"] .doctor-focus-reason {
    background: #101010;
}

:root[data-theme="dark"] .doctor-focus-state {
    border-color: transparent;
    background: linear-gradient(115deg, var(--brand-navy) 0 49.8%, var(--brand-green-deep) 50.2% 100%);
    color: #ffffff;
}

:root[data-theme="dark"] .clinical-note-marker {
    border-color: transparent !important;
    background: transparent !important;
    color: #d2d8de !important;
}

:root[data-theme="dark"] .clinical-note-marker svg,
:root[data-theme="dark"] .clinical-note-marker .q-icon {
    color: currentColor !important;
    stroke: currentColor !important;
    filter: none !important;
}

@media (max-width: 1180px) {
    .admin-dashboard-page .old-stats.four,
    .admin-dashboard-page .old-stats.three,
    .admin-dashboard-page .content-grid.admin-grid,
    .doctor-day-panel,
    .doctor-surface .doctor-stat-grid,
    .doctor-surface .content-grid.doctor-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 920px) {
    .admin-dashboard-page,
    .doctor-surface {
        padding: 16px;
    }

    .admin-dashboard-page .old-stats.four,
    .admin-dashboard-page .old-stats.three,
    .admin-dashboard-page .content-grid.admin-grid,
    .doctor-day-panel,
    .doctor-surface .doctor-stat-grid,
    .doctor-surface .content-grid.doctor-grid,
    .doctor-surface .consultation-grid {
        grid-template-columns: 1fr;
    }

    .clinical-note-timeline {
        grid-template-columns: 1fr;
    }

    .doctor-focus-head {
        grid-template-columns: 1fr;
    }

    .doctor-focus-state {
        grid-column: 1 / -1;
        justify-self: start;
    }

    .doctor-focus-meta {
        grid-template-columns: 1fr;
    }

    .doctor-surface .consult-card {
        border-right: 0;
        border-bottom: 1px solid var(--old-border);
    }

    .clinical-note-item {
        border-right: 0;
        border-bottom: 1px solid var(--old-border);
    }

    .clinical-note-item:last-child {
        border-bottom: 0;
    }

    .doctor-surface .consult-card:last-child {
        border-bottom: 0;
    }
}

/* Final compact app chrome pass. Matches the front desk, doctor, and admin surfaces. */
.old-sidebar {
    width: 236px;
    background: #fbfbfa;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border-right: 1px solid #eaeaea;
    color: var(--old-text);
}

.old-main {
    margin-left: 236px;
}

.sidebar-header {
    height: 76px;
    gap: 10px;
    padding: 0 14px;
    border-bottom: 1px solid #eaeaea;
}

.old-sidebar .sidebar-header {
    height: 132px;
    min-height: 132px;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0;
    padding: 18px 8px;
}

.old-sidebar .sidebar-brand {
    width: 100%;
}

.specialty-mark,
.sidebar-avatar,
.topbar-avatar {
    border-color: #eaeaea;
    background: #f7f6f3;
    color: #1f3f68;
    box-shadow: none;
}

.specialty-mark {
    width: 32px;
    height: 32px;
    border-radius: 8px;
}

.sidebar-brand-name {
    color: #111111;
    font-size: 15px;
    font-weight: 760;
    letter-spacing: 0;
}

.sidebar-specialty-pill {
    width: fit-content;
    border-color: #eaeaea;
    border-radius: 4px;
    background: #f7f6f3;
    color: #787774;
    font-size: 10px;
    font-weight: 760;
    letter-spacing: 0.06em;
    padding: 1px 6px;
}

.old-nav {
    padding: 8px 0;
}

.nav-category {
    margin-bottom: 2px;
}

.nav-category summary,
.old-nav a,
.sidebar-bottom a {
    min-height: 34px;
    border: 1px solid transparent;
    border-radius: 6px;
    color: #787774;
    font-size: 13px;
    font-weight: 560;
    margin: 2px 8px;
    padding: 7px 10px;
}

.nav-category summary:hover,
.old-nav a:hover,
.sidebar-bottom a:hover,
.sidebar-user-card:hover {
    border-color: #eaeaea;
    background: #f7f6f3;
    color: #111111;
}

.old-nav a.active {
    border-color: #eaeaea;
    background: #f1f0ec;
    color: #111111;
    font-weight: 680;
}

.old-nav a.active::before {
    content: none;
}

.old-nav a.active .nav-icon,
.nav-category summary:hover .nav-icon,
.old-nav a:hover .nav-icon,
.sidebar-bottom a:hover .nav-icon {
    color: #a7a29a !important;
    transform: none;
}

.nav-icon {
    color: #a7a29a;
}

.nav-items {
    margin: 2px 0 6px 18px;
    border-left: 1px solid #eaeaea;
    padding-left: 8px;
}

.sidebar-footer {
    border-top: 1px solid #eaeaea;
}

.sidebar-bottom {
    padding: 6px 0;
}

.sidebar-user-card {
    padding: 10px 12px;
    border-bottom: 1px solid #eaeaea;
}

.sidebar-avatar {
    width: 30px;
    height: 30px;
    border-radius: 8px;
    font-size: 12px;
}

.sidebar-user-info strong {
    color: #111111;
    font-size: 12px;
    font-weight: 680;
}

.sidebar-user-info span {
    color: #787774;
    font-size: 10.5px;
}

.sidebar-toggle-wrapper {
    padding: 8px 12px;
    border-top: 1px solid #eaeaea;
}

.sidebar-toggle-btn {
    width: 30px;
    height: 30px;
    border-color: #eaeaea;
    border-radius: 6px;
    background: #fbfbfa;
    color: #787774;
}

.sidebar-toggle-btn:hover {
    border-color: #d8d7d2;
    background: #f7f6f3;
    color: #111111;
}

.old-topbar {
    min-height: 58px;
    padding: 0 20px;
    gap: 14px;
    background: #fbfbfa;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border-bottom: 1px solid #eaeaea;
    box-shadow: none;
}

.topbar-page-title {
    color: #111111;
    font-size: 14px;
    font-weight: 720;
    letter-spacing: 0;
}

.topbar-breadcrumb {
    color: #787774;
    font-size: 11px;
}

.topbar-actions {
    gap: 8px;
}

.role-switcher {
    min-width: 150px;
}

.topbar-clock,
.topbar-branch-chip {
    display: inline-grid;
    align-items: center;
    gap: 8px;
    min-height: 34px;
    border: 1px solid #eaeaea;
    border-radius: 8px;
    background: #fbfbfa;
    color: #111111;
    padding: 4px 10px 4px 7px;
}

.topbar-clock {
    grid-template-columns: 24px minmax(86px, auto);
}

.topbar-branch-chip {
    grid-template-columns: 8px minmax(84px, auto);
    max-width: 168px;
    padding-left: 10px;
}

.topbar-clock strong,
.topbar-clock small,
.topbar-branch-chip strong,
.topbar-branch-chip small {
    display: block;
    line-height: 1.15;
    white-space: nowrap;
}

.topbar-clock strong,
.topbar-branch-chip strong {
    color: #111111;
    font-family: "SF Mono", "Geist Mono", Consolas, monospace;
    font-size: 12px;
    font-weight: 800;
}

.topbar-clock small,
.topbar-branch-chip small {
    margin-top: 2px;
    color: #787774;
    font-size: 10px;
    font-weight: 720;
}

.topbar-branch-chip strong {
    overflow: hidden;
    text-overflow: ellipsis;
}

.topbar-branch-chip small {
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.branch-dot {
    width: 8px;
    height: 8px;
    border-radius: 3px;
    background: #1f3f68;
}

.clock-glyph {
    position: relative;
    display: inline-grid;
    width: 24px;
    height: 24px;
    place-items: center;
    border: 1px solid #eaeaea;
    border-radius: 7px;
    background: #f7f6f3;
}

.topbar-clock.is-day .clock-glyph::before {
    content: "";
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #956400;
    box-shadow:
        0 -6px 0 -4px #956400,
        0 6px 0 -4px #956400,
        6px 0 0 -4px #956400,
        -6px 0 0 -4px #956400,
        4px 4px 0 -4px #956400,
        -4px -4px 0 -4px #956400,
        4px -4px 0 -4px #956400,
        -4px 4px 0 -4px #956400;
}

.topbar-clock.is-night .clock-glyph::before {
    content: "";
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #1f3f68;
}

.topbar-clock.is-night .clock-glyph::after {
    content: "";
    position: absolute;
    top: 5px;
    left: 9px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #f7f6f3;
}

.role-switcher summary,
.topbar-actions .theme-toggle,
.topbar-link,
.topbar-user-chip,
.role-switcher summary {
    padding: 6px 30px 6px 10px;
}

.role-switcher summary small {
    font-size: 9.5px;
    letter-spacing: 0.06em;
}

.role-switcher summary strong {
    color: #111111;
    font-size: 12px;
    font-weight: 720;
}

.role-switcher-desk summary {
    min-width: 158px;
}

.role-switcher[open] summary,
.role-switcher summary:hover,
.topbar-actions .theme-toggle:hover,
.topbar-link:hover,
.topbar-user-chip:hover {
    border-color: #d8d7d2;
    background: #f7f6f3;
    color: #111111;
}

.role-switcher-menu {
    border-color: #eaeaea;
    border-radius: 8px;
    background: #fbfbfa;
    box-shadow: 0 16px 34px rgba(15, 23, 42, 0.1);
}

.role-switcher-menu a {
    border-radius: 6px;
}

.role-switcher-menu a.active {
    border-color: #eaeaea;
    background: #f1f0ec;
}

.role-switcher-menu b {
    border-color: #eaeaea;
    background: #f7f6f3;
    color: #1f3f68;
}

.topbar-actions .theme-toggle {
    padding: 0 10px;
}

.topbar-actions .theme-toggle-icon {
    border-color: #d8d7d2;
    background: #f1f0ec;
}

.topbar-actions .theme-toggle-icon::after {
    background: #1f3f68;
}

.topbar-link {
    padding: 0 10px;
}

.topbar-link.purple {
    color: #1f3f68;
}

.topbar-user-chip {
    gap: 8px;
    padding: 3px 4px 3px 8px;
}

.topbar-avatar {
    width: 26px;
    height: 26px;
    border-radius: 7px;
    font-size: 11px;
}

.topbar-user-name {
    color: #111111;
    font-size: 12px;
    font-weight: 640;
}

:root[data-theme="dark"] .old-sidebar,
:root[data-theme="dark"] .old-topbar,
:root[data-theme="dark"] .role-switcher-menu {
    background: #1a1a1a;
    border-color: #2c2c2c;
}

:root[data-theme="dark"] .old-main {
    background: #121212;
}

:root[data-theme="dark"] .sidebar-header,
:root[data-theme="dark"] .sidebar-footer,
:root[data-theme="dark"] .sidebar-user-card,
:root[data-theme="dark"] .sidebar-toggle-wrapper,
:root[data-theme="dark"] .old-topbar {
    border-color: #2c2c2c;
}

:root[data-theme="dark"] .sidebar-brand-name,
:root[data-theme="dark"] .topbar-page-title,
:root[data-theme="dark"] .topbar-user-name,
:root[data-theme="dark"] .role-switcher summary strong,
:root[data-theme="dark"] .sidebar-user-info strong {
    color: #f7f6f3;
}

:root[data-theme="dark"] .sidebar-specialty-pill,
:root[data-theme="dark"] .specialty-mark,
:root[data-theme="dark"] .sidebar-avatar,
:root[data-theme="dark"] .topbar-avatar,
:root[data-theme="dark"] .sidebar-toggle-btn,
:root[data-theme="dark"] .role-switcher summary,
:root[data-theme="dark"] .topbar-actions .theme-toggle,
:root[data-theme="dark"] .topbar-link,
:root[data-theme="dark"] .topbar-user-chip {
    border-color: #2c2c2c;
    background: #202020;
    color: #a7a29a;
}

:root[data-theme="dark"] .nav-category summary,
:root[data-theme="dark"] .old-nav a,
:root[data-theme="dark"] .sidebar-bottom a,
:root[data-theme="dark"] .sidebar-user-info span {
    color: #a7a29a;
}

:root[data-theme="dark"] .nav-category summary:hover,
:root[data-theme="dark"] .old-nav a:hover,
:root[data-theme="dark"] .sidebar-bottom a:hover,
:root[data-theme="dark"] .sidebar-user-card:hover,
:root[data-theme="dark"] .old-nav a.active,
:root[data-theme="dark"] .role-switcher[open] summary,
:root[data-theme="dark"] .role-switcher summary:hover,
:root[data-theme="dark"] .topbar-actions .theme-toggle:hover,
:root[data-theme="dark"] .topbar-link:hover,
:root[data-theme="dark"] .topbar-user-chip:hover,
:root[data-theme="dark"] .role-switcher-menu a.active,
:root[data-theme="dark"] .role-switcher-menu a:hover {
    border-color: #3e3e3e;
    background: #282828;
    color: #f7f6f3;
}

:root[data-theme="dark"] .nav-items {
    border-color: #2c2c2c;
}

:root[data-theme="dark"] .nav-icon,
:root[data-theme="dark"] .topbar-breadcrumb,
:root[data-theme="dark"] .sidebar-user-info span,
:root[data-theme="dark"] .role-switcher summary small,
:root[data-theme="dark"] .role-switcher-menu a small {
    color: #a7a29a;
}

:root[data-theme="dark"] .role-switcher-menu {
    box-shadow: 0 18px 38px rgba(0, 0, 0, 0.36);
}

:root[data-theme="dark"] .topbar-clock {
    border-color: #2a2a2a;
    background: #181818;
}

:root[data-theme="dark"] .topbar-branch-chip {
    border-color: #2a2a2a;
    background: #181818;
}

:root[data-theme="dark"] .topbar-clock strong,
:root[data-theme="dark"] .topbar-branch-chip strong {
    color: #f7f6f3;
}

:root[data-theme="dark"] .topbar-clock small,
:root[data-theme="dark"] .topbar-branch-chip small {
    color: #a7a29a;
}

:root[data-theme="dark"] .branch-dot {
    background: #d2d8de;
}

:root[data-theme="dark"] .clock-glyph {
    border-color: #333333;
    background: #202020;
}

:root[data-theme="dark"] .topbar-clock.is-night .clock-glyph::before {
    background: #d2d8de;
}

:root[data-theme="dark"] .topbar-clock.is-night .clock-glyph::after {
    background: #202020;
}

:root[data-theme="dark"] .topbar-clock.is-day .clock-glyph::before {
    background: #d2d8de;
    box-shadow:
        0 -6px 0 -4px #d2d8de,
        0 6px 0 -4px #d2d8de,
        6px 0 0 -4px #d2d8de,
        -6px 0 0 -4px #d2d8de,
        4px 4px 0 -4px #d2d8de,
        -4px -4px 0 -4px #d2d8de,
        4px -4px 0 -4px #d2d8de,
        -4px 4px 0 -4px #d2d8de;
}

:root[data-theme="dark"] .topbar-actions .theme-toggle-icon {
    border-color: #333333;
    background: #202020;
}

:root[data-theme="dark"] .topbar-actions .theme-toggle-icon::after {
    background: #d2d8de;
}

/* Final light-mode accent cleanup: remove remaining legacy UI accents. */
:root:not([data-theme="dark"]) {
    --neutral: #1f3f68;
    --purple: #1f3f68;
    --indigo: #1f3f68;
}

:root:not([data-theme="dark"]) .old-workflow-shell {
    --accent: var(--specialty-color, #1f3f68) !important;
    --accent-2: #2b5a8d !important;
}

/* ─────────────────────────────────────────────────────────
   TOPBAR - Light / Workflow Shell  (Elementor/Divi style)
   Solid Brand Navy Blue #1f3f68
   ───────────────────────────────────────────────────────── */
:root:not([data-theme="dark"]) .old-workflow-shell .old-topbar {
    min-height: 58px;
    background: #1f3f68;
    border-bottom: 2px solid rgba(0, 0, 0, 0.15);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.12);
    /* Sticky like dark mode - this rule used to demote it to relative,
       so the header scrolled away in light mode only. */
    position: sticky;
    top: 0;
    z-index: 60;
    /* NO overflow:hidden - allows role dropdown to escape */
}

/* Left accent bar on page title - Solid Brand Green */
:root:not([data-theme="dark"]) .old-workflow-shell .topbar-title::before {
    content: "";
    display: block;
    width: 3px;
    height: 14px;
    flex: 0 0 auto;
    background: #36a66a;
    border-radius: 1.5px;
}



:root:not([data-theme="dark"]) .old-workflow-shell .topbar-page-title {
    color: #ffffff;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: -0.01em;
}

:root:not([data-theme="dark"]) .old-workflow-shell .topbar-breadcrumb {
    color: rgba(220, 235, 255, 0.75); /* Highly readable on brand navy */
    font-size: 10.5px;
    letter-spacing: 0;
}

/* All chips - Borderless and transparent by default, floating elegantly on brand green */
:root:not([data-theme="dark"]) .old-workflow-shell .topbar-clock,
:root:not([data-theme="dark"]) .old-workflow-shell .topbar-branch-chip,
:root:not([data-theme="dark"]) .old-workflow-shell .role-switcher summary,
:root:not([data-theme="dark"]) .old-workflow-shell .topbar-actions .theme-toggle,
:root:not([data-theme="dark"]) .old-workflow-shell .topbar-link,
:root:not([data-theme="dark"]) .old-workflow-shell .topbar-user-chip {
    min-height: 32px;
    border: 1px solid transparent; /* Keeps spacing identical without visual border */
    border-radius: 6px;
    background: transparent;
    color: rgba(255, 255, 255, 0.95);
    box-shadow: none;
    transition: background 140ms ease, border-color 140ms ease;
}

:root:not([data-theme="dark"]) .old-workflow-shell .topbar-clock strong,
:root:not([data-theme="dark"]) .old-workflow-shell .topbar-branch-chip strong,
:root:not([data-theme="dark"]) .old-workflow-shell .role-switcher summary strong,
:root:not([data-theme="dark"]) .old-workflow-shell .topbar-user-name,
:root:not([data-theme="dark"]) .old-workflow-shell .topbar-link.purple {
    color: #ffffff;
}

:root:not([data-theme="dark"]) .old-workflow-shell .topbar-clock small,
:root:not([data-theme="dark"]) .old-workflow-shell .topbar-branch-chip small,
:root:not([data-theme="dark"]) .old-workflow-shell .role-switcher summary small {
    color: rgba(255, 255, 255, 0.72);
}

/* Branch indicator dot */
:root:not([data-theme="dark"]) .old-workflow-shell .branch-dot {
    width: 6px;
    height: 14px;
    border-radius: 2px;
    background: #5dd68a;
    box-shadow: none;
}

/* User avatar */
:root:not([data-theme="dark"]) .old-workflow-shell .topbar-avatar {
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 6px;
    background: #f3f4f8;
    color: #1f3f68; /* Brand Navy */
    font-weight: 800;
}

/* Theme toggle pill track */
:root:not([data-theme="dark"]) .old-workflow-shell .topbar-actions .theme-toggle-icon {
    border-color: rgba(255, 255, 255, 0.3);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.15);
}

:root:not([data-theme="dark"]) .old-workflow-shell .topbar-actions .theme-toggle-icon::after {
    background: #f3f4f8;
}

/* Role switcher summary chevron */
:root:not([data-theme="dark"]) .old-workflow-shell .role-switcher summary::after {
    border-color: rgba(255, 255, 255, 0.75);
}

/* Clock icon box - borderless & transparent */
:root:not([data-theme="dark"]) .old-workflow-shell .clock-glyph {
    border: none;
    background: transparent;
}

/* Disable old CSS sun/moon pseudo-elements on the new dynamic widget globally (both light & dark modes) */
.old-workflow-shell .clock-glyph::before,
.old-workflow-shell .clock-glyph::after {
    content: none !important;
    display: none !important;
}

/* Hover states - elegant minimalist highlight on hover */
:root:not([data-theme="dark"]) .old-workflow-shell .role-switcher[open] summary,
:root:not([data-theme="dark"]) .old-workflow-shell .role-switcher summary:hover,
:root:not([data-theme="dark"]) .old-workflow-shell .topbar-actions .theme-toggle:hover,
:root:not([data-theme="dark"]) .old-workflow-shell .topbar-link:hover,
:root:not([data-theme="dark"]) .old-workflow-shell .topbar-user-chip:hover {
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(255, 255, 255, 0.18);
    color: #ffffff;
}

/* Ensure the form inside user chip doesn't wrap or block-break flow */
.old-workflow-shell .topbar-user-chip form {
    display: inline-flex;
    align-items: center;
    margin: 0;
    padding: 0;
}

/* Custom Diagonal Split Logout Button: Brand Navy #1f3f68 × Green #36a66a */
/* ── Role dropdown menu: white panel with dark text ── */
:root:not([data-theme="dark"]) .old-workflow-shell .role-switcher-menu {
    background: #f3f4f8;
    border: 1px solid rgba(0, 0, 0, 0.1);
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.14);
    border-radius: 8px;
}

:root:not([data-theme="dark"]) .old-workflow-shell .role-switcher-menu a {
    color: #1a2e1f;
    border-radius: 6px;
}

:root:not([data-theme="dark"]) .old-workflow-shell .role-switcher-menu a strong {
    color: #111111;
    font-weight: 700;
}

:root:not([data-theme="dark"]) .old-workflow-shell .role-switcher-menu a small {
    color: #5a7060;
}

:root:not([data-theme="dark"]) .old-workflow-shell .role-switcher-menu a:hover {
    background: #f0f9f4;
    color: #111111;
    border-color: transparent;
}

:root:not([data-theme="dark"]) .old-workflow-shell .role-switcher-menu a.active {
    background: #e8f5ee;
    border-color: #c2e0cf;
}

:root:not([data-theme="dark"]) .old-workflow-shell .role-switcher-menu b {
    background: #f5f5f3;
    border-color: #e5e5e3;
    color: #1c5c38;
}

/* Decorative Brand Split Strip at the absolute bottom of the Sidebar */
.old-workflow-shell .old-sidebar::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background: linear-gradient(115deg, #1f3f68 50%, #36a66a 50.2%);
    z-index: 100;
}

/* Decorative Brand Split Divider right under the brand logo in Sidebar header */
.old-workflow-shell .old-sidebar .sidebar-header {
    position: relative;
}
.old-workflow-shell .old-sidebar .sidebar-header::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background: linear-gradient(115deg, #1f3f68 50%, #36a66a 50.2%);
    z-index: 10;
}

/* Ultra-sleek vertical brand split indicator on the active navigation item */
.old-workflow-shell .old-nav a.active {
    position: relative;
}
.old-workflow-shell .old-nav a.active::before {
    content: "" !important;
    position: absolute;
    left: 0;
    top: 6px;
    bottom: 6px;
    width: 3px;
    background: linear-gradient(to bottom, #1f3f68 50%, #36a66a 50.2%) !important;
    border-radius: 99px;
    display: block !important;
}

/* User avatar custom 2px border styled with the brand split ring */
:root:not([data-theme="dark"]) .old-workflow-shell .sidebar-avatar {
    border: 2px solid transparent !important;
    background: linear-gradient(#f3f4f8, #f3f4f8) padding-box, linear-gradient(115deg, #1f3f68 50%, #36a66a 50.2%) border-box !important;
    box-shadow: none !important;
}

:root:not([data-theme="dark"]) .heading-icon,
:root:not([data-theme="dark"]) .soft-icon.purple,
:root:not([data-theme="dark"]) .soft-icon.indigo {
    border: 1px solid #eaeaea;
    background: #eef5fa;
    color: #1f3f68;
}

:root:not([data-theme="dark"]) .frontdesk-mini-stats .purple,
:root:not([data-theme="dark"]) .appointment-stat.purple,
:root:not([data-theme="dark"]) .followup-stat.purple {
    border-color: #d8d7d2;
}

:root:not([data-theme="dark"]) .frontdesk-stock-card,
:root:not([data-theme="dark"]) .appointment-card,
:root:not([data-theme="dark"]) .followup-card,
:root:not([data-theme="dark"]) .appointment-card.status-neutral,
:root:not([data-theme="dark"]) .appointment-card.status-purple,
:root:not([data-theme="dark"]) .followup-card.status-neutral,
:root:not([data-theme="dark"]) .followup-card.status-purple {
    border-left-color: #d8d7d2;
}

:root:not([data-theme="dark"]) .appointment-row.status-neutral,
:root:not([data-theme="dark"]) .appointment-row.status-purple,
:root:not([data-theme="dark"]) .queue-row.status-neutral .queue-status-bar,
:root:not([data-theme="dark"]) .queue-row.status-purple .queue-status-bar {
    border-left-color: #d8d7d2;
    background: transparent;
}

:root:not([data-theme="dark"]) .status-pill.status-neutral,
:root:not([data-theme="dark"]) .status-pill.status-purple,
:root:not([data-theme="dark"]) .priority-purple {
    border: 1px solid #eaeaea;
    background: #eef5fa;
    color: #1f3f68;
}

:root:not([data-theme="dark"]) .mini-button.neutral {
    background: #111111;
    color: #ffffff;
    box-shadow: none;
}

@media (min-width: 821px) {
    .sidebar-collapsed .old-sidebar {
        width: 62px;
    }

    .sidebar-collapsed .old-main {
        margin-left: 62px;
    }

    .sidebar-collapsed .old-sidebar .sidebar-header {
        height: 72px;
        min-height: 72px;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        padding: 0;
    }

    .sidebar-collapsed .old-sidebar .sidebar-brand-mark {
        width: 54px;
        height: 38px;
    }

    .sidebar-collapsed .old-sidebar .old-nav a,
    .sidebar-collapsed .old-sidebar .sidebar-bottom a,
    .sidebar-collapsed .old-sidebar .nav-category summary {
        margin: 2px 7px;
        padding: 7px 0;
    }
}

@media (max-width: 920px) {
    .old-sidebar {
        position: fixed !important;
        top: 0;
        left: 0;
        bottom: 0;
        width: 280px;
        height: 100vh !important;
        z-index: 2000 !important;
        box-shadow: 20px 0 40px rgba(0, 0, 0, 0.15);
        transform: translateX(-100%);
        transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
        display: flex !important;
    }

    .old-sidebar.mobile-open {
        transform: translateX(0) !important;
    }

    .sidebar-toggle-wrapper {
        display: none !important;
    }

    .old-main {
        margin-left: 0;
    }

    .old-topbar {
        padding: 14px;
    }
}

/* Final sidebar-page color scrub: flatten legacy rails and light-mode wash. */
:root:not([data-theme="dark"]) .eyecare-surface,
:root:not([data-theme="dark"]) .dental-surface,
:root:not([data-theme="dark"]) .frontdesk-dashboard-page,
:root:not([data-theme="dark"]) .frontdesk-workpage,
:root:not([data-theme="dark"]) .frontdesk-patients-page,
:root:not([data-theme="dark"]) .appointment-page,
:root:not([data-theme="dark"]) .doctor-surface {
    background: #f3f4f8 !important;
}

:root:not([data-theme="dark"]) .old-workflow-shell .appointment-card,
:root:not([data-theme="dark"]) .old-workflow-shell .followup-card,
:root:not([data-theme="dark"]) .old-workflow-shell .frontdesk-stock-card,
:root:not([data-theme="dark"]) .old-workflow-shell .appointment-row[class*="status-"],
:root:not([data-theme="dark"]) .old-workflow-shell .queue-row[class*="status-"],
:root:not([data-theme="dark"]) .old-workflow-shell .service-line,
:root:not([data-theme="dark"]) .old-workflow-shell .workflow-hero {
    border-left-width: 1px !important;
    border-left-color: #eaeaea !important;
    background-image: none !important;
}

:root:not([data-theme="dark"]) .old-workflow-shell .appointment-row.status-neutral,
:root:not([data-theme="dark"]) .old-workflow-shell .appointment-row.status-purple,
:root:not([data-theme="dark"]) .old-workflow-shell .appointment-row.status-yellow,
:root:not([data-theme="dark"]) .old-workflow-shell .appointment-row.status-green,
:root:not([data-theme="dark"]) .old-workflow-shell .queue-row.status-neutral,
:root:not([data-theme="dark"]) .old-workflow-shell .queue-row.status-purple,
:root:not([data-theme="dark"]) .old-workflow-shell .queue-row.status-yellow,
:root:not([data-theme="dark"]) .old-workflow-shell .queue-row.status-green {
    background: transparent !important;
}

:root:not([data-theme="dark"]) .old-workflow-shell .queue-status-bar,
:root:not([data-theme="dark"]) .old-workflow-shell .queue-dot.status-neutral,
:root:not([data-theme="dark"]) .old-workflow-shell .queue-dot.status-purple,
:root:not([data-theme="dark"]) .old-workflow-shell .queue-dot.status-yellow,
:root:not([data-theme="dark"]) .old-workflow-shell .queue-dot.status-green {
    background: #d8d7d2 !important;
}

:root:not([data-theme="dark"]) .frontdesk-dashboard-page .fd-stat-card,
:root:not([data-theme="dark"]) .frontdesk-dashboard-page .fd-stat-card[data-tone],
:root:not([data-theme="dark"]) .frontdesk-dashboard-page .front-stat-card {
    --fd-tone: #1f3f68 !important;
}

:root:not([data-theme="dark"]) .frontdesk-kicker,
:root:not([data-theme="dark"]) .neutral-text,
:root:not([data-theme="dark"]) .old-card-header a,
:root:not([data-theme="dark"]) .frontdesk-dashboard-page .action-row:hover b {
    color: #1f3f68 !important;
}

:root:not([data-theme="dark"]) .frontdesk-dashboard-page .action-row:hover b {
    border-color: #d8d7d2 !important;
}

:root:not([data-theme="dark"]) .old-workflow-shell .heading-icon,
:root:not([data-theme="dark"]) .old-workflow-shell .soft-icon,
:root:not([data-theme="dark"]) .old-workflow-shell .frontdesk-mini-stats article,
:root:not([data-theme="dark"]) .old-workflow-shell .appointment-stat,
:root:not([data-theme="dark"]) .old-workflow-shell .followup-stat,
:root:not([data-theme="dark"]) .old-workflow-shell .priority-neutral,
:root:not([data-theme="dark"]) .old-workflow-shell .priority-purple,
:root:not([data-theme="dark"]) .old-workflow-shell .status-pill.status-neutral,
:root:not([data-theme="dark"]) .old-workflow-shell .status-pill.status-purple {
    border: 1px solid #eaeaea !important;
    background: #f7f6f3 !important;
    color: #1f3f68 !important;
}

:root:not([data-theme="dark"]) .next-patient-banner {
    border-color: #eaeaea !important;
    border-radius: 8px !important;
    background: #fbfbfa !important;
    box-shadow: none !important;
}

:root:not([data-theme="dark"]) .next-patient-banner:hover {
    transform: none !important;
    box-shadow: none !important;
}

:root:not([data-theme="dark"]) .next-patient-banner::before,
:root:not([data-theme="dark"]) .pulse-ring {
    display: none !important;
}

:root:not([data-theme="dark"]) .banner-badge {
    background: #f7f6f3 !important;
    color: #1f3f68 !important;
}

:root:not([data-theme="dark"]) .banner-button,
:root:not([data-theme="dark"]) .mini-button.neutral,
:root:not([data-theme="dark"]) .mini-button.yellow {
    background: #1f3f68 !important;
    color: #ffffff !important;
    box-shadow: none !important;
    transition: background 140ms ease;
}

:root:not([data-theme="dark"]) .banner-button:hover,
:root:not([data-theme="dark"]) .mini-button.neutral:hover,
:root:not([data-theme="dark"]) .mini-button.yellow:hover {
    background: #2b5a8d !important;
}

.doctor-surface .next-patient-banner {
    gap: 14px !important;
    margin: -4px 0 20px !important;
    padding: 14px 16px !important;
    border-radius: 10px !important;
    background:
        linear-gradient(118deg, rgba(31, 63, 104, 0.08) 0 30%, transparent 30.2%),
        rgba(255, 255, 255, 0.52) !important;
    border-color: rgba(31, 63, 104, 0.14) !important;
    box-shadow: none !important;
}

.doctor-surface .next-patient-banner:hover {
    transform: none !important;
}

.doctor-surface .next-patient-banner .pulse-ring {
    display: none !important;
}

.doctor-surface .next-patient-banner .banner-icon-side {
    width: 42px;
    min-width: 42px;
    height: 42px;
    border-radius: 10px;
    background: rgba(31, 63, 104, 0.08);
    color: #1f3f68;
}

.doctor-surface .next-patient-banner .soft-icon.large {
    color: currentColor !important;
}

.doctor-surface .next-patient-banner .banner-badge {
    background: transparent !important;
    color: #1f3f68 !important;
    padding: 0 !important;
    margin-bottom: 4px !important;
    font-size: 10px !important;
}

.doctor-surface .next-patient-banner .banner-info h2 {
    font-size: 1rem;
    margin-bottom: 2px;
}

.doctor-surface .next-patient-banner .banner-info p {
    font-size: 12px;
}

.doctor-surface .next-patient-banner .banner-button {
    border-radius: 8px !important;
    padding: 10px 14px !important;
    font-size: 13px !important;
}

:root[data-theme="dark"] .doctor-surface .next-patient-banner {
    background:
        linear-gradient(118deg, rgba(126, 226, 162, 0.08) 0 30%, transparent 30.2%),
        rgba(255, 255, 255, 0.04) !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
}

:root[data-theme="dark"] .doctor-surface .next-patient-banner .banner-icon-side {
    background: rgba(126, 226, 162, 0.1);
    color: #7ee2a2;
}

:root[data-theme="dark"] .doctor-surface .next-patient-banner .banner-badge {
    color: #7ee2a2 !important;
}

:root:not([data-theme="dark"]) .old-main .button:not(.secondary):not(.ghost),
:root:not([data-theme="dark"]) .button:not(.secondary):not(.ghost) {
    border-color: #1f3f68 !important;
    background: #1f3f68 !important;
    color: #ffffff !important;
    box-shadow: none !important;
    transition: background 140ms ease, border-color 140ms ease;
}

:root:not([data-theme="dark"]) .old-main .button:not(.secondary):not(.ghost) .eyeston-icon,
:root:not([data-theme="dark"]) .button:not(.secondary):not(.ghost) .eyeston-icon {
    color: #ffffff !important;
}

:root:not([data-theme="dark"]) .old-main .button:not(.secondary):not(.ghost):hover,
:root:not([data-theme="dark"]) .button:not(.secondary):not(.ghost):hover {
    border-color: #2b5a8d !important;
    background: #2b5a8d !important;
    color: #ffffff !important;
}

:root:not([data-theme="dark"]) .old-main .button.secondary,
:root:not([data-theme="dark"]) .old-main .button.ghost {
    border-color: #d8d7d2 !important;
    background: #fbfbfa !important;
    color: #1f3f68 !important;
    box-shadow: none !important;
}

/* ─────────────────────────────────────────────────────────
   LANDING, LOGIN, AND SIGNUP DIAGONAL STYLE
   ───────────────────────────────────────────────────────── */
.landing .hero {
    background: linear-gradient(115deg, #1f3f68 50%, #36a66a 50.2%) !important;
    color: #ffffff !important;
    padding: 72px 20px 100px !important;
}
.landing .hero h1 {
    color: #ffffff !important;
}
.landing .hero p {
    color: rgba(255, 255, 255, 0.92) !important;
}
.landing .hero .eyebrow {
    color: #36a66a !important;
    background: rgba(255, 255, 255, 0.15) !important;
    padding: 4px 12px !important;
    border-radius: 99px !important;
    display: inline-block !important;
    font-weight: 700 !important;
}
.landing-cta {
    background: linear-gradient(115deg, #1f3f68 50%, #36a66a 50.2%) !important;
}
.auth-body {
    background: linear-gradient(115deg, #1f3f68 50%, #36a66a 50.2%) !important;
}

/* ─────────────────────────────────────────────────────────
   CATCH-ALL CHARCOAL DARK MODE OVERRIDES (Solid charcoal black, no other colors)
   ───────────────────────────────────────────────────────── */
/* Neutralize inline specialty-color variable overrides globally in dark mode */
:root[data-theme="dark"] [style*="--specialty-color"] {
    --specialty-color: #cccccc !important;
}

:root[data-theme="dark"] body,
:root[data-theme="dark"] .old-main,
:root[data-theme="dark"] .frontdesk-dashboard-page,
:root[data-theme="dark"] .frontdesk-workpage,
:root[data-theme="dark"] .frontdesk-patients-page,
:root[data-theme="dark"] .appointment-page,
:root[data-theme="dark"] .doctor-surface,
:root[data-theme="dark"] .fd-stat-card,
:root[data-theme="dark"] .front-stat-card,
:root[data-theme="dark"] .appointment-row,
:root[data-theme="dark"] .queue-row,
:root[data-theme="dark"] .service-line,
:root[data-theme="dark"] .frontdesk-mini-stats article,
:root[data-theme="dark"] .appointment-stat,
:root[data-theme="dark"] .followup-stat,
:root[data-theme="dark"] .priority-neutral,
:root[data-theme="dark"] .priority-purple,
:root[data-theme="dark"] .status-pill {
    background: #121212 !important;
    background-color: #121212 !important;
    color: #cccccc !important;
    border-color: #2c2c2c !important;
    box-shadow: none !important;
}

/* Force raised containers, cards, and banners to be panel charcoal-grey (#1a1a1a) */
:root[data-theme="dark"] .appointment-card,
:root[data-theme="dark"] .followup-card,
:root[data-theme="dark"] .frontdesk-stock-card,
:root[data-theme="dark"] .next-patient-banner,
:root[data-theme="dark"] .fd-stat-card[data-tone],
:root[data-theme="dark"] .front-stat-card[data-tone],
:root[data-theme="dark"] .banner-badge {
    background-color: #1a1a1a !important;
    background: #1a1a1a !important;
    color: #cccccc !important;
    border-color: #2c2c2c !important;
}

.frontdesk-form-page .frontdesk-page-head {
    margin-bottom: 14px;
}

.frontdesk-form-page .frontdesk-form-grid {
    grid-template-columns: 1fr;
    gap: 14px;
    margin-bottom: 0;
}

.frontdesk-queue-page .queue-workboard {
    margin-bottom: 0;
}

.frontdesk-workflow-page .workflow-hero {
    position: relative;
    overflow: hidden;
    border: 1px solid var(--old-border) !important;
    border-radius: 8px;
    background:
        linear-gradient(128deg, color-mix(in srgb, var(--brand-navy) 10%, transparent) 0 49.8%, color-mix(in srgb, var(--brand-green) 8%, transparent) 50.2% 100%),
        var(--old-card) !important;
    box-shadow: none;
}

.frontdesk-workflow-page .workflow-hero::after {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 5px;
    background: var(--brand-split);
}

.frontdesk-workflow-page .workflow-hero > * {
    position: relative;
    z-index: 1;
}

.frontdesk-workflow-page .workflow-hero h1 {
    margin: 8px 0 6px;
    font-size: 18px;
    letter-spacing: 0;
}

.frontdesk-workflow-page .workflow-hero p {
    line-height: 1.5;
}

.frontdesk-workflow-page .workflow-hero .pill {
    min-height: 24px;
    border: 1px solid var(--old-border);
    border-radius: 6px !important;
    background: var(--old-bg);
    color: var(--old-text);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0;
}

:root[data-theme="dark"] .frontdesk-workflow-page .workflow-hero {
    background:
        linear-gradient(128deg, rgba(31, 63, 104, 0.22) 0 49.8%, rgba(54, 166, 106, 0.16) 50.2% 100%),
        #181818 !important;
    border-color: #2a2a2a !important;
}

:root[data-theme="dark"] .frontdesk-workflow-page .workflow-hero .pill {
    background: #202020;
    color: #cccccc;
    border-color: #2c2c2c;
}

/* Front desk typography scale */
.frontdesk-dashboard-page .dashboard-heading h1,
.frontdesk-dashboard-page .dashboard-heading h2,
.frontdesk-page-head h2,
.appointment-page.frontdesk-workpage .appointment-header h2,
.frontdesk-workflow-page .workflow-hero h1 {
    font-size: 18px;
    line-height: 1.22;
}

.frontdesk-dashboard-page .dashboard-heading p,
.frontdesk-page-head p,
.appointment-page.frontdesk-workpage .appointment-header p,
.frontdesk-workflow-page .workflow-hero p {
    font-size: 12.5px;
    line-height: 1.4;
}

.frontdesk-dashboard-page .fd-stat-card,
.frontdesk-dashboard-page .front-stat-card {
    min-height: 64px;
    padding: 10px 12px;
}

.frontdesk-dashboard-page .fd-stat-body p,
.frontdesk-dashboard-page .front-stat-card p,
.frontdesk-mini-stats p,
.appointment-page.frontdesk-workpage .appointment-stat p {
    font-size: 10.5px;
}

.frontdesk-dashboard-page .fd-stat-body strong,
.frontdesk-dashboard-page .front-stat-card strong,
.frontdesk-mini-stats strong,
.appointment-page.frontdesk-workpage .appointment-stat strong {
    font-size: 19px;
}

.frontdesk-dashboard-page .fd-stat-body small,
.frontdesk-patient-head p,
.frontdesk-billing-head p,
.frontdesk-activity-card p,
.frontdesk-stock-card p,
.frontdesk-activity-card time,
.appointment-page.frontdesk-workpage .appointment-card p,
.appointment-page.frontdesk-workpage .appointment-meta-grid span {
    font-size: 12px;
}

.frontdesk-patient-head h3,
.frontdesk-billing-head h3,
.frontdesk-activity-card h3,
.frontdesk-stock-card h3,
.appointment-page.frontdesk-workpage .appointment-card h3,
.appointment-page.frontdesk-workpage .appointment-main h3,
.frontdesk-workflow-page .queue-main h3,
.frontdesk-workflow-page .queue-patient-card strong {
    font-size: 14px;
    line-height: 1.28;
}

.frontdesk-workflow-page .queue-patient-card p,
.frontdesk-workflow-page .field-grid label,
.frontdesk-workflow-page .field-grid input,
.frontdesk-workflow-page .field-grid select,
.frontdesk-workflow-page .field-grid textarea,
.frontdesk-searchbar input,
.frontdesk-searchbar select,
.frontdesk-checkin-form input,
.frontdesk-checkin-form select {
    font-size: 12.5px;
}

.frontdesk-money-grid span,
.frontdesk-patient-meta span,
.frontdesk-stock-card span,
.frontdesk-billing-items {
    font-size: 12px;
}

.frontdesk-patient-meta b,
.frontdesk-money-grid b,
.frontdesk-workflow-page .workflow-hero .pill {
    font-size: 10.5px;
}

.frontdesk-stock-card strong {
    font-size: 17px;
}

.frontdesk-workflow-page .panel-header h2,
.frontdesk-workflow-page .queue-workboard .old-card-header h2,
.frontdesk-workflow-page .workflow-table-card .old-card-header h2 {
    font-size: 15px;
    line-height: 1.25;
}

.frontdesk-workflow-page .panel-header {
    margin-bottom: 14px;
    padding-bottom: 12px;
}

.frontdesk-workflow-page .workflow-table-card .old-card-header,
.frontdesk-workflow-page .queue-workboard .old-card-header {
    min-height: 44px;
}

.frontdesk-workflow-page .workflow-table-card .old-card-header a,
.frontdesk-workflow-page .queue-workboard .old-card-header a,
.frontdesk-workflow-page .workflow-actions .button,
.frontdesk-patient-actions .button,
.appointment-page.frontdesk-workpage .button {
    font-size: 12px;
}

.frontdesk-workflow-page .queue-board-grid {
    padding: 14px;
}

/* Dark-mode fields in the DASHBOARD / main app: charcoal (as designed).
   Public pages override this with brand blue below - the charcoal
   boundary rule: grey is dashboard-only, blue is for landing/sign-in. */
:root[data-theme="dark"] input,
:root[data-theme="dark"] select,
:root[data-theme="dark"] textarea {
    background-color: #202020 !important;
    border-color: #3c3c3c !important;
    color: #ffffff !important;
}

/* Public surfaces (landing + sign-in) wear the brand blue in dark mode. */
:root[data-theme="dark"] .lp input,
:root[data-theme="dark"] .lp select,
:root[data-theme="dark"] .lp textarea,
:root[data-theme="dark"] .auth-body input,
:root[data-theme="dark"] .auth-body select,
:root[data-theme="dark"] .auth-body textarea {
    background-color: #152b49 !important;
    border-color: #2b4a77 !important;
    color: #ffffff !important;
}

/* Force active navigation elements to be deep grey (#242424) instead of blue */
:root[data-theme="dark"] .old-nav a.active,
:root[data-theme="dark"] .sidebar-bottom a.active {
    background-color: #242424 !important;
    background: #242424 !important;
    border-color: #3c3c3c !important;
    color: #ffffff !important;
}

/* Ensure no random brand green, purples, or other colors show up on text in dark mode */
:root[data-theme="dark"] .old-main h1,
:root[data-theme="dark"] .old-main h2,
:root[data-theme="dark"] .old-main h3,
:root[data-theme="dark"] .old-main h4,
:root[data-theme="dark"] .old-main h5,
:root[data-theme="dark"] .old-main h6,
:root[data-theme="dark"] .old-main p,
:root[data-theme="dark"] .old-main span,
:root[data-theme="dark"] .old-main strong,
:root[data-theme="dark"] .old-main small,
:root[data-theme="dark"] .old-main a,
:root[data-theme="dark"] .old-main b,
:root[data-theme="dark"] .old-main td,
:root[data-theme="dark"] .old-main th {
    color: #cccccc !important;
}

:root[data-theme="dark"] .old-main h1,
:root[data-theme="dark"] .old-main h2,
:root[data-theme="dark"] .old-main h3,
:root[data-theme="dark"] .old-main strong,
:root[data-theme="dark"] .old-main b {
    color: #f7f6f3 !important;
}

/* Keep dark-mode primary actions inside the brand navy treatment. */
:root[data-theme="dark"] .old-main .button:not(.secondary):not(.ghost),
:root[data-theme="dark"] .button:not(.secondary):not(.ghost),
:root[data-theme="dark"] .banner-button {
    background-color: #162c48 !important;
    background: #162c48 !important;
    border-color: #315a82 !important;
    color: #ffffff !important;
    box-shadow: none !important;
}

:root[data-theme="dark"] .old-main .button:not(.secondary):not(.ghost) .eyeston-icon,
:root[data-theme="dark"] .button:not(.secondary):not(.ghost) .eyeston-icon,
:root[data-theme="dark"] .banner-button .eyeston-icon {
    color: #ffffff !important;
}

:root[data-theme="dark"] .old-main .button:not(.secondary):not(.ghost):hover,
:root[data-theme="dark"] .button:not(.secondary):not(.ghost):hover,
:root[data-theme="dark"] .banner-button:hover {
    background-color: #1f3f68 !important;
    background: #1f3f68 !important;
    border-color: #4f79a5 !important;
    color: #ffffff !important;
}

/* Secondary and ghost buttons in dark mode */
:root[data-theme="dark"] .old-main .button.secondary,
:root[data-theme="dark"] .old-main .button.ghost,
:root[data-theme="dark"] .button.secondary,
:root[data-theme="dark"] .button.ghost {
    background-color: transparent !important;
    background: transparent !important;
    border-color: #3e3e3e !important;
    color: #cccccc !important;
    box-shadow: none !important;
}

:root[data-theme="dark"] .old-main .button.secondary:hover,
:root[data-theme="dark"] .old-main .button.ghost:hover,
:root[data-theme="dark"] .button.secondary:hover,
:root[data-theme="dark"] .button.ghost:hover {
    background-color: #202020 !important;
    border-color: #555555 !important;
    color: #ffffff !important;
}

/* Remove colored status-bar rings and indicator dots in dark mode */
:root[data-theme="dark"] .queue-status-bar,
:root[data-theme="dark"] .queue-dot,
:root[data-theme="dark"] .branch-dot,
:root[data-theme="dark"] .specialty-mark,
:root[data-theme="dark"] .status-bar {
    background-color: #444444 !important;
    border-color: #444444 !important;
}


/* Force dark mode body and html to be premium solid charcoal black (#121212) */
:root[data-theme="dark"] body,
:root[data-theme="dark"] html {
    background: #121212 !important;
    background-color: #121212 !important;
}

/* -------------------------------------------------------------
   LANDING & AUTH THEME STYLING, CONTRASTS, & SHADOW REDUCTION
   ------------------------------------------------------------- */

/* 1. Sleek, minimalist theme toggle override (compact, elegant, emoji-free, quiet, and subtle) */
.floating-theme-toggle {
    position: fixed !important;
    top: 18px !important;
    right: 18px !important;
    z-index: 20 !important;
    min-height: 28px !important;
    height: 28px !important;
    padding: 0 10px !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    border-radius: 0px !important; /* Flat corner to match brand */
    transform: none !important;
    box-shadow: none !important;
    background: #f3f4f8 !important; /* Solid brand background in light mode so it is perfectly visible on blue or white backgrounds */
    color: #1f3f68 !important; /* Brand navy text/icon color */
    border: 1px solid rgba(31, 63, 104, 0.15) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: all 0.2s ease !important;
    cursor: pointer !important;
}

.floating-theme-toggle:hover {
    background: #f0f4f8 !important;
    border-color: #1f3f68 !important;
    color: #1f3f68 !important;
}

/* Blend the topbar-actions theme toggle natively into the clinic portal header actions */
.topbar-actions .theme-toggle {
    border-radius: 999px !important; /* Pill shape to match other chips like user-chip and clock */
    background-color: #f3f4f8 !important; /* Solid brand background in light mode to match adjacent user-chip/clock */
    color: #1f3f68 !important; /* Brand navy text/icon color */
    border: 1px solid rgba(31, 63, 104, 0.15) !important;
    padding: 0 10px !important;
    min-height: 28px !important;
    height: 28px !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: none !important;
    transform: none !important;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
    cursor: pointer !important;
}

.topbar-actions .theme-toggle:hover {
    background-color: #f0f4f8 !important;
    border-color: #1f3f68 !important;
    color: #1f3f68 !important;
}

/* --- Dark Mode Theme Toggle Container Overrides --- */
:root[data-theme="dark"] .floating-theme-toggle {
    background: rgba(255, 255, 255, 0.05) !important;
    color: rgba(255, 255, 255, 0.6) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
}
:root[data-theme="dark"] .floating-theme-toggle:hover {
    background: rgba(255, 255, 255, 0.1) !important;
    color: rgba(255, 255, 255, 0.9) !important;
    border-color: rgba(255, 255, 255, 0.3) !important;
}

:root[data-theme="dark"] .topbar-actions .theme-toggle {
    background-color: rgba(255, 255, 255, 0.04) !important;
    color: var(--old-muted) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
}
:root[data-theme="dark"] .topbar-actions .theme-toggle:hover {
    background-color: rgba(255, 255, 255, 0.08) !important;
    color: #ffffff !important;
    border-color: rgba(255, 255, 255, 0.2) !important;
}

/* Show and style the theme-toggle-icon as a clean CSS crescent moon (Light Mode) */
.theme-toggle .theme-toggle-icon {
    display: inline-block !important;
    width: 12px !important; /* Shrunk for delicate fit */
    height: 12px !important; /* Shrunk for delicate fit */
    border-radius: 50% !important;
    background: transparent !important;
    box-shadow: inset -3px -3px 0px 0px currentColor !important; /* Delicate 3px shadow crescent */
    border: none !important;
    margin-right: 6px !important;
    vertical-align: middle !important;
    position: relative !important;
    top: -1px !important;
}

/* Style the theme-toggle-icon as a clean CSS sun with rays (Dark Mode) */
:root[data-theme="dark"] .theme-toggle .theme-toggle-icon {
    width: 7px !important; /* Shrunk for delicate fit */
    height: 7px !important; /* Shrunk for delicate fit */
    border-radius: 50% !important;
    background: currentColor !important;
    border: none !important;
    box-shadow: 0 -3px 0 -1px currentColor,
                0 3px 0 -1px currentColor,
                -3px 0 0 -1px currentColor,
                3px 0 0 -1px currentColor,
                -2px -2px 0 -1px currentColor,
                2px 2px 0 -1px currentColor,
                -2px 2px 0 -1px currentColor,
                2px -2px 0 -1px currentColor !important;
    margin-right: 8px !important;
    margin-left: 1px !important;
    position: relative !important;
    top: -1px !important;
}

/* Disable the legacy rounded switch circle completely to prevent doubled rendering */
.theme-toggle .theme-toggle-icon::after {
    content: none !important;
    display: none !important;
}

/* 2. Thin diagonal color style treatment underline when nav links are hovered */
.landing-links a:not(.button) {
    position: relative;
    padding-bottom: 4px;
}

.landing-links a:not(.button)::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background: linear-gradient(115deg, #1f3f68 50%, #36a66a 50.2%);
    transform: scaleX(0);
    transform-origin: right;
    transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.landing-links a:not(.button):hover::after {
    transform: scaleX(1);
    transform-origin: left;
}

/* 3. Reduce overall shadow on the homepage */
.landing .card,
.landing .compact,
.landing .specialty-card,
.landing .pricing-card,
.landing .stats-strip,
.landing .button {
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.02) !important;
}

:root[data-theme="dark"] .landing .card,
:root[data-theme="dark"] .landing .compact,
:root[data-theme="dark"] .landing .specialty-card,
:root[data-theme="dark"] .landing .pricing-card,
:root[data-theme="dark"] .landing .stats-strip,
:root[data-theme="dark"] .landing .button {
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15) !important;
}

/* 4. Enforce flat corners across the entire landing page */
.landing *,
.landing .card,
.landing .compact,
.landing .specialty-card,
.landing .pricing-card,
.landing .button,
.landing .pill,
.landing .stats-strip,
.landing article {
    border-radius: 0px !important;
}

/* Custom slanted brand touches on selected focal components */
.landing .specialty-card,
.landing .pricing-card.featured,
.landing .hero-actions .button {
    transform: skewX(-4deg) !important;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

/* Un-skew inner elements of these specific containers to keep text perfectly upright and readable */
.landing .specialty-card > *,
.landing .pricing-card.featured > *,
.landing .hero-actions .button span {
    transform: skewX(4deg) !important;
    display: inline-block;
}

/* Enforce flat/unslanted standard state for all other sections */
.landing .card:not(.specialty-card):not(.featured),
.landing .compact,
.landing .pricing-card:not(.featured),
.landing .stats-strip,
.landing .button:not(.hero-actions .button),
.landing article {
    transform: none !important;
}

/* Override the standard button layout to fit the specific slanted button hover */
.landing .hero-actions .button:hover {
    transform: skewX(-4deg) translateY(-1px) !important;
}

.landing .button:not(.hero-actions .button) {
    border-radius: 0px !important;
    padding: 12px 28px !important;
    font-size: 16px !important;
    font-weight: 750 !important;
    min-height: auto !important;
    height: auto !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* 5. Fix button border contrasts in both Light and Dark modes */

/* --- Light Mode button border contrast fixes --- */
:root[data-theme="light"] .landing .button:not(.secondary):not(.ghost) {
    background-color: #1f3f68 !important;
    color: #ffffff !important;
    border: 2px solid #1f3f68 !important;
}
:root[data-theme="light"] .landing .button:not(.secondary):not(.ghost):hover {
    background-color: #152d4c !important;
    border-color: #152d4c !important;
}
:root[data-theme="light"] .landing .button.secondary {
    background-color: #ffffff !important;
    color: #1f3f68 !important;
    border: 2px solid #1f3f68 !important;
}
:root[data-theme="light"] .landing .button.secondary:hover {
    background-color: #f0f4f8 !important;
    color: #1f3f68 !important;
}
:root[data-theme="light"] .landing .button.ghost {
    background-color: transparent !important;
    color: #1f3f68 !important;
    border: 2px solid #1f3f68 !important;
}
:root[data-theme="light"] .landing .button.ghost:hover {
    background-color: rgba(31, 63, 104, 0.05) !important;
    border-color: #1f3f68 !important;
}
:root[data-theme="light"] .landing .landing-cta .button.secondary {
    background-color: #ffffff !important;
    color: #121212 !important;
    border: 2px solid #ffffff !important;
}
:root[data-theme="light"] .landing .landing-cta .button.secondary:hover {
    background-color: #f7f6f3 !important;
}
:root[data-theme="light"] .landing .landing-cta .button.ghost.light {
    background-color: transparent !important;
    color: #ffffff !important;
    border: 2px solid #ffffff !important;
}
:root[data-theme="light"] .landing .landing-cta .button.ghost.light:hover {
    background-color: rgba(255, 255, 255, 0.1) !important;
}

/* --- Dark Mode button border contrast fixes --- */
:root[data-theme="dark"] .landing .button:not(.secondary):not(.ghost) {
    background-color: #ffffff !important;
    color: #121212 !important;
    border: 2px solid #ffffff !important;
}
:root[data-theme="dark"] .landing .button:not(.secondary):not(.ghost):hover {
    background-color: #e2e8f0 !important;
    border-color: #e2e8f0 !important;
}
:root[data-theme="dark"] .landing .button.secondary {
    background-color: #222222 !important;
    color: #ffffff !important;
    border: 2px solid #888888 !important;
}
:root[data-theme="dark"] .landing .button.secondary:hover {
    background-color: #2c2c2c !important;
    border-color: #cccccc !important;
}
:root[data-theme="dark"] .landing .button.ghost {
    background-color: transparent !important;
    color: #ffffff !important;
    border: 1.5px solid rgba(255, 255, 255, 0.25) !important;
}
:root[data-theme="dark"] .landing .button.ghost:hover {
    background-color: rgba(255, 255, 255, 0.08) !important;
    border-color: rgba(255, 255, 255, 0.85) !important;
}
:root[data-theme="dark"] .landing .landing-cta .button.secondary {
    background-color: #ffffff !important;
    color: #121212 !important;
    border: 2px solid #ffffff !important;
}
:root[data-theme="dark"] .landing .landing-cta .button.secondary:hover {
    background-color: #e2e8f0 !important;
}
:root[data-theme="dark"] .landing .landing-cta .button.ghost.light {
    background-color: transparent !important;
    color: #ffffff !important;
    border: 1.5px solid rgba(255, 255, 255, 0.25) !important;
}
:root[data-theme="dark"] .landing .landing-cta .button.ghost.light:hover {
    background-color: rgba(255, 255, 255, 0.08) !important;
    border-color: rgba(255, 255, 255, 0.85) !important;
}

/* 6. Premium custom brand accents specifically for auth/login views */
.auth-accent-line {
    height: 2px;
    width: 50px;
    margin: 14px 0 24px;
    background: linear-gradient(115deg, #1f3f68 50%, #36a66a 50.2%);
}

/* Tasteful interactive diagonal brand color treatment on primary sign-in button hover in dark mode */
:root[data-theme="dark"] .auth-card .button:hover {
    background: linear-gradient(115deg, #1f3f68 50%, #36a66a 50.2%) !important;
    border-color: transparent !important;
    color: #ffffff !important;
}

/* --- Premium Print Layout & Letterhead Styles --- */
.print-letterhead {
    background: #ffffff;
    padding: 24px;
    border: 1px solid rgba(0, 0, 0, 0.06);
    margin-bottom: 24px;
    position: relative;
}

/* PAID stamp: the SVG has no intrinsic size, so unconstrained it fills the
   page. Render it as an actual rubber stamp - small, top-right, tilted. */
.print-paid-stamp-wrapper {
    position: absolute;
    top: 50%;
    right: 24px;
    width: 120px;
    transform: translateY(-50%) rotate(-12deg);
    opacity: 0.9;
    pointer-events: none;
}
.print-paid-stamp-wrapper svg {
    width: 100%;
    height: auto;
    display: block;
}
.letterhead-brand {
    display: flex;
    align-items: center;
    gap: 24px;
}
.print-logo {
    max-height: 70px;
    max-width: 140px;
    object-fit: contain;
}
.letterhead-info {
    flex: 1;
}
.letterhead-info h1 {
    margin: 0 0 6px 0;
    font-size: 22px;
    font-weight: 700;
    color: #1f3f68;
}
.letterhead-info p {
    margin: 3px 0;
    font-size: 13px;
    color: #4b5563;
    line-height: 1.4;
}
.letterhead-divider {
    height: 3px;
    background: linear-gradient(to right, #1f3f68, #36a66a);
    margin-top: 16px;
    border-radius: 2px;
}

/* THE Eyeston signature: the diagonal navy→green split with a slanted
   edge - born on the sign-in announcement tag, reused for badges and
   accent cues app-wide. */
.eyt-split {
    background: linear-gradient(115deg, #1f3f68 0 52%, #36a66a 52.2% 100%);
}

/* Special Access nav section: admin tools granted to this staff member.
   Looks like every other nav group - the GRANTED split chip alone marks
   it - and it only renders when at least one tool is granted. */
.special-badge {
    display: inline-block;
    margin-left: 7px;
    padding: 1.5px 9px 1.5px 6px;
    font-size: 8.5px;
    font-weight: 800;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    background: linear-gradient(115deg, #1f3f68 0 52%, #36a66a 52.2% 100%);
    clip-path: polygon(0 0, 100% 0, calc(100% - 4px) 100%, 0 100%);
    color: #ffffff;
    vertical-align: middle;
}

/* Collapsed sidebar brand logo. Kept in app.css so the fix is cache-busted with the main stylesheet. */
.sidebar-collapsed-brand-mark {
    display: none;
}

.sidebar-collapsed .old-sidebar .sidebar-brand-mark,
.old-sidebar.collapsed .sidebar-brand-mark {
    display: none !important;
}

.sidebar-collapsed .old-sidebar .sidebar-collapsed-brand-mark,
.old-sidebar.collapsed .sidebar-collapsed-brand-mark {
    display: inline-flex !important;
    width: 46px !important;
    height: 46px !important;
    aspect-ratio: 1 / 1 !important;
    max-width: calc(100% - 4px) !important;
    max-height: 46px !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: visible !important;
}

.sidebar-collapsed .old-sidebar .sidebar-header,
.old-sidebar.collapsed .sidebar-header {
    height: 96px !important;
    min-height: 96px !important;
    justify-content: center !important;
    margin-bottom: 0 !important;
    padding: 18px 0 !important;
    overflow: visible !important;
}

.sidebar-collapsed .old-sidebar .brand-logo-collapsed,
.old-sidebar.collapsed .brand-logo-collapsed {
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
    margin: 0 auto !important;
    object-fit: contain !important;
    object-position: center !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    position: relative !important;
    z-index: 11 !important;
}

.sidebar-collapsed .old-sidebar .brand-logo-collapsed.logo-light-only,
.old-sidebar.collapsed .brand-logo-collapsed.logo-light-only {
    display: block !important;
}

.sidebar-collapsed .old-sidebar .brand-logo-collapsed.logo-dark-only,
.old-sidebar.collapsed .brand-logo-collapsed.logo-dark-only {
    display: none !important;
}

:root[data-theme="dark"] .sidebar-collapsed .old-sidebar .brand-logo-collapsed.logo-light-only,
:root[data-theme="dark"] .old-sidebar.collapsed .brand-logo-collapsed.logo-light-only {
    display: none !important;
}

:root[data-theme="dark"] .sidebar-collapsed .old-sidebar .brand-logo-collapsed.logo-dark-only,
:root[data-theme="dark"] .old-sidebar.collapsed .brand-logo-collapsed.logo-dark-only {
    display: block !important;
}

@media print {
    /* Hide layout chrome and UI elements */
    .sidebar,
    .topbar,
    .form-actions,
    .role-switcher,
    .topbar-actions,
    .sidebar-toggle-btn,
    .chat-widget,
    .floating-chat-trigger,
    .alert,
    .workflow-table-card .old-card-header a,
    .workflow-table-card .old-card-header button,
    .workflow-actions,
    .frontdesk-searchbar {
        display: none !important;
    }
    
    /* Reset main shell layout for printing */
    .app-shell,
    .app-body {
        display: block !important;
        background: #ffffff !important;
        padding: 0 !important;
        margin: 0 !important;
    }
    .main {
        margin: 0 !important;
        padding: 0 !important;
        background: #ffffff !important;
        box-shadow: none !important;
    }
    .workflow-page {
        padding: 0 !important;
        margin: 0 !important;
    }
    .old-card,
    .workflow-table-card {
        border: none !important;
        box-shadow: none !important;
        background: #ffffff !important;
        padding: 0 !important;
        margin: 0 !important;
    }
    .old-card-header {
        border-bottom: 2px solid #333333 !important;
        padding-bottom: 8px !important;
        margin-bottom: 16px !important;
    }
    .table-wrap {
        border: none !important;
        box-shadow: none !important;
        padding: 0 !important;
        margin: 0 !important;
    }
    table {
        width: 100% !important;
        border-collapse: collapse !important;
    }
    th, td {
        border: 1px solid #e5e7eb !important;
        padding: 8px 12px !important;
        font-size: 12px !important;
        color: #000000 !important;
    }
    th {
        background: #f3f4f6 !important;
        font-weight: 600 !important;
    }
    
    /* Print letterhead overrides */
    .print-letterhead {
        border: none !important;
        box-shadow: none !important;
        padding: 0 0 20px 0 !important;
        margin-bottom: 24px !important;
        display: block !important;
    }
    .letterhead-divider {
        height: 2px !important;
        background: #1f3f68 !important;
    }

    /* Invoice print: subnav is screen-only. */
    .billing-subnav {
        display: none !important;
    }
    /* Items table header: printers often strip background colours, which
       would leave white-on-white text - so on paper the header is navy
       TEXT between navy rules. Screen keeps the solid navy band. */
    .invoice-items-table thead th {
        background: #ffffff !important;
        color: #1f3f68 !important;
        border: none !important;
        border-top: 2px solid #1f3f68 !important;
        border-bottom: 2px solid #1f3f68 !important;
    }
    .invoice-items-table td {
        border: none !important;
        border-bottom: 1px solid #d1d5db !important;
        color: #000000 !important;
    }
}

/* Mobile Hamburger Menu Toggle Button (Desktop hidden) */
.mobile-menu-toggle {
    display: none;
}

/* Mobile Sidebar Overlay: hidden by default on desktop, only shown via mobile @media */
.mobile-sidebar-overlay {
    display: none !important;
    position: fixed;
    inset: 0;
    z-index: 1999;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

@media (max-width: 920px) {
    .mobile-menu-toggle {
        display: block !important;
        position: relative !important;
        width: 32px !important;
        height: 32px !important;
        min-height: 0 !important;
        align-self: center !important;
        background: transparent !important;
        border: none !important;
        cursor: pointer !important;
        padding: 0 !important;
        margin-right: 14px !important;
        z-index: 2001 !important;
        color: rgba(255, 255, 255, 0.95) !important;
        flex-shrink: 0 !important;
        box-shadow: none !important;
        border-radius: 0 !important;
    }

    .mobile-menu-toggle:hover {
        transform: none !important;
    }

    :root[data-theme="dark"] .mobile-menu-toggle {
        color: #a7a29a !important;
    }

    .hamburger-line {
        position: absolute !important;
        left: 6px !important;
        right: 6px !important;
        height: 2px !important;
        background-color: currentColor !important;
        border-radius: 2px !important;
        transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
    }

    .hamburger-line:nth-child(1) {
        top: 10px !important;
    }

    .hamburger-line:nth-child(2) {
        top: 15px !important;
    }

    .hamburger-line:nth-child(3) {
        top: 20px !important;
    }

    .mobile-menu-toggle.active .hamburger-line:nth-child(1) {
        transform: translateY(5px) rotate(45deg) !important;
    }

    .mobile-menu-toggle.active .hamburger-line:nth-child(2) {
        opacity: 0 !important;
    }

    .mobile-menu-toggle.active .hamburger-line:nth-child(3) {
        transform: translateY(-5px) rotate(-45deg) !important;
    }

    /* Mobile Sidebar Overlay */
    .mobile-sidebar-overlay {
        position: fixed;
        inset: 0;
        background: rgba(15, 23, 42, 0.5);
        backdrop-filter: blur(4px);
        -webkit-backdrop-filter: blur(4px);
        z-index: 1999;
        display: none !important;
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.25s ease;
        pointer-events: none;
    }

    .mobile-sidebar-overlay.active {
        display: block !important;
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
    }
}

/* --- Social Sharing & Online Booking Modal Center --- */
.eyeston-modal-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(15, 23, 42, 0.6) !important;
    z-index: 9999;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.3s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.3s;
}

.eyeston-modal-backdrop.show {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.eyeston-modal {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -45%) scale(0.96);
    width: min(850px, 94%);
    max-height: 90vh;
    z-index: 10000;
    opacity: 0;
    visibility: hidden;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.3s, visibility 0.3s;
    
    /* Flat design, sharp corners, no glassmorphism, 2px diagonal split brand border */
    border: 2px solid transparent !important;
    background: linear-gradient(#ffffff, #ffffff) padding-box, linear-gradient(115deg, #1f3f68 50%, #36a66a 50.2%) border-box !important;
    border-radius: 4px !important;
    box-shadow: none !important;
}

#eyeston-share-modal {
    width: min(560px, 94%);
}

#eyeston-share-modal .eyeston-modal-header {
    padding: 14px 18px !important;
}

#eyeston-share-modal .eyeston-modal-body {
    padding: 18px;
}

#eyeston-share-modal .share-grid {
    grid-template-columns: minmax(0, 1fr) 184px;
    gap: 14px;
}

#eyeston-share-modal .share-section {
    margin-bottom: 12px;
}

#eyeston-share-modal .share-col-main {
    display: flex;
    flex-direction: column;
}

#eyeston-share-modal .share-social-buttons {
    gap: 8px;
}

#eyeston-share-modal .share-qr-card {
    padding: 14px;
}

#eyeston-share-modal .share-qr-card img {
    width: 120px !important;
    height: 120px !important;
}

#eyeston-share-modal .share-live-card {
    padding: 12px 14px;
}

.eyeston-modal.show {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, -50%) scale(1);
}

.eyeston-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 24px !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
    background: linear-gradient(115deg, #1f3f68 0 48%, #36a66a 48.2% 100%) !important;
    color: #ffffff !important;
}

.eyeston-modal-header h2 {
    color: #ffffff !important;
    font-weight: 700;
}

.eyeston-modal-header small {
    color: rgba(255, 255, 255, 0.85) !important;
}

.eyeston-modal-icon-halo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.15) !important;
    color: #ffffff !important;
    box-shadow: none !important;
    border: 1px solid rgba(255, 255, 255, 0.25) !important;
}

.eyeston-modal-close {
    background: transparent;
    border: none;
    color: rgba(255, 255, 255, 0.8) !important;
    cursor: pointer;
    padding: 6px;
    border-radius: 4px !important;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.2s, color 0.2s;
}

.eyeston-modal-close:hover {
    background-color: rgba(255, 255, 255, 0.15) !important;
    color: #ffffff !important;
}

.eyeston-modal-body {
    padding: 24px;
    overflow-y: auto;
    background: #ffffff !important;
}

.share-grid {
    display: grid;
    grid-template-columns: 1.3fr 0.7fr;
    gap: 24px;
}

@media (max-width: 768px) {
    .share-grid {
        grid-template-columns: 1fr;
    }

    #eyeston-share-modal .share-grid {
        grid-template-columns: 1fr;
    }
}

.share-section {
    margin-bottom: 20px;
}

.share-section:last-child {
    margin-bottom: 0;
}

.share-label {
    display: block;
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #1e293b;
    margin-bottom: 8px;
}

.share-copy-wrapper {
    display: flex;
    gap: 8px;
}

.share-copy-wrapper input,
.share-copy-wrapper textarea {
    flex-grow: 1;
    padding: 10px 12px;
    border-radius: 4px !important;
    border: 1px solid rgba(15, 23, 42, 0.15) !important;
    background: #f8fafc !important;
    color: #1e293b !important;
    font-size: 13px;
    font-family: inherit;
    transition: border-color 0.2s;
    box-shadow: none !important;
}

.share-copy-wrapper.code textarea {
    font-family: monospace;
    font-size: 11px;
    resize: none;
    line-height: 1.4;
    background: #f8fafc !important;
}

.share-copy-wrapper input:focus,
.share-copy-wrapper textarea:focus {
    outline: none;
    border-color: #1f3f68 !important;
    background: #ffffff !important;
}

.share-copy-btn {
    background: #1f3f68 !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 4px !important;
    padding: 0 16px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.2s, transform 0.1s;
    box-shadow: none !important;
}

.share-copy-btn:hover {
    background: #162e4d !important;
}

.share-copy-btn:active {
    transform: scale(0.97);
}

.share-social-buttons {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
}

.share-social-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 14px;
    border-radius: 4px !important;
    font-size: 12.5px;
    font-weight: 600;
    text-decoration: none !important;
    transition: all 0.2s ease-in-out;
    box-shadow: none !important;
    border: 1px solid rgba(15, 23, 42, 0.08) !important;
    background: rgba(15, 23, 42, 0.02) !important;
}

.share-social-btn.whatsapp { color: #25d366 !important; border-color: rgba(37, 211, 102, 0.3) !important; }
.share-social-btn.facebook { color: #1877f2 !important; border-color: rgba(24, 119, 242, 0.3) !important; }
.share-social-btn.twitter { color: #000000 !important; border-color: rgba(0, 0, 0, 0.15) !important; }
.share-social-btn.linkedin { color: #0077b5 !important; border-color: rgba(0, 119, 181, 0.3) !important; }

.share-social-btn:hover {
    transform: translateY(-2px);
}

.share-social-btn.whatsapp:hover {
    background: #25d366 !important;
    border-color: #25d366 !important;
    color: #ffffff !important;
}

.share-social-btn.facebook:hover {
    background: #1877f2 !important;
    border-color: #1877f2 !important;
    color: #ffffff !important;
}

.share-social-btn.twitter:hover {
    background: #000000 !important;
    border-color: #000000 !important;
    color: #ffffff !important;
}

.share-social-btn.linkedin:hover {
    background: #0077b5 !important;
    border-color: #0077b5 !important;
    color: #ffffff !important;
}

/* Sidebar Column */
.share-col-sidebar {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.share-qr-card {
    position: relative;
    border: 2px solid transparent !important;
    background: linear-gradient(#ffffff, #ffffff) padding-box, linear-gradient(115deg, #1f3f68 50%, #36a66a 50.2%) border-box !important;
    border-radius: 4px !important;
    padding: 18px;
    display: flex;
    flex-direction: column;
    align-items: center;
    box-shadow: none !important;
}

.share-mini-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 6px 12px;
    border-radius: 4px !important;
    font-size: 11.5px;
    font-weight: 600;
    color: #ffffff !important;
    background: #36a66a !important;
    text-decoration: none !important;
    transition: background-color 0.2s;
    box-shadow: none !important;
    border: none !important;
}

.share-mini-btn:hover {
    background: #2a8a54 !important;
}

.share-mini-btn.secondary {
    background: #64748b !important;
}

.share-mini-btn.secondary:hover {
    background: #475569 !important;
}

.share-live-card {
    border: 2px solid rgba(15, 23, 42, 0.06) !important;
    background: #ffffff !important;
    border-radius: 4px !important;
    padding: 14px 18px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    text-decoration: none !important;
    transition: all 0.25s ease;
    box-shadow: none !important;
}

.share-live-card:hover {
    border-color: transparent !important;
    background: linear-gradient(#ffffff, #ffffff) padding-box, linear-gradient(115deg, #1f3f68 50%, #36a66a 50.2%) border-box !important;
    transform: translateY(-2px);
}

.share-live-card strong {
    display: block;
    font-size: 13px;
    color: #1f3f68;
    margin-bottom: 2px;
}

.share-live-card p {
    margin: 0;
    font-size: 11px;
    color: #64748b;
}

.share-live-card span {
    font-size: 16px;
    color: #1f3f68;
    transition: transform 0.2s;
}

.share-live-card:hover span {
    transform: translateX(3px);
}

/* Dark Mode Extensions */
:root[data-theme="dark"] .eyeston-modal {
    background: linear-gradient(#1a1a1a, #1a1a1a) padding-box, linear-gradient(115deg, #1f3f68 50%, #36a66a 50.2%) border-box !important;
    border-color: transparent !important;
    box-shadow: none !important;
}

:root[data-theme="dark"] .eyeston-modal-backdrop {
    background: rgba(0, 0, 0, 0.7) !important;
}

:root[data-theme="dark"] .eyeston-modal-body {
    background: #1a1a1a !important;
}

:root[data-theme="dark"] .eyeston-modal-header {
    border-bottom-color: rgba(255, 255, 255, 0.06) !important;
}

:root[data-theme="dark"] .eyeston-modal-close:hover {
    background-color: rgba(255, 255, 255, 0.05) !important;
    color: #ffffff !important;
}

:root[data-theme="dark"] .share-label {
    color: #94a3b8 !important;
}

:root[data-theme="dark"] .share-copy-wrapper input,
:root[data-theme="dark"] .share-copy-wrapper textarea {
    background: #111827 !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
    color: #f3f4f6 !important;
}

:root[data-theme="dark"] .share-copy-wrapper.code textarea {
    background: #0f172a !important;
}

:root[data-theme="dark"] .share-copy-wrapper input:focus,
:root[data-theme="dark"] .share-copy-wrapper textarea:focus {
    border-color: #36a66a !important;
    background: #1f2937 !important;
}

:root[data-theme="dark"] .share-qr-card {
    background: linear-gradient(#1a1a1a, #1a1a1a) padding-box, linear-gradient(115deg, #1f3f68 50%, #36a66a 50.2%) border-box !important;
    border-color: transparent !important;
}

:root[data-theme="dark"] .share-qr-card h3 {
    color: #e2e8f0 !important;
}

:root[data-theme="dark"] .share-live-card {
    background: #1a1a1a !important;
    border-color: rgba(255, 255, 255, 0.06) !important;
}

:root[data-theme="dark"] .share-live-card:hover {
    background: linear-gradient(#1e1e1e, #1e1e1e) padding-box, linear-gradient(115deg, #1f3f68 50%, #36a66a 50.2%) border-box !important;
    border-color: transparent !important;
}

:root[data-theme="dark"] .share-live-card strong {
    color: #ffffff !important;
}

:root[data-theme="dark"] .share-live-card p {
    color: #94a3b8 !important;
}

:root[data-theme="dark"] .share-live-card span {
    color: #ffffff !important;
}

:root[data-theme="dark"] .share-social-btn {
    background: rgba(255, 255, 255, 0.03) !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
    color: #cbd5e1 !important;
}

:root[data-theme="dark"] .share-social-btn.whatsapp { border-color: rgba(37, 211, 102, 0.2) !important; }
:root[data-theme="dark"] .share-social-btn.facebook { border-color: rgba(24, 119, 242, 0.2) !important; }
:root[data-theme="dark"] .share-social-btn.twitter { border-color: rgba(255, 255, 255, 0.15) !important; }
:root[data-theme="dark"] .share-social-btn.linkedin { border-color: rgba(0, 119, 181, 0.2) !important; }

:root[data-theme="dark"] .share-social-btn.whatsapp:hover {
    background: #25d366 !important;
    border-color: #25d366 !important;
    color: #ffffff !important;
}

:root[data-theme="dark"] .share-social-btn.facebook:hover {
    background: #1877f2 !important;
    border-color: #1877f2 !important;
    color: #ffffff !important;
}

:root[data-theme="dark"] .share-social-btn.twitter:hover {
    background: #ffffff !important;
    border-color: #ffffff !important;
    color: #000000 !important;
}

:root[data-theme="dark"] .share-social-btn.linkedin:hover {
    background: #0077b5 !important;
    border-color: #0077b5 !important;
    color: #ffffff !important;
}

/* ─────────────────────────────────────────────────────────
 * CONTEXTUAL SECONDARY BAR (SUBBAR) STYLING
 * ───────────────────────────────────────────────────────── */
.old-subbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    min-height: 48px;
    padding: 0 24px;
    background: #f3f4f6; /* Contrasting light-gray background */
    border-bottom: 1px solid #eaeaea;
    gap: 14px;
    position: relative;
    z-index: 15;
}

.subbar-left {
    display: flex;
    align-items: center;
    gap: 28px;
}

.subbar-right {
    display: flex;
    align-items: center;
    gap: 12px;
}

.subbar-breadcrumb {
    color: #4a5568;
    font-size: 11px;
    display: flex;
    align-items: center;
}

.subbar-switchers {
    display: flex;
    align-items: center;
    gap: 12px;
}

/* Style adjustments for switchers in sub-bar */
.subbar-switcher {
    min-width: auto !important;
}

.subbar-switcher summary {
    min-height: 32px !important;
    padding: 4px 28px 4px 10px !important;
    border-radius: 8px !important;
    background: #ffffff !important;
    border: 1px solid rgba(0, 0, 0, 0.08) !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04) !important;
    color: #1f3f68 !important;
    position: relative;
    display: inline-flex !important;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.subbar-switcher summary:hover {
    background: #fbfbfb !important;
    border-color: rgba(0, 0, 0, 0.15) !important;
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.06) !important;
    transform: translateY(-1px);
}

.subbar-switcher summary span {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    line-height: 1.15;
}

.subbar-switcher summary small,
.subbar-branch-chip small {
    font-size: 8px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    color: #718096 !important;
}

.subbar-switcher summary strong,
.subbar-branch-chip strong {
    font-size: 11.5px !important;
    font-weight: 700 !important;
    color: #1a202c !important;
    margin-top: 1.5px;
}

/* Perfect alignment for switcher chevron icon using currentColor */
.subbar-switcher summary::after {
    content: "" !important;
    position: absolute !important;
    top: 50% !important;
    right: 12px !important;
    width: 5px !important;
    height: 5px !important;
    border-right: 1.5px solid currentColor !important;
    border-bottom: 1.5px solid currentColor !important;
    transform: translateY(-50%) rotate(45deg) !important;
    transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.subbar-switcher[open] summary::after {
    transform: translateY(-25%) rotate(225deg) !important;
}

/* Branch chip in sub-bar */
.subbar-branch-chip {
    min-height: 32px !important;
    padding: 4px 12px !important;
    border-radius: 8px !important;
    background: #ffffff !important;
    border: 1px solid rgba(0, 0, 0, 0.08) !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04) !important;
    display: inline-flex !important;
    align-items: center;
    gap: 8px;
}

.subbar-branch-chip span {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    line-height: 1.15;
}

.subbar-icon {
    width: 13px !important;
    height: 13px !important;
    flex-shrink: 0 !important;
}

/* Switcher Icons color mappings */
.subbar-icon.icon-branch {
    color: #36a66a !important; /* Premium brand green map pin */
}

.subbar-icon.icon-role {
    color: #1f3f68 !important; /* Brand navy for roles */
}

/* Dark theme overrides for sub-bar and switchers */
:root[data-theme="dark"] .old-subbar {
    background: #141414;
    border-color: #2c2c2c;
}

:root[data-theme="dark"] .subbar-breadcrumb {
    color: #a0aec0;
}

:root[data-theme="dark"] .subbar-switcher summary,
:root[data-theme="dark"] .subbar-branch-chip {
    background: #1e1e1e !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2) !important;
    color: #e2e8f0 !important;
}

:root[data-theme="dark"] .subbar-switcher summary:hover {
    background: #252525 !important;
    border-color: rgba(255, 255, 255, 0.15) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3) !important;
}

:root[data-theme="dark"] .subbar-switcher summary strong,
:root[data-theme="dark"] .subbar-branch-chip strong {
    color: #ffffff !important;
}

:root[data-theme="dark"] .subbar-switcher summary small,
:root[data-theme="dark"] .subbar-branch-chip small {
    color: #a0aec0 !important;
}

:root[data-theme="dark"] .subbar-icon.icon-role {
    color: #d2d8de !important; /* Brand light-blue for visibility in dark mode */
}

/* Light theme workflow shell (brand navy style) */
:root:not([data-theme="dark"]) .old-workflow-shell .old-subbar {
    background: #f4f6f8;
    border-bottom: 1px solid #e2e8f0;
}

:root:not([data-theme="dark"]) .old-workflow-shell .subbar-breadcrumb {
    color: #4a5568;
}

:root:not([data-theme="dark"]) .old-workflow-shell .subbar-switcher summary,
:root:not([data-theme="dark"]) .old-workflow-shell .subbar-branch-chip {
    background: #ffffff;
    border-color: #e2e8f0;
    color: #1f3f68;
}

:root:not([data-theme="dark"]) .old-workflow-shell .subbar-switcher summary:hover {
    background: #f7f9fa;
    border-color: #cbd5e0;
}

:root:not([data-theme="dark"]) .old-workflow-shell .subbar-switcher summary strong,
:root:not([data-theme="dark"]) .old-workflow-shell .subbar-branch-chip strong {
    color: #1f3f68;
}

:root:not([data-theme="dark"]) .old-workflow-shell .subbar-switcher summary small,
:root:not([data-theme="dark"]) .old-workflow-shell .subbar-branch-chip small {
    color: #718096;
}

/* Dynamic Stats and Actions in Sub-bar */
.subbar-stats {
    display: flex;
    align-items: center;
    gap: 16px;
    font-size: 11.5px;
    color: #787774;
}

.subbar-stats-item {
    display: flex;
    align-items: center;
    gap: 6px;
}

.subbar-stats-item strong {
    color: #111111;
    font-weight: 700;
}

:root[data-theme="dark"] .subbar-stats-item strong {
    color: #ffffff;
}

.subbar-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Small contextual buttons for subbar */
.subbar-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 28px;
    padding: 0 10px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    border: 1px solid #eaeaea;
    background: #ffffff;
    color: #1f3f68;
    transition: all 0.15s ease;
}

.subbar-btn:hover {
    background: #f7f6f3;
    border-color: #d8d7d2;
}

.subbar-btn-primary {
    background: #1f3f68;
    border-color: #1f3f68;
    color: #ffffff;
}

.subbar-btn-primary:hover {
    background: #152c4a;
    border-color: #152c4a;
}

/* Premium Role/Branch Switcher Dropdown Menu Highlights */
.role-switcher-menu a.active {
    background: rgba(31, 63, 104, 0.08) !important;
    border-color: rgba(31, 63, 104, 0.15) !important;
}

.role-switcher-menu b {
    background: rgba(54, 166, 106, 0.1) !important;
    color: #36a66a !important;
    border-color: rgba(54, 166, 106, 0.2) !important;
}

/* Dark Mode Role/Branch Switcher Dropdown Menu Highlights */
:root[data-theme="dark"] .role-switcher-menu a.active {
    background: rgba(31, 63, 104, 0.25) !important;
    border-color: rgba(31, 63, 104, 0.5) !important;
    color: #ffffff !important;
}

:root[data-theme="dark"] .role-switcher-menu b {
    background: rgba(54, 166, 106, 0.15) !important;
    color: #5dd68a !important; /* Brighter green for better visibility in dark mode */
    border-color: rgba(54, 166, 106, 0.3) !important;
}

/* ─────────────────────────────────────────────────────────
 * PREMIUM WELCOME/GREETING CARD BANNER STYLING
 * ───────────────────────────────────────────────────────── */
.eyeston-welcome-card {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
    border: 1px solid rgba(31, 63, 104, 0.08);
    border-radius: 12px;
    padding: 24px 30px;
    margin-bottom: 24px;
    box-shadow: 0 4px 18px rgba(31, 63, 104, 0.02);
    position: relative;
    overflow: hidden;
    min-height: 145px;
}

.welcome-card-body {
    max-width: 65%;
    z-index: 2;
    position: relative;
}

.welcome-kicker {
    font-size: 9px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #36a66a; /* Brand Green */
    margin-bottom: 4px;
    display: block;
}
/* Signature swatch: a tiny diagonal-split parallelogram leads every kicker. */
.welcome-kicker::before {
    content: '';
    display: inline-block;
    width: 14px;
    height: 8px;
    margin-right: 7px;
    vertical-align: -1px;
    background: linear-gradient(115deg, #1f3f68 0 52%, #36a66a 52.2% 100%);
    clip-path: polygon(3px 0, 100% 0, calc(100% - 3px) 100%, 0 100%);
}

.welcome-card-body h1 {
    font-size: 20px;
    font-weight: 800;
    color: #1f3f68; /* Brand Navy */
    margin: 0 0 6px 0;
    letter-spacing: -0.01em;
}

.welcome-card-body p {
    font-size: 12.5px;
    color: #4a5568;
    margin: 0;
    line-height: 1.5;
}

.welcome-card-illustration {
    position: absolute;
    right: 28px;
    bottom: -1px;
    top: 0;
    width: 210px;
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
    pointer-events: none;
    z-index: 1;
}

.welcome-card-illustration svg {
    height: 125px;
    width: auto;
    display: block;
}

.doctor-surface .eyeston-welcome-card .welcome-card-body {
    max-width: calc(100% - 290px);
}

.doctor-surface .eyeston-welcome-card .welcome-card-illustration {
    top: 50%;
    right: 26px;
    bottom: auto;
    width: 250px;
    align-items: center;
    justify-content: center;
    transform: translateY(-50%);
}

.doctor-surface .eyeston-welcome-card .welcome-card-illustration svg {
    width: 100%;
    height: auto;
    max-height: 138px;
}

/* Dark mode support */
:root[data-theme="dark"] .eyeston-welcome-card {
    background: linear-gradient(135deg, #18181b 0%, #121214 100%);
    border-color: rgba(255, 255, 255, 0.06);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
}

:root[data-theme="dark"] .welcome-card-body h1 {
    color: #ffffff;
}

:root[data-theme="dark"] .welcome-card-body p {
    color: #a0aec0;
}

/* Responsive queries */
@media (max-width: 768px) {
    .eyeston-welcome-card {
        padding: 20px;
        min-height: auto;
    }
    .welcome-card-body {
        max-width: 100%;
    }
    .welcome-card-illustration {
        display: none;
    }
}

@media (max-width: 920px) {
    .doctor-surface .eyeston-welcome-card .welcome-card-body {
        max-width: 100%;
    }

    .doctor-surface .eyeston-welcome-card .welcome-card-illustration {
        display: none;
    }
}
.admin-insight-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
    margin: 0 0 24px;
}

.admin-insight-lead {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 18px;
    padding: 20px;
    position: relative;
    overflow: hidden;
}

.admin-insight-lead::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(115deg, color-mix(in srgb, var(--brand-navy) 8%, transparent) 0 49.8%, color-mix(in srgb, var(--brand-green) 9%, transparent) 50.2% 100%);
    opacity: .8;
}

.admin-insight-lead > * {
    position: relative;
    z-index: 1;
}

.admin-insight-kicker,
.admin-usage-card span {
    margin: 0 0 6px;
    color: var(--old-muted);
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
}

.admin-insight-lead h2,
.admin-usage-card strong {
    margin: 0;
    color: var(--old-text);
    font-size: 26px;
    line-height: 1.1;
}

.admin-insight-lead p:not(.admin-insight-kicker) {
    margin: 8px 0 0;
    color: var(--old-muted);
    max-width: 680px;
}

.admin-usage-card {
    display: grid;
    gap: 12px;
    padding: 18px;
    color: inherit;
    text-decoration: none;
}

.admin-usage-meter {
    height: 7px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--old-muted) 18%, transparent);
    overflow: hidden;
}

.admin-usage-meter i {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: var(--brand-split);
}

.admin-copy-link {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px;
    margin-top: 14px;
    max-width: 720px;
}

.admin-copy-link input {
    min-width: 0;
    border: 1px solid var(--old-border);
    border-radius: 8px;
    background: var(--old-card);
    color: var(--old-text);
    padding: 10px 12px;
    font: inherit;
}

.booking-admin-page {
    display: grid;
    gap: 14px;
}

.booking-share-panel {
    display: grid;
    grid-template-columns: 56px minmax(0, 1fr) auto;
    align-items: center;
    gap: 18px;
    padding: 22px;
    border: 1px solid var(--old-border);
    border-radius: 8px;
    background:
        linear-gradient(115deg, color-mix(in srgb, var(--brand-green) 10%, transparent) 0 38%, transparent 38.2% 100%),
        var(--old-card);
}

.booking-share-icon {
    display: grid;
    place-items: center;
    width: 56px;
    height: 56px;
    border-radius: 8px;
    background: var(--brand-split);
    color: #fff;
}

.booking-share-icon svg {
    width: 28px;
    height: 28px;
}

.booking-share-panel p {
    margin: 0 0 6px;
    color: var(--old-muted);
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
}

.booking-share-panel h1 {
    margin: 0;
    color: var(--old-text);
    font-size: 30px;
    line-height: 1.08;
}

.booking-share-panel span:not(.booking-share-icon) {
    display: block;
    margin-top: 8px;
    color: var(--old-muted);
}

.booking-readiness-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
}

:root[data-theme="dark"] .booking-share-panel {
    border-color: #343434;
    background:
        linear-gradient(115deg, color-mix(in srgb, #d2d8de 14%, transparent) 0 38%, transparent 38.2% 100%),
        #161616;
}

:root[data-theme="dark"] .booking-share-icon {
    border: 1px solid #ffffff;
    background: #ffffff;
    color: #071525;
}

:root[data-theme="dark"] .booking-share-icon svg {
    stroke: currentColor;
    stroke-width: 2.15;
    filter: none;
}

:root[data-theme="dark"] .booking-share-panel p {
    color: #f7f6f3;
}

:root[data-theme="dark"] .booking-share-panel h1 {
    color: #ffffff;
}

:root[data-theme="dark"] .booking-share-panel span:not(.booking-share-icon) {
    color: #d6d3cc;
}

:root[data-theme="dark"] .admin-copy-link input {
    border-color: #4a4a4a;
    background: #202020;
    color: #ffffff;
}

:root[data-theme="dark"] .booking-readiness-grid .admin-usage-card {
    border-color: #343434;
    background: #161616;
}

:root[data-theme="dark"] .booking-readiness-grid .admin-usage-card span {
    color: #d6d3cc;
}

:root[data-theme="dark"] .booking-readiness-grid .admin-usage-card strong {
    color: #ffffff;
}

.branch-limit-card {
    margin-bottom: 24px;
    position: relative;
    overflow: hidden;
}

.branch-limit-card::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(115deg, color-mix(in srgb, var(--brand-navy) 8%, transparent) 0 49.8%, color-mix(in srgb, var(--brand-green) 9%, transparent) 50.2% 100%);
}

.branch-limit-card-inner {
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 16px;
    padding: 20px;
}

.branch-limit-pill {
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    padding: 4px 10px;
    background: var(--brand-split);
    color: #fff;
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
}

.branch-limit-card h3 {
    margin: 10px 0 4px;
    color: var(--old-text);
    font-size: 16px;
}

.branch-limit-card p {
    margin: 0;
    color: var(--old-muted);
    font-size: 13px;
}

.branch-limit-form {
    margin: 0;
}

.admin-workflow-page {
    max-width: 1180px;
}

.admin-module-header {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 18px;
    margin-bottom: 18px;
    padding: 20px;
    border: 1px solid var(--old-border);
    border-left: 4px solid var(--brand-navy);
    border-radius: 6px;
    background: var(--old-card);
    box-shadow: none;
}

.admin-module-kicker {
    display: inline-flex;
    margin-bottom: 8px;
    color: var(--old-muted);
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
}

.admin-module-header h1 {
    margin: 0;
    color: var(--old-text);
    font-size: 28px;
    line-height: 1.1;
}

.admin-module-header p {
    margin: 8px 0 0;
    max-width: 720px;
    color: var(--old-muted);
    line-height: 1.55;
}

.admin-workflow-page .workflow-grid {
    grid-template-columns: minmax(320px, .82fr) minmax(0, 1.18fr);
    gap: 16px;
}

.admin-workflow-page .workflow-table-card {
    border-radius: 8px;
}

.admin-workflow-page .workflow-table-card .old-card-header {
    min-height: 46px;
    padding: 0 16px;
}

.doctor-workflow-page {
    max-width: 1180px;
}

.doctor-module-header {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 16px;
    margin-bottom: 18px;
    padding: 18px;
    border: 1px solid var(--old-border);
    border-left: 4px solid var(--brand-green);
    border-radius: 6px;
    background: var(--old-card);
    box-shadow: none;
}

.doctor-module-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 6px;
    border: 1px solid var(--brand-navy-deep);
    background: var(--brand-navy);
    color: #ffffff;
    box-shadow: none;
}

.doctor-module-mark svg {
    width: 22px;
    height: 22px;
    color: currentColor;
    stroke: currentColor;
    stroke-width: 2;
    filter: none;
}

.doctor-module-kicker {
    display: inline-flex;
    margin-bottom: 7px;
    color: var(--old-muted);
    font-size: 12px;
    font-weight: 850;
    text-transform: uppercase;
}

.doctor-module-header h1 {
    margin: 0;
    color: var(--old-text);
    font-size: 27px;
    line-height: 1.1;
}

.doctor-module-header p {
    margin: 8px 0 0;
    max-width: 720px;
    color: var(--old-muted);
    line-height: 1.55;
}

.doctor-module-actions .button {
    min-height: 38px;
    border-radius: 6px;
}

.doctor-workflow-page .appointment-page,
.doctor-workflow-page .followup-page,
.doctor-workflow-page .queue-workboard,
.doctor-workflow-page .workflow-table-card,
.doctor-workflow-page .patient-history-card {
    border-radius: 8px;
    box-shadow: none;
}

.doctor-workflow-page .appointment-header,
.doctor-workflow-page .followup-header {
    align-items: center;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--old-border);
}

.doctor-workflow-page .appointment-header h2,
.doctor-workflow-page .followup-header h2,
.doctor-workflow-page .queue-workboard .old-card-header h2,
.doctor-workflow-page .workflow-table-card .old-card-header h2 {
    font-size: 16px;
}

.doctor-workflow-page .appointment-stats,
.doctor-workflow-page .followup-stats {
    gap: 10px;
}

.doctor-workflow-page .appointment-stat,
.doctor-workflow-page .followup-stat {
    min-height: 76px;
    border-radius: 8px;
    background: var(--old-card);
    box-shadow: none;
    padding: 14px;
}

.doctor-workflow-page .appointment-controls,
.doctor-workflow-page .followup-controls {
    border-radius: 8px;
    background: var(--old-card-soft);
}

.doctor-workflow-page .queue-board-grid {
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    padding: 16px;
}

.doctor-workflow-page .queue-patient-card {
    border-radius: 8px;
    background: var(--old-card-soft);
    box-shadow: none;
}

.doctor-workflow-page .workflow-table-card + .workflow-table-card {
    margin-top: 16px;
}

.doctor-workflow-page .status-dot {
    display: inline-block;
    width: 6px;
    height: 6px;
    margin-right: 4px;
    border-radius: 999px;
    background: currentColor;
    vertical-align: middle;
}

.admin-area-panel {
    margin-bottom: 16px;
}

.admin-action-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    padding: 0 16px 16px;
}

.admin-area-card {
    display: grid;
    grid-template-columns: 36px minmax(0, 1fr);
    align-items: center;
    gap: 12px;
    min-height: 74px;
    padding: 12px;
    border: 1px solid var(--old-border);
    border-radius: 6px;
    background: var(--old-card-soft);
    color: inherit;
    text-decoration: none;
    transition: border-color .18s ease, background .18s ease;
}

.admin-area-card:hover {
    transform: none;
    border-color: color-mix(in srgb, var(--old-text) 18%, var(--old-border));
    background: var(--old-hover);
}

.admin-dashboard-page .soft-icon {
    border: 1px solid var(--brand-navy-deep);
    border-radius: 6px;
    background: var(--brand-navy);
    color: #ffffff;
    box-shadow: none;
    transition: none;
}

.admin-dashboard-page .soft-icon svg,
.admin-dashboard-page .soft-icon .q-icon {
    stroke: currentColor;
    stroke-width: 2;
    filter: none;
}

:root[data-theme="dark"] .admin-module-header,
:root[data-theme="dark"] .doctor-module-header {
    border-left-color: #1f3f68;
}

/* Dark mode: icon holders carry no box - solid navy tiles read as noisy
   blue squares on dark cards. Tinted glyphs alone mark the meaning. */
:root[data-theme="dark"] .old-main .soft-icon,
:root[data-theme="dark"] .old-main .heading-icon,
:root[data-theme="dark"] .old-main .meta-icon,
:root[data-theme="dark"] .old-main .doctor-module-mark,
:root[data-theme="dark"] .old-main .booking-share-icon,
:root[data-theme="dark"] .old-main .clinical-note-marker {
    border-color: transparent !important;
    background: transparent !important;
    background-color: transparent !important;
    box-shadow: none !important;
    filter: none !important;
}

/* Non-tone icon holders need their own glyph tint once the box is gone;
   .soft-icon keeps its per-tone colors (green money, orange alerts...). */
:root[data-theme="dark"] .old-main .heading-icon,
:root[data-theme="dark"] .old-main .meta-icon,
:root[data-theme="dark"] .old-main .doctor-module-mark,
:root[data-theme="dark"] .old-main .booking-share-icon,
:root[data-theme="dark"] .old-main .clinical-note-marker {
    color: #d2d8de !important;
}

:root[data-theme="dark"] .old-main .doctor-focus-state {
    border-color: transparent !important;
    background: linear-gradient(115deg, var(--brand-navy) 0 49.8%, var(--brand-green-deep) 50.2% 100%) !important;
    background-color: transparent !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    box-shadow: none !important;
    filter: none !important;
}

:root[data-theme="dark"] .doctor-surface .doctor-focus-card .doctor-focus-state,
:root[data-theme="dark"] .doctor-surface .doctor-focus-card .doctor-focus-state.status-in-consultation {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}

:root[data-theme="dark"] .old-main .soft-icon svg,
:root[data-theme="dark"] .old-main .soft-icon .q-icon,
:root[data-theme="dark"] .old-main .heading-icon svg,
:root[data-theme="dark"] .old-main .heading-icon .q-icon,
:root[data-theme="dark"] .old-main .meta-icon svg,
:root[data-theme="dark"] .old-main .meta-icon .q-icon,
:root[data-theme="dark"] .old-main .doctor-module-mark svg,
:root[data-theme="dark"] .old-main .doctor-module-mark .q-icon,
:root[data-theme="dark"] .old-main .booking-share-icon svg,
:root[data-theme="dark"] .old-main .booking-share-icon .q-icon,
:root[data-theme="dark"] .old-main .clinical-note-marker svg,
:root[data-theme="dark"] .old-main .clinical-note-marker .q-icon {
    color: currentColor !important;
    stroke: currentColor !important;
    filter: none !important;
}

.admin-area-card strong,
.admin-area-card small {
    display: block;
}

.admin-area-card strong {
    color: var(--old-text);
    font-size: 14px;
}

.admin-area-card small {
    margin-top: 3px;
    color: var(--old-muted);
    font-size: 12px;
    line-height: 1.35;
}

.admin-command-layout {
    grid-template-columns: minmax(280px, .82fr) minmax(0, 1.18fr);
}

:root[data-theme="dark"] .admin-module-header,
:root[data-theme="dark"] .admin-area-card,
:root[data-theme="dark"] .doctor-module-header,
:root[data-theme="dark"] .doctor-workflow-page .appointment-stat,
:root[data-theme="dark"] .doctor-workflow-page .followup-stat,
:root[data-theme="dark"] .doctor-workflow-page .queue-patient-card {
    box-shadow: none;
}

:root[data-theme="dark"] .doctor-module-mark {
    border-color: transparent;
    background: transparent;
    color: #d2d8de;
    box-shadow: none;
}

:root[data-theme="dark"] .doctor-module-mark svg {
    stroke-width: 2.25;
    filter: none;
}

.doctor-surface .clinical-note-marker {
    border-color: var(--brand-navy-deep) !important;
    background: var(--brand-navy) !important;
    color: #ffffff !important;
}

:root[data-theme="dark"] .old-main .doctor-surface .clinical-note-marker {
    border-color: transparent !important;
    background: transparent !important;
    color: #d2d8de !important;
}

.doctor-surface .clinical-note-marker svg,
.doctor-surface .clinical-note-marker .q-icon,
:root[data-theme="dark"] .old-main .doctor-surface .clinical-note-marker svg,
:root[data-theme="dark"] .old-main .doctor-surface .clinical-note-marker .q-icon {
    color: currentColor !important;
    stroke: currentColor !important;
    filter: none !important;
}

.workflow-page .patient-history-card {
    overflow: visible !important;
}

.workflow-page .patient-history-card .patient-history-panel {
    display: block !important;
    max-height: min(72vh, 760px);
    min-height: 0;
    overflow-y: auto !important;
    overscroll-behavior: contain;
}

.workflow-page .patient-history-card .visit-history-list {
    max-height: none !important;
    overflow: visible !important;
}

@media (max-width: 900px) {
    .admin-insight-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .admin-insight-lead,
    .admin-module-header,
    .doctor-module-header {
        grid-template-columns: 1fr;
    }

    .doctor-module-mark {
        width: 44px;
        height: 44px;
    }

    .admin-action-grid,
    .admin-command-layout,
    .admin-workflow-page .workflow-grid,
    .booking-share-panel,
    .booking-readiness-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 640px) {
    .admin-insight-grid,
    .admin-copy-link,
    .admin-action-grid {
        grid-template-columns: 1fr;
    }
}

/* --- Worklist action alignment: Summary / Start / Continue / status all
   share one vertical rhythm. The form wrapper leaves the layout
   (display:contents) so its button is a direct flex item, and badges
   match the 34px button height instead of sitting 6px shorter. --- */
.appointment-actions {
    margin-left: auto;
    align-items: center;
}
.appointment-actions form {
    display: contents;
}
.appointment-actions .mini-button,
.appointment-actions .eyeston-status-badge {
    display: inline-flex;
    align-items: center;
    min-height: 34px;
    line-height: 1;
    white-space: nowrap;
}

/* --- General Patient Records table: same sleek treatment as the Find
   Patient roster - fixed layout, one line per record, ellipsis on long
   values (hover shows the full text), View History per row. --- */
.sleek-table table{width:100%;table-layout:fixed;border-collapse:collapse;font-size:12px}
.sleek-table th,.sleek-table td{text-align:left;padding:8px 12px;border-bottom:1px solid var(--line);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;vertical-align:middle}
.sleek-table th:first-child,.sleek-table td:first-child{padding-left:18px}
.sleek-table th:last-child,.sleek-table td:last-child{padding-right:18px}
.sleek-table th{font-size:10.5px;text-transform:uppercase;letter-spacing:.03em;color:var(--muted)}
.records-sleek th:nth-child(1),.records-sleek td:nth-child(1){width:14%}
.records-sleek th:nth-child(2),.records-sleek td:nth-child(2){width:9%}
.records-sleek th:nth-child(3),.records-sleek td:nth-child(3){width:17%}
.records-sleek th:nth-child(4),.records-sleek td:nth-child(4){width:20%}
.records-sleek th:nth-child(5),.records-sleek td:nth-child(5){width:8%}
.records-sleek th:nth-child(6),.records-sleek td:nth-child(6){width:8%}
.records-sleek th:nth-child(7),.records-sleek td:nth-child(7){width:24%}
.sleek-table td .button{white-space:nowrap;padding:2px 7px;font-size:10.5px;height:auto;line-height:1.6}
.sleek-table td:last-child{padding-right:18px;white-space:nowrap;overflow:visible;text-overflow:clip}
.sleek-table td:last-child > div{flex-wrap:nowrap !important;gap:6px}
.sleek-table td > div{flex-wrap:nowrap}
.sleek-table .visit-print-actions{margin-top:0 !important;padding-top:0 !important;border-top:0 !important}
@media (max-width:1100px){
    .sleek-table table{table-layout:auto;width:max-content;min-width:100%}
    .sleek-table th,.sleek-table td{overflow:visible;text-overflow:clip}
}

/* --- Patient history header: dark-mode legibility (visit chip, name,
   diagnosis) + the breadcrumb back to the general records ledger. --- */
.ph-breadcrumb{font-size:12px;font-weight:700;color:var(--old-muted,#5d6f84);text-decoration:none;white-space:nowrap}
.ph-breadcrumb:hover{color:var(--brand-navy,#1f3f68)}
:root[data-theme="dark"] .ph-breadcrumb:hover{color:#36a66a}
.visit-count-chip{background:#1f3f68;color:#ffffff;padding:4px 10px;border-radius:0;font-size:12px;font-weight:700;white-space:nowrap}
:root[data-theme="dark"] .visit-count-chip{background:#1f3f68;color:#ffffff;border:1px solid rgba(255,255,255,0.14)}
:root[data-theme="dark"] .ph-name{color:#e9eef5 !important}
:root[data-theme="dark"] .visit-dx{color:#36a66a !important}

/* --- Focus card fixes: the state chip keeps its brand gradient no matter
   which status-* class lands on it (white text stays readable), and the
   light-mode card blends into the page instead of glaring white. --- */
.doctor-focus-state[class*="status-"] {
    background: linear-gradient(115deg, var(--brand-navy) 0 49.8%, var(--brand-green-deep) 50.2% 100%) !important;
    color: #ffffff !important;
}
:root:not([data-theme="dark"]) .doctor-focus-card {
    background: linear-gradient(90deg, #f7f8fb 0 68%, color-mix(in srgb, #1f3f68 6%, #f7f8fb) 68% 100%) !important;
}

/* --- Branch + Role switchers live in the (sticky) topbar now: session
   context sits with the session controls and never scrolls away. --- */
.topbar-switchers {
    flex: 0 0 auto;
    margin-left: auto;
    gap: 8px;
}
.topbar-switchers .subbar-switcher summary,
.topbar-switchers .subbar-branch-chip {
    min-height: 34px;
    padding: 3px 10px;
}
.topbar-switchers .role-switcher-menu {
    right: 0;
    left: auto;
}
@media (max-width: 920px) {
    /* No horizontal scrollbar on a phone, full stop. The page content is
       clipped to the viewport; wide data tables keep their OWN scroll because
       they live inside .table-wrap (overflow-x:auto), so nothing that is meant
       to scroll sideways is lost. This is the safety net over the per-element
       responsive fixes, so no future page can reintroduce a sideways scroll.
       Uses overflow-x:CLIP, not hidden: .old-main is the sticky topbar's parent,
       and overflow:hidden would turn it into a scroll container and break the
       header's position:sticky. clip clips the same way without a scrollport,
       so the mobile header keeps sticking like the desktop one does. */
    .old-main,
    .old-page,
    .workflow-page {
        overflow-x: clip;
        max-width: 100%;
    }

    /* Mobile header, three visible controls under the title row:
       [ Find patient ............ ] full width
       [ Branch ] [ Role ]          side by side
       The title keeps its own row (it has flex:1). Everything uses explicit
       full-width so nothing collapses to zero and the menu button is untouched. */
    /* The wrapped topbar lines were stretching to fill the bar's height, which
       blew the search box up to the full height of its line. Pack the lines to
       the top and pin the search to a normal control height. */
    .old-topbar {
        align-content: flex-start !important;
    }
    /* The three controls share one left margin (14px, same as the page title):
       the search left edge lines up with the Branch pill left edge above/below
       it. Search is a bit narrower than the full row; branch and role split the
       next row into two equal pills. Nothing is shoved to the screen edge. */
    .topbar-patient-search {
        display: flex !important;
        align-items: center;
        align-self: flex-start !important;
        flex: 0 0 auto;
        width: 300px;
        max-width: calc(100% - 14px);
        height: 40px !important;
        max-height: 40px !important;
        margin: 8px 0 0 0 !important;
    }
    .topbar-patient-search input {
        flex: 1 1 auto;
        width: 100%;
        min-width: 0;
    }
    .topbar-switchers {
        display: flex;
        flex: 0 0 100%;
        width: 100%;
        gap: 8px;
        margin-top: 8px;
    }
    .topbar-switchers > * {
        flex: 1 1 0;           /* branch and role are equal halves */
        min-width: 0;
    }
    .topbar-switchers .subbar-switcher summary,
    .topbar-switchers .subbar-branch-chip {
        width: 100%;
        height: 42px;
        justify-content: space-between;
    }
    .topbar-switchers .role-switcher-menu {
        left: 0;
        right: auto;
        max-width: calc(100vw - 40px);
    }
}

/* --- In the topbar, the switcher chips blend into the bar (translucent
   on the navy/dark surface) instead of sitting as solid white boxes. --- */
.topbar-switchers .subbar-switcher summary,
.topbar-switchers .subbar-branch-chip {
    background: rgba(255, 255, 255, 0.10) !important;
    border: 1px solid rgba(255, 255, 255, 0.22) !important;
    box-shadow: none !important;
    color: #ffffff !important;
}
.topbar-switchers .subbar-switcher summary:hover {
    background: rgba(255, 255, 255, 0.18) !important;
}
.topbar-switchers .subbar-switcher summary small,
.topbar-switchers .subbar-branch-chip small {
    color: rgba(255, 255, 255, 0.72) !important;
}
.topbar-switchers .subbar-switcher summary strong,
.topbar-switchers .subbar-branch-chip strong {
    color: #ffffff !important;
}
.topbar-switchers .subbar-icon,
.topbar-switchers .subbar-switcher summary::after {
    color: rgba(255, 255, 255, 0.85) !important;
    border-color: rgba(255, 255, 255, 0.85) !important;
}

/* --- Find-patient field blends into the topbar exactly like the
   switcher chips: translucent white on the navy/dark surface. --- */
.topbar-patient-search {
    background: rgba(255, 255, 255, 0.10) !important;
    border: 1px solid rgba(255, 255, 255, 0.22) !important;
}
.topbar-patient-search:hover {
    background: rgba(255, 255, 255, 0.15) !important;
}
.topbar-patient-search input {
    color: #ffffff !important;
    caret-color: #ffffff;
}
.topbar-patient-search input::placeholder {
    color: rgba(255, 255, 255, 0.72) !important;
}
.topbar-patient-search .tps-icon {
    color: rgba(255, 255, 255, 0.85) !important;
}
.topbar-patient-search .tps-kbd {
    color: rgba(255, 255, 255, 0.72) !important;
    border-color: rgba(255, 255, 255, 0.28) !important;
}
.topbar-patient-search:focus-within {
    background: rgba(255, 255, 255, 0.16) !important;
    border-color: var(--eyeston-green, #36a66a) !important;
}

/* --- Waiting Room: plain flat cards, same as every other card - one
   quiet border, no colored edges (the status badge already says it). --- */
.queue-patient-card {
    border-radius: 0 !important;
    background: var(--old-card) !important;
    border: 1px solid var(--old-border) !important;
}
:root[data-theme="dark"] .queue-patient-card {
    background: #181818 !important;
    border-color: #2a2a2a !important;
}
.queue-patient-head strong { color: var(--old-text); font-size: 14px; }
.queue-patient-head small, .queue-meta { color: var(--old-muted); }
.queue-patient-card > p { color: var(--old-text); font-weight: 600; margin: 6px 0; }

/* --- Waiting Room, quieter still: no NORMAL pill (only High/Emergency
   earn a flag), status as plain small text (no icon, no box). --- */
.queue-patient-card .priority-pill.priority-green { display: none; }
.queue-patient-card .eyeston-status-badge svg { display: none; }
.queue-patient-card .eyeston-status-badge {
    border: 0;
    background: transparent;
    padding: 0;
    min-height: 0;
    font-size: 10.5px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* Dark Waiting Room: one muted voice for status text and meta - no
   bright accents competing on dark panels. */
:root[data-theme="dark"] .queue-patient-card .eyeston-status-badge,
:root[data-theme="dark"] .queue-patient-card .queue-meta,
:root[data-theme="dark"] .queue-patient-card .queue-meta * {
    color: var(--old-muted, #a7a29a) !important;
}

/* --- Waiting Room card anatomy: who (top-left), how long (top-right),
   what (middle), state + actions on one footer row. --- */
.queue-patient-card { display: flex; flex-direction: column; gap: 8px; }
.queue-patient-head { align-items: flex-start; justify-content: space-between; }
.queue-head-right { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }
.queue-wait { color: var(--old-muted); font-size: 11.5px; font-weight: 700; white-space: nowrap; }
.queue-card-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 2px;
    padding-top: 10px;
    border-top: 1px solid var(--old-border);
}
.queue-card-foot .queue-meta { gap: 6px; font-size: 12px; }
.queue-card-actions { display: flex; align-items: center; gap: 8px; margin-left: auto; flex-wrap: nowrap; }
.queue-card-actions .queue-action-form { display: contents; }

/* Waiting Room actions: one button size, one baseline - no mixed
   mini/full buttons jostling in the footer row. */
.queue-card-actions .button,
.queue-card-actions .mini-button {
    min-height: 34px;
    height: 34px;
    padding: 0 14px;
    font-size: 12.5px;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
}

/* --- Appointments worklist: same anatomy as the Waiting Room - who and
   when up top, what in the middle, one footer line with the actions
   together on the right, uniform 34px buttons, flat card. --- */
.appointment-card { border-radius: 0 !important; }
.appointment-card-service { margin: 6px 0 0; font-weight: 600; color: var(--old-text); }
.appointment-card-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid var(--old-border);
}
.appointment-card-meta { color: var(--old-muted); font-size: 12px; font-weight: 700; }
.appointment-card-actions { display: flex; align-items: center; gap: 8px; margin-left: auto; flex-wrap: nowrap; }
.appointment-card-actions form { display: contents; }
.appointment-card-actions .button {
    min-height: 34px;
    height: 34px;
    padding: 0 14px;
    font-size: 12.5px;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
}

/* --- Records ledger filter: same instant type-to-filter as Find Patient. --- */
.records-filter {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 10px;
}
.records-filter input {
    flex: 1;
    min-width: 220px;
    height: 38px;
    padding: 0 12px;
    border: 1px solid var(--old-border);
    background: var(--old-card);
    color: var(--old-text);
    font-size: 13px;
}
.records-filter-count {
    flex: 0 0 auto;
    font-size: 12px;
    font-weight: 700;
    color: var(--old-muted);
    white-space: nowrap;
}

/* Records filter aligns with the table edges (18px like the columns). */
.records-filter { padding: 0 18px; }

/* Pagination nav - global (was page-scoped on the patients roster). */
.patient-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    margin-top: 18px;
    flex-wrap: wrap;
}
.patient-pagination-status {
    font-size: 12.5px;
    font-weight: 700;
    color: var(--old-muted, #5d6f84);
    white-space: nowrap;
}

/* --- Appointments page, cleaned: plain flat cards (no colored 5px edge,
   no shadow, no hover float), text-only status, muted in dark - the same
   calm the Waiting Room got. --- */
.appointment-card {
    border: 1px solid var(--old-border) !important;
    border-left-width: 1px !important;
    border-radius: 0 !important;
    background: var(--old-card) !important;
    box-shadow: none !important;
    transition: none !important;
}
.appointment-card:hover {
    transform: none !important;
    box-shadow: none !important;
}
:root[data-theme="dark"] .appointment-card {
    background: #181818 !important;
    border-color: #2a2a2a !important;
}
.appointment-card .eyeston-status-badge svg { display: none; }
.appointment-card .eyeston-status-badge {
    font-size: 10.5px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
:root[data-theme="dark"] .appointment-card .eyeston-status-badge {
    color: var(--old-muted, #a7a29a) !important;
}
.appointment-card-time strong { color: var(--old-text); }

/* --- Follow-ups page: the same calm treatment - flat solid cards, no
   colored 5px edge, actions right on one hairline footer, uniform
   34px buttons. The Overdue/Due pill keeps its color: it IS the page. --- */
.followup-card {
    border: 1px solid var(--old-border) !important;
    border-left-width: 1px !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    background: var(--old-card) !important;
}
:root[data-theme="dark"] .followup-card {
    background: #181818 !important;
    border-color: #2a2a2a !important;
}
.followup-stat {
    border-radius: 0 !important;
    box-shadow: none !important;
}
.followup-actions {
    justify-content: flex-end;
    gap: 8px;
    flex-wrap: nowrap;
    margin-top: 2px;
    padding-top: 10px;
    border-top: 1px solid var(--old-border);
}
.followup-actions .button {
    min-height: 34px;
    height: 34px;
    padding: 0 14px;
    font-size: 12.5px;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
}

/* --- Follow-up facts: one quiet band, not four boxes. A 4% navy tint
   anchors it in light mode; hairlines separate the pairs. --- */
.followup-meta-grid {
    gap: 0;
    border: 1px solid var(--old-border);
    background: color-mix(in srgb, #1f3f68 4%, var(--old-card));
    padding: 10px 0;
}
.followup-meta-grid span {
    background: transparent;
    border-radius: 0;
    padding: 0 14px;
    border-left: 1px solid var(--old-border);
}
.followup-meta-grid span:first-child {
    border-left: 0;
}
:root[data-theme="dark"] .followup-meta-grid {
    background: rgba(255, 255, 255, 0.03);
    border-color: #2a2a2a;
}
:root[data-theme="dark"] .followup-meta-grid span {
    border-left-color: #2a2a2a;
}

/* --- Today's Visits actions: two fixed slots per row (Summary | action
   or status), so buttons form clean vertical columns instead of
   scattering. Statuses sit centered in the same slot the buttons use. --- */
.appointment-row .appointment-actions {
    display: grid;
    grid-template-columns: auto minmax(128px, auto);
    gap: 8px;
    align-items: center;
    margin-left: auto;
}
.appointment-row .appointment-actions form { display: contents; }
.appointment-row .appointment-actions .mini-button {
    justify-content: center;
    width: 100%;
    min-height: 34px;
    height: 34px;
    white-space: nowrap;
}
.appointment-row .appointment-actions .eyeston-status-badge {
    justify-content: center;
    min-height: 34px;
    white-space: nowrap;
    font-size: 10.5px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.appointment-row .appointment-actions .eyeston-status-badge svg { display: none; }

/* --- Today's Visits: subtle actions - no solid navy blocks. Quiet
   outline buttons that fill on hover; the row stays calm. --- */
.appointment-row .appointment-actions .mini-button,
.appointment-row .appointment-actions .mini-button.neutral,
.appointment-row .appointment-actions .mini-button.yellow {
    background: transparent !important;
    border: 1px solid var(--old-border) !important;
    color: var(--old-text) !important;
    box-shadow: none !important;
    font-weight: 700;
}
.appointment-row .appointment-actions .mini-button:hover {
    border-color: #1f3f68 !important;
    color: #1f3f68 !important;
    background: rgba(31, 63, 104, 0.08) !important;
}
:root[data-theme="dark"] .appointment-row .appointment-actions .mini-button {
    border-color: #2c2c2c !important;
    color: #cccccc !important;
}
:root[data-theme="dark"] .appointment-row .appointment-actions .mini-button:hover {
    border-color: #36a66a !important;
    color: #36a66a !important;
    background: transparent !important;
}

/* Light-mode hover: outrank the legacy solid-fill rule (its :root:not()
   chain beats plain class selectors) - hover stays a soft navy tint
   with readable navy text, never a filled block. */
:root:not([data-theme="dark"]) .appointment-row .appointment-actions .mini-button:hover,
:root:not([data-theme="dark"]) .appointment-row .appointment-actions .mini-button.neutral:hover,
:root:not([data-theme="dark"]) .appointment-row .appointment-actions .mini-button.yellow:hover {
    background: #1f3f68 !important;
    border-color: #1f3f68 !important;
    color: #ffffff !important;
}

/* Dark mode: icons inside navy-filled buttons go white, matching the
   light-mode rule - green glyphs on the #1f3f68 fill (Register Patient
   on the front desk) had no contrast. */
:root[data-theme="dark"] .old-main .button:not(.secondary):not(.ghost) .eyeston-icon,
:root[data-theme="dark"] .button:not(.secondary):not(.ghost) .eyeston-icon,
:root[data-theme="dark"] .old-main .button:not(.secondary):not(.ghost) .q-icon,
:root[data-theme="dark"] .button:not(.secondary):not(.ghost) .q-icon {
    color: #ffffff !important;
}

/* Billing sub-nav - one consistent tab bar connecting every billing screen */
.billing-subnav {
    display: flex;
    flex-wrap: wrap;
    gap: 2px;
    margin-bottom: 22px;
    border-bottom: 1px solid var(--old-border);
}
.billing-subnav-tab {
    padding: 9px 15px;
    font-size: 13px;
    font-weight: 700;
    color: var(--old-muted);
    text-decoration: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    white-space: nowrap;
    transition: color 120ms ease, border-color 120ms ease;
}
.billing-subnav-tab:hover {
    color: var(--old-text);
    border-bottom-color: var(--old-border);
}
.billing-subnav-tab.is-active {
    color: #1f3f68;
    border-bottom-color: #1f3f68;
}
:root[data-theme="dark"] .billing-subnav-tab.is-active {
    color: #7ee2a2;
    border-bottom-color: #36a66a;
}

/* form-guard.js: note shown when an option is disabled by a field guard */
.form-guard-note {
    display: none;
    font-size: 11.5px;
    font-weight: 600;
    color: #d97706;
    margin-top: 5px;
}
:root[data-theme="dark"] .form-guard-note { color: #f0b168; }

/* ── Scrollbars: ghost pill, honest length ──────────────────────────
   Invisible until the pointer lands on the rail; then a rounded grey
   pill whose LENGTH follows the content (long page = short pill) and
   which physically touches the rail ends - so "am I at the bottom?"
   always has an answer. Darker while dragging. Standard props fenced
   to Firefox - Chromium disables ::-webkit painting if it sees them. */
@supports not selector(::-webkit-scrollbar) {
    * {
        scrollbar-width: thin;
        scrollbar-color: rgba(121, 121, 121, 0.4) transparent;
    }
}
::-webkit-scrollbar {
    width: 13px;
    height: 13px;
}
::-webkit-scrollbar-track {
    background: transparent;
}
::-webkit-scrollbar-corner {
    background: transparent;
}
::-webkit-scrollbar-thumb {
    background: transparent;
    border-radius: 999px;
    border: 2px solid transparent;
    background-clip: padding-box;
    min-height: 24px;
    min-width: 24px;
}
::-webkit-scrollbar-thumb:hover {
    background: rgba(121, 121, 121, 0.6);
    border: 2px solid transparent;
    background-clip: padding-box;
    border-radius: 999px;
}
::-webkit-scrollbar-thumb:active {
    background: rgba(121, 121, 121, 0.95);
    border: 2px solid transparent;
    background-clip: padding-box;
    border-radius: 999px;
}

/* ── COMPACT UNIFORMITY (owner directive 2026-07-19) ─────────────────
   One density scale across the app, matched to the compact table
   standard: slim hero cards, small uppercase section headers, tight
   labels, 36px inputs, 32px action buttons. Applied late so it wins. */

/* Hero / welcome cards: slimmer, flat. */
.eyeston-welcome-card {
    padding: 14px 18px;
    margin-bottom: 16px;
    border-radius: 0;
}
.welcome-card-body h1 {
    font-size: 16px;
    margin: 0 0 3px 0;
}
.welcome-card-body p {
    font-size: 12px;
    max-width: 860px;
}

/* Section headers inside clinical/admin forms ("Patient & Diagnosis"):
   same typographic register as table headers. */
.clinical-section-summary h3,
.form-preview details summary h3 {
    font-size: 13px;
    font-weight: 800;
    margin: 0;
}
/* Clinical form: the panel already provides the outer padding, and the grid
   gap spaces the section cards, so the form itself is flush and tight. */
.clinical-form {
    gap: 10px;
    padding: 0;
}
.clinical-section + .clinical-section {
    padding-top: 0;
    border-top: 0;
}

/* Field labels and controls: tight but readable. */
.field-grid label,
.form-preview label {
    font-size: 11.5px;
    gap: 4px;
}
.form-preview input,
.form-preview select,
.form-preview textarea,
.field-grid input,
.field-grid select,
.field-grid textarea {
    min-height: 36px;
    font-size: 13px;
    padding: 6px 10px;
}
.field-grid textarea,
.form-preview textarea {
    min-height: 68px;
}

/* Action rows: workflow links (Clinical Note, Patient Records) and form
   actions (Clear Form, Save) on the same 32px line. */
.workflow-actions .button,
.form-actions .button,
.form-actions button {
    min-height: 32px;
    font-size: 12.5px;
    padding: 0 14px;
}
.form-actions {
    gap: 10px;
    padding-top: 12px;
}


/* ── The brand face on brand moments ────────────────────────────────
   Futura (via --font-brand) on the surfaces where Eyeston speaks:
   sign-in, hero titles, modal titles, print letterhead. The working
   UI below heading level stays on the system stack for legibility. */
/* THE RULE (size-based): Futura is a display face - it speaks only at
   display sizes: page/hero titles, sign-in, modal titles, letterhead.
   Small headers (card titles, form sections) stay on the system stack,
   which is engineered for small text - geometric faces turn ragged and
   irritating below ~15px. Weight pinned to 600 so the owner's
   split-family Futura Demi renders native, never faux-bolded. */
.old-page h1,
.workflow-page h1,
.welcome-card-body h1,
.auth-card h1,
.brand strong,
.eyeston-modal-header h2,
.letterhead-info h1,
.print-title {
    font-family: var(--font-brand);
    letter-spacing: 0.01em;
    font-weight: 600;
}

/* Doctor module header joins the compact standard: it was an old-scale
   island - 27px title, 48px icon tile, 38px rounded buttons - floating
   above compact content. Same density as the welcome cards now, flat. */
.doctor-module-header {
    gap: 12px;
    margin-bottom: 14px;
    padding: 12px 16px;
    border-radius: 0;
}
.doctor-module-header h1 {
    font-size: 16px;
}
.doctor-module-header p {
    margin: 3px 0 0;
    font-size: 12px;
}
.doctor-module-kicker {
    margin-bottom: 3px;
    font-size: 9px;
    letter-spacing: 0.08em;
}
.doctor-module-mark {
    width: 34px;
    height: 34px;
    border-radius: 0;
}
.doctor-module-mark svg {
    width: 16px;
    height: 16px;
}
.doctor-module-actions .button {
    min-height: 30px;
    border-radius: 0;
    font-size: 12.5px;
    padding: 0 13px;
}

/* Follow-ups & Appointments worklists join the compact standard (they
   share selectors): slim headers, dense stat tiles without hover lift,
   tight cards, 28px action buttons. Flat per the law. */
.followup-header h2,
.appointment-header h2 {
    font-size: 16px;
}
.followup-header p,
.appointment-header p {
    font-size: 12px;
}
.followup-stats,
.appointment-stats {
    gap: 10px;
}
.followup-stat,
.appointment-stat {
    padding: 9px 13px;
    border-radius: 0;
    box-shadow: none;
    transition: none;
}
.followup-stat:hover,
.appointment-stat:hover {
    transform: none;
    box-shadow: none;
}
.followup-stat p,
.appointment-stat p {
    font-size: 10px;
    margin: 0 0 2px;
}
.followup-stat strong,
.appointment-stat strong {
    font-size: 19px;
}
.followup-list {
    gap: 8px;
}
.followup-card {
    padding: 10px 14px;
    gap: 8px;
}
.followup-card h3 {
    font-size: 13px;
    margin: 0;
}
.followup-diagnosis {
    font-size: 12px;
}
.followup-meta-grid {
    gap: 8px;
}
.followup-meta-grid span {
    border-radius: 0;
    padding: 5px 8px;
    font-size: 11.5px;
}
.followup-actions .button {
    min-height: 28px;
    font-size: 12px;
    padding: 0 11px;
    border-radius: 0;
}
.appointment-card {
    padding: 10px 14px;
    gap: 14px;
    border-radius: 0;
    box-shadow: none;
    transition: none;
}

/* Card lists & boards join the compact standard (model: Follow-ups).
   Queue cards, Optical Orders board, Dispensary board - tight padding,
   12px text, 28px actions, no rounding. Applied last, wins. */
.queue-patient-card {
    gap: 8px;
    padding: 10px 14px;
}
.queue-card-actions .button,
.queue-card-actions .mini-button {
    min-height: 28px;
    height: 28px;
    padding: 0 11px;
    font-size: 12px;
    border-radius: 0;
}
.queue-card-foot .queue-meta {
    font-size: 11.5px;
}
.oo-table,
.dsp-table {
    font-size: 12px;
}
.oo-table th,
.dsp-table th {
    padding: 6px 10px;
    font-size: 10.5px;
}
.oo-table td,
.dsp-table td {
    padding: 6px 10px;
    vertical-align: middle;
}
.oo-table small,
.dsp-table small {
    font-size: 11px;
}
.oo-chip,
.dsp-chip {
    font-size: 10.5px;
    padding: 3px 8px;
}
.oo-actions .mini-button,
.dsp-actions .mini-button {
    min-height: 26px;
    padding: 0 10px;
    font-size: 11.5px;
    border-radius: 0;
}

/* Clinics Control joins the compact standard: slim overview cards (no
   shadow, flat), dense roster with no forced 860px minimum - the table
   fits the viewport instead of scrolling sideways. */
.platform-clinics-overview article {
    min-height: 0;
    gap: 3px;
    padding: 9px 12px;
    border-radius: 0;
    box-shadow: none;
}
.platform-clinics-overview strong {
    font-size: 19px;
}
.superadmin-table {
    min-width: 0;
}
.superadmin-table th,
.superadmin-table td {
    padding: 6px 10px;
}
.superadmin-table td {
    font-size: 12px;
}
.superadmin-table td span {
    font-size: 11px;
}
.usage-cell {
    min-width: 56px;
    gap: 3px;
}
.usage-cell > span {
    font-size: 11px;
}
.usage-track {
    height: 4px;
}
.superadmin-badge,
.status-pill {
    min-height: 20px;
    padding: 0 7px;
    font-size: 10px !important;
}

/* ── Screen explainer: the "How this works" strip (screen_help helper) ──
   Flat, sharp, theme-aware, signature split rail on the left. Collapses
   to a slim bar; remembers state per screen. */
.screen-help {
    position: relative;
    border: 1px solid var(--old-border);
    background: var(--old-card);
    margin-bottom: 16px;
    padding-left: 3px;
    background-image: linear-gradient(160deg, #1f3f68 0 50%, #36a66a 50.2% 100%);
    background-size: 3px 100%;
    background-repeat: no-repeat;
    background-position: left top;
}
.screen-help > summary {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 11px 16px 11px 16px;
    cursor: pointer;
    list-style: none;
    font-weight: 700;
    font-size: 13px;
    color: var(--old-text);
    user-select: none;
}
.screen-help > summary::-webkit-details-marker { display: none; }
.screen-help-ico {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--brand-navy, #1f3f68);
    flex-shrink: 0;
}
:root[data-theme="dark"] .screen-help-ico { color: #5dd68a; }
.screen-help-title { flex: 1; }
.screen-help-cue {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    color: var(--old-muted);
}
.screen-help[open] .screen-help-cue-closed { display: none; }
.screen-help:not([open]) .screen-help-cue-open { display: none; }
.screen-help-body {
    padding: 0 16px 15px 16px;
    font-size: 13px;
    line-height: 1.6;
    color: var(--old-text);
}
.screen-help-body p { margin: 0 0 8px; max-width: 80ch; }
.screen-help-body ul {
    margin: 8px 0 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 6px;
    max-width: 82ch;
}
.screen-help-body li {
    position: relative;
    padding-left: 16px;
    color: var(--old-muted);
}
.screen-help-body li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 7px;
    width: 8px;
    height: 8px;
    background: linear-gradient(115deg, #1f3f68 0 50%, #36a66a 50.2% 100%);
    clip-path: polygon(2px 0, 100% 0, calc(100% - 2px) 100%, 0 100%);
}
.screen-help-body li strong { color: var(--old-text); font-weight: 700; }

/* ===========================================================================
   Online booking form page, rebuilt 2026-07-25.
   Owner's brief: the old form was packed tight and every line of text carried
   roughly the same weight, so nothing led the eye. One voice per level here:
   page title, step title, field label, field, help text. Flat and sharp
   throughout, exact brand navy and green, and blue in dark mode because the
   charcoal boundary makes grey dashboard-only.
   =========================================================================== */

.bk-shell {
    width: min(1180px, 100%);
    margin: 0 auto;
    display: grid;
    grid-template-columns: minmax(0, 320px) minmax(0, 1fr);
    align-items: start;
    gap: 24px;
    padding-bottom: 42px;
}

/* ---------- Left rail ---------- */

.bk-rail {
    position: sticky;
    top: 24px;
    padding: 28px 24px;
    background: #1f3f68;
    border: 1px solid #2b4a77;
    color: #ffffff;
}

.bk-rail-kicker {
    margin: 0 0 10px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--brand-green, #36a66a);
}

.bk-rail-title {
    margin: 0 0 12px;
    font-size: 34px;
    line-height: 1.1;
    font-weight: 700;
    color: #ffffff;
}

.bk-rail-lead {
    margin: 0 0 24px;
    font-size: 13.5px;
    line-height: 1.65;
    color: rgba(255, 255, 255, 0.72);
}

.bk-facts {
    display: grid;
    gap: 1px;
    margin: 0 0 24px;
    background: #2b4a77;
    border: 1px solid #2b4a77;
}

.bk-facts div {
    display: grid;
    gap: 3px;
    padding: 11px 13px;
    background: #152b49;
}

.bk-facts dt {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.55);
}

.bk-facts dd {
    margin: 0;
    font-size: 13px;
    font-weight: 600;
    color: #ffffff;
    overflow-wrap: anywhere;
}

.bk-facts dd a {
    color: #ffffff;
    text-decoration: none;
}

.bk-facts dd a:hover {
    color: var(--brand-green, #36a66a);
}

.bk-share {
    padding-top: 20px;
    border-top: 1px solid #2b4a77;
}

.bk-share-label {
    display: block;
    margin-bottom: 9px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.55);
}

.bk-share-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 6px;
}

.bk-share-row input {
    min-height: 34px;
    padding: 6px 10px;
    border: 1px solid #2b4a77 !important;
    border-radius: 0 !important;
    background: #152b49 !important;
    color: rgba(255, 255, 255, 0.9) !important;
    font-size: 12px;
    box-shadow: none !important;
}

.bk-share-copy {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 6px 11px;
    border: 1px solid #2b4a77;
    border-radius: 0;
    background: #152b49;
    color: #ffffff;
    font-size: 11.5px;
    font-weight: 600;
    cursor: pointer;
}

.bk-share-copy:hover {
    border-color: var(--brand-green, #36a66a);
}

.bk-share-links {
    display: flex;
    gap: 16px;
    margin-top: 12px;
}

.bk-share-links a {
    font-size: 12px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.72);
    text-decoration: none;
}

.bk-share-links a:hover {
    color: var(--brand-green, #36a66a);
}

/* ---------- Right panel ---------- */

.bk-panel {
    padding: 34px 36px 36px;
    background: #ffffff;
    border: 1px solid rgba(31, 63, 104, 0.14);
}

.bk-head,
.bk-done {
    max-width: 640px;
}

.bk-eyebrow {
    margin: 0 0 8px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--brand-green, #36a66a);
}

/* The one display-size line on the page. */
.bk-title {
    margin: 0 0 8px;
    font-size: 27px;
    line-height: 1.18;
    font-weight: 700;
    color: #1f3f68;
}

.bk-lead {
    margin: 0;
    font-size: 13.5px;
    line-height: 1.6;
    color: #5d6f84;
}

.bk-alert {
    margin: 20px 0 0;
    padding: 10px 14px;
    border: 1px solid #d32f2f;
    border-left-width: 3px;
    background: rgba(211, 47, 47, 0.05);
    color: #b3261e;
    font-size: 13px;
    font-weight: 600;
}

/* ---------- Steps ---------- */

.bk-form {
    margin-top: 30px;
}

.bk-step {
    padding-top: 24px;
    margin-top: 24px;
    border-top: 1px solid #e4e9f0;
}

.bk-step:first-of-type {
    padding-top: 0;
    margin-top: 0;
    border-top: 0;
}

/* Sits clearly below the page title and clearly above a field label. */
.bk-step-title {
    margin: 0 0 18px;
    padding-left: 11px;
    border-left: 3px solid var(--brand-green, #36a66a);
    font-size: 15px;
    font-weight: 700;
    line-height: 1.2;
    color: #1f3f68;
}

.bk-grid {
    display: grid;
    gap: 18px 20px;
}

.bk-grid.two {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.bk-field {
    display: block;
    margin-bottom: 18px;
}

.bk-grid .bk-field {
    margin-bottom: 0;
}

.bk-label {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 6px;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: #33465c;
}

/* No required marker anywhere. Decorating every required field with a dot or a
   star is noise on a form that is mostly required; the lead says it once, and
   only the exceptions are named, in a lowercase whisper that stays out of the
   label's way. */
.bk-optional {
    font-size: 11px;
    font-weight: 500;
    font-style: italic;
    letter-spacing: 0;
    text-transform: none;
    color: #9aa8b8;
}

.bk-field input,
.bk-field select,
.bk-field textarea,
.bk-panel .eyeston-select-trigger {
    width: 100%;
    min-height: 42px;
    padding: 9px 12px !important;
    border: 1px solid #cbd5e1 !important;
    border-radius: 0 !important;
    background: #ffffff !important;
    color: #0f172a !important;
    font-size: 13.5px !important;
    font-weight: 500;
    box-shadow: none !important;
    transition: border-color 0.15s ease;
}

.bk-field textarea {
    min-height: 0;
    line-height: 1.55;
    resize: vertical;
}

.bk-field input::placeholder,
.bk-field textarea::placeholder {
    color: #a3b0c0 !important;
    font-weight: 400 !important;
}

.bk-field input:focus,
.bk-field select:focus,
.bk-field textarea:focus,
.bk-panel .eyeston-select > select:focus ~ .eyeston-select-trigger,
.bk-panel .eyeston-select.is-open .eyeston-select-trigger {
    border-color: var(--brand-green, #36a66a) !important;
    outline: none !important;
}

.bk-field.has-error input,
.bk-field.has-error select,
.bk-field.has-error textarea,
.bk-field.has-error .eyeston-select-trigger {
    border-color: #d32f2f !important;
}

.bk-help {
    display: block;
    margin-top: 6px;
    font-size: 11.5px;
    line-height: 1.5;
    color: #8494a6;
}

.bk-error {
    display: block;
    margin-top: 6px;
    font-size: 11.5px;
    font-weight: 600;
    color: #d32f2f;
}

/* ---------- Actions ---------- */

.bk-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    padding-top: 24px;
    margin-top: 24px;
    border-top: 1px solid #e4e9f0;
}

.bk-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    padding: 10px 22px;
    border: 1px solid #1f3f68;
    border-radius: 0;
    background: #1f3f68;
    color: #ffffff;
    font-size: 13.5px;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
    box-shadow: none;
}

.bk-btn:hover {
    background: #16304f;
    border-color: #16304f;
}

.bk-btn.ghost {
    background: transparent;
    color: #1f3f68;
}

.bk-btn.ghost:hover {
    background: transparent;
    border-color: var(--brand-green, #36a66a);
    color: var(--brand-green, #36a66a);
}

/* ---------- Confirmation ---------- */

.bk-summary {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 1px;
    margin: 26px 0 0;
    background: #e4e9f0;
    border: 1px solid #e4e9f0;
}

.bk-summary div {
    display: grid;
    gap: 4px;
    padding: 13px 15px;
    background: #ffffff;
}

.bk-summary dt {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: #8494a6;
}

.bk-summary dd {
    margin: 0;
    font-size: 13.5px;
    font-weight: 700;
    color: #1f3f68;
}

.bk-intake {
    margin-top: 26px;
    padding: 18px 20px;
    border: 1px solid #e4e9f0;
    border-left: 3px solid var(--brand-green, #36a66a);
}

.bk-intake-title {
    margin: 0 0 7px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--brand-green, #36a66a);
}

.bk-intake-text {
    margin: 0 0 15px;
    font-size: 13.5px;
    line-height: 1.6;
    color: #33465c;
}

.bk-intake .bk-help {
    margin-top: 11px;
}

/* ---------- Dark mode: blue, never charcoal ---------- */

:root[data-theme="dark"] .bk-panel {
    background: #0f2038;
    border-color: #2b4a77;
}

:root[data-theme="dark"] .bk-title,
:root[data-theme="dark"] .bk-step-title {
    color: #ffffff;
}

:root[data-theme="dark"] .bk-lead,
:root[data-theme="dark"] .bk-help {
    color: #93a1b3;
}

:root[data-theme="dark"] .bk-label {
    color: #cbd8e6;
}

:root[data-theme="dark"] .bk-step,
:root[data-theme="dark"] .bk-actions {
    border-top-color: #2b4a77;
}

:root[data-theme="dark"] .bk-field input,
:root[data-theme="dark"] .bk-field select,
:root[data-theme="dark"] .bk-field textarea,
:root[data-theme="dark"] .bk-panel .eyeston-select-trigger,
:root[data-theme="dark"] .bk-share-row input {
    background: #152b49 !important;
    border-color: #2b4a77 !important;
    color: #e6edf5 !important;
}

:root[data-theme="dark"] .bk-btn.ghost {
    color: #ffffff;
    border-color: #2b4a77;
}

:root[data-theme="dark"] .bk-summary {
    background: #2b4a77;
    border-color: #2b4a77;
}

:root[data-theme="dark"] .bk-summary div {
    background: #152b49;
}

:root[data-theme="dark"] .bk-summary dd {
    color: #ffffff;
}

:root[data-theme="dark"] .bk-intake {
    border-color: #2b4a77;
    border-left-color: var(--brand-green, #36a66a);
}

:root[data-theme="dark"] .bk-intake-text {
    color: #cbd8e6;
}

@media (max-width: 980px) {
    .bk-shell {
        grid-template-columns: 1fr;
    }

    .bk-rail {
        position: relative;
        top: auto;
    }
}

@media (max-width: 640px) {
    .bk-panel {
        padding: 24px 18px 28px;
    }

    .bk-grid.two {
        grid-template-columns: 1fr;
    }

    .bk-rail-title {
        font-size: 28px;
    }

    .bk-title {
        font-size: 23px;
    }
}

/* The pre-visit form is one column: it has no sidebar to fill and a patient on
   a phone should meet a single narrow card, not a layout. */
.bk-solo {
    width: min(680px, 100%);
    margin: 0 auto;
    padding-bottom: 42px;
}

/* A class that sets display beats the `hidden` attribute, which is how a
   "hidden" panel ends up sitting over the page swallowing clicks. Settle it
   once, globally, so hidden always means hidden. */
[hidden] {
    display: none !important;
}

/* ===========================================================================
   Online Booking (clinic admin), rebuilt 2026-07-26.
   The page answers three questions in order: here is the link, can patients
   actually book, and what has come in. Flat and sharp, brand navy and green.
   =========================================================================== */

.obk {
    display: grid;
    gap: 16px;
}

/* ---------- Cards ---------- */

.obk-card {
    padding: 20px 22px;
    background: var(--panel-solid, #ffffff);
    border: 1px solid var(--line, #e4e9f0);
}

.obk-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 16px;
}

.obk-card-head h2 {
    margin: 0;
    font-size: 15px;
    font-weight: 700;
    color: var(--ink-strong, #16283c);
}

.obk-state {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 4px 10px;
}

.obk-state.is-ok {
    background: var(--brand-green, #36a66a);
    color: #ffffff;
}

.obk-state.is-bad {
    background: #d32f2f;
    color: #ffffff;
}

.obk-fix {
    font-size: 12px;
    font-weight: 700;
    color: var(--brand-navy, #1f3f68);
    text-decoration: none;
    white-space: nowrap;
}

.obk-fix:hover {
    color: var(--brand-green, #36a66a);
}

/* ---------- Readiness checks ---------- */

.obk-checks {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 1px;
    background: var(--line, #e4e9f0);
    border: 1px solid var(--line, #e4e9f0);
}

.obk-checks li {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    background: var(--panel-solid, #ffffff);
}

.obk-checks strong {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: var(--ink, #16283c);
}

.obk-checks small {
    display: block;
    margin-top: 2px;
    font-size: 11.5px;
    line-height: 1.5;
    color: var(--muted, #8494a6);
}

/* The state shows as a left rail on the row itself: red stops patients
   booking, amber is worth knowing but harmless. */
.obk-checks li.is-warn {
    border-left: 3px solid #d97706;
}

.obk-checks li.is-bad {
    border-left: 3px solid #d32f2f;
}

/* ---------- Recent bookings ---------- */

.obk-empty {
    padding: 30px 20px;
    text-align: center;
    color: var(--muted, #8494a6);
}

.obk-empty p {
    margin: 0 auto 6px;
    max-width: 46ch;
    font-size: 13px;
    line-height: 1.6;
}

.obk-status {
    display: inline-block;
    padding: 3px 8px;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    background: var(--line, #eef1f6);
    color: var(--ink, #16283c);
}

.obk-status.is-scheduled {
    background: rgba(31, 63, 104, 0.1);
    color: var(--brand-navy, #1f3f68);
}

.obk-status.is-completed {
    background: rgba(54, 166, 106, 0.14);
    color: #227748;
}

.obk-status.is-cancelled,
.obk-status.is-no_show {
    background: rgba(211, 47, 47, 0.1);
    color: #b3261e;
}

/* ---------- Dark mode ---------- */

:root[data-theme="dark"] .obk-card {
    background: var(--panel-solid);
    border-color: var(--line);
}

:root[data-theme="dark"] .obk-checks {
    background: var(--line);
    border-color: var(--line);
}

:root[data-theme="dark"] .obk-checks li {
    background: var(--panel-solid);
}


/* The link sits in an ordinary card now, not a navy hero, so the field and its
   button take the same paint as every other form control on the page. */
.obk-note {
    margin: 0 0 14px;
    max-width: 62ch;
    font-size: 12.5px;
    line-height: 1.6;
    color: var(--muted, #8494a6);
}

.obk-copy {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px;
    max-width: 620px;
}

/* The one field on the page worth pointing at, so it wears the deepened brand
   blue rather than blending into the card, with the green button beside it. */
.obk-copy input {
    min-height: 38px;
    padding: 8px 12px;
    border: 1px solid #2b4a77 !important;
    border-radius: 0 !important;
    background: #152b49 !important;
    color: #ffffff !important;
    font-size: 12.5px;
    box-shadow: none !important;
}

.obk-btn {
    min-height: 38px;
    padding: 8px 20px;
    border: 1px solid var(--brand-green, #36a66a);
    border-radius: 0;
    background: var(--brand-green, #36a66a);
    color: #ffffff;
    font-family: inherit;
    font-size: 12.5px;
    font-weight: 700;
    cursor: pointer;
}

.obk-btn:hover {
    background: #2c8f59;
    border-color: #2c8f59;
}

.obk-actions {
    display: flex;
    gap: 18px;
    flex-wrap: wrap;
    margin-top: 14px;
}

.obk-link-action {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--brand-navy, #1f3f68);
    text-decoration: none;
    border-bottom: 1px solid var(--line, #d8dfe8);
    padding-bottom: 1px;
}

.obk-link-action:hover {
    color: var(--brand-green, #36a66a);
    border-bottom-color: var(--brand-green, #36a66a);
}

:root[data-theme="dark"] .obk-link-action {
    color: #e6edf5;
}

/* All clear: one quiet line where the checklist would be. */
.obk-allclear {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    padding: 11px 14px;
    border: 1px solid var(--line, #e4e9f0);
    border-left: 3px solid var(--brand-green, #36a66a);
    background: var(--panel-solid, #ffffff);
    font-size: 12.5px;
    font-weight: 600;
    color: var(--ink, #16283c);
}


/* ===========================================================================
   Pre-visit Intake (staff side).
   Cards carry their own padding here rather than inline styles per element,
   and answers read as question-and-answer pairs instead of a table with a tick
   column that is empty most of the time.
   =========================================================================== */

.intake-send {
    padding: 18px 20px 20px;
}

.intake-send-row {
    display: grid;
    grid-template-columns: minmax(240px, 420px) auto;
    align-items: end;
    gap: 14px;
}

.intake-send-note {
    margin: 14px 0 0;
    max-width: 70ch;
    font-size: 11.5px;
    line-height: 1.6;
    color: var(--muted, #8494a6);
}

.intake-send-note a {
    font-weight: 700;
    color: var(--brand-navy, #1f3f68);
}

.intake-send-note a:hover {
    color: var(--brand-green, #36a66a);
}

/* ---------- Answers waiting ---------- */

.intake-answers {
    margin-bottom: 16px;
}

.intake-answers .old-card-header h3 {
    margin: 0;
    font-size: 14px;
    font-weight: 700;
}

.intake-answers .old-card-header span {
    font-size: 12px;
    color: var(--muted, #8494a6);
}

.intake-flag {
    font-size: 11px !important;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--brand-green, #36a66a) !important;
}

.intake-answers-body {
    padding: 18px 20px 20px;
}

.intake-block + .intake-block {
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid var(--line, #e4e9f0);
}

.intake-block-title {
    margin: 0 0 12px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--muted, #8494a6);
}

/* Question above, answer below: it reads like a form the patient filled,
   which is what it is. */
.intake-qa {
    display: grid;
    gap: 1px;
    margin: 0;
    background: var(--line, #e4e9f0);
    border: 1px solid var(--line, #e4e9f0);
}

.intake-qa > div {
    display: grid;
    grid-template-columns: minmax(0, 34%) minmax(0, 1fr);
    gap: 14px;
    align-items: start;
    padding: 11px 14px;
    background: var(--panel-solid, #ffffff);
}

.intake-qa dt {
    font-size: 12px;
    font-weight: 600;
    line-height: 1.45;
    color: var(--muted, #8494a6);
}

.intake-qa dd {
    margin: 0;
    font-size: 13px;
    line-height: 1.5;
    color: var(--ink, #16283c);
    overflow-wrap: anywhere;
}

.intake-qa.is-fillable dt label {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    cursor: pointer;
}

.intake-qa.is-fillable dt input {
    margin: 2px 0 0;
    flex: 0 0 auto;
}

.intake-hint {
    margin: 10px 0 0;
    font-size: 11.5px;
    line-height: 1.55;
    color: var(--muted, #8494a6);
}

.intake-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 20px;
    padding-top: 18px;
    border-top: 1px solid var(--line, #e4e9f0);
}

.intake-actions .intake-hint {
    margin: 0;
    max-width: 46ch;
}

@media (max-width: 720px) {
    .intake-send-row {
        grid-template-columns: 1fr;
        align-items: stretch;
    }

    .intake-qa > div {
        grid-template-columns: 1fr;
        gap: 4px;
    }
}

/* The Patient field on Send A Link. It inherited a bare label with no space
   under it and a control shorter than the button beside it, so the row read as
   three loose pieces rather than one field with its action. */
.intake-send label {
    display: block;
    margin: 0;
}

.intake-send label > span {
    display: block;
    margin-bottom: 7px;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: var(--ink, #33465c);
}

.intake-send label select,
.intake-send .eyeston-select-trigger {
    width: 100%;
    min-height: 42px;
    padding: 10px 12px;
    border-radius: 0;
    font-size: 13px;
}

/* The button is the field's action, so it stands the same height and sits on
   the same baseline instead of floating small beside it. */
.intake-send .button {
    min-height: 42px;
    padding: 10px 24px;
    font-size: 13px;
    white-space: nowrap;
}

/* ===========================================================================
   Waitlist (staff side): the same shapes the intake page uses, so the two
   front-desk screens read as one system.
   =========================================================================== */

.wl-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 12px;
    margin: 20px 0;
}

.wl-stat {
    padding: 16px 18px;
}

.wl-stat span {
    display: block;
    margin-bottom: 2px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--muted, #8494a6);
}

.wl-stat strong {
    font-size: 24px;
    line-height: 1.15;
}

.wl-stat.is-good strong {
    color: var(--brand-green, #36a66a);
}

/* Add to the waitlist: a real card with real padding, fields that stand the
   same height as the button that submits them. */
.wl-add {
    padding: 18px 20px 20px;
}

.wl-add-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 16px 18px;
}

.wl-add label {
    display: block;
    margin: 0;
}

.wl-add label > span {
    display: block;
    margin-bottom: 7px;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: var(--ink, #33465c);
}

.wl-add label input,
.wl-add label select,
.wl-add .eyeston-select-trigger {
    width: 100%;
    min-height: 42px;
    padding: 10px 12px;
    border-radius: 0;
    font-size: 13px;
}

.wl-add .button {
    min-height: 42px;
    padding: 10px 24px;
    font-size: 13px;
}

/* "Call them if an earlier slot frees up" on the appointment form: a real
   choice the desk makes with the patient, so it reads as a statement rather
   than a stray tickbox in a field grid. */
.appt-earlier {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-top: 16px;
    padding: 12px 14px;
    border: 1px solid var(--line, #e4e9f0);
    border-left: 3px solid var(--brand-green, #36a66a);
    cursor: pointer;
}

.appt-earlier input {
    margin: 2px 0 0;
    flex: 0 0 auto;
}

.appt-earlier strong {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: var(--ink, #16283c);
}

.appt-earlier small {
    display: block;
    margin-top: 3px;
    font-size: 11.5px;
    line-height: 1.5;
    color: var(--muted, #8494a6);
}

/* Checkboxes and radios are not text fields, but the global `input` rule above
   is unqualified, so every one of them was inheriting width:100%, a 12px
   radius and 12px of padding: a tick box stretched across its row like an empty
   text input. Nothing in the app ever reset them. They are sized like controls
   here, once, everywhere. */
input[type="checkbox"],
input[type="radio"] {
    width: auto;
    min-width: 0;
    min-height: 0;
    height: auto;
    padding: 0;
    border-radius: 0;
    accent-color: var(--brand-green, #36a66a);
}

input[type="radio"] {
    border-radius: 50%; /* a radio is round by definition, not by decoration */
}

/* The same rules reach into the compact form grids. */
.form-preview input[type="checkbox"],
.form-preview input[type="radio"],
.field-grid input[type="checkbox"],
.field-grid input[type="radio"] {
    min-height: 0;
    padding: 0;
}