/* Gedeelde schil van de apps (WMS, Transport) — mobile-first voor Zebra TC21/TC56/TC8300
   (~480px) met scale-up naar ET65 tablet (~1280px), paktafel-monitor en desktop.

   Hier staat alles wat de apps delen: de tokens, de balk, menu, kaarten, knoppen, velden,
   rijen en statuslabels. Klassen beginnen met px-. Wat maar in één app voorkomt (pickschermen,
   ritten) staat in de css van die app zelf, met het voorvoegsel van die app (wms-, transport-),
   en wordt ná dit bestand geladen.

   Twee thema's. Het thema staat als data-px-theme op <html> en wordt door appshell.js gezet
   vóór de eerste paint, zodat het scherm niet eerst in de verkeerde kleur opflitst. Zonder
   javascript blijft donker staan — dat is de stand waarin het magazijn de app kent.

   Alles wat kleur heeft loopt via de tokens hieronder. Schrijf in pagina's dus nooit een vaste
   kleurcode: dan klopt één van beide thema's niet meer. Ook geen color-mix(): een oudere
   Android WebView gooit zo'n hele declaratie weg. */

/* ── Vormtokens; die zijn thema-onafhankelijk ───────────────────────────────── */
:root {
    --px-touch-target: 48px;     /* minimum knophoogte voor handschoenen */
    --px-gap: 8px;
    --px-gap-lg: 16px;

    --px-radius-xs: 8px;
    --px-radius-sm: 12px;
    --px-radius: 16px;
    --px-radius-lg: 22px;
    --px-radius-pill: 999px;

    /* Fluid typography — schaalt vloeiend tussen phone en tablet/desktop.
       min = handterminal 480px, max = tablet/desktop 1280px+. */
    --px-font-sm: clamp(12px, 1.8vw, 14px);
    --px-font-md: clamp(15px, 2.2vw, 18px);
    --px-font-lg: clamp(18px, 3vw, 24px);
    --px-font-xl: clamp(24px, 4.5vw, 34px);

    /* Merkkleuren staan los van het thema: de oranje balk blijft oranje. */
    --px-color-primary: #e47501;       /* Brickx oranje */
    --px-color-primary-dark: #a65603;
    --px-brand-light: #f59a2e;
    --px-brand-deep: #b85e00;
    /* Tekst op een vlak in de merkkleur. Wit bij het Brickx-oranje; een app met een eigen,
       lichte merkkleur (het klantportaal per tenant) zet hier een donkere kleur neer. */
    --px-color-on-primary: #fff;

    --px-safe-top: env(safe-area-inset-top, 0px);
    --px-safe-bottom: env(safe-area-inset-bottom, 0px);

    --px-ease: cubic-bezier(0.2, 0.8, 0.3, 1);
}

/* ── Donker (standaard) ─────────────────────────────────────────────────────── */
:root,
:root[data-px-theme="dark"] {
    color-scheme: dark;

    --px-color-bg: #0b1220;
    --px-color-bg-2: #141e35;
    --px-color-surface: #18233a;
    --px-color-surface-2: #26324e;
    --px-color-border: rgba(255, 255, 255, 0.08);
    --px-color-border-strong: rgba(255, 255, 255, 0.16);
    --px-color-text: #eef2f8;
    --px-color-text-dim: #93a3bd;
    --px-color-accent: #fb923c;        /* lichter oranje voor accent op donker */
    --px-color-success: #22c55e;
    --px-color-warning: #eab308;
    --px-color-danger: #ef4444;
    --px-color-info: #3b82f6;

    /* Lichte variant per statuskleur — de bovenkant van de knopverlopen. Bewust
       uitgeschreven en niet met color-mix() berekend: op een oudere WebView valt
       zo'n regel in zijn geheel weg en werd de groene BOEKEN-knop weer oranje. */
    --px-color-success-light: #4ade80;
    --px-color-warning-light: #facc15;
    --px-color-danger-light: #f87171;
    --px-danger-glow: rgba(239, 68, 68, 0.28);
    --px-danger-tint: rgba(239, 68, 68, 0.16);
    --px-warning-tint: rgba(234, 179, 8, 0.14);
    --px-success-tint: rgba(34, 197, 94, 0.18);
    --px-info-tint: rgba(59, 130, 246, 0.16);

    /* Twee extra kleuren om soorten uit elkaar te houden (bouwstenen in een editor,
       afzenders in een gesprek). Geen status; daarvoor zijn de kleuren hierboven. */
    --px-color-violet: #a78bfa;
    --px-violet-tint: rgba(167, 139, 250, 0.16);
    --px-color-teal: #2dd4bf;
    --px-teal-tint: rgba(45, 212, 191, 0.14);

    --px-chip-bg: rgba(228, 117, 1, 0.18);
    --px-chip-border: rgba(251, 146, 60, 0.28);

    --px-shadow-1: 0 2px 10px rgba(0, 0, 0, 0.45);
    --px-shadow-2: 0 12px 30px rgba(0, 0, 0, 0.55);
    --px-shadow-header: 0 6px 20px rgba(0, 0, 0, 0.45);
}

