/* ============================================================================
   PONV Study eCRF — single design system
   ----------------------------------------------------------------------------
   This file is the ONLY place UI tokens and shared components are defined.
   Do not add a <style> block to a view: add the component here instead.

   Bedside screens are phones and tablets, so the whole system is built on a
   16px base, a 44px minimum touch target and a three-breakpoint grid.

   Contents
     1.  Tokens
     2.  Base + typography
     3.  Bootstrap alignment
     4.  Page shell + page header
     5.  Cards and panels
     6.  Buttons
     7.  Form fields
     8.  Badges and status pills
     9.  Tables
     10. Data lists, summary boxes, criteria, assessments
     11. Empty states, alerts, danger zone
     12. Switch
     13. Clinical form controls (segmented options, scores, repeatables)
     14. Responsive
   ========================================================================== */


/* ============================================================================
   1. TOKENS
   ========================================================================== */

:root {
    /* Brand - UiTM corporate identity --------------------------------------- */
    /* Sampled from the official UiTM crest: Prussian blue is the primary, crest
       violet the secondary and gold an accent only. Brand tones are never used
       as status tones. */
    --brand: #043382;
    --brand-dark: #02214f;
    --brand-wash: #eef2fb;
    --brand-line: #c9d5ec;

    /* Brand - UiTM crest violet (secondary) ---------------------------------- */
    --brand-navy: #591979;
    --brand-navy-dark: #3a0f52;
    --brand-navy-wash: #f3edf9;
    --brand-navy-line: #ddcfee;

    /* Brand - UiTM gold (accent only; never a surface or a status colour) --- */
    --brand-accent: #fbbf07;

    /* Brand aliases --------------------------------------------------------- */
    --brand-primary: var(--brand);
    --brand-primary-hover: var(--brand-dark);
    --brand-secondary: var(--brand-navy);
    --brand-secondary-hover: var(--brand-navy-dark);
    --brand-focus-ring: rgba(4,51,130,.12);
    --brand-focus-ring-strong: rgba(4,51,130,.20);

    /* Ink ------------------------------------------------------------------ */
    --ink: #172033;
    --ink-2: #26364d;
    --ink-3: #43536b;
    --ink-4: #61718a;
    --ink-5: #8697ad;

    /* Surfaces ------------------------------------------------------------- */
    --surface: #ffffff;
    --surface-sunk: #f8fafc;
    --surface-app: #f8f6f2;
    --line: #d9e2ef;
    --line-soft: #e4eaf2;
    --line-strong: #bdcada;

    /* Semantic ------------------------------------------------------------- */
    --ok: #176b3a;
    --ok-wash: #e8f7ef;
    --ok-line: #bfe0cd;

    --warn: #8a4b00;
    --warn-wash: #fff4dc;
    --warn-line: #f3ddb4;

    --danger: #b42318;
    --danger-wash: #fdeceb;
    --danger-line: #f5cdc9;

    --code: #591979;
    --code-wash: #f3edf9;
    --code-line: #ddcfee;

    /* Information - semantic blue, deliberately not a brand colour ---------- */
    --info: #0284c7;
    --info-wash: #eaf6fd;
    --info-line: #bfe3f7;

    /* Type ----------------------------------------------------------------- */
    --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --font-data: Consolas, "SFMono-Regular", "Courier New", monospace;

    --fs-xs: 0.8125rem; /* 13px — smallest permitted size */
    --fs-sm: 0.875rem; /* 14px */
    --fs-base: 1rem; /* 16px */
    --fs-md: 1.0625rem; /* 17px */
    --fs-lg: 1.15rem; /* 18px */
    --fs-xl: 1.4rem; /* 22px */
    --fs-2xl: 1.8rem; /* 29px — page title */

    /* Space ---------------------------------------------------------------- */
    --sp-1: 4px;
    --sp-2: 8px;
    --sp-3: 12px;
    --sp-4: 16px;
    --sp-5: 20px;
    --sp-6: 24px;
    --sp-7: 32px;

    /* Radius --------------------------------------------------------------- */
    --r-sm: 8px;
    --r-md: 10px;
    --r-lg: 20px;
    --r-pill: 999px;

    /* Elevation ------------------------------------------------------------ */
    --shadow-sm: 0 1px 2px rgba(89,25,121,.05), 0 2px 6px rgba(4,51,130,.06);
    --shadow-md: 0 2px 4px rgba(89,25,121,.05), 0 18px 40px -14px rgba(89,25,121,.16);

    /* Controls — 44px is the floor for anything tappable -------------------- */
    --control-h: 46px;
    --control-h-sm: 44px;

    /* Layout --------------------------------------------------------------- */
    --page-max: 1180px;
    --page-max-narrow: 900px;
}


/* ============================================================================
   2. BASE + TYPOGRAPHY
   ========================================================================== */

body {
    margin: 0;
    min-height: 100vh;
    background:
        radial-gradient(1100px 600px at 6% -8%, rgba(251,191,7,.10), transparent 60%),
        radial-gradient(900px 600px at 104% 104%, rgba(4,51,130,.10), transparent 55%),
        var(--surface-app);
    color: var(--ink);
    font-family: var(--font-sans);
    font-size: var(--fs-base);
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
    color: var(--ink);
    letter-spacing: -.015em;
}

.text-data {
    font-family: var(--font-data);
}


/* ============================================================================
   3. BOOTSTRAP ALIGNMENT
   Bootstrap still ships the grid, tables and utilities. These rules pull its
   components onto the tokens above so a .btn and a .btn-action look the same.
   ========================================================================== */

/* Bootstrap hard-codes #0d6efd for links, check controls and its own primary
   utilities. Re-point its variables here (the same technique as the
   --bs-btn-* overrides below) so none of that blue leaks past the theme. */
:root {
    --bs-primary: var(--brand);
    --bs-primary-rgb: 89,25,121;
    --bs-link-color: var(--brand);
    --bs-link-color-rgb: 89,25,121;
    --bs-link-hover-color: var(--brand-dark);
    --bs-link-hover-color-rgb: 58,15,82;
}

.form-check-input:checked {
    background-color: var(--brand);
    border-color: var(--brand);
}

.form-check-input:focus {
    border-color: var(--brand);
    box-shadow: 0 0 0 3px var(--brand-focus-ring);
}

/* Native checkboxes and radios (e.g. .checkbox-grid) never get Bootstrap's
   appearance:none treatment, so they need accent-color instead. */
input[type=checkbox],
input[type=radio] {
    accent-color: var(--brand);
}

/* Keyboard focus net: links and buttons get the same visible purple ring the
   form controls already have. Inputs and custom option groups keep their own
   more specific focus rules above. */
a:focus-visible,
button:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
    outline: 3px solid var(--brand-focus-ring-strong);
    outline-offset: 2px;
}

.btn {
    min-height: var(--control-h-sm);
    border-radius: var(--r-sm);
    font-size: var(--fs-sm);
    font-weight: 650;
}

.btn-lg {
    min-height: var(--control-h);
    font-size: var(--fs-base);
}

.btn-primary {
    --bs-btn-bg: #043382;
    --bs-btn-border-color: #043382;
    --bs-btn-hover-bg: #02214f;
    --bs-btn-hover-border-color: #02214f;
    --bs-btn-active-bg: #02214f;
    --bs-btn-active-border-color: #02214f;
    /* Login language: blue-to-violet gradient, lift + shadow-deepen on hover. */
    background-image: linear-gradient(135deg, var(--brand) 0%, var(--brand-navy) 100%);
    box-shadow: 0 12px 24px -10px rgba(4,51,130,.55);
}

    .btn-primary:hover {
        transform: translateY(-1px);
        box-shadow: 0 16px 30px -10px rgba(4,51,130,.6);
    }

    .btn-primary:active {
        transform: none;
    }

.btn-outline-primary {
    --bs-btn-color: var(--brand);
    --bs-btn-border-color: var(--brand-line);
    --bs-btn-hover-bg: var(--brand-wash);
    --bs-btn-hover-color: var(--brand-dark);
    --bs-btn-hover-border-color: var(--brand);
}

.form-control, .form-select {
    min-height: var(--control-h);
    border-color: var(--line-strong);
    border-radius: var(--r-md);
    font-size: var(--fs-base);
}

    .form-control:focus, .form-select:focus {
        border-color: var(--brand);
        box-shadow: 0 0 0 3px var(--brand-focus-ring);
    }

.form-check-input {
    width: 1.35em;
    height: 1.35em;
}

.form-label {
    color: var(--ink-2);
    font-size: var(--fs-sm);
    font-weight: 650;
}

.card {
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-sm);
}

.card-header {
    border-bottom: 1px solid var(--line-soft);
    background: var(--surface-sunk);
    color: var(--ink);
    font-size: var(--fs-md);
    font-weight: 700;
}

.table {
    --bs-table-color: var(--ink-2);
    font-size: var(--fs-sm);
}

    .table > thead th {
        color: var(--brand);
        font-size: var(--fs-xs);
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: .04em;
    }

.alert {
    border-radius: var(--r-md);
    font-size: var(--fs-sm);
}


/* ============================================================================
   4. PAGE SHELL + PAGE HEADER
   Every page body is one of these two wrappers. Nothing else sets max-width.
   ========================================================================== */

.page,
.clinical-page,
.patients-page,
.patient-details-page,
.screening-page,
.screening-details-page,
.users-page,
.create-user-page,
.settings-page {
    max-width: var(--page-max);
    margin: 0 auto;
    color: var(--ink);
}

.page-narrow,
.clinical-page-narrow,
.create-user-page,
.settings-page {
    max-width: var(--page-max-narrow);
}

.page-header,
.clinical-header,
.patient-header,
.screening-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--sp-4);
    margin: 0 0 var(--sp-6);
}

.page-title-wrap,
.patient-title-wrap,
.screening-title-wrap {
    display: flex;
    align-items: flex-start;
    gap: var(--sp-3);
    min-width: 0;
}

/* The clinical header puts the icon and copy as direct children. */
.clinical-header {
    align-items: center;
}

.page-icon,
.clinical-header-icon,
.patient-icon,
.screening-icon {
    display: grid;
    place-items: center;
    flex: 0 0 48px;
    width: 48px;
    height: 48px;
    border: 1px solid var(--brand-line);
    border-radius: var(--r-lg);
    background: var(--brand-wash);
    color: var(--brand);
    font-size: var(--fs-lg);
}

.page-title,
.clinical-header h1,
.patient-title,
.screening-title {
    margin: 0;
    color: var(--ink);
    font-size: var(--fs-2xl);
    font-weight: 750;
    line-height: 1.2;
    letter-spacing: -.025em;
}

.page-subtitle,
.clinical-header p,
.patient-subtitle,
.screening-subtitle {
    margin: var(--sp-1) 0 0;
    color: var(--ink-4);
    font-size: var(--fs-sm);
}

