/* ==========================================================================
   HM Aerospace Admissions Portal — design system
   --------------------------------------------------------------------------
   Load order: Bootstrap → this file → app.css (module styles only).

   1. Tokens                 6. Tables and lists
   2. Bootstrap mapping      7. Status, badges and chips
   3. Base and typography    8. Feedback: alerts, empty states, dialogs
   4. Application shell      9. Navigation inside pages: tabs, segments, pagination
   5. Surfaces, forms,      10. Public (sign-in family) layout
      buttons               11. Utilities, motion and print

   Rules of the road
   - Pages use components, not one-off colours. A module that needs its own
     look (guideline stepper, preview, COL tracker…) lives in app.css and
     reads these tokens.
   - The brand colours from General Settings arrive as --hma-primary,
     --hma-secondary and --hma-accent (set inline by includes/header.php).
     They colour the brand marks: the active menu marker, the crest frame and
     the page-intro tint. Everything that must keep a guaranteed contrast
     (text, buttons, focus) uses the fixed tokens below.
   ========================================================================== */

/* 1. Tokens ---------------------------------------------------------------- */
:root {
    /* Brand (overridden by General Settings) */
    --hma-primary: #0A2E5C;
    --hma-secondary: #1B4F9C;
    --hma-accent: #F7941D;

    /* Neutrals */
    --ui-text: #0F172A;            /* 17.9:1 on white */
    --ui-text-secondary: #475569;  /* 7.6:1 */
    --ui-text-muted: #64748B;      /* 4.8:1, metadata only */
    --ui-bg: #F5F7FC;
    --ui-surface: #FFFFFF;
    --ui-surface-2: #F8FAFD;       /* table heads, quiet panels */
    --ui-surface-3: #EEF2F9;       /* hover, selected rows */
    --ui-border: #E2E8F0;
    --ui-border-strong: #CBD5E1;
    --ui-input-border: #8492A6;    /* 3.2:1, meets the 3:1 control boundary rule */

    /* Accents */
    --ui-primary: #2563EB;
    --ui-primary-hover: #1D4ED8;
    --ui-primary-active: #1E40AF;
    --ui-primary-text: #1D4ED8;    /* links and primary text on white, 6.7:1 */
    --ui-primary-soft: #EEF4FF;
    --ui-primary-soft-border: #C7D7FE;
    --ui-indigo: #4F46E5;
    --ui-violet: #7C3AED;
    --ui-cyan: #22D3EE;            /* sparingly: small highlights only */

    --ui-gradient-primary: linear-gradient(135deg, #2563EB 0%, #4F46E5 100%);
    --ui-gradient-primary-hover: linear-gradient(135deg, #1D4ED8 0%, #4338CA 100%);
    --ui-gradient-nav: linear-gradient(180deg, #0B1739 0%, #13235A 58%, #1E2D68 100%);
    --ui-gradient-intro: linear-gradient(110deg, #EEF4FF 0%, #F4F0FF 100%);

    /* Navigation (on the dark sidebar) */
    --ui-nav-text: #CBD5E1;        /* 8.7:1 on the lightest nav tone */
    --ui-nav-text-strong: #FFFFFF;
    --ui-nav-icon: #A5B4FC;
    --ui-nav-heading: #94A3B8;     /* 5.0:1 */
    --ui-nav-hover: rgba(255, 255, 255, 0.07);
    --ui-nav-active: rgba(255, 255, 255, 0.13);
    --ui-nav-border: rgba(255, 255, 255, 0.10);

    /* Semantic: text / background / border, each pair ≥ 5:1 */
    --ui-success: #047857; --ui-success-bg: #ECFDF5; --ui-success-border: #A7F3D0; --ui-success-solid: #059669;
    --ui-warning: #92400E; --ui-warning-bg: #FFFBEB; --ui-warning-border: #FDE68A; --ui-warning-solid: #F59E0B;
    --ui-danger:  #B91C1C; --ui-danger-bg:  #FEF2F2; --ui-danger-border:  #FECACA; --ui-danger-solid:  #DC2626;
    --ui-info:    #1D4ED8; --ui-info-bg:    #EFF6FF; --ui-info-border:    #BFDBFE;
    --ui-review:  #6D28D9; --ui-review-bg:  #F5F3FF; --ui-review-border:  #DDD6FE;
    --ui-neutral: #334155; --ui-neutral-bg: #F1F5F9; --ui-neutral-border: #CBD5E1;

    /* Typography */
    --ui-font: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    --ui-font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, 'Liberation Mono', monospace;
    --ui-fs-xs: 0.8125rem;   /* 13px metadata */
    --ui-fs-sm: 0.875rem;    /* 14px */
    --ui-fs-md: 0.9375rem;   /* 15px routine interface text */
    --ui-fs-base: 1rem;      /* 16px reading text */
    --ui-fs-lg: 1.125rem;    /* 18px section titles */
    --ui-fs-xl: 1.25rem;     /* 20px */
    --ui-fs-2xl: 1.5rem;     /* 24px */
    --ui-fs-3xl: 1.75rem;    /* 28px page titles */
    --ui-lh: 1.55;
    --ui-lh-tight: 1.25;
    --ui-fw-regular: 400;
    --ui-fw-medium: 500;
    --ui-fw-semibold: 600;
    --ui-fw-bold: 700;

    /* Spacing scale: 4 8 12 16 24 32 48 */
    --ui-space-1: 0.25rem;
    --ui-space-2: 0.5rem;
    --ui-space-3: 0.75rem;
    --ui-space-4: 1rem;
    --ui-space-5: 1.5rem;
    --ui-space-6: 2rem;
    --ui-space-7: 3rem;

    /* Shape */
    --ui-radius-sm: 6px;
    --ui-radius: 8px;        /* controls */
    --ui-radius-md: 10px;
    --ui-radius-lg: 12px;    /* cards */
    --ui-radius-xl: 16px;    /* dialogs */
    --ui-radius-pill: 999px;
    --ui-shadow-xs: 0 1px 2px rgba(15, 23, 42, 0.05);
    --ui-shadow-sm: 0 1px 3px rgba(15, 23, 42, 0.07), 0 1px 2px rgba(15, 23, 42, 0.04);
    --ui-shadow-md: 0 6px 20px rgba(15, 23, 42, 0.08), 0 2px 6px rgba(15, 23, 42, 0.04);
    --ui-shadow-lg: 0 20px 48px rgba(15, 23, 42, 0.18);

    /* Sizes */
    --ui-control-h: 2.625rem;    /* 42px */
    --ui-control-h-sm: 2.125rem; /* 34px */
    --ui-control-h-lg: 3rem;     /* 48px */
    --ui-content-max: 1440px;
    --ui-form-max: 760px;
    --ui-reading-max: 72ch;
    --ui-sidebar-w: 264px;
    --ui-sidebar-w-collapsed: 76px;
    --ui-topbar-h: 60px;
    /* Breakpoints (Bootstrap's, for reference; media queries cannot read vars):
       sm 576 · md 768 · lg 992 (sidebar becomes a drawer below) · xl 1200 · xxl 1400 */

    /* Focus */
    --ui-focus-color: #2563EB;
    --ui-focus-ring: 0 0 0 3px rgba(37, 99, 235, 0.32);
    --ui-focus-color-on-dark: #93C5FD;

    /* Motion */
    --ui-ease: cubic-bezier(0.2, 0.8, 0.2, 1);
    --ui-duration-fast: 120ms;
    --ui-duration: 180ms;
    --ui-duration-slow: 260ms;

    /* Layering (Bootstrap: dropdown 1000, sticky 1020, modal 1055, tooltip 1080) */
    --ui-z-topbar: 1020;
    --ui-z-backdrop: 1039;
    --ui-z-sidebar: 1040;
    --ui-z-skip: 1100;
}

/* The menu takes its tone from the brand colours in General Settings: the
   primary (navy) at the top, blending into the secondary deepened toward
   indigo at the foot. With the defaults this is #081E40 → #0A2752 → #1D2D67;
   menu text keeps ≥ 8:1 contrast on all three. Browsers without color-mix()
   keep the fixed gradient above. */
@supports (background: color-mix(in srgb, red, blue)) {
    :root {
        --ui-gradient-nav: linear-gradient(180deg,
            color-mix(in srgb, var(--hma-primary) 55%, #050B1F) 0%,
            color-mix(in srgb, var(--hma-primary) 70%, #0B1739) 55%,
            color-mix(in srgb, var(--hma-secondary) 35%, #1E1B4B) 100%);
    }
}

/* 2. Bootstrap mapping ------------------------------------------------------ */
:root {
    --bs-body-font-family: var(--ui-font);
    --bs-body-font-size: var(--ui-fs-base);
    --bs-body-line-height: var(--ui-lh);
    --bs-body-color: var(--ui-text);
    --bs-body-color-rgb: 15, 23, 42;
    --bs-body-bg: var(--ui-bg);
    --bs-emphasis-color: var(--ui-text);
    --bs-secondary-color: var(--ui-text-secondary);
    --bs-secondary-color-rgb: 71, 85, 105;
    --bs-tertiary-color: var(--ui-text-muted);
    --bs-secondary-bg: var(--ui-surface-3);
    --bs-tertiary-bg: var(--ui-surface-2);
    --bs-heading-color: var(--ui-text);
    --bs-border-color: var(--ui-border);
    --bs-border-color-translucent: rgba(15, 23, 42, 0.1);
    --bs-border-radius: var(--ui-radius);
    --bs-border-radius-sm: var(--ui-radius-sm);
    --bs-border-radius-lg: var(--ui-radius-lg);
    --bs-border-radius-xl: var(--ui-radius-xl);
    --bs-box-shadow-sm: var(--ui-shadow-sm);
    --bs-box-shadow: var(--ui-shadow-md);
    --bs-primary: #2563EB;
    --bs-primary-rgb: 37, 99, 235;
    --bs-primary-text-emphasis: #1E40AF;
    --bs-primary-bg-subtle: var(--ui-primary-soft);
    --bs-primary-border-subtle: var(--ui-primary-soft-border);
    --bs-secondary: #475569;
    --bs-secondary-rgb: 71, 85, 105;
    --bs-success: #059669;
    --bs-success-rgb: 5, 150, 105;
    --bs-success-text-emphasis: var(--ui-success);
    --bs-success-bg-subtle: var(--ui-success-bg);
    --bs-success-border-subtle: var(--ui-success-border);
    --bs-danger: #DC2626;
    --bs-danger-rgb: 220, 38, 38;
    --bs-danger-text-emphasis: var(--ui-danger);
    --bs-danger-bg-subtle: var(--ui-danger-bg);
    --bs-danger-border-subtle: var(--ui-danger-border);
    --bs-warning-text-emphasis: var(--ui-warning);
    --bs-warning-bg-subtle: var(--ui-warning-bg);
    --bs-warning-border-subtle: var(--ui-warning-border);
    --bs-info: #0E7490;
    --bs-info-rgb: 14, 116, 144;
    --bs-info-text-emphasis: var(--ui-info);
    --bs-info-bg-subtle: var(--ui-info-bg);
    --bs-info-border-subtle: var(--ui-info-border);
    --bs-link-color: var(--ui-primary-text);
    --bs-link-color-rgb: 29, 78, 216;
    --bs-link-hover-color: var(--ui-primary-active);
    --bs-link-hover-color-rgb: 30, 64, 175;
    --bs-focus-ring-color: rgba(37, 99, 235, 0.32);
    --bs-code-color: #6D28D9;
}

/* 3. Base and typography ---------------------------------------------------- */
*,
*::before,
*::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--ui-topbar-h) + var(--ui-space-4)); }

body {
    margin: 0;
    min-height: 100vh;
    font-family: var(--ui-font);
    font-size: var(--ui-fs-base);
    line-height: var(--ui-lh);
    color: var(--ui-text);
    background: var(--ui-bg);
    letter-spacing: 0;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    color: var(--ui-text);
    font-weight: var(--ui-fw-bold);
    line-height: var(--ui-lh-tight);
    letter-spacing: -0.01em;
    margin-bottom: var(--ui-space-3);
}
h1, .h1 { font-size: var(--ui-fs-3xl); }
h2, .h2 { font-size: var(--ui-fs-xl); }
h3, .h3 { font-size: var(--ui-fs-lg); }
h4, .h4 { font-size: var(--ui-fs-lg); }
h5, .h5 { font-size: var(--ui-fs-lg); font-weight: var(--ui-fw-semibold); }
h6, .h6 { font-size: var(--ui-fs-base); font-weight: var(--ui-fw-semibold); }

p { margin-bottom: var(--ui-space-3); }
small, .small { font-size: var(--ui-fs-sm); }
.text-muted, .text-body-secondary { color: var(--ui-text-secondary) !important; }
.text-primary { color: var(--ui-primary-text) !important; }
.text-success { color: var(--ui-success) !important; }
.text-danger { color: var(--ui-danger) !important; }
.text-info { color: var(--ui-info) !important; }
/* text-warning is kept for icons (stars); as text it would fail contrast. */
.text-warning { color: #D97706 !important; }
.fw-semibold { font-weight: var(--ui-fw-semibold) !important; }
.lead { font-size: var(--ui-fs-lg); color: var(--ui-text-secondary); }

a { color: var(--ui-primary-text); text-underline-offset: 0.15em; }
a:hover { color: var(--ui-primary-active); }

code, kbd, samp, .font-monospace { font-family: var(--ui-font-mono); }
code { font-size: 0.875em; color: #5B21B6; background: var(--ui-review-bg); padding: 0.1em 0.35em; border-radius: 4px; word-break: break-word; }
hr { border-color: var(--ui-border); opacity: 1; margin: var(--ui-space-5) 0; }

::selection { background: #C7D7FE; color: var(--ui-text); }

/* One focus treatment everywhere. Mouse clicks do not show it (:focus-visible). */
:focus-visible {
    outline: 2px solid var(--ui-focus-color);
    outline-offset: 2px;
}
.btn:focus-visible,
.form-control:focus-visible,
.form-select:focus-visible,
.form-check-input:focus-visible,
.page-link:focus-visible,
.nav-link:focus-visible,
.dropdown-item:focus-visible {
    outline: 2px solid var(--ui-focus-color);
    outline-offset: 2px;
    box-shadow: var(--ui-focus-ring);
}

.skip-link {
    position: fixed;
    left: var(--ui-space-4);
    top: -100px;
    z-index: var(--ui-z-skip);
    padding: var(--ui-space-2) var(--ui-space-4);
    background: var(--ui-text);
    color: #FFF;
    border-radius: var(--ui-radius);
    font-weight: var(--ui-fw-semibold);
    text-decoration: none;
}
.skip-link:focus { top: var(--ui-space-3); color: #FFF; }

/* 4. Application shell ------------------------------------------------------ */
.portal-shell {
    min-height: 100vh;
    display: block;
    padding: 0;
    gap: 0;
    background: var(--ui-bg);
}

/* The sidebar is fixed to the viewport, so it is always full height however
   long the page is, and the page scrolls independently beside it. */
.portal-sidebar {
    position: fixed;
    inset: 0 auto 0 0;
    z-index: var(--ui-z-sidebar);
    width: var(--ui-sidebar-w);
    height: 100vh;
    height: 100dvh;
    display: flex;
    flex-direction: column;
    padding: var(--ui-space-4) var(--ui-space-3) var(--ui-space-3);
    color: var(--ui-nav-text);
    background: var(--ui-gradient-nav);
    border: 0;
    border-radius: 0;
    box-shadow: none;
    overflow: hidden;
}
/* Width animates only while the person toggles it (app.js sets the class),
   never because the window was resized. */
.sidebar-animating .portal-sidebar { transition: width var(--ui-duration) var(--ui-ease); }
.sidebar-animating .portal-main { transition: margin-left var(--ui-duration) var(--ui-ease); }

.portal-main {
    min-width: 0;
    min-height: 100vh;
    margin-left: var(--ui-sidebar-w);
    padding: 0;
    display: flex;
    flex-direction: column;
}

/* Brand block */
.sidebar-brand {
    display: flex;
    align-items: center;
    gap: var(--ui-space-2);
    padding: 0 var(--ui-space-1) var(--ui-space-4);
    margin-bottom: var(--ui-space-2);
    border-bottom: 1px solid var(--ui-nav-border);
}
.sidebar-brand__link {
    display: flex;
    align-items: center;
    gap: var(--ui-space-3);
    min-width: 0;
    flex: 1;
    color: #FFF;
    text-decoration: none;
    border-radius: var(--ui-radius);
}
.sidebar-brand__link:hover { color: #FFF; }
.sidebar-brand__link:focus-visible { outline-color: var(--ui-focus-color-on-dark); }
.brand-crest {
    width: 44px;
    height: 44px;
    flex: 0 0 44px;
    display: grid;
    place-items: center;
    overflow: hidden;
    border-radius: var(--ui-radius);
    background: #FFF;
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.12);
}
.brand-crest img { width: 40px; height: 40px; object-fit: contain; }
.sidebar-brand__text { display: grid; min-width: 0; line-height: 1.25; }
.sidebar-brand__text strong { font-size: var(--ui-fs-md); font-weight: var(--ui-fw-bold); color: #FFF; }
.sidebar-brand__text small {
    font-size: var(--ui-fs-xs);
    color: var(--ui-nav-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.sidebar-close {
    display: none;
    width: 40px;
    height: 40px;
    flex: 0 0 40px;
    border: 1px solid var(--ui-nav-border);
    border-radius: var(--ui-radius);
    color: #FFF;
    background: transparent;
}
.sidebar-close:focus-visible { outline-color: var(--ui-focus-color-on-dark); }

/* Navigation */
.portal-nav {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
    overflow-y: auto;
    overflow-x: hidden;
    padding: var(--ui-space-1) var(--ui-space-1) var(--ui-space-3);
    margin: 0 calc(var(--ui-space-1) * -1);
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.22) transparent;
}

.portal-nav .nav-link,
.sidebar-footer .nav-link {
    position: relative;
    display: flex;
    align-items: center;
    gap: var(--ui-space-3);
    min-height: 40px;
    width: 100%;
    padding: var(--ui-space-2) var(--ui-space-3);
    border: 0;
    border-radius: var(--ui-radius);
    color: var(--ui-nav-text);
    background: transparent;
    font-size: var(--ui-fs-md);
    font-weight: var(--ui-fw-medium);
    line-height: 1.3;
    text-align: left;
    text-decoration: none;
    white-space: normal;
    transition: background var(--ui-duration-fast) var(--ui-ease), color var(--ui-duration-fast) var(--ui-ease);
}
.portal-nav .nav-link > i:first-child,
.sidebar-footer .nav-link > i:first-child {
    flex: 0 0 20px;
    width: 20px;
    margin: 0;
    font-size: 1rem;
    text-align: center;
    color: var(--ui-nav-icon);
}
.portal-nav .nav-link:hover,
.sidebar-footer .nav-link:hover {
    color: var(--ui-nav-text-strong);
    background: var(--ui-nav-hover);
    transform: none;
}
.portal-nav .nav-link:focus-visible,
.sidebar-footer .nav-link:focus-visible {
    outline: 2px solid var(--ui-focus-color-on-dark);
    outline-offset: -2px;
    box-shadow: none;
}

/* Current page: a light fill, bold white text, and a bar in the brand accent.
   Three cues, so it never relies on colour alone. */
.portal-nav .nav-link.active {
    color: var(--ui-nav-text-strong);
    background: var(--ui-nav-active);
    font-weight: var(--ui-fw-semibold);
    box-shadow: none;
    transform: none;
}
.portal-nav .nav-link.active::before {
    content: '';
    position: absolute;
    left: 0;
    top: 8px;
    bottom: 8px;
    width: 3px;
    border-radius: 0 3px 3px 0;
    background: var(--hma-accent);
}
.portal-nav .nav-link.active::after { content: none; }
.portal-nav .nav-link.active > i:first-child { color: #FFF; }

/* Groups: a compact section label that opens and closes its items. */
.nav-group { display: flex; flex-direction: column; margin-top: var(--ui-space-2); }
.portal-nav .nav-group__toggle {
    min-height: 34px;
    padding: var(--ui-space-1) var(--ui-space-3);
    color: var(--ui-nav-heading);
    font-size: var(--ui-fs-xs);
    font-weight: var(--ui-fw-semibold);
    letter-spacing: 0.01em;
}
.portal-nav .nav-group__toggle > i:first-child { display: none; }
.portal-nav .nav-group__toggle:hover { color: #E2E8F0; background: transparent; }
.portal-nav .nav-group__toggle:hover .nav-group__label { text-decoration: underline; text-underline-offset: 3px; }
.nav-group__label { flex: 1 1 auto; min-width: 0; }
.nav-group__chevron {
    flex: 0 0 auto;
    margin-left: auto;
    font-size: 0.7rem;
    color: var(--ui-nav-heading);
    transition: transform var(--ui-duration) var(--ui-ease);
}
.nav-group__toggle[aria-expanded="true"] .nav-group__chevron { transform: rotate(180deg); }
/* A closed group that holds the current page keeps a marker on its heading. */
.nav-group--open > .nav-group__toggle[aria-expanded="false"] .nav-group__label::after {
    content: '';
    display: inline-block;
    width: 6px;
    height: 6px;
    margin-left: var(--ui-space-2);
    vertical-align: middle;
    border-radius: 50%;
    background: var(--hma-accent);
}
.nav-group__items { display: flex; flex-direction: column; gap: 2px; }
.portal-nav .nav-sublink { min-height: 40px; }

/* Count badge on a nav item (applicant Documents). */
.portal-nav .nav-link--badged .nav-link__text { flex: 1 1 auto; min-width: 0; }
.nav-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    min-width: 22px;
    height: 22px;
    padding: 0 7px;
    margin-left: auto;
    border-radius: var(--ui-radius-pill);
    background: rgba(255, 255, 255, 0.16);
    color: #FFF;
    font-size: 0.75rem;
    font-weight: var(--ui-fw-bold);
    justify-content: center;
}
.nav-badge--warning { background: #FDE68A; color: #78350F; }
.nav-badge--muted { background: transparent; color: var(--ui-nav-heading); }

/* Sidebar footer: sign out, collapse */
.sidebar-footer {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding-top: var(--ui-space-2);
    border-top: 1px solid var(--ui-nav-border);
}
.sidebar-footer form { margin: 0; }
.sidebar-footer__note {
    display: block;
    padding: var(--ui-space-2) var(--ui-space-3) 0;
    color: var(--ui-nav-heading);
    font-size: var(--ui-fs-xs);
    line-height: 1.4;
}
.sidebar-footer__note i { color: #6EE7B7; margin-right: 4px; }

/* Topbar */
.portal-topbar {
    position: sticky;
    top: 0;
    z-index: var(--ui-z-topbar);
    display: flex;
    align-items: center;
    gap: var(--ui-space-3);
    min-height: var(--ui-topbar-h);
    padding: var(--ui-space-2) clamp(var(--ui-space-4), 2.4vw, var(--ui-space-6));
    border: 0;
    border-bottom: 1px solid var(--ui-border);
    border-radius: 0;
    color: var(--ui-text);
    background: rgba(255, 255, 255, 0.92);
    box-shadow: none;
    -webkit-backdrop-filter: saturate(1.4) blur(10px);
    backdrop-filter: saturate(1.4) blur(10px);
}
.topbar-context {
    min-width: 0;
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    gap: var(--ui-space-2);
    color: var(--ui-text-secondary);
    font-size: var(--ui-fs-sm);
}
.topbar-context__portal { font-weight: var(--ui-fw-semibold); color: var(--ui-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.portal-topbar-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: nowrap;
    flex-shrink: 0;
    gap: var(--ui-space-2);
    margin-left: auto;
}
.topbar-icon-button,
.portal-icon-button,
.portal-menu-toggle {
    position: relative;
    display: inline-grid;
    place-items: center;
    width: 40px;
    height: 40px;
    flex: 0 0 40px;
    padding: 0;
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius);
    color: var(--ui-text-secondary);
    background: var(--ui-surface);
    text-decoration: none;
    transition: background var(--ui-duration-fast), color var(--ui-duration-fast), border-color var(--ui-duration-fast);
}
.topbar-icon-button:hover,
.portal-icon-button:hover,
.portal-menu-toggle:hover {
    color: var(--ui-primary-text);
    border-color: var(--ui-primary-soft-border);
    background: var(--ui-primary-soft);
}
.topbar-count {
    position: absolute;
    top: -6px;
    right: -6px;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    display: grid;
    place-items: center;
    border: 2px solid #FFF;
    border-radius: var(--ui-radius-pill);
    background: var(--ui-danger-solid);
    color: #FFF;
    font-size: 0.6875rem;
    font-weight: var(--ui-fw-bold);
    line-height: 1;
}
.topbar-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 34px;
    padding: 0 var(--ui-space-3);
    border-radius: var(--ui-radius-pill);
    border: 1px solid transparent;
    font-size: var(--ui-fs-sm);
    font-weight: var(--ui-fw-semibold);
    text-decoration: none;
    white-space: nowrap;
}
.topbar-chip--warning { color: var(--ui-warning); background: var(--ui-warning-bg); border-color: var(--ui-warning-border); }
.topbar-chip--warning:hover { color: #78350F; background: #FEF3C7; }
.topbar-chip--preview { color: #5B21B6; background: var(--ui-review-bg); border-color: var(--ui-review-border); }

/* Account menu */
.account-menu__toggle {
    display: inline-flex;
    align-items: center;
    gap: var(--ui-space-2);
    max-width: 280px;
    min-height: 40px;
    padding: 0 var(--ui-space-2) 0 4px;
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius-pill);
    background: var(--ui-surface);
    color: var(--ui-text);
    font-size: var(--ui-fs-sm);
    font-weight: var(--ui-fw-medium);
}
.account-menu__toggle:hover { border-color: var(--ui-border-strong); background: var(--ui-surface-2); }
.account-menu__toggle::after { margin-left: 2px; color: var(--ui-text-muted); }
.account-avatar {
    width: 32px;
    height: 32px;
    flex: 0 0 32px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--ui-gradient-primary);
    color: #FFF;
    font-size: 0.8125rem;
    font-weight: var(--ui-fw-bold);
    letter-spacing: 0.02em;
}
.account-menu__email { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.account-menu .dropdown-menu { min-width: 260px; }
.account-menu__header { padding: var(--ui-space-2) var(--ui-space-4) var(--ui-space-3); border-bottom: 1px solid var(--ui-border); margin-bottom: var(--ui-space-1); }
.account-menu__header strong { display: block; font-size: var(--ui-fs-sm); color: var(--ui-text); word-break: break-all; }
.account-menu__header span { font-size: var(--ui-fs-xs); color: var(--ui-text-secondary); }

/* Content column */
.portal-content {
    flex: 1 0 auto;
    width: 100%;
    max-width: calc(var(--ui-content-max) + 2 * var(--ui-space-6));
    margin: 0 auto;
    padding: var(--ui-space-5) clamp(var(--ui-space-4), 2.4vw, var(--ui-space-6)) var(--ui-space-7);
    animation: none;
}
.portal-content:focus { outline: none; }
.portal-content > * { animation: none; }

/* Page header: breadcrumbs, the one <h1>, a short description, the primary action. */
.page-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--ui-space-3) var(--ui-space-5);
    margin-bottom: var(--ui-space-5);
}
.page-header__main { min-width: 0; flex: 1 1 420px; }
.page-eyebrow { margin: 0 0 var(--ui-space-1); color: var(--ui-text-secondary); font-size: var(--ui-fs-sm); font-weight: var(--ui-fw-medium); }
.page-header .breadcrumb {
    --bs-breadcrumb-divider-color: var(--ui-text-muted);
    --bs-breadcrumb-item-active-color: var(--ui-text-secondary);
    --bs-breadcrumb-item-padding-x: 0.4rem;
    margin-bottom: var(--ui-space-1);
    font-size: var(--ui-fs-sm);
    color: var(--ui-text-secondary);
}
.page-header .breadcrumb-item + .breadcrumb-item::before { content: "\203A"; font-size: 1.05em; line-height: 1; }
.page-header .breadcrumb a { color: var(--ui-text-secondary); text-decoration: none; }
.page-header .breadcrumb a:hover { color: var(--ui-primary-text); text-decoration: underline; }
.page-title {
    margin: 0;
    font-size: clamp(1.5rem, 1.25rem + 0.9vw, var(--ui-fs-3xl));
    font-weight: var(--ui-fw-bold);
    line-height: 1.2;
    letter-spacing: -0.015em;
    color: var(--ui-text);
    overflow-wrap: anywhere;
}
.page-description {
    max-width: var(--ui-reading-max);
    margin: var(--ui-space-2) 0 0;
    color: var(--ui-text-secondary);
    font-size: var(--ui-fs-md);
}
.page-header__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ui-space-2); }

/* Collapsed sidebar (desktop): an icon rail. Labels stay in the DOM (clipped,
   not removed), so links keep their accessible names; tooltips show on hover
   and focus. Groups are shown open as short ruled sections. */
@media (min-width: 992px) {
    .sidebar-collapsed .portal-sidebar { width: var(--ui-sidebar-w-collapsed); padding-left: var(--ui-space-2); padding-right: var(--ui-space-2); }
    .sidebar-collapsed .portal-main { margin-left: var(--ui-sidebar-w-collapsed); }
    .sidebar-collapsed .sidebar-brand { justify-content: center; padding-left: 0; padding-right: 0; }
    .sidebar-collapsed .sidebar-brand__link { flex: 0 0 auto; }
    .sidebar-collapsed .sidebar-brand__text,
    .sidebar-collapsed .sidebar-footer__note,
    .sidebar-collapsed .nav-group__chevron,
    .sidebar-collapsed .nav-badge { display: none; }
    .sidebar-collapsed .portal-nav .nav-link,
    .sidebar-collapsed .sidebar-footer .nav-link {
        width: 44px;
        min-height: 40px;
        margin: 0 auto;
        padding: var(--ui-space-2) 12px;
        overflow: hidden;
        white-space: nowrap;
        gap: 24px;
    }
    .sidebar-collapsed .nav-group__toggle { display: none; }
    .sidebar-collapsed .nav-group .collapse { display: block !important; height: auto !important; }
    .sidebar-collapsed .nav-group__items { margin: var(--ui-space-1) 0; padding: var(--ui-space-1) 0 0; border-left: 0; border-top: 1px solid var(--ui-nav-border); }
    .sidebar-collapsed .portal-nav .nav-link.active::before { top: 10px; bottom: 10px; }
}

/* Drawer below 992px */
.portal-sidebar-backdrop { display: none; }

@media (max-width: 991.98px) {
    .portal-main { margin-left: 0; }
    .portal-sidebar {
        width: min(86vw, 300px);
        transform: translateX(-102%);
        box-shadow: var(--ui-shadow-lg);
        visibility: hidden;
        transition: transform var(--ui-duration-slow) var(--ui-ease), visibility 0s linear var(--ui-duration-slow);
    }
    .portal-menu-open .portal-sidebar {
        transform: translateX(0);
        visibility: visible;
        transition: transform var(--ui-duration-slow) var(--ui-ease), visibility 0s;
    }
    .sidebar-close { display: inline-grid; place-items: center; }
    .portal-sidebar-backdrop {
        position: fixed;
        inset: 0;
        z-index: var(--ui-z-backdrop);
        display: block;
        border: 0;
        padding: 0;
        background: rgba(11, 23, 57, 0.5);
        opacity: 0;
        pointer-events: none;
        transition: opacity var(--ui-duration-slow) var(--ui-ease);
    }
    .portal-menu-open .portal-sidebar-backdrop { opacity: 1; pointer-events: auto; }
    .portal-menu-open { overflow: hidden; }
    .portal-menu-toggle { position: static; display: inline-grid; }
}
@media (min-width: 992px) {
    .portal-menu-toggle[data-portal-menu-toggle] { display: none; }
}
.sidebar-collapse-toggle { display: none; }
@media (min-width: 992px) {
    .sidebar-collapse-toggle { display: inline-grid; }
}

/* 5. Surfaces, forms, buttons ---------------------------------------------- */
.card {
    --bs-card-border-color: var(--ui-border);
    --bs-card-border-radius: var(--ui-radius-lg);
    --bs-card-inner-border-radius: calc(var(--ui-radius-lg) - 1px);
    --bs-card-cap-bg: var(--ui-surface);
    --bs-card-spacer-y: var(--ui-space-5);
    --bs-card-spacer-x: var(--ui-space-5);
    --bs-card-cap-padding-y: var(--ui-space-4);
    --bs-card-cap-padding-x: var(--ui-space-5);
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius-lg);
    background: var(--ui-surface);
    box-shadow: var(--ui-shadow-xs);
}
.portal-content .card { border-color: var(--ui-border); border-radius: var(--ui-radius-lg); box-shadow: var(--ui-shadow-xs); }
.card .card-body,
.portal-content .card .card-body { padding: var(--ui-space-5); }
.card-header { background: var(--ui-surface); border-bottom: 1px solid var(--ui-border); font-weight: var(--ui-fw-semibold); }
.card-footer { background: var(--ui-surface-2); border-top: 1px solid var(--ui-border); }
.card-title,
.portal-content .card h5,
.portal-content .card h6,
.portal-content .card .h5 {
    color: var(--ui-text);
    font-weight: var(--ui-fw-semibold);
    letter-spacing: -0.005em;
}
.portal-content .card h5,
.portal-content .card .h5,
.card-title { font-size: var(--ui-fs-lg); }
.portal-content .card h6 { font-size: var(--ui-fs-base); }
/* Icons in front of card headings were decorative noise beside a clear title. */
.portal-content .card h5 > i.fa-solid:first-child,
.portal-content .card h5 > i.fa-regular:first-child { color: var(--ui-primary); font-size: 0.95em; margin-right: 0.35rem; }

.section-title { font-size: var(--ui-fs-lg); font-weight: var(--ui-fw-semibold); margin: 0 0 var(--ui-space-3); }
.section-subtitle { font-size: var(--ui-fs-base); font-weight: var(--ui-fw-semibold); margin: 0 0 var(--ui-space-2); }
.section-description { color: var(--ui-text-secondary); font-size: var(--ui-fs-md); max-width: var(--ui-reading-max); margin-bottom: var(--ui-space-4); }

/* Card header row: title left, actions right */
.card-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--ui-space-2) var(--ui-space-4);
    margin-bottom: var(--ui-space-4);
}
.card-heading > :is(h2, h3, h4, h5, h6) { margin: 0; }
.card-heading__meta { color: var(--ui-text-secondary); font-size: var(--ui-fs-sm); }

/* Compact page introduction with a light brand tint (not a hero). */
.page-intro {
    padding: var(--ui-space-4) var(--ui-space-5);
    border: 1px solid var(--ui-primary-soft-border);
    border-radius: var(--ui-radius-lg);
    background: var(--ui-gradient-intro);
    color: var(--ui-text);
}
.page-intro p:last-child { margin-bottom: 0; }

/* Definition list for record details */
.detail-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: var(--ui-space-4) var(--ui-space-5);
    margin: 0;
}
.detail-list > div { min-width: 0; }
.detail-list dt { font-size: var(--ui-fs-sm); font-weight: var(--ui-fw-medium); color: var(--ui-text-secondary); margin-bottom: 2px; }
.detail-list dd { margin: 0; font-size: var(--ui-fs-base); color: var(--ui-text); overflow-wrap: anywhere; }
.detail-list .detail-list__wide { grid-column: 1 / -1; }

/* Record summary: identity facts on the left, the next actions on the right. */
.record-summary .card-body {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--ui-space-4) var(--ui-space-6);
}
.record-summary__facts { display: flex; flex-wrap: wrap; gap: var(--ui-space-4) var(--ui-space-6); min-width: 0; }
.record-fact { display: grid; gap: 4px; min-width: 0; }
.record-fact__label { color: var(--ui-text-secondary); font-size: var(--ui-fs-xs); font-weight: var(--ui-fw-medium); }
.record-fact > span:not(.record-fact__label) { font-weight: var(--ui-fw-semibold); }
.record-summary__actions { display: flex; flex-wrap: wrap; gap: var(--ui-space-2); }
.record-summary__actions form { margin: 0; }
.star-button.is-starred { color: #92400E; border-color: var(--ui-warning-border); background: var(--ui-warning-bg); }
.star-button.is-starred i { color: #D97706; }

/* A control with its own small action: input + Save on one row. */
.input-row { display: flex; gap: var(--ui-space-2); align-items: stretch; }
.input-row > .form-control,
.input-row > .form-select { flex: 1 1 auto; min-width: 0; }
.input-row > .btn { flex: 0 0 auto; }

/* A file a person can open: icon, name (truncated), full name in the title. */
.file-link { display: inline-flex; align-items: center; gap: 0.4rem; max-width: 100%; font-weight: var(--ui-fw-medium); text-decoration: none; }
.file-link:hover .file-link__name { text-decoration: underline; }
.file-link__name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 22ch; }
.table .cell-remark { min-width: 14ch; max-width: 32ch; overflow-wrap: break-word; }

/* Forms */
.form-label {
    margin-bottom: 6px;
    color: var(--ui-text);
    font-size: var(--ui-fs-sm);
    font-weight: var(--ui-fw-semibold);
    line-height: 1.4;
}
.form-text,
.form-hint { margin-top: 6px; color: var(--ui-text-secondary); font-size: var(--ui-fs-sm); line-height: 1.5; }
.required-mark,
.form-label .text-danger { color: var(--ui-danger) !important; font-weight: var(--ui-fw-bold); margin-left: 2px; }
.form-control,
.form-select {
    min-height: var(--ui-control-h);
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--ui-input-border);
    border-radius: var(--ui-radius);
    background-color: var(--ui-surface);
    color: var(--ui-text);
    font-size: var(--ui-fs-base);  /* 16px: stops iOS zooming on focus */
    line-height: 1.5;
    box-shadow: none;
    transition: border-color var(--ui-duration-fast), box-shadow var(--ui-duration-fast);
}
.form-select { padding-right: 2.25rem; }
.form-control::placeholder { color: var(--ui-text-muted); opacity: 1; }
.form-control:hover:not(:disabled):not([readonly]),
.form-select:hover:not(:disabled) { border-color: #64748B; }
.form-control:focus,
.form-select:focus {
    border-color: var(--ui-primary);
    box-shadow: var(--ui-focus-ring);
    outline: 0;
}
.form-control:disabled,
.form-select:disabled,
.form-control[readonly] { background-color: var(--ui-surface-2); color: var(--ui-text-secondary); border-color: var(--ui-border-strong); }
.form-control-sm,
.form-select-sm { min-height: var(--ui-control-h-sm); font-size: var(--ui-fs-sm); padding-top: 0.3rem; padding-bottom: 0.3rem; }
textarea.form-control { min-height: 96px; }
.form-control[type="file"] { padding: 0.45rem 0.5rem; }
.form-control::file-selector-button {
    margin: -0.45rem 0.75rem -0.45rem -0.5rem;
    padding: 0.55rem 0.9rem;
    border: 0;
    border-right: 1px solid var(--ui-border-strong);
    background: var(--ui-surface-3);
    color: var(--ui-text);
    font-weight: var(--ui-fw-semibold);
}
.form-control.is-invalid,
.form-select.is-invalid,
.was-validated .form-control:invalid { border-color: var(--ui-danger-solid); }
.form-control.is-invalid:focus,
.form-select.is-invalid:focus { box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.22); }
.invalid-feedback { color: var(--ui-danger); font-size: var(--ui-fs-sm); font-weight: var(--ui-fw-medium); }
.form-check { min-height: 1.6rem; }
.form-check-input { width: 1.125rem; height: 1.125rem; margin-top: 0.2rem; border-color: var(--ui-input-border); }
.form-check-input:checked { background-color: var(--ui-primary); border-color: var(--ui-primary); }
.form-check-input:focus { border-color: var(--ui-primary); box-shadow: var(--ui-focus-ring); }
.form-switch .form-check-input { width: 2.25rem; height: 1.25rem; margin-top: 0.15rem; }
.form-check-label { font-size: var(--ui-fs-md); }
.input-group > .form-control,
.input-group > .form-select { min-height: var(--ui-control-h); }
.input-group-text { border-color: var(--ui-input-border); background: var(--ui-surface-2); color: var(--ui-text-secondary); }

/* Form layout helpers */
.form-section { padding-top: var(--ui-space-5); margin-top: var(--ui-space-5); border-top: 1px solid var(--ui-border); }
.form-section:first-child,
.form-section:first-of-type { padding-top: 0; margin-top: 0; border-top: 0; }
.form-section__title { font-size: var(--ui-fs-base); font-weight: var(--ui-fw-semibold); margin-bottom: var(--ui-space-3); }
.form-narrow { max-width: var(--ui-form-max); }
.form-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--ui-space-2) var(--ui-space-3);
    margin-top: var(--ui-space-5);
}
.form-actions--end { justify-content: flex-end; }

/* Buttons */
.btn {
    --bs-btn-padding-x: 1rem;
    --bs-btn-padding-y: 0.5rem;
    --bs-btn-font-size: var(--ui-fs-md);
    --bs-btn-font-weight: var(--ui-fw-semibold);
    --bs-btn-line-height: 1.4;
    --bs-btn-border-radius: var(--ui-radius);
    --bs-btn-focus-box-shadow: var(--ui-focus-ring);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    min-height: var(--ui-control-h);
    letter-spacing: 0;
    text-align: center;
    transition: background var(--ui-duration-fast) var(--ui-ease), border-color var(--ui-duration-fast) var(--ui-ease), color var(--ui-duration-fast) var(--ui-ease), box-shadow var(--ui-duration-fast) var(--ui-ease);
}
.btn > i,
.btn > .fa-solid,
.btn > .fa-regular { font-size: 0.95em; }
.btn-sm {
    --bs-btn-padding-x: 0.75rem;
    --bs-btn-padding-y: 0.3rem;
    --bs-btn-font-size: var(--ui-fs-sm);
    --bs-btn-border-radius: var(--ui-radius-sm);
    min-height: var(--ui-control-h-sm);
    gap: 0.35rem;
}
.btn-lg { --bs-btn-padding-x: 1.25rem; --bs-btn-font-size: var(--ui-fs-base); min-height: var(--ui-control-h-lg); }
.w-100.btn { display: flex; }

.btn-primary,
.portal-content .btn-primary,
.auth-shell .btn-primary {
    --bs-btn-color: #FFF;
    --bs-btn-bg: var(--ui-primary);
    --bs-btn-border-color: transparent;
    --bs-btn-hover-color: #FFF;
    --bs-btn-hover-bg: var(--ui-primary-hover);
    --bs-btn-hover-border-color: transparent;
    --bs-btn-active-color: #FFF;
    --bs-btn-active-bg: var(--ui-primary-active);
    --bs-btn-active-border-color: transparent;
    --bs-btn-disabled-color: #FFF;
    --bs-btn-disabled-bg: #93A9D8;
    --bs-btn-disabled-border-color: transparent;
    color: #FFF;
    border-color: transparent;
    background: var(--ui-gradient-primary);
    box-shadow: 0 1px 2px rgba(37, 99, 235, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.12);
}
.btn-primary:hover,
.portal-content .btn-primary:hover,
.auth-shell .btn-primary:hover { color: #FFF; background: var(--ui-gradient-primary-hover); border-color: transparent; }
.btn-primary:active,
.btn-primary.active,
.portal-content .btn-primary:active { background: var(--ui-primary-active); }
.btn-primary:disabled,
.btn-primary.disabled { background: #93A9D8; box-shadow: none; opacity: 1; }

/* Secondary: white with a border. Both outline variants read as one style. */
.btn-outline-primary,
.btn-outline-secondary,
.btn-light,
.btn-outline-dark {
    --bs-btn-color: var(--ui-text);
    --bs-btn-bg: var(--ui-surface);
    --bs-btn-border-color: var(--ui-border-strong);
    --bs-btn-hover-color: var(--ui-text);
    --bs-btn-hover-bg: var(--ui-surface-2);
    --bs-btn-hover-border-color: #94A3B8;
    --bs-btn-active-color: var(--ui-text);
    --bs-btn-active-bg: var(--ui-surface-3);
    --bs-btn-active-border-color: #94A3B8;
    --bs-btn-disabled-color: var(--ui-text-muted);
    --bs-btn-disabled-bg: var(--ui-surface-2);
    --bs-btn-disabled-border-color: var(--ui-border);
    box-shadow: var(--ui-shadow-xs);
}
.btn-outline-primary { --bs-btn-color: var(--ui-primary-text); --bs-btn-hover-color: var(--ui-primary-active); --bs-btn-hover-bg: var(--ui-primary-soft); --bs-btn-hover-border-color: var(--ui-primary-soft-border); --bs-btn-active-color: var(--ui-primary-active); --bs-btn-active-bg: #E0EAFF; }
.btn-outline-primary:hover,
.btn-outline-primary:focus-visible { color: var(--ui-primary-active); background: var(--ui-primary-soft); border-color: var(--ui-primary-soft-border); }
.btn-check:checked + .btn-outline-primary,
.btn-outline-primary.active { color: #FFF; background: var(--ui-primary); border-color: var(--ui-primary); }
.btn-secondary {
    --bs-btn-color: #FFF; --bs-btn-bg: #334155; --bs-btn-border-color: #334155;
    --bs-btn-hover-color: #FFF; --bs-btn-hover-bg: #1E293B; --bs-btn-hover-border-color: #1E293B;
}
.btn-dark { --bs-btn-bg: #0F172A; --bs-btn-border-color: #0F172A; --bs-btn-hover-bg: #1E293B; --bs-btn-hover-border-color: #1E293B; }
.btn-success {
    --bs-btn-color: #FFF; --bs-btn-bg: var(--ui-success); --bs-btn-border-color: var(--ui-success);
    --bs-btn-hover-color: #FFF; --bs-btn-hover-bg: #065F46; --bs-btn-hover-border-color: #065F46;
    --bs-btn-active-bg: #064E3B; --bs-btn-disabled-bg: #6EBFA5; --bs-btn-disabled-border-color: #6EBFA5;
}
.btn-danger {
    --bs-btn-color: #FFF; --bs-btn-bg: var(--ui-danger); --bs-btn-border-color: var(--ui-danger);
    --bs-btn-hover-color: #FFF; --bs-btn-hover-bg: #991B1B; --bs-btn-hover-border-color: #991B1B;
    --bs-btn-active-bg: #7F1D1D;
}
.btn-warning,
.btn-warning.btn {
    --bs-btn-color: #451A03; --bs-btn-bg: #FBBF24; --bs-btn-border-color: #FBBF24;
    --bs-btn-hover-color: #451A03; --bs-btn-hover-bg: #F59E0B; --bs-btn-hover-border-color: #F59E0B;
    background-color: #FBBF24 !important;
    border-color: #FBBF24 !important;
    color: #451A03;
}
.btn-warning:hover { background-color: #F59E0B !important; border-color: #F59E0B !important; }
.btn-info { --bs-btn-color: #FFF; --bs-btn-bg: #0E7490; --bs-btn-border-color: #0E7490; --bs-btn-hover-color: #FFF; --bs-btn-hover-bg: #155E75; --bs-btn-hover-border-color: #155E75; }
.btn-outline-success { --bs-btn-color: var(--ui-success); --bs-btn-bg: var(--ui-surface); --bs-btn-border-color: #6EE7B7; --bs-btn-hover-color: #065F46; --bs-btn-hover-bg: var(--ui-success-bg); --bs-btn-hover-border-color: #34D399; --bs-btn-active-color: #FFF; --bs-btn-active-bg: var(--ui-success); }
.btn-outline-danger { --bs-btn-color: var(--ui-danger); --bs-btn-bg: var(--ui-surface); --bs-btn-border-color: #FCA5A5; --bs-btn-hover-color: #991B1B; --bs-btn-hover-bg: var(--ui-danger-bg); --bs-btn-hover-border-color: #F87171; --bs-btn-active-color: #FFF; --bs-btn-active-bg: var(--ui-danger); }
.btn-outline-warning { --bs-btn-color: var(--ui-warning); --bs-btn-bg: var(--ui-surface); --bs-btn-border-color: #FCD34D; --bs-btn-hover-color: #78350F; --bs-btn-hover-bg: var(--ui-warning-bg); --bs-btn-hover-border-color: #F59E0B; --bs-btn-active-color: #451A03; --bs-btn-active-bg: #FBBF24; }
.btn-outline-info { --bs-btn-color: #0E7490; --bs-btn-bg: var(--ui-surface); --bs-btn-border-color: #67E8F9; --bs-btn-hover-color: #155E75; --bs-btn-hover-bg: #ECFEFF; --bs-btn-hover-border-color: #22D3EE; }
.btn-link { --bs-btn-color: var(--ui-primary-text); --bs-btn-hover-color: var(--ui-primary-active); min-height: auto; font-weight: var(--ui-fw-semibold); box-shadow: none; }
.btn-close:focus { box-shadow: var(--ui-focus-ring); }

/* Busy state set by app.js on submit (also disables the button). */
.btn.is-busy { position: relative; pointer-events: none; }
.btn.is-busy::after {
    content: '';
    width: 0.95em;
    height: 0.95em;
    margin-left: 0.25rem;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: ui-spin 0.7s linear infinite;
}
@keyframes ui-spin { to { transform: rotate(360deg); } }

.btn-group > .btn { box-shadow: none; }

/* Icon-only button: square, still labelled with aria-label/title. */
.btn-icon { width: var(--ui-control-h-sm); min-width: var(--ui-control-h-sm); padding-left: 0; padding-right: 0; }

/* Dropdowns and menus */
.dropdown-menu {
    --bs-dropdown-border-color: var(--ui-border);
    --bs-dropdown-border-radius: var(--ui-radius-md);
    --bs-dropdown-padding-y: 0.375rem;
    --bs-dropdown-link-color: var(--ui-text);
    --bs-dropdown-link-hover-bg: var(--ui-surface-3);
    --bs-dropdown-link-hover-color: var(--ui-text);
    --bs-dropdown-link-active-bg: var(--ui-primary-soft);
    --bs-dropdown-link-active-color: var(--ui-primary-active);
    --bs-dropdown-item-padding-x: 1rem;
    --bs-dropdown-item-padding-y: 0.5rem;
    --bs-dropdown-header-color: var(--ui-text-secondary);
    --bs-dropdown-font-size: var(--ui-fs-md);
    box-shadow: var(--ui-shadow-md);
}
.dropdown-item { display: flex; align-items: center; gap: var(--ui-space-2); min-height: 40px; white-space: normal; }
.dropdown-item > i { width: 18px; text-align: center; color: var(--ui-text-secondary); }
.dropdown-item.text-danger > i { color: inherit; }
.dropdown-header { font-size: var(--ui-fs-xs); font-weight: var(--ui-fw-semibold); text-transform: none; letter-spacing: 0; }
.dropdown-item-text { font-size: var(--ui-fs-sm); color: var(--ui-text-secondary); }
.dropdown-menu form { margin: 0; }
.dropdown-menu button.dropdown-item { width: 100%; border: 0; background: transparent; text-align: left; }
.dropdown-menu button.dropdown-item:hover { background: var(--ui-surface-3); }

/* Modals */
.modal-content {
    border: 0;
    border-radius: var(--ui-radius-xl);
    box-shadow: var(--ui-shadow-lg);
}
.modal-header { padding: var(--ui-space-4) var(--ui-space-5); border-bottom: 1px solid var(--ui-border); }
.modal-title { font-size: var(--ui-fs-lg); font-weight: var(--ui-fw-semibold); }
.modal-body { padding: var(--ui-space-5); }
.modal-footer { padding: var(--ui-space-3) var(--ui-space-5); border-top: 1px solid var(--ui-border); background: var(--ui-surface-2); border-radius: 0 0 var(--ui-radius-xl) var(--ui-radius-xl); gap: var(--ui-space-2); }
.modal-footer > * { margin: 0; }
.modal-backdrop.show { opacity: 0.55; }
.modal-backdrop { background: #0B1739; }

.tooltip { --bs-tooltip-bg: #0F172A; --bs-tooltip-font-size: var(--ui-fs-sm); --bs-tooltip-border-radius: var(--ui-radius-sm); --bs-tooltip-padding-x: 0.6rem; --bs-tooltip-padding-y: 0.35rem; }

/* Progress */
.progress { --bs-progress-height: 0.5rem; --bs-progress-bg: #E2E8F0; --bs-progress-border-radius: var(--ui-radius-pill); border-radius: var(--ui-radius-pill); background: #E2E8F0; }
.progress-bar { background: var(--ui-gradient-primary); }
.progress-bar.bg-success { background: var(--ui-success-solid) !important; }
.progress-bar.bg-warning { background: var(--ui-warning-solid) !important; }
.progress-bar.bg-danger { background: var(--ui-danger-solid) !important; }

/* Accordion and list group */
.accordion { --bs-accordion-border-color: var(--ui-border); --bs-accordion-border-radius: var(--ui-radius-lg); --bs-accordion-inner-border-radius: calc(var(--ui-radius-lg) - 1px); --bs-accordion-active-bg: var(--ui-primary-soft); --bs-accordion-active-color: var(--ui-primary-active); --bs-accordion-btn-focus-box-shadow: var(--ui-focus-ring); }
.accordion-button { font-weight: var(--ui-fw-semibold); }
.list-group { --bs-list-group-border-color: var(--ui-border); --bs-list-group-border-radius: var(--ui-radius-lg); --bs-list-group-item-padding-y: 0.75rem; --bs-list-group-item-padding-x: 1rem; --bs-list-group-action-hover-bg: var(--ui-surface-2); --bs-list-group-active-bg: var(--ui-primary); --bs-list-group-active-border-color: var(--ui-primary); }

/* 6. Tables and lists ------------------------------------------------------- */
.table {
    --bs-table-bg: transparent;
    --bs-table-color: var(--ui-text);
    --bs-table-border-color: var(--ui-border);
    --bs-table-hover-bg: var(--ui-surface-2);
    --bs-table-striped-bg: var(--ui-surface-2);
    margin-bottom: 0;
    font-size: var(--ui-fs-md);
    vertical-align: middle;
}
.table > :not(caption) > * > * { padding: 0.75rem 0.875rem; }
@media (max-width: 1399.98px) {
    .table > :not(caption) > * > *,
    .table tbody td,
    .portal-content .table tbody td,
    .table thead th,
    .portal-content .table thead th { padding-left: 0.625rem; padding-right: 0.625rem; }
}
.table thead th,
.portal-content .table thead th {
    padding: 0.625rem 0.875rem;
    border-bottom: 1px solid var(--ui-border-strong);
    background: var(--ui-surface-2);
    color: var(--ui-text-secondary);
    font-size: var(--ui-fs-xs);
    font-weight: var(--ui-fw-semibold);
    letter-spacing: 0.02em;
    text-transform: none;
    white-space: nowrap;
    vertical-align: bottom;
}
.table thead th:first-child { border-top-left-radius: var(--ui-radius); }
.table thead th:last-child { border-top-right-radius: var(--ui-radius); }
.table tbody td,
.portal-content .table tbody td {
    padding: 0.75rem 0.875rem;
    border-color: var(--ui-border);
    color: var(--ui-text);
    font-size: var(--ui-fs-md);
    vertical-align: middle;
}
.table tbody tr:last-child td { border-bottom: 0; }
.table tbody tr { transition: background var(--ui-duration-fast); }
.table tbody tr:hover,
.portal-content .table tbody tr:hover { background: var(--ui-surface-2); }
.table-sm > :not(caption) > * > *,
.table-sm tbody td,
.portal-content .table-sm tbody td { padding: 0.5rem 0.75rem; }
.table .text-end,
.table td.num,
.table th.num { text-align: right; font-variant-numeric: tabular-nums; }
.table small,
.table .small { font-size: var(--ui-fs-xs); }
.table td .text-muted,
.table td small.text-muted { color: var(--ui-text-secondary) !important; }
.table .cell-primary { font-weight: var(--ui-fw-semibold); color: var(--ui-text); }
.table td.cell-title { min-width: 20ch; }
.table .cell-secondary { display: block; font-size: var(--ui-fs-sm); color: var(--ui-text-secondary); overflow-wrap: break-word; }
.table .cell-actions { white-space: nowrap; text-align: right; }
.table .cell-actions > .d-flex,
.table .cell-actions .table-actions { justify-content: flex-end; }
.table-actions { display: inline-flex; flex-wrap: wrap; align-items: center; gap: var(--ui-space-2); }
/* Row actions sit on one line where there is room; on narrower desktops they
   may stack, so the actions column never pushes off the side of the table. */
@media (min-width: 1400px) { .table .cell-actions .table-actions { flex-wrap: nowrap; } }
@media (min-width: 768px) and (max-width: 1399.98px) {
    .table .cell-actions { white-space: normal; }
    .table .cell-actions .table-actions { flex-direction: column; align-items: stretch; }
}
.table-actions form { margin: 0; }
.cell-truncate { max-width: 28ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cell-wrap { overflow-wrap: break-word; }
/* In a table on a wide screen a long code, email or file name must widen its
   column (the table then scrolls sideways inside .table-responsive), never be
   chopped letter by letter. "anywhere"/"break-all" let the browser squeeze a
   column down to one character, which is what crushed the logs at 1100px.
   Stacked phone cards (below 768px) keep breaking long values. */
@media (min-width: 768px) {
    .table > tbody > tr > td,
    .table > tbody > tr > td * { overflow-wrap: break-word !important; word-break: normal !important; }
    .table code,
    .table .ui-mono { white-space: nowrap; }
}
.cell-nowrap { white-space: nowrap; }

/* Inline progress: a short bar and the number beside it. */
.ui-progress-inline { display: flex; align-items: center; gap: var(--ui-space-2); min-width: 96px; }
.ui-progress-inline .progress { flex: 1 1 48px; max-width: 96px; --bs-progress-height: 6px; }
.ui-progress-inline > span { font-size: var(--ui-fs-sm); color: var(--ui-text-secondary); min-width: 3ch; }

/* Star toggle in a list row */
.star-toggle { display: inline-grid; place-items: center; width: 36px; height: 36px; min-height: 36px; padding: 0; border-radius: var(--ui-radius); color: #94A3B8; font-size: 1.05rem; text-decoration: none; }
.star-toggle:hover { color: #D97706; background: var(--ui-warning-bg); }
.star-toggle[aria-pressed="true"] { color: #D97706; }

/* Horizontal scrolling area: obvious, contained, never masking the data. */
.table-responsive {
    /* Positioned, so absolutely-placed descendants (visually hidden labels in
       row buttons) stay inside the scroll box instead of widening the page. */
    position: relative;
    border-radius: var(--ui-radius);
    overflow-x: auto;
    /* Sideways only: a table never needs a vertical scrollbar here, and a
       1px rounding overflow would otherwise make an unfocusable scroll area. */
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
}
.table-responsive:focus-visible { outline: 2px solid var(--ui-focus-color); outline-offset: 2px; }
.table-scroll-hint { display: flex; align-items: center; gap: 6px; margin: 0 0 6px; color: var(--ui-text-secondary); font-size: var(--ui-fs-xs); }
@media (max-width: 767.98px) { .table-stack ~ .table-scroll-hint, .table-scroll-hint:has(+ .table-wrap .table-stack) { display: none; } }
.table-wrap {
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius-lg);
    background: var(--ui-surface);
    overflow: hidden;
}
.table-wrap > .table-responsive { border-radius: 0; }
.table-wrap .table thead th:first-child,
.table-wrap .table thead th:last-child { border-radius: 0; }
.table-sticky thead th { position: sticky; top: 0; z-index: 1; }

/* A table body that is empty says why (see .empty-state). */
.table td.table-empty { padding: var(--ui-space-6) var(--ui-space-4); text-align: center; color: var(--ui-text-secondary); }

/* Result line under a list: "12 applicants · page 1 of 2" */
.list-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--ui-space-2) var(--ui-space-4);
    color: var(--ui-text-secondary);
    font-size: var(--ui-fs-sm);
}
.list-meta strong { color: var(--ui-text); font-weight: var(--ui-fw-semibold); }
.list-footer { margin-top: var(--ui-space-4); }

/* Stacked rows on phones: app.js copies each column header into data-label.
   Label in the first column, the cell's content in the second; a cell with an
   empty label (star, actions) or .cell-title (the record's name) spans both. */
@media (max-width: 767.98px) {
    .table-stack thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
    .table-stack,
    .table-stack tbody,
    .table-stack tr,
    .table-stack td { display: block; width: 100%; }
    .table-stack tbody tr { padding: var(--ui-space-3) var(--ui-space-1); border-bottom: 1px solid var(--ui-border); }
    .table-stack tbody tr:last-child { border-bottom: 0; }
    .table-stack tbody tr:hover,
    .portal-content .table-stack tbody tr:hover { background: transparent; }
    .table-stack tbody td,
    .portal-content .table-stack tbody td {
        display: grid;
        grid-template-columns: minmax(96px, 34%) minmax(0, 1fr);
        column-gap: var(--ui-space-3);
        align-items: start;
        justify-items: start;
        padding: 0.3rem 0;
        border: 0;
        text-align: left;
    }
    .table-stack tbody td::before {
        content: attr(data-label);
        grid-column: 1;
        color: var(--ui-text-secondary);
        font-size: var(--ui-fs-sm);
        font-weight: var(--ui-fw-medium);
    }
    .table-stack tbody td > * { grid-column: 2; max-width: 100%; }
    /* Column widths set for the table layout do not apply to a card. */
    .table-stack tbody td { min-width: 0 !important; max-width: none !important; }
    .table-stack tbody td[data-label=""],
    .table-stack tbody td:not([data-label]),
    .table-stack tbody td.cell-title,
    .portal-content .table-stack tbody td[data-label=""],
    .portal-content .table-stack tbody td:not([data-label]),
    .portal-content .table-stack tbody td.cell-title { grid-template-columns: minmax(0, 1fr); }
    .table-stack tbody td[data-label=""]::before,
    .table-stack tbody td:not([data-label])::before,
    .table-stack tbody td.cell-title::before { content: none; display: none; }
    .table-stack tbody td[data-label=""] > *,
    .table-stack tbody td:not([data-label]) > *,
    .table-stack tbody td.cell-title > * { grid-column: 1; }
    .table-stack tbody td.cell-title { font-size: var(--ui-fs-base); padding-bottom: var(--ui-space-2); padding-right: 44px; }
    .table-stack td.table-empty,
    .portal-content .table-stack td.table-empty { display: block; text-align: center; }
    .table-stack .cell-actions { padding-top: var(--ui-space-2); }
    .table-stack .cell-actions .table-actions,
    .table-stack .cell-actions > .d-flex { justify-content: flex-start; }
    .table-stack .cell-star { position: absolute; right: var(--ui-space-1); top: var(--ui-space-2); width: auto; padding: 0; }
    .table-stack tbody tr { position: relative; }
}


/* The same card layout on any screen when the table does not fit its box
   (app.js measures and adds .is-stacked), so row actions are never pushed
   off the side. Tables without .table-stack scroll sideways instead. */
.table-stack.is-stacked thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.table-stack.is-stacked,
.table-stack.is-stacked tbody,
.table-stack.is-stacked tr,
.table-stack.is-stacked td { display: block; width: 100%; }
.table-stack.is-stacked tbody tr { padding: var(--ui-space-3) var(--ui-space-1); border-bottom: 1px solid var(--ui-border); }
.table-stack.is-stacked tbody tr:last-child { border-bottom: 0; }
.table-stack.is-stacked tbody tr:hover,
.portal-content .table-stack.is-stacked tbody tr:hover { background: transparent; }
.table-stack.is-stacked tbody td,
.portal-content .table-stack.is-stacked tbody td {
    display: grid;
    grid-template-columns: minmax(96px, 34%) minmax(0, 1fr);
    column-gap: var(--ui-space-3);
    align-items: start;
    justify-items: start;
    padding: 0.3rem 0;
    border: 0;
    text-align: left;
}
.table-stack.is-stacked tbody td::before {
    content: attr(data-label);
    grid-column: 1;
    color: var(--ui-text-secondary);
    font-size: var(--ui-fs-sm);
    font-weight: var(--ui-fw-medium);
}
.table-stack.is-stacked tbody td > * { grid-column: 2; max-width: 100%; }
.table-stack.is-stacked tbody td { min-width: 0 !important; max-width: none !important; }
.table-stack.is-stacked tbody td[data-label=""],
.table-stack.is-stacked tbody td:not([data-label]),
.table-stack.is-stacked tbody td.cell-title,
.portal-content .table-stack.is-stacked tbody td[data-label=""],
.portal-content .table-stack.is-stacked tbody td:not([data-label]),
.portal-content .table-stack.is-stacked tbody td.cell-title { grid-template-columns: minmax(0, 1fr); }
.table-stack.is-stacked tbody td[data-label=""]::before,
.table-stack.is-stacked tbody td:not([data-label])::before,
.table-stack.is-stacked tbody td.cell-title::before { content: none; display: none; }
.table-stack.is-stacked tbody td[data-label=""] > *,
.table-stack.is-stacked tbody td:not([data-label]) > *,
.table-stack.is-stacked tbody td.cell-title > * { grid-column: 1; }
.table-stack.is-stacked tbody td.cell-title { font-size: var(--ui-fs-base); padding-bottom: var(--ui-space-2); padding-right: 44px; }
.table-stack.is-stacked td.table-empty,
.portal-content .table-stack.is-stacked td.table-empty { display: block; text-align: center; }
.table-stack.is-stacked .cell-actions { padding-top: var(--ui-space-2); }
.table-stack.is-stacked .cell-actions .table-actions,
.table-stack.is-stacked .cell-actions > .d-flex { justify-content: flex-start; }
.table-stack.is-stacked .cell-star { position: absolute; right: var(--ui-space-1); top: var(--ui-space-2); width: auto; padding: 0; }
.table-stack.is-stacked tbody tr { position: relative; }

/* DataTables (Bootstrap 5 integration) */
.dataTables_wrapper { font-size: var(--ui-fs-md); }
.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_filter,
.dataTables_wrapper .dataTables_info { color: var(--ui-text-secondary); font-size: var(--ui-fs-sm); }
.dataTables_wrapper .dataTables_filter input,
.dataTables_wrapper .dataTables_length select { min-height: var(--ui-control-h-sm); border-radius: var(--ui-radius); border-color: var(--ui-input-border); }
.dataTables_wrapper .row { --bs-gutter-y: 0.75rem; }
table.dataTable thead > tr > th.sorting::before,
table.dataTable thead > tr > th.sorting::after { opacity: 0.35; }
table.dataTable thead > tr > th.sorting_asc::before,
table.dataTable thead > tr > th.sorting_desc::after { opacity: 1; color: var(--ui-primary); }

/* Collapsible applicant sections ------------------------------------------
   uiSectionStart() in includes/ui-helpers.php, behaviour in assets/js/sections.js.
   One compact row per applicant: who, the page's status pills and completion
   counts, then the arrow. The whole row is the button; a selection box (lead)
   sits before it. The panel itself carries no box styles: with
   hidden="until-found" it keeps its box while its content is skipped. */
.section-list { display: grid; gap: var(--ui-space-3); min-width: 0; }
.section-controls { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ui-space-2); }
/* At the end of a page's result line, directly above its list. */
.list-meta > .section-controls { margin-left: auto; }
.section-controls__status { color: var(--ui-text-secondary); font-size: var(--ui-fs-sm); }

.applicant-section { min-width: 0; }
.portal-content .card.applicant-section.is-open { border-color: var(--ui-border-strong); box-shadow: var(--ui-shadow-sm); }
.applicant-section__row {
    display: flex;
    align-items: stretch;
    min-width: 0;
    border-radius: calc(var(--ui-radius-lg) - 1px);
    transition: background-color 0.15s ease;
}
.applicant-section__row:hover { background: var(--ui-surface-2); }
.applicant-section.is-open .applicant-section__row { border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
.applicant-section__lead { display: flex; align-items: center; padding-left: var(--ui-space-4); }
.applicant-section__lead .form-check { min-height: 0; margin: 0; padding: 0; }
/* 24px: the box sits right against the row's button (WCAG 2.5.8 target size). */
.applicant-section__lead .form-check .form-check-input { float: none; width: 1.5rem; height: 1.5rem; margin: 0; }
.applicant-section__heading { flex: 1 1 auto; min-width: 0; margin: 0; font-size: inherit; font-weight: inherit; line-height: inherit; }
.applicant-section__toggle {
    display: grid;
    grid-template-columns: minmax(min(14rem, 100%), 1fr) minmax(0, auto) auto;
    grid-template-areas: "who facts chevron";
    align-items: center;
    gap: var(--ui-space-2) var(--ui-space-4);
    width: 100%;
    min-height: 3.5rem;
    padding: var(--ui-space-3) var(--ui-space-4) var(--ui-space-3) var(--ui-space-5);
    border: 0;
    border-radius: inherit;
    background: transparent;
    color: var(--ui-text);
    font: inherit;
    text-align: left;
    cursor: pointer;
}
.applicant-section__lead + .applicant-section__heading .applicant-section__toggle { padding-left: var(--ui-space-3); }
.applicant-section__heading,
.applicant-section__toggle { border-radius: calc(var(--ui-radius-lg) - 1px); }
.applicant-section__lead + .applicant-section__heading,
.applicant-section__lead + .applicant-section__heading .applicant-section__toggle { border-top-left-radius: 0; border-bottom-left-radius: 0; }
.applicant-section.is-open .applicant-section__heading,
.applicant-section.is-open .applicant-section__toggle { border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
/* Inside the card's edge, so the ring is never clipped or lost on the border. */
.applicant-section__toggle:focus-visible { outline: 2px solid var(--ui-focus-color); outline-offset: -4px; box-shadow: none; }
.applicant-section__who { grid-area: who; display: grid; gap: 2px; min-width: 0; }
.applicant-section__name { font-size: var(--ui-fs-base); font-weight: var(--ui-fw-semibold); line-height: 1.35; overflow-wrap: anywhere; }
.applicant-section__name > .fa-star { margin-right: 2px; }
/* Running text, so a long programme wraps between words, not one fact per line. */
.applicant-section__meta { display: block; color: var(--ui-text-secondary); font-size: var(--ui-fs-sm); line-height: 1.4; overflow-wrap: anywhere; }
.applicant-section__meta > span:not(:last-child)::after { content: "\00B7"; margin: 0 var(--ui-space-2); color: var(--ui-text-muted); }
.applicant-section__facts { grid-area: facts; display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: var(--ui-space-2) var(--ui-space-3); min-width: 0; }
.applicant-section__facts .ui-status { white-space: normal; }
.section-count { display: inline-flex; align-items: baseline; gap: 0.3rem; color: var(--ui-text-secondary); font-size: var(--ui-fs-sm); white-space: nowrap; }
.section-count strong { color: var(--ui-text); font-weight: var(--ui-fw-semibold); }
.section-count > i { align-self: center; font-size: 0.85em; }
.section-count--complete,
.section-count--complete strong { color: var(--ui-success); }
.applicant-section__chevron {
    grid-area: chevron;
    display: inline-grid;
    place-items: center;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    background: var(--ui-surface-3);
    color: var(--ui-text-secondary);
    font-size: 0.8rem;
    transition: transform 0.2s ease, background-color 0.15s ease;
}
.applicant-section__toggle:hover .applicant-section__chevron { background: var(--ui-primary-soft); color: var(--ui-primary-text); }
.applicant-section__toggle[aria-expanded="true"] .applicant-section__chevron { transform: rotate(180deg); }
.applicant-section__body { border-top: 1px solid var(--ui-border); }
.applicant-section__panel[hidden="until-found"] { display: block !important; }
.section-moved-alert { display: flex; align-items: flex-start; gap: var(--ui-space-2); margin: 0 0 var(--ui-space-4); }
.section-moved-alert > i { margin-top: 0.2rem; }

/* First line inside a section: contact facts and the applicant record link. */
.section-facts { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ui-space-1) var(--ui-space-4); margin: 0 0 var(--ui-space-4); color: var(--ui-text-secondary); font-size: var(--ui-fs-sm); overflow-wrap: anywhere; }
.section-facts i { margin-right: 0.3rem; color: var(--ui-text-muted); }
.section-facts a { font-weight: var(--ui-fw-semibold); }
.section-facts a i { color: inherit; }

/* Several steps or requests of one applicant inside a section. */
.section-item { min-width: 0; scroll-margin-top: calc(var(--ui-topbar-h) + var(--ui-space-4)); }
.section-item + .section-item { margin-top: var(--ui-space-5); padding-top: var(--ui-space-5); border-top: 1px solid var(--ui-border); }
.section-item--focused { padding: var(--ui-space-4); border: 1px solid var(--ui-primary); border-radius: var(--ui-radius-md); box-shadow: 0 0 0 1px var(--ui-primary) inset; }
.section-item + .section-item--focused { margin-top: var(--ui-space-5); border-top: 1px solid var(--ui-primary); }
.section-item .review-card__title { font-size: var(--ui-fs-base); }

/* A list inside a titled card (the dashboard): rows, not cards. */
.section-list--flush { gap: 0; border: 1px solid var(--ui-border); border-radius: var(--ui-radius-md); }
.portal-content .section-list--flush > .card.applicant-section { border: 0; border-radius: 0; box-shadow: none; }
.portal-content .section-list--flush > .card.applicant-section + .card.applicant-section { border-top: 1px solid var(--ui-border); }
.section-list--flush > .applicant-section:first-child .applicant-section__row { border-top-left-radius: calc(var(--ui-radius-md) - 1px); border-top-right-radius: calc(var(--ui-radius-md) - 1px); }
.section-list--flush .applicant-section__row,
.section-list--flush .applicant-section__heading,
.section-list--flush .applicant-section__toggle { border-radius: 0; }
.section-list--flush .applicant-section__toggle { min-height: 3rem; padding: var(--ui-space-2) var(--ui-space-3) var(--ui-space-2) var(--ui-space-4); }
.section-list--flush .applicant-section__name { font-size: var(--ui-fs-md); }
.portal-content .section-list--flush .applicant-section__body { padding: var(--ui-space-3) var(--ui-space-4) var(--ui-space-4); background: var(--ui-surface-2); }

/* Scripting off: every panel shows and there is nothing to toggle. */
html:not(.js) .applicant-section__panel[hidden] { display: block !important; }
html:not(.js) .applicant-section__chevron,
html:not(.js) .section-controls { display: none !important; }
html:not(.js) .applicant-section__toggle { cursor: default; }

@media (max-width: 767.98px) {
    .applicant-section__toggle {
        grid-template-columns: minmax(0, 1fr) auto;
        grid-template-areas: "who chevron" "facts facts";
        padding: var(--ui-space-3) var(--ui-space-3) var(--ui-space-3) var(--ui-space-4);
    }
    .applicant-section__lead { padding-left: var(--ui-space-3); align-items: flex-start; padding-top: 0.95rem; }
    .applicant-section__facts { justify-content: flex-start; }
    .section-controls { width: 100%; }
    .section-controls > .btn { flex: 1 1 auto; }
    .section-item--focused { padding: var(--ui-space-3); }
}
@media print {
    .applicant-section__chevron, .section-controls { display: none !important; }
}

/* 7. Status, badges and chips ---------------------------------------------- */
.badge {
    --bs-badge-font-size: 0.75rem;
    --bs-badge-font-weight: var(--ui-fw-semibold);
    --bs-badge-padding-x: 0.5em;
    --bs-badge-padding-y: 0.3em;
    --bs-badge-border-radius: var(--ui-radius-sm);
    letter-spacing: 0;
    line-height: 1.2;
}
.text-bg-primary { color: #FFF !important; background-color: var(--ui-primary) !important; }
.text-bg-secondary { color: var(--ui-neutral) !important; background-color: var(--ui-neutral-bg) !important; }
.text-bg-light { color: var(--ui-text) !important; background-color: #FFF !important; }
.text-bg-success { color: #FFF !important; background-color: var(--ui-success) !important; }
.text-bg-danger { color: #FFF !important; background-color: var(--ui-danger) !important; }
.text-bg-warning { color: #451A03 !important; background-color: #FCD34D !important; }
.text-bg-info { color: #FFF !important; background-color: #0E7490 !important; }
.bg-warning { background-color: #FCD34D !important; }
.badge.bg-warning { color: #451A03 !important; }
.badge.bg-secondary { background-color: var(--ui-neutral-bg) !important; color: var(--ui-neutral) !important; }

/* The status pill: text first, an icon second, colour third. Pages mark a
   value with data-status-text; app.js adds .status-pill and .status-<Value>. */
.status-pill,
.ui-status {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    max-width: 100%;
    min-height: 26px;
    padding: 0.2rem 0.65rem 0.2rem 0.55rem;
    border: 1px solid var(--ui-neutral-border);
    border-radius: var(--ui-radius-pill);
    background: var(--ui-neutral-bg);
    color: var(--ui-neutral);
    font-size: var(--ui-fs-xs);
    font-weight: var(--ui-fw-semibold);
    line-height: 1.25;
    white-space: nowrap;
    vertical-align: middle;
}
.status-pill::before,
.ui-status::before {
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    font-size: 0.8em;
    line-height: 1;
    content: "\f111"; /* circle */
    opacity: 0.9;
}
/* Done */
.status-Approved, .status-Verified, .status-Completed, .status-Paid, .status-Sent, .status-Accepted, .status-Active, .status-Activated, .status-Complete,
.ui-status--success {
    border-color: var(--ui-success-border); background: var(--ui-success-bg); color: var(--ui-success);
}
.status-Approved::before, .status-Verified::before, .status-Completed::before, .status-Paid::before, .status-Sent::before, .status-Accepted::before,
.status-Active::before, .status-Activated::before, .status-Complete::before, .ui-status--success::before { content: "\f058"; } /* circle-check */
/* Waiting for staff */
.status-Submitted, .status-Under-Review, .status-Under-Review-Document, .status-Uploaded, .status-Pending, .status-REQUEST-COL, .status-Ready-to-Submit, .status-In-Progress, .status-Partially-Paid,
.ui-status--info {
    border-color: var(--ui-info-border); background: var(--ui-info-bg); color: var(--ui-info);
}
.status-Submitted::before, .status-Uploaded::before, .status-Ready-to-Submit::before, .status-REQUEST-COL::before, .ui-status--info::before { content: "\f0aa"; } /* circle-arrow-up */
.status-Under-Review::before, .status-Under-Review-Document::before, .status-Pending::before, .status-In-Progress::before, .status-Partially-Paid::before { content: "\f017"; } /* clock */
.status-REQUEST-COL, .status-Ready-to-Submit { border-color: var(--ui-review-border); background: var(--ui-review-bg); color: var(--ui-review); }
/* Needs the applicant */
.status-Changes-Required, .status-Needs-Update, .status-Resubmission-Required, .status-Action-Required, .status-Missing, .status-Overdue,
.ui-status--warning {
    border-color: var(--ui-warning-border); background: var(--ui-warning-bg); color: var(--ui-warning);
}
.status-Changes-Required::before, .status-Needs-Update::before, .status-Resubmission-Required::before, .status-Action-Required::before,
.status-Missing::before, .status-Overdue::before, .ui-status--warning::before { content: "\f071"; } /* triangle-exclamation */
/* Stopped */
.status-Rejected, .status-Failed, .status-Revoked, .status-Expired, .status-Suspended, .status-Locked,
.ui-status--danger {
    border-color: var(--ui-danger-border); background: var(--ui-danger-bg); color: var(--ui-danger);
}
.status-Rejected::before, .status-Failed::before, .status-Revoked::before, .status-Expired::before, .status-Suspended::before,
.status-Locked::before, .ui-status--danger::before { content: "\f057"; } /* circle-xmark */
/* Not started */
.status-Initial, .status-Draft, .status-Not-Started, .status-Not-Submitted, .status-Not-Uploaded, .status-Waived, .status-Inactive, .status-Not-sent,
.ui-status--neutral { border-color: var(--ui-neutral-border); background: var(--ui-neutral-bg); color: var(--ui-neutral); }
.status-Initial::before, .status-Draft::before, .status-Not-Started::before, .status-Not-Submitted::before, .status-Not-Uploaded::before,
.status-Inactive::before, .ui-status--neutral::before { content: "\f192"; font-weight: 400; } /* circle-dot (regular) */
.status-Waived::before { content: "\f05e"; } /* ban */

/* Small tag for counts and categories (programme, role) */
.ui-tag,
.programme-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    max-width: 100%;
    padding: 0.15rem 0.55rem;
    border-radius: var(--ui-radius-sm);
    border: 1px solid var(--ui-border-strong);
    background: var(--ui-surface-2);
    color: var(--ui-text);
    font-size: var(--ui-fs-xs);
    font-weight: var(--ui-fw-medium);
    line-height: 1.4;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.ui-tag--wrap { white-space: normal; overflow: visible; text-overflow: clip; }
.programme-chip-diploma { border-color: var(--ui-primary-soft-border); background: var(--ui-primary-soft); color: var(--ui-primary-active); }
.programme-chip-other { border-color: var(--ui-review-border); background: var(--ui-review-bg); color: var(--ui-review); }
.programme-chip-generic { color: var(--ui-text-secondary); }

/* Count inside a pill or tab */
.ui-count {
    display: inline-grid;
    place-items: center;
    min-width: 1.5rem;
    height: 1.375rem;
    padding: 0 0.4rem;
    border-radius: var(--ui-radius-pill);
    background: var(--ui-surface-3);
    color: var(--ui-text-secondary);
    font-size: 0.75rem;
    font-weight: var(--ui-fw-bold);
    font-variant-numeric: tabular-nums;
}

/* Applicant labels ---------------------------------------------------------
   Staff-defined colour badges (ApplicantLabels, uiLabelBadge(), the Add label
   menu in includes/applicant-label-picker.php). The label's colour arrives as
   --label-bg with black or white text (--label-fg) chosen for contrast; a thin
   inner edge keeps a pale colour visible on white. Long names are cut with an
   ellipsis (the full name is the badge's title), and badges wrap onto as many
   lines as they need without overlapping the row around them. */
.applicant-label {
    /* inline-block, not flex: text-overflow only cuts text in a block box. */
    display: inline-block;
    max-width: 14rem;
    padding: 0.15rem 0.55rem;
    border-radius: var(--ui-radius-pill);
    background: var(--label-bg, var(--ui-neutral-bg));
    color: var(--label-fg, var(--ui-text));
    box-shadow: inset 0 0 0 1px rgba(15, 23, 42, 0.14);
    font-size: var(--ui-fs-xs);
    font-weight: var(--ui-fw-semibold);
    line-height: 1.35;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    vertical-align: middle;
}
.label-field { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; min-width: 0; max-width: 100%; margin-top: 6px; }
.label-list { display: flex; flex-wrap: wrap; gap: 4px 6px; min-width: 0; max-width: 100%; margin: 0; padding: 0; list-style: none; }
.label-list:empty { display: none; }
.label-list > li { min-width: 0; max-width: 100%; display: flex; }
.label-picker__toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    min-height: 26px;
    padding: 0.1rem 0.6rem;
    border: 1px dashed var(--ui-border-strong);
    border-radius: var(--ui-radius-pill);
    background: transparent;
    color: var(--ui-text-secondary);
    font-size: var(--ui-fs-xs);
    font-weight: var(--ui-fw-semibold);
    line-height: 1.3;
    white-space: nowrap;
}
.label-picker__toggle:hover,
.label-picker__toggle[aria-expanded="true"] { border-style: solid; border-color: var(--ui-primary-soft-border); background: var(--ui-primary-soft); color: var(--ui-primary-text); }
.label-picker__toggle > i { font-size: 0.8em; }
.label-picker__menu { min-width: 15rem; max-width: min(20rem, calc(100vw - 2rem)); max-height: min(24rem, 60vh); overflow-y: auto; }
.label-picker__form { margin: 0; }
.label-picker__item { gap: var(--ui-space-2); }
.label-picker__item .applicant-label { max-width: 12rem; }
.label-picker__check {
    display: inline-grid;
    place-items: center;
    flex: 0 0 auto;
    width: 1.15rem;
    height: 1.15rem;
    border: 1px solid var(--ui-border-strong);
    border-radius: 4px;
    background: var(--ui-surface);
    color: transparent;
    font-size: 0.65rem;
}
.label-picker__item[aria-pressed="true"] .label-picker__check { border-color: var(--ui-primary); background: var(--ui-primary); color: #FFF; }
.label-picker__item[aria-busy="true"] { opacity: 0.6; cursor: progress; }
.label-picker__empty,
.label-picker__error { margin: 0; padding: 0.25rem 1rem 0.5rem; color: var(--ui-text-secondary); font-size: var(--ui-fs-sm); white-space: normal; }
.label-picker__error { color: var(--ui-danger); }
/* On the applicant record the labels are one of the summary facts. */
.record-fact--labels { min-width: min(100%, 14rem); max-width: 100%; }
.record-fact--labels .label-field { margin-top: 0; }
/* Applicant Labels settings */
.label-colour { display: flex; align-items: center; gap: var(--ui-space-2); }
.label-colour .form-control-color { width: 3rem; height: 2.25rem; padding: 0.2rem; flex: 0 0 auto; }
.label-colour__value { color: var(--ui-text-secondary); }
.label-table .form-control-sm { min-width: 10rem; }

/* 8. Feedback -------------------------------------------------------------- */
.alert {
    --bs-alert-padding-x: 1rem;
    --bs-alert-padding-y: 0.75rem;
    --bs-alert-border-radius: var(--ui-radius-md);
    --bs-alert-margin-bottom: var(--ui-space-4);
    border-width: 1px;
    font-size: var(--ui-fs-md);
    line-height: 1.5;
}
.alert-primary,
.alert-info { --bs-alert-color: var(--ui-info); --bs-alert-bg: var(--ui-info-bg); --bs-alert-border-color: var(--ui-info-border); --bs-alert-link-color: var(--ui-primary-active); }
.alert-success { --bs-alert-color: #065F46; --bs-alert-bg: var(--ui-success-bg); --bs-alert-border-color: var(--ui-success-border); --bs-alert-link-color: #064E3B; }
.alert-warning { --bs-alert-color: #78350F; --bs-alert-bg: var(--ui-warning-bg); --bs-alert-border-color: var(--ui-warning-border); --bs-alert-link-color: #78350F; }
.alert-danger { --bs-alert-color: #991B1B; --bs-alert-bg: var(--ui-danger-bg); --bs-alert-border-color: var(--ui-danger-border); --bs-alert-link-color: #7F1D1D; }
.alert-secondary,
.alert-light { --bs-alert-color: var(--ui-neutral); --bs-alert-bg: var(--ui-surface-2); --bs-alert-border-color: var(--ui-border); --bs-alert-link-color: var(--ui-text); }
.alert .alert-link { font-weight: var(--ui-fw-semibold); }
.alert > i:first-child { margin-right: 0.35rem; }
.alert-dismissible { padding-right: 3rem; }
.alert-dismissible .btn-close { padding: 0.95rem 1rem; }

/* Toast-style flash: a short notice pinned to the top of the content. */
.flash-stack { display: grid; gap: var(--ui-space-2); margin-bottom: var(--ui-space-4); }
.flash-stack .alert { margin: 0; display: flex; align-items: flex-start; gap: var(--ui-space-2); box-shadow: var(--ui-shadow-xs); }
.flash-stack .alert > i { margin-top: 0.2rem; }

/* Empty, no-results, error and no-access states */
.empty-state {
    display: grid;
    justify-items: center;
    gap: var(--ui-space-2);
    padding: var(--ui-space-6) var(--ui-space-4);
    text-align: center;
    color: var(--ui-text-secondary);
}
.empty-state__icon {
    width: 48px;
    height: 48px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--ui-surface-3);
    color: var(--ui-text-secondary);
    font-size: 1.25rem;
}
.empty-state__title { margin: 0; color: var(--ui-text); font-size: var(--ui-fs-base); font-weight: var(--ui-fw-semibold); }
.empty-state__text { margin: 0; max-width: 52ch; font-size: var(--ui-fs-md); }
.empty-state .btn { margin-top: var(--ui-space-2); }
.empty-state--compact { padding: var(--ui-space-4) var(--ui-space-3); }
.empty-state--compact .empty-state__icon { width: 36px; height: 36px; font-size: 1rem; }

/* Loading placeholder that keeps the layout's height */
.ui-skeleton { display: block; height: 1rem; border-radius: var(--ui-radius-sm); background: linear-gradient(90deg, #EEF2F7 0%, #F8FAFC 40%, #EEF2F7 80%); background-size: 200% 100%; animation: ui-shimmer 1.4s ease-in-out infinite; }
@keyframes ui-shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }

/* Stat tiles: one design for every summary row.
   Every tile has the same five rows: heading (icon + label), number,
   supporting text, extra (a progress bar), link. Each tile is a subgrid of
   five rows of the .stat-grid, so the tiles in one visual row share those
   rows: a heading that wraps onto two lines makes the heading row taller for
   every tile in that row, and every number stays on the same line. A tile
   without supporting text or a link leaves that row empty; its number does
   not move. Tiles in a row are equally tall because they span the same rows. */
.stat-grid {
    display: grid;
    /* rem, not px: with a larger default text size the tiles widen and fewer
       fit on a row, rather than squeezing their headings letter by letter. */
    grid-template-columns: repeat(auto-fit, minmax(min(11.875rem, 100%), 1fr));
    gap: var(--ui-space-3);
    margin-bottom: var(--ui-space-5);
}
.stat-grid--compact { grid-template-columns: repeat(auto-fit, minmax(min(9.375rem, 100%), 1fr)); }
.stat-tile,
.stat-grid > li {
    display: grid;
    grid-row: span 5;
    grid-template-rows: subgrid;
    row-gap: 0;
    min-width: 0;
}
/* A list of tiles (COL Acceptance Tracker): the <li> holds the rows, the tile fills it. */
.stat-grid > li { margin: 0; }
.stat-grid > li > .stat-tile { grid-row: 1 / -1; }
.stat-tile {
    position: relative;
    align-content: start;
    padding: var(--ui-space-4);
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius-lg);
    background: var(--ui-surface);
    box-shadow: var(--ui-shadow-xs);
    color: var(--ui-text);
    text-decoration: none;
    transition: border-color var(--ui-duration-fast), box-shadow var(--ui-duration-fast), transform var(--ui-duration-fast);
}
a.stat-tile:hover { color: var(--ui-text); border-color: var(--ui-primary-soft-border); box-shadow: var(--ui-shadow-md); }
a.stat-tile:hover .stat-tile__link { text-decoration: underline; }
.stat-tile[aria-current="true"],
.stat-tile.is-active { border-color: var(--ui-primary); box-shadow: 0 0 0 1px var(--ui-primary) inset; }
/* Row 1 — heading. The icon sits on the first line of a wrapped label. */
.stat-tile__label {
    grid-row: 1;
    display: flex;
    align-items: baseline;
    gap: 0.45rem;
    min-width: 0;
    color: var(--ui-text-secondary);
    font-size: var(--ui-fs-sm);
    font-weight: var(--ui-fw-medium);
    line-height: 1.35;
    overflow-wrap: anywhere; /* only a word too long for the tile is broken */
}
.stat-tile__label i { flex: none; width: 1.15em; color: var(--ui-primary); text-align: center; }
/* Row 2 — the number. One size, weight and line height everywhere (the
   dashboard's "Needs attention" tiles keep their .h3 markup). */
.stat-tile > .h3,
.stat-tile__value {
    grid-row: 2;
    align-self: last baseline; /* a smaller text value (MAV number) shares the numbers' baseline */
    min-width: 0;
    margin: var(--ui-space-2) 0 0;
    font-size: 1.75rem;
    font-weight: var(--ui-fw-bold);
    line-height: 1.15;
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums lining-nums;
    color: var(--ui-text);
    overflow-wrap: anywhere; /* a very long value wraps rather than clipping */
}
/* Row 3 — supporting text; row 4 — anything else (a progress bar); row 5 — the link. */
.stat-tile__hint { grid-row: 3; margin-top: 2px; color: var(--ui-text-secondary); font-size: var(--ui-fs-sm); line-height: 1.4; }
.stat-tile > :not(.stat-tile__label):not(.stat-tile__value):not(.h3):not(.stat-tile__hint):not(.stat-tile__link) { grid-row: 4; }
.stat-tile__link { grid-row: 5; align-self: start; padding-top: var(--ui-space-2); color: var(--ui-primary-text); font-size: var(--ui-fs-sm); font-weight: var(--ui-fw-semibold); line-height: 1.4; }
.stat-tile--attention { border-color: var(--ui-warning-border); background: linear-gradient(180deg, #FFFDF5 0%, #FFF 60%); }
.stat-tile--attention .stat-tile__label i { color: #D97706; }
.stat-tile--danger .stat-tile__value { color: var(--ui-danger); }
/* Browsers without subgrid: a column, with room for a two-line heading kept
   in every tile so a wrapped heading does not push its number down. */
@supports not (grid-template-rows: subgrid) {
    .stat-tile { display: flex; flex-direction: column; grid-row: auto; }
    .stat-grid > li { display: flex; grid-row: auto; }
    .stat-grid > li > .stat-tile { flex: 1 1 auto; }
    .stat-tile__label { min-height: calc(2 * 1.35em); }
    .stat-tile__link { margin-top: auto; }
}

/* SweetAlert2: same dialog as a Bootstrap modal; buttons are our buttons. */
.swal2-container { padding: var(--ui-space-4); }
.swal2-container.swal2-backdrop-show { background: rgba(11, 23, 57, 0.55) !important; }
.swal2-popup {
    width: min(30rem, 100%) !important;
    padding: var(--ui-space-5) !important;
    border-radius: var(--ui-radius-xl) !important;
    font-family: var(--ui-font) !important;
    box-shadow: var(--ui-shadow-lg) !important;
}
.swal2-title { padding: 0 !important; margin: var(--ui-space-2) 0 0 !important; color: var(--ui-text) !important; font-size: var(--ui-fs-xl) !important; font-weight: var(--ui-fw-bold) !important; text-align: left !important; }
.swal2-html-container { margin: var(--ui-space-3) 0 0 !important; padding: 0 !important; color: var(--ui-text-secondary) !important; font-size: var(--ui-fs-md) !important; line-height: 1.55 !important; text-align: left !important; }
.swal2-icon { margin: 0 !important; width: 3rem !important; height: 3rem !important; border-width: 0.2em !important; }
.swal2-icon .swal2-icon-content { font-size: 2rem !important; }
.swal2-actions { width: 100%; justify-content: flex-end !important; gap: var(--ui-space-2); margin: var(--ui-space-5) 0 0 !important; flex-wrap: wrap-reverse; }
.swal2-actions .btn { margin: 0; }
.swal2-input, .swal2-textarea, .swal2-select { margin: var(--ui-space-3) 0 0 !important; width: 100% !important; border: 1px solid var(--ui-input-border) !important; border-radius: var(--ui-radius) !important; font-size: var(--ui-fs-base) !important; box-shadow: none !important; }
.swal2-validation-message { background: var(--ui-danger-bg) !important; color: var(--ui-danger) !important; font-size: var(--ui-fs-sm) !important; }

/* 9. In-page navigation ----------------------------------------------------- */
.nav-tabs {
    --bs-nav-tabs-border-color: var(--ui-border);
    --bs-nav-tabs-link-active-color: var(--ui-primary-text);
    --bs-nav-tabs-link-active-bg: transparent;
    --bs-nav-tabs-link-active-border-color: transparent;
    --bs-nav-tabs-link-hover-border-color: transparent;
    gap: var(--ui-space-1);
    border-bottom: 1px solid var(--ui-border);
}
.nav-tabs .nav-link {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    min-height: 44px;
    margin-bottom: -1px;
    padding: 0.5rem 0.875rem;
    border: 0;
    border-bottom: 2px solid transparent;
    border-radius: 0;
    color: var(--ui-text-secondary);
    font-size: var(--ui-fs-md);
    font-weight: var(--ui-fw-semibold);
}
.nav-tabs .nav-link:hover { color: var(--ui-text); border-bottom-color: var(--ui-border-strong); }
.nav-tabs .nav-link.active { color: var(--ui-primary-text); border-bottom-color: var(--ui-primary); background: transparent; }
.nav-tabs .nav-link .badge { font-size: 0.75rem; }
.nav-pills { --bs-nav-pills-border-radius: var(--ui-radius); --bs-nav-pills-link-active-bg: var(--ui-primary); gap: var(--ui-space-1); }
.nav-pills .nav-link { color: var(--ui-text-secondary); font-weight: var(--ui-fw-semibold); font-size: var(--ui-fs-md); min-height: 40px; display: inline-flex; align-items: center; gap: 0.4rem; }
.nav-pills .nav-link:hover { color: var(--ui-text); background: var(--ui-surface-3); }
.nav-pills .nav-link.active { color: #FFF; background: var(--ui-primary); }

/* Segmented filter: queues, star filter, status chips. One look everywhere. */
.segmented {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 4px;
    padding: 4px;
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius-md);
    background: var(--ui-surface-2);
}
.segmented__item {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    min-height: 34px;
    padding: 0.25rem 0.75rem;
    border-radius: var(--ui-radius);
    color: var(--ui-text-secondary);
    font-size: var(--ui-fs-sm);
    font-weight: var(--ui-fw-semibold);
    text-decoration: none;
    white-space: nowrap;
    transition: background var(--ui-duration-fast), color var(--ui-duration-fast);
}
.segmented__item:hover { color: var(--ui-text); background: var(--ui-surface-3); }
.segmented__item[aria-current="page"],
.segmented__item[aria-current="true"],
.segmented__item.active {
    color: var(--ui-text);
    background: var(--ui-surface);
    box-shadow: var(--ui-shadow-sm), 0 0 0 1px var(--ui-border);
}
.segmented__item[aria-current] .ui-count,
.segmented__item.active .ui-count { background: var(--ui-primary); color: #FFF; }

/* Pagination */
.pagination {
    --bs-pagination-padding-x: 0.75rem;
    --bs-pagination-padding-y: 0.4rem;
    --bs-pagination-font-size: var(--ui-fs-sm);
    --bs-pagination-color: var(--ui-text);
    --bs-pagination-border-color: var(--ui-border-strong);
    --bs-pagination-border-radius: var(--ui-radius);
    --bs-pagination-hover-color: var(--ui-primary-active);
    --bs-pagination-hover-bg: var(--ui-primary-soft);
    --bs-pagination-hover-border-color: var(--ui-primary-soft-border);
    --bs-pagination-focus-box-shadow: var(--ui-focus-ring);
    --bs-pagination-active-bg: var(--ui-primary);
    --bs-pagination-active-border-color: var(--ui-primary);
    --bs-pagination-disabled-color: var(--ui-text-muted);
    --bs-pagination-disabled-bg: var(--ui-surface-2);
    --bs-pagination-disabled-border-color: var(--ui-border);
    gap: 0;
    flex-wrap: wrap;
}
.pagination-sm { --bs-pagination-padding-x: 0.75rem; --bs-pagination-padding-y: 0.35rem; --bs-pagination-font-size: var(--ui-fs-sm); }
.page-link { min-height: 36px; display: inline-flex; align-items: center; gap: 0.35rem; font-weight: var(--ui-fw-medium); }
.page-item.disabled .page-link[aria-current],
.page-item .page-link.page-status { color: var(--ui-text-secondary); background: var(--ui-surface); }

/* Filter toolbar: labelled fields, one Search button, a Clear link. */
.filter-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: var(--ui-space-3);
}
.filter-bar__field { display: flex; flex-direction: column; min-width: 160px; flex: 1 1 180px; }
.filter-bar__field--search { flex: 3 1 280px; }
.filter-bar__field .form-label { font-size: var(--ui-fs-sm); }
.filter-bar__actions { display: flex; align-items: center; gap: var(--ui-space-2); flex: 0 0 auto; }
.filter-bar__clear { font-size: var(--ui-fs-sm); font-weight: var(--ui-fw-semibold); white-space: nowrap; }
.search-input { position: relative; }
.search-input > i { position: absolute; left: 0.8rem; top: 50%; transform: translateY(-50%); color: var(--ui-text-muted); pointer-events: none; }
.search-input > .form-control { padding-left: 2.35rem; }

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

/* 10. Public (sign-in family) layout ---------------------------------------- */
body:not(:has(.portal-shell)) { background: var(--ui-bg); }
.public-shell { min-height: 100vh; }

/* 11. Utilities, motion, print ---------------------------------------------- */
.ui-stack { display: grid; gap: var(--ui-space-4); }
.ui-stack-sm { display: grid; gap: var(--ui-space-2); }
.ui-gap-section > * + * { margin-top: var(--ui-space-5); }
.ui-reading { max-width: var(--ui-reading-max); }
.ui-num { font-variant-numeric: tabular-nums; }
.ui-mono { font-family: var(--ui-font-mono); font-size: 0.875em; }
.ui-break { overflow-wrap: anywhere; word-break: break-word; }
.visually-hidden-focusable:focus { position: static !important; }
.mb-section { margin-bottom: var(--ui-space-5) !important; }

@media (max-width: 767.98px) {
    .portal-topbar { padding-left: var(--ui-space-4); padding-right: var(--ui-space-4); }
    .portal-content { padding: var(--ui-space-4) var(--ui-space-4) var(--ui-space-6); }
    .card .card-body,
    .portal-content .card .card-body { padding: var(--ui-space-4); }
    .page-header { margin-bottom: var(--ui-space-4); }
    .page-header__actions { width: 100%; }
    .page-header__actions > .btn { flex: 1 1 auto; }
    .account-menu__email { display: none; }
    .account-menu__toggle { padding-right: 4px; }
    .filter-bar__field { flex-basis: 100%; }
    .filter-bar__actions { width: 100%; }
    .filter-bar__actions > .btn { flex: 1 1 auto; }
    /* Two across on a phone, one across below ~360px or with large text. */
    .stat-grid,
    .stat-grid--compact { grid-template-columns: repeat(auto-fit, minmax(min(10rem, 100%), 1fr)); }
    .stat-tile > .h3,
    .stat-tile__value { font-size: 1.5rem; }
    .modal-footer { flex-direction: column-reverse; align-items: stretch; }
    .modal-footer > .btn { width: 100%; }
    /* Clipped, not removed: the chip keeps its accessible name. */
    .topbar-chip__text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

@media print {
    .portal-sidebar, .portal-topbar, .portal-sidebar-backdrop, .skip-link, .page-header__actions, .filter-bar, .pagination { display: none !important; }
    .portal-main { margin: 0 !important; }
    .portal-content { padding: 0 !important; max-width: none; }
    body { background: #FFF; }
    .card { box-shadow: none; border-color: #CBD5E1; break-inside: avoid; }
}