/* ═══════════════════════════════════════════════════════════════════════════
 * FILE            : public/css/hig.css
 * MODULE          : Admin Console — Design System
 * PURPOSE         : Apple Human Interface Guidelines design system for the
 *                   dispatcher console. Provides the HIG token layer (SF type
 *                   scale, label/fill/separator/background roles, system
 *                   colours, radii, materials, motion), the HIG component
 *                   primitives (source list, toolbar, large title, inset
 *                   grouped lists, capsule buttons, segmented controls,
 *                   switches, popovers, sheets) and a Bootstrap 5 bridge that
 *                   re-skins Bootstrap components onto those primitives.
 *
 *                   The El Dahan restaurant colour theme is preserved verbatim
 *                   — brown / amber / cream / green / magenta / purple and the
 *                   order + rider status hues are unchanged. Only the
 *                   STRUCTURE (type, spacing, shape, depth, motion) follows
 *                   Apple HIG.
 *
 * RELATED TABLES  : tenant_brandings (per-tenant overrides via /css/theme)
 * ACCESS ROLES    : all console roles
 * AUTHOR          : El Dahan Platform Team
 * VERSION         : 1.0.0
 * ═══════════════════════════════════════════════════════════════════════════ */

/* ───────────────────────────────────────────────────────────────────────────
 * 1. TOKENS — Light appearance
 * ─────────────────────────────────────────────────────────────────────────── */
:root {
    color-scheme: light;

    /* ── Brand palette (restaurant theme — unchanged) ────────────────────── */
    --brand-brown:    #26170F;
    --brand-brown-2:  #3D2318;
    --brand-green:    #1E7A32;
    --brand-magenta:  #8C1FA0;
    --brand-amber:    #FFA629;
    --brand-purple:   #4B1EA8;
    --brand-cream:    #FDF8F4;
    --brand-sand:     #F5ECE2;

    /* ── Tint (HIG accent colour) ────────────────────────────────────────── */
    --tint:           var(--brand-brown);
    --tint-hover:     var(--brand-brown-2);
    --tint-contrast:  var(--brand-cream);
    --accent:         var(--brand-amber);

    /* ── System colours, warm-mapped to the restaurant theme ─────────────── */
    --sys-red:        #C1272D;
    --sys-orange:     #E07B1E;
    --sys-yellow:     var(--brand-amber);
    --sys-green:      var(--brand-green);
    --sys-teal:       #0F766E;
    --sys-blue:       #1D4ED8;
    --sys-indigo:     #3730A3;
    --sys-purple:     var(--brand-purple);
    --sys-pink:       var(--brand-magenta);
    --sys-brown:      #8A5A3B;

    /* ── Grays — warm-derived so they sit inside the restaurant theme ────── */
    --gray:           #8A7365;
    --gray-2:         #A89486;
    --gray-3:         #C4B5A9;
    --gray-4:         #D6CABF;
    --gray-5:         #E8DED4;
    --gray-6:         #F4EDE6;

    /* ── Label roles ─────────────────────────────────────────────────────── */
    --label:          #1A0D07;
    --label-2:        rgba(26, 13, 7, .60);
    --label-3:        rgba(26, 13, 7, .32);
    --label-4:        rgba(26, 13, 7, .18);

    /* ── Background roles ────────────────────────────────────────────────── */
    --bg:             #FFFFFF;
    --bg-2:           var(--brand-sand);
    --bg-3:           #FFFFFF;
    --bg-grouped:     var(--brand-sand);
    --bg-grouped-2:   #FFFFFF;
    --bg-grouped-3:   var(--brand-cream);

    /* ── Fill roles (control backplates) ─────────────────────────────────── */
    --fill-1:         rgba(122, 85, 64, .20);
    --fill-2:         rgba(122, 85, 64, .16);
    --fill-3:         rgba(122, 85, 64, .11);
    --fill-4:         rgba(122, 85, 64, .07);

    /* ── Separators ──────────────────────────────────────────────────────── */
    --separator:      rgba(38, 23, 15, .17);
    --separator-op:   #E2D6CA;

    /* ── Materials (vibrancy) ────────────────────────────────────────────── */
    --material-thin:    rgba(255, 255, 255, .72);
    --material-regular: rgba(255, 255, 255, .82);
    --material-thick:   rgba(255, 255, 255, .94);
    --material-blur:    saturate(180%) blur(20px);
    --material-chrome:  rgba(253, 248, 244, .80);

    /* ── Typography — SF Pro text styles (iOS metrics) ───────────────────── */
    --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display",
            "Segoe UI", Inter, system-ui, "Helvetica Neue", Arial, sans-serif;
    --font-ar: "SF Arabic", -apple-system, BlinkMacSystemFont, "Geeza Pro",
               Cairo, "Segoe UI", system-ui, sans-serif;
    --font-mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, monospace;

    --f-large-title: 34px;  --lh-large-title: 41px;  --tr-large-title:  .374px;
    --f-title-1:     28px;  --lh-title-1:     34px;  --tr-title-1:      .364px;
    --f-title-2:     22px;  --lh-title-2:     28px;  --tr-title-2:      .35px;
    --f-title-3:     20px;  --lh-title-3:     25px;  --tr-title-3:      .38px;
    --f-headline:    17px;  --lh-headline:    22px;  --tr-headline:    -.408px;
    --f-body:        17px;  --lh-body:        22px;  --tr-body:        -.408px;
    --f-callout:     16px;  --lh-callout:     21px;  --tr-callout:     -.32px;
    --f-subhead:     15px;  --lh-subhead:     20px;  --tr-subhead:     -.24px;
    --f-footnote:    13px;  --lh-footnote:    18px;  --tr-footnote:    -.078px;
    --f-caption-1:   12px;  --lh-caption-1:   16px;  --tr-caption-1:    0px;
    --f-caption-2:   11px;  --lh-caption-2:   13px;  --tr-caption-2:    .066px;

    /* Console density — macOS control metrics for data-dense surfaces */
    --f-control:     13px;
    --lh-control:    16px;
    --f-control-lg:  15px;

    /* ── Shape — Apple continuous corners ────────────────────────────────── */
    --r-xs:       6px;
    --r-sm:       8px;
    --r-md:      10px;
    --r-lg:      12px;
    --r-xl:      16px;
    --r-2xl:     20px;
    --r-capsule: 980px;

    /* ── Spacing — 4pt grid ──────────────────────────────────────────────── */
    --sp-1:  4px;  --sp-2:  8px;  --sp-3: 12px;  --sp-4: 16px;
    --sp-5: 20px;  --sp-6: 24px;  --sp-8: 32px;  --sp-10: 40px;
    --margin: 20px;
    --hit: 44px;

    /* ── Depth — HIG is restrained: hairline first, shadow second ────────── */
    --shadow-1: 0 0 0 .5px rgba(38, 23, 15, .09);
    --shadow-2: 0 1px 3px rgba(38, 23, 15, .07), 0 6px 20px rgba(38, 23, 15, .07);
    --shadow-3: 0 12px 48px rgba(38, 23, 15, .20);

    /* ── Motion ──────────────────────────────────────────────────────────── */
    --ease:        cubic-bezier(.25, .1, .25, 1);
    --ease-out:    cubic-bezier(.16, 1, .3, 1);
    --ease-spring: cubic-bezier(.34, 1.56, .64, 1);
    --dur-fast: 150ms;
    --dur:      250ms;
    --dur-slow: 350ms;

    /* ── Layout chrome ───────────────────────────────────────────────────── */
    --sidebar-width:  244px;
    --toolbar-height: 52px;
}

