/* ============================================
   inlyn - Mobile First CSS
   ============================================ */

/* --- Reset --- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* --- CSS Variables --- */
:root {
    /* Brand (overschrijfbaar via config) */
    --brand: #fd3d3a;
    --brand-rgb: 253, 61, 58;

    /* Light mode */
    --bg: #f0f4f8;
    --card: #fff;
    --card2: #f8fafc;
    --border: rgba(0, 0, 0, .08);
    --border2: rgba(0, 0, 0, .15);
    --text: #1a202c;
    --muted: #64748b;
    --subtle: rgba(0, 0, 0, .03);

    /* Semantic */
    --green: #22c55e;
    --blue: #4f7fff;
    --amber: #f59e0b;
    --red: #ef4444;
    --red-rgb: 239, 68, 68;
    /* Voor een schaal die verder loopt dan goed/let op/fout: oranje zit tussen amber en rood in,
       paars staat voor "niet meer van jou" (uit handen bij een incassobureau). */
    --orange: #f97316;
    --purple: #8b5cf6;

    /* Meldingsvlakken: een gekleurd vlak hoort zijn eigen tekstkleur mee te
       brengen. Zonder dat erft de tekst --text, en dan staat er in donkere modus
       lichte tekst op een lichte achtergrond. Dat is precies wat er misging op
       Materiaalstand en de Beschikbaarheid-check. */
    --goed-bg: #dcfce7;
    --goed-tekst: #15803d;
    --letop-bg: #fef3c7;
    --letop-tekst: #92400e;
    --fout-bg: #fee2e2;
    --fout-tekst: #991b1b;

    /* Layout */
    --nav-w: 220px;
    --radius: 10px;
    --radius-sm: 7px;
    --radius-xs: 5px;
}

[data-theme="dark"] {
    --bg: #0d1117;
    --card: #161b22;
    --card2: #1c2333;
    --border: rgba(255, 255, 255, .08);
    --border2: rgba(255, 255, 255, .14);
    --text: #e6edf3;
    --muted: #8b949e;
    --subtle: rgba(255, 255, 255, .04);

    --goed-bg: rgba(34, 197, 94, .16);
    --goed-tekst: #6ee7a7;
    --letop-bg: rgba(245, 158, 11, .16);
    --letop-tekst: #fbbf24;
    --fout-bg: rgba(239, 68, 68, .16);
    --fout-tekst: #fca5a5;
}

/* Vlakken en badges met een betekenis. Altijd achtergrond én tekstkleur samen. */
.vlak-goed  { background: var(--goed-bg);  color: var(--goed-tekst); }
.vlak-letop { background: var(--letop-bg); color: var(--letop-tekst); }
.vlak-fout  { background: var(--fout-bg);  color: var(--fout-tekst); }

/* Een rustig vlak binnen een kaart: uitgeklapte regels, code-uitvoer, een
   voorbeeldtekst. --subtle is doorschijnend en volgt daarom het thema. */
.vlak-rustig {
    background: var(--subtle);
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
}
/* Logo light/dark switching */
.nav-logo-dark { display: none; }
[data-theme="dark"] .nav-logo-light { display: none; }
[data-theme="dark"] .nav-logo-dark { display: block; }

/* --- Base --- */
html { font-size: 13px; -webkit-text-size-adjust: 100%; }
body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    background: var(--bg);
    color: var(--text);
    line-height: 1.5;
    min-height: 100vh;
    min-height: 100dvh;
}
a { color: var(--brand); text-decoration: none; }
a:hover { opacity: .85; }
img { max-width: 100%; height: auto; }

/* --- Typography --- */
h1 { font-size: 18px; font-weight: 700; }
h2 { font-size: 15px; font-weight: 700; }
h3 { font-size: 13px; font-weight: 600; }
.muted { color: var(--muted); }
.label {
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--muted);
}

/* --- App Shell --- */
.app {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    min-height: 100dvh;
}

/* --- Sidebar Nav (mobile: overlay) --- */
.nav {
    position: fixed;
    top: 48px;
    left: 0;
    bottom: 0;
    width: var(--nav-w);
    background: var(--card);
    border-right: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    z-index: 50;
    transform: translateX(-100%);
    transition: transform .2s ease;
}
.nav.open { transform: translateX(0); }

.nav-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, .5);
    z-index: 49;
}
.nav-overlay.open { display: block; }

.nav-top {
    padding: 14px 14px 10px;
}
.nav-logo {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}
.nav-logo img:not(.nav-logo-circle) {
    height: 28px;
    width: auto;
}
.nav-logo-circle {
    width: 28px;
    height: 28px;
    border-radius: var(--radius-xs);
    object-fit: contain;
    flex-shrink: 0;
    border: 2px solid var(--border);
    padding: 3px;
    background: var(--card);
}
.nav-logo-text {
    font-family: 'Rubik', sans-serif;
    font-size: 20px;
    font-weight: 900;
    letter-spacing: -.06em;
    color: var(--text);
}
.nav-logo-dot {
    color: var(--brand);
}
.nav-logo-text-plain {
    font-size: 16px;
    font-weight: 700;
    color: var(--text);
}

.nav-menu {
    flex: 1;
    overflow-y: auto;
    padding: 8px;
}
.nav-group-label {
    font-size: 9px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--muted);
    padding: 12px 10px 4px;
    opacity: .6;
}
.nav-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 8px;
    border-radius: var(--radius-sm);
    color: var(--text);
    font-size: 13px;
    font-weight: 400;
    transition: background .15s;
    cursor: pointer;
}
.nav-item:hover { background: var(--subtle); }
.nav-item.active {
    background: rgba(var(--brand-rgb), .1);
    color: var(--brand);
    font-weight: 600;
}
.nav-item svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

.nav-bottom {
    padding: 6px 8px;
    border-top: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.nav-powered {
    font-size: 9px;
    color: var(--muted);
    opacity: .6;
}
.nav-bottom-user {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border-radius: var(--radius-sm);
    color: var(--text);
    text-decoration: none;
    transition: background .15s;
    cursor: pointer;
}
.nav-bottom-user:hover { background: var(--subtle); opacity: 1; }
.nav-bottom-user.active { background: rgba(var(--brand-rgb), .1); }
.nav-bottom-user svg { flex-shrink: 0; color: var(--muted); }

/* Entity switcher */
.nav-entity-switcher {
    padding: 0px;
    position: relative;
}
.nav-entity-current {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 8px;
    border-radius: var(--radius-xs);
    cursor: pointer;
    font-size: 16px;
    font-weight: 700;
    color: var(--text);
    transition: background .15s;
}
.nav-entity-current:hover { background: var(--subtle); }
.nav-entity-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}
.nav-entity-dropdown {
    position: absolute;
    left: 8px;
    right: 8px;
    top: 100%;
    background: var(--card);
    border: 1px solid var(--border2);
    border-radius: var(--radius-sm);
    box-shadow: 0 8px 24px rgba(0,0,0,.15);
    z-index: 60;
    overflow: hidden;
}
.nav-entity-option {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    font-size: 12px;
    color: var(--text);
    text-decoration: none;
    transition: background .1s;
}
.nav-entity-option:hover { background: var(--subtle); opacity: 1; }
.nav-entity-option.active { background: rgba(var(--brand-rgb), .08); }

/* Bottom actions row */
.nav-bottom-actions {
    display: none;
    gap: 4px;
    margin-bottom: 4px;
}
.nav-collapse-btn {
    flex: 1;
    padding: 6px;
    background: none;
    border: none;
    color: var(--muted);
    cursor: pointer;
    border-radius: var(--radius-xs);
    transition: background .15s;
    text-decoration: none;
    text-align: center;
}
.nav-collapse-btn:hover { background: var(--subtle); color: var(--text); opacity: 1; }
.nav-collapse-btn svg { display: block; margin: 0 auto; transition: transform .2s; }
.nav-user {
    flex: 1;
    overflow: hidden;
}
.nav-user-name {
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.nav-user-role {
    font-size: 10px;
    color: var(--muted);
}

/* --- Topbar (mobile) --- */
.topbar {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    background: var(--card);
    border-bottom: 1px solid var(--border);
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 99;
}
.topbar-menu-btn {
    background: none;
    border: none;
    color: var(--text);
    padding: 4px;
    cursor: pointer;
}
.topbar-menu-btn svg { width: 20px; height: 20px; }
.topbar-title {
    flex: 1;
    font-size: 15px;
    font-weight: 700;
}
.topbar-actions {
    display: flex;
    align-items: center;
    gap: 4px;
}

/* Topbar user/avatar */
.topbar-user {
    display: flex;
    align-items: center;
    text-decoration: none;
    margin-left: 2px;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
}
.topbar-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--border);
    transition: border-color .15s;
}
.topbar-user:hover .topbar-avatar { border-color: var(--brand); }
.topbar-avatar-initials {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--card2);
    color: var(--muted);
    font-size: 13px;
    font-weight: 700;
}

