/* ============================================================
   admin.css – "Instrumentenbord"-ontwerpsysteem
   Gedeeld door admin.php, profile.php en friends.php -- bewust één
   systeem i.p.v. drie losse stijlbladen die toevallig op elkaar lijken.
   Was admin-test.css tijdens het ontwerpvoorstel (zie CLAUDE.md voor de
   herkomst/iteraties); op 2026-08-23 na goedkeuring de live vervanger
   geworden van het oude css/admin.css. Alles gescoped onder
   body.admin-test-page (naam gehandhaafd uit de ontwerpfase, geen
   functionele betekenis).
   ============================================================ */

/* browser.css (door alle drie de testpagina's meegeladen voor de
   basisstijlen/header) zet html,body op overflow:hidden -- nodig voor
   de kaart-app, die alleen binnen eigen panelen scrollt. Deze drie
   testpagina's zijn gewone content-pagina's zonder kaart en moeten dus
   gewoon als pagina kunnen scrollen. Zelfde fix als css/admin.css al
   had voor de live adminpagina; ontbrak hier alsnog. Niet gescoped
   onder .admin-test-page nodig -- dit bestand wordt sowieso alleen op
   deze drie testpagina's geladen. */
html, body { height: auto !important; overflow-y: auto !important; }

body.admin-test-page {
    /* ── Tokens: licht (kalksteen/papier + racing green + messing) ── */
    --at-paper:       #EDE7D8;
    --at-paper-2:     #F7F3E8;
    --at-paper-3:     #E3DCC7;
    --at-ink:         #2B2621;
    --at-muted:       #766C5C;
    --at-border:      #D9D0BB;
    --at-border-2:    #C9BFA6;
    --at-green:       #2F4A3C;
    --at-green-dark:  #203228;
    --at-green-light: #DCE6DC;
    --at-brass:       #A8763A;
    --at-brass-dark:  #8A5F2C;
    --at-brass-light: #F0E2C6;
    --at-rust:        #A23B28;
    --at-rust-dark:   #7E2E20;
    --at-rust-bg:     #F3E1DA;
    --at-rust-border: #DFB4A6;

    --at-font-display: 'Big Shoulders', 'Arial Narrow', sans-serif;
    --at-font-body:    'Archivo', system-ui, sans-serif;
    --at-font-mono:    'JetBrains Mono', 'Consolas', monospace;

    --at-radius:    7px;
    --at-radius-lg: 10px;
    --at-shadow:    0 1px 2px rgba(38, 32, 24, .10), 0 2px 6px rgba(38, 32, 24, .07);
    --at-shadow-lg: 0 8px 24px rgba(38, 32, 24, .16), 0 2px 8px rgba(38, 32, 24, .10);

    background: var(--at-paper);
    color: var(--at-ink);
    font-family: var(--at-font-body);
}

/* ── Donker: grafiet met een groene ondertoon (werkplaats bij nacht) ── */
body.admin-test-page.dark {
    --at-paper:       #1A1E1B;
    --at-paper-2:     #232823;
    --at-paper-3:     #2C322B;
    --at-ink:         #EAE4D4;
    --at-muted:       #97927F;
    --at-border:      #3A4038;
    --at-border-2:    #3A4038;
    --at-green:       #6FA283;
    --at-green-dark:  #588268;
    --at-green-light: #26352C;
    --at-brass:       #D8A85B;
    --at-brass-dark:  #B8863B;
    --at-brass-light: #3A311F;
    --at-rust:        #DB8570;
    --at-rust-dark:   #C4735F;
    --at-rust-bg:     #3A241E;
    --at-rust-border: #5C382D;
    --at-shadow:    0 1px 2px rgba(0, 0, 0, .35), 0 2px 6px rgba(0, 0, 0, .25);
    --at-shadow-lg: 0 8px 24px rgba(0, 0, 0, .45), 0 2px 8px rgba(0, 0, 0, .3);
}

body.admin-test-page * { box-sizing: border-box; }

/* ── Kop-balk (scoped override van .app-header) ── */
.admin-test-page .app-header {
    height: 60px;
    background: var(--at-paper-2);
    border-bottom: 3px solid var(--at-brass);
    color: var(--at-ink);
}
.admin-test-page .app-header .brand { color: var(--at-ink); }
.admin-test-page .app-header .brand-name {
    font-family: var(--at-font-display);
    font-weight: 700;
    letter-spacing: .01em;
    text-transform: uppercase;
    font-size: 1.0625rem;
}
.admin-test-page .btn-header {
    font-family: var(--at-font-body);
    border-radius: var(--at-radius);
    border: 1.5px solid var(--at-border);
    color: var(--at-muted);
    background: transparent;
}
.admin-test-page .btn-header:hover {
    border-color: var(--at-green);
    color: var(--at-green);
    background: var(--at-green-light);
}
.admin-test-page .btn-header.danger:hover {
    border-color: var(--at-rust);
    color: var(--at-rust);
    background: var(--at-rust-bg);
}

/* ── Wrapper & container ─────────────────────────────────────── */
.admin-test-page .admin-wrapper {
    flex: 1;
    padding: 2rem 1rem 3rem;
    display: flex;
    justify-content: center;
}
.admin-test-page .admin-container { width: 100%; max-width: none; }

.admin-test-page .admin-shell { display: flex; gap: 2rem; align-items: flex-start; }
.admin-test-page .admin-main { flex: 1; min-width: 0; }
.admin-test-page .admin-sidebar { display: none; }

@media (min-width: 900px) {
    .admin-test-page .admin-container .admin-tabbar { display: none; }
    .admin-test-page .admin-sidebar {
        display: block;
        flex: 0 0 250px;
        position: sticky;
        top: 1.5rem;
    }
}

/* ── Zijbalk: bedieningspaneel-strip ─────────────────────────── */
.admin-test-page .admin-nav { display: flex; flex-direction: column; gap: .25rem; }

.admin-test-page .admin-sidebar .admin-nav-item {
    display: flex;
    align-items: center;
    gap: .75rem;
    width: 100%;
    padding: .8125rem .9375rem;
    border: none;
    border-left: 3px solid transparent;
    border-radius: 0 var(--at-radius) var(--at-radius) 0;
    background: transparent;
    font-family: var(--at-font-body);
    font-size: .9375rem;
    font-weight: 600;
    color: var(--at-muted);
    cursor: pointer;
    text-align: left;
    transition: background .12s, color .12s, border-color .12s;
}
.admin-test-page .admin-sidebar .admin-nav-item:hover:not(.active) {
    background: var(--at-paper-2);
    color: var(--at-ink);
}
.admin-test-page .admin-sidebar .admin-nav-item.active {
    background: var(--at-paper-2);
    color: var(--at-green);
    border-left-color: var(--at-brass);
}
/* Eenkleurige lijniconen (koper) i.p.v. de vorige, veelkleurige emoji --
   bewust EEN vaste kleur, ongeacht actief/inactief: het actieve tabblad
   onderscheidt zich al via de achtergrond + linkerrand-accent hierboven,
   een meeverend icoon zou een tweede, overbodig signaal zijn. */
.admin-test-page .admin-nav-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 22px;
}
.admin-test-page .admin-nav-icon svg { stroke: var(--at-brass); }

