/* Lettertype: Hanken Grotesk (variabel, gewichten 100-900), zelf gehost zodat het op elk toestel hetzelfde oogt (net als de iconen).
   Bron: npm @fontsource-variable/hanken-grotesk 5.3.0, licentie SIL Open Font License (assets/fonts/hanken-grotesk/LICENSE.txt). */
@font-face {
    font-family: 'Hanken Grotesk Variable';
    font-style: normal;
    font-display: swap;
    font-weight: 100 900;
    src: url(/assets/fonts/hanken-grotesk/hanken-grotesk-latin-wght-normal.woff2) format('woff2-variations');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Hanken Grotesk Variable';
    font-style: normal;
    font-display: swap;
    font-weight: 100 900;
    src: url(/assets/fonts/hanken-grotesk/hanken-grotesk-latin-ext-wght-normal.woff2) format('woff2-variations');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
    --bg: #f3f4f7;
    --card-bg: #ffffff;
    --border: #e6e7eb;
    --text: #16181d;
    --text-muted: #70757e;
    --primary: #4f46e5;
    --primary-hover: #4338ca;
    --primary-soft: #eef1ff;
    --success-bg: #e9faf1;
    --success-text: #067a46;
    --pending-bg: #fff8e6;
    --pending-text: #a15c00;
    --error-bg: #fdecec;
    --error-text: #c31d1d;
    --input-bg: #ffffff;
    --border-strong: #d8dae0;
    --radius: 12px;
    --radius-sm: 8px;
    --shadow: 0 1px 2px rgba(16, 24, 40, 0.04), 0 1px 6px rgba(16, 24, 40, 0.05);
}

* { box-sizing: border-box; }

/* Knoppen en velden nemen het lettertype van de pagina over (anders kiest vooral Windows een eigen standaardletter) */
button, input, select, textarea {
    font-family: inherit;
}
/* Ook de ingebouwde onderdelen (notitie-editor Quill, uploadvenster Uppy) die een eigen letter meebrengen; :root erbij omdat hun css later laadt */
:root .ql-container, :root .ql-toolbar.ql-snow, :root .uppy-Root {
    font-family: inherit;
}

body {
    margin: 0;
    font-family: "Hanken Grotesk Variable", "Hanken Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    background: var(--bg);
    color: var(--text);
    line-height: 1.45;
    font-size: 15px;
}

.page {
    max-width: 760px;
    margin: 0 auto;
    padding: 32px 20px 60px;
}

.login-page {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.card {
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 18px 20px;
}

.login-card {
    width: 100%;
    max-width: 340px;
    padding: 28px 26px;
    text-align: center;
}

.login-icon {
    width: 44px;
    height: 44px;
    margin: 0 auto 14px;
    border-radius: 12px;
    background: var(--primary-soft);
    color: var(--primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
}

/* Inlogscherm: het dashboard-icoon (app-icoon) in plaats van een slotje */
.login-appicon {
    display: block;
    width: 52px;
    height: 52px;
    margin: 0 auto 14px;
}

.login-card form {
    text-align: left;
}

h1 {
    font-size: 1.3rem;
    font-weight: 700;
    margin: 0 0 2px;
    letter-spacing: -0.01em;
}

.page-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 6px;
    position: relative;
}

.page-icon {
    width: 42px;
    height: 42px;
    border-radius: 11px;
    /* altijd de donkere tegel van de tool-icoontjes, ook in de lichte weergave (keuze Noud, 5 okt 2026) */
    background: #252a4d;
    color: #7c74ff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
    flex-shrink: 0;
    box-shadow: var(--shadow);
}

/* Dashboard: het app-icoon zelf als paginaicoon (de tegel zit al in de afbeelding) */
.page-icon-img {
    background: none;
    box-shadow: none;
}

.page-icon-img img {
    display: block;
    width: 42px;
    height: 42px;
    /* schaduw zoals de kaarten */
    border-radius: 11px;
    box-shadow: var(--shadow);
}

/* Alleen genoeg ruimte links van .page (max-width 760px) laat het icoon
   echt buiten de pagina-kolom hangen; op smallere schermen blijft het
   gewoon inline naast de titel staan. */
@media (min-width: 900px) {
    .page-icon {
        position: absolute;
        left: -58px;
        top: 50%;
        transform: translateY(-50%);
    }
}

h2 {
    font-size: 0.98rem;
    font-weight: 600;
    margin: 0 0 2px;
}

.subtitle {
    color: var(--text-muted);
    margin: 0 0 18px;
    font-size: 0.87rem;
}

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

label {
    display: block;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-muted);
    margin-bottom: 5px;
    margin-top: 14px;
}

