/* =====================================================================
   Admin back office: "Afiyya Clear" (day) and "Afiyya Night" (night)
   Loaded last by Views/Shared/_AdminShell.cshtml (admin site only; the public
   referral form keeps _BaseLayout and is not affected). Every rule is scoped to
   .admin-body (the admin shell's <body>) or to admin-only classes.
   Built on Bootstrap 5.3's colour modes: <html data-bs-theme="light|dark">.

   The system (release 1 polish):
   - Surfaces: page "ground", ONE level of card per section. A card inside a card
     becomes a tinted panel with no border; a third level is flat.
   - Lines: hairlines only (1px, --af-hairline); no boxes around groups.
   - Buttons: primary = filled blue (btn-primary, and btn-success / btn-orange /
     btn-info / btn-indigo, which used to be other fills); secondary = soft tint, no
     outline (btn-secondary, every btn-outline-*); destructive = red text or a red
     tint (btn-outline-danger, btn-danger); caution = amber tint (btn-warning).
   - Icon-only actions: .admin-icon-action, borderless, 44 x 44, with an aria-label.
   - Spacing scale: 4 / 8 / 12 / 16 / 24 / 32 px (--af-space-1 .. -6).
   ===================================================================== */

/* ---------- Tokens: Afiyya Clear (day) ---------- */
:root,
[data-bs-theme="light"] {
    --af-navy: #10283A;
    --af-blue: #0A6FA8;
    --af-blue-hover: #08598A;
    --af-blue-rgb: 10, 111, 168;
    --af-on-blue: #FFFFFF;
    --af-sky: #009FE3;
    --af-green: #8CC63F;
    --af-orange: #F7931E;
    --af-red: #B42318;
    --af-on-accent: #10283A;      /* text on green / orange / sky */
    --af-on-red: #FFFFFF;
    --af-ground: #F3F6F8;
    --af-surface: #FFFFFF;
    --af-surface-2: #F3F6F8;      /* tinted panel: a group inside a card, table heads, read-only fields */
    --af-border: #DCE3E8;         /* form fields and the few real borders */
    --af-border-strong: #C5D0D8;
    --af-hairline: #E4EAEE;       /* dividers and card edges */
    --af-text: #10283A;
    --af-muted: #536471;
    /* Soft button fills (secondary actions) */
    --af-soft: #E6ECF0;
    --af-soft-hover: #D9E2E8;
    /* Edges of interactive parts and cards: 3:1 or better against what is around them (WCAG 1.4.11).
       --af-edge 3.74:1 on white, 3.45:1 on the page grey, 3.1:1+ on the soft tints; --af-card-edge 3.19:1 on the page grey */
    --af-edge: #768694;
    --af-edge-blue: #4A8CBE;
    --af-edge-ok: #5E9A2E;
    --af-edge-warn: #B26F12;
    --af-edge-danger: #D2554A;
    --af-card-edge: #7C8C99;
    --af-blue-soft: #E4F1FA;
    --af-blue-soft-hover: #D2E7F5;
    /* Text versions of the accents (4.5:1 or better on surface, ground and the soft fills) */
    --af-green-text: #2E6B0E;
    --af-orange-text: #8A4B00;
    --af-red-text: #B42318;
    --af-blue-text: #0A6FA8;
    --af-blue-strong-text: #08598A; /* blue text on the hovered soft blue (4.5:1+) */
    /* Soft fills */
    --af-ok-soft: #EAF5DC;
    --af-ok-text: #1F4D0A;
    --af-warn-soft: #FFF1DC;
    --af-warn-text: #6B3A00;
    --af-danger-soft: #FDECEA;
    --af-danger-text: #8F1C13;
    --af-info-soft: #E4F1FA;
    --af-info-text: #08598A;
    --af-violet-soft: #EEEBFB;
    --af-violet-text: #3E2A8C;
    /* Menu */
    --af-sidebar: #10283A;
    --af-sidebar-border: transparent;
    --af-nav-text: #C9D6DF;
    --af-nav-section: #8FA6B5;
    --af-nav-active: rgba(255, 255, 255, 0.10);
    --af-nav-hover: rgba(255, 255, 255, 0.06);
    --af-brand-tile: #FFFFFF;
    --af-shadow: 0 1px 2px rgba(16, 40, 58, 0.05);
    --af-shadow-pop: 0 8px 24px rgba(16, 40, 58, 0.14);
}

/* ---------- Tokens: Afiyya Night ---------- */
[data-bs-theme="dark"] {
    --af-navy: #E6EEF3;
    --af-blue: #4FB7EE;
    --af-blue-hover: #7CC9F2;
    --af-blue-rgb: 79, 183, 238;
    --af-on-blue: #0E1A24;
    --af-sky: #4FB7EE;
    --af-green: #9BD15A;
    --af-orange: #F7A443;
    --af-red: #F07A6E;
    --af-on-accent: #0E1A24;
    --af-on-red: #0E1A24;
    --af-ground: #0E1A24;
    --af-surface: #162633;
    --af-surface-2: #1C2E3C;
    --af-border: #2B4255;
    --af-border-strong: #3C566A;
    --af-hairline: #243848;
    --af-text: #E6EEF3;
    --af-muted: #9FB2C0;
    --af-soft: #213444;
    --af-soft-hover: #2A4053;
    /* Edges: 3:1 or better (WCAG 1.4.11). --af-edge 3.74:1 on cards, 4.27:1 on the page; --af-card-edge 3.56:1 on the page */
    --af-edge: #63809A;
    --af-edge-blue: #3B86B8;
    --af-edge-ok: #5F9A32;
    --af-edge-warn: #A8742E;
    --af-edge-danger: #C4625A;
    --af-card-edge: #5A7389;
    --af-blue-soft: #173A52;
    --af-blue-soft-hover: #1D4764;
    --af-green-text: #9BD15A;
    --af-orange-text: #F7A443;
    --af-red-text: #F49186;
    --af-blue-text: #7CC9F2;
    --af-blue-strong-text: #A8DCF7;
    --af-ok-soft: #24401A;
    --af-ok-text: #C6EBA0;
    --af-warn-soft: #4A3315;
    --af-warn-text: #FFD9A6;
    --af-danger-soft: #4A1F1B;
    --af-danger-text: #FFC2BA;
    --af-info-soft: #173A52;
    --af-info-text: #9FD8F7;
    --af-violet-soft: #2C2752;
    --af-violet-text: #D6CEFF;
    --af-sidebar: #0A141C;
    --af-sidebar-border: #1C3040;
    --af-nav-text: #9FB2C0;
    --af-nav-section: #7D93A3;
    --af-nav-active: rgba(255, 255, 255, 0.08);
    --af-nav-hover: rgba(255, 255, 255, 0.05);
    --af-brand-tile: #F3F6F8;
    --af-shadow: none;
    --af-shadow-pop: 0 8px 24px rgba(0, 0, 0, 0.5);
    color-scheme: dark;
}

/* ---------- Spacing scale ---------- */
:root {
    --af-space-1: 4px;
    --af-space-2: 8px;
    --af-space-3: 12px;
    --af-space-4: 16px;
    --af-space-5: 24px;
    --af-space-6: 32px;
    --af-radius: 14px;
    --af-radius-sm: 10px;
}

/* ---------- Bootstrap variables mapped to the tokens (both themes) ----------
   --bs-body-bg is the *surface* (cards, inputs, modals, tables, dropdowns all use it);
   the page itself gets the darker/lighter "ground" on body below. */
:root,
[data-bs-theme="light"],
[data-bs-theme="dark"] {
    --bs-body-font-family: 'Figtree', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
    --bs-body-bg: var(--af-surface);
    --bs-body-color: var(--af-text);
    --bs-emphasis-color: var(--af-text);
    --bs-secondary-color: var(--af-muted);
    --bs-tertiary-color: var(--af-muted);
    --bs-secondary-bg: var(--af-surface-2);
    --bs-tertiary-bg: var(--af-surface-2);
    --bs-border-color: var(--af-border);
    --bs-border-color-translucent: var(--af-hairline);
    --bs-heading-color: var(--af-text);
    --bs-link-color: var(--af-blue-text);
    --bs-link-hover-color: var(--af-blue-hover);
    --bs-code-color: var(--af-violet-text);

    --bs-primary-text-emphasis: var(--af-info-text);
    --bs-primary-bg-subtle: var(--af-info-soft);
    --bs-primary-border-subtle: var(--af-hairline);
    --bs-info-text-emphasis: var(--af-violet-text);
    --bs-info-bg-subtle: var(--af-violet-soft);
    --bs-info-border-subtle: var(--af-hairline);
    --bs-success-text-emphasis: var(--af-ok-text);
    --bs-success-bg-subtle: var(--af-ok-soft);
    --bs-success-border-subtle: var(--af-hairline);
    --bs-warning-text-emphasis: var(--af-warn-text);
    --bs-warning-bg-subtle: var(--af-warn-soft);
    --bs-warning-border-subtle: var(--af-hairline);
    --bs-danger-text-emphasis: var(--af-danger-text);
    --bs-danger-bg-subtle: var(--af-danger-soft);
    --bs-danger-border-subtle: var(--af-hairline);
    --bs-secondary-text-emphasis: var(--af-text);
    --bs-secondary-bg-subtle: var(--af-surface-2);
    --bs-secondary-border-subtle: var(--af-hairline);
    --bs-light-text-emphasis: var(--af-text);
    --bs-light-bg-subtle: var(--af-surface-2);
    --bs-light-border-subtle: var(--af-hairline);
    --bs-dark-text-emphasis: var(--af-text);
    --bs-dark-bg-subtle: var(--af-surface-2);
    --bs-dark-border-subtle: var(--af-hairline);

    /* The existing brand variables from UI/site.css, so page headings and buttons follow the theme */
    --blue: var(--af-blue);
    --dark: var(--af-text);
    --bg-grey: var(--af-ground);
    --font-head: 'Figtree', system-ui, sans-serif;
    --font-body: 'Figtree', system-ui, sans-serif;
}

[data-bs-theme="light"] {
    --bs-primary: #0A6FA8;
    --bs-primary-rgb: 10, 111, 168;
    --bs-success: #8CC63F;
    --bs-success-rgb: 140, 198, 63;
    --bs-info: #009FE3;
    --bs-info-rgb: 0, 159, 227;
    --bs-warning: #F7931E;
    --bs-warning-rgb: 247, 147, 30;
    --bs-danger: #B42318;
    --bs-danger-rgb: 180, 35, 24;
    --bs-secondary: #536471;
    --bs-secondary-rgb: 83, 100, 113;
    --bs-body-color-rgb: 16, 40, 58;
    --bs-link-color-rgb: 10, 111, 168;
    --bs-link-hover-color-rgb: 8, 89, 138;
}

[data-bs-theme="dark"] {
    --bs-primary: #4FB7EE;
    --bs-primary-rgb: 79, 183, 238;
    --bs-success: #9BD15A;
    --bs-success-rgb: 155, 209, 90;
    --bs-info: #4FB7EE;
    --bs-info-rgb: 79, 183, 238;
    --bs-warning: #F7A443;
    --bs-warning-rgb: 247, 164, 67;
    --bs-danger: #F07A6E;
    --bs-danger-rgb: 240, 122, 110;
    --bs-secondary: #9FB2C0;
    --bs-secondary-rgb: 159, 178, 192;
    --bs-body-color-rgb: 230, 238, 243;
    --bs-link-color-rgb: 124, 201, 242;
    --bs-link-hover-color-rgb: 168, 220, 247;
}

/* ---------- Page base ---------- */
html.af-theme-switching *,
html.af-theme-switching *::before,
html.af-theme-switching *::after {
    transition: none !important;
}

html.admin-html {
    font-size: 87.5%; /* 14px, the size the admin pages are designed for (also on phones) */
}

body.admin-body {
    background-color: var(--af-ground);
    color: var(--af-text);
    font-family: var(--bs-body-font-family);
    line-height: 1.55;
}

.admin-body h1, .admin-body h2, .admin-body h3, .admin-body h4, .admin-body h5, .admin-body h6 {
    color: inherit;
}

/* Visible keyboard focus everywhere */
.admin-body :focus-visible {
    outline: 3px solid var(--af-sky);
    outline-offset: 2px;
}

.admin-body code {
    color: var(--af-violet-text);
    font-size: 0.9em;
    overflow-wrap: anywhere;
}

/* ---------- Shell ---------- */
/* The environment bar's height comes from _EnvironmentBanner (--env-banner-h: one line, or two on phones) */
html.has-env-banner { --af-banner-h: var(--env-banner-h, 32px); }
html:not(.has-env-banner) { --af-banner-h: 0px; }

/* Anchors and focused fields are not hidden under the sticky top bar (iPads and phones) */
@media (max-width: 991.98px) {
    html.admin-html { scroll-padding-top: calc(var(--af-banner-h) + 72px); }
}

.admin-shell {
    flex: 1 0 auto;
    display: flex;
    min-height: calc(100vh - var(--af-banner-h));
}

.admin-main {
    flex: 1 1 auto;
    min-width: 0; /* lets wide tables scroll inside .table-responsive instead of widening the page */
    padding: var(--af-space-6) 40px 40px;
}

.admin-main > .admin-content {
    max-width: 1600px;
}

/* Page titles: the old public "hero" blocks, as one consistent, left-aligned page heading */
.admin-body .hero {
    margin-top: 0;
    margin-bottom: var(--af-space-5) !important;
    padding: 0;
}

.admin-body .hero .container-fluid {
    padding-left: 0;
    padding-right: 0;
}

.admin-body .hero-inner {
    display: block;
    gap: 0;
}

.admin-body .hero-logo { display: none; }

.admin-body .hero-text {
    text-align: left !important;
    display: block !important;
    width: 100%;
}

.admin-body .hero-text h1,
.admin-body .admin-page-title,
.admin-body .admin-home-title {
    font-family: var(--bs-body-font-family);
    font-weight: 800;
    color: var(--af-text);
    font-size: clamp(1.5rem, 1.1rem + 1.3vw, 2rem);
    line-height: 1.2;
    letter-spacing: -0.01em;
    margin: 0 0 var(--af-space-1);
}

.admin-body .hero-text p {
    color: var(--af-muted);
    font-size: 1rem;
    font-weight: 500;
    margin-bottom: 0;
}

.admin-body .hero-text p code,
.admin-body .referral-hero-ref-code {
    font-size: 1rem;
}

/* Page heading with actions on the right (new markup) */
.admin-page-head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--af-space-3) var(--af-space-4);
    margin-bottom: var(--af-space-5);
}

.admin-page-head > :first-child { min-width: 0; }

.admin-page-sub {
    color: var(--af-muted);
    margin: 0;
}

.admin-page-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--af-space-2);
}

/* Sidebar (laptops) and slide-out menu (iPads and phones): the same markup, Bootstrap .offcanvas-lg */
.admin-sidebar {
    --bs-offcanvas-width: 280px;
    --bs-offcanvas-bg: var(--af-sidebar);
    --bs-offcanvas-color: var(--af-nav-text);
    --bs-offcanvas-zindex: 1045;
    color: var(--af-nav-text);
}

.admin-sidebar .offcanvas-header {
    padding: 16px 16px 4px;
}

.admin-sidebar .offcanvas-header .admin-brand { padding-bottom: 0; }

.admin-sidebar .btn-close {
    width: 44px;
    height: 44px;
    padding: 0;
    background-size: 1rem;
    opacity: 0.85;
}

.admin-sidebar-inner {
    flex: 1 0 auto;
    display: flex;
    flex-direction: column;
    gap: 2px;
    width: 100%;
    padding: 24px 16px 16px;
}

