: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);
    --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;
}

* {
    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%;
    /* 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;
    background: var(--agri-canvas);
    color: var(--agri-ink);
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    letter-spacing: 0;
}

button,
input {
    font: inherit;
}

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 12px 32px rgba(31, 41, 55, .09), 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;
}

.search-box {
    display: flex;
    align-items: center;
    gap: .9rem;
    width: 100%;
    min-height: 4.6rem;
    padding: 0 1.35rem;
    border-radius: 999px;
    color: var(--agri-ink);
}

.search-box input {
    width: 100%;
    min-width: 0;
    border: 0;
    outline: none;
    background: transparent;
    color: var(--agri-ink);
    font-size: clamp(1.35rem, 5vw, 2rem);
    font-weight: 650;
}

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

.relations-page {
    --relations-top-height: 13rem;
    display: grid;
    gap: 1.2rem;
    padding-top: calc(var(--relations-top-height) + .25rem);
}

.relations-page__top {
    position: fixed;
    top: 0;
    left: 50%;
    z-index: 16;
    display: grid;
    gap: 1.6rem;
    width: min(100%, 920px);
    margin: 0;
    padding: clamp(1.55rem, 5.2vw, 2.4rem) var(--app-shell-inline-padding) clamp(1.65rem, 5.2vw, 2.2rem);
    background: rgba(244, 244, 243, .84);
    box-shadow: 0 14px 34px rgba(16, 42, 38, .05);
    cursor: pointer;
    transform: translateX(-50%);
    -webkit-backdrop-filter: blur(18px) saturate(1.04);
    backdrop-filter: blur(18px) saturate(1.04);
}

.relations-page__top::after {
    position: absolute;
    right: 0;
    bottom: -1.6rem;
    left: 0;
    height: 1.6rem;
    background: linear-gradient(180deg, rgba(244, 244, 243, .58), rgba(244, 244, 243, 0));
    content: "";
    pointer-events: none;
}

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

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

.mobile-list-header h2 {
    margin: 0;
    color: var(--agri-ink);
    font-size: clamp(1.42rem, 5.15vw, 1.86rem);
    font-weight: 500;
    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);
}

.relations-page .search-box,
.order-flow-header .search-box {
    min-height: clamp(4.2rem, 13vw, 4.7rem);
    gap: 1rem;
    padding: 0 clamp(1.25rem, 4vw, 1.75rem);
    border-color: rgba(16, 42, 38, .055);
    border-radius: 28px;
    background: rgba(255, 255, 255, .72);
    cursor: text;
    box-shadow:
        0 16px 44px rgba(16, 42, 38, .075),
        inset 0 1px 0 rgba(255, 255, 255, .9);
}

.relations-page .search-box input,
.order-flow-header .search-box input {
    font-size: clamp(1.32rem, 5.2vw, 1.78rem);
    font-weight: 440;
}

.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: 1rem .45rem .5rem;
    color: var(--agri-ink);
    font-size: 1rem;
    font-weight: 500;
}

.relations-list-card {
    overflow: hidden;
    border-radius: 22px;
    background: #fff;
    box-shadow: 0 12px 34px rgba(16, 42, 38, .06);
}

.relation-list-item {
    display: grid;
    grid-template-columns: 3.65rem minmax(0, 1fr);
    gap: .75rem;
    align-items: center;
    width: 100%;
    min-height: 4.8rem;
    padding: .62rem .9rem .62rem .8rem;
    border: 0;
    background: #fff;
    color: var(--agri-ink);
    text-align: left;
    transition: background-color 150ms ease, transform 150ms ease;
}

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

.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: 3.55rem;
    height: 3.55rem;
    border: 0;
    background: #edf2ee;
    box-shadow: none;
    color: var(--agri-ink);
    font-size: 1rem;
    font-weight: 500;
}

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

.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: .9rem;
    font-weight: 500;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.relations-alpha-index {
    position: fixed;
    top: calc(var(--relations-top-height, 13rem) + .4rem);
    bottom: calc(5.15rem + .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;
}

.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;
}

.profile-hero {
    height: var(--profile-hero-h);
    overflow: hidden;
    background: color-mix(in srgb, var(--agri-accent) 14%, white);
}

.profile-hero__photo {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 35%;
}

.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. */
.profile-overlay-panel--profile-hero .profile-overlay-panel__content {
    position: absolute;
    inset: 0;
    z-index: 1;
    display: block;
    overflow: hidden auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-y;
    pointer-events: none;
    scrollbar-width: none;
}

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

/* Alleen op de sheet zelf mag je vegen; de spacer laat de hero (en de sleep-om-te-sluiten
   van het paneel) met rust. */
.user-profile-sheet-spacer {
    height: calc(var(--profile-hero-h) - 26px);
}

.user-profile-sheet {
    min-height: calc(100% - (var(--profile-hero-h) - 26px));
    border-radius: 26px 26px 0 0;
    background: #fff;
    box-shadow: 0 -12px 38px rgba(16, 42, 38, .12);
    pointer-events: auto;
}

/* 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;
    padding: .25rem clamp(1rem, 4vw, 2rem) max(1.6rem, env(safe-area-inset-bottom));
}

.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;
    min-height: 15.5rem;
    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;
    background-position: center;
    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 {
    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;
    transition: background-color 150ms ease, color 150ms ease, transform 150ms ease;
}

.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 {
    align-items: stretch;
    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;
    grid-template-columns: 5.8rem minmax(0, 1fr) 5.8rem;
    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__preview {
    position: relative;
    display: grid;
    min-height: 0;
    place-items: center;
    overflow: hidden;
    background: #010302;
}

.photo-camera-panel__video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.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;
    }
}

.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 {
    min-height: 3rem;
    margin-top: .25rem;
    border: 0;
    border-radius: 999px;
    background: var(--agri-accent);
    color: #fff;
}

.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);
}

@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);
    min-height: 5.15rem;
    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;
}

.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: 1px solid rgba(16, 42, 38, .08);
    border-radius: 24px;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, .86), rgba(245, 247, 246, .68)),
        rgba(255, 255, 255, .58);
    box-shadow:
        0 10px 24px rgba(16, 42, 38, .1),
        inset 0 1px 0 rgba(255, 255, 255, .86);
    transform: translate3d(var(--glass-tabbar-lens-offset, 0%), 0, 0);
    transition:
        transform 520ms cubic-bezier(.18, .92, .22, 1),
        box-shadow 260ms ease,
        background-color 260ms ease;
    pointer-events: none;
    -webkit-backdrop-filter: blur(14px) saturate(1.25);
    backdrop-filter: blur(14px) saturate(1.25);
}

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

.glass-tabbar__lens::before {
    background: linear-gradient(115deg, rgba(255, 255, 255, .58), transparent 36%, rgba(255, 255, 255, .28));
    mix-blend-mode: screen;
    opacity: .52;
}

.glass-tabbar__lens::after {
    inset: .18rem;
    border: 1px solid rgba(255, 255, 255, .32);
    background: transparent;
    opacity: .56;
}

.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.8rem 1.3rem;
    gap: .3rem;
    align-items: center;
    justify-items: center;
    min-width: 0;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: var(--agri-ink);
    font-size: clamp(.68rem, 2.45vw, .9rem);
    font-weight: 600;
    line-height: 1;
    opacity: .72;
    transition: color 220ms ease, opacity 220ms ease, transform 220ms ease;
}

.glass-tabbar__item.is-active {
    color: var(--agri-ink);
    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;
}

.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;
}

.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;
    font-size: clamp(1.15rem, 4vw, 1.5rem);
    font-weight: 850;
}

.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;
}

.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 {
        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;
}

.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;
    z-index: 4;
    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: 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;
    width: 5.6rem;
    height: 1.35rem;
    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;
    transform: translate3d(0, 0, 0);
    pointer-events: auto;
}

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

.fullscreen-flow-panel__back {
    display: grid;
    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);
    overflow: 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%);
}

@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;
}

.order-flow-panel > .fullscreen-flow-panel__back {
    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.1rem;
    margin-bottom: 1.1rem;
    /* Zelfde top-padding als .relations-page__top: winkelmandje op exact dezelfde hoogte als de profielavatar */
    padding: clamp(1.55rem, 5.2vw, 2.4rem) 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;
    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;
}

