/*
 * Lely Corporate Identity — design tokens & herbruikbare componentklassen.
 *
 * Bron: officiële Lely brand-kleurenpiramide.
 *  - Mandatory: Red + White (primair, logo & belangrijkste CTA).
 *  - Supportive: Black + Red Dark/Darkest + Grey-schaal (structuur/navigatie/
 *    achtergronden, meerderheid van de UI).
 *  - Accent: Green (digitaal-only, spaarzaam voor success-states) + Yellow
 *    (digitaal-only, exclusief als herkenningskleur voor de "Slim werken"-
 *    module — zie --module-accent verderop voor de per-module toepassing).
 *
 * Dit bestand is de ENIGE plek waar deze kleurwaarden gedefinieerd staan.
 * Templates gebruiken de CSS-variabelen (rechtstreeks of via Tailwind's
 * arbitrary-value syntax, bv. `bg-[var(--lely-grey-light)]`) of de kant-en-
 * klare componentklassen hieronder (`.lely-card`, `.lely-badge-*`, ...) in
 * plaats van los-vaste Tailwind kleurutilities (bg-red-700, bg-blue-100, ...)
 * of hardcoded hexcodes.
 */

:root {
    /* --- Mandatory --- */
    --lely-red: #C30A14;
    --lely-white: #FFFFFF;

    /* --- Supportive --- */
    --lely-black: #000000;
    --lely-red-dark: #9E0211;
    --lely-red-darkest: #770300;
    --lely-grey-light: #EFECE8;
    --lely-grey: #DFDBD4;
    --lely-grey-dark: #D0CAC0;

    /* Lichtere tint dan Grey Light, specifiek voor achtergronden/vlakken
       (pagina-achtergrond, cards, topbar, tabs) — Grey Light zelf voelt
       daar te donker aan; deze surface-tint volgt dezelfde warme, subtiele
       ondertoon als de rest van de grijsschaal. */
    --lely-surface: #FAF9F8;

    /* --- Accent (digital-only) --- */
    --lely-accent-green: #00A63E;
    --lely-accent-yellow: #C05800;

    /* Donkerdere varianten voor TEKST (WCAG 2.2 AA, ≥4,5:1 op wit en op
       --lely-surface). De originele accentkleuren blijven voor decoratie
       zonder tekst: randen, balkjes, grafische accenten. */
    --lely-accent-green-strong: #007A2E;
    --lely-accent-yellow-strong: #B04F00;

    /* --- Lay-outvernieuwing: neutrale schaal + statuskleuren ---
       Canonieke set voor de vernieuwde componentklassen (btn-primary,
       status-badge, section-card, ...). De oudere --lely-grey-* tokens
       blijven bestaan voor niet-gemigreerde markup en out-of-scope
       pagina's; nieuwe componenten gebruiken uitsluitend deze namen. */
    --lely-red-hover: #A00810;
    --lely-red-tint: #FDECEC;
    --dark-slate: #212529;
    /* Kleur van veldlabels (Tailwind text-gray-700 ≈ oklch .373/.034/259.7)
       — vastgelegd als eigen token zodat componentklassen (stat_row e.d.)
       exact dezelfde labelkleur gebruiken zonder Tailwind-utility. */
    --text-label: #364153;
    --text-secondary: #616161;
    --medium-gray: #757575;
    --light-bg: #F8F9FA;
    /* Pagina-achtergrond achter de witte kaarten op alle
       modulepagina's (body[data-scope]). --text-secondary (#616161)
       haalt hierop ~5,7:1 contrast (≥4,5:1). */
    --page-bg: #F7F5F3;
    --surface: var(--lely-white);
    --border-gray: #E0E0E0;
    --border-strong: #BDBDBD;
    --neutral-bg: #F1F3F5;
    --success-green: #2E7D32;
    --success-bg: #E8F5E9;
    --success-text: #1B5E20;
    --warning-bg: #FFF3E0;
    --warning-text: #B45309;
    --danger-bg: #FDECEC;
    --danger-text: #B71C1C;
    /* Gedeelde tooltip (data-tip): dezelfde gele hint als voorheen. */
    --tooltip-bg: #FEF9C3;
    --tooltip-text: #713F12;
    --tooltip-border: #FACC15;
    /* Geselecteerde keuze-/radio-kaartjes: groene omkadering zoals
       voorheen (decoratief, geen knoppen). --text op de lichte tint
       blijft ruim boven 4,5:1. */
    --select-border: var(--lely-accent-green);
    --select-bg: rgba(0, 166, 62, 0.07);
    /* Sectieband-titels en tabelkoppen op de configure-pagina delen
       deze stap in de schaal (was 13px/12px). */
    --section-label-fs: 14px;

    /* --- Ubuntu gewicht-hiërarchie ---
       Light voor body-tekst, Regular voor standaardtekst, Medium voor
       subkoppen/nadruk, Bold enkel voor koppen (H1-H3) en CTA's. */
    --font-weight-light: 300;
    --font-weight-regular: 400;
    --font-weight-medium: 500;
    --font-weight-bold: 700;
}

body {
    font-weight: var(--font-weight-light);
}

h1, h2, h3 {
    font-weight: var(--font-weight-bold);
    color: var(--lely-black);
}

/* ============ Typografie-hulpklassen ============ */

.lely-heading {
    font-weight: var(--font-weight-bold);
    color: var(--lely-black);
}

.lely-subheading {
    font-weight: var(--font-weight-medium);
    color: var(--lely-black);
}

/* ============ Kaarten / panelen ============ */

.lely-card {
    background-color: var(--lely-surface);
    border-radius: 0.5rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.04);
}

.lely-card-white {
    background-color: var(--lely-white);
    border-radius: 0.5rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.04);
}

/* ============ Primaire CTA-knop ============
   Rood wordt uitsluitend voor de belangrijkste actie ingezet; hover/active
   schuiven door naar Red Dark/Darkest (ratio-of-color-richtlijn). */

.btn-lely-primary {
    background-color: var(--lely-red);
    color: var(--lely-white);
    font-weight: var(--font-weight-bold);
    transition: background-color 0.15s ease;
}

.btn-lely-primary:hover {
    background-color: var(--lely-red-dark);
}

.btn-lely-primary:active {
    background-color: var(--lely-red-darkest);
}

/* Secundaire/destructieve knop: zelfde rode familie, iets ingehouden
   (Red Dark als basis in plaats van Red) zodat de primaire CTA visueel
   dominant blijft. */
.btn-lely-danger {
    background-color: var(--lely-red-dark);
    color: var(--lely-white);
    font-weight: var(--font-weight-bold);
    transition: background-color 0.15s ease;
}

.btn-lely-danger:hover {
    background-color: var(--lely-red-darkest);
}

/* Neutrale actieknop (bv. "Bewerken", "Kopiëren"): grijsschaal in plaats
   van Tailwind's generieke bg-gray-800, zodat rood exclusief voorbehouden
   blijft voor de primaire/destructieve acties. */
.btn-lely-secondary {
    background-color: var(--lely-black);
    color: var(--lely-white);
    font-weight: var(--font-weight-medium);
    transition: background-color 0.15s ease;
}

.btn-lely-secondary:hover {
    background-color: rgba(0, 0, 0, 0.8);
}

/* ============ Status badges ============
   Vervangt de "rainbow" van bg-blue-100/bg-purple-100/... door de brand-
   palette: grijstinten voor de meeste (tussen)statussen, groen als
   digitale uitzondering voor "afgerond/succesvol", rood spaarzaam voor
   kritieke/geblokkeerde statussen. */

.lely-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    font-weight: var(--font-weight-medium);
    line-height: 1.1;
    border-radius: 9999px;
    border: 1px solid transparent;
}

.lely-badge-neutral {
    background-color: var(--lely-surface);
    color: var(--lely-black);
    border-color: var(--lely-grey-dark);
}

.lely-badge-progress {
    background-color: var(--lely-surface);
    color: var(--lely-black);
    border-color: var(--lely-grey-dark);
}

.lely-badge-success {
    background-color: var(--lely-accent-green-strong);
    color: var(--lely-white);
    font-weight: var(--font-weight-bold);
    border-color: var(--lely-accent-green-strong);
}

.lely-badge-danger {
    background-color: var(--lely-red);
    color: var(--lely-white);
    border-color: var(--lely-red-dark);
}

/* ============ Accent CTA-knop (groen) ============
   Uitsluitend voor de "Nieuwe Offerte Aanmaken"-actie op het dashboard,
   zodat deze knop echt opvalt boven de offertetabel (digital-only accent). */

.btn-lely-accent {
    background-color: var(--lely-accent-green-strong);
    color: var(--lely-white);
    font-weight: var(--font-weight-bold);
    transition: background-color 0.15s ease;
}

.btn-lely-accent:hover {
    background-color: #005F25;
}

/* ============ Uitklapbare wizard (dashboard "Nieuwe Offerte") ============
   grid-template-rows 0fr -> 1fr geeft een vloeiende hoogte-animatie die
   zich automatisch aanpast aan wisselende inhoud (bv. het Klantinfo-blok
   dat na klantselectie verschijnt), zonder dat JS een pixelhoogte moet
   berekenen. Gecombineerd met opacity/transform voor een premium, vloeiend
   open/dicht-gevoel. */

.wizard-collapse {
    display: grid;
    grid-template-rows: 0fr;
    opacity: 0;
    transform: translateY(-6px);
    transition: grid-template-rows 0.35s ease, opacity 0.25s ease, transform 0.3s ease;
}

.wizard-collapse.wizard-collapse-open {
    grid-template-rows: 1fr;
    opacity: 1;
    transform: translateY(0);
}

.wizard-collapse > * {
    overflow: hidden;
    min-height: 0;
}

.wizard-collapse.wizard-collapse-open > * {
    overflow: visible;
}

/* Actiebalk onderaan een inklappaneel (bv. de Nieuwe-offerte-wizard):
   dunne bovenrand in de token-kleur en 16px padding. */
.wizard-actions-bar {
    border-top: 1px solid var(--border-gray);
    padding-top: 16px;
}

/* ============ Outline-knop (wit met rode rand/tekst) ============
   Voor secundaire regel-acties binnen een sectie (bv. "+ Extra regel
   toevoegen", "+ Bulk artikelen toevoegen"). Standaard wit met rode
   rand/tekst; bij hover keert dit om naar een zwarte achtergrond met
   witte rand/tekst. */

.btn-lely-outline-red {
    background-color: var(--lely-white);
    border: 1px solid var(--lely-red);
    color: var(--lely-red);
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.btn-lely-outline-red:hover {
    background-color: var(--lely-black);
    border-color: var(--lely-white);
    color: var(--lely-white);
}

/* ============ Module-accent ============
   --module-accent volgt de actieve module via data-module op <body> (gezet
   in base.html vanuit active_module). De waarden zijn gespiegeld aan
   MODULE_TILES[*].accent in app/nav.py — daar aanpassen betekent hier
   aanpassen. Verbruikers (tabs, moduletitel) vallen terug op lely-red. */

[data-module="cpq"]   { --module-accent: var(--lely-red); }
[data-module="sla"]   { --module-accent: var(--lely-accent-green-strong); }
[data-module="leren"] { --module-accent: var(--lely-accent-yellow-strong); }

/* ============ Bovenbalk: één rij met merk + paginalinks + acties ============
   De links staan in dezelfde balk als het logo (voorheen een aparte witte
   tab-rij eronder). Ze rekken de volle 64px-hoogte zodat de actieve
   onderlijn exact op de onderrand van de balk ligt. De accentkleur volgt de
   module via --module-accent (rood CPQ, groen SLA, geel Slim werken). */

.dock-topbar {
    display: flex;
    align-items: stretch;
    justify-content: space-between;
    gap: 16px;
    height: 64px;
}

.dock-topbar-left {
    display: flex;
    align-items: stretch;
    gap: 20px;
    min-width: 0;
    flex: 1 1 auto;
}

.dock-brand {
    display: flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
    color: inherit;
    flex-shrink: 0;
}

.dock-nav-wrap {
    display: flex;
    align-items: stretch;
    gap: 2px;
    min-width: 0;
    /* Horizontaal clippen (overflow-metriek + geen overlap), maar dropdowns
       (Meer-paneel, Admin-menu) móéten onder de balk uitsteken: clip in x,
       visible in y. overflow:hidden zou beide assen afkappen. */
    overflow-x: clip;
    overflow-y: visible;
}

.dock-nav {
    display: flex;
    align-items: stretch;
    gap: 2px;
    min-width: 0;
    flex: 0 1 auto;
}

/* Het hidden-attribuut verliest van display:flex in Tailwind-utility's;
   daarom expliciet forceren. */
#dock-nav-more {
    display: flex;
    align-items: stretch;
}

