:root {
    --agri-accent: #6CA74D;
    --agri-accent-soft: #EDF6E8;
    --agri-secondary: #102A26;
    --agri-tertiary: #39754B;
    --agri-canvas: #FBF2EB;
    --agri-ink: #102A26;
    --agri-muted: color-mix(in srgb, #102A26 54%, white);
    --agri-subtle: #F3F7F1;
    --agri-panel: #ffffff;
    --agri-border: #D9DFDB;
    --agri-shadow: 0 22px 60px rgba(16, 42, 38, .13);
    --agri-glass: rgba(255, 255, 255, .78);
    /* Het grijs van de vaste kopbanden (Relaties, Ritten, entry-werkvoorraad). Als RGB-triplet
       zodat dezelfde kleur op meerdere dekkingen gebruikt kan worden: de band zelf, de uitloop
       eronder, en de dekkende variant. Net als de statuskleuren hierboven bewust buiten de
       thema-blokken — de koppen horen in elke huisstijl hetzelfde te zijn, anders lopen ze
       juist uit elkaar. */
    --agri-header-band-rgb: 244 244 243;
    --agri-teal: #102A26;
    --agri-info: #285f7f;
    --agri-info-soft: #e9f1f8;
    --agri-warning: #8d5d0a;
    --agri-warning-soft: #fff2cf;
    --agri-danger: #a22828;
    --agri-danger-soft: #fdeaea;
    /* Vaste SEMANTISCHE statuskleuren — bewust buiten het thema-blok, zodat 'uit te voeren',
       'uitgevoerd' en 'niet uitvoeren' in elk thema exact dezelfde betekeniskleur houden. */
    --status-todo: #2563EB;
    --status-todo-soft: #E8F0FE;
    --status-done: #1E9E5A;
    --status-done-soft: #E6F4EC;
    --status-skip: #D33A31;
    --status-skip-soft: #FCEBEA;
    --status-busy: #92400E;
    --status-busy-soft: #FCEEDD;
    --agri-h1-size: clamp(1.55rem, 4.2vw, 2.05rem);
    --agri-h2-size: clamp(1.32rem, 3.4vw, 1.65rem);
    --agri-h3-size: clamp(1.12rem, 2.9vw, 1.32rem);
    --agri-h4-size: clamp(1rem, 2.5vw, 1.15rem);
    --agri-h5-size: 1rem;
    --agri-h6-size: .9rem;
    color-scheme: light;
}

/* Themakleur "Blauw/Rood" (Leseman Car Care): overschrijft alleen de kleur-tokens.
   De rest van de app volgt automatisch, omdat alle kleuren via --agri-* lopen
   (knoppen, golfanimatie, actieve states, badges enzovoort). Een thema toevoegen =
   hier een [data-app-theme="<code>"]-blok + een regel in ThemeService. */
:root[data-app-theme="blauwrood"] {
    --agri-accent: #2360AF;
    --agri-accent-soft: #E7F0FB;
    --agri-secondary: #16233A;
    --agri-tertiary: #1C4C8E;
    --agri-canvas: #EEF2F7;
    --agri-ink: #16233A;
    --agri-muted: color-mix(in srgb, #16233A 54%, white);
    --agri-subtle: #EEF3F9;
    --agri-border: #D5DCE6;
    --agri-shadow: 0 22px 60px rgba(20, 35, 58, .14);
    --agri-teal: #16233A;
    --agri-danger: #D5342A;
    --agri-danger-soft: #FCEBEA;
}

/* Themakleur "Petrol": diep blauwgroen op een koel canvas. Het rood van --agri-danger
   blijft hier bewust de standaardwaarde: het accent zit ver genoeg van rood af, dus de
   openstaand-flair houdt zijn eigen signaalkleur. */
:root[data-app-theme="petrol"] {
    --agri-accent: #0F6F7A;
    --agri-accent-soft: #E6F2F3;
    --agri-secondary: #0E2A2E;
    --agri-tertiary: #0B4C55;
    --agri-canvas: #EFF5F5;
    --agri-ink: #0E2A2E;
    --agri-muted: color-mix(in srgb, #0E2A2E 54%, white);
    --agri-subtle: #EDF4F4;
    --agri-border: #D3E0E1;
    --agri-shadow: 0 22px 60px rgba(14, 42, 46, .13);
    --agri-teal: #0E2A2E;
}

* {
    box-sizing: border-box;
}

/* Het hidden-attribuut wint altijd, ook van klassen die display zetten (zoals .auth-button) */
[hidden] {
    display: none !important;
}

html,
body {
    margin: 0;
    min-height: 100%;
    /* iOS Safari's text autosizing uit: die herberekent bij een rotatie per
       tekstcluster een vergrotingsfactor, en na landscape → terug naar staand
       bleef de sheet-tekst opgeblazen staan terwijl de rest klein bleef. */
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    /* Nooit horizontaal kunnen pannen: op mobiel schuiven position:fixed-elementen
       (tabbalk, vaste koppen) anders visueel mee zodra iets de pagina breder maakt.
       'clip' maakt geen scrollcontainer aan, dus sticky/fixed blijven werken. */
    overflow-x: clip;
    /* De browser-eigen trek-om-te-verladen (Chrome Android) uit: de app heeft zijn
       eigen trek-om-te-verversen op de werkvoorraadlijsten (PullToRefresh.razor). */
    overscroll-behavior-y: contain;
    background: var(--agri-canvas);
    color: var(--agri-ink);
    font-family:
        -apple-system,
        BlinkMacSystemFont,
        "SF Pro Text",
        "SF Pro Display",
        "Helvetica Neue",
        Arial,
        sans-serif;
    letter-spacing: 0;
}

/* Typografische basis: één tandje kleiner dan de browserstandaard, app-breed.
   Alles is in rem gezet, dus teksten én afstanden schalen hier op mee. */
:root {
    font-size: 15px;
}

button,
input {
    font: inherit;
}

/* iOS zoomt automatisch in op invoervelden met tekst kleiner dan 16px:
   invoer blijft daarom altijd minimaal 16px, wat de rem-basis ook is */
input,
textarea,
select {
    font-size: max(1rem, 16px);
}

button {
    color: inherit;
    font-weight: 600;
}

a {
    color: var(--agri-accent);
}

h1:focus {
    outline: none;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    line-height: 1.14;
}

h1 {
    font-size: var(--agri-h1-size);
    font-weight: 500;
}

h2 {
    margin: 1.25rem 0 .4rem;
    font-size: var(--agri-h2-size);
    font-weight: 500;
}

h3 {
    margin: 1.25rem 0 .4rem;
    font-size: var(--agri-h3-size);
    font-weight: 500;
}

h4 {
    font-size: var(--agri-h4-size);
    font-weight: 500;
}

h5 {
    font-size: var(--agri-h5-size);
}

h6 {
    font-size: var(--agri-h6-size);
}

.app-shell {
    min-height: 100dvh;
    background: #fff;
}

.app-shell__surface {
    --app-shell-top-padding: clamp(1.1rem, 5vw, 2rem);
    --app-shell-inline-padding: clamp(1rem, 5vw, 2.25rem);
    width: min(100%, 920px);
    min-height: 100dvh;
    margin: 0 auto;
    padding: var(--app-shell-top-padding) var(--app-shell-inline-padding) 7.8rem;
}

.app-shell__surface--plain {
    padding-bottom: max(2.4rem, env(safe-area-inset-bottom));
}

.app-shell__navigation {
    position: fixed;
    left: 50%;
    right: auto;
    bottom: max(1rem, env(safe-area-inset-bottom));
    z-index: 20;
    width: min(calc(100% - 2rem), 860px);
    transform: translateX(-50%);
}

.section-heading h2 {
    margin: 0;
    color: var(--agri-ink);
    font-weight: 800;
    line-height: 1.08;
}

.section-heading p {
    margin: .32rem 0 0;
    color: var(--agri-muted);
    font-size: clamp(1rem, 3vw, 1.3rem);
}

.app-icon {
    display: block;
    flex: 0 0 auto;
    stroke: currentColor;
    stroke-width: 2.15;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.glass-tabbar,
.search-box {
    border: 1px solid rgba(16, 42, 38, .08);
    background: rgba(255, 255, 255, .78);
    box-shadow: 0 6px 18px rgba(31, 41, 55, .06), inset 0 1px 0 rgba(255, 255, 255, .8);
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
}

.avatar {
    display: grid;
    width: 4rem;
    height: 4rem;
    place-items: center;
    overflow: hidden;
    border: 3px solid #fff;
    border-radius: 999px;
    background: linear-gradient(135deg, var(--agri-secondary), var(--agri-tertiary));
    color: #fff;
    font-weight: 800;
    box-shadow: 0 18px 38px rgba(17, 24, 39, .15);
}

.avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Eén gedeelde zoekbalkmaat voor de hele app (relatielijst, werkvoorraden,
   bestelflow, locatiekiezers en -panels): compacte pill van ±38px hoog.
   Varianten mogen alleen nog hun eigen huid (achtergrond) of breedtecontext hebben. */
.search-box {
    display: flex;
    align-items: center;
    gap: .55rem;
    width: 100%;
    min-height: 2.55rem;
    padding: 0 1.05rem;
    border-radius: 999px;
    color: var(--agri-ink);
    cursor: text;
}

.search-box .app-icon {
    width: 18px;
    height: 18px;
    color: #8b8d91;
}

.search-box input {
    width: 100%;
    min-width: 0;
    border: 0;
    outline: none;
    background: transparent;
    color: var(--agri-ink);
    /* De 16px-ondergrens (iOS-zoombescherming) is hier ook meteen de maat */
    font-size: max(1rem, 16px);
    font-weight: 450;
}

/* Wisknopje (SearchBox.razor): verschijnt zodra er iets is ingevuld. De knop is alleen
   het raakvlak; rondje en kruis zijn samen één svg-tekening (zie het commentaar in het
   component), in de inktkleur zodat het per thema meekleurt. Iets naar de rand toe zodat
   het rondje optisch in het midden van de veldpadding hangt. */
.search-box__clear {
    display: block;
    flex: none;
    width: 1.5rem;
    height: 1.5rem;
    margin-right: -.3rem;
    padding: 0;
    border: 0;
    background: none;
    color: var(--agri-ink);
    cursor: pointer;
}

.search-box__clear:active {
    opacity: .7;
}

.search-box__clear svg {
    display: block;
    width: 100%;
    height: 100%;
}

.search-box input::placeholder {
    color: #8b8d91;
}

.relations-page {
    /* Startwaarde vóór de JS-meting (RelationsOverview.razor.js meet de echte hoogte):
       kop ±9px + headerrij ±59px + gap 18px + zoekbalk ±38px + voet ±4px */
    --relations-top-height: 8.6rem;
    display: grid;
    gap: 1.2rem;
    padding-top: calc(var(--relations-top-height) + .25rem);
}

/* Tabpagina met alleen de profielavatar in de kop. Exact dezelfde maatvoering als
   .relations-page__top, zodat de avatar op alle tabs op precies dezelfde plek staat. */
.screen-page__top {
    position: fixed;
    top: 0;
    left: 50%;
    z-index: 16;
    display: grid;
    width: min(100%, 920px);
    padding: clamp(.6rem, 2.4vw, 1.1rem) var(--app-shell-inline-padding) .3rem;
    transform: translateX(-50%);
}

/* DE matglasband van de app — de inhoud schuift er leesbaar onderdoor. Dit is de enige plek
   waar dat uiterlijk gedefinieerd staat; alle vaste kopzones hangen hier aan.
   De maatvoering (padding, gap, cursor) verschilt per scherm en blijft bij het scherm zelf.

   Op .screen-page__top een aparte klasse en niet de basisregel: een tabblad zonder inhoud die
   eronderdoor reist zou een blurlaag met een schaduw over lege ruimte leggen. Home en Historie
   hebben hem daarom niet. */
.screen-page__top--glass,
.relations-page__top,
.entry-worklist__top,
.trip-stop-panel .fullscreen-flow-panel__header {
    background: rgb(var(--agri-header-band-rgb) / .84);
    box-shadow: 0 14px 34px rgba(16, 42, 38, .05);
    -webkit-backdrop-filter: blur(18px) saturate(1.04);
    backdrop-filter: blur(18px) saturate(1.04);
}

/* Zachte uitloop onder de band, zodat de rand niet als een harde streep over de inhoud valt */
.screen-page__top--glass::after,
.relations-page__top::after,
.entry-worklist__top::after,
.trip-stop-panel .fullscreen-flow-panel__header::after {
    position: absolute;
    right: 0;
    bottom: -1.6rem;
    left: 0;
    height: 1.6rem;
    background: linear-gradient(180deg, rgb(var(--agri-header-band-rgb) / .58), rgb(var(--agri-header-band-rgb) / 0));
    content: "";
    pointer-events: none;
}

.relations-page__top {
    position: fixed;
    top: 0;
    left: 50%;
    z-index: 16;
    display: grid;
    gap: 1.2rem;
    width: min(100%, 920px);
    margin: 0;
    /* Compacte kopzone: ±9px lucht boven de kop, 18px naar de zoekbalk en een smalle
       voet — de lettergroep-kop "A" begint zo ±20px onder de zoekbalk */
    padding: clamp(.6rem, 2.4vw, 1.1rem) var(--app-shell-inline-padding) .3rem;
    /* De hele kopzone is klikbaar (zie OnTopClick in RelationsListPage) */
    cursor: pointer;
    transform: translateX(-50%);
}

.mobile-list-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0;
}

.mobile-list-header__copy {
    min-width: 0;
    margin-right: auto;
}

.mobile-list-header h2 {
    margin: 0;
    color: var(--agri-ink);
    font-size: calc(clamp(1.55rem, 5.5vw, 1.95rem) - 2px);
    font-weight: 700;
    line-height: 1.05;
}

.mobile-list-header p {
    margin: .16rem 0 0;
    color: color-mix(in srgb, var(--agri-ink) 36%, white);
    font-size: clamp(1rem, 3.65vw, 1.24rem);
    font-weight: 400;
    line-height: 1.1;
}

.profile-avatar-button {
    display: grid;
    flex: 0 0 auto;
    width: 3.95rem;
    height: 3.95rem;
    place-items: center;
    border: 0;
    border-radius: 999px;
    background: transparent;
    transition: transform 160ms ease, opacity 160ms ease;
}

.profile-avatar-button:not(:disabled):hover,
.profile-avatar-button:not(:disabled):focus-visible {
    opacity: .92;
    transform: translateY(-1px);
}

.profile-avatar-button:not(:disabled):active {
    transform: scale(.97);
}

.avatar--profile {
    width: 3.55rem;
    height: 3.55rem;
    background: #fff;
    border-width: 3px;
    color: var(--agri-ink);
    font-size: 1.1rem;
    box-shadow: 0 14px 34px rgba(16, 42, 38, .12);
}

/* Ronde actieknop in de lijstkop (nieuwe relatie), als broertje van de profielavatar */
.list-add-button {
    display: grid;
    flex: 0 0 auto;
    width: 3.55rem;
    height: 3.55rem;
    place-items: center;
    border: 0;
    border-radius: 999px;
    background: #fff;
    color: var(--agri-accent);
    box-shadow: 0 14px 34px rgba(16, 42, 38, .12);
    transition: transform 160ms ease, opacity 160ms ease;
}

.list-add-button:not(:disabled):hover,
.list-add-button:not(:disabled):focus-visible {
    opacity: .92;
    transform: translateY(-1px);
}

/* Royale zoekbalk op de vaste paginakoppen: tot ±16px van de schermrand, ook al
   staat de kop zelf op de bredere shell-inline-padding. width: auto laat de
   grid-stretch de negatieve marge symmetrisch opvangen; op smalle schermen wordt
   de marge nooit positief. Panel-varianten houden hun eigen breedtecontext. */
.relations-page__top .search-box,
.entry-worklist__top .search-box {
    width: auto;
    margin-inline: min(0rem, calc(16px - var(--app-shell-inline-padding, 1rem)));
}

.relations-list-shell {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 1.65rem;
    gap: .35rem;
    align-items: start;
    margin-top: -1rem;
    padding-top: 1rem;
}

.relations-list {
    min-width: 0;
}

.relations-letter-group h2 {
    margin: .8rem .45rem .35rem;
    font-size: .88rem;
    font-weight: 550;
}

.relations-list-card {
    overflow: hidden;
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 6px 20px rgba(16, 42, 38, .05);
}

.relation-list-item {
    position: relative;
    display: grid;
    grid-template-columns: 3rem minmax(0, 1fr);
    gap: .65rem;
    align-items: center;
    width: 100%;
    min-height: 4.1rem;
    padding: .5rem .8rem .5rem .7rem;
    border: 0;
    background: #fff;
    color: var(--agri-ink);
    text-align: left;
    transition: background-color 150ms ease, transform 150ms ease;
}

/* Scheidingslijn springt in vanaf de tekstkolom, zoals in een native contactenlijst */
.relation-list-item + .relation-list-item::before {
    position: absolute;
    top: 0;
    right: 0;
    left: 4.35rem;
    height: 1px;
    background: rgba(16, 42, 38, .08);
    content: "";
}

.relation-list-item:not(:disabled):hover,
.relation-list-item:not(:disabled):focus-visible {
    background: #f8faf7;
}

.relation-list-item:not(:disabled):active {
    transform: scale(.995);
}

.relation-list-item__avatar {
    width: 3rem;
    height: 3rem;
    border: 0;
    background: #edf2ee;
    box-shadow: none;
    color: var(--agri-ink);
    font-size: .9rem;
    font-weight: 500;
}

/* Iconen in een lijstavatar volgen de lichtere lijnvoering van de tabbalk (1.7): de
   basisdikte van 2.15 oogt op deze grootte, in een gevulde cirkel, te zwaar */
.relation-list-item__avatar .app-icon {
    stroke-width: 1.7;
}

.relation-list-item__content {
    display: grid;
    min-width: 0;
    gap: .16rem;
}

/* Uitzonderingsmodel relatiesoort: de debiteur (de norm) houdt de gewone donkere
   naamkleur, alleen afwijkende soorten kleuren (CashflowPro-kleuren; prospect
   gedempt — 'nog geen klant') */
.relation-list-item__content strong.relation-name--creditor { color: #9f1d33; }
.relation-list-item__content strong.relation-name--both { color: #6b0073; }
.relation-list-item__content strong.relation-name--prospect { color: var(--agri-muted); }

/* Factuurrijen in de dossier-samenvattingen: bedrag boven, flair eronder, rechts
   uitgelijnd. De flairs zelf (rdi-flair) staan bij het facturenview-blok (rdi-).
   Eigen kolomsjabloon met max-content rechts: de smalle-schermvariant van .list-row
   zakt naar twee kolommen (waardoor het bedrag als impliciet grid-item afkapte) —
   hier houdt de rechterkolom altijd voorrang en krimpt de tekstkolom met ellipsis. */
.list-row.rd-invoice-row,
.list-row.rd-order-row {
    grid-template-columns: 4.2rem minmax(0, 1fr) max-content;
}

@media (max-width: 520px) {
    .list-row.rd-invoice-row,
    .list-row.rd-order-row {
        grid-template-columns: 3.6rem minmax(0, 1fr) max-content;
    }
}

.rd-invoice-row__right,
.rd-order-row__right {
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    gap: .25rem;
    align-items: flex-end;
}

.rd-invoice-row__amount,
.rd-order-row__amount {
    color: var(--agri-ink);
    font-size: .95rem;
    font-weight: 650;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.relation-list-item__content strong {
    overflow: hidden;
    color: #20242c;
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.14;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.relation-list-item__content span {
    overflow: hidden;
    color: color-mix(in srgb, #20242c 42%, white);
    font-size: .87rem;
    font-weight: 450;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.relations-alpha-index {
    position: fixed;
    top: calc(var(--relations-top-height, 8.6rem) + .4rem);
    bottom: calc(3.9rem + .4rem + max(1rem, env(safe-area-inset-bottom)));
    right: max(.45rem, calc((100vw - 920px) / 2 + .45rem));
    z-index: 15;
    display: grid;
    align-content: center;
    justify-items: center;
    gap: .05rem;
    padding: .15rem 0;
    /* Vegen over de balk is navigeren (connectAlphaIndex), niet scrollen */
    touch-action: none;
}

.relations-alpha-index button {
    width: 1.45rem;
    height: 1.08rem;
    padding: 0;
    border: 0;
    border-radius: 5px;
    background: transparent;
    color: var(--agri-accent);
    font-size: .86rem;
    font-weight: 750;
    line-height: 1;
}

.relations-alpha-index button.is-active {
    background: var(--agri-accent);
    color: #fff;
}

.relations-alpha-index button:disabled {
    color: color-mix(in srgb, var(--agri-accent) 28%, white);
}

.relations-state {
    display: grid;
    gap: .8rem;
    justify-items: center;
    padding: 3.2rem 1rem;
    color: color-mix(in srgb, var(--agri-ink) 52%, white);
    text-align: center;
}

.relations-state--error {
    color: #a22828;
}

.relations-cache-note {
    padding: .9rem 1rem;
    border-radius: 14px;
    background: var(--agri-accent-soft);
    color: var(--agri-tertiary);
    font-size: .95rem;
    font-weight: 600;
}

.user-profile-scroll-lock {
    overflow: hidden;
}

/* De profielpagina is een transparante, vaste laag; de eigenlijke presentatie (inschuiven van
   onderaf, afronding, sluitanimatie) doet de ProfileOverlayPanel-kaart erbinnen, exact zoals
   Instellingen. De subpanelen schuiven als absolute lagen hier bovenop. */
.user-profile-page {
    position: fixed;
    inset: 0;
    z-index: 80;
    overflow: hidden;
    color: var(--agri-ink);
}

.user-profile-close {
    position: absolute;
    top: max(1.8rem, env(safe-area-inset-top));
    left: clamp(1.25rem, 4vw, 2.1rem);
    /* Boven de contentlaag (z-index 1): de sluitknop blijft bereikbaar als de
       profielsheet helemaal omhoog getrokken is. */
    z-index: 2;
    display: grid;
    width: 2.3rem;
    height: 2.3rem;
    place-items: center;
    border: 1px solid rgba(255, 255, 255, .86);
    border-radius: 999px;
    background: rgba(255, 255, 255, .78);
    color: #10151a;
    box-shadow: 0 22px 44px rgba(16, 42, 38, .14), inset 0 1px 0 rgba(255, 255, 255, .88);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    transition: transform 130ms ease, background-color 130ms ease, box-shadow 130ms ease;
}

.user-profile-close .app-icon {
    width: 1.55rem;
    height: 1.55rem;
}

.user-profile-close:not(:disabled):hover,
.user-profile-close:not(:disabled):focus-visible,
.user-profile-close--pressed {
    background: #fff;
    box-shadow: 0 0 0 .55rem rgba(255, 255, 255, .42), 0 22px 44px rgba(16, 42, 38, .18);
    transform: scale(1.08);
}

.user-profile-close:not(:disabled):active {
    transform: scale(1.02);
}

/* Profielkaart met een foto-hero boven de direct zichtbare instellingen. De basisinzet
   en afgeronde bovenhoeken van ProfileOverlayPanel blijven behouden. */
.profile-overlay-panel.profile-overlay-panel--profile-hero {
    --profile-hero-h: clamp(250px, 42dvh, 430px);
    padding: 0;
}

/* --hero-fade (0 rust → 1 kaart volledig over de foto, gezet door UserProfilePage.razor.js)
   dooft de foto evenredig mee: transparanter én grijzer naarmate de kaart hoger schuift.
   Andersom, onder de rustpositie, zakt de onderrand met --hero-pull mee met de kaart en
   vergroot --hero-grow de foto daarbinnen in verhouding.

   Het vak zelf schaalt bewust niet mee: dan zou het breder worden dan het paneel en hangen de
   bovenhoeken af van hoe de browser een uitvergrote laag afknipt — precies daar ging het mis.
   Nu houdt de hero exact de maat en de ronding van het paneel, en knipt hij de foto zelf af. */
.profile-hero {
    height: calc(var(--profile-hero-h) + var(--hero-pull, 0px));
    overflow: hidden;
    border-radius: inherit;
    background: color-mix(in srgb, var(--agri-accent) 14%, white);
    opacity: calc(1 - var(--hero-fade, 0) * .6);
    filter: grayscale(calc(var(--hero-fade, 0) * 75%));
    transition: height var(--hero-spring, 340ms) cubic-bezier(.22, .61, .36, 1);
    will-change: opacity, filter, height;
}

.profile-hero__photo {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 35%;
    /* Vanaf de bovenrand vergroten: de foto groeit dezelfde kant op als het vak eronder */
    transform: scale(var(--hero-grow, 1));
    transform-origin: top center;
    transition: transform var(--hero-spring, 340ms) cubic-bezier(.22, .61, .36, 1);
    will-change: transform;
}

.profile-hero__fallback {
    display: grid;
    width: 100%;
    height: 100%;
    place-items: center;
    color: color-mix(in srgb, var(--agri-accent) 55%, white);
}

/* De contentlaag is één scroller over de hele kaart: een transparante spacer ter hoogte
   van de hero + de witte sheet erachteraan. Omhoog vegen schuift zo de sheet over de foto
   en onthult daarna naadloos de rest van de inhoud (maps-stijl); de sheet blijft vrij staan
   waar je loslaat — bewust geen snap. De basis-touch-action (none, voor de sluit-sleep)
   moet hier pan-y worden, anders blokkeert de keten touch-scrollen op mobiel. */
.profile-overlay-panel.profile-overlay-panel--profile-hero {
    touch-action: pan-y;
}

/* Bewust pointer-events: auto — een scroller die zelf niet hit-testbaar is (none) pant
   niet op touch. Vegen op de foto scrolt daardoor ook de kaart (maps-gedrag); de
   sluitknop ligt op z-index 2 en blijft bereikbaar. */
.profile-overlay-panel--profile-hero .profile-overlay-panel__content {
    position: absolute;
    inset: 0;
    z-index: 1;
    display: block;
    overflow: hidden auto;
    /* none, niet contain: de eigen rubberband van de browser zou de kaart onder de
       rustpositie laten zakken zonder dat de foto meegroeit — dat rekken doen we zelf */
    overscroll-behavior: none;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-y;
    pointer-events: auto;
    scrollbar-width: none;
}

.profile-overlay-panel--profile-hero .profile-overlay-panel__content::-webkit-scrollbar {
    display: none;
}

/* De spacer houdt de kaart op rusthoogte onder de foto. Vegen op de foto-zone scrolt de
   kaart (maps-gedrag); omlaag vegen op rustpositie heeft geen scrollruimte en laat zo de
   sleep-om-te-sluiten van het paneel gewoon doorlopen. */
.user-profile-sheet-spacer {
    height: calc(var(--profile-hero-h) - 26px);
}

/* --hero-pull is de rek die de kaart onder haar rustpositie meekrijgt; de hero groeit er in
   dezelfde stap evenveel op door, dus de 26px overlap met de foto blijft staan.
   min-height 100%: de kaart is altijd minstens een volle scrollhoogte, zodat er ook bij weinig
   inhoud (ruim venster) genoeg scrollruimte is om haar helemaal over de foto te schuiven. Met
   'de rest onder de hero' bleef er op een hoog venster niets te scrollen over: de kaart kwam
   dan geen millimeter omhoog en de foto doofde dus ook nooit. */
.user-profile-sheet {
    position: relative;
    min-height: 100%;
    border-radius: 26px 26px 0 0;
    background: #fff;
    box-shadow: 0 -12px 38px rgba(16, 42, 38, .12);
    transform: translate3d(0, var(--hero-pull, 0px), 0);
    transition: transform var(--hero-spring, 340ms) cubic-bezier(.22, .61, .36, 1);
    pointer-events: auto;
}

/* In de hoekgaatjes van de kaartronding schijnt de vervaagde foto door; deze vullers
   kleuren dat gebied kaartwit, maar pas in het laatste stuk van de fade (vanaf .7) —
   eerder zouden het witte vlekjes óp de foto zijn */
.user-profile-sheet::before,
.user-profile-sheet::after {
    content: "";
    position: absolute;
    top: 0;
    width: 26px;
    height: 26px;
    opacity: clamp(0, calc((var(--hero-fade, 0) - .7) / .3), 1);
    pointer-events: none;
}

.user-profile-sheet::before {
    left: 0;
    background: radial-gradient(circle at 100% 100%, transparent 25.5px, #fff 26.5px);
}

.user-profile-sheet::after {
    right: 0;
    background: radial-gradient(circle at 0% 100%, transparent 25.5px, #fff 26.5px);
}

/* De naamkop plakt bovenin zodra de sheet helemaal boven staat; de inhoud scrolt eronderdoor. */
.user-profile-sheet__header {
    position: sticky;
    top: 0;
    z-index: 1;
    display: grid;
    justify-items: center;
    gap: .55rem;
    min-height: 6rem;
    padding: .7rem clamp(3.7rem, 15vw, 6rem) .8rem;
    border-radius: 26px 26px 0 0;
    background: #fff;
    cursor: grab;
    user-select: none;
}

.user-profile-sheet__header:active {
    cursor: grabbing;
}

.user-profile-sheet__handle {
    width: 2.8rem;
    height: .3rem;
    border-radius: 999px;
    background: color-mix(in srgb, var(--agri-border) 78%, transparent);
}

.user-profile-card__name {
    margin: 0;
    color: #171b22;
    font-size: clamp(1.7rem, 6.4vw, 2.5rem);
    font-weight: 650;
    line-height: 1.05;
    text-align: center;
    overflow-wrap: anywhere;
}

.user-profile-card__body {
    display: grid;
    align-content: start;
    /* Ruime voet onder de laatste sectie (Omgeving) — oogt rustiger dan strak afkappen */
    padding: .25rem clamp(1rem, 4vw, 2rem) max(4.6rem, calc(env(safe-area-inset-bottom) + 3rem));
}

.user-profile-actions {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(.65rem, 3vw, 1.2rem);
    margin: .8rem 0 2.2rem;
}

.user-profile-action {
    display: grid;
    min-width: 0;
    min-height: 7.1rem;
    align-content: center;
    justify-items: center;
    gap: .65rem;
    padding: .8rem .45rem;
    border: 0;
    border-radius: 24px;
    background: #f5f5f5;
    color: var(--agri-accent);
    transition: background-color 160ms ease, transform 160ms ease, color 160ms ease;
}

.user-profile-action span {
    overflow: hidden;
    width: 100%;
    padding: 0 .12rem .14rem;
    color: #1d2229;
    font-size: clamp(.86rem, 3.1vw, 1.05rem);
    font-weight: 600;
    line-height: 1.22;
    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.user-profile-action:not(:disabled):hover,
.user-profile-action:not(:disabled):focus-visible {
    background: var(--agri-accent-soft);
    transform: translateY(-1px);
}

.user-profile-action:not(:disabled):active {
    background: var(--agri-accent);
    color: #fff;
    transform: scale(.985);
}

.user-profile-action:not(:disabled):active span {
    color: #fff;
}

.user-profile-photo-message {
    margin: -1rem 0 1.2rem;
    color: #a22828;
    font-size: .95rem;
    font-weight: 600;
    text-align: center;
}

.user-profile-section {
    margin: 0 calc(-1 * clamp(1rem, 4vw, 2rem));
    padding: 1.15rem clamp(1rem, 4vw, 2rem) .35rem;
}

.user-profile-section h2 {
    margin: .15rem 0 1rem;
    color: #1b2027;
    font-size: clamp(1.25rem, 5vw, 1.65rem);
    font-weight: 650;
}

.user-profile-info-card,
.user-profile-access-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    min-height: 5.2rem;
    padding: 1rem 1.25rem;
    border-radius: 18px;
    background: #f5f5f5;
}

/* Info-kaart: label bovenaan over de volle breedte, waarde eronder */
.user-profile-info-card {
    flex-direction: column;
    align-items: flex-start;
    gap: .3rem;
    margin-bottom: 10px;
}

.user-profile-info-card strong {
    width: 100%;
}

.user-profile-info-card span {
    text-align: left;
}

.user-profile-info-card strong,
.user-profile-access-card strong {
    color: #1b2027;
    font-size: clamp(1rem, 4vw, 1.22rem);
    font-weight: 650;
}

.user-profile-info-card span,
.user-profile-access-card span {
    min-width: 0;
    overflow: hidden;
    color: var(--agri-accent);
    font-size: clamp(.98rem, 3.8vw, 1.2rem);
    font-weight: 500;
    text-align: right;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.user-profile-access-card {
    align-items: flex-start;
    flex-direction: column;
}

.user-profile-access-card span {
    color: color-mix(in srgb, var(--agri-ink) 45%, white);
    text-align: left;
}

.user-profile-access-card + .user-profile-access-card {
    margin-top: .85rem;
}

/* Knopvariant: toont de actieve werkomgeving en opent het wisselpaneel */
.user-profile-access-card--action {
    flex-direction: row;
    align-items: center;
    width: 100%;
    margin-bottom: 10px;
    border: 0;
    color: var(--agri-accent);
    font: inherit;
    cursor: pointer;
}

.user-profile-access-card--action .user-profile-access-card__text {
    display: grid;
    flex: 1;
    gap: .2rem;
    min-width: 0;
    overflow: visible;
    white-space: normal;
}

.user-profile-subpage {
    position: absolute;
    inset: 0;
    z-index: 6;
    display: grid;
    align-content: start;
    gap: 2rem;
    padding: max(1.3rem, env(safe-area-inset-top)) clamp(1.1rem, 4vw, 2rem) 2rem;
    background: #fff;
    animation: userProfileSubpageIn 220ms ease both;
}

.user-profile-subpage__back {
    display: inline-flex;
    align-items: center;
    justify-self: start;
    gap: .35rem;
    min-height: 3.2rem;
    padding: 0 .85rem 0 0;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: var(--agri-ink);
}

.user-profile-subpage h1 {
    margin: 0;
    font-size: var(--agri-h1-size);
    font-weight: 600;
}

.user-profile-subpage p {
    margin: .5rem 0 0;
    color: var(--agri-muted);
    font-size: 1rem;
}

.profile-overlay-panel {
    position: absolute;
    top: max(5dvh, env(safe-area-inset-top));
    right: 0;
    bottom: 0;
    left: 0;
    z-index: var(--profile-overlay-z, 12);
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    padding: max(1.05rem, env(safe-area-inset-top)) clamp(1rem, 4vw, 2rem) max(1.6rem, env(safe-area-inset-bottom));
    border-radius: 36px 36px 0 0;
    background: #fff;
    box-shadow: 0 -24px 70px rgba(16, 42, 38, .18);
    opacity: 0;
    overflow: hidden;
    pointer-events: none;
    touch-action: none;
    transition:
        transform 340ms cubic-bezier(.22, .61, .36, 1),
        opacity 180ms ease;
}

.profile-overlay-panel--from-bottom {
    transform: translate3d(0, calc(100% + 2rem), 0);
}

.profile-overlay-panel--from-right {
    transform: translate3d(100%, 0, 0);
}

.profile-overlay-panel--open {
    opacity: 1;
    pointer-events: auto;
    transform: translate3d(0, var(--profile-overlay-drag, 0), 0);
}

.profile-overlay-panel--leaving-down {
    opacity: 1;
    transform: translate3d(0, calc(100% + 2rem), 0) !important;
}

.profile-overlay-panel--leaving-right {
    opacity: 1;
    transform: translate3d(100%, 0, 0) !important;
}

.profile-overlay-panel--dragging {
    transition: none;
}

.profile-overlay-panel__nav.user-profile-close {
    top: max(1.25rem, env(safe-area-inset-top));
    left: clamp(1.25rem, 4vw, 2.1rem);
    z-index: 2;
}

.profile-overlay-panel__header {
    display: grid;
    min-height: 4.2rem;
    place-items: center;
    padding: .2rem 3.2rem 1.05rem;
}

.profile-overlay-panel__header h1 {
    margin: 0;
    color: var(--agri-ink);
    font-size: clamp(1.45rem, 5.4vw, 2rem);
    font-weight: 650;
    line-height: 1.08;
    text-align: center;
}

.profile-overlay-panel__content {
    display: grid;
    min-height: 0;
    overflow: hidden auto;
    /* Voorkom dat een veeg in de inhoud doorschiet naar de pagina erachter (iOS scroll-chain) */
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
}

/* Optioneel FooterContent-slot: een derde grid-rij onder de scrollende inhoud, met
   een gradient-fade zodat de inhoud netjes onder de vaste knop wegloopt (de kop blijft
   rij 1, de scroll-inhoud rij 2, de footer rij 3) */
.profile-overlay-panel--has-footer {
    grid-template-rows: auto minmax(0, 1fr) auto;
}

.profile-overlay-panel__footer {
    position: relative;
    padding: 1.05rem 0 max(.2rem, env(safe-area-inset-bottom));
}

.profile-overlay-panel__footer::before {
    position: absolute;
    right: 0;
    bottom: 100%;
    left: 0;
    height: 1.5rem;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0), #fff);
    pointer-events: none;
    content: "";
}

.profile-settings-panel,
.profile-terms-panel {
    display: flex;
    flex-direction: column;
    min-height: 100%;
}

.profile-terms-panel {
    gap: 1rem;
    padding-bottom: .5rem;
}

.profile-settings-menu {
    display: grid;
    margin: .55rem calc(-1 * clamp(1rem, 4vw, 2rem)) 0;
}

.profile-settings-menu__item {
    display: grid;
    grid-template-columns: 3.25rem minmax(0, 1fr) 2.5rem;
    gap: 1rem;
    align-items: center;
    min-height: 5.35rem;
    padding: .7rem clamp(1.25rem, 4.5vw, 2.05rem);
    border: 0;
    border-bottom: 1px solid rgba(16, 42, 38, .07);
    background: transparent;
    color: #171b22;
    text-align: left;
    transition: background-color 150ms ease, color 150ms ease;
}

.profile-settings-menu__item span {
    overflow: hidden;
    color: inherit;
    font-size: clamp(1.18rem, 5vw, 1.55rem);
    font-weight: 400;
    line-height: 1.16;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.profile-settings-menu__item .app-icon {
    stroke-width: 1.75;
}

.profile-settings-menu__item .app-icon:last-child {
    justify-self: end;
}

.profile-settings-menu__item:not(:disabled):hover,
.profile-settings-menu__item:not(:disabled):focus-visible {
    background: color-mix(in srgb, var(--agri-accent) 9%, white);
    color: var(--agri-accent);
}

.profile-settings-menu__item:not(:disabled):active {
    background: color-mix(in srgb, var(--agri-accent) 16%, white);
}

.profile-settings-panel__footer {
    margin: auto 0 40px;
    padding-top: 2rem;
    color: color-mix(in srgb, var(--agri-ink) 38%, white);
    font-size: clamp(.95rem, 3.5vw, 1.08rem);
    font-weight: 300;
    text-align: center;
}

.profile-settings-panel__footer strong {
    font-weight: 500;
}

/* --- Over deze app: hero-teamfoto met titel + website-links --- */
.about-panel {
    display: flex;
    flex-direction: column;
    gap: 1.4rem;
    min-height: 100%;
}

.about-hero {
    position: relative;
    overflow: hidden;
    /* Expliciete breedte: als flex-item leverde de gestrekte breedte geen definitieve
       maat op en bleef de aspect-ratio-hoogte anders op de min-height hangen */
    width: 100%;
    min-height: 15.5rem;
    /* Meegroeien in de verhouding van team.jpg (1536×1024 = 3:2): op tablets werd
       de hero met alleen de vaste min-height een strook van ±3:1, waarin cover
       enkel nog een horizontale middenband van de foto liet zien. De max houdt de
       hero op brede/liggende schermen onder de helft van het beeldscherm. */
    aspect-ratio: 3 / 2;
    max-height: min(52dvh, 30rem);
    margin-top: .3rem;
    border-radius: 26px;
    /* Fallback wanneer team.jpg ontbreekt: themed gradient i.p.v. een kapot plaatje */
    background: linear-gradient(150deg, color-mix(in srgb, var(--agri-accent) 92%, white), var(--agri-tertiary));
}

.about-hero__photo {
    position: absolute;
    inset: 0;
    /* Waar tóch hoogte-crop overblijft (de max-height hierboven): iets boven het
       midden uitsnijden, daar staan de gezichten */
    background-position: 50% 25%;
    background-size: cover;
    background-repeat: no-repeat;
}

.about-hero__scrim {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(16, 24, 32, .05) 0%, rgba(16, 24, 32, .12) 42%, rgba(16, 24, 32, .72) 100%);
}

.about-hero__text {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    padding: 1.4rem;
}

.about-hero__text h1 {
    margin: 0;
    color: #fff;
    font-size: clamp(1.5rem, 6.4vw, 2.05rem);
    font-weight: 700;
    line-height: 1.12;
    text-wrap: balance;
    text-shadow: 0 2px 14px rgba(0, 0, 0, .35);
}

.about-hero__text strong {
    font-weight: 800;
}

.about-links {
    display: grid;
    margin: 0 calc(-1 * clamp(1rem, 4vw, 2rem));
}

.about-link {
    display: grid;
    grid-template-columns: 2.6rem minmax(0, 1fr) 1.6rem;
    gap: 1rem;
    align-items: center;
    min-height: 4rem;
    padding: .7rem clamp(1rem, 4vw, 2rem);
    color: var(--agri-ink);
    text-decoration: none;
    transition: background-color 150ms ease;
}

.about-link + .about-link {
    box-shadow: inset 0 1px 0 rgba(16, 42, 38, .08);
}

.about-link__icon {
    display: grid;
    place-items: center;
    color: var(--agri-accent);
}

.about-link__label {
    min-width: 0;
    font-size: 1.08rem;
    font-weight: 600;
}

.about-link .app-icon:last-child {
    color: color-mix(in srgb, var(--agri-ink) 40%, white);
}

@media (hover: hover) {
    .about-link:hover {
        background: var(--agri-subtle);
    }
}

.about-social {
    display: flex;
    justify-content: center;
    margin-top: .4rem;
}

.about-social__link {
    display: grid;
    place-items: center;
    width: 3.2rem;
    height: 3.2rem;
    border-radius: 999px;
    background: color-mix(in srgb, var(--agri-ink) 8%, white);
    color: color-mix(in srgb, var(--agri-ink) 62%, white);
    transition: background-color 150ms ease, color 150ms ease;
}

@media (hover: hover) {
    .about-social__link:hover {
        background: var(--agri-accent-soft);
        color: var(--agri-accent);
    }
}

.signout-sheet-backdrop {
    position: absolute;
    inset: 0;
    z-index: 5;
    padding: 0;
    border: 0;
    background: color-mix(in srgb, var(--agri-ink) 34%, transparent);
    opacity: 0;
    transition: opacity 240ms ease;
}

.signout-sheet-backdrop--open {
    opacity: 1;
}

.signout-sheet {
    position: absolute;
    right: clamp(.9rem, 3vw, 1.4rem);
    bottom: max(1rem, env(safe-area-inset-bottom));
    left: clamp(.9rem, 3vw, 1.4rem);
    z-index: 6;
    display: grid;
    gap: .65rem;
    padding: 1.15rem 1.15rem 1.05rem;
    border-radius: 26px;
    background: var(--agri-panel);
    box-shadow: var(--agri-shadow);
    transform: translate3d(0, calc(100% + 3rem), 0);
    transition: transform 300ms cubic-bezier(.32, .72, .33, 1);
}

.signout-sheet--open {
    /* --signout-drag: live sleep-offset (alleen omlaag) voor wegschuiven-naar-beneden;
       zonder sleep gewoon 0px, dus bestaande gebruikers (afmelden) veranderen niet */
    transform: translate3d(0, var(--signout-drag, 0px), 0);
}

.signout-sheet--dragging {
    transition: none;
}

/* Afrond-bevestiging in het Bijtippen-orderscherm: zelfde signout-vormtaal, maar fixed
   boven het van-rechts-inschuivende orderpaneel (z-index 30) */
.topup-confirm-backdrop {
    position: fixed;
    z-index: 34;
}

.topup-confirm {
    position: fixed;
    z-index: 35;
    touch-action: none;
}

.signout-sheet p {
    margin: .2rem .5rem .55rem;
    color: var(--agri-muted);
    font-size: .98rem;
    line-height: 1.45;
    text-align: center;
}

.signout-sheet button {
    min-height: 3.4rem;
    border-radius: 999px;
    font-size: 1.05rem;
    font-weight: 600;
    transition: filter 150ms ease, background-color 150ms ease;
}

.signout-sheet button:disabled {
    opacity: .62;
}

.signout-sheet__confirm {
    border: 0;
    background: var(--agri-accent);
    color: #fff;
}

.signout-sheet__confirm:not(:disabled):hover,
.signout-sheet__confirm:not(:disabled):focus-visible {
    filter: brightness(.94);
}

.signout-sheet__cancel {
    border: 1px solid var(--agri-border);
    background: var(--agri-subtle);
    color: var(--agri-ink);
}

.signout-sheet__cancel:not(:disabled):hover,
.signout-sheet__cancel:not(:disabled):focus-visible {
    background: color-mix(in srgb, var(--agri-ink) 8%, white);
}

@keyframes userProfileSubpageIn {
    from {
        opacity: 0;
        transform: translateX(1rem);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.photo-capture-dialog {
    position: fixed;
    inset: 0;
    z-index: 150;
    display: grid;
    place-items: center;
    padding: max(1.25rem, env(safe-area-inset-top)) clamp(1rem, 6vw, 3rem) max(1.25rem, env(safe-area-inset-bottom));
    background: rgba(0, 0, 0, .34);
}

.photo-capture-dialog__backdrop {
    position: absolute;
    inset: 0;
    border: 0;
    background: transparent;
}

.photo-source-sheet {
    position: relative;
    z-index: 1;
    display: grid;
    gap: .7rem;
    width: min(100%, 28rem);
    padding: clamp(1.35rem, 4.8vw, 1.9rem);
    border: 1px solid rgba(255, 255, 255, .82);
    border-radius: 34px;
    background: rgba(255, 255, 255, .9);
    box-shadow:
        0 26px 70px rgba(0, 0, 0, .22),
        inset 0 1px 0 rgba(255, 255, 255, .92);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    animation: photoSourceSheetIn 220ms ease both;
}

.photo-source-sheet__handle {
    display: none;
}

.photo-source-option {
    /* display + cursor: de 'Kies foto'-optie is een label (native bestandskiezer-
       koppeling voor iOS) en moet er exact als de knoppen uitzien */
    display: grid;
    place-items: center;
    min-height: clamp(3.75rem, 11vw, 4.6rem);
    border: 0;
    border-radius: 999px;
    background: rgba(213, 213, 211, .94);
    color: #050607;
    font-size: clamp(1.08rem, 4.8vw, 1.45rem);
    font-weight: 500;
    cursor: pointer;
    transition: background-color 150ms ease, color 150ms ease, transform 150ms ease;
}

.photo-source-option.is-disabled {
    pointer-events: none;
    opacity: .55;
}

.photo-source-option:not(:disabled):hover,
.photo-source-option:not(:disabled):focus-visible {
    background: rgba(225, 225, 223, .98);
}

.photo-source-option:not(:disabled):active {
    background: rgba(190, 190, 188, .98);
    color: #fff;
    transform: scale(.985);
}

.photo-source-option--cancel {
    color: #1a221f;
}

.photo-source-sheet__message {
    margin: .2rem .2rem 0;
    color: #a22828;
    font-size: .92rem;
    font-weight: 600;
    text-align: center;
}

.photo-capture-file-input {
    position: fixed;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.photo-capture-dialog--camera {
    /* Randloos, schermvullend zoals de native camera: geen dialoogpadding (die
       schoof het 100dvh-panel deels onder de schermrand) en het panel in beide
       richtingen uitrekken */
    place-items: stretch;
    padding: 0;
    background: #07100d;
}

.photo-capture-dialog--camera .photo-capture-dialog__backdrop {
    display: none;
}

.photo-camera-panel {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;
    min-height: 100dvh;
    color: #fff;
    background: #07100d;
}

.photo-camera-panel__header {
    display: grid;
    /* Beide zijkolommen even breed (rechts: lamp + wissel), zodat de titel gecentreerd blijft */
    grid-template-columns: 6.3rem minmax(0, 1fr) 6.3rem;
    gap: .6rem;
    align-items: center;
    padding: max(1rem, env(safe-area-inset-top)) 1rem .8rem;
}

.photo-camera-panel__header h1 {
    margin: 0;
    overflow: hidden;
    font-size: 1.05rem;
    font-weight: 600;
    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.photo-camera-panel__button {
    min-height: 2.75rem;
    border: 0;
    border-radius: 999px;
    background: rgba(255, 255, 255, .11);
    color: #fff;
    font-size: .92rem;
    font-weight: 300;
}

.photo-camera-panel__button:not(:disabled):active {
    background: rgba(255, 255, 255, .24);
}

.photo-camera-panel__tools {
    display: flex;
    gap: .55rem;
    align-items: center;
    justify-content: flex-end;
}

/* Ronde iconknoppen rechtsboven (zaklamp, camerawissel) in dezelfde vormtaal als de tekstknop */
.photo-camera-panel__iconbtn {
    display: grid;
    place-items: center;
    width: 2.75rem;
    height: 2.75rem;
    border: 0;
    border-radius: 999px;
    background: rgba(255, 255, 255, .11);
    color: #fff;
}

.photo-camera-panel__iconbtn:not(:disabled):active {
    background: rgba(255, 255, 255, .24);
}

/* Zaklamp aan: geel zoals de native camera-app */
.photo-camera-panel__iconbtn.is-on {
    background: rgba(255, 214, 10, .16);
    color: #ffd60a;
}

.photo-camera-panel__preview {
    position: relative;
    display: grid;
    min-height: 0;
    place-items: center;
    overflow: hidden;
    background: #010302;
    /* Pinch op de preview is camera-zoom; geen browser-pan/zoom-gebaren */
    touch-action: none;
}

/* WYSIWYG: de preview toont het volledige camerabeeld (4:3, zoals de stream nu wordt
   opgevraagd) — precies wat capturePhoto opslaat, ook mét camera-zoom. In liggende
   stand blijft het beeld daardoor altijd volledig zichtbaar, met zwarte balken opzij
   zoals de native camera-app; cover sneed op de iPad liggend de helft van de stream af. */
.photo-camera-panel__video {
    /* Absoluut, niet als grid-item met height:100%: dat percentage loste in de
       preview-cel op naar de intrinsieke hoogte (breedte × beeldverhouding), waardoor
       de video liggend onder de preview uitstak en het beeld onderaan werd afgekapt —
       de foto bevatte dan méér dan de preview liet zien. */
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* Selfie-preview als spiegel (native camera-gevoel); de opgeslagen foto blijft
   ongespiegeld, zoals ook iOS dat standaard doet */
.photo-camera-panel__video--mirrored {
    transform: scaleX(-1);
}

.photo-camera-panel__canvas {
    display: none;
}

/* Burst-flow: korte flits + teller met het aantal genomen foto's in deze sessie */
.photo-camera-panel__flash {
    position: absolute;
    inset: 0;
    z-index: 4;
    background: #fff;
    animation: photoCaptureFlash 220ms ease-out forwards;
    pointer-events: none;
}

@keyframes photoCaptureFlash {
    from {
        opacity: .7;
    }

    to {
        opacity: 0;
    }
}

.photo-camera-panel__count {
    position: absolute;
    top: .75rem;
    left: 50%;
    z-index: 3;
    padding: .3rem .8rem;
    border-radius: 999px;
    background: rgba(0, 0, 0, .55);
    color: #fff;
    font-size: .85rem;
    font-weight: 600;
    transform: translateX(-50%);
    pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
    .photo-camera-panel__flash {
        animation: none;
        opacity: 0;
    }
}

/* Raster + waterpas: JS legt dit kader exact op de zichtbare (contain-)uitsnede van de
   video, zodat de lijnen nooit in de zwarte balken vallen. Alleen preview, niet de foto. */
.photo-camera-frame {
    position: absolute;
    z-index: 2;
    opacity: 0;
    pointer-events: none;
    background-image:
        linear-gradient(to right,
            transparent calc(33.33% - .5px), rgba(255, 255, 255, .45) calc(33.33% - .5px) calc(33.33% + .5px),
            transparent calc(33.33% + .5px) calc(66.66% - .5px), rgba(255, 255, 255, .45) calc(66.66% - .5px) calc(66.66% + .5px),
            transparent calc(66.66% + .5px)),
        linear-gradient(to bottom,
            transparent calc(33.33% - .5px), rgba(255, 255, 255, .45) calc(33.33% - .5px) calc(33.33% + .5px),
            transparent calc(33.33% + .5px) calc(66.66% - .5px), rgba(255, 255, 255, .45) calc(66.66% - .5px) calc(66.66% + .5px),
            transparent calc(66.66% + .5px));
}

/* Waterpaslijn: draait mee met de scheefstand (JS zet transform) en wordt groen en
   recht zodra het toestel horizontaal is */
.photo-camera-frame__level {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 58%;
    height: 2px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .8);
    box-shadow: 0 0 6px rgba(0, 0, 0, .35);
    opacity: 0;
    transform: translate(-50%, -50%);
    transition: opacity 160ms ease, background-color 120ms ease;
}

.photo-camera-frame__level.is-visible {
    opacity: 1;
}

.photo-camera-frame__level.is-level {
    background: #30d158;
    box-shadow: 0 0 8px rgba(48, 209, 88, .5);
}

/* Snelzoom zoals iOS: rondjes onderin de preview; het actieve rondje toont de live
   factor ("2,7×"). Header en fotoknop staan buiten de preview en blijven bereikbaar. */
.photo-camera-zoombar {
    position: absolute;
    bottom: .9rem;
    left: 50%;
    z-index: 3;
    display: flex;
    gap: .25rem;
    padding: .3rem;
    border-radius: 999px;
    background: rgba(0, 0, 0, .38);
    transform: translateX(-50%);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
}

.photo-camera-zoombar:empty {
    display: none;
}

.photo-camera-zoombar button {
    min-width: 2.15rem;
    height: 2.15rem;
    padding: 0 .5rem;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: #fff;
    font-size: .78rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    transition: background-color 140ms ease, color 140ms ease;
}

.photo-camera-zoombar button.is-active {
    background: rgba(0, 0, 0, .55);
    color: #ffd60a;
    font-size: .84rem;
}

.photo-camera-panel__message {
    position: absolute;
    z-index: 2;
    display: grid;
    gap: .55rem;
    width: min(calc(100% - 3rem), 24rem);
    padding: 1.2rem;
    border-radius: 18px;
    background: rgba(255, 255, 255, .94);
    color: var(--agri-ink);
    text-align: center;
}

.photo-camera-panel__message strong {
    font-size: 1.05rem;
    font-weight: 650;
}

.photo-camera-panel__message span {
    color: color-mix(in srgb, var(--agri-ink) 58%, white);
    font-size: .95rem;
}

.photo-camera-panel__message button,
.photo-camera-panel__message label {
    display: grid;
    place-items: center;
    min-height: 3rem;
    margin-top: .25rem;
    border: 0;
    border-radius: 999px;
    background: var(--agri-accent);
    color: #fff;
    cursor: pointer;
}

.photo-camera-panel__footer {
    display: grid;
    place-items: center;
    min-height: 7rem;
    padding: .9rem 1rem max(1rem, env(safe-area-inset-bottom));
}

.photo-camera-capture {
    display: grid;
    width: 4.7rem;
    height: 4.7rem;
    place-items: center;
    border: 3px solid rgba(255, 255, 255, .86);
    border-radius: 999px;
    background: transparent;
    transform: translateY(-10px);
}

.photo-camera-capture span {
    width: 3.45rem;
    height: 3.45rem;
    border-radius: inherit;
    background: #fff;
}

.photo-camera-capture:disabled {
    opacity: .38;
}

.photo-camera-capture:not(:disabled):active {
    transform: translateY(-10px) scale(.96);
}

/* Liggend: opbouw zoals de native camera-app — links een smalle knoppenstrip
   (sluiten, lamp, wissel), midden het beeld op de volle schermhoogte, rechts de
   fotoknop-kolom. Er staat dan niets meer boven het beeld: de titel zweeft als
   pill over de bovenrand van het beeld, in dezelfde vormtaal als de opnameteller.
   Contain + volledig-frame-capture blijven de WYSIWYG-garantie. */
@media (orientation: landscape) {
    .photo-camera-panel {
        grid-template-areas: "header preview footer";
        grid-template-columns: auto minmax(0, 1fr) auto;
        grid-template-rows: minmax(0, 1fr);
    }

    .photo-camera-panel__header {
        grid-area: header;
        display: flex;
        flex-direction: column;
        gap: .55rem;
        align-items: center;
        padding: max(.8rem, env(safe-area-inset-top)) .7rem .8rem max(.8rem, env(safe-area-inset-left));
    }

    /* In de rasterheader gaf de vaste zijkolom de knop zijn breedte; in de strip
       moet zijn eigen padding dat doen */
    .photo-camera-panel__button {
        padding: 0 .95rem;
    }

    /* Absolute t.o.v. het camera-panel (dat schermvullend is), bewust niet fixed:
       binnen een gastheer met een eigen transform (paneellagen) zou fixed toch al
       aan die laag binden, en op iOS bleek zo'n fixed-in-transform-laag na rotatie
       fragiel in de hit-testing. */
    .photo-camera-panel__header h1 {
        position: absolute;
        top: .6rem;
        left: 50%;
        z-index: 5;
        max-width: min(58vw, 30rem);
        padding: .38rem .9rem;
        border-radius: 999px;
        background: rgba(0, 0, 0, .55);
        font-size: .92rem;
        transform: translateX(-50%);
        pointer-events: none;
    }

    .photo-camera-panel__tools {
        flex-direction: column;
    }

    .photo-camera-panel__preview {
        grid-area: preview;
    }

    /* Opnameteller onder de titel-pill houden */
    .photo-camera-panel__count {
        top: 3.2rem;
    }

    /* De preview loopt liggend tot de schermonderkant door; de zoomknoppen boven de
       gebarenbalk houden */
    .photo-camera-zoombar {
        bottom: max(.9rem, env(safe-area-inset-bottom));
    }

    .photo-camera-panel__footer {
        grid-area: footer;
        min-height: 0;
        padding: 1rem max(1.1rem, env(safe-area-inset-right)) max(1rem, env(safe-area-inset-bottom)) .9rem;
    }

    .photo-camera-capture {
        transform: none;
    }

    .photo-camera-capture:not(:disabled):active {
        transform: scale(.96);
    }
}

@keyframes photoSourceSheetIn {
    from {
        opacity: 0;
        transform: translateY(1rem) scale(.98);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.home-placeholder-page {
    display: flex;
    min-height: calc(100dvh - 10rem);
    flex-direction: column;
    color: var(--agri-ink);
}

.home-placeholder-page__top {
    display: flex;
    justify-content: flex-end;
}

.home-placeholder-page__avatar {
    width: 3.55rem;
    height: 3.55rem;
}

.home-placeholder-page__body {
    display: grid;
    flex: 1;
    place-items: center;
    padding: 2rem 0 6rem;
    text-align: center;
}

.home-placeholder-page h1 {
    margin: 0;
    font-size: var(--agri-h2-size);
    font-weight: 500;
}

.placeholder-page {
    display: grid;
    align-content: start;
    gap: 2rem;
    min-height: 100dvh;
    padding-top: clamp(1.4rem, 5vw, 2.4rem);
}

.placeholder-page__back {
    display: inline-flex;
    align-items: center;
    justify-self: start;
    gap: .35rem;
    min-height: 3rem;
    padding: 0 .75rem 0 0;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: var(--agri-ink);
}

.placeholder-page h1 {
    margin: 0;
    font-size: var(--agri-h1-size);
    font-weight: 700;
}

.placeholder-page p {
    margin: .5rem 0 0;
    color: var(--agri-muted);
    font-size: 1.1rem;
}

.glass-tabbar {
    --glass-tabbar-padding: .45rem;
    --glass-tabbar-gap: .22rem;
    --glass-tabbar-lens-width: calc((100% - .9rem) / var(--glass-tabbar-count, 4));
    position: relative;
    isolation: isolate;
    display: grid;
    grid-template-columns: repeat(var(--glass-tabbar-count, 4), minmax(0, 1fr));
    gap: var(--glass-tabbar-gap);
    /* Platte balk: label strak onder het icoon (referentie-app) */
    min-height: 3.9rem;
    padding: var(--glass-tabbar-padding);
    border-radius: 28px;
    /* Geen overflow: hidden op de wortel: de nummerbadges (.badge-bubble) steken boven de
       balk uit; het lens-element wordt geclipt door de binnenste .glass-tabbar__clip-laag */
    background: rgba(255, 255, 255, .74);
    box-shadow:
        0 16px 42px rgba(16, 42, 38, .12),
        inset 0 1px 1px rgba(255, 255, 255, .82);
    -webkit-backdrop-filter: blur(18px) saturate(1.25);
    backdrop-filter: blur(18px) saturate(1.25);
}

.glass-tabbar::before {
    position: absolute;
    inset: 1px;
    z-index: 0;
    border-radius: inherit;
    background: linear-gradient(180deg, rgba(255, 255, 255, .58), rgba(255, 255, 255, .12));
    content: "";
    pointer-events: none;
}

/* Clipt uitsluitend het bewegende lens-element netjes binnen de afgeronde hoeken;
   de wortel blijft overflow-vrij zodat badges erboven kunnen zweven */
.glass-tabbar__clip {
    position: absolute;
    inset: 0;
    z-index: 1;
    overflow: hidden;
    border-radius: inherit;
    pointer-events: none;
}

/* Rustige grijze capsule achter de actieve tab (referentie-app); de themakleur zit in
   het item zelf. De schuif-animatie tussen tabs blijft. */
.glass-tabbar__lens {
    position: absolute;
    top: var(--glass-tabbar-padding);
    bottom: var(--glass-tabbar-padding);
    left: var(--glass-tabbar-padding);
    z-index: 1;
    width: var(--glass-tabbar-lens-width);
    border-radius: 22px;
    background: rgba(16, 42, 38, .07);
    transform: translate3d(var(--glass-tabbar-lens-offset, 0%), 0, 0);
    transition:
        transform 520ms cubic-bezier(.18, .92, .22, 1),
        background-color 260ms ease;
    pointer-events: none;
}

.glass-tabbar__lens::before {
    position: absolute;
    inset: 0;
    border-radius: inherit;
    content: "";
    pointer-events: none;
}

.glass-tabbar--energized .glass-tabbar__lens {
    animation: liquidLensFlex 520ms cubic-bezier(.18, .92, .22, 1);
}

.glass-tabbar--energized .glass-tabbar__lens::before {
    animation: liquidLensHighlight 520ms cubic-bezier(.18, .92, .22, 1);
}

.glass-tabbar__item {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-rows: 1.5rem 1rem;
    gap: .1rem;
    align-items: center;
    justify-items: center;
    min-width: 0;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: var(--agri-ink);
    /* Fors label zoals de referentie, maar licht van gewicht en strak onder het icoon */
    font-size: .84rem;
    font-weight: 500;
    line-height: 1;
    opacity: .72;
    transition: color 220ms ease, opacity 220ms ease, transform 220ms ease;
}

.glass-tabbar__item.is-active {
    /* Actieve tab in de themakleur (groen; blauw bij het blauwrood-thema) op de
       grijze capsule van de lens */
    color: var(--agri-accent);
    opacity: 1;
}

.glass-tabbar__item:not(:disabled):hover,
.glass-tabbar__item:not(:disabled):focus-visible {
    opacity: 1;
}

.glass-tabbar__item:not(:disabled):active {
    transform: translateY(-1px) scale(.985);
}

.glass-tabbar__icon {
    position: relative;
    display: inline-grid;
    place-items: center;
    color: currentColor;
}

/* Lichtere lijnvoering in de balk (basis is 2.15) — referentie-app oogt dunner */
.glass-tabbar__item .app-icon {
    stroke-width: 1.7;
}

.badge-bubble {
    position: absolute;
    top: -.85rem;
    right: -1rem;
    display: grid;
    min-width: 1.55rem;
    height: 1.55rem;
    place-items: center;
    padding: 0 .45rem;
    border-radius: 999px;
    background: var(--agri-danger);
    color: #fff;
    font-size: .86rem;
    font-weight: 800;
}

@keyframes liquidLensFlex {
    0% {
        filter: brightness(1);
        scale: .96 1;
    }
    38% {
        filter: brightness(1.08);
        scale: 1.08 .94;
    }
    68% {
        filter: brightness(1.03);
        scale: .98 1.03;
    }
    100% {
        filter: brightness(1);
        scale: 1;
    }
}

@keyframes liquidLensHighlight {
    0% {
        opacity: .45;
        transform: translateX(-18%) scaleX(.9);
    }
    44% {
        opacity: .96;
        transform: translateX(6%) scaleX(1.08);
    }
    100% {
        opacity: .72;
        transform: translateX(0) scaleX(1);
    }
}

.section-heading {
    margin: 1.25rem 0 .95rem;
}

.section-heading h2 {
    font-size: clamp(1.35rem, 5vw, 2rem);
}

.list-row {
    display: grid;
    grid-template-columns: 4.2rem minmax(0, 1fr) auto;
    gap: 1rem;
    align-items: center;
    min-height: 5.8rem;
    padding: .9rem .8rem .9rem 1rem;
}

/* Rijen die een knop zijn (relatie-dossier: orders, locaties): de browser-knopstijl uit */
button.list-row {
    width: 100%;
    border: 0;
    background: transparent;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

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

.list-row__avatar {
    width: 3.65rem;
    height: 3.65rem;
}

.list-row__content {
    display: grid;
    min-width: 0;
    gap: .25rem;
}

.list-row__content strong {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.list-row__content span {
    overflow: hidden;
    color: var(--agri-muted);
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: clamp(.95rem, 3vw, 1.1rem);
}

.status-chip {
    max-width: 5.4rem;
    overflow: hidden;
    padding: .32rem .55rem;
    border-radius: 999px;
    background: var(--agri-subtle);
    color: var(--agri-teal);
    font-size: .82rem;
    font-weight: 800;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.brand-logo {
    display: block;
    max-width: 100%;
    height: auto;
}

.app-startup {
    display: grid;
    min-height: 100dvh;
    place-items: center;
    align-content: center;
    gap: 1.35rem;
    padding: 2rem;
    background: #fff;
}

.app-startup__logo {
    width: min(14rem, 62vw);
}

.app-startup__indicator {
    width: 2.15rem;
    height: 2.15rem;
    border: 3px solid color-mix(in srgb, var(--agri-accent) 18%, white);
    border-top-color: var(--agri-accent);
    border-radius: 999px;
    animation: appStartupSpin 850ms linear infinite;
}

@keyframes appStartupSpin {
    to {
        transform: rotate(360deg);
    }
}

.auth-flow {
    min-height: 100dvh;
    background: #fff;
    color: var(--agri-ink);
}

.toast-message {
    --toast-bg: #eef5ea;
    --toast-fg: var(--agri-tertiary);
    --toast-border: color-mix(in srgb, var(--toast-fg) 20%, white);
    --toast-icon-bg: var(--toast-fg);
    --toast-icon-fg: #fff;
    position: fixed;
    top: max(.75rem, env(safe-area-inset-top));
    left: 50%;
    z-index: 80;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: .62rem;
    align-items: center;
    width: min(calc(100% - 1.25rem), 32rem);
    min-height: 2.75rem;
    padding: .55rem .8rem calc(.55rem + 4px) .65rem;
    border: 1px solid var(--toast-border);
    border-radius: 14px;
    background: var(--toast-bg);
    color: var(--toast-fg);
    box-shadow: 0 16px 38px rgba(16, 42, 38, .15);
    text-align: left;
    opacity: 0;
    transform: translate3d(-50%, calc(-100% - 1.25rem), 0);
    transition: transform 320ms cubic-bezier(.22, .61, .36, 1), opacity 180ms ease;
    pointer-events: none;
}

.toast-message--open {
    opacity: 1;
    transform: translate3d(-50%, 0, 0);
    pointer-events: auto;
}

.toast-message--leaving {
    opacity: 0;
    transform: translate3d(-50%, calc(-100% - 1.25rem), 0);
    pointer-events: none;
}

.toast-message--success {
    --toast-bg: #e2f2d9;
    --toast-fg: var(--agri-tertiary);
}

.toast-message--info {
    --toast-bg: var(--agri-info-soft);
    --toast-fg: var(--agri-info);
}

.toast-message--warning {
    --toast-bg: var(--agri-warning-soft);
    --toast-fg: var(--agri-warning);
}

.toast-message--error {
    --toast-bg: var(--agri-danger-soft);
    --toast-fg: var(--agri-danger);
    --toast-border: color-mix(in srgb, var(--agri-danger) 22%, white);
    --toast-icon-bg: #c53b35;
}

.toast-message:not(:disabled):active {
    transform: translate3d(-50%, 1px, 0) scale(.995);
}

.toast-message__icon {
    display: grid;
    width: 1.6rem;
    height: 1.6rem;
    place-items: center;
    border-radius: 999px;
    background: var(--toast-icon-bg);
    color: var(--toast-icon-fg);
}

.toast-message__icon .app-icon {
    stroke-width: 2.8;
}

.toast-message__copy {
    display: grid;
    min-width: 0;
    line-height: 1.16;
}

.toast-message__title {
    color: color-mix(in srgb, var(--toast-fg) 48%, white);
    font-size: .78rem;
    font-weight: 400;
}

.toast-message__text {
    color: var(--toast-fg);
    font-size: clamp(.88rem, 3.25vw, 1rem);
    font-weight: 500;
    overflow-wrap: anywhere;
}

/* Update-melding: kalme balk bovenin wanneer de server een nieuwere build heeft dan deze
   sessie (UpdateToast.razor). Geen auto-dismiss — de keuze is aan de gebruiker; z-index
   net onder de gewone toast zodat een voorbijkomende statusmelding altijd leesbaar blijft. */
.update-toast {
    position: fixed;
    top: max(.75rem, env(safe-area-inset-top));
    left: 50%;
    z-index: 79;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: .35rem .62rem;
    align-items: center;
    width: min(calc(100vw - 1.5rem), 26rem);
    padding: .7rem .8rem;
    border: 1px solid color-mix(in srgb, var(--agri-info) 20%, white);
    border-radius: 1rem;
    background: var(--agri-info-soft);
    color: var(--agri-ink);
    box-shadow: 0 10px 30px rgba(16, 42, 38, .16);
    transform: translate3d(-50%, 0, 0);
    animation: update-toast-in .28s ease-out;
}

@keyframes update-toast-in {
    from {
        opacity: 0;
        transform: translate3d(-50%, calc(-100% - 1.25rem), 0);
    }
}

.update-toast__icon {
    display: grid;
    width: 1.6rem;
    height: 1.6rem;
    place-items: center;
    border-radius: 999px;
    background: var(--agri-info);
    color: #fff;
}

.update-toast__text {
    font-size: clamp(.88rem, 3.25vw, .95rem);
    font-weight: 600;
    line-height: 1.35;
    overflow-wrap: anywhere;
}

.update-toast__acties {
    grid-column: 2;
    display: flex;
    gap: .4rem;
}

.update-toast__knop {
    padding: .42rem .95rem;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: var(--agri-tertiary);
    font: inherit;
    font-size: .88rem;
    font-weight: 600;
    cursor: pointer;
}

.update-toast__knop--primair {
    background: var(--agri-tertiary);
    color: #fff;
}

.update-toast__knop:active {
    transform: scale(.97);
}

.auth-welcome {
    position: relative;
    min-height: 100dvh;
    overflow: hidden;
    background: #fff;
}

.wave-frame {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    --wave-travel: 25dvh;
    --wave-height: clamp(13rem, 24dvh, 17.5rem);
    --wave-overscan: clamp(2rem, 5dvh, 4rem);
    --wave-strong: var(--agri-accent);
    --wave-mid: color-mix(in srgb, var(--agri-accent) 58%, white);
    --wave-soft: color-mix(in srgb, var(--agri-accent) 24%, white);
}

.wave-frame__top,
.wave-frame__bottom {
    position: absolute;
    left: -7%;
    width: 114%;
    height: calc(var(--wave-height) + var(--wave-overscan));
    display: block;
    overflow: visible;
}

.wave-frame__top {
    top: calc(-1 * var(--wave-overscan));
}

.wave-frame__bottom {
    bottom: calc(-1 * var(--wave-overscan));
    transform: rotate(180deg);
}

.wave-frame--animated .wave-frame__top {
    animation: waveTopIntro 1450ms cubic-bezier(.16, .88, .24, 1) both;
}

.wave-frame--animated .wave-frame__bottom {
    animation: waveBottomIntro 1550ms cubic-bezier(.16, .88, .24, 1) both;
}

.wave-frame__shape--soft {
    fill: var(--wave-soft);
}

.wave-frame__shape--mid {
    fill: var(--wave-mid);
}

.wave-frame__shape--strong {
    fill: var(--wave-strong);
}

@keyframes waveTopIntro {
    0% {
        opacity: .5;
        transform: translateY(calc(-1 * var(--wave-travel))) scaleY(.96);
    }
    70% {
        opacity: 1;
        transform: translateY(1.15rem) scaleY(1.02);
    }
    100% {
        opacity: 1;
        transform: translateY(0) scaleY(1);
    }
}

@keyframes waveBottomIntro {
    0% {
        opacity: .5;
        transform: translateY(var(--wave-travel)) rotate(180deg) scaleY(.96);
    }
    70% {
        opacity: 1;
        transform: translateY(-1.15rem) rotate(180deg) scaleY(1.02);
    }
    100% {
        opacity: 1;
        transform: translateY(0) rotate(180deg) scaleY(1);
    }
}

@media (prefers-reduced-motion: reduce) {
    .wave-frame--animated .wave-frame__top,
    .wave-frame--animated .wave-frame__bottom {
        animation: none;
    }

    .auth-welcome .wave-frame,
    .auth-welcome__center,
    .auth-welcome__footer,
    .glass-tabbar__item,
    .glass-tabbar__lens,
    .glass-tabbar__lens::before,
    .sliding-panel,
    .sliding-panel__handle::before,
    .dismissible-panel__backdrop,
    .fullscreen-flow-panel,
    .fullscreen-flow-panel__back,
    .toast-message,
    .auth-button,
    .text-link,
    .trip-day-wrap,
    .trip-day-wrap__inner {
        transition: none;
        animation: none;
    }
}

.auth-welcome__center {
    position: relative;
    z-index: 1;
    display: grid;
    min-height: 66dvh;
    place-items: center;
    padding: 8rem 2.4rem 4rem;
    transition: opacity 260ms ease;
}

.auth-welcome .wave-frame {
    transition: opacity 260ms ease;
}

.auth-welcome--entry .wave-frame,
.auth-welcome--entry .auth-welcome__center,
.auth-welcome--form-open .wave-frame,
.auth-welcome--form-open .auth-welcome__center {
    opacity: .8;
}

.auth-welcome__logo {
    width: min(17rem, 70vw);
}

.auth-welcome__footer {
    position: relative;
    z-index: 1;
    display: grid;
    gap: 2rem;
    padding: 0 clamp(1.5rem, 7vw, 3rem) max(3rem, env(safe-area-inset-bottom));
    transition: opacity 220ms ease, transform 320ms cubic-bezier(.22, .61, .36, 1);
}

.auth-welcome--entry .auth-welcome__footer,
.auth-welcome--form-open .auth-welcome__footer {
    opacity: 0;
    transform: translateY(1.25rem);
    pointer-events: none;
}

.auth-sheet-dismiss {
    position: absolute;
    inset: 0;
    z-index: 2;
    padding: 0;
    border: 0;
    background: transparent;
    pointer-events: none;
}

.auth-welcome--entry .auth-sheet-dismiss {
    pointer-events: auto;
}

.sliding-panel {
    opacity: 0;
    transform: translateY(calc(100% + 2rem));
    transition: transform 360ms cubic-bezier(.22, .61, .36, 1), opacity 180ms ease;
    pointer-events: none;
}

.sliding-panel::after {
    position: absolute;
    right: 0;
    bottom: var(--sliding-panel-fill-offset, -68px);
    left: 0;
    height: var(--sliding-panel-fill-height, 68px);
    background: inherit;
    content: "";
    pointer-events: none;
}

.sliding-panel--open {
    opacity: 1;
    transform: translateY(var(--sliding-panel-drag, 0px));
    pointer-events: auto;
}

.sliding-panel--dragging {
    transition: none;
}

.made-by {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem .65rem;
    align-items: center;
    justify-content: center;
    color: color-mix(in srgb, var(--agri-secondary) 44%, white);
    font-size: clamp(1rem, 3.5vw, 1.2rem);
    font-weight: 300;
    text-align: center;
}

.made-by__logo {
    width: 7.25rem;
    opacity: .7;
}

/* 'Zet op beginscherm'-balk onderaan het welkomscherm: witte kaart op de gekleurde golf,
   zelfde behandeling als de lichte knop eronder. Verdwijnt met de rest van de footer zodra
   het aanmeldpaneel opengaat (.auth-welcome--entry). */
.install-banner {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto auto;
    gap: .75rem;
    align-items: center;
    padding: .7rem .8rem;
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 16px 36px rgba(16, 42, 38, .16);
}

.install-banner__icon {
    display: grid;
    place-items: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 999px;
    background: var(--agri-accent-soft);
    color: var(--agri-accent);
}

.install-banner__copy {
    display: grid;
    gap: .1rem;
    min-width: 0;
}

.install-banner__copy strong {
    color: #111827;
    font-size: .95rem;
    font-weight: 700;
    line-height: 1.25;
}

.install-banner__copy span {
    color: var(--agri-muted);
    font-size: .85rem;
    font-weight: 600;
    line-height: 1.3;
}

.install-banner__action {
    min-height: 2.6rem;
    padding: 0 1.05rem;
    border: 0;
    border-radius: 999px;
    background: var(--agri-accent);
    color: #fff;
    font-size: .92rem;
    font-weight: 700;
    white-space: nowrap;
    cursor: pointer;
}

.install-banner__action:disabled {
    cursor: not-allowed;
    opacity: .68;
}

.install-banner__close {
    display: grid;
    place-items: center;
    width: 2.1rem;
    height: 2.1rem;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: var(--agri-muted);
    cursor: pointer;
}

/* Smalle toestellen: de knop krijgt een eigen regel in plaats van de tekst te verdringen.
   Icoon, tekst en sluitknop blijven expliciet op de eerste regel — zonder die plaatsing duwt
   de volle-breedte-knop de sluitknop naar een derde regel. */
@media (max-width: 420px) {
    .install-banner {
        grid-template-columns: minmax(0, 1fr) auto;
    }

    /* Het icoon is decoratief; die ruimte is op een telefoon meer waard voor de tekst,
       die er anders een regel of twee langer van wordt */
    .install-banner__icon {
        display: none;
    }

    .install-banner__close {
        grid-row: 1;
        grid-column: 2;
    }

    .install-banner__action {
        grid-row: 2;
        grid-column: 1 / -1;
        width: 100%;
    }
}

.auth-sheet {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 3;
    display: grid;
    gap: 1.05rem;
    padding: 1.45rem clamp(1.4rem, 6vw, 2.4rem) max(2.3rem, env(safe-area-inset-bottom));
    border-radius: 36px 36px 0 0;
    background: #fff;
    box-shadow: 0 -18px 48px rgba(16, 42, 38, .13);
}

.dismissible-panel {
    position: fixed;
    inset: 0;
    /* Op de sheet-laag (41, zoals .more-menu en .insp-drag-sheet): boven de zwevende
       tabbalk (20) én boven een onderliggende InspectionSheet — DOM-volgorde bepaalt
       daarbinnen de stapel, bijv. de verwerp-bevestiging boven de notitie-editor */
    z-index: 41;
    pointer-events: none;
}

.dismissible-panel--open {
    pointer-events: auto;
}

.dismissible-panel__backdrop {
    position: absolute;
    inset: 0;
    z-index: 1;
    padding: 0;
    border: 0;
    background: rgba(255, 255, 255, .18);
    opacity: 0;
    transition: opacity 240ms ease;
}

.dismissible-panel--open .dismissible-panel__backdrop {
    opacity: 1;
}

.dismissible-panel__sheet {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 2;
    display: grid;
    grid-template-rows: auto auto minmax(0, 1fr);
    max-height: calc(100dvh - clamp(3rem, 9vh, 6rem));
    padding: 1.15rem clamp(1.25rem, 5vw, 2rem) max(2rem, env(safe-area-inset-bottom));
    border-radius: 34px 34px 0 0;
    background: #fff;
    box-shadow: 0 -22px 60px rgba(16, 42, 38, .18);
    overflow: hidden;
}

.dismissible-panel__header {
    display: grid;
    grid-template-columns: 3rem minmax(0, 1fr) 3rem;
    gap: .6rem;
    align-items: center;
    padding: .15rem 0 .95rem;
}

.dismissible-panel__close {
    display: grid;
    width: 3rem;
    height: 3rem;
    place-items: center;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: var(--agri-ink);
    transition: background-color 160ms ease, color 160ms ease;
}

.dismissible-panel__close:not(:disabled):hover,
.dismissible-panel__close:not(:disabled):focus-visible {
    background: var(--agri-accent-soft);
    color: var(--agri-accent);
}

.dismissible-panel__header h1 {
    grid-column: 2;
    margin: 0;
    text-align: center;
    font-size: clamp(1.45rem, 5vw, 2rem);
    font-weight: 400;
}

.dismissible-panel__content {
    min-height: 0;
    padding: 0 .15rem .6rem;
    overflow: hidden auto;
    -webkit-overflow-scrolling: touch;
}

.terms-panel {
    min-height: min(78dvh, 56rem);
}

.terms-panel .dismissible-panel__content {
    padding-bottom: 1.2rem;
}

.sliding-panel__handle {
    display: grid;
    justify-self: center;
    /* Ruim raakvlak (~44pt hoog): het streepje zelf blijft klein (::before),
       maar de duim hoeft niet meer pixelprecies te mikken */
    width: 9rem;
    height: 2.4rem;
    margin-bottom: .2rem;
    padding: .32rem;
    place-items: center;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: transparent;
    cursor: grab;
    touch-action: none;
    user-select: none;
    -webkit-user-select: none;
}

.sliding-panel__handle::before {
    width: 4.8rem;
    height: .42rem;
    border-radius: 999px;
    background: #e1e4e2;
    content: "";
    transition: background-color 160ms ease, transform 160ms ease;
}

.sliding-panel__handle:not(:disabled):hover::before,
.sliding-panel__handle:not(:disabled):focus-visible::before {
    background: #d5dad7;
    transform: scaleX(.9);
}

.sliding-panel__handle:not(:disabled):active {
    cursor: grabbing;
}

.sliding-panel__handle:not(:disabled):active::before {
    background: #c7cec9;
    transform: scaleX(.82);
}

.auth-sheet p {
    max-width: 22rem;
    margin: .1rem auto 0;
    color: var(--agri-ink);
    font-size: 1rem;
    line-height: 1.28;
    text-align: center;
}

.text-link {
    display: inline;
    padding: .06rem .18rem;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: inherit;
    font-weight: 600;
    text-decoration: underline;
    transition: background-color 160ms ease, color 160ms ease;
}

.text-link:not(:disabled):hover,
.text-link:not(:disabled):focus-visible {
    background: var(--agri-accent-soft);
    color: var(--agri-accent);
}

.auth-button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 4.65rem;
    border: 0;
    border-radius: 999px;
    font-size: clamp(1.12rem, 4.2vw, 1.55rem);
    font-weight: 600;
    transition: background-color 180ms ease, color 180ms ease, box-shadow 180ms ease;
}

.auth-button:disabled {
    cursor: not-allowed;
    opacity: .68;
}

.auth-button--primary {
    background: var(--agri-accent);
    color: #fff;
    box-shadow: 0 14px 32px rgba(57, 117, 75, .25);
}

.auth-button--primary:not(:disabled):hover,
.auth-button--primary:not(:disabled):focus-visible {
    background: #fff;
    color: var(--agri-accent);
    box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--agri-accent) 42%, white), 0 14px 32px rgba(57, 117, 75, .18);
}

.auth-button--secondary {
    background: #f2f4f3;
    color: var(--agri-ink);
}

.auth-button--secondary:not(:disabled):hover,
.auth-button--secondary:not(:disabled):focus-visible {
    background: var(--agri-accent);
    color: #fff;
    box-shadow: 0 14px 32px rgba(57, 117, 75, .23);
}

.auth-button--light {
    background: #fff;
    color: #111827;
    box-shadow: 0 16px 36px rgba(16, 42, 38, .16);
}

.auth-button--light:not(:disabled):hover,
.auth-button--light:not(:disabled):focus-visible {
    background: #fff;
    color: #111827;
    box-shadow: inset 0 0 0 1px rgba(16, 42, 38, .08), 0 18px 38px rgba(16, 42, 38, .18);
}

.fullscreen-flow-panel {
    position: fixed;
    top: var(--fullscreen-flow-viewport-top, 0);
    right: 0;
    bottom: auto;
    left: 0;
    z-index: 5;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    height: var(--fullscreen-flow-viewport-height, 100dvh);
    min-height: 0;
    padding: clamp(3rem, 8vh, 5rem) clamp(1.4rem, 6vw, 2.5rem) max(1.4rem, env(safe-area-inset-bottom));
    background: #fff;
    opacity: 0;
    overflow: hidden;
    transform: translate3d(0, 100%, 0);
    transition: transform 420ms cubic-bezier(.22, .61, .36, 1), opacity 180ms ease;
    pointer-events: none;
}

.fullscreen-flow-panel--open {
    opacity: 1;
    /* none, niet translate3d(0,0,0): een blijvende (identiteits)transform maakt het
       paneel het containing block voor alle position:fixed-lagen erbinnen — de
       camera-dialoog, sheets en viewers hingen dan aan het paneel in plaats van aan
       het scherm. iOS-WebKit liet daardoor na een rotatie de tik-gebieden van die
       lagen achter op de oude geometrie (knoppen dood in liggende stand), terwijl
       het beeld wél klopte. In rust dus geen transform; de in- en uitschuifstaten
       houden hun eigen transform voor de animatie. */
    transform: none;
    pointer-events: auto;
}

.fullscreen-flow-panel--leaving {
    opacity: 1;
    transform: translate3d(100%, 0, 0);
    transition-duration: 360ms, 140ms;
    pointer-events: none;
}

/* Terugknop links, optionele inhoud rechts — één rij, dus altijd op dezelfde hoogte,
   ook als de twee elementen niet even groot zijn. */
.fullscreen-flow-panel__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    min-width: 0;
}

.fullscreen-flow-panel__back {
    display: grid;
    flex: 0 0 auto;
    width: 3.4rem;
    height: 3.4rem;
    place-items: center;
    margin-left: -.65rem;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: var(--agri-ink);
    transition: background-color 160ms ease, color 160ms ease, transform 160ms ease;
}

.fullscreen-flow-panel__back:not(:disabled):hover,
.fullscreen-flow-panel__back:not(:disabled):focus-visible {
    background: var(--agri-accent-soft);
    color: var(--agri-accent);
}

.fullscreen-flow-panel__back:not(:disabled):active {
    transform: translateX(-2px);
}

.fullscreen-flow-panel__content {
    display: grid;
    align-content: start;
    min-height: 0;
    padding-top: clamp(1rem, 4vh, 2rem);
    /* Alleen verticaal scrollen: met 'auto' kon één te breed element het hele scherm
       horizontaal laten pannen (Entry-dossier op touch). Geldt voor alle verticale
       scrollers in de app — bewuste horizontale rijen hebben hun eigen overflow-x. */
    overflow: hidden auto;
    -webkit-overflow-scrolling: touch;
}

.fullscreen-flow-panel__content h1 {
    margin: 0 0 2rem;
    color: var(--agri-ink);
    font-size: var(--agri-h1-size);
    font-weight: 650;
    line-height: 1.08;
}

.fullscreen-flow-panel .auth-bottom-action {
    position: sticky;
    bottom: 0;
    align-self: end;
    margin-top: clamp(6rem, 24vh, 15rem);
    padding-top: .85rem;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0), #fff 34%);
}

.auth-input {
    position: relative;
    display: grid;
    margin-bottom: 1.3rem;
}

.auth-input span {
    position: absolute;
    top: 1.05rem;
    left: 1.55rem;
    z-index: 1;
    color: color-mix(in srgb, var(--agri-secondary) 48%, white);
    font-size: 1.1rem;
    font-weight: 500;
}

.auth-input input {
    width: 100%;
    min-height: 5.15rem;
    padding: 2.2rem 1.45rem .85rem;
    border: 1px solid #e1e4e7;
    border-radius: 28px;
    outline: none;
    background: #f3f4f6;
    color: var(--agri-ink);
    font-size: 1.22rem;
    font-weight: 750;
}

.auth-input input:focus {
    border-color: color-mix(in srgb, var(--agri-accent) 58%, white);
    box-shadow: inset .24rem 0 0 var(--agri-accent);
}

.auth-input--with-icon input {
    padding-right: 4.6rem;
}

.auth-input--with-icon button {
    position: absolute;
    right: 1.25rem;
    bottom: 1.15rem;
    display: grid;
    width: 3rem;
    height: 3rem;
    place-items: center;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: color-mix(in srgb, var(--agri-secondary) 52%, white);
}

.auth-help {
    margin: -.55rem 1.1rem 0;
    color: color-mix(in srgb, var(--agri-secondary) 56%, white);
    font-size: 1.1rem;
    line-height: 1.35;
}

.auth-help--intro {
    margin: 0 0 1.25rem;
}

.auth-forgot {
    justify-self: center;
    margin-top: .35rem;
    border: 0;
    background: transparent;
    color: var(--agri-accent);
    font-size: 1.28rem;
    font-weight: 600;
}

.auth-bottom-action {
    display: grid;
    align-self: end;
    margin-top: clamp(7rem, 26vh, 17rem);
}

.auth-environment-list {
    display: grid;
    gap: .85rem;
    margin-top: .7rem;
}

.auth-environment-button {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    width: 100%;
    min-height: 5.3rem;
    padding: 1rem 1.2rem;
    border: 1px solid color-mix(in srgb, var(--agri-accent) 18%, white);
    border-radius: 24px;
    background: #f6f8f6;
    color: var(--agri-ink);
    text-align: left;
    transition: background-color 160ms ease, color 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
}

.auth-environment-button strong,
.auth-environment-button small {
    display: block;
}

.auth-environment-button strong {
    font-size: 1.08rem;
    font-weight: 650;
    line-height: 1.2;
}

.auth-environment-button small {
    margin-top: .25rem;
    color: color-mix(in srgb, var(--agri-secondary) 56%, white);
    font-size: .92rem;
    font-weight: 500;
}

.auth-environment-button:not(:disabled):hover,
.auth-environment-button:not(:disabled):focus-visible {
    border-color: color-mix(in srgb, var(--agri-accent) 52%, white);
    background: #fff;
    box-shadow: 0 14px 30px rgba(57, 117, 75, .13);
}

/* Werkomgevingskeuze: loginstap en wisselen via het profiel.
   Kolom-flex i.p.v. grid: zo kan de keuzelijst in een 'pinned' paneel de resthoogte
   nemen en zelf scrollen, terwijl titel en voetregel op hun plek blijven. */
.workspace-choice {
    display: flex;
    flex-direction: column;
    gap: .3rem;
    min-height: 0;
}

.workspace-choice--empty {
    gap: .55rem;
}

.workspace-choice__greeting {
    margin: 0;
    color: color-mix(in srgb, var(--agri-secondary) 62%, white);
    font-size: 1.02rem;
    font-weight: 500;
}

.workspace-choice__title {
    margin: 0;
    color: var(--agri-ink);
    font-size: clamp(1.25rem, 4.6vw, 1.5rem);
    font-weight: 700;
    line-height: 1.25;
}

/* Foutmelding in de omgevings-/werkomgevingkeuze (bijv. wissel mislukt) */
.workspace-choice__error {
    margin: 0 .2rem;
    color: var(--agri-danger);
    font-size: .92rem;
    text-align: center;
}

.workspace-choice__intro {
    margin: .4rem 0 0;
    color: color-mix(in srgb, var(--agri-secondary) 62%, white);
    font-size: 1rem;
    line-height: 1.45;
}

.workspace-choice__list {
    display: grid;
    gap: .85rem;
    margin-top: 1rem;
}

/* Keuzepanelen met vaste kop: het paneel zelf scrolt niet meer, alleen de lijst.
   'Waar ga je aan de slag?' (en de voetregel) blijven staan; de kaarten scrollen
   ertussen. De negatieve marge + padding geven de kaartrand en focus-ring lucht
   zodat die niet op de scrollrand worden afgeknipt. */
.flow-panel--pinned-choice .fullscreen-flow-panel__content {
    grid-template-rows: auto minmax(0, 1fr);
    overflow: hidden;
}

.profile-overlay-panel--pinned-choice .profile-overlay-panel__content {
    grid-template-rows: minmax(0, 1fr);
    overflow: hidden;
}

.flow-panel--pinned-choice .workspace-choice__list,
.profile-overlay-panel--pinned-choice .workspace-choice__list {
    flex: 1 1 auto;
    min-height: 0;
    align-content: start;
    margin: calc(1rem - 4px) -4px 0;
    padding: 4px;
    overflow: hidden auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
}

.workspace-card {
    display: flex;
    align-items: center;
    gap: 1rem;
    width: 100%;
    min-height: 5.3rem;
    padding: 1rem 1.2rem;
    border: 1px solid color-mix(in srgb, var(--agri-accent) 18%, white);
    border-radius: 24px;
    background: #f6f8f6;
    color: var(--agri-ink);
    text-align: left;
    transition: background-color 160ms ease, color 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
}

.workspace-card__icon {
    display: grid;
    flex: 0 0 auto;
    place-items: center;
    width: 3rem;
    height: 3rem;
    border-radius: 15px;
    background: color-mix(in srgb, var(--agri-accent) 13%, white);
    color: var(--agri-accent);
}

.workspace-card__text {
    display: block;
    flex: 1;
    min-width: 0;
}

.workspace-card__text strong,
.workspace-card__text small {
    display: block;
}

.workspace-card__text strong {
    font-size: 1.08rem;
    font-weight: 650;
    line-height: 1.2;
}

.workspace-card__text small {
    margin-top: .25rem;
    color: color-mix(in srgb, var(--agri-secondary) 56%, white);
    font-size: .92rem;
    font-weight: 500;
}

/* Zelfde les als bij de taalkeuze hieronder: hover/focus zag er vrijwel identiek uit
   aan --active, waardoor op touch de laatst aangeraakte kaart óók gekozen leek
   (blijvende touch-hover). De hover-opmaak geldt alleen nog op apparaten met een
   echte aanwijzer; toetsenbord-focus krijgt een ring i.p.v. de actieve opmaak,
   zodat precies één kaart als gekozen kan ogen. */
@media (hover: hover) and (pointer: fine) {
    .workspace-card:not(:disabled):hover {
        border-color: color-mix(in srgb, var(--agri-accent) 52%, white);
        background: #fff;
        box-shadow: 0 14px 30px rgba(57, 117, 75, .13);
    }
}

.workspace-card:not(:disabled):focus-visible {
    outline: 2px solid var(--agri-accent);
    outline-offset: 2px;
}

.workspace-card--active {
    border-color: color-mix(in srgb, var(--agri-accent) 55%, white);
    background: #fff;
}

/* Taalkeuze-lijst. Bewust een eigen actieve-staat i.p.v. de workspace-kaart: de vorige lijst
   markeerde 'actief' met een witte achtergrond, precies zoals :hover/:focus, waardoor de laatst
   aangeraakte taal (bv. Pools, door blijvende touch-hover) óók gekozen leek. Hier draagt exact
   één kaart de accent-markering, en de hover-verheviging geldt alleen op apparaten met een echte
   aanwijzer, zodat een tik geen valse selectie achterlaat. */
.language-choice__list {
    display: grid;
    gap: .85rem;
    margin-top: 1rem;
}

.language-choice__item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    width: 100%;
    min-height: 4.6rem;
    padding: 1rem 1.2rem;
    border: 1px solid color-mix(in srgb, var(--agri-accent) 18%, white);
    border-radius: 24px;
    background: #f6f8f6;
    color: var(--agri-ink);
    text-align: left;
    transition: background-color 160ms ease, color 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
}

.language-choice__name {
    flex: 1;
    min-width: 0;
    font-size: 1.08rem;
    font-weight: 650;
    line-height: 1.2;
}

.language-choice__item .app-icon {
    flex: 0 0 auto;
    color: var(--agri-accent);
}

.language-choice__item--active {
    border-color: color-mix(in srgb, var(--agri-accent) 62%, white);
    background: color-mix(in srgb, var(--agri-accent) 10%, white);
    color: var(--agri-accent);
}

@media (hover: hover) {
    .language-choice__item:not(:disabled):not(.language-choice__item--active):hover,
    .language-choice__item:not(:disabled):not(.language-choice__item--active):focus-visible {
        border-color: color-mix(in srgb, var(--agri-accent) 45%, white);
        background: #fff;
        box-shadow: 0 14px 30px rgba(57, 117, 75, .13);
    }
}

/* Kleurstaal op de themakaart: een tweekleurige cirkel die het thema laat zien */
.theme-swatch {
    flex: 0 0 auto;
    width: 1.9rem;
    height: 1.9rem;
    border-radius: 999px;
    box-shadow: inset 0 0 0 1px rgba(16, 42, 38, .12);
}

.theme-swatch--agripro {
    background: linear-gradient(135deg, #6CA74D 0 50%, #39754B 50% 100%);
}

.theme-swatch--blauwrood {
    background: linear-gradient(135deg, #2360AF 0 50%, #D5342A 50% 100%);
}

.theme-swatch--petrol {
    background: linear-gradient(135deg, #0F6F7A 0 50%, #0B4C55 50% 100%);
}

@media (prefers-reduced-motion: reduce) {
    .profile-overlay-panel,
    .user-profile-subpage,
    .language-choice__item,
    .workspace-card {
        transition: none;
        animation: none;
    }
}

.terms-card__body {
    color: #20242c;
    font-size: clamp(1rem, 3.8vw, 1.22rem);
    line-height: 1.45;
}

.terms-card__body ul {
    margin: .4rem 0 0;
    padding-left: 1.2rem;
}

.terms-card__body li + li {
    margin-top: .35rem;
}

#blazor-error-ui {
    color-scheme: light only;
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, .2);
    box-sizing: border-box;
    display: none;
    left: 0;
    padding: .6rem 1.25rem .7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

#blazor-error-ui .dismiss {
    cursor: pointer;
    position: absolute;
    right: .75rem;
    top: .5rem;
}

@media (max-width: 520px) {
    .app-shell__surface {
        padding-inline: 1rem;
    }

    .list-row {
        grid-template-columns: 3.6rem minmax(0, 1fr);
        padding-right: .4rem;
    }

    .status-chip {
        display: none;
    }

    .auth-welcome__footer {
        gap: 1.4rem;
    }
}

/* === Orders === */

/* Grote paneltitel vervalt: de sticky header toont de relatiesamenvatting */
.order-flow-panel .fullscreen-flow-panel__content > h1 {
    display: none;
}

/* Artikelscherm heeft een eigen Terug-knop in de sticky header: de ingebouwde panel-back blijft
   functioneel (wordt programmatic geklikt) maar is onzichtbaar, en de contentrij vult het paneel.
   De paneel-padding verdwijnt bovenaan zodat de headerrij op dezelfde viewport-hoogte begint als
   .relations-page__top op het relatiescherm en in de relatiekiezer. */
.order-flow-panel {
    grid-template-rows: minmax(0, 1fr);
    padding-top: 0;
    /* Zelfde zijmarge als de app-schil (--app-shell-inline-padding): de basis van het
       flow-panel is breder (6vw), waardoor 'Terug' bij het openen zichtbaar naar
       rechts sprong t.o.v. de relatiekaart */
    padding-inline: clamp(1rem, 5vw, 2.25rem);
}

/* Smalle schermen: de schil versmalt daar naar 1rem — de bestelflow volgt, anders
   verspringt 'Terug' alsnog */
@media (max-width: 520px) {
    .order-flow-panel {
        padding-inline: 1rem;
    }
}

.order-flow-panel > .fullscreen-flow-panel__header {
    display: none;
}

.order-flow-panel .fullscreen-flow-panel__content {
    padding-top: 0;
}

.order-flow-header {
    position: sticky;
    top: 0;
    z-index: 4;
    display: grid;
    gap: 1.2rem;
    margin-bottom: .55rem;
    /* Zelfde top-padding als .relations-page__top: winkelmandje op exact dezelfde hoogte als de profielavatar */
    padding: clamp(.6rem, 2.4vw, 1.1rem) 0 .8rem;
    background: #fff;
    box-shadow:
        0 1px 0 rgba(16, 42, 38, .07),
        0 14px 18px -16px rgba(16, 42, 38, .16);
}

.order-flow-header__bar {
    display: flex;
    gap: 1rem;
    align-items: center;
    justify-content: space-between;
}

.order-flow-header__identity {
    display: grid;
    gap: .14rem;
    min-width: 0;
}

.order-flow-header__name {
    margin: 0;
    overflow: hidden;
    color: var(--agri-ink);
    font-size: clamp(1.42rem, 5.15vw, 1.86rem);
    font-weight: 650;
    line-height: 1.08;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.order-flow-header__location {
    margin: 0;
    overflow: hidden;
    color: color-mix(in srgb, var(--agri-ink) 36%, white);
    font-size: clamp(.98rem, 3.5vw, 1.16rem);
    font-weight: 500;
    line-height: 1.15;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.order-flow-header__address {
    margin: 0;
    overflow: hidden;
    color: var(--agri-muted);
    font-size: clamp(.88rem, 3.1vw, 1rem);
    font-weight: 400;
    line-height: 1.2;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Winkelmandje: zelfde maat en plek als de profielavatar (.profile-avatar-button/.avatar--profile) */
.order-cart-button {
    position: relative;
    display: grid;
    flex: 0 0 auto;
    width: 3.95rem;
    height: 3.95rem;
    place-items: center;
    border: 0;
    border-radius: 999px;
    background: transparent;
    transition: transform 160ms ease, opacity 160ms ease;
}

.order-cart-button:not(:disabled):hover,
.order-cart-button:not(:disabled):focus-visible {
    opacity: .92;
    transform: translateY(-1px);
}

.order-cart-button:not(:disabled):active {
    transform: scale(.97);
}

.order-cart-button__circle {
    display: grid;
    width: 3.55rem;
    height: 3.55rem;
    place-items: center;
    border-radius: 999px;
    background: var(--agri-accent-soft);
    color: var(--agri-accent);
    box-shadow: 0 14px 34px rgba(16, 42, 38, .12);
}

.order-cart-button__badge {
    position: absolute;
    top: .05rem;
    right: .05rem;
    display: grid;
    min-width: 1.5rem;
    height: 1.5rem;
    place-items: center;
    padding: 0 .32rem;
    border: 2px solid #fff;
    border-radius: 999px;
    background: var(--agri-danger);
    color: #fff;
}

/* Dossier-variant: geen concept -> een plusje in accent-groen ("nieuwe bestelling") op
   dezelfde badge-plek; mét concept toont de gewone rode telbadge hierboven. */
.order-cart-button__badge--add {
    padding: 0;
    background: var(--agri-accent);
    font-size: 1.05rem;
    font-weight: 750;
    line-height: 1;
    font-size: .82rem;
    font-weight: 750;
}

.order-flow-ribbon {
    display: flex;
    gap: .55rem;
    padding-bottom: .15rem;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}

.order-flow-ribbon::-webkit-scrollbar {
    display: none;
}

.order-flow-ribbon__chip {
    flex: 0 0 auto;
    white-space: nowrap;
}

.order-flow__retry {
    justify-self: center;
    width: auto;
    min-height: 3.4rem;
    padding: 0 1.7rem;
    font-size: 1rem;
}

.order-draft-card {
    display: grid;
    gap: .35rem;
    margin: 1.2rem 0;
    padding: 1.2rem 1.3rem .6rem;
    border-radius: 22px;
    background: #fff;
    box-shadow: 0 12px 34px rgba(16, 42, 38, .06);
}

.order-draft-card > span {
    color: var(--agri-muted);
}

.order-draft-card .auth-button {
    margin-top: .6rem;
}

.order-draft-card__delete {
    justify-self: center;
    min-height: 3rem;
    padding: 0 1rem;
    border: 0;
    background: transparent;
    color: var(--agri-danger);
    font-size: 1rem;
    font-weight: 600;
}

.order-group__note {
    margin: -.2rem .45rem .5rem;
    color: var(--agri-muted);
    font-size: .88rem;
    line-height: 1.3;
}

.order-article-item {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: .9rem;
    align-items: center;
    width: 100%;
    min-height: 4.6rem;
    padding: .7rem 1rem .7rem 1.1rem;
    border: 0;
    background: #fff;
    color: var(--agri-ink);
    text-align: left;
    transition: background-color 150ms ease, opacity 150ms ease, transform 150ms ease;
}

.order-article-item + .order-article-item {
    border-top: 1px solid rgba(16, 42, 38, .07);
}

.order-article-item:not(:disabled):hover,
.order-article-item:not(:disabled):focus-visible {
    background: var(--agri-subtle);
}

.order-article-item:not(:disabled):active {
    transform: scale(.995);
}

.order-article-item--dimmed {
    opacity: .45;
}

.order-article-item__content {
    display: grid;
    gap: .18rem;
    min-width: 0;
}

.order-article-item__content strong {
    overflow: hidden;
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.16;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.order-article-item__content span {
    overflow: hidden;
    color: var(--agri-muted);
    font-size: .85rem;
    font-weight: 500;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.order-article-item__add {
    display: grid;
    width: 2.75rem;
    height: 2.75rem;
    place-items: center;
    border-radius: 999px;
    background: var(--agri-accent-soft);
    color: var(--agri-accent);
}

.order-article-item__count {
    display: grid;
    min-width: 2.3rem;
    height: 2.3rem;
    place-items: center;
    padding: 0 .6rem;
    border-radius: 999px;
    background: var(--agri-accent);
    color: #fff;
    font-size: .95rem;
    font-weight: 750;
}

.order-cart-bar-wrap {
    position: sticky;
    bottom: 0;
    z-index: 3;
    margin-top: 1.4rem;
    padding: 1rem 0 .4rem;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0), #fff 55%);
}

.order-cart-bar {
    display: flex;
    gap: 1rem;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    min-height: 4.35rem;
    padding: 0 1.5rem;
    border: 1px solid rgba(16, 42, 38, .08);
    border-radius: 28px;
    background: var(--agri-glass);
    color: var(--agri-ink);
    font-size: 1.05rem;
    font-weight: 650;
    box-shadow:
        0 16px 42px rgba(16, 42, 38, .12),
        inset 0 1px 1px rgba(255, 255, 255, .82);
    -webkit-backdrop-filter: blur(16px) saturate(1.25);
    backdrop-filter: blur(16px) saturate(1.25);
    animation: orderCartBarIn 420ms cubic-bezier(.22, .61, .36, 1);
    transition: transform 160ms ease, box-shadow 160ms ease;
}

.order-cart-bar:not(:disabled):active {
    transform: scale(.985);
}

.order-cart-bar__cta {
    display: inline-flex;
    gap: .25rem;
    align-items: center;
    color: var(--agri-accent);
}

@keyframes orderCartBarIn {
    from {
        opacity: 0;
        transform: translate3d(0, 130%, 0);
    }

    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

.order-sheet-layer .dismissible-panel {
    z-index: 60;
}

/* Bovenste rij van de relatiekiezer: Terug links, profielavatar rechts.
   De avatar (3.95rem) bepaalt de rijhoogte, waardoor hij op exact dezelfde
   hoogte staat als de avatar in de MobileListHeader van het relatiescherm. */
.order-relation-picker__topbar {
    display: flex;
    gap: 1rem;
    align-items: center;
    justify-content: space-between;
}

.order-location-layer .dismissible-panel {
    z-index: 60;
}

.order-location-panel {
    min-height: min(62dvh, 42rem);
}

.order-location-picker {
    display: grid;
    align-content: start;
    gap: .9rem;
    padding: .2rem .1rem .6rem;
}

/* Alleen eigen huid: vlak grijs op het witte panel; maat/vorm komt uit de basis */
.order-location-picker .search-box {
    background: var(--agri-subtle);
}

.order-location-list {
    display: grid;
    align-content: start;
    max-height: min(44dvh, 26rem);
    border: 1px solid rgba(16, 42, 38, .07);
    border-radius: 18px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

.order-location-item {
    display: grid;
    gap: .18rem;
    width: 100%;
    min-height: 4.2rem;
    padding: .7rem 1rem;
    border: 0;
    background: #fff;
    color: var(--agri-ink);
    text-align: left;
    transition: background-color 150ms ease, transform 150ms ease;
}

.order-location-item + .order-location-item {
    border-top: 1px solid rgba(16, 42, 38, .07);
}

.order-location-item:not(:disabled):hover,
.order-location-item:not(:disabled):focus-visible {
    background: var(--agri-subtle);
}

.order-location-item:not(:disabled):active {
    transform: scale(.995);
}

.order-location-item strong {
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.16;
}

.order-location-item span {
    color: var(--agri-muted);
    font-size: .85rem;
    font-weight: 500;
    line-height: 1.25;
}

.order-location-list__empty {
    margin: 0;
    padding: 1.2rem 1rem;
    color: var(--agri-muted);
    text-align: center;
}

.order-review__location {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .9rem;
    padding-bottom: .25rem;
    border-bottom: 1px solid rgba(16, 42, 38, .07);
}

.order-review__location-copy {
    display: grid;
    gap: .1rem;
    min-width: 0;
}

.order-review__location-copy span {
    color: var(--agri-muted);
    font-size: .9rem;
    font-weight: 500;
}

.order-review__location-copy strong {
    overflow: hidden;
    font-size: 1rem;
    font-weight: 600;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.order-review__location-change {
    flex: 0 0 auto;
    min-height: 2.6rem;
    padding: 0 1.05rem;
    border: 0;
    border-radius: 999px;
    background: var(--agri-accent-soft);
    color: var(--agri-accent);
    font-size: .95rem;
    font-weight: 600;
    transition: background-color 160ms ease, transform 160ms ease;
}

.order-review__location-change:not(:disabled):active {
    transform: scale(.97);
}

.order-sheet__body {
    display: grid;
    gap: 1.35rem;
    padding: .2rem .1rem .6rem;
}

.order-sheet__section {
    display: grid;
    gap: .6rem;
}

.order-sheet__section h2 {
    margin: 0;
    color: var(--agri-muted);
    font-size: .95rem;
    font-weight: 600;
}

.order-stepper {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: .9rem;
    align-items: center;
}

.order-stepper__button {
    display: grid;
    width: 3rem;
    height: 3rem;
    place-items: center;
    border: 0;
    border-radius: 999px;
    background: var(--agri-accent-soft);
    color: var(--agri-accent);
    transition: background-color 160ms ease, transform 160ms ease;
}

.order-stepper__button:not(:disabled):hover,
.order-stepper__button:not(:disabled):focus-visible {
    background: color-mix(in srgb, var(--agri-accent) 18%, white);
}

.order-stepper__button:not(:disabled):active {
    transform: scale(.94);
}

.order-stepper__button:disabled {
    opacity: .38;
}

.order-stepper__value {
    display: flex;
    gap: .45rem;
    align-items: baseline;
    justify-content: center;
    min-width: 0;
}

.order-stepper__value input {
    width: min(9rem, 100%);
    min-height: 3.3rem;
    border: 1px solid var(--agri-border);
    border-radius: 20px;
    outline: none;
    background: var(--agri-subtle);
    color: var(--agri-ink);
    font-size: 1.5rem;
    font-weight: 750;
    text-align: center;
}

.order-stepper__value input:focus {
    border-color: color-mix(in srgb, var(--agri-accent) 58%, white);
}

.order-stepper__unit {
    color: var(--agri-muted);
    font-weight: 600;
}

.order-chip-row {
    display: flex;
    flex-wrap: wrap;
    gap: .55rem;
}

.order-chip:disabled {
    opacity: .45;
    cursor: not-allowed;
}

.order-chip {
    display: inline-flex;
    flex-direction: column;
    gap: .12rem;
    align-items: center;
    justify-content: center;
    min-height: 3rem;
    padding: .5rem 1.1rem;
    border: 1px solid var(--agri-border);
    border-radius: 999px;
    background: #fff;
    color: var(--agri-ink);
    font-size: .98rem;
    font-weight: 600;
    transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease;
}

.order-chip small {
    color: var(--agri-muted);
    font-size: .76rem;
    font-weight: 500;
}

.order-chip--active {
    border-color: var(--agri-accent);
    background: var(--agri-accent-soft);
    color: var(--agri-tertiary);
    box-shadow: inset 0 0 0 .5px var(--agri-accent);
}

.order-chip--active small {
    color: var(--agri-tertiary);
}

.order-contract-options {
    align-items: stretch;
}

.order-contract-option {
    display: flex;
    gap: .4rem;
    align-items: stretch;
}

.order-contract-option .order-chip {
    min-width: 7.8rem;
}

.order-contract-option__info {
    display: grid;
    flex: 0 0 auto;
    width: 3rem;
    min-height: 3rem;
    place-items: center;
    border: 1px solid var(--agri-border);
    border-radius: 999px;
    background: #fff;
    color: var(--agri-accent);
    transition: background-color 160ms ease, border-color 160ms ease, transform 160ms ease;
}

.order-contract-option__info:hover,
.order-contract-option__info:focus-visible {
    border-color: color-mix(in srgb, var(--agri-accent) 42%, var(--agri-border));
    background: var(--agri-accent-soft);
}

.order-contract-option__info:active {
    transform: scale(.94);
}

.order-contract-option__spinner {
    width: 1.15rem;
    height: 1.15rem;
}

.order-sheet__input input {
    width: 100%;
    min-height: 3.6rem;
    padding: 0 1.2rem;
    border: 1px solid var(--agri-border);
    border-radius: 22px;
    outline: none;
    background: var(--agri-subtle);
    color: var(--agri-ink);
    font-size: 1.1rem;
    font-weight: 600;
}

.order-sheet__input input:focus {
    border-color: color-mix(in srgb, var(--agri-accent) 58%, white);
}

.order-sheet__input--warning input {
    border-color: var(--agri-warning);
}

.order-sheet__help {
    margin: 0 .3rem;
    color: var(--agri-muted);
    font-size: .88rem;
    line-height: 1.3;
}

.order-sheet__help--warning {
    color: var(--agri-warning);
}

.order-sheet__actions {
    display: grid;
    gap: .8rem;
    margin-top: .4rem;
}

.order-sheet__remove {
    justify-self: center;
    min-height: 3rem;
    padding: 0 1rem;
    border: 0;
    background: transparent;
    color: var(--agri-danger);
    font-size: 1rem;
    font-weight: 600;
}

.order-review {
    display: grid;
    align-content: start;
    gap: 1.35rem;
}

.order-notice {
    --order-notice-fg: var(--agri-info);
    --order-notice-bg: var(--agri-info-soft);
    display: grid;
    gap: .55rem;
    margin: 0;
    padding: .95rem 1.15rem;
    border-radius: 18px;
    background: var(--order-notice-bg);
    color: var(--order-notice-fg);
    font-size: .98rem;
    font-weight: 550;
    line-height: 1.35;
}

.order-notice--warning {
    --order-notice-fg: var(--agri-warning);
    --order-notice-bg: var(--agri-warning-soft);
}

.order-notice--error {
    --order-notice-fg: var(--agri-danger);
    --order-notice-bg: var(--agri-danger-soft);
}

.order-notice__retry {
    justify-self: start;
    min-height: 3rem;
    padding: 0;
    border: 0;
    background: transparent;
    color: inherit;
    font-weight: 700;
    text-decoration: underline;
}

.order-review__section h2 {
    margin: .1rem .45rem .55rem;
    color: var(--agri-ink);
    font-size: 1rem;
    font-weight: 500;
}

.order-review__card {
    display: grid;
    gap: .9rem;
    padding: 1.1rem 1.2rem;
}

.order-review-line {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: .9rem;
    align-items: center;
    width: 100%;
    min-height: 4.6rem;
    padding: .8rem 1rem .8rem 1.1rem;
    border: 0;
    background: #fff;
    color: var(--agri-ink);
    text-align: left;
    transition: background-color 150ms ease, transform 150ms ease;
}

.order-review-line + .order-review-line {
    border-top: 1px solid rgba(16, 42, 38, .07);
}

.order-review-line:not(:disabled):hover,
.order-review-line:not(:disabled):focus-visible {
    background: var(--agri-subtle);
}

.order-review-line:not(:disabled):active {
    transform: scale(.995);
}

.order-review-line__main {
    display: grid;
    gap: .3rem;
    min-width: 0;
}

.order-review-line__main strong {
    overflow: hidden;
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.16;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.order-review-line__main > span {
    color: var(--agri-muted);
    font-size: .9rem;
    font-weight: 500;
}

.order-review-line__badges {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
}

.order-badge {
    display: inline-flex;
    align-items: center;
    padding: .18rem .62rem;
    border-radius: 999px;
    background: var(--agri-accent-soft);
    color: var(--agri-tertiary);
    font-size: .78rem;
    font-weight: 600;
}

.order-review-line__error {
    color: var(--agri-danger);
    font-size: .85rem;
    font-weight: 550;
}

.order-review-line__warning {
    color: var(--agri-warning);
    font-size: .85rem;
    font-weight: 550;
}

.order-review-line__price {
    display: grid;
    gap: .15rem;
    justify-items: end;
}

.order-review-line__price strong {
    font-size: 1rem;
    font-weight: 650;
}

.order-review-line__price small {
    color: var(--agri-muted);
    font-size: .8rem;
    font-weight: 500;
}

/* Goedkeurstatus per regel in de Laatste check (alleen interne accounts) */
.order-review-line__approval {
    display: inline-flex;
    gap: .3rem;
    align-items: center;
    font-size: .78rem;
    font-weight: 650;
}

.order-review-line__approval--ok {
    color: var(--agri-accent);
}

.order-review-line__approval--todo {
    color: var(--agri-warning);
}

.order-review__add {
    justify-self: start;
    min-height: 3rem;
    margin: .5rem .45rem 0;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--agri-accent);
    font-size: 1rem;
    font-weight: 650;
}

.order-toggle {
    display: flex;
    gap: 1rem;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    min-height: 3rem;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--agri-ink);
    font-size: 1.05rem;
    font-weight: 600;
    text-align: left;
}

.order-toggle__track {
    position: relative;
    flex: 0 0 auto;
    width: 3.6rem;
    height: 2.1rem;
    border-radius: 999px;
    background: color-mix(in srgb, var(--agri-ink) 14%, white);
    transition: background-color 200ms ease;
}

.order-toggle__track--on {
    background: var(--agri-accent);
}

.order-toggle__thumb {
    position: absolute;
    top: .225rem;
    left: .225rem;
    width: 1.65rem;
    height: 1.65rem;
    border-radius: 999px;
    background: #fff;
    box-shadow: 0 4px 12px rgba(16, 42, 38, .22);
    transition: transform 200ms cubic-bezier(.22, .61, .36, 1);
}

.order-toggle__track--on .order-toggle__thumb {
    transform: translateX(1.5rem);
}

/* Prijsopbouw in het regeldetail (alleen zichtbaar voor interne accounts) */
.order-pricing__state {
    display: flex;
    flex-wrap: wrap;
    gap: .7rem;
    align-items: center;
    color: var(--agri-muted);
    font-weight: 500;
}

.order-pricing__state--error {
    color: var(--agri-danger);
}

.order-pricing__spinner {
    width: 1.3rem;
    height: 1.3rem;
    border-width: 3px;
}

.order-pricing__source {
    margin: 0 .15rem;
    color: var(--agri-muted);
    font-size: .9rem;
    font-weight: 600;
}

.order-pricing__breakdown {
    display: grid;
    gap: .4rem;
    margin: 0;
    padding: .9rem 1.05rem;
    border-radius: 16px;
    background: var(--agri-subtle);
}

.order-pricing__row {
    display: flex;
    gap: 1rem;
    align-items: baseline;
    justify-content: space-between;
}

.order-pricing__row dt {
    color: var(--agri-muted);
    font-size: .92rem;
    font-weight: 500;
}

.order-pricing__row dd {
    margin: 0;
    font-size: .95rem;
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    white-space: nowrap;
}

/* Bontarief: de correcties vervallen en worden doorgestreept getoond */
.order-pricing__row--void dt,
.order-pricing__row--void dd {
    color: var(--agri-muted);
    text-decoration: line-through;
    opacity: .55;
}

.order-pricing__row--subtotal {
    margin-top: .25rem;
    padding-top: .55rem;
    border-top: 1px solid var(--agri-border);
}

.order-pricing__row--subtotal dt {
    color: var(--agri-ink);
    font-weight: 600;
}

.order-pricing__row--subtotal dd {
    font-size: 1.05rem;
    font-weight: 700;
}

.order-pricing__field {
    display: grid;
    gap: .45rem;
}

.order-pricing__field > span:first-child {
    color: var(--agri-muted);
    font-size: .92rem;
    font-weight: 550;
}

.order-pricing__field input {
    width: 100%;
    min-height: 3.4rem;
    padding: 0 1.1rem;
    border: 1px solid var(--agri-border);
    border-radius: 18px;
    outline: none;
    background: var(--agri-subtle);
    color: var(--agri-ink);
    font-size: 1.05rem;
    font-weight: 600;
}

.order-pricing__field input:focus {
    border-color: color-mix(in srgb, var(--agri-accent) 58%, white);
}

.order-pricing__percent {
    display: flex;
    gap: .6rem;
    align-items: center;
}

.order-pricing__percent input {
    width: 8rem;
}

/* De afwijkende prijs even breed als het kortingspercentage */
.order-pricing__field > input {
    width: 8rem;
}

.order-pricing__percent > span {
    color: var(--agri-muted);
    font-size: 1.05rem;
    font-weight: 600;
}

.order-pricing__amount {
    display: flex;
    gap: 1rem;
    align-items: baseline;
    justify-content: space-between;
    padding: .1rem .15rem;
    font-weight: 600;
}

.order-pricing__amount strong {
    font-size: 1.2rem;
    font-variant-numeric: tabular-nums;
    font-weight: 750;
}

/* Goedkeur-schuifje: toegankelijke switch (role=switch) met een tikdoel van 48px */
.order-approve {
    min-height: 3rem;
    padding: .65rem 1rem;
    border: 1px solid var(--agri-border);
    border-radius: 18px;
    background: var(--agri-subtle);
    transition: background-color 200ms ease, border-color 200ms ease;
}

.order-approve--on {
    border-color: var(--agri-accent);
    background: var(--agri-accent-soft);
    color: var(--agri-tertiary);
}

.order-approve:disabled {
    opacity: .5;
}

/* Leversectie: 'Zo snel mogelijk leveren'-schuifje (zelfde .order-toggle als het
   goedkeur-schuifje) boven de datumvelden; Leveren vanaf + Uiterlijk naast elkaar,
   op smalle schermen onder elkaar */
.order-review__dates {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .8rem;
}

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

.order-review__date {
    display: grid;
    gap: .45rem;
}

.order-review__date span {
    color: var(--agri-muted);
    font-size: .92rem;
    font-weight: 550;
}

.order-review__date input {
    width: 100%;
    min-height: 3.4rem;
    padding: 0 1rem;
    border: 1px solid var(--agri-border);
    border-radius: 18px;
    outline: none;
    background: var(--agri-subtle);
    color: var(--agri-ink);
    font-size: 1.05rem;
    font-weight: 600;
}

.order-review__date input:focus {
    border-color: color-mix(in srgb, var(--agri-accent) 58%, white);
}

.order-review__remark {
    width: 100%;
    min-height: 5.4rem;
    padding: .85rem 1rem;
    border: 1px solid var(--agri-border);
    border-radius: 18px;
    outline: none;
    background: var(--agri-subtle);
    color: var(--agri-ink);
    font-family: inherit;
    font-size: 1rem;
    line-height: 1.4;
    resize: vertical;
}

.order-review__remark:focus {
    border-color: color-mix(in srgb, var(--agri-accent) 58%, white);
}

.order-review__counter {
    justify-self: end;
    margin-top: -.4rem;
    color: var(--agri-muted);
    font-size: .82rem;
    font-weight: 500;
}

.order-review__quoting {
    display: flex;
    gap: .7rem;
    align-items: center;
    color: var(--agri-muted);
    font-weight: 500;
}

.order-review__spinner {
    width: 1.3rem;
    height: 1.3rem;
    border-width: 3px;
}

.order-review__spinner--button {
    border-color: rgba(255, 255, 255, .45);
    border-top-color: #fff;
}

.order-totals {
    display: grid;
    gap: .55rem;
    margin: 0;
}

.order-totals div {
    display: flex;
    gap: 1rem;
    align-items: baseline;
    justify-content: space-between;
}

.order-totals dt {
    color: var(--agri-muted);
    font-weight: 500;
}

.order-totals dd {
    margin: 0;
    font-weight: 650;
}

.order-totals__amount {
    padding-top: .6rem;
    border-top: 1px solid rgba(16, 42, 38, .07);
}

.order-totals__amount dt {
    color: var(--agri-ink);
    font-weight: 600;
}

.order-totals__amount dd {
    font-size: 1.15rem;
}

.order-review__no-total {
    margin: 0;
    color: var(--agri-muted);
}

.order-review__action {
    margin-top: 1.8rem;
    /* Het review-panel dekt de tabbalk af (order-review-panel), dus een normale marge volstaat */
    padding-bottom: calc(1.2rem + env(safe-area-inset-bottom));
}

.order-review__action .auth-button {
    gap: .6rem;
}

.order-confirmation {
    display: grid;
    gap: 1.1rem;
    justify-items: center;
    padding: 1.4rem 0 2rem;
    text-align: center;
}

.order-confirmation__icon {
    display: grid;
    width: 6.4rem;
    height: 6.4rem;
    place-items: center;
    border-radius: 999px;
    background: var(--agri-accent-soft);
    color: var(--agri-accent);
}

.order-confirmation__icon .app-icon {
    stroke-width: 2.6;
}

.order-confirmation__lead {
    max-width: 26rem;
    margin: 0;
    color: var(--agri-muted);
    font-size: 1.05rem;
    line-height: 1.4;
}

.order-confirmation__summary {
    display: grid;
    gap: .6rem;
    width: 100%;
    max-width: 26rem;
    margin: .4rem 0 0;
    padding: 1.2rem 1.3rem;
    text-align: left;
}

.order-confirmation__summary div {
    display: flex;
    gap: 1rem;
    align-items: baseline;
    justify-content: space-between;
}

.order-confirmation__summary dt {
    color: var(--agri-muted);
    font-weight: 500;
}

.order-confirmation__summary dd {
    margin: 0;
    font-weight: 650;
}

.order-confirmation__actions {
    display: grid;
    gap: .8rem;
    width: 100%;
    max-width: 26rem;
    margin-top: .8rem;
}

/* === Meer-menu === */

.more-menu-backdrop {
    position: fixed;
    inset: 0;
    z-index: 40;
    padding: 0;
    border: 0;
    background: color-mix(in srgb, var(--agri-ink) 34%, transparent);
    opacity: 0;
    transition: opacity 240ms ease;
    /* Uitfadend direct doorklikbaar (zie .insp-drag-backdrop) */
    pointer-events: none;
}

.more-menu-backdrop--open {
    opacity: 1;
    pointer-events: auto;
}

.more-menu {
    position: fixed;
    right: 0;
    bottom: -54px;
    left: 0;
    z-index: 41;
    display: grid;
    padding: .55rem clamp(1rem, 4vw, 2rem) calc(1.1rem + env(safe-area-inset-bottom) + 54px);
    border-radius: 30px 30px 0 0;
    background: var(--agri-panel);
    box-shadow: 0 -16px 46px rgba(16, 42, 38, .16);
    transform: translate3d(0, calc(100% + 2rem), 0);
    transition: transform 300ms cubic-bezier(.32, .72, .33, 1);
    touch-action: none;
}

.more-menu--open {
    transform: translate3d(0, var(--more-menu-drag, 0px), 0);
}

.more-menu--dragging {
    transition: none;
}

.more-menu__handle {
    justify-self: center;
    width: 44px;
    height: 5px;
    margin-top: .2rem;
    border-radius: 999px;
    background: color-mix(in srgb, var(--agri-ink) 14%, white);
}

.more-menu__title {
    margin: .7rem 0 .45rem;
    color: #171b22;
    font-size: clamp(1.3rem, 4.6vw, 1.6rem);
    font-weight: 650;
    text-align: center;
}

.more-menu__intro {
    margin: -.2rem 0 .55rem;
    color: color-mix(in srgb, var(--agri-secondary) 62%, white);
    font-size: 1.02rem;
    text-align: center;
}

.more-menu__items {
    display: grid;
    margin: 0 calc(-1 * clamp(1rem, 4vw, 2rem));
}

/* Optiekaarten (zoals de stop-bevestiging) in de sheet: geen full-bleed rijen
   zoals menu-items, maar kaarten binnen de sheet-padding met onderlinge ruimte */
.more-menu__items .switch-option,
.more-menu__items .switch-cancel {
    width: auto;
    margin-left: clamp(1rem, 4vw, 2rem);
    margin-right: clamp(1rem, 4vw, 2rem);
}

.more-menu__items .switch-option + .switch-option {
    margin-top: .7rem;
}

.more-menu__items .switch-cancel {
    margin-top: .45rem;
}

.more-menu__item {
    display: grid;
    grid-template-columns: 3.25rem minmax(0, 1fr) 2.5rem;
    gap: 1rem;
    align-items: center;
    min-height: 4.6rem;
    padding: .7rem clamp(1.25rem, 4.5vw, 2.05rem);
    border: 0;
    border-top: 1px solid rgba(16, 42, 38, .07);
    background: transparent;
    color: #171b22;
    text-align: left;
    transition: background-color 150ms ease, color 150ms ease;
}

.more-menu__item span {
    overflow: hidden;
    color: inherit;
    font-size: clamp(1.15rem, 4.6vw, 1.45rem);
    font-weight: 400;
    line-height: 1.16;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.more-menu__item .app-icon:last-child {
    justify-self: end;
}

.more-menu__item:not(:disabled):hover,
.more-menu__item:not(:disabled):focus-visible {
    background: color-mix(in srgb, var(--agri-accent) 9%, white);
    color: var(--agri-accent);
}

.more-menu__item:not(:disabled):active {
    background: color-mix(in srgb, var(--agri-accent) 16%, white);
}

/* === Leegscherm === */

.empty-screen {
    display: grid;
    gap: .55rem;
    justify-items: center;
    align-content: center;
    min-height: 55dvh;
    text-align: center;
}

.empty-screen__icon {
    display: grid;
    place-items: center;
    width: 4.4rem;
    height: 4.4rem;
    margin-bottom: .4rem;
    border-radius: 50%;
    background: var(--agri-accent-soft);
    color: var(--agri-tertiary);
}

.empty-screen h1 {
    margin: 0;
    color: var(--agri-ink);
    font-size: var(--agri-h2-size);
    font-weight: 650;
}

.empty-screen p {
    margin: 0;
    color: var(--agri-muted);
    font-size: 1.05rem;
}

/* === Orders-tab pagina === */

.orders-page {
    display: grid;
    align-content: start;
    gap: 1.6rem;
    min-height: calc(100dvh - 12rem);
}

/* Groepstitel blijft onder de sticky header staan terwijl de artikelen eronder scrollen */
.order-group h2 {
    position: sticky;
    top: calc(var(--order-flow-header-height, 0px) - 1px);
    z-index: 2;
    margin: 0;
    padding: 1rem .45rem .5rem;
    background: var(--agri-panel);
}

/* Besteloverzicht én bevestiging: boven de zwevende tabbalk (z-index 20), zodat de
   onderste knoppen visueel wegvallen zolang dit scherm open is. De bevestigingssheet
   (signout-sheet, absolute z 5/6) blijft binnen deze stacking context boven de inhoud. */
.order-review-panel {
    z-index: 30;
}

/* Besteloverzicht: zelfde sticky header als het artikelscherm; de ingebouwde
   panel-back en h1 zijn verborgen (de eigen Terug-knop sluit via dezelfde route) */
.order-review-custom {
    grid-template-rows: minmax(0, 1fr);
    padding-top: 0;
}

.order-review-custom > .fullscreen-flow-panel__header {
    display: none;
}

.order-review-custom .fullscreen-flow-panel__content {
    padding-top: 0;
}

.order-review-custom .fullscreen-flow-panel__content > h1 {
    display: none;
}

/* --- Relatie-dossier: cockpit met identiteit, actierij, afspraken en samenvattende
   secties; de massa (afleveradressen, orders) zit achter panelen. --- */

.rd-page .pull-refresh {
    position: relative;
    margin-bottom: 0;
}

/* Zelfde compacte kophoogte als de rest van de app (relatielijst, bestelflow,
   werkvoorraden): Terug en het winkelwagentje verspringen zo niet meer wanneer
   vanuit het dossier de bestelflow opent. De negatieve marge neutraliseert de
   top-padding van de app-schil — de bestelflow is een fixed laag die daarbuiten
   valt en op de kale compacte hoogte staat. position: relative is het anker
   voor de absolute hero-band hieronder. */
.placeholder-page.rd-page {
    position: relative;
    margin-top: calc(-1 * var(--app-shell-top-padding, 0px));
    padding-top: clamp(.6rem, 2.4vw, 1.1rem);
    \* Krapper dan de 2rem van placeholder-page: samen met de sectiepadding hieronder
       stond er tussen twee koppen ruim drie regels lucht — zichtbaar te veel zodra een
       sectie kort is (lege staat van orders of facturen) */
    gap: 1.35rem;
}

/* De sectie zelf sluit onderaan strak af; de paginagap regelt de tussenruimte */
.rd-page .user-profile-section {
    padding-bottom: 0;
}

/* Hero-band: full-bleed themaband achter topbar en avatar, zoals moderne
   contact-apps. Absoluut gepositioneerd zodat de grid-flow — en dus de plek van
   de Terug-knop — exact gelijk blijft; topbar, pull-refresh en identiteit staan
   met alleen position: relative in DOM-volgorde bóven de band (bewust zonder
   z-index). De hoogte volgt de pagina-opbouw: padding-top + topbar-rij
   (3.95rem) + twee grid-gaps (4rem) + een halve avatar (2.05rem), zodat de
   avatar precies over de onderrand valt. */
.rd-hero {
    position: absolute;
    top: 0;
    right: calc(-1 * var(--app-shell-inline-padding, 1rem));
    left: calc(-1 * var(--app-shell-inline-padding, 1rem));
    height: calc(clamp(.6rem, 2.4vw, 1.1rem) + 10rem);
    overflow: hidden;
    border-bottom-right-radius: 1.25rem;
    border-bottom-left-radius: 1.25rem;
    pointer-events: none;
}

/* De schil zet op smalle schermen zijn padding-inline hard op 1rem terwijl de
   variabele op de clamp blijft staan; zonder deze override steken de ronde
   onderhoeken van de band buiten beeld. */
@media (max-width: 520px) {
    .rd-hero {
        right: -1rem;
        left: -1rem;
    }
}

/* Aparte achtergrondlaag: nu themakleur + illustratie; hier kan later een
   relatiefoto (img met object-fit: cover) de illustratie vervangen. De tint
   loopt via de accent-tokens automatisch mee met het actieve thema. */
.rd-hero__bg {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg,
        color-mix(in srgb, var(--agri-accent) 14%, var(--agri-accent-soft)),
        var(--agri-accent-soft));
}

/* Gedempt pand-silhouet, rechtsonder 'op de grond' van de bandrand en iets
   buiten beeld doorlopend; via currentColor kleurt het mee met het accent en
   door de lage dekking per vlak blijft de band rustig onder tekst en knoppen. */
.rd-hero__art {
    position: absolute;
    right: -.4rem;
    bottom: 0;
    height: 72%;
    max-width: 94%;
    color: var(--agri-accent);
}

/* Op de hero-tint valt de soft-tint van de winkelwagencirkel weg: wit vlak,
   in lijn met de witte ring om de avatar. */
.rd-topbar .order-cart-button__circle {
    background: var(--agri-panel);
}

.rd-topbar {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.rd-identity {
    position: relative;
    display: grid;
    justify-items: center;
    gap: .35rem;
    text-align: center;
}

.rd-identity__avatar {
    display: grid;
    place-items: center;
    width: 4.1rem;
    height: 4.1rem;
    border-radius: 999px;
    background: var(--agri-accent-soft);
    color: var(--agri-accent);
    font-size: 1.35rem;
    font-weight: 750;
    letter-spacing: .02em;
}

.rd-identity__name {
    margin: .15rem 0 0;
    color: var(--agri-ink);
    font-size: clamp(1.45rem, 5.6vw, 1.9rem);
    font-weight: 700;
    line-height: 1.1;
    overflow-wrap: anywhere;
}

.rd-identity__city {
    margin: 0;
    color: var(--agri-muted);
    font-weight: 600;
}

.rd-identity__chips {
    display: flex;
    flex-wrap: wrap;
    gap: .45rem;
    justify-content: center;
    margin-top: .5rem;
}

.rd-chip {
    display: inline-flex;
    gap: .35rem;
    align-items: center;
    padding: .32rem .7rem;
    border: 1px solid var(--agri-border);
    border-radius: 999px;
    background: var(--agri-panel);
    color: var(--agri-ink);
    font-size: .85rem;
    font-weight: 650;
}

.rd-chip--action {
    font: inherit;
    font-size: .85rem;
    font-weight: 650;
    cursor: pointer;
}

.rd-chip--signal {
    border-color: color-mix(in srgb, var(--status-skip) 45%, var(--agri-border));
    background: var(--status-skip-soft);
    color: var(--status-skip);
}

.rd-actions {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(.65rem, 3vw, 1.2rem);
    margin: 1.2rem 0 .4rem;
}

.rd-actions .user-profile-action {
    color: inherit;
    text-decoration: none;
}

.rd-actions .user-profile-action:disabled {
    color: var(--agri-muted);
    cursor: default;
    opacity: .55;
}

/* Afspraken-kaart: het goud van het dossier, dus een eigen accenttint */
.rd-notes-card {
    display: grid;
    gap: .3rem;
    width: 100%;
    padding: 1rem 1.1rem 1.1rem;
    border: 1px solid color-mix(in srgb, var(--agri-accent) 24%, var(--agri-border));
    border-radius: 18px;
    background: var(--agri-accent-soft);
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.rd-notes-card__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .6rem;
    color: var(--agri-accent);
}

.rd-notes-card__head h2 {
    margin: 0;
    color: var(--agri-ink);
    font-size: 1.02rem;
    font-weight: 700;
}

.rd-notes-card__label {
    margin-top: .35rem;
    color: var(--agri-muted);
    font-size: .8rem;
    font-weight: 650;
}

.rd-notes-card__text {
    margin: 0;
    color: var(--agri-ink);
    font-size: .95rem;
    line-height: 1.45;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.rd-notes-card__text--clamped {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
}

.rd-notes-card__empty {
    margin: 0;
    color: var(--agri-muted);
    font-weight: 600;
}

.rd-notes-toggle {
    justify-self: start;
    margin-top: .35rem;
    padding: .3rem .2rem;
    border: 0;
    background: transparent;
    color: var(--agri-accent);
    font: inherit;
    font-size: .9rem;
    font-weight: 700;
    cursor: pointer;
}

/* Compacte lege-staat in dossiersecties ('Geen contactpersonen bekend') */
.rd-empty-note {
    margin: .1rem .2rem .3rem;
    color: color-mix(in srgb, var(--agri-ink) 55%, white);
    font-size: .87rem;
}

/* Compacte lege staat binnen een dossierblok: gedempte regel met eventueel een
   bescheiden actiechip eronder — veel lager dan de schermbrede relations-state */
/* Iets meer lucht tussen de melding en de knop: die twee horen bij elkaar, maar
   plakten aan elkaar vast */
.rd-empty-block {
    display: grid;
    justify-items: start;
    gap: .8rem;
    margin-bottom: .2rem;
}

/* Actiechip in een lege staat: zachte accenttint, geen schreeuwende primaire knop */
.rd-chip--add {
    border-color: color-mix(in srgb, var(--agri-accent) 30%, var(--agri-border));
    background: var(--agri-accent-soft);
    color: var(--agri-tertiary);
}

.rd-contact-card {
    display: flex;
    gap: .55rem;
    align-items: center;
    margin-bottom: .6rem;
    padding: .35rem .55rem .35rem .2rem;
    border: 1px solid var(--agri-border);
    border-radius: 16px;
    background: var(--agri-panel);
}

.rd-contact-card__body {
    display: grid;
    flex: 1 1 auto;
    gap: .1rem;
    min-width: 0;
    padding: .55rem .35rem .55rem .85rem;
    border: 0;
    background: transparent;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.rd-contact-card__body strong {
    color: var(--agri-ink);
    font-weight: 700;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.rd-contact-card__body span {
    color: var(--agri-muted);
    font-size: .85rem;
    font-weight: 600;
}

.rd-contact-card__quick {
    display: grid;
    flex: 0 0 auto;
    place-items: center;
    width: 2.6rem;
    height: 2.6rem;
    border: 1px solid var(--agri-border);
    border-radius: 999px;
    color: var(--agri-accent);
}

/* Gegevens-kaarten die tegelijk actie zijn (bellen, mailen, kopiëren) */
.rd-info-link {
    width: 100%;
    font: inherit;
    color: inherit;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
}

/* Panelen van het dossier (locaties, orders): eigen vaste laag boven de tab-inhoud */
.rd-panel-layer {
    position: fixed;
    inset: 0;
    z-index: 30;
    pointer-events: none;
}

/* Sheets die bínnen de panel-laag openen (locatie/order/levering/contract) erven anders
   pointer-events: none van de laag en zijn dan volledig doof: sluiten, rubberband en
   alle knoppen doen het pas met een expliciete auto. */
/* Alleen de ÓPEN backdrop krijgt zijn kliks terug: de uitfadende backdrop moet ook in
   deze laag direct doorklikbaar zijn (eerste tik na sluiten ging anders verloren) */
.rd-panel-layer .insp-drag-backdrop--open,
.rd-panel-layer .insp-drag-sheet {
    pointer-events: auto;
}

/* Locatierijen in de stijl van het relatiezoekscherm, met een derde kolom voor de
   type-chip of telefoon-indicator */
.relation-list-item--location {
    grid-template-columns: 3.65rem minmax(0, 1fr) auto;
}

.rd-panel {
    display: grid;
    gap: .8rem;
    align-content: start;
}

/* Zoekveld blijft bij het scrollen bovenaan het paneel staan. Het veld is zelf matglas,
   dus de lijst loopt er vervaagd onderdoor; de fade eronder vult de gridkier zodat een rij
   niet halverwege afgesneden onder het veld vandaan komt. */
.rd-search-sticky {
    position: sticky;
    top: 0;
    z-index: 3;
}

.rd-search-sticky::after {
    content: "";
    position: absolute;
    top: 100%;
    right: 0;
    left: 0;
    height: .8rem;
    background: linear-gradient(#fff, rgba(255, 255, 255, 0));
    pointer-events: none;
}

.rd-filter-row {
    display: flex;
    gap: .45rem;
    overflow-x: auto;
    padding-bottom: .15rem;
    -webkit-overflow-scrolling: touch;
}

.rd-filter-chip {
    flex: 0 0 auto;
    padding: .45rem .85rem;
    border: 1px solid var(--agri-border);
    border-radius: 999px;
    background: var(--agri-panel);
    color: var(--agri-ink);
    font: inherit;
    font-size: .88rem;
    font-weight: 650;
    white-space: nowrap;
    cursor: pointer;
}

.rd-filter-chip.is-active {
    border-color: var(--agri-accent);
    background: var(--agri-accent-soft);
    color: var(--agri-accent);
}

.rd-location-row__phone {
    display: grid;
    flex: 0 0 auto;
    place-items: center;
    color: var(--agri-muted);
}

.rd-location-address span {
    display: block;
}

.rd-transport-note {
    display: grid;
    gap: .3rem;
    padding: .8rem .95rem;
    border-radius: 14px;
    background: var(--agri-accent-soft);
    color: var(--agri-ink);
}

.rd-transport-note p {
    margin: 0;
    font-size: .92rem;
    line-height: 1.4;
    /* Chauffeursnotities staan met eigen regelovergangen in de backoffice ingetypt
       (openingstijden, aanrijroute); die horen ook hier op eigen regels te staan */
    white-space: pre-line;
}

/* Keuzerijen in de bel/mail/locatie-sheets: échte tel:/mailto:-links */
.contact-choice {
    display: flex;
    gap: .7rem;
    align-items: center;
    width: 100%;
    margin-bottom: .5rem;
    padding: .7rem .8rem;
    border: 1px solid var(--agri-border);
    border-radius: 14px;
    background: var(--agri-panel);
    color: inherit;
    text-decoration: none;
}

/* Keuzerijen die een knop zijn (locatie: bestellen, adres delen): knop krimpt niet naar zijn tekst */
button.contact-choice {
    text-align: left;
    cursor: pointer;
}

.contact-choice__icon {
    display: grid;
    flex: 0 0 auto;
    place-items: center;
    width: 2.4rem;
    height: 2.4rem;
    border-radius: 999px;
    background: var(--agri-accent-soft);
    color: var(--agri-accent);
}

.contact-choice__copy {
    display: grid;
    gap: .05rem;
    min-width: 0;
}

.contact-choice__copy strong {
    color: var(--agri-ink);
    font-size: .92rem;
    font-weight: 700;
}

.contact-choice__copy span {
    color: var(--agri-muted);
    font-size: .88rem;
    font-weight: 600;
    overflow-wrap: anywhere;
}

.contact-sheet__role {
    margin: -.4rem 0 .6rem;
    color: var(--agri-muted);
    font-weight: 600;
}

/* --- Verkoopcontracten (saldometer) --- */

/* Gewicht rechts op een orderregel in de order-sheet */
.rd-delivery-row__kg {
    color: var(--agri-ink);
    font-weight: 750;
    font-variant-numeric: tabular-nums;
    text-align: right;
    white-space: nowrap;
}

.rd-delivery-row__kg small {
    color: var(--agri-muted);
    font-size: .78rem;
    font-weight: 650;
}

/* Orderregels in de order-sheet: compacter dan een lijstrij in een vol panel, zodat een
   order van zes regels binnen de sheet leesbaar blijft */
.rd-order-line {
    grid-template-columns: 3rem minmax(0, 1fr) auto;
    gap: .75rem;
    min-height: 4.4rem;
    padding: .65rem .7rem .65rem .8rem;
}

.rd-order-line .list-row__avatar {
    width: 2.6rem;
    height: 2.6rem;
}

/* Saldometer: dunne voortgangsbalk geleverd/totaal */
.rd-meter {
    display: block;
    width: 100%;
    height: .45rem;
    overflow: hidden;
    border-radius: 999px;
    background: var(--agri-subtle);
}

.rd-meter__fill {
    display: block;
    height: 100%;
    border-radius: 999px;
    background: var(--agri-accent);
    transition: width 300ms ease;
}

.rd-contract-card {
    display: grid;
    gap: .4rem;
    width: 100%;
    margin-bottom: .6rem;
    padding: .9rem 1rem 1rem;
    border: 1px solid var(--agri-border);
    border-radius: 16px;
    background: var(--agri-panel);
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.rd-contract-card--closed {
    opacity: .78;
}

.rd-contract-card__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .6rem;
}

.rd-contract-card__head strong {
    color: var(--agri-ink);
    font-weight: 750;
    font-variant-numeric: tabular-nums;
}

.rd-contract-card__badge {
    padding: .2rem .55rem;
    border-radius: 999px;
    font-size: .76rem;
    font-weight: 700;
}

.rd-contract-card__badge--open {
    background: var(--status-done-soft);
    color: var(--status-done);
}

.rd-contract-card__badge--rest {
    background: var(--status-busy-soft);
    color: var(--status-busy);
}

.rd-contract-card__article {
    color: var(--agri-ink);
    font-size: .92rem;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.rd-contract-card__meta {
    color: var(--agri-muted);
    font-size: .85rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

/* Meterblok in de contract-sheet: de meter groot met de kerngetallen eronder */
.rd-contract-meterblock {
    display: grid;
    gap: .4rem;
    margin-bottom: .8rem;
    padding: 1rem 1.1rem 1.1rem;
    border: 1px solid var(--agri-border);
    border-radius: 16px;
    background: var(--agri-panel);
}

.rd-contract-meterblock strong {
    color: var(--agri-ink);
    font-size: 1.05rem;
    font-weight: 750;
    font-variant-numeric: tabular-nums;
}

.rd-contract-meterblock span {
    color: var(--agri-muted);
    font-size: .85rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

/* Nieuwe relatie (rc-): zelfde pagina-opbouw als het dossier, met invulvelden in de
   inlogscherm-taal (auth-input). Kruis links annuleert, vinkje rechts slaat op. */

/* Zonder pull-to-refresh-rij is er één grid-gap (2rem) minder tussen topbar en
   avatar; de band krimpt mee zodat de avatar weer precies op de rand valt */
.rc-page .rd-hero {
    height: calc(clamp(.6rem, 2.4vw, 1.1rem) + 8rem);
}

.rc-page .rd-identity__avatar {
    color: var(--agri-accent);
}

/* Huisstijlregel invulschermen: kruis linksboven en vinkje rechtsboven staan vast in
   beeld; de inhoud schuift er bij het scrollen achter langs. Vast (fixed) in plaats van
   sticky, want een grid-item plakt alleen binnen z'n eigen rij. De rij herhaalt de
   schilgeometrie (gecentreerde breedte + inline-padding) zodat de knoppen exact boven
   de spacer-rij van de pagina staan. z-index 3: boven de inhoud, onder de
   bevestigingspanelen (z 4) en BusyOverlay (z 250). */
.rc-topbar-spacer {
    min-height: 3.95rem;
}

.rc-topbar-fixed {
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    z-index: 3;
    pointer-events: none;
}

.rc-topbar-fixed__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    width: min(100%, 920px);
    margin-inline: auto;
    padding: clamp(.6rem, 2.4vw, 1.1rem) var(--app-shell-inline-padding, 1rem) 0;
}

/* De schil zet op smalle schermen zijn padding-inline hard op 1rem (zie
   .app-shell__surface); de vaste rij volgt, anders verspringen de knoppen */
@media (max-width: 520px) {
    .rc-topbar-fixed__row {
        padding-inline: 1rem;
    }
}

.rc-topbar-fixed .order-cart-button {
    pointer-events: auto;
}

/* Kruis gedempt op paneelkleur, vinkje in accent; zelfde cirkels als de dossier-topbar */
.rc-topbar-circle {
    background: var(--agri-panel);
    color: color-mix(in srgb, var(--agri-ink) 72%, white);
}

.rc-topbar-circle.rc-topbar-circle--confirm {
    background: var(--agri-accent);
    color: #fff;
}

.rc-form {
    display: grid;
    gap: .35rem;
}

/* De veldmarge (1.3rem) doet het ritme al; de sectiepadding hoeft er weinig bij */
.rc-section {
    padding-bottom: 0;
}

.rc-section h2 {
    margin-bottom: .8rem;
}

.rc-field-row {
    display: grid;
    grid-template-columns: 1.25fr 1fr;
    gap: .8rem;
}

.rc-field-row .auth-input input {
    padding-inline: 1.2rem;
}

/* Selects en textareas bestonden nog niet in de auth-input-taal; zelfde vorm als input */
.auth-input select {
    width: 100%;
    min-height: 5.15rem;
    padding: 2.2rem 3.6rem .85rem 1.45rem;
    border: 1px solid #e1e4e7;
    border-radius: 28px;
    outline: none;
    background: #f3f4f6 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%236b7680' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 1.45rem center;
    color: var(--agri-ink);
    font-family: inherit;
    font-size: 1.22rem;
    font-weight: 750;
    appearance: none;
}

.auth-input select:focus {
    border-color: color-mix(in srgb, var(--agri-accent) 58%, white);
    box-shadow: inset .24rem 0 0 var(--agri-accent);
}

.auth-input textarea {
    width: 100%;
    min-height: 8.2rem;
    padding: 2.35rem 1.45rem .85rem;
    border: 1px solid #e1e4e7;
    border-radius: 28px;
    outline: none;
    background: #f3f4f6;
    color: var(--agri-ink);
    font: inherit;
    font-size: 1.12rem;
    font-weight: 600;
    resize: vertical;
}

.auth-input textarea:focus {
    border-color: color-mix(in srgb, var(--agri-accent) 58%, white);
    box-shadow: inset .24rem 0 0 var(--agri-accent);
}

.auth-input--invalid input,
.auth-input--invalid select,
.auth-input--invalid textarea {
    border-color: #d23b3b;
    background-color: #fdf3f3;
}

/* Foutregel direct onder het veld, in de ruimte van de veldmarge */
.rc-field-error {
    margin: -.85rem .35rem 1rem;
    color: #d23b3b;
    font-size: .95rem;
    font-weight: 650;
}

.rc-save-error {
    margin: .2rem .35rem .8rem;
    color: #d23b3b;
    font-size: 1rem;
    font-weight: 650;
    text-align: center;
}

.rc-form .auth-button {
    margin-top: .4rem;
}

/* Relatie-dossier facturen (rdi-): facturenview in Apple-aankoopgeschiedenis-stijl.
   Eén scherm voor verkoop (debiteur) en inkoop (crediteur): zoekbalk, tikbare
   "Toont:"-filterregel, datumgroepen met witte kaarten, filterscherm als tweede
   paneellaag en het lichte factuurdetail. De flairs worden ook door de
   samenvattingsrijen op het dossier gebruikt. */

.rdi-screen {
    gap: 1rem;
}

/* Zoekbalk op het witte paneel: vlak en rustig in plaats van de glazen lijstvariant */
.rdi-screen .search-box {
    border-color: color-mix(in srgb, var(--agri-ink) 7%, transparent);
    background: color-mix(in srgb, var(--agri-ink) 4%, white);
    box-shadow: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}

/* Tikbare filtersamenvatting "Toont: …" — de gekozen waarden in accent, als linkjes */
.rdi-showing {
    justify-self: start;
    margin: -.3rem .2rem 0;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--agri-muted);
    font: inherit;
    font-size: .95rem;
    font-weight: 500;
    line-height: 1.45;
    text-align: left;
    cursor: pointer;
}

.rdi-showing strong {
    color: var(--agri-accent);
    font-weight: 650;
}

.rdi-groups {
    display: grid;
    gap: 1.05rem;
}

.rdi-group {
    display: grid;
    gap: .55rem;
}

/* Datumkopje boven de kaartengroep: klein en gedempt, zoals de letterkopjes in de lijst */
.rdi-group__date {
    margin: 0 .45rem;
    color: var(--agri-muted);
    font-size: .88rem;
    font-weight: 550;
    font-variant-numeric: tabular-nums;
}

/* Factuurkaart: één tikdoel met bovenin de factuurrij en onderin de totaalrij */
.rdi-card {
    display: grid;
    width: 100%;
    padding: 0;
    overflow: hidden;
    border: 0;
    border-radius: 16px;
    background: var(--agri-panel);
    color: var(--agri-ink);
    font: inherit;
    text-align: left;
    box-shadow: 0 6px 20px rgba(16, 42, 38, .05);
    cursor: pointer;
    transition: transform 150ms ease;
}

.rdi-card:not(:disabled):active {
    transform: scale(.99);
}

/* Rechterkolom op max-content: bedrag en flair mogen nooit afkappen, de tekstkolom krimpt */
.rdi-card__main {
    display: grid;
    grid-template-columns: 3rem minmax(0, 1fr) max-content;
    gap: .8rem;
    align-items: center;
    padding: .9rem 1rem .75rem;
}

/* Kaart zonder totaalrij (order zonder besteld gewicht): de onderrand krijgt dezelfde
   lucht als de bovenkant, zodat de kaart ook zonder tweede rij af oogt */
.rdi-card--single .rdi-card__main {
    padding-bottom: .9rem;
}

.rdi-card__text {
    display: grid;
    gap: .18rem;
    min-width: 0;
}

.rdi-card__text strong {
    overflow: hidden;
    font-size: 1.02rem;
    font-weight: 650;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.rdi-card__text span {
    overflow: hidden;
    color: var(--agri-muted);
    font-size: .92rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.rdi-card__right {
    display: grid;
    gap: .3rem;
    justify-items: end;
}

.rdi-card__amount {
    color: var(--agri-ink);
    font-size: .98rem;
    font-weight: 650;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* "Totaal … ›"-rij: aparte rij onderin de kaart met een hairline erboven */
.rdi-card__total {
    display: flex;
    gap: .5rem;
    align-items: center;
    padding: .7rem 1rem;
    border-top: 1px solid color-mix(in srgb, var(--agri-ink) 8%, transparent);
}

.rdi-card__total > span {
    font-weight: 600;
}

.rdi-card__total strong {
    margin-left: auto;
    font-weight: 650;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.rdi-card__total .app-icon {
    color: color-mix(in srgb, var(--agri-ink) 34%, white);
}


/* Flairs: zachte achtergrondtint met duidelijke tekstkleur, gewone kast (nooit uppercase).
   Betaald houdt de vaste semantische groentint, openstaand de themadanger-rood. */
.rdi-flair {
    display: inline-flex;
    align-items: center;
    padding: .22rem .6rem;
    border-radius: 999px;
    font-size: .8rem;
    font-weight: 650;
    white-space: nowrap;
}

.rdi-flair--open {
    background: var(--agri-danger-soft);
    color: var(--agri-danger);
}

.rdi-flair--paid {
    background: var(--status-done-soft);
    color: var(--status-done);
}

.rdi-flair--credited {
    background: var(--agri-subtle);
    color: var(--agri-muted);
}

/* Orderstatussen: afgerond deelt het groen van 'betaald', actief het semantische blauw
   (niet het accent — dat is in het standaardthema óók groen en zou botsen met afgerond),
   en 'wacht op akkoord' de amber waarschuwingstint */
.rdi-flair--done {
    background: var(--status-done-soft);
    color: var(--status-done);
}

.rdi-flair--active {
    background: var(--status-todo-soft);
    color: var(--status-todo);
}

.rdi-flair--waiting {
    background: var(--agri-warning-soft);
    color: var(--agri-warning);
}

/* Filterscherm: optierijen in witte kaarten, vinkje achter de gekozen optie */
.rdi-filter {
    gap: .3rem;
}

.rdi-filter__label {
    margin: .8rem .45rem .55rem;
    color: var(--agri-muted);
    font-size: .88rem;
    font-weight: 550;
}

.rdi-filter-option {
    display: flex;
    gap: 1rem;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    min-height: 3.7rem;
    padding: .7rem 1.1rem;
    border: 0;
    background: transparent;
    color: var(--agri-ink);
    font: inherit;
    font-size: 1.02rem;
    font-weight: 500;
    text-align: left;
    cursor: pointer;
}

.rdi-filter-option + .rdi-filter-option {
    border-top: 1px solid color-mix(in srgb, var(--agri-ink) 8%, transparent);
}

.rdi-filter-option.is-active {
    font-weight: 700;
}

.rdi-filter-option .app-icon {
    color: var(--agri-accent);
}

/* Live resultaatteller onder de filterkaarten */
.rdi-filter__count {
    margin: 1.1rem 0 0;
    color: var(--agri-muted);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    text-align: center;
}

/* Vinkje rechtsboven in het filterscherm: spiegel van de ronde terugknop van het paneel,
   in accent — de vaste-actieknoppen-huisregel van invulschermen (terug links, vinkje
   rechts, de inhoud scrollt erachter langs) */
.rdi-filter-confirm.user-profile-close {
    top: max(1.25rem, env(safe-area-inset-top));
    right: clamp(1.25rem, 4vw, 2.1rem);
    left: auto;
    z-index: 2;
    border-color: color-mix(in srgb, var(--agri-accent) 62%, white);
    background: var(--agri-accent);
    color: #fff;
}

.rdi-filter-confirm.user-profile-close:not(:disabled):hover,
.rdi-filter-confirm.user-profile-close:not(:disabled):focus-visible {
    background: var(--agri-accent);
}

/* Alleen deze sheet mag hoger worden (90% van het scherm), zodat er meer factuur- en
   orderregels tegelijk in beeld staan. De +54px compenseert de onderrand-overhang van de
   sleepmechanica (.insp-drag-sheet zit op bottom: -54px), zodat er echt 90% zichtbaar is.
   Bewust alleen max-height en geen vaste hoogte: een korte factuur houdt zo een compacte
   sheet. Twee klassen = hogere specificiteit dan .insp-sheet, dus de app-brede
   max-height min(84dvh, 46rem) blijft voor alle andere sheets ongemoeid. */
.rdi-detail-sheet.insp-drag-sheet {
    max-height: calc(90dvh + 54px);
}

/* Locatiedetail volgens dezelfde rekensom, maar op 80%: adres, acties en het
   transportblok passen daarbinnen en er blijft een strook dossier zichtbaar. */
.rd-location-sheet.insp-drag-sheet {
    max-height: calc(80dvh + 54px);
}

/* Dezelfde lijndikte als de iconen in de tabbalk: rustiger dan de standaard 2.15 */
.rd-location-sheet .app-icon {
    stroke-width: 1.7;
}

/* Factuurdetail-sheet: gecentreerde flair onder de titel en de totalenkaart */
.rdi-sheet-flair {
    margin: .15rem 0 .5rem;
    text-align: center;
}

.rdi-sheet-totals {
    display: grid;
    gap: .55rem;
    margin-bottom: 10px;
    padding: 1.05rem 1.25rem;
    border-radius: 18px;
    background: #f5f5f5;
}

.rdi-sheet-totals__row {
    display: flex;
    gap: 1rem;
    align-items: baseline;
    justify-content: space-between;
    color: var(--agri-muted);
    font-weight: 550;
}

.rdi-sheet-totals__row span:last-child {
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.rdi-sheet-totals__row--grand {
    color: var(--agri-ink);
    font-size: 1.08rem;
    font-weight: 750;
}

.rdi-sheet-totals__row--due {
    color: var(--agri-danger);
    font-weight: 650;
}

/* Factuurregels in het detail: compacte rijen in dezelfde kaarttaal als de totalen,
   met hairlines ertussen; notitieregels zijn één gedempte tekstregel */
.rdi-sheet-lines {
    margin-bottom: 10px;
    padding: .25rem 1.25rem;
    border-radius: 18px;
    background: #f5f5f5;
}

.rdi-line {
    display: grid;
    gap: .14rem;
    padding: .65rem 0;
}

.rdi-line + .rdi-line {
    border-top: 1px solid color-mix(in srgb, var(--agri-ink) 8%, transparent);
}

/* Rij binnen een regel: tekst links, bedrag of prijs rechts — rechts kapt nooit af */
.rdi-line__row {
    display: flex;
    gap: 1rem;
    align-items: baseline;
    justify-content: space-between;
}

.rdi-line__row strong {
    min-width: 0;
    font-size: .98rem;
    font-weight: 600;
    line-height: 1.25;
}

.rdi-line__desc2,
.rdi-line__row--meta,
.rdi-line__weight,
.rdi-line--note > span {
    color: var(--agri-muted);
    font-size: .85rem;
}

/* Factuurgewicht: eigen regel onder de meta, in dezelfde linkerkolom (rechts blijft leeg —
   de prijs-per staat op de regel erboven) */
.rdi-line__weight {
    font-variant-numeric: tabular-nums;
}

/* Aantikbare factuurregel: knopstijl uit, verder exact de gewone regel */
button.rdi-line--action {
    width: 100%;
    border: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

button.rdi-line--action:not(:disabled):active {
    opacity: .75;
}

/* --- Detail van één factuurregel: eigen vaste laag boven de sheet (z 41), zodat het
   absoluut gepositioneerde paneel altijd een schermvullende voorouder heeft. Binnen
   .rd-panel-layer (z 30) telt dit lokaal, daarbuiten globaal — in beide gevallen boven
   de sheet en zijn backdrop. De laag zelf vangt geen kliks; .profile-overlay-panel--open
   zet pointer-events zelf weer aan. --- */
.rdi-line-layer {
    position: fixed;
    inset: 0;
    z-index: 42;
    pointer-events: none;
}

.rdi-linedetail {
    gap: .3rem;
}

.rdi-linedetail__head {
    margin: 0 .2rem .35rem;
}

.rdi-linedetail__head h2 {
    margin: 0;
    font-size: 1.15rem;
    font-weight: 650;
    line-height: 1.25;
}

.rdi-linedetail__head p {
    margin: .2rem 0 0;
    color: var(--agri-muted);
    font-size: .92rem;
}

/* Kolommenlijst in dezelfde rustige kaartstijl als het factuurdetail: label links
   gedempt, waarde rechts, hairlines ertussen */
.rdi-detail-card {
    padding: 0 1.15rem;
    border-radius: 18px;
    background: #f5f5f5;
}

.rdi-detail-row {
    display: flex;
    gap: 1rem;
    align-items: baseline;
    justify-content: space-between;
    width: 100%;
    padding: .7rem 0;
    color: var(--agri-muted);
    font-size: .95rem;
    font-weight: 550;
    text-align: left;
}

.rdi-detail-row + .rdi-detail-row,
.rdi-detail-row + .rdi-price-parts,
.rdi-price-parts + .rdi-detail-row {
    border-top: 1px solid color-mix(in srgb, var(--agri-ink) 8%, transparent);
}

.rdi-detail-row__value {
    display: flex;
    gap: .3rem;
    flex-shrink: 0;
    align-items: center;
    color: var(--agri-ink);
    font-weight: 650;
    font-variant-numeric: tabular-nums;
    text-align: right;
}

button.rdi-detail-row--action {
    border: 0;
    background: transparent;
    font: inherit;
    font-size: .95rem;
    font-weight: 550;
    color: var(--agri-muted);
    cursor: pointer;
}

/* Chevron kantelt omlaag zodra de prijsopbouw openstaat (de iconenset kent geen
   chevron-down; roteren houdt het bij één icoon) */
.rdi-detail-row__chevron {
    display: grid;
    place-items: center;
    color: color-mix(in srgb, var(--agri-ink) 34%, white);
    transition: transform 160ms ease;
}

.rdi-detail-row--action.is-open .rdi-detail-row__chevron {
    transform: rotate(90deg);
}

/* Prijsopbouw: klein rekenlijstje onder de prijsregel, ingesprongen en gedempt */
.rdi-price-parts {
    display: grid;
    gap: .35rem;
    padding: .65rem 0 .75rem .9rem;
}

.rdi-price-parts__row {
    display: flex;
    gap: 1rem;
    align-items: baseline;
    justify-content: space-between;
    color: var(--agri-muted);
    font-size: .9rem;
}

.rdi-price-parts__row span:last-child {
    flex-shrink: 0;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.rdi-price-parts__row--total {
    margin-top: .15rem;
    padding-top: .45rem;
    border-top: 1px solid color-mix(in srgb, var(--agri-ink) 12%, transparent);
    color: var(--agri-ink);
    font-weight: 700;
}

.rdi-line__meta {
    min-width: 0;
}

.rdi-line__amount {
    flex-shrink: 0;
    font-weight: 650;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.rdi-line__price {
    flex-shrink: 0;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* Laad-/foutregel: kleine spinner met gedempte tekst — geen groot foutblok in de sheet */
.rdi-line--state {
    grid-template-columns: auto minmax(0, 1fr);
    gap: .55rem;
    align-items: center;
    color: var(--agri-muted);
    font-size: .9rem;
}

.rdi-line--state .app-startup__indicator {
    width: 1.1rem;
    height: 1.1rem;
    border-width: 2px;
}

/* Bestandsrijen in het factuurdetail (Factuur (PDF), Bijlagen · N): dezelfde kaarttaal
   als de dossierrijen, maar compacter — twee rijen op dossierhoogte zouden de sheet
   domineren. Het icoonchipje volgt de sectiekoppen van de contractdetails. */
.rdi-file-row {
    gap: .8rem;
    min-height: 3.9rem;
    padding-top: .7rem;
    padding-bottom: .7rem;
}

.rdi-file-row__icon {
    display: grid;
    flex: 0 0 auto;
    place-items: center;
    width: 2.3rem;
    height: 2.3rem;
    border-radius: 12px;
    background: var(--agri-accent-soft);
    color: var(--agri-accent);
}

.rdi-file-row:not(:disabled):active {
    opacity: .8;
}

/* --- Bijlagenpaneel: thumbnailgrid in dezelfde tegel-taal als de ritfoto's, met
   documenttegels voor pdf's en overige bestanden --- */
.rdi-attach-panel {
    gap: .3rem;
}

.rdi-attach-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(6.5rem, 1fr));
    gap: .5rem;
}

.rdi-attach {
    position: relative;
    aspect-ratio: 1;
    padding: 0;
    border: 0;
    border-radius: .9rem;
    background: var(--agri-subtle);
    overflow: hidden;
    cursor: pointer;
}

.rdi-attach img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.rdi-attach:not(:disabled):active {
    opacity: .8;
}

.rdi-attach:focus-visible {
    outline: 2px solid var(--agri-accent);
    outline-offset: 2px;
}

/* Documenttegel zonder thumb: icoon met de bestandsnaam eronder (maximaal twee regels,
   afgekapt — de volledige naam staat op de klaar-sheet) */
.rdi-attach__doc {
    display: grid;
    gap: .4rem;
    place-items: center;
    align-content: center;
    width: 100%;
    height: 100%;
    padding: .5rem;
    color: var(--agri-muted);
}

.rdi-attach__name {
    display: -webkit-box;
    max-width: 100%;
    overflow: hidden;
    font-size: .68rem;
    font-weight: 600;
    line-height: 1.25;
    text-align: center;
    overflow-wrap: anywhere;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
}

/* Merkteken op een documenttegel mét thumb ("PDF" of de extensie), leesbaar op elke scan */
.rdi-attach__badge {
    position: absolute;
    right: .35rem;
    bottom: .35rem;
    padding: .12rem .4rem;
    border-radius: 999px;
    background: color-mix(in srgb, var(--agri-ink) 72%, transparent);
    color: #fff;
    font-size: .62rem;
    font-weight: 750;
}

/* --- Klaar-sheet van de pdf/bijlage-flow: eigen stapellaag boven het bijlagenpaneel
   (z 44), zelfde constructie als de contractdetails in het orderscherm --- */
.invoice-file-backdrop {
    z-index: 45;
}

.invoice-file-sheet.insp-drag-sheet {
    z-index: 46;
}

.invoice-file-sheet__head {
    display: flex;
    gap: .7rem;
    align-items: center;
    margin: .2rem .2rem .9rem;
}

.invoice-file-sheet__head h2 {
    margin: 0;
    min-width: 0;
    font-size: 1.08rem;
    line-height: 1.3;
    overflow-wrap: anywhere;
}

.invoice-file-sheet__badge {
    display: grid;
    flex: 0 0 auto;
    place-items: center;
    width: 2.6rem;
    height: 2.6rem;
    border-radius: 14px;
    background: var(--agri-accent-soft);
    color: var(--agri-accent);
}

/* Foutstaat: één stille, gecentreerde regel in de stijl van de regels-foutmelding */
.rdi-line--state.invoice-file-sheet__error {
    grid-template-columns: minmax(0, 1fr);
    justify-items: center;
    padding: 1.2rem 0 .5rem;
    text-align: center;
}

/* Korte actie-melding onder de knoppen ("Delen is niet gelukt."), verdwijnt vanzelf */
.invoice-file-sheet__note {
    margin: .2rem 0 0;
    color: var(--agri-danger);
    font-size: .85rem;
    font-weight: 600;
    text-align: center;
}

/* Entry-werkomgeving */

:root {
    /* Alleen nieuwe Entry-tokens; bestaande --agri-*-tokens blijven de enige bron */
    --entry-plate-yellow: #F8BE18;
    --entry-plate-blue: #003DA5;
}

.entry-worklist {
    /* Hoogte van de vaste kop (titel + zoekbalk, zonder statusfilterbalk); lijst begint eronder.
       Opbouw op 393px: kop ±9px + headerrij ±59px + gap 18px + zoekbalk ±38px + ±20px lucht */
    --entry-top-height: 9.4rem;
    display: grid;
    align-content: start;
    gap: 1.15rem;
    padding-top: calc(var(--entry-top-height) + .25rem);
    min-height: calc(100dvh - 12rem);
}

/* Trek-om-te-verversen: eerste item in de lijst; het vak groeit in de flow mee met de
   trek zodat de indicator in het gat onder de vaste kop verschijnt. Op hoogte 0 kost
   het item niets (negatieve marge compenseert de grid-gap van de lijst). */
.pull-refresh {
    display: grid;
    gap: .4rem;
    align-content: end;
    justify-items: center;
    height: 0;
    margin-bottom: -1.15rem;
    padding-bottom: .15rem;
    overflow: hidden;
    color: var(--agri-muted);
    visibility: hidden;
}

.pull-refresh--active {
    visibility: visible;
}

.pull-refresh__spinner {
    width: 1.35rem;
    height: 1.35rem;
    opacity: .55;
}

.pull-refresh--armed .pull-refresh__spinner,
.pull-refresh--busy .pull-refresh__spinner {
    opacity: 1;
}

.pull-refresh__label {
    font-size: .82rem;
    font-weight: 650;
}

.pull-refresh--armed .pull-refresh__label {
    color: var(--agri-ink);
}

@media (prefers-reduced-motion: reduce) {
    .pull-refresh {
        transition: none !important;
    }
}

/* Afgerond-scherm: extra Terug-knop in de kop (+Terugknop 45px +gap 18px) */
.entry-worklist--finished {
    --entry-top-height: 13.6rem;
}

/* Vaste kop van de werkvoorraad (header + zoekbalk + filters): zelfde patroon als
   .relations-page__top in Verkoop — position: fixed met blur/fade; de autolijst
   scrolt erachter langs en de kop beweegt nooit mee */
.entry-worklist__top {
    position: fixed;
    top: 0;
    left: 50%;
    z-index: 16;
    display: grid;
    gap: 1.2rem;
    width: min(100%, 920px);
    margin: 0;
    /* Zelfde compacte kop als .relations-page__top: ±9px boven, 18px naar de zoekbalk */
    padding: clamp(.6rem, 2.4vw, 1.1rem) var(--app-shell-inline-padding, 1rem) .8rem;
    /* De enige afwijking op de gedeelde band: hier dekkend in plaats van doorschijnend,
       want de kentekenplaten mogen niet door de kop heen schemeren. Zelfde kleur, alleen
       zonder alfa — vandaar hetzelfde token. */
    background: rgb(var(--agri-header-band-rgb));
    transform: translateX(-50%);
}

.entry-worklist__state {
    min-height: 34dvh;
    /* Ruim onder de vaste kop beginnen, zodat melding en knop volledig vrij staan */
    margin-top: clamp(1.6rem, 6dvh, 3.4rem);
}

/* Statusfilter: segment-chips met tellers, randloos uitscrollend over de paginarand */
.wv-filters {
    display: flex;
    gap: .45rem;
    margin: -.15rem calc(-1 * var(--app-shell-inline-padding, 1rem)) 0;
    padding: .25rem var(--app-shell-inline-padding, 1rem) .55rem;
    overflow-x: auto;
    scrollbar-width: none;
}

.wv-filters::-webkit-scrollbar {
    display: none;
}

.wv-filter {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    flex: 0 0 auto;
    min-height: 2.9rem;
    padding: 0 1.05rem;
    border: 1px solid rgba(16, 42, 38, .1);
    border-radius: 999px;
    background: #fff;
    color: var(--agri-ink);
    font: inherit;
    font-size: .95rem;
    font-weight: 650;
    cursor: pointer;
    transition: background-color 150ms ease, color 150ms ease, border-color 150ms ease;
}

.wv-filter em {
    display: grid;
    min-width: 1.45rem;
    height: 1.45rem;
    place-items: center;
    padding: 0 .3rem;
    border-radius: 999px;
    background: var(--agri-subtle);
    font-size: .8rem;
    font-style: normal;
    font-weight: 800;
}

.wv-filter.is-active {
    border-color: var(--agri-accent);
    background: var(--agri-accent);
    color: #fff;
}

.wv-filter.is-active em {
    background: rgba(255, 255, 255, .18);
}

/* --- Voertuigtegel --- */

.car-list {
    display: grid;
    gap: .85rem;
}

.car-card {
    position: relative;
    display: grid;
    gap: .8rem;
    width: 100%;
    padding: 1.05rem 1.1rem 1rem;
    border: 0;
    border-radius: 22px;
    background: #fff;
    box-shadow: 0 12px 34px rgba(16, 42, 38, .09);
    color: var(--agri-ink);
    font: inherit;
    text-align: left;
    animation: entryCardIn 520ms cubic-bezier(.22, .61, .36, 1) both;
    transition: transform 150ms ease, box-shadow 150ms ease;
    cursor: pointer;
}

/* Vertragingen op lijstpositie: tegels zitten in een .car-card-holder (voor het
   Stop-knopje naast de tegel-knop), skeletons staan direct in .car-list */
.car-list > :nth-child(1) > .car-card,
.car-list > .car-card:nth-child(1) { animation-delay: 40ms; }
.car-list > :nth-child(2) > .car-card,
.car-list > .car-card:nth-child(2) { animation-delay: 100ms; }
.car-list > :nth-child(3) > .car-card,
.car-list > .car-card:nth-child(3) { animation-delay: 160ms; }
.car-list > :nth-child(4) > .car-card,
.car-list > .car-card:nth-child(4) { animation-delay: 220ms; }
.car-list > :nth-child(5) > .car-card,
.car-list > .car-card:nth-child(5) { animation-delay: 280ms; }
.car-list > :nth-child(6) > .car-card,
.car-list > .car-card:nth-child(6) { animation-delay: 340ms; }

.car-card:hover {
    box-shadow: 0 18px 44px rgba(16, 42, 38, .13);
}

.car-card:active {
    transform: scale(.988);
}

@keyframes entryCardIn {
    from {
        opacity: 0;
        transform: translateY(.9rem);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.car-card--done {
    opacity: .78;
}

/* Auto die op naam van de ingelogde gebruiker staat (claimedByMe) */
.car-card--mine {
    box-shadow:
        0 12px 34px rgba(16, 42, 38, .09),
        inset 0 0 0 2px color-mix(in srgb, var(--agri-accent) 55%, white);
}

.car-card--mine:hover {
    box-shadow:
        0 18px 44px rgba(16, 42, 38, .13),
        inset 0 0 0 2px color-mix(in srgb, var(--agri-accent) 55%, white);
}

.car-card__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .8rem;
    /* Grid-item mag smaller worden dan z'n inhoud, anders rekt een lange plaat (VIN in het
       kentekenveld) de rij buiten de kaart i.p.v. dat de plaat afkapt */
    min-width: 0;
}

/* NL-kentekenplaat (LicensePlate-component, drie maten) */
.plate {
    display: inline-flex;
    /* Mag krimpen binnen z'n rij: lange inhoud (bv. een VIN in het kentekenveld) mag de
       kaart nooit oprekken; het nummer wordt dan afgekapt met een ellipsis (.plate__nr) */
    flex: 0 1 auto;
    max-width: 100%;
    min-width: 0;
    align-items: stretch;
    overflow: hidden;
    border: 1.5px solid rgba(16, 42, 38, .35);
    border-radius: 7px;
    background: var(--entry-plate-yellow);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), 0 1px 2px rgba(16, 42, 38, .18);
}

.plate__eu {
    display: grid;
    place-items: center;
    align-content: center;
    gap: .1rem;
    flex: 0 0 auto;
    width: 1.35rem;
    padding: .2rem .1rem;
    background: var(--entry-plate-blue);
    color: #fff;
    font-size: .58rem;
    font-weight: 800;
    letter-spacing: .02em;
}

.plate__eu i {
    color: #FFD617;
    font-size: .5rem;
    font-style: normal;
    line-height: 1;
}

.plate__nr {
    /* Block i.p.v. grid zodat te lange inhoud (VIN) met een ellipsis afkapt; het nummer is
       altijd het hoogste element van de plaat, dus verticaal centreren is niet nodig */
    display: block;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    padding: .34rem .7rem .3rem;
    color: #14181c;
    font-size: 1.32rem;
    font-weight: 600;
    letter-spacing: .075em;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.plate--sm .plate__nr {
    padding: .22rem .55rem .2rem;
    font-size: 1.05rem;
}

.plate--sm .plate__eu {
    width: 1.1rem;
    font-size: .5rem;
}

.plate--lg .plate__nr {
    padding: .45rem .95rem .4rem;
    font-size: 1.72rem;
}

.plate--lg .plate__eu {
    width: 1.7rem;
    font-size: .7rem;
}

/* Statusbadges: hoog contrast voor fel daglicht */
.status-badge {
    display: inline-flex;
    align-items: center;
    gap: .38rem;
    flex: 0 0 auto;
    min-height: 1.95rem;
    padding: 0 .72rem;
    border-radius: 999px;
    font-size: .84rem;
    font-weight: 750;
    white-space: nowrap;
}

.status-badge::before {
    width: .52rem;
    height: .52rem;
    border-radius: 999px;
    background: currentColor;
    content: "";
}

.status-badge--queue {
    background: var(--agri-subtle);
    color: color-mix(in srgb, var(--agri-ink) 78%, white);
}

.status-badge--busy {
    background: var(--agri-info-soft);
    color: var(--agri-info);
}

.status-badge--busy::before {
    animation: entryBusyPulse 1.6s ease-in-out infinite;
}

.status-badge--done {
    background: var(--agri-accent-soft);
    color: var(--agri-tertiary);
}

@keyframes entryBusyPulse {
    0%, 100% {
        opacity: 1;
        transform: scale(1);
    }

    50% {
        opacity: .45;
        transform: scale(.8);
    }
}

/* Zonder merkbolletje: merk/type en opdrachtgever beginnen direct links */
.car-card__body {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: .75rem;
    align-items: center;
}

.car-card__text {
    display: grid;
    gap: .12rem;
    min-width: 0;
}

.car-card__text strong {
    overflow: hidden;
    font-size: 1.04rem;
    font-weight: 650;
    line-height: 1.16;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.car-card__text span {
    overflow: hidden;
    color: var(--agri-muted);
    font-size: .88rem;
    font-weight: 500;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.car-card__side {
    display: grid;
    justify-items: center;
    gap: .3rem;
}

.avatar-stack {
    display: flex;
}

.avatar-stack .mini-avatar + .mini-avatar {
    margin-left: -.55rem;
}

.mini-avatar {
    display: grid;
    width: 1.85rem;
    height: 1.85rem;
    place-items: center;
    border: 2px solid #fff;
    border-radius: 999px;
    background: linear-gradient(135deg, var(--agri-secondary), var(--agri-tertiary));
    color: #fff;
    font-size: .68rem;
    font-weight: 800;
}

.mini-avatar--alt {
    background: linear-gradient(135deg, var(--agri-info), color-mix(in srgb, var(--agri-info) 62%, white));
}

.state-done {
    display: grid;
    width: 1.9rem;
    height: 1.9rem;
    place-items: center;
    border-radius: 999px;
    background: var(--agri-accent);
    color: #fff;
}

/* Metaregel: parkeerlocatie en RDW-terugroep */
.car-card__meta {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
    padding-top: .15rem;
}

/* Voortgang technische reparatie op de kaart: dunne accentbalk + N/M-teller */
.car-card__progress {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding-top: .2rem;
}

.car-card__progressbar {
    flex: 1;
    height: 6px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--agri-accent) 14%, var(--agri-panel));
    overflow: hidden;
}

.car-card__progressfill {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: var(--agri-accent);
    transition: width 260ms ease;
}

.car-card__progresslabel {
    color: var(--agri-muted);
    font-size: .82rem;
    font-weight: 650;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.meta-chip {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    min-height: 1.85rem;
    padding: 0 .62rem;
    border-radius: 8px;
    background: var(--agri-subtle);
    color: color-mix(in srgb, var(--agri-ink) 74%, white);
    font-size: .82rem;
    font-weight: 650;
    white-space: nowrap;
}

.meta-chip .app-icon {
    flex: 0 0 auto;
}

.meta-chip--park {
    background: color-mix(in srgb, var(--entry-plate-blue) 9%, white);
    color: color-mix(in srgb, var(--entry-plate-blue) 82%, black);
}

.meta-chip--rdw {
    background: var(--agri-warning-soft);
    color: var(--agri-warning);
}

/* Techniek-werkvoorraad: voortgangschip (hoofdstukkenteller) op de ordertegel */
.meta-chip--progress {
    background: var(--status-todo-soft);
    color: var(--status-todo);
}

/* Bron-B-orders (Controlelijst open, maar de order staat op een andere afdeling):
   grijs onderaan de lijst en niet tikbaar; de tegel is dan een div i.p.v. een knop */
.car-card--other {
    cursor: default;
    filter: grayscale(1);
    opacity: .62;
}

.car-card--other:hover {
    box-shadow: 0 12px 34px rgba(16, 42, 38, .09);
}

.car-card--other:active {
    transform: none;
}

/* Laad-skeleton voor de voertuigtegels */
.car-card--skeleton {
    pointer-events: none;
}

.entry-skeleton {
    display: block;
    height: 1.1rem;
    border-radius: 10px;
    background: linear-gradient(90deg, rgba(16, 42, 38, .06) 25%, rgba(16, 42, 38, .12) 50%, rgba(16, 42, 38, .06) 75%);
    background-size: 200% 100%;
    animation: entrySkeletonShimmer 1.4s ease-in-out infinite;
}

.entry-skeleton--plate {
    width: 9rem;
    height: 2.15rem;
    border-radius: 7px;
}

.entry-skeleton--title {
    width: 70%;
}

.entry-skeleton--meta {
    width: 45%;
    height: .95rem;
}

@keyframes entrySkeletonShimmer {
    from {
        background-position: 200% 0;
    }

    to {
        background-position: -200% 0;
    }
}

/* --- Tabbalk met centrale FAB (GlassTabBarFab): zelfde glass-vormtaal als .glass-tabbar,
   inclusief de bewegende lens (.glass-tabbar__clip/__lens worden hergebruikt). De lens
   is één item-kolom breed; --entry-fab-space is de vaste breedte van de FAB-kolom
   (4.7rem knop + 2 × .65rem marge) die de lens overslaat richting de rechterhelft --- */
.entry-tabbar {
    --glass-tabbar-padding: .45rem;
    --entry-fab-space: 6rem;
    --glass-tabbar-lens-width: calc((100% - .9rem - var(--entry-fab-space)) / var(--entry-tabbar-count, 2));
    position: relative;
    isolation: isolate;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: stretch;
    min-height: 5.15rem;
    padding: var(--glass-tabbar-padding);
    border: 1px solid rgba(16, 42, 38, .08);
    border-radius: 28px;
    background: rgba(255, 255, 255, .74);
    box-shadow:
        0 16px 42px rgba(16, 42, 38, .16),
        inset 0 1px 1px rgba(255, 255, 255, .82);
    -webkit-backdrop-filter: blur(18px) saturate(1.25);
    backdrop-filter: blur(18px) saturate(1.25);
}

.entry-tabbar::before {
    position: absolute;
    inset: 1px;
    z-index: 0;
    border-radius: inherit;
    background: linear-gradient(180deg, rgba(255, 255, 255, .58), rgba(255, 255, 255, .12));
    content: "";
    pointer-events: none;
}

.entry-tabbar__item {
    position: relative;
    z-index: 2;
    display: grid;
    gap: .32rem;
    align-content: center;
    justify-items: center;
    min-width: 0;
    border: 0;
    border-radius: 24px;
    background: transparent;
    color: var(--agri-ink);
    font: inherit;
    font-size: .82rem;
    font-weight: 500;
    line-height: 1;
    opacity: .72;
    transition: opacity 200ms ease, background-color 200ms ease;
    cursor: pointer;
}

/* De grijze lens-capsule markeert de actieve tab; het item kleurt mee in de themakleur */
.entry-tabbar__item.is-active {
    color: var(--agri-accent);
    opacity: 1;
}

.entry-tabbar__item:not(:disabled):hover,
.entry-tabbar__item:not(:disabled):focus-visible {
    opacity: 1;
}

.entry-tabbar__icon {
    position: relative;
    display: inline-grid;
    place-items: center;
}

/* De centrale FAB steekt boven de balk uit: het grootste tap-target van het scherm */
.entry-fab {
    position: relative;
    z-index: 2;
    display: grid;
    place-items: center;
    width: 4.7rem;
    height: 4.7rem;
    margin: -2.1rem .65rem 0;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: linear-gradient(150deg, color-mix(in srgb, var(--agri-accent) 88%, white), var(--agri-tertiary));
    color: #fff;
    /* Schaduwkleur volgt het thema: --agri-tertiary op lage dekking (was de vaste groentint) */
    box-shadow:
        0 0 0 6px rgba(255, 255, 255, .9),
        0 18px 38px color-mix(in srgb, var(--agri-tertiary) 38%, transparent);
    cursor: pointer;
    transition: transform 160ms ease, box-shadow 160ms ease;
    animation: entryFabBreath 3.2s ease-in-out infinite;
}

.entry-fab:hover {
    transform: translateY(-2px);
}

.entry-fab:active {
    transform: scale(.94);
}

.entry-fab span {
    position: absolute;
    bottom: -1.42rem;
    color: var(--agri-ink);
    font-size: .82rem;
    font-weight: 700;
}

@keyframes entryFabBreath {
    0%, 100% {
        box-shadow: 0 0 0 6px rgba(255, 255, 255, .9), 0 18px 38px color-mix(in srgb, var(--agri-tertiary) 38%, transparent);
    }

    50% {
        box-shadow: 0 0 0 6px rgba(255, 255, 255, .9), 0 20px 44px color-mix(in srgb, var(--agri-tertiary) 52%, transparent);
    }
}

/* --- Entry-sheet: bottom-sheet in de vormtaal van de signout-sheet, maar fixed
   over de hele app zodat hij ook boven de zwevende tabbalk verschijnt --- */
.entry-sheet-backdrop {
    position: fixed;
    inset: 0;
    z-index: 40;
    padding: 0;
    border: 0;
    background: color-mix(in srgb, var(--agri-ink) 34%, transparent);
    animation: entrySheetFadeIn 240ms ease both;
}

.entry-sheet__confirm {
    min-height: 3.4rem;
    border: 0;
    border-radius: 999px;
    background: var(--agri-accent);
    color: #fff;
    font-size: 1.05rem;
    font-weight: 600;
    cursor: pointer;
    transition: filter 150ms ease;
}

.entry-sheet__confirm:not(:disabled):hover,
.entry-sheet__confirm:not(:disabled):focus-visible {
    filter: brightness(.94);
}

@keyframes entrySheetUp {
    from {
        opacity: 0;
        transform: translateY(105%);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes entrySheetFadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

/* --- Tegel-houder met Stop-knopje: het knopje is een sibling van de tegel-knop
   (geen knop-in-knop) en staat in de bovenste rij direct naast de Bezig-badge;
   de bovenste rij reserveert er rechts ruimte voor --- */
.car-card-holder {
    position: relative;
}

.car-card--stoppable .car-card__top {
    padding-right: 4.35rem;
}

/* Zelfde hoogte en pilvorm als .status-badge, maar met rand en schaduw zodat hij
   als knop herkenbaar is; het tap-target wordt via ::after tot ±44px opgerekt */
.car-card__stop {
    position: absolute;
    top: 1.05rem;
    right: 1.1rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 3.65rem;
    min-height: 1.95rem;
    padding: 0 .72rem;
    border: 1px solid rgba(16, 42, 38, .14);
    border-radius: 999px;
    background: #fff;
    color: var(--agri-ink);
    font: inherit;
    font-size: .84rem;
    font-weight: 750;
    box-shadow: 0 6px 16px rgba(16, 42, 38, .12);
    cursor: pointer;
    transition: background-color 150ms ease, color 150ms ease;
}

.car-card__stop::after {
    position: absolute;
    inset: -.7rem -.45rem;
    content: "";
}

.car-card__stop:hover,
.car-card__stop:focus-visible {
    background: var(--agri-danger-soft);
    color: var(--agri-danger);
}

/* --- Scanscherm (EntryScanScreen): fullscreen donkere zoeker, mockup 'Scannen' --- */
.scan-screen {
    position: fixed;
    inset: 0;
    z-index: 45;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;
    background:
        radial-gradient(46rem 30rem at 50% -8%, rgba(108, 167, 77, .18), transparent 55%),
        linear-gradient(180deg, #0b1512, #07100d 55%);
    color: #fff;
}

.scan-screen__header {
    display: grid;
    grid-template-columns: 3rem minmax(0, 1fr) 3rem;
    gap: .6rem;
    align-items: center;
    padding: calc(1.2rem + env(safe-area-inset-top)) 1.1rem .6rem;
}

.scan-screen__header h2 {
    margin: 0;
    font-size: 1.08rem;
    font-weight: 650;
    text-align: center;
}

.scan-round-btn {
    display: grid;
    width: 2.85rem;
    height: 2.85rem;
    place-items: center;
    border: 0;
    border-radius: 999px;
    background: rgba(255, 255, 255, .12);
    color: #fff;
    cursor: pointer;
    transition: background-color 150ms ease, color 150ms ease;
}

.scan-round-btn:hover,
.scan-round-btn:focus-visible {
    background: rgba(255, 255, 255, .22);
}

/* Torch aan: accentkleur zodat de stand in fel daglicht duidelijk is */
.scan-round-btn.is-active {
    background: var(--agri-accent);
    color: #fff;
}

.scan-stage {
    position: relative;
    display: grid;
    place-items: center;
    overflow: hidden;
    padding: 1rem 1.6rem 3.4rem;
}

.scan-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Geen camera of geen toestemming: duidelijke melding midden in de zoekerzone */
.scan-camera-message {
    position: relative;
    display: grid;
    gap: .75rem;
    justify-items: center;
    max-width: 22rem;
    padding: 1.5rem;
    text-align: center;
}

.scan-camera-message p {
    margin: 0;
    color: rgba(255, 255, 255, .85);
    font-size: 1rem;
    line-height: 1.5;
}

.scan-camera-message button {
    min-height: 2.9rem;
    padding: 0 1.2rem;
    border: 0;
    border-radius: 999px;
    background: rgba(255, 255, 255, .14);
    color: #fff;
    font: inherit;
    font-size: .95rem;
    font-weight: 650;
    cursor: pointer;
    transition: background-color 150ms ease;
}

.scan-camera-message button:hover,
.scan-camera-message button:focus-visible {
    background: rgba(255, 255, 255, .24);
}

.scan-screen__footer {
    display: grid;
    gap: .9rem;
    padding: .4rem 0 max(.9rem, env(safe-area-inset-bottom));
}

/* Herkenningsresultaat: glass-kaart die van onder inschuift */
.scan-result {
    position: relative;
    display: grid;
    gap: .85rem;
    margin: 0 1rem;
    padding: 1.15rem 1.15rem 1.25rem;
    border: 1px solid rgba(255, 255, 255, .16);
    border-radius: 26px;
    background: rgba(255, 255, 255, .1);
    -webkit-backdrop-filter: blur(18px) saturate(1.2);
    backdrop-filter: blur(18px) saturate(1.2);
    animation: entrySheetUp 460ms cubic-bezier(.22, .61, .36, 1) both;
}

.scan-result__row {
    display: flex;
    align-items: center;
    gap: .85rem;
}

.scan-result__row .plate {
    border-color: rgba(0, 0, 0, .3);
}

.scan-result__copy {
    display: grid;
    gap: .1rem;
    min-width: 0;
}

.scan-result__copy strong {
    overflow: hidden;
    font-size: 1.02rem;
    font-weight: 650;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.scan-result__copy span {
    overflow: hidden;
    color: rgba(255, 255, 255, .62);
    font-size: .86rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.scan-result__match {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    flex: 0 0 auto;
    margin-left: auto;
    color: color-mix(in srgb, var(--agri-accent) 75%, white);
    font-size: .82rem;
    font-weight: 750;
    white-space: nowrap;
}

.scan-result__cta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .45rem;
    min-height: 3.9rem;
    border: 0;
    border-radius: 999px;
    background: var(--agri-accent);
    color: #fff;
    font: inherit;
    font-size: 1.12rem;
    font-weight: 650;
    box-shadow: 0 14px 32px rgba(57, 117, 75, .4);
    cursor: pointer;
    transition: filter 150ms ease, transform 150ms ease;
}

.scan-result__cta:hover,
.scan-result__cta:focus-visible {
    filter: brightness(1.05);
}

.scan-result__cta:active {
    transform: scale(.985);
}

/* Niet herkend / niet op Entry / bezig met zoeken */
.scan-result__message {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    margin: 0;
    color: rgba(255, 255, 255, .88);
    font-size: 1rem;
    font-weight: 550;
    text-align: center;
}

.scan-result--error .scan-result__message .app-icon {
    color: var(--agri-warning-soft);
}

.scan-result__retry {
    min-height: 3.4rem;
    border: 0;
    border-radius: 999px;
    background: rgba(255, 255, 255, .14);
    color: #fff;
    font: inherit;
    font-size: 1.02rem;
    font-weight: 650;
    cursor: pointer;
    transition: background-color 150ms ease;
}

.scan-result__retry:hover,
.scan-result__retry:focus-visible {
    background: rgba(255, 255, 255, .24);
}

/* Bevestigingsstap (CarVerifyScanScreen): de gekozen auto als glass-kaart bovenin de
   zoeker, zodat glashelder is wélke auto de scan moet bevestigen. */
.scan-expected {
    position: absolute;
    top: 1rem;
    right: 1rem;
    left: 1rem;
    z-index: 2;
    display: flex;
    gap: .85rem;
    align-items: center;
    padding: .8rem .95rem;
    border: 1px solid rgba(255, 255, 255, .16);
    border-radius: 20px;
    background: rgba(12, 22, 20, .55);
    color: #fff;
    -webkit-backdrop-filter: blur(18px) saturate(1.2);
    backdrop-filter: blur(18px) saturate(1.2);
}

/* Het kenteken krijgt zijn volle breedte (een gewoon kenteken mag hier nooit
   afkappen; de tekst ernaast schuift op en wrapt). De 55%-grens is het vangnet
   voor VIN-in-kentekenveld, zodat de tekst nooit wordt weggedrukt. */
.scan-expected .plate {
    flex-shrink: 0;
    max-width: 55%;
}

.scan-expected__copy {
    display: grid;
    gap: .1rem;
    min-width: 0;
}

.scan-expected__copy strong {
    font-size: .98rem;
    font-weight: 750;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.scan-expected__copy span {
    color: rgba(255, 255, 255, .78);
    font-size: .84rem;
    font-weight: 550;
}

/* Noodweg voor kapotte of ontbrekende stickers: bewust gedempt, geen primaire route */
.scan-skip {
    justify-self: center;
    min-height: 2.6rem;
    padding: 0 1.2rem;
    border: 0;
    background: transparent;
    color: rgba(255, 255, 255, .6);
    font: inherit;
    font-size: .9rem;
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: .22em;
    cursor: pointer;
    transition: color 150ms ease;
}

.scan-skip:hover,
.scan-skip:focus-visible {
    color: #fff;
}

.scan-close {
    justify-self: center;
    min-height: 3.3rem;
    padding: 0 1.6rem;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: rgba(255, 255, 255, .75);
    font: inherit;
    font-size: 1rem;
    font-weight: 650;
    cursor: pointer;
    transition: color 150ms ease;
}

.scan-close:hover,
.scan-close:focus-visible {
    color: #fff;
}

/* --- Wisselsheet (EntrySwitchSheet) en stop-bevestiging: vormtaal van de
   signout-sheet, fixed zoals de entry-sheet, met geblurde backdrop --- */
.entry-sheet-backdrop--blur {
    -webkit-backdrop-filter: blur(3px) saturate(.9);
    backdrop-filter: blur(3px) saturate(.9);
}

.switch-sheet {
    position: fixed;
    right: clamp(.9rem, 3vw, 1.4rem);
    bottom: max(1rem, env(safe-area-inset-bottom));
    left: clamp(.9rem, 3vw, 1.4rem);
    z-index: 41;
    display: grid;
    gap: .7rem;
    max-width: 30rem;
    margin-inline: auto;
    padding: .8rem 1.15rem 1.1rem;
    border-radius: 30px;
    background: var(--agri-panel);
    box-shadow: var(--agri-shadow);
    animation: entrySheetUp 380ms cubic-bezier(.32, .72, .33, 1) both;
}

.switch-sheet__handle {
    justify-self: center;
    width: 4.8rem;
    height: .42rem;
    margin: .15rem 0 .1rem;
    border-radius: 999px;
    background: #e1e4e2;
}

.switch-sheet h2 {
    margin: .15rem .4rem 0;
    font-size: 1.32rem;
    font-weight: 700;
    line-height: 1.2;
    text-align: center;
}

.switch-sheet > p {
    margin: 0 .8rem .2rem;
    color: var(--agri-muted);
    font-size: .95rem;
    line-height: 1.45;
    text-align: center;
}

/* Visuele wissel: huidige plaat -> pijl -> nieuwe plaat */
.switch-visual {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: .55rem;
    align-items: center;
    margin: .25rem 0 .3rem;
    padding: .85rem .8rem;
    border-radius: 20px;
    background: var(--agri-subtle);
}

.switch-visual__car {
    display: grid;
    gap: .32rem;
    justify-items: center;
    min-width: 0;
}

.switch-visual__car small {
    overflow: hidden;
    max-width: 100%;
    color: var(--agri-muted);
    font-size: .76rem;
    font-weight: 650;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.switch-visual__arrow {
    display: grid;
    place-items: center;
    color: var(--agri-accent);
    animation: entryArrowNudge 1.4s ease-in-out infinite;
}

@keyframes entryArrowNudge {
    0%, 100% {
        transform: translateX(0);
    }

    50% {
        transform: translateX(.3rem);
    }
}

.switch-option {
    display: grid;
    grid-template-columns: 2.9rem minmax(0, 1fr);
    gap: .85rem;
    align-items: center;
    width: 100%;
    min-height: 4.7rem;
    padding: .7rem 1rem .7rem .8rem;
    border: 1px solid color-mix(in srgb, var(--agri-accent) 18%, white);
    border-radius: 22px;
    background: #f6f8f6;
    color: var(--agri-ink);
    font: inherit;
    text-align: left;
    cursor: pointer;
    transition: background-color 150ms ease, border-color 150ms ease, box-shadow 150ms ease, transform 150ms ease;
}

.switch-option:hover,
.switch-option:focus-visible {
    border-color: color-mix(in srgb, var(--agri-accent) 52%, white);
    background: #fff;
    box-shadow: 0 14px 30px rgba(57, 117, 75, .13);
}

.switch-option:active {
    transform: scale(.985);
}

.switch-option__icon {
    display: grid;
    width: 2.9rem;
    height: 2.9rem;
    place-items: center;
    border-radius: 15px;
    background: color-mix(in srgb, var(--agri-accent) 13%, white);
    color: var(--agri-tertiary);
}

.switch-option strong {
    display: block;
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.2;
}

.switch-option small {
    display: block;
    margin-top: .16rem;
    color: var(--agri-muted);
    font-size: .84rem;
    font-weight: 500;
    line-height: 1.3;
}

.switch-option--primary {
    border-color: transparent;
    background: var(--agri-accent);
    color: #fff;
    box-shadow: 0 14px 32px rgba(57, 117, 75, .3);
}

.switch-option--primary:hover,
.switch-option--primary:focus-visible {
    border-color: transparent;
    background: color-mix(in srgb, var(--agri-accent) 88%, black);
    box-shadow: 0 16px 36px rgba(57, 117, 75, .38);
}

.switch-option--primary .switch-option__icon {
    background: rgba(255, 255, 255, .2);
    color: #fff;
}

.switch-option--primary small {
    color: rgba(255, 255, 255, .78);
}

.switch-cancel {
    min-height: 3.3rem;
    margin-top: .1rem;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: var(--agri-ink);
    font: inherit;
    font-size: 1rem;
    font-weight: 650;
    cursor: pointer;
    transition: background-color 150ms ease;
}

.switch-cancel:hover,
.switch-cancel:focus-visible {
    background: var(--agri-subtle);
}

/* --- Auto-dossier (EntryDossierPanel): eigen sticky header in het fullscreen-paneel,
   zelfde constructie als .order-flow-panel --- */
.entry-dossier-panel {
    /* Boven de vaste werkvoorraadkop (16) en de tabbalk (20), zoals .order-review-panel */
    z-index: 30;
    grid-template-rows: minmax(0, 1fr);
    padding-top: 0;
}

/* Het dossier glijdt van rechts naar links binnen (zoals profiel → Instellingen →
   Mijn account, vgl. .profile-overlay-panel--from-right) en schuift bij Terug weer
   naar rechts weg; de basisstaat van .fullscreen-flow-panel (vanaf onder) wordt
   hier per staat overschreven */
.entry-dossier-panel.fullscreen-flow-panel {
    transform: translate3d(100%, 0, 0);
}

.entry-dossier-panel.fullscreen-flow-panel--open {
    /* none: geen containing block voor fixed-lagen (zie .fullscreen-flow-panel--open) */
    transform: none;
}

.entry-dossier-panel.fullscreen-flow-panel--leaving {
    transform: translate3d(100%, 0, 0);
}

.entry-dossier-panel > .fullscreen-flow-panel__header {
    display: none;
}

.entry-dossier-panel .fullscreen-flow-panel__content {
    padding-top: 0;
}

.entry-dossier-panel .fullscreen-flow-panel__content > h1 {
    display: none;
}

.dossier-header {
    position: sticky;
    top: 0;
    z-index: 4;
    display: grid;
    gap: .55rem;
    margin-bottom: .9rem;
    /* Zelfde compacte kophoogte als de rest van de app (relatielijst, bestelflow, dossier) */
    padding: clamp(.6rem, 2.4vw, 1.1rem) 0 .8rem;
    background: #fff;
    box-shadow:
        0 1px 0 rgba(16, 42, 38, .07),
        0 14px 18px -16px rgba(16, 42, 38, .16);
}

.dossier-header__bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    min-height: 2.9rem;
}

/* Identiteit in de vaste kop: plaat + merk/type + VIN/ordernr, compacte voortgangsring rechts */
.dossier-header__identity {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: .8rem;
    min-width: 0;
}

.dossier-header__plate {
    display: grid;
    gap: .3rem;
    justify-items: center;
}

.dossier-header__order {
    color: var(--agri-muted);
    font-size: .8rem;
    font-weight: 650;
    white-space: nowrap;
}

.dossier-header__copy {
    display: grid;
    gap: .1rem;
    min-width: 0;
}

.dossier-header__copy strong {
    overflow: hidden;
    font-size: 1.05rem;
    font-weight: 650;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dossier-header__copy span {
    overflow: hidden;
    color: var(--agri-muted);
    font-size: .82rem;
    font-weight: 550;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.ring--header {
    flex: 0 0 auto;
}

/* Autosave-chip: groen = opgeslagen, neutraal = bezig, amber = wachtrij niet gesynchroniseerd */
.autosave-chip {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    flex: 0 0 auto;
    min-height: 2.2rem;
    padding: 0 .78rem;
    border-radius: 999px;
    background: var(--agri-accent-soft);
    color: var(--agri-tertiary);
    font-size: .82rem;
    font-weight: 650;
    white-space: nowrap;
    animation: entrySavedBlink 640ms ease 1;
}

.autosave-chip--busy {
    background: var(--agri-subtle);
    color: color-mix(in srgb, var(--agri-ink) 62%, white);
    animation: none;
}

/* Tijdelijk uit beeld op verzoek. De chip zelf blijft bestaan, inclusief de teller en de
   role="status" eromheen (zie EntryDossierPanel): de wachtrij en het versturen werken
   ongewijzigd door, alleen wordt er niet meer over gerapporteerd. Deze ene regel weghalen
   zet hem terug. */
.autosave-chip--pending {
    display: none;
    background: var(--agri-warning-soft);
    color: var(--agri-warning);
    animation: none;
}

@keyframes entrySavedBlink {
    0% {
        background: color-mix(in srgb, var(--agri-accent) 32%, white);
    }

    100% {
        background: var(--agri-accent-soft);
    }
}

/* Voortgangsring op basis van pathLength=100: --p is het percentage */
.ring {
    display: block;
}

.ring__track {
    fill: none;
    stroke: rgba(16, 42, 38, .1);
    stroke-width: 3.4;
}

.ring__fill {
    fill: none;
    stroke: var(--agri-accent);
    stroke-width: 3.4;
    stroke-linecap: round;
    stroke-dasharray: var(--p, 0) 100;
    transform: rotate(-90deg);
    transform-origin: center;
    animation: entryRingDraw 900ms cubic-bezier(.22, .61, .36, 1) 300ms both;
}

.ring__label {
    fill: var(--agri-ink);
    font-size: 11px;
    font-weight: 800;
    text-anchor: middle;
    dominant-baseline: central;
}

@keyframes entryRingDraw {
    from {
        stroke-dasharray: 0 100;
    }
}

.rdw-banner {
    display: flex;
    gap: .7rem;
    align-items: center;
    margin-top: 1.25rem;
    padding: .85rem 1rem;
    border: 1px solid color-mix(in srgb, var(--agri-warning) 25%, white);
    border-radius: 16px;
    background: var(--agri-warning-soft);
    color: var(--agri-warning);
}

.rdw-banner .app-icon {
    flex: 0 0 auto;
}

.rdw-banner strong {
    display: block;
    font-size: .95rem;
    font-weight: 750;
}

.rdw-banner span {
    display: block;
    font-size: .85rem;
    font-weight: 500;
}

/* Tikbare variant: zelfde look, maar als knop met een chevron die naar het detailpaneel wijst */
.rdw-banner--action {
    width: 100%;
    font: inherit;
    text-align: left;
    cursor: pointer;
    transition: border-color 150ms ease, transform 150ms ease;
}

.rdw-banner--action:hover,
.rdw-banner--action:focus-visible {
    border-color: color-mix(in srgb, var(--agri-warning) 55%, white);
}

.rdw-banner--action:active {
    transform: scale(.99);
}

.rdw-banner__chev {
    flex: 0 0 auto;
    margin-left: auto;
}

/* --- Detailpaneel: de terugroepactietekst van de RDW, per actie een kaart --- */
.rdw-recall-panel {
    display: grid;
    align-content: start;
    gap: 1rem;
}

.rdw-recall-card {
    display: grid;
    gap: .45rem;
    padding: 1.05rem 1.15rem 1.2rem;
    border: 1px solid var(--agri-border);
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 10px 26px rgba(16, 42, 38, .06);
}

.rdw-recall-card__head {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem .6rem;
    align-items: center;
    justify-content: space-between;
}

.rdw-recall-card__code {
    color: var(--agri-ink);
    font-weight: 750;
    font-variant-numeric: tabular-nums;
}

.rdw-recall-card__status {
    padding: .22rem .6rem;
    border-radius: 999px;
    background: var(--agri-danger-soft);
    color: var(--agri-danger);
    font-size: .78rem;
    font-weight: 700;
}

.rdw-recall-card__status--done {
    background: var(--status-done-soft);
    color: var(--status-done);
}

.rdw-recall-card__meta {
    margin: 0;
    color: var(--agri-muted);
    font-size: .85rem;
    font-weight: 600;
}

.rdw-recall-card h3 {
    margin: .45rem 0 0;
    color: var(--agri-muted);
    font-size: .76rem;
    font-weight: 750;
}

.rdw-recall-card p {
    margin: 0;
    color: var(--agri-ink);
    font-size: .95rem;
    line-height: 1.5;
    overflow-wrap: anywhere;
}

.rdw-recall-card__phone {
    display: inline-flex;
    gap: .45rem;
    align-items: center;
    justify-self: start;
    margin-top: .55rem;
    padding: .5rem .9rem;
    border: 1px solid var(--agri-border);
    border-radius: 999px;
    color: var(--agri-accent);
    font-size: .9rem;
    font-weight: 700;
    text-decoration: none;
}

.rdw-recall-panel__source {
    margin: .2rem 0 0;
    color: var(--agri-muted);
    font-size: .8rem;
    font-weight: 600;
    text-align: center;
}

/* Lijst met ontbrekende onderdelen na een afgekeurde afrondpoging */
.missing-card {
    margin-top: 1rem;
    padding: .85rem 1rem;
    border: 1px solid color-mix(in srgb, var(--agri-warning) 25%, white);
    border-radius: 16px;
    background: var(--agri-warning-soft);
}

.missing-card h3 {
    margin: 0 0 .35rem;
    color: var(--agri-warning);
    font-size: .95rem;
    font-weight: 750;
}

.missing-row {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: .55rem;
    align-items: center;
    width: 100%;
    min-height: 2.9rem;
    padding: .2rem .2rem;
    border: 0;
    background: transparent;
    color: var(--agri-warning);
    font: inherit;
    font-size: .92rem;
    font-weight: 600;
    text-align: left;
    cursor: pointer;
}

.missing-row span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Sticky afrondzone onderin het dossier */
.dossier-footer {
    position: sticky;
    bottom: 0;
    z-index: 3;
    display: grid;
    gap: .55rem;
    margin-top: 1.4rem;
    padding: 1.6rem 0 .4rem;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0), #fff 28%);
}

.dossier-footer__hint {
    color: var(--agri-muted);
    font-size: .88rem;
    font-weight: 550;
    text-align: center;
}

.btn-finish {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    width: 100%;
    min-height: 4.35rem;
    border: 0;
    border-radius: 999px;
    background: var(--agri-accent);
    color: #fff;
    font: inherit;
    font-size: 1.18rem;
    font-weight: 650;
    box-shadow: 0 14px 32px rgba(57, 117, 75, .25);
    cursor: pointer;
    transition: filter 150ms ease, transform 150ms ease, background-color 150ms ease;
}

.btn-finish:hover:not(:disabled),
.btn-finish:focus-visible:not(:disabled) {
    filter: brightness(1.05);
}

.btn-finish:active:not(:disabled) {
    transform: scale(.985);
}

.btn-finish:disabled {
    background: #dfe5e0;
    color: color-mix(in srgb, var(--agri-ink) 42%, white);
    box-shadow: none;
    cursor: not-allowed;
}

/* --- Eén scrollend invulformulier: rijen zoals de legacy taskitems (links caption +
   grijze subcaption, rechts compacte knoppen/inputs), per groep een kopregel met
   scheidingslijnen zoals de legacy orseperator/taskseperator --- */
.dossier-form {
    display: grid;
    align-content: start;
    padding-bottom: .4rem;
}

/* Groepskop: gecentreerde caption tussen twee subtiele lijnen ('Controleer en vul aan') */
.dgroup-title {
    display: grid;
    grid-template-columns: minmax(1.2rem, 1fr) auto minmax(1.2rem, 1fr);
    gap: .85rem;
    align-items: center;
    margin: 1.45rem 0 .2rem;
    scroll-margin-top: 9.75rem;
}

.dgroup-title::before,
.dgroup-title::after {
    height: 1px;
    background: rgba(16, 42, 38, .12);
    content: "";
}

.dgroup-title span {
    color: var(--agri-muted);
    font-size: .9rem;
    font-weight: 750;
    letter-spacing: .03em;
    text-align: center;
}

/* Formulierrij: caption/subcaption links, controls rechts; past de control niet meer
   naast de caption (veel opties, smal scherm), dan wikkelt hij naar een eigen regel */
.drow {
    display: flex;
    flex-wrap: wrap;
    gap: .55rem .9rem;
    align-items: center;
    min-height: 3.9rem;
    padding: .85rem .1rem;
    border-radius: 14px;
    scroll-margin-top: 9.75rem;
}

/* Subtiele scheidingsregel tussen de rijen (legacy taskseperator, in agri-stijl) */
.drow + .drow {
    position: relative;
}

.drow + .drow::before {
    position: absolute;
    top: 0;
    right: .1rem;
    left: .1rem;
    height: 1px;
    background: rgba(16, 42, 38, .07);
    content: "";
}

.drow__label {
    display: grid;
    gap: .14rem;
    flex: 1 1 12rem;
    min-width: 0;
}

.drow__caption {
    font-size: 1rem;
    font-weight: 650;
    line-height: 1.25;
}

/* Verplicht: rood sterretje bij de caption (zoals legacy 'Foto VIN *') */
.drow__req {
    color: var(--agri-danger);
    font-style: normal;
    font-weight: 750;
}

.drow__sub {
    color: var(--agri-muted);
    font-size: .86rem;
    font-weight: 500;
    line-height: 1.35;
}

.drow__control {
    display: flex;
    flex-wrap: wrap;
    gap: .45rem;
    align-items: center;
    justify-content: flex-end;
    max-width: 100%;
    margin-left: auto;
}

/* Volle-breedte-controls (VIN, tekstvelden, keuzelijsten, laadkabels) op een eigen regel */
.drow__control--stack {
    flex: 1 0 100%;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: .45rem;
    margin-left: 0;
}

/* Foto's binnen een rij: thumbnails naast elkaar (wrap) + camera-tegel, volle breedte */
.drow__photos {
    flex: 1 0 100%;
}

/* Kort oplichten van de rij waar een missing-item naartoe scrolt */
.drow--flash {
    animation: drowFlash 1.4s ease both;
}

@keyframes drowFlash {
    0% {
        background-color: color-mix(in srgb, var(--agri-warning) 22%, white);
    }

    100% {
        background-color: transparent;
    }
}

/* Aankruisvak rechts in een rij, met een tap-target van ±44px */
/* Schuifje (vervangt losse checkboxes): accentgroen aan, grijs uit */
.toggle-switch {
    position: relative;
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
    width: 3.4rem;
    height: 2rem;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: #cfd6d2;
    cursor: pointer;
    transition: background-color 180ms ease;
}

/* Onzichtbare hit-area zodat het tapdoel ≥44px blijft */
.toggle-switch::before {
    position: absolute;
    inset: -.7rem;
    content: "";
}

.toggle-switch__knob {
    position: absolute;
    top: .2rem;
    left: .2rem;
    width: 1.6rem;
    height: 1.6rem;
    border-radius: 999px;
    background: #fff;
    box-shadow: 0 2px 6px rgba(16, 42, 38, .22);
    transition: transform 180ms ease;
}

.toggle-switch.is-on {
    background: var(--agri-accent);
}

.toggle-switch.is-on .toggle-switch__knob {
    transform: translateX(1.4rem);
}

.toggle-switch:disabled {
    opacity: .55;
    cursor: default;
}

.toggle-switch:focus-visible {
    outline: 2px solid color-mix(in srgb, var(--agri-accent) 60%, white);
    outline-offset: 3px;
}

.dossier-help {
    margin: 0;
    color: var(--agri-muted);
    font-size: .88rem;
    line-height: 1.45;
}

.dossier-hint {
    margin: 0;
    color: var(--agri-muted);
    font-size: .82rem;
}

.dossier-input,
.dossier-textarea,
.dossier-select {
    width: 100%;
    min-height: 3.4rem;
    padding: .75rem 1.05rem;
    border: 1px solid rgba(16, 42, 38, .14);
    border-radius: 16px;
    background: #fff;
    color: var(--agri-ink);
    font: inherit;
    font-size: 1.05rem;
}

.dossier-input:focus-visible,
.dossier-textarea:focus-visible,
.dossier-select:focus-visible {
    border-color: color-mix(in srgb, var(--agri-accent) 60%, white);
    outline: none;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--agri-accent) 18%, transparent);
}

.dossier-input:disabled,
.dossier-textarea:disabled,
.dossier-select:disabled {
    background: var(--agri-subtle);
    color: color-mix(in srgb, var(--agri-ink) 62%, white);
}

.dossier-input--vin {
    letter-spacing: .08em;
    font-variant-numeric: tabular-nums;
}

/* Geaccepteerd maar verdacht (bijv. VIN met I/O/Q): rood, zonder te blokkeren */
.dossier-input--invalid,
.dossier-input--invalid:focus-visible {
    border-color: var(--agri-danger);
    background: color-mix(in srgb, var(--agri-danger) 7%, white);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--agri-danger) 14%, transparent);
}

.drow__hint--invalid {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    margin-top: .4rem;
    color: var(--agri-danger);
    font-size: .86rem;
    font-weight: 600;
}

/* Compacte numerieke input rechts in een rij (kilometerstand, numerieke vragen) */
.dossier-input--compact {
    width: clamp(7.5rem, 34vw, 10rem);
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.dossier-textarea {
    resize: vertical;
}

/* Segmented-knoppen (ja/nee, nvt-varianten, keuzes) */
.seg-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 1 auto;
    min-height: 3rem;
    padding: 0 1rem;
    border: 1px solid rgba(16, 42, 38, .14);
    border-radius: 999px;
    background: #fff;
    color: var(--agri-ink);
    font: inherit;
    font-size: .95rem;
    font-weight: 650;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color 150ms ease, color 150ms ease, border-color 150ms ease;
}

.seg-btn.is-active {
    border-color: var(--agri-accent);
    background: var(--agri-accent);
    color: #fff;
}

/* Semantische actieve kleuren: n.v.t. grijs, ja/goedgekeurd groen, nee/afgekeurd rood */
.seg-btn--neutral.is-active {
    border-color: #96a09b;
    background: #96a09b;
}

/* Goedgekeurd/ja: ALTIJD de vaste groene statuskleur, ongeacht het thema (niet het accent) */
.seg-btn--pos.is-active {
    border-color: var(--status-done);
    background: var(--status-done);
    color: #fff;
}

/* Afgekeurd/nee: ALTIJD de vaste rode statuskleur, consistent met het groen hierboven */
.seg-btn--neg.is-active {
    border-color: var(--status-skip);
    background: var(--status-skip);
    color: #fff;
}

.seg-btn:disabled {
    opacity: .55;
    cursor: default;
}

/* Icoonknop (brandstof: pomp/stekker/hybride; hoedenplank: ⊘/✓/✕) */
.seg-btn--icon {
    width: 3rem;
    padding: 0;
    flex: 0 0 auto;
}

/* Waarde-chip (accuniveau 0/25/50/75/100, sleutels 1-4) */
.seg-btn--chip {
    min-width: 2.95rem;
    padding: 0 .8rem;
    flex: 0 0 auto;
    font-variant-numeric: tabular-nums;
}

/* --- Laadkabels: afbeelding-toggles zoals de legacy entry-app
   (thuisstekker / 5-pins / 7-pins), geselecteerd = accentrand + vinkje --- */
.cable-options {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .6rem;
}

.cable-option {
    position: relative;
    display: grid;
    gap: .4rem;
    justify-items: center;
    min-height: 6.2rem;
    padding: .8rem .4rem .65rem;
    border: 2px solid rgba(16, 42, 38, .12);
    border-radius: 18px;
    background: #fff;
    color: var(--agri-ink);
    font: inherit;
    font-size: .86rem;
    font-weight: 650;
    cursor: pointer;
    transition: border-color 150ms ease, background-color 150ms ease, box-shadow 150ms ease;
}

.cable-option img {
    width: 3.2rem;
    height: 3.2rem;
    object-fit: contain;
}

.cable-option.is-selected {
    border-color: var(--agri-accent);
    background: var(--agri-accent-soft);
    box-shadow: 0 10px 24px rgba(57, 117, 75, .16);
}

.cable-option__check {
    position: absolute;
    top: .45rem;
    right: .45rem;
    display: grid;
    width: 1.35rem;
    height: 1.35rem;
    place-items: center;
    border-radius: 999px;
    background: var(--agri-accent);
    color: #fff;
}

.cable-option:disabled {
    opacity: .6;
    cursor: default;
}

.cable-option:not(:disabled):hover,
.cable-option:not(:disabled):focus-visible {
    border-color: color-mix(in srgb, var(--agri-accent) 65%, white);
}

/* --- Foto's: thumbnails naast elkaar + camera-tegel; long-press opent het foto-menu --- */
.photo-strip {
    display: flex;
    flex-wrap: wrap;
    gap: .55rem;
    align-items: center;
}

/* Een echte knop (klik/Enter opent het foto-menu), dus de button-chrome resetten */
.photo-thumb {
    position: relative;
    display: grid;
    width: 4.6rem;
    height: 4.6rem;
    flex: 0 0 auto;
    overflow: hidden;
    padding: 0;
    border: 0;
    border-radius: 14px;
    background: var(--agri-subtle);
    cursor: pointer;
    /* Long-press: geen iOS-callout of tekstselectie tijdens het vasthouden */
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
}

.photo-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    pointer-events: none;
    -webkit-user-drag: none;
}

.photo-thumb:focus-visible {
    outline: 2px solid var(--agri-accent);
    outline-offset: 2px;
}

/* Achtergrond-upload in de fotostrip (zelfde patroon als de optische inspectie):
   bezig-tegel met spinner, mislukte upload als retry-tegel met klein kruisje */
.photo-thumb--uploading img {
    opacity: .55;
}

.photo-thumb__busy {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    background: color-mix(in srgb, var(--agri-panel) 30%, transparent);
}

.photo-thumb--failed img {
    opacity: .3;
}

.photo-thumb__retry {
    position: absolute;
    inset: 0;
    display: grid;
    gap: .15rem;
    place-content: center;
    justify-items: center;
    padding: 0;
    border: 2px dashed color-mix(in srgb, var(--status-skip) 55%, transparent);
    border-radius: 14px;
    background: color-mix(in srgb, var(--status-skip-soft) 82%, transparent);
    color: var(--status-skip);
    font-size: .68rem;
    font-weight: 600;
}

.photo-thumb__discard {
    position: absolute;
    top: .2rem;
    right: .2rem;
    display: grid;
    place-items: center;
    width: 1.5rem;
    height: 1.5rem;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: color-mix(in srgb, var(--agri-ink) 55%, transparent);
    color: #fff;
}

.photo-thumb__loading {
    display: block;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, rgba(16, 42, 38, .06) 25%, rgba(16, 42, 38, .12) 50%, rgba(16, 42, 38, .06) 75%);
    background-size: 200% 100%;
    animation: entrySkeletonShimmer 1.4s ease-in-out infinite;
}

.photo-add {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .25rem;
    min-width: 4.6rem;
    min-height: 4.6rem;
    padding: .3rem .6rem;
    border: 1.6px dashed rgba(16, 42, 38, .28);
    border-radius: 14px;
    background: transparent;
    color: color-mix(in srgb, var(--agri-ink) 62%, white);
    font: inherit;
    font-size: .78rem;
    font-weight: 650;
    cursor: pointer;
    transition: border-color 150ms ease, color 150ms ease, background-color 150ms ease;
}

/* Hover alleen op apparaten met een echte muisaanwijzer: op touch plakt :hover aan
   de laatste tik/scrollveeg en kleurde de knop groen los van de scrollpositie */
@media (hover: hover) and (pointer: fine) {
    .photo-add:hover {
        border-color: var(--agri-accent);
        background: var(--agri-accent-soft);
        color: var(--agri-tertiary);
    }
}

.photo-add:focus-visible {
    border-color: var(--agri-accent);
    background: var(--agri-accent-soft);
    color: var(--agri-tertiary);
}

/* Foto-menu (long-press): zelfde sheet-vormtaal als de profielfoto-acties, met een
   rode Verwijderen-optie — verwijderen gebeurt direct, het menu ís de keuze */
.photo-source-option--danger {
    color: var(--agri-danger);
}

/* Fullscreen fotoweergave: zwarte achtergrond, foto groot gecentreerd, kruisje linksboven */
.photo-viewer {
    position: fixed;
    inset: 0;
    z-index: 200;
    /* Eigen kliks, ook wanneer een host de viewer binnen een pointer-events:none-laag
       rendert (bijlagenpaneel in .rdi-line-layer) — geërfd none maakt de viewer anders
       onbedienbaar, inclusief de sluitknop */
    pointer-events: auto;
    display: grid;
    place-items: center;
    overscroll-behavior: contain;
    background: #000;
    touch-action: none;
    animation: photoViewerIn 200ms ease both;
}

.photo-viewer img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.photo-viewer__close {
    position: absolute;
    top: max(.9rem, env(safe-area-inset-top));
    left: .9rem;
    z-index: 1;
    display: grid;
    width: 2.9rem;
    height: 2.9rem;
    place-items: center;
    border: 0;
    border-radius: 999px;
    background: rgba(255, 255, 255, .16);
    color: #fff;
    cursor: pointer;
    transition: background-color 150ms ease;
}

.photo-viewer__close:hover,
.photo-viewer__close:focus-visible {
    background: rgba(255, 255, 255, .3);
}

.photo-viewer__loading {
    width: 8rem;
    height: 8rem;
    border-radius: 18px;
}

/* Swipebare strip in de viewer (alle fotoviewers): het bladeren is puur CSS scroll-snap,
   JS (js/photo-viewer.js) levert alleen de teller, pinch-zoom en het centreren na rotatie. */
.photo-viewer__track {
    display: flex;
    width: 100%;
    height: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    touch-action: pan-x;
}

.photo-viewer__track::-webkit-scrollbar {
    display: none;
}

/* overflow: hidden knipt de gezoomde foto af op zijn eigen slide, zodat hij niet over
   de buurfoto heen schuift */
.photo-viewer__slide {
    display: grid;
    flex: 0 0 100%;
    place-items: center;
    overflow: hidden;
    scroll-snap-align: center;
    scroll-snap-stop: always;
}

.photo-viewer__counter {
    position: absolute;
    top: max(1.35rem, env(safe-area-inset-top));
    left: 50%;
    z-index: 1;
    padding: .3rem .8rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, .16);
    color: #fff;
    font-size: .85rem;
    font-weight: 600;
    transform: translateX(-50%);
    pointer-events: none;
}

/* Korte vanzelf-verdwijnende melding (delen mislukt): zelfde pil als de teller, net eronder */
.photo-viewer__note {
    position: absolute;
    top: calc(max(1.35rem, env(safe-area-inset-top)) + 2.6rem);
    left: 50%;
    z-index: 3;
    padding: .3rem .8rem;
    border-radius: 999px;
    background: rgba(20, 20, 20, .68);
    color: #fff;
    font-size: .85rem;
    font-weight: 600;
    transform: translateX(-50%);
    pointer-events: none;
}

/* 3-puntjes rechtsboven en prullenbak rechtsonder: zelfde vormtaal als het kruisje —
   witte glyphs in een translucente cirkel op de zwarte viewer */
.photo-viewer__more,
.photo-viewer__trash {
    position: absolute;
    right: .9rem;
    z-index: 1;
    display: grid;
    width: 2.9rem;
    height: 2.9rem;
    place-items: center;
    border: 0;
    border-radius: 999px;
    background: rgba(255, 255, 255, .16);
    color: #fff;
    cursor: pointer;
    transition: background-color 150ms ease;
}

.photo-viewer__more {
    top: max(.9rem, env(safe-area-inset-top));
}

.photo-viewer__trash {
    bottom: max(.9rem, env(safe-area-inset-bottom));
}

.photo-viewer__more:hover,
.photo-viewer__more:focus-visible,
.photo-viewer__trash:hover,
.photo-viewer__trash:focus-visible {
    background: rgba(255, 255, 255, .3);
}

/* Vanglaag onder menu/popover: tik ernaast sluit alleen die laag, de foto dimt licht */
.photo-viewer__scrim {
    position: absolute;
    inset: 0;
    z-index: 2;
    border: 0;
    background: rgba(0, 0, 0, .25);
}

/* iOS-contextmenu (zoals Foto's): licht translucent grijs met blur, hairlines tussen de
   regels, destructieve actie in systeemrood; ontvouwt vanuit de 3-puntjes-knop */
.pv-menu {
    position: absolute;
    top: calc(max(.9rem, env(safe-area-inset-top)) + 3.4rem);
    right: .9rem;
    z-index: 3;
    min-width: 17rem;
    overflow: hidden;
    border-radius: 16px;
    background: rgba(246, 246, 246, .82);
    box-shadow: 0 14px 44px rgba(0, 0, 0, .3);
    transform-origin: top right;
    animation: pvLayerIn 190ms cubic-bezier(.26, 1, .4, 1) both;
    -webkit-backdrop-filter: blur(22px) saturate(1.8);
    backdrop-filter: blur(22px) saturate(1.8);
}

.pv-menu__item {
    display: flex;
    width: 100%;
    align-items: center;
    gap: .8rem;
    padding: .95rem 1.1rem;
    border: 0;
    background: transparent;
    color: #0c0c0d;
    font-size: 1.08rem;
    font-weight: 400;
    text-align: left;
    cursor: pointer;
}

.pv-menu__item + .pv-menu__item {
    border-top: 1px solid rgba(60, 60, 67, .18);
}

.pv-menu__item:active {
    background: rgba(60, 60, 67, .12);
}

.pv-menu__item--danger {
    color: #ff3b30;
    font-weight: 500;
}

/* Bevestigingspopover boven de prullenbak, zoals de iOS-verwijderkaart: royale grijze
   kaart met donkere uitlegtekst en de rode actie als losse capsule-knop eronder */
.pv-confirm {
    position: absolute;
    right: .9rem;
    bottom: calc(max(.9rem, env(safe-area-inset-bottom)) + 3.4rem);
    z-index: 3;
    width: min(20rem, calc(100vw - 1.8rem));
    overflow: hidden;
    border-radius: 18px;
    background: rgba(246, 246, 246, .82);
    box-shadow: 0 14px 44px rgba(0, 0, 0, .3);
    transform-origin: bottom right;
    animation: pvLayerIn 190ms cubic-bezier(.26, 1, .4, 1) both;
    -webkit-backdrop-filter: blur(22px) saturate(1.8);
    backdrop-filter: blur(22px) saturate(1.8);
}

.pv-confirm p {
    margin: 0;
    padding: 1.05rem 1.15rem .85rem;
    color: #16161a;
    font-size: 1.02rem;
    line-height: 1.45;
}

.pv-confirm__delete {
    display: block;
    width: calc(100% - 1.9rem);
    margin: 0 .95rem .95rem;
    padding: .9rem 1rem;
    border: 0;
    border-radius: 999px;
    background: rgba(255, 255, 255, .72);
    color: #ff3b30;
    font-size: 1.06rem;
    text-align: center;
    cursor: pointer;
}

.pv-confirm__delete:disabled {
    opacity: .5;
}

.pv-confirm__delete:not(:disabled):active {
    background: rgba(255, 255, 255, .92);
}

@keyframes pvLayerIn {
    from {
        opacity: 0;
        transform: scale(.55);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes photoViewerIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

/* --- Transportschade --- */
.damage-card {
    display: grid;
    gap: .6rem;
    margin-top: .75rem;
    padding: .9rem 1rem 1rem;
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 10px 26px rgba(16, 42, 38, .07);
}

.damage-card__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .6rem;
}

.damage-card__date {
    color: var(--agri-muted);
    font-size: .82rem;
    font-weight: 600;
}

.damage-card__delete {
    display: grid;
    width: 2.75rem;
    height: 2.75rem;
    place-items: center;
    margin: -.55rem -.5rem -.4rem 0;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: color-mix(in srgb, var(--agri-ink) 55%, white);
    cursor: pointer;
    transition: background-color 150ms ease, color 150ms ease;
}

.damage-card__delete:hover,
.damage-card__delete:focus-visible {
    background: var(--agri-danger-soft);
    color: var(--agri-danger);
}

.damage-card--new label {
    font-size: .95rem;
    font-weight: 650;
}

.damage-card__actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .55rem;
}

.damage-add {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .45rem;
    width: 100%;
    min-height: 3.4rem;
    margin-top: 1rem;
    border: 1.6px dashed rgba(16, 42, 38, .28);
    border-radius: 999px;
    background: transparent;
    color: var(--agri-ink);
    font: inherit;
    font-size: 1rem;
    font-weight: 650;
    cursor: pointer;
    transition: border-color 150ms ease, background-color 150ms ease, color 150ms ease;
}

.damage-add:hover,
.damage-add:focus-visible {
    border-color: var(--agri-accent);
    background: var(--agri-accent-soft);
    color: var(--agri-tertiary);
}

.entry-sheet__confirm--danger {
    background: var(--agri-danger);
}

/* --- Afrondscherm: 100%-ring met inpoppende check en samenvattingskaart --- */
.finish-hero {
    display: grid;
    gap: .8rem;
    justify-items: center;
    padding: 1.1rem 0 1.4rem;
    text-align: center;
}

.finish-hero h2 {
    margin: .2rem 0 0;
    font-size: 1.42rem;
    font-weight: 700;
}

.finish-hero p {
    margin: 0;
    color: var(--agri-muted);
    font-size: .95rem;
}

.finish-ring {
    position: relative;
    display: grid;
    place-items: center;
    margin-top: .4rem;
}

.finish-ring .ring__fill {
    animation-duration: 1200ms;
}

.finish-ring__check {
    position: absolute;
    display: grid;
    width: 3.1rem;
    height: 3.1rem;
    place-items: center;
    border-radius: 999px;
    background: var(--agri-accent);
    color: #fff;
    box-shadow: 0 10px 26px rgba(57, 117, 75, .35);
    animation: entryPopIn 420ms cubic-bezier(.34, 1.4, .5, 1) 900ms both;
}

@keyframes entryPopIn {
    from {
        opacity: 0;
        transform: scale(.4);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

.summary-card {
    overflow: hidden;
    border-radius: 22px;
    background: #fff;
    box-shadow: 0 12px 34px rgba(16, 42, 38, .09);
}

.summary-row {
    display: grid;
    grid-template-columns: 2.1rem minmax(0, 1fr) auto;
    gap: .7rem;
    align-items: center;
    min-height: 3.55rem;
    padding: .55rem 1.05rem;
}

.summary-row + .summary-row {
    border-top: 1px solid rgba(16, 42, 38, .07);
}

.summary-row__check {
    display: grid;
    width: 1.55rem;
    height: 1.55rem;
    place-items: center;
    border-radius: 999px;
    background: var(--agri-accent-soft);
    color: var(--agri-tertiary);
}

.summary-row span {
    color: var(--agri-muted);
    font-size: .95rem;
    font-weight: 550;
}

.summary-row strong {
    font-size: .98rem;
    font-weight: 700;
    text-align: right;
    white-space: nowrap;
}

.summary-row--warn .summary-row__check {
    background: var(--agri-warning-soft);
    color: var(--agri-warning);
}

.summary-row--warn strong {
    color: var(--agri-warning);
}

.finish-note {
    margin: 1rem .5rem 0;
    color: var(--agri-muted);
    font-size: .88rem;
    line-height: 1.45;
    text-align: center;
}

.finish-actions {
    display: grid;
    gap: .55rem;
    margin-top: 1.1rem;
    padding-bottom: 1rem;
}

@media (prefers-reduced-motion: reduce) {
    .car-card,
    .status-badge--busy::before,
    .entry-skeleton,
    .entry-fab,
    .entry-sheet-backdrop,
    .scan-result,
    .switch-sheet,
    .switch-visual__arrow,
    .autosave-chip,
    .ring__fill,
    .photo-thumb__loading,
    .finish-ring__check,
    .drow--flash,
    .wb-rstatus__pulse,
    .photo-viewer,
    .pv-menu,
    .pv-confirm {
        animation: none;
    }

    .car-card,
    .wv-filter,
    .entry-tabbar__item,
    .entry-fab,
    .car-card__stop,
    .cable-option,
    .scan-round-btn,
    .scan-result__cta,
    .scan-result__retry,
    .scan-close,
    .switch-option,
    .switch-cancel,
    .seg-btn,
    .toggle-switch,
    .toggle-switch__knob,
    .photo-add,
    .photo-viewer__close,
    .photo-viewer__more,
    .photo-viewer__trash,
    .damage-add,
    .damage-card__delete,
    .missing-row,
    .btn-finish,
    .werkbon-close {
        transition: none;
    }
}

/* =========================================================================================
   Werkbon-paneel: "digitaal document op een presentatievel". Eén doorlopend, schoon wit vel
   (--agri-panel, consistent met de rest van de app zoals het dossier) met haarlijn-scheidingen
   tussen secties; alleen de voertuig-hero is een getinte kaart met eigen rand + lichte elevatie.
   Alle kleuren via de --agri-*-tokens, dus beide thema's (groen én blauw/rood) volgen gratis mee.
   ========================================================================================= */

/* Eigen vaste host achter het van-onderaf schuivende ProfileOverlayPanel (model .user-profile-page) */
.werkbon-host {
    position: fixed;
    inset: 0;
    z-index: 70;
    overflow: hidden;
}

/* Het vel: bloedt horizontaal tot de panelranden en leest als een schoon wit document,
   waarop de getinte hero-kaart en de haarlijn-secties rustig contrasteren */
.werkbon-doc {
    display: grid;
    align-content: start;
    min-height: 100%;
    margin: 0 calc(-1 * clamp(1rem, 4vw, 2rem));
    padding: 0 clamp(1rem, 4vw, 2rem) 1.4rem;
    background: var(--agri-panel);
}

.werkbon-empty {
    align-content: center;
    min-height: 62vh;
}

/* Secties: papier-plat met een haarlijn ertussen; de hero staat erboven als losse kaart */
.wb-section {
    padding: 1.35rem .15rem;
    border-top: 1px solid color-mix(in srgb, var(--agri-ink) 7%, transparent);
}

.wb-section__title {
    margin: 0 0 .9rem;
    color: var(--agri-ink);
    font-size: .96rem;
    font-weight: 750;
    letter-spacing: .02em;
}

/* --- Voertuig-hero: getinte kaart die op het witte vel duidelijk als eigen blok 'poppt'.
   Dunne accent-getinte rand + zachte elevatie geven contrast zonder luid te worden; werkt
   in beide thema's omdat tint én rand uit --agri-accent zijn afgeleid. --- */
.wb-hero {
    position: relative;
    margin: 1.1rem 0 .3rem;
    padding: 1.35rem 1.4rem 1.45rem;
    border-radius: 24px;
    border: 1px solid color-mix(in srgb, var(--agri-accent) 22%, var(--agri-border));
    background: linear-gradient(135deg,
        color-mix(in srgb, var(--agri-accent) 14%, var(--agri-panel)) 0%,
        color-mix(in srgb, var(--agri-accent) 5%, var(--agri-panel)) 62%,
        var(--agri-panel) 100%);
    box-shadow: 0 12px 30px color-mix(in srgb, var(--agri-ink) 9%, transparent);
}

/* Aparte, geclipte achtergrondlaag voor het bloedende watermerk. De clip zit HIER en niet op
   .wb-hero, zodat de inhoud (met name de kentekenplaat) nooit wordt afgekapt. */
.wb-hero__bg {
    position: absolute;
    inset: 0;
    overflow: hidden;
    border-radius: inherit;
    pointer-events: none;
}

/* Zachte lichtinval linksboven voor diepte, onder de inhoud */
.wb-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: radial-gradient(120% 90% at 22% 8%, color-mix(in srgb, var(--agri-panel) 55%, transparent), transparent 60%);
}

/* Lege staat (geen plaat/VIN/km/kleur): compactere kaart zodat er geen grote leegte ontstaat */
.wb-hero--noplate {
    padding: 1.15rem 1.4rem 1.2rem;
}

/* Sleek auto-silhouet-watermerk, gevuld en verankerd rechtsonder; tint mee met het accent */
.wb-hero__watermark {
    position: absolute;
    right: -.6rem;
    bottom: -.9rem;
    width: 66%;
    max-width: 19rem;
    height: auto;
    color: var(--agri-accent);
    opacity: .12;
    pointer-events: none;
}

.wb-hero__head {
    position: relative;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: .85rem;
}

.wb-hero__merk {
    color: var(--agri-ink);
    font-size: clamp(1.18rem, 4.6vw, 1.5rem);
    font-weight: 650;
    line-height: 1.12;
    overflow-wrap: anywhere;
}

/* Zonder plaat is merk/type het anker: groter en zwaarder zodat de hero compleet oogt */
.wb-hero--noplate .wb-hero__merk {
    font-size: clamp(1.42rem, 6vw, 1.9rem);
    font-weight: 750;
    letter-spacing: -.01em;
}

/* Status-'stempel': hergebruikt de .status-badge-varianten, iets steviger gezet */
.wb-stamp {
    flex: 0 0 auto;
    margin-top: .1rem;
    font-size: .72rem;
}

.wb-hero__plate {
    position: relative;
    margin-top: 1rem;
}

.wb-hero__chips {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin-top: 1rem;
}

.wb-chip {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    min-height: 2rem;
    padding: 0 .72rem;
    border: 1px solid color-mix(in srgb, var(--agri-ink) 8%, transparent);
    border-radius: 10px;
    background: color-mix(in srgb, var(--agri-panel) 82%, transparent);
    color: var(--agri-ink);
    font-size: .85rem;
    font-weight: 600;
    white-space: nowrap;
}

.wb-chip .app-icon {
    flex: 0 0 auto;
    color: var(--agri-muted);
}

/* Vangnet-chip 'Kenteken nog niet bekend': gedempt en gestreept zodat het als ontbrekend leest */
.wb-chip--muted {
    border-style: dashed;
    background: transparent;
    color: var(--agri-muted);
    font-weight: 550;
}

.wb-chip__mono {
    font-family: ui-monospace, "SFMono-Regular", "Menlo", "Consolas", monospace;
    font-weight: 650;
    letter-spacing: .02em;
    font-variant-numeric: tabular-nums;
}

.wb-num {
    font-weight: 650;
    font-variant-numeric: tabular-nums;
}

.wb-hero__rdw {
    position: relative;
    margin-top: 1rem;
}

/* --- Kop: verticaal, label-boven-waarde over de volle breedte, rustige verticale ritmiek --- */
.wb-kop {
    display: grid;
    gap: 1.05rem;
}

.wb-kop__cell {
    display: grid;
    gap: .22rem;
    min-width: 0;
}

/* Eén regel met links/rechts uitgelijnde cellen (Datum ontvangst ↔ Dagen binnen) */
.wb-kop__row {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 1.05rem 1rem;
}

.wb-kop__cell--end {
    text-align: right;
}

.wb-label {
    color: var(--agri-muted);
    font-size: .74rem;
    font-weight: 650;
}

.wb-value {
    color: var(--agri-ink);
    font-size: 1rem;
    font-weight: 650;
    line-height: 1.3;
    overflow-wrap: anywhere;
}

.wb-value--mono {
    font-family: ui-monospace, "SFMono-Regular", "Menlo", "Consolas", monospace;
    font-variant-numeric: tabular-nums;
}

.wb-value--num {
    font-variant-numeric: tabular-nums;
}

/* VIN op volle breedte: nooit afkappen, mag over meerdere regels breken */
.wb-value--vin {
    letter-spacing: .02em;
    overflow-wrap: anywhere;
    word-break: break-all;
}

/* --- Statusverloop: Aangemeld → In behandeling → Afgerond --- */
.wb-steps {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    margin: 0;
    padding: .1rem 0 0;
    list-style: none;
}

.wb-step {
    position: relative;
    display: grid;
    justify-items: center;
    gap: .55rem;
    text-align: center;
}

/* Verbindingslijn tussen de stippen (achter de stip; getekend vanaf de vorige stip) */
.wb-step::before {
    position: absolute;
    top: .365rem;
    right: 50%;
    left: -50%;
    height: 2px;
    background: var(--agri-border);
    content: "";
}

.wb-step:first-child::before {
    display: none;
}

.wb-step__dot {
    position: relative;
    z-index: 1;
    width: .85rem;
    height: .85rem;
    border-radius: 999px;
    background: var(--agri-border);
}

.wb-step__label {
    color: var(--agri-muted);
    font-size: .8rem;
    font-weight: 600;
}

.wb-step.is-done::before,
.wb-step.is-active::before {
    background: var(--agri-accent);
}

.wb-step.is-done .wb-step__dot,
.wb-step.is-active .wb-step__dot {
    background: var(--agri-accent);
}

.wb-step.is-active .wb-step__dot {
    box-shadow: 0 0 0 .28rem color-mix(in srgb, var(--agri-accent) 18%, transparent);
}

.wb-step.is-done .wb-step__label,
.wb-step.is-active .wb-step__label {
    color: var(--agri-ink);
}

.wb-step.is-active .wb-step__label {
    font-weight: 700;
}

/* --- Werkzaamheden per proces --- */
.wb-proc + .wb-proc {
    margin-top: 1.1rem;
}

/* Huidige stap (procesId == huidigProcesId): rustige accent-getinte kaart met randje.
   De highlight zelf mag themable accent zijn; de regelstatussen blijven vast blauw/groen/rood. */
.wb-proc--current {
    margin: 0 calc(-1 * clamp(.6rem, 2.4vw, 1rem));
    padding: .75rem clamp(.6rem, 2.4vw, 1rem) .55rem;
    border-radius: 16px;
    border: 1px solid color-mix(in srgb, var(--agri-accent) 32%, transparent);
    background: color-mix(in srgb, var(--agri-accent) 7%, transparent);
}

.wb-proc--current + .wb-proc {
    margin-top: 1.1rem;
}

/* 'Nu hier'-badge naast de procesnaam */
.wb-proc__now {
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
    min-height: 1.55rem;
    padding: 0 .58rem;
    border-radius: 999px;
    background: var(--agri-accent);
    color: #fff;
    font-size: .72rem;
    font-weight: 750;
    white-space: nowrap;
}

.wb-proc__head {
    display: flex;
    align-items: center;
    gap: .6rem;
    margin-bottom: .35rem;
}

.wb-proc__icon {
    display: grid;
    flex: 0 0 auto;
    width: 1.9rem;
    height: 1.9rem;
    place-items: center;
    border-radius: 999px;
    background: var(--agri-subtle);
    color: var(--agri-muted);
}

.wb-proc__name {
    flex: 1 1 auto;
    min-width: 0;
    color: var(--agri-ink);
    font-size: 1rem;
    font-weight: 700;
    overflow-wrap: anywhere;
}

.wb-proc__count {
    display: inline-grid;
    flex: 0 0 auto;
    min-width: 1.55rem;
    height: 1.55rem;
    place-items: center;
    padding: 0 .42rem;
    border-radius: 999px;
    background: color-mix(in srgb, var(--agri-ink) 8%, var(--agri-panel));
    color: color-mix(in srgb, var(--agri-ink) 72%, var(--agri-panel));
    font-size: .8rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.wb-lines {
    display: grid;
    margin: 0;
    padding: 0;
    list-style: none;
}

.wb-line {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: .8rem;
    align-items: start;
    padding: .72rem 0;
    border-top: 1px solid color-mix(in srgb, var(--agri-ink) 7%, transparent);
}

.wb-line__text {
    display: grid;
    gap: .22rem;
    min-width: 0;
}

.wb-line__desc {
    color: var(--agri-ink);
    font-size: .98rem;
    font-weight: 600;
    line-height: 1.32;
    overflow-wrap: anywhere;
}

/* Niet-uitvoeren-regel: doorgehaalde omschrijving in de VASTE skip-kleur (rood), zodat de
   monteur ze in elk thema meteen herkent als 'niet doen'. */
.wb-line--skip .wb-line__desc {
    color: var(--status-skip);
    text-decoration: line-through;
    text-decoration-thickness: 1.5px;
    text-decoration-color: color-mix(in srgb, var(--status-skip) 70%, transparent);
}

/* Afgerond-op-datum onder de omschrijving: klein, gedempt en NIET vet — een terzijde */
.wb-line__done {
    color: color-mix(in srgb, var(--agri-ink) 52%, var(--agri-panel));
    font-size: .8rem;
    font-weight: 500;
    line-height: 1.3;
}

/* Opmerking in een gedempte inkttint (geen waarschuwing) — het is een terzijde */
.wb-line__note {
    color: color-mix(in srgb, var(--agri-ink) 60%, var(--agri-panel));
    font-size: .85rem;
    font-weight: 550;
    line-height: 1.35;
    overflow-wrap: anywhere;
}

.wb-rstatus {
    display: inline-flex;
    align-items: center;
    gap: .32rem;
    flex: 0 0 auto;
    margin-top: .1rem;
    min-height: 1.75rem;
    padding: 0 .62rem;
    border-radius: 999px;
    background: var(--agri-subtle);
    color: color-mix(in srgb, var(--agri-ink) 74%, var(--agri-panel));
    font-size: .78rem;
    font-weight: 700;
    white-space: nowrap;
}

/* Vaste, thema-onafhankelijke statusbadges (semantisch): blauw = uit te voeren,
   groen = uitgevoerd, rood = niet uitvoeren. */
.wb-rstatus--todo {
    background: var(--status-todo-soft);
    color: var(--status-todo);
}

.wb-rstatus--done {
    background: var(--status-done-soft);
    color: var(--status-done);
}

.wb-rstatus--skip {
    background: var(--status-skip-soft);
    color: var(--status-skip);
}

/* Bezig = er wordt nu aan gewerkt: vaste amber-tint met een pulserende stip. */
.wb-rstatus--busy {
    background: var(--status-busy-soft);
    color: var(--status-busy);
}

.wb-rstatus__pulse {
    flex: 0 0 auto;
    width: .5rem;
    height: .5rem;
    border-radius: 999px;
    background: var(--status-busy);
    box-shadow: 0 0 0 0 color-mix(in srgb, var(--status-busy) 55%, transparent);
    animation: wb-pulse 1.8s ease-out infinite;
}

@keyframes wb-pulse {
    0% {
        box-shadow: 0 0 0 0 color-mix(in srgb, var(--status-busy) 55%, transparent);
    }
    70% {
        box-shadow: 0 0 0 .32rem color-mix(in srgb, var(--status-busy) 0%, transparent);
    }
    100% {
        box-shadow: 0 0 0 0 color-mix(in srgb, var(--status-busy) 0%, transparent);
    }
}

/* Bezig-regel krijgt een subtiele, full-width amber-tint (geen layout-shift op het regel-grid). */
.wb-line--busy {
    background: color-mix(in srgb, var(--status-busy) 6%, transparent);
}

.wb-rstatus--done .app-icon {
    flex: 0 0 auto;
}

/* --- Constateringen / transportschade (hergebruikt .damage-card + .photo-strip) --- */
.wb-damage__text {
    margin: 0;
    color: var(--agri-ink);
    font-size: .95rem;
    font-weight: 550;
    line-height: 1.42;
    overflow-wrap: anywhere;
}

/* --- Opmerkingen: papier-plat vrij tekstblok --- */
.wb-notes__body {
    margin: 0;
    color: var(--agri-ink);
    font-size: .98rem;
    font-weight: 500;
    line-height: 1.5;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

/* Vaste Sluiten-knop in het FooterContent-slot */
.werkbon-close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 3.5rem;
    border: 0;
    border-radius: 999px;
    background: var(--agri-accent);
    color: #fff;
    font: inherit;
    font-size: 1.05rem;
    font-weight: 650;
    box-shadow: 0 14px 32px color-mix(in srgb, var(--agri-accent) 30%, transparent);
    cursor: pointer;
    transition: filter 150ms ease, transform 150ms ease;
}

.werkbon-close:hover:not(:disabled),
.werkbon-close:focus-visible:not(:disabled) {
    filter: brightness(1.05);
}

.werkbon-close:active:not(:disabled) {
    transform: scale(.985);
}

/* =========================================================================================
   Bijtippen-orderscherm (TopupOrderPanel): van rechts inschuivend paneel (zoals het
   auto-dossier) met een vaste kop, een scrollende inhoud en onderin vier segment-knoppen
   (Werk / Instructie / Werkbon / Galerij). Alle kleuren via de --agri- en --status-tokens,
   dus beide thema's volgen mee; de semantische statuskleuren (afgevinkt = groen, niet
   uitvoeren = rood) zijn thema-onafhankelijk.
   ========================================================================================= */

/* Van rechts naar links inschuiven (zelfde staten-override als .entry-dossier-panel) */
.topup-order-panel.fullscreen-flow-panel {
    z-index: 30;
    grid-template-rows: minmax(0, 1fr);
    padding: 0;
    transform: translate3d(100%, 0, 0);
}

.topup-order-panel.fullscreen-flow-panel--open {
    /* none: geen containing block voor fixed-lagen (zie .fullscreen-flow-panel--open) */
    transform: none;
}

.topup-order-panel.fullscreen-flow-panel--leaving {
    transform: translate3d(100%, 0, 0);
}

.topup-order-panel > .fullscreen-flow-panel__header {
    display: none;
}

.topup-order-panel .fullscreen-flow-panel__content {
    grid-template-rows: auto minmax(0, 1fr) auto;
    padding: 0;
    overflow: hidden;
}

.topup-order-panel .fullscreen-flow-panel__content > h1 {
    display: none;
}

/* --- Vaste kop: terug-knop, optionele 'Afgerond'-chip, plaat + merk/order --- */
.topup-head {
    display: grid;
    gap: .55rem;
    padding: max(.85rem, env(safe-area-inset-top)) clamp(1rem, 4.5vw, 1.6rem) .7rem;
    border-bottom: 1px solid var(--agri-border);
    background: var(--agri-panel);
}

.topup-head__bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .6rem;
    min-height: 2.6rem;
}

.topup-head__back {
    display: inline-flex;
    align-items: center;
    gap: .1rem;
    margin-left: -.55rem;
    padding: .35rem .55rem .35rem .35rem;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: var(--agri-ink);
    font: inherit;
    font-size: 1rem;
    font-weight: 650;
    cursor: pointer;
    transition: background-color 160ms ease, color 160ms ease;
}

.topup-head__back:hover,
.topup-head__back:focus-visible {
    background: var(--agri-accent-soft);
    color: var(--agri-accent);
}

.topup-chip {
    display: inline-flex;
    align-items: center;
    gap: .32rem;
    padding: .3rem .7rem;
    border-radius: 999px;
    background: var(--agri-accent-soft);
    color: var(--agri-tertiary);
    font-size: .82rem;
    font-weight: 700;
}

.topup-head__identity {
    display: flex;
    align-items: center;
    gap: .8rem;
}

/* Chips-rij onder de identity (notitie-chip); gedeeld met de Entry-dossierheader */
.topup-head__chips,
.dossier-header__chips {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
}

.topup-head__plate {
    flex: 0 0 auto;
}

.topup-head__copy {
    display: grid;
    gap: .1rem;
    min-width: 0;
}

.topup-head__copy strong {
    color: var(--agri-ink);
    font-size: 1.02rem;
    font-weight: 700;
    line-height: 1.2;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.topup-head__copy span {
    color: var(--agri-muted);
    font-size: .84rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

/* --- Scrollende inhoud --- */
.topup-scroll {
    min-height: 0;
    padding: clamp(.9rem, 4vw, 1.4rem) clamp(1rem, 4.5vw, 1.6rem) 1.4rem;
    overflow: hidden auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
}

/* Werkbon als inline tabblad: het werkbon-vel (WerkbonContent) bloedt in de overlay tot de
   panelranden via negatieve marges die op de overlay-padding zijn afgestemd; binnen de
   topup-scroll neutraliseren we die zodat het vel het tabblad netjes vult. */
.topup-werkbon .werkbon-doc {
    margin: 0 calc(-1 * clamp(1rem, 4.5vw, 1.6rem));
    padding: 0 clamp(1rem, 4.5vw, 1.6rem) .4rem;
}

.topup-work {
    display: grid;
    gap: 1.35rem;
}

.topup-empty {
    min-height: 42dvh;
}

.topup-hint {
    margin: 0;
    color: var(--agri-muted);
    font-size: .95rem;
    font-weight: 550;
    line-height: 1.45;
}

/* --- Blokken (Repareren / Eerder uitgevoerd / Niet uitvoeren) --- */
.topup-block {
    display: grid;
    gap: .55rem;
}

.topup-block__title {
    margin: 0;
    color: var(--agri-ink);
    font-size: var(--agri-h4-size);
    font-weight: 700;
}

.topup-lines {
    display: grid;
    gap: .5rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

/* Afwerk-regel: één brede tik-knop met links een afvink-vlak, rechts de tekst */
.topup-regel {
    display: grid;
    grid-template-columns: 1.7rem minmax(0, 1fr);
    gap: .7rem;
    width: 100%;
    padding: .8rem .9rem;
    border: 1px solid var(--agri-border);
    border-radius: 16px;
    background: var(--agri-panel);
    text-align: left;
    cursor: pointer;
    transition: border-color 150ms ease, background-color 150ms ease, box-shadow 150ms ease;
}

.topup-regel:not(.topup-regel--static):hover,
.topup-regel:not(.topup-regel--static):focus-visible {
    border-color: color-mix(in srgb, var(--agri-accent) 55%, var(--agri-border));
}

.topup-regel:disabled {
    cursor: default;
}

.topup-regel--static {
    cursor: default;
}

/* Afvink-vlak: leeg vierkant → gevuld groen met vinkje wanneer afgevinkt (vaste statuskleur) */
.topup-check {
    display: grid;
    place-items: center;
    width: 1.7rem;
    height: 1.7rem;
    border: 2px solid color-mix(in srgb, var(--agri-ink) 26%, var(--agri-panel));
    border-radius: 8px;
    background: var(--agri-panel);
    color: #fff;
    transition: background-color 150ms ease, border-color 150ms ease;
}

.topup-regel.is-done {
    border-color: color-mix(in srgb, var(--status-done) 45%, var(--agri-border));
    background: var(--status-done-soft);
}

.topup-regel.is-done .topup-check {
    border-color: var(--status-done);
    background: var(--status-done);
}

.topup-check--skip {
    border-color: var(--status-skip);
    background: var(--status-skip);
}

.topup-regel__body {
    display: grid;
    gap: .18rem;
    min-width: 0;
}

.topup-regel__desc {
    color: var(--agri-ink);
    font-size: .98rem;
    font-weight: 600;
    line-height: 1.32;
    overflow-wrap: anywhere;
}

/* Werkinstructie (werkbon) én artikelopmerking onder de omschrijving: op klantverzoek
   allebei dikgedrukt zwart — het eerdere gedempte grijs respectievelijk signaalrood/cursief
   was te licht om als opdracht te lezen */
.topup-regel__note {
    color: var(--agri-ink);
    font-size: .85rem;
    font-weight: 700;
    line-height: 1.35;
    overflow-wrap: anywhere;
}

/* Niet-uitvoeren: doorgehaalde omschrijving in de vaste skip-kleur (rood) */
.topup-regel--skip .topup-regel__desc {
    color: var(--status-skip);
    text-decoration: line-through;
    text-decoration-thickness: 1.5px;
    text-decoration-color: color-mix(in srgb, var(--status-skip) 70%, transparent);
}

/* Eerder uitgevoerd: gedempt, als 'klaar' gemarkeerd maar zonder interactie */
.topup-regel--static.is-done .topup-regel__desc {
    color: color-mix(in srgb, var(--agri-ink) 66%, var(--agri-panel));
}

/* --- Vaste voet: afronden-knop + tabbalk --- */
.topup-foot {
    display: grid;
    gap: .55rem;
    padding: .7rem clamp(1rem, 4.5vw, 1.6rem) max(.6rem, env(safe-area-inset-bottom));
    border-top: 1px solid var(--agri-border);
    background: var(--agri-panel);
}

/* Afronden-knop: groen wanneer alles is afgevinkt, amber zolang er open regels zijn */
.topup-finish {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 3.4rem;
    padding: 0 1rem;
    border: 0;
    border-radius: 999px;
    color: #fff;
    font: inherit;
    font-size: 1.02rem;
    font-weight: 700;
    cursor: pointer;
    transition: filter 150ms ease, transform 150ms ease;
}

.topup-finish--complete {
    background: var(--status-done);
    box-shadow: 0 12px 28px color-mix(in srgb, var(--status-done) 30%, transparent);
}

.topup-finish--partial {
    background: var(--agri-warning);
    box-shadow: 0 12px 28px color-mix(in srgb, var(--agri-warning) 26%, transparent);
}

.topup-finish:not(:disabled):hover,
.topup-finish:not(:disabled):focus-visible {
    filter: brightness(1.05);
}

.topup-finish:not(:disabled):active {
    transform: scale(.985);
}

.topup-finish:disabled {
    opacity: .6;
    cursor: default;
}

/* Tabbalk: vier gelijke knoppen met icoon + label, actief = accent */
/* De weergave-schakelaar onderin is de gedeelde .glass-tabbar (GlassTabBar-component),
   exact dezelfde styling als de Home-onderbalken van Verkoop/Entry/Bijtippen. */

/* --- Fotogalerij: responsive grid van vierkante thumbnails --- */
.topup-gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(6.4rem, 1fr));
    gap: .6rem;
}

.topup-gallery-cell {
    position: relative;
    display: block;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    padding: 0;
    border: 0;
    border-radius: 14px;
    background: var(--agri-subtle);
    cursor: pointer;
    -webkit-touch-callout: none;
}

.topup-gallery-cell img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    pointer-events: none;
    -webkit-user-drag: none;
}

.topup-gallery-cell:focus-visible {
    outline: 2px solid var(--agri-accent);
    outline-offset: 2px;
}

.topup-gallery-cell .photo-thumb__loading {
    position: absolute;
    inset: 0;
}

/* Caption-strip onderin de thumbnail (leesbaar via donkere gradient) */
.topup-gallery-cell__cap {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    padding: .7rem .45rem .35rem;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, .62));
    color: #fff;
    font-size: .72rem;
    font-weight: 600;
    line-height: 1.2;
    text-align: left;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* --- Fullscreen swipe-galerij: scroll-snap track, native touch-swipe --- */
.topup-lightbox {
    position: fixed;
    inset: 0;
    z-index: 200;
    background: #000;
    overscroll-behavior: contain;
    animation: photoViewerIn 200ms ease both;
}

.topup-lightbox__track {
    display: flex;
    width: 100%;
    height: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}

.topup-lightbox__track::-webkit-scrollbar {
    display: none;
}

.topup-lightbox__slide {
    position: relative;
    display: grid;
    grid-template-rows: minmax(0, 1fr) auto;
    flex: 0 0 100%;
    width: 100%;
    height: 100%;
    margin: 0;
    scroll-snap-align: center;
    scroll-snap-stop: always;
    /* Pinch-zoom: de vergrote foto clipt binnen z'n eigen slide (niet over de buurfoto) */
    overflow: hidden;
}

.topup-lightbox__slide img {
    place-self: center;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    /* Pinch-zoom (TopupOrderPanel.razor.js) zet hier een translate+scale-transform op */
    transform-origin: center;
    will-change: transform;
}

.topup-lightbox__loading {
    place-self: center;
    width: 8rem;
    height: 8rem;
    border-radius: 18px;
}

.topup-lightbox__cap {
    display: grid;
    gap: .15rem;
    margin: 0;
    padding: 1rem 1.2rem max(1.1rem, env(safe-area-inset-bottom));
    background: linear-gradient(180deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, .55));
    color: #fff;
    text-align: center;
}

.topup-lightbox__cap strong {
    font-size: 1rem;
    font-weight: 700;
}

.topup-lightbox__cap span {
    color: rgba(255, 255, 255, .78);
    font-size: .85rem;
    font-weight: 550;
}

.topup-lightbox__close {
    position: absolute;
    top: max(.9rem, env(safe-area-inset-top));
    left: .9rem;
    z-index: 2;
    display: grid;
    width: 2.9rem;
    height: 2.9rem;
    place-items: center;
    border: 0;
    border-radius: 999px;
    background: rgba(255, 255, 255, .16);
    color: #fff;
    cursor: pointer;
    transition: background-color 150ms ease;
}

.topup-lightbox__close:hover,
.topup-lightbox__close:focus-visible {
    background: rgba(255, 255, 255, .3);
}

.topup-lightbox__counter {
    position: absolute;
    top: max(1.15rem, calc(env(safe-area-inset-top) + .25rem));
    left: 50%;
    z-index: 2;
    transform: translateX(-50%);
    padding: .3rem .8rem;
    border-radius: 999px;
    background: rgba(0, 0, 0, .45);
    color: #fff;
    font-size: .85rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.topup-lightbox__nav {
    position: absolute;
    top: 50%;
    z-index: 2;
    display: grid;
    width: 3.1rem;
    height: 3.1rem;
    place-items: center;
    transform: translateY(-50%);
    border: 0;
    border-radius: 999px;
    background: rgba(255, 255, 255, .16);
    color: #fff;
    cursor: pointer;
    transition: background-color 150ms ease, opacity 150ms ease;
}

.topup-lightbox__nav--prev {
    left: .8rem;
}

.topup-lightbox__nav--next {
    right: .8rem;
}

.topup-lightbox__nav:not(:disabled):hover,
.topup-lightbox__nav:not(:disabled):focus-visible {
    background: rgba(255, 255, 255, .3);
}

.topup-lightbox__nav:disabled {
    opacity: .3;
    cursor: default;
}

@media (prefers-reduced-motion: reduce) {
    .topup-order-panel.fullscreen-flow-panel,
    .topup-head__back,
    .topup-regel,
    .topup-check,
    .topup-finish,
    .topup-lightbox,
    .topup-lightbox__close,
    .topup-lightbox__nav {
        transition: none;
        animation: none;
    }

    .topup-lightbox__track {
        scroll-behavior: auto;
    }
}

/* =========================================================================================
   Inspectie-orderscherm (InspectionOrderPanel): het inname-scherm van de Optische
   inspectie. Van rechts inschuivend paneel (zelfde staten-override als .topup-order-panel),
   hero in werkbon-stijl, categoriekaarten in rondgang-volgorde met thumbnail-strips,
   fotogrids met upload-tegels, constatering-kaartjes met vaste statuskleuren, sheets voor
   kiezer, editor, extra's, verplaatsen en review, en de drag-staten voor het verslepen van
   foto's. Alle kleuren via de --agri- en --status-tokens zodat beide thema's meevolgen.
   ========================================================================================= */

/* Van rechts naar links inschuiven, boven de zwevende tabbalk (z-index 30-les) */
.inspection-order-panel.fullscreen-flow-panel {
    z-index: 30;
    grid-template-rows: minmax(0, 1fr);
    padding: 0;
    transform: translate3d(100%, 0, 0);
}

.inspection-order-panel.fullscreen-flow-panel--open {
    /* none: geen containing block voor fixed-lagen (zie .fullscreen-flow-panel--open) */
    transform: none;
}

.inspection-order-panel.fullscreen-flow-panel--leaving {
    transform: translate3d(100%, 0, 0);
}

.inspection-order-panel > .fullscreen-flow-panel__header {
    display: none;
}

.inspection-order-panel .fullscreen-flow-panel__content {
    grid-template-rows: auto minmax(0, 1fr) auto;
    padding: 0;
    overflow: hidden;
}

.inspection-order-panel .fullscreen-flow-panel__content > h1 {
    display: none;
}

/* Kop hergebruikt .topup-head; alleen het ordernummer rechts is eigen */
.insp-head__order {
    color: var(--agri-muted);
    font-size: .88rem;
    font-weight: 650;
    font-variant-numeric: tabular-nums;
}

/* --- Scrollende inhoud: dit element is óók de drag-root (autoscroll + droptargets) --- */
.insp-scroll {
    position: relative;
    min-height: 0;
    padding: clamp(.9rem, 4vw, 1.4rem) clamp(1rem, 4.5vw, 1.6rem) 1.6rem;
    overflow: hidden auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
}

/* --- Hero: werkbon-vormtaal; de plaat kapt af met een ellipsis en wordt nooit geclipt --- */
.insp-hero {
    margin: .2rem 0 1.1rem;
}

.insp-hero__plate {
    max-width: 100%;
}

.insp-hero__plate .plate {
    max-width: 100%;
}

.insp-hero__plate .plate__nr {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.insp-hero__klant {
    position: relative;
    margin: .85rem 0 0;
    color: color-mix(in srgb, var(--agri-ink) 72%, transparent);
    font-size: .95rem;
    font-weight: 600;
}

/* Notitie-chip is een echte knop in wb-chip-vormtaal */
.insp-chip-btn {
    font: inherit;
    font-size: .85rem;
    font-weight: 600;
    cursor: pointer;
    transition: border-color 150ms ease, background-color 150ms ease;
}

.insp-chip-btn:hover,
.insp-chip-btn:focus-visible {
    border-color: var(--agri-accent);
    background: var(--agri-accent-soft);
}

/* --- Alleen-lezen-banner --- */
.insp-ro-banner {
    display: flex;
    gap: .6rem;
    align-items: center;
    margin: 0 0 1rem;
    padding: .7rem .9rem;
    border: 1px solid color-mix(in srgb, var(--agri-warning) 30%, var(--agri-border));
    border-radius: 14px;
    background: var(--agri-warning-soft);
    color: var(--agri-warning);
    font-size: .9rem;
    font-weight: 600;
    line-height: 1.35;
}

/* --- Categoriekaarten --- */
.insp-cats {
    display: grid;
    gap: .8rem;
}

.insp-cat {
    overflow: hidden;
    border: 1px solid var(--agri-border);
    border-radius: 18px;
    background: var(--agri-panel);
    transition: border-color 150ms ease, box-shadow 150ms ease;
}

.insp-cat__head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    gap: .7rem;
    align-items: center;
    width: 100%;
    min-height: 3.6rem;
    padding: .8rem .9rem;
    border: 0;
    background: transparent;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.insp-cat__copy {
    display: grid;
    gap: .15rem;
    min-width: 0;
}

.insp-cat__name {
    color: var(--agri-ink);
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.25;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.insp-cat__meta {
    color: var(--agri-muted);
    font-size: .82rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.insp-cat__sub {
    color: var(--agri-ink);
    font-size: .95rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.insp-cat__chev {
    display: grid;
    place-items: center;
    color: var(--agri-muted);
    transition: transform 180ms ease;
}

.insp-cat--open .insp-cat__chev {
    transform: rotate(90deg);
}

/* Thumbnail-strip op de dichte kaart: horizontaal scrollend, lazy thumbs */
.insp-cat__strip {
    display: flex;
    gap: .5rem;
    padding: 0 .9rem .85rem;
    overflow-x: auto;
    scrollbar-width: none;
    cursor: pointer; /* ook de witruimte naast de foto's opent de ingeklapte kaart */
}

.insp-cat__strip::-webkit-scrollbar {
    display: none;
}

.insp-cat__body {
    display: grid;
    gap: .9rem;
    padding: .15rem .9rem 1rem;
    border-top: 1px solid color-mix(in srgb, var(--agri-ink) 6%, transparent);
}

.insp-cat__tools {
    display: flex;
    justify-content: flex-end;
    margin-top: .5rem;
}

.insp-tool-btn {
    min-height: 2.4rem;
    padding: 0 .9rem;
    border: 1px solid var(--agri-border);
    border-radius: 999px;
    background: var(--agri-subtle);
    color: var(--agri-ink);
    font: inherit;
    font-size: .85rem;
    font-weight: 650;
    cursor: pointer;
    transition: background-color 150ms ease, border-color 150ms ease;
}

.insp-tool-btn:hover,
.insp-tool-btn:focus-visible {
    border-color: var(--agri-accent);
    background: var(--agri-accent-soft);
}

.insp-hint {
    margin: 0;
    color: var(--agri-muted);
    font-size: .85rem;
    font-weight: 550;
    line-height: 1.4;
}

/* --- Fotogrid: 3 kolommen, vierkante tegels van 44pt+ --- */
.insp-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .55rem;
    margin-top: .5rem;
}

.insp-cat__tools + .insp-grid {
    margin-top: 0;
}

/* Fototegel: knop met thumb; long-press pakt hem op (geen callout of selectie) */
.insp-photo {
    position: relative;
    display: grid;
    overflow: hidden;
    aspect-ratio: 1 / 1;
    width: 100%;
    padding: 0;
    border: 0;
    border-radius: 14px;
    background: var(--agri-subtle);
    cursor: pointer;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
}

.insp-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    pointer-events: none;
    -webkit-user-drag: none;
}

.insp-photo:focus-visible {
    outline: 2px solid var(--agri-accent);
    outline-offset: 2px;
}

.insp-photo .photo-thumb__loading {
    position: absolute;
    inset: 0;
}

.insp-photo__broken {
    display: grid;
    place-items: center;
    width: 100%;
    height: 100%;
    color: var(--agri-muted);
}

/* Strip-variant: vaste kleine maat in de horizontale strip */
.insp-photo--strip {
    aspect-ratio: auto;
    flex: 0 0 auto;
    width: 4.2rem;
    height: 4.2rem;
}

/* Opgepakt: de brontegel dimt terwijl de ghost de vinger volgt */
.insp-photo--lifted {
    opacity: .35;
}

/* Selectiemodus: vinkje rechtsboven op elke tegel */
.insp-photo__tick {
    position: absolute;
    top: .35rem;
    right: .35rem;
    display: grid;
    place-items: center;
    width: 1.45rem;
    height: 1.45rem;
    border: 2px solid #fff;
    border-radius: 999px;
    background: color-mix(in srgb, var(--agri-ink) 35%, transparent);
    color: #fff;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .25);
    transition: background-color 150ms ease;
}

.insp-photo__tick.is-on {
    background: var(--agri-accent);
}

.insp-photo.is-selected {
    outline: 3px solid var(--agri-accent);
    outline-offset: -3px;
}

/* Upload-tegel: foto al zichtbaar met een voortgangswaas erover */
.insp-photo--uploading img {
    opacity: .55;
}

.insp-photo__busy {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    background: color-mix(in srgb, var(--agri-panel) 30%, transparent);
}

/* Mislukte upload: retry-tegel met waarschuwing en een klein kruisje om te verwijderen */
.insp-photo--failed img {
    opacity: .3;
}

.insp-photo__retry {
    position: absolute;
    inset: 0;
    display: grid;
    gap: .2rem;
    place-content: center;
    justify-items: center;
    border: 2px dashed color-mix(in srgb, var(--status-skip) 55%, transparent);
    border-radius: 14px;
    background: color-mix(in srgb, var(--status-skip-soft) 82%, transparent);
    color: var(--status-skip);
    font: inherit;
    font-size: .78rem;
    font-weight: 700;
    cursor: pointer;
}

.insp-photo__discard {
    position: absolute;
    top: .3rem;
    right: .3rem;
    display: grid;
    place-items: center;
    width: 1.7rem;
    height: 1.7rem;
    border: 0;
    border-radius: 999px;
    background: color-mix(in srgb, var(--agri-ink) 55%, transparent);
    color: #fff;
    cursor: pointer;
}

/* De camera-tegel volgt het grid (vierkant) in plaats van de vaste strip-maat */
.insp-grid .photo-add {
    aspect-ratio: 1 / 1;
    min-width: 0;
    min-height: 0;
    width: 100%;
}

/* --- Ghost-kloon tijdens het slepen: fixed, boven alles, nooit hit-testbaar --- */
.insp-drag-ghost {
    position: fixed;
    z-index: 90;
    display: grid;
    overflow: hidden;
    margin: 0;
    border: 0;
    border-radius: 14px;
    background: var(--agri-subtle);
    box-shadow: 0 18px 44px rgba(0, 0, 0, .3);
    opacity: .92;
    pointer-events: none;
    will-change: transform;
}

.insp-drag-ghost img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* --- Tijdens de drag: kaarten klappen samen tot compacte droptargets --- */
.insp-scroll.insp-dragging {
    /* Native scroll uit; de rAF-autoscroll van de module neemt het over */
    touch-action: none;
}

.insp-scroll.insp-dragging .insp-cat__strip,
.insp-scroll.insp-dragging .insp-cat__body {
    display: none;
}

.insp-scroll.insp-dragging .insp-cat__head {
    min-height: 3.2rem;
    padding: .6rem .9rem;
}

.insp-scroll.insp-dragging .insp-cat {
    border-style: dashed;
    border-color: color-mix(in srgb, var(--agri-accent) 45%, var(--agri-border));
}

/* De restbak is geen droptarget (geen endpoint terug naar 'niet ingedeeld') */
.insp-scroll.insp-dragging .insp-cat--unsorted {
    border-style: solid;
    border-color: var(--agri-border);
    opacity: .55;
}

.insp-cat.is-drop-target {
    border-style: solid;
    border-color: var(--agri-accent);
    background: var(--agri-accent-soft);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--agri-accent) 25%, transparent);
}

.insp-cat.is-drop-spring {
    animation: inspDropSpring 700ms ease-in-out infinite;
}

@keyframes inspDropSpring {
    0%, 100% {
        box-shadow: 0 0 0 3px color-mix(in srgb, var(--agri-accent) 25%, transparent);
    }

    50% {
        box-shadow: 0 0 0 7px color-mix(in srgb, var(--agri-accent) 38%, transparent);
    }
}

/* --- Constatering-kaartjes: groen of rood accent op de linkerrand (vaste statuskleuren) --- */
.insp-findings {
    display: grid;
    gap: .5rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.insp-finding {
    display: grid;
    /* Derde kolom is het optionele slotje; zonder slotje is die kolom 0 breed */
    grid-template-columns: minmax(0, 1fr) auto auto;
    gap: .3rem .7rem;
    align-items: center;
    width: 100%;
    padding: .7rem .8rem .7rem .95rem;
    border: 1px solid var(--agri-border);
    border-left: 4px solid var(--agri-border);
    border-radius: 14px;
    background: var(--agri-panel);
    font: inherit;
    text-align: left;
    cursor: pointer;
    transition: border-color 150ms ease, background-color 150ms ease;
}

.insp-finding:hover,
.insp-finding:focus-visible {
    border-color: color-mix(in srgb, var(--agri-accent) 55%, var(--agri-border));
}

.insp-finding--yes {
    border-left-color: var(--status-done);
}

.insp-finding--no {
    border-left-color: var(--status-skip);
}

.insp-finding--child {
    margin-left: 1.4rem;
    width: calc(100% - 1.4rem);
    background: color-mix(in srgb, var(--agri-subtle) 65%, var(--agri-panel));
}

.insp-finding__body {
    display: grid;
    gap: .2rem;
    min-width: 0;
}

.insp-finding__desc {
    display: flex;
    gap: .35rem;
    align-items: center;
    color: var(--agri-ink);
    font-size: .95rem;
    font-weight: 600;
    line-height: 1.3;
    overflow-wrap: anywhere;
}

.insp-finding__childicon {
    flex: 0 0 auto;
    color: var(--agri-muted);
}

.insp-finding__note {
    display: flex;
    gap: .3rem;
    align-items: center;
    color: var(--agri-muted);
    font-size: .82rem;
    font-weight: 550;
    line-height: 1.3;
    overflow-wrap: anywhere;
}

.insp-finding__note .app-icon {
    flex: 0 0 auto;
}

.insp-finding__skip {
    color: var(--status-skip);
    font-size: .78rem;
    font-weight: 700;
}

.insp-finding__price {
    color: var(--agri-ink);
    font-size: .92rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    text-align: right;
    white-space: nowrap;
}

/* Prijs nul: rood gemarkeerd, direct zichtbaar tijdens invoer (niet pas bij verzenden) */
.insp-finding__price--zero {
    color: var(--status-skip);
}

.insp-finding__lock {
    display: grid;
    place-items: center;
    color: var(--agri-muted);
}

/* --- Kaart-acties: constatering toevoegen en lege categorie verwijderen --- */
.insp-cat__actions {
    display: grid;
    gap: .45rem;
}

.insp-add-finding {
    min-height: 3rem;
    margin-top: 0;
    font-size: .95rem;
}

.insp-cat-delete {
    display: flex;
    gap: .45rem;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 2.9rem;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: var(--agri-danger);
    font: inherit;
    font-size: .9rem;
    font-weight: 650;
    cursor: pointer;
    transition: background-color 150ms ease;
}

.insp-cat-delete:hover,
.insp-cat-delete:focus-visible {
    background: var(--agri-danger-soft);
}

.insp-add-cat {
    margin-top: 1.1rem;
    /* Lichte vulling (i.p.v. transparant) zodat de knop als tikbaar vlak leest; via het
       thematoken — in het lichte thema vrijwel gelijk aan #f4f4f4 */
    background: var(--agri-subtle);
}

/* --- Extra's-ingang: kaartknop onder de categorieën --- */
.insp-extras-open {
    display: grid;
    grid-template-columns: 2.6rem minmax(0, 1fr) auto;
    gap: .75rem;
    align-items: center;
    width: 100%;
    min-height: 4.2rem;
    margin-top: .8rem;
    padding: .7rem .9rem;
    border: 1px solid var(--agri-border);
    border-radius: 18px;
    background: var(--agri-panel);
    color: var(--agri-ink);
    font: inherit;
    text-align: left;
    cursor: pointer;
    transition: border-color 150ms ease, background-color 150ms ease;
}

.insp-extras-open:hover,
.insp-extras-open:focus-visible {
    border-color: color-mix(in srgb, var(--agri-accent) 55%, var(--agri-border));
    background: var(--agri-accent-soft);
}

.insp-extras-open__icon {
    display: grid;
    place-items: center;
    width: 2.6rem;
    height: 2.6rem;
    border-radius: 13px;
    background: var(--agri-accent-soft);
    color: var(--agri-tertiary);
}

.insp-extras-open__copy {
    display: grid;
    gap: .1rem;
    min-width: 0;
}

.insp-extras-open__copy strong {
    font-size: .98rem;
    font-weight: 700;
}

.insp-extras-open__copy small {
    color: var(--agri-muted);
    font-size: .82rem;
    font-weight: 550;
}

/* --- Selectiemodus: alles wat geen foto is dimt weg, zodat onmiskenbaar is dat je nu
   foto's aan het selecteren bent. Bewust per element gedimd en nooit via een filter of
   opacity op een gedeelde voorouder: dat zou de foto's mee-dimmen. De foto's (grid en
   strip) en hun vinkjes blijven scherp; de selectiebalk leeft buiten .insp-scroll en
   blijft dus vanzelf scherp. Puur visueel - pointer-events blijven ongemoeid. --- */
.insp-scroll--selecting .insp-hero,
.insp-scroll--selecting .insp-ro-banner,
.insp-scroll--selecting .insp-cat__head,
.insp-scroll--selecting .insp-cat__tools,
.insp-scroll--selecting .insp-photo-add,
.insp-scroll--selecting .insp-findings,
.insp-scroll--selecting .insp-cat__actions,
.insp-scroll--selecting .insp-hint,
.insp-scroll--selecting .insp-add-cat,
.insp-scroll--selecting .insp-extras-open {
    opacity: .5;
    filter: grayscale(.6);
    transition: opacity 180ms ease, filter 180ms ease;
}

/* Geselecteerde tegels krijgen bovenop hun accent-outline een zachte gloed eromheen */
.insp-scroll--selecting .insp-photo.is-selected {
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--agri-accent) 30%, transparent);
}

/* --- Sticky onderbalk: lopend totaal + Afronden, of de selectie-actiebalk --- */
.insp-foot {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: .8rem;
    align-items: center;
    padding: .75rem clamp(1rem, 4.5vw, 1.6rem) max(.7rem, env(safe-area-inset-bottom));
    border-top: 1px solid var(--agri-border);
    background: var(--agri-panel);
}

.insp-total {
    display: grid;
    gap: .05rem;
    min-width: 0;
}

.insp-total span {
    color: var(--agri-muted);
    font-size: .78rem;
    font-weight: 650;
}

.insp-total strong {
    color: var(--agri-ink);
    font-size: 1.25rem;
    font-weight: 750;
    font-variant-numeric: tabular-nums;
}

.insp-finish {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 9rem;
    min-height: 3.3rem;
    padding: 0 1.5rem;
    border: 0;
    border-radius: 999px;
    background: var(--status-done);
    color: #fff;
    font: inherit;
    font-size: 1rem;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 12px 28px color-mix(in srgb, var(--status-done) 30%, transparent);
    transition: filter 150ms ease, transform 150ms ease;
}

.insp-finish:not(:disabled):hover,
.insp-finish:not(:disabled):focus-visible {
    filter: brightness(1.05);
}

.insp-finish:not(:disabled):active {
    transform: scale(.985);
}

.insp-finish:disabled {
    opacity: .6;
    cursor: default;
}

/* Selectie-actiebalk: vaste acties in de duimzone (vangnet voor het slepen) */
.insp-selectbar {
    /* Teller op een eigen rij boven de knoppen: voorkomt het klemmen/afbreken van
       "x geselecteerd" naast drie knoppen en maakt de balk bewust wat hoger */
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    grid-column: 1 / -1;
    gap: .55rem .45rem;
    align-items: center;
    width: 100%;
    padding: .1rem 0 .15rem;
}

.insp-selectbar__count {
    grid-column: 1 / -1;
    min-width: 0;
    color: var(--agri-ink);
    font-size: .95rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.insp-selectbar__btn {
    flex: 0 0 auto;
    min-height: 2.9rem;
    padding: 0 .95rem;
    border: 1px solid var(--agri-border);
    border-radius: 999px;
    background: var(--agri-subtle);
    color: var(--agri-ink);
    font: inherit;
    font-size: .88rem;
    font-weight: 650;
    cursor: pointer;
    transition: background-color 150ms ease, border-color 150ms ease;
}

.insp-selectbar__btn:disabled {
    opacity: .5;
    cursor: default;
}

.insp-selectbar__btn:not(:disabled):hover,
.insp-selectbar__btn:not(:disabled):focus-visible {
    border-color: var(--agri-accent);
    background: var(--agri-accent-soft);
}

.insp-selectbar__btn--danger {
    color: var(--agri-danger);
}

.insp-selectbar__btn--danger:not(:disabled):hover,
.insp-selectbar__btn--danger:not(:disabled):focus-visible {
    border-color: var(--agri-danger);
    background: var(--agri-danger-soft);
}

.insp-selectbar__cancel {
    flex: 0 0 auto;
    min-height: 2.9rem;
    padding: 0 .7rem;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: var(--agri-muted);
    font: inherit;
    font-size: .88rem;
    font-weight: 650;
    cursor: pointer;
}

/* --- Sheets: switch-sheet-vormtaal met een eigen scrollgebied en maximale hoogte.
   Flex-kolom in plaats van grid, zodat het scrollgebied netjes krimpt binnen max-height --- */
.insp-sheet {
    display: flex;
    flex-direction: column;
    max-height: min(84dvh, 46rem);
}

.insp-sheet .insp-sheet__scroll {
    flex: 1 1 auto;
    min-height: 0;
    padding: .15rem .2rem;
    overflow: hidden auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
}

/* --- Van-onder-inschuivende inname-sheets (InspectionSheet): schermbreed met een
   breedte-begrensde inner, plus de MoreMenuSheet-sleepmechanica. De onderrand krijgt 54px
   overhang zodat hij tijdens de rubberband omhoog niet loskomt; de inner compenseert dat met
   extra padding-bottom (net als .more-menu). Overschrijft .switch-sheet/.insp-sheet op
   bronvolgorde. --- */
.insp-drag-sheet {
    /* Eigen kliks, ook binnen een pointer-events:none-laag (rd-panel-layer/rdi-line-layer):
       fullscreen vaste lagen verklaren hun eigen pointer-events, zoals de open backdrop en
       .profile-overlay-panel--open dat al doen — anders is de sheet per route doof */
    pointer-events: auto;
    right: 0;
    bottom: -54px;
    left: 0;
    max-width: none;
    margin: 0;
    padding: 0;
    gap: 0;
    border-radius: 30px 30px 0 0;
    box-shadow: 0 -16px 46px rgba(16, 42, 38, .16);
    /* Startstand onder het scherm; de open-klasse schuift 'm naar de sleep-offset (0 in rust) */
    transform: translate3d(0, calc(100% + 2rem), 0);
    transition: transform 300ms cubic-bezier(.32, .72, .33, 1);
    animation: none;
}

.insp-drag-sheet--open {
    transform: translate3d(0, var(--insp-sheet-drag, 0px), 0);
}

.insp-drag-sheet--dragging {
    transition: none;
}

.insp-drag-sheet__grip {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    padding: .55rem 0 .35rem;
    touch-action: none;
    cursor: grab;
}

.insp-drag-sheet__grip:active {
    cursor: grabbing;
}

/* De kopregels van een sheet (titel + statusflair) slepen mee met de greep. touch-action
   staat bewust alléén op die regels en niet op de sheet zelf: een voorouder met 'none'
   telt door in de hele keten en zou het pannen binnen .insp-sheet__scroll blokkeren.
   h2/h3/p zijn in deze codebase nooit scrollcontainers, dus dit raakt geen scrollgebied. */
.insp-drag-sheet__inner > h2,
.insp-drag-sheet__inner > h3,
.insp-drag-sheet__inner > p {
    touch-action: none;
    cursor: grab;
}

.insp-drag-sheet__grip .switch-sheet__handle {
    margin: 0 auto;
}

/* Inhoud houdt exact de oude sheetbreedte, marges en padding: alleen het witte vlak loopt
   tot de schermranden */
.insp-drag-sheet__inner {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: .7rem;
    min-height: 0;
    width: 100%;
    max-width: 30rem;
    margin-inline: auto;
    padding: 0 1.15rem calc(1.1rem + env(safe-area-inset-bottom) + 54px);
}

.insp-drag-backdrop {
    /* Op de sheet-laag (41) i.p.v. de backdrop-laag (40): bij gestapelde sheets (bijv. de
       verwijder-bevestiging boven de constatering-editor) dekt de backdrop van de bovenste
       sheet zo ook de sleepgreep van de onderliggende sheet af — DOM-volgorde bepaalt de
       stapel, en de onderste sheet is pas weer swipebaar als de bovenste weg is */
    z-index: 41;
    opacity: 0;
    transition: opacity 300ms ease;
    animation: none;
    /* Zonder open-klasse (uitfadend, tot de unmount 300ms later) direct doorklikbaar:
       de onzichtbare knop at anders de eerste tik na het sluiten op */
    pointer-events: none;
}

.insp-drag-backdrop--open {
    opacity: 1;
    pointer-events: auto;
}

/* Keuze-popup 'Wil je nog extra's toevoegen?' — secundaire (overslaan) knop */
.insp-prompt__skip {
    min-height: 3.4rem;
    border: 1px solid var(--agri-border);
    border-radius: 999px;
    background: var(--agri-subtle);
    color: var(--agri-ink);
    font: inherit;
    font-size: 1.02rem;
    font-weight: 650;
    cursor: pointer;
    transition: background-color 150ms ease;
}

.insp-prompt__skip:hover,
.insp-prompt__skip:focus-visible {
    background: color-mix(in srgb, var(--agri-ink) 8%, white);
}

/* De keuze-popup 'Wil je nog extra's toevoegen?' ligt boven de nog-open review-sheet (z 41/40) */
.insp-sheet__label {
    margin: .6rem .1rem .25rem;
    color: var(--agri-muted);
    font-size: .8rem;
    font-weight: 700;
}

.insp-note-text {
    margin: 0 .1rem;
    color: var(--agri-ink);
    font-size: .95rem;
    line-height: 1.5;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

/* --- Categorie-kiezer: tikbaar auto-silhouet (bovenaanzicht) + directe zone-chips --- */
.insp-picker__hint {
    margin: 0 .8rem .2rem;
    color: var(--agri-muted);
    font-size: .92rem;
    line-height: 1.4;
    text-align: center;
}

.insp-car {
    display: block;
    /* +2rem breedte = ~50px extra hoogte: de kiezer-sheet schuift daardoor hoger uit */
    width: min(62vw, 17rem);
    margin: .4rem auto;
}

/* Line-art bovenaanzicht: carrosserie, wielen, spiegels, ruiten/motorkaplijnen en lichten */
.insp-car__outline {
    fill: var(--agri-panel);
    stroke: color-mix(in srgb, var(--agri-ink) 42%, transparent);
    stroke-width: 3.5;
}

.insp-car__wheel rect {
    fill: color-mix(in srgb, var(--agri-ink) 55%, var(--agri-panel));
}

.insp-car__mirror rect {
    fill: color-mix(in srgb, var(--agri-ink) 26%, var(--agri-panel));
}

.insp-car__line path,
.insp-car__line rect {
    fill: none;
    stroke: color-mix(in srgb, var(--agri-ink) 24%, transparent);
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.insp-car__light path {
    fill: color-mix(in srgb, var(--agri-ink) 10%, var(--agri-panel));
    stroke: color-mix(in srgb, var(--agri-ink) 18%, transparent);
    stroke-width: 1.5;
}

.insp-zone {
    cursor: pointer;
}

/* Tikzone = transparante overlay; de labelchip erbinnen blijft een wit/panel vlakje */
.insp-zone .insp-zone__vlak {
    fill: color-mix(in srgb, var(--agri-accent) 10%, transparent);
    stroke: color-mix(in srgb, var(--agri-accent) 45%, transparent);
    stroke-width: 2;
    transition: fill 150ms ease, stroke 150ms ease;
}

.insp-zone .insp-zone__pill {
    fill: var(--agri-panel);
    stroke: color-mix(in srgb, var(--agri-accent) 30%, var(--agri-border));
    stroke-width: 1.5;
}

.insp-zone text {
    fill: var(--agri-tertiary);
    font-size: 17px;
    font-weight: 700;
    pointer-events: none;
    user-select: none;
}

.insp-zone:hover .insp-zone__vlak,
.insp-zone:focus-visible .insp-zone__vlak {
    fill: color-mix(in srgb, var(--agri-accent) 26%, transparent);
    stroke: var(--agri-accent);
}

.insp-zone:focus-visible {
    outline: none;
}

/* Zone volledig aanwezig: gedimd, maar blijft tikbaar om het detail te bekijken */
.insp-zone.is-done .insp-zone__vlak {
    fill: color-mix(in srgb, var(--agri-ink) 5%, transparent);
    stroke: color-mix(in srgb, var(--agri-ink) 18%, transparent);
}

.insp-zone.is-done .insp-zone__pill {
    stroke: var(--agri-border);
}

.insp-zone.is-done text {
    fill: var(--agri-muted);
}

.insp-picker__direct {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    justify-content: center;
    margin-top: .3rem;
}

.insp-picker__chip {
    min-height: 2.9rem;
    padding: 0 1.1rem;
    border: 1px solid color-mix(in srgb, var(--agri-accent) 45%, transparent);
    border-radius: 999px;
    background: var(--agri-accent-soft);
    color: var(--agri-tertiary);
    font: inherit;
    font-size: .95rem;
    font-weight: 650;
    cursor: pointer;
    transition: background-color 150ms ease, border-color 150ms ease;
}

.insp-picker__chip:hover,
.insp-picker__chip:focus-visible {
    border-color: var(--agri-accent);
    background: color-mix(in srgb, var(--agri-accent) 22%, var(--agri-panel));
}

/* Al gekozen: grijs en uitgeschakeld (de knop krijgt ook disabled) */
.insp-picker__chip.is-done {
    border-color: color-mix(in srgb, var(--agri-ink) 16%, transparent);
    background: var(--agri-subtle);
    color: var(--agri-muted);
    cursor: default;
}

.insp-picker__subhead {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: .4rem;
}

.insp-picker__subhead h2 {
    margin: 0;
    text-align: center;
}

.insp-picker__subhead::after {
    /* Spiegel-spacer zodat de titel optisch centreert naast de terug-knop */
    width: 4.6rem;
    content: "";
}

/* Tweede trap en verplaats-sheet: grote rijen van min. 44pt */
.insp-parts {
    display: grid;
    gap: .45rem;
}

.insp-part {
    display: flex;
    gap: .6rem;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    min-height: 3.3rem;
    padding: .6rem 1rem;
    border: 1px solid var(--agri-border);
    border-radius: 16px;
    background: var(--agri-panel);
    color: var(--agri-ink);
    font: inherit;
    font-size: .98rem;
    font-weight: 650;
    text-align: left;
    cursor: pointer;
    transition: border-color 150ms ease, background-color 150ms ease;
}

.insp-part em {
    color: var(--agri-muted);
    font-size: .82rem;
    font-style: normal;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.insp-part:not(:disabled):hover,
.insp-part:not(:disabled):focus-visible {
    border-color: var(--agri-accent);
    background: var(--agri-accent-soft);
}

.insp-part:disabled {
    cursor: default;
}

/* Onderdeel al als categorie aanwezig: grijs, niet nogmaals kiesbaar (knop is disabled) */
.insp-part.is-present {
    border-color: color-mix(in srgb, var(--agri-ink) 12%, transparent);
    background: var(--agri-subtle);
    color: var(--agri-muted);
}

/* Al aanwezig: gedimd met een vinkje */
.insp-part.is-present {
    border-style: dashed;
    background: var(--agri-subtle);
    color: var(--agri-muted);
}

.insp-part.is-present .app-icon {
    color: var(--status-done);
}

/* --- Constatering-editor --- */
.insp-field__label {
    display: block;
    margin: .65rem .1rem .25rem;
    color: var(--agri-ink);
    font-size: .88rem;
    font-weight: 650;
}

.insp-input {
    width: 100%;
    min-height: 3rem;
    padding: .55rem .8rem;
    border: 1px solid var(--agri-border);
    border-radius: 14px;
    background: var(--agri-panel);
    color: var(--agri-ink);
    font: inherit;
    font-size: 1rem;
}

.insp-input:focus-visible {
    outline: 2px solid var(--agri-accent);
    outline-offset: -1px;
}

.insp-textarea {
    resize: vertical;
    min-height: 4rem;
    line-height: 1.4;
}

/* Kaartje op een bestaande constatering: gekoppeld artikel + wisselknop; kiezen in de
   lijst eronder vervangt het artikel */
.insp-article-current {
    display: flex;
    gap: .6rem;
    align-items: center;
    justify-content: space-between;
    min-height: 2.9rem;
    padding: .45rem .45rem .45rem .75rem;
    margin-bottom: .65rem;
    border-radius: 11px;
    background: var(--agri-panel);
}

.insp-article-current__name {
    font-weight: 550;
    overflow-wrap: anywhere;
}

.insp-article-current__change {
    flex-shrink: 0;
    min-height: 2.2rem;
    padding: .3rem .8rem;
    border-radius: 9px;
    color: var(--agri-accent-strong, var(--agri-accent));
    font-weight: 600;
    background: color-mix(in srgb, var(--agri-accent) 12%, white);
}

.insp-articles {
    display: grid;
    gap: .35rem;
    max-height: 11.5rem;
    margin-top: .45rem;
    padding: .15rem;
    overflow: hidden auto;
    -webkit-overflow-scrolling: touch;
    border: 1px solid color-mix(in srgb, var(--agri-ink) 7%, transparent);
    border-radius: 14px;
    background: var(--agri-subtle);
}

/* Categorie-ondertitel onder 'Nieuwe constatering', bijv. "Voorzijde - Motorkap" */
.insp-editor__cat {
    margin: -.3rem .4rem 0;
    color: var(--agri-muted);
    font-size: .92rem;
    text-align: center;
}

/* Nieuwe constatering: hogere sheet (95% van het scherm; +54px compenseert de
   rubberband-overhang aan de onderkant) zodat de artikellijst de resterende
   ruimte krijgt in plaats van een vaste maximumhoogte */
.insp-editor--new {
    height: calc(95dvh + 54px);
    max-height: calc(95dvh + 54px);
}

.insp-editor--new .insp-sheet__scroll {
    display: flex;
    flex-direction: column;
}

.insp-editor--new .insp-articles {
    flex: 1 1 auto;
    max-height: none;
    min-height: 11.5rem;
}

/* Bevestigingssheet (verwijderen): de tekststijl van .switch-sheet > p werkt daar via een
   direct-child-selector en bereikt de inner-container van de rubberband-sheet niet */
.insp-confirm-sheet__text {
    margin: 0 .8rem .2rem;
    color: var(--agri-muted);
    font-size: .95rem;
    line-height: 1.45;
    text-align: center;
}

.insp-articles__state {
    display: flex;
    gap: .55rem;
    align-items: center;
    justify-content: center;
    min-height: 3.4rem;
    color: var(--agri-muted);
    font-size: .9rem;
    font-weight: 600;
}

.insp-article {
    display: flex;
    gap: .6rem;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    min-height: 2.9rem;
    padding: .45rem .75rem;
    border: 1px solid transparent;
    border-radius: 11px;
    background: var(--agri-panel);
    color: var(--agri-ink);
    font: inherit;
    font-size: .92rem;
    font-weight: 600;
    text-align: left;
    cursor: pointer;
    transition: border-color 150ms ease, background-color 150ms ease;
}

.insp-article em {
    color: var(--agri-muted);
    font-size: .85rem;
    font-style: normal;
    font-weight: 650;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.insp-article:hover,
.insp-article:focus-visible {
    border-color: color-mix(in srgb, var(--agri-accent) 55%, transparent);
}

.insp-article.is-active {
    border-color: var(--agri-accent);
    background: var(--agri-accent-soft);
}

.insp-article.is-active em {
    color: var(--agri-tertiary);
}

.insp-field-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
    gap: .7rem;
    align-items: end;
}

.insp-field {
    display: grid;
    min-width: 0;
}

/* Handmatig besteld gewicht in het besteloverzicht: leeg = automatisch */
.order-weight-field {
    display: grid;
    gap: .3rem;
    margin-bottom: .7rem;
}

.order-review__hint {
    margin: 0;
    color: var(--agri-muted);
    font-size: .78rem;
}

/* Order- en contract-detailsheet: vaste 90%-hoogte zodat regels en afspraken de
   ruimte krijgen; status/artikel gecentreerd onder de titel, leverdatums naast elkaar */
.order-detail-sheet.insp-drag-sheet,
.contract-detail-sheet.insp-drag-sheet {
    height: calc(90dvh + 54px);
    max-height: calc(90dvh + 54px);
}

.order-detail-sheet__status {
    text-align: center;
}

.rd-date-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .55rem;
}

/* Notitie-editor: vaste hoogte (ca. 80% van het scherm, plus de 54px onderrand-
   overhang van de sleep-mechanica) zodat er ruim schrijfruimte is. De twee
   tekstvelden verdelen de vrije ruimte naar rato: relatienotitie het grootst. */
.notes-editor-sheet.insp-drag-sheet {
    height: calc(80dvh + 54px);
    max-height: calc(80dvh + 54px);
}

.notes-editor-sheet .insp-sheet__scroll {
    display: flex;
    flex-direction: column;
    gap: .7rem;
}

.notes-editor-sheet .insp-field {
    display: flex;
    flex: 3 1 0;
    flex-direction: column;
    min-height: 0;
}

.notes-editor-sheet .insp-field + .insp-field {
    flex: 2 1 0;
}

.notes-editor-sheet .insp-textarea {
    flex: 1 1 auto;
    min-height: 3.4rem;
    resize: none;
}

/* Aantal-stepper: min en plus met een smal tekstveld ertussen */
.insp-stepper {
    display: grid;
    grid-template-columns: 2.9rem minmax(0, 1fr) 2.9rem;
    overflow: hidden;
    border: 1px solid var(--agri-border);
    border-radius: 14px;
    background: var(--agri-panel);
}

.insp-stepper button {
    min-height: 3rem;
    border: 0;
    background: var(--agri-subtle);
    color: var(--agri-ink);
    font-size: 1.3rem;
    font-weight: 700;
    cursor: pointer;
    transition: background-color 150ms ease;
}

.insp-stepper button:hover,
.insp-stepper button:focus-visible {
    background: var(--agri-accent-soft);
}

.insp-stepper input {
    width: 100%;
    min-width: 0;
    border: 0;
    background: transparent;
    color: var(--agri-ink);
    font: inherit;
    font-size: 1.05rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    text-align: center;
}

.insp-stepper input:focus-visible {
    outline: none;
}

/* Prijsveld: vast euroteken buiten het input, rechts uitgelijnd met tabular-nums */
.insp-price {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: .4rem;
    align-items: center;
    min-height: 3rem;
    padding: 0 .8rem;
    border: 1px solid var(--agri-border);
    border-radius: 14px;
    background: var(--agri-panel);
}

.insp-price:focus-within {
    outline: 2px solid var(--agri-accent);
    outline-offset: -1px;
}

.insp-price span {
    color: var(--agri-muted);
    font-weight: 700;
}

.insp-price input {
    width: 100%;
    min-width: 0;
    border: 0;
    background: transparent;
    color: var(--agri-ink);
    font: inherit;
    font-size: 1.05rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    text-align: right;
}

.insp-price input:focus-visible {
    outline: none;
}

/* Segmented 'Klant wil uitvoeren': vaste groen/rood betekeniskleuren */
.insp-seg {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .4rem;
}

.insp-seg__btn {
    min-height: 3rem;
    border: 1px solid var(--agri-border);
    border-radius: 14px;
    background: var(--agri-panel);
    color: var(--agri-ink);
    font: inherit;
    font-size: 1rem;
    font-weight: 700;
    cursor: pointer;
    transition: background-color 150ms ease, border-color 150ms ease, color 150ms ease;
}

.insp-seg__btn--yes {
    border-color: var(--status-done);
    background: var(--status-done);
    color: #fff;
}

.insp-seg__btn--no {
    border-color: var(--status-skip);
    background: var(--status-skip);
    color: #fff;
}

.insp-editor__actions {
    display: grid;
    gap: .5rem;
    margin-top: .4rem;
}

.insp-editor__delete,
.insp-editor__child {
    display: flex;
    gap: .45rem;
    align-items: center;
    justify-content: center;
    min-height: 2.9rem;
    border: 0;
    border-radius: 999px;
    background: transparent;
    font: inherit;
    font-size: .92rem;
    font-weight: 650;
    cursor: pointer;
    transition: background-color 150ms ease;
}

.insp-editor__delete {
    color: var(--agri-danger);
}

.insp-editor__delete:hover,
.insp-editor__delete:focus-visible {
    background: var(--agri-danger-soft);
}

.insp-editor__child {
    color: var(--agri-tertiary);
}

.insp-editor__child:hover,
.insp-editor__child:focus-visible {
    background: var(--agri-accent-soft);
}

/* --- Extra's: checkboxlijst met prijzen --- */
.insp-extra {
    display: flex;
    gap: .7rem;
    align-items: center;
    width: 100%;
    min-height: 3.3rem;
    margin-bottom: .4rem;
    padding: .55rem .8rem;
    border: 1px solid var(--agri-border);
    border-radius: 16px;
    background: var(--agri-panel);
    color: var(--agri-ink);
    font: inherit;
    font-size: .95rem;
    font-weight: 600;
    text-align: left;
    cursor: pointer;
    transition: border-color 150ms ease, background-color 150ms ease;
}

.insp-extra__check {
    display: grid;
    flex: 0 0 auto;
    place-items: center;
    width: 1.55rem;
    height: 1.55rem;
    border: 2px solid color-mix(in srgb, var(--agri-ink) 26%, var(--agri-panel));
    border-radius: 7px;
    background: var(--agri-panel);
    color: #fff;
    transition: background-color 150ms ease, border-color 150ms ease;
}

.insp-extra.is-checked {
    border-color: color-mix(in srgb, var(--agri-accent) 55%, var(--agri-border));
    background: var(--agri-accent-soft);
}

.insp-extra.is-checked .insp-extra__check {
    border-color: var(--agri-accent);
    background: var(--agri-accent);
}

.insp-extra__name {
    flex: 1 1 auto;
    min-width: 0;
    overflow-wrap: anywhere;
}

.insp-extra__price {
    flex: 0 0 auto;
    color: var(--agri-muted);
    font-size: .88rem;
    font-style: normal;
    font-weight: 650;
    font-variant-numeric: tabular-nums;
}

/* --- Review vóór afronden --- */
.insp-review__list {
    display: grid;
    gap: .1rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.insp-review__list li {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
        "name sub"
        "counts sub";
    gap: 0 .7rem;
    align-items: center;
    padding: .5rem .2rem;
    border-bottom: 1px solid color-mix(in srgb, var(--agri-ink) 6%, transparent);
}

.insp-review__name {
    grid-area: name;
    color: var(--agri-ink);
    font-size: .95rem;
    font-weight: 650;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.insp-review__counts {
    grid-area: counts;
    color: var(--agri-muted);
    font-size: .8rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.insp-review__sub {
    grid-area: sub;
    color: var(--agri-ink);
    font-size: .92rem;
    font-style: normal;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.insp-review__total {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: .7rem;
    padding: .75rem .2rem .35rem;
    color: var(--agri-ink);
    font-weight: 750;
}

.insp-review__total strong {
    font-size: 1.2rem;
    font-variant-numeric: tabular-nums;
}

.insp-review__warnings {
    display: grid;
    gap: .4rem;
    margin-top: .55rem;
}

/* Zachte waarschuwing: tikbaar, blokkeert niets (conform legacy) */
.insp-warn {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: .55rem;
    align-items: center;
    width: 100%;
    min-height: 2.9rem;
    padding: .5rem .75rem;
    border: 1px solid color-mix(in srgb, var(--agri-warning) 30%, var(--agri-border));
    border-radius: 13px;
    background: var(--agri-warning-soft);
    color: var(--agri-warning);
    font: inherit;
    font-size: .88rem;
    font-weight: 600;
    line-height: 1.3;
    text-align: left;
    cursor: pointer;
    transition: border-color 150ms ease;
}

.insp-warn:hover,
.insp-warn:focus-visible {
    border-color: var(--agri-warning);
}

.insp-warn span {
    overflow-wrap: anywhere;
}

/* --- Afrond-bevestiging: signout-vormtaal, fixed boven het orderpaneel (z 30) --- */
.insp-confirm-backdrop {
    position: fixed;
    z-index: 34;
}

.insp-confirm {
    position: fixed;
    z-index: 35;
    touch-action: none;
}

/* --- Snackbar met Ongedaan maken: boven de onderbalk, onder de sheets --- */
/* Volle breedte met vaste zijmarges; titel en categorienaam gestapeld, de
   undo-actie als eigen rij met de scheidingslijn als bovenrand van de knop */
.insp-snackbar {
    position: fixed;
    right: 1rem;
    bottom: max(6.4rem, calc(env(safe-area-inset-bottom) + 5.9rem));
    left: 1rem;
    z-index: 36;
    display: flex;
    flex-direction: column;
    padding: .85rem 1.15rem .3rem;
    border-radius: 16px;
    background: var(--agri-teal);
    color: #fff;
    line-height: 1.35;
    box-shadow: 0 16px 40px rgba(16, 42, 38, .35);
    animation: entrySheetUp 260ms cubic-bezier(.32, .72, .33, 1) both;
}

.insp-snackbar__titel {
    opacity: .85;
    font-size: .88rem;
    font-weight: 600;
}

.insp-snackbar__naam {
    margin-top: .1rem;
    font-size: 1.05rem;
    font-weight: 700;
}

/* Zonder undo-knop toch een nette onderrand: de naamregel draagt dan de ruimte */
.insp-snackbar__naam:last-child {
    margin-bottom: .55rem;
}

.insp-snackbar button {
    width: 100%;
    margin-top: .75rem;
    padding: .7rem 0 .6rem;
    border: 0;
    border-top: 1px solid rgba(255, 255, 255, .22);
    background: transparent;
    color: #9fd88a;
    font: inherit;
    font-size: .95rem;
    font-weight: 750;
    text-align: center;
    cursor: pointer;
}

/* --- Reduced motion: transities, animaties en de spring-pulse uit --- */
@media (prefers-reduced-motion: reduce) {
    .inspection-order-panel.fullscreen-flow-panel,
    .insp-cat,
    .insp-cat__chev,
    .insp-chip-btn,
    .insp-tool-btn,
    .insp-finding,
    .insp-finish,
    .insp-selectbar__btn,
    .insp-part,
    .insp-article,
    .insp-extra,
    .insp-extra__check,
    .insp-extras-open,
    .insp-warn,
    .insp-photo__tick,
    .insp-zone path,
    .insp-zone rect,
    .insp-stepper button,
    .insp-seg__btn,
    .insp-cat-delete,
    .insp-editor__delete,
    .insp-editor__child,
    .insp-picker__chip,
    .insp-snackbar,
    .insp-drag-ghost,
    .insp-drag-sheet,
    .insp-drag-backdrop {
        transition: none;
        animation: none;
    }

    .insp-cat.is-drop-spring {
        animation: none;
        box-shadow: 0 0 0 7px color-mix(in srgb, var(--agri-accent) 38%, transparent);
    }

    /* De selectiemodus-dimming verschijnt dan zonder fade */
    .insp-scroll--selecting .insp-hero,
    .insp-scroll--selecting .insp-ro-banner,
    .insp-scroll--selecting .insp-cat__head,
    .insp-scroll--selecting .insp-cat__tools,
    .insp-scroll--selecting .insp-photo-add,
    .insp-scroll--selecting .insp-findings,
    .insp-scroll--selecting .insp-cat__actions,
    .insp-scroll--selecting .insp-hint,
    .insp-scroll--selecting .insp-add-cat,
    .insp-scroll--selecting .insp-extras-open {
        transition: none;
    }
}

/* =========================================================================================
   Technische controle - hoofdstukken-orderscherm (TechnicalOrderPanel). Van rechts
   inschuivend paneel (zelfde staten-override als .inspection-order-panel), met binnenin
   een overflow:hidden stage waarin hoofdstukken en het probleem-detail volgens het
   iOS-pushmodel van rechts naar links schuiven: inkomend van translate3d(100%) naar 0,
   uitgaand naar -30% met lichte fade, 260ms ease-out, uitsluitend transform en opacity.
   Verder: hoofdstuk-kaarten, de 4-staten-triage-segmentcontrol (n.v.t. | goed |
   toekomstig | probleem, kleur + icoon + label op de --status-tokens), detail-kaarten
   met fotorijen, de specials banden/remmen/diversen en het reviewscherm. Alle kleuren
   via de --agri- en --status-tokens zodat beide thema's meevolgen.
   ========================================================================================= */

/* Van rechts naar links inschuiven, boven de zwevende tabbalk (z-index 30-les) */
.technical-order-panel.fullscreen-flow-panel {
    z-index: 30;
    grid-template-rows: minmax(0, 1fr);
    padding: 0;
    transform: translate3d(100%, 0, 0);
}

.technical-order-panel.fullscreen-flow-panel--open {
    /* none: geen containing block voor fixed-lagen (zie .fullscreen-flow-panel--open) */
    transform: none;
}

.technical-order-panel.fullscreen-flow-panel--leaving {
    transform: translate3d(100%, 0, 0);
}

.technical-order-panel > .fullscreen-flow-panel__header {
    display: none;
}

.technical-order-panel .fullscreen-flow-panel__content {
    grid-template-rows: auto minmax(0, 1fr);
    padding: 0;
    overflow: hidden;
}

.technical-order-panel .fullscreen-flow-panel__content > h1 {
    display: none;
}

/* --- Stage: één overflow:hidden vlak waarin de schermen schuiven --- */
.tech-stage {
    position: relative;
    min-height: 0;
    overflow: hidden;
    background: var(--agri-panel);
}

.tech-stage > .relations-state {
    padding: 3rem 1.5rem;
}

.tech-view {
    position: absolute;
    inset: 0;
    z-index: 1;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;
    min-height: 0;
    background: var(--agri-panel);
}

/* De scrollende inhoud hoort altijd in de rekbare middenrij en de onderbalk in de
   onderste rij, óók op schermen zonder kopregel (zoals het overzicht met maar twee
   kinderen): zonder dit schoof de onderbalk in de 1fr-rij en werd de afrondknop
   schermvullend hoog uitgerekt. Beide expliciet — anders auto-plaatst de balk naar rij 1. */
.tech-view > .tech-body {
    grid-row: 2;
}

.tech-view > .tech-footbar {
    grid-row: 3;
}

/* Vooruit: het nieuwe scherm schuift bovenop van rechts binnen; het oude vaagt naar -30% */
.tech-stage--fwd .tech-view--entering {
    z-index: 2;
    box-shadow: -24px 0 48px rgba(16, 42, 38, .14);
    animation: techPushIn 260ms ease-out both;
}

.tech-stage--fwd .tech-view--leaving {
    animation: techPushOut 260ms ease-out both;
}

/* Terug: gespiegeld — het bovenliggende scherm schuift naar rechts weg */
.tech-stage--back .tech-view--leaving {
    z-index: 2;
    box-shadow: -24px 0 48px rgba(16, 42, 38, .14);
    animation: techPopOut 260ms ease-out both;
}

.tech-stage--back .tech-view--entering {
    animation: techPopIn 260ms ease-out both;
}

@keyframes techPushIn {
    from { transform: translate3d(100%, 0, 0); }
    to { transform: translate3d(0, 0, 0); }
}

@keyframes techPushOut {
    from { opacity: 1; transform: translate3d(0, 0, 0); }
    to { opacity: .3; transform: translate3d(-30%, 0, 0); }
}

@keyframes techPopOut {
    from { transform: translate3d(0, 0, 0); }
    to { transform: translate3d(100%, 0, 0); }
}

@keyframes techPopIn {
    from { opacity: .3; transform: translate3d(-30%, 0, 0); }
    to { opacity: 1; transform: translate3d(0, 0, 0); }
}

/* --- Scrollende schermbody --- */
.tech-body {
    min-height: 0;
    padding: clamp(.9rem, 4vw, 1.4rem) clamp(1rem, 4.5vw, 1.6rem) 1.6rem;
    overflow: hidden auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
}

/* --- Scherm 2: hero met kenteken, type en totaal-progressbar --- */
.tech-hero {
    display: grid;
    gap: .6rem;
    justify-items: start;
    margin: .2rem 0 1.1rem;
}

.tech-hero__plate {
    max-width: 100%;
}

.tech-hero__plate .plate {
    max-width: 100%;
}

.tech-hero__plate .plate__nr {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tech-hero__copy {
    display: grid;
    gap: .1rem;
}

.tech-hero__copy strong {
    color: var(--agri-ink);
    font-size: 1.1rem;
    font-weight: 750;
}

.tech-hero__copy span {
    color: var(--agri-muted);
    font-size: .9rem;
    font-weight: 600;
}

.tech-hero__chip {
    font-size: .85rem;
}

.tech-progress {
    width: 100%;
    height: 6px;
    border-radius: 999px;
    background: var(--agri-subtle);
    overflow: hidden;
}

.tech-progress__bar {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: var(--agri-accent);
    transition: width 300ms ease;
}

.tech-progress__caption {
    margin: 0;
    color: var(--agri-muted);
    font-size: .8rem;
    font-weight: 650;
    font-variant-numeric: tabular-nums;
}

/* --- Hoofdstuk-kaarten --- */
.tech-chapters {
    display: grid;
    gap: .55rem;
}

.tech-chapcard {
    display: flex;
    gap: .75rem;
    align-items: center;
    width: 100%;
    min-height: 4rem;
    padding: .7rem .8rem;
    border: 1px solid var(--agri-border);
    border-radius: 16px;
    background: var(--agri-panel);
    font: inherit;
    text-align: left;
    cursor: pointer;
    transition: border-color 150ms ease, background-color 150ms ease, transform 150ms ease;
}

.tech-chapcard:hover,
.tech-chapcard:focus-visible {
    border-color: var(--agri-accent);
    background: var(--agri-accent-soft);
}

.tech-chapcard:active {
    transform: scale(.99);
}

.tech-chapcard--done {
    border-color: color-mix(in srgb, var(--status-done) 35%, var(--agri-border));
}

/* Openstaand werk blijft gewoon wit (de basiskaart): "nog te doen" is geen fout. Alleen een
   hoofdstuk met échte problemen (status 2/4) krijgt het foutsignaal — rode rand plus rood
   getinte nummercirkel, bewust géén rood vlak zodat het geen errorbanner wordt en het
   gevulde bevindingen-bolletje de primaire cue blijft. Op --status-skip (themavast) gebouwd;
   65% haalt de 3:1-randcontrast-eis, 72%-inkmix geeft het cijfer ruim AA-contrast. */
.tech-chapcard--fault {
    border-color: color-mix(in srgb, var(--status-skip) 65%, var(--agri-border));
}

.tech-chapcard--fault .tech-chapcard__status {
    background: var(--status-skip-soft);
    color: color-mix(in srgb, var(--status-skip) 72%, var(--agri-ink));
}

.tech-chapcard__status {
    display: grid;
    flex: 0 0 auto;
    place-items: center;
    width: 2.1rem;
    height: 2.1rem;
    border-radius: 999px;
    background: var(--agri-subtle);
    color: var(--agri-muted);
    font-size: .95rem;
    font-weight: 750;
    font-variant-numeric: tabular-nums;
}

.tech-chapcard__status.is-done {
    background: var(--status-done-soft);
    color: var(--status-done);
}

.tech-chapcard__copy {
    display: grid;
    flex: 1 1 auto;
    gap: .12rem;
    min-width: 0;
}

.tech-chapcard__name {
    color: var(--agri-ink);
    font-weight: 700;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tech-chapcard__meta {
    color: var(--agri-muted);
    font-size: .82rem;
    font-weight: 600;
}

.tech-chapcard__dots {
    display: flex;
    flex: 0 0 auto;
    gap: .3rem;
}

.tech-dot {
    min-width: 1.5rem;
    padding: .12rem .4rem;
    border-radius: 999px;
    font-size: .78rem;
    font-weight: 750;
    font-variant-numeric: tabular-nums;
    text-align: center;
}

/* Eén gevuld bolletje voor alle bevindingen (problemen + toekomstig): wit op --status-skip
   is 4.75:1 (AA voor de kleine vette cijfers) en identiek in alle thema's. */
.tech-dot--alert {
    background: var(--status-skip);
    color: #fff;
}

.tech-chapcard__chev {
    display: grid;
    flex: 0 0 auto;
    place-items: center;
    color: var(--agri-muted);
}

/* --- Vaste onderbalk in de duimzone --- */
.tech-footbar {
    display: grid;
    gap: .6rem;
    padding: .75rem clamp(1rem, 4.5vw, 1.6rem) max(.7rem, env(safe-area-inset-bottom));
    border-top: 1px solid var(--agri-border);
    background: var(--agri-panel);
}

.tech-footbar--nav {
    grid-template-columns: auto minmax(0, 1fr);
}

.tech-primary {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 3.3rem;
    padding: 0 1.5rem;
    border: 0;
    border-radius: 999px;
    background: var(--agri-accent);
    color: #fff;
    font: inherit;
    font-size: 1.02rem;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 12px 28px color-mix(in srgb, var(--agri-accent) 30%, transparent);
    transition: filter 150ms ease, transform 150ms ease;
}

.tech-primary:not(:disabled):hover,
.tech-primary:not(:disabled):focus-visible {
    filter: brightness(1.05);
}

.tech-primary:not(:disabled):active {
    transform: scale(.985);
}

.tech-primary:disabled {
    opacity: .55;
    cursor: default;
}

.tech-primary--ghost {
    background: var(--agri-subtle);
    color: var(--agri-ink);
    box-shadow: none;
}

/* Algemene niet-wegklikbare wachtlaag (BusyOverlay.razor): blokkeert het scherm zolang een
   serveractie loopt. De component bepaalt zelf wanneer hij verschijnt (pas na 400 ms) en
   verdwijnt (minimaal 800 ms zichtbaar, daarna 160 ms uitfaden). Bewust géén streepje: dat
   is het swipe-signaal van de app en deze laag is niet te bedienen. */
.busy-overlay {
    position: fixed;
    inset: 0;
    z-index: 250;
    /* Eigen kliks: de wachtlaag is niet-wegklikbaar en moet dus álle tikken vangen, ook
       binnen een pointer-events:none-laag — geërfd none maakt hem juist doorklikbaar */
    pointer-events: auto;
    display: grid;
    align-items: end;
    isolation: isolate;
    overscroll-behavior: contain;
    outline: none;
}

.busy-overlay__backdrop {
    position: absolute;
    inset: 0;
    z-index: -1;
    background: rgba(10, 25, 23, .48);
    backdrop-filter: blur(3px);
    animation: busyOverlayFadeIn 220ms ease both;
}

.busy-overlay__sheet {
    display: grid;
    gap: .8rem;
    justify-items: center;
    width: 100%;
    min-height: 12rem;
    padding: 2rem clamp(1.25rem, 6vw, 2rem) calc(2rem + env(safe-area-inset-bottom));
    border-radius: 30px 30px 0 0;
    background: var(--agri-panel);
    color: var(--agri-ink);
    text-align: center;
    box-shadow: 0 -16px 46px rgba(16, 42, 38, .2);
    animation: busyOverlaySlideIn 300ms cubic-bezier(.32, .72, .33, 1) both;
}

.busy-overlay__text {
    display: grid;
    gap: .45rem;
    justify-items: center;
}

.busy-overlay__text strong {
    max-width: 24rem;
    font-size: 1.05rem;
    line-height: 1.4;
}

.busy-overlay__slow {
    max-width: 24rem;
    color: var(--agri-muted);
    font-size: .9rem;
    font-weight: 600;
    line-height: 1.35;
    animation: busyOverlayFadeIn 260ms ease both;
}

.busy-overlay__spinner {
    width: 2rem;
    height: 2rem;
    margin-top: .35rem;
}

/* Uitfaden als animatie (geen transition): de nieuwe animation vervangt de instap-animatie
   in één keer, zonder de animation/transition-samenloop die de fade laat overslaan. */
.busy-overlay--leaving .busy-overlay__backdrop,
.busy-overlay--leaving .busy-overlay__sheet {
    animation: busyOverlayFadeOut 160ms ease both;
}

@keyframes busyOverlaySlideIn {
    from { transform: translate3d(0, 100%, 0); }
    to { transform: translate3d(0, 0, 0); }
}

@keyframes busyOverlayFadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes busyOverlayFadeOut {
    from { opacity: 1; }
    to { opacity: 0; }
}

/* De spinner blijft bewust draaien: dat ís de statusindicator, geen decoratie. */
@media (prefers-reduced-motion: reduce) {
    .busy-overlay__backdrop,
    .busy-overlay__sheet,
    .busy-overlay__slow,
    .busy-overlay--leaving .busy-overlay__backdrop,
    .busy-overlay--leaving .busy-overlay__sheet {
        transition: none;
        animation: none;
    }
}

/* Verbindingsblokkade (ConnectionRetryOverlay): zelfde sheet-look als de wachtlaag, met als
   enige bediening "Opnieuw proberen". Bewust nét onder de wachtlaag (z 249): tijdens een
   nieuwe poging schuift "Moment, initialiseren" er gewoon overheen. */
.conn-retry {
    position: fixed;
    inset: 0;
    z-index: 249;
    display: grid;
    align-items: end;
    isolation: isolate;
    overscroll-behavior: contain;
    outline: none;
}

.conn-retry__backdrop {
    position: absolute;
    inset: 0;
    z-index: -1;
    background: rgba(10, 25, 23, .48);
    backdrop-filter: blur(3px);
    animation: busyOverlayFadeIn 220ms ease both;
}

.conn-retry__sheet {
    display: grid;
    gap: .8rem;
    justify-items: center;
    width: 100%;
    min-height: 12rem;
    padding: 2rem clamp(1.25rem, 6vw, 2rem) calc(2rem + env(safe-area-inset-bottom));
    border-radius: 30px 30px 0 0;
    background: var(--agri-panel);
    color: var(--agri-ink);
    text-align: center;
    box-shadow: 0 -16px 46px rgba(16, 42, 38, .2);
    animation: busyOverlaySlideIn 300ms cubic-bezier(.32, .72, .33, 1) both;
}

.conn-retry__sheet strong {
    max-width: 24rem;
    font-size: 1.05rem;
    line-height: 1.4;
}

.conn-retry__hint {
    max-width: 24rem;
    color: var(--agri-muted);
    font-size: .9rem;
    font-weight: 600;
    line-height: 1.35;
}

.conn-retry__btn {
    max-width: 22rem;
    margin-top: .35rem;
}

@media (prefers-reduced-motion: reduce) {
    .conn-retry__backdrop,
    .conn-retry__sheet {
        transition: none;
        animation: none;
    }
}

.tech-navbtn {
    display: inline-flex;
    gap: .25rem;
    align-items: center;
    justify-content: center;
    min-height: 3.1rem;
    padding: 0 1rem;
    border: 1px solid var(--agri-border);
    border-radius: 999px;
    background: var(--agri-panel);
    color: var(--agri-ink);
    font: inherit;
    font-size: .95rem;
    font-weight: 700;
    cursor: pointer;
    transition: background-color 150ms ease, border-color 150ms ease, filter 150ms ease;
}

.tech-navbtn span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tech-navbtn:not(:disabled):hover,
.tech-navbtn:not(:disabled):focus-visible {
    border-color: var(--agri-accent);
    background: var(--agri-accent-soft);
}

.tech-navbtn:disabled {
    opacity: .55;
    cursor: default;
}

.tech-navbtn--primary {
    border: 0;
    background: var(--agri-accent);
    color: #fff;
}

.tech-navbtn--primary:not(:disabled):hover,
.tech-navbtn--primary:not(:disabled):focus-visible {
    background: var(--agri-accent);
    filter: brightness(1.05);
}

.tech-navbtn--finish {
    border: 0;
    background: var(--status-done);
    color: #fff;
    box-shadow: 0 12px 28px color-mix(in srgb, var(--status-done) 28%, transparent);
}

.tech-navbtn--finish:not(:disabled):hover,
.tech-navbtn--finish:not(:disabled):focus-visible {
    background: var(--status-done);
    filter: brightness(1.05);
}

/* --- Hoofdstukkop: naam + i/n, tikbaar voor de hoofdstuk-springer --- */
.tech-chaphead {
    display: flex;
    gap: .6rem;
    align-items: center;
    width: 100%;
    min-height: 3.1rem;
    padding: .65rem clamp(1rem, 4.5vw, 1.6rem);
    border: 0;
    border-bottom: 1px solid var(--agri-border);
    background: var(--agri-panel);
    font: inherit;
    text-align: left;
    cursor: pointer;
}

/* Lange hoofdstuknamen ("Meerwerk, constateringen", vrije configuratie) wrappen naar
   meerdere regels binnen de eigen flex-ruimte, zodat ze de kop nooit breder duwen */
.tech-chaphead__name {
    flex: 1 1 auto;
    min-width: 0;
    color: var(--agri-ink);
    font-size: 1.05rem;
    font-weight: 750;
    line-height: 1.25;
    overflow-wrap: anywhere;
}

.tech-chaphead__count {
    flex: 0 0 auto;
    color: var(--agri-muted);
    font-size: .88rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.tech-chaphead__icon {
    flex: 0 0 auto;
    color: var(--agri-muted);
    transition: color 150ms ease;
}

.tech-chaphead:hover .tech-chaphead__icon,
.tech-chaphead:focus-visible .tech-chaphead__icon {
    color: var(--agri-accent);
}

/* --- Onderdeel-rijen met badges en de triage-segmentcontrol --- */
.tech-row {
    padding: .7rem 0 .85rem;
    border-bottom: 1px solid var(--agri-border);
    border-radius: 10px;
    scroll-margin: 4.5rem;
}

.tech-row__head {
    display: flex;
    gap: .55rem;
    align-items: flex-start;
}

.tech-row__top {
    display: flex;
    gap: .6rem;
    align-items: baseline;
    justify-content: space-between;
    width: 100%;
    padding: 0 0 .55rem;
    border: 0;
    background: transparent;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.tech-row__head .tech-row__top {
    min-width: 0;
    flex: 1 1 auto;
}

.tech-row__photo-toggle {
    display: inline-flex;
    min-width: 3.7rem;
    min-height: 2.75rem;
    flex: 0 0 auto;
    gap: .28rem;
    align-items: center;
    justify-content: center;
    padding: 0 .55rem;
    border: 1px solid var(--agri-border);
    border-radius: 14px;
    background: #fff;
    color: var(--agri-muted);
    font: inherit;
    font-size: .72rem;
    font-weight: 750;
    cursor: pointer;
    transition: border-color 150ms ease, background-color 150ms ease, color 150ms ease;
}

.tech-row__photo-toggle strong {
    display: grid;
    min-width: 1.15rem;
    height: 1.15rem;
    place-items: center;
    border-radius: 999px;
    background: var(--agri-accent);
    color: #fff;
    font-size: .65rem;
    line-height: 1;
}

.tech-row__photo-toggle:hover,
.tech-row__photo-toggle:focus-visible,
.tech-row__photo-toggle.is-expanded {
    border-color: var(--agri-accent);
    background: var(--agri-accent-soft);
    color: var(--agri-accent);
}

.tech-row__photo-toggle.is-uploading .app-icon {
    animation: appStartupSpin .85s linear infinite;
}

.tech-row__photo-toggle.has-failed {
    border-color: color-mix(in srgb, var(--agri-danger) 58%, white);
    background: var(--agri-danger-soft);
    color: var(--agri-danger);
}

.tech-row__optional-photos {
    display: grid;
    gap: .65rem;
    margin-top: .65rem;
    padding: .75rem;
    border: 1px solid var(--agri-border);
    border-radius: 16px;
    background: color-mix(in srgb, var(--agri-accent-soft) 42%, #fff);
}

.tech-row__optional-photos-copy {
    display: flex;
    gap: .5rem;
    align-items: baseline;
    justify-content: space-between;
}

.tech-row__optional-photos-copy strong {
    color: var(--agri-ink);
    font-size: .86rem;
}

.tech-row__optional-photos-copy small {
    color: var(--agri-muted);
    font-size: .75rem;
}

.tech-row__name {
    flex: 1 1 auto;
    min-width: 0;
    color: var(--agri-ink);
    font-size: .98rem;
    font-weight: 650;
    line-height: 1.3;
}

.tech-row__badges {
    display: inline-flex;
    flex: 0 0 auto;
    gap: .3rem;
    align-items: center;
}

.tech-badge {
    display: inline-flex;
    gap: .22rem;
    align-items: center;
    padding: .16rem .45rem;
    border-radius: 999px;
    background: var(--agri-subtle);
    color: var(--agri-muted);
    font-size: .74rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.tech-badge--incomplete {
    background: var(--status-skip-soft);
    color: var(--status-skip);
}

/* Amberen attentiebadge (bandfoto ontbreekt): waarschuwen, niet blokkeren-rood */
.tech-badge--warning {
    background: var(--agri-warning-soft);
    color: var(--agri-warning);
}

/* Item-highlight bij terugkeer uit het detail (1,5s) */
/* Merkenkiezer in de banden-sheet: native select zodat iOS het keuzewiel en Android de
   eigen keuzelijst toont. Eigen chevron omdat appearance:none de standaardpijl weghaalt
   (nodig om de insp-input-opmaak te laten gelden). */
.tech-brandselect {
    padding-right: 2.5rem;
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23102A26' stroke-width='2.15' stroke-linecap='round' stroke-linejoin='round'><path d='m6 9 6 6 6-6'/></svg>");
    background-repeat: no-repeat;
    background-position: right .85rem center;
    background-size: 18px 18px;
}

/* De 'Bandfoto ontbreekt'-badge is een knop (opent sheet + camera in één beweging) */
button.tech-badge {
    border: 0;
    font: inherit;
    font-size: .74rem;
    font-weight: 700;
    cursor: pointer;
}

/* Snelkeuze-rails voor de bandmaten (legacy-waarden): horizontaal scrollbaar, actieve maat gemarkeerd */
.tech-sizerail {
    display: flex;
    gap: .5rem;
    align-items: center;
    margin-top: .45rem;
    min-width: 0;
}

.tech-sizerail__label {
    flex: 0 0 4.2rem;
    color: var(--agri-muted);
    font-size: .8rem;
    font-weight: 700;
}

.tech-sizerail__chips {
    display: flex;
    flex: 1 1 auto;
    gap: .4rem;
    min-width: 0;
    padding: .15rem 0;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}

.tech-sizerail__chips::-webkit-scrollbar {
    display: none;
}

.tech-sizechip {
    flex: 0 0 auto;
    min-width: 3rem;
    min-height: 2.3rem;
    padding: 0 .55rem;
    border: 1px solid var(--agri-border);
    border-radius: 999px;
    background: var(--agri-panel);
    color: var(--agri-ink);
    font: inherit;
    font-size: .88rem;
    font-weight: 650;
    font-variant-numeric: tabular-nums;
    cursor: pointer;
    transition: border-color 150ms ease, background-color 150ms ease, color 150ms ease;
}

.tech-sizechip:hover,
.tech-sizechip:focus-visible {
    border-color: var(--agri-accent);
}

.tech-sizechip.is-active {
    border-color: var(--agri-accent);
    background: var(--agri-accent-soft);
    color: var(--agri-accent);
    font-weight: 750;
}

/* Banddetails-sheet: 90% hoog (rekensom als .rdi-detail-sheet: +54px voor de
   rubberband-overhang), zodat merk, maten, rails en het fotoblok grotendeels
   zonder scrollen passen */
.tech-tyre-sheet.insp-drag-sheet {
    max-height: calc(90dvh + 54px);
}

/* 'Alle banden zijn hetzelfde': maten in één keer naar alle posities (profielen niet) */
.tech-allsizes {
    display: flex;
    gap: 1rem;
    align-items: center;
    justify-content: space-between;
    margin-top: .8rem;
    padding: .7rem .9rem;
    border: 1px solid color-mix(in srgb, var(--agri-ink) 7%, transparent);
    border-radius: 14px;
    background: var(--agri-subtle);
}

.tech-allsizes__copy {
    display: grid;
    gap: .12rem;
}

.tech-allsizes__copy strong {
    font-size: .95rem;
    font-weight: 650;
}

.tech-allsizes__copy small {
    color: var(--agri-muted);
    font-size: .8rem;
    font-weight: 550;
    line-height: 1.3;
}

/* Rood verplicht-sterretje in sheet-labels (zelfde signaal als .drow__req in het entry-dossier) */
.tech-req {
    color: var(--agri-danger);
    font-style: normal;
    font-weight: 750;
}

/* Bandfoto-blok: verplicht bij vervanging, dus een eigen omlijnd blok in plaats van een
   los fotorijtje onderaan; zolang de foto ontbreekt kleurt het blok waarschuwend amber */
.tech-photo-block {
    margin-top: .9rem;
    padding: .75rem .9rem .9rem;
    border: 1px solid color-mix(in srgb, var(--agri-ink) 7%, transparent);
    border-radius: 14px;
    background: var(--agri-subtle);
}

.tech-photo-block--missing {
    border-color: color-mix(in srgb, var(--agri-warning) 38%, transparent);
    background: var(--agri-warning-soft);
}

.tech-photo-block__hint {
    display: flex;
    gap: .4rem;
    align-items: center;
    margin: .15rem 0 .55rem;
    color: var(--agri-warning);
    font-size: .88rem;
    font-weight: 650;
    line-height: 1.3;
}

/* Beoordeeld maar onvolledig: hetzelfde lichtrode signaal als de hoofdstukkaarten.
   Onbeoordeelde rijen krijgen deze klasse bewust niet en blijven wit. */
.tech-row--incomplete {
    padding-right: .6rem;
    padding-left: .6rem;
    margin-inline: -.6rem;
    border-bottom-color: color-mix(in srgb, var(--agri-danger) 22%, var(--agri-border));
    background: var(--agri-danger-soft);
}

.tech-row--flash {
    animation: techRowFlash 1.5s ease-out both;
}

@keyframes techRowFlash {
    0% { background: var(--agri-accent-soft); box-shadow: inset 3px 0 0 var(--agri-accent); }
    70% { background: var(--agri-accent-soft); }
    100% { background: transparent; box-shadow: none; }
}

/* De 4-staten-triage: n.v.t. | goed | toekomstig | probleem — volgorde en kleuren
   overal identiek (positie codeert betekenis; kleur + icoon + label, nooit kleur alleen) */
.tech-seg {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: .35rem;
}

.tech-seg--three {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.tech-seg--measure {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.tech-seg__btn {
    display: flex;
    flex-direction: column;
    gap: .18rem;
    align-items: center;
    justify-content: center;
    min-height: 3rem;
    padding: .35rem .2rem;
    border: 1px solid var(--agri-border);
    border-radius: 12px;
    background: var(--agri-panel);
    color: var(--agri-muted);
    font: inherit;
    font-size: .72rem;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    transition: background-color 150ms ease, border-color 150ms ease, color 150ms ease;
}

.tech-seg__btn:disabled {
    cursor: default;
    opacity: .75;
}

.tech-seg__btn:not(:disabled):hover,
.tech-seg__btn:not(:disabled):focus-visible {
    border-color: var(--agri-accent);
}

/* Alleen het gekozen segment krijgt vulkleur */
.tech-seg__btn--nvt.is-active {
    border-color: color-mix(in srgb, var(--agri-ink) 55%, #fff);
    background: color-mix(in srgb, var(--agri-ink) 55%, #fff);
    color: #fff;
}

.tech-seg__btn--ok.is-active {
    border-color: var(--status-done);
    background: var(--status-done);
    color: #fff;
}

.tech-seg__btn--soon.is-active {
    border-color: var(--status-todo);
    background: var(--status-todo);
    color: #fff;
}

.tech-seg__btn--problem.is-active {
    border-color: var(--status-skip);
    background: var(--status-skip);
    color: #fff;
}

/* Seizoens- en meet-segmenten: horizontale knoppen met iets grotere tekst */
.tech-seg--season .tech-seg__btn,
.tech-seg--measure .tech-seg__btn {
    flex-direction: row;
    gap: .35rem;
    min-height: 2.9rem;
    font-size: .8rem;
}

.tech-seg__btn.is-season {
    border-color: var(--agri-accent);
    background: var(--agri-accent);
    color: #fff;
}

/* --- Rest goedkeuren: bewuste bulkactie, geen stille default --- */
.tech-bulk {
    display: flex;
    gap: .45rem;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 3rem;
    margin-top: 1rem;
    border: 1.5px dashed color-mix(in srgb, var(--status-done) 55%, var(--agri-border));
    border-radius: 14px;
    background: var(--status-done-soft);
    color: var(--status-done);
    font: inherit;
    font-size: .95rem;
    font-weight: 700;
    cursor: pointer;
}

.tech-bulk:disabled {
    opacity: .6;
    cursor: default;
}

/* --- Scherm 4: detailkop met back-chevron en de wisselbare status-pill --- */
.tech-dethead {
    display: flex;
    gap: .5rem;
    align-items: center;
    padding: .55rem clamp(1rem, 4.5vw, 1.6rem);
    border-bottom: 1px solid var(--agri-border);
    background: var(--agri-panel);
}

/* Instructievak boven het eerste opmerking-veld: de volledige onderdeel-omschrijving
   in een informatief getint vlak (thematokens, dus ook goed in het donkere thema) */
.tech-instructie {
    display: flex;
    gap: .6rem;
    align-items: flex-start;
    padding: .8rem .95rem;
    border: 1px solid color-mix(in srgb, var(--agri-info) 30%, transparent);
    border-radius: 16px;
    background: color-mix(in srgb, var(--agri-info) 10%, var(--agri-panel));
    color: color-mix(in srgb, var(--agri-info) 80%, var(--agri-ink));
}

.tech-instructie .app-icon {
    flex: 0 0 auto;
    margin-top: .1rem;
}

.tech-instructie p {
    margin: 0;
    font-size: .95rem;
    font-weight: 600;
    line-height: 1.45;
}

.tech-dethead__copy {
    display: grid;
    flex: 1 1 auto;
    gap: .05rem;
    min-width: 0;
}

.tech-dethead__copy strong {
    color: var(--agri-ink);
    font-size: 1rem;
    font-weight: 750;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tech-dethead__copy span {
    color: var(--agri-muted);
    font-size: .78rem;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tech-pill {
    display: inline-flex;
    flex: 0 0 auto;
    gap: .25rem;
    padding: .2rem;
    border: 1px solid var(--agri-border);
    border-radius: 999px;
    background: var(--agri-subtle);
}

.tech-pill__btn {
    display: inline-flex;
    gap: .3rem;
    align-items: center;
    min-height: 2.2rem;
    padding: 0 .6rem;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: var(--agri-muted);
    font: inherit;
    font-size: .78rem;
    font-weight: 750;
    cursor: pointer;
    transition: background-color 150ms ease, color 150ms ease;
}

.tech-pill__btn:disabled {
    cursor: default;
}

.tech-pill__btn--soon.is-active {
    background: var(--status-todo);
    color: #fff;
}

.tech-pill__btn--problem.is-active {
    background: var(--status-skip);
    color: #fff;
}

/* Smalle schermen: pill zonder tekstlabels (iconen + kleur blijven) */
@media (max-width: 430px) {
    .tech-pill__btn span {
        display: none;
    }

    .tech-pill__btn {
        padding: 0 .55rem;
    }
}

/* --- Detail-kaarten (per volgnummer) --- */
.tech-card {
    display: grid;
    gap: .55rem;
    margin-bottom: .9rem;
    padding: .9rem;
    border: 1px solid var(--agri-border);
    border-radius: 16px;
    background: var(--agri-panel);
}

.tech-card__head {
    display: flex;
    gap: .5rem;
    align-items: center;
    justify-content: space-between;
}

.tech-card__head h3 {
    margin: 0;
    color: var(--agri-ink);
    font-size: .95rem;
    font-weight: 750;
}

.tech-card__title {
    margin: 0 0 .3rem;
    color: var(--agri-ink);
    font-size: 1rem;
    font-weight: 750;
}

.tech-card__delete {
    display: grid;
    flex: 0 0 auto;
    place-items: center;
    width: 2.3rem;
    height: 2.3rem;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: var(--agri-danger);
    cursor: pointer;
    transition: background-color 150ms ease;
}

.tech-card__delete:hover,
.tech-card__delete:focus-visible {
    background: var(--agri-danger-soft);
}

/* Tikbare chip met de geconfigureerde hersteltekst: vult het opmerkingveld */
.tech-herstelchip {
    display: inline-flex;
    gap: .4rem;
    align-items: center;
    justify-self: start;
    max-width: 100%;
    padding: .45rem .75rem;
    border: 1px dashed color-mix(in srgb, var(--agri-accent) 55%, var(--agri-border));
    border-radius: 999px;
    background: var(--agri-accent-soft);
    color: var(--agri-tertiary);
    font: inherit;
    font-size: .85rem;
    font-weight: 650;
    text-align: left;
    cursor: pointer;
    transition: border-color 150ms ease;
}

.tech-herstelchip:hover,
.tech-herstelchip:focus-visible {
    border-color: var(--agri-accent);
}

.tech-herstelchip span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tech-repaired {
    display: flex;
    gap: .7rem;
    align-items: center;
    padding: .45rem 0;
}

.tech-repaired__copy {
    display: grid;
    flex: 1 1 auto;
    gap: .05rem;
    min-width: 0;
}

.tech-repaired__copy strong {
    color: var(--agri-ink);
    font-size: .95rem;
    font-weight: 700;
}

.tech-repaired__copy small {
    color: var(--agri-muted);
    font-size: .78rem;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Compacte ontbreekt-checklist (Reden vereist, Minimaal 1 foto, ...) */
.tech-missing {
    display: grid;
    gap: .3rem;
    margin: 0;
    padding: .6rem .75rem;
    border-radius: 12px;
    background: var(--status-skip-soft);
    color: var(--status-skip);
    font-size: .84rem;
    font-weight: 650;
    list-style: none;
}

.tech-missing li {
    display: flex;
    gap: .4rem;
    align-items: center;
}

.tech-add-extra {
    width: 100%;
}

.tech-delete-line {
    display: flex;
    gap: .45rem;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 2.9rem;
    margin-top: .2rem;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: var(--agri-danger);
    font: inherit;
    font-size: .92rem;
    font-weight: 650;
    cursor: pointer;
    transition: background-color 150ms ease;
}

.tech-delete-line:hover,
.tech-delete-line:focus-visible {
    background: var(--agri-danger-soft);
}

/* --- Fotorijen: thumbnails met verwijder-knopje, upload-tegels en de Foto-tegel --- */
.tech-photos {
    display: flex;
    flex-wrap: wrap;
    gap: .55rem;
}

.tech-photo {
    position: relative;
    width: 4.6rem;
    height: 4.6rem;
    border-radius: 12px;
}

.tech-photo__open {
    display: block;
    width: 100%;
    height: 100%;
    padding: 0;
    border: 1px solid var(--agri-border);
    border-radius: 12px;
    background: var(--agri-subtle);
    overflow: hidden;
    cursor: pointer;
}

.tech-photo__open img,
.tech-photo > img {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 12px;
    object-fit: cover;
}

.tech-photo__broken {
    display: grid;
    place-items: center;
    width: 100%;
    height: 100%;
    color: var(--agri-muted);
}

.tech-photo__delete {
    position: absolute;
    top: -.4rem;
    right: -.4rem;
    z-index: 2;
    display: grid;
    place-items: center;
    width: 1.55rem;
    height: 1.55rem;
    border: 2px solid var(--agri-panel);
    border-radius: 999px;
    background: var(--agri-danger);
    color: #fff;
    cursor: pointer;
}

.tech-photo--uploading img,
.tech-photo--failed img {
    opacity: .55;
}

.tech-photo__busy {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
}

.tech-photo__retry {
    position: absolute;
    inset: 0;
    display: grid;
    gap: .1rem;
    place-content: center;
    justify-items: center;
    border: 1px solid var(--agri-danger);
    border-radius: 12px;
    background: color-mix(in srgb, var(--agri-danger-soft) 82%, transparent);
    color: var(--agri-danger);
    font: inherit;
    font-size: .68rem;
    font-weight: 750;
    cursor: pointer;
}

.tech-photo-add {
    display: grid;
    gap: .15rem;
    place-content: center;
    justify-items: center;
    width: 4.6rem;
    height: 4.6rem;
    border: 1.5px dashed var(--agri-border);
    border-radius: 12px;
    background: var(--agri-subtle);
    color: var(--agri-muted);
    font: inherit;
    font-size: .72rem;
    font-weight: 700;
    cursor: pointer;
    transition: border-color 150ms ease, color 150ms ease;
}

.tech-photo-add:hover,
.tech-photo-add:focus-visible {
    border-color: var(--agri-accent);
    color: var(--agri-accent);
}

/* --- Scherm 5: bandkaarten met kleurdrempels op de profieldiepte --- */
.tech-tyre {
    display: grid;
    gap: .65rem;
    margin-bottom: .8rem;
    padding: .85rem;
    border: 1px solid var(--agri-border);
    border-radius: 16px;
    background: var(--agri-panel);
    transition: border-color 200ms ease, background-color 200ms ease;
}

.tech-tyre.tech-mm--danger {
    border-color: color-mix(in srgb, var(--status-skip) 55%, var(--agri-border));
    background: color-mix(in srgb, var(--status-skip-soft) 45%, var(--agri-panel));
}

.tech-tyre.tech-mm--warn {
    border-color: color-mix(in srgb, var(--status-busy) 45%, var(--agri-border));
    background: color-mix(in srgb, var(--status-busy-soft) 45%, var(--agri-panel));
}

.tech-tyre__head {
    display: flex;
    gap: .55rem;
    align-items: center;
}

.tech-tyre__head strong {
    flex: 1 1 auto;
    min-width: 0;
    color: var(--agri-ink);
    font-size: 1rem;
    font-weight: 750;
}

.tech-tyre__pos {
    display: grid;
    flex: 0 0 auto;
    place-items: center;
    width: 2rem;
    height: 2rem;
    border-radius: 8px;
    background: var(--agri-teal);
    color: #fff;
    font-size: .8rem;
    font-weight: 800;
}

.tech-mm {
    display: grid;
    gap: .25rem;
}

.tech-mm__input {
    display: inline-flex;
    gap: .45rem;
    align-items: center;
}

.tech-mm__input input {
    width: 6.2rem;
    min-height: 3rem;
    padding: .3rem .7rem;
    border: 1px solid var(--agri-border);
    border-radius: 12px;
    background: var(--agri-panel);
    color: var(--agri-ink);
    font: inherit;
    font-size: 1.35rem;
    font-weight: 750;
    font-variant-numeric: tabular-nums;
    text-align: center;
}

.tech-mm__input input:focus-visible {
    border-color: var(--agri-accent);
    outline: 2px solid var(--agri-accent-soft);
}

.tech-mm__input span {
    color: var(--agri-muted);
    font-size: .9rem;
    font-weight: 700;
}

.tech-mm__input--wide input {
    width: 9rem;
}

.tech-tyre.tech-mm--danger .tech-mm__input input {
    border-color: var(--status-skip);
    color: var(--status-skip);
}

.tech-tyre.tech-mm--warn .tech-mm__input input {
    border-color: var(--status-busy);
    color: var(--status-busy);
}

.tech-tyre__replace {
    padding: .2rem 0 0;
}

.tech-linkbtn {
    flex: 0 0 auto;
    padding: .4rem .7rem;
    border: 1px solid var(--agri-border);
    border-radius: 999px;
    background: var(--agri-panel);
    color: var(--agri-tertiary);
    font: inherit;
    font-size: .82rem;
    font-weight: 700;
    cursor: pointer;
    transition: border-color 150ms ease, background-color 150ms ease;
}

.tech-linkbtn:hover,
.tech-linkbtn:focus-visible {
    border-color: var(--agri-accent);
    background: var(--agri-accent-soft);
}

.tech-size-row {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .5rem;
}

/* --- Scherm 6: remmen --- */
.tech-brake {
    display: flex;
    gap: .7rem;
    align-items: center;
    margin-bottom: .65rem;
    padding: .75rem .85rem;
    border: 1px solid var(--agri-border);
    border-radius: 16px;
    background: var(--agri-panel);
}

.tech-brake__field {
    display: grid;
    flex: 1 1 auto;
    gap: .25rem;
    min-width: 0;
}

.tech-brake__replace {
    display: grid;
    flex: 0 0 auto;
    gap: .3rem;
    justify-items: center;
    color: var(--agri-muted);
    font-size: .74rem;
    font-weight: 700;
}

.tech-measure {
    display: grid;
    gap: .55rem;
    margin: 1rem 0;
    padding: .85rem;
    border: 1px solid var(--agri-border);
    border-radius: 16px;
    background: var(--agri-panel);
}

.tech-measure h3 {
    margin: 0;
    color: var(--agri-ink);
    font-size: 1rem;
    font-weight: 750;
}

/* --- Scherm 7: diversen --- */
.tech-fluid {
    display: flex;
    gap: .6rem;
    align-items: center;
    padding: .4rem 0;
}

.tech-fluid__name {
    flex: 1 1 auto;
    min-width: 0;
    color: var(--agri-ink);
    font-size: .92rem;
    font-weight: 650;
}

.tech-fluid__stepper {
    flex: 0 0 auto;
}

.tech-fluid__stepper input {
    width: 3.6rem;
}

.tech-fluid__unit {
    flex: 0 0 auto;
    width: 2.2rem;
    color: var(--agri-muted);
    font-size: .8rem;
    font-weight: 650;
}

.tech-required {
    color: var(--status-skip);
    font-style: normal;
}

.tech-empty-hint {
    margin: .2rem 0;
    color: var(--agri-muted);
    font-size: .9rem;
}

.tech-row--meerwerk {
    padding-top: .55rem;
}

/* --- Scherm 8: review & afronden --- */
.tech-openpunten {
    display: grid;
    gap: .45rem;
    margin-bottom: 1rem;
    padding: .8rem;
    border: 1px solid color-mix(in srgb, var(--status-skip) 40%, var(--agri-border));
    border-radius: 16px;
    background: var(--status-skip-soft);
}

.tech-openpunten h3 {
    margin: 0 0 .2rem;
    color: var(--status-skip);
    font-size: .95rem;
    font-weight: 750;
}

.tech-openpunt {
    display: flex;
    gap: .55rem;
    align-items: center;
    width: 100%;
    min-height: 2.9rem;
    padding: .45rem .55rem;
    border: 0;
    border-radius: 12px;
    background: var(--agri-panel);
    color: var(--status-skip);
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.tech-openpunt__copy {
    display: grid;
    flex: 1 1 auto;
    gap: .05rem;
    min-width: 0;
}

.tech-openpunt__copy strong {
    color: var(--agri-ink);
    font-size: .9rem;
    font-weight: 700;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tech-openpunt__copy small {
    color: var(--status-skip);
    font-size: .78rem;
    font-weight: 650;
}

.tech-collect,
.tech-summary {
    display: grid;
    gap: .45rem;
    margin-bottom: 1rem;
}

.tech-collect h3,
.tech-summary h3 {
    margin: .2rem 0;
    color: var(--agri-ink);
    font-size: 1rem;
    font-weight: 750;
}

/* Subkop binnen het verzamelblok: de automatische constateringen (banden, metingen, vloeistoffen) */
.tech-collect__sub {
    margin-top: .9rem;
    font-size: .88rem;
    color: var(--agri-muted);
}

.tech-finding:disabled {
    opacity: .75;
    pointer-events: none;
}

.tech-finding {
    display: flex;
    gap: .65rem;
    align-items: center;
    width: 100%;
    padding: .55rem;
    border: 1px solid var(--agri-border);
    border-radius: 14px;
    background: var(--agri-panel);
    color: var(--agri-muted);
    font: inherit;
    text-align: left;
    cursor: pointer;
    transition: border-color 150ms ease, background-color 150ms ease;
}

.tech-finding:hover,
.tech-finding:focus-visible {
    border-color: var(--agri-accent);
    background: var(--agri-accent-soft);
}

.tech-finding__thumb {
    display: grid;
    flex: 0 0 auto;
    place-items: center;
    width: 3rem;
    height: 3rem;
    border-radius: 10px;
    overflow: hidden;
}

.tech-finding__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.tech-finding__thumb--problem {
    background: var(--status-skip-soft);
    color: var(--status-skip);
}

.tech-finding__thumb--future {
    background: var(--status-todo-soft);
    color: var(--status-todo);
}

.tech-finding__copy {
    display: grid;
    flex: 1 1 auto;
    gap: .05rem;
    min-width: 0;
}

.tech-finding__copy strong {
    color: var(--agri-ink);
    font-size: .92rem;
    font-weight: 700;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tech-finding__copy small {
    color: var(--agri-muted);
    font-size: .78rem;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tech-summary__row {
    display: flex;
    gap: .6rem;
    align-items: center;
    width: 100%;
    min-height: 3rem;
    padding: .5rem .55rem;
    border: 1px solid var(--agri-border);
    border-radius: 14px;
    background: var(--agri-panel);
    font: inherit;
    text-align: left;
    cursor: pointer;
    transition: border-color 150ms ease, background-color 150ms ease;
}

.tech-summary__row:hover,
.tech-summary__row:focus-visible {
    border-color: var(--agri-accent);
    background: var(--agri-accent-soft);
}

.tech-summary__status {
    display: grid;
    flex: 0 0 auto;
    place-items: center;
    width: 1.9rem;
    height: 1.9rem;
    border-radius: 999px;
}

.tech-summary__status.is-done {
    background: var(--status-done-soft);
    color: var(--status-done);
}

.tech-summary__status.is-open {
    background: var(--status-busy-soft);
    color: var(--status-busy);
}

.tech-summary__name {
    flex: 1 1 auto;
    min-width: 0;
    color: var(--agri-ink);
    font-size: .95rem;
    font-weight: 700;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tech-summary__meta {
    flex: 0 0 auto;
    color: var(--agri-muted);
    font-size: .8rem;
    font-weight: 650;
}

/* --- Sheet-inhoud: stop-keuze, hoofdstuk-springer en hints --- */
.tech-sheet-hint {
    margin: 0 0 .4rem;
    color: var(--agri-muted);
    font-size: .92rem;
    line-height: 1.4;
}

.tech-stop-option__copy {
    display: grid;
    flex: 1 1 auto;
    gap: .1rem;
    min-width: 0;
    text-align: left;
}

.tech-stop-option__copy strong {
    color: var(--agri-ink);
    font-size: .95rem;
    font-weight: 700;
}

.tech-stop-option__copy small {
    color: var(--agri-muted);
    font-size: .8rem;
    font-weight: 600;
}

.tech-jump {
    justify-content: flex-start;
}

.tech-jump.is-active {
    border-color: var(--agri-accent);
    background: var(--agri-accent-soft);
}

.tech-jump__status {
    display: grid;
    flex: 0 0 auto;
    place-items: center;
    width: 1.9rem;
    height: 1.9rem;
    border-radius: 999px;
    background: var(--agri-subtle);
    color: var(--agri-muted);
    font-size: .85rem;
    font-weight: 750;
    font-variant-numeric: tabular-nums;
}

.tech-jump__status.is-done {
    background: var(--status-done-soft);
    color: var(--status-done);
}

.tech-jump__copy {
    display: grid;
    flex: 1 1 auto;
    gap: .05rem;
    min-width: 0;
    text-align: left;
}

.tech-jump__copy span {
    color: var(--agri-ink);
    font-weight: 700;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tech-jump__copy small {
    color: var(--agri-muted);
    font-size: .78rem;
    font-weight: 600;
}

/* --- Reduced motion: pushes worden een korte crossfade, flitsen en transities uit --- */
@media (prefers-reduced-motion: reduce) {
    .technical-order-panel.fullscreen-flow-panel,
    .tech-chapcard,
    .tech-seg__btn,
    .tech-pill__btn,
    .tech-primary,
    .tech-navbtn,
    .tech-photo-add,
    .tech-herstelchip,
    .tech-linkbtn,
    .tech-finding,
    .tech-summary__row,
    .tech-tyre,
    .tech-progress__bar,
    .tech-chaphead__icon {
        transition: none;
        animation: none;
    }

    .tech-stage--fwd .tech-view--entering,
    .tech-stage--back .tech-view--entering {
        box-shadow: none;
        animation: techCrossfadeIn 140ms ease both;
    }

    .tech-stage--fwd .tech-view--leaving,
    .tech-stage--back .tech-view--leaving {
        box-shadow: none;
        animation: techCrossfadeOut 140ms ease both;
    }

    .tech-row--flash {
        animation: none;
        background: var(--agri-accent-soft);
    }
}

@keyframes techCrossfadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes techCrossfadeOut {
    from { opacity: 1; }
    to { opacity: 0; }
}

/* Contractdetails liggen als tweede, relation-scoped sheet boven de artikelsheet (z-index 60).
   Dezelfde InspectionSheet-mechanica levert inschuiven, rubberbanding en swipe-to-dismiss. */
.order-contract-details-backdrop {
    z-index: 70;
}

.order-contract-details-sheet.insp-drag-sheet {
    z-index: 71;
    height: calc(90dvh + 54px);
    max-height: calc(90dvh + 54px);
}

.order-contract-details__header {
    display: flex;
    flex: 0 0 auto;
    gap: 1rem;
    align-items: center;
    justify-content: space-between;
    padding: .1rem .15rem .35rem;
}

.order-contract-details__header div {
    min-width: 0;
}

.order-contract-details__header p {
    margin: 0 0 .15rem;
    color: var(--agri-accent);
    font-size: .78rem;
    font-weight: 750;
}

.order-contract-details__header h2 {
    margin: 0;
    overflow: hidden;
    color: var(--agri-ink);
    font-size: 1.45rem;
    line-height: 1.1;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.order-contract-details__header button {
    display: grid;
    flex: 0 0 auto;
    width: 2.8rem;
    height: 2.8rem;
    place-items: center;
    border: 0;
    border-radius: 999px;
    background: var(--agri-subtle);
    color: var(--agri-ink);
}

.insp-sheet .order-contract-details__scroll {
    display: grid;
    /* Elke sectie op zijn eigen contenthoogte: zonder dit knijpt het grid de
       kaarten samen tot alles 'past' — dan kapt overflow:hidden de rijen af
       en valt er niets meer te scrollen */
    grid-auto-rows: max-content;
    align-content: start;
    gap: .85rem;
    padding: .15rem .05rem .5rem;
}

.order-contract-details__state {
    display: grid;
    min-height: 15rem;
    place-items: center;
    align-content: center;
    gap: .55rem;
    padding: 1.5rem;
    color: var(--agri-muted);
    text-align: center;
}

.order-contract-details__state strong {
    color: var(--agri-ink);
}

.order-contract-details__state--error {
    color: var(--agri-danger);
}

.order-contract-details__state--error span {
    max-width: 20rem;
    color: var(--agri-muted);
}

.order-contract-details__state button {
    min-height: 2.8rem;
    margin-top: .3rem;
    padding: 0 1.1rem;
    border: 0;
    border-radius: 999px;
    background: var(--agri-accent-soft);
    color: var(--agri-accent);
    font: inherit;
    font-weight: 700;
}

.order-contract-summary {
    display: grid;
    gap: .65rem;
    padding: 1rem 1.1rem;
    border: 1px solid color-mix(in srgb, var(--agri-accent) 17%, transparent);
    border-radius: 22px;
    background: linear-gradient(145deg, var(--agri-accent-soft), #fff 82%);
}

.order-contract-summary div {
    display: flex;
    gap: .75rem;
    align-items: baseline;
    justify-content: space-between;
}

.order-contract-summary span {
    color: var(--agri-muted);
    font-size: .9rem;
    font-weight: 600;
}

.order-contract-summary strong {
    color: var(--agri-tertiary);
    font-size: 1.55rem;
    line-height: 1;
}

.order-contract-summary p {
    margin: 0;
    color: var(--agri-ink);
    font-size: 1rem;
    font-weight: 650;
    line-height: 1.35;
}

.order-contract-details__section {
    overflow: hidden;
    border: 1px solid rgba(16, 42, 38, .08);
    border-radius: 22px;
    background: #fff;
}

.order-contract-details__section > header {
    display: flex;
    gap: .65rem;
    align-items: center;
    padding: .8rem 1rem;
    border-bottom: 1px solid rgba(16, 42, 38, .06);
}

.order-contract-details__section > header > span {
    display: grid;
    width: 2rem;
    height: 2rem;
    place-items: center;
    border-radius: 10px;
    background: var(--agri-accent-soft);
    color: var(--agri-accent);
}

.order-contract-details__section h3 {
    margin: 0;
    color: var(--agri-ink);
    font-size: .98rem;
    font-weight: 750;
}

.order-contract-details__section dl {
    margin: 0;
}

.order-contract-details__row {
    display: grid;
    grid-template-columns: minmax(7.5rem, .8fr) minmax(0, 1.2fr);
    gap: .8rem;
    padding: .78rem 1rem;
}

.order-contract-details__row + .order-contract-details__row,
.order-contract-details__row + .order-contract-details__note,
.order-contract-details__note + .order-contract-details__note {
    border-top: 1px solid rgba(16, 42, 38, .06);
}

.order-contract-details__row dt {
    color: var(--agri-muted);
    font-size: .88rem;
    font-weight: 600;
}

.order-contract-details__row dd {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem;
    align-items: center;
    justify-content: flex-end;
    min-width: 0;
    margin: 0;
    color: var(--agri-ink);
    font-size: .92rem;
    font-weight: 700;
    text-align: right;
    overflow-wrap: anywhere;
}

.order-contract-details__badge {
    padding: .18rem .5rem;
    border-radius: 999px;
    background: var(--agri-accent-soft);
    color: var(--agri-accent);
    font-size: .72rem;
    font-weight: 750;
}

.order-contract-details__note {
    padding: .85rem 1rem;
}

.order-contract-details__note strong {
    display: block;
    margin-bottom: .3rem;
    color: var(--agri-muted);
    font-size: .82rem;
}

.order-contract-details__note p {
    margin: 0;
    color: var(--agri-ink);
    line-height: 1.45;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.order-contract-details__close {
    flex: 0 0 auto;
}

/* ============================================================================
   Chauffeursmodule (Ritten-tab)

   Ergonomische uitgangspunten, met bron:
   · tikdoel met handschoen 20 mm ≈ 75 px (MIL-STD-1472F, gevalideerd)
   · tussenruimte doet er niet toe, grootte wel (Colle & Hiszem 2004, Ergonomics 47/13):
     tussen 1 en 3 mm spacing géén meetbaar verschil, dus investeer in de knop zelf
   · knoppen in schermhoeken +50%: daar is de tikprecisie 12 mm tegen 7 mm in het midden
   · contrast ≥ 7:1 voor kg, stuks, silo en status — dit wordt in fel daglicht gelezen
   · statuskleur nooit als enig kanaal: altijd kleur + vorm/icoon + tekst
   ============================================================================ */

.trip-screen {
    /* .screen-page__top is position: fixed en was bedoeld voor de nog lege tabbladen, waar er
       niets onderdoor scrolde. Ritten is het eerste tabblad mét inhoud, dus die houdt zelf
       ruimte. De startwaarde dekt kop + dagwisselaar; TripsScreen.razor.js meet daarna de
       echte hoogte, want de kopzone groeit met de voertuigkiezer en de synchronisatieregel. */
    --trip-top-height: 9.4rem;
    padding-top: calc(var(--trip-top-height) + .35rem);
    padding-bottom: 2rem;
}

/* De matglasband van dit tabblad staat nu in de gedeelde regel .screen-page__top--glass;
   TripsScreen zet die klasse zelf. */

/* Melding als het filter alles heeft weggehaald */
.trip-list__filtered {
    margin: 1.2rem .2rem;
    color: var(--agri-muted);
    text-align: center;
}

/* --- Kalenderknop in de kop: klapt de dagwisselaar in en uit --- */

.trip-day-toggle {
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    width: 3.4rem;
    height: 3.4rem;
    margin-left: -.6rem;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: var(--agri-ink);
    cursor: pointer;
}

.trip-day-toggle.is-open {
    background: var(--agri-subtle);
}

/* Kijk je naar een andere dag, dan blijft dat zichtbaar ook als de wisselaar dicht is —
   anders is het te makkelijk te vergeten dat je naar gisteren staat te kijken. */
.trip-day-toggle--other {
    background: var(--agri-warning-soft);
    color: var(--agri-warning);
}

/* Uitschuiven van de dagwisselaar. De hoogte varieert — de retour-pil verschijnt alleen op een
   andere dag dan vandaag — dus animeren we naar de natuurlijke hoogte in plaats van naar een
   geraden maat.
   Hier stond eerst grid-template-rows 0fr → 1fr. Dat patroon circuleert breed als "animeer naar
   auto", maar het interpoleert niet: gemeten in Chrome 148 springt de hoogte in één frame van 0
   naar vol, ook kaal zonder omringende CSS. calc-size() doet het wél (0 → 70 → 118 → 150).
   Safari kent calc-size nog niet; daar valt hij terug op max-height, zie het @supports-blok. */
.trip-day-wrap {
    height: 0;
    overflow: hidden;
    transition: height 260ms cubic-bezier(.22, .61, .36, 1);
}

.trip-day-wrap.is-open {
    height: calc-size(auto, size);
}

@supports not (height: calc-size(auto, size)) {
    .trip-day-wrap {
        height: auto;
        max-height: 0;
        transition: max-height 260ms cubic-bezier(.22, .61, .36, 1);
    }

    .trip-day-wrap.is-open {
        max-height: 30rem;
    }
}

.trip-day-wrap__inner {
    min-height: 0;
    overflow: hidden;
    opacity: 0;
    /* Iets sneller uit dan in: dichtklappen mag kort aanvoelen, openen mag je zien gebeuren */
    transition: opacity 140ms ease;
}

.trip-day-wrap.is-open .trip-day-wrap__inner {
    opacity: 1;
    transition: opacity 200ms ease 60ms;
}

/* --- Dagwisselaar --- */

.trip-day {
    display: flex;
    flex-direction: column;
    gap: .5rem;
    padding: .35rem .25rem .6rem;
    border-radius: 1.1rem;
    transition: background-color .2s ease, box-shadow .2s ease;
}

/* Tweede van vier signalen dat je niet naar vandaag kijkt (naast het woord, de
   retour-pil en de gedoofde restladingmeter) */
.trip-day--other {
    background: var(--agri-warning-soft);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--agri-warning) 22%, transparent);
}

.trip-day__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
}

.trip-day__arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3.4rem;
    height: 3.4rem;
    flex: 0 0 auto;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: var(--agri-ink);
    cursor: pointer;
}

.trip-day__arrow:active {
    background: var(--agri-subtle);
}

.trip-day__label {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .1rem;
    flex: 1 1 auto;
    min-height: 3.4rem;
    padding: .2rem .5rem;
    border: 0;
    border-radius: .9rem;
    background: transparent;
    cursor: pointer;
}

.trip-day__word {
    font-size: 1.32rem;
    font-weight: 600;
    line-height: 1.15;
    color: var(--agri-ink);
}

.trip-day__date {
    font-size: .88rem;
    font-weight: 500;
    color: var(--agri-muted);
}

.trip-day--other .trip-day__date {
    color: var(--agri-warning);
}

.trip-day__return {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .35rem;
    align-self: center;
    min-height: 2.4rem;
    padding: .35rem 1rem;
    border: 0;
    border-radius: 999px;
    background: var(--agri-warning);
    color: #fff;
    font-size: .88rem;
    font-weight: 600;
    cursor: pointer;
}

/* --- Voertuigkiezer --- */

.trip-vehicles {
    display: flex;
    gap: .5rem;
    margin-top: .55rem;
    overflow-x: auto;
    scrollbar-width: none;
}

.trip-vehicles::-webkit-scrollbar {
    display: none;
}

.trip-vehicle {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    flex: 1 0 auto;
    /* 20 mm handschoendrempel */
    min-height: 4.7rem;
    padding: .55rem .8rem;
    border: 0;
    border-radius: 1rem;
    background: var(--agri-subtle);
    box-shadow: inset 0 0 0 1px var(--agri-border);
    cursor: pointer;
}

.trip-vehicle--active {
    background: var(--agri-accent-soft);
    box-shadow: inset 0 0 0 2px var(--agri-accent);
}

.trip-vehicle__count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.9rem;
    height: 1.9rem;
    padding: 0 .4rem;
    border-radius: 999px;
    background: var(--status-todo);
    color: #fff;
    font-size: .95rem;
    font-weight: 700;
}

.trip-vehicle__count--done {
    background: var(--status-done);
}

/* --- Synchronisatiestand --- */

.trip-sync {
    display: flex;
    align-items: center;
    gap: .5rem;
    width: 100%;
    min-height: 3rem;
    margin-top: .55rem;
    padding: .5rem .8rem;
    border: 0;
    border-radius: .9rem;
    /* Bewust niet grijs: grijs leest als 'uitgeschakeld' terwijl er juist werk wacht */
    background: var(--agri-info-soft);
    color: var(--agri-info);
    font-size: .92rem;
    font-weight: 600;
    text-align: left;
    cursor: pointer;
}

.trip-sync span {
    flex: 1 1 auto;
}

/* --- Restladingmeter --- */

.trip-cargo {
    padding: .9rem 1rem 1rem;
    border-radius: 1.2rem;
    background: var(--agri-panel);
}

/* Historische dag: informatie, geen opdracht */
.trip-cargo--muted {
    opacity: .55;
}

/* Alleen de amber rand, geen slagschaduw meer — die zat er in de basisregel ook niet meer */
.trip-cargo--alert {
    box-shadow: inset 0 0 0 2px var(--agri-warning);
}

/* Het kenteken opent het blok: op het eerste scherm is "in welke wagen zit ik" de vraag,
   niet "hoeveel zit erin". */
.trip-cargo__plate {
    display: flex;
    margin-bottom: .55rem;
}

/* Een kwart kleiner dan de standaard grote plaat: die vulde hier te veel van de kaart.
   Alle maten van .plate--lg × 0,75, zodat de verhoudingen van de plaat kloppen blijven —
   scoped, want elders (zoals het scanscherm) is de grote maat wél de juiste. */
.trip-cargo__plate .plate--lg .plate__nr {
    padding: .34rem .71rem .3rem;
    font-size: 1.29rem;
}

.trip-cargo__plate .plate--lg .plate__eu {
    width: 1.28rem;
    font-size: .53rem;
}

.trip-cargo__bar {
    height: .5rem;
    margin: .6rem 0 .45rem;
    border-radius: 999px;
    background: var(--agri-subtle);
    overflow: hidden;
}

.trip-cargo__bar-fill {
    height: 100%;
    border-radius: 999px;
    background: var(--agri-accent);
    transition: width .3s ease;
}

.trip-cargo__meta {
    margin: 0;
    font-size: .88rem;
    color: var(--agri-muted);
}

.trip-cargo__warning {
    display: flex;
    align-items: flex-start;
    gap: .4rem;
    margin: .55rem 0 0;
    /* Amber: aandacht, geen blokkade. Er kan een goede reden zijn. */
    color: var(--agri-warning);
    font-size: .88rem;
    font-weight: 600;
    line-height: 1.35;
}

/* --- Vrachtkop --- */

.trip-cargo-head {
    position: sticky;
    top: 0;
    z-index: 1;
    margin: 1.1rem 0 .45rem;
    padding: .45rem;
    background: var(--agri-canvas);
    font-size: .84rem;
    font-weight: 600;
}

/* --- Stoprij --- */

.trip-list {
    display: flex;
    flex-direction: column;
    gap: .45rem;
}

.trip-stop-holder {
    border-radius: 1.1rem;
    background: var(--agri-panel);
    box-shadow: inset 0 0 0 1px var(--agri-border);
    overflow: hidden;
}

.trip-stop {
    display: flex;
    align-items: center;
    width: 100%;
    min-width: 0;
}

/* De rij zelf: alles behalve de uitklapknop is één tikdoel, zodat er geen dode zones
   ontstaan. 76 px open. */
.trip-stop__main {
    display: flex;
    align-items: center;
    gap: .75rem;
    flex: 1 1 auto;
    min-width: 0;
    min-height: 4.75rem;
    padding: .6rem .85rem;
    border: 0;
    background: transparent;
    text-align: left;
    cursor: pointer;
}

/* Derde redundante signaal naast icoon en kleur: de hele rij krijgt een tint */
.trip-stop--load {
    background: var(--agri-accent-soft);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--agri-accent) 30%, transparent);
}

.trip-stop--done .trip-stop__main {
    /* 56 px afgerond: hij krimpt en verkleurt maar blijft tot middernacht staan —
       verdwijnt uit je werk, niet uit je dag */
    min-height: 3.5rem;
}

/* Afgerond krijgt hetzelfde groen als overal in de module: zacht accentvlak met een rand van
   30% accent. Daarmee zeggen kleur, vinkje en de kleinere hoogte alle drie hetzelfde.

   De opacity van .62 die hier stond is eruit: over een zacht groen vlak blijft daar zo weinig
   kleur van over dat je het verschil met een open stop niet meer ziet. Het terugtreden gebeurt
   nu via de hoogte (56 px in plaats van 76) en de gedempte tekst. */
.trip-stop--done {
    background: var(--agri-accent-soft);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--agri-accent) 30%, transparent);
}

.trip-stop--busy {
    box-shadow: inset 0 0 0 2px var(--status-todo);
}

/* Wacht nog op de laadkant: gedempt, maar niet uitgeschakeld — tikken mag, want adres,
   telefoon en silo blijven bruikbaar. Alleen de invoer wacht. */
.trip-stop--waiting {
    opacity: .58;
}

/* --- Uitklap: de opbouw van een stop met meerdere producten --- */

/* Eigen tikdoel naast de rij, niet erin: een knop in een knop mag niet, en zo opent
   tikken op de chevron niet ook de stop. Idee overgenomen van de prijsopbouw bij de
   factuurregels (.rdi-detail-row--action). */
.trip-stop__expand {
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    align-self: stretch;
    width: 3rem;
    border: 0;
    background: transparent;
    color: color-mix(in srgb, var(--agri-ink) 34%, white);
    cursor: pointer;
}

.trip-stop__expand .app-icon {
    transition: transform 160ms ease;
}

/* De iconenset kent geen chevron-down; roteren houdt het bij één icoon */
.trip-stop__expand.is-open .app-icon {
    transform: rotate(90deg);
}

.trip-stop__lines {
    display: grid;
    gap: .5rem;
    margin: 0 .85rem;
    padding: .7rem 0 .85rem;
    border-top: 1px solid color-mix(in srgb, var(--agri-ink) 8%, transparent);
}

.trip-stop__line {
    display: flex;
    gap: 1rem;
    align-items: baseline;
    justify-content: space-between;
    font-size: .9rem;
}

.trip-stop__line-name {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.trip-stop__line-value {
    display: flex;
    gap: .5rem;
    flex-shrink: 0;
    align-items: baseline;
    color: var(--agri-ink);
    font-weight: 650;
    font-variant-numeric: tabular-nums;
}

.trip-stop__line-silo {
    color: var(--agri-muted);
    font-weight: 600;
}

.trip-stop__marker {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.6rem;
    height: 2.6rem;
    flex: 0 0 auto;
    border-radius: 999px;
    background: var(--agri-subtle);
    color: var(--agri-ink);
}

.trip-stop--load .trip-stop__marker {
    background: var(--agri-accent);
    color: #fff;
}

/* Dichte accentcirkel met wit cijfer, net als de laadstop en de afgeronde kaarten in het
   stopscherm. Het zachte --status-done-soft dat hier stond viel weg tegen het nieuwe groene
   vlak eronder — twee bijna gelijke tinten over elkaar. */
.trip-stop--done .trip-stop__marker {
    background: var(--agri-accent);
    color: #fff;
}

.trip-stop__nr {
    font-size: 1.05rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.trip-stop__body {
    display: flex;
    flex-direction: column;
    gap: .12rem;
    flex: 1 1 auto;
    min-width: 0;
}

.trip-stop__title {
    display: flex;
    align-items: baseline;
    gap: .4rem;
    min-width: 0;
}

.trip-stop__title strong {
    font-size: 1.02rem;
    font-weight: 600;
    color: var(--agri-ink);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.trip-stop__place {
    flex: 0 0 auto;
    font-size: .88rem;
    color: var(--agri-muted);
}

.trip-stop__detail {
    font-size: .92rem;
    /* Zelfde contrastklasse als de naam: kg en silo zijn geen bijzaak */
    color: var(--agri-ink);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.trip-stop__alert {
    display: flex;
    align-items: center;
    gap: .3rem;
    margin-top: .1rem;
    color: var(--agri-warning);
    font-size: .84rem;
    font-weight: 600;
}

.trip-stop__alert span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.trip-stop__status {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    flex: 0 0 auto;
    color: var(--status-done);
}

.trip-stop__dot {
    width: .8rem;
    height: .8rem;
    border-radius: 999px;
}

.trip-stop__dot--busy {
    background: var(--status-todo);
}

.trip-stop__dot--deviation {
    background: var(--agri-warning);
}

/* --- Skeleton --- */

.trip-stop--skeleton {
    cursor: default;
}

.trip-skeleton {
    display: block;
    border-radius: .6rem;
    background: linear-gradient(90deg, var(--agri-subtle) 25%, var(--agri-border) 37%, var(--agri-subtle) 63%);
    background-size: 400% 100%;
    animation: trip-skeleton-shimmer 1.4s ease infinite;
}

.trip-skeleton--marker {
    width: 2.6rem;
    height: 2.6rem;
    flex: 0 0 auto;
    border-radius: 999px;
}

.trip-skeleton--title {
    width: 62%;
    height: 1rem;
    margin-bottom: .4rem;
}

.trip-skeleton--detail {
    width: 40%;
    height: .85rem;
}

@keyframes trip-skeleton-shimmer {
    0% { background-position: 100% 50%; }
    100% { background-position: 0 50%; }
}

/* --- Overdracht naar de andere wagen --- */

.trip-handover {
    margin-top: 1.2rem;
    padding: 1rem;
    border-radius: 1.2rem;
    background: var(--agri-panel);
    box-shadow: var(--agri-shadow);
}

.trip-handover__done {
    display: flex;
    align-items: center;
    gap: .45rem;
    margin: 0 0 .35rem;
    color: var(--status-done);
    font-weight: 600;
}

.trip-handover__rest {
    margin: 0 0 .8rem;
    color: var(--agri-ink);
    font-size: .95rem;
}

.trip-handover__button {
    width: 100%;
    /* 20 mm: dit is een primaire actie met handschoenen aan */
    min-height: 4.7rem;
    border: 0;
    border-radius: 1rem;
    background: var(--agri-accent);
    color: #fff;
    font-size: 1.05rem;
    font-weight: 600;
    cursor: pointer;
}

/* --- Stopscherm: kader --- */

/* Boven de vaste kopzone van het rittenoverzicht (z-16), maar ONDER de tabbalk (z-20): de
   dagwisselaar en de avatar van het overzicht verdwijnen zo achter het paneel, terwijl de
   tabbalk zichtbaar en bruikbaar blijft. Tikken op Ritten sluit dan de stop — zie
   TripsScreen.TryCloseOverlay. */
.trip-stop-panel.fullscreen-flow-panel {
    z-index: 18;
    /* Wit. Kaarten en regelrijen halen hun begrenzing uit een randje van 1 px en uit het
       accentbalkje bij de stap die aan de beurt is, niet uit een vulling die van de
       achtergrond moet afsteken. Alles wat alleen op zijn vulling dreef heeft daarom een
       rand gekregen — zoek op trip-gate-summary voor het geval dat opnieuw speelt. */
    background: var(--agri-panel);
    /* Exact dezelfde kopmaten als .screen-page__top van het rittenoverzicht, zodat de
       profielavatar op precies dezelfde plek blijft staan als je een stop opent — hij mag
       niet verspringen. Het standaardpaneel begint op clamp(3rem, 8vh, 5rem) en dat is ruim
       50 px lager. De terugknop komt daarmee vanzelf mee omhoog, want die staat in dezelfde rij. */
    padding-top: clamp(.6rem, 2.4vw, 1.1rem);
    padding-inline: var(--app-shell-inline-padding, clamp(1rem, 5vw, 2.25rem));
    /* Van rechts naar links in plaats van onder naar boven: een stop is een niveau dieper in
       dezelfde lijst, en zijwaarts schuiven leest als vooruit navigeren. Onder naar boven is
       in deze app het gebaar van een sheet die iets tóónt (zie InspectionSheet), niet van
       doorlopen. Alleen dit paneel; de tien andere flows op FullscreenFlowPanel houden hun
       eigen beweging. */
    transform: translate3d(100%, 0, 0);
    /* Volledig dekt tijdens het schuiven: een zijwaartse duw hoort niet te vervagen, dat is
       het gebaar van iets dat opkomt. De sluitanimatie duwt hem er weer net zo uit. */
    opacity: 1;
}

.trip-stop-panel.fullscreen-flow-panel--open {
    /* none: geen containing block voor fixed-lagen (zie .fullscreen-flow-panel--open) */
    transform: none;
}

/* Het handtekeningscherm schuift over de losstop heen. Zonder eigen z-index erft het de 5 van
   .fullscreen-flow-panel en verdwijnt het achter .trip-stop-panel (18): het paneel opent dan
   wel, maar je ziet er niets van en de knop lijkt kapot.
   Ook boven de tabbalk (20) en boven de opgetilde stop met open sheet (21): dit is een eigen
   stap met een eigen terugknop, geen laag waar je omheen moet kunnen tikken. */
.trip-sign-panel.fullscreen-flow-panel {
    z-index: 22;
}

/* Sheets binnen dit paneel (Bellen, Op het erf, gewichten, silo) zitten gevangen in de
   stapelcontext van het paneel: dat staat op z-18 en de tabbalk op z-20, dus geen enkele
   z-index binnenin komt daar nog bovenuit. Zolang er een sheet openstaat tilt het paneel
   zichzelf daarom één stap boven de tabbalk uit.
   Alleen zolang: op z-18 dekt de tabbalk het paneel af, en dat is bewust — tikken op Ritten
   werkt daardoor als Vorige (zie TripsScreen.TryCloseOverlay). Zou het paneel er permanent
   boven staan, dan was die uitweg dicht.
   InspectionSheet rendert zijn markup alleen zolang hij aanwezig is, dus :has() is hier
   precies "er staat een sheet open" — geen extra vlag of parameter nodig. */
.trip-stop-panel:has(.insp-drag-sheet) {
    z-index: 21;
}

/* De grijze band van het rittenoverzicht loopt door in de paneelkop, zodat de terugknop en de
   avatar op dezelfde ondergrond staan als een tel eerder in de lijst. Het uiterlijk zelf komt
   uit de gedeelde regel bij .screen-page__top--glass; hier staat alleen wat dit paneel nodig
   heeft om die band te laten passen.
   De negatieve marges trekken de band door de inspringing van het paneel heen tot aan de rand;
   de padding erachteraan zet de inhoud exact terug waar hij stond, zodat de avatar niet
   verspringt. position/z-index zijn er voor de uitloop: die is absoluut gepositioneerd en zou
   zonder houvast aan de onderkant van het paneel plakken, en zonder z-index onder de inhoud
   verdwijnen. */
.trip-stop-panel .fullscreen-flow-panel__header {
    position: relative;
    z-index: 1;
    margin-top: calc(-1 * clamp(.6rem, 2.4vw, 1.1rem));
    margin-inline: calc(-1 * var(--app-shell-inline-padding, clamp(1rem, 5vw, 2.25rem)));
    padding: clamp(.6rem, 2.4vw, 1.1rem) var(--app-shell-inline-padding, clamp(1rem, 5vw, 2.25rem)) .3rem;
}

/* Grid-items krijgen standaard min-width: auto, waardoor één te breed kind de hele
   kolom oprekt en de inhoud rechts uit beeld loopt. Vandaar de expliciete minmax(0, 1fr). */
.trip-stop-panel .fullscreen-flow-panel__content {
    grid-template-columns: minmax(0, 1fr);
}

/* De paneeltitel is de relatienaam; die staat al groot in de kop van de stop zelf */
.trip-stop-panel .fullscreen-flow-panel__content > h1 {
    display: none;
}

/* Rechtsboven in de kopregel, tegenover de terugknop. Geen eigen marges: hij moet exact
   even ver van de rand staan als op het rittenoverzicht, en de kopregel van het paneel
   heeft daar nu dezelfde padding voor. Verticaal lijnt hij vanzelf uit doordat beide in
   dezelfde flexrij staan — ook al is de avatar (3,95rem) groter dan de terugknop (3,4rem). */

.trip-panel {
    min-width: 0;
    /* Ruimte voor de vaste actiebalk plus de tabbalk eronder */
    padding-bottom: 11rem;
}

.trip-head__kind {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .25rem .7rem;
    border-radius: 999px;
    font-size: .82rem;
    font-weight: 600;
}

.trip-head__kind--load {
    background: var(--agri-accent-soft);
    color: var(--agri-tertiary);
}

.trip-head__kind--unload {
    background: var(--status-todo-soft);
    color: var(--status-todo);
}

.trip-head h1 {
    margin: .45rem 0 .2rem;
    font-size: var(--agri-h2-size);
}

.trip-head__address {
    display: flex;
    flex-wrap: wrap;
    gap: .1rem .5rem;
    margin: 0;
    color: var(--agri-muted);
}

.trip-head__moment {
    display: flex;
    align-items: center;
    gap: .4rem;
    margin: .7rem 0 0;
    color: var(--agri-ink);
    font-weight: 600;
}

/* Bellen en navigeren draaien op .detail-actions uit de relatiedetails; de eigen
   .trip-head__action-regels die hier stonden zijn daarmee overbodig geworden. */

.trip-head__info {
    padding: .8rem .9rem;
}

/* pre-line: deze teksten komen uit de order en de transportgegevens, waar kantoor met
   regeleindes werkt — een adresregel, een instructie per punt. HTML gooit die weg en maakte
   er één lap van. Spaties blijven wél samengevouwen, zodat inspringing uit de invoer geen
   scheve marge oplevert. */
.trip-head__info p,
.trip-head__warn span {
    white-space: pre-line;
}

.trip-head__info p {
    margin: 0 0 .45rem;
    line-height: 1.4;
}

.trip-head__warn {
    display: flex;
    align-items: flex-start;
    gap: .4rem;
    color: var(--agri-warning);
    font-weight: 600;
}

.trip-head__chips {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
}

/* --- Chips --- */

.trip-chip {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    min-height: 2.4rem;
    padding: .3rem .8rem;
    border: 0;
    border-radius: 999px;
    background: var(--agri-subtle);
    color: var(--agri-ink);
    font-size: .88rem;
    font-weight: 600;
    cursor: pointer;
}

.trip-chip--info {
    background: var(--agri-info-soft);
    color: var(--agri-info);
    cursor: default;
}

.trip-chip--chosen {
    background: var(--agri-accent);
    color: #fff;
}

/* --- De poort vóór het laden --- */

.trip-gate {
    margin: 1rem 0;
    padding: .9rem;
    border-radius: 1.2rem;
    background: var(--agri-panel);
}

/* Alleen de rode rand, geen slagschaduw — die zit in de basisregel ook niet meer */
.trip-gate--blocked {
    box-shadow: inset 0 0 0 2px var(--agri-danger);
}

/* De kop van de poort: staat er altijd, en klapt de stappen eronder open en dicht. Draagt
   ook de voortgang ("1 van 2") en, zodra het rond is, het bewijs ("gereinigd B — water"). */
.trip-gate-summary {
    display: flex;
    align-items: center;
    gap: .7rem;
    width: 100%;
    min-width: 0;
    min-height: 4.6rem;
    margin: 1rem 0;
    padding: .7rem .9rem;
    border: 0;
    border-radius: 1.2rem;
    /* Dezelfde twee toestanden als de stappen waar hij de kop van is: groen zodra de poort
       rond is, wit met een rode band zolang er nog iets openstaat. */
    background: var(--agri-accent-soft);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--agri-accent) 30%, transparent);
    color: var(--agri-text);
    text-align: left;
    cursor: pointer;
}

.trip-gate-summary--todo {
    background: var(--agri-panel);
    box-shadow: inset .28rem 0 0 0 var(--agri-danger), inset 0 0 0 1px var(--agri-border);
}

.trip-gate-summary__mark {
    display: grid;
    place-items: center;
    flex-shrink: 0;
    width: 2.1rem;
    height: 2.1rem;
    border-radius: 50%;
    background: var(--agri-accent);
    color: #fff;
}

.trip-gate-summary--todo .trip-gate-summary__mark {
    background: var(--agri-danger-soft);
    color: var(--agri-danger);
}

.trip-gate-summary__chev {
    display: grid;
    place-items: center;
    flex-shrink: 0;
    color: var(--agri-muted);
    transition: transform .22s ease;
}

.trip-gate-summary--open .trip-gate-summary__chev {
    transform: rotate(180deg);
}

.trip-gate-summary__text {
    display: grid;
    gap: .1rem;
    min-width: 0;
    flex: 1;
}

.trip-gate-summary__text strong {
    font-size: .98rem;
}

/* Het bewijs blijft in volle tekstkleur: dit is voedselveiligheidsregistratie, geen bijschrift */
.trip-gate-summary__text span {
    font-size: .88rem;
    overflow-wrap: anywhere;
}

/* In- en uitklappen van de stappen onder de kop; zelfde techniek als de dagwisselaar hierboven,
   inclusief de terugval voor Safari. */
.trip-gate-wrap {
    height: 0;
    overflow: hidden;
    transition: height .24s ease;
}

.trip-gate-wrap--open {
    height: calc-size(auto, size);
}

@supports not (height: calc-size(auto, size)) {
    .trip-gate-wrap {
        height: auto;
        max-height: 0;
        transition: max-height .24s ease;
    }

    .trip-gate-wrap--open {
        max-height: 60rem;
    }
}

/* overflow maakt er een eigen blokcontext van, zodat de marge van .trip-gate niet buiten de
   wikkel doorlekt wanneer die dicht staat. */
.trip-gate-wrap__inner {
    overflow: hidden;
}

/* Rood is hier terecht: dit is een echte blokkade, geen 'nog te doen' */
.trip-gate__block {
    display: flex;
    align-items: flex-start;
    gap: .5rem;
    margin: 0 0 .8rem;
    padding: .7rem .8rem;
    border-radius: .9rem;
    background: var(--agri-danger-soft);
    color: var(--agri-danger);
    font-weight: 600;
}

/* Twee toestanden, meer niet: nog te doen of klaar.
   Nog te doen = wit met een rode band en een rood uitroepteken. Klaar = groen met het vinkje.
   Er zat eerder een tussenstand in ("aan de beurt", met een accentbalkje), maar op een poort
   met drie stappen die je in willekeurige volgorde mag afvinken vertelt dat niets extra's —
   wat er nog moet gebeuren is nu in één oogopslag rood. */
.trip-gate__step {
    display: flex;
    align-items: center;
    gap: .7rem;
    width: 100%;
    min-width: 0;
    min-height: 4.2rem;
    margin-bottom: .5rem;
    padding: .6rem .7rem;
    border: 0;
    border-radius: 1rem;
    background: var(--agri-panel);
    /* De rode band links, plus een hairline rondom zodat de witte kaart niet wegvalt */
    box-shadow: inset .28rem 0 0 0 var(--agri-danger), inset 0 0 0 1px var(--agri-border);
    text-align: left;
    cursor: pointer;
}

.trip-gate,
.trip-gate__label {
    min-width: 0;
}

/* De ondertitel mag afbreken in plaats van de kaart oprekken */
.trip-gate__label span {
    overflow-wrap: anywhere;
}

.trip-gate__step--block {
    display: block;
    cursor: default;
}

/* Klaar: exact de kleuren van een laadstop in het overzicht (.trip-stop--load) — zacht
   accentgroen vlak, een rand van 30% accent, en een dichte groene cirkel met wit teken.
   Zo is 'groen' overal in de module hetzelfde groen. */
.trip-gate__step--done {
    background: var(--agri-accent-soft);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--agri-accent) 30%, transparent);
}

.trip-gate__step--done .trip-gate__mark {
    background: var(--agri-accent);
    color: #fff;
}

.trip-gate__step-top {
    display: flex;
    align-items: center;
    gap: .7rem;
}

.trip-gate__mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.4rem;
    height: 2.4rem;
    flex: 0 0 auto;
    border-radius: 999px;
    background: var(--agri-panel);
    color: var(--status-done);
}

/* Nog te doen: rood uitroepteken in een zachtrode cirkel, in dezelfde toon als de band ernaast */
.trip-gate__step:not(.trip-gate__step--done) .trip-gate__mark {
    background: var(--agri-danger-soft);
    color: var(--agri-danger);
}

.trip-gate__label {
    display: flex;
    flex-direction: column;
    gap: .1rem;
}

.trip-gate__label strong {
    font-size: 1rem;
    color: var(--agri-ink);
}

.trip-gate__label span {
    font-size: .85rem;
    color: var(--agri-muted);
}

/* Vijf codes op één rij. Alleen de code, geen naam eronder: die paste niet (op 375 px blijft
   er 286 px over voor vijf knoppen die er samen 314 vragen, dus kapte "water + middel" af) en
   een chauffeur kent de regimes. De betekenis zit achter het (i)-icoon bij de vraag. */
.trip-gate__regimes {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: .4rem;
    margin-top: .7rem;
}

.trip-gate__regime {
    display: grid;
    place-items: center;
    min-width: 0;
    /* 20 mm, want dit is de kernkeuze van de poort */
    min-height: 4.7rem;
    border: 0;
    border-radius: .9rem;
    background: var(--agri-panel);
    box-shadow: inset 0 0 0 1px var(--agri-border);
    cursor: pointer;
}

/* Het (i)-icoon achter de vraag; ruim tikvlak zonder de regel op te rekken */
/* Het (i) staat helemaal rechts, tegen de rand van de kaart. Daarvoor moet de labelkolom
   eerst de rij vullen — anders krimpt hij naar de tekst en plakt het icoontje er direct
   achteraan. Zie de regel bij .trip-gate__step-top hieronder. */
.trip-gate__question {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .1rem;
}

.trip-gate__step-top .trip-gate__label {
    flex: 1;
}

.trip-gate__info {
    display: grid;
    place-items: center;
    width: 2.8rem;
    height: 2.8rem;
    margin: -.9rem -.6rem -.9rem 0;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: var(--agri-muted);
    cursor: pointer;
}

/* --- Uitleg bij de regimes --- */

.trip-regime-info__head h2 {
    margin: 0;
    font-size: var(--agri-h4-size);
}

.trip-regime-info__head p {
    margin: .15rem 0 .8rem;
    color: var(--agri-muted);
    font-size: .9rem;
}

.trip-regime-info__list {
    display: grid;
    gap: .5rem;
    max-height: 56vh;
    margin: 0;
    overflow-y: auto;
}

/* Elke rij is een keuzeknop, geen leesregel: vandaar de volle breedte, linkse uitlijning
   en de aanwijzer. */
.trip-regime-info__row {
    display: flex;
    gap: .75rem;
    align-items: flex-start;
    width: 100%;
    padding: .7rem .8rem;
    border: 0;
    border-radius: 1rem;
    background: var(--agri-subtle);
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.trip-regime-info__row.is-chosen {
    background: var(--agri-accent-soft);
    box-shadow: inset 0 0 0 2px var(--agri-accent);
}

.trip-regime-info__copy {
    display: grid;
    gap: .1rem;
    min-width: 0;
}

.trip-regime-info__copy strong {
    font-size: 1rem;
    color: var(--agri-ink);
}

.trip-regime-info__copy span {
    color: var(--agri-muted);
    font-size: .88rem;
    line-height: 1.4;
}

.trip-regime-info__code {
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    width: 2.4rem;
    height: 2.4rem;
    border-radius: .7rem;
    background: var(--agri-panel);
    font-size: 1.15rem;
    font-weight: 700;
}

/* Dezelfde kolomopbouw als .insp-drag-sheet__inner, want dat is wat elke andere sheet zijn
   inhoud geeft. Hier zat een gewone blok-div omheen; daarin bleef de sluitknop op zijn
   tekstbreedte staan en dus links hangen, terwijl hij overal elders de volle breedte pakt
   en zijn label vanzelf midden staat. */
.trip-regime-info {
    display: flex;
    flex-direction: column;
    gap: .7rem;
    min-height: 0;
}

.trip-gate__regime--chosen {
    background: var(--agri-accent);
    color: #fff;
    box-shadow: none;
}

.trip-gate__regime-code {
    font-size: 1.3rem;
    font-weight: 700;
}

.trip-gate__deviation {
    margin-top: .7rem;
}

.trip-gate__deviation p {
    display: flex;
    align-items: center;
    gap: .35rem;
    margin: 0 0 .4rem;
    color: var(--agri-warning);
    font-size: .88rem;
    font-weight: 600;
}

.trip-gate__wash {
    margin-top: .7rem;
}

.trip-gate__station {
    display: block;
    margin-bottom: .5rem;
    font-size: .88rem;
    color: var(--agri-muted);
}

/* Eigen klasse in plaats van een nakomeling-selector op label: '.trip-gate__wash label'
   won op specificiteit van '.trip-gate__disinfect' en zette display terug op block,
   waardoor de schakelaar en zijn tekst niet meer op één lijn stonden. */
.trip-gate__disinfect {
    display: flex;
    align-items: center;
    gap: .6rem;
    font-size: .88rem;
    color: var(--agri-ink);
}

.trip-gate__history {
    margin-top: .8rem;
    padding-top: .8rem;
    border-top: 1px solid var(--agri-border);
}

.trip-gate__history h3 {
    margin: 0 0 .5rem;
    font-size: .92rem;
    color: var(--agri-muted);
}

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

.trip-gate__history-list li {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .35rem 0;
    font-size: .9rem;
}

.trip-gate__history-date {
    flex: 0 0 3.6rem;
    color: var(--agri-muted);
}

.trip-gate__history-name {
    flex: 1 1 auto;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.trip-gate__history-regime {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.7rem;
    height: 1.7rem;
    flex: 0 0 auto;
    border-radius: 999px;
    background: var(--agri-subtle);
    font-weight: 700;
}

/* --- Orderregels --- */

.trip-panel__lines {
    margin: 1rem 0;
}

.trip-panel__lines h3,
.trip-panel__correct h3 {
    margin: 0 0 .6rem;
    font-size: var(--agri-h4-size);
}

/* --- Orderkaarten op de laadstop --- */

.trip-orders {
    margin: 1rem 0;
}

.trip-orders__title {
    margin: 0 0 .6rem;
    font-size: var(--agri-h4-size);
}

/* Zelfde twee toestanden als de poortstappen: wit met een rode band zolang er gewichten
   ontbreken, groen zodra de order rond is. */
.trip-order {
    margin-bottom: .6rem;
    border-radius: 1.2rem;
    background: var(--agri-panel);
    box-shadow: inset .28rem 0 0 0 var(--agri-danger), inset 0 0 0 1px var(--agri-border);
    overflow: hidden;
}

.trip-order--done {
    background: var(--agri-accent-soft);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--agri-accent) 30%, transparent);
}

/* Eén order op de laadplaats: geen kaart om de kaart heen. De regels staan dan gewoon
   op het doek, precies zoals ze eerst stonden. */
.trip-order--solo {
    border-radius: 0;
    background: none;
    box-shadow: none;
    overflow: visible;
}

.trip-order__head {
    display: flex;
    align-items: center;
    gap: .7rem;
    width: 100%;
    min-width: 0;
    min-height: 4rem;
    padding: .7rem .8rem;
    border: 0;
    background: none;
    color: var(--agri-text);
    text-align: left;
    cursor: pointer;
}

.trip-order__mark {
    display: grid;
    place-items: center;
    flex-shrink: 0;
    width: 1.9rem;
    height: 1.9rem;
    border-radius: 50%;
    background: var(--agri-danger-soft);
    color: var(--agri-danger);
}

.trip-order--done .trip-order__mark {
    background: var(--agri-accent);
    color: #fff;
}

.trip-order__copy {
    display: grid;
    gap: .1rem;
    min-width: 0;
    flex: 1;
}

.trip-order__copy strong {
    overflow: hidden;
    font-size: .98rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.trip-order__copy span {
    color: var(--agri-muted);
    font-size: .85rem;
    font-variant-numeric: tabular-nums;
}

.trip-order__chev {
    display: grid;
    place-items: center;
    flex-shrink: 0;
    color: var(--agri-muted);
    transition: transform .22s ease;
}

.trip-order--open .trip-order__chev {
    transform: rotate(180deg);
}

/* Zelfde techniek als de dagwisselaar en de poort: naar de natuurlijke hoogte animeren met
   calc-size, met max-height als terugval waar dat nog niet kan. */
.trip-order__wrap {
    height: 0;
    overflow: hidden;
    transition: height .24s ease;
}

.trip-order--open .trip-order__wrap {
    height: calc-size(auto, size);
}

@supports not (height: calc-size(auto, size)) {
    .trip-order__wrap {
        height: auto;
        max-height: 0;
        transition: max-height .24s ease;
    }

    .trip-order--open .trip-order__wrap {
        max-height: 90rem;
    }
}

.trip-order__body {
    overflow: hidden;
}

.trip-order:not(.trip-order--solo) .trip-order__body {
    padding: 0 .6rem .3rem;
}

/* Een streepje tussen kop en inhoud, zodat de kaart niet als één blok leest */
.trip-order:not(.trip-order--solo) .trip-order__body::before {
    content: "";
    display: block;
    height: 1px;
    margin: 0 .2rem .6rem;
    background: var(--agri-border);
}

.trip-order__weighnote {
    display: grid;
    gap: .4rem;
    margin: .2rem 0 .6rem;
}

.trip-order__weighnote > span {
    color: var(--agri-muted);
    font-size: .88rem;
    font-weight: 600;
}

/* --- Na het laden --- */

.trip-after {
    margin: 1.2rem 0 0;
}

.trip-after h3 {
    margin: 0 0 .6rem;
    font-size: var(--agri-h4-size);
}


.trip-panel__note {
    margin: 0 0 .5rem;
    padding: .5rem .7rem;
    border-radius: .8rem;
    background: var(--agri-info-soft);
    color: var(--agri-info);
    font-size: .9rem;
}

.trip-line {
    margin-bottom: .5rem;
    border-radius: 1rem;
    background: var(--agri-panel);
    box-shadow: inset 0 0 0 1px var(--agri-border);
    overflow: hidden;
}

.trip-line--deviation {
    box-shadow: inset 0 0 0 2px var(--agri-warning);
}

.trip-line__main {
    display: flex;
    align-items: center;
    gap: .7rem;
    width: 100%;
    /* 20 mm: dit is het meestgebruikte tikdoel van de hele app */
    min-height: 4.7rem;
    padding: .6rem .85rem;
    border: 0;
    background: transparent;
    text-align: left;
    cursor: pointer;
}

/* Op slot dimt alleen het invulvak, niet de regel. Met opacity op de hele regel werd ook
   de artikelnaam bleek — precies wat de chauffeur moet lezen om te weten waar hij staat.
   Wat op slot zit is het getal, dus dat is het enige dat terugtreedt. */
.trip-line--locked .trip-line__main {
    cursor: not-allowed;
}

.trip-line--locked .trip-line__value {
    opacity: .45;
}

.trip-line__text {
    display: flex;
    flex-direction: column;
    gap: .12rem;
    flex: 1 1 auto;
    min-width: 0;
}

.trip-line__text strong {
    font-size: 1rem;
    color: var(--agri-ink);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.trip-line__sub {
    font-size: .84rem;
    color: var(--agri-muted);
}

.trip-line__value {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: .05rem;
    flex: 0 0 auto;
}

/* Vastgelegd gewicht krijgt hetzelfde groene vlak als de rest van de module. Het getal zelf
   blijft in volle inktkleur: het is het belangrijkste op de regel, niet de kleur eromheen. */
.trip-line__value--done {
    padding: .35rem .6rem;
    border-radius: 12px;
    background: var(--agri-accent-soft);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--agri-accent) 30%, transparent);
}

.trip-line__value strong {
    font-size: 1.32rem;
    font-weight: 700;
    color: var(--agri-ink);
    font-variant-numeric: tabular-nums;
}

.trip-line__unit {
    font-size: .78rem;
    color: var(--agri-muted);
}

/* Stuks is een aparte, zelf ingevulde waarde — geen bijschrift bij de kilo's. Op muted
   was hij niet te onderscheiden van "kg", terwijl kantoor er wel op afrekent. */
.trip-line__pieces {
    font-size: .82rem;
    font-weight: 600;
    color: var(--agri-ink);
    font-variant-numeric: tabular-nums;
}

.trip-line__delta {
    font-size: .78rem;
    font-weight: 600;
    color: var(--agri-warning);
}

/* Nog invullen is géén groen meer. Groen betekent in deze module overal "klaar", en met een
   groene pil op elke lege regel zou een half ingevulde stop er afgerond uitzien. Zachtrood,
   dezelfde toon als het uitroepteken op de orderkaarten en de poortstappen. */
.trip-line__empty {
    padding: .3rem .7rem;
    border-radius: 999px;
    background: var(--agri-danger-soft);
    color: var(--agri-danger);
    font-size: .85rem;
    font-weight: 600;
}

/* Het getal van kantoor als context, niet als waarde: klein en gedempt, zodat het informeert
   zonder te suggereren dat er al iets vastligt. */
.trip-line__proposal {
    margin-top: .15rem;
    color: var(--agri-muted);
    font-size: .74rem;
}

/* Losstop die nog op de laadkant wacht */
.trip-panel__waiting {
    display: flex;
    align-items: flex-start;
    gap: .5rem;
    margin: 1rem 0;
    padding: .8rem .9rem;
    border-radius: 1rem;
    background: var(--agri-warning-soft);
    color: var(--agri-warning);
    font-size: .92rem;
    font-weight: 600;
}

/* Overname van het getal dat kantoor klaar had staan. Bewust een aparte, gelabelde knop en
   geen voorgevulde waarde: voorvullen zou het anker zijn dat blind receiving juist vermijdt. */
.trip-pad__takeover {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .6rem;
    width: 100%;
    min-height: 3.4rem;
    margin-top: .6rem;
    padding: .5rem .9rem;
    border: 0;
    border-radius: .9rem;
    background: var(--agri-subtle);
    box-shadow: inset 0 0 0 1px var(--agri-border);
    cursor: pointer;
}

.trip-pad__takeover-label {
    color: var(--agri-muted);
    font-size: .92rem;
    font-weight: 600;
}

.trip-pad__takeover-action {
    color: var(--agri-tertiary);
    font-size: .92rem;
    font-weight: 700;
}

.trip-line__silo {
    display: flex;
    align-items: center;
    gap: .35rem;
    width: 100%;
    min-height: 3rem;
    padding: .4rem .85rem;
    border: 0;
    border-top: 1px solid var(--agri-border);
    background: transparent;
    font-weight: 600;
    text-align: left;
    cursor: pointer;
}

.trip-line__silo--settled {
    color: var(--agri-ink);
}

/* Nog te kiezen: amber, want dit is het duurste faalscenario bij het lossen */
.trip-line__silo--open {
    background: var(--agri-warning-soft);
    color: var(--agri-warning);
}

.trip-line__reason {
    margin: 0;
    padding: .4rem .85rem .6rem;
    color: var(--agri-warning);
    font-size: .84rem;
}

/* --- Correctie op de laadkant --- */

.trip-panel__correct {
    margin: 1.2rem 0;
    padding: .9rem;
    border-radius: 1.2rem;
    background: var(--agri-subtle);
}

.trip-panel__correct p {
    margin: 0 0 .7rem;
    color: var(--agri-muted);
    font-size: .88rem;
}

.trip-correct {
    display: flex;
    align-items: center;
    gap: .6rem;
    width: 100%;
    min-height: 3.6rem;
    margin-bottom: .4rem;
    padding: .5rem .75rem;
    border: 0;
    border-radius: .9rem;
    background: var(--agri-panel);
    text-align: left;
    cursor: pointer;
}

.trip-correct span:first-child {
    flex: 1 1 auto;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.trip-correct__value {
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

/* --- Foto's --- */

.trip-photos {
    margin: 1.2rem 0;
}

.trip-photos__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: .5rem;
    margin-bottom: .5rem;
}

.trip-photos__head h3 {
    margin: 0;
    font-size: var(--agri-h4-size);
}

.trip-photos__required {
    color: var(--agri-warning);
    font-size: .84rem;
    font-weight: 600;
}

.trip-photos__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(5.5rem, 1fr));
    gap: .5rem;
}

.trip-photo {
    position: relative;
    aspect-ratio: 1;
    border: 0;
    border-radius: .9rem;
    background: var(--agri-subtle);
    overflow: hidden;
    cursor: pointer;
}

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

/* De toevoegtegel is .photo-add, dezelfde als in de optische inspectie; hij hoeft hier
   alleen de vierkante rastermaat te volgen. */
.trip-photo-add {
    width: 100%;
    aspect-ratio: 1;
    min-height: 0;
    /* Dicht in plaats van doorschijnend: deze tegel staat ook op de groene orderkaarten,
       en daar liet de basisregel (transparant) de kaartkleur er doorheen schijnen. */
    background: var(--agri-panel);
}

.trip-photo--pending img {
    opacity: .6;
}

.trip-photo__retry,
.trip-photo__queued,
.trip-photo__spinner {
    position: absolute;
    inset: auto 0 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .25rem;
    padding: .3rem;
    border: 0;
    font-size: .72rem;
    font-weight: 600;
    cursor: pointer;
}

.trip-photo__retry {
    background: var(--agri-warning);
    color: #fff;
}

/* In tekst, nooit grijs: grijs leest als uitgeschakeld terwijl er juist werk wacht */
.trip-photo__queued {
    background: var(--agri-info);
    color: #fff;
    cursor: default;
}

.trip-photo__spinner {
    inset: 0;
    background: color-mix(in srgb, var(--agri-panel) 55%, transparent);
}

.trip-photo__spinner::after {
    content: "";
    width: 1.4rem;
    height: 1.4rem;
    border: 2px solid var(--agri-border);
    border-top-color: var(--agri-accent);
    border-radius: 999px;
    animation: trip-spin .8s linear infinite;
}

@keyframes trip-spin {
    to { transform: rotate(360deg); }
}

.trip-photos__hint {
    margin: .45rem 0 0;
    color: var(--agri-muted);
    font-size: .84rem;
}

/* --- De ene primaire knop --- */

/* Boven de tabbalk, niet erachter. De tabbalk is 3,9rem hoog en zit op
   max(1rem, safe-area) van de onderkant; daar houdt deze balk ruimte voor vrij. */
.trip-panel__action {
    position: fixed;
    right: 0;
    bottom: calc(max(1rem, env(safe-area-inset-bottom)) + 3.9rem + .5rem);
    left: 0;
    z-index: 4;
    /* Zelfde zijmarge als de paneelinhoud, zodat de knop met de rest uitlijnt */
    padding: .8rem var(--app-shell-inline-padding, clamp(1rem, 5vw, 2.25rem)) .3rem;
    background: linear-gradient(to top, var(--agri-panel) 68%, transparent);
    pointer-events: none;
}

.trip-panel__action > * {
    pointer-events: auto;
}

.trip-primary {
    display: block;
    width: min(100%, 920px);
    margin-inline: auto;
    /* 20 mm; dit is de knop waar de hele stop op uitkomt */
    min-height: 4.7rem;
    border: 0;
    border-radius: 1.1rem;
    background: var(--agri-accent);
    color: #fff;
    font-size: 1.12rem;
    font-weight: 600;
    cursor: pointer;
}

/* Nog niet klaar: neutraal, niet rood — 'nog te doen' krijgt nooit rood */
.trip-primary--waiting {
    background: var(--agri-subtle);
    color: var(--agri-muted);
}

.trip-primary:disabled {
    cursor: not-allowed;
}

.trip-panel__action-hint {
    width: min(100%, 920px);
    margin: .4rem auto 0;
    color: var(--agri-muted);
    font-size: .84rem;
    text-align: center;
}

/* Lege ladinghistorie op de vrijgavekaart: eerlijk "onbekend", geen invoerveld. */
.trip-gate__history-empty {
    margin: 0;
    color: var(--agri-muted);
    font-size: .86rem;
}

/* Emballagetelling lager dan geboekt: de order gaat bij het afronden op pauze voor
   kantoor. Amber, geen rood — het is geen fout, het is een aankondiging. */
.trip-emballage__lowered {
    margin: .35rem 0 0;
    padding: .45rem .65rem;
    border-radius: 10px;
    background: color-mix(in srgb, var(--agri-warn, #b97a1c) 12%, transparent);
    color: var(--agri-warn, #b97a1c);
    font-size: .82rem;
    font-weight: 600;
}

/* Afgewezen afronding: de servermelding boven de groene knop. Rood en niet te missen —
   dit is het "kantoor heeft de order al gefactureerd"-geval. */
.trip-panel__action-error {
    width: min(100%, 920px);
    margin: 0 auto .5rem;
    padding: .55rem .8rem;
    border-radius: 12px;
    background: color-mix(in srgb, var(--agri-danger) 12%, transparent);
    color: var(--agri-danger);
    font-size: .88rem;
    font-weight: 600;
    text-align: center;
}

.trip-panel__spacer {
    height: 2rem;
}

/* --- Gewichtenklavier --- */

/* Deze sheet is de langste van de module: kop, display, twaalf toetsen, de gewogen-schakelaar,
   de uitweg en twee knoppen onder elkaar. Op de standaardhoogte (84dvh) viel Annuleren van het
   scherm en werd Vastleggen afgesneden. Vandaar meer ruimte, plus scrollen als vangnet voor een
   klein toestel — de knoppen moeten altijd bereikbaar zijn. */
.trip-pad-sheet {
    max-height: min(94dvh, 56rem);
}

.trip-pad-sheet .insp-drag-sheet__inner {
    overflow-y: auto;
}

.trip-pad {
    padding: .2rem 0 .5rem;
}

.trip-pad__head h2 {
    margin: 0;
    font-size: var(--agri-h4-size);
}

.trip-pad__head p {
    margin: .15rem 0 .8rem;
    color: var(--agri-muted);
    font-size: .88rem;
}

/* Wat er besteld is, pal onder de omschrijving. In volle tekstkleur: dit is het getal waar de
   chauffeur naartoe werkt, geen bijschrift. */
.trip-pad__ordered {
    margin: .15rem 0 0;
    color: var(--agri-ink);
    font-size: .95rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.trip-pad__order {
    margin: .05rem 0 .8rem;
}

/* Toevoegknop en verwijderknop in de emballagetelling */
.trip-emballage__add {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    width: 100%;
    min-height: 3.6rem;
    margin-top: .3rem;
    border: 1.6px dashed rgba(16, 42, 38, .28);
    border-radius: 14px;
    background: none;
    color: var(--agri-ink);
    font: inherit;
    font-weight: 600;
    cursor: pointer;
}

.trip-emballage__remove {
    display: grid;
    place-items: center;
    flex-shrink: 0;
    width: 2.6rem;
    height: 2.6rem;
    border: 0;
    border-radius: 999px;
    background: none;
    color: var(--agri-muted);
    cursor: pointer;
}

/* --- Wat er is afgetekend --- */

.trip-signed {
    display: flex;
    flex-direction: column;
    gap: .6rem;
}

.trip-signed h2 {
    margin: 0;
    font-size: var(--agri-h4-size);
}

.trip-signed__facts {
    display: grid;
    gap: .3rem;
    margin: 0;
}

.trip-signed__facts > div {
    display: flex;
    gap: .6rem;
}

.trip-signed__facts dt {
    flex: 0 0 5.5rem;
    color: var(--agri-muted);
    font-size: .9rem;
}

.trip-signed__facts dd {
    margin: 0;
    min-width: 0;
    font-weight: 600;
    overflow-wrap: anywhere;
}

/* Wit vlak: de handtekening is met een donkere lijn getekend en moet ook op een groene of
   grijze ondergrond leesbaar blijven. */
.trip-signed__image {
    display: grid;
    place-items: center;
    padding: .6rem;
    border-radius: 14px;
    background: var(--agri-panel);
    box-shadow: inset 0 0 0 1px var(--agri-border);
}

.trip-signed__image img {
    width: 100%;
    max-height: 9rem;
    object-fit: contain;
}

/* --- Heropenen van een afgeronde stop --- */

.trip-reopen {
    display: flex;
    flex-direction: column;
    gap: .4rem;
}

.trip-reopen h2 {
    margin: 0;
    font-size: var(--agri-h4-size);
}

.trip-reopen p {
    margin: 0 0 .4rem;
    color: var(--agri-muted);
}

/* --- Bevestiging bij meer dan 10% afwijking --- */

.trip-pad-confirm {
    display: flex;
    flex-direction: column;
    gap: .5rem;
}

.trip-pad-confirm h2 {
    margin: 0;
    font-size: var(--agri-h4-size);
}

.trip-pad-confirm__numbers {
    display: flex;
    align-items: baseline;
    gap: .6rem;
    margin: .3rem 0 0;
    flex-wrap: wrap;
}

.trip-pad-confirm__entered {
    font-size: 1.9rem;
    font-weight: 700;
    color: var(--agri-ink);
    font-variant-numeric: tabular-nums;
}

.trip-pad-confirm__planned {
    color: var(--agri-muted);
    font-size: .92rem;
}

.trip-pad-confirm__delta {
    margin: 0 0 .3rem;
    color: var(--agri-warning);
    font-size: .95rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.trip-pad__display {
    display: flex;
    align-items: baseline;
    justify-content: flex-end;
    gap: .4rem;
    padding: .5rem .9rem;
    border-radius: 1rem;
    background: var(--agri-subtle);
}

.trip-pad__value {
    font-size: 2.6rem;
    font-weight: 700;
    line-height: 1.1;
    color: var(--agri-ink);
    font-variant-numeric: tabular-nums;
}

.trip-pad__value--empty {
    color: var(--agri-border);
}

.trip-pad__unit {
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--agri-muted);
}

/* Verschijnt bewust pas ná invoer: vooraf zou dit het anker zijn dat we vermijden */
.trip-pad__compare {
    display: flex;
    justify-content: space-between;
    gap: .6rem;
    margin: .45rem .2rem 0;
    color: var(--agri-muted);
    font-size: .88rem;
}

.trip-pad__compare--alert .trip-pad__delta {
    color: var(--agri-warning);
    font-weight: 700;
}

.trip-pad__suggest {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .4rem;
    width: 100%;
    min-height: 3rem;
    margin-top: .6rem;
    border: 0;
    border-radius: .9rem;
    background: var(--agri-accent-soft);
    color: var(--agri-tertiary);
    font-weight: 600;
    cursor: pointer;
}

.trip-pad__tabs {
    display: flex;
    gap: .4rem;
    margin: .7rem 0 .5rem;
}

.trip-pad__tab {
    flex: 1 1 0;
    min-height: 3rem;
    border: 0;
    border-radius: .8rem;
    background: var(--agri-subtle);
    color: var(--agri-muted);
    font-weight: 600;
    cursor: pointer;
}

.trip-pad__tab--active {
    background: var(--agri-accent);
    color: #fff;
}

.trip-pad__keys {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    /* Spacing doet er niet toe, grootte wel (Colle & Hiszem 2004) — dus krap houden
       en de toetsen zelf groot maken */
    gap: .4rem;
    margin-top: .6rem;
}

.trip-pad__key {
    /* 20 mm handschoendrempel */
    min-height: 4.7rem;
    border: 0;
    border-radius: .9rem;
    background: var(--agri-panel);
    box-shadow: inset 0 0 0 1px var(--agri-border);
    color: var(--agri-ink);
    font-size: 1.6rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    cursor: pointer;
}

.trip-pad__key:active {
    background: var(--agri-subtle);
}

.trip-pad__key--back {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--agri-muted);
}

.trip-pad__weighed {
    display: flex;
    align-items: center;
    gap: .6rem;
    margin-top: .8rem;
    font-size: .92rem;
    font-weight: 600;
}

/* Onder elkaar: Vastleggen is waar je voor kwam en pakt de volle breedte, Annuleren staat
   eronder als uitweg. Naast elkaar waren het twee even zware keuzes. */
.trip-pad__actions {
    display: grid;
    gap: .5rem;
    margin-top: .9rem;
}

.trip-pad__cancel,
.trip-pad__save {
    flex: 1 1 0;
    min-height: 4rem;
    border: 0;
    border-radius: 1rem;
    font-size: 1.02rem;
    font-weight: 600;
    cursor: pointer;
}

/* Vlak en neutraal: geen tweede knop die om aandacht vraagt naast de groene */
.trip-pad__cancel {
    background: none;
    color: var(--agri-ink);
}

.trip-pad__save {
    background: var(--agri-accent);
    color: #fff;
}

.trip-pad__save:disabled {
    background: var(--agri-subtle);
    color: var(--agri-muted);
    cursor: not-allowed;
}

/* --- Silokiezer --- */

.trip-silo__head h2 {
    margin: 0;
    font-size: var(--agri-h4-size);
}

.trip-silo__head p {
    margin: .15rem 0 .7rem;
    color: var(--agri-muted);
}

.trip-silo__planned {
    display: flex;
    align-items: baseline;
    gap: .6rem;
    padding: .6rem .8rem;
    border-radius: .9rem;
    background: var(--agri-accent-soft);
}

.trip-silo__planned-label {
    color: var(--agri-tertiary);
    font-size: .85rem;
    font-weight: 600;
}

.trip-silo__planned strong {
    font-size: 1.32rem;
    font-weight: 700;
    color: var(--agri-ink);
}

.trip-silo__unknown {
    display: flex;
    align-items: flex-start;
    gap: .45rem;
    margin: 0;
    padding: .7rem .8rem;
    border-radius: .9rem;
    background: var(--agri-warning-soft);
    color: var(--agri-warning);
    font-size: .9rem;
    font-weight: 600;
}

.trip-silo__scroll {
    max-height: 46vh;
    margin-top: .8rem;
    overflow-y: auto;
}

.trip-silo__hint {
    display: flex;
    align-items: center;
    gap: .55rem;
    margin: 0 0 .5rem;
    color: var(--agri-muted);
    font-size: .88rem;
}

.trip-silo__options {
    display: flex;
    flex-wrap: wrap;
    gap: .45rem;
    margin-bottom: .9rem;
}

.trip-silo__option {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    /* 20 mm */
    min-height: 4.7rem;
    padding: .5rem 1rem;
    border: 0;
    border-radius: 1rem;
    background: var(--agri-panel);
    box-shadow: inset 0 0 0 1px var(--agri-border);
    cursor: pointer;
}

.trip-silo__option--chosen {
    background: var(--agri-accent);
    color: #fff;
    box-shadow: none;
}

.trip-silo__option-name {
    font-size: 1.05rem;
    font-weight: 700;
}

.trip-silo__option-count {
    font-size: .8rem;
    opacity: .7;
}

.trip-silo__free,
.trip-silo__reason {
    display: block;
    margin-bottom: .7rem;
}

.trip-silo__free > span,
.trip-silo__reason > span {
    display: block;
    margin-bottom: .3rem;
    color: var(--agri-muted);
    font-size: .88rem;
    font-weight: 600;
}

.trip-silo__actions {
    display: flex;
    gap: .5rem;
    margin-top: .6rem;
}

.trip-panel__reasons {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
}

/* --- Extra acties op de losstop (emballage, aftekenen) --- */

.trip-panel__extras {
    display: flex;
    flex-direction: column;
    gap: .45rem;
    margin: 1.2rem 0;
}

.trip-extra {
    display: flex;
    align-items: center;
    gap: .7rem;
    width: 100%;
    /* 20 mm */
    min-height: 4.7rem;
    padding: .6rem .9rem;
    border: 0;
    border-radius: 1.1rem;
    background: var(--agri-panel);
    box-shadow: inset 0 0 0 1px var(--agri-border);
    color: var(--agri-ink);
    font-size: 1.02rem;
    font-weight: 600;
    text-align: left;
    cursor: pointer;
}

.trip-extra span {
    flex: 1 1 auto;
}

.trip-extra--done {
    background: var(--status-done-soft);
    color: var(--status-done);
    box-shadow: none;
}

/* --- Emballage --- */

.trip-emballage__head h2 {
    margin: 0;
    font-size: var(--agri-h4-size);
}

.trip-emballage__head p {
    margin: .15rem 0 .8rem;
    color: var(--agri-muted);
    font-size: .9rem;
}

/* De sheet mag 80% van het scherm pakken; de lijst eronder scrolt. Bij een klant met tientallen
   emballage-artikelen liep de keuzelijst anders zo van het scherm af. */
.trip-emballage-sheet {
    max-height: 80dvh;
}

.trip-emballage {
    display: flex;
    flex-direction: column;
    gap: .5rem;
    min-height: 0;
}

.trip-emballage .insp-sheet__scroll {
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
}

.trip-emballage__row {
    padding: .7rem 0;
    border-bottom: 1px solid var(--agri-border);
}

/* Naam links, prullenbak rechts; de tellers staan eronder */
.trip-emballage__head-row {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin-bottom: .45rem;
}

.trip-emballage__head-row .trip-emballage__name {
    flex: 1;
    min-width: 0;
}

.trip-emballage__name {
    display: block;
    margin-bottom: .5rem;
    font-weight: 600;
}

.trip-emballage__counts {
    display: flex;
    gap: .8rem;
}

.trip-emballage__counts label {
    flex: 1 1 0;
}

.trip-emballage__counts label > span {
    display: block;
    margin-bottom: .25rem;
    color: var(--agri-muted);
    font-size: .82rem;
}

/* De gedeelde QuantityStepper heeft knoppen van 3rem = 48 px ≈ 12,7 mm en haalt daarmee de
   handschoendrempel van 20 mm niet (MIL-STD-1472F). Binnen de chauffeursmodule wordt hij
   daarom vergroot — scoped, zodat de bestelflow zijn eigen compacte maat houdt. Investeren
   in grootte en niet in tussenruimte: Colle & Hiszem 2004 vond tussen 1 en 3 mm spacing geen
   meetbaar verschil. */
.trip-emballage .order-stepper__button {
    min-width: 4.7rem;
    min-height: 4.7rem;
}

.trip-emballage__empty {
    margin: 1rem 0;
    color: var(--agri-muted);
}

/* --- Aftekenen --- */

.trip-sign {
    padding-bottom: 8rem;
}

.trip-sign h2 {
    margin: 0 0 .3rem;
    font-size: var(--agri-h3-size);
}

.trip-sign__intro {
    margin: 0 0 1rem;
    color: var(--agri-muted);
}

.trip-sign__tiles {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr));
    gap: .6rem;
    margin: 1rem 0;
}

.trip-sign__tile {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .45rem;
    /* Ruim boven de 20 mm: dit zijn de vier gelijkwaardige paden en ze moeten alle vier
       even makkelijk te raken zijn — 'niemand aanwezig' mag geen tweederangs uitweg lijken */
    min-height: 7rem;
    padding: .8rem .6rem;
    border: 0;
    border-radius: 1.1rem;
    background: var(--agri-panel);
    box-shadow: inset 0 0 0 1px var(--agri-border);
    color: var(--agri-ink);
    font-size: .95rem;
    font-weight: 600;
    text-align: center;
    cursor: pointer;
}

.trip-sign__tile--chosen {
    background: var(--agri-accent-soft);
    box-shadow: inset 0 0 0 2px var(--agri-accent);
}

.trip-sign__tile-check {
    position: absolute;
    top: .5rem;
    right: .5rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 999px;
    background: var(--agri-accent);
    color: #fff;
}

/* Het naamveld draait op .auth-input, hetzelfde als bij een nieuwe relatie. Alleen de
   bovenmarge is hier van dit paneel. */
.trip-sign .auth-input {
    margin-top: .8rem;
}


.trip-sign__note {
    display: flex;
    align-items: flex-start;
    gap: .45rem;
    margin: .9rem 0 0;
    padding: .7rem .8rem;
    border-radius: .9rem;
    background: var(--agri-info-soft);
    color: var(--agri-info);
    font-size: .9rem;
}

.trip-sign__review {
    margin: 0 0 1.2rem;
}

.trip-sign__review > div {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding: .55rem 0;
    border-bottom: 1px solid var(--agri-border);
}

.trip-sign__review dt {
    color: var(--agri-muted);
}

.trip-sign__review dd {
    margin: 0;
    font-weight: 600;
    text-align: right;
}

/* Wat wél is geleverd bevestigt zichzelf in het groen van de module. Alleen de waarde: de
   artikelnaam blijft gewone inkt, anders wordt de hele lijst één kleur en valt er niets meer
   op. */
.trip-sign__review--ok dd {
    color: var(--agri-accent);
}

/* Een geweigerde regel valt op vóór er getekend wordt: rood, met de reden eronder. De
   artikelnaam gaat mee in de rode kleur — hij is hier geen bijschrift maar de kern van wat
   er niet klopt. */
.trip-sign__review--refused dt,
.trip-sign__review--refused dd {
    color: var(--agri-danger);
}

.trip-sign__review--refused > div {
    border-bottom-color: color-mix(in srgb, var(--agri-danger) 22%, transparent);
}

.trip-sign__refused-head {
    display: flex;
    align-items: center;
    gap: .4rem;
    margin: 0 0 .1rem;
    color: var(--agri-danger);
    font-weight: 700;
}

.trip-sign__refused {
    display: block;
    margin-top: .1rem;
    font-size: .85rem;
    font-weight: 600;
    overflow-wrap: anywhere;
}

.trip-sign__canvas-wrap {
    position: relative;
    margin-top: .6rem;
    border-radius: 1.1rem;
    background: var(--agri-panel);
    box-shadow: inset 0 0 0 1px var(--agri-border);
    overflow: hidden;
}

.trip-sign__canvas {
    display: block;
    width: 100%;
    /* Ruim: op een telefoon in portret is dit het grootste vlak dat past zonder te scrollen */
    height: 16rem;
    touch-action: none;
}

.trip-sign__clear {
    position: absolute;
    top: .5rem;
    right: .5rem;
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    min-height: 2.6rem;
    padding: .3rem .8rem;
    border: 0;
    border-radius: 999px;
    background: var(--agri-subtle);
    color: var(--agri-muted);
    font-size: .85rem;
    font-weight: 600;
    cursor: pointer;
}

/* --- Afwijking per regel --- */

/* De uitweg onder het klavier: klein en onderaan, want het is de uitzondering — maar hij moet
   er wél zijn. Een chauffeur zonder plek om "silo vol" te melden vult 0 in, en dan weet
   niemand meer waarom. */
.trip-pad__deviation {
    display: block;
    width: 100%;
    min-height: 3rem;
    margin-top: .7rem;
    border: 0;
    border-radius: .8rem;
    background: transparent;
    color: var(--agri-warning);
    font-size: .92rem;
    font-weight: 600;
    text-decoration: underline;
    cursor: pointer;
}

.trip-linestatus__head h2 {
    margin: 0;
    font-size: var(--agri-h4-size);
}

.trip-linestatus__head p {
    margin: .15rem 0 .8rem;
    color: var(--agri-muted);
    font-size: .9rem;
}

.trip-linestatus__options {
    display: flex;
    flex-direction: column;
    gap: .45rem;
    margin-bottom: .9rem;
}

.trip-linestatus__option {
    /* 20 mm */
    min-height: 4.7rem;
    padding: .6rem 1rem;
    border: 0;
    border-radius: 1rem;
    background: var(--agri-panel);
    box-shadow: inset 0 0 0 1px var(--agri-border);
    color: var(--agri-ink);
    font-size: 1.02rem;
    font-weight: 600;
    text-align: left;
    cursor: pointer;
}

.trip-linestatus__option--chosen {
    background: var(--agri-accent);
    color: #fff;
    box-shadow: none;
}

.trip-linestatus__hint {
    margin: 0 0 .45rem;
    color: var(--agri-muted);
    font-size: .88rem;
}

.trip-linestatus__reasons {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
    margin-bottom: .8rem;
}

.trip-linestatus__free {
    display: block;
    margin-bottom: .7rem;
}

.trip-linestatus__free > span {
    display: block;
    margin-bottom: .3rem;
    color: var(--agri-muted);
    font-size: .88rem;
    font-weight: 600;
}

.trip-linestatus__actions,
.trip-late__actions {
    display: flex;
    gap: .5rem;
    margin-top: .6rem;
}

/* --- Na het afronden: bevestiging, uitweg en de volgende stop ---

   Boven de tabbalk en niet erin: de tabbalk is navigatie en deze balk is een mededeling met
   een vervaltijd. Vaste positie, want de lijst eronder scrollt naar de volgende stop. */
.trip-done {
    /* Uitgelijnd op .app-shell__navigation: zelfde breedte en centrering, en er net boven.
       z-index onder de 20 van de tabbalk — die blijft de bovenste laag. */
    position: fixed;
    left: 50%;
    bottom: calc(max(1rem, env(safe-area-inset-bottom)) + 4.6rem);
    z-index: 12;
    width: min(calc(100% - 2rem), 860px);
    transform: translateX(-50%);
    display: grid;
    gap: .1rem;
    padding: .55rem .5rem .55rem .9rem;
    border-radius: 1.1rem;
    background: var(--agri-ink);
    color: #fff;
    box-shadow: 0 .6rem 1.6rem rgb(0 0 0 / 28%);
    animation: tripDoneIn 220ms ease-out;
}

/* De translateX(-50%) van de centrering moet in elke keyframe mee, anders springt de balk
   bij het starten van de animatie een halve breedte naar rechts. */
@keyframes tripDoneIn {
    from {
        opacity: 0;
        transform: translateX(-50%) translateY(.6rem);
    }

    to {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }
}

.trip-done--error {
    background: var(--agri-danger);
}

.trip-done__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .8rem;
    min-height: 2.4rem;
}

.trip-done__text {
    display: flex;
    align-items: center;
    gap: .45rem;
    font-weight: 600;
}

/* Groot genoeg om met handschoenen te raken, en visueel los van de tekst ernaast */
.trip-done__undo {
    flex: 0 0 auto;
    min-height: 2.6rem;
    padding: 0 .9rem;
    border: 0;
    border-radius: 999px;
    background: rgb(255 255 255 / 16%);
    color: #fff;
    font-size: 1rem;
    font-weight: 700;
    cursor: pointer;
}

.trip-done__next {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    width: 100%;
    min-height: 2.8rem;
    padding: 0 .4rem 0 0;
    border: 0;
    background: transparent;
    color: color-mix(in srgb, #fff 82%, transparent);
    font-size: .95rem;
    font-weight: 600;
    text-align: left;
    cursor: pointer;
}

.trip-done__next > span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* De volgende open stop, kort gemarkeerd zodat hij te vinden is na het scrollen. Een ring en
   geen vulling: de vulling van de rij draagt al of het laden of lossen is. */
.trip-stop-holder.trip-stop--next {
    box-shadow: 0 0 0 2px var(--agri-accent);
}

@media (prefers-reduced-motion: reduce) {
    .trip-done {
        animation: none;
    }
}

/* --- Wat er nog moet voordat een stop dicht kan --- */

.trip-review__head h2 {
    margin: 0;
    font-size: var(--agri-h4-size);
}

.trip-review__head p {
    margin: .15rem 0 .9rem;
    color: var(--agri-muted);
    font-size: .9rem;
}

.trip-review__items {
    display: grid;
    gap: .5rem;
    margin-bottom: 1rem;
}

/* Rood en niet amber: dit is de vaste taal van de module — rood is nog te doen. Het blok is
   een tikdoel van ruim 3 rem hoog, want het wordt met handschoenen aan bediend. */
.trip-review__item {
    display: flex;
    align-items: center;
    gap: .7rem;
    width: 100%;
    min-height: 3.4rem;
    padding: .6rem .8rem;
    border: 0;
    border-radius: 1rem;
    background: var(--agri-danger-soft);
    color: var(--agri-ink);
    text-align: left;
    cursor: pointer;
}

.trip-review__item--static {
    cursor: default;
}

.trip-review__mark {
    display: grid;
    flex: 0 0 auto;
    width: 2rem;
    height: 2rem;
    place-items: center;
    border-radius: 999px;
    background: var(--agri-danger);
    color: #fff;
}

.trip-review__text {
    display: grid;
    flex: 1 1 auto;
    gap: .1rem;
    min-width: 0;
}

.trip-review__text > strong {
    font-size: 1rem;
    font-weight: 700;
}

.trip-review__text > span {
    color: var(--agri-muted);
    font-size: .86rem;
    overflow-wrap: anywhere;
}

.trip-review__close {
    display: block;
    width: 100%;
    min-height: 3rem;
    border: 0;
    background: transparent;
    color: var(--agri-muted);
    font-size: 1rem;
    font-weight: 600;
    text-align: center;
    cursor: pointer;
}

/* --- Nagemeld --- */

.trip-late__head h2 {
    margin: 0;
    font-size: var(--agri-h4-size);
}

.trip-late__head p {
    margin: .15rem 0 .9rem;
    color: var(--agri-muted);
    font-size: .9rem;
}

.trip-late__options {
    display: flex;
    flex-direction: column;
    gap: .4rem;
}

.trip-late__option {
    /* 20 mm; dit wordt met handschoenen aan getikt naast een draaiende motor */
    min-height: 4.7rem;
    padding: .6rem 1rem;
    border: 0;
    border-radius: 1rem;
    background: var(--agri-panel);
    box-shadow: inset 0 0 0 1px var(--agri-border);
    color: var(--agri-ink);
    font-size: 1.02rem;
    font-weight: 600;
    text-align: left;
    cursor: pointer;
}

.trip-late__option--chosen {
    background: var(--agri-accent);
    color: #fff;
    box-shadow: none;
}

/* --- Dagkiezer --- */

.trip-daypicker__head h2 {
    margin: 0 0 .8rem;
    font-size: var(--agri-h4-size);
}

.trip-daypicker__grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: .4rem;
}

.trip-daypicker__day {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .15rem;
    /* 20 mm ook hier: een dag missen betekent naar de verkeerde rit kijken */
    min-height: 4.7rem;
    border: 0;
    border-radius: .9rem;
    background: var(--agri-subtle);
    color: var(--agri-ink);
    font-size: .85rem;
    font-weight: 600;
    cursor: pointer;
}

.trip-daypicker__day--today {
    box-shadow: inset 0 0 0 2px var(--agri-accent);
}

.trip-daypicker__day--selected {
    background: var(--agri-accent);
    color: #fff;
}

.trip-daypicker__badge {
    font-size: .62rem;
    font-weight: 700;
    opacity: .85;
}

.trip-daypicker__close {
    width: 100%;
    margin-top: .9rem;
}

/* --- Home-tab: bonnen voor de boekhouding (HomeScreen, ReceiptListSheet, ReceiptNoteSheet) ---
   Statuskleuren volgen de factuur-flairs (rdi-flair): wachtend de amber waarschuwingstint,
   verstuurd het vaste semantische groen, mislukt de themadanger. Alles in gewone kast. */

/* De inhoud begint onder de vaste avatarband (.screen-page__top, ~5.3rem vanaf de
   schermrand); de surface-padding (1.1–2rem) zit daar al onder, de rest komt hier bij */
.home-screen {
    display: grid;
    gap: .95rem;
    align-content: start;
    padding-top: 3.7rem;
}

/* Kalm offline-signaal: neutrale chip met een amberen stip — informeert, alarmeert niet */
.home-offline {
    display: flex;
    gap: .55rem;
    align-items: center;
    justify-self: start;
    padding: .5rem .9rem;
    border: 1px solid color-mix(in srgb, var(--agri-ink) 8%, transparent);
    border-radius: 999px;
    background: var(--agri-subtle);
    color: var(--agri-muted);
    font-size: .88rem;
    font-weight: 600;
    line-height: 1.35;
}

.home-offline__dot {
    flex: 0 0 auto;
    width: .55rem;
    height: .55rem;
    border-radius: 999px;
    background: var(--agri-warning);
}

/* De bonnenkaart: bovenin de rij die de lijst opent, onderin de primaire fotografeer-knop */
.home-receipts {
    overflow: hidden;
    border: 1px solid color-mix(in srgb, var(--agri-ink) 7%, transparent);
    border-radius: 22px;
    background: var(--agri-panel);
    box-shadow: 0 14px 34px rgba(16, 42, 38, .06);
}

.home-receipts__open {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto auto;
    gap: .85rem;
    align-items: center;
    width: 100%;
    padding: 1rem 1.05rem .9rem;
    border: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
    transition: background-color 150ms ease;
}

.home-receipts__open:hover,
.home-receipts__open:focus-visible {
    background: var(--agri-subtle);
}

.home-receipts__icon {
    display: grid;
    place-items: center;
    width: 2.9rem;
    height: 2.9rem;
    border-radius: 14px;
    background: var(--agri-accent-soft);
    color: var(--agri-accent);
}

.home-receipts__copy {
    display: grid;
    gap: .12rem;
    min-width: 0;
}

.home-receipts__copy strong {
    font-size: 1.05rem;
    font-weight: 700;
}

.home-receipts__state {
    overflow: hidden;
    color: var(--agri-muted);
    font-size: .88rem;
    font-weight: 600;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.home-receipts__state--failed {
    color: var(--agri-danger);
}

/* Teller van de wachtende bonnen: amber (er ligt werk), niet het rode alarm van badge-bubble */
.home-receipts__badge {
    display: grid;
    min-width: 1.55rem;
    height: 1.55rem;
    place-items: center;
    padding: 0 .45rem;
    border-radius: 999px;
    background: var(--agri-warning-soft);
    color: var(--agri-warning);
    font-size: .86rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.home-receipts__chevron {
    color: color-mix(in srgb, var(--agri-ink) 30%, white);
}

.home-receipts__capture {
    display: flex;
    gap: .55rem;
    align-items: center;
    justify-content: center;
    width: calc(100% - 2.1rem);
    min-height: 3.15rem;
    margin: 0 1.05rem 1.05rem;
    border: 0;
    border-radius: 999px;
    background: var(--agri-accent);
    color: #fff;
    font: inherit;
    font-size: .98rem;
    font-weight: 650;
    cursor: pointer;
    transition: background-color 150ms ease, color 150ms ease, box-shadow 150ms ease;
}

.home-receipts__capture:hover,
.home-receipts__capture:focus-visible {
    background: #fff;
    color: var(--agri-accent);
    box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--agri-accent) 42%, white);
}

/* --- Bonnenlijst-sheet --- */
.receipt-sheet .insp-sheet__scroll {
    display: grid;
    gap: .55rem;
    align-content: start;
}

.receipt-row {
    display: grid;
    gap: .5rem;
    padding: .6rem;
    border: 1px solid var(--agri-border);
    border-radius: 16px;
    background: var(--agri-panel);
}

.receipt-row__main {
    display: grid;
    grid-template-columns: 3.4rem minmax(0, 1fr);
    gap: .75rem;
    align-items: center;
    padding: 0;
    border: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.receipt-row__thumb {
    display: grid;
    width: 3.4rem;
    height: 3.4rem;
    place-items: center;
    overflow: hidden;
    border-radius: 12px;
    background: var(--agri-subtle);
    color: var(--agri-muted);
}

.receipt-row__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.receipt-row__copy {
    display: grid;
    gap: .3rem;
    min-width: 0;
}

.receipt-row__copy strong {
    font-size: .95rem;
    font-weight: 650;
}

.receipt-row__meta {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
    align-items: center;
}

/* Zelfde vorm als .rdi-flair; eigen naam omdat de kleurtoewijzing bij de bonstatussen hoort */
.receipt-flair {
    display: inline-flex;
    gap: .3rem;
    align-items: center;
    padding: .22rem .6rem;
    border-radius: 999px;
    font-size: .8rem;
    font-weight: 650;
    white-space: nowrap;
}

.receipt-flair--pending {
    background: var(--agri-warning-soft);
    color: var(--agri-warning);
}

.receipt-flair--uploaded {
    background: var(--status-done-soft);
    color: var(--status-done);
}

.receipt-flair--failed {
    background: var(--agri-danger-soft);
    color: var(--agri-danger);
}

/* Uploadmoment naast de verstuurd-flair */
.receipt-row__sent {
    color: var(--agri-muted);
    font-size: .82rem;
    font-weight: 600;
}

/* Notitie-chip onder de rij: mét notitie de tekst als preview (afgekapt op één regel),
   zonder notitie de gestreepte toevoegen-variant (wb-chip--muted) */
.receipt-row__notechip {
    justify-self: start;
    max-width: 100%;
}

.receipt-row__notechip span {
    /* min-width 0: zonder mag het flex-kind niet krimpen en kapt niets af */
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Lege staat in de stijl van de andere lege lijsten: gedempt, vriendelijk, gecentreerd */
.receipt-sheet__empty {
    display: grid;
    gap: .35rem;
    justify-items: center;
    margin: .4rem 0 .9rem;
    padding: 1.6rem 1rem;
    border: 1px dashed var(--agri-border);
    border-radius: 18px;
    color: var(--agri-muted);
    text-align: center;
}

.receipt-sheet__empty .app-icon {
    margin-bottom: .25rem;
    color: color-mix(in srgb, var(--agri-ink) 30%, white);
}

.receipt-sheet__empty strong {
    color: var(--agri-ink);
    font-size: .98rem;
}

.receipt-sheet__empty span {
    max-width: 24rem;
    font-size: .9rem;
    line-height: 1.45;
}

/* Waarschuwing in de afmeld-bevestiging: er liggen nog bonnen op dit toestel.
   Gescoped mét ouder, anders wint de algemene regel .signout-sheet p op specificiteit */
.signout-sheet .signout-sheet__receipts {
    margin: -.2rem .35rem .35rem;
    padding: .6rem .8rem;
    border-radius: 12px;
    background: var(--agri-warning-soft);
    color: var(--agri-warning);
    font-size: .9rem;
    font-weight: 600;
    line-height: 1.4;
    text-align: center;
}

/* Onderaan het bestand (bronvolgorde wint bij gelijke specificiteit): veld-klassen die
   met 'font: inherit' de 16px-ondergrens van de basisregel wegdrukken krijgen de
   iOS-zoombescherming hier expliciet terug — iOS zoomt in op velden onder de 16px
   en zoomt daarna niet vanzelf uit */
.insp-input,
.dossier-select,
.tech-mm__input,
.insp-stepper input,
.insp-price input {
    font-size: max(1rem, 16px);
}