/* ───────────────────────────────────────────────────────────────────────────
 * 2. TOKENS — Dark appearance
 * ─────────────────────────────────────────────────────────────────────────── */
@media (prefers-color-scheme: dark) {
    :root:not([data-appearance="light"]) {
        color-scheme: dark;

        --tint:          var(--brand-amber);
        --tint-hover:    #FFB851;
        --tint-contrast: var(--brand-brown);

        --sys-red:    #FF6961;
        --sys-orange: #FF9F0A;
        --sys-green:  #34C759;
        --sys-teal:   #40C8E0;
        --sys-blue:   #5E9BFF;
        --sys-indigo: #7D7AFF;
        --sys-purple: #BF5AF2;
        --sys-pink:   #D96BE8;
        --sys-brown:  #C79B76;

        --gray:   #98867A;
        --gray-2: #6E5C50;
        --gray-3: #55463C;
        --gray-4: #40342C;
        --gray-5: #2E251F;
        --gray-6: #221B16;

        --label:   #FDF8F4;
        --label-2: rgba(253, 248, 244, .60);
        --label-3: rgba(253, 248, 244, .32);
        --label-4: rgba(253, 248, 244, .18);

        --bg:           #16100C;
        --bg-2:         #1F1710;
        --bg-3:         #2A1F17;
        --bg-grouped:   #100B08;
        --bg-grouped-2: #1F1710;
        --bg-grouped-3: #2A1F17;

        --fill-1: rgba(235, 220, 205, .20);
        --fill-2: rgba(235, 220, 205, .15);
        --fill-3: rgba(235, 220, 205, .10);
        --fill-4: rgba(235, 220, 205, .06);

        --separator:    rgba(235, 220, 205, .20);
        --separator-op: #3A2E25;

        --material-thin:    rgba(35, 26, 19, .72);
        --material-regular: rgba(35, 26, 19, .82);
        --material-thick:   rgba(35, 26, 19, .94);
        --material-chrome:  rgba(31, 23, 16, .80);

        --shadow-1: 0 0 0 .5px rgba(255, 255, 255, .10);
        --shadow-2: 0 1px 3px rgba(0, 0, 0, .40), 0 6px 20px rgba(0, 0, 0, .34);
        --shadow-3: 0 12px 48px rgba(0, 0, 0, .60);
    }
}

/* ───────────────────────────────────────────────────────────────────────────
 * 3. BASE
 * ─────────────────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }
html, body { height: 100%; }

body {
    margin: 0;
    font-family: var(--font);
    font-size: var(--f-subhead);
    line-height: var(--lh-subhead);
    letter-spacing: var(--tr-subhead);
    color: var(--label);
    background: var(--bg-grouped);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-synthesis-weight: none;
    overflow-x: hidden;
}

[lang="ar"] body, [dir="rtl"] body { font-family: var(--font-ar); }

/* HIG sets heading hierarchy with weight and size, not colour. */
h1, h2, h3, h4, h5, h6 {
    color: var(--label);
    font-weight: 600;
    letter-spacing: var(--tr-title-3);
    margin: 0;
}

a { color: var(--tint); text-decoration: none; }
a:hover { color: var(--tint-hover); text-decoration: none; }

hr {
    border: 0;
    border-top: .5px solid var(--separator);
    opacity: 1;
    margin: var(--sp-4) 0;
}

::selection { background: color-mix(in srgb, var(--accent) 34%, transparent); }

/* Focus ring — HIG keyboard focus is a tinted halo, never a layout shift. */
:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3.5px color-mix(in srgb, var(--tint) 30%, transparent);
    border-radius: var(--r-xs);
}

::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
    background-color: var(--label-3);
    border-radius: var(--r-capsule);
    border: 2px solid transparent;
    background-clip: content-box;
}
::-webkit-scrollbar-thumb:hover { background-color: var(--label-2); background-clip: content-box; }
* { scrollbar-width: thin; scrollbar-color: var(--label-3) transparent; }

/* ───────────────────────────────────────────────────────────────────────────
 * 4. TYPOGRAPHY UTILITIES — Apple text styles
 * ─────────────────────────────────────────────────────────────────────────── */
.hig-large-title { font-size: var(--f-large-title); line-height: var(--lh-large-title); letter-spacing: var(--tr-large-title); font-weight: 700; }
.hig-title-1     { font-size: var(--f-title-1);     line-height: var(--lh-title-1);     letter-spacing: var(--tr-title-1);     font-weight: 700; }
.hig-title-2     { font-size: var(--f-title-2);     line-height: var(--lh-title-2);     letter-spacing: var(--tr-title-2);     font-weight: 700; }
.hig-title-3     { font-size: var(--f-title-3);     line-height: var(--lh-title-3);     letter-spacing: var(--tr-title-3);     font-weight: 600; }
.hig-headline    { font-size: var(--f-headline);    line-height: var(--lh-headline);    letter-spacing: var(--tr-headline);    font-weight: 600; }
.hig-body        { font-size: var(--f-body);        line-height: var(--lh-body);        letter-spacing: var(--tr-body);        font-weight: 400; }
.hig-callout     { font-size: var(--f-callout);     line-height: var(--lh-callout);     letter-spacing: var(--tr-callout);     font-weight: 400; }
.hig-subhead     { font-size: var(--f-subhead);     line-height: var(--lh-subhead);     letter-spacing: var(--tr-subhead);     font-weight: 400; }
.hig-footnote    { font-size: var(--f-footnote);    line-height: var(--lh-footnote);    letter-spacing: var(--tr-footnote);    font-weight: 400; }
.hig-caption-1   { font-size: var(--f-caption-1);   line-height: var(--lh-caption-1);   letter-spacing: var(--tr-caption-1);   font-weight: 400; }
.hig-caption-2   { font-size: var(--f-caption-2);   line-height: var(--lh-caption-2);   letter-spacing: var(--tr-caption-2);   font-weight: 400; }

.hig-secondary { color: var(--label-2) !important; }
.hig-tertiary  { color: var(--label-3) !important; }
.hig-tabular   { font-variant-numeric: tabular-nums; }
.hig-mono      { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }

