/* ==========================================================================
   WinRx Delivery - application UI layer
   --------------------------------------------------------------------------
   Loaded AFTER style.css so it wins. style.css is generated from static/scss/
   and must not be hand-edited; everything new belongs here.

   See DESIGN.md for the reasoning behind these choices.
   ========================================================================== */

/* ==========================================================================
   1. Tokens
   ========================================================================== */

:root {
    color-scheme: light;

    /* Brand. Two roles, because they move in OPPOSITE directions in dark mode:
       "fill" is a solid background that white text sits on; "ink" is text and
       icons drawn on a plain or tinted surface. Keeping one token for both is
       the single mistake that makes a dark theme impossible to finish. */
    --brand-fill: #1f4f7c;   /* the logo navy. 8.5:1 against white */
    --brand-700: #1f4f7c;    /* ink */
    --brand-900: #143551;    /* strongest ink */
    --brand-500: #2f6ca6;    /* focus rings */
    --brand-050: #eaf1f8;    /* tint background */

    --accent-500: #1a8a5f;   /* fill - positive / go / delivered */
    --accent-700: #146c4b;   /* ink */
    --accent-050: #e7f5ee;   /* tint */

    --warn-700: #8a5200;     /* attention, not danger */
    --warn-050: #fdf1de;

    --danger-700: #a4342c;   /* something went wrong */
    --danger-050: #fdeceb;

    --surface: #ffffff;
    --surface-sunken: #f2f5f9;   /* page background; cards sit above it */
    --border: #e1e7f0;
    --control-border: #c2ccdb;   /* checkbox rings, dashed drop zones */
    --track: #e5eaf2;            /* segmented-control groove */
    --scrim: rgba(16, 32, 64, .38);

    --text: #16233a;             /* darker than Bootstrap's default */
    --text-muted: #5a6a83;
    --text-faint: #a8b4c6;       /* placeholders, chevrons */

    --radius-lg: 18px;
    --radius-md: 12px;
    --shadow-card: 0 1px 2px rgba(16,32,64,.06), 0 8px 24px rgba(16,32,64,.07);
    --shadow-bar: 0 -1px 0 var(--border), 0 -8px 24px rgba(16,32,64,.06);
    --touch: 48px;               /* minimum comfortable target */

    --bar-height: 56px;          /* app bar and tab bar */
}

/* Dark palette. Written twice because CSS cannot share one declaration block
   between a media query and a plain selector. Keep the two in step.
   The :not([data-theme="light"]) guard is what makes an explicit "Light"
   choice stick on a dark device. */

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        color-scheme: dark;

        --brand-fill: #336da8;   /* 5.0:1 against white */
        --brand-700: #8fbde8;
        --brand-900: #b8d5f0;
        --brand-500: #5590c7;
        --brand-050: #17263a;

        --accent-500: #1f8f60;
        --accent-700: #5fd39b;
        --accent-050: #10291f;

        --warn-700: #f0b357;
        --warn-050: #2e2113;

        --danger-700: #f08c84;
        --danger-050: #2e1614;

        --surface: #161b26;
        --surface-sunken: #0e121a;
        --border: #29323f;
        --control-border: #3c4658;
        --track: #222b3a;
        --scrim: rgba(0, 0, 0, .55);

        --text: #e6ecf7;
        --text-muted: #9aa7bd;
        --text-faint: #6b7a92;

        --shadow-card: 0 1px 2px rgba(0,0,0,.45), 0 8px 24px rgba(0,0,0,.3);
        --shadow-bar: 0 -1px 0 var(--border), 0 -8px 24px rgba(0,0,0,.35);
    }
}

:root[data-theme="dark"] {
    color-scheme: dark;

    --brand-fill: #336da8;
    --brand-700: #8fbde8;
    --brand-900: #b8d5f0;
    --brand-500: #5590c7;
    --brand-050: #17263a;

    --accent-500: #1f8f60;
    --accent-700: #5fd39b;
    --accent-050: #10291f;

    --warn-700: #f0b357;
    --warn-050: #2e2113;

    --danger-700: #f08c84;
    --danger-050: #2e1614;

    --surface: #161b26;
    --surface-sunken: #0e121a;
    --border: #29323f;
    --control-border: #3c4658;
    --track: #222b3a;
    --scrim: rgba(0, 0, 0, .55);

    --text: #e6ecf7;
    --text-muted: #9aa7bd;
    --text-faint: #6b7a92;

    --shadow-card: 0 1px 2px rgba(0,0,0,.45), 0 8px 24px rgba(0,0,0,.3);
    --shadow-bar: 0 -1px 0 var(--border), 0 -8px 24px rgba(0,0,0,.35);
}


/* ==========================================================================
   2. Base - undoing the marketing theme
   ========================================================================== */

html {
    -webkit-text-size-adjust: 100%;   /* stop iOS inflating text in landscape */
}

body {
    background: var(--surface-sunken);
    color: var(--text);
    font-weight: 400;                 /* style.css shipped 300 grey-on-white */
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    overscroll-behavior-y: none;      /* no rubber-band on the page itself */
}

/* A tap should not paint a translucent grey rectangle over the control. */
a, button, input, select, textarea, label, .list-group-item {
    -webkit-tap-highlight-color: transparent;
}

/* style.css sets a black selection block over the whole app. */
::selection { background: var(--brand-050); color: var(--text); }
::-moz-selection { background: var(--brand-050); color: var(--text); }

a { color: var(--brand-700); }
a:hover, a:focus { color: var(--brand-900); }

hr { border-top-color: var(--border); }

.text-black { color: var(--text); }

/* Focus must stay visible for keyboard users, but not fire on every tap. */
:focus-visible {
    outline: 3px solid var(--brand-500);
    outline-offset: 2px;
}

.site-wrap {
    background: var(--surface-sunken);
    min-height: 100vh;
}


/* ==========================================================================
   3. Bootstrap 4 overrides
   --------------------------------------------------------------------------
   Bootstrap hard-codes light and will otherwise survive the theme switch as
   white rectangles. Everything here is either a dark-mode fix or an undo of
   the marketing theme's touch-hostile behaviour.
   ========================================================================== */

/* --- Buttons ------------------------------------------------------------ */

/* style.css shouted every button in uppercase with .2em tracking, and lifted
   it 2px on hover with a drop shadow. On a touch device that hover state
   latches after the tap and never clears. */
