/* ==========================================================================
   OD-Viewer styling
   - Light + dark via prefers-color-scheme + data-theme override
   - CSS Grid layout met sleepbare splitter, mobile = verticale stack
   - Print = alleen actieve tab, geen kaart/header
   ========================================================================== */

:root {
   /* Primair: GISkit-huisstijl blauw */
   --primary-dark:    #40568D;   /* GISkit-blauw, header-bg */
   --primary-mid:     #6B7FA8;   /* secundair, hovers */
   --primary-light:   #E8ECF5;   /* zachte achtergrond */

   /* Accent: oranje voor annotaties (behouden) */
   --accent:          #FF6A00;
   --accent-soft:     #FFE5B4;
   --accent-on:       #FFFFFF;

   /* Neutralen */
   --bg-base:         #FFFFFF;   /* hoofdcontent achtergrond */
   --bg-panel:        #FAFBFC;   /* kaart-paneel */
   --bg-elevated:     #FFFFFF;   /* dialogs, menus */
   --bg-soft:         #F0F2F7;   /* tab-balk */
   --text-primary:    #1B2030;   /* hoofdtekst */
   --text-secondary:  #5A6478;   /* subtitels */
   --text-muted:      #9CA3B8;   /* metadata */
   --border:          #DDE1EA;
   --shadow:          0 4px 16px rgba(27, 32, 48, 0.12);

   /* Layout */
   --left-w:          40%;
   --top-h:           40vh;
   --splitter-w:      6px;
   --header-h:        auto;
}

/* Dark mode — actief wanneer (a) data-theme=dark, of (b) OS-prefer-dark zonder light-override */
@media (prefers-color-scheme: dark) {
   :root:not([data-theme="light"]) {
      --primary-dark:    #6B83BD;
      --primary-mid:     #8FA3CF;
      --primary-light:   #2A3247;
      --accent:          #FF8533;
      --accent-soft:     #4A3520;
      --bg-base:         #1A1F2E;
      --bg-panel:        #232938;
      --bg-elevated:     #2C3346;
      --bg-soft:         #232938;
      --text-primary:    #E8ECF5;
      --text-secondary:  #9CA3B8;
      --text-muted:      #6B7388;
      --border:          #3A4156;
      --shadow:          0 4px 16px rgba(0, 0, 0, 0.4);
   }
}
:root[data-theme="dark"] {
   --primary-dark:    #6B83BD;
   --primary-mid:     #8FA3CF;
   --primary-light:   #2A3247;
   --accent:          #FF8533;
   --accent-soft:     #4A3520;
   --bg-base:         #1A1F2E;
   --bg-panel:        #232938;
   --bg-elevated:     #2C3346;
   --bg-soft:         #232938;
   --text-primary:    #E8ECF5;
   --text-secondary:  #9CA3B8;
   --text-muted:      #6B7388;
   --border:          #3A4156;
   --shadow:          0 4px 16px rgba(0, 0, 0, 0.4);
}

/* Scrollbar-styling: in dark mode is de browser-default lichtgrijze scrollbar
   visueel storend op de donkere panelen. Twee API's tegelijk voor maximale
   dekking: scrollbar-color (Firefox + Chrome 121+) en ::-webkit-scrollbar
   (Chromium/WebView2, fijnere controle). Kleuren komen uit het CSS-var-palet
   zodat ze automatisch meekleuren met light/dark. */
* {
   scrollbar-width: thin;
   scrollbar-color: var(--primary-mid) transparent;
}
*::-webkit-scrollbar         { width: 10px; height: 10px; }
*::-webkit-scrollbar-track   { background: transparent; }
*::-webkit-scrollbar-thumb   {
   background: var(--primary-mid);
   border-radius: 5px;
   /* 2px-border in bg-base-kleur geeft padding-effect rond de thumb;
      tegelijk de visuele scheiding met het scrollable paneel. */
   border: 2px solid var(--bg-base);
}
*::-webkit-scrollbar-thumb:hover { background: var(--primary-dark); }
*::-webkit-scrollbar-corner  { background: transparent; }

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
   color: var(--text-primary);
   background: var(--bg-base);
   font-family: 'Segoe UI', system-ui, -apple-system, Arial, sans-serif;
   font-size: 14px;
   margin: 0;
   display: grid;
   grid-template-rows: auto auto 1fr;
   /* Layout: tekst links, splitter midden, kaart rechts. --left-w = kaart-breedte. */
   grid-template-columns: 1fr var(--splitter-w) var(--left-w);
   overflow: hidden;
}

a {
   color: var(--primary-dark);
   text-decoration: underline;
   text-underline-offset: 2px;
}
a:hover { color: var(--accent); }

/* === Header (panelTop) — 1 logische rij met titel + hamburger === */
.panelTop {
   grid-column: 1 / -1;
   grid-row: 1;
   background: var(--primary-dark);
   color: #FFFFFF;
   padding: 8px 16px;
   display: flex;
   align-items: center;
   gap: 12px;
}

.titelblok {
   flex: 1 1 auto;
   min-width: 0;
}
.titel {
   font-size: 18px;
   font-weight: 600;
   line-height: 1.2;
   margin: 0;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
}
.titel p { margin: 0; }
.subtitel {
   font-size: 12px;
   opacity: 0.78;
   margin-top: 2px;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
}

