:root {
    --ink: #2a0a2e;
    --ink-light: #3b0d40;
    --paper: #fff9f9;
    --primary: #f67eb0;
    --primary-dark: #d95f92;
    --muted: #c9a8ce;
    --border: #5a2860;
    --ok: #4caf82;
    --error: #f67eb0;
    --warn: #f0b429;
    --offline-red: #e2515c;
}
:root { color-scheme: dark; }
* { box-sizing: border-box; }
body {
    margin: 0; background: var(--ink); color: var(--paper);
    font-family: -apple-system, "Segoe UI", sans-serif; line-height: 1.5;
}
.topbar { background: var(--ink-light); border-bottom: 1px solid var(--border); }
.topbar-inner {
    max-width: 900px; margin: 0 auto; padding: 1rem 1.5rem;
    display: flex; flex-wrap: nowrap; justify-content: space-between; align-items: center; gap: 0.5rem 1rem;
}
.topbar-inner .brand { flex-shrink: 0; }
.breadcrumb {
    max-width: 900px; margin: 0 auto; padding: 0 1.5rem 0.85rem;
    font-size: 0.8rem; color: var(--muted); display: flex; align-items: center; gap: 0.4rem; flex-wrap: wrap;
}
.breadcrumb a { color: var(--muted); text-decoration: none; }
.breadcrumb a:hover { color: var(--primary); }
.breadcrumb-sep { opacity: 0.5; }
.breadcrumb-current { color: var(--paper); font-weight: 600; }
/* Uitloggen staat BEWUST buiten .topbar-nav (los element, zie base.html) — anders
   wrapt het mee met de nav-links op smalle schermen en valt op een 2e regel i.p.v.
   vast rechtsboven te blijven staan. .topbar-nav zelf wrapt niet meer maar scrolt
   zijwaarts als het niet past (geen hamburger-menu, op verzoek). */
.topbar-nav {
    display: flex; align-items: center; gap: 1.1rem; flex: 1 1 auto; min-width: 0;
    overflow-x: auto; white-space: nowrap; scrollbar-width: none;
}
.topbar-nav::-webkit-scrollbar { display: none; }
.topbar-nav a { flex-shrink: 0; color: var(--paper); text-decoration: none; font-size: 0.9rem; font-weight: 600; }
.topbar-nav a:hover { color: var(--primary); }
.topbar-logout { flex-shrink: 0; margin-left: auto; }
.topbar-logout .link-button { white-space: nowrap; }
.brand { font-weight: 800; font-size: 1.1rem; text-decoration: none; color: var(--paper); }
.brand-sub { color: var(--muted); font-weight: 400; }
.content { max-width: 900px; margin: 0 auto; padding: 1.5rem; }
h1 { margin: 0 0 0.3rem; }
h2 { margin: 0; font-size: 1.15rem; }
h3 { font-size: 0.95rem; color: var(--muted); margin: 1rem 0 0.5rem; }
.muted { color: var(--muted); font-size: 0.9rem; }
.error { color: var(--error); 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; }

.status-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.1rem; margin-bottom: 1.75rem; }
@media (max-width: 640px) { .status-grid { grid-template-columns: 1fr; } }
.offline-notice {
    background: rgba(246, 126, 176, 0.12); border: 1px solid var(--primary); border-radius: 10px;
    padding: 0.85rem 1rem; margin-bottom: 1.25rem; font-size: 0.9rem;
}
.offline-notice.hidden { display: none; }
.info-note-variant.hidden { display: none; }
.info-note {
    background: var(--ink); border: 1px solid var(--border); border-radius: 10px;
    padding: 0.85rem 1rem; margin-bottom: 1.25rem; font-size: 0.85rem; color: var(--muted);
}
.info-note strong { color: var(--paper); }
.info-note a { color: var(--primary); }
/* state = playing/paused/offline/unknown (via JS op data-state gezet) — geeft de
   hele tegel een gekleurde linkerrand, zodat de status ook in je ooghoek al leesbaar
   is (niet alleen het kleine bolletje). */
.status-pill {
    display: flex; flex-direction: column; gap: 0.7rem;
    background: var(--ink-light); border: 1px solid var(--border); border-left: 4px solid var(--border);
    border-radius: 14px; padding: 1.1rem 1.25rem;
    transition: border-color 0.15s ease;
}
.status-pill:hover { border-color: var(--primary); border-left-color: var(--primary); }
.status-pill[data-state="playing"] { border-left-color: var(--ok); }
.status-pill[data-state="paused"] { border-left-color: var(--warn); }
.status-pill[data-state="offline"] { border-left-color: var(--offline-red); }
.status-pill-link { display: flex; flex-direction: column; gap: 0.55rem; text-decoration: none; color: inherit; cursor: pointer; position: relative; }
.status-pill-name { font-weight: 800; font-size: 1.2rem; display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; }
/* Klein "ga naar scherm"-pijltje, alleen zichtbaar bij hover — bevestigt dat de
   tegel klikbaar is zonder er permanent ruimte voor te hoeven reserveren. */