.btn {
    text-transform: none;
    letter-spacing: normal;
    font-weight: 500;
    border-radius: var(--radius-md);
    min-height: var(--touch);
    padding: .625rem 1.25rem;
    transition: filter .15s ease, background-color .15s ease;
    top: 0 !important;
}

.btn:hover,
.btn:focus,
.btn:active {
    top: 0 !important;
    box-shadow: none !important;
}

.btn.btn-primary { font-size: 1rem; font-weight: 500; letter-spacing: normal; }
.btn.btn-lg      { font-size: 1.0625rem; padding: .875rem 1.25rem; min-height: 52px; }
.btn.btn-sm      { font-size: .875rem !important; padding: .5rem 1rem !important; min-height: 40px; }

/* Never point a :hover/:active at a different colour token - an ink token goes
   light in dark mode and the button flashes pale on press. brightness() is
   correct in both themes. */
.btn-primary {
    background-color: var(--brand-fill);
    border-color: var(--brand-fill);
    color: #fff;
}
.btn-primary:hover, .btn-primary:focus, .btn-primary:active,
.btn-primary:not(:disabled):not(.disabled):active {
    background-color: var(--brand-fill);
    border-color: var(--brand-fill);
    color: #fff;
    filter: brightness(.88);
}

.btn-success {
    background-color: var(--accent-500);
    border-color: var(--accent-500);
    color: #fff;
}
.btn-success:hover, .btn-success:focus, .btn-success:active,
.btn-success:not(:disabled):not(.disabled):active {
    background-color: var(--accent-500);
    border-color: var(--accent-500);
    color: #fff;
    filter: brightness(.88);
}

.btn-secondary, .btn.btn-secondary {
    background-color: var(--surface);
    border-color: var(--control-border);
    color: var(--text);
}
.btn-secondary:hover, .btn.btn-secondary:hover,
.btn-secondary:focus, .btn.btn-secondary:focus,
.btn-secondary:not(:disabled):not(.disabled):active {
    background-color: var(--surface-sunken);
    border-color: var(--control-border);
    color: var(--text);
}

.btn-outline-primary {
    color: var(--brand-700);
    border-color: var(--control-border);
    background-color: var(--surface);
}
.btn-outline-primary:hover,
.btn-outline-primary:not(:disabled):not(.disabled):active,
.btn-outline-primary.active {
    background-color: var(--brand-fill);
    border-color: var(--brand-fill);
    color: #fff;
}

.btn-light {
    background-color: var(--surface);
    border-color: var(--border);
    color: var(--text);
}
.btn-light:hover, .btn-light:focus,
.btn-light:not(:disabled):not(.disabled):active {
    background-color: var(--surface-sunken);
    border-color: var(--border);
    color: var(--text);
}

.btn-dark {
    background-color: var(--brand-900);
    border-color: var(--brand-900);
    color: #fff;
}

.btn-link { color: var(--brand-700); }

/* --- Surfaces ----------------------------------------------------------- */

/* .jumbotron is Bootstrap's marketing hero, used here as the universal page
   container on every screen. Neutralising it lifts all 65 templates at once;
   templates drop the class as they are converted. */
.jumbotron {
    background: transparent;
    padding: 1rem 0;
    margin-bottom: 0;
    border-radius: 0;
    color: var(--text);
}

.card {
    background-color: var(--surface);
    border-color: var(--border);
    border-radius: var(--radius-lg);
    color: var(--text);
}
.card-body { color: inherit; }

.list-group-item {
    background-color: var(--surface);
    border-color: var(--border);
    color: var(--text);
    border-radius: var(--radius-md);
}
.list-group-item-action { color: var(--text); }
.list-group-item-action:hover,
.list-group-item-action:focus {
    background-color: var(--surface-sunken);
    color: var(--text);
}
.list-group-item-action a { color: var(--text) !important; }

.badge { color: var(--text); }
.badge-pill, .badge.rounded-pill {
    background-color: var(--brand-050);
    color: var(--brand-700);
    font-size: .8125rem;
    font-weight: 600;
    padding: .375em .7em;
    border-radius: 999px;
}

/* --- Forms -------------------------------------------------------------- */

.form-control {
    height: auto;
    min-height: var(--touch);
    background-color: var(--surface);
    border-color: var(--control-border);
    border-radius: var(--radius-md);
    color: var(--text);
    font-size: 1rem;          /* below 16px iOS zooms the page on focus */
    padding: .625rem .875rem;
}
.form-control:focus {
    background-color: var(--surface);
    border-color: var(--brand-500);
    color: var(--text);
    box-shadow: 0 0 0 3px var(--brand-050);
}
.form-control::placeholder { color: var(--text-faint); opacity: 1; }
.form-control:disabled,
.form-control[readonly] {
    background-color: var(--surface-sunken);
    color: var(--text-muted);
}

/* Read-only data still rendered through a form field. The real fix is to make
   it an .info-row; until a screen is converted, at least make it readable
   rather than grey-on-grey. */
.form-control-plaintext {
    color: var(--text);
    padding: .5rem 0;
    min-height: 0;
}

select.form-control { appearance: none; -webkit-appearance: none; }

.col-form-label, label { color: var(--text-muted); font-weight: 500; }

.form-check-input { width: 1.15rem; height: 1.15rem; }

/* Checkboxes are scaled with transform in several templates, which enlarges
   the paint but NOT the hit area. Give the box a real size instead. */
input[type="checkbox"], input[type="radio"] {
    accent-color: var(--brand-fill);
}

.input-group-text {
    background-color: var(--surface-sunken);
    border-color: var(--control-border);
    color: var(--text-muted);
}

/* --- Modals, dropdowns, alerts ------------------------------------------ */

.modal-content {
    background-color: var(--surface);
    border: none;
    border-radius: var(--radius-lg);
    color: var(--text);
    box-shadow: var(--shadow-card);
}
.modal-header, .modal-footer { border-color: var(--border); }
.modal-backdrop.show { background-color: var(--scrim); opacity: 1; }

.close, .modal-header .close {
    color: var(--text-muted);
    text-shadow: none;
    opacity: 1;
    min-width: var(--touch);
    min-height: var(--touch);
}
.close:hover { color: var(--text); }