/* Grouped-list section header: a quiet secondary label, not all-caps microtype. */
.hig-section-header {
    font-size: var(--f-footnote);
    line-height: var(--lh-footnote);
    letter-spacing: var(--tr-footnote);
    font-weight: 400;
    color: var(--label-2);
    padding: 0 var(--sp-4) var(--sp-2);
    margin: 0;
}
.hig-section-footer {
    font-size: var(--f-footnote);
    line-height: var(--lh-footnote);
    color: var(--label-2);
    padding: var(--sp-2) var(--sp-4) 0;
    margin: 0;
}

/* ───────────────────────────────────────────────────────────────────────────
 * 5. APP SHELL — macOS source list + toolbar
 * ─────────────────────────────────────────────────────────────────────────── */
#sidebar {
    position: fixed;
    top: 0;
    bottom: 0;
    inset-inline-start: 0;
    width: var(--sidebar-width);
    z-index: 1040;
    display: flex;
    flex-direction: column;
    background: var(--material-chrome);
    -webkit-backdrop-filter: var(--material-blur);
    backdrop-filter: var(--material-blur);
    border-inline-end: .5px solid var(--separator);
    overflow: hidden;
    transition: transform var(--dur) var(--ease-out);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    #sidebar { background: var(--bg-grouped-3); }
}

/* Sidebar identity block — sits in the toolbar band, like a macOS titlebar. */
.sidebar-brand {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    height: var(--toolbar-height);
    flex: 0 0 var(--toolbar-height);
    padding: 0 var(--sp-4);
    text-decoration: none;
}
.brand-icon {
    width: 28px;
    height: 28px;
    flex: 0 0 28px;
    border-radius: var(--r-xs);
    background: var(--tint);
    color: var(--tint-contrast);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
}
.brand-icon i { color: inherit; }

/* The rider-app launcher icon, in an Apple-proportioned rounded square (~22%
   of the side). A hairline keeps it from bleeding into the cream sidebar. */
.brand-icon-img {
    width: 30px;
    height: 30px;
    flex: 0 0 30px;
    border-radius: 7px;
    object-fit: cover;
    box-shadow: 0 0 0 .5px rgba(38, 23, 15, .14);
}

/* Wordmark over the descriptor. The calligraphic mark is near-square, so it
   is sized by height and allowed to find its own width. */
.brand-lockup {
    display: flex;
    flex-direction: column;
    /* align-items must not be stretch, or the wordmark is pulled to the width
       of the descriptor beneath it and distorts. */
    align-items: flex-start;
    justify-content: center;
    gap: 3px;
    min-width: 0;
}
.brand-wordmark {
    display: block;
    height: 24px;
    width: auto;
    max-width: 100%;
    object-fit: contain;
}

/* A tenant's own upload replaces the whole lockup. */
.brand-tenant-logo {
    max-height: 32px;
    max-width: 168px;
    object-fit: contain;
}

.brand-name {
    display: block;
    color: var(--label);
    font-size: var(--f-control-lg);
    line-height: 18px;
    font-weight: 600;
    letter-spacing: var(--tr-subhead);
}
.brand-sub {
    display: block;
    color: var(--label-2);
    font-size: var(--f-caption-2);
    line-height: 14px;
    letter-spacing: 0;
    text-transform: none;
    font-weight: 400;
}

.sidebar-scroll {
    flex: 1 1 auto;
    overflow-y: auto;
    overflow-x: hidden;
    padding: var(--sp-1) var(--sp-2) var(--sp-4);
}

/* Source-list section label */
.nav-section {
    display: block;
    padding: var(--sp-4) var(--sp-3) var(--sp-1);
    font-size: var(--f-footnote);
    line-height: var(--lh-footnote);
    font-weight: 600;
    letter-spacing: var(--tr-footnote);
    text-transform: none;
    color: var(--label-2);
    opacity: 1;
}
.sidebar-scroll .nav-section:first-child { padding-top: var(--sp-2); }

/* Source-list row — rounded selection pill, tint fill, no leading bar. */
#sidebar .nav-link {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    padding: 6px var(--sp-3);
    margin: 1px 0;
    border-radius: var(--r-xs);
    border: 0;
    color: var(--label);
    font-size: var(--f-control-lg);
    line-height: 20px;
    font-weight: 400;
    letter-spacing: var(--tr-subhead);
    transition: background-color var(--dur-fast) var(--ease);
}
#sidebar .nav-link i {
    width: 20px;
    flex: 0 0 20px;
    text-align: center;
    font-size: 15px;
    color: var(--tint);
    opacity: 1;
    transition: color var(--dur-fast) var(--ease);
}
#sidebar .nav-link:hover { background: var(--fill-4); color: var(--label); }
#sidebar .nav-link:active { background: var(--fill-3); }
#sidebar .nav-link.active {
    background: var(--tint);
    color: var(--tint-contrast);
    font-weight: 500;
}
#sidebar .nav-link.active i { color: var(--tint-contrast); }

/* Sidebar badge (counts) */
.nav-link .nav-badge {
    margin-inline-start: auto;
    font-size: var(--f-caption-1);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--label-2);
    background: var(--fill-3);
    border-radius: var(--r-capsule);
    padding: 1px 7px;
}
#sidebar .nav-link.active .nav-badge {
    color: var(--tint);
    background: var(--tint-contrast);
}

/* ── Toolbar ─────────────────────────────────────────────────────────────── */
#topbar {
    position: fixed;
    top: 0;
    inset-inline-start: var(--sidebar-width);
    inset-inline-end: 0;
    height: var(--toolbar-height);
    z-index: 1030;
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    padding: 0 var(--margin);
    background: var(--material-regular);
    -webkit-backdrop-filter: var(--material-blur);
    backdrop-filter: var(--material-blur);
    border-bottom: .5px solid var(--separator);
    box-shadow: none;
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    #topbar { background: var(--bg); }
}
.topbar-page-title {
    font-size: var(--f-control-lg);
    line-height: 20px;
    font-weight: 600;
    letter-spacing: var(--tr-subhead);
    color: var(--label);
}

/* ── Main content ────────────────────────────────────────────────────────── */
#main {
    margin-inline-start: var(--sidebar-width);
    padding: calc(var(--toolbar-height) + var(--sp-6)) var(--margin) var(--sp-10);
    min-height: 100vh;
}

/* Large title — the first thing in a HIG content pane. */
.hig-page-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--sp-4);
    flex-wrap: wrap;
    margin-bottom: var(--sp-5);
}
.hig-page-header h1,
.hig-page-title {
    font-size: var(--f-large-title);
    line-height: var(--lh-large-title);
    letter-spacing: var(--tr-large-title);
    font-weight: 700;
    color: var(--label);
    margin: 0;
}
.hig-page-subtitle {
    font-size: var(--f-subhead);
    line-height: var(--lh-subhead);
    letter-spacing: var(--tr-subhead);
    color: var(--label-2);
    margin: var(--sp-1) 0 0;
}
.hig-page-actions { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; }