/* ── Paginakop: gestempeld plaatje ────────────────────────────── */
.admin-test-page .admin-heading { margin-bottom: 1.75rem; }
/* Modifier i.p.v. de basisklasse: admin.php/friends.php/friend_routes.php
   delen .admin-heading met kale h1+p als kinderen (geen flex), alleen
   profile.php heeft er een knop bij en een tekst-wrapper omheen nodig. */
.admin-test-page .admin-heading.admin-heading-with-action {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
}
.admin-test-page .admin-heading h1 {
    font-family: var(--at-font-display);
    font-size: 2.25rem;
    font-weight: 800;
    letter-spacing: .01em;
    text-transform: uppercase;
    color: var(--at-ink);
    line-height: 1;
}
.admin-test-page .admin-heading p {
    font-size: .875rem;
    color: var(--at-muted);
    margin-top: .5rem;
    font-family: var(--at-font-body);
}

/* ── Tabbalk (mobiel) ─────────────────────────────────────────── */
.admin-test-page .admin-tabbar { display: flex; border-bottom: 2px solid var(--at-border); margin-bottom: 1.5rem; gap: 0; }
.admin-test-page .admin-tab {
    padding: .6875rem 1.125rem;
    border: none;
    border-bottom: 3px solid transparent;
    background: transparent;
    font-family: var(--at-font-body);
    font-size: .875rem;
    font-weight: 600;
    color: var(--at-muted);
    cursor: pointer;
    margin-bottom: -2px;
    white-space: nowrap;
}
.admin-test-page .admin-tab.active { color: var(--at-green); border-bottom-color: var(--at-brass); }
.admin-test-page .admin-tab:hover:not(.active) { color: var(--at-ink); }

.admin-test-page .admin-panel { display: none; }
.admin-test-page .admin-panel.active { display: flex; flex-direction: column; gap: 1.5rem; }

/* ── Kaart: gestempelde metalen plaat ─────────────────────────── */
.admin-test-page .admin-card {
    background: var(--at-paper-2);
    border: 1.5px solid var(--at-border);
    border-radius: var(--at-radius-lg);
    box-shadow: var(--at-shadow);
    overflow: hidden;
}
.admin-test-page .admin-card-title {
    font-family: var(--at-font-display);
    font-size: 1.0625rem;
    font-weight: 700;
    letter-spacing: .03em;
    text-transform: uppercase;
    color: var(--at-ink);
    padding: .9375rem 1.5rem;
    border-bottom: 1.5px solid var(--at-border);
    background: var(--at-paper-3);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}
.admin-test-page .admin-card-title small {
    font-family: var(--at-font-body);
    font-weight: 400;
    text-transform: none;
    letter-spacing: normal;
    color: var(--at-muted) !important;
    font-size: .8125rem !important;
}
.admin-test-page .admin-card-body { padding: 1.25rem 1.5rem; font-family: var(--at-font-body); }
.admin-test-page .admin-card-narrow { max-width: 720px; }
.admin-test-page .text-muted { color: var(--at-muted); }

/* ── Tabellen ─────────────────────────────────────────────────── */
.admin-test-page .table-wrap { overflow-x: auto; }
.admin-test-page .user-table,
.admin-test-page .per-user-table,
.admin-test-page .poi-detail-table {
    width: 100%;
    border-collapse: collapse;
    font-size: .875rem;
    font-family: var(--at-font-body);
}
.admin-test-page .user-table th,
.admin-test-page .per-user-table th,
.admin-test-page .poi-detail-table th {
    padding: .625rem .9375rem;
    text-align: left;
    font-family: var(--at-font-display);
    font-size: .75rem;
    font-weight: 700;
    color: var(--at-muted);
    text-transform: uppercase;
    letter-spacing: .07em;
    border-bottom: 2px solid var(--at-brass);
    background: var(--at-paper-3);
    white-space: nowrap;
}
.admin-test-page .user-table th.th-center,
.admin-test-page .poi-detail-table th.th-center { text-align: center; }
.admin-test-page .user-table td,
.admin-test-page .per-user-table td,
.admin-test-page .poi-detail-table td {
    padding: .8125rem .9375rem;
    border-bottom: 1px solid var(--at-border);
    vertical-align: middle;
    color: var(--at-ink);
}
.admin-test-page .user-table td.td-center,
.admin-test-page .poi-detail-table td.td-center { text-align: center; }
.admin-test-page .user-table tbody tr:last-child td,
.admin-test-page .per-user-table tbody tr:last-child td { border-bottom: none; }
.admin-test-page .user-table tbody tr:hover,
.admin-test-page .per-user-table tbody tr:hover { background: var(--at-paper-3); }
/* Bewust GEEN opacity/verzwakking voor een inactieve gebruiker: de
   Actief-schakelaar in die rij toont die status al ondubbelzinnig (stand +
   icoon + kleur) -- een extra gedimde rij bovenop dat systeem levert alleen
   maar een tweede, zwakker leesbaar signaal op. Bewust geen enkel element
   grijs of verzwakt weergegeven, geen disabled-look of transparantie
   elders in de tabel. */

.admin-test-page .user-info-name { font-weight: 700; font-size: .9375rem; }
.admin-test-page .user-info-email { font-size: .8125rem; color: var(--at-muted); margin-top: .1rem; font-family: var(--at-font-mono); }

.admin-test-page .user-self-badge {
    display: inline-block;
    font-family: var(--at-font-display);
    font-size: .625rem;
    font-weight: 700;
    padding: .1rem .4375rem;
    border-radius: 3px;
    background: var(--at-brass);
    color: #fff;
    margin-left: .375rem;
    vertical-align: middle;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.admin-test-page .date-cell {
    font-size: .8125rem;
    color: var(--at-muted);
    white-space: nowrap;
    font-family: var(--at-font-mono);
    font-variant-numeric: tabular-nums;
}

.admin-test-page .per-user-table td.num {
    text-align: right;
    color: var(--at-ink);
    font-family: var(--at-font-mono);
    font-variant-numeric: tabular-nums;
}

/* ── Tuimelschakelaar: signatuurelement ───────────────────────────
   Stand (links/rechts) + symbool (✕/✓) + kleur zijn alle drie
   aanwezig -- kleur is nooit het enige signaal. */
/* Eén centrale regel-set voor ELKE schakelaar in de tabel, ongeacht rij of
   kolom -- geen per-gebruiker/per-rij uitzonderingen mogelijk.
   Twee toestanden, twee regels:
   1. Bewerkbaar: aan/uit tonen dezelfde kleur en dezelfde volle sterkte --
      kleur is GEEN signaal meer, alleen positie (links/rechts) en icoon
      (kruisje/vinkje) geven de stand aan. Spoor en knop-kleur veranderen
      dus bewust NIET tussen .toggle-btn en .toggle-btn.on hieronder, enkel
      "left" (positie) en "content" (icoon) doen dat.
   2. Vergrendeld (:disabled): mag wél zwakker ogen, zie die regel verderop. */
.admin-test-page .toggle-btn {
    position: relative;
    width: 50px;
    height: 26px;
    padding: 0;
    border: 2px solid var(--at-brass);
    border-radius: 13px;
    background: var(--at-paper-3);
    cursor: pointer;
    color: transparent;
    font-size: 0;
    line-height: 0;
}
.admin-test-page .toggle-btn::after {
    content: '\2715';
    position: absolute;
    top: 1px;
    left: 1px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--at-ink);
    border: 1px solid var(--at-ink);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 9px;
    font-weight: 800;
    color: var(--at-paper);
    box-shadow: 0 1px 2px rgba(38, 32, 24, .35);
    transition: left .16s ease;
}
.admin-test-page .toggle-btn.on::after {
    content: '\2713';
    left: 25px;
    /* Bewust GEEN background/color/border-wijziging hier -- alleen positie
       en icoon mogen verschillen tussen aan en uit. */
}
.admin-test-page .toggle-btn:hover:not(:disabled) { filter: brightness(1.08); }
/* Vergrendeld (bv. jezelf niet kunnen deactiveren/de-admin'en) mag ZWAKKER
   ogen dan een gewone aan/uit-stand -- nadrukkelijk iets anders dan de
   aan/uit-stand zelf (die altijd evenveel gewicht moeten houden, zie de
   basisregels hierboven) en dan een hele rij van een inactieve gebruiker
   (die blijft op volle sterkte, zie .row-inactive hierboven).
   .7 bleek te subtiel om in een oogopslag te herkennen -- .5 is duidelijk
   merkbaar zonder terug te vallen op de eerder
   afgekeurde .4 (die specifiek een gekleurde knop liet verkleuren; nu de
   knop toch al kleurloos is, is een stevigere dip hier veilig). Gecombi-
   neerd met een apart slotje (.lock-badge hieronder) dat zelf NOOIT
   meedimt -- twee onafhankelijke signalen, geen van beide kleur. */