/* ── Licht ──────────────────────────────────────────────────────────────────── */
:root[data-px-theme="light"] {
    color-scheme: light;

    --px-color-bg: #eceff5;
    --px-color-bg-2: #f9fbfd;
    --px-color-surface: #ffffff;
    --px-color-surface-2: #e5eaf2;
    --px-color-border: rgba(15, 23, 42, 0.10);
    --px-color-border-strong: rgba(15, 23, 42, 0.20);
    --px-color-text: #101a2c;
    --px-color-text-dim: #5b6b83;
    --px-color-accent: #c25f00;        /* donkerder oranje — leesbaar op wit */
    --px-color-success: #15803d;
    --px-color-warning: #eab308;
    --px-color-danger: #c81e1e;
    --px-color-info: #2563eb;

    --px-color-success-light: #22a355;
    --px-color-warning-light: #f5c518;
    --px-color-danger-light: #e04444;
    --px-danger-glow: rgba(200, 30, 30, 0.22);
    --px-danger-tint: rgba(200, 30, 30, 0.12);
    --px-warning-tint: rgba(234, 179, 8, 0.20);
    --px-success-tint: rgba(21, 128, 61, 0.14);
    --px-info-tint: rgba(37, 99, 235, 0.10);

    --px-color-violet: #6d4fd8;
    --px-violet-tint: rgba(109, 79, 216, 0.10);
    --px-color-teal: #0f8a7a;
    --px-teal-tint: rgba(15, 138, 122, 0.10);

    --px-chip-bg: rgba(228, 117, 1, 0.12);
    --px-chip-border: rgba(228, 117, 1, 0.26);

    --px-shadow-1: 0 1px 2px rgba(15, 23, 42, 0.08), 0 4px 14px rgba(15, 23, 42, 0.06);
    --px-shadow-2: 0 10px 30px rgba(15, 23, 42, 0.14);
    --px-shadow-header: 0 6px 18px rgba(184, 94, 0, 0.28);
}

/* ── Neutraal palet (data-px-palette="neutral" op <html>) ───────────────────────
   Voor schermen achter een bureau, zoals het klantportaal: bijna-wit met witte kaarten in licht,
   bijna-zwart in donker, dunne randen en nauwelijks schaduw. De merkkleur zit dan alleen waar hij
   iets betekent. De handheld-apps gebruiken dit niet; daar blijven de thema's hierboven gelden.
   Alleen de neutrale tinten wijken af; status- en merkkleuren komen uit het thema. */
:root[data-px-palette="neutral"][data-px-theme="light"] {
    --px-color-bg: #fafafa;
    --px-color-bg-2: #fafafa;
    --px-color-surface: #ffffff;
    --px-color-surface-2: #f4f4f5;
    --px-color-surface-glass: rgba(255, 255, 255, 0.82);
    --px-color-border: rgba(0, 0, 0, 0.08);
    --px-color-border-strong: rgba(0, 0, 0, 0.14);
    --px-color-text: #171717;
    --px-color-text-dim: #5f6368;

    --px-shadow-1: 0 1px 2px rgba(0, 0, 0, 0.04);
    --px-shadow-2: 0 4px 12px rgba(0, 0, 0, 0.06);
    --px-shadow-header: none;
}

:root[data-px-palette="neutral"][data-px-theme="dark"] {
    --px-color-bg: #0e0f11;
    --px-color-bg-2: #0e0f11;
    --px-color-surface: #16171a;
    --px-color-surface-2: #1f2125;
    --px-color-surface-glass: rgba(14, 15, 17, 0.82);
    --px-color-border: rgba(255, 255, 255, 0.08);
    --px-color-border-strong: rgba(255, 255, 255, 0.14);
    --px-color-text: #ededed;
    --px-color-text-dim: #a1a1aa;

    --px-shadow-1: 0 1px 2px rgba(0, 0, 0, 0.4);
    --px-shadow-2: 0 6px 16px rgba(0, 0, 0, 0.45);
    --px-shadow-header: none;
}

