/* ============================================================
   EDITORSCHIL — de omgeving om de kaarteditors heen
   ------------------------------------------------------------
   Gedeeld door kaart.html en werknemer.html, zodat de twee zich
   hetzelfde gedragen en er maar één plek te onderhouden is.

   Op een breed scherm zijn het twee kolommen: de kaart links,
   alle velden rechts. Op een telefoon wordt het één kolom met de
   kaart bovenaan vastgezet en inklapbare vakken eronder. De kaart
   zelf is in allebei de gevallen klikbaar: klik op de kosten, de
   titel of een blok en je staat meteen in het juiste veld.
   ============================================================ */

/* ---------- Indeling ---------- */
.ed{ display:grid; grid-template-columns:minmax(0,1fr) 430px; gap:24px; align-items:start; }

.kaartkolom{
  position:sticky; top:76px; z-index:20;
  display:flex; flex-direction:column; gap:10px;
}
.stage{
  background:var(--ui-bg-2); border:1px solid var(--ui-line); border-radius:14px;
  padding:22px; display:flex; justify-content:center;
}
/* zoom (en niet transform) schaalt óók de ruimte die de kaart inneemt,
   zodat het vak eromheen meegroeit en -krimpt in plaats van dat de
   kaart eruit steekt of er wit omheen blijft staan.
   flex:0 0 auto houdt de kaart op zijn eigen maat: flex-items mogen
   standaard krimpen, en dan valt de tekst uit elkaar. */
.stage .card{ flex:0 0 auto; zoom:var(--z,1.4); }
.kaartkolom--dicht .stage{ display:none; }

.side{ display:flex; flex-direction:column; gap:14px; }

.controls #pick{ min-width:230px; }

/* ---------- De kaart is klikbaar ---------- */
.stage [data-zone]{ cursor:pointer; }
.stage [data-zone]:hover{ outline:2px solid var(--ui-accent); outline-offset:1px; }
.stage [data-zone].zone-aan{ outline:2px dashed var(--ui-accent); outline-offset:1px; }

/* Knoppenrij onder de kaart: alles is ook bereikbaar zonder dat je
   weet waar je precies op de kaart moet drukken. */