.more-btn {
   flex: 0 0 auto;
   width: 36px; height: 36px;
   border: none;
   background: transparent;
   color: #FFFFFF;
   font-size: 22px;
   cursor: pointer;
   border-radius: 4px;
   padding: 0;
   line-height: 1;
}
.more-btn:hover { background: rgba(255, 255, 255, 0.15); }
.more-btn:focus-visible { outline: 2px solid #FFFFFF; outline-offset: 1px; }

/* === Meer-menu popup === */
.more-menu {
   position: fixed;
   top: 56px;
   right: 8px;
   min-width: 260px;
   background: var(--bg-elevated);
   color: var(--text-primary);
   border: 1px solid var(--border);
   border-radius: 8px;
   box-shadow: var(--shadow);
   /* Boven Leaflet's layer-control (z-index 1000) */
   z-index: 2000;
   padding: 6px 0;
}
.more-menu[hidden] { display: none; }
.more-menu .menu-group {
   font-size: 10px;
   text-transform: uppercase;
   letter-spacing: 0.06em;
   color: var(--text-muted);
   padding: 8px 14px 4px;
   font-weight: 600;
}
.more-menu hr {
   border: 0;
   border-top: 1px solid var(--border);
   margin: 4px 0;
}
.more-menu .menu-item {
   display: block;
   width: 100%;
   background: transparent;
   border: none;
   text-align: left;
   padding: 8px 14px;
   font: inherit;
   color: var(--text-primary);
   cursor: pointer;
}
.more-menu .menu-item:hover { background: var(--primary-light); }
.more-menu .menu-item:focus-visible { outline: 2px solid var(--primary-dark); outline-offset: -2px; }
.more-menu .menu-icon {
   display: inline-block;
   width: 18px;
   margin-right: 8px;
   text-align: center;
   color: var(--primary-mid);
}

/* === Tab-balk === */
.tab {
   grid-column: 1 / -1;
   grid-row: 2;
   background: var(--bg-soft);
   border-bottom: 1px solid var(--border);
   display: flex;
   overflow-x: auto;
}
.tab button {
   background: transparent;
   border: none;
   border-bottom: 2px solid transparent;
   color: var(--text-secondary);
   cursor: pointer;
   font-size: 14px;
   font-weight: 500;
   padding: 10px 18px;
   transition: color 0.15s, border-color 0.15s;
   white-space: nowrap;
}
.tab button:hover { color: var(--text-primary); }
.tab button.active {
   color: var(--primary-dark);
   border-bottom-color: var(--primary-dark);
}
.tab button:focus-visible { outline: 2px solid var(--primary-dark); outline-offset: -2px; }

.tabcontent {
   display: none;
   padding: 8px 12px 32px 12px;
}

/* === Kaart-panel (rechts) === */
.panelLeft {
   grid-column: 3;
   grid-row: 3;
   background: var(--bg-panel);
   overflow: hidden;
   position: relative;
   display: flex;
   flex-direction: column;
}
.kaart-titel {
   color: var(--text-primary);
   font-size: 14px;
   font-weight: 600;
   text-align: center;
   margin: 6px 8px;
   flex: 0 0 auto;
}
#map {
   flex: 1 1 auto;
   width: 100%;
   margin: 0;
}

/* === Splitter === */
.splitter {
   grid-column: 2;
   grid-row: 3;
   background: var(--border);
   cursor: col-resize;
   position: relative;
   user-select: none;
   touch-action: none;
   z-index: 500;
}
.splitter:hover { background: var(--primary-mid); }
.splitter-grip {
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
   width: 4px;
   height: 56px;
   background: var(--primary-mid);
   border-radius: 2px;
   pointer-events: none;
}
.splitter-btn {
   position: absolute;
   left: 50%;
   transform: translateX(-50%);
   width: 22px;
   height: 22px;
   border: none;
   background: transparent;
   cursor: pointer;
   padding: 0;
   font-size: 14px;
   line-height: 1;
   color: var(--primary-mid);
   z-index: 501;
}
.splitter-btn-left  { top: calc(50% - 44px); }
.splitter-btn-right { top: calc(50% + 22px); }
.splitter-btn:hover { color: var(--accent); }

/* === Tekst-panel (links) === */
.panelRight {
   grid-column: 1;
   grid-row: 3;
   background: var(--bg-base);
   overflow-y: auto;
   overflow-x: hidden;
   position: relative;
}

.copyright {
   position: sticky;
   bottom: 0;
   text-align: right;
   font-size: 11px;
   color: var(--text-muted);
   padding: 6px 12px;
   background: linear-gradient(to top, var(--bg-base), transparent);
   pointer-events: none;
}
.copyright a {
   color: var(--text-muted);
   text-decoration: none;
   pointer-events: auto;
}
.copyright a:hover { color: var(--primary-dark); text-decoration: underline; }