/* Header-right slot: badges and the page's primary action. */
.clinical-header > .stage-badge {
    margin-left: auto;
}

.page-header-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--sp-2);
    margin-left: auto;
}

/* Monospace record identifier shown under a page title. */
.patient-study-id,
.screening-number,
.study-id {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-1);
    color: var(--brand-dark);
    font-family: var(--font-data);
    font-size: var(--fs-sm);
    font-weight: 700;
    text-decoration: none;
}

.patient-study-id,
.screening-details-page .screening-number {
    margin-top: var(--sp-2);
    padding: 4px 9px;
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    background: var(--surface-sunk);
}

.study-id:hover {
    color: var(--brand);
    text-decoration: underline;
}

.study-id-empty {
    color: var(--ink-5);
    font-family: var(--font-data);
    font-size: var(--fs-sm);
}


/* ============================================================================
   5. CARDS AND PANELS
   One card. .clinical-panel is the form variant (padded body, inset heading);
   .detail-card is the read variant (header strip + body).
   ========================================================================== */

.detail-card,
.form-card,
.settings-card,
.users-card,
.patients-card,
.screening-card {
    overflow: hidden;
    margin-bottom: var(--sp-5);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    background: var(--surface);
    box-shadow: var(--shadow-sm), var(--shadow-md);
}

.detail-card-header,
.form-card-header,
.settings-card-header,
.users-card-header,
.patients-card-header,
.screening-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-3);
    min-height: 60px;
    padding: var(--sp-3) var(--sp-5);
    border-bottom: 1px solid var(--line-soft);
    background: var(--surface-sunk);
}

.detail-card-heading,
.form-card-title-wrap,
.users-card-title,
.patients-card-title,
.screening-card-title {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    min-width: 0;
}

.detail-card-icon,
.form-card-header-icon,
.settings-card-icon {
    display: grid;
    place-items: center;
    flex: 0 0 34px;
    width: 34px;
    height: 34px;
    border-radius: var(--r-sm);
    font-size: var(--fs-sm);
}

.icon-blue {
    border: 1px solid var(--brand-line);
    background: var(--brand-wash);
    color: var(--brand);
}

.icon-green {
    border: 1px solid var(--ok-line);
    background: var(--ok-wash);
    color: var(--ok);
}

.icon-amber {
    border: 1px solid var(--warn-line);
    background: var(--warn-wash);
    color: var(--warn);
}

.icon-red {
    border: 1px solid var(--danger-line);
    background: var(--danger-wash);
    color: var(--danger);
}

.icon-violet {
    border: 1px solid var(--code-line);
    background: var(--code-wash);
    color: var(--code);
}

.detail-card-title,
.form-card-title,
.settings-card-title,
.users-card-title h3,
.patients-card-title h3,
.screening-card-title h3 {
    margin: 0;
    color: var(--ink);
    font-size: var(--fs-md);
    font-weight: 700;
}

.detail-card-description,
.form-card-description,
.settings-card-description {
    margin: 2px 0 0;
    color: var(--ink-4);
    font-size: var(--fs-sm);
}

.detail-card-body,
.form-card-body,
.settings-card-body {
    padding: var(--sp-5);
}

/* Row count chip in a list card header. */
.users-count,
.patients-card-title span,
.screening-count,
.patient-total {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    padding: 3px 10px;
    border: 1px solid var(--line);
    border-radius: var(--r-pill);
    background: var(--surface);
    color: var(--ink-4);
    font-size: var(--fs-xs);
    font-weight: 700;
}

.patient-total-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--ok);
}

/* Clinical form panel. */
.clinical-form {
    display: grid;
    gap: var(--sp-5);
}

.clinical-panel {
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    background: var(--surface);
    padding: var(--sp-6);
    box-shadow: var(--shadow-sm), var(--shadow-md);
}

.clinical-panel-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--sp-4);
    margin: calc(var(--sp-6) * -1) calc(var(--sp-6) * -1) var(--sp-6);
    padding: var(--sp-4) var(--sp-6);
    border-bottom: 1px solid var(--line-soft);
    background: var(--surface-sunk);
    border-radius: var(--r-lg) var(--r-lg) 0 0;
}

    .clinical-panel-heading h2 {
        margin: 0;
        font-size: var(--fs-md);
        font-weight: 750;
    }

    .clinical-panel-heading p {
        margin: 2px 0 0;
        color: var(--ink-4);
        font-size: var(--fs-sm);
    }


/* ============================================================================
   6. BUTTONS
   One implementation. .btn-action is the base; the -primary/-success/-danger
   modifiers set colour. The legacy per-page names are aliased onto it so the
   markup did not have to change in one pass.
   ========================================================================== */

.btn-action,
.btn-details,
.btn-open,
.btn-void,
.btn-user-action,
.btn-save,
.btn-create,
.btn-back,
.btn-new-account,
.btn-new-screening {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--sp-2);
    min-height: var(--control-h-sm);
    padding: 0 var(--sp-4);
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    background: var(--surface);
    color: var(--ink-2);
    font-size: var(--fs-sm);
    font-weight: 650;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: background .15s ease, border-color .15s ease, color .15s ease, transform .1s ease;
}

    .btn-action:hover,
    .btn-details:hover,
    .btn-open:hover,
    .btn-user-action:hover,
    .btn-back:hover {
        border-color: var(--line-strong);
        background: var(--surface-sunk);
        color: var(--ink);
    }

/* Primary */
.btn-create,
.btn-save,
.btn-new-account,
.btn-new-screening,
.btn-primary-action {
    border-color: var(--brand);
    background: var(--brand);
    color: #fff;
}

    .btn-create:hover,
    .btn-save:hover,
    .btn-new-account:hover,
    .btn-new-screening:hover,
    .btn-primary-action:hover {
        border-color: var(--brand-dark);
        background: var(--brand-dark);
        color: #fff;
    }

/* Pressed and disabled affordances for the whole button family. (.btn gets
   Bootstrap's own active/disabled treatment.) */
.btn-action:active,
.btn-details:active,
.btn-open:active,
.btn-void:active,
.btn-user-action:active,
.btn-save:active,
.btn-create:active,
.btn-back:active,
.btn-new-account:active,
.btn-new-screening:active,
.btn-primary-action:active {
    transform: translateY(1px);
}

.btn-action:disabled,
.btn-details:disabled,
.btn-open:disabled,
.btn-void:disabled,
.btn-user-action:disabled,
.btn-save:disabled,
.btn-create:disabled,
.btn-back:disabled,
.btn-new-account:disabled,
.btn-new-screening:disabled,
.btn-primary-action:disabled {
    opacity: .55;
    cursor: not-allowed;
    transform: none;
}

/* Tinted secondary */
.btn-open-primary,
.btn-reactivate {
    border-color: var(--brand-line);
    background: var(--brand-wash);
    color: var(--brand);
}

    .btn-open-primary:hover,
    .btn-reactivate:hover {
        border-color: var(--brand);
        background: var(--brand-wash);
        color: var(--brand-dark);
    }

.btn-success-action {
    border-color: var(--ok-line);
    background: var(--ok-wash);
    color: var(--ok);
}

    .btn-success-action:hover {
        border-color: var(--ok);
        background: var(--ok-wash);
        color: var(--ok);
    }

/* Destructive */
.btn-void,
.btn-danger-action,
.btn-deactivate {
    border-color: var(--danger-line);
    background: var(--surface);
    color: var(--danger);
}

    .btn-void:hover,
    .btn-danger-action:hover,
    .btn-deactivate:hover {
        border-color: var(--danger);
        background: var(--danger);
        color: #fff;
    }

/* Action bars */
.clinical-actions,
.form-actions,
.action-bar,
.assessment-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: var(--sp-3);
}

    .clinical-actions .btn {
        min-height: var(--control-h);
        padding: 10px var(--sp-5);
        font-weight: 700;
    }

.sticky-actions {
    position: sticky;
    bottom: var(--sp-3);
    z-index: 10;
    padding: var(--sp-3);
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    background: rgba(255,255,255,.96);
    box-shadow: 0 10px 30px rgba(25,42,70,.12);
}


/* ============================================================================
   7. FORM FIELDS
   .clinical-field is the canonical field. .field-label / .field-control /
   .field-help are the same thing with the class on each part.
   ========================================================================== */

.clinical-grid,
.form-grid,
.settings-grid {
    display: grid;
    gap: var(--sp-5);
}

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

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

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

.clinical-field {
    min-width: 0;
}

.clinical-field-wide,
.field-full {
    grid-column: 1 / -1;
}

.clinical-field label,
.clinical-field legend,
.field-label {
    display: block;
    margin: 0 0 var(--sp-2);
    color: var(--ink-2);
    font-size: var(--fs-sm);
    font-weight: 700;
}

.clinical-field input:not([type=radio]):not([type=checkbox]),
.clinical-field select,
.clinical-field textarea,
.field-control,
.repeatable-row input,
.repeatable-row select,
.antiemetic-row input,
.antiemetic-row select {
    width: 100%;
    min-height: var(--control-h);
    padding: 10px var(--sp-3);
    border: 1px solid var(--line-strong);
    border-radius: var(--r-md);
    background: var(--surface);
    color: var(--ink);
    font-family: inherit;
    font-size: var(--fs-base);
    transition: border-color .15s ease, box-shadow .15s ease;
}

.clinical-field textarea, .field-control textarea {
    resize: vertical;
}

    .clinical-field input:focus,
    .clinical-field select:focus,
    .clinical-field textarea:focus,
    .field-control:focus,
    .repeatable-row input:focus,
    .repeatable-row select:focus,
    .antiemetic-row input:focus,
    .antiemetic-row select:focus {
        outline: 3px solid var(--brand-focus-ring);
        border-color: var(--brand);
    }

    /* Subtle hover affordance on idle controls. */
    .clinical-field input:hover:not(:focus),
    .clinical-field select:hover:not(:focus),
    .clinical-field textarea:hover:not(:focus),
    .field-control:hover:not(:focus),
    .repeatable-row input:hover:not(:focus),
    .repeatable-row select:hover:not(:focus),
    .antiemetic-row input:hover:not(:focus),
    .antiemetic-row select:hover:not(:focus),
    .form-control:hover:not(:focus),
    .form-select:hover:not(:focus) {
        border-color: var(--ink-5);
    }

.clinical-field small,
.factor-row small,
.field-help {
    display: block;
    margin-top: var(--sp-2);
    color: var(--ink-4);
    font-size: var(--fs-sm);
    line-height: 1.45;
}

/* Validation */
.clinical-field > span:not(.input-with-unit),
.field-validation-error {
    display: block;
    margin-top: var(--sp-2);
    color: var(--danger);
    font-size: var(--fs-sm);
    font-weight: 600;
}

.input-validation-error {
    border-color: var(--danger) !important;
    background: var(--danger-wash);
}