#dock-nav-more[hidden] {
    display: none;
}

.dock-nav-link {
    display: inline-flex;
    align-items: center;
    padding: 0 12px;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.2;
    color: var(--dark-slate);
    text-decoration: none;
    white-space: nowrap;
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    transition: color 0.15s ease, border-color 0.15s ease;
}

.dock-nav-link:hover {
    color: var(--module-accent, var(--lely-red));
    border-bottom-color: var(--module-accent, var(--lely-red));
}

.dock-nav-link:focus-visible {
    outline: 2px solid var(--module-accent, var(--lely-red));
    outline-offset: -2px;
}

.dock-nav-link-active {
    color: var(--module-accent, var(--lely-red));
    border-bottom-color: var(--module-accent, var(--lely-red));
    font-weight: 600;
}

.dock-nav-burger {
    display: none;
    align-items: center;
    padding: 0 8px;
    color: var(--dark-slate);
    background: none;
    border: none;
    cursor: pointer;
}

.dock-nav-burger:focus-visible {
    outline: 2px solid var(--module-accent, var(--lely-red));
    outline-offset: 2px;
}

/* Items die in het "Meer ▾"-paneel of het <900px-uitklappaneel landen
   worden blok-links zonder onderlijn. */
.dock-nav-panel-item,
#dock-nav-more-panel .dock-nav-link,
#dock-nav-more-panel > div {
    display: flex;
    align-items: center;
    width: 100%;
    padding: 8px 16px;
    font-size: 14px;
    font-weight: 500;
    color: var(--dark-slate);
    text-decoration: none;
    border-bottom: none;
    text-align: left;
    background: none;
}

.dock-nav-panel-item:hover,
#dock-nav-more-panel .dock-nav-link:hover {
    background: var(--light-bg);
    color: var(--module-accent, var(--lely-red));
}

.dock-nav-panel-item.dock-nav-link-active,
#dock-nav-more-panel .dock-nav-link-active {
    color: var(--module-accent, var(--lely-red));
    font-weight: 600;
}

.dock-nav-panel {
    border-top: 1px solid var(--border-gray);
    background: var(--surface);
}

.dock-topbar-right {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-shrink: 0;
}

/* <900px: links verdwijnen achter de ☰-knop; het paneel eronder toont ze
   vertikaal. De merktekst valt weg (logo blijft) zodat bedrijfskeuze +
   acties nooit over de balk heen overlappen. */
@media (max-width: 899px) {
    .dock-nav-wrap {
        display: none;
    }

    .dock-nav-burger {
        display: inline-flex;
    }

    .dock-brand span {
        display: none;
    }

    .dock-topbar {
        gap: 8px;
    }

    .dock-topbar-left,
    .dock-topbar-right {
        gap: 8px;
    }

    #company-switcher select {
        max-width: 150px;
    }
}

/* Segmented control (bv. "Mijn/Collega's offertes"): neutrale pill-
   container op --neutral-bg met het actieve segment als witte kaart met
   lichte schaduw. Rood is hier bewust níét de actieve kleur: die is
   voorbehouden aan de primaire actie op het scherm. Wordt alleen op
   modulepagina's gebruikt — de restyle is dus scope-veilig. */
.lely-pill-toggle {
    display: inline-flex;
    gap: 2px;
    padding: 3px;
    border: none;
    border-radius: 9999px;
    background-color: var(--neutral-bg);
}

.lely-pill-toggle-option {
    padding: 6px 14px;
    font-size: 0.875rem;
    font-weight: var(--font-weight-medium);
    color: var(--text-secondary);
    background-color: transparent;
    border-radius: 9999px;
    transition: background-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
    white-space: nowrap;
    text-decoration: none;
}

.lely-pill-toggle-option:hover {
    color: var(--dark-slate);
}

.lely-pill-toggle-option-active {
    background-color: var(--lely-white);
    color: var(--dark-slate);
    font-weight: var(--font-weight-bold);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
}

.lely-pill-toggle-option-active:hover {
    background-color: var(--lely-white);
    color: var(--dark-slate);
}

/* ============ Pagina-container ============
   Eén herbruikbare max-width wrapper, gedeeld door alle pagina's via de
   <main> in base.html (en de topbar/tabs-balk, voor visuele uitlijning).
   1536px is de containerbreedte die op grote
   schermen gebruikt wordt; op kleinere laptop/tablet-schermen blijft hij gewoon 100%
   breed tot deze max-width bereikt wordt. */
.lely-page-container {
    width: 100%;
    max-width: 1536px;
    margin-left: auto;
    margin-right: auto;
}

/* ============ Topbar ============ */

.lely-topbar {
    background-color: var(--surface);
    border-bottom: 1px solid var(--border-gray);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}

/* ============ Tabel ============ */

.lely-table tbody tr.offer-row:hover {
    background-color: var(--lely-surface);
}

/* Eenvoudige variant voor tabellen zonder verborgen/gekoppelde rijen
   (bv. gebruikersbeheer): gewone even/oneven zebra-striping.
   Direct-child combinator (>) zodat dit niet doorlekt naar geneste tabellen
   (bv. de uitklapbare revisie-historiek in het dashboard). */
.lely-table > tbody > tr:not(.offer-row):not(.offer-history-row):not(.line-row):not(.template-row):not(.pdf-line-row):nth-child(odd) {
    background-color: var(--lely-surface);
}

.lely-table > tbody > tr:not(.offer-row):not(.offer-history-row):not(.line-row):not(.template-row):not(.pdf-line-row):hover {
    background-color: var(--lely-grey);
}

.lely-table > tbody > tr.line-row,
.lely-table > tbody > tr.template-row,
.lely-table > tbody > tr.pdf-line-row {
    background-color: transparent;
}

.lely-table > tbody > tr.line-row:hover,
.lely-table > tbody > tr.template-row:hover,
.lely-table > tbody > tr.pdf-line-row:hover {
    background-color: var(--lely-surface);
}

/* ============ Artikelregels: verslepen + tussenvoegen ============ */
/* Zie static/js/offer-lines.js */

.lines-handle-th,
.lines-handle-cell {
    width: 26px;
    padding: 0.25rem 0;
    text-align: center;
}

.line-drag-handle {
    display: inline-block;
    padding: 2px 4px;
    color: #9ca3af;
    font-size: 1rem;
    line-height: 1;
    cursor: grab;
    user-select: none;
}

.line-drag-handle:hover {
    color: var(--lely-red);
}

.line-drag-handle:active {
    cursor: grabbing;
}

.lely-table > tbody > tr.sortable-ghost {
    opacity: 0.4;
}

.lely-table > tbody > tr.sortable-chosen,
.lely-table > tbody > tr.sortable-drag {
    background-color: var(--lely-surface);
}

.line-inserter-overlay {
    position: absolute;
    left: 0;
    right: 0;
    height: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transform: translateY(-50%);
    z-index: 20;
    pointer-events: none;
}

.line-inserter-overlay::before {
    content: "";
    position: absolute;
    left: 25%;
    right: 25%;
    top: 50%;
    height: 2px;
    background: var(--lely-accent-green);
    transform: translateY(-50%);
}

.line-inserter-btn {
    position: relative;
    pointer-events: auto;
    padding: 3px 10px;
    border: none;
    border-radius: 9999px;
    background: var(--lely-accent-green-strong);
    color: #fff;
    font-size: 0.7rem;
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
}

.line-inserter-btn:hover {
    filter: brightness(0.95);
}

/* ============ Mobiel: compacte regeltabel ============ */
/* Onder 640px (Tailwind <sm): smallere cellen en inputs zodat de
   regeltabel in offer_configure/template_edit minder breed uitvalt.
   De kolombreedtes zelf staan op de <th> via responsive classes:
   Korting loopt daar even breed als Aantal (w-14) en Prijs relatief
   breder (w-24). */
@media (max-width: 639.98px) {
    .lines-table th,
    .lines-table td {
        padding: 0.25rem;
    }
    .lines-table input {
        padding-left: 0.25rem;
        padding-right: 0.25rem;
        font-size: 0.8125rem;
    }
}

/* ============ Productbundel-groep ============ */
/* Onderdeelrijen krijgen geen bovenrand: kop + onderdelen vormen zo
   visueel één blok (gaat over tbody.divide-y heen). De scheiding boven
   de koprij en onder de laatste onderdeelrij blijft gewoon bestaan. */
.lely-table > tbody > tr.bom-component-row {
    border-top: 0 !important;
}

/* ============ Module-formulieren: één letter ============
   Alle form-velden op modulepagina's (body[data-scope]) erven het
   app-lettertype en gebruiken dezelfde grootte/gewicht als de
   omschrijving op offerte (14px/500, --dark-slate). Velden die bewust
   groter/bolder zijn hebben een specifiekere selector (zie
   .section-subtotal-input hieronder). */
[data-scope] input,
[data-scope] select,
[data-scope] textarea {
    font-family: inherit;
    font-size: 14px;
    font-weight: 500;
    color: var(--dark-slate);
}

/* Bewuste uitzonderingen op de uniforme module-letter: sectietitel-
   inputs zijn koppen (600); het sectiesubtotaal is prominent groot/
   bold/rood; nummerlijst-plakvelden blijven monospace. */
[data-scope] .section-band-title,
[data-scope] input[name="section_title"] {
    font-size: var(--section-label-fs);
    font-weight: 600;
}

[data-scope] .section-subtotal-input {
    font-size: 18px;
    font-weight: 700;
}

[data-scope] textarea.font-mono,
[data-scope] input.font-mono {
    font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
}

/* ============ Configureren: sectieband + artikelrijen ============
   Sectiekaart met slanke band als kop (32px, --neutral-bg, 13px/600).
   Artikelrijen zijn 48-52px met een dunne onderrand; naam 14px/500 met
   daaronder de tweede BC-omschrijving in 12px --text-secondary.
   Numerieke kolommen rechts uitgelijnd met tabular-nums; inputs 32px. */

.section-band {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 32px;
    margin: 0;
    padding: 4px 12px;
    background-color: var(--neutral-bg);
    border-bottom: 1px solid var(--border-gray);
    border-radius: 0.5rem 0.5rem 0 0;
    font-size: var(--section-label-fs);
    font-weight: 600;
    color: var(--dark-slate);
}

/* Optie-secties: subtiel groen accent, zonder zware randen. */
.section-band-option {
    box-shadow: inset 3px 0 0 var(--lely-accent-green);
}

.section-band-move {
    display: inline-flex;
    gap: 2px;
    flex-shrink: 0;
}

.section-band-move button {
    padding: 4px 3px;
    border: none;
    border-radius: 4px;
    background: none;
    color: var(--text-secondary);
    font-size: 11px;
    line-height: 1;
    cursor: pointer;
}

.section-band-move button:hover {
    color: var(--dark-slate);
    background-color: rgba(0, 0, 0, 0.06);
}

.section-band-title {
    flex: 1;
    min-width: 0;
    height: 24px;
    padding: 0 6px;
    border: 1px solid transparent;
    border-radius: 4px;
    background: transparent;
    font-size: var(--section-label-fs);
    font-weight: 600;
    color: var(--dark-slate);
}

.section-band-title:hover {
    border-color: var(--border-gray);
    background-color: var(--surface);
}

.section-band-title:focus-visible {
    border-color: var(--lely-red);
    background-color: var(--surface);
    outline: none;
}

.section-band-side {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-left: auto;
    font-size: 12px;
    font-weight: var(--font-weight-regular);
    color: var(--text-secondary);
    white-space: nowrap;
}

/* De stepper-groep in de band: [−][veld][+], vaste breedte zodat
   "Aantal robots:" + knoppen netjes rechts uitlijnen. */
.section-band .qty-stepper {
    width: 108px;
}

.section-band .section-robot-qty {
    height: 36px;
    padding: 0 4px;
    border: 1px solid var(--border-gray);
    background: var(--surface);
    text-align: center;
    font-size: 14px;
    font-weight: 500;
    color: var(--dark-slate);
}

.section-band .section-robot-qty:focus-visible {
    border-color: var(--lely-red);
    outline: none;
}

