/* --- LAYOUT AANPASSINGEN --- */
.content-wrapper {
  display: flex;
}

body {
  font-family: sans-serif;
  background-color: #eef;
  padding: 20px;
  margin: 0;
  box-sizing: border-box;
}

/* Belangrijk voor touchscreen: voorkom dat pannen/zoomen de drag blokkeert */
.tool,
#toolbar,
#schema,
#schema-min,
.vak,
.cirkel,
.light-t,
.wissel-vak {
  touch-action: none;           /* <- nieuw */
  -ms-touch-action: none;       /* <- voor oudere Edge/IE op smartboards */
}

#sidebar {
  width: 200px;
  flex-shrink: 0;
  padding: 20px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 10px;
  position: relative;
  margin-top: 0; /* Verwijderd de oude grote marge */
}

/* --- OORSPRONKELIJKE CSS --- */
h1 {
  margin-bottom: 20px;
}
#main {
  flex-grow: 1;
  padding: 20px;
  box-sizing: border-box;
  overflow-x: hidden;
}
#toolbar {
  display: flex;
  gap: 30px;
  padding: 15px;
  background-color: #fff;
  border: 2px solid #ccc;
  border-radius: 10px;
  margin-bottom: 30px;
  justify-content: center;
  flex-wrap: wrap;
}
#toolbar button {
  padding: 12px 18px;
  font-size: 22px;
  font-weight: bold;
  border: none;
  border-radius: 10px;
  color: white;
  background-color: #2196f3;
  transition: transform 0.2s;
}
#toolbar button:hover {
  background-color: #1976d2;
  transform: scale(1.05);
}
button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.tool {
  user-select: none;
  cursor: grab;
  position: relative;
  box-sizing: border-box;
}
.geel-blok {
  width: 40px;
  height: 40px;
  background: linear-gradient(to bottom right, #ffeb3b, #f57f17);
  border-radius: 6px;
  border: 2px solid #a67c00;
}
.staaf-groen {
  width: 200px;
  height: 20px;
  background-color: #4CAF50;
  border-radius: 4px;
  border: 2px solid #1b5e20;
}
.staaf-groen .verdeling {
  position: relative;
  width: 100%;
  height: 100%;
}
.staaf-groen .verdeling .lijn {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 2px;
  background-color: #004400;
}
.tool.schijf {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 24px;
  font-weight: bold;
}
.tool.schijf.geel {
  background-color: #ffeb3b;
  border: 2px solid #f57f17;
}
.tool.schijf.groen {
  background-color: #66bb6a;
  border: 2px solid #2e7d32;
}
.tool.schijf span {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
#schema, #schema-min {
  width: 100%;
  max-width: 950px;
  margin-left: auto;
  margin-right: auto;
  box-sizing: border-box;
  overflow: hidden;
  border: 2px solid #ccc;
  background: white;
  border-radius: 10px;
}
.schema-header {
  display: grid;
  grid-template-columns: 1fr 1fr;
}
.label-t, .label-e {
  font-size: 24px;
  font-weight: bold;
  text-align: center;
  padding: 10px;
}
.label-t {
  background-color: #4caf50;
  color: white;
}
.label-e {
  background-color: #fdd835;
  color: black;
}
.schema-light {
  display: grid;
  grid-template-columns: 1fr 1fr;
}
.light-t {
  position: relative;
  background-color: #c8e6c9;
  height: 70px;
}
.light-e {
  background-color: #fff9c4;
  height: 70px;
}
.schema-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}
.vak {
  min-height: 200px;
  padding: 10px;
  background: white;
  border: 1px solid #ccc;
  box-sizing: border-box;
  position: relative;
}
.doel-vak {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: fit-content;
  margin: 0 auto;
  padding: 10px 15px;
  border: 2px solid #0077cc;
  border-radius: 15px;
  background-color: #f9f9f9;
  box-sizing: border-box;
}
.cirkelrij {
  display: flex;
  justify-content: center;
  gap: 10px;
  padding: 5px 0;
}
.cirkel {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  border: 2px solid #0077cc;
  margin: 0 5px;
  box-sizing: border-box;
  position: relative;
}
.cirkel .tool {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  margin: 0;
}
.svg-pijl {
  position: absolute;
  width: 80px;
  height: 80px;
  top: -30px;
  left: -90px;
  overflow: visible;
}
#sidebar button.knop {
  padding: 12px 18px;
  font-size: 22px;
  font-weight: bold;
  border: none;
  border-radius: 10px;
  color: white;
  margin-bottom: 8px;
  transition: transform 0.2s;
  cursor: pointer;
}
#sidebar button.knop:hover {
  transform: scale(1.05);
}
.knop.reset { background-color: #4caf50; }
.knop.terug { background-color: #f44336; }
.knop.wissel { background-color: #2196f3; }

#schema-min {
  margin-top: 40px;
}
#schema-min .schema-light {
  display: none;
}
#schema-min .schema-body {
  height: 400px;
}
#schema-min .vak {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding-bottom: 20px;
}
#schema-min .wissel-vak, #schema-min .doel-vak {
  margin: 0 20px;
}
#schema-min .wissel-vak {
  height: 60px;
  border: 2px solid #ccc;
  border-radius: 15px;
  background-color: #f9f9f9;
  position: relative;
}
#schema-min .doel-vak {
  height: 120px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
}
#schema-min .cirkel {
  width: 50px;
  height: 50px;
  border-style: dashed;
  border-color: #aaa;
}
/* AANGEPAST: De 'Wissel om' knop is nu overal consistent groot */
.wissel-knop {
  background-color: #007BFF;
  color: white;
  border: none;
  cursor: pointer;
  position: absolute;
  left: 50%;
  z-index: 1000;
  /* iPad-vriendelijke grootte */
  font-size: 1.5rem;
  padding: 1rem 2rem;
  min-width: 200px;
  border-radius: 1rem;
  transform: translateX(-50%);
  top: -60px; /* Plaatst de knop BOVEN het wisselvak */
}
.wissel-knop:hover {
  background-color: #0056b3;
}
#vuilbak-container {
    position: relative;
    margin-top: 40px;     /* afstand onder de ‘Schrijfvlak’-knop */
    text-align: center;
}
#vuilbak {
  width: 160px;
  height: auto;
  cursor: pointer;
}
#vuilbak-teller {
  display: flex;
  flex-direction: column;
  align-items: center;
  font-size: 1.6em;
  font-weight: bold;
  margin-top: 5px;
}
#vuilbak-teller div {
  display: flex;
  gap: 40px;
  justify-content: center;
}
.t-label {
  color: green;
  width: 30px;
  text-align: center;
  display: inline-block;
}
.e-label {
  color: goldenrod;
  width: 30px;
  text-align: center;
  display: inline-block;
}
@media (max-width: 900px) {
  .content-wrapper { flex-direction: column; } /* Zorgt dat de layout op mobiel goed blijft */
  #main { order: 1; padding-left: 0; width: 100%; }
  #sidebar { width: 100%; margin-top: 0; order: 2; }
  #schema, #schema-min { max-width: calc(100vw - 20px); }
  #vuilbak-container { position: relative !important; right: auto !important; bottom: auto !important; margin-top: 20px; text-align: left; width: 180px; display: block !important; }
  .svg-pijl { width: 40px; height: 40px; top: -15px; left: -40px; }
}
.knop.schrijf {
    color: #222 !important;       /* Donkere tekst */
    background-color: #f2f2f2;    /* Lichte achtergrond */
    border: 2px solid #ccc;       /* Zachte rand */
}
/* ===========================
   SCHRIJFVLAK STYLING
   =========================== */

