/* Boulevard Video Systeem — echte huisstijl van festivalboulevard.nl:
   zonsondergang-verloop roze -> paars (gevonden in hun logo/site-assets),
   font Montserrat (Google Fonts, lokaal gehost — moet ook zonder internet
   werken op de AP-hotspot). */

@font-face {
    font-family: "Montserrat";
    src: url("/static/fonts/montserrat-400.woff2") format("woff2");
    font-weight: 400;
    font-display: swap;
}
@font-face {
    font-family: "Montserrat";
    src: url("/static/fonts/montserrat-600.woff2") format("woff2");
    font-weight: 600;
    font-display: swap;
}
@font-face {
    font-family: "Montserrat";
    src: url("/static/fonts/montserrat-700.woff2") format("woff2");
    font-weight: 700;
    font-display: swap;
}
@font-face {
    font-family: "Montserrat";
    src: url("/static/fonts/montserrat-800.woff2") format("woff2");
    font-weight: 800;
    font-display: swap;
}
@font-face {
    /* interne naam is "Dashiell Text TEST" (zie het bestand zelf) — gebruikt als
       font-family-waarde zodat editor-preview en mpv/ASS exact dezelfde naam matchen */
    font-family: "Dashiell Text TEST";
    src: url("/static/fonts/DashiellText-Black.otf") format("opentype");
    font-display: swap;
}

:root {
    /* het echte Boulevard-verloop, licht -> donker */
    --fb-1: #fff9f9;
    --fb-2: #feeaeb;
    --fb-3: #fbc9d5;
    --fb-4: #f9a5c8;
    --fb-5: #f67eb0;
    --fb-6: #94539b;
    --fb-7: #602167;
    --fb-8: #3b0d40;

    --ink: #2a0a2e;
    --ink-light: #3b0d40;
    --paper: #fff9f9;
    --primary: #f67eb0;
    --primary-dark: #d95f92;
    --accent: #94539b;
    --muted: #c9a8ce;
    --border: #5a2860;
    --ok: #4caf82;
    --error: #f67eb0;
}

* { box-sizing: border-box; }

/* Native form-controls (iOS datumkiezer, checkboxen, etc.) renderen anders zonder
   dit: wit vlak met grijze tekst, los van ons eigen donkere thema — amper leesbaar.
   color-scheme vertelt de browser dat de PAGINA donker is, dus native UI-chrome
   volgt automatisch mee. */
:root { color-scheme: dark; }

body {
    margin: 0;
    font-family: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    background: var(--ink);
    color: var(--paper);
}

.topbar {
    background: var(--ink-light);
    border-bottom: 3px solid var(--primary);
}
.topbar-inner {
    max-width: 960px;
    margin: 0 auto;
    padding: 1rem 1.25rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.brand {
    color: var(--paper);
    text-decoration: none;
    font-weight: 800;
    font-size: 1.2rem;
    letter-spacing: 0.03em;
}
.brand-logo { height: 22px; width: auto; display: block; }
.brand { display: flex; align-items: center; gap: 0.6rem; }
.brand-sub { font-weight: 400; color: var(--muted); font-size: 0.9rem; }
nav { display: flex; align-items: center; }
nav a, .link-button {
    color: var(--paper);
    text-decoration: none;
    margin-left: 1.25rem;
    background: none;
    border: none;
    font-family: inherit;
    font-size: 1rem;
    cursor: pointer;
    white-space: nowrap;
}
nav a:hover, .link-button:hover { color: var(--primary); }

.content { max-width: 960px; margin: 0 auto; padding: 2rem 1.25rem 4rem; }

h1 { font-size: 1.6rem; font-weight: 800; margin-bottom: 1.25rem; }
h2 { font-size: 1.1rem; font-weight: 700; margin-bottom: 0.75rem; color: var(--primary); }
.muted { color: var(--muted); font-size: 0.9rem; }
.error { color: var(--fb-4); font-weight: 600; }
.success { color: var(--ok); font-weight: 600; }

.card {
    background: var(--ink-light);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 1.25rem 1.5rem;
    margin-bottom: 1.5rem;
}

.stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 1rem; }
.stat-item { background: var(--ink); border: 1px solid var(--border); border-radius: 8px; padding: 0.75rem 1rem; }
.stat-label { display: block; font-size: 0.8rem; color: var(--muted); font-weight: 600; margin-bottom: 0.25rem; }
.stat-value { font-size: 1.3rem; font-weight: 700; }
.stat-sub { display: block; font-size: 0.75rem; margin-top: 0.2rem; }
.ok-text { color: var(--ok); }
.warn-text { color: var(--fb-4); }