.dropdown-menu {
    background-color: var(--surface);
    border-color: var(--border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-card);
    padding: .375rem;
}
.dropdown-item {
    color: var(--text);
    border-radius: var(--radius-md);
    padding: .75rem 1rem;
    min-height: var(--touch);
    display: flex;
    align-items: center;
}
.dropdown-item:hover, .dropdown-item:focus {
    background-color: var(--surface-sunken);
    color: var(--text);
}
.dropdown-divider { border-color: var(--border); }

.alert { border: none; border-radius: var(--radius-md); }
.alert-success { background-color: var(--accent-050); color: var(--accent-700); }
.alert-info    { background-color: var(--brand-050);  color: var(--brand-700); }
.alert-warning { background-color: var(--warn-050);   color: var(--warn-700); }
.alert-danger, .alert-error {
    background-color: var(--danger-050); color: var(--danger-700);
}

/* --- Tables ------------------------------------------------------------- */

.table { color: var(--text); }
.table td, .table th { border-color: var(--border); }
.table-bordered, .table-bordered td, .table-bordered th { border-color: var(--border); }
.table-striped tbody tr:nth-of-type(odd) { background-color: var(--surface-sunken); }
.table-hover tbody tr:hover { background-color: var(--brand-050); color: var(--text); }

/* --- Semantic text ------------------------------------------------------ */

.text-danger  { color: var(--danger-700) !important; }
.text-warning { color: var(--warn-700) !important; }
.text-success { color: var(--accent-700) !important; }
.text-muted   { color: var(--text-muted) !important; }
.bg-white     { background-color: var(--surface) !important; }
.bg-light     { background-color: var(--surface-sunken) !important; }

/* Bootstrap's .bg-warning is a saturated #ffc107 that only works under dark
   text, so the themed --text colour goes unreadable on it in dark mode. The
   witness-required row wants a tint, not a fill - then the normal text colour
   is legible in both themes. Used only on the witness rows in patient.html
   and pickup-patient.html. */
.bg-warning { background-color: var(--warn-050) !important; }

/* State needs shape, not only colour. */
.list-group-item.bg-warning { border-left: 4px solid var(--warn-700); }

/* --- Chrome ------------------------------------------------------------- */


.site-footer {
    background: var(--surface-sunken);
    border-top: 1px solid var(--border) !important;
    color: var(--text-muted);
    padding-bottom: calc(1rem + env(safe-area-inset-bottom));
}
.site-footer a { color: var(--brand-700); }


/* --- Signature capture ---------------------------------------------------
   The pad stays light in BOTH themes on purpose. jSignature is configured in
   jsignature/settings.py to draw #000 ink with a #DDD guide line, and those
   are baked into the captured data and the image rendered server-side by
   draw_signature() - so the pad cannot follow the theme without the ink
   disappearing. A signature panel also reads as "sign here" precisely because
   it looks like paper.

   Note the widget template tags the container .bg-white, which the
   theme-aware .bg-white rule above would otherwise turn dark. */

.jsign-container,
.jsign-container.bg-white {
    background-color: #ffffff !important;
    border: 1px solid var(--control-border);
    border-radius: var(--radius-md);
    overflow: hidden;
    /* jSignature measures this element to size the canvas, so it has to be a
       full-width block. It was a fixed 350px, which overflowed the content
       column on a phone and clipped the area strokes were captured from. */
    display: block;
    width: 100%;
}

.jsign-container canvas {
    background-color: #ffffff;
    display: block;
    /* Without this, dragging to sign scrolls the page on a touch device
       instead of drawing. */
    touch-action: none;
}

/* The widget ships this as .btn-info cyan. Clearing a signature is a quiet
   secondary action, not a call to action. */
.jsign-wrapper input[type="button"] {
    background-color: var(--surface);
    border: 1px solid var(--control-border);
    color: var(--text);
    min-height: 44px;
    border-radius: var(--radius-md);
    font-weight: 500;
}
.jsign-wrapper input[type="button"]:hover,
.jsign-wrapper input[type="button"]:focus {
    background-color: var(--surface-sunken);
    color: var(--text);
}

/* ==========================================================================
   4. App chrome - app bar, tab bar, more sheet
   ========================================================================== */

/* --- App bar ------------------------------------------------------------ */

/* Both rows travel together, so the whole wrapper is what sticks. */
.app-bar-wrap {
    position: sticky;
    top: 0;
    z-index: 1030;
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    /* Padding rather than margin so the bar's own background fills the notch
       area. env() is 0 outside standalone mode. */
    padding-top: env(safe-area-inset-top);
}

.app-bar {
    display: flex;
    align-items: center;
    height: var(--bar-height);
    padding: 0 .25rem;
}

/* Fixed, equal side slots keep the title optically centred whether or not a
   back chevron is present. */
.app-bar-slot {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    min-width: var(--touch);
}
.app-bar-slot-right { justify-content: flex-end; }

.app-bar-btn {
    width: var(--touch);
    height: var(--touch);
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    border-radius: 999px;
    color: var(--text);
    font-size: 1.125rem;
    cursor: pointer;
}
.app-bar-btn:hover, .app-bar-btn:focus {
    background: var(--surface-sunken);
    color: var(--text);
    text-decoration: none;
}

.app-bar-wordmark {
    font-weight: 700;
    letter-spacing: -.01em;
    color: var(--brand-700);
}

