/* stap 4: Dashboard (ronde 2, pakket D). Alleen de agent van het dashboard schrijft hier; tokens uit css/tokens.css, patronen uit css/studio.css.
   Presets als tabbladen, twee vrij in te delen kolommen met een gouden sleeplijn, modules die zich naar hun kolom voegen (container query),
   grote startknop, tegel- of lijstweergave per module, sorteerbare tabellen, Aandacht als regels met een knop. */

/* ---------- presets ---------- */
.dash-presets{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:-4px}
.dash-presets .tabs2{flex:none;border-bottom:0;gap:2px;background:var(--n50);border:1px solid var(--n200);border-radius:var(--r2);padding:3px}
.dash-presets .tabs2 button{padding:5px 12px;border-radius:var(--r);border-bottom:0;margin:0;color:var(--n700)}
.dash-presets .tabs2 button:hover{background:var(--n100);color:var(--n900)}
.dash-presets .tabs2 button.on{background:var(--n0);color:var(--plum);box-shadow:0 1px 2px rgba(20,10,40,.08),inset 0 0 0 1px var(--gold)}
.dash-presets-uitleg{flex:1;min-width:220px}

/* ---------- raster: twee kolommen, elke module zo breed als zijn kolom ---------- */
.dash-grid{display:flex;flex-direction:column;gap:10px}
.dash-kolommen{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;align-items:start}
.dash-kolom{display:flex;flex-direction:column;gap:12px;min-width:0;border-radius:var(--r2);position:relative}
body.dash-sleept .dash-kolom{min-height:140px;outline:1px dashed var(--n300);outline-offset:4px}
body.dash-sleept .dash-kolom:empty::before{content:"Sleep hierheen";position:absolute;inset:0;display:grid;place-items:center;color:var(--n500);font-size:14px}
.dash-kolom.dash-doel{outline:2px dashed var(--plum);outline-offset:4px;background:var(--plum-50)}
.dash-drop{height:4px;border-radius:2px;background:var(--gold);margin:-4px 0;pointer-events:none;flex:none;box-shadow:0 0 0 2px var(--n0)}
.dash-mod{min-width:0;position:relative;container-type:inline-size}
.dash-mod>h2{justify-content:flex-start;gap:8px;margin-bottom:8px;cursor:grab;user-select:none;min-height:28px}
.dash-mod>h2:active{cursor:grabbing}
.dash-mod>h2 .dash-titel{white-space:nowrap}
.dash-mod>h2 .dash-tel{font-size:14px;white-space:nowrap}
.dash-mod>h2 .dash-tools{margin-left:auto;display:flex;align-items:center;gap:6px}
.dash-grip{color:var(--n400);display:inline-grid;place-items:center;width:24px;height:24px;border-radius:3px;flex:none}
.dash-mod>h2:hover .dash-grip,.dash-rij:hover .dash-grip{color:var(--n700);background:var(--n100)}
.dash-mod.sleept,.dash-rij.sleept{opacity:.4}
.dash-body{display:flex;flex-direction:column;gap:8px;min-width:0}
.dash-body h3{margin:0}
.viewtog.klein button{padding:0 8px;height:28px;display:inline-flex;align-items:center}
.viewtog.klein button .ic{width:20px;height:20px}
/* pijlen in de kop: zichtbaar bij hover of focus in de module, altijd bereikbaar met Tab */
.dash-pijlen{display:inline-flex;gap:2px}
.dash-mod>h2 .dash-pijlen{opacity:0;transition:opacity .12s}
.dash-mod:hover>h2 .dash-pijlen,.dash-mod:focus-within>h2 .dash-pijlen{opacity:1}
.dash-pijlen .btn{width:28px;min-width:28px;height:28px;padding:0;justify-content:center}
.dash-pijlen .btn[disabled]{opacity:.35}