.section-delete-btn {
    padding: 2px 6px;
    border: none;
    border-radius: 4px;
    background: none;
    color: var(--lely-red);
    font-size: 14px;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
}

.section-delete-btn:hover {
    background-color: var(--danger-bg);
}

/* --- Lijntabel --- */

/* Fixed layout: de kolombreedtes op <th> gelden exact (bij auto-layout
   zijn het slechts suggesties en snoeide de browser Prijs af).
   Omschrijving heeft bewust geen breedte en vult de rest. */
.lines-table {
    table-layout: fixed;
}

.lines-table .lines-head th {
    padding: 8px;
    background-color: var(--light-bg);
    border-bottom: 1px solid var(--border-gray);
    font-size: var(--section-label-fs);
    font-weight: 600;
    color: var(--text-secondary);
    text-align: left;
    white-space: nowrap;
}

.lines-table .lines-head th.text-right { text-align: right; }
.lines-table .lines-head th.text-center { text-align: center; }

.lines-table .lines-handle-th { width: 28px; }
.lines-table .col-check { width: 72px; }
/* "Op offerte" past niet op één regel op 72px: deze kop mag wrappen,
   de andere koppen blijven nowrap. */
.lines-table th.col-check { white-space: normal; }
.lines-table .col-item { width: 300px; }
.lines-table .col-num { width: 128px; }
.lines-table .col-price { width: 142px; }
.lines-table .col-disc { width: 92px; }
.lines-table .col-subtotal { width: 116px; }
.lines-table .col-actions { width: 60px; }

/* Artikelrij: ~52px hoog, alleen een dunne onderrand. De tweede
   omschrijvingsregel (indien aanwezig) maakt de rij iets hoger. */
.lely-table.lines-table > tbody > tr.line-row {
    height: 52px;
    border-bottom: 1px solid var(--border-gray);
    background-color: transparent;
}

.lely-table.lines-table > tbody > tr.line-row:last-child {
    border-bottom: 0;
}

/* Alle rij-inputs 32px (numeriek 36px via de stepper), neutrale rand,
   rode focus. Letter = de algemene module-regel (14px/500). */
.lines-table .line-input {
    width: 100%;
    height: 32px;
    padding: 0 8px;
    border: 1px solid var(--border-gray);
    border-radius: 6px;
    background: var(--surface);
    color: var(--dark-slate);
}

.lines-table .line-input:focus-visible {
    border-color: var(--lely-red);
    outline: none;
    box-shadow: 0 0 0 1px var(--lely-red);
}

.lines-table .line-input.input-readonly {
    background: var(--light-bg);
    color: var(--text-secondary);
    cursor: not-allowed;
}

/* Rode rand bij onbekend artikelnummer (setItemValidation) — hogere
   specificiteit dan .line-input zodat de foutkleur altijd wint. */
.lines-table .line-input.border-red-500 {
    border-color: #ef4444;
}

/* Naamregel (de editabele offerte-omschrijving) prominent, tweede
   BC-omschrijving (displayName2) als kleine grijze hulpregel eronder. */
.lines-table .line-name-input {
    font-size: 14px;
    font-weight: 500;
}

.lines-table .line-name2 {
    margin-top: 2px;
    padding: 0 8px;
    font-size: 12px;
    line-height: 1.3;
    color: var(--text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Numerieke kolommen rechts, met tabulaire cijfers. Number-inputs
   zijn 36px hoog zodat de spinner-pijltjes aanklikbaar blijven;
   aantal/korting hebben een vaste breedte en staan rechts in de cel. */
.lines-table .row-qty,
.lines-table .row-price,
.lines-table .row-discount {
    height: 36px;
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.lines-table .row-qty {
    display: block;
    width: 80px;
    margin-left: auto;
}

.lines-table .row-discount {
    display: block;
    width: 72px;
    margin-left: auto;
}

.lines-table td.row-subtotal {
    font-variant-numeric: tabular-nums;
}

/* Prijsveld met €-prefix. */
.lines-table .price-wrap {
    position: relative;
    display: flex;
    align-items: center;
}

.lines-table .price-wrap .price-cur {
    position: absolute;
    left: 8px;
    font-size: 12px;
    color: var(--text-secondary);
    pointer-events: none;
}

.lines-table .price-wrap .row-price {
    padding-left: 22px;
}

/* Korting-veld met %-suffix (spiegel van de €-prefix bij prijs).
   Het veld blijft type="number" — de native spinners zijn te klein
   en worden verborgen (aantal heeft eigen −/+ knoppen; korting niet).
   Toetsenbordpijlen en de wheel-blur blijven werken. */
.lines-table .disc-wrap {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

.lines-table .disc-wrap .disc-suf {
    position: absolute;
    right: 10px;
    font-size: 12px;
    color: var(--text-secondary);
    pointer-events: none;
}

.lines-table .disc-wrap .row-discount {
    padding-right: 24px;
}

.lines-table input.row-discount[type="number"] {
    -moz-appearance: textfield;
    appearance: textfield;
}

.lines-table input.row-discount[type="number"]::-webkit-outer-spin-button,
.lines-table input.row-discount[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    display: none;
    margin: 0;
}

/* "Op offerte"-checkbox in de configurator — volgt de app-brede
   checkbox-kleur (rood; groen alleen op de benoemde uitzonderingen). */
.lines-table .row-active {
    width: 18px;
    height: 18px;
    cursor: pointer;
}

/* Artikel-autocomplete: de dropdown is minimaal ~320px breed, ook als
   het invoerveld smaller is, en mag breder uitvallen. Hij blijft
   absolute in de relative wrapper (geen overflow-clipping); de JS
   klapt hem linksom (right:0) als hij rechts uit beeld zou lopen. */
.item-autocomplete-dropdown {
    min-width: 320px;
}

/* ============ Eigen −/+ knoppen (qty-stepper) ============
   De native spinner is te klein: input-group [−][veld][+], 36px hoog,
   knoppen 30px breed. Native pijltjes uit (veld blijft type=number —
   toetsenbordpijlen en de wheel-blur in ui.js blijven werken). */
.qty-stepper {
    display: flex;
    align-items: stretch;
    width: 100%;
    height: 36px;
}

.qty-stepper .qty-btn {
    flex: 0 0 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 1px solid var(--border-gray);
    background: var(--surface);
    color: var(--medium-gray);
    font-size: 16px;
    font-weight: 500;
    line-height: 1;
    cursor: pointer;
}

.qty-stepper .qty-btn-down {
    margin-right: -1px;
    border-radius: 6px 0 0 6px;
}

.qty-stepper .qty-btn-up {
    margin-left: -1px;
    border-radius: 0 6px 6px 0;
}

.qty-stepper .qty-btn:hover {
    background: var(--light-bg);
    color: var(--dark-slate);
}

/* Disabled (bv. bundelonderdeel dat de bundel volgt): gedoofd,
   geen hover-reactie. */
.qty-stepper .qty-btn:disabled {
    color: var(--medium-gray);
    background: var(--neutral-bg);
    opacity: 0.45;
    cursor: default;
}

.qty-stepper .qty-btn:disabled:hover {
    background: var(--neutral-bg);
    color: var(--medium-gray);
}

.qty-stepper .qty-btn:focus-visible {
    position: relative;
    z-index: 1;
    outline: 2px solid var(--lely-red);
    outline-offset: 1px;
}

/* Het veld in de groep: vlakke zijkanten, gecentreerd, native
   spinnerpijltjes verborgen. */
.qty-stepper input,
.qty-stepper input.row-qty,
.qty-stepper input.section-robot-qty,
.qty-stepper input[name="comp_quantity"] {
    flex: 1 1 40px;
    width: auto;
    min-width: 0;
    height: auto;
    margin-left: 0;
    padding: 0 4px;
    border-radius: 0;
    text-align: center;
}

.qty-stepper input[type="number"] {
    -moz-appearance: textfield;
    appearance: textfield;
}

.qty-stepper input[type="number"]::-webkit-outer-spin-button,
.qty-stepper input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    display: none;
    margin: 0;
}

/* ============ Quill editor overrides ============ */

/* Toon de gekozen px-grootte in de Quill size-picker (standaard staat alles op "Normal") */
.ql-snow .ql-picker.ql-size .ql-picker-item::before,
.ql-snow .ql-picker.ql-size .ql-picker-label::before {
    content: attr(data-value) !important;
}

.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="false"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value=""]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item:not([data-value])::before,
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="false"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value=""]::before,
.ql-snow .ql-picker.ql-size .ql-picker-label:not([data-value])::before {
    content: "Normal" !important;
}

/* Zorg dat bold/italic/underline/strikethrough zichtbaar is in de Quill editor */
.ql-editor strong,
.ql-editor b {
    font-weight: 700 !important;
}

.ql-editor em,
.ql-editor i {
    font-style: italic !important;
}

.ql-editor u {
    text-decoration: underline !important;
}

.ql-editor s,
.ql-editor strike,
.ql-editor del {
    text-decoration: line-through !important;
}

/* ============ Icoon-tegel ============
   Witte rounded tegel met een gekleurd icoon — dezelfde taal als de
   portaaltegels (portal.html .app-tile) en de app-drawer
   (_chrome_actions.html), herbruikbaar voor snelkoppelingskaarten binnen
   een module. Kleur van het icoon via een tekstkleur-utility op de tegel
   zelf (bv. text-[var(--lely-accent-green)]), net als op het portaal.
   Afmeting bewust niet vastgelegd: net als bij de portaaltegels zelf
   (w-20 h-20 in portal.html) bepaalt de gebruiksplek de grootte via een
   Tailwind w-/h-utility. */

.lely-icon-tile {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 0.9rem;
    background-color: var(--lely-white);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
}

/* ============ Interactieve kaart ============
   Gedeelde hover-microinteractie voor klikbare kaarten (lichte lift +
   donkerdere rand), dezelfde als de portaaltegels (portal.html
   .app-tile:hover), i.p.v. losse ad-hoc hover:shadow-md per template. */

.lely-card-interactive {
    transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}

.lely-card-interactive:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.10);
    border-color: var(--lely-grey-dark);
}

/* ============ Stepper (offerte-proces) ============
   Witte balk direct onder de app-header; per stap links uitgelijnd:
   40px-cirkel met links ernaast label (15px) + omschrijving (13px,
   secundair). De verbindingslijn (3px) loopt van de staptekst naar de
   volgende cirkel; rood vanaf een afgeronde stap, anders grijs.
   States: afgerond = rood gevuld + wit vinkje; actief = wit met rode
   rand + rood nummer + vet label; toekomstig = grijs.
   De offer-path-* klassennamen zijn test-gepind en blijven de haken. */

.offer-path {
    display: flex;
    list-style: none;
    padding: 16px 24px;
    margin: 0;
    width: 100%;
    background-color: var(--surface);
    border: 1px solid var(--border-gray);
    border-radius: 8px;
}

.offer-path-item {
    position: relative;
    flex: 1 1 0;
    display: flex;
    min-width: 0;
    font-weight: var(--font-weight-medium);
    cursor: default;
}

.offer-path-link {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 12px;
    width: 100%;
    min-width: 0;
    color: inherit;
    text-decoration: none;
}

/* Titel + verbindingslijn op één rij: de lijn loopt op de hoogte van
   het label (≈ cirkelmidden) vanaf het einde van de titel tot aan de
   volgende cirkel. De ondertitel staat eronder en breekt de lijn niet. */
.offer-path-headrow {
    display: flex;
    align-items: center;
    gap: 14px;
    width: 100%;
    min-width: 0;
}

.offer-path-line {
    flex: 1 1 24px;
    height: 3px;
    margin-right: 14px;
    border-radius: 2px;
    background-color: var(--border-gray);
}

.offer-path-completed .offer-path-line {
    background-color: var(--lely-red);
}

a.offer-path-link:hover .offer-path-label {
    text-decoration: underline;
}

a.offer-path-link:focus-visible {
    outline: 2px solid var(--lely-red);
    outline-offset: 4px;
    border-radius: 8px;
}

/* De tekstkolom vult de resterende breedte zodat de lijn tot aan de
   volgende cirkel doorloopt. padding-top schuift het label zo dat het
   labelmidden samenvalt met het cirkelmidden (40px-cirkel → 20px). */
.offer-path-text {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    min-width: 0;
    padding-top: 10px;
    text-align: left;
}

