/* Add here all your CSS customizations */

/* =====================================================================
   IM-ASSIST - IMPACT
   Ruimte tussen de breadcrumbs (rechtsboven) en de rand van de pagina.
   Het thema geeft .right-wrapper standaard geen rechter-padding,
   waardoor de tekst tegen de rand van de page-header aan kan komen.
   ===================================================================== */
.page-header .right-wrapper {
	padding-right: 32px;
	box-sizing: border-box;
}

/* =====================================================================
   IM-ASSIST - IMPACT
   Versie-badge, vastgezet onderaan de linker menubalk (sidebar-left)
   ===================================================================== */
.sidebar-version {
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	padding: 10px 15px;
	text-align: center;
	font-size: 11px;
	letter-spacing: .5px;
	color: rgba(255, 255, 255, .35);
	background: rgba(0, 0, 0, .25);
	border-top: 1px solid rgba(255, 255, 255, .08);
	z-index: 20;
	box-sizing: border-box;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.sidebar-version a {
	color: inherit;
	text-decoration: none;
	display: inline-block;
	transition: color .15s ease-in-out;
}

.sidebar-version a:hover,
.sidebar-version a:focus {
	color: rgba(255, 255, 255, .75);
	text-decoration: none;
}

.sidebar-version a:hover .version-label,
.sidebar-version a:hover .version-number,
.sidebar-version a:focus .version-label,
.sidebar-version a:focus .version-number {
	color: rgba(255, 255, 255, .9);
}

.sidebar-version .version-label {
	text-transform: uppercase;
	opacity: .7;
	margin-right: 4px;
}

.sidebar-version .version-number {
	color: rgba(255, 255, 255, .6);
	font-weight: 600;
}

/* Ingeklapte sidebar: alleen het versienummer tonen, compacter */
html.sidebar-left-collapsed .sidebar-version {
	padding: 8px 4px;
	font-size: 9px;
}

html.sidebar-left-collapsed .sidebar-version .version-label {
	display: none;
}

/* "Credits"-koppeling naast het versienummer (sinds v0.1.62) — los
   klikbaar element naast de changelog-link, verdwijnt net als het
   "Versie"-label zodra de sidebar ingeklapt is (te weinig ruimte). */
.sidebar-version .credits-link {
	color: rgba(255, 255, 255, .35);
}

.sidebar-version .credits-link a {
	color: inherit;
	text-decoration: none;
	transition: color .15s ease-in-out;
}

.sidebar-version .credits-link a:hover,
.sidebar-version .credits-link a:focus {
	color: rgba(255, 255, 255, .9);
}

html.sidebar-left-collapsed .sidebar-version .credits-link {
	display: none;
}

/* =====================================================================
   IM-ASSIST - IMPACT
   Gebruikersfoto met klasse-badge-overlay.
   Gebaseerd op het bestaande thema-patroon voor een klein plaatje
   over de rechter-onderhoek van een profielfoto (zie
   .sidebar-widget.widget-friends .profile-picture:after in theme.css),
   hier hergebruikt om de klasse-afbeelding over de gebruikersfoto heen
   te tonen.
   ===================================================================== */
.avatar-met-klasse {
	position: relative;
	display: inline-block;
}

.avatar-met-klasse img.avatar-foto {
	display: block;
	border-radius: 50%;
	object-fit: cover;
}

.avatar-met-klasse img.avatar-klasse-badge {
	position: absolute;
	right: -4px;
	bottom: -4px;
	border-radius: 50%;
	border: 2px solid #1d2127;
	background: #1d2127;
	object-fit: contain;
}

/* =====================================================================
   Ereteken (sinds v0.2.6): de donateurs, testers en helpers van de
   Credits-pagina krijgen overal waar hun profielfoto verschijnt een
   gouden ring om die foto — op de website en in de app.

   Bewust subtiel: geen extra label, badge of icoon dat ruimte inneemt
   of de bediening in de weg zit. Alleen een randje dat je pas opvalt
   zodra je erop let, en dat bij aanwijzen vertelt waaróm het er staat
   (zie de title in renderAvatarMetKlasse()).

   De ring is DUBBEL zo dik als de standaardrand die elders in dit
   avatarsysteem gebruikt wordt (de 2px om de klasse-badge hieronder),
   dus 4px — en 6px in de grote variant, waar de foto ruim twee keer zo
   groot is en een 4px-ring optisch zou wegvallen.

   Kleur #D4AF37 (klassiek goud) in plaats van het felle #FFC107 dat
   elders voor waarschuwingen wordt gebruikt: dat zou als een
   attentiesignaal lezen, en dit is juist een eerbetoon.
   ===================================================================== */
.avatar-met-klasse.avatar-ereteken img.avatar-foto {
	border: 4px solid #D4AF37;
	/* De rand valt binnen de opgegeven breedte/hoogte, zodat een avatar
	   met ereteken exact evenveel ruimte inneemt als een zonder — een
	   lijst met beide erin blijft daardoor netjes uitgelijnd. */
	box-sizing: border-box;
	/* Zachte gloed: maakt de ring ook op een donkere achtergrond
	   herkenbaar als goud in plaats van als een bruine rand. */
	box-shadow: 0 0 6px rgba(212, 175, 55, .55);
}

.avatar-met-klasse.avatar-ereteken.avatar-groot img.avatar-foto {
	border-width: 6px;
	box-shadow: 0 0 10px rgba(212, 175, 55, .6);
}

/* In de userbox is de foto maar 40px; daar zou 4px de foto zelf
   opvreten. 3px houdt de ring daar herkenbaar zonder te verstikken. */
.userbox .avatar-met-klasse.avatar-ereteken img.avatar-foto {
	border-width: 3px;
	box-shadow: 0 0 5px rgba(212, 175, 55, .55);
}

/* Kleine variant: gebruikt in de userbox rechtsboven */
.userbox .avatar-met-klasse img.avatar-foto {
	width: 40px;
	height: 40px;
}

.userbox .avatar-met-klasse img.avatar-klasse-badge {
	width: 16px;
	height: 16px;
	border-width: 1px;
}

/* Grote variant: gebruikt in de profielkaart op profiel.php */
.avatar-met-klasse.avatar-groot img.avatar-foto {
	width: 90px;
	height: 90px;
}

.avatar-met-klasse.avatar-groot img.avatar-klasse-badge {
	width: 32px;
	height: 32px;
}

/* =====================================================================
   IM-ASSIST - IMPACT
   Berichten (mailbox) — eigen lay-out bovenop de thema-standaard.

   De thema-CSS voor .mailbox-email-list gaat uit van een vaste rijhoogte
   van 50px met exact ÉÉN regel afzendernaam (plus ruimte voor een
   selectie-checkbox die wij niet gebruiken). Omdat wij zowel naam +
   bedrijfsnaam (twee regels) tonen als geen checkbox hebben, overschrijven
   we hier expliciet alle relevante offsets — inclusief het resetten van
   de padding op de rij zelf — zodat er geen verborgen, padding-afhankelijke
   berekening meer meespeelt en niets meer over elkaar heen kan komen te
   staan.
   ===================================================================== */
.mailbox-email-list li.bericht-rij {
	height: 64px;
	padding: 0;
}

.mailbox-email-list li.bericht-rij .col-sender {
	width: 230px;
}

.mailbox-email-list li.bericht-rij .col-sender .sender-naam,
.mailbox-email-list li.bericht-rij .col-sender .sender-bedrijf {
	position: absolute;
	left: 20px;
	width: 205px;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}

.mailbox-email-list li.bericht-rij .col-sender .sender-naam {
	top: 12px;
}

.mailbox-email-list li.bericht-rij .col-sender .sender-bedrijf {
	top: 34px;
	font-size: .75rem;
	opacity: .65;
}

.mailbox-email-list li.bericht-rij .col-mail {
	left: 270px;
	right: 20px;
}

.mailbox-email-list li.bericht-rij .col-mail .mail-content {
	top: 18px;
	right: 170px;
}

.mailbox-email-list li.bericht-rij .col-mail .mail-date {
	top: 18px;
	left: auto;
	right: 0;
	width: 160px;
	padding-left: 0;
	text-align: right;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

@media only screen and (max-width: 767px) {
	.mailbox-email-list li.bericht-rij {
		height: 96px;
		padding: 0;
	}

	.mailbox-email-list li.bericht-rij .col-sender {
		width: 100%;
	}

	.mailbox-email-list li.bericht-rij .col-sender .sender-naam,
	.mailbox-email-list li.bericht-rij .col-sender .sender-bedrijf {
		left: 20px;
		right: 20px;
		width: auto;
	}

	.mailbox-email-list li.bericht-rij .col-sender .sender-naam {
		top: 10px;
	}

	.mailbox-email-list li.bericht-rij .col-sender .sender-bedrijf {
		top: 32px;
	}

	.mailbox-email-list li.bericht-rij .col-mail {
		left: 20px;
		right: 20px;
	}

	.mailbox-email-list li.bericht-rij .col-mail .mail-content {
		top: 56px;
		line-height: 1.3;
	}

	.mailbox-email-list li.bericht-rij .col-mail .mail-date {
		top: 10px;
		text-align: right;
	}
}



/* Compose-formulier: expliciete, beperktere maximale breedte i.p.v.
   de volle (brede) kaartbreedte van col-lg-9 — een compose-formulier
   dat over de hele breedte van een groot scherm uitrekt oogt en werkt
   onprettig breed. Ook een harde box-sizing/max-width-garantie op elk
   veld zelf, zodat niets ooit buiten dit blok kan uitsteken.

   BELANGRIJK: theme.css heeft hier standaard
   ".mailbox-compose { margin: -20px -40px 0 -40px; padding: 0 15px; }"
   — een negatieve marge die bedoeld was om het blok tot de rand van
   een bredere, originele omliggende container te laten "doorlopen".
   In onze eigen (eenvoudigere) kaart-structuur duwt die negatieve
   marge het hele blok circa 25px naar links t.o.v. de kaartrand en
   de kop erboven, en zorgt zo voor precies het "te ver naar links en
   kleiner dan de kaart"-effect. Hier expliciet gereset naar een
   normale, voorspelbare marge/padding van 0. */
.mailbox-compose {
	margin: 0;
	padding: 0;
	max-width: 640px;
}

.mailbox-compose .form-group,
.mailbox-compose .form-control {
	max-width: 100%;
	box-sizing: border-box;
}

.mailbox-compose textarea.form-control {
	width: 100%;
	resize: vertical;
}

/* Verificatiepagina: naar boven uitgelijnd i.p.v. verticaal gecentreerd
   (in tegenstelling tot login.php), terwijl links/rechts (horizontaal)
   netjes gecentreerd blijft via de bestaande .center-sign-opmaak. */
.body-sign-top .center-sign {
	vertical-align: top;
	padding-top: 60px;
}

/* =====================================================================
   IM-ASSIST - IMPACT
   Bugfix: userbox-peiltje (custom-caret) hoort alleen op mobiel te
   verschijnen, niet op een pc-scherm. Het thema zelf heeft hier geen
   responsive regel voor (altijd zichtbaar), dus expliciet verbergen
   vanaf desktop-breedte (>= 768px).
   ===================================================================== */
@media only screen and (min-width: 768px) {
	.userbox .custom-caret {
		display: none;
	}
}

/* =====================================================================
   IM-ASSIST - IMPACT
   Bugfix: op een pc-scherm (>= 768px) toont het thema .mailbox-email-list
   standaard met position:absolute, top:191px, bottom:0, overflow:hidden
   (html.fixed .mailbox .mailbox-email-list in theme.css). Dat is
   ontworpen voor de originele "content-with-menu"-structuur met een
   vaste, bekende totale hoogte van de omliggende container — een
   structuur die wij niet meer gebruiken (zie de eerdere bugfix voor de
   overlopende berichtensectie). Zonder die specifieke ouder-hoogte
   berekent de browser hier een hoogte van maar 1px, waardoor de hele
   berichtenlijst op een pc-scherm onzichtbaar werd (bevestigd via
   directe meting: height:1px, overflow:hidden), terwijl dit op mobiel
   (< 768px, waar deze thema-regel niet geldt) wel gewoon zichtbaar was.
   Hier expliciet teruggezet naar normale, voorspelbare positionering.
   ===================================================================== */
@media only screen and (min-width: 768px) {
	html.fixed .mailbox .mailbox-email-list {
		position: static;
		top: auto;
		bottom: auto;
		left: auto;
		right: auto;
		overflow: visible;
	}
}

/* =====================================================================
   IM-ASSIST - IMPACT
   Bugfix: de userbox-tekst (naam + klasse) sprong naar een nieuwe regel
   ONDER de profielfoto i.p.v. ernaast. Oorzaak (bevestigd met een
   directe meting): .profile-picture en .profile-info zijn beide
   display:inline-block (theme.css) zonder white-space:nowrap op hun
   gezamenlijke container (.userbox > a) — inline-block-elementen kunnen
   dan, net als gewone tekst, naar een nieuwe regel wikkelen zodra ze
   samen niet meer op de beschikbare breedte passen. Onze klassenamen
   zijn beduidend langer dan de korte voorbeeldtekst uit het thema (bv.
   "Aspirant Incidentmedewerker"), waardoor dit sneller mis kan gaan.
   Hier afgedwongen dat dit nooit meer gebeurt: de naam/klasse worden
   desnoods met "…" afgekapt, maar blijven altijd naast de foto staan.
   ===================================================================== */
.userbox > a {
	white-space: nowrap;
}

.userbox .profile-info {
	max-width: 165px;
	overflow: hidden;
	vertical-align: middle;
}

.userbox .profile-info .name,
.userbox .profile-info .role {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* Berichten-notificatie-bubbel: ~20px naar links verplaatsen op een
   pc-scherm (op mobiel prima zoals het was, dus alleen vanaf 768px).
   .notifications heeft standaard margin-right: -10px (theme.css); door
   dit om te zetten naar +10px schuift het hele (rechts-uitgelijnde)
   .header-right-blok, en dus het icoontje zelf, in totaal 20px naar
   links op t.o.v. de userbox. */
@media only screen and (min-width: 768px) {
	.header-right .notifications {
		margin-right: 10px;
	}
}

/* =====================================================================
   IM-ASSIST - IMPACT
   Sidebar + page-header (breadcrumb-balk): BEWUST altijd donker,
   ongeacht het licht/donker-thema van de rest van de website.

   Dit is een eigenschap van het originele, ongewijzigde Porto Admin-
   thema zelf, geen keuze van ons: in het thema-brondbestand
   (theme.css) hebben ".sidebar-left" en ".page-header" een vaste
   achtergrondkleur (#1D2127 resp. #171717) ZONDER een bijbehorende
   "html.dark ..."-tegenhanger — in tegenstelling tot vrijwel alle
   andere elementen in het thema, die wél zo'n donkere variant hebben.
   Met andere woorden: het thema is doelbewust ontworpen met een
   permanent donkere sidebar en breadcrumb-balk als vast navigatie-
   anker, onafhankelijk van of de rest van de pagina licht of donker
   staat — een veelgebruikt patroon bij dashboards.

   Een eerdere versie van dit bestand voegde hier alsnog een lichte
   variant voor toe (om de sidebar "mee te laten wisselen" met het
   thema), maar dat ging dus lijnrecht tegen het originele ontwerp in
   en veroorzaakte weerbarstige, moeilijk te reproduceren render-
   problemen. Die overrides zijn hier verwijderd; sidebar en
   page-header volgen nu weer het gedrag van het onaangepaste thema.
   ===================================================================== */

/* =====================================================================
   IM-ASSIST - IMPACT
   Mapnavigatie-knoppen (Inbox/Verzonden/Prullenbak) op berichten.php:
   dit zijn standaard Bootstrap ".list-group-item"-elementen, een
   component die het thema zelf niet aanpast. Daardoor toonden deze
   knoppen altijd Bootstrap's eigen kleuren (fel wit met Bootstraps
   eigen blauw #0D6EFD voor de actieve knop) — in beide thema's
   identiek en duidelijk niet passend bij de rest van de donkere/lichte
   pagina eromheen. Hier expliciet uitgelijnd met de kaartkleuren die
   het thema zelf al gebruikt (card-header/card-body), en de eigen
   blauwe accentkleur (#0090FE) i.p.v. Bootstraps standaardblauw.
   ===================================================================== */
.list-group-item {
	background: #fdfdfd;
	color: #3b3e47;
	border-color: #DADADA;
}

.list-group-item:hover:not(.active) {
	background: #f6f6f6;
}

.list-group-item.active {
	background: #0090FE;
	border-color: #0090FE;
	color: #fff;
}

html.dark .list-group-item {
	background: #2e353e;
	color: #808697;
	border-color: #383f48;
}

html.dark .list-group-item:hover:not(.active) {
	background: #282d36;
	color: #ABB4BE;
}

html.dark .list-group-item.active {
	background: #0090FE;
	border-color: #0090FE;
	color: #fff;
}



/* =====================================================================
   IM-ASSIST - IMPACT
   Changelog: mijlpaal-kaart (bv. de 0.1.0 Alpha-release) met een
   bewust afwijkend uiterlijk t.o.v. reguliere changelog-entries, plus
   het gecomprimeerde/inklapbare 0.0.x-archiefblok.
   ===================================================================== */
.mijlpaal-kaart {
	border: 2px solid #FFC107;
	background: linear-gradient(135deg, rgba(255, 193, 7, 0.08) 0%, transparent 60%);
}

html.dark .mijlpaal-kaart {
	background: linear-gradient(135deg, rgba(255, 193, 7, 0.12) 0%, #2e353e 60%);
}

.archief-kaart summary {
	list-style: none;
}

.archief-kaart summary::-webkit-details-marker {
	display: none;
}

.archief-kaart summary:before {
	content: "\25B6";
	display: inline-block;
	margin-right: 10px;
	font-size: 11px;
	transition: transform 0.15s ease;
}

.archief-kaart[open] summary:before {
	transform: rotate(90deg);
}

/* Knipperende aandacht voor Extern-meldingen (sinds v0.2.0): een
   melding die een Opdrachtgever zelf heeft aangemaakt en nog niet door
   een dispatcher bevestigd is, moet extra opvallen — zowel de
   statusbadge in het meldingenoverzicht als de bubbel naast de
   userbox in de header. */
@keyframes ia-knipperen {
	0%, 100% { opacity: 1; }
	50% { opacity: 0.25; }
}

.ia-knippert {
	animation: ia-knipperen 1s infinite;
}

/* Prioriteitskleuren (sinds v0.1.40) — zelfde kleuren als de
   IMPACT-app. Prio0 knippert bewust tussen blauw en lichtblauw (niet
   de gewone opacity-knipper hierboven, dat zou de blauwe kleur
   grotendeels laten verdwijnen i.p.v. duidelijk kleur laten
   wisselen). Prio2 (oranje) heeft geen kant-en-klare Bootstrap-
   badgeklasse, dus hier toegevoegd. */
@keyframes prio0-knipperen {
	0%, 100% { background-color: #0d6efd; }
	50% { background-color: #6ea8fe; }
}
.badge-prio0 {
	color: #fff;
	animation: prio0-knipperen 1s infinite;
}
.bg-orange {
	background-color: #fd7e14 !important;
	color: #fff;
}

/* Aantalbubbel bij "Meldingen" in de sidebar (sinds v0.2.1): het thema
   plaatst de in-/uitklap-pijl van een submenu-item (ul.nav-main
   li.nav-parent > a:after in theme.css) absoluut gepositioneerd aan de
   rechterkant van de link. De badge (float-end) zou daar overheen
   vallen — daarom hier apart verschoven, zodat de pijl netjes
   zichtbaar blijft. */
#sidebar-meldingen-aantal {
	margin-right: 30px;
}

/* Uitklapbaar "extra/vervangende gebruiker toewijzen"-blok op
   melding.php (sinds v0.1.22): het peiltje draait vloeiend mee,
   zelfde gevoel als het in-/uitklap-pijltje van het sidebar-menu
   hierboven. */
.toewijzen-toggle .toewijzen-chevron {
	transition: transform 0.15s ease-in-out;
}
.toewijzen-toggle:hover {
	text-decoration: none;
}

/* WebSocket-verbindingsicoontje bovenin (sinds v0.1.57): groen zodra
   de WebSocket-server online is (live-pushmeldingen werken), rood
   wanneer niet — puur informatief, de rest van de website blijft
   sowieso gewoon werken via de REST-API. Zie websocket-status.php en
   de polling-logica in assets/js/custom.js. */
#header-websocket-status .notification-icon {
	cursor: default;
}
#header-websocket-status .bx-broadcast {
	transition: color 0.2s ease-in-out;
	color: #dc3545;
}
#header-websocket-status.ws-online .bx-broadcast {
	color: #28a745;
}

/* =====================================================================
   IM-ASSIST - IMPACT
   Bugfix (sinds v0.1.64): het thema stylet .form-control (tekstvelden)
   in donkere modus wel (zie html.dark .form-control in theme.css),
   maar .form-select (Bootstrap 5's aparte klasse voor dropdown-menu's,
   overal in de app gebruikt — bv. paginering "Toon per pagina",
   klasse-/categorie-keuzes, het rapportage-weergavefilter) had daar
   nooit een eigen regel voor gekregen, en viel dus terug op de witte
   browserstandaard, wat er middenin een donkere kaart uitspringt als
   een duidelijke misser. Zelfde kleuren als html.dark .form-control
   hierboven, voor een consistente uitstraling. */
html.dark .form-select {
	background-color: #282d36;
	border-color: #282d36;
	color: #EEE;
}
html.dark .form-select:focus {
	background-color: #282d36;
	color: #EEE;
}
html.dark .form-select[disabled] {
	background-color: #21262d;
}

/* Locatienummer op de gebruikersring bij het aanmaken van een melding
   (sinds v0.1.67, zie synchroniseerGebruikerLocatieMarkers() in
   melding-aanmaken.php) — een compact, permanent zichtbaar getal
   middenin de ring, zodat op het eerste gezicht (zonder te klikken)
   te zien is bij welke locatie een gekoppelde gebruiker hoort. */
.leaflet-tooltip.melding-gebruiker-locatienummer {
	background: #17a2b8;
	color: #fff;
	border: 2px solid #fff;
	border-radius: 50%;
	width: 22px;
	height: 22px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: 600;
	font-size: 12px;
	line-height: 1;
	padding: 0;
	box-shadow: 0 1px 4px rgba(0, 0, 0, .4);
}
.leaflet-tooltip.melding-gebruiker-locatienummer::before {
	display: none;
}

/* Credits-pagina (sinds v0.1.78): een naam die naar de eigen website
   van die persoon/dat bedrijf linkt, maar bewust ONOPVALLEND — het
   moet gewoon een naam in doorlopende tekst lijken, niet een
   evident-klikbare blauwe URL zoals een gewone link elders op de
   site. Wel nog een duidelijke hover-underline, voor wie er met de
   muis overheen gaat. */
.tekst-link-onopvallend {
	color: inherit;
	text-decoration: none;
}
.tekst-link-onopvallend:hover,
.tekst-link-onopvallend:focus {
	text-decoration: underline;
	color: inherit;
}

/* =====================================================================
   IM-ASSIST - IMPACT
   Aanwezigheidsbubbel in de userbar (sinds v0.1.83): laat zien wie er
   op dit moment op de WEBSITE/MELDKAMER is aangemeld — uitdrukkelijk
   niet de app-gebruikers. Klikbaar icoontje met het bekende rode
   aantalballetje, dat een klein uitklappaneel opent met per regel
   "klasse of titel - naam". Zie includes/aanwezigheid.php voor de
   inhoudelijke regels en assets/js/custom.js voor het gedrag.

   Kleuren bewust gelijk aan de bestaande donkere/lichte componenten
   elders in dit bestand (.list-group-item), zodat het paneel niet als
   losstaand element aanvoelt maar bij het thema hoort.
   ===================================================================== */
#header-aanwezig-bubbel {
	position: relative;
}

#header-aanwezig-bubbel .notification-icon {
	cursor: pointer;
}

