/*
  AdvEntLite design system. MudBlazor supplies the components and the palette (--mud-palette-*); this file adds the
  app's own layout pieces: page shell, hero header, tiles, KPI cards, bottom navigation, sticky action bars, PIN pad,
  scan bar and list rows. Everything respects the phone's safe areas (notch, gesture bar).
*/

:root {
    --ael-brand-navy: #022C78;
    --ael-pos: #0D47A1;
    --ael-retail: #3949AB;
    --ael-ai: #7C4DFF;
    --ael-radius: 16px;
    --ael-radius-sm: 12px;
    --ael-gap: 12px;
    --ael-page-max: 760px;
    --ael-bottom-nav-height: 64px;
    --ael-safe-top: env(safe-area-inset-top, 0px);
    --ael-safe-bottom: env(safe-area-inset-bottom, 0px);
    --ael-shadow: 0 1px 2px rgba(15, 23, 42, .06), 0 4px 16px rgba(15, 23, 42, .06);
    --ael-shadow-strong: 0 10px 30px rgba(2, 44, 120, .18);
}

html, body {
    height: 100%;
    margin: 0;
    overscroll-behavior-y: none;
    -webkit-tap-highlight-color: transparent;
    /* iOS enlarges text in wide blocks (a report table's long ITEMS column came out in a bigger font); the app sizes
       its own text. */
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    background: var(--mud-palette-background);
}

#app { min-height: 100%; }

/* The app draws under the phone's status bar (edge to edge), whose icons are light: a dark strip behind them keeps them
   readable over white app bars and over content scrolled under a hero header. No strip where there is no inset. */
body::before {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: var(--ael-safe-top);
    background: var(--ael-brand-navy);
    z-index: 1350;
    pointer-events: none;
    /* Follows iOS's pan for the keyboard (--ael-pan, adventlite.js). */
    transform: translateY(var(--ael-pan, 0px));
}

/* ---- Page shell -------------------------------------------------------------------------------------------- */

.ael-page {
    max-width: var(--ael-page-max);
    margin: 0 auto;
    padding: 12px 16px calc(var(--ael-bottom-nav-height) + 24px + var(--ael-safe-bottom));
    box-sizing: border-box;
}

.ael-page.no-bottom-nav { padding-bottom: calc(96px + var(--ael-safe-bottom)); }

.ael-appbar {
    position: sticky;
    /* Stays in view while iOS pans the page up for the keyboard (--ael-pan, adventlite.js). */
    top: var(--ael-pan, 0px);
    z-index: 1100;
    padding-top: var(--ael-safe-top);
    background: var(--mud-palette-appbar-background);
    color: var(--mud-palette-appbar-text);
    border-bottom: 1px solid var(--mud-palette-lines-default);
}

.ael-appbar-inner {
    display: flex;
    align-items: center;
    gap: 4px;
    min-height: 56px;
    max-width: var(--ael-page-max);
    margin: 0 auto;
    padding: 0 8px;
}

