/* ============================================================
 * SocialGain — assets/media/ui.css
 * DE GEDEELDE, THEMABARE LAAG. Laadt na app.css en vóór het thema.
 *
 * app.css levert structuur en maten; dit bestand kleurt en vormt diezelfde
 * componenten via de tokens, en draagt de paginastijlen die geen enkel thema
 * zelf wil schrijven: het dashboard, de mediabibliotheek, het scorebord, de
 * meldingsbalken en de reparaties op hardgezette kleuren in app.css.
 *
 * DE SCHEIDSLIJN: hier staat wat MEER DAN ÉÉN thema gebruikt. Wat maar in één
 * schil verschijnt hoort in themes/<boom>/<naam>/theme.css. Dit bestand
 * definieert daarom GEEN tokens — het gebruikt ze alleen, en elk thema levert
 * ze. De terugval als een thema er een vergeet is het :root-blok in app.css.
 *
 * Voorheen zat dit alles in assets/css/nova.css, waardoor élk thema de
 * complete Nova-schil meelaadde om hem daarna weg te duwen.
 * Zie docs/themas.md en docs/themas-bouwstandaard.md.
 * ============================================================ */
body { background: var(--c-bg); color: var(--c-text); }

/* -----  Plakbalk-contract  -------------------------------- */
/* ELK THEMA ZET --ui-bar-max OP :root, ZIJN RUIMSTE BALKHOOGTE. Alles waar de
   BROWSER zelf naartoe scrolt — een ankerlink, scrollIntoView(), de focus die
   met Tab uit beeld springt — landt anders onder de plakbalk en is niet
   klikbaar (WCAG 2.2 AA, Focus Not Obscured). De terugval is Nova's waarde,
   zodat een thema dat het vergeet ruim zit in plaats van krap. */
:root { scroll-padding-top: var(--ui-bar-max, 176px); }

/* EEN UITKLAPPER HANGT AAN DE BALK, NIET AAN ZIJN EIGEN KNOP. app.css ankert
   `.notif-tray` en `.sg-tour-menu` met `right: 0` aan het omhulsel van hun
   knop. Dat gaat goed zolang die knop rechts in de balk staat — maar zodra de
   balk wrapt of anders gevuld is, schuift de knop mee en waaiert de uitklapper
   naar links buiten beeld. Gemeten vóór de reparatie: `.notif-tray` op
   left -301 (54 van de 355px zichtbaar) en `.sg-tour-menu` op left -49, met
   alle negentien rondleidingen buiten beeld.
   Deze drie regels stonden tot deze herstructurering DRIE KEER: in het
   `.topbar`-blok van app.css (dus alleen voor Nova), in atlas.css en in
   forum.css. Ze hangen nu aan `data-sg-bar`, het anker dat elke schil op zijn
   plakbalk zet — één bron, elk thema gedekt, ook het volgende.
   Zie docs/themas-bouwstandaard.md §3a. */

/* De hoogtekap geldt op ELKE breedte, niet alleen op mobiel: app.css kapte op
   `calc(100vh - 96px)`, geijkt op de 61px hoge Nova-topbar, en onder een hogere
   balk liep het menu daardoor onder de vouw door (gemeten in Forum op
   1600x800: top 103, bottom 807). Beide laden scrollen zelf, dus te krap kost
   hooguit een veeg; te ruim kost een onbereikbare rondleiding. */
.notif-tray, .sg-tour-menu { max-height: calc(100vh - var(--ui-bar-max, 176px) - 16px); }

/* ALLEEN ZOLANG DE BALK KAN WRAPPEN. Boven deze grens staan de knoppen rechts
   in de balk en klopt de uitlijning op het omhulsel gewoon; de lade dan tóch
   aan de balk hangen verschuift hem 166px naar rechts (gemeten op 1280px in
   Atlas). Onder de grens wrapt de balk, schuiven de knoppen mee en is het
   omhulsel geen betrouwbaar anker meer. */
@media (max-width: 840px) {
  [data-sg-bar] .notif-bell-wrap,
  [data-sg-bar] .tour-help-wrap { position: static; }
  /* `.sg-tour-badge` is in tour.js een KIND van deze knop (btn.appendChild);
     zonder deze regel springt het getal naar de hoek van de hele balk. */
  [data-sg-bar] #tour-help-btn { position: relative; }
  [data-sg-bar] .notif-tray,
  [data-sg-bar] .sg-tour-menu {
    left: 12px; right: 12px; width: auto; min-width: 0;
    top: calc(100% + 4px);
  }
}