html, body {
    margin: 0;
    padding: 0;
    -webkit-font-smoothing: antialiased;
    font-family: Lato, 'Helvetica Neue', Helvetica, Arial, sans-serif;
    background: var(--px-color-bg);
    color: var(--px-color-text);
}

/* Het blokje dat index.html toont zolang de app nog laadt. Staat hier zodat het
   meteen in de juiste thema-kleur verschijnt; appshell.css is dan al binnen. */
.px-boot {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100vh;
    height: 100dvh;
    background: var(--px-color-bg);
    color: var(--px-color-text-dim);
    font-family: Lato, 'Helvetica Neue', Helvetica, Arial, sans-serif;
    letter-spacing: 0.5px;
}

/* Phone-scanner layout (default). */
.px-root {
    /* 100vh telt op Android de adresbalk en de navigatieknoppen niet mee, waardoor de
       onderkant van het scherm buiten beeld valt - precies de plek waar de knoppen staan.
       dvh volgt de zichtbare hoogte wel; de vh-regel blijft staan voor oudere webviews. */
    height: 100vh;
    height: 100dvh;
    max-height: 100vh;
    max-height: 100dvh;
    /* De safe-area zit als padding op dit blok. Zonder border-box telt die padding bóvenop de
       100dvh, en valt de onderkant er alsnog buiten - met overflow:hidden zie je hem dan nooit. */
    box-sizing: border-box;
    background:
        radial-gradient(1200px 600px at 50% -10%, var(--px-color-bg-2), transparent 70%),
        var(--px-color-bg);
    color: var(--px-color-text);
    font-size: var(--px-font-md);
    padding: var(--px-safe-top) 0 var(--px-safe-bottom) 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* ── Header ─────────────────────────────────────────────────────────────────── */

.px-header {
    position: relative;
    background: linear-gradient(135deg, var(--px-brand-light) 0%, var(--px-color-primary) 52%, var(--px-brand-deep) 100%);
    color: #fff;
    /* top padding = basis gap + safe-area inzet (Android status-bar, iOS notch) zodat
       de header-tekst niet onder system icons valt in MAUI BlazorWebView / PWA. */
    padding: calc(10px + var(--px-safe-top)) var(--px-gap-lg) 10px;
    font-size: var(--px-font-lg);
    font-weight: 600;
    min-height: var(--px-touch-target);
    display: flex;
    align-items: center;
    gap: var(--px-gap);
    border-bottom-left-radius: var(--px-radius-lg);
    border-bottom-right-radius: var(--px-radius-lg);
    box-shadow: var(--px-shadow-header);
    z-index: 5;
    flex-shrink: 0;
}

/* Lichtstreep over de bovenrand — geeft de balk diepte zonder een tweede kleur. */
.px-header::after {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 1px;
    background: rgba(255, 255, 255, 0.35);
}

.px-back-btn {
    background: #fff;
    border: none;
    color: var(--px-color-primary-dark);
    font-family: inherit;
    font-size: var(--px-font-md);
    font-weight: 700;
    line-height: 1;
    padding: 8px 16px 8px 12px;
    cursor: pointer;
    min-height: calc(var(--px-touch-target) - 4px);
    border-radius: var(--px-radius-pill);
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-right: var(--px-gap);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
    transition: transform 0.12s var(--px-ease), box-shadow 0.12s var(--px-ease);
}

.px-back-btn:hover {
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3);
}

.px-back-btn:active {
    transform: scale(0.95);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
}

.px-back-icon {
    width: 18px;
    height: 18px;
    display: block;
}

.px-back-label {
    font-size: var(--px-font-sm);
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

/* Merktegel links in de balk, op de plek waar anders de terug-knop staat. */
.px-header-mark {
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    border-radius: var(--px-radius-sm);
    display: grid;
    place-items: center;
    background: rgba(255, 255, 255, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.35);
    color: #fff;
}

.px-header-title {
    font-size: var(--px-font-lg);
    font-weight: 700;
    letter-spacing: 0.3px;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.18);
}

/* Ronde icoonknop in de balk (thema-schakelaar, instellingen). Rechts uitgelijnd; staan er
   twee, dan schuift alleen de eerste op en blijven ze tegen elkaar aan staan. */
.px-header-btn {
    margin-left: auto;
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    border-radius: var(--px-radius-pill);
    border: 1px solid rgba(255, 255, 255, 0.35);
    background: rgba(255, 255, 255, 0.18);
    color: #fff;
    cursor: pointer;
    padding: 0;
    transition: background 0.15s var(--px-ease), transform 0.12s var(--px-ease);
}

.px-header-btn:hover {
    background: rgba(255, 255, 255, 0.3);
}