.validation-summary-errors {
    margin-bottom: var(--sp-4);
    padding: var(--sp-3) var(--sp-4);
    border: 1px solid var(--danger-line);
    border-radius: var(--r-md);
    background: var(--danger-wash);
    color: var(--danger);
    font-size: var(--fs-sm);
}

    .validation-summary-errors ul {
        margin: 0;
        padding-left: var(--sp-5);
    }

/* Unit suffix */
.input-with-unit {
    display: flex;
    align-items: stretch;
}

    .input-with-unit input {
        border-radius: var(--r-md) 0 0 var(--r-md) !important;
    }

    .input-with-unit > span {
        display: grid;
        place-items: center;
        min-width: 60px;
        padding: 0 var(--sp-3);
        border: 1px solid var(--line-strong);
        border-left: 0;
        border-radius: 0 var(--r-md) var(--r-md) 0;
        background: var(--surface-sunk);
        color: var(--ink-4);
        font-weight: 650;
    }

/* Read-only computed value */
.calculated-value,
.derived-answer {
    min-height: var(--control-h);
    padding: 11px var(--sp-3);
    border-radius: var(--r-md);
    background: var(--brand-wash);
    color: var(--brand-dark);
    font-weight: 700;
}

.coding-form-fields {
    border: 0;
    min-width: 0;
    padding: 0;
}


/* ============================================================================
   8. BADGES AND STATUS PILLS
   One pill shape; colour comes from a single semantic set used app-wide.
   ========================================================================== */

.badge-soft,
.stage-badge,
.workflow-status,
.eligibility-badge,
.role-badge,
.status-badge-custom,
.restricted-badge,
.voided-label {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--sp-2);
    min-height: 28px;
    padding: 4px 11px;
    border: 1px solid transparent;
    border-radius: var(--r-pill);
    font-size: var(--fs-xs);
    font-weight: 700;
    white-space: nowrap;
    vertical-align: middle;
}

/* Leading dot for pills that carry one. */
.status-badge-custom:before,
.workflow-status:before,
.eligibility-badge:before,
.screening-table .badge-soft:before {
    content: "";
    flex: 0 0 6px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
}

/* Semantic colours — the only place these pairings are defined. */
.badge-green,
.stage-complete,
.status-success, .status-completed,
.eligibility-badge.eligible,
.status-active,
.btn-reactivate ~ .status-active {
    color: var(--ok);
    background: var(--ok-wash);
    border-color: var(--ok-line);
}

.badge-amber,
.stage-draft,
.status-warning, .status-due, .status-duesoon {
    color: var(--warn);
    background: var(--warn-wash);
    border-color: var(--warn-line);
}

.badge-red,
.status-danger, .status-overdue,
.eligibility-badge.not-eligible,
.status-locked,
.restricted-badge {
    color: var(--danger);
    background: var(--danger-wash);
    border-color: var(--danger-line);
}

.badge-violet,
.role-badge {
    color: var(--code);
    background: var(--code-wash);
    border-color: var(--code-line);
}

.badge-blue,
.status-primary {
    color: var(--brand);
    background: var(--brand-wash);
    border-color: var(--brand-line);
}

.badge-slate,
.status-secondary, .status-new,
.status-inactive,
.voided-label,
.workflow-status {
    color: var(--ink-3);
    background: var(--surface-sunk);
    border-color: var(--line);
}

/* A workflow pill that also carries a semantic class keeps the semantic one. */
.workflow-status.status-success, .workflow-status.status-completed {
    color: var(--ok);
    background: var(--ok-wash);
    border-color: var(--ok-line);
}

.workflow-status.status-warning, .workflow-status.status-due, .workflow-status.status-duesoon {
    color: var(--warn);
    background: var(--warn-wash);
    border-color: var(--warn-line);
}

.workflow-status.status-danger, .workflow-status.status-overdue {
    color: var(--danger);
    background: var(--danger-wash);
    border-color: var(--danger-line);
}

.workflow-status.status-primary {
    color: var(--brand);
    background: var(--brand-wash);
    border-color: var(--brand-line);
}


/* ============================================================================
   9. TABLES
   ========================================================================== */

.users-table,
.patients-table,
.screening-table,
.data-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--fs-sm);
}

    .users-table thead th,
    .patients-table thead th,
    .screening-table thead th,
    .data-table thead th {
        height: 46px;
        padding: 0 var(--sp-5);
        border-bottom: 1px solid var(--line);
        background: var(--surface-sunk);
        color: var(--brand);
        font-size: var(--fs-xs);
        font-weight: 700;
        text-align: left;
        text-transform: uppercase;
        letter-spacing: .04em;
        white-space: nowrap;
    }

    .users-table tbody td,
    .patients-table tbody td,
    .screening-table tbody td,
    .data-table tbody td {
        padding: var(--sp-3) var(--sp-5);
        border-bottom: 1px solid var(--line-soft);
        color: var(--ink-2);
        vertical-align: middle;
    }

    .users-table tbody tr:last-child td,
    .patients-table tbody tr:last-child td,
    .screening-table tbody tr:last-child td,
    .data-table tbody tr:last-child td {
        border-bottom: none;
    }

    .users-table tbody tr,
    .patients-table tbody tr,
    .screening-table tbody tr,
    .data-table tbody tr {
        transition: background .15s ease;
    }

        .users-table tbody tr:hover,
        .patients-table tbody tr:hover,
        .screening-table tbody tr:hover,
        .data-table tbody tr:hover {
            background: var(--surface-sunk);
        }

.screening-row-voided {
    opacity: .62;
}

    .screening-row-voided:hover {
        opacity: 1;
    }

/* Opt-in sticky header for long worklists: add .data-table-sticky to the table
   element itself. The header row is already opaque, so nothing shows through. */
.data-table.data-table-sticky thead th {
    position: sticky;
    top: 0;
    z-index: 1;
}

/* Row-level action group inside a table cell (Patient list: Details + Delete). Keeps the buttons on one
   line in a right-aligned cell and lets them wrap — never overflow — on a narrow phone. */
.table-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: var(--sp-2);
}

/* Identity cell */
.user-identity {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
}

.user-avatar {
    display: grid;
    place-items: center;
    flex: 0 0 36px;
    width: 36px;
    height: 36px;
    border: 1px solid var(--code-line);
    border-radius: 50%;
    background: var(--code-wash);
    color: var(--code);
    font-size: var(--fs-xs);
    font-weight: 700;
}

/* Header avatar only - avatars in tables keep the --code violet. */
.user-menu .user-avatar {
    border-color: var(--brand-navy-dark);
    background: var(--brand-navy);
    color: #fff;
}

.username, .fullname, .email-value,
.enrolled-date, .screening-date {
    color: var(--ink-2);
    font-size: var(--fs-sm);
}

.fullname, .screening-date small {
    display: block;
    color: var(--ink-4);
    font-size: var(--fs-xs);
}

/* Apfel score dots */
.apfel-wrap, .apfel-score-wrap {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
}

.apfel-dots {
    display: flex;
    align-items: center;
    gap: 3px;
}

.apfel-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--line);
}

    .apfel-dot.active {
        background: var(--brand);
    }

.apfel-low .apfel-dot.active {
    background: var(--ok);
}

.apfel-moderate .apfel-dot.active {
    background: var(--warn);
}

.apfel-high .apfel-dot.active {
    background: var(--danger);
}

.apfel-value, .apfel-score-value {
    color: var(--brand-dark);
    font-size: var(--fs-md);
    font-weight: 700;
    line-height: 1;
}


/* ============================================================================
   10. DATA LISTS, SUMMARY BOXES, CRITERIA, ASSESSMENTS
   ========================================================================== */

.data-list {
    margin: 0;
}

.data-row {
    display: grid;
    grid-template-columns: 200px minmax(0,1fr);
    gap: var(--sp-4);
    padding: var(--sp-3) 0;
    border-bottom: 1px solid var(--line-soft);
}

    .data-row:first-child {
        padding-top: 0;
    }

    .data-row:last-child {
        padding-bottom: 0;
        border-bottom: none;
    }

.data-label {
    color: var(--ink-4);
    font-size: var(--fs-sm);
    font-weight: 650;
}

.data-value {
    color: var(--ink-2);
    font-size: var(--fs-base);
}

.summary-boxes,
.outcome-summary {
    display: grid;
    gap: var(--sp-3);
}

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

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

.summary-box,
.outcome-box {
    padding: var(--sp-3) var(--sp-4);
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    background: var(--surface-sunk);
}

.summary-label,
.outcome-label {
    color: var(--ink-4);
    font-size: var(--fs-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.summary-value,
.outcome-value {
    margin-top: var(--sp-1);
    color: var(--ink-2);
    font-size: var(--fs-base);
    font-weight: 650;
}

/* Stat tiles (report summaries) */
.stat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: var(--sp-4);
    margin-bottom: var(--sp-5);
}

.stat-tile {
    padding: var(--sp-5);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    background: var(--surface);
    box-shadow: var(--shadow-sm);
}

.stat-value {
    color: var(--ink);
    font-size: 2rem;
    font-weight: 750;
    line-height: 1;
}

.stat-label {
    margin-top: var(--sp-2);
    color: var(--ink-4);
    font-size: var(--fs-sm);
    font-weight: 650;
}

.stat-tile-ok .stat-value {
    color: var(--ok);
}

.stat-tile-danger .stat-value {
    color: var(--danger);
}

.stat-tile-brand .stat-value {
    color: var(--brand);
}

/* Criteria checklist */
.criteria-list {
    display: flex;
    flex-direction: column;
    gap: var(--sp-2);
}

.criteria-item {
    display: flex;
    align-items: flex-start;
    gap: var(--sp-2);
    color: var(--ink-2);
    font-size: var(--fs-sm);
}

    .criteria-item i {
        margin-top: 3px;
        color: var(--ok);
    }

.criteria-missing {
    color: var(--ink-4);
}

    .criteria-missing i {
        color: var(--ink-5);
    }

.criteria-failed {
    color: var(--danger);
}

    .criteria-failed i {
        color: var(--danger);
    }

/* Assessment schedule rows */
.assessment-row {
    display: grid;
    grid-template-columns: 56px minmax(0,1fr) auto;
    align-items: center;
    gap: var(--sp-4);
    padding: var(--sp-3) 0;
    border-bottom: 1px solid var(--line-soft);
}

    .assessment-row:first-child {
        padding-top: 0;
    }

    .assessment-row:last-child {
        padding-bottom: 0;
        border-bottom: none;
    }

.assessment-timepoint {
    display: grid;
    place-items: center;
    width: 56px;
    height: 38px;
    border: 1px solid var(--brand-line);
    border-radius: var(--r-sm);
    background: var(--brand-wash);
    color: var(--brand);
    font-family: var(--font-data);
    font-size: var(--fs-xs);
    font-weight: 700;
}

.assessment-name {
    color: var(--ink-2);
    font-size: var(--fs-base);
    font-weight: 650;
}

.assessment-due {
    margin-top: 2px;
    color: var(--ink-4);
    font-family: var(--font-data);
    font-size: var(--fs-xs);
}

/* Adherence */
.adherence-item {
    padding: var(--sp-3) 0;
    border-bottom: 1px solid var(--line-soft);
}

    .adherence-item:first-child {
        padding-top: 0;
    }

    .adherence-item:last-child {
        padding-bottom: 0;
        border-bottom: none;
    }

.adherence-title {
    color: var(--ink-4);
    font-size: var(--fs-sm);
    font-weight: 650;
}

.adherence-value {
    margin-top: var(--sp-1);
    color: var(--ink-2);
    font-size: var(--fs-base);
    font-weight: 650;
}

/* Details grid */
.details-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0,1fr));
    gap: var(--sp-5);
    align-items: start;
}

