/* ─────────────────────────────────────────────────────────────────────────────
   QR Notes — stylesheet

   Eén accentkleur, een vaste ruimtemaat en drie tekstgroottes. Alles wat je
   hieronder ziet komt uit die drie keuzes voort.
   ───────────────────────────────────────────────────────────────────────────── */

:root {
    /* Achtergrond is licht warm, niet klinisch blauwgrijs. */
    --bg: #f2f1ee;
    --surface: #ffffff;
    --surface-sunken: #f7f6f4;
    --border: #e3e1dc;
    --border-strong: #cfccc5;

    --text: #1c1b19;
    --text-soft: #55524c;
    --text-faint: #85817a;

    --accent: #1f6b47;
    --accent-hover: #185338;
    --accent-soft: #e8f1ec;
    --on-accent: #ffffff;

    --danger: #9a2f33;
    --danger-soft: #fbeceb;
    --success: #1f6b47;
    --success-soft: #e8f1ec;
    --info: #2a5480;
    --info-soft: #e9eff7;
    --warning: #8a5a12;
    --warning-soft: #fbf1de;

    --radius-sm: 7px;
    --radius: 11px;
    --radius-lg: 16px;

    --shadow-sm: 0 1px 2px rgba(28, 27, 25, .05);
    --shadow: 0 1px 2px rgba(28, 27, 25, .04), 0 6px 16px -6px rgba(28, 27, 25, .10);
    --shadow-lift: 0 2px 4px rgba(28, 27, 25, .05), 0 12px 28px -10px rgba(28, 27, 25, .16);

    --space: 4px;
    --measure: 68ch;
}

@media (prefers-color-scheme: dark) {
    :root {
        --bg: #16161a;
        --surface: #1e1e23;
        --surface-sunken: #26262c;
        --border: #33333b;
        --border-strong: #45454f;

        --text: #ecebe8;
        --text-soft: #b3b1ab;
        --text-faint: #86847e;

        --accent: #64b98c;
        --accent-hover: #7ecda1;
        --accent-soft: #1b2f25;
        --on-accent: #10231a;

        --danger: #e59aa0;
        --danger-soft: #2e1c1e;
        --success: #7ecda1;
        --success-soft: #1b2f25;
        --info: #9dbde3;
        --info-soft: #1b2534;
        --warning: #e0bc7c;
        --warning-soft: #2d2517;

        --shadow-sm: 0 1px 2px rgba(0, 0, 0, .3);
        --shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 6px 16px -6px rgba(0, 0, 0, .5);
        --shadow-lift: 0 2px 4px rgba(0, 0, 0, .3), 0 12px 28px -10px rgba(0, 0, 0, .6);
    }
}

*, *::before, *::after { box-sizing: border-box; }

/* Het hidden-attribuut moet altijd winnen. Zonder deze regel overschrijft elke
   eigen display-waarde (inline-flex op een chip, contents op een container) de
   standaardstijl van de browser, en blijft een verborgen element gewoon staan. */
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
    font-size: 16px;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
}

a { color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 2px; }

:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
    border-radius: 3px;
}

.sr-only {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

/* ── Kop en navigatie ────────────────────────────────────────────────────── */

.site-header {
    display: flex;
    flex-wrap: wrap;
    gap: calc(var(--space) * 3);
    align-items: center;
    justify-content: space-between;
    padding: calc(var(--space) * 3) calc(var(--space) * 6);
    background: var(--surface);
    border-bottom: 1px solid var(--border);
}

.brand {
    display: inline-flex;
    align-items: center;
    gap: calc(var(--space) * 2);
    font-size: 1.02rem;
    font-weight: 640;
    letter-spacing: -.01em;
    color: var(--text);
    text-decoration: none;
}

.brand-mark {
    display: grid;
    place-items: center;
    width: 26px; height: 26px;
    border-radius: 7px;
    background: var(--accent);
    color: var(--on-accent);
    font-size: .8rem;
    line-height: 1;
}

.site-nav {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: calc(var(--space) * 5);
    font-size: .9rem;
}

.site-nav a,
.site-nav .link-button {
    color: var(--text-soft);
    text-decoration: none;
    padding: calc(var(--space)) 0;
    border-bottom: 2px solid transparent;
}

.site-nav a:hover,
.site-nav .link-button:hover {
    color: var(--text);
    border-bottom-color: var(--border-strong);
    text-decoration: none;
}

.site-main {
    max-width: 1000px;
    margin: 0 auto;
    padding: calc(var(--space) * 8) calc(var(--space) * 6) calc(var(--space) * 20);
}

.site-footer {
    padding: calc(var(--space) * 6);
    text-align: center;
    color: var(--text-faint);
    font-size: .82rem;
}

/* ── Typografie ──────────────────────────────────────────────────────────── */

h1 {
    font-size: clamp(1.5rem, 1.3rem + 1vw, 1.85rem);
    line-height: 1.2;
    letter-spacing: -.02em;
    margin: 0 0 calc(var(--space) * 2);
}

h2 {
    font-size: 1.16rem;
    letter-spacing: -.01em;
    margin: 0 0 calc(var(--space) * 3);
}

h3 {
    font-size: .82rem;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: var(--text-faint);
    margin: calc(var(--space) * 8) 0 calc(var(--space) * 3);
}

.subtitle {
    color: var(--text-soft);
    margin: calc(var(--space) * -1) 0 calc(var(--space) * 6);
}

.muted { color: var(--text-soft); }

.status-code {
    font-size: 3rem;
    font-weight: 700;
    line-height: 1;
    color: var(--border-strong);
    margin: 0 0 calc(var(--space) * 2);
}

.code-line {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: .78rem;
    color: var(--text-faint);
    word-break: break-all;
}

/* ── Kaarten ─────────────────────────────────────────────────────────────── */

.card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    padding: calc(var(--space) * 7);
    margin-bottom: calc(var(--space) * 5);
}