.px-header-btn:active {
    transform: scale(0.92);
}

/* Gap tussen twee knoppen komt van de balk zelf. */
.px-header-btn + .px-header-btn {
    margin-left: 0;
}

/* ── Iconen ─────────────────────────────────────────────────────────────────── */

.px-icon {
    display: block;
    flex: 0 0 auto;
}

/* ── Menu ───────────────────────────────────────────────────────────────────── */

.px-menu-group {
    margin-bottom: 22px;
}

.px-menu-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: var(--px-font-sm);
    font-weight: 700;
    color: var(--px-color-text-dim);
    text-transform: uppercase;
    letter-spacing: 1.2px;
    margin: 0 0 10px 6px;
}

/* Fijne lijn achter de groepstitel, zodat de groepen visueel uit elkaar vallen
   zonder er een kader omheen te zetten. */
.px-menu-title::after {
    content: "";
    flex: 1;
    height: 1px;
    background: linear-gradient(to right, var(--px-color-border-strong), transparent);
}

.px-menu-list {
    display: grid;
    gap: 10px;
}

.px-menu-item {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 14px;
    width: 100%;
    background: var(--px-color-surface);
    border: 1px solid var(--px-color-border);
    border-radius: var(--px-radius-lg);
    padding: 11px 14px;
    font-size: var(--px-font-md);
    font-weight: 600;
    font-family: inherit;
    color: var(--px-color-text);
    text-decoration: none;
    text-align: left;
    box-shadow: var(--px-shadow-1);
    cursor: pointer;
    min-height: calc(var(--px-touch-target) + 18px);
    user-select: none;
    transition: transform 0.14s var(--px-ease), box-shadow 0.14s var(--px-ease), border-color 0.14s var(--px-ease);
}

.px-menu-item:hover {
    border-color: var(--px-chip-border);
    box-shadow: var(--px-shadow-2);
    transform: translateY(-1px);
}

.px-menu-item:active {
    transform: translateY(0) scale(0.985);
    box-shadow: var(--px-shadow-1);
}

.px-menu-icon {
    width: 46px;
    height: 46px;
    border-radius: var(--px-radius-sm);
    display: grid;
    place-items: center;
    background: var(--px-chip-bg);
    border: 1px solid var(--px-chip-border);
    color: var(--px-color-accent);
}

.px-menu-label {
    min-width: 0;
    line-height: 1.2;
}

.px-menu-chevron {
    color: var(--px-color-text-dim);
    display: grid;
    place-items: center;
    transition: transform 0.14s var(--px-ease), color 0.14s var(--px-ease);
}

.px-menu-item:hover .px-menu-chevron {
    transform: translateX(3px);
    color: var(--px-color-accent);
}

/* Nog niet gebouwd: gestippeld kader in plaats van een kaart, zodat het meteen
   leest als "hier komt iets" en niet als een knop die stuk is. */
.px-menu-item--disabled {
    pointer-events: none;
    background: transparent;
    border-style: dashed;
    border-color: var(--px-color-border-strong);
    box-shadow: none;
}

.px-menu-item--disabled .px-menu-icon,
.px-menu-item--disabled .px-menu-label {
    opacity: 0.45;
}

.px-menu-badge {
    font-size: var(--px-font-sm);
    font-weight: 600;
    font-style: italic;
    color: var(--px-color-text-dim);
    white-space: nowrap;
    padding: 3px 10px;
    border-radius: var(--px-radius-pill);
    background: var(--px-color-surface-2);
}

/* De schermen lopen ver uiteen: een TC8300 is 320x533 css-pixels, een TC21 360x640,
   en een ET65 op een heftruck zit rond de 850 breed. Onder de 420 wordt de tegel
   daarom compacter — anders passen er op de kleinste scanner nog maar vijf items
   in beeld en scroll je je suf. Boven de 700 gaan ze naast elkaar staan. */
@media (max-width: 420px) {
    .px-menu-group { margin-bottom: 14px; }
    .px-menu-list { gap: 8px; }

    .px-menu-item {
        gap: 10px;
        padding: 6px 12px;
        border-radius: 18px;
        min-height: var(--px-touch-target);
    }

    .px-menu-icon {
        width: 36px;
        height: 36px;
        border-radius: var(--px-radius-xs);
    }

    .px-menu-icon .px-icon {
        width: 20px;
        height: 20px;
    }

    .px-menu-badge {
        font-size: 10px;
        padding: 2px 7px;
    }

    .px-header {
        padding: calc(8px + var(--px-safe-top)) 12px 8px;
        gap: 6px;
    }

    .px-header-mark {
        width: 34px;
        height: 34px;
        flex-basis: 34px;
    }

    .px-header-btn {
        width: 36px;
        height: 36px;
    }

    .px-back-btn {
        padding: 6px 12px 6px 9px;
        margin-right: 4px;
    }
}

