/* =============================================================
   HardwareClinics v6 – Main stylesheet
   ------------------------------------------------------------
   - Single source of truth voor layout, componenten en kleur
   - Kleur, achtergrond en branding zijn CSS Custom Properties
     en kunnen via <style> in <head> overschreven worden met
     waardes uit `configuration` (zie includes/layout_header.php)
   - Themes (charcoal, coffee) liggen in assets/css/themes/*.css
   ============================================================= */

/* HTML5 [hidden] attribuut — UA default is display:none, MAAR
 * custom class-based display:flex/grid/etc met zelfde specificity
 * overschrijft het (cascade winnen later regels). Globale forced
 * override zodat hidden-toggle via JS overal werkt. */
[hidden] { display: none !important; }

/* -----------------------------------------------------
   1. Design tokens (default = "light" thema)
   ----------------------------------------------------- */
:root {
    /* Brand */
    --primary:        #d86639;
    --primary-600:    #c0552c;
    --primary-50:     #fbe9e0;
    --ink:            #2a1f1a;

    /* Surfaces */
    --bg:             #fcfaf6;
    --surface:        #ffffff;
    --surface-alt:    #f5f1ea;
    --border:         #e6dfd4;
    --border-strong:  #c9bfb0;

    /* Tekst */
    --text:           #2a1f1a;
    --text-muted:     #6b5e54;
    --text-soft:      #8a7d72;
    --text-on-primary:#ffffff;

    /* Status kleuren (zacht/verzadigd, past bij beige palette — niet fel) */
    --success:        #6cae87;
    --success-bg:     #e3f3ec;
    --warning:        #d99a2b;
    --warning-bg:     #fcf2dc;
    --danger:         #c0392b;
    --danger-bg:      #fbe6e3;
    --info:           #2f7ec7;
    --info-bg:        #e3eff9;

    /* Layout */
    --sidebar-w:      340px;
    --topbar-h:       56px;
    --radius:         8px;
    --radius-sm:      4px;
    --radius-lg:      12px;

    /* Schaduwen */
    --shadow-sm:      0 1px 2px rgba(42,31,26,.05);
    --shadow:         0 2px 6px rgba(42,31,26,.07);
    --shadow-md:      0 4px 14px rgba(42,31,26,.09);

    /* Animatie */
    --t-fast:         120ms ease;
    --t-base:         200ms ease;
}

/* -----------------------------------------------------
   2. Reset / base
   ----------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html, body {
    margin: 0;
    padding: 0;
    /* Geen height:100% - dat breekt position:sticky in grid layout */
    min-height: 100%;
    overflow-x: clip;              /* clip i.p.v. hidden — breekt position:sticky NIET op descendants */
    max-width: 100%;
}

body {
    font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.5;
    color: var(--text);
    background: var(--bg);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
    margin: 0 0 .6em;
    font-weight: 600;
    color: var(--ink);
    line-height: 1.25;
    font-style: normal; /* explicit: geen cursive ergens */
}

h1 { font-size: 1.75rem; }
h2 { font-size: 1.4rem;  }
h3 { font-size: 1.15rem; }
h4 { font-size: 1rem;    }

p { margin: 0 0 1em; }

a {
    color: var(--primary);
    text-decoration: none;
    transition: color var(--t-fast);
}
a:hover { color: var(--primary-600); }

hr {
    border: 0;
    border-top: 1px solid var(--border);
    margin: 1.5rem 0;
}

/* -----------------------------------------------------
   3. Layout: sidebar (fixed) + main
   -----------------------------------------------------
   Sidebar gebruikt position: fixed (geen grid, geen sticky).
   Dat is 100% browser-onafhankelijk en heeft geen last van
   ancestor overflow/transform issues. Main krijgt margin-left
   gelijk aan sidebar-breedte zodat content netjes ernaast staat.
   ----------------------------------------------------- */
.app { min-height: 100vh; max-width: 100vw; overflow-x: clip; }

.app__sidebar {
    position: fixed;
    top: 0;
    left: 0;
    width: var(--sidebar-w);
    height: 100vh;
    overflow-y: auto;
    z-index: 100;
    /* Reserveer altijd ruimte voor scrollbar. Voorkomt dat menu/logo
     * springt zodra een submenu opengaat en content boven viewport-hoogte
     * uitkomt. Browsers zonder ondersteuning negeren dit (= huidige gedrag). */
    scrollbar-gutter: stable;
}

.app__main {
    margin-left: var(--sidebar-w);
    width: calc(100% - var(--sidebar-w));     /* prevent overflow door margin-left */
    min-height: 100vh;
    min-width: 0;
    box-sizing: border-box;
    overflow-x: clip;                          /* safety net - voorkomt horizontale scroll bij rendering edge cases */
}

/* -----------------------------------------------------
   4. Sidebar
   -----------------------------------------------------
   Light variant. Strong contrast op hover (donker bg,
   witte tekst). Items op 1 regel met ellipsis. Badges
   monospace en rechts uitgelijnd in vaste kolom.
   Layout (sticky/height/overflow) zit op .app__sidebar.
   ----------------------------------------------------- */
.sidebar {
    background: var(--surface);
    color: var(--text);
    display: flex;
    flex-direction: column;
    min-height: 100%;
    border-right: 1px solid var(--border);
}

.sidebar__brand {
    display: flex;
    align-items: center;
    justify-content: center;     /* logo centreren */
    padding: .8rem .75rem;
    border-bottom: 1px solid var(--border);
    min-height: 72px;             /* logo-vak: tussen compact en ruim */
}

.sidebar__brand img,
.sidebar__brand svg {
    max-height: 50px;
    max-width: 80%;
    width: auto;
    height: auto;
    display: block;
}

.sidebar__brand-text {
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--ink);
    letter-spacing: .2px;
}

/* Close button - alleen mobile, fixed rechtsboven in de sidebar drawer */
.sidebar__close {
    display: none;
    position: absolute;
    top: 14px;
    right: 14px;
    width: 28px;
    height: 28px;
    border: 0;
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    font-size: 1.1rem;
    line-height: 1;
    padding: 0;
    z-index: 5;
    transition: color var(--t-fast);
}
.sidebar__close:hover { color: var(--ink); }

.sidebar__nav {
    list-style: none;
    margin: 0;
    padding: .5rem 0 1rem;
    flex: 1;
}

/* Footer onderaan sidebar (NXT GEN logo) */
.sidebar__footer {
    margin-top: auto;
    padding: .75rem .75rem 1.25rem;
    border-top: 1px solid var(--border);
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .75rem;
}
/* Kleine "Wat is nieuw"-link boven het NXTGEN² logo — discreet, info-icoon,
 * is-active state krijgt de primary kleur zoals de andere sidebar-links. */