form label {
    display: block;
    margin-bottom: 0.75rem;
    font-size: 0.9rem;
    color: var(--muted);
    font-weight: 600;
}
form input[type=text], form input[type=password], form input[type=number], form input[type=date] {
    display: block;
    width: 100%;
    margin-top: 0.3rem;
    padding: 0.6rem 0.75rem;
    border-radius: 8px;
    border: 1px solid var(--border);
    background: var(--ink);
    color: var(--paper);
    font-family: inherit;
    font-size: 1rem;
}
form input:focus { outline: none; border-color: var(--primary); }
form.inline-form { display: inline-flex; gap: 0.5rem; align-items: center; margin: 0; }
form.inline-form input { width: auto; margin: 0; }

.btn-primary, .btn-secondary {
    border: none;
    border-radius: 8px;
    padding: 0.65rem 1.3rem;
    font-family: inherit;
    font-size: 1rem;
    font-weight: 700;
    cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center; gap: 0.45rem;
}
.btn-primary {
    background: linear-gradient(135deg, var(--fb-5), var(--fb-6));
    color: white;
}
.btn-primary:hover { filter: brightness(1.1); }
.btn-block { width: 100%; padding: 0.85rem; font-size: 1.05rem; }
.btn-secondary { background: var(--ink); color: var(--paper); border: 1px solid var(--border); }
.btn-secondary:hover { border-color: var(--primary); }

/* ---------- login ---------- */
.login-page {
    min-height: calc(100vh - 80px);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 2rem 1rem;
    background:
        radial-gradient(ellipse 80% 50% at 50% -10%, var(--fb-4) 0%, transparent 60%),
        linear-gradient(180deg, var(--fb-8) 0%, var(--ink) 55%);
    margin: -2rem -1.25rem -4rem;
}
.login-hero { text-align: center; margin-bottom: 2rem; }
.login-logo {
    width: min(420px, 80vw);
    height: auto;
    display: block;
    margin: 0 auto 1rem;
    filter: drop-shadow(0 0 40px rgba(246, 126, 176, 0.35));
}
.login-brand-sub { color: var(--muted); margin: 0.25rem 0 0; letter-spacing: 0.08em; font-size: 0.85rem; }

.login-card {
    max-width: 380px;
    width: 100%;
    background: rgba(59, 13, 64, 0.75);
    backdrop-filter: blur(6px);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 2rem;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
}
.login-card h2 { margin-top: 0; }

.badge {
    display: inline-block;
    padding: 0.1rem 0.5rem;
    border-radius: 999px;
    font-size: 0.75rem;
    margin-left: 0.3rem;
}
.badge-ok { background: var(--ok); color: #05130c; }
.badge-off { background: var(--border); color: var(--muted); }

/* upload */
.upload-box { margin-bottom: 2rem; }
.upload-dropzone {
    display: block;
    border: 2px dashed var(--border);
    border-radius: 12px;
    padding: 2rem;
    text-align: center;
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s;
}
.upload-dropzone:hover, .upload-dropzone.dragover { border-color: var(--primary); background: rgba(246, 126, 176, 0.06); }
#upload-list { margin-top: 1rem; }
.upload-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem 0.75rem;
    font-size: 0.9rem;
    border-radius: 8px;
}
.upload-row .name { flex: 0 0 auto; min-width: 10em; }
.upload-row.upload-error {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.3rem;
    background: rgba(246, 126, 176, 0.08);
    border: 1px solid var(--border);
}
.upload-row.upload-error .name {
    min-width: 0;
    width: 100%;
    white-space: normal;
    line-height: 1.5;
    font-size: 0.85rem;
}
.upload-progress {
    flex: 1;
    height: 8px;
    background: var(--ink);
    border-radius: 999px;
    overflow: hidden;
    border: 1px solid var(--border);
}
.upload-progress-bar {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, var(--fb-4), var(--fb-6));
    transition: width 0.2s;
}
/* "verwerken"-fase: geen echt percentage bekend (ffprobe/still/DB-write op de
   server), dus een schuivend streeppatroon i.p.v. een bevroren volle balk — zo blijf
   je ZIEN dat er iets gebeurt, i.p.v. dat het lijkt op een vastgelopen upload. */