@media (min-width: 992px) {
    .admin-sidebar {
        flex: 0 0 248px;
        width: 248px;
        position: sticky;
        top: var(--af-banner-h);
        height: calc(100vh - var(--af-banner-h));
        overflow-y: auto;
        /* Bootstrap makes .offcanvas-lg background-color transparent !important at this width,
           so the navy is painted as a background image instead */
        background-image: linear-gradient(var(--af-sidebar), var(--af-sidebar));
        border-right: 1px solid var(--af-sidebar-border);
    }

    .admin-sidebar .offcanvas-body {
        flex-direction: column;
        flex-grow: 1;
        min-height: 100%;
    }
}

@media (max-width: 991.98px) {
    .admin-sidebar .offcanvas-body {
        display: flex;
        padding: 0;
    }

    .admin-sidebar-inner {
        padding-top: 4px;
    }

    .admin-sidebar-inner > .admin-brand {
        display: none; /* the offcanvas header shows it */
    }
}

/* Brand: the real logo on a small white tile (the artwork is made for light backgrounds) */
.admin-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 12px 18px;
    text-decoration: none;
    color: #fff;
    min-height: 44px;
}

.admin-brand:hover { color: #fff; }

.admin-brand-tile {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    padding: 4px;
    border-radius: 11px;
    background: var(--af-brand-tile);
}

.admin-brand-logo {
    display: block;
    width: 100%;
    height: auto; /* keeps the logo's own proportions */
}

.admin-brand-text {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
}

.admin-brand-name {
    color: #fff;
    font-weight: 800;
    font-size: 17px;
}

.admin-brand-sub {
    color: var(--af-nav-section);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.02em;
}

.admin-nav-section {
    color: var(--af-nav-section);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 16px 12px 4px;
    margin: 0;
}

.admin-nav-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.admin-nav-link {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 44px;
    padding: 0 12px;
    border-radius: 10px;
    color: var(--af-nav-text);
    text-decoration: none;
    font-size: 15px;
    font-weight: 500;
    background: none;
    border: 0;
    width: 100%;
    text-align: left;
    font-family: inherit;
}

.admin-nav-link:hover,
.admin-nav-link:focus-visible {
    background: var(--af-nav-hover);
    color: #fff;
}

.admin-nav-link.active {
    background: var(--af-nav-active);
    color: #fff;
    font-weight: 600;
}

.admin-nav-link .bi {
    font-size: 1.05rem;
    width: 18px;
    text-align: center;
    flex-shrink: 0;
}

.admin-nav-link-small {
    font-size: 13px;
    color: var(--af-nav-section);
}

.admin-nav-badge {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    height: 22px;
    padding: 0 8px;
    border-radius: 999px;
    background: #F7931E;
    color: #10283A;
    font-size: 12px;
    font-weight: 800;
}

.admin-nav-footer {
    margin-top: auto;
    padding: 12px 0 0;
    border-top: 1px solid rgba(255, 255, 255, 0.10);
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.admin-nav-user {
    display: flex;
    flex-direction: column;
    padding: 6px 12px 8px;
    min-width: 0;
}

.admin-nav-user-name {
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    overflow-wrap: anywhere;
}

.admin-nav-user-role {
    color: var(--af-nav-section);
    font-size: 13px;
}

.admin-nav-footer form { margin: 0; }

/* Day / Night switch */
.admin-theme-switch {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 44px;
    padding: 0 12px;
    color: var(--af-nav-text);
    font-size: 15px;
    font-weight: 500;
    cursor: pointer;
    border-radius: 10px;
    margin: 0;
}

.admin-theme-switch:hover { background: var(--af-nav-hover); color: #fff; }

.admin-theme-switch .form-check-input {
    width: 2.6em;
    height: 1.4em;
    margin: 0;
    cursor: pointer;
    background-color: rgba(255, 255, 255, 0.15);
    border-color: rgba(255, 255, 255, 0.35);
    float: none;
}

.admin-theme-switch .form-check-input:checked {
    background-color: #4FB7EE;
    border-color: #4FB7EE;
}

/* Top bar (iPads and phones) */
.admin-topbar {
    position: sticky;
    top: var(--af-banner-h);
    z-index: 1020;
    display: flex;
    align-items: center;
    gap: 6px;
    min-height: 60px;
    padding: 8px 8px;
    background: var(--af-sidebar);
    color: #fff;
}

.admin-topbar .admin-brand {
    padding: 0 8px 0 0;
}

.admin-topbar .admin-brand-tile {
    width: 38px;
    height: 38px;
    border-radius: 10px;
}

.admin-topbar .admin-brand-name { font-size: 16px; }

.admin-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: #fff;
    font-size: 1.5rem;
    padding: 0;
}

.admin-icon-btn:hover { background: rgba(255, 255, 255, 0.08); color: #fff; }

/* Bottom tab bar (volunteers on phones) */
.admin-tabbar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1030;
    display: flex;
    background: var(--af-surface);
    border-top: 1px solid var(--af-hairline);
    padding-bottom: env(safe-area-inset-bottom);
}

.admin-tab {
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    min-height: 58px;
    color: var(--af-muted);
    text-decoration: none;
    font-size: 12px;
    font-weight: 600;
}

.admin-tab .bi { font-size: 1.35rem; line-height: 1; }

.admin-tab.active,
.admin-tab:hover { color: var(--af-blue-text); }

/* Room for the tab bar: nothing on the page sits under it */
@media (max-width: 767.98px) {
    body.has-tabbar .admin-main { padding-bottom: calc(96px + env(safe-area-inset-bottom)); }
    body.has-tabbar { scroll-padding-bottom: calc(80px + env(safe-area-inset-bottom)); }
}

/* Smaller screens: tighter page padding */
@media (max-width: 991.98px) {
    .admin-main { padding: var(--af-space-5) var(--af-space-5) var(--af-space-6); }
}

@media (max-width: 575.98px) {
    .admin-main { padding: 20px var(--af-space-4) var(--af-space-6); }
}

/* Signed-out pages (login, password reset): no menu, a simple top bar */
.admin-public-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 60px;
    padding: 8px 16px;
    background: var(--af-sidebar);
}

.admin-public-bar .admin-brand { padding-bottom: 0; }

.admin-public-bar .admin-theme-switch { padding-right: 4px; }

.admin-public-main {
    flex: 1 0 auto;
    width: 100%;
    max-width: 1100px;
    margin: 0 auto;
    padding: 32px 20px 40px;
}

/* Skip link */
.admin-skip-link:focus {
    position: fixed;
    top: calc(var(--af-banner-h) + 8px);
    left: 8px;
    z-index: 2000;
    padding: 10px 16px;
    background: var(--af-surface);
    color: var(--af-text);
    border-radius: 8px;
}

/* ---------- Cookie consent (Silktide, shared with the public site) ----------
   The floating cookie button covered buttons and tabs on phones. The admin is a staff-only site, so the
   button is hidden here and "Cookie settings" in the menu footer reopens the same panel (admin-shell.js).
   The consent banner itself still appears until a choice is made. The panel follows the admin theme.
   The public referral form does not load this file, so its floating button is unchanged. */
.admin-body #silktide-cookie-icon { display: none !important; }

.admin-body #silktide-wrapper {
    --fontFamily: 'Figtree', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
    --primaryColor: var(--af-blue);
    --backgroundColor: var(--af-surface);
    --textColor: var(--af-text);
    --cookieIconColor: var(--af-blue);
    --cookieIconBackgroundColor: var(--af-surface);
}

/* =====================================================================
   Components: day and night
   ===================================================================== */

/* ---------- Cards: one level per section ---------- */
.admin-body .card {
    --bs-card-bg: var(--af-surface);
    --bs-card-color: var(--af-text);
    --bs-card-border-color: var(--af-hairline);
    --bs-card-border-width: 1px;
    --bs-card-cap-bg: transparent;
    --bs-card-cap-color: var(--af-text);
    --bs-card-cap-padding-y: 14px;
    --bs-card-cap-padding-x: 20px;
    --bs-card-spacer-y: 20px;
    --bs-card-spacer-x: 20px;
    --bs-card-border-radius: var(--af-radius);
    --bs-card-inner-border-radius: calc(var(--af-radius) - 1px);
    box-shadow: var(--af-shadow);
}

.admin-body .card-header {
    background-color: transparent !important; /* also .bg-white / .bg-light headers */
    border-bottom: 1px solid var(--af-hairline);
    color: var(--af-text);
}

.admin-body .card-header h1, .admin-body .card-header h2, .admin-body .card-header h3,
.admin-body .card-header h4, .admin-body .card-header h5, .admin-body .card-header h6,
.admin-body .card-header .card-title {
    font-size: 1.07rem;
    font-weight: 700;
    margin-bottom: 0;
}

.admin-body .card-header .bi:first-child { color: var(--af-muted); }

.admin-body .card-footer {
    background-color: transparent;
    border-top: 1px solid var(--af-hairline);
}

/* Coloured card edges (border-success, border-warning ...): a hairline card with a thin accent on the left */
.admin-body .card.border-primary,
.admin-body .card.border-info,
.admin-body .card.border-success,
.admin-body .card.border-warning,
.admin-body .card.border-danger,
.admin-body .card.border-secondary {
    border-color: var(--af-hairline) !important;
    border-left-width: 3px !important;
}
.admin-body .card.border-primary, .admin-body .card.border-info { border-left-color: var(--af-blue) !important; }
.admin-body .card.border-success { border-left-color: var(--af-green) !important; }
.admin-body .card.border-warning { border-left-color: var(--af-orange) !important; }
.admin-body .card.border-danger { border-left-color: var(--af-red) !important; }
.admin-body .card.border-secondary { border-left-color: var(--af-border-strong) !important; }

/* Card headers painted with a status colour (bg-warning ...) become a soft tint */
.admin-body .card-header.bg-warning { background-color: var(--af-warn-soft) !important; color: var(--af-warn-text); }
.admin-body .card-header.bg-danger { background-color: var(--af-danger-soft) !important; color: var(--af-danger-text); }
.admin-body .card-header.bg-success { background-color: var(--af-ok-soft) !important; color: var(--af-ok-text); }
.admin-body .card-header.bg-primary,
.admin-body .card-header.bg-info { background-color: var(--af-info-soft) !important; color: var(--af-info-text); }

/* Level 2: a card inside a card is a tinted panel: no border, no shadow */
.admin-body .card .card {
    --bs-card-bg: var(--af-surface-2);
    --bs-card-border-width: 0;
    --bs-card-border-radius: 12px;
    --bs-card-inner-border-radius: 12px;
    --bs-card-cap-padding-y: 12px;
    --bs-card-cap-padding-x: 16px;
    --bs-card-spacer-y: 16px;
    --bs-card-spacer-x: 16px;
    box-shadow: none !important;
    border-left-width: 0 !important;
}

.admin-body .card .card > .card-header { border-bottom: 0; padding-bottom: 0; }
.admin-body .card .card > .card-footer { border-top: 0; padding-top: 0; }

/* Level 3: flat (no panel at all) */
.admin-body .card .card .card {
    --bs-card-bg: transparent;
    --bs-card-spacer-x: 0;
    --bs-card-cap-padding-x: 0;
}

/* Fields and boxes inside a tinted panel use the plain surface, so they still stand apart */
.admin-body .card .card .timeline-content-box,
.admin-body .card .card .bg-light,
.admin-body .card .card .form-control-readonly-block,
.admin-body .card .card .form-control[readonly],
.admin-body .card .card .form-control:disabled {
    background-color: var(--af-surface) !important;
}

.admin-body .shadow,
.admin-body .shadow-sm,
.admin-body .shadow-lg { box-shadow: var(--af-shadow) !important; }

.admin-body .card .shadow,
.admin-body .card .shadow-sm,
.admin-body .card .shadow-lg { box-shadow: none !important; }

/* Generic coloured borders on panels (not cards): thin hairlines */
.admin-body .border:not(.card):not(.btn):not(.form-control):not(.badge) { border-color: var(--af-hairline) !important; }

/* ---------- Tables ---------- */
.admin-body .table {
    --bs-table-bg: transparent;
    --bs-table-color: var(--af-text);
    --bs-table-border-color: var(--af-hairline);
    --bs-table-striped-bg: var(--af-surface-2);
    --bs-table-striped-color: var(--af-text);
    --bs-table-hover-bg: var(--af-surface-2);
    --bs-table-hover-color: var(--af-text);
    --bs-table-active-bg: var(--af-surface-2);
    --bs-table-active-color: var(--af-text);
    color: var(--af-text);
}

.admin-body .table > :not(caption) > * > * {
    padding: 12px 14px;
    border-bottom-color: var(--af-hairline);
}

.admin-body .table-sm > :not(caption) > * > * { padding: 8px 10px; }

.admin-body .table > thead,
.admin-body .table-light,
.admin-body .table > thead.table-light {
    --bs-table-bg: transparent;
    --bs-table-color: var(--af-muted);
    --bs-table-border-color: var(--af-hairline);
}

.admin-body .table > thead > tr > th,
.admin-body .table > :not(caption) > * > th {
    color: var(--af-muted);
    font-weight: 600;
    font-size: 0.93rem;
}

.admin-body .table > thead > tr > th {
    background-color: transparent;
    white-space: nowrap;
}

/* The last row of a table in a card has no line under it (the card edge is enough) */
.admin-body .card .table > tbody > tr:last-child > * { border-bottom-width: 0; }

/* Bordered tables: horizontal hairlines only */
.admin-body .table-bordered > :not(caption) > * { border-width: 0; }
.admin-body .table-bordered > :not(caption) > * > * { border-width: 0 0 1px; }

/* Row tints (inactive user, overdue ...) follow the theme instead of Bootstrap's light colours */
.admin-body .table-warning { --bs-table-bg: var(--af-warn-soft); --bs-table-color: var(--af-text); --bs-table-border-color: var(--af-hairline); --bs-table-hover-bg: var(--af-warn-soft); --bs-table-hover-color: var(--af-text); }
.admin-body .table-danger { --bs-table-bg: var(--af-danger-soft); --bs-table-color: var(--af-text); --bs-table-border-color: var(--af-hairline); --bs-table-hover-bg: var(--af-danger-soft); --bs-table-hover-color: var(--af-text); }
.admin-body .table-success { --bs-table-bg: var(--af-ok-soft); --bs-table-color: var(--af-text); --bs-table-border-color: var(--af-hairline); --bs-table-hover-bg: var(--af-ok-soft); --bs-table-hover-color: var(--af-text); }
.admin-body .table-info,
.admin-body .table-primary { --bs-table-bg: var(--af-info-soft); --bs-table-color: var(--af-text); --bs-table-border-color: var(--af-hairline); --bs-table-hover-bg: var(--af-info-soft); --bs-table-hover-color: var(--af-text); }
.admin-body .table-secondary,
.admin-body .table-active { --bs-table-bg: var(--af-surface-2); --bs-table-color: var(--af-text); --bs-table-border-color: var(--af-hairline); }

.admin-body .table a:not(.btn) { font-weight: 600; }

/* ---------- Forms ---------- */
.admin-body .form-label,
.admin-body .col-form-label {
    color: var(--af-text);
    font-weight: 600;
}

.admin-body .form-text { color: var(--af-muted); }

.admin-body .form-control,
.admin-body .form-select {
    border-color: var(--af-border-strong);
    color: var(--af-text);
    background-color: var(--af-surface);
    border-radius: var(--af-radius-sm);
}

.admin-body .form-control::placeholder { color: var(--af-muted); opacity: 1; }

.admin-body .form-control:focus,
.admin-body .form-select:focus {
    border-color: var(--af-blue);
    box-shadow: 0 0 0 0.2rem rgba(var(--af-blue-rgb), 0.25);
}

/* Read-only and disabled fields: a quiet tinted box with full-strength text (never white with pale text) */
.admin-body .form-control:disabled,
.admin-body .form-control[readonly],
.admin-body .form-select:disabled,
.admin-body textarea[readonly],
.admin-body .form-control-readonly-block {
    background-color: var(--af-surface-2) !important;
    color: var(--af-text) !important;
    border-color: var(--af-hairline) !important;
    opacity: 1;
    -webkit-text-fill-color: var(--af-text);
}