.sidebar__footer-info {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    font-size: .8rem;
    color: var(--text-muted);
    text-decoration: none;
    padding: .25rem .55rem;
    border-radius: 6px;
    transition: background var(--t-fast), color var(--t-fast);
}
.sidebar__footer-info:hover {
    background: var(--surface-alt);
    color: var(--ink);
}
.sidebar__footer-info.is-active {
    color: var(--primary, #d86639);
    font-weight: 600;
}
.sidebar__footer-link {
    display: inline-block;
    transition: opacity var(--t-fast);
}
.sidebar__footer-img {
    max-width: 180px;
    max-height: 52px;
    width: auto;
    height: auto;
    display: block;
}
.sidebar__footer-text {
    font-size: .7rem;
    color: var(--text-soft);
    letter-spacing: .03em;
}

.sidebar__section {
    padding: .65rem .65rem .25rem;
    font-size: .67rem;
    text-transform: uppercase;
    letter-spacing: .12em;
    color: var(--text-soft);
    font-weight: 600;
}
/* Variant binnen sub-menus: links uitgelijnd met sub-link indent,
 * iets compacter zodat groepen niet te veel ruimte pakken. */
.sidebar__section--sub {
    padding: .55rem 1.6rem .2rem;
    font-size: .62rem;
}
.sidebar__sub > .sidebar__section--sub:first-child {
    padding-top: .35rem;
}
/* Quick Access sectie-header — coral/primary tint zodat de eigen
 * snelkoppelingen-groep duidelijk te onderscheiden is van de
 * standaard hoofdmenu-secties (die in muted grijs staan). */
.sidebar__section--qa {
    color: var(--primary, #d86639);
}

.sidebar__item { position: relative; }

.sidebar__link {
    position: relative;           /* containing block voor absolute badge/chevron */
    display: flex;
    align-items: center;
    gap: .65rem;
    padding: .7rem 44px .7rem .7rem;       /* ruimere verticale padding = hogere items +
                                            meer lucht tussen de opties; rechts ruim voor
                                            vaste badge/chevron kolom */
    color: var(--text);
    font-size: .88rem;                   /* iets groter — leesbaarder */
    font-weight: 500;
    line-height: 1.3;
    border-left: 3px solid transparent;
    transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast);
}

.sidebar__link > span {
    flex: 1 1 auto;
    min-width: 0;
    /* mag wrap op 2 regels; geen ellipsis-afkapping meer */
}

.sidebar__link:hover {
    background: var(--surface-alt);   /* zachte grijs-beige tint, geen invert */
    color: var(--ink);
}
.sidebar__link:hover i { color: var(--ink); }
/* Badge op hover/active: donkerdere tint + sterkere tekst zodat het nummer
 * goed leesbaar blijft tegen de surface-alt hover-achtergrond. */
/* Badge op hover: iets donkerdere tint + sterkere tekst zodat de badge
 * visueel "meereageert" op de hover van het menu-item (anders staat de
 * badge wat los van de hover-feedback). De active-state blijft expliciet
 * gelijk aan default zodat de actieve pagina niet "donkerder" lijkt. */
.sidebar__link:hover .sidebar__badge {
    background: #e3dcce;
    color: var(--ink);
}

.sidebar__link.is-active {
    color: var(--ink);
    border-left-color: var(--primary);
    /* geen oranje achtergrond, geen vetter font - alleen de border-left
       en oranje icoon verraden actief, exact zelfde gewicht als rest */
}
.sidebar__link.is-active i { color: var(--primary); }
.sidebar__link.is-active:hover { background: var(--surface-alt); }

.sidebar__link i,
.sidebar__link .fa,
.sidebar__link .fas {
    flex: 0 0 22px;
    width: 22px;
    text-align: center;
    color: var(--text-soft);
    font-size: .95rem;
    transition: color var(--t-fast);
    align-self: flex-start;
    margin-top: 2px;
}
.sidebar__link.is-active i { color: var(--primary); }

.sidebar__badge {
    /* Vaste rechter-kolom: badges hebben altijd dezelfde X positie,
       ongeacht label lengte. Dat geeft de "kolom" look die Marco wil. */
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    width: 30px;
    height: 18px;
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: 'JetBrains Mono', 'Consolas', 'Menlo', monospace;
    font-variant-numeric: tabular-nums;
    background: #efe9df;
    color: var(--text-muted);
    font-size: .68rem;
    font-weight: 600;
    /* Asymmetrische padding: 2px top / 0 bottom drukt het cijfer binnen
     * de badge 2px naar beneden. JetBrains Mono heeft een hoge baseline
     * waardoor cijfers default visueel iets boven het mathematische
     * midden uitkomen. De badge zelf (transform) blijft exact gecentreerd
     * op de menu-tekst — alleen de glyph schuift binnen het blok. */
    padding: 2px 3px 0;
    border-radius: 4px;
    line-height: 1;
    transition: background var(--t-fast), color var(--t-fast);
}

.sidebar__badge--primary {           /* tag style voor "NIEUW" oid - eigen breedte */
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    background: var(--primary);
    color: #fff;
    font-family: inherit;
    font-variant-numeric: normal;
    width: auto;
    padding: 2px 8px;
    letter-spacing: .03em;
    font-size: .68rem;
}

/* Alert-badge: zelfde layout/font als de count-badge maar in primary
 * (coral) kleur met witte tekst zodat het opvalt dat er admin-actie
 * nodig is (bv. openstaande 2FA-reset verzoeken).
 *
 * Defensive: expliciet width/height/padding zetten zodat de alert-variant
 * IDENTIEK groot is aan de count-badge erboven. Anders kan de coral fill
 * door zijn hoog-contrast achtergrond visueel "groter" lijken dan de
 * cream/neutrale count-badge. */
.sidebar__badge--alert {
    width: 30px;
    height: 18px;
    padding: 2px 3px 0;
    background: var(--primary);
    color: #fff;
}
.sidebar__link:hover .sidebar__badge--alert {
    background: #c25527;   /* iets donkerder primary tint voor hover-feedback */
    color: #fff;
}
/* Toggle-links hebben een chevron rechts op `right: 16px`. Badges op
 * dezelfde positie (right: 10px) zouden er overheen vallen. Schuif
 * badges binnen toggle-items naar links zodat ze NAAST de chevron staan. */
.sidebar__toggle .sidebar__badge {
    right: 36px;
}

/* sub-nav (dropdown) */
.sidebar__sub {
    list-style: none;
    margin: 0;
    padding: 0;
    background: var(--surface-alt);
    overflow: hidden;
    max-height: 0;
    transition: max-height var(--t-base);
}
.sidebar__item.is-open > .sidebar__sub { max-height: 800px; }
.sidebar__sub .sidebar__link {
    padding: .7rem .6rem .7rem 1.6rem;      /* gelijk aan hoofd-items (.7rem verticaal) zodat
                                               sub-items dezelfde adem hebben als hoofd-items */
    font-size: .88rem;                       /* groter — was .78rem, te klein */
    letter-spacing: -.005em;
    line-height: 1.35;
}
.sidebar__sub .sidebar__link i { display: none; }

.sidebar__toggle::after {
    content: "\f107"; /* fa-angle-down */
    font-family: "Font Awesome 6 Free", "Font Awesome 5 Free", "FontAwesome";
    font-weight: 900;
    color: var(--text-soft);
    font-size: .9rem;
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
    transition: transform var(--t-base), color var(--t-fast);
}
.sidebar__toggle:hover::after { color: var(--ink); }
.sidebar__item.is-open > .sidebar__toggle::after {
    transform: translateY(-50%) rotate(180deg);
}

/* -----------------------------------------------------
   5. Floating user menu (FAB) + hamburger
   ----------------------------------------------------- */
.userfab {
    position: fixed;
    top: 14px;
    right: 18px;
    z-index: 120;
    font-family: inherit;
}

.userfab__trigger {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    padding: .4rem .65rem .4rem .55rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 999px;
    cursor: pointer;
    color: var(--text);
    font-size: .82rem;
    font-weight: 500;
    box-shadow: var(--shadow);
    transition: box-shadow var(--t-fast), border-color var(--t-fast);
}
.userfab__trigger:hover { border-color: var(--border-strong); box-shadow: var(--shadow-md); }

.userfab__avatar {
    width: 26px; height: 26px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
    font-size: 1.2rem;
    border-radius: 50%;
    overflow: hidden;
    background: var(--surface-alt);
}
.userfab__avatar-img {
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
}

.userfab__name { line-height: 1; }

.userfab__chevron {
    color: var(--text-soft);
    transition: transform var(--t-base);
    font-size: .75rem;
}
.userfab.is-open .userfab__chevron { transform: rotate(-90deg); }

.userfab__panel {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    width: 280px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-md);
    padding: .65rem 0;
    animation: hcFadeIn 140ms ease;
}

@keyframes hcFadeIn {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
}

.userfab__panel hr {
    margin: .5rem .75rem;
    border: 0;
    border-top: 1px solid var(--border);
}

.userfab__search {
    padding: .35rem .75rem .5rem;
}
.userfab__searchlabel {
    display: block;
    font-size: .72rem;
    color: var(--text-soft);
    margin-bottom: .35rem;
    line-height: 1.3;
}
.userfab__searchrow {
    display: flex;
    gap: .35rem;
}
.userfab__searchrow .form-control { font-size: .82rem; padding: .35rem .55rem; }
.userfab__searchrow .btn { padding: .35rem .6rem; }

.userfab__item {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .5rem 1rem;
    font-size: .85rem;
    color: var(--text);
    text-decoration: none;
    transition: background var(--t-fast), color var(--t-fast);
}
.userfab__item i {
    width: 18px;
    text-align: center;
    color: var(--primary);
    font-size: .95rem;
}
.userfab__item:hover {
    background: var(--surface-alt);
    color: var(--ink);
}
.userfab__item--danger { color: var(--danger); }
.userfab__item--danger i { color: var(--danger); }
.userfab__item--danger:hover { background: var(--danger-bg); color: var(--danger); }

/* Floating hamburger - alleen op mobiel */
.fab-burger {
    display: none;
    position: fixed;
    top: 14px;
    left: 14px;
    z-index: 110;
    width: 40px; height: 40px;
    border-radius: 999px;
    background: var(--surface);
    border: 1px solid var(--border);
    color: var(--text);
    cursor: pointer;
    box-shadow: var(--shadow);
    font-size: 1.05rem;
}
.fab-burger:hover { border-color: var(--border-strong); }

