/* De Radiologger: alleen wat de HMP UI-template niet heeft. Kleuren, radius en
   lijnen komen uit de tokens van hmp-ui.css, zodat het in beide thema's klopt. */

/* Een knop die bezig is toont zijn spinner in de knop zelf, ook als hij een tooltip heeft.
   De template tekent de tooltip (data-tip) en de spinner (.btn.loading) allebei in ::after;
   op zo'n knop kreeg de spinner daardoor de plek, de opvulling en de achtergrond van de
   tooltip: een ovaal boven de knop. Hier gaat wat van de tooltip is er weer af.
   ::before legt de kleur van de knop over de inhoud, zodat ook een emoji (die zich niets
   van de tekstkleur aantrekt) niet door de spinner heen te zien is. */
.btn.loading[data-tip]::after,.btn.loading[data-tip][data-tip-pos]::after{left:auto;right:auto;top:auto;bottom:auto;transform:none;padding:0;background:none;box-shadow:none;opacity:1;transition:none;z-index:auto}
.btn.loading::before{content:"";position:absolute;inset:0;background:inherit;border-radius:inherit}

/* Terugluisteren: de golfvorm */
.rl-wave{padding:0 10px}
.rl-wave canvas{display:block;width:100%;border-radius:var(--radius-sm);border:1px solid var(--line);background:var(--inset);cursor:pointer;touch-action:manipulation}
.rl-wave canvas:focus-visible{outline:2px solid var(--focus);outline-offset:1px}
.rl-clock{font-size:22px;font-variant-numeric:tabular-nums;min-width:96px;text-align:right}
tr.rl-row{cursor:pointer}
.rl-thumb{width:140px;height:40px;border:1px solid var(--line)}
.rl-select input[type=time]{font-variant-numeric:tabular-nums}
.rl-offset{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:0 10px 10px}
/* Terugluisteren: de legenda in een modal, handeling links en wat hij doet rechts */
.rl-legend th{width:1%;white-space:nowrap;text-align:left;text-transform:none;letter-spacing:0;font-size:14px;color:var(--text-strong)}
.rl-legend td{color:var(--text-dim)}
.rl-legend-hatch{display:inline-block;width:28px;height:10px;border:1px solid var(--line);border-radius:2px;background:repeating-linear-gradient(135deg,transparent 0 3px,var(--muted) 3px 4px)}
[data-live][hidden],select[data-f="programme"][hidden]{display:none}
[data-live].accent .status-dot{background:currentColor}

/* Terugluisteren: de lijst met streams links; op de telefoon een keuzelijst boven de golfvorm */
.rl-listen{grid-template-columns:260px minmax(0,1fr)}
button.rl-node{width:100%;background:none;border:0;border-left:3px solid transparent;font:inherit;text-align:left;cursor:pointer}
button.rl-node:hover{background:var(--panel-hi)}
button.rl-node[aria-selected=true]{background:var(--panel-hi);border-left-color:var(--accent)}
button.rl-node:focus-visible{outline:2px solid var(--focus);outline-offset:-2px}
.rl-node[hidden]{display:none}
.rl-pick-search{padding:8px;border-bottom:1px solid var(--line)}
.rl-pick-select{display:none}
.rl-pick-select select{width:100%}
@media (max-width:960px){
  #streamPick{display:none}
  .rl-pick-select{display:flex}
}
.btn.disabled{pointer-events:none;opacity:.5}

/* Streams en Gebruikers: links de lijst, rechts de eigenschappen van wat je aanklikt.
   De template heeft geen lijst met eigenschappen ernaast; de regels volgen de opmaak
   van zijn zijmenu (.sidenav a). */