.admin-test-page .toggle-btn:disabled { cursor: not-allowed; opacity: .5; }

.admin-test-page .toggle-wrap { position: relative; display: inline-flex; line-height: 0; }
.admin-test-page .lock-badge {
    position: absolute;
    top: -7px;
    right: -7px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--at-brass);
    border: 2px solid var(--at-paper-2);
    color: var(--at-paper-2);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
    pointer-events: none;
    /* Bewust GEEN opacity hier, ook al zit de knop eronder op .5 -- het
       slotje moet juist scherp/vol blijven staan zodat het als een apart,
       bovenop-liggend signaal leest, niet als onderdeel van de demping. */
}

/* ── Statistieken: wijzerplaatjes ─────────────────────────────── */
.admin-test-page .stat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 1rem;
}
.admin-test-page .stat-card {
    position: relative;
    background: var(--at-paper-2);
    border: 1.5px solid var(--at-border);
    border-radius: var(--at-radius-lg);
    padding: 1.375rem .75rem 1.125rem;
    text-align: center;
    box-shadow: var(--at-shadow);
}
/* Klinknagels -- de details die het als een geschroefd plaatje laten lezen */
.admin-test-page .stat-card::before,
.admin-test-page .stat-card::after {
    content: '';
    position: absolute;
    top: 9px;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--at-brass);
    box-shadow: inset 0 1px 1px rgba(0,0,0,.5), 0 0 0 1px rgba(0,0,0,.12);
}
.admin-test-page .stat-card::before { left: 9px; }
.admin-test-page .stat-card::after  { right: 9px; }

.admin-test-page .stat-card-value {
    font-family: var(--at-font-mono);
    font-size: 2.25rem;
    font-weight: 600;
    color: var(--at-brass-dark);
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
}
body.admin-test-page.dark .stat-card-value { color: var(--at-brass); }
.admin-test-page .stat-card-label {
    font-family: var(--at-font-display);
    font-size: .75rem;
    font-weight: 700;
    color: var(--at-muted);
    text-transform: uppercase;
    letter-spacing: .06em;
    margin-top: .4375rem;
}

.admin-test-page .backfill-status { font-size: .8125rem; font-style: italic; color: var(--at-muted); margin-left: .75rem; }
.admin-test-page .backfill-status.error { color: var(--at-rust); }

/* ── POI-database ─────────────────────────────────────────────── */
.admin-test-page .poi-db-layout { display: flex; gap: 1.5rem; }
.admin-test-page .poi-db-list-card { flex: 0 0 440px; min-width: 0; }
.admin-test-page .poi-db-detail-card { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.admin-test-page .poi-db-detail-body {
    max-height: 420px;
    overflow-y: auto;
    flex: 1;
    display: flex;
    flex-direction: column;
}
.admin-test-page .poi-detail-empty {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2.5rem 1.5rem;
    text-align: center;
    color: var(--at-muted);
    font-size: .875rem;
}
@media (max-width: 899px) {
    .admin-test-page .poi-db-layout { display: block; }
    .admin-test-page .poi-db-list-card { flex: none; }
    .admin-test-page .poi-db-detail-card { display: none; }
}

.admin-test-page .poi-count-cell { position: relative; text-align: right; font-family: var(--at-font-mono); font-variant-numeric: tabular-nums; }
.admin-test-page .poi-count-value { position: relative; z-index: 1; }
.admin-test-page .poi-bar-fill {
    position: absolute;
    left: 0; top: .3rem; bottom: .3rem;
    background: var(--at-brass-light);
    border-radius: 3px;
    z-index: 0;
}
body.admin-test-page.dark .poi-bar-fill { background: color-mix(in srgb, var(--at-brass) 22%, transparent); }
.admin-test-page .poi-country-row.active .poi-bar-fill { background: color-mix(in srgb, var(--at-brass) 38%, transparent); }

.admin-test-page .poi-country-search {
    width: 100%;
    max-width: 320px;
    padding: .5rem .875rem;
    border: 1.5px solid var(--at-border);
    border-radius: var(--at-radius);
    background: var(--at-paper);
    font-family: var(--at-font-body);
    font-size: .8125rem;
    color: var(--at-ink);
    margin-bottom: .875rem;
}
.admin-test-page .poi-country-search:focus { outline: 2px solid var(--at-brass); outline-offset: 1px; border-color: var(--at-brass); }

.admin-test-page .poi-country-scroll {
    max-height: 420px;
    overflow-y: auto;
    margin-bottom: 1.25rem;
    border: 1.5px solid var(--at-border);
    border-radius: var(--at-radius);
}
.admin-test-page .poi-country-scroll .user-table th { position: sticky; top: 0; z-index: 1; }
.admin-test-page .poi-sortable { cursor: pointer; user-select: none; }
.admin-test-page .poi-sortable:hover { color: var(--at-ink); }
.admin-test-page .poi-sortable.sort-active { color: var(--at-green); }
.admin-test-page .poi-country-row { cursor: pointer; }
.admin-test-page .poi-country-row.active { background: var(--at-green-light); }
.admin-test-page .poi-country-row.active td { color: var(--at-green); font-weight: 700; }
.admin-test-page .poi-country-expand::before {
    content: '\25B8';
    display: inline-block;
    width: .875rem;
    color: var(--at-muted);
    transition: transform .12s;
}
.admin-test-page .poi-country-row.active .poi-country-expand::before { transform: rotate(90deg); color: var(--at-green); }
.admin-test-page .poi-detail-row td { padding: 0; background: var(--at-paper); }
.admin-test-page .poi-detail-row .poi-detail-table td { padding-left: 2.25rem; }
.admin-test-page .poi-detail-row .poi-detail-table td.td-center { padding-left: 1rem; }

/* .btn-poi-delete deelt nu zijn opmaak met .btn-cleanup hieronder (zelfde
   soort actie: verwijdert/ruimt data op) -- zie die regel-groep voor de
   toelichting op risicovol-vs-neutraal. */

/* ── Onderhoud ────────────────────────────────────────────────── */
.admin-test-page .orphan-rows { display: flex; flex-direction: column; gap: 0; margin-bottom: 1.25rem; }
.admin-test-page .orphan-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: .8125rem 0;
    border-bottom: 1px solid var(--at-border);
    font-size: .9375rem;
}
.admin-test-page .orphan-row:last-child { border-bottom: none; }