/* Topbar user dropdown */
.topbar-user-wrap { position: relative; }
.topbar-user-dropdown {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    width: 200px;
    background: var(--card);
    border: 1px solid var(--border2);
    border-radius: var(--radius-sm);
    box-shadow: 0 8px 24px rgba(0,0,0,.15);
    z-index: 60;
    overflow: hidden;
}
.topbar-user-info {
    padding: 10px 12px;
    border-bottom: 1px solid var(--border);
}
.topbar-user-name { font-size: 13px; font-weight: 600; }
.topbar-user-email { font-size: 11px; color: var(--muted); }
.topbar-user-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 9px 12px;
    font-size: 12px;
    color: var(--text);
    text-decoration: none;
    transition: background .1s;
    background: none;
    border: none;
    width: 100%;
    text-align: left;
    cursor: pointer;
    font-family: inherit;
}
.topbar-user-item:hover { background: var(--subtle); opacity: 1; }
.topbar-user-logout { color: var(--red); }

/* Hover dropdown - bridge tussen avatar en dropdown */
.topbar-user-wrap::before {
    content: '';
    position: absolute;
    top: 100%;
    right: 0;
    width: 220px;
    height: 12px;
    display: none;
}
.topbar-user-wrap:hover::before { display: block; }
.topbar-user-wrap:hover .topbar-user-dropdown,
.topbar-user-dropdown:hover {
    display: block !important;
}

/* --- Main content --- */
.main {
    flex: 1;
    padding: 68px 16px 16px;
    min-width: 0;
    max-width: 100%;
}

/* --- Cards --- */
.card {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
}
.card-header {
    padding: 14px 16px;
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.card-header h2 { margin: 0; }
.card-body { padding: 16px; }
.card-footer {
    padding: 12px 16px;
    border-top: 1px solid var(--border);
    display: flex;
    gap: 8px;
    justify-content: flex-end;
}

/* --- Een kaart die je open- en dichtklapt --- */
/* .card-header zet justify-content:space-between, en dat duwt de titel en de toelichting naar
   de twee randen. Alleen display:flex zetten helpt dus niet; het gaat om die uitlijning zelf.
   Geen driehoekje of ander teken ervoor: de kop is klikbaar en dat is genoeg. */
details.card { overflow: hidden; }
details.card > summary {
    list-style: none;
    cursor: pointer;
    display: flex;
    align-items: baseline;
    gap: 10px;
    justify-content: flex-start;
}
details.card > summary::-webkit-details-marker { display: none; }
details.card > summary::marker { content: ""; }
details.card > summary h2 { margin: 0; }
details.card > summary .row-sub { font-weight: 400; }
details.card > summary .btn,
details.card > summary form { margin-left: auto; align-self: center; }

/* Zonder card-body zit de tabel tegen de rand van de kaart. */
details.card > .table-wrap, details.card > table { margin: 0; }
details.card > *:not(summary):not(.card-body) { padding: 0; }
details.card > .card-body { padding-top: 10px; }

/* --- Insights --- */
.insights-grid { display: flex; flex-direction: column; gap: 8px; }
.insight-card {
    display: flex;
    gap: 12px;
    padding: 12px 16px;
    background: var(--card);
    border: 1px solid var(--border);
    border-left: 3px solid var(--brand);
    border-radius: var(--radius);
    transition: opacity .2s;
}
.insight-icon { width: 18px; height: 18px; color: var(--brand); flex-shrink: 0; margin-top: 2px; }
.insight-icon svg { width: 18px; height: 18px; }
.insight-body { flex: 1; min-width: 0; }
.insight-title { font-size: 13px; font-weight: 600; }
.insight-desc { font-size: 12px; color: var(--muted); margin-top: 2px; }
.insight-actions { display: flex; gap: 6px; margin-top: 8px; flex-wrap: wrap; }

/* --- KPI Cards --- */
.kpi-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
    margin-bottom: 16px;
}
.kpi-card {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 14px 16px;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    min-width: 0;
    overflow: hidden;
    transition: border-color .15s, transform .15s, box-shadow .15s;
}
.kpi-card:hover { border-color: var(--border2); }
a.kpi-card { text-decoration: none; color: inherit; }
a.kpi-card.kpi-clickable { cursor: pointer; }
a.kpi-card.kpi-clickable:hover { border-color: var(--brand); transform: translateY(-1px); box-shadow: 0 2px 8px rgba(0,0,0,.04); }
a.kpi-card.kpi-clickable:hover .kpi-icon { background: rgba(var(--brand-rgb), .1); }
a.kpi-card.kpi-clickable:hover .kpi-icon svg { color: var(--brand); }
.kpi-icon {
    width: 36px;
    height: 36px;
    border-radius: var(--radius-sm);
    background: var(--card2);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.kpi-icon svg { width: 16px; height: 16px; color: var(--muted); }
.kpi-value { font-size: 22px; font-weight: 700; line-height: 1.2; }
.kpi-label { font-size: 11px; color: var(--muted); }

/* --- Jaarkiezer ---
   Eén kaart met de jaren erin, zodat hij in dezelfde rij past als de kerngetallen ernaast.
   Als losse rij eronder zweefde hij, en als vier eigen kaarten nam hij de plek in van cijfers
   die belangrijker zijn. */
.jaarkiezer { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.jaarkiezer a {
    display: inline-flex;
    flex-direction: column;
    gap: 1px;
    padding: 5px 9px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    text-decoration: none;
    color: var(--text);
    font-size: 12px;
    line-height: 1.2;
    transition: border-color .15s, background .15s;
}
.jaarkiezer a:hover { border-color: var(--brand); }
.jaarkiezer a.aan { border-color: var(--brand); background: color-mix(in srgb, var(--brand) 10%, var(--card)); font-weight: 600; }
.jaarkiezer .jaarkiezer-sub { font-size: 10px; color: var(--muted); font-variant-numeric: tabular-nums; }

/* --- Buttons --- */
.btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 13px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border2);
    background: var(--card2);
    color: var(--text);
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    transition: all .15s;
    white-space: nowrap;
    font-family: inherit;
}
.btn:hover { border-color: var(--brand); color: var(--brand); }
.btn svg { width: 13px; height: 13px; }

.btn-primary {
    background: var(--brand);
    border-color: var(--brand);
    color: #fff;
}
.btn-primary:hover { opacity: .88; color: #fff; }

.btn-danger {
    background: rgba(239, 68, 68, .1);
    border-color: var(--red);
    color: var(--red);
}
.btn-danger:hover { background: var(--red); color: #fff; }

.btn-ghost {
    background: transparent;
    border-color: transparent;
}
.btn-ghost:hover { background: var(--subtle); border-color: var(--border); }

.btn.active {
    color: var(--brand);
    border-color: var(--brand);
    background: color-mix(in srgb, var(--brand) 10%, transparent);
}
.btn.active:hover { color: var(--brand); border-color: var(--brand); }

.btn-sm { padding: 4px 9px; font-size: 11px; }
.btn-icon {
    width: 32px;
    height: 32px;
    padding: 0;
    justify-content: center;
}

/* --- Forms --- */
.form-row { margin-bottom: 14px; }
/* Custom fields auto-grid: korte velden naast elkaar, lange velden over alle kolommen. */
.cf-fields-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 0 16px;
}
.cf-fields-grid .form-row { margin-bottom: 14px; }
.cf-fields-grid .cf-wide,
.cf-fields-grid .line-section { grid-column: 1 / -1; }
@media (max-width: 700px) {
    .cf-fields-grid { grid-template-columns: 1fr; }
}
.form-row-2,
.form-row-3,
.form-row-4 {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
    margin-bottom: 14px;
}
/* Auto-vullend veldraster: vormt kolommen zodra er ruimte is, stapelt op smal. */
.field-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 12px;
    margin-bottom: 14px;
}
/* Tegel-grid met klikbare cards (Settings, Help, etc.) */
.settings-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 12px;
}
.settings-card {
    display: flex;
    gap: 12px;
    padding: 16px;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    text-decoration: none;
    color: var(--text);
    transition: all .15s;
}
.settings-card:hover {
    border-color: var(--brand);
    background: var(--card2);
    transform: translateY(-1px);
}
.settings-card-icon {
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(var(--brand-rgb), .08);
    color: var(--brand);
    border-radius: var(--radius-xs);
}
.settings-card-body { min-width: 0; }
.settings-card .row-title { font-weight: 500; margin-bottom: 2px; }
.settings-card .row-sub { font-size: 12px; color: var(--muted); }
/* Een kopje binnen een formulier.
 *
 * Een formulier van vijftien velden onder elkaar is een lijst, geen vorm: je leest hem van
 * boven naar beneden om te zien of er nog iets komt. Met kopjes erin zie je in een oogopslag
 * waar je moet zijn - en zie je ook dat je klaar bent. Bewust een regel en geen kaart per
 * blok: kaders om kaders maken het formulier zwaarder dan het is. */
.form-sectie {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--muted);
    padding-bottom: 6px;
    margin: 22px 0 14px;
    border-bottom: 1px solid var(--border);
}
.form-sectie.is-eerste { margin-top: 0; }

.form-label {
    display: block;
    font-size: 10px;
    font-weight: 600;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: .05em;
    margin-bottom: 5px;
}
/* Een invoerveld groeit niet verder mee dan je kunt overzien.
   Zonder deze grens werd een naamveld op een breed scherm 1600 pixels breed: je typt links en
   de rand zit ergens rechts buiten je blikveld. 560 is ruim genoeg voor een e-mailadres of een
   bedrijfsnaam, en velden die in een raster staan blijven gewoon hun kolom volgen.
   Een eigen breedte in de opmaak van een scherm wint hier altijd van. */