input[type="text"],
input[type="password"],
input[type="email"] {
    width: 100%;
    padding: 9px 11px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    font-size: 0.92rem;
    background: var(--input-bg);
    color: var(--text);
    transition: border-color 0.15s, box-shadow 0.15s;
}

/* Cijfer-, datum-, zoek-, url- en telefoonvelden: dezelfde opmaak als tekstvelden, maar zonder width: 100% (de breedte bepaalt de pagina). */
input[type="number"],
input[type="date"],
input[type="search"],
input[type="url"],
input[type="tel"] {
    padding: 9px 11px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    font-size: 0.92rem;
    background: var(--input-bg);
    color: var(--text);
    transition: border-color 0.15s, box-shadow 0.15s;
}

input[type="text"]:focus,
input[type="password"]:focus,
input[type="email"]:focus,
input[type="number"]:focus,
input[type="date"]:focus,
input[type="search"]:focus,
input[type="url"]:focus,
input[type="tel"]:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px var(--primary-soft);
}

button, .btn {
    display: inline-block;
    background: var(--primary);
    color: #fff;
    border: none;
    padding: 8px 15px;
    border-radius: var(--radius-sm);
    font-size: 0.87rem;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    text-align: center;
    transition: background 0.15s;
}

button:hover, .btn:hover {
    background: var(--primary-hover);
}

button:disabled {
    opacity: 0.6;
    cursor: default;
}

button:focus-visible, .btn:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

/* Knop "Bestand kiezen" van een uploadveld in dezelfde stijl als de andere knoppen */
input[type="file"] {
    font-size: 0.87rem;
    color: var(--text-muted);
}

input[type="file"]::file-selector-button {
    margin-right: 10px;
    padding: 7px 13px;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    background: var(--card-bg);
    color: var(--text);
    font: inherit;
    font-weight: 600;
    cursor: pointer;
    transition: border-color 0.15s, color 0.15s;
}

input[type="file"]::file-selector-button:hover {
    border-color: var(--primary);
    color: var(--primary);
}

/* Korte regel met een icoon ervoor (bv. "Laatst verwerkt: …") */
.meta-line {
    display: flex;
    align-items: center;
    gap: 7px;
    color: var(--text-muted);
    font-size: 0.9rem;
}

.meta-line strong {
    color: var(--text);
}

.login-card button {
    width: 100%;
    padding: 9px 15px;
    font-size: 0.9rem;
}

.btn-secondary {
    background: transparent;
    color: var(--text);
    border: 1px solid var(--border);
}

.btn-secondary:hover {
    background: var(--bg);
    color: var(--text);
}

.error-message {
    background: var(--error-bg);
    color: var(--error-text);
    padding: 9px 12px;
    border-radius: var(--radius-sm);
    font-size: 0.85rem;
    margin-bottom: 6px;
    text-align: left;
}

.top-bar {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 10px 16px;
    margin-bottom: 20px;
}

.top-bar .subtitle {
    white-space: nowrap;
}

.top-bar .who {
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--text-muted);
    font-size: 0.83rem;
}

/* Naam (naar Mijn account) en het tandwiel (naar de instellingen) rechtsboven op het dashboard */
.who-user {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    border-radius: var(--radius-sm);
    color: var(--text);
    text-decoration: none;
    font-weight: 600;
    font-size: 0.87rem;
    transition: background 0.12s;
}

.who-user .icon {
    color: var(--text-muted);
}

.who-user:hover {
    background: var(--card-bg);
}

.who-cog {
    width: 38px;
    height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: var(--text-muted);
    transition: background 0.12s, color 0.12s, transform 0.3s;
}

.who-cog:hover {
    background: var(--card-bg);
    color: var(--primary);
    transform: rotate(45deg);
}