.card.narrow {
    max-width: 26rem;
    margin-inline: auto;
    padding: calc(var(--space) * 8);
}

.card.center { text-align: center; }

/* ── Formulieren ─────────────────────────────────────────────────────────── */

label {
    display: block;
    font-size: .82rem;
    font-weight: 560;
    color: var(--text-soft);
    margin-bottom: calc(var(--space) * 1.5);
}

input[type=text], input[type=email], input[type=password], input[type=url],
input[type=number], input[type=search], input[type=datetime-local],
select, textarea {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    background: var(--surface);
    color: var(--text);
    font: inherit;
    font-size: .95rem;
    transition: border-color .12s ease, box-shadow .12s ease;
}

input:hover:not(:disabled), select:hover, textarea:hover { border-color: var(--text-faint); }

input:focus, select:focus, textarea:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-soft);
    outline: none;
}

input::placeholder, textarea::placeholder { color: var(--text-faint); }

select {
    appearance: none;
    padding-right: 34px;
    background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
    background-position: calc(100% - 17px) calc(50% + 1px), calc(100% - 12px) calc(50% + 1px);
    background-size: 5px 5px, 5px 5px;
    background-repeat: no-repeat;
}

textarea { min-height: 150px; resize: vertical; line-height: 1.6; }

.field { margin-bottom: calc(var(--space) * 5); }

.field-hint {
    color: var(--text-faint);
    font-size: .82rem;
    line-height: 1.5;
    margin: calc(var(--space) * 1.5) 0 0;
}

/* ── Knoppen ─────────────────────────────────────────────────────────────── */

.button, button.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: calc(var(--space) * 2);
    padding: 9px 16px;
    border: 1px solid var(--accent);
    border-radius: var(--radius-sm);
    background: var(--accent);
    color: var(--on-accent);
    font: inherit;
    font-size: .9rem;
    font-weight: 560;
    line-height: 1.3;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color .12s ease, border-color .12s ease, transform .06s ease;
}

.button:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
.button:active { transform: translateY(1px); }

.button.secondary {
    background: var(--surface);
    color: var(--text);
    border-color: var(--border-strong);
}

.button.secondary:hover { background: var(--surface-sunken); border-color: var(--text-faint); }

.button.danger { background: var(--danger); border-color: var(--danger); color: #fff; }
.button.danger:hover { filter: brightness(.92); }

.button.small { padding: 6px 11px; font-size: .83rem; }

.link-button {
    background: none;
    border: none;
    padding: 0;
    font: inherit;
    font-size: inherit;
    color: var(--text-soft);
    cursor: pointer;
}

.link-button:hover { color: var(--text); }

.inline-form { display: inline; }

.button-row {
    display: flex;
    flex-wrap: wrap;
    gap: calc(var(--space) * 3);
    align-items: center;
    margin-top: calc(var(--space) * 6);
}

.spacer { flex: 1; }

/* ── Meldingen ───────────────────────────────────────────────────────────── */

.flashes {
    display: grid;
    gap: calc(var(--space) * 2);
    margin-bottom: calc(var(--space) * 5);
}

.flash {
    padding: 11px 15px;
    border-radius: var(--radius-sm);
    border: 1px solid transparent;
    border-left-width: 3px;
    font-size: .91rem;
}

.flash-error { background: var(--danger-soft); border-color: var(--danger); color: var(--danger); }
.flash-success { background: var(--success-soft); border-color: var(--success); color: var(--success); }
.flash-info { background: var(--info-soft); border-color: var(--info); color: var(--info); }

/* ── Werkbalk ────────────────────────────────────────────────────────────── */

.toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: calc(var(--space) * 3);
    align-items: flex-end;
}

.toolbar .field { margin-bottom: 0; }
.toolbar .grow { flex: 1 1 12rem; min-width: 0; }
.toolbar .field select { width: auto; min-width: 7.5rem; }
.toolbar > .button { margin-bottom: 1px; flex: none; }

/* ── Notitielijst ────────────────────────────────────────────────────────── */