.app-bar-title {
    flex: 1 1 auto;
    min-width: 0;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.0625rem;
    font-weight: 600;
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* --- Page-action menu ----------------------------------------------------
   Compatibility layer. 18 templates still push <li><a class="btn btn-primary">
   into {% block navbar %}. Rendering that list here restyles those buttons as
   plain menu rows, so every one of those screens keeps working untouched
   until it is converted. */

.app-actions {
    display: flex;
    padding: 0 .75rem .625rem;
    overflow-x: auto;
    /* Let the row run off the edge instead of wrapping or squashing: with
       more chips than fit, sideways scrolling keeps every label readable. */
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}
.app-actions::-webkit-scrollbar { display: none; }

/* Centred via auto margins, NOT justify-content: center on the scroll
   container. With justify-content the overflow is split across both ends, and
   the part that spills off the left becomes unreachable - you cannot scroll
   back past the start edge. Auto margins centre the row while it fits and
   collapse to zero once it does not, so overflow stays entirely on the right
   where it can be scrolled to. */
.app-menu {
    display: flex;
    gap: .5rem;
    list-style: none;
    margin: 0 auto;
    padding: 0;
}
.app-menu li { display: block; }

/* The 18 unconverted templates emit .btn.btn-primary here. Restyle those as
   quiet chips: they are navigation, so they must not out-shout the screen's
   real primary action. */
.app-menu .btn {
    display: inline-flex !important;
    align-items: center;
    width: auto;
    min-height: 40px;
    padding: .5rem .875rem !important;
    background: var(--surface-sunken) !important;
    border: 1px solid var(--border) !important;
    color: var(--brand-700) !important;
    font-size: .875rem !important;
    font-weight: 600 !important;
    line-height: 1.2;
    white-space: nowrap;
    text-transform: none !important;
    letter-spacing: normal !important;
    border-radius: 999px;
    box-shadow: none !important;
}
.app-menu .btn:hover, .app-menu .btn:focus {
    background: var(--brand-050) !important;
    color: var(--brand-700) !important;
}

/* Signed-in user, standing in for a meatball menu. The count badge is a
   surface/ink pair rather than a second solid fill: an ink token inverts
   between themes, so a solid-on-solid badge that reads in light mode goes
   unreadable in dark. */
.app-bar-avatar {
    position: relative;
    width: var(--touch);
    height: var(--touch);
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    cursor: pointer;
}
.app-bar-avatar .avatar-circle {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--brand-fill);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .9375rem;
    font-weight: 700;
    line-height: 1;
}
.app-bar-avatar:hover .avatar-circle,
.app-bar-avatar:focus .avatar-circle { filter: brightness(.88); }

.app-bar-avatar .avatar-count {
    position: absolute;
    top: 3px;
    right: 1px;
    min-width: 19px;
    height: 19px;
    padding: 0 5px;
    border-radius: 999px;
    background: var(--surface);
    color: var(--brand-700);
    border: 1px solid var(--border);
    font-size: .6875rem;
    font-weight: 700;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* --- More sheet ---------------------------------------------------------- */

.sheet .modal-dialog {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    margin: 0;
    max-width: none;
}
.sheet .modal-content {
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    max-height: 85vh;
    overflow-y: auto;
    padding-bottom: env(safe-area-inset-bottom);
}
/* Bootstrap 4 slides modals down from the top; a sheet comes up from the
   bottom edge it is anchored to. */
.sheet.fade .modal-dialog {
    transform: translateY(100%);
    transition: transform .25s ease-out;
}
.sheet.show .modal-dialog { transform: translateY(0); }

.sheet-handle {
    width: 36px;
    height: 4px;
    border-radius: 999px;
    background: var(--control-border);
    margin: .625rem auto .25rem;
}

/* On a phone the avatar sits in the hardest corner to reach one-handed, so the
   menu rises from the bottom where the thumb already is - reach up once to
   open it, then everything is close. That reasoning is worth nothing on a
   monitor: there it becomes a full-width bar sliding up from the far edge,
   disconnected from the control that opened it. Above md it anchors under the
   avatar instead and drops down, like any other menu. */
@media (min-width: 768px) {
    .sheet .modal-dialog {
        position: fixed;
        top: calc(env(safe-area-inset-top) + var(--bar-height) + .5rem);
        right: .75rem;
        left: auto;
        bottom: auto;
        width: 360px;
        max-width: calc(100vw - 1.5rem);
    }
    .sheet .modal-content {
        border-radius: var(--radius-lg);
        max-height: calc(100vh - var(--bar-height) - 2rem);
        padding-bottom: 0;
        box-shadow: var(--shadow-card);
    }
    .sheet.fade .modal-dialog {
        transform: translateY(-8px);
        opacity: 0;
        transition: transform .18s ease-out, opacity .18s ease-out;
    }
    .sheet.show .modal-dialog {
        transform: translateY(0);
        opacity: 1;
    }
    /* A grab handle is a touch affordance; there is nothing to drag here. */
    .sheet-handle { display: none; }
}

.sheet-section {
    padding: .375rem;
    border-top: 1px solid var(--border);
}
.sheet-section:first-of-type { border-top: none; }

.sheet-item {
    display: flex;
    align-items: center;
    gap: .875rem;
    width: 100%;
    min-height: var(--touch);
    padding: .75rem 1rem;
    background: none;
    border: none;
    border-radius: var(--radius-md);
    color: var(--text);
    font-size: 1rem;
    font-weight: 500;
    text-align: left;
}
.sheet-item i {
    width: 1.25rem;
    text-align: center;
    color: var(--text-muted);
    font-size: 1rem;
}
.sheet-item:hover, .sheet-item:focus {
    background: var(--surface-sunken);
    color: var(--text);
    text-decoration: none;
}
.sheet-item-danger, .sheet-item-danger i { color: var(--danger-700); }

.sheet-meta {
    padding: .25rem 1rem .75rem;
    color: var(--text-muted);
    font-size: .8125rem;
}

/* --- Screen container ---------------------------------------------------- */

/* The top padding matters: the app bar above is sticky, so without it the
   first control sits flush against the bar's bottom border. */
.screen {
    width: 100%;
    max-width: 604px;
    margin: 0 auto;
    padding: 1rem .75rem 0;
}
/* The admin DataTables need every pixel of width they can get. */
.screen-wide {
    width: 100%;
    margin: 0 auto;
    padding: 1rem .75rem 0;
}

/* Theme toggle in its app-bar form, used on signed-out pages where there is
   no More sheet to hold it. */
.theme-toggle {
    width: var(--touch);
    height: var(--touch);
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 999px;
    background: none;
    color: var(--text);
    font-size: 1.125rem;
    cursor: pointer;
}
.theme-toggle:hover, .theme-toggle:focus {
    color: var(--text);
    background: var(--surface-sunken);
}


/* ==========================================================================
   5. Primitives                                          [Phase 2 - partial]
   --------------------------------------------------------------------------
   Still to come: .info-list / .info-row, .section-label, .chip, .hero-card,
   .sticky-button, .segmented, .measure-card
   ========================================================================== */

/* --- Read-only facts -----------------------------------------------------
   The replacement for `<input disabled>`. Disabled inputs render grey-on-grey
   - the worst contrast on the screen - on screens whose whole job is reading,
   and they imply "you could edit this, but you can't". */

.info-list {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    margin-bottom: 1rem;
}

.info-row {
    display: flex;
    gap: 1rem;
    align-items: baseline;
    padding: .75rem 1rem;
    border-top: 1px solid var(--border);
}
.info-row:first-child { border-top: none; }

.info-label {
    flex: 0 0 38%;
    max-width: 38%;
    color: var(--text-muted);
    font-size: .875rem;
}
.info-value {
    flex: 1 1 auto;
    min-width: 0;
    color: var(--text);
    overflow-wrap: break-word;
}
.info-value-strong { font-weight: 600; }

/* A field that must stay a real input to be submitted, but reads as text. */
.info-value .form-control-plaintext {
    padding: 0;
    border: 0;
    background: transparent;
    width: auto;
    min-height: 0;
    color: inherit;
    font: inherit;
}

/* Side by side wastes the value's width once the screen is narrow. */
@media (max-width: 420px) {
    .info-row { display: block; }
    .info-label { display: block; max-width: none; margin-bottom: .125rem; }
}

/* --- Section label -------------------------------------------------------- */

.section-label {
    margin: 1.25rem 0 .5rem;
    padding: 0 .25rem;
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--text-muted);
}
/* The screen container already supplies the gap under the app bar. */
.section-label:first-child { margin-top: 0; }