.status-pill-goto {
    position: absolute; top: 0; right: 0; color: var(--muted);
    opacity: 0; transform: translateX(-4px); transition: opacity 0.15s ease, transform 0.15s ease;
}
.status-pill-link:hover .status-pill-goto { opacity: 1; transform: translateX(0); color: var(--primary); }
.status-pill-top { display: flex; align-items: center; gap: 0.5rem; }
.status-label { font-size: 0.78rem; font-weight: 700; flex: 1; }
.status-label-online { color: var(--ok); }
.status-label-paused { color: var(--warn); }
.status-label-offline { color: var(--offline-red); }
.map-pin-link .status-pill-goto { display: none; } /* te weinig ruimte op een compacte pin */
.badge-count {
    font-size: 0.72rem; font-weight: 700; background: var(--primary); color: white;
    border-radius: 999px; padding: 0.15rem 0.6rem;
}
.back-link { color: var(--muted); text-decoration: none; font-size: 0.85rem; display: inline-block; margin-bottom: 0.75rem; }
.back-link:hover { color: var(--primary); }
.status-playpause {
    flex: 0 0 auto; width: 30px; height: 30px; border-radius: 50%; border: none;
    background: linear-gradient(135deg, var(--primary), var(--primary-dark)); color: white;
    display: flex; align-items: center; justify-content: center; cursor: pointer;
}
.status-playpause svg { flex-shrink: 0; }
.status-playpause:disabled { opacity: 0.35; cursor: default; background: var(--ink); }
.status-playpause.hidden { display: none; }
.status-pill-domain { font-size: 0.8rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.status-pill-nowplaying {
    font-size: 0.8rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    display: flex; align-items: center; gap: 0.35rem;
}
.status-pill-nowplaying.hidden { display: none; }
.status-pill-nowplaying::before { content: "▶"; font-size: 0.65rem; color: var(--ok); flex-shrink: 0; }
.status-dot { flex: 0 0 auto; width: 12px; height: 12px; border-radius: 50%; }
.status-dot-unknown { background: var(--muted); }
/* "Playing" pulseert zacht — trekt net genoeg aandacht om in 1 oogopslag te zien
   welk scherm nu echt iets laat zien, zonder afleidend te worden. */
.status-dot-playing { background: var(--ok); box-shadow: 0 0 8px var(--ok); animation: status-dot-pulse 2.2s ease-in-out infinite; }
.status-dot-paused { background: var(--warn); box-shadow: 0 0 6px var(--warn); }
.status-dot-offline { background: var(--offline-red); }
@keyframes status-dot-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } }
@media (prefers-reduced-motion: reduce) { .status-dot-playing { animation: none; } }