.admin-body .form-control-plaintext { color: var(--af-text); }
.admin-body .form-control-plaintext a { color: var(--af-blue-text); }

.admin-body .input-group-text {
    background-color: var(--af-surface-2);
    border-color: var(--af-border-strong);
    color: var(--af-muted);
}

.admin-body .input-group > .form-control:not(:last-child),
.admin-body .input-group > .form-select:not(:last-child) { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.admin-body .input-group > :not(:first-child):not(.dropdown-menu) { border-top-left-radius: 0; border-bottom-left-radius: 0; }

.admin-body .form-check-input {
    border-color: var(--af-border-strong);
    background-color: var(--af-surface);
}

.admin-body .form-check-input:checked {
    background-color: var(--af-blue);
    border-color: var(--af-blue);
}

.admin-body .form-switch .form-check-input:not(:checked) {
    background-color: var(--af-soft);
}

.admin-body fieldset legend { font-size: 1.07rem; font-weight: 700; }

/* ---------- Buttons ---------- */
.admin-body .btn {
    --bs-btn-border-radius: var(--af-radius-sm);
    --bs-btn-font-weight: 600;
    --bs-btn-border-width: 1px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
}

.admin-body .btn.w-100,
.admin-body .btn.d-block { display: flex; }
.admin-body .btn.text-start { justify-content: flex-start; text-align: left; }
.admin-body .btn > .bi + * { margin-left: 0; }
.admin-body .btn > .me-1:first-child,
.admin-body .btn > .me-2:first-child { margin-right: 0 !important; }

.admin-body .btn-sm {
    --bs-btn-border-radius: 8px;
}

/* Primary: filled blue. The older green / orange / sky / purple fills are folded into it, so each screen
   has one obvious main action colour. */
.admin-body .btn-primary,
.admin-body .btn-success,
.admin-body .btn-orange,
.admin-body .btn-info,
.admin-body .btn-indigo {
    --bs-btn-color: var(--af-on-blue);
    --bs-btn-bg: var(--af-blue);
    --bs-btn-border-color: var(--af-blue);
    --bs-btn-hover-color: var(--af-on-blue);
    --bs-btn-hover-bg: var(--af-blue-hover);
    --bs-btn-hover-border-color: var(--af-blue-hover);
    --bs-btn-active-color: var(--af-on-blue);
    --bs-btn-active-bg: var(--af-blue-hover);
    --bs-btn-active-border-color: var(--af-blue-hover);
    --bs-btn-disabled-color: var(--af-on-blue);
    --bs-btn-disabled-bg: var(--af-blue);
    --bs-btn-disabled-border-color: var(--af-blue);
    --bs-btn-focus-shadow-rgb: var(--af-blue-rgb);
    background-color: var(--bs-btn-bg);
    border-color: var(--bs-btn-border-color);
    color: var(--bs-btn-color);
}

.admin-body .btn-primary:hover,
.admin-body .btn-success:hover,
.admin-body .btn-orange:hover,
.admin-body .btn-info:hover,
.admin-body .btn-indigo:hover {
    background-color: var(--bs-btn-hover-bg);
    border-color: var(--bs-btn-hover-border-color);
    color: var(--bs-btn-hover-color);
}

/* Secondary: a soft neutral tint, no outline */
.admin-body .btn-secondary,
.admin-body .btn-outline-secondary,
.admin-body .btn-light,
.admin-body .btn-outline-light,
.admin-body .btn-dark,
.admin-body .btn-outline-dark {
    --bs-btn-color: var(--af-text);
    --bs-btn-bg: var(--af-soft);
    --bs-btn-border-color: transparent;
    --bs-btn-hover-color: var(--af-text);
    --bs-btn-hover-bg: var(--af-soft-hover);
    --bs-btn-hover-border-color: transparent;
    --bs-btn-active-color: var(--af-text);
    --bs-btn-active-bg: var(--af-soft-hover);
    --bs-btn-active-border-color: transparent;
    --bs-btn-disabled-color: var(--af-muted);
    --bs-btn-disabled-bg: var(--af-soft);
    --bs-btn-disabled-border-color: transparent;
    --bs-btn-focus-shadow-rgb: var(--af-blue-rgb);
}

/* Secondary, blue: View / Open style actions */
.admin-body .btn-outline-primary,
.admin-body .btn-outline-info,
.admin-body .btn-outline-indigo {
    --bs-btn-color: var(--af-blue-text);
    --bs-btn-bg: var(--af-blue-soft);
    --bs-btn-border-color: transparent;
    --bs-btn-hover-color: var(--af-blue-strong-text);
    --bs-btn-hover-bg: var(--af-blue-soft-hover);
    --bs-btn-hover-border-color: transparent;
    --bs-btn-active-color: var(--af-blue-strong-text);
    --bs-btn-active-bg: var(--af-blue-soft-hover);
    --bs-btn-active-border-color: transparent;
    --bs-btn-disabled-color: var(--af-blue-text);
    --bs-btn-disabled-bg: var(--af-blue-soft);
    --bs-btn-disabled-border-color: transparent;
    --bs-btn-focus-shadow-rgb: var(--af-blue-rgb);
}

.admin-body .btn-outline-success {
    --bs-btn-color: var(--af-ok-text);
    --bs-btn-bg: var(--af-ok-soft);
    --bs-btn-border-color: transparent;
    --bs-btn-hover-color: var(--af-ok-text);
    --bs-btn-hover-bg: var(--af-ok-soft);
    --bs-btn-hover-border-color: var(--af-green);
    --bs-btn-active-color: var(--af-ok-text);
    --bs-btn-active-bg: var(--af-ok-soft);
    --bs-btn-active-border-color: var(--af-green);
    --bs-btn-disabled-color: var(--af-ok-text);
    --bs-btn-disabled-bg: var(--af-ok-soft);
    --bs-btn-disabled-border-color: transparent;
}

/* Caution (release an allocation, unlock): amber tint */
.admin-body .btn-warning,
.admin-body .btn-outline-warning {
    --bs-btn-color: var(--af-warn-text);
    --bs-btn-bg: var(--af-warn-soft);
    --bs-btn-border-color: transparent;
    --bs-btn-hover-color: var(--af-warn-text);
    --bs-btn-hover-bg: var(--af-warn-soft);
    --bs-btn-hover-border-color: var(--af-orange);
    --bs-btn-active-color: var(--af-warn-text);
    --bs-btn-active-bg: var(--af-warn-soft);
    --bs-btn-active-border-color: var(--af-orange);
    --bs-btn-disabled-color: var(--af-warn-text);
    --bs-btn-disabled-bg: var(--af-warn-soft);
    --bs-btn-disabled-border-color: transparent;
    background-color: var(--bs-btn-bg);
    border-color: var(--bs-btn-border-color);
    color: var(--bs-btn-color);
}

.admin-body .btn-warning:hover,
.admin-body .btn-outline-warning:hover {
    background-color: var(--bs-btn-hover-bg);
    border-color: var(--bs-btn-hover-border-color);
    color: var(--bs-btn-hover-color);
}

/* Destructive: red text (outline-danger) or a red tint (danger, used to confirm) */
.admin-body .btn-outline-danger {
    --bs-btn-color: var(--af-red-text);
    --bs-btn-bg: transparent;
    --bs-btn-border-color: transparent;
    --bs-btn-hover-color: var(--af-danger-text);
    --bs-btn-hover-bg: var(--af-danger-soft);
    --bs-btn-hover-border-color: transparent;
    --bs-btn-active-color: var(--af-danger-text);
    --bs-btn-active-bg: var(--af-danger-soft);
    --bs-btn-active-border-color: transparent;
    --bs-btn-disabled-color: var(--af-red-text);
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: transparent;
    --bs-btn-focus-shadow-rgb: var(--bs-danger-rgb);
}

.admin-body .btn-danger {
    --bs-btn-color: var(--af-danger-text);
    --bs-btn-bg: var(--af-danger-soft);
    --bs-btn-border-color: transparent;
    --bs-btn-hover-color: var(--af-on-red);
    --bs-btn-hover-bg: var(--af-red);
    --bs-btn-hover-border-color: var(--af-red);
    --bs-btn-active-color: var(--af-on-red);
    --bs-btn-active-bg: var(--af-red);
    --bs-btn-active-border-color: var(--af-red);
    --bs-btn-disabled-color: var(--af-danger-text);
    --bs-btn-disabled-bg: var(--af-danger-soft);
    --bs-btn-disabled-border-color: transparent;
    --bs-btn-focus-shadow-rgb: var(--bs-danger-rgb);
}

.admin-body .btn-link {
    --bs-btn-color: var(--af-blue-text);
    --bs-btn-hover-color: var(--af-blue-hover);
    --bs-btn-active-color: var(--af-blue-hover);
    --bs-btn-disabled-color: var(--af-muted);
}

/* Submit buttons with an inline style="background:var(--blue);color:#fff" (forms across the admin) */
[data-bs-theme="dark"] .admin-body [style*="background:var(--blue)"],
[data-bs-theme="dark"] .admin-body [style*="background: var(--blue)"] {
    color: var(--af-on-blue) !important;
}

/* Button groups: separate light buttons with a small gap, not a boxed strip */
.admin-body .btn-group,
.admin-body .btn-group-sm {
    gap: var(--af-space-1);
    flex-wrap: wrap;
}

.admin-body .btn-group > .btn,
.admin-body .btn-group > .btn-group > .btn,
.admin-body .btn-group > form > .btn {
    border-radius: var(--bs-btn-border-radius) !important;
    margin-left: 0 !important;
}

.admin-body .btn-group > form { display: inline-flex; margin: 0; }

/* Icon-only actions (edit, delete, more): borderless, 44 x 44 touch target. Needs an aria-label. */
.admin-icon-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 0;
    border-radius: var(--af-radius-sm);
    background: transparent;
    color: var(--af-muted);
    font-size: 1.1rem;
    line-height: 1;
    text-decoration: none;
    cursor: pointer;
}

.admin-icon-action:hover,
.admin-icon-action:focus-visible,
.admin-icon-action[aria-expanded="true"] {
    background: var(--af-soft);
    color: var(--af-text);
}

.admin-icon-action.is-danger { color: var(--af-red-text); }
.admin-icon-action.is-danger:hover,
.admin-icon-action.is-danger:focus-visible { background: var(--af-danger-soft); color: var(--af-danger-text); }

.admin-icon-action.dropdown-toggle::after { display: none; }

/* ---------- Badges: soft status chips ---------- */
.admin-body .badge {
    --bs-badge-font-weight: 600;
    --bs-badge-border-radius: 999px;
    --bs-badge-padding-x: 0.65em;
    --bs-badge-padding-y: 0.38em;
    letter-spacing: 0.01em;
}

.admin-body .badge.bg-success { background-color: var(--af-ok-soft) !important; color: var(--af-ok-text) !important; }
.admin-body .badge.bg-warning { background-color: var(--af-warn-soft) !important; color: var(--af-warn-text) !important; }
.admin-body .badge.bg-danger { background-color: var(--af-danger-soft) !important; color: var(--af-danger-text) !important; }
.admin-body .badge.bg-primary { background-color: var(--af-info-soft) !important; color: var(--af-info-text) !important; }
.admin-body .badge.bg-info { background-color: var(--af-violet-soft) !important; color: var(--af-violet-text) !important; }
.admin-body .badge.bg-secondary,
.admin-body .badge.bg-dark,
.admin-body .badge.bg-light { background-color: var(--af-soft) !important; color: var(--af-text) !important; }

/* Badges used as counters on tabs / buttons stay compact */
.admin-body .nav-link .badge,
.admin-body .btn .badge { --bs-badge-padding-y: 0.25em; }

/* ---------- Alerts: soft fills, no borders ---------- */
.admin-body .alert {
    --bs-alert-border-radius: 12px;
    --bs-alert-padding-x: 16px;
    --bs-alert-padding-y: 12px;
    border-radius: 12px !important; /* also alerts marked .rounded-0 */
}

.admin-body .alert-success { --bs-alert-color: var(--af-ok-text); --bs-alert-bg: var(--af-ok-soft); --bs-alert-border-color: transparent; --bs-alert-link-color: var(--af-ok-text); }
.admin-body .alert-warning { --bs-alert-color: var(--af-warn-text); --bs-alert-bg: var(--af-warn-soft); --bs-alert-border-color: transparent; --bs-alert-link-color: var(--af-warn-text); }
.admin-body .alert-danger { --bs-alert-color: var(--af-danger-text); --bs-alert-bg: var(--af-danger-soft); --bs-alert-border-color: transparent; --bs-alert-link-color: var(--af-danger-text); }
.admin-body .alert-info,
.admin-body .alert-primary { --bs-alert-color: var(--af-info-text); --bs-alert-bg: var(--af-info-soft); --bs-alert-border-color: transparent; --bs-alert-link-color: var(--af-info-text); }
.admin-body .alert-secondary,
.admin-body .alert-light,
.admin-body .alert-dark { --bs-alert-color: var(--af-text); --bs-alert-bg: var(--af-surface-2); --bs-alert-border-color: transparent; --bs-alert-link-color: var(--af-blue-text); }

.admin-body .alert .btn-close { padding: 14px; }

/* ---------- Text utilities: accent colours as readable text ---------- */
.admin-body .text-success { color: var(--af-green-text) !important; }
.admin-body .text-warning { color: var(--af-orange-text) !important; }
.admin-body .text-danger { color: var(--af-red-text) !important; }
.admin-body .text-info,
.admin-body .text-primary { color: var(--af-blue-text) !important; }
.admin-body .text-muted,
.admin-body .text-secondary,
.admin-body .text-body-secondary { color: var(--af-muted) !important; }
.admin-body .text-orange { color: var(--af-orange-text) !important; }
.admin-body .text-blue { color: var(--af-blue-text) !important; }
.admin-body .text-green { color: var(--af-green-text) !important; }

/* ---------- Light-only helpers and inline white panels follow the theme ---------- */
.admin-body .bg-light {
    background-color: var(--af-surface-2) !important;
    color: var(--af-text);
}

[data-bs-theme="dark"] .admin-body .bg-white,
[data-bs-theme="dark"] .admin-body .bg-body {
    background-color: var(--af-surface) !important;
    color: var(--af-text);
}

[data-bs-theme="dark"] .admin-body .text-dark:not(.badge):not([class*="bg-"]):not(.btn) {
    color: var(--af-text) !important;
}

[data-bs-theme="dark"] .admin-body .text-black { color: var(--af-text) !important; }

/* Inline white / light panels (style="background:#fff", "#f8f9fa" ...) used by many forms */
[data-bs-theme="dark"] .admin-body [style*="background:#fff"],
[data-bs-theme="dark"] .admin-body [style*="background: #fff"],
[data-bs-theme="dark"] .admin-body [style*="background:white"],
[data-bs-theme="dark"] .admin-body [style*="background: white"],
[data-bs-theme="dark"] .admin-body [style*="background-color:#fff"],
[data-bs-theme="dark"] .admin-body [style*="background-color: #fff"],
[data-bs-theme="dark"] .admin-body [style*="background-color: white"] {
    background-color: var(--af-surface) !important;
    color: var(--af-text);
}

[data-bs-theme="dark"] .admin-body [style*="background:#f8f9fa"],
[data-bs-theme="dark"] .admin-body [style*="background: #f8f9fa"],
[data-bs-theme="dark"] .admin-body [style*="background-color:#f8f9fa"],
[data-bs-theme="dark"] .admin-body [style*="background-color: #f8f9fa"] {
    background-color: var(--af-surface-2) !important;
    color: var(--af-text);
}

/* ---------- Tabs: one row of underlined tabs (scrolls sideways on phones, never stacks) ---------- */
.admin-body .nav-tabs,
.admin-body .nav-tabs.flex-column {
    --bs-nav-tabs-border-width: 0;
    display: flex;
    flex-direction: row !important;
    flex-wrap: nowrap;
    gap: var(--af-space-1);
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    border-bottom: 1px solid var(--af-hairline);
    margin-bottom: 0;
}