.form-input {
    width: 100%;
    max-width: 560px;
    background: var(--card2);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 9px 11px;
    font-size: 16px;
    color: var(--text);
    font-family: inherit;
    transition: border-color .15s, box-shadow .15s;
}
.form-input:focus {
    outline: none;
    border-color: var(--brand);
    box-shadow: 0 0 0 3px rgba(var(--brand-rgb), .1);
}
.form-input::placeholder { color: var(--muted); }

/* Een tekstvak bevat hele zinnen, dus die mag breder - maar niet onbeperkt, want een regel van
   1800 pixels lees je niet terug. */
textarea.form-input { max-width: 820px; }

/* In een raster bepaalt de kolom de breedte; daar is de grens overbodig en soms in de weg. */
.form-row-2 .form-input,
.form-row-3 .form-input,
.form-row-4 .form-input,
.field-grid .form-input,
.cf-fields-grid .form-input,
.card-body > form .flex .form-input { max-width: 100%; }

/* Datum en tijd op iOS.
 *
 * Safari geeft die velden zijn eigen opmaak: een andere hoogte, een eigen binnenmarge en tekst
 * die niet links uitlijnt met de rest. Op een iPad staat zo'n veld dus net iets anders dan het
 * tekstveld ernaast, en dat zie je meteen. appearance uit, en dezelfde hoogte afdwingen als de
 * andere velden; min-height omdat een leeg datumveld anders inklapt. */
input[type="date"].form-input,
input[type="time"].form-input,
input[type="datetime-local"].form-input,
input[type="month"].form-input {
    appearance: none;
    -webkit-appearance: none;
    min-height: 40px;
    line-height: 20px;
    text-align: left;
}
/* Het klokje of kalendertje rechts, zodat het veld niet leeg oogt zonder waarde. */
input[type="date"].form-input::-webkit-date-and-time-value,
input[type="time"].form-input::-webkit-date-and-time-value,
input[type="datetime-local"].form-input::-webkit-date-and-time-value {
    text-align: left;
    margin: 0;
}
input[type="date"].form-input::-webkit-calendar-picker-indicator,
input[type="time"].form-input::-webkit-calendar-picker-indicator {
    opacity: .55;
    margin-left: auto;
}

select.form-input {
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    padding-right: 30px;
}

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

/* File input */
input[type="file"] {
    font-size: 12px;
    color: var(--muted);
    padding: 8px 0;
}
input[type="file"]::file-selector-button {
    background: var(--card2);
    border: 1px solid var(--border2);
    border-radius: var(--radius-xs);
    padding: 5px 12px;
    font-size: 11px;
    font-weight: 500;
    color: var(--text);
    cursor: pointer;
    font-family: inherit;
    margin-right: 8px;
    transition: all .15s;
}
input[type="file"]::file-selector-button:hover {
    border-color: var(--brand);
    color: var(--brand);
}

/* Toggle switch */
.toggle {
    /* inline-block, want een label is van zichzelf inline en dan doen breedte en hoogte niets.
       Dat viel niet op omdat hij overal in een flex- of grid-blok stond en daar alsnog een
       eigen doos kreeg; in een tabelcel klapte hij dicht en zag je helemaal niets. */
    display: inline-block;
    vertical-align: middle;
    position: relative;
    width: 38px;
    height: 21px;
    cursor: pointer;
}
.toggle input { display: none; }
.toggle-slider {
    position: absolute;
    inset: 0;
    background: var(--card2);
    border: 1px solid var(--border2);
    border-radius: 99px;
    transition: all .2s;
}
.toggle-slider::before {
    content: '';
    position: absolute;
    top: 3px;
    left: 3px;
    width: 13px;
    height: 13px;
    background: var(--muted);
    border-radius: 50%;
    transition: all .2s;
}
.toggle input:checked + .toggle-slider {
    background: var(--brand);
    border-color: var(--brand);
}
.toggle input:checked + .toggle-slider::before {
    background: #fff;
    transform: translateX(17px);
}

/* --- Tables --- */
.table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
table {
    width: 100%;
    border-collapse: collapse;
}
th {
    text-align: left;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--muted);
    padding: 10px 12px;
    border-bottom: 1px solid var(--border);
    white-space: nowrap;
}
td {
    padding: 10px 12px;
    border-bottom: 1px solid var(--border);
    font-size: 13px;
}
/* Een tabel met veel kolommen. Twaalf getallen naast elkaar passen niet op een laptop met de
   standaard binnenmarge, en dan schuift het scherm horizontaal: dat leest slecht en je mist
   precies de kolom rechts waar het om ging. Minder ruimte tussen de kolommen scheelt genoeg. */
.table.dicht th,
.table.dicht td { padding: 8px 7px; }
.table.dicht td { font-size: 12.5px; }
.table.dicht th:first-child,
.table.dicht td:first-child { padding-left: 12px; }
.table.dicht th:last-child,
.table.dicht td:last-child { padding-right: 12px; }

tr:last-child td { border-bottom: none; }
tr:hover td { background: var(--subtle); }

/* --- Table component (dryve-table) --- */
.dryve-table {
    overflow: hidden;
}
.dryve-table-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    margin-bottom: 12px;
}
.dryve-table-filters {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 6px;
    width: 100%;
}
.dryve-table-filters .form-input {
    width: 100%;
    min-width: 0;
    font-size: 12px;
    padding: 6px 8px;
}
.dryve-table-actions {
    display: flex;
    gap: 4px;
    flex-shrink: 0;
}
.dryve-table-count {
    font-size: 13px;
    color: var(--muted);
    padding: 6px 10px;
    background: var(--subtle);
    border-radius: var(--radius-sm);
    flex-shrink: 0;
    cursor: help;
}
.table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
@media (min-width: 768px) {
    .form-input { font-size: 13px; }
    .dryve-table-filters { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
}

/* --- Rows (settings style) --- */
.row {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 13px 16px;
    border-bottom: 1px solid var(--border);
}
.row:last-child { border-bottom: none; }
.row-icon {
    width: 32px;
    height: 32px;
    border-radius: var(--radius-sm);
    background: var(--card2);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.row-icon svg { width: 14px; height: 14px; color: var(--muted); }
.row-body { flex: 1; min-width: 0; }
.row-title { font-size: 13px; font-weight: 600; }
.row-sub { font-size: 11px; color: var(--muted); }
.row-actions { display: flex; gap: 6px; flex-shrink: 0; }

/* --- Notification bell --- */
.topbar-timer { display: flex; align-items: center; }
.topbar-timer-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    background: var(--card2);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--text);
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    transition: all .15s;
    font-family: inherit;
    font-variant-numeric: tabular-nums;
}
.topbar-timer-btn:hover { background: var(--subtle); }
.topbar-timer-btn.is-running { background: rgba(var(--brand-rgb), .15); border-color: var(--brand); color: var(--brand); }
.topbar-timer-btn svg { display: block; }

.notif-bell {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: 1.5px solid var(--border);
    background: var(--card);
    color: var(--text);
    transition: background .15s;
    text-decoration: none;
}
.notif-bell:hover { background: var(--subtle); opacity: 1; }
.notif-bell svg { display: block; }
.notif-bell.has-unread svg {
    animation: bellShake 0.5s ease-in-out;
    animation-iteration-count: 1;
}
.notif-bell.has-unread { animation: bellRemind 8s ease-in-out infinite; }
@keyframes bellShake {
    0%, 100% { transform: rotate(0); }
    15% { transform: rotate(14deg); }
    30% { transform: rotate(-12deg); }
    45% { transform: rotate(8deg); }
    60% { transform: rotate(-6deg); }
    75% { transform: rotate(2deg); }
}
@keyframes bellRemind {
    0%, 90%, 100% { transform: rotate(0); }
    92% { transform: rotate(10deg); }
    94% { transform: rotate(-8deg); }
    96% { transform: rotate(5deg); }
    98% { transform: rotate(-3deg); }
}
.notif-bell-badge {
    position: absolute;
    top: -4px;
    right: -4px;
    min-width: 14px;
    height: 14px;
    padding: 0 4px;
    border-radius: 20px;
    background: var(--brand);
    color: #fff;
    font-size: 9px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

/* --- Kanban board --- */
.kanban-board {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    padding-bottom: 16px;
    -webkit-overflow-scrolling: touch;
}
.kanban-col {
    min-width: 260px;
    flex: 1;
    display: flex;
    flex-direction: column;
}
/* Vlakken delen één ronding, labels zijn capsules.
 *
 * Dat is de regel waar dit op uitkomt. Het wringende zat niet in de pil maar in de maten
 * eromheen: de kop deed 8, de kaart 9, en het tokenstelsel houdt 10/7/5 aan. Drie maten die
 * niemand ooit gekozen heeft. Nu allebei var(--radius), en de pil mag capsule blijven - dat is
 * geen vlak maar een woord met een kleur eromheen.
 *
 * (Het vlak onder de kop is er even af geweest. Zonder dat vlak wordt het bord luchtiger, maar
 * de kop valt dan uit elkaar in losse onderdelen en dat weegt niet op tegen de winst.)
 */
.kanban-col-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 10px 12px;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    margin-bottom: 8px;
}

/* Links wat de kolom ís - de naam en, waar dat speelt, het bedrag dat erin omgaat. Rechts wat
 * je ermee doet: het aantal en de knop. Het bedrag staat naast de naam en niet eronder, want
 * een kop van twee regels laat de kaarten eronder verspringen zodra één kolom een bedrag heeft
 * en de andere niet. */
