/* WILDFM Radio Studio — Studio Objects (ADR-001).

   Tokens komen uit de theme-engine (app/js/objects/theme.js, port van de

   backoffice theme.py): 21 paletten × dark/light. Onderstaande compatibiliteits-

   laag vertaalt de oude object-tokens naar de backoffice-variabelen, zodat de

   object-CSS ongewijzigd blijft en met élk palet en beide modi meekleurt. */



:root {

  --surface-2: rgb(var(--surface2-rgb));

  --surface-deep: rgba(var(--bg-rgb), 0.55);

  --accent-2: var(--accent2);

  --ok: var(--success);

  --mono: "JetBrains Mono", "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;

  --bevel: 0 1px 0 var(--bevel-top) inset;

  --elev: var(--elev-2);

  --obj-radius: var(--radius);

  --layer-0: var(--warn);

  --layer-1: var(--accent);

  --layer-2: #9b8cff;

  --layer-3: var(--warn);

  --layer-4: var(--accent2);

  --layer-5: #f26dbb;

  --layer-6: #4dd0e1;

  --onair: var(--danger);

  --onair-glow: 0 0 22px rgba(255, 107, 107, 0.45);

}

html[data-mode="light"] {

  --layer-2: #6a5acd;

  --onair: #dc2626;

  --onair-glow: 0 0 18px rgba(220, 38, 38, 0.35);

}

/* Achtergrond: gradiënt-thema's (sunset/aurora/galaxy/nordic/cosmos/coral/neon/prism/inferno),

   geanimeerd bij de aurora-thema's — zelfde gedrag als de backoffice. */

body {

  background: var(--bg-gradient, var(--bg));

  background-attachment: fixed;

}

html[data-theme="nordic"] body,

html[data-theme="cosmos"] body,

html[data-theme="coral"] body,

html[data-theme="neon"] body,

html[data-theme="prism"] body,

html[data-theme="inferno"] body {

  background-size: 400% 400%;

  animation: aurora-shift 18s ease-in-out infinite;

}

html[data-theme="cosmos"] body { animation-duration: 22s; animation-timing-function: ease-in-out; animation-name: aurora-shift; }

html[data-theme="coral"] body { animation-duration: 16s; }

@keyframes aurora-shift { 0%,100% { background-position: 0% 0%; } 50% { background-position: 100% 50%; } }

@media (prefers-reduced-motion: reduce) {

  html[data-theme="nordic"] body, html[data-theme="cosmos"] body, html[data-theme="coral"] body,

  html[data-theme="neon"] body, html[data-theme="prism"] body, html[data-theme="inferno"] body {

    animation: none; background-size: 100% 100%;

  }

}



/* ── Object-schil ─────────────────────────────────────────────────────────── */



.obj {

  position: relative;

  display: flex;

  flex-direction: column;

  min-width: 0;

  min-height: 0;

  height: 100%;

  background:

    radial-gradient(120% 100% at 0% 0%, rgba(var(--accent-rgb), .055), transparent 48%),

    linear-gradient(180deg, var(--surface-sheen), transparent 32%),

    var(--surface);

  border: 1px solid var(--border-light);

  border-radius: var(--obj-radius);

  box-shadow: var(--elev-2), inset 0 1px var(--bevel-top), inset 0 -1px var(--bevel-bottom);

  padding: 14px 16px;

  overflow: hidden;

  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;

}

.obj-grid:not(.obj-grid-editing) .obj-cell > .obj:hover {

  transform: translateY(-2px);

  border-color: rgba(var(--accent-rgb), .38);

  box-shadow: var(--elev-3), inset 0 1px var(--bevel-top);

}



.obj-head {

  position: relative;

  display: flex;

  align-items: center;

  gap: 10px;

  margin-bottom: 12px;

  padding-bottom: 9px;

  border-bottom: 1px solid var(--border);

  font-size: 11px;

  letter-spacing: 1.4px;

  text-transform: uppercase;

  color: var(--text-dim);

}

.obj-head::after {

  content: "";

  position: absolute;

  left: 0;

  bottom: -1px;

  width: 34px;

  height: 2px;

  border-radius: 2px;

  background: var(--accent-grad);

  box-shadow: 0 0 10px rgba(var(--accent-rgb), .3);

}

.obj-head[hidden] { display: none; }

.obj-head-right { margin-left: auto; display: flex; gap: 6px; align-items: center; text-transform: none; letter-spacing: 0; }

/* Config-radertje (#134): ⚙ vóór de statuslampjes, per kaart door de host. */

.obj-gear { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; margin-left: 8px; padding: 0; border: 0; background: none; color: var(--muted); cursor: pointer; border-radius: 4px; }

.obj-gear svg { width: 14px; height: 14px; }

.obj-gear:hover { color: var(--text); background: var(--surface-2, rgba(var(--accent-rgb), .08)); }

/* Instellingen-popover — zweeft op document-niveau naast de kaart. */

/* In-card instellingen (#141): velden in een strak uitgelijnd grid —
   label links, control rechts, bronnen en actie onderaan. */
/* Kop in obj-head stijl: klein caps-label + felle titel + accent-onderstreep. */

.obj-config .ocf-head { position: relative; display: flex; align-items: baseline; gap: 8px; padding-bottom: 9px; border-bottom: 1px solid var(--border); }

.obj-config .ocf-head::after { content: ""; position: absolute; left: 0; bottom: -1px; width: 34px; height: 2px; border-radius: 2px; background: var(--accent-grad); box-shadow: 0 0 10px rgba(var(--accent-rgb), .3); }

.obj-config .ocf-head-label { font-size: 11px; letter-spacing: 1.4px; text-transform: uppercase; color: var(--text-dim); }

.obj-config .ocf-head-title { font-size: 13px; font-weight: 700; letter-spacing: .2px; color: var(--text-bright); }

.obj-config .ocf-fields { display: flex; flex-direction: column; gap: 8px; }

.obj-config .ocf-row { display: grid; grid-template-columns: minmax(90px, 1fr) minmax(0, 1.4fr); align-items: center; gap: 12px; }

.obj-config .ocf-key { color: var(--muted); font-family: inherit; font-size: 12px; }

.obj-config .ocf-row input[type="checkbox"] { justify-self: start; width: 18px; height: 18px; accent-color: var(--accent); }

.obj-config input[type="text"], .obj-config input[type="number"] { width: 100%; max-width: 220px; background: var(--surface-2, transparent); border: 1px solid var(--border); border-radius: 6px; color: var(--text); padding: 6px 9px; font: inherit; }

.obj-config input[type="text"]:focus, .obj-config input[type="number"]:focus { border-color: var(--accent); outline: 2px solid var(--accent-soft); outline-offset: 1px; }

.obj-config .ocf-empty { color: var(--muted); text-align: center; padding: 18px 10px; border: 1px dashed var(--border); border-radius: 8px; font-size: 11.5px; }

/* #144 — tabbladen in het config-scherm: segment-track in huisstijl,
   actieve tab als accent-pill met gloeiend icoon. */
.obj-config .ocf-tabs { display: flex; gap: 2px; margin: 12px 0 2px; padding: 3px; background: var(--surface-2, rgba(var(--accent-rgb), .05)); border: 1px solid var(--border); border-radius: 9px; overflow-x: auto; }

.obj-config .ocf-tab { display: inline-flex; align-items: center; gap: 6px; padding: 6px 11px; background: none; border: 0; border-radius: 6px; color: var(--muted); font: inherit; font-size: 12px; white-space: nowrap; cursor: pointer; transition: color .16s ease, background .16s ease; }

.obj-config .ocf-tab svg { width: 14px; height: 14px; flex: none; }

.obj-config .ocf-tab:hover { color: var(--text); }

.obj-config .ocf-tab.is-on { color: var(--accent); background: rgba(var(--accent-rgb), .16); }

.obj-config .ocf-tab.is-on svg { filter: drop-shadow(0 0 4px rgba(var(--accent-rgb), .7)); }

/* #148 — scroll-regio: tabs/kop/footer staan vast, alleen de pane-inhoud
   scrollt binnen de kaart. */
.obj-config .ocf-panes { flex: 1; min-height: 0; overflow-y: auto; padding-right: 2px; }

.obj-config .ocf-panes::-webkit-scrollbar { width: 6px; }

.obj-config .ocf-panes::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }

.obj-config .ocf-pane { display: none; padding: 8px 0 4px; }

.obj-config .ocf-pane.is-on { display: block; }

.obj-config .ocf-sum-row { display: grid; grid-template-columns: minmax(76px, 110px) 1fr; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--border); font-size: 12.5px; color: var(--text); }

.obj-config .ocf-sum-row:last-child { border-bottom: 0; }

.obj-config .ocf-sum-row .ocf-key { font-size: 10px; letter-spacing: 1px; text-transform: uppercase; }

/* Status-LED in de summary (zelfde kleuren als .obj-led): ON AIR = rood,
   GELADEN = amber, leeg = dim. */