/* -----------------------------------------------------
   6. Main content
   -----------------------------------------------------
   Geen eigen `width` hier - die wordt al gezet door
   .app__main (= calc(100% - sidebar-w)). Een width:100%
   hier zou die calc overschrijven en de content ACHTER
   de fixed sidebar laten lopen.
   ----------------------------------------------------- */
.main {
    padding: 1.25rem 1.25rem 4rem 1.25rem;
    max-width: 1300px;
    margin-right: auto;                    /* witruimte alleen rechts op ultrawide */
    box-sizing: border-box;
}

/* Brede variant voor pages met veel info (overzicht, dashboard).
 * Niet ultrawide — 1600px is breed genoeg voor 3 kolommen zonder
 * dat ogen door 2200px text-lijnen moeten scannen. */
.main--wide { max-width: 1600px; }

.page-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.5rem;
}
.page-header h1 {
    margin: 0 0 .25rem;
    font-size: 1.6rem;
}
.page-header__sub {
    color: var(--text-muted);
    font-size: .88rem;
}
/* Knoppen rechts in de page-header vallen anders onder de floating user-FAB
 * (FAB zit fixed top:14, ~46 hoog). De rechter-kolom van de page-header wordt
 * net onder de FAB geduwd. Werkt of de knop nu los in een <div> staat of in
 * een .btn-group; :not(:first-child) zorgt dat een losse titel niet zakt. */
.page-header > :last-child:not(:first-child),
.page-header .btn-group { margin-top: 2.25rem; }

/* breadcrumb */
.breadcrumb {
    font-size: .78rem;
    color: var(--text-soft);
    margin-bottom: .25rem;
}
.breadcrumb a { color: var(--text-muted); }
.breadcrumb span + span::before {
    content: "/";
    margin: 0 .4rem;
    color: var(--text-soft);
}

/* -----------------------------------------------------
   7. Cards
   ----------------------------------------------------- */
.card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    margin-bottom: 1.25rem;
    overflow: hidden;
}
/* Voor cards met dropdowns (Choices.js etc.) die uit de card mogen popouten */
.card--overflow { overflow: visible; }

.card__header {
    padding: .9rem 1.25rem;
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: center;
    gap: .75rem;
    background: var(--surface-alt);
}
.card__title {
    margin: 0;
    font-size: .95rem;
    font-weight: 600;
    color: var(--ink);
}
.card__header .spacer { flex: 1; }

.card__body { padding: 1.25rem; }
.card__footer {
    padding: .8rem 1.25rem;
    border-top: 1px solid var(--border);
    background: var(--surface-alt);
    display: flex;
    gap: .5rem;
    justify-content: flex-end;
}

/* compactere card */
.card--tight .card__body { padding: .9rem 1rem; }

/* -----------------------------------------------------
   8. Buttons
   ----------------------------------------------------- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .45rem;
    padding: .5rem 1rem;
    font-family: inherit;
    font-size: .85rem;
    font-weight: 500;
    line-height: 1.2;
    border-radius: var(--radius-sm);
    /* Zichtbare border zodat secondary buttons (geen --primary/--ghost
     * variant) op donker thema niet wegvallen tegen --surface-alt. Primary
     * en ghost varianten overrulen 'm hieronder met hun eigen kleur. */
    border: 1px solid var(--border-strong);
    background: var(--surface-alt);
    color: var(--text);
    cursor: pointer;
    transition: background var(--t-fast), color var(--t-fast),
                border-color var(--t-fast), box-shadow var(--t-fast);
    text-decoration: none;
    white-space: nowrap;
}

.btn:hover { background: var(--border); }
.btn:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}
.btn[disabled],
.btn.is-disabled {
    opacity: .55;
    cursor: not-allowed;
}

.btn--primary {
    background: var(--primary);
    color: var(--text-on-primary);
    border-color: var(--primary);
}
.btn--primary:hover {
    background: var(--primary-600);
    border-color: var(--primary-600);
    color: #fff;
}

.btn--ghost {
    background: transparent;
    border-color: var(--border-strong);
    color: var(--ink);
}
.btn--ghost:hover { background: var(--surface-alt); color: var(--ink); border-color: var(--border-strong); }

