/* ============================================================
 * SocialGain — themes/site/nova/theme.css
 * Thema "Nova": zijbalk links, kopbalk rechts daarnaast, donker als
 * standaard. Levert zijn eigen palet en zijn eigen schil, en erft verder
 * alleen de gedeelde applicatielaag (assets/media/app.css + ui.css).
 * De bijbehorende opmaak staat in themes/site/nova/layout/.
 * ============================================================ */

/* -----  Tokens  ------------------------------------------- */
/* -----  Design tokens — dark (standaard)  ----------------- */
:root {
  --c-bg:          #0b0b13;
  --c-surface:     #14141f;
  --c-surface-2:   #1a1a29;
  --c-border:      #262637;
  --c-text:        #eef0f8;
  --c-muted:       #8f91ab;
  /* WIT OP #7c6af7 IS 3.99:1 en haalt de 4.5 voor normale tekst niet (WCAG 2.2
     AA). Dat raakte élke .btn-primary, in beide thema's en beide weergaven.
     Eén stap donkerder: #6a56f0 geeft 4.98:1 met wit. Dat was al de
     hover-schaduw, dus schuift die mee naar #5a45dd (6.4:1). Visueel
     nauwelijks te onderscheiden, meetbaar wél toegankelijk. */
  --c-primary:     #6a56f0;
  --c-primary-600: #5a45dd;
  --c-primary-soft: rgba(106, 86, 240, .14);
  --c-success:     #34d399;
  --c-warning:     #fbbf24;
  --c-error:       #f87171;
  --c-focus:       #8b7cf8;
  --c-link:        #a5b4fc;

  --r-md: 10px;
  --r-lg: 14px;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .4);
  --shadow-md: 0 4px 16px rgba(0, 0, 0, .45);
  --shadow-lg: 0 16px 48px rgba(0, 0, 0, .6);

  --nv-sidebar-w:  232px;
  --nv-sidebar-bg: #0e0e18;
  --nv-topbar-bg:  rgba(11, 11, 19, .85);
  /* Plat, geen verloop. Stond hier als linear-gradient(135deg, #6a56f0,
     #9b7cf8) en droeg de hoofdknop, het merkvlak en élke gebruikersavatar.
     Dat diagonale indigo-naar-violet is inmiddels het meest herkenbare
     kenmerk van een gegenereerde interface; de kleur zelf blijft. */
  --ui-brand: var(--c-primary);
  --ui-active-fg:  #cfc6ff;
  --ui-auth-bg: radial-gradient(80% 60% at 50% 0%, #191932 0%, var(--c-bg) 65%);

  /* Getinte badge/chip/alert-kleuren (bg + fg per betekenis) */
  --tint-ok-bg:   rgba(52, 211, 153, .14);  --tint-ok-fg:   #6ee7b7;
  --tint-warn-bg: rgba(251, 191, 36, .14);  --tint-warn-fg: #fcd34d;
  --tint-err-bg:  rgba(248, 113, 113, .14); --tint-err-fg:  #fca5a5;
  --tint-info-bg: rgba(56, 189, 248, .14);  --tint-info-fg: #7dd3fc;
  --tint-prim-bg: var(--c-primary-soft);    --tint-prim-fg: #c4b5fd;
}