.note-list {
    list-style: none;
    padding: 0;
    margin: calc(var(--space) * 5) 0 0;
    display: grid;
    gap: calc(var(--space) * 3);
}

.note-item {
    display: grid;
    grid-template-columns: auto auto 1fr auto;
    gap: calc(var(--space) * 4);
    align-items: center;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: calc(var(--space) * 4);
    transition: border-color .12s ease, box-shadow .12s ease;
}

.note-item:hover {
    border-color: var(--border-strong);
    box-shadow: var(--shadow);
}

.note-item > input[type=checkbox] {
    width: 17px;
    height: 17px;
    accent-color: var(--accent);
    cursor: pointer;
}

/* Een QR-code is wit op wit; zonder eigen vlak valt hij weg tegen de kaart.
   pixelated houdt de blokjes scherp bij het verkleinen — met gladde interpolatie
   wordt een QR op miniatuurformaat een grijze waas. */
.note-item img {
    display: block;
    width: 76px;
    height: 76px;
    padding: 5px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: #fff;
    image-rendering: pixelated;
}

.note-title {
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: -.01em;
    color: var(--text);
    text-decoration: none;
}

.note-title:hover { color: var(--accent); }

.note-meta {
    color: var(--text-faint);
    font-size: .82rem;
    margin: calc(var(--space) * 1.5) 0 0;
}

.note-actions {
    display: flex;
    gap: calc(var(--space) * 2);
    flex-wrap: wrap;
    justify-content: flex-end;
}

@media (max-width: 720px) {
    .note-item { grid-template-columns: auto auto 1fr; }
    .note-actions { grid-column: 1 / -1; justify-content: stretch; }
    .note-actions .button { flex: 1; }
}

/* ── Labels ──────────────────────────────────────────────────────────────── */

.badges {
    display: flex;
    flex-wrap: wrap;
    gap: calc(var(--space) * 1.5);
    margin-top: calc(var(--space) * 2);
}

.badge {
    font-size: .74rem;
    font-weight: 550;
    letter-spacing: .01em;
    padding: 2px 9px;
    border-radius: 999px;
    background: var(--surface-sunken);
    border: 1px solid var(--border);
    color: var(--text-soft);
    white-space: nowrap;
}

/* Betekenis meegeven aan kleur, zodat de sloten in één oogopslag te zien zijn. */
.badge.time { background: var(--warning-soft); border-color: transparent; color: var(--warning); }
.badge.location { background: var(--info-soft); border-color: transparent; color: var(--info); }
.badge.password { background: var(--danger-soft); border-color: transparent; color: var(--danger); }
.badge.type { background: var(--accent-soft); border-color: transparent; color: var(--accent); }

/* ── Paginering ──────────────────────────────────────────────────────────── */

.pagination {
    display: flex;
    gap: calc(var(--space) * 2);
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: calc(var(--space) * 7);
    font-size: .88rem;
}

.pagination a {
    padding: 6px 12px;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    background: var(--surface);
    color: var(--text-soft);
    text-decoration: none;
}

.pagination a:hover { background: var(--surface-sunken); color: var(--text); }
.pagination span { color: var(--text-faint); padding: 0 calc(var(--space) * 2); }

/* ── Publieke notitie ────────────────────────────────────────────────────── */

.note-view {
    max-width: var(--measure);
    margin-inline: auto;
    padding: calc(var(--space) * 9) calc(var(--space) * 8);
}

.note-view > h1 { margin-bottom: calc(var(--space) * 6); }

.note-content { font-size: 1.02rem; line-height: 1.68; overflow-wrap: anywhere; }

.note-content > :first-child { margin-top: 0; }
.note-content > :last-child { margin-bottom: 0; }

.note-content h2 { font-size: 1.2rem; margin: calc(var(--space) * 7) 0 calc(var(--space) * 2); }
.note-content h3 {
    font-size: 1.02rem;
    text-transform: none;
    letter-spacing: normal;
    color: var(--text);
    margin: calc(var(--space) * 6) 0 calc(var(--space) * 2);
}

.note-content p { margin: 0 0 calc(var(--space) * 4); }
.note-content ul, .note-content ol { margin: 0 0 calc(var(--space) * 4); padding-left: 1.3em; }
.note-content li { margin-bottom: calc(var(--space) * 1.5); }
.note-content img { max-width: 100%; height: auto; border-radius: var(--radius-sm); }
.note-content figure { margin: calc(var(--space) * 6) 0; }
.note-content figcaption { font-size: .85rem; color: var(--text-faint); margin-top: calc(var(--space) * 2); }

.note-content blockquote {
    margin: calc(var(--space) * 6) 0;
    padding-left: calc(var(--space) * 4);
    border-left: 3px solid var(--border-strong);
    color: var(--text-soft);
}

.note-content pre {
    overflow-x: auto;
    background: var(--surface-sunken);
    border: 1px solid var(--border);
    padding: calc(var(--space) * 4);
    border-radius: var(--radius-sm);
    font-size: .88rem;
}