/* === Collapse-states ===
   In de current layout: kolom 1 = tekst (.panelRight HTML, naam misleidend
   na de swap), kolom 3 = kaart (.panelLeft HTML). De collapse-classes
   verbergen het paneel dat overeenkomt met de gekrompen kolom:
   - left-collapsed: kolom 1 wordt 0 → tekst (.panelRight) wegklappen
   - right-collapsed: kolom 3 wordt 0 → kaart (.panelLeft) wegklappen
   De tab-balk hoort bij de tekst, dus weg bij left-collapsed. */
body.left-collapsed  { grid-template-columns: 0 var(--splitter-w) 1fr; }
body.right-collapsed { grid-template-columns: 1fr var(--splitter-w) 0; }
body.left-collapsed  .panelRight { visibility: hidden; }
body.right-collapsed .panelLeft  { visibility: hidden; }
body.left-collapsed  .tab        { display: none; }

/* === Dialog (info + over) === */
dialog {
   border: none;
   border-radius: 10px;
   padding: 0;
   max-width: 480px;
   width: calc(100% - 32px);
   color: var(--text-primary);
   background: var(--bg-elevated);
   box-shadow: var(--shadow);
}
dialog::backdrop {
   background: rgba(27, 32, 48, 0.45);
   backdrop-filter: blur(2px);
}
.dialog-header {
   display: flex;
   align-items: center;
   justify-content: space-between;
   padding: 14px 18px;
   border-bottom: 1px solid var(--border);
}
.dialog-header h2 {
   margin: 0;
   font-size: 16px;
   font-weight: 600;
}
.dialog-close {
   border: none;
   background: transparent;
   font-size: 18px;
   line-height: 1;
   cursor: pointer;
   color: var(--text-secondary);
   padding: 4px 8px;
}
.dialog-close:hover { color: var(--accent); }
.dialog-body { padding: 16px 18px; }
.dialog-body dl {
   display: grid;
   grid-template-columns: 1fr 2fr;
   gap: 8px 16px;
   margin: 0;
}
.dialog-body dt { color: var(--text-secondary); font-size: 12px; }
.dialog-body dd { margin: 0; word-break: break-word; }
.dialog-body .full {
   grid-column: 1 / -1;
   font-size: 13px;
   color: var(--text-secondary);
   margin-top: 12px;
   padding-top: 12px;
   border-top: 1px solid var(--border);
}

.over-logo {
   display: block;
   max-width: 180px;
   max-height: 64px;
   margin: 4px auto 16px;
}
.over-tagline {
   text-align: center;
   font-size: 13px;
   color: var(--text-secondary);
   margin: 0 0 16px;
}

/* === Bestaande content-styling (toggles, annotaties) === */
h6 {
   font-size: 1em;
   font-weight: bold;
   color: var(--primary-dark);
   margin: 12px 0 4px;
}
div, ol, ul, tr, th { line-height: 1.2em; margin-bottom: 1.2em; }
.compact { margin-bottom: 0; }
table { table-layout: auto; line-height: 1.2em; font: inherit; }

/* Tabel-styling voor de eigen tabs (Regeling/Motivering/Toelichting) — bv. de
   begrippenlijst. Browser-defaults (witte cellen, zwarte tekst) lopen in dark
   mode mis: tekst wordt vrijwel onleesbaar grijs-op-licht. Door background +
   color expliciet via CSS-vars te zetten, schalen ze automatisch mee met het
   thema. Scope op de 3 tabs zodat de besluit-tab (KOOP-styling) niet wordt
   geraakt. */
#Regeling table, #Motivering table, #Toelichting table {
   background: var(--bg-base);
   color: var(--text-primary);
   border-collapse: collapse;
}
#Regeling th, #Regeling td,
#Motivering th, #Motivering td,
#Toelichting th, #Toelichting td {
   background: var(--bg-base);
   color: var(--text-primary);
   border: 1px solid var(--border);
   padding: 6px 10px;
   vertical-align: top;
}
#Regeling th, #Motivering th, #Toelichting th {
   background: var(--bg-soft);
   font-weight: 600;
   text-align: left;
}

/* Leaflet zoom-controls (+/−): background via CSS-vars (schaalt mee met thema),
   en de '+'/'−' tekens via ::after-pseudo-elementen. Reden voor pseudo's i.p.v.
   native Leaflet-text: de native + en − zitten in een <span aria-hidden=...> en
   blijken in onze viewer-context onzichtbaar te zijn (font-fallback, glyph
   ontbreekt, of inheritance breekt door Leaflet's font-shorthand). Pseudo-
   elementen worden direct door de browser getekend en zijn immuun voor die
   keten. font-size:0 op de <a> verbergt de native span. */
.leaflet-bar a,
.leaflet-bar a:hover {
   background-color: var(--bg-elevated) !important;
   color: var(--text-primary) !important;
   border-bottom-color: var(--border) !important;
   text-decoration: none !important;
}
.leaflet-bar a:hover { background-color: var(--bg-soft) !important; }

.leaflet-control-zoom-in,
.leaflet-control-zoom-out {
   font-size: 0 !important;                /* verberg native <span>-content */
   position: relative !important;          /* anchor voor ::after */
}
.leaflet-control-zoom-in::after,
.leaflet-control-zoom-out::after {
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
   display: flex;
   align-items: center;
   justify-content: center;
   font: bold 18px 'Segoe UI', Arial, sans-serif;
   color: var(--text-primary);
}
.leaflet-control-zoom-in::after  { content: "+"; }
.leaflet-control-zoom-out::after { content: "\2212"; }   /* U+2212 MINUS SIGN */

