/* ProTRXptt — eigen aanvullingen bovenop Porto Admin. Alleen hier aanpassen, nooit in assets/porto. */
.logo-tekst { font-weight: 600; font-size: 18px; color: #fff; vertical-align: middle; margin-left: 6px; letter-spacing: .5px; }
html.sidebar-left-collapsed .logo-tekst { display: none; }
.status-online { color: #47a447; font-weight: 600; } .status-offline { color: #c9302c; }
.kpi .card-body { text-align: center; } .kpi strong { display: block; font-size: 28px; line-height: 1.1; }
.kpi small { color: #777; text-transform: uppercase; letter-spacing: .5px; }
.card-sign .logo-sign { display: block; margin: 0 auto 8px; }
.body-sign .center-sign { padding-top: 40px; }
.table td form.inline { display: inline-block; margin: 0; }
.table td .form-select-sm { width: auto; display: inline-block; }
.progress { height: 14px; }
code { color: #0e7ac4; }
@media print { .header, .sidebar-left, .page-header, .d-print-none, .text-muted.text-end { display: none !important; } .content-body { margin: 0 !important; padding: 0 !important; } .card { border: 0; box-shadow: none; } }
.sorteer li { cursor: grab; } .sorteer li.opacity-50 { opacity: .5; }
.list-group-item.active .text-muted, .list-group-item.active small { color: rgba(255,255,255,.8) !important; }
/* Dark-thema aanvullingen */
html.dark .kpi small { color: #aaa; }
html.dark .list-group-item { background: #2e353e; border-color: #3a4149; color: #e5e5e5; }
html.dark .list-group-item-action:hover { background: #38404a; }
html.dark .list-group-item.active { background: #0088cc; border-color: #0088cc; }
html.dark .table-danger td { background: rgba(201,48,44,.25); }
html.dark code { color: #5fb9ff; }
html.dark .leaflet-container { background: #1d2127; }
html.dark .alert-danger.shadow { box-shadow: 0 0 20px rgba(0,0,0,.6) !important; }

/* Breadcrumbs netjes binnen de kopbalk houden (Porto laat ze anders tegen de rand plakken) */
.page-header .right-wrapper { float: right; padding-right: 22px; max-width: 65%; overflow: hidden; }
.page-header .breadcrumbs { white-space: nowrap; }
.page-header .breadcrumbs li:after { margin: 0 7px; }
@media (max-width: 991px) { .page-header .right-wrapper { display: none; } }

/* Statuslampje WebSocket, links van de userbox */
.ws-lamp { display: inline-flex; align-items: center; gap: 6px; height: 100%; padding: 0 14px; font-size: 12px; cursor: default; }
.ws-lamp i { font-size: 18px; line-height: 1; }
.ws-lamp.ws-op { color: #47a447; }
.ws-lamp.ws-uit { color: #d2322d; }
.ws-lamp.ws-onbekend { color: #999; }
.ws-lamp.ws-op i { animation: ws-pols 2.4s ease-in-out infinite; }
@keyframes ws-pols { 0%,100% { opacity: 1; } 50% { opacity: .45; } }

/* Versie onderin de navigatiebalk links */
/* Versieregel onderin de navigatiebalk, zoals in de IMPACT-meldkamer */
.sidebar-versie { position: absolute; left: 0; right: 0; bottom: 0; padding: 12px 14px; font-size: 11px; letter-spacing: .5px; color: #7b828c; text-align: center; border-top: 1px solid rgba(255,255,255,.06); background: rgba(0,0,0,.18); white-space: nowrap; }
.sidebar-versie .label { text-transform: uppercase; }
.sidebar-versie strong { color: #e8eaed; font-weight: 700; letter-spacing: 0; }
html.sidebar-left-collapsed .sidebar-versie .label { display: none; }
html.sidebar-left-collapsed .sidebar-versie { padding: 12px 0; }
.sidebar-left .nano { padding-bottom: 34px; }

/* Meldkamer: kanaallampjes en aanmelden per kanaal */
.kanaallamp { display: inline-block; width: 12px; height: 12px; border-radius: 50%; flex: 0 0 12px; box-shadow: 0 0 0 1px rgba(0,0,0,.35) inset; }
.kanaallamp.lamp-uit { background: #454b53; }
.kanaallamp.lamp-stil { background: #6c757d; }
.kanaallamp.lamp-recent { background: #2f7d31; }
.kanaallamp.lamp-actief { background: #34d058; animation: kanaal-pols 1s ease-in-out infinite; }
@keyframes kanaal-pols { 0%,100% { opacity: 1; } 50% { opacity: .55; } }
.kanaalrij.spreekkanaal { border-left: 3px solid #0088cc; background: rgba(0,136,204,.10); }
.kanaalrij .btn-xs { padding: 2px 7px; font-size: 12px; line-height: 1.4; }

/* Meldkamer: portofoonmarkers op de kaart */
.porto-lamp { display: inline-block; width: 11px; height: 11px; border-radius: 50%; flex: 0 0 11px; box-shadow: 0 0 0 1px rgba(0,0,0,.4) inset; vertical-align: -1px; }
.leaflet-marker-icon.porto-marker { display: flex !important; align-items: center; width: auto !important; height: auto !important; white-space: nowrap; overflow: visible; }
.porto-marker .porto-lamp { width: 14px; height: 14px; flex: 0 0 14px; border: 2px solid #fff; box-shadow: 0 1px 3px rgba(0,0,0,.6); }
.porto-marker .porto-tag { margin-left: 5px; display: inline-flex; flex-direction: column; align-items: flex-start; line-height: 1.1;
  color: #fff; background: rgba(20,24,29,.82); padding: 2px 6px 3px; border-radius: 3px; box-shadow: 0 1px 3px rgba(0,0,0,.5); }
.porto-marker .porto-naam { font-size: 11px; font-weight: 600; }
.porto-marker .porto-id { font-size: 9px; font-weight: 400; opacity: .75; letter-spacing: .5px; font-variant-numeric: tabular-nums; }
.porto-marker.porto-eigen .porto-tag { background: #0088cc; }
/* Uitgezoomd verdwijnt alleen de tag — het lampje blijft altijd staan */
.porto-marker.naam-verborgen .porto-tag { display: none; }
.porto-marker.porto-eigen .porto-lamp { width: 16px; height: 16px; flex: 0 0 16px; }
#mk-portofoons .porto-ander { opacity: .8; }
/* Offline (rood) en niet actief (grijs) staan ook in de lijst op 20% transparantie */
#mk-portofoons .porto-weg { opacity: .8; }

/* Radio-ID (8 cijfers) altijd goed leesbaar */
.radio-id { font-family: SFMono-Regular, Menlo, Consolas, monospace; letter-spacing: .5px; }
.porto-marker .porto-naam { font-variant-numeric: tabular-nums; }

/* Kanaal uitklappen: vaste ledenlijst per kanaal (online eerst, dan offline) */
.kanaalrij .klapknop { color: #8a929c; line-height: 1; }
.kanaalrij .klapknop:hover { color: #0088cc; }
.kanaalleden { border-top: 1px solid rgba(255,255,255,.07); padding-top: 6px; }
.kanaalleden li { line-height: 1.35; overflow: visible; }
.kanaalleden li.zendt { background: rgba(52,208,88,.10); border-radius: 3px; }

/* In lijsten alleen het lampje zelf laten pulseren — de druppelring is uitsluitend voor de kaart */
.porto-lamp.porto-praat { animation: kanaal-pols 1s ease-in-out infinite; }

/* Op de kaart: pulserende druppelring om het lampje */
.porto-lamp { position: relative; }
.porto-marker .porto-lamp.porto-zendt::after {
  content: ''; position: absolute; left: 50%; top: 50%; width: 100%; height: 100%;
  transform: translate(-50%, -50%); border-radius: 50%; border: 2px solid #34d058;
  animation: porto-druppel 1.4s ease-out infinite; pointer-events: none;
}
@keyframes porto-druppel {
  0%   { width: 100%; height: 100%; opacity: .9; }
  100% { width: 600%; height: 600%; opacity: 0; }   /* dijt uit tot ongeveer driemaal de eerdere ring */
}

/* Meldkamer: kaart in een eigen kader dat meegroeit met de zijbalk */
.mk-kaartkaart { overflow: hidden; }
.mk-kaartkaart .card-body { border-top: 1px solid rgba(255,255,255,.06); }
#mk-kaart { width: 100%; height: calc(100vh - 360px); min-height: 420px; border: 1px solid rgba(255,255,255,.10); border-radius: 3px; background: #1d2127; }
html.dark #mk-kaart { border-color: rgba(255,255,255,.12); }
@media (max-width: 991px) { #mk-kaart { height: 60vh; } }
/* Tegels vullen het kader ook direct na het in-/uitklappen van de navigatiebalk */
#mk-kaart .leaflet-container { width: 100% !important; height: 100% !important; }

/* Meldkamerblokje onderin de navigatiebalk: blijft op elke portaalpagina meeluisteren */
.mk-mini { position: absolute; left: 0; right: 0; bottom: 34px; padding: 8px 12px 10px; font-size: 11px; color: #b9c0c8;
  border-top: 1px solid rgba(255,255,255,.06); background: rgba(0,0,0,.22); }
.mk-mini-rij { display: flex; align-items: center; gap: 6px; margin-bottom: 4px; }
.mk-mini-lamp { width: 9px; height: 9px; border-radius: 50%; background: #999; flex: 0 0 9px; }
.mk-mini-status { text-transform: uppercase; letter-spacing: .4px; font-size: 10px; color: #8a929c; }
.mk-mini-kanaal { color: #e8eaed; font-size: 12px; margin-bottom: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mk-mini-spreker { min-height: 16px; margin-bottom: 6px; color: #8a929c; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mk-mini-praat { color: #34d058; }
.mk-mini-ptt { padding: 3px 6px; font-size: 12px; }
.mk-mini-hint { margin-top: 4px; text-align: center; color: #6b727b; font-size: 9px; letter-spacing: .3px; }
.mk-mini-melding { position: fixed; right: 16px; bottom: 16px; z-index: 1100; max-width: 320px; box-shadow: 0 4px 18px rgba(0,0,0,.5); }
html.sidebar-left-collapsed .mk-mini { display: none; }
.sidebar-left .nano { padding-bottom: 150px; }

/* Tijdelijke kanalen en noodmelding: scrollbare deelnemerslijst */
.tijd-lijst { max-height: 260px; overflow-y: auto; background: rgba(0,0,0,.15); }
.tijd-lijst .form-check { padding-left: 1.8em; }

/* Kopbalk: klok, verbindingslampje en userbox netjes midden op de hoogte van de balk */
.header .header-right { display: flex; align-items: center; height: 100%; }
.header .header-right > * { display: flex; align-items: center; }
.header .header-right #klok { line-height: 1; }
.header .header-right .separator { align-self: center; }
.header .header-right .userbox { position: relative; float: none; margin: 0; padding: 0; height: 100%; }
.header .header-right .userbox > a { display: flex; align-items: center; gap: 8px; height: 100%; padding: 0 4px 0 10px; }
.header .header-right .userbox .profile-picture { margin: 0; position: static; float: none; }
.header .header-right .userbox .profile-picture img { width: 34px; height: 34px; display: block; }
.header .header-right .userbox .profile-info { margin: 0; padding: 0; line-height: 1.25; }
.header .header-right .userbox .custom-caret { margin-left: 2px; }
.header .header-right .userbox .dropdown-menu { top: 100%; margin-top: 4px; }

/* Noodmelding: zwaailampen links en rechts van de titel, net als in de IMPACT-meldkamer */
.nood-melding { border: 1px solid rgba(255,255,255,.25); }
.nood-lamp {
  display: inline-block; width: 16px; height: 16px; border-radius: 50%; vertical-align: -3px;
  background: #ff3b30; box-shadow: 0 0 10px 3px rgba(255,59,48,.85), 0 0 0 1px rgba(0,0,0,.35) inset;
  animation: nood-zwaai 1s linear infinite;
}
.nood-lamp.lamp-tegen { animation-delay: .5s; }          /* om en om, als een echt zwaailicht */
.nood-melding .nood-kop { margin: 0 8px; letter-spacing: .5px; }
@keyframes nood-zwaai {
  0%, 100% { opacity: 1;  box-shadow: 0 0 12px 4px rgba(255,59,48,.9), 0 0 0 1px rgba(0,0,0,.35) inset; }
  50%      { opacity: .25; box-shadow: 0 0 2px 0 rgba(255,59,48,.3), 0 0 0 1px rgba(0,0,0,.35) inset; }
}
/* De hele melding pulseert zacht mee zolang hij openstaat */
.nood-melding { animation: nood-rand 1s ease-in-out infinite; }
@keyframes nood-rand {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255,59,48,.55), 0 4px 18px rgba(0,0,0,.5); }
  50%      { box-shadow: 0 0 0 4px rgba(255,59,48,0), 0 4px 18px rgba(0,0,0,.5); }
}
@media (prefers-reduced-motion: reduce) {
  .nood-lamp, .nood-melding { animation: none; }
}

/* Leaflet zet zijn lagen op z-index 400-700 en kruipt daarmee door de kaartranden, de kopbalk en
   het zijmenu heen. Het kaartvak krijgt daarom een eigen stapelcontext, zodat alles binnen blijft. */
.leaflet-container { position: relative; z-index: 0; isolation: isolate; }
/* De lagen ván Leaflet houden hun eigen volgorde — tegels onderop, dan lijnen, dan de markers, dan
   de bellen. Ze op 'auto' zetten liet de stippen onder de kaart verdwijnen. Doordat het kaartvak
   hierboven een eigen stapelcontext heeft, blijft alles netjes binnen de kaart. */
.leaflet-pane         { z-index: 400; }
.leaflet-tile-pane    { z-index: 200; }
.leaflet-overlay-pane { z-index: 400; }
.leaflet-shadow-pane  { z-index: 500; }
.leaflet-marker-pane  { z-index: 600; }
.leaflet-tooltip-pane { z-index: 650; }
.leaflet-popup-pane   { z-index: 700; }
.leaflet-top, .leaflet-bottom { z-index: 800; }
/* En het vak zelf mag niet buiten de kaart tekenen. */
#nood-kaart, #mk-kaart, .kaartvak { position: relative; overflow: hidden; border-radius: 3px; }

/* Console in de zijbalk: de vaste verbinding van de meldkamer */
.mk-mini .mk-mini-kies { margin: 6px 0 4px; font-size: 12px; }
.mk-mini .btn-xs { padding: 2px 6px; font-size: 12px; }
/* Het binnenwerk vervaagt kort terwijl de schil een nieuwe pagina laadt. */
#portaal-inhoud.shell-laadt { opacity: .55; transition: opacity .12s linear; pointer-events: none; }

/* Meldkamer op de kaart: vaste plek, dus een vierkant plaatje in plaats van een rond lampje.
   De naam krijgt dezelfde tekstbubbel als bij de portofoons; zonder deze regels valt de tekst
   los over de kaart heen. */
.leaflet-marker-icon.mk-marker { display: flex !important; align-items: center; width: auto !important; height: auto !important; white-space: nowrap; overflow: visible; }
.mk-marker .porto-tag { margin-left: 5px; display: inline-flex; flex-direction: column; align-items: flex-start; line-height: 1.1;
  color: #fff; background: rgba(20,24,29,.82); padding: 2px 6px 3px; border-radius: 3px; box-shadow: 0 1px 3px rgba(0,0,0,.5); }
.mk-marker .porto-naam { font-size: 11px; font-weight: 600; }
.mk-marker .porto-id { font-size: 9px; font-weight: 400; opacity: .75; letter-spacing: .5px; font-variant-numeric: tabular-nums; }
.mk-marker { position: relative; }
.mk-marker .mk-punt {
  display: flex; align-items: center; justify-content: center;
  width: 18px; height: 18px; border-radius: 4px; color: #fff; font-size: 12px;
  box-shadow: 0 0 0 2px rgba(0,0,0,.45), 0 1px 4px rgba(0,0,0,.5);
}
.mk-marker.naam-verborgen .porto-tag { display: none; }

/* Kanalenlijst in de console: luidspreker = meeluisteren, microfoon = hier spreken */
.mk-mini-kanalen { max-height: 168px; overflow-y: auto; margin: 4px 0 2px; }
.mk-mini-kanaalrij { display: flex; align-items: center; gap: 3px; padding: 2px 0; font-size: 11px; }
.mk-mini-kanaalrij .naam { flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #c3c9d1; }
.mk-mini-kanaalrij.hier .naam { color: #fff; font-weight: 600; }
.mk-mini-kanaalrij.praat .naam { color: #34d058; }
.mk-mini-kanaalrij .btn-xs { padding: 1px 5px; font-size: 11px; line-height: 1.3; }
.mk-mini-leeg { font-size: 11px; color: #8a929c; padding: 2px 0; }

/* Spreekblok in de zijbalk: lampje per kanaal */
.mk-mini-kanaalrij .mk-lamp { width: 7px; height: 7px; border-radius: 50%; background: #3b424b; flex: 0 0 auto; }
.mk-mini-kanaalrij .mk-lamp.aan { background: #34d058; box-shadow: 0 0 5px rgba(52,208,88,.9); }
.mk-mini-ptt { margin-top: 4px; }

/* Openstaande noodoproep in de console: blijft staan tot iemand hem aanneemt */
.mk-nood-melding { border-left: 4px solid #d2322d; }
.mk-nood-melding b { letter-spacing: .5px; }

/* Tweestapsaanmelding: het invoerveld voor de code groot en luchtig */
.tfa-code { font-size: 28px; letter-spacing: 8px; text-align: center; font-variant-numeric: tabular-nums; }
.tfa-qr { background: #fff; padding: 10px; border-radius: 4px; display: inline-block; }
.tfa-geheim { font-family: Consolas, monospace; font-size: 15px; letter-spacing: 2px; word-break: break-all; }
.tfa-reserve { font-family: Consolas, monospace; font-size: 14px; line-height: 1.9; }