/* Status: icoon + label + kleur, nooit kleur alleen */
.admin-test-page .orphan-count {
    display: inline-flex;
    align-items: center;
    gap: .375rem;
    font-family: var(--at-font-mono);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    padding: .25rem .625rem;
    border-radius: 20px;
    border: 1.5px solid transparent;
}
.admin-test-page .orphan-count::before { font-family: var(--at-font-body); font-size: .875rem; }
.admin-test-page .orphan-count.zero {
    color: var(--at-green);
    background: var(--at-green-light);
    border-color: var(--at-green);
}
.admin-test-page .orphan-count.zero::before { content: '\2713'; }
.admin-test-page .orphan-count.warn {
    color: var(--at-rust);
    background: var(--at-rust-bg);
    border-color: var(--at-rust-border);
}
.admin-test-page .orphan-count.warn::before { content: '\25B2'; font-size: .6875rem; }

.admin-test-page .cleanup-footer { display: flex; align-items: center; justify-content: flex-end; padding-top: 1rem; border-top: 1px solid var(--at-border); }

/* Gedeelde vorm voor ELKE actieknop, risicovol of neutraal -- alleen de
   kleur verschilt per betekenis (zie hieronder), nooit de vorm (gevuld/
   outline). "Verwijderen" (POI-database) stond nog als
   outline terwijl "Opruimen" (Onderhoud) al gevuld was voor eenzelfde
   soort actie -- nu allebei gevuld. */
.admin-test-page .btn-cleanup,
.admin-test-page .btn-poi-delete,
.admin-test-page .btn-action {
    display: inline-flex;
    align-items: center;
    gap: .375rem;
    padding: .5625rem 1.375rem;
    border: none;
    border-radius: var(--at-radius);
    font-family: var(--at-font-display);
    font-size: .875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .03em;
    color: #fff;
    cursor: pointer;
}
.admin-test-page .btn-icon { display: inline-flex; }

/* Risicovol/destructief (verwijdert data): bordeauxrood, ALTIJD met icoon
   -- gereserveerd voor waar het echt om gaat, niet voor elke actieknop. */
.admin-test-page .btn-cleanup,
.admin-test-page .btn-poi-delete {
    background: var(--at-rust);
}
.admin-test-page .btn-cleanup:hover,
.admin-test-page .btn-poi-delete:hover:not(:disabled) { background: var(--at-rust-dark); }
.admin-test-page .btn-cleanup:disabled,
.admin-test-page .btn-poi-delete:disabled { cursor: not-allowed; border: 2px dashed var(--at-rust); background: transparent; color: var(--at-rust); }

/* Neutraal/informatief (berekent, kopieert, genereert -- verwijdert geen
   data): racing green, dezelfde vorm als de primaire acties elders. */
.admin-test-page .btn-action {
    background: var(--at-green);
}
.admin-test-page .btn-action:hover { background: var(--at-green-dark); }
.admin-test-page .btn-action:disabled { cursor: not-allowed; border: 2px dashed var(--at-green); background: transparent; color: var(--at-green); }

/* ── Logboeken (deploy-log/diag-log): scheepsjournaal-gevoel ──── */
.admin-test-page .deploy-log,
.admin-test-page .diag-log {
    font-family: var(--at-font-mono);
    font-size: .8125rem;
    color: var(--at-ink);
    background: var(--at-paper);
    border: 1.5px solid var(--at-border);
    border-left: 3px solid var(--at-brass);
    border-radius: var(--at-radius);
    max-height: 280px;
    overflow-y: auto;
}
.admin-test-page .deploy-log {
    padding: .875rem 1rem;
    white-space: pre-wrap;
    word-break: break-all;
    line-height: 1.8;
}
.admin-test-page .deploy-log-empty { color: var(--at-muted); font-style: italic; }
.admin-test-page .diag-log-row { padding: .625rem 1rem; border-bottom: 1px dashed var(--at-border); }
.admin-test-page .diag-log-row:last-child { border-bottom: none; }
.admin-test-page .diag-log-meta { display: block; font-family: var(--at-font-body); font-size: .75rem; color: var(--at-muted); margin-bottom: .1875rem; text-transform: uppercase; letter-spacing: .03em; }
.admin-test-page .diag-log-query { display: block; font-size: .8125rem; color: var(--at-ink); white-space: pre-wrap; word-break: break-all; }

.admin-test-page code {
    font-family: var(--at-font-mono);
    background: var(--at-paper-3);
    border: 1px solid var(--at-border);
    border-radius: 4px;
    padding: .1rem .375rem;
    font-size: .8125rem;
}

/* ── Toasts ───────────────────────────────────────────────────── */
.admin-test-page .toast-container { position: fixed; bottom: 1.25rem; right: 1.25rem; z-index: 400; display: flex; flex-direction: column; gap: .5rem; pointer-events: none; }
.admin-test-page .toast {
    padding: .75rem 1.125rem;
    border-radius: var(--at-radius);
    font-size: .875rem;
    font-weight: 600;
    box-shadow: var(--at-shadow-lg);
    pointer-events: auto;
}
.admin-test-page .toast-success { background: var(--at-green-light); color: var(--at-green-dark); border: 1.5px solid var(--at-green); }
.admin-test-page .toast-error { background: var(--at-rust-bg); color: var(--at-rust); border: 1.5px solid var(--at-rust-border); }

/* ── Instellingenvelden (profielpagina) ──────────────────────────
   Gedeeld met de admin-pagina (zelfde body.admin-test-page-scope,
   zelfde tokens/kaart/tab-systeem) -- profile-test.php hergebruikt dit
   bestand rechtstreeks i.p.v. een los stijlblad, zodat het echt hetzelfde
   systeem blijft i.p.v. twee systemen die toevallig op elkaar lijken. */
.admin-test-page .at-field {
    display: flex;
    flex-direction: column;
    gap: .375rem;
    margin-bottom: 1.25rem;
}
.admin-test-page .at-field:last-child { margin-bottom: 0; }
.admin-test-page .at-field > label {
    font-family: var(--at-font-display);
    font-size: .8125rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--at-ink);
}
/* Kleiner + cursief dan het label erboven (dat zelf .8125rem is) --
   miste eerst genoeg onderscheid, alleen de kleur/font-family verschilde. */
.admin-test-page .at-hint { font-size: .75rem; font-style: italic; color: var(--at-muted); line-height: 1.5; }

.admin-test-page .at-input,
.admin-test-page .at-select {
    width: 100%;
    max-width: 420px;
    padding: .5625rem .75rem;
    border: 1.5px solid var(--at-border);
    border-radius: var(--at-radius);
    background: var(--at-paper);
    font-family: var(--at-font-body);
    font-size: .9375rem;
    color: var(--at-ink);
}
.admin-test-page .at-select {
    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='%23A8763A' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right .75rem center;
    padding-right: 2.25rem;
}
.admin-test-page .at-input:focus,
.admin-test-page .at-select:focus { outline: 2px solid var(--at-brass); outline-offset: 1px; border-color: var(--at-brass); }