.ael-appbar-title {
    flex: 1;
    min-width: 0;
    font-weight: 700;
    font-size: 1.1rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ael-appbar-subtitle {
    display: block;
    font-weight: 500;
    font-size: .75rem;
    opacity: .7;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ael-busy-bar {
    position: fixed;
    top: calc(var(--ael-safe-top) + var(--ael-pan, 0px));
    left: 0;
    right: 0;
    z-index: 1400;
}

/* ---- Hero header (dashboard, sign-in) ------------------------------------------------------------------------ */

.ael-hero {
    position: relative;
    color: #fff;
    padding: calc(20px + var(--ael-safe-top)) 20px 64px;
    background:
        radial-gradient(1200px 400px at 100% -20%, rgba(255, 255, 255, .18), transparent 60%),
        linear-gradient(135deg, var(--ael-brand-navy) 0%, var(--mud-palette-primary) 100%);
    border-radius: 0 0 28px 28px;
    overflow: hidden;
}

/* The content sits above the decorative emblem, which never takes taps (it covers the header's buttons). */
.ael-hero .ael-hero-inner { max-width: var(--ael-page-max); margin: 0 auto; position: relative; z-index: 1; }

/* The ae emblem as a faint watermark in the bottom-right corner, clear of the cards that overlap the header's last
   48px; the mask cuts its shape out of the white. */
.ael-hero::after {
    content: "";
    pointer-events: none;
    position: absolute;
    right: -24px;
    bottom: 44px;
    width: 200px;
    height: 130px;
    background: rgba(255, 255, 255, .06);
    -webkit-mask: url("../images/ae-emblem.svg") no-repeat center / contain;
    mask: url("../images/ae-emblem.svg") no-repeat center / contain;
}

/* A header with nothing over its lower edge and a single row of content (the store list). */
.ael-hero.compact::after { right: -16px; bottom: 12px; width: 129px; height: 84px; }

/* The content under a hero header. Like .ael-page it ends with room for the bottom navigation, so the last row can
   scroll above it (pages without the navigation set their own bottom padding). */
.ael-hero-overlap {
    max-width: var(--ael-page-max);
    margin: -48px auto 0;
    padding: 0 16px calc(var(--ael-bottom-nav-height) + 24px + var(--ael-safe-bottom));
    position: relative;
    z-index: 2;
}

.ael-greeting { font-size: .9rem; opacity: .85; }
.ael-hero-title { font-size: 1.35rem; font-weight: 800; line-height: 1.25; margin: 2px 0 0; }
.ael-hero-meta { font-size: .8rem; opacity: .8; margin-top: 4px; }

.ael-chip-light {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .16);
    color: #fff;
    font-size: .75rem;
    font-weight: 600;
    /* No backdrop-filter: the suspected cause of the Home chips vanishing on iOS (a WebKit repaint fault) after the
       refresh spinner ran beside them, until the page was opened again. Over the smooth gradient a blur showed nothing. */
}

/* ---- Cards, KPIs --------------------------------------------------------------------------------------------- */

.ael-card {
    background: var(--mud-palette-surface);
    border-radius: var(--ael-radius);
    box-shadow: var(--ael-shadow);
    border: 1px solid var(--mud-palette-lines-default);
    padding: 16px;
}

.ael-card + .ael-card { margin-top: var(--ael-gap); }

.ael-card-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    font-weight: 700;
    margin-bottom: 8px;
}

.ael-kpis {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--ael-gap);
}