/* Grafische statuscijfers (uptime/temp/speelt-nu) — 3 kleine chips i.p.v. platte tekst */
.tile-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.5rem; }
.tile-stats.hidden { display: none; } /* offline: speelt/uptime/temp niet uit te lezen, dan ook niks tonen */
.tile-stat {
    background: var(--ink); border: 1px solid var(--border); border-radius: 8px;
    padding: 0.4rem 0.5rem; display: flex; flex-direction: column; gap: 0.15rem; min-width: 0;
}
.tile-stat-label { font-size: 0.65rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.03em; }
.tile-stat-value {
    font-size: 0.85rem; font-weight: 700; font-variant-numeric: tabular-nums;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* Sleep-hier-een-bestand-zone, rechtstreeks op de tegel — direct naar de wachtrij
   van dat scherm, zonder eerst naar het postvak te hoeven doorklikken. */
.tile-drop {
    border: 1.5px dashed var(--border); border-radius: 10px;
    padding: 0.7rem 0.75rem; text-align: center; cursor: pointer;
    display: flex; flex-direction: column; align-items: center; gap: 0.3rem;
    transition: border-color 0.15s ease, background 0.15s ease, transform 0.15s ease;
}
.tile-drop:hover, .tile-drop-over { border-color: var(--primary); background: rgba(246, 126, 176, 0.08); }
.tile-drop-over { transform: scale(1.015); }
.tile-drop-icon { color: var(--muted); transition: color 0.15s ease; }
.tile-drop:hover .tile-drop-icon, .tile-drop-over .tile-drop-icon { color: var(--primary); }
.tile-drop-label { font-size: 0.78rem; color: var(--muted); }
.tile-drop .upload-progress { margin-top: 0.4rem; width: 100%; }
.map-pin-drop { flex-direction: row; gap: 0.25rem; padding: 0.25rem; }
.map-pin-drop .tile-drop-icon svg { width: 13px; height: 13px; }
.login-card { max-width: 380px; margin: 3rem auto; }

input[type=text], input[type=password], input[type=number], input[type=file] {
    background: var(--ink); color: var(--paper); border: 1px solid var(--border); border-radius: 6px;
    padding: 0.5rem 0.7rem; font-size: 1rem; width: 100%; font-family: inherit;
}
label { display: block; font-size: 0.85rem; margin-bottom: 0.75rem; }
.btn-primary, .btn-secondary, .btn-danger {
    border: none; border-radius: 8px; padding: 0.6rem 1.2rem; font-weight: 700; cursor: pointer; font-size: 0.95rem;
}
.btn-primary { background: linear-gradient(135deg, var(--primary), var(--primary-dark)); color: white; }
.btn-secondary { background: var(--ink); color: var(--paper); border: 1px solid var(--border); }
.btn-danger { background: var(--offline-red); color: white; }
.btn-block { width: 100%; }
.link-button { background: none; border: none; color: var(--muted); cursor: pointer; font-size: 0.85rem; text-decoration: underline; padding: 0; }
.link-button.danger:hover { color: var(--error); }
.inline-form { display: inline; }
.inline-form-row { display: flex; gap: 0.5rem; align-items: flex-end; flex-wrap: wrap; }
.inline-form-row input { width: auto; flex: 1 1 180px; }

.device-head { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 0.75rem; }
.badge { font-size: 0.78rem; padding: 0.25rem 0.6rem; border-radius: 999px; font-weight: 600; }
.badge-ok { background: rgba(76, 175, 130, 0.18); color: var(--ok); }
.badge-stale { background: rgba(246, 197, 126, 0.18); color: #f6c57e; }
.badge-unknown { background: rgba(201, 168, 206, 0.18); color: var(--muted); }

.upload-form { display: flex; flex-direction: column; gap: 0.6rem; margin-bottom: 1rem; }
.upload-fields { display: flex; gap: 1rem; flex-wrap: wrap; }
.upload-fields label { flex: 1 1 100px; margin-bottom: 0; }
.upload-progress { height: 6px; background: var(--ink); border-radius: 4px; overflow: hidden; }
.upload-progress.hidden { display: none; }
.upload-progress-bar { height: 100%; width: 0; background: var(--primary); transition: width 0.15s ease; }
.upload-progress-bar.indeterminate {
    background: repeating-linear-gradient(45deg, var(--primary), var(--primary) 10px, var(--primary-dark) 10px, var(--primary-dark) 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; } }

.convert-offer-box {
    margin-top: 0.6rem; padding: 0.75rem 0.9rem;
    background: var(--ink); border: 1px solid var(--border); border-radius: 8px;
    display: flex; flex-direction: column; gap: 0.6rem;
}
.convert-offer-box.hidden { display: none; }
.convert-offer-box .name { font-size: 0.9rem; line-height: 1.5; }
.convert-offer-box .name.error { color: var(--error); }
.convert-actions { display: flex; gap: 0.6rem; }
.btn-small { padding: 0.4rem 0.9rem; font-size: 0.85rem; }

.queue-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.4rem; }
.queue-item {
    display: flex; align-items: center; gap: 0.6rem;
    background: var(--ink); border: 1px solid var(--border); border-radius: 8px; padding: 0.5rem 0.7rem;
}
/* Grotere tap-target (40x40, naast elkaar) — op verzoek, was te klein voor mobiel. */
.reorder-btns { display: flex; flex-direction: row; gap: 0.4rem; }
.reorder-btn { background: none; border: 1px solid var(--border); color: var(--muted); border-radius: 8px; width: 40px; height: 40px; font-size: 1rem; cursor: pointer; }
.reorder-btn:hover { color: var(--primary); border-color: var(--primary); }
.reorder-btn:disabled { opacity: 0.3; cursor: default; }
.queue-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.queue-list-history .queue-item { justify-content: space-between; opacity: 0.75; }
.history summary { cursor: pointer; color: var(--muted); font-size: 0.85rem; margin-top: 0.75rem; }

/* playlist-spiegel (device.html) — bewerkbare kopie van de echte playlist van een
   scherm, ook terwijl het offline is. */
.card-heading-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.card-heading-row h2 { margin: 0; }
.mirror-item.item-disabled { opacity: 0.5; }
.mirror-field { display: flex; align-items: center; gap: 0.3rem; font-size: 0.8rem; color: var(--muted); white-space: nowrap; }
.mirror-field-input { width: 3.2rem; background: var(--ink-light); border: 1px solid var(--border); border-radius: 6px; color: var(--paper); padding: 0.25rem 0.35rem; }
.mirror-field-enabled { width: 1.1rem; height: 1.1rem; cursor: pointer; }
.mirror-delete-btn { flex-shrink: 0; }

/* ---------- weergave-tabs (Blokjes / Plattegrond) ---------- */
.view-tabs { display: flex; gap: 0.5rem; margin-bottom: 1.1rem; }
.view-tab {
    background: var(--ink-light); border: 1px solid var(--border); color: var(--muted);
    border-radius: 999px; padding: 0.45rem 1rem; font-size: 0.85rem; font-weight: 600; cursor: pointer;
}
.view-tab:hover { border-color: var(--primary); color: var(--paper); }
.view-tab.view-tab-active { background: linear-gradient(135deg, var(--primary), var(--primary-dark)); color: white; border-color: transparent; }
#view-map.hidden, #view-tiles.hidden { display: none; }

/* ---------- festival-plattegrond ---------- */
.map-container {
    position: relative; width: 100%; border-radius: 14px; overflow: hidden;
    border: 1px solid var(--border); background: var(--ink); line-height: 0;
}
.map-container.map-drawing { cursor: crosshair; }
.map-bg { width: 100%; display: block; }
/* Getekende omtrek van de tent/het scherm — zuiver decoratief (pointer-events:none),
   de al bestaande pin blijft het klikbare/sleepbare element, nu gewoon zichtbaar
   BINNEN de omtrek in plaats van een los blokje op een lege plek op de kaart. Kleur
   volgt dezelfde playing/paused/offline-status als de pin zelf (via JS data-state). */
.map-shapes { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.map-shape {
    fill: var(--muted); fill-opacity: 0.18; stroke: var(--muted); stroke-width: 0.4;
    vector-effect: non-scaling-stroke; transition: fill 0.2s ease, stroke 0.2s ease;
}
.map-shape[data-state="playing"] { fill: var(--ok); stroke: var(--ok); fill-opacity: 0.22; }
.map-shape[data-state="paused"] { fill: var(--warn); stroke: var(--warn); fill-opacity: 0.2; }
.map-shape[data-state="offline"] { fill: var(--offline-red); stroke: var(--offline-red); fill-opacity: 0.16; }
.map-shape-draft {
    fill: var(--primary); fill-opacity: 0.15; stroke: var(--primary); stroke-width: 0.4;
    stroke-dasharray: 1.2 0.8; vector-effect: non-scaling-stroke;
}
.map-shape-draft-point { fill: var(--primary); }

/* Standaard (in het tray-rijtje bij een nog niet geplaatst scherm): gewone knop. */
.map-shape-btn svg { width: 12px; height: 12px; margin-right: 0.2rem; vertical-align: -2px; }
/* Binnen een pin: klein rond potloodje in de hoek i.p.v. een volle knop. */
.map-pin .map-shape-btn {
    position: absolute; top: -8px; right: -8px; width: 22px; height: 22px; border-radius: 50%;
    background: var(--ink-light); border: 1px solid var(--border); color: var(--muted);
    display: flex; align-items: center; justify-content: center; cursor: pointer; padding: 0;
}
.map-pin .map-shape-btn svg { margin-right: 0; }
.map-pin .map-shape-btn:hover { color: var(--primary); border-color: var(--primary); }
.map-tray-item-row { display: flex; align-items: center; gap: 0.5rem; }

.map-draw-toolbar {
    position: absolute; left: 50%; bottom: 12px; transform: translateX(-50%);
    background: var(--ink-light); border: 1px solid var(--primary); border-radius: 10px;
    padding: 0.6rem 0.8rem; display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap;
    font-size: 0.8rem; color: var(--paper); box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
    max-width: calc(100% - 24px);
}
.map-draw-toolbar.hidden { display: none; }
/* Klein rond markertje i.p.v. een blokje dat over de illustratie heen valt — naam/
   status/upload-zone zitten in een popover die pas verschijnt bij hover/tap, zodat
   de kaart zelf leesbaar blijft (op verzoek: "het design moet daar top zijn"). */
.map-pin {
    position: absolute; transform: translate(-50%, -50%);
    background: none; border: none; box-shadow: none; padding: 0; gap: 0;
    display: block;
}
.map-pin-marker {
    width: 38px; height: 38px; border-radius: 50%; position: relative;
    background: var(--ink-light); border: 2.5px solid var(--muted); color: var(--paper);
    display: flex; align-items: center; justify-content: center; padding: 0;
    cursor: grab; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.45);
    transition: transform 0.15s ease, border-color 0.2s ease;
}
.map-pin-marker:active { cursor: grabbing; }
.map-pin-marker:hover, .map-pin.map-pin-open .map-pin-marker { transform: scale(1.1); }
.map-pin-marker svg { width: 18px; height: 18px; }
.map-pin-marker .status-dot {
    position: absolute; bottom: -2px; right: -3px; width: 12px; height: 12px;
    border: 2px solid var(--ink-light);
}
.map-pin-marker-badge { position: absolute; top: -7px; left: -7px; font-size: 0.6rem; padding: 0.05rem 0.35rem; }
.status-pill[data-state="playing"] .map-pin-marker { border-color: var(--ok); }
.status-pill[data-state="paused"] .map-pin-marker { border-color: var(--warn); }
.status-pill[data-state="offline"] .map-pin-marker { border-color: var(--offline-red); }

.map-pin-popover {
    position: absolute; left: 50%; bottom: calc(100% + 12px);
    transform: translateX(-50%) translateY(4px);
    width: 175px; background: var(--ink-light); border: 1px solid var(--border); border-radius: 10px;
    padding: 0.6rem 0.65rem; display: flex; flex-direction: column; gap: 0.4rem;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
    opacity: 0; pointer-events: none; transition: opacity 0.15s ease, transform 0.15s ease;
    z-index: 6;
}
.map-pin-popover::after {
    content: ""; position: absolute; top: 100%; left: 50%; transform: translateX(-50%);
    border: 6px solid transparent; border-top-color: var(--ink-light);
}
.map-pin:hover .map-pin-popover, .map-pin.map-pin-open .map-pin-popover {
    opacity: 1; pointer-events: auto; transform: translateX(-50%) translateY(0);
}
.map-pin-link { gap: 0.15rem; }
.map-pin-name { font-weight: 700; font-size: 0.85rem; line-height: 1.25; }
.map-pin-status { font-size: 0.72rem; }
.map-pin-drop { padding: 0.35rem; }
.map-pin-drop .tile-drop-label { font-size: 0.68rem; }
.map-tray { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 1rem; }
.map-tray-item {
    background: var(--ink-light); border: 1.5px dashed var(--border); border-radius: 8px;
    padding: 0.5rem 0.9rem; font-size: 0.85rem; cursor: grab;
}
.map-tray-item:active { cursor: grabbing; }

/* ---------- media-bibliotheek ---------- */
.library-list { display: flex; flex-direction: column; gap: 0.4rem; }
.library-item {
    background: var(--ink-light); border: 1px solid var(--border); border-radius: 10px;
    padding: 0.55rem 0.8rem; display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap;
    cursor: grab;
}
.library-item:active { cursor: grabbing; }
.library-item.library-item-dragging { opacity: 0.5; }
.library-item.library-item-orphaned {
    border-color: var(--offline-red);
    box-shadow: 0 0 0 1px var(--offline-red), 0 0 10px rgba(226, 81, 92, 0.35);
}
.library-item-info { flex: 1 1 220px; min-width: 0; }
.library-item-name { font-weight: 700; }
.library-item-meta { margin: 0.15rem 0 0.4rem; }
.badge-orphaned {
    display: inline-block; margin-left: 0.5rem; font-size: 0.7rem; font-weight: 700; color: var(--offline-red);
    border: 1px solid var(--offline-red); border-radius: 999px; padding: 0.15rem 0.55rem; vertical-align: middle;
}
.library-item-screens { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.library-item-screens .badge-count { background: var(--ink); color: var(--muted); font-weight: 600; }
.library-item-screens .badge-count-orphaned { background: var(--offline-red); color: white; opacity: 0.85; }
.library-item-action { display: flex; align-items: center; gap: 0.5rem; flex: 0 0 auto; }
.library-item-action select { width: auto; min-width: 140px; }
.library-item-status { flex-basis: 100%; font-size: 0.8rem; min-height: 1.2em; }
@media (max-width: 640px) {
    .library-item { flex-direction: column; align-items: stretch; }
    .library-item-action { justify-content: stretch; }
    .library-item-action select { flex: 1; }
}

/* ---------- plattegrond/overzicht: compact inklapbaar bibliotheek-paneel ----------
   STANDAARD onder de tegels/kaart gestapeld (volle breedte, pikt NOOIT ruimte in van
   de tegel-rijen — was eerder een probleem: bij 2-koloms tegel-rijen dook het paneel
   ernaast in de flex-rij en kneep de tegels smaller). Pas op héél brede vensters
   (≥1500px, ruim boven de 900px content-kolom) wordt het losgekoppeld en rechts
   BUITEN de pagina-inhoud vastgezet, zodat het ook dan nooit over een tegel/pin heen
   kan vallen, hoeveel schermen er ook bijkomen. */
.map-view-layout { display: flex; flex-direction: column; gap: 1rem; }
.map-view-main { min-width: 0; }
/* .side-panel = generieke inklapbare-kaart-basis, gedeeld door bibliotheek EN
   logboek (en toekomstige panelen) — .library-panel/.activity-panel zijn puur
   content-specifieke modifier-classes, geen eigen layout. */
.side-panels { display: flex; flex-direction: column; gap: 0.85rem; }
.side-panel {
    width: 100%; background: var(--ink-light); border: 1px solid var(--border);
    border-radius: 12px; overflow: hidden;
}
.side-panel-toggle {
    width: 100%; display: flex; align-items: center; justify-content: space-between;
    background: none; border: none; color: var(--paper); font-weight: 700; font-size: 0.9rem;
    padding: 0.75rem 0.9rem; cursor: pointer;
}
.side-panel-caret { color: var(--muted); transition: transform 0.15s ease; }
.side-panel.side-panel-open .side-panel-caret { transform: rotate(90deg); }
.side-panel-body { display: none; padding: 0 0.75rem 0.75rem; }
.side-panel.side-panel-open .side-panel-body { display: block; }
.side-panel-hint { margin: 0 0 0.5rem; }
.library-item-compact {
    padding: 0.5rem 0.6rem; margin-bottom: 0.4rem; font-size: 0.82rem;
    display: block; cursor: grab;
}
.library-item-compact:active { cursor: grabbing; }
.library-item-compact .library-item-name { font-weight: 600; overflow-wrap: break-word; }
.library-item-compact .library-item-status { font-size: 0.72rem; min-height: 1em; }
.activity-item { padding: 0.45rem 0; border-bottom: 1px solid var(--border); }
.activity-item:last-child { border-bottom: none; }
.activity-item-message { font-size: 0.82rem; line-height: 1.4; }
.activity-item-time { font-size: 0.68rem; margin-top: 0.1rem; }
@media (min-width: 1500px) {
    /* Vaste zijkolom heeft zelf ook een hoogte-limiet (calc(100vh - 160px)) — met
       BEIDE panelen tegelijk open zonder eigen grens werd dit 1 doorlopende,
       gedeelde scroll-lijst (bibliotheek + logboek samen), wat verward aanvoelde en
       niet lekker scrolde. Elk paneel krijgt daarom hier zijn EIGEN scroll-regio
       terug (bewust ALLEEN in deze brede weergave — bij een normaal/smal venster
       scrollt gewoon de hele pagina, dat werkt al goed sinds de vorige fix). */
    .side-panels { position: fixed; top: 130px; right: 24px; width: 240px; }
    /* overscroll-behavior:contain — anders "lekt" het scroll-gebaar op sommige
       trackpads door naar de pagina zelf zodra deze binnenste lijst zijn eigen einde
       bereikt, wat voelt alsof "het niet genoeg scrolt" terwijl je er al bent. Extra
       bottom-padding zodat het allerlaatste item niet strak tegen de rand plakt. */
    .side-panel-body { max-height: 42vh; overflow-y: auto; overscroll-behavior: contain; padding-bottom: 1.25rem; }
}

/* ---------- mobiel: algemene pas (op verzoek "hub mag er beter uitzien op mobiel") ---------- */
@media (max-width: 600px) {
    .topbar-inner { padding: 0.75rem 1rem; gap: 0.5rem; }
    .topbar-nav { font-size: 0.82rem; gap: 0.75rem; }
    .topbar-logout .link-button { font-size: 0.82rem; }
    .breadcrumb { padding: 0 1rem 0.7rem; }
    .content { padding: 1rem; }
    h1 { font-size: 1.35rem; }
    .card { padding: 1rem 1.1rem; }
    .status-pill { padding: 0.9rem 1rem; }
    .status-pill-name { font-size: 1.05rem; }
    /* 3 stat-chips naast elkaar werd te krap (afgekapte cijfers/labels) op een telefoon
       — "Speelt" (breedste waarde, tijdscode) krijgt de volle breedte, uptime/temp
       delen de rest. */
    .tile-stats { grid-template-columns: 1fr 1fr; }
    .tile-stats .tile-stat:first-child { grid-column: 1 / -1; }
    .view-tabs { flex-wrap: wrap; }
    .inline-form-row { flex-direction: column; align-items: stretch; }
    .inline-form-row input, .inline-form-row button { width: 100%; flex: none; }
    .queue-item { flex-wrap: wrap; }
    .login-card { margin: 1.5rem auto; }
    /* teken-toolbar (plattegrond) anders half buiten beeld op een smal scherm */
    .map-draw-toolbar { left: 8px; right: 8px; transform: none; max-width: none; justify-content: center; }
}

/* QR-beheerpagina (qr.html) — geport vanaf de Pi's eigen stijl, alleen het
   scan-herkomst-blok (qr-breakdown-*) weggelaten: de hub weet nog niet welk
   scherm/item een scan hoorde (zie project-memory, komt bij de overlay-stap). */
.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; }
.option-field { display: flex; flex-direction: column; gap: 0.3rem; font-size: 0.85rem; color: var(--muted); font-weight: 600; max-width: 16em; }
.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); }
.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; display: flex; flex-direction: column; gap: 0.85rem; }
.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-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); }