.order-location-picker .search-box {
    min-height: 3.6rem;
    gap: .7rem;
    padding: 0 1.15rem;
    background: var(--agri-subtle);
}

.order-location-picker .search-box input {
    font-size: 1.05rem;
    font-weight: 500;
}

.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 {
    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;
}

.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;
}

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

.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__back {
    display: none;
}

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

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

/* 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 */
    --entry-top-height: 11.9rem;
    display: grid;
    align-content: start;
    gap: 1.15rem;
    padding-top: calc(var(--entry-top-height) + .25rem);
    min-height: calc(100dvh - 12rem);
}

/* Afgerond-scherm: extra Terug-knop in de kop */
.entry-worklist--finished {
    --entry-top-height: 17.4rem;
}

/* 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.15rem;
    width: min(100%, 920px);
    margin: 0;
    padding: clamp(1.55rem, 5.2vw, 2.4rem) var(--app-shell-inline-padding, 1rem) .8rem;
    /* Dicht: de kentekenplaten mogen niet door de kop heen schemeren */
    background: #f4f4f3;
    box-shadow: 0 14px 34px rgba(16, 42, 38, .05);
    transform: translateX(-50%);
    -webkit-backdrop-filter: blur(18px) saturate(1.04);
    backdrop-filter: blur(18px) saturate(1.04);
}