.note-content table { width: 100%; border-collapse: collapse; margin: calc(var(--space) * 5) 0; font-size: .93rem; }
.note-content th, .note-content td { border: 1px solid var(--border); padding: 8px 11px; text-align: left; }
.note-content th { background: var(--surface-sunken); font-weight: 600; }

/* Eigenaarsacties horen bij het beheer, niet bij de inhoud: apart gezet. */
.note-view .button-row {
    margin-top: calc(var(--space) * 9);
    padding-top: calc(var(--space) * 5);
    border-top: 1px solid var(--border);
}

.media-embed {
    width: 100%;
    max-width: 40rem;
    margin: calc(var(--space) * 6) auto;
    border-radius: var(--radius);
    overflow: hidden;
    background: var(--surface-sunken);
}

.media-embed iframe { width: 100%; height: 100%; border: 0; display: block; }

/* ── Poorten: wachtwoord, tijd, locatie ──────────────────────────────────── */

.gate {
    text-align: center;
    padding: calc(var(--space) * 8) calc(var(--space) * 2) calc(var(--space) * 4);
}

.gate-icon {
    display: grid;
    place-items: center;
    width: 60px; height: 60px;
    margin: 0 auto calc(var(--space) * 5);
    border-radius: 50%;
    background: var(--surface-sunken);
    border: 1px solid var(--border);
    font-size: 1.6rem;
    line-height: 1;
}

.gate h2 {
    font-size: 1.22rem;
    margin-bottom: calc(var(--space) * 2);
}

.gate .muted { max-width: 32ch; margin-inline: auto; }

.gate form {
    max-width: 17rem;
    margin: calc(var(--space) * 6) auto 0;
    display: grid;
    gap: calc(var(--space) * 3);
}

.gate .button { width: 100%; }
.gate .flash { text-align: left; margin-bottom: calc(var(--space) * 4); }

/* ── Tabellen ────────────────────────────────────────────────────────────── */

.table-wrap { overflow-x: auto; margin-inline: calc(var(--space) * -2); padding-inline: calc(var(--space) * 2); }

table.data { width: 100%; border-collapse: collapse; font-size: .9rem; }

table.data th {
    text-align: left;
    padding: 0 12px 9px;
    color: var(--text-faint);
    font-size: .78rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .05em;
    border-bottom: 1px solid var(--border);
}

table.data td { padding: 11px 12px; border-bottom: 1px solid var(--border); }
table.data tr:last-child td { border-bottom: 0; }
table.data tbody tr:hover { background: var(--surface-sunken); }

/* ── Statistiek ──────────────────────────────────────────────────────────── */

.stat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
    gap: calc(var(--space) * 3);
    margin-bottom: calc(var(--space) * 7);
}

.stat {
    background: var(--surface-sunken);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: calc(var(--space) * 4) calc(var(--space) * 5);
}

.stat-value {
    font-size: 1.8rem;
    font-weight: 650;
    line-height: 1.15;
    letter-spacing: -.02em;
    font-variant-numeric: tabular-nums;
}

.stat-label {
    color: var(--text-faint);
    font-size: .8rem;
    margin-top: calc(var(--space));
}

.sparkline {
    display: flex;
    align-items: flex-end;
    gap: 3px;
    height: 110px;
    padding: calc(var(--space) * 3);
    background: var(--surface-sunken);
    border: 1px solid var(--border);
    border-radius: var(--radius);
}

.sparkline .bar {
    flex: 1;
    min-height: 3px;
    border-radius: 3px 3px 0 0;
    background: var(--accent);
    opacity: .75;
    transition: opacity .12s ease;
}

.sparkline .bar:hover { opacity: 1; }

/* ── Editor en kaart ─────────────────────────────────────────────────────── */

.map-block {
    height: 320px;
    border-radius: var(--radius);
    border: 1px solid var(--border);
    margin-bottom: calc(var(--space) * 4);
    background: var(--surface-sunken);
}

.option-block {
    border: 1px solid var(--border);
    border-left: 3px solid var(--accent);
    border-radius: var(--radius-sm);
    padding: calc(var(--space) * 5);
    margin: calc(var(--space) * 3) 0 calc(var(--space) * 6);
    background: var(--surface-sunken);
}

.option-block .field:last-child { margin-bottom: 0; }

.checkbox-row {
    display: flex;
    align-items: center;
    gap: calc(var(--space) * 3);
    margin-bottom: calc(var(--space) * 3);
}

.checkbox-row input[type=checkbox] {
    width: 17px;
    height: 17px;
    accent-color: var(--accent);
    cursor: pointer;
    flex: none;
}

.checkbox-row label {
    margin: 0;
    font-size: .95rem;
    font-weight: 500;
    color: var(--text);
    cursor: pointer;
}

.grid-2 {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
    gap: calc(var(--space) * 4);
}