.kaart-link {
   border: 0;
   background: transparent;
   font-style: normal;
   width: 100%;
   text-align: left;
   color: var(--text-primary);
}
.kaart-link-inline {
   border: 0;
   padding: 0;
   background: transparent;
   font-style: normal;
   color: var(--text-primary);
}
.kaart-link:hover, .kaart-link-inline:hover {
   cursor: pointer;
   background-color: var(--accent-soft);
   color: var(--text-primary);
}
.kaart-link.active { background-color: var(--accent-soft); }

.owregel-attr {
   background: var(--bg-soft);
   margin: 0;
   padding: 2px 8px;
   font-style: normal;
   text-align: left;
   font-size: 13px;
}

/* Toggle-switch voor "Kenmerken en kaart"-annotaties. Pill-vormig track,
   circle thumb (::before pseudo-element). 1/3 kleiner dan de eerste versie
   (was 32×18 met 14px thumb): nu 22×12 met 8px thumb.
   - OFF (default): grijze track, thumb links (left:2, translateX:0).
   - ON (class 'on'): oranje accent-track, thumb naar rechts (translateX:10).
   Geen margin: item-row gridcolumn-gap regelt de afstand tot de tekst-kop. */
.toggleAnnots {
   border: none;
   cursor: pointer;
   display: inline-block;
   vertical-align: middle;
   position: relative;
   width: 22px;
   height: 12px;
   padding: 0;
   margin: 0;
   border-radius: 6px;
   background: var(--border);
   transition: background 0.18s ease;
}
.toggleAnnots::before {
   content: '';
   position: absolute;
   top: 2px;
   left: 2px;
   width: 8px;
   height: 8px;
   border-radius: 50%;
   background: #FFFFFF;
   box-shadow: 0 1px 2px rgba(0,0,0,0.25);
   transition: transform 0.18s ease;
}
.toggleAnnots:hover { background: var(--text-muted); }
.toggleAnnots.on {
   background: var(--accent);
}
.toggleAnnots.on:hover { background: var(--accent); filter: brightness(1.05); }
.toggleAnnots.on::before { transform: translateX(10px); }
.toggleAnnots:focus-visible {
   outline: 2px solid var(--primary-dark);
   outline-offset: 1px;
}

.toggleTekst {
   background-color: transparent;
   background-image: url('img/expanded.png');
   background-position: left;
   background-repeat: no-repeat;
   background-size: 12px 12px;
   border: none;
   color: var(--primary-dark);
   cursor: pointer;
   display: inline-block;
   vertical-align: middle;
   font-size: 16px;
   font-weight: 600;
   height: 32px;
   margin: 0;
   padding-left: 24px;
   text-align: left;
   /* Was: calc(100% - 24px). Nu auto zodat de toggleAnnots inline achter de
      tekst kan staan i.p.v. via float ergens anders te belanden. */
   width: auto;
   max-width: calc(100% - 32px);
}
.toggleTekst:hover, .annotaties.active { background-color: var(--primary-light); }

/* .content is recursief gebruikt (artikel-tekst in genest .content). Geen
   cumulatieve indent meer, maar wel een uniforme baseline: alle artikel-inhoud
   en annotatie-boxen lijnen uit met de titel-tekst van de toggleTekst-button
   (die staat op 24px door zijn padding-left voor het pijl-icoon). */
.content { background: transparent; display: block; padding-left: 0; overflow: hidden; }
.indent1 { padding-left: 24px; }
.lid { font-size: 14px; font-weight: 700; color: var(--text-secondary); }

/* === Item-row: grid-wrapper rond alle non-simple structuuritems ===
   Plaatst de annotatie-switch in een vaste kolom 1 links voor de titel/nummer,
   consistent voor artikelen en leden. DOM-volgorde blijft (toggleTekst →
   toggleAnnots → annotaties → content) zodat JS-traversal werkt; visuele
   plaatsing via grid-column/-row.

   Artikel-layout (item-row):
      [switch] [Artikel 1.1 Begripsbepalingen]
               [annotatiesBox: Kenmerken en kaart]
               [tekst van artikel]

   Lid-layout (item-row.lid-row):
      [switch] [1.]  [annotatiesBox: Kenmerken en kaart]
                     [De regels in...]
*/
.item-row {
   display: grid;
   /* Switch-kolom heeft VASTE breedte (22px = switch-width) zodat alle koppen
      op dezelfde x-positie staan, ook bij items zonder annotaties (waar de
      switch display:none is). column-gap = 4px is bewust klein zodat de
      switch dicht voor de caret van de tekst-knop staat — visueel "precies
      voor het uitklap-driehoekje". */
   grid-template-columns: 22px 1fr;
   column-gap: 4px;
   margin: 6px 0;
}
/* Switch top-aligned binnen rij 1, met margin-top om visueel met de caret-y
   van de tekst-knop te lijnen. Default 10px voor artikelen (toggleTekst
   height: 32px → caret y≈16, switch center y=10+6=16 → exact uitlijning). */