/* DE DERDE UITKLAPPER: HET MENU ZELF. Een schil met de navigatie in de balk
   (Atlas, Forum) hangt elk menupaneel met `right: 0; min-width: 220px` aan zijn
   eigen kop. Dat is dezelfde fout als hierboven: op een telefoon staat die kop
   links van het midden en waaiert het paneel het scherm uit. Gemeten 21-09-2026
   in Chromium — Atlas: het Media-paneel op left -119 op 320/375/390 en nog -46
   op 480; Forum: -116 op 320 en -46 op 390. De rondleiding wijst naar items IN
   die panelen.
   Het paneel hangt hier aan de NAVIGATIERIJ en niet aan de hele balk: in Forum
   staat onder de navigatie nog de rij met de bediening, en `top: 100%` van de
   balk zou het paneel daar ONDER zetten, los van zijn knop. De rij spant in
   beide schillen de volle breedte (negatieve marge), dus 12px is 12px van de
   schermrand.
   600px EN NIET 840. Net boven de grens past elk paneel weer onder zijn eigen
   kop — gemeten op 601px: het meest linkse paneel begint in Atlas op 36px (met
   alle stippen aan) en in Forum op 165px — en een paneel van balkbreedte op een
   tablet is een veel te brede lijst.
   Nova en Supernova raakt dit niet: daar staat de navigatie in de zijbalk
   (`data-sg-nav`), niet in `data-sg-bar`, en is een groep een accordeon. */
@media (max-width: 600px) {
  [data-sg-bar] nav { position: relative; }
  [data-sg-bar] nav details { position: static; }
  [data-sg-bar] nav details > :not(summary) {
    left: 12px; right: 12px; width: auto; min-width: 0;
    top: calc(100% + 4px);
  }
}
a { color: var(--c-link); }
/* Volgt het thema. Stond hier als rgba(124,106,247,.4): een violet dat in
   Forum (teal op papier) niets met het palet te maken had. */
::selection { background: color-mix(in srgb, var(--c-primary) 30%, transparent); }

/* White-label: geüpload logo i.p.v. de initialen-cirkel (views/layout/_brand-mark.php) */
.brand-mark-img { height: 34px; max-width: 150px; object-fit: contain; border-radius: 6px; }
.brand-mark-img-lg { height: 56px; max-width: 220px; }

.user-avatar {
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--ui-brand); color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 700; flex: 0 0 32px;
}

.org-switcher select, .org-switcher .org-current {
  background: var(--c-surface); color: var(--c-text);
  border: 1px solid var(--c-border); border-radius: var(--r-md);
  padding: 7px 10px; font-size: 13px;
}

.nav-search input[type="search"] {
  background: var(--c-surface); color: var(--c-text);
  border: 1px solid var(--c-border); border-radius: 999px;
  padding: 8px 16px; min-width: 200px; font-size: 13px;
}
.nav-search input[type="search"]::placeholder { color: var(--c-muted); }
/* `:focus:not(:focus-visible)` en niet kaal `:focus` — deze selector is
   specifieker dan de app.css-ring en zou hem anders opnieuw wegdrukken bij
   toetsenbordfocus. Met de muis blijft de ring weg, zoals bedoeld. */
.nav-search input[type="search"]:focus { border-color: var(--c-primary); }
.nav-search input[type="search"]:focus:not(:focus-visible) { outline: none; }