@media (min-width: 600px) {
    .ael-kpis { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.ael-kpi {
    background: var(--mud-palette-surface);
    border-radius: var(--ael-radius);
    box-shadow: var(--ael-shadow);
    border: 1px solid var(--mud-palette-lines-default);
    padding: 14px;
    min-width: 0;
}

.ael-kpi-label { font-size: .75rem; color: var(--mud-palette-text-secondary); font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }
.ael-kpi-value { font-size: 1.35rem; font-weight: 800; margin-top: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* A phone's half-width tile fits about ten characters at full size ("$2,559,520.…" lost its end); wide tiles keep it. */
.ael-kpi { container-type: inline-size; }
@container (max-width: 220px) {
    .ael-kpi-value.long { font-size: 1.1rem; }
    .ael-kpi-value.longer { font-size: .95rem; }
}
.ael-kpi-note { font-size: .75rem; color: var(--mud-palette-text-secondary); margin-top: 2px; }
.ael-kpi.primary { background: linear-gradient(135deg, var(--mud-palette-primary), var(--ael-brand-navy)); color: #fff; border: none; }
.ael-kpi.primary .ael-kpi-label, .ael-kpi.primary .ael-kpi-note { color: rgba(255, 255, 255, .8); }

/* ---- Action tiles ------------------------------------------------------------------------------------------ */

.ael-section-title {
    font-size: .8rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--mud-palette-text-secondary);
    margin: 20px 4px 10px;
}

.ael-tiles {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--ael-gap);
}

@media (min-width: 600px) {
    .ael-tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.ael-tile {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 96px;
    padding: 12px 6px;
    border-radius: var(--ael-radius);
    background: var(--mud-palette-surface);
    border: 1px solid var(--mud-palette-lines-default);
    box-shadow: var(--ael-shadow);
    color: var(--mud-palette-text-primary);
    text-align: center;
    font-size: .8rem;
    font-weight: 600;
    line-height: 1.2;
    cursor: pointer;
    user-select: none;
    transition: transform .12s ease, box-shadow .12s ease;
    position: relative;
}

.ael-tile:active { transform: scale(.97); }
.ael-tile:hover { box-shadow: var(--ael-shadow-strong); }

.ael-tile-icon {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: 14px;
    background: color-mix(in srgb, var(--ael-tile-color, var(--mud-palette-primary)) 12%, transparent);
    color: var(--ael-tile-color, var(--mud-palette-primary));
}

.ael-tile-badge {
    position: absolute;
    top: 8px;
    right: 8px;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    border-radius: 999px;
    background: var(--mud-palette-error);
    color: #fff;
    font-size: .7rem;
    font-weight: 700;
    display: grid;
    place-items: center;
}

/* ---- Lists --------------------------------------------------------------------------------------------------- */

.ael-list {
    background: var(--mud-palette-surface);
    border-radius: var(--ael-radius);
    border: 1px solid var(--mud-palette-lines-default);
    box-shadow: var(--ael-shadow);
    overflow: hidden;
}

.ael-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    min-height: 56px;
    border-bottom: 1px solid var(--mud-palette-lines-default);
    cursor: pointer;
}

.ael-row:last-child { border-bottom: none; }
.ael-row:active { background: var(--mud-palette-action-default-hover); }
.ael-row-main { flex: 1; min-width: 0; }
.ael-row-title { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ael-row-sub { font-size: .8rem; color: var(--mud-palette-text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ael-row-end { text-align: right; flex-shrink: 0; }
.ael-row-avatar {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    display: grid;
    place-items: center;
    flex-shrink: 0;
    background: color-mix(in srgb, var(--mud-palette-primary) 10%, transparent);
    color: var(--mud-palette-primary);
    font-weight: 700;
}

/* ---- Bottom navigation ------------------------------------------------------------------------------------- */

.ael-bottom-nav {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1200;
    display: flex;
    justify-content: space-around;
    align-items: stretch;
    height: calc(var(--ael-bottom-nav-height) + var(--ael-safe-bottom));
    padding-bottom: var(--ael-safe-bottom);
    /* Solid, without backdrop-filter (it was 92% opaque and blurred): the suspected cause of iOS WebKit leaving parts of
       a page unpainted (More half blank after a Safari view closed; see .ael-chip-light). */
    background: var(--mud-palette-surface);
    border-top: 1px solid var(--mud-palette-lines-default);
}

.ael-nav-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    font-size: .7rem;
    font-weight: 600;
    color: var(--mud-palette-text-secondary);
    text-decoration: none;
    cursor: pointer;
    user-select: none;
}

.ael-nav-item.active { color: var(--mud-palette-primary); }
.ael-nav-item .ael-nav-pill { padding: 2px 16px; border-radius: 999px; }
.ael-nav-item.active .ael-nav-pill { background: color-mix(in srgb, var(--mud-palette-primary) 14%, transparent); }

.ael-nav-scan {
    width: 56px;
    height: 56px;
    margin-top: -22px;
    border-radius: 18px;
    display: grid;
    place-items: center;
    color: #fff;
    background: linear-gradient(135deg, var(--mud-palette-primary), var(--ael-brand-navy));
    box-shadow: var(--ael-shadow-strong);
}

/* ---- Sticky action bar (forms) ------------------------------------------------------------------------------ */

.ael-actions {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1150;
    padding: 12px 16px calc(12px + var(--ael-safe-bottom));
    background: var(--mud-palette-surface);
    border-top: 1px solid var(--mud-palette-lines-default);
    box-shadow: 0 -6px 18px rgba(15, 23, 42, .06);
}

.ael-actions-inner { max-width: var(--ael-page-max); margin: 0 auto; display: flex; gap: 10px; }
.ael-actions-inner > * { flex: 1; }

/* ---- PIN pad ------------------------------------------------------------------------------------------------ */

.ael-pin-dots { display: flex; justify-content: center; gap: 14px; margin: 12px 0 20px; }
.ael-pin-dot { width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--mud-palette-primary); transition: background .1s; }
.ael-pin-dot.filled { background: var(--mud-palette-primary); }

.ael-pinpad {
    display: grid;
    grid-template-columns: repeat(3, 72px);
    gap: 14px 24px;
    justify-content: center;
}

.ael-pin-key {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    border: 1px solid var(--mud-palette-lines-default);
    background: var(--mud-palette-surface);
    color: var(--mud-palette-text-primary);
    font-size: 1.6rem;
    font-weight: 600;
    display: grid;
    place-items: center;
    cursor: pointer;
    user-select: none;
    box-shadow: var(--ael-shadow);
}

.ael-pin-key:active { background: color-mix(in srgb, var(--mud-palette-primary) 16%, var(--mud-palette-surface)); }
.ael-pin-key.ghost { border: none; box-shadow: none; background: transparent; font-size: 1rem; }

/* ---- Sign-in screens ---------------------------------------------------------------------------------------- */

.ael-auth {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background:
        radial-gradient(900px 500px at 110% -10%, color-mix(in srgb, var(--mud-palette-primary) 35%, transparent), transparent 60%),
        linear-gradient(180deg, var(--ael-brand-navy) 0%, color-mix(in srgb, var(--ael-brand-navy) 70%, var(--mud-palette-primary)) 45%, var(--mud-palette-background) 45.1%);
}

.ael-auth-head { color: #fff; text-align: center; padding: calc(36px + var(--ael-safe-top)) 24px 28px; }
.ael-auth-head h1 { font-size: 1.6rem; font-weight: 800; margin: 12px 0 4px; letter-spacing: -.01em; }
.ael-auth-head p { margin: 0; opacity: .85; font-size: .9rem; }

.ael-auth-card {
    width: min(440px, calc(100% - 32px));
    margin: 0 auto 24px;
    background: var(--mud-palette-surface);
    border-radius: 24px;
    box-shadow: var(--ael-shadow-strong);
    padding: 22px 20px;
    box-sizing: border-box;
}

.ael-emblem-badge {
    width: 76px;
    height: 76px;
    margin: 0 auto;
    border-radius: 22px;
    background: #fff;
    display: grid;
    place-items: center;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .25);
}

.ael-product-switch {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
    padding: 4px;
    border-radius: 14px;
    background: var(--mud-palette-background-gray);
    margin-bottom: 16px;
}

.ael-product-switch button {
    border: none;
    border-radius: 11px;
    padding: 10px 6px;
    font-weight: 700;
    font-size: .85rem;
    background: transparent;
    color: var(--mud-palette-text-secondary);
    cursor: pointer;
}

/* Tinted, not plain surface: in the dark palette the surface is almost the track's colour. */
.ael-product-switch button.active {
    background: color-mix(in srgb, var(--mud-palette-primary) 14%, var(--mud-palette-surface));
    color: var(--mud-palette-primary);
    box-shadow: var(--ael-shadow);
}

/* ---- Lock screen (biometric unlock) --------------------------------------------------------------------------- */

/* Above everything, dialogs and messages included: nothing of the app shows while it is locked. */
.ael-lock {
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: calc(24px + var(--ael-safe-top)) 24px calc(24px + var(--ael-safe-bottom));
    background:
        radial-gradient(900px 500px at 110% -10%, color-mix(in srgb, var(--mud-palette-primary) 35%, transparent), transparent 60%),
        linear-gradient(180deg, var(--ael-brand-navy) 0%, color-mix(in srgb, var(--ael-brand-navy) 75%, var(--mud-palette-primary)) 100%);
    color: #fff;
    text-align: center;
    overflow-y: auto;
}

.ael-lock-inner { display: flex; flex-direction: column; align-items: center; max-width: 360px; }
.ael-lock h1 { font-size: 1.4rem; font-weight: 800; margin: 18px 0 4px; }
.ael-lock-who { margin: 0; opacity: .85; font-size: .9rem; overflow-wrap: anywhere; }

.ael-lock-button {
    margin-top: 40px;
    width: 88px;
    height: 88px;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, .55);
    background: rgba(255, 255, 255, .12);
    color: #fff;
    display: grid;
    place-items: center;
    cursor: pointer;
}

.ael-lock-button .mud-icon-root { font-size: 3rem; }
.ael-lock-button:disabled { opacity: .6; }
.ael-lock-hint { margin: 14px 0 0; font-size: .9rem; opacity: .9; }

/* ---- Misc -------------------------------------------------------------------------------------------------- */

.ael-empty { text-align: center; padding: 40px 16px; color: var(--mud-palette-text-secondary); }
.ael-empty .mud-icon-root { font-size: 3rem; opacity: .5; }

.ael-money { font-variant-numeric: tabular-nums; }
.ael-muted { color: var(--mud-palette-text-secondary); }
.ael-strong { font-weight: 700; }
.ael-mono { font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; }

.ael-report-text {
    font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
    font-size: .78rem;
    white-space: pre;
    overflow-x: auto;
    background: var(--mud-palette-background-gray);
    border-radius: var(--ael-radius-sm);
    padding: 12px;
}

/* Expansion panel headers: a long title or summary shrinks (and ends in "…") instead of pushing the expand arrow out. */
.mud-expand-panel .mud-expand-panel-header .mud-expand-panel-text { min-width: 0; }

/* Messages ("snackbars") show above the bottom navigation and the sticky action bar instead of over their buttons. */
.mud-snackbar-location-bottom-center { bottom: calc(var(--ael-bottom-nav-height) + 16px + var(--ael-safe-bottom)); }

/* Label / value tables (Settings → Session): long values (an e-mail address) wrap instead of widening the table. */
.ael-kv-table td { white-space: normal; overflow-wrap: anywhere; }
.ael-kv-table td:first-child { width: 40%; }

/* Dates and times side by side (period filters): on narrow phones the picker icon leaves "09/22/2026" cut off. The
   field itself opens the picker, so the icon goes. */
@media (max-width: 400px) {
    .ael-grid-2 .mud-picker .mud-input-adornment { display: none; }
}

.ael-fab {
    position: fixed;
    right: 16px;
    bottom: calc(var(--ael-bottom-nav-height) + 18px + var(--ael-safe-bottom));
    z-index: 1150;
}

/* The page scrolls its last row clear of the button (a large FAB is 56px): it covered Home's "Refresh Data" tile. */
.ael-hero-overlap.with-fab { padding-bottom: calc(var(--ael-bottom-nav-height) + 18px + 56px + 16px + var(--ael-safe-bottom)); }

.ael-fab-ai .mud-fab { background: linear-gradient(135deg, var(--ael-ai), #5E35B1) !important; color: #fff !important; }

.ael-banner {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    padding: 12px 14px;
    border-radius: var(--ael-radius);
    background: color-mix(in srgb, var(--mud-palette-warning) 12%, var(--mud-palette-surface));
    border: 1px solid color-mix(in srgb, var(--mud-palette-warning) 35%, transparent);
}

.ael-stack { display: flex; flex-direction: column; gap: var(--ael-gap); }
.ael-grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--ael-gap); }
.ael-spacer { flex: 1; }

.ael-scan-field .mud-input-adornment-end { gap: 2px; }

.ael-dialog-scroll { max-height: 75vh; overflow-y: auto; }

/* Dialogs at the top start below the status bar / Dynamic Island (MudBlazor puts them 32px from the screen edge). On a
   touch screen a dialog with a text field sits at the top too: iOS lays the keyboard over the page without shrinking
   it, so a centred dialog's buttons ended up under the keypad and its toolbar. */
.mud-dialog-container.mud-dialog-topcenter { padding-top: calc(32px + var(--ael-safe-top)); }
@media (pointer: coarse) {
    .mud-dialog-container.mud-dialog-center:has(input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]), textarea) {
        align-items: flex-start;
        padding-top: calc(32px + var(--ael-safe-top));
    }
}
.mud-dialog-container.mud-dialog-topcenter .mud-dialog,
.mud-dialog-container.mud-dialog-center .mud-dialog {
    max-height: calc(100dvh - 64px - var(--ael-safe-top) - var(--ael-safe-bottom));
}
/* With the keyboard up, a dialog at the top starts at the top of what is visible and ends above the keys, scrolling
   inside (a tall form such as Edit Department had its lower fields and Close / Update behind the keyboard). The band
   comes from adventlite.js (--ael-view-top / --ael-view-bottom). iOS 26+ floats its form bar (^ v ✓, about 50px)
   over the page above the keys and the band does not leave it out, so on iOS dialogs also end above that bar. */