.ck-editor__editable { min-height: 300px; }
.ck.ck-editor__main > .ck-editor__editable { border-radius: 0 0 var(--radius-sm) var(--radius-sm) !important; }
.ck.ck-toolbar { border-radius: var(--radius-sm) var(--radius-sm) 0 0 !important; }

.qr-preview { text-align: center; }

.qr-preview img {
    width: 220px;
    height: 220px;
    padding: 14px;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: var(--radius);
}

.qr-preview .code-line { margin-top: calc(var(--space) * 4); }

/* ── Kleine schermen ─────────────────────────────────────────────────────── */

@media (max-width: 640px) {
    .site-header {
        padding: calc(var(--space) * 3) calc(var(--space) * 4);
        flex-wrap: nowrap;
        gap: calc(var(--space) * 4);
    }

    .brand { flex: none; }

    /* Eén rij die meeschuift in plaats van een blok van twee regels. */
    .site-nav {
        gap: calc(var(--space) * 4);
        font-size: .85rem;
        flex-wrap: nowrap;
        overflow-x: auto;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
        /* Links uitlijnen: anders begint de rij bij het einde en zie je
           "Mijn notes" niet staan. */
        justify-content: flex-start;
        mask-image: linear-gradient(to right, #000 85%, transparent);
    }

    .site-nav::-webkit-scrollbar { display: none; }
    .site-nav a, .site-nav .link-button { white-space: nowrap; }
    .site-main { padding: calc(var(--space) * 5) calc(var(--space) * 4) calc(var(--space) * 16); }
    .card { padding: calc(var(--space) * 5); border-radius: var(--radius); }
    .card.narrow { padding: calc(var(--space) * 6); }
    .note-view { padding: calc(var(--space) * 6) calc(var(--space) * 5); }
    .note-item img { width: 56px; height: 56px; }
    .toolbar > * { flex: 1 1 100%; }
    .toolbar .button { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
    * { transition: none !important; animation: none !important; }
}

/* ── Paginakop ───────────────────────────────────────────────────────────── */

.page-header {
    display: flex;
    flex-wrap: wrap;
    gap: calc(var(--space) * 4);
    align-items: flex-end;
    justify-content: space-between;
    margin-bottom: calc(var(--space) * 6);
}

.page-header h1 { margin-bottom: calc(var(--space)); }
.page-header .subtitle { margin: 0; }

.quick-create {
    display: flex;
    gap: calc(var(--space) * 2);
    flex: 1 1 20rem;
    max-width: 26rem;
}

.quick-create input { flex: 1; }

.page-foot {
    margin: calc(var(--space) * 5) 0 0;
    text-align: center;
    font-size: .88rem;
}

.page-foot a { color: var(--text-soft); }

/* ── Balk boven de lijst ─────────────────────────────────────────────────── */

.list-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: calc(var(--space) * 2);
    padding-top: calc(var(--space) * 5);
    margin-top: calc(var(--space) * 5);
    border-top: 1px solid var(--border);
    font-size: .88rem;
}

.list-bar-label { color: var(--text-faint); margin-right: calc(var(--space)); }
.list-bar select { width: auto; min-width: 11rem; padding-block: 6px; font-size: .85rem; }

/* ── Lege staat ──────────────────────────────────────────────────────────── */

.empty-state {
    text-align: center;
    padding: calc(var(--space) * 12) calc(var(--space) * 4);
}

.empty-icon {
    font-size: 2.2rem;
    color: var(--border-strong);
    margin: 0 0 calc(var(--space) * 3);
}

.empty-state h2 { margin-bottom: calc(var(--space) * 2); }
.empty-state .muted { max-width: 34ch; margin-inline: auto; }

a.code-line { color: var(--text-soft); text-decoration: none; border-bottom: 1px solid var(--border-strong); }
a.code-line:hover { color: var(--accent); border-bottom-color: var(--accent); }

/* ── Pictogramknop ───────────────────────────────────────────────────────── */

.button.icon {
    padding: 0;
    width: 38px;
    flex: none;
    /* stretch in plaats van een vaste hoogte: de knop is dan altijd precies zo
       hoog als de andere knoppen in de rij, ongeacht lettergrootte of zoom. */
    align-self: stretch;
    min-height: 38px;
}

.button.icon svg { display: block; }

.button.small.icon { width: 32px; min-height: 32px; }

/* Verwijderen is zeldzaam en onomkeerbaar: zichtbaar maar niet luid, en pas
   uitgesproken rood zodra je erheen gaat. */
.button.ghost-danger {
    background: transparent;
    border-color: var(--border);
    color: var(--text-faint);
}

.button.ghost-danger:hover {
    background: var(--danger-soft);
    border-color: var(--danger);
    color: var(--danger);
}


/* ── Printpagina ─────────────────────────────────────────────────────────── */

.print-body {
    background: var(--bg);
    min-height: 100vh;
}

.print-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: calc(var(--space) * 3);
    padding: calc(var(--space) * 4) calc(var(--space) * 6);
    background: var(--surface);
    border-bottom: 1px solid var(--border);
}