/* Twee kolommen is het maximum. Drie past technisch binnen de 960 die de content
   breed mag zijn, maar dan breekt "Inpakken en controleren" over twee regels en
   worden de raakvlakken kleiner — precies wat je met handschoenen niet wilt. */
@media (min-width: 700px) {
    .px-menu-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Liggend op een korte scanner (TC8300 is dan 533x320): de hoogte is op, de breedte
   niet. Twee kolommen scheelt daar de helft van het scrollen. */
@media (orientation: landscape) and (max-height: 520px) and (min-width: 500px) {
    .px-menu-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Paginakop met een actieknop rechts (verversen). Stond op elf schermen als handgemaakte
   flexbox met inline maten, en dat liep per scherm net iets uit elkaar. */
.px-page-header {
    display: flex;
    align-items: center;
    gap: var(--px-gap);
    margin-bottom: var(--px-gap-lg);
}

.px-page-header .px-page-title {
    margin: 0;
    flex: 1;
    min-width: 0;
}

/* Rond, even groot als de knop in de balk, zodat het overal hetzelfde aanvoelt. */
.px-page-action {
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
    min-width: 44px;
    min-height: 44px;
    padding: 0;
    margin-top: 0;
    border-radius: var(--px-radius-pill);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: var(--px-font-lg);
    line-height: 1;
}

/* ===== Settings / form pages ===== */

.px-page-title {
    font-size: var(--px-font-xl);
    font-weight: 700;
    letter-spacing: -0.3px;
    margin: 0 0 var(--px-gap-lg) 4px;
}

.px-field-title {
    font-size: var(--px-font-md);
    font-weight: 700;
    margin-bottom: 6px;
}

.px-field-help {
    color: var(--px-color-text-dim);
    font-size: var(--px-font-sm);
    line-height: 1.45;
    margin: 0 0 var(--px-gap) 0;
}

.px-btn--fullwidth {
    width: 100%;
    margin-top: var(--px-gap-lg);
}

.px-btn--small {
    min-height: 36px;
    padding: 0 14px;
    font-size: var(--px-font-sm);
    margin-top: var(--px-gap);
}

.px-kv-row {
    display: flex;
    justify-content: space-between;
    gap: var(--px-gap);
    padding: 8px 0;
    border-bottom: 1px solid var(--px-color-border);
}

.px-kv-row:last-of-type {
    border-bottom: none;
}

.px-kv-row span {
    color: var(--px-color-text-dim);
}

/* Segmentschakelaar (licht / donker). Twee knoppen in één pil; de actieve krijgt
   het lichte plaatje eronder. */
.px-segment {
    display: inline-flex;
    padding: 4px;
    gap: 4px;
    border-radius: var(--px-radius-pill);
    background: var(--px-color-surface-2);
    border: 1px solid var(--px-color-border);
}

.px-segment-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 40px;
    padding: 0 18px;
    border: none;
    border-radius: var(--px-radius-pill);
    background: transparent;
    color: var(--px-color-text-dim);
    font-family: inherit;
    font-size: var(--px-font-sm);
    font-weight: 700;
    cursor: pointer;
    transition: background 0.16s var(--px-ease), color 0.16s var(--px-ease);
}

.px-segment-btn:hover {
    color: var(--px-color-text);
}

.px-segment-btn--active {
    background: var(--px-color-surface);
    color: var(--px-color-text);
    box-shadow: var(--px-shadow-1);
}

/* Native <select> stylen als px-input. De pijl is getekend met twee verlopen in plaats van
   een svg-plaatje: een data-uri kan geen var() lezen, en dan volgt de pijl de merkkleur
   niet (het klantportaal zet die per tenant). */
select.px-input {
    appearance: none;
    -webkit-appearance: none;
    background-image:
        linear-gradient(45deg, transparent 50%, var(--px-color-primary) 50%),
        linear-gradient(135deg, var(--px-color-primary) 50%, transparent 50%);
    background-repeat: no-repeat;
    background-position: calc(100% - 22px) 50%, calc(100% - 16px) 50%;
    background-size: 6px 6px, 6px 6px;
    padding-right: 42px;
}

.px-content {
    flex: 1;
    padding: var(--px-gap-lg);
    padding-bottom: calc(var(--px-gap-lg) + var(--px-safe-bottom) + 12px);
    overflow-y: auto;
    overscroll-behavior-y: contain;
    -webkit-overflow-scrolling: touch;  /* smooth scroll op iOS/Android */
    min-height: 0;  /* flexbox scroll fix — zonder dit scrollt flex-child niet */
}

/* Smalle, meekleurende scrollbar; de systeembalk is op een donker vlak een
   lichte streep die niet bij de rest past. */
.px-content::-webkit-scrollbar {
    width: 8px;
}

.px-content::-webkit-scrollbar-thumb {
    background: var(--px-color-surface-2);
    border-radius: var(--px-radius-pill);
}

.px-content::-webkit-scrollbar-track {
    background: transparent;
}

/* Alle primaire knoppen groot en raakbaar. */
.px-btn {
    min-height: var(--px-touch-target);
    min-width: var(--px-touch-target);
    padding: 0 22px;
    border: none;
    border-radius: var(--px-radius-pill);
    font-family: inherit;
    font-size: var(--px-font-md);
    font-weight: 700;
    letter-spacing: 0.3px;
    /* --px-btn-fill: een app kan de vulling vervangen (het klantportaal kent "effen" of een knop in de
       accentkleur). Niet gezet = het merkverloop, zoals altijd. */
    background: var(--px-btn-fill, linear-gradient(135deg, var(--px-brand-light), var(--px-color-primary) 60%, var(--px-brand-deep)));
    color: var(--px-color-on-primary);
    cursor: pointer;
    box-shadow: var(--px-shadow-1);
    transition: transform 0.12s var(--px-ease), box-shadow 0.12s var(--px-ease), filter 0.12s var(--px-ease);
}

.px-btn:hover {
    filter: brightness(1.06);
    box-shadow: var(--px-shadow-2);
}

.px-btn--success {
    background: linear-gradient(135deg, var(--px-color-success-light), var(--px-color-success));
    color: #fff;
}

.px-btn--warning {
    background: linear-gradient(135deg, var(--px-color-warning-light), var(--px-color-warning));
    color: #1a1a1a;
}

.px-btn--danger {
    background: linear-gradient(135deg, var(--px-color-danger-light), var(--px-color-danger));
    color: #fff;
}

.px-btn--ghost {
    background: var(--px-color-surface-2);
    color: var(--px-color-text);
    border: 1px solid var(--px-color-border);
    box-shadow: none;
}

.px-btn--ghost:hover {
    filter: none;
    background: var(--px-color-surface);
    border-color: var(--px-color-border-strong);
    box-shadow: var(--px-shadow-1);
}

.px-btn:active {
    transform: scale(0.97);
    box-shadow: none;
}

/* Icoon met tekst (of alleen een icoon) in een knop: netjes op één lijn en gecentreerd.
   Als binnenste span, zodat knoppen met alleen tekst blijven zoals ze zijn. */
.px-btn-content {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    vertical-align: middle;
}

.px-btn[disabled] {
    opacity: 0.45;
    box-shadow: none;
    filter: grayscale(0.35);
    cursor: not-allowed;
}

.px-input {
    box-sizing: border-box;   /* padding+border binnen de width — anders steekt elk veld 50px buiten z'n container/grid-kolom */
    min-height: var(--px-touch-target);
    padding: 0 var(--px-gap-lg);
    font-family: inherit;
    font-size: var(--px-font-md);
    border: 1px solid var(--px-color-border-strong);
    border-radius: var(--px-radius-sm);
    background: var(--px-color-bg);
    color: var(--px-color-text);
    width: 100%;
    transition: border-color 0.14s var(--px-ease), box-shadow 0.14s var(--px-ease);
}

.px-input::placeholder {
    color: var(--px-color-text-dim);
}

.px-input:focus {
    outline: none;
    border-color: var(--px-color-primary);
    box-shadow: 0 0 0 3px var(--px-chip-bg);
}

.px-card {
    background: var(--px-color-surface);
    border: 1px solid var(--px-color-border);
    border-radius: var(--px-radius);
    padding: var(--px-gap-lg);
    margin-bottom: 12px;
    box-shadow: var(--px-shadow-1);
}

/* Responsive breakpoints. */

/* Handterminals (TC21, TC8300) — compactere padding op smalle schermen */
@media (max-width: 480px) {
    .px-content {
        padding: 12px;
        padding-bottom: calc(12px + var(--px-safe-bottom) + 12px);
    }
}

/* Middengrote terminals (TC56) — 481-720 */
@media (min-width: 481px) and (max-width: 720px) {
    .px-content { padding: var(--px-gap-lg); }
}

/* Tablet (ET65) en desktop — 900px+
   NB: zodra we een bottom-nav hebben, kan die hier naar side-nav schakelen.
   Voor nu: header blijft top-bar, content krijgt wat meer padding. */
@media (min-width: 900px) {
    .px-header {
        padding: 12px calc(var(--px-gap-lg) * 2);
    }

    .px-content {
        max-width: 960px;
        margin-left: auto;
        margin-right: auto;
        width: 100%;
    }
}

/* Visueel verbergen, maar toegankelijk + focusbaar voor DataWedge */
.px-scan-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
    /* Let op: NIET display:none, want dan komt input niet binnen. */
}