.tool-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.tool-item {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 12px 14px;
    color: inherit;
    text-decoration: none;
    transition: transform 0.12s, box-shadow 0.12s, border-color 0.12s;
}

.tool-card {
    position: relative;
    cursor: pointer;
    padding: 12px 14px;
    transition: transform 0.12s, box-shadow 0.12s, border-color 0.12s;
}

.app-tile:hover,
.tool-item:hover,
.tool-card:hover {
    transform: translateY(-2px);
    border-color: var(--primary);
    box-shadow: 0 6px 18px rgba(16, 24, 40, 0.10);
}

/* Maakt de titel (of een ander element) de klikzone voor de hele kaart, zonder de
   iconen/formuliervelden erin ontoegankelijk te maken (die krijgen zelf z-index: 2). */
.stretched-link {
    color: inherit;
    text-decoration: none;
}

.stretched-link::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
}

.tool-icon-toggle,
.automation-controls {
    position: relative;
    z-index: 2;
}

.tool-icon {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    /* altijd de donkere variant, ook in de lichte weergave (keuze Noud, 5 okt 2026) */
    background: #252a4d;
    color: #7c74ff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    flex-shrink: 0;
}

.tool-icon-toggle {
    position: relative;
    cursor: pointer;
    transition: background 0.15s, transform 0.1s;
}

.tool-icon-toggle:hover {
    background: var(--primary);
    color: #fff;
}

.tool-icon-toggle:active {
    transform: scale(0.94);
}

.toggle-hint {
    position: absolute;
    bottom: -4px;
    right: -4px;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background: var(--primary);
    color: #fff;
    font-size: 9px;
    line-height: 15px;
    text-align: center;
    opacity: 0;
    transform: translateY(-2px);
    transition: opacity 0.15s, transform 0.15s;
    cursor: pointer;
}

.card:hover .toggle-hint {
    opacity: 1;
    transform: translateY(0);
}

.tool-item-info {
    flex: 1;
    min-width: 0;
}

.tool-item-info p {
    color: var(--text-muted);
    font-size: 0.85rem;
    margin: 4px 0 0;
}

.meta-small {
    font-size: 0.75rem !important;
}

.tool-item .btn {
    flex-shrink: 0;
    padding: 7px 14px;
}

.section-title {
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-muted);
    margin: 28px 0 10px;
}

.tool-item-row {
    display: flex;
    align-items: flex-start;
    gap: 14px;
}

/* Krap op mobiel met drie kolommen (icoon, beschrijving, knop) naast
   elkaar — de Openen-knop verhuist daarom naar een eigen regel onder de
   beschrijving, op z'n eigen (niet uitgerekte) breedte, uitgelijnd onder
   de titel/omschrijving (dus met een marge gelijk aan icoonbreedte +
   gap = 36px + 14px). Het lege ::after-element forceert de regelafbreking
   vóór de knop, zonder dat de knop zelf breder wordt gemaakt. */
@media (max-width: 480px) {
    .tool-item,
    .tool-item-row {
        flex-wrap: wrap;
        /* gap is standaard ook een rij-gap tussen wrap-regels — dat telde
           op bij de knop's eigen margin-top hieronder en gaf te veel
           witruimte. column-gap (icoon-tekst) blijft wel 14px. */
        row-gap: 0;
    }

    .tool-item::after,
    .tool-item-row::after {
        content: "";
        flex-basis: 100%;
        width: 0;
        height: 0;
        order: 2;
    }

    .tool-item > .btn,
    .tool-item-row > .btn {
        order: 3;
        flex: 0 0 auto;
        margin-top: 4px;
    }

    /* De 50px-inspringing lijnt de knop uit onder de titel/omschrijving,
       ná het icoon — alleen zinvol als er ook echt een icoon staat (bv.
       niet bij book-search.php's zoekresultaten-kaarten, die geen
       tool-icon hebben). */
    .tool-item:has(.tool-icon) > .btn,
    .tool-item-row:has(.tool-icon) > .btn {
        margin-left: 50px;
    }
}

.automation-controls {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 10px;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--border);
    font-size: 0.83rem;
    color: var(--text-muted);
}

.automation-controls[hidden] {
    display: none;
}