/* Role reference list on the create-user form */
.role-help {
    display: grid;
    grid-template-columns: repeat(2, minmax(0,1fr));
    gap: var(--sp-2);
}

.role-item {
    padding: var(--sp-3);
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    background: var(--surface-sunk);
}

.role-name {
    color: var(--ink-2);
    font-size: var(--fs-sm);
    font-weight: 700;
}

.role-description {
    margin-top: 2px;
    color: var(--ink-4);
    font-size: var(--fs-xs);
}

/* Uploaded source files (Intraoperative) */
.uploaded-list {
    display: grid;
    gap: var(--sp-2);
    margin-bottom: var(--sp-4);
}

    .uploaded-list > div {
        display: flex;
        align-items: center;
        gap: var(--sp-2);
        padding: var(--sp-3);
        border: 1px solid var(--line);
        border-radius: var(--r-sm);
        background: var(--surface-sunk);
        font-size: var(--fs-sm);
    }

    .uploaded-list a {
        margin-left: auto;
        color: var(--brand);
        font-weight: 650;
    }

    .uploaded-list i {
        color: var(--ink-4);
    }

    .uploaded-list .uploaded-size {
        color: var(--ink-4);
        font-size: var(--fs-xs);
        font-variant-numeric: tabular-nums;
    }

/* Bilingual assessment prompts — the toggle sets the hidden attribute. */
.lang-bm[hidden], .lang-en[hidden] {
    display: none !important;
}


/* ============================================================================
   11. EMPTY STATES, ALERTS, DANGER ZONE
   ========================================================================== */

.empty-state,
.empty-state-custom {
    padding: var(--sp-7) var(--sp-5);
    color: var(--ink-4);
    text-align: center;
}

.empty-state-icon,
.empty-icon {
    display: grid;
    place-items: center;
    width: 56px;
    height: 56px;
    margin: 0 auto var(--sp-3);
    border: 1px solid var(--line);
    border-radius: 50%;
    background: var(--surface-sunk);
    color: var(--ink-5);
    font-size: var(--fs-lg);
}

.empty-state-title,
.empty-title {
    color: var(--ink-2);
    font-size: var(--fs-md);
    font-weight: 700;
}

.empty-state-text,
.empty-text {
    margin-top: var(--sp-1);
    color: var(--ink-4);
    font-size: var(--fs-sm);
}

.empty-section {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    color: var(--ink-4);
    font-size: var(--fs-sm);
}

    .empty-section i {
        color: var(--ink-5);
    }

/* Inline notices */
.voided-alert,
.warning-note,
.audit-box,
.source-strip,
.status-summary,
.score-summary,
.calculated-banner {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    padding: var(--sp-3) var(--sp-4);
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    background: var(--surface-sunk);
    color: var(--ink-3);
    font-size: var(--fs-sm);
}

.voided-alert {
    align-items: flex-start;
    margin-bottom: var(--sp-5);
}

    .voided-alert i {
        margin-top: 2px;
        color: var(--ink-4);
    }

.voided-reason {
    margin-top: var(--sp-1);
    color: var(--ink-2);
}

.warning-note {
    border-color: var(--warn-line);
    background: var(--warn-wash);
    color: var(--warn);
}

.info-note {
    display: flex;
    align-items: flex-start;
    gap: var(--sp-3);
    padding: var(--sp-3) var(--sp-4);
    border: 1px solid var(--brand-line);
    border-radius: var(--r-md);
    background: var(--brand-wash);
    color: var(--brand-dark);
    font-size: var(--fs-sm);
}

    .info-note i {
        margin-top: 2px;
    }

.status-summary,
.score-summary,
.calculated-banner,
.source-strip {
    justify-content: space-between;
    padding: var(--sp-4) var(--sp-5);
    border-color: var(--brand-line);
    background: var(--brand-wash);
    color: var(--brand-dark);
    font-size: var(--fs-base);
}

    .status-summary strong,
    .score-summary strong,
    .calculated-banner strong {
        font-size: var(--fs-lg);
    }

.source-strip {
    flex-wrap: wrap;
    justify-content: flex-start;
    margin-bottom: var(--sp-4);
}

    .source-strip a {
        padding: 6px 10px;
        border-radius: var(--r-sm);
        background: var(--surface);
        text-decoration: none;
    }

.calculated-banner {
    margin: var(--sp-4) 0;
}

/* The divisor shown beside the mg/kg figure (the participant's weight). */
.calculated-banner .calc-divisor {
    margin-left: var(--sp-2);
    color: var(--ink-4);
    font-size: var(--fs-sm);
    font-weight: 500;
}

.audit-time {
    color: var(--ink-2);
    font-family: var(--font-data);
    font-weight: 650;
}

/* Destructive section */
.danger-zone {
    padding: var(--sp-4);
    border: 1px solid var(--danger-line);
    border-radius: var(--r-md);
    background: var(--danger-wash);
}

.danger-zone-heading {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    margin-bottom: var(--sp-1);
    color: var(--danger);
    font-size: var(--fs-base);
    font-weight: 700;
}

.danger-zone-text {
    margin-bottom: var(--sp-3);
    color: var(--danger);
    font-size: var(--fs-sm);
    line-height: 1.5;
}


/* ============================================================================
   12. SWITCH
   ========================================================================== */

.switch-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-4);
    padding: var(--sp-4);
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    background: var(--surface-sunk);
}

.switch-copy {
    min-width: 0;
}

.switch-title {
    color: var(--ink-2);
    font-size: var(--fs-base);
    font-weight: 650;
}

.switch-description {
    margin-top: 2px;
    color: var(--ink-4);
    font-size: var(--fs-sm);
}

.custom-switch {
    position: relative;
    flex: 0 0 52px;
    width: 52px;
    height: 30px;
}

    .custom-switch input {
        width: 0;
        height: 0;
        opacity: 0;
    }

.custom-slider {
    position: absolute;
    inset: 0;
    border-radius: var(--r-pill);
    background: var(--line-strong);
    cursor: pointer;
    transition: background .2s ease;
}

    .custom-slider:before {
        content: "";
        position: absolute;
        top: 3px;
        left: 3px;
        width: 24px;
        height: 24px;
        border-radius: 50%;
        background: #fff;
        transition: transform .2s ease;
    }

.custom-switch input:checked + .custom-slider {
    background: var(--brand);
}

    .custom-switch input:checked + .custom-slider:before {
        transform: translateX(22px);
    }

.custom-switch input:focus-visible + .custom-slider {
    outline: 3px solid var(--brand-focus-ring-strong);
    outline-offset: 2px;
}


/* ============================================================================
   13. CLINICAL FORM CONTROLS
   ========================================================================== */

.eligibility-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--sp-5);
    align-items: start;
}

.criterion-list, .apfel-list {
    display: grid;
    gap: var(--sp-3);
}

.criterion-row, .factor-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-5);
    margin: 0;
    padding: var(--sp-4);
    border: 1px solid var(--line);
    border-radius: var(--r-md);
}

    .criterion-row legend, .factor-row legend {
        float: none;
        width: auto;
        margin: 0;
        color: var(--ink-2);
        font-size: var(--fs-base);
        font-weight: 650;
    }

        .criterion-row legend small {
            display: block;
            color: var(--ink-4);
            font-size: var(--fs-sm);
        }

.factor-row > div:first-child {
    display: flex;
    flex-direction: column;
}

/* Segmented / yes-no / large option buttons */
.segmented-options, .yes-no-options, .language-switch, .large-options {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-3);
}

    .segmented-options label, .yes-no-options label,
    .language-switch label, .large-options label, .score-options label {
        margin: 0;
    }

    .segmented-options input, .yes-no-options input,
    .language-switch input, .large-options input, .score-options input {
        position: absolute;
        opacity: 0;
        pointer-events: none;
    }

    .segmented-options span, .yes-no-options span,
    .language-switch span, .large-options span {
        display: grid;
        place-items: center;
        min-width: 92px;
        min-height: var(--control-h-sm);
        padding: var(--sp-2) var(--sp-4);
        border: 1px solid var(--line-strong);
        border-radius: var(--r-md);
        background: var(--surface);
        cursor: pointer;
        font-weight: 700;
    }

    .segmented-options input:checked + span, .yes-no-options input:checked + span,
    .language-switch input:checked + span, .large-options input:checked + span,
    .score-options input:checked + span {
        border-color: var(--brand);
        background: var(--brand-wash);
        color: var(--brand-dark);
        box-shadow: inset 0 0 0 1px var(--brand);
    }

    .segmented-options input:focus-visible + span, .yes-no-options input:focus-visible + span,
    .language-switch input:focus-visible + span, .large-options input:focus-visible + span,
    .score-options input:focus-visible + span {
        outline: 3px solid var(--brand-focus-ring-strong);
        outline-offset: 2px;
    }

.large-options span {
    min-width: 150px;
    min-height: 64px;
}

/* Research coding tabs */
.coding-tabs {
    display: flex;
    gap: var(--sp-2);
    overflow-x: auto;
    margin-bottom: var(--sp-4);
    padding-bottom: 3px;
}

    .coding-tabs button {
        min-height: var(--control-h-sm);
        padding: var(--sp-2) var(--sp-4);
        border: 1px solid var(--line-strong);
        border-radius: var(--r-sm);
        background: var(--surface);
        color: var(--ink-2);
        font-size: var(--fs-sm);
        font-weight: 700;
        white-space: nowrap;
    }

        .coding-tabs button.active {
            border-color: var(--brand);
            background: var(--brand);
            color: #fff;
        }

.coding-panel {
    display: none;
}

    .coding-panel.active {
        display: block;
    }

/* Repeatable rows */
.repeatable-table, .antiemetic-table {
    display: grid;
    gap: var(--sp-3);
    margin: var(--sp-4) 0;
}

.repeatable-row {
    display: grid;
    grid-template-columns: 1.4fr 1.2fr .8fr .65fr 46px;
    gap: var(--sp-3);
    align-items: center;
}