.print-toolbar .checkbox-row { margin: 0; font-size: .88rem; }

.print-sheet {
    max-width: 30rem;
    margin: calc(var(--space) * 10) auto;
    padding: calc(var(--space) * 10);
    background: #fff;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow);
    text-align: center;
    color: #1c1b19;
}

.print-sheet h1 {
    font-size: 1.35rem;
    margin: 0 0 calc(var(--space) * 6);
    color: inherit;
}

.print-qr {
    display: block;
    width: 100%;
    max-width: 20rem;
    height: auto;
    margin: 0 auto;
    image-rendering: pixelated;
}

.print-url {
    margin: calc(var(--space) * 6) 0 0;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: .72rem;
    color: #55524c;
    word-break: break-all;
}

/* Op papier telt alleen het vel: geen werkbalk, geen randen, geen schaduw, en
   altijd zwart op wit — ook als het scherm in donkere modus staat. */
@media print {
    @page { margin: 14mm; }

    .print-toolbar { display: none !important; }

    .print-body { background: #fff; }

    .print-sheet {
        max-width: none;
        margin: 0;
        padding: 0;
        border: 0;
        border-radius: 0;
        box-shadow: none;
        background: #fff;
        color: #000;
    }

    .print-qr { max-width: 90mm; }

    .print-url { color: #333; }
}

/* ── Labelprinter-blok op de printpagina ─────────────────────────────────── */

.label-block {
    max-width: 30rem;
    margin: 0 auto calc(var(--space) * 12);
    padding: calc(var(--space) * 7);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
}

.label-block .muted { font-size: .9rem; margin-top: 0; }
.label-block .toolbar { margin: calc(var(--space) * 5) 0; }
.label-block .toolbar .field { flex: 1 1 10rem; }
.label-block .toolbar select { width: 100%; }

.label-preview {
    display: grid;
    place-items: center;
    padding: calc(var(--space) * 5);
    background: var(--surface-sunken);
    border: 1px dashed var(--border-strong);
    border-radius: var(--radius);
}

.label-preview img {
    display: block;
    max-width: 190px;
    width: 100%;
    height: auto;
    background: #fff;
    image-rendering: pixelated;
}

@media print {
    .label-block { display: none !important; }
}

/* ── Bluetooth-testconsole ───────────────────────────────────────────────── */

.bt-options {
    margin: calc(var(--space) * 5) 0 calc(var(--space) * 4);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface-sunken);
}

.bt-options summary {
    padding: calc(var(--space) * 3) calc(var(--space) * 4);
    cursor: pointer;
    font-size: .88rem;
    font-weight: 550;
    color: var(--text-soft);
}

.bt-options[open] summary { border-bottom: 1px solid var(--border); }
.bt-options .grid-2 { padding: calc(var(--space) * 4); }
.bt-options .field-hint { padding: 0 calc(var(--space) * 4) calc(var(--space) * 4); margin: 0; }

.bt-log {
    max-height: 13rem;
    overflow-y: auto;
    padding: calc(var(--space) * 3) calc(var(--space) * 4);
    background: var(--surface-sunken);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: .74rem;
    line-height: 1.65;
    color: var(--text-soft);
}

.bt-line { overflow-wrap: anywhere; }
.bt-line.bt-ok { color: var(--success); }
.bt-line.bt-warn { color: var(--warning); }
.bt-line.bt-error { color: var(--danger); }

.label-block h2 .badge { vertical-align: middle; margin-left: calc(var(--space)); }

@media print {
    #bluetooth-panel { display: none !important; }
}

/* ── Inlog- en registratieschermen ───────────────────────────────────────── */

/* Op deze pagina's is er geen navigatie en telt maar één ding: het formulier.
   De koptekst met het merk vervalt daarom; het logo neemt die rol over. */
body.auth .site-header { display: none; }

body.auth {
    /* Een zachte lichtbron achter de kaart, zodat het vlak niet dood aanvoelt. */
    background:
        radial-gradient(60rem 32rem at 50% -6rem, var(--accent-soft), transparent 70%),
        var(--bg);
    min-height: 100vh;
}

body.auth .site-main {
    display: flex;
    /* Kolom, geen rij: anders komen de meldingen náást de kaart te staan in
       plaats van erboven. */
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: calc(100vh - 5rem);
    padding-top: calc(var(--space) * 10);
    padding-bottom: calc(var(--space) * 10);
}

body.auth .site-main > * { width: 100%; max-width: 26rem; }

body.auth .card.narrow {
    box-shadow: var(--shadow-lift);
    border-radius: var(--radius-lg);
}

body.auth .site-footer { display: none; }

.auth-header {
    text-align: center;
    margin-bottom: calc(var(--space) * 7);
}

.auth-logo {
    display: block;
    width: 72px;
    height: 72px;
    margin: 0 auto calc(var(--space) * 5);
    border-radius: 18px;
    background: #fff;
    border: 1px solid var(--border);
    box-shadow: var(--shadow);
}

.auth-header h1 {
    font-size: 1.4rem;
    margin-bottom: calc(var(--space) * 2);
}

.auth-header .subtitle {
    margin: 0;
    font-size: .94rem;
}

/* De flitsmeldingen horen boven de kaart, niet erbuiten in de hoek. */
body.auth .flashes {
    max-width: 26rem;
    margin-inline: auto;
}

@media (max-width: 640px) {
    body.auth .site-main {
        min-height: auto;
        padding-top: calc(var(--space) * 8);
    }

    .auth-logo { width: 64px; height: 64px; }
}

/* Op een inlogformulier is er maar één handeling; die mag de volle breedte
   krijgen in plaats van links weg te kruipen. */
body.auth form .button[type=submit],
body.auth form button[type=submit] {
    width: 100%;
    margin-top: calc(var(--space) * 2);
    padding-block: 11px;
}

body.auth .button-container,
body.auth form .button-row { justify-content: center; }

body.auth .card.narrow > .field-hint {
    text-align: center;
    margin-top: calc(var(--space) * 6);
    padding-top: calc(var(--space) * 5);
    border-top: 1px solid var(--border);
    font-size: .87rem;
}

body.auth .card.narrow > .field-hint a { color: var(--text-soft); }
body.auth .card.narrow > .field-hint a:hover { color: var(--accent); }

/* ── Tags ────────────────────────────────────────────────────────────────── */

.tag-filter {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: calc(var(--space) * 2);
    padding-top: calc(var(--space) * 5);
    margin-top: calc(var(--space) * 5);
    border-top: 1px solid var(--border);
}

.tag-filter-label {
    color: var(--text-faint);
    font-size: .8rem;
    text-transform: uppercase;
    letter-spacing: .06em;
    margin-right: calc(var(--space));
}

.tag-chip {
    display: inline-flex;
    align-items: center;
    gap: calc(var(--space) * 1.5);
    padding: 4px 11px;
    border: 1px solid var(--border-strong);
    border-radius: 999px;
    background: var(--surface);
    color: var(--text-soft);
    font: inherit;
    font-size: .82rem;
    line-height: 1.4;
    text-decoration: none;
    cursor: pointer;
    transition: background-color .12s ease, border-color .12s ease, color .12s ease;
}

.tag-chip:hover { border-color: var(--accent); color: var(--accent); }

/* Aangevinkt moet je zonder nadenken zien; kleur alleen is te subtiel, dus ook
   de rand en de vulling veranderen mee. */
.tag-chip.is-active {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--on-accent);
}