.item-row > .toggleAnnots    { grid-column: 1; grid-row: 1; align-self: start; justify-self: start; margin-top: 10px; }

/* Lid-variant heeft kortere tekst-knop (height: auto, padding 4+19+4 = 27px,
   caret y≈13.5). Kleinere margin-top om opnieuw uit te lijnen met de caret. */
.item-row.lid-row > .toggleAnnots { margin-top: 7px; }
.item-row > .toggleTekst     { grid-column: 2; grid-row: 1; }
.item-row > .annotaties      { grid-column: 2; grid-row: 2; }

/* Children-wrapper (.content ZONDER .indent1): bevat geneste item-rows (bv.
   leden binnen artikel, artikelen binnen afdeling). Strekt over alle kolommen
   van de outer item-row zodat nesting GEEN extra horizontale inspring per
   niveau geeft — alle koppen staan op dezelfde x-positie ongeacht diepte. */
.item-row > .content         { grid-column: 1 / -1; grid-row: 3; padding-left: 0; }
/* Tekst-inhoud (.content.indent1, specifieker dan bovenstaande): wel in
   kolom 2 (artikel zonder leden) — voor leden override hieronder. */
.item-row > .content.indent1 { grid-column: 2; grid-row: 3; padding-left: 0; }

/* Lid-variant: nummer-kolom apart zodat annotatiesBox naast nummer staat. */
.item-row.lid-row {
   /* 22px switch + 2.5em nummer + 1fr body. */
   grid-template-columns: 22px 2.5em 1fr;
}
.item-row.lid-row > .toggleTekst.lid {
   grid-column: 2;
   grid-row: 1;
   width: auto;
   height: auto;
   align-self: start;
   padding: 4px 0 4px 20px;
}
.item-row.lid-row > .annotaties      { grid-column: 3; grid-row: 1; }

/* Content.indent1 op grid-row: auto i.p.v. fixed rij 2. Een element met
   display:none neemt GEEN grid-cel in (CSS spec) — dus als de annotaties dicht
   zijn (toggle OFF of geen annotaties), valt content automatisch op (3,1) naast
   het lid-nummer. Bij open annotaties bezet annotatiesBox (3,1) en valt content
   netjes op (3,2) eronder. Geen JS-detectie of extra class nodig. */
.item-row.lid-row > .content.indent1 {
   grid-column: 3;
   grid-row: auto;
   padding-left: 0;
   align-self: start;
   /* Match padding-top van toggleTekst.lid (4px) zodat content-tekst op
      dezelfde y-baseline staat als het lid-nummer ernaast. */
   padding-top: 4px;
}

/* Reset margin-bottom voor item-row interne divs. Globale rule (regel ~403)
   `div { margin-bottom: 1.2em }` stapelt anders cumulatief bij geneste
   structuren (artikel-content + lid-row + lid-content = ~3.6em onder elk
   lid). De item-row zelf heeft margin:6px 0 voor item-spacing. */
.item-row,
.item-row > .annotaties,
.item-row > .content,
.item-row > .content.indent1 { margin-bottom: 0; }

/* annotatiesBox heeft default margin-left:24px voor indent — in een item-row
   is de grid-cel zelf al goed gepositioneerd, dus geen extra indent. */
.item-row .annotatiesBox { margin-left: 0; }

/* Reset toggleAnnots-margin binnen item-row: grid column-gap (8px) zorgt al
   voor spacing tussen switch en titel. Eerdere margin-left:10px (voor inline-flow
   bij artikelen zonder wrapper) zou hier dubbel zijn. */
.item-row > .toggleAnnots { margin-left: 0; }

.annotaties { color: var(--text-primary); display: none; margin: 0; overflow: hidden; }
.annotatiesBox {
   margin-left: 24px;
   border: 2px solid var(--accent);
   border-radius: 4px;
   padding-bottom: 5px;
   margin-bottom: 6px;
}
.annotatiesBoxHeader {
   font-size: 12px;
   padding: 3px 8px;
   margin: 0;
   background: var(--accent);
   color: var(--accent-on);
   font-weight: 600;
}

ul.no-bullets { list-style: none; margin: 0; padding: 4px 0 4px 16px; }

/* Lijst-markers (a./b./1./2./i./ii. enz.) in de eigen tabs (Regeling/Motivering/
   Toelichting) bold weergeven — visueel consistent met de bold markers die KOOP
   in de besluit-tab toont (.list-custom__itemtype { font-weight: 700 }). De
   marker komt hier via browser-native ::marker pseudo's omdat HtmlBuilder.cs
   gewone <ol>/<ul>+<li>-markup produceert met `list-style-type:lower-alpha` etc.
   Scope is bewust beperkt tot ::marker (niet de li-content) en tot de eigen
   tabs — .no-bullets en losse spans worden zo niet geraakt, en de besluit-tab
   heeft zijn eigen KOOP-styling. */
#Regeling li::marker,
#Motivering li::marker,
#Toelichting li::marker { font-weight: 700; }