.offer-path-circle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    flex: 0 0 40px;
    border-radius: 9999px;
    font-size: 16px;
    font-weight: var(--font-weight-bold);
    border: 2px solid transparent;
    box-sizing: border-box;
}

.offer-path-label {
    font-size: 15px;
    font-weight: var(--font-weight-medium);
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

.offer-path-subtitle {
    font-size: 12px;
    color: var(--text-secondary);
    line-height: 1.3;
}

/* Vanaf 1280px is er genoeg breedte: ondertitel op één regel, met
   ellipsis als vangnet. Daaronder mag hij wrappen (de lijn loopt
   hoe dan ook door — die zit in de headrow). */
@media (min-width: 1280px) {
    .offer-path-subtitle {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 100%;
    }
}

/* Afgerond: rood gevulde cirkel met wit vinkje. */
.offer-path-completed .offer-path-circle {
    background-color: var(--lely-red);
    border-color: var(--lely-red);
    color: var(--lely-white);
}

.offer-path-completed .offer-path-label {
    color: var(--dark-slate);
}

/* Actief: witte cirkel, rode rand + rood nummer, vet label. */
.offer-path-active .offer-path-circle {
    background-color: var(--surface);
    border-color: var(--lely-red);
    color: var(--lely-red);
}

.offer-path-active .offer-path-label {
    color: var(--dark-slate);
    font-weight: var(--font-weight-bold);
}

/* Toekomstig: witte cirkel met sterke rand, secundaire tekst. */
.offer-path-future .offer-path-circle {
    background-color: var(--surface);
    border-color: var(--border-strong);
    color: var(--text-secondary);
}

.offer-path-future .offer-path-label {
    color: var(--text-secondary);
}

.offer-path-disabled {
    pointer-events: none;
    opacity: 0.55;
}

/* <900px: omschrijvingen weg, labels blijven. */
@media (max-width: 899px) {
    .offer-path-subtitle {
        display: none;
    }
}

/* ============ SweetAlert2-dialoog in Dock-stijl ============
   Alle vensters lopen via window.lelySwal (static/js/ui.js): Swal.mixin
   met buttonsStyling:false + customClass btn-…/dock-swal-… Zelfde look
   als de leave-guard-dialoog (#leave-guard-overlay in base.html): witte
   kaart met rand --border-gray, icoon+ titel op één regel, tekst 14px
   --text-secondary, acties rechts. De popup ligt in een grid: icoon in
   kolom 1, titel in kolom 2, de rest over de volle breedte. */

/* Swal2 rendert de popup als display:grid; we werken daarin mee: een
   vaste 28px-icoonkolom (fixed — kan niet opblazen door volle-breedte
   kinderen) met de titel ernaast, zoals .leave-guard-head. Zonder icoon
   valt alles over de volle breedte. */
.swal2-popup.dock-swal {
    padding: 24px;
    border: 1px solid var(--border-gray);
    border-radius: 0.5rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.04);
}

.swal2-popup.dock-swal:has(.swal2-icon:not([style*="display: none"])) {
    grid-template-columns: 28px 1fr;
    column-gap: 10px;
    justify-items: stretch;
}

/* Icoon klein (Swal schaalt alles in em), links in kolom 1, in de
   statuskleur. */
.swal2-popup.dock-swal .swal2-icon {
    grid-column: 1;
    grid-row: 1;
    justify-self: start;
    margin: 0;
    font-size: 5.6px; /* → 28px bij de Swal-default van 5em */
    flex-shrink: 0;
}

/* Alle overige kinderen (tekst, velden, validatie, acties) spannen over
   de volle breedte — icoon en titel overrulen dit hieronder. */
.swal2-popup.dock-swal > * {
    grid-column: 1 / -1;
}

.swal2-popup.dock-swal .swal2-icon.swal2-warning,
.swal2-popup.dock-swal .swal2-icon.swal2-warning .swal2-icon-content {
    border-color: var(--warning-text);
    color: var(--warning-text);
}

.swal2-popup.dock-swal .swal2-icon.swal2-error,
.swal2-popup.dock-swal .swal2-icon.swal2-error .swal2-icon-content {
    border-color: var(--danger-text);
    color: var(--danger-text);
}

.swal2-popup.dock-swal .swal2-icon.swal2-info,
.swal2-popup.dock-swal .swal2-icon.swal2-info .swal2-icon-content {
    border-color: var(--text-secondary);
    color: var(--text-secondary);
}

.swal2-popup.dock-swal .swal2-icon.swal2-question,
.swal2-popup.dock-swal .swal2-icon.swal2-question .swal2-icon-content {
    border-color: var(--dark-slate);
    color: var(--dark-slate);
}

.swal2-popup.dock-swal .swal2-icon.swal2-success {
    border-color: var(--success-text);
    color: var(--success-text);
}
.swal2-popup.dock-swal .swal2-icon.swal2-success .swal2-success-ring {
    border-color: var(--success-text);
}
.swal2-popup.dock-swal .swal2-icon.swal2-success .swal2-success-line-tip,
.swal2-popup.dock-swal .swal2-icon.swal2-success .swal2-success-line-long,
.swal2-popup.dock-swal .swal2-icon.swal2-success .swal2-success-circular-line-left,
.swal2-popup.dock-swal .swal2-icon.swal2-success .swal2-success-circular-line-right {
    background-color: var(--success-text);
}

/* Eigen iconHtml (bv. bundel-svg): terug naar leesbaar formaat, geen
   standaard cirkelrand. */
.swal2-popup.dock-swal .swal2-icon:not([class*="swal2-warning"]):not([class*="swal2-error"]):not([class*="swal2-info"]):not([class*="swal2-question"]):not([class*="swal2-success"]) {
    border: none;
    font-size: 16px;
}
.swal2-popup.dock-swal .swal2-icon > svg {
    width: 28px;
    height: 28px;
}

.swal2-popup.dock-swal .swal2-title,
.swal2-popup.dock-swal .dock-swal-title {
    margin: 0;
    padding: 0;
    font-size: 18px;
    font-weight: 700;
    color: var(--dark-slate);
    text-align: left;
    line-height: 1.3;
    justify-self: stretch;
}

/* Met icoon: titel in kolom 2, gecentreerd tegen het 28px-icoon. */
.swal2-popup.dock-swal:has(.swal2-icon:not([style*="display: none"])) .swal2-title,
.swal2-popup.dock-swal:has(.swal2-icon:not([style*="display: none"])) .dock-swal-title {
    grid-column: 2;
    grid-row: 1;
    align-self: center;
    min-height: 28px;
    display: flex;
    align-items: center;
}

.swal2-popup.dock-swal .swal2-html-container {
    margin: 12px 0 0;
    padding: 0;
    font-size: 14px;
    color: var(--text-secondary);
    text-align: left;
    line-height: 1.5;
}

/* Velden in dialogen volgen de uniforme veldregel. */
.swal2-popup.dock-swal .swal2-input,
.swal2-popup.dock-swal .swal2-select,
.swal2-popup.dock-swal .swal2-textarea,
.swal2-popup.dock-swal .swal2-file {
    width: 100%;
    max-width: none;
    height: auto;
    margin: 8px 0 0;
    padding: 8px 12px;
    border: 1px solid #D1D5DB;
    border-radius: 0.375rem;
    background: var(--lely-white);
    font-size: 14px;
    font-weight: 500;
    color: var(--dark-slate);
    box-shadow: none;
    box-sizing: border-box;
}

.swal2-popup.dock-swal .swal2-input:focus,
.swal2-popup.dock-swal .swal2-select:focus,
.swal2-popup.dock-swal .swal2-textarea:focus,
.swal2-popup.dock-swal .swal2-file:focus {
    border-color: var(--module-accent, var(--lely-red));
    box-shadow: 0 0 0 3px rgba(237, 0, 45, 0.12);
    outline: none;
}

/* Binnen dialoogkaarten: neutrale grijze focusrand op formuliervelden
   i.p.v. de rode :focus-visible-ring uit de globale regel (die blijft
   gelden buiten dialogen). Donkere rand + subtiele schaduw blijft een
   duidelijke indicator. */
.swal2-popup.dock-swal :is(input, select, textarea):focus-visible {
    outline: none;
    border-color: var(--dark-slate);
    box-shadow: 0 0 0 3px rgba(17, 24, 39, 0.12);
}

.swal2-popup.dock-swal .swal2-input-label {
    justify-content: flex-start;
    font-size: 14px;
    font-weight: 500;
    color: var(--dark-slate);
}

.swal2-popup.dock-swal .swal2-radio {
    text-align: left;
    font-size: 14px;
    color: var(--dark-slate);
    margin-top: 8px;
}

.swal2-popup.dock-swal .swal2-validation-message {
    justify-content: flex-start;
    margin-top: 10px;
    padding: 10px 12px;
    background: var(--danger-bg);
    border: 1px solid #FCA5A5;
    border-radius: 0.375rem;
    color: var(--danger-text);
    font-size: 14px;
}
.swal2-popup.dock-swal .swal2-validation-message::before {
    color: var(--danger-text);
    background-color: transparent;
}

/* Actierij zoals de leave-guard: rechts, gap 8, knoppen zonder
   SweetAlert-marges/-kleuren (btn-* komt uit customClass). */
.swal2-popup.dock-swal .swal2-actions {
    width: 100%;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 8px;
    margin: 20px 0 0;
    padding: 0;
}
.swal2-popup.dock-swal .swal2-confirm,
.swal2-popup.dock-swal .swal2-deny,
.swal2-popup.dock-swal .swal2-cancel {
    margin: 0;
}

.swal2-popup.dock-swal .swal2-loader {
    border-color: var(--lely-red) transparent var(--lely-red) transparent;
}

.swal2-popup.dock-swal .swal2-close {
    color: var(--text-secondary);
}

/* ============ Eigen modals in dezelfde look ============
   Markup: .dock-modal-overlay > .dock-modal-card > .dock-modal-title.
   Gebruikt door admin_audit-detail, sla_configurator product-picker en
   serviceartikelen-rapport (ipv losse Tailwind-utilities). */

.dock-modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 70;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    background-color: rgba(17, 24, 39, 0.5);
}

.dock-modal-overlay.hidden,
.dock-modal-overlay[hidden] {
    display: none;
}

.dock-modal-card {
    background: var(--lely-white);
    border: 1px solid var(--border-gray);
    border-radius: 0.5rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.04);
    padding: 24px;
    width: 100%;
}

.dock-modal-title {
    font-size: 18px;
    font-weight: 700;
    color: var(--dark-slate);
    margin: 0 0 12px;
}

/* ============ Toegankelijkheid (WCAG 2.2 AA) ============ */

/* Zichtbare focusrand bij toetsenbordnavigatie. :is() geeft specificiteit
   (0,2,0) — gelijk aan Tailwinds `focus:outline-none`, maar theme.css
   laadt ná app.css en wint dus bij :focus-visible. Bij muisklik matcht
   :focus-visible niet en verandert er niets. De 2px offset laat de rand
   op de achtergrond vallen, ook op rode knoppen (btn-lely-primary). */
:is(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
    outline: 2px solid var(--module-accent, var(--lely-red));
    outline-offset: 2px;
    /* Witte ring eromheen: de accentkleur alleen verdwijnt op donkere, rode
       of foto-achtergronden (WCAG 2.4.13 — focusindicator ≥3:1 vs omgeving). */
    box-shadow: 0 0 0 4px var(--lely-white);
}

/* Actieve autocomplete-optie is ook zonder kleur herkenbaar (WCAG 1.4.1):
   een accentstreep links naast de grijze achtergrond. */
.customer-result[aria-selected="true"],
.item-result[aria-selected="true"] {
    box-shadow: inset 3px 0 0 var(--module-accent, var(--lely-red));
}

/* Reduced motion: animaties en transities vrijwel uit — geldt ook voor
   de laad-overlay (milk-logo), de wizard-collapse en SweetAlert2. */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}


/* ======================================================================
   LAY-OUTVERNIEUWING — gedeelde componenten (module-scope)
   ----------------------------------------------------------------------
   Nieuwe klassen voor de vernieuwde schermen. Alles hier gebruikt de
   neutrale schaal uit :root (--dark-slate t/m --danger-text). Ze gelden
   voor alle drie de modules; waar iets uitsluitend op modulepagina's
   mag verschijnen staat de selector onder [data-scope].
   ====================================================================== */

/* ============ Knoppen ============
   Precies één primaire knop per scherm (rood). Standaard 40px hoog,
   .btn-sm = 32px, .btn-icon = 32–36px vierkant zonder rand. */