/* Per-row morphine-equivalent readout, filling the opioid row's spare column. */
.repeatable-row .row-med {
    color: var(--ink-3);
    font-family: var(--font-data);
    font-size: var(--fs-sm);
    font-weight: 650;
    text-align: right;
    white-space: nowrap;
}

.remove-row {
    display: grid;
    place-items: center;
    width: var(--control-h-sm);
    height: var(--control-h-sm);
    border: 1px solid var(--danger-line);
    border-radius: var(--r-md);
    background: var(--surface);
    color: var(--danger);
}

.antiemetic-head, .antiemetic-row {
    display: grid;
    /* Feedback item 2: 5 data columns plus the per-row remove button, matching the opioid rows. */
    grid-template-columns: 1.15fr .35fr .65fr .55fr 1.2fr 46px;
    gap: var(--sp-3);
    align-items: center;
}

/* Drug pick-list (AntiemeticCatalog) with the free-text "Other" name stacked beneath it when chosen. */
.antiemetic-drug-cell {
    display: grid;
    gap: var(--sp-1);
}

    .antiemetic-drug-cell .antiemetic-other-name {
        min-height: var(--control-h-sm);
    }

.antiemetic-head {
    padding: 0 var(--sp-2);
    color: var(--ink-4);
    font-size: var(--fs-xs);
    font-weight: 700;
}

.antiemetic-row {
    padding: var(--sp-3) var(--sp-2);
    border-top: 1px solid var(--line-soft);
}

.checkbox-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0,1fr));
    gap: var(--sp-3);
    margin: var(--sp-4) 0;
}

    .checkbox-grid label {
        display: flex;
        align-items: center;
        gap: var(--sp-3);
        min-height: var(--control-h-sm);
        padding: var(--sp-3);
        border: 1px solid var(--line);
        border-radius: var(--r-md);
    }

    .checkbox-grid input {
        width: 22px;
        height: 22px;
    }


/* ============================================================================
   13b. WORKFLOW RAIL + SPONVSS ASSESSMENT CARDS
   The rail is rendered by the StageRail view component and sits beside the form
   on every data-entry screen. It is read-only: it reports state, never gates it.
   ========================================================================== */

.flow-layout {
    display: grid;
    grid-template-columns: 272px minmax(0, 1fr);
    gap: var(--sp-6);
    align-items: start;
}

.flow-main {
    display: grid;
    gap: var(--sp-4);
    min-width: 0;
}

.stage-rail {
    position: sticky;
    top: calc(68px + var(--sp-4));
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    background: var(--surface);
    box-shadow: var(--shadow-sm), var(--shadow-md);
}

.stage-rail-head {
    padding: var(--sp-4) var(--sp-5);
    border-bottom: 1px solid var(--line-soft);
    background: var(--surface-sunk);
}

.stage-rail-title {
    color: var(--ink-4);
    font-size: var(--fs-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
}

.stage-rail-head .study-id {
    margin-top: var(--sp-1);
    font-size: var(--fs-md);
}

.stage-rail-progress {
    overflow: hidden;
    height: 6px;
    margin-top: var(--sp-3);
    border-radius: var(--r-pill);
    background: var(--line);
}

.stage-rail-progress-bar {
    height: 100%;
    border-radius: var(--r-pill);
    background: var(--ok);
    transition: width .3s ease;
}

.stage-rail-count {
    margin-top: var(--sp-2);
    color: var(--ink-4);
    font-size: var(--fs-xs);
}

.stage-steps {
    margin: 0;
    padding: var(--sp-3) 0;
    list-style: none;
}

.stage-step {
    position: relative;
}

    /* Connector line between markers. */
    .stage-step + .stage-step:before {
        content: "";
        position: absolute;
        top: 0;
        left: 33px;
        width: 2px;
        height: 14px;
        margin-top: -7px;
        background: var(--line);
    }

.stage-step-body {
    display: flex;
    align-items: flex-start;
    gap: var(--sp-3);
    min-height: var(--control-h-sm);
    padding: var(--sp-2) var(--sp-5);
    color: inherit;
    text-decoration: none;
}

a.stage-step-body:hover {
    background: var(--surface-sunk);
}

.stage-step-marker {
    display: grid;
    place-items: center;
    flex: 0 0 28px;
    width: 28px;
    height: 28px;
    margin-top: 2px;
    border: 1px solid var(--line-strong);
    border-radius: 50%;
    background: var(--surface);
    color: var(--ink-4);
    font-size: var(--fs-sm);
    font-weight: 700;
}

.stage-step-copy {
    min-width: 0;
}

.stage-step-title {
    display: block;
    color: var(--ink-2);
    font-size: var(--fs-sm);
    font-weight: 650;
}

.stage-step-hint {
    display: block;
    margin-top: 1px;
    color: var(--ink-5);
    font-size: var(--fs-xs);
    line-height: 1.35;
}

/* States */
.stage-step-complete .stage-step-marker {
    border-color: var(--ok);
    background: var(--ok);
    color: #fff;
}

.stage-step-complete .stage-step-title {
    color: var(--ink-3);
}

.stage-step-current .stage-step-body {
    background: var(--brand-wash);
    box-shadow: inset 3px 0 0 var(--brand);
}

.stage-step-current .stage-step-marker {
    border-color: var(--brand);
    background: var(--brand);
    color: #fff;
}

.stage-step-current .stage-step-title {
    color: var(--brand-dark);
    font-weight: 750;
}

.stage-step-draft .stage-step-marker {
    border-color: var(--warn-line);
    background: var(--warn-wash);
    color: var(--warn);
}

.stage-step-pending .stage-step-title,
.stage-step-pending .stage-step-hint {
    color: var(--ink-5);
}

/* Horizontal fallback on tablets and phones -------------------------------- */

@media (max-width: 900px) {

    .flow-layout {
        grid-template-columns: 1fr;
    }

    .stage-rail {
        position: static;
    }

    .stage-rail-head {
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        gap: var(--sp-3);
    }

        .stage-rail-head .stage-rail-progress {
            flex: 1 1 160px;
            margin-top: 0;
        }

        .stage-rail-head .study-id,
        .stage-rail-head .stage-rail-count {
            margin-top: 0;
        }

    .stage-steps {
        display: flex;
        overflow-x: auto;
        padding: var(--sp-3);
        gap: var(--sp-2);
    }

    .stage-step {
        flex: 0 0 auto;
    }

        .stage-step + .stage-step:before {
            top: 50%;
            left: -9px;
            width: 10px;
            height: 2px;
            margin: 0;
        }

    .stage-step-body {
        flex-direction: column;
        align-items: center;
        width: 132px;
        padding: var(--sp-3) var(--sp-2);
        text-align: center;
    }

    .stage-step-current .stage-step-body {
        border-radius: var(--r-sm);
        box-shadow: inset 0 3px 0 var(--brand);
    }

    .stage-step-hint {
        display: none;
    }
}


/* SPONVSS assessment cards -------------------------------------------------
   One card per domain: illustration, the patient-facing sentence in both
   languages, and five large 0-4 choices. Sized for a patient holding a tablet.
   ------------------------------------------------------------------------- */

.sponvss-list {
    display: grid;
    gap: var(--sp-4);
}

.sponvss-block {
    margin: 0;
    padding: 0;
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    background: var(--surface-sunk);
}

.sponvss-question {
    display: flex;
    align-items: flex-start;
    gap: var(--sp-4);
    padding: var(--sp-4) var(--sp-5);
}

.sponvss-face {
    flex: 0 0 56px;
    width: 56px;
    height: 56px;
}

.sponvss-copy {
    min-width: 0;
}

.sponvss-block legend {
    float: none;
    width: auto;
    padding: 0;
    margin: 0;
}

.sponvss-domain {
    display: block;
    color: var(--ink);
    font-size: var(--fs-md);
    font-weight: 750;
}

.sponvss-prompt {
    max-width: 68ch;
    margin: var(--sp-1) 0 0;
    color: var(--ink-3);
    font-size: var(--fs-base);
    line-height: 1.45;
}

.score-options {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: var(--sp-2);
    padding: 0 var(--sp-5) var(--sp-5);
}

    .score-options label > span {
        display: grid;
        align-content: center;
        place-items: center;
        gap: 2px;
        min-height: 82px;
        padding: var(--sp-2);
        border: 1px solid var(--line-strong);
        border-radius: var(--r-md);
        background: var(--surface);
        cursor: pointer;
        transition: border-color .15s ease, background .15s ease;
    }

    .score-options label:hover > span {
        border-color: var(--brand-line);
        background: var(--brand-wash);
    }

    .score-options strong {
        color: var(--ink);
        font-size: var(--fs-xl);
        font-weight: 750;
        line-height: 1;
    }

    .score-options small {
        color: var(--ink-4);
        font-size: var(--fs-xs);
        text-align: center;
        line-height: 1.25;
    }

    .score-options input:checked + span strong,
    .score-options input:checked + span small {
        color: var(--brand-dark);
    }

/* Total + severity banner */
.sponvss-result {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--sp-4);
    margin-top: var(--sp-5);
    padding: var(--sp-4) var(--sp-5);
    border: 1px solid var(--brand-line);
    border-radius: var(--r-md);
    background: var(--brand-wash);
}

.sponvss-result-label {
    color: var(--brand-dark);
    font-size: var(--fs-base);
    font-weight: 650;
}

.sponvss-result-total {
    color: var(--brand-dark);
    font-size: var(--fs-2xl);
    font-weight: 750;
    line-height: 1;
}

.sponvss-result-severity {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
}

/* ============================================================================
   14. RESPONSIVE
   Three breakpoints app-wide: 1150 (dense desktop), 900 (tablet), 600 (phone).
   Nothing else may introduce a breakpoint.
   ========================================================================== */

@media (max-width: 900px) {

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

    .eligibility-layout,
    .details-grid,
    .outcome-summary {
        grid-template-columns: 1fr;
    }

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

        .repeatable-row .remove-row {
            justify-self: end;
        }

    .antiemetic-head {
        display: none;
    }

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

    .score-options {
        grid-template-columns: repeat(5, minmax(76px,1fr));
        overflow-x: auto;
    }

    .users-table, .patients-table, .screening-table, .data-table {
        min-width: 760px;
    }
}