/* === Mobile (≤ 768px) === */
@media (max-width: 768px) {
   :root { --splitter-w: 14px; }
   body {
      grid-template-columns: 1fr;
      grid-template-rows: auto auto var(--top-h) var(--splitter-w) 1fr;
   }
   .panelTop   { grid-column: 1; grid-row: 1; padding: 6px 10px; }
   .tab        { grid-column: 1; grid-row: 2; }
   .panelLeft  { grid-column: 1; grid-row: 3; }
   .splitter   { grid-column: 1; grid-row: 4; cursor: row-resize; }
   .panelRight { grid-column: 1; grid-row: 5; }
   .splitter-grip      { width: 56px; height: 4px; }
   .splitter-btn-left  { left: calc(50% - 40px); top: 50%; transform: translate(-50%, -50%); }
   .splitter-btn-right { left: calc(50% + 40px); top: 50%; transform: translate(-50%, -50%); }
   body.left-collapsed  { grid-template-rows: auto auto 0 var(--splitter-w) 1fr; }
   body.right-collapsed { grid-template-rows: auto auto 1fr var(--splitter-w) 0; }
   .titel { font-size: 16px; }
   .more-menu { left: 8px; right: 8px; min-width: 0; }
}
@media (max-width: 480px) {
   .titel    { font-size: 14px; }
   .subtitel { font-size: 11px; }
}