.admin-body .nav-tabs::-webkit-scrollbar { display: none; }

.admin-body .nav-tabs .nav-item,
.admin-body .nav-tabs.flex-column .nav-item {
    flex: 0 0 auto;
    width: auto !important;
    margin: 0 !important;
}

.admin-body .nav-tabs .nav-link,
.admin-body .nav-tabs.flex-column .nav-link {
    display: flex;
    align-items: center;
    gap: 4px;
    min-height: 46px;
    margin: 0 0 -1px !important;
    padding: 0 12px !important;
    border: 0 !important;
    border-bottom: 2px solid transparent !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    color: var(--af-muted) !important;
    font-weight: 600;
    white-space: nowrap;
}

.admin-body .nav-tabs .nav-link:hover,
.admin-body .nav-tabs .nav-link:focus-visible {
    color: var(--af-text) !important;
    border-bottom-color: var(--af-border-strong) !important;
}

.admin-body .nav-tabs .nav-link.active,
.admin-body .nav-tabs.flex-column .nav-link.active {
    color: var(--af-text) !important;
    border-bottom-color: var(--af-blue) !important;
    background: transparent !important;
}

.admin-body .nav-tabs .nav-link .bi { color: inherit; }

/* The pane under the tabs: flat when it holds cards (the card is the one level); otherwise it is the card */
.admin-body .tab-content {
    background-color: transparent;
    border: 0;
    border-radius: 0;
    padding: var(--af-space-4) 0 0 !important;
}

.admin-body .tab-content:not(:has(> .card, > .tab-pane > .card, > form > .card, > div > .card)) {
    background-color: var(--af-surface);
    border: 1px solid var(--af-hairline);
    border-radius: var(--af-radius);
    padding: 20px !important;
    margin-top: var(--af-space-4);
    box-shadow: var(--af-shadow);
}

/* Global .nav-link styles from UI/site.css (public navbar) must not leak into pills / list nav */
.admin-body .nav-pills .nav-link {
    border-radius: 999px;
    color: var(--af-text) !important;
}

.admin-body .nav-pills .nav-link:hover { background: var(--af-soft); color: var(--af-text) !important; }

.admin-body .nav-pills .nav-link.active {
    background-color: var(--af-blue);
    color: var(--af-on-blue) !important;
}

/* ---------- Dropdowns and modals ---------- */
.admin-body .dropdown-menu {
    --bs-dropdown-bg: var(--af-surface);
    --bs-dropdown-color: var(--af-text);
    --bs-dropdown-border-color: var(--af-hairline);
    --bs-dropdown-link-color: var(--af-text);
    --bs-dropdown-link-hover-color: var(--af-text);
    --bs-dropdown-link-hover-bg: var(--af-soft);
    --bs-dropdown-link-active-color: var(--af-on-blue);
    --bs-dropdown-link-active-bg: var(--af-blue);
    --bs-dropdown-divider-bg: var(--af-hairline);
    --bs-dropdown-border-radius: 12px;
    --bs-dropdown-padding-y: 6px;
    border: 1px solid var(--af-hairline);
    box-shadow: var(--af-shadow-pop);
    border-radius: 12px;
}

.admin-body .dropdown-item {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 44px;
    padding: 0 16px;
    font-weight: 500;
}

.admin-body .dropdown-item:hover,
.admin-body .dropdown-item:focus {
    background: var(--af-soft);
    color: var(--af-text);
}

.admin-body .dropdown-item.text-danger:hover,
.admin-body .dropdown-item.text-danger:focus { background: var(--af-danger-soft); }

.admin-body .dropdown-item .bi { width: 18px; text-align: center; }

.admin-body .modal {
    --bs-modal-bg: var(--af-surface);
    --bs-modal-color: var(--af-text);
    --bs-modal-border-color: transparent;
    --bs-modal-border-radius: 16px;
    --bs-modal-inner-border-radius: 16px;
    --bs-modal-header-border-color: var(--af-hairline);
    --bs-modal-footer-border-color: var(--af-hairline);
    --bs-modal-box-shadow: var(--af-shadow-pop);
}

.admin-body .modal-header.bg-danger,
.admin-body .modal-header.bg-warning,
.admin-body .modal-header.bg-primary,
.admin-body .modal-header.bg-success,
.admin-body .modal-header.bg-info {
    background-color: transparent !important;
    color: var(--af-text) !important;
}

.admin-body .modal-header .btn-close-white { filter: none; }
[data-bs-theme="dark"] .admin-body .modal-header .btn-close-white { filter: var(--bs-btn-close-white-filter); }

.admin-body .modal-title { font-weight: 700; font-size: 1.15rem; }

.admin-body .modal-backdrop { --bs-backdrop-opacity: 0.45; }

.admin-body .offcanvas:not(.admin-sidebar) {
    --bs-offcanvas-bg: var(--af-surface);
    --bs-offcanvas-color: var(--af-text);
}

/* ---------- List groups: rows divided by hairlines, never a bordered box ---------- */
.admin-body .list-group {
    --bs-list-group-bg: transparent;
    --bs-list-group-color: var(--af-text);
    --bs-list-group-border-color: var(--af-hairline);
    --bs-list-group-border-radius: 0;
    --bs-list-group-item-padding-x: 0;
    --bs-list-group-item-padding-y: 12px;
    --bs-list-group-action-color: var(--af-text);
    --bs-list-group-action-hover-color: var(--af-text);
    --bs-list-group-action-hover-bg: var(--af-surface-2);
    --bs-list-group-action-active-color: var(--af-text);
    --bs-list-group-action-active-bg: var(--af-surface-2);
    --bs-list-group-active-color: var(--af-blue-text);
    --bs-list-group-active-bg: var(--af-blue-soft);
    --bs-list-group-active-border-color: var(--af-hairline);
    --bs-list-group-disabled-color: var(--af-muted);
    --bs-list-group-disabled-bg: transparent;
}

.admin-body .list-group-item {
    border-left: 0;
    border-right: 0;
    border-radius: 0 !important;
}

.admin-body .list-group > .list-group-item:first-child { border-top: 0; }
.admin-body .list-group > .list-group-item:last-child { border-bottom: 0; }

.admin-body .list-group-item-action {
    padding-left: 12px;
    padding-right: 12px;
    border-radius: 10px !important;
}

.admin-body .list-group-item-success { background-color: var(--af-ok-soft); color: var(--af-ok-text); }
.admin-body .list-group-item-warning { background-color: var(--af-warn-soft); color: var(--af-warn-text); }
.admin-body .list-group-item-danger { background-color: var(--af-danger-soft); color: var(--af-danger-text); }
.admin-body .list-group-item-info,
.admin-body .list-group-item-primary { background-color: var(--af-info-soft); color: var(--af-info-text); }
.admin-body .list-group-item-secondary,
.admin-body .list-group-item-light { background-color: var(--af-surface-2); color: var(--af-text); }
.admin-body .list-group-item[class*="list-group-item-"]:not(.list-group-item-action) {
    padding-left: 12px;
    padding-right: 12px;
    border-radius: 10px !important;
    border: 0;
    margin-bottom: 4px;
}

/* ---------- Pagination ---------- */
.admin-body .pagination {
    --bs-pagination-color: var(--af-text);
    --bs-pagination-bg: transparent;
    --bs-pagination-border-color: transparent;
    --bs-pagination-border-width: 0;
    --bs-pagination-border-radius: 10px;
    --bs-pagination-hover-color: var(--af-text);
    --bs-pagination-hover-bg: var(--af-soft);
    --bs-pagination-hover-border-color: transparent;
    --bs-pagination-focus-bg: var(--af-soft);
    --bs-pagination-active-bg: var(--af-blue);
    --bs-pagination-active-border-color: var(--af-blue);
    --bs-pagination-active-color: var(--af-on-blue);
    --bs-pagination-disabled-bg: transparent;
    --bs-pagination-disabled-color: var(--af-muted);
    --bs-pagination-disabled-border-color: transparent;
    gap: 2px;
    flex-wrap: wrap;
}

.admin-body .page-link {
    min-height: 44px;
    min-width: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px !important;
    font-weight: 600;
}

.admin-body .page-item.disabled .page-link { opacity: 0.6; }

.admin-body hr { border-color: var(--af-hairline); opacity: 1; }

.admin-body .referral-admin-view hr.my-4 { border-top: 1px solid var(--af-hairline) !important; }

/* ---------- Timelines (notes, status history, clarifications) ---------- */
.admin-body .timeline-square {
    width: 32px;
    height: 32px;
    border-radius: 999px;
    background: var(--af-blue-soft);
    color: var(--af-blue-text);
    box-shadow: none;
    font-size: 0.95rem;
}

.admin-body .timeline-line,
.admin-body .timeline-connector {
    background: var(--af-hairline);
}

.admin-body .timeline-line { width: 2px; }
.admin-body .timeline-connector { width: 12px; margin-top: 15px; }

/* Question / reason / note boxes: tinted, readable in both themes (was #f8f9fa with pale text at night) */
.admin-body .timeline-content-box {
    background: var(--af-surface-2);
    color: var(--af-text);
    border: 0;
    border-radius: 10px;
    padding: 12px 14px;
    margin-top: 0;
    overflow-wrap: anywhere;
}

.admin-body .timeline-content-box * { color: inherit; }
.admin-body .timeline-content-box a { color: var(--af-blue-text); }

/* ---------- Panels from AdminWeb / UI CSS with hard-coded light colours ---------- */
[data-bs-theme="dark"] .admin-body .referral-feedback-view .feedback-rating-tile-readonly,
[data-bs-theme="dark"] .admin-body .referral-feedback-view .feedback-response-text {
    background: var(--af-surface-2);
    border-color: var(--af-hairline);
    color: var(--af-text);
}

[data-bs-theme="dark"] .admin-body .referral-feedback-view .feedback-question-block .form-label { color: var(--af-text); }

[data-bs-theme="dark"] .admin-body #loadingOverlay { background-color: rgba(14, 26, 36, 0.8); }

[data-bs-theme="dark"] .admin-body .loading-content {
    background-color: var(--af-surface);
    border-color: var(--af-hairline);
}

[data-bs-theme="dark"] .admin-body .loading-content p { color: var(--af-text); }

.admin-body .admin-choice { border-color: var(--af-hairline); }


/* Quill editor (agencies, voucher types, notes) in Night mode.
   quill.snow.css loads after this file (in each page's Scripts section), so every rule here is more specific
   than the Quill rule it replaces. Night tokens: text #E6EEF3, muted #9FB2C0, panel #162633, border #2B4255;
   hover, focus, the active button and the selected picker item use the night blue (#4FB7EE) instead of
   Quill's #06c, which is unreadable on the dark panel. */
[data-bs-theme="dark"] .admin-body .ql-toolbar.ql-snow {
    background-color: var(--af-surface);
    border-color: var(--af-border);
}
[data-bs-theme="dark"] .admin-body .ql-container.ql-snow { border-color: var(--af-border); }

/* Icons and picker labels at rest */
[data-bs-theme="dark"] .admin-body .ql-snow .ql-stroke,
[data-bs-theme="dark"] .admin-body .ql-snow .ql-stroke-miter { stroke: var(--af-text); }
[data-bs-theme="dark"] .admin-body .ql-snow .ql-fill,
[data-bs-theme="dark"] .admin-body .ql-snow .ql-stroke.ql-fill { fill: var(--af-text); }
[data-bs-theme="dark"] .admin-body .ql-snow .ql-picker,
[data-bs-theme="dark"] .admin-body .ql-snow .ql-picker-label { color: var(--af-text); }
[data-bs-theme="dark"] .admin-body .ql-snow.ql-toolbar .ql-picker-label { border-color: transparent; }

/* Hover, keyboard focus, active button, open picker and selected item */
[data-bs-theme="dark"] .admin-body .ql-snow.ql-toolbar button:hover,
[data-bs-theme="dark"] .admin-body .ql-snow.ql-toolbar button:focus,
[data-bs-theme="dark"] .admin-body .ql-snow.ql-toolbar button.ql-active,
[data-bs-theme="dark"] .admin-body .ql-snow.ql-toolbar .ql-picker-label:hover,
[data-bs-theme="dark"] .admin-body .ql-snow.ql-toolbar .ql-picker-label.ql-active,
[data-bs-theme="dark"] .admin-body .ql-snow.ql-toolbar .ql-picker-item:hover,
[data-bs-theme="dark"] .admin-body .ql-snow.ql-toolbar .ql-picker-item.ql-selected { color: var(--af-blue); }
[data-bs-theme="dark"] .admin-body .ql-snow.ql-toolbar button:hover .ql-stroke,
[data-bs-theme="dark"] .admin-body .ql-snow.ql-toolbar button:focus .ql-stroke,
[data-bs-theme="dark"] .admin-body .ql-snow.ql-toolbar button.ql-active .ql-stroke,
[data-bs-theme="dark"] .admin-body .ql-snow.ql-toolbar button:hover .ql-stroke-miter,
[data-bs-theme="dark"] .admin-body .ql-snow.ql-toolbar button:focus .ql-stroke-miter,
[data-bs-theme="dark"] .admin-body .ql-snow.ql-toolbar button.ql-active .ql-stroke-miter,
[data-bs-theme="dark"] .admin-body .ql-snow.ql-toolbar .ql-picker-label:hover .ql-stroke,
[data-bs-theme="dark"] .admin-body .ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-stroke,
[data-bs-theme="dark"] .admin-body .ql-snow.ql-toolbar .ql-picker-item:hover .ql-stroke,
[data-bs-theme="dark"] .admin-body .ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-stroke { stroke: var(--af-blue); }
[data-bs-theme="dark"] .admin-body .ql-snow.ql-toolbar button:hover .ql-fill,
[data-bs-theme="dark"] .admin-body .ql-snow.ql-toolbar button:focus .ql-fill,
[data-bs-theme="dark"] .admin-body .ql-snow.ql-toolbar button.ql-active .ql-fill,
[data-bs-theme="dark"] .admin-body .ql-snow.ql-toolbar button:hover .ql-stroke.ql-fill,
[data-bs-theme="dark"] .admin-body .ql-snow.ql-toolbar button:focus .ql-stroke.ql-fill,
[data-bs-theme="dark"] .admin-body .ql-snow.ql-toolbar button.ql-active .ql-stroke.ql-fill,
[data-bs-theme="dark"] .admin-body .ql-snow.ql-toolbar .ql-picker-label:hover .ql-fill,
[data-bs-theme="dark"] .admin-body .ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-fill,
[data-bs-theme="dark"] .admin-body .ql-snow.ql-toolbar .ql-picker-item:hover .ql-fill,
[data-bs-theme="dark"] .admin-body .ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-fill { fill: var(--af-blue); }

/* Open picker: dark list instead of Quill's white one */
[data-bs-theme="dark"] .admin-body .ql-snow .ql-picker.ql-expanded .ql-picker-label {
    color: var(--af-muted);
    border-color: var(--af-border);
}
[data-bs-theme="dark"] .admin-body .ql-snow .ql-picker.ql-expanded .ql-picker-label .ql-stroke { stroke: var(--af-muted); }
[data-bs-theme="dark"] .admin-body .ql-snow .ql-picker.ql-expanded .ql-picker-label .ql-fill { fill: var(--af-muted); }
[data-bs-theme="dark"] .admin-body .ql-snow .ql-picker-options {
    background-color: var(--af-surface);
    color: var(--af-text);
}
[data-bs-theme="dark"] .admin-body .ql-snow .ql-picker.ql-expanded .ql-picker-options {
    border-color: var(--af-border);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.45);
}

/* Link tooltip */
[data-bs-theme="dark"] .admin-body .ql-snow .ql-tooltip {
    background-color: var(--af-surface);
    border-color: var(--af-border);
    color: var(--af-text);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.45);
}
[data-bs-theme="dark"] .admin-body .ql-snow .ql-tooltip input[type=text] {
    background-color: var(--af-ground);
    border-color: var(--af-border);
    color: var(--af-text);
}
[data-bs-theme="dark"] .admin-body .ql-snow .ql-tooltip a { color: var(--af-blue); }

