/* Loo-archief v3.0.0 — stylesheet */
:root {
    --bg: #f7f5f2;
    --card: #ffffff;
    --ink: #2b2620;
    --ink-light: #6b6459;
    --border: #e3ddd2;
    --accent: #6b4f3b;
    --accent-dark: #4d3a2b;
    --openbaar: #4a7c59;
    --gevoelig: #c0392b;
    --avg: #2563eb;
    --avg-bijzonder: #7c3aed;
    --danger: #a3283d;
    --procesindicatie: #b8860b;
    --procesindicatie-vraag: #0f766e;
    --teruggestuurd: #f2c200;
    --tng-aanpassen: #7cc47f;
    --avg-levend: #be185d;
    --radius: 8px;
}
* { box-sizing: border-box; }
body {
    margin: 0;
    font-family: "Segoe UI", Arial, Helvetica, sans-serif;
    background: var(--bg);
    color: var(--ink);
    line-height: 1.5;
}
a { color: var(--accent-dark); }
a:hover { color: var(--accent); }

.topbar {
    background: var(--accent-dark);
    color: #fff;
}
.topbar-inner {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0.75rem 4.5rem 0.75rem 1.25rem;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
    position: relative;
}
.logo { font-size: 1.25rem; font-weight: 700; color: #fff; text-decoration: none; }
.topnav { display: flex; gap: 1rem; align-items: center; flex-wrap: wrap; font-size: 0.95rem; }
.topnav a { color: #f0e9df; text-decoration: none; }
.topnav a:hover { text-decoration: underline; }
.topnav-menu-knop {
    background: #fff;
    color: var(--accent-dark) !important;
    font-weight: 700;
    font-size: 1.15rem;
    padding: 0.3rem 0.9rem;
    border-radius: 6px;
    text-decoration: none !important;
}
.topnav-menu-knop:hover { background: #f0e9df; }
.topnav-user { margin-left: auto; color: #cfc4b4; font-size: 0.85rem; }
.topnav-user a { color: #f0e9df; }
.topbar-wapen { position: absolute; top: 0.75rem; right: 1.25rem; }
.topbar-test { background: #1e4d6b; }
.topbar-testlabel {
    background: #fff;
    color: #1e4d6b;
    font-weight: 700;
    font-size: 0.75rem;
    letter-spacing: 0.05em;
    padding: 0.15rem 0.5rem;
    border-radius: 4px;
}

.content {
    max-width: 1100px;
    margin: 0 auto;
    padding: 1.5rem 1.25rem 3rem;
}

/* Schermen met een brede tabel, zoals Gebruikers: daar passen de
   actieknoppen niet binnen 1100 pixels. De topbalk blijft op de gewone
   breedte, zodat de kop van de applicatie niet meeverspringt. */
.content-breed { max-width: 1400px; }

.card {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1.25rem;
    margin-bottom: 1.25rem;
}
.menu-tegels {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-top: 1.5rem;
    max-width: 800px;
}
.menu-tegel {
    display: grid;
    grid-template-columns: 220px minmax(0, 1fr);
    gap: 0.5rem 1.2rem;
    align-items: start;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1.1rem 1.25rem;
    text-decoration: none;
    color: var(--ink);
    transition: box-shadow 0.15s, border-color 0.15s;
}
.menu-tegel:hover {
    border-color: var(--accent);
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}
.menu-tegel-titel { font-size: 1.1rem; font-weight: 700; color: var(--accent-dark); text-align: right; padding-top: 0.1rem; }
.menu-tegel-omschrijving { font-size: 0.92rem; color: #6b6257; }
ul.menu-tegel-omschrijving { margin: 0; padding-left: 1.1rem; }
ul.menu-tegel-omschrijving li { margin-bottom: 0.2rem; }
@media (max-width: 640px) {
    .menu-tegel { grid-template-columns: 1fr; }
    .menu-tegel-titel { text-align: left; padding-top: 0; }
}

h1 { font-size: 1.5rem; margin-top: 0; }
h2 { font-size: 1.15rem; }

.breadcrumbs { font-size: 0.9rem; color: var(--ink-light); margin-bottom: 1rem; }
.breadcrumbs a { text-decoration: none; }
.breadcrumbs span.sep { margin: 0 0.35rem; }

table.lijst { width: 100%; border-collapse: collapse; }
table.lijst th, table.lijst td {
    text-align: left; padding: 0.55rem 0.6rem; border-bottom: 1px solid var(--border);
    vertical-align: top; font-size: 0.94rem;
}
table.lijst th { color: var(--ink-light); font-weight: 600; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.03em; }
table.lijst tr:hover { background: #faf7f2; }
.rubriek-row { background: #f2ede4; font-weight: 600; }

.badge {
    display: inline-block; padding: 0.1rem 0.5rem; border-radius: 999px;
    font-size: 0.72rem; font-weight: 600; color: #fff; white-space: nowrap;
}
.badge-gevoelig { background: var(--gevoelig); }
.badge-avg-persoonsgegevens { background: var(--avg); }
.badge-avg-bijzonder { background: var(--avg-bijzonder); }
.badge-controleren { background: var(--procesindicatie); }
.badge-vraag { background: var(--procesindicatie-vraag); }
/* Geel met donkere tekst: wit zou op deze achtergrond onleesbaar zijn. */
.badge-teruggestuurd { background: var(--teruggestuurd); color: var(--ink); }
/* Groen met donkere tekst, net als de gele badge: op deze lichte tinten is
   wit niet te lezen. */
.badge-tng { background: var(--tng-aanpassen); color: var(--ink); }
.badge-avg-levend { background: var(--avg-levend); }

.pill { display: inline-block; padding: 0.05rem 0.5rem; border-radius: 4px; background: #eee; font-size: 0.78rem; color: var(--ink-light); }

/* Status op het gebruikersscherm. De kleur zit op de status en niet op de
   knop: de status beschrijft een toestand, een knop beschrijft wat er
   gebeurt als je erop klikt. Donkere tekst, want wit is op deze lichte
   tinten slecht leesbaar. */
.pill-actief   { background: var(--tng-aanpassen); color: var(--ink); }
.pill-inactief { background: var(--teruggestuurd); color: var(--ink); }

/* Actieknoppen op het gebruikersscherm: allemaal even breed, zodat ze per
   rij uitlijnen. De breedte is die van de langste tekst ("Deactiveren").
   btn-actie-leeg houdt de plek open waar een knop ontbreekt - bij je eigen
   account, of bij een gebruiker die niet te verwijderen is - zodat de
   kolommen niet verspringen. */
.btn-row-acties { flex-wrap: nowrap; align-items: flex-start; }
.btn-actie { min-width: 7.5rem; text-align: center; padding: 0.3rem 0.5rem; font-size: 0.85rem; }
.btn-actie-leeg { display: inline-block; min-width: 7.5rem; }

form.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
form.form-grid .full { grid-column: 1 / -1; }

/* Labels links, velden rechts, allemaal recht onder elkaar uitgelijnd
   (zoals in de oorspronkelijke Access-toepassing). */
.form-labeled { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 0.7rem 1.2rem; align-items: start; max-width: 800px; }
/* Het boekformulier is breder: de vier vakken eronder staan twee aan twee
   naast elkaar, en met 800 pixels worden de datumvelden daarin te nauw. */
.form-labeled.form-breed { max-width: 1000px; }
.form-labeled > label { text-align: right; padding-top: 0.5rem; font-weight: 600; }
.form-labeled > .veldwrap { min-width: 0; }
.form-labeled input[type="text"],
.form-labeled textarea,
.form-labeled select { width: 100%; box-sizing: border-box; }
.form-labeled textarea#beschrijving { font-size: 1.1rem; font-weight: 700; }

/* Vakken met bij elkaar horende velden, op het boekformulier. Ze staan
   onder de invoervelden en in dezelfde kolom, dus niet onder de prompts:
   daardoor zijn de vier vakken samen even breed als de invoervelden
   erboven. Twee aan twee naast elkaar, allemaal even breed. */
.form-labeled .veldgroepen {
    grid-column: 2 / -1;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.7rem;
    margin-top: 0.3rem;
}
.form-labeled fieldset.veldgroep {
    margin: 0;
    border: 1px solid var(--rand, #ded7c9);
    border-radius: 6px;
    padding: 0.2rem 0.8rem 0.7rem;
}
.form-labeled fieldset.veldgroep legend { padding: 0 0.4rem; font-weight: 600; font-size: 0.88rem; }

/* Binnen een vak: prompt boven het veld, links uitgelijnd. In de rest van
   dit formulier staan de prompts juist rechts naast de velden. */
.form-labeled fieldset.veldgroep .veldgroep-rij { display: grid; gap: 0.6rem; align-items: end; }
.form-labeled fieldset.veldgroep label {
    display: block; text-align: left; padding: 0 0 0.15rem;
    font-weight: 600; font-size: 0.85rem;
}
.form-labeled fieldset.veldgroep input,
.form-labeled fieldset.veldgroep select { width: 100%; box-sizing: border-box; }

/* Een vak is ongeveer de helft van de veldkolom breed, dus er passen niet
   overal vier velden naast elkaar. Kast en plank blijven smal en de
   afwijkende locatie krijgt de rest; de overige vakken zetten hun velden
   twee aan twee. */
.locatie-rij    { grid-template-columns: 4rem 4rem minmax(0, 1fr); }
.waardering-rij { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.bewaren-rij    { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.afvoeren-rij   { grid-template-columns: repeat(2, minmax(0, 1fr)); }

@media (max-width: 900px) {
    .form-labeled .veldgroepen { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
    .locatie-rij, .waardering-rij, .bewaren-rij, .afvoeren-rij { grid-template-columns: 1fr; }
}
}
.form-labeled .veldwrap-omschrijving { font-size: 1.1rem; font-weight: 700; }
.form-labeled .spanning { grid-column: 1 / -1; }
.form-labeled fieldset.classificatie-groep {
    grid-column: 1 / -1;
    border: 1px solid #c9bfae;
    border-radius: 6px;
    padding: 0.9rem 1.1rem 1.1rem;
    margin: 0;
    min-width: 0;
}
.form-labeled fieldset.classificatie-groep legend {
    font-weight: 700;
    color: var(--accent-dark);
    padding: 0 0.4rem;
}
.form-labeled fieldset.classificatie-groep .classificatie-grid {
    display: grid;
    grid-template-columns: 220px minmax(0, 1fr);
    gap: 0.7rem 1.2rem;
    align-items: start;
}
.form-labeled fieldset.classificatie-groep .classificatie-grid > label { text-align: right; padding-top: 0.5rem; font-weight: 600; }
.form-labeled fieldset.classificatie-groep .classificatie-grid > .veldwrap { min-width: 0; }
@media (max-width: 640px) {
    .form-labeled { grid-template-columns: 1fr; }
    .form-labeled > label { text-align: left; padding-top: 0; }
}
form.stack { display: flex; flex-direction: column; gap: 1rem; max-width: 420px; }
label { display: block; font-weight: 600; margin-bottom: 0.3rem; font-size: 0.9rem; }
input[type=text], input[type=password], input[type=search], select, textarea {
    width: 100%; padding: 0.5rem 0.6rem; border: 1px solid var(--border); border-radius: 6px;
    font-family: inherit; font-size: 0.95rem; background: #fff; color: var(--ink);
}
textarea { min-height: 5rem; resize: vertical; }
.btn {
    display: inline-block; padding: 0.55rem 1.1rem; border-radius: 6px; border: none;
    background: var(--accent-dark); color: #fff; font-weight: 600; cursor: pointer; text-decoration: none;
    font-size: 0.92rem;
}
.btn:hover { background: var(--accent); }
.btn-secondary { background: #ece5d8; color: var(--ink); }
.btn-secondary:hover { background: #ddd3c2; }
/* Ingeschakelde schakelaar: zichtbaar aan, zonder een derde knopkleur
   te introduceren. Gebruikt op Na-controle voor "ook concepten tonen"
   en "ook te beoordelen tonen". */
.btn-secondary.btn-actief { background: #cfc3a9; border: 1px solid #b3a482; }
.btn-secondary.btn-actief:hover { background: #c2b399; }
/* Datering onder de omschrijving op de Beoordelingslijst: één kolom, maar
   de datering wat rustiger zodat de omschrijving voorop blijft staan. */
.datering-bij-omschrijving {
    display: block;
    font-size: 0.85em;
    color: var(--ink-light);
    margin-top: 0.15rem;
}

/* Voorstellen bij een gelijkende rubrieknaam, op Nieuwe invoer. */
.gelijkende-rubrieken { background: #fbf6e8; border: 1px solid #e0d6bd; border-radius: 6px;
    padding: 0.6rem 0.85rem; margin: 0.5rem 0; font-size: 0.92rem; }
.gelijkende-rubrieken p { margin: 0 0 0.4rem; }
.gelijkende-rubrieken ul { list-style: none; margin: 0 0 0.5rem; padding: 0; }
.gelijkende-rubrieken li { margin-bottom: 0.3rem; }
.gelijkende-rubrieken label { font-weight: 500; }

/* Uitklapbare archiefstukken onder een conceptrubriek, op Rubrieken beheren. */
.btn-klein { padding: 0.2rem 0.55rem; font-size: 0.82rem; }
.uitklap-teken { font-size: 0.7em; margin-right: 0.3rem; }
.uitklap-rij > td { background: #f4efe4; padding: 0.5rem 0.75rem; }
.lijst-genest { margin: 0; background: #fff; }
.lijst-genest th, .lijst-genest td { font-size: 0.9rem; }

/* Sorteerbare kolomkoppen op Na-controle. */
.lijst thead th a { color: inherit; text-decoration: none; border-bottom: 1px dotted currentColor; }
.lijst thead th a:hover { border-bottom-style: solid; }
.lijst thead th a.sorteer-actief { font-weight: 700; border-bottom: none; }
.btn-danger { background: var(--danger); }
.btn-danger:hover { background: #82182b; }
.btn-row { display: flex; gap: 0.75rem; margin-top: 0.5rem; }

.flash { padding: 0.75rem 1rem; border-radius: 6px; margin-bottom: 1rem; font-size: 0.92rem; }
.flash-ok { background: #e4f2e6; color: #2b5e35; border: 1px solid #bfe0c4; }
.flash-fout { background: #fbe6e3; color: #8a2c22; border: 1px solid #f2c2ba; }
.opmerking-banner {
    background: #fff9db;
    color: #b3261e;
    border: 2px solid #2563eb;
    border-radius: 6px;
    padding: 0.9rem 1.1rem;
    margin-bottom: 1rem;
    font-size: 0.95rem;
}
.opmerking-banner strong { color: #b3261e; font-weight: 700; }

.filters { display: flex; gap: 0.75rem; flex-wrap: wrap; margin-bottom: 1rem; align-items: end; }
.filters .veld { display: flex; flex-direction: column; gap: 0.25rem; }
.filters label { margin: 0; font-size: 0.78rem; color: var(--ink-light); }

.helptext { color: var(--ink-light); font-size: 0.85rem; margin-top: 0.25rem; }
.login-wrap { max-width: 380px; margin: 3rem auto; }
.footer { text-align: center; color: var(--ink-light); font-size: 0.8rem; padding: 2rem 0; }

.stamboom-resultaten {
    display: none; position: relative; z-index: 20; margin-top: -1px;
    border: 1px solid var(--border); border-top: none; border-radius: 0 0 6px 6px;
    background: #fff; max-height: 260px; overflow-y: auto;
    box-shadow: 0 4px 10px rgba(0,0,0,0.08);
}
.stamboom-resultaat { padding: 0.5rem 0.7rem; cursor: pointer; font-size: 0.9rem; border-bottom: 1px solid var(--border); }
.stamboom-resultaat:last-child { border-bottom: none; }
.stamboom-resultaat:hover { background: #faf7f2; }
.stamboom-resultaat-leeg { padding: 0.5rem 0.7rem; color: var(--ink-light); font-size: 0.9rem; }

@media (max-width: 700px) {
    form.form-grid { grid-template-columns: 1fr; }
}


/* --- Boeken scannen (scan.php) -----------------------------------------
   Gemaakt voor een telefoon in de hand: grote raakvlakken, weinig tekst,
   en het volgnummer groot genoeg om er een sticker mee te schrijven. */
.scan-locatie { display: flex; flex-wrap: wrap; align-items: center; gap: 0.8rem; justify-content: space-between; }
.scan-locatie-form { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 0.7rem; }
.scan-locatie-form label { display: block; font-weight: 600; font-size: 0.85rem; }
.scan-locatie-form input { width: 6rem; }
.scan-plek { font-size: 1.1rem; }
.scan-plek .helptext { display: block; }

#scanner-beeld { width: 100%; max-width: 420px; border-radius: 8px; background: #000; }

.scan-klaar { text-align: center; }
.scan-titel { font-size: 1.15rem; font-weight: 700; margin: 0 0 0.2rem; }
.scan-nummer-label { margin: 1rem 0 0; font-size: 0.85rem; color: var(--ink-light); }
.scan-nummer { font-size: 4rem; font-weight: 700; line-height: 1.1; margin: 0 0 0.6rem; }

/* Voorstellen zijn hele knoppen: op een telefoon moet je ze met een duim
   kunnen raken, niet met een muisaanwijzer. */
.scan-voorstel { margin-bottom: 0.5rem; }
.scan-voorstel-knop {
    display: block; width: 100%; text-align: left; cursor: pointer;
    background: var(--vlak, #fff); border: 1px solid var(--rand, #ded7c9);
    border-radius: 8px; padding: 0.7rem 0.9rem; font: inherit;
}
.scan-voorstel-knop:hover { background: #f4efe4; }
.scan-voorstel-titel { display: block; font-weight: 600; margin-bottom: 0.15rem; }

/* De menutegel alleen op een smal scherm: dit werkt met een telefoon voor
   een kast, niet achter een bureau. */
@media (min-width: 820px) {
    .tegel-alleen-telefoon { display: none; }
}


/* Herkende regels van een omslag: knopjes om aan te tikken, want op een
   telefoon kies je met je duim en niet met een muisaanwijzer. */
#ocr-beeld { width: 100%; max-width: 420px; border-radius: 8px; background: #000; }
.ocr-regels { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.5rem; }
.ocr-regel {
    font: inherit; font-size: 0.9rem; cursor: pointer;
    background: var(--vlak, #fff); border: 1px solid var(--rand, #ded7c9);
    border-radius: 999px; padding: 0.35rem 0.8rem;
}
.ocr-regel:hover { background: #f4efe4; }
.ocr-regel:disabled { opacity: 0.45; cursor: default; }


/* Kopbalk van één regel, voor schermen die in de hand worden gebruikt.
   De gewone kopbalk kost op een telefoon bijna een kwart van het beeld aan
   een terugknop en een regel met wie je bent; op het scanscherm gaat die
   ruimte liever naar de camera. */
.topbar-smal .topbar-inner {
    padding: 0.45rem 1rem;
    gap: 0.6rem;
    flex-wrap: nowrap;
}
.topbar-smal .logo { font-size: 1rem; white-space: nowrap; }
.topbar-smal .topbar-testlabel { font-size: 0.65rem; padding: 0 0.3rem; }
.topbar-paginanaam {
    margin-left: auto;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}