.kanban-col-regel {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}
.kanban-col-regel .row-sub { white-space: nowrap; }
.kanban-col-title {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--muted);
}
/* Is de kop zelf een pil, dan doet de kleur het werk en hoeven de kapitalen niet meer. Zonder
   dit staat er een geschreeuwde regel in een gekleurd bolletje, en dat leest slechter dan de
   grijze variant die er stond. De klasse blijft staan voor het inklappen: app.js zoekt de
   kolomnaam op .kanban-col-title.

   En hij is groter dan een gewone badge. Dezelfde vorm betekent niet dezelfde maat: op een
   kaart is een badge een bijschrift bij iets anders, hier is hij de titel van de hele kolom.
   Op 10px las de kop als het kleinste op het scherm terwijl hij het eerste hoort te zijn. */
.kanban-col-title.badge {
    text-transform: none;
    letter-spacing: 0;
    padding: 4px 12px;
    font-size: 12px;
    line-height: 1.35;
}
.kanban-col-body {
    min-height: 100px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 1;
}
.kanban-col-body.drag-over {
    background: rgba(var(--brand-rgb), .05);
    border-radius: 8px;
}
.kanban-card {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 12px;
    cursor: grab;
    transition: all .15s;
}
.kanban-card:hover {
    border-color: var(--border2);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, .08);
}
.kanban-card.dragging { opacity: .5; }
.kanban-card-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--text);
    text-decoration: none;
    display: block;
    margin-bottom: 4px;
}
.kanban-card-title:hover { color: var(--brand); opacity: 1; }
.kanban-card-meta {
    font-size: 11px;
    color: var(--muted);
}

/* Een kolom die je erbij wilt houden maar niet elke dag hoeft te lezen - afgewezen, geparkeerd -
   klapt in tot een strook met de naam en het aantal erop. Hij staat er nog, hij vraagt alleen je
   blik niet meer. De klik zit op de hele kop, de chevron zegt welke kant het op gaat. */
.kanban-col-head { cursor: pointer; }
.kanban-col-rechts { display: flex; align-items: center; gap: 6px; }
.kanban-col-klap { display: inline-flex; color: var(--muted); opacity: .4; transition: opacity .15s; }
.kanban-col-head:hover .kanban-col-klap { opacity: 1; }

.kanban-col.is-ingeklapt { min-width: 44px; flex: 0 0 44px; }
.kanban-col.is-ingeklapt .kanban-col-head {
    flex: 1;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    gap: 10px;
    padding: 10px 4px;
    margin-bottom: 0;
}
/* Ingeklapt staat alles onder elkaar in een strook van 44 pixels: eerst de naam, gedraaid,
   daaronder het aantal en de knop. Blijft de rij horizontaal, dan schuift het aantal de strook
   uit en zweeft het los naast het bord. */
.kanban-col.is-ingeklapt .kanban-col-rechts { flex-direction: column; }
.kanban-col.is-ingeklapt .kanban-col-regel { flex-direction: column; }
.kanban-col.is-ingeklapt .kanban-col-naam {
    writing-mode: vertical-rl;
    white-space: nowrap;
    max-height: 260px;
    overflow: hidden;
}
/* Gedraaid wisselen de assen van betekenis: de 12 pixels die staand links en rechts van de
   tekst stonden zijn liggend de dikte van de strook, en dan wordt een pil van 44 breed een
   worst. Ruim langs de leesrichting, smal dwars erop. */
.kanban-col.is-ingeklapt .kanban-col-title.badge {
    padding: 10px 4px;
    font-size: 11px;
}
/* Bedragen onder de kolomnaam zijn in een strook van 44 pixels toch niet te lezen. */
.kanban-col.is-ingeklapt .kanban-col-body,
.kanban-col.is-ingeklapt .kanban-col-head .row-sub { display: none; }

/* --- Search modal (mobile-friendly) --- */
.search-modal {
    max-width: 560px;
    margin-top: 60px;
    align-self: flex-start;
    overflow: hidden;
}
.search-input-wrap {
    position: relative;
    display: flex;
    align-items: center;
    padding: 0 14px;
    border-bottom: 1px solid var(--border);
}
.search-input-icon { color: var(--muted); flex-shrink: 0; }
.search-input {
    flex: 1;
    border: none;
    outline: none;
    background: transparent;
    padding: 16px 12px;
    font-size: 16px; /* >=16px voorkomt iOS-zoom op focus */
    color: var(--text);
    font-family: inherit;
    min-width: 0;
}
.search-input::-webkit-search-cancel-button { display: none; }
.search-input-close {
    background: none;
    border: none;
    padding: 8px;
    color: var(--muted);
    cursor: pointer;
    display: flex;
    align-items: center;
    border-radius: 6px;
}
.search-input-close:hover { background: var(--card2, #f4f4f5); color: var(--text); }
.search-results {
    max-height: 60vh;
    overflow-y: auto;
    padding: 8px;
    -webkit-overflow-scrolling: touch;
}

/* Topbar zoek-knop (alleen op mobile zichtbaar) */
.topbar-search-btn {
    /* Ook op desktop zichtbaar. Cmd+K en de spatiebalk werken al, maar een sneltoets die je
       nergens ziet bestaat voor de meeste mensen niet. De knop laat de sneltoets zien in plaats
       van hem te vervangen. */
    display: inline-flex;
    background: var(--card);
    border: 1.5px solid var(--border);
    border-radius: 50%;
    width: 30px;
    height: 30px;
    align-items: center;
    justify-content: center;
    color: var(--text);
    cursor: pointer;
    margin-right: 4px;
    flex-shrink: 0;
}
@media (max-width: 900px) {
    .search-modal {
        margin-top: 0;
        max-width: 100%;
        max-height: 100%;
        height: 100dvh;
        border-radius: 0;
        align-self: stretch;
    }
    .search-modal .modal-body { height: 100%; display: flex; flex-direction: column; }
    .search-results { flex: 1; max-height: none; }
}

/* --- Modal --- */
.overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, .6);
    backdrop-filter: blur(4px);
    z-index: 100;
    align-items: center;
    justify-content: center;
    padding: 16px;
}
.overlay.open { display: flex; }

.modal {
    background: var(--card);
    border: 1px solid var(--border2);
    border-radius: 14px;
    width: 100%;
    max-width: 500px;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 20px 60px rgba(0, 0, 0, .5);
}
.modal-head {
    padding: 18px 20px 14px;
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.modal-title { font-size: 15px; font-weight: 700; }
.modal-close {
    background: none;
    border: none;
    color: var(--muted);
    font-size: 18px;
    cursor: pointer;
    border-radius: var(--radius-xs);
    padding: 2px 6px;
}
.modal-close:hover { color: var(--text); }
.modal-body { padding: 20px; }
.modal-footer {
    padding: 14px 20px;
    border-top: 1px solid var(--border);
    display: flex;
    gap: 8px;
    justify-content: flex-end;
}

/* --- Toast (micro, bottom center) --- */
.toast {
    position: fixed;
    bottom: 20px;
    left: 50%;
    transform: translate(-50%, 12px);
    background: var(--card);
    border: 1px solid var(--border);
    padding: 8px 16px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    box-shadow: 0 8px 32px rgba(0, 0, 0, .15);
    z-index: 10000;
    display: flex;
    align-items: center;
    gap: 6px;
    opacity: 0;
    pointer-events: none;
    transition: all .2s ease;
}
.toast.show {
    opacity: 1;
    transform: translate(-50%, 0);
    pointer-events: auto;
}
.toast.success { border-left: 3px solid var(--green); }
.toast.error { border-left: 3px solid var(--red); }
.toast.info { border-left: 3px solid var(--blue); }
.toast.warning { border-left: 3px solid var(--amber); }

/* --- Notification toast (right side, richer) --- */
.notif-toast {
    position: fixed;
    bottom: 24px;
    right: 16px;
    left: 16px;
    background: var(--card);
    border: 1px solid var(--border2);
    border-left: 3px solid var(--brand);
    border-radius: var(--radius);
    padding: 12px 14px 10px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, .18);
    z-index: 9999;
    animation: toastIn .25s ease;
}
@keyframes toastIn {
    from { opacity: 0; transform: translateY(12px); }
    to { opacity: 1; transform: translateY(0); }
}
.notif-toast-title { font-size: 12px; font-weight: 600; margin-bottom: 4px; }
.notif-toast-body { font-size: 11px; color: var(--muted); line-height: 1.5; }
.notif-toast-close {
    position: absolute;
    top: 10px;
    right: 10px;
    background: none;
    border: none;
    color: var(--muted);
    cursor: pointer;
    font-size: 14px;
}

/* --- Badges --- */
.badge {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: 20px;
    font-size: 10px;
    font-weight: 600;
}
.badge-green { background: rgba(34, 197, 94, .12); color: var(--green); }
.badge-red { background: rgba(239, 68, 68, .12); color: var(--red); }
.badge-blue { background: rgba(79, 127, 255, .12); color: var(--blue); }
.badge-amber { background: rgba(245, 158, 11, .12); color: var(--amber); }
.badge-orange { background: rgba(249, 115, 22, .12); color: var(--orange); }
.badge-purple { background: rgba(139, 92, 246, .14); color: var(--purple); }
.badge-muted { background: var(--subtle); color: var(--muted); }
/* Er stond op een paar plekken badge-grey terwijl die klasse niet bestaat: dan valt de kleur
   gewoon weg en zie je een label zonder achtergrond, zonder dat iets erop wijst dat er iets mis
   is. Vandaar deze regel, en niet een zoek-en-vervang door alle schermen heen. */