.btn-create {
  background: var(--ui-brand); color: #fff; border: 0;
  border-radius: var(--r-md); padding: 9px 16px;
  font-weight: 600; font-size: 14px;
  display: inline-flex; align-items: center; gap: 8px;
  box-shadow: var(--shadow-sm);
}
.btn-create:hover { filter: brightness(1.08); text-decoration: none; color: #fff; }

.notif-bell, .mode-toggle {
  background: var(--c-surface); border: 1px solid var(--c-border);
  border-radius: var(--r-md); width: 38px; height: 38px;
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer; font-size: 15px;
}
.notif-bell:hover, .mode-toggle:hover { background: var(--c-surface-2); }
/* De knoppen dragen sinds 14-09-2026 een SVG uit views/layout/header-icons.php
   in plaats van een emoji, in alle vier de schillen tegelijk. `currentColor`
   is het punt: de knop bepaalt nu de kleur, en de rij leest als één set met de
   navigatie ernaast in plaats van als acht plaatjes van het besturingssysteem. */
.notif-bell svg, .mode-toggle svg { width: 18px; height: 18px; color: var(--c-muted); }
.notif-bell:hover svg, .mode-toggle:hover svg { color: var(--c-text); }

/* Toggle-icoon volgt de gekozen stand: auto → licht → donker */
.mode-toggle .ico-sun, .mode-toggle .ico-moon, .mode-toggle .ico-auto { display: none; }
html[data-mode-choice="light"] .mode-toggle .ico-sun { display: inline-flex; }
html[data-mode-choice="dark"] .mode-toggle .ico-moon { display: inline-flex; }
html[data-mode-choice="auto"] .mode-toggle .ico-auto,
html:not([data-mode-choice]) .mode-toggle .ico-auto { display: inline-flex; }

.notif-tray {
  background: var(--c-surface); border: 1px solid var(--c-border);
  box-shadow: var(--shadow-lg); border-radius: var(--r-lg);
}
.notif-tray-head, .notif-tray-foot { border-color: var(--c-border); background: var(--c-surface-2); }
.review-comment { border-color: var(--c-border); }
.review-comment-reply { border-left-color: var(--c-border); }

/* -----  Page & container  --------------------------------- */
.page { min-height: 0; flex: 1 1 auto; padding: 28px 0; }

/* -----  Cards & panels  ----------------------------------- */
.card {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  box-shadow: none;
}
h1, h2, h3 { color: var(--c-text); }

/* -----  Buttons  ------------------------------------------ */
.btn { border-radius: var(--r-md); }
.btn-primary {
  background: var(--c-primary); border-color: var(--c-primary);
  box-shadow: 0 2px 12px var(--c-primary-soft);
}
.btn-primary:hover { background: var(--c-primary-600); }
.btn-ghost {
  background: transparent; color: var(--c-muted);
  border: 1px solid var(--c-border);
}
.btn-ghost:hover { background: var(--c-surface-2); color: var(--c-text); }
.btn-warning { background: var(--tint-warn-bg); color: var(--tint-warn-fg); border-color: var(--tint-warn-bg); }
.btn-warning:hover { filter: brightness(1.1); }

/* -----  Forms  -------------------------------------------- */
.field input[type="text"], .field input[type="email"], .field input[type="password"],
.field input[type="date"], .field input[type="datetime-local"], .field input[type="number"],
.field input[type="search"], .field input[type="url"], .field input[type="time"],
.field textarea, .field select,
select, input[type="text"], input[type="search"], textarea {
  background: var(--c-surface-2); color: var(--c-text);
  border: 1px solid var(--c-border);
}
.field input:focus, .field textarea:focus, .field select:focus {
  border-color: var(--c-primary);
  box-shadow: 0 0 0 3px var(--c-primary-soft);
}
.field-label { color: var(--c-text); }
input::placeholder, textarea::placeholder { color: var(--c-muted); }

/* -----  Alerts  ------------------------------------------- */
.alert { border-radius: var(--r-md); }
.alert-success { background: var(--tint-ok-bg);   border-color: var(--tint-ok-bg);   color: var(--tint-ok-fg); }
.alert-error   { background: var(--tint-err-bg);  border-color: var(--tint-err-bg);  color: var(--tint-err-fg); }
.alert-warning { background: var(--tint-warn-bg); border-color: var(--tint-warn-bg); color: var(--tint-warn-fg); }
.alert-info    { background: var(--tint-prim-bg); border-color: var(--tint-prim-bg); color: var(--tint-prim-fg); }

/* -----  Tables & permissie-badges  ------------------------ */
table { color: var(--c-text); }
th { color: var(--c-muted); }
td, th { border-color: var(--c-border); }
tr.perm-allowed, tr.perm-denied { background: transparent; }
.perm-badge-yes { background: var(--tint-ok-bg); color: var(--tint-ok-fg); }
.perm-badge-no  { background: var(--c-surface-2); color: var(--c-muted); }
.role-pill { background: var(--c-surface-2); color: var(--c-muted); }
.role-admin  { background: var(--tint-prim-bg); color: var(--tint-prim-fg); }
.role-editor { background: var(--tint-info-bg); color: var(--tint-info-fg); }
.role-writer { background: var(--tint-ok-bg);   color: var(--tint-ok-fg); }
.role-viewer { background: var(--c-surface-2);  color: var(--c-muted); }

/* -----  Auth pages  --------------------------------------- */
body.is-auth-page { background: var(--ui-auth-bg); }
.auth-card {
  background: var(--c-surface); border: 1px solid var(--c-border);
  border-radius: var(--r-lg); box-shadow: var(--shadow-lg);
}
.auth-brand .brand-mark { background: var(--ui-brand); }

/* -----  Storingsbanner (verbindingsbewaking)  --------------- */
.conn-alert-banner {
  display: flex; flex-wrap: wrap; gap: 6px; align-items: baseline;
  padding: 10px 24px;
  background: var(--tint-warn-bg);
  color: var(--tint-warn-fg);
  border-bottom: 1px solid var(--tint-warn-bg);
  font-size: 13.5px; line-height: 1.45;
}
.conn-alert-banner strong { font-weight: 700; }

/* Taken-alarm. Kleur komt van `.alert-error`/`.alert-warning` hierboven — die
   staan al op tokens, dus deze balk klopt vanzelf in elk thema en in donker.
   Hier alleen de plaatsing van de actielink. */
.sg-taken-alarm { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.sg-taken-alarm .sg-taken-alarm-actie { margin-left: auto; font-weight: 600; text-decoration: underline; }

/* -----  Impersonation banner  ------------------------------ */
.impersonation-banner {
  background: var(--tint-warn-bg); color: var(--tint-warn-fg);
  border-bottom: 1px solid var(--tint-warn-bg);
}

/* ============================================================
 * Dashboard-componenten (Nova)
 * ============================================================ */
.nv-hello h1 { font-size: 28px; margin-bottom: 2px; }
.nv-hello p { margin-top: 0; }

.nv-stat-grid {
  display: grid; gap: 16px;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  margin: 22px 0 26px;
}
.nv-stat {
  position: relative; overflow: hidden;
  background: var(--c-surface); border: 1px solid var(--c-border);
  border-radius: var(--r-lg); padding: 18px;
  display: flex; flex-direction: column; gap: 4px;
}
.nv-stat-head { display: flex; align-items: center; gap: 10px; color: var(--c-muted); font-size: 13px; }
.nv-stat-ico {
  width: 34px; height: 34px; border-radius: 9px; flex: 0 0 34px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--ui-tint, var(--c-primary-soft));
  color: var(--ui-tint-fg, var(--c-primary));
}
.nv-stat-ico svg { width: 17px; height: 17px; }
.nv-stat-num { font-size: 30px; font-weight: 700; line-height: 1.15; }
.nv-stat-sub { font-size: 12px; color: var(--c-muted); }
.nv-stat-sub .up { color: var(--c-success); font-weight: 600; }

/* De tint zegt WAT de kaart telt, niet welke kleur er beschikbaar was. Tot
   14-09-2026 stonden hier `--violet/--blue/--green/--pink` met hardgecodeerde
   rgba-literals plus een verloopwas over de onderrand van elke kaart. Twee
   problemen in één: vier kleuren zonder betekenis lezen als versiering, en
   omdat de waarden literals waren kon geen enkel thema erbij — Forum (teal op
   warm papier) kreeg dus gewoon indigo, hemelsblauw, smaragd en knalroze op
   zijn dashboard. Nu komen ze uit de tint-tokens die élk thema al zet. */
.nv-stat--prim { --ui-tint: var(--tint-prim-bg); --ui-tint-fg: var(--tint-prim-fg); }
.nv-stat--ok   { --ui-tint: var(--tint-ok-bg);   --ui-tint-fg: var(--tint-ok-fg); }
.nv-stat--warn { --ui-tint: var(--tint-warn-bg); --ui-tint-fg: var(--tint-warn-fg); }
.nv-stat--info { --ui-tint: var(--tint-info-bg); --ui-tint-fg: var(--tint-info-fg); }
.nv-stat--mute { --ui-tint: var(--c-surface-2);  --ui-tint-fg: var(--c-muted); }

/* Twee-koloms hoofdgrid */
.nv-grid { display: grid; grid-template-columns: 2fr 1fr; gap: 20px; align-items: start; }
@media (max-width: 1080px) { .nv-grid { grid-template-columns: 1fr; } }

.nv-panel { background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--r-lg); padding: 20px; margin-bottom: 20px; }
.nv-panel-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.nv-panel-head h2 { margin: 0; font-size: 17px; }