/* bibliotheek: badge voor een scherm dat nu offline is (item komt uit de cache) */
.badge-count-stale { background: var(--offline-red); opacity: 0.85; }

/* tekst/QR-overlay-editor (overlay_editor.html) */
.overlay-editor { display: grid; grid-template-columns: minmax(280px, 480px) 1fr; gap: 1.5rem; align-items: start; }
@media (max-width: 900px) { .overlay-editor { grid-template-columns: 1fr; } }
.overlay-preview-col { position: sticky; top: 1rem; display: flex; flex-direction: column; gap: 0.6rem; }
.overlay-preview-frame {
    background: #000; border: 1px solid var(--border); border-radius: 10px; overflow: hidden;
    aspect-ratio: 16 / 9;
}
.overlay-preview-frame img { width: 100%; height: 100%; object-fit: contain; display: block; }
.overlay-fields-col { display: flex; flex-direction: column; gap: 1rem; }
.overlay-item-list { display: flex; flex-direction: column; gap: 0.75rem; margin-top: 0.75rem; }
.overlay-item-row {
    background: var(--ink); border: 1px solid var(--border); border-radius: 8px; padding: 0.75rem;
    display: flex; flex-direction: column; gap: 0.5rem;
}
.overlay-item-row-fields { display: flex; flex-wrap: wrap; gap: 0.75rem 1rem; }
.overlay-item-row-fields label {
    display: flex; flex-direction: column; gap: 0.25rem; font-size: 0.78rem; color: var(--muted); font-weight: 600;
}
.overlay-item-row-fields input[type=text], .overlay-item-row-fields select {
    background: var(--ink-light); border: 1px solid var(--border); border-radius: 6px; color: var(--paper);
    padding: 0.35rem 0.5rem; font-size: 0.9rem;
}
.overlay-item-row-fields input[type=number] { width: 4.5rem; background: var(--ink-light); border: 1px solid var(--border);
    border-radius: 6px; color: var(--paper); padding: 0.35rem 0.5rem; }