.badge-grey { background: var(--subtle); color: var(--muted); }
/* Een badge in een regel tekst (de subregel op een kaartje, een lijstregel) zakt anders naar de
   onderkant, omdat hij inline-flex is. */
.row-sub .badge { vertical-align: middle; }

/* --- Timeline (chatter) --- */
.timeline { position: relative; padding-left: 12px; }
.timeline::before {
    content: '';
    position: absolute;
    left: 23px;
    top: 8px;
    bottom: 8px;
    width: 1px;
    background: var(--border);
}
.timeline-item {
    display: flex;
    gap: 12px;
    position: relative;
    padding: 8px 0;
}
.timeline-icon {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    z-index: 1;
    background: var(--card2)!important;
}
.timeline-icon svg { width: 12px; height: 12px; }
.timeline-body { flex: 1; padding-bottom: 8px; }
.timeline-title {
    font-size: 12px;
    font-weight: 600;
    color: var(--text);
    margin-bottom: 2px;
}
.timeline-title a { color: inherit; text-decoration: none; }
.timeline-title a:hover { color: var(--brand); opacity: 1; }
.timeline-content {
    font-size: 12px;
    color: var(--muted);
    margin-bottom: 4px;
    line-height: 1.5;
}
.timeline-meta {
    font-size: 10px;
    color: var(--muted);
}

/* --- Tag pill (selector) --- */
.tag-pill {
    cursor: pointer;
    border: 1px solid transparent;
    border-radius: 20px;
    padding: 0;
    transition: all .15s;
    user-select: none;
}
.tag-pill span {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 600;
    opacity: .4;
    transition: opacity .15s;
}
.tag-pill:has(input:checked) span { opacity: 1; }

/* --- Empty state --- */
.empty-state {
    text-align: center;
    padding: 40px 20px;
    color: var(--muted);
}
.empty-state svg { width: 40px; height: 40px; margin-bottom: 12px; opacity: .4; }
.empty-state p { font-size: 13px; }

/* --- Cookie consent --- */
.cookie-consent {
    position: fixed;
    bottom: 16px;
    left: 16px;
    right: 16px;
    max-width: 600px;
    margin: 0 auto;
    background: var(--card);
    border: 1px solid var(--border2);
    border-radius: var(--radius);
    padding: 14px 18px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, .2);
    display: flex;
    align-items: center;
    gap: 16px;
    z-index: 9999;
    font-size: 12px;
    color: var(--text);
}
.cookie-consent-text { flex: 1; }
.cookie-consent-text a { color: var(--brand); font-weight: 600; }

/* --- Powered by inlyn --- */
.powered-by, .powered-by-fixed {
    font-size: 10px;
    color: var(--muted);
    display: flex;
    align-items: center;
    gap: 4px;
}
.powered-by { text-align: center; padding: 16px; justify-content: center; }
.powered-by-fixed {
    padding: 16px;
    justify-content: center;
}
.powered-by a, .powered-by-fixed a { color: inherit; text-decoration: none; }
.inlyn-wordmark {
    font-family: 'Rubik', sans-serif;
    font-weight: 900;
    font-size: 13px;
    letter-spacing: -.06em;
    color: var(--text);
}
.inlyn-dot { color: #fd3d3a; }

/* --- Pagination --- */
.pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 16px 0;
}
.pagination-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 32px;
    height: 32px;
    padding: 0 8px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
    background: var(--card);
    color: var(--text);
    font-size: 12px;
    font-weight: 500;
    text-decoration: none;
    transition: all .15s;
}
.pagination-btn:hover { border-color: var(--brand); color: var(--brand); opacity: 1; }
.pagination-btn.active {
    background: var(--brand);
    border-color: var(--brand);
    color: #fff;
}
.pagination-dots {
    font-size: 12px;
    color: var(--muted);
    padding: 0 4px;
}

/* --- Search results --- */
.search-result {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    color: var(--text);
    text-decoration: none;
    border-radius: var(--radius-sm);
    transition: background .1s;
    margin: 2px 4px;
}
.search-result:hover { background: var(--subtle); opacity: 1; }
.search-result-label { font-size: 13px; font-weight: 500; }
.search-result-sub { font-size: 11px; color: var(--muted); flex: 1; }
.search-result-type {
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    color: var(--muted);
    background: var(--card2);
    padding: 2px 6px;
    border-radius: 4px;
    margin-left: auto;
}
.search-group-head {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--muted);
    padding: 10px 12px 4px;
    letter-spacing: .04em;
}

/* De detailkeuze op het kanbanbord gebruikt nu .zoom - zie core/Kop.php. De eigen stijl die
   hier stond deed hetzelfde met andere maten en dat viel op zodra de twee naast elkaar
   kwamen te staan. */

/* Mode-specific hiding regels (cards moeten data-kanban-modeable parent hebben) */
.kanban-mode-compact .kanban-meta-extra,
.kanban-mode-compact .kanban-card-meta,
.kanban-mode-compact .kanban-card-badges { display: none !important; }

.kanban-mode-normal .kanban-meta-extra { display: none !important; }

/* Uitgebreid = alles zichtbaar, geen hide-regels nodig */
@media (max-width: 900px) {
    .search-result { padding: 14px 16px; min-height: 44px; }
    .search-result-label { font-size: 15px; }
    .search-result-sub { font-size: 13px; }
}

/* --- Utility --- */
.flex { display: flex; }
.flex-between { display: flex; justify-content: space-between; align-items: center; }
.flex-center { display: flex; align-items: center; justify-content: center; }
.gap-4 { gap: 4px; }
.gap-8 { gap: 8px; }
.gap-12 { gap: 12px; }
.gap-16 { gap: 16px; }
.mt-8 { margin-top: 8px; }
.mt-16 { margin-top: 16px; }
.mb-8 { margin-bottom: 8px; }
.mb-16 { margin-bottom: 16px; }

/* Deze ontbraken, terwijl mt-4 in tweeënveertig views wordt gebruikt en mb-12 in twaalf. Die
   ruimte deed dus nergens iets: het stond er wel, het gebeurde niet. Vandaar de hele reeks in
   één keer, op dezelfde schaal als de rest. */
.mt-4  { margin-top: 4px; }
.mt-12 { margin-top: 12px; }
.mt-24 { margin-top: 24px; }
.mb-4  { margin-bottom: 4px; }
.mb-12 { margin-bottom: 12px; }
.mb-24 { margin-bottom: 24px; }

/* Een kop boven een blok, met lucht erboven zodat hij niet aan de vorige kaart plakt. */
.sectie-kop { font-size: 13px; font-weight: 600; margin: 28px 0 4px; }
.sectie-kop:first-child { margin-top: 0; }
.p-16 { padding: 16px; }
.hidden { display: none !important; }
.text-right { text-align: right; }
.text-center { text-align: center; }
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.w-full { width: 100%; }

/* ============================================
   Tablet (>= 640px) — large phones landscape, kleine tablets
   ============================================ */
@media (min-width: 640px) {
    .kpi-grid { grid-template-columns: repeat(2, 1fr); }
    .form-row-2 { grid-template-columns: 1fr 1fr; }
    /* Op een tablet zijn drie of vier smalle keuzelijsten naast elkaar onleesbaar; die gaan
       eerst in tweeen en pas op een breed scherm helemaal naast elkaar. */
    .form-row-3, .form-row-4 { grid-template-columns: 1fr 1fr; }
}

@media (min-width: 1000px) {
    .form-row-3 { grid-template-columns: repeat(3, 1fr); }
    .form-row-4 { grid-template-columns: repeat(4, 1fr); }
}

/* ============================================
   Desktop (>= 768px) — tablets portrait/landscape, sidebar zichtbaar
   ============================================ */