/* Planning-lijst */
.nv-sched { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.nv-sched li {
  display: flex; align-items: center; gap: 14px;
  padding: 13px 4px; border-top: 1px solid var(--c-border);
}
.nv-sched li:first-child { border-top: 0; }
.nv-sched-body { min-width: 0; flex: 1 1 auto; }
.nv-sched-title { font-weight: 600; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nv-sched-title a { color: var(--c-text); }
.nv-sched-meta { font-size: 12px; color: var(--c-muted); margin-top: 2px; }
/* Onboardingwidget hergebruikt .nv-sched, maar stapnamen zijn zinnen en geen
   posttitels: afkappen met een ellipsis maakt "Je persoonlijke AI-profiel
   invullen" onleesbaar in de smalle kolom. Hier dus wél afbreken. */
.onboarding-widget-list .nv-sched-title { white-space: normal; overflow: visible; text-overflow: clip; }
.onboarding-widget-list li { padding: 9px 4px; }

.nv-plat {
  width: 38px; height: 38px; flex: 0 0 38px; border-radius: 10px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 800; color: #fff; letter-spacing: .02em;
}
.nv-plat--linkedin  { background: #0a66c2; }
.nv-plat--instagram { background: radial-gradient(120% 120% at 30% 110%, #fdc468, #df4996 45%, #8a3ab9); }
.nv-plat--facebook  { background: #1877f2; }
.nv-plat--x         { background: #000; border: 1px solid var(--c-border); }
.nv-plat--youtube   { background: #ff0033; }

.nv-chip {
  font-size: 12px; font-weight: 600; border-radius: 999px; padding: 4px 12px;
  white-space: nowrap;
}
.nv-chip--scheduled { background: var(--tint-ok-bg);   color: var(--tint-ok-fg); }
.nv-chip--review    { background: var(--tint-warn-bg); color: var(--tint-warn-fg); }
.nv-chip--draft     { background: var(--c-surface-2);  color: var(--c-muted); }
.nv-chip--approved  { background: var(--tint-info-bg); color: var(--tint-info-fg); }
.nv-chip--rejected  { background: var(--tint-err-bg);  color: var(--tint-err-fg); }
.nv-chip--live      { background: var(--tint-prim-bg); color: var(--tint-prim-fg); }

/* Snelle acties */
.nv-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 12px; }
.nv-tile {
  display: flex; flex-direction: column; gap: 6px;
  background: var(--c-surface-2); border: 1px solid var(--c-border);
  border-radius: var(--r-md); padding: 14px;
  color: var(--c-text); font-size: 13px;
}
.nv-tile:hover { border-color: var(--c-primary); text-decoration: none; transform: translateY(-1px); }
.nv-tile strong { font-size: 14px; }
.nv-tile span { color: var(--c-muted); }
.nv-tile-ico { display: inline-flex; color: var(--c-muted); }
.nv-tile-ico svg { width: 20px; height: 20px; }
.nv-tile:hover .nv-tile-ico { color: var(--c-primary); }

/* Taken-lijstje */
.nv-task { display: flex; align-items: center; gap: 10px; padding: 10px 4px; border-top: 1px solid var(--c-border); font-size: 13px; }
.nv-task:first-child { border-top: 0; }
.nv-task-due { margin-left: auto; color: var(--c-muted); font-size: 12px; white-space: nowrap; }
.nv-task-due.overdue { color: var(--c-error); font-weight: 600; }
.nv-prio { width: 8px; height: 8px; border-radius: 50%; flex: 0 0 8px; }
.nv-prio--urgent { background: var(--c-error); }
.nv-prio--high   { background: var(--c-warning); }
.nv-prio--medium { background: var(--c-primary); }
.nv-prio--low    { background: var(--c-muted); }

/* ============================================================
 * Thema-fixes voor app.css-componenten met hardcoded lichte
 * kleuren (tabellen, badges, statuspills, kalender, editor).
 * Alles via tokens, dus werkt in dark én light.
 * ============================================================ */

/* Data-tabellen (o.a. audit log, gebruikers, organisaties) */
.data-table th { background: var(--c-surface-2); }
.data-table tbody tr:hover { background: var(--c-surface-2); }
.data-table code { background: var(--c-surface-2); color: var(--c-text); }

/* Logweergave (superadmin systeemcheck → logviewer) */
.log-view {
  background: var(--c-surface-2);
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  padding: 12px 14px;
  max-height: 70vh;
  overflow: auto;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12.5px;
  line-height: 1.55;
  white-space: pre-wrap;
  word-break: break-word;
  color: var(--c-text);
}

/* Badges */
.badge-success { background: var(--tint-ok-bg);   color: var(--tint-ok-fg); }
.badge-muted   { background: var(--c-surface-2);  color: var(--c-muted); }
.badge-warning { background: var(--tint-warn-bg); color: var(--tint-warn-fg); }
.badge-danger  { background: var(--tint-err-bg);  color: var(--tint-err-fg); }
.badge-info    { background: var(--tint-prim-bg); color: var(--tint-prim-fg); }

/* Statuspills (posts) */
.status-draft     { background: var(--c-surface-2);  color: var(--c-muted); }
.status-review    { background: var(--tint-warn-bg); color: var(--tint-warn-fg); }
.status-approved  { background: var(--tint-ok-bg);   color: var(--tint-ok-fg); }
.status-scheduled { background: var(--tint-info-bg); color: var(--tint-info-fg); }
.status-live      { background: var(--c-success);    color: #06281c; }
.status-rejected  { background: var(--tint-err-bg);  color: var(--tint-err-fg); }

/* Paginatie */
.pagination a { background: var(--c-surface); }
.pagination a:hover { background: var(--c-surface-2); }

/* Vakken/boxen met lichte achtergrond */
.totp-secret-box, .totp-uri-box,
.invite-summary,
.post-body-readonly,
.review-url input { background: var(--c-surface-2); color: var(--c-text); }
.field input:disabled { background: var(--c-surface-2); color: var(--c-muted); }
.org-switcher select { max-width: 200px; }
.org-switcher select:focus { background: var(--c-surface); }

/* Quill rich-text editor */
.quill-editor { background: var(--c-surface-2); color: var(--c-text); }
.ql-snow .ql-stroke { stroke: var(--c-muted) !important; }
.ql-snow .ql-fill { fill: var(--c-muted) !important; }
.ql-snow .ql-picker { color: var(--c-muted) !important; }
.ql-snow .ql-picker-options { background: var(--c-surface) !important; }
.ql-toolbar.ql-snow { background: var(--c-surface); }
.ql-editor.ql-blank::before { color: var(--c-muted) !important; }

/* Kalender */
.cal-weekday { background: var(--c-surface-2); }
.cal-cell { background: var(--c-surface); }
.cal-cell.cal-empty { background: var(--c-surface-2); }
.cal-cell.cal-weekend { background: var(--c-surface); }
.cal-event { background: var(--c-surface-2); }
.cal-event:hover { background: var(--c-primary-soft); }
.cal-event-badge { background: var(--tint-warn-bg); color: var(--tint-warn-fg); }
.cal-event.status-review    { background: var(--tint-warn-bg); }
.cal-event.status-approved  { background: var(--tint-ok-bg); }
.cal-event.status-scheduled { background: var(--tint-info-bg); }
.cal-event.status-live      { background: var(--tint-ok-bg); }
.cal-event.status-rejected  { background: var(--tint-err-bg); }
.cal-day.is-drop-hover { background: var(--c-primary-soft) !important; }
body > .cal-event.ui-draggable-dragging { background: var(--c-surface); }

/* ============================================================
 * Mediabibliotheek
 * ============================================================ */
.media-lib-filter input[type="text"] { border-radius: 999px; padding: 9px 16px; }
.media-lib-grid,
.media-lib-skeleton-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr));
  gap: 18px;
}

.media-lib-item { padding: 10px; gap: 10px; }
.media-lib-thumb {
  position: relative; display: block; overflow: hidden;
  border-radius: var(--r-md); background: var(--c-surface-2);
  cursor: zoom-in;
}
.media-lib-thumb img, .media-lib-thumb video {
  width: 100%; height: 160px; object-fit: cover; display: block;
  border-radius: var(--r-md);
  transition: transform .18s ease;
}
.media-lib-thumb:hover img, .media-lib-thumb:hover video { transform: scale(1.04); }
.media-lib-thumb.is-loading::before,
.media-lib-skeleton-thumb,
.media-lib-skeleton-line {
  background: linear-gradient(90deg, var(--c-surface-2) 25%, var(--c-border) 50%, var(--c-surface-2) 75%);
  background-size: 200% 100%;
  animation: media-lib-shimmer 1.25s ease-in-out infinite;
}
.media-lib-thumb.is-loading::before {
  content: ""; position: absolute; inset: 0; z-index: 1;
}
.media-lib-thumb.is-loading img { opacity: 0; }
@keyframes media-lib-shimmer { to { background-position: -200% 0; } }
.media-lib-play {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 26px; text-shadow: 0 2px 10px rgba(0,0,0,.6);
  pointer-events: none;
}
.media-lib-meta { display: flex; flex-direction: column; gap: 5px; padding: 0 2px; }
.media-lib-name {
  font-size: 13px; line-height: 1.35;
  display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical;
  overflow: hidden; word-break: break-all;
}
.media-lib-badges { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
button.media-usage-btn { border: 0; cursor: pointer; font: inherit; font-size: 12px; }
button.media-usage-btn:hover { filter: brightness(1.15); }

.media-lib-tags, .media-modal-usage .nv-chip { font-size: 12px; }
.media-lib-tags { display: flex; flex-wrap: wrap; gap: 5px; }
.media-tag {
  display: inline-block; padding: 2px 9px; border-radius: 999px;
  background: var(--tint-prim-bg); color: var(--tint-prim-fg);
  font-size: 12px; font-weight: 500; text-decoration: none;
}
.media-tag:hover { filter: brightness(1.15); text-decoration: none; }
.media-tag.is-static { cursor: default; }
.media-tag-filter { display: flex; align-items: center; gap: 8px; margin: 0 0 14px; }

.media-lib-edit { border-top: 1px solid var(--c-border); padding-top: 8px; }
.media-lib-edit summary {
  cursor: pointer; font-size: 13px; color: var(--c-muted);
  list-style-position: inside;
}
.media-lib-edit summary:hover { color: var(--c-text); }
.media-lib-edit[open] summary { margin-bottom: 8px; }
.media-lib-form { margin-bottom: 10px; }
.media-lib-form:last-child { margin-bottom: 0; }
.media-lib-form label { display: block; margin-bottom: 3px; }
.media-lib-form-row { display: flex; gap: 6px; }
.media-lib-form-row input { flex: 1; min-width: 0; font-size: 13px; }
/* `background: transparent` erbij: deze knop zette alleen kleur en rand, dus
   viel de achtergrond terug op de knopkleur van de BROWSER. In donkere
   weergave werd dat #6b6b6b onder lichtrode tekst: contrast 2.81. */
.btn-danger-ghost { background: transparent; color: var(--tint-err-fg); border-color: var(--tint-err-bg); }
.btn-danger-ghost:hover { background: var(--tint-err-bg); color: var(--tint-err-fg); }
.media-lib-pager { display: flex; justify-content: center; align-items: center; gap: 12px; margin-top: 22px; }
.media-lib-skeleton-grid { margin-top: 18px; }
.media-lib-skeleton { display: flex; flex-direction: column; gap: 10px; padding: 10px; }
.media-lib-skeleton-thumb { display: block; height: 160px; border-radius: var(--r-md); }
.media-lib-skeleton-line { display: block; width: 82%; height: 11px; border-radius: 999px; }
.media-lib-skeleton-line.is-short { width: 54%; }
.media-lib-sentinel { height: 1px; }

/* Lightbox / detail-popup */
body.media-modal-open { overflow: hidden; }
.media-modal-card {
  max-width: 720px; max-height: 90vh; overflow-y: auto;
  position: relative; padding: 18px;
  border: 1px solid var(--c-border);
}
.media-modal-close {
  position: absolute; top: 10px; right: 12px;
  background: var(--c-surface-2); color: var(--c-text);
  border: 1px solid var(--c-border); border-radius: 50%;
  width: 32px; height: 32px; font-size: 17px; line-height: 1;
  cursor: pointer; z-index: 1;
}
.media-modal-close:hover { background: var(--c-primary-soft); }
.media-modal-preview {
  display: flex; align-items: center; justify-content: center;
  background: var(--c-surface-2); border-radius: var(--r-md);
  margin-bottom: 14px; min-height: 120px;
}
.media-modal-preview img, .media-modal-preview video {
  max-width: 100%; max-height: 60vh; border-radius: var(--r-md); display: block;
}
.media-modal-title { margin: 0 0 2px; font-size: 15px; word-break: break-all; }
.media-modal-sub { margin: 0 0 12px; }
.media-modal-download { margin-bottom: 12px; }
.media-modal-usage h4 { margin: 0 0 6px; font-size: 13px; color: var(--c-muted); text-transform: uppercase; letter-spacing: .4px; }
.media-modal-usage ul { list-style: none; margin: 0; padding: 0; }
.media-modal-usage li {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 8px 2px; border-top: 1px solid var(--c-border); font-size: 14px;
}
.media-modal-usage li:first-child { border-top: 0; }

@media (prefers-reduced-motion: reduce) {
  .media-lib-thumb.is-loading::before,
  .media-lib-skeleton-thumb,
  .media-lib-skeleton-line { animation: none; }
}

/* Mobiel: dit stond in het off-canvas-blok van nova.css, maar het gaat over
   twee GEDEELDE elementen. In een schil zonder zijbalk moeten ze net zo goed
   krimpen, dus staan ze hier in plaats van bij een enkel thema. */
@media (max-width: 900px) {
  .nav-search input[type="search"] { min-width: 120px; }
  /* "NIEUWE POST" WORDT "+", MAAR HET LABEL BLIJFT DE NAAM VAN DE LINK. Het
     plusteken is aria-hidden, dus met `display: none` had de link onder 900px
     geen toegankelijke naam: de aria-snapshot gaf een kale `link`, in alle drie
     de site-schillen en in beide talen (gemeten 22-09-2026, docs/themas.md
     §9l). Het sr-only-patroon haalt het label alleen visueel weg; de balk blijft
     pixel voor pixel gelijk. */
  .btn-create .btn-create-label {
    position: absolute; width: 1px; height: 1px; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
  }
}


/* -----  Scorebord (gamificatie, views/leaderboard)  -------- */
.leaderboard-page .page-header { flex-wrap: wrap; gap: 12px; }
.lb-tabs { display: flex; gap: 4px; background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--r-md); padding: 3px; }
.lb-tabs .lb-tab {
  padding: 6px 12px; border-radius: calc(var(--r-md) - 3px);
  font-size: 13px; font-weight: 600; color: var(--c-muted); text-decoration: none;
}
.lb-tabs .lb-tab:hover { color: var(--c-text); }
.lb-tabs .lb-tab.is-active { background: var(--tint-prim-bg); color: var(--tint-prim-fg); }
.lb-periodbar { display: flex; align-items: center; gap: 12px; margin: 0 0 14px; }
.lb-periodbar strong { font-size: 14px; }

.lb-me-grid { display: grid; grid-template-columns: auto auto auto 1fr; gap: 24px; align-items: start; }
.lb-me-cell { display: flex; flex-direction: column; gap: 4px; }
.lb-me-label { font-size: 12px; color: var(--c-muted); text-transform: uppercase; letter-spacing: .4px; }
.lb-me-num { font-size: 30px; font-weight: 700; line-height: 1.15; }
.lb-me-level { min-width: 200px; }
.lb-level-bar {
  height: 8px; border-radius: 4px; background: var(--c-border);
  overflow: hidden; margin: 6px 0 4px;
}
.lb-level-bar span { display: block; height: 100%; border-radius: 4px; background: var(--c-primary); }
.lb-optout-note { margin: 12px 0 0; }

.lb-podium { display: flex; align-items: flex-end; justify-content: center; gap: 14px; margin: 18px 0; }
.lb-podium-slot {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  background: var(--c-surface); border: 1px solid var(--c-border);
  border-radius: var(--r-md); padding: 16px 18px 12px; min-width: 140px;
  box-shadow: var(--shadow-sm);
}
.lb-podium-1 { order: 2; padding-top: 24px; padding-bottom: 20px; border-color: var(--c-primary); box-shadow: var(--shadow-md); }
.lb-podium-2 { order: 1; }
.lb-podium-3 { order: 3; }
.lb-podium-medal { font-size: 24px; }
.lb-podium-1 .lb-podium-medal { font-size: 32px; }
.lb-podium-name { font-weight: 600; text-align: center; }
.lb-podium-points { font-size: 13px; color: var(--c-muted); }
.lb-podium-slot.is-me { outline: 2px solid var(--c-focus); outline-offset: 2px; }

.lb-avatar {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; border-radius: 50%; flex: 0 0 auto;
  background: var(--tint-prim-bg); color: var(--tint-prim-fg);
  font-size: 12px; font-weight: 700;
}
.lb-table .lb-rank-col { width: 44px; }
.lb-table .lb-rank { font-weight: 700; color: var(--c-muted); }
.lb-table td { vertical-align: middle; }
.lb-table .lb-avatar { margin-right: 8px; }
.lb-member { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.lb-table tr.is-me td { background: var(--tint-prim-bg); }
.lb-table .lb-points { font-weight: 700; }
.lb-more-wrap { margin: 14px 0 0; }

@media (max-width: 700px) {
  .lb-me-grid { grid-template-columns: 1fr 1fr; }
  .lb-me-level { grid-column: 1 / -1; }
  .lb-podium { flex-wrap: wrap; align-items: stretch; }
  .lb-podium-slot { min-width: 110px; padding: 12px; }
}

/* Badges/prestaties (§6) — scorebord + profiel */
.gami-badge-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 12px; margin-top: 4px;
}
.gami-badge {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 10px 12px; border: 1px solid var(--c-border); border-radius: 10px;
}
.gami-badge-icon { font-size: 26px; line-height: 1.2; }
.gami-badge-meta { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.gami-badge.is-locked { opacity: .55; }
.gami-badge.is-locked .gami-badge-icon { filter: grayscale(1); }

/* Gamificatie-widget op het dashboard (§14) */
.gami-widget-stats { display: flex; gap: 24px; }
.gami-widget-badges { margin-top: 12px; }
.gami-badge-strip { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.gami-badge-chip {
  font-size: 20px; line-height: 1; padding: 5px 7px;
  border: 1px solid var(--c-border); border-radius: 8px; cursor: default;
}
.gami-widget-level { margin-top: 12px; }
.gami-top3 { margin-top: 14px; }
.gami-top3 ol { list-style: none; margin: 6px 0 0; padding: 0; counter-reset: gami; }
.gami-top3 li {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 7px 2px; border-top: 1px solid var(--c-border); font-size: 14px;
  counter-increment: gami;
}
.gami-top3 li:first-child { border-top: 0; }
.gami-top3 .gami-top3-name::before {
  content: counter(gami) '.'; color: var(--c-muted); font-weight: 700; margin-right: 7px;
}
.gami-top3 .gami-top3-points { font-weight: 700; }
.gami-top3 li.is-me .gami-top3-name { font-weight: 600; }

/* Teamdoel (fase 3): collectieve voortgangsbalk op scorebord + widget */
.lb-challenge .lb-challenge-line { margin: 0 0 4px; }
.lb-challenge-bar { max-width: 420px; }
.lb-challenge.is-done .lb-challenge-bar span,
.lb-challenge-bar.is-done span { background: var(--c-success); }
.lb-challenge-note { margin: 4px 0 0; }
.gami-widget-challenge .lb-challenge-bar { max-width: none; }

/* Eregalerij (fase 3, migratie 077): gearchiveerde week-/maandwinnaars */
.lb-hall-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 4px;
}
.lb-hall-list { list-style: none; margin: 6px 0 0; padding: 0; }
.lb-hall-list li {
  display: flex; align-items: center; gap: 10px;
  padding: 7px 2px; border-top: 1px solid var(--c-border); font-size: 14px;
}
.lb-hall-list li:first-child { border-top: 0; }
.lb-hall-list li.is-me { background: var(--tint-prim-bg); border-radius: 6px; }
.lb-hall-period { color: var(--c-muted); font-size: 12px; flex: 0 0 auto; min-width: 110px; }
.lb-hall-name { flex: 1 1 auto; font-weight: 600; display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.lb-hall-points { font-weight: 700; flex: 0 0 auto; }
@media (max-width: 700px) {
  .lb-hall-grid { grid-template-columns: 1fr; }
}

/* Klein glyph in een knoplabel (posteditor: zichtbaarheid van een promptsjabloon). */
.btn-ico { display: inline-flex; vertical-align: -2px; }
.btn-ico svg { width: 14px; height: 14px; }