/* Kleurkiezer-rij (routelijnkleur e.d.) */
.admin-test-page .at-color-row { display: flex; align-items: center; gap: .625rem; }
.admin-test-page .at-color-row input[type="color"] {
    width: 44px;
    height: 36px;
    padding: 2px;
    border: 1.5px solid var(--at-border);
    border-radius: var(--at-radius);
    background: var(--at-paper);
    cursor: pointer;
}
.admin-test-page .at-color-row span {
    font-family: var(--at-font-mono);
    font-size: .875rem;
    color: var(--at-muted);
    text-transform: uppercase;
}

/* Segmented control (Thema, kaartrichting, aanwijzing-modus) -- zelfde
   rol als radioknoppen, vormgegeven als een kleine keuzeschakelaar i.p.v.
   losse rondjes, past bij het instrumentenbord-karakter. */
.admin-test-page .at-segmented {
    display: inline-flex;
    border: 1.5px solid var(--at-brass);
    border-radius: var(--at-radius);
    overflow: hidden;
    width: fit-content;
}
.admin-test-page .at-segmented label {
    position: relative;
    display: flex;
    align-items: center;
    gap: .375rem;
    padding: .5rem 1rem;
    font-family: var(--at-font-body);
    font-size: .875rem;
    font-weight: 600;
    color: var(--at-muted);
    background: var(--at-paper);
    cursor: pointer;
}
.admin-test-page .at-segmented label + label { border-left: 1.5px solid var(--at-brass); }
.admin-test-page .at-segmented input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    pointer-events: none;
}
.admin-test-page .at-segmented input:checked + span { color: var(--at-ink); }
.admin-test-page .at-segmented label:has(input:checked) { background: var(--at-green-light); }

/* Boolean instellingen hergebruiken LETTERLIJK het tuimelschakelaar-
   component van de admin-tabel (.toggle-btn/.toggle-wrap) -- zelfde
   onderdeel, geen aparte checkbox-stijl. .at-check-row is puur de
   label+schakelaar-rij eromheen. */
.admin-test-page .at-check-row {
    display: flex;
    align-items: center;
    gap: .75rem;
}
.admin-test-page .at-check-row > span {
    font-family: var(--at-font-body);
    font-size: .9375rem;
    color: var(--at-ink);
}
.admin-test-page .at-check-group {
    display: flex;
    flex-wrap: wrap;
    gap: 1.25rem;
}

.admin-test-page .at-save-row {
    display: flex;
    justify-content: flex-end;
    padding-top: 1.25rem;
    margin-top: .5rem;
    border-top: 1.5px solid var(--at-border);
}

/* ── Vriendenrijen (friends-test.php) ─────────────────────────────
   Zelfde rij-patroon als .orphan-row (Onderhoud): geen losse doos per
   rij, gewoon een hairline-scheiding binnen de kaart. Actieknoppen
   hergebruiken LETTERLIJK .btn-cleanup/.btn-action (zie hierboven) --
   geen eigen kleur-definitie hier, dat garandeert dat "Verwijderen"/
   "Intrekken"/"Weigeren" er overal identiek uitzien aan "Opruimen". */
