/*
    Thema "Uw Verzamelingen" (stijlgids, 2026-11-07).

    Gekozen richting: de kleuren en rust van "Bibliotheek" (warm crème, petrol, oker, serif-koppen)
    met het rasterlogo (drie vakjes gevuld = wat je hebt, één open = wat je zoekt). Ontwerp:
    https://claude.ai/artifact/AhpMX3BWD2JLgV7RZjnZpG

    Hoe te gebruiken:
    - Kleuren, letters en afstanden ALTIJD via de variabelen hieronder (var(--vc-...)), nooit een losse
      hexcode in een view of in vCollections.css. Zo blijft de site één geheel en is een kleur op één
      plek aan te passen.
    - Bootstrap blijft eronder; dit bestand past het uiterlijk van Bootstrap aan (knoppen, formulieren,
      tabellen, menu). Nieuwe pagina's gebruiken gewoon Bootstrap-klassen en de bouwstenen onderaan.
    - Volgorde in _Layout: bootstrap.css, vCollections.css, dan dit bestand (dit wint).

    Lettertypes staan op de eigen server (wwwroot/lib/fonts, licentie OFL): geen verzoeken naar Google,
    dus geen IP-adressen van bezoekers naar een derde partij.
*/

@font-face { font-family: "Fraunces"; font-style: normal; font-weight: 500; font-display: swap; src: url("../lib/fonts/fraunces-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Fraunces"; font-style: normal; font-weight: 600; font-display: swap; src: url("../lib/fonts/fraunces-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Source Sans 3"; font-style: normal; font-weight: 400; font-display: swap; src: url("../lib/fonts/source-sans-3-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Source Sans 3"; font-style: italic; font-weight: 400; font-display: swap; src: url("../lib/fonts/source-sans-3-latin-400-italic.woff2") format("woff2"); }
@font-face { font-family: "Source Sans 3"; font-style: normal; font-weight: 600; font-display: swap; src: url("../lib/fonts/source-sans-3-latin-600-normal.woff2") format("woff2"); }

:root {
    /* Grond en vlakken */
    --vc-grond: #F7F3EA;          /* achtergrond van de pagina */
    --vc-vlak: #FFFDF8;           /* kaarten, invoervelden, menu's */
    --vc-vlak-zacht: #EFEAE0;     /* rustige vlakken (groepskoppen, uitgeschakeld) */
    --vc-lijn: #E2DACB;           /* scheidingslijnen */
    --vc-lijn-sterk: #D6CCB8;     /* randen van velden en knoppen */

    /* Tekst (alle combinaties op --vc-grond halen minstens 4.5:1) */
    --vc-inkt: #2A2620;
    --vc-inkt-zacht: #5C554A;

    /* Accenten */
    --vc-accent: #1F5E5B;         /* petrol: hoofdknoppen, links, "ik zoek" */
    --vc-accent-donker: #163F3D;
    --vc-accent-licht: #E6F0EE;
    --vc-oker: #C98A1B;           /* tweede kleur, spaarzaam (logo, kleine labels) */
    --vc-oker-tekst: #8A5A0E;     /* oker als tekst (leesbaar op crème) */
    --vc-gevaar: #9C3A2E;         /* verwijderen */
    --vc-gevaar-licht: #F6E3E0;

    /* Letters */
    --vc-font-kop: "Fraunces", Georgia, "Times New Roman", serif;
    --vc-font-tekst: "Source Sans 3", system-ui, -apple-system, "Segoe UI", sans-serif;

    /* Vorm */
    --vc-radius: 12px;
    --vc-radius-klein: 8px;
    --vc-schaduw-hoes: 0 4px 10px rgba(42, 38, 32, 0.15);

    /* Bootstrap 5.1 leest deze */
    --bs-font-sans-serif: var(--vc-font-tekst);
    --bs-body-font-family: var(--vc-font-tekst);
    --bs-body-color: var(--vc-inkt);
    --bs-body-bg: var(--vc-grond);
}

/* ---- Basis ---------------------------------------------------------------------------------- */

/* 16px ook op de telefoon (was 14px): beter leesbaar, en invoervelden van 16px voorkomen dat iOS inzoomt. */
html { font-size: 16px; }

body {
    background-color: var(--vc-grond);
    color: var(--vc-inkt);
    font-family: var(--vc-font-tekst);
    line-height: 1.5;
}

h1, h2, h3, h4, .h1, .h2, .h3, .h4 {
    font-family: var(--vc-font-kop);
    font-weight: 500;
    color: var(--vc-inkt);
    line-height: 1.15;
}
h1, .h1 { font-size: 2rem; }
h2, .h2 { font-size: 1.5rem; }
h3, .h3 { font-size: 1.25rem; }

/* Links in lijsten zijn inkt (anders wordt elk overzicht één petrol vlak); bij aanwijzen petrol. */
a, a:visited { color: var(--vc-inkt); text-decoration: none; }
a:hover, a:focus { color: var(--vc-accent); text-decoration: underline; text-underline-offset: 3px; }
/* Een link die als link moet opvallen ("Alles bekijken"). */
.vc-link, .vc-link:visited { color: var(--vc-accent); font-weight: 600; }

.text-muted { color: var(--vc-inkt-zacht) !important; }

/* Eén zichtbare focusrand overal (toetsenbord), in de accentkleur in plaats van Bootstrap-blauw. */
.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-select:focus, .form-check-input:focus {
    box-shadow: 0 0 0 0.2rem var(--vc-grond), 0 0 0 0.35rem var(--vc-accent);
    border-color: var(--vc-accent);
}

/* ---- Kop en voet ---------------------------------------------------------------------------- */

header .navbar {
    background-color: var(--vc-grond) !important;
    border-bottom: 1px solid var(--vc-lijn) !important;
    box-shadow: none !important;
}
.vc-merk { display: flex; align-items: center; gap: 10px; color: var(--vc-inkt); }
.vc-merk:hover { color: var(--vc-inkt); text-decoration: none; }
.vc-merk img { width: 34px; height: 34px; }
.vc-merk span { font-family: var(--vc-font-kop); font-weight: 600; font-size: 1.3rem; }
.navbar .nav-link { color: var(--vc-inkt); font-weight: 600; }
.navbar .nav-link:hover, .navbar .nav-link:focus { color: var(--vc-accent); text-decoration: none; }
.navbar-toggler { border-color: var(--vc-lijn-sterk); background: var(--vc-vlak); min-width: 44px; min-height: 44px; }
.dropdown-menu { background-color: var(--vc-vlak) !important; border: 1px solid var(--vc-lijn); border-radius: var(--vc-radius-klein); box-shadow: 0 8px 20px rgba(42, 38, 32, 0.12); }

footer.footer {
    border-top: 1px solid var(--vc-lijn) !important;
    color: var(--vc-inkt-zacht) !important;
    background: var(--vc-grond);
    padding: 1rem 0;
    font-size: 0.9rem;
}

/* ---- Knoppen -------------------------------------------------------------------------------- */

.btn { border-radius: 10px; font-weight: 600; }
.btn-sm { border-radius: var(--vc-radius-klein); }

/* Hoofdactie: petrol. (btn-success is overal "Found it!"/opslaan, dus dezelfde kleur.) */
.btn-primary, .btn-success {
    background-color: var(--vc-accent); border-color: var(--vc-accent); color: #FFFFFF;
}
.btn-primary:hover, .btn-success:hover, .btn-primary:focus, .btn-success:focus,
.btn-primary:active, .btn-success:active {
    background-color: var(--vc-accent-donker); border-color: var(--vc-accent-donker); color: #FFFFFF;
}

/* Gewone knoppen (Terug, Bewerken, Toon alle ..., zoeken): rustig vlak met rand. */
.btn-light, .btn-info, .btn-secondary, .btn-outline-secondary, .btn-outline-dark {
    background-color: var(--vc-vlak); border-color: var(--vc-lijn-sterk); color: var(--vc-inkt);
}
.btn-light:hover, .btn-info:hover, .btn-secondary:hover, .btn-outline-secondary:hover, .btn-outline-dark:hover {
    background-color: var(--vc-vlak-zacht); border-color: var(--vc-lijn-sterk); color: var(--vc-inkt);
}

.btn-outline-primary { color: var(--vc-accent); border-color: var(--vc-accent); background: transparent; }
.btn-outline-primary:hover, .btn-outline-primary:focus { background-color: var(--vc-accent); border-color: var(--vc-accent); color: #FFFFFF; }

.btn-danger { background-color: var(--vc-gevaar); border-color: var(--vc-gevaar); color: #FFFFFF; }
.btn-danger:hover, .btn-danger:focus { background-color: #7E2E24; border-color: #7E2E24; color: #FFFFFF; }

.btn-outline-warning { color: var(--vc-oker-tekst); border-color: var(--vc-oker); background: var(--vc-vlak); }

/* ---- Formulieren ---------------------------------------------------------------------------- */

.form-control, .form-select {
    background-color: var(--vc-vlak);
    border-color: var(--vc-lijn-sterk);
    border-radius: 10px;
    color: var(--vc-inkt);
}
.form-control::placeholder { color: #857D70; }
.form-control:disabled, .form-control[readonly] { background-color: var(--vc-vlak-zacht); }
.form-check-input:checked { background-color: var(--vc-accent); border-color: var(--vc-accent); }
label, .control-label, .form-label { color: var(--vc-inkt-zacht); font-weight: 600; }

/* ---- Tabellen ------------------------------------------------------------------------------- */

.table { color: var(--vc-inkt); border-color: var(--vc-lijn); }
.table > :not(caption) > * > * { border-bottom-color: var(--vc-lijn); background-color: transparent; }
.table > thead th { font-weight: 600; color: var(--vc-inkt-zacht); border-bottom: 2px solid var(--vc-lijn-sterk); }
.table-striped > tbody > tr:nth-of-type(odd) > * { --bs-table-accent-bg: rgba(42, 38, 32, 0.03); }
.table-hover > tbody > tr:hover > * { --bs-table-accent-bg: var(--vc-accent-licht); }

.pagination .page-link { color: var(--vc-accent); background: var(--vc-vlak); border-color: var(--vc-lijn); }
.pagination .page-item.active .page-link { background: var(--vc-accent); border-color: var(--vc-accent); color: #FFFFFF; }

/* ---- Bestaande onderdelen in de nieuwe stijl ------------------------------------------------ */

/* Scheidingslijnen met tekst in formulieren ("General", "Staff", ...) */
.separator { color: var(--vc-inkt-zacht); font-size: 0.8rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; }
.separator::before, .separator::after { border-bottom-color: var(--vc-lijn); }

/* Letter- en seriekoppen in de overzichten */
.groupheader, .groupheader-nc, .ordername {
    background-color: transparent;
    border-bottom: 1px solid var(--vc-lijn);
    font-family: var(--vc-font-kop);
    color: var(--vc-inkt);
    margin-top: 1rem;
}

/* Hoezen: zachte schaduw in plaats van grijze rand */
.cover-image-container { border: 0; border-radius: 4px; box-shadow: var(--vc-schaduw-hoes); background: var(--vc-vlak-zacht); }
.overlay { background-color: rgba(42, 38, 32, 0.78); }

/* Aanwijzen + "naar boven"-knop */
#scrollToTopBtn { background-color: var(--vc-accent) !important; border-radius: 999px !important; }

/* ---- Bouwstenen voor nieuwe pagina's -------------------------------------------------------- */

/* Paginakop: titel + korte uitleg */
.vc-kop { margin: 1.25rem 0 1.25rem; }
.vc-kop h1 { margin: 0 0 0.25rem; }
.vc-kop p { margin: 0; color: var(--vc-inkt-zacht); font-size: 1.05rem; }

/* Klein label boven een blok ("Strip van de dag", "Ik zoek") */
.vc-label { font-size: 0.78rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--vc-oker-tekst); }

/* Kaart: vlak met rand */
.vc-kaart { background: var(--vc-vlak); border: 1px solid var(--vc-lijn); border-radius: var(--vc-radius); padding: 1rem; }

/* Sectiekop met een link rechts ("Laatste aanwinsten ... Alles bekijken") */
.vc-sectiekop { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; border-bottom: 1px solid var(--vc-lijn); padding-bottom: 0.5rem; margin: 2rem 0 1rem; }
.vc-sectiekop h2 { margin: 0; }

/* Menu-items en knoppen nooit onderstrepen (de algemene a:hover-regel is voor tekstlinks). */
.btn:hover, .nav-link:hover, .dropdown-item:hover, .navbar-brand:hover, .page-link:hover { text-decoration: none; }
.dropdown-item { color: var(--vc-inkt); padding: 0.5rem 1rem; }
.dropdown-item:hover, .dropdown-item:focus { background-color: var(--vc-accent-licht); color: var(--vc-inkt); }
.dropdown-divider { border-top-color: var(--vc-lijn); }

/* Letterbalk boven de overzichten ("naar letter") */
.vc-letters { display: flex; flex-wrap: wrap; gap: 0.35rem; margin: 0 0 1rem; }
.vc-letters .btn { min-width: 2.75rem; min-height: 2.75rem; padding: 0.35rem 0.6rem; font-size: 1rem; }

/* Wenslijst: elk item met hoes links, titel en details rechts */
.comic-item-column { margin-bottom: 1rem; }
.wishlistContainer { gap: 0.75rem; align-items: flex-start; }
.wishlistContainer .left img { width: 64px; border-radius: 3px; box-shadow: var(--vc-schaduw-hoes); }
.vc-item-titel { font-weight: 600; display: block; }

/* Sectiekop: link rechts nooit afbreken; op een telefoon een iets kleinere kop. */
.vc-sectiekop a { white-space: nowrap; }
@media (max-width: 575.98px) { .vc-sectiekop h2 { font-size: 1.3rem; } }

/* Groepskoppen in overzichten: geen negatieve marges van Bootstrap-rijen (streep liep buiten beeld). */
.groupheader, .groupheader-nc { margin-left: 0; margin-right: 0; }
.groupheader h4, .groupheader-nc h4 { margin: 0.25rem 0; }

/* Oude serienaam-kop (serie- en beheerpagina's) in de koppenletter. */
.SeriesName { font-family: var(--vc-font-kop) !important; font-weight: 500; font-size: 2.25rem; color: var(--vc-inkt); }

/* ---- Detailpagina van een item -------------------------------------------------------------- */
.vc-detail-hoes { display: flex; flex-direction: column; align-items: center; }
.vc-hoes-knop { border: 0; padding: 0; background: none; cursor: zoom-in; }
.vc-detail-hoes img { max-width: 100%; max-height: 420px; border-radius: 4px; box-shadow: var(--vc-schaduw-hoes); }
@media (max-width: 767.98px) { .vc-detail-hoes img { max-height: 300px; } }
.vc-detail-serie { display: inline-block; color: var(--vc-inkt-zacht); font-weight: 600; margin-bottom: 0.25rem; }
.vc-detail-titel { margin: 0 0 0.5rem; }
.vc-detail-deel { display: inline-block; min-width: 2.2rem; margin-right: 0.4rem; padding: 0 0.45rem; border-radius: var(--vc-radius-klein); background: var(--vc-accent-licht); color: var(--vc-accent-donker); font-size: 0.75em; vertical-align: 0.15em; text-align: center; }
.vc-detail-samenvatting { font-size: 1.1rem; line-height: 1.6; max-width: 40rem; }

/* Status: in bezit / op de wenslijst */
.vc-status { display: inline-block; padding: 0.15rem 0.7rem; border-radius: 999px; font-weight: 600; font-size: 0.9rem; }
.vc-status-bezit { background: var(--vc-vlak-zacht); color: var(--vc-inkt); }
.vc-status-zoek { background: var(--vc-accent-licht); color: var(--vc-accent-donker); }
.vc-status-anders { background: var(--vc-vlak-zacht); color: var(--vc-inkt-zacht); }

/* Gegevens als twee kolommen: label | waarde */
.vc-gegevens { display: grid; grid-template-columns: minmax(7rem, max-content) 1fr; gap: 0.35rem 1.25rem; margin: 0; }
.vc-gegevens dt { color: var(--vc-inkt-zacht); font-weight: 600; }
.vc-gegevens dd { margin: 0; overflow-wrap: anywhere; }

/* ---- Seriepagina (PLAN O.5) ----------------------------------------------------------------- */
.vc-serie-kop { margin: 1.25rem 0 0.5rem; }
.vc-serie-kop h1 { margin: 0.15rem 0 0.25rem; }
.vc-serie-logo { display: block; max-width: min(100%, 420px); max-height: 140px; margin: 0.5rem 0; }
.vc-serie-telling { color: var(--vc-inkt-zacht); font-size: 1.05rem; margin: 0 0 0.75rem; }

/* Hoezenraster: op een telefoon drie naast elkaar, daarna zo veel als past. */
.vc-hoezen { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem 0.75rem; }
@media (min-width: 576px) { .vc-hoezen { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 1.5rem 1rem; } }

.vc-hoes { display: flex; flex-direction: column; gap: 0.3rem; color: var(--vc-inkt); }
.vc-hoes:hover, .vc-hoes:focus { color: var(--vc-accent); text-decoration: none; }
.vc-hoes-beeld {
    position: relative; display: block; aspect-ratio: 3 / 4; border-radius: 4px; overflow: hidden;
    background: var(--vc-vlak-zacht); box-shadow: var(--vc-schaduw-hoes);
}
.vc-hoes-beeld img { width: 100%; height: 100%; object-fit: cover; display: block; }
.vc-hoes:hover .vc-hoes-beeld { outline: 2px solid var(--vc-accent); outline-offset: 2px; }
.vc-hoes-deel {
    position: absolute; left: 0.35rem; top: 0.35rem; min-width: 1.8rem; padding: 0 0.4rem; text-align: center;
    border-radius: var(--vc-radius-klein); background: var(--vc-vlak); color: var(--vc-inkt);
    font-weight: 600; font-size: 0.85rem; box-shadow: 0 1px 3px rgba(42, 38, 32, 0.25);
}
.vc-hoes-titel { font-weight: 600; line-height: 1.25; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.vc-hoes-extra { color: var(--vc-inkt-zacht); font-size: 0.85rem; line-height: 1.2; }

/* Wat we zoeken: gestippelde petrol rand, zoals het open vakje in het logo. */
.vc-hoes-gezocht .vc-hoes-beeld, .vc-zoek-hoes.vc-hoes-gezocht { box-shadow: none; outline: 2px dashed var(--vc-accent); outline-offset: -2px; }
.vc-hoes-gezocht .vc-hoes-beeld img, .vc-zoek-hoes.vc-hoes-gezocht img { opacity: 0.85; }
.vc-hoes-gezocht .vc-hoes-deel { background: var(--vc-accent); color: #FFFFFF; }

/* ---- Zoekpagina (PLAN O.5) ------------------------------------------------------------------ */
.vc-zoekbalk { max-width: 36rem; }
.vc-zoek-series { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 0.75rem; }
.vc-zoek-serie { display: flex; flex-direction: column; gap: 0.15rem; padding: 0.75rem 1rem; color: var(--vc-inkt); }
.vc-zoek-serie:hover, .vc-zoek-serie:focus { border-color: var(--vc-accent); color: var(--vc-inkt); text-decoration: none; }
.vc-zoek-serienaam { font-family: var(--vc-font-kop); font-size: 1.15rem; font-weight: 600; }

.vc-zoek-lijst { list-style: none; padding: 0; margin: 0; }
.vc-zoek-lijst li { border-bottom: 1px solid var(--vc-lijn); }
.vc-zoek-item { display: flex; align-items: center; gap: 0.85rem; padding: 0.6rem 0.25rem; color: var(--vc-inkt); }
.vc-zoek-item:hover, .vc-zoek-item:focus { background: var(--vc-accent-licht); color: var(--vc-inkt); text-decoration: none; }
.vc-zoek-hoes { flex: 0 0 48px; height: 64px; border-radius: 3px; overflow: hidden; background: var(--vc-vlak-zacht); box-shadow: var(--vc-schaduw-hoes); }
.vc-zoek-hoes img { width: 100%; height: 100%; object-fit: cover; display: block; }
.vc-zoek-tekst { flex: 1 1 auto; min-width: 0; }
.vc-zoek-serie-deel { display: block; color: var(--vc-inkt-zacht); font-size: 0.9rem; }
.vc-zoek-item .vc-status { flex: 0 0 auto; font-size: 0.8rem; }

/* ---- Invoerscherm strip/boek (PLAN O.4) ---------------------------------------------------- */
.vc-formulier-kop { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1rem; margin: 1rem 0 1.5rem; }
.vc-formulier-titel { margin: 0.15rem 0 0.2rem; font-size: 2rem; line-height: 1.15; }
.vc-formulier-sub, .vc-formulier-sub:visited { color: var(--vc-inkt-zacht); font-size: 1.05rem; }
.vc-formulier-acties { display: flex; gap: 0.6rem; }
.vc-formulier-acties .btn { min-height: 44px; padding-left: 1.1rem; padding-right: 1.1rem; }

.vc-formulier-kaart { display: flex; flex-direction: column; gap: 1rem; padding: 1.25rem 1.35rem; }
.vc-formulier-kaart h2 { margin: 0; font-size: 1.25rem; }
.vc-formulier .form-control, .vc-formulier .form-select { min-height: 44px; }

.vc-veld { display: flex; flex-direction: column; gap: 0.3rem; min-width: 0; }
.vc-veld > label { font-size: 0.9rem; margin: 0; }
.vc-hulp { font-size: 0.85rem; color: var(--vc-inkt-zacht); }
.vc-rij { display: grid; gap: 0.9rem 1rem; }
.vc-rij-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.vc-rij-serie { grid-template-columns: minmax(0, 1fr) 6rem; }
@media (min-width: 576px) { .vc-rij-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* Uitklapblok voor zelden gebruikte velden */
.vc-meer > summary { cursor: pointer; color: var(--vc-accent); font-weight: 600; padding: 0.35rem 0; min-height: 2rem; }
.vc-meer[open] > summary { margin-bottom: 0.6rem; }

/* Gesegmenteerde keuze (status, soort): radioknoppen die eruitzien als één balk */
.vc-segment { display: flex; border: 1px solid var(--vc-lijn-sterk); border-radius: 10px; overflow: hidden; background: var(--vc-vlak); }
.vc-segment-smal { max-width: 18rem; }
.vc-segment label, .vc-segment a {
    flex: 1 1 0; display: flex; align-items: center; justify-content: center; gap: 0.45rem; min-height: 46px; margin: 0;
    padding: 0.4rem 0.5rem; font-weight: 600; color: var(--vc-inkt-zacht); cursor: pointer; border-right: 1px solid var(--vc-lijn-sterk);
}
.vc-segment label:last-child, .vc-segment a:last-child { border-right: 0; }
/* Als links (keuze via de URL, zoals de volgorde op Ontbrekende delen): de gekozen heeft .actief. */
.vc-segment a { text-decoration: none; }
.vc-segment a.actief { background: var(--vc-accent-licht); color: var(--vc-accent-donker); }
.vc-segment input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.vc-segment label:has(input:checked) { background: var(--vc-accent-licht); color: var(--vc-accent-donker); }
.vc-segment label:has(input:focus-visible) { outline: 2px solid var(--vc-accent); outline-offset: -3px; }
/* Statusvakjes zoals in het logo: dicht = bezit, gestippeld = wenslijst, leeg = geen */
.vc-status-vakje { width: 15px; height: 15px; border-radius: 3px; flex: 0 0 auto; }
.vc-segment-bezit .vc-status-vakje { background: var(--vc-accent); }
.vc-segment-wenslijst .vc-status-vakje { border: 2px dashed var(--vc-accent); }
.vc-segment-geen .vc-status-vakje { border: 2px solid var(--vc-lijn-sterk); }

/* Hoezen in het formulier */
.vc-hoezen-invoer { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.vc-hoezen-invoer figure { margin: 0; display: flex; flex-direction: column; gap: 0.5rem; align-items: flex-start; }
.vc-hoezen-invoer .vc-hoes-knop, .vc-hoes-leeg { width: 100%; aspect-ratio: 3 / 4; border-radius: 4px; overflow: hidden; }
.vc-hoezen-invoer .vc-hoes-knop img, .vc-hoes-leeg img { width: 100%; height: 100%; object-fit: cover; display: block; }
.vc-hoezen-invoer .vc-hoes-knop { box-shadow: var(--vc-schaduw-hoes); }
.vc-hoes-leeg { display: flex; align-items: center; justify-content: center; border: 2px dashed var(--vc-lijn-sterk); color: var(--vc-inkt-zacht); font-size: 0.85rem; text-align: center; }
.vc-hoes-leeg img[src="data:,"] { display: none; }
.vc-hoes-leeg img:not([src="data:,"]) + span { display: none; }

.vc-bijlage-voorbeeld { width: 64px; height: 64px; object-fit: cover; border-radius: 4px; border: 1px solid var(--vc-lijn); }
.vc-formulier-voet { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 1rem; border-top: 1px solid var(--vc-lijn); margin-top: 2rem; padding-top: 1rem; }
.btn-outline-danger { color: var(--vc-gevaar); border-color: var(--vc-gevaar-licht); background: var(--vc-vlak); }
.btn-outline-danger:hover, .btn-outline-danger:focus { color: #FFFFFF; background: var(--vc-gevaar); border-color: var(--vc-gevaar); }

/* Telefoon: Opslaan en Annuleren in een vaste balk onderaan, altijd binnen duimbereik. */
@media (max-width: 767.98px) {
    .vc-formulier { padding-bottom: 5.5rem; }
    .vc-formulier-titel { font-size: 1.6rem; }
    .vc-formulier-acties {
        position: fixed; left: 0; right: 0; bottom: 0; z-index: 1030; padding: 0.6rem 1rem calc(0.75rem + env(safe-area-inset-bottom));
        background: var(--vc-vlak); border-top: 1px solid var(--vc-lijn); box-shadow: 0 -6px 16px rgba(42, 38, 32, 0.08);
    }
    .vc-formulier-acties .btn { flex: 1 1 0; }
    .vc-formulier-acties .btn-primary { flex-grow: 2; }
}
@media (max-width: 991.98px) {
    /* Telefoon/tablet: hoezen klein naast elkaar, zodat status en hoezen samen op één scherm passen. */
    .vc-hoezen-invoer { grid-template-columns: repeat(2, 7.5rem); }
}

/* ---- Hoes fotograferen (PLAN 3.6) ---------------------------------------------------------- */
.vc-hoes-foto-melding:empty { display: none; }
.vc-hoes-foto-melding { margin: 0.75rem 0 0; color: var(--vc-oker-tekst); font-size: 0.9rem; }
.vc-hoes-foto-uitleg, .vc-hoes-foto-tip { color: var(--vc-inkt-zacht); font-size: 0.9rem; margin-bottom: 0.75rem; }
.vc-hoes-foto-tip { margin: 0.75rem 0 0; }
.vc-hoes-foto-vlakken { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 1rem; align-items: start; }
/* touch-action: none, anders schuift de pagina mee als je een hoek versleept. */
.vc-hoes-foto-bron { width: 100%; height: auto; display: block; touch-action: none; background: var(--vc-vlak-zacht); border-radius: var(--vc-radius-klein); cursor: crosshair; }
.vc-hoes-foto-rechts { display: flex; flex-direction: column; gap: 0.5rem; }
.vc-hoes-foto-uitkomst { width: 100%; max-height: 50vh; object-fit: contain; display: block; box-shadow: var(--vc-schaduw-hoes); border-radius: 4px; background: var(--vc-vlak-zacht); }
@media (max-width: 575.98px) {
    .vc-hoes-foto-vlakken { grid-template-columns: 1fr; }
    .vc-hoes-foto-uitkomst { max-width: 12rem; margin: 0 auto; }
}

/* ---- Verwijderen bevestigen (PLAN O.4) ----------------------------------------------------- */
.vc-verwijder { max-width: 40rem; margin: 2rem auto; display: flex; flex-direction: column; gap: 0.75rem; }
.vc-verwijder-kaart { display: flex; gap: 1.25rem; align-items: flex-start; padding: 1.25rem; }
.vc-verwijder-hoes { width: 96px; border-radius: 4px; box-shadow: var(--vc-schaduw-hoes); flex: 0 0 auto; }
.vc-verwijder-logo { max-width: 140px; max-height: 80px; flex: 0 0 auto; }
.vc-verwijder-acties { display: flex; justify-content: flex-end; gap: 0.6rem; }
.vc-verwijder-acties .btn { min-height: 44px; }

/* Logo in het serieformulier */
.vc-logo-invoer img:not([src="data:,"]) { max-width: 100%; max-height: 140px; display: block; }
.vc-logo-invoer .vc-hoes-leeg { aspect-ratio: 3 / 1; }

/* Importeren: resultaat en scanner */
.vc-import-resultaat #summarytext { overflow-wrap: anywhere; }
.vc-qr-reader { width: 100%; border: 1px solid var(--vc-lijn); border-radius: var(--vc-radius-klein); overflow: hidden; }
/* Twee kolommen pas vanaf een iets breder scherm (keuzebalken die op een telefoon niet naast elkaar passen). */
@media (min-width: 576px) { .vc-rij-2-breed { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Afwijkingen (beheer) */
.vc-afwijking-niets { color: var(--vc-inkt-zacht); }
.vc-afwijking-tabel { margin-bottom: 0; }
.vc-afwijking-tabel td { vertical-align: middle; }
.vc-afwijking-groep + .vc-afwijking-groep { margin-top: 0.75rem; padding-top: 0.75rem; border-top: 2px solid var(--vc-lijn); }
.vc-ontbreekt { overflow-wrap: anywhere; }

/* Importresultaat (PLAN 3.1/3.2) */
.vc-import-titel { font-weight: 600; font-size: 1.1rem; margin-bottom: 0.25rem; }
.vc-import-waarschuwingen { margin: 0 0 0.75rem; padding-left: 1.2rem; color: var(--vc-oker-tekst); }
.vc-import-keuzes { display: flex; flex-direction: column; gap: 0.4rem; margin-top: 0.5rem; }
/* Keuzelijst: kaartje per treffer (knop = importeren, link = StripInfo in een nieuw tabblad). */
.vc-import-keuze { border: 1px solid var(--vc-lijn); border-radius: var(--vc-radius-klein); background: var(--vc-vlak); padding: 0.5rem; display: flex; flex-direction: column; gap: 0.35rem; }
.vc-import-keuze-knop { display: flex; gap: 0.75rem; align-items: flex-start; text-align: left; border: 0; background: none; padding: 0.25rem; border-radius: var(--vc-radius-klein); color: var(--vc-inkt); min-height: 44px; width: 100%; }
.vc-import-keuze-knop:hover, .vc-import-keuze-knop:focus-visible { background: var(--vc-accent-licht); }
.vc-import-keuze-tekst { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; }
.vc-import-keuze-tekst .vc-status { align-self: flex-start; font-size: 0.8rem; }
.vc-import-keuze-opmerking { white-space: pre-line; color: var(--vc-inkt-zacht); font-size: 0.9rem; }
.vc-import-keuze-link { align-self: flex-end; font-size: 0.85rem; }
.vc-import-bestaand { padding-left: 1.2rem; }
/* Regels in covertekst en opmerkingen behouden (StripInfo-opmerkingen zijn lijstjes: "- genummerd"). */
.vc-detail-samenvatting, .vc-detail-opmerkingen { white-space: pre-line; }

/* ---- Uitgaven zoeken voor een ontbrekend deel (Views/Import/Uitgaven, js/uitgaven.js) ---------- */
.vc-uitgaven-buren { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.5rem; }
.vc-uitgave { border: 1px solid var(--vc-lijn); border-radius: var(--vc-radius-klein); padding: 0.75rem; margin-top: 0.75rem; background: var(--vc-vlak); }
.vc-uitgave-beste { border-color: var(--vc-accent); box-shadow: 0 0 0 1px var(--vc-accent); }
.vc-uitgave-titel { font-weight: 600; }
/* Opmerking uitgave van StripInfo is een lijstje ("- bibliofiele uitgave"): regels behouden. */
.vc-uitgave-opmerking { white-space: pre-line; color: var(--vc-inkt-zacht); font-size: 0.9rem; margin-top: 0.25rem; }
.vc-uitgave-redenen { display: flex; flex-wrap: wrap; gap: 0.35rem; margin-top: 0.4rem; }
.vc-uitgave-reden { font-size: 0.78rem; padding: 0.05rem 0.55rem; border-radius: 999px; background: var(--vc-accent-licht); color: var(--vc-accent-donker); }
.vc-uitgave-al { background: var(--vc-vlak-zacht); color: var(--vc-oker-tekst); }
.vc-uitgave-acties { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.6rem; }
.vc-uitgave-uitkomst:not(:empty) { margin-top: 0.5rem; }
/* Ontbrekende delen: elk gat een link naar "Uitgaven zoeken". */
.vc-gat-link { white-space: nowrap; }