/* === Print stylesheet — print huidige actieve tab, geen kaart, geen header === */
@media print {
   :root { color-scheme: light; }
   body {
      display: block !important;
      overflow: visible !important;
      background: white !important;
      color: black !important;
   }
   .panelTop, .tab, .panelLeft, .splitter, .copyright,
   dialog, .more-menu, .more-btn,
   .toggleAnnots, .toggleTekst {
      display: none !important;
   }
   .panelRight {
      grid-column: 1 / -1 !important;
      grid-row: 1 / -1 !important;
      overflow: visible !important;
      padding: 0 !important;
      position: static !important;
   }
   /* alleen actieve tab printen; alle hieronder zou inhoud kunnen overschrijven, dus laat tabcontent[style*="block"] over */
   .tabcontent { display: none !important; }
   .tabcontent[style*="block"] { display: block !important; padding: 0 !important; }
   /* alle uitklappers open zetten */
   .content, .annotaties, .annotatiesBox { display: block !important; }
   /* alle achtergrondkleuren weg voor inkt-besparing */
   *, *::before, *::after {
      background: transparent !important;
      box-shadow: none !important;
      color: black !important;
   }
   .annotatiesBoxHeader {
      background: transparent !important;
      border-bottom: 1px solid #888 !important;
      color: black !important;
      padding-left: 0 !important;
   }
   .annotatiesBox { border-color: #888 !important; }
   /* hoofdstukken op nieuwe pagina */
   button[id^="nl.stop.hoofdstuk"]::before { content: ""; page-break-before: always; }
   /* lange polygon-tekst niet over de rand */
   p, dd, .lid, .owregel-attr { word-wrap: break-word; }
}


/* ============================================================

/* ============================================================

/* ============================================================

/* ============================================================

/* ============================================================

/* ============================================================

/* ============================================================
   PAKKET A v7 — kop 4px naar beneden + subtielblauwe tab-balk
   ============================================================ */

.panelTop {
   padding: 7px 16px 4px;        /* +4 padding-top dan v6 */
}

.titelblok {
   display: block;
   min-width: 0;
   flex: 1 1 auto;
}

.titel {
   font-size: 21px;
   line-height: 1.2;
   font-weight: 500;
   /* Expliciete kleur (lichter wit) ipv inherited, want KOOP's stopxml.css heeft
      een ongescopte `h1 { color: #154273 }` regel die anders onze h1.titel raakt. */
   color: rgba(255, 255, 255, 0.92) !important;
   margin: 0;
   padding-bottom: 3px;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
}

.subtitel {
   font-size: 14px;
   line-height: 1.25;
   margin: 0;
   padding-bottom: 2px;
   opacity: 0.85;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
}
.subtitel::before { content: none; }

/* #4+#5: tab-balk subtiel lichtblauw als zachte scheiding tussen header en tekst.
   In light mode = --primary-light (#E8ECF5). In dark mode komt dit automatisch
   uit via de prefers-color-scheme variant van --primary-light (#2A3247). */
.tab {
   background: var(--primary-light);
   border: none;
   box-shadow: none;
}
.tab button {
   color: var(--text-secondary);
   border-bottom: 2px solid transparent;
   background: transparent;
}
.tab button:hover {
   color: var(--text-primary);
   background: rgba(0, 0, 0, 0.04);    /* werkt op zowel licht als donker */
}
.tab button.active {
   color: var(--primary-dark);
   border-bottom-color: var(--primary-dark);
   background: transparent;
}

.panelTop, .tab, .panelRight { margin: 0 !important; }
.panelTop { border-bottom: 0 !important; }

/* Splitter-bg matched aan tab-balk (lichtblauw in light, donkerblauw in dark) */
.splitter { background: var(--primary-light); }
.splitter:hover { background: var(--primary-mid); }

/* ============================================================
   PAKKET C v2 — TOC binnen panelRight, tabs blijven full-width
   ============================================================ */

:root {
   --toc-w: 240px;
   --inner-splitter-w: 6px;
}

/* panelRight wordt nested grid voor TOC + inner-splitter + text-content.
   Tabs blijven op body-row 2 (full width, ongewijzigd). */
.panelRight {
   display: grid;
   grid-template-columns: var(--toc-w) var(--inner-splitter-w) 1fr;
   overflow: hidden;     /* dochters scrollen zelf */
   min-height: 0;
}

/* TOC paneel — links binnen panelRight */
.toc {
   grid-column: 1;
   background: var(--bg-soft);
   overflow-y: auto;
   border-right: 1px solid var(--border);
   padding: 8px 0;
}
.toc-item {
   display: block;
   width: 100%;
   border: none;
   background: transparent;
   text-align: left;
   font: inherit;
   color: var(--text-secondary);
   padding: 4px 12px;
   cursor: pointer;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
}
.toc-item:hover { background: var(--primary-light); color: var(--text-primary); }
.toc-item.active { color: var(--primary-dark); font-weight: 600; }

/* Typografische styling per niveau (geen padding-left hier — die zit op .toc-node
   voor parents en op .toc-item.toc-leaf voor bladknopen). */
.toc-item.level-1 { font-weight: 600; }
.toc-item.level-3 { font-size: 13px; }
.toc-item.level-4 { font-size: 13px; color: var(--text-muted); }
.toc-item.level-5 { font-size: 13px; color: var(--text-muted); }
.toc-item.level-6 { font-size: 13px; color: var(--text-muted); }
.toc-item.level-7 { font-size: 12px; color: var(--text-muted); }
.toc-item.level-8 { font-size: 12px; color: var(--text-muted); }

/* Inklapbare TOC-knoop: caret + label in 1 rij, dan eventueel children. */
.toc-node { display: block; }
.toc-node.level-1 { padding-top: 8px; padding-left: 0; }
.toc-node.level-2 { padding-left: 12px; }
.toc-node.level-3 { padding-left: 24px; }
.toc-node.level-4 { padding-left: 36px; }
.toc-node.level-5 { padding-left: 48px; }
.toc-node.level-6 { padding-left: 60px; }
.toc-node.level-7 { padding-left: 72px; }
.toc-node.level-8 { padding-left: 84px; }

.toc-node-header {
   display: flex;
   align-items: stretch;
   width: 100%;
}
.toc-node-header > .toc-caret {
   flex: 0 0 18px;
   width: 18px;
   height: 22px;
   border: none;
   background-color: transparent;
   background-image: url('img/expanded.png');
   background-repeat: no-repeat;
   background-position: center;
   background-size: 12px 12px;
   cursor: pointer;
   padding: 0;
}
.toc-node-header > .toc-caret:hover { background-color: var(--primary-light); }
.toc-node-header > .toc-item { padding-left: 4px; }
.toc-node.collapsed > .toc-node-header > .toc-caret {
   background-image: url('img/collapsed.png');
}
.toc-node.collapsed > .toc-node-children { display: none; }

/* Bladknopen (geen caret): zelfde linker-positie als parent-labels door 18+4=22 te
   compenseren bovenop de level-padding. */
.toc-item.toc-leaf.level-1 { padding-left: 22px; }
.toc-item.toc-leaf.level-2 { padding-left: 34px; }
.toc-item.toc-leaf.level-3 { padding-left: 46px; }
.toc-item.toc-leaf.level-4 { padding-left: 58px; }
.toc-item.toc-leaf.level-5 { padding-left: 70px; }
.toc-item.toc-leaf.level-6 { padding-left: 82px; }
.toc-item.toc-leaf.level-7 { padding-left: 94px; }
.toc-item.toc-leaf.level-8 { padding-left: 106px; }

/* Inner splitter (tussen TOC en tekst) */
.inner-splitter {
   grid-column: 2;
   background: var(--primary-light);
   cursor: col-resize;
   user-select: none;
   touch-action: none;
   position: relative;
   z-index: 400;
}
.inner-splitter:hover { background: var(--primary-mid); }
.inner-splitter-grip {
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
   width: 3px;
   height: 40px;
   background: var(--primary-mid);
   border-radius: 2px;
   pointer-events: none;
}
.inner-splitter-btn {
   position: absolute;
   left: 50%;
   transform: translateX(-50%);
   top: calc(50% + 28px);
   width: 22px;
   height: 22px;
   border: none;
   background: transparent;
   cursor: pointer;
   font-size: 14px;
   color: var(--primary-mid);
   padding: 0;
}
.inner-splitter-btn:hover { color: var(--primary-dark); }

/* Tekst-content (was direct in panelRight) */
.text-content {
   grid-column: 3;
   overflow-y: auto;
   padding: 0;
   min-height: 0;
}

/* TOC inklappen */
body.toc-collapsed .panelRight {
   grid-template-columns: 0 var(--inner-splitter-w) 1fr;
}
body.toc-collapsed .toc { visibility: hidden; }

/* Mobile: TOC niet zichtbaar, tekst vol breedte */
@media (max-width: 768px) {
   .panelRight {
      grid-template-columns: 1fr;
   }
   .toc, .inner-splitter { display: none; }
   .text-content { grid-column: 1; }
}

/* ============================================================
   Besluit-tab — content komt van KOOP-renvooi-service.
   Server-side gefilterde HTML (zie OdViewerOptiesForm.CleanBesluitHtml)
   wordt aanvullend gestyled met deze regels om consistent te ogen met
   de rest van de viewer.
   ============================================================ */

#Besluit {
   padding: 16px 24px;
   line-height: 1.5;
   color: var(--text-primary);
}
#Besluit h1, #Besluit h2, #Besluit h3, #Besluit h4 {
   color: var(--primary-dark);
   margin: 24px 0 8px;
   line-height: 1.25;
}
#Besluit h1 { font-size: 22px; }
#Besluit h2 { font-size: 18px; }
#Besluit h3 { font-size: 16px; font-weight: 600; }
#Besluit h4 { font-size: 14px; font-weight: 600; }
#Besluit p  { margin: 8px 0; }
/* Niet-list-custom: gewone bullets met indent. Voor .list-custom expres NIET
   ingrijpen — KOOP gebruikt daar een absolute-positioned itemtype-span met
   left:0 + width:3.5em + padding-right:.5em, dus de li krijgt padding-left:3.5em
   en de bullet/letter valt precies in die gereserveerde ruimte. Eigen
   padding-left zou die layout slopen. */