[data-bs-theme="dark"] .admin-body .ql-editor.ql-blank::before { color: var(--af-muted); }

/* Touch targets: buttons and form controls at least 44px tall */
.admin-body .btn:not(.btn-sm):not(.btn-close),
.admin-body .form-control:not(.form-control-sm):not(textarea),
.admin-body .form-select:not(.form-select-sm) {
    min-height: 44px;
}

.admin-body .btn-sm,
.admin-body .form-control-sm,
.admin-body .form-select-sm {
    min-height: 36px;
}

@media (pointer: coarse) {
    .admin-body .btn-sm,
    .admin-body .form-control-sm,
    .admin-body .form-select-sm {
        min-height: 44px;
    }

    .admin-body .btn-group-sm > .btn {
        min-height: 44px;
        min-width: 44px;
    }
}

/* =====================================================================
   Lists (Referrals, Users, Agencies ...): one pattern everywhere
   ---------------------------------------------------------------------
   .admin-chips          status / type filters: one row of pills, scrolls sideways on phones
   .admin-list-controls  search + sort in one compact row (wraps on phones)
   .admin-list-card      the ONE card holding the results (table on laptops, rows on phones)
   .admin-list > .admin-list-item   a phone / iPad row: title, meta, chips, primary action, "more" menu
   ===================================================================== */
.admin-chips {
    display: flex;
    gap: var(--af-space-2);
    margin: 0 0 var(--af-space-4);
    padding: 2px 0 4px;
    list-style: none;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    scroll-snap-type: x proximity;
}

.admin-chips::-webkit-scrollbar { display: none; }

.admin-chips > li { flex: 0 0 auto; scroll-snap-align: start; }

.admin-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 44px;
    padding: 0 16px;
    border-radius: 999px;
    background: var(--af-soft);
    color: var(--af-text);
    font-weight: 600;
    font-size: 0.97rem;
    text-decoration: none;
    white-space: nowrap;
}

.admin-body a.admin-chip:hover { background: var(--af-soft-hover); color: var(--af-text); }

.admin-body .admin-chip.active,
.admin-body a.admin-chip.active:hover {
    background: var(--af-blue);
    color: var(--af-on-blue);
}

.admin-chip .admin-chip-count {
    font-weight: 700;
    opacity: 0.8;
}

/* Phones: let the chip row run to the screen edges so it is obvious it scrolls */
@media (max-width: 575.98px) {
    .admin-chips {
        margin-left: calc(-1 * var(--af-space-4));
        margin-right: calc(-1 * var(--af-space-4));
        padding-left: var(--af-space-4);
        padding-right: var(--af-space-4);
        scroll-padding-left: var(--af-space-4);
    }
}

@media (min-width: 992px) {
    .admin-chips { flex-wrap: wrap; overflow: visible; }
}

/* Search + sort: one compact row */
.admin-list-controls {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--af-space-2) var(--af-space-3);
    margin-bottom: var(--af-space-4);
}

.admin-list-controls > form,
.admin-search {
    display: flex;
    align-items: center;
    gap: var(--af-space-2);
    flex: 1 1 320px;
    min-width: 0;
    margin: 0;
}

.admin-search-field {
    position: relative;
    flex: 1 1 auto;
    min-width: 0;
}

.admin-search-field > .bi {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--af-muted);
    pointer-events: none;
}

.admin-body .admin-search-field > .form-control { padding-left: 40px; }

.admin-list-controls .form-check { margin: 0; min-height: 44px; display: flex; align-items: center; gap: 8px; }
.admin-list-controls .form-check .form-check-input { margin: 0; float: none; }

/* Sort bar (Views/Shared/_SortBar.cshtml)
   768px up: "Sort by [field v][direction]" as one joined control on the search row. The field opens a menu of
   links; the direction button flips the order ("Newest first" <-> "Oldest first", "A-Z" <-> "Z-A").
   Phones (scripts on): one full-width "Sort: Newest first" dropdown, the same component as the "Status:" menu. */
.admin-list-controls .sort-bar { flex: 0 1 auto; min-width: 0; }

.sort-bar-inline {
    display: flex;
    align-items: center;
    gap: var(--af-space-2);
    min-width: 0;
}

.sort-bar-label {
    color: var(--af-muted);
    font-weight: 600;
    font-size: 0.95rem;
    white-space: nowrap;
}

.sort-bar-control {
    display: inline-flex;
    align-items: stretch;
    min-width: 0;
}

.sort-bar-control > .dropdown { display: flex; min-width: 0; }

.admin-body .sort-bar-field,
.admin-body .sort-bar-dir {
    --bs-btn-color: var(--af-text);
    --bs-btn-bg: var(--af-surface);
    --bs-btn-border-color: var(--af-edge);
    --bs-btn-hover-color: var(--af-text);
    --bs-btn-hover-bg: var(--af-soft);
    --bs-btn-hover-border-color: var(--af-edge);
    --bs-btn-active-color: var(--af-text);
    --bs-btn-active-bg: var(--af-soft);
    --bs-btn-active-border-color: var(--af-blue);
    position: relative;
    min-height: 44px;
    padding: 0 14px;
    gap: 8px;
    white-space: nowrap;
    text-decoration: none;
}

.admin-body .sort-bar-field {
    max-width: 260px;
    justify-content: space-between;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

.admin-body .sort-bar-dir {
    margin-left: -1px;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

.admin-body .sort-bar-field[aria-expanded="true"] { border-color: var(--af-blue); z-index: 1; }
.admin-body .sort-bar-field:focus-visible,
.admin-body .sort-bar-dir:focus-visible { z-index: 2; }

.sort-bar-field-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; }

.sort-bar-caret { flex-shrink: 0; font-size: 0.85em; transition: transform 0.15s ease; }
.sort-bar-field[aria-expanded="true"] .sort-bar-caret { transform: rotate(180deg); }

.admin-body .sort-bar-dir > .bi { color: var(--af-blue-text); font-size: 1.1rem; }

.admin-body .sort-bar-field-list { min-width: 100%; }
.admin-body .sort-bar-field-list .dropdown-item.is-current { color: var(--af-blue-text); font-weight: 700; }
.sort-bar-item-label { flex: 1 1 auto; min-width: 0; }

@media (max-width: 767.98px) {
    .admin-list-controls .sort-bar { flex: 1 1 100%; }
    html.af-js .admin-body .sort-bar .admin-phone-menu { margin: 0; }
}

/* Count line above a list ("12 referrals") */
.admin-list-count {
    color: var(--af-muted);
    font-weight: 600;
    font-size: 0.95rem;
    margin: 0 0 var(--af-space-2);
}

/* The one card that holds a list */
.admin-body .admin-list-card {
    overflow: hidden;
    margin-bottom: var(--af-space-4);
}

.admin-body .admin-list-card > .table-responsive > .table { margin-bottom: 0; }

.admin-body .admin-list-card > .table-responsive > .table > thead > tr > th:first-child,
.admin-body .admin-list-card > .table-responsive > .table > tbody > tr > td:first-child { padding-left: 20px; }
.admin-body .admin-list-card > .table-responsive > .table > thead > tr > th:last-child,
.admin-body .admin-list-card > .table-responsive > .table > tbody > tr > td:last-child { padding-right: 16px; }

.admin-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.admin-list-item {
    display: flex;
    align-items: flex-start;
    gap: var(--af-space-3);
    padding: 14px var(--af-space-4);
    border-top: 1px solid var(--af-hairline);
}

.admin-list > .admin-list-item:first-child { border-top: 0; }

.admin-list-main {
    flex: 1 1 auto;
    min-width: 0;
}

.admin-list-title {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 2px 8px;
    margin: 0;
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--af-text);
    overflow-wrap: anywhere;
}

.admin-body .admin-list-title a { color: var(--af-text); text-decoration: none; }
.admin-body .admin-list-title a:hover { color: var(--af-blue-text); text-decoration: underline; }

.admin-list-title code { font-size: 0.85rem; font-weight: 600; }

.admin-list-meta {
    margin: 2px 0 0;
    color: var(--af-muted);
    font-size: 0.95rem;
    overflow-wrap: anywhere;
}

.admin-list-tags {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin-top: var(--af-space-2);
}

.admin-list-side {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: var(--af-space-2);
    flex-shrink: 0;
}

.admin-list-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--af-space-2);
    margin-top: var(--af-space-3);
}

/* Stacked chips in a table cell (support, analysis, status) */
.admin-cell-stack {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
}

/* Table action cells: primary action + borderless icons, kept on one line */
.admin-row-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 2px;
    flex-wrap: nowrap;
}

.admin-row-actions .btn { white-space: nowrap; }
.admin-row-actions form { margin: 0; display: inline-flex; }

.admin-list-empty {
    padding: var(--af-space-5) var(--af-space-4);
    color: var(--af-muted);
    text-align: center;
}

.admin-list-empty .bi {
    display: block;
    font-size: 1.6rem;
    margin-bottom: var(--af-space-2);
    color: var(--af-border-strong);
}

/* Pagination row under a list (shared _Pagination partial) */
.admin-pager {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--af-space-2) var(--af-space-4);
    margin: var(--af-space-3) 0 var(--af-space-4);
}

.admin-pager-info {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--af-space-2) var(--af-space-3);
    color: var(--af-muted);
    font-size: 0.93rem;
}

.admin-pager-info .form-select { width: auto; min-height: 40px; }

/* =====================================================================
   Home dashboard
   ===================================================================== */
.admin-home-head {
    margin-bottom: var(--af-space-5);
}

.admin-home-date {
    color: var(--af-muted);
    font-weight: 500;
    font-size: 1rem;
}

.admin-home-stats {
    display: flex;
    flex-wrap: wrap;
    gap: var(--af-space-1) var(--af-space-4);
    margin: var(--af-space-2) 0 0;
    padding: 0;
    list-style: none;
    color: var(--af-muted);
    font-size: 0.97rem;
}

.admin-home-stats strong { color: var(--af-text); font-weight: 700; }

.admin-section {
    margin-bottom: var(--af-space-6);
    max-width: 880px;
}

.admin-section-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--af-space-3);
    margin-bottom: var(--af-space-2);
}

.admin-section-title {
    margin: 0;
    font-size: 1.2rem;
    font-weight: 700;
}

.admin-section-title .admin-section-count {
    color: var(--af-muted);
    font-weight: 600;
    margin-left: 4px;
}

.admin-body .admin-section-link {
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    gap: 2px;
}

.admin-body .admin-section-link:hover { text-decoration: underline; }

/* To do rows: a plain sentence, a count, a chevron */
.admin-todo {
    list-style: none;
    margin: 0;
    padding: 0;
}

.admin-todo > li + li { border-top: 1px solid var(--af-hairline); }

.admin-body .admin-todo-row {
    display: flex;
    align-items: center;
    gap: var(--af-space-3);
    min-height: 60px;
    padding: 10px var(--af-space-4);
    color: var(--af-text);
    text-decoration: none;
    font-size: 1.07rem;
}

.admin-body a.admin-todo-row:hover { background: var(--af-surface-2); color: var(--af-text); }

.admin-todo-icon {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 999px;
    background: var(--af-info-soft);
    color: var(--af-info-text);
    font-size: 1.05rem;
}

.admin-todo-icon.is-ok { background: var(--af-ok-soft); color: var(--af-ok-text); }
.admin-todo-icon.is-warn { background: var(--af-warn-soft); color: var(--af-warn-text); }
.admin-todo-icon.is-danger { background: var(--af-danger-soft); color: var(--af-danger-text); }
.admin-todo-icon.is-violet { background: var(--af-violet-soft); color: var(--af-violet-text); }

.admin-todo-text { flex: 1 1 auto; min-width: 0; }
.admin-todo-text strong { font-weight: 800; }

.admin-todo-note {
    display: block;
    color: var(--af-muted);
    font-size: 0.93rem;
}

.admin-todo-chevron { color: var(--af-muted); flex-shrink: 0; }

.admin-caught-up {
    display: flex;
    align-items: center;
    gap: var(--af-space-3);
    padding: var(--af-space-4);
    color: var(--af-muted);
    font-size: 1.05rem;
}

.admin-caught-up .admin-todo-icon { background: var(--af-ok-soft); color: var(--af-ok-text); }

/* Compact rows: recent referrals, ready to pack / deliver */
.admin-mini-row {
    display: flex;
    align-items: center;
    gap: var(--af-space-3);
    padding: 12px var(--af-space-4);
    min-height: 60px;
}

.admin-todo > li + li > .admin-mini-row { border-top: 0; }

.admin-mini-main { flex: 1 1 auto; min-width: 0; }

.admin-mini-title {
    display: block;
    font-weight: 700;
    color: var(--af-text);
    text-decoration: none;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.admin-body a.admin-mini-title:hover { color: var(--af-blue-text); text-decoration: underline; }

.admin-mini-meta {
    display: block;
    color: var(--af-muted);
    font-size: 0.93rem;
    overflow-wrap: anywhere;
}

.admin-mini-side {
    display: flex;
    align-items: center;
    gap: var(--af-space-2);
    flex-shrink: 0;
}

.admin-mini-date {
    color: var(--af-muted);
    font-size: 0.93rem;
    white-space: nowrap;
}

@media (max-width: 575.98px) {
    .admin-mini-row { align-items: flex-start; }
    .admin-mini-side { flex-direction: column; align-items: flex-end; gap: 4px; }
}

.admin-home-primary { margin-bottom: var(--af-space-5); }

.admin-home-tasks {
    color: var(--af-muted);
    margin: var(--af-space-1) 0 0;
}

.admin-empty {
    background: var(--af-surface);
    border: 1px solid var(--af-hairline);
    border-radius: var(--af-radius);
    padding: 28px;
    max-width: 640px;
}

.admin-empty h2 { font-size: 1.4rem; font-weight: 800; margin-bottom: 0.5rem; }

/* Feedback tab: the chosen rating stands out at night too */
[data-bs-theme="dark"] .admin-body .referral-feedback-view .feedback-rating-tile-readonly.selected {
    background: var(--af-blue-soft);
    border-color: var(--tone);
    color: var(--af-text);
}

[data-bs-theme="dark"] .admin-body .referral-feedback-view .feedback-rating-icon-readonly { background-color: var(--af-soft); }

/* Shopping list editor (shopping-list-editor.css hard-codes light colours) */
.admin-body .drag-handle { color: var(--af-muted); }
.admin-body .drag-insert-before { box-shadow: 0 -3px 0 0 var(--af-blue); }
.admin-body .drag-insert-after { box-shadow: 0 3px 0 0 var(--af-blue); }

/* Dividers inside a card use the hairline, not the stronger field border */
.admin-body .card > .border-top,
.admin-body .card > .border-bottom { border-color: var(--af-hairline) !important; }

/* Rich text (Quill) shown in timeline boxes: compact paragraphs and lists */
.admin-body .timeline-content-box p,
.admin-body .timeline-content-box ul,
.admin-body .timeline-content-box ol { margin-bottom: 0.4rem; }
.admin-body .timeline-content-box > :last-child { margin-bottom: 0; }
.admin-body .timeline-content-box ul,
.admin-body .timeline-content-box ol { padding-left: 1.25rem; }

/* Required-field asterisk (shared referral-form.css colour is too dark at night) */
.admin-body .required-asterisk { color: var(--af-red-text); }

/* A card header whose body is collapsed (or absent) has no divider under it */
.admin-body .card-header:last-child,
.admin-body .card-header:has(+ .collapse:not(.show)),
.admin-body .card-header:has(+ .collapsing) { border-bottom: 0; }

/* =====================================================================
   Review round 2: shared patterns
   ===================================================================== */

/* ---------- Read-only values: ONE label / value pattern (modelled on Partner lead details) ----------
   Markup A (preferred):
     <dl class="admin-fields">
       <div class="admin-field"><dt>Label</dt><dd>Value</dd></div>
     </dl>
   Markup B (existing .form-row-horizontal rows on a read-only page): put .admin-readonly-view on the
   card body and use <div class="admin-field-value">Value</div> instead of a readonly input / textarea.
   An empty value always shows one "—". */
.admin-fields {
    margin: 0;
    display: flex;
    flex-direction: column;
}

.admin-field {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 2px var(--af-space-4);
    padding: 10px 0;
    border-top: 1px solid var(--af-hairline);
}

.admin-fields > .admin-field:first-child { border-top: 0; padding-top: 0; }
.admin-fields > .admin-field:last-child { padding-bottom: 0; }

.admin-field > dt,
.admin-field-label {
    color: var(--af-muted);
    font-size: 0.93rem;
    font-weight: 500;
    margin: 0;
}

.admin-field > dd,
.admin-field-value {
    color: var(--af-text);
    font-weight: 400;
    margin: 0;
    min-width: 0;
    overflow-wrap: break-word;
    word-break: normal;
    white-space: pre-line;
}

.admin-field > dd:empty::before,
.admin-field-value:empty::before {
    content: "\2014";
    color: var(--af-muted);
}

.admin-empty-value { color: var(--af-muted); }

@media (min-width: 576px) {
    .admin-field { grid-template-columns: minmax(140px, 34%) minmax(0, 1fr); align-items: baseline; }
}

/* Markup B: shared .form-row-horizontal rows become label / value pairs on read-only pages */
.admin-body .admin-readonly-view .form-row-horizontal {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr);
    gap: 2px var(--af-space-4);
    align-items: baseline !important;
    margin: 0 !important;
    padding: 10px 0;
    border-top: 1px solid var(--af-hairline);
}