.automation-controls select {
    padding: 5px 8px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--input-bg);
    color: var(--text);
    font-size: 0.83rem;
}

.automation-controls .btn {
    padding: 5px 12px;
    font-size: 0.8rem;
}

.automation-controls .btn[type="submit"] {
    margin-left: auto;
}

.back-link {
    display: inline-block;
    margin-bottom: 16px;
    color: var(--text-muted);
    text-decoration: none;
    font-size: 0.85rem;
}

.back-link:hover {
    color: var(--primary);
}

/* Icoon (svg) vóór tekst in een link/knop, bv. het tandwiel bij "Instellingen" of "Verzamelingen beheren". */
.back-link svg,
.btn-secondary svg,
.actions button svg,
.actions .btn svg {
    vertical-align: -3px;
    margin-right: 3px;
}

table {
    width: 100%;
    border-collapse: collapse;
    margin: 14px 0;
    font-size: 0.87rem;
}

th, td {
    text-align: left;
    padding: 8px 10px;
}

td {
    border-bottom: 1px solid var(--border);
}

th {
    color: var(--text-muted);
    font-weight: 600;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    border-bottom: 1px solid var(--border);
}

tr:last-child td {
    border-bottom: none;
}

.log-table-wrap {
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 4px 20px;
    margin: 14px 0;
    /* Op mobiel is de tabel (4 kolommen) breder dan het scherm — laat 'm
       binnen zijn eigen kader horizontaal scrollen i.p.v. eroverheen te
       laten lopen. */
    overflow-x: auto;
}

.log-table-wrap table {
    margin: 10px 0;
}

.log-table-wrap td:first-child {
    color: var(--text-muted);
    white-space: nowrap;
}

.log-table-wrap a {
    color: var(--primary);
    text-decoration: none;
    font-weight: 500;
}

.log-table-wrap a:hover {
    text-decoration: underline;
}

.badge {
    display: inline-block;
    padding: 2px 9px;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 600;
}

.badge-success {
    background: var(--success-bg);
    color: var(--success-text);
}

.badge-pending {
    background: var(--pending-bg);
    color: var(--pending-text);
}

.badge-error {
    background: var(--error-bg);
    color: var(--error-text);
}

.badge-neutral {
    background: var(--bg);
    color: var(--text-muted);
    border: 1px solid var(--border);
}

.user-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.user-card-top {
    display: flex;
    align-items: flex-start;
    gap: 14px;
}

.user-card-info {
    flex: 1;
    min-width: 0;
}

.user-card-name {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.user-card-email {
    color: var(--text-muted);
    font-size: 0.85rem;
    margin: 2px 0 8px;
}

.user-card-permission-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid var(--border);
}

.multiselect {
    position: relative;
    flex: 1 1 240px;
    min-width: 0;
}

.multiselect summary {
    list-style: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 32px;
    padding: 5px 10px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--input-bg);
    color: var(--text);
}

.multiselect summary::-webkit-details-marker {
    display: none;
}

.multiselect-label {
    flex: 1;
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    min-width: 0;
}

.multiselect-placeholder {
    color: var(--text-muted);
    font-size: 0.83rem;
}

.multiselect-chip {
    display: inline-block;
    background: var(--primary-soft);
    color: var(--primary);
    font-size: 0.75rem;
    font-weight: 600;
    padding: 2px 9px;
    border-radius: 999px;
    white-space: nowrap;
}

.multiselect-caret {
    color: var(--text-muted);
    font-size: 0.7rem;
    flex-shrink: 0;
    align-self: flex-start;
    margin-top: 4px;
}

.multiselect[open] .multiselect-caret {
    transform: rotate(180deg);
}

.multiselect-panel {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow);
    padding: 10px 12px;
    z-index: 20;
    min-width: 220px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.multiselect-panel label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: normal;
    margin: 0;
    font-size: 0.85rem;
    color: var(--text);
}

.user-card-actions {
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex-shrink: 0;
}

.user-card-actions form {
    display: contents;
}

.user-card-actions .btn {
    white-space: nowrap;
}

.summary-box {
    background: var(--success-bg);
    color: var(--success-text);
    padding: 11px 15px;
    border-radius: var(--radius-sm);
    margin: 12px 0;
    font-weight: 600;
    font-size: 0.9rem;
}