/* 50px: iOS sometimes already leaves the bar out of the band, and then this counts it twice. */
html.ael-ios.ael-keyboard-open { --ael-keys-bar: 50px; }
/* The item picker too: while typing it starts at the top of the band, so its suggestions get the room above the keys. */
html.ael-keyboard-open .mud-dialog-container.mud-dialog-topcenter {
    padding-top: calc(var(--ael-view-top, 0px) + 16px + var(--ael-safe-top));
}
html.ael-keyboard-open .mud-dialog-container.mud-dialog-topcenter .mud-dialog {
    max-height: calc(var(--ael-view-bottom, 100dvh) - var(--ael-keys-bar, 0px) - var(--ael-view-top, 0px) - 16px - var(--ael-safe-top) - 14px);
}
@media (pointer: coarse) {
    html.ael-keyboard-open .mud-dialog-container.mud-dialog-center:has(input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]), textarea) {
        padding-top: calc(var(--ael-view-top, 0px) + 16px + var(--ael-safe-top));
    }
    html.ael-keyboard-open .mud-dialog-container.mud-dialog-center:has(input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]), textarea) .mud-dialog {
        max-height: calc(var(--ael-view-bottom, 100dvh) - var(--ael-keys-bar, 0px) - var(--ael-view-top, 0px) - 16px - var(--ael-safe-top) - 14px);
    }
}