@media (max-width: 600px) {

    .page-header, .clinical-header, .patient-header, .screening-header {
        align-items: flex-start;
        flex-direction: column;
    }

    .page-header-actions {
        width: 100%;
        margin-left: 0;
    }

        .page-header-actions > * {
            flex: 1 1 auto;
        }

    .page-title, .clinical-header h1, .patient-title, .screening-title {
        font-size: var(--fs-xl);
    }

    .clinical-panel {
        padding: var(--sp-5);
    }

    .clinical-panel-heading {
        margin: calc(var(--sp-5) * -1) calc(var(--sp-5) * -1) var(--sp-5);
        padding: var(--sp-4) var(--sp-5);
    }

    .detail-card-body, .form-card-body, .settings-card-body {
        padding: var(--sp-4);
    }

    .detail-card-header, .form-card-header, .settings-card-header,
    .users-card-header, .patients-card-header, .screening-card-header {
        padding: var(--sp-3) var(--sp-4);
    }

    .clinical-grid-2, .clinical-grid-3, .clinical-grid-4,
    .form-grid, .settings-grid,
    .summary-boxes, .role-help, .checkbox-grid {
        grid-template-columns: 1fr;
    }

    .clinical-field-wide, .field-full {
        grid-column: auto;
    }

    .criterion-row, .factor-row, .switch-card, .audit-box {
        align-items: flex-start;
        flex-direction: column;
        gap: var(--sp-3);
    }

    .data-row, .assessment-row {
        grid-template-columns: 1fr;
        gap: var(--sp-1);
    }

    .assessment-actions {
        justify-content: flex-start;
    }

    .clinical-actions, .form-actions, .action-bar {
        align-items: stretch;
        flex-direction: column-reverse;
    }

        .clinical-actions .btn,
        .form-actions > *,
        .action-bar > * {
            width: 100%;
        }

    .repeatable-row, .antiemetic-row {
        grid-template-columns: 1fr;
    }

    .language-switch span {
        min-width: 128px;
    }
}

@media (prefers-reduced-motion: reduce) {

    * {
        animation-duration: .001ms !important;
        transition-duration: .001ms !important;
    }
}


/* ============================================================================
   15. APP CHROME  (header, navigation, context bar, alerts, footer)
   Previously lived in a <style> block inside _Layout.cshtml.
   ========================================================================== */

.app-header {
    position: sticky;
    top: 0;
    z-index: 1030;
    border-bottom: 1px solid var(--line);
    background: var(--surface);
}

.topbar {
    display: flex;
    align-items: center;
    gap: var(--sp-6);
    min-height: 68px;
    padding: var(--sp-2) var(--sp-6);
}

.brand-link {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    color: inherit;
    text-decoration: none;
}

.brand-logo {
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    padding: 6px;
    border-radius: 13px;
    background: #fff;
    color: var(--brand);
    font-size: var(--fs-sm);
    font-weight: 800;
    /* The crest never sits on a coloured surface: white badge + coloured shadow. */
    box-shadow: 0 8px 18px -6px rgba(4,51,130,.35), 0 0 0 1px rgba(4,51,130,.08);
}

    .brand-logo img {
        width: 100%;
        height: 100%;
        object-fit: contain;
    }

.brand-copy {
    line-height: 1.2;
}

.brand-title {
    color: var(--ink);
    font-size: var(--fs-base);
    font-weight: 700;
}

.brand-subtitle {
    margin-top: 2px;
    color: var(--ink-4);
    font-size: var(--fs-xs);
}

/* Navigation --------------------------------------------------------------- */

.top-navigation {
    min-width: 0;
    flex: 1;
    display: flex;
    align-items: center;
    gap: var(--sp-1);
}

.top-nav-link {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    min-height: var(--control-h-sm);
    padding: 0 var(--sp-3);
    border-radius: var(--r-sm);
    color: var(--ink-3);
    font-size: var(--fs-sm);
    font-weight: 650;
    text-decoration: none;
    white-space: nowrap;
    transition: background .15s ease, color .15s ease;
}

    .top-nav-link i {
        color: var(--ink-5);
        font-size: var(--fs-sm);
    }

    .top-nav-link:hover {
        background: var(--brand-wash);
        color: var(--brand-dark);
    }

        .top-nav-link:hover i {
            color: var(--brand);
        }

    .top-nav-link.active {
        background: var(--brand-wash);
        color: var(--brand-dark);
    }

        .top-nav-link.active::after {
            content: "";
            position: absolute;
            left: var(--sp-3);
            right: var(--sp-3);
            bottom: 0;
            height: 2px;
            border-radius: var(--r-pill);
            background: var(--brand);
        }

        .top-nav-link.active i {
            color: var(--brand);
        }

/* Header right ------------------------------------------------------------- */

.topbar-right {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: var(--sp-2);
}

.header-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--sp-2);
    min-height: var(--control-h-sm);
    padding: 0 var(--sp-3);
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    background: var(--surface);
    color: var(--ink-3);
    font-size: var(--fs-sm);
    font-weight: 650;
    text-decoration: none;
}

    .header-action:hover {
        background: var(--surface-sunk);
        color: var(--ink);
    }

.header-action-primary {
    border-color: var(--brand);
    background: var(--brand);
    color: #fff;
}

    .header-action-primary:hover {
        border-color: var(--brand-dark);
        background: var(--brand-dark);
        color: #fff;
    }

.alert-bell,
.logout-button,
.mobile-menu-button {
    position: relative;
    display: grid;
    place-items: center;
    width: var(--control-h-sm);
    height: var(--control-h-sm);
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    background: var(--surface);
    color: var(--ink-3);
}

    .alert-bell:hover,
    .logout-button:hover,
    .mobile-menu-button:hover {
        background: var(--surface-sunk);
        color: var(--ink);
    }

.mobile-menu-button {
    display: none;
}

.alert-count {
    display: none;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: -6px;
    right: -6px;
    min-width: 20px;
    height: 20px;
    padding: 0 5px;
    border: 2px solid var(--surface);
    border-radius: var(--r-pill);
    background: var(--danger);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
}

    .alert-count.visible {
        display: flex;
    }

/* Reminder panel + alarm (feedback item 3) --------------------------------- */

/* The panel is absolutely positioned inside the top bar, so anchor it there. */
.topbar-right {
    position: relative;
}

.alert-bell {
    cursor: pointer;
}

.alert-bell-urgent {
    border-color: var(--danger);
    color: var(--danger);
    animation: alert-pulse 1.6s ease-in-out infinite;
}

@keyframes alert-pulse {
    0%, 100% {
        box-shadow: 0 0 0 0 rgba(214, 43, 60, .38);
    }

    50% {
        box-shadow: 0 0 0 7px rgba(214, 43, 60, 0);
    }
}

.alert-panel {
    position: absolute;
    top: calc(var(--control-h-sm) + var(--sp-3));
    right: 0;
    z-index: 60;
    width: min(420px, calc(100vw - var(--sp-5)));
    padding: var(--sp-4);
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    background: var(--surface);
    box-shadow: var(--shadow-sm), var(--shadow-md);
    text-align: left;
}

    .alert-panel[hidden] {
        display: none;
    }

.alert-panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-3);
    margin-bottom: var(--sp-3);
}

.alert-panel-mute {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    font-size: var(--fs-xs);
    font-weight: 600;
    color: var(--ink-3);
}

.alert-panel-counts {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-2);
    margin-bottom: var(--sp-3);
}

.alert-chip {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-1);
    padding: 2px var(--sp-3);
    border: 1px solid var(--line);
    border-radius: var(--r-pill);
    background: var(--surface-sunk);
    color: var(--ink-3);
    font-size: var(--fs-xs);
}

    .alert-chip-crit {
        border-color: var(--danger);
        color: var(--danger);
    }

    .alert-chip-warn {
        border-color: var(--brand);
        color: var(--brand);
    }

.alert-panel-list {
    display: grid;
    gap: var(--sp-2);
    margin: 0;
    padding-left: var(--sp-5);
    font-size: var(--fs-sm);
}

/* Dashboard reminder card (feedback item 3): the same lines the bell shows. */
.reminder-list {
    display: grid;
    gap: var(--sp-2);
    margin: 0;
    padding-left: var(--sp-5);
    font-size: var(--fs-sm);
    color: var(--ink-2);
}

    .reminder-list li::marker {
        color: var(--brand);
    }

/* User menu ---------------------------------------------------------------- */

.user-menu {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    padding-left: var(--sp-2);
    border-left: 1px solid var(--line);
}

    .user-menu .user-avatar {
        flex: 0 0 var(--control-h-sm);
        width: var(--control-h-sm);
        height: var(--control-h-sm);
    }

.user-copy {
    max-width: 170px;
    line-height: 1.2;
}

.user-name {
    overflow: hidden;
    color: var(--ink-2);
    font-size: var(--fs-sm);
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.user-role {
    margin-top: 1px;
    overflow: hidden;
    color: var(--ink-4);
    font-size: var(--fs-xs);
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Context bar -------------------------------------------------------------- */

.context-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-4);
    min-height: 40px;
    padding: var(--sp-1) var(--sp-6);
    border-top: 1px solid var(--line-soft);
    background: var(--surface-sunk);
}

.breadcrumb-custom {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    color: var(--ink-4);
    font-size: var(--fs-xs);
}

    .breadcrumb-custom i {
        color: var(--ink-5);
        font-size: 10px;
    }

.study-tag {
    padding: 2px 7px;
    border: 1px solid var(--brand-navy-line);
    border-radius: 6px;
    background: var(--brand-navy-wash);
    color: var(--brand-navy);
    font-family: var(--font-data);
    font-size: var(--fs-xs);
    font-weight: 650;
}

.current-page {
    color: var(--brand-dark);
    font-weight: 650;
}

.system-state {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    color: var(--ink-4);
    font-size: var(--fs-xs);
}

.system-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--ok);
}

/* Mobile navigation -------------------------------------------------------- */

.mobile-nav {
    display: none;
    padding: var(--sp-2) var(--sp-3) var(--sp-3);
    border-top: 1px solid var(--line);
    background: var(--surface);
}

    .mobile-nav.open {
        display: block;
    }

    .mobile-nav .top-nav-link {
        width: 100%;
        justify-content: flex-start;
        margin-bottom: 2px;
    }

/* Content region ----------------------------------------------------------- */

.app-content {
    min-height: calc(100vh - 140px);
    padding: var(--sp-6) var(--sp-6) var(--sp-7);
}

/* TempData banners --------------------------------------------------------- */

.app-alert {
    display: flex;
    align-items: flex-start;
    gap: var(--sp-3);
    max-width: var(--page-max);
    margin: 0 auto var(--sp-4);
    padding: var(--sp-3) var(--sp-4);
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    font-size: var(--fs-sm);
}

.app-alert-success {
    border-color: var(--ok-line);
    background: var(--ok-wash);
    color: var(--ok);
}

.app-alert-danger {
    border-color: var(--danger-line);
    background: var(--danger-wash);
    color: var(--danger);
}

.app-alert-info {
    border-color: var(--info-line);
    background: var(--info-wash);
    color: var(--info);
}

.app-alert .btn-close {
    min-height: 0;
    margin-left: auto;
    padding: var(--sp-1);
    font-size: 10px;
}

/* Footer ------------------------------------------------------------------- */

.app-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-5);
    padding: var(--sp-4) var(--sp-6);
    border-top: 1px solid var(--line);
    background: var(--surface);
    color: var(--ink-4);
    font-size: var(--fs-xs);
}

