/* ============================================================
   SVM Watchtower — huisstijl-tokens
   Pas deze zes variabelen aan op de exacte kleuren van svm.nl,
   de rest van de interface volgt automatisch.
   ============================================================ */
:root {
    --inkt: #1c2b36;         /* koppen, primaire tekst (donker) */
    --inkt-zacht: #5a6b76;   /* secundaire tekst */
    --accent: #0f6fb8;       /* SVM merkkleur: knoppen, links, actief */
    --accent-d: #0b568f;     /* hover-variant van de merkkleur */
    --papier: #f5f7f8;       /* paginaachtergrond */
    --kaart: #ffffff;        /* kaarten en tabellen */

    /* Statuskleuren (vast) */
    --groen: #2e8b57;
    --geel: #f2c94c;
    --geel-d: #b8860b;
    --oranje: #e07b39;
    --rood: #c0392b;

    --lijn: #dfe5e8;
    --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    --sans: ui-sans-serif, system-ui, "Segoe UI", Roboto, sans-serif;
}

* { box-sizing: border-box; }
body { margin: 0; font-family: var(--sans); background: var(--papier); color: var(--inkt); font-size: 15px; line-height: 1.55; }

/* Topbar. .topbar-app (index.php/SPA) is een grid: op mobiel 3 rijen
   (logo+acties / nav / zoekbalk), op desktop (>=900px) 1 rij (logo, nav,
   zoekbalk, acties naast elkaar). beveiliging.php gebruikt de kale .topbar
   met de oudere .topbar-right-opbouw eronder, die staat er bewust nog voor
   die pagina en wordt door .topbar-app niet geraakt. */
