/*
 * theme.css — moderniseringslaag voor de LeadCRM-interface.
 *
 * Laadt als laatste, na bootstrap.css en branding-<merk>.css, en herdefinieert
 * alleen presentatie: kleur, typografie, ruimte, randen en schaduw. De
 * app-shell (#viewport / #sidebar-left / #content-main) blijft ongemoeid,
 * evenals alle markup en gedrag.
 *
 * Donker staat in :root en geldt zonder attribuut. Licht komt via
 * body[data-theme="light"], en body[data-theme="auto"] volgt de voorkeur van het
 * besturingssysteem; auto is de standaard (header.blade.php, theme.js).
 * Alles hangt aan de tokens hieronder: één waarde aanpassen werkt door in het
 * hele scherm, in beide thema's.
 */

:root {
	/* Merk. Verving #0092d2, #027fb6, #3d94c0 en #5ba5cb, die door elkaar
	   gebruikt werden voor hetzelfde doel. Op donker is het merkblauw
	   opgelicht, anders houdt het te weinig contrast tegen de achtergrond. */
	--brand:            #35b6f0;
	--brand-hover:      #5cc6f6;
	--brand-active:     #7ad2f8;
	--brand-tint:       #16303f;
	--brand-ring:       rgba(53, 182, 240, .34);
	--brand-ink:        #35b6f0;   /* merk als tekstkleur; op donker gelijk aan --brand */
	/* Accent (links, randen, iconen) is licht; gevulde vlakken hebben een
	   dieper blauw nodig, anders wordt witte tekst erop onleesbaar. */
	--brand-solid:        #0b74b8;
	--brand-solid-hover:  #0d84d0;
	--brand-solid-active: #0a5f96;
	--on-brand:         #ffffff;

	/* De kleurbalk bovenaan: het merkblok linksboven en de balk rechts ervan.
	   Een verloop binnen het merkblauw: in het lichte thema vanaf --brand-solid
	   naar iets dieper, op donker een slag dieper dan dat.
	   Het merkblok krijgt alleen de beginkleur, want het is een apart element
	   met een eigen achtergrond en een eigen verloop zou aan de rand van de
	   zijbalk een naad geven: donker eindigen, licht opnieuw beginnen. Met een
	   vlakke beginkleur loopt het door.

	   Wit erop haalt op beide uiteinden ruim 4,5; #0092d2 zelf haalt 3,0 en
	   kan dus niet als ondergrond voor witte tekst. Toegevoegd op 6 september
	   2026, naar het voorbeeld van een admin-template met zo'n balk. */
	--balk:             linear-gradient(100deg, #0a5f8d 0%, #084d76 100%);
	--balk-start:       #0a5f8d;
	--on-balk:          #ffffff;

	/* Het datapalet: vijf kleuren voor grafieken, sparklines, avatars en
	   labels, naast de merkkleur. Los van --ok, --warn en --danger, die alleen
	   een toestand aangeven -- een gekleurd vlak uit dit palet betekent niets
	   anders dan "deze reeks" of "dit bedrijf". Op donker opgelicht, net als het
	   merkblauw hierboven. Toegevoegd op 6 september 2026. */
	--data-1:           #3fb6ee;
	--data-2:           #2ed9b8;
	--data-3:           #9b84f8;
	--data-4:           #ffb84d;
	--data-5:           #ff8098;
	/* Tekst of icoon óp een vlak in een datakleur. Op donker zijn de vijf
	   kleuren hierboven helder, en daar hoort iets donkers op; op licht zijn
	   ze verdiept en haalt wit erop 3,2 of meer -- genoeg voor een icoon.
	   Zie de menutegels (#modulemenu .menu__icoon). */
	--on-data:          #132030;
	/* Het icoon op de tegel van een module: altijd wit, in beide thema's, ook
	   op een lichte modulekleur. Keuze van de gebruiker, 14 oktober 2026. De
	   tegel heeft dan precies de kleur uit module.primarycolor. */
	--on-module:        #ffffff;
	/* Amber als accent. --amber is de leadscorebalk: geen grafiekvlak dat 3,2:1
	   moet halen, dus zonniger dan --data-4; op donker dezelfde kleur. Heette
	   tot 6 september 2026 --leadscore.

	   --amber-pil is het vlak van een filter dat aan staat, met witte tekst
	   (--on-amber). Dat is een keuze van de gebruiker tegen de leesnorm in:
	   wit haalt op dit amber 2,7 waar 4,5 de eis is, en op het lichtere amber
	   van de balk 2,1. Donkere tekst (#132030, 7,7) stond er eerst en vond hij
	   niet mooi; hij koos, na een preview met beide naast elkaar, wit op dit
	   diepere amber. In beide thema's dezelfde kleur: het is een vol vlak, en
	   op donker leest wit erop niet slechter dan op licht. */
	--amber:            #ffb84d;
	--amber-pil:        #d68b0e;
	--on-amber:         #ffffff;

	/* De filterbalk in de inhoud (bedrijven, recordings, shoppingcarts): een
	   donkere band onder de blauwe kleurbalk, in beide thema's dezelfde
	   leisteenkleur -- de keuze van de gebruiker uit zes varianten naast
	   elkaar op 6 september 2026. Op licht is het een tweede donkere band onder
	   de blauwe, op donker ligt hij op een nog donkerder pagina; de
	   amberpillen erop zijn in beide gevallen het felst van alles. */
	--filterbalk:       #1c2b36;

	/* Oppervlakken, van diep naar dichtbij. --ground is de pagina achter de
	   kaarten en staat sinds 6 september 2026 los van --surface-sunken, dat
	   de verzonken vlakken bínnen een kaart is (paneelkoppen, uitgeschakelde
	   velden). Ze waren één token, en daardoor lag een kaart op precies
	   dezelfde tint als de rand van zijn eigen kop. Alle tinten zijn iets
	   blauwer dan ze waren, zodat het donkere thema niet roetig oogt. */
	--ground:           #0d141d;
	--surface:          #131a24;
	/* De rij waar de muis op staat, in elke tabel: een zweem merkblauw op de
	   kaart. Tot 6 september 2026 was dit --surface-hover, met daaroverheen
	   een zwarte waslaag van datatables -- zie bij .table-hover.

	   Staat in elk themablok apart, en dat is geen herhaling: een custom
	   property met var() erin wordt uitgerekend op het element waar hij
	   gedeclareerd staat, niet waar hij gebruikt wordt. Alleen hier, op
	   :root, betekende dat: altijd de donkere tokens, ook in het lichte thema.
	   Gemeten op 6 september 2026: hover in de lichte lijst was
	   color-mix(#35b6f0 6%, #18212d), bijna zwart. */
	--rij-hover:        color-mix(in srgb, var(--brand) 6%, var(--surface-raised));
	--surface-sunken:   #131c26;
	--surface-raised:   #18212d;
	--surface-hover:    #212c3a;
	--line:             #26323f;
	--line-strong:      #3a4959;

	/* Tekst. */
	--ink:              #e7eef5;
	--ink-muted:        #a3b1bf;
	/* --ink-faint is voor versiering en uitgeschakelde dingen, niet voor tekst die
	   iemand moet lezen. Gemeten op 4 september 2026: op wit haalt hij 2,89 en op
	   het donkere vlak 4,06 -- allebei onder de 4,5 die gewone tekst nodig heeft.
	   Dat trof onder meer de alleen-lezen velden op de bedrijfsdetailpagina, waar
	   adres, postcode en plaats in staan, en de lege-staatteksten. Die staan nu op
	   --ink-muted, dat 5,49 licht en 7,83 donker haalt en nog steeds zachter oogt
	   dan --ink. Wat hier wel op mag: versierende iconen, uitgeschakelde items en
	   placeholders.

	   Een icoon dat de énige aanduiding van een knop is telt niet als versiering.
	   De norm daarvoor is 3:1, en --ink-faint haalde op de rijachtergrond 2,66 in
	   het lichte thema (donker 3,39, dus daar wel). Het kruisje bij een ontvanger,
	   de prullenbakken en de sleepgreep staan daarom ook op --ink-muted: 5,05 licht
	   en 6,54 donker. Ze blijven daarmee stiller dan de tekst ernaast, maar zijn
	   wel te zien voordat je eroverheen gaat. */
	--ink-faint:        #6f7d8b;

	/* Semantisch, op donker iets lichter zodat ze leesbaar blijven. */
	--ok:               #46b877;
	--warn:             #e0a34a;
	--danger:           #ef6b6b;
	/* Gedempte vlakken voor statuslabels: gekleurde tekst op een zachte tint
	   leest beter dan witte tekst op een verzadigde kleur. */
	--ok-tint:          #143024;
	--warn-tint:        #33260f;
	--danger-tint:      #351a1c;
	/* Gevulde knoppen en schakelaars hebben een dieper verzadigde kleur nodig
	   dan de accentkleur hierboven, anders wordt witte tekst erop onleesbaar.
	   Deze waarden zijn in beide thema's gelijk: het is altijd wit erop. */
	--ok-solid:         #1f7d46;
	--warn-solid:       #8a5214;
	--danger-solid:     #a33232;

	/* Op 6 september 2026 van 6 en 10 naar 8 en 14: ronder, naar het voorbeeld
	   van de kaarten in het template dat als richting dient. --radius zit op
	   knoppen, velden en chips, --radius-lg op kaarten en tabellen. */
	--radius:           8px;
	--radius-lg:        14px;

	/* De balk boven de inhoud en het merkblok linksboven delen deze maat, zodat
	   hun onderranden op één lijn liggen. Zie .modulemenu__merk. */
	--kopbalk-hoogte:   62px;
	--shadow-sm:        0 1px 2px rgba(0, 0, 0, .34);
	--shadow:           0 2px 10px rgba(0, 0, 0, .40);
	--shadow-lg:        0 12px 32px rgba(0, 0, 0, .52);
	/* Voor kaarten op de pagina: een scherpe rand vlak onder de kaart en een
	   zachte, brede zweem verder weg. Dat is wat een kaart los van de
	   ondergrond zet zonder dat de schaduw zelf opvalt. */
	--shadow-kaart:     0 1px 2px rgba(0, 0, 0, .34), 0 14px 30px -18px rgba(0, 0, 0, .8);

	/* Het doek en de vlekken achter de inlogkaart. Eigen waarden, want geen van
	   de bestaande tokens werkt in beide thema's. Op donker stonden hier
	   --surface-sunken en --brand-tint, en dat gaf 1,344 verschil tussen vlek en
	   doek. Diezelfde twee tokens gaven op licht maar 1,044 -- de vlekken waren
	   daar onzichtbaar, en de witte kaart stond op 1,065 van het doek, dus de
	   pagina had ook geen diepte. Gemeten op 31 augustus 2026.

	   De lichte waarden hieronder halen 1,274 en 1,252 en liggen daarmee dicht
	   bij wat donker al deed. */
	--login-doek:       #10141a;
	--login-vlek:       #16303f;

	/* Bubbels op het bezoekersscherm. De vulling blijft in beide thema's aan de
	   lichte kant, want er staan bedrijfslogo's in en die zijn vaak donker; de
	   bubbel is hun ondergrond. De rand krijgt de paginakleur, zodat elkaar
	   rakende bubbels een uitgesneden indruk geven in plaats van een witte ring. */
	--bubbel-actief:    #8ecbee;
	--bubbel-stil:      #bcc6d0;
	--bubbel-stil-ring: #5c6774;
	--bubbel-gekozen:   #edc389;
	--bubbel-onbekend:  #b2b2c3;
	--bubbel-gesprek:   #90cdab;
	--bubbel-ink:       #16222c;
	--bubbel-puls:      rgba(255, 255, 255, .55);

	/* De families staan hier alleen bij naam; de @font-face-regels zitten in
	   fonts.css, dat alleen de ingelogde header laadt. Op de schermen vóór de
	   inlog vindt de browser ze dus niet en valt hij op de systeemstapel terug,
	   zonder één extra verzoek. Die stapel blijft daarom volledig staan. */
	--font: "Instrument Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
	        "Helvetica Neue", Arial, "Noto Sans", sans-serif,
	        "Apple Color Emoji", "Segoe UI Emoji";
	--font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

	color-scheme: dark;
}

/* Lichte variant. Dezelfde tokens, andere waarden — verder verandert er niets.
   De twee blokken hieronder zijn identiek van inhoud: het eerste voor wie licht
   expliciet kiest, het tweede voor wie de systeemvoorkeur volgt. Pas ze samen aan. */
body[data-theme="light"] {
	--brand:              #0092d2;
	--brand-hover:        #007bb3;
	--brand-active:       #026692;
	--brand-tint:         #e8f5fc;
	--brand-ring:         rgba(0, 146, 210, .32);
	--brand-ink:          #0a6f9e;   /* donkerder merkblauw, leesbaar op --brand-tint */
	--brand-solid:        #0b7cb5;   /* iets donkerder dan #0092d2 zodat witte tekst de AA-norm haalt */
	--brand-solid-hover:  #007bb3;
	--brand-solid-active: #026692;
	--on-brand:           #ffffff;

	--balk:               linear-gradient(100deg, #0b7cb5 0%, #0a6699 100%);
	--balk-start:         #0b7cb5;
	--on-balk:            #ffffff;

	/* Elk van de vijf haalt op wit minstens 3,2:1 -- de eis die grafieken.js
	   aan een gekleurd vlak stelt, en wat een avatar met witte letter erop
	   ook nodig heeft. De maquette had #10bfa4, #f2a018 en #f0637f; die
	   haalden 2,33, 2,14 en 3,09 en zijn op 6 september 2026 in dezelfde
	   tint een slag dieper gezet. Blauw en paars haalden het al. */
	--data-1:             #0d97dd;
	--data-2:             #0da08a;
	--data-3:             #7d63ee;
	--data-4:             #c48213;
	--data-5:             #eb617c;
	--on-data:            #ffffff;
	/* Zonniger dan --data-4, dat voor de grafieken een slag dieper moest:
	   de gebruiker vond #c48213 op de balk somber. Dit is het amber uit de
	   maquette; 2,1:1 op wit, wat voor een balk naast een cijfer volstaat.
	   Tekst erop: --on-amber, zie :root. */
	--amber:              #f2a018;

	/* De ondergrond is koel getint en niet bijna-wit: op #f6f8fa kwam een
	   witte kaart niet los van de pagina. */
	--ground:             #eaf1f7;
	--surface:            #ffffff;
	--surface-sunken:     #f4f8fb;
	--rij-hover:          color-mix(in srgb, var(--brand) 6%, var(--surface-raised));
	--surface-raised:     #ffffff;
	--surface-hover:      #edf3f8;
	--line:               #dde7ef;
	--line-strong:        #c3d2df;

	--ink:                #1c2b36;
	--ink-muted:          #5a6b7b;
	--ink-faint:          #8a9aa8;

	--ok:                 #1f7d46;
	--warn:               #8a5214;
	--danger:             #b83535;
	--ok-tint:            #e6f5ec;
	--warn-tint:          #fdf1e0;
	--danger-tint:        #fbeaea;
	--ok-solid:           #1f7d46;
	--warn-solid:         #8a5214;
	--danger-solid:       #a33232;

	--bubbel-actief:      #a8d8f5;
	--bubbel-stil:        #e9edf1;
	--bubbel-stil-ring:   #77828e;
	--bubbel-gekozen:     #f8dcb0;
	--bubbel-onbekend:    #e0e0ea;
	--bubbel-gesprek:     #bfe7d1;
	--bubbel-ink:         #16222c;
	--bubbel-puls:        rgba(0, 0, 0, .45);

	--shadow-sm:          0 1px 2px rgba(16, 34, 48, .06);
	--shadow:             0 2px 8px rgba(16, 34, 48, .08);
	--shadow-lg:          0 8px 28px rgba(16, 34, 48, .14);
	--shadow-kaart:       0 1px 2px rgba(19, 32, 48, .05), 0 10px 26px -14px rgba(19, 32, 48, .28);

	--login-doek:         #dde7f1;
	--login-vlek:         #a9d2f0;

	color-scheme: light;
}

@media (prefers-color-scheme: light) {
	body[data-theme="auto"] {
		--brand:              #0092d2;
		--brand-hover:        #007bb3;
		--brand-active:       #026692;
		--brand-tint:         #e8f5fc;
		--brand-ring:         rgba(0, 146, 210, .32);
		--brand-ink:          #0a6f9e;   /* donkerder merkblauw, leesbaar op --brand-tint */
		--brand-solid:        #0b7cb5;   /* iets donkerder dan #0092d2 zodat witte tekst de AA-norm haalt */
		--brand-solid-hover:  #007bb3;
		--brand-solid-active: #026692;
		--on-brand:           #ffffff;

		--balk:               linear-gradient(100deg, #0b7cb5 0%, #0a6699 100%);
		--balk-start:         #0b7cb5;
		--on-balk:            #ffffff;

		/* Elk van de vijf haalt op wit minstens 3,2:1 -- de eis die grafieken.js
		   aan een gekleurd vlak stelt, en wat een avatar met witte letter erop
		   ook nodig heeft. De maquette had #10bfa4, #f2a018 en #f0637f; die
		   haalden 2,33, 2,14 en 3,09 en zijn op 6 september 2026 in dezelfde
		   tint een slag dieper gezet. Blauw en paars haalden het al. */
		--data-1:             #0d97dd;
		--data-2:             #0da08a;
		--data-3:             #7d63ee;
		--data-4:             #c48213;
		--data-5:             #eb617c;
		--on-data:            #ffffff;
		/* Zonniger dan --data-4, dat voor de grafieken een slag dieper moest:
		   de gebruiker vond #c48213 op de balk somber. Dit is het amber uit de
		   maquette; 2,1:1 op wit, wat voor een balk naast een cijfer volstaat.
		   Tekst erop: --on-amber, zie :root. */
		--amber:              #f2a018;

		/* De ondergrond is koel getint en niet bijna-wit: op #f6f8fa kwam een
		   witte kaart niet los van de pagina. */
		--ground:             #eaf1f7;
		--surface:            #ffffff;
		--surface-sunken:     #f4f8fb;
		--rij-hover:          color-mix(in srgb, var(--brand) 6%, var(--surface-raised));
		--surface-raised:     #ffffff;
		--surface-hover:      #edf3f8;
		--line:               #dde7ef;
		--line-strong:        #c3d2df;

		--ink:                #1c2b36;
		--ink-muted:          #5a6b7b;
		--ink-faint:          #8a9aa8;

		--ok:                 #1f7d46;
		--warn:               #8a5214;
		--danger:             #b83535;
		--ok-tint:            #e6f5ec;
		--warn-tint:          #fdf1e0;
		--danger-tint:        #fbeaea;
		--ok-solid:           #1f7d46;
		--warn-solid:         #8a5214;
		--danger-solid:       #a33232;

		--bubbel-actief:      #a8d8f5;
		--bubbel-stil:        #e9edf1;
		--bubbel-stil-ring:   #77828e;
		--bubbel-gekozen:     #f8dcb0;
		--bubbel-onbekend:    #e0e0ea;
		--bubbel-gesprek:     #bfe7d1;
		--bubbel-ink:         #16222c;
		--bubbel-puls:        rgba(0, 0, 0, .45);

		--shadow-sm:          0 1px 2px rgba(16, 34, 48, .06);
		--shadow:             0 2px 8px rgba(16, 34, 48, .08);
		--shadow-lg:          0 8px 28px rgba(16, 34, 48, .14);
		--shadow-kaart:       0 1px 2px rgba(19, 32, 48, .05), 0 10px 26px -14px rgba(19, 32, 48, .28);

		--login-doek:         #dde7f1;
		--login-vlek:         #a9d2f0;

		color-scheme: light;
	}
}



/* --- basis ------------------------------------------------------------- */

body {
	font-family: var(--font) !important;
	font-weight: 400;
	font-size: 14px;
	line-height: 1.55;
	color: var(--ink);
	-webkit-font-smoothing: antialiased;
}

#main-body {
	background-color: var(--ground);
	/* In pixels en niet in em: de filterbalk op /bedrijven trekt zich met
	   precies deze maat omhoog om tegen de kleurbalk aan te liggen, en een
	   em daar zou van de eigen letter van de balk afhangen. */
	padding-top: 18px;
	padding-bottom: 2em;
}

h1, h2, h3, h4, .h1, .h2, .h3, .h4 {
	font-weight: 600;
	letter-spacing: -.011em;
	color: var(--ink);
}

/* Links gebruiken --brand-ink en niet --brand. Op donker zijn die gelijk; op
   wit haalt het merkblauw #0092d2 als tekstkleur maar 3,26, en op de
   bedrijfsdetailpagina staan er honderdvijftig van in de tijdlijn. */
a          { color: var(--brand-ink); }
a:hover,
a:focus    { color: var(--brand-hover); }

code, pre, .monospace { font-family: var(--font-mono); }

/* --- cijfers die je met elkaar vergelijkt ------------------------------------
 * IBM Plex Mono voor alles wat een getal is dat naast een ander getal komt te
 * staan: een KvK-nummer, een tijdstip, een duur, een score. Vaste breedtes
 * betekenen dat de cijfers onder elkaar uitlijnen, en de 0 heeft een streep
 * zodat hij niet op een O lijkt -- bij een dossiernummer scheelt dat.
 *
 * Lopende tekst blijft Instrument Sans. Een adres of een bedrijfsnaam met een
 * cijfer erin is geen getal om te vergelijken. De kale klok en de duur per
 * pagina op de bedrijfspagina zijn dat wel; die staan bij de bezoeken zelf
 * (.bezoek__regel time, .bezoek__duur). Om diezelfde reden staat
 * .reeksrij__cijfer er niet bij: dat is "3.367 weergaven", een zin.
 */
.dossierkaart__nummer,
.veld--nummer,
.kerncijfer__getal,
.panel-dashboard.metric dd,
.bezoeker__ip,
.bezoeker__tijd,
.bezoeker__cijfers dd,
[data-veld="kvk"],
.score__cijfer,
td.bezoektijd,
td.cel--tijd {
	font-family: var(--font-mono);
	font-variant-numeric: tabular-nums;
}

.veld--nummer { letter-spacing: .01em; }


/* --- chrome ------------------------------------------------------------ */

header {
	border-bottom: 1px solid var(--line);
	box-shadow: var(--shadow-sm);
	margin-bottom: 0;
}

/* --- de kleurbalk --------------------------------------------------------- *
 * Sinds 6 september 2026 is de balk boven de inhoud blauw met witte tekst,
 * naar het voorbeeld van het admin-template dat als richting dient. Samen met
 * het merkblok linksboven (.modulemenu__merk: dezelfde hoogte, en de
 * beginkleur van hetzelfde verloop) vormt hij één band over de hele breedte.
 *
 * Alleen deze header, via #content-main. De layouts singlevisitor en
 * partydetail hebben een eigen <header> buiten #content-main en blijven zoals
 * ze waren; de kale header-regel hierboven geldt daar nog.
 *
 * De balk stond op de min-height van 50px die bootstrap aan .navbar geeft,
 * plus 7px binnenruimte -- samen 58. Dat is nu --kopbalk-hoogte, gedeeld met
 * het merkblok, zodat de twee niet los van elkaar kunnen verschuiven.
 * branding-salesfeed.css geeft header een padding-top van .5em; die gaat hier
 * weg, de flexrij centreert de inhoud zelf.
 */
#content-main > header {
	display: flex;
	align-items: center;
	min-height: var(--kopbalk-hoogte);
	padding-top: 0;
	background: var(--balk);
	border-bottom: 0;
	box-shadow: none;
	color: var(--on-balk);
}

#content-main > header > .container-fluid { width: 100%; }

/* De knoppen in de balk als pillen: icoon en label naast elkaar, 32 hoog,
   doorschijnend wit -- dezelfde vorm als de accountknop en het zoekveld
   ernaast. Tot 6 september 2026 stond het icoon op 28px boven het label
   (fa-2x, en branding-salesfeed.css zet het icoon op width: 100%) en was elke
   knop 52 hoog; de gebruiker vond dat lomp, in elke module.

   Alleen de knoppen die rechtstreeks in de balk staan -- niet de regels in de
   uitklapmenu's, die op hun eigen vlak staan en hun eigen kleur houden.
   Vandaar de keten met > tot aan de <a>: een regel in een uitklap zit een
   <ul> dieper en valt erbuiten. En niet de accountknop, die heeft zijn eigen
   maat en regels verderop; zonder de :not zou deze selector daar met (1,2,5)
   van winnen. */
#content-main > header nav.navbar-icon:not(.navbar-filter) > ul { gap: 8px; }

/* Sinds 6 september 2026 (later die dag) zijn het geen pillen meer maar
   tegeltjes: het icoon in een vierkant van 28 in een kleur uit het datapalet,
   het label er los naast in wit, en pas bij hover een vlak achter de hele
   knop. De pillen leken te veel op de filterpillen eronder, vond de
   gebruiker; nu is een pil overal een filter en een tegel een actie, en de
   tegels rijmen met die in het zijmenu. De kleur gaat per positie, zoals daar,
   en begint met teal zodat de eerste knop niet in het blauw van de balk
   valt. nth-of-type en niet nth-child: de buttonbar zet <script>-elementen
   tussen de <li>'s. */
#content-main > header nav.navbar-icon:not(.navbar-filter) > ul > li > a:not(.accountknop) {
	--kleur: var(--data-2);
	display: inline-flex;
	align-items: center;
	gap: 9px;
	height: 36px;
	padding: 0 12px 0 4px;
	border: 1px solid transparent;
	border-radius: 10px;
	background: transparent;
	font-size: 12.5px;
	font-weight: 600;
	line-height: 1;
	color: #fff;
	white-space: nowrap;
	transition: background-color .12s ease;
}

#content-main > header nav.navbar-icon:not(.navbar-filter) > ul > li:nth-of-type(2) > a:not(.accountknop) { --kleur: var(--data-3); }
#content-main > header nav.navbar-icon:not(.navbar-filter) > ul > li:nth-of-type(3) > a:not(.accountknop) { --kleur: var(--data-4); }
#content-main > header nav.navbar-icon:not(.navbar-filter) > ul > li:nth-of-type(4) > a:not(.accountknop) { --kleur: var(--data-5); }
#content-main > header nav.navbar-icon:not(.navbar-filter) > ul > li:nth-of-type(5) > a:not(.accountknop) { --kleur: var(--data-1); }

#content-main > header nav.navbar-icon:not(.navbar-filter) > ul > li > a:not(.accountknop):hover,
#content-main > header nav.navbar-icon:not(.navbar-filter) > ul > li > a:not(.accountknop):focus {
	background: rgba(255, 255, 255, .14);
	color: #fff;
	text-decoration: none;
}

/* Het tegeltje. De width: 100% van branding-salesfeed.css en de 2em van fa-2x
   allebei terug; het icoon in --on-data, wit op licht en donker op de heldere
   donker-thema-kleuren, net als in het menu. */
#content-main > header nav.navbar-icon:not(.navbar-filter) > ul > li > a:not(.accountknop) > i.fa {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	border-radius: 8px;
	background: var(--kleur);
	color: var(--on-data);
	font-size: 15px;
	line-height: 1;
	opacity: 1;
	box-shadow: 0 3px 8px -3px rgba(0, 0, 0, .4);
}

/* De hamburger op een telefoon heeft geen label: alleen het tegeltje. De lijst
   eromheen (ul.menuknop) staat er alleen onder 992px, dezelfde grens waarop
   het zijmenu een lade wordt; zie het blok bij #sidebar-left. Tot 8 september
   2026 droeg hij bootstraps hidden visible-xs en verscheen hij pas onder 768,
   terwijl het menu al op 768 weg was. */
#content-main > header nav.navbar-icon > ul.menuknop { display: none; }
#content-main > header nav.navbar-icon > ul > li > a#sidebar-toggle { padding: 0 4px; }

/* De accountknop: wit op de balk, met een doorschijnende rand. De regels
   verderop (nav.navbar-icon a.accountknop) zetten hem op --ink met --line;
   deze staan een id zwaarder. */
#content-main > header nav.navbar-icon a.accountknop {
	border-color: rgba(255, 255, 255, .3);
	color: #fff;
}

#content-main > header nav.navbar-icon a.accountknop:hover,
#content-main > header nav.navbar-icon a.accountknop:focus {
	background: rgba(255, 255, 255, .14);
	border-color: rgba(255, 255, 255, .5);
	color: #fff;
}

/* De initiaal in amber: het ene accent op de balk dat geen actie is. */
#content-main > header .accountknop__initiaal {
	background: var(--amber-pil);
	color: var(--on-amber);
}

#content-main > header .navbar-icon > ul > li > a > i.accountknop__pijl {
	color: rgba(255, 255, 255, .8);
}

/* Het zoekveld in de balk (party/search.blade.php): doorschijnend wit in
   plaats van een wit vak, en rond zoals de accountknop ernaast. bootstrap.css
   zet .searchbox input[type=text] op 29px hoog; 32 lijnt met de accountknop. */
#content-main > header .searchbox .form-control {
	height: 32px;
	background: rgba(255, 255, 255, .16);
	border-color: rgba(255, 255, 255, .28);
	border-radius: 999px;
	color: #fff;
	box-shadow: none;
}

#content-main > header .searchbox .form-control::placeholder {
	color: rgba(255, 255, 255, .75);
}

#content-main > header .searchbox .form-control:focus {
	background: rgba(255, 255, 255, .22);
	border-color: rgba(255, 255, 255, .6);
	box-shadow: none;
}

/* De periodefilter van het dashboard staat ín de balk -- dashboard/filter.blade.php
   zit in de buttonbar -- en draagt .navbar-filter. De chipregels verderop in
   dit bestand (bij "de filterbalk: een getinte band met chips") gelden dus
   ook hier, en die zijn voor een lichte band: een witte chip met gedempte
   tekst. Op de blauwe balk werd dat wit op wit -- gemeten op 6 september
   2026, na de deploy van de chips: tekst rgba(255,255,255,.88) op een chip
   van #fff, "30 dagen" onzichtbaar. Daarvoor stond hij op --ink-muted, grijs
   op blauw; ook mis.

   Hier dus de chip voor op de balk: doorschijnend wit met witte tekst, zoals
   de accountknop ernaast. Een filter dat aan staat wordt steviger wit;
   "toepassen" een volle witte knop met blauwe tekst. Deze selectors wegen met
   de id zwaarder dan de chipregels, ook dan die met a#filter-submit, want
   bij gelijke id's tellen de klassen.

   Op /bedrijven staat dezelfde filterbalk in de inhoud, niet in de balk, en
   valt dus buiten deze regels. */
/* De filterbalk zelf, in de kleurbalk: Bootstrap geeft .navbar een min-height
   van 50 en de <li>'s zweven (branding-salesfeed.css), zodat de <ul> 0 hoog is
   en de pillen bovenin een blok van 50 hangen. Gemeten op 6 september 2026 op
   dashboard, recordings en shoppingcarts: pillen van 30 op top 7, midden 22,
   tegen elkaar aan; de accountknop ernaast op midden 31. Hier dezelfde
   flexrij als de andere knoppen in de balk, met dezelfde 8px ertussen, en de
   pillen op 32 zoals die knoppen (de 30 van de filterbalk in de inhoud weegt
   (0,1,3) en verliest). */
#content-main > header nav.navbar-filter {
	min-height: 0;
	margin: 0;
	padding: 0;
	border: 0;
}

#content-main > header nav.navbar-filter > ul {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}

#content-main > header .navbar-filter > ul > li > a {
	height: 32px;
	color: #fff;
	background: rgba(255, 255, 255, .16);
	border-color: rgba(255, 255, 255, .24);
}

#content-main > header .navbar-filter > ul > li > a:hover,
#content-main > header .navbar-filter > ul > li > a:focus {
	color: #fff;
	background: rgba(255, 255, 255, .24);
	border-color: rgba(255, 255, 255, .45);
}

#content-main > header .navbar-filter > ul > li > a > i.fa {
	opacity: 1;
	color: rgba(255, 255, 255, .85);
}

/* Aan is ook hier amber met donkere tekst, sinds 6 september 2026 -- en nu
   de periodeknop altijd aan staat is dat op het dashboard de vaste stand. */
#content-main > header .navbar-filter > ul > li > a.active {
	background: var(--amber-pil);
	border-color: var(--amber-pil);
	color: var(--on-amber);
}

#content-main > header .navbar-filter > ul > li > a.active > i.fa { color: var(--on-amber); }

#content-main > header .navbar-filter > ul > li > a#filter-submit,
#content-main > header .navbar-filter > ul > li > a#filter-submit:hover,
#content-main > header .navbar-filter > ul > li > a#filter-submit:focus {
	background: #fff;
	border-color: #fff;
	color: var(--brand-solid);
}

#content-main > header .navbar-filter > ul > li > a#filter-submit > i.fa {
	color: var(--brand-solid);
}

#sidebar-left {
	background-color: var(--surface);
	border-right: 1px solid var(--line);
	/* Sinds 6 september 2026 staat in het zijmenu het label naast het icoon in
	   plaats van eronder, en daar is breedte voor nodig: 192 in plaats van de
	   120 uit branding-salesfeed.css. Onder de 992 is de balk een lade over de
	   pagina; zie het blok hieronder. Sinds 14 oktober 2026 200: met de namen
	   uit module.friendlyname kwam "Content Grouping" 3px tekort. */
	width: 200px;
}

/* De sluitknop in de lade; op het bureaublad is er geen lade en dus geen knop. */
.modulemenu__sluit { display: none; }

/* --- het zijmenu onder 992px: een lade over de pagina --------------------- *
 * Tot 8 september 2026 schoof de balk bij max-width 768 met margin-left uit
 * beeld en haalde body.sidebar-show hem terug, waarbij de hele pagina 192px
 * opzij ging. De knop om hem terug te halen droeg bootstraps visible-xs, die
 * pas onder 768 werkt: op precies 768 -- een iPad staand -- was er balk noch
 * knop. Gemeten op 8 september 2026 bij 767, 768 en 769.
 *
 * Nu één grens voor balk en knop, 991 (bootstraps grens tussen sm en md), en
 * de balk ligt als lade óver de pagina met een donker vlak erachter; de
 * inhoud blijft staan. 992 en niet 768 omdat tussen 769 en 991 het vaste
 * menu 192 van 577px innam, te weinig voor de bedrijven- en triggerlijsten.
 * Het openen en sluiten staat in script.js bij #sidebar-toggle.
 *
 * "body #sidebar-left" en niet "#sidebar-left": branding-salesfeed.css zet op
 * zijn eigen grens van 768 nog een margin-left van -120px en een transition
 * op alles, met dezelfde specificiteit; het voorvoegsel wint daarvan. */
@media (max-width: 991px) {
	body #sidebar-left {
		position: fixed;
		top: 0;
		left: 0;
		bottom: 0;
		z-index: 1040;
		width: 280px;
		margin-left: 0;
		overflow-y: auto;
		transform: translateX(-100%);
		transition: transform .22s ease, box-shadow .22s ease;
	}

	body.sidebar-show #sidebar-left {
		transform: none;
		box-shadow: 8px 0 30px rgba(0, 0, 0, .28);
	}

	/* Het donkere vlak: een pseudo-element op body, dus zonder markup. Een
	   klik erop komt bij body aan en sluit de lade (script.js). */
	body::before {
		content: "";
		position: fixed;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		z-index: 1039;
		background: rgba(0, 0, 0, .4);
		opacity: 0;
		visibility: hidden;
		transition: opacity .22s ease, visibility .22s;
	}

	body.sidebar-show::before { opacity: 1; visibility: visible; }

	#content-main > header nav.navbar-icon > ul.menuknop { display: flex; }

	/* De maten van de items en de letters in de lade staan niet hier maar in
	   het blok "telefoon en tablet" onderaan dit bestand: de gewone regels
	   voor #modulemenu en .modulemenu__accountregel staan verderop en wegen even
	   zwaar, en dan wint wat later komt. Gemeten op 8 september 2026: hier
	   gezet bleven ze 13,5, 10 en 9px. */

	.modulemenu__merk { position: relative; padding-right: 64px; }

	.modulemenu__sluit {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		position: absolute;
		top: 50%;
		right: 10px;
		width: 44px;
		height: 44px;
		transform: translateY(-50%);
		border: 0;
		border-radius: 10px;
		background: rgba(255, 255, 255, .14);
		color: var(--on-balk);
		font-size: 18px;
	}
}

@media (prefers-reduced-motion: reduce) {
	body #sidebar-left,
	body::before { transition: none; }
}

#sidebar-left a {
	color: var(--ink-muted);
	border-radius: var(--radius);
	transition: background-color .12s ease, color .12s ease;
}

/* --brand-ink en niet --brand: het merkblauw als tekst op --brand-tint haalt
   3,13:1 in het lichte thema, waar 4,5 de eis is. Die som stond op 31 augustus
   2026 al bij de regel hieronder, maar was daar toegepast op .active -- een
   regel die vandaag niets raakt -- terwijl deze hover wel elke dag te zien is.
   Gemeten op 2 september 2026 was dit het enige tekstelement op het dashboard
   dat onder de eis bleef. Met --brand-ink is het 5,00 op licht en 5,95 op
   donker. */
#sidebar-left a:hover,
#sidebar-left a:focus {
	background-color: var(--brand-tint);
	color: var(--brand-ink);
	text-decoration: none;
}

/* Deze regel raakt vandaag niets: #sidebar-left bevat alleen #modulemenu, en dat
   menu zet nergens .active -- niet in de view en niet vanuit javascript,
   nagelopen op 31 augustus 2026. Hij staat er voor het moment dat dat wel
   gebeurt, en dan hoort hij meteen te kloppen. Voor de kleurkeuze: zie de
   hoverregel hierboven. */
#sidebar-left .active > a,
#sidebar-left a.active {
	background-color: var(--brand-tint);
	color: var(--brand-ink);
	font-weight: 600;
}

/* #content-main deelt de flexrij van #viewport met de zijbalk. Het stond op
   flex: 1 1 auto, en bij basis auto is de basismaat de inhoudsbreedte: kan de
   inhoud niet smaller, dan groeit het vak en wordt de zijbalk platgedrukt.

   Gemeten op 1 september 2026 bij een venster van 375, toen de bovenbalk een
   flexrij werd: #content-main ging naar 392px op positie -17 en de zijbalk
   kromp van 120 naar 103. Met basis 0 neemt het vak gewoon de ruimte die
   overblijft -- 375 op 0 -- en houdt de zijbalk zijn maat. Wat te breed is
   scrolt binnen #main-body, dat daar zijn eigen overflow voor heeft. */
#content-main {
	min-width: 0;
	flex-basis: 0;
}


/* --- de bovenbalk ------------------------------------------------------ *
 * Was een rij zwevende <li>'s verdeeld over twee <ul>'s die allebei 0px hoog
 * waren, want alles erin zweefde. Er was dus geen gedeelde lijn om op uit te
 * lijnen: gemeten op 1 september 2026 lag het midden van de knoppen op 30, dat
 * van het zoekveld op 24 en dat van de accountknop op 21, in een balk van 53
 * hoog. Op 375px viel de accountknop naar een tweede regel en werd de balk
 * 93px hoog voor alleen een avatar.
 *
 * Nu een flexrij met align-items: center, dus een gedeelde middenlijn. De
 * :not(.navbar-filter) is nodig omdat de filterbalk dezelfde klasse draagt en
 * een eigen indeling heeft -- zonder die uitzondering ging die eraan.
 */

nav.navbar-icon:not(.navbar-filter) {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 4px 10px;
}

nav.navbar-icon:not(.navbar-filter) > ul {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 2px;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* De float van branding-salesfeed.css en de pull-right van Bootstrap hoeven
   niet teruggezet: een float op een flexitem wordt genegeerd. */
nav.navbar-icon:not(.navbar-filter) > ul > li {
	display: flex;
	align-items: center;
}

/* De accountknop hoort rechts. Via de <ul> waar hij in zit, want de volgorde
   van de ul's ligt niet vast -- layouts vullen ze zelf aan. */
@supports selector(:has(*)) {
	nav.navbar-icon:not(.navbar-filter) > ul:has(> li.pull-right) { margin-left: auto; }

	/* Hier heeft een order: 1 op de knoppen gestaan, om ze op een telefoon naar
	   de tweede regel te duwen zodat de hamburger en de accountknop samen
	   bovenaan stonden. Dat werkt alleen als de balk daadwerkelijk wikkelt, en
	   dat doet hij pas onder ongeveer 405px: hamburger (28), knoppen (287) en
	   accountknop (40) vragen met de tussenruimte 375, en de balk is de
	   vensterbreedte min 30.

	   Tussen 405 en 767 paste alles dus nog op een regel en zakte er niets --
	   de knoppen schoven alleen achter de accountknop, waardoor de avatar
	   midden in de rij kwam te staan. Gemeten op 1 september 2026 bij 767.

	   "Zet hem opzij, maar alleen als het wikkelt" is in css niet uit te
	   drukken, en een vaste grens hangt aan de breedte van precies deze drie
	   labels. Daarom niet. De balk wikkelt nu gewoon: knoppen op de eerste
	   regel, accountknop op de tweede zodra het niet past. */
}


nav.navbar-icon a {
	color: var(--ink-muted);
	border-radius: var(--radius);
	transition: color .12s ease;
}

nav.navbar-icon a:hover,
nav.navbar-icon a:focus {
	color: var(--brand);
	text-decoration: none;
}


/* --- tabellen ---------------------------------------------------------- */

.table {
	background-color: var(--surface-raised);
	border-radius: var(--radius-lg);
	overflow: hidden;
	box-shadow: var(--shadow-kaart);
	border-collapse: separate;
	border-spacing: 0;
}

.table > thead > tr > th {
	background-color: var(--surface-sunken);
	border-bottom: 1px solid var(--line-strong);
	color: var(--ink-muted);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .04em;
	text-transform: uppercase;
	white-space: nowrap;
	padding: 10px 12px;
	vertical-align: middle;
}

/* Verving de #eee-koppen uit het inline <style>-blok van party/index. */
.table-party th { background-color: var(--surface-sunken); }

.table > tbody > tr > td {
	border-top: 1px solid var(--line);
	padding: 11px 12px;
	vertical-align: middle;
}

/* Strepen en hover. datatables.min.css legt over elke oneven rij een zwarte
   waslaag van 5 % en over elke rij onder de muis een van 7,5 % (een inset
   box-shadow van 9999px op elke cel). Zwart over de lichte kaartkleur wordt
   grijs: gemeten op 6 september 2026 was de hover in de klassieke tabel
   #e8f5fc met daaroverheen rgba(0,0,0,.075), en in de compacte lijst
   #edf3f8 met dezelfde laag -- de gebruiker noemde het viezig en flets.

   De twee waslagen gaan hier uit. Let op de dubbele table.table: zo staat
   de selector in datatables.min.css, (0,4,3). De eerste versie van deze regel
   miste die .table -- een grep op het geminificeerde bestand had het begin
   afgeknipt -- en verloor met (0,3,3) op gewicht, niet op volgorde; gemeten
   op 6 september 2026 stonden beide waslagen er nog. Nu gelijk gewicht, en
   theme.css staat later. De strepen worden een echte kleur, --surface-sunken,
   en de hover een zweem merkblauw. Op de cel en niet op de rij, zodat de
   hover ook wint van de streep op een oneven rij. */
table.table.dataTable.table-hover > tbody > tr:hover > *,
table.table.dataTable.table-striped > tbody > tr:nth-of-type(2n+1) > * { box-shadow: none; }

.table-striped > tbody > tr:nth-of-type(odd) { background-color: transparent; }
.table-striped > tbody > tr:nth-of-type(odd) > td { background-color: var(--surface-sunken); }

.table-hover > tbody > tr:hover > td { background-color: var(--rij-hover); }

.table > tbody > tr:first-child > td { border-top: none; }

.table-responsive { border: none; }

/* Kolomkoppen die sorteerbaar zijn mogen dat laten zien. */
.table > thead > tr > th.sort { cursor: pointer; }
.table > thead > tr > th.sort:hover { color: var(--brand); }


/* --- knoppen ----------------------------------------------------------- */

.btn {
	border-radius: var(--radius);
	font-weight: 500;
	padding: 7px 14px;
	border: 1px solid transparent;
	background-image: none;
	text-shadow: none;
	box-shadow: none;
	transition: background-color .12s ease, border-color .12s ease, color .12s ease;
}

.btn-default {
	background-color: var(--surface);
	border-color: var(--line-strong);
	color: var(--ink);
}
.btn-default:hover,
.btn-default:focus {
	background-color: var(--surface-hover);
	border-color: var(--line-strong);
	color: var(--ink);
}

.btn-primary {
	background-color: var(--brand-solid);
	border-color: var(--brand-solid);
	color: var(--on-brand);
}
.btn-primary:hover,
.btn-primary:focus  { background-color: var(--brand-solid-hover); border-color: var(--brand-solid-hover); color: var(--on-brand); }
.btn-primary:active,
.btn-primary.active { background-color: var(--brand-solid-active); border-color: var(--brand-solid-active); }

.btn-success,
.btn-warning,
.btn-danger,
.btn-info    { color: var(--on-brand); }
.btn-success { background-color: var(--ok-solid);     border-color: var(--ok-solid);     }
.btn-warning { background-color: var(--warn-solid);   border-color: var(--warn-solid);   }
.btn-danger  { background-color: var(--danger-solid); border-color: var(--danger-solid); }
.btn-info    { background-color: var(--brand-solid);  border-color: var(--brand-solid);  }

.btn-success:hover, .btn-success:focus { background-color: var(--ok-solid);     filter: brightness(1.12); color: var(--on-brand); }
.btn-warning:hover, .btn-warning:focus { background-color: var(--warn-solid);   filter: brightness(1.12); color: var(--on-brand); }
.btn-danger:hover,  .btn-danger:focus  { background-color: var(--danger-solid); filter: brightness(1.12); color: var(--on-brand); }
.btn-info:hover,    .btn-info:focus    { background-color: var(--brand-solid);  filter: brightness(1.12); color: var(--on-brand); }

.btn-link { color: var(--brand); }


/* --- formulieren ------------------------------------------------------- */

.form-control {
	height: 36px;
	border-radius: var(--radius);
	border-color: var(--line-strong);
	box-shadow: none;
	color: var(--ink);
	transition: border-color .12s ease, box-shadow .12s ease;
}

.form-control:focus {
	border-color: var(--brand);
	box-shadow: 0 0 0 3px var(--brand-ring);
}

.form-control::placeholder { color: var(--ink-faint); }

label { font-weight: 600; color: var(--ink-muted); }

.input-group-addon {
	background-color: var(--surface-sunken);
	border-color: var(--line-strong);
	border-radius: var(--radius);
	color: var(--ink-muted);
}


/* --- panelen, dropdowns, meldingen ------------------------------------- */

.panel {
	border: 1px solid var(--line);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-kaart);
}

.panel-heading {
	background-color: var(--surface-sunken);
	border-bottom: 1px solid var(--line);
	border-radius: var(--radius-lg) var(--radius-lg) 0 0;
	font-weight: 600;
	color: var(--ink);
}

.panel-default > .panel-heading { color: var(--ink); }

.dropdown-menu {
	border: 1px solid var(--line);
	border-radius: var(--radius);
	box-shadow: var(--shadow-lg);
	padding: 6px;
}

.dropdown-menu > li > a {
	border-radius: 4px;
	padding: 7px 12px;
	color: var(--ink);
}

.dropdown-menu > li > a:hover,
.dropdown-menu > li > a:focus {
	background-color: var(--brand-tint);
	color: var(--brand);
}

.dropdown-menu hr { margin: 6px 0; border-color: var(--line); }

/* De uitklap: een menu met kopjes, rijen met het icoon of logo in een vast
 * tegeltje en een label, en een vaste voet. Gebruikt door het exportmenu op
 * het bedrijvenoverzicht en de bedrijfspagina (party/export, party/export-
 * single) en door element/uitklap.blade.php, dat zo'n menu uit de gegevens
 * van de controller bouwt (Handige links). Tot 8 september 2026 heetten deze
 * klassen exportmenu*; de opmaak is dezelfde.
 * De rijen zijn 36 hoog met het icoon in een vast tegeltje -- de logo's van
 * de interfaces hebben elk een eigen verhouding en bepaalden anders de
 * rijhoogte -- en de lijst scrolt binnen het menu. Gemeten op 6 september
 * 2026 met zeventien interfaces: 340 bij 452 in plaats van 431 bij 800,
 * waarmee het onder het venster uitliep. */
.uitklap {
	min-width: 300px;
	max-width: 340px;
	max-height: min(72vh, 620px);
	overflow-y: auto;
	padding: 8px;
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-kaart);
}

.uitklap__kop {
	padding: 8px 10px 4px;
	font-size: 10.5px;
	font-weight: 600;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--ink-faint);
}

/* Een kopje dat op een rij volgt krijgt een lijn erboven; het eerste niet. */
.uitklap > li:not(.uitklap__kop) + .uitklap__kop {
	margin-top: 6px;
	padding-top: 12px;
	border-top: 1px solid var(--line);
}

/* min-height en niet height: een rij met een tweede regel (uitklap__sub)
   wordt hoger; de rijen van het exportmenu blijven 36. */
.uitklap > li > a {
	display: flex;
	align-items: center;
	gap: 10px;
	min-height: 36px;
	padding: 4px 10px;
	border-radius: 8px;
	font-size: 13px;
	line-height: 1.25;
	color: var(--ink);
}

.uitklap > li > a:hover,
.uitklap > li > a:focus {
	background-color: var(--surface-hover);
	color: var(--ink);
}

.uitklap__icoon {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 26px;
	height: 26px;
	border-radius: 7px;
	overflow: hidden;
	background: var(--surface-sunken);
	color: var(--brand-ink);
	font-size: 13px;
}

.uitklap__icoon img {
	width: 100%;
	height: 100%;
	padding: 3px;
	object-fit: contain;
}

.uitklap__label {
	min-width: 0;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}

/* Een rij met een tweede regel (Handige links: de dienst als label en
   eronder waarmee gezocht wordt) en het teken dat de link naar buiten gaat.
   Sinds 8 september 2026; element/uitklap.blade.php zet deze klassen. */
.uitklap__tekst {
	flex: 1 1 auto;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 1px;
}

.uitklap__tekst > .uitklap__label { font-weight: 600; }

.uitklap__sub {
	font-size: 12px;
	color: var(--ink-muted);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* De keten tot aan de a is nodig: branding-salesfeed.css zet met
   "a > .fa-external-link" (0,1,1) elk buiten-teken groen en 9px, en wint
   anders van de losse klasse (0,1,0). Gemeten op 8 september 2026. */
.uitklap > li > a > .uitklap__uit {
	flex: 0 0 auto;
	margin: 0;
	font-size: 12px;
	color: var(--ink-faint);
}

.uitklap > li > a:hover > .uitklap__uit,
.uitklap > li > a:focus > .uitklap__uit { color: var(--ink-muted); }

/* De voet blijft in beeld terwijl de lijst scrolt. De negatieve onderrand
   trekt hem tot in de padding van het menu, zodat er geen strook van de
   lijst onder de voet door schuift. */
.uitklap__voet {
	position: sticky;
	bottom: -8px;
	margin: 6px 0 -8px;
	padding: 6px 0 8px;
	border-top: 1px solid var(--line);
	background: var(--surface-raised);
}

.uitklap__voet > a { font-weight: 600; color: var(--brand-ink); }
.uitklap__voet .uitklap__icoon { background: var(--brand-tint); }

.label, .badge { font-weight: 600; border-radius: 4px; }
.label-primary, .badge { background-color: var(--brand-solid); color: var(--on-brand); }

.alert {
	border-radius: var(--radius);
	border-width: 1px;
}

.modal-content {
	border: none;
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-lg);
}

.modal-header, .modal-footer { border-color: var(--line); }

/* --- bedrijven indelen ----------------------------------------------------- *
 * De bootbox-dialoog van party/classifier: relatietypen en tags voor een
 * groep gekozen bedrijven. Twee vakken van 300 hoog die op dezelfde lijn
 * beginnen, rijen van 34 die in hun geheel klikken, een zoekveld dat boven
 * in het tagvak blijft staan, en in stap 2 een rij per bedrijf met een dunne
 * voortgangsbalk. De gemengde stand is een streepje (indeterminate, gezet in
 * tristate.js); de halve doorzichtigheid die branding-salesfeed.css daaraan
 * geeft, is hier weer weg.
 */

.indeelmodal .modal-dialog { width: 720px; }

.indeelmodal .modal-header { padding: 18px 24px 14px; }

.indeelmodal .modal-title {
	font-size: 17px;
	font-weight: 600;
	letter-spacing: -.01em;
}

.indeelmodal__sub {
	display: block;
	margin-top: 4px;
	font-size: 12.5px;
	font-weight: 400;
	letter-spacing: 0;
	color: var(--ink-muted);
}

.indeelmodal .modal-body { padding: 18px 24px 16px; }

.indeelmodal__kolommen {
	display: flex;
	gap: 24px;
}

.indeelmodal__kolom {
	flex: 1 1 0;
	min-width: 0;
}

.indeelmodal__kolomkop {
	margin: 0 0 8px;
	font-size: 10.5px;
	font-weight: 600;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--ink-faint);
}

.indeelmodal__vak {
	height: 300px;
	overflow-y: auto;
	padding: 4px;
	border: 1px solid var(--line);
	border-radius: 10px;
	background: var(--surface-raised);
}

/* De tagkiezer vult het vak: geen tweede rand, en de lijst neemt de hoogte
   van het vak. Hier stonden de regels voor tristate.js (.tristate-item__rij en
   het losse zoekveld), tot de tagkiezer die plek innam op 7 september 2026. */
.indeelmodal__vak > form { height: 100%; }
.indeelmodal__vak .tagkiezer { height: 100%; padding: 0; border: 0; border-radius: 0; }
/* min-height: 0, anders weigert de lijst als flexkind kleiner te worden dan
   zijn inhoud en scrolt het hele vak mee, zoekveld en al: gemeten op
   7 september 2026 was de kiezer 1669 hoog in een vak van 300. */
.indeelmodal__vak .tagkiezer__lijst { flex: 1 1 auto; min-height: 0; max-height: none; }

.indeelmodal .modal-footer { padding: 14px 24px; }


/* Het ingeschoven tagformulier is dan het enige zichtbare kind van de flexrij
   en hoort de hele breedte te nemen. */
.indeelmodal__kolommen > .tagvenster__form--ingeschoven { flex: 1 1 100%; }

.indeelmodal .modal-footer .btn {
	height: 36px;
	padding: 0 16px;
	border-radius: 10px;
	font-size: 13px;
	font-weight: 600;
}

/* stap 2: verwerken */
.indeelmodal__verwerkt { margin: 0; }

.indeelmodal__verwerkrij {
	display: flex;
	align-items: center;
	gap: 10px;
	height: 34px;
	padding: 0 8px;
	border-radius: 8px;
	font-size: 13.5px;
}

.indeelmodal__verwerkrij > i.fa {
	width: 22px;
	text-align: center;
	color: var(--data-2);
}

.indeelmodal__verwerkrij > i.fa-refresh { color: var(--ink-faint); }
.indeelmodal__verwerkrij--fout > i.fa  { color: var(--danger); }

.indeelmodal #step-2 .progress {
	height: 8px;
	margin: 14px 0 0;
	border-radius: 999px;
	background: var(--surface-sunken);
	box-shadow: none;
	overflow: hidden;
}

.indeelmodal #step-2 .progress-bar {
	height: 8px;
	border-radius: 999px;
	background: var(--brand-solid);
	box-shadow: none;
}

.indeelmodal__voortgang {
	margin: 8px 0 0;
	font-size: 12.5px;
	color: var(--ink-muted);
}

@media (max-width: 767px) {
	.indeelmodal .modal-dialog { width: auto; }
	.indeelmodal__kolommen { flex-direction: column; }
}

/* Losse afgeronde blokjes met ruimte ertussen, sinds 6 september 2026 -- zo
   stond hij in de maquette die als richting dient. Bootstrap maakt er een
   aaneengesloten strip van: margin-left -1px op elke knop zodat de randen
   over elkaar vallen, en alleen de buitenste twee een hoekstraal aan één
   kant. Beide gaan hier weg; de ruimte tussen de blokjes komt van de gap op
   de <ul> hieronder. inline-flex en niet flex, zodat de lijst op zijn plek in
   de regel blijft staan waar hij nu inline-block is. */
ul.pagination {
	display: inline-flex;
	align-items: center;
	gap: 5px;
}

.pagination > li > a,
.pagination > li > span {
	margin-left: 0;
	border-radius: var(--radius);
	color: var(--brand);
	border-color: var(--line);
}

/* Bootstrap zet op de eerste en laatste knop een halve hoekstraal met
   (0,2,2); deze weegt gelijk en staat later. */
.pagination > li:first-child > a,
.pagination > li:first-child > span,
.pagination > li:last-child > a,
.pagination > li:last-child > span {
	border-radius: var(--radius);
}

.pagination > .active > a,
.pagination > .active > span {
	background-color: var(--brand-solid);
	border-color: var(--brand-solid);
	color: var(--on-brand);
}

.nav-tabs { border-bottom-color: var(--line); }

.nav-tabs > li > a { border-radius: var(--radius) var(--radius) 0 0; color: var(--ink-muted); }

.nav-tabs > li.active > a,
.nav-tabs > li.active > a:hover {
	color: var(--brand);
	border-color: var(--line) var(--line) transparent;
}


/* De gekozen pil in een gestapelde lijst -- de groepenlijst van de contentbuilder
 * en de interfacelijst -- was hardgecodeerd Bootstrap-blauw en volgde het thema
 * dus niet. Vendor-bootstrap zet .nav-pills>li.active>a op background #337ab7 met
 * witte tekst, en branding-salesfeed.css:1142 legt daar color: white !important
 * en een blauwe onderrand overheen.
 *
 * Zelfde opzet als de gekozen regel in #sidebar-left hierboven: een tint van de
 * merkkleur met de merkkleur eroverheen, in plaats van een vol blok.
 *
 * Het !important is hier niet te vermijden: tegen een !important elders helpt
 * geen enkele specificiteit. Bij gelijke specificiteit -- allebei (0,3,1) --
 * wint het laatst geladen bestand, en theme.css staat na de branding. Dat is ook
 * de reden dat dit hier staat en niet in branding-salesfeed.css: de branding is
 * per tenant, en leadsuite en qtagsl hebben hun eigen bestand dat hier niet in
 * de checkout zit. Vanuit theme.css worden ze alle drie bediend.
 *
 * #modulemenu draagt ook nav-pills maar krijgt nooit .active, dus die blijft
 * hier buiten. Nagelopen op 31 augustus 2026: alleen contentbuilder/index en
 * interface/overview zetten die klasse.
 */
.nav-pills > li.active > a,
.nav-pills > li.active > a:hover,
.nav-pills > li.active > a:focus {
	background-color: var(--brand-tint);
	/* --brand-ink en niet --brand: dat laatste is de accentkleur voor randen en
	   iconen en haalt als tekst op --brand-tint maar 3,13:1, gemeten op
	   31 augustus 2026 in het lichte thema. --brand-ink is er juist voor
	   gemaakt en haalt 5,00 op licht en 5,99 op donker. */
	color: var(--brand-ink) !important;
	font-weight: 600;
	border-radius: var(--radius);
	border-bottom: none !important;
}


/* --- toegankelijkheid --------------------------------------------------- */

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
	outline: 2px solid var(--brand);
	outline-offset: 2px;
}


/* --- /bedrijven -------------------------------------------------------- *
 * Overgenomen uit het inline <style>-blok van party/index.blade.php. Dat
 * blok stond ná de <head> en overschreef daardoor deze laag; door het hier
 * onder te brengen is de volgorde weer voorspelbaar.
 */

.mw-30 { min-width: 30em; }

/* Het logovak (.logo, bij de kenmerk-tegel verderop) links van de naam; de
   cel is nog de oude, met een float. */
.table-party .logo { float: left; margin-right: .9em; }


/* --- de klassieke bedrijventabel: cijfers, datum en naam ------------------ *
 * Typografie, sinds 11 september 2026. Er verandert niets aan de kolommen of
 * aan de gegevens.
 */

/* Pageviews, sessies, bezoekers en de totale tijd stonden links met
   proportionele cijfers, dus 1004 kwam niet onder 134 uit. Gemeten op
   11 september 2026 in Instrument Sans op 14px: "1111" is 21,4 breed en "8888"
   33,6, en met tabulaire cijfers allebei 33,6 -- precies even breed als IBM
   Plex Mono, dus dit kost geen ruimte.

   !important moet hier, omdat bootstrap.css .dt-type-numeric op
   `text-align: inherit !important` zet. Die regel staat er met reden:
   DataTables merkt ook de kolom met de selectievakjes en die met de
   relatietypes als numeriek aan, en die horen niet rechts. Vandaar niet die
   regel verruimen maar deze vier kolommen bij name noemen. */
.table-party th.cel--getal,
.table-party td.cel--getal {
	text-align: right !important;
	font-variant-numeric: tabular-nums;
}

/* De datum boven, het tijdstip eronder. Als één regel woog dit negentien
   tekens in mono, zwaarder dan de bedrijfsnaam ernaast, terwijl de datum de
   hoofdzaak is. De seconden blijven staan, op verzoek van de gebruiker. */
.cel--tijd__datum { display: block; }
.cel--tijd__tijd  { display: block; font-size: 12px; color: var(--ink-faint); }

/* De naam is de hoofdzaak van de rij, maar vijftig namen in merkblauw maken er
   een blok kleur van waarin er geen een opvalt. In de tekstkleur leest de kolom
   rustiger, en de merkkleur komt terug bij hover, waar hij zegt dat je erop
   kunt klikken.

   Het vet blijft wat het was en betekent nog steeds hetzelfde: party/index
   zet de klasse strong op een bedrijf dat bezocht is sinds jij er voor het
   laatst keek. Gemeten op 11 september 2026 gold dat voor 48 van de 50 rijen,
   dus het onderscheid zegt in de praktijk weinig -- maar dat is een vraag over
   de regel erachter, niet over de opmaak. */
.table-party tbody a[href^="/bedrijf/"] {
	color: var(--ink);
	font-weight: 500;
}

.table-party tbody a[href^="/bedrijf/"].strong { font-weight: 700; }

.table-party tbody a[href^="/bedrijf/"]:hover,
.table-party tbody a[href^="/bedrijf/"]:focus { color: var(--brand-ink); }

#column-selector { display: none; }

/* De rij boven de tabel: aantal per pagina, de teller, en de paginering.
 *
 * Alle drie kwamen op een eigen hoogte uit -- gemeten op 1 september 2026 was
 * de keuzelijst 30px, de teller 30 en een pagineerknop 34, in een rij van 40.
 * Ze staan nu alle drie op 32, zodat de rij een rij is en geen stapeling van
 * drie losse dingen.
 */
/* De rij mag wikkelen, de paginering nooit. Gemeten op 1 september 2026 in de
   compacte weergave, waar deze rij in een col-md-7 zit: bij een venster van
   1100px is die kolom 533px breed, en daar pasten de keuzelijst (179px), de
   telling (139px) en de paginering (280px) niet naast elkaar. De paginering
   brak toen binnendoor in twee regels. Onder 992px stapelen de kolommen en was
   het vanzelf weer opgelost, dus het ging om een tussenband.

   Nu wikkelt de rij als geheel en gaat de paginering in haar geheel naar de
   volgende regel. margin-left: auto duwt haar rechts, ook als ze alleen op een
   regel staat. Dat vervangt de justify-content: space-between die hier stond;
   een automatische marge slokt de vrije ruimte eerder op, dus die twee zouden
   elkaar in de weg zitten. */
#table-controls,
.table-controls {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 16px;
	min-height: 32px;
}

/* Let op de dubbele opsomming: de compacte weergave krijgt van DataTables een
   div met class="table-controls" en de klassieke een met id="table-controls".
   Wie alleen de klasse noemt, doet de helft. */
#table-controls .dt-length,
#table-controls .dt-info,
#table-controls .dt-paging,
.table-controls .dt-length,
.table-controls .dt-info,
.table-controls .dt-paging {
	display: flex;
	align-items: center;
	margin: 0;
}

/* Het is een regelaarsrij en geen inhoud; die hoort iets kleiner te zijn dan
   de tabel eronder. De keuzelijst stond op 12px en de rest op 14. */
#table-controls,
#table-controls select,
.table-controls,
.table-controls select {
	font-size: 13px;
}

#table-controls .dt-length select,
.table-controls .dt-length select {
	height: 32px;
	margin: 0;
	padding: 0 8px;
	border-radius: var(--radius);
}

/* De paginering krimpt niet mee en breekt niet binnendoor: liever de hele rij
   een regel hoger dan een pagineerbalk die over twee regels valt. margin-left:
   auto duwt haar naar rechts, ook als ze alleen op een regel staat.

   Met div.dt-container ervoor, om dezelfde reden als bij .dt-info hierboven:
   datatables.min.css zet div.dt-container div.dt-paging { margin: 0 } en dat
   weegt (0,2,2). Zonder dat voorvoegsel weegt deze regel (0,2,0) en verliest
   hij, ook al staat theme.css later. Gemeten op 1 september 2026 bleef
   margin-left dan op 0 staan en landde de paginering links op haar regel; de
   flex uit dezelfde regel kwam wel aan, want die zet DataTables niet. */
div.dt-container #table-controls div.dt-paging,
div.dt-container .table-controls div.dt-paging {
	flex: 0 0 auto;
	margin-left: auto;
}

#table-controls .dt-paging .pagination,
.table-controls .dt-paging .pagination {
	flex-wrap: nowrap;
	margin: 0;
}

/* De telling mag wel krimpen; min-width nul, want anders houdt een flexitem
   zijn inhoudsbreedte vast en wikkelt de rij eerder dan nodig. */
#table-controls .dt-info,
.table-controls .dt-info {
	flex: 0 1 auto;
	min-width: 0;
}

/* datatables.min.css zet div.dt-container div.dt-info { padding-top: 8px } om
   de teller op ooghoogte te krijgen. Met align-items: center hierboven doet de
   flexbox dat al, en die padding maakt hem dan juist 8px te laag.
   
   Die regel weegt (0,2,2). Eerst stond hier .table-controls .dt-info op
   (0,2,0), en dat verloor -- ook al staat theme.css later dan datatables.min.
   Gemeten op 1 september 2026 hield de teller zijn 8px en bleef hij 28px hoog
   in een rij van 32. Met div.dt-container erbij is het (0,3,2) en wint het. */
div.dt-container #table-controls div.dt-info,
div.dt-container .table-controls div.dt-info {
	padding: 0;
	color: var(--ink-muted);
	/* De teller verandert bij elke slag: "1 tot 50" wordt "651 tot 673". Met
	   tabelcijfers houdt hij dezelfde breedte per cijfer en danst de rij niet. */
	font-variant-numeric: tabular-nums;
}

/* Hier stond een @media (max-width: 768px) die de rij op flex-direction:
   column zette. Dat maakte alles even breed als de tabel, ook de keuzelijst.
   Met flex-wrap hierboven schuift alleen op wat niet past, en dat gebeurt op
   elke breedte waar het nodig is in plaats van op een vaste grens. */


/* --- kern van Bootstrap en plug-ins ------------------------------------ *
 * bootstrap.min.css, datatables.min.css en de overige plug-ins zijn
 * leverancierscode en blijven ongewijzigd. Ze zetten harde lichte vlakken
 * (#fff, #f5f5f5, #eee) die op een donkere achtergrond onleesbaar zijn;
 * hieronder worden die op tokens gezet zodat beide thema's kloppen.
 */

html, body { background-color: var(--surface-sunken); }

/* formuliervelden */
.form-control,
input[type="text"], input[type="email"], input[type="password"],
input[type="number"], input[type="search"], input[type="date"],
select, textarea {
	background-color: var(--surface-raised);
	border-color: var(--line-strong);
	color: var(--ink);
}

select option { background-color: var(--surface-raised); color: var(--ink); }

.form-control[disabled],
.form-control[readonly],
fieldset[disabled] .form-control {
	background-color: var(--surface-sunken);
	color: var(--ink-muted);
}

.input-group-addon { background-color: var(--surface-sunken); border-color: var(--line-strong); color: var(--ink-muted); }

/* panelen, wells, lijsten */
.panel                        { background-color: var(--surface-raised); }
.panel-heading,
.panel-default > .panel-heading,
.panel-footer                 { background-color: var(--surface-sunken); color: var(--ink); border-color: var(--line); }
.well                         { background-color: var(--surface-sunken); border-color: var(--line); }
.list-group-item              { background-color: var(--surface-raised); border-color: var(--line); color: var(--ink); }
.list-group-item:hover        { background-color: var(--surface-hover); }
.thumbnail                    { background-color: var(--surface-raised); border-color: var(--line); }
.jumbotron                    { background-color: var(--surface-sunken); }
.breadcrumb                   { background-color: var(--surface-sunken); }
.progress                     { background-color: var(--surface-sunken); }

/* overlays */
.modal-content                { background-color: var(--surface-raised); }
.modal-header, .modal-footer  { border-color: var(--line); }
.modal-backdrop               { background-color: #000; }
.popover                      { background-color: var(--surface-raised); border-color: var(--line); color: var(--ink); }
.popover-title                { background-color: var(--surface-sunken); border-color: var(--line); color: var(--ink); }
.tooltip-inner                { background-color: var(--surface-raised); color: var(--ink); border: 1px solid var(--line); }
.dropdown-menu                { background-color: var(--surface-raised); }
.dropdown-menu .divider       { background-color: var(--line); }
.dropdown-header              { color: var(--ink-muted); }


/* --- icoonkiezer (fontawesome-iconpicker) --------------------------------
 *
 * Gemeten op 5 september 2026: in donkere modus kwam dit venster wit uit de
 * plugin. Die zet #f7f7f7 op de popover, #fff op het vlak met de iconen en een
 * randje #ddd om elk icoon, terwijl de iconen zelf `color: inherit` hebben en
 * dus de lichte tekstkleur van de pagina erven. Lichte iconen op wit.
 *
 * De regels hierboven voor .popover en .popover-title verloren het op gewicht:
 * .iconpicker-popover.popover weegt (0,2,0) tegen .popover (0,1,0), en
 * .iconpicker-popover.popover .popover-title (0,3,0) tegen .popover-title
 * (0,1,0). Daarom staan hieronder dezelfde selectors als in
 * fontawesome-iconpicker.min.css; theme.css wordt na de plugin geladen, dus
 * gelijk gewicht is genoeg.
 *
 * Alles op tokens, dus dit geldt in beide thema's en niet alleen in het donker.
 * De punt van de popover blijft ongemoeid: beide schermen gebruiken de
 * dropdown-variant (icp-dd met data-toggle="dropdown") en daar staat de
 * popover inline, met .arrow op display:none.
 *
 * Gebruikt door instellingen -> tags en instellingen -> relatietypen.
 */

.iconpicker-popover.popover,
.iconpicker-popover.popover .popover-title,
.iconpicker-popover .popover-footer {
	background-color: var(--surface-raised);
	border-color: var(--line);
	color: var(--ink);
}

.iconpicker .iconpicker-items {
	background: var(--surface-raised);
}

.iconpicker .iconpicker-item {
	box-shadow: 0 0 0 1px var(--line);
	color: var(--ink);
}

.iconpicker .iconpicker-item:hover:not(.iconpicker-selected) {
	background-color: var(--surface-hover);
}

/* Het gekozen icoon krijgt bg-primary van Bootstrap mee -- een blauw dat los
   staat van de huisstijl. */
.iconpicker .iconpicker-item.iconpicker-selected,
.iconpicker .iconpicker-item.iconpicker-selected.bg-primary {
	background-color: var(--brand-solid);
	color: var(--on-brand);
}

/* tabellen en navigatie */
.table                        { color: var(--ink); }
.table > tbody > tr.active > td,
.table > tbody > tr > td.active { background-color: var(--surface-hover); }
.pagination > li > a,
.pagination > li > span       { background-color: var(--surface-raised); }
.pagination > li > a:hover    { background-color: var(--surface-hover); }
.pagination > .disabled > span { background-color: var(--surface-sunken); color: var(--ink-faint); }
.nav > li > a:hover,
.nav > li > a:focus           { background-color: var(--surface-hover); }
.nav-tabs > li > a:hover      { border-color: var(--line); }
.navbar-default               { background-color: var(--surface); border-color: var(--line); }

/* losse elementen */
hr                            { border-top-color: var(--line); }
.close                        { color: var(--ink); text-shadow: none; opacity: .5; }
.close:hover                  { color: var(--ink); opacity: .9; }
.text-muted                   { color: var(--ink-muted); }
.label-default                { background-color: var(--line-strong); color: var(--ink); }
legend                        { color: var(--ink); border-bottom-color: var(--line); }
code                          { background-color: var(--surface-sunken); color: var(--danger); }
pre                           { background-color: var(--surface-sunken); border-color: var(--line); color: var(--ink); }
kbd                           { background-color: var(--surface-hover); color: var(--ink); box-shadow: none; }

/* meldingen: gedempte tint in plaats van het lichte pastel van Bootstrap 3 */
.alert                        { background-color: var(--surface-raised); color: var(--ink); }
.alert-success                { border-color: var(--ok);     border-left: 3px solid var(--ok);     }
.alert-info                   { border-color: var(--brand);  border-left: 3px solid var(--brand);  }
.alert-warning                { border-color: var(--warn);   border-left: 3px solid var(--warn);   }
.alert-danger                 { border-color: var(--danger); border-left: 3px solid var(--danger); }

/* DataTables -- het hart van /bedrijven.
 *
 * Hier stonden regels op .dataTables_length, .dataTables_info en
 * .dataTables_paginate. Dat zijn de namen van DataTables 1; de app draait op
 * 2.0.0 en die noemt dezelfde onderdelen .dt-length, .dt-info en .dt-paging.
 * Gemeten op 1 september 2026 kwamen de oude namen nul keer voor in de pagina,
 * dus dat hele blok deed niets -- inclusief een reeks !important die daar
 * stond om iets te winnen wat nooit werd aangegrepen.
 */
.dt-container                 { color: var(--ink); }
.dt-search input,
.dt-length select             { background-color: var(--surface-raised); border-color: var(--line-strong); color: var(--ink); }
.dt-info                      { color: var(--ink-muted); }

table.dataTable thead .sorting,
table.dataTable thead .sorting_asc,
table.dataTable thead .sorting_desc { background-color: var(--surface-sunken); }


/* --- statuslabels ------------------------------------------------------- *
 * Bootstrap 3 vult labels met een verzadigde kleur en zet er witte tekst op;
 * dat haalt op donker noch op licht de contrastnorm. Gekleurde tekst op een
 * zachte tint wel, en het oogt rustiger in een tabel vol labels.
 */

.label {
	display: inline-block;
	padding: .3em .65em;
	font-size: 11px;
	letter-spacing: .01em;
	border: 1px solid transparent;
}

.label-success { background-color: var(--ok-tint);     color: var(--ok);     border-color: var(--ok);     }
.label-warning { background-color: var(--warn-tint);   color: var(--warn);   border-color: var(--warn);   }
.label-danger  { background-color: var(--danger-tint); color: var(--danger); border-color: var(--danger); }
.label-info,
.label-primary { background-color: var(--brand-tint);  color: var(--brand-ink);  border-color: var(--brand);  }
.label-default { background-color: var(--surface-hover); color: var(--ink-muted); border-color: var(--line-strong); }


/* --- plug-ins met een eigen lichte huid --------------------------------- *
 * jstree en jquery-steps brengen hun eigen stylesheet mee
 * met vaste lichte vlakken. Die bestanden zijn leverancierscode en blijven
 * ongewijzigd; hieronder worden ze op tokens gezet.
 */

/* jstree — de SBI-boom in het filter van /bedrijven */
.jstree-default .jstree-clicked,
.jstree-default .jstree-wholerow-clicked {
	background: var(--brand-tint);
	color: var(--brand-ink);
	box-shadow: none;
	border-radius: var(--radius);
}

.jstree-default .jstree-hovered,
.jstree-default .jstree-wholerow-hovered {
	background: var(--surface-hover);
	color: var(--ink);
	box-shadow: none;
	border-radius: var(--radius);
}

.jstree-default .jstree-anchor      { color: var(--ink); }
.jstree-default .jstree-disabled    { color: var(--ink-faint); background: transparent; }
.jstree-default .jstree-search      { color: var(--warn); }

/* schakelaar ---------------------------------------------------------------- *
 * Een gewoon selectievakje dat zich als schuifknop tekent: appearance none, de
 * baan op het vakje zelf, de knop als ::after. Kwam op 6 september 2026 in de
 * plaats van bootstrap-switch, dat een greep van 46 bij 26 tekende die in
 * lijstrijen de rij domineerde; deze is 34 bij 20. De aan-stand is teal uit
 * het datapalet, niet --ok: dit is geen statusmelding maar een stand, en
 * dezelfde kleur staat op de actieve tegel in het zijmenu.
 *
 * Het vakje blijft een echt checkbox-element, dus checked, disabled, de
 * aria-label en het change-event werken zoals altijd; alleen het tekenen is
 * anders. Overal waar iets aan of uit gaat: de triggerlijst, de triggerpagina,
 * de actiemodal en de ouderdom in het tagbeheer.
 */

input[type="checkbox"].schakel {
	-webkit-appearance: none;
	appearance: none;
	flex: 0 0 auto;
	position: relative;
	width: 34px;
	height: 20px;
	margin: 0;
	border: 0;
	border-radius: 999px;
	background: var(--line-strong);
	box-shadow: inset 0 1px 2px rgba(0, 0, 0, .12);
	vertical-align: middle;
	cursor: pointer;
	transition: background-color .15s ease;
}

input[type="checkbox"].schakel::after {
	content: '';
	position: absolute;
	top: 2px;
	left: 2px;
	width: 16px;
	height: 16px;
	border-radius: 50%;
	background: #fff;
	box-shadow: 0 1px 3px rgba(0, 0, 0, .35);
	transition: left .15s ease;
}

input[type="checkbox"].schakel:checked        { background: var(--data-2); }
input[type="checkbox"].schakel:checked::after { left: 16px; }

input[type="checkbox"].schakel:disabled { opacity: .5; cursor: not-allowed; }

@media (prefers-reduced-motion: reduce) {
	input[type="checkbox"].schakel,
	input[type="checkbox"].schakel::after { transition: none; }
}

/* jquery-steps — de importwizard */
/* De plug-in geeft het vak 25em (350px). Gemeten op 4 september 2026 vroeg de
   inleiding daar 368px, dus die scrolde, terwijl de dialoog met 544px in een
   venster van 749px ruimte zat overhield. Op 28em (390px) past de inleiding met
   22px over, en groeit de dialoog naar 586px. */
.wizard > .content {
	background: var(--surface-raised);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	min-height: 28em;
}

.wizard > .content > .body,
.wizard > .content > .title { color: var(--ink); }

/* De plug-in haalt de inspringing van elke ul in de wizard weg — zijn eigen
   stapnavigatie is er een — en zet in de stapinhoud alleen het stipje weer aan,
   niet de ruimte ervoor. Gemeten op 4 september 2026 tekende de browser de
   stippen daardoor links buiten het tekstvak, boven op de rand van het
   gekleurde kader. */
.wizard > .content > .body ul {
	padding-left: 18px;
	margin-bottom: 10px;
}

.wizard > .content > .body ul > li { margin-bottom: 3px; }

/* --- de inleiding van de importwizard --------------------------------------
   De stap bestond uit twee gekleurde alert-kaders met opsommingen erin. De
   eisen aan het bestand zijn geen waarschuwing maar een specificatie, dus ze
   staan nu als afvinklijst onder een voorbeeldbestand: dat laat in drie regels
   zien wat vier zinnen beschreven. De vragen ernaast zijn losse regels
   geworden met de Academy als echte link, hetzelfde adres dat de menubalk
   gebruikt.

   De lijsten dragen list-style: none met !important omdat jquery.steps.css elke
   ul in de stapinhoud met !important op disc zet; deze selectors zijn een klasse
   specifieker en winnen daarmee. */

.import-intro__kop {
	margin: 0 0 8px;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .05em;
	text-transform: uppercase;
	color: var(--ink-muted);
}

.import-intro__tekst {
	margin: 0 0 14px;
	font-size: 13px;
	line-height: 1.5;
	color: var(--ink-muted);
}

.import-eisen {
	border: 1px solid var(--line);
	border-radius: var(--radius);
	overflow: hidden;
}

.import-eisen__voorbeeld {
	padding: 10px 12px 12px;
	background: var(--surface-sunken);
	border-bottom: 1px solid var(--line);
}

/* Een bestandsnaam hoort niet naar hoofdletters getrokken te worden zoals de
   kopjes eromheen; dit is een voorbeeld van wat de gebruiker aanlevert. */
.import-eisen__bestandsnaam {
	display: block;
	margin-bottom: 6px;
	font-size: 11px;
	letter-spacing: .02em;
	color: var(--ink-muted);
}

.import-eisen__code {
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	font-family: var(--font-mono);
	font-size: 12px;
	line-height: 1.6;
	color: var(--ink);
}

.wizard > .content > .body .import-eisen__lijst {
	list-style: none !important;
	margin: 0;
	padding: 8px 12px;
}

.wizard > .content > .body .import-eisen__lijst > li {
	display: flex;
	gap: 8px;
	align-items: flex-start;
	margin: 0;
	padding: 3px 0;
	font-size: 13px;
	line-height: 1.4;
}

.import-eisen__lijst i {
	flex: 0 0 auto;
	margin-top: 3px;
	font-size: 11px;
	color: var(--ok);
}

.import-eisen__lijst code {
	padding: 1px 5px;
	background: var(--surface-sunken);
	border: 1px solid var(--line);
	border-radius: 3px;
	font-size: 12px;
	color: var(--ink);
}

.wizard > .content > .body .import-vragen {
	list-style: none !important;
	margin: 0 0 14px;
	padding: 0;
}

.wizard > .content > .body .import-vragen > li {
	display: block;
	position: relative;
	margin: 0;
	padding: 6px 0 6px 16px;
	border-bottom: 1px solid var(--line);
	font-size: 13px;
	line-height: 1.4;
	color: var(--ink-muted);
}

.import-vragen > li:last-child { border-bottom: none; }

.import-vragen > li::before {
	content: "";
	position: absolute;
	left: 2px;
	top: 12px;
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: var(--brand);
}

.import-cta {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px 12px;
	border: 1px solid var(--brand);
	border-radius: var(--radius);
	font-size: 13px;
	font-weight: 600;
	color: var(--brand-ink);
	text-decoration: none;
}

.import-cta:hover,
.import-cta:focus {
	background: var(--brand-tint);
	color: var(--brand-ink);
	text-decoration: none;
}

.import-cta i { flex: 0 0 auto; font-size: 18px; }

.import-cta__sub {
	display: block;
	font-weight: 400;
	color: var(--ink-muted);
}

/* --- stap 4 van de importwizard: het bestand --------------------------------
   Het sleepvak was een gecentreerde zin in een leeg vlak, met als enige opmaak
   een stippelrand van 3px die alleen tijdens het slepen verscheen; die regel
   stond als los <style>-blok in de view en staat nu hier. Het vak toont nu in
   rust al waar je het bestand naartoe sleept.

   Zodra er een bestand gelezen is vervangt de javascript de inhoud van #myfiles
   door de tabel en wisselt daarbij .import-drop voor .import-resultaat, zodat de
   stippelrand niet om het resultaat blijft staan. */

.import-drop {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 100%;
	border: 2px dashed var(--line-strong);
	border-radius: var(--radius);
	background: var(--surface-sunken);
	text-align: center;
	transition: border-color .12s, background-color .12s;
}

/* De tekst vangt anders de dragleave op zodra de muis eroverheen gaat, waardoor
   de markering knippert tijdens het slepen. De knop erin moet wel klikbaar
   blijven; voor die schuift de drop-handler op event.relatedTarget bij. */
.import-drop__vak { padding: 20px; pointer-events: none; }

.import-drop.dragover {
	border-color: var(--brand);
	background: var(--brand-tint);
}

.import-drop__icoon {
	display: block;
	margin-bottom: 12px;
	font-size: 40px;
	line-height: 1;
	color: var(--ink-faint);
}

.import-drop.dragover .import-drop__icoon { color: var(--brand); }

.import-drop__titel {
	margin: 0 0 5px;
	font-size: 15px;
	font-weight: 600;
	color: var(--ink);
}

.import-drop__uitleg {
	margin: 0;
	font-size: 12px;
	color: var(--ink-muted);
}

.import-drop__uitleg code {
	padding: 1px 5px;
	background: var(--surface-raised);
	border: 1px solid var(--line);
	border-radius: 3px;
	font-size: 11px;
	color: var(--ink);
}

/* Niet iedereen sleept. Het invoerveld zelf is weggeschoven maar blijft
   bereikbaar met de toetsenbordfocus; de label ernaast is de zichtbare knop.
   De selectors zijn zo lang omdat jquery.steps.css elk label en elk input in de
   stapinhoud met .wizard > .content > .body naar zich toetrekt. */
.wizard > .content > .body .import-drop__invoer {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	border: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
}

.wizard > .content > .body .import-drop__knop {
	display: inline-block;
	margin: 16px 0 0;
	padding: 7px 14px;
	background: var(--surface-raised);
	border: 1px solid var(--line-strong);
	border-radius: var(--radius);
	font-size: 13px;
	font-weight: 600;
	color: var(--ink);
	cursor: pointer;
	pointer-events: auto;
}

.wizard > .content > .body .import-drop__knop:hover {
	border-color: var(--brand);
	color: var(--brand-ink);
}

.import-drop__invoer:focus ~ .import-drop__knop {
	outline: 2px solid var(--brand);
	outline-offset: 2px;
}

/* Het resultaat: kop, tabel met een eigen scrollgebied, legenda eronder. De
   tabel scrollt zelf zodat kop en legenda blijven staan. */
.import-resultaat {
	display: flex;
	flex-direction: column;
	height: 100%;
}

.import-resultaat.dragover {
	outline: 2px dashed var(--brand);
	outline-offset: 4px;
}

.import-resultaat__kop {
	flex: 0 0 auto;
	display: flex;
	align-items: baseline;
	gap: 8px;
	margin: 0 0 8px;
}

.import-resultaat__kop strong { font-size: 14px; color: var(--ink); }
.import-resultaat__kop span   { font-size: 12px; color: var(--ink-muted); }

/* De verwerking loopt rij voor rij en doet één aanvraag per bedrijf, dus bij een
   vol bestand duurt hij 250 aanvragen lang. Tot 4 september 2026 was het
   draaiende icoontje in de rij het enige teken van leven; deze balk zegt hoe
   ver hij is. Hij verschijnt pas als de verwerking begint. */
.import-voortgang {
	flex: 0 0 auto;
	display: none;
	height: 4px;
	margin: 0 0 8px;
	background: var(--surface-hover);
	border-radius: 2px;
	overflow: hidden;
}

.import-voortgang.is-bezig { display: block; }

.import-voortgang__balk {
	width: 0;
	height: 100%;
	background: var(--brand);
	border-radius: 2px;
	transition: width .2s;
}

.import-voortgang.is-klaar .import-voortgang__balk { background: var(--ok); }

.import-resultaat__scroll {
	flex: 1 1 auto;
	min-height: 0;
	overflow-y: auto;
	border: 1px solid var(--line);
	border-radius: var(--radius);
}

.import-tabel {
	width: 100%;
	margin: 0;
	border-collapse: collapse;
	font-size: 13px;
}

.import-tabel th {
	position: sticky;
	top: 0;
	z-index: 1;
	padding: 6px 10px;
	background: var(--surface-raised);
	border-bottom: 1px solid var(--line);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--ink-muted);
	text-align: left;
}

.import-tabel td {
	padding: 5px 10px;
	border-bottom: 1px solid var(--line);
	color: var(--ink);
}

.import-tabel tbody tr:last-child td { border-bottom: none; }
.import-tabel tbody tr:hover td { background: var(--surface-hover); }

.import-tabel__nr {
	width: 52px;
	text-align: right;
	color: var(--ink-muted);
	font-variant-numeric: tabular-nums;
}

.import-tabel th.import-tabel__nr { text-align: right; }
.import-tabel__status { width: 64px; text-align: center; }
.import-tabel th.import-tabel__status { text-align: center; }

/* Het streepje zegt "nog niet verwerkt" en staat in dezelfde kolom als de plus,
   het vinkje en de driehoek, die alle drie hun eigen kleur hebben. Het is dus
   geen versiering maar een stand, en hoort net als de andere leesbaar te zijn. */
.import-tabel__status .fa-minus { color: var(--ink-muted); }
.import-tabel__bezig      { color: var(--brand); }
.import-tabel__bijgewerkt { color: var(--ink-muted); }
.import-tabel__toegevoegd { color: var(--ok); }
.import-tabel__mislukt    { color: var(--danger); }

.import-resultaat__legenda {
	flex: 0 0 auto;
	display: flex;
	gap: 16px;
	margin: 8px 0 0;
	font-size: 12px;
	color: var(--ink-muted);
}

.import-resultaat__legenda i { margin-right: 5px; }
.import-resultaat__legenda .fa-plus { color: var(--ok); }
.import-resultaat__legenda .fa-check { color: var(--ink-muted); }
.import-resultaat__legenda .fa-exclamation-triangle { color: var(--danger); }

.wizard > .steps a,
.wizard > .steps a:hover,
.wizard > .steps a:active {
	border-radius: var(--radius);
	color: var(--ink-muted);
}

.wizard > .steps .disabled a,
.wizard > .steps .disabled a:hover,
.wizard > .steps .disabled a:active {
	background: var(--surface-sunken);
	color: var(--ink-muted);
}

.wizard > .steps .current a,
.wizard > .steps .current a:hover,
.wizard > .steps .current a:active {
	background: var(--brand-solid);
	color: var(--on-brand);
}

.wizard > .steps .done a,
.wizard > .steps .done a:hover,
.wizard > .steps .done a:active {
	background: var(--surface-hover);
	color: var(--ink);
}

.wizard > .steps .error a,
.wizard > .steps .error a:hover,
.wizard > .steps .error a:active {
	background: var(--danger-tint);
	color: var(--danger);
}

/* Het stapnummer stond als <h3> in de <h3> die de plug-in er zelf omheen zet.
   De parser sluit de buitenste dan meteen, zodat op 4 september 2026 het nummer
   een kop was en de titel ernaast als losse tekst buiten elke kop viel; de
   dialoog telde daardoor acht koppen die nummers en titels los aankondigden.
   Het nummer is nu een <span class="number"> — de vorm die de plug-in zelf ook
   gebruikt — en krijgt hier het uiterlijk dat de kop had. */
.wizard > .steps .number {
	display: block;
	font-size: 24px;
	font-weight: 600;
	line-height: 1.1;
	margin-bottom: 10px;
	color: inherit;
	opacity: 1;
}

/* De koptekst binnen een stap hield --ink en volgde dus niet de kleur van het
   tabblad waar hij in staat. Op de actieve stap gaf dat lichtgrijs op blauw. */
.wizard > .steps a h1,
.wizard > .steps a h2,
.wizard > .steps a h3,
.wizard > .steps a h4 { color: inherit; }

.wizard > .actions a,
.wizard > .actions a:hover,
.wizard > .actions a:active {
	background: var(--brand-solid);
	color: var(--on-brand);
	border-radius: var(--radius);
}

.wizard > .actions .disabled a,
.wizard > .actions .disabled a:hover,
.wizard > .actions .disabled a:active {
	background: var(--surface-sunken);
	color: var(--ink-muted);
}


/* Datumkiezer: de dagen van de aangrenzende maand stonden op een vaste #999.
   Ze horen secundair te ogen, maar ze zijn aanklikbaar — dus leesbaar. */
.datepicker table tr td.old,
.datepicker table tr td.new,
.datepicker table tr td span.old,
.datepicker table tr td span.new,
.datepicker table tr td span.year.old,
.datepicker table tr td span.year.new {
	color: var(--ink-muted);
}

.datepicker table tr td.day:hover,
.datepicker table tr td.focused { background: var(--surface-hover); }

.datepicker table tr td.active,
.datepicker table tr td.active:hover {
	background: var(--brand-solid);
	color: var(--on-brand);
	text-shadow: none;
}

.datepicker table tr td.today,
.datepicker table tr td.today:hover {
	background: var(--warn-tint);
	color: var(--warn);
}


/* Licentiekeuze (auth/selecttoken). Tot 2 oktober 2026 was dit een
   <select size>. Safari op iOS tekent elke select als een knop van één regel
   en negeert size. Een lijst met size kiest vooraf niets, dus die knop was
   leeg. Chrome zette er een lege schuifbalk naast, ook als alles paste. Nu
   hetzelfde keuzevak als in de dialogen, met een rondje per licentie. */

.login-box .licentiekeuze { margin-bottom: 16px; }

/* .login-box label maakt van elk label een kleine, vette veldnaam, met een
   display: block die wint van de flex van .keuzelijst__regel. Deze labels zijn
   rijen, dus dat gaat hier terug. Ze zijn 40 hoog in plaats van de 34 in de
   dialogen, omdat je op de telefoon met een vinger kiest. De letter is die van
   de velden op het inlogscherm. */
.login-box .licentiekeuze .keuzelijst__regel {
	display: flex;
	min-height: 40px;
	margin: 0;
	padding: 8px 10px;
	font-size: 14px;
	font-weight: 400;
	letter-spacing: 0;
	line-height: 1.3;
	color: var(--ink);
}

/* De gekozen rij kleurt zoals .is-gekozen in de dialogen. Waar :has() niet
   werkt, toont het rondje de keuze nog steeds. */
.login-box .licentiekeuze .keuzelijst__regel:has(input:checked) { background: var(--brand-tint); }

.login-box .licentiekeuze .keuzelijst__regel:has(input:focus-visible) {
	outline: 2px solid var(--brand-ring);
	outline-offset: -2px;
}


/* Het logo staat hardgecodeerd in modulemenu.blade.php en in
   layouts/singlevisitor.blade.php, en wijst daar naar de kleurenversie —
   getekend voor een witte achtergrond. Dat klopte zolang de zijbalk wit was;
   op donker viel het woordbeeld weg en bleef alleen het blauwe deel over.

   De configsleutel app.applogo wijst wél naar de witte versie, maar die
   overnemen zou het lichte thema breken: wit logo op een witte zijbalk. De
   wissel hoort dus bij het thema te horen, en niet bij de config. */

img[src*="salesfeed-color"] {
	content: url("/assets/leadcrm/img/salesfeed-white.png");
}

body[data-theme="light"] img[src*="salesfeed-color"] {
	content: normal;
}

/* Stond er eerst niet: bij "auto" met een lichte systeemvoorkeur bleef het
   witte logo staan op een inmiddels witte zijbalk. */
@media (prefers-color-scheme: light) {
	body[data-theme="auto"] img[src*="salesfeed-color"] {
		content: normal;
	}
}

/* In het merkblok van het zijmenu is de zijbalk sinds 6 september 2026 niet
   meer wit maar blauw (zie .modulemenu__merk), in beide thema's -- dus daar
   hoort in beide thema's de witte versie. De twee lichte regels hierboven
   zetten de kleurenversie terug met (0,2,2); deze weegt met de id zwaarder.
   Het logo in layouts/singlevisitor.blade.php staat niet in het merkblok en
   volgt de regels hierboven nog. */
#sidebar-left .modulemenu__merk img[src*="salesfeed-color"] {
	content: url("/assets/leadcrm/img/salesfeed-white.png");
}


/* De paginering gebruikt .page-link, de naamgeving van Bootstrap 4, terwijl
   de app op Bootstrap 3 draait. De genummerde knoppen zitten in
   ul.pagination > li > a en werden al gedekt; de knoppen voor eerste, vorige,
   volgende, laatste en de ellips zijn anders genest en bleven wit. Daarom
   hier op de klasse zelf in plaats van op de structuur. */

.page-link {
	background-color: var(--surface-raised);
	border-color: var(--line);
	color: var(--brand);
}

/* De knoppen groeiden mee met hun eigen tekst: gemeten op 1 september 2026
   waren ze 32px voor "1", 35 voor "3" en 41 voor "14". Bij het doorbladeren
   verschoof daardoor de hele rij onder je muis vandaan. Nu een vaste maat, met
   de tekst gecentreerd, zodat alleen het cijfer verandert en niet de indeling.

   min-width en geen width: bij een tabel met honderden paginas wordt "128"
   breder dan 32px, en dan hoort de knop mee te geven in plaats van af te
   knippen. */
/* De knoppen zaten als inline-block in een ul op display:block, en dan zet de
   regelhoogte er onderruimte onder: gemeten op 1 september 2026 was de rij
   daardoor 37px terwijl elke knop 32 is. Een flexbox haalt die basislijnruimte
   weg. (Tot 6 september 2026 stond hier ook dat de strip aaneengesloten
   bleef door de margin-left van -1px op de links; die is er sindsdien uit,
   de knoppen staan los met een gap -- zie ul.pagination hierboven.)

   De selector is even zwaar als die van datatables.min.css -- allebei (0,3,3) --
   en theme.css laadt later, dus deze wint. Met .table-controls ervoor zou het
   (0,3,1) zijn en verliezen; dat ging bij de teller net mis. */
div.dt-container div.dt-paging ul.pagination {
	display: flex;
	align-items: center;
	gap: 5px;
}

/* 28 in plaats van 32, en het cijfer in mono: het zijn blokjes met een getal
   erin, en in dezelfde letter als de andere getallen in de lijst. */
#table-controls .page-link,
.table-controls .page-link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 28px;
	height: 28px;
	padding: 0 6px;
	font-family: var(--font-mono);
	font-size: 12px;
	font-variant-numeric: tabular-nums;
}

/* De vier pijlknoppen zijn geen cijfers en hoeven niet mee te rekken. */
#table-controls .page-link.first,
#table-controls .page-link.previous,
#table-controls .page-link.next,
#table-controls .page-link.last,
.table-controls .page-link.first,
.table-controls .page-link.previous,
.table-controls .page-link.next,
.table-controls .page-link.last {
	min-width: 28px;
	padding: 0;
}

.page-link:hover,
.page-link:focus { background-color: var(--surface-hover); color: var(--brand-hover); }

.page-item.active .page-link,
.page-link.active {
	background-color: var(--brand-solid);
	border-color: var(--brand-solid);
	color: var(--on-brand);
}

.page-item.disabled .page-link,
.page-link.disabled,
.page-link.ellipsis {
	background-color: var(--surface-sunken);
	border-color: var(--line);
	color: var(--ink-muted);
}


/* --- knoppen met twee klassen ------------------------------------------- *
 * branding-salesfeed.css beschrijft de knoppen als .btn.btn-success en
 * dergelijke — twee klassen, dus specifieker dan de regels hierboven, en
 * daardoor wonnen ze. De vlakken zijn daar geschreven als een verloop van
 * een kleur naar diezelfde kleur, met een base64-SVG als terugval; in de
 * praktijk gewoon een plat vlak, omslachtig genoteerd.
 *
 * Hieronder worden ze op gelijke specificiteit platgeslagen en op tokens
 * gezet. De branding blijft ongewijzigd, zodat alle knopstijl op één plek
 * staat.
 */

.btn.btn-default,
.btn.btn-white,
.btn.btn-primary,
.btn.btn-blue,
.btn.btn-secondary,
.btn.btn-success,
.btn.btn-danger,
.btn.btn-warning,
.btn.btn-info {
	background-image: none;
	box-shadow: none;
	text-shadow: none;
	border-radius: var(--radius);
}

.btn.btn-default,
.btn.btn-white     { background: var(--surface);       border: 1px solid var(--line-strong); color: var(--ink); }
.btn.btn-secondary { background: var(--surface-hover);  border: 1px solid var(--line-strong); color: var(--ink); }
.btn.btn-primary,
.btn.btn-blue,
.btn.btn-info      { background: var(--brand-solid);    border: 1px solid var(--brand-solid);    color: var(--on-brand); }
.btn.btn-success   { background: var(--ok-solid);       border: 1px solid var(--ok-solid);       color: var(--on-brand); }
.btn.btn-danger    { background: var(--danger-solid);   border: 1px solid var(--danger-solid);   color: var(--on-brand); }
.btn.btn-warning   { background: var(--warn-solid);     border: 1px solid var(--warn-solid);     color: var(--on-brand); }

.btn.btn-default:hover,
.btn.btn-white:hover,
.btn.btn-secondary:hover { background: var(--surface-hover); color: var(--ink); }

.btn.btn-primary:hover,
.btn.btn-blue:hover,
.btn.btn-info:hover,
.btn.btn-success:hover,
.btn.btn-danger:hover,
.btn.btn-warning:hover { filter: brightness(1.12); color: var(--on-brand); }

/* De focusring hoort hier en niet bij de basis-.btn hierboven in het bestand.
 *
 * Het blok dat de varianten platslaat zet box-shadow: none op .btn.btn-default en
 * consorten, en dat is met opzet op gelijke specificiteit gedaan om de branding te
 * overrulen -- (0,2,0), net als .btn:focus. Bij gelijke specificiteit wint de
 * laatste, dus de ring die eerder in het bestand stond werd voor elk van die negen
 * varianten weer uitgezet. Samen met de outline: none die er bij hoort betekende
 * dat: geen enkele knop in de applicatie liet zien dat hij focus had.
 *
 * Gemeten op 4 september 2026 met een echte Tab-toets op het triggeroverzicht:
 * een knop die :focus en :focus-visible matchte kreeg outline none en box-shadow
 * none. Dat "met een echte toets" is geen detail -- element.focus() vanuit een
 * script zet wel document.activeElement maar laat :focus niet matchen zolang het
 * venster zelf geen focus heeft, en dan meet je niets.
 *
 * Hij staat nu achter dat blok, zodat hij wint. Zet je hier ooit nog een regel
 * onder die box-shadow aanraakt, dan moet die na deze komen. */
.btn:focus-visible,
.btn:focus {
	outline: none;
	box-shadow: 0 0 0 3px var(--brand-ring);
}


/* <small> in een kopregel krijgt in Bootstrap 3 een vaste #777, gezet via
   h2 small en .h2 small — specifieker dan een kale small-regel. Op de diepste
   achtergrond haalde dat 4,1 en dus net niet de norm. */

small, .small { color: var(--ink-muted); }

h1 small, h2 small, h3 small, h4 small, h5 small, h6 small,
h1 .small, h2 .small, h3 .small, h4 .small, h5 .small, h6 .small,
.h1 small, .h2 small, .h3 small, .h4 small, .h5 small, .h6 small,
.h1 .small, .h2 .small, .h3 .small, .h4 .small, .h5 .small, .h6 .small {
	color: var(--ink-muted);
}

.text-muted, .help-block { color: var(--ink-muted); }


/* --- regelbouwer ---------------------------------------------------------- *
 * querybuilder is de expressiebouwer op triggerdetail en contentgrouping, en
 * brengt zijn eigen lichte huid mee. Het is een meegeleverd bestand en blijft
 * ongewijzigd.
 */

.query-builder .rules-group-container {
	background-color: var(--surface-raised);
	border-color: var(--line);
}

.query-builder .rule-container,
.query-builder .rule-placeholder {
	background: var(--surface);
	border-color: var(--line);
	color: var(--ink);
}

.query-builder .rules-list > *::before,
.query-builder .rules-list > *::after { border-color: var(--line-strong); }

.query-builder .has-error {
	background-color: var(--danger-tint);
	border-color: var(--danger);
}

.query-builder p.filter-description {
	background: var(--brand-tint);
	border-color: var(--brand);
	color: var(--brand-ink);
}

.query-builder .rule-header .btn,
.query-builder .group-actions .btn { border-radius: var(--radius); }



/* --- themakiezer -------------------------------------------------------- *
 * De markup stond al in layouts/full-width.blade.php, uitgecommentarieerd.
 * Basisopmaak komt uit branding-salesfeed.css; hieronder wordt het een
 * segmentkeuze in plaats van drie losse radioknoppen.
 */

#theme-selector {
	margin: 4px 12px 8px;
	padding: 3px;
	gap: 2px;
	border-color: var(--line-strong);
	background: var(--surface-sunken);
	border-radius: 999px;
}

#theme-selector label {
	flex: 1;
	margin: 0;
	padding: 5px 10px;
	border-radius: 999px;
	font-size: 12px;
	font-weight: 500;
	color: var(--ink-muted);
	text-align: center;
	cursor: pointer;
	white-space: nowrap;
	transition: background-color .12s ease, color .12s ease;
}

#theme-selector label:hover { color: var(--ink); }

/* Het segment zelf toont de stand, dus de radioknop mag weg — maar alleen waar
   :has() werkt. Zonder die ondersteuning zou er niets meer te zien zijn welk
   thema actief is, dus daar blijven de knoppen gewoon staan. */
@supports selector(:has(*)) {
	#theme-selector input {
		position: absolute;
		opacity: 0;
		width: 1px;
		height: 1px;
		margin: 0;
	}

	#theme-selector label:has(input:checked) {
		background: var(--brand-solid);
		color: var(--on-brand);
		font-weight: 600;
	}

	#theme-selector label:has(input:focus-visible) {
		box-shadow: 0 0 0 2px var(--brand-ring);
	}
}


/* --- de hero -------------------------------------------------------------- *
 * De uitleg bovenaan een overzicht (element/hero.blade.php), op alle negen
 * overzichten. Hij klapt in tot één regel. Heeft een pagina kerncijfers, dan
 * staan die in de cijferbalk eronder, die niet meeklapt.
 *
 * Uitgeklapt is het een raster van twee kolommen en drie rijen:
 *
 *   kop     | kop
 *   tekst   | stappen
 *   knoppen | stappen
 *
 * De kop draagt rechts de knop Inklappen en is ook de ingeklapte stand:
 * inklappen (hero.js) verbergt de romp met tekst, stappen en knoppen en maakt
 * de kop compacter. De romp doet niet mee in het raster (display: contents),
 * zodat tekst, stappen en knoppen hun plek in het raster van .hero houden.
 * Een verborgen romp heeft daarom een eigen [hidden]-regel, want display:
 * contents wint anders van het attribuut.
 *
 * De stappen strekken zich over de tekst én de knoppen uit, zodat hun
 * onderkant op de onderkant van de knoppen valt; de pijlen tussen de stappen
 * staan in de tussenruimte van 28.
 *
 * Het raster zit op een binnenste .hero en niet op het blok zelf, omdat het
 * blok de container is waar de vouw hieronder op meet: een element kan niet
 * op zijn eigen breedte reageren. Op de bezoekerspagina staat het blok naast
 * een zijpaneel en is het smaller dan elders.
 *
 * Gemeten op 30 september 2026 op /trigger in crm-dev: uitgeklapt 254 hoog
 * op 1329 breed, 405 op 723 en 640 op 330; ingeklapt 62 op elke breedte.
 */

.intro-panel--hero {
	position: relative;
	container-type: inline-size;
	margin-bottom: 18px;
	padding: 26px 30px 28px;
	background: var(--surface-raised);
	border: 1px solid var(--line);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-kaart);
}

.hero {
	display: grid;
	grid-template-columns: minmax(0, 1.3fr) minmax(360px, 1fr);
	grid-template-rows: auto 1fr auto;
	grid-template-areas:
		"kop    kop"
		"tekst  stappen"
		"acties stappen";
	column-gap: 44px;
	row-gap: 22px;
	align-items: start;
}

.hero__romp { display: contents; }
.hero__romp[hidden] { display: none; }

/* De kleur van een stap komt uit het datapalet en wordt in de markup
   gekozen met een tint-klasse; alleen geldig binnen de hero. De tegel van de
   hero zelf heeft sinds 14 oktober 2026 de kleur van de module, als --tint
   in zijn style (element/hero.blade.php); zonder kleur is hij neutraal. */
.intro-panel--hero .tint-1 { --tint: var(--data-1); }
.intro-panel--hero .tint-2 { --tint: var(--data-2); }
.intro-panel--hero .tint-3 { --tint: var(--data-3); }
.intro-panel--hero .tint-4 { --tint: var(--data-4); }
.intro-panel--hero .tint-5 { --tint: var(--data-5); }

.hero__kop {
	grid-area: kop;
	display: flex;
	align-items: center;
	gap: 14px;
	min-width: 0;
}

.hero__tegel {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	border-radius: 13px;
	--tint: var(--ink-faint);
	background: var(--tint);
	color: var(--on-module);
	font-size: 23px;
	box-shadow: 0 6px 14px -6px rgba(0, 0, 0, .45);
}

/* Even hoog als de tegel, met titel en ondertitel erin gecentreerd: 26 plus 2
   plus 20 is 48. */
.hero__kopnaam {
	display: flex;
	flex-direction: column;
	justify-content: center;
	height: 48px;
	min-width: 0;
}

.intro-panel--hero .hero__titel {
	margin: 0;
	font-size: 22px;
	font-weight: 700;
	letter-spacing: -.02em;
	line-height: 26px;
	color: var(--ink);
}

.intro-panel--hero .hero__sub {
	margin: 2px 0 0;
	font-size: 12.5px;
	line-height: 20px;
	color: var(--ink-muted);
}

/* Inklappen staat rechts in de kop en blijft rustig tot je hem aanwijst.
   Tekst en pijltje volgen de stand; hero.js zet alleen is-ingeklapt. */
.hero__vouw {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	height: 32px;
	margin-left: auto;
	padding: 0 12px;
	border: 1px solid transparent;
	border-radius: 9px;
	background: transparent;
	font-size: 12.5px;
	font-weight: 600;
	line-height: 1;
	color: var(--ink-muted);
	cursor: pointer;
}

.hero__vouw .fa { font-size: 15px; }

.hero__vouw:hover,
.hero__vouw:focus { background: var(--surface-sunken); color: var(--ink); }
.hero__vouw:focus-visible { outline: 2px solid var(--brand-ring); outline-offset: 2px; }

.hero__vouwtekst--uit { display: none; }

.intro-panel--hero .hero__tekst {
	grid-area: tekst;
	margin: 0;
	max-width: 58ch;
	font-size: 14.5px;
	line-height: 1.6;
	color: var(--ink-muted);
}

.hero__stappen {
	grid-area: stappen;
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	column-gap: 28px;
	align-self: stretch;
}

.hero__stap {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 8px;
	height: 100%;
	min-width: 0;
	padding: 14px;
	border: 1px solid var(--line);
	border-radius: 12px;
	background: var(--surface-sunken);
}

/* De pijl naar de volgende stap, midden in de tussenruimte van 28. Zijn de
   drie tegels geen volgorde maar drie standen naast elkaar, zoals de statussen
   van een winkelwagen, dan zet --los de pijlen uit. */
.hero__stap:not(:last-child)::after {
	content: "\f178";
	font-family: FontAwesome;
	position: absolute;
	top: 50%;
	right: -28px;
	width: 28px;
	transform: translateY(-50%);
	text-align: center;
	font-size: 14px;
	color: var(--ink-faint);
}

.hero__stappen--los .hero__stap::after { content: none; }

.hero__stap > .fa {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	border-radius: 9px;
	background: var(--tint);
	color: var(--on-data);
	font-size: 15px;
	box-shadow: 0 3px 8px -3px rgba(0, 0, 0, .35);
}

.hero__stap b    { font-size: 12.5px; font-weight: 600; color: var(--ink); }
.hero__stap span { font-size: 11.5px; line-height: 1.4; color: var(--ink-muted); }

.hero__acties {
	grid-area: acties;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	align-self: end;
}

.hero__knop {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	height: 36px;
	padding: 0 16px;
	border-radius: 10px;
	font-size: 13px;
	font-weight: 600;
	text-decoration: none;
}

.hero__knop:hover,
.hero__knop:focus { text-decoration: none; }

.hero__knop--vol {
	background: var(--brand-solid);
	color: var(--on-brand);
	box-shadow: 0 4px 12px -5px rgba(11, 124, 181, .7);
}

.hero__knop--vol:hover,
.hero__knop--vol:focus { background: var(--brand-solid-hover); color: var(--on-brand); }

.hero__knop--stil {
	border: 1px solid var(--line-strong);
	background: transparent;
	color: var(--brand-ink);
}

.hero__knop--stil:hover,
.hero__knop--stil:focus { background: var(--surface-sunken); color: var(--brand-ink); }

/* In de hero staat de tip (element/tip, hieronder) rechts in de knoppenrij;
   hij is even hoog als de knoppen, zodat de rij één onderlijn heeft. */
.hero__acties > .tip { margin-left: auto; }

/* --- de tip (element/tip.blade.php) -------------------------------------- *
 * Eén korte zin in een amber pil met een lampje. Tot 14 oktober 2026 was dit
 * .hero__let, alleen in de hero en met per pagina een ander icoon; nu een eigen
 * element dat overal kan staan. Op één regel even hoog als een knop (36px);
 * een langere tip loopt door op een volgende regel en blijft afgerond. De
 * plek bepaalt de omgeving, zie .hero__acties > .tip. */
.tip {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	max-width: 100%;
	min-height: 36px;
	margin: 0;
	padding: 8px 14px 8px 10px;
	border-radius: 18px;
	background: color-mix(in srgb, var(--amber) 22%, var(--surface-raised));
	font-size: 12.5px;
	line-height: 1.35;
	color: var(--ink);
}

/* Het lampje: wit in een amber rondje, in beide thema's gelijk. Het teken is
   lightbulb-filament uit Phosphor Fill (@phosphor-icons/web 2.1.2, U+E63C);
   de lettertypen laadt phosphor-shim.css (app.iconcss, in de header). Font Awesome 4.7
   heeft geen lampje met gloeidraad, dus geen fa-klasse. Gekozen op
   14 oktober 2026; daarvoor het omlijnde fa-lightbulb-o in amber. */
.tip__lamp {
	flex: none;
	display: inline-grid;
	place-items: center;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background: var(--amber-pil);
	color: #ffffff;
	font: normal 13px/1 "Phosphor Fill";
}

.tip__lamp::before { content: "\e63c"; }

/* Ingeklapt: één regel met een kleinere tegel, titel en ondertitel naast
   elkaar, en de hele regel klikbaar. */
.intro-panel--hero.is-ingeklapt {
	padding: 12px 14px 12px 18px;
	cursor: pointer;
}

.intro-panel--hero.is-ingeklapt:hover { background: color-mix(in srgb, var(--brand) 3%, var(--surface-raised)); }

.is-ingeklapt .hero { row-gap: 0; }

.is-ingeklapt .hero__tegel {
	width: 36px;
	height: 36px;
	border-radius: 10px;
	font-size: 18px;
	box-shadow: 0 4px 10px -5px rgba(0, 0, 0, .45);
}

.is-ingeklapt .hero__kopnaam {
	flex-direction: row;
	align-items: baseline;
	gap: 12px;
	height: auto;
}

.intro-panel--hero.is-ingeklapt .hero__titel { font-size: 17px; line-height: 22px; white-space: nowrap; }

.intro-panel--hero.is-ingeklapt .hero__sub {
	margin: 0;
	min-width: 0;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.is-ingeklapt .hero__vouw { border-color: var(--line-strong); color: var(--brand-ink); }
.is-ingeklapt .hero__vouw .fa { transform: rotate(180deg); }
.is-ingeklapt .hero__vouwtekst--in { display: none; }
.is-ingeklapt .hero__vouwtekst--uit { display: inline; }

/* De vouw, op de breedte van het blok en niet van het venster. Onder de 1020
   gaan tekst, stappen en knoppen elk over de volle breedte; de stappen hoeven
   dan nergens meer mee te rekken. Onder de 640 staat alles onder elkaar,
   valt ingeklapt de ondertitel weg en is Inklappen alleen een pijltje; de
   tekst blijft voor een schermlezer. */
@container (max-width: 1020px) {
	.hero {
		grid-template-columns: minmax(0, 1fr);
		grid-template-rows: auto;
		grid-template-areas: "kop" "tekst" "stappen" "acties";
	}

	.hero__stappen { align-self: start; }
	.intro-panel--hero .hero__tekst { max-width: none; }
}

@container (max-width: 640px) {
	/* De drie stappen onder elkaar, met het icoon links van titel en tekst;
	   de pijlen ertussen vervallen. Gemeten op 8 september 2026: op 375px
	   stonden ze naast elkaar in tegels van zo'n 90px, met elk woord op een
	   eigen regel. Grid en niet flex-direction row, omdat titel en tekst
	   twee losse kinderen zijn die onder elkaar horen, naast het icoon. */
	.hero__stappen { grid-template-columns: minmax(0, 1fr); row-gap: 8px; }

	.hero__stap {
		display: grid;
		grid-template-columns: 30px minmax(0, 1fr);
		grid-template-areas: "icoon titel" "icoon tekst";
		column-gap: 12px;
		row-gap: 2px;
		align-items: center;
		height: auto;
		padding: 12px 14px;
	}

	.hero__stap > .fa { grid-area: icoon; align-self: center; }
	.hero__stap b    { grid-area: titel; }
	.hero__stap span { grid-area: tekst; }
	.hero__stap:not(:last-child)::after { content: none; }

	.intro-panel--hero.is-ingeklapt .hero__sub { display: none; }
	.hero__vouw { width: 32px; padding: 0; justify-content: center; }

	.hero__vouwtekst {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip-path: inset(50%);
		white-space: nowrap;
	}
}

/* --- de cijferbalk -------------------------------------------------------- *
 * element/cijferbalk.blade.php: de kerncijfers van een overzicht in een eigen
 * balk onder de hero, getint uit het datapalet net als de hero. Die balk
 * klapt niet mee in. Hij is zijn eigen container: onder de 480 staan de
 * cijfers in gelijke kolommen, met het label onder het getal.
 */

.cijferbalk {
	container-type: inline-size;
	margin: 0 0 18px;
	padding: 8px;
	background: var(--surface-raised);
	border: 1px solid var(--line);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-sm);
}

/* Twaalf onder de hero in plaats van de achttien van zijn marge. */
.intro-panel--hero + .cijferbalk { margin-top: -6px; }

.cijferbalk .tint-1 { --tint: var(--data-1); }
.cijferbalk .tint-2 { --tint: var(--data-2); }
.cijferbalk .tint-3 { --tint: var(--data-3); }
.cijferbalk .tint-4 { --tint: var(--data-4); }
.cijferbalk .tint-5 { --tint: var(--data-5); }

.cijferbalk__rij {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.cijferbalk__cijfer {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	height: 40px;
	padding: 0 16px;
	border-radius: 10px;
	background: color-mix(in srgb, var(--tint) 13%, var(--surface-raised));
	min-width: 0;
}

.cijferbalk__cijfer b {
	font-family: var(--font-mono);
	font-variant-numeric: tabular-nums;
	font-size: 18px;
	font-weight: 500;
	line-height: 1;
	color: color-mix(in srgb, var(--tint) 55%, var(--ink));
}

.cijferbalk__cijfer span {
	font-size: 12.5px;
	line-height: 1.2;
	color: var(--ink-muted);
	white-space: nowrap;
}

@container (max-width: 480px) {
	.cijferbalk__rij { display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); }

	.cijferbalk__cijfer {
		flex-direction: column;
		align-items: flex-start;
		justify-content: center;
		gap: 4px;
		height: 50px;
		padding: 0 12px;
	}

	.cijferbalk__cijfer span {
		max-width: 100%;
		font-size: 11px;
		overflow: hidden;
		text-overflow: ellipsis;
	}
}

/* --- loginpagina --------------------------------------------------------- *
 * De kop van het loginpaneel stond in branding-salesfeed.css op een blauw
 * verloop met selector .login-box .panel-heading, specificiteit (0,2,0). De
 * regel .panel-default > .panel-heading in deze laag heeft diezelfde
 * specificiteit en laadt later, dus die won — waardoor de kop grijs werd en
 * het witte logo in het lichte thema onzichtbaar was. Hieronder krijgt de
 * login zijn eigen vlak terug, nu plat en op tokens in plaats van een verloop.
 */

/* Er stonden twee schaduwen over elkaar. Naast die op het paneel hieronder zette
   branding-salesfeed.css (regel 752) er een op de wrapper .login-box:

       box-shadow: 0px 0px 28px 6px rgba(50, 50, 50, 0.75);

   Die is hardgecodeerd grijs, staat op driekwart dekking met 6px spread, en de
   wrapper heeft geen border-radius terwijl het paneel erbinnen 10px heeft. Het
   resultaat was een harde donkere rand die bij de ronde hoeken vierkant onder
   het paneel uit stak.

   Hier op none. De branding is per tenant en de bestanden van leadsuite en
   qtagsl zitten niet in deze checkout; theme.css laadt na alle drie, dus vanaf
   hier worden ze alle drie geraakt. Geen !important nodig: de regel in de
   branding heeft er zelf ook geen, en bij gelijke specificiteit (0,1,0) wint het
   laatst geladen bestand. */
/* De themaknop op de loginpagina. z-index 2 omdat de achtergrondvlekken op 0
   staan en de kaart op 1. Zelfde vorm als de actieknoppen elders. */
.themaknop {
	position: fixed;
	top: 16px;
	right: 16px;
	z-index: 2;
	background: var(--surface-raised);
}

/* Centreert zichzelf, ongeacht het breekpunt. 420px is ruim voor twee velden;
   de 565px van de bootstrap-kolom was breder dan het formulier nodig heeft. */
.inlogveld {
	width: 100%;
	max-width: 420px;
	margin: 0 auto;
}

.login-box {
	box-shadow: none;
}

.login-box .panel {
	border: 1px solid var(--line);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-lg);
	overflow: hidden;
}

/* Het logo blijft in een gekleurde balk staan en gaat niet los boven de kaart.
   app.applogo wijst per tenant naar salesfeed-white.png of leadsuite-white.png:
   een wit merk, dat op een lichte achtergrond wegvalt. Alleen salesfeed heeft
   een kleurvariant, dus zonder gekleurd vlak zou het logo bij de andere tenants
   verdwijnen. De balk is wel ruimer geworden en het logo groter. */
.login-box .panel-heading,
.login-box .panel-default > .panel-heading {
	background: var(--brand-solid);
	background-image: none;
	border-bottom: none;
	color: var(--on-brand);
	text-shadow: none;
	padding: 28px 24px;
	text-align: center;
}

.login-box .panel-heading img {
	display: block;
	height: 26px;
	width: auto;
	margin: 0 auto;
}

.login-box .panel-body { margin: 0; padding: 26px 28px 20px; }

/* Hier stonden regels voor .login-box .panel-footer. Die voet is uit de markup
   verdwenen -- de knop staat nu onder de velden -- en niets anders gebruikt
   .login-box, dus ze hadden niets meer om aan te grijpen. */

/* Het oogje staat in het veld en niet ernaast, zodat het wachtwoordveld even
   breed blijft als het e-mailveld erboven. Het veld houdt rechts ruimte vrij. */
.wachtwoordveld { position: relative; }

.wachtwoordveld .form-control { padding-right: 44px; }

.wachtwoordveld__oog {
	position: absolute;
	top: 0;
	right: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	padding: 0;
	border: none;
	background: none;
	/* --ink-muted en niet --ink-faint. Dat laatste is de kleur voor decoratie en
	   haalt op het lichte veld 2,89:1 -- gemeten op 31 augustus 2026 -- terwijl
	   voor een icoon waar je op moet klikken 3:1 geldt. Met --ink-muted wordt
	   het 5,49 op licht en 7,83 op donker. */
	color: var(--ink-muted);
	cursor: pointer;
}

.wachtwoordveld__oog:hover { color: var(--ink); }

.wachtwoordveld__oog:focus-visible {
	outline: 2px solid var(--brand-ring);
	outline-offset: -2px;
	border-radius: var(--radius);
	color: var(--ink);
}

.login-knop {
	display: block;
	width: 100%;
	margin-top: 4px;
}

/* De achtergrond was een vast donkerblauw mozaïek als SVG in de CSS. Dat
   volgde het thema niet: in de lichte stand kreeg je een donker vlak achter
   een witte kaart. Daarna werden het twee zachte verlopen op tokens, en die
   drijven nu heel langzaam.

   De twee vlekken zaten als background-image op #viewport zelf. Ze staan nu in
   een eigen laag, want een achtergrond is alleen te verplaatsen met
   background-position, en dat laat het hele vlak bij elke stap opnieuw tekenen.
   Een transform op een eigen laag gaat langs de compositor.

   position: fixed en niet absolute: een absolute laag die een paar procent
   opzij schuift maakt de pagina breder en zet er een schuifbalk onder. Fixed
   werkt hier omdat geen enkele voorouder een transform, filter of perspective
   heeft -- anders zou de laag zich naar die voorouder richten in plaats van
   naar het venster. */
body.login #viewport {
	/* Deze regel is geen opruiming maar een onderdrukking. branding-salesfeed.css
	   zet op precies deze selector een background met een mozaïek als
	   data-uri-svg erin, en dat vlak is vast donkerblauw -- in het lichte thema
	   een donkere lap achter een witte kaart. Zonder background-image: none komt
	   dat terug, want de vlekken hieronder zijn een aparte laag en vervangen de
	   achtergrond niet. */
	background-image: none;
	background-color: var(--login-doek);
}

body.login #viewport::before,
body.login #viewport::after {
	content: "";
	position: fixed;
	z-index: 0;
	width: 90vmax;
	height: 90vmax;
	border-radius: 50%;
	background: radial-gradient(circle, var(--login-vlek) 0%, transparent 65%);
	pointer-events: none;
}

/* Twee verschillende looptijden, en geen ronde verhouding ertussen, zodat ze
   niet gelijk gaan lopen en er geen zichtbare hartslag ontstaat. Alternate,
   dus ze deinen heen en weer in plaats van terug te springen. */
body.login #viewport::before {
	top: -20vmax;
	left: -12vmax;
	animation: login-vlek-een 44s ease-in-out infinite alternate;
}

body.login #viewport::after {
	right: -18vmax;
	bottom: -22vmax;
	animation: login-vlek-twee 53s ease-in-out infinite alternate;
}

@keyframes login-vlek-een {
	from { transform: translate3d(0, 0, 0);           opacity: .85; }
	to   { transform: translate3d(6vmax, 4vmax, 0);   opacity: 1;   }
}

@keyframes login-vlek-twee {
	from { transform: translate3d(0, 0, 0);           opacity: 1;   }
	to   { transform: translate3d(-5vmax, -6vmax, 0); opacity: .8;  }
}

/* De kaart moet boven de vlekken blijven; zonder dit staat het formulier in
   dezelfde stapel als een laag die er later in de bron bij komt. */
body.login #content-main {
	position: relative;
	z-index: 1;
}

/* Wie beweging heeft uitgezet krijgt hetzelfde beeld, stil. De vlekken blijven
   staan waar ze beginnen, dus het scherm verandert verder niet. */
@media (prefers-reduced-motion: reduce) {
	body.login #viewport::before,
	body.login #viewport::after { animation: none; }
}

/* --- het formulier ------------------------------------------------------- */

.login-titel {
	margin: 0 0 20px;
	font-size: 20px;
	font-weight: 600;
	line-height: 1.25;
	color: var(--ink);
	text-align: left;
}

.login-box label {
	display: block;
	margin-bottom: 6px;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .02em;
	color: var(--ink-muted);
	text-align: left;
}

.login-box .form-group { margin-bottom: 16px; text-align: left; }

/* Stond op .input-group .form-control toen de velden nog in een koker met een
   icoon zaten. Die koker is weg, dus nu op het veld zelf. */
.login-box .form-control {
	height: 42px;
	border-radius: var(--radius);
}

.login-box .panel-body hr {
	margin: 22px 0 16px;
	border-top-color: var(--line);
}

.login-box .login-hulp {
	display: block;
	font-size: 13px;
	color: var(--ink-muted);
	line-height: 1.55;
	/* De rij had text-center; die is weg, dus staat het hier waar het hoort. */
	text-align: center;
}

.login-box .btn-lg { padding: 10px 32px; font-size: 15px; }

/* Alleen voor schermlezers: de pagina had helemaal geen kop. */
.enkel-voorlezen {
	position: absolute;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}


/* --- Emerce 100-badge ---------------------------------------------------- *
 * Het aangeleverde bestand is 1080x1080, maar het merk beslaat alleen
 * x 19-1055 en y 353-734 — een breed liggend logo op een vierkant doek. De
 * lege banden boven en onder worden met een negatieve marge weggenomen; het
 * bestand zelf blijft ongemoeid.
 *
 * Het merk is zwart op transparant en zou op donker wegvallen. Er is daarom
 * een diapositieve variant gemaakt: alleen de inkt is omgekeerd naar wit, het
 * alfakanaal en dus de vorm zijn ongewijzigd. Beide zijn pixelidentiek van
 * omtrek. Donker is de basis van de opmaak, dus de markup draagt de witte
 * variant en de opmaak wisselt naar zwart zodra het lichte thema actief is.
 */

.emerce-badge {
	display: block;
	width: 250px;
	/* Stond boven de invoervelden in het paneel en had daarom marge eronder.
	   Staat nu onder het venster, dus de marge zit erboven. */
	margin: 24px auto 0;
	overflow: hidden;
	line-height: 0;
}

.emerce-badge img {
	display: block;
	width: 100%;
	height: auto;
	margin: -32.7% 0 -31.9%;
}

body[data-theme="light"] .emerce-badge img {
	content: url("/assets/leadcrm/img/emerce-100-2026.webp");
}

@media (prefers-color-scheme: light) {
	body[data-theme="auto"] .emerce-badge img {
		content: url("/assets/leadcrm/img/emerce-100-2026.webp");
	}
}


/* --- bedrijvenoverzicht: tweede weergave --------------------------------- *
 * Een compacte lijst met een detailpaneel ernaast, naast de bestaande tabel.
 * De twee delen geen opmaak: alles hieronder hangt aan .table-compact en
 * .bedrijf-paneel, zodat er niets kan doorlekken naar .table-party.
 */

/* Staat sinds 1 september 2026 in de bedieningsrij zelf, vooraan, voor de
   keuzelijst met het aantal per pagina -- bedrijven-compact.js verplaatst hem
   daarheen. Vandaar geen marge eronder meer. Dezelfde schakelaar staat in het
   paneel naast een opname (#opname-schuif, recording/player): Bedrijf of
   Gebeurtenissen; player.css zet hem daar over de volle breedte. */
#weergave-schuif,
#opname-schuif {
	width: max-content;
	margin: 0;
	padding: 3px;
	gap: 2px;
	border-color: var(--line-strong);
	background: var(--surface-sunken);
	border-radius: 999px;
}

#weergave-schuif label,
#opname-schuif label {
	margin: 0;
	padding: 5px 16px;
	border-radius: 999px;
	font-size: 12px;
	font-weight: 500;
	color: var(--ink-muted);
	cursor: pointer;
	white-space: nowrap;
	transition: background-color .12s ease, color .12s ease;
}

#weergave-schuif label:hover,
#opname-schuif label:hover { color: var(--ink); }

@supports selector(:has(*)) {
	#weergave-schuif input,
	#opname-schuif input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
	#weergave-schuif label:has(input:checked),
	#opname-schuif label:has(input:checked) {
		background: var(--brand-solid);
		color: var(--on-brand);
		font-weight: 600;
	}
}

/* Welke weergave zichtbaar is, gaat via een klasse en niet via een inline
   display: jQuery zet daar 'block' neer, en dat zou de flexregel hieronder
   overschrijven. */
#weergave-compact.is-verborgen,
#weergave-klassiek.is-verborgen,
.zijindeling.is-verborgen { display: none; }

/* Bootstrap 3 zet de kolommen naast elkaar met floats, en een zwevende kolom
   groeit niet mee met de rij: de kolom van het paneel was 710 pixels hoog in
   een rij van 5517. Een sticky element heeft dan geen ruimte om in te blijven
   staan en schuift dus gewoon mee omhoog. Op de breedtes waar lijst en paneel
   naast elkaar staan wordt de rij daarom een flexcontainer, zodat de kolom net
   zo hoog wordt als de lijst ernaast. */
@media (min-width: 992px) {
	#weergave-compact { display: flex; align-items: stretch; }
	#weergave-compact::before,
	#weergave-compact::after { content: none; }
	#weergave-compact > [class*="col-"] { float: none; min-width: 0; }
}

/* --- de compacte lijst: elke rij een kaart -------------------------------- *
 * De rijen stonden als tabelrijen onder elkaar met een lijntje ertussen. Bij
 * rijhoogtes die per rij verschillen -- gemeten op 1 september 2026 van 62 tot
 * 134px, afhankelijk van het aantal labels -- is zo'n lijntje te weinig om te
 * zien waar de ene organisatie ophoudt en de volgende begint. Sindsdien draagt
 * elke rij zijn eigen vlak.
 *
 * Sinds 6 september 2026 is elke rij bovendien een raster van twee regels: het
 * vakje links over beide, daarnaast bedrijf, bezoek en score, en op de tweede
 * regel de labels over de volle breedte, ingesprongen tot onder de naam -- de
 * keuze van de gebruiker na twee previews in de pagina. Tot dan stonden de
 * labels in de bedrijfscel, in een kolom van 288px, en wikkelden ze bij vijf
 * labels naar drie regels; nu passen er vijf op een regel van 544.
 *
 *     [v]  [logo]  Naam                          08:27        ---- 100
 *                  Plaats · SBI
 *                  (relatietype)
 *                  label  label  label  label  label
 *
 * Het blijft een <table> voor DataTables: sorteren, zoeken en bladeren werken
 * op rijen en cellen, niet op hoe ze getekend worden. Wat de tabelindeling
 * deed -- de kolommen over de rijen heen gelijk houden -- doet het raster met
 * een vaste template: 38 voor het vakje, 137 voor het bezoek en 120 voor de
 * score (wat de koppen nodig hebben, gemeten op 6 september 2026), de rest
 * voor het bedrijf. De koprij is hetzelfde raster, zodat de koppen op de
 * kolommen blijven; de vijfde kop, van de labelkolom, staat verborgen.
 *
 * De kaartrand zat per cel, met de ronding op de buitenste twee. Dat kan niet
 * in twee rasterregels -- dan wordt elke cel een eigen vakje -- en dus draagt
 * de rij hem, zoals de gestapelde vorm onderaan al deed. Die gestapelde vorm
 * is nu alleen nog een andere template van hetzelfde raster.
 */

.table-compact,
.table-compact > thead,
.table-compact > tbody {
	display: block;
	width: 100%;
	/* De kaarten dragen hun eigen vlak; de tabel eromheen hoeft er geen meer. */
	background: transparent;
	box-shadow: none;
	/* .table zet overflow: hidden om zijn eigen hoeken af te ronden. Dat zou de
	   bovenste en onderste kaart afknippen. */
	overflow: visible;
}

.table-compact > thead { margin-bottom: 10px; }

.table-compact > thead > tr,
table.table.table-compact > tbody > tr {
	display: grid;
	grid-template-columns: 38px minmax(0, 1fr) 137px 120px;
	align-items: center;
}

.table-compact > thead > tr > th.labels { display: none; }

/* De koprij rekt zijn cellen tot de rijhoogte, zoals een tabelrij dat doet;
   het raster hierboven zet align-items: center, en dan zweeft een lagere cel
   in het midden terwijl een hogere de rij bepaalt. Gemeten op 6 september
   2026: de cel met het vakje was 42,2 hoog, de drie ernaast 36,7 -- het vakje
   krijgt van Bootstrap margin-top: 4px en staat op baseline, en dat maakt
   zijn regel hoger dan een regel tekst. Die marge gaat hier weg en het vakje
   staat in een flexcel in het midden; de cel is dan lager dan de tekst en
   rekt mee. Alle vier 36,7. */
.table-compact > thead > tr { align-items: stretch; }

.table-compact > thead > tr > th.kies {
	display: flex;
	align-items: center;
	justify-content: center;
}

/* DataTables wikkelt de inhoud van elke kop in een span.dt-column-title, en
   dat span is het flexitem -- niet het vakje. Gemeten op 6 september 2026 na
   de eerste versie van deze regels: de cellen waren alle vier even hoog, maar
   het span was 17,2 hoog door de regelhoogte en het vakje stond erin bovenaan,
   10 boven en 15 onder. Met het span zelf op flex en het vakje als blok (geen
   regelhoogte, geen baseline) is het 11,4 boven en 12,4 onder, en de cel
   36,7 zoals de tekstcellen. */
.table-compact > thead > tr > th.kies .dt-column-title {
	display: flex;
	align-items: center;
}

.table-compact > thead > tr > th.kies input { display: block; margin: 0; }

/* Let op de dubbele .table: datatables.min.css zet table.table.dataTable >
   tbody > tr { background-color: transparent } met (0,2,3), en
   .table-compact > tbody > tr weegt (0,1,2) en verliest. Gemeten op
   1 september 2026 kwamen border-color en box-shadow wel aan en de
   achtergrond niet. Met table.table ervoor is het (0,3,3) en wint het. */
table.table.table-compact > tbody > tr {
	grid-template-areas:
		"kies bedrijf bezoektijd score"
		"kies labels  labels labels";
	position: relative;
	margin-bottom: 10px;
	cursor: pointer;
	background: var(--surface-raised);
	border: 1px solid var(--line);
	border-radius: var(--radius-lg);
	transition: border-color .12s ease, background-color .12s ease;
}

table.table.table-compact > tbody > tr:hover {
	background: var(--rij-hover);
	border-color: var(--line-strong);
}

/* De cellen zijn kaal: geen eigen vlak, geen rand. Ook niet bij hover -- de
   regel .table-hover > tbody > tr:hover > td eerder in dit bestand zet daar
   --rij-hover op met (0,2,3); deze weegt (0,3,3). */
table.table.table-compact > tbody > tr > td {
	background: transparent;
	border: 0;
	border-radius: 0;
	box-shadow: none;
}

.table-compact td.kies    { grid-area: kies; }
.table-compact td.bedrijf { grid-area: bedrijf; min-width: 0; }
.table-compact td.bezoektijd { grid-area: bezoektijd; white-space: nowrap; color: var(--ink-muted); font-size: 13px; }
.table-compact td.score   { grid-area: score; white-space: nowrap; }

/* De labelregel: ingesprongen tot onder de naam -- de celrand van 12, het
   logo van 72 en de 12 ertussen (zie het logovak in td.bedrijf hieronder)
   -- en zonder bovenruimte, want de regel erboven heeft zijn onderruimte al.
   Een bedrijf zonder labels heeft een lege cel, en die neemt geen ruimte in. */
.table-compact td.labels {
	grid-area: labels;
	padding: 0 12px 11px calc(12px + 72px + 12px);
}

.table-compact td.labels:empty { padding: 0; }
.table-compact td.labels .bedrijf__chips { margin-top: 0; }

/* De gekozen rij: het vlak licht getint en een streepje links, verder niets.
   Tot 6 september 2026 kreeg de rij ook een rand rondom in de merkkleur en
   een binnenstreep van 3px (inset box-shadow) die de ronding van de hoek
   volgde en daardoor als een dikkere rand links las. De gebruiker wilde geen
   rand, "gewoon een streepje links". Vandaar een los element: 3px breed,
   afgerond, 5px binnen de rand en 12px vrij van boven en onder, zodat het
   langs de ronding van de kaart valt in plaats van erin. Op de rij, die als
   raster een anker is; als tabelrij was hij dat niet, en stond het streepje
   op de eerste cel. Na de hoverregel, zodat de tint blijft als de muis erop
   staat. */
table.table.table-compact > tbody > tr.is-gekozen { background: var(--brand-tint); }

table.table.table-compact > tbody > tr.is-gekozen::before {
	content: "";
	position: absolute;
	left: 5px;
	top: 12px;
	bottom: 12px;
	width: 3px;
	border-radius: 999px;
	background: var(--brand);
}

/* De wrapper is de container waar de regels hieronder tegen meten. Niet het
   venster, want het knelpunt is de kolom en niet het scherm: in de compacte
   weergave zit de lijst boven 992px in een col-md-7, en die is bij een venster
   van 1100px maar 533px breed. Gemeten op 1 september 2026 liep de tabel daar
   net zo hard over als op een telefoon. */
#weergave-compact .table-responsive { container-type: inline-size; }

/* De kopcellen: "laatste bezoek" staat op nowrap en krijgt van
   datatables.min.css 30px rechts voor het sorteerpijltje (12px breed, op 12px
   van de rand). Gemeten op 6 september 2026, met de zijbalk op 192 en een
   venster van 1400: de container was 666 en de tabel kwam op 672 -- zes pixels
   overloop, net genoeg voor een horizontale schuifbalk die je alleen per
   ongeluk vindt. Met 24px en het pijltje op 8 van de rand paste het, met 4px
   tussen de tekst en het pijltje. Sinds het raster bepalen de koppen de
   kolombreedte niet meer -- die staat in de template -- maar de 137 daar is
   precies deze kop met deze padding. De selectors wegen gelijk aan die van
   datatables.min.css en staan later. */
table.table-compact > thead > tr > th.dt-orderable-asc,
table.table-compact > thead > tr > th.dt-orderable-desc,
table.table-compact > thead > tr > th.dt-ordering-asc,
table.table-compact > thead > tr > th.dt-ordering-desc { padding-right: 24px; }

table.table-compact > thead > tr > th[class*="dt-order"] span.dt-column-order { right: 8px; }

/* Onder de 600px past de brede vorm niet meer: de vier kolommen hebben samen
   minstens 539px nodig -- 34 voor het vakje, 279 voor de bedrijfscel, 110 voor
   het bezoek en 116 voor de score, gemeten op 1 september 2026.

   De grens stond op 700. Toen de zijbalk op 6 september 2026 van 120 naar 192
   ging, kromp deze container bij een venster van 1400 van ongeveer 738 naar
   666 -- onder die grens, en de lijst schoot op een gewoon beeldscherm in de
   gestapelde vorm, zonder kop. Bij 666 past de brede vorm ruim; 600 laat nog
   61 over voor de bedrijfscel en stapelt pas als het echt moet.

   Dus stapelen: dezelfde rij, een andere template. Het vakje links over alle
   regels, daarnaast het bedrijf, dan het bezoek en de score op een regel
   eronder, en de labels daaronder, hier niet ingesprongen -- op een telefoon
   is elke pixel breedte nodig.

       [v]  [logo]  Naam
                    Plaats · SBI
            11:49                    ---- 100
            label  label  label                                             */
@container (max-width: 600px) {
	.table-compact > thead { display: none; }

	table.table.table-compact > tbody > tr {
		grid-template-columns: auto minmax(0, 1fr) auto;
		grid-template-areas:
			"kies bedrijf bedrijf"
			"kies bezoektijd score"
			"kies labels  labels";
		column-gap: 10px;
		row-gap: 8px;
		padding: 10px 12px;
	}

	.table.table-compact > tbody > tr > td { padding: 0; }

	.table-compact td.kies   { align-self: start; }
	.table-compact td.labels { padding: 0; }

	/* Labels mogen hier afbreken. Ze staan normaal op nowrap, maar
	   "Conversie / Bedanktpagina bereikt - 365 dagen" is 277px breed en de
	   kaart is er nog maar zo'n 300 -- dat stak op 1 september 2026 52px
	   buiten de kaart. Afbreken en niet afkappen, want zo'n naam is niet te
	   raden uit zijn eerste helft. */
	.table-compact td.bedrijf .kenmerk-naam,
	.table-compact td.labels .kenmerk-naam { white-space: normal; }
}


/* Het logo links, en daarnaast de naam, de plaats en de labels onder elkaar.
   De labels hebben even naast het logo uit gestaan, over de volle breedte van
   de kolom; ze horen bij de tekst en staan er weer onder.

   flex-start en niet center: het logo lijnt uit met de bovenkant van de naam.
   Bij center zou het bij een bedrijf zonder plaatsnaam of zonder labels een
   paar pixels zakken en dan niet meer op een lijn staan met de kaart erboven. */
.table-compact td.bedrijf { display: flex; align-items: flex-start; gap: 12px; }

/* Het logo in de cel is het logovak (.logo, verderop) op 72. Van 34 naar 48
   ging het op 1 september 2026, gemeten over de 44 logo's die laadden: 22
   waren ongeveer vierkant (verhouding 0,8 tot 1,25) en 17 breder dan 2:1, met
   een uitschieter van 7,3:1. Een vierkant vak bedient dus de meerderheid; een
   breder vak zou de wordmarks helpen en de vierkante juist kleiner maken. */

/* contain: inline-size, en dat is nodig voor het afkappen hieronder. De cel
   staat op display: flex, en een flexcontainer telt voor zijn minimale breedte
   de minimale breedte van zijn items op -- en die van een regel op nowrap is
   de hele regel, ook met overflow: hidden erop. Via de cel komt dat in de
   automatische tabelindeling terecht, en die maakt de kolom er dan gewoon
   breed genoeg voor. Gemeten op 6 september 2026, meteen na de deploy van de
   SBI-regel: tabel 1130 in een kolom van 692, en niets afgekapt. Met
   inline-size-containment draagt deze kolom niets bij aan die minimale
   breedte, neemt hij wat er overblijft (288 bij 692) en kapt de regel af:
   28 van de 50. table-layout: fixed deed hetzelfde, maar vraagt vaste
   breedtes op de koppen; dit is een regel. Dezelfde browsers als de
   containerquery verderop, die deze containment al inhoudt. */
.bedrijf__tekst  { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1 1 auto; contain: inline-size; }
.bedrijf__naam   { font-weight: 600; color: var(--ink); }

/* Plaats en SBI-omschrijving op een regel, sinds 6 september 2026. Een
   SBI-omschrijving kan lang zijn -- "Groothandel in overige machines en
   apparaten voor industrie en handel" en langer -- en de regel wordt daarom
   afgekapt in plaats van afgebroken; de volledige tekst staat in de title.
   Dat werkt omdat .bedrijf__tekst min-width: 0 heeft, anders rekt een
   flexkolom mee met zijn langste regel. De capitalize die hier stond gold
   voor de plaatsnaam en staat nu alleen op die naam; een omschrijving is
   een zin. */
.bedrijf__plaats {
	display: block;
	font-size: 12px;
	color: var(--ink-muted);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.bedrijf__plaatsnaam { text-transform: capitalize; }
.bedrijf__sbi        { color: var(--ink-faint); }

/* Relatietypes en tags op eigen regels, allebei als Kenmerk in de kleine
   maat: het relatietype met een vierkant tegeltje, de tag met een rond. Op een
   regel door elkaar waren ze niet uit elkaar te houden -- de gebruiker vroeg
   op 6 september 2026 om meer verschil; tot 9 september 2026 was de tag
   daarom een omlijnde chip. De marges zetten de rijen losser van de tekst dan
   de gap van de kolom; die is voor regels tekst. */
.bedrijf__relaties { display: flex; flex-wrap: wrap; gap: 5px 12px; margin-top: 4px; }
.bedrijf__chips    { display: flex; flex-wrap: wrap; gap: 5px 12px; margin-top: 4px; }



/* --- het logovak: het bedrijfslogo, of de eerste letter ------------------- *
 * Eén vak voor het bedrijfslogo op elke plek waar het staat: bedrijfspagina
 * (96), compacte lijst en het paneel op de lijst (72 en --vak), klassieke
 * lijst (40), recordings en speler (36), welkomstpagina (30) en de live
 * bezoekers (rond, met de bubbel mee). De maat komt als --maat op het element;
 * de binnenmarge en de hoekstraal schalen mee. LogoHelper::vak() (php) en
 * Logo.vak() (script.js) maken de html.
 *
 * Wit, ook in het donkere thema: de merken zijn overwegend donker op
 * transparant en haalden op een themavlak 2,44 tegen de ondergrond (gemeten op
 * 27 augustus 2026). Een licht logo komt sinds 10 september 2026 met een
 * donkere plaat van de server (LogoOphaler::opPlaat), dus het vak hoeft zich
 * niet meer naar het logo te kleuren.
 *
 * Geen logo -- geen website, of een 404 -- dan de eerste letter van de naam in
 * de merkkleur op de merktint, in dezelfde vorm. Op 10 september 2026 stonden
 * hier zes verschillende terugvallen (een ronde blauwe avatar met twee
 * initialen, een grijs vak met één letter, een onzichtbaar vak, de naam in de
 * bubbel); sindsdien is het er één, en altijd alleen de eerste letter.
 */
.logo {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: var(--maat, 36px);
	height: var(--maat, 36px);
	padding: calc(var(--maat, 36px) * .1);
	border: 1px solid var(--line);
	border-radius: calc(var(--maat, 36px) * .09 + 2px);
	background: #ffffff;
	overflow: hidden;
	vertical-align: middle;
}

.logo img { display: block; max-width: 100%; max-height: 100%; object-fit: contain; }

/* De letter staat er standaard niet: achter een geladen logo zou hij
   doorschemeren bij een doorzichtige achtergrond. Pas als de afbeelding weg is
   (geen website, of Logo.leeg na een 404) komt hij, en dan vult hij het vak. */
.logo__letter {
	display: none;
	width: 100%;
	height: 100%;
	align-items: center;
	justify-content: center;
	border-radius: inherit;
	font-family: var(--font);
	font-weight: 600;
	font-size: calc(var(--maat, 36px) * .42);
	line-height: 1;
	letter-spacing: .02em;
	color: var(--brand-ink);
}

.logo--leeg { padding: 0; border-color: transparent; background: var(--brand-tint); }
.logo--leeg img { display: none; }
.logo--leeg .logo__letter { display: flex; }

.logo--rond { border-radius: 50%; }



/* --- het kenmerk: relatietype of tag als tegel met de naam ernaast -------- *
 * Een tegeltje in de kleur van het kenmerk met het icoon erin, en de naam in
 * gewone tekst. Het relatietype heeft een vierkant tegeltje, de tag een rond
 * (kenmerk-tegel--rond): één vorm, toch uit elkaar te houden. Het relatietype
 * had deze vorm sinds 7 september 2026 (toen "relatietype"); sinds
 * 9 september 2026 ook de tag, die daarvoor een chip was. KenmerkHelper (php)
 * en Kenmerk (kenmerk.js) tekenen hem.
 *
 * Het icoon en de stip staan op --op-tegel: wit, of donker op een lichte
 * kleur; de helper zet die per kleur (helderheid boven de helft). Daarmee is
 * de reden vervallen waarom een tag geen tegel kreeg: een wit icoon op een
 * lichte tagkleur was niet te lezen.
 */
.kenmerk {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	max-width: 100%;
	min-width: 0;
	font-size: 13.5px;
	color: var(--ink);
}

.kenmerk-tegel {
	--op-tegel: #fff;
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 22px;
	height: 22px;
	border-radius: 7px;
	background: var(--line-strong);
	color: var(--op-tegel);
	font-size: 11px;
}

/* Het icoon zelf een fractie lager. Gemeten op 9 september 2026 over 166
   tegels (kop, tagkiezer, filterbalk, compacte lijst): het icoonvak staat
   precies in het midden, maar de inkt van het Phosphor-glyph zit gemiddeld
   0,3 pixel te hoog (tot 0,7), horizontaal binnen een halve pixel. Met
   0,4 omlaag komt de inkt op gemiddeld 0,0 tot 0,1. */
.kenmerk-tegel > .fa { transform: translateY(.4px); }

/* Een type zonder icoon (Suspects): een witte stip op de kleur. */
.kenmerk-tegel--stip::after {
	content: '';
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--op-tegel);
}

.kenmerk-naam {
	min-width: 0;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}

/* Kleiner waar er meerdere naast elkaar staan: de lijstrij en het paneel. */
.kenmerk--klein { gap: 6px; font-size: 12px; }
.kenmerk--klein .kenmerk-tegel { width: 18px; height: 18px; border-radius: 6px; font-size: 9px; }
.kenmerk--klein .kenmerk-tegel--stip::after { width: 6px; height: 6px; }

/* Een tag: rond in plaats van vierkant, ook in de kleine maat. Staat ná de
   kleine maat, want die zet zijn eigen hoekronding van 6 met dezelfde
   specificiteit; stond hij ervoor, dan won de 6 en was elke kleine tag
   vierkant. Gemeten op 9 september 2026 in de compacte bedrijvenlijst:
   klasse --rond aanwezig, berekende border-radius 6px. */
.kenmerk-tegel--rond,
.kenmerk--klein .kenmerk-tegel--rond { border-radius: 50%; }

/* Alleen tegels naast elkaar, de naam als tooltip: de klassieke tabel. */
.kenmerk-tegels { display: inline-flex; gap: 4px; vertical-align: middle; }

/* "+n" achter een afgekapte rij tags in de compacte lijst. */
.kenmerk-meer { font-size: 11px; font-weight: 600; color: var(--ink-muted); }

/* De leadscore als balk plus cijfer: de balk om te scannen, het cijfer om te
   vergelijken. */
.score__balk {
	display: inline-block;
	width: 64px; height: 6px;
	margin-right: 8px;
	border-radius: 999px;
	background: var(--surface-hover);
	overflow: hidden;
	vertical-align: middle;
}

/* Amber, sinds 6 september 2026 op verzoek van de gebruiker; stond op
   --brand, en dan was de balk hetzelfde blauw als de links, de streep van de
   gekozen rij en de knoppen eromheen. Eerst --data-4, maar die is in het
   lichte thema verdiept voor de grafieken en oogde hier somber; vandaar een
   eigen token, zie --amber bij de tokens. Geldt ook op het welkomscherm,
   waar welkom.js dezelfde balk tekent. */
.score__balk > span {
	display: block;
	height: 100%;
	border-radius: 999px;
	background: var(--amber);
}

.score__cijfer {
	font-variant-numeric: tabular-nums;
	font-size: 13px;
	color: var(--ink-muted);
}

/* --- het detailpaneel ---------------------------------------------------- */

.bedrijf-paneel {
	position: sticky;
	top: 16px;
	background: var(--surface-raised);
	border: 1px solid var(--line);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-kaart);
	padding: 20px 22px;
	/* #main-body is de scrollcontainer en is hier 839 hoog bij een venster van
	   900; deze marge houdt het paneel binnen beeld zonder ruimte te verspillen. */
	max-height: calc(100vh - 140px);
	overflow-y: auto;
}

/* De lege stand: een placeholder, sinds 6 september 2026. Tot dan een regel
   tekst gecentreerd in een vak van 220 hoog; de gebruiker vond dat klein en
   koos, na twee previews in de pagina, deze schim boven een lijntekening.
   De schim is het paneel zoals het gevuld wordt (party/index.blade.php), in
   de maten van het echte paneel -- een logovak van 78 en knoppen van 64 zoals
   .paneel__balk -- zodat
   er weinig verspringt als er een bedrijf gekozen wordt: gemeten 430 hoog
   tegen een gevuld paneel van ongeveer die maat. Het kaartje met de uitleg
   ligt er in het midden overheen. */
.bedrijf-paneel.is-leeg { display: block; position: relative; min-height: 0; }

.schim { pointer-events: none; }
.schim__balk { display: flex; align-items: center; gap: 8px; margin-bottom: 16px; }
.schim__vak {
	width: 78px; height: 78px;
	border-radius: var(--radius);
	background: var(--surface-sunken);
	border: 1px dashed var(--line-strong);
}
.schim__knoppen { margin-left: auto; display: flex; gap: 6px; }
.schim__knop { width: 64px; height: 64px; border-radius: var(--radius); background: var(--surface-sunken); }
.schim__regel { height: 10px; border-radius: 999px; background: var(--surface-sunken); margin: 0 0 9px; }
.schim__regel--kop { height: 16px; width: 62%; margin: 2px 0 10px; background: var(--line); }
.schim__regel--sub { width: 48%; }
.schim__chips { display: flex; gap: 6px; margin: 12px 0 18px; }
.schim__chip { height: 18px; border-radius: 999px; background: var(--surface-sunken); border: 1px solid var(--line); }
.schim__blok { border-top: 1px solid var(--line); padding-top: 14px; margin-top: 14px; }
.schim__bloknaam { width: 52px; height: 8px; border-radius: 999px; background: var(--line); margin-bottom: 12px; }
.schim__dl { display: grid; grid-template-columns: 86px minmax(0, 1fr); gap: 9px 12px; }
.schim__dl span { height: 9px; border-radius: 999px; background: var(--surface-sunken); }
.schim__dl span:nth-child(odd) { width: 60%; }

.leeg__kaart {
	position: absolute;
	left: 50%; top: 50%;
	transform: translate(-50%, -50%);
	width: min(78%, 330px);
	padding: 22px 24px 20px;
	text-align: center;
	background: var(--surface-raised);
	border: 1px solid var(--line);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-kaart);
}
.leeg__kaart .fa { display: block; margin-bottom: 8px; font-size: 22px; color: var(--brand); }
.leeg__titel { margin: 0 0 6px; font-size: 15px; font-weight: 600; color: var(--ink); }
.leeg__tekst { margin: 0; font-size: 12.5px; line-height: 1.5; color: var(--ink-muted); }

/* Het logo krijgt een eigen vlak. De merken lopen van vierkant tot bijna zeven
   keer zo breed als hoog, dus alleen de hoogte ligt vast en de breedte volgt.
   De kleur van het vlak is met opzet niet aan het thema gekoppeld maar aan het
   logo zelf: een donker merk heeft wit nodig, een licht merk juist niet.
   bedrijven-compact.js meet welk van de twee het is. */
/* De balk bovenaan de kaart: het logo links, de knoppen rechts. Het logovak
   bepaalt de hoogte; staat er geen logo, dan houdt de balk die hoogte zelf
   vast en verspringen de knoppen niet. */
.paneel__balk {
	--vak: 78px;                /* de maat van het logovak */
	display: flex;
	align-items: center;
	gap: 8px;
	min-height: var(--vak);
	margin-bottom: 16px;
}

.paneel__knoppen {
	display: flex;
	align-items: center;
	gap: 6px;
	margin-left: auto;          /* knoppen blijven rechts, ook zonder logo */
	flex: 0 0 auto;
}

/* De knoppen: kleiner dan het logovak, omlijnd, met het label in kleine
   letters onder het icoon -- variant A, gekozen op 28 september 2026. De
   eerste, naar de bedrijfspagina, is licht getint: de hoofdhandeling, zonder
   dat hij de kaart overschreeuwt.

   De rand staat op de merkkleur. Op de witte kaart is de rand het enige dat
   de knop begrenst, en --line-strong haalt daar 1,45 in het lichte thema en
   1,59 in het donkere, waar een bedieningselement er 3 nodig heeft; met
   --brand wordt dat 3,5 en 6,7. */
.paneel__knop {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 5px;
	flex: 0 0 64px;
	width: 64px;
	height: 64px;
	padding: 0;
	border: 1px solid var(--brand);
	border-radius: var(--radius);
	background: transparent;
	color: var(--brand-ink);
	font: inherit;
	font-size: 11px;
	font-weight: 600;
	line-height: 1;
	text-decoration: none;
	cursor: pointer;
}

.paneel__knop i { font-size: 18px; line-height: 1; }

.paneel__knop--eerst { background: var(--brand-tint); }

.paneel__knop:hover,
.paneel__knop:focus {
	background: var(--brand-tint);
	color: var(--brand-ink);
	text-decoration: none;
}

.paneel__knop:focus-visible { outline: 2px solid var(--brand-ink); outline-offset: 2px; }

/* Het logovak (.logo), in de maat van de balk. Tot 10 september
   2026 had het paneel een eigen vak dat zich in bedrijven-compact.js naar de
   helderheid van het logo kleurde; een licht logo komt sinds die dag al met
   een donkere plaat van de server (LogoOphaler::opPlaat). */
.paneel__logo { --maat: var(--vak); }

.paneel__kop { border-bottom: 1px solid var(--line); padding-bottom: 14px; margin-bottom: 16px; }
.paneel__kop h2 { margin: 0 0 4px; font-size: 18px; font-weight: 600; }
.paneel__onderkop { margin: 0; font-size: 13px; color: var(--ink-muted); }
/* Elk met het potlood erachter (.paneel__potlood), dat hoger is dan een
   tegel; center houdt de tegels en het potlood op één lijn. */
.paneel__relatietypes { display: flex; flex-wrap: wrap; align-items: center; gap: 5px 12px; margin-top: 8px; }
.paneel__chips { display: flex; flex-wrap: wrap; align-items: center; gap: 5px 12px; margin-top: 10px; }

.paneel__blok { margin-bottom: 18px; }

/* De tegels in het bezoekblok, sinds 6 september 2026: vier getallen, elk op
   een lichte tint van een kleur uit het datapalet, het getal in mono en in
   die kleur naar --ink toe gemengd zodat het leesbaar blijft. auto-fit met een
   minimum van 96: in het paneel naast de lijst (rond 470 breed) staan ze op
   een rij, in een smalle lade worden het er twee per regel. */
.paneel__tegels {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(96px, 1fr));
	gap: 8px;
	margin-bottom: 12px;
}

.paneel__tegel {
	--tint: var(--data-1);
	min-width: 0;
	padding: 9px 11px;
	border-radius: var(--radius);
	background: color-mix(in srgb, var(--tint) 13%, var(--surface-raised));
}

.paneel__tegel b {
	display: block;
	font-family: var(--font-mono);
	font-variant-numeric: tabular-nums;
	font-size: 17px;
	font-weight: 500;
	line-height: 1.2;
	color: color-mix(in srgb, var(--tint) 55%, var(--ink));
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.paneel__tegel span { font-size: 10.5px; color: var(--ink-muted); }

/* De laatste sessie in het paneel, sinds 6 september 2026: datum, duur en
   herkomst op een regel, daaronder de pagina's als lijst met tijd en duur
   links -- dezelfde indeling als de tijdlijn op de detailpagina, in het klein.
   Tijden en duren in mono en tabular-nums, zoals de andere getallen in de
   lijst en het paneel. De url is de langste regel en wordt afgekapt; de titel
   erboven zegt genoeg en de link opent de pagina zelf. */
.sessie__kop {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 4px 10px;
	margin: 0 0 8px;
	font-size: 12px;
	color: var(--ink-muted);
}
.sessie__datum { color: var(--ink); font-weight: 600; }
.sessie__duurtotaal { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.sessie__herkomst { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }

.sessie__lijst { list-style: none; margin: 0; padding: 0; }
.sessie__pagina {
	display: grid;
	grid-template-columns: 54px 36px minmax(0, 1fr);
	gap: 0 10px;
	padding: 6px 0;
	border-top: 1px solid var(--line);
	font-size: 12px;
}
.sessie__pagina:first-child { border-top: 0; }
.sessie__tijd,
.sessie__duur {
	font-family: var(--font-mono);
	font-variant-numeric: tabular-nums;
	color: var(--ink-muted);
	white-space: nowrap;
}
.sessie__duur { color: var(--ink-faint); }
.sessie__inhoud { min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.sessie__titel { color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sessie__url { font-size: 11px; color: var(--ink-faint); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
a.sessie__url { color: var(--brand-ink); }
.sessie__stil,
.sessie__meer { margin: 6px 0 0; font-size: 12px; color: var(--ink-muted); }
.paneel__blok h3 {
	margin: 0 0 8px;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .05em;
	text-transform: uppercase;
	color: var(--ink-muted);
}

.paneel__blok dl { margin: 0; }
.paneel__regel {
	display: flex;
	gap: 12px;
	padding: 5px 0;
	border-bottom: 1px solid var(--line);
	font-size: 13px;
}
.paneel__regel:last-child { border-bottom: none; }
.paneel__regel dt { flex: 0 0 40%; margin: 0; font-weight: 500; color: var(--ink-muted); }
.paneel__regel dd { flex: 1; margin: 0; color: var(--ink); word-break: break-word; }

/* De sluitknop hoort bij de lade hieronder; naast de lijst is er niets te
   sluiten. Daarom standaard weg, en alleen onder de grens zichtbaar. Los van
   .paneel__knoppen, want dit is geen handeling op het bedrijf. */
.paneel__sluit { display: none; }
.paneel-doek { display: none; }

/* Naast elkaar past niet onder 992px -- dezelfde grens als de col-md-kolommen
   in de view, want daar begint het stapelen. Het paneel viel daar onder de
   lijst: na een klik moest je naar beneden scrollen om iets te zien, en was je
   de lijst kwijt. Nu schuift het als lade van rechts in beeld, met een doek
   erachter.

   z-index 1035 zit boven de dropdowns van de filterbalk (1000) en onder de
   modals (1050), zodat een bootbox er nog overheen komt. Er is geen voorouder
   met een transform of filter, dus position: fixed pakt hier echt het venster
   en niet een tussenliggend blok -- nagekeken op 1 september 2026. */
@media (max-width: 991px) {
	.bedrijf-paneel {
		position: fixed;
		top: 0;
		right: 0;
		bottom: 0;
		z-index: 1035;
		width: min(420px, 92vw);
		max-height: none;
		margin: 0;
		border-width: 0 0 0 1px;
		border-radius: 0;
		overflow-y: auto;
		transform: translateX(100%);
		transition: transform .22s ease;
		box-shadow: -8px 0 24px rgba(0, 0, 0, .18);
	}

	.bedrijf-paneel.is-open { transform: translateX(0); }

	/* De lege stand hoort niet in een lade: die gaat pas open zodra er een
	   bedrijf gekozen is, dus "Kies een bedrijf uit de lijst" zou daar nooit
	   te zien zijn en anders wel de lade een hoogte geven. */
	.bedrijf-paneel.is-leeg { display: none; }

	.paneel-doek {
		display: block;
		position: fixed;
		top: 0; right: 0; bottom: 0; left: 0;
		z-index: 1034;
		background: rgba(0, 0, 0, .35);
		opacity: 0;
		visibility: hidden;
		transition: opacity .22s ease, visibility .22s;
	}

	.paneel-doek.is-zichtbaar { opacity: 1; visibility: visible; }

	.paneel__sluit {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		align-self: flex-start;
		flex: 0 0 auto;
		width: 32px;
		height: 32px;
		padding: 0;
		border: 1px solid var(--line-strong);
		border-radius: var(--radius);
		background: var(--surface-raised);
		color: var(--ink-muted);
		cursor: pointer;
	}

	.paneel__sluit:hover { background: var(--surface-hover); color: var(--ink); }
}

/* Wie beweging heeft uitgezet krijgt de lade zonder schuiven, maar wel op zijn
   plek: alleen de overgang vervalt, niet de eindstand. */
@media (prefers-reduced-motion: reduce) {
	.bedrijf-paneel,
	.paneel-doek { transition: none; }
}


/* --- welkomscherm --------------------------------------------------------- *
 * De eerste pagina na het inloggen.
 * De opmaak stond hiervoor in een style-blok in de view zelf, met vaste
 * kleuren (color: wheat, tegels op rgba(0,0,0,.8)) en een schermvullende foto.
 * Daardoor was dit de enige pagina die het thema niet volgde.
 */

.welkom {
	/* 1240 sinds 9 september 2026, toen de top 5 branches er rechts bij kwam;
	   daarvoor 1080. De 160 extra is voor die kolom, zodat de twee lijsten in
	   het periodevak niet krapper werden dan ze waren. */
	max-width: 1240px;
	padding: 8px 0 32px;
}

/* De begroeting is een vak als de andere, met wat meer lucht boven en onder
   omdat de tekst er groter is. Twee klassen diep, want .welkom__vak staat
   verderop en zou met de shorthand padding hier overheen gaan. */
.welkom .welkom__kop { padding: 28px 24px; }

.welkom__kop h1 {
	margin: 0;
	font-size: 30px;
	font-weight: 600;
	letter-spacing: -.01em;
	color: var(--ink);
}

.welkom__datum {
	margin: 4px 0 0;
	font-size: 14px;
	color: var(--ink-muted);
	text-transform: lowercase;
}

.welkom__vak {
	margin-bottom: 24px;
	padding: 22px 24px;
	background: var(--surface-raised);
	border: 1px solid var(--line);
	border-radius: var(--radius-lg);
}

.welkom__vakkop {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 16px;
	margin-bottom: 18px;
}

.welkom__vakkop h2 {
	margin: 0;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .08em;
	text-transform: uppercase;
	/* Gemeten op 9 september 2026 op 375: "AFGELOPEN 7 DAGEN" (141) en "Naar
	   het overzicht" (123) vulden met de gap van 16 precies de 280 van de kop,
	   en de kop brak op "DAGEN". De titel breekt niet en de kop houdt op een
	   telefoon een kleinere gap. */
	white-space: nowrap;
	color: var(--ink-muted);
}

@media (max-width: 767px) {
	.welkom__vakkop { gap: 10px; }
}

.welkom__meer {
	font-size: 13px;
	font-weight: 500;
	white-space: nowrap;
	color: var(--brand-ink);
}

.welkom__meer i { font-size: 11px; }

.welkom__wacht,
.welkom__leeg {
	margin: 0;
	font-size: 13px;
	color: var(--ink-muted);
}

/* --- "Aan de slag" op het welkomscherm ------------------------------------ *
 * Sinds 7 september 2026, zolang het account nog nooit een bezoek heeft
 * gemeten (welcome/index.blade.php). Drie stappen naast elkaar; de stap die
 * nu aan de beurt is heeft de merkrand, een afgeronde stap de groene ring.
 */
.slag__intro { margin: 0 0 16px; max-width: 64ch; font-size: 14px; color: var(--ink-muted); }
.slag__intro strong { color: var(--ink); font-weight: 600; }

.slag {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 14px;
}

@media (max-width: 900px) { .slag { grid-template-columns: 1fr; } }

.slag__stap {
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding: 18px 18px 16px;
	background: var(--surface-sunken);
	border: 1px solid var(--line);
	border-radius: 12px;
}

.slag__stap--nu {
	background: var(--surface-raised);
	border-color: var(--brand);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 18%, transparent);
}

.slag__nr {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	background: var(--line-strong);
	color: var(--surface);
	font-size: 12.5px;
	font-weight: 700;
}

.slag__nr .fa { font-size: 12px; }
.slag__stap--nu .slag__nr    { background: var(--brand-solid); color: var(--on-brand); }
.slag__stap--klaar .slag__nr { background: var(--data-2); color: var(--on-data); }

.slag__stap b { font-size: 14px; color: var(--ink); }
.slag__stap p { margin: 0; flex: 1 1 auto; font-size: 13px; line-height: 1.5; color: var(--ink-muted); }

.slag__status {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 12px;
	font-weight: 600;
	color: var(--ink-faint);
}

.slag__status i { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.slag__stap--nu .slag__status    { color: var(--amber-pil); }
.slag__stap--klaar .slag__status { color: var(--data-2); }

.slag__knop {
	align-self: flex-start;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	height: 32px;
	margin-top: 6px;
	padding: 0 12px;
	border-radius: 9px;
	font-size: 12.5px;
	font-weight: 600;
	white-space: nowrap;
}

.slag__knop .fa { font-size: 12px; }

.slag__knop--vol,
.slag__knop--vol:hover,
.slag__knop--vol:focus { background: var(--brand-solid); color: var(--on-brand); text-decoration: none; box-shadow: 0 4px 12px -5px rgba(11, 124, 181, .7); }

.slag__knop--stil,
.slag__knop--stil:hover,
.slag__knop--stil:focus { background: var(--brand-tint); color: var(--brand-ink); text-decoration: none; }


/* --- voorwaarden accepteren (welcome/showterms) ---------------------------- *
 * Eén kaart in het midden, met de tegel en de knop van de hero's. Gekozen uit
 * een mockup op 28 september 2026. #main-body geeft er al 18px boven en 15px
 * opzij; de marge van de kaart komt daarbovenop.
 */
.voorwaarden {
	display: flex;
	flex-direction: column;
	gap: 18px;
	max-width: 580px;
	margin: 38px auto 44px;
	padding: 32px 34px 30px;
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-kaart);
}

.voorwaarden__kop { display: flex; align-items: center; gap: 14px; }
.voorwaarden__tegel { --tint: var(--data-1); }
.voorwaarden__titel { margin: 0; font-size: 24px; font-weight: 600; letter-spacing: -.02em; color: var(--ink); }

.voorwaarden p { margin: 0; font-size: 15px; line-height: 1.6; color: var(--ink-muted); }

.voorwaarden__document {
	display: flex;
	align-items: center;
	gap: 12px;
	min-height: 48px;
	padding: 8px 14px 8px 9px;
	border: 1px solid var(--line-strong);
	border-radius: 10px;
	color: var(--brand-ink);
	font-size: 14px;
	font-weight: 600;
	text-decoration: none;
}

.voorwaarden__document:hover,
.voorwaarden__document:focus { background: var(--surface-sunken); color: var(--brand-ink); text-decoration: none; }

/* Een tegeltje uit het datapalet, zoals in de knoppen in de kop van de
   bedrijfspagina (.bd-actie i). */
.voorwaarden__pdf {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	border-radius: 8px;
	background: var(--data-5);
	color: var(--on-data);
	font-size: 15px;
}

/* Drie klassen, want branding-salesfeed.css heeft a > .fa-external-link
   (0,1,1) en a:hover > .fa-external-link (0,2,1): met één klasse stond het
   pijltje op 28 september 2026 op 9px, groen en tegen de tekst aan. */
.voorwaarden .voorwaarden__document > .voorwaarden__pijl { margin-left: auto; font-size: 13px; color: var(--ink-faint); }

/* De knop van de hero, over de volle breedte, en met ruimte voor twee regels
   op een telefoon: .hero__knop is 36 hoog op één regel. */
.voorwaarden form { margin: 0; }

.hero__knop.voorwaarden__akkoord {
	justify-content: center;
	width: 100%;
	height: auto;
	min-height: 44px;
	padding: 10px 18px;
	border: 0;
	font: inherit;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.35;
	text-align: center;
	cursor: pointer;
}

@media (max-width: 767px) {
	.voorwaarden { gap: 16px; margin: 0 0 24px; padding: 22px 20px; }
	.voorwaarden__titel { font-size: 21px; }
}


/* --- de kerncijfers ------------------------------------------------------- */

.kerncijfers {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 1px;
	margin-bottom: 24px;
	background: var(--line);      /* de gaten in het raster worden de scheidslijnen */
	border: 1px solid var(--line);
	border-radius: var(--radius);
	overflow: hidden;
}

.kerncijfer {
	display: flex;
	flex-direction: column;
	gap: 2px;
	padding: 16px 18px;
	background: var(--surface-raised);
}

.kerncijfer__getal {
	font-size: 26px;
	font-weight: 600;
	line-height: 1.1;
	font-variant-numeric: tabular-nums;
	color: var(--ink);
}

.kerncijfer__label {
	font-size: 12px;
	color: var(--ink-muted);
}

.kerncijfer__bij {
	font-size: 11px;
	font-weight: 600;
	color: var(--brand-ink);
}

@media (max-width: 767px) {
	.kerncijfers { grid-template-columns: repeat(2, 1fr); }
}

/* --- de drukste bedrijven ------------------------------------------------- */

/* Twee kolommen naast elkaar: links wie het drukst was, rechts wie er voor het
   eerst binnenkwam. Onder de 900 past dat niet meer naast elkaar. */
.welkom__kolommen {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 12px 32px;
}

@media (max-width: 900px) {
	.welkom__kolommen { grid-template-columns: 1fr; gap: 24px; }
}

.welkom__lijstkop {
	margin: 0 0 10px;
	font-size: 13px;
	font-weight: 600;
	color: var(--ink);
}

.drukste { margin: 0; padding: 0; list-style: none; }

.drukste__rij + .drukste__rij { border-top: 1px solid var(--line); }

.drukste__link {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 9px 8px;
	margin: 0 -8px;
	border-radius: var(--radius);
	color: var(--ink);
	text-decoration: none;
}

.drukste__link:hover,
.drukste__link:focus {
	background: var(--surface-hover);
	color: var(--ink);
	text-decoration: none;
}

.drukste__tekst { display: flex; flex-direction: column; min-width: 0; gap: 1px; }
.drukste__naam  { font-weight: 600; font-size: 14px; }
/* Geen capitalize hier: de plaatsnaam staat in dezelfde regel als "laatst om",
   en die werd dan "Laatst Om". Op HILVERSUM haalt capitalize toch niets uit. */
.drukste__bij   { font-size: 12px; color: var(--ink-muted); }
.drukste__score { margin-left: auto; white-space: nowrap; }

/* --- de periode links, de branches rechts --------------------------------- *
 * Sinds 9 september 2026. Twee vakken naast elkaar zodra er ruimte is: met
 * het zijmenu ernaast is de inhoud bij 1280 zo'n 1045 breed, en dan houdt de
 * linkerkolom ruim 700 over voor de twee lijsten. Daaronder staat het
 * branchevak onder het periodevak.
 */
.welkom__raster {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 0 24px;
}

@media (min-width: 1280px) {
	.welkom__raster {
		grid-template-columns: minmax(0, 1fr) 316px;
		align-items: start;
	}
}

/* --- de top 5 branches ----------------------------------------------------- *
 * welkom.js telt ze uit hetzelfde antwoord als de kerncijfers: per
 * SBI-omschrijving het aantal bedrijven, de vijf grootste, met een balk ten
 * opzichte van de grootste. Elke rij linkt naar het bedrijvenoverzicht met
 * die branche en dezelfde periode als filter.
 */

.branches { margin: 0; padding: 0; list-style: none; }

.branche + .branche { border-top: 1px solid var(--line); }

.branche__link {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	padding: 10px 8px;
	margin: 0 -8px;
	border-radius: var(--radius);
	color: var(--ink);
	text-decoration: none;
}

.branche__link:hover,
.branche__link:focus {
	background: var(--surface-hover);
	color: var(--ink);
	text-decoration: none;
}

/* Het rangnummer: dit is een ranglijst, dus het getal zegt iets. */
.branche__nr {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 22px; height: 22px;
	margin-top: 1px;
	border-radius: 50%;
	background: var(--surface-sunken);
	border: 1px solid var(--line);
	font-family: var(--font-mono);
	font-variant-numeric: tabular-nums;
	font-size: 11.5px;
	font-weight: 600;
	color: var(--ink-muted);
}

.branche__tekst {
	flex: 1 1 auto;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.branche__regel {
	display: flex;
	align-items: baseline;
	gap: 12px;
}

/* SBI-omschrijvingen kunnen lang zijn ("Activiteiten op het gebied van
   computerconsultancy en beheer van computerfaciliteiten"); twee regels en
   dan afkappen, de volle tekst staat in de title van de link. */
.branche__naam {
	flex: 1 1 auto;
	min-width: 0;
	font-size: 13.5px;
	font-weight: 600;
	line-height: 1.3;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.branche__aantal {
	flex: 0 0 auto;
	font-family: var(--font-mono);
	font-variant-numeric: tabular-nums;
	font-size: 14px;
	font-weight: 600;
	color: var(--ink);
}

/* Dezelfde vorm als .score__balk, maar over de volle breedte en in het
   merkblauw: dit is een aantal, geen leadscore, en de score is amber. */
.branche__balk {
	display: block;
	height: 6px;
	border-radius: 999px;
	background: var(--surface-hover);
	overflow: hidden;
}

.branche__balk > span {
	display: block;
	height: 100%;
	border-radius: 999px;
	background: var(--brand);
}

.branche__voet {
	margin: 12px 0 0;
	font-size: 12px;
	color: var(--ink-faint);
}


/* --- bedrijfsdetail -------------------------------------------------------- *
 * Twee kaarten onder elkaar: bovenaan alles over het bedrijf (de kop met naam,
 * de regel eronder, relatietype en tags en de knoppen; daaronder de gegevens,
 * de contactpersonen, de notities en de opzoeklinks), en daaronder de
 * bezoeken.
 */

.bedrijf-detail { padding-bottom: 32px; }

/* --- 1. de kop ------------------------------------------------------------- */

.bd-kop {
	display: flex;
	align-items: center;
	gap: 18px;
	padding: 18px 20px;
}

/* Het logo links in de kop is het logovak (.logo) op 96. */

.bd-kop__tekst { flex: 1 1 auto; min-width: 0; }

.bd-kop__tekst h1 {
	margin: 0 0 5px;
	font-size: 24px;
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: -.01em;
	color: var(--ink);
	overflow-wrap: anywhere;
}

/* De regel direct onder de naam: de plaats, de branche met de SBI-code
   tussen haakjes en de kredietscore. */
.bd-kop__onder {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 6px 10px;
	margin: 0 0 12px;
	font-size: 13px;
	color: var(--ink-muted);
}

.bd-kop__plaats {
	font-weight: 600;
	color: var(--ink);
	text-transform: capitalize;
}

/* Scheidingsstip tussen plaats en branche, alleen als er een branche volgt;
   voor de kredietscore niet, die is een pil. */
.bd-kop__plaats + span:not(.kredietscore)::before { content: '\00b7'; margin-right: 10px; }

/* Nowrap: op 375 brak "(SBI 64210)" anders na "(SBI" af, gezien op
   30 september 2026. */
.bd-kop__sbicode { color: var(--ink-faint); font-variant-numeric: tabular-nums; white-space: nowrap; }

/* De kredietscore staat als pil in die regel (.kredietscore). */
.bd-kop__onder .kredietscore { align-self: center; }

/* De korte handelsnaam uit het handelsregister, alleen als hij afwijkt van de
   naam die er al boven staat. */
.bd-kop__handelsnaam {
	margin: 0 0 5px;
	font-size: 13px;
	color: var(--ink-muted);
}

/* --- badges: wat er aanstaat, in het kort -------------------------------- */

/* De relatietypes staan direct onder de naam: dat is de indeling van het
   bedrijf zelf, en die weegt zwaarder dan de tags eronder. */
/* De rij met de relatietypes en de rij met de tags, elk met het potlood
   erachter dat het keuzevenster opent. De houders zelf (#badges-relatietype,
   #badges-tags) zijn display: contents: ververBadges() in party/detail leegt
   en vult ze, en zo staat het potlood buiten de houder en toch achter de
   laatste tegel of pil. Leeg blijft alleen het potlood over. Tot 9 september
   2026 zat de ingang rechts in de kop als knop met het aantal. */
.bd-kop__rijtje {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 5px 8px;
	margin: 0 0 6px;
}

.bd-kop__rijtje--tags { margin: 10px 0 0; }

.bd-kop__types,
.bd-kop__badges { display: contents; }

/* Hetzelfde potlood achter de relatietypes en de tags in het paneel van het
   bedrijvenoverzicht (.paneel__potlood); het opent daar dezelfde dialoog. */
.bd-kop__potlood,
.paneel__potlood {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 24px;
	height: 24px;
	border: 1px dashed var(--line-strong);
	border-radius: 999px;
	background: var(--surface);
	color: var(--ink-muted);
	font-size: 11px;
	text-decoration: none;
}

.bd-kop__potlood:hover,
.bd-kop__potlood:focus,
.paneel__potlood:hover,
.paneel__potlood:focus {
	border-color: var(--brand);
	background: var(--brand-tint);
	color: var(--brand-ink);
	text-decoration: none;
}


/* De relatietypes in de kop staan als tegel met naam (.relatietype) en
   wegen daarmee vanzelf zwaarder dan de tags eronder; ze krijgen meer lucht. */
.bd-kop__rijtje--types { gap: 5px 14px; }

/* --- de acties in de kop --------------------------------------------------- */

/* Eén rij, rechts uitgelijnd en wikkelend: vestigingen, concern, LinkedIn en
   de recordings. */
.bd-kop__acties {
	flex: 0 0 auto;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: flex-end;
	gap: 4px;
	/* 640 en niet 520: met vestigingen, concern, kredietscore en opnames
	   wikkelde de rij op 520 naar twee regels, gemeten op 9 september 2026
	   bij Symbis B.V. */
	max-width: 640px;
}

/* De kleur van het tegeltje gaat per positie, zoals in de kopbalk en het
   zijmenu. Op de kinderen van de rij en niet op .bd-actie zelf: de knop met
   uitklap zit in een houder, en een eigen waarde op .bd-actie zou de geërfde
   overschrijven. */
.bd-kop__acties > * { --kleur: var(--data-2); }
.bd-kop__acties > :nth-child(2) { --kleur: var(--data-3); }
.bd-kop__acties > :nth-child(3) { --kleur: var(--data-4); }
.bd-kop__acties > :nth-child(4) { --kleur: var(--data-5); }
.bd-kop__acties > :nth-child(5) { --kleur: var(--data-1); }

/* De knop in de vorm van de kopbalkknop, op wit: het icoon in een tegeltje
   van 28 in een kleur uit het datapalet, het label ernaast en het aantal als
   bolletje. Tot 9 september 2026 een omlijnde knop met het icoon in
   merkblauw. */
.bd-actie {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	height: 36px;
	padding: 0 12px 0 4px;
	border: 0;
	border-radius: 10px;
	background: transparent;
	color: var(--ink);
	font-size: 12.5px;
	font-weight: 600;
	line-height: 1;
	white-space: nowrap;
	text-decoration: none;
	transition: background-color .12s ease;
}

.bd-actie:hover,
.bd-actie:focus {
	background: var(--surface-hover);
	color: var(--ink);
	text-decoration: none;
}

.bd-actie i {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	border-radius: 8px;
	background: var(--kleur);
	color: var(--on-data);
	font-size: 15px;
	line-height: 1;
	box-shadow: 0 3px 8px -3px rgba(0, 0, 0, .4);
}

.bd-actie__aantal {
	padding: 1px 6px;
	border-radius: 999px;
	background: var(--surface-sunken);
	border: 1px solid var(--line);
	font-size: 11px;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	color: var(--ink-muted);
}

.bd-actie > b.caret { margin-left: -2px; border-top-color: var(--ink-muted); }

/* De houder van een knop met uitklap (opnames): bootstrap zet .open op de
   ouder van de knop, en de uitklap hangt rechts onder de knop. */
.bd-actie-houder { position: relative; display: inline-flex; }
.bd-actie-houder.open > .bd-actie { background: var(--brand-tint); color: var(--brand-ink); }
.bd-actie-houder > .uitklap { left: auto; right: 0; margin-top: 6px; }

@media (max-width: 860px) {
	.bd-kop { flex-wrap: wrap; }
	.bd-kop__acties {
		position: relative;
		width: 100%;
		max-width: none;
		justify-content: flex-start;
		padding-top: 6px;
		border-top: 1px solid var(--line);
	}

	/* De uitklap hangt hier aan de hele rij en niet aan de knop: de rij staat
	   links uitgelijnd en een uitklap die rechts aan de knop hangt viel op
	   375px links buiten beeld (van -112 tot 188, gemeten op 9 september
	   2026). Onder de rij, over de volle breedte van de kaart. */
	.bd-actie-houder { position: static; }
	.bd-actie-houder > .uitklap {
		left: 0;
		right: 0;
		width: auto;
		min-width: 0;
		max-width: none;
		margin-top: 4px;
	}
}

@media (max-width: 767px) {
	.bd-actie { height: 40px; }
}

/* --- de kaart om de kop: kop, drie groepen, kerncijfers ------------------- *
 * Sinds 9 september 2026, gekozen uit een mockup ("alles in de kop"): alles
 * over het bedrijf in één kaart, en de bezoeken daaronder over de volle
 * breedte. Daarvoor stond de kop los, met een vak "Bedrijfsinformatie" van
 * alleen-lezen invoervelden eronder (input-group met een addon als label,
 * 152 breed) en dan de tijdlijn.
 */

.bd-kaart {
	margin-bottom: 20px;
	background: var(--surface-raised);
	border: 1px solid var(--line);
	border-radius: var(--radius-lg);
}

/* Het vak eronder: de bezoeken. */
.bd-vak {
	margin-bottom: 20px;
	padding: 20px 22px;
	background: var(--surface-raised);
	border: 1px solid var(--line);
	border-radius: var(--radius-lg);
}

.bd-vak__kop {
	margin: 0 0 16px;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .07em;
	text-transform: uppercase;
	color: var(--ink-muted);
}

.bd-vak__kopregel {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 14px;
}

.bd-vak__kopregel .bd-vak__kop { margin: 0; }
.bd-vak__van { font-size: 12px; white-space: nowrap; color: var(--ink-faint); }

/* --- de drie groepen in de kop --------------------------------------------- *
 * Eén raster: drie groepen naast elkaar en eronder, over de volle breedte,
 * de notities en de rij opzoeklinks; met contactpersonen erbij staan de
 * groepen links onder elkaar (zie "de contactpersonen" hieronder). Elke groep is dezelfde lijst van regels (dl.feiten):
 * label in een kolom van 104, waarde ernaast, regels van 28 hoog -- als
 * tekst wat je leest, als invoer wat je mag wijzigen. Zo lijnen de regels
 * over de groepen heen uit. De band springt in tot de tekstkolom van de kop
 * (logo 96 plus gap 18 plus de padding van 20), zodat de kolom onder het
 * logo leeg blijft; op een telefoon loopt de kop om en vervalt dat.
 */

.bd-feiten {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 16px 28px;
	padding: 16px 22px 18px 134px;
	border-top: 1px solid var(--line);
}

.bd-feiten__rij { grid-column: 1 / -1; }

@media (max-width: 1100px) { .bd-feiten { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* Onder 860 loopt de kop om (zie .bd-kop verderop) en staat de naam op de
   padding van de kop; dan springen de groepen niet meer in maar staan ze op
   dezelfde 20, zodat de labels onder de naam uitlijnen. Gemeten op 768 na de
   deploy van 9 september 2026: naam op 36, labels op 150. */
@media (max-width: 860px)  { .bd-feiten { padding-left: 20px; padding-right: 20px; } }
@media (max-width: 767px)  { .bd-feiten { grid-template-columns: 1fr; gap: 0; padding: 4px 20px 12px; } }

.bd-groep { min-width: 0; }

/* Het kopje. Op het bureaublad is het geen knop: geen driehoekje, geen
   handje, en klikken doet niets. Op een telefoon is het wel een knop (44 hoog)
   met een pijltje, en staat alleen de eerste groep open (bezoeken.js). */
.bd-groep__kop {
	margin: 0 0 8px;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--ink-muted);
	list-style: none;
	cursor: default;
}

.bd-groep__kop::-webkit-details-marker { display: none; }

@media (min-width: 768px) { .bd-groep__kop { pointer-events: none; } }

@media (max-width: 767px) {
	.bd-groep__kop {
		display: flex;
		align-items: center;
		justify-content: space-between;
		min-height: 44px;
		margin: 0;
		cursor: pointer;
	}

	.bd-groep__kop::after { font-family: FontAwesome; font-size: 14px; color: var(--ink-faint); content: '\f107'; }
	.bd-groep[open] > .bd-groep__kop::after { content: '\f106'; }
	.bd-groep[open] > .bd-groep__kop { margin-bottom: 4px; }
	.bd-groep[open] { padding-bottom: 12px; }
	.bd-groep + .bd-groep { border-top: 1px solid var(--line); }
	.bd-feiten__rij { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); }
}

/* De regels: label links, waarde rechts, allebei even hoog. Eén gewicht en
   één kleur voor alle labels, of ze nu bij tekst of bij een invoerveld
   staan; het label-element krijgt elders in de app 600 en de dt van
   bootstrap vet, en dat gaf hier een potje (9 september 2026). */
.feiten {
	display: grid;
	grid-template-columns: 104px minmax(0, 1fr);
	grid-auto-rows: minmax(28px, auto);
	gap: 4px 12px;
	align-items: start;
	margin: 0;
	font-size: 13px;
}

.feiten dt,
.feiten dt label {
	margin: 0;
	padding: 4px 0;
	font-size: 12px;
	font-weight: 500;
	line-height: 1.5;
	color: var(--ink-muted);
	overflow-wrap: anywhere;
}

.feiten dd {
	margin: 0;
	padding: 4px 0;
	min-width: 0;
	font-weight: 500;
	line-height: 1.5;
	color: var(--ink);
	overflow-wrap: anywhere;
}

.feiten__mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: 12.5px; }
.feiten__leeg { font-weight: 400; color: var(--ink-faint); }

/* Wat je zelf wijzigt ziet er wél als invoer uit, op dezelfde regelhoogte
   als de tekst ernaast. De padding van de dd vervalt dan: de rand van het
   veld neemt die 4 pixel in. */
.feiten dd:has(> .feiten__invoer) { padding: 0; }

.feiten__invoer {
	display: block;
	width: 100%;
	min-height: 28px;
	padding: 3px 8px;
	border: 1px solid var(--line-strong);
	border-radius: 7px;
	background: var(--surface);
	color: var(--ink);
	font: inherit;
	font-size: 13px;
	font-weight: 500;
	line-height: 1.5;
	box-shadow: none;
}

textarea.feiten__invoer { resize: vertical; }

/* De notities: een eigen rij over de volle breedte, vijf regels hoog. */
.feiten__invoer--notities { min-height: 124px; }

.feiten__invoer:focus {
	outline: none;
	border-color: var(--brand);
	box-shadow: 0 0 0 3px var(--brand-ring);
}

@media (max-width: 767px) {
	.feiten { grid-template-columns: 96px minmax(0, 1fr); }
	input.feiten__invoer { min-height: 44px; }
}

/* De opzoeklinks: een rij knopjes met een gekleurd icoontje, naast elkaar. */
.bd-links {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.feiten dd.bd-links { padding: 0; }

.bd-links a {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	height: 28px;
	padding: 0 10px;
	border-radius: 7px;
	background: var(--surface-sunken);
	border: 1px solid var(--line);
	font-size: 12.5px;
	font-weight: 600;
	color: var(--ink);
	text-decoration: none;
}

.bd-links a:hover,
.bd-links a:focus { background: var(--surface-hover); color: var(--ink); text-decoration: none; }

.bd-links__icoon {
	display: inline-grid;
	place-items: center;
	width: 18px; height: 18px;
	border-radius: 5px;
	font-size: 10px;
	color: var(--on-data);
}

.bd-links__icoon--1 { background: var(--data-1); }
.bd-links__icoon--2 { background: var(--data-2); }
.bd-links__icoon--3 { background: var(--data-3); }
.bd-links__icoon--4 { background: var(--data-4); }
.bd-links__icoon--5 { background: var(--data-5); }
.bd-links__icoon--6 { background: var(--data-1); }

.bedrijf-detail iframe { width: 100% !important; }

/* --- de contactpersonen ---------------------------------------------------- *
 * Met contactpersonen erbij (party/detail/companyeditor) staan de gegevens in
 * twee kolommen: links de drie groepen onder elkaar in .bd-feiten__kolom,
 * rechts de groep Contactpersonen. Zonder contactpersonen is die kolom
 * display: contents en staan de groepen naast elkaar in het raster.
 *
 * De lijst komt uit party/detail/contactpersonen: per persoon de eerste
 * letter, de naam en de functie, en de pagina waar hij gevonden is als knopje
 * in de vorm van de opzoeklinks. Gekozen uit een mockup, 30 september 2026.
 * Is er voor het dossier nog niets bewaard, dan staat er in hetzelfde vak
 * een zin met de knop "Zoek contactpersonen" (.personen--nog).
 */

.bd-feiten__kolom { display: contents; }

.bd-feiten--personen { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 40px; }
.bd-feiten--personen .bd-feiten__kolom { display: flex; flex-direction: column; gap: 18px; min-width: 0; }

.bd-personen > .bd-groep__kop { display: flex; align-items: baseline; gap: 12px; }

/* Rechts in het kopje, zoals "Opgesteld door AI" bij In woorden. */
.bd-personen__bron {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-left: auto;
	font-size: 12px;
	font-weight: 500;
	letter-spacing: 0;
	text-transform: none;
	white-space: nowrap;   /* op 375 liep hij anders over twee regels */
	color: var(--ink-muted);
}

.bd-personen__bron .fa { color: var(--brand); }

.personen {
	position: relative;
	margin: 0;
	padding: 0;
	list-style: none;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	background: var(--surface);
	overflow: hidden;
}

.persoon {
	display: grid;
	grid-template-columns: 32px minmax(0, 1fr) auto;
	align-items: center;
	gap: 12px;
	min-height: 52px;
	padding: 8px 10px 8px 12px;
}

.persoon + .persoon { border-top: 1px solid var(--line); }

.persoon__letter {
	display: grid;
	place-items: center;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background: var(--surface-sunken);
	border: 1px solid var(--line);
	font-size: 13px;
	font-weight: 600;
	color: var(--ink-muted);
}

.persoon__tekst { min-width: 0; }

.persoon__naam {
	display: block;
	font-size: 13px;
	font-weight: 600;
	line-height: 1.35;
	color: var(--ink);
	overflow-wrap: anywhere;
}

.persoon__functie {
	display: block;
	font-size: 12px;
	line-height: 1.4;
	color: var(--ink-muted);
	overflow-wrap: anywhere;
}

/* Wanneer die persoon hier voor het laatst gevonden is, achter de functie. */
.persoon__datum { color: var(--ink-faint); white-space: nowrap; }

/* De bron: een knopje als de opzoeklinks (.bd-links a), met hun icoontje. */
.persoon__bron {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	max-width: 180px;
	height: 28px;
	padding: 0 10px 0 6px;
	border-radius: 7px;
	background: var(--surface-sunken);
	border: 1px solid var(--line);
	font-size: 12px;
	font-weight: 600;
	color: var(--ink);
	white-space: nowrap;
	overflow: hidden;
	text-decoration: none;
}

.persoon__site { min-width: 0; overflow: hidden; text-overflow: ellipsis; }

.persoon__bron:hover,
.persoon__bron:focus { background: var(--surface-hover); color: var(--ink); text-decoration: none; }

.persoon__bron .bd-links__icoon { flex: 0 0 auto; }

.personen__leeg {
	margin: 0;
	padding: 22px 12px;
	text-align: center;
	font-size: 12.5px;
	color: var(--ink-muted);
}

.personen .blok-laadt { height: 156px; border-radius: 0; }

.personen--nog {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
	padding: 20px 16px;
	text-align: center;
}

.personen__uitnodiging {
	margin: 0;
	font-size: 12.5px;
	color: var(--ink-muted);
}

.personen__zoek .fa { margin-right: 7px; }

.personen__voet {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 4px 12px;
	margin-top: 8px;
	font-size: 12px;
	color: var(--ink-faint);
}

/* Wat het zoeken kostte, alleen op dev (BaseController::kostenTonen). */
.personen__kosten {
	font-family: var(--font-mono);
	font-variant-numeric: tabular-nums;
	font-size: 11.5px;
}

.personen__opnieuw {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-left: auto;
	padding: 0;
	border: 0;
	background: none;
	font-size: 12px;
	font-weight: 600;
	color: var(--brand-ink);
	cursor: pointer;
}

.personen__opnieuw:hover,
.personen__opnieuw:focus { color: var(--brand-hover); text-decoration: underline; }

/* In de regel "Zoeken lukte nu niet." staat de knop direct achter de tekst. */
.personen__leeg .personen__opnieuw { margin-left: 4px; }

/* Tijdens het opnieuw zoeken: de lijst gedimd, met de veeg van .blok-laadt.
   Staat het blok dat laadt er zelf al, dan niet nog een veeg eroverheen. */
.bd-personen__romp.is-bezig .persoon,
.bd-personen__romp.is-bezig .personen__leeg { opacity: .45; }
.bd-personen__romp.is-bezig .personen__opnieuw { pointer-events: none; color: var(--ink-faint); }

.bd-personen__romp.is-bezig .personen:not(:has(.blok-laadt))::after {
	content: "";
	position: absolute;
	top: 0; right: 0; bottom: 0; left: 0;
	transform: translateX(-100%);
	background: linear-gradient(90deg,
		transparent,
		color-mix(in srgb, var(--ink) 6%, transparent),
		transparent);
	animation: blok-veeg 1.4s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
	.bd-personen__romp.is-bezig .personen:not(:has(.blok-laadt))::after { animation: none; }
}

@media (max-width: 767px) {
	.bd-feiten--personen { grid-template-columns: 1fr; gap: 0; }
	.bd-feiten--personen .bd-feiten__kolom { gap: 0; }
	.bd-feiten__kolom + .bd-groep { border-top: 1px solid var(--line); }
	.bd-personen > .bd-groep__kop { align-items: center; }
	.bd-personen__bron { margin-right: 10px; }
	.persoon__bron { height: 36px; }
}

/* --- relatietype en tags --------------------------------------------------- */
/* Was .form-fixed met white-space: nowrap in een kolom van een kwart: 23 van de
   44 tagnamen pasten niet en je moest opzij scrollen om ze te lezen. */

/* Beide lijsten op dezelfde hoogte. Tags stond op 420 en gaat daarmee precies
   op de helft; relatietype heeft er acht en blijft met de krappere regels
   daaronder, dus die scrollt niet. */
.keuzelijst {
	display: block;
	max-height: 210px;
	overflow-y: auto;
	white-space: normal;
}

/* In een modal is er meer hoogte beschikbaar dan in het vak op de pagina.
   Deze regel stond eerder hoger in het bestand dan .keuzelijst hierboven en
   woog even zwaar, dus won de basisregel. Gemeten op 4 september 2026 kwam er
   210px uit in plaats van de bedoelde 50vh (374px), en was de modifier dus
   zonder werking. Hij hoort ná de basisregel te staan. */
.keuzelijst--modal { max-height: none; }

/* --- het keuzevak in een dialoog --------------------------------------------- *
 * Relatietype en tags kiezen op de bedrijfspagina, sinds 7 september 2026: de
 * lijst in een vak met rijen van 34 die in hun geheel klikken, bij de tags met
 * een zoekveld dat bovenin blijft staan. Dezelfde vorm als de vakken van
 * "Bedrijven indelen" en de filterdropdowns.
 */
.keuzevak {
	max-height: min(56vh, 380px);
	overflow-y: auto;
	padding: 4px;
	border: 1px solid var(--line);
	border-radius: 10px;
	background: var(--surface-raised);
}

.keuzevak .keuzelijst__regel {
	align-items: center;
	gap: 10px;
	min-height: 34px;
	padding: 0 8px;
	border-radius: 8px;
	font-size: 13.5px;
}

.keuzevak .keuzelijst__regel input { width: 16px; height: 16px; margin: 0; accent-color: var(--brand-solid); }
.keuzevak .keuzelijst__regel[hidden] { display: none; }


.keuzevak__zoek {
	position: sticky;
	top: 0;
	z-index: 1;
	display: block;
	width: 100%;
	height: 30px;
	margin: 0 0 4px;
	padding: 0 8px;
	border: 0;
	border-bottom: 1px solid var(--line);
	background: var(--surface-raised);
	font-size: 13px;
	color: var(--ink);
}

.keuzevak__zoek:focus { outline: none; border-bottom-color: var(--brand); }

.keuzevak__hint {
	margin: 10px 0 0;
	font-size: 12px;
	color: var(--ink-muted);
}

/* Onder de keuze in de dialogen voor relatietype en tags, als opslaan vanuit
   het paneel van het bedrijvenoverzicht niet lukt (party/kenmerkdialogen). */
.kenmerkdialoog__fout {
	margin: 12px 0 0;
	font-size: 13px;
}

/* --- het ontvangersveld met adresboek (adresboek.js) ------------------------
   De gekozen ontvangers als chips boven één invoerveld, en daaronder het
   adresboek: de collega's van het account en de adressen die je zelf bewaard
   hebt. Staat in de dialoog "Bezoekverslag mailen" en in de actie "E-mail
   bezoekrapport" van een trigger; daar kan een chip ook een webhook-url zijn,
   met een linkicoon ervoor in plaats van een naam. */

.ontvangers {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin-bottom: 8px;
}

.ontvangers[hidden] { display: none; }

.ontvanger-chip {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	max-width: 100%;
	height: 30px;
	padding: 0 4px 0 10px;
	background: var(--surface-raised);
	border: 1px solid var(--line-strong);
	border-radius: 8px;
	font-size: 13px;
	line-height: 1;
	color: var(--ink);
}

.ontvanger-chip__naam { font-weight: 600; }

.ontvanger-chip__icoon { flex: 0 0 auto; font-size: 12px; color: var(--brand-ink); }

.ontvanger-chip__adres {
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	font-size: 12px;
	color: var(--ink-muted);
}

.ontvanger-chip__weg {
	flex: 0 0 auto;
	width: 22px;
	height: 22px;
	padding: 0;
	background: none;
	border: 0;
	border-radius: 6px;
	font-size: 11px;
	color: var(--ink-muted);
	cursor: pointer;
}

.ontvanger-chip__weg:hover { background: var(--danger-tint); color: var(--danger); }

/* Een onafgemaakt adres oogt pas fout zodra je het veld verlaat of iets probeert
   dat er niet kan; tijdens het typen is elk half adres nu eenmaal nog half. */
.ontvangers__invoer.is-aangeraakt.is-fout,
.ontvangers__invoer.is-aangeraakt.is-fout:focus {
	border-color: var(--danger);
	box-shadow: 0 0 0 3px var(--danger-tint);
}

.mailboek { margin-top: 16px; }

.mailboek__kop {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 6px;
}

/* In de vorm van de veldlabels van de dialooglaag: het is de kop van het vak. */
.mailboek__titel {
	font-size: 10.5px;
	font-weight: 600;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--ink-faint);
}

.mailboek__bewaar {
	padding: 4px 10px;
	background: none;
	border: 1px solid var(--brand);
	border-radius: var(--radius);
	font-size: 12px;
	font-weight: 600;
	color: var(--brand-ink);
	cursor: pointer;
}

.mailboek__bewaar:hover { background: var(--brand-tint); }

.mailboek__waarschuwing {
	margin: 0 0 8px;
	padding: 7px 10px;
	background: var(--warn-tint);
	border: 1px solid var(--warn);
	border-radius: var(--radius);
	font-size: 12px;
	color: var(--ink);
}

.mailboek__wis {
	padding: 0;
	background: none;
	border: 0;
	font-size: inherit;
	color: var(--brand-ink);
	text-decoration: underline;
	cursor: pointer;
}

.mailboek__lijst {
	max-height: min(40vh, 240px);
	overflow-y: auto;
	padding: 0 0 4px;
	background: var(--surface-raised);
	border: 1px solid var(--line);
	border-radius: var(--radius);
}

/* Het zoekveld blijft bovenin staan terwijl de lijst eronder scrolt. */
.mailboek__zoek {
	position: sticky;
	top: 0;
	z-index: 1;
	display: block;
	width: 100%;
	height: 34px;
	margin: 0 0 4px;
	padding: 0 10px;
	background: var(--surface-raised);
	border: 0;
	border-bottom: 1px solid var(--line);
	border-radius: var(--radius) var(--radius) 0 0;
	font: inherit;
	font-size: 13px;
	color: var(--ink);
	outline: 0;
	-webkit-appearance: none;
}

.mailboek__zoek:focus { background: var(--surface-sunken); }

.mailboek__groep {
	margin: 6px 0 2px;
	padding: 0 10px;
	font-size: 10px;
	font-weight: 600;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--ink-muted);
}

.mailboek__groepcollegas[hidden],
.mailboek__groepbewaard[hidden] { display: none; }

.mailboek__regel {
	display: flex;
	align-items: center;
	gap: 4px;
	margin: 0 4px;
	border-radius: 6px;
}

.mailboek__regel[hidden] { display: none; }

.mailboek__regel:hover { background: var(--surface-hover); }

.mailboek__keuze {
	flex: 1 1 auto;
	display: flex;
	align-items: center;
	gap: 10px;
	min-width: 0;
	height: 34px;
	margin: 0;
	padding: 0 6px;
	font-size: 13px;
	font-weight: 400;
	cursor: pointer;
}

.mailboek__keuze input { flex: 0 0 auto; margin: 0; }

.mailboek__naam { flex: 0 0 auto; color: var(--ink); }

.mailboek__adres {
	flex: 1 1 auto;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	font-size: 12px;
	color: var(--ink-muted);
}

.mailboek__verwijder {
	flex: 0 0 auto;
	width: 24px;
	height: 24px;
	margin-right: 4px;
	padding: 0;
	background: none;
	border: 0;
	border-radius: var(--radius);
	font-size: 12px;
	color: var(--ink-muted);
	cursor: pointer;
}

.mailboek__verwijder:hover { background: var(--danger-tint); color: var(--danger); }

.mailboek__leeg,
.mailboek__dubbel,
.mailboek__geentreffer {
	margin: 0;
	padding: 6px 10px 4px;
	font-size: 12px;
	color: var(--ink-muted);
}

/* Deze krijgen hierboven een display, dus het hidden-attribuut moet het
   expliciet terugnemen. Tijdens het zoeken zwijgen de meldingen over het
   boekje: dan gaat het om wat er gevonden is. */
.mailboek__bewaar[hidden],
.mailboek__waarschuwing[hidden],
.mailboek__dubbel[hidden],
.mailboek__leeg[hidden],
.mailboek__geentreffer[hidden],
.mailboek__lijst.is-zoekend .mailboek__leeg,
.mailboek__lijst.is-zoekend .mailboek__dubbel { display: none; }

.keuzelijst__regel {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	margin: 0;
	padding: 2px 6px;
	border-radius: var(--radius);
	font-size: 13px;
	font-weight: 400;
	line-height: 1.25;
	cursor: pointer;
}

.keuzelijst__regel:hover { background: var(--surface-hover); }

.keuzelijst__regel input { flex: 0 0 auto; margin: 1px 0 0; }

/* Een regel met een relatietype: de tegel is 22 hoog, dus het vakje staat in
   het midden en niet bovenaan. */
.keuzelijst__regel--relatietype { align-items: center; }
.keuzelijst__regel--relatietype input { margin: 0; }
.keuzelijst__regel i     { flex: 0 0 auto; margin-top: 0; }
.keuzelijst__regel span  { min-width: 0; overflow-wrap: anywhere; }

/* De importwizard geeft elke stap een vak dat niet mee kan groeien: jquery-steps
   zet er min-height: 25em op en positioneert de stapinhoud daar absoluut in, dus
   de inhoud rekt het vak niet op. Tot 9 september 2026 stonden de keuzes daarom
   in twee kolommen (.keuzelijst__kolommen, column-count 2, in een lijst van
   340 hoog): gemeten op 4 september 2026 stonden de 46 tags onder elkaar 1060px
   hoog in een vak van 348px. Sinds de tags in de tagkiezer met een zoekveld
   staan, bleven alleen de acht relatietypen in die kolommen over, en de
   gebruiker wilde ze als in de relatietypedialoog: één per regel, in hetzelfde
   .keuzevak. De kolomregels zijn daarmee weg. */

/* jquery.steps.css zet elk label in een stap op inline-block met een marge
   eronder, met .wizard > .content > .body label, en dat weegt zwaarder dan
   .tagkiezer__rij. Gemeten op 9 september 2026: de tagrijen werden inline-block
   van 199 tot 246 breed en liepen als tekst door elkaar, terwijl dezelfde rijen
   in de tagdialoog flex, 525 breed en 34 hoog zijn. Vandaar deze twee regels
   met de langere selector, net als voor .keuzelijst__regel verderop; de tweede
   omdat de plug-in anders ook een weggefilterde rij weer toont. */
.wizard > .content > .body .tagkiezer__rij { display: flex; margin: 0; }
.wizard > .content > .body .tagkiezer__rij[hidden] { display: none; }

/* --- stap 2 en 3 van de importwizard: de keuzestappen -----------------------
   Beide stappen openden zonder een woord uitleg met een raster vinkjes, en er
   was niets dat liet zien wat je gekozen had behalve de vinkjes zelf. Er staat
   nu een vraag boven, een teller ernaast, en een gekozen regel licht op. Bij de
   tags — 46 stuks op 4 september 2026 — filtert een zoekveld mee.

   De lijst pakt met flex wat er onder de kop overblijft. */
.keuzestap {
	display: flex;
	flex-direction: column;
	height: 100%;
}

.keuzestap__kop {
	flex: 0 0 auto;
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 16px;
	margin-bottom: 12px;
}

.keuzestap__kop .import-intro__kop { margin-bottom: 4px; }

.keuzestap__hint {
	margin: 0;
	font-size: 12px;
	color: var(--ink-muted);
}

.keuzestap__teller {
	flex: 0 0 auto;
	padding: 3px 10px;
	border: 1px solid var(--line);
	border-radius: 999px;
	font-size: 12px;
	color: var(--ink-muted);
	white-space: nowrap;
}

.keuzestap__teller.is-actief {
	border-color: var(--brand);
	color: var(--brand-ink);
}

.keuzestap__zoek {
	position: relative;
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 10px;
}

.keuzestap__zoek > i {
	position: absolute;
	left: 11px;
	font-size: 12px;
	color: var(--ink-faint);
	pointer-events: none;
}

/* De lange selectors zijn nodig omdat jquery.steps.css elk input in de
   stapinhoud met .wizard > .content > .body naar zich toetrekt. */
.wizard > .content > .body .keuzestap__zoekveld {
	flex: 1 1 auto;
	display: block;
	width: 100%;
	min-width: 0;
	padding: 7px 10px 7px 31px;
	background: var(--surface);
	border: 1px solid var(--line-strong);
	border-radius: var(--radius);
	font-size: 13px;
	color: var(--ink);
}

.wizard > .content > .body .keuzestap__zoekveld:focus {
	border-color: var(--brand);
	outline: none;
	box-shadow: 0 0 0 3px var(--brand-ring);
}

.keuzestap__wis {
	flex: 0 0 auto;
	padding: 0;
	background: none;
	border: 0;
	font-size: 12px;
	color: var(--ink-muted);
	text-decoration: underline;
	cursor: pointer;
}

.keuzestap__wis:hover { color: var(--brand-ink); }
.keuzestap__wis[hidden] { display: none; }

/* In een stap scrolt precies één element, en dat krijgt zijn hoogte van het
   vak: het keuzevak van de relatietypen, en in de tagstap de lijst van de
   tagkiezer, via het formulier en de kiezer als flexkinderen met min-height 0
   (dezelfde keten als .indeelmodal__vak). Tot 9 september 2026 had de lijst
   een eigen max-height van 306px en "regelde de tagkiezer zijn hoogte zelf":
   gemeten op die dag vroeg de stap daarmee 434px in een vak van 358, dus
   scrolde het vak én de lijst erin. Zonder dat getal is de lijst 230 hoog. */
.keuzestap .keuzevak,
.keuzestap .tagkiezer {
	flex: 1 1 auto;
	min-height: 0;
	max-height: none;
}

.keuzestap__kiezer {
	flex: 1 1 auto;
	min-height: 0;
	display: flex;
	flex-direction: column;
}

.keuzestap .tagkiezer__lijst {
	flex: 1 1 auto;
	min-height: 0;
	max-height: none;
}

.keuzelijst__regel.is-gekozen,
.keuzelijst__regel.is-gekozen:hover { background: var(--brand-tint); }

/* Even lang als de regel die display: flex zet, plus de klasse: anders wint de
   label-regel van de plug-in en blijft een weggefilterde tag gewoon staan. */
.wizard > .content > .body .keuzelijst__regel.is-verborgen { display: none; }

/* jquery.steps.css zet elk label in een stap op inline-block met een marge
   eronder, en doet dat met .wizard > .content > .body label. Dat weegt zwaarder
   dan .keuzelijst__regel, dus zonder deze regel schuiven twee korte tagnamen
   naast elkaar op dezelfde regel in plaats van onder elkaar. Vandaar de lange
   selector: hij moet die van de plug-in overtreffen. */
.wizard > .content > .body .keuzelijst__regel {
	display: flex;
	margin-bottom: 0;
}

/* --- de zoomknoppen op de kaart --------------------------------------------- */

#customZoom { z-index: 1001; position: relative; top: 10px; float: right; left: -32px; }

#customZoom a {
	text-decoration: none;
	position: absolute;
	display: block;
	width: 25px; height: 25px;
	line-height: 25px;
	text-align: center;
	font-weight: 600;
	color: var(--ink);
	background: var(--surface);
	border: 1px solid var(--line-strong);
	border-radius: var(--radius);
}

#customZoomOut { top: 30px; }


/* --- de bezoeken ----------------------------------------------------------- *
 * Per dag een kopje, per bezoek een kaart met de pagina's eronder; de eerste
 * drie staan open, de rest zit achter "nog n pagina's tonen" (bezoeken.js).
 * Sinds 9 september 2026. De tijdlijn die hier stond (een rail met bolletjes,
 * elke sessie met al zijn pagina's uitgeschreven) was bij vijftien sessies
 * 6.632 pixel hoog.
 */

.bezoeken__dag {
	margin: 0 0 6px;
	font-size: 13px;
	font-weight: 600;
	color: var(--ink);
}

.bezoek + .bezoeken__dag { margin-top: 18px; }
.bezoeken__dag small { margin-left: 8px; font-size: 12px; font-weight: 500; color: var(--ink-faint); }
.bezoeken__leeg { margin: 0; font-size: 13px; color: var(--ink-muted); }

.bezoek {
	border: 1px solid var(--line);
	border-radius: 12px;
	background: var(--surface);
	overflow: hidden;
}

.bezoek + .bezoek { margin-top: 10px; }

.bezoek__kop {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 12px 14px;
}

/* Het icoon in een tegel uit het datapalet, per bezoek van die dag de
   volgende kleur; dezelfde tegels als de kenmerken en het zijmenu. */
.bezoek__icoon {
	flex: 0 0 auto;
	display: grid;
	place-items: center;
	width: 34px; height: 34px;
	border-radius: 10px;
	font-size: 15px;
	color: var(--on-data);
}

.bezoek__icoon--1 { background: var(--data-1); }
.bezoek__icoon--2 { background: var(--data-2); }
.bezoek__icoon--3 { background: var(--data-3); }
.bezoek__icoon--4 { background: var(--data-4); }
.bezoek__icoon--5 { background: var(--data-5); }

.bezoek__tekst { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }

/* Tijd en duur als rij met een tussenruimte in plaats van een marge, zodat
   de duur als geheel naar de volgende regel gaat, zonder in te springen en
   niet na het getal: nagerekend op 28 september 2026 voor een telefoon van
   375 breed, waar "16:37 43 min" naast de recordingknop 89px nodig had en
   84px kreeg. */
.bezoek__tijd {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	column-gap: 6px;
	font-size: 14px;
	font-weight: 600;
	color: var(--ink);
}

.bezoek__tijd time { font-variant-numeric: tabular-nums; }

.bezoek__tijd small {
	font-family: var(--font-mono);
	font-size: 12px;
	font-weight: 500;
	color: var(--ink-muted);
	white-space: nowrap;
}

.bezoek__bij {
	font-size: 12px;
	color: var(--ink-muted);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.bezoek__cijfers { flex: 0 0 auto; display: flex; align-items: center; gap: 6px; }

.pil {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	height: 24px;
	padding: 0 9px;
	border-radius: 999px;
	background: var(--surface-sunken);
	border: 1px solid var(--line);
	font-size: 12px;
	font-weight: 600;
	color: var(--ink-muted);
	white-space: nowrap;
	text-decoration: none;
}

.pil--mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.pil--opname { background: var(--brand-tint); border-color: transparent; color: var(--brand-ink); }

/* De knop naar de recording: gevuld in het merkblauw, hoger dan de pillen en
   een stapje ervan af, zodat hij als handeling leest en niet als nog een
   cijfer. Gekozen uit een mockup op 28 september 2026. */
.bezoek__opname {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	height: 30px;
	margin-left: 4px;
	padding: 0 13px 0 7px;
	border-radius: 999px;
	background: var(--brand-solid);
	color: var(--on-brand);
	font-size: 12.5px;
	font-weight: 600;
	white-space: nowrap;
	text-decoration: none;
	box-shadow: 0 2px 6px -2px rgba(11, 124, 181, .55);
	transition: background-color .12s ease;
}

.bezoek__opname:hover,
.bezoek__opname:focus { background: var(--brand-solid-hover); color: var(--on-brand); text-decoration: none; }
.bezoek__opname .fa { font-size: 18px; }

/* de pagina's */

.bezoek__paginas {
	margin: 0;
	padding: 4px 14px 10px 60px;
	list-style: none;
	border-top: 1px solid var(--line);
}

.bezoek__pagina + .bezoek__pagina { border-top: 1px dashed var(--line); }
.bezoek__pagina[hidden] { display: none; }

.bezoek__regel {
	display: grid;
	grid-template-columns: 62px 58px minmax(0, 1fr) auto;
	gap: 0 12px;
	align-items: baseline;
	padding: 6px 0;
	font-size: 13px;
}

.bezoek__regel time,
.bezoek__duur,
.bezoek__ip {
	font-family: var(--font-mono);
	font-variant-numeric: tabular-nums;
	font-size: 12px;
	color: var(--ink-muted);
	white-space: nowrap;
}

.bezoek__duur { text-align: right; }
.bezoek__inhoud { min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.bezoek__titel { font-weight: 500; color: var(--ink); overflow-wrap: anywhere; }

/* De url loopt door op de volgende regel; afkappen deed dat gegeven tekort. */
.bezoek__url { font-size: 11.5px; color: var(--ink-faint); overflow-wrap: anywhere; word-break: break-word; }
a.bezoek__url:hover, a.bezoek__url:focus { color: var(--brand-ink); }

.bezoek__gebeurtenissen {
	margin: 2px 0 4px;
	padding: 0 0 0 14px;
	list-style: none;
	border-left: 1px dashed var(--line-strong);
}

.bezoek__gebeurtenissen li {
	display: grid;
	grid-template-columns: 62px 58px minmax(0, 1fr);
	gap: 0 12px;
	padding: 3px 0;
	font-size: 11.5px;
	color: var(--ink-muted);
}

.bezoek__toon { padding: 6px 0 0; }

.bezoek__meer {
	padding: 0;
	border: none;
	background: none;
	font: inherit;
	font-size: 12.5px;
	font-weight: 600;
	color: var(--brand-ink);
	cursor: pointer;
}

.bezoek__meer:hover,
.bezoek__meer:focus { text-decoration: underline; outline: none; }

/* telefoon: geen cijferpillen (de regel eronder zegt hetzelfde), wel de
   recording, als tikdoel van 44 hoog; de duur rechts van de titel, en de url
   op één regel afgekapt; een tik op de regel zet hem voluit (is-open,
   bezoeken.js). */
@media (max-width: 767px) {
	.bezoek__cijfers .pil--mono { display: none; }
	.bezoek__opname { height: 44px; padding: 0 15px 0 11px; }
	.bezoek__paginas { padding-left: 14px; }
	/* Vier cellen, elk op zijn plek gezet: tijd, titel met url, duur op de
	   eerste regel, en het ip-adres (alleen voor de kantooradressen) eronder
	   naast de tijdkolom. Automatisch plaatsen zette de duur, die in de html
	   vóór de titel staat, achter het ip-adres op een derde regel en maakte
	   een rij 90 hoog (gemeten op 9 september 2026). */
	.bezoek__regel { grid-template-columns: 56px minmax(0, 1fr) 52px; }
	.bezoek__regel > time { grid-column: 1; grid-row: 1; }
	.bezoek__inhoud { grid-column: 2; grid-row: 1; }
	.bezoek__duur { grid-column: 3; grid-row: 1; }
	.bezoek__ip { grid-column: 2 / -1; grid-row: 2; }
	.bezoek__titel { font-size: 14px; }
	/* Een knop van 19 hoog is geen tikdoel; 44, net als de rest op een telefoon. */
	.bezoek__meer { display: inline-flex; align-items: center; min-height: 44px; }

	.bezoek__url {
		display: block;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		overflow-wrap: normal;
		word-break: normal;
	}

	.bezoek__pagina.is-open .bezoek__url { white-space: normal; overflow: visible; overflow-wrap: anywhere; }
	.bezoek__gebeurtenissen li { grid-template-columns: 56px 52px minmax(0, 1fr); }
}


/* --- vestigingen en concernrelaties ---------------------------------------- *
 * Eén kaart per dossier, gedeeld door beide popups. Stond eerder als een rij
 * met een icoon van 56 pixels ernaast, lijsten met inline opmaak, een ul in een
 * p, en een <hr> tussen de kaarten. De popupinhoud stond bovendien op
 * white-space: nowrap met overflow-x: hidden, dus een lang adres liep zonder
 * aankondiging buiten beeld.
 */

.dossierlijst { display: flex; flex-direction: column; gap: 12px; }

.dossierkaart {
	padding: 14px 16px;
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--radius);
}

.dossierkaart--opgeheven { opacity: .75; }

.dossierkaart__kop {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 6px 10px;
	margin-bottom: 8px;
}

.dossierkaart__kop h3 {
	margin: 0;
	font-size: 15px;
	font-weight: 600;
	color: var(--ink);
	overflow-wrap: anywhere;
}

.dossierkaart__nummer {
	font-size: 12px;
	font-variant-numeric: tabular-nums;
	color: var(--ink-muted);
}

.dossierkaart__merk {
	margin-left: auto;
	padding: 2px 9px;
	border: 1px solid var(--line-strong);
	border-radius: 999px;
	font-size: 11px;
	font-weight: 600;
	color: var(--ink-muted);
	white-space: nowrap;
}

.dossierkaart__merk--hoofd { border-color: var(--brand); color: var(--brand-ink); }
.dossierkaart__merk--opgeheven { border-color: var(--danger); color: var(--danger); }

.dossierkaart__handelsnaam {
	margin: 0 0 10px;
	font-size: 12px;
	color: var(--ink-muted);
}

.dossierkaart__regels { margin: 0; }

.dossierkaart__regel {
	display: flex;
	gap: 12px;
	padding: 4px 0;
	border-top: 1px solid var(--line);
	font-size: 13px;
}

.dossierkaart__regel:first-child { border-top: none; }

.dossierkaart__regel dt {
	flex: 0 0 116px;
	margin: 0;
	font-weight: 400;
	color: var(--ink-muted);
}

.dossierkaart__regel dt i { color: var(--ink-faint); }

.dossierkaart__regel dd {
	flex: 1 1 auto;
	min-width: 0;
	margin: 0;
	color: var(--ink);
	overflow-wrap: anywhere;   /* een lang adres liep hiervoor buiten beeld */
}

.dossierkaart__peil {
	margin-left: 6px;
	font-size: 11px;
	color: var(--ink-muted);
}

.dossierkaart__activiteit {
	display: inline-block;
	margin: 0 6px 3px 0;
}

.dossierkaart__activiteit b {
	margin-left: 3px;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	color: var(--ink-muted);
}

.dossier-leeg { margin: 0; font-size: 13px; color: var(--ink-muted); }


/* --- modalkoppen ----------------------------------------------------------- *
 * De branding zet op elke modalkop een blauwe balk met verloop, witte tekst en
 * een tekstschaduw. Wit op dat blauw haalt 3,15 in het lichte thema en 4,27 in
 * het donkere, terwijl een titel van 18 pixels er 4,5 nodig heeft.
 *
 * De overschrijving staat hier en niet in branding-salesfeed.css. Elk merk
 * heeft een eigen brandingbestand en theme.css laadt daarna; zo blijft de
 * huisstijl zelf onaangeroerd en geldt dit voor alle drie de merken.
 */

/* --- de gedeelde dialooglaag ----------------------------------------------- *
 * Eén set regels voor de kop, de romp en de voet van elke dialoog, sinds
 * 7 september 2026: de veertig modals in de views en de vijfendertig
 * bootbox-dialogen (die bouwen gewone bootstrap-modals) krijgen zo dezelfde
 * vorm als "Bedrijven indelen" en de actiemodal, zonder per dialoog werk.
 * De kop: titel 17 in gewicht 600, eronder eventueel .modal-sub in gedempte
 * tekst, het kruisje los in de hoek. De romp: labels in kleine kapitalen,
 * velden van 36 met hoeken van 8. De voet: de knoppen in de vorm van de
 * hero's, annuleren omlijnd, de hoofdknop vol, verwijderen rood.
 *
 * Wat hier niet in zit en apart komt: de vinklijsten op de bedrijfspagina,
 * de koppeltegels van een nieuwe interface, het bezoekverslag mailen en de
 * licentiedialoog -- die zitten van binnen anders in elkaar.
 */

.modal-header {
	position: relative;
	padding: 18px 24px 14px;
	background-color: var(--surface-sunken);
	background-image: none;
	border-bottom: 1px solid var(--line);
	border-radius: var(--radius-lg) var(--radius-lg) 0 0;
	color: var(--ink);
	text-shadow: none;
}

/* Het kruisje los in de hoek, zodat het de titel niet smaller drukt. */
.modal-header .close,
.bootbox .modal-body .bootbox-close-button {
	position: absolute;
	top: 14px;
	right: 18px;
	float: none;
	margin: 0;
	font-size: 20px;
	line-height: 1;
	color: var(--ink-muted);
	opacity: 1;
	text-shadow: none;
}

.modal-header .close:hover,
.modal-header .close:focus,
.bootbox .modal-body .bootbox-close-button:hover { color: var(--ink); opacity: 1; }

.modal-title {
	margin: 0;
	color: var(--ink);
	font-size: 17px;
	font-weight: 600;
	letter-spacing: -.01em;
	line-height: 1.3;
}

.modal-sub {
	margin: 4px 0 0;
	font-size: 12.5px;
	font-weight: 400;
	letter-spacing: 0;
	color: var(--ink-muted);
}

/* Een tegel voor de titel van elke modal: het icoon zegt wat de dialoog doet,
   de kleur wat het gevolg is. Vier soorten, de kleur van de soort op zijn
   eigen tint, dezelfde paren als de statuslabels, in de vorm van de tegels in
   de kopbalk. De view zegt zelf welke (ModalHelper::tegel in php, Modal.tegel
   in script.js voor een bootbox); niets wordt uit de titel afgeleid. Mockup
   "Tegels op modals", 9 september 2026.

   De eerste twee waren de upgrade-dialoog (element/dialog) en de melding in
   de Liquid-editor (propertyeditor, showdialog zet de soort). Tot 9 september
   2026 droegen die bootstrap's panel-success of panel-warning met een kop die
   ook panel-heading was; .panel-success > .panel-heading (0,2,0) won dan van
   .modal-header en kleurde de kop lichtgroen, terwijl .modal-title de
   inktkleur hield. Gemeten die dag: contrast 1,02 in het donkere thema, de
   titel was onzichtbaar. */
.modal-header--tegel {
	display: flex;
	align-items: center;
	gap: 12px;
	padding-right: 56px;
}

.modal-tegel {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	border-radius: 8px;
	background: var(--tegel-tint);
	color: var(--tegel-kleur);
	font-size: 15px;
}

.modal-tegel--maken  { --tegel-kleur: var(--brand-ink); --tegel-tint: var(--brand-tint); }
.modal-tegel--weg    { --tegel-kleur: var(--danger);    --tegel-tint: var(--danger-tint); }
.modal-tegel--gevolg { --tegel-kleur: var(--warn);      --tegel-tint: var(--warn-tint); }
.modal-tegel--goed   { --tegel-kleur: var(--ok);        --tegel-tint: var(--ok-tint); }

/* In een bootbox bouwt de plug-in de kop zelf, dus daar staat de tegel in de
   titel (h4) in plaats van ernaast; dan is hij inline en houdt hij zelf de
   afstand tot de tekst. */
.modal-title > .modal-tegel { vertical-align: middle; margin-right: 12px; }

/* --- de upgrade-dialoog (element/dialog) ------------------------------------
   De melding van de server in een amber vlak, één zin, en twee vakken: bellen
   en aanvragen. Na het versturen wordt het tweede vak groen met een vinkje;
   de knop maakt plaats voor "Aanvraag verstuurd". Sinds 9 september 2026. */
.upgrade__melding {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	margin: 0 0 16px;
	padding: 12px 14px;
	border-radius: 10px;
	background: var(--warn-tint);
	color: var(--ink);
}

.upgrade__melding > i { flex: 0 0 auto; width: 22px; margin-top: 1px; text-align: center; font-size: 15px; color: var(--warn); }
.upgrade__melding .message { margin: 0; min-width: 0; overflow-wrap: anywhere; }

.upgrade__lead { margin: 0; font-size: 14.5px; color: var(--ink); }

.upgrade__wegen {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 12px;
	margin-top: 16px;
}

.upgrade__weg {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 10px;
	padding: 14px 16px;
	border: 1px solid var(--line);
	border-radius: 12px;
	background: var(--surface-sunken);
}

.upgrade__tegel {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border-radius: 11px;
	background: var(--brand-tint);
	color: var(--brand-ink);
	font-size: 18px;
}

.upgrade__wat { margin: 0; font-size: 12.5px; line-height: 1.35; color: var(--ink-muted); }

.upgrade__nummer {
	font-size: 18px;
	font-weight: 600;
	letter-spacing: -.01em;
	color: var(--ink);
	text-decoration: none;
}

.upgrade__nummer:hover, .upgrade__nummer:focus { color: var(--brand-ink); text-decoration: none; }

.upgrade__weg .btn.upgrade__knop {
	display: inline-flex;
	align-items: center;
	height: 36px;
	margin-top: 2px;
	padding: 0 16px;
	border-color: transparent;
	border-radius: 10px;
	font-size: 13px;
	font-weight: 600;
	box-shadow: 0 4px 12px -5px rgba(11, 124, 181, .7);
}

.upgrade__verstuurd { margin: 0; font-size: 13px; font-weight: 600; line-height: 1.35; color: var(--ink); }
.upgrade__fout { margin: 0; font-size: 12.5px; color: var(--danger); }
.upgrade__fout[hidden] { display: none; }

/* De twee standen van het tweede vak: de envelop met de knop, of het vinkje
   met de bevestiging. */
.upgrade__vink,
.upgrade__weg.is-verstuurd .upgrade__envelop,
.upgrade__verstuurd,
.upgrade__weg.is-verstuurd .upgrade__knop { display: none; }
.upgrade__weg.is-verstuurd .upgrade__vink,
.upgrade__weg.is-verstuurd .upgrade__verstuurd { display: block; }
.upgrade__weg.is-verstuurd { border-color: var(--ok); }
.upgrade__weg.is-verstuurd .upgrade__tegel { background: var(--ok-tint); color: var(--ok); }

@media (max-width: 480px) {
	.upgrade__wegen { grid-template-columns: 1fr; }
}

/* Geen overflow: hidden hier — dat zou een datumkiezer of dropdown binnen de
   modal afknippen. De kop krijgt zijn eigen afronding. */
.modal-content {
	border: 1px solid var(--line);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-lg);
}

.modal-body { padding: 18px 24px 16px; }

/* Een bootbox zonder titel: het kruisje staat dan in de romp, en de tekst
   moet er niet onder schuiven. */
.bootbox .modal-body { padding-right: 48px; }
.bootbox .modal-header + .modal-body { padding-right: 24px; }

/* De veldlabels in kleine kapitalen; een label om een vinkje of schakelaar
   is de optie zelf en blijft gewone tekst (zie de uitzonderingen eronder). */
.modal-body .form-group > label,
.modal-body .kenmerkform label {
	display: block;
	margin: 0 0 6px;
	font-size: 10.5px;
	font-weight: 600;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--ink-faint);
}

.modal-body .kenmerkform__staat label,
.modal-body .kenmerkform__dagen label,
.modal-body .checkbox label,
.modal-body .radio label {
	display: inline;
	margin: 0;
	font-size: 13.5px;
	font-weight: 400;
	letter-spacing: 0;
	text-transform: none;
	color: var(--ink);
}

.modal-body .form-control {
	height: 36px;
	border-radius: 8px;
}

.modal-body textarea.form-control { height: auto; }

.modal-footer {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 10px;
	padding: 14px 24px;
	background-color: var(--surface-sunken);
	border-top: 1px solid var(--line);
	border-radius: 0 0 var(--radius-lg) var(--radius-lg);
}

.modal-footer .btn,
.modal-footer .btn + .btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	height: 36px;
	margin: 0;
	padding: 0 16px;
	border-radius: 10px;
	font-size: 13px;
	font-weight: 600;
}

.modal-footer .btn-default { background: transparent; border-color: var(--line-strong); color: var(--ink); }
.modal-footer .btn-default:hover,
.modal-footer .btn-default:focus { background: var(--surface-sunken); }

.modal-footer .btn-primary {
	border-color: transparent;
	box-shadow: 0 4px 12px -5px rgba(11, 124, 181, .7);
}

.modal-footer .btn-danger { border-color: transparent; }


/* --- bedrijf niet gevonden (party/nietgevonden) -----------------------------
   Op een telefoon passen de twee knoppen niet naast elkaar; daar staan ze
   onder elkaar over de volle breedte, de hoofdknop bovenaan. Gemeten op
   28 september 2026 op crm-dev: de clearfix van bootstrap op .modal-footer
   telt in de flexbox mee als twee lege items, en gestapeld gaf dat boven en
   onder tien pixels extra; daarom gaat hij hier weg. Mockup "Bedrijf niet
   gevonden", 28 september 2026. */
@media (max-width: 480px) {
	.nietgevonden .modal-footer { flex-direction: column-reverse; align-items: stretch; }
	.nietgevonden .modal-footer::before,
	.nietgevonden .modal-footer::after { content: none; }
	.nietgevonden .modal-footer .btn { justify-content: center; height: 44px; }
}


/* --- de kaart in de vestigingen-popup -------------------------------------- */

.kaartvak {
	margin-bottom: 14px;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	overflow: hidden;
}

.streetmap {
	position: relative;
	z-index: 0;
	width: 100%;
	height: 300px;
}


/* --- de kredietscore ------------------------------------------------------- *
 * Een omlijnde pil met het icoon en de korte omschrijving, in de kleur van het
 * niveau: goed of gevaar, uit de statustokens. Niveau, icoon en tekst komen
 * uit PartyHelper::kredietscore(); op de bedrijfspagina staat de pil in de
 * regel onder de naam.
 */

.kredietscore {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 3px 10px 3px 8px;
	border: 1px solid var(--line-strong);
	border-radius: 999px;
	background: var(--surface);
	font-size: 12px;
	font-weight: 600;
	line-height: 1;
	white-space: nowrap;
	color: var(--ink);
}

.kredietscore i { font-size: 13px; }

.kredietscore--goed         { border-color: var(--ok);     background: var(--ok-tint); }
.kredietscore--goed i       { color: var(--ok); }

.kredietscore--gevaar       { border-color: var(--danger); background: var(--danger-tint); }
.kredietscore--gevaar i     { color: var(--danger); }

/* Alleen het icoon, in de klassieke bedrijventabel: de kleur van het niveau,
   de betekenis in de title. Niveau en icoon komen uit
   PartyHelper::kredietscore(). */
.kredietscore__icoon--goed         { color: var(--ok); }
.kredietscore__icoon--gevaar       { color: var(--danger); }


/* --- meldingen ------------------------------------------------------------- *
 * bootstrap-notify geeft de melding de klassen col-xs-11 col-sm-4, bedoeld voor
 * een rasterkolom. Als zwevend element levert dat een float en een percentage
 * op waar je hier niets aan hebt.
 */

[data-notify="container"] {
	float: none;
	width: auto;
	min-width: 240px;
	max-width: 420px;
	padding: 12px 34px 12px 16px;
	border-radius: var(--radius);
	box-shadow: var(--shadow-lg);
	font-size: 13px;
	line-height: 1.45;
}

[data-notify="container"] .close {
	top: 8px;
	right: 10px;
	font-size: 18px;
}

[data-notify="title"]:empty { display: none; }

/* Eigen animaties. bootstrap-notify verwacht animate.css, en dat wordt hier
   niet geladen; zonder animatie wacht het sluiten op een animationend die
   nooit komt en valt het na 600 ms terug op weghalen. De melding bleef daardoor
   nog ruim een halve seconde roerloos staan voordat hij verdween. */
@keyframes melding-in {
	from { opacity: 0; transform: translateY(-8px); }
	to   { opacity: 1; transform: none; }
}

@keyframes melding-uit {
	from { opacity: 1; transform: none; }
	to   { opacity: 0; transform: translateY(-8px); }
}

.melding-in  { animation: melding-in .16s ease-out; }
.melding-uit { animation: melding-uit .24s ease-in forwards; }

@media (prefers-reduced-motion: reduce) {
	.melding-in  { animation-duration: .01s; }
	.melding-uit { animation-duration: .01s; }
}


/* --- het zijmenu ----------------------------------------------------------- *
 * Compacter dan het was. De items waren 61 pixels hoog met een icoon van 28, en
 * boven de lijst stond 56 pixels loze ruimte; met elf modules liep het menu tot
 * onder de vouw. Sinds instellingen en gebruikers naar het menu rechtsboven
 * zijn verhuisd staan er negen, en die passen nu ruim.
 */

/* Het merkblok lijnt met de balk rechts ervan: allebei --kopbalk-hoogte, zodat
   hun onderranden doorlopen als één lijn over de hele breedte van het scherm.

   Gemeten op 3 september 2026 stond het blok op 62,75px tegen een balk van 58 --
   4,75px verschil, net genoeg om te zien dat het niet klopt en te weinig om te
   zien waaraan. De hoogte kwam nergens vandaan: ze was de optelsom van de
   binnenruimte en wat er toevallig in stond. */
.modulemenu__merk {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: center;
	min-height: var(--kopbalk-hoogte);
	/* Links op 21px: daar beginnen de iconen van het menu eronder ook
	   (10px binnenruimte van #modulemenu plus 11 van het item), zodat logo,
	   account en iconen op één lijn staan. */
	padding: 0 12px 0 21px;
	text-align: left;
	/* Sinds 6 september 2026 het linkeruiteinde van de kleurbalk: de
	   beginkleur van het verloop dat de balk rechts ervan draagt (zie
	   --balk bovenaan), zonder onderrand, met witte tekst. */
	background: var(--balk-start);
	color: var(--on-balk);
}

/* Alleen het woordmerk in de band, links op 21 en verticaal in het midden,
   sinds 9 september 2026; het account-id en de licentie staan eronder (zie
   .modulemenu__accountregel). Tot dan stonden ze mét het logo in de band:
   sinds 6 september 2026 als kolom links uitgelijnd, eerder die dag even als
   rij (logo links, tekst ernaast), en daarvoor gecentreerd.

   Het logo is van zichzelf 313 bij 45. Op de 78 breed van de oude rij was het
   11px hoog; met de tekst erbij paste 120 (17 hoog) in de 62 van de band, en
   alleen kan het op 150, dat is 22 hoog. */
.modulemenu__merk img { flex: 0 0 auto; width: 150px; }

/* Het logo wijst sinds 11 september 2026 naar het welkomstscherm. De link is
   precies zo groot als de afbeelding, zodat er in de band niets verschuift, en
   hij verkleurt licht bij hover zodat je ziet dat er iets te klikken valt. */
.modulemenu__merklink {
	display: inline-flex;
	border-radius: 4px;
	transition: opacity .12s ease;
}

.modulemenu__merklink:hover { opacity: .85; }

.modulemenu__merklink:focus-visible {
	outline: 2px solid var(--on-balk);
	outline-offset: 3px;
}

/* Het account-id en de licentie staan sinds 9 september 2026 niet meer in de
   band maar als één regel eronder, in gedempte tekst boven het menu; de
   gebruiker koos die vorm uit vijf (mockup "Merkblok linksboven", variant 2).
   Daarvoor stonden ze in de band onder het logo, in 10 en 9px wit.

   Wat niet past wordt afgekapt in plaats van afgebroken. Hier stond ooit
   word-break: break-all voor het account-id (een lang aaneengesloten woord),
   maar dat brak ook de licentienaam midden in een woord af -- gemeten op
   3 september 2026 werd "Partner Enterprise Onbeperkt" "Onb / eperkt" -- en
   liet het blok meegroeien (van 63 naar 76px), waarmee het menu verschoof.
   Met afkappen blijft de regel op zijn maat, wat er ook in staat. De
   volledige waarde blijft bereikbaar: als title op dit element, en voluit in
   het accountmenu rechtsboven (.accountkop__account). */
.modulemenu__accountregel {
	margin: 10px 21px 0;
	font-size: 11px;
	line-height: 1.3;
	color: var(--ink-muted);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.modulemenu__punt { margin: 0 4px; color: var(--ink-faint); }

/* 8 en niet 12: de accountregel erboven brengt zelf al 10 mee. */
#modulemenu {
	margin-top: 8px;
	padding: 0 10px;
}

/* Elk item draagt de kleur van zijn module als --kleur, gezet in
   modulemenu.blade.php uit module.primarycolor. De terugval hier is neutraal,
   voor een module zonder geldige kleur: liever grijs dan de kleur van een
   andere module. */
#modulemenu > li { margin: 0; --kleur: var(--ink-faint); }
#modulemenu.nav-stacked > li + li { margin-top: 3px; }

/* Het menu sinds 6 september 2026: het icoon in een tegel van 30 in volle
   kleur, het label ernaast met hoofdletter in --ink, en een actieve regel met
   verloop en streep. Eerder die dag stond het label al naast het icoon (tot
   dan eronder, in 10px, met een icoon van 28 en items van 61 hoog), maar in
   een gedempt grijs zonder actieve stand -- de gebruiker vond het saai en
   kleurloos en koos, na twee previews in de pagina, deze volle kleuren boven
   tinten van 16%, en geen groepskopjes.

   De .nav erbij is nodig: bootstrap.css zet `#modulemenu.nav > li > a { padding: 3px }`
   en `#modulemenu li { text-align: center }`, en dat weegt een klasse zwaarder
   dan `#modulemenu > li > a`. De regels #sidebar-left a en :hover eerder in
   dit bestand (--ink-muted, --brand-tint) wegen minder en verliezen hier. */
#modulemenu.nav > li > a,
#modulemenu.nav > li.disabled {
	display: flex;
	align-items: center;
	gap: 11px;
	padding: 6px 9px;
	border-radius: 10px;
	text-align: left;
	color: var(--ink);
	font-size: 13.5px;
	font-weight: 500;
	letter-spacing: .005em;
	transition: background-color .12s ease;
}

#modulemenu.nav > li > a:hover,
#modulemenu.nav > li > a:focus {
	background: color-mix(in srgb, var(--kleur) 12%, var(--surface));
	color: var(--ink);
}

#modulemenu.nav > li > a:hover .menu__icoon { transform: scale(1.06); }

/* De tegel: de kleur zelf als vlak, het icoon in --on-data (wit op licht,
   donker op de heldere donker-thema-varianten -- wit op het donkere amber
   haalt 1,6), en een zweem schaduw in dezelfde kleur eronder. */
#modulemenu .menu__icoon {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	border-radius: 9px;
	background: var(--kleur);
	color: var(--on-module);
	box-shadow: 0 3px 8px -3px color-mix(in srgb, var(--kleur) 70%, transparent);
	transition: transform .12s ease;
}

#modulemenu .menu__icoon i { width: auto; font-size: 16px; line-height: 1; }

/* De naam komt sinds 14 oktober 2026 uit module.friendlyname, met de
   hoofdletters zoals ze daar staan ("Liquid Content"). Daarvoor was het
   module.name ("liquidcontent") met text-transform: capitalize. */
#modulemenu .menu__naam {
	min-width: 0;
	line-height: 1.2;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

#modulemenu.nav > li.menu--actief > a {
	background: linear-gradient(90deg,
		color-mix(in srgb, var(--kleur) 22%, var(--surface)),
		color-mix(in srgb, var(--kleur) 6%, var(--surface)));
	color: var(--ink);
	font-weight: 600;
	box-shadow: inset 3px 0 0 var(--kleur);
}

#modulemenu.nav > li.menu--actief .menu__icoon {
	box-shadow: 0 4px 12px -3px color-mix(in srgb, var(--kleur) 85%, transparent);
}

@media (prefers-reduced-motion: reduce) {
	#modulemenu .menu__icoon,
	#modulemenu.nav > li > a { transition: none; }
	#modulemenu.nav > li > a:hover .menu__icoon { transform: none; }
}

/* Een module zonder rechten blijft zichtbaar maar is duidelijk niet aan te
   klikken: grijze tegel, gedempt label. --ink-faint mag hier: het gaat om een
   bewust gedempt item, en het haalt tegen het zijmenu nog 4,6. */
#modulemenu > li.disabled {
	color: var(--ink-faint);
	cursor: not-allowed;
}

#modulemenu > li.disabled .menu__icoon {
	background: var(--line-strong);
	color: var(--surface);
	box-shadow: none;
}


/* --- bubbels op het bezoekersscherm --------------------------------------- *
 * De kleuren stonden hard in visitor/bubbles.js: lightblue, lightgray, orange,
 * #ccd, #47ef47 en een rand van 2px solid white. Gemeten op 31 augustus 2026
 * veranderde daar in het donkere thema niets aan, dus veertien witte ringen op
 * een achtergrond van #10141a. De JS zet nu alleen nog een klasse; de kleur
 * komt hiervandaan en volgt daarmee het thema.
 */

.bubble {
	border: 2px solid var(--surface-sunken);
	color: var(--bubbel-ink);
	background: var(--bubbel-stil);
}

.bubble--actief   { background: var(--bubbel-actief); }

/* Actief tegenover stil haalde 1,04 contrast in het lichte thema, gemeten op
 * 31 augustus 2026: alleen de tint verschilde. Twee lichte vullingen kunnen dat
 * verschil ook niet dragen -- ze moeten allebei licht blijven omdat er logo's
 * op staan -- dus draagt een ring het. Stil is omlijnd, actief is dicht; dat is
 * hetzelfde onderscheid als bij de actiechips op het triggeroverzicht.
 * Als inset schaduw en niet als rand, want de rand houdt het uitsnede-effect. */
.bubble--stil {
	background: var(--bubbel-stil);
	box-shadow: inset 0 0 0 2px var(--bubbel-stil-ring);
}
.bubble--onbekend { background: var(--bubbel-onbekend); }
.bubble--gesprek  { background: var(--bubbel-gesprek); }

/* De gekozen bubbel had een zwarte streepjesrand, onzichtbaar op donker. */
.bubble--gekozen {
	background: var(--bubbel-gekozen);
	border-style: dashed;
	border-color: var(--ink);
}


/* De legenda onder het introblok. De twee zijlabels staan links en rechts en
 * wijzen daarmee naar de tros die eronder hoort; de sleutel staat ertussen. */
.bubbel-legenda {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 12px 20px;
	padding: 10px 14px;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	background: var(--surface-raised);
	font-size: 12px;
	color: var(--ink-muted);
}

.bubbel-legenda__zijde {
	flex: 0 0 auto;
	font-weight: 600;
	color: var(--ink);
}

.bubbel-legenda__sleutel {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px 16px;
}

.bubbel-legenda__item {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	white-space: nowrap;
}

.bubbel-legenda__stip {
	width: 11px;
	height: 11px;
	border-radius: 50%;
	border: 1px solid var(--surface-sunken);
}

.bubbel-legenda__stip--actief   { background: var(--bubbel-actief); }
.bubbel-legenda__stip--stil     { background: var(--bubbel-stil); box-shadow: inset 0 0 0 2px var(--bubbel-stil-ring); }
.bubbel-legenda__stip--gesprek  { background: var(--bubbel-gesprek); }
.bubbel-legenda__stip--onbekend { background: var(--bubbel-onbekend); }

/* Onder de bootstrap-grens past de rij niet meer naast elkaar; dan vervallen de
 * zijlabels, want links en rechts zeggen daar toch niets meer. */
@media (max-width: 767px) {
	.bubbel-legenda__zijde { display: none; }
}


/* --- rijen op het recordingsscherm ------------------------------------------ *
 * Het logo stond in een eigen kolom met een lege kop, naast de kolom met de
 * naam. Het hoort bij elkaar en staat nu in dezelfde cel, in een link naar het
 * dossier.
 */

.opname-bedrijf {
	display: flex;
	align-items: center;
	gap: 12px;
	min-width: 0;
}

.opname-bedrijf__namen { display: flex; flex-direction: column; min-width: 0; gap: 1px; }

.opname-bedrijf__naam {
	font-weight: 600;
	color: var(--ink);
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}

.opname-bedrijf__plaats { font-size: 12px; color: var(--ink-muted); }
.opname-bedrijf__onbekend { font-style: italic; color: var(--ink-muted); }

/* De playknop was een icoon met het losse woord PLAY eronder. Nu een knop met
 * een label ernaast, zodat het klikvlak groter is en meteen duidelijk is wat er
 * gebeurt. */
.opname-knop {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 5px 12px;
	border: 1px solid var(--line-strong);
	border-radius: 999px;
	background: var(--surface-raised);
	font-size: 12px;
	font-weight: 600;
	color: var(--ink);
	white-space: nowrap;
}

.opname-knop:hover,
.opname-knop:focus {
	background: var(--surface-hover);
	border-color: var(--brand);
	color: var(--ink);
	text-decoration: none;
}

.opname-knop .fa { font-size: 15px; color: var(--brand-ink); }

/* Een opname die nog loopt. De stip stond hier met style="color:red" en bleef
 * dus in beide thema's dezelfde kleur. */
.opname-loopt {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	font-size: 12px;
	font-weight: 600;
	color: var(--danger);
	white-space: nowrap;
}

.opname-loopt .fa { font-size: 10px; }


/* --- duur van een opname ---------------------------------------------------- *
 * Verving een native <meter>, die de browser zelf tekent en die zich dus niets
 * van het thema aantrok. De schaal is logaritmisch omdat de duur over ruim drie
 * ordes van grootte loopt; zie de toelichting in recording/index.blade.php.
 * Een vlakke kleur, want de lengte van een opname is op zichzelf niet goed of
 * slecht -- het getal ernaast zegt de rest.
 */

.duurcel { display: flex; align-items: center; gap: 10px; }

.duurbalk {
	flex: 0 0 auto;
	position: relative;
	width: 84px;
	height: 6px;
	border-radius: 999px;
	background: var(--surface-sunken);
	box-shadow: inset 0 0 0 1px var(--line);
	overflow: hidden;
}

.duurbalk__vulling {
	display: block;
	height: 100%;
	border-radius: inherit;
	background: var(--brand-solid);
}

.duurcel__tekst {
	min-width: 0;
	font-variant-numeric: tabular-nums;
	color: var(--ink);
}


/* --- de accountknop rechtsboven --------------------------------------------- *
 * Stond er als een lijstjes-icoon met het woord "menu". Achter de knop zitten
 * het account, de instellingen en het uitloggen, dus toont hij nu wie er is
 * ingelogd. De selector haakt aan nav.navbar-icon vast omdat de regel
 * `nav.navbar-icon a` hierboven anders wint met (0,2,1).
 */

nav.navbar-icon a.accountknop {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	max-width: 240px;
	padding: 5px 12px 5px 5px;
	border: 1px solid var(--line);
	border-radius: 999px;
	color: var(--ink);
	font-size: 13px;
	line-height: 1.2;
}

nav.navbar-icon a.accountknop:hover,
nav.navbar-icon a.accountknop:focus {
	background: var(--surface-hover);
	border-color: var(--line-strong);
	color: var(--ink);
}

.accountknop__initiaal {
	position: relative;   /* voor de stip van de praat-knop (accountknop--bereikbaar) */
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	background: var(--brand-solid);
	color: var(--on-brand);
	font-size: 13px;
	font-weight: 600;
}

.accountknop__naam {
	min-width: 0;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	font-weight: 600;
}

/* De volledige keten is nodig: .navbar-icon > ul > li > a > i zet de iconen in
 * deze balk op width:100% -- dat is hoe een icoon daar boven zijn label komt te
 * staan -- en dat wint met (0,1,4) van een losse klasse. Gemeten op 31 augustus
 * 2026 werd het pijltje daardoor 151px breed en kromp de naam ernaast tot 0. */
.navbar-icon > ul > li > a > i.accountknop__pijl {
	width: auto;
	flex: 0 0 auto;
	font-size: 14px;
	color: var(--ink-muted);
}

/* Onder de bootstrap-grens blijft alleen de initiaal over; de naam kost daar te
   veel breedte naast de lijst met handelingen. */
@media (max-width: 991px) {
	nav.navbar-icon a.accountknop { max-width: none; padding: 5px; border-color: transparent; }
	.accountknop__naam,
	.navbar-icon > ul > li > a > i.accountknop__pijl { display: none; }
}

/* De kop van de uitklap. Het account-id en het licentietype stonden alleen in
   een title-attribuut; daar vindt niemand ze. */
.accountkop {
	display: block;
	padding: 10px 16px 12px;
}

.accountkop__naam,
.accountkop__mail,
.accountkop__account { display: block; }

.accountkop__naam { font-size: 13px; font-weight: 600; color: var(--ink); }
.accountkop__mail { margin-top: 2px; font-size: 12px; color: var(--ink-muted); overflow-wrap: anywhere; }

.accountkop__account {
	margin-top: 6px;
	font-size: 11px;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--ink-muted);
}


/* --- licentie wisselen in het accountmenu ----------------------------------- *
 * Wie meer dan één licentie heeft, wisselt hier zonder eerst uit te loggen.
 * De lijst komt uit de sessie: showlicences() bewaart bij het inloggen per
 * licentie het id en de naam. Een keuze opent een venster dat om het
 * wachtwoord vraagt, want een licentie openen kan alleen met een verse sleutel
 * van /v2/user/tokens, en die geeft de api alleen voor e-mail en wachtwoord.
 *
 * De kop klapt de lijst in het menu zelf uit, in plaats van een tweede menu
 * ernaast: op een telefoon is daar geen ruimte voor. Sinds 2 oktober 2026,
 * gekozen uit een artifact; het gedrag staat in licentiewissel.js.
 */

/* Gemeten op 2 oktober 2026 was het accountmenu 200 breed, en daarin brak
   een licentienaam als www.installatiebedrijf-noord.nl af. Met de lijst erin
   wordt het daarom 280. */
.dropdown-menu:has(> .licentiewissel) { min-width: 280px; }

.licentiewissel__kop {
	display: flex;
	align-items: center;
	gap: 8px;
	width: 100%;
	padding: 7px 12px;
	border: 0;
	border-radius: 4px;
	background: none;
	color: var(--ink);
	font: inherit;
	line-height: 1.3;
	text-align: left;
}

.licentiewissel__kop:hover,
.licentiewissel__kop:focus-visible {
	background-color: var(--brand-tint);
	outline: none;
}

.licentiewissel__tekst {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	min-width: 0;
}

.licentiewissel__huidig {
	overflow: hidden;
	font-size: 12px;
	color: var(--ink-muted);
	white-space: nowrap;
	text-overflow: ellipsis;
}

.licentiewissel__pijl {
	flex: 0 0 auto;
	color: var(--ink-muted);
	transition: transform .15s ease;
}

.licentiewissel__kop[aria-expanded="true"] .licentiewissel__pijl { transform: rotate(180deg); }

/* Acht regels, daarna schuift de lijst. Een regel met het account-id eronder
   is 46 hoog; op een laag scherm hoogstens de helft daarvan. */
.licentiewissel__lijst {
	max-height: min(368px, 50vh);
	overflow-y: auto;
	margin: 2px 0 4px;
	padding: 0;
	list-style: none;
}

.licentiewissel__lijst[hidden] { display: none; }

.licentiewissel__regel {
	display: flex;
	align-items: center;
	gap: 8px;
	min-height: 34px;
	padding: 7px 12px;
	border-radius: 4px;
	line-height: 1.3;
	font-size: 13px;
	text-decoration: none;
}

/* Met nav.navbar-icon ervoor, net als bij de accountknop: de regels
   nav.navbar-icon a en a:hover zetten links in de balk op --ink-muted en
   --brand, en wonnen van een losse klasse. Gemeten op 2 oktober 2026: de
   andere licenties stonden grijs in het menu. */
nav.navbar-icon .licentiewissel__regel { color: var(--ink); }

.licentiewissel__regel > span { min-width: 0; overflow-wrap: anywhere; }

/* Het vinkje staat in de kolom van het icoon van de kop (fa-fw, 18 breed),
   en de namen beginnen waar "Licentie wisselen" begint. Alleen de huidige
   licentie heeft een vinkje; de rest houdt de ruimte vrij. */
.licentiewissel__vink { flex: 0 0 18px; color: var(--brand-ink); text-align: center; }

.licentiewissel__regel.is-huidig { font-weight: 600; cursor: default; }

nav.navbar-icon a.licentiewissel__regel:hover,
nav.navbar-icon a.licentiewissel__regel:focus {
	background-color: var(--brand-tint);
	color: var(--brand-ink);
	text-decoration: none;
	outline: none;
}

/* Vanaf negen licenties: zoeken bovenin, dat blijft staan als de lijst
   schuift. */
.licentiewissel__zoek {
	position: sticky;
	top: 0;
	z-index: 1;
	display: block;
	width: 100%;
	height: 30px;
	margin: 0 0 4px;
	padding: 0 10px;
	border: 1px solid var(--line-strong);
	border-radius: 6px;
	background: var(--surface-raised);
	color: var(--ink);
	font-size: 13px;
}

.licentiewissel__zoek:focus {
	border-color: var(--brand);
	box-shadow: 0 0 0 3px var(--brand-ring);
	outline: none;
}

/* Het venster. Het wachtwoordveld is dat van het inlogscherm, maar in de maat
   van de velden in een dialoog: 36 hoog in plaats van 42. */
.licentievenster .modal-dialog { max-width: 420px; }

.licentievenster .wachtwoordveld__oog {
	width: 36px;
	height: 36px;
}

.licentievenster__uitleg {
	margin: 10px 0 0;
	font-size: 12.5px;
	color: var(--ink-muted);
}

/* De naam van een licentie met het account-id eronder, in het accountmenu en
   op "Kies een licentie" (element/licentienaam en auth/selecttoken). Twee
   licenties kunnen dezelfde naam hebben; het aid is uniek, en het is wat je
   opgeeft als je de support belt. Sinds 2 oktober 2026. */
.licentie__namen {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.licentie__aid {
	font-family: var(--font-mono);
	font-size: 11px;
	font-weight: 400;
	color: var(--ink-muted);
}


/* --- de praat-knop: bereikbaar en de meldingen ----------------------------- *
 * De schakelaar "Bereikbaar voor gesprekken" in het accountmenu, de groene stip
 * op de initiaal zolang hij aan staat, en de meldingen rechtsonder
 * (element/belmeldingen, belmeldingen.js). Sinds 2 oktober 2026, gekozen uit
 * een artifact.
 */

.dropdown-menu > li > label.bereikbaar {
	display: flex;
	align-items: center;
	gap: 14px;
	margin: 0;
	padding: 8px 16px;
	font-weight: 400;
	white-space: normal;
	cursor: pointer;
}
.bereikbaar__tekst { display: flex; flex: 1 1 auto; flex-direction: column; gap: 2px; min-width: 0; }
.bereikbaar__naam { font-size: 13px; font-weight: 600; color: var(--ink); }
.bereikbaar__sub { font-size: 12px; line-height: 1.35; color: var(--ink-muted); }

/* Groen als in elke belapp; de schakelaar zelf houdt de kleur van alle
   schakelaars. De rand in de kleur van de tekst op de balk. De initiaal is
   position: relative (de accountknop rechtsboven). */
.accountknop--bereikbaar .accountknop__initiaal::after {
	content: '';
	position: absolute;
	right: -2px;
	bottom: -2px;
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: var(--ok);
	box-shadow: 0 0 0 2px var(--on-balk);
}

/* Rechtsonder, en niet rechtsboven zoals de andere meldingen: op Visitors zou
   hij daar de bovenste rijen van de stroom afdekken, en wie belt staat juist
   bovenaan. Meer meldingen tegelijk staan op elkaar. */
.belmeldingen {
	position: fixed;
	right: 16px;
	bottom: 16px;
	z-index: 1060;
	display: flex;
	flex-direction: column;
	gap: 10px;
	width: 344px;
	max-width: calc(100vw - 32px);
}
.belmeldingen:empty { display: none; }
.belmelding {
	position: relative;
	display: grid;
	gap: 12px;
	padding: 14px 16px;
	background: var(--surface-raised);
	border: 1px solid var(--line);
	border-left: 3px solid var(--ok);
	border-radius: var(--radius);
	box-shadow: var(--shadow-lg);
	color: var(--ink);
	font-size: 13px;
	line-height: 1.45;
}
.belmelding__kop { display: flex; align-items: center; gap: 10px; min-width: 0; }
.belmelding__bel {
	display: inline-flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	background: var(--ok-tint);
	color: var(--ok);
	font-size: 14px;
}
.belmelding__bel i { animation: belmelding-bel 1.4s ease-in-out infinite; }
@keyframes belmelding-bel {
	0%, 50%, 100% { transform: none; }
	10%, 30%      { transform: rotate(-14deg); }
	20%, 40%      { transform: rotate(14deg); }
}
.belmelding__titel { font-size: 13.5px; font-weight: 600; }
.belmelding__wacht { margin-left: auto; font-size: 12px; color: var(--ink-muted); font-variant-numeric: tabular-nums; }
.belmelding__bedrijf { display: flex; align-items: center; gap: 10px; min-width: 0; }
.belmelding__namen { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.belmelding__naam,
.belmelding__onder { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.belmelding__naam { font-weight: 600; }
.belmelding__onder { font-size: 12px; color: var(--ink-muted); }
.belmelding__knoppen { display: flex; gap: 8px; }
.belmelding__knop {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	height: 32px;
	padding: 0 14px;
	border: 1px solid var(--line);
	border-radius: 8px;
	background: var(--surface-sunken);
	font-size: 12.5px;
	font-weight: 600;
	color: var(--ink);
	white-space: nowrap;
}
.belmelding__knop:hover,
.belmelding__knop:focus { text-decoration: none; background: var(--surface-hover); color: var(--ink); }
.belmelding__knop--op,
.belmelding__knop--op:hover,
.belmelding__knop--op:focus { flex: 1 1 auto; background: var(--ok-solid); border-color: transparent; color: var(--on-brand); }
.belmelding__sluit { margin-left: auto; padding: 0; border: 0; background: none; font-size: 18px; line-height: 1; color: var(--ink-muted); }

/* Gemist: niemand nam op. Blijft staan tot je hem sluit. */
.belmelding--gemist { border-left-color: var(--warn); }
.belmelding--gemist .belmelding__bel { background: var(--warn-tint); color: var(--warn); }
.belmelding--gemist .belmelding__bel i { animation: none; }

/* Een ander nam op: één regel, en weg na een paar seconden. */
.belmelding--klaar { border-left-color: var(--line-strong); }
.belmelding--klaar .belmelding__bel { background: var(--surface-sunken); color: var(--ink-muted); }
.belmelding--klaar .belmelding__bel i { animation: none; }
.belmelding--klaar .belmelding__titel { font-weight: 400; }

@media (prefers-reduced-motion: reduce) {
	.belmelding__bel i { animation: none; }
}


/* --- het gespreksvenster van de praat-knop (gesprek/venster) --------------- *
 * Een eigen kleine pagina, die Opnemen in een melding met window.open opent.
 * Het bedrijf, de stand met de klok, de balkjes van het geluid, "Bekijkt nu"
 * en de ronde knoppen. Sinds 2 oktober 2026, gekozen uit een artifact.
 */

body.gespreksvenster { margin: 0; background: var(--surface); }
.gesprek {
	display: flex;
	flex-direction: column;
	gap: 14px;
	min-height: 100vh;
	padding: 18px;
	background: var(--surface);
	color: var(--ink);
	font-family: var(--font);
	font-size: 13px;
	line-height: 1.45;
}
/* hidden is een stijl van de browser en verliest van elke display hieronder. */
.gesprek [hidden] { display: none !important; }

.gesprek__bedrijf { display: flex; align-items: center; gap: 12px; padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.gesprek__namen { display: flex; flex: 1 1 auto; flex-direction: column; gap: 2px; min-width: 0; }
.gesprek__naam { overflow: hidden; font-size: 15px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.gesprek__onder { font-size: 12px; color: var(--ink-muted); }
a.gesprek__link { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 600; color: var(--brand-ink); }

.gesprek__stand { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 10px 0 2px; text-align: center; }
.gesprek__pil {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	height: 22px;
	padding: 0 10px;
	border-radius: 999px;
	background: var(--ok-tint);
	color: var(--ok);
	font-size: 11.5px;
	font-weight: 600;
}
.gesprek__pil::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.gesprek__pil--wacht,
.gesprek__pil--klaar { background: var(--surface-sunken); color: var(--ink-muted); }
.gesprek__pil--klaar::before { display: none; }
.gesprek__klok { font-family: var(--font-mono); font-size: 34px; line-height: 1.2; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.gesprek__klok--stil { color: var(--ink-faint); }
.gesprek__melding { max-width: 34ch; margin: 4px 0 0; font-size: 12.5px; color: var(--ink-muted); }
.gesprek__melding:empty { display: none; }

.gesprek__niveaus { display: grid; gap: 8px; }
.niveau { display: grid; grid-template-columns: 72px 1fr; align-items: center; gap: 10px; font-size: 12px; color: var(--ink-muted); }
.niveau__balk { display: flex; gap: 3px; height: 10px; }
.niveau__balk span { flex: 1 1 0; border-radius: 2px; background: var(--line); }
.niveau__balk span.aan { background: var(--ok); }

.gesprek__nu { display: grid; gap: 2px; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface-sunken); }
.gesprek__label { font-size: 10.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-faint); }
.gesprek__pagina { font-weight: 600; }
.gesprek__url { overflow: hidden; font-family: var(--font-mono); font-size: 11.5px; color: var(--ink-muted); text-overflow: ellipsis; white-space: nowrap; }

.gesprek__knoppen { display: flex; justify-content: center; gap: 28px; margin-top: auto; }
.rondknop { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 0; border: 0; background: none; font-size: 12px; color: var(--ink-muted); }
.rondknop__rond {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 52px;
	height: 52px;
	border: 1px solid var(--line);
	border-radius: 50%;
	background: var(--surface-sunken);
	color: var(--ink);
	font-size: 20px;
}
.rondknop:focus-visible .rondknop__rond { outline: 3px solid var(--brand-ring); outline-offset: 2px; }
.rondknop--ophangen .rondknop__rond { border-color: transparent; background: var(--danger-solid); color: #ffffff; }
.rondknop--ophangen .rondknop__rond i { transform: rotate(135deg); }
.rondknop--aan .rondknop__rond { border-color: transparent; background: var(--ink); color: var(--surface); }
.gesprek__klaarknoppen { display: flex; gap: 8px; margin-top: auto; }
.gesprek__klaarknoppen .stroom__knop { flex: 1 1 0; justify-content: center; height: 36px; }


/* --- indeling met een zijkolom ---------------------------------------------- *
 * Een lijst links, de inhoud rechts. Contentgrouping had hier floats en inline
 * stijlen staan zonder breekpunt, en de contentbuilder een <table class="table">
 * met twee cellen. Twee opmaken voor dezelfde indeling, dus staan ze nu in
 * dezelfde regels. De oude .cg-namen liften mee zolang die view ze gebruikt.
 *
 * De breedte van de kolom verschilt per scherm -- contentgrouping 280px voor de
 * groepsnamen met wat ze vangen, de contentbuilder 200px -- en staat daarom in
 * --zijkolom.
 *
 * Let op: hier hoort geen overflow op te staan. Op de contentbuilder wordt een
 * contentblok uit de rechterkolom naar een groep in de linkerkolom gesleept, en
 * dat gaat op drie manieren mis zodra een van beide kolommen gaat scrollen.
 * Nagelezen in jquery-ui-1.10.4.custom.min.js op 31 augustus 2026:
 *
 * - overflow-y:auto maakt overflow-x ook auto, dus het gesleepte blok wordt bij
 *   het verlaten van zijn kolom afgeknipt;
 * - draggable kiest zijn scrollParent op /(auto|scroll)/ over de overflows. Die
 *   is nu #main-body (branding-salesfeed.css: position absolute met overflow
 *   auto); wordt het de kolom, dan gaat draggable die kolom bij de randen uit
 *   zichzelf scrollen;
 * - en _generatePosition cacht de scrollpositie eenmalig bij het oppakken --
 *   this.offset.scroll||(this.offset.scroll={top:r.scrollTop(),...}) -- zodat
 *   het blok precies de weggescrolde afstand uit de pas gaat lopen met de muis.
 */

.zijindeling,
.cg-indeling {
	display: flex;
	align-items: flex-start;
	gap: 16px;
}

.zijindeling__lijst,
.cg-lijst { flex: 0 0 var(--zijkolom, 250px); min-width: 0; }

.zijindeling__detail,
.cg-detail { flex: 1 1 auto; min-width: 0; }

/* Zonder gekozen contentgroep valt er niets te tonen; deze regel zegt wat je
   moet doen in plaats van een leeg vlak achter te laten. */
.cg-detail__leeg {
	margin: 0;
	padding: 48px 20px;
	text-align: center;
	font-size: 13px;
	color: var(--ink-muted);
}

/* Onder de bootstrap-grens onder elkaar: naast elkaar houdt geen van beide genoeg
   breedte over, en de expressiebouwer heeft er het meeste van nodig. */
@media (max-width: 991px) {
	.zijindeling,
	.cg-indeling { flex-direction: column; }

	.zijindeling__lijst,
	.cg-lijst { flex: 1 1 auto; width: 100%; }
}


/* --- de lijst met contentgroepen -------------------------------------------- *
 * De rij bestond uit een sleepgreep, een prullenbak en dan pas de naam. Die
 * prullenbak zat daarmee in het sleeppad en stond er voordat je had gelezen om
 * welke groep het ging. Hij staat nu achteraan en is gedempt tot je hem aanwijst.
 */

.cg-indeling { --zijkolom: 280px; }

/* Het lijstje is een kaart (sinds 20 oktober 2026, variant A uit een mockup):
   een kop met het aantal, vanaf acht groepen een zoekveld, en per groep de
   naam met op een tweede regel wat hij vangt. Geen overflow op de kaart: de
   gesleepte rij (helper: clone) mag er niet door worden afgeknipt. */
.cg-kaart {
	background: var(--surface-raised);
	border: 1px solid var(--line);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-kaart);
}

.cg-kaart__kop { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; padding: 12px 14px 10px; border-bottom: 1px solid var(--line); }
.cg-kaart__titel { margin: 0; font-size: 15px; font-weight: 600; }
.cg-kaart__aantal { font-size: 12.5px; color: var(--ink-muted); font-variant-numeric: tabular-nums; }

.cg-kaart__zoek { position: relative; padding: 10px 10px 0; }
.cg-kaart__zoek .fa { position: absolute; left: 21px; bottom: 10px; color: var(--ink-faint); pointer-events: none; }
.cg-kaart__zoek .form-control { height: 34px; padding-left: 32px; }

.cg-kaart__geen { margin: 0; padding: 4px 14px 14px; font-size: 13px; color: var(--ink-muted); }
.cg-kaart__geen[hidden],
.groeprij[hidden] { display: none; }

.groeprijen { display: grid; gap: 2px; padding: 6px; }

/* Een lange naam loopt door op een volgende regel: de naam is het enige
   waaraan je een groep herkent. Wat hij vangt mag afkappen; de hele zin
   staat in de title. De hele rij is klikbaar doordat de link over de rij
   spant; de sleepgreep en de prullenbak liggen daarboven. */
.groeprij {
	position: relative;
	display: grid;
	grid-template-columns: 16px minmax(0, 1fr) auto;
	column-gap: 6px;
	row-gap: 1px;
	align-items: start;
	padding: 8px 8px 9px 6px;
	border: 1px solid transparent;
	border-radius: var(--radius);
}

.groeprij:hover { background: var(--surface-hover); }

.groeprij .draghandle { grid-column: 1; grid-row: 1 / span 2; position: relative; z-index: 1; margin-top: 3px; color: var(--ink-faint); cursor: move; }

.groeprij__naam { grid-column: 2; grid-row: 1; font-weight: 600; line-height: 1.35; color: var(--ink); overflow-wrap: anywhere; }
.groeprij__naam:hover,
.groeprij__naam:focus { color: var(--ink); text-decoration: none; }
.groeprij__naam::after { content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0; border-radius: inherit; }

.groeprij__weg {
	grid-column: 3;
	grid-row: 1;
	position: relative;
	z-index: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 26px;
	height: 26px;
	margin: -3px -2px 0 0;
	border-radius: var(--radius);
	color: var(--ink-muted);
}

.groeprij__weg:hover,
.groeprij__weg:focus {
	background: var(--danger-tint);
	color: var(--danger);
	text-decoration: none;
}

.groeprij__wat { grid-column: 2 / span 2; grid-row: 2; display: flex; align-items: baseline; gap: 6px; min-width: 0; margin: 0; font-size: 12px; color: var(--ink-muted); }
.groeprij__regel { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.groeprij__regel b { font-weight: 500; color: var(--ink); }
.groeprij__regel code { padding: 0; border-radius: 0; background: none; font-family: var(--font-mono); font-size: 11.5px; color: var(--ink); }
.groeprij__meer { flex: none; padding: 0 6px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface-sunken); font-size: 11px; font-weight: 600; color: var(--ink-muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.groeprij__leeg { font-weight: 600; color: var(--warn); }

/* De gekozen rij: de tint als vlak en --brand-ink als tekst, net als
   .nav-pills > li.active. Het blauw van bootstrap gaf de naam 1,22:1
   (gemeten 4 september 2026); --brand haalt als tekst op --brand-tint maar
   3,13:1. */
.groeprij.active { background: var(--brand-tint); border-color: var(--brand); }
.groeprij.active .groeprij__naam { color: var(--brand-ink); }

/* De sleepgreep en de prullenbak pas bij aanwijzen, op schermen met een
   muis; op een aanraakscherm staan ze er altijd. */
@media (hover: hover) {
	.groeprij .draghandle,
	.groeprij__weg { opacity: 0; transition: opacity .12s ease; }

	.groeprij:hover .draghandle,
	.groeprij:hover .groeprij__weg,
	.groeprij:focus-within .draghandle,
	.groeprij:focus-within .groeprij__weg,
	.groeprij.active .draghandle { opacity: 1; }
}


/* --- tegels op het liquidcontent-overzicht ---------------------------------- *
 * Was een bootstrap-paneel met de naam en een kaal uitklappijltje bovenaan en de
 * preview eronder. Nu de preview voorop -- daaraan herken je de pagina -- met
 * daaronder de naam, de host en het aantal variaties.
 */

.tegel {
	display: flex;
	flex-direction: column;
	margin-bottom: 24px;
	background: var(--surface-raised);
	border: 1px solid var(--line);
	border-radius: var(--radius-lg);
	transition: border-color .12s ease, box-shadow .12s ease;
}

.tegel:hover {
	border-color: var(--line-strong);
	box-shadow: var(--shadow-sm);
}

/* Het afknippen zit hier en niet op .tegel. Daar stond eerst overflow:hidden om
 * de bovenhoeken van de preview af te ronden, maar dat knipte ook het uitklapmenu
 * af: gemeten op 31 augustus 2026 verdween er 123px van de 135, en het onderste
 * item -- Verwijder pagina -- was niet meer aan te klikken. De preview knipt haar
 * eigen inhoud toch al af, dus die kan de ronding zelf dragen. */
.tegel__preview {
	position: relative;
	display: block;
	height: 200px;
	overflow: hidden;
	border-radius: calc(var(--radius-lg) - 1px) calc(var(--radius-lg) - 1px) 0 0;
	background: var(--surface-sunken);
	border-bottom: 1px solid var(--line);
}

/* De knoppen staan op een eigen regel onder de tekst. Naast elkaar zou de knop
 * met tekst ongeveer 140px van de 401 opeisen en werd de url ernaast afgebroken,
 * terwijl die juist het onderscheid tussen de pagina's draagt. */
.tegel__voet {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: 10px;
	padding: 10px 12px;
}

.tegel__tekst {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

/* hidden is een stijl van de browser zelf en verliest van elke display die wij
 * zetten. Zonder deze regel bleef de naamknop staan als hij verborgen werd -- die
 * heeft hieronder display:block -- en kwam het invoerveld eronder in plaats van
 * ervoor. De tegel werd daardoor 22px hoger en duwde de rij eronder weg, terwijl
 * het veld zelf maar 1px hoger is dan de knop. Hetzelfde deed zich eerder voor in
 * de bezoekerskolom. */
.tegel [hidden] { display: none !important; }

/* Een knop die eruitziet als een titel: klikken bewerkt de naam. Bootstrap zet
 * hier van alles op button, vandaar dat het meeste expliciet terug moet. */
.tegel__naam {
	display: block;
	width: 100%;
	/* Vaste hoogte, gelijk aan die van het invoerveld. Uit padding en randen laten
	   volgen werkte niet: de knop heeft 1px padding boven en onder plus een rand
	   onderaan, het veld een rand rondom, en dan scheelt het altijd een pixel de
	   ene of de andere kant op. Met box-sizing border-box maakt de opbouw niet
	   meer uit. */
	height: 20px;
	padding: 1px 0;
	border: none;
	border-bottom: 1px dashed transparent;
	background: none;
	font-family: inherit;
	font-size: 13px;
	font-weight: 600;
	line-height: 1.3;
	text-align: left;
	color: var(--ink);
	cursor: text;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}

/* Alleen bij aanwijzen van de naam zelf een streepje eronder, zodat zichtbaar is
 * dat je erin kunt typen. De tegel als geheel oplichten zou juist suggereren dat
 * de naam ook naar de variaties gaat, en dat doet hij niet meer. */
.tegel__naam:hover { border-bottom-color: var(--line-strong); }
.tegel__naam:focus { outline: 2px solid var(--brand-ring); outline-offset: 1px; }

/* Url boven, aantal variaties eronder. Naast elkaar moesten ze de breedte delen
 * en werd de url als eerste afgebroken. */
.tegel__meta {
	display: flex;
	flex-direction: column;
	gap: 1px;
	min-width: 0;
	font-size: 11px;
	line-height: 1.35;
	color: var(--ink-muted);
}

.tegel__url { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }

/* Het veld waarin de naam wordt bewerkt, op de plek van de naam zelf. */
/* Even hoog als de knop die hij vervangt, en zo gepositioneerd dat de tekst niet
 * opzij springt: het veld heeft 4px binnenruimte en 1px rand, dus wordt hij 5px
 * naar links getrokken en even breed weer aangevuld. Die ruimte is er, want de
 * voet van de tegel heeft 12px padding. */
.tegel__naaminvoer {
	height: 20px;
	width: calc(100% + 10px);
	margin: 0 -5px;
	padding: 0 4px;
	border: 1px solid var(--brand);
	border-radius: var(--radius);
	background: var(--surface);
	font-size: 13px;
	font-weight: 600;
	line-height: 1.3;
	color: var(--ink);
}

.tegel__naaminvoer:focus { outline: 2px solid var(--brand-ring); outline-offset: 0; }

.tegel__naaminvoer--fout { border-color: var(--danger); background: var(--danger-tint); }

/* Zichtbare knoppen in plaats van een uitklapmenu of een hover-overlay. Icoon
 * met een tooltip en een aria-label waar naast de tekst geen ruimte is voor een
 * label.
 *
 * Eerst waren dit kale glyphs van 14px in een vlak van 28: te klein, en zonder
 * rand zagen ze er niet uit als iets waarop je kunt klikken. Nu 36 bij 36 met een
 * icoon van 18 en een zichtbare rand.
 *
 * De .tegel__-namen liften mee zolang het liquidcontent-overzicht die gebruikt;
 * de contentbuilder gebruikt de generieke namen.
 */
.actierij,
.tegel__acties { display: flex; flex: 0 0 auto; gap: 6px; }

.actieknop,
.tegel__actie {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	background: var(--surface);
	color: var(--ink-muted);
	cursor: pointer;
	transition: background-color .12s ease, border-color .12s ease, color .12s ease;
}

.actieknop .fa,
.tegel__actie .fa { font-size: 18px; line-height: 1; }

/* De hoofdactie krijgt een label en de ruimte die overblijft; verwijderen blijft
 * een icoon, want dat is niet iets waar je naartoe wilt worden geleid.
 *
 * Deze regel stond eerst boven de basisregel hierboven. Beide wegen even zwaar
 * (0,1,0), dus won de width:36px daaruit van de width:auto hier, en werd de knop
 * alleen breed doordat flex-grow hem alsnog uitrekte. Gemeten op 31 augustus 2026
 * op het liquidcontent-overzicht: 333px in een rij van 375. Met de modifier na de
 * basisregel klopt de opbouw en blijft die uitkomst gelijk. */
.actieknop--hoofd,
.tegel__actie--hoofd {
	flex: 1 1 auto;
	gap: 8px;
	width: auto;
	padding: 0 12px;
	font-size: 12px;
	font-weight: 600;
}

.actieknop:hover,
.actieknop:focus,
.tegel__actie:hover,
.tegel__actie:focus {
	background: var(--surface-hover);
	border-color: var(--line-strong);
	color: var(--ink);
	text-decoration: none;
}

.actieknop--gevaar:hover,
.actieknop--gevaar:focus,
.tegel__actie--gevaar:hover,
.tegel__actie--gevaar:focus {
	background: var(--danger-tint);
	border-color: var(--danger);
	color: var(--danger);
}


/* --- de bezoekerskolom: de stroom ------------------------------------------ *
 * Tot 7 september 2026 stond hier een leeg paneel dat pas na een klik op een
 * bubbel het bedrijf toonde (en daarvoor zat dat in een modal). Nu staat er
 * altijd een lijst: wie er nu is, wat hij bekijkt en hoe lang geleden hij
 * klikte, op laatste klik gesorteerd. De gekozen rij klapt open met dezelfde
 * gegevens als het oude paneel; die blokken heten nog .bezoeker__*. Gekozen
 * door de gebruiker uit een artifact, variant A.
 */

/* Plakt en scrolt in zijn eigen vak: de kop blijft staan, de lijst schuift. */
.stroom {
	position: sticky;
	top: 16px;
	display: flex;
	flex-direction: column;
	max-height: calc(100vh - 100px);
	overflow: hidden;
	background: var(--surface-raised);
	border: 1px solid var(--line);
	border-radius: var(--radius-lg);
}

/* hidden is een stijl van de browser zelf en verliest van elke display die wij
   zetten; vandaar hier expliciet. */
.stroom [hidden] { display: none !important; }

.stroom__kop {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 4px 10px;
	padding: 14px 16px 10px;
	border-bottom: 1px solid var(--line);
}

.stroom__titel { margin: 0; font-size: 13.5px; font-weight: 600; color: var(--ink); }

.stroom__cijfers { display: flex; gap: 10px; font-size: 11.5px; color: var(--ink-muted); white-space: nowrap; }
.stroom__cijfers b { font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; }

.stroom__leeg { margin: 0; padding: 16px; font-size: 13px; color: var(--ink-muted); }

.stroom__lijst {
	margin: 0;
	padding: 6px;
	min-height: 0;
	overflow-y: auto;
	/* De rijen worden periodiek herschikt; zonder dit verschuift Chrome de
	   scrollpositie mee om het beeld "stabiel" te houden. */
	overflow-anchor: none;
	list-style: none;
}

.stroom__rij {
	display: grid;
	grid-template-columns: 30px minmax(0, 1fr) auto;
	gap: 10px;
	align-items: center;
	padding: 7px 8px;
	border-radius: 10px;
	cursor: pointer;
}

.stroom__rij:hover { background: var(--surface-hover); }

.stroom__rij--gekozen,
.stroom__rij--gekozen:hover { background: var(--brand-tint); }

.stroom__midden { display: flex; flex-direction: column; gap: 2px; min-width: 0; }

.stroom__naam {
	font-size: 13px;
	font-weight: 600;
	line-height: 1.25;
	color: var(--ink);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.stroom__plaats { font-size: 11.5px; font-weight: 400; color: var(--ink-faint); }

.stroom__pagina {
	display: flex;
	align-items: center;
	gap: 5px;
	overflow: hidden;
	font-size: 12px;
	line-height: 1.3;
	color: var(--ink-muted);
}

.stroom__pagina i { flex: 0 0 auto; font-size: 11px; }
.stroom__paginatitel { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.stroom__rechts { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; }

.stroom__tijd {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	font-size: 12px;
	font-weight: 600;
	color: var(--ink);
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

.stroom__tijd--stil { font-weight: 500; color: var(--ink-muted); }

/* De stip volgt de bubbelkleur, met dezelfde grens van vijf minuten. */
.stroom__stip {
	display: inline-block;
	box-sizing: border-box;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--bubbel-actief);
}

.stroom__stip--stil     { background: transparent; border: 2px solid var(--bubbel-stil-ring); }
.stroom__stip--gesprek  { background: var(--bubbel-gesprek); }
.stroom__stip--onbekend { background: var(--bubbel-onbekend); }

.stroom__pv {
	display: inline-block;
	min-width: 18px;
	padding: 0 6px;
	background: var(--surface-sunken);
	border: 1px solid var(--line);
	border-radius: 999px;
	font-size: 10.5px;
	font-weight: 600;
	line-height: 16px;
	text-align: center;
	color: var(--ink-muted);
	font-variant-numeric: tabular-nums;
}

/* De uitklap staat in de gekozen rij en spant alle kolommen. */
.stroom__uitklap {
	grid-column: 1 / -1;
	margin: 4px -8px -7px;
	padding: 10px 12px 12px;
	border-top: 1px solid var(--line);
	font-size: 12px;
	cursor: auto;
}

.stroom__acties { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }

.stroom__knop {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	height: 30px;
	max-width: 100%;
	padding: 0 12px;
	background: var(--surface-sunken);
	border: 1px solid var(--line);
	border-radius: 8px;
	font-size: 12px;
	font-weight: 600;
	color: var(--ink);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.stroom__knop:hover, .stroom__knop:focus { text-decoration: none; background: var(--surface-hover); color: var(--ink); }
.stroom__knop--vol { background: var(--brand-solid); border-color: transparent; color: var(--on-brand); }
.stroom__knop--vol:hover, .stroom__knop--vol:focus { background: var(--brand-solid); color: var(--on-brand); }

.bezoeker__sector { margin: 0; font-size: 12px; line-height: 1.5; color: var(--ink-muted); }

/* Label links, waarde rechts. De div's eromheen zijn er voor de HTML-structuur
   van een dl; met display:contents vallen ze weg uit het raster. */
.bezoeker__cijfers {
	display: grid;
	grid-template-columns: 1fr auto;
	gap: 6px 12px;
	margin: 10px 0 0;
	padding-top: 10px;
	border-top: 1px solid var(--line);
}

.bezoeker__cijfers > div { display: contents; }
.bezoeker__cijfers dt { font-size: 12px; font-weight: 400; color: var(--ink-muted); }
.bezoeker__cijfers dd { margin: 0; font-size: 12px; font-weight: 600; text-align: right; color: var(--ink); font-variant-numeric: tabular-nums; }

.bezoeker__adres {
	margin-top: 10px;
	padding-top: 10px;
	border-top: 1px solid var(--line);
	font-size: 12px;
	line-height: 1.6;
	color: var(--ink-muted);
}

.bezoeker__ip { margin-top: 6px; }

/* "Kredietscore F — Goede kredietwaardigheid": het label in de kleur van de
   adresregels erboven, de score zelf in de inktkleur. */
.bezoeker__krediet { margin-top: 6px; }
.bezoeker__krediet b { font-weight: 500; color: var(--ink); }

.bezoeker__historie { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line); }

.bezoeker__titel {
	margin: 0 0 6px;
	font-size: 10.5px;
	font-weight: 600;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--ink-muted);
}

.bezoeker__paginas {
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: 12px;
}

.bezoeker__paginas li {
	display: flex;
	gap: 10px;
	padding: 5px 0;
	border-top: 1px solid var(--line);
	line-height: 1.45;
}

.bezoeker__paginas li:first-child { border-top: none; }

.bezoeker__tijd { flex: 0 0 auto; color: var(--ink-muted); font-variant-numeric: tabular-nums; }
.bezoeker__paginas a { min-width: 0; color: var(--ink); overflow-wrap: anywhere; }

.bezoeker__meer { margin: 8px 0 0; font-size: 11px; font-style: italic; color: var(--ink-muted); }

/* Onder de grens staat de kolom onder het canvas; plakken heeft daar geen zin. */
@media (max-width: 1199px) {
	.stroom { position: static; max-height: none; overflow: visible; margin-top: 20px; }
	.stroom__lijst { overflow-y: visible; }
}


/* --- het triggeroverzicht -------------------------------------------------- *
 * Een rij per trigger. Acties worden hier alleen getoond; toevoegen en bewerken
 * gebeurt op de detailpagina, dus deze pagina heeft de actie-modal niet meer.
 */

.list-group-item.trigger-rij {
	display: flex;
	align-items: center;
	gap: 20px;
	min-height: 60px;
	padding: 11px 16px 11px 12px;
}

/* Een vaste breedte, geen meegroeiende: daardoor beginnen de acties op elke rij
 * op dezelfde x en is de lijst te scannen. De langste triggernaam is gemeten op
 * 31 augustus 2026 357px vet, en past er ruim in. Sinds 6 september 2026 staan
 * de knoppen niet meer in dit blok maar aan het eind van de rij, dus het kan
 * smaller: 38 in plaats van 44 procent. */
.trigger-rij__hoofd {
	flex: 0 0 38%;
	display: flex;
	align-items: center;
	gap: 14px;
	min-width: 0;
}

/* De greep en de schakelaar mogen niet meekrimpen als een naam lang is; alleen
 * de naam zelf wijkt, met een beletselteken. */
.trigger-rij__hoofd > .draghandle,
.trigger-rij__hoofd > input.onoff-switch { flex: 0 0 auto; }

.trigger-rij .draghandle { font-size: 13px; color: var(--ink-faint); }

.trigger-rij__naamblok {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

/* Gewicht 500 en niet 600: vet maakte de hele lijst zwaar, en de naam hoeft
 * zich alleen van de regel eronder te onderscheiden. */
.trigger-rij__naam {
	min-width: 0;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	font-size: 14px;
	font-weight: 500;
	color: var(--ink);
}

.trigger-rij__meta { font-size: 11.5px; color: var(--ink-faint); }

.trigger-rij--uit .trigger-rij__naam { color: var(--ink-muted); }

/* De knoppen aan het eind van de rij, altijd zichtbaar. Bewerken is wat je hier
 * komt doen en krijgt tekst en een tint; dupliceren en verwijderen zijn
 * vierkantjes met alleen een symbool. */
.trigger-rij__knoppen {
	flex: 0 0 auto;
	display: inline-flex;
	gap: 8px;
	margin-left: 12px;
}

.trigger-rij__knop {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 7px;
	height: 32px;
	min-width: 32px;
	padding: 0;
	border: 1px solid var(--line-strong);
	border-radius: 8px;
	background: var(--surface-raised);
	color: var(--ink-muted);
	font-size: 13px;
	line-height: 1;
	text-decoration: none;
	cursor: pointer;
}

.trigger-rij__knop:hover,
.trigger-rij__knop:focus {
	background: var(--surface-sunken);
	color: var(--ink);
	text-decoration: none;
}

.trigger-rij__knop:disabled { cursor: default; }

.trigger-rij__knop--bewerk {
	padding: 0 13px 0 11px;
	border-color: transparent;
	background: color-mix(in srgb, var(--brand) 13%, var(--surface-raised));
	color: var(--brand-ink);
	font-weight: 600;
}

.trigger-rij__knop--bewerk .fa { font-size: 12px; }

/* Bij een trigger die uit staat is de knop stiller. Deze regel staat vóór
   de hover en niet erna: hij weegt even zwaar (0,2,0), en toen hij erna
   stond won hij ook op hover, zodat de knop bij een uitgezette trigger
   witte tekst kreeg op de lichte tint -- gemeten op 8 september 2026 op
   "demo gooi weg 2", onleesbaar. Nu wint de hover, want die komt later. */
.trigger-rij--uit .trigger-rij__knop--bewerk {
	background: color-mix(in srgb, var(--brand) 8%, var(--surface-raised));
}

.trigger-rij__knop--bewerk:hover,
.trigger-rij__knop--bewerk:focus {
	background: var(--brand-solid);
	color: var(--on-brand);
}

.trigger-rij__knop--weg:hover,
.trigger-rij__knop--weg:focus {
	border-color: color-mix(in srgb, var(--danger) 35%, var(--line-strong));
	background: color-mix(in srgb, var(--danger) 10%, var(--surface-raised));
	color: var(--danger);
}

.trigger-rij__acties {
	flex: 1 1 auto;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	min-width: 0;
}

/* Staat de trigger uit, dan draait geen van zijn acties -- ongeacht hun eigen
 * stand -- en vergrijzen alle symbolen. Eerst dempte hier de hele reeks met
 * opacity .55; dat kwam bovenop de demping die een uit-chip zelf al heeft en
 * bracht die tekst op 2,2 contrast. Welke actie aan of uit staat blijft ook zo
 * te zien: aan de doorgetrokken of gestreepte rand en aan het merkteken. */
.trigger-rij--uit .actie-chip__icoon { filter: grayscale(1); opacity: .5; }

/* Zoeken op naam (trigger/overview.blade.php): een rij die niet past krijgt
 * hidden, en zolang er gezocht wordt, staat verslepen uit en zijn de grepen
 * weg. De randen komen dan niet van bootstrap, dat de eerste en laatste rij
 * aanwijst met :first-child en :last-child, ook als die verborgen zijn; een
 * zichtbare rij krijgt alleen een lijn als er een zichtbare rij boven staat. */
.list-group-item.trigger-rij[hidden] { display: none; }
.trigger-lijst--zoekt .draghandle { visibility: hidden; }
.trigger-lijst--zoekt > .trigger-rij { border-top-color: transparent; border-bottom-color: transparent; }
.trigger-lijst--zoekt > .trigger-rij:not([hidden]) ~ .trigger-rij:not([hidden]) { border-top-color: var(--line); }

.trigger-leeg { margin: 0; padding: 26px 20px; text-align: center; font-size: 13.5px; color: var(--ink-muted); }
.trigger-leeg b { font-weight: 600; color: var(--ink); }


/* Een actie is hier alleen ter informatie: het symbool zegt welk type actie het
 * is, de tekst waar hij over gaat. */
.actie-chip {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	max-width: 100%;
	padding: 4px 11px 4px 6px;
	border: 1px solid var(--line-strong);
	border-radius: 999px;
	background: var(--surface);
	font-size: 12px;
	line-height: 1.45;
	color: var(--ink);
}

.actie-chip__icoon {
	flex: 0 0 auto;
	width: 20px;
	height: 20px;
	object-fit: contain;
}

/* Wat de actie doet en waarmee (TriggerActieHelper::label): de soort in grijs,
 * het ding in inkt, en bij een tag een stip in de kleur van de tag. Een lange
 * naam wordt aan het eind afgekapt; de tooltip heeft hem heel. Een verwijzing
 * naar iets dat niet meer bestaat staat in de kleuren van een waarschuwing.
 * Gekozen uit een mockup op 28 september 2026. */
.actie-chip__soort { flex: 0 0 auto; color: var(--ink-faint); }

.actie-chip__stip {
	flex: 0 0 auto;
	width: 9px;
	height: 9px;
	border-radius: 50%;
	box-shadow: 0 0 0 1px rgba(0, 0, 0, .08);
}

.actie-chip__label {
	min-width: 0;
	max-width: 260px;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	font-weight: 500;
}

/* Uit is de uitzondering -- gemeten op 31 augustus 2026 stonden 21 van de 106
 * acties uit -- dus die krijgt het merkteken en niet andersom. Het verschil zit
 * bewust niet in kleur alleen: de rand is gestreept, het symbool grijs, en er
 * staat "uit" achter. */
.actie-chip--uit {
	border-style: dashed;
	background: transparent;
	color: var(--ink-muted);
}

.actie-chip--uit .actie-chip__icoon { filter: grayscale(1); opacity: .5; }

/* Na --uit: ook een uitgezette actie die ergens naar verwijst dat niet meer
 * bestaat, houdt de kleuren van een waarschuwing. */
.actie-chip--kapot {
	border-color: color-mix(in srgb, var(--warn) 55%, var(--line-strong));
	background: var(--warn-tint);
}

.actie-chip--kapot .actie-chip__label { color: var(--warn); font-weight: 600; }

.actie-chip__staat {
	flex: 0 0 auto;
	padding: 0 6px;
	border-radius: 999px;
	background: var(--surface-sunken);
	font-size: 10px;
	font-weight: 600;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--ink-muted);
}

/* Onder de bootstrap-grens valt de rij uiteen: de acties gaan onder de naam
 * staan, want naast elkaar houden ze daar geen van beide genoeg breedte over. */
@media (max-width: 767px) {
	.list-group-item.trigger-rij { flex-wrap: wrap; gap: 12px; }
	.trigger-rij__hoofd   { flex: 1 1 100%; }
	.trigger-rij__acties  { flex: 1 1 auto; padding-left: 34px; }
	.trigger-rij__knoppen { margin-left: auto; }
}


/* --- acties bij een trigger ------------------------------------------------ *
 * Op de detailpagina van een trigger, met de actie-modal eronder.
 */

.trigger-acties__kop {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	margin-bottom: 14px;
}


.trigger-acties__leeg { margin: 0; font-size: 13px; color: var(--ink-muted); }

.trigger-acties__lijst { margin: 0; padding: 0; list-style: none; }

.trigger-actie {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 10px 4px;
	border-top: 1px solid var(--line);
}

.trigger-acties__lijst > .trigger-actie:first-child { border-top: none; }

/* De schakelaar per actie krijgt alleen de ruimte die hij nodig heeft. */
.trigger-actie > .actie-switch { flex: 0 0 auto; margin: 0; }

.trigger-actie__icoon {
	flex: 0 0 auto;
	width: 30px; height: 30px;
	object-fit: contain;
}

/* Een uitgezette actie is gedempt, ook het icoon — anders trekt dat de aandacht
   naar een regel die juist niets doet. */
.trigger-actie--uit .trigger-actie__icoon { opacity: .45; }

.trigger-actie__tekst { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }

/* Het label (trigger/actielabel.blade.php): wat de actie doet en waarmee, de
   soort in grijs, bij een tag een stip in zijn kleur, en de omschrijving
   eronder. Een verwijzing die niet meer klopt staat in de kleur van een
   waarschuwing. Gekozen uit een mockup op 28 september 2026. */
.trigger-actie__label { display: flex; flex-direction: column; gap: 2px; min-width: 0; }

.trigger-actie__naam {
	display: flex;
	align-items: center;
	gap: 6px;
	min-width: 0;
	font-size: 14px;
	font-weight: 600;
	color: var(--ink);
}

.trigger-actie__soort { flex: 0 0 auto; font-weight: 500; color: var(--ink-faint); }

.trigger-actie__stip {
	flex: 0 0 auto;
	width: 10px;
	height: 10px;
	border-radius: 50%;
	box-shadow: 0 0 0 1px rgba(0, 0, 0, .08);
}

.trigger-actie__ding { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }

.trigger-actie__naam--kapot .trigger-actie__ding { color: var(--warn); }

.trigger-actie__omschrijving {
	font-size: 12px;
	color: var(--ink-muted);
	overflow-wrap: anywhere;
}

.trigger-actie__waarschuwing { font-size: 11px; color: var(--warn); }

.trigger-actie__knop { flex: 0 0 auto; }

/* De prullenbak naast bewerken: een vierkantje, gedempt tot je hem aanwijst
   en dan rood, zoals in de triggerlijst. */
.trigger-actie__knop--weg {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	margin-left: 6px;
	padding: 0;
	border-radius: 8px;
	color: var(--ink-muted);
}

.trigger-actie__knop--weg:hover,
.trigger-actie__knop--weg:focus {
	border-color: color-mix(in srgb, var(--danger) 35%, var(--line-strong));
	background: color-mix(in srgb, var(--danger) 8%, var(--surface-raised));
	color: var(--danger);
}

/* Een uitgezette actie blijft leesbaar maar duidelijk gedempt. */
.trigger-actie--uit .trigger-actie__naam { color: var(--ink-muted); font-weight: 500; }


/* --- de modal waarin een actie wordt gekozen en ingevuld -------------------- *
 * De keuzelijst was een rij kale tekstlinks en het rechterpaneel bleef leeg tot
 * je iets aanklikte. De API levert per functie een icoon en een minimale
 * tussentijd; die stonden er niet in.
 */

.actie-keuze__kop {
	margin: 0 0 8px;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--ink-muted);
}

/* De a ervoor is nodig: bootstrap zet `a.list-group-item { color: #555 }` en dat
   weegt een element zwaarder dan een losse klasse. Zonder die a bleef de naam op
   het donkere thema op 2,30 steken.
   Rijen van 7 boven en onder, zodat de soorten op een laag scherm in de lijst
   passen. Gemeten op 30 september 2026 op 1566 × 757: met 7 was de lijst 513
   hoog bij 527 plaats (zie de actiemodal hieronder); met 9 was hij 557. */
a.actie-keuze__item {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 7px 12px;
	border-color: var(--line);
	background: var(--surface);
	color: var(--ink);
}

a.actie-keuze__item:hover,
a.actie-keuze__item:focus {
	background: var(--surface-hover);
	color: var(--ink);
	text-decoration: none;
}

a.actie-keuze__item.is-gekozen {
	background: var(--brand-tint);
	border-color: var(--brand);
	color: var(--brand-ink);
}

.actie-keuze__icoon {
	flex: 0 0 auto;
	width: 26px; height: 26px;
	object-fit: contain;
}

.actie-keuze__tekst { display: flex; flex-direction: column; gap: 1px; min-width: 0; }

.actie-keuze__naam { font-size: 13px; font-weight: 500; }

.actie-keuze__grens { font-size: 11px; color: var(--ink-muted); }
.actie-keuze__item.is-gekozen .actie-keuze__grens { color: var(--brand-ink); }

/* --- de uitleg zolang er niets gekozen is ---------------------------------- */

.actie-leeg {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	min-height: 260px;
	padding: 24px 32px;
	text-align: center;
	border: 1px dashed var(--line-strong);
	border-radius: var(--radius-lg);
	background: var(--surface-sunken);
}

.actie-leeg > i { font-size: 26px; color: var(--ink-faint); margin-bottom: 10px; }

.actie-leeg__titel {
	margin: 0 0 6px;
	font-size: 15px;
	font-weight: 600;
	color: var(--ink);
}

.actie-leeg__uitleg {
	margin: 0;
	max-width: 42ch;
	font-size: 13px;
	line-height: 1.55;
	color: var(--ink-muted);
}

/* --- de actiemodal ---------------------------------------------------------- *
 * De naam van het actietype als titel met het icoon erbij. In het formulier
 * bovenaan de schakelaar met een tekst die zegt hoe hij staat, daaronder de
 * omschrijving over de breedte en de ratelimit als schuif met de waarde in
 * een pil en de uitleg als gewone regel; onderaan een voet met verwijderen,
 * annuleren en opslaan. De velden van het gedeelde kopsjabloon en de voet
 * gelden voor elk actietype; het codevak is eigen aan "code uitvoeren".
 */

/* De voet is leeg tot er een actietype is gekozen; dan valt er ook niets te
   tonen. */
.actie-modal .modal-footer:empty { display: none; }

.actie-modal .modal-dialog { width: 860px; }

/* De stappen van de dialoog volgen de klassen die trigger-acties.js op de
   modal zet: is-stap2 zodra het formulier er staat, en daarnaast is-bestaand
   bij een bestaande actie. Die heeft geen lijst met soorten, en zijn
   formulier krijgt de hele breedte; de uitleg staat er alleen zolang er nog
   niets gekozen is. Niet met .hide() en .show() in het script: die laten
   een inline display achter, en die wint van de regels voor de telefoon
   verderop (gezien op 29 september 2026). */
.actie-modal.is-bestaand .modal-body > .row > .col-sm-4 { display: none; }
.actie-modal.is-bestaand .modal-body > .row > .col-sm-8 { width: 100%; }
.actie-modal.is-stap2 .actie-leeg { display: none; }

.actiemodal__kop { padding: 18px 24px 14px; }

.actie-modal .modal-title {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 17px;
	font-weight: 600;
	letter-spacing: -.01em;
}

.actiemodal__icoon {
	flex: 0 0 auto;
	width: 24px;
	height: 24px;
	object-fit: contain;
}

.actiemodal__sub {
	margin: 4px 0 0;
	font-size: 12.5px;
	color: var(--ink-muted);
}

.actie-modal .modal-body { padding: 18px 24px 8px; }

/* Vanaf 768 breed en 600 hoog past de dialoog in het scherm, met de kop en de
   voet altijd in beeld. De romp krijgt de ruimte ertussen en verdeelt die
   over twee kolommen die elk zelf scrollen: links de soorten, rechts het
   formulier. De lijst is zo hoog als hij is, tot de kolom vol is; dan scrolt
   hij. De marge vervangt de 158 van boven die leadcrm/css/bootstrap.css elke
   dialoog geeft.
   De romp zelf scrolt niet. Het tagformulier dat tagvenster.js erin schuift
   (de rij gaat dan opzij) moet er dus in passen, en daarvoor is de 600; in
   ruil klapt de icoonkiezer van dat formulier buiten de dialoog uit, waar
   een scrollende romp hem zou afknippen. Lager dan 600 is de dialoog zo hoog
   als zijn inhoud en scrolt het venster eromheen; smaller dan 768 is hij een
   schuifblad ("dialogen als schuifblad", verderop).
   Gemeten op 30 september 2026 in Chrome op 1566 × 757, met "Show
   notification" gekozen: de dialoog was 725 hoog, met een kop van 80 en een
   voet van 65; de lijst met elf soorten was 513 hoog met 14 over, en het
   formulier 788 in een kolom van 552. Met het tagformulier erin was de
   dialoog 530 hoog, en de icoonkiezer liep tot 74 onder de dialoog door. */
@media (min-width: 768px) and (min-height: 600px) {
	.actie-modal .modal-dialog { margin: 16px auto; }

	.actie-modal .modal-content {
		display: flex;
		flex-direction: column;
		max-height: calc(100vh - 32px);
	}

	.actie-modal .modal-header,
	.actie-modal .modal-footer { flex: 0 0 auto; }

	.actie-modal .modal-body {
		flex: 1 1 auto;
		min-height: 0;
		display: flex;
		flex-direction: column;
	}

	.actie-modal .modal-body > .row {
		flex: 1 1 auto;
		min-height: 0;
		display: flex;
	}

	/* De clearfix van bootstrap zou in de flexrij twee lege items zijn. */
	.actie-modal .modal-body > .row::before,
	.actie-modal .modal-body > .row::after { content: none; }

	.actie-modal .modal-body > .row > .col-sm-4 {
		display: flex;
		flex-direction: column;
		min-height: 0;
	}

	.actie-modal .modal-body > .row > .col-sm-8 {
		min-height: 0;
		overflow-y: auto;
	}

	.actie-modal .actie-keuze {
		flex: 0 1 auto;
		min-height: 0;
		overflow-y: auto;
		margin-bottom: 0;
	}
}

.actiemodal__veld { min-width: 0; }

.actiemodal__omschrijving,
.actiemodal__ratelimit { margin-bottom: 16px; }

/* De veldlabels in kleine kapitalen, zoals in de hero's en de andere
   dialogen; de labels om een schakelaar zijn de optie zelf en blijven gewone
   tekst. */
.actiemodal__veld > label,
.action-form .form-group > label {
	display: block;
	margin: 0 0 6px;
	font-size: 10.5px;
	font-weight: 600;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--ink-faint);
}

.actiemodal__hintinline {
	margin-left: 8px;
	font-weight: 500;
	letter-spacing: 0;
	text-transform: none;
	color: var(--ink-faint);
}

.action-form .form-control {
	height: 36px;
	border-radius: 8px;
}

.actiemodal__schakelrij {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	margin: 0;
	font-size: 13.5px;
	font-weight: 400;
	color: var(--ink);
	cursor: pointer;
}

/* De schakelaar staat bovenaan, met een lijn tussen hem en de velden. Van
   de twee zinnen ernaast is alleen die bij zijn stand te zien. Dat regelt
   css en geen script, omdat trigger-acties.js de schakelaar bij het openen
   van een bestaande actie met prop('checked') zet, en dat geeft geen
   change-event. Rechts ernaast staan de knoppen die een actie zelf in de kop
   zet (action-header-template in trigger/actions.php). */
.actiemodal__status {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 16px;
	padding-bottom: 14px;
	border-bottom: 1px solid var(--line);
}

.actiemodal__knoppen {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-left: auto;
}

.actiemodal__status .schakel:checked ~ .actiemodal__uit,
.actiemodal__status .schakel:not(:checked) ~ .actiemodal__aan { display: none; }

.actiemodal__raterij {
	display: flex;
	align-items: center;
	gap: 12px;
}

.actiemodal__schuif {
	flex: 1 1 auto;
	height: 36px;
	margin: 0;
	padding: 0;
	accent-color: var(--brand-solid);
}

.actiemodal__ratewaarde {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 96px;
	height: 32px;
	padding: 0 12px;
	border: 1px solid var(--line);
	border-radius: 999px;
	background: var(--surface-sunken);
	font-family: var(--font-mono);
	font-size: 12.5px;
	color: var(--ink);
}

.actiemodal__hint {
	margin: 6px 0 0;
	font-size: 12px;
	color: var(--ink-muted);
}

/* Met het id erbij, want bootstrap.css van dit project zet #edit-actions
   .CodeMirror op 200 en dat won anders van deze regel. */
#edit-actions .actiemodal__code .CodeMirror {
	height: 280px;
	padding: 6px 0;
	border: 1px solid var(--line);
	border-radius: 10px;
	font-size: 13px;
}

.actiemodal__async { margin: 14px 0 8px; }

/* --- het formulier van een melding ------------------------------------------ *
 * Show notification (action-template-14 in trigger/actions.php): onder de
 * velden die elke actie heeft, met een lijn ertussen, de naam, de inhoud, de
 * twee kleuren met hun kleurcode, het element met de positie, en hoe de
 * melding weggaat. De kleurvakken zijn die van het tagformulier
 * (kenmerkform__kleur).
 *
 * De paren staan 5 op 6. Gemeten op 30 september 2026 in Chrome op
 * 1566 × 757, in de dialoog van een nieuwe actie: het formulier was 515 breed,
 * de keuzelijst "position" had 262 nodig en het label van het element met
 * zijn hint 214. Half om half kregen ze elk 250, en dan viel het eind van
 * "inside the target, at the beginning" weg; 5 op 6 geeft 227 en 272. Is het
 * formulier smaller dan 500, zoals op een telefoon, dan staan de paren onder
 * elkaar.
 */
.actiemodal__melding,
.actiemodal__talkbutton {
	container-type: inline-size;
	display: flex;
	flex-direction: column;
	gap: 16px;
	padding-top: 16px;
	border-top: 1px solid var(--line);
}

.actiemodal__paar {
	display: grid;
	grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
	gap: 16px;
	align-items: end;
}

@container (max-width: 499px) {
	.actiemodal__paar { grid-template-columns: minmax(0, 1fr); }
}

.actiemodal__melding .actiemodal__schakelrij { align-self: flex-start; }

.actiemodal__mono { font-family: var(--font-mono); font-size: 13px; }

.actiemodal__getal { width: 96px; }

.actiemodal__kleur { display: flex; align-items: center; gap: 10px; }

.actiemodal__kleur output {
	font: 500 12.5px var(--font-mono);
	color: var(--ink-muted);
	text-transform: uppercase;
}

/* Een vak met uitleg onder de velden, zoals bij de Talk-button (functie 15):
   wanneer de knop verschijnt. Sinds 2 oktober 2026. */
.actiemodal__uitleg {
	display: flex;
	gap: 10px;
	padding: 10px 12px;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	background: var(--surface-sunken);
	font-size: 12.5px;
	line-height: 1.45;
	color: var(--ink-muted);
}
.actiemodal__uitleg > i { flex: 0 0 auto; margin-top: 2px; color: var(--brand-ink); }
.actiemodal__uitleg p { margin: 0; }
.actiemodal__uitleg b { font-weight: 600; color: var(--ink); }

/* Visueel bewerken (meldingproef.js): een knop rechts naast de schakelaar,
   met een popover eronder voor het adres van de pagina. De popover hangt aan
   de rechterkant van de knop en is op een smal scherm zo breed als er plaats
   is. */
.actiemodal__visueel { position: relative; flex: 0 0 auto; }

.actiemodal__knop[aria-expanded="true"] {
	border-color: var(--brand);
	background: var(--brand-tint);
	color: var(--brand-ink);
}

.actiemodal__pop {
	position: absolute;
	top: calc(100% + 10px);
	right: 0;
	z-index: 5;
	width: min(380px, calc(100vw - 48px));
	padding: 14px;
	background: var(--surface-raised);
	border: 1px solid var(--line);
	border-radius: 12px;
	box-shadow: var(--shadow-lg);
}

/* Het pijltje naar de knop. */
.actiemodal__pop::before {
	content: "";
	position: absolute;
	top: -7px;
	right: 58px;
	width: 12px;
	height: 12px;
	background: var(--surface-raised);
	border-left: 1px solid var(--line);
	border-top: 1px solid var(--line);
	transform: rotate(45deg);
}

.actiemodal__pop .actiemodal__hint { line-height: 1.45; }

.actiemodal__proefrij { display: flex; gap: 8px; }
.actiemodal__proefrij .form-control { flex: 1 1 auto; min-width: 0; }
.actiemodal__proefrij .actiemodal__knop { flex: 0 0 auto; }

.actiemodal__proefstatus {
	margin: 6px 0 0;
	font-size: 12px;
	font-weight: 600;
	color: var(--ink-muted);
}

.actiemodal__proefstatus[data-soort="goed"] { color: var(--ok); }
.actiemodal__proefstatus[data-soort="fout"] { color: var(--warn); }

.actiemodal__voet {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 14px 24px;
}

.actiemodal__ruimte { flex: 1 1 auto; }

.actiemodal__knop {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	height: 36px;
	padding: 0 16px;
	border: 1px solid var(--line-strong);
	border-radius: 10px;
	background: transparent;
	font-size: 13px;
	font-weight: 600;
	color: var(--ink);
	cursor: pointer;
}

.actiemodal__knop:hover,
.actiemodal__knop:focus { background: var(--surface-sunken); }

.actiemodal__knop--vol {
	border-color: transparent;
	background: var(--brand-solid);
	color: var(--on-brand);
	box-shadow: 0 4px 12px -5px rgba(11, 124, 181, .7);
}

.actiemodal__knop--vol:hover,
.actiemodal__knop--vol:focus { background: var(--brand-solid-hover); color: var(--on-brand); }

.actiemodal__knop--weg { color: var(--danger); }

.actiemodal__knop--weg:hover,
.actiemodal__knop--weg:focus {
	border-color: color-mix(in srgb, var(--danger) 35%, var(--line-strong));
	background: color-mix(in srgb, var(--danger) 8%, var(--surface-raised));
	color: var(--danger);
}

@media (max-width: 991px) {
	.actie-modal .modal-dialog { width: auto; }
}


/* --- de kop van een trigger ------------------------------------------------ *
 * De naam stond in een input-group van standaardhoogte, verstopt in een
 * form-inline. Het is het hoofdelement van deze pagina en krijgt nu ook die
 * ruimte; rechts ernaast staat of de trigger loopt.
 */

/* Het gedeelde kader voor de blokken op een detailpagina. Heette .trigger-vak,
 * maar er is niets triggerspecifieks aan en contentgrouping heeft precies dezelfde
 * opbouw: een naam en dezelfde expressiebouwer. Vandaar de neutrale naam.
 *
 * De drie vakken op de triggerpagina -- de kop, de expressie en de acties --
 * deelden hun kader niet: de kop had padding 18px en marge 20px, de acties
 * padding 20px en marge 24px, en de expressie stond er helemaal kaal tussenin.
 * Nu komt het kader van .vak en houden de blokken zelf alleen hun
 * eigen indeling over. Verander je hier iets, dan verschuiven alle drie mee.
 */

.vak {
	margin: 0 0 20px;
	padding: 20px 22px;
	background: var(--surface-raised);
	border: 1px solid var(--line);
	border-radius: var(--radius-lg);
}

/* Een vak met een lijst erin heeft minder binnenruimte nodig: de regels dragen
   hun eigen padding al. De groepenkolom van het contentbuilder-overzicht doet
   hetzelfde nog met een eigen .sidebar-regel in die view; die kan hierheen. */
.vak--lijst { padding: 8px; }

.vak__titel {
	margin: 0 0 14px;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--ink-muted);
}

/* In de actiekop draagt .trigger-acties__kop de onderruimte al. */
.trigger-acties__kop .vak__titel { margin-bottom: 0; }

/* De expressiebouwer bracht zijn eigen omhulsel mee: dezelfde achtergrond en
 * een rand, wat binnen het vak een dubbel kader gaf. Alleen de buitenste groep
 * wordt uitgekleed; geneste groepen houden hun rand, want daar leest de
 * nesting aan af. */
.vak > .query-builder > .rules-group-container {
	padding: 0;
	background: transparent;
	border: none;
	box-shadow: none;
}

.trigger-kop {
	display: flex;
	align-items: flex-end;
	gap: 24px;
}

.trigger-kop__naam { flex: 1 1 auto; min-width: 0; }

.trigger-kop__naam label {
	display: block;
	margin: 0 0 4px;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--ink-muted);
}

.trigger-kop__invoer {
	width: 100%;
	padding: 6px 0;
	border: none;
	border-bottom: 2px solid transparent;
	border-radius: 0;
	background: transparent;
	font-size: 22px;
	font-weight: 600;
	line-height: 1.25;
	color: var(--ink);
	transition: border-color .12s ease;
}

.trigger-kop__invoer::placeholder { color: var(--ink-faint); font-weight: 400; }

.trigger-kop__invoer:hover   { border-bottom-color: var(--line-strong); }
.trigger-kop__invoer:focus   { outline: none; border-bottom-color: var(--brand); }

.trigger-kop__staat {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	gap: 9px;
	padding-bottom: 8px;
}

/* "actief" en "uit" zijn niet even breed. Zonder ondergrens verspringt het
 * naamveld ernaast bij het omzetten, want de schakelaar staat nu links. */
.trigger-kop__staatlabel {
	margin: 0;
	min-width: 40px;
	font-size: 12px;
	font-weight: 600;
	color: var(--ink-muted);
	cursor: pointer;
	user-select: none;
}

@media (max-width: 640px) {
	.trigger-kop { flex-wrap: wrap; align-items: stretch; }
	.trigger-kop__staat { padding-bottom: 0; }
}


/* --- in woorden: de trigger beschreven door het model ---------------------- *
 * Het vak tussen de kop en Als op de triggerpagina, sinds 7 september 2026.
 * De inhoud komt van trigger-woorden.js. De standen: aan het schrijven
 * (skelet), klaar (tekst, eventueel met het amberblok "Opvallend"), leeg of
 * mislukt (één regel), en verouderd (gedimd, met een melding erboven) zodra
 * er op de pagina iets openstaat dat nog niet is opgeslagen.
 */

.woorden__kop {
	display: flex;
	flex-wrap: wrap;   /* op een telefoon past de kostenregel (dev) niet naast de titel */
	align-items: baseline;
	justify-content: space-between;
	gap: 8px 16px;
	margin-bottom: 12px;
}

.woorden__kop .vak__titel { margin: 0; }

.woorden__bron {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 12px;
	color: var(--ink-muted);
}

.woorden__bron .fa { color: var(--brand); }

/* De kostenregel, alleen op dev (TriggerController::kostenTonen): wat de
   aanroep kostte, "$ 0,0068 · 1.234 tokens in, 210 uit". Met margin-left auto
   schuift hij tegen "Opgesteld door AI" aan in plaats van in het midden.
   Geen nowrap: gemeten op 9 september 2026 was de regel met "uit de kast"
   erbij 338 breed en de kop op 375 maar 284, en dan liep hij het vak uit. */
.woorden__kosten {
	margin-left: auto;
	font-family: var(--font-mono);
	font-variant-numeric: tabular-nums;
	font-size: 11.5px;
	color: var(--ink-faint);
}

.woorden__kosten[hidden] { display: none; }

.woorden__tekst {
	max-width: 78ch;
	margin: 0;
	font-size: 16px;
	line-height: 1.6;
	color: var(--ink);
}

.woorden__tekst + .woorden__tekst { margin-top: 10px; }

/* Dezelfde amber tint als de stap in een lege stand (.leegstand__stap). */
.woorden__opvallend {
	margin: 18px 0 0;
	padding: 14px 16px;
	border-radius: var(--radius);
	background: color-mix(in srgb, var(--amber) 16%, var(--surface-raised));
}

.woorden__opvallend h3 {
	margin: 0 0 6px;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--amber-pil);
}

.woorden__opvallend ul { margin: 0; padding-left: 18px; }
.woorden__opvallend li { margin: 2px 0; font-size: 14px; color: var(--ink); }

.woorden__voet {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	flex-wrap: wrap;
	margin: 16px 0 0;
	padding-top: 12px;
	border-top: 1px solid var(--line);
	font-size: 12px;
	color: var(--ink-muted);
}

.woorden__link {
	padding: 0;
	border: none;
	background: none;
	font: inherit;
	font-weight: 600;
	color: var(--brand-ink);
	cursor: pointer;
}

.woorden__link:hover,
.woorden__link:focus { text-decoration: underline; outline: none; }

/* aan het schrijven */
.woorden__skelet { display: grid; gap: 10px; margin: 4px 0 0; }

.woorden__skelet span {
	display: block;
	height: 14px;
	border-radius: 999px;
	background: linear-gradient(90deg, var(--line) 0%, var(--surface-hover) 50%, var(--line) 100%);
	background-size: 200% 100%;
	animation: woorden-glans 1.6s linear infinite;
}

.woorden__skelet span:nth-child(1) { width: 92%; }
.woorden__skelet span:nth-child(2) { width: 97%; }
.woorden__skelet span:nth-child(3) { width: 71%; }

@keyframes woorden-glans {
	from { background-position: 200% 0; }
	to   { background-position: -200% 0; }
}

@media (prefers-reduced-motion: reduce) {
	.woorden__skelet span { animation: none; }
}

.woorden__bezig { margin: 12px 0 0; font-size: 13px; color: var(--ink-muted); }

/* leeg of mislukt */
.woorden__leeg { margin: 0; font-size: 14px; color: var(--ink-muted); }
.woorden__leeg .woorden__link { margin-left: 6px; }

/* verouderd: er staat iets open dat nog niet is opgeslagen */
.woorden--verouderd .woorden__tekst,
.woorden--verouderd .woorden__opvallend { opacity: .45; }

.woorden__melding {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0 0 14px;
	padding: 10px 14px;
	border-left: 3px solid var(--amber);
	border-radius: 0 var(--radius) var(--radius) 0;
	background: color-mix(in srgb, var(--amber) 16%, var(--surface-raised));
	font-size: 13px;
	color: var(--ink);
}

.woorden__melding .fa { color: var(--amber-pil); flex: 0 0 auto; }

/* display: flex op de klasse wint anders van het hidden-attribuut: gemeten op
   7 september 2026 stond de melding gewoon in beeld terwijl de dom zei dat hij
   verborgen was. Zelfde oplossing als bij .ontvangers en .mailboek__*. */
.woorden__melding[hidden],
.woorden__voet[hidden] { display: none; }


/* --- openstaande wijzigingen aan acties ------------------------------------ *
 * Op de detailpagina gaat niets weg voordat er op Opslaan wordt gedrukt. Dan
 * moet wel te zien zijn wat er nog openstaat.
 */

.trigger-actie--gewijzigd,
.trigger-actie--nieuw { box-shadow: inset 3px 0 0 var(--brand); }

.trigger-actie--verwijderd {
	box-shadow: inset 3px 0 0 var(--danger);
	opacity: .55;
}

.trigger-actie--verwijderd .trigger-actie__naam,
.trigger-actie--verwijderd .trigger-actie__omschrijving { text-decoration: line-through; }

.trigger-actie__merk {
	flex: 0 0 auto;
	margin-left: auto;
	padding: 2px 9px;
	border: 1px solid var(--brand);
	border-radius: 999px;
	font-size: 11px;
	font-weight: 600;
	color: var(--brand-ink);
	white-space: nowrap;
}

/* De diskette in de werkbalk springt zolang er iets openstaat; die animatie
   bestond al voor het bedrijfsdetail. */


/* --- lege staat ------------------------------------------------------------- *
 * Voor een lijst of raster waar niets in staat. Zonder zo'n blok is een lege
 * groep niet te onderscheiden van een groep die nog aan het laden is, of van een
 * scherm dat stuk is -- er staat dan gewoon niets naast de lijst.
 *
 * Op het contentbuilder-overzicht kwam dat op 31 augustus 2026 voor bij 5 van de
 * 9 groepen.
 *
 * De streepjesrand is er om hem te onderscheiden van een gevulde kaart: dit is
 * een plek waar iets hoort te komen, geen inhoud.
 */
.leegstaat {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
	padding: 48px 24px;
	background: var(--surface-raised);
	border: 1px dashed var(--line-strong);
	border-radius: var(--radius-lg);
	text-align: center;
}

.leegstaat__icoon {
	font-size: 28px;
	line-height: 1;
	color: var(--ink-faint);
}

.leegstaat__tekst {
	margin: 0;
	font-size: 13px;
	color: var(--ink-muted);
}


/* --- de tegels in "nieuwe interface koppelen" -------------------------------- *
 * Stonden als .thumbnail in col-xs-3-kolommen. Die zweven, en een tegel die hoger
 * uitvalt vangt de volgende op: gemeten op 31 augustus 2026 was HubSpot 279px
 * tegen 267 voor de rest, waardoor Pipedrive in de vierde kolom bleef hangen en
 * er een gat van 225 bij 267 onder de eerste drie viel.
 */
.koppelraster {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
	/* Alle tegels even hoog, niet alleen die binnen dezelfde rij. Een rasterrij
	   voegt zich anders naar zijn hoogste tegel, en dat verschilde per rij: gemeten
	   op 31 augustus 2026 224, 206 en 189px voor de drie rijen. */
	grid-auto-rows: 1fr;
	gap: 16px;
}

/* hidden is een stijl van de browser zelf en verliest van de display hieronder. */
.koppelraster [hidden] { display: none !important; }

/* Sinds 7 september 2026 in de vorm van de kaarten elders: het logo links,
   de naam en de omschrijving links uitgelijnd, een rustige knop die pas vol
   kleurt als je de tegel aanwijst. Was gecentreerd met een volle blauwe knop
   per tegel, elf knoppen die om aandacht vroegen. */
.koppeltegel {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 8px;
	padding: 14px;
	background: var(--surface-raised);
	border: 1px solid var(--line);
	border-radius: 12px;
	text-align: left;
	transition: border-color .12s ease;
}

.koppeltegel:hover { border-color: var(--brand); }

.koppeltegel--dood { opacity: .55; }

/* Een vast vak voor het logo. De bronbestanden lopen van 64 tot 185px breed bij
   een hoogte van 64 -- gemeten over de tien zichtbare tegels -- dus zonder vak
   staat elk merk op een andere hoogte en begint de naam eronder te dansen. */
.koppeltegel__logo {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	width: 100%;
	height: 40px;
}

.koppeltegel__logo img {
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
}

.koppeltegel__naam {
	margin: 0;
	font-size: 13.5px;
	font-weight: 600;
	color: var(--ink);
}

/* Deze groeit mee met wat er over is. Daardoor liggen de knoppen eronder op een
   lijn zonder dat de tekst een vaste hoogte nodig heeft -- dat was juist de
   oorzaak van het oude verschil. */
.koppeltegel__tekst {
	flex: 1 1 auto;
	margin: 0;
	font-size: 12px;
	line-height: 1.45;
	color: var(--ink-muted);
}

.koppeltegel__knop {
	width: 100%;
	height: 32px;
	padding: 0 12px;
	border: 1px solid transparent;
	border-radius: 8px;
	background: var(--brand-tint);
	color: var(--brand-ink);
	font-size: 13px;
	font-weight: 600;
	white-space: normal;
}

.koppeltegel:hover .koppeltegel__knop,
.koppeltegel__knop:focus { background: var(--brand-solid); color: var(--on-brand); }

.koppeltegel--dood .koppeltegel__knop,
.koppeltegel--dood:hover .koppeltegel__knop { background: var(--surface-sunken); color: var(--ink-muted); cursor: default; }


/* --- de interfacelijst ------------------------------------------------------ *
 * De logo's stonden als <img width='32px'> in de regel. Twee bezwaren, gemeten
 * op 31 augustus 2026 over de achttien interfaces van dit account:
 *
 * - de logo's zijn 32px breed maar 11 tot 32px hoog, en omdat ze in de tekstregel
 *   meeliepen kreeg de lijst vijf verschillende regelhoogtes: 42, 43, 51, 52 en
 *   64px. Nu staan ze in een vak van vaste afmetingen, dus is elke regel gelijk.
 * - width='32px' is geen geldige waarde voor dat attribuut; dat neemt een aantal
 *   pixels zonder eenheid. Browsers zijn hier mild in, maar de maat hoort toch in
 *   de opmaak en niet in de markup.
 */
.interfacelijst .nav > li > a {
	display: flex;
	align-items: center;
	gap: 10px;
}

.interfacelijst__logo {
	display: flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 24px;
}

.interfacelijst__logo img {
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
}

/* De omschrijving is soms een url. Die kapt af; de volledige tekst staat in het
   title-attribuut. */
.interfacelijst__naam {
	min-width: 0;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}


/* --- de kenmerktabellen ------------------------------------------------------ *
 * Gedeeld door het tagbeheer en het relatietypebeheer. Niet elk scherm gebruikt
 * elke kolom: ouderdom en staat bestaan alleen bij tags, want een relatietype
 * heeft ze niet.
 *
 * De kolommen stonden in de omgekeerde volgorde -- eerst de knoppen, dan de
 * ouderdom, en de tag zelf helemaal rechts, met 880 van de 1263px voor die
 * laatste kolom terwijl er niets in stond wat die ruimte nodig had. Gemeten op
 * 1 september 2026.
 *
 * De tag wordt getoond als Kenmerk (rond tegeltje met de naam), dezelfde
 * bouwsteen als op het bedrijvenoverzicht, zodat het beheerscherm laat zien
 * wat je elders te zien krijgt. De knoppen zijn .actieknop, zoals overal in deze laag.
 */

.kenmerktabel td { vertical-align: middle; }

/* De tagkolom krijgt de ruimte die hij nodig heeft en niet meer: de chip is zo
   breed als zijn naam. De rest van de breedte gaat naar de kolom ernaast, zodat
   de knoppen rechts blijven staan waar je ze zoekt. */
.kenmerktabel__tag      { width: 1%; white-space: nowrap; }
.kenmerktabel__ouderdom { width: 12em; white-space: nowrap; color: var(--ink-muted); font-size: 13px; }
.kenmerktabel__staat    { width: 8em; }
.kenmerktabel__acties   { width: 1%; white-space: nowrap; text-align: right; }

.kenmerktabel__acties .actierij { display: inline-flex; }

/* "blijft staan" is geen waarde maar een afwezigheid; hij mag zachter staan dan
   een echt aantal dagen. */
.kenmerktabel__blijft { color: var(--ink-muted); }

/* Een rij van een tag die uit staat. Alleen het kenmerk dempen en niet de hele
   rij, want de knoppen moeten bruikbaar blijven -- juist bij een tag die uit
   staat wil je hem kunnen aanzetten. */
.tagrij--uit .kenmerk { opacity: .55; }

/* De staat stond alleen in grijstinten. Kleur als enige drager leest slecht en
   valt weg voor wie kleuren niet onderscheidt, dus er staat nu ook een woord. */
.staat {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 12px;
	font-weight: 600;
	color: var(--ink-muted);
}

.staat::before {
	content: "";
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: currentColor;
}

.staat--aan { color: var(--ok); }
.staat--uit { color: var(--ink-muted); }


/* --- het formulier voor een kenmerk ----------------------------------------- *
 * Gedeeld door het tagbeheer en het relatietypebeheer. Een tag en een
 * relatietype zijn allebei een gekleurd kenmerk met een icoon dat aan een
 * bedrijf hangt, en hun formulier is op twee velden na hetzelfde.
 *
 * Icoon, kleur en ouderdom stonden in col-md-2, col-md-2 en col-md-6: samen
 * tien van de twaalf kolommen, dus met een gat rechts, en op een modal van
 * 600px zijn die te smal voor hun invoervelden. Nu een flexrij die zich naar
 * zijn inhoud voegt.
 */

.kenmerkform { display: flex; flex-direction: column; gap: 4px; }

.kenmerkform__rij {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: 16px;
}

.kenmerkform__veld { margin-bottom: 0; }
.kenmerkform__veld--ouderdom { flex: 1 1 auto; min-width: 0; }

.kenmerkform label {
	display: block;
	margin-bottom: 6px;
	font-size: 12px;
	font-weight: 600;
	color: var(--ink-muted);
}

/* Een kleurkiezer is een vlak en geen tekstveld; met de hoogte van een
   form-control ernaast staan ze op een lijn. */
.kenmerkform__kleur {
	width: 56px;
	height: 34px;
	padding: 2px;
	cursor: pointer;
}

.kenmerkform__ouderdom { display: flex; align-items: center; gap: 10px; }

.kenmerkform__dagen { display: flex; align-items: center; gap: 8px; }
.kenmerkform__dagen .form-control { width: 5.5em; }
.kenmerkform__dagen label { margin: 0; }

/* De aan/uit-schakelaar van de tag hoort bij de tag als geheel en stond eerst
   in een smalle kolom naast het naamveld, waardoor je "actief" las voordat je
   wist waarover. */
.kenmerkform__staat {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 18px;
	padding-bottom: 16px;
	border-bottom: 1px solid var(--line);
}

.kenmerkform__staat label { margin: 0; font-size: 13.5px; color: var(--ink); cursor: pointer; }

/* Het voorbeeld: naam, icoon en kleur komen samen in een chip, zodat je ziet
   wat je maakt voordat je opslaat. */
.kenmerkform__voorbeeld {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 16px;
	padding: 14px 16px;
	background: var(--surface-sunken);
	border: 1px solid var(--line);
	border-radius: var(--radius);
}

.kenmerkform__label {
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--ink-muted);
}

/* Het voorbeeld in het tag- en relatietypebeheer is het Kenmerk zelf (tegel
   met naam), sinds 9 september 2026 ook voor tags. */
.kenmerkform__voorbeeldtype { font-size: 13.5px; }

.kenmerkform__waarschuwing { color: var(--ink-muted); font-size: 13px; }

/* Waarom een veld op readonly staat hoort erbij te staan; anders lijkt het
   kapot. */
.kenmerkform__hint {
	display: block;
	margin-top: 6px;
	font-size: 12px;
	color: var(--ink-muted);
}


/* --- het tagvenster --------------------------------------------------------- *
 * De modal uit element/tagvenster.blade.php, sinds 7 september 2026 met twee
 * standen: de lijst (zoekveld, per tag de chip, de houdbaarheid, de staat en
 * een potlood) en het formulier voor nieuw en bewerken, met dezelfde velden
 * als het tagbeheer. Het formulier kan ook in een andere dialoog geschoven
 * worden (--ingeschoven), zodat er geen modal op een modal komt. Daarvoor
 * maakte het venster alleen aan en toonde het de bestaande tags als chips.
 */

.tagvenster { display: flex; flex-direction: column; }

.tagvenster__overzicht[hidden],
.tagvenster__form[hidden] { display: none; }

/* De lijst in de vorm van het keuzevak op de bedrijfspagina. */
.tagvenster__lijstvak {
	max-height: min(56vh, 380px);
	overflow-y: auto;
	padding: 4px;
	background: var(--surface-raised);
	border: 1px solid var(--line);
	border-radius: 10px;
}

.tagvenster__zoek {
	position: sticky;
	top: 0;
	z-index: 1;
	display: block;
	width: 100%;
	height: 30px;
	margin: 0 0 4px;
	padding: 0 8px;
	border: 0;
	border-bottom: 1px solid var(--line);
	background: var(--surface-raised);
	font-size: 13px;
	color: var(--ink);
}

.tagvenster__zoek:focus { outline: none; border-bottom-color: var(--brand); }

.tagvenster__rij {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto auto 28px;
	gap: 10px;
	align-items: center;
	min-height: 34px;
	padding: 0 4px 0 8px;
	border-radius: 8px;
}

.tagvenster__rij:hover { background: var(--surface-hover); }
.tagvenster__rij[hidden] { display: none; }
.tagvenster__rij .kenmerk { min-width: 0; }
.tagvenster__rij--uit .kenmerk { opacity: .55; }

.tagvenster__meta { font-size: 11.5px; color: var(--ink-faint); white-space: nowrap; }

.tagvenster__potlood {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	padding: 0;
	border: 0;
	border-radius: 7px;
	background: transparent;
	color: var(--ink-muted);
	cursor: pointer;
}

.tagvenster__potlood:hover,
.tagvenster__potlood:focus { background: var(--brand-tint); color: var(--brand-ink); }

.tagvenster__laden,
.tagvenster__leeg,
.tagvenster__geen {
	margin: 0;
	padding: 10px 8px;
	font-size: 13px;
	color: var(--ink-muted);
}

.tagvenster__form { display: flex; flex-direction: column; gap: 4px; }

/* Ingeschoven in een andere dialoog houdt het formulier de breedte die het
   in het eigen tagvenster heeft. Gemeten op 29 september 2026: daar 550px;
   zonder grens werd het in Indelen 670px en in de importer 778px breed. */
.tagvenster__form--ingeschoven { max-width: 550px; }

.tagvenster__terug {
	align-self: flex-start;
	margin: 0 0 10px;
	padding: 0;
	border: 0;
	background: none;
	font-size: 12.5px;
	font-weight: 600;
	color: var(--brand-ink);
	cursor: pointer;
}

/* Houdbaarheid: de schakelaar en het aantal dagen als één zin, "Vervalt na
   [180] dagen". Staat de schakelaar uit, dan vervaagt het aantal mee. */
.tagvenster__houdbaarheid { margin-top: 4px; }
.tagvenster__houdbaarheid .kenmerkform__ouderdom { min-height: 36px; }
.tagvenster__houdbaarheid .kenmerkform__dagen { transition: opacity .12s ease; }
.tagvenster__houdbaarheid .kenmerkform__dagen.is-uit { opacity: .45; }

.tagvenster__schakels {
	display: flex;
	flex-wrap: wrap;
	gap: 10px 24px;
	margin: 6px 0 4px;
}

.tagvenster__fout {
	margin: 6px 0 0;
	padding: 8px 10px;
	background: var(--danger-tint);
	border: 1px solid var(--danger);
	border-radius: var(--radius);
	color: var(--danger);
	font-size: 13px;
}

.tagvenster__fout[hidden] { display: none; }

/* Een voorwaarde die naar een tag verwijst die niet meer bestaat. Zonder deze
   markering zou zo'n regel er gewoon leeg bij staan. */
.query-builder .rule-container.regel--tagweg {
	border-color: var(--warn);
	background: var(--warn-tint);
}


/* --- de dashboardgrafieken -------------------------------------------------- *
 * De panelen krijgen hun hoogte als inline stijl van de server mee, samen met
 * overflow: hidden en white-space: nowrap. De taartgrafieken bestaan sinds
 * 2 september 2026 uit een html-titel met daaronder het vlak waar ECharts in
 * tekent; daarvoor tekende DevExtreme de titel in de svg zelf, op 28px in een
 * eigen lettertype.
 *
 * Een flexkolom verdeelt die vaste hoogte: de titel neemt wat hij nodig heeft
 * en het vlak krijgt de rest. min-height: 0 hoort erbij, anders weigert een
 * flexitem kleiner te worden dan zijn inhoud en loopt het vlak buiten het
 * paneel.
 */

.panel-dashboard.pie,
.panel-dashboard.chart {
	display: flex;
	flex-direction: column;
	padding: 16px 18px;
}

.grafiek__titel {
	flex: 0 0 auto;
	margin: 0 0 4px;
	color: var(--ink);
	font-size: 17px;
	font-weight: 500;
	line-height: 1.3;
	/* De server zet white-space: nowrap op het paneel; een titel hoort te mogen
	   afbreken. */
	white-space: normal;
}

.grafiek__vlak {
	flex: 1 1 auto;
	min-height: 0;
}

/* Wat er staat als er in de gekozen periode niets gebeurd is. Zonder dit tekent
   ECharts een raster met een platte lijn op nul, en dat ziet eruit als een
   storing terwijl het gewoon "niets" betekent. */
.grafiek__leeg {
	display: flex;
	flex: 1 1 auto;
	align-items: center;
	justify-content: center;
	min-height: 40px;
	margin: 0;
	color: var(--ink-muted);
	font-size: 12px;
	text-align: center;
}


/* Op het dashboard klapt een leeg paneel in tot één regel, sinds 7 september
   2026: de titel links, "geen gegevens in deze periode" rechts. De hoogte
   staat inline op het paneel (dashboard/basic.blade.php), vandaar !important.
   Alleen binnen .dashboard; de ingebedde rapportage houdt zijn vaste maten. */
.dashboard .panel-dashboard.grafiek--leeg {
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	height: auto !important;
	min-height: 0;
	padding: 12px 18px;
}

.dashboard .panel-dashboard.grafiek--leeg .grafiek__titel { margin: 0; font-size: 14px; }
.dashboard .panel-dashboard.grafiek--leeg .grafiek__leeg { flex: 0 0 auto; min-height: 0; }

.dashboard__leeg { margin-bottom: 20px; }


/* --- de inbedbare rapportage (/layout/{id}) --------------------------------- *
 * Dit scherm staat in een iframe op de site van een klant. De blokken komen
 * een voor een binnen via xhr, en de opzet van de pagina komt van de api: een
 * page-header met een h1 en een h5, en per blok een div met een vaste hoogte.
 */

/* De kop stond in de standaardmaten van Bootstrap: een h1 van 36px met een
   grijze streep eronder, en de canonical url als h5 -- een kopniveau voor wat
   een bijschrift is. */
.page-header {
	margin: 0 0 20px;
	padding: 0 0 14px;
	border-bottom: 1px solid var(--line);
}

.page-header h1 {
	margin: 0;
	color: var(--ink);
	font-size: 22px;
	font-weight: 600;
	letter-spacing: -0.01em;
}

.page-header h1 small {
	color: var(--ink-muted);
	font-size: 14px;
	font-weight: 400;
}

.page-header h5 {
	margin: 4px 0 0;
	color: var(--ink-muted);
	font-size: 12px;
	font-weight: 400;
	overflow-wrap: anywhere;
}

/* Het getal en zijn onderschrift, midden in het vak. De <dl> die de api
   hierin zet droeg de standaardmarge van Bootstrap: 20px onder. Bij een vak
   van 100px hoog met 20px binnenruimte werd de inhoud daarmee 111px en werd
   het getal afgeknipt -- gemeten op 2 september 2026. */
.panel-dashboard.metric {
	display: flex;
	align-items: center;
	padding: 16px 18px;
}

.panel-dashboard.metric dl { margin: 0; width: 100%; }

.panel-dashboard.metric dt {
	margin: 0 0 2px;
	color: var(--ink-muted);
	font-size: 12px;
	font-weight: 400;
	white-space: normal;
}

/* Het icoon houdt zijn eigen familie: een regel op de dd erft alleen naar
   binnen, en de .fa- en .ph-klassen zetten hun lettertype rechtstreeks.

   Mono is hier bovendien smaller, niet breder. Gemeten op 4 september 2026 op
   20px/600: "999999" is 75px in Instrument Sans en 60px in Plex Mono, "77738"
   57,6 tegen 50. Dat scheelt in de krappe tegel waar de opmerking hieronder
   over gaat. */
.panel-dashboard.metric dd {
	margin: 0;
	color: var(--ink);
	font-size: 26px;
	font-weight: 600;
	line-height: 1.15;
	font-variant-numeric: tabular-nums;
}

/* De api geeft deze tegels col-xs-2 mee, en col-xs schaalt nergens mee: bij een
   venster van 780px is de tegel 100px breed en bij 375px nog 62px. Het gaat om
   de ingebedde weergave, dus de breedte is die van het iframe op de site van de
   klant en die kennen we niet. Daarom kijkt de tegel naar zijn eigen breedte in
   plaats van naar die van het venster. */
.panel-dashboard.metric { container-type: inline-size; }

@container (max-width: 160px) {
	.panel-dashboard.metric dt { font-size: 11px; }
	.panel-dashboard.metric dd { font-size: 20px; }
}

/* En op een telefoon twee tegels naast elkaar in plaats van zes op een rij:
   62px is voor geen enkel getal genoeg. De kolom draagt geen eigen kenmerk, dus
   hij is alleen te herkennen aan het blok dat erin staat. */
@supports selector(:has(*)) {
	@media (max-width: 767px) {
		[class*="col-"]:has(> .component.row-1) { width: 50%; }
	}
}

/* De bezoekerslijst scrolt binnen zijn vak -- vijftig regels in 830px -- dus
   de kop hoort mee te schuiven. Zonder dit weet je halverwege niet meer welke
   kolom welke is. */
.panel-dashboard.party-simple { padding: 16px 18px; }

.panel-dashboard.party-simple h3 {
	margin: 0 0 10px;
	color: var(--ink);
	font-size: 17px;
	font-weight: 500;
}

/* De cellen droegen elk het attribuut nowrap. Dat is presentatie in de markup
   en hoort hier.

   Hier stond bij dat jQuery zo'n attribuut zou laten vallen als je de cel als
   losse tag aanmaakt. Dat is onjuist: nagemeten op 2 september 2026 geeft
   jQuery 1.12.5-sec voor $('<td nowrap>') gewoon <td nowrap="">. De snelle
   route voor een enkele tag geldt alleen voor een tag zonder attributen; met
   attribuut gaat het door de gewone html-ontleding. De verhuizing naar de
   stylesheet blijft goed, alleen de reden klopte niet. */
.panel-dashboard.party-simple .table { margin: 0; font-size: 12px; }
.panel-dashboard.party-simple .table td { white-space: nowrap; }

/* Gemeten op 2 september 2026: hiermee alleen bleef de kop NIET staan. Na 400px
   scrollen stond hij op -354px ten opzichte van het paneel, dus buiten beeld.
   Een sticky element kleeft aan zijn dichtstbijzijnde scrollcontainer, en
   .table krijgt hierboven in dit bestand overflow: hidden mee -- daarmee is de
   tabel zelf die container, en die scrolt niet. Het paneel eromheen scrolt wel.
   (Die overflow staat er niet voor niets: hij laat de border-radius van .table
   de hoeken werkelijk afsnijden. Hier mag hij weg omdat dit paneel zijn eigen
   afgeronde hoeken al heeft.)

   Met overflow: visible op de tabel klikt de kop vast op 17px en blijft hij
   daar staan, zowel op 400px als op 900px scrollen. */
.panel-dashboard.party-simple .table { overflow: visible; }

.panel-dashboard.party-simple .table th {
	position: sticky;
	top: 0;
	z-index: 1;
	background: var(--surface-raised);
}


/* --- het instellingenscherm (/instellingen) --------------------------------- *
 * Zes verwijzingen naar de instellingenschermen.
 *
 * De pagina had geen kop: de controller zet "Instellingen" als pagetitle en die
 * komt alleen in <title> terecht, niet in beeld. Daardoor was de hoogste kop op
 * het scherm die van het promotiepaneel.
 */
.instellingenkop {
	margin: 0 0 16px;
	color: var(--ink);
	font-size: 22px;
	font-weight: 600;
	letter-spacing: -0.01em;
}

/* De zes verwijzingen stonden als kale links met een icoon van 70px en een
   marge van 50px rondom -- opmaak uit bootstrap.css. Dat gaf 100px tussen de
   twee rijen en, bij een venster van 718px hoog, 309px leegte eronder, terwijl
   niets aangaf dat het knoppen waren.

   Ze zijn nu kaarten, zoals de rest van de applicatie. Nagemeten op de
   draaiende pagina: 351x118 per kaart en 20px tussen de rijen.

   Doorgerekend, licht / donker:
     label --ink op de kaart          14,50 / 13,22   (eis 4,5)
     icoon --brand-ink op de kaart     5,55 /  6,70   (eis 3)
     bij hover, label op --brand-tint 13,05 / 11,74
     bij hover, rand --brand tegen de pagina  3,26 / 8,00  (eis 3) */
.btn-big-icon {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 10px;
	margin: 0 0 20px;
	padding: 22px 14px;
	min-height: 118px;
	border: 1px solid var(--line);
	border-radius: var(--radius-lg);
	background-color: var(--surface-raised);
	color: var(--ink);
	font-size: 14px;
	font-weight: 500;
	text-align: center;
	text-decoration: none;
	transition: background-color .12s ease, border-color .12s ease;
}

.btn-big-icon > i {
	display: block;
	font-size: 30px;
	color: var(--brand-ink);
}

/* Zweven gaf hiervoor juist minder nadruk: de labels waren in rust onderstreept
   en de enige hoverregel haalde die onderstreping weg. Verder veranderde er
   niets -- geen achtergrond, geen kleur, geen verplaatsing. */
.btn-big-icon:hover,
.btn-big-icon:focus {
	border-color: var(--brand);
	background-color: var(--brand-tint);
	color: var(--ink);
	text-decoration: none;
}

@media (prefers-reduced-motion: reduce) {
	.btn-big-icon { transition: none; }
}


/* --- de rechten van een gebruiker (/user/{id}) ------------------------------ *
 * Elf tegels, een per module, met daarin de rechten als vinkvakjes.
 *
 * De tegels stonden op een vaste hoogte van 10em, gezet met een .panel-regel in
 * de view -- dus op elk paneel op die pagina. Gemeten op 3 september 2026 had
 * de inhoud er 89 van de 140 pixels van nodig: 51px leegte per tegel, elf keer.
 * En omdat het een hoogte was en geen ondergrens, zou de inhoud de tegel
 * uitlopen zodra een module er een tweede recht bij krijgt.
 *
 * De rij is nu een flexrij. De tegels groeien naar hun inhoud -- nagemeten op
 * de dev-server 96,08px in plaats van 140, opgebouwd uit 36,39 kop, 57,69 body
 * en tweemaal een rand van 1px -- en blijven binnen een regel toch even hoog,
 * ook als de ene module meer rechten heeft dan de andere. De kolombreedtes van
 * bootstrap blijven gelden: nagemeten 4, 4 en 3 tegels per rij, net als
 * daarvoor.
 */
/* De naam van de gebruiker stond als h2 op 30px, en de elf moduletegels stonden
   daaronder ook op h2 -- dertien koppen van hetzelfde niveau, met de persoon
   tussen de modules in. Nu h1, h2 en h3, met maten die bij de rest van de
   applicatie passen: de paginakop van /layout staat op 22px en die van het
   variatiescherm op 19px. */
.gebruikerkop {
	margin: 0 0 14px;
	color: var(--ink);
	font-size: 22px;
	font-weight: 600;
	letter-spacing: -0.01em;
}

.gebruikerkop__sectie {
	margin: 0 0 12px;
	color: var(--ink);
	font-size: 15px;
	font-weight: 600;
}

/* De kaart met de gegevens als lijst van eigenschappen: het label links, de
   waarde of de knop rechts, elk op een eigen regel met een lijn ertussen. Twee
   groepen, gescheiden door dezelfde lijn: wie het is (username, weergavenaam)
   en of en hoe hij inlogt (is actief?, inloggen). Op een telefoon staat het
   label boven de waarde; de schakelaar blijft naast zijn label staan. */
.gebruikerkaart {
	padding: 0;
	margin-bottom: 22px;
}

.gebruikerkaart__groep + .gebruikerkaart__groep { border-top: 1px solid var(--line); }

.gebruikerkaart__eig {
	display: grid;
	grid-template-columns: 170px minmax(0, 1fr);
	gap: 6px 24px;
	align-items: center;
	padding: 14px 20px;
}

.gebruikerkaart__eig + .gebruikerkaart__eig { border-top: 1px solid var(--line); }

.gebruikerkaart__label {
	margin: 0;
	font-size: 13px;
	font-weight: 600;
	color: var(--ink-muted);
}

.gebruikerkaart__waarde { min-width: 0; }

.gebruikerkaart__waarde .form-control { max-width: 380px; }

/* De inlognaam als tekst, met een slotje: hij is hier niet te wijzigen. */
.gebruikerkaart__vast {
	display: flex;
	align-items: center;
	gap: 8px;
	min-width: 0;
	overflow-wrap: anywhere;
	color: var(--ink);
}

.gebruikerkaart__vast .fa { flex: 0 0 auto; color: var(--ink-faint); }

.gebruikerkaart__waarde .btn .fa { margin-right: 8px; }

.gebruikerkaart__uitleg {
	margin: 8px 0 0;
	max-width: 60ch;
	font-size: 12.5px;
	color: var(--ink-muted);
}

@media (max-width: 767px) {
	.gebruikerkaart__eig { grid-template-columns: minmax(0, 1fr); padding: 12px 16px; }
	.gebruikerkaart__eig--schakel { grid-template-columns: minmax(0, 1fr) auto; }
	.gebruikerkaart__waarde .form-control { max-width: none; }
	.gebruikerkaart__waarde .btn { width: 100%; }
}

#modules-list {
	display: flex;
	flex-wrap: wrap;
}

#modules-list > div { display: flex; }

#modules-list .panel {
	display: flex;
	flex-direction: column;
	width: 100%;
	margin-bottom: 20px;
}

/* De tegel had een grijze kopbalk met een rand eronder, om een modulenaam en
   één regel tekst te dragen. Dat is veel omlijsting voor weinig inhoud, en het
   gaf de modulenaam meer nadruk dan het recht eronder -- terwijl dat laatste is
   waar je op klikt. De kopbalk is nu gewoon de bovenkant van de tegel. */
#modules-list .panel-heading {
	padding: 13px 15px 0;
	background: none;
	border-bottom: none;
}

#modules-list .panel-title {
	display: flex;
	align-items: center;
	gap: 7px;
	margin: 0;
	color: var(--ink);
	font-size: 13px;
	font-weight: 600;
}

#modules-list .panel-title i {
	color: var(--ink-muted);
	font-size: 14px;
}

#modules-list .panel-body { padding: 9px 15px 14px; }

/* Het vinkvakje bovenaan uitlijnen en niet in het midden, zodat het bij de
   eerste regel van de omschrijving staat als die over twee regels loopt. */
#modules-list .panel-body > div {
	display: flex;
	align-items: flex-start;
	gap: 8px;
}

#modules-list .panel-body input { flex: 0 0 auto; margin: 3px 0 0; }

#modules-list .panel-body label {
	margin: 0;
	font-weight: 400;
	line-height: 1.35;
	cursor: pointer;
}


/* --- het gebruikersoverzicht (/user) --------------------------------------- *
 * Deze opmaak stond in een <style> in de view, waar hij de tabelopmaak van de
 * hele applicatie op deze pagina herdefinieerde.
 */

.gebruikerstabel > thead > tr > th,
.gebruikerstabel > tbody > tr > td {
	padding: 8px;
	vertical-align: middle;
}

/* De rij van een actieve gebruiker droeg class="active". Dat is ook de naam
   van de klasse voor een gemarkeerde rij, die hierboven --surface-hover krijgt.
   Tien van de dertien gebruikers op crm-dev zijn actief, dus tien van de
   dertien rijen stonden permanent in de markeerkleur -- niet als bedoeld gevolg
   maar doordat twee betekenissen dezelfde naam droegen. Gemeten op 2 september
   2026: zes rijen achter elkaar allemaal #f2f6f9.

   Wie niet actief is, is nu te zien aan zijn doorstreepte naam. Daarmee verviel
   de kolom "actief", die een hele kolom kostte om een vinkje of kruisje te
   tonen. Hier stonden voor die kolom ook nog kale kleurnamen, `red` en `green`;
   die volgden het thema niet en groen haalde op donker 2,78:1. */
.gebruikersrij--inactief .gebruiker__naam { text-decoration: line-through; }

/* Inactieve gebruikers zijn verborgen tot je ze toont met het vakje boven de
   tabel; dat zet toont-inactief op de tabel. De rijen staan wel in de html,
   dus tonen hoeft niets op te halen. */
.gebruikerstabel:not(.toont-inactief) .gebruikersrij--inactief { display: none; }

.gebruikerstabel-boven {
	display: flex;
	justify-content: flex-end;
	margin: 0 0 8px;
}

.gebruikerstabel-toon {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin: 0;
	font-size: 13px;
	font-weight: 400;
	color: var(--ink-muted);
	cursor: pointer;
}

.gebruikerstabel-toon input { margin: 0; }

.gebruikerstabel-toon b { font-weight: 600; color: var(--ink); }

/* De modules stonden als elf iconen naast elkaar in een cel per gebruiker, met
   de naam als tooltip. Het verschil tussen wel en geen toegang moest daar uit
   de tekening van het icoon komen -- eerst opacity 0,1 (1,20:1, onzichtbaar),
   toen een grijstint, toen gevuld tegenover omlijnd -- en geen van die drie las
   goed genoeg.

   Nu is elke module een kolom met zijn naam erboven, en zegt de cel eronder
   alleen nog ja of nee. Daarmee draagt een vinkje de betekenis in plaats van
   het verschil tussen twee tekeningen van hetzelfde icoon, staat de naam er een
   keer in plaats van dertien keer als tooltip, en is een kolom ook van boven
   naar beneden te lezen: wie heeft deze module wel en niet.

   Gemeten op 2 september 2026: bij een venster van 1100px is de tabel 935px en
   past alles; daaronder schuift hij horizontaal binnen zijn eigen vak. */
.gebruikerstabel > thead > tr > th.gebruikerstabel__module {
	width: 74px;
	padding: 8px 3px;
	text-align: center;
	vertical-align: bottom;
	/* theme.css zet nowrap en uppercase op elke tabelkop; deze labels zijn de
	   modulenamen uit de zijbalk en staan er zoals in friendlyname. */
	white-space: normal;
	text-transform: none;
}

/* margin: 0 auto en niet alleen text-align op de cel: fa-fw geeft het icoon een
   vaste breedte van 1,28em, en een blok met een breedte gaat links staan. Het
   stond daardoor 23px uit het midden terwijl het label eronder wel centreerde
   -- gemeten op 2 september 2026. */
.gebruikerstabel__module i {
	display: block;
	margin: 0 auto 5px;
	font-size: 17px;
	color: var(--kleur, var(--ink-muted));
}

.gebruikerstabel__module span {
	display: block;
	font-size: 10px;
	font-weight: 400;
	line-height: 1.2;
	color: var(--ink-muted);
	overflow-wrap: break-word;
}

.gebruikerstabel > tbody > tr > td.gebruiker__toegang {
	padding: 8px 3px;
	text-align: center;
}

.gebruiker__toegang i {
	font-size: 15px;
	color: var(--ok);
}

/* De modulekolommen stonden op hidden-xs en verdwenen dus op een telefoon,
   waarna er geen weg meer was naar die informatie behalve elke gebruiker
   afzonderlijk openen. Ze blijven nu staan en de tabel schuift horizontaal.

   De knop en de naam blijven daarbij links staan, want zonder dat weet je na
   drie kolommen schuiven niet meer wiens rechten je leest. Ze hebben een eigen
   achtergrond nodig omdat de rijen doorzichtig zijn en de kolommen er anders
   doorheen zouden schijnen. */
/* Het afronden verhuist naar het omhulsel. .table krijgt hierboven overflow:
   hidden zodat zijn border-radius de hoeken afsnijdt, en juist die overflow
   maakt de tabel de scrollcontainer voor een sticky cel -- waardoor die cel
   nergens aan vastklikt. Gemeten op 2 september 2026: de naamkolom schoof
   gewoon mee, van 73px naar -493px. Met het omhulsel als scrollcontainer en
   als afronder blijft hij op 69px staan.

   Dezelfde botsing zat bij de bezoekerslijst op /layout; zie daar. */
.gebruikerstabel-omhulsel {
	overflow-x: auto;
	border-radius: var(--radius-lg);
}

.gebruikerstabel { overflow: visible; }

@media (max-width: 991px) {
	.gebruikerstabel { min-width: 780px; }

	.gebruikerstabel > thead > tr > th:nth-child(1),
	.gebruikerstabel > tbody > tr > td:nth-child(1) {
		position: sticky;
		left: 0;
		z-index: 2;
		width: 54px;
		min-width: 54px;
		background-color: var(--surface-raised);
	}

	.gebruikerstabel > thead > tr > th:nth-child(2),
	.gebruikerstabel > tbody > tr > td:nth-child(2) {
		position: sticky;
		left: 54px;
		z-index: 2;
		min-width: 140px;
		background-color: var(--surface-raised);
		/* Een streep als rand van het vastgezette deel: zonder dit lijkt de
		   naam gewoon bij de kolom te horen waar hij toevallig naast staat. */
		box-shadow: 1px 0 0 var(--line);
	}
}


/* --- het variatie- en het campagnescherm ----------------------------------- *
 * Twee schermen met dezelfde opbouw: een kop, daaronder een totaalgrafiek over
 * de hele periode, en daaronder een rij per variatie of campagne met een
 * sparkline. Ze deelden hun opmaak eerder alleen doordat ze uit elkaar
 * gekopieerd waren; nu delen ze deze klassen.
 *
 * Het totaalblok zat in een .alert.alert-info -- een meldingsvak, blauw omrand,
 * bedoeld om ergens de aandacht op te vestigen. Het is gewoon een paneel.
 */

.reeksenkop {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	justify-content: space-between;
	gap: 10px 16px;
	margin: 0 0 16px;
}

.reeksenkop__titel {
	margin: 0;
	color: var(--ink);
	font-size: 19px;
	font-weight: 600;
	line-height: 1.25;
}

.reeksenkop__url {
	margin: 3px 0 0;
	color: var(--ink-muted);
	font-size: 12px;
	overflow-wrap: anywhere;
}

/* margin-left: auto en niet alleen space-between: op het campagnescherm is de
   kiezer het enige kind van de kop, en dan zou hij links blijven staan. */
.reeksenkop__periode { flex: 0 0 auto; margin-left: auto; }
.reeksenkop__periode select { min-width: 140px; }

/* Het voorbeeld en de totaalgrafiek naast elkaar. De hoogte stond op 20vw,
   waardoor de grafiek op een breed scherm 300px werd en op een smal scherm
   75px; een vaste hoogte doet wat er bedoeld werd. */
.reekstotaal {
	display: flex;
	flex-wrap: wrap;
	gap: 18px;
	padding: 16px 18px;
	margin-bottom: 20px;
}

.reekstotaal__voorbeeld {
	flex: 0 1 320px;
	height: 260px;
	min-width: 0;
	border-radius: var(--radius);
	overflow: hidden;
	background: var(--surface-sunken);
}

.reekstotaal__grafiek {
	display: flex;
	flex-direction: column;
	flex: 1 1 420px;
	height: 260px;
	min-width: 0;
}

/* De paginakaart op het variatiescherm: voorbeeld, naam en kerncijfers. De
   grafiek staat eronder in een eigen .reekstotaal, zoals op het campagnescherm.

   Het voorbeeld was hier 320 bij 260 en de grafiek ernaast even hoog. Samen was
   dat het grootste blok op het scherm, en op een pagina zonder weergaven stond er
   niets anders in dan "geen gegevens in deze periode". Gemeten op 5 september
   2026: ruim de helft van de zichtbare hoogte, zonder een enkel cijfer.

   Nu een lagere kaart met twee kerncijfers naast het voorbeeld. Die gebruiken de
   klassen van het welkomstscherm, dus ook dezelfde monospace voor het getal --
   gelijke elementen, gelijke opmaak.

   Het paneel met de grafiek, hier en op het campagnescherm, is een .reekstotaal
   zonder deze modifier: alleen een grafiek, geen voorbeeld. */
.reekstotaal--pagina { align-items: stretch; }

.reekstotaal--pagina .reekstotaal__voorbeeld {
	flex: 0 0 232px;
	height: 168px;
}

/* De naam, de url en de periodekiezer stonden in een losse regel bóven deze
   kaart -- terwijl de kaart met het voorbeeld erin nu juist die pagina is. Ze
   staan er nu in, en de kolom ernaast draagt ze samen met de cijfers. */
.reekstotaal__inhoud {
	display: flex;
	flex: 1 1 420px;
	flex-direction: column;
	gap: 14px;
	min-width: 0;
}

.reekstotaal__kop {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 12px 20px;
}

.reekstotaal__naam { min-width: 0; }

.reekstotaal__titel {
	margin: 0;
	color: var(--ink);
	font-size: 19px;
	font-weight: 600;
	line-height: 1.25;
	overflow-wrap: anywhere;
}

.reekstotaal__url {
	margin: 3px 0 0;
	color: var(--ink-muted);
	font-size: 12px;
	overflow-wrap: anywhere;
}

.reekstotaal__periode { flex: 0 0 auto; }
.reekstotaal__periode select { min-width: 140px; }

.reekstotaal__onder {
	display: flex;
	flex: 1 1 auto;
	align-items: center;
	gap: 32px;
	min-width: 0;
}

/* Geen raster met scheidslijnen zoals op het welkomstscherm -- daar staan vier
   tegels naast elkaar, hier twee binnen een kaart die de rand al levert. */
.reekstotaal__cijfers {
	display: flex;
	flex: 0 0 auto;
	gap: 32px;
}

.reekstotaal__cijfers .kerncijfer { padding: 0; background: none; }
.reekstotaal__cijfers .kerncijfer__getal { font-size: 22px; }

@media (max-width: 767px) {
	.reekstotaal--pagina .reekstotaal__voorbeeld { flex: 1 1 100%; }
	.reekstotaal__kop { flex-wrap: wrap; }
	.reekstotaal__onder { flex-wrap: wrap; gap: 16px; }
}

/* Het voorbeeld is een iframe van de pagina van de klant, op kwart formaat en
   niet aan te klikken -- het is een afbeelding, geen bedienbare pagina. */
.iframe-preview {
	pointer-events: none;
	border: 0;
	display: block;
}

.iframe-scale-25 {
	transform: scale(0.25);
	transform-origin: 0 0;
	width: 400%;
	height: 400%;
}

/* --- de lijst met variaties of campagnes ----------------------------------- */

/* Deze kop was <h2><small>Variaties</small></h2> -- kleiner gemaakt met een
   <small> in plaats van met een maat. */
.reeksenlijst__kop {
	margin: 0 0 12px;
	color: var(--ink);
	font-size: 15px;
	font-weight: 600;
}

/* Het aantal naast de kop, zodat "Variaties" iets zegt voordat je de lijst telt. */
.reeksenlijst__aantal {
	margin-left: 8px;
	padding: 1px 7px;
	border-radius: 10px;
	background: var(--surface-sunken);
	color: var(--ink-muted);
	font-family: var(--font-mono);
	font-size: 11px;
	font-weight: 500;
}

.reeksenlijst__leeg {
	margin: 0;
	color: var(--ink-muted);
	font-size: 13px;
}

.reeksenlijst {
	margin: 0;
	padding: 0;
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.reeksrij {
	padding: 14px 18px 10px;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	background: var(--surface-raised);
}

.reeksrij__kop {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 8px 16px;
	margin-bottom: 6px;
}

.reeksrij__naam {
	margin: 0;
	min-width: 0;
	color: var(--ink);
	font-size: 14px;
	font-weight: 600;
	overflow-wrap: anywhere;
}

.reeksrij__knoppen { flex: 0 0 auto; }

/* Zestig pixels is genoeg voor een sparkline: het gaat om de vorm van de
   reeks, niet om het aflezen van losse dagen. */
.reeksrij__spark {
	display: flex;
	flex-direction: column;
	height: 64px;
}


/* --- een rij waar je vandaan navigeert ------------------------------------- *
 * Het variatiescherm bestaat om vandaar de editor van een variatie te openen.
 * Dat was er het derde van drie identieke potloodjes van 45x34 zonder tekst,
 * terwijl de grafiek 48% van de rij innam -- gemeten op 3 september 2026, met
 * de naam van de variatie op 2%.
 *
 * De volgorde is nu de volgorde van belangrijkheid: de naam is zelf de knop
 * naar de editor, "Bewerken" staat er voluit naast, het cijfer is een zin
 * eronder, en de grafiek is een sparkline van 150x34 in plaats van 1440x64.
 *
 * Het campagnescherm deelt .reeksrij maar niet deze modifier: daar is geen
 * editor om naartoe te gaan, dus daar blijft de rij zoals hij was.
 */
.reeksrij--actie {
	display: flex;
	align-items: center;
	gap: 18px;
	padding: 12px 16px;
}

.reeksrij--actie .reeksrij__hoofd {
	flex: 1 1 auto;
	min-width: 0;
}

.reeksrij--actie .reeksrij__naam { margin: 0; }

/* Een knop die eruitziet als de kop die hij ook is. De naam draagt de
   hoofdactie omdat dat het ding is waar je naartoe wilt; het blijft een
   <button> zodat toetsenbord en schermlezer hem als bedienbaar herkennen. */
.reeksrij__naamknop {
	display: inline;
	padding: 0;
	border: 0;
	background: none;
	color: var(--ink);
	font: inherit;
	text-align: left;
	cursor: pointer;
}

.reeksrij__naamknop:hover,
.reeksrij__naamknop:focus { color: var(--brand-ink); text-decoration: underline; }

.reeksrij__cijfer {
	margin: 3px 0 0;
	color: var(--ink-muted);
	font-size: 12px;
}

/* De triggers die een variatie tonen, als chips onder de naam. Een link per
 * trigger; dezelfde vorm als de actiechips op het triggeroverzicht, zodat
 * "trigger" er overal hetzelfde uitziet. Aan is teal met een bliksemtegeltje,
 * uit is gestreept met "uit" erachter, en zonder trigger staat er een amber
 * chip die naar het triggeroverzicht gaat -- dat is de variatie die niemand
 * ziet. Gemeten op 6 september 2026 op crm-dev: 22 van de 26 variaties hadden
 * geen enkele trigger, en maar 1 werd door een aangezette trigger getoond. */
.reeksrij__triggers {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px;
	margin-top: 8px;
}

.trigger-chip {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	max-width: 100%;
	height: 24px;
	padding: 0 10px 0 6px;
	border: 1px solid var(--line-strong);
	border-radius: 999px;
	background: var(--surface);
	font-size: 12px;
	color: var(--ink);
	text-decoration: none;
}

.trigger-chip:hover,
.trigger-chip:focus {
	border-color: var(--brand);
	color: var(--brand-ink);
	text-decoration: none;
}

.trigger-chip > .fa {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 16px;
	height: 16px;
	border-radius: 5px;
	background: var(--data-4);
	color: var(--on-data);
	font-size: 9px;
}

.trigger-chip__label {
	min-width: 0;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}

.trigger-chip--aan {
	border-color: color-mix(in srgb, var(--data-2) 45%, var(--line-strong));
	background: color-mix(in srgb, var(--data-2) 10%, var(--surface-raised));
}

.trigger-chip--aan > .fa { background: var(--data-2); }

.trigger-chip--uit,
.trigger-chip--geen {
	border-style: dashed;
	background: transparent;
	color: var(--ink-muted);
}

.trigger-chip--uit  > .fa { background: var(--ink-faint); }
.trigger-chip--geen > .fa { background: var(--amber-pil); }

.trigger-chip__staat {
	flex: 0 0 auto;
	padding: 0 6px;
	border-radius: 999px;
	background: var(--surface-sunken);
	font-size: 10px;
	font-weight: 600;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--ink-muted);
}

.reeksrij--actie .reeksrij__spark {
	flex: 0 0 150px;
	height: 34px;
}

.reeksrij__acties {
	display: flex;
	flex: 0 0 auto;
	align-items: center;
	gap: 8px;
}

/* Onder de 640px staat de sparkline niet meer naast de naam maar eronder, en
   krijgen de knoppen de volle breedte -- anders wordt alles zo smal dat er
   niets meer van te lezen is. */
@media (max-width: 640px) {
	.reeksrij--actie { flex-wrap: wrap; }
	.reeksrij--actie .reeksrij__hoofd { flex: 1 1 100%; }
	.reeksrij--actie .reeksrij__spark { flex: 1 1 100%; }
	.reeksrij__acties { flex: 1 1 100%; }
}


/* --- het bannerblok -------------------------------------------------------- *
 * De api levert deze banner als een iframe van bannersnack, een externe dienst;
 * de banner zelf is van april 2017. Dat iframe heeft een vaste maat van
 * 686x107, schaalt niet mee met het paneel, en de knop erin is onderdeel van
 * een plaatje: niet te bedienen met een toetsenbord en niet te lezen door een
 * schermlezer.
 *
 * De illustratie staat nu als png in de repo en de tekst en de knop zijn echte
 * html.
 *
 * Het blok stond eerst in de kleuren van de banner zelf -- de creme #efe1b3 en
 * het oker #fbb92f uit de bannerconfig. Dat werkte op beide thema's omdat het
 * zijn eigen achtergrond meebracht, maar op donker bleef het een lichte vlek.
 * Nu volgt het de tokens, zodat het bij de rest van het scherm hoort.
 *
 * Doorgerekend op 2 september 2026, licht / donker:
 *   kop --ink op --brand-tint          13,05 / 11,74  (eis 4,5)
 *   knoptekst --on-brand op --brand-solid  4,60 /  4,99  (eis 4,5)
 *   knoprand --brand-ink op --brand-tint   5,00 /  5,95  (eis 3)
 *
 * De rand om de knop is nodig: --brand-solid op --brand-tint haalt op donker
 * maar 2,75:1, en zonder rand is dan niet te zien dat het een knop is.
 */
.bannerblok {
	display: flex;
	align-items: center;
	gap: 14px;
	height: 100%;
	padding-left: 22px;
	border-radius: var(--radius);
	background: var(--brand-tint);
	overflow: hidden;
	/* De server zet white-space: nowrap op het paneel; de kop hoort te mogen
	   afbreken als het krap wordt. */
	white-space: normal;
	container-type: inline-size;
}

.bannerblok__tekst {
	flex: 1 1 auto;
	min-width: 0;
}

.bannerblok__kop {
	margin: 0 0 7px;
	color: var(--ink);
	font-size: 17px;
	font-weight: 600;
	line-height: 1.2;
}

/* Dezelfde kleuren als .btn-primary, de primaire knop van de applicatie, zodat
   dit er een is en niet iets eigens. De rand staat op --brand-ink en niet op de
   vulkleur zelf: --brand-solid haalt op donker maar 2,75:1 tegen --brand-tint. */
.bannerblok__knop {
	display: inline-block;
	padding: 5px 15px;
	border: 1px solid var(--brand-ink);
	border-radius: 999px;
	background: var(--brand-solid);
	color: var(--on-brand);
	font-size: 12px;
	font-weight: 600;
	line-height: 1.4;
	text-decoration: none;
	white-space: nowrap;
}

.bannerblok__knop:hover,
.bannerblok__knop:focus {
	background: var(--brand-solid-hover);
	color: var(--on-brand);
	text-decoration: none;
}

.bannerblok__knop:focus-visible {
	outline: 2px solid var(--brand-ink);
	outline-offset: 2px;
}

/* De illustratie hangt aan de onderkant, zoals in de oorspronkelijke banner:
   het browservenster erin loopt daar door tot buiten het vlak. */
.bannerblok__beeld {
	flex: 0 1 auto;
	align-self: flex-end;
	height: 100%;
	width: auto;
	max-width: 46%;
	object-fit: contain;
	object-position: right bottom;
}

/* Wordt het vak smal, dan gaat het beeld eraf: het is versiering en de kop met
   de knop is waar het om gaat. */
@container (max-width: 380px) {
	.bannerblok__beeld { display: none; }
}


/* --- een blok dat nog laadt ------------------------------------------------- *
 * De blokken komen los van elkaar binnen. Tot dat moment stond er een leeg
 * vak, en bij een traag eindpunt weet je dan niet of er nog iets komt.
 *
 * Een veeg in plaats van een draaiend wieltje: het vak houdt de maat die het
 * straks ook heeft, dus de pagina verspringt niet zodra de inhoud er is.
 */
.blok-laadt {
	position: relative;
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
	height: 100%;
	/* Niet meer dan wat in het laagste paneel past. Een row-1 is 100px hoog en
	   houdt met 20px binnenruimte 58px over; met de 60px die hier eerst stond
	   kreeg juist die tegel een scrollbalk zolang zijn blok binnenkwam --
	   gemeten op 2 september 2026, precies wat dit moest wegnemen. */
	min-height: 24px;
	border-radius: var(--radius);
	background: var(--surface-sunken);
}

/* Het woord staat erbij omdat het vlak alleen niet te zien is. Nagerekend op
   2 september 2026 met de tokens uit dit bestand: --surface-sunken op
   --surface-raised geeft 1,065:1 in beide lichte blokken en 1,194:1 in het
   donkere, waar 3:1 de eis is voor een graphic die iets betekent. Wat de lezer
   zag was dus een leeg paneel.

   --ink-muted op --surface-raised haalt wel 5,49:1 en 7,07:1, ruim boven de
   4,5:1 die voor tekst geldt. Daarmee draagt de tekst de boodschap en is het
   vlak eromheen versiering geworden -- ook als de veeg wegvalt. */
.blok-laadt > span {
	position: relative;
	z-index: 1;
	color: var(--ink-muted);
	font-size: 12px;
}

.blok-laadt::after {
	content: "";
	position: absolute;
	top: 0; right: 0; bottom: 0; left: 0;
	transform: translateX(-100%);
	background: linear-gradient(90deg,
		transparent,
		color-mix(in srgb, var(--ink) 6%, transparent),
		transparent);
	animation: blok-veeg 1.4s ease-in-out infinite;
}

@keyframes blok-veeg {
	to { transform: translateX(100%); }
}

.blok-mislukt {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 100%;
	margin: 0;
	color: var(--ink-muted);
	font-size: 12px;
}

/* Wie beweging heeft uitgezet houdt het woord "laden" en het vlak, zonder de
   veeg.

   Hier stond dat het vlak alleen ook nog "hier komt iets" zou zeggen. Dat was
   niet zo: het ::after houdt buiten de animatie zijn translateX(-100%) en
   wordt door de overflow: hidden hierboven volledig weggeknipt, en het vlak
   eronder haalt 1,065:1. Voor deze lezer was er dus niets -- juist voor de
   groep die de veeg niet krijgt. Dat is nu de tekst. */
@media (prefers-reduced-motion: reduce) {
	.blok-laadt::after { animation: none; }
}


/* --- de filterbalk: een getinte band met chips ------------------------------ *
 * Sinds 6 september 2026. Tot dan stond elk filter als een icoon met de naam
 * eronder, sinds 1 september op 20px met een label van 12 (daarvoor fa-2x met
 * 14, wat bij 1024 naar twee regels viel), en stond de balk als losse rij in de
 * inhoud. Nu een band die tegen de kleurbalk aan ligt, met de filters als
 * chips: icoon en naam naast elkaar, een filter dat aan staat gekleurd, de
 * rest stil. Het is de tweede band uit het template dat als richting dient,
 * met iets nuttigs erin.
 *
 * Op drie schermen: bedrijven, recordings en shoppingcarts, allemaal in de
 * inhoud. De periodefilter van het dashboard staat in de kleurbalk zelf en
 * heeft zijn eigen regels bij die balk.
 *
 * De band trekt zich horizontaal over de 15px van .container-fluid heen, en
 * -- alleen als hij bovenaan de inhoud staat -- over de padding-top van
 * #main-body, zodat hij aan de kleurbalk raakt. bootstrap.css geeft .navbar
 * een min-height van 50, een rand, een hoekstraal en 20px ondermarge; die
 * gaan hier allemaal weg.
 */
#main-body nav.navbar-filter {
	margin: 0 -15px 16px;
	padding: 10px 15px;
	min-height: 0;
	border: 0;
	border-radius: 0;
	/* Leisteen, sinds later op 6 september 2026; daarvoor een lichte tint van
	   --data-1 met een onderrand. Zie --filterbalk bij de tokens. */
	background: var(--filterbalk);
}

#main-body > .row:first-child > [class*="col-"] > nav.navbar-filter { margin-top: -18px; }

/* Een flexrij die wikkelt. branding-salesfeed.css laat de <li>'s zweven; een
   float op een flexitem wordt genegeerd, dus dat hoeft niet teruggezet. */
#main-body nav.navbar-filter > ul {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 7px;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* De chip. Het icoon krijgt van branding-salesfeed.css width: 100% (dat is hoe
   het boven zijn label kwam te staan) en een opacity van .4; deze selectors
   wegen zwaarder respectievelijk komen later, en zetten allebei terug. */
/* Op de leisteen band: doorschijnend witte chips met lichte tekst, dezelfde
   vorm als de knoppen in de blauwe balk hadden voordat het tegeltjes werden.
   Vaste kleuren en geen tokens: de band is in beide thema's even donker. */
.navbar-filter > ul > li > a {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	height: 30px;
	padding: 0 11px;
	border: 1px solid rgba(255, 255, 255, .18);
	border-radius: 999px;
	background: rgba(255, 255, 255, .1);
	font-size: 12px;
	font-weight: 500;
	line-height: 1;
	color: #e7eef5;
	white-space: nowrap;
}

.navbar-filter > ul > li > a:hover,
.navbar-filter > ul > li > a:focus {
	background: rgba(255, 255, 255, .18);
	border-color: rgba(255, 255, 255, .35);
	color: #fff;
	text-decoration: none;
}

.navbar-filter > ul > li > a > i.fa {
	width: auto;
	font-size: 15px;
	line-height: 1;
	opacity: 1;
	color: rgba(231, 238, 245, .75);
}

/* Een filter dat aan staat: een gevulde pil in amber met donkere tekst en
   icoon -- de frisse kleur van de leadscorebalk, op verzoek van de gebruiker
   op 6 september 2026. De handlebars-template zet .active op de <a> zodra er
   een keuze in zit (isactive in filter.js); de periodeknop staat sindsdien
   altijd aan, want er doet altijd een periode mee.

   Eerder die dag stond hier een tint van 14% met gekleurde tekst (lichtblauw
   op wit naast witte chips, de gebruiker miste de terugkoppeling), daarna
   --brand-solid met wit, daarna het amber van de balk met donkere tekst. Nu
   een dieper amber met wit -- zie --amber-pil bij de tokens voor de afweging
   tegen de leesnorm. branding-salesfeed.css onderstreept een
   actieve knop met 3px #00a3da; deze regel staat later en weegt gelijk, en
   zet de rand terug. */
.navbar-filter > ul > li > a.active {
	border: 1px solid var(--amber-pil);
	background: var(--amber-pil);
	color: var(--on-amber);
	font-weight: 600;
}

.navbar-filter > ul > li > a.active:hover,
.navbar-filter > ul > li > a.active:focus {
	border-color: var(--amber-pil);
	background: color-mix(in srgb, var(--amber-pil) 90%, #000);
	color: var(--on-amber);
}

.navbar-filter > ul > li > a.active > i.fa {
	opacity: 1;
	color: var(--on-amber);
}

/* Toepassen en reset: rechts, als knoppen. De id's wegen zwaarder dan de
   chipregels hierboven. Het vinkje en het huisje hadden in de views een inline
   kleur (#00a3da, green, #ef545c); die zijn er op 6 september 2026 uit. */
@supports selector(:has(*)) {
	.navbar-filter > ul > li:has(> #filter-submit) { margin-left: auto; }
}

/* Toepassen als volle witte knop met donkere tekst en het vinkje in het
   merkblauw; reset alleen omlijnd. Op leisteen is wit de stevigste kleur die
   er is -- --brand-solid, dat hier stond, viel er tegen weg. */
.navbar-filter > ul > li > a#filter-submit {
	border-color: #fff;
	background: #fff;
	color: var(--filterbalk);
	font-weight: 600;
}

.navbar-filter > ul > li > a#filter-submit:hover,
.navbar-filter > ul > li > a#filter-submit:focus {
	background: #fff;
	color: var(--filterbalk);
}

.navbar-filter > ul > li > a#filter-submit > i.fa { color: var(--brand-solid); }

.navbar-filter > ul > li > a#filter-reset {
	background: transparent;
	border-color: rgba(255, 255, 255, .35);
}


/* --- de filterbalk: de tagdropdown ------------------------------------------ *
 * De regels stonden als een los icoon in de tagkleur met de naam ernaast in
 * gewone tekst. Dat is de vorm van voor de chip, met dezelfde val: gemeten op
 * 1 september 2026 haalden 14 van de 44 tagkleuren minder dan 3:1 tegen wit.
 * Nu dezelfde chip als in de lijst, het detailpaneel en het tagbeheer.
 */

/* Kleur en gewicht allebei expliciet, want de grondregel `label { font-weight:
   600; color: var(--ink-muted) }` bovenaan dit bestand is voor veldlabels --
   het woord "kleur" boven een kleurkiezer. Een label om een keuzevakje is geen
   bijschrift maar de optie zelf, en dus gewone tekst. Het gewicht werd hier al
   teruggezet, de kleur was blijven staan: gemeten op 1 september 2026 stonden
   78 optieregels op #5a6b7b terwijl de <li> eromheen op #1c2b36 stond.

   Wat in deze dropdowns wel gedempt hoort te blijven staat apart: de
   herkomstregel onder een campagnenaam, "zonder naam" als plaatsvervanger, en
   de teller onder het SBI-zoekveld. Dat zijn bijschriften bij een optie, geen
   opties. */
.navbar-filter .dropdown-static li > label {
	display: flex;
	align-items: center;
	gap: 10px;
	min-height: 34px;
	margin: 0;
	padding: 0 8px;
	border-radius: 8px;
	color: var(--ink);
	font-size: 13.5px;
	font-weight: 400;
	cursor: pointer;
}

.navbar-filter .dropdown-static li > label:hover { background: var(--surface-hover); }

/* De naam zat niet in een label, dus je moest het vakje zelf raken. Nu is de
   hele regel aanklikbaar. */
.navbar-filter .dropdown-static li > label input {
	flex: 0 0 auto;
	width: 16px;
	height: 16px;
	margin: 0;
	accent-color: var(--brand-solid);
}

/* --- de filterbalk: het paneel van elke dropdown ---------------------------- *
 * Sinds 6 september 2026 hetzelfde paneel voor alle filters: smaller dan de
 * 400 van .dropdown-menu-large, met de kaartschaduw, rijen van 34 die in hun
 * geheel klikken, de alles-regel als rustige kopregel en het zoekveld dat
 * boven in het paneel blijft staan. Eerst alleen voor de relatietypes, na
 * een keuze uit twee varianten; daarna op verzoek van de gebruiker voor de
 * rest. Tags, campagnes en de SBI-boom krijgen wat meer breedte omdat hun
 * regels langer zijn; de periodekiezer is een gewoon dropdown-menu en krijgt
 * hetzelfde uiterlijk.
 */
.navbar-filter .dropdown-static {
	width: 300px;
	min-width: 0;
	max-height: min(70vh, 440px);
	padding: 8px;
	border: 1px solid var(--line);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-kaart);
	/* branding-salesfeed.css zet nowrap op het hele paneel, en dan schuift
	   een lange herkomstregel onder een campagne het paneel breder dan het
	   is: gemeten op 6 september 2026 460 in een paneel van 343, met een
	   horizontale schuifbalk onderin. Hier mag tekst gewoon afbreken, en
	   wat dan nog uitsteekt wordt afgesneden in plaats van gescrold. */
	white-space: normal;
	overflow-x: hidden;
}

.navbar-filter #tagfilter      .dropdown-static { width: 360px; }
.navbar-filter #campaignfilter .dropdown-static { width: 360px; }
.navbar-filter #sbifilter      .dropdown-static { width: 520px; overflow-x: auto; }

/* Een kenmerk breder dan het paneel wordt aan de rechterkant afgesneden; de
   naam kan niet afbreken, want die is nowrap van zichzelf. */
.navbar-filter .dropdown-static .kenmerk { max-width: 100%; overflow: hidden; }

.navbar-filter .dropdown-menu {
	padding: 8px;
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-kaart);
}

.navbar-filter .dropdown-menu > li > a {
	display: flex;
	align-items: center;
	min-height: 34px;
	padding: 0 10px;
	border-radius: 8px;
	font-size: 13.5px;
}

/* De relatietypedropdown: per type de tegel met de naam ernaast (zie "het
   relatietype als tegel" bij de chip), sinds 6 september 2026. Het paneel was
   400 breed voor negen regels, met de chips als rafelrand; nu passen alle
   negen zonder te scrollen. */

/* Zoeken in een lange lijst. Bij zesenveertig tags is bladeren geen doen. */
.filterzoek {
	display: block;
	width: 100%;
	height: 32px;
	margin-bottom: 8px;
	padding: 0 10px;
	border: 1px solid var(--line-strong);
	border-radius: 8px;
	background: var(--surface);
	color: var(--ink);
	font-size: 13px;
}

.filterzoek:focus {
	border-color: var(--brand);
	box-shadow: 0 0 0 3px var(--brand-ring);
	outline: none;
}

.navbar-filter .dropdown-static li.is-verborgen { display: none; }

.filterzoek-leeg {
	padding: 6px 4px;
	color: var(--ink-muted);
	font-size: 13px;
	list-style: none;
}


/* --- de filterbalk: de campagnedropdown ------------------------------------- *
 * De naam van een campagne is de utm_campaign zoals de advertentiekant hem
 * aanlevert. Gemeten op 1 september 2026: van de vijftien campagnes hadden er
 * drie een puur numerieke naam en een helemaal geen naam. Daaronder staat nu
 * de herkomst -- bron, medium en het pad van de landingspagina -- want dat is
 * wat zo'n nummer plaatsbaar maakt.
 *
 * align-items op flex-start, want de regel is twee lagen hoog; het vakje moet
 * dan bij de naam staan en niet in het midden van het geheel. De grondregel
 * hierboven zet center, en deze selector telt een klasse meer -- drie klassen
 * en twee typen tegen twee en twee -- dus die wint zonder !important.
 */

.navbar-filter .dropdown-static li > label.campagneregel {
	align-items: flex-start;
	padding: 6px 8px;
}

.navbar-filter .dropdown-static li > label.campagneregel input { margin-top: 2px; }

.campagneregel__tekst {
	display: flex;
	flex-direction: column;
	gap: 1px;
	min-width: 0;
}

/* De naam erft var(--ink) van het label; de rangorde met de herkomstregel
   eronder komt van die zijn var(--ink-muted). Tot 1 september 2026 stonden ze
   allebei op #5a6b7b en las de regel als een blok; nu 14,5:1 tegen 5,49:1. */
.campagneregel__naam {
	line-height: 1.35;
	overflow-wrap: anywhere;
}

.campagneregel__naam--leeg {
	color: var(--ink-muted);
	font-style: italic;
}

.campagneregel__herkomst {
	color: var(--ink-muted);
	font-size: 11.5px;
	line-height: 1.35;
	overflow-wrap: anywhere;
}


/* --- de filterbalk: de periodedropdown -------------------------------------- *
 * Deze werkt anders dan de andere: geen aankruisvakjes maar links, want je
 * kiest er precies een. De actieve regel droeg daardoor nog de vendorkleur van
 * Bootstrap -- gemeten op 1 september 2026 #337ab7 met witte tekst, de enige
 * plek in de filterbalk die niet op de merkkleur stond. Nu dezelfde tint en
 * inkt als een aangevinkte regel in de SBI-boom.
 *
 * De selector telt drie klassen tegen de twee van Bootstrap, dus die wint;
 * :hover en :focus staan erbij omdat Bootstrap die apart zet en ze anders de
 * vendorkleur terugbrengen zodra je eroverheen gaat.
 */

.navbar-filter .dropdown-menu > li.active > a,
.navbar-filter .dropdown-menu > li.active > a:hover,
.navbar-filter .dropdown-menu > li.active > a:focus {
	background: var(--brand-tint);
	color: var(--brand-ink);
}

/* De naam, en bij een aangepaste periode het gekozen bereik eronder. Als
   inline-block naast het icoon, zodat die tweede regel onder de naam uitkomt en
   niet onder het vinkje. */
.periode__tekst { display: inline-block; vertical-align: top; }

.periode__bereik {
	display: block;
	color: var(--ink-muted);
	font-size: 11.5px;
	line-height: 1.35;
}


/* --- de filterbalk: de SBI-dropdown ----------------------------------------- *
 * Een jstree met negentig secties en hun onderliggende codes. Gemeten op
 * 1 september 2026 was de boom 1620px hoog in een venster van 350, zonder enige
 * manier om iets te zoeken; er is nu een zoekveld boven.
 */

/* Het zoekveld blijft staan terwijl de lijst eronder scrolt. Zonder dit scrolt
   het mee weg en moet je terug naar boven om je zoekterm aan te passen. Geldt
   voor de SBI-boom en voor de lijstdropdowns: de campagnelijst is 742px hoog
   in een menu van 350px -- gemeten op 1 september 2026. */
.filterzoekregel {
	position: sticky;
	top: -8px;
	z-index: 1;
	margin: -8px -8px 6px;
	padding: 8px 8px 6px;
	background: var(--surface-raised);
	border-bottom: 1px solid var(--line);
	list-style: none;
}

.filterzoekrij { display: flex; gap: 6px; }
.filterzoekrij .filterzoek { margin-bottom: 0; }

/* De knop naast het zoekveld: "vink deze aan" bij de SBI-boom, "vastleggen"
   bij de lijsten. Beide doen hetzelfde soort ding -- de selectie in lijn
   brengen met waar je op gezocht hebt -- dus ze horen er hetzelfde uit te
   zien. */
.filterknop {
	flex: 0 0 auto;
	height: 30px;
	padding: 0 10px;
	border: 1px solid var(--brand);
	border-radius: var(--radius);
	background: var(--brand-tint);
	color: var(--brand-ink);
	font-size: 12px;
	font-weight: 600;
	white-space: nowrap;
	cursor: pointer;
}

.filterknop:hover { background: var(--brand-ring); }
.filterknop[hidden] { display: none !important; }

/* De alles-regel. Hij stuurt de regels eronder aan in plaats van er een van te
   zijn, dus een streep eronder en wat meer gewicht. */
.filteralles {
	margin-bottom: 6px;
	padding-bottom: 6px;
	border-bottom: 1px solid var(--line);
	list-style: none;
}

/* Gedempt en iets kleiner: het is een kopregel die de regels eronder
   aanstuurt, geen optie. Stond vet, en dan leek het de belangrijkste keuze. */
.navbar-filter .dropdown-static li.filteralles > label {
	min-height: 30px;
	font-size: 12.5px;
	font-weight: 500;
	color: var(--ink-muted);
}

/* De tagkiezer in de tagdropdown, sinds 7 september 2026: het paneel is al
   de doos, dus de kiezer zonder eigen rand en binnenruimte. */
.navbar-filter .dropdown-static li.filterkiezer { list-style: none; padding: 0; }
.navbar-filter .dropdown-static .tagkiezer { padding: 0; border: 0; border-radius: 0; background: transparent; }
.navbar-filter .dropdown-static .tagkiezer__lijst { max-height: min(50vh, 320px); }

/* De keuze OF/EN boven de tagkiezer in de tagdropdown, sinds 7 oktober 2026
   (mockup "Tagfilter OF en EN"). Twee knoppen als een schakelaar, met
   daaronder een zin die zegt wat de keuze doet. */
.navbar-filter .dropdown-static li.tagmodus {
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 6px;
	margin: 0 0 8px;
	padding: 8px;
	border-radius: 10px;
	background: var(--surface-sunken);
}

.tagmodus__wissel {
	display: grid;
	grid-template-columns: 1fr 1fr;
	border: 1px solid var(--line-strong);
	border-radius: 8px;
	overflow: hidden;
	background: var(--surface);
}

.tagmodus__wissel button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	height: 32px;
	padding: 0 8px;
	border: 0;
	background: transparent;
	color: var(--ink-muted);
	font-family: inherit;
	font-size: 13px;
}

.tagmodus__wissel button + button { border-left: 1px solid var(--line-strong); }
.tagmodus__wissel button:hover { background: var(--surface-hover); color: var(--ink); }

.tagmodus__wissel button b {
	padding: 0 5px;
	border: 1px solid var(--line);
	border-radius: 4px;
	background: var(--surface-sunken);
	color: var(--ink-faint);
	font-family: var(--font-mono);
	font-size: 11px;
	font-weight: 500;
	letter-spacing: .3px;
}

.tagmodus__wissel button[aria-pressed="true"] {
	background: var(--brand-solid);
	color: var(--on-brand);
	font-weight: 600;
}

.tagmodus__wissel button[aria-pressed="true"] b {
	border-color: transparent;
	background: rgba(255, 255, 255, .2);
	color: var(--on-brand);
}

.tagmodus__uitleg {
	min-height: 2.8em;
	color: var(--ink-muted);
	font-size: 12.5px;
	line-height: 1.4;
}

.tagmodus__uitleg strong { color: var(--ink); font-weight: 600; }

/* Met de schakelaar erboven krijgt de lijst minder hoogte, zodat het paneel
   binnen zijn eigen hoogte blijft en niet zelf gaat scrollen. Gemeten op
   7 oktober 2026 bij een venster van 757 hoog: schakelaar 91, zoekveld,
   alles-regel en voet samen 97, en met marges en binnenruimte 220 naast de
   lijst, in een paneel van hooguit 440 (of 70vh). Met 240 voor de lijst
   scrolde het paneel 22 px en viel de voet weg; met 210 was het 432 hoog.
   De 230 in de formule is die 220 met wat speling. */
.navbar-filter #tagfilter .dropdown-static .tagkiezer__lijst { max-height: max(120px, min(calc(70vh - 230px), 210px)); }

/* EN op de knop in de filterbalk, zolang het toegepaste tagfilter EN is. De
   knop is dan amber (actief); het label is een lichte pil daarop. */
.filtermodus {
	margin-left: 6px;
	padding: 1px 6px;
	border-radius: 999px;
	background: rgba(255, 255, 255, .25);
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: .5px;
}

/* Zegt wat er werkelijk gefilterd wordt. Zoeken op zichzelf verandert de
   selectie niet, en zonder deze regel is dat niet te zien. */
.sbi-teller {
	margin: 6px 0 0;
	font-size: 11px;
	color: var(--ink-muted);
}

/* De omschrijvingen zijn lang -- "(15) Vervaardiging van leer, lederwaren en
   soortgelijke producten" -- en liepen tegen de rechterrand aan. Ze mogen
   afbreken over twee regels in plaats van te worden afgeknipt. */
.dropdown-menu-huge .jstree-anchor {
	height: auto;
	white-space: normal;
	line-height: 1.35;
}

.dropdown-menu-huge .jstree-node,
.dropdown-menu-huge .jstree-leaf > .jstree-anchor { height: auto; }

/* Wat de zoekopdracht raakt, mag opvallen. */
.dropdown-menu-huge .jstree-search {
	font-style: normal;
	font-weight: 600;
	color: var(--brand-ink);
}


/* --- het licentiescherm ----------------------------------------------------- *
 * Sinds 15 oktober 2026 master-detail (licence/index.blade.php, licenties.js),
 * gekozen uit een mockup; daarvoor een datatable met een dialoog. Links de
 * lijst, rechts de licentie, allebei zo hoog als het venster onder de kopbalk
 * met een eigen scroll, zoals het bedrijfspaneel op /bedrijven. Onder 768px
 * één kolom: de lijst, en na een keuze de licentie met een terugknop.
 *
 * De status is één keuze uit drie (Actief, Opgezegd, Beëindigd), met dezelfde
 * kleur als de pil in de lijst.
 */
.licenties {
	display: grid;
	grid-template-columns: minmax(300px, 420px) minmax(0, 1fr);
	gap: 16px;
	align-items: start;
}

.licenties__lijst,
.licenties__detail {
	display: flex;
	flex-direction: column;
	height: calc(100vh - 120px);
	min-height: 460px;
	background: var(--surface-raised);
	border: 1px solid var(--line);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-kaart);
	overflow: hidden;
}

.licenties__kop {
	flex: none;
	display: grid;
	gap: 10px;
	padding: 14px 14px 12px;
	border-bottom: 1px solid var(--line);
}

.licenties__titel { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.licenties__titel h2 { margin: 0; font-size: 18px; }
.licenties__titel span { font-size: 12.5px; color: var(--ink-muted); font-variant-numeric: tabular-nums; white-space: nowrap; }

.licenties__zoek { position: relative; }
.licenties__zoek .fa { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); color: var(--ink-faint); pointer-events: none; }
.licenties__zoek .form-control { padding-left: 32px; }

.licenties__chips { display: flex; flex-wrap: wrap; gap: 6px; }

.licenties__chip {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	height: 28px;
	padding: 0 10px;
	border: 1px solid var(--line-strong);
	border-radius: 999px;
	background: var(--surface-raised);
	font-size: 12.5px;
	font-weight: 600;
	color: var(--ink-muted);
}

.licenties__chip::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--stip); }
.licenties__chip b { font-weight: 600; font-variant-numeric: tabular-nums; color: var(--ink-faint); }
.licenties__chip[aria-pressed="true"] { background: var(--brand-tint); border-color: var(--brand); color: var(--brand-ink); }
.licenties__chip[aria-pressed="true"] b { color: var(--brand-ink); }

/* De controle (sinds 16 oktober 2026): twee knoppen na een scheiding, een
   driehoekje voor de account-ID in de lijst en een melding in de licentie. */
.licenties__scheiding { width: 1px; align-self: stretch; margin: 2px 2px; background: var(--line); }
.licenties__chip--fout { --stip: var(--danger); }
.licenties__chip--let  { --stip: var(--warn); }
.licentierij__signaal { margin-right: 6px; font-size: 12px; }
.licentierij__signaal--fout { color: var(--danger); }
.licentierij__signaal--let  { color: var(--warn); }
/* Met beide klassen, want .licentie__melding staat verderop en won anders met
   zijn oranje achtergrond. */
.licentie__melding.licentie__melding--fout { background: var(--danger-tint); color: var(--danger); }
.licentie__controle { margin: -8px 0 16px; font-size: 12px; color: var(--ink-faint); }

.licenties__chip--actief,    .statuskeuze__optie--actief    { --stip: var(--ok); }
.licenties__chip--opgezegd,  .statuskeuze__optie--opgezegd  { --stip: var(--warn); }
.licenties__chip--beeindigd, .statuskeuze__optie--beeindigd { --stip: var(--line-strong); }

/* Flex en geen grid: het resellerfilter valt weg voor een account zonder
   beheerrecht of met minder dan twee resellers in zijn lijst (licenties.js),
   en dan delen de andere twee de breedte. [hidden] moet er expliciet bij,
   want .form-control van bootstrap zet display: block. De sortering krijgt
   iets meer, want "Opgezegd eerst" paste in een derde net niet (92 px tekst
   in 90). */
.licenties__filters { display: flex; gap: 6px; }
.licenties__filters .form-control { flex: 1 1 0; min-width: 0; height: 32px; padding: 0 8px; font-size: 12.5px; }
.licenties__filters .form-control[hidden] { display: none; }
#licenties-sortering { flex-grow: 1.3; }

.licenties__rijen { flex: 1 1 auto; min-height: 0; overflow-y: auto; list-style: none; margin: 0; padding: 6px; }
.licenties__leeg { padding: 24px 12px; text-align: center; color: var(--ink-muted); font-size: 13px; }

.licenties__voet {
	flex: none;
	margin: 0;
	padding: 8px 14px;
	border-top: 1px solid var(--line);
	background: var(--surface-sunken);
	font-size: 12px;
	color: var(--ink-faint);
}

.licentierij {
	width: 100%;
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: 2px 10px;
	padding: 9px 10px;
	border: 1px solid transparent;
	border-radius: 10px;
	background: none;
	text-align: left;
	color: var(--ink);
}

.licentierij:hover { background: var(--surface-hover); }
.licentierij[aria-current="true"] { background: var(--brand-tint); border-color: color-mix(in srgb, var(--brand) 45%, transparent); }
.licentierij:focus-visible { outline: 2px solid var(--brand); outline-offset: 1px; }

.licentierij__aid { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 600 13px var(--font-mono); }
.licentierij--reseller .licentierij__aid::after {
	content: "Reseller";
	margin-left: 8px;
	padding: 1px 6px;
	border-radius: 5px;
	background: var(--brand-tint);
	color: var(--brand-ink);
	font: 700 10px var(--font);
	letter-spacing: .05em;
	text-transform: uppercase;
	vertical-align: 1px;
}

.licentierij__sub,
.licentierij__type { grid-column: 1 / -1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.licentierij__sub { font-size: 12.5px; color: var(--ink-muted); }
.licentierij__type { font-size: 11.5px; color: var(--ink-faint); }
.licentierij .pil { height: 22px; font-size: 11.5px; align-self: start; }

.pil--actief   { background: var(--ok-tint); border-color: transparent; color: var(--ok); }
.pil--opgezegd { background: var(--warn-tint); border-color: transparent; color: var(--warn); }
.pil--beeindigd { background: transparent; color: var(--ink-faint); }
.pil--actief::before, .pil--opgezegd::before, .pil--beeindigd::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }

.licentie__inhoud { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 20px 24px 8px; }
.licentie__terug { display: none; align-items: center; gap: 6px; margin-bottom: 12px; padding: 0; border: 0; background: none; color: var(--brand-ink); font-weight: 600; }

.licentie__kop { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 12px 16px; margin-bottom: 16px; }
.licentie__kop h3 { margin: 0; font-size: 20px; }
.licentie__aid { display: flex; align-items: center; gap: 4px; min-width: 0; font-family: var(--font-mono); font-weight: 500; letter-spacing: 0; }
.licentie__aid span { overflow-wrap: anywhere; }
.licentie__aid button { padding: 4px 6px; border: 0; border-radius: 7px; background: none; color: var(--ink-faint); font-size: 14px; }
.licentie__aid button:hover,
.licentie__aid button:focus-visible { background: var(--surface-hover); color: var(--brand-ink); }
.licentie__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin: 6px 0 0; font-size: 13px; color: var(--ink-muted); }
.licentie__inloggen .fa { margin-right: 6px; }

.licentie__melding { display: flex; align-items: flex-start; gap: 10px; margin: 0 0 16px; padding: 10px 12px; border-radius: 10px; background: var(--warn-tint); color: var(--warn); font-size: 13px; }
.licentie__melding .fa { margin-top: 2px; }
.licentie__melding b { font-weight: 600; }

.licenties .form-group > label,
.licentie__label { display: block; margin-bottom: 5px; font-size: 12px; font-weight: 600; color: var(--ink-muted); }
.licenties .form-control[readonly] { background: var(--surface-sunken); }
.licenties .form-control[aria-invalid="true"] { border-color: var(--danger); }
.licentie__mono { font-family: var(--font-mono); font-size: 13px; }
.licentie__hint,
.licentie__slot { margin: 5px 0 0; font-size: 11.5px; color: var(--ink-faint); }
.licentie__slot .fa { margin-right: 5px; }
.licentie__fout { margin: 5px 0 0; font-size: 12px; color: var(--danger); }

.statuskeuze { display: inline-flex; flex-wrap: wrap; gap: 3px; max-width: 100%; padding: 3px; border: 1px solid var(--line); border-radius: 11px; background: var(--surface-sunken); }
.statuskeuze__optie { position: relative; margin: 0; }
.statuskeuze__optie input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.statuskeuze__optie span { display: inline-flex; align-items: center; gap: 7px; padding: 6px 13px; border-radius: 8px; font-size: 13px; font-weight: 600; color: var(--ink-muted); }
.statuskeuze__optie span::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--stip); }
.statuskeuze__optie input:checked + span { background: var(--surface-raised); color: var(--ink); box-shadow: var(--shadow-sm), 0 0 0 1px var(--line); }
.statuskeuze__optie input:focus-visible + span { outline: 2px solid var(--brand); outline-offset: 1px; }
.statuskeuze__optie.is-uit span { opacity: .5; }
.statuskeuze__optie.is-uit input { cursor: not-allowed; }

/* De kop boven de abonnementen staat bovenaan het paneel, direct onder de kop
   van de licentie: zonder lijn erboven, met het aantal rechts.
   Met .licentie__inhoud ervoor, want .formsectie staat verderop in dit bestand
   en won anders met zijn lijn en ruimte erboven. */
.licentie__inhoud .formsectie--bovenaan { display: flex; align-items: baseline; gap: 10px; margin-top: 0; padding-top: 0; border-top: 0; }
.formsectie--bovenaan small { margin-left: auto; font-size: 11.5px; font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--ink-faint); }

/* De abonnementen (sinds 16 oktober 2026): per abonnement de status,
   de periode en wie het betaalt; afgesloten onderaan en gedempt. */
.abonnementen { display: grid; gap: 6px; margin: 0 0 8px; padding: 0; list-style: none; }
.abonnement {
	display: grid;
	grid-template-columns: auto auto minmax(0, 1fr);
	align-items: center;
	gap: 6px 12px;
	padding: 9px 12px;
	border: 1px solid var(--line);
	border-radius: 10px;
	background: var(--surface-raised);
}
.abonnement--afgesloten { background: var(--surface-sunken); }
.abonnement__periode { font-size: 13px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.abonnement__wie { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12.5px; color: var(--ink-muted); }
.abonnement__wie b { font-weight: 600; color: var(--ink); }
.abonnementen__leeg { margin: 0 0 8px; font-size: 13px; color: var(--ink-muted); }
.abonnementen__stand { margin: 0 0 16px; font-size: 12px; color: var(--ink-faint); }
.pil--toekomstig { background: var(--brand-tint); border-color: transparent; color: var(--brand-ink); }
.pil--toekomstig::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }

@media (max-width: 560px) {
	.abonnement { grid-template-columns: auto minmax(0, 1fr); }
	.abonnement__wie { grid-column: 1 / -1; white-space: normal; }
}

.licentie__sub { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 16px; }
.licentie__sub p { margin: 0; color: var(--ink-muted); }
.licentie__sub b { color: var(--ink); font-weight: 600; font-variant-numeric: tabular-nums; }

.licentie__voet { flex: none; display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 12px 24px; border-top: 1px solid var(--line); background: var(--surface-raised); }
.licentie__staat { font-size: 12.5px; color: var(--ink-faint); }
.licentie__staat.is-vuil { color: var(--warn); font-weight: 600; }
.licentie__ruimte { flex: 1 1 auto; }

.licentie__leeg { margin: auto; display: grid; justify-items: center; gap: 6px; padding: 40px 16px; text-align: center; color: var(--ink-muted); }
.licentie__leeg .fa { font-size: 34px; color: var(--line-strong); }
.licentie__leeg h3 { margin: 0; font-size: 16px; }
.licentie__leeg p { margin: 0; max-width: 34ch; font-size: 13px; }

/* De laatste synchronisatie bovenaan, voor beheer en resellers (sinds 16 oktober
   2026, variant A uit een mockup): rustig als hij vers is, een waarschuwing na
   24 uur, rood zonder sync. Met de balk erboven worden de panelen lager, zodat
   de pagina niet gaat scrollen. */
.licenties-sync { display: flex; align-items: center; gap: 10px; margin: 0 0 14px; padding: 9px 14px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface-raised); font-size: 13px; color: var(--ink-muted); }
.licenties-sync[hidden] { display: none; }
.licenties-sync b { font-weight: 600; color: var(--ink); }
.licenties-sync__stip { flex: none; width: 9px; height: 9px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 0 3px var(--ok-tint); }
.licenties-sync__extra { margin-left: auto; font-size: 12px; color: var(--ink-faint); }
.licenties-sync.licenties-sync--oud { border-color: transparent; background: var(--warn-tint); color: var(--warn); }
.licenties-sync.licenties-sync--geen { border-color: transparent; background: var(--danger-tint); color: var(--danger); }
.licenties-sync--oud b, .licenties-sync--oud .licenties-sync__extra,
.licenties-sync--geen b, .licenties-sync--geen .licenties-sync__extra { color: inherit; }

@media (min-width: 768px) {
	.licenties-sync:not([hidden]) + .licenties .licenties__lijst,
	.licenties-sync:not([hidden]) + .licenties .licenties__detail { height: calc(100vh - 173px); }
}

@media (max-width: 767px) {
	.licenties-sync { flex-wrap: wrap; }
	.licenties-sync__extra { margin-left: 0; }
	.licenties { grid-template-columns: minmax(0, 1fr); }
	.licenties__lijst,
	.licenties__detail { height: auto; min-height: 0; overflow: visible; }
	.licenties__rijen,
	.licentie__inhoud { overflow: visible; }
	.licentie__inhoud { padding: 16px; }
	.licentie__voet { padding: 10px 16px; }
	.licenties.is-detail .licenties__lijst { display: none; }
	.licenties:not(.is-detail) .licenties__detail { display: none; }
	.licentie__terug { display: inline-flex; }
}


/* --- formulierstukken -------------------------------------------------------- *
 * Sinds 7 september 2026, voor de licentiedialogen; die zijn op 15 oktober
 * 2026 opgegaan in het licentiescherm hierboven. De kopjes in kleine kapitalen
 * en de tweekoloms velden zijn algemeen genoemd omdat ze in elk formulier
 * passen.
 */

.formsectie {
	margin: 6px 0 10px;
	padding-top: 16px;
	border-top: 1px solid var(--line);
	font-size: 10.5px;
	font-weight: 600;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--ink-muted);
}

.formsectie:first-child {
	margin-top: 0;
	padding-top: 0;
	border-top: 0;
}

.schakelrij {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	margin: 0;
	font-size: 13.5px;
	font-weight: 400;
	color: var(--ink);
	cursor: pointer;
}

.velden2 {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0 16px;
}

@media (max-width: 560px) { .velden2 { grid-template-columns: 1fr; } }

/* Duwt de knoppen rechts van de hulpknoppen links weg. */
.modal-footer__ruimte { flex: 1 1 auto; }

/* De twee knoppengroepen van het tagvenster in de voet (lijststand en
   formulierstand): display: contents, zodat de knoppen en de ruimte gewoon
   in de flexrij van de voet staan, en een eigen [hidden]-regel, want display:
   contents wint anders van het hidden-attribuut. Sinds 9 september 2026;
   de voet zelf krijgt voor de zekerheid ook zo'n regel, want .modal-footer is
   display: flex en verborg zich tot die dag niet met hidden. */
.tagvenster__lijstknoppen,
.tagvenster__formknoppen { display: contents; }

.tagvenster__lijstknoppen[hidden],
.tagvenster__formknoppen[hidden],
.modal-footer[hidden] { display: none; }

/* Wat het tagformulier bij het inschuiven opzij zet (tagvenster.js). Met
   !important, want het zijn willekeurige onderdelen van een andere dialoog
   met soms een eigen display: gezien op 29 september 2026 bij de kop en de
   tagkiezer van de importer (display: flex), waar hidden daardoor niets
   deed. */
.tagvenster__weg { display: none !important; }

/* De knoppen van het tagformulier in de knoppenbalk van de importwizard:
   dezelfde 7px aan weerszijden als Vorige en Volgende daar hebben. */
.wizard > .actions > .tagvenster__formknoppen > .btn { margin: 0 7px; }


/* --- de lege stand ---------------------------------------------------------- *
 * Sinds 7 september 2026: één blok voor elk scherm dat nog niets te tonen
 * heeft (element/leegstand.blade.php). De tegel in de kleur van de module, een
 * kop, één zin, de stap die eraan voorafgaat als amber pil, en de knop die
 * erbij hoort. Twee vormen: gecentreerd voor een leeg hoofdvlak, als rij onder
 * een hero die de uitleg al gaf. Gekozen door de gebruiker uit een artifact.
 */
.leegstand {
	--tint: var(--data-1);
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
	padding: 40px 24px 36px;
	background: var(--surface-raised);
	border: 1px solid var(--line);
	border-radius: var(--radius-lg);
	text-align: center;
}

.leegstand[hidden] { display: none; }

/* De kleur van de module van de pagina komt als --tint in de style van het
   blok (element/leegstand.blade.php); dit is de neutrale terugval. Tot
   14 oktober 2026 koos elke view een tint uit het datapalet. */
.leegstand { --tint: var(--ink-faint); }

.leegstand__tegel {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 52px;
	height: 52px;
	margin-bottom: 6px;
	border-radius: 16px;
	background: var(--tint);
	color: var(--on-module);
	box-shadow: 0 8px 20px -8px color-mix(in srgb, var(--tint) 80%, transparent);
}

.leegstand__tegel .fa { font-size: 22px; }

.leegstand__tekst {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
	min-width: 0;
}

.leegstand__kop {
	margin: 0;
	font-size: 16px;
	font-weight: 600;
	letter-spacing: -.01em;
	color: var(--ink);
}

.leegstand__zin {
	margin: 0;
	max-width: 48ch;
	font-size: 13.5px;
	line-height: 1.5;
	color: var(--ink-muted);
}

/* De stap die eraan voorafgaat, in de amber van "let op" in de hero's. */
.leegstand__stap {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-top: 4px;
	padding: 5px 12px 5px 6px;
	border-radius: 999px;
	background: color-mix(in srgb, var(--amber) 22%, var(--surface-raised));
	color: var(--amber-pil);
	font-size: 12px;
	font-weight: 600;
}

.leegstand__stap i {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background: var(--amber-pil);
	color: #fff;
	font-style: normal;
	font-size: 11px;
}

.leegstand__acties {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px;
	margin-top: 14px;
}

/* Dezelfde knoppen als in de hero's. */
.leegstand__knop {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	height: 34px;
	padding: 0 14px;
	border: 1px solid var(--line-strong);
	border-radius: 10px;
	background: var(--surface-raised);
	font-size: 13px;
	font-weight: 600;
	color: var(--ink);
	white-space: nowrap;
}

.leegstand__knop:hover,
.leegstand__knop:focus { background: var(--surface-sunken); color: var(--ink); text-decoration: none; }

.leegstand__knop .fa { font-size: 12px; }

.leegstand__knop--vol,
.leegstand__knop--vol:hover,
.leegstand__knop--vol:focus {
	border-color: transparent;
	background: var(--brand-solid);
	color: var(--on-brand);
	box-shadow: 0 4px 12px -5px rgba(11, 124, 181, .7);
}

.leegstand__knop--stil,
.leegstand__knop--stil:hover,
.leegstand__knop--stil:focus {
	border-color: transparent;
	background: var(--brand-tint);
	color: var(--brand-ink);
}

/* De rijvorm: onder een hero die de uitleg al gaf, 72 hoog. */
.leegstand--rij {
	flex-direction: row;
	align-items: center;
	gap: 14px;
	padding: 16px 18px;
	text-align: left;
}

.leegstand--rij .leegstand__tegel { width: 40px; height: 40px; margin: 0; border-radius: 12px; }
.leegstand--rij .leegstand__tegel .fa { font-size: 17px; }
.leegstand--rij .leegstand__tekst { flex: 1 1 auto; align-items: flex-start; gap: 2px; }
.leegstand--rij .leegstand__kop { font-size: 14px; }
.leegstand--rij .leegstand__zin { max-width: none; font-size: 12.5px; }
.leegstand--rij .leegstand__stap { margin-top: 4px; }
.leegstand--rij .leegstand__acties { flex: 0 0 auto; margin: 0; justify-content: flex-end; }

@media (max-width: 640px) {
	.leegstand--rij { flex-wrap: wrap; }
	.leegstand--rij .leegstand__acties { width: 100%; justify-content: flex-start; }
}

/* Op /bedrijven zet bedrijven-compact.js is-leeg op de compacte weergave zodra
   de tabel geen rijen heeft; dan wijken de tabel met zijn balk en het paneel
   ernaast voor het blok over de volle breedte. */
#weergave-compact .bedrijven-leeg { display: none; }
#weergave-compact.is-leeg .bedrijven-leeg { display: block; }
#weergave-compact.is-leeg > .col-md-7,
#weergave-compact.is-leeg > .col-md-5 { display: none; }

/* In het canvas van /visitor is de achtergrond al het vlak; geen kaart erin. */
#canvas .leegstand {
	max-width: 480px;
	margin: 48px auto 0;
	background: transparent;
	border: 0;
}


/* --- de tagkiezer ------------------------------------------------------------ *
 * Eén kiezer voor tags en relatietypen (tagkiezer.js), sinds 7 september 2026,
 * op de bedrijfspagina, bij Indelen, in de filterbalk, in de importer en bij
 * een trigger-actie. Een vak met een zoekveld, rijen van 34 met het vakje en
 * de chip (of de tegel van een relatietype), bij het aanwijzen een potlood,
 * en onderin "Nieuwe tag" met een teller. Daarvoor tekende elke plek zijn
 * eigen lijst.
 */
.tagkiezer {
	display: flex;
	flex-direction: column;
	padding: 4px;
	background: var(--surface-raised);
	border: 1px solid var(--line);
	border-radius: 10px;
}

.tagkiezer__zoekrij {
	display: flex;
	align-items: center;
	gap: 6px;
	margin: 0 0 4px;
	padding-right: 4px;
	border-bottom: 1px solid var(--line);
}

.tagkiezer__zoekrij:focus-within { border-bottom-color: var(--brand); }

.tagkiezer__zoek {
	flex: 1 1 auto;
	min-width: 0;
	height: 30px;
	padding: 0 8px;
	border: 0;
	background: transparent;
	font-size: 13px;
	color: var(--ink);
}

.tagkiezer__zoek:focus { outline: none; }

/* Zet uit wat aangevinkt is maar buiten het zoekresultaat valt (filterbalk). */
.tagkiezer__vastleg {
	flex: 0 0 auto;
	height: 22px;
	padding: 0 8px;
	border: 1px solid var(--brand);
	border-radius: 999px;
	background: none;
	font-size: 11px;
	font-weight: 600;
	color: var(--brand-ink);
	cursor: pointer;
}

.tagkiezer__vastleg[hidden] { display: none; }

.tagkiezer__alles {
	display: flex;
	align-items: center;
	gap: 10px;
	min-height: 30px;
	margin: 0 0 2px;
	padding: 0 8px;
	border-bottom: 1px solid var(--line);
	font-size: 12.5px;
	font-weight: 500;
	color: var(--ink-muted);
	cursor: pointer;
}

.tagkiezer__alles input { width: 15px; height: 15px; margin: 0; accent-color: var(--brand-solid); }

.tagkiezer__lijst {
	max-height: min(56vh, 380px);
	overflow-y: auto;
	overflow-anchor: none;
}

.tagkiezer__rij {
	display: flex;
	align-items: center;
	gap: 10px;
	min-height: 34px;
	margin: 0;
	padding: 0 6px 0 8px;
	border-radius: 8px;
	font-size: 13.5px;
	font-weight: 400;
	color: var(--ink);
	cursor: pointer;
}

.tagkiezer__rij:hover { background: var(--surface-hover); }
.tagkiezer__rij[hidden] { display: none; }
.tagkiezer__rij input { flex: 0 0 auto; width: 16px; height: 16px; margin: 0; accent-color: var(--brand-solid); }
.tagkiezer__rij input:disabled ~ * { opacity: .5; }
.tagkiezer__rij .kenmerk { min-width: 0; }

/* Het potlood, pas zichtbaar bij het aanwijzen van de rij; met het
   toetsenbord altijd. Het staat in het label: tagkiezer.js vangt de klik af,
   anders zou hij ook het vinkje omzetten. */
.tagkiezer__potlood {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 26px;
	height: 26px;
	margin-left: auto;
	padding: 0;
	border: 0;
	border-radius: 7px;
	background: transparent;
	color: var(--ink-muted);
	font-size: 12px;
	opacity: 0;
	cursor: pointer;
}

.tagkiezer__rij:hover .tagkiezer__potlood,
.tagkiezer__potlood:focus { opacity: 1; }
.tagkiezer__potlood:hover,
.tagkiezer__potlood:focus { background: var(--brand-tint); color: var(--brand-ink); }

.tagkiezer__voet {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	margin-top: 4px;
	padding: 8px 8px 4px;
	border-top: 1px solid var(--line);
}

.tagkiezer__link {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 0;
	border: 0;
	background: none;
	font-size: 12.5px;
	font-weight: 600;
	color: var(--brand-ink);
	cursor: pointer;
}

.tagkiezer__link .fa { font-size: 11px; }

.tagkiezer__teller { margin-left: auto; font-size: 11.5px; color: var(--ink-faint); white-space: nowrap; }

.tagkiezer__leeg,
.tagkiezer__geen {
	margin: 0;
	padding: 10px 8px;
	font-size: 13px;
	color: var(--ink-muted);
}


/* --- de tagkeuze in een trigger-actie ---------------------------------------- *
 * Een veld met de gekozen chip; een klik klapt de tagkiezer uit in de ene
 * stand (rondjes). In de stroom van het formulier en niet zwevend, zodat de
 * dialoog hem niet afsnijdt. Sinds 7 september 2026; daarvoor een keuzelijst.
 */
.tagkeuzeveld { position: relative; }

.tagkeuzeveld__knop {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	width: 100%;
	height: 36px;
	padding: 0 10px;
	border: 1px solid var(--line-strong);
	border-radius: 8px;
	background: var(--surface);
	font: inherit;
	color: var(--ink);
	text-align: left;
	cursor: pointer;
}

.tagkeuzeveld__knop:focus { outline: none; border-color: var(--brand); }
.tagkeuzeveld__knop .fa { color: var(--ink-muted); font-size: 12px; }
.tagkeuzeveld__leeg { color: var(--ink-faint); }

.tagkeuzeveld__paneel { margin-top: 6px; }
.tagkeuzeveld__paneel[hidden] { display: none; }
.tagkeuzeveld__paneel .tagkiezer__lijst { max-height: 220px; }


/* --- telefoon en tablet: duimmaten, letters en invoer ---------------------- *
 * Gemeten op 8 september 2026 op 375px: schakelaars van 34 bij 20, het
 * sluitkruis van een introblok 11 bij 20, potloden en prullenbakken van 26,
 * letters van 9 tot 11px, en invoervelden van 13 en 14px -- waarop Safari op
 * een iPhone inzoomt zodra het veld focus krijgt, en niet terug. Alles
 * hieronder geldt onder 992px, dezelfde grens als de lade van het zijmenu.
 *
 * De icoonknoppen worden niet groter getekend; ze krijgen een onzichtbaar
 * raakvlak eromheen (::before met negatieve inzet) tot 44px, de maat die
 * Apple en Google adviseren. Zo blijven de rijen zoals ze zijn.
 */
@media (max-width: 991px) {

	/* 16px is de grens waaronder iOS inzoomt. De keuzelijst van datatables
	   (aantal per pagina) apart, omdat datatables.css hem met een zwaardere
	   selector op 13px zet. Gemeten op 8 september 2026: die lijst draagt
	   form-control input-sm en staat in div.dt-length, niet in .dt-input. */
	input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]),
	select,
	textarea,
	.form-control,
	div.dt-container div.dt-length select { font-size: 16px; }

	/* In de lade van het zijmenu is ruimte: items van 48 hoog met een grotere
	   letter, en de accountregel op leesbare maat (op het bureaublad 11px). Staat hier en niet bij de lade zelf, omdat de
	   gewone regels voor het menu verderop in het bestand staan dan die lade
	   en even zwaar wegen. */
	#modulemenu.nav > li > a,
	#modulemenu.nav > li.disabled { min-height: 48px; padding: 9px 11px; font-size: 15px; }
	.modulemenu__accountregel { font-size: 12px; }

	input[type="checkbox"].schakel { width: 44px; height: 26px; }
	input[type="checkbox"].schakel::after { top: 3px; left: 3px; width: 20px; height: 20px; }
	input[type="checkbox"].schakel:checked::after { left: 21px; }

	.groeprij__weg,
	.tagvenster__potlood,
	.tagkiezer__potlood,
	.bd-kop__potlood,
	.paneel__potlood,
	.trigger-actie__knop--weg,
	.hero__vouw { position: relative; }

	.groeprij__weg::before,
	.tagvenster__potlood::before,
	.tagkiezer__potlood::before,
	.bd-kop__potlood::before,
	.paneel__potlood::before,
	.trigger-actie__knop--weg::before,
	.hero__vouw::before {
		content: "";
		position: absolute;
		top: -9px;
		right: -9px;
		bottom: -9px;
		left: -9px;
	}

	/* 28 en 34 breed: minder inzet nodig voor dezelfde 44; 24 breed: meer. */
	.tagvenster__potlood::before { top: -8px; right: -8px; bottom: -8px; left: -8px; }
	.bd-kop__potlood::before,
	.paneel__potlood::before { top: -10px; right: -10px; bottom: -10px; left: -10px; }
	.trigger-actie__knop--weg::before { top: -5px; right: -5px; bottom: -5px; left: -5px; }
	.hero__vouw::before { top: -6px; right: -6px; bottom: -6px; left: -6px; }

	/* Op een touchscreen is er geen hover; het potlood in de tagkiezer staat
	   er dan gewoon. */
	.tagkiezer__potlood { opacity: 1; }

	/* Letters onder de 12: labels en badges naar 12. */
	.kerncijfer__bij,
	.bd-groep__kop,
	.trigger-kop__naam label,
	.hero__stap span { font-size: 12px; }
}


/* --- telefoon: de kopbalk van één rij en de handelingen onderaan ----------- *
 * De handelingen van een pagina staan in één lijst, ul.kopbalk__acties, die
 * de layout (layouts/full-width) uit de werkbalk en de buttonbar samenstelt;
 * het zoekveld en de filters hebben eigen lijsten (kopbalk__zoek,
 * kopbalk__filter) en het account ook (kopbalk__account). Wat erin staat en
 * welke knop primair is, bepaalt de controller (data-primair); deze css leidt
 * niets af.
 *
 * Boven 768px staat de lijst in de kop waar hij altijd stond. Onder 768px zet
 * deze css dezelfde lijst vast onderaan het scherm, als rij tegels met het
 * icoon boven het label en de primaire in het merkblauw. Tot 8 september
 * 2026 deed knoppenbalk.js dat: het haalde de knoppen bij het laden uit de
 * kop, bouwde er een balk met een "···"-menu van en raadde met een regex op
 * het id wat rood moest. Gemeten die dag vóór dit alles: de kopbalk werd op
 * 375px 166px hoog op Bedrijven en 210 op de bedrijfspagina, en Opslaan
 * scrolde uit beeld.
 * De grens ligt lager dan die van het menu (992): op een tablet past de kop
 * zoals hij is in één rij.
 */
.kopbalk__titel { display: none; }

/* De kop als flexrij die wikkelt, met de accountknop rechts. Ook op een
   tablet: gemeten op 8 september 2026 zakte de accountknop op 768px naar een
   eigen rij onder de vijf knoppen van de bedrijfspagina (kop van 122px),
   terwijl alles samen in één rij past. */
@media (max-width: 991px) {
	#content-main > header nav.navbar-icon {
		display: flex;
		align-items: center;
		flex-wrap: wrap;
		gap: 8px;
		min-height: 0;
		margin: 0;
	}

	#content-main > header nav.navbar-icon > ul {
		display: flex;
		align-items: center;
		gap: 8px;
		float: none;
		margin: 0;
		padding: 0;
	}

	#content-main > header nav.navbar-icon > ul > li { float: none; }
	#content-main > header nav.navbar-icon > ul.kopbalk__account { margin-left: auto; }

	/* De lijst met handelingen neemt de ruimte tussen menuknop en account en
	   wikkelt daarbinnen, in plaats van als geheel naar een volgende rij te
	   gaan en het account nog een rij lager te duwen. Basis 0 en niet auto:
	   met auto is de basis de breedte van alle knoppen naast elkaar, en dan
	   zet de rij de hele lijst op een volgende regel voordat hij mag krimpen.
	   Gemeten op 8 september 2026 op 768px: met auto drie rijen, 130px. */
	#content-main > header nav.navbar-icon:not(.navbar-filter) > ul.kopbalk__acties {
		flex: 1 1 0;
		flex-wrap: wrap;
		min-width: 0;
	}
}

@media (max-width: 767px) {
	.kopbalk__titel {
		display: block;
		flex: 1 1 0;
		min-width: 0;
		font-size: 16px;
		font-weight: 600;
		color: var(--on-balk);
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	/* De menuknop en het account nemen alleen hun eigen ruimte, zodat de titel
	   de rest krijgt. */
	#content-main > header nav.navbar-icon > ul.menuknop,
	#content-main > header nav.navbar-icon > ul.kopbalk__account { flex: 0 0 auto; }

	/* Ruimte onderaan de inhoud voor de vaste lijst, zodat de laatste regel
	   erbovenuit komt. De layout zet heeft-handelingen als er handelingen zijn. */
	#main-body.heeft-handelingen { padding-bottom: calc(84px + env(safe-area-inset-bottom, 0px)); }

	/* De lijst met handelingen, vast onderaan. Een rij die zijwaarts schuift
	   als hij niet past; op de drukste pagina (de bedrijfspagina, vijf
	   handelingen) past hij, gemeten op 8 september 2026 in de mockup. */
	#content-main > header nav.navbar-icon:not(.navbar-filter) > ul.kopbalk__acties {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 1030;
		display: flex;
		align-items: stretch;
		flex-wrap: nowrap;
		gap: 4px;
		margin: 0;
		padding: 6px 8px calc(10px + env(safe-area-inset-bottom, 0px));
		background: var(--surface-raised);
		border-top: 1px solid var(--line);
		box-shadow: 0 -6px 20px rgba(0, 0, 0, .06);
		overflow-x: auto;
		scrollbar-width: none;
	}

	#content-main > header nav.navbar-icon:not(.navbar-filter) > ul.kopbalk__acties::-webkit-scrollbar { display: none; }

	/* Basis auto en geen min-width 0: een tegel wordt nooit smaller dan zijn
	   langste woord, de overige ruimte verdeelt zich. Met gelijke breedtes
	   (basis 0) werd "bezoekverslag" afgekapt: tegel 68px, woord 75px,
	   gemeten op 8 september 2026 in de mockup. */
	#content-main > header nav.navbar-icon:not(.navbar-filter) > ul.kopbalk__acties > li {
		display: flex;
		flex: 1 1 auto;
		float: none;
		margin: 0;
		padding: 0;
	}

	/* De scheidingen tussen knoppen (divider-vertical) zijn hier zinloos en
	   zouden als lege tegel ruimte nemen. */
	#content-main > header nav.navbar-icon:not(.navbar-filter) > ul.kopbalk__acties > li:has(> .divider-vertical) { display: none; }

	/* De keten met :not(.navbar-filter) en :not(.accountknop) is nodig: de
	   tegeltjesregel van de kop (bij "Sinds 6 september 2026" hierboven) heeft
	   (1,3,5) en won anders van (1,2,5). Gemeten op 8 september 2026 op 375px:
	   tegels van 36px met 12,5px tekst en het icoon ernaast. */
	#content-main > header nav.navbar-icon:not(.navbar-filter) > ul.kopbalk__acties > li > a:not(.accountknop) {
		flex: 1 1 auto;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		gap: 4px;
		min-width: 56px;
		height: 54px;
		padding: 0 4px;
		border-radius: 10px;
		background: transparent;
		color: var(--ink);
		font-size: 11px;
		font-weight: 500;
		line-height: 1.15;
		text-align: center;
		white-space: normal;
		overflow: hidden;
		text-decoration: none;
	}

	#content-main > header nav.navbar-icon:not(.navbar-filter) > ul.kopbalk__acties > li > a:not(.accountknop) > i.fa {
		width: auto;
		height: auto;
		margin: 0;
		border-radius: 0;
		background: transparent;
		box-shadow: none;
		font-size: 20px;
		line-height: 1;
		color: var(--ink-muted);
	}

	#content-main > header nav.navbar-icon:not(.navbar-filter) > ul.kopbalk__acties > li > a:not(.accountknop) > b.caret { display: none; }

	#content-main > header nav.navbar-icon:not(.navbar-filter) > ul.kopbalk__acties > li > a:not(.accountknop)[data-primair] {
		background: var(--brand-solid);
		color: var(--on-brand);
		font-weight: 600;
	}

	#content-main > header nav.navbar-icon:not(.navbar-filter) > ul.kopbalk__acties > li > a:not(.accountknop)[data-primair] > i.fa { color: var(--on-brand); }

	#content-main > header nav.navbar-icon:not(.navbar-filter) > ul.kopbalk__acties > li.open > a:not(.accountknop) {
		background: var(--brand-tint);
		color: var(--brand-ink);
	}

	#content-main > header nav.navbar-icon:not(.navbar-filter) > ul.kopbalk__acties > li.open > a:not(.accountknop) > i.fa { color: var(--brand-ink); }

	/* Hover en focus op het witte vlak; de kop gebruikt een wit waas dat hier
	   onzichtbaar is. */
	#content-main > header nav.navbar-icon:not(.navbar-filter) > ul.kopbalk__acties > li > a:not(.accountknop):hover,
	#content-main > header nav.navbar-icon:not(.navbar-filter) > ul.kopbalk__acties > li > a:not(.accountknop):focus {
		background: var(--surface-hover);
		color: var(--ink);
		text-decoration: none;
	}

	#content-main > header nav.navbar-icon:not(.navbar-filter) > ul.kopbalk__acties > li > a:not(.accountknop)[data-primair]:hover,
	#content-main > header nav.navbar-icon:not(.navbar-filter) > ul.kopbalk__acties > li > a:not(.accountknop)[data-primair]:focus {
		background: var(--brand-solid-hover);
		color: var(--on-brand);
	}

	/* Een uitklap uit de lijst (Exporteren, Handige links) gaat omhoog en hangt
	   aan de schermranden, boven de lijst; bootstraps .open toont hem. Vast
	   gepositioneerd, dus de overflow van de lijst knipt hem niet af. */
	#content-main > header nav.navbar-icon:not(.navbar-filter) > ul.kopbalk__acties > li > ul.dropdown-menu {
		position: fixed;
		top: auto;
		bottom: calc(78px + env(safe-area-inset-bottom, 0px));
		left: 12px;
		right: 12px;
		width: auto;
		min-width: 0;
		max-width: none;
		max-height: 60vh;
		overflow-y: auto;
	}

	#content-main > header nav.navbar-icon:not(.navbar-filter) > ul.kopbalk__acties .uitklap__label { white-space: normal; }
}


/* --- telefoon: zoekveld en filters in eigen rijen ---------------------------- *
 * Onder 768px. Het zoekveld van Bedrijven stond tot 8 september 2026 op
 * hidden-xs en was onder 768 dus weg; nu een eigen rij in de kopbalk, over
 * de volle breedte. De filterbalk in de inhoud (bedrijven, recordings,
 * shoppingcarts) wikkelde in drie rijen; nu één rij die horizontaal veegt,
 * met "toepassen" vast rechts. De filters die in de kopbalk zelf staan
 * (de periode op het dashboard) krijgen daar ook een eigen rij.
 * De layout zet kopbalk__zoek en kopbalk__filter op de lijsten die uit de
 * sleuven $zoekveld en $filter komen; de controller bepaalt wat erin staat.
 */
@media (max-width: 767px) {
	#content-main > header nav.navbar-icon > ul.kopbalk__zoek,
	#content-main > header nav.navbar-icon > ul.kopbalk__filter {
		flex: 1 1 100%;
		order: 10;
		min-width: 0;
	}

	#content-main > header nav.navbar-icon > ul.kopbalk__zoek > li.navbar-form {
		flex: 1 1 auto;
		margin: 0;
		padding: 0;
	}

	#content-main > header .searchbox { width: 100%; }
	#content-main > header .searchbox .form-control { height: 44px; border-radius: 12px; }

	#content-main > header nav.navbar-icon > ul.kopbalk__filter > li { flex: 1 1 auto; min-width: 0; }

	#content-main > header nav.navbar-filter > ul {
		flex-wrap: nowrap;
		overflow-x: auto;
		scrollbar-width: none;
	}

	#content-main > header nav.navbar-filter > ul::-webkit-scrollbar { display: none; }
	#content-main > header nav.navbar-filter > ul > li { flex: 0 0 auto; }

	/* De filterbalk in de inhoud. */
	#main-body nav.navbar-filter > ul {
		flex-wrap: nowrap;
		overflow-x: auto;
		scrollbar-width: none;
		padding-bottom: 2px;
	}

	#main-body nav.navbar-filter > ul::-webkit-scrollbar { display: none; }
	#main-body nav.navbar-filter > ul > li { flex: 0 0 auto; }
	#main-body nav.navbar-filter > ul > li > a { height: 36px; }

	/* "toepassen" achteraan en vast aan de rechterkant, met een vervagend vlak
	   ervoor zodat de chips eronder schuiven. Alleen waar :has() werkt; anders
	   veegt de rij gewoon, met toepassen ergens in de rij. */
	@supports selector(:has(*)) {
		#main-body nav.navbar-filter > ul > li:has(> a#filter-submit) {
			position: sticky;
			right: 0;
			z-index: 1;
			order: 100;
			margin-left: auto;
			padding-left: 14px;
			background: linear-gradient(90deg, transparent, var(--filterbalk) 12px);
		}
	}
}


/* --- telefoon: tags en recordings als kaarten -------------------------------- *
 * Onder 768px. Gemeten op 8 september 2026: de tagtabel was 617px breed in
 * een vak van 360, met de kolommen ouderdom, staat en het potlood buiten
 * beeld en niets dat zei dat er meer was; de recordingtabel 751px en gewoon
 * afgekapt. De rijen van allebei tekent de app zelf (tag.blade.php en
 * tagRij(); recording/index.blade.php), dus elke cel krijgt een plek in de
 * kaart: de kop verdwijnt, een rij wordt een kaart, een cel een blok.
 */
@media (max-width: 767px) {
	.kenmerktabel,
	.kenmerktabel > tbody,
	.kenmerktabel > tbody > tr,
	.kenmerktabel > tbody > tr > td,
	.opnametabel,
	.opnametabel > tbody,
	.opnametabel > tbody > tr,
	.opnametabel > tbody > tr > td { display: block; width: auto; }

	.kenmerktabel > thead,
	.opnametabel > thead { display: none; }

	.kenmerktabel > tbody > tr,
	.opnametabel > tbody > tr,
	.opnametabel > tbody > tr:nth-of-type(odd) {
		position: relative;
		margin: 0 0 8px;
		padding: 12px 14px;
		border: 1px solid var(--line);
		border-radius: 12px;
		background: var(--surface-raised);
	}

	.kenmerktabel > tbody > tr > td,
	.opnametabel > tbody > tr > td { padding: 0; border: 0; }

	/* Tags: de chip bovenaan met de knoppen rechts ernaast, daaronder de
	   houdbaarheid en de staat op één regel. */
	.kenmerktabel > tbody > tr > td.kenmerktabel__tag { padding-right: 100px; white-space: normal; }

	.kenmerktabel > tbody > tr > td.kenmerktabel__ouderdom,
	.kenmerktabel > tbody > tr > td.kenmerktabel__staat {
		display: inline-block;
		margin-top: 8px;
		font-size: 13px;
	}

	.kenmerktabel > tbody > tr > td.kenmerktabel__ouderdom::after {
		content: "·";
		margin: 0 8px;
		color: var(--ink-faint);
	}

	.kenmerktabel > tbody > tr > td.kenmerktabel__acties {
		position: absolute;
		top: 8px;
		right: 8px;
	}

	.kenmerktabel .actieknop { width: 44px; height: 44px; }

	/* Recordings: bedrijf bovenaan, dan datum en duur naast elkaar, de
	   context eronder en de afspeelknop over de breedte. */
	.opnametabel > tbody > tr.recording {
		display: grid;
		grid-template-columns: minmax(0, 1fr) auto;
		grid-template-areas: "bedrijf bedrijf" "datum duur" "context context" "knop knop";
		gap: 6px 12px;
		align-items: center;
	}

	.opnametabel > tbody > tr.recording > td:nth-child(1) { grid-area: bedrijf; }
	.opnametabel > tbody > tr.recording > td:nth-child(2) { grid-area: knop; margin-top: 4px; }
	.opnametabel > tbody > tr.recording > td:nth-child(3) { grid-area: datum; font-size: 13px; color: var(--ink-muted); }
	.opnametabel > tbody > tr.recording > td:nth-child(4) { grid-area: duur; }
	.opnametabel > tbody > tr.recording > td:nth-child(5) { grid-area: context; font-size: 13px; color: var(--ink-muted); }
	.opnametabel > tbody > tr.recording > td:nth-child(5):not(:empty)::before { content: "via trigger "; }

	.opnametabel .opname-bedrijf__naam { font-size: 15px; }
	.opnametabel .duurcel { justify-content: flex-end; }

	.opnametabel .opname-knop,
	.opnametabel .opname-loopt {
		display: flex;
		justify-content: center;
		height: 44px;
		border-radius: 12px;
		font-size: 14px;
	}
}


/* --- tabellen die op een telefoon te breed zijn: zichtbaar scrollen ---------- *
 * Licenties (862px op 375, uit datatables) en shoppingcarts (673px) werden
 * gewoon afgekapt, gemeten op 8 september 2026. Ze staan nu in een omhulsel
 * dat horizontaal scrolt, met onder 768px een schaduwrand rechts die laat
 * zien dat er meer is -- het patroon van de gebruikerstabel, zonder de vaste
 * kolom, want die tabellen hebben geen kolom die een rij op zich herkenbaar
 * maakt. De schaduw is een achtergrond op het omhulsel zelf en scrolt dus
 * niet mee met de inhoud.
 */
.tabel-omhulsel {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

@media (max-width: 767px) {
	.tabel-omhulsel {
		margin: 0 -15px;
		padding: 0 15px;
		background: linear-gradient(90deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, .10)) right / 26px 100% no-repeat;
		background-attachment: scroll;
	}

	.tabel-omhulsel > table { min-width: 640px; }
}


/* --- telefoon: dialogen als schuifblad --------------------------------------- *
 * Onder 768px schuift elke dialoog van onderen in, over de volle breedte, met
 * een greep bovenaan; de kop en de voet staan vast en de romp scrolt
 * ertussen. Gemeten op 8 september 2026: de actiedialoog was op 375px een
 * venster van 325 bij 779 met de soorten en het formulier in één kolom. Die
 * dialoog is hier twee stappen: eerst de soorten, dan het formulier van de
 * gekozen soort met een terugknop in de kop (is-stap2, gezet in
 * trigger-acties.js; is-bestaand bij een bestaande actie, dan is er geen
 * stap één en dus geen terugknop).
 */
.actiemodal__terug { display: none; }

@media (max-width: 767px) {
	.modal .modal-dialog {
		position: fixed;
		top: auto;
		right: 0;
		bottom: 0;
		left: 0;
		display: flex;
		flex-direction: column;
		width: auto;
		max-height: 92vh;
		margin: 0;
	}

	.modal.fade .modal-dialog { transform: translate(0, 100%); transition: transform .25s ease-out; }
	.modal.in .modal-dialog { transform: translate(0, 0); }

	.modal .modal-content {
		display: flex;
		flex-direction: column;
		min-height: 0;
		max-height: 92vh;
		border: 0;
		border-radius: 18px 18px 0 0;
	}

	.modal .modal-header {
		flex: 0 0 auto;
		padding-top: 24px;
		border-radius: 18px 18px 0 0;
	}

	.modal .modal-header::before {
		content: "";
		position: absolute;
		top: 8px;
		left: 50%;
		width: 40px;
		height: 4px;
		margin-left: -20px;
		border-radius: 2px;
		background: var(--line-strong);
	}

	.modal .modal-body {
		flex: 1 1 auto;
		min-height: 0;
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
	}

	.modal .modal-footer {
		flex: 0 0 auto;
		padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
	}

	/* Duimmaat voor de knoppen in de voet van een schuifblad; op het bureaublad
	   zijn ze 36. Gemeten op 9 september 2026 in de tagdialoog op 375px: 36. */
	.modal .modal-footer .btn { height: 44px; }

	/* De actiedialoog in twee stappen. */
	.actie-modal .modal-body > .row > .col-sm-8 { display: none; }
	.actie-modal.is-stap2 .modal-body > .row > .col-sm-8 { display: block; }
	.actie-modal.is-stap2 .modal-body > .row > .col-sm-4 { display: none; }
	.actie-modal .actie-keuze__kop { display: none; }
	.actie-modal a.actie-keuze__item { min-height: 56px; }

	.actie-modal.is-stap2:not(.is-bestaand) .actiemodal__terug {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		flex: 0 0 auto;
		width: 40px;
		height: 40px;
		margin: -8px 4px -8px -8px;
		padding: 0;
		border: 0;
		border-radius: 10px;
		background: var(--surface-hover);
		color: var(--ink);
		font-size: 16px;
	}

	/* Staat het tagformulier in de modal (heeft-tagformulier, gezet door
	   tagvenster.js), dan heeft dat zijn eigen "Terug naar de actie"; een
	   terugknop naar de soorten ernaast zou een tweede terug zijn. */
	.actie-modal.is-stap2.heeft-tagformulier .actiemodal__terug { display: none; }
}


/* --- telefoon: de groepsnamen boven de bubbels ------------------------------- *
 * Onder 600px legt bubbles.js de groepen "net actief" en "enkele minuten
 * stil" boven elkaar in plaats van naast elkaar, en zet hij deze twee
 * naampjes boven de groepen; op een breed scherm staan die in de legenda.
 */
.bubbel-groepkop {
	position: absolute;
	left: 0;
	right: 0;
	text-align: center;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--ink-faint);
	pointer-events: none;
}

.bubbel-groepkop[hidden] { display: none; }