.upload-progress-bar.indeterminate {
    background: repeating-linear-gradient(
        45deg, var(--fb-4), var(--fb-4) 10px, var(--fb-6) 10px, var(--fb-6) 20px
    );
    background-size: 28px 28px;
    animation: upload-indeterminate-slide 0.7s linear infinite;
}
@keyframes upload-indeterminate-slide {
    to { background-position: 28px 0; }
}
@media (prefers-reduced-motion: reduce) {
    .upload-progress-bar.indeterminate { animation: none; }
}
.upload-row.upload-error .upload-progress { display: none; }
.upload-row.upload-error .name { color: var(--error); }

.upload-row.upload-convert-offer {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.6rem;
    background: rgba(246, 126, 176, 0.08);
    border: 1px solid var(--border);
}
.upload-row.upload-convert-offer .name { min-width: 0; width: 100%; white-space: normal; line-height: 1.5; font-size: 0.9rem; }
.convert-actions { display: flex; gap: 0.6rem; }
.btn-small { padding: 0.4rem 0.9rem; font-size: 0.85rem; }
.upload-row.upload-converting { flex-wrap: wrap; }
.upload-row.upload-converting .name { min-width: 0; width: 100%; white-space: normal; font-size: 0.9rem; }

/* ---------- playlist: kaarten met uitklapbare opties (native <details>, geen
   tabel meer — werkt op elk schermformaat zonder aparte mobiele hack) ---------- */
.playlist-list { list-style: none; margin: 0; padding: 0; }
.playlist-empty { padding: 1rem 0; }
.playlist-item {
    background: var(--ink-light);
    border: 1px solid var(--border);
    border-radius: 12px;
    margin-bottom: 0.75rem;
    padding: 0.75rem 1rem;
}
.playlist-item.dragging { opacity: 0.4; }
.playlist-item.drop-target { border-top: 2px solid var(--primary); }
.playlist-item.row-live { border-color: var(--primary); background: rgba(246, 126, 176, 0.08); }