.entry-worklist__top::after {
    position: absolute;
    right: 0;
    bottom: -1.6rem;
    left: 0;
    height: 1.6rem;
    background: linear-gradient(180deg, rgba(244, 244, 243, .58), rgba(244, 244, 243, 0));
    content: "";
    pointer-events: none;
}

/* Zelfde glass-zoekbalk als de relatiepagina, met de compactere maat uit de mockup */
.entry-worklist .search-box {
    min-height: clamp(4.2rem, 13vw, 4.7rem);
    gap: .85rem;
    padding: 0 clamp(1.25rem, 4vw, 1.75rem);
    border-color: rgba(16, 42, 38, .055);
    border-radius: 28px;
    background: rgba(255, 255, 255, .72);
    cursor: text;
    box-shadow:
        0 16px 44px rgba(16, 42, 38, .075),
        inset 0 1px 0 rgba(255, 255, 255, .9);
}

.entry-worklist .search-box input {
    font-size: clamp(1.2rem, 4.6vw, 1.4rem);
    font-weight: 440;
}

.entry-worklist .search-box .app-icon {
    color: #8b8d91;
}

.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: 600;
    line-height: 1;
    opacity: .72;
    transition: opacity 200ms ease, background-color 200ms ease;
    cursor: pointer;
}

/* De glazen lens markeert de actieve tab; het item zelf licht alleen op */
.entry-tabbar__item.is-active {
    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);
}

.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 {
    transform: translate3d(0, 0, 0);
}

.entry-dossier-panel.fullscreen-flow-panel--leaving {
    transform: translate3d(100%, 0, 0);
}

.entry-dossier-panel > .fullscreen-flow-panel__back {
    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;
    padding: clamp(1.55rem, 5.2vw, 2.4rem) 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;
}

.autosave-chip--pending {
    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;
}

/* 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;
    text-transform: uppercase;
}

/* 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;
}

.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;
    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;
}

@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 {
        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,
    .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;
    text-transform: uppercase;
    letter-spacing: .045em;
    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;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.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;
    letter-spacing: .03em;
    text-transform: uppercase;
    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 {
    transform: translate3d(0, 0, 0);
}

.topup-order-panel.fullscreen-flow-panel--leaving {
    transform: translate3d(100%, 0, 0);
}

.topup-order-panel > .fullscreen-flow-panel__back {
    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;
}

.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: 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;
}

/* Instructie/opmerking als terzijde onder de omschrijving: klein en gedempt */
.topup-regel__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;
}

/* Werkbon-opmerking: in signaalrood — dit zijn aanwijzingen van de werkplaats
   ("Let op! ...") die de monteur niet mag missen. Cursief blijft het onderscheid
   met de gewone instructieregel erboven. */
.topup-regel__note--wb {
    color: var(--agri-danger);
    font-style: italic;
}

/* 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 {
    transform: translate3d(0, 0, 0);
}

.inspection-order-panel.fullscreen-flow-panel--leaving {
    transform: translate3d(100%, 0, 0);
}

.inspection-order-panel > .fullscreen-flow-panel__back {
    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: 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;
    text-transform: uppercase;
    letter-spacing: .03em;
}

.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;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.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: 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 {
    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;
    /* Alleen de greep is sleepbaar (touch-action: none), zodat de inhoud eronder blijft scrollen */
    touch-action: none;
    cursor: grab;
}