.footer-title {
    color: var(--ink-3);
    font-weight: 650;
}

@media (max-width: 1150px) {

    .desktop-navigation {
        display: none;
    }

    .mobile-menu-button {
        display: grid;
    }
}

@media (max-width: 900px) {

    .user-copy,
    .header-new-screening {
        display: none;
    }
}

@media (max-width: 600px) {

    .topbar,
    .context-bar {
        padding-left: var(--sp-3);
        padding-right: var(--sp-3);
    }

    .brand-subtitle,
    .system-state,
    .context-root,
    .context-study,
    .context-chevron {
        display: none;
    }

    .app-content {
        padding: var(--sp-4) var(--sp-3) var(--sp-6);
    }

    .app-footer {
        align-items: flex-start;
        flex-direction: column;
        padding: var(--sp-4) var(--sp-3);
    }
}


/* ============================================================================
   16. DASHBOARD
   KPI tiles, the assessment pipeline and the worklist toolbar. All colour comes
   from the shared semantic tokens — there is no page-local palette.
   ========================================================================== */

/* KPI tiles ---------------------------------------------------------------- */

.kpi-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--sp-4);
    margin-bottom: var(--sp-5);
}

.kpi-tile {
    display: flex;
    flex-direction: column;
    gap: var(--sp-3);
    padding: var(--sp-4) var(--sp-5);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    background: var(--surface);
    box-shadow: var(--shadow-sm);
}

.kpi-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-2);
}

.kpi-label {
    color: var(--ink-3);
    font-size: var(--fs-sm);
    font-weight: 650;
}

.kpi-mark {
    flex: none;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--ink-5);
}

.kpi-value {
    color: var(--ink);
    font-size: 2rem;
    font-weight: 750;
    line-height: 1;
    letter-spacing: -.03em;
    font-variant-numeric: tabular-nums;
}

.kpi-foot {
    color: var(--ink-4);
    font-size: var(--fs-sm);
}

.kpi-split {
    display: flex;
    gap: var(--sp-1);
    flex-wrap: wrap;
}

    .kpi-split span {
        padding: 2px 7px;
        border: 1px solid var(--line-soft);
        border-radius: 6px;
        background: var(--surface-sunk);
        color: var(--ink-3);
        font-family: var(--font-data);
        font-size: var(--fs-xs);
    }

.kpi-owner {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-1);
    color: var(--ink-4);
    font-size: var(--fs-xs);
    font-weight: 650;
}

    .kpi-owner:before {
        content: "";
        flex: none;
        width: 5px;
        height: 5px;
        border-radius: 50%;
        background: currentColor;
    }

/* Only the critical tile earns a tinted surface. */
.kpi-tile-danger {
    border-color: var(--danger-line);
    background: var(--danger-wash);
}

    .kpi-tile-danger .kpi-label,
    .kpi-tile-danger .kpi-value,
    .kpi-tile-danger .kpi-foot,
    .kpi-tile-danger .kpi-owner {
        color: var(--danger);
    }

    .kpi-tile-danger .kpi-mark {
        background: var(--danger);
    }

.kpi-tile-warn .kpi-mark {
    background: var(--warn);
}

.kpi-tile-code .kpi-mark {
    background: var(--code);
}

.kpi-tile-brand .kpi-mark {
    background: var(--brand);
}

/* Assessment pipeline ------------------------------------------------------ */

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

.pipeline-stage {
    display: flex;
    flex-direction: column;
    gap: var(--sp-2);
    padding-right: var(--sp-5);
}

    .pipeline-stage + .pipeline-stage {
        padding-left: var(--sp-5);
        border-left: 1px solid var(--line-soft);
    }

.pipeline-head {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
}

.pipeline-num {
    display: grid;
    place-items: center;
    flex: none;
    width: 20px;
    height: 20px;
    border: 1px solid var(--line);
    border-radius: 50%;
    background: var(--surface-sunk);
    color: var(--ink-4);
    font-family: var(--font-data);
    font-size: var(--fs-xs);
    font-weight: 700;
}

.pipeline-name {
    color: var(--ink-2);
    font-size: var(--fs-sm);
    font-weight: 650;
}

.pipeline-row {
    display: flex;
    align-items: baseline;
    gap: var(--sp-2);
}

.pipeline-value {
    color: var(--ink);
    font-size: var(--fs-xl);
    font-weight: 750;
    line-height: 1;
    letter-spacing: -.02em;
    font-variant-numeric: tabular-nums;
}

.pipeline-of {
    color: var(--ink-4);
    font-size: var(--fs-xs);
    font-variant-numeric: tabular-nums;
}

.pipeline-bar {
    overflow: hidden;
    height: 6px;
    border-radius: var(--r-pill);
    background: var(--line-soft);
}

    .pipeline-bar > span {
        display: block;
        height: 100%;
        border-radius: inherit;
        background: var(--ink-5);
    }

.pipeline-bar-brand > span {
    background: var(--brand);
}

.pipeline-bar-warn > span {
    background: var(--warn);
}

.pipeline-bar-ok > span {
    background: var(--ok);
}

.pipeline-foot {
    color: var(--ink-4);
    font-size: var(--fs-xs);
}

    .pipeline-foot b {
        color: var(--danger);
        font-weight: 650;
    }

.pipeline-owner {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-1);
    color: var(--brand);
    font-size: var(--fs-xs);
    font-weight: 700;
}

    .pipeline-owner:before {
        content: "\f007"; /* fa-user */
        font-family: "Font Awesome 6 Free";
        font-weight: 900;
        font-size: 10px;
    }

    .pipeline-owner.is-done {
        color: var(--ink-5);
    }

        .pipeline-owner.is-done:before {
            content: "\f00c"; /* fa-check */
        }

/* Worklist toolbar --------------------------------------------------------- */

.data-toolbar {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    flex-wrap: wrap;
}

.toolbar-search {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    min-width: 220px;
    min-height: var(--control-h-sm);
    padding: 0 var(--sp-3);
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    background: var(--surface-sunk);
}

    .toolbar-search input {
        width: 100%;
        border: 0;
        outline: none;
        background: transparent;
        color: var(--ink);
        font-size: var(--fs-sm);
    }

    .toolbar-search i {
        color: var(--ink-5);
    }

.filter-chips {
    display: flex;
    gap: var(--sp-1);
    flex-wrap: wrap;
}

.filter-chip {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-1);
    min-height: var(--control-h-sm);
    padding: 0 var(--sp-3);
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    background: var(--surface);
    color: var(--ink-3);
    font-size: var(--fs-sm);
    font-weight: 650;
    cursor: pointer;
    transition: background .15s ease, border-color .15s ease, color .15s ease;
}

    .filter-chip:hover {
        border-color: var(--line-strong);
        color: var(--ink);
    }

    .filter-chip[aria-pressed="true"] {
        border-color: var(--brand);
        background: var(--brand);
        color: #fff;
    }

    .filter-chip .n {
        color: var(--ink-5);
        font-family: var(--font-data);
        font-size: var(--fs-xs);
    }

    .filter-chip[aria-pressed="true"] .n {
        color: rgba(255,255,255,.8);
    }

/* Legend ------------------------------------------------------------------- */

.legend {
    display: flex;
    gap: var(--sp-4);
    flex-wrap: wrap;
    color: var(--ink-4);
    font-size: var(--fs-xs);
}

    .legend span {
        display: inline-flex;
        align-items: center;
        gap: var(--sp-2);
    }

    .legend i {
        display: block;
        width: 8px;
        height: 8px;
        border-radius: 50%;
    }

/* Table helpers shared by the worklist ------------------------------------- */

.data-table th.num,
.data-table td.num {
    text-align: right;
}

.data-table td.lead {
    position: relative;
    padding-left: var(--sp-5);
}

    .data-table td.lead:before {
        content: "";
        position: absolute;
        left: 0;
        top: 0;
        bottom: 0;
        width: 3px;
        background: transparent;
    }

.data-table tr[data-sev="crit"] td.lead:before {
    background: var(--danger);
}

.data-table tr[data-sev="warn"] td.lead:before {
    background: var(--warn);
}

.data-table tr[data-sev="code"] td.lead:before {
    background: var(--code);
}

/* A card body that holds a table edge-to-edge. */
.detail-card-body-flush {
    padding: 0;
}

/* Stacked row action + "who is pending" caption. */
.row-actions {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: var(--sp-1);
}

.row-pending {
    color: var(--ink-5);
    font-size: var(--fs-xs);
    font-weight: 650;
    white-space: nowrap;
}

    .row-pending.is-blocked {
        color: var(--code);
    }

@media (max-width: 1150px) {

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

    .pipeline {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        row-gap: var(--sp-5);
    }

        .pipeline-stage:nth-child(3) {
            padding-left: 0;
            border-left: 0;
        }
}

@media (max-width: 600px) {

    .kpi-grid,
    .pipeline {
        grid-template-columns: 1fr;
    }

    .pipeline-stage + .pipeline-stage {
        padding-left: 0;
        padding-top: var(--sp-4);
        border-left: 0;
        border-top: 1px solid var(--line-soft);
    }

    .row-actions {
        align-items: flex-start;
    }
}


/* ============================================================================
   17. LOGIN
   Standalone authentication page. Uses the same tokens, Bootstrap and Font
   Awesome as the rest of the app so it renders on an isolated network.
   ========================================================================== */

.login-page {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    padding: var(--sp-6);
    background:
        radial-gradient(1100px 600px at 6% -8%, rgba(251,191,7,.10), transparent 60%),
        radial-gradient(900px 600px at 104% 104%, rgba(4,51,130,.10), transparent 55%),
        var(--surface-app);
}

.login-shell {
    display: block;
    width: 100%;
    max-width: 440px;
    margin: 0 auto;
}

.login-card {
    padding: var(--sp-6);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    background: var(--surface);
    box-shadow: var(--shadow-sm), var(--shadow-md);
}

.login-brand {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    padding-bottom: var(--sp-5);
    border-bottom: 1px solid var(--line-soft);
}

.login-brand-icon {
    display: grid;
    place-items: center;
    flex: none;
    width: 48px;
    height: 48px;
    border: 1px solid var(--brand-line);
    border-radius: var(--r-md);
    background: var(--brand-wash);
    color: var(--brand);
    font-size: var(--fs-lg);
}

.login-title {
    margin: 0;
    color: var(--ink);
    font-size: var(--fs-xl);
    font-weight: 750;
    letter-spacing: -.02em;
}

.login-subtitle {
    margin: var(--sp-1) 0 0;
    color: var(--ink-4);
    font-size: var(--fs-sm);
}

.login-form {
    display: grid;
    gap: var(--sp-5);
    margin-top: var(--sp-6);
}

.login-field {
    display: grid;
    gap: var(--sp-2);
}

    .login-field label {
        color: var(--ink-2);
        font-size: var(--fs-sm);
        font-weight: 700;
    }