/* ---------- Start: een knop ---------- */
.dash-start{display:flex;flex-direction:column;gap:10px}
.dash-start-knop{height:auto;min-height:60px;width:100%;justify-content:center;gap:14px;padding:10px 18px;font-size:18px;font-weight:600;border-radius:var(--r2);text-align:left;white-space:normal;line-height:1.25}
.dash-start-knop .ic{width:28px;height:28px;flex:none}
.dash-start-knop>span{display:flex;flex-direction:column;gap:2px;min-width:0}
.dash-start-knop small{font-size:14px;font-weight:400;opacity:.85;line-height:1.3}
.dash-start-feiten{display:flex;gap:14px;flex-wrap:wrap;font-size:14px;color:var(--n700)}
.dash-start-feiten span{display:inline-flex;align-items:center;gap:5px}
.dash-start-feiten .ic{width:20px;height:20px;color:var(--n500)}
.dash-start-feiten .dash-warn .ic{color:var(--warn)}
.dash-start-feiten .dash-err .ic{color:var(--err)}

/* ---------- tegels, kv, tabellen, knoppen ---------- */
.dash-tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(118px,1fr));gap:8px}
.dash-tiles .tile{padding:8px 10px;min-width:0}
.dash-tiles div.tile.stil{cursor:default}
.dash-tiles .tile .n{font-size:26px}
.dash-tiles .tile .n .note{font-size:14px}
.dash-tiles .tile .l{line-height:1.25}
.dash-tiles .tile .d{display:block;line-height:1.3;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.dash-tbl td{white-space:nowrap}
.dash-tbl td.wrap{white-space:normal;min-width:140px}
.dash-tbl td.wrap.mono{min-width:96px}
.dash-tbl tr.on td{background:var(--plum-50)}
table.dash-kort tbody tr:nth-child(n+6){display:none}
.dash-toon{display:flex;justify-content:flex-start;margin-top:-2px}
.dash-kv{grid-template-columns:120px 1fr}
.dash-kv dd .note{font-family:var(--font-tekst)}
.dash-warn{color:var(--warn)}
.dash-err{color:var(--err)}
.dash-knoppen{display:flex;gap:6px;flex-wrap:wrap;align-items:center;margin-top:2px}
.dash-ev{display:flex;align-items:center;gap:10px;justify-content:space-between}
.dash-ev>div{min-width:0}
.dash-ev b{display:block;font-size:15px}
.dash-ev .note{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dash-geen{margin:0}
.dash-checks{display:flex;gap:10px;flex-wrap:wrap;font-size:14px;color:var(--n700)}
.dash-checks span{display:inline-flex;align-items:center;gap:4px;white-space:nowrap}
.dash-checks span .ic{width:20px;height:20px}
.dash-checks .ok .ic{color:var(--ok)}
.dash-checks .mis{color:var(--err)}
.dash-checks.ikonen{gap:3px}
.dash-checks.ikonen span{width:20px;height:20px;justify-content:center;border-radius:4px;background:var(--ok-100)}
.dash-checks.ikonen span.mis{background:var(--err-100)}
.dash-bars{height:70px;padding-top:6px}
.bars.dash-bars{margin-bottom:18px}
.dash-bars-groot{height:130px}
.bars.dash-bars-groot{margin-bottom:20px}
.dash-meter{display:flex;align-items:center;gap:8px;justify-content:flex-end}
.dash-meter .meter{width:72px}
.dash-meer summary{cursor:pointer;font-size:14px;color:var(--plum);padding:6px 0 2px;list-style:none}
.dash-meer summary::before{content:"";display:inline-block;width:0;height:0;border-left:5px solid var(--n500);border-top:4px solid transparent;border-bottom:4px solid transparent;margin-right:6px;transition:transform .15s}
.dash-meer[open] summary::before{transform:rotate(90deg)}

/* ---------- Aandacht: regels met een knop ---------- */
.dash-regels{display:flex;flex-direction:column;gap:6px}
.dash-regel{display:grid;grid-template-columns:16px minmax(0,1fr) auto;gap:10px;align-items:center;padding:6px 10px;border-radius:var(--r);background:var(--n50);border:1px solid var(--n200);font-size:15px;color:var(--n900)}
.dash-regel .ic{margin-top:0;color:var(--n500)}
.dash-regel .wat{min-width:0;line-height:1.35}
.dash-regel .wat small{display:block;color:var(--n500);font-size:14px;margin-top:1px}
.dash-regel.err{background:var(--err-100);border-color:transparent}
.dash-regel.err .ic{color:var(--err)}
.dash-regel.warn{background:var(--warn-100);border-color:transparent}
.dash-regel.warn .ic{color:var(--warn)}
.dash-regel.info .ic{color:var(--info)}
.dash-regel.ok{color:var(--ok)}
.dash-regel.ok .ic{color:var(--ok)}
.dash-regels.tegels{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr))}
.dash-regels.tegels .dash-regel{grid-template-columns:16px minmax(0,1fr);grid-template-rows:auto auto;align-items:start;padding:8px 10px}
.dash-regels.tegels .dash-regel .btn{grid-column:2;justify-self:start;margin-top:2px}