.btn-primary,
.btn-secondary,
.btn-tertiary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 40px;
    padding: 10px 20px;
    font-size: 14px;
    font-weight: var(--font-weight-bold);
    line-height: 1;
    border-radius: 4px;
    border: 1px solid transparent;
    cursor: pointer;
    text-decoration: none;
    white-space: nowrap;
    transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.btn-primary {
    background-color: var(--lely-red);
    color: var(--lely-white);
}

.btn-primary:hover {
    background-color: var(--lely-red-hover);
    color: var(--lely-white);
}

.btn-primary:disabled,
.btn-primary[aria-disabled="true"] {
    background-color: var(--border-strong);
    cursor: not-allowed;
}

.btn-secondary {
    background-color: var(--surface);
    color: var(--dark-slate);
    border-color: var(--border-strong);
}

.btn-secondary:hover {
    background-color: var(--light-bg);
    color: var(--dark-slate);
}

.btn-tertiary {
    background-color: transparent;
    color: var(--medium-gray);
}

.btn-tertiary:hover {
    color: var(--dark-slate);
    background-color: transparent;
}

/* Groene outline-variant (v1.28.0): de levenscyclus-actie "Activeren" —
   secundair qua hiërarchie maar positief qua intentie. Dezelfde maten
   als de rest van de knoppen (40px, .btn-sm = 32px). */
.btn-outline-green {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 40px;
    padding: 10px 20px;
    font-size: 14px;
    font-weight: var(--font-weight-bold);
    line-height: 1;
    border-radius: 4px;
    cursor: pointer;
    text-decoration: none;
    white-space: nowrap;
    background-color: var(--lely-white);
    border: 1px solid var(--lely-accent-green);
    color: var(--lely-accent-green-strong);
    transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.btn-outline-green:hover {
    background-color: #f0fdf4;
}

.btn-outline-green:disabled,
.btn-outline-green[aria-disabled="true"] {
    border-color: var(--border-strong);
    color: var(--medium-gray);
    cursor: not-allowed;
}

/* Rode outline-variant (v1.28.0): de gevaar-actie "Deactiveren" —
   omkeerbaar maar destructief genoeg voor rood; "Opslaan" blijft de
   enige volle rode knop (.btn-primary). */
.btn-outline-red {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 40px;
    padding: 10px 20px;
    font-size: 14px;
    font-weight: var(--font-weight-bold);
    line-height: 1;
    border-radius: 4px;
    cursor: pointer;
    text-decoration: none;
    white-space: nowrap;
    background-color: var(--lely-white);
    border: 1px solid var(--lely-red);
    color: var(--lely-red);
    transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.btn-outline-red:hover {
    background-color: var(--lely-red-tint);
}

.btn-outline-red:disabled,
.btn-outline-red[aria-disabled="true"] {
    border-color: var(--border-strong);
    color: var(--medium-gray);
    cursor: not-allowed;
}

.btn-sm {
    height: 32px;
    padding: 6px 12px;
    font-size: 14px;
}

.btn-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    padding: 0;
    border: none;
    border-radius: 4px;
    background-color: transparent;
    color: var(--medium-gray);
    cursor: pointer;
    text-decoration: none;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.btn-icon:hover {
    background-color: var(--light-bg);
    color: var(--dark-slate);
}

.btn-icon svg {
    width: 18px;
    height: 18px;
}

/* Compacte variant voor secundaire rijen (bv. revisierijen ~40px):
   zelfde werking als .btn-icon maar 24x24 met 14px icoon. */
.btn-icon-sm {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    padding: 0;
    border: none;
    border-radius: 4px;
    background-color: transparent;
    color: var(--medium-gray);
    cursor: pointer;
    text-decoration: none;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.btn-icon-sm:hover {
    background-color: var(--surface);
    color: var(--dark-slate);
}

.btn-icon-sm svg {
    width: 14px;
    height: 14px;
}

/* ============ Gedeelde tooltip ([data-tip]) ============
   Gele hint zoals de oude inline-spans, nu één patroon: zet
   `data-tip="Tekst"` op het element (knop/link). Zichtbaar op hover
   én op toetsenbordfocus (:focus-visible). Het element behoudt zijn
   eigen `aria-label`/`title`; gebruik bij icoonknoppen data-tip in
   plaats van een extra <span>. Standaard opent de tip boven het
   element; `data-tip-side="bottom"` opent eronder. */
[data-tip]:not(.absolute):not(.fixed):not(.sticky) {
    position: relative;
}

/* De tip-bubbel bestaat alleen als hij zichtbaar is: `content: none` in
   ruststand genereert géén ::after-box, zodat een absoluut gepositioneerde
   (verborgen) tip nooit de scrollbreedte van de pagina vergroot. */
[data-tip]::after {
    content: none;
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
    padding: 4px 8px;
    font-size: 12px;
    font-weight: var(--font-weight-regular);
    line-height: 1.2;
    white-space: nowrap;
    color: var(--tooltip-text);
    background-color: var(--tooltip-bg);
    border: 1px solid var(--tooltip-border);
    border-radius: 4px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    pointer-events: none;
    z-index: 60;
}

[data-tip]:hover::after,
[data-tip]:focus-visible::after {
    content: attr(data-tip);
}

[data-tip-side="bottom"]::after {
    bottom: auto;
    top: calc(100% + 8px);
}

/* Randuitlijning: bij elementen aan de rand van een kaart/tabel met
   overflow-clipping blijft de tip binnen de container.
   start = linkerkant van de tip aan de linkerkant van het element,
   end   = rechterkant van de tip aan de rechterkant. */
[data-tip-align="start"]::after {
    left: 0;
    transform: none;
}
[data-tip-align="end"]::after {
    left: auto;
    right: 0;
    transform: none;
}

/* Tabellen in een scrollbare wrapper (overflow-x-auto clipt óók
   verticaal): tips op de bovenste rij openen omlaag, tips in de
   meest rechtse kolom lijnen rechts uit. */
.data-table tbody tr:first-child [data-tip]::after {
    bottom: auto;
    top: calc(100% + 8px);
}
.data-table th:last-child [data-tip]::after,
.data-table td:last-child [data-tip]::after {
    left: auto;
    right: 0;
    transform: none;
}

/* ============ Statusbadges ============
   Pill met bolletje of icoon, alleen-lezen. De status_badge-macro
   (templates/components/status_badge.html) is de gedeelde opbouw. */

.status-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 10px;
    border-radius: 9999px;
    font-size: 12px;
    font-weight: var(--font-weight-medium);
    line-height: 1.2;
    border: 1px solid transparent;
    white-space: nowrap;
}

.status-badge .status-badge-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    flex: 0 0 7px;
}

.status-badge .status-badge-icon {
    width: 12px;
    height: 12px;
    flex: 0 0 12px;
}

/* Concept: wit met sterke rand en grijs bolletje. */
.status-badge-draft {
    background-color: var(--surface);
    border-color: var(--border-strong);
    color: var(--text-secondary);
}
.status-badge-draft .status-badge-dot { background-color: var(--border-strong); }

/* Verzonden: neutraal + papieren vliegtuig (icoon in markup). */
.status-badge-sent {
    background-color: var(--neutral-bg);
    color: var(--text-secondary);
}

/* Goedgekeurd / afgerond / actief: groene familie. */
.status-badge-success {
    background-color: var(--success-bg);
    color: var(--success-text);
}
.status-badge-success .status-badge-dot { background-color: var(--success-green); }

/* Verlopen / actie gevraagd: warning + klok-icoon (in markup). */
.status-badge-warning {
    background-color: var(--warning-bg);
    color: var(--warning-text);
}
.status-badge-warning .status-badge-dot { background-color: var(--warning-text); }

/* Afgewezen / geblokkeerd: danger + kruis-icoon (in markup). */
.status-badge-danger {
    background-color: var(--danger-bg);
    color: var(--danger-text);
}
.status-badge-danger .status-badge-dot { background-color: var(--danger-text); }

/* Overige/neutrale statussen (Geen, Geannuleerd, Gearchiveerd, ...). */
.status-badge-neutral {
    background-color: var(--neutral-bg);
    color: var(--text-secondary);
}
.status-badge-neutral .status-badge-dot { background-color: var(--medium-gray); }

/* ============ Sectiekaart (uitklapbaar) ============
   Kop is één <button aria-expanded> van 48–56px; dichte kaart toont een
   samenvatting in --text-secondary en een grijze chevron rechts. */

.section-card {
    background-color: var(--surface);
    border: 1px solid var(--border-gray);
    border-radius: 8px;
    overflow: clip;
}

.section-card + .section-card {
    margin-top: 16px;
}

/* In een grid beheert gap de tussenruimte; de sibling-margin zou kaart 2
   anders 16px lager zetten dan kaart 1. */
.grid > .section-card + .section-card {
    margin-top: 0;
}

.section-card-header {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    min-height: 52px;
    padding: 12px 20px;
    border: none;
    background: none;
    cursor: pointer;
    text-align: left;
}

.section-card-title {
    font-size: 16px;
    font-weight: var(--font-weight-bold);
    color: var(--dark-slate);
}

.section-card-summary {
    font-size: 13px;
    color: var(--text-secondary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.section-card-chevron {
    margin-left: auto;
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    color: var(--medium-gray);
    transition: transform 0.2s ease;
}

.section-card[data-open] .section-card-chevron {
    transform: rotate(180deg);
}

.section-card-body {
    padding: 16px 20px 20px;
    border-top: 1px solid var(--border-gray);
}

/* De SLA-configurator heeft klant-/artikel-autocompletes ín sectiekaarten;
   overflow: clip op de kaart zou hun dropdowns afknippen (AGENTS.md: geen
   overflow-container rond autocomplete-inputs). Kop en body schilderen geen
   achtergrond tot aan de hoeken, dus uitsteken is hier visueel veilig. */
[data-module="sla"] .section-card {
    overflow: visible;
}

/* ============ Footer-navigatie ============
   Sticky onderaan: links "← Vorige", rechts tertiare "Concept opslaan",
   optionele secundaire actie en uiterst rechts de primaire vervolgactie. */

.footer-nav {
    position: sticky;
    bottom: 0;
    z-index: 30;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 16px 24px;
    margin: 24px -24px -24px;
    background-color: var(--surface);
    border-top: 1px solid var(--border-gray);
}

@media (min-width: 1600px) {
    .footer-nav {
        padding: 16px 32px;
        margin: 32px -32px -32px;
    }
}

.footer-nav-group {
    display: flex;
    align-items: center;
    gap: 12px;
}

.footer-nav-back {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: var(--font-weight-medium);
    color: var(--medium-gray);
    text-decoration: none;
}

.footer-nav-back:hover {
    color: var(--dark-slate);
}

/* ============ Leave-guard: dirty-indicator + navigatie-dialoog ============
   Gedeeld component (static/js/leave-guard.js): indicator in footer_nav,
   modale dialoog (#leave-guard-overlay in base.html) bij wegnavigeren. */

.leave-guard-indicator {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: var(--font-weight-medium);
    color: var(--warning-text);
    white-space: nowrap;
}

.leave-guard-indicator[hidden] {
    display: none;
}

.leave-guard-dot {
    width: 8px;
    height: 8px;
    border-radius: 9999px;
    background-color: var(--warning-text);
    flex-shrink: 0;
}

.leave-guard-overlay {
    position: fixed;
    inset: 0;
    z-index: 70;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    background-color: rgba(17, 24, 39, 0.5);
}

.leave-guard-overlay[hidden] {
    display: none;
}

.leave-guard-card {
    width: 100%;
    max-width: 30rem;
    padding: 24px;
}

.leave-guard-head {
    display: flex;
    align-items: center;
    gap: 10px;
}

.leave-guard-icon {
    width: 22px;
    height: 22px;
    color: var(--warning-text);
    flex-shrink: 0;
}

.leave-guard-text {
    margin: 12px 0 0;
    font-size: 14px;
    color: var(--text-secondary);
}

.leave-guard-actions {
    display: flex;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 20px;
}

/* ============ "Wie is online" op /admin/users ============ */

.user-online {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 2px;
    font-size: 12px;
    font-weight: var(--font-weight-medium);
    color: var(--success-text);
}

.user-online-dot {
    width: 8px;
    height: 8px;
    border-radius: 9999px;
    background-color: var(--success-green);
    flex-shrink: 0;
}

.user-last-seen {
    margin-top: 2px;
    font-size: 12px;
    font-weight: var(--font-weight-regular, 400);
    color: var(--text-secondary);
}

/* Slim werken — lesmodule. Tekst blijft binnen een rustige leesbreedte;
   de kaart zelf is smaller (max-w-3xl), dus dit is een safeguard voor
   bredere toekomstige layouts. */
.lesson-body {
    max-width: 120ch;
}

/* ============ Statusbalk (levensloop, alleen Status-scherm) ============
   Chevrons van 32px: doorlopen = success + vinkje, huidig = red-tint +
   rood bolletje + 600, komend = neutral + secondary. */

.status-bar {
    display: flex;
    align-items: stretch;
    list-style: none;
    margin: 0;
    padding: 0;
}

.status-bar-step {
    position: relative;
    display: flex;
    align-items: center;
    gap: 8px;
    height: 32px;
    padding: 0 18px 0 28px;
    margin-left: -10px;
    font-size: 13px;
    font-weight: var(--font-weight-medium);
    clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 50%, calc(100% - 14px) 100%, 0 100%, 14px 50%);
    white-space: nowrap;
}

.status-bar-step:first-child {
    margin-left: 0;
    padding-left: 18px;
    clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 50%, calc(100% - 14px) 100%, 0 100%);
}

.status-bar-done {
    background-color: var(--success-bg);
    color: var(--success-text);
}

.status-bar-done .status-badge-icon {
    color: var(--success-green);
}

.status-bar-current {
    background-color: var(--lely-red-tint);
    color: var(--dark-slate);
    font-weight: var(--font-weight-bold);
}

.status-bar-current .status-bar-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: var(--lely-red);
}

