/* Composer — fase 2: basisconfiguratie en de kast op schaal.
   Bouwt voort op de tokens uit admin.css. */

:root{
  /* Het geel uit het logo van VSO Installatietechniek. */
  --merk:#FBB82B;
  --merk-donker:#E0A214;
  /* De hoogte van de balk bovenin; de kast vult precies de rest van het scherm. */
  --balk:53px;
}

.composer{
  display:grid;
  grid-template-columns:minmax(0,1fr) 380px;
  gap:0;
  min-height:calc(100vh - var(--balk));
  align-items:stretch;
}
@media (max-width:960px){
  .composer{grid-template-columns:1fr}
}
/* Op een breed scherm blijft de kast staan en scrollt alleen de kolom waar je
   in kijkt. Anders schuift de kast onder je cursor vandaan zodra je in de
   onderdelenlade naar beneden gaat — en dan sleep je naar een lege plek. */
@media (min-width:961px){
  .composer{height:calc(100vh - var(--balk));min-height:0}
  .canvas,.side{min-height:0}
  .side{overflow:hidden}
}

/* ------------------------------------------------------------------ canvas */
.canvas{
  position:relative;
  padding:24px 20px 96px;
  background:
    linear-gradient(var(--line) 1px, transparent 1px) 0 0 / 100% 28px,
    linear-gradient(90deg, var(--line) 1px, transparent 1px) 0 0 / 28px 100%,
    var(--ground);
  background-blend-mode:normal;
  overflow:auto;
}
.canvas::before{
  content:"";position:absolute;inset:0;background:var(--ground);opacity:.55;pointer-events:none;
}
.canvas > *{position:relative}

.basisbar{
  display:flex;flex-wrap:wrap;gap:10px 18px;align-items:center;
  background:var(--surface);border:1px solid var(--line);border-radius:5px;
  padding:10px 14px;margin-bottom:20px;font-size:.86rem;
}
.basisbar dl{display:flex;gap:6px;margin:0}
.basisbar dt{color:var(--muted)}
.basisbar dd{margin:0;font-weight:600}
.basisbar .spacer{flex:1}

/* -------------------------------------------------------------------- kast */
/* Gekoppelde kasten staan tegen elkaar aan — een zij-uitbreiding van 110 mm
   wordt letterlijk aan de hoofdkast geschroefd, daar zit geen kier tussen. */
.kast-grid{display:flex;flex-direction:column;gap:0;align-items:flex-start}
/* Onderaan uitlijnen: de kasten zijn even hoog, dus dan staan hun bovenkanten
   ook gelijk, ook als de buisinvoeren erboven een paar pixels schelen. */