/* The item picker ("Scan item") opens mid-screen, within reach of a thumb (the owner's choice), and grows downwards as
   suggestions arrive: centred, its field would move up with every keystroke. With the keyboard up it is centred in the
   part of the page the keyboard leaves visible (--ael-view-top / --ael-view-bottom from adventlite.js) and never
   reaches below it: the suggestions scroll between the field and Cancel, which stays above the keys. 110px is about
   half its height as it opens. */
.mud-dialog-container.mud-dialog-topcenter:has(.ael-dialog-mid) {
    --ael-dialog-top: max(calc(var(--ael-view-top, 0px) + var(--ael-safe-top) + 16px),
                          calc((var(--ael-view-top, 0px) + var(--ael-view-bottom, 100dvh) - var(--ael-keys-bar, 0px)) / 2 - 110px));
    --ael-dialog-bottom: calc(var(--ael-view-bottom, 100dvh) - 16px - var(--ael-safe-bottom));
    padding-top: var(--ael-dialog-top);
    transition: padding-top .15s ease-out;
}
.mud-dialog-container.mud-dialog-topcenter .mud-dialog.ael-dialog-mid {
    max-height: calc(var(--ael-dialog-bottom) - var(--ael-dialog-top));
}
/* Title, field, buttons and Cancel stay; only the suggestion (or choice) list scrolls, and it takes exactly the room the
   dialog has left (a fixed estimate left one row, and the whole body scrolled the field being typed in out of view).
   The body is a column whose other parts keep their size. */