/* --- Status chips --------------------------------------------------------
   Always paired with an icon: a state that differs from its neighbour only by
   colour fails for anyone who does not perceive the difference. */

.chip-row {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin: .75rem 0;
}
.chip {
    display: inline-flex;
    align-items: center;
    gap: .375rem;
    padding: .3125rem .625rem;
    border-radius: 999px;
    font-size: .8125rem;
    font-weight: 600;
    background: var(--brand-050);
    color: var(--brand-700);
}
.chip-warn    { background: var(--warn-050);      color: var(--warn-700); }
.chip-danger  { background: var(--danger-050);    color: var(--danger-700); }
.chip-accent  { background: var(--accent-050);    color: var(--accent-700); }
.chip-neutral { background: var(--surface-sunken); color: var(--text-muted); }

/* --- Editable fields ------------------------------------------------------ */

.field-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 1rem;
    margin-bottom: 1rem;
}
.field-card .form-group { margin-bottom: 1rem; }
.field-card .form-group:last-child { margin-bottom: 0; }

/* Two short fields side by side on a tablet, stacked on a phone. Replaces the
   col-sm-3 / col-sm-3 label-and-field grid, which put a 25%-wide label column
   next to a 25%-wide input on every screen size. */
.field-row { display: flex; gap: 1rem; }
.field-row > .form-group { flex: 1 1 0; min-width: 0; }
@media (max-width: 520px) {
    .field-row { display: block; }
}

/* A button sitting directly in a field card needs its own gap: the fields
   above it are usually wrapped (the date range nests both in .input-daterange),
   so the last one is :last-child of that wrapper and has already dropped its
   bottom margin - leaving the button flush against the field. */
.field-card > .btn { margin-top: 1rem; }
.field-card label {
    display: block;
    margin-bottom: .375rem;
    font-size: .875rem;
}

/* A fixed reference value shown among the inputs it governs - total qty sits
   with witness and carry because those two have to reconcile against it. Set
   apart so it does not read as another thing to fill in. */
.field-readout {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    padding: .625rem .75rem;
    margin-bottom: 1rem;
    background: var(--surface-sunken);
    border-radius: var(--radius-md);
}
.readout-label { color: var(--text-muted); font-size: .875rem; }
.readout-value { font-weight: 700; font-size: 1.125rem; }

.info-value .form-control-plaintext,
.readout-value .form-control-plaintext {
    padding: 0;
    border: 0;
    background: transparent;
    width: auto;
    min-height: 0;
    color: inherit;
    font: inherit;
    text-align: right;
}

/* --- Sticky primary action ------------------------------------------------
   Sticky, not fixed: when the screen is short it sits at its natural place
   instead of floating over empty space. */

.sticky-action {
    position: sticky;
    bottom: 0;
    z-index: 20;
    margin: 1.25rem -.75rem 0;
    padding: .75rem;
    padding-bottom: calc(.75rem + env(safe-area-inset-bottom));
    background: var(--surface);
    box-shadow: var(--shadow-bar);
}
.sticky-action .btn + .btn,
.sticky-action .btn + .btn-quiet { margin-top: .5rem; }
.sticky-action .btn-quiet { display: flex; width: 100%; }

/* The same stack, in the normal flow. For screens where reaching the bottom is
   itself the point - see "Sticky actions" in DESIGN.md. */
.screen-action {
    margin: 1.25rem 0;
    padding-bottom: env(safe-area-inset-bottom);
}
.screen-action .btn + .btn,
.screen-action .btn + .btn-quiet { margin-top: .5rem; }
.screen-action .btn-quiet { display: flex; width: 100%; }

/* --- Confirmation dialogs -------------------------------------------------
   The message is the heading; a title bar repeating the app's own vocabulary
   ("Return Items" above "Are you sure you want to return these items?") is
   noise. An icon states the outcome. The primary is full width with a quiet
   Cancel beneath it - cancelling is not destructive, so it is never red. */

.confirm .modal-dialog { max-width: 380px; }
.confirm .modal-content { padding: 1.5rem 1.25rem 1.25rem; }

.confirm-icon {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto .875rem;
    font-size: 1.5rem;
}
.confirm-icon-accent { background: var(--accent-050); color: var(--accent-700); }
.confirm-icon-warn   { background: var(--warn-050);   color: var(--warn-700); }
.confirm-icon-danger { background: var(--danger-050); color: var(--danger-700); }
.confirm-icon-brand  { background: var(--brand-050);  color: var(--brand-700); }

.confirm-title {
    margin: 0 0 .375rem;
    text-align: center;
    font-size: 1.1875rem;
    font-weight: 600;
    color: var(--text);
}
.confirm-text {
    margin: 0 0 1.25rem;
    text-align: center;
    color: var(--text-muted);
    /* so embedded newlines in a message survive */
    white-space: pre-line;
}

.confirm-fields { text-align: left; margin-bottom: 1.25rem; }
.confirm-fields label { display: block; margin-bottom: .375rem; font-size: .875rem; }
.confirm-fields .form-group { margin-bottom: 1rem; }
.confirm-fields .form-group:last-child { margin-bottom: 0; }