.admin-body .admin-readonly-view .form-row-horizontal:first-child { border-top: 0; padding-top: 0; }

/* Bootstrap .row / .col-12 gutters would make the dividers wider than the headings: line everything up */
.admin-body .admin-readonly-view .row { margin-left: 0; margin-right: 0; --bs-gutter-x: 0; }
.admin-body .admin-readonly-view .row > .form-row-horizontal { padding-left: 0; padding-right: 0; }
.admin-body .admin-readonly-view .form-row-horizontal .badge { justify-self: start; }

.admin-body .admin-readonly-view .form-row-horizontal > .form-label-container,
.admin-body .admin-readonly-view .form-row-horizontal > .form-input-container {
    flex: none !important;
    max-width: none !important;
    width: auto !important;
    padding: 0 !important;
    margin: 0 !important;
    min-width: 0;
}

.admin-body .admin-readonly-view .form-row-horizontal .form-label {
    color: var(--af-muted);
    font-size: 0.93rem;
    font-weight: 500 !important;
    margin: 0;
}

.admin-body .admin-readonly-view .form-row-horizontal .form-text { font-size: 0.85rem; }

/* Any read-only field left on a read-only page reads as plain text, never a grey box */
.admin-body .admin-readonly-view .form-control[readonly],
.admin-body .admin-readonly-view .form-control:disabled,
.admin-body .admin-readonly-view textarea[readonly],
.admin-body .admin-readonly-view .form-control-readonly-block {
    background: transparent !important;
    border: 0 !important;
    padding: 0 !important;
    min-height: 0 !important;
    height: auto;
    box-shadow: none !important;
    resize: none;
    font-weight: 400;
}

@media (min-width: 576px) {
    .admin-body .admin-readonly-view .form-row-horizontal { grid-template-columns: minmax(140px, 34%) minmax(0, 1fr); }
}

/* ---------- Step headings (referral details / edit / delete): one colour, one size ---------- */
.admin-body .referral-admin-view h3[class*="text-"],
.admin-body .admin-step-heading {
    color: var(--af-text) !important;
    font-size: 1.15rem;
    font-weight: 700;
    margin-bottom: var(--af-space-3) !important;
}

/* ---------- iPad: forms in ONE column until 992px (the shared site.css goes to 2 columns at 768px) ---------- */
@media (max-width: 991.98px) {
    .admin-body .form-row-horizontal {
        flex-direction: column !important;
        align-items: stretch !important;
    }

    .admin-body .form-row-horizontal > .form-label-container,
    .admin-body .form-row-horizontal > .form-input-container,
    .admin-body .referral-admin-view .form-row-horizontal:has(.form-check-inline) .form-label-container,
    .admin-body .referral-admin-view .form-row-horizontal:has(.form-check-inline) .form-input-container {
        flex: none !important;
        max-width: 100% !important;
        width: 100%;
        padding-right: 0 !important;
    }

    .admin-body .form-row-horizontal > .form-label-container { margin-bottom: 6px; }
}

/* Selects never cut their text without an ellipsis */
.admin-body .form-select:not([multiple]) { text-overflow: ellipsis; white-space: nowrap; overflow: hidden; }

/* Rich text toolbar: a tidy wrap */
.admin-body .ql-toolbar.ql-snow { display: flex; flex-wrap: wrap; gap: 2px 4px; align-items: center; }
.admin-body .ql-toolbar.ql-snow .ql-formats { margin-right: 8px; display: inline-flex; }

/* ---------- Checkboxes and radios: 20px ---------- */
.admin-body .form-check-input[type="checkbox"]:not([role="switch"]),
.admin-body .form-check-input[type="radio"] {
    width: 20px;
    height: 20px;
    margin-top: 0.15em;
}

.admin-body .form-check:not(.form-switch):not(.admin-theme-switch) { padding-left: 30px; min-height: 28px; }
.admin-body .form-check:not(.form-switch):not(.admin-theme-switch) > .form-check-input { margin-left: -30px; }
.admin-body .form-check-label { padding-top: 1px; }
.admin-body .admin-list-controls .form-check:not(.form-switch) { padding-left: 0; }
.admin-body .admin-list-controls .form-check:not(.form-switch) > .form-check-input { margin-left: 0; }

/* ---------- Single-tab "tab bars" are not shown (one tab only repeats the page title) ---------- */
.admin-body .nav-tabs:not(:has(> .nav-item + .nav-item)) { display: none !important; }

/* ---------- Back: a small text link with an arrow, not a big button ---------- */
.admin-body .admin-back-link,
.admin-body .hero + .mb-3 > a.btn-secondary:has(> .bi-arrow-left) {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 32px;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    color: var(--af-blue-text) !important;
    font-weight: 600;
    font-size: 0.95rem;
    text-decoration: none;
}

.admin-body .admin-back-link:hover,
.admin-body .hero + .mb-3 > a.btn-secondary:has(> .bi-arrow-left):hover {
    text-decoration: underline;
    color: var(--af-blue-hover) !important;
}

.admin-body .hero:has(+ .mb-3 > a.btn-secondary > .bi-arrow-left) { margin-bottom: var(--af-space-1) !important; }

.admin-back-row { margin: 0 0 var(--af-space-1); }

/* ---------- Referral page head: title on the left, actions on the right (laptops) ---------- */
.admin-referral-head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--af-space-3) var(--af-space-4);
    margin-bottom: var(--af-space-4);
}

.admin-body .admin-referral-head > .hero { margin-bottom: 0 !important; flex: 1 1 320px; min-width: 0; }

.admin-referral-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: var(--af-space-2);
}

/* ---------- Phones and iPads: one sticky action bar (the primary action + "more") ---------- */
.admin-actionbar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1025;
    display: flex;
    align-items: center;
    gap: var(--af-space-2);
    padding: 10px var(--af-space-4) calc(10px + env(safe-area-inset-bottom));
    background: var(--af-surface);
    border-top: 1px solid var(--af-hairline);
    box-shadow: 0 -4px 16px rgba(16, 40, 58, 0.08);
}

.admin-actionbar > .admin-actionbar-main { flex: 1 1 auto; }
.admin-actionbar .dropdown-menu { max-height: 70vh; overflow-y: auto; }

@media (min-width: 992px) {
    .admin-actionbar { display: none !important; }
}

@media (max-width: 991.98px) {
    /* Room for the bar: its measured height (js/admin-shell.js sets --af-actionbar-h), so nothing is hidden under it */
    body.has-actionbar .admin-main { padding-bottom: calc(var(--af-actionbar-h, 68px) + 32px + env(safe-area-inset-bottom)); }
}

@media (max-width: 767.98px) {
    /* Sits above the volunteer bottom tab bar, never over it */
    body.has-tabbar .admin-actionbar { bottom: calc(59px + env(safe-area-inset-bottom)); padding-bottom: 10px; }
    body.has-tabbar.has-actionbar .admin-main { padding-bottom: calc(var(--af-actionbar-h, 68px) + 59px + 40px + env(safe-area-inset-bottom)); }
}

/* ---------- Form footer: primary on the right, Cancel as a ghost, inside the card ---------- */
.admin-form-footer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: var(--af-space-2);
}

.admin-body .card > .admin-form-footer {
    padding: 14px var(--bs-card-spacer-x);
    border-top: 1px solid var(--af-hairline);
    background: transparent;
}

.admin-body .card .card > .admin-form-footer { border-top: 0; padding-top: 0; }

.admin-body .admin-form-footer > div {
    display: flex !important;
    flex-wrap: wrap;
    flex-direction: row !important;
    gap: var(--af-space-2);
    width: auto !important;
}

.admin-body .admin-form-footer .btn { width: auto !important; }

.admin-body .admin-form-footer .btn-secondary:not(.dropdown-toggle),
.admin-body .admin-form-footer .btn-outline-secondary,
.admin-body .admin-btn-ghost {
    --bs-btn-bg: transparent;
    --bs-btn-hover-bg: var(--af-soft);
    --bs-btn-active-bg: var(--af-soft);
}

@media (max-width: 575.98px) {
    .admin-body .admin-form-footer { flex-direction: column-reverse; align-items: stretch; }
    .admin-body .admin-form-footer > div { flex-direction: column-reverse !important; align-items: stretch; }
    .admin-body .admin-form-footer .btn { width: 100% !important; }
}

/* A footer that is not inside a card (e.g. after a form with several optional cards) is drawn as the closing card row */
.admin-body .admin-form-footer.is-standalone {
    padding: 14px 20px;
    margin-bottom: var(--af-space-4);
    background: var(--af-surface);
    border: 1px solid var(--af-hairline);
    border-radius: var(--af-radius);
    box-shadow: var(--af-shadow);
}

.admin-body .referral-hero-ref-label { font-size: 0.85em; }

/* Pack / Deliver / Edit referral: on phones and iPads the footer becomes a bar fixed to the bottom of the
   screen (above the volunteer tab bar), so the main action is always in reach; the page gets room below. */
@media (max-width: 991.98px) {
    .admin-body .admin-form-footer.is-sticky {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 1025;
        margin: 0;
        flex-direction: row !important;
        flex-wrap: nowrap;
        align-items: center;
        padding: 10px var(--af-space-4) calc(10px + env(safe-area-inset-bottom)) !important;
        background: var(--af-surface);
        border: 0;
        border-top: 1px solid var(--af-hairline) !important;
        border-radius: 0;
        box-shadow: 0 -4px 16px rgba(16, 40, 58, 0.08);
    }

    .admin-body .admin-form-footer.is-sticky > .btn { width: auto !important; flex: 0 0 auto; }
    .admin-body .admin-form-footer.is-sticky > .btn-primary { flex: 1 1 auto; }
    /* Three buttons do not fit: the "Back" link at the top of the page already does what Cancel does */
    .admin-body .admin-form-footer.is-sticky:has(> .btn:nth-of-type(3)) > a.btn-secondary { display: none; }

    .admin-body:has(.admin-form-footer.is-sticky) .admin-main { padding-bottom: calc(100px + env(safe-area-inset-bottom)); }
    /* The Pack page's floating "save" button is the same as "Save progress" in the bar */
    .admin-body:has(.admin-form-footer.is-sticky) .fab-save { display: none !important; }
}

@media (max-width: 767.98px) {
    body.has-tabbar .admin-form-footer.is-sticky { bottom: calc(59px + env(safe-area-inset-bottom)); padding-bottom: 10px !important; }
    body.has-tabbar:has(.admin-form-footer.is-sticky) .admin-main { padding-bottom: calc(176px + env(safe-area-inset-bottom)); }
}

/* ---------- Allocation strip: compact, visible in Day and Night ---------- */
.admin-lock-strip {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--af-space-2) var(--af-space-3);
    min-height: 44px;
    padding: 4px 6px 4px 14px;
    margin: 0 0 var(--af-space-3);
    background: var(--af-surface);
    border: 1px solid var(--af-hairline);
    border-radius: var(--af-radius-sm);
    color: var(--af-text);
    font-size: 0.95rem;
}

.admin-body .admin-lock-strip .btn { min-height: 36px; }

/* ---------- Soft buttons: search, per-row actions, "Allocate to me" (one filled primary per area) ---------- */
.admin-body .admin-list-controls .btn-primary,
.admin-body .admin-list-controls .btn-success,
.admin-body .admin-row-actions .btn-primary,
.admin-body .admin-row-actions .btn-success,
.admin-body .admin-list-actions .btn-primary,
.admin-body .admin-list-actions .btn-success,
.admin-body .admin-list-side .btn-primary,
.admin-body .admin-list-side .btn-success,
.admin-body .admin-mini-side .btn-primary,
.admin-body .admin-lock-strip .btn-primary,
.admin-body .admin-btn-soft {
    --bs-btn-color: var(--af-blue-text);
    --bs-btn-bg: var(--af-blue-soft);
    --bs-btn-border-color: transparent;
    --bs-btn-hover-color: var(--af-blue-strong-text);
    --bs-btn-hover-bg: var(--af-blue-soft-hover);
    --bs-btn-hover-border-color: transparent;
    --bs-btn-active-color: var(--af-blue-strong-text);
    --bs-btn-active-bg: var(--af-blue-soft-hover);
    --bs-btn-active-border-color: transparent;
    background-color: var(--bs-btn-bg);
    border-color: transparent;
    color: var(--bs-btn-color);
}

.admin-body .admin-list-controls .btn-primary:hover,
.admin-body .admin-row-actions .btn-primary:hover,
.admin-body .admin-list-actions .btn-primary:hover,
.admin-body .admin-list-side .btn-primary:hover,
.admin-body .admin-mini-side .btn-primary:hover,
.admin-body .admin-lock-strip .btn-primary:hover,
.admin-body .admin-btn-soft:hover {
    background-color: var(--bs-btn-hover-bg);
    color: var(--bs-btn-hover-color);
}