.kast-row{display:flex;gap:0;align-items:flex-end}
.box-col{display:flex;flex-direction:column;align-items:stretch;justify-content:flex-end}
/* De buisinvoer sluit aan op de bovenkant van de kast: geen kier ertussen. */
.box-inlet{display:block;width:100%;height:auto;margin-bottom:-1px;pointer-events:none}
.kast-row .box-col + .box-col .box{border-left-color:#CDD2D7;border-top-left-radius:0;border-bottom-left-radius:0}
.kast-row .box-col:has(+ .box-col) .box{border-top-right-radius:0;border-bottom-right-radius:0}

/* De kast op ware verhouding.
   Eén moduulmaat is 17,5 mm breed, een DIN-front 45 mm hoog. Daarmee ligt
   alles vast: --mod is de moduulmaat in pixels, --mm volgt daaruit, en de
   breedte en hoogte van de kast komen uit de millimeters in de database. Een
   220 x 330 op het scherm heeft dus dezelfde verhouding als in de meterkast. */
.box{
  --mod:30px;
  --mm:calc(var(--mod) / 17.5);
  --front:calc(var(--mm) * 45);      /* hoogte van een DIN-front */
  position:relative;
  background:linear-gradient(#FCFCFD, #F0F2F3);
  border:1px solid #B9BFC5;
  border-radius:5px;
  box-shadow:0 1px 2px rgba(20,23,26,.14), 0 10px 24px -18px rgba(20,23,26,.5);
  display:flex;flex-direction:column;justify-content:space-evenly;align-items:center;
  padding:calc(var(--mm) * 14) 0;
}

/* Het typeplaatje linksboven op de kastdeur. */
.box-head{
  position:absolute;top:6px;left:8px;right:8px;
  display:flex;justify-content:space-between;gap:10px;align-items:baseline;
  color:#8B949C;font-size:.62rem;letter-spacing:.06em;white-space:nowrap;
  pointer-events:none;
}
.box-head b{
  color:#4A525A;font-weight:600;letter-spacing:0;font-size:.72rem;
  font-family:var(--mono);overflow:hidden;text-overflow:ellipsis;
}

/* Een rail is een sparing in het front: je kijkt door de witte kunststof heen
   de kast in, en daar zit de DIN-rail. Lege moduulplaatsen laten dus de rail
   zien, precies zoals een half gevulde kast eruitziet. */
/* Met een render van de kast eronder is de kast die afbeelding: de rails staan
   dan op de percentages die ABB zelf gebruikt, want waar ze op de foto zitten
   kun je niet uitrekenen. Zonder render valt alles terug op de tekening. */
.box.has-render{
  background:none;border:0;box-shadow:0 10px 24px -18px rgba(20,23,26,.55);
  display:block;padding:0;
}
.box-photo{position:absolute;inset:0;width:100%;height:100%;display:block;pointer-events:none}
.box.has-render > .rail{position:absolute;background:none;box-shadow:none;overflow:visible}
.box.has-render > .rail::before{display:none}
.box.has-render .slots{position:absolute;left:0;right:0;top:0}
.box.has-render .box-head{display:none}
.box.has-render .rail-slots i{border-right-color:rgba(0,0,0,.12)}

.slots{position:relative;height:100%}

.rail{
  position:relative;
  height:var(--front);
  background:#23272B;
  box-shadow:inset 0 1px 3px rgba(0,0,0,.55);
  border-radius:1px;
  overflow:hidden;
}
/* de DIN-rail zelf */
.rail::before{
  content:"";position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);
  height:58%;
  background:linear-gradient(#E3E6E8 0 8%, #C3C8CC 8% 46%, #AAB0B6 46% 54%, #C3C8CC 54% 92%, #9AA1A7 92% 100%);
}
.rail-slots{position:absolute;inset:0;display:flex}
.rail-slots i{
  flex:0 0 var(--mod);border-right:1px solid rgba(0,0,0,.28);
}
.rail-slots i:last-child{border-right:0}

.mod{
  position:absolute;top:0;bottom:0;
  display:block;
}
.box.has-render .mod{top:0;height:100%;bottom:auto}
.mod svg{height:100%;width:100%;display:block}
.mod img.photo{
  height:100%;width:100%;display:block;object-fit:fill;
  background:#EDEEF0;
}
.mod[data-kind="reservering"]{opacity:.92}
.mod:hover{outline:2px solid var(--accent);outline-offset:-1px;z-index:2}

.legend{
  display:flex;flex-wrap:wrap;gap:14px;margin-top:18px;font-size:.78rem;color:var(--ink-2);
}
.legend span{display:flex;align-items:center;gap:7px}
.legend svg{height:26px;width:auto;display:block}

/* ----------------------------------------------------------------- sidebar */
.side{
  background:var(--surface);border-left:1px solid var(--line);
  display:flex;flex-direction:column;
}
.side-head{padding:18px 20px 12px;border-bottom:1px solid var(--line)}
.side-head h2{margin:0;font-size:1.05rem}
.side-head p{margin:4px 0 0;font-size:.85rem;color:var(--muted)}
.side-body{padding:16px 20px;overflow:auto;flex:1;min-height:0}
.side-foot{
  border-top:1px solid var(--line);padding:14px 20px;background:var(--surface-2);
  position:sticky;bottom:0;
}

.kitcard{
  border:1px solid var(--line);border-left:3px solid var(--accent);
  background:var(--accent-soft);border-radius:4px;padding:12px 14px;margin-bottom:16px;
}
.kitcard.none{background:var(--surface-2);border-left-color:var(--line-strong)}
.kitcard b{display:block;font-size:.95rem}
.kitcard p{margin:4px 0 0;font-size:.82rem;color:var(--ink-2)}
.kitcard .sku{font-family:var(--mono);font-size:.8rem;color:var(--accent)}

.lines{width:100%;border-collapse:collapse;font-size:.85rem;min-width:0}
.lines th{
  text-align:left;font-size:.66rem;text-transform:uppercase;letter-spacing:.08em;
  color:var(--muted);padding:6px 0;border-bottom:1px solid var(--line);
}
.lines td{padding:6px 0;border-bottom:1px solid var(--line);vertical-align:top}
.lines td.q{width:34px;color:var(--muted);font-family:var(--mono)}
.lines td.t{width:34px;padding-right:8px}
.lines img.thumb{width:30px;height:30px;object-fit:contain;display:block;background:#fff;border:1px solid var(--line);border-radius:3px}
.lines td.p{text-align:right;font-family:var(--mono);white-space:nowrap}
.lines tr.kind-toeslag td{color:var(--ink-2)}

.total{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.total .amount{font-size:1.5rem;font-weight:700;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.total .sub{font-size:.78rem;color:var(--muted)}

/* ------------------------------------------------------------------ dialog */
dialog.wizard{
  border:1px solid var(--line);border-radius:6px;padding:0;max-width:560px;width:calc(100% - 32px);
  background:var(--surface);color:var(--ink);
}
dialog.wizard::backdrop{background:rgba(20,23,26,.55)}
dialog.wizard header{padding:18px 22px 10px;border-bottom:1px solid var(--line)}
dialog.wizard header h2{margin:0;font-size:1.15rem}
dialog.wizard header p{margin:4px 0 0;font-size:.85rem;color:var(--muted)}
dialog.wizard .body{padding:18px 22px;display:flex;flex-direction:column;gap:14px;max-height:60vh;overflow:auto}
dialog.wizard footer{
  padding:14px 22px;border-top:1px solid var(--line);background:var(--surface-2);
  display:flex;gap:10px;justify-content:flex-end;
}
.field-row{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}

.notice{
  background:var(--warn-soft);color:var(--warn);border-radius:4px;padding:10px 12px;
  font-size:.85rem;margin-bottom:14px;
}
.notice.empty{background:var(--surface-2);color:var(--ink-2)}
.notice.bad{background:var(--bad-soft);color:var(--bad)}

/* ------------------------------------------------------- onderdelen en slepen */

.tabs{display:flex;gap:0;border-bottom:1px solid var(--line);background:var(--surface-2)}
.tabs button{
  flex:1;border:0;background:none;padding:10px 12px;cursor:pointer;
  font:inherit;font-size:.82rem;color:var(--ink-2);
  border-bottom:2px solid transparent;
}
.tabs button.on{color:var(--accent);border-bottom-color:var(--accent);background:var(--surface)}

.drawer{border-bottom:1px solid var(--line)}
.drawer summary{
  cursor:pointer;padding:9px 2px;font-size:.84rem;font-weight:600;
  display:flex;justify-content:space-between;align-items:center;
}
.drawer summary span{font-family:var(--mono);font-size:.72rem;color:var(--muted);font-weight:400}
/* display op de inhoud van een <details> overrulet de browserregel die een
   dichtgeklapte lade verbergt — dus alleen als hij open staat. */
.drawer[open] .chips{display:flex;flex-direction:column;gap:4px;padding:2px 0 10px}
.drawer:not([open]) .chips{display:none}

.chip{
  display:flex;align-items:center;gap:9px;width:100%;text-align:left;
  border:1px solid var(--line);border-radius:4px;background:var(--surface);
  padding:5px 8px;cursor:grab;font:inherit;color:inherit;touch-action:none;
}
.chip:hover{border-color:var(--line-strong);background:var(--surface-2)}
.chip:active{cursor:grabbing}
.chip-art{display:block;width:26px;flex:0 0 auto;pointer-events:none}
.chip-art svg,.chip-art img{display:block;width:100%;height:auto}
.chip-text{display:flex;flex-direction:column;min-width:0;pointer-events:none}
.chip-text b{font-size:.8rem;font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.chip-text i{font-style:normal;font-size:.74rem;color:var(--muted);font-family:var(--mono)}

/* De module die aan de cursor hangt. Geen pointer-events: anders vindt
   elementFromPoint de sleep-afbeelding in plaats van de rail eronder. */
.drag-ghost{
  position:fixed;z-index:60;pointer-events:none;opacity:.9;
  filter:drop-shadow(0 4px 10px rgba(0,0,0,.28));
}
.drag-ghost svg,.drag-ghost img{display:block;width:100%;height:auto}
.drag-tip{
  position:absolute;top:100%;left:0;margin-top:6px;white-space:nowrap;
  font-size:.76rem;padding:4px 8px;border-radius:3px;
  background:var(--ink);color:#fff;
}
.drag-tip:empty{display:none}
.drag-tip.ok{background:var(--ok)}
.drag-tip.no{background:var(--bad)}
.drag-tip.remove{background:var(--warn);color:#241c02}

body.dragging{user-select:none;cursor:grabbing}
.mod{cursor:grab;touch-action:none}
.mod.selected{outline:2px solid var(--accent);outline-offset:1px;border-radius:2px}
.mod.invalid{outline:2px solid var(--bad);outline-offset:1px;border-radius:2px}

.rail.drop-ok{box-shadow:inset 0 0 0 2px var(--ok)}
.rail.drop-no{box-shadow:inset 0 0 0 2px var(--bad)}

.flashbar{
  position:fixed;left:50%;bottom:18px;transform:translate(-50%,140%);
  padding:9px 16px;border-radius:4px;font-size:.85rem;z-index:70;
  background:var(--bad);color:#fff;transition:transform .18s ease;
  max-width:min(560px,calc(100vw - 32px));
}
.flashbar.show{transform:translate(-50%,0)}
.flashbar.ok{background:var(--ok)}

/* ------------------------------------------------------------- aanvraag */
.total{flex-wrap:wrap}
.aanvraag{
  flex:1 1 100%;margin-top:10px;padding:11px 16px;border:0;border-radius:6px;cursor:pointer;
  background:var(--merk);color:#1a1d20;font:inherit;font-weight:700;font-size:.95rem;
}
.aanvraag:hover{filter:brightness(1.05)}
.aanvraag:active{transform:translateY(1px)}

dialog.offerte{max-width:680px}
dialog.offerte h3{margin:6px 0 0;font-size:.82rem;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
dialog.offerte .vraag{margin-top:12px}
dialog.offerte .vraag label{display:block;margin-bottom:4px}
dialog.offerte .vraag input[type=file]{font-size:.88rem}
dialog.offerte .keuzes{display:flex;gap:16px;flex-wrap:wrap}
dialog.offerte .notice.bad ul{margin:6px 0 0;padding-left:18px}

.bedankt{
  background:var(--surface);border:1px solid var(--line);border-radius:8px;padding:32px;max-width:520px;
}
.bedankt h2{margin:0 0 10px;font-size:1.3rem}
.bedankt p{margin:0 0 12px}
.knop{
  display:inline-block;padding:9px 15px;border-radius:6px;background:var(--merk);
  color:#1a1d20;text-decoration:none;font-weight:600;font-size:.9rem;
}

/* De balk boven de configurator: hetzelfde logo als op de website, zodat je
   ziet dat je nog steeds bij dezelfde club bent. */
.composerbar{background:#16191c;border-bottom:0;height:var(--balk);padding-block:0}
.composerbar .terug{display:flex;align-items:center}
.composerbar .terug img{width:150px;height:auto;display:block}
.composerbar .who{color:#aab2b8}
.composerbar .who a{color:#d8dde1}