/* ==========================================================================
   LIMS Exsiccaten — centrale stylesheet
   Eén plek voor alle styling. Pas hier de huisstijl aan en het werkt
   automatisch door op elk scherm dat base.html gebruikt.
   ========================================================================== */

/* Huisstijl-variabelen — pas deze aan om de hele app van kleur te wisselen */
:root {
    --kleur-primair: #007bff;
    --kleur-primair-hover: #0056b3;
    --kleur-secundair: #6c757d;
    --kleur-gevaar: #dc3545;
    --kleur-succes: #28a745;
    --kleur-waarschuwing: #ffc107;
    --kleur-navbar: #343a40;
    --kleur-sidebar: #212529;
    --kleur-achtergrond: #f4f6f9;
    --kleur-tekst: #333;
    --kleur-kaart: #ffffff;
    --kleur-rand: #ccd4da;
    --lettertype: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    --navbar-hoogte: 60px;

    /* ---- Veld-ritmiek (de Vondst-pagina is leidend) ----
       Eén plek voor de hoogte/opmaak van ALLE invoervelden en labels in de app.
       Pas deze waarden aan om overal tegelijk de veldhoogte/kleur te wijzigen. */
    --veld-padding-y: 5px;          /* verticale binnenruimte -> bepaalt de hoogte */
    --veld-padding-x: 10px;         /* horizontale binnenruimte */
    --veld-radius: 6px;             /* hoekafronding van velden */
    --veld-fontsize: 15px;          /* tekstgrootte in de velden */
    --veld-rand: var(--kleur-rand); /* randkleur in rust */
    --veld-rand-focus: var(--kleur-primair); /* randkleur bij focus */
    --label-fontsize: 13px;         /* labelgrootte boven het veld */
    --label-kleur: #555;            /* labelkleur */
    --label-gewicht: 700;           /* labeldikte */
}

/* ---------- Basis ---------- */
body {
    font-family: var(--lettertype);
    margin: 0;
    padding-top: 70px;
    background: var(--kleur-achtergrond);
    color: var(--kleur-tekst);
}

/* ---------- Bovenbalk ---------- */
.top-navbar {
    position: fixed; top: 0; left: 0; right: 0;
    height: var(--navbar-hoogte);
    background: var(--kleur-navbar);
    display: flex; align-items: center; justify-content: space-between;
    padding: 0 20px; z-index: 1000;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}
.nav-left { display: flex; align-items: center; gap: 15px; }
.nav-right { display: flex; align-items: center; gap: 15px; }
.hamburger-btn {
    background: none; border: none; color: white; font-size: 24px;
    cursor: pointer; padding: 5px; display: block; width: auto;
}
.navbar-title { color: white; font-weight: bold; font-size: 18px;
    display: flex; align-items: center; gap: 8px; }
.navbar-logo { width: 30px; height: 30px; border-radius: 6px; object-fit: cover;
    display: block; flex-shrink: 0; }
.navbar-merk { flex-shrink: 0; }
.navbar-omschrijving { font-weight: 500; }
.user-badge {
    color: #f8f9fa; font-size: 14px; font-weight: 500; text-decoration: none;
    background: rgba(255,255,255,0.1); padding: 6px 12px; border-radius: 20px;
    white-space: nowrap;
}
a.user-badge { cursor: pointer; transition: background 0.15s; }
a.user-badge:hover { background: rgba(255,255,255,0.22); }
.login-nav-btn {
    background: var(--kleur-primair); color: white; border: none;
    padding: 6px 15px; border-radius: 4px; font-weight: bold; cursor: pointer;
    text-decoration: none; font-size: 14px;
}
.logout-btn {
    background: var(--kleur-gevaar); color: white; border: none;
    padding: 6px 12px; font-size: 13px; width: auto; margin: 0;
    border-radius: 4px; cursor: pointer; font-weight: bold;
}
/* Offline-status in plaats van Uitloggen: bewust géén knop — uitloggen terwijl
   je offline bent wist de sessie en blokkeert daarna opslaan. */