/* Sticky knop onderaan het scherm — altijd zichtbaar op kleine scanners.
   De vervaging erboven laat zien dat er nog inhoud onder de knop doorloopt. */
.px-sticky-bottom {
    position: sticky;
    bottom: 0;
    padding: var(--px-gap) 0 calc(var(--px-gap) + 2px);
    background: linear-gradient(to top, var(--px-color-bg) 62%, transparent);
    z-index: 10;
}

/* Alle kaart-varianten staan bewust ná .px-card: gelijke specificiteit, dus de laatste regel
   wint. Stond --success eerder in het bestand, en dan hield hij wel de witte tekst maar niet de
   groene achtergrond - wit op wit. */
.px-card--success {
    background: var(--px-color-success);
    border-color: transparent;
    color: #fff;
    font-weight: 600;
}

/* Gedempte tekst binnen een gekleurde kaart. Die klassen zetten normaal een grijstint, en die
   verdwijnt op groen of rood. Hier wint de kaart: wit, iets doorzichtig zodat het nog steeds
   ondergeschikt oogt aan de regel erboven. */
.px-card--success .px-field-help,
.px-card--error .px-field-help {
    color: rgba(255, 255, 255, 0.85);
}

.px-card--muted {
    color: var(--px-color-text-dim);
    text-align: center;
}