.rl-split{display:grid;grid-template-columns:300px minmax(0,1fr);gap:14px;align-items:start}
.rl-split-settings{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.rl-tree{display:block;padding:8px;min-height:120px}
.rl-node{display:flex;align-items:center;gap:10px;padding:8px 12px;margin-bottom:2px;border-radius:var(--radius-sm);border-left:3px solid transparent;color:var(--text);text-decoration:none;font-size:14px}
a.rl-node:hover{background:var(--panel-hi)}
.rl-node.active{background:var(--panel-hi);border-left-color:var(--accent)}
.rl-node .status-dot{flex:none}
.rl-node-name{flex:1;min-width:0;display:grid}
.rl-node-name>*{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* Mappen in de boom: een kop die open en dicht klikt, met wat erin staat ingesprongen eronder */
.rl-children{margin-left:14px;padding-left:6px;border-left:1px solid var(--line-soft,var(--line));min-height:6px}
.rl-folder-head{cursor:pointer;user-select:none}
.rl-folder-head:hover,.rl-node.rl-menu-on{background:var(--panel-hi)}
.rl-folder-head:focus-visible{outline:2px solid var(--focus);outline-offset:-2px}
.rl-folder-head[aria-expanded=false]+.rl-children{display:none}
/* Het driehoekje is even groot als de statusstip van een stream (8 px), en staat op dezelfde plek */
.rl-twist{flex:none;width:8px;height:8px;margin-right:5px;display:flex;align-items:center;justify-content:center}
.rl-twist::before{content:"";border-style:solid;border-width:8px 4px 0 4px;border-color:var(--text-dim) transparent transparent transparent}
.rl-folder-head[aria-expanded=false] .rl-twist::before{border-width:4px 0 4px 8px;border-color:transparent transparent transparent var(--text-dim)}
.rl-count{flex:none}
/* De kleurkiezer van de browser, geopend vanuit het menu; zelf niet te zien */
.rl-color{position:fixed;left:0;bottom:0;width:1px;height:1px;opacity:0;pointer-events:none;border:0;padding:0}
.rl-more{flex:none;padding:0 6px;border-radius:var(--radius-sm);color:var(--muted);font-weight:700;cursor:pointer;line-height:22px}
.rl-more:hover,.rl-more:focus-visible{background:var(--track);color:var(--text-strong)}
.rl-node.rl-drop-into{background:var(--panel-hi);outline:2px solid var(--accent);outline-offset:-2px}
.rl-folder.rl-dragging{opacity:.5}
/* Bij zoeken staan alle mappen open, wat ze onthouden hebben doet er dan niet toe */
.rl-searching .rl-folder-head[aria-expanded=false]+.rl-children{display:block}
.rl-folder[hidden]{display:none}
.rl-node[draggable=true]{cursor:grab}
.rl-node.rl-dragging{opacity:.5}
.rl-node.rl-drop-before{box-shadow:inset 0 2px 0 var(--accent)}
.rl-node.rl-drop-after{box-shadow:inset 0 -2px 0 var(--accent)}
.rl-side .side-actions .input-group{display:flex}
.rl-side .side-actions .input-group input{flex:1;min-width:0}
.rl-side .side-actions .input-group .btn{width:auto;flex:none}
@media (min-width:961px){
  /* De hoogte laat ruimte voor de paginatitel erboven, zodat ook het invulveld onderaan zonder schuiven in beeld staat */
  .rl-side{position:sticky;top:calc(var(--appbar-h) + 14px);max-height:calc(100vh - var(--appbar-h) - 108px);max-height:calc(100dvh - var(--appbar-h) - 108px)}
  /* Het paneel is een flex-kolom: de lijst schuift, de kop en het invulveld blijven staan */
  .rl-side>.rl-tree{flex:1 1 auto;min-height:120px;overflow-y:auto}
  .rl-side>.panel-head,.rl-side>.side-actions,.rl-side>.rl-pick-search{flex:none}
}
@media (max-width:960px){
  .rl-split,.rl-split-settings{grid-template-columns:minmax(0,1fr)}
}

/* Het rechtermuisknopmenu op de lijst: het actiemenu van de template, zelf geplaatst */
.rl-menu{position:fixed;z-index:1000;display:block;min-width:180px}
.rl-menu[hidden]{display:none}
.rl-menu button:disabled{color:var(--muted);cursor:not-allowed}

/* Meldingen: de teller in het zijmenu staat rechts, en is rood zolang er iets mis is */
.sidenav a .rl-alerts-badge{margin-left:auto}
.rl-alerts-badge[hidden]{display:none}
.rl-alerts-badge.rl-alerts-active{background:var(--danger);color:#fff}

/* Bewaartijd: een getal met de eenheid ernaast */
.rl-retention input{flex:1;min-width:0}
.rl-retention select{flex:none;width:auto}

/* De uitkomst van een test, onder het veld */
.rl-test{margin-top:8px}
.rl-test .flash{margin-bottom:8px}
.rl-test .side-list{border:1px solid var(--line);border-radius:var(--radius-sm)}
.rl-link input{font:13px ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}
.rl-danger .panel-head{color:var(--danger-text,var(--danger))}
.check{display:flex;align-items:center;gap:8px;margin:4px 0}
.panel-head .toggle-switch{margin:0}

/* Lange waarden (adressen, meldingen) breken af in plaats van het paneel op te rekken */
.side-list>div{align-items:flex-start}
.side-list>div>span:first-child{flex-shrink:0}
.side-list>div>:last-child{min-width:0;text-align:right;overflow-wrap:anywhere}

/* Smalle schermen: een lange titel op één regel mag zijn kaart niet breder
   maken dan het scherm. */
.auth-body{grid-template-columns:minmax(0,1fr)}
.appbar>b{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media (max-width:600px){
  .rl-clock{font-size:18px;min-width:80px}
  .rl-thumb{width:80px}
  .panel-toolbar.wrap>.flex-1{display:none}
}

/* De schil om de pagina's: twee kaders die het hele venster vullen. Het kader met Terugluisteren
   blijft bestaan (onzichtbaar) terwijl een andere pagina in beeld is, zodat het doorspeelt. */
body.rl-shell{display:block;height:100vh;height:100dvh;margin:0;overflow:hidden}
body.rl-shell iframe{position:absolute;inset:0;width:100%;height:100%;border:0;background:var(--bg)}
body.rl-shell iframe.rl-hidden{visibility:hidden;pointer-events:none}
/* Wat er speelt terwijl je in een ander scherm zit: rechtsonder, boven de voetregel */
.rl-mini{position:fixed;right:14px;bottom:44px;z-index:50;display:flex;align-items:center;gap:6px;padding:6px;background:var(--panel);border:1px solid var(--line-strong);border-radius:var(--radius);box-shadow:0 6px 24px rgba(0,0,0,.35);max-width:calc(100vw - 28px)}
.rl-mini[hidden]{display:none}
.rl-mini [data-mini-text]{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-variant-numeric:tabular-nums}
.rl-mini [data-mini-open]{min-width:0;display:flex;align-items:center}