#schrijfvlak-header {
    display: flex;
    gap: 10px;
    margin-bottom: 10px;
}

#schrijfvlak-header button {
    background: #e6e6e6;
    border: 1px solid #bbb;
    padding: 8px 12px;
    font-size: 20px;
    border-radius: 8px;
    cursor: pointer;
}

#schrijf-canvas {
    width: 100%;
    height: calc(100% - 60px);
    border: 1px solid #ccc;
    border-radius: 10px;
    cursor: crosshair;
}

/* Kleurbolletjes */
#color-palette {
    display: flex;
    gap: 8px;
    align-items: center;
}

.kleurbol {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    cursor: pointer;
    border: 2px solid #666;
}

.kleurbol.zwart { background: #000000; }
.kleurbol.rood  { background: #d40000; }
.kleurbol.blauw { background: #004de8; }
.kleurbol.groen { background: #009944; }

/* =========================================
   LAYOUT STRUCTUUR
   sidebar | schrijfvlak | main
========================================= */

.content-wrapper {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 20px;
    width: 100%;
    box-sizing: border-box;
}

/* Sidebar links */
#sidebar {
    width: 180px;
    flex-shrink: 0;
}

/* Main rechts – neemt rest van de ruimte */
#main {
    flex: 1;
    transition: width 0.3s ease;
}

/* =========================================
   SCHRIJFVLAK PANEEL (links)
========================================= */

/* =========================================
   SCHRIJFVLAK PANEEL (links)
========================================= */

#schrijfvlak-container {
    display: none;          /* standaard uit */
    flex-shrink: 0;         /* niet kleiner worden */
    width: 30%;
    min-width: 260px;
    height: calc(100vh - 150px);
    background: #fff;
    border: 2px solid #ccc;
    border-radius: 15px;
    padding: 10px;
    box-shadow: 0 0 12px rgba(0,0,0,0.15);
    box-sizing: border-box;
    overflow: hidden;       /* canvas altijd binnen rand */
    
    /* NIEUW: Dit zorgt dat het schrijfvlak HELEMAAL LINKS komt te staan */
    order: -1; 
}

/* Bij openen */
body.schrijfvlak-open #schrijfvlak-container {
    display: block;
}

/* Main wordt smaller zodra schrijfvlak zichtbaar is */
body.schrijfvlak-open #main {
    width: 68%;
}

/* =========================================
   CANVAS binnen schrijfvlak
========================================= */

#schrijfvlak-header {
    display: flex;
    gap: 10px;
    margin-bottom: 10px;
}

#schrijf-canvas {
    width: 100%;
    height: calc(100% - 60px);
    border-radius: 10px;
    background: white;
    border: 1px solid #ccc;
}

/* =========================================
   Vuilbak mee laten opschuiven
========================================= */

body.schrijfvlak-open #vuilbak-container {
    margin-left: 0;
}

/* =========================================
   KIND-MODE (voor later)
========================================= */

body.kid #schrijfvlak-container {
    display: none !important;
}

body.kid #main {
    width: 100% !important;
}

#sidebar {
    display: flex;
    flex-direction: column;
    align-items: center;
}
/* MIN (–) versie: geef het schema meer ruimte */
body.schrijfvlak-open.min-variant #main {
    width: 82%;   /* voldoende ruimte voor volledige cirkeldoos */
}

/* MIN-versie: schrijfvlak smaller zodat het schema blijft passen */
body.schrijfvlak-open.min-variant #schrijfvlak-container {
    width: 28%;
}
body.schrijfvlak-open.min-variant #main {
    width: 75%;
}