.item-row { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; }
.item-number {
    flex: 0 0 auto; min-width: 1.6em; text-align: center; font-size: 0.85rem;
    font-weight: 600; color: var(--muted);
}
.drag-handle { cursor: grab; color: var(--muted); flex: 0 0 auto; }
.thumb {
    width: 48px; height: 27px;
    object-fit: cover;
    border-radius: 4px;
    background: var(--ink);
    flex: 0 0 auto;
}
.thumb-video { display: inline-flex; align-items: center; justify-content: center; font-size: 1.1rem; }
.reorder-btns { display: flex; flex-direction: column; gap: 2px; flex: 0 0 auto; }
.reorder-btn {
    width: 26px; height: 22px;
    background: var(--ink); color: var(--muted); border: 1px solid var(--border); border-radius: 4px;
    cursor: pointer; font-size: 0.65rem; line-height: 1; padding: 0;
}
.reorder-btn:hover { color: var(--primary); border-color: var(--primary); }
.reorder-btn:disabled { opacity: 0.3; cursor: default; }
.reorder-btn:disabled:hover { color: var(--muted); border-color: var(--border); }
.item-main { flex: 1 1 160px; min-width: 0; }
.item-name { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.item-meta { font-size: 0.8rem; color: var(--muted); display: flex; align-items: center; gap: 0.4rem; flex-wrap: wrap; }
.badge-scheduled { background: var(--accent); color: white; }
.badge-expired { background: var(--error); color: white; }
.item-expired { opacity: 0.55; }
#delete-expired-btn { margin-top: 1rem; }

.play-now-btn, .delete-btn, .duplicate-btn, .text-edit-btn, .text-toggle-btn {
    background: none;
    border: 1px solid var(--border);
    color: var(--muted);
    border-radius: 8px;
    width: 40px; height: 40px;
    cursor: pointer;
    font-size: 0.9rem;
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    font-weight: 700;
}
.play-now-btn:hover { color: var(--fb-3); border-color: var(--fb-3); }
.duplicate-btn:hover { color: var(--primary); border-color: var(--primary); }
.duplicate-btn:disabled { opacity: 0.4; cursor: default; }
.delete-btn:hover { color: var(--error); border-color: var(--error); }
.text-edit-btn:hover { color: var(--primary); border-color: var(--primary); }
.text-toggle-btn:hover { color: var(--primary); border-color: var(--primary); }
/* Standaard subtiel ("hidden"), licht op zodra het item al tekst-overlays heeft —
   zo zie je in de playlist in 1 oogopslag welke items al tekst hebben. */
.text-edit-btn.has-text {
    background: linear-gradient(135deg, var(--fb-5), var(--fb-6));
    color: white;
    border-color: transparent;
}
.text-edit-btn.has-text:hover { filter: brightness(1.1); color: white; }

/* toggle-switch i.p.v. kale checkbox voor "ingeschakeld" — duidelijker aan/uit-status */
.switch { position: relative; display: inline-flex; width: 42px; height: 26px; flex: 0 0 auto; cursor: pointer; }
.switch input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.switch-track { position: absolute; inset: 0; background: var(--border); border-radius: 999px; transition: background 0.15s; pointer-events: none; }
.switch-track::before {
    content: "";
    position: absolute;
    width: 20px; height: 20px;
    left: 3px; top: 3px;
    background: var(--paper);
    border-radius: 50%;
    transition: transform 0.15s;
}
.switch input:checked ~ .switch-track { background: var(--ok); }
.switch input:checked ~ .switch-track::before { transform: translateX(16px); }
.switch input:focus-visible ~ .switch-track { outline: 2px solid var(--primary); outline-offset: 2px; }

/* uitklapbare opties — native <details>, dus geen JS nodig voor open/dicht en
   werkt hetzelfde op elk apparaat (macOS zowel als iOS). */
.item-options { margin-top: 0.5rem; }
.item-options summary {
    cursor: pointer;
    color: var(--muted);
    font-size: 0.85rem;
    font-weight: 600;
    list-style: none;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}
.item-options summary::-webkit-details-marker { display: none; }
.item-options summary::before { content: "▸"; font-size: 0.7rem; transition: transform 0.15s; }
.item-options[open] summary::before { transform: rotate(90deg); }
.item-options summary:hover { color: var(--primary); }
.options-body {
    margin-top: 0.6rem;
    padding: 0.85rem;
    background: var(--ink);
    border: 1px solid var(--border);
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
}
.option-field {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    font-size: 0.85rem;
    color: var(--muted);
    font-weight: 600;
    max-width: 16em;
}
.option-field input[type=number] {
    background: var(--ink-light);
    color: var(--paper);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 0.4rem 0.6rem;
    font-family: inherit;
    font-size: 0.95rem;
    width: 6em;
}
.option-group { display: flex; flex-direction: column; gap: 0.4rem; }
.check-label { display: flex; align-items: center; gap: 0.5rem; font-size: 0.85rem; color: var(--paper); font-weight: 600; cursor: pointer; }
.check-label input[type=checkbox] { width: 18px; height: 18px; accent-color: var(--primary); cursor: pointer; }
.option-group input[type=date] {
    background: var(--ink-light);
    color: var(--paper);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 0.4rem 0.6rem;
    font-family: inherit;
    font-size: 0.9rem;
    width: fit-content;
}
.field-hint { margin: 0; font-size: 0.75rem; color: var(--muted); }

.hidden { display: none !important; }

.now-playing-panel {
    background: var(--ink-light);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 1rem 1.25rem;
    margin-bottom: 1.5rem;
}
.np-empty { font-size: 0.95rem; }
.np-row { display: flex; align-items: center; gap: 0.9rem; margin-bottom: 0.6rem; }
.np-playpause {
    flex: 0 0 auto;
    width: 44px; height: 44px;
    border-radius: 50%;
    border: none;
    background: linear-gradient(135deg, var(--fb-5), var(--fb-6));
    color: white;
    font-size: 1.1rem;
    cursor: pointer;
}
.np-playpause:hover { filter: brightness(1.1); }
.np-shuffle-btn {
    flex: 0 0 auto; width: 36px; height: 36px; border-radius: 50%;
    border: 1px solid var(--border); background: var(--ink);
    color: var(--muted); font-size: 0.95rem; cursor: pointer;
}
.np-shuffle-btn:hover { border-color: var(--primary); }
.np-shuffle-btn.active { background: linear-gradient(135deg, var(--fb-5), var(--fb-6)); border-color: transparent; color: white; }
.np-info { min-width: 0; flex: 1; }
.np-name { font-weight: 700; display: flex; align-items: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.np-time { font-size: 0.85rem; color: var(--muted); margin-top: 0.15rem; }
/* input[type=range] heeft op iOS Safari geen bruikbare default-styling (dunne
   lijn, nauwelijks aan te raken) — expliciet -webkit-appearance:none en een eigen
   track/thumb, met een groot touch-target (mag groter zijn dan de zichtbare thumb). */
.np-seekbar {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 28px;
    background: transparent;
    cursor: pointer;
    margin: 0;
    touch-action: pan-x;
}
.np-seekbar::-webkit-slider-runnable-track {
    height: 6px;
    border-radius: 999px;
    background: var(--ink);
    border: 1px solid var(--border);
}
.np-seekbar::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 22px; height: 22px;
    margin-top: -8px;
    border-radius: 50%;
    background: var(--primary);
    border: 2px solid var(--paper);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
}
.np-seekbar::-moz-range-track {
    height: 6px;
    border-radius: 999px;
    background: var(--ink);
    border: 1px solid var(--border);
}
.np-seekbar::-moz-range-thumb {
    width: 22px; height: 22px;
    border-radius: 50%;
    background: var(--primary);
    border: 2px solid var(--paper);
}
.np-seekbar:disabled { cursor: default; opacity: 0.5; }
.np-seekbar:disabled::-webkit-slider-thumb { background: var(--muted); }

.live-dot {
    display: inline-block;
    width: 9px; height: 9px;
    border-radius: 50%;
    background: var(--ok);
    margin-right: 0.4rem;
    flex: 0 0 auto;
    animation: live-pulse 1.6s infinite;
}
@keyframes live-pulse {
    0% { box-shadow: 0 0 0 0 rgba(76, 175, 130, 0.5); }
    70% { box-shadow: 0 0 0 6px rgba(76, 175, 130, 0); }
    100% { box-shadow: 0 0 0 0 rgba(76, 175, 130, 0); }
}
/* ---------- mobiel ---------- */
@media (max-width: 640px) {
    .topbar-inner { flex-direction: column; gap: 0.6rem; padding: 0.85rem 1rem; }
    .brand { flex-direction: column; gap: 0.35rem; }
    .brand-sub { display: none; }
    .brand-logo { height: 26px; }
    nav { width: 100%; justify-content: center; gap: 1.5rem; }
    nav a, .link-button { margin-left: 0; font-size: 0.9rem; }
    .content { padding: 1.5rem 1rem 3rem; }
    h1 { font-size: 1.35rem; }

    /* item-row is al flex-wrap, dus valt vanzelf netjes uiteen — hoeft geen aparte
       kaart/tabel-hack zoals eerder. Alleen de naam mag hier wrappen i.p.v. afkappen. */
    .item-name { white-space: normal; }

    .upload-row { flex-wrap: wrap; }
    .upload-row .name { min-width: 0; width: 100%; white-space: normal; word-break: break-word; }
    .upload-progress { width: 100%; }

    form.inline-form { flex-wrap: wrap; }

    .editor-layout { flex-direction: column; }
    .editor-sidebar { width: 100%; }
}

/* ---------- tekst-op-beeld editor ---------- */
.back-link { display: inline-block; color: var(--muted); text-decoration: none; margin-bottom: 0.75rem; font-size: 0.9rem; }
.back-link:hover { color: var(--primary); }

.editor-layout { display: flex; gap: 1.5rem; align-items: flex-start; margin-top: 1rem; }
.editor-canvas-wrap { flex: 1 1 auto; min-width: 0; }
.editor-canvas {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    background-color: #000;
    border-radius: 12px;
    border: 1px solid var(--border);
    overflow: hidden;
}
#preview-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    pointer-events: none; /* klikken moeten bij de sleepbare .overlay-box'en terechtkomen */
}
/* Server rendert de accurate preview via ffmpeg/libass — dat kost iets van tijd
   (niet instant zoals een CSS-update), dus tijdens dat moment expliciet tonen dat
   er ververst wordt i.p.v. de gebruiker te laten denken dat het al klopt. */