.confirm-actions .btn { width: 100%; }
.confirm-actions .btn-quiet { width: 100%; margin-top: .5rem; }

/* A choice of several destinations rather than a yes/no. */
.confirm-list { text-align: left; margin-bottom: 1rem; }
.confirm-list .info-row { text-decoration: none; }
.confirm-list a.info-row:hover { background: var(--surface-sunken); }

/* --- Segmented control ----------------------------------------------------
   A view setting with 2-3 options. Not for actions. */

.segmented {
    display: flex;
    gap: .25rem;
    padding: .25rem;
    background: var(--track);
    border-radius: 999px;
    margin-bottom: 1rem;
}
.segmented-option {
    flex: 1 1 0;
    min-height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 999px;
    background: none;
    color: var(--text-muted);
    font-size: .9375rem;
    font-weight: 600;
}
.segmented-option:hover { color: var(--text); text-decoration: none; }
.segmented-option.is-active {
    background: var(--surface);
    color: var(--brand-700);
    box-shadow: 0 1px 2px rgba(16,32,64,.12);
}

/* --- Single-number entry -------------------------------------------------- */

.measure-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 1rem;
    margin-bottom: .75rem;
}
.measure-card label {
    display: block;
    font-size: .875rem;
    color: var(--text-muted);
    margin-bottom: .25rem;
}
.measure-input {
    display: flex;
    align-items: baseline;
    gap: .5rem;
}
.measure-card .form-control {
    border: none;
    border-radius: 0;
    padding: 0;
    min-height: 0;
    font-size: 2rem;
    font-weight: 600;
    box-shadow: none;
}
.measure-card .form-control:focus { box-shadow: none; }
.measure-unit { color: var(--text-muted); font-size: 1rem; white-space: nowrap; }

/* A checkbox option as a full-width row, so the whole strip is the target. */
.check-row {
    display: flex;
    align-items: center;
    gap: .25rem;
    margin: 0;
    padding-right: 1rem;
    border-top: 1px solid var(--border);
    cursor: pointer;
    font-weight: 400;
    color: var(--text);
}
.check-row:first-child { border-top: none; }
.check-row:hover { background: var(--surface-sunken); }
.check-row .select-hit { flex: 0 0 auto; }
.check-row input[type="checkbox"] { width: 22px; height: 22px; margin: 0; }
.measure-rule { height: 2px; background: var(--border); margin-top: .5rem; }
.measure-card:focus-within .measure-rule { background: var(--brand-500); }

/* --- Hero card ------------------------------------------------------------
   A destination important enough that a plain row undersells it. */

.hero-card {
    display: flex;
    align-items: center;
    gap: 1rem;
    width: 100%;
    padding: 1rem;
    margin-bottom: .75rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    color: var(--text);
    text-align: left;
}
.hero-card:hover, .hero-card:focus {
    background: var(--surface-sunken);
    color: var(--text);
    text-decoration: none;
}
.hero-icon {
    flex: 0 0 auto;
    width: 56px;
    height: 56px;
    border-radius: var(--radius-md);
    background: var(--brand-050);
    color: var(--brand-700);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.375rem;
}
.hero-icon-warn   { background: var(--warn-050);   color: var(--warn-700); }
.hero-icon-accent { background: var(--accent-050); color: var(--accent-700); }
.hero-body { flex: 1 1 auto; min-width: 0; display: block; }
.hero-title, .hero-desc { display: block; }
.hero-title { font-weight: 600; font-size: 1.0625rem; }
.hero-desc { color: var(--text-muted); font-size: .875rem; }
.hero-card > .fa-chevron-right { color: var(--text-faint); }

/* ==========================================================================
   Admin reporting tables
   --------------------------------------------------------------------------
   DataTables ships its own stylesheet with light colours hard-coded, so
   without this block these three screens stay white while the rest of the app
   goes dark. Everything here is either a theme fix or small-screen layout.
   ========================================================================== */

/* These screens use .screen-wide so the table gets the whole monitor. The
   filter panels must not: a date field stretched to 1900px is unreadable and
   a full-width submit button looks like an error. They cap out and sit side by
   side on a wide screen, stacking on a narrow one. */
.report-head {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem 1.5rem;
    margin-bottom: 1rem;
}
.report-panel {
    flex: 1 1 300px;
    max-width: 420px;
    min-width: 0;
}
.report-panel .section-label { margin-top: 0; }

/* On its own - patient history, and pending, which has no totals alongside a
   date range - a single capped panel would otherwise hug the left edge of a
   full-width screen. Pairs stay side by side. */
.report-panel:only-child { margin-left: auto; margin-right: auto; }

.table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin-bottom: 1rem;
}

table.dataTable, .report-table {
    width: 100% !important;
    color: var(--text);
    border-collapse: collapse;
}
table.dataTable thead th,
table.dataTable thead td {
    background: var(--surface-sunken);
    color: var(--text);
    border-bottom: 2px solid var(--border);
    font-size: .8125rem;
    font-weight: 700;
    white-space: nowrap;
}
table.dataTable tbody td {
    border-top: 1px solid var(--border);
    font-size: .875rem;
}
table.dataTable tbody tr { background: var(--surface); }
table.dataTable.stripe tbody tr.odd,
table.dataTable.display tbody tr.odd { background: var(--surface-sunken); }
table.dataTable tbody tr:hover { background: var(--brand-050); }

/* The per-column search inputs live in a second header row. Responsive hides
   a collapsed column's cells in BOTH rows, so on a narrow screen this row
   would be a partial set of inputs with no way to reach the rest - worse than
   not offering it. The global search box remains. */
@media (max-width: 767px) {
    .column-search-row { display: none; }
}
.column-search-row .form-control {
    min-height: 36px;
    font-size: .8125rem;
    padding: .25rem .5rem;
}

/* --- DataTables chrome ---------------------------------------------------- */

.dataTables_wrapper { color: var(--text); }
.dataTables_wrapper .dataTables_filter,
.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_info,
.dataTables_wrapper .dataTables_paginate { color: var(--text-muted); font-size: .875rem; }