/* ───────────────────────────────────────────────────────────────────────────
 * 6. INSET GROUPED CONTAINERS (HIG list / card)
 * ─────────────────────────────────────────────────────────────────────────── */
.hig-group {
    background: var(--bg-grouped-2);
    border-radius: var(--r-md);
    box-shadow: var(--shadow-1);
    overflow: hidden;
}
.hig-group + .hig-group { margin-top: var(--sp-5); }

.hig-group-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-3);
    padding: var(--sp-3) var(--sp-4);
    border-bottom: .5px solid var(--separator);
    background: transparent;
}
.hig-group-header .hig-group-title {
    font-size: var(--f-callout);
    line-height: var(--lh-callout);
    letter-spacing: var(--tr-callout);
    font-weight: 600;
    color: var(--label);
    margin: 0;
    display: flex;
    align-items: center;
    gap: var(--sp-2);
}
.hig-group-header .hig-group-title i { color: var(--label-2); font-size: 15px; }
.hig-group-body { padding: var(--sp-4); }
.hig-group-footer {
    padding: var(--sp-3) var(--sp-4);
    border-top: .5px solid var(--separator);
}

/* Row — the grouped-list cell. Separators are inset to the content edge. */
.hig-row {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    min-height: var(--hit);
    padding: var(--sp-2) var(--sp-4);
    position: relative;
    color: var(--label);
    background: transparent;
    transition: background-color var(--dur-fast) var(--ease);
}
.hig-row + .hig-row::before {
    content: "";
    position: absolute;
    top: 0;
    inset-inline-start: var(--sp-4);
    inset-inline-end: 0;
    height: .5px;
    background: var(--separator);
}
a.hig-row, button.hig-row { width: 100%; border: 0; text-align: start; cursor: pointer; }
a.hig-row:hover, button.hig-row:hover, .hig-row-tap:hover { background: var(--fill-4); }
a.hig-row:active, button.hig-row:active { background: var(--fill-3); }

.hig-row-label { flex: 1 1 auto; min-width: 0; font-size: var(--f-control-lg); line-height: 20px; }
.hig-row-value {
    margin-inline-start: auto;
    color: var(--label-2);
    font-size: var(--f-control-lg);
    text-align: end;
    font-variant-numeric: tabular-nums;
}
.hig-row-detail { font-size: var(--f-footnote); line-height: var(--lh-footnote); color: var(--label-2); }
.hig-chevron { color: var(--label-3); font-size: 13px; flex: 0 0 auto; }
[dir="rtl"] .hig-chevron { transform: scaleX(-1); }

/* Leading rounded-square icon, as used in Settings rows. */
.hig-row-icon {
    width: 29px;
    height: 29px;
    flex: 0 0 29px;
    border-radius: var(--r-xs);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 15px;
    background: var(--gray);
}

/* ───────────────────────────────────────────────────────────────────────────
 * 7. CONTROLS
 * ─────────────────────────────────────────────────────────────────────────── */

/* ── Buttons ─────────────────────────────────────────────────────────────── */
.btn {
    --btn-bg: transparent;
    --btn-fg: var(--tint);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    border: 0;
    border-radius: var(--r-sm);
    padding: 7px 14px;
    min-height: 32px;
    font-family: inherit;
    font-size: var(--f-control-lg);
    line-height: 18px;
    letter-spacing: var(--tr-subhead);
    font-weight: 500;
    color: var(--btn-fg);
    background: var(--btn-bg);
    cursor: pointer;
    text-decoration: none;
    box-shadow: none;
    transition: background-color var(--dur-fast) var(--ease),
                opacity var(--dur-fast) var(--ease),
                transform var(--dur-fast) var(--ease-spring);
}
.btn:hover { color: var(--btn-fg); }
.btn:active { transform: scale(.97); }
.btn:disabled, .btn.disabled { opacity: .35; pointer-events: none; }
.btn i { font-size: 14px; line-height: 1; }

/* Filled (prominent) */
.btn-primary,
.btn-dark {
    --btn-bg: var(--tint);
    --btn-fg: var(--tint-contrast);
    font-weight: 600;
}
.btn-primary:hover, .btn-dark:hover { --btn-bg: var(--tint-hover); }