.topbar { display: flex; flex-direction: column; gap: 10px; background: var(--kaart); border-bottom: 1px solid var(--lijn); padding: 12px 24px; position: sticky; top: 0; z-index: 10; }
.brand { font-size: 19px; }
.brand .mono { font-family: var(--mono); font-weight: 700; color: var(--inkt); }
.brand .sub { color: var(--accent); margin-left: 4px; font-weight: 300; font-style: italic; }
.brand-lg { font-size: 26px; margin-bottom: 8px; }
.topbar-acties { display: flex; align-items: center; gap: 8px; }
.topbar nav { display: flex; gap: 4px; flex-wrap: wrap; }
.topbar nav a { color: var(--inkt-zacht); text-decoration: none; padding: 7px 14px; border-radius: 6px; font-weight: 600; font-size: 14px; }
.topbar nav a:hover { background: var(--papier); }
.topbar nav a.active { background: var(--inkt); color: #fff; }
.topbar-right { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.topbar-right .user { color: var(--inkt-zacht); font-size: 14px; }

.topbar-app {
    display: grid;
    align-items: center;
    gap: 8px 12px;
    grid-template-columns: 1fr auto;
    grid-template-areas: "brand acties" "nav nav" "zoek zoek";
    background: var(--kaart); border-bottom: 1px solid var(--lijn); padding: 10px 14px; position: sticky; top: 0; z-index: 10;
}
.topbar-app .brand { grid-area: brand; }
.topbar-app .topbar-acties { grid-area: acties; }
.topbar-app .zoekbalk { grid-area: zoek; }
.topbar-app nav#hoofdnav {
    grid-area: nav;
    display: flex; flex-wrap: nowrap; gap: 2px;
    overflow-x: auto; -ms-overflow-style: none; scrollbar-width: none;
}
.topbar-app nav#hoofdnav::-webkit-scrollbar { display: none; }
.topbar-app nav#hoofdnav a { padding: 6px 9px; font-size: 13px; white-space: nowrap; }

@media (min-width: 900px) {
    .topbar-app {
        /* De nav krijgt zijn eigen breedte (auto) en de zoekbalk vangt de rest
           op. Stond de acties-kolom op 1fr, dan werd de nav samengeknepen en
           vielen de laatste menu-items buiten beeld. */
        grid-template-columns: auto auto minmax(150px, 1fr) auto;
        grid-template-areas: "brand nav zoek acties";
        gap: 16px;
        padding: 12px 24px;
    }
    .topbar-app .zoekbalk { justify-self: start; width: 100%; }
    .topbar-app .topbar-acties { justify-self: end; }
    .topbar-app nav#hoofdnav a { padding: 7px 14px; font-size: 14px; }
}

/* Account-dropdown: bundelt Beveiliging/Wachtwoord/Uitloggen achter één knop
   in plaats van drie losse knoppen naast elkaar. */
.dropdown { position: relative; }
.dropdown-warn { color: var(--rood); margin-left: 2px; }
.dropdown-menu { position: absolute; top: calc(100% + 4px); right: 0; min-width: 190px; background: var(--kaart);
    border: 1px solid var(--lijn); border-radius: 8px; box-shadow: 0 8px 24px rgba(28,43,54,.14); z-index: 20; overflow: hidden; }
.dropdown-item { display: block; width: 100%; text-align: left; padding: 10px 14px; border: none; background: none;
    cursor: pointer; font: inherit; font-size: 14px; color: var(--inkt); text-decoration: none; border-bottom: 1px solid var(--lijn); box-sizing: border-box; }
.dropdown-item:last-child { border-bottom: none; }
.dropdown-item:hover { background: var(--papier); }
.dropdown-item-danger { color: var(--rood); font-weight: 600; }

@media (min-width: 900px) {
    .zoekbalk { max-width: 520px; }
    .zoekbalk input { padding: 11px 16px; font-size: 15px; border-radius: 10px; }
}

#app { max-width: 1220px; margin: 0 auto; padding: 28px 24px 64px; }
.laden { color: var(--inkt-zacht); padding: 40px; text-align: center; }

h1 { font-size: 24px; margin: 0 0 14px; font-weight: 650; }
h2 { font-size: 16px; margin: 26px 0 10px; }
a { color: var(--accent-d); }
code { font-family: var(--mono); font-size: 13px; background: #e9eef1; padding: 1px 5px; border-radius: 3px; }

/* Statusstippen: het hart van de meldkamer */
.dot { display: inline-block; width: 14px; height: 14px; border-radius: 50%; vertical-align: middle; }
.dot-groen    { background: var(--groen); }
.dot-geel     { background: var(--geel); border: 1px solid var(--geel-d); }
.dot-oranje   { background: var(--oranje); }
.dot-rood     { background: var(--rood); box-shadow: 0 0 0 4px rgba(192,57,43,.15); }
.dot-onbekend { background: #b9c4ca; }

/* Cards en stats */
.cards { display: flex; gap: 14px; flex-wrap: wrap; margin: 8px 0; }
.card { background: var(--kaart); border: 1px solid var(--lijn); border-radius: 8px; padding: 18px; margin-bottom: 14px; }
.stat { min-width: 140px; margin-bottom: 0; }
.stat-n { display: block; font-size: 24px; font-weight: 700; font-family: var(--mono); }
.stat-l { font-size: 13px; color: var(--inkt-zacht); }
.stat-rood   { border-left: 4px solid var(--rood); }
.stat-oranje { border-left: 4px solid var(--oranje); }
.stat-geel   { border-left: 4px solid var(--geel); }
.stat-groen  { border-left: 4px solid var(--groen); }
.cols { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }

/* Tabellen */
.table { width: 100%; border-collapse: collapse; background: var(--kaart); border: 1px solid var(--lijn); border-radius: 8px; overflow: hidden; margin-bottom: 12px; }
.table th { text-align: left; font-size: 12px; text-transform: uppercase; letter-spacing: .05em; color: var(--inkt-zacht); padding: 10px 12px; border-bottom: 1px solid var(--lijn); background: #fafbfb; }
.table td { padding: 9px 12px; border-bottom: 1px solid var(--lijn); vertical-align: top; }
.table tr:last-child td { border-bottom: none; }
.rij-rood td { background: #fdf3f2; }
.empty { color: var(--inkt-zacht); text-align: center; padding: 24px; }
.nowrap { white-space: nowrap; }
.mono-cel { font-family: var(--mono); font-size: 13px; }

/* Pills, tiers, chips */
.pill { display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: 12px; font-weight: 600; white-space: nowrap; }
.pill-info   { background: #e8edf0; color: var(--inkt-zacht); }
.pill-geel   { background: #faf0d3; color: var(--geel-d); }
.pill-oranje { background: #f9e5d6; color: #a35722; }
.pill-rood   { background: #f6dcd8; color: var(--rood); }
.pill-groen  { background: #ddeee4; color: var(--groen); }

.tier { display: inline-block; padding: 2px 9px; border-radius: 5px; font-size: 11.5px; font-weight: 700; letter-spacing: .03em; }
.tier-plus  { background: var(--inkt); color: #fff; }
.tier-basis { background: #e8edf0; color: var(--inkt-zacht); }

.chip { display: inline-block; padding: 1px 8px; border-radius: 4px; font-size: 11.5px; font-weight: 600; margin-right: 3px; border: 1px solid var(--lijn); }
.chip-aan { background: #ddeee4; color: var(--groen); border-color: #c4dfd0; }
.chip-uit { background: #f2f4f5; color: #9aa7ae; text-decoration: line-through; }

/* Tabs op de sitepagina */
.tabs { display: flex; gap: 2px; border-bottom: 2px solid var(--lijn); margin: 18px 0 20px; flex-wrap: wrap; }
.tab { padding: 8px 16px; text-decoration: none; color: var(--inkt-zacht); font-weight: 600; font-size: 14px; border-bottom: 2px solid transparent; margin-bottom: -2px; }
.tab:hover { color: var(--inkt); }
.tab.active { color: var(--accent-d); border-bottom-color: var(--accent); }

/* Formulieren en knoppen */
label { display: block; margin: 12px 0; font-size: 14px; font-weight: 600; }
input, select, textarea { display: block; width: 100%; margin-top: 5px; padding: 8px 11px; border: 1px solid var(--lijn); border-radius: 6px; font: inherit; font-weight: 400; background: #fff; }
input:focus, select:focus, textarea:focus, button:focus-visible, a:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

.btn { display: inline-block; padding: 8px 16px; border: 1px solid var(--lijn); border-radius: 6px; background: #fff; color: var(--inkt); font: inherit; font-weight: 600; cursor: pointer; text-decoration: none; font-size: 14px; }
.btn:hover { border-color: var(--inkt-zacht); }
.btn-primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn-primary:hover { background: var(--accent-d); }
.btn-danger { border-color: var(--rood); color: var(--rood); }
.btn-sm { padding: 4px 10px; font-size: 13px; }
.btn-full { width: 100%; margin-top: 8px; }
.link-danger { background: none; border: none; color: var(--rood); cursor: pointer; font-size: 12px; }

.actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.page-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; flex-wrap: wrap; }
.hint { color: var(--inkt-zacht); font-size: 13px; }

/* Flash en toasts */
.flash { padding: 11px 14px; border-radius: 6px; margin-bottom: 14px; font-size: 14px; }
.flash-ok { background: #ddeee4; color: var(--groen); }
.flash-error { background: #f6dcd8; color: var(--rood); }
#toasts { position: fixed; bottom: 20px; right: 20px; z-index: 100; display: flex; flex-direction: column; gap: 8px; }
.toast { padding: 11px 16px; border-radius: 8px; font-size: 14px; font-weight: 600; box-shadow: 0 4px 16px rgba(28,43,54,.18); background: var(--inkt); color: #fff; max-width: 380px; }
.toast-error { background: var(--rood); }

/* Log en scans */
.log { list-style: none; padding: 0; background: var(--kaart); border: 1px solid var(--lijn); border-radius: 8px; }
.log li { padding: 7px 14px; border-bottom: 1px solid var(--lijn); font-size: 13.5px; }
.log li:last-child { border-bottom: none; }
.log-time { font-family: var(--mono); font-size: 12px; color: var(--inkt-zacht); margin-right: 10px; }
.log-fout { background: #fdf3f2; }
.log-waarschuwing { background: #fdf8ec; }
.scan-kop { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.bevindingen { list-style: none; padding: 0; margin: 0; }
.bevindingen li { padding: 6px 0; border-top: 1px solid var(--lijn); }
.notes { list-style: none; padding: 0; }
.notes li { background: var(--kaart); border: 1px solid var(--lijn); border-radius: 6px; padding: 8px 12px; margin-bottom: 6px; font-size: 14px; }

/* Modal en login */
.modal-achtergrond { position: fixed; inset: 0; background: rgba(28,43,54,.45); display: grid; place-items: center; z-index: 50; }
.modal { background: var(--kaart); border-radius: 10px; padding: 24px; width: 400px; max-width: 92vw; }
.login-body { display: grid; place-items: center; min-height: 100vh; background: var(--inkt); }
.login-card { background: var(--kaart); border-radius: 10px; padding: 32px; width: 360px; }

/* Rapportpagina */
.rapport { max-width: 900px; margin: 0 auto; }
.rapport-merk { font-size: 14px; color: var(--inkt-zacht); letter-spacing: .04em; text-transform: uppercase; }
.rapport-merk .mono { font-family: var(--mono); font-weight: 700; color: var(--accent-d); }
.rapport-sub { color: var(--inkt-zacht); font-size: 16px; margin-top: -6px; }
.rapport-grid { display: grid; grid-template-columns: 1fr 2fr; gap: 14px; align-items: stretch; }
.rapport-grid .card { margin-bottom: 14px; }
.rapport-score { text-align: center; }
.kort-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.kort-grid .stat-n { font-size: 22px; }
.rapport-voet { color: var(--inkt-zacht); font-size: 12.5px; text-align: center; margin-top: 20px; border-top: 1px solid var(--lijn); padding-top: 14px; }

@media print {
    .topbar, .no-print, #toasts { display: none !important; }
    body { background: #fff; }
    #app { padding: 0; }
    .card { break-inside: avoid; border-color: #ccc; }
}

@media (max-width: 900px) {
    .topbar { flex-wrap: wrap; gap: 10px; padding: 10px 14px; }
    .topbar-right { margin-left: 0; }
    #app { padding: 18px 14px 48px; }
    .cols, .rapport-grid { grid-template-columns: 1fr; }
    .kort-grid { grid-template-columns: repeat(2, 1fr); }
    .table { display: block; overflow-x: auto; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }

/* Gegroepeerde meldingen op de meldkamer */
.meldgroep { background: var(--kaart); border: 1px solid var(--lijn); border-radius: 8px; margin-bottom: 8px; }
.meldgroep summary { display: flex; align-items: center; gap: 10px; padding: 11px 14px; cursor: pointer; list-style: none; font-size: 14.5px; }
.meldgroep summary::-webkit-details-marker { display: none; }
.meldgroep summary::before { content: "\25B8"; color: var(--inkt-zacht); transition: transform .12s; }
.meldgroep[open] summary::before { transform: rotate(90deg); }
.meldgroep-telling { display: flex; gap: 6px; margin-left: auto; }
.meldgroep summary .btn { margin-left: 8px; }
.meldgroep-tabel { border: none; border-top: 1px solid var(--lijn); border-radius: 0; margin-bottom: 0; }
.chip-half { background: #faf0d3; color: var(--geel-d); border-color: #ecd9a0; }

/* Snelkoppelingen naar site en beheerdashboard */
.icon-link { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 5px; color: var(--inkt-zacht); text-decoration: none; vertical-align: middle; }
.icon-link:hover { background: var(--papier); color: var(--accent-d); }

/* Handmatige ververs-knop in de topbar: vervangt de automatische polling. */
.icon-btn { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 6px; border: 1px solid var(--lijn); background: #fff; color: var(--inkt-zacht); cursor: pointer; }
.icon-btn:hover { background: var(--papier); color: var(--accent-d); }
.icon-btn.spin svg { animation: svm-spin 0.8s linear infinite; }
@keyframes svm-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

/* Alarmchip: actief probleem gedetecteerd door een externe scanner */
.chip-alarm { background: #f6dcd8; color: var(--rood); border-color: #e8bdb6; font-weight: 700; }

/* Zoekbalk in de topbar: overal snel naar een site kunnen springen */
.zoekbalk { position: relative; width: 100%; }
.zoekbalk input { margin-top: 0; padding: 9px 12px; font-size: 14px; width: 100%; box-sizing: border-box; }
.zoek-dropdown { position: absolute; top: calc(100% + 4px); left: 0; right: 0; background: var(--kaart);
    border: 1px solid var(--lijn); border-radius: 8px; box-shadow: 0 8px 24px rgba(28,43,54,.14);
    z-index: 20; max-height: 320px; overflow-y: auto; }
.zoek-item { display: block; width: 100%; text-align: left; padding: 9px 12px; border: none; background: none;
    cursor: pointer; font: inherit; font-size: 14px; color: var(--inkt); border-bottom: 1px solid var(--lijn); }
.zoek-item:last-child { border-bottom: none; }
.zoek-item:hover, .zoek-item.actief { background: var(--papier); }
.zoek-leeg { padding: 10px 12px; color: var(--inkt-zacht); font-size: 13px; }

/* Klikbare statuskaarten op de Meldkamer: zelfde look als .card.stat, maar
   dan aanklikbaar. De sitelijst voor de aangeklikte status verschijnt niet
   ín de kaart zelf (die blijft smal, dus dan wordt de tekst een onleesbare
   kolom) maar in een apart paneel over de volle breedte eronder. */
.stat-cards { display: flex; gap: 14px; flex-wrap: wrap; margin: 8px 0; }
.stat-card { background: var(--kaart); border: 1px solid var(--lijn); border-radius: 8px; min-width: 150px; flex: 1 1 150px;
    padding: 18px; display: flex; align-items: baseline; justify-content: space-between; gap: 8px;
    cursor: pointer; font: inherit; text-align: left; color: inherit; }
.stat-card::after { content: "\25B8"; color: var(--inkt-zacht); font-size: 13px; transition: transform .12s; }
.stat-card.actief::after { transform: rotate(90deg); }
.stat-card.actief { box-shadow: inset 0 0 0 2px var(--inkt-zacht); }
.stat-card-rood   { border-left: 4px solid var(--rood); }
.stat-card-oranje { border-left: 4px solid var(--oranje); }
.stat-card-geel   { border-left: 4px solid var(--geel); }
.stat-card-groen  { border-left: 4px solid var(--groen); }
.stat-paneel .table { margin-bottom: 0; }

/* Los tellerblokje "Open meldingen", linkt door naar een eigen pagina */
.teller-link { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.teller-link .stat-n { font-size: 22px; }

/* Filterrij: zoeken + knoppen naast elkaar, ook op smalle schermen leesbaar */
.filter-rij { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin: 10px 0; }
.filter-rij input[type="search"] { margin-top: 0; width: auto; min-width: 220px; }
.filter-rij select { margin-top: 0; width: auto; display: inline-block; }
/* ============================================================
   SVM CRM — aanvullingen op de Watchtower-huisstijl
   Zelfde tokens, zelfde componenten; hieronder alleen wat deze
   tool extra nodig heeft (kolommen, grafieken, bedragen, tijdlijn).
   ============================================================ */

/* Kolommen */
.cols-2-1 { grid-template-columns: 2fr 1fr; }
.cols-1-1 { grid-template-columns: 1fr 1fr; }
@media (max-width: 900px) {
    .cols-2-1, .cols-1-1 { grid-template-columns: 1fr; }
}

/* Kaartkop met een titel links en een link rechts */
.kaart-kop { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 6px; }
.kaart-kop h2 { margin: 0 0 6px; }
.kaart-kop .hint { white-space: nowrap; }

/* Statkaarten: nummer groot, label eronder, plus een subregel */
.cards .stat { flex: 1 1 180px; min-width: 170px; }
.stat-sub { display: block; font-size: 12px; color: var(--inkt-zacht); margin-top: 3px; }
.stat-n { line-height: 1.25; }

/* Uitlijning en bedragen */
.rechts { text-align: right; }
.links  { text-align: left; }
.bedrag { font-variant-numeric: tabular-nums; }
.bedrag-min  { color: var(--rood); font-weight: 600; }
.bedrag-plus { color: var(--groen); font-weight: 600; }
.table td.rechts, .table th.rechts { font-variant-numeric: tabular-nums; }

/* Tabelvarianten */
.table-plat { border: none; }
.table-plat td { border-bottom: 1px solid var(--lijn); padding: 7px 0; }
.table-plat tr:last-child td { border-bottom: none; }
.table tfoot td, .rij-totaal td { font-weight: 700; background: #fafbfb; border-top: 2px solid var(--lijn); }
.table-klik tbody tr { cursor: pointer; }
.table-klik tbody tr:hover { background: var(--papier); }
.rij-aandacht td { background: #fffaf2; }
.rij-lopend td   { background: #f7fbff; }
.rij-uit td      { color: var(--inkt-zacht); }
.sorteerbaar { cursor: pointer; user-select: none; white-space: nowrap; }
.sorteerbaar:hover { color: var(--inkt); }
.table td > span.hint { display: block; font-size: 12px; }
.table td.hint, .table th.hint { display: table-cell; }
.table td .pill { margin-left: 4px; }

/* Grafieken: vaste hoogte zodat de pagina niet springt tijdens het laden */
.grafiek { position: relative; width: 100%; }
.grafiek canvas { max-width: 100%; }

/* Knoppen en filters */
.knoppen-groep { display: flex; gap: 4px; flex-wrap: wrap; }
.actions-balk { margin: 4px 0 16px; }
.btn-extern { display: inline-flex; align-items: center; gap: 5px; }
label.inline { display: inline-flex; align-items: center; gap: 8px; margin: 0; }
label.inline select { margin-top: 0; width: auto; }

/* Formulieren in modals */
.veld-rij { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 600px) { .veld-rij { grid-template-columns: 1fr; } }
label.checkbox { display: flex; align-items: center; gap: 8px; font-weight: 500; }
label.checkbox input { width: auto; margin: 0; }
.modal-breed { width: 700px; }
.modal-inhoud { max-height: 65vh; overflow-y: auto; }
.modal-acties { margin-top: 16px; }
.modal input[disabled] { background: var(--papier); color: var(--inkt-zacht); }

/* Meldingsbalk met een zachtere toon dan een fout */
.flash-let-op { background: #fdf8ec; color: #8a6d1f; border-left: 4px solid var(--geel); }

/* Contactmomenten als tijdlijn */
.tijdlijn { list-style: none; padding: 0; margin: 0; }
.tijdlijn li { background: var(--kaart); border: 1px solid var(--lijn); border-left: 3px solid var(--accent);
    border-radius: 6px; padding: 10px 14px; margin-bottom: 8px; }
.tijdlijn-kop { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--inkt-zacht); }
.tijdlijn-kop .link-danger { margin-left: auto; }
.tijdlijn-titel { font-weight: 600; margin-top: 3px; }
.tijdlijn-notitie { font-size: 14px; margin-top: 4px; white-space: pre-wrap; }
.notitie { background: var(--papier); border-radius: 6px; padding: 10px 12px; font-size: 14px; white-space: pre-wrap; }

/* Zoekresultaten */
.zoek-sub { color: var(--inkt-zacht); font-size: 12px; margin-left: 6px; }

/* Login: knop voor de noodcode wat rustiger */
.login-noodcode { margin-top: 10px; }
.login-noodcode .btn { font-size: 12.5px; color: var(--inkt-zacht); }

/* Mobiel: tabellen mogen scrollen, kaarten onder elkaar */
@media (max-width: 700px) {
    .cards .stat { flex: 1 1 100%; }
    .kaart-kop { flex-wrap: wrap; }
}