/* ---------- klanten en events als kaarten ---------- */
.dash-klanten{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:8px}
.dash-klant{border:1px solid var(--n200);border-radius:var(--r2);padding:9px 11px;display:flex;flex-direction:column;gap:5px;font-size:14px;min-width:0;background:var(--n0)}
.dash-klant.act{border-color:var(--plum);box-shadow:inset 0 0 0 1px var(--plum)}
.dash-klant .kop{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.dash-klant .kop b{font-size:15px;margin-right:auto}
.dash-klant .regel{display:flex;align-items:center;gap:6px;color:var(--n700);min-width:0}
.dash-klant .regel>.ic{color:var(--n500)}
.dash-klant .regel>span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dash-klant .regel.dash-warn,.dash-klant .regel.dash-warn>.ic{color:var(--warn)}
.dash-klant .dash-knoppen{margin-top:4px}

/* ---------- paneel: Dashboard indelen ---------- */
.dash-indeling{display:flex;flex-direction:column;gap:12px}
.dash-indeling>p{margin:0}
.dash-rijen{display:flex;flex-direction:column;gap:4px;padding:6px;border:1px dashed transparent;border-radius:var(--r2);min-height:44px;position:relative}
.dash-rijen h3{margin:0 0 2px}
body.dash-sleept .dash-rijen{border-color:var(--n300)}
.dash-rijen.dash-doel{border-color:var(--plum);background:var(--plum-50)}
.dash-rijen-leeg{margin:0;padding:4px}
.dash-rij{display:grid;grid-template-columns:24px 20px minmax(0,1fr) auto auto;gap:8px;align-items:center;padding:6px 8px;border:1px solid var(--n200);border-radius:var(--r);background:var(--n0);cursor:grab}
.dash-rij:active{cursor:grabbing}
.dash-rij.uit{background:var(--n50)}
.dash-rij.uit .dash-rij-t{opacity:.6}
.dash-rij .vink{border:0;background:none;padding:0;cursor:pointer;display:inline-grid;place-items:center;width:20px;height:28px}
.dash-rij-t{min-width:0;display:flex;flex-direction:column;gap:1px}
.dash-rij-t b{font-size:15px}
.dash-rij-t small{color:var(--n500);font-size:13px;line-height:1.3;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.dash-rijen .dash-pijlen{min-width:90px;justify-content:flex-end}

/* ---------- een module in een smalle kolom: minder kolommen in tabellen, kleinere tegels ---------- */
@container (max-width:620px){
  .dash-mod .smal-weg{display:none}
  .dash-kv{grid-template-columns:104px 1fr}
  .dash-tiles{grid-template-columns:repeat(auto-fit,minmax(104px,1fr))}
  .dash-tiles .tile .n{font-size:22px}
  .dash-klanten{grid-template-columns:repeat(auto-fill,minmax(200px,1fr))}
  .dash-regels.tegels{grid-template-columns:repeat(auto-fill,minmax(180px,1fr))}
  .dash-start-knop{font-size:16px;gap:10px}
  .dash-mod>h2 .dash-tel{display:none}
}

/* ---------- smal scherm en print ---------- */
@media (max-width:1100px){
  .dash-kolommen{grid-template-columns:minmax(0,1fr)}
  .dash-mod>h2 .dash-pijlen{opacity:1}
  body.dash-sleept .dash-kolom:empty{min-height:80px}
}
@media print{.dash-grip,.dash-tools,.dash-knoppen,.dash-presets,.dash-toon{display:none!important}.dash-mod{break-inside:avoid}table.dash-kort tbody tr{display:table-row}}

/* ---------- v5 (pakket V): het dashboard ademt. 32 px tussen modules, kleur alleen in iconen en statuspunten ---------- */
.dash-presets{gap:20px;margin-top:0}
.dash-presets .tabs2{background:var(--n0);border-color:var(--lijn-zacht);padding:4px;gap:4px;border-radius:var(--r2)}
.dash-presets .tabs2 button{height:var(--v5-tik);padding:0 18px;font-size:15px}
.dash-presets .tabs2 button.on{background:var(--plum-50);box-shadow:inset 0 0 0 1px var(--gold)}
.dash-grid{gap:var(--blok)}
.dash-kolommen,.dash-kolom{gap:var(--blok)}
.dash-mod>h2{gap:12px;margin-bottom:20px;min-height:var(--v5-tik)}
.dash-grip{width:32px;height:32px;color:var(--n300)}
.dash-grip .ic,.dash-mod>h2 .dash-grip svg.ic{width:20px;height:20px}
.dash-body{gap:16px}
.dash-pijlen{gap:4px}
.dash-pijlen .btn{width:var(--v5-tik);min-width:var(--v5-tik);height:var(--v5-tik)}
.viewtog.klein button{height:var(--v5-tik);padding:0 12px}
.viewtog.klein button .ic{width:20px;height:20px}
.dash-start{gap:16px}
.dash-start-knop{min-height:76px;gap:16px;padding:14px 24px;font-size:18px}
.dash-start-knop svg.ic{width:var(--v5-icoon);height:var(--v5-icoon)}
.dash-start-knop small{font-size:14px}
.dash-start-feiten{gap:20px;font-size:15px}
.dash-start-feiten .ic{width:20px;height:20px}
.dash-tiles{grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:16px}
.dash-tiles .tile{padding:16px 18px}
.dash-tiles .tile .n{font-size:30px}
.dash-knoppen{gap:12px;margin-top:4px}
.dash-ev{gap:16px}
.dash-ev b{font-size:16px}
.dash-checks{gap:14px;font-size:14px}
.dash-checks span .ic{width:18px;height:18px}
.dash-checks.ikonen{gap:6px}
.dash-checks.ikonen span{width:28px;height:28px}
.dash-bars{height:96px}
.dash-bars-groot{height:160px}
.dash-meter .meter{width:96px}
.dash-meer summary{font-size:15px;min-height:var(--v5-tik);display:flex;align-items:center}
/* Aandacht: een rustige regel per punt; de status zit in het icoon, niet in een gekleurd vlak */
.dash-regels{gap:4px}
.dash-regel{grid-template-columns:24px minmax(0,1fr) auto;gap:16px;padding:14px 4px 14px 0;border:0;border-bottom:1px solid var(--lijn-zacht);border-radius:0;background:none;font-size:15px}
.dash-regel:last-child{border-bottom:0}
.dash-regel .ic{width:22px;height:22px}
.dash-regel .wat small{font-size:14px;margin-top:4px}
.dash-regel.err,.dash-regel.warn{background:none;border-color:var(--lijn-zacht)}
.dash-regels.tegels{gap:16px}
.dash-regels.tegels .dash-regel{grid-template-columns:24px minmax(0,1fr);padding:16px;border:1px solid var(--lijn-zacht);border-radius:var(--r2)}
.dash-klanten{grid-template-columns:repeat(auto-fill,minmax(var(--v5-tegel-min),1fr));gap:16px}
.dash-klant{padding:18px 20px;gap:8px;font-size:15px;border-color:var(--lijn-zacht);border-radius:var(--r2)}
.dash-klant .kop b{font-size:16px}
.dash-indeling{gap:20px}
.dash-rijen{gap:8px}
.dash-rij{grid-template-columns:32px 28px minmax(0,1fr) auto auto;gap:12px;padding:8px 12px;border-color:var(--lijn-zacht)}
.dash-rij .vink{width:28px;height:var(--v5-tik)}
@container (max-width:620px){
  .dash-tiles{grid-template-columns:repeat(auto-fit,minmax(130px,1fr))}
  .dash-tiles .tile .n{font-size:26px}
  .dash-start-knop{font-size:16px}
}