.overlay-item-row-fields input[type=color] { width: 2.4rem; height: 2rem; padding: 0; border: 1px solid var(--border);
    border-radius: 6px; background: none; }
.overlay-actions { display: flex; gap: 0.75rem; flex-wrap: wrap; }

/* playlist-spiegel: zichtbare sync-status per item (op verzoek — "interface moet
   echt identiek zijn, alleen met een offline-indicatie") */
.mirror-item-pending-delete { opacity: 0.5; text-decoration: line-through; }
.mirror-item-pending-delete .queue-name { text-decoration: line-through; }
.mirror-item-pending-sync {
    border-color: var(--offline-red);
    box-shadow: 0 0 0 1px var(--offline-red), 0 0 10px rgba(226, 81, 92, 0.35);
}
.mirror-item-pending-overlay {
    border-color: var(--warn);
    box-shadow: 0 0 0 1px var(--warn), 0 0 10px rgba(240, 180, 41, 0.35);
}
.mirror-pending-badge {
    font-size: 0.7rem; font-weight: 700; color: var(--offline-red);
    border: 1px solid var(--offline-red); border-radius: 999px; padding: 0.15rem 0.55rem;
    white-space: nowrap; flex-shrink: 0;
}
.mirror-pending-badge-delete { color: var(--muted); border-color: var(--border); }
.mirror-pending-badge-overlay { color: var(--warn); border-color: var(--warn); }
.mirror-more { position: relative; }
.mirror-more summary { cursor: pointer; color: var(--muted); list-style: none; padding: 0.2rem 0.4rem; }
.mirror-more summary::-webkit-details-marker { display: none; }
.mirror-more[open] summary { color: var(--primary); }
.mirror-more-body {
    position: absolute; right: 0; top: 100%; z-index: 5; margin-top: 0.3rem;
    background: var(--ink-light); border: 1px solid var(--border); border-radius: 8px;
    padding: 0.75rem; display: flex; flex-direction: column; gap: 0.5rem; min-width: 220px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35);
}