.mud-dialog.ael-dialog-mid .mud-dialog-content.ael-dialog-scroll {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    max-height: none;
    overflow: hidden;
}
.mud-dialog.ael-dialog-mid .ael-dialog-scroll > * { flex-shrink: 0; }
.mud-dialog.ael-dialog-mid .ael-dialog-scroll > .ael-picker-list {
    flex: 1 1 auto;
    flex-shrink: 1;
    min-height: 60px;
    overflow-y: auto;
    overscroll-behavior: contain;
}

/* ---- Light / dark choice (Settings → Appearance) --------------------------------------------------------------- */

/* The page follows the app's light / dark, not the system's (index.html allows both): scrollbars, native controls and
   the page canvas stay in step when Settings fixes one. MudThemeProvider sets the variable for the palette it shows. */
:root { color-scheme: var(--mud-native-html-color-scheme, light dark); }

/* System / Light / Dark on the product switch's track (its chosen option is tinted, so it stands out in dark mode too). */
.ael-theme-switch { grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 12px 0 0; }
.ael-theme-switch button { display: flex; flex-direction: column; align-items: center; gap: 2px; }

/* ---- Store rows: default store and tags (Components/Stores/StoreList) ------------------------------------------ */

/* A tag ("Default", "This store") ahead of the store's location, so the name keeps the row's width on a phone. */
.ael-store-tag {
    display: inline-block;
    margin-right: 6px;
    padding: 0 7px;
    line-height: 1.5;
    vertical-align: 1px;
    border-radius: 999px;
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .03em;
    text-transform: uppercase;
    background: color-mix(in srgb, var(--mud-palette-primary) 12%, transparent);
    color: var(--mud-palette-primary);
}

/* The star that makes a store the default: a tap target of its own at the row's end, close to the product chip. */
.ael-store-star { display: inline-flex; flex-shrink: 0; margin-left: -6px; }
/* A 40 px target around the small star, so a slightly missed tap does not open the store instead. */
.ael-store-star .mud-icon-button { padding: 10px; }

/* A row with today's sales: the figures take a line of their own under the name, as wide as the row past the
   avatar (40 px + the 12 px gap), so gross, net and the count are not cut off on a phone. */
.ael-store-row { flex-wrap: wrap; row-gap: 2px; }
.ael-store-row-sales { flex: 0 0 100%; box-sizing: border-box; padding-left: 52px; min-width: 0; }

/* Labelled figures (StoreSalesFigures) that wrap as a whole rather than mid-figure. */
.ael-store-sales { display: flex; flex-wrap: wrap; column-gap: 12px; row-gap: 0; font-size: .8rem; color: var(--mud-palette-text-secondary); }
.ael-store-sales > span { white-space: nowrap; }
.ael-store-sales-gross { font-weight: 700; color: var(--mud-palette-text-primary); }
.ael-store-sales-total { font-size: .9rem; }