/* ---------- Chips and tabs: the selected one is scrolled into view; an edge fade shows there is more ---------- */
.admin-body .admin-chips.is-scrollable,
.admin-body .nav-tabs.is-scrollable {
    --af-fade-l: 0px;
    --af-fade-r: 0px;
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 var(--af-fade-l), #000 calc(100% - var(--af-fade-r)), transparent 100%);
    mask-image: linear-gradient(to right, transparent 0, #000 var(--af-fade-l), #000 calc(100% - var(--af-fade-r)), transparent 100%);
}

.admin-body .is-scrollable.has-more-left { --af-fade-l: 28px; }
.admin-body .is-scrollable.has-more-right { --af-fade-r: 44px; }

/* iPads and up: chips wrap onto a second line instead of hiding off-screen */
@media (min-width: 768px) {
    .admin-chips { flex-wrap: wrap; overflow: visible; }
    .admin-chips > li { scroll-snap-align: none; }
}

/* ---------- IDs, codes and emails ---------- */
.admin-body .admin-nowrap,
.admin-body td code,
.admin-body .admin-code { white-space: nowrap; overflow-wrap: normal; word-break: normal; }

.admin-body .admin-email,
.admin-body a[href^="mailto:"] { overflow-wrap: anywhere; word-break: normal; }

/* ---------- Theme switch: a real switch on the navy bar (Day and Night) ---------- */
.admin-body .admin-theme-switch.form-switch { padding-left: 12px; }

.admin-body .admin-theme-switch.form-switch .form-check-input,
.admin-body .admin-theme-switch.form-switch .form-check-input:not(:checked),
.admin-body .admin-theme-switch.form-switch .form-check-input:focus:not(:checked) {
    --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23ffffff'/%3e%3c/svg%3e");
    background-image: var(--bs-form-switch-bg);
    background-position: left center;
    background-repeat: no-repeat;
    background-color: rgba(255, 255, 255, 0.18);
    border: 1px solid rgba(255, 255, 255, 0.45);
    width: 2.6em;
    height: 1.4em;
    margin: 0;
    border-radius: 2em;
    flex-shrink: 0;
    float: none;
}

.admin-body .admin-theme-switch.form-switch .form-check-input:checked {
    --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%230E1A24'/%3e%3c/svg%3e");
    background-image: var(--bs-form-switch-bg);
    background-color: #4FB7EE;
    border-color: #4FB7EE;
    background-position: right center;
}

/* ---------- Sign-in, No tasks, Already completed: centred ---------- */
.admin-public-main { padding-top: clamp(24px, 8vh, 72px); }
.admin-body .admin-public-main .hero-text { text-align: center !important; width: 100%; }

.admin-body .admin-content > .admin-empty {
    margin: clamp(16px, 6vh, 56px) auto 0;
    text-align: center;
}

.admin-body .admin-content > .admin-empty .d-flex { justify-content: center; }
.admin-body .admin-content > .admin-empty .alert { text-align: left; display: inline-flex; }

/* ---------- Empty states inside cards: one pattern ---------- */
.admin-body .card .admin-list-empty { padding: var(--af-space-5) var(--af-space-4); }

/* ===== Round 2: forms ===== */

/* A fixed value inside a form (agency on Add referrer, a code that cannot change): plain text, never a grey box */
.admin-body .admin-fixed-value {
    display: flex;
    align-items: center;
    min-height: 44px;
    padding: 0;
    font-weight: 500;
}

/* Help text under fields: readable, not tiny */
.admin-body form .form-text,
.admin-body form small.form-text { font-size: 0.93rem; line-height: 1.45; }

/* Labels never leave the required asterisk on its own line */
.admin-body .required-asterisk { white-space: nowrap; }

/* Checkboxes and radios: comfortable spacing between the box and its label, and between options */
.admin-body form .form-check:not(.form-switch):not(.admin-theme-switch) { padding-left: 32px; }
.admin-body form .form-check:not(.form-switch):not(.admin-theme-switch) > .form-check-input { margin-left: -32px; }
.admin-body form .form-check + .form-check { margin-top: 6px; }
.admin-body form .form-check-inline { margin-right: 1.5rem; margin-top: 0 !important; }

/* On / off switches in forms: a real switch (not a 20px dot), the label beside it */
.admin-body form .form-switch:not(.admin-theme-switch) { padding-left: 3.25em; min-height: 28px; }
.admin-body form .form-switch:not(.admin-theme-switch) > .form-check-input {
    width: 2.5em;
    height: 1.4em;
    margin-left: -3.25em;
    margin-top: 0.05em;
    border-radius: 2em;
}

/* Rich text editor: the toolbar wraps tidily on phones, never squeezed */
.admin-body .ql-toolbar.ql-snow { padding: 6px 8px; border-radius: var(--af-radius-sm) var(--af-radius-sm) 0 0; }
.admin-body .ql-toolbar.ql-snow + .ql-container.ql-snow { border-radius: 0 0 var(--af-radius-sm) var(--af-radius-sm); }
.admin-body .ql-toolbar.ql-snow .ql-formats { margin-right: 4px; }
.admin-body .ql-toolbar.ql-snow button { width: 36px; height: 36px; padding: 6px 8px; }
.admin-body .ql-toolbar.ql-snow .ql-picker { height: 36px; }
.admin-body .ql-toolbar.ql-snow .ql-picker-label { display: inline-flex; align-items: center; }

/* Search-or-add row (shopping lists): the Add button lines up with the fields */
.admin-body .search-or-add-submit { min-height: 44px; white-space: nowrap; }

/* Selects in forms: long option text ends in an ellipsis inside the box */
.admin-body form .form-select { max-width: 100%; padding-right: 2.25rem; }
/* ===== Round 2: lists ===== */
/* Laptop tables show from 1200px (xl). The side menu takes 248px, so a table has about 950px at 1280 and
   1110px at 1440; secondary columns wait for 1400px (xxl). The action column is fixed to its content and
   right-aligned: one soft main action, View in a fixed place, Edit / Delete behind "more". No sideways scroll. */
.admin-body .admin-list-card .table > :not(caption) > * > th,
.admin-body .admin-list-card .table > :not(caption) > * > td { vertical-align: top; }

.admin-body th.admin-col-actions,
.admin-body td.admin-col-actions {
    width: 1%;
    white-space: nowrap;
    text-align: right;
}

.admin-body td.admin-col-actions { padding-top: 6px; padding-bottom: 6px; }

/* Keeps the "more" slot when a row has nothing behind it, so View lines up on every row */
.admin-body .admin-icon-slot {
    display: inline-block;
    flex-shrink: 0;
    width: 44px;
    height: 44px;
}

.admin-body .admin-row-actions { gap: 6px; }
.admin-body .admin-row-actions > .dropdown { display: inline-flex; }
.admin-body .admin-row-actions .dropdown-item,
.admin-body .admin-list-side .dropdown-item { display: flex; align-items: center; gap: 8px; }

/* Column helpers */
.admin-body .admin-col-fit { width: 1%; white-space: nowrap; }
.admin-body .admin-col-name { min-width: 200px; }
.admin-body .admin-col-contact { min-width: 190px; }

/* Short chip rows inside a cell (e.g. Risk + Assist under the status) */
.admin-body .admin-cell-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    max-width: 190px;
}

/* A chip holding a long value (an email) is cut with an ellipsis; the full value is in its title */
.admin-body .badge.admin-badge-clip {
    display: inline-block;
    max-width: 180px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: middle;
}

/* Emails break before the @ (a <wbr>) before they break anywhere else */
.admin-body .admin-email { word-break: normal; overflow-wrap: anywhere; }

/* A name that would wrap to many lines in a table: at most two lines, the rest in its title */
.admin-body .admin-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Empty value in a table cell */
.admin-body td .admin-empty-value { color: var(--af-muted); }
/* ===== Round 2: details ===== */

/* Detail page head: title on the left, the page actions (one primary) on the right; under the title on phones */
.admin-detail-head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--af-space-3) var(--af-space-4);
    margin-bottom: var(--af-space-4);
}

.admin-body .admin-detail-head > .hero { margin-bottom: 0 !important; flex: 1 1 320px; min-width: 0; }

.admin-detail-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--af-space-2);
}

.admin-detail-actions > form { margin: 0; display: inline-flex; }

/* Label / value lists: values that hold markup (badges, links, rich text) are not pre-line */
.admin-body .admin-field > dd:has(> *),
.admin-body .admin-field > dd.admin-field-rich { white-space: normal; }

.admin-body .admin-field-rich > :last-child { margin-bottom: 0; }

/* Narrow side columns: label above the value */
.admin-body .admin-fields-stacked > .admin-field { grid-template-columns: minmax(0, 1fr); }

/* Small help line under a value */
.admin-field-help {
    display: block;
    margin-top: 4px;
    color: var(--af-muted);
    font-size: 0.88rem;
}

.admin-body .admin-text-warn { color: var(--af-warn-text) !important; }

/* Short intro line / note inside a card */
.admin-card-intro {
    margin: 0;
    padding: 12px var(--bs-card-spacer-x, 20px) 4px;
    color: var(--af-muted);
    font-size: 0.93rem;
}

.admin-card-note {
    margin: var(--af-space-3) 0 0;
    color: var(--af-muted);
    font-size: 0.93rem;
}

/* Delete / void confirm: one card, a short warning, a compact summary, Cancel + the destructive button */
.admin-delete-warning {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 0 0 var(--af-space-4);
    padding: 12px 14px;
    border-radius: var(--af-radius-sm);
    background: var(--af-danger-soft);
    color: var(--af-danger-text);
    font-weight: 600;
}

.admin-delete-warning > .bi { flex-shrink: 0; margin-top: 2px; }

.admin-delete-note {
    margin: calc(-1 * var(--af-space-2)) 0 var(--af-space-4);
    color: var(--af-muted);
    font-size: 0.93rem;
}

.admin-body .admin-form-footer > form { margin: 0; display: inline-flex; }

@media (max-width: 575.98px) {
    .admin-body .admin-form-footer > form { display: flex; }
    .admin-body .admin-form-footer > .me-auto { margin-right: 0 !important; }
}

/* Tables on detail pages: names and emails get room, codes and dates never break */
.admin-body td.admin-col-name { min-width: 10rem; }
.admin-body td.admin-col-email { min-width: 13rem; }
.admin-body .admin-referrer-table > tbody > tr > td { vertical-align: middle; }

.admin-body .admin-breakdown-cell { background: var(--af-surface-2) !important; padding: 12px 20px !important; }
.admin-body .admin-breakdown-cell .table { --bs-table-bg: transparent; }

.admin-breakdown-list {
    list-style: none;
    margin: var(--af-space-2) 0 0;
    padding: 0;
    font-size: 0.93rem;
}

.admin-breakdown-list > li {
    padding: 6px 0;
    border-top: 1px solid var(--af-hairline);
}
/* =====================================================================
   Phones: chips and tabs become one dropdown; the main action stays visible
   ===================================================================== */

/* ---------- Filter chips and page tabs on phones (Views/Shared/_PhoneMenu.cshtml) ----------
   Under 768px (and only when scripts run: html.af-js) a chip row or tab strip marked .admin-has-phone-menu is
   replaced by one full-width "Status: Active" / "Section: Notes" button that opens a menu of the same links.
   From 768px up, and without scripts, the chips and tabs are shown exactly as before. */
.admin-phone-menu { display: none; }

@media (max-width: 767.98px) {
    html.af-js .admin-body .admin-phone-menu { display: block; position: relative; margin: 0 0 var(--af-space-4); }
    html.af-js .admin-body .admin-has-phone-menu { display: none !important; }
    /* Before a tab pane: the pane's own top padding is the gap */
    html.af-js .admin-body .admin-phone-menu:has(+ .admin-has-phone-menu.nav-tabs) { margin-bottom: 0; }
}

.admin-body .admin-phone-menu-toggle {
    display: flex;
    width: 100%;
    min-height: 48px;
    justify-content: flex-start;
    gap: 8px;
    padding: 0 14px 0 16px;
    background: var(--af-surface);
    border: 1px solid var(--af-edge);
    color: var(--af-text);
    font-weight: 600;
    text-align: left;
}

.admin-body .admin-phone-menu-toggle:hover,
.admin-body .admin-phone-menu-toggle[aria-expanded="true"] {
    background: var(--af-surface);
    border-color: var(--af-blue);
    color: var(--af-text);
}

.admin-phone-menu-text {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.admin-phone-menu-prefix { color: var(--af-muted); font-weight: 500; }

.admin-phone-menu-caret { flex-shrink: 0; margin-left: 4px; transition: transform 0.15s ease; }
.admin-phone-menu-toggle[aria-expanded="true"] .admin-phone-menu-caret { transform: rotate(180deg); }

.admin-body .admin-phone-menu-list {
    width: 100%;
    max-height: min(70vh, 480px);
    overflow-y: auto;
    margin-top: 4px !important;
}

.admin-body .admin-phone-menu-list .dropdown-item { min-height: 48px; }

.admin-body .admin-phone-menu-list .dropdown-item.is-current {
    color: var(--af-blue-text);
    font-weight: 700;
}

.admin-phone-menu-item-label { flex: 1 1 auto; min-width: 0; }

.admin-phone-menu-count { color: var(--af-muted); font-weight: 700; }
.admin-phone-menu-toggle .admin-phone-menu-count { flex-shrink: 0; }

.admin-body .admin-phone-menu-check { color: var(--af-blue-text); font-size: 1.15rem; }

/* ---------- Referral actions: one primary + "More" (Views/Shared/_ReferralDetailsActionButtons.cshtml) ---------- */
.admin-body .admin-more-toggle { gap: 6px; }

/* Three actions or fewer, all shown as buttons: they share the bar and wrap to a second row when needed */
.admin-actionbar.is-all-buttons { flex-wrap: wrap; }
.admin-actionbar.is-all-buttons > .btn { flex: 1 1 auto; min-width: 0; white-space: normal; line-height: 1.2; }
.admin-actionbar.is-all-buttons > .admin-actionbar-main { flex: 1 1 100%; }

@media (min-width: 576px) {
    .admin-actionbar.is-all-buttons > .admin-actionbar-main { flex: 2 1 auto; }
}

.admin-actionbar > .btn,
.admin-actionbar > .dropup > .btn { min-height: 48px; }

/* =====================================================================
   Edges you can see: WCAG 1.4.11 non-text contrast (3:1)
   ---------------------------------------------------------------------
   Every field, checkbox, chip, soft button, dropdown and card has an edge (or a fill) of 3:1 or better against
   what is behind it, in Day and Night. One 1px edge colour per family (tokens at the top of this file):
   --af-edge (neutral), --af-edge-blue / -ok / -warn / -danger (tinted buttons), --af-card-edge (cards).
   Text-style buttons (btn-link, ghost Cancel, red text "Delete") stay borderless: their text identifies them.
   ===================================================================== */

/* Fields (not when they show a validation colour) */
.admin-body .form-control:not(.is-invalid):not(.is-valid),
.admin-body .form-select:not(.is-invalid):not(.is-valid),
.admin-body .input-group-text { border-color: var(--af-edge); }

.admin-body .form-control:focus,
.admin-body .form-select:focus { border-color: var(--af-blue); }

/* Read-only fields keep their quiet tint but get a real edge: they can still take focus and be copied */
.admin-body .form-control[readonly],
.admin-body textarea[readonly],
.admin-body .form-control-readonly-block { border-color: var(--af-edge) !important; }

/* Checkboxes, radios and switches (the menu's Day / Night switch has its own rule) */
.admin-body .form-check-input:not(:checked) { border-color: var(--af-edge); }

/* Soft neutral buttons: the slightly stronger tint plus an edge */
.admin-body .btn-secondary,
.admin-body .btn-outline-secondary,
.admin-body .btn-light,
.admin-body .btn-outline-light,
.admin-body .btn-dark,
.admin-body .btn-outline-dark {
    --bs-btn-border-color: var(--af-edge);
    --bs-btn-hover-border-color: var(--af-edge);
    --bs-btn-active-border-color: var(--af-edge);
}

/* Soft blue buttons (View, Search, per-row Pack / Deliver, Allocate to me) */
.admin-body .btn-outline-primary,
.admin-body .btn-outline-info,
.admin-body .btn-outline-indigo {
    --bs-btn-border-color: var(--af-edge-blue);
    --bs-btn-hover-border-color: var(--af-edge-blue);
    --bs-btn-active-border-color: var(--af-edge-blue);
}

.admin-body .admin-list-controls .btn-primary,
.admin-body .admin-list-controls .btn-success,
.admin-body .admin-row-actions .btn-primary,
.admin-body .admin-row-actions .btn-success,
.admin-body .admin-list-actions .btn-primary,
.admin-body .admin-list-actions .btn-success,
.admin-body .admin-list-side .btn-primary,
.admin-body .admin-list-side .btn-success,
.admin-body .admin-mini-side .btn-primary,
.admin-body .admin-lock-strip .btn-primary,
.admin-body .admin-btn-soft {
    --bs-btn-border-color: var(--af-edge-blue);
    --bs-btn-hover-border-color: var(--af-edge-blue);
    --bs-btn-active-border-color: var(--af-edge-blue);
    border-color: var(--af-edge-blue);
}

/* Soft green / amber / red buttons */
.admin-body .btn-outline-success { --bs-btn-border-color: var(--af-edge-ok); --bs-btn-hover-border-color: var(--af-edge-ok); --bs-btn-active-border-color: var(--af-edge-ok); }

.admin-body .btn-warning,
.admin-body .btn-outline-warning { --bs-btn-border-color: var(--af-edge-warn); --bs-btn-hover-border-color: var(--af-edge-warn); --bs-btn-active-border-color: var(--af-edge-warn); }

.admin-body .btn-danger { --bs-btn-border-color: var(--af-edge-danger); }

/* Ghost buttons (Cancel in a form footer) stay text-style: no edge, no fill until hovered */
.admin-body .admin-form-footer .btn-secondary:not(.dropdown-toggle),
.admin-body .admin-form-footer .btn-outline-secondary,
.admin-body .admin-btn-ghost {
    --bs-btn-border-color: transparent;
    --bs-btn-hover-border-color: transparent;
    --bs-btn-active-border-color: transparent;
}

/* Filter chips: the soft tint plus an edge; the selected chip is filled blue */
.admin-body .admin-chip { border: 1px solid var(--af-edge); }
.admin-body .admin-chip.active { border-color: var(--af-blue); }

/* Dropdown menus */
.admin-body .dropdown-menu {
    --bs-dropdown-border-color: var(--af-edge);
    border-color: var(--af-edge);
}

/* Cards (one level): a visible edge against the page. Cards inside cards stay borderless tinted panels. */
.admin-body .card { --bs-card-border-color: var(--af-card-edge); }

.admin-body .card.border-primary,
.admin-body .card.border-info,
.admin-body .card.border-success,
.admin-body .card.border-warning,
.admin-body .card.border-danger,
.admin-body .card.border-secondary {
    border-top-color: var(--af-card-edge) !important;
    border-right-color: var(--af-card-edge) !important;
    border-bottom-color: var(--af-card-edge) !important;
}

.admin-body .card.border-secondary { border-left-color: var(--af-card-edge) !important; }

/* Card-like boxes: the boxed tab pane, a standalone form footer, the allocation strip */
.admin-body .tab-content:not(:has(> .card, > .tab-pane > .card, > form > .card, > div > .card)),
.admin-body .admin-form-footer.is-standalone,
.admin-lock-strip { border-color: var(--af-card-edge); }


/* =====================================================================
   Monthly Pantry (release 2): Views/Pantry/*, PantryParcels, PantrySignposting
   Built from the tokens above, so Day and Night and the 3:1 edges follow the rest of the admin.
   ===================================================================== */

/* ---------- Visit: header, steps, step body ---------- */
.pantry-visit-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--af-space-3);
    margin-bottom: var(--af-space-3);
}