.actions {
    margin-top: 16px;
    display: flex;
    gap: 8px;
}

@media (max-width: 480px) {
    /* Meerdere knoppen naast elkaar (bv. "Ja, toepassen"/"Nee, negeren",
       of ongelijk lange tekst als "Nieuwe zoekopdracht"/"Telegram-sessie
       beheren") knijpen op mobiel anders in elkaar — de een blijft op 1
       regel passen, de ander wrapt naar 2 regels, met ongelijke
       knophoogtes en soms zelfs overlopende tekst tot gevolg. Op mobiel
       daarom onder elkaar, elk over de volle breedte. */
    .actions {
        flex-direction: column;
        align-items: stretch;
    }

    .actions .btn,
    .actions button {
        width: 100%;
        text-align: center;
    }
}

.metadata-candidate {
    display: flex;
    gap: 16px;
    margin-bottom: 20px;
}

.metadata-candidate-cover {
    flex: 0 0 auto;
    width: 96px;
    height: 140px;
    object-fit: cover;
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow);
    background: var(--bg);
}

.metadata-candidate-info {
    flex: 1 1 auto;
    min-width: 0;
}

.metadata-candidate-info h2 {
    margin: 0 0 4px;
}

.metadata-candidate-authors {
    color: var(--text-muted);
    font-size: 0.9rem;
    margin: 0 0 8px;
}

.metadata-candidate-tags {
    display: inline-block;
    background: var(--primary-soft);
    color: var(--primary);
    font-size: 0.78rem;
    font-weight: 600;
    padding: 3px 9px;
    border-radius: 999px;
    margin: 0 0 10px;
}

.metadata-candidate-confirm {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
    background: var(--bg);
    border-radius: var(--radius-sm);
    padding: 10px 14px;
    margin-top: 14px;
}

.metadata-candidate-confirm p {
    margin: 0;
    font-weight: 600;
}

.metadata-candidate-confirm .actions {
    margin-top: 0;
}

.metadata-candidate-confirm--applied {
    background: var(--success-bg);
}

.metadata-candidate-confirm--applied p {
    color: var(--success-text);
}

pre.log {
    background: #14161d;
    color: #dfe1e8;
    padding: 13px 15px;
    border-radius: var(--radius-sm);
    overflow-x: auto;
    font-size: 0.8rem;
    line-height: 1.55;
}

.log-success {
    color: #4ade80;
    font-weight: 700;
}

.log-failure {
    color: #f87171;
    font-weight: 700;
}

.log-locked {
    color: #fbbf24;
    font-weight: 700;
}

/* Scanknop alleen op mobiel — een laptop/desktop-webcam is onhandig voor
   het scannen van een boek-barcode. "pointer: fine" (muis/trackpad) is een
   betrouwbaardere "dit is een desktop"-check dan schermbreedte: blijft
   correct verborgen ook als het browservenster smal wordt gemaakt, i.t.t.
   een breedte-media-query. scan.js zet zelf alleen het hidden-attribuut
   los van deze regel; die twee spelen hier gewoon samen. */
@media (pointer: fine) {
    #scan-isbn-button {
        display: none !important;
    }
}

/* ISBN-scan-overlay (book-search.php + scan.js). [hidden] moet hier expres
   los met hogere specificiteit staan — anders wint de eigen display:flex
   hieronder altijd van de standaard [hidden]-regel van de browser. */
.scan-overlay[hidden] {
    display: none;
}

.scan-overlay {
    position: fixed;
    inset: 0;
    background: rgba(10, 12, 20, 0.85);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    z-index: 1000;
}

.scan-overlay-content {
    background: var(--card-bg);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 20px;
    width: 100%;
    max-width: 420px;
    text-align: center;
}

#scan-isbn-video {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    background: #000;
    border-radius: var(--radius-sm);
}

#scan-isbn-status {
    margin: 12px 0;
}