.offline-status {
    background: var(--kleur-secundair); color: #fff; border: none;
    padding: 6px 12px; font-size: 13px; width: auto; margin: 0;
    border-radius: 4px; font-weight: bold; white-space: nowrap;
    display: inline-flex; align-items: center; gap: 5px; cursor: default;
}
.offline-badge {
    background: var(--kleur-gevaar); color: white; padding: 4px 10px;
    border-radius: 4px; font-size: 12px; font-weight: bold; display: none;
}

/* ---------- Zijbalk ---------- */
.sidebar {
    position: fixed; top: var(--navbar-hoogte); left: -260px;
    width: 240px; height: calc(100vh - var(--navbar-hoogte));
    /* dvh volgt de werkelijk zichtbare hoogte op mobiel (adresbalk in/uit), zodat
       de onderste menu-items niet onder de schermrand vallen; vh blijft fallback. */
    height: calc(100dvh - var(--navbar-hoogte));
    background: var(--kleur-sidebar); padding: 20px 10px 40px;
    transition: 0.3s ease; z-index: 999; overflow-y: auto;
}
.sidebar.open { left: 0; }

/* Onzichtbare laag die outside-clicks opvangt zodra de zijbalk open is.
   Ligt boven de inhoud maar onder de zijbalk; op de navbar na, zodat de
   hamburger bereikbaar blijft. */
#sidebar_backdrop {
    position: fixed; inset: var(--navbar-hoogte) 0 0 0;
    z-index: 998; background: transparent;
    display: none;
}
#sidebar_backdrop.zichtbaar { display: block; }
.sidebar a {
    display: block; color: #c2c7d0; text-decoration: none;
    padding: 12px 15px; border-radius: 6px; margin-bottom: 5px; font-size: 15px;
}
.sidebar a:hover, .sidebar a.active {
    background: var(--kleur-primair); color: white;
}
.sidebar a.admin-link { color: var(--kleur-waarschuwing); }
/* Offline uitgeschakeld: niet-klikbaar, gedimd, met 'verboden'-cursor. */
.sidebar a.offline-uit {
    opacity: 0.4; cursor: not-allowed; pointer-events: none;
}
.sidebar a.offline-uit:hover { background: none; color: #c2c7d0; }

/* ---------- PWA-installatiebanner (inlogscherm) ---------- */
.install-banner {
    position: relative; margin-top: 16px; padding: 12px 14px;
    border: 1px dashed var(--kleur-rand); border-radius: 8px; background: #f6f8fa;
}
.install-banner .install-knop { width: 100%; margin: 0; }
.install-banner .install-sluit {
    position: absolute; top: 4px; right: 6px; width: auto; margin: 0; padding: 2px 8px;
    background: none; border: none; color: var(--kleur-secundair);
    font-size: 20px; line-height: 1; cursor: pointer;
}
.install-banner .install-sluit:hover { background: none; color: var(--kleur-tekst); }
.install-hint {
    margin: 10px 0 0; font-size: 14px; color: var(--kleur-tekst); line-height: 1.4;
}

/* ---------- Inhoud / kaarten ---------- */
.container {
    padding: 15px; max-width: 900px; margin: 0 auto; box-sizing: border-box;
}
.card {
    background: var(--kleur-kaart); padding: 25px; border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.06); margin-bottom: 20px;
}
.card-smal { max-width: 450px; margin: 40px auto; }
h2 {
    color: var(--kleur-primair); margin-top: 0;
    border-bottom: 2px solid #eef2f5; padding-bottom: 10px;
}

/* ---------- Formulieren ----------
   Eén uniforme ritmiek voor de hele app: compacte velden, label 13px dicht
   boven het veld, consistente witruimte. Zie ook .label-rij / .vink-rechts. */