.preview-loading {
    position: absolute;
    top: 0.6rem;
    right: 0.6rem;
    padding: 0.3em 0.7em;
    background: rgba(0, 0, 0, 0.65);
    color: #fff;
    font-size: 0.8rem;
    border-radius: 6px;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.15s ease;
    z-index: 5;
}
.preview-loading.visible { opacity: 1; }
.exact-render-overlay {
    position: absolute;
    inset: 0;
    z-index: 20;
    background: #000;
    display: flex;
    align-items: center;
    justify-content: center;
}
.exact-render-overlay img { width: 100%; height: 100%; object-fit: cover; }
.exact-render-close {
    position: absolute;
    top: 0.6rem;
    right: 0.6rem;
    z-index: 21;
}
.exact-render-badge {
    position: absolute;
    top: 0.6rem;
    left: 0.6rem;
    z-index: 21;
    padding: 0.3em 0.7em;
    background: rgba(0, 0, 0, 0.65);
    color: #fff;
    font-size: 0.8rem;
    border-radius: 6px;
}
.overlay-box {
    position: absolute;
    transform: translate(-50%, -50%);
    cursor: move;
    padding: 0.2em 0.4em;
    outline: 1px dashed rgba(255, 255, 255, 0); /* onzichtbaar tenzij hover/selected — de tekst zelf is nu al het aanwijspunt */
    /* GEEN max-width: moet 1 regel blijven voor correcte breedtemeting (zie snap-logica). */
    touch-action: none; /* anders kaapt iOS de sleepbeweging als pagina-scroll/pinch-zoom */
    transition: outline-color 0.1s ease;
}
.overlay-box:hover { outline-color: rgba(255, 255, 255, 0.5); }
.overlay-box.selected { outline: 2px solid var(--primary); outline-style: solid; }
.overlay-text {
    /* Canva-achtig: de tekst is ALTIJD gewoon zichtbaar en beweegt/verandert
       INSTANT mee (puur CSS, geen server-call) — geen wachten meer op een
       gedebouncede render. -webkit-text-stroke benadert de \bord2-zwarte rand
       van de echte ASS-render, zodat het er ook meteen op lijkt i.p.v. compleet
       anders ogen tot de volgende accurate-render-klik. */
    white-space: nowrap;
    line-height: 1.1;
    outline: none;
    cursor: inherit; /* = "move" van .overlay-box, tenzij nu bewerkt wordt (zie hieronder) */
    min-width: 1em;
    -webkit-text-stroke: 2px black;
    paint-order: stroke fill;
    /* Browsers passen standaard kerning/ligatures toe, libass (mpv, echte scherm)
       niet — zonder dit meet de editor een net iets andere breedte dan wat er
       werkelijk gerenderd wordt, wat links/rechts-uitlijning net-niet liet kloppen. */
    font-kerning: none;
    font-variant-ligatures: none;
    font-feature-settings: "kern" 0, "liga" 0;
}
.overlay-text[contenteditable="true"] {
    cursor: text;
    outline: 1px dashed rgba(255, 255, 255, 0.5);
}
.overlay-box.disabled { opacity: 0.35; }
.overlay-handle {
    position: absolute;
    right: -14px;
    bottom: -14px;
    width: 28px;
    height: 28px;
    background: var(--primary);
    border: 2px solid var(--paper);
    border-radius: 50%;
    cursor: nwse-resize;
    display: none;
    touch-action: none;
    /* visueel blijft het een kleiner bolletje, de klikbare/aanraakbare zone is
       groter (28px, ruim boven Apple's HIG-minimum van 44px totaal incl. padding
       is hier bewust net iets kleiner gehouden i.v.m. precisie, maar wel duidelijk
       groter dan de oorspronkelijke 16px die op een telefoon niet te raken was). */
}
.overlay-box.selected .overlay-handle { display: block; }