/* --- donkere stand: volgt het systeem, of de keuze via de knop --- */
:root[data-theme="dark"] {
    --bg: #0f1117;
    --card-bg: #181b24;
    --border: #2a2e3a;
    --text: #e6e8ef;
    --text-muted: #9aa1b0;
    --primary: #7c74ff;
    --primary-hover: #6a62f0;
    --primary-soft: #252a4d;
    --success-bg: #12301f;
    --success-text: #4ade80;
    --pending-bg: #3a2d10;
    --pending-text: #fbbf24;
    --error-bg: #3a1618;
    --error-text: #f87171;
    --input-bg: #1e222d;
    --border-strong: #3a3f4d;
    --shadow: 0 1px 2px rgba(0, 0, 0, 0.5), 0 1px 6px rgba(0, 0, 0, 0.35);
    color-scheme: dark;
}
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
    --bg: #0f1117;
    --card-bg: #181b24;
    --border: #2a2e3a;
    --text: #e6e8ef;
    --text-muted: #9aa1b0;
    --primary: #7c74ff;
    --primary-hover: #6a62f0;
    --primary-soft: #252a4d;
    --success-bg: #12301f;
    --success-text: #4ade80;
    --pending-bg: #3a2d10;
    --pending-text: #fbbf24;
    --error-bg: #3a1618;
    --error-text: #f87171;
    --input-bg: #1e222d;
    --border-strong: #3a3f4d;
    --shadow: 0 1px 2px rgba(0, 0, 0, 0.5), 0 1px 6px rgba(0, 0, 0, 0.35);
    color-scheme: dark;
    }
}
.theme-btn { background: none; border: 1px solid var(--border); color: var(--text); padding: 2px 8px; margin: 0; border-radius: 999px; font-size: 0.85rem; line-height: 1.4; cursor: pointer; vertical-align: middle; }
.theme-btn:hover { background: var(--primary-soft); }

select, textarea, input[type="number"], input[type="date"], input[type="search"], input[type="url"], input[type="tel"] {
    background-color: var(--input-bg);
    color: var(--text);
    border-color: var(--border-strong);
}


/* Dashboard: apps als tegels (tools blijven regels) */
.app-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 14px; margin-bottom: 8px; }
.app-tile { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding: 20px; text-decoration: none; color: var(--text); min-height: 150px; transition: transform 0.12s, box-shadow 0.12s, border-color 0.12s; }
.app-tile:hover { transform: translateY(-2px); border-color: var(--primary); box-shadow: 0 6px 18px rgba(16, 24, 40, 0.10); }
.app-tile-icon { font-size: 2.2rem; line-height: 1; margin-bottom: 6px; }
.app-tile-icon img { display: block; width: 36px; height: 36px; border-radius: 10px; }   /* zelfde maat en hoeken als de tool-icoontjes (.tool-icon) */
.app-tile-title { font-size: 1.05rem; font-weight: 700; }
.app-tile-desc { color: var(--text-muted); font-size: 0.87rem; line-height: 1.4; }