label {
    font-weight: var(--label-gewicht); display: block; font-size: var(--label-fontsize);
    margin: 8px 0 2px; color: var(--label-kleur);
}
input, textarea, select {
    width: 100%; padding: var(--veld-padding-y) var(--veld-padding-x); margin: 0 0 2px;
    box-sizing: border-box; border: 1px solid var(--veld-rand);
    border-radius: var(--veld-radius); font-size: var(--veld-fontsize);
}
input:focus, textarea:focus, select:focus {
    outline: none; border-color: var(--veld-rand-focus);
    box-shadow: 0 0 0 2px rgba(0,123,255,.12);
}
textarea { padding: calc(var(--veld-padding-y) + 1px) var(--veld-padding-x); }
input[readonly] {
    background-color: #e9ecef; color: #495057; cursor: not-allowed;
}
/* Kopregel: label links, optioneel een control (bv. vasthouden-vinkje) rechts,
   op dezelfde regel en even dicht op het veld als een los label. */
.label-rij { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin: 8px 0 2px; }
.label-rij > * { margin: 0; }
.vink-rechts { display: flex; align-items: center; gap: 6px; font-weight: normal; font-size: 13px; color: #555; cursor: pointer; white-space: nowrap; }
.vh-vink { width: 16px; height: 16px; margin: 0; padding: 0; accent-color: #198754; cursor: pointer; flex-shrink: 0; }
/* 'vasthouden'-vinkje + los i-icoon ernaast, als één rechtergroep. Het icoon
   staat bewust buiten het <label>, anders toggelt een klik op de 'i' het vinkje. */
/* Slotje + uitleg-i naast elkaar; een eigen gap houdt het slot verder van de i
   af (i.p.v. de krappe 5px-margin van .veld-info-inline). */
.vh-rechts { display: inline-flex; align-items: center; gap: 20px; }
.vh-rechts .veld-info-inline { margin-left: 0; }

/* Slot-toggle i.p.v. een 'vasthouden'-vinkje met tekst: open hangslot = los
   (waarde wordt niet meegenomen), dicht hangslot = vergrendeld (waarde blijft
   staan voor de volgende vondst). De checkbox eronder blijft de statushouder
   (zelfde id/onchange), dus alle bestaande logica werkt ongewijzigd. */
.slot-vink { display: inline-flex; align-items: center; cursor: pointer; }
.slot-vink input { position: absolute; opacity: 0; width: 0; height: 0; }
/* Open hangslot = blauw (los), dicht hangslot = rood (vergrendeld). Emoji laten
   zich niet inkleuren, dus we gebruiken ingekleurde SVG-iconen (feather-stijl,
   net als de oog-knop). Kleur zit in de 'stroke' van de data-URI. */
.slot-icoon {
    width: 18px; height: 18px; display: inline-block; flex-shrink: 0;
    background: center / contain no-repeat
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232563eb' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='11' width='18' height='11' rx='2'/%3E%3Cpath d='M7 11V7a5 5 0 0 1 9.9-1'/%3E%3C/svg%3E");
    transition: opacity .12s;
}
.slot-vink:hover .slot-icoon { opacity: .75; }
.slot-vink input:checked + .slot-icoon {
    background-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23dc3545' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='11' width='18' height='11' rx='2'/%3E%3Cpath d='M7 11V7a5 5 0 0 1 10 0v4'/%3E%3C/svg%3E");
}
.slot-vink input:focus-visible + .slot-icoon {
    outline: 2px solid var(--kleur-primair); outline-offset: 2px; border-radius: 3px;
}
button {
    background: var(--kleur-primair); color: white; padding: 13px;
    border: none; border-radius: 6px; cursor: pointer; width: 100%;
    font-size: 16px; font-weight: bold;
}
button:hover { background: var(--kleur-primair-hover); }
.btn-secondary { background: var(--kleur-secundair); margin-top: 10px; }
.btn-secondary:hover { background: #5a6268; }
.btn-inline { width: auto; }

/* ---------- Soort-zoeken ---------- */
.search-results-box {
    display: none; max-height: 220px; overflow-y: auto;
    border: 1px solid var(--kleur-rand); border-top: none;
    margin-top: -15px; margin-bottom: 15px; border-radius: 0 0 6px 6px;
    background: white; list-style: none; padding: 0; position: relative; z-index: 10;
}
.search-results-box li {
    padding: 11px 14px; cursor: pointer; border-bottom: 1px solid #f8f9fa;
}
.search-results-box li:hover { background: var(--kleur-primair); color: white; }
/* ---------- Meldingen / badges ---------- */
.badge {
    background: #e1f0ff; color: var(--kleur-primair); padding: 6px 12px;
    border-radius: 4px; font-size: 13px; font-weight: bold; display: inline-block;
}
.badge-succes { background: #d4edda; color: #155724; }
.info-alert {
    background: #e2f9e6; border: 1px solid var(--kleur-succes); color: #155724;
    padding: 15px; border-radius: 6px; margin-bottom: 15px;
}
.info-alert.waarschuwing {
    background: #fff3cd; border-color: var(--kleur-waarschuwing); color: #856404;
}

/* ---------- Detailtabel (monster.html) ---------- */
.detail-tabel { width: 100%; border-collapse: collapse; margin-top: 15px; }
.detail-tabel th, .detail-tabel td {
    text-align: left; padding: 10px 8px; border-bottom: 1px solid #eef2f5;
    vertical-align: top;
}
.detail-tabel th { color: var(--kleur-secundair); font-weight: 600; width: 35%; }
code { background: #eef2f5; padding: 2px 6px; border-radius: 4px; }

/* ==========================================================================
   Recordlijsten — één gedeelde 'verkenner-details'-look
   Elke pagina die een lijst records toont gebruikt deze klassen, zodat alle
   lijsten er identiek uitzien. Pas de look hier op één plek aan en het werkt
   overal door. Twee smaken die dezelfde taal spreken (kleur, rijhoogte,
   hover, typografie):
     .reclijst   — tabel met kolomkoppen (Lab, Print, Verwijderd, Admin, NDFF)
     .ov-lijst   — koploze compacte kaart-rijen (Overzicht, Concepten)
   ========================================================================== */

/* ----- Kolomtabel-smaak ----- */
.reclijst { width: 100%; border-collapse: collapse; font-size: 13px; background: var(--kleur-kaart); }
.reclijst thead th {
    text-align: left; padding: 7px 10px; white-space: nowrap;
    color: var(--kleur-secundair); font-weight: 600;
    border-bottom: 2px solid #eef2f5; background: #fbfcfd;
}
.reclijst thead th.num, .reclijst td.num { text-align: right; white-space: nowrap; }
.reclijst tbody td {
    padding: 4px 10px; border-bottom: 1px solid #f1f4f7;
    line-height: 1.25; vertical-align: top;
}
.reclijst tbody tr:nth-child(even) { background: #fafbfc; }
.reclijst tbody tr:hover { background: #eef6ff; }

/* Sorteerbare kolomkoppen — de klik-sortering regelt elke pagina zelf in JS. */
.reclijst th[data-sorteer] { cursor: pointer; user-select: none; }
.reclijst th[data-sorteer]:hover { background: #f0f4f8; }
.reclijst th[data-sorteer]::after { content: ' \2195'; color: #bbb; font-size: 11px; }
.reclijst th[data-sorteer].asc::after  { content: ' \2191'; color: var(--kleur-primair); }
.reclijst th[data-sorteer].desc::after { content: ' \2193'; color: var(--kleur-primair); }

/* Groepskop-rij (scheiding per invoerdag/gebruiker). Overschrijft zebra + hover. */
.reclijst tr.groepskop td {
    background: #eef4f8; color: var(--kleur-primair);
    font-weight: 600; font-size: 12px; padding: 3px 10px;
    border-top: 2px solid #d6e3ec; border-bottom: 1px solid #d6e3ec;
}
.reclijst tr.groepskop:hover td { background: #eef4f8; }

/* Veelgebruikte celtypen — houden nummer/soort overal gelijk opgemaakt. */
.reclijst .rl-nr { font-weight: 700; color: #1b3a5b; white-space: nowrap; }
.reclijst .rl-soort { font-style: italic; }
.reclijst .rl-sub { color: var(--kleur-secundair); }

/* 'Mijn vondsten' (concepten): alle datacellen in één uniform lettertype —
   zelfde grootte en gewicht als de rest van LIMS, rechtop. Alleen de
   wetenschappelijke naam in de Soort-kolom blijft cursief. Het inline
   collectienummer-veld erft daarbij het tabellettertype i.p.v. het
   browser-standaardfont. Bewust gescoped op #conc_tabel zodat de overige
   LIMS-lijsten hun eigen (vet nummer / cursieve soort) opmaak houden. */
#conc_tabel tbody td { font-weight: normal; font-style: normal; color: inherit; vertical-align: middle; }
#conc_tabel tbody td.rl-soort { font-style: italic; }
/* Krappe, vaste nummer-kolommen (~10 tekens): ze knijpen tot hun eigen inhoud
   (net als de actie-kolommen), de soortkolom vangt de resterende breedte op.
   Het collectienummer-veld staat er altijd (verborgen tot aanvinken), zodat de
   kolom niet openspringt en niets naar rechts schuift wanneer het verschijnt. */
#conc_tabel th.conc-col-nr,  #conc_tabel td.conc-nr-cel,
#conc_tabel th.conc-col-vak, #conc_tabel td.conc-col-vak { width: 1%; white-space: nowrap; }
/* Geen buiten-marge: kop én cel van de collectienummer-kolom hebben zelf geen
   horizontale padding, zodat het veld de kolom exact tot de rand vult (en de kop
   de kolom niet stiekem breder maakt). */
#conc_tabel th.conc-col-nr, #conc_tabel td.conc-nr-cel { padding-left: 0; padding-right: 0; }
/* Vaste, ruime breedte (geen field-sizing meer): het veld groeit NIET met de
   inhoud, dus extra tekens intypen schuift de kolommen niet meer op — ze scrollen
   binnen het veld. Ruim gekozen (~50% breder dan een gewoon nummer). Geen binnen-
   marge (padding 0); inhoud gecentreerd. Het veld staat er ook verborgen al, dus
   de kolom heeft van begin af aan deze breedte. */
#conc_tabel .conc-nr-invoer {
    font: inherit; vertical-align: middle;
    width: 12ch; box-sizing: content-box;
    margin: 0; padding: 0;
    border: 1px solid #c3ccd4; border-radius: 4px; text-align: center;
}
/* Nummer al in gebruik (of dubbel in de selectie): rood gemarkeerd. De tooltip
   (title) vertelt waarom; de gebruiker corrigeert vóór het bewaren. */
#conc_tabel .conc-nr-invoer.conc-nr-bezet {
    border-color: #c62828; background: #ffe6e6; color: #8a1c1c;
}

/* Kop-checkbox 'Collectie maken': checkbox boven het (kleine) label, gecentreerd. */
#conc_tabel th.conc-kop-maken { white-space: nowrap; }
#conc_tabel th.conc-kop-maken #conc_kop_vink {
    display: block; margin: 0 auto 2px; cursor: pointer;
}
#conc_tabel .conc-kop-label { display: block; font-size: 11px; line-height: 1.15; }

/* i-ballon in de kop 'Collectienummer'. De tooltip is position:fixed en wordt door
   JS (_plaatsConcInfoTip) t.o.v. de viewport geplaatst, ZODAT hij buiten de
   scroll-container valt en nooit wordt afgeknipt — ook niet bij een korte tabel.
   Weergave (display) wordt volledig door JS gestuurd. */
#conc_tabel .conc-info {
    display: inline-flex; align-items: center; justify-content: center;
    width: 16px; height: 16px; margin-left: 5px; box-sizing: border-box; vertical-align: middle;
    border: 1px solid #b0b5ba; border-radius: 50%;
    color: #b0b5ba; font: italic 700 11px/1 Georgia,'Times New Roman',serif;
    cursor: help; user-select: none;
}
#conc_tabel .conc-info:hover, #conc_tabel .conc-info:focus { color: #6c757d; border-color: #6c757d; outline: none; }
.conc-info-tip {
    display: none; position: fixed; left: 0; top: 0;
    width: 400px; max-width: calc(100vw - 16px);
    background: #333; color: #fff;
    font: 400 12px/1.45 var(--lettertype); font-style: normal;
    text-align: left; white-space: normal;
    padding: 9px 12px; border-radius: 6px; box-shadow: 0 3px 14px rgba(0,0,0,.28);
    z-index: 1000;
}
/* Vaknummers en de kopteksten Collectienummer + Vaknummer gecentreerd. */
#conc_tabel td.conc-col-vak,
#conc_tabel th.conc-col-nr, #conc_tabel th.conc-col-vak { text-align: center; }

/* Statuspil (o.a. NDFF-log). Buiten .reclijst herbruikbaar. */
.status-pil {
    display: inline-block; padding: 2px 9px; border-radius: 12px;
    font-size: 12px; font-weight: 600; white-space: nowrap;
}

.reclijst-scroll { overflow-x: auto; }
.reclijst-leeg { padding: 18px; color: var(--kleur-secundair); text-align: center; }

/* ----- Compacte koploze smaak (kaart-lijsten: Overzicht, Concepten) ----- */
.ov-lijst { border: 1px solid #eef2f5; border-radius: 10px; overflow: hidden; background: var(--kleur-kaart); }
.ov-rij {
    display: grid; grid-template-columns: 1fr auto; align-items: center;
    gap: 2px 12px; padding: 3px 10px; border-bottom: 1px solid #f1f4f7;
    font-size: 13px; line-height: 1.2;
}
.ov-rij:last-child { border-bottom: 0; }
.ov-rij:nth-child(even) { background: #fafbfc; }
.ov-rij:hover { background: #eef6ff; }

/* Hoofdregel: soort + meta op één regel, zodat er veel collecties passen. */
.ov-hoofd { min-width: 0; display: flex; align-items: baseline; gap: 8px; overflow: hidden; }
.ov-soort { font-style: italic; font-weight: 600; color: #1b3a5b; white-space: nowrap; }
.ov-nr { color: var(--kleur-secundair); font-weight: 600; font-style: normal;
    flex: 0 0 auto; min-width: 6.6em; }
.ov-meta { color: #5b6b7a; font-size: 12px; min-width: 0;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ov-meta .scheider { color: #c2ccd6; margin: 0 5px; }

.ov-acties { display: flex; align-items: center; gap: 6px; white-space: nowrap; }
.ov-knop {
    display: inline-block; width: auto; margin: 0; padding: 3px 9px;
    font-size: 12px; font-weight: 600; border-radius: 5px; text-decoration: none;
    border: 1px solid transparent; cursor: pointer; line-height: 1.2;
}
.ov-bewerk { background: #eef2f5; color: #2c3e50; border-color: #dfe4e8; }
.ov-bewerk:hover { background: #e2e8ee; }
.ov-russula { background: #fff3cd; color: #7a5b00; border-color: #ffe082; }
.ov-russula:hover { background: #ffeaa0; }
.ov-russula.compleet { background: #d4edda; color: #155724; border-color: #a9d8b5; }
.ov-verwijder { background: #fdecea; color: #922b21; border-color: #f5c6cb; }
.ov-verwijder:hover { background: #f5c6cb; }
/* Vastleggen-vak (Mijn Vondsten): open vierkant; de vink verschijnt pas na klik. */
.vastleg-vak { background: transparent; border-color: transparent; color: #1b3a5b; font-size: 16px; }
.vastleg-vak:hover:not([disabled]) { background: #eef2f5; }
.vastleg-vak[disabled] { color: #c3ccd4; cursor: not-allowed; }
.ov-leeg { padding: 18px; color: var(--kleur-secundair); text-align: center; }

/* Smalle actie-kolommen in .reclijst: één icoon-knop per cel, gecentreerd.
   width:1% + nowrap knijpt de kolom tot precies de knopbreedte. */
.reclijst th.rl-actie, .reclijst td.rl-actie {
    text-align: center; white-space: nowrap; width: 1%;
    padding-left: 4px; padding-right: 4px;
}
.rl-iconknop {
    display: inline-block; width: auto; margin: 0; padding: 3px 7px;
    font-size: 14px; line-height: 1.2; border-radius: 5px;
    border: 1px solid transparent; text-decoration: none; cursor: pointer;
}

@media (max-width: 560px) {
    .ov-rij { grid-template-columns: 1fr; }
    .ov-hoofd { flex-wrap: wrap; }
    .ov-acties { justify-content: flex-start; }
}

/* ---------- Telefoon: navbar op één regel ----------
   Smal scherm: alles op één regel — hamburger + logo + merk 'LIMS' links,
   gebruiker + uitloggen rechts. De omschrijving ('Collectiebeheer en
   sequencing') vervalt op de telefoon om die ene regel te laten passen.
   Desktop (breder dan 640px) blijft ongewijzigd. */
@media (max-width: 640px) {
    .top-navbar {
        padding: 0 12px;
        gap: 8px;                /* ademruimte tussen links en rechts */
    }
    .nav-left { gap: 8px; min-width: 0; }
    .navbar-title {
        font-size: 16px;
        min-width: 0;            /* mag krimpen i.p.v. de balk te breken */
    }
    /* 'Collectiebeheer en sequencing' weg op de telefoon. */
    .navbar-omschrijving { display: none; }
    .navbar-logo { width: 26px; height: 26px; }
    /* De OFFLINE-badge mag niet meekrimpen tot onleesbaar. */
    .navbar-title .offline-badge { font-size: 11px; padding: 3px 7px; }
    .nav-right { gap: 8px; min-width: 0; }
    /* Lange gebruikersnaam netjes afkappen i.p.v. de regel te breken. */
    .nav-right .user-badge {
        font-size: 12px; padding: 4px 10px;
        max-width: 42vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    }
    .nav-right .logout-btn,
    .nav-right .offline-status {
        font-size: 12px; padding: 4px 10px;
    }
    /* Navbar is weer één regel hoog; app.js stemt de body-padding exact af op de
       gemeten hoogte, var(--navbar-hoogte) is de beginwaarde tot het script draait. */
    body { padding-top: var(--navbar-hoogte); }
}

/* ---------- Taalkeuze (zijbalk) ---------- */
.taal-keuze {
    margin-top: 18px; padding: 12px 15px 4px; border-top: 1px solid #3a3f44;
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.taal-keuze-label {
    color: #c2c7d0; font-size: 13px; font-weight: 600; margin-right: 2px;
}
.taal-knop {
    background: transparent; color: #c2c7d0; border: 1px solid #4a5158;
    padding: 4px 12px; border-radius: 6px; font-size: 13px; font-weight: 600;
    cursor: pointer; width: auto; margin: 0;
}
.taal-knop:hover { background: var(--kleur-primair); color: #fff; }
.taal-knop.taal-actief {
    background: var(--kleur-primair); color: #fff; border-color: var(--kleur-primair);
}

/* ==========================================================================
   Veld-hulp: in-veld 'i' (info-tooltip) + 'x' (wissen) + tijdelijk nummer
   Eén centrale component voor de hele app (voorheen lokaal in home.html).
   Gebruik via de macro {{ veld_info(nr, tekst) }} uit _veld_macros.html, of
   plaats de markup binnen een .veld-hulp-wrapper.
   ========================================================================== */
.veld-hulp { position: relative; }
.veld-hulp > input[type=text] { padding-right: 30px; }
.veld-hulp-knoppen {
    position: absolute; top: 0; right: 8px; height: 100%;
    display: flex; align-items: center; gap: 5px; pointer-events: none;
}
.veld-hulp-knoppen > * { pointer-events: auto; }
.veld-icoon {
    width: 17px; height: 17px; padding: 0; margin: 0; box-sizing: border-box;
    display: flex; align-items: center; justify-content: center;
    background: none; border: none; border-radius: 50%;
    color: #b0b5ba; line-height: 1; cursor: pointer; flex-shrink: 0;
}
.veld-wis { font-size: 15px; display: none; }
.veld-wis:hover { color: #6c757d; background: #eceef0; }
.veld-hulp.heeft-tekst .veld-wis { display: flex; }
.veld-info {
    position: relative; border: 1px solid currentColor;
    font-family: Georgia,'Times New Roman',serif; font-style: italic;
    font-weight: 700; font-size: 11px; cursor: help;
}
.veld-info:hover { color: #6c757d; }
.veld-tooltip {
    /* Standaard gecentreerd op het icoon (CSS-fallback zonder JS). app.js
       (positieVeldTooltip) overschrijft left/right/transform + --pijl-links om
       de tooltip binnen de viewport te houden. */
    display: none; position: absolute; bottom: calc(100% + 9px);
    left: 50%; transform: translateX(-50%);
    width: max-content; max-width: 230px;
    background: #333; color: #fff; font-size: 12px; font-weight: 400;
    font-family: var(--lettertype); font-style: normal; line-height: 1.4; text-align: left;
    padding: 7px 10px; border-radius: 6px; box-shadow: 0 3px 12px rgba(0,0,0,.22);
    z-index: 300; white-space: normal;
}
.veld-tooltip::after {
    /* Pijltje wijst naar het icoon; --pijl-links wordt door JS gezet, met
       50% (gecentreerd) als fallback. margin-left centreert de 10px-pijl. */
    content: ''; position: absolute; top: 100%;
    left: var(--pijl-links, 50%); margin-left: -5px;
    border: 5px solid transparent; border-top-color: #333;
}
.veld-info:hover .veld-tooltip,
.veld-info:focus .veld-tooltip,
.veld-info.open .veld-tooltip { display: block; }

/* Varianten voor een lange uitlegballon (bv. de werking van een hele pagina).
   .tt-onder hangt de ballon ONDER de i i.p.v. erboven — nodig bij een i in een
   koptekst bovenaan de pagina, waar de standaardballon boven de zichtbare
   pagina zou vallen. .tt-breed maakt hem breed en laat \n in de tekst als
   regeleinde renderen (pre-line), zodat een i18n-string met kopjes en regels
   leesbaar blijft; bij weinig hoogte scrollt de inhoud in de ballon zelf. */
.veld-tooltip.tt-onder { top: calc(100% + 9px); bottom: auto; }
.veld-tooltip.tt-onder::after {
    top: auto; bottom: 100%;
    border-top-color: transparent; border-bottom-color: #333;
}
/* Onzichtbare brug over de 9px-kier tussen i en ballon: zonder dit verliest de
   i zijn :hover zodra de muis naar de (scrollbare) ballon beweegt. */
.veld-tooltip.tt-onder::before {
    content: ''; position: absolute; left: 0; right: 0; bottom: 100%; height: 9px;
}
.veld-tooltip.tt-breed {
    max-width: min(640px, calc(100vw - 40px));
    white-space: pre-line; font-size: 12.5px; line-height: 1.5;
    padding: 10px 13px; max-height: 65vh; overflow-y: auto;
}

/* Tijdelijk volgnummer naast een i-icoon, zodat er een lijst van alle
   hover-teksten gemaakt kan worden. Eén plek om later in één keer te verbergen:
   zet .veld-nr op display:none (of verwijder de macro-parameter). */
.veld-nr {
    /* Tijdelijke nummers staan UIT. Zet display op inline-flex om ze weer
       allemaal tegelijk te tonen (de nummers staan nog in de templates). */
    display: none;
    align-items: center; justify-content: center;
    min-width: 15px; height: 15px; padding: 0 3px; margin: 0 1px; box-sizing: border-box;
    background: var(--kleur-primair); color: #fff;
    font-size: 9px; font-weight: 700; font-style: normal; line-height: 1;
    border-radius: 8px; vertical-align: middle; flex-shrink: 0;
}
/* Losse i-info buiten een .veld-hulp-cluster (bv. naast een label): iets ruimte
   en op de basislijn meelopen met de labeltekst. */
.veld-info-inline { display: inline-flex; align-items: center; gap: 3px; margin-left: 5px; vertical-align: middle; }