.admin-test-page .at-friend-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    padding: .8125rem 0;
    border-bottom: 1px solid var(--at-border);
}
.admin-test-page .at-friend-row:last-child { border-bottom: none; }
.admin-test-page .at-friend-identity { display: flex; flex-direction: column; gap: .1rem; min-width: 0; }
.admin-test-page .at-friend-name {
    font-weight: 700;
    font-size: .9375rem;
    color: var(--at-ink);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.admin-test-page .at-friend-meta {
    font-size: .8125rem;
    color: var(--at-muted);
    font-family: var(--at-font-mono);
}
.admin-test-page .at-friend-actions { display: flex; gap: .5rem; flex: none; }
.admin-test-page .at-friend-empty { color: var(--at-muted); font-size: .875rem; font-style: italic; padding: .5rem 0; }

/* Rij die zelf de klikbare link/knop is (friend_routes.php se mappen/
   routes) i.p.v. een rij met losse actieknoppen erin -- zelfde look,
   maar met cursor+hover en een vaste, gedempte pijl-/mapicoon-kleur. */
.admin-test-page a.at-friend-row,
.admin-test-page button.at-friend-row {
    width: 100%;
    text-align: left;
    background: none;
    border: none;
    border-bottom: 1px solid var(--at-border);
    cursor: pointer;
    color: inherit;
    font: inherit;
}
.admin-test-page a.at-friend-row:hover,
.admin-test-page button.at-friend-row:hover { background: var(--at-paper-3); }
.admin-test-page a.at-friend-row .btn-icon,
.admin-test-page button.at-friend-row .btn-icon { color: var(--at-brass); flex-shrink: 0; }
/* Routenaam iets lichter dan een mapnaam -- zelfde onderscheid als de
   eigen routebrowser (.rt-name, font-weight 500). */
.admin-test-page .at-route-name { font-weight: 500; }

/* Begrensde, scrollbare lijst -- zelfde idee als .poi-country-scroll
   (POI-database-tab): een handjevol vrienden/verzoeken past nu prima
   zonder scrollbalk, maar honderden vrienden zouden de pagina anders
   eindeloos laten doorlopen -- moet ook bij een grote gebruikersbasis
   schalen. Rijen binnenin blijven .at-friend-row, dus
   geen dubbele buitenrand -- alleen de container zelf krijgt een rand. */
.admin-test-page .at-friend-scroll {
    max-height: 360px;
    overflow-y: auto;
    border: 1.5px solid var(--at-border);
    border-radius: var(--at-radius);
    padding: 0 1rem;
}
.admin-test-page .at-friend-scroll .at-friend-row:first-child { border-top: none; }
.admin-test-page .at-friend-scroll .at-friend-empty { padding: 1rem 0; }

/* .btn-action/.btn-cleanup zijn knoppen; "Bekijk routes" is een link
   (<a>) naar een andere pagina -- zelfde opmaak, andere selector nodig
   zodat de <a> zich ook als knop gedraagt (geen onderstreping/linkkleur). */
.admin-test-page a.btn-action { text-decoration: none; }

/* ── Landingspagina (index.php) ────────────────────────────────
   Eén scherm, geen scroll -- alles in de donkere hero-band zelf: vier
   compacte tegels verdeeld over twee kolommen links/rechts van de kern
   (merk/headline/route/knoppen), geen aparte sectie eronder meer. Enige
   plek in het systeem met een bewust ALTIJD-donkere band, los van het
   licht/donker-thema -- de 'asfalt bij schemer'-variant van dezelfde
   racing green/koper-tokens, geen nieuwe kleur erbij. Signatuurbeeld: één
   bochtige route-lijn met een motor-, fiets- EN automarkering erop --
   routes zijn voor alle drie de vervoersvormen relevant, niet alleen
   motor/fiets -- zelfde lijnstijl/koperkleur als de iconen elders in dit
   systeem, geen stockfoto's. */
.admin-test-page .landing-hero {
    background: linear-gradient(180deg, #16211B 0%, var(--at-green-dark) 100%);
    color: var(--at-paper);
    padding: 2.25rem 1.5rem;
    min-height: 100vh;
    display: flex;
    align-items: center;
}
.admin-test-page .landing-hero-grid {
    width: 100%;
    max-width: 1120px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-areas: 'core core' 'left right';
    gap: 1.5rem 1rem;
}
@media (min-width: 900px) {
    .admin-test-page .landing-hero-grid {
        grid-template-columns: 210px 1fr 210px;
        grid-template-areas: 'left core right';
        gap: 2rem;
        align-items: center;
    }
}
.admin-test-page .landing-features-left  { grid-area: left; }
.admin-test-page .landing-features-right { grid-area: right; }
.admin-test-page .landing-features-left,
.admin-test-page .landing-features-right {
    display: flex;
    flex-direction: row;
    gap: .75rem;
}
@media (min-width: 900px) {
    .admin-test-page .landing-features-left,
    .admin-test-page .landing-features-right { flex-direction: column; }
}
.admin-test-page .landing-hero-core { grid-area: core; text-align: center; }

.admin-test-page .landing-brand {
    display: inline-flex;
    align-items: center;
    gap: .625rem;
    margin-bottom: 1.125rem;
}
.admin-test-page .landing-brand img { width: 30px; height: 30px; }
.admin-test-page .landing-brand span {
    font-family: var(--at-font-display);
    font-weight: 700;
    letter-spacing: .02em;
    text-transform: uppercase;
    font-size: .9375rem;
    color: var(--at-paper);
    opacity: .85;
}
.admin-test-page .landing-headline {
    font-family: var(--at-font-display);
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .01em;
    font-size: clamp(1.75rem, 4vw, 2.875rem);
    line-height: 1.02;
    color: var(--at-paper);
}
.admin-test-page .landing-headline em {
    font-style: normal;
    color: var(--at-brass);
}
.admin-test-page .landing-subhead {
    font-family: var(--at-font-body);
    font-size: .9375rem;
    color: #C9D4CC;
    max-width: 480px;
    margin: .75rem auto 0;
    line-height: 1.55;
}

/* Bochtige route -- SVG-pad + drie 'waypoints' (motor/fiets/auto) erbovenop */
.admin-test-page .landing-route {
    position: relative;
    max-width: 460px;
    margin: 1.25rem auto 1rem;
}
.admin-test-page .landing-route svg { width: 100%; height: auto; display: block; }
.admin-test-page .landing-route-path {
    fill: none;
    stroke: var(--at-brass);
    stroke-width: 3;
    stroke-linecap: round;
    stroke-dasharray: 8 10;
}
.admin-test-page .landing-route-dot { fill: var(--at-paper); opacity: .55; }
.admin-test-page .landing-rider {
    position: absolute;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: var(--at-brass);
    border: 2.5px solid #16211B;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 3px 10px rgba(0,0,0,.4);
    transform: translate(-50%, -50%);
}
.admin-test-page .landing-rider svg { width: 20px; height: 20px; stroke: #16211B; }
.admin-test-page .landing-rider-auto  { left: 3%;    top: 82%; }
.admin-test-page .landing-rider-moto  { left: 40.5%; top: 18%; }
.admin-test-page .landing-rider-fiets { left: 75%;   top: 82%; }

.admin-test-page .landing-cta-row {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
    justify-content: center;
    margin-top: .25rem;
}
.admin-test-page .btn-hero-primary,
.admin-test-page .btn-hero-secondary {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .6875rem 1.5rem;
    border-radius: var(--at-radius);
    font-family: var(--at-font-display);
    font-size: .875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .03em;
    cursor: pointer;
    text-decoration: none;
}
.admin-test-page .btn-hero-primary { background: var(--at-brass); color: #16211B; border: none; }
.admin-test-page .btn-hero-primary:hover { background: #C08D49; }
.admin-test-page .btn-hero-secondary { background: transparent; color: var(--at-paper); border: 1.5px solid rgba(237,231,216,.5); }
.admin-test-page .btn-hero-secondary:hover { border-color: var(--at-paper); background: rgba(237,231,216,.08); }

@media (prefers-reduced-motion: no-preference) {
    .admin-test-page .landing-route-path { animation: landing-route-draw 2.4s ease-out .2s both; }
}
@keyframes landing-route-draw {
    from { stroke-dashoffset: 340; }
    to   { stroke-dashoffset: 0; }
}

/* Compacte, donkere tegels -- pure opsomming, geen link nodig: alles zit
   toch achter inloggen. */
.admin-test-page .landing-mini-tile {
    flex: 1;
    background: rgba(237,231,216,.06);
    border: 1px solid rgba(237,231,216,.16);
    border-radius: var(--at-radius);
    padding: .75rem .875rem;
}
.admin-test-page .landing-mini-tile-icon {
    width: 26px;
    height: 26px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(168,118,58,.28);
    color: var(--at-brass);
    margin-bottom: .5rem;
}
.admin-test-page .landing-mini-tile h3 {
    font-family: var(--at-font-display);
    font-size: .8125rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .02em;
    color: var(--at-paper);
    margin-bottom: .25rem;
}
.admin-test-page .landing-mini-tile p {
    font-size: .75rem;
    color: #AEBAB1;
    line-height: 1.45;
}

/* ── Inlog-/registratiepagina (login.php) ─────────────────────────
   Geen admin-shell/sidebar nodig (niets om te navigeren) -- eigen
   gecentreerde kaart, maar hergebruikt verder LETTERLIJK dezelfde
   componenten: .admin-tabbar/.admin-tab/.admin-panel voor de
   Inloggen/Registreren-tabjes, .at-field/.at-input voor de velden,
   .btn-action voor de knop. */
.admin-test-page .auth-page-wrapper {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
}
.admin-test-page .auth-brand { text-align: center; margin-bottom: 1.75rem; }
.admin-test-page .auth-brand .logo-icon { width: 52px; height: 52px; margin-bottom: .625rem; }
.admin-test-page .auth-brand h1 {
    font-family: var(--at-font-display);
    font-size: 1.5rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .01em;
    color: var(--at-ink);
}
.admin-test-page .auth-brand p { font-size: .875rem; color: var(--at-muted); margin-top: .25rem; }

.admin-test-page .auth-card { width: 100%; max-width: 420px; }
.admin-test-page .auth-card .admin-card-body { padding: 1.5rem; }
.admin-test-page .auth-card .admin-tabbar { margin: 0; }

.admin-test-page .auth-footer {
    text-align: center;
    margin-top: 1.25rem;
    font-size: .8125rem;
    color: var(--at-muted);
}
.admin-test-page .auth-footer a { color: var(--at-green); font-weight: 600; }

/* Statusmelding: icoon + kleur + tekst, nooit kleur alleen (zelfde regel
   als .orphan-count/.toast elders in dit systeem). */
.admin-test-page .at-alert {
    display: flex;
    align-items: flex-start;
    gap: .5rem;
    padding: .75rem 1rem;
    border-radius: var(--at-radius);
    border: 1.5px solid transparent;
    font-size: .875rem;
    line-height: 1.5;
    margin-bottom: 1.25rem;
}
.admin-test-page .at-alert svg { flex-shrink: 0; margin-top: .1875rem; }
.admin-test-page .at-alert-error   { background: var(--at-rust-bg); border-color: var(--at-rust-border); color: var(--at-rust); }
.admin-test-page .at-alert-success { background: var(--at-green-light); border-color: var(--at-green); color: var(--at-green-dark); }

/* ── Responsief ───────────────────────────────────────────────── */
@media (max-width: 640px) {
    .admin-test-page .admin-wrapper { padding: 1rem .75rem 2rem; }
    .admin-test-page .admin-card-body { padding: 1rem; }
    .admin-test-page .admin-card-title { padding: .875rem 1rem; }
    .admin-test-page .admin-heading h1 { font-size: 1.625rem; }
    .admin-test-page .admin-heading.admin-heading-with-action { flex-direction: column; align-items: stretch; }
    .admin-test-page .admin-heading.admin-heading-with-action > .btn-action { justify-content: center; }
    .admin-test-page .stat-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ── Tab Scenic (js/admin-scenic.js) ─────────────────────────────
   Kleur is hier nooit het enige signaal: status = icoon + tekst,
   reeksen in grafieken = symbool + lijnstijl + tekstlegenda. */
.admin-test-page .scenic-toolbar {
    display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
    font-family: var(--at-font-body); font-size: .8125rem; color: var(--at-muted);
}
.admin-test-page .scenic-alerts { display: flex; flex-direction: column; gap: .625rem; }
.admin-test-page .scenic-alerts:empty { display: none; }
.admin-test-page .scenic-alert {
    display: flex; align-items: flex-start; gap: .625rem;
    padding: .75rem 1rem; border-radius: var(--at-radius);
    font-family: var(--at-font-body); font-size: .875rem; color: var(--at-ink);
}
.admin-test-page .scenic-alert svg { flex-shrink: 0; margin-top: .1rem; }
.admin-test-page .scenic-alert-bad  { background: var(--at-rust-bg); border: 2px solid var(--at-rust); }
.admin-test-page .scenic-alert-bad svg { color: var(--at-rust); }
.admin-test-page .scenic-alert-warn { background: var(--at-brass-light); border: 2px dashed var(--at-brass); }
.admin-test-page .scenic-alert-warn svg { color: var(--at-brass-dark); }

.admin-test-page .scenic-nodata { color: var(--at-muted); font-style: italic; font-size: .875rem; font-weight: 400; }

.admin-test-page .scenic-state { display: inline-flex; align-items: center; gap: .375rem; font-weight: 700; }
.admin-test-page .scenic-state svg { flex-shrink: 0; }
.admin-test-page .scenic-state-ok   { color: var(--at-green); }
.admin-test-page .scenic-state-bad  { color: var(--at-rust); }
.admin-test-page .scenic-state-none { color: var(--at-muted); font-weight: 500; }

.admin-test-page .scenic-tiles {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: .875rem;
}
.admin-test-page .scenic-tile {
    border: 1.5px solid var(--at-border); border-radius: var(--at-radius);
    background: var(--at-paper); padding: .75rem .875rem;
    font-family: var(--at-font-body);
}
.admin-test-page .scenic-tile-label {
    font-family: var(--at-font-display); font-size: .75rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: .06em; color: var(--at-muted); margin-bottom: .3rem;
}
.admin-test-page .scenic-tile-value { font-size: 1.125rem; font-weight: 700; color: var(--at-ink); font-variant-numeric: tabular-nums; }
.admin-test-page .scenic-tile-sub   { font-size: .75rem; color: var(--at-muted); margin-top: .25rem; font-family: var(--at-font-mono); }

.admin-test-page .scenic-totals {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 1rem; margin-bottom: 1.25rem;
}
.admin-test-page .scenic-total-card { text-align: left; padding: 1.25rem 1rem .875rem; }
.admin-test-page .scenic-total-card .stat-card-label { text-align: center; margin-bottom: .5rem; }
.admin-test-page .scenic-total-row {
    display: flex; justify-content: space-between; gap: .75rem;
    font-family: var(--at-font-body); font-size: .8125rem; color: var(--at-muted);
    padding: .2rem 0; border-top: 1px dashed var(--at-border);
}
.admin-test-page .scenic-total-row strong { font-family: var(--at-font-mono); color: var(--at-ink); font-variant-numeric: tabular-nums; }

.admin-test-page .scenic-grid-2,
.admin-test-page .scenic-grid-3 { display: grid; gap: 1.25rem 1.5rem; margin-bottom: 1.25rem; }
.admin-test-page .scenic-grid-2 { grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); }
.admin-test-page .scenic-grid-3 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.admin-test-page .scenic-block { min-width: 0; margin-bottom: 1.25rem; }
.admin-test-page .scenic-grid-2 .scenic-block,
.admin-test-page .scenic-grid-3 .scenic-block { margin-bottom: 0; }
.admin-test-page .scenic-block-title {
    font-family: var(--at-font-display); font-size: .875rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: .05em; color: var(--at-ink); margin: 0 0 .5rem;
}
.admin-test-page .scenic-block-title small {
    font-family: var(--at-font-body); font-weight: 400; text-transform: none; letter-spacing: normal;
    color: var(--at-muted); font-size: .75rem;
}

.admin-test-page .scenic-chart { width: 100%; min-height: 40px; }
.admin-test-page .scenic-svg { display: block; overflow: visible; }
.admin-test-page .scenic-svg .sc-grid { stroke: var(--at-border); stroke-width: 1; }
.admin-test-page .scenic-svg .sc-axis { fill: var(--at-muted); font-family: var(--at-font-mono); font-size: 10px; }
.admin-test-page .scenic-svg .sc-bar { fill: var(--at-brass); }
.admin-test-page .scenic-svg .sc-bar:hover { fill: var(--at-brass-dark); }
.admin-test-page .scenic-svg .sc-bar-empty { fill: none; stroke: var(--at-border-2); stroke-dasharray: 2 2; }
.admin-test-page .sc-line-a { stroke: var(--at-ink);   stroke-width: 2; fill: none; }
.admin-test-page .sc-line-b { stroke: var(--at-green); stroke-width: 2; fill: none; }
.admin-test-page .sc-mark-a { fill: var(--at-ink);   stroke: var(--at-paper-2); stroke-width: 1; }
.admin-test-page .sc-mark-b { fill: var(--at-green); stroke: var(--at-paper-2); stroke-width: 1; }
.admin-test-page .sc-fail path,
.admin-test-page .sc-fail line { stroke: var(--at-rust); stroke-width: 2; fill: none; }
.admin-test-page .sc-fail line { stroke-width: 1; }
.admin-test-page .scenic-chart-empty { margin: .25rem 0; }

.admin-test-page .scenic-legend { display: flex; flex-wrap: wrap; gap: .375rem 1.25rem; margin-bottom: .375rem; font-family: var(--at-font-body); font-size: .8125rem; color: var(--at-ink); }
.admin-test-page .scenic-legend-item { display: inline-flex; align-items: center; gap: .375rem; }

.admin-test-page .sc-dist { display: flex; flex-direction: column; gap: .375rem; font-family: var(--at-font-body); font-size: .8125rem; }
.admin-test-page .sc-dist-row { display: grid; grid-template-columns: minmax(70px, 34%) 1fr auto; align-items: center; gap: .625rem; }
.admin-test-page .sc-dist-label { color: var(--at-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: var(--at-font-mono); font-size: .75rem; }
.admin-test-page .sc-dist-track { height: 10px; background: var(--at-paper-3); border-radius: 5px; overflow: hidden; }
.admin-test-page .sc-dist-fill { display: block; height: 100%; background: var(--at-brass); }
.admin-test-page .sc-dist-val { font-family: var(--at-font-mono); font-variant-numeric: tabular-nums; color: var(--at-ink); white-space: nowrap; }
.admin-test-page .sc-dist-val small { color: var(--at-muted); }

.admin-test-page .scenic-bignum { font-family: var(--at-font-mono); font-size: 2.25rem; font-weight: 600; color: var(--at-brass-dark); line-height: 1.1; }
body.admin-test-page.dark .scenic-bignum { color: var(--at-brass); }
.admin-test-page .scenic-summary { font-family: var(--at-font-body); font-size: .875rem; margin: 0 0 1rem; }
.admin-test-page .scenic-footnote { font-size: .75rem; margin: .5rem 0 1.25rem; }
.admin-test-page .scenic-table th.num { text-align: right; }
.admin-test-page .scenic-empty-cell { text-align: center; color: var(--at-muted); padding: 1.25rem; }

.admin-test-page .scenic-map { height: 440px; border: 1.5px solid var(--at-border); border-radius: var(--at-radius); overflow: hidden; }
.admin-test-page .scenic-map-note { font-size: .8125rem; margin: .625rem 0 0; }
.admin-test-page path.scenic-map-dot { fill: var(--at-brass); stroke: var(--at-ink); }

.admin-test-page .scenic-log-filters {
    display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1.25rem; margin-bottom: .875rem;
    font-family: var(--at-font-body); font-size: .8125rem;
}
.admin-test-page .scenic-log-filters select {
    margin-left: .375rem; padding: .3rem .5rem; border: 1.5px solid var(--at-border-2); border-radius: var(--at-radius);
    background: var(--at-paper); color: var(--at-ink); font-family: var(--at-font-body); font-size: .8125rem;
}
.admin-test-page .scenic-log-scroll { max-height: 560px; overflow-y: auto; }
.admin-test-page .scenic-log-scroll th { position: sticky; top: 0; z-index: 1; }
.admin-test-page .scenic-log-table td { vertical-align: top; }
.admin-test-page .scenic-level { display: inline-flex; align-items: center; gap: .3rem; font-weight: 700; white-space: nowrap; }
.admin-test-page .scenic-level svg { flex-shrink: 0; }
.admin-test-page .scenic-level-error { color: var(--at-rust); }
.admin-test-page .scenic-level-warn  { color: var(--at-brass-dark); }
.admin-test-page .scenic-level-info  { color: var(--at-muted); }
body.admin-test-page.dark .scenic-level-warn { color: var(--at-brass); }
.admin-test-page .scenic-detail { font-family: var(--at-font-mono); font-size: .75rem; word-break: break-all; }
.admin-test-page .scenic-ip { font-family: var(--at-font-mono); font-size: .75rem; color: var(--at-muted); margin-top: .2rem; }
.admin-test-page .scenic-copy {
    display: inline-flex; align-items: center; justify-content: center; vertical-align: middle;
    width: 24px; height: 22px; margin-left: .25rem; padding: 0;
    border: 1.5px solid var(--at-border-2); border-radius: 4px; background: var(--at-paper); color: var(--at-ink); cursor: pointer;
}
.admin-test-page .scenic-copy:hover { background: var(--at-paper-3); }

.admin-test-page .scenic-setting { display: flex; align-items: flex-start; gap: 1rem; font-family: var(--at-font-body); }
.admin-test-page .scenic-setting .toggle-wrap { margin-top: .15rem; }
.admin-test-page .scenic-setting-label { font-weight: 700; font-size: .9375rem; color: var(--at-ink); }
.admin-test-page .scenic-setting-sub { font-size: .8125rem; margin-top: .2rem; }

.scenic-table th.scenic-th-group { text-align: center; border-bottom: 1px solid var(--at-border); font-weight: 600; }

/* Scenic, Instellingen: ntfy-schakelaar met testknop en meldingen (altijd icoon plus tekst) */
.admin-test-page .scenic-setting-main { flex: 1; min-width: 0; }
.admin-test-page .scenic-setting-head { display: flex; align-items: center; justify-content: space-between; gap: .75rem; flex-wrap: wrap; }
.admin-test-page .scenic-setting-msg { display: flex; align-items: flex-start; gap: .375rem; margin-top: .5rem; font-size: .8125rem; font-weight: 600; }
.admin-test-page .scenic-setting-msg svg { flex-shrink: 0; margin-top: .1rem; }
.admin-test-page .scenic-setting-msg .lock-badge { position: static; flex-shrink: 0; }
.admin-test-page .scenic-setting-msg.is-ok   { color: var(--at-green); }
.admin-test-page .scenic-setting-msg.is-bad  { color: var(--at-rust); }
.admin-test-page .scenic-setting-msg.is-lock,
.admin-test-page .scenic-setting-msg.is-info { color: var(--at-muted); }

.admin-test-page .scenic-setting-sep { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--at-border); }

/* Profiel: "POI's langs route" categorieën */
.admin-test-page .at-label {
    font-family: var(--at-font-display);
    font-size: .8125rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--at-ink);
}
.admin-test-page .poi-route-profile-cats {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: .25rem .75rem;
}
.admin-test-page .poi-route-profile-cat {
    display: flex;
    align-items: center;
    gap: .375rem;
    font-size: .875rem;
    cursor: pointer;
}
.admin-test-page .poi-route-profile-cat img { flex-shrink: 0; }

/* POI-database: dubbele POI's opruimen (js/admin-poi-dedupe.js) */
.admin-test-page .poi-dedupe-card { margin-top: 1.25rem; }
.admin-test-page .poi-dedupe-status { margin: 0 0 .75rem; font-size: .875rem; line-height: 1.5; }
.admin-test-page .poi-dedupe-actions { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: .75rem; }
.admin-test-page .poi-dedupe-actions .btn-action:disabled { opacity: .5; cursor: not-allowed; }
.admin-test-page .poi-dedupe-log {
    max-height: 16rem;
    margin: 0;
    padding: .5rem .75rem;
    overflow: auto;
    font-family: var(--at-font-mono, monospace);
    font-size: .75rem;
    white-space: pre-wrap;
    background: var(--at-paper-2, rgba(0,0,0,.04));
    border-radius: 4px;
}
.admin-test-page .poi-dedupe-log:empty { display: none; }

/* POI-database: vaste controle "Dubbele POI's" */
.admin-test-page .poi-dupe-check {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .5rem .75rem;
    margin-bottom: .875rem;
    padding: .5rem .75rem;
    border: 1px solid var(--at-line, rgba(0,0,0,.12));
    border-radius: 4px;
    font-size: .8125rem;
}
.admin-test-page .poi-dupe-check-text { display: flex; flex-wrap: wrap; gap: .25rem .5rem; }
.admin-test-page .poi-dupe-check .btn-action:disabled { opacity: .5; cursor: not-allowed; }
.admin-test-page .poi-dupe-ok::before { content: "\2713  "; font-weight: 700; }
.admin-test-page .poi-dupe-warn { font-weight: 700; color: var(--at-rust, #b45309); }
.admin-test-page .poi-dupe-warn::before { content: "\26A0  "; }

/* Onderhoud POI-database: voorbeelden bij "Namen controleren" */
.admin-test-page .poi-names-examples { margin: 0 0 .75rem; font-family: var(--at-font-mono, monospace); font-size: .75rem; }
.admin-test-page .poi-names-example { padding: .125rem 0; overflow-wrap: anywhere; }