@media (min-width: 768px) {

    /* Nav altijd zichtbaar */
    .nav {
        transform: translateX(0);
        position: fixed;
        top: 0;
    }
    .nav-overlay { display: none !important; }
    .topbar-menu-btn { display: none; }

    /* Content naast nav */
    .main {
        margin-left: var(--nav-w);
        padding: 74px 24px 24px;
        /* Geen grens van 1400 meer. Die was er voor leesbaarheid, maar hij stond op de verkeerde
           plek: hij kapte de hele pagina terwijl alleen een tekstregel en een invoerveld te breed
           kunnen worden. Een tabel van acht kolommen zat geperst in 1352 pixels terwijl er 1100
           wit bleven, en onder de rechterkant van de bovenbalk stond niets.

           De grens staat nu op het veld en op het tekstblok, waar hij hoort. */
        max-width: calc(100vw - var(--nav-w));
    }
    .topbar {
        left: var(--nav-w);
        padding: 12px 24px;
    }

    /* Bottom actions zichtbaar op desktop */
    .nav-bottom-actions { display: flex; }

    /* Grid uitbreidingen */
    .kpi-grid { grid-template-columns: repeat(2, 1fr); }
    .form-row-2 { grid-template-columns: 1fr 1fr; }

    /* === Sidebar transitions === */
    .nav { transition: width .2s ease; }
    .main { transition: margin-left .2s ease; }
    .topbar { transition: left .2s ease; }
    .nav-logo-text-plain { transition: opacity .15s ease, width .15s ease; overflow: hidden; white-space: nowrap; }
    .nav-label { transition: opacity .15s ease, width .15s ease; overflow: hidden; white-space: nowrap; }
    .nav-user { transition: opacity .15s ease, width .15s ease; overflow: hidden; }

    /* === Compact sidebar === */
    html.nav-compact .nav { width: 56px; }
    html.nav-compact .nav-logo-text-plain { opacity: 0; width: 0; }
    html.nav-compact .nav-label { opacity: 0; width: 0; }
    html.nav-compact .nav-user { opacity: 0; width: 0; }
    html.nav-compact .nav-bottom-user { gap: 0; padding: 10px; justify-content: center; }
    html.nav-compact .nav-bottom-user svg { width: 18px; height: 18px; flex-shrink: 0; }
    html.nav-compact .nav-entity-current { justify-content: center; padding: 8px; }
    html.nav-compact .nav-entity-dropdown { left: 56px; right: auto; top: 0; width: 200px; }
    html.nav-compact .nav-logo { justify-content: center; }
    html.nav-compact .nav-logo-circle { width: 28px; height: 28px; }
    html.nav-compact .nav-top { padding: 12px 8px 8px; }
    html.nav-compact .nav-menu { padding: 4px; }
    html.nav-compact .nav-item {
        justify-content: center;
        padding: 8px;
        gap: 0;
    }
    html.nav-compact .nav-logo { gap: 0; }
    html.nav-compact .nav-item svg { width: 16px; height: 16px; }
    html.nav-compact .nav-bottom { padding: 6px 4px; }
    html.nav-compact .nav-bottom-user {
        justify-content: center;
        padding: 8px;
    }
    html.nav-compact .nav-collapse-btn svg { transform: rotate(180deg); }
    html.nav-compact .main {
        margin-left: 56px;
        max-width: calc(100vw - 56px);
    }
    html.nav-compact .topbar { left: 56px; }

    /* Powered by fixed rechtsonder */
    .powered-by-fixed {
        position: fixed;
        bottom: 12px;
        left: 50%;
        transform: translateX(-50%);
        padding: 0;
        z-index: 10;
    }

    /* Notif toast rechts */
    .notif-toast {
        left: auto;
        right: 24px;
        width: 300px;
    }
}

/* ============================================
   Large desktop (>= 1024px)
   ============================================ */
@media (min-width: 1024px) {
    .kpi-grid { grid-template-columns: repeat(3, 1fr); }
}

/* ============================================
   Breed scherm: meer tegels naast elkaar
   ============================================

   Een tegel is een icoon van 36 pixels plus een getal. Bij drie kolommen was er 434 pixels per
   tegel, en met veertien tegels stond alles wat erna komt vijf rijen lager.

   Vaste stappen en geen auto-fit: die zou op een 27-inch negen tegels naast elkaar zetten, en dan
   is het een rij cijfers in plaats van iets dat je in een oogopslag leest.

   De stappen liggen waar het label nog op een regel past. Van een tegel gaat 76 pixels op aan
   padding en icoon, en bij de drie tegels met een balkje nog eens 60. Het langste label daarvan
   is "Per maand terugkerend" en dat vraagt 116 pixels; bij vijf kolommen haal je dat vanaf een
   scherm van 1600. Op 1500 blijft er 102 over en breekt het af. */
@media (min-width: 1400px) {
    .kpi-grid { grid-template-columns: repeat(4, 1fr); }
}
@media (min-width: 1600px) {
    .kpi-grid { grid-template-columns: repeat(5, 1fr); }
}
@media (min-width: 2200px) {
    .kpi-grid { grid-template-columns: repeat(6, 1fr); }
}

/* ============================================
   Offerteregel: omschrijving naast de bedragen
   ============================================

   De omschrijving is een tekstvak waar je een paar zinnen in kwijt wilt; de bedragen ernaast zijn
   korte velden. Onder elkaar kostte dat twee keer zoveel hoogte per regel, en bij een offerte met
   acht regels scroll je jezelf suf.

   Op een smal scherm stapelt hij, want dan is een derde van de breedte geen veld meer maar een
   kolom van drie tekens. */
.quote-line-body {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
    align-items: start;
}
/* Soort, aantal en prijs horen op een regel: dat is de zin die je leest als je naar een
   offerteregel kijkt - "per maand, 1 stuk, 39 euro". Korting en btw eronder, want die zijn de
   uitzondering en niet de hoofdzaak.

   Flex en geen raster, zodat de velden de breedte krijgen die bij hun inhoud past: een soort is
   een woord of drie, een aantal is een cijfer. */
.quote-line-cijfers {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: flex-end;
}
/* Twee regels van drie. Boven wat de regel is - per maand, 1 stuk, 39 euro - en daaronder de
   uitzonderingen: korting, btw, en of de klant hem mag uitvinken. */
.quote-line-cijfers > .soort     { flex: 1 1 44%; min-width: 118px; }
.quote-line-cijfers > .aantal    { flex: 1 1 20%; min-width: 58px; }
.quote-line-cijfers > .prijs     { flex: 1 1 26%; min-width: 76px; }
.quote-line-cijfers > .korting   { flex: 1 1 28%; min-width: 96px; }
/* De btw is een keuze geworden en "0% goederen in de EU" past niet in 96 pixels. */
.quote-line-cijfers > .btw       { flex: 1 1 42%; min-width: 150px; }
.quote-line-cijfers > .optioneel { flex: 1 1 26%; min-width: 96px; }
.quote-line-cijfers > .breed     { flex: 1 1 100%; }

@media (min-width: 1024px) {
    .quote-line-body { grid-template-columns: 2fr 1fr; }
}

/* ============================================
   Leesbare tekstbreedte
   ============================================

   De pagina mag nu de volle breedte gebruiken, maar lopende tekst niet. Een alinea van 1800
   pixels lees je niet terug: je oog raakt het begin van de volgende regel kwijt. Rond de 75
   tekens is de grens, en dat is bij deze lettergrootte ongeveer 760 pixels.

   Alleen op tekst die je echt leest - de help, de uitleg bij een sectie. Een tabel of een rij
   tegels heeft er niets mee te maken. */
.help-section-body,
.help-card .card-body { max-width: 760px; }

/* ============================================
   Privacy mode: bedragen blurren als klant meekijkt
   ============================================ */
html.privacy-mode .privacy-amount {
    filter: blur(6px);
    transition: filter .15s ease;
    user-select: none;
}
html.privacy-mode .privacy-amount:hover {
    filter: blur(0);
}
html.privacy-mode #privacyIconOff { display: none; }
html.privacy-mode #privacyIconOn { display: block !important; }
html.privacy-mode #privacyToggleBtn { color: var(--brand); }

/* ============================================
   Generieke tabel UI (Table::render)
   ============================================ */
.dryve-table { display: flex; flex-direction: column; gap: 12px; }
.dryve-table-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}
.dryve-table-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    flex: 1;
    min-width: 200px;
}
.dryve-table-filter {
    height: 30px;
    font-size: 12px;
    padding: 3px 8px;
    flex: 1 1 calc(50% - 3px);
    min-width: 0;
    max-width: 100%;
}
@media (min-width: 768px) {
    .dryve-table-filter {
        flex: 0 1 auto;
        min-width: 90px;
        max-width: 160px;
    }
}
.dryve-table-filter-bool {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    padding: 0 8px;
    height: 30px;
    border: 1px solid var(--border);
    border-radius: var(--radius-xs);
    background: var(--card);
    cursor: pointer;
}
.dryve-table-actions {
    display: flex;
    gap: 6px;
    align-items: center;
    margin-left: auto;
}
@media (max-width: 767px) {
    .dryve-table-toolbar { flex-direction: column; align-items: stretch; }
    .dryve-table-actions { margin-left: 0; justify-content: flex-end; }
}
.dryve-table-sort {
    color: inherit;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
}
.dryve-table-sort:hover { color: var(--brand); }

.dryve-table tbody tr[data-url] { cursor: pointer; }
.dryve-table tbody tr[data-url]:hover { background: rgba(var(--brand-rgb), .04); }
.dryve-table tbody tr[data-url] td.no-click { cursor: default; }

.dryve-column-modal-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
    max-height: 50vh;
    overflow-y: auto;
}
.dryve-column-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border: 1px solid var(--border);
    border-radius: var(--radius-xs);
    background: var(--card);
    cursor: grab;
    font-size: 13px;
    transition: background .15s;
}
.dryve-column-row.dragging { opacity: .4; }
.dryve-column-row.drag-over { border-top: 2px solid var(--brand); }
.dryve-column-row .grip {
    color: var(--muted);
    flex-shrink: 0;
}
.dryve-column-row label {
    flex: 1;
    cursor: pointer;
    user-select: none;
}