.tag-chip.is-active:hover { background: var(--accent-hover); color: var(--on-accent); }

.tag-count {
    font-size: .74rem;
    opacity: .7;
    font-variant-numeric: tabular-nums;
}

.tag-clear {
    font-size: .82rem;
    color: var(--text-faint);
    margin-left: calc(var(--space));
}

.tag-suggestions {
    display: flex;
    flex-wrap: wrap;
    gap: calc(var(--space) * 1.5);
    margin-top: calc(var(--space) * 3);
}

.note-tags { margin-top: calc(var(--space) * 1.5); }

.badge.tag {
    background: var(--surface);
    border-color: var(--border-strong);
    color: var(--text-soft);
    text-decoration: none;
}

.badge.tag:hover { border-color: var(--accent); color: var(--accent); }

/* input[type=search] weegt zwaarder dan een losse klasse, vandaar input.tag-search. */
input.tag-search {
    width: 9rem;
    flex: none;
    padding: 4px 10px;
    font-size: .82rem;
    border-radius: 999px;
}

.tag-hidden { display: contents; }

.tag-more {
    padding: 4px 11px;
    border: 1px dashed var(--border-strong);
    border-radius: 999px;
    background: none;
    color: var(--text-faint);
    font: inherit;
    font-size: .82rem;
    cursor: pointer;
}

.tag-more:hover { border-color: var(--accent); color: var(--accent); }

.tag-empty {
    margin: 0;
    font-size: .84rem;
    color: var(--text-faint);
}

/* ── Kaart en adreszoeker ────────────────────────────────────────────────── */

.address-search { margin-bottom: calc(var(--space) * 4); }
.address-search .toolbar { margin-top: calc(var(--space) * 1.5); }

.address-results {
    display: flex;
    flex-direction: column;
    gap: 1px;
    margin-top: calc(var(--space) * 2);
    font-size: .88rem;
    color: var(--text-faint);
}

.address-result {
    text-align: left;
    padding: 7px 10px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface);
    color: var(--text);
    font: inherit;
    font-size: .88rem;
    cursor: pointer;
}

.address-result:hover { border-color: var(--accent); color: var(--accent); }

/* Leaflet tekent zijn eigen achtergrond; de dashed rand van een mislukte kaart
   hoort daar niet meer bij. */