.zonebalk{ display:flex; gap:6px; flex-wrap:wrap; align-items:center; }
.zone{
  background:var(--ui-bg-3); border:1px solid var(--ui-line); color:var(--ui-text-dim);
  border-radius:99px; padding:7px 12px; cursor:pointer;
  font:600 12.5px/1 var(--font-body);
}
.zone:hover{ color:var(--ui-text); border-color:var(--ui-accent); }
.zone.aan{ background:var(--ui-accent); color:#1a0d03; border-color:var(--ui-accent); }
.zone--kaart{ border-style:dashed; }

/* ---------- Vakken met velden ---------- */
.box{
  background:var(--ui-bg-2); border:1px solid var(--ui-line);
  border-radius:12px; padding:16px;
}
.box > h3{
  margin:0 0 12px; display:flex; align-items:center; gap:8px;
  font:600 12px/1.2 var(--font-body); letter-spacing:.11em;
  text-transform:uppercase; color:var(--ui-accent);
  cursor:pointer; user-select:none;
}
.box > h3::after{
  content:"\25BE"; margin-left:auto; opacity:.55;
  font-size:13px; line-height:1; transition:transform .14s;
}
.box--dicht > h3{ margin-bottom:0; }
.box--dicht > h3::after{ transform:rotate(-90deg); }
.box--dicht > :not(h3){ display:none !important; }

.box .field{ margin-bottom:11px; }
.box .field:last-child{ margin-bottom:0; }
.box .field input, .box .field select, .box .field textarea{ width:100%; min-width:0; }
.box .field textarea{
  background:var(--ui-bg-3); color:var(--ui-text); border:1px solid var(--ui-line);
  border-radius:8px; padding:8px 10px; font:400 14px/1.4 var(--font-body);
  height:62px; resize:vertical;
}
.grid2{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.grid3{ display:grid; grid-template-columns:1fr 1fr 1fr; gap:10px; }
/* Naast elkaar, ook als het tegelijk een .field is: die staat in
   base.css op een kolom, en dan werd het aantal-vakje 70px hoog. */
.row2{ display:flex; flex-direction:row; gap:8px; align-items:center; }
.box .field input[type=checkbox]{
  width:auto; min-width:0; flex:0 0 auto; margin:0; height:16px;
  accent-color:var(--ui-accent);
}
.box .field label.check{
  flex:0 0 auto; font:400 13px/1.2 var(--font-body);
  letter-spacing:0; text-transform:none; color:var(--ui-text); cursor:pointer;
}
.hint{ color:var(--ui-text-dim); font-size:12.5px; line-height:1.45; }

.tagpick{ display:flex; flex-wrap:wrap; gap:6px; }
.tagpick button{
  background:var(--ui-bg-3); border:1px solid var(--ui-line); color:var(--ui-text-dim);
  border-radius:7px; padding:6px 10px; font:600 12px/1 var(--font-body); cursor:pointer;
}
.tagpick button.on{ background:var(--ui-accent); color:#1a0d03; border-color:var(--ui-accent); }
/* Tags die je zelf in de symboleneditor gemaakt hebt. */
.tagpick button.tagpick--eigen{ border-style:dashed; }
.tagpick button.tagpick--eigen.on{ border-style:solid; }

textarea#out{
  width:100%; height:170px; background:var(--ui-bg-3); color:var(--ui-text);
  border:1px solid var(--ui-line); border-radius:8px; padding:10px;
  font:12px/1.45 ui-monospace,Menlo,monospace;
}

/* Even oplichten waar je vandaan geklikt bent. */
.veld--wijs{ border-radius:9px; animation:wijs 1.8s ease-out; }
@keyframes wijs{
  0%,55%{ box-shadow:0 0 0 3px var(--ui-accent); }
  100%  { box-shadow:0 0 0 3px rgba(210,118,47,0); }
}

/* ---------- Het "i"-knopje ---------- */
.i{
  flex:0 0 auto; width:19px; height:19px; padding:0;
  display:inline-flex; align-items:center; justify-content:center;
  border:1px solid var(--ui-line); border-radius:50%;
  background:var(--ui-bg-3); color:var(--ui-text-dim); cursor:pointer;
  font:700 12px/1 var(--font-body);
}
.i:hover{ border-color:var(--ui-accent); color:var(--ui-accent); }
.field label .i{ margin-left:6px; vertical-align:-4px; }

/* ---------- Uitlegvenster ---------- */
.modal{
  position:fixed; inset:0; z-index:200; padding:18px;
  display:flex; align-items:center; justify-content:center;
  background:rgba(6,8,12,.72);
}
.modal__vak{
  width:100%; max-width:580px; max-height:88vh;
  display:flex; flex-direction:column;
  background:var(--ui-bg-2); border:1px solid var(--ui-line); border-radius:14px;
}
.modal__kop{
  display:flex; align-items:center; gap:10px;
  padding:13px 16px; border-bottom:1px solid var(--ui-line);
}
.modal__kop h3{
  margin:0; font:600 13px/1.2 var(--font-body);
  letter-spacing:.11em; text-transform:uppercase; color:var(--ui-accent);
}
.modal__weg{
  margin-left:auto; background:none; border:0; cursor:pointer;
  color:var(--ui-text-dim); font-size:24px; line-height:1; padding:0 4px;
}
.modal__weg:hover{ color:var(--ui-text); }
.modal__body{ padding:16px; overflow:auto; }

.uitleg h4{
  margin:20px 0 8px; font:700 11.5px/1 var(--font-body);
  letter-spacing:.11em; text-transform:uppercase; color:var(--ui-text-dim);
}
.uitleg h4:first-child{ margin-top:0; }
.uitleg p{ margin:0 0 10px; color:var(--ui-text-dim); font-size:13px; line-height:1.5; }
.uitleg table{ width:100%; border-collapse:collapse; }
.uitleg td{
  padding:6px 10px 6px 0; vertical-align:middle;
  border-bottom:1px solid var(--ui-line);
  color:var(--ui-text-dim); font-size:13px; line-height:1.35;
}
.uitleg tr:last-child td{ border-bottom:0; }
.uitleg td:first-child{ width:1%; white-space:nowrap; }
.uitleg code{ color:var(--ui-text); }

/* Wat een code oplevert, echt getekend — met dezelfde template als op
   de kaart, dus wat hier staat is wat je krijgt. Op één regel: in een
   smalle tabelkolom zou het anders tot een torentje uitzakken. */
.toon{
  display:inline-flex; align-items:center; flex-wrap:nowrap; gap:.3em;
  background:var(--paper-2); border-radius:7px; padding:4px 7px;
  color:var(--ink); font-size:calc(3.9 * var(--mm)); line-height:1;
  /* Een tabelkolom rekent de breedte van deze fiches niet mee, dus die
     zakt anders in tot een streepje. Vandaar een ondergrens. */
  min-width:calc(26 * var(--mm));
}
.uitleg td.toon{ width:1%; white-space:nowrap; }

/* De fiches zelf mogen niet meekrimpen: ze hebben min-width:0 en zouden
   in een krappe tabelkolom anders over elkaar heen schuiven. */
.toon > *, .voorbeeld > *{ flex:0 0 auto; }

/* Live voorbeeld onder een codeveld. */
.voorbeeld{
  margin-top:6px; display:flex; align-items:center; flex-wrap:wrap; gap:.35em;
  background:var(--paper-2); border-radius:7px; padding:5px 8px;
  color:var(--ink); font-size:calc(4.2 * var(--mm)); line-height:1;
}
.voorbeeld:empty{ display:none; }

/* ============================================================
   SMAL SCHERM — dezelfde editor, als telefoon-editor
   De kaart blijft bovenaan staan en verandert mee terwijl je
   eronder typt; de vakken zijn dichtgeklapt tot je er een kiest
   of op de kaart tikt.
   ============================================================ */
@media (max-width:900px){
  /* De balk bovenaan mag wegscrollen: op een telefoon is de kaart
     belangrijker dan de navigatie. */
  .topbar{ position:static; padding:10px 12px; gap:8px; }
  .topbar h1{ font-size:16px; letter-spacing:.1em; }
  .topbar nav{
    margin-left:0; width:100%; flex-wrap:nowrap;
    overflow-x:auto; scrollbar-width:none;
  }
  .topbar nav::-webkit-scrollbar{ display:none; }
  .topbar nav a{ white-space:nowrap; }

  .wrap{ padding:0 12px 90px; }

  .controls{
    margin:0 -12px 12px; padding:12px; border-radius:0;
    border-left:0; border-right:0; gap:8px;
  }
  .controls .field{ flex:1 1 100%; }
  .controls .btn{ flex:1 1 auto; justify-content:center; padding:11px 12px; }

  /* Als blok, niet als raster: alleen dan heeft de kaartkolom een
     hoge genoege omgeving om aan vast te plakken. */
  .ed{ display:block; }
  .kaartkolom{
    top:0; margin:0 -12px; padding:8px 12px 9px;
    background:var(--ui-bg); border-bottom:1px solid var(--ui-line); gap:8px;
  }
  .stage{ padding:10px; border-radius:11px; }
  .zonebalk{
    flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none; padding-bottom:1px;
  }
  .zonebalk::-webkit-scrollbar{ display:none; }
  .zone{ white-space:nowrap; padding:8px 13px; }

  .side{ margin-top:12px; gap:10px; }
  .box{ padding:14px; }

  /* 16px is de grens waaronder iOS bij het aantikken inzoomt. */
  .field select, .field input, .box .field textarea{ font-size:16px; }
  .field select, .field input{ padding:10px 11px; min-width:0; }
  .box .field textarea{ height:76px; }

  .tagpick button{ padding:9px 12px; font-size:13px; }
  .leeg button{ padding:14px 8px; font-size:13.5px; }
  .slot{ padding:12px 12px 13px; }
  .slot__weg{ font-size:22px; padding:2px 8px; }

  .modal{ padding:0; align-items:flex-end; }
  .modal__vak{ max-width:none; max-height:92vh; border-radius:14px 14px 0 0; }
}

@media (max-width:560px){
  .grid3{ grid-template-columns:1fr 1fr; }
}