.dataTables_wrapper .dataTables_filter input,
.dataTables_wrapper .dataTables_length select {
    background: var(--surface);
    border: 1px solid var(--control-border);
    border-radius: var(--radius-md);
    color: var(--text);
    min-height: 40px;
    padding: .25rem .625rem;
    margin-left: .5rem;
}
.dataTables_wrapper .dataTables_filter input:focus,
.dataTables_wrapper .dataTables_length select:focus {
    border-color: var(--brand-500);
    outline: none;
    box-shadow: 0 0 0 3px var(--brand-050);
}

/* DataTables sets `color: #333 !important` on .paginate_button.current at the
   same specificity as ours, so these are prefixed with `html` to outrank it
   even if the load order ever changes back. Without it the current page number
   renders dark-on-navy. */
html .dataTables_wrapper .dataTables_paginate .paginate_button {
    min-height: 40px;
    margin-left: 2px;
    padding: .375rem .75rem;
    border-radius: var(--radius-md);
    border: 1px solid transparent !important;
    color: var(--text) !important;
    background: transparent !important;
    box-shadow: none !important;
}
html .dataTables_wrapper .dataTables_paginate .paginate_button.current,
html .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover,
html .dataTables_wrapper .dataTables_paginate .paginate_button.current:active {
    background: var(--brand-fill) !important;
    border-color: var(--brand-fill) !important;
    color: #fff !important;
    font-weight: 700;
}
html .dataTables_wrapper .dataTables_paginate .paginate_button:hover,
html .dataTables_wrapper .dataTables_paginate .paginate_button:active {
    background: var(--surface-sunken) !important;
    border-color: var(--border) !important;
    color: var(--text) !important;
}
html .dataTables_wrapper .dataTables_paginate .paginate_button.disabled,
html .dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover {
    color: var(--text-faint) !important;
    background: transparent !important;
    border-color: transparent !important;
}

.dt-buttons { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: .75rem; }
.dt-buttons .dt-button {
    margin: 0;
    min-height: 40px;
    padding: .5rem .875rem;
    background: var(--surface) !important;
    border: 1px solid var(--control-border) !important;
    border-radius: var(--radius-md) !important;
    color: var(--text) !important;
    font-size: .875rem;
    font-weight: 500;
}
.dt-buttons .dt-button:hover:not(.disabled) {
    background: var(--surface-sunken) !important;
    border-color: var(--control-border) !important;
}
div.dt-button-collection {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-card);
}
div.dt-button-collection .dt-button { width: 100%; text-align: left; }

/* --- Responsive child row -------------------------------------------------
   The columns that did not fit, as label/value pairs under the record. */

table.dataTable.dtr-inline.collapsed > tbody > tr > td.dtr-control:before,
table.dataTable.dtr-inline.collapsed > tbody > tr > th.dtr-control:before {
    background-color: var(--brand-fill);
    border: none;
    box-shadow: none;
    line-height: 1rem;
}
table.dataTable.dtr-inline.collapsed > tbody > tr.parent > td.dtr-control:before {
    background-color: var(--warn-700);
}

ul.dtr-details {
    list-style: none;
    margin: .25rem 0;
    padding: 0;
    width: 100%;
}
ul.dtr-details .dtr-row {
    display: flex;
    gap: 1rem;
    padding: .375rem 0;
    border-top: 1px solid var(--border);
}
ul.dtr-details .dtr-row:first-child { border-top: none; }
.dtr-label {
    flex: 0 0 40%;
    max-width: 40%;
    color: var(--text-muted);
    font-size: .8125rem;
}
.dtr-value { flex: 1 1 auto; min-width: 0; overflow-wrap: break-word; font-size: .875rem; }
.dtr-value img { max-width: 100px; max-height: 50px; }

/* Plotly sizes the chart itself; this just gives it room inside the card and
   keeps it from touching the table above. */
.obs-chart {
    padding: .5rem .5rem .25rem;
    border-top: 1px solid var(--border);
    min-height: 220px;
}

/* --- Date picker popup ---------------------------------------------------- */

.datepicker {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-card);
    color: var(--text);
}
.datepicker table tr td, .datepicker table tr th { color: var(--text); border-radius: var(--radius-md); }
.datepicker table tr td.day:hover { background: var(--surface-sunken); }
.datepicker table tr td.active,
.datepicker table tr td.active:hover { background: var(--brand-fill) !important; color: #fff !important; }
.datepicker table tr td.old, .datepicker table tr td.new { color: var(--text-faint); }


/* --- Filter bar ----------------------------------------------------------
   Deliberately not sticky: the app bar above it is itself sticky and its
   height varies with whether the chip row is present, so a second sticky
   element would need a magic offset that goes wrong on half the screens. */

.filter-bar {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin-bottom: .75rem;
}
.filter-bar .form-control { min-width: 0; }
.filter-bar select.form-control { flex: 0 0 auto; width: auto; max-width: 45%; }

.filter-check {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    min-height: var(--touch);
    margin: 0;
    padding: 0 .5rem;
    color: var(--text);
    font-size: .9375rem;
    white-space: nowrap;
    cursor: pointer;
}
.filter-check input[type="checkbox"] { width: 20px; height: 20px; margin: 0; }

/* --- Selectable list row -------------------------------------------------- */

.select-row {
    display: flex;
    align-items: flex-start;
    gap: .25rem;
    margin-bottom: .75rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    overflow: hidden;
}

.select-row-all {
    align-items: center;
    cursor: pointer;
    margin-bottom: 1rem;
}
.select-all-label { font-weight: 600; padding-right: .875rem; }

/* A real target: 48px of clickable label around a 22px box. transform:scale()
   grows the paint only, which is what the previous markup did. */
.select-hit {
    flex: 0 0 auto;
    width: var(--touch);
    height: var(--touch);
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}
.select-hit input[type="checkbox"] { width: 22px; height: 22px; margin: 0; }

.select-row-main {
    flex: 1 1 auto;
    min-width: 0;
    display: block;
    padding: .875rem .875rem .875rem 0;
    color: var(--text);
}
a.select-row-main:hover, a.select-row-main:focus { color: var(--text); text-decoration: none; }
a.select-row-main:active { opacity: .7; }

.select-row-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: .75rem;
    margin-bottom: .375rem;
}
.select-row-title { font-size: 1.0625rem; font-weight: 600; }
.select-row-meta { margin: 0; color: var(--text-muted); font-size: .9375rem; }
.select-row .chip-row { margin-top: 0; }