.insp-drag-sheet__grip:active {
    cursor: grabbing;
}

.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;
}

.insp-drag-backdrop--open {
    opacity: 1;
}

/* 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;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.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;
}

.insp-articles {
    display: grid;
    gap: .35rem;
    max-height: 11.5rem;
    margin-top: .45rem;
    padding: .15rem;
    overflow: 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;
}

/* 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;
}

/* --- Viewer-acties onder de fullscreen foto --- */
.insp-viewer__actions {
    position: absolute;
    right: 1rem;
    bottom: max(1rem, env(safe-area-inset-bottom));
    left: 1rem;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .55rem;
}

.insp-viewer__actions button {
    min-height: 3.2rem;
    border: 0;
    border-radius: 999px;
    background: rgba(255, 255, 255, .16);
    color: #fff;
    font: inherit;
    font-size: .95rem;
    font-weight: 650;
    cursor: pointer;
    transition: background-color 150ms ease;
}

.insp-viewer__actions button:hover,
.insp-viewer__actions button:focus-visible {
    background: rgba(255, 255, 255, .3);
}

.insp-viewer__delete {
    color: #ffb1ab;
}

/* --- Snackbar met Ongedaan maken: boven de onderbalk, onder de sheets --- */
.insp-snackbar {
    position: fixed;
    bottom: max(6.4rem, calc(env(safe-area-inset-bottom) + 5.9rem));
    left: 50%;
    z-index: 36;
    display: flex;
    gap: .9rem;
    align-items: center;
    max-width: min(92vw, 26rem);
    padding: .75rem 1.05rem;
    border-radius: 16px;
    background: var(--agri-teal);
    color: #fff;
    font-size: .9rem;
    font-weight: 600;
    line-height: 1.3;
    box-shadow: 0 16px 40px rgba(16, 42, 38, .35);
    transform: translateX(-50%);
    animation: entrySheetUp 260ms cubic-bezier(.32, .72, .33, 1) both;
}

.insp-snackbar button {
    flex: 0 0 auto;
    padding: .3rem .2rem;
    border: 0;
    background: transparent;
    color: #9fd88a;
    font: inherit;
    font-size: .9rem;
    font-weight: 750;
    cursor: pointer;
    white-space: nowrap;
}

/* --- 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-viewer__actions button,
    .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 {
    transform: translate3d(0, 0, 0);
}

.technical-order-panel.fullscreen-flow-panel--leaving {
    transform: translate3d(100%, 0, 0);
}

.technical-order-panel > .fullscreen-flow-panel__back {
    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);
}

/* 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: 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;
    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;
    }
}

.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);
}

/* Item-highlight bij terugkeer uit het detail (1,5s) */
/* Merkenkiezer in de banden-sheet: scrollbare lijst uit de hulptabel 'tires';
   typen in het merkveld filtert live, tikken kiest (zelfde idioom als de artikellijst) */
.tech-brandlist {
    display: grid;
    gap: .3rem;
    max-height: 10.5rem;
    margin-top: .45rem;
    padding: .15rem;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    border: 1px solid color-mix(in srgb, var(--agri-ink) 7%, transparent);
    border-radius: 14px;
    background: var(--agri-subtle);
}

.tech-brandlist__item {
    display: flex;
    gap: .5rem;
    align-items: center;
    justify-content: space-between;
    min-height: 2.6rem;
    padding: 0 .8rem;
    border: 1px solid transparent;
    border-radius: 10px;
    background: var(--agri-panel);
    color: var(--agri-ink);
    font: inherit;
    font-size: .95rem;
    font-weight: 650;
    text-align: left;
    cursor: pointer;
    transition: border-color 150ms ease, color 150ms ease;
}

.tech-brandlist__item:hover,
.tech-brandlist__item:focus-visible {
    border-color: var(--agri-accent);
}

.tech-brandlist__item.is-active {
    border-color: var(--agri-accent);
    color: var(--agri-accent);
}

/* 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;
}

/* 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-uppercase {
    text-transform: uppercase;
}

.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;
    max-height: min(88dvh, 52rem);
}

.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;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.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;
    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;
}