/* hub-status (settings.html) — schijfruimte/bibliotheek/postbus-overzicht */
.health-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 1rem; }
.health-stat { display: flex; flex-direction: column; gap: 0.3rem; }
.health-bar { height: 8px; background: var(--ink); border-radius: 999px; overflow: hidden; margin: 0.15rem 0; }
.health-bar-fill { height: 100%; background: var(--ok); border-radius: 999px; transition: width 0.3s ease; }
.health-bar-fill.health-bar-warn { background: var(--warn); }
.health-bar-fill.health-bar-danger { background: var(--offline-red); }

/* bibliotheek: thumbnails + voorbeeld-lightbox (op verzoek — "kan ik de content
   bekijken/afspelen als ik erop klik, dan weet ik wat het is") */
.library-thumb-btn {
    flex: 0 0 auto; width: 96px; height: 64px; border-radius: 8px; overflow: hidden;
    border: 1px solid var(--border); background: var(--ink); padding: 0; cursor: pointer;
    position: relative;
}
.library-thumb-btn:hover { border-color: var(--primary); }
.library-thumb { width: 100%; height: 100%; object-fit: cover; display: block; }
.library-thumb-btn.library-thumb-missing .library-thumb { visibility: hidden; }
.library-thumb-play {
    position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
    color: white; font-size: 1.1rem; text-shadow: 0 1px 4px rgba(0, 0, 0, 0.6); pointer-events: none;
}
.library-lightbox { position: fixed; inset: 0; z-index: 300; display: flex; align-items: center; justify-content: center; padding: 1.5rem; }
.library-lightbox.hidden { display: none; }
.library-lightbox-backdrop { position: absolute; inset: 0; background: rgba(20, 4, 22, 0.85); backdrop-filter: blur(2px); }
.library-lightbox-card {
    position: relative; z-index: 1; max-width: min(90vw, 1100px); max-height: 90vh;
    display: flex; flex-direction: column; gap: 0.75rem; align-items: center;
}
.library-lightbox-media { max-width: 100%; max-height: 78vh; display: flex; align-items: center; justify-content: center; }
.library-lightbox-media img, .library-lightbox-media video { max-width: 100%; max-height: 78vh; border-radius: 8px; }
.library-lightbox-close {
    position: absolute; top: -2.5rem; right: 0; background: none; border: none; color: var(--paper);
    font-size: 1.3rem; cursor: pointer; padding: 0.4rem;
}
.library-lightbox-close:hover { color: var(--primary); }
.library-lightbox-name { color: var(--paper); font-weight: 700; text-align: center; margin: 0; }
@media (max-width: 640px) {
    .library-thumb-btn { width: 72px; height: 48px; }
}