.login-input-wrap {
    position: relative;
    display: flex;
    align-items: center;
}

    .login-input-wrap > i {
        position: absolute;
        left: var(--sp-3);
        color: var(--ink-5);
    }

    .login-input-wrap input {
        width: 100%;
        min-height: var(--control-h);
        padding: 0 var(--sp-3) 0 42px;
        border: 1px solid var(--line-strong);
        border-radius: var(--r-md);
        background: var(--surface);
        color: var(--ink);
        font-size: var(--fs-base);
    }

        .login-input-wrap input:focus {
            outline: 3px solid var(--brand-focus-ring);
            border-color: var(--brand);
        }

.login-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-3);
    flex-wrap: wrap;
}

.login-check {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    color: var(--ink-3);
    font-size: var(--fs-sm);
}

.login-link {
    color: var(--brand);
    font-size: var(--fs-sm);
    font-weight: 650;
    text-decoration: none;
}

    .login-link:hover {
        text-decoration: underline;
    }

.login-submit {
    width: 100%;
    min-height: var(--control-h);
    border: 1px solid var(--brand);
    border-radius: var(--r-md);
    background: var(--brand);
    color: #fff;
    font-size: var(--fs-base);
    font-weight: 700;
    cursor: pointer;
}

    .login-submit:hover {
        border-color: var(--brand-dark);
        background: var(--brand-dark);
    }

    .login-submit:disabled {
        opacity: .75;
        cursor: not-allowed;
    }

.login-notice {
    display: flex;
    align-items: flex-start;
    gap: var(--sp-2);
    margin-top: var(--sp-5);
    padding: var(--sp-3);
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    background: var(--surface-sunk);
    color: var(--ink-4);
    font-size: var(--fs-sm);
}

.login-meta {
    margin-top: var(--sp-4);
    color: var(--ink-5);
    font-family: var(--font-data);
    font-size: var(--fs-xs);
    text-align: center;
}

.login-aside {
    padding: var(--sp-6);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    background: var(--surface);
    box-shadow: var(--shadow-sm);
}

.login-aside-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-3);
    padding-bottom: var(--sp-4);
    border-bottom: 1px solid var(--line-soft);
}

.login-aside-title {
    margin: 0;
    color: var(--ink);
    font-size: var(--fs-md);
    font-weight: 700;
}

.login-aside-note {
    margin-top: var(--sp-1);
    color: var(--ink-4);
    font-size: var(--fs-sm);
}

.login-persona {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-3);
    margin-top: var(--sp-3);
    padding: var(--sp-3);
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    background: var(--surface-sunk);
}

.login-persona-id {
    display: grid;
    place-items: center;
    flex: none;
    width: 36px;
    height: 36px;
    border: 1px solid var(--brand-line);
    border-radius: var(--r-sm);
    background: var(--brand-wash);
    color: var(--brand);
    font-size: var(--fs-xs);
    font-weight: 700;
}

.login-persona-name {
    color: var(--ink-2);
    font-size: var(--fs-sm);
    font-weight: 700;
}

.login-persona-cred {
    color: var(--ink-4);
    font-family: var(--font-data);
    font-size: var(--fs-xs);
}

.login-persona-fill {
    min-height: 34px;
    padding: 0 var(--sp-3);
    border: 1px solid var(--brand-line);
    border-radius: var(--r-sm);
    background: var(--brand-wash);
    color: var(--brand);
    font-size: var(--fs-xs);
    font-weight: 700;
    cursor: pointer;
}

    .login-persona-fill:hover {
        border-color: var(--brand);
    }

.login-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-1);
    padding: 3px 9px;
    border: 1px solid var(--ok-line);
    border-radius: var(--r-pill);
    background: var(--ok-wash);
    color: var(--ok);
    font-size: var(--fs-xs);
    font-weight: 700;
}

@media (max-width: 900px) {

    .login-shell {
        grid-template-columns: 1fr;
    }

    .login-card {
        padding: var(--sp-6);
    }
}


/* 1. Pin footer to bottom */
.app-footer {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    z-index: 1020;
    /* Optional visual polish */
    background-color: #ffffff;
    border-top: 1px solid #e5e7eb;
}

/* 2. Prevent content from hiding behind the fixed footer */
.app-content {
    padding-bottom: 60px; /* Adjust height based on the footer's rendered height */
}

.ga-hint {
    margin: .25rem 0 .75rem;
    color: var(--bs-secondary-color, #6c757d);
    font-size: .9rem;
}

.ga-gallery {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: .75rem;
    margin-bottom: 1rem;
}

.ga-thumb {
    margin: 0;
    border: 1px solid #dee2e6;
    border-radius: .5rem;
    overflow: hidden;
    background: #fff;
}

.ga-thumb-pending {
    border-style: dashed;
}

.ga-thumb-error {
    border-color: #dc3545;
}

.ga-thumb-link {
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 4 / 3;
    background: #f1f3f5;
    cursor: zoom-in;
}

    .ga-thumb-link img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

.ga-thumb-pdf {
    flex-direction: column;
    gap: .35rem;
    cursor: pointer;
    color: #b02a37;
    text-decoration: none;
}

    .ga-thumb-pdf i {
        font-size: 2.25rem;
    }

.ga-thumb figcaption {
    display: flex;
    justify-content: space-between;
    gap: .5rem;
    padding: .4rem .6rem;
    font-size: .8rem;
}

.ga-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ga-viewer {
    max-width: 95vw;
    max-height: 95vh;
    padding: 0;
    border: none;
    border-radius: .5rem;
}

    .ga-viewer::backdrop {
        background: rgba(0,0,0,.75);
    }

.ga-viewer-bar {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: .5rem .75rem;
    border-bottom: 1px solid #dee2e6;
}

    .ga-viewer-bar span {
        flex: 1;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

.ga-viewer img {
    display: block;
    max-width: 95vw;
    max-height: calc(95vh - 3rem);
    object-fit: contain;
}

/* ============================================================================
   PASTE 1 of 2 — into section 4 (PAGE SHELL), directly after the
   .page-narrow rule. Lifts the 1180px cap for full-width consoles.
   ========================================================================== */

.page-wide {
    max-width: none;
}


/* ============================================================================
   PASTE 2 of 2 — at the end of section 16 (DASHBOARD), before section 17.
   Three-column console: KPI rail · worklist · reminders + pipeline.
   Reuses .kpi-tile, .pipeline, .detail-card, .data-table, .filter-chip.
   Breakpoints: 1150 / 900 / 600 only.
   ========================================================================== */

/* Console grid ------------------------------------------------------------- */

.console {
    display: grid;
    grid-template-columns: 250px minmax(0, 1fr) 320px;
    gap: var(--sp-5);
    align-items: start;
}

.console-rail {
    position: sticky;
    top: calc(68px + var(--sp-4)); /* same offset as .stage-rail */
    display: flex;
    flex-direction: column;
    gap: var(--sp-4);
    min-width: 0;
}

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

/* Cards inside the console are spaced by the grid gap, not their own margin. */
.console .detail-card {
    margin-bottom: 0;
}

/* KPI tiles as filter buttons ---------------------------------------------- */

button.kpi-tile {
    width: 100%;
    margin: 0;
    font: inherit;
    text-align: left;
    cursor: pointer;
    transition: border-color .15s ease, box-shadow .15s ease;
}

    button.kpi-tile:hover {
        border-color: var(--line-strong);
    }

.kpi-tile-danger[aria-pressed="true"] {
    box-shadow: inset 0 0 0 2px var(--danger);
}

.kpi-tile-warn[aria-pressed="true"] {
    box-shadow: inset 0 0 0 2px var(--warn);
}

.kpi-tile-code[aria-pressed="true"] {
    box-shadow: inset 0 0 0 2px var(--code);
}

.console .kpi-tile {
    gap: var(--sp-2);
}

/* Worklist: larger type than the default data-table for bedside reading ---- */

.console-chips {
    padding: var(--sp-3) var(--sp-5);
    border-bottom: 1px solid var(--line-soft);
}

.console-worklist .detail-card-header {
    flex-wrap: wrap;
}

.console-worklist .data-table {
    font-size: var(--fs-base);
}

    .console-worklist .data-table tbody td {
        padding-top: var(--sp-4);
        padding-bottom: var(--sp-4);
    }

.console-worklist .study-id {
    font-size: var(--fs-base);
}

.console-worklist .data-table tr[data-sev="crit"] td {
    background: var(--danger-wash);
}

.console-no-match td {
    padding: var(--sp-6) var(--sp-5);
    color: var(--ink-4);
    text-align: center;
}

.console-foot {
    flex-wrap: wrap;
    border-top: 1px solid var(--line-soft);
    border-bottom: 0;
}

/* Pipeline stacked vertically for the right rail --------------------------- */

.pipeline.pipeline-stacked {
    grid-template-columns: 1fr;
}

.pipeline-stacked .pipeline-stage {
    padding: var(--sp-4) 0 0;
    border-left: 0;
}

    .pipeline-stacked .pipeline-stage + .pipeline-stage {
        margin-top: var(--sp-4);
        padding-left: 0;
        border-top: 1px solid var(--line-soft);
    }

    .pipeline-stacked .pipeline-stage:first-child {
        padding-top: 0;
    }

/* Responsive --------------------------------------------------------------- */

/* Dense desktop / laptop: right rail drops below, its two cards side by side. */
@media (max-width: 1150px) {

    .console {
        grid-template-columns: 230px minmax(0, 1fr);
    }

    .console-rail-right {
        position: static;
        grid-column: 1 / -1;
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        align-items: start;
    }

        /* Only one card present (no reminders): let it span. */
        .console-rail-right > :only-child {
            grid-column: 1 / -1;
        }

    .pipeline.pipeline-stacked {
        grid-template-columns: 1fr;
    }

    .pipeline-stacked .pipeline-stage:nth-child(3) {
        border-top: 1px solid var(--line-soft);
    }
}

/* Tablet: one column; KPI tiles become a 2 × 2 grid above the worklist. */
@media (max-width: 900px) {

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

    .console-rail-left {
        position: static;
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .console-rail-right {
        grid-template-columns: 1fr;
    }

    .console-worklist .toolbar-search {
        width: 100%;
    }
}

/* Phone: tiles keep 2 × 2 but tighten. */
@media (max-width: 600px) {

    .console-rail-left {
        gap: var(--sp-2);
    }

        .console-rail-left .kpi-tile {
            padding: var(--sp-3);
        }

        .console-rail-left .kpi-value {
            font-size: var(--fs-xl);
        }

        .console-rail-left .kpi-owner {
            display: none;
        }

    .console-chips {
        padding: var(--sp-3) var(--sp-4);
    }

    .pipeline-stacked .pipeline-stage + .pipeline-stage {
        padding-top: var(--sp-4);
    }
}