.obj-config .ocf-led { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 6px; background: #3a4656; box-shadow: inset 0 0 2px rgba(0,0,0,.5); vertical-align: 1px; }

.obj-config .ocf-led.is-air { background: var(--bad, #e05252); box-shadow: 0 0 8px rgba(224,82,82,.75); }

.obj-config .ocf-led.is-load { background: var(--warn, #f0a63a); box-shadow: 0 0 8px rgba(240,166,58,.7); }

.obj-config .ocf-led.is-off { opacity: .55; }

/* Bronnenlijst als chips met LED: @rt = realtime-accent, rest = dim. */
.obj-config .ocf-srcs { display: flex; flex-wrap: wrap; gap: 5px; }

.obj-config .ocf-src { display: inline-flex; align-items: center; gap: 6px; padding: 4px 9px; background: var(--surface-2, rgba(var(--accent-rgb), .05)); border: 1px solid var(--border); border-radius: 6px; font-size: 10.5px; color: var(--text); }

.obj-config .ocf-src-led { width: 6px; height: 6px; border-radius: 50%; flex: none; }

.obj-config .ocf-src-led.is-rt { background: var(--accent); box-shadow: 0 0 6px rgba(var(--accent-rgb), .7); }

.obj-config .ocf-src-led.is-rest { background: var(--muted); opacity: .6; }

/* #146 — bron-chips tonen de echte bronstatus: ok / laden·leeg / geblokkeerd. */
.obj-config .ocf-src-led.is-ok { background: var(--ok, #35c26e); box-shadow: 0 0 6px rgba(53,194,110,.7); }

.obj-config .ocf-src-led.is-warn { background: var(--warn, #f0a63a); box-shadow: 0 0 6px rgba(240,166,58,.7); }

.obj-config .ocf-src-led.is-bad { background: var(--bad, #e05252); box-shadow: 0 0 6px rgba(224,82,82,.7); }

/* #146 — testknop naast de uitgang-pulldown: ping naar het gekozen apparaat. */
.obj-config .ocf-dev-cell { display: flex; align-items: center; gap: 6px; }

.obj-config .ocf-dev-cell .ocf-select { flex: 1; }

.obj-config .ocf-test { display: inline-flex; align-items: center; gap: 4px; flex: none; padding: 6px 9px; background: var(--surface-2, rgba(var(--accent-rgb), .06)); border: 1px solid var(--border); border-radius: 6px; color: var(--muted); font: inherit; font-size: 10.5px; cursor: pointer; }

.obj-config .ocf-test svg { width: 12px; height: 12px; }

.obj-config .ocf-test:hover:not(:disabled) { color: var(--accent); border-color: rgba(var(--accent-rgb), .5); }

.obj-config .ocf-test:disabled { opacity: .5; }

/* #146 — laag-bezettingskaart op de Lagen-tab: 4 vakken, rol + eigenaar. */
.obj-config .ocf-laymap { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-top: 10px; }

.obj-config .ocf-lay { display: flex; flex-direction: column; gap: 2px; padding: 7px 8px; border: 1px solid var(--border); border-radius: 7px; background: var(--surface-2, rgba(var(--accent-rgb), .04)); font-size: 10px; min-width: 0; }

.obj-config .ocf-lay b { font-size: 11px; color: var(--text); }

.obj-config .ocf-lay span { color: var(--text-dim); }

.obj-config .ocf-lay i { font-style: normal; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.obj-config .ocf-lay.is-mine { border-color: rgba(var(--accent-rgb), .55); background: rgba(var(--accent-rgb), .1); }

.obj-config .ocf-lay.is-mine i { color: var(--accent); font-weight: 600; }

.obj-config .ocf-lay.is-taken i { color: var(--warn); }

.obj-config .ocf-lay.is-free i { color: var(--muted); }

/* #145 — apparaatkeuze: bus-rijen gebruiken de gewone ocf-row/select stijl;
   alleen de hint eronder is eigen. De naam-ontsluiting is een notice-rij met
   slot-icoon: amber = nog niet gevraagd, rood = geweigerd. */
.obj-config .ocf-dev-hint { margin-top: 8px; font-size: 10.5px; color: var(--muted); }

.obj-config .ocf-dev-lock { display: flex; align-items: center; gap: 8px; margin-top: 8px; padding: 8px 10px; border: 1px solid rgba(240,166,58,.4); background: rgba(240,166,58,.08); border-radius: 8px; font-size: 11px; color: var(--text); }

.obj-config .ocf-dev-lock svg { width: 14px; height: 14px; flex: none; color: var(--warn); }

.obj-config .ocf-dev-lock > span { flex: 1; }

.obj-config .ocf-dev-lock .obj-btn { flex: none; font-size: 10.5px; padding: 5px 10px; }

.obj-config .ocf-dev-lock.is-denied { border-color: rgba(224,82,82,.45); background: rgba(224,82,82,.08); }

.obj-config .ocf-dev-lock.is-denied svg { color: var(--bad, #e05252); }

.obj-config .ocf-foot { display: flex; align-items: center; gap: 10px; margin-top: auto; padding-top: 10px; border-top: 1px solid var(--border); }

.obj-config .ocf-note { display: inline-flex; align-items: center; gap: 6px; font-size: 10.5px; }

.obj-config .ocf-note-led { width: 6px; height: 6px; border-radius: 50%; background: var(--ok, #35c26e); box-shadow: 0 0 6px rgba(53,194,110,.7); flex: none; }

/* #141 — custom pulldown: huisstijl-knop met chevron + zwevend menu. */
.obj-config .ocf-select { position: relative; }

.obj-config .ocf-select-btn {

  display: inline-flex; align-items: center; justify-content: space-between; gap: 8px;

  width: 100%; max-width: 220px; padding: 6px 10px;

  font: inherit; color: var(--text-bright); cursor: pointer;

  background: var(--surface-2, transparent); border: 1px solid var(--border); border-radius: 6px;

}

.obj-config .ocf-select-btn:hover { border-color: rgba(var(--accent-rgb), .5); }

.obj-config .ocf-select.is-open .ocf-select-btn { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft); }

.obj-config .ocf-select-btn svg { width: 13px; height: 13px; transition: transform .18s ease; }

.obj-config .ocf-select.is-open .ocf-select-btn svg { transform: rotate(180deg); }

.obj-config .ocf-menu {

  position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: 8;

  display: flex; flex-direction: column; padding: 4px;

  background: var(--surface); border: 1px solid rgba(var(--accent-rgb), .35); border-radius: 8px;

  box-shadow: var(--elev-2); max-height: 180px; overflow: auto;

}

.obj-config .ocf-menu[hidden] { display: none; }

.obj-config .ocf-opt {

  padding: 7px 10px; border: 0; border-radius: 5px; text-align: left;

  font: inherit; color: var(--text); background: none; cursor: pointer;

}

.obj-config .ocf-opt:hover { background: var(--accent-soft); color: var(--accent); }

.obj-config .ocf-opt.is-sel { background: rgba(var(--accent-rgb), .18); color: var(--accent); font-weight: 700; }

/* Bezette letters (unique): disabled, grijs, niet klikbaar. */
.obj-config .ocf-opt:disabled { opacity: .38; cursor: not-allowed; text-decoration: line-through; }

.obj-config .ocf-opt:disabled:hover { background: none; color: var(--text); }

/* Toepassen als primaire actie-knop. */
.obj-config .ocf-apply {

  padding: 7px 18px; border-radius: 7px; font-weight: 700; cursor: pointer;

  background: var(--accent-grad, var(--accent)); color: var(--on-accent, #fff);

  border: 1px solid transparent; box-shadow: var(--bevel), 0 2px 10px rgba(var(--accent-rgb), .25);

}

.obj-config .ocf-apply:hover:not(:disabled) { filter: brightness(1.08); }

.obj-config .ocf-apply:disabled { opacity: .45; cursor: default; box-shadow: none; }

/* Bron-LED's per object: IoT (socket) + REST — rechts in de kop, uitgelijnd. */

.obj-leds { display: inline-flex; align-items: center; gap: 4px; margin-left: 8px; padding-left: 8px; border-left: 1px solid var(--border); }

.obj-led { width: 8px; height: 8px; border-radius: 50%; background: #3a4656; box-shadow: inset 0 0 2px rgba(0,0,0,.5); flex: none; }

.obj-led-iot.led-ok, .obj-led.ok { background: var(--ok, #35c26e); box-shadow: 0 0 8px rgba(53,194,110,.75); }

.obj-led-iot.warn, .obj-led.warn { background: var(--warn, #f0a63a); box-shadow: 0 0 8px rgba(240,166,58,.7); }

.obj-led-iot.bad, .obj-led.bad { background: var(--bad, #e05252); box-shadow: 0 0 8px rgba(224,82,82,.75); }

.obj-led-rest.off { background: #3a4656; opacity: .55; }



/* #141 — obj-views is het slide-frame: body en config liggen erin, de config
   schuift van rechts over de body heen zodra de kaart obj-cfg-open krijgt.
   Geen eigen border-radius: de kaartronding hoort bij .obj (buiten de
   padding); een geërfde radius hier knipt in de hoeken uit de inhoud —
   alle objecten. */
.obj-views { position: relative; flex: 1; min-height: 0; display: flex; overflow: hidden; border-radius: 0; }

.obj-body { flex: 1; min-height: 0; min-width: 0; display: flex; flex-direction: column; }

.obj-config {

  position: absolute; inset: 0; z-index: 6;

  display: flex; flex-direction: column; gap: 10px;

  /* #148 — kop, tabs en footer blijven vast; alleen .ocf-panes scrollt. */
  padding: 14px; overflow: hidden;

  border-radius: var(--radius-sm);

  background: linear-gradient(160deg, rgb(var(--surface2-rgb)), rgb(var(--bg-rgb)) 75%);

  transform: translateX(102%);

  transition: transform .28s ease, visibility .28s;

  visibility: hidden;

}

.obj-cfg-open .obj-config { transform: none; visibility: visible; }

.obj-cfg-open .obj-gear { color: var(--accent); }

.obj-gear svg { transition: transform .28s ease; }

.obj-cfg-open .obj-gear svg { transform: rotate(70deg); }



.obj-statebox {

  display: flex;

  align-items: center;

  justify-content: center;

  text-align: center;

  color: var(--text-dim);

  font-size: 15px;

  padding: 18px 12px;

  border: 1px dashed var(--border-light);

  border-radius: 10px;

  margin-bottom: 10px;

}

.obj-statebox[hidden] { display: none; }



/* Vier verplichte toestanden. */

.obj-state-loading .obj-statebox { color: var(--text-dim); }

.obj-state-loading .obj-body { opacity: 0.35; }

.obj-state-empty .obj-statebox { color: var(--warn); border-color: rgba(243, 156, 18, 0.45); }

.obj-state-empty .obj-body { opacity: 0.35; }

.obj-state-blocked .obj-statebox { color: var(--danger); border-color: rgba(255, 107, 107, 0.45); }

.obj-state-blocked .obj-body { opacity: 0.25; pointer-events: none; }

.obj-state-ready .obj-body { opacity: 1; }



/* ── Gedeelde bouwstenen voor objecten ────────────────────────────────────── */



.obj .tag {

  font-size: 10.5px;

  padding: 3px 8px;

  border-radius: 6px;

  background: var(--surface-2);

  border: 1px solid var(--border);

  color: var(--text);

  font-family: var(--mono);

  white-space: nowrap;

}

.obj .tag-l0 { border-color: var(--layer-0); color: var(--layer-0); }

.obj .tag-l1 { border-color: var(--layer-1); color: var(--layer-1); }

.obj .tag-l2 { border-color: var(--layer-2); color: var(--layer-2); }

.obj .tag-l3 { border-color: var(--layer-3); color: var(--layer-3); }

.obj .tag-onair { background: var(--onair); border-color: transparent; color: #fff; font-weight: 800; box-shadow: 0 3px 10px rgba(var(--accent-rgb), .18); }

.obj .tag-live { background: var(--onair); border-color: transparent; color: #fff; font-weight: 800; box-shadow: var(--onair-glow); }

.obj .tag-next { background: rgba(var(--accent-rgb), .16); border-color: rgba(var(--accent-rgb), .35); color: var(--accent); font-weight: 800; }

.obj .tag-ok { color: var(--accent-2); border-color: rgba(var(--accent2-rgb), .5); }

.obj .tag-warn { color: var(--warn); border-color: var(--warn); }



.obj .tag-bad { color: var(--danger); border-color: var(--danger); }

.obj .tag-acc { color: var(--accent); border-color: rgba(var(--accent-rgb), .5); }

.obj .tag-dim { color: var(--text-dim); border-color: var(--border); }

.obj .mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }

.obj .dim { color: var(--text-dim); }

.obj .bright { color: var(--text-bright); }

.obj .kpi {

  background: linear-gradient(145deg, rgba(var(--accent-rgb), .055), transparent 65%), var(--surface-deep);

  border: 1px solid var(--border-light);

  border-radius: 10px;

  padding: 10px 12px;

  box-shadow: var(--bevel), 0 6px 18px -15px rgba(var(--bg-rgb), .85);

}

.obj .kpi small { display: block; font-size: 10px; letter-spacing: 1.2px; text-transform: uppercase; color: var(--text-dim); }

.obj .kpi b { font-family: var(--mono); font-size: clamp(18px, 1.6vw, 24px); overflow-wrap: anywhere; color: var(--text-bright); font-variant-numeric: tabular-nums; }

.obj .kpi b.ok { color: var(--accent-2); }

.obj .kpi b.warn { color: var(--warn); }

.obj .kpi b.bad { color: var(--danger); }



.obj-horizon .hz-card,

.obj-program .pg-card,

.obj-monitoring-strip .ms-item,

.obj-queue .qu-list li,

.obj-news .nw-items li,

.obj-jingle-list .jl-item {

  background-image: linear-gradient(145deg, rgba(var(--accent-rgb), .045), transparent 68%);

  border-color: var(--border-light);

  box-shadow: var(--bevel), 0 6px 18px -15px rgba(var(--bg-rgb), .8);

  transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease;

}

.obj-horizon .hz-card:hover,

.obj-program .pg-card:hover,

.obj-monitoring-strip .ms-item:hover,

.obj-queue .qu-list li:hover,

.obj-news .nw-items li:hover,

.obj-jingle-list .jl-item:hover {

  transform: translateY(-1px);

  border-color: rgba(var(--accent-rgb), .3);

  box-shadow: var(--bevel), var(--elev-1);

}



.obj .obj-btn {

  min-height: 44px;

  border-radius: 10px;

  border: 1px solid var(--border-light);

  background: linear-gradient(180deg, var(--surface-sheen), transparent 70%), var(--surface-2);

  color: var(--text);

  font: inherit;

  font-weight: 800;

  letter-spacing: 1px;

  font-size: 13px;

  display: inline-flex;

  align-items: center;

  justify-content: center;

  gap: 8px;

  box-shadow: var(--bevel), var(--elev-1);

  cursor: pointer;

  transition: transform .14s ease, border-color .14s ease, background-color .14s ease, box-shadow .14s ease;

}

.obj .obj-btn:not(:disabled):hover { transform: translateY(-1px); border-color: rgba(var(--accent-rgb), .45); box-shadow: var(--bevel), var(--elev-2); }

.obj .obj-btn:not(:disabled):active { transform: translateY(1px); }

.obj .obj-btn:disabled { opacity: 0.45; cursor: not-allowed; box-shadow: none; }

.obj .obj-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }



/* ── Standalone route ─────────────────────────────────────────────────────── */



.obj-standalone { display: flex; flex-direction: column; gap: 12px; height: calc(100vh - 190px); min-height: 420px; }

.obj-standalone-bar { display: flex; align-items: center; gap: 14px; font-size: 13px; color: var(--text-dim); }

.obj-standalone-title { font-weight: 800; color: var(--text-bright); letter-spacing: 1px; text-transform: uppercase; }

.obj-standalone-cfg { font-family: var(--mono); }

.obj-back { color: var(--accent); text-decoration: none; min-height: 44px; display: inline-flex; align-items: center; }

.obj-standalone-host { flex: 1; min-height: 0; display: flex; }

.obj-standalone-host > .obj { flex: 1; }



/* ── Grid ─────────────────────────────────────────────────────────────────── */



.obj-grid { position: relative; display: grid; gap: 14px; grid-auto-rows: minmax(160px, auto); }

/* Vlakken tonen altijd compleet: rijen zijn inhoud-hoog, de pagina scrolt als het niet past.

   Alleen lijst-objecten scrollen intern (max-hoogte).

   #160 — eigen hoogte per vlak: een lang vlak (bijv. player met playlist)

   mag zijn rij innemen zonder dat de buren mee-rekken; die houden hun

   eigen inhoudshoogte en hangen boven de rij uit. In edit-mode blijft

   stretch zodat de echte grid-footprint zichtbaar is tijdens indelen. */

.obj-grid:not(.obj-grid-editing) { align-items: start; }

.obj-grid.obj-grid-fit { grid-auto-rows: auto; }

.obj-grid .obj-cell > .obj { height: auto; }

.obj-hour-log .hl-scroll, .obj-history .hi-list, .obj-jingle-list .jl-groups { max-height: 52vh; }

.obj-standalone-host .obj-hour-log .hl-scroll, .obj-standalone-host .obj-history .hi-list, .obj-standalone-host .obj-jingle-list .jl-groups { max-height: none; }

.obj-cell { min-width: 0; min-height: 0; display: flex; flex-direction: column; }

.obj-cell > .obj { flex: 1; }



/* ── Index ────────────────────────────────────────────────────────────────── */



.obj-index { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 10px; }

.obj-index a {

  display: flex; flex-direction: column; gap: 2px; padding: 12px 14px; min-height: 56px;

  border: 1px solid var(--border); border-radius: 10px; background: var(--surface-deep);

  color: var(--text); text-decoration: none;

}

.obj-index a:hover { border-color: rgba(79, 206, 243, 0.5); }

.obj-index strong { font-family: var(--mono); color: var(--accent); }

.obj-index span { font-size: 13px; color: var(--text-dim); }

/* IoT-status per object-blok op de OBJECTEN-pagina. */

.obj-index .obj-rt-status { display: flex; align-items: center; gap: 6px; margin-top: 6px; padding-top: 6px; border-top: 1px solid var(--border); }

.obj-index .obj-led { width: 9px; height: 9px; border-radius: 50%; background: #3a4656; flex: none; }

.obj-index .obj-led-iot.ok { background: var(--ok, #35c26e); box-shadow: 0 0 8px rgba(53,194,110,.75); }

.obj-index .obj-led-iot.warn { background: var(--warn, #f0a63a); box-shadow: 0 0 8px rgba(240,166,58,.7); }

.obj-index .obj-led-iot.bad { background: var(--bad, #e05252); box-shadow: 0 0 8px rgba(224,82,82,.75); }

.obj-index .obj-led-iot.off { background: #3a4656; opacity: .55; }

.obj-index .obj-rt-ch { font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--accent); background: rgba(var(--accent-rgb), .12); border: 1px solid rgba(var(--accent-rgb), .3); border-radius: 999px; padding: 1px 8px; }

.obj-index .obj-rt-chips { display: inline-flex; gap: 4px; flex-wrap: wrap; }

.obj-index .obj-rt-status span.dim { font-size: 11px; }



@media (max-width: 1280px) {

  .obj-grid:not(.obj-grid-editing) { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; grid-template-rows: none !important; }

  .obj-grid:not(.obj-grid-editing) .obj-cell { grid-area: auto !important; }

  .obj-grid-editing { grid-template-columns: repeat(var(--grid-columns), minmax(220px, 1fr)) !important; overflow-x: auto; }

}

@media (max-width: 760px) {

  .obj-grid:not(.obj-grid-editing) { grid-template-columns: 1fr !important; }

}



/* ── Object: now-playing ──────────────────────────────────────────────────── */



.obj-now-playing .onp-grid { display: grid; grid-template-columns: 112px minmax(0, 1fr) auto; gap: 16px; align-items: center; }

.obj-now-playing .onp-grid.onp-noart { grid-template-columns: minmax(0, 1fr) auto; }

.obj-now-playing .onp-art {

  width: 112px; height: 112px; border-radius: 12px; overflow: hidden;

  background: radial-gradient(circle at 28% 24%, rgba(var(--accent-rgb), .28), transparent 58%), linear-gradient(145deg, rgb(var(--surface2-rgb)), rgb(var(--bg-rgb)));

  border: 1px solid rgba(var(--accent-rgb), .28); box-shadow: var(--bevel), var(--elev-2);

  display: flex; align-items: center; justify-content: center;

}

.obj-now-playing .onp-art-empty { font-size: 34px; color: var(--text-dim); }

.obj-now-playing .onp-art-img { width: 100%; height: 100%; object-fit: cover; display: block; }

.obj-now-playing .onp-meta { min-width: 0; }

.obj-now-playing .onp-artist {

  font-size: clamp(22px, 2.2vw, 30px); font-weight: 800; letter-spacing: -0.3px; line-height: 1.1;

  color: var(--text-bright); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;

}

.obj-now-playing .onp-title { font-size: 18px; color: var(--text-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 2px; }

.obj-now-playing .onp-tags { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }

.obj-now-playing .onp-time { text-align: right; line-height: 1; }

.obj-now-playing .onp-remaining { font-size: clamp(40px, 4vw, 58px); font-weight: 800; color: var(--accent-2); font-variant-numeric: tabular-nums; }

.obj-now-playing .onp-remaining.onp-warn { color: var(--warn); }

.obj-now-playing .onp-remaining-label { font-size: 11px; letter-spacing: 1.2px; text-transform: uppercase; color: var(--text-dim); margin-top: 6px; }

.obj-now-playing .onp-elapsed { font-size: 13px; margin-top: 6px; }

.obj-now-playing .onp-progress { height: 8px; border-radius: 4px; background: var(--surface-deep); margin-top: 12px; overflow: hidden; }

.obj-now-playing .onp-bar { height: 100%; width: 0; background: linear-gradient(90deg, var(--accent), var(--accent-2)); transition: width 1s linear; }

.obj-now-playing .onp-next {

  margin-top: 12px; padding: 10px 12px; border-radius: 10px; display: flex; gap: 10px; align-items: center; flex-wrap: wrap;

  background: linear-gradient(135deg, rgba(var(--accent-rgb), .12), transparent 75%), var(--surface-deep);

  border: 1px dashed rgba(var(--accent-rgb), .4); box-shadow: var(--bevel); font-size: 14px;

}

.obj-now-playing .onp-next-label { font-size: 10px; letter-spacing: 1.2px; text-transform: uppercase; color: var(--accent); font-weight: 800; }

.obj-now-playing .onp-next-time { color: var(--accent-2); font-weight: 700; }

.obj-now-playing .onp-next-line { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; }

.obj-now-playing .onp-next-line strong { color: var(--text-bright); }

.obj-now-playing .onp-after { width: 100%; font-size: 13px; }

.obj-now-playing .onp-after strong { color: var(--text); font-weight: 600; }

@media (max-width: 640px) {

  .obj-now-playing .onp-grid { grid-template-columns: minmax(0, 1fr); }

  .obj-now-playing .onp-art { display: none; }

  .obj-now-playing .onp-time { text-align: left; }

}



/* ── Object: hour-clock ───────────────────────────────────────────────────── */



.obj-hour-clock .hc-top { display: flex; align-items: center; gap: 14px; }

.obj-hour-clock .hc-ring { width: 84px; height: 84px; flex-shrink: 0; }

.obj-hour-clock .hc-ring-bg { fill: none; stroke: rgba(255, 255, 255, 0.08); stroke-width: 10; }

.obj-hour-clock .hc-ring-fg { fill: none; stroke: var(--accent-2); stroke-width: 10; stroke-linecap: round; transition: stroke-dasharray 1s linear; }

.obj-hour-clock .hc-ring-txt { fill: #fff; font-family: var(--mono); font-size: 18px; font-weight: 800; }

.obj-hour-clock .hc-top { flex-wrap: wrap; }

.obj-hour-clock .hc-clock { font-size: clamp(24px, 2.6vw, 38px); font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; }

.obj-hour-clock .hc-sub { font-size: 13px; margin-top: 6px; }

.obj-hour-clock .hc-sub b { color: var(--accent-2); font-weight: 700; }

.obj-hour-clock .hc-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin-top: 12px; }

.obj-hour-clock .kpi b { font-size: 22px; }



/* ── Object: hour-timeline (uurtijdlijn met meelopende playhead) ─────────── */



.obj-hour-timeline .ht-scale { display: flex; justify-content: space-between; font-size: 10px;

  color: var(--text-dim); padding: 0 2px; margin-bottom: 3px; }

.obj-hour-timeline .ht-lane { position: relative; height: 118px; border-radius: 10px;

  background: var(--surface-deep); border: 1px solid var(--border); overflow: hidden; }

.obj-hour-timeline .ht-block { position: absolute; top: 4px; bottom: 4px; border-radius: 6px;

  border: 1px solid color-mix(in srgb, var(--layer-1) 80%, #fff 10%);

  background: linear-gradient(180deg, color-mix(in srgb, var(--layer-1) 52%, var(--surface-deep)),

    color-mix(in srgb, var(--layer-1) 30%, var(--surface-deep)));

  min-width: 2px; transition: opacity .3s, filter .3s; overflow: hidden;

  box-shadow: inset 0 1px 0 rgba(255,255,255,.08); display: flex; flex-direction: column; }

.obj-hour-timeline .ht-canvas { position: absolute; inset: 0; width: 100%; height: 100%; }

.obj-hour-timeline .ht-cap { position: relative; z-index: 1; display: flex; align-items: baseline; gap: 5px;

  padding: 3px 5px 2px; font-size: 10px; line-height: 1.2; overflow: hidden; pointer-events: none;

  background: linear-gradient(180deg, rgba(7,9,13,.5), rgba(7,9,13,.28));

  text-shadow: 0 1px 2px rgba(0,0,0,.8); }

.obj-hour-timeline .ht-cap b { color: var(--text-bright); font-weight: 800; white-space: nowrap;

  overflow: hidden; text-overflow: ellipsis; }

.obj-hour-timeline .ht-cap i { color: rgba(255,255,255,.8); font-style: normal; white-space: nowrap;

  overflow: hidden; text-overflow: ellipsis; flex: 1; }

.obj-hour-timeline .ht-cap em { font-style: normal; font-family: var(--mono); color: var(--accent);

  white-space: nowrap; font-weight: 700; }

.obj-hour-timeline .ht-wavebox { position: relative; flex: 1; min-height: 0; }

.obj-hour-timeline .ht-cue { position: absolute; top: 0; bottom: 0; width: 2px; margin-left: -1px; z-index: 2; }

.obj-hour-timeline .ht-cue-in { background: #ffd23f; box-shadow: 0 0 6px rgba(255, 210, 63, .8); }

.obj-hour-timeline .ht-cue-out { background: #ff4d4d; box-shadow: 0 0 6px rgba(255, 77, 77, .6); }

.obj-hour-timeline .ht-cap { position: absolute; top: 0; left: 0; right: 0; z-index: 1;

  display: flex; flex-direction: column; gap: 1px; padding: 3px 6px 2px; overflow: hidden; pointer-events: none;

  background: linear-gradient(180deg, rgba(7,9,13,.62), rgba(7,9,13,.1));

  text-shadow: 0 1px 3px rgba(0,0,0,.85); }

.obj-hour-timeline .ht-cap b { color: var(--text-bright); font-weight: 800; font-size: 11px;

  line-height: 1.15; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.obj-hour-timeline .ht-cap .ht-sub { display: flex; align-items: baseline; gap: 5px; min-width: 0; }

.obj-hour-timeline .ht-cap i { color: rgba(255,255,255,.88); font-style: normal; font-size: 10px;

  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 1; }

.obj-hour-timeline .ht-cap em { font-style: normal; font-family: var(--mono); color: var(--accent);

  font-size: 10px; white-space: nowrap; font-weight: 700; }

.obj-hour-timeline .ht-block.narrow .ht-cap { display: none; }

.obj-hour-timeline .ht-block.ht-l0 { border-color: #f39c12;

  background: linear-gradient(180deg, color-mix(in srgb, #f39c12 55%, var(--surface-deep)),

    color-mix(in srgb, #f39c12 34%, var(--surface-deep))); }

.obj-hour-timeline .ht-block.ht-l0::after { content: ""; position: absolute; inset: 0;

  background: repeating-linear-gradient(135deg, rgba(255,255,255,.09) 0 4px, transparent 4px 9px); }

.obj-hour-timeline .ht-block.ht-l2 { border-color: var(--layer-2);

  background: linear-gradient(180deg, color-mix(in srgb, var(--layer-2) 55%, var(--surface-deep)),

    color-mix(in srgb, var(--layer-2) 34%, var(--surface-deep))); }

.obj-hour-timeline .ht-block.ht-l3 { border-color: #e67e22;

  background: linear-gradient(180deg, color-mix(in srgb, #e67e22 55%, var(--surface-deep)),

    color-mix(in srgb, #e67e22 34%, var(--surface-deep))); }

.obj-hour-timeline .ht-block.is-past { opacity: .38; filter: saturate(.35); }

.obj-hour-timeline .ht-block.is-onair { border-color: #fff;

  box-shadow: 0 0 0 1px #fff, 0 0 18px rgba(var(--accent-rgb), .8); z-index: 2; }

.obj-hour-timeline .ht-head { position: absolute; top: 0; bottom: 0; width: 2px; margin-left: -1px;

  background: var(--text-bright); box-shadow: 0 0 10px rgba(var(--accent-rgb), .8); z-index: 3;

  transition: left 1s linear; pointer-events: none; }

.obj-hour-timeline .ht-dot { position: absolute; top: -3px; left: -3px; width: 8px; height: 8px;

  border-radius: 50%; background: var(--accent-grad); box-shadow: 0 0 8px var(--accent-glow); }

.obj-hour-timeline .ht-foot { display: flex; justify-content: space-between; gap: 10px; margin-top: 6px; font-size: 11px; }

.obj-hour-timeline .ht-scale { display: flex; justify-content: space-between; }

@media (prefers-reduced-motion: reduce) { .obj-hour-timeline .ht-head { transition: none; } }

.obj-hour-timeline .ht-preview { margin-top: 6px; }
.obj-hour-timeline .ht-preview-img { display: block; width: 100%; max-height: 120px; object-fit: contain; border-radius: 8px; background: #0a0f18; }
.obj-hour-timeline .ht-preview-cap { display: block; font-size: 11px; margin-top: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }



/* ── Object: hour-strip (professionele uurtijdlijn) ──────────────────────── */



.obj-hour-strip .hs-ruler { position: relative; height: 20px; margin-bottom: 2px; overflow: hidden; }

.obj-hour-strip .hs-tick { position: absolute; top: 12px; width: 1px; height: 5px;

  background: rgba(255,255,255,.18); }

.obj-hour-strip .hs-tick.major { top: 8px; height: 9px; background: rgba(255,255,255,.4); }

.obj-hour-strip .hs-lab { position: absolute; top: -2px; transform: translateX(3px);

  font-size: 10px; color: var(--text-dim); pointer-events: none; }

.obj-hour-strip .hs-bubble { position: absolute; top: -2px; transform: translateX(-50%);

  padding: 1px 7px; border-radius: 999px; background: var(--accent-grad); color: var(--on-accent, #04121c);

  font-size: 10px; font-weight: 800; font-family: var(--mono); box-shadow: var(--accent-glow);

  z-index: 4; pointer-events: none; }

.obj-hour-strip .hs-lane { position: relative; height: 128px; border-radius: 10px;

  background: var(--surface-deep); border: 1px solid var(--border); overflow: hidden;

  cursor: crosshair; touch-action: none; user-select: none; -webkit-user-select: none; }

.obj-hour-strip .hs-sel { position: absolute; top: 0; bottom: 0; z-index: 4; pointer-events: none;

  background: color-mix(in srgb, var(--accent) 22%, transparent);

  border-left: 1px solid rgba(var(--accent-rgb), .8); border-right: 1px solid rgba(var(--accent-rgb), .8);

  box-shadow: inset 0 0 0 1px rgba(var(--accent-rgb), .35); }

.obj-hour-strip .hs-block { position: absolute; top: 6px; bottom: 6px; border-radius: 7px;

  background: var(--card); border: 1px solid var(--border); overflow: hidden;

  display: flex; flex-direction: column; transition: opacity .3s, filter .3s, box-shadow .3s;

  box-shadow: 0 1px 0 var(--bevel-top) inset, var(--elev-1); }

.obj-hour-strip .hs-strip { position: absolute; left: 0; top: 0; bottom: 0; width: 3px;

  background: var(--layer-1); z-index: 2; }

.obj-hour-strip .hs-block.hs-l0 .hs-strip { background: #f39c12; }

.obj-hour-strip .hs-block.hs-l2 .hs-strip { background: var(--layer-2); }

.obj-hour-strip .hs-block.hs-l3 .hs-strip { background: #e67e22; }

.obj-hour-strip .hs-cap { position: relative; z-index: 1; display: flex; flex-direction: column;

  gap: 1px; padding: 5px 7px 3px 10px; overflow: hidden; pointer-events: none; }

.obj-hour-strip .hs-cap b { color: var(--text-bright); font-weight: 800; font-size: 11px;

  line-height: 1.15; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.obj-hour-strip .hs-cap i { color: var(--text-dim); font-style: normal; font-size: 10px;

  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.obj-hour-strip .hs-wavebox { position: relative; flex: 1; min-height: 0; margin: 0 1px 1px;

  border-radius: 0 0 6px 6px; overflow: hidden; background: rgba(0,0,0,.18); }

.obj-hour-strip .hs-canvas { position: absolute; inset: 0; width: 100%; height: 100%; }

.obj-hour-strip .hs-cue { position: absolute; top: 0; bottom: 0; width: 2px; margin-left: -1px; z-index: 2; }

.obj-hour-strip .hs-cue-in { background: #ffd23f; box-shadow: 0 0 6px rgba(255,210,63,.85); }

.obj-hour-strip .hs-cue-out { background: #ff4d4d; box-shadow: 0 0 6px rgba(255,77,77,.65); }

.obj-hour-strip .hs-dur { position: absolute; right: 6px; bottom: 4px; z-index: 2; font-style: normal;

  font-size: 10px; font-weight: 700; color: var(--accent); background: rgba(7,9,13,.55);

  padding: 1px 5px; border-radius: 6px; pointer-events: none; }

.obj-hour-strip .hs-block.is-past { opacity: .42; filter: saturate(.4); }

.obj-hour-strip .hs-block.is-onair { border-color: rgba(var(--accent-rgb), .8);

  box-shadow: 0 0 0 1px rgba(var(--accent-rgb), .55), 0 0 18px rgba(var(--accent-rgb), .45), var(--elev-2); }

.obj-hour-strip .hs-head { position: absolute; top: 0; bottom: 0; width: 2px; margin-left: -1px;

  background: var(--text-bright); box-shadow: 0 0 12px rgba(var(--accent-rgb), .9); z-index: 3;

  transition: left 1s linear; pointer-events: none; }

.obj-hour-strip .hs-energy { position: relative; height: 36px; margin-top: 6px; border-radius: 9px; overflow: hidden;

  background: linear-gradient(168deg, rgba(255,255,255,.045), rgba(255,255,255,.006) 46%, rgba(0,0,0,.13)),

              var(--surface-deep);

  border: 1px solid rgba(255,255,255,.06);

  box-shadow: inset 0 1px 0 rgba(255,255,255,.06), inset 0 -8px 12px -10px rgba(0,0,0,.5), 0 3px 8px -4px rgba(0,0,0,.4); }

.obj-hour-strip .hs-energy canvas { position: absolute; inset: 0; width: 100%; height: 100%; }

.obj-hour-strip .hs-ehead { position: absolute; top: 0; bottom: 0; width: 2px; margin-left: -1px; z-index: 2;

  background: var(--text-bright); box-shadow: 0 0 10px rgba(var(--accent-rgb), .9);

  transition: left 1s linear; pointer-events: none; }

.obj-hour-strip .hs-foot { display: flex; justify-content: space-between; gap: 10px; margin-top: 5px; font-size: 11px; }

@media (prefers-reduced-motion: reduce) { .obj-hour-strip .hs-head { transition: none; } }



/* ── Object: hour-dial (uurwijzer — radiale klok) ────────────────────────── */



.obj-hour-dial .hd-stage { position: relative; display: grid; place-items: center; min-height: 240px; }

.obj-hour-dial canvas { width: 100%; max-width: 340px; aspect-ratio: 1; display: block; }

.obj-hour-dial .hd-center { position: absolute; inset: 0; display: grid; place-content: center;

  text-align: center; pointer-events: none; padding: 0 34px; }

.obj-hour-dial .hd-center b { font-size: clamp(15px, 1.4vw, 20px); font-weight: 800; color: var(--text-bright);

  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 150px; }

.obj-hour-dial .hd-center i { font-style: normal; font-size: 12px; color: var(--text-dim);

  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 150px; }

.obj-hour-dial .hd-center em { font-style: normal; font-family: var(--mono); font-size: clamp(24px, 2.4vw, 34px);

  font-weight: 800; color: var(--text-bright); margin-top: 6px; }

.obj-hour-dial .hd-center span { font-size: 10px; letter-spacing: .12em; color: var(--text-dim); text-transform: uppercase; }



/* ── Object: onair-strip (mega meeluisterbalk) ───────────────────────────── */



.obj-onair-strip .os-wrap { display: flex; flex-direction: column; gap: 8px; }

.obj-onair-strip .os-meta { display: flex; align-items: flex-end; justify-content: space-between;

  gap: 16px; min-width: 0; }

.obj-onair-strip .os-names { min-width: 0; }

.obj-onair-strip .os-names b { display: block; font-size: clamp(19px, 1.8vw, 26px); font-weight: 800;

  color: var(--text-bright); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.obj-onair-strip .os-names i { font-style: normal; font-size: 13px; color: var(--text-dim);

  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; }

.obj-onair-strip .os-count { text-align: right; }

.obj-onair-strip .os-count em { font-style: normal; font-family: var(--mono); font-size: clamp(26px, 2.6vw, 40px);

  font-weight: 800; color: var(--text-bright); letter-spacing: 1px; }

.obj-onair-strip .os-count em.os-warn { color: var(--onair); }

.obj-onair-strip .os-count span { display: block; font-size: 9px; letter-spacing: .14em;

  text-transform: uppercase; color: var(--text-dim); }

.obj-onair-strip .os-bar { position: relative; height: 72px; border-radius: 12px;

  background: var(--surface-deep); border: 1px solid var(--border); overflow: hidden;

  box-shadow: 0 1px 0 var(--bevel-top) inset, var(--elev-1); }

.obj-onair-strip .os-bar canvas { position: absolute; inset: 0; width: 100%; height: 100%; }

.obj-onair-strip .os-cue { position: absolute; top: 0; bottom: 0; width: 2px; margin-left: -1px; z-index: 2; }

.obj-onair-strip .os-in { background: #ffd23f; box-shadow: 0 0 8px rgba(255,210,63,.85); }

.obj-onair-strip .os-out { background: #ff4d4d; box-shadow: 0 0 8px rgba(255,77,77,.7); }

.obj-onair-strip .os-cue i { position: absolute; top: 2px; left: 4px; font-style: normal; font-size: 8px;

  font-weight: 900; letter-spacing: .1em; color: #fff; text-shadow: 0 1px 3px rgba(0,0,0,.8); }

.obj-onair-strip .os-in i { color: #ffd23f; }

.obj-onair-strip .os-out i { color: #ff8a8a; }

.obj-onair-strip .os-head { position: absolute; top: 0; bottom: 0; width: 2px; margin-left: -1px;

  background: var(--text-bright); box-shadow: 0 0 12px rgba(var(--accent-rgb), .9); z-index: 3;

  transition: left 1s linear; pointer-events: none; }

.obj-onair-strip .os-dot { position: absolute; top: -3px; left: -3px; width: 8px; height: 8px;

  border-radius: 50%; background: var(--accent-grad); box-shadow: 0 0 10px var(--accent-glow); }

.obj-onair-strip .os-ruler { display: flex; justify-content: space-between; font-size: 11px; }

@media (prefers-reduced-motion: reduce) { .obj-onair-strip .os-head { transition: none; } }



/* ── Object: player ───────────────────────────────────────────────────────── */



.obj-player { --deck: var(--accent); }

.obj-player::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: var(--deck); }

.obj-player .pl-head { display: grid; grid-template-columns: 96px minmax(0, 1fr) 190px; gap: 14px; align-items: center; }

.obj-player .pl-art {

  width: 96px; height: 96px; border-radius: 12px; overflow: hidden;

  background: radial-gradient(circle at 28% 24%, rgba(var(--accent-rgb), .28), transparent 58%), linear-gradient(145deg, rgb(var(--surface2-rgb)), rgb(var(--bg-rgb)));

  border: 1px solid rgba(var(--accent-rgb), .28); box-shadow: var(--bevel), var(--elev-2);

  display: flex; align-items: center; justify-content: center;

}

.obj-player .pl-art-empty { font-size: 30px; color: var(--text-dim); }

/* #140 — huisstijl-fallbacks: jingle krijgt amber/bliksem-look, een track
   zonder cover/waveform een accent-plaatje. Beide thema-vars, geen assets. */
.obj-player .pl-art-empty.pl-art-jingle,
.obj-player .pl-art-empty.pl-art-default {
  width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; font-size: 34px;
}

.obj-player .pl-art-empty.pl-art-jingle {
  color: var(--warn);
  background:
    radial-gradient(circle at 70% 20%, rgba(243, 156, 18, .5), transparent 55%),
    radial-gradient(circle at 25% 80%, rgba(var(--accent2-rgb), .3), transparent 60%),
    linear-gradient(145deg, rgb(var(--surface2-rgb)), rgb(var(--bg-rgb)));
  text-shadow: 0 0 14px rgba(243, 156, 18, .65);
}

.obj-player .pl-art-empty.pl-art-default {
  color: var(--accent);
  background:
    radial-gradient(circle at 30% 25%, rgba(var(--accent-rgb), .45), transparent 55%),
    radial-gradient(circle at 75% 85%, rgba(var(--accent2-rgb), .28), transparent 60%),
    linear-gradient(145deg, rgb(var(--surface2-rgb)), rgb(var(--bg-rgb)));
  text-shadow: 0 0 14px rgba(var(--accent-rgb), .6);
}

.obj-player .pl-art-img { width: 100%; height: 100%; object-fit: cover; display: block; }
.obj-player .pl-art-img.pl-art-wave, .obj-now-playing .onp-art-img.onp-art-wave { object-fit: contain; background: rgba(0, 0, 0, .4); }

.obj-player .pl-meta { min-width: 0; }

.obj-player .pl-artist { font-size: clamp(20px, 1.8vw, 24px); font-weight: 800; letter-spacing: -0.3px; color: var(--text-bright); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.obj-player .pl-title { font-size: 16px; color: var(--text-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.obj-player .pl-tags { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }

.obj-player .pl-time { text-align: right; line-height: 1; }

.obj-player .pl-big { font-size: clamp(36px, 3.4vw, 50px); font-weight: 800; color: var(--text-bright); font-variant-numeric: tabular-nums; }

.obj-player .pl-big.pl-onair { color: var(--accent-2); }

.obj-player .pl-big.pl-warn { color: var(--warn); }

.obj-player .pl-big-label { font-size: 11px; letter-spacing: 1.2px; text-transform: uppercase; color: var(--text-dim); margin-top: 6px; }

.obj-player .pl-cues { font-size: 12px; margin-top: 6px; }

.obj-player .pl-wave { margin-top: 12px; height: 64px; border-radius: 10px; background: var(--surface-deep); border: 1px solid var(--border); overflow: hidden; }

.obj-player .pl-canvas { width: 100%; height: 100%; display: block; }

.obj-player .pl-times { display: flex; justify-content: space-between; font-size: 12px; margin-top: 6px; }

/* Vaste track-info onderaan (#137): altijd één regel, dezelfde drie tags. */
.obj-player .pl-info { display: flex; gap: 6px; flex-wrap: nowrap; margin-top: 8px; border-top: 1px solid var(--border); padding-top: 8px; overflow: hidden; }

.obj-player .pl-info .tag { flex: none; }

/* Elk label een eigen getinte achtergrond voor contrast (#139). */
.obj-player .pl-info-bpm { background: rgba(var(--accent2-rgb), .16); border-color: rgba(var(--accent2-rgb), .5); color: var(--accent-2); }

.obj-player .pl-info-key { background: rgba(var(--accent-rgb), .16); border-color: rgba(var(--accent-rgb), .5); color: var(--accent); }

.obj-player .pl-info-energy { background: rgba(243, 156, 18, .16); border-color: rgba(243, 156, 18, .5); color: var(--warn); }

/* #161 — de 5-slot tabel (#143) is vervangen door de cartwall pad-rij
   (zie .pl-pads hieronder); geen .pl-list/.pl-slot-stijlen meer. */

/* #159 — zes knoppen in één rij: START mag breder, de rest verdeelt
   gelijkmatig. EJECT hoort op dezelfde lijn, nooit een eigen rij. */
.obj-player .pl-ctrl { display: grid; grid-template-columns: 1.6fr repeat(5, 1fr); gap: 8px; margin-top: 12px; }

/* #160 — functiekleuren: START groen, STOP rood; PAUZE/PFL/NEXT/EJECT
   in de amber-familie (--warn volgt het actieve thema). De selectors
   zitten op data-cmd want de knoppen krijgen geen aparte classes.
   is-armed/is-pending (hieronder) overrulen deze kleuren. */
.obj-player .pl-cmd { white-space: nowrap; }

.obj-player .pl-cmd[data-cmd="start"]:not(:disabled) { background: linear-gradient(180deg, #5ff09a, #2fbf6a); color: #04240f; border-color: transparent; }

.obj-player .pl-cmd[data-cmd="stop"]:not(:disabled) { background: linear-gradient(180deg, #ff7b7b, #d94848); color: #fff; border-color: transparent; }

.obj-player .pl-cmd[data-cmd="pause"]:not(:disabled),
.obj-player .pl-cmd[data-cmd="pfl"]:not(:disabled),
.obj-player .pl-cmd[data-cmd="next"]:not(:disabled),
.obj-player .pl-cmd[data-cmd="eject"]:not(:disabled) {

  background: color-mix(in srgb, var(--warn) 16%, var(--surface-2));

  border-color: color-mix(in srgb, var(--warn) 55%, var(--border-light));

  color: var(--warn);

}

.obj-player .pl-note { font-size: 12px; margin-top: 8px; }

/* #161 — jingle-mode is compact: de pad-rij vervangt de transportknoppen
   (zelfde rij-hoogte → even hoog als een gewone player). Amber-tint via
   --warn zoals de bedieningsknoppen; pads = toekomstige vuurknoppen. */
.obj-player .pl-pads { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; margin-top: 12px; }

.obj-player .pl-pad {

  display: flex;

  align-items: center;

  justify-content: center;

  gap: 7px;

  min-height: 44px;

  padding: 4px 8px;

  border: 1px solid color-mix(in srgb, var(--warn) 50%, var(--border-light));

  border-radius: 9px;

  background: color-mix(in srgb, var(--warn) 11%, var(--surface-2));

  color: var(--text);

  font: inherit;

}

.obj-player .pl-pad .pl-pad-n { font-family: var(--mono); font-weight: 800; font-size: 15px; color: var(--warn); }

.obj-player .pl-pad .pl-pad-t { font-size: 11px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.obj-player .pl-pad:disabled { opacity: .6; cursor: default; box-shadow: none; }

/* Bediening-feedback: armed = tweede klik vereist, pending = wacht op
   engine-bevestiging. Deze classes worden door player.js gezet. */
.obj-player .pl-cmd.is-armed {

  border-color: #f39c12;

  box-shadow: var(--bevel), 0 0 0 1px rgba(243, 156, 18, .55), var(--elev-2);

  color: #ffd48a;

}

.obj-player .pl-cmd.is-pending {

  border-color: var(--accent);

  box-shadow: var(--bevel), 0 0 0 1px rgba(var(--accent-rgb), .55), var(--elev-2);

  color: var(--text-bright);

  animation: pl-pending-pulse 1s ease-in-out infinite;

}

@keyframes pl-pending-pulse {

  0%, 100% { opacity: 1; }

  50% { opacity: .55; }

}

.obj-player .pl-note.pl-note-ok { color: #5ff09a; }

.obj-player .pl-note.pl-note-err { color: #ff7b7b; }

.obj-player .pl-note.pl-note-warn { color: #ffd48a; }

/* Deck A — geen labelrij onder de titel; de meta-info zit in de tijdstabel. */
.obj-player.pl-deck-a .pl-tags { display: none; }

@media (max-width: 640px) {

  .obj-player .pl-head { grid-template-columns: minmax(0, 1fr); }

  .obj-player .pl-art { display: none; }

  .obj-player .pl-time { text-align: left; }

  .obj-player.pl-deck-a .pl-time { align-items: flex-start; }

  /* #159 — ook smal: één rij, maar knoppen compacter zodat ze passen. */
  .obj-player .pl-ctrl { gap: 5px; }

  .obj-player .pl-ctrl .obj-btn { min-height: 38px; font-size: 11px; letter-spacing: .04em; }

}



/* ── Object: hour-log ─────────────────────────────────────────────────────── */



.obj-hour-log .hl-scroll { flex: 1; min-height: 0; min-width: 0; overflow: auto; border-radius: 10px; scroll-padding: 34px 0 10px 0; }

.obj-hour-log .hl-table { width: 100%; border-collapse: collapse; font-size: 13.5px; table-layout: fixed; }

.obj-hour-log .hl-c-start { width: 88px; } .obj-hour-log .hl-c-kind { width: 82px; } .obj-hour-log .hl-c-dur { width: 64px; }

.obj-hour-log .hl-c-deck { width: 96px; } .obj-hour-log .hl-c-status { width: 164px; }

.obj-hour-log th { position: sticky; top: 0; background: var(--surface); text-align: left; font-size: 10.5px; letter-spacing: 1.2px; text-transform: uppercase; color: var(--text-dim); padding: 6px 8px; border-bottom: 1px solid var(--border-light); z-index: 1; white-space: nowrap; }

/* Kolomgreep rechts in elke kopcel — versleepbaar, breedtes worden
   opgeslagen onder studio.prefs.cols.hour-log. */
.obj-hour-log .hl-drag {
  position: absolute; right: -3px; top: 0; bottom: 0; width: 10px;
  cursor: col-resize; z-index: 2; touch-action: none;
}
.obj-hour-log .hl-drag::after {
  content: ""; position: absolute; top: 6px; bottom: 6px; left: 50%; width: 2px;
  border-radius: 1px; background: var(--border-light); opacity: 0; transition: opacity .12s;
}
.obj-hour-log thead tr:hover .hl-drag::after { opacity: .5; }
.obj-hour-log .hl-drag:hover::after { opacity: 1 !important; background: var(--accent); }
/* Laatste greep blijft binnen de cel — anders forceert hij horizontale scroll. */
.obj-hour-log th:last-child .hl-drag { right: 0; }

/* #164 — vaste rijhoogte: elke regel even hoog, altijd, ongeacht inhoud */
.obj-hour-log td { padding: 6px 8px; height: 36px; border-bottom: 1px solid var(--border); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; vertical-align: middle; }

.obj-hour-log .hl-r { text-align: right; }

.obj-hour-log .hl-start { color: var(--accent-2); font-weight: 600; }

.obj-hour-log .hl-title strong { color: var(--text-bright); font-weight: 600; }

/* #164 — type-chips uniform: elke soort even breed in de kolom */
.obj-hour-log .hl-kind { display: inline-block; min-width: 64px; text-align: center; font-size: 10px; font-weight: 800; letter-spacing: 0.8px; padding: 2px 6px; border-radius: 5px; background: var(--surface-2); color: var(--text); }

.obj-hour-log .hl-kind-jingle { background: rgba(243, 156, 18, 0.18); color: var(--layer-0); }

.obj-hour-log .hl-kind-news { background: rgba(255, 107, 107, 0.18); color: var(--danger); }

.obj-hour-log .hl-kind-voice { background: rgba(155, 140, 255, 0.2); color: var(--layer-2); }

.obj-hour-log tr.hl-played td { opacity: 0.45; }

.obj-hour-log tr.hl-now td { background: rgba(255, 107, 107, 0.10); }

.obj-hour-log tr.hl-now td:first-child { box-shadow: inset 3px 0 0 var(--danger); }

.obj-hour-log tr.hl-next td { background: rgba(79, 206, 243, 0.08); }

.obj-hour-log tr.hl-next td:first-child { box-shadow: inset 3px 0 0 var(--accent); }

/* Nu-vlak: gespeeld + on air + volgende als één paneel, schuift mee met de playlist */
.obj-hour-log tr.hl-nowblock-first td,
.obj-hour-log tr.hl-nowblock-mid td,
.obj-hour-log tr.hl-nowblock-last td { background: rgba(var(--accent-rgb), .07); }
.obj-hour-log tr.hl-nowblock-first.hl-played td { opacity: .9; }
.obj-hour-log tr.hl-nowblock-mid.hl-now td { background: rgba(255, 107, 107, .14); }
.obj-hour-log tr.hl-nowblock-first td { box-shadow: inset 0 2px 0 rgba(var(--accent-rgb), .45); }
.obj-hour-log tr.hl-nowblock-last td { box-shadow: inset 0 -2px 0 rgba(var(--accent-rgb), .45); }
.obj-hour-log tr.hl-nowblock-last.hl-next td:first-child { box-shadow: inset 3px 0 0 var(--accent), inset 0 -2px 0 rgba(var(--accent-rgb), .45); }
.obj-hour-log tr.hl-nowblock-first td:first-child { border-top-left-radius: 10px; }
.obj-hour-log tr.hl-nowblock-first td:last-child { border-top-right-radius: 10px; }
.obj-hour-log tr.hl-nowblock-last td:first-child { border-bottom-left-radius: 10px; }
.obj-hour-log tr.hl-nowblock-last td:last-child { border-bottom-right-radius: 10px; }

.obj-hour-log tbody tr[data-i] { cursor: pointer; }
.obj-hour-log tr.hl-open td { background: rgba(var(--accent-rgb), .10); }

/* #171 — pijltjes-kolommen rechts: automaat-toggle + open-chevron
   (dezelfde toggle als de rij-klik). */
.obj-hour-log .hl-c-auto { width: 34px; }
.obj-hour-log .hl-c-open { width: 38px; }
.obj-hour-log .hl-autoc, .obj-hour-log .hl-openc { text-align: center; }
.obj-hour-log .hl-autobtn, .obj-hour-log .hl-openbtn {
  width: 22px; height: 22px; border-radius: 6px; padding: 0; font-size: 11px; line-height: 1;
  border: 1px solid var(--border); background: var(--surface-2); color: var(--text-dim); cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  transition: transform .15s ease, color .15s, border-color .15s, background .15s;
}
.obj-hour-log tr.hl-open .hl-openbtn { transform: rotate(90deg); color: var(--accent); border-color: var(--accent); }
/* Automaat-pijltje: goud/geel = speelt mee in de nonstop; gedempt = overgeslagen. */
.obj-hour-log .hl-autobtn.on {
  color: var(--layer-0); border-color: rgba(243, 156, 18, .55); background: rgba(243, 156, 18, .16);
}
.obj-hour-log .hl-autobtn:not(.on) { opacity: .55; }
.obj-hour-log tr.hl-played .hl-autobtn { opacity: .3; }

/* #171 — uitgeklapte detailrij: compacte mini-player (play + dunne wave). */
.obj-hour-log tr.hl-waverow td { padding: 0; border-bottom: 1px solid var(--border); background: rgba(0, 0, 0, .30); }
.obj-hour-log .hl-mp { display: flex; align-items: center; gap: 10px; padding: 6px 10px; }
.obj-hour-log .hl-mp-play {
  flex: 0 0 30px; width: 30px; height: 30px; border-radius: 50%; padding: 0; font-size: 12px;
  border: 1px solid var(--accent); background: rgba(var(--accent-rgb), .14); color: var(--accent); cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
}
.obj-hour-log .hl-mp-play.on { background: var(--accent); color: #fff; }
.obj-hour-log .hl-mp-play:disabled { opacity: .55; cursor: wait; }
.obj-hour-log .hl-mp-wave {
  position: relative; flex: 1; min-width: 0; height: 34px; border-radius: 6px; overflow: hidden;
  background: #0a0f18; display: flex; align-items: center; justify-content: center; font-size: 11px;
  cursor: pointer;   /* klik = naar die positie luisteren */
}
.obj-hour-log .hl-mp-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: fill; opacity: .85; }
.obj-hour-log .hl-mp-prog { position: absolute; left: 0; bottom: 0; right: 0; height: 3px; pointer-events: none; }
.obj-hour-log .hl-mp-prog i { display: block; height: 100%; width: 0%; background: var(--accent); }
.obj-hour-log .hl-mp-time { flex: 0 0 auto; font-size: 11px; color: var(--text-dim); min-width: 86px; text-align: right; }

/* #163/#164 — uur-scheidingsregel: duidelijk gekleurde band op de uurwissel,
   met een gevulde pil die het nieuwe uurbereik toont. */
.obj-hour-log tr.hl-hourrow td { padding: 6px 8px; height: 36px; border-bottom: 1px solid var(--border-light); background: linear-gradient(90deg, rgba(var(--accent2-rgb), .20), rgba(var(--accent2-rgb), .06) 55%, transparent); }

.obj-hour-log tr.hl-hourrow td:first-child { box-shadow: inset 3px 0 0 var(--accent-2); }

.obj-hour-log tr.hl-hourrow .hl-hr { display: inline-block; padding: 3px 10px; border-radius: 6px; background: var(--accent-2); color: var(--on-accent, #04121c); font-size: 10.5px; font-weight: 800; letter-spacing: 1.2px; text-transform: uppercase; }

.obj-hour-log tr.hl-hourrow .hl-hr-n { font-size: 11px; margin-left: 10px; color: var(--accent-2); font-weight: 600; }

.obj-hour-log tr.hl-emptyrow td { padding: 6px 8px; height: 36px; text-align: center; }

.obj-hour-log .hl-foot { display: flex; justify-content: space-between; gap: 12px; font-size: 12px; margin-top: 8px; }



/* ── Object: queue ────────────────────────────────────────────────────────── */



.obj-queue .qu-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }

.obj-queue .qu-list li { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 8px 10px; border-radius: 9px; background: var(--surface-deep); border: 1px solid var(--border); font-size: 14px; min-height: 44px; }

.obj-queue .qu-pos { width: 22px; height: 22px; border-radius: 7px; display: inline-flex; align-items: center; justify-content: center; background: rgba(79, 206, 243, 0.14); color: var(--accent); font-size: 11px; font-weight: 800; flex-shrink: 0; }

.obj-queue .qu-main { flex: 1 1 160px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.obj-queue .qu-main strong { color: var(--text-bright); font-weight: 600; }

.obj-queue .qu-start { color: var(--accent-2); font-weight: 700; }

.obj-queue .qu-dur { font-size: 12px; }

.obj-queue .qu-none { justify-content: center; }

.obj-queue .qu-hours { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 10px; }



/* ── Object: horizon ──────────────────────────────────────────────────────── */



/* Object: horizon — compacte strip per uur, glas & diepte, alles op één regel */

.obj-horizon .hz-row { display: flex; flex-direction: column; gap: 3px; }

.obj-horizon .hz-card {

  position: relative; display: grid; align-items: center;

  grid-template-columns: 28px minmax(86px, auto) 84px 78px 1fr 64px;

  gap: 10px; min-height: 30px; padding: 3px 10px 3px 14px;

  border-radius: 9px; overflow: hidden; font-size: 12px;

  background: linear-gradient(168deg, rgba(255,255,255,.05), rgba(255,255,255,.008) 46%, rgba(0,0,0,.1)),

              var(--surface-deep);

  border: 1px solid rgba(255,255,255,.06);

  box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 3px 8px -4px rgba(0,0,0,.45);

}

.obj-horizon .hz-card::before {

  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;

  background: linear-gradient(118deg, rgba(255,255,255,.07) 0%, transparent 30%);

}

.obj-horizon .hz-card::after {

  content: ""; position: absolute; left: 0; top: 5px; bottom: 5px; width: 2px; border-radius: 2px;

  background: transparent;

}

/* gevuld: fel glas met statusgloed */

.obj-horizon .hz-card.hz-filled {

  background: linear-gradient(168deg, rgba(255,255,255,.085), rgba(255,255,255,.015) 44%, rgba(0,0,0,.13)),

              linear-gradient(90deg, rgba(var(--accent-rgb), .07), transparent 55%),

              var(--surface-deep);

  border-color: rgba(255,255,255,.11);

  box-shadow: inset 0 1px 0 rgba(255,255,255,.1), inset 0 -8px 12px -10px rgba(0,0,0,.5),

    0 6px 14px -6px rgba(0,0,0,.5), 0 1px 3px rgba(0,0,0,.25);

}

.obj-horizon .hz-card.hz-ok::after { background: var(--accent); box-shadow: 0 0 8px rgba(69,232,132,.75); }

.obj-horizon .hz-card.hz-warn::after { background: var(--warn); box-shadow: 0 0 7px rgba(243,156,18,.6); }

.obj-horizon .hz-card.hz-now { border-color: rgba(69, 232, 132, .5); }

.obj-horizon .hz-card.hz-now .hz-label { text-shadow: 0 0 10px rgba(69,232,132,.65); }

/* leeg: gedimd, gestippeld */

.obj-horizon .hz-card.hz-empty { border-style: dashed; border-color: rgba(255,255,255,.05); opacity: .55; }

.obj-horizon .hz-label { font-weight: 800; letter-spacing: 1.1px; color: var(--accent); font-size: 11px; }

.obj-horizon .hz-range { font-size: 11px; letter-spacing: .2px; color: var(--text-dim); white-space: nowrap; }

.obj-horizon .hz-card.hz-filled .hz-range { color: var(--text); }

.obj-horizon .hz-nums { display: inline-flex; align-items: baseline; gap: 5px; white-space: nowrap; }

.obj-horizon .hz-nums b { font-size: 16px; color: var(--text-bright); font-variant-numeric: tabular-nums; }

.obj-horizon .hz-nums small { font-size: 10px; color: var(--text-dim); letter-spacing: .4px; }

.obj-horizon .hz-card .clock-chip.dur { font-size: 10.5px; padding: 2px 7px; }

.obj-horizon .hz-fill {

  height: 6px; border-radius: 3px; background: rgba(0,0,0,.4); overflow: hidden; align-self: center;

  box-shadow: inset 0 1px 2px rgba(0,0,0,.6), inset 0 -1px 0 rgba(255,255,255,.03);

}

.obj-horizon .hz-fill i {

  display: block; height: 100%; border-radius: 3px; min-width: 2px;

  background: linear-gradient(90deg, rgba(69,232,132,.4), var(--accent));

  box-shadow: 0 0 7px rgba(69,232,132,.45), inset 0 1px 0 rgba(255,255,255,.3);

}

.obj-horizon .hz-fill i.warn {

  background: linear-gradient(90deg, rgba(243,156,18,.35), var(--warn));

  box-shadow: 0 0 6px rgba(243,156,18,.4), inset 0 1px 0 rgba(255,255,255,.22);

}

.obj-horizon .hz-card .tag { font-size: 9.5px; padding: 2px 7px; justify-self: end; white-space: nowrap;

  min-width: 56px; text-align: center; }



/* ── Object: history ──────────────────────────────────────────────────────── */



.obj-history .hi-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; overflow: auto; min-height: 0; }

.obj-history .hi-list li { display: flex; align-items: center; gap: 10px; padding: 7px 4px; border-bottom: 1px solid var(--border); font-size: 13.5px; }

.obj-history .hi-time { color: var(--accent-2); font-weight: 600; flex-shrink: 0; }

.obj-history .hi-main { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.obj-history .hi-main strong { color: var(--text-bright); font-weight: 600; }



/* ── Objecten: jingle-machine / jingle-list ───────────────────────────────── */



.obj-jingle-machine .jm-pads { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: minmax(72px, 1fr); gap: 8px; flex: 1; }

.obj-jingle-machine .jm-pad {

  position: relative; text-align: left; border-radius: 10px; padding: 8px 9px 8px 9px; min-height: 72px;

  display: flex; flex-direction: column; justify-content: space-between; gap: 2px;

  background: linear-gradient(160deg, var(--surface-sheen), transparent 62%), var(--surface-2);

  border: 1px solid var(--border-light); box-shadow: var(--bevel), var(--elev-1);

  color: var(--text); font: inherit; cursor: pointer;

  transition: transform .16s ease, box-shadow .16s ease, filter .16s ease;

}

.obj-jingle-machine .jm-pad:not(.jm-disabled):not(.jm-empty):hover { transform: translateY(-2px); box-shadow: var(--bevel), var(--elev-2); filter: brightness(1.06); }

.obj-jingle-machine .jm-pad:not(.jm-disabled):not(.jm-empty):active { transform: translateY(1px); filter: brightness(.98); }

.obj-jingle-machine .jm-pad.jm-empty:hover { border-color: rgba(var(--accent-rgb), .55); background: var(--accent-soft); }

.obj-jingle-machine .jm-pad:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.obj-jingle-machine .jm-key { position: absolute; top: 6px; right: 8px; font: 700 10px var(--mono); color: var(--text-dim); }

.obj-jingle-machine .jm-name { font-size: 13px; color: var(--text-bright); line-height: 1.2; padding-right: 16px; }

.obj-jingle-machine .jm-sub { font-size: 11px; color: var(--text-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.obj-jingle-machine .jm-dur { font-size: 11px; color: var(--text-dim); }

.obj-jingle-machine .jm-empty { background: transparent; border-style: dashed; justify-content: center; align-items: center; color: var(--text-dim); font-size: 11px; }

.obj-jingle-machine .jm-disabled { opacity: 0.55; }

.obj-jingle-machine .jm-over { outline: 2px dashed var(--accent); outline-offset: -2px; }

.obj-jingle-machine .jm-clear { display: none; position: absolute; bottom: 6px; right: 8px; font-size: 12px; color: var(--danger); }

.obj-jingle-machine.jm-editing .jm-clear { display: inline; }

.obj-jingle-machine.jm-editing .jm-pad:not(.jm-empty) { outline: 1px dashed rgba(255, 255, 255, 0.35); }

.obj-jingle-machine .jm-foot { display: flex; justify-content: space-between; gap: 12px; font-size: 12px; margin-top: 8px; }

.obj-jingle-machine .jm-edit { min-height: 32px; padding: 0 10px; font-size: 11px; }

.jm-c1 { background: linear-gradient(180deg, rgba(243, 156, 18, 0.35), rgba(243, 156, 18, 0.12)) !important; border-color: rgba(243, 156, 18, 0.5) !important; }

.jm-c2 { background: linear-gradient(180deg, rgba(79, 206, 255, 0.32), rgba(79, 206, 255, 0.10)) !important; border-color: rgba(79, 206, 255, 0.5) !important; }

.jm-c3 { background: linear-gradient(180deg, rgba(155, 140, 255, 0.35), rgba(155, 140, 255, 0.12)) !important; border-color: rgba(155, 140, 255, 0.5) !important; }

.jm-c4 { background: linear-gradient(180deg, rgba(69, 232, 132, 0.32), rgba(69, 232, 132, 0.10)) !important; border-color: rgba(69, 232, 132, 0.5) !important; }

.jm-c5 { background: linear-gradient(180deg, rgba(255, 107, 107, 0.38), rgba(255, 107, 107, 0.14)) !important; border-color: rgba(255, 107, 107, 0.6) !important; }

.jm-c6 { background: linear-gradient(180deg, rgba(230, 126, 34, 0.35), rgba(230, 126, 34, 0.12)) !important; border-color: rgba(230, 126, 34, 0.5) !important; }



.obj-jingle-list .jl-search { display: flex; align-items: center; gap: 8px; font-size: 12px; margin-bottom: 10px; }

.obj-jingle-list .jl-search input { flex: 1; min-height: 40px; border-radius: 9px; border: 1px solid var(--border-light); background: var(--surface-deep); color: var(--text); padding: 6px 10px; font: inherit; }

.obj-jingle-list .jl-groups { flex: 1; min-height: 0; overflow: auto; display: flex; flex-direction: column; gap: 10px; }

.obj-jingle-list .jl-fam { font-size: 12px; letter-spacing: 1px; text-transform: uppercase; padding: 5px 9px; border-radius: 7px; border: 1px solid var(--border); background: var(--surface-2); display: inline-block; margin: 0 0 6px; }

.obj-jingle-list .jl-fam.jm-c1, .obj-jingle-list .jl-fam.jm-c2, .obj-jingle-list .jl-fam.jm-c3, .obj-jingle-list .jl-fam.jm-c4, .obj-jingle-list .jl-fam.jm-c5, .obj-jingle-list .jl-fam.jm-c6 { color: var(--text-bright); }

.obj-jingle-list .jl-items { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }

.obj-jingle-list .jl-item { display: flex; align-items: center; gap: 8px; padding: 8px 10px; min-height: 40px; border-radius: 8px; background: var(--surface-deep); border: 1px solid var(--border); font-size: 13px; cursor: grab; }

.obj-jingle-list .jl-item:active { cursor: grabbing; }

.obj-jingle-list .jl-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-bright); }

.obj-jingle-list .jl-none { padding: 12px; text-align: center; }



/* ── Objecten: news / program / monitoring-strip / stream-player / show-notes ── */



.obj-news .nw-top { display: flex; align-items: center; gap: 14px; }

.obj-news .nw-count { font-size: clamp(30px, 3vw, 40px); font-weight: 800; color: var(--accent-2); font-variant-numeric: tabular-nums; line-height: 1; }

.obj-news .nw-count.nw-soon { color: var(--warn); }

.obj-news .nw-lbl { display: flex; flex-direction: column; font-size: 12px; }

.obj-news .nw-lbl b { font-family: var(--mono); font-size: 18px; color: var(--text-bright); }

.obj-news .nw-items { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; font-size: 13px; }

.obj-news .nw-items li { display: flex; gap: 10px; align-items: center; padding: 8px 10px; border-radius: 9px; background: var(--surface-deep); border: 1px solid var(--border); }

.obj-news .nw-items li span:nth-child(2) { flex: 1; }

.obj-news .nw-time { color: var(--accent-2); font-weight: 700; }

.obj-news .nw-foot { margin-top: 10px; display: flex; gap: 6px; flex-wrap: wrap; }



.obj-program .pg-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px; }

.obj-program .pg-card { background: var(--surface-deep); border: 1px solid var(--border); border-radius: 10px; padding: 10px 12px; }

.obj-program .pg-card small { display: block; font-size: 10px; letter-spacing: 1.2px; text-transform: uppercase; color: var(--text-dim); margin-bottom: 4px; }

.obj-program .pg-name { font-size: 18px; font-weight: 800; color: var(--text-bright); }

.obj-program .pg-host { font-size: 13px; margin-top: 2px; }

.obj-program .pg-desc { font-size: 13px; margin: 6px 0 0; }



/* Object: Uitzending — compacte strip, glas & diepte, alles op één regel */

.obj-monitoring-strip .ms-row { display: flex; flex-direction: column; gap: 3px; }

.obj-monitoring-strip .ms-item {

  position: relative; display: grid; grid-template-columns: 14px 1fr auto;

  align-items: center; gap: 10px; min-height: 30px; padding: 3px 10px 3px 12px;

  border-radius: 9px; overflow: hidden;

  background: linear-gradient(168deg, rgba(255,255,255,.05), rgba(255,255,255,.008) 46%, rgba(0,0,0,.1)),

              var(--surface-deep);

  border: 1px solid rgba(255,255,255,.06);

  box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 3px 8px -4px rgba(0,0,0,.45);

}

.obj-monitoring-strip .ms-item::before {

  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;

  background: linear-gradient(118deg, rgba(255,255,255,.07) 0%, transparent 30%);

}

.obj-monitoring-strip .ms-led { width: 9px; height: 9px; border-radius: 50%; background: #3a4656; justify-self: center; }

.obj-monitoring-strip .ms-ok .ms-led { background: var(--accent-2); box-shadow: 0 0 9px var(--accent-2), 0 0 3px var(--accent-2); }

.obj-monitoring-strip .ms-warn .ms-led { background: var(--warn); box-shadow: 0 0 9px var(--warn), 0 0 3px var(--warn); }

.obj-monitoring-strip .ms-bad .ms-led { background: var(--danger); box-shadow: 0 0 9px var(--danger), 0 0 3px var(--danger); }

.obj-monitoring-strip .ms-lbl { font-size: 10.5px; letter-spacing: 1.1px; text-transform: uppercase; color: var(--text-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.obj-monitoring-strip .ms-val {

  font-size: 13px; font-weight: 700; color: var(--text-bright); font-variant-numeric: tabular-nums;

  padding: 2px 10px; border-radius: 6px; white-space: nowrap;

  min-width: 78px; text-align: center; justify-self: end;

  background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.09);

  box-shadow: inset 0 1px 0 rgba(255,255,255,.07);

}

/* status-verschil: de hele rij tint en kreegt een randje mee */

.obj-monitoring-strip .ms-item.ms-warn {

  background: linear-gradient(168deg, rgba(255,255,255,.04), rgba(255,255,255,.006) 46%, rgba(0,0,0,.08)),

              linear-gradient(90deg, color-mix(in srgb, var(--warn) 8%, transparent), transparent 60%),

              var(--surface-deep);

  border-color: color-mix(in srgb, var(--warn) 26%, transparent);

}

.obj-monitoring-strip .ms-item.ms-bad {

  background: linear-gradient(168deg, rgba(255,255,255,.04), rgba(255,255,255,.006) 46%, rgba(0,0,0,.08)),

              linear-gradient(90deg, color-mix(in srgb, var(--danger) 9%, transparent), transparent 60%),

              var(--surface-deep);

  border-color: color-mix(in srgb, var(--danger) 30%, transparent);

}

.obj-monitoring-strip .ms-item.ms-warn .ms-lbl, .obj-monitoring-strip .ms-item.ms-bad .ms-lbl { color: var(--text); }

.obj-monitoring-strip .ms-ok .ms-val { color: var(--accent-2); background: color-mix(in srgb, var(--accent-2) 10%, transparent); border-color: color-mix(in srgb, var(--accent-2) 32%, transparent); }

.obj-monitoring-strip .ms-warn .ms-val { color: var(--warn); background: color-mix(in srgb, var(--warn) 11%, transparent); border-color: color-mix(in srgb, var(--warn) 34%, transparent); }

.obj-monitoring-strip .ms-bad .ms-val { color: var(--danger); background: color-mix(in srgb, var(--danger) 12%, transparent); border-color: color-mix(in srgb, var(--danger) 36%, transparent); }



.obj-stream-player .sp-row { display: grid; grid-template-columns: 1.4fr 1fr; gap: 8px; }

.obj-stream-player .sp-vol { display: flex; align-items: center; gap: 10px; font-size: 12px; margin-top: 12px; }

.obj-stream-player .sp-vol input { flex: 1; min-height: 44px; }

.obj-stream-player .sp-state { font-size: 12px; margin-top: 8px; }

/* #147 — engine-cue re-attach: cue-bus loopt server-side door een refresh
   heen; deze rij biedt meteen een luister-knop naar de PFL-feed. */
.obj-stream-player .sp-cue {
  display: flex; align-items: center; gap: 8px;
  margin-top: 8px; padding: 6px 10px;
  border: 1px solid color-mix(in srgb, var(--warn) 40%, transparent);
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--warn) 8%, transparent);
}
.obj-stream-player .sp-cue[hidden] { display: none; }
.obj-stream-player .sp-cue-text { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11px; }
.obj-stream-player .sp-cue-listen { flex: 0 0 auto; font-size: 11px; padding: 4px 10px; }



.obj-show-notes .sn-area { flex: 1; min-height: 160px; width: 100%; resize: vertical; border-radius: 10px; border: 1px solid var(--border-light); background: var(--surface-deep); color: var(--text); padding: 10px 12px; font: inherit; line-height: 1.5; }

.obj-show-notes .sn-foot { display: flex; justify-content: space-between; font-size: 12px; margin-top: 8px; }





/* ── Klokjes: gedeeld tijdlabel voor alle objecten ───────────────────────── */

.clock-chip {

  display: inline-flex; align-items: center; justify-content: center; gap: 5px;

  font-family: var(--mono); font-variant-numeric: tabular-nums;

  font-size: 11px; font-weight: 700; line-height: 1; white-space: nowrap;

  padding: 3px 8px; border-radius: 7px; color: var(--accent-2);

  background: rgba(var(--accent-rgb), .08);

  border: 1px solid rgba(var(--accent-rgb), .25);

  box-shadow: 0 1px 0 var(--bevel-top) inset;

}

.clock-chip::before {

  content: ""; width: 11px; height: 11px; flex: 0 0 11px; opacity: .85;

  background-color: var(--accent-2);

  -webkit-mask: no-repeat center / contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7.5V12l3 2'/%3E%3C/svg%3E");

  mask: no-repeat center / contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7.5V12l3 2'/%3E%3C/svg%3E");

}

.clock-chip.dur { font-weight: 600; color: var(--text); background: var(--surface-2); border-color: var(--border); }

.clock-chip.dur::before { width: 9px; height: 9px; flex-basis: 9px; background-color: var(--text-dim); opacity: .7; }

.clock-chip.big { gap: 9px; padding: 6px 16px; border-radius: 12px; }

.clock-chip.big::before { width: 15px; height: 15px; flex-basis: 15px; }

.clock-chip.warn { color: var(--warn); background: rgba(231, 76, 60, .1); border-color: rgba(231, 76, 60, .38); }

.clock-chip.warn::before { background-color: var(--warn); }








/* ── Object: topbar-status ────────────────────────────────────────────────── */



.obj-topbar-status { padding: 10px 16px; }

.obj-topbar-status .tb-row { display: flex; align-items: stretch; gap: 8px; flex-wrap: wrap; }

.obj-topbar-status .tb-onair { display: inline-flex; align-items: center; gap: 10px; padding: 8px 16px; border-radius: 10px; font-weight: 900; letter-spacing: 2px; font-size: 15px; background: var(--surface-2); color: var(--text-dim); }

.obj-topbar-status .tb-onair::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: #3a4656; }

.obj-topbar-status .tb-onair.is-onair { background: var(--onair); color: #fff; box-shadow: 0 0 22px rgba(231, 76, 60, 0.45); }

.obj-topbar-status .tb-onair.is-onair::before { background: #fff; box-shadow: 0 0 10px #fff; }

.obj-topbar-status .tb-mode { display: flex; flex-direction: column; justify-content: center; line-height: 1.1; font-size: 11px; padding: 6px 12px; border-radius: 10px; background: var(--surface-2); border: 1px solid var(--border); }

.obj-topbar-status .tb-mode b { font-size: 12px; letter-spacing: 1px; color: var(--accent-2); }

.obj-topbar-status .tb-mode.tb-live { background: var(--onair); border-color: transparent; }

.obj-topbar-status .tb-mode.tb-live b, .obj-topbar-status .tb-mode.tb-live .dim { color: #fff; }

/* Vakjes: label boven, waarde onder — gelijke hoogte en uitlijning (klokjes-stijl). */

.obj-topbar-status .tb-hour, .obj-topbar-status .tb-chip {

  display: flex; flex-direction: column; justify-content: center; gap: 2px;

  min-width: 96px; padding: 6px 12px; border-radius: 10px;

  background: var(--surface-2); border: 1px solid var(--border); line-height: 1.1; font-size: 11px;

}

.obj-topbar-status .tb-chip small, .obj-topbar-status .tb-hour .dim { font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--text-dim); }

.obj-topbar-status .tb-chip b, .obj-topbar-status .tb-hour b { font-size: 15px; color: var(--text-bright); font-variant-numeric: tabular-nums; }

.obj-topbar-status .tb-clock { margin-left: auto; font-size: clamp(26px, 2.6vw, 36px); font-weight: 700; letter-spacing: 1px; font-variant-numeric: tabular-nums; padding: 2px 14px; border-radius: 10px; background: var(--surface-2); border: 1px solid var(--border); }

.obj-topbar-status .tb-ok { color: var(--accent-2) !important; }

.obj-topbar-status .tb-warn { color: var(--warn) !important; }

.obj-cell > .obj-topbar-status { min-height: 0; }



/* ── Lay-out-editor (stap 10) ─────────────────────────────────────────────── */



.obj-layout-bar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 6px 0 12px; font-size: 13px; }

.obj-layout-title { font-weight: 800; letter-spacing: 1px; text-transform: uppercase; color: var(--text-bright); }

.obj-layout-spacer { flex: 1; }

.obj-layout-bar .obj-btn { min-height: 40px; padding: 0 14px; font-size: 12px; }

.obj-layout-bar .ol-add { display: inline-flex; gap: 6px; align-items: center; }

.obj-layout-bar select, .obj-layout-bar input { min-height: 40px; border-radius: 9px; border: 1px solid var(--border-light); background: var(--surface-deep); color: var(--text); padding: 6px 10px; font: inherit; font-size: 12px; }

.obj-layout-bar input { width: 160px; }

.obj-grid-editing .obj-cell { position: relative; outline: 1px dashed rgba(79, 206, 243, 0.45); outline-offset: -1px; border-radius: var(--obj-radius); cursor: grab; touch-action: none; user-select: none; }

.obj-grid-editing .obj-cell > .obj { pointer-events: none; opacity: 0.85; }

.obj-grid-editing .obj-cell-dragging { cursor: grabbing; }

.obj-drag-ghost { position: fixed; z-index: 1000; pointer-events: none; opacity: .92; box-shadow: var(--elev-3); }

.obj-drag-ghost > .obj { width: 100%; height: 100%; pointer-events: none; }

.obj-drop-preview { position: absolute; z-index: 20; pointer-events: none; border: 2px dashed var(--accent); border-radius: var(--obj-radius); background: var(--accent-soft); box-shadow: inset 0 0 0 1px var(--bevel-top); }

.obj-cell-tools {

  position: relative; z-index: 5; display: flex; gap: 6px; align-items: center; flex-wrap: wrap;

  margin: 6px 8px 4px; padding: 6px 8px; border-radius: 9px;

  background: rgba(9, 14, 24, 0.92); border: 1px solid var(--border-light); font-size: 12px;

  box-shadow: var(--elev-1);

}

.obj-cell-tools .ol-grip { cursor: grab; color: var(--accent); font-weight: 700; font-family: var(--mono); padding: 4px 6px; }

.obj-cell-tools .ol-grip:active { cursor: grabbing; }

.obj-cell-tools .ol-group { display: inline-flex; gap: 2px; }

.obj-cell-tools button { min-width: 36px; min-height: 32px; border-radius: 7px; border: 1px solid rgba(var(--accent-rgb), .4); background: var(--accent-soft); color: var(--text-bright); font: inherit; font-size: 12px; cursor: pointer; }

.obj-cell-tools button:hover { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }

.obj-cell-tools button:focus-visible { outline: 2px solid var(--accent); }

.obj-cell-tools .ol-remove { margin-left: auto; border-color: var(--danger); background: transparent; color: var(--danger); }

.obj-cell-tools .ol-remove:hover { background: var(--danger); color: #fff; }

/* In de indel-modus krijgt de pagina onderruimte zodat de zwevende balk

   de laatste objecten niet bedekt. */

body.layout-editing .studio-main { padding-bottom: 150px; }

.obj-cell-over { outline: 2px dashed var(--accent) !important; }

.obj-cell-dragging { opacity: 0.5; }



/* ── Backoffice-topbar chrome: 20-theme picker, modus, profiel/login, indelen ─ */

.topbar {

  position: sticky; top: 0; z-index: 90;

  display: flex; align-items: center; gap: 12px; flex-wrap: nowrap;

  min-height: var(--topbar-h); height: auto; padding: 8px 22px;

  background: rgba(var(--bg-rgb), .72); backdrop-filter: blur(18px) saturate(1.2);

  border-bottom: 1px solid var(--border);

}

.topbar .brand { display: flex; align-items: center; gap: 10px; min-width: 0; flex-shrink: 0; }

.topbar .brand-mark { width: 26px; height: 26px; border-radius: 8px; background: var(--accent-grad); box-shadow: var(--accent-glow); flex-shrink: 0; }

.topbar .brand-name { font-size: 15px; font-weight: 800; color: var(--text-bright); letter-spacing: .2px; white-space: nowrap; }

.topbar .brand-name em { color: var(--accent); font-style: normal; }

.topbar > .studio-nav { order: 1; flex: 1 1 auto; min-width: 0; }

/* Player + stereo-VU staan ín de flexrij (geen absolute centrering meer:

   die legde de speler over het menu heen zodra het menu breder werd). */

.topbar > .topbar-vu { order: 2; position: static; transform: none;

  display: inline-flex; align-items: center; gap: 10px; padding: 0;

  border: 0; background: transparent; box-shadow: none; backdrop-filter: none; }

.topbar-vu .tb-player { position: static; transform: none; pointer-events: auto; border: 0;

  background: transparent; box-shadow: none; backdrop-filter: none; padding: 0; }

.topbar-vu .tb-player .tb-play { flex: 0 0 34px; width: 34px; height: 34px; border-radius: 10px; }

.topbar-vu .tb-vu { display: flex; flex-direction: column; justify-content: center; gap: 3px;

  width: clamp(190px, 16vw, 260px); min-width: 190px; }

.topbar-vu .tb-vu-row { display: flex; align-items: center; gap: 2px; width: 100%; height: 9px; }

.topbar-vu .tb-vu-label { flex: 0 0 10px; font-family: var(--mono); font-size: 8px;

  letter-spacing: .5px; color: var(--text-dim); line-height: 1; text-align: left; }

.topbar-vu .tb-vu-seg { flex: 1 1 0; min-width: 2px; height: 8px; border-radius: 2px;

  background: rgba(255,255,255,.07); box-shadow: 0 0 0 1px rgba(0,0,0,.22) inset;

  transition: background .06s linear, box-shadow .06s linear; }

.topbar-vu .tb-vu-seg.on { background: linear-gradient(180deg, #7dffb0, #2ecc71); box-shadow: 0 0 5px rgba(46,204,113,.5), 0 0 0 1px rgba(0,0,0,.25) inset; }

.topbar-vu .tb-vu-seg.on.mid { background: linear-gradient(180deg, #ffe08a, #f39c12); box-shadow: 0 0 5px rgba(243,156,18,.5), 0 0 0 1px rgba(0,0,0,.25) inset; }

.topbar-vu .tb-vu-seg.on.hot { background: linear-gradient(180deg, #ff9d8a, #e74c3c); box-shadow: 0 0 6px rgba(231,76,60,.6), 0 0 0 1px rgba(0,0,0,.25) inset; }

.topbar-vu .tb-vu-seg.peak { background: rgba(255,255,255,.55); box-shadow: 0 0 4px rgba(255,255,255,.4); }

.topbar-vu.live .tb-vu-label { color: var(--text); }

.topbar > .topbar-center { order: 3; display: flex; align-items: center; gap: 12px; min-width: 0; margin-left: auto; }

.topbar > .tb-theme, .topbar > .tb-zoom, .topbar > .tb-btn[title="Donker / licht"], .topbar > .tb-edit, .topbar > .tb-profile { order: 4; }

.topbar .studio-clock {

  font-family: var(--mono); font-variant-numeric: tabular-nums; font-size: 20px; font-weight: 700;

  color: var(--text-bright); letter-spacing: 1px; padding: 4px 12px; border-radius: 10px;

  background: var(--card); border: 1px solid var(--border); line-height: 1.1; text-align: center; min-width: 118px;

  box-shadow: 0 1px 0 var(--bevel-top) inset, var(--elev-1);

}

.tb-onair { display: inline-flex; align-items: center; gap: 9px; max-width: 30vw; padding: 6px 12px 6px 8px;

  border-radius: 999px; background: var(--card); border: 1px solid var(--border); font-size: 12px; color: var(--text);

  box-shadow: 0 1px 0 var(--bevel-top) inset, var(--elev-1); }

.tb-onair .onair-pill { font-size: 10px; font-weight: 800; letter-spacing: 1.4px; padding: 3px 8px; border-radius: 999px;

  background: var(--danger); color: #fff; animation: studio-onair-pulse 1.6s infinite; }

.tb-onair.off .onair-pill { background: var(--text-dim); animation: none; }

.tb-onair .onair-text { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

@keyframes studio-onair-pulse { 0%,100% { box-shadow: 0 0 0 0 rgba(255,80,80,.5); } 50% { box-shadow: 0 0 0 6px rgba(255,80,80,0); } }

.tb-btn { position: relative; flex: 0 0 38px; width: 38px; height: 38px; padding: 0; border-radius: 11px; border: 1px solid var(--border);

  background: var(--card); color: var(--text-dim); display: inline-flex; align-items: center; justify-content: center;

  cursor: pointer; box-shadow: 0 1px 0 var(--bevel-top) inset, var(--elev-1); transition: all .16s; }

.tb-btn:hover { color: var(--accent); border-color: rgba(var(--accent-rgb),.45); background: var(--accent-soft); transform: translateY(-1px); }

.tb-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.tb-btn svg { width: 18px; height: 18px; }

.tb-btn .swatch { width: 16px; height: 16px; border-radius: 50%; background: var(--accent-grad); box-shadow: 0 0 0 2px var(--accent-soft); }

/* #167 — weergave-zoom: −/%/+ als één pill naast de thema-knop; de knoppen
   delen de rand zodat ze als groep lezen. */
.tb-zoom { display: inline-flex; align-items: center; gap: 0; }

.tb-zoom .tb-btn { width: 30px; flex: 0 0 30px; border-radius: 0; font-size: 15px; font-weight: 700; }

.tb-zoom .tb-btn:first-child { border-radius: 11px 0 0 11px; }

.tb-zoom .tb-btn:last-child { border-radius: 0 11px 11px 0; }

.tb-zoom .tb-btn + .tb-btn { border-left: 0; }

.tb-zoom .tb-zoom-val { width: 46px; flex: 0 0 46px; font-family: var(--mono); font-size: 11px; font-weight: 700; letter-spacing: 0; }

html[data-mode="dark"] .tb-btn .ico-sun { display: none; }

html[data-mode="light"] .tb-btn .ico-moon { display: none; }

.tb-edit { color: var(--accent); }

.tb-edit[aria-pressed="true"] { background: var(--accent-soft2); border-color: rgba(var(--accent-rgb), .5); }

/* Mini-player in de topbalk: compacte meeluisterknop + volume, thema-getrouw. */

/* De speler hangt aan de VU-groep; hier alleen de basis als hij nog niet

   verplaatst is (voorkomt flits van absolute positie bij opstarten). */

.topbar > .tb-player { order: 2; position: static; transform: none;

  display: inline-flex; align-items: center; gap: 7px; padding: 3px 6px 3px 4px;

  border-radius: 12px; border: 1px solid var(--border-light);

  background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.01)), rgba(var(--surface-rgb), .5);

  backdrop-filter: blur(14px) saturate(1.2);

  box-shadow: 0 1px 0 var(--bevel-top) inset, 0 6px 18px rgba(0,0,0,.3); }

.tb-player .tb-play { border-color: transparent; }

.tb-player.is-playing .tb-play { color: var(--accent); border-color: rgba(var(--accent-rgb), .5); background: var(--accent-soft2); }

.tb-player.is-connecting .tb-play { animation: tb-player-pulse 1.1s infinite; }

/* #147 — autoplay geblokkeerd na refresh: knop pulseert als hervat-affordance. */
.tb-player.is-resume .tb-play { animation: tb-player-pulse 1.1s infinite; color: var(--accent); border-color: rgba(var(--accent-rgb), .5); background: var(--accent-soft2); }

.tb-play .ico-pause { display: none; }

.tb-player.is-playing .ico-play { display: none; }

.tb-player.is-playing .ico-pause { display: inline; }

.tb-eq i { width: 3px; border-radius: 1px; background: var(--accent-grad); transform-origin: bottom; animation: tb-eq 0.9s ease-in-out infinite; }

.tb-eq i:nth-child(1) { height: 7px; animation-delay: 0s; }

.tb-eq i:nth-child(2) { height: 12px; animation-delay: .18s; }

.tb-eq i:nth-child(3) { height: 9px; animation-delay: .22s; }

@keyframes tb-eq { 0%, 100% { transform: scaleY(.45); } 50% { transform: scaleY(1); } }

@keyframes tb-player-pulse { 0%,100% { box-shadow: 0 0 0 0 rgba(var(--accent-rgb), .45); } 50% { box-shadow: 0 0 0 7px rgba(var(--accent-rgb), 0); } }

.tb-player.is-connecting .tb-play { animation: tb-player-pulse 1.1s infinite; }

@media (max-width: 1700px) {

  .topbar { flex-wrap: wrap; row-gap: 4px; }

  .topbar > .brand { order: 0; }

  .topbar > .topbar-center { order: 1; margin-left: auto; }

  .topbar > .topbar-vu { position: static; transform: none; order: 2; margin: 0 auto; }

  .topbar-vu .tb-vu { width: clamp(170px, 20vw, 240px); min-width: 170px; }

  .topbar > .tb-theme, .topbar > .tb-zoom, .topbar > .tb-btn[title="Donker / licht"], .topbar > .tb-edit, .topbar > .tb-profile { order: 3; }

  .topbar > .studio-nav { order: 4; flex: 1 0 100%; justify-content: flex-start;

    border-top: 1px solid var(--border); padding-top: 4px; }

}



@media (max-width: 760px) {

  .topbar > .topbar-vu { order: 5; flex: 1 0 100%; justify-content: center; margin: 2px 0; }

  .topbar-vu .tb-vu { width: min(280px, 72vw); min-width: min(220px, 58vw); }

  .topbar-vu .tb-vu-seg { min-width: 1px; }

}

@media (prefers-reduced-motion: reduce) {

  .tb-eq i, .tb-player.is-connecting .tb-play { animation: none; }

}

.tb-profile { border-radius: 50%; }

.tb-profile .profile-avatar { font-size: 14px; font-weight: 800; color: var(--text-bright); }

.theme-pop, .profile-pop, .layout-pop { display: none; position: absolute; top: calc(100% + 8px); right: 22px; z-index: 120;

  background: rgb(var(--surface-rgb)); backdrop-filter: blur(20px) saturate(1.2); border: 1px solid var(--border-light); border-radius: var(--radius);

  padding: 14px; box-shadow: var(--elev-3); flex-direction: column; gap: 10px; }

.theme-pop.open, .profile-pop.open, .layout-pop.open { display: flex; animation: studio-popin .16s ease; }

@keyframes studio-popin { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }

.theme-pop { width: min(380px, calc(100vw - 24px)); max-height: calc(100dvh - var(--topbar-h) - 24px); overflow-y: auto; }

.theme-pop h4 { margin: 0; font-size: 11px; text-transform: uppercase; letter-spacing: 1.4px; color: var(--text-dim); }

.theme-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }

.theme-pop .palette-opt { display: grid; grid-template-columns: 22px minmax(0,1fr); grid-template-rows: auto auto; column-gap: 9px; align-items: center;

  min-width: 0; padding: 7px 9px; border-radius: var(--radius-sm); border: 1px solid var(--border); background: var(--card-hover); cursor: pointer; font: inherit; text-align: left; }

.theme-pop .palette-opt:hover { border-color: rgba(var(--accent-rgb),.55); }

.theme-pop .palette-opt .pal { grid-row: 1 / 3; width: 22px; height: 22px; border-radius: 7px; box-shadow: 0 1px 2px rgba(0,0,0,.25); }

.theme-pop .palette-opt .pname { font-size: 12px; font-weight: 700; color: var(--text-bright); }

.theme-pop .palette-opt .pdesc { font-size: 10px; line-height: 1.2; color: var(--text-dim); }

.profile-pop { width: 240px; }

.layout-pop { width: min(920px, calc(100vw - 24px)); max-height: calc(100dvh - var(--topbar-h) - 24px); overflow-y: auto; }

/* Zwevende balk onderin de pagina (vaste positie in de viewport). */

.layout-pop {

  position: fixed; top: auto; right: auto; left: 50%; bottom: 14px;

  transform: translateX(-50%);

  width: min(920px, calc(100vw - 24px)); max-height: calc(100dvh - 120px);

  overflow-y: auto;

  border-radius: var(--radius); box-shadow: var(--elev-2);

}

.layout-pop-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-bottom: 10px; border-bottom: 1px solid var(--border); color: var(--text-bright); font-size: 12px; font-weight: 800; letter-spacing: 1.2px; text-transform: uppercase; }

.layout-pop-content { min-width: 0; }

.layout-pop .obj-layout-bar { margin: 0; align-items: center; gap: 8px; }

.layout-pop .obj-layout-title { font-size: 12px; letter-spacing: .08em; }

.layout-pop .obj-layout-bar .obj-btn { appearance: none; min-height: 42px; padding: 0 15px; border: 1px solid rgba(var(--accent-rgb), .42); border-radius: var(--radius-sm); background: var(--accent-soft); color: var(--text-bright); font: inherit; font-size: 12px; font-weight: 750; box-shadow: var(--elev-1); transition: background .14s, border-color .14s, transform .14s; }

.layout-pop .obj-layout-bar .obj-btn:hover { background: var(--accent); color: var(--on-accent); border-color: var(--accent); transform: translateY(-1px); }

.layout-pop .obj-layout-bar .obj-btn:active { transform: translateY(1px); }

.layout-pop .obj-layout-bar .ol-add-btn { background: var(--accent-grad); border-color: transparent; color: var(--on-accent); }

.layout-pop .obj-layout-bar .ol-add-btn:hover { background: var(--accent-grad); border-color: transparent; color: var(--on-accent); filter: brightness(1.08); }

.layout-pop .obj-layout-bar .ol-saveas { background: rgba(var(--accent2-rgb), .14); border-color: rgba(var(--accent2-rgb), .45); }

.layout-pop .obj-layout-bar .ol-reset { background: transparent; border-color: var(--warn); color: var(--warn); }

.layout-pop .obj-layout-bar .ol-reset:hover { background: var(--warn); border-color: var(--warn); color: var(--on-accent); }

.layout-pop .obj-layout-bar .ol-add { display: flex; align-items: center; gap: 8px; flex: 1 1 500px; min-width: 0; }

.layout-pop .obj-layout-bar .ol-add-id { appearance: none; min-width: 180px; flex: 0 1 220px; padding-right: 34px; background-image: linear-gradient(45deg, transparent 50%, var(--accent) 50%), linear-gradient(135deg, var(--accent) 50%, transparent 50%); background-repeat: no-repeat; background-size: 5px 5px; background-position: calc(100% - 17px) 50%, calc(100% - 12px) 50%; }

.layout-pop .obj-layout-bar .ol-add-cfg { flex: 1 1 180px; min-width: 120px; }

.layout-pop .obj-layout-bar select, .layout-pop .obj-layout-bar input { min-height: 42px; background-color: rgba(var(--accent-rgb), .08); border-color: rgba(var(--accent-rgb), .35); border-radius: var(--radius-sm); color: var(--text-bright); }

.layout-pop .obj-layout-bar select option { background: rgb(var(--surface-rgb)); color: var(--text); }

.layout-pop .obj-layout-bar input::placeholder { color: var(--text-dim); }

.layout-pop .obj-layout-bar select:focus-visible, .layout-pop .obj-layout-bar input:focus-visible { border-color: var(--accent); outline: 2px solid var(--accent-soft); outline-offset: 1px; }

.pp-head { display: flex; align-items: center; gap: 10px; }

.pp-head .pp-avatar { width: 36px; height: 36px; border-radius: 50%; background: var(--accent-grad); color: var(--on-accent); font-weight: 800; display: flex; align-items: center; justify-content: center; }

.pp-head b { display: block; font-size: 14px; color: var(--text-bright); }

.pp-head small { font-size: 11px; color: var(--text-dim); }

.pp-item { width: 100%; min-height: 40px; border-radius: var(--radius-sm); border: 1px solid var(--border); background: var(--card-hover); color: var(--text); font: inherit; font-size: 13px; cursor: pointer; }

.pp-item:hover { border-color: rgba(var(--accent-rgb),.5); color: var(--accent); }

.pp-item.pp-login { background: var(--accent-grad); color: var(--on-accent); border-color: transparent; font-weight: 700; }

/* Live-kanalen-overzicht in de profiel-pulldown (realtime lees-laag). */

.pp-rt { margin: 10px 0; padding: 10px; border-radius: var(--radius-sm); border: 1px solid var(--border); background: var(--card-hover); }

.pp-rt-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; }

.pp-rt-title { font-size: 10px; letter-spacing: .14em; color: var(--text-dim); font-weight: 700; }

.pp-rt-state { display: inline-flex; align-items: center; gap: 5px; font-size: 10.5px; font-weight: 700; padding: 2px 8px; border-radius: 999px; border: 1px solid var(--border); }

.pp-rt-state .led { width: 7px; height: 7px; }

.pp-rt-ok { color: var(--ok, #35c26e); border-color: rgba(53,194,110,.35); }

.pp-rt-warn { color: var(--warn, #f0a63a); border-color: rgba(240,166,58,.4); }

.pp-rt-bad { color: var(--bad, #e05555); border-color: rgba(224,80,80,.4); }

.pp-rt-dim { color: var(--text-dim); }

.pp-rt-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 3px; }

.pp-rt-list li { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 24px; padding: 2px 6px; border-radius: 6px; }

.pp-rt-list li:hover { background: rgba(var(--accent-rgb),.08); }

.pp-rt-obj { font-size: 12px; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.pp-rt-ch { font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--accent); background: rgba(var(--accent-rgb),.12); border: 1px solid rgba(var(--accent-rgb),.3); border-radius: 999px; padding: 1px 8px; flex: none; }

.pp-rt-empty { font-size: 11.5px; padding: 2px 4px; }

.pp-rt-foot { font-size: 10.5px; margin-top: 7px; padding-top: 6px; border-top: 1px solid var(--border); }

@media (max-width: 1280px) and (min-width: 761px) {

  .topbar { flex-wrap: wrap; row-gap: 4px; }

  .topbar > .brand { order: 0; }

  .topbar > .topbar-center { order: 1; margin-left: auto; }

  .topbar > .tb-player { order: 1; }

  .topbar > .tb-theme, .topbar > .tb-zoom, .topbar > .tb-btn[title="Donker / licht"], .topbar > .tb-edit, .topbar > .tb-profile { order: 2; }

  .topbar > .studio-nav { order: 3; flex: 1 0 100%; justify-content: flex-start; border-top: 1px solid var(--border); padding-top: 4px; }

}

@media (max-width: 760px) {

  .topbar { gap: 6px; padding: 8px; flex-wrap: wrap; }

  .topbar .brand { flex: 1 1 auto; order: 0; }

  .topbar .brand-name { font-size: 12px; }

  .topbar .topbar-center { order: 5; flex: 1 0 100%; width: 100%; justify-content: space-between; gap: 8px; }

  .topbar .studio-clock { min-width: 0; font-size: 16px; padding: 4px 8px; }

  .tb-onair { max-width: 45vw; }

  .tb-theme { order: 1; }

  .topbar > .tb-player { order: 2; }

  .topbar > .tb-zoom { order: 2; }

  .topbar > .tb-btn[title="Donker / licht"] { order: 2; }

  .topbar > .tb-edit { order: 3; }

  .topbar > .tb-profile { order: 4; }

  .topbar > .studio-nav { order: 6; flex: 1 0 100%; justify-content: space-between; gap: 2px; border-top: 1px solid var(--border); padding-top: 4px; flex-wrap: wrap; }

  .topbar > .studio-nav .nav-group { flex: 1 1 auto; }

  .topbar > .studio-nav a,
  .topbar > .studio-nav .nav-group-btn { flex: 1 1 auto; min-height: 38px; padding: 0 5px; font-size: 9px; letter-spacing: .06em; }

  .theme-pop,.profile-pop,.layout-pop { right: 8px; }

  .layout-pop .obj-layout-bar .ol-add { flex-wrap: wrap; }

  .layout-pop .obj-layout-bar .ol-add-id { flex: 1 1 150px; }

  .layout-pop .obj-layout-bar .ol-add-cfg { flex: 1 1 140px; }

}

@media (prefers-reduced-motion: reduce) {

  .obj, .obj .obj-btn, .obj-horizon .hz-card, .obj-program .pg-card,

  .obj-monitoring-strip .ms-item, .obj-queue .qu-list li, .obj-news .nw-items li,

  .obj-jingle-list .jl-item, .obj-jingle-machine .jm-pad,

  .tb-btn, .theme-pop.open, .profile-pop.open, .layout-pop.open, .tb-onair .onair-pill {

    animation: none; transition: none;

  }

  .obj-grid:not(.obj-grid-editing) .obj-cell > .obj:hover,

  .obj-horizon .hz-card:hover, .obj-program .pg-card:hover,

  .obj-monitoring-strip .ms-item:hover, .obj-queue .qu-list li:hover,

  .obj-news .nw-items li:hover, .obj-jingle-list .jl-item:hover,

  .obj-jingle-machine .jm-pad:not(.jm-disabled):not(.jm-empty):hover,

  .obj-jingle-machine .jm-pad:not(.jm-disabled):not(.jm-empty):active { transform: none; }

}



/* Smal log: titel gaat vóór deck/duur/status (container query op het object).

   #168 — bij smalle vlakken schakelt de tabel naar auto-layout: een

   verborgen kolom verdwijnt dan echt (in fixed-layout claimt hij toch

   zijn vaste breedte en krijgt de titel de vrijgevallen ruimte niet).

   De titelcel krijgt een cqw-cap zodat nowrap-tekst ellipst en de rij

   altijd exact zo breed blijft als het vlak — nooit horizontaal scrollen. */

.obj-hour-log { container-type: inline-size; }

@container (max-width: 700px) {

  .obj-hour-log .hl-table { table-layout: auto; }

  /* statuscel krimpt naar tag-breedte ("ON AIR −mm:ss" ≈ 120px) zodat de
     titel ook op ~600px vlakken leesbaar blijft */

  .obj-hour-log td.hl-status { max-width: 118px; }

  /* start+type+duur+status+automaat+pijl ≈ 450px incl. paddings — titel krijgt de rest */

  .obj-hour-log td.hl-title { max-width: calc(100cqw - 458px); }

  .obj-hour-log td:nth-child(5), .obj-hour-log th:nth-child(5) { display: none; }

}

@container (max-width: 560px) {

  .obj-hour-log td:nth-child(4), .obj-hour-log th:nth-child(4) { display: none; }

  .obj-hour-log td:nth-child(6), .obj-hour-log th:nth-child(6) { display: none; }

  /* open-chevron weg op smalle vlakken — de rij-klik opent dezelfde detailrij;
     het automaat-pijltje blijft juist wél zichtbaar */

  .obj-hour-log td:nth-child(8), .obj-hour-log th:nth-child(8) { display: none; }

  /* start+type+automaat ≈ 246px incl. paddings */

  .obj-hour-log td.hl-title { max-width: calc(100cqw - 246px); }

}

.obj-queue { container-type: inline-size; }

@container (max-width: 420px) { .obj-queue .qu-dur { display: none; } }



/* ── Classic Playout objecten (Navigator / Autoplay / BaseBrowser / Mix editor) ──

   Retro playout-look: beige paneelgevoel via bevel-tokens, LCD-displays altijd

   donker met accent-cijfers, mono tabular-nums. Werkt in élk palet. */



.cl-lcd {

  display: flex;

  align-items: baseline;

  gap: 10px;

  background: linear-gradient(180deg, rgba(0,0,0,.84), rgba(0,0,0,.66));

  border: 1px solid var(--border-light);

  border-radius: 8px;

  box-shadow: inset 0 2px 10px rgba(0,0,0,.75), inset 0 -1px 0 rgba(255,255,255,.05);

  padding: 8px 12px;

  min-width: 0;

}

.cl-lcd-val {

  font-family: var(--mono);

  font-variant-numeric: tabular-nums;

  color: var(--accent);

  font-weight: 700;

  letter-spacing: 1.5px;

  text-shadow: 0 0 9px rgba(var(--accent-rgb), .55);

  white-space: nowrap;

}

.cl-lcd-sub {

  font-family: var(--mono);

  font-variant-numeric: tabular-nums;

  font-size: 12px;

  color: var(--accent-2);

  text-shadow: 0 0 7px rgba(var(--accent2-rgb), .45);

  white-space: nowrap;

}



/* ── classic-log (Navigator) ─────────────────────────────────────────────── */

.obj-classic-log { container-type: inline-size; }

.cl-log {

  list-style: none;

  margin: 0; padding: 0;

  overflow-y: auto;

  min-height: 0;

  flex: 1;

  display: flex;

  flex-direction: column;

  gap: 2px;

}

.cl-log li {

  display: grid;

  grid-template-columns: 62px minmax(0, 1fr) auto auto auto;

  align-items: center;

  gap: 8px;

  padding: 5px 8px;

  border-radius: 7px;

  border: 1px solid transparent;

  font-size: 12.5px;

}

.cl-log li.cl-done { opacity: .48; }

.cl-log li.cl-now {

  background: rgba(var(--accent-rgb), .13);

  border-color: rgba(var(--accent-rgb), .45);

  box-shadow: inset 2px 0 0 var(--accent);

}

.cl-log li.cl-now .cl-main strong { color: var(--text-bright); }

.cl-time { font-size: 11px; color: var(--text-dim); }

.cl-log li.cl-now .cl-time { color: var(--accent); }

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

.cl-main strong { font-weight: 700; }

.cl-dur { justify-self: end; }

@container (max-width: 560px) {

  .cl-log li { grid-template-columns: 52px minmax(0, 1fr) auto; }

  .cl-log li .tag, .cl-log li .cl-dur { display: none; }

}



/* ── classic-deck (Autoplay) ─────────────────────────────────────────────── */

.cd-wrap { display: flex; flex-direction: column; gap: 10px; min-height: 0; flex: 1; }

.cd-lcds { display: flex; align-items: stretch; gap: 10px; }

.cd-lcd-main { flex: 1; }

.cd-lcd-main .cl-lcd-val { font-size: clamp(22px, 3.2vw, 34px); }

.cd-lcd-main .cl-lcd-sub { margin-left: auto; }

.cd-lamps { display: flex; flex-direction: column; justify-content: center; gap: 6px; }

.cd-lamp {

  display: flex; align-items: center; gap: 6px;

  font-family: var(--mono); font-size: 9.5px; letter-spacing: 1.2px;

  color: var(--text-dim); text-transform: uppercase;

}

.cd-lamp i {

  width: 10px; height: 10px; border-radius: 50%;

  background: rgba(255,255,255,.12);

  border: 1px solid var(--border-light);

  box-shadow: inset 0 1px 2px rgba(0,0,0,.5);

}

.cd-lamp.on { color: var(--text); }

.cd-lamp[data-f="lamp-play"].on i { background: var(--accent); border-color: transparent; box-shadow: 0 0 9px rgba(var(--accent-rgb), .65); }

.cd-lamp[data-f="lamp-cue"].on i { background: var(--warn); border-color: transparent; box-shadow: 0 0 8px rgba(243,156,18,.55); }

.cd-lamp[data-f="lamp-end"].on i { background: var(--danger); border-color: transparent; box-shadow: 0 0 8px rgba(255,107,107,.6); }

.cd-names { display: flex; flex-direction: column; gap: 2px; min-width: 0; }

.cd-names b { font-size: 15px; color: var(--text-bright); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.cd-names i { font-style: normal; color: var(--text-dim); font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.cd-track {

  position: relative; height: 6px; border-radius: 4px;

  background: var(--surface-deep);

  border: 1px solid var(--border);

  overflow: hidden;

}

.cd-head {

  height: 100%; width: 0%;

  background: var(--accent-grad);

  box-shadow: 0 0 8px rgba(var(--accent-rgb), .5);

  transition: width .6s linear;

}

.cd-next { font-size: 12px; min-height: 1.2em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.cd-next b { color: var(--text-bright); font-weight: 700; }



/* ── classic-browser (BaseBrowser) ───────────────────────────────────────── */

.obj-classic-browser { container-type: inline-size; }

.cb-wrap { display: flex; gap: 10px; min-height: 0; flex: 1; }

.cb-cats {

  display: flex; flex-direction: column; gap: 5px;

  width: 138px; flex: 0 0 138px;

  min-height: 0; overflow-y: auto;

}

.cb-cat {

  display: flex; align-items: center; justify-content: space-between; gap: 8px;

  font: inherit; font-size: 12px; color: var(--text);

  background: linear-gradient(180deg, var(--surface-2), var(--surface-deep));

  border: 1px solid var(--border-light);

  border-radius: 7px;

  padding: 7px 10px;

  cursor: pointer;

  box-shadow: inset 0 1px 0 var(--bevel-top), inset 0 -1px 0 var(--bevel-bottom);

  text-align: left;

}

.cb-cat:hover { border-color: rgba(var(--accent-rgb), .4); }

.cb-cat.is-sel {

  background: linear-gradient(180deg, rgba(var(--accent-rgb), .3), rgba(var(--accent-rgb), .16));

  border-color: rgba(var(--accent-rgb), .55);

  color: var(--text-bright); font-weight: 700;

}

.cb-cat.cb-empty { opacity: .4; cursor: default; }

.cb-n { font-size: 10.5px; color: var(--text-dim); }

.cb-pane { flex: 1; min-width: 0; display: flex; flex-direction: column; }

.cb-list {

  list-style: none; margin: 0; padding: 0;

  overflow-y: auto; min-height: 0; flex: 1;

  display: flex; flex-direction: column; gap: 2px;

}

.cb-list li {

  display: grid;

  grid-template-columns: 44px minmax(0, 1fr) auto;

  align-items: center; gap: 8px;

  padding: 5px 8px;

  border-radius: 7px;

  font-size: 12.5px;

}

.cb-list li:hover { background: rgba(var(--accent-rgb), .07); }

.cb-time { font-size: 11px; }

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

.cb-dur { justify-self: end; }

.cb-count { margin-top: 8px; font-size: 11px; }

@container (max-width: 420px) { .cb-time { display: none; } .cb-cats { width: 108px; flex-basis: 108px; } }

/* ── media-browser (Mediabrowser) ────────────────────────────────────────── */

.obj-media-browser { container-type: inline-size; }

.mb-wrap { display: flex; gap: 10px; min-height: 0; flex: 1; }

/* Zelfde hoogte-gedrag als het uurlog: grid-rijen groeien mee met de inhoud
   (auto), dus het scrollende vlak krijgt een plafond — bij -h/+h past de kaart
   mee en de lijst scrollt intern. Standalone mag onbegrensd. */
.obj-media-browser .mb-wrap { max-height: 56vh; }

.obj-standalone-host .obj-media-browser .mb-wrap { max-height: none; }

.mb-tree {

  width: 190px; flex: 0 0 190px;

  min-height: 0; overflow-y: auto;

  display: flex; flex-direction: column; gap: 2px;

}

.mb-node {

  display: flex; align-items: center; gap: 4px;

  padding: 4px 6px 4px calc(6px + var(--d, 0) * 14px);

  border-radius: 6px;

  font-size: 12px; color: var(--text);

  cursor: pointer;

  border: 1px solid transparent;

}

.mb-node:hover { background: rgba(var(--accent-rgb), .07); }

.mb-node.is-sel {

  background: linear-gradient(180deg, rgba(var(--accent-rgb), .3), rgba(var(--accent-rgb), .16));

  border-color: rgba(var(--accent-rgb), .55);

  color: var(--text-bright); font-weight: 700;

}

.mb-tw {

  width: 16px; flex: 0 0 16px;

  font: inherit; font-size: 9px; color: var(--text-dim);

  background: none; border: 0; padding: 0; cursor: pointer;

}

.mb-tw:disabled { cursor: default; }

.mb-ico { width: 14px; flex: 0 0 14px; color: var(--text-dim); display: inline-flex; }

.mb-ico svg { width: 14px; height: 14px; }

/* Mapkleur per mediasoort (zelfde palet als de uurlog-kind-chips). */
.mb-ico[data-kind="tracks"], .mb-dir[data-kind="tracks"] { color: var(--accent); }
.mb-ico[data-kind="jingles"], .mb-dir[data-kind="jingles"] { color: var(--warn); }
.mb-ico[data-kind="voice"], .mb-dir[data-kind="voice"] { color: var(--layer-2); }
.mb-ico[data-kind="news"], .mb-dir[data-kind="news"] { color: var(--danger); }
.mb-ico[data-kind="sweepers"], .mb-dir[data-kind="sweepers"],
.mb-ico[data-kind="spots"], .mb-dir[data-kind="spots"],
.mb-ico[data-kind="promo"], .mb-dir[data-kind="promo"] { color: var(--accent-2); }
.mb-ico[data-kind="nieuw"], .mb-dir[data-kind="nieuw"] { color: var(--ok); }
.mb-ico[data-kind="hot"], .mb-dir[data-kind="hot"] { color: var(--danger); }
.mb-ico[data-kind="programma"], .mb-dir[data-kind="programma"] { color: var(--layer-6); }

.mb-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.mb-n { font-size: 10.5px; color: var(--text-dim); }

.mb-pane { flex: 1; min-width: 0; min-height: 0; display: flex; flex-direction: column; }

.mb-head { display: flex; align-items: flex-start; gap: 8px; margin-bottom: 6px; }

/* Categorieknoppen (dj-weergave): boven de lijst, mapkleur per categorie.
   Knoppen mogen naar een tweede regel wrapen — nooit onzichtbaar afsnijden. */
.mb-cats { display: flex; flex-wrap: wrap; gap: 6px; flex: 1; min-width: 0; }

.mb-cat {

  display: inline-flex; align-items: center; gap: 7px;

  font: inherit; font-size: 12px; font-weight: 600; color: var(--text);

  background: var(--surface-2);

  border: 1px solid var(--border-light); border-radius: 8px;

  padding: 5px 11px; cursor: pointer; white-space: nowrap;

}

.mb-cat:hover { border-color: rgba(var(--accent-rgb), .4); }

.mb-cat .mb-cat-n { font-size: 10px; font-weight: 400; color: var(--text-dim); }

.mb-cat.is-sel { background: rgba(var(--accent-rgb), .16); border-color: rgba(var(--accent-rgb), .55); color: var(--text-bright); }

.mb-cat-tracks.is-sel { background: rgba(var(--accent-rgb), .2); }

.mb-cat-jingles.is-sel { background: rgba(243, 156, 18, .2); border-color: rgba(243, 156, 18, .55); }

.mb-cat-voice.is-sel { background: rgba(155, 140, 255, .2); border-color: rgba(155, 140, 255, .55); }

.mb-cat-news.is-sel { background: rgba(255, 107, 107, .16); border-color: rgba(255, 107, 107, .5); }

.mb-cat-nieuw.is-sel { background: rgba(46, 204, 113, .18); border-color: rgba(46, 204, 113, .5); }

.mb-cat-hot.is-sel { background: rgba(255, 107, 107, .2); border-color: rgba(255, 107, 107, .55); }

.mb-cat-programma.is-sel { background: rgba(77, 208, 225, .18); border-color: rgba(77, 208, 225, .5); }

/* Dj-weergave: boomkolom weg — navigatie via knoppen + kruimel + map-rijen */
.mb-wrap.is-cats .mb-tree { display: none; }

.mb-crumbrow { margin-bottom: 6px; min-height: 15px; }

.mb-crumb { font-size: 11px; color: var(--text-dim); flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.mb-crumb-seg {

  font: inherit; font-size: 11px; color: var(--text-dim);

  background: none; border: 0; border-radius: 4px; padding: 2px 4px;

  cursor: pointer;

}

.mb-crumb-seg:hover { color: var(--accent, var(--text-bright)); background: rgba(var(--accent-rgb), .1); }

.mb-crumb-seg:last-child { color: var(--text); font-weight: 600; }

.mb-crumb-sep { color: var(--text-dim); opacity: .45; padding: 0 1px; }

.mb-filter {

  font: inherit; font-size: 11.5px; color: var(--text);

  background: var(--surface-deep);

  border: 1px solid var(--border-light); border-radius: 7px;

  padding: 4px 8px; width: 150px;

}

.mb-list {

  /* Kolombreedtes gedeeld door header en rijen: play · type · artiest ·
     titel · jaar · bpm · key · energie · duur */
  --mb-cols: 30px 62px minmax(0, 1fr) minmax(0, 1.5fr) 44px 56px 44px 58px 52px;

  list-style: none; margin: 0; padding: 0;

  overflow-y: auto; min-height: 0; flex: 1;

  display: flex; flex-direction: column;

  border-radius: 8px;

  /* scrollIntoView houdt marge onder de kop en boven de ronde hoeken —
     de detailrij breekt nooit af tegen de rand van het vlak. */
  scroll-padding: 34px 0 10px 0;

}

/* Sticky kolomkoppen — zelfde grid als de rijen, zelfde look als het
   uurlog: oppervlakte, fijne onderlijn, brede letterspatiëring. */
.mb-cols {

  display: grid;

  grid-template-columns: var(--mb-cols);

  align-items: center; gap: 8px;

  padding: 6px 8px;

  position: sticky; top: 0; z-index: 2;

  background: var(--surface);

  border-bottom: 1px solid var(--border-light, var(--border));

}

.mb-thcell {

  position: relative; min-width: 0;

  display: flex; align-items: center;

}

.mb-th {

  flex: 1 1 auto; min-width: 0;

  font: inherit; font-size: 10.5px; font-weight: 800;

  letter-spacing: 1.2px; text-transform: uppercase;

  color: var(--text-dim); background: none; border: 0; padding: 0;

  text-align: left; cursor: pointer;

  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;

}

.mb-th:hover { color: var(--text-bright); }

.mb-th.is-on { color: var(--accent, var(--text-bright)); }

.mb-th.mb-th-r { text-align: right; }

/* Kolomgreep aan de rechterrand van elke kopcel — versleepbaar, breedtes
   worden opgeslagen onder studio.prefs.cols.media-browser. */
.mb-drag {

  position: absolute; right: -5px; top: -6px; bottom: -6px; width: 10px;

  cursor: col-resize; z-index: 3; touch-action: none;

}

.mb-drag::after {

  content: ""; position: absolute; top: 3px; bottom: 3px; left: 50%; width: 2px;

  border-radius: 1px; background: var(--border-light); opacity: 0;

  transition: opacity .12s;

}

.mb-cols:hover .mb-drag::after { opacity: .5; }

.mb-drag:hover::after { opacity: 1 !important; background: var(--accent); }

/* Laatste greep blijft binnen de cel — anders forceert hij horizontale scroll. */
.mb-thcell:last-child .mb-drag { right: 0; }

.mb-row {

  display: grid;

  grid-template-columns: var(--mb-cols);

  align-items: center; gap: 8px;

  padding: 0 8px; height: 38px;

  border-bottom: 1px solid var(--border);

  font-size: 12.5px;

}

.mb-row:last-child { border-bottom: 0; }

.mb-row:hover { background: rgba(var(--accent-rgb), .07); }

.mb-row.is-playing { background: rgba(var(--accent-rgb), .12); }

.mb-row.is-missing { opacity: .65; }

.mb-row.mb-nodb { opacity: .5; }

/* Uitgeklapte detailrij: compacte mini-player (play + dunne wave) —
   zelfde patroon als .hl-mp in het uurlog. Blok-lij (niet de rij-grid),
   ~1 extra rijhoogte zodat rij + detail ≈ 2 regels is. */
.mb-waveli {
  display: block; height: 44px; padding: 0;
  border-bottom: 1px solid var(--border);
  background: rgba(0, 0, 0, .30);
}
.mb-row.mb-open { border-bottom-color: transparent; }
.mb-mp { display: flex; align-items: center; gap: 10px; padding: 5px 10px 5px 34px; height: 100%; }
.mb-mp-play {
  flex: 0 0 30px; width: 30px; height: 30px; border-radius: 50%; padding: 0; font-size: 12px;
  border: 1px solid var(--accent); background: rgba(var(--accent-rgb), .14); color: var(--accent); cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
}
.mb-mp-play.on { background: var(--accent); color: #fff; }
.mb-mp-play:disabled { opacity: .55; cursor: wait; }
.mb-mp-wave {
  position: relative; flex: 1; min-width: 0; height: 32px; border-radius: 6px; overflow: hidden;
  background: #0a0f18; display: flex; align-items: center; justify-content: center; font-size: 11px;
  cursor: pointer;   /* klik = naar die positie luisteren */
}
.mb-mp-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: fill; opacity: .85; }
.mb-mp-prog { position: absolute; left: 0; bottom: 0; right: 0; height: 3px; pointer-events: none; }
.mb-mp-prog i { display: block; height: 100%; width: 0%; background: var(--accent); }
.mb-mp-time { flex: 0 0 auto; font-size: 11px; color: var(--text-dim); min-width: 86px; text-align: right; }

.mb-play {

  width: 24px; height: 24px;

  display: inline-flex; align-items: center; justify-content: center;

  font: inherit; font-size: 10px; color: var(--text);

  background: linear-gradient(180deg, var(--surface-2), var(--surface-deep));

  border: 1px solid var(--border-light); border-radius: 50%;

  cursor: pointer;

  box-shadow: inset 0 1px 0 var(--bevel-top), inset 0 -1px 0 var(--bevel-bottom);

}

.mb-row.is-playing .mb-play {

  border-color: rgba(var(--accent-rgb), .6);

  color: var(--accent, var(--text-bright));

}

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

/* Titelcel: titeltekst + map-link/status-chips in dezelfde kolom */
.mb-title {

  min-width: 0; overflow: hidden; white-space: nowrap;

  display: flex; align-items: center; gap: 7px;

}

.mb-title-t { min-width: 0; overflow: hidden; text-overflow: ellipsis; }

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

.mb-year, .mb-bpm, .mb-key, .mb-enr {

  font-size: 10.5px; color: var(--accent-2); white-space: nowrap;

}

.mb-year, .mb-bpm { justify-self: end; }

.mb-key { justify-self: center; }

/* Energie als visuele strip: ghost-gradient toont de schaal, de fill loopt
   tot de waarde — groen rustig, oranje midden, rood vol gas. */
.mb-enr { justify-self: stretch; align-self: center; }

.mb-enr-bar {

  display: block; height: 6px; border-radius: 3px; overflow: hidden;

  background: linear-gradient(90deg,
    rgba(46, 204, 113, .14), rgba(243, 156, 18, .14) 55%, rgba(255, 107, 107, .14));

}

.mb-enr-bar i {

  display: block; height: 100%; width: 100%;

  background: linear-gradient(90deg, var(--ok) 0%, var(--warn) 55%, var(--danger) 100%);

  clip-path: inset(0 calc(100% - var(--e, 0%)) 0 0);

}

.mb-dirrow { cursor: pointer; color: var(--text-bright); }

.mb-dirrow:hover { background: rgba(var(--accent-rgb), .12); }

.mb-dirrow .mb-dur { color: var(--text-dim); font-size: 14px; }

.mb-dir {

  display: inline-flex; align-items: center; justify-content: center;

  width: 24px; height: 24px; color: var(--accent, var(--text-dim));

}

.mb-dir svg { width: 15px; height: 15px; }

.mb-loc {

  font: inherit; font-size: 10.5px; color: var(--text-dim);

  background: none; border: 0; padding: 0;

  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 140px;

}

button.mb-loc { cursor: pointer; text-decoration: underline dotted; }

button.mb-loc:hover { color: var(--accent, var(--text-bright)); }

/* Type-chip zoals het uurlog: uniforme breedte, kleur per mediasoort */
.mb-kind {

  display: inline-block; min-width: 58px; text-align: center;

  font-size: 10px; font-weight: 800; letter-spacing: .8px; text-transform: uppercase;

  padding: 2px 6px; border-radius: 5px;

  background: var(--surface-2); color: var(--text);

  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;

}

.mb-kind-jingle { background: rgba(243, 156, 18, .18); color: var(--layer-0); }

.mb-kind-voice { background: rgba(155, 140, 255, .2); color: var(--layer-2); }

.mb-kind-news { background: rgba(255, 107, 107, .18); color: var(--danger); }

.mb-kind-sweeper, .mb-kind-promo, .mb-kind-spot { background: rgba(46, 204, 113, .16); color: var(--ok); }

.mb-chip {

  font-size: 9.5px; letter-spacing: .4px; text-transform: uppercase;

  padding: 1px 6px; border-radius: 999px;

  background: rgba(var(--accent-rgb), .14); color: var(--text-dim);

  white-space: nowrap;

}

.mb-chip.mb-miss { background: rgba(255, 90, 90, .18); color: #ff9d9d; }

.mb-chip.mb-off { background: rgba(255, 200, 60, .14); color: #e8c25a; }

.mb-chip.mb-nodbchip { background: rgba(var(--accent-rgb), .1); }

.mb-dur { justify-self: end; font-size: 11px; color: var(--text-dim); }

.mb-foot { margin-top: 6px; font-size: 11px; }

.mb-none { padding: 12px 8px; }

@container (max-width: 520px) { .mb-tree { width: 140px; flex-basis: 140px; } .mb-filter { width: 100px; } }

@container (max-width: 400px) { .mb-wrap { flex-direction: column; } .mb-tree { width: auto; flex: 0 0 auto; max-height: 120px; } }



/* ── classic-editor (Mix editor) ─────────────────────────────────────────── */

.ce-wrap { display: flex; flex-direction: column; gap: 8px; min-height: 0; flex: 1; }

.ce-bar {

  position: relative; flex: 1; min-height: 64px;

  border: 1px solid var(--border-light);

  border-radius: 8px;

  background: linear-gradient(180deg, rgba(0,0,0,.5), rgba(0,0,0,.28));

  box-shadow: inset 0 2px 8px rgba(0,0,0,.5);

  overflow: hidden;

}

.ce-canvas { position: absolute; inset: 0; width: 100%; height: 100%; }

.ce-cue {

  position: absolute; top: 0; bottom: 0; width: 2px;

  transform: translateX(-1px); pointer-events: none;

}

.ce-cue i {

  position: absolute; top: 2px; left: 3px;

  font: 700 8.5px/1 var(--mono); font-style: normal;

  padding: 2px 4px; border-radius: 4px; letter-spacing: .8px;

}

.ce-cue.ce-in i { color: #101010; background: var(--warn); }

.ce-cue.ce-out i { background: var(--onair); color: #fff; }

.ce-head {

  position: absolute; top: 0; bottom: 0; width: 2px;

  background: var(--text-bright);

  box-shadow: 0 0 8px rgba(var(--accent-rgb), .8);

}

.ce-dot {

  position: absolute; top: -3px; left: -3px; width: 8px; height: 8px;

  border-radius: 50%; background: var(--accent);

  box-shadow: 0 0 8px rgba(var(--accent-rgb), .8);

}

.ce-ruler { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

.ce-chip {

  font-family: var(--mono); font-size: 11px; font-variant-numeric: tabular-nums;

  padding: 3px 8px; border-radius: 6px;

  background: rgba(0,0,0,.72); border: 1px solid var(--border-light);

  color: var(--accent); text-shadow: 0 0 7px rgba(var(--accent-rgb), .5);

  white-space: nowrap;

}

.ce-chip.ce-in { color: var(--warn); text-shadow: none; }

.ce-chip.ce-out { color: var(--danger); text-shadow: none; }

/* ── Nonstop-console: status, lagen en automaat-toggle ── */

.obj-nonstop-status .ns-wrap { display: flex; flex-direction: column; gap: 6px; }

.obj-nonstop-status .ns-row { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; font-size: 13px; }

.obj-nonstop-status .ns-row b { font-weight: 700; }

.obj-nonstop-layer .nl-list { list-style: none; margin: 0 0 8px; padding: 0; font-size: 12px; line-height: 1.7; overflow: auto; max-height: 140px; }

.obj-nonstop-layer .nl-list li { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.obj-nonstop-layer .nl-list li.nl-onair { color: var(--onair); font-weight: 700; }

.obj-nonstop-layer .nl-seq { display: inline-block; min-width: 34px; }

.obj-nonstop-layer .nl-ctrl { display: flex; gap: 6px; }

.obj-nonstop-layer .nl-cmd.is-armed { border-color: var(--warn); color: var(--warn); }

/* #61: enqueue-paneel — catalogus zoeken → achteraan de keten. */
.obj-nonstop-layer .nl-enq { margin: 6px 0; display: flex; flex-direction: column; gap: 4px; }

.obj-nonstop-layer .nl-enq[hidden] { display: none; }

.obj-nonstop-layer .nl-q { width: 100%; box-sizing: border-box; padding: 5px 8px; font-size: 12px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius-sm, 4px); color: var(--text); }

.obj-nonstop-layer .nl-q:focus { border-color: var(--accent); outline: none; }

.obj-nonstop-layer .nl-res { display: flex; flex-direction: column; gap: 2px; max-height: 150px; overflow: auto; }

.obj-nonstop-layer .nl-res-it { display: block; width: 100%; text-align: left; padding: 4px 7px; font-size: 12px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius-sm, 4px); color: var(--text); cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.obj-nonstop-layer .nl-res-it:hover { border-color: var(--accent); }

.obj-nonstop-layer .nl-res-it.is-armed { border-color: var(--warn); }

.obj-nonstop-layer .nl-res-it .nl-arm { color: var(--warn); font-weight: 700; }

.obj-automaat-toggle .at-wrap { display: flex; flex-direction: column; gap: 10px; }

.obj-automaat-toggle .at-mode { font-size: 22px; font-weight: 800; letter-spacing: 1px; }

.obj-automaat-toggle .at-mode.at-auto { color: var(--accent-2); }

.obj-automaat-toggle .at-mode.at-manual { color: var(--warn); }

.obj-automaat-toggle .at-mode.at-none { color: var(--danger); }

.obj-automaat-toggle .at-btn { font-size: 15px; font-weight: 800; letter-spacing: 0.5px; padding: 10px 14px; }

/* ── backend-config (#101): tabs + settings-formulieren ────────────────── */

.obj-backend-config .bc-tabs { display: flex; gap: 6px; flex-wrap: wrap; border-bottom: 1px solid var(--border); padding-bottom: 10px; margin-bottom: 12px; }

.obj-backend-config .bc-tab { min-height: 36px; padding: 0 14px; border-radius: var(--radius-sm); border: 1px solid var(--border); background: transparent; color: var(--text-dim); font-weight: 800; font-size: 11px; letter-spacing: 1.2px; cursor: pointer; transition: transform .14s ease, border-color .14s ease, color .14s ease, background .14s ease; }

.obj-backend-config .bc-tab:hover { color: var(--text); border-color: var(--border-light); }

.obj-backend-config .bc-tab.is-active { color: var(--accent-2); border-color: rgba(var(--accent-rgb), .45); background: var(--accent-soft); }

.obj-backend-config .bc-tab:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.obj-backend-config .bc-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 14px; align-items: start; }

.obj-backend-config .bc-sec { background: var(--surface-deep); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 12px 14px; }

.obj-backend-config .bc-sec-title { font-size: 10.5px; font-weight: 800; letter-spacing: 1.4px; color: var(--text-dim); text-transform: uppercase; position: relative; padding-bottom: 8px; margin-bottom: 10px; }

.obj-backend-config .bc-sec-title::after { content: ""; position: absolute; left: 0; bottom: 0; width: 34px; height: 2px; background: var(--accent-grad); box-shadow: 0 0 10px rgba(var(--accent-rgb), .3); border-radius: 2px; }

.obj-backend-config .bc-kv { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; padding: 4px 0; border-bottom: 1px solid var(--border); font-size: 12.5px; }

.obj-backend-config .bc-kv:last-child { border-bottom: 0; }

.obj-backend-config .bc-lab { color: var(--text-dim); font-size: 11px; letter-spacing: .4px; flex: none; }

.obj-backend-config .bc-val { text-align: right; overflow-wrap: anywhere; }

.obj-backend-config .bc-table { width: 100%; border-collapse: collapse; font-size: 12px; }

.obj-backend-config .bc-table th { text-align: left; color: var(--text-dim); font-size: 10px; letter-spacing: 1px; font-weight: 800; padding: 4px 6px; border-bottom: 1px solid var(--border); }

.obj-backend-config .bc-table td { padding: 4px 6px; border-bottom: 1px solid var(--border); }

.obj-backend-config .bc-table tr:last-child td { border-bottom: 0; }

.obj-backend-config .bc-form { display: flex; flex-direction: column; gap: 8px; }

.obj-backend-config .bc-row { display: grid; grid-template-columns: minmax(120px, 190px) 1fr; align-items: center; gap: 10px; }

.obj-backend-config .bc-input { width: 100%; min-height: 36px; box-sizing: border-box; padding: 6px 10px; border-radius: var(--radius-xs); border: 1px solid var(--border); background: var(--surface-2); color: var(--text); font-family: var(--mono); font-size: 12.5px; transition: border-color .14s ease, box-shadow .14s ease; }

.obj-backend-config .bc-input:focus { outline: none; border-color: rgba(var(--accent-rgb), .55); box-shadow: 0 0 0 1px rgba(var(--accent-rgb), .35); }

.obj-backend-config .bc-check { appearance: none; width: 38px; height: 22px; border-radius: 22px; border: 1px solid var(--border-light); background: var(--surface-2); position: relative; cursor: pointer; margin: 0; transition: background .14s ease, border-color .14s ease; flex: none; }

.obj-backend-config .bc-check::after { content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: var(--text-dim); transition: transform .14s ease, background .14s ease; }

.obj-backend-config .bc-check:checked { background: var(--accent-soft2); border-color: rgba(var(--accent-rgb), .55); }

.obj-backend-config .bc-check:checked::after { transform: translateX(16px); background: var(--accent-2); }

.obj-backend-config .bc-check:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.obj-backend-config .bc-actions { display: flex; align-items: center; gap: 8px; margin-top: 6px; padding-top: 10px; border-top: 1px solid var(--border); }

.obj-backend-config .bc-actions .obj-btn { min-height: 36px; padding: 0 14px; font-size: 11px; }

.obj-backend-config .bc-actions .bc-save:not(:disabled) { background: var(--accent-grad); color: var(--on-accent); border-color: transparent; }

.obj-backend-config .bc-note { flex: 1; font-size: 11.5px; }

.obj-backend-config .bc-note.dim, .obj-backend-config .bc-foot { color: var(--text-dim); }

.obj-backend-config .bc-note.ok { color: var(--accent-2); }

.obj-backend-config .bc-note.err, .obj-backend-config .bc-err { color: var(--danger); }

.obj-backend-config .bc-note.warn { color: var(--warn); }

.obj-backend-config .bc-blocked { border: 1px dashed var(--border-light); border-radius: var(--radius-sm); padding: 12px; color: var(--warn); font-size: 12.5px; }

.obj-backend-config .bc-run { min-height: 40px; width: 100%; font-size: 12px; letter-spacing: 1px; margin-bottom: 8px; }

.obj-backend-config .bc-foot { margin-top: 12px; font-size: 11px; }

/* ── audio-flow (#110): bedradingsdiagram van de audio-pipeline ─────────── */
/* ── Generieke huisstijl-pulldown `.sel` (#124 / F5.4b) ─────────────────────
   Gegeneraliseerd uit de uur-keuze van local-tracking (lt-hour). Alleen
   tokens — geen vaste kleuren — zodat thema/modus-wissel klopt. */
.sel { position: relative; }
.sel-btn {
  min-height: 38px; min-width: 196px; border-radius: var(--radius-sm); border: 1px solid var(--border-light);
  background: linear-gradient(180deg, var(--surface-sheen), transparent 70%), var(--surface-2);
  color: var(--text); font: inherit; font-size: 13px; font-weight: 700; padding: 0 12px;
  display: inline-flex; align-items: center; gap: 8px; cursor: pointer; text-align: left;
  box-shadow: var(--bevel), var(--elev-1);
  transition: transform .14s ease, border-color .14s ease, box-shadow .14s ease;
}
.sel-btn:hover { transform: translateY(-1px); border-color: rgba(var(--accent-rgb), .45); }
.sel-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.sel.open > .sel-btn { border-color: rgba(var(--accent-rgb), .55); }
.sel-val { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sel-arrow { font-style: normal; font-size: 11px; color: var(--text-dim); margin-left: auto; transition: transform .14s ease; }
.sel.open > .sel-btn .sel-arrow { transform: rotate(180deg); }
.sel-list {
  position: absolute; z-index: 30; top: calc(100% + 6px); left: 0; min-width: 100%; max-width: 420px;
  display: flex; flex-direction: column; gap: 2px; padding: 6px;
  border-radius: var(--radius-sm); border: 1px solid var(--border-light);
  background: linear-gradient(180deg, var(--surface-sheen), transparent 40%), var(--surface-2);
  box-shadow: var(--elev-3); max-height: 320px; overflow: auto;
  animation: sel-open .15s ease;
}
@keyframes sel-open { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.sel-opt {
  display: flex; align-items: baseline; gap: 8px; width: 100%; text-align: left;
  padding: 8px 10px; border-radius: 7px; border: 1px solid transparent; background: transparent;
  color: var(--text); font: inherit; font-size: 13px; cursor: pointer; white-space: nowrap;
  transition: background-color .1s ease, border-color .1s ease;
}
.sel-opt:hover { background: rgba(var(--accent-rgb), .10); border-color: rgba(var(--accent-rgb), .3); }
.sel-opt:focus-visible { outline: 2px solid var(--accent); outline-offset: -1px; }
.sel-opt.sel-cur { border-color: rgba(var(--accent-rgb), .55); color: var(--accent); }
.sel-empty { padding: 8px 10px; color: var(--text-dim); font-size: 12px; }




@keyframes af-flow { to { stroke-dashoffset: -14; } }


@keyframes af-blink { 50% { opacity: .55; } }

/* ═══════════════════════════════════════════════════════════════════════════
   FLOW als grid van kaarten (#126) — gedeelde bouwstenen `fl-*`, keten
   `fc-*`, bronnen/uitgangen `fs-*`, talk `ft-*`, apparaten `fd-*`,
   stiltewacht `fz-*`, gebeurtenissen `fe-*`. Alleen tokens.
   ═══════════════════════════════════════════════════════════════════════ */
.fl-meter { display: inline-block; width: 100%; max-width: 160px; height: 6px; border-radius: 3px; background: var(--surface-deep); border: 1px solid var(--border); overflow: hidden; vertical-align: middle; }
.fl-meter > i { display: block; height: 100%; background: linear-gradient(90deg, var(--accent-2), var(--ok)); transition: width .12s linear; }
.fl-meter-silent > i { background: var(--text-dim); }
.fl-meter-alarm > i { background: var(--danger); }
.fl-listen { min-height: 36px; padding: 0 12px; font-size: 12px; }
.fl-listen-sm { min-height: 30px; min-width: 30px; padding: 0 8px; font-size: 12px; }
.fl-listen-on { border-color: var(--accent); color: var(--accent); }
.fl-act { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.fl-act .obj-btn { min-height: 34px; padding: 0 12px; font-size: 11.5px; letter-spacing: .06em; }
.fl-act .fl-danger { border-color: var(--danger); color: var(--danger); }
.fl-act-ask { padding: 6px 8px; border-radius: 8px; border: 1px dashed var(--danger); }
.fl-ask { font-size: 12px; color: var(--danger); font-weight: 700; }
.fl-yes { border-color: var(--danger) !important; color: var(--danger) !important; }
.fl-hint { font-size: 11.5px; line-height: 1.35; }
.fl-btn-sm { min-height: 28px; padding: 0 10px; font-size: 11px; }
.fl-result { font-size: 12px; padding: 6px 10px; border-radius: 8px; border: 1px solid var(--border-light); margin-top: 6px; }
.fl-result-ok { color: var(--ok); border-color: var(--ok); }
.fl-result-err { color: var(--danger); border-color: var(--danger); }
.fl-selrow { display: grid; grid-template-columns: 120px 1fr; align-items: center; gap: 10px; margin-bottom: 8px; }
.fl-selrow .sel-btn { width: 100%; min-width: 0; min-height: 36px; font-size: 12.5px; }
.fl-selbus { font-size: 10px; letter-spacing: .1em; color: var(--text-dim); text-transform: uppercase; }

/* Signaalketen */
.obj-flow-chain .fc-wrap { position: relative; flex: 1; min-height: 0; overflow: auto; }
.obj-flow-chain .fc-edges { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 0; }
.obj-flow-chain .fc-grid { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: 56px; column-gap: 56px; row-gap: 0; padding: 4px 2px; }
.obj-flow-chain .fc-node {
  grid-row: calc(var(--row) * 2 + 1) / span 2; align-self: start; margin-bottom: 8px;
  padding: 8px 10px; border-radius: 12px; border: 1px solid var(--border-light); cursor: default;
  background: linear-gradient(168deg, rgba(255,255,255,.05), rgba(255,255,255,.008) 46%, rgba(0,0,0,.1)), var(--surface-deep);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 3px 8px -4px rgba(0,0,0,.45);
  display: flex; flex-direction: column; gap: 3px; min-height: 96px; transition: border-color .15s ease, box-shadow .15s ease;
}
.obj-flow-chain .fc-node:hover { border-color: rgba(var(--accent-rgb), .45); }
.obj-flow-chain .fc-node:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.obj-flow-chain .fc-on { border-color: rgba(var(--accent2-rgb), .55); box-shadow: 0 0 0 1px rgba(var(--accent2-rgb), .25), 0 6px 18px -8px rgba(var(--accent2-rgb), .5); }
.obj-flow-chain .fc-alarm { border-color: var(--danger); }
.obj-flow-chain .fc-kind-switch, .obj-flow-chain .fc-kind-processor { border-style: dashed; }
.obj-flow-chain .fc-dragging { opacity: .8; cursor: grabbing; border-style: dashed; border-color: var(--accent); }
.obj-flow-chain .fc-head { display: flex; justify-content: space-between; align-items: center; gap: 6px; }
.obj-flow-chain .fc-label { font-weight: 800; letter-spacing: .04em; font-size: 13px; }
.obj-flow-chain .fc-sub { font-size: 11px; }
.obj-flow-chain .fc-row { display: grid; grid-template-columns: 1fr auto auto; gap: 8px; align-items: center; margin-top: auto; }
.obj-flow-chain .fc-db { font-size: 10.5px; min-width: 42px; text-align: right; }
.obj-flow-chain .fc-mount { font-size: 10px; }
.obj-flow-chain .fc-edge { fill: none; stroke: var(--border-light); stroke-width: 2; }
.obj-flow-chain .fc-edge-override, .obj-flow-chain .fc-edge-mix { stroke: var(--accent-2); opacity: .55; }
.obj-flow-chain .fc-edge-mount { stroke-dasharray: 3 4; }
.obj-flow-chain .fc-edge-active { stroke: var(--ok); stroke-width: 2.5; opacity: 1; stroke-dasharray: 6 8; animation: af-flow 1.2s linear infinite; }
@media (prefers-reduced-motion: reduce) { .obj-flow-chain .fc-edge-active { animation: none; stroke-dasharray: none; } }
.obj-flow-chain .fc-foot { margin-top: 6px; min-height: 0; }

/* Bronnen / uitgangen */
.obj-flow-sources .fs-list, .obj-flow-outputs .fs-list { display: flex; flex-direction: column; gap: 6px; flex: 1; min-height: 0; overflow: auto; }
.fs-row {
  display: grid; grid-template-columns: minmax(150px, 1.2fr) minmax(120px, 1fr) auto minmax(0, 1.6fr); gap: 10px; align-items: center;
  padding: 8px 10px; border-radius: 10px; border: 1px solid rgba(255,255,255,.06);
  background: linear-gradient(168deg, rgba(255,255,255,.05), rgba(255,255,255,.008) 46%, rgba(0,0,0,.1)), var(--surface-deep);
}
.fs-row.fs-on { border-color: rgba(var(--accent2-rgb), .45); }
.fs-row.fs-alarm { border-color: var(--danger); }
.fs-name { font-weight: 800; letter-spacing: .04em; font-size: 13px; display: flex; flex-direction: column; }
.fs-sub { font-size: 11px; font-weight: 400; letter-spacing: 0; }
.fs-chips { display: flex; gap: 4px; flex-wrap: wrap; margin-top: 4px; }
.fs-meter { display: flex; align-items: center; gap: 8px; }
.fs-db { font-size: 10.5px; min-width: 40px; text-align: right; }
.fs-actions { display: flex; flex-direction: column; gap: 4px; }
.fs-foot { margin-top: 6px; }
@media (max-width: 1100px) { .fs-row { grid-template-columns: 1fr 1fr; } .fs-actions { grid-column: 1 / -1; } }

/* Talk */
.obj-flow-talk .ft-ctl { display: grid; grid-template-columns: auto 1fr; gap: 12px; align-items: center; margin: 6px 0; }
.obj-flow-talk .ft-btn { min-height: 48px; padding: 0 18px; font-weight: 800; letter-spacing: .08em; }
.obj-flow-talk .ft-live { border-color: var(--danger); color: var(--danger); animation: af-blink 1.4s ease-in-out infinite; }
.obj-flow-talk .ft-vu { max-width: none; height: 8px; }

/* Stiltewacht */
.obj-flow-silence { transition: border-color .2s ease, box-shadow .2s ease; }
.obj-flow-silence.fz-alarm { border-color: var(--danger); box-shadow: 0 0 0 1px var(--danger), 0 0 24px rgba(0,0,0,.3); }
.obj-flow-silence.fz-warn { border-color: var(--warn); }
.obj-flow-silence .fz { display: flex; flex-direction: column; gap: 2px; justify-content: center; min-height: 36px; }
.obj-flow-silence .fz-big { font-size: 22px; font-weight: 900; letter-spacing: .12em; color: var(--danger); animation: af-blink 1.2s ease-in-out infinite; }
.obj-flow-silence .fz-why { font-size: 12px; color: var(--text-dim); }
.obj-flow-silence .fz-mid { font-size: 14px; font-weight: 700; color: var(--warn); }
.obj-flow-silence .fz-okline { display: flex; gap: 10px; align-items: center; font-size: 12px; }

/* Gebeurtenissen */
.obj-flow-events .fe-list { display: flex; flex-direction: column; gap: 4px; flex: 1; min-height: 0; overflow: auto; }
.obj-flow-events .fe-row { display: grid; grid-template-columns: auto 1fr; gap: 8px; align-items: center; font-size: 12px; padding: 3px 0; border-bottom: 1px solid var(--border); }
.obj-flow-events .fe-hook { margin-top: 8px; font-size: 11.5px; }
.obj-flow-events .fe-hook summary { cursor: pointer; color: var(--text-dim); letter-spacing: .08em; text-transform: uppercase; font-size: 10px; }
.obj-flow-events .fe-hookrow { padding: 4px 0; line-height: 1.4; }

.fl-layer { min-height: 34px; border-radius: 8px; border: 1px solid var(--border-light); background: var(--surface-2); color: var(--text); font: inherit; font-size: 12px; padding: 0 8px; }

/* OBJECTEN-index: standalone eerst + pagina-chips (#objects-groep) */
.obj-index .obj-idx-in { display: inline-flex; flex-direction: row; min-height: 0; color: var(--accent); font-size: 10px; text-decoration: none; padding: 1px 6px; border: 1px solid rgba(var(--accent-rgb), .35); border-radius: 6px; background: none; }
.obj-index .obj-idx-in:hover { background: rgba(var(--accent-rgb), .12); border-color: rgba(var(--accent-rgb), .35); }
.obj-index .obj-idx-places { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }

/* ── Import-object (#172) — admin-importpariteit via orchestrator-chain ──── */
.obj-importer .im-form { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
.obj-importer .im-f { display: flex; flex-direction: column; gap: 3px; min-width: 130px; }
.obj-importer .im-f > span:first-child { font-size: 10.5px; letter-spacing: 1px; text-transform: uppercase; color: var(--text-dim); }
.obj-importer .im-f .input { width: 100%; }
.obj-importer .im-labelrow { display: flex; gap: 4px; }
.obj-importer .im-labelrow .im-newlabel { flex: 1; }
.obj-importer .im-check { flex-direction: row; align-items: center; gap: 8px; align-self: end; padding-bottom: 6px; }
.obj-importer .im-check span { font-size: 12.5px; color: var(--text-dim); text-transform: none; letter-spacing: 0; }
.obj-importer .im-check input { width: 18px; height: 18px; accent-color: var(--accent); }

.obj-importer .im-drop { border: 1.5px dashed var(--border-light); border-radius: 12px; padding: 18px; text-align: center; cursor: pointer; background: var(--surface-deep); transition: border-color .15s, background .15s; }
.obj-importer .im-drop:hover, .obj-importer .im-drop.drag { border-color: var(--accent); background: rgba(var(--accent-rgb, 79 206 243), .07); }
.obj-importer .im-drop-in b { display: block; font-size: 14.5px; }
.obj-importer .im-drop-in .dim { font-size: 12px; }

.obj-importer .im-list { list-style: none; margin: 10px 0 0; padding: 0; flex: 1; min-height: 0; overflow: auto; display: flex; flex-direction: column; gap: 3px; max-height: 26vh; }
.obj-standalone-host .obj-importer .im-list { max-height: none; }
.obj-importer .im-row { display: grid; grid-template-columns: 1fr 64px 92px 1fr 24px; gap: 8px; align-items: center; padding: 5px 8px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface-2); font-size: 12.5px; }
.obj-importer .im-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.obj-importer .im-size { font-size: 11px; font-variant-numeric: tabular-nums; }
.obj-importer .im-st { font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.obj-importer .im-st-busy { color: var(--accent); }
.obj-importer .im-st-ok { color: var(--ok); }
.obj-importer .im-st-warn { color: var(--warn); }
.obj-importer .im-st-bad { color: var(--danger); }
.obj-importer .im-note { font-size: 11px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.obj-importer .im-rm { border: none; background: none; color: var(--text-dim); font-size: 16px; cursor: pointer; line-height: 1; padding: 2px 6px; border-radius: 6px; }
.obj-importer .im-rm:hover { color: var(--danger); background: rgba(255, 107, 107, .12); }

.obj-importer .im-foot { display: flex; align-items: center; gap: 8px; margin-top: 10px; }
.obj-importer .im-btn { border: 1px solid var(--border-light); background: var(--surface-2); color: var(--text); border-radius: 9px; padding: 8px 14px; font-size: 13px; font-weight: 700; cursor: pointer; min-height: 38px; }
.obj-importer .im-btn:disabled { opacity: .45; cursor: default; }
.obj-importer .im-btn-primary { background: var(--accent-grad); border-color: transparent; color: var(--on-accent); }
.obj-importer .im-sum { margin-left: auto; font-size: 12px; font-variant-numeric: tabular-nums; }

.obj-importer .im-hist { margin-top: 8px; font-size: 11px; display: flex; flex-wrap: wrap; gap: 6px; }
.obj-importer .im-h { padding: 1px 6px; border: 1px solid var(--border); border-radius: 5px; }
.obj-importer .im-h-done { color: var(--ok); }
.obj-importer .im-h-rejected { color: var(--danger); }
.obj-importer .im-h-skipped_exists { color: var(--warn); }
/* #177: mislukte imports + retry */
.obj-importer .im-failed { margin-top: 8px; }
.obj-importer .im-failed-h { font-size: 11px; font-weight: 700; color: var(--danger); margin-bottom: 4px; }
.obj-importer .im-failed-h .dim { font-weight: 400; }
.obj-importer .im-failed-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 3px; max-height: 18vh; overflow: auto; }
.obj-importer .im-frow { display: grid; grid-template-columns: 1fr 1fr 74px; gap: 8px; align-items: center; padding: 4px 8px; border: 1px solid var(--danger); border-radius: 8px; background: var(--surface-2); font-size: 12px; }
.obj-importer .im-retry { padding: 3px 8px; min-height: 26px; font-size: 11.5px; }