/* Attachments */
.attachments-grid { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.attachment-item { position: relative; border-radius: 8px; overflow: hidden; border: 1px solid var(--border); }
.attachment-item img { display: block; max-width: 160px; max-height: 120px; object-fit: cover; }
.attachment-item .attachment-file { display: flex; align-items: center; gap: 6px; padding: 8px 12px; font-size: 12px; color: var(--text); text-decoration: none; }
.attachment-remove { position: absolute; top: 2px; right: 2px; background: rgba(0,0,0,.6); color: #fff; border: none; border-radius: 50%; width: 20px; height: 20px; font-size: 14px; line-height: 20px; text-align: center; cursor: pointer; opacity: 0; transition: opacity .15s; }
.attachment-item:hover .attachment-remove { opacity: 1; }
.attachment-upload { margin-top: 8px; display: flex; align-items: center; gap: 10px; padding: 10px; border: 1px dashed var(--border); border-radius: 8px; transition: border-color .15s, background .15s; }
.attachment-upload.is-dragover { border-color: var(--brand); background: rgba(var(--brand-rgb), .06); }
.attachment-upload.is-dragover .attachment-drop-hint { color: var(--brand); }
.attachment-drop-hint { font-size: 12px; color: var(--muted); }
.attachment-upload-btn { cursor: pointer; flex-shrink: 0; }
.attachment-upload-btn input[type=file] { display: none; }
@media (max-width: 600px) { .attachment-drop-hint { display: none; } }

/* Rich text editor */
.rich-editor-wrap { margin-bottom: 14px; }
.rich-editor { min-height: 120px; background: var(--card2); border: 1px solid var(--border); border-radius: 0 0 8px 8px; padding: 12px; font-size: 13px; color: var(--text); line-height: 1.6; outline: none; }
.rich-editor:focus { border-color: var(--brand); }
.rich-editor ul, .rich-editor ol { padding-left: 15px; margin: 4px 0; }
.rich-editor li { margin: 2px 0; }
.rich-toolbar { display: flex; align-items: center; gap: 2px; padding: 4px; background: var(--card2); border: 1px solid var(--border); border-radius: 8px 8px 0 0; }
.rich-toolbar button { background: none; border: none; padding: 4px 8px; border-radius: 4px; font-size: 11px; color: var(--muted); cursor: pointer; display: flex; align-items: center; }
.rich-toolbar button:hover { background: var(--subtle); color: var(--text); }
.rich-sep { width: 1px; height: 16px; background: var(--border); margin: 0 4px; }
.rich-editor table, .rich-content table { width: 100%; border-collapse: collapse; margin: 8px 0; font-size: 13px; }
.rich-editor th, .rich-editor td, .rich-content th, .rich-content td { border: 1px solid var(--border); padding: 6px 10px; text-align: left; }
.rich-editor th, .rich-content th { background: var(--subtle); font-weight: 600; }
.rich-content ul, .rich-content ol { padding-left: 15px; margin: 4px 0; }
.rich-content li { margin: 2px 0; }
.rich-content a { color: var(--brand); text-decoration: underline; }

/* AI Drawer */
.ai-drawer {
    position: fixed;
    bottom: 0;
    right: 80px;
    width: 360px;
    max-height: 55vh;
    background: var(--card);
    border: 1px solid var(--border);
    border-bottom: none;
    border-radius: 12px 12px 0 0;
    box-shadow: 0 -4px 20px rgba(0,0,0,.1);
    z-index: 91;
    display: flex;
    flex-direction: column;
    transition: transform .3s ease;
    transform: translateY(calc(100% - 40px));
}

/* Mobile bottom nav */
.mobile-bottom-nav {
    display: none;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 90;
    background: var(--card);
    border-top: 1px solid var(--border);
    padding: 10px 0;
    padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px));
}
.mobile-bottom-nav-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    text-decoration: none;
    color: var(--muted);
    font-size: 10px;
    padding: 4px 0;
    transition: color .15s;
}
.mobile-bottom-nav-item.active { color: var(--brand); }
.mobile-bottom-nav-icon svg { width: 24px; height: 24px; }
.mobile-bottom-nav-label { font-weight: 500; line-height: 1; }

@media (max-width: 767px) {
    .mobile-bottom-nav { display: flex; }
    .main { padding-bottom: 80px; }
    .nav-menu { padding-bottom: 80px; }
    .ai-drawer { bottom: 80px; right: 16px; width: calc(100% - 32px); }
}

/* Sub-records sectie-tabel: cards op mobiel */
@media (max-width: 767px) {
    .line-table thead { display: none; }
    .line-table, .line-table tbody, .line-table tr.line-row, .line-table td {
        display: block;
        width: 100%;
    }
    .line-table tr.line-row {
        border: 1px solid var(--border);
        border-radius: 6px;
        margin-bottom: 8px;
        padding: 8px;
        background: var(--card);
        position: relative;
    }
    .line-table td {
        padding: 4px 0 !important;
        text-align: left !important;
    }
    .line-table td[data-label]::before {
        content: attr(data-label);
        display: block;
        font-size: 10px;
        color: var(--muted);
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: .04em;
        margin-bottom: 2px;
    }
    .line-table td input,
    .line-table td select {
        text-align: left !important;
    }
    .line-table td.line-actions {
        position: absolute;
        top: 4px;
        right: 4px;
        width: auto !important;
        padding: 0 !important;
    }
}

/* --- Kopregel: titel, acties, tabs, zoom ------------------------------------
   Zie core/Kop.php voor waarom dit drie dingen zijn en niet één rij knoppen. */

.kop {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 16px;
}
.kop-titel h1 { margin: 0; }
.kop-acties { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }

/* Tabs: zusterschermen. De balk is de verzameling, dus hij loopt door over de
   volle breedte en de actieve tab hangt eraan vast. */