/* De technische regel onder een foutmelding: adres, status, foutcode. Klein en
   rustig, want de picker heeft er niets aan - maar hij moet er wel staan. */
.px-error-detail {
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid rgba(255, 255, 255, 0.3);
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    font-size: var(--px-font-sm);
    font-weight: 400;
    line-height: 1.4;
    word-break: break-word;
    opacity: 0.85;
}

.px-card--error {
    background: var(--px-color-danger);
    border-color: transparent;
    color: #fff;
    font-weight: 600;
}

.px-empty-hint {
    padding: calc(var(--px-gap-lg) * 2);
    text-align: center;
    color: var(--px-color-text-dim);
}

.px-section-title {
    font-size: var(--px-font-lg);
    font-weight: 700;
    margin-bottom: var(--px-gap);
}

.px-mono {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}

/* Basis rij-layout: flex, links de info, rechts het statusblok. */
.px-row {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px;
    border-radius: var(--px-radius-sm);
}

.px-row + .px-row {
    border-top: 1px solid var(--px-color-border);
}

.px-row-left {
    flex: 1;
    min-width: 0;
}

/* Clickable row voor lijstweergaven (PO's, ritten, etc.) */
.px-row--clickable {
    cursor: pointer;
    transition: background 0.12s var(--px-ease);
}

/* Een rij mag ook een echte knop zijn (beter voor toetsenbord en schermlezer); dan de
   knopopmaak van de browser eraf, zodat hij er hetzelfde uitziet als een div-rij. */
button.px-row {
    width: 100%;
    margin: 0;
    background: transparent;
    border: none;
    color: inherit;
    font: inherit;
    text-align: left;
}

/* De hoofdregel van een rij: ritnummer, stopnaam. */
.px-row-title {
    font-weight: 600;
    line-height: 1.2;
}

.px-row--clickable:hover {
    background: var(--px-color-surface-2);
}

.px-row--clickable:active {
    transform: scale(0.99);
}

/* ── Pickschermen ──────────────────────────────────────────────────────────────
   Deze schermen bestonden uit losse inline-maten (2em hier, 2.4em daar), waardoor
   elk scherm net iets anders oogde. Onderstaande klassen zijn de gedeelde taal:
   een klein bijschrift, de grote waarde eronder, en een groene staat zodra iets
   bevestigd is. De maten schalen mee met het scherm - op een TC8300 moet het passen,
   op een tablet aan de paktafel mag het groot. */

.px-card--center {
    text-align: center;
}

/* Smalle melding, bijvoorbeeld een scanfout onder de scanbalk. */
.px-card--compact {
    padding: 10px 14px;
}