.patient-photo {
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    object-fit: cover;
    border-radius: 50%;
}

/* A witness row the signature will not cover. Dimmed rather than hidden, so
   the fields stay readable and the state is obvious while scrolling. */
.witness-item.is-unselected { opacity: .5; }
.witness-item .select-row-main { padding-top: .875rem; }

/* --- Medication row (patient screen) ------------------------------------- */

.patient-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin-bottom: 1rem;
}
.patient-actions .btn { flex: 1 1 auto; }

.med-item {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    margin-bottom: .75rem;
    overflow: hidden;
}
/* Needs attention: a tint plus a left edge, so it is not colour alone. */
.med-item-witness {
    background: var(--warn-050);
    border-color: var(--warn-050);
    border-left: 4px solid var(--warn-700);
}

.med-item-main {
    display: block;
    padding: 1rem;
    min-height: var(--touch);
    color: var(--text);
}
a.med-item-main:hover,
a.med-item-main:focus { color: var(--text); text-decoration: none; }
a.med-item-main:active { opacity: .7; }

.med-item-title {
    font-size: 1.0625rem;
    font-weight: 600;
    margin-bottom: .25rem;
}
.med-item-sig { margin: 0 0 .25rem; overflow-wrap: break-word; }
.med-item-meta { margin: 0; color: var(--text-muted); font-size: .8125rem; }
.med-item .chip-row { margin-top: 0; }
.med-item-rx { margin: 0 .5rem .5rem; }

/* Loading, empty, first-run and dead-end states. An icon states the outcome,
   a title names it, one line explains it. */
.state-panel {
    text-align: center;
    padding: 3rem 1rem;
    max-width: 380px;
    margin: 0 auto;
}
.state-panel > i {
    font-size: 2rem;
    color: var(--text-faint);
    margin-bottom: 1rem;
    display: block;
}
.state-panel h2 {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--text);
    margin-bottom: .5rem;
}
.state-panel p {
    color: var(--text-muted);
    margin-bottom: 1.5rem;
}

/* Actions that must exist but must not compete with the primary. Text-weight,
   still 44px tall so it stays a real target. */
.btn-quiet {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: .5rem .75rem;
    background: none;
    border: none;
    border-radius: var(--radius-md);
    color: var(--brand-700);
    font-weight: 500;
}
.btn-quiet:hover, .btn-quiet:focus {
    color: var(--brand-900);
    background: var(--surface-sunken);
    text-decoration: none;
}

/* --- Full-width media ----------------------------------------------------
   A scanned prescription, a PDF or a patient photo. These were wrapped in a
   cyan `card text-white bg-info`, which put a coloured frame around content
   that is entirely image - decoration the image had to fight. */

.media-frame {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    margin-bottom: 1rem;
}
.media-frame img,
.media-frame embed {
    display: block;
    width: 100%;
    height: auto;
    max-width: 100%;
}
.media-frame embed { min-height: 70vh; }

/* --- Long-form copy ------------------------------------------------------
   Marketing and legal pages: the terms and privacy documents are hundreds of
   lines of prose and need a comfortable measure, not the app's card layout. */

.prose { color: var(--text); padding-bottom: 1rem; }
.prose h1 { font-size: 1.5rem; font-weight: 700; margin: 0 0 1rem; }
.prose h2 { font-size: 1.25rem; font-weight: 600; margin: 1.75rem 0 .5rem; }
.prose h3, .prose h4 { font-size: 1.0625rem; font-weight: 600; margin: 1.5rem 0 .5rem; }
.prose p, .prose li { color: var(--text); line-height: 1.65; }
.prose p { margin-bottom: 1rem; }
.prose ul, .prose ol { padding-left: 1.25rem; margin-bottom: 1rem; }
.prose li { margin-bottom: .375rem; }
.prose a { overflow-wrap: break-word; }

/* --- Subscription plans --------------------------------------------------- */

.plan-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 1.25rem;
    margin-bottom: 1rem;
}
.plan-card.is-current { border-color: var(--accent-500); }
.plan-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    margin-bottom: .25rem;
}
.plan-name { font-size: 1.125rem; font-weight: 600; }
.plan-price { font-size: 1.75rem; font-weight: 700; margin: 0 0 1rem; }
.plan-per { font-size: .875rem; font-weight: 400; color: var(--text-muted); }
.plan-note { color: var(--text-muted); font-size: .875rem; margin-bottom: .75rem; }
.plan-head .chip { margin: 0; }

/* Sign-in screens.
   --------------------------------------------------------------------------
   Signing in happens twice - once for the store, once for the employee - and
   the two forms are otherwise identical, so staff type the wrong credentials
   into the wrong box. Each screen therefore sets its own --auth-fill, which
   drives the header band, the icon and the submit button together, and it is
   backed by a different icon and an explicit step count so the difference is
   carried by shape and words too, not colour alone. */

.auth-screen--store    { --auth-fill: var(--brand-fill); }
.auth-screen--employee { --auth-fill: #14707e; }   /* 5.7:1 against white */

.auth-card {
    width: 100%;
    max-width: 380px;
    margin: 2rem auto;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-card);
    overflow: hidden;
}

.auth-head {
    display: flex;
    align-items: center;
    gap: .875rem;
    padding: 1.125rem 1.25rem;
    background: var(--auth-fill);
    color: #fff;
}
.auth-head i { font-size: 1.5rem; }
.auth-head h1 {
    margin: 0;
    font-size: 1.1875rem;
    font-weight: 600;
    color: #fff;
}
.auth-step {
    margin: .125rem 0 0;
    font-size: .8125rem;
    color: #fff;
    opacity: .85;
}

.auth-body { padding: 1.25rem; }
.auth-card .form-group { margin-bottom: 1rem; }
.auth-card label {
    display: block;
    margin-bottom: .375rem;
    font-size: .875rem;
}
.auth-card .btn-primary,
.auth-card .btn-primary:hover,
.auth-card .btn-primary:focus,
.auth-card .btn-primary:not(:disabled):not(.disabled):active {
    background-color: var(--auth-fill);
    border-color: var(--auth-fill);
    color: #fff;
}
.auth-card .btn-primary:hover,
.auth-card .btn-primary:focus { filter: brightness(.88); }