/* Melding op het dashboard (bv. nachtelijke controle van de bestanden-app) */
.dash-alert { display: block; margin: 0 0 18px; padding: 12px 16px; background: #fffbe6; border: 1px solid #f3dfa2; color: #5c4700; text-decoration: none; border-radius: var(--radius-sm); }
.dash-alert:hover { border-color: #e0b94a; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .dash-alert { background: #3a3218; border-color: #6b5a22; color: #f3e2a6; } }
:root[data-theme="dark"] .dash-alert { background: #3a3218; border-color: #6b5a22; color: #f3e2a6; }

/* Gedeelde iconen (core/icons.php, Lucide) en gekleurde tegeltjes per soort bestand (file_type_icon) */
.icon { display: inline-block; flex-shrink: 0; vertical-align: -0.15em; }
.ft { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 8px; flex: 0 0 auto;
      background: color-mix(in srgb, currentColor 13%, transparent); }
.ft-folder { color: #d97706; } .ft-folder svg { fill: color-mix(in srgb, #fbbf24 55%, transparent); }
.ft-pdf { color: #dc2626; } .ft-image { color: #16a34a; } .ft-video { color: #7c3aed; } .ft-audio { color: #db2777; }
.ft-sheet { color: #059669; } .ft-slides { color: #ea580c; } .ft-doc { color: #2563eb; } .ft-archive { color: #78716c; }
.ft-code { color: #4f46e5; } .ft-text { color: #475569; } .ft-other { color: #64748b; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .ft { filter: brightness(1.35) saturate(0.9); } }
:root[data-theme="dark"] .ft { filter: brightness(1.35) saturate(0.9); }


/* Dashboard: sectiekop met de volgorde-keuze ernaast (alleen bij de tools) */
.section-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 28px 0 10px; }
.section-row .section-title { margin: 0; }
.sort-select { padding: 4px 8px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--input-bg); color: var(--text); font-size: 0.8rem; }

/* Kleine bewegingen bij aanwijzen, per soort icoon (icon() geeft elk icoon de klasse icon-<naam>). Alleen als het systeem
   geen "minder beweging" vraagt. Zelfde idee als het draaiende tandwiel op het dashboard. */
@media (prefers-reduced-motion: no-preference) {
    .icon { transition: transform 0.25s ease; }
    :is(a, button, summary, label, .card):hover > .icon-refresh-cw,
    :is(a, button, summary, label, .card):hover .tool-icon > .icon-refresh-cw { transform: rotate(180deg); }
    :is(a, button):hover > .icon-download { transform: translateY(2px); }
    :is(a, button):hover > .icon-upload { transform: translateY(-2px); }
    :is(a, button):hover > .icon-plus { transform: rotate(90deg); }
    :is(a, button):hover > .icon-log-out { transform: translateX(3px); }
    :is(a, button):hover > .icon-chevron-right, :is(a, button):hover > .icon-external-link { transform: translateX(2px); }
    :is(a, button):hover > .icon-search { transform: rotate(-12deg) scale(1.08); }
    :is(a, button):hover > .icon-trash-2 { transform: rotate(-8deg); }
    :is(a, button):hover > .icon-pencil { transform: rotate(-12deg); }
    :is(a, button):hover > .icon-star { transform: scale(1.18); }
    :is(a, button):hover > .icon-settings, :is(a, button):hover > .icon-sliders-horizontal { transform: rotate(45deg); }
    :is(a, button):hover > .icon-share-2, :is(a, button):hover > .icon-link { transform: rotate(-10deg); }
    :is(a, button):hover > .icon-copy { transform: translate(1px, -1px); }
    .card:hover .tool-icon > .icon-calendar, .card:hover .tool-icon > .icon-library { transform: rotate(-8deg); }
}

/* Zwevende uitleg (data-tip, assets/ui.js): zelfde stijl als de tips op de statuspagina */
.ui-tip { position: fixed; z-index: 1000; max-width: 280px; padding: 6px 10px; border-radius: 6px; background: #1f2430; color: #fff; font-size: 0.78rem; font-weight: 400;
    line-height: 1.4; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25); pointer-events: none; opacity: 0; visibility: hidden; transition: opacity 0.08s ease; }
.ui-tip.on { opacity: 1; visibility: visible; }
:root[data-theme="dark"] .ui-tip { background: #3a3f4d; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .ui-tip { background: #3a3f4d; } }

/* Schuifpaneel op de telefoon (Noud, 4 okt 2026; gedrag in assets/ui.js, data-drawer-open="id"). Vervangt de tabrij die opzij scrolde:
   onder de bovenbalk staat één knop met de naam van waar je bent (.ui-drawer-btn), en die schuift de zijbalk van de computer van links in
   (.ui-drawer op de zijbalk zelf, met een kop .ui-drawer-head die alleen dan zichtbaar is). Op de computer doen deze klassen niets.
   Eén breekpunt voor alle apps en de Instellingen: 900 px. "html" ervoor, zodat dit wint van de eigen regels van de zijbalk in de css van de app. */
.ui-drawer-btn, .ui-drawer-head { display: none; }
.ui-drawer-backdrop { position: fixed; inset: 0; z-index: 89; background: rgba(15, 17, 26, 0.32); opacity: 0; visibility: hidden; transition: opacity 0.2s ease, visibility 0s linear 0.2s; }
.ui-drawer-backdrop.on { opacity: 1; visibility: visible; transition: opacity 0.2s ease; }
html.ui-drawer-lock, html.ui-drawer-lock body { overflow: hidden; }
@media (max-width: 900px) {
    /* "html body" ervoor: de rij is in elke app even hoog, ook waar de app zelf alle knoppen kleiner maakt (archief.css) */
    html body .ui-drawer-btn { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 52px; margin: 0; padding: 6px 16px; border: 0; border-radius: 0; background: transparent; color: var(--text);
        font: inherit; font-size: 15px; text-align: left; cursor: pointer; box-sizing: border-box; }
    .ui-drawer-btn:hover, .ui-drawer-btn[aria-expanded="true"] { background: var(--bg); }
    .ui-drawer-btn:focus-visible { outline: 2px solid var(--primary); outline-offset: -2px; }
    .ui-drawer-btn-text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; line-height: 1.25; }
    .ui-drawer-btn-title { font-size: 16px; font-weight: 650; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .ui-drawer-btn-sub { font-size: 13px; color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .ui-drawer-btn > .icon { flex: none; color: var(--text-muted); }
    .ui-drawer-btn-ico { position: relative; flex: none; display: inline-flex; color: var(--text-muted); }
    .ui-drawer-btn .ui-drawer-dot { position: absolute; top: -3px; right: -4px; width: 8px; height: 8px; border-radius: 50%; background: var(--primary); box-shadow: 0 0 0 2px var(--card-bg); }
    .ui-drawer-btn-count { flex: none; min-width: 22px; padding: 1px 8px; border-radius: 999px; background: var(--primary-soft); color: var(--primary); font-size: 13px; font-weight: 700; text-align: center; box-sizing: border-box; }
    /* een kop op de pagina met dezelfde naam als de rij hierboven (ui_drawer_button() in core/app_topbar.php): niet twee keer (Noud, 4 okt 2026) */
    html .ui-drawer-same { display: none; }
    html .ui-drawer { position: fixed; top: 0; bottom: 0; left: 0; z-index: 90; display: flex !important; flex-direction: column; width: min(320px, 86vw); height: auto; max-height: none;
        margin: 0; padding: 0; overflow-y: auto; overscroll-behavior: contain; background: var(--card-bg); border: 0; border-right: 1px solid var(--border); border-radius: 0; box-shadow: none;
        transform: translateX(-102%); visibility: hidden; transition: transform 0.22s ease, visibility 0s linear 0.22s; }
    html .ui-drawer.is-open { transform: none; visibility: visible; transition: transform 0.22s ease; }
    .ui-drawer-head { display: flex; align-items: center; gap: 10px; position: sticky; top: 0; z-index: 2; flex: none; min-height: 52px; padding: 4px 6px 4px 16px; background: var(--card-bg); border-bottom: 1px solid var(--border); box-sizing: border-box; }
    .ui-drawer-head .ui-drawer-title { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 10px; font-weight: 650; font-size: 1rem; color: var(--text); text-decoration: none; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
    .ui-drawer-close { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 44px; height: 44px; margin: 0; padding: 0; border: 0; border-radius: 10px; background: transparent; color: var(--text-muted); cursor: pointer; }
    .ui-drawer-close:hover { background: var(--bg); color: var(--text); }
}
@media (max-width: 900px) and (prefers-reduced-motion: reduce) {
    html .ui-drawer, html .ui-drawer.is-open, .ui-drawer-backdrop, .ui-drawer-backdrop.on { transition: none; }
}

/* Geen toegang (require_script_access() in core/auth.php, Noud 4 okt 2026): hele pagina grijs, in het midden een slotje, korte tekst en een knop terug */
body.noaccess-page { min-height: 100vh; min-height: 100dvh; display: flex; align-items: center; justify-content: center; padding: 24px 20px; box-sizing: border-box; }
.noaccess { max-width: 380px; text-align: center; }
.noaccess-icon { width: 64px; height: 64px; margin: 0 auto 20px; display: flex; align-items: center; justify-content: center; border-radius: 18px; background: var(--card-bg); border: 1px solid var(--border); color: var(--primary); }
.noaccess h1 { margin: 0 0 8px; font-size: 1.4rem; letter-spacing: -0.01em; }
.noaccess p { margin: 0 0 24px; color: var(--text-muted); line-height: 1.5; }
.noaccess-btn { display: inline-flex !important; align-items: center; gap: 8px; width: auto; margin: 0; text-decoration: none; }