.tabs {
    display: flex;
    gap: 2px;
    flex-wrap: wrap;
    border-bottom: 1px solid var(--border);
    margin: -4px 0 18px;
}
.tabs a {
    padding: 8px 13px 9px;
    margin-bottom: -1px;
    font-size: 13px;
    font-weight: 500;
    color: var(--muted);
    text-decoration: none;
    border-bottom: 2px solid transparent;
    white-space: nowrap;
    transition: color .15s;
}
.tabs a:hover { color: var(--text); }
.tabs a.aan { color: var(--text); font-weight: 600; border-bottom-color: var(--brand); }
.tab-telling {
    display: inline-block;
    min-width: 17px;
    padding: 0 5px;
    border-radius: 9px;
    background: var(--subtle);
    border: 1px solid var(--border);
    font-size: 10px;
    font-weight: 600;
    text-align: center;
    font-variant-numeric: tabular-nums;
}
.tabs a.aan .tab-telling { background: var(--brand); border-color: var(--brand); color: #fff; }

/* Zoom: dezelfde gegevens anders getekend. Aan elkaar vast, want het is één
   keuze - niet een rij losse bestemmingen. */
.zoom {
    display: inline-flex;
    border: 1px solid var(--border2);
    border-radius: var(--radius-sm);
    overflow: hidden;
    vertical-align: middle;
}
.zoom a,
.zoom button {
    padding: 5px 12px;
    border: 0;
    cursor: pointer;
    font-family: inherit;
    font-size: 12px;
    font-weight: 500;
    color: var(--muted);
    background: var(--card2);
    text-decoration: none;
    white-space: nowrap;
    transition: color .15s;
}
.zoom a + a,
.zoom button + button { border-left: 1px solid var(--border2); }
.zoom a:hover,
.zoom button:hover { color: var(--text); }
.zoom a.aan,
.zoom button.aan { background: var(--brand); color: #fff; }

/* Meer: alles boven de derde actie. */
.kop-meer { position: relative; }
.kop-meer-lijst {
    display: none;
    position: absolute;
    right: 0;
    top: calc(100% + 4px);
    z-index: 40;
    min-width: 172px;
    padding: 4px;
    background: var(--card);
    border: 1px solid var(--border2);
    border-radius: var(--radius-sm);
    box-shadow: 0 8px 24px rgba(0, 0, 0, .13);
}
.kop-meer.open .kop-meer-lijst { display: block; }
.kop-meer-lijst a,
.kop-meer-lijst button {
    display: block;
    width: 100%;
    padding: 7px 10px;
    border: 0;
    border-radius: 5px;
    background: none;
    color: var(--text);
    font-family: inherit;
    font-size: 12px;
    font-weight: 500;
    text-align: left;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
}
.kop-meer-lijst a:hover,
.kop-meer-lijst button:hover { background: var(--subtle); }
/* display:block hierboven wint het anders van het hidden-attribuut. */
.kop-meer-lijst [hidden] { display: none; }

/* Twee keuzes over dezelfde inhoud op één regel: welke tekening links, hoeveel detail rechts.
   Los onder elkaar stonden ze te zweven zonder dat je zag dat ze bij elkaar hoorden. */
.zoom-rij { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 16px; }
.zoom-vul { flex: 1 1 auto; }
.zoom-icoon { display: inline-flex; align-items: center; justify-content: center; padding: 5px 11px; }
.zoom-icoon svg { width: 14px; height: 14px; display: block; }

/* Terug: links, boven de titel. Klein en rustig - het is een uitweg, geen aanbod. */
.kop-terug {
    display: inline-block;
    margin-bottom: 6px;
    font-size: 12px;
    font-weight: 500;
    color: var(--muted);
    text-decoration: none;
}
.kop-terug:hover { color: var(--brand); }

/* --- Zoekbalk: zoeken en filteren op elk overzicht, zie core/Zoekbalk.php --- */
.zoekbalk {
    display: flex;
    gap: 6px;
    align-items: center;
    flex-wrap: wrap;
    margin-bottom: 16px;
}
.zoekbalk-term { position: relative; flex: 1 1 220px; min-width: 180px; display: block; }
.zoekbalk-loep {
    position: absolute; left: 9px; top: 50%; transform: translateY(-50%);
    display: flex; color: var(--muted); pointer-events: none;
}
.zoekbalk-loep svg { width: 14px; height: 14px; }
.zoekbalk input[type="search"] {
    width: 100%;
    padding: 6px 10px 6px 29px;
    border: 1px solid var(--border2);
    border-radius: var(--radius-sm);
    background: var(--card);
    color: var(--text);
    font-family: inherit;
    font-size: 12px;
}
.zoekbalk select {
    padding: 6px 9px;
    border: 1px solid var(--border2);
    border-radius: var(--radius-sm);
    background: var(--card);
    color: var(--text);
    font-family: inherit;
    font-size: 12px;
    max-width: 190px;
}
/* Een filter die aanstaat hoort op te vallen, anders zoek je je rot naar waarom de lijst leeg is. */
.zoekbalk select.aan { border-color: var(--brand); color: var(--brand); font-weight: 500; }
.zoekbalk input[type="search"]:focus,
.zoekbalk select:focus { outline: 2px solid var(--brand); outline-offset: -1px; }
.zoekbalk-leeg { font-size: 12px; color: var(--muted); text-decoration: none; padding: 0 4px; }
.zoekbalk-leeg:hover { color: var(--brand); }

/* Tijdens het ophalen even doffer, zodat je ziet dat er iets gebeurt zonder dat het springt. */
#scherm-inhoud.bezig { opacity: .55; transition: opacity .12s; }

/* Zonder JS is de Zoek-knop de enige manier; met JS is hij overbodig maar niet storend. */
@media (max-width: 560px) { .zoekbalk-term { flex-basis: 100%; } }

/* --- Regels op een kaartje, zie modules/custom_records/Kaartje.php ---------------------------
   Alles wordt gerenderd; het detailniveau verbergt met CSS. Dan staat de schakelaar meteen goed
   zonder de server opnieuw te bevragen, en zo deed het bord het al. */
.kaart-regel {
    font-size: 11px;
    color: var(--muted);
    line-height: 1.45;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.kaart-regel + .kaart-regel { margin-top: 1px; }

/* Een bon die over zijn datum is. Zag er precies hetzelfde uit als een bon van morgen: een
   datum, verder niets. Daardoor bleef er een vierendertig dagen op Gepland staan zonder dat
   iemand het merkte. */
.kaart-regel.kaart-laat { color: var(--red, #dc2626); font-weight: 600; }

/* Compact toont alleen wat op "altijd" staat, normaal daar bovenop "vanaf normaal". */
.kanban-mode-compact .kaart-vanaf-normaal,
.kanban-mode-compact .kaart-vanaf-uitgebreid,
.kanban-mode-normal  .kaart-vanaf-uitgebreid { display: none; }
/* Andersom komt ook voor: een korte regel die op de uitgebreide kaart wordt vervangen door een
   vollediger blok. Dan wil je hem daar juist weg hebben, anders staat het bedrag er twee keer. */
.kanban-mode-expanded .kaart-tot-uitgebreid { display: none; }

/* Label links, bedrag rechts, zodat de bedragen onder elkaar uitlijnen en je ze kunt vergelijken
   zonder te lezen wat ervoor staat. */
.kaart-bedrag { display: flex; justify-content: space-between; gap: 8px; }

/* Pillen zijn inline-block, dus die hebben hun eigen verbergregel nodig. */
.kanban-mode-compact .kaart-pil.kaart-vanaf-normaal,
.kanban-mode-compact .kaart-pil.kaart-vanaf-uitgebreid,
.kanban-mode-normal  .kaart-pil.kaart-vanaf-uitgebreid { display: none; }

/* display van .topbar-timer wint het anders van het hidden-attribuut. */
.topbar-timer[hidden] { display: none; }

/* Pillen op een kaartje: het ene of twee dingen die je van een afstand wil zien. Naast elkaar op
   één rij, want twee pillen onder elkaar leest als twee regels en dan is de vorm zinloos. */
.kaart-pillen { display: flex; flex-wrap: wrap; gap: 3px; margin-bottom: 3px; }
.kaart-pil {
    display: inline-block;
    padding: 1px 7px;
    border-radius: 9px;
    border: 1px solid var(--border2);
    background: var(--subtle);
    color: var(--muted);
    font-size: 10px;
    font-weight: 600;
    line-height: 1.6;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Aanvinklijst in de zoekbalk. Een select met multiple werkt op een telefoon niet en laat niet
   zien wat je hebt aangevinkt zonder hem open te klappen. */
.zoek-lijst { position: relative; }
.zoek-lijst-knop {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 6px 10px;
    border: 1px solid var(--border2);
    border-radius: var(--radius-sm);
    background: var(--card);
    color: var(--text);
    font-family: inherit; font-size: 12px;
    cursor: pointer; white-space: nowrap;
}
.zoek-lijst.aan .zoek-lijst-knop { border-color: var(--brand); color: var(--brand); font-weight: 500; }
.zoek-aantal {
    display: inline-block; min-width: 16px; padding: 0 4px;
    border-radius: 8px; background: var(--brand); color: #fff;
    font-size: 10px; font-weight: 600; text-align: center;
}
.zoek-lijst-opties {
    display: none;
    position: absolute; left: 0; top: calc(100% + 4px); z-index: 40;
    min-width: 210px; max-height: 320px; overflow-y: auto;
    padding: 4px;
    background: var(--card);
    border: 1px solid var(--border2);
    border-radius: var(--radius-sm);
    box-shadow: 0 8px 24px rgba(0, 0, 0, .13);
}
.zoek-lijst.open .zoek-lijst-opties { display: block; }
.zoek-lijst-opties label {
    display: flex; align-items: center; gap: 7px;
    padding: 6px 8px; border-radius: 5px;
    font-size: 12px; cursor: pointer;
}
.zoek-lijst-opties label:hover { background: var(--subtle); }
.zoek-lijst-opties label span:first-of-type { flex: 1; }
.zoek-telling { color: var(--muted); font-size: 11px; font-variant-numeric: tabular-nums; }
.zoek-lijst-hint {
    padding: 7px 8px 4px; margin-top: 2px;
    border-top: 1px solid var(--border);
    font-size: 11px; color: var(--muted);
}

/* Kopje boven de eigen velden van een record. Zonder scheiding leest het als het label van het
   volgende veld in plaats van als kopje van de groep eronder. */
.eigen-velden-kop {
    margin-top: 22px;
    padding-top: 14px;
    border-top: 1px solid var(--border);
}
.eigen-velden-kop .label { font-weight: 600; color: var(--text); }

/* --- Kijker: foto's en pdf's bekijken zonder downloaden ------------------------------------- */
.kijker {
    display: none;
    position: fixed; inset: 0; z-index: 3000;
    background: rgba(0, 0, 0, .82);
    padding: 48px 56px 64px;
}
.kijker.open { display: block; }
.kijker-inhoud {
    width: 100%; height: 100%;
    display: flex; align-items: center; justify-content: center;
}
.kijker-inhoud img {
    max-width: 100%; max-height: 100%;
    object-fit: contain;
    border-radius: 4px;
    background: #fff;
}
.kijker-inhoud iframe {
    width: 100%; height: 100%;
    border: 0; border-radius: 4px; background: #fff;
}
.kijker-sluit, .kijker-vorige, .kijker-volgende {
    position: absolute; z-index: 1;
    background: rgba(255, 255, 255, .1);
    border: 0; border-radius: 50%;
    color: #fff; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: background .15s;
}
.kijker-sluit:hover, .kijker-vorige:hover, .kijker-volgende:hover { background: rgba(255, 255, 255, .24); }
.kijker-sluit { top: 12px; right: 14px; width: 38px; height: 38px; font-size: 26px; line-height: 1; }
.kijker-vorige, .kijker-volgende { top: 50%; margin-top: -22px; width: 44px; height: 44px; font-size: 30px; }
.kijker-vorige { left: 8px; }
.kijker-volgende { right: 8px; }
/* Bij één bestand zijn de pijlen alleen maar in de weg. */
.kijker.alleen-een .kijker-vorige,
.kijker.alleen-een .kijker-volgende { display: none; }
.kijker-voet {
    position: absolute; left: 0; right: 0; bottom: 0;
    padding: 14px 20px;
    display: flex; align-items: center; justify-content: space-between; gap: 16px;
    color: rgba(255, 255, 255, .82); font-size: 13px;
}
.kijker-naam { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kijker-download { color: #fff; text-decoration: underline; white-space: nowrap; }
@media (max-width: 640px) {
    .kijker { padding: 44px 8px 60px; }
    .kijker-vorige, .kijker-volgende { width: 36px; height: 36px; font-size: 24px; }

    /* Meer: op een telefoon geen zwevend doosje maar een blad onder de kop.
       Het menu hing met zijn rechterkant aan de knop en werd zo breed als het langste label,
       want de regels mochten niet afbreken. Stond de knop links op een afgebroken rij, dan
       liep het menu het scherm uit aan de linkerkant - en wat je nog wel zag waren regels van
       twaalf pixels met zeven pixels lucht ertussen, waar je met een vinger niet tussen komt. */
    .kop { position: relative; }
    .kop-meer { position: static; }
    .kop-meer-lijst {
        left: 0;
        right: 0;
        top: calc(100% + 4px);
        min-width: 0;
        padding: 6px;
    }
    .kop-meer-lijst a,
    .kop-meer-lijst button {
        padding: 12px 12px;
        font-size: 14px;
        white-space: normal;
        line-height: 1.35;
    }
    .kop-meer-lijst a + a,
    .kop-meer-lijst a + button,
    .kop-meer-lijst button + a,
    .kop-meer-lijst button + button { border-top: 1px solid var(--border); }
}