.status-bar-next {
    background-color: var(--neutral-bg);
    color: var(--text-secondary);
}

/* ============ "…"-menu (rij-acties) ============ */

.more-menu {
    position: relative;
    display: inline-block;
}

.more-menu-panel {
    position: absolute;
    right: 0;
    top: calc(100% + 4px);
    min-width: 200px;
    max-width: 260px;
    background-color: var(--surface);
    border: 1px solid var(--border-gray);
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
    padding: 4px;
    z-index: 50;
}

.more-menu-panel[data-side="left"] {
    right: auto;
    left: 0;
}

.more-menu-item {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 8px 12px;
    border: none;
    border-radius: 4px;
    background: none;
    font-size: 14px;
    color: var(--dark-slate);
    text-align: left;
    text-decoration: none;
    cursor: pointer;
    white-space: nowrap;
}

.more-menu-item:hover,
.more-menu-item:focus-visible {
    background-color: var(--light-bg);
}

.more-menu-item svg {
    width: 16px;
    height: 16px;
    flex: 0 0 16px;
    color: var(--medium-gray);
}

.more-menu-item-danger {
    color: var(--danger-text);
}

.more-menu-separator {
    border-top: 1px solid var(--border-gray);
    margin: 4px 0;
}

.more-menu-label {
    display: block;
    padding: 6px 12px 2px;
    font-size: 12px;
    font-weight: var(--font-weight-bold);
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

/* Veld (select/input) binnen een "…"-menu, bv. statusselects. */
.more-menu-field {
    padding: 2px 12px 8px;
}

/* ============ Datatabel (vernieuwde lijstweergave) ============
   Kop 40px op --light-bg (13/600 secondary), rijen ~52px met alleen een
   onderrand, hover --light-bg. De sorteerpijl is alleen zichtbaar bij
   hover of op de actief gesorteerde kolom. */

.data-table {
    border-collapse: collapse;
    font-size: 14px;
    /* th is browser-default gecentreerd; cellen en koppen lijnen links uit
       (per-cel text-right/text-center utilities blijven winnen). */
    text-align: left;
}

.data-table > thead > tr > th {
    height: 40px;
    padding: 0 12px;
    background-color: var(--light-bg);
    border-bottom: 1px solid var(--border-gray);
    font-size: 13px;
    font-weight: 600;
    color: var(--text-secondary);
    white-space: nowrap;
}

.data-table > thead > tr > th:first-child {
    border-top-left-radius: 8px;
}

.data-table > thead > tr > th:last-child {
    border-top-right-radius: 8px;
}

.data-table > thead > tr > th.cursor-pointer:hover {
    color: var(--dark-slate);
}

.data-table > tbody > tr:not(.offer-history-row) > td {
    padding: 12px;
    border-bottom: 1px solid var(--border-gray);
    vertical-align: middle;
}

.data-table > tbody > tr.offer-history-row > td {
    border-bottom: 1px solid var(--border-gray);
    /* Uitgeklapte revisierijen: visueel ondergeschikt aan de hoofdrij —
       lichte achtergrond, secundaire tekst, ~40px rijhoogte (bedrag +
       kleine delta-regel passen er net in bij line-height 1.25). */
    padding: 4px 12px;
    background-color: var(--light-bg);
    color: var(--text-secondary);
    font-size: 14px;
    font-weight: 400;
    line-height: 1.25;
    vertical-align: middle;
}

/* "V3"-label in de ID-kolom: staat waar de chevron zit in de hoofdrij —
   vaste breedte (34px = .btn-icon) en links uitgelijnd zodat V9 en V12
   exact onder elkaar staan. */
.offer-rev-label {
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    width: 34px;
    height: 24px;
    padding-left: 9px;
    font-size: 13px;
    font-weight: 500;
    color: var(--text-secondary);
    font-variant-numeric: tabular-nums;
}

/* Δ-chip onder het revisietotaal: klein neutraal pilletje met teken. */
.offer-rev-delta {
    display: inline-block;
    margin-top: 2px;
    padding: 0 8px;
    border-radius: 999px;
    background-color: var(--neutral-bg);
    font-size: 12px;
    line-height: 18px;
    color: var(--text-secondary);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* Revisie-vergelijkingsdialoog: scrollende body binnen de dialoog,
   groeptitels in statuskleur, compacte data-tables. */
.rev-diff {
    max-height: 60vh;
    overflow-y: auto;
    text-align: left;
    font-size: 14px;
}

.rev-diff-sub {
    color: var(--text-secondary);
    margin: 0 0 12px;
}

.rev-diff-group {
    margin-bottom: 14px;
}

.rev-diff-title {
    font-size: 13px;
    font-weight: 600;
    margin: 0 0 6px;
}

.rev-diff .text-added { color: var(--success-text); }
.rev-diff .text-removed { color: var(--danger-text); }
.rev-diff .text-changed { color: var(--text-secondary); }

.rev-diff-table {
    width: 100%;
    font-size: 13px;
}

/* Compacte variant van .data-table voor tabellen in dialogen
   (revisie-diff, prijzen vergelijken bij kopiëren). */
.data-table.compact,
.rev-diff-table {
    font-size: 13px;
}

.data-table.compact > thead > tr > th,
.rev-diff-table > thead > tr > th {
    height: 30px;
    padding: 0 10px;
    font-size: 12px;
}

.data-table.compact > tbody > tr > td,
.rev-diff-table > tbody > tr > td {
    padding: 7px 10px;
    vertical-align: top;
}

/* Dialogen: vinkjes volgen de app-brede checkbox-kleur (rood;
   op /admin/users en in de SLA-module blijft de module-uitzondering
   winnen), radio's behouden de selecteer-accentkleur. */
.dock-swal input[type="checkbox"] {
    accent-color: var(--lely-red);
    width: 15px;
    height: 15px;
}

.dock-swal input[type="radio"] {
    accent-color: var(--select-border);
    width: 15px;
    height: 15px;
}

.rev-diff-fields {
    font-size: 12px;
    color: var(--text-secondary);
    margin-top: 1px;
}

.data-table > tbody > tr.offer-row {
    height: 52px;
}

.data-table > tbody > tr.offer-row-open > td {
    border-bottom-color: transparent;
}

/* Open gebruikersrij + haar detailrij: lichte groene achtergrond zodat
   duidelijk is welke rij bewerkt wordt. */
.data-table > tbody > tr.user-row-open > td {
    border-bottom-color: transparent;
    background-color: var(--success-bg);
}
.data-table > tbody > tr.user-detail-row > td {
    background-color: var(--success-bg);
}

/* Fragment-landing (?open=#user-<email>): de bewerkte hoofdrij moet mét
   naam zichtbaar zijn onder de vaste elementen. admin-users.js zet
   --users-scroll-offset = topbar + eventuele trainingsbanner + tabelkop
   + 8px; 112px is de fallback als dat script niet loopt. */
.admin-users-table > tbody > tr.user-row {
    scroll-margin-top: var(--users-scroll-offset, 112px);
}

/* Sticky kop voor de gebruikerstabel — de pagina zelf scrollt, dus top:0. */
.admin-users-table > thead > tr > th {
    position: sticky;
    top: 0;
    z-index: 10;
    /* Zonder eigen achtergrond schemert de tbody er doorheen. */
    background-color: var(--light-bg);
}

.data-table .sort-arrow {
    opacity: 0;
    font-weight: 400;
    transition: opacity 0.15s ease;
}

.data-table th:hover .sort-arrow,
.data-table th.sort-asc .sort-arrow,
.data-table th.sort-desc .sort-arrow {
    opacity: 1;
}

/* Bundelrijen: hoofdrij + uitklapbare onderdelenrij als één tbody. */
.bundle-tbody > tr.bundle-row:hover > td {
    background-color: var(--light-bg);
}

.bundle-tbody > tr.bundle-row:focus-visible {
    outline: 2px solid var(--lely-red);
    outline-offset: -2px;
}

.bundle-tbody > tr.bundle-row[aria-expanded="true"] > td {
    border-bottom-color: transparent;
}

.bundle-detail-row > td.bundle-detail-cell {
    background-color: var(--light-bg);
    border-bottom: 1px solid var(--border-gray);
    padding: 0.75rem 1rem 1rem 2.5rem;
}

/* ============ Groepenmenu (beheerlijsten, fase 7) ============
   Sticky ~240px linkerkolom met productgroepen (icoon + naam + count-
   badge). Actieve groep: rode linkermarkering + --lely-red-tint.
   Onder ~900px wordt het menu een select bovenaan de lijst. */

.group-layout {
    display: flex;
    align-items: flex-start;
    gap: 24px;
}

.group-nav {
    flex: 0 0 240px;
    width: 240px;
    position: sticky;
    top: 16px;
}

/* Inklap-knop bovenaan het groepsmenu: ⇤ uitklapbaar, ⇥ ingeklapt. */
.group-nav-toggle {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    width: 100%;
    height: 32px;
    padding: 0 10px;
    margin-bottom: 4px;
    border: none;
    border-radius: 6px;
    background: none;
    color: var(--medium-gray);
    cursor: pointer;
}

.group-nav-toggle svg {
    width: 16px;
    height: 16px;
    transition: transform 0.15s ease;
}

.group-nav-toggle:hover {
    background-color: var(--light-bg);
    color: var(--dark-slate);
}

.group-nav-toggle:focus-visible {
    outline: 2px solid var(--lely-red);
    outline-offset: -2px;
}

/* Actieve-groep-chip naast de inklapknop als het menu verborgen is. */
.group-nav-chip {
    display: none;
    align-items: center;
    gap: 6px;
    padding: 3px 10px;
    border: 1px solid var(--border-gray);
    border-radius: 999px;
    background: var(--surface);
    color: var(--dark-slate);
    font-size: 12.5px;
    font-weight: 500;
    line-height: 18px;
    text-decoration: none;
    white-space: nowrap;
}

.group-nav-chip .group-nav-chip-x {
    color: var(--medium-gray);
    font-size: 11px;
}

.group-nav-chip:hover {
    border-color: var(--lely-red);
    color: var(--lely-red);
}

.group-nav-chip:focus-visible {
    outline: 2px solid var(--lely-red);
    outline-offset: 1px;
}

.group-nav-chip[hidden] {
    display: none;
}

/* Ingeklapt: het groepsmenu verdwijnt volledig; alleen de knop (en bij een
   actieve groep de chip) blijft als compacte rij linksboven de
   content-kaart, die de volle breedte krijgt. De toestand staat op <html>
   (group-nav-collapsed), vroeg gezet via een inline script in base.html
   zodat er geen flash is. */
html.group-nav-collapsed .group-layout {
    flex-direction: column;
    /* flex-start van de rij-variant laat kinderen op content-breedte
       staan; in kolom-richting moet de kaart juist volle breedte pakken. */
    align-items: stretch;
}

html.group-nav-collapsed .group-nav {
    flex: none;
    width: auto;
    position: static;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 8px;
}

html.group-nav-collapsed .group-nav-list,
html.group-nav-collapsed .group-nav-select {
    display: none;
}

html.group-nav-collapsed .group-nav-toggle {
    width: auto;
    justify-content: flex-start;
    padding: 0 8px;
    margin-bottom: 0;
}

html.group-nav-collapsed .group-nav-toggle svg {
    transform: rotate(180deg);
}

html.group-nav-collapsed .group-nav-chip {
    display: inline-flex;
}

.group-nav-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.group-nav-item {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 40px;
    padding: 6px 12px 6px 10px;
    border-left: 3px solid transparent;
    border-radius: 0 6px 6px 0;
    font-size: 14px;
    font-weight: 500;
    color: var(--dark-slate);
    text-decoration: none;
    transition: background-color 0.12s ease, border-color 0.12s ease;
}

.group-nav-item:hover {
    background-color: var(--light-bg);
    color: var(--dark-slate);
}

.group-nav-item.is-active {
    border-left-color: var(--lely-red);
    background-color: var(--lely-red-tint);
    font-weight: 600;
}

.group-nav-item:focus-visible {
    outline: 2px solid var(--lely-red);
    outline-offset: -2px;
    border-radius: 0 6px 6px 0;
}

.group-nav-icon {
    width: 22px;
    height: 22px;
    flex: 0 0 22px;
    object-fit: contain;
    color: var(--medium-gray);
}

.group-nav-icon-empty {
    border: 1.5px dashed var(--border-strong);
    border-radius: 4px;
}

.group-nav-label {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.group-nav-count {
    flex: 0 0 auto;
    min-width: 24px;
    padding: 1px 7px;
    border-radius: 999px;
    background-color: var(--neutral-bg);
    font-size: 12px;
    font-weight: 600;
    color: var(--text-secondary);
    text-align: center;
}

.group-nav-item.is-active .group-nav-count {
    background-color: var(--lely-white);
    color: var(--lely-red);
}

.group-nav-select {
    display: none;
    width: 100%;
    height: 40px;
    padding: 0 12px;
    border: 1px solid var(--border-strong);
    border-radius: 6px;
    background-color: var(--surface);
    font-family: inherit;
    font-size: 14px;
    font-weight: 500;
    color: var(--dark-slate);
}

.group-content {
    flex: 1 1 auto;
    min-width: 0;
}

/* Kop van de rechterkolom: groepsnaam + count, zoekveld, primaire knop. */
.group-list-header {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 16px;
}

.group-list-header h2 {
    font-size: 16px;
    font-weight: 600;
    color: var(--dark-slate);
    margin: 0;
}

.group-list-count {
    min-width: 24px;
    padding: 1px 8px;
    border-radius: 999px;
    background-color: var(--neutral-bg);
    font-size: 12px;
    font-weight: 600;
    color: var(--text-secondary);
    text-align: center;
}

.group-list-search {
    flex: 0 1 260px;
    height: 36px;
    padding: 0 12px;
    border: 1px solid var(--border-strong);
    border-radius: 6px;
    font-size: 14px;
    color: var(--dark-slate);
    background-color: var(--surface);
}

.group-list-search::placeholder {
    color: var(--text-secondary);
}

.group-list-actions {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 8px;
}

@media (max-width: 900px) {
    .group-layout {
        flex-direction: column;
        gap: 12px;
    }
    .group-nav {
        position: static;
        width: 100%;
        flex: none;
    }
    .group-nav-list {
        display: none;
    }
    /* Select-modus: geen inklapknop en geen chip. */
    .group-nav-toggle,
    .group-nav-chip {
        display: none;
    }
    .group-nav-select {
        display: block;
    }
    /* De opgeslagen ingeklapte stand verbergt ook de select: die is hier
       juist de enige navigatie, dus alles resetten. */
    html.group-nav-collapsed .group-nav {
        display: block;
        width: 100%;
        flex: none;
    }
    html.group-nav-collapsed .group-nav-select {
        display: block;
    }
    html.group-nav-collapsed .group-nav-chip {
        display: none;
    }
}

/* Dashboard-variant (v1.21): smaller menu (±200px) en een hoger
   omslagpunt — onder ±1280px heeft de offertetabel de volle breedte
   nodig en verandert het menu in een select boven de tabel. */
.group-layout--xl .group-nav {
    flex-basis: 200px;
    width: 200px;
}

@media (max-width: 1279px) {
    .group-layout--xl {
        flex-direction: column;
        gap: 12px;
    }
    .group-layout--xl .group-nav {
        position: static;
        width: 100%;
        flex: none;
    }
    .group-layout--xl .group-nav-list {
        display: none;
    }
    .group-layout--xl .group-nav-toggle,
    .group-layout--xl .group-nav-chip {
        display: none;
    }
    .group-layout--xl .group-nav-select {
        display: block;
    }
    html.group-nav-collapsed .group-layout--xl .group-nav {
        display: block;
        width: 100%;
        flex: none;
    }
    html.group-nav-collapsed .group-layout--xl .group-nav-select {
        display: block;
    }
    html.group-nav-collapsed .group-layout--xl .group-nav-chip {
        display: none;
    }
}

/* ============ Bijlagenblok ============ */

.attachment-block {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.dropzone {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 24px;
    border: 1.5px dashed var(--border-strong);
    border-radius: 8px;
    background-color: var(--light-bg);
    color: var(--text-secondary);
    text-align: center;
    font-size: 14px;
    cursor: pointer;
    transition: border-color 0.15s ease, background-color 0.15s ease;
}

.dropzone:hover,
.dropzone[data-dragover] {
    border-color: var(--lely-red);
    background-color: var(--lely-red-tint);
}

.dropzone-icon {
    width: 28px;
    height: 28px;
    color: var(--medium-gray);
}

.attachment-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px solid var(--border-gray);
}

.attachment-row:last-child {
    border-bottom: none;
}

.attachment-thumb {
    width: 40px;
    height: 40px;
    flex: 0 0 40px;
    object-fit: cover;
    border-radius: 4px;
    border: 1px solid var(--border-gray);
    background-color: var(--neutral-bg);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--medium-gray);
}

.attachment-name {
    font-size: 14px;
    font-weight: var(--font-weight-medium);
    color: var(--dark-slate);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
}

.attachment-meta {
    font-size: 12px;
    color: var(--text-secondary);
}

/* ============ Chips ============ */

.chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 9999px;
    background-color: var(--neutral-bg);
    border: 1px solid var(--border-gray);
    font-size: 13px;
    color: var(--dark-slate);
    white-space: nowrap;
}

.chip svg {
    width: 14px;
    height: 14px;
    color: var(--medium-gray);
}

/* Selecteerbare checkbox-chip (ontvangergroepen): geselecteerd = rode
   rand + tint + vinkje via ::before. */
.recipient-chip {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    border: 1px solid var(--border-strong);
    border-radius: 9999px;
    background-color: var(--surface);
    font-size: 14px;
    color: var(--dark-slate);
    cursor: pointer;
    transition: border-color 0.15s ease, background-color 0.15s ease;
}

.recipient-chip input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
}