.qr-box { padding: 0; }
.qr-box-img { display: block; width: 100%; height: 100%; pointer-events: none; border-radius: 2px; }
.qr-add-row { display: flex; gap: 0.5rem; margin-bottom: 0.75rem; }
.qr-add-row select { flex: 1 1 auto; min-width: 0; background: var(--ink); color: var(--paper); border: 1px solid var(--border); border-radius: 6px; padding: 0 0.5rem; }
.qr-empty-hint { margin-bottom: 0.75rem; }
.qr-controls-label { font-weight: 400; }

.snap-guide {
    position: absolute;
    background: var(--primary);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.1s;
    z-index: 10;
}
.snap-guide.visible { opacity: 0.9; }
.snap-guide-v { top: 0; bottom: 0; width: 1px; transform: translateX(-50%); }
.snap-guide-h { left: 0; right: 0; height: 1px; transform: translateY(-50%); }

.editor-sidebar { flex: 0 0 280px; }
.editor-sidebar > .btn-block { margin-bottom: 0.75rem; }

.save-publish-row { display: flex; gap: 0.5rem; margin-bottom: 0.75rem; }
.save-publish-row button { flex: 1; padding: 0.85rem 0.5rem; font-size: 1.05rem; }
.draft-hint { margin: -0.25rem 0 0.75rem; font-size: 0.85rem; display: flex; align-items: center; gap: 0.35rem; }