/* -----  Design tokens — light  ---------------------------- */
html[data-mode="light"] {
  --c-bg:          #f4f5fa;
  --c-surface:     #ffffff;
  --c-surface-2:   #eef0f6;
  --c-border:      #e2e4ee;
  --c-text:        #1b1f2a;
  /* WAS #6b7280: 4.44:1 op --c-bg en 4.24:1 op --c-surface-2 — net onder de
     4.5. Raakte .muted, .back-link, .btn-ghost, <th>, <code> en de
     kalenderdagen, dus zo'n beetje alle secundaire tekst. #5c6076 geeft 5.67:1
     respectievelijk 5.39:1. Atlas gebruikte deze waarde al; nu delen beide
     thema's hem. */
  --c-muted:       #5c6076;
  --c-primary-soft: rgba(106, 86, 240, .12);
  --c-focus:       #6a56f0;
  --c-link:        #4f46e5;

  --shadow-sm: 0 1px 2px rgba(16, 24, 40, .06);
  --shadow-md: 0 4px 12px rgba(16, 24, 40, .08);
  --shadow-lg: 0 16px 40px rgba(16, 24, 40, .14);

  --nv-sidebar-bg: #ffffff;
  --nv-topbar-bg:  rgba(255, 255, 255, .85);
  --ui-active-fg:  #5b4bd5;
  --ui-auth-bg: radial-gradient(80% 60% at 50% 0%, #e9e7fb 0%, var(--c-bg) 65%);

  --tint-ok-bg:   rgba(22, 163, 74, .12);  --tint-ok-fg:   #15803d;
  --tint-warn-bg: rgba(217, 119, 6, .12);  --tint-warn-fg: #b45309;
  --tint-err-bg:  rgba(220, 38, 38, .1);   --tint-err-fg:  #b91c1c;
  --tint-info-bg: rgba(2, 132, 199, .12);  --tint-info-fg: #0369a1;
  --tint-prim-bg: var(--c-primary-soft);   --tint-prim-fg: #5b4bd5;
}

/* -----  De schil  ----------------------------------------- */
/* -----  App-shell: sidebar + main  ------------------------ */
.app-shell { display: flex; min-height: 100vh; }

.sidebar {
  width: var(--nv-sidebar-w);
  flex: 0 0 var(--nv-sidebar-w);
  background: var(--nv-sidebar-bg);
  border-right: 1px solid var(--c-border);
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
  padding: 18px 12px;
  gap: 4px;
  z-index: 60;
}
.sidebar .brand {
  display: flex; align-items: center; gap: 10px;
  padding: 4px 10px 18px;
  color: var(--c-text); font-weight: 700; letter-spacing: .04em;
}
.sidebar .brand-mark {
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--ui-brand);
  color: #fff; display: inline-flex; align-items: center; justify-content: center;
  font-size: 14px; font-weight: 800; box-shadow: 0 0 18px var(--c-primary-soft);
}
.sidebar-nav { display: flex; flex-direction: column; gap: 2px; }
.sidebar-nav a {
  display: flex; align-items: center; gap: 11px;
  padding: 9px 12px;
  border-radius: var(--r-md);
  color: var(--c-muted);
  font-size: 14px; font-weight: 500;
  text-decoration: none;
}
.sidebar-nav a:hover { background: var(--c-surface-2); color: var(--c-text); text-decoration: none; }
.sidebar-nav a.is-active {
  background: var(--c-primary-soft);
  color: var(--ui-active-fg);
  box-shadow: inset 0 0 0 1px var(--c-primary-soft);
}
.sidebar-nav .nav-ico {
  width: 18px; height: 18px; flex: 0 0 18px;
  display: inline-flex; align-items: center; justify-content: center;
  opacity: .9;
}
.sidebar-nav .nav-ico svg { width: 18px; height: 18px; }
.sidebar-nav .nav-badge {
  margin-left: auto;
  background: var(--c-primary);
  color: #fff; font-size: 11px; font-weight: 700;
  border-radius: 999px; padding: 1px 7px;
}

/* Waarschuwingstoon voor een teller die urgentie draagt: verlopen taken,
   vastgelopen publicaties, volle zetels. De literal terugval staat er niet
   voor de sier — een token dat nergens gedefinieerd is valt STIL weg, en dan
   erft de badge zijn gewone kleur alsof er niets aan de hand is. */