/* Status pills voor PO-ontvangst */
.px-status-pill {
    padding: 6px 14px;
    border-radius: var(--px-radius-pill);
    font-size: var(--px-font-sm);
    font-weight: 700;
    white-space: nowrap;
}

.px-status-pill--red {
    background: var(--px-color-danger);
    color: #fff;
}

.px-status-pill--orange {
    background: var(--px-color-warning);
    color: #1a1a1a;
}

.px-status-pill--green {
    background: var(--px-color-success);
    color: #fff;
}

.px-status-pill--blue {
    background: var(--px-color-info);
    color: #fff;
}

/* Bijregel onder een titel in gewone letters. Voor klantnamen, plaatsen, datums en aantallen -
   alles wat een mens leest. Codes horen in wms-sku-line, die is monospace zodat cijferreeksen
   uitlijnen en een 0 van een O te onderscheiden is; die font op een klantnaam zetten laat een
   kaart eruitzien als een terminaluitdraai. */
.px-row-meta {
    color: var(--px-color-text-dim);
    font-size: var(--px-font-sm);
    line-height: 1.4;
    margin-top: 3px;
}

.px-row-meta strong {
    color: var(--px-color-text);
    font-weight: 600;
}

/* Actieve rij in een boekflow — subtiele highlight zodat zichtbaar is welke
   regel door de laatste scan geselecteerd werd. */
.px-row--active {
    background: var(--px-color-surface-2);
    box-shadow: inset 3px 0 0 var(--px-color-accent);
}

/* Validatie-indicator op de locatie-input */
.px-input.px-input--invalid {
    border-color: var(--px-color-danger);
    box-shadow: 0 0 0 3px var(--px-danger-glow);
}

.px-field-hint {
    margin-left: 108px;
    font-size: var(--px-font-sm);
    color: var(--px-color-text-dim);
}

.px-field-hint--error {
    color: var(--px-color-danger);
}

/* De regel die net gescand is licht even op, zodat je van een afstand ziet dat
   de scan aankwam zonder dat je de tellers hoeft te lezen. */
.px-row--highlight {
    background: var(--px-chip-bg);
    transition: background 0.4s ease-out;
}

/* Een memo op de bon: opvallend, maar geen fout. */
.px-card--warning {
    border-left: 4px solid var(--px-color-warning);
    background: var(--px-warning-tint);
}

/* Wie bewegende beelden liever niet heeft, houdt het geluid en de gekleurde kaart. */
@media (prefers-reduced-motion: reduce) {

    .px-menu-item,
    .px-menu-chevron,
    .px-btn,
    .px-back-btn,
    .px-header-btn {
        transition: none;
    }

    .px-menu-item:hover {
        transform: none;
    }
}

/* ── Meldingsbalk onder de kop ──────────────────────────────────────────────── */
/* Onder de kop, boven de inhoud: voor wat over de hele app gaat en niet over het scherm
   eronder — een NFC-tag die niet gelezen werd, geen verbinding, acties in de wachtrij. */
.px-banner {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--px-gap);
    padding: 10px var(--px-gap-lg);
    color: #fff;
    font-weight: 700;
    text-align: center;
    line-height: 1.3;
}

.px-banner--danger {
    background: var(--px-color-danger);
}

.px-banner--warning {
    background: var(--px-color-warning);
    color: #1a1a1a;
}

/* ── Schakelaar ─────────────────────────────────────────────────────────────── */
/* Aan/uit met een groot raakvlak; groen als hij aan staat ("in orde"). De echte checkbox
   blijft staan voor toegankelijkheid, maar is onzichtbaar. */
.px-switch {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: var(--px-touch-target);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
}

.px-switch input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.px-switch-track {
    position: relative;
    width: 48px;
    height: 28px;
    flex: none;
    border-radius: var(--px-radius-pill);
    background: var(--px-color-surface-2);
    border: 1px solid var(--px-color-border-strong);
    transition: background 0.15s var(--px-ease);
}

.px-switch-track::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
    transition: transform 0.15s var(--px-ease);
}

.px-switch input:checked + .px-switch-track {
    background: var(--px-color-success);
    border-color: transparent;
}

.px-switch input:checked + .px-switch-track::after {
    transform: translateX(20px);
}

.px-switch input:focus-visible + .px-switch-track {
    outline: 2px solid var(--px-color-accent);
    outline-offset: 2px;
}

.px-switch-label {
    font-size: var(--px-font-md);
}

/* Status zonder kleur: gepland, open - nog niets aan de hand. */
.px-status-pill--neutral {
    background: var(--px-color-surface-2);
    color: var(--px-color-text-dim);
}