/* Het paneel hangt onder het icoontje. Standaard verborgen; de
   "open"-klasse wordt door custom.js gezet. */
.aanwezig-paneel {
	display: none;
	position: absolute;
	top: 100%;
	right: 0;
	margin-top: 8px;
	min-width: 300px;
	max-width: 340px;
	max-height: 380px;
	overflow-y: auto;
	z-index: 1050;
	background: #fff;
	border: 1px solid #e0e0e0;
	border-radius: 5px;
	box-shadow: 0 4px 16px rgba(0, 0, 0, .18);
	text-align: left;
}

#header-aanwezig-bubbel.open .aanwezig-paneel {
	display: block;
}

.aanwezig-paneel-kop {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	padding: 10px 14px;
	border-bottom: 1px solid #e0e0e0;
	font-size: 12px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .3px;
	color: #777;
	white-space: nowrap;
}

.aanwezig-paneel-telling {
	background: #0090FE;
	color: #fff;
	border-radius: 10px;
	padding: 1px 8px;
	font-size: 11px;
	letter-spacing: 0;
}

.aanwezig-lijst {
	list-style: none;
	margin: 0;
	padding: 4px 0;
}

.aanwezig-lijst li {
	padding: 7px 14px;
	font-size: 13px;
	line-height: 1.35;
	color: #33383e;
	white-space: normal;
}