.map-block { overflow: hidden; }
.map-block .leaflet-container { height: 100%; width: 100%; font: inherit; }
.map-block .leaflet-control-attribution { font-size: .68rem; }

#location-status.is-fout { color: var(--danger); }
#location-status.is-goed { color: var(--success); }

/* ── Uitklapbare filters ─────────────────────────────────────────────────── */

/* Op een breed scherm bestaat de uitklap niet: de velden doen gewoon mee in
   dezelfde rij als het zoekveld. display:contents op een div slaat de laag plat;
   op een <details> werkt dat niet, want die rendert zijn inhoud apart. */
.filter-extra { display: contents; }
.filter-toggle { display: none; }
.filter-extra-fields { display: contents; }

@media (max-width: 719px) {
    .filter-extra {
        display: block;
        flex: 1 1 100%;
        border: 1px solid var(--border);
        border-radius: var(--radius-sm);
        background: var(--surface-sunken);
        overflow: hidden;
    }

    .filter-toggle {
        display: block;
        width: 100%;
        padding: 12px 14px;
        border: 0;
        background: none;
        color: var(--text-soft);
        font: inherit;
        font-size: .88rem;
        font-weight: 550;
        text-align: left;
        cursor: pointer;
    }

    .filter-toggle::after { content: ' ▾'; }
    .filter-extra.is-open .filter-toggle::after { content: ' ▴'; }
    .filter-extra.is-open .filter-toggle { border-bottom: 1px solid var(--border); }

    .filter-extra-fields { display: none; }

    .filter-extra.is-open .filter-extra-fields {
        display: grid;
        gap: calc(var(--space) * 3);
        padding: calc(var(--space) * 4);
    }

    /* .toolbar .field select weegt zwaarder; daarom hier dezelfde diepte. */
    .toolbar .filter-extra-fields select { width: 100%; }
}

/* ── Aanraakschermen ─────────────────────────────────────────────────────── */

@media (max-width: 640px) {
    /* Vier acties naast elkaar wordt een ratjetoe van ongelijke breedtes.
       Twee bij twee is rustiger en alle labels passen. */
    .note-actions {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: calc(var(--space) * 2);
    }

    /* Ook de pictogramknop vult zijn cel, anders staat hij scheef in het raster. */
    .note-actions .button,
    .note-actions .button.icon,
    .note-actions .button.small.icon { width: 100%; }
    .note-item { gap: calc(var(--space) * 3); padding: calc(var(--space) * 3); }
    .note-meta { margin-top: calc(var(--space)); }

    .quick-create { max-width: none; }
    .page-header { gap: calc(var(--space) * 3); }

    /* Het bewerkformulier is op een telefoon toch al lang; kaart en editor
       hoeven daar niet zoveel van op te eten. */
    .map-block { height: 240px; }
    .ck-editor__editable { min-height: 200px; }
    .qr-preview img { width: 170px; height: 170px; }

    /* Het printvel raakte de schermranden. */
    .print-sheet,
    .label-block {
        margin-inline: calc(var(--space) * 4);
        padding: calc(var(--space) * 6);
    }

    .print-toolbar { padding: calc(var(--space) * 3) calc(var(--space) * 4); }
}

/* Een vinger is geen muisaanwijzer: op aanraakschermen groeien de raakvlakken
   naar de gangbare ondergrens van 44 pixels. */
@media (pointer: coarse) {
    .button, button.button { min-height: 44px; }
    .button.small { min-height: 40px; padding-inline: 14px; }
    .button.icon, .button.small.icon { width: 44px; min-height: 44px; }
    .tag-chip { padding: 8px 14px; }
    .site-nav a, .site-nav .link-button { padding-block: 10px; }

    input[type=text], input[type=email], input[type=password], input[type=url],
    input[type=number], input[type=search], input[type=datetime-local], select {
        min-height: 44px;
        /* 16px voorkomt dat iOS bij het aantikken op het veld inzoomt. */
        font-size: 16px;
    }

    .note-item > input[type=checkbox],
    .checkbox-row input[type=checkbox] { width: 22px; height: 22px; }
}

/* ── Actierij van het bewerkformulier ────────────────────────────────────── */

/* Op een breed scherm staan de labels er gewoon; het pictogram is dan
   overbodig en zou de knoppen alleen maar breder maken. */
.actions .action-compact svg { display: none; }

@media (max-width: 640px) {
    .actions { flex-wrap: nowrap; gap: calc(var(--space) * 2); }

    /* Opslaan is de handeling waarvoor je hier bent; die krijgt de ruimte die
       overblijft. De rest wordt een pictogram, zodat alles op één regel past. */
    .actions .action-primary { flex: 1; }
    .actions .spacer { display: none; }

    .actions .action-compact {
        flex: none;
        width: 44px;
        padding: 0;
        justify-content: center;
    }

    .actions .action-compact svg { display: block; }

    /* Het label blijft bestaan voor schermlezers, maar neemt geen ruimte in. */
    .actions .action-label {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
        white-space: nowrap;
    }
}