.btn-success { --btn-bg: var(--sys-green);  --btn-fg: #fff; font-weight: 600; }
.btn-danger  { --btn-bg: var(--sys-red);    --btn-fg: #fff; font-weight: 600; }
.btn-warning { --btn-bg: var(--accent);     --btn-fg: var(--brand-brown); font-weight: 600; }
.btn-info    { --btn-bg: var(--sys-purple); --btn-fg: #fff; font-weight: 600; }
.btn-secondary { --btn-bg: var(--fill-3); --btn-fg: var(--label); }

/* Tinted — HIG "gray/tinted" button: tint text on a tint-tinted fill. */
.btn-outline-primary   { --btn-bg: var(--fill-3); --btn-fg: var(--tint); }
.btn-outline-secondary { --btn-bg: var(--fill-3); --btn-fg: var(--label); }
.btn-outline-success   { --btn-bg: color-mix(in srgb, var(--sys-green) 12%, transparent);  --btn-fg: var(--sys-green); }
.btn-outline-danger    { --btn-bg: color-mix(in srgb, var(--sys-red) 12%, transparent);    --btn-fg: var(--sys-red); }
.btn-outline-warning   { --btn-bg: color-mix(in srgb, var(--accent) 18%, transparent);     --btn-fg: #8A5200; }
.btn-outline-info      { --btn-bg: color-mix(in srgb, var(--sys-purple) 12%, transparent); --btn-fg: var(--sys-purple); }
.btn-outline-primary:hover,
.btn-outline-secondary:hover { --btn-bg: var(--fill-2); }
.btn-outline-success:hover { --btn-bg: color-mix(in srgb, var(--sys-green) 20%, transparent); }
.btn-outline-danger:hover  { --btn-bg: color-mix(in srgb, var(--sys-red) 20%, transparent); }
.btn-outline-warning:hover { --btn-bg: color-mix(in srgb, var(--accent) 28%, transparent); }
.btn-outline-info:hover    { --btn-bg: color-mix(in srgb, var(--sys-purple) 20%, transparent); }

/* Plain — borderless toolbar button */
.btn-light, .btn-plain {
    --btn-bg: transparent;
    --btn-fg: var(--tint);
}
.btn-light:hover, .btn-plain:hover { --btn-bg: var(--fill-4); }
.btn-link { --btn-bg: transparent; --btn-fg: var(--tint); padding: 4px 6px; text-decoration: none; }
.btn-link:hover { --btn-bg: var(--fill-4); }

.btn-sm { padding: 4px 10px; min-height: 26px; font-size: var(--f-control); line-height: 16px; border-radius: var(--r-xs); }
.btn-sm i { font-size: 12px; }
.btn-lg { padding: 11px 20px; min-height: var(--hit); font-size: var(--f-body); border-radius: var(--r-md); }

/* Capsule variant, for prominent standalone calls to action. */
.btn-capsule { border-radius: var(--r-capsule); }

/* Icon-only button (toolbar glyph) */
.btn-icon {
    padding: 0;
    width: 30px;
    min-height: 30px;
    border-radius: var(--r-xs);
}
.btn-icon.btn-sm { width: 26px; min-height: 26px; }

.btn-group > .btn { border-radius: 0; }
.btn-group > .btn:first-child { border-start-start-radius: var(--r-sm); border-end-start-radius: var(--r-sm); }
.btn-group > .btn:last-child  { border-start-end-radius: var(--r-sm);   border-end-end-radius: var(--r-sm); }

/* ── Segmented control ───────────────────────────────────────────────────── */
.hig-segmented {
    display: inline-flex;
    align-items: center;
    padding: 2px;
    gap: 2px;
    background: var(--fill-4);
    border-radius: var(--r-sm);
}
.hig-segmented > * {
    appearance: none;
    border: 0;
    background: transparent;
    color: var(--label);
    font-family: inherit;
    font-size: var(--f-control);
    line-height: 16px;
    font-weight: 500;
    padding: 5px 12px;
    border-radius: var(--r-xs);
    cursor: pointer;
    text-decoration: none;
    white-space: nowrap;
    transition: background-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.hig-segmented > *:hover { background: var(--fill-4); }
.hig-segmented > .active,
.hig-segmented > [aria-selected="true"] {
    background: var(--bg);
    color: var(--label);
    box-shadow: 0 0 0 .5px rgba(38, 23, 15, .07), 0 1px 3px rgba(38, 23, 15, .10);
}

/* ── Switch (replaces checkbox where it toggles a setting) ───────────────── */
.form-switch .form-check-input,
.hig-switch {
    appearance: none;
    -webkit-appearance: none;
    width: 51px;
    height: 31px;
    flex: 0 0 51px;
    margin: 0;
    border: 0 !important;
    border-radius: var(--r-capsule);
    background: var(--fill-1);
    background-image: none !important;
    position: relative;
    cursor: pointer;
    transition: background-color var(--dur) var(--ease);
}
.form-switch .form-check-input::after,
.hig-switch::after {
    content: "";
    position: absolute;
    top: 2px;
    inset-inline-start: 2px;
    width: 27px;
    height: 27px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 3px 8px rgba(0, 0, 0, .15), 0 1px 1px rgba(0, 0, 0, .16);
    transition: transform var(--dur) var(--ease-out);
}
.form-switch .form-check-input:checked,
.hig-switch:checked { background: var(--sys-green) !important; }
.form-switch .form-check-input:checked::after,
.hig-switch:checked::after { transform: translateX(20px); }
[dir="rtl"] .form-switch .form-check-input:checked::after,
[dir="rtl"] .hig-switch:checked::after { transform: translateX(-20px); }
.form-switch { padding-inline-start: 0; display: flex; align-items: center; gap: var(--sp-3); min-height: var(--hit); }
.form-switch .form-check-label { order: -1; flex: 1 1 auto; font-size: var(--f-control-lg); color: var(--label); }

/* ── Checkbox / radio (kept for multi-select lists) ──────────────────────── */
.form-check-input {
    width: 20px;
    height: 20px;
    margin-top: 0;
    border: 1.5px solid var(--label-3);
    background-color: transparent;
    border-radius: var(--r-xs);
    transition: background-color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.form-check-input[type="radio"] { border-radius: 50%; }
.form-check-input:checked {
    background-color: var(--tint);
    border-color: var(--tint);
}
.form-check-input:focus { box-shadow: 0 0 0 3.5px color-mix(in srgb, var(--tint) 30%, transparent); border-color: var(--tint); }
.form-check-label { font-size: var(--f-control-lg); color: var(--label); }

/* ── Text fields ─────────────────────────────────────────────────────────── */
.form-control, .form-select {
    font-family: inherit;
    font-size: var(--f-control-lg);
    line-height: 20px;
    letter-spacing: var(--tr-subhead);
    color: var(--label);
    background-color: var(--bg);
    border: .5px solid var(--separator-op);
    border-radius: var(--r-sm);
    padding: 7px 11px;
    min-height: 34px;
    box-shadow: none;
    transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
.form-control::placeholder { color: var(--label-3); opacity: 1; }
.form-control:focus, .form-select:focus {
    color: var(--label);
    background-color: var(--bg);
    border-color: var(--tint);
    box-shadow: 0 0 0 3.5px color-mix(in srgb, var(--tint) 24%, transparent);
    outline: none;
}
.form-control:disabled, .form-select:disabled { background-color: var(--fill-4); color: var(--label-3); }
.form-control-sm, .form-select-sm { font-size: var(--f-control); min-height: 28px; padding: 4px 9px; border-radius: var(--r-xs); }
.form-select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%238A7365'%3E%3Cpath d='M4.5 6.5 8 10l3.5-3.5'  stroke='%238A7365' stroke-width='1.6' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-size: 15px 15px;
    padding-inline-end: 30px;
}
.form-label {
    font-size: var(--f-footnote);
    line-height: var(--lh-footnote);
    letter-spacing: var(--tr-footnote);
    font-weight: 400;
    color: var(--label-2);
    margin-bottom: var(--sp-1);
}
.form-text { font-size: var(--f-footnote); color: var(--label-2); }
.input-group-text {
    background: var(--fill-4);
    border: .5px solid var(--separator-op);
    color: var(--label-2);
    font-size: var(--f-control);
    border-radius: var(--r-sm);
}
textarea.form-control { min-height: 84px; }

/* Search field — HIG capsule with a leading glyph. */
.hig-search {
    display: flex;
    align-items: center;
    gap: 6px;
    background: var(--fill-4);
    border-radius: var(--r-sm);
    padding: 0 10px;
    min-height: 32px;
}
.hig-search i { color: var(--label-3); font-size: 14px; }
.hig-search input {
    flex: 1 1 auto;
    border: 0;
    background: transparent;
    font-family: inherit;
    font-size: var(--f-control-lg);
    color: var(--label);
    min-width: 0;
    padding: 6px 0;
}
.hig-search input:focus { outline: none; }
.hig-search input::placeholder { color: var(--label-3); }
.hig-search:focus-within { box-shadow: 0 0 0 3.5px color-mix(in srgb, var(--tint) 24%, transparent); }

/* ───────────────────────────────────────────────────────────────────────────
 * 8. TABLES — presented as HIG lists
 * ─────────────────────────────────────────────────────────────────────────── */
.table {
    color: var(--label);
    font-size: var(--f-control-lg);
    margin: 0;
    border-color: var(--separator);
    --bs-table-bg: transparent;
    --bs-table-color: var(--label);
}
.table > :not(caption) > * > * {
    padding: 10px var(--sp-4);
    background: transparent;
    border-bottom: .5px solid var(--separator);
    box-shadow: none;
    vertical-align: middle;
}
.table thead th {
    background: transparent;
    color: var(--label-2);
    font-size: var(--f-footnote);
    line-height: var(--lh-footnote);
    letter-spacing: var(--tr-footnote);
    font-weight: 500;
    text-transform: none;
    border-bottom: .5px solid var(--separator);
    white-space: nowrap;
}
.table > tbody > tr:last-child > * { border-bottom: 0; }
.table-hover > tbody > tr:hover > * { background: var(--fill-4); }
.table-light, .table-light th, .table-light td {
    background: transparent;
    color: var(--label-2);
}
.table-responsive { border-radius: inherit; }

/* ───────────────────────────────────────────────────────────────────────────
 * 9. BADGES & STATUS
 * ─────────────────────────────────────────────────────────────────────────── */
.badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 9px;
    border: 0;
    border-radius: var(--r-capsule);
    font-size: var(--f-caption-1);
    line-height: 15px;
    font-weight: 600;
    letter-spacing: 0;
    white-space: nowrap;
}

/* Status hues are brand contract — colours unchanged, shape/weight modernised. */
.badge-status-ready      { background: rgba(255, 166, 41, .16);  color: #8A5200; }
.badge-status-assigned   { background: rgba(8, 145, 178, .13);   color: #0E7490; }
.badge-status-on_the_way { background: rgba(37, 99, 235, .13);   color: #1D4ED8; }
.badge-status-delivered  { background: rgba(30, 122, 50, .14);   color: #166534; }
.badge-status-problem    { background: rgba(193, 39, 45, .13);   color: #B91C1C; }
.badge-status-cancelled  { background: rgba(138, 115, 101, .16); color: #6B5647; }
.badge-status-returned   { background: rgba(75, 30, 168, .12);   color: #4B1EA8; }

.badge-rider-online     { background: rgba(30, 122, 50, .14);   color: #166534; }
.badge-rider-available  { background: rgba(13, 148, 136, .14);  color: #0F766E; }
.badge-rider-offline    { background: rgba(138, 115, 101, .16); color: #6B5647; }
.badge-rider-in_transit { background: rgba(37, 99, 235, .13);   color: #1D4ED8; }
.badge-rider-preparing  { background: rgba(255, 166, 41, .16);  color: #8A5200; }
.badge-rider-returning  { background: rgba(234, 88, 12, .13);   color: #C2410C; }

.bg-success { background: color-mix(in srgb, var(--sys-green) 14%, transparent) !important; color: var(--sys-green) !important; }
.bg-danger  { background: color-mix(in srgb, var(--sys-red) 14%, transparent) !important;   color: var(--sys-red) !important; }
.bg-warning { background: color-mix(in srgb, var(--accent) 20%, transparent) !important;    color: #8A5200 !important; }
.bg-primary { background: var(--tint) !important; color: var(--tint-contrast) !important; }
.bg-secondary { background: var(--fill-3) !important; color: var(--label-2) !important; }

/* Live status dot */
.hig-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex: 0 0 8px;
    background: var(--gray);
    display: inline-block;
}
.hig-dot-live { background: var(--sys-green); box-shadow: 0 0 0 0 color-mix(in srgb, var(--sys-green) 60%, transparent); animation: hig-pulse 2s var(--ease) infinite; }
@keyframes hig-pulse {
    70%  { box-shadow: 0 0 0 7px transparent; }
    100% { box-shadow: 0 0 0 0 transparent; }
}

/* ───────────────────────────────────────────────────────────────────────────
 * 10. STAT TILES (dashboard)
 * ─────────────────────────────────────────────────────────────────────────── */
.hig-stat {
    background: var(--bg-grouped-2);
    border-radius: var(--r-md);
    box-shadow: var(--shadow-1);
    padding: var(--sp-4);
    display: flex;
    flex-direction: column;
    gap: var(--sp-1);
    height: 100%;
    transition: transform var(--dur-fast) var(--ease-spring);
}
a.hig-stat:hover { transform: translateY(-1px); }
.hig-stat-head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); }
.hig-stat-label {
    font-size: var(--f-footnote);
    line-height: var(--lh-footnote);
    letter-spacing: var(--tr-footnote);
    color: var(--label-2);
    text-transform: none;
    font-weight: 400;
}
.hig-stat-value {
    font-size: var(--f-title-1);
    line-height: var(--lh-title-1);
    letter-spacing: var(--tr-title-1);
    font-weight: 700;
    color: var(--label);
    font-variant-numeric: tabular-nums;
}
.hig-stat-glyph {
    width: 26px;
    height: 26px;
    flex: 0 0 26px;
    border-radius: var(--r-xs);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    background: var(--fill-4);
    color: var(--label-2);
}
.hig-stat-caption { font-size: var(--f-caption-1); color: var(--label-2); }

/* ───────────────────────────────────────────────────────────────────────────
 * 11. BOOTSTRAP BRIDGE — cards, alerts, menus, modals, pagination
 * ─────────────────────────────────────────────────────────────────────────── */
.card {
    background: var(--bg-grouped-2);
    border: 0;
    border-radius: var(--r-md);
    box-shadow: var(--shadow-1);
    color: var(--label);
}
/* HIG containers do not lift on hover. */
.card:hover { box-shadow: var(--shadow-1); }
.card-header {
    background: transparent;
    border-bottom: .5px solid var(--separator);
    border-radius: var(--r-md) var(--r-md) 0 0;
    padding: var(--sp-3) var(--sp-4);
    color: var(--label);
    font-size: var(--f-callout);
    font-weight: 600;
    letter-spacing: var(--tr-callout);
}
.card-body { padding: var(--sp-4); color: var(--label); }
.card-footer { background: transparent; border-top: .5px solid var(--separator); padding: var(--sp-3) var(--sp-4); }
.card-title { font-size: var(--f-callout); font-weight: 600; color: var(--label); }

/* Alerts — HIG inline notice: tinted fill, no rule, glyph + text. */
.alert {
    border: 0;
    border-radius: var(--r-md);
    padding: var(--sp-3) var(--sp-4);
    font-size: var(--f-control-lg);
    line-height: 20px;
    display: flex;
    align-items: flex-start;
    gap: var(--sp-2);
}
.alert-success { background: color-mix(in srgb, var(--sys-green) 12%, transparent); color: #14532D; }
.alert-danger  { background: color-mix(in srgb, var(--sys-red) 12%, transparent);   color: #7F1D1D; }
.alert-warning { background: color-mix(in srgb, var(--accent) 20%, transparent);    color: #7A4600; }
.alert-info    { background: var(--fill-3); color: var(--label); }
.alert .btn-close { margin-inline-start: auto; }

/* Menus — HIG popover: 10pt radius, hairline, vibrancy, inset rows. */
.dropdown-menu {
    background: var(--material-thick);
    -webkit-backdrop-filter: var(--material-blur);
    backdrop-filter: var(--material-blur);
    border: .5px solid var(--separator);
    border-radius: var(--r-md);
    box-shadow: var(--shadow-2);
    padding: var(--sp-1);
    min-width: 200px;
    font-size: var(--f-control-lg);
}
.dropdown-item {
    color: var(--label);
    border-radius: var(--r-xs);
    padding: 6px 10px;
    font-size: var(--f-control-lg);
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    cursor: pointer;
}
.dropdown-item:hover, .dropdown-item:focus { background: var(--tint); color: var(--tint-contrast); }
.dropdown-item.text-danger { color: var(--sys-red) !important; }
.dropdown-item.text-danger:hover { background: var(--sys-red); color: #fff !important; }
.dropdown-divider { border-top: .5px solid var(--separator); margin: var(--sp-1) 0; opacity: 1; }
.dropdown-item-text { color: var(--label-2); padding: 6px 10px; font-size: var(--f-footnote); }
.dropdown-toggle::after { display: none; }

/* Modals — HIG sheet: 16pt radius, heavy scrim blur, centred. */
.modal-content {
    background: var(--bg-grouped-2);
    border: 0;
    border-radius: var(--r-xl);
    box-shadow: var(--shadow-3);
    color: var(--label);
    overflow: hidden;
}
.modal-header {
    border-bottom: .5px solid var(--separator);
    padding: var(--sp-4);
}
.modal-title {
    color: var(--label);
    font-size: var(--f-headline);
    line-height: var(--lh-headline);
    letter-spacing: var(--tr-headline);
    font-weight: 600;
}
.modal-body { padding: var(--sp-4); }
.modal-footer { border-top: .5px solid var(--separator); padding: var(--sp-3) var(--sp-4); gap: var(--sp-2); }
.modal-backdrop.show { opacity: 1; background: rgba(26, 13, 7, .32); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.btn-close { opacity: .4; transition: opacity var(--dur-fast) var(--ease); }
.btn-close:hover { opacity: .8; }

/* Offcanvas */
.offcanvas {
    background: var(--bg-grouped-2);
    border: 0;
    box-shadow: var(--shadow-3);
}
.offcanvas-header { border-bottom: .5px solid var(--separator); color: var(--label); padding: var(--sp-4); }

/* Pagination */
.pagination { gap: var(--sp-1); }
.page-link {
    background: transparent;
    border: 0;
    color: var(--tint);
    border-radius: var(--r-xs);
    padding: 5px 11px;
    font-size: var(--f-control-lg);
    min-width: 32px;
    text-align: center;
}
.page-link:hover { background: var(--fill-4); color: var(--tint); }
.page-item.active .page-link { background: var(--tint); color: var(--tint-contrast); font-weight: 600; }
.page-item.disabled .page-link { color: var(--label-3); background: transparent; }

/* Progress */
.progress { background: var(--fill-3); border-radius: var(--r-capsule); height: 6px; }
.progress-bar { background: var(--tint); border-radius: var(--r-capsule); }

/* Spinners — HIG activity indicator reads in the secondary label colour. */
.spinner-border, .spinner-grow { color: var(--label-3); }

/* Tooltips / popovers */
.tooltip-inner {
    background: var(--material-thick);
    -webkit-backdrop-filter: var(--material-blur);
    backdrop-filter: var(--material-blur);
    color: var(--label);
    border-radius: var(--r-sm);
    box-shadow: var(--shadow-2);
    font-size: var(--f-footnote);
    padding: 6px 10px;
}
.tooltip .tooltip-arrow::before { display: none; }
.tooltip { opacity: 1 !important; }
.popover {
    background: var(--material-thick);
    -webkit-backdrop-filter: var(--material-blur);
    backdrop-filter: var(--material-blur);
    border: .5px solid var(--separator);
    border-radius: var(--r-md);
    box-shadow: var(--shadow-2);
}
.popover-header { background: transparent; border-bottom: .5px solid var(--separator); font-size: var(--f-control-lg); font-weight: 600; color: var(--label); }
.popover-body { color: var(--label); font-size: var(--f-control-lg); }

/* Nav tabs — rendered as a segmented control. */
.nav-tabs {
    border: 0;
    gap: 2px;
    padding: 2px;
    background: var(--fill-4);
    border-radius: var(--r-sm);
    display: inline-flex;
}
.nav-tabs .nav-link {
    border: 0;
    border-radius: var(--r-xs);
    color: var(--label);
    font-size: var(--f-control);
    font-weight: 500;
    padding: 5px 12px;
}
.nav-tabs .nav-link:hover { background: var(--fill-4); }
.nav-tabs .nav-link.active {
    background: var(--bg);
    color: var(--label);
    box-shadow: 0 0 0 .5px rgba(38, 23, 15, .07), 0 1px 3px rgba(38, 23, 15, .10);
}

/* Semantic text helpers */
.text-muted   { color: var(--label-2) !important; }
.text-primary { color: var(--tint) !important; }
.text-success { color: var(--sys-green) !important; }
.text-danger  { color: var(--sys-red) !important; }
.text-warning { color: #8A5200 !important; }
.text-info    { color: var(--sys-purple) !important; }
.small, small { font-size: var(--f-footnote); }

/* ───────────────────────────────────────────────────────────────────────────
 * 12. TOOLBAR ACCESSORIES
 * ─────────────────────────────────────────────────────────────────────────── */
.lang-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 30px;
    padding: 4px 9px;
    border: 0;
    border-radius: var(--r-xs);
    font-size: var(--f-control);
    font-weight: 500;
    color: var(--label-2);
    background: transparent;
    cursor: pointer;
    text-decoration: none;
    transition: background-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.lang-btn:hover { background: var(--fill-4); color: var(--label); }
.lang-btn.active { background: var(--bg); color: var(--label); box-shadow: 0 0 0 .5px rgba(38, 23, 15, .07), 0 1px 3px rgba(38, 23, 15, .10); }

.user-avatar {
    width: 24px;
    height: 24px;
    flex: 0 0 24px;
    border-radius: 50%;
    background: var(--tint);
    color: var(--tint-contrast);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: var(--f-caption-2);
    font-weight: 600;
    letter-spacing: 0;
}

/* ───────────────────────────────────────────────────────────────────────────
 * 13. EMPTY STATE
 * ─────────────────────────────────────────────────────────────────────────── */
.hig-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: var(--sp-2);
    padding: var(--sp-10) var(--sp-4);
    color: var(--label-2);
}
.hig-empty i { font-size: 38px; color: var(--label-3); }
.hig-empty-title {
    font-size: var(--f-headline);
    line-height: var(--lh-headline);
    letter-spacing: var(--tr-headline);
    font-weight: 600;
    color: var(--label);
}
.hig-empty-text { font-size: var(--f-subhead); color: var(--label-2); max-width: 32ch; }

/* ───────────────────────────────────────────────────────────────────────────
 * 14. RESPONSIVE — iPad / iPhone idiom
 * ─────────────────────────────────────────────────────────────────────────── */
.hig-scrim {
    position: fixed;
    inset: 0;
    z-index: 1035;
    background: rgba(26, 13, 7, .28);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--dur) var(--ease);
}
.hig-scrim.show { opacity: 1; pointer-events: auto; }

@media (max-width: 991.98px) {
    :root { --margin: 16px; }
    #sidebar { transform: translateX(-100%); box-shadow: var(--shadow-3); }
    [dir="rtl"] #sidebar { transform: translateX(100%); }
    #sidebar.show, [dir="rtl"] #sidebar.show { transform: translateX(0); }
    #topbar { inset-inline-start: 0; }
    #main { margin-inline-start: 0; }
    /* Touch targets grow to the 44pt minimum on touch idioms. */
    .btn { min-height: 36px; }
    .btn-sm { min-height: 32px; }
    #sidebar .nav-link { min-height: var(--hit); padding-top: 10px; padding-bottom: 10px; }
}

@media (max-width: 575.98px) {
    .hig-page-header h1, .hig-page-title { font-size: var(--f-title-1); line-height: var(--lh-title-1); }
}

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

/* ───────────────────────────────────────────────────────────────────────────
 * 15. PRINT
 * ─────────────────────────────────────────────────────────────────────────── */
@media print {
    #sidebar, #topbar, .hig-page-actions, .btn { display: none !important; }
    #main { margin: 0; padding: 0; }
    .hig-group, .card { box-shadow: none; border: .5px solid var(--separator); }
}

/* ───────────────────────────────────────────────────────────────────────────
 * 16. GROUPED-LIST FORM ROWS (the iOS/macOS Settings pattern)
 *
 * A settings row states its label on the leading edge and its editable value
 * on the trailing edge. The control itself is chromeless — the row separator
 * is the only structure — so a screen of settings reads as a list, not a form.
 * ─────────────────────────────────────────────────────────────────────────── */
.hig-row-form {
    align-items: flex-start;
    flex-wrap: wrap;
    padding-block: 10px;
}
.hig-row-form > .hig-row-label {
    flex: 0 1 auto;
    padding-top: 5px;
    font-size: var(--f-control-lg);
    color: var(--label);
}

.hig-field {
    flex: 1 1 200px;
    min-width: 0;
    max-width: 62%;
    margin-inline-start: auto;
    border: 0;
    background: transparent;
    color: var(--tint);
    font-family: inherit;
    font-size: var(--f-control-lg);
    line-height: 20px;
    text-align: end;
    padding: 5px 0;
    border-radius: var(--r-xs);
    transition: background-color var(--dur-fast) var(--ease);
}
.hig-field::placeholder { color: var(--label-3); }
.hig-field:hover:not(:disabled) { background: var(--fill-4); }
.hig-field:focus {
    outline: none;
    background: var(--fill-4);
    box-shadow: 0 0 0 3.5px color-mix(in srgb, var(--tint) 24%, transparent);
}
.hig-field:disabled { color: var(--label-3); }

select.hig-field {
    appearance: none;
    -webkit-appearance: none;
    cursor: pointer;
    padding-inline-end: 18px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.5 6.5 8 10l3.5-3.5' stroke='%23C4B5A9' stroke-width='1.7' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-size: 14px 14px;
    background-position: right 0 center;
    direction: inherit;
}
[dir="rtl"] select.hig-field { background-position: left 0 center; }
select.hig-field option { color: var(--label); background: var(--bg); direction: initial; text-align: start; }

textarea.hig-field { text-align: start; min-height: 60px; resize: vertical; flex-basis: 100%; max-width: 100%; }

/* Helper / validation text under a row's label. */
.hig-row-help {
    flex-basis: 100%;
    font-size: var(--f-footnote);
    line-height: var(--lh-footnote);
    color: var(--label-2);
    margin-top: 2px;
}
.hig-row-help.is-error { color: var(--sys-red); }

/* Colour well — a swatch that opens the native picker. */
.hig-color {
    inline-size: 34px;
    block-size: 34px;
    padding: 0;
    border: .5px solid var(--separator);
    border-radius: var(--r-sm);
    background: transparent;
    cursor: pointer;
    flex: 0 0 auto;
    margin-inline-start: auto;
}
.hig-color::-webkit-color-swatch-wrapper { padding: 3px; }
.hig-color::-webkit-color-swatch { border: 0; border-radius: 5px; }
.hig-color::-moz-color-swatch { border: 0; border-radius: 5px; }

/* Bootstrap validation, restated in HIG terms. */
.form-control.is-invalid, .form-select.is-invalid {
    border-color: var(--sys-red);
    background-image: none;
}
.form-control.is-invalid:focus, .form-select.is-invalid:focus {
    box-shadow: 0 0 0 3.5px color-mix(in srgb, var(--sys-red) 24%, transparent);
}
.invalid-feedback {
    font-size: var(--f-footnote);
    line-height: var(--lh-footnote);
    color: var(--sys-red);
}

/* ───────────────────────────────────────────────────────────────────────────
 * 17. TOOLBAR / FILTER BAR
 * ─────────────────────────────────────────────────────────────────────────── */
.hig-toolbar {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    flex-wrap: wrap;
    padding: var(--sp-3) var(--sp-4);
    background: var(--bg-grouped-2);
    border-radius: var(--r-md);
    box-shadow: var(--shadow-1);
}
.hig-toolbar .form-control,
.hig-toolbar .form-select { width: auto; }

.count-pill {
    font-size: var(--f-caption-1);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--label-2);
    background: var(--fill-3);
    border-radius: var(--r-capsule);
    padding: 1px 8px;
}

.live-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: var(--f-footnote);
    font-weight: 500;
    color: var(--label-2);
    background: var(--fill-4);
    border-radius: var(--r-capsule);
    padding: 3px 10px;
}

/* ───────────────────────────────────────────────────────────────────────────
 * 18. LEAFLET — map chrome restated as HIG popovers and controls
 * ─────────────────────────────────────────────────────────────────────────── */
.leaflet-popup-content-wrapper {
    border-radius: var(--r-md);
    box-shadow: var(--shadow-2);
    background: var(--material-thick);
    -webkit-backdrop-filter: var(--material-blur);
    backdrop-filter: var(--material-blur);
    color: var(--label);
}
.leaflet-popup-content { margin: 12px 14px; font-family: var(--font); font-size: var(--f-control-lg); }
.leaflet-popup-tip { background: var(--material-thick); }
.leaflet-bar {
    border: 0 !important;
    border-radius: var(--r-sm) !important;
    box-shadow: var(--shadow-2) !important;
    overflow: hidden;
}
.leaflet-bar a {
    background: var(--material-thick);
    color: var(--label) !important;
    border-bottom: .5px solid var(--separator) !important;
}
.leaflet-bar a:hover { background: var(--fill-3); }
.leaflet-control-attribution {
    font-size: var(--f-caption-2);
    background: var(--material-thin) !important;
    color: var(--label-2);
}