.aanwezig-lijst li + li {
	border-top: 1px solid #f0f0f0;
}

/* Het groene "online"-stipje vóór elke naam — iedereen in deze lijst
   is per definitie online (offline gebruikers worden hier niet
   getoond), dus dit is puur een visuele bevestiging daarvan. */
.aanwezig-lijst .aanwezig-stip {
	display: inline-block;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: #28a745;
	margin-right: 8px;
	vertical-align: middle;
	position: relative;
	top: -1px;
}

.aanwezig-lijst .aanwezig-titel {
	color: #0090FE;
	font-weight: 600;
}

.aanwezig-lijst .aanwezig-jij {
	opacity: .75;
	font-style: italic;
}

.aanwezig-leeg {
	padding: 14px;
	font-size: 13px;
	color: #999;
	text-align: center;
}

html.dark .aanwezig-paneel {
	background: #2e353e;
	border-color: #383f48;
	box-shadow: 0 4px 16px rgba(0, 0, 0, .45);
}

html.dark .aanwezig-paneel-kop {
	border-bottom-color: #383f48;
	color: #808697;
}

html.dark .aanwezig-lijst li {
	color: #ABB4BE;
}

html.dark .aanwezig-lijst li + li {
	border-top-color: #383f48;
}

html.dark .aanwezig-leeg {
	color: #808697;
}

/* =====================================================================
   Mijn documenten (sinds v0.2.12): weergave van je eigen documenten op
   mijn-documenten.php.

   Het thema werkt met kaarten van beperkte breedte, en een gescande
   pas of een A4-diploma is al snel enkele duizenden pixels breed. Zonder
   begrenzing zou zo'n bestand de hele pagina overnemen en op een
   telefoon volstrekt onbruikbaar worden. Vandaar een harde grens op
   zowel de breedte (nooit buiten de kaart) als de hoogte (nooit meer
   dan de halve schermhoogte), met een minimum zodat het op een klein
   scherm ook niet tot een postzegel krimpt.
   ===================================================================== */
.mijn-document-weergave {
	background: rgba(0, 0, 0, .15);
	border: 1px solid rgba(128, 134, 151, .25);
	border-radius: 4px;
	padding: 10px;
	text-align: center;
}

.mijn-document-weergave img {
	max-width: 100%;
	max-height: 50vh;
	height: auto;
	border-radius: 3px;
	cursor: zoom-in;
}

.mijn-document-weergave iframe {
	width: 100%;
	height: clamp(320px, 55vh, 700px);
	border: 0;
	border-radius: 3px;
	background: #fff;
}

/* =====================================================================
   Statistieken (sinds v0.2.19)
   ===================================================================== */
.stat-grafiek {
	width: 100%;
	height: 260px;
	display: block;
}
.stat-legenda {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	font-size: 12px;
	color: #808697;
}
.stat-bol {
	display: inline-block;
	width: 10px;
	height: 10px;
	border-radius: 50%;
	margin-right: 4px;
	vertical-align: middle;
}
/* De vlag komt uit Unicode-symbolen (zie renderLandVlag) en heeft op
   sommige systemen een afwijkende regelhoogte; vandaar de vaste maat. */
.land-vlag {
	font-size: 17px;
	line-height: 1;
	margin-right: 6px;
	vertical-align: middle;
}
.land-code {
	font-size: 12px;
	letter-spacing: .5px;
	vertical-align: middle;
}

/* Uptime-balk (sinds v0.2.20): één staafje per tijdvak, gekleurd naar
   het beschikbaarheidspercentage. Lager dan de gewone grafiek — het
   gaat om het patroon, niet om exacte hoogtes. */
.uptime-balk {
	width: 100%;
	height: 90px;
	display: block;
}

/* Time-tracking (sinds v0.2.26): "Op locatie" staat achter de totaaltijd
   omdat het er niet in meetelt. Een lijntje ervoor maakt die scheiding
   zichtbaar, zodat niemand de kolom per ongeluk bij de optelling
   rekent. */
.tt-scheiding {
	border-left: 2px solid rgba(128, 134, 151, .3);
}

/* ---------------------------------------------------------------------
   Scrollbare lijsten bij het toewijzen (sinds v0.2.50)

   Bij tien of meer locaties liep de toewijzingenlijst zo ver door dat
   de knop "Melding aanmaken" onder de vouw verdween: je scrollde langs
   een lijst zonder te zien waar je heen ging, en de kaart erboven was
   allang uit beeld.

   De lijst krijgt daarom een eigen hoogte met een eigen schuifbalk. In
   VH gerekend en niet in pixels: op een laptop hoort er minder in te
   passen dan op een wandscherm, en dan klopt een vaste hoogte nooit
   voor allebei.

   min-height zorgt dat er ook op een kleine hoogte iets zinnigs
   overblijft — een vak van twee regels hoog scrollen is erger dan geen
   vak.
   --------------------------------------------------------------------- */
.lijst-scrollbaar {
	max-height: 42vh;
	min-height: 8rem;
	overflow-y: auto;
	overflow-x: hidden;
	/* Ruimte voor de schuifbalk, zodat die niet over de inhoud valt. */
	padding-right: .5rem;
}

/* Een randje bovenaan en onderaan maakt zichtbaar DAT er gescrold kan
   worden; zonder die aanwijzing denkt iemand dat de lijst ophoudt. */
.lijst-scrollbaar::-webkit-scrollbar {
	width: 8px;
}
.lijst-scrollbaar::-webkit-scrollbar-track {
	background: rgba(128, 134, 151, .12);
	border-radius: 4px;
}
.lijst-scrollbaar::-webkit-scrollbar-thumb {
	background: rgba(128, 134, 151, .55);
	border-radius: 4px;
}
.lijst-scrollbaar::-webkit-scrollbar-thumb:hover {
	background: rgba(128, 134, 151, .8);
}

/* Firefox kent die onderdelen niet, maar wel dit. */
.lijst-scrollbaar {
	scrollbar-width: thin;
	scrollbar-color: rgba(128, 134, 151, .55) rgba(128, 134, 151, .12);
}

/* Het aantal erboven blijft staan terwijl je scrollt, zodat je weet
   hoeveel er nog volgt. */