.btn--dark {
    background: #6b5e54;
    border-color: #6b5e54;
    color: #fff;
}
.btn--dark:hover { background: #574a41; border-color: #574a41; color: #fff; }

/* Snel-knop direct in behandeling op overzicht-page */
.direct-in-beh-form,
.direct-binnen-form { margin: .75rem 0 1.25rem; }
.direct-in-beh-btn,
.direct-binnen-btn  { padding: .55rem 1rem; }

/* Quick-actions sub-card binnen het Reparatie status panel */
.quick-actions {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 1rem 1.1rem 1.05rem;
    margin: 1rem 0 1.75rem;
    box-shadow: 0 1px 3px rgba(42, 31, 26, .04);
}
.quick-actions__title {
    font-size: .72rem;
    font-weight: 700;
    color: var(--text-muted);
    letter-spacing: .08em;
    text-transform: uppercase;
    margin-bottom: .75rem;
    display: flex;
    align-items: center;
    gap: .4rem;
    padding-bottom: .65rem;
    border-bottom: 1px dashed var(--border);
}
.quick-actions__title i { font-size: 1.2em; color: var(--primary, #d86639); }
.quick-actions__form {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: .65rem;
    margin: 0;
}
.quick-actions__form + .quick-actions__form { margin-top: .75rem; padding-top: .75rem; border-top: 1px dashed var(--border); }
.quick-actions__form .btn { padding: .6rem 1.15rem; }
.quick-actions__check {
    display: flex;
    align-items: center;
    gap: .6rem;
    cursor: pointer;
    font-size: .95rem;
    font-weight: 500;
    color: var(--ink);
    user-select: none;
    padding: .25rem 0;
}
.quick-actions__check input[type="checkbox"] {
    width: 20px;
    height: 20px;
    cursor: pointer;
    accent-color: var(--primary, #d86639);
    margin: 0;
    flex-shrink: 0;
}
.quick-actions__check:hover { color: var(--primary, #d86639); }

.btn--danger {
    background: var(--danger);
    color: #fff;
    border-color: var(--danger);
}
.btn--danger:hover { background: #a4321f; border-color: #a4321f; }

.btn--success {
    background: var(--success);
    color: #fff;
    border-color: var(--success);
}
.btn--success:hover { background: #267e57; }

.btn--sm { padding: .35rem .7rem; font-size: .78rem; }
.btn--lg { padding: .7rem 1.4rem; font-size: .95rem; }

.btn-group {
    display: inline-flex;
    flex-wrap: wrap;
    gap: .4rem;
}

/* -----------------------------------------------------
   9. Forms
   ----------------------------------------------------- */
.form-row {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));  /* minmax(0, ...) voorkomt overflow door intrinsic min-width */
    gap: 1rem;
    margin-bottom: 1rem;
}

.form-group { margin-bottom: 1rem; }
.form-group--6 { grid-column: span 6; }
.form-group--4 { grid-column: span 4; }
.form-group--3 { grid-column: span 3; }
.form-group--12 { grid-column: span 12; }

.form-label {
    display: block;
    margin-bottom: .35rem;
    font-size: .85rem;
    font-weight: 500;
    color: var(--text);
}

.form-label .req { color: var(--danger); margin-left: 2px; }

.form-control,
.form-select,
.form-textarea {
    width: 100%;
    padding: .5rem .7rem;
    font-family: inherit;
    font-size: .88rem;
    color: var(--text);
    background: var(--surface);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    transition: border-color var(--t-fast), box-shadow var(--t-fast);
}

/* Custom dropdown chevron - native chevron weg, eigen SVG met
   meer ruimte tussen rand zodat het niet zo tegen de border drukt. */
.form-select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    padding-right: 2.25rem;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%236b5e54' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M6 8l4 4 4-4'/></svg>");
    background-repeat: no-repeat;
    background-position: right 14px center;
    background-size: 14px;
    cursor: pointer;
}
.form-select::-ms-expand { display: none; }   /* IE/legacy Edge */

.form-control:focus,
.form-select:focus,
.form-textarea:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px var(--primary-50);
}

/* Disabled / readonly form-fields — adaptieve "uitgegrijsd"-tint die in
 * beide modes duidelijk afwijkt van een actief veld (zonder dit blok zien
 * disabled inputs er in dark mode identiek aan normale uit). */
.form-control:disabled,
.form-select:disabled,
.form-textarea:disabled,
.form-control[readonly],
.form-select[readonly],
.form-textarea[readonly] {
    background: color-mix(in srgb, var(--text-muted) 18%, var(--surface));
    color: var(--text-muted);
    border-color: var(--border);
    cursor: not-allowed;
    opacity: .85;
}

/* Uitzondering: datepickers (.hcv6-date-wrap) zetten readonly puur om typen
 * te blokkeren — het veld is wel degelijk klikbaar (opent een picker). Reset
 * dus de "uitgegrijsd"-look naar een normaal-uitziend, klikbaar veld. */
.hcv6-date-wrap .form-control[readonly] {
    background: var(--surface);
    color: var(--text);
    border-color: var(--border-strong);
    cursor: pointer;
    opacity: 1;
}

.form-textarea { min-height: 90px; resize: vertical; }

.form-help {
    margin-top: .3rem;
    font-size: .8rem;
    color: var(--text-soft);
}

.form-error {
    margin-top: .3rem;
    font-size: .8rem;
    color: var(--danger);
}

/* Native browser :invalid styling neutraliseren - we tonen
 * errors alleen via onze eigen .is-invalid class (gezet door JS
 * of PHP), zodat een leeg required veld niet automatisch rood is. */
.form-control:invalid,
.form-control:user-invalid,
.form-select:invalid,
.form-select:user-invalid,
.form-textarea:invalid,
.form-textarea:user-invalid {
    border-color: var(--border-strong);
    box-shadow: none;
}

/* inline error highlight - alleen onze eigen class triggert rood */
.form-control.is-invalid,
.form-select.is-invalid,
.form-textarea.is-invalid {
    border-color: var(--danger);
    box-shadow: 0 0 0 3px var(--danger-bg);
}

/* checkbox / radio - identieke styling zodat ze visueel matchen */
.check, .radio {
    display: inline-flex;
    align-items: center;
    gap: .55rem;          /* iets ruimer voor grotere inputs */
    font-size: .95rem;    /* opgewaardeerd van .85rem voor balans met 22px input */
    line-height: 1.3;
    cursor: pointer;
    padding: .15rem 0;
    margin: 0 .85rem .15rem 0;
    user-select: none;
}
.check > input, .radio > input {
    /* Native browser rendering met coral accent — geen custom vinkje/dot,
     * geen appearance:none. Browser zorgt zelf voor tick/cirkel-in-cirkel,
     * accent-color geeft de coral tint. 22px is groter dan default 16px
     * voor betere klik-target zonder dat het uit verhouding raakt. */
    accent-color: var(--primary);
    width: 22px;
    height: 22px;
    cursor: pointer;
    margin: 0;
    flex-shrink: 0;
}

/* Material Symbols — fill modifier. Standaard zijn alle icons outline
 * (FILL=0). Voeg .filled toe (of een icoon-specifieke class zoals
 * .beenhere) voor de gevulde variant. */
.material-symbols-rounded.filled,
.material-symbols-rounded.beenhere {
    font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

/* Quick-action card — compact inline blok met een toggle bovenaan +
 * een conditioneel sub-body (verborgen als toggle uit). Gebruikt bv. voor
 * "PostNL verzendlabel aanmaken" + verzekerd-bedrag in de afronden-flow. */
.quick-action {
    background: var(--surface-alt);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: .75rem 1rem;
    margin-bottom: 1rem;
}
.quick-action__row {
    display: flex;
    align-items: center;
    gap: .65rem;
}
.quick-action__icon {
    color: var(--text-muted);
    flex-shrink: 0;
    font-size: 1.05rem;
}
.quick-action__label {
    flex: 1;
    font-weight: 600;
    font-size: .92rem;
    color: var(--ink);
}
.quick-action__body {
    margin-top: .8rem;
    padding-top: .7rem;
    border-top: 1px solid var(--border);
}
.quick-action__body .form-label {
    margin-bottom: .4rem;
    font-size: .82rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: .03em;
}
.quick-action__body[hidden] { display: none; }

/* iOS-style switch — identiek aan modules.php (geüpload als generieke
 * class voor overal in v6: PostNL verzendlabel, instellingen, etc.).
 * Inline kopie in modules.php is harmless duplicaat. */
.mod-switch {
    position: relative;
    display: inline-block;
    width: 50px;
    height: 28px;
    flex-shrink: 0;
}
.mod-switch__input {
    opacity: 0; width: 0; height: 0;
    position: absolute;
}
.mod-switch__slider {
    position: absolute;
    cursor: pointer;
    inset: 0;
    background: #cdc7be;
    border-radius: 28px;
    transition: background .2s ease;
}
.mod-switch__slider::before {
    content: "";
    position: absolute;
    height: 22px; width: 22px;
    left: 3px; top: 3px;
    background: #fff;
    border-radius: 50%;
    box-shadow: 0 1px 2px rgba(0,0,0,.25);
    transition: transform .2s ease;
}
.mod-switch__input:checked + .mod-switch__slider { background: var(--primary); }
.mod-switch__input:checked + .mod-switch__slider::before { transform: translateX(22px); }
.mod-switch__input:focus-visible + .mod-switch__slider {
    box-shadow: 0 0 0 3px rgba(216, 102, 57, .25);
}
.mod-switch--saving .mod-switch__slider { opacity: .55; pointer-events: none; }
.mod-switch--locked .mod-switch__slider { cursor: not-allowed; background: #ddd5c9; }
.mod-switch--locked .mod-switch__input { cursor: not-allowed; }

/* Stacked variant - meerdere checks/radios onder elkaar (gelijke gaps) */
.check-list {
    display: flex;
    flex-direction: column;
    gap: .35rem;
}
.check-list .check,
.check-list .radio {
    margin-right: 0;
}

/* Action picker - radio lijst voor "Volgende actie" sectie.
 * Gebruikt default .radio styling (.85rem, 16px inputs) — alleen
 * stacked layout-tweaks om radios compact onder elkaar te zetten. */
.action-picker {
    margin-bottom: .5rem;
}
.action-picker__title {
    margin: 0 0 .75rem;
    font-size: .9rem;
    font-weight: 600;
    color: var(--ink);
}
.action-picker .check-list {
    gap: .2rem;                /* radios compact onder elkaar */
}
.action-picker .radio {
    padding: .15rem 0;
}

/* "Huidige status" bar - visueel vastgemaakt aan de card__header,
 * iets donkerder bruin tint, geen border. Breekt uit de card__body
 * padding via negatieve margin zodat 'ie flush tegen de header zit. */
.current-status {
    display: block;
    margin: -1.25rem -1.25rem 1.1rem;   /* bridge: breek door body padding */
    padding: .55rem 1.25rem;            /* slanker dan header, horizontaal gelijk */
    /* Iets donkerder dan --surface-alt — color-mix met de body-ink kleur
     * geeft automatisch een goede tint in zowel light als dark thema's. */
    background: color-mix(in srgb, var(--surface-alt) 78%, var(--ink) 8%);
    border: none;
    border-radius: 0;
    color: var(--ink);
    font-size: .9rem;
    border-bottom: 1px solid var(--border);
}
.current-status strong { font-weight: 600; color: var(--ink); margin-right: .25rem; }

/* segmented radio group (zoals "kies klanttype") */
.segmented {
    display: inline-flex;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius);
    padding: .35rem;
    background: var(--surface-alt);
    gap: .5rem;
}
.segmented label {
    padding: .45rem .9rem;
    border: 1px solid var(--border);
    background: var(--surface);
    border-radius: var(--radius-sm);
    font-size: .82rem;
    cursor: pointer;
    color: var(--text-muted);
    transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast);
}
.segmented label:hover {
    border-color: var(--border-strong);
    color: var(--ink);
}
.segmented input[type=radio] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}
.segmented input[type=radio]:checked + label,
.segmented label:has(input:checked) {
    background: var(--primary);
    color: #fff;
    border-color: var(--primary);
    box-shadow: var(--shadow-sm);
    font-weight: 600;
}

/* -----------------------------------------------------
   10. Tables
   ----------------------------------------------------- */
.table-wrap { overflow-x: auto; }

.table {
    width: 100%;
    border-collapse: collapse;
    font-size: .85rem;
}
.table th,
.table td {
    padding: .65rem .8rem;
    text-align: left;
    border-bottom: 1px solid var(--border);
    vertical-align: middle;
}
.table th {
    font-weight: 600;
    color: var(--text-muted);
    background: var(--surface-alt);
    font-size: .76rem;
    text-transform: uppercase;
    letter-spacing: .04em;
}
.table tbody tr:hover { background: var(--surface-alt); }

/* Generic selectable list item (lijst van RMAs / klanten / etc.)
 * Gebruik als wrapper rond een label/div met checkbox + tekst. */
.list-pick {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .65rem .9rem;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
    cursor: pointer;
    transition: background var(--t-fast), border-color var(--t-fast);
    margin-bottom: .35rem;
}
.list-pick:hover {
    background: var(--surface-alt);    /* zachte hover, geen oranje */
    border-color: var(--border-strong);
}
.list-pick.is-active,
.list-pick:has(input:checked) {
    background: var(--surface-alt);
    border-color: var(--primary);
}

.table--compact th, .table--compact td { padding: .45rem .6rem; }

/* Vlag (NL/BE) inline naast tekst.
 * Container heeft vaste size + overflow:hidden, img vult container.
 * Werkt ook als de SVG geen intrinsic dimensions heeft. */
.flag {
    display: inline-flex;
    vertical-align: middle;
    margin-left: .35rem;
    width: 22px;
    height: 15px;
    overflow: hidden;
    border-radius: 2px;
    box-shadow: 0 0 0 1px rgba(0,0,0,.08);
    flex-shrink: 0;
}
.flag img,
.flag .flagsize {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover;
    display: block;
}

/* key-value tabel (zoals klantgegevens block) -
 * width:max-content + cap zorgt dat tabel niet onnodig uitspreidt
 * op brede cards (anders ontstaat te veel gat tussen label en value). */
.kv {
    width: max-content;
    max-width: 100%;
    border-collapse: collapse;
}
.kv th, .kv td {
    padding: .4rem .6rem;
    text-align: left;
    vertical-align: top;
    font-size: .85rem;
    border-bottom: 1px dashed var(--border);
}
.kv th {
    width: 1%;                   /* shrink-to-content */
    white-space: nowrap;
    min-width: 130px;            /* maar niet smaller dan langste label */
    padding-right: 1.25rem;
    color: var(--text-muted);
    font-weight: 500;
}
.kv tr:last-child th, .kv tr:last-child td { border-bottom: 0; }

/* -----------------------------------------------------
   11. Status pills / chips
   ----------------------------------------------------- */
.pill {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: 5px 11px;          /* iets ruimere verticale padding zodat pills
                                   niet plat aanvoelen in card-headers/lijsten */
    font-size: .72rem;
    font-weight: 500;
    border-radius: 999px;
    background: var(--surface-alt);
    color: var(--text-muted);
    line-height: 1.5;
}
.pill--success { background: var(--success); color: #fff; }
.pill--warning { background: var(--warning); color: #fff; }
.pill--danger  { background: var(--danger);  color: #fff; }
.pill--info    { background: var(--info);    color: #fff; }
.pill--primary { background: var(--primary); color: #fff; }

/* Zachte variant - lichte bg + donker kleurige text voor sterk contrast */
.pill--soft.pill--success { background: var(--success-bg); color: #1a6b48; border: 1px solid rgba(47,158,107,.35); }
.pill--soft.pill--warning { background: var(--warning-bg); color: #8a6614; border: 1px solid rgba(217,154,43,.35); }
.pill--soft.pill--danger  { background: var(--danger-bg);  color: #8c2618; border: 1px solid rgba(192,57,43,.35); }
.pill--soft.pill--info    { background: var(--info-bg);    color: #1f5b96; border: 1px solid rgba(47,126,199,.35); }
.pill--soft.pill--primary { background: color-mix(in srgb, var(--primary) 14%, var(--surface)); color: var(--primary); border: 1px solid rgba(216,102,57,.35); }

/* Groter variant - voor prominente status pills (bv kaart-header notificaties) */
.pill--lg {
    font-size: .9rem;
    padding: .5rem 1.1rem;
    font-weight: 600;
    border-radius: var(--radius);
    letter-spacing: .01em;
}

/* -----------------------------------------------------
   12. Status tabs (voor openstaande_reparaties_overzicht)
   ----------------------------------------------------- */
.statusbar {
    display: flex;
    flex-wrap: wrap;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
    margin-bottom: 1.25rem;
}
.statusbar__item {
    flex: 1 1 auto;
    text-align: center;
    padding: .65rem .8rem;
    font-size: .78rem;
    color: var(--text-muted);
    border-right: 1px solid var(--border);
    background: var(--surface);
    cursor: pointer;
    transition: background var(--t-fast), color var(--t-fast);
    white-space: nowrap;
}
.statusbar__item:last-child { border-right: 0; }
.statusbar__item:hover { background: var(--surface-alt); color: var(--ink); }
.statusbar__item.is-active {
    color: var(--primary-600);
    background: var(--surface-alt);
    font-weight: 500;
    box-shadow: inset 0 -3px 0 var(--primary);
}

/* -----------------------------------------------------
   12b. Timeline (vertical) + Logs
   ----------------------------------------------------- */
.timeline {
    list-style: none;
    padding: 0 0 0 1.5rem;       /* hele tijdlijn iets meer naar rechts */
    margin: 0;
    position: relative;
}

.timeline__item {
    display: grid;
    grid-template-columns: 200px 28px 1fr;   /* datum kolom breder voor datum + tijd op 1 regel */
    column-gap: 1rem;
    align-items: start;                       /* van start zodat sub-label onder main valt, niet meedoet aan centering */
    padding: .4rem 0;
    position: relative;
}

/* verbindende lijn door de cirkels heen — loopt van midden dot N
 * tot voorbij het midden van dot N+1; dot heeft z-index 1 zodat de
 * lijn netjes onder de cirkel wegvalt.
 * top: 13px = halve dot-hoogte → lijn start op dot-center, ook bij
 * items met sub-label die het item hoger maken. */
.timeline__item::before {
    content: "";
    position: absolute;
    left: calc(200px + 1rem + 13px);   /* datum kolom + gap + halve dot */
    transform: translateX(-50%);
    top: 13px;                          /* halve dot-hoogte (26/2) */
    bottom: -14px;                      /* vaste 14px voorbij item-bottom, onafhankelijk van item-hoogte */
    width: 2px;
    background: var(--border);
    z-index: 0;
}
.timeline__item:last-child::before { display: none; }

/* Date + label krijgen line-height = dot-hoogte, zodat hun eerste tekstregel
 * altijd op het dot-midden valt (consistent voor items mét en zonder sub-label). */
.timeline__date {
    text-align: right;
    font-size: .82rem;
    color: var(--text-muted);
    line-height: 26px;
    white-space: nowrap;
}
.timeline__date small {
    display: inline;             /* tijd naast datum op 1 regel */
    font-size: inherit;          /* zelfde grootte als datum */
    color: var(--text-soft);
    margin-left: .35rem;
}

.timeline__dot {
    width: 26px; height: 26px;
    border-radius: 50%;
    background: var(--border-strong);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .72rem;
    line-height: 1;
    position: relative;     /* zodat z-index werkt */
    z-index: 1;             /* boven de verbindende lijn */
}
.timeline__dot i {
    line-height: 1;
    display: block;
}

.timeline__label {
    font-size: .92rem;
    color: var(--text-muted);
    line-height: 26px;       /* match dot-hoogte → main label valt op dot-midden */
    font-weight: 500;
}

/* Bereikt: oranje dot + checkmark, sterker label */
.timeline__item--done .timeline__dot {
    background: var(--primary);
}
.timeline__item--done .timeline__label {
    color: var(--ink);
    font-weight: 600;
}
.timeline__item--done::before {
    background: var(--primary);
    opacity: .35;
}

/* Sub-label onder een timeline stap (bv "Akkoord prijsopgave", "Handmatig gesloten") */
.timeline__sub {
    display: flex;             /* block-level zodat het ONDER het label valt, niet ernaast */
    align-items: center;
    gap: .35rem;
    margin-top: .15rem;        /* main label heeft line-height 26px dus minder gap nodig */
    font-size: .85rem;
    font-weight: 600;
    padding-left: .25rem;
    line-height: 1.3;          /* override parent's 26px → eigen regelhoogte */
}
.timeline__sub--success { color: var(--info); }     /* blauw zoals oude */
.timeline__sub--danger  { color: var(--danger); }
.timeline__sub--muted   { color: var(--text-muted); } /* bv. handmatig gesloten */
.timeline__sub i        { font-size: .8rem; opacity: .85; }

/* Logs lijst */
.log-list {
    display: flex;
    flex-direction: column;
    gap: .75rem;
}
.log-entry {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
    background: var(--surface);
}
.log-entry__head {
    background: var(--surface-alt);
    padding: .55rem .9rem;
    display: flex;
    align-items: center;
    gap: .75rem;
    font-size: .85rem;
}
.log-entry__author {
    font-weight: 600;
    color: var(--ink);
}
.log-entry__time {
    margin-left: auto;
    font-size: .76rem;
    color: var(--text-soft);
}
.log-entry__body {
    padding: .7rem .9rem;
    font-size: .87rem;
    color: var(--text);
    line-height: 1.45;
}
.log-entry__body :last-child { margin-bottom: 0; }

@media (max-width: 640px) {
    .timeline { padding-left: .5rem; }
    .timeline__item {
        grid-template-columns: 140px 24px 1fr;   /* nog steeds datum + tijd op 1 regel op smal scherm */
        column-gap: .65rem;
    }
    /* halve dot = 11px (22px dot); transform centreert het lijntje, top op dot-center */
    .timeline__item::before {
        left: calc(140px + .65rem + 11px);
        top: 11px;
    }
    .timeline__dot { width: 22px; height: 22px; font-size: .65rem; }
    .timeline__date { font-size: .72rem; line-height: 22px; }   /* match mobile dot-hoogte */
    .timeline__label { line-height: 22px; }                       /* match mobile dot-hoogte */
}

/* -----------------------------------------------------
   13. Alerts
   ----------------------------------------------------- */
.alert {
    padding: .75rem 1rem;
    border-radius: var(--radius);
    margin-bottom: 1rem;
    border: 1px solid var(--border);
    border-left: 3px solid var(--border-strong);
    background: var(--surface-alt);
    font-size: .88rem;
    color: var(--ink);
    display: flex;
    align-items: flex-start;
    gap: .55rem;
}
.alert > i { flex-shrink: 0; padding-top: .15rem; font-size: 1rem; color: var(--text-muted); }
.alert > div { flex: 1; min-width: 0; }
.alert--success { background: #f0f3ec; border-color: #d8e0cd; border-left-color: #7a9560; }
.alert--success > i { color: #7a9560; }
.alert--warning { background: #f7efde; border-color: #e7d6b3; border-left-color: #b88a2a; }
.alert--warning > i { color: #b88a2a; }
.alert--danger  { background: #f6e6e0; border-color: #ecc9be; border-left-color: var(--primary, #d86639); }
.alert--danger  > i { color: var(--primary, #d86639); }
.alert--info    { background: #f0ebde; border-color: #ddd3bc; border-left-color: #8a7755; }
.alert--info    > i { color: #8a7755; }

/* Dark mode overrides voor alerts — light pastels op dark surface zijn
 * onleesbaar. We gebruiken semi-transparante accent-tints + lichte tekst
 * zodat de "let op"-strook duidelijk leesbaar blijft op charcoal/coffee. */
[data-theme="charcoal"] .alert--warning,
[data-theme="coffee"]   .alert--warning {
    background: rgba(212, 164, 69, 0.14);
    border-color: rgba(212, 164, 69, 0.30);
    border-left-color: #d4a445;
    color: var(--ink);
}
[data-theme="charcoal"] .alert--warning > i,
[data-theme="coffee"]   .alert--warning > i { color: #d4a445; }

[data-theme="charcoal"] .alert--danger,
[data-theme="coffee"]   .alert--danger {
    background: rgba(216, 102, 57, 0.14);
    border-color: rgba(216, 102, 57, 0.32);
    border-left-color: var(--primary, #d86639);
    color: var(--ink);
}
[data-theme="charcoal"] .alert--danger > i,
[data-theme="coffee"]   .alert--danger > i { color: var(--primary, #d86639); }

[data-theme="charcoal"] .alert--info,
[data-theme="coffee"]   .alert--info {
    background: rgba(150, 136, 120, 0.18);
    border-color: rgba(150, 136, 120, 0.32);
    border-left-color: #c6b89a;
    color: var(--ink);
}
[data-theme="charcoal"] .alert--info > i,
[data-theme="coffee"]   .alert--info > i { color: #c6b89a; }

[data-theme="charcoal"] .alert--success,
[data-theme="coffee"]   .alert--success {
    background: rgba(122, 149, 96, 0.16);
    border-color: rgba(122, 149, 96, 0.30);
    border-left-color: #a3c082;
    color: var(--ink);
}
[data-theme="charcoal"] .alert--success > i,
[data-theme="coffee"]   .alert--success > i { color: #a3c082; }

/* Toast: floating notification rechtsboven, auto-dismiss via JS.
 * Slide-in van rechts, fade-out wanneer .toast--out class wordt toegevoegd. */
.toast {
    position: fixed;
    top: 1.25rem;
    right: 1.25rem;
    z-index: 9999;
    display: flex;
    align-items: center;
    gap: .65rem;
    min-width: 280px;
    max-width: min(420px, calc(100vw - 2rem));
    padding: .85rem 1rem;
    border-radius: var(--radius);
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--text);
    font-size: .9rem;
    font-weight: 500;
    box-shadow: 0 8px 28px rgba(40, 25, 15, 0.18), 0 2px 6px rgba(40, 25, 15, 0.08);
    animation: hcv6-toast-in .28s ease-out;
}
.toast i { font-size: 1.15rem; flex-shrink: 0; }
.toast span { flex: 1; line-height: 1.35; }
.toast__close {
    background: none;
    border: 0;
    font-size: 1.5rem;
    line-height: 1;
    cursor: pointer;
    color: inherit;
    opacity: .55;
    padding: 0 .15rem;
    margin-left: .15rem;
}
.toast__close:hover { opacity: 1; }

.toast--success { border-left: 4px solid var(--success); color: #1e6e4a; }
.toast--success i { color: var(--success); }
.toast--warning { border-left: 4px solid var(--warning); color: #8a6614; }
.toast--warning i { color: var(--warning); }
.toast--danger  { border-left: 4px solid var(--danger);  color: #8c2618; }
.toast--danger  i { color: var(--danger); }
.toast--info    { border-left: 4px solid var(--info);    color: #1f5e96; }
.toast--info    i { color: var(--info); }

.toast--out { animation: hcv6-toast-out .24s ease-in forwards; }

@keyframes hcv6-toast-in {
    from { opacity: 0; transform: translateX(20px); }
    to   { opacity: 1; transform: translateX(0); }
}
@keyframes hcv6-toast-out {
    from { opacity: 1; transform: translateX(0); }
    to   { opacity: 0; transform: translateX(20px); }
}

@media (max-width: 640px) {
    .toast {
        top: .75rem;
        right: .75rem;
        left: .75rem;
        max-width: none;
        min-width: 0;
    }
}

/* -----------------------------------------------------
   14. Utilities
   ----------------------------------------------------- */
.flex { display: flex; }
.flex-between { display: flex; justify-content: space-between; align-items: center; }
.gap-1 { gap: .5rem; }
.gap-2 { gap: 1rem; }
.mt-0 { margin-top: 0 !important; }
.mt-1 { margin-top: .5rem !important; }
.mt-2 { margin-top: 1rem !important; }
.mb-0 { margin-bottom: 0 !important; }
.mb-1 { margin-bottom: .5rem !important; }
.mb-2 { margin-bottom: 1rem !important; }
.text-muted { color: var(--text-muted); }
.text-soft  { color: var(--text-soft); }
.text-right { text-align: right; }
.text-center { text-align: center; }
.small { font-size: .83rem; }
.mono { font-family: 'JetBrains Mono', Consolas, monospace; }
/* Telefoonnummer in mono + tabular-nums zodat cijfers gelijke breedte
 * krijgen → +31/+32 nummers lijnen onder elkaar uit in tabellen. */
.hc-tel-mono {
    font-family: 'JetBrains Mono', 'SFMono-Regular', Consolas, Menlo, monospace;
    font-variant-numeric: tabular-nums;
    font-size: .92em;
    letter-spacing: .01em;
    color: var(--ink);
}
/* Verdacht NL/BE nummer (begint met +31/+32 maar lengte klopt niet) →
 * coral als waarschuwing. Geldige nummers blijven default ink-kleur. */
.hc-tel-mono.is-invalid { color: var(--primary, #d86639); }

/* Live-preview onder een telefoon-input — toont wat de phone_format.js
 * helper als E.164-string in de DB gaat opslaan. Verschijnt alleen als
 * de geformatteerde waarde anders is dan wat de gebruiker net intypte. */
.hc-phone-preview {
    font-size: .78rem;
    color: var(--text-muted);
    font-family: 'JetBrains Mono', 'SFMono-Regular', Consolas, Menlo, monospace;
    font-variant-numeric: tabular-nums;
    margin-top: .3rem;
    min-height: 1.1em;       /* reserveert ruimte → geen layout-jump */
    line-height: 1.2;
    transition: color var(--t-fast);
}
.hc-phone-preview.is-active { color: var(--text-soft); }

/* Number-spinner — vervangt de lelijke native number-input arrows met
 * grote − / + knoppen. Auto-init via assets/js/spinner.js: respecteert
 * min/max/step, disable bij grenzen, fires 'input' + 'change' events
 * zodat bestaande listeners blijven werken. */
.hc-spinner {
    display: inline-flex;
    align-items: stretch;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
    max-width: 200px;
    width: 100%;
}
.hc-spinner__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    flex-shrink: 0;
    border: none;
    background: var(--surface-alt);
    color: var(--ink);
    cursor: pointer;
    font-size: 1.15rem;
    font-weight: 600;
    line-height: 1;
    padding: 0;
    transition: background var(--t-fast), color var(--t-fast);
}
.hc-spinner__btn:hover:not(:disabled) {
    background: var(--primary, #d86639);
    color: #fff;
}
.hc-spinner__btn:active:not(:disabled) {
    background: color-mix(in srgb, var(--primary, #d86639) 80%, #000);
}
.hc-spinner__btn:disabled {
    color: var(--text-soft);
    cursor: not-allowed;
    opacity: .55;
}
.hc-spinner__btn--minus { border-right: 1px solid var(--border); }
.hc-spinner__btn--plus  { border-left:  1px solid var(--border); }

.hc-spinner__input {
    flex: 1;
    border: none;
    background: transparent;
    text-align: center;
    font-size: 1rem;
    font-weight: 600;
    color: var(--ink);
    font-variant-numeric: tabular-nums;
    padding: .55rem .25rem;
    min-width: 0;
    width: 100%;
    -moz-appearance: textfield;
}
.hc-spinner__input::-webkit-inner-spin-button,
.hc-spinner__input::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
.hc-spinner__input:focus {
    outline: none;
    box-shadow: none;
    background: color-mix(in srgb, var(--primary, #d86639) 5%, var(--surface));
}

/* Moderne file-upload drop-zone — vervangt native <input type="file">.
 * Auto-init via assets/js/file_drop.js: drag & drop, file-preview lijst,
 * verwijderen-knop per item. De echte <input> blijft in de DOM zodat
 * normale form-submit werkt. */
.hc-file-drop { position: relative; }
.hc-file-drop__input {
    position: absolute;
    opacity: 0;
    width: 0; height: 0;
    pointer-events: none;
}
.hc-file-drop__label {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .35rem;
    padding: 1.5rem 1rem;
    background: var(--surface-alt);
    border: 2px dashed var(--border-strong);
    border-radius: var(--radius);
    cursor: pointer;
    text-align: center;
    transition: background var(--t-fast), border-color var(--t-fast);
}
.hc-file-drop__label:hover {
    background: color-mix(in srgb, var(--primary, #d86639) 8%, var(--surface-alt));
    border-color: var(--primary, #d86639);
}
.hc-file-drop.is-drag-over .hc-file-drop__label {
    background: color-mix(in srgb, var(--primary, #d86639) 14%, var(--surface));
    border-color: var(--primary, #d86639);
    border-style: solid;
}
.hc-file-drop__icon {
    font-size: 1.8rem;
    color: var(--primary, #d86639);
    margin-bottom: .2rem;
}
.hc-file-drop__title {
    font-weight: 600;
    color: var(--ink);
    font-size: .92rem;
}
.hc-file-drop__hint {
    font-size: .8rem;
    color: var(--text-muted);
}
.hc-file-drop__list {
    margin-top: .6rem;
    display: flex;
    flex-direction: column;
    gap: .35rem;
}
.hc-file-drop__item {
    display: flex;
    align-items: center;
    gap: .55rem;
    padding: .45rem .7rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 6px;
    font-size: .85rem;
}
.hc-file-drop__item i { color: var(--text-muted); }
.hc-file-drop__item-name {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--ink);
}
.hc-file-drop__item-size {
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
    font-size: .75rem;
    white-space: nowrap;
}
.hc-file-drop__item-remove {
    background: transparent;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    padding: .25rem .35rem;
    border-radius: 4px;
    font-size: .85rem;
    transition: background var(--t-fast), color var(--t-fast);
}
.hc-file-drop__item-remove:hover {
    background: var(--surface-alt);
    color: #c25527;
}

/* Status-rows in direct-upload mode — pending (spinner), ok (groen vinkje)
 * en err (rode waarschuwing). Bovenop dezelfde .hc-file-drop__item basis. */
.hc-file-drop__item--pending i { color: var(--primary, #d86639); }
.hc-file-drop__item--ok {
    background: color-mix(in srgb, var(--success, #6cae87) 12%, var(--surface));
    border-color: color-mix(in srgb, var(--success, #6cae87) 30%, var(--border));
}
.hc-file-drop__item--ok i { color: var(--success, #6cae87); }
.hc-file-drop__item--err {
    background: color-mix(in srgb, #c25527 10%, var(--surface));
    border-color: color-mix(in srgb, #c25527 30%, var(--border));
}
.hc-file-drop__item--err i { color: #c25527; }

/* Generieke "tekst + kopieer-knop" combo — gebruikt voor e-mailadressen
 * in tabellen en detail-views. Auto-init via assets/js/copy_button.js
 * kopieert het data-copy="..." attribuut naar clipboard met groen vinkje
 * als feedback. */
.hc-copy-wrap {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
}
.hc-copy-text { color: var(--ink); }
.hc-copy-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px; height: 26px;
    padding: 0;
    background: var(--surface);
    color: var(--text-muted);
    border: 1px solid var(--border);
    border-radius: 5px;
    cursor: pointer;
    font-size: .76rem;
    transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast);
}
.hc-copy-btn:hover {
    background: var(--surface-alt);
    color: var(--ink);
    border-color: var(--border-strong);
}
.hc-copy-btn.is-copied {
    background: color-mix(in srgb, var(--success, #6cae87) 18%, var(--surface));
    color: var(--success, #6cae87);
    border-color: color-mix(in srgb, var(--success, #6cae87) 40%, var(--border));
}
/* Mono in een knop: iets vetter, tighter en ~1px kleiner zodat het
 * optisch op dezelfde baseline staat als "Bekijk" ervoor — mono fonts
 * hebben een hogere x-height dan Poppins waardoor ze 'omhoog kruipen'. */
.btn .mono {
    font-weight: 600;
    letter-spacing: -.02em;
    font-size: .93em;
}
/* Label-tekst (zoals "Bekijk") naast een mono span 1px omlaag duwen —
 * Poppins's cap-height ligt hoger in de line-box dan JetBrains Mono,
 * waardoor het anders boven het RMA-nummer lijkt te zweven. */
.btn-rma-label {
    position: relative;
    top: 1px;
}

/* grid helpers */
.cols-2 {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.25rem;
}
.cols-3 {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.25rem;
}

/* -----------------------------------------------------
   15. Responsive - mobile-friendly voor alle pages
   ----------------------------------------------------- */

/* Tablet / klein laptop scherm - sidebar wordt drawer */
@media (max-width: 992px) {
    .app__sidebar {
        width: 90%;
        max-width: 360px;        /* cap zodat menu op iPad niet super breed wordt */
        transform: translateX(-100%);
        transition: transform var(--t-base);
        z-index: 200;
        box-shadow: var(--shadow-md);
    }
    body.sidebar-open .app__sidebar { transform: translateX(0); }
    body.sidebar-open::after {
        content: "";
        position: fixed; inset: 0;
        background: rgba(0,0,0,.45);
        z-index: 150;
    }

    /* Mobile: main heeft geen sidebar offset meer */
    .app__main {
        margin-left: 0;
        width: 100%;
    }

    /* Mobile: floating hamburger zichtbaar + close button in sidebar */
    .fab-burger    { display: inline-flex; align-items: center; justify-content: center; }
    .sidebar__close { display: inline-flex; align-items: center; justify-content: center; }

    .cols-2, .cols-3 { grid-template-columns: 1fr; }
    .form-group--6, .form-group--4, .form-group--3, .form-group--8 {
        grid-column: span 12;
    }
    .main {
        padding: 4rem 1.25rem 3rem;          /* top padding voor floating buttons */
    }
    /* .main reserveert hier al ruimte voor de FAB → de extra clearance-marge op
     * de page-header-knoppen is niet nodig (en zou een gat geven, m.n. in de
     * gestapelde mobiele layout). */
    .page-header > :last-child:not(:first-child),
    .page-header .btn-group { margin-top: 0; }
}

/* Smartphone */
@media (max-width: 640px) {
    .main { padding: 4rem .85rem 3rem; }
    .userfab__name { display: none; }        /* alleen avatar + chevron op mobile */
    .userfab__panel { width: calc(100vw - 28px); right: 0; }

    .page-header {
        flex-direction: column;
        align-items: stretch;
        gap: .75rem;
    }
    .page-header h1 { font-size: 1.25rem; }
    .page-header__sub { font-size: .82rem; }

    .card__header {
        padding: .75rem .9rem;
        flex-wrap: wrap;
    }
    .card__title { font-size: .9rem; }
    .card__body { padding: .9rem; }
    .card__footer { padding: .65rem .9rem; flex-wrap: wrap; }

    .btn--lg { padding: .55rem 1rem; font-size: .9rem; }

    /* Statusbar tabs onder elkaar als scrollen niet praktisch is */
    .statusbar { flex-direction: column; }
    .statusbar__item {
        border-right: 0;
        border-bottom: 1px solid var(--border);
        text-align: left;
        padding: .55rem .8rem;
    }
    .statusbar__item.is-active {
        box-shadow: inset 3px 0 0 var(--primary);
    }

    /* Segmented (klanttype switch) op mobiel: ECHTE card-knoppen
     * onder elkaar — elke optie krijgt zelfde achtergrond + border,
     * de actieve krijgt oranje fill. Anders lijken inactieve labels
     * niet-klikbare tekst. */
    .segmented {
        display: flex;
        flex-direction: column;
        width: 100%;
        background: transparent;
        border: 0;
        padding: 0;
        gap: .5rem;
    }
    .segmented label {
        background: var(--surface);
        border: 1px solid var(--border);
        padding: .85rem 1rem;
        text-align: center;
        font-weight: 500;
        color: var(--ink);
        font-size: .92rem;
        border-radius: 8px;
    }
    .segmented label:has(input:checked) {
        background: var(--primary);
        color: #fff;
        border-color: var(--primary);
        font-weight: 600;
    }

    /* Tabel altijd horizontaal scrollbaar (kv blijft mooie key/value) */
    .table-wrap { -webkit-overflow-scrolling: touch; }

    /* form rij volledig stacken */
    .form-row { gap: .65rem; }

    .breadcrumb { font-size: .72rem; }
}

/* Mini smartphone (iPhone SE etc) */
@media (max-width: 380px) {
    .main { padding: 3.5rem .65rem 2rem; }
    .card__body { padding: .75rem; }
}


/* =============================================================
   TinyMCE chrome overrides — theme-aware (light/charcoal/coffee).
   ------------------------------------------------------------
   TinyMCE 6 oxide-dark skin gebruikt een TinyMCE-blauwe focus
   border + statusbar tint die niet matched met HCv6 brand.
   Forceer alles naar onze design-tokens zodat de editor in
   elk thema bij de rest van de page past.
   ============================================================= */

/* Editor container — wrapper bg = surface-alt (beige) zodat er geen
 * witte strip boven de toolbar zichtbaar is. De content/iframe area
 * krijgt z'n eigen surface (wit) verderop. */
.tox.tox-tinymce {
    border: 1px solid var(--border) !important;
    border-radius: var(--radius-sm) !important;
    background: var(--surface-alt) !important;
}
.tox.tox-tinymce--focused,
.tox.tox-tinymce:focus-within {
    border-color: var(--primary) !important;
    box-shadow: 0 0 0 3px var(--primary-50) !important;
}

/* Light theme:
 *   - Wrapper (.tox-tinymce) + editor-container = beige (matcht toolbar)
 *   - Toolbar zone = beige
 *   - Edit-area + iframe = wit (typ-zone)
 * Container moet beige zijn, anders zie je hem als witte strip boven
 * de toolbar (container heeft ~1px hoogte boven de header).
 * Dark themes overrulen dit via hun eigen theme-file. */
.tox-tinymce .tox-editor-container,
.tox-tinymce .tox-editor-header,
.tox-tinymce .tox-toolbar,
.tox-tinymce .tox-toolbar__primary,
.tox-tinymce .tox-toolbar__overflow {
    background: var(--surface-alt) !important;
    border-color: var(--surface-alt) !important;
}
.tox-tinymce .tox-edit-area,
.tox-tinymce .tox-edit-area__iframe,
.tox-tinymce .tox-statusbar {
    background: var(--surface) !important;
    border-color: var(--surface) !important;
}

/* Geen interne separator — toolbar en content gaan vloeiend in elkaar over.
 * Light oxide skin tekent default lichtgrijze 1px borders + SVG-line + box-shadow
 * tussen toolbar en content; op dark themes zien die er WIT uit. Nuke ze allemaal.
 * Selectors gebruiken extra `.tox-tinymce` klasse om hogere specificity te krijgen
 * dan TinyMCE's eigen skin.min.css die dynamisch NA onze style.css geladen wordt. */
.tox-tinymce .tox-edit-area { border-top: 0 !important; }
.tox-tinymce .tox-toolbar__primary {
    background-image: none !important;
    border-top: 0 !important;
    margin-top: 0 !important;
}
.tox-tinymce .tox-editor-header,
.tox-tinymce.tox-tinymce--toolbar-sticky-on .tox-editor-header {
    box-shadow: none !important;
    border: 0 !important;
    background: transparent !important;
}
.tox-tinymce .tox-anchorbar {
    background: transparent !important;
    border: 0 !important;
    height: 0 !important;
    min-height: 0 !important;
}
.tox-tinymce .tox-edit-area__iframe,
.tox-tinymce .tox-sidebar-wrap {
    border: 0 !important;
    box-shadow: none !important;
}
.tox-tinymce .tox-toolbar,
.tox-tinymce .tox-toolbar__overflow {
    border-top: 0 !important;
    border-bottom: 0 !important;
    box-shadow: none !important;
    background-image: none !important;
}


/* =============================================================
   Dark-mode finishing touches (charcoal / coffee)
   ------------------------------------------------------------
   Drie elementen die in dark mode niet goed leesbaar/zichtbaar
   waren omdat ze native browser-styling of een vaste image-kleur
   gebruiken. Per element scoped op data-theme zodat light intact
   blijft.
   ============================================================= */

/* 1. .btn--ghost — border was --border-strong wat in dark mode te
 *    subtiel was. Maak 'm zichtbaarder + lichte hover. */
body[data-theme="charcoal"] .btn--ghost,
body[data-theme="coffee"]   .btn--ghost {
    background: var(--surface-alt);
    border-color: var(--border-strong);
    color: var(--ink);
}
body[data-theme="charcoal"] .btn--ghost:hover,
body[data-theme="coffee"]   .btn--ghost:hover {
    background: var(--surface);
    border-color: var(--primary);
    color: var(--ink);
}

/* 2. Native number-input spinner — default OS-styling is wit op
 *    donkere bg. Forceer wat tint zodat de pijltjes zichtbaar zijn.
 *    Werkt in Chrome/Edge/Safari (webkit) en Firefox (moz). */
body[data-theme="charcoal"] input[type="number"].form-control,
body[data-theme="coffee"]   input[type="number"].form-control {
    color-scheme: dark;
    accent-color: var(--primary);
}
body[data-theme="charcoal"] input[type="number"].form-control::-webkit-inner-spin-button,
body[data-theme="coffee"]   input[type="number"].form-control::-webkit-inner-spin-button,
body[data-theme="charcoal"] input[type="number"].form-control::-webkit-outer-spin-button,
body[data-theme="coffee"]   input[type="number"].form-control::-webkit-outer-spin-button {
    filter: invert(.85);
    opacity: 1;
}
/* Idem voor time-input clock-icoon */
body[data-theme="charcoal"] input[type="time"].form-control,
body[data-theme="coffee"]   input[type="time"].form-control,
body[data-theme="charcoal"] input[type="date"].form-control,
body[data-theme="coffee"]   input[type="date"].form-control {
    color-scheme: dark;
}

/* 3. NXT GEN logo in sidebar-footer — de "by" tekst in het PNG
 *    (embedded in SVG-wrapper) is zwart. Invert + hue-rotate trick:
 *    zwart→wit, terwijl oranje/groene letters ongeveer behouden
 *    blijven. */
body[data-theme="charcoal"] .sidebar__footer-img,
body[data-theme="coffee"]   .sidebar__footer-img {
    filter: invert(1) hue-rotate(180deg);
}

/* 4. Brand logo (HARDWARE+CLINICS) in sidebar — "HARDWARE+" deel
 *    is dark-grey in de SVG, "CLINICS" is brand-oranje. Zelfde
 *    invert+hue-rotate trick: grijs wordt wit, oranje blijft oranje. */
body[data-theme="charcoal"] .sidebar__brand img,
body[data-theme="coffee"]   .sidebar__brand img,
body[data-theme="charcoal"] .sidebar__brand svg,
body[data-theme="coffee"]   .sidebar__brand svg {
    filter: invert(1) hue-rotate(180deg);
}