.pantry-visit-kicker {
    color: var(--af-muted);
    font-weight: 600;
    font-size: 0.97rem;
    min-width: 0;
    overflow-wrap: anywhere;
}

.pantry-visit-head form { margin: 0; flex-shrink: 0; }

.pantry-steps {
    display: flex;
    gap: 6px;
    list-style: none;
    margin: 0 0 var(--af-space-5);
    padding: 0;
}

.pantry-steps > li {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 40px;
    padding: 0 10px;
    border-radius: 999px;
    border: 1px solid var(--af-edge);
    background: var(--af-surface);
    color: var(--af-muted);
    font-size: 0.9rem;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pantry-steps > li.is-done { background: var(--af-ok-soft); border-color: var(--af-edge-ok); color: var(--af-ok-text); }
.pantry-steps > li.is-current { background: var(--af-blue); border-color: var(--af-blue); color: var(--af-on-blue); }

/* Phones: the other steps show their number only */
@media (max-width: 575.98px) {
    .pantry-steps > li:not(.is-current) { flex: 0 0 40px; padding: 0; }
    .pantry-steps > li:not(.is-current) .pantry-step-label { display: none; }
    .pantry-steps > li.is-current { flex: 1 1 auto; }
}

.pantry-step-title {
    font-weight: 800;
    font-size: clamp(1.4rem, 1.1rem + 1vw, 1.8rem);
    margin: 0 0 var(--af-space-1);
    color: var(--af-text);
}

.pantry-step-intro { color: var(--af-muted); margin: 0 0 var(--af-space-4); }

.pantry-body { max-width: 760px; }

.pantry-body .card-body { padding: 20px; }

@media (max-width: 575.98px) {
    .pantry-body .card-body { padding: 16px; }
}

.pantry-section-title {
    font-size: 1.1rem;
    font-weight: 700;
    margin: 0 0 var(--af-space-3);
}

.pantry-form .form-label { font-weight: 600; margin-bottom: 6px; }

.pantry-form .form-control,
.pantry-form .form-select { min-height: 48px; font-size: 1rem; }

.pantry-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--af-space-3) var(--af-space-4);
}

.pantry-grid > .is-wide { grid-column: 1 / -1; }

@media (max-width: 575.98px) {
    .pantry-grid { grid-template-columns: minmax(0, 1fr); }
}

.pantry-help { color: var(--af-muted); font-size: 0.93rem; margin: 6px 0 0; }

.pantry-body .admin-choice { border-color: var(--af-edge); }
.pantry-body .admin-choice:has(input:checked) { border-color: var(--af-blue); }

/* ---------- Photo capture (camera on phones and iPads, file picker on laptops) ---------- */
.pantry-photo {
    display: flex;
    align-items: center;
    gap: var(--af-space-4);
    padding: var(--af-space-3);
    border: 1px dashed var(--af-edge);
    border-radius: var(--af-radius-sm);
    background: var(--af-surface-2);
    margin-bottom: var(--af-space-4);
}

.pantry-photo-preview {
    flex-shrink: 0;
    width: 104px;
    height: 104px;
    border-radius: 10px;
    background: var(--af-soft);
    color: var(--af-muted);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.2rem;
    overflow: hidden;
}

.pantry-photo-preview img { width: 100%; height: 100%; object-fit: cover; }

.pantry-photo-main { flex: 1 1 auto; min-width: 0; }

.pantry-photo-title { display: block; font-weight: 700; margin-bottom: 2px; }

.pantry-photo-status { display: block; color: var(--af-muted); font-size: 0.93rem; margin-bottom: var(--af-space-2); }
.pantry-photo-status.is-ok { color: var(--af-green-text); font-weight: 600; }
.pantry-photo-status.is-error { color: var(--af-danger-text); font-weight: 600; }

/* Saving the photo just taken (js/pantry.js): a thin bar under the status, then "Saved" */
.pantry-photo-progress {
    height: 6px;
    border-radius: 3px;
    background: var(--af-soft);
    overflow: hidden;
    margin: -2px 0 var(--af-space-2);
    max-width: 260px;
}
.pantry-photo-progress > span {
    display: block;
    height: 100%;
    width: 40%;
    border-radius: 3px;
    background: var(--af-blue);
    animation: pantry-photo-progress 1.1s ease-in-out infinite;
}
@keyframes pantry-photo-progress {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(260%); }
}
@media (prefers-reduced-motion: reduce) {
    .pantry-photo-progress > span { animation: none; width: 100%; opacity: 0.6; }
}

/* The postcode's district under the postcode field, once checked */
.pantry-postcode-area { display: flex; align-items: center; gap: 6px; }

/* The real file input stays in the page (keyboard and screen readers reach it); the label is the button */
.pantry-photo-btn { position: relative; }
.pantry-photo-btn input[type="file"] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}
.pantry-photo-btn:has(input:focus-visible) { outline: 3px solid var(--af-blue); outline-offset: 2px; }

@media (max-width: 400px) {
    .pantry-photo { flex-direction: column; align-items: stretch; }
    .pantry-photo-preview { width: 100%; height: 160px; }
}

/* ---------- Results: eligible / not eligible / notes ---------- */
.pantry-result {
    display: flex;
    align-items: flex-start;
    gap: var(--af-space-3);
    padding: 14px 16px;
    border: 1px solid;
    border-radius: var(--af-radius-sm);
    margin: 0 0 var(--af-space-4);
}

.pantry-result.is-ok { background: var(--af-ok-soft); border-color: var(--af-edge-ok); color: var(--af-ok-text); }
.pantry-result.is-danger { background: var(--af-danger-soft); border-color: var(--af-edge-danger); color: var(--af-danger-text); }
.pantry-result.is-warn { background: var(--af-warn-soft); border-color: var(--af-edge-warn); color: var(--af-warn-text); }
.pantry-result.is-info { background: var(--af-info-soft); border-color: var(--af-edge-blue); color: var(--af-info-text); }

.pantry-result > .bi { font-size: 1.35rem; line-height: 1.2; flex-shrink: 0; }

.pantry-result-body { min-width: 0; }
.pantry-result-title { display: block; font-weight: 800; font-size: 1.08rem; }
.pantry-result p { margin: 4px 0 0; }
.pantry-result ul { margin: 6px 0 0; padding-left: 1.1rem; }
.pantry-body .pantry-result a,
.admin-body .pantry-result a { color: inherit; font-weight: 700; text-decoration: underline; }

.pantry-big-date { display: block; font-size: clamp(1.3rem, 1rem + 1vw, 1.7rem); font-weight: 800; margin-top: 2px; }

/* ---------- Choices: parcels, reasons ---------- */
.pantry-choice {
    display: flex;
    align-items: flex-start;
    gap: var(--af-space-3);
    padding: 14px 16px;
    margin: 0 0 10px;
    border: 1px solid var(--af-edge);
    border-radius: var(--af-radius-sm);
    background: var(--af-surface);
    cursor: pointer;
}

.pantry-choice:has(input:checked) { border: 2px solid var(--af-blue); padding: 13px 15px; background: var(--af-blue-soft); }

.pantry-choice .form-check-input { flex-shrink: 0; width: 1.35rem; height: 1.35rem; margin: 0.15rem 0 0; }

.pantry-choice-main { flex: 1 1 auto; min-width: 0; }

.pantry-choice-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 8px;
}

.pantry-choice-title { font-weight: 800; font-size: 1.07rem; }
.pantry-choice-meta { color: var(--af-muted); font-size: 0.93rem; }
.pantry-choice-count { margin-left: auto; font-weight: 700; white-space: nowrap; }

.pantry-choice ul {
    margin: 6px 0 0;
    padding-left: 1.1rem;
    color: var(--af-text);
    font-size: 0.93rem;
}

.pantry-choice-why { display: block; margin-top: 6px; color: var(--af-blue-text); font-weight: 600; font-size: 0.93rem; }

/* ---------- Steppers (adults, children) ---------- */
.pantry-stepper { display: inline-flex; align-items: center; gap: var(--af-space-2); }
.pantry-stepper .btn { width: 48px; height: 48px; padding: 0; font-size: 1.35rem; font-weight: 700; }
.pantry-stepper .form-control { width: 72px; text-align: center; font-weight: 700; font-size: 1.1rem; }

/* ---------- Stats, stock, today ---------- */
.pantry-stats {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--af-space-4);
    margin: 0 0 var(--af-space-5);
    padding: 0;
    list-style: none;
}

@media (max-width: 991.98px) {
    .pantry-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--af-space-3); }
}

.pantry-stat {
    display: flex;
    flex-direction: column;
    gap: 4px;
    height: 100%;
    padding: 16px 18px;
    background: var(--af-surface);
    border: 1px solid var(--af-card-edge);
    border-radius: var(--af-radius);
    color: var(--af-text);
    text-decoration: none;
}

.pantry-stat-label { color: var(--af-muted); font-weight: 600; font-size: 0.92rem; }
.pantry-stat-value { font-size: clamp(1.6rem, 1.2rem + 1.2vw, 2.2rem); font-weight: 800; line-height: 1.1; }

.pantry-stat.is-warn { background: var(--af-warn-soft); border-color: var(--af-edge-warn); }
.pantry-stat.is-warn .pantry-stat-label,
.pantry-stat.is-warn .pantry-stat-value { color: var(--af-warn-text); }
.admin-body a.pantry-stat:hover { border-color: var(--af-blue); color: var(--af-text); }
.admin-body a.pantry-stat.is-warn:hover { color: var(--af-warn-text); }

.pantry-today-grid {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
    gap: var(--af-space-4);
    align-items: start;
}

@media (max-width: 1199.98px) {
    .pantry-today-grid { grid-template-columns: minmax(0, 1fr); }
}

.pantry-stock { list-style: none; margin: 0; padding: 0; }
.pantry-stock > li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--af-space-2);
    min-height: 48px;
    padding: 6px var(--af-space-4);
    border-top: 1px solid var(--af-hairline);
}
.pantry-stock > li:first-child { border-top: 0; }
.pantry-stock-count { font-weight: 800; font-size: 1.1rem; }

.pantry-head-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--af-space-2); flex: 0 1 560px; justify-content: flex-end; }
.pantry-head-actions .admin-search { flex: 1 1 260px; }

@media (max-width: 767.98px) {
    .pantry-head-actions { flex: 1 1 100%; justify-content: stretch; }
    .pantry-head-actions > .btn { flex: 1 1 100%; }
}

/* ---------- Household record, ID on file ---------- */
.pantry-id-thumb {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    width: 148px;
    height: 112px;
    padding: 0;
    border: 1px solid var(--af-edge);
    border-radius: 10px;
    background: var(--af-surface-2);
    color: var(--af-muted);
    overflow: hidden;
}

.pantry-id-thumb img { width: 100%; height: 100%; object-fit: cover; }
.pantry-id-thumb:hover,
.pantry-id-thumb:focus-visible { border-color: var(--af-blue); }

.pantry-id-row { display: flex; align-items: center; gap: var(--af-space-4); flex-wrap: wrap; }
.pantry-id-row-text { min-width: 0; flex: 1 1 200px; }

.pantry-docs { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--af-space-3); }
.pantry-doc { display: flex; gap: var(--af-space-3); align-items: center; }
.pantry-doc .pantry-id-thumb { width: 96px; height: 72px; flex-shrink: 0; }

.pantry-checks { list-style: none; margin: 0; padding: 0; }
.pantry-checks > li { display: flex; gap: 10px; align-items: flex-start; padding: 8px 0; border-top: 1px solid var(--af-hairline); }
.pantry-checks > li:first-child { border-top: 0; padding-top: 0; }
.pantry-checks > li > .bi { flex-shrink: 0; font-size: 1.15rem; line-height: 1.3; }
.pantry-checks .is-ok { color: var(--af-green-text); }
.pantry-checks .is-warn { color: var(--af-orange-text); }

.pantry-modal-photo { max-width: 100%; max-height: 75vh; display: block; margin: 0 auto; border-radius: 8px; }

/* ---------- Signposting list and the printable handout ---------- */
.pantry-signposts { list-style: none; margin: 0; padding: 0; }
.pantry-signposts > li { padding: 12px 0; border-top: 1px solid var(--af-hairline); }
.pantry-signposts > li:first-child { border-top: 0; padding-top: 0; }
.pantry-signpost-name { font-weight: 700; display: block; }
.pantry-signpost-meta { color: var(--af-muted); font-size: 0.93rem; display: block; overflow-wrap: anywhere; }

.pantry-handout { max-width: 820px; }
.pantry-handout-head { display: flex; align-items: center; gap: 16px; margin-bottom: 16px; }
.pantry-handout-head img { width: 56px; height: 56px; }

@media print {
    @page { margin: 14mm; }
    .admin-body .admin-sidebar,
    .admin-body .admin-topbar,
    .admin-body .admin-tabbar,
    .admin-body .admin-actionbar,
    .admin-body .env-banner,
    .admin-body .admin-skip-link,
    .admin-body .pantry-no-print,
    #silktide-wrapper,
    #silktide-cookie-icon { display: none !important; }
    html.admin-html, .admin-body { background: #fff !important; color: #000 !important; }
    .admin-body .admin-main { padding: 0 !important; }
    .admin-body .pantry-handout,
    .admin-body .pantry-handout * { color: #000 !important; background: transparent !important; box-shadow: none !important; }
    .admin-body .pantry-handout .card { border: 0 !important; }
    .pantry-signposts > li { break-inside: avoid; border-color: #999 !important; }
}