/* playlist-spiegel: consistentie-pas met de Pi's eigen playlist-pagina (op verzoek —
   "ik wil dat het systeem super consistent is") — volgnummer, sleep-handvat,
   thumbnail, verlopen/gepland-badge, play-now/dupliceren zichtbaar, uitleg bij
   scheduling-velden. */
.mirror-item-number {
    flex: 0 0 auto; width: 1.4rem; text-align: center; font-size: 0.78rem; font-weight: 700;
    color: var(--muted);
}
.drag-handle { flex: 0 0 auto; color: var(--muted); cursor: grab; font-size: 1rem; line-height: 1; }
.drag-handle:active { cursor: grabbing; }
.mirror-thumb, .mirror-thumb-wrap {
    flex: 0 0 auto; width: 56px; height: 38px; border-radius: 6px; overflow: hidden;
    object-fit: cover; background: var(--ink); border: 1px solid var(--border); position: relative;
}
.mirror-thumb-wrap .mirror-thumb { border: none; }
.mirror-thumb.mirror-thumb-missing, .mirror-thumb-wrap.mirror-thumb-missing .mirror-thumb { visibility: hidden; }
.mirror-thumb-play {
    position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
    color: white; font-size: 0.8rem; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.7); pointer-events: none;
}
.mirror-item-main { flex: 1 1 200px; min-width: 0; display: flex; flex-direction: column; gap: 0.15rem; }
.mirror-item-main .queue-name { white-space: normal; }
.mirror-item-meta { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; font-size: 0.8rem; }
.badge-expired { background: rgba(226, 81, 92, 0.18); color: var(--offline-red); }
.badge-scheduled { background: rgba(240, 180, 41, 0.18); color: var(--warn); }
.check-label { display: flex; align-items: center; gap: 0.4rem; font-size: 0.85rem; color: var(--muted); font-weight: 600; cursor: pointer; }
.field-hint { font-size: 0.75rem; color: var(--muted); margin: 0.2rem 0 0; }
.option-group { display: flex; flex-direction: column; gap: 0.3rem; margin-top: 0.6rem; }
.mirror-item.library-item-dragging, .mirror-item[data-dragging="1"] { opacity: 0.5; }