.recipient-chip::before {
    content: "";
    width: 16px;
    height: 16px;
    border: 1.5px solid var(--border-strong);
    border-radius: 4px;
    background-color: var(--surface);
    background-position: center;
    background-repeat: no-repeat;
    flex: 0 0 16px;
}

.recipient-chip:has(:checked) {
    border-color: var(--select-border);
    background-color: var(--select-bg);
}

.recipient-chip:has(:checked)::before {
    border-color: var(--select-border);
    background-color: var(--select-border);
    /* Wit vinkje als inline-SVG data-uri (geen emoji). */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M5 13l4 4L19 7'/%3E%3C/svg%3E");
    background-size: 10px;
}

.recipient-chip:has(input:focus-visible) {
    outline: 2px solid var(--module-accent, var(--lely-red));
    outline-offset: 2px;
}

/* Opsteller per ontvangergroep (Mailen): groepskaart met labels links
   (~100px) en velden rechts. */
.send-group-title {
    font-size: 17px;
    font-weight: var(--font-weight-bold);
    color: var(--dark-slate);
    padding: 12px 16px;
    border-bottom: 1px solid var(--border-gray);
}

.send-field {
    display: grid;
    grid-template-columns: 100px minmax(0, 1fr);
    gap: 12px;
    align-items: center;
    padding: 12px 16px;
}

.send-field + .send-field {
    border-top: 1px solid var(--border-gray);
}

.send-field-top {
    align-items: start;
}

.send-field-label {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-secondary);
}

/* Alleen-lezen chip (Aan-adres, mailbijlage) — zelfde pill-vorm als
   recipient-chip maar zonder checkbox/vinkje. */
.mail-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px;
    border: 1px solid var(--border-gray);
    border-radius: 9999px;
    background-color: var(--neutral-bg, #F5F5F5);
    font-size: 13px;
    color: var(--dark-slate);
}

.mail-chip-remove {
    margin-left: 2px;
    font-size: 15px;
    line-height: 1;
    color: var(--text-secondary);
    cursor: pointer;
    background: none;
    border: none;
    padding: 0;
}

.mail-chip-remove:hover {
    color: var(--lely-red);
}

/* Bericht-editor (Quill) in de opsteller. */
.send-editor .ql-editor {
    min-height: 320px;
    font-size: 14px;
    background-color: var(--surface);
}

.send-editor {
    border-radius: 4px;
    overflow: hidden;
}

@media (max-width: 640px) {
    .send-field {
        grid-template-columns: 1fr;
        gap: 4px;
    }
}

/* ============ Statusbalk (chevrons) op de Status-stap ============
   Concept → Verzonden → eindstatus. Klaar = rode tint, actief = rood,
   toekomst = grijs; geen blauw. De punt van elke chevron loopt in de
   volgende over. */
.status-flow {
    display: flex;
    gap: 0;
    margin-bottom: 16px;
    font-size: 14px;
    font-weight: var(--font-weight-medium);
}

