/* ============================================================================
   narrowcasting.css — module Narrowcasting v0.2 (CMS + slide-ontwerper).
   Uitsluitend kern-tokens (R24); de afspeelcontent zelf (previews, canvas)
   volgt cast.css. De ontwerper hergebruikt de ce-*-klassen van de Card
   Editor (kaarten.css) voor een identieke look & feel; hieronder alleen wat
   daar nog niet bestond.
   ============================================================================ */

/* themastaal in het CMS (stond eerst in app.css-stijl bij de module) */
.nc-staal{display:inline-flex;align-items:center;justify-content:center;width:56px;height:32px;
  border-radius:8px;border:1px solid var(--color-border);font-weight:700;font-size:13px}

/* slide-preview (dialoog en rijen): 16:9-vlak dat cast.css schaalt via em */
.nc-preview{position:relative;width:100%;aspect-ratio:16/9;border-radius:10px;overflow:hidden;
  border:1px solid var(--color-border);background:#000}
.nc-preview .cast-slide{position:absolute;inset:0}
.nc-preview-dialoog{max-width:860px}

/* ── slide-ontwerper ── */
.nc-ontwerp{display:grid;grid-template-columns:1fr 292px;gap:12px;align-items:start}
.nc-ontwerp-links{min-width:0}
.nc-werkbalk{display:flex;flex-wrap:wrap;gap:4px;align-items:center;background:var(--color-surface);
  border:1.5px solid var(--color-border);border-radius:10px;padding:5px 8px;margin-bottom:8px}
.nc-werkbalk .scheiding{width:1px;align-self:stretch;background:var(--color-border);margin:0 4px}
.nc-werkbalk select{background:var(--color-background);border:1px solid var(--color-border);
  border-radius:7px;color:var(--color-text);font:inherit;font-size:12px;padding:3px 6px;max-width:150px}
.nc-werkbalk input[type=color]{width:30px;height:26px;padding:1px;border:1px solid var(--color-border);
  border-radius:7px;background:var(--color-background)}
.nc-werkbalk .wb-label{font-size:10.5px;color:var(--color-text-muted)}

/* canvas: 16:9, cast.css rendert erin; de overlay tekent selectie/handles */
.nc-canvaswrap{position:relative;width:100%;aspect-ratio:16/9;border-radius:10px;overflow:hidden;
  border:1.5px solid var(--color-border);background:#000;box-shadow:0 6px 22px rgba(0,0,0,.25);
  user-select:none}
.nc-canvas{position:absolute;inset:0}
.nc-canvas .el{cursor:move}
.nc-overlay{position:absolute;inset:0;pointer-events:none}
.nc-overlay .raster{position:absolute;inset:0;
  background-image:linear-gradient(to right,rgba(255,255,255,.07) 1px,transparent 1px),
                   linear-gradient(to bottom,rgba(255,255,255,.07) 1px,transparent 1px);
  background-size:5% 5%}
.nc-selectie{position:absolute;border:1.5px dashed var(--color-primary);pointer-events:none;
  box-shadow:0 0 0 1px rgba(0,0,0,.35)}
.nc-handle{position:absolute;width:11px;height:11px;border-radius:3px;background:var(--color-primary);
  border:1.5px solid #fff;pointer-events:auto;box-shadow:0 1px 4px rgba(0,0,0,.5)}
.nc-handle.lb{left:-6px;top:-6px;cursor:nwse-resize}
.nc-handle.rb{right:-6px;top:-6px;cursor:nesw-resize}
.nc-handle.lo{left:-6px;bottom:-6px;cursor:nesw-resize}
.nc-handle.ro{right:-6px;bottom:-6px;cursor:nwse-resize}

/* elementenlijst (volgorde/z-index) in het rechterpaneel */
.nc-lagen{display:flex;flex-direction:column;gap:3px;padding:2px}
.nc-laag{display:flex;align-items:center;gap:7px;border:1.5px solid var(--color-border);border-radius:8px;
  padding:5px 8px;background:var(--color-background);color:var(--color-text);cursor:pointer;
  font-size:11.5px;font-family:inherit;text-align:left}
.nc-laag.aan{border-color:var(--color-primary);background:color-mix(in srgb,var(--color-primary) 14%,transparent)}
.nc-laag .soort{font-size:10px;color:var(--color-text-muted);margin-left:auto}

/* merkkleuren (Brand Kit, huisstijl-handhaving) */
.nc-kleurvak{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.nc-swatches{display:flex;gap:4px;flex-wrap:wrap}
.nc-swatch{width:20px;height:20px;border-radius:6px;border:1.5px solid var(--color-border);
  cursor:pointer;padding:0}
.nc-swatch.aan{outline:2px solid var(--color-primary);outline-offset:1px}
.nc-kleurmenu summary{display:inline-flex;align-items:center;gap:6px}
.nc-kleurmenu .mf-lijst{min-width:150px;display:flex;flex-direction:column;gap:8px}
.nc-staaltje{display:inline-block;width:14px;height:14px;border-radius:4px;
  border:1px solid var(--color-border);vertical-align:-2px}
.nc-werkbalk #wb-naam{background:var(--color-background);border:1px solid var(--color-border);
  border-radius:7px;color:var(--color-text);font:inherit;font-size:12px;padding:4px 8px;width:180px}

/* planning: weekdag-vinkjes in het slide-dialoog */
.nc-dagen{display:flex;gap:4px;flex-wrap:wrap}
.nc-dagen .vinkrij{padding:5px 8px}

/* zone-indeling (split screen): schets in het schermdialoog */
.nc-zonevlak{position:relative;display:inline-block;width:128px;aspect-ratio:16/9;
  border:1.5px solid var(--color-border);border-radius:6px;background:var(--color-background);overflow:hidden}
.nc-zone{position:absolute;display:flex;align-items:center;justify-content:center;
  border:1px solid var(--color-primary);background:color-mix(in srgb,var(--color-primary) 16%,transparent);
  color:var(--color-text);font-size:11px;font-weight:700;box-sizing:border-box}
.nc-schetsveld label{display:block;margin-bottom:4px}

/* berichtenlijst: prioriteitsstip */
.nc-prio{display:inline-block;width:9px;height:9px;border-radius:50%;background:var(--color-text-dim);margin-right:6px}
.nc-prio.belangrijk{background:var(--color-danger)}

@media(max-width:1020px){.nc-ontwerp{grid-template-columns:1fr}}