#Besluit ul:not(.list-custom), #Besluit ol:not(.list-custom) { padding-left: 24px; margin: 8px 0; }
#Besluit ul:not(.list-custom) > li, #Besluit ol:not(.list-custom) > li { margin: 4px 0; }
#Besluit a  { color: var(--primary-dark); }
#Besluit a:hover { color: var(--accent); }
#Besluit article, #Besluit section, #Besluit main { margin: 0; padding: 0; }
#Besluit figure { margin: 12px 0; }
#Besluit table { border-collapse: collapse; margin: 12px 0; }
#Besluit th, #Besluit td { border: 1px solid var(--border); padding: 6px 10px; }
#Besluit blockquote {
   border-left: 4px solid var(--primary-light);
   margin: 12px 0;
   padding: 4px 16px;
   color: var(--text-secondary);
}

/* Defensief: verberg eventueel-overgebleven KOOP-chrome dat de regex zou missen. */
#Besluit .skiplinks,
#Besluit .header,
#Besluit .header__start,
#Besluit .header__nav,
#Besluit .footer,
#Besluit nav,
#Besluit .button,
#Besluit .logo,
#Besluit .visually-hidden { display: none !important; }

/* "Direct naar content" anchor-links zijn als losse <a href="#content"> ook nutteloos */
#Besluit a[href="#content"] { display: none; }

/* .list-custom: KOOP regelt dit volledig zelf (stopxml.css):
     .list-custom > li { list-style:none; position:relative; padding-left:3.5em }
     .list-custom__itembullet, .list-custom__itemtype {
        font-weight:700; display:inline-block; position:absolute;
        left:0; width:3.5em; padding-right:.5em
     }
   De itemtype-span met de letterlijke "a.", "b.", "1." valt zo precies in de
   gereserveerde 3.5em links van de li-tekst. NIET overschrijven hier. */


/* RegelingMutatie: de nummering ("A", "B") wordt door KOOP als losse <p>
   voor de beschrijvende zin gerenderd. Toon hem inline met de zin zodat
   het kompact "A. De volgende sectie wordt..." oogt. */
#Besluit div[data-element="RegelingMutatie"] {
   margin: 16px 0 6px 0;
}
#Besluit div[data-element="RegelingMutatie"] > p:first-of-type {
   display: inline-block;
   font-weight: bold;
   color: var(--primary-dark);
   margin: 0 8px 0 0;
   min-width: 20px;
   vertical-align: top;
}
#Besluit div[data-element="RegelingMutatie"] > p:nth-of-type(2) {
   display: inline;
   margin: 0;
}

/* Voetnoten in besluit: KOOP gebruikt <ul class="list-custom footnotes">. Iets kleiner
   font + zachte scheidingslijn voor visueel onderscheid van de hoofdtekst. */
#Besluit ul.footnotes {
   font-size: 12px;
   margin-top: 18px;
   padding-top: 8px;
   border-top: 1px solid var(--border);
}
#Besluit ul.footnotes .list-custom__itembullet {
   font-weight: bold;
   margin-right: 6px;
}

/* KOOP's fix-siebe.css zet text-decoration:underline op alle <ins>, en haalt die
   alleen weg voor <ins.ins--block>/.ins--table (block-level mutaties). Voor inline
   en voetnoten blijft underline staan. Wij hebben al kleur-onderscheid via fix-siebe,
   dus extra underline is overbodig. Maak ins consistent zonder underline. */
#Besluit ins, #Besluit ins * { text-decoration: none; }

/* Kaart-paneel tonen op Regeling- EN Kaarten-tab — Kaarten heeft een lijst met
   knoppen die elk een Leaflet-kaart in #map renderen, dus 0px container =
   onzichtbare kaart. Op Besluit/Motivering/Toelichting kaart verbergen — geen
   kaart-context relevant + meer ruimte voor tekst. Schakeling gebeurt in
   openTab() in odviewer.js. */
body.hide-map {
   grid-template-columns: 1fr var(--splitter-w) 0;
}
body.hide-map .panelLeft,
body.hide-map .splitter { visibility: hidden; }