.lijst-teller {
	position: sticky;
	top: 0;
	z-index: 2;
	padding: .35rem 0;
	margin-bottom: .25rem;
	background: var(--bs-body-bg, #21262d);
	border-bottom: 1px solid rgba(128, 134, 151, .25);
}

/* ---------------------------------------------------------------------
   Chatweergave (herzien in v0.2.53)

   Naar het voorbeeld van een teamchat: geen bubbels links en rechts,
   maar per bericht een avatar met de naam en de tijd erboven en de tekst
   eronder.

   Waarom dat hier beter werkt: in een groepschat bij een melding praten
   al snel vijf mensen door elkaar. Bij bubbels moet je de afzender uit
   de kleur en de uitlijning afleiden; zo staat de naam er gewoon.
   --------------------------------------------------------------------- */
.chat-regel {
	display: flex;
	gap: .75rem;
	padding: .3rem 1rem;
	align-items: flex-start;
}
.chat-regel:hover {
	background: rgba(128, 134, 151, .07);
}

/* Een vervolgbericht van dezelfde persoon: geen naam en geen avatar
   opnieuw, alleen minder ruimte erboven. Zo blijft een gesprek één
   geheel in plaats van een reeks losse blokjes. */
.chat-vervolg {
	padding-top: 0;
	margin-top: -.15rem;
}

.chat-avatar {
	flex: 0 0 2.25rem;
	width: 2.25rem;
	height: 2.25rem;
	border-radius: 50%;
	background: #0088CC;
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: .8rem;
	font-weight: 700;
	margin-top: .15rem;
}
/* Bij een vervolgbericht blijft de ruimte gereserveerd, zodat de tekst
   uitgelijnd blijft met die van het eerste bericht. */
.chat-vervolg .chat-avatar {
	background: transparent;
}

.chat-inhoud { min-width: 0; flex: 1; }

.chat-kop {
	display: flex;
	align-items: baseline;
	gap: .5rem;
	margin-bottom: .1rem;
}
.chat-naam { font-weight: 600; }
.chat-tijd { font-size: .75rem; opacity: .6; }

.chat-tekst {
	white-space: pre-wrap;
	word-break: break-word;
	line-height: 1.45;
}

/* Foto's: op een vast maximum, want een staande foto van een telefoon
   zou anders het hele scherm vullen en de rest van het gesprek
   wegduwen. */
.chat-foto {
	max-width: min(320px, 100%);
	max-height: 320px;
	border-radius: .5rem;
	margin: .25rem 0;
	display: block;
	cursor: zoom-in;
	background: rgba(128, 134, 151, .15);
}
.chat-foto-link:hover .chat-foto { opacity: .9; }

.chat-systeem {
	text-align: center;
	font-size: .8rem;
	opacity: .65;
	padding: .4rem 1rem;
	font-style: italic;
}

/* Datumscheiding met een lijn erdoor, zodat "Vandaag" leesbaar blijft
   maar niet als bericht wordt aangezien. */
.chat-dagscheiding {
	display: flex;
	align-items: center;
	gap: .75rem;
	padding: .6rem 1rem .3rem;
	font-size: .75rem;
	opacity: .6;
	text-transform: uppercase;
	letter-spacing: .05em;
}
.chat-dagscheiding::before,
.chat-dagscheiding::after {
	content: "";
	flex: 1;
	height: 1px;
	background: rgba(128, 134, 151, .3);
}

/* Hint bij de hectopunten-laag (sinds v0.2.54): de laag verschijnt pas
   vanaf zoomniveau 13. Zonder deze uitleg lijkt het alsof hij stuk is —
   precies de verwarring die de vorige poging opleverde. */
.hectopunten-hint {
	background: rgba(0, 0, 0, .72);
	color: #fff;
	padding: .35rem .6rem;
	border-radius: .25rem;
	font-size: .78rem;
	margin: 0 0 .5rem .5rem;
	pointer-events: none;
}

/* ---------------------------------------------------------------------
   Hectometerpaaltjes op de kaart (sinds v0.2.56)

   Een stip met het volledige opschrift ernaast ("A35 R 66.6"), zodat op
   de kaart meteen staat wat er over de radio doorgegeven wordt. De laag
   van PDOK tekende alleen het paalnummer; dat is te weinig.

   Het opschrift heeft een omlijning in de achtergrondkleur in plaats van
   een vlak eronder: over een drukke kaart heen blijft het zo leesbaar
   zonder dat er blokjes over de weg vallen.
   --------------------------------------------------------------------- */
.hectopunt-teken {
	white-space: nowrap;
	pointer-events: none;
}

.hectopunt-stip {
	display: inline-block;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: #111827;
	border: 1.5px solid #fff;
	vertical-align: middle;
	box-shadow: 0 0 2px rgba(0, 0, 0, .6);
}

.hectopunt-opschrift {
	display: inline-block;
	margin-left: 3px;
	font-size: 11px;
	font-weight: 700;
	line-height: 1;
	color: #111827;
	vertical-align: middle;
	/* Omlijning in wit: leesbaar op zowel een groen veld als een
	   grijze weg, zonder een vlak dat de kaart afdekt. */
	text-shadow:
		-1.5px -1.5px 0 #fff,  1.5px -1.5px 0 #fff,
		-1.5px  1.5px 0 #fff,  1.5px  1.5px 0 #fff,
		 0 -1.5px 0 #fff, 0 1.5px 0 #fff,
		-1.5px 0 0 #fff, 1.5px 0 0 #fff;
}

/* Op een gescheiden rijbaan liggen de linker- en rechterzijde vlak naast
   elkaar. De linkerzijde zet zijn opschrift daarom LINKS van de stip
   (sinds v0.2.57), zodat de twee uit elkaar lezen. De stip zelf blijft op
   de werkelijke plek van het paaltje staan. */
.hectopunt-links {
	transform: translateX(-100%);
	/* De stip staat nu rechts in het blokje; die weer terugduwen zodat
	   hij precies op de coördinaat valt. */
	margin-left: 8px;
}
.hectopunt-links .hectopunt-opschrift {
	margin-left: 0;
	margin-right: 3px;
}

/* ---------------------------------------------------------------------
   Lagenbubbel op de kaart (sinds v0.2.65)

   Rechtsonder een klein rond knopje dat openklapt zodra je er met de
   muis op staat. Klein zolang je het niet nodig hebt, want op een
   meldkamerscherm telt elke vierkante centimeter kaart.

   Rechtsonder en niet rechtsboven: daar zaten de schakelaars de kaart in
   de weg op precies de plek waar bij een melding vaak de pinnetjes
   staan. Linksboven is bezet door de zoomknoppen.

   HET PANEEL STAAT LOS (position: absolute) EN NIET IN DE FLEX-RIJ.
   Eerst zat het in de rij naast de knop, met overflow: hidden eroverheen.
   Dat leek te werken, maar het brede paneel duwde de knop links buiten de
   zichtbare cirkel: je zag een knopje op de ene plek terwijl het
   klikgebied 160 pixels verderop lag. Gevonden door de posities van de
   bubbel en de knop naast elkaar te meten — die scheelden precies de
   breedte van het paneel.

   Zo blijft de knop ook op zijn plek bij het openklappen. Groeit de
   bubbel onder de muis vandaan, dan klapt hij dicht, komt de muis er weer
   op, en knippert het geheel.
   --------------------------------------------------------------------- */
.kaart-lagenbubbel {
	position: relative;
	width: 38px;
	height: 38px;
	margin: 0 10px 10px 0;
}

.kaart-lagenbubbel-knop {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	border-radius: 50%;
	background: rgba(29, 33, 39, .92);
	color: #fff;
	font-size: 1.25rem;
	cursor: pointer;
	box-shadow: 0 1px 6px rgba(0, 0, 0, .45);
}

.kaart-lagenbubbel-inhoud {
	position: absolute;
	/* Direct bóven de knop, tegen hem aan: met een tussenruimte valt de
	   muis erdoorheen op weg naar het paneel en klapt het weer dicht. */
	bottom: 100%;
	right: 0;
	margin-bottom: .3rem;
	padding: .5rem .7rem;
	background: rgba(29, 33, 39, .95);
	border-radius: .5rem;
	box-shadow: 0 1px 6px rgba(0, 0, 0, .45);
	color: #fff;
	white-space: nowrap;

	opacity: 0;
	visibility: hidden;
	transform: translateY(4px);
	transition: opacity .15s ease, transform .15s ease, visibility .15s;
}

/* Openklappen bij muis erop; is-open doet hetzelfde voor een tik op een
   aanraakscherm, waar "muis erop" niet bestaat. focus-within houdt het
   open bij bediening met het toetsenbord. */
.kaart-lagenbubbel:hover .kaart-lagenbubbel-inhoud,
.kaart-lagenbubbel.is-open .kaart-lagenbubbel-inhoud,
.kaart-lagenbubbel:focus-within .kaart-lagenbubbel-inhoud {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.kaart-schakelaar {
	display: flex;
	align-items: center;
	gap: .5rem;
	cursor: pointer;
	padding: .2rem 0;
	user-select: none;
	white-space: nowrap;
}
.kaart-schakelaar + .kaart-schakelaar {
	margin-top: .3rem;
	padding-top: .4rem;
	border-top: 1px solid rgba(255, 255, 255, .12);
}

/* Het echte keuzevakje blijft bestaan (voor toetsenbord en
   schermlezers) maar wordt niet getoond; de schakelaar ernaast doet het
   werk. */
.kaart-schakelaar input {
	position: absolute;
	opacity: 0;
	width: 0;
	height: 0;
}

.kaart-schakelaar-knop {
	position: relative;
	flex: 0 0 auto;
	width: 30px;
	height: 16px;
	border-radius: 8px;
	background: rgba(255, 255, 255, .25);
	transition: background .15s ease;
}
.kaart-schakelaar-knop::after {
	content: "";
	position: absolute;
	top: 2px;
	left: 2px;
	width: 12px;
	height: 12px;
	border-radius: 50%;
	background: #fff;
	transition: transform .15s ease;
}
.kaart-schakelaar input:checked + .kaart-schakelaar-knop {
	background: #0088CC;
}
.kaart-schakelaar input:checked + .kaart-schakelaar-knop::after {
	transform: translateX(14px);
}

/* Zichtbare omlijning bij bediening via het toetsenbord. */
.kaart-schakelaar input:focus-visible + .kaart-schakelaar-knop {
	outline: 2px solid #fff;
	outline-offset: 2px;
}

/* ---------------------------------------------------------------------
   Meldkamermeldingen rechts in beeld (sinds v0.2.67)

   Statuswijzigingen vanuit de app en noodmeldingen. Rechtsboven, onder
   de bovenbalk: daar kijkt niemand iets weg mee, en het is de plek waar
   je een melding verwacht.

   De lijst staat VAST in beeld en scrollt niet mee: een dispatcher die
   in een lange meldingenlijst zit te scrollen, hoort een noodmelding
   niet uit beeld te scrollen.
   --------------------------------------------------------------------- */
.meldkamer-meldingen {
	position: fixed;
	/* Onder de bovenbalk EN onder het kruimelpad: op 80px dekte de eerste
	   melding de navigatie af, en dan klik je precies mis wanneer je snel
	   terug wilt. */
	top: 118px;
	right: 16px;
	z-index: 2000;
	width: 340px;
	max-width: calc(100vw - 32px);
	max-height: calc(100vh - 100px);
	overflow-y: auto;
	display: flex;
	flex-direction: column;
	gap: .5rem;
	/* Alleen de meldingen zelf vangen muisklikken op; daarbuiten moet je
	   gewoon op de pagina eronder kunnen klikken. */
	pointer-events: none;
}

.meldkamer-melding {
	pointer-events: auto;
	background: rgba(29, 33, 39, .96);
	color: #fff;
	border-radius: .4rem;
	border-left: 4px solid #6c757d;
	padding: .55rem .7rem;
	box-shadow: 0 2px 10px rgba(0, 0, 0, .45);
	font-size: .85rem;
	animation: meldkamer-melding-in .18s ease;
}

@keyframes meldkamer-melding-in {
	from { opacity: 0; transform: translateX(12px); }
	to   { opacity: 1; transform: translateX(0); }
}

.meldkamer-melding-kop {
	display: flex;
	align-items: flex-start;
	gap: .5rem;
	font-weight: 600;
	margin-bottom: .15rem;
}
.meldkamer-melding-titel { flex: 1; }

.meldkamer-melding-sluiten {
	background: none;
	border: 0;
	color: inherit;
	opacity: .6;
	font-size: 1.1rem;
	line-height: 1;
	cursor: pointer;
	padding: 0 .1rem;
}
.meldkamer-melding-sluiten:hover { opacity: 1; }

.meldkamer-melding-tekst { opacity: .8; }

/* Statuswijziging: blauw, verdwijnt vanzelf. */
.meldkamer-melding-status { border-left-color: #0088CC; }

/* Contactverzoek: oranje, blijft staan. */
.meldkamer-melding-contact { border-left-color: #fd7e14; }

/* Noodmelding: rood, blijft staan, en pulseert zodat hij ook vanuit een
   ooghoek opvalt. Dit is de melding die je niet mag missen. */
.meldkamer-melding-nood {
	border-left-color: #dc3545;
	background: rgba(120, 20, 28, .96);
	animation: meldkamer-melding-in .18s ease, meldkamer-nood-puls 1.6s ease-in-out infinite;
}

@keyframes meldkamer-nood-puls {
	0%, 100% { box-shadow: 0 2px 10px rgba(0, 0, 0, .45); }
	50%      { box-shadow: 0 2px 10px rgba(0, 0, 0, .45), 0 0 0 4px rgba(220, 53, 69, .35); }
}

/* ---------------------------------------------------------------------
   Prio 0-lampen in de gebruikerspopup (sinds v0.2.68)

   Twee balletjes die OM EN OM blauw knipperen, zoals de optische
   signalen op een voorrangsvoertuig. Zo zie je in één oogopslag wie er
   met spoed mag rijden, zonder de tekst te hoeven lezen.

   Wie geen Prio 0 mag krijgt niets: dat is de normale situatie, en er
   iets bij zetten maakt de gewone gebruiker onnodig een geval apart.
   --------------------------------------------------------------------- */
.prio0-lampen {
	display: inline-flex;
	gap: 3px;
	vertical-align: middle;
	margin-left: .25rem;
}

.prio0-lamp {
	width: 9px;
	height: 9px;
	border-radius: 50%;
	background: #0d6efd;
	/* Als uitgangspunt gedempt: het knipperen doet het werk, en een
	   stilstaand fel blauw balletje leest als "altijd aan". */
	opacity: .25;
	animation: prio0-knipper 1s steps(1, end) infinite;
}

/* De rechter loopt een halve slag achter, zodat ze elkaar afwisselen in
   plaats van samen te knipperen. */
.prio0-lamp-rechts { animation-delay: .5s; }

@keyframes prio0-knipper {
	0%, 49%   { opacity: 1; box-shadow: 0 0 5px rgba(13, 110, 253, .9); }
	50%, 100% { opacity: .25; box-shadow: none; }
}

/* Sommige mensen worden onwel van bewegend beeld, en een besturings-
   systeem kan dat doorgeven. Dan blijven beide lampen gewoon aan: het
   kenmerk blijft zichtbaar, alleen zonder de beweging. */
@media (prefers-reduced-motion: reduce) {
	.prio0-lamp {
		animation: none;
		opacity: 1;
		box-shadow: 0 0 5px rgba(13, 110, 253, .9);
	}
}

/* Voorbeeld van de gekozen foto in de meldkamerchat (sinds v0.2.71).
   Eerst laten zien wát je verstuurt: zonder voorbeeld stuur je zo de
   verkeerde foto de meldkamer in, en terughalen kan niet. */
.wa-fotovoorbeeld {
	display: flex;
	align-items: center;
	gap: .5rem;
	padding: .4rem .6rem;
	border-top: 1px solid rgba(128, 134, 151, .2);
	font-size: .8rem;
}
.wa-fotovoorbeeld img {
	height: 38px;
	width: 38px;
	object-fit: cover;
	border-radius: .25rem;
}
.wa-fotovoorbeeld-naam { opacity: .75; }

/* ---------------------------------------------------------------------
   Noodoproep en contactverzoek in beeld (sinds v0.2.75)

   Een noodoproep is ROOD met een kaartje en twee knipperende stippen; een
   contactverzoek GROEN en rustig. Dat onderscheid moet in één oogopslag
   te zien zijn, ook vanuit een ooghoek — een dispatcher kijkt niet de
   hele tijd naar deze hoek van het scherm.
   --------------------------------------------------------------------- */
.meldkamer-melding-contactverzoek {
	border-left-color: #28a745;
	background: rgba(22, 66, 36, .96);
}

.attentie-kop {
	display: flex;
	align-items: center;
	gap: .45rem;
	margin-bottom: .4rem;
}

.attentie-titel {
	flex: 1;
	font-weight: 700;
	font-size: .95rem;
	letter-spacing: .04em;
}

.attentie-lijf {
	display: flex;
	gap: .6rem;
	align-items: flex-start;
}

/* Vierkant kaartje: één kaarttegel rond de positie. Vast formaat, zodat
   de melding niet van grootte verspringt naargelang de tegel. */
.attentie-kaartje {
	flex: 0 0 88px;
	width: 88px;
	height: 88px;
	border-radius: .3rem;
	overflow: hidden;
	background: rgba(255, 255, 255, .12);
	display: block;
}
.attentie-kaartje img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.attentie-kaartje-leeg {
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	font-size: .7rem;
	opacity: .6;
	line-height: 1.2;
}

.attentie-gegevens { min-width: 0; flex: 1; }
.attentie-tijd { font-size: .75rem; opacity: .75; }
.attentie-melding { font-size: .78rem; opacity: .9; }
.attentie-naam { font-weight: 600; margin-top: .15rem; }
.attentie-regel { font-size: .8rem; opacity: .85; }
.attentie-telefoon { margin-top: .15rem; font-size: .9rem; font-weight: 600; }
.attentie-telefoon a { color: #fff; text-decoration: underline; }
.attentie-toelichting {
	margin-top: .3rem;
	font-size: .8rem;
	font-style: italic;
	opacity: .9;
}

/* Twee stippen die OM EN OM knipperen, zoals de blauwe bij een Prio
   0-gebruiker op de kaart. Hetzelfde beeld voor "hier moet je nu naar
   kijken", alleen dan rood. */
.attentie-lampen {
	display: inline-flex;
	gap: 4px;
	flex: 0 0 auto;
}
.attentie-lamp {
	width: 11px;
	height: 11px;
	border-radius: 50%;
	background: #ff4d5e;
	opacity: .25;
	animation: attentie-knipper 1s steps(1, end) infinite;
}
.attentie-lamp-rechts { animation-delay: .5s; }

@keyframes attentie-knipper {
	0%, 49%   { opacity: 1; box-shadow: 0 0 7px rgba(255, 77, 94, .95); }
	50%, 100% { opacity: .25; box-shadow: none; }
}

/* Wie om minder beweging vraagt, krijgt beide lampen gewoon aan: het
   kenmerk blijft, alleen zonder het knipperen. */
@media (prefers-reduced-motion: reduce) {
	.attentie-lamp {
		animation: none;
		opacity: 1;
		box-shadow: 0 0 7px rgba(255, 77, 94, .95);
	}
}

/* ---------------------------------------------------------------------
   Release-kaart in de changelog (sinds v1.0.0)

   Gouden kader met vuurwerk erover. Een release komt zelden voorbij, en
   dan mag het opvallen — maar de tekst moet leesbaar blijven, dus het
   vuurwerk zit ACHTER de inhoud en vangt geen muisklikken op.
   --------------------------------------------------------------------- */
.release-kaart {
	position: relative;
	overflow: hidden;
	border: 2px solid #FFC107;
	border-radius: .5rem;
	box-shadow: 0 0 0 1px rgba(255, 193, 7, .35), 0 4px 22px rgba(255, 193, 7, .18);
	background-image: linear-gradient(135deg, rgba(255, 193, 7, .08) 0%, transparent 45%);
}

/* Een gouden randje dat langzaam langs de rand loopt: genoeg om het oog
   te trekken, rustig genoeg om niet af te leiden bij het lezen. */
.release-kaart::before {
	content: "";
	position: absolute;
	inset: -2px;
	border-radius: .5rem;
	padding: 2px;
	background: linear-gradient(115deg, #FFC107, #FFE082, #FFC107, #B8860B, #FFC107);
	background-size: 300% 300%;
	animation: release-rand 6s ease infinite;
	-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
	-webkit-mask-composite: xor;
	mask-composite: exclude;
	pointer-events: none;
}

@keyframes release-rand {
	0%, 100% { background-position: 0% 50%; }
	50%      { background-position: 100% 50%; }
}

.release-kaart .card-body { position: relative; z-index: 1; }

/* Het vuurwerk zelf: drie ontploffingen van twaalf vonken, elk met een
   eigen vertraging zodat ze elkaar afwisselen. */
.release-vuurwerk {
	position: absolute;
	inset: 0;
	pointer-events: none;
	z-index: 0;
	overflow: hidden;
}

.vuurwerk {
	position: absolute;
	width: 0;
	height: 0;
}
.vuurwerk-1 { top: 26%; left: 18%; }
.vuurwerk-2 { top: 16%; left: 52%; }
.vuurwerk-3 { top: 34%; left: 80%; }

.vonk {
	position: absolute;
	width: 4px;
	height: 4px;
	border-radius: 50%;
	background: #FFC107;
	opacity: 0;
	/* Elke vonk vliegt onder zijn eigen hoek naar buiten; --hoek wordt
	   per vonk in de HTML gezet. */
	animation: vuurwerk-vonk 2.4s ease-out infinite;
}

.vuurwerk-1 .vonk { animation-delay: 0s; }
.vuurwerk-2 .vonk { animation-delay: .8s; background: #FFE082; }
.vuurwerk-3 .vonk { animation-delay: 1.6s; background: #FFD54F; }

@keyframes vuurwerk-vonk {
	0%   { opacity: 0; transform: rotate(var(--hoek)) translateX(0) scale(1); }
	8%   { opacity: 1; }
	60%  { opacity: .85; }
	100% { opacity: 0; transform: rotate(var(--hoek)) translateX(70px) scale(.3); }
}

/* Wie om minder beweging vraagt, krijgt het gouden kader zonder het
   vuurwerk en zonder de lopende rand. Feest mag, misselijk worden niet. */
@media (prefers-reduced-motion: reduce) {
	.release-vuurwerk { display: none; }
	.release-kaart::before { animation: none; }
}

.release-badge {
	background: #FFC107;
	color: #171717;
	font-weight: 700;
	letter-spacing: .06em;
}
.release-badge.badge-alpha { letter-spacing: normal; font-weight: 600; }

/* De speakerknop in een noodoproep (sinds 1.0.1). Naast het kruisje,
   maar met een eigen betekenis: geluid uit, melding blijft staan. */
.attentie-geluid {
	background: none;
	border: 0;
	color: inherit;
	opacity: .85;
	font-size: 1.05rem;
	line-height: 1;
	cursor: pointer;
	padding: 0 .15rem;
}
.attentie-geluid:hover { opacity: 1; }

/* Uitgezet: zichtbaar gedempt, zodat je later nog kunt zien dat je hem
   zelf hebt uitgezet en het niet lijkt alsof het geluid nooit werkte. */
.attentie-geluid.is-uit { opacity: .4; }

.attentie-kaartje { cursor: pointer; }
.attentie-kaartje:hover { outline: 2px solid rgba(255, 255, 255, .5); }

/* Changelog-archief (sinds 1.0.1): oudere reeksen dichtgeklapt. */
.changelog-archief > summary {
	cursor: pointer;
	list-style: none;
	display: flex;
	align-items: center;
	gap: .5rem;
}
.changelog-archief > summary::-webkit-details-marker { display: none; }

/* Een eigen pijltje dat meedraait bij openklappen — de standaardmarker
   staat er in elke browser net anders. */
.changelog-archief > summary::before {
	content: "\203A";
	display: inline-block;
	font-size: 1.3rem;
	line-height: 1;
	opacity: .6;
	transition: transform .15s ease;
}
.changelog-archief[open] > summary::before { transform: rotate(90deg); }
.changelog-archief > summary:hover { background: rgba(255, 255, 255, .03); }

.changelog-archief-versie {
	padding: .7rem 0;
	border-top: 1px solid rgba(128, 134, 151, .18);
}
.changelog-archief-versie:first-child { border-top: 0; }

/* ---------------------------------------------------------------------
 * OPVALLEND MENU-ITEM (sinds 2.0.0)
 *
 * "Nieuwe melding" is de knop die een centralist onder druk moet kunnen
 * vinden zonder te zoeken. Hij staat daarom omgekeerd weergegeven in een
 * bubbel: volle achtergrond in de themakleur, witte letters, en genoeg
 * ruimte eromheen om uit de rij te vallen.
 *
 * Bewust geen knipperende animatie: iets wat doorlopend beweegt in het
 * zicht wordt na een uur dienst juist genegeerd, en het leidt af van de
 * kaart ernaast.
 * ------------------------------------------------------------------ */

.nav-children li.menu-opvallend {
    /* Ruimer aan de rechterkant (sinds 2.2.1): de bubbel liep tot tegen
       de rand van de sidebar en leek daar overheen te steken. */
    margin: .35rem 1.1rem .5rem .6rem;
}

.nav-children li.menu-opvallend > .nav-link {
    padding: 0 !important;
    background: none !important;
}

.menu-bubbel {
    /* inline-flex in plaats van flex: de bubbel wordt zo net zo breed
       als zijn inhoud in plaats van de hele regel te vullen. */
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    max-width: 100%;
    padding: .5rem .85rem;
    border-radius: 999px;
    background: #0090FE;
    color: #fff !important;
    font-weight: 600;
    letter-spacing: .01em;
    box-shadow: 0 2px 8px rgba(0, 144, 254, .45);
    transition: background .15s ease, box-shadow .15s ease, transform .15s ease;
}

.menu-bubbel i {
    font-size: 1.05rem;
    line-height: 1;
}

.nav-children li.menu-opvallend > .nav-link:hover .menu-bubbel,
.nav-children li.menu-opvallend > .nav-link:focus .menu-bubbel {
    background: #007ad8;
    box-shadow: 0 3px 12px rgba(0, 144, 254, .6);
    transform: translateY(-1px);
}

.nav-children li.menu-opvallend.nav-active > .nav-link .menu-bubbel {
    background: #005fa8;
    box-shadow: inset 0 1px 4px rgba(0, 0, 0, .35);
}

/* Op een ingeklapte sidebar past de tekst niet; dan alleen het icoon,
   maar wél de bubbel — anders valt juist deze knop weg. */
html.sidebar-left-collapsed .menu-bubbel {
    justify-content: center;
    padding: .5rem;
}

html.sidebar-left-collapsed .nav-children li.menu-opvallend {
    margin: .35rem .3rem;
}

/* ---------------------------------------------------------------------
 * VERIFICATIEPAGINA (sinds 2.0.2)
 *
 * Achter de QR-code op het pasje. Wordt gescand door iemand langs de
 * weg — vaak op een telefoon, vaak in de regen, vaak met haast. Twee
 * kolommen op een normaal scherm, onder elkaar op een telefoon.
 * ------------------------------------------------------------------ */

.body-verificatie {
    /* De aanmeldpagina zet .body-sign op 500px vast — genoeg voor een
       gebruikersnaam en een wachtwoord. Hier staan twee kolommen naast
       elkaar en dat past daar niet in. */
    width: auto !important;
    max-width: 54rem !important;
}

/* Logo links, bubbel rechts, op dezelfde hoogte (sinds 2.0.4). De
   bubbel stond eerst als tab tegen de kaart aan, waardoor de blauwe lijn
   erboven halverwege ophield. */
.verificatie-kop {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
}

.verificatie-kop .logo {
    display: inline-block;
    float: none !important;
    margin: 0;
}

.verificatie-bubbel {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    margin: 0;
    flex-shrink: 0;
    padding: .5rem 1.1rem;
    border-radius: 999px;
    background: #0090FE;
    color: #fff;
    font-weight: 700;
    font-size: .95rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    box-shadow: 0 2px 10px rgba(0, 144, 254, .45);
}

.verificatie-bubbel i {
    font-size: 1.15rem;
}

/* De kaart heeft zijn eigen doorlopende bovenrand; de tab die hem eerst
   onderbrak is weg. */
.card-verificatie {
    border-top: 3px solid #0090FE;
}

.card-verificatie .card-title-sign {
    display: none;
}

/* De aanmeldpagina zet .body-sign op 500px vast — genoeg voor een
   gebruikersnaam en een wachtwoord, te smal voor twee kolommen. */
.body-sign:has(.card-verificatie) {
    max-width: 54rem !important;
    width: 100% !important;
}

/* Een smalle pagina met dezelfde kop (sinds 2.1.1): de codepagina en het
   instelscherm van de tweestapsverificatie. Eén kolom, dus 500px is hier
   juist genoeg — alleen de kop en de voettekst moeten kloppen. */
.body-sign-smal {
    max-width: 30rem !important;
    width: 100% !important;
}

.body-sign-smal .center-verificatie {
    max-width: 100% !important;
}

/* De blauwe lijn die de tab vervangt. */
.card-metlijn {
    border-top: 3px solid #0090FE;
}

.card-metlijn .card-title-sign {
    display: none;
}

/* De voettekst hoort onderaan en niet naast het logo. De opmaak van de
   aanmeldpagina laat een losse alinea daar omhoog schuiven; als eigen
   blok met marge blijft hij staan waar hij hoort. */
.footer-sign {
    margin-top: 1.25rem;
    text-align: center;
    font-size: .85rem;
    opacity: .55;
}

.center-verificatie {
    /* De standaard aanmeldkaart is smal: daar past een gebruikersnaam en
       een wachtwoord in. Hier staan twee kolommen naast elkaar, dus die
       breedte moet ruimer. */
    max-width: 52rem !important;
    width: 100% !important;
}

.card-verificatie {
    width: 100%;
}

.card-verificatie .card-body {
    padding: 1.5rem 1.75rem 2rem;
}

.card-verificatie table th {
    font-weight: 600;
    padding-right: 1rem;
}

.verificatie-inzet {
    border-radius: 6px;
    padding: .8rem 1rem;
    background: rgba(255, 255, 255, .04);
    border-left: 3px solid rgba(255, 255, 255, .15);
}

/* Een lopende inzet krijgt kleur. Wie hier staat te kijken wil in één
   oogopslag zien of deze persoon nú ergens voor is opgeroepen. */
.verificatie-inzet-actief {
    background: rgba(0, 144, 254, .12);
    border-left-color: #0090FE;
}

.verificatie-inzet-actief i {
    color: #0090FE;
}

@media (max-width: 575px) {
    /* Op een smal scherm past logo en bubbel niet naast elkaar zonder
       dat de bubbel tegen het logo aan komt te staan. */
    .verificatie-kop {
        flex-direction: column;
        align-items: flex-start;
        gap: .75rem;
    }
}

@media (max-width: 767px) {
    .card-verificatie .col-md-6 + .col-md-6 {
        margin-top: 1.5rem;
        padding-top: 1.5rem;
        border-top: 1px solid rgba(255, 255, 255, .1);
    }
}

/* Tweestapsverificatie (sinds 2.1.0) */
.tweefactor-qr {
    display: inline-block;
    padding: .75rem;
    background: #fff;
    border-radius: 6px;
}

.herstelcodes {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: .35rem .75rem;
    padding: .9rem 1rem;
    margin-top: .5rem;
    border-radius: 6px;
    background: rgba(255, 255, 255, .05);
    font-family: monospace;
    font-size: .95rem;
    letter-spacing: .04em;
}

/* Twee documenten per melding (sinds 2.4.0) */
.melding-documenten {
    padding-bottom: 1rem;
    border-bottom: 1px solid rgba(255, 255, 255, .07);
}

.melding-documenten:last-child {
    border-bottom: 0;
}

.document-vak {
    padding: .85rem 1rem;
    border-radius: 6px;
    background: rgba(255, 255, 255, .04);
    height: 100%;
}

/* ---------------------------------------------------------------------
 * LAADBALK (sinds 2.6.0)
 *
 * Een dunne balk bovenaan die laat zien dat er iets gebeurt. Bewust
 * smal en boven alles: hij hoort op te vallen zonder in de weg te
 * zitten, en mag nooit over een melding of een knop heen liggen.
 * ------------------------------------------------------------------ */

.impact-laadbalk {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    z-index: 20000;
    pointer-events: none;
    opacity: 0;
    transition: opacity .2s ease;
}

.impact-laadbalk.bezig {
    opacity: 1;
}

.impact-laadbalk-vulling {
    height: 100%;
    width: 0;
    background: linear-gradient(90deg, #0090FE, #00d4a0);
    box-shadow: 0 0 8px rgba(0, 144, 254, .7);
    transition: width .22s ease;
}

/* DUURT HET LANGER DAN GEWOONLIJK, DAN KLEURT DE BALK ROOD.
 *
 * Eerst schoof er een melding over de bovenbalk, maar die drukte het
 * logo en de knoppen weg — precies waar je op dat moment naar zit te
 * kijken. De kleur zegt genoeg: dat het langer duurt zie je al, daar
 * hoeft geen zin bij.
 *
 * De overgang loopt over anderhalve seconde, zodat het opkomt in plaats
 * van te knipperen. Iets wat plotseling rood wordt leest als een fout;
 * iets wat langzaam verkleurt leest als "dit duurt even". */
.impact-laadbalk.traag .impact-laadbalk-vulling {
    background: linear-gradient(90deg, #e2574c, #ff7a45);
    box-shadow: 0 0 10px rgba(226, 87, 76, .8);
    transition: width .22s ease, background 1.5s ease, box-shadow 1.5s ease;
}

/* Een balk die al minuten rood staat, pulseert zacht: dan is duidelijk
   dat de pagina nog leeft en niet is vastgelopen. */
.impact-laadbalk.traag {
    animation: laadbalk-traag 2.2s ease-in-out infinite;
}

@keyframes laadbalk-traag {
    0%, 100% { opacity: 1; }
    50%      { opacity: .72; }
}

/* ---------------------------------------------------------------------
 * SCHERMSLOT (sinds 2.6.0, hersteld in 2.7.2)
 *
 * Ligt over alles heen, maar de pagina eronder blijft draaien: de
 * websocket, de meldingen, het geluid. Alleen kijken en klikken kan niet
 * meer.
 *
 * De achtergrond is vervaagd en niet zwart: zo is te zien DÁT er een
 * scherm achter zit — een centralist die terugkomt weet meteen dat hij
 * op de goede plek is — zonder dat er iets te lezen valt.
 *
 * BIJ 2.7.1 IS DIT BLOK PER ONGELUK GESNEUVELD toen ik de melding uit de
 * laadbalk haalde: ik knipte van de oude melding tot het einde van haar
 * lichte-thema-regel, en dit blok zat daartussen. Zonder position:fixed
 * viel het slot als een gewoon blok ONDER de pagina — zichtbaar, maar
 * nutteloos.
 * ------------------------------------------------------------------ */

.schermslot {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 30000;
    display: none;
    align-items: center;
    justify-content: center;
    background: rgba(14, 18, 26, .82);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}

.schermslot.zichtbaar {
    display: flex;
}

.schermslot-kaart {
    width: min(24rem, calc(100vw - 2.5rem));
    padding: 2rem 1.75rem;
    border-radius: 12px;
    background: #1c2230;
    box-shadow: 0 18px 50px rgba(0, 0, 0, .55);
    text-align: center;
    color: #fff;
}

.schermslot-icoon {
    font-size: 2.6rem;
    line-height: 1;
    color: #0090FE;
    margin-bottom: .5rem;
}

.schermslot-titel {
    margin: 0 0 .5rem;
    font-weight: 600;
}

.schermslot-melding {
    margin-bottom: .75rem;
    padding: .5rem .75rem;
    border-radius: 6px;
    background: rgba(255, 90, 90, .15);
    color: #ff9a9a;
    font-size: .85rem;
}

.schermslot-invoer {
    margin-bottom: .75rem;
    text-align: center;
}

.schermslot-knop {
    width: 100%;
}

.schermslot-uitloggen {
    display: inline-block;
    margin-top: 1rem;
    font-size: .82rem;
    opacity: .6;
}

html:not(.dark) .schermslot {
    background: rgba(245, 247, 250, .82);
}

html:not(.dark) .schermslot-kaart {
    background: #fff;
    color: #333;
}

/* Rolkeuze (sinds 2.7.0) */
.rolkeuze-optie {
    display: flex;
    align-items: flex-start;
    gap: .7rem;
    padding: .7rem .9rem;
    margin-bottom: .5rem;
    border-radius: 8px;
    background: rgba(255, 255, 255, .04);
    cursor: pointer;
    transition: background .15s ease;
}

.rolkeuze-optie:hover {
    background: rgba(0, 144, 254, .12);
}

.rolkeuze-optie input {
    margin-top: .25rem;
    flex-shrink: 0;
}

.rolkeuze-optie:has(input:checked) {
    background: rgba(0, 144, 254, .18);
    box-shadow: inset 0 0 0 1px rgba(0, 144, 254, .5);
}

.rolkeuze-naam {
    display: block;
    font-weight: 600;
}

.rolkeuze-uitleg {
    display: block;
    font-size: .82rem;
    opacity: .7;
}

html:not(.dark) .rolkeuze-optie {
    background: rgba(0, 0, 0, .04);
}

/* ---------------------------------------------------------------------
 * De balk die aangeeft dat je in een andere rol kijkt (sinds 2.7.0).
 *
 * Moet opvallen: iemand die vergeet dat hij als Gebruiker kijkt, gaat
 * anders melden dat er knoppen ontbreken. Daarom een volle balk over de
 * hele breedte, boven de bovenbalk, met de rol erin en een knop terug.
 * ------------------------------------------------------------------ */

/* De balk staat bovenaan en duwt de rest van de pagina omlaag. Eerst
   lag hij OVER de bovenbalk heen, waardoor het logo en het gebruikersvak
   eronder verdwenen — een balk die de knop verbergt waarmee je hem weg
   moet klikken, is erger dan geen balk.

   De hoogte staat hieronder op één plek, en html.heeft-rolwissel schuift
   de bovenbalk, de zijbalk en de inhoud er precies even ver onder. */
html.heeft-rolwissel .header,
html.heeft-rolwissel .sidebar-left {
    top: 34px;
}

/* HET THEMA ZET HIER AL 60px voor de bovenbalk. Mijn eerste versie zette
   er 34px overheen, waardoor de inhoud juist OMHOOG schoof en onder de
   bovenbalk verdween — precies andersom dan de bedoeling. De balk komt
   erbij, dus 60 + 34. */
html.heeft-rolwissel .inner-wrapper {
    padding-top: 94px;
}

/* De zijbalk is 100% hoog en steekt met een verschoven bovenkant onderaan
   uit; die 34px moet er dus ook af. */
html.heeft-rolwissel .sidebar-left {
    height: calc(100% - 34px);
}

/* DE BREADCRUMB-BALK STAAT OOK VAST, op 60px — de hoogte van de
   bovenbalk. Die telde de rolwisselbalk niet mee en schoof dus niet mee
   omlaag, waardoor hij achter de bovenbalk verdween. Nu 60 + 34.

   Dat gold ook voor de inhoud eronder: die begint onder de
   breadcrumb-balk en moest dus dezelfde stap maken. */
html.heeft-rolwissel .page-header {
    top: 94px;
}

/* De inhoud begint onder de breadcrumb-balk. Het thema regelt die
   afstand met een marge op .inner-wrapper; die 34px komt er dus bij,
   niet in plaats van. */
html.heeft-rolwissel .content-body {
    padding-top: 74px;
}

.rolwissel-balk {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 34px;
    z-index: 1500;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .75rem;
    padding: .45rem 1rem;
    background: repeating-linear-gradient(
        45deg,
        #b8860b, #b8860b 12px,
        #a67a0a 12px, #a67a0a 24px
    );
    color: #fff;
    font-size: .88rem;
    font-weight: 600;
    letter-spacing: .01em;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .3);
}

.rolwissel-balk i {
    font-size: 1.1rem;
}

.rolwissel-balk .rolwissel-terug {
    padding: .15rem .7rem;
    border-radius: 999px;
    background: rgba(0, 0, 0, .3);
    color: #fff;
    font-size: .82rem;
    text-decoration: none;
}

.rolwissel-balk .rolwissel-terug:hover {
    background: rgba(0, 0, 0, .5);
    color: #fff;
}

/* Wie het scherm op slot zette (sinds 2.7.2). Staat boven de uitleg en
   valt op: dat is het eerste wat iemand wil weten die op een vergrendeld
   scherm stuit. */
/* Wie het scherm op slot zette. Sinds 2.9.0 staat dit direct boven het
   wachtwoordveld: de uitleg die eronder stond is eruit, want de naam
   zegt genoeg. Vandaar de ruimere marge eronder. */
.schermslot-eigenaar {
    margin: 0 0 1.25rem;
    font-size: .92rem;
    font-weight: 600;
    color: #0090FE;
}

.schermslot-eigenaar:empty {
    display: none;
}

/* ---------------------------------------------------------------------
 * DE KNOPPEN IN DE BOVENBALK (sinds 2.7.2)
 *
 * Twee groepen die uit elkaar horen te staan:
 *
 *   links   meldingen, berichten, aanwezigheid, live-verbinding — dingen
 *           die IETS MELDEN. De live-verbinding staat rechts in die
 *           groep, want die zegt of de rest nog klopt.
 *
 *   rechts  thema en schermslot — dingen die JIJ BEDIENT.
 *
 * Zonder ruimte ertussen lijkt het één rij van zes, en dan zoek je bij
 * elke klik opnieuw welke waar zit. */
.header .notifications + .notifications {
    margin-left: 1.5rem;
    padding-left: 1.5rem;
    border-left: 1px solid rgba(255, 255, 255, .12);
}

html:not(.dark) .header .notifications + .notifications {
    border-left-color: rgba(0, 0, 0, .1);
}

/* ---------------------------------------------------------------------
 * LMRA EN RAPPORTAGE BEKIJKEN (sinds 2.9.0)
 * ------------------------------------------------------------------ */

.verslag-venster {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 25000;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    background: rgba(10, 14, 20, .7);
}

.verslag-venster.zichtbaar {
    display: flex;
}

.verslag-kaart {
    position: relative;
    width: min(34rem, 100%);
    max-height: 86vh;
    overflow-y: auto;
    padding: 1.6rem 1.75rem;
    border-radius: 10px;
    background: #1c2230;
    color: #fff;
    box-shadow: 0 18px 50px rgba(0, 0, 0, .55);
}

.verslag-sluiten {
    position: absolute;
    top: .5rem;
    right: .75rem;
    border: 0;
    background: transparent;
    color: #fff;
    font-size: 1.6rem;
    line-height: 1;
    opacity: .55;
    cursor: pointer;
}

.verslag-sluiten:hover { opacity: 1; }

.verslag-titel { margin: 0 0 .15rem; font-weight: 600; }

.verslag-tijd {
    margin: 0 0 1rem;
    font-size: .82rem;
    opacity: .6;
}

/* De stand bovenaan, want dat is waarvoor je klikt. */
.verslag-stand {
    padding: .55rem .85rem;
    margin-bottom: 1rem;
    border-radius: 6px;
    font-weight: 600;
    font-size: .9rem;
}

.verslag-stand.goed {
    background: rgba(0, 200, 140, .16);
    color: #4ade9e;
}

.verslag-stand.fout {
    background: rgba(226, 87, 76, .16);
    color: #ff9a9a;
}

.verslag-punten {
    list-style: none;
    padding: 0;
    margin: 0 0 1rem;
}

.verslag-punten li {
    padding: .3rem 0;
    font-size: .9rem;
    border-bottom: 1px solid rgba(255, 255, 255, .06);
}

.verslag-punten li:last-child { border-bottom: 0; }
.verslag-punten li.ja i { color: #4ade9e; }
.verslag-punten li.nee { color: #ff9a9a; }

.verslag-kop {
    margin: 1rem 0 .3rem;
    font-size: .82rem;
    text-transform: uppercase;
    letter-spacing: .06em;
    opacity: .6;
}

.verslag-kaart p {
    font-size: .92rem;
    margin-bottom: .5rem;
    white-space: pre-wrap;
}

html:not(.dark) .verslag-kaart {
    background: #fff;
    color: #333;
}

html:not(.dark) .verslag-sluiten { color: #333; }

/* De verslagen op de kostenoverzicht-detailpagina (sinds 2.9.0). */
.verslag-blok {
    padding: .9rem 1rem;
    margin-bottom: .75rem;
    border-radius: 8px;
    background: rgba(255, 255, 255, .04);
}

.verslag-blok:last-child { margin-bottom: 0; }

html:not(.dark) .verslag-blok {
    background: rgba(0, 0, 0, .04);
}

/* ---------------------------------------------------------------------
 * ZOEKEN OP WEGNUMMER (sinds 3.6.0)
 * ------------------------------------------------------------------ */

.wegzoeken {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
    margin-bottom: .5rem;
}

.wegzoeken-invoer {
    flex: 1 1 14rem;
    min-width: 10rem;
}

.wegzoeken-melding {
    min-height: 1.2rem;
    font-size: .85rem;
    margin-bottom: .5rem;
}

.wegzoeken-melding.gelukt { color: #4ade9e; }
.wegzoeken-melding.fout   { color: #ff9a9a; }

html:not(.dark) .wegzoeken-melding.gelukt { color: #1a8a5c; }
html:not(.dark) .wegzoeken-melding.fout   { color: #c0392b; }


/* Meerdere rapportages onder elkaar in het venster (sinds 3.18.0). */
.verslag-scheiding {
    margin: 1.2rem 0 .4rem;
    padding-top: .8rem;
    border-top: 1px solid rgba(255, 255, 255, .12);
    font-size: .78rem;
    text-transform: uppercase;
    letter-spacing: .06em;
    opacity: .6;
}

.verslag-scheiding.eerste {
    margin-top: 0;
    padding-top: 0;
    border-top: 0;
}

.verslag-leeg {
    opacity: .55;
    font-style: italic;
}

html:not(.dark) .verslag-scheiding {
    border-top-color: rgba(0, 0, 0, .1);
}

/* Een LMRA met een punt op nee: aandacht, geen fout (sinds 3.19.0).
   De medewerker doet precies wat de bedoeling is door het te melden. */
.verslag-stand.aandacht {
    background: rgba(255, 193, 7, .16);
    color: #ffc861;
}

html:not(.dark) .verslag-stand.aandacht {
    color: #9a6b00;
}

/* ---------------------------------------------------------------------
 * PRIO0 OP DE KAART (sinds 3.20.0)
 *
 * De ring om een blauwlichtinzet pulseert. Een blauwe stip tussen andere
 * blauwe stippen valt niet op; een die beweegt wel — en op een scherm
 * dat de hele dienst aan staat, kijk je niet naar wat er stilstaat.
 * ------------------------------------------------------------------ */

.prio0-puls {
    animation: prio0-pulseren 1.6s ease-in-out infinite;
    transform-origin: center;
}

@keyframes prio0-pulseren {
    0%, 100% { opacity: .5; }
    50%      { opacity: .12; }
}

.prio0-blauw {
    color: #0d6efd;
    font-weight: 600;
}

.prio0-geen {
    color: #6c757d;
    font-style: italic;
}

/* ---------------------------------------------------------------------
 * VOERTUIGEN MET EEN TRACKER (sinds 3.22.13)
 * ------------------------------------------------------------------ */

/* DE MARKERING SCHAALT MEE MET DE KAART (sinds 3.22.22).
 *
 * De twee waarden worden door voertuigen-laag.js op de kaart gezet:
 * volle grootte bij ongeveer 20 km in beeld, half zo groot en half
 * doorzichtig bij 200 km. Zonder dit neemt één autootje bij een
 * landelijk overzicht een halve provincie in beslag.
 *
 * De terugvalwaarden staan hier, zodat een kaart zonder die laag er nog
 * steeds goed uitziet. */
.voertuig-marker {
    opacity: var(--voertuig-zichtbaar, 1);
}

.voertuig-teken {
    position: relative;

    /* NET IETS GROTER DAN EEN GEBRUIKERSSTIP (20 px). Op 34 px overheerste
       het voertuig de kaart en verdwenen de medewerkers eronder. */
    width: 24px;
    height: 24px;

    /* Vanuit het midden schalen, zodat de markering op zijn punt blijft
       staan in plaats van weg te schuiven bij het uitzoomen. */
    transform: scale(var(--voertuig-schaal, 1));
    transform-origin: center center;
    transition: transform .2s ease, opacity .2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #2b303b;
    border: 2px solid #0090FE;
    color: #fff;
    font-size: .8rem;
}

/* HOE ZICHTBAAR IS HET VOERTUIG (sinds 3.22.27).
 *
 *   contact uit   20%  staat geparkeerd, er gebeurt niets
 *   contact aan   50%  iemand is ermee bezig maar rijdt niet op OGS
 *   OGS aan       vol  daar moet je naar kijken
 *
 * Deze waarden vermenigvuldigen zich met de zoomdoorzichtigheid op de
 * buitenste laag, dus bij ver uitzoomen wordt alles nog wat flauwer —
 * precies de bedoeling. */
.voertuig-uit {
    opacity: .2;
}

.voertuig-stationair {
    opacity: .5;
}

/* OGS zonder prio0-melding — dat moet opvallen. */
.voertuig-onterecht {
    border-color: #dc3545;
    box-shadow: 0 0 0 2px rgba(220, 53, 69, .35);
}

/* De twee blauwe balletjes knipperen om en om, zoals het echte ding.
   Eén enkele stip zou voor een gewone markering kunnen doorgaan. */
.voertuig-ogs {
    position: absolute;
    top: -5px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 2px;
}

.ogs-bal {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #0d6efd;
}

.ogs-links  { animation: ogs-knipper 1s steps(1) infinite; }
.ogs-rechts { animation: ogs-knipper 1s steps(1) infinite .5s; }

@keyframes ogs-knipper {
    0%, 49%   { opacity: 1; }
    50%, 100% { opacity: .15; }
}

.voertuig-sirene {
    position: absolute;
    right: -6px;
    bottom: -3px;
    font-size: .65rem;
    color: #ffc107;
}

.voertuig-waarschuwing { color: #ff9a9a; font-weight: 600; }
.voertuig-ogs-goed     { color: #6ea8fe; }

/* ---------------------------------------------------------------------
 * HET VENSTER BIJ EEN OGS-ALARM (sinds 3.22.24)
 *
 * Opent vanzelf zodra er een voertuig met blauw licht rijdt zonder dat
 * het mag. Het geluid blijft op de melding zelf staan: het venster
 * sluiten is iets anders dan het alarm afzetten.
 * ------------------------------------------------------------------ */

.ogs-venster {
    position: fixed;
    inset: 0;
    z-index: 3000;
    background: rgba(0, 0, 0, .6);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
}

.ogs-venster-vak {
    background: #282d36;
    border: 2px solid #dc3545;
    border-radius: 8px;
    width: min(1200px, 96vw);
    height: min(800px, 92vh);
    display: flex;
    flex-direction: column;
    overflow: hidden;

    /* Een rode gloed die pulseert, net als de lampen op een noodoproep:
       het venster kan achter een ander scherm staan en moet dan alsnog
       opvallen. */
    box-shadow: 0 0 0 4px rgba(220, 53, 69, .25);
    animation: ogs-venster-gloed 1.4s ease-in-out infinite;
}

@keyframes ogs-venster-gloed {
    0%, 100% { box-shadow: 0 0 0 4px rgba(220, 53, 69, .25); }
    50%      { box-shadow: 0 0 0 10px rgba(220, 53, 69, .08); }
}

.ogs-venster-kop {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    background: #dc3545;
    color: #fff;
    font-weight: 600;
    letter-spacing: .04em;
}

.ogs-venster-sluit {
    background: none;
    border: 0;
    color: #fff;
    font-size: 1.6rem;
    line-height: 1;
    cursor: pointer;
    padding: 0 6px;
}

.ogs-venster iframe {
    flex: 1;
    width: 100%;
    border: 0;
}