.sidebar-nav .nav-badge-waarschuwing { background: var(--tint-warn-fg, #b45309); }
.sidebar-sep { border: 0; border-top: 1px solid var(--c-border); margin: 10px 6px; }
.sidebar-foot {
  margin-top: auto; padding-top: 14px;
  border-top: 1px solid var(--c-border);
  display: flex; flex-direction: column; gap: 8px;
}
.sidebar-foot .user-chip {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px; border-radius: var(--r-md);
  color: var(--c-text); background: transparent; border: 0;
}
.sidebar-foot .user-chip:hover { background: var(--c-surface-2); text-decoration: none; }
.user-chip-meta { min-width: 0; display: flex; flex-direction: column; line-height: 1.3; }
.user-chip-name { font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.user-chip-role { font-size: 11px; color: var(--c-muted); }

.app-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
/* -----  Topbar (in app-main)  ----------------------------- */
/* DEZE BALK IS STICKY, dus alles waar de BROWSER zelf naartoe scrolt — een
   ankerlink, scrollIntoView(), de focus die met Tab uit beeld springt — landt
   eronder en is dan niet aan te klikken (WCAG 2.2 AA, Focus Not Obscured).
   Gemeten met echte Tab-aanslagen vóór deze regel: op tablet verdween er een
   focus volledig onder de balk.
   Gemeten balkhoogte per breedte (22-09-2026, docs/themas.md §9j, §9k en §9l):
     320px → 159    360-480px → 164    600-721px → 114    768-840px → 64
     841-900px → 61    901-1279px → 64, met een volle balk op 901-1015px 112
     1280px en hoger → 61
   Net als bij Atlas is die hoogte niet monotoon (de mediaquery op 840px haalt
   de mobiele wrap weg), dus één ruime waarde zolang de balk kán wrappen en pas
   daarboven de krappe. Naast de zijbalk kan hij dat opnieuw: de band op
   901-1279px zet de ruime waarde daarom zelf terug. Te veel padding kost lege
   ruimte boven het doel; te weinig maakt het doel onbereikbaar.
   --ui-bar-max is het gedeelde contract: assets/media/ui.css leest hem voor
   scroll-padding-top en voor de hoogtekap van de uitklappers. Elk thema zet
   hier zijn eigen ruimste balkhoogte. */
:root {
  --ui-bar-max: 176px;
}
@media (min-width: 841px) { :root { scroll-padding-top: 74px; } }

.topbar {
  background: var(--nv-topbar-bg);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--c-border);
  position: sticky; top: 0; z-index: 50;
}
.topbar-inner {
  max-width: none;
  display: flex; align-items: center; gap: 14px;
  padding: 12px 24px;
}
.topbar-right { margin-left: auto; display: flex; align-items: center; gap: 12px; }

.app-main .container { max-width: 1240px; }

/* -----  Responsief: sidebar wordt off-canvas  -------------- */
.mobile-nav-btn span { background: var(--c-text); }
@media (max-width: 900px) {
  /* Overschrijft de oude .topbar-nav dropdown-regels uit app.css */
  .sidebar.topbar-nav, .sidebar.topbar-nav.is-open {
    display: flex; flex-direction: column; gap: 4px;
    position: fixed; left: 0; right: auto; top: 0; bottom: 0;
    width: var(--nv-sidebar-w); height: 100vh;
    padding: 18px 12px; border-bottom: 0;
    background: var(--nv-sidebar-bg); box-shadow: var(--shadow-lg);
    transition: transform .2s ease, visibility .2s ease;
  }
  /* `visibility` EN NIET ALLEEN `transform`. Een lade die alleen weggeschoven
     is, houdt al zijn links in de TABVOLGORDE: gemeten met echte Tab-aanslagen
     liep de focus op 375px en 768px 26 stappen lang door een onzichtbare lade
     (merk, 24 menu-items, de gebruikerschip en Uitloggen) voordat hij weer op
     het scherm terugkwam — WCAG 2.4.3 Focus Order en 2.4.7 Focus Visible.
     `visibility: hidden` haalt de inhoud uit de tabvolgorde én uit de
     toegankelijkheidsboom, en laat de schuifanimatie intact omdat het pas aan
     het eind van de transition omslaat. */
  .sidebar.topbar-nav { transform: translateX(-100%); visibility: hidden; }
  .sidebar.topbar-nav.is-open { transform: translateX(0); visibility: visible; }
  .sidebar-nav a { width: auto; padding: 9px 12px; border-radius: var(--r-md); }
  .sidebar-foot .user-chip { display: flex; }
  .app-main { width: 100%; }
  /* DE KNOP DIE DE LADE OPENT, STAAT IN HETZELFDE BLOK ALS DE LADE. Hij kwam
     uit het `max-width: 840px`-blok van app.css; tussen 841 en 900px was de
     zijbalk daardoor dicht en de knop weg — geen enkel menu-item bereikbaar
     (gemeten 22-09-2026, docs/themas.md §9k). Eén grens, dus één blok. De
     balk wrapt boven 840px niet en hoeft dat ook niet: met de kiezerregel
     hieronder op dezelfde grens past hij ook in het slechtste geval op één
     rij van 61px, onder de krappe scroll-padding hierboven. */
  .mobile-nav-btn { display: flex; flex-direction: column; justify-content: center; align-items: center; }
}
/* DE ORGANISATIEKIEZER STAAT OP DE RIJ VAN DE HAMBURGER. Op een telefoon droeg
   die rij alleen de knop, rechts, met ~280px lege ruimte ernaast; daar past de
   kiezer zonder dat deze sticky balk groeit (390px: 164px, met en zonder
   kiezer). De gedeelde regel in app.css zet hem juist op een EIGEN rij onderaan
   (`order: 10; width: 100%`): dat is 220px op 390, boven --ui-bar-max. De basis
   van 120px beslist wanneer de rij breekt, de groei vult de rest; de keuzelijst
   zelf houdt de 200px uit ui.css. Gemeten 22-09-2026, docs/themas.md §9j.
   DE GRENS IS DIE VAN DE HAMBURGER, en die staat sinds §9k op 900px, in het
   blok van de lade. Bleef deze regel op 840, dan wisselden kiezer en knop op
   841px van plaats en kromp de kiezer niet mee: met de rondleidings- en de
   meldknop zichtbaar en een lange organisatienaam werd het document daar
   886px breed. Zo houden 841-900px de indeling van eronder, op één rij.
   EN DE KEUZELIJST KRIMPT MEE. Een omhulsel dat krimpt helpt niets zolang de
   lijst zelf 200px breed blijft: op 841-900px schoof een lijst met een lange
   organisatienaam 42px onder de hamburger en 18px onder het zoekveld (gemeten,
   docs/themas.md §9l). Onder 840px deed app.css dit al met `width: 100%`.
   ALLEEN NAAST EEN VASTE FLEX-BASIS, dus hier en in de band hieronder, en nooit
   als basisregel: een percentage in max-width telt niet mee voor de
   inhoudsbreedte, dus zonder vaste basis groeide het omhulsel naar de volle
   naam en werd een volle balk op 1280px 1386px breed (gemeten). */
@media (max-width: 900px) {
  .org-switcher { order: -1; flex: 1 1 120px; width: auto; min-width: 0; margin: 0; }
  .org-switcher-form { min-width: 0; }
  .org-switcher select { max-width: min(200px, 100%); }
}
/* NAAST DE ZIJBALK HEEFT DE KOPBALK DE RUIMTE VAN EEN TABLET. Boven de lade-grens
   staat de zijbalk er weer (232px), en op 901px houdt de balk 669px over: minder
   dan op 900px zonder zijbalk. De compacte vorm uit ui.css en de kiezerregel
   hierboven hielden precies daar op. Gemeten 22-09-2026 (docs/themas.md §9l): het
   document was op 960 en 1024px 1032px breed, met een lange organisatienaam
   1091px, en met de rondleidings- en meldknop erbij (in productie gewoon
   zichtbaar) 1214px tot en met 1180px; tot 1268px werden knoppen geknepen
   (31-34px, "Nieuwe post" op twee regels) en tot 1100px viel de meldingenlade
   half buiten beeld. Daarom hier de vorm van een tablet:
   - de kiezer krimpt en kort zijn naam in, en de lijst krimpt mee (zie
     hierboven). Zonder rand: aan een omhulsel dat meegroeit zweeft die tot
     479px naast de lijst;
   - het zoekveld wordt 160px en "Nieuwe post" wordt "+". Het label blijft de
     toegankelijke naam (sr-only, nooit display: none);
   - wat dan nog niet past wrapt, en een balk die wrapt groeit mee (§9e, oorzaak
     3). Met een volle balk op 901-1015px zijn dat twee rijen (112px), en een
     scrolldoel landde dan onder de krappe 74px: vandaar hier weer de ruime.
   TOT EN MET 1279 EN NIET 1100: met beide knoppen, een lange naam en een
   AI-teller van "123.4k" past de volle balk pas vanaf 1269px op één rij.
   ponytail: die grens hangt aan het aantal knoppen in de balk; een knop erbij
   (38px plus 12px ruimte) schuift hem ~50px op, meet hem dan opnieuw. */
@media (min-width: 901px) and (max-width: 1279px) {
  :root { scroll-padding-top: var(--ui-bar-max); }
  .topbar-inner { flex-wrap: wrap; height: auto; }
  .topbar-right { flex-wrap: wrap; justify-content: flex-end; }
  .org-switcher { flex: 1 1 120px; min-width: 0; margin: 0; padding: 0; border: 0; }
  .org-switcher-form { min-width: 0; }
  .org-switcher select { max-width: min(200px, 100%); }
  .nav-search input[type="search"] { min-width: 120px; }
  .btn-create .btn-create-label {
    position: absolute; width: 1px; height: 1px; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
  }
}

/* -----  Menugroepen: één niveau, native <details>  -------- */
/* GEEN JavaScript: CSP staat op script-src 'self', en <details> levert
   toetsenbordbediening en een correcte aria-expanded gratis. De marker is
   verborgen en vervangen door een eigen chevron, zodat hij in elke schil
   hetzelfde staat.
   De STIP is geen getal. Een som over de kinderen zou stukgaan op /team, dat
   een indicator levert ("7/10") en geen aantal — en een getal op een kop is
   sowieso dubbelzinnig ("3 wat?"). Het echte getal staat op het kind. */
.sidebar-nav .nav-group > summary {
  display: flex; align-items: center; gap: 11px;
  padding: 9px 12px; border-radius: var(--r-md);
  color: var(--c-muted); font-size: .93rem;
  cursor: pointer; list-style: none;
}
.sidebar-nav .nav-group > summary::-webkit-details-marker { display: none; }
.sidebar-nav .nav-group > summary:hover { background: var(--c-surface-2); color: var(--c-text); }
.sidebar-nav .nav-group[open] > summary { color: var(--c-text); }
.sidebar-nav .nav-group > summary .nav-ico { width: 18px; display: inline-flex; }
.sidebar-nav .nav-group > summary .nav-ico svg { width: 18px; height: 18px; }
.sidebar-nav .nav-group > summary::after {
  content: ''; width: 6px; height: 6px; margin-left: auto; flex: 0 0 auto;
  border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg);
}
.sidebar-nav .nav-group[open] > summary::after { transform: rotate(-135deg); }
/* De kinderen springen in en krijgen een lijn: zo is te zien dat ze bij de kop
   horen, ook wanneer twee groepen open staan. */
.sidebar-nav .nav-group-panel {
  display: flex; flex-direction: column; gap: 2px;
  margin: 2px 0 4px 22px; padding-left: 8px;
  border-left: 1px solid var(--c-border);
}
.sidebar-nav .nav-dot {
  width: 7px; height: 7px; border-radius: 50%; flex: 0 0 auto;
  margin-left: auto; background: var(--c-error);
}
.sidebar-nav .nav-group > summary .nav-dot + .nav-group,
.sidebar-nav .nav-dot + .sr-only { margin: 0; }
.sidebar-nav .nav-dot-waarschuwing { background: var(--tint-warn-fg, #b45309); }