.status-flow-step {
    position: relative;
    flex: 1 1 0;
    padding: 10px 16px 10px 28px;
    background-color: var(--neutral-bg, #F0EDEA);
    color: var(--text-secondary);
    clip-path: polygon(0 0, calc(100% - 16px) 0, 100% 50%, calc(100% - 16px) 100%, 0 100%, 16px 50%);
    text-align: center;
}

.status-flow-step:first-child {
    padding-left: 16px;
    clip-path: polygon(0 0, calc(100% - 16px) 0, 100% 50%, calc(100% - 16px) 100%, 0 100%);
}

.status-flow-done {
    background-color: var(--lely-red-tint);
    color: var(--lely-red);
}

.status-flow-current {
    background-color: var(--lely-red);
    color: var(--lely-white);
    font-weight: var(--font-weight-bold);
}

/* Eindstatus-varianten als de derde stap actief is. */
.status-flow-current.status-flow-success {
    background-color: var(--lely-accent-green-strong);
}

.status-flow-current.status-flow-danger {
    background-color: var(--lely-red);
}

.status-flow-current.status-flow-warning {
    background-color: #B45309;
}

/* ============ Formulier-elementen ============ */

/* Radio-kaartje: geselecteerd = groene rand + tint (offertewizard-
   keuzekaarten). Beheer-schermen gebruiken .choice-card (rood). */
.radio-card {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 40px;
    padding: 8px 14px;
    border: 1px solid var(--border-strong);
    border-radius: 4px;
    background-color: var(--surface);
    font-size: 14px;
    color: var(--dark-slate);
    cursor: pointer;
    transition: border-color 0.15s ease, background-color 0.15s ease;
}

.radio-card input[type="radio"],
.radio-card input[type="checkbox"] {
    accent-color: var(--select-border);
}

.radio-card:has(:checked) {
    border-color: var(--select-border);
    background-color: var(--select-bg);
}

.radio-card:has(:disabled) {
    opacity: 0.55;
    cursor: not-allowed;
}

/* Toggle 36×20: aan = rood, uit = --border-strong. Gebruik als
   <button class="lely-toggle" role="switch" aria-checked="…"> of
   <input type="checkbox" class="lely-toggle">. */
input.lely-toggle {
    appearance: none;
    position: relative;
    width: 36px;
    height: 20px;
    border-radius: 9999px;
    background-color: var(--border-strong);
    border: none;
    cursor: pointer;
    transition: background-color 0.15s ease;
}

input.lely-toggle::after {
    content: "";
    position: absolute;
    top: 2px;
    left: 2px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background-color: var(--lely-white);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
    transition: left 0.15s ease;
}

input.lely-toggle:checked {
    background-color: var(--lely-red);
}

input.lely-toggle:checked::after {
    left: 18px;
}

input.lely-toggle:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* ============ Paginakop ============ */

.page-header {
    margin-bottom: 24px;
}

.page-header-title {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    font-size: 24px;
    font-weight: var(--font-weight-bold);
    color: var(--dark-slate);
    margin: 0;
}

/* Lange paginatitels (bv. "Bewerken template: <lange naam>") kappen af met
   ellipsis; de volledige naam staat in data-tip op de span. min-width:0
   laat de flex-kinderen krimpen zodat de badge zichtbaar blijft. */
.page-header-title-text {
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.page-header-meta {
    margin-top: 4px;
    font-size: 14px;
    color: var(--text-secondary);
}

/* Broodkruimel boven de paginakop (modulepagina's). */
.breadcrumb {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 8px;
    font-size: 13px;
    color: var(--text-secondary);
}

.breadcrumb a {
    color: var(--text-secondary);
    text-decoration: none;
}

.breadcrumb a:hover {
    text-decoration: underline;
}

.breadcrumb a:focus-visible {
    outline: 2px solid var(--lely-red);
    outline-offset: 2px;
    border-radius: 4px;
}

.breadcrumb .breadcrumb-sep {
    color: var(--border-strong);
}

.breadcrumb .breadcrumb-current {
    color: var(--dark-slate);
}

/* Opmaak-pagina: sectiekaarten links (~60%), meescrollend voorbeeld
   rechts (~40%); op smal scherm staat het voorbeeld onder de secties. */
.offer-view-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(320px, 1fr);
    gap: 24px;
}

@media (max-width: 1100px) {
    .offer-view-layout {
        grid-template-columns: 1fr;
    }
}

.offer-preview-card {
    position: sticky;
    top: 16px;
    background-color: var(--surface);
    border: 1px solid var(--border-gray);
    border-radius: 8px;
    overflow: clip;
}

.offer-preview-scroll {
    max-height: calc(100vh - 220px);
    overflow: auto;
}

/* ============ Hulpklassen ============ */

.tabular-nums {
    font-variant-numeric: tabular-nums;
}

.prose-max {
    max-width: 120ch;
}

/* ======================================================================
   MODULE-SCOPE ([data-scope] op <body>) — volle breedte + scope-only
   overrides. Alles hieronder raakt uitsluitend pagina's binnen de drie
   modules; portaal, login en algemene beheerpagina's blijven ongewijzigd.
   ====================================================================== */

/* Volle breedte: geen max-width/centrering meer binnen de modules. */
[data-scope] .lely-page-container {
    max-width: none;
}

/* Paginapadding 24px, 32px vanaf 1600px (volgens spec). */
[data-scope] main.lely-page-container {
    padding: 24px;
}

@media (min-width: 1600px) {
    [data-scope] main.lely-page-container {
        padding: 32px;
    }
}

/* Pagina-achtergrond --page-bg, kaarten --surface met rand i.p.v.
   schaduw (kaartspec: radius 8, 1px --border-gray, geen/min. schaduw). */
body[data-scope] {
    background-color: var(--page-bg);
}

[data-scope] .lely-card,
[data-scope] .lely-card-white {
    background-color: var(--surface);
    border: 1px solid var(--border-gray);
    border-radius: 8px;
    box-shadow: none;
}

/* Geen groene knoppen meer: de oude accent-CTA (groen) wordt binnen de
   scope de primaire rood — later vervangen schermen dit door .btn-primary. */
[data-scope] .btn-lely-accent {
    background-color: var(--lely-red);
}

[data-scope] .btn-lely-accent:hover {
    background-color: var(--lely-red-hover);
}

/* Checkboxes binnen de modules: accent rood — één stijl app-breed. */
[data-scope] input[type="checkbox"] {
    accent-color: var(--lely-red);
}

/* Benoemde uitzonderingen die groen blijven: de gebruikerspagina
   (/admin/users markeert zich via body[data-page="admin-users"]) en de
   volledige SLA-module (body[data-module="sla"]). */
body[data-page="admin-users"] input[type="checkbox"],
body[data-module="sla"] input[type="checkbox"] {
    accent-color: var(--lely-accent-green);
}

/* De groene regel-invoegknop (configurator) wordt een neutrale actie —
   rood is voorbehouden aan de primaire actie. Enkel in modulepagina's
   gebruikt, maar onder [data-scope] voor de zekerheid. */
[data-scope] .line-inserter-overlay::before {
    background: var(--border-strong);
}

[data-scope] .line-inserter-btn {
    background: var(--dark-slate);
}

/* Slepen-invoegindicator eveneens neutraal. */
[data-scope] .line-drag-handle:hover {
    color: var(--dark-slate);
}



/* ============ Beheer-bouwstenen (rustige admin-UI) ============
   Herbruikbare klassen achter de Jinja-macros in
   templates/components/: card_header, group_label, checkbox_row,
   choice_cards, readonly_field, stat_row, help_tip, list_row en de
   actie-variant van page_header. Alleen bestaande tokens. */

/* --- card_header: icoon + titel + scheidingslijn + acties rechts --- */
.card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding-bottom: 12px;
    margin-bottom: 16px;
    border-bottom: 1px solid var(--border-gray);
}

.card-header-left {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.card-header-icon {
    width: 18px;
    height: 18px;
    flex: 0 0 auto;
    color: var(--lely-red);
}

.card-header-title {
    font-size: 16px;
    font-weight: var(--font-weight-bold);
    color: var(--dark-slate);
    margin: 0;
}

.card-header-summary {
    font-size: 13px;
    color: var(--text-secondary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.card-header-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 0 0 auto;
}

/* --- group_label: kleine rode hoofdletter-titel binnen een kaart --- */
.group-label {
    margin: 0 0 8px;
    font-size: 11px;
    font-weight: var(--font-weight-bold);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--lely-red);
}

/* --- checkbox_row: vinkje met label rechts, naast elkaar --- */
.checkbox-row-group {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 24px;
    align-items: center;
}

.checkbox-row {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: var(--font-weight-medium);
    color: var(--dark-slate);
    cursor: pointer;
}

/* Accentkleur bewust weggelaten: checkbox_row volgt de context —
   rood standaard, groen binnen de benoemde uitzonderingen. */
.checkbox-row input[type="checkbox"] {
    width: 16px;
    height: 16px;
    margin: 0;
}

.checkbox-row input[type="checkbox"]:disabled + .checkbox-row-label {
    color: var(--medium-gray);
}

/* --- choice_cards: radiogroep als klikbare kaarten ---
   Eigen klasse, los van .radio-card (die blijft voorbehouden aan de
   keuzekaarten in de offertewizard, geselecteerd = groen). Beheer-
   keuzekaarten krijgen een rode selectierand + lichte rode tint. */
.choice-cards-field {
    border: none;
    margin: 0;
    padding: 0;
    min-width: 0;
}

.choice-cards-legend {
    font-size: 13px;
    font-weight: var(--font-weight-medium);
    color: var(--text-secondary);
    margin-bottom: 8px;
    padding: 0;
}

.choice-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: 10px;
}

.choice-card {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    min-height: 0;
    padding: 10px 14px;
    border: 1px solid var(--border-strong);
    border-radius: 4px;
    background-color: var(--surface);
    font-size: 14px;
    color: var(--dark-slate);
    cursor: pointer;
    transition: border-color 0.15s ease, background-color 0.15s ease;
}

.choice-card:has(:checked) {
    border-color: var(--lely-red);
    background-color: var(--lely-red-tint);
}

.choice-card:has(:disabled) {
    opacity: 0.55;
    cursor: not-allowed;
}

.choice-card input[type="radio"] {
    margin-top: 3px;
    accent-color: var(--lely-red);
}

.choice-card-body {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.choice-card-title {
    font-weight: var(--font-weight-medium);
    color: var(--dark-slate);
}

.choice-card-desc {
    font-size: 12px;
    color: var(--text-secondary);
}

.choice-card-disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

/* --- readonly_field: grijze achtergrond + slot-icoon --- */
.readonly-field-wrap {
    display: block;
}

.readonly-field-label {
    display: block;
    font-size: 13px;
    font-weight: var(--font-weight-medium);
    color: var(--text-secondary);
    margin-bottom: 4px;
}

.readonly-field {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 8px 12px;
    border: 1px solid var(--border-gray);
    border-radius: 6px;
    background-color: var(--lely-surface);
    font-size: 14px;
    font-variant-numeric: tabular-nums;
    color: var(--dark-slate);
}

.readonly-field-value {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.readonly-field-lock {
    width: 15px;
    height: 15px;
    flex: 0 0 auto;
    color: var(--medium-gray);
}

/* --- stat_row: label links, waarde rechts (tabular-nums) --- */
.stat-rows {
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.stat-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    padding: 7px 12px;
    border-radius: 6px;
    background-color: var(--lely-surface);
    font-size: 14px;
}

/* Zelfde gewicht/kleur als de veldlabels in de kaart (geen lichtere
   grijze variant); de waarde krijgt dezelfde kleur — alleen getoonde
   waarden (marge groen/rood) wijken af. */
.stat-row-label {
    color: var(--text-label);
    font-weight: var(--font-weight-medium);
    margin: 0;
}

.stat-row-value {
    margin: 0;
    font-variant-numeric: tabular-nums;
    color: var(--text-label);
    white-space: nowrap;
}

.stat-row-strong {
    font-weight: var(--font-weight-bold);
}

.stat-row-success {
    color: var(--success-text);
    font-weight: var(--font-weight-medium);
}

.stat-row-danger {
    color: var(--danger-text);
    font-weight: var(--font-weight-medium);
}

/* --- help_tip: ⓘ met data-tip (vervangt kleine uitlegtekst) --- */
.help-tip {
    display: inline-flex;
    align-items: center;
    vertical-align: -2px;
    color: var(--medium-gray);
    cursor: help;
}

.help-tip:hover,
.help-tip:focus-visible {
    color: var(--dark-slate);
}

.help-tip:focus-visible {
    outline: 2px solid var(--lely-red);
    outline-offset: 2px;
    border-radius: 2px;
}

.help-tip svg {
    width: 15px;
    height: 15px;
}

/* help_tips dragen langere zinnen dan de standaard knop-tips: laat ze
   wrappen zodat de (onzichtbare) ::after-bubbel de pagina-breedte niet
   opblaast — een absoluut gepositioneerde nowrap-tip telt mee in de
   scrollbreedte, ook als hij verborgen is. */
.help-tip[data-tip]::after,
.list-row-sub[data-tip]::after {
    white-space: normal;
    width: max-content;
    max-width: 280px;
}

/* --- list_row: vaste opbouw voor beheerlijsten (rijen, geen tegels) --- */
.list-row > td {
    vertical-align: middle;
}

.list-row-chev {
    width: 32px;
    color: var(--medium-gray);
}

.list-row-chev svg {
    transition: transform 0.15s ease;
}

tr.list-row[aria-expanded="true"] .list-row-chev svg {
    transform: rotate(90deg);
}

.list-row-main {
    min-width: 0;
    max-width: 1px; /* td: laat truncate werken binnen table-layout */
}

.list-row-title {
    display: block;
    font-weight: 600;
    color: var(--dark-slate);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

a.list-row-title:hover {
    color: var(--lely-red);
}

.list-row-sub {
    display: block;
    margin-top: 1px;
    font-size: 12px;
    color: var(--text-secondary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.list-row-status {
    width: 96px;
    text-align: center;
}

.list-row-price {
    text-align: right;
    white-space: nowrap;
}

.list-row-price-value {
    display: block;
    font-variant-numeric: tabular-nums;
    font-weight: var(--font-weight-medium);
    color: var(--dark-slate);
}

.list-row-price-sub {
    display: block;
    font-size: 12px;
    font-weight: normal;
    color: var(--text-secondary);
}

.list-row-actions {
    text-align: right;
    white-space: nowrap;
    padding-right: 12px;
}

/* --- page_header met acties rechts --- */
.page-header-split {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}

.page-header-main {
    min-width: 0;
}

.page-header-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 0 0 auto;
    padding-bottom: 2px;
}