.hdmi-panel { margin-top: 1rem; margin-bottom: 1.5rem; }
.hdmi-check { margin-top: 0.75rem; }
.hdmi-hint { font-size: 0.8rem; margin-bottom: 0.5rem; }
.hdmi-stale { display: block; color: var(--fb-5); font-weight: 600; margin-top: 0.25rem; }
#hdmi-img { width: 100%; border-radius: 8px; border: 1px solid var(--border); display: block; }
.overlay-controls.hidden { display: none; }
.overlay-controls .option-field { display: block; margin-bottom: 1rem; color: var(--muted); font-size: 0.85rem; font-weight: 600; }
.overlay-controls select {
    display: block; width: 100%; margin-top: 0.3rem; padding: 0.5rem;
    background: var(--ink); color: var(--paper); border: 1px solid var(--border); border-radius: 6px; font-family: inherit;
}
.overlay-controls input[type=range] { width: 100%; margin-top: 0.3rem; accent-color: var(--primary); }
.style-toggles { display: flex; gap: 0.5rem; margin-bottom: 1rem; }
.toggle-btn {
    width: 40px; height: 40px;
    background: var(--ink); color: var(--paper); border: 1px solid var(--border); border-radius: 6px;
    cursor: pointer; font-size: 1rem;
    display: inline-flex; align-items: center; justify-content: center;
}
.toggle-btn.active { background: var(--primary); border-color: var(--primary); color: white; }
.color-swatches { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 1rem; }
.color-swatch {
    width: 28px; height: 28px; border-radius: 50%;
    border: 2px solid var(--border); cursor: pointer; padding: 0;
}
.color-swatch:hover { border-color: var(--primary); }
#ctl-color-custom { width: 28px; height: 28px; padding: 0; border: 2px solid var(--border); border-radius: 50%; cursor: pointer; background: none; }
.danger-btn { color: var(--error); border-color: var(--error); margin-top: 1.5rem; }
.danger-btn:hover { background: rgba(246, 126, 176, 0.1); }

/* ---------- Lagen-paneel (tekst-editor) ---------- */
.layers-panel { margin-bottom: 1rem; }
.layers-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.35rem; max-height: 260px; overflow-y: auto; }
.layer-row {
    display: flex; align-items: center; gap: 0.5rem;
    padding: 0.45rem 0.6rem;
    background: var(--ink); border: 1px solid var(--border); border-radius: 6px;
    cursor: pointer;
}
.layer-row:hover { border-color: var(--primary); }
.layer-row.selected { border-color: var(--primary); background: rgba(246, 126, 176, 0.1); }
.layer-row.layer-disabled { opacity: 0.5; }
.layer-icon {
    flex: 0 0 auto; width: 22px; height: 22px; border-radius: 4px;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 0.7rem; font-weight: 700; background: var(--ink-light); color: var(--muted);
}
.layer-label { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.85rem; }
.layer-visible-btn {
    flex: 0 0 auto; background: none; border: none; color: var(--muted); cursor: pointer;
    font-size: 0.9rem; padding: 0.1rem 0.3rem;
    display: inline-flex; align-items: center; justify-content: center;
}
.layer-visible-btn:hover { color: var(--primary); }
.qr-opacity-hint { margin-top: -0.5rem; margin-bottom: 1rem; font-size: 0.78rem; }

/* ---------- "+ Nieuwe QR-code"-modal in de tekst-editor (mini-qr-achtig: grote
   live preview naast de instellingen, direct-zichtbaar terwijl je kiest) ---------- */
.qr-create-modal { position: fixed; inset: 0; z-index: 200; display: flex; align-items: center; justify-content: center; padding: 1rem; }
.qr-create-modal.hidden { display: none; }
.qr-create-backdrop { position: absolute; inset: 0; background: rgba(20, 4, 22, 0.75); backdrop-filter: blur(2px); }
.qr-create-card {
    position: relative; z-index: 1; background: var(--ink-light); border: 1px solid var(--border);
    border-radius: 16px; padding: 1.5rem; max-width: 640px; width: 100%; max-height: 90vh; overflow-y: auto;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}
.qr-create-close {
    position: absolute; top: 1rem; right: 1rem; background: none; border: none;
    color: var(--muted); font-size: 1.2rem; cursor: pointer; line-height: 1;
}
.qr-create-close:hover { color: var(--primary); }
.qr-create-layout { display: flex; gap: 1.5rem; flex-wrap: wrap; margin-top: 1rem; }
.qr-create-preview-wrap {
    flex: 0 0 auto; width: 200px; height: 200px; background: white; border-radius: 12px;
    padding: 12px; display: flex; align-items: center; justify-content: center;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
}
.qr-create-preview { width: 100%; height: 100%; object-fit: contain; }
.qr-create-fields { flex: 1 1 260px; min-width: 220px; }
.qr-style-picker { display: flex; gap: 0.5rem; margin-bottom: 1rem; }
.qr-style-btn {
    flex: 1; display: flex; flex-direction: column; align-items: center; gap: 0.3rem;
    background: var(--ink); border: 2px solid var(--border); border-radius: 8px; padding: 0.6rem 0.4rem;
    color: var(--muted); cursor: pointer;
}
.qr-style-btn svg { width: 24px; height: 24px; fill: currentColor; }
.qr-style-btn span { font-size: 0.72rem; }
.qr-style-btn:hover { border-color: var(--primary); }
.qr-style-btn.active { border-color: var(--primary); background: rgba(246, 126, 176, 0.12); color: var(--paper); }
.qr-create-actions { display: flex; gap: 0.75rem; justify-content: flex-end; margin-top: 1.25rem; }
.qr-create-error { color: var(--error); margin-top: 0.5rem; text-align: right; }

/* ---------- QR-codes ---------- */
.qr-color-custom { width: 28px; height: 28px; padding: 0; border: 2px solid var(--border); border-radius: 50%; cursor: pointer; background: none; }
.qr-form { max-width: 420px; }
.qr-card-top { display: flex; gap: 1.25rem; align-items: flex-start; flex-wrap: wrap; }
.qr-thumb { width: 120px; height: 120px; border-radius: 8px; background: white; padding: 6px; flex: 0 0 auto; }
.qr-card-info { flex: 1 1 260px; min-width: 0; }
.qr-card-info h2 { margin-bottom: 0.35rem; }
.qr-url { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; word-break: break-all; }
.qr-stats-row { display: flex; gap: 0.75rem; margin-top: 0.75rem; flex-wrap: wrap; }
.qr-stats-row .stat-item { min-width: 140px; }
.qr-chart-wrap { margin-top: 1rem; }
.qr-chart { width: 100%; height: 100px; display: block; }
.qr-breakdown { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--border); }
.qr-breakdown-hint { font-size: 0.78rem; margin: 0 0 0.75rem; }
.qr-breakdown-cols { display: flex; gap: 1.5rem; flex-wrap: wrap; }
.qr-breakdown-cols > div { flex: 1 1 200px; min-width: 180px; }
.qr-breakdown-cols h3 { font-size: 0.85rem; margin: 0 0 0.4rem; color: var(--muted); }
.qr-breakdown-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.25rem; }
.qr-breakdown-list li {
    display: flex; justify-content: space-between; gap: 0.5rem;
    font-size: 0.85rem; background: var(--ink); border: 1px solid var(--border);
    border-radius: 6px; padding: 0.35rem 0.6rem;
}
.qr-breakdown-n { font-weight: 700; color: var(--primary); }
.qr-edit { margin-top: 1rem; border-top: 1px solid var(--border); padding-top: 0.75rem; }
.qr-edit summary { cursor: pointer; color: var(--muted); font-size: 0.9rem; font-weight: 600; }
.qr-edit .qr-form { margin-top: 0.75rem; }
.danger-text { color: var(--error); }