:root {
  font-family: Nunito, "Segoe UI", sans-serif;
  color: #263238;
  background: #f6f7fb;
}

* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body { overflow: hidden; }

button, input { font: inherit; }
button { cursor: pointer; }

.proefkop {
  height: 76px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 15px 24px;
  color: #fff;
  background: linear-gradient(120deg, #5946b2, #7968d7);
  box-shadow: 0 3px 18px rgba(57, 43, 128, .22);
}

.proefkop h1 { display: inline; margin: 0 10px; font-size: 22px; }
.proefkop p { display:none; }
.proeflabel {
  padding: 5px 9px;
  border-radius: 999px;
  color: #4b3a00;
  background: #ffe082;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .08em;
}

.kopacties { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; justify-content: flex-end; }
.kopacties span { position:absolute; right:24px; bottom:4px; text-align:right; font-size:10px; opacity:.8; }
.kopacties button, .huidigebord button {
  border: 0;
  border-radius: 10px;
  padding: 9px 13px;
  color: #49379c;
  background: #fff;
  font-weight: 800;
}
.kopacties .secundair { color: #fff; background: rgba(255,255,255,.16); border: 1px solid rgba(255,255,255,.45); }
.kopacties .klasmodusknop { color: #3c2b00; background: #ffe082; }
.meermenu { position:relative; }
.meermenu summary { list-style:none; cursor:pointer; padding:9px 14px; border-radius:10px; color:#49379c; background:#fff; font-weight:800; }
.meermenu summary::-webkit-details-marker { display:none; }
.meermenu > div { position:absolute; z-index:500; right:0; top:44px; width:210px; padding:10px; border-radius:14px; background:#fff; box-shadow:0 12px 36px rgba(34,23,84,.28); }
.meermenu > div button { width:100%; margin:4px 0; color:#514298; background:#f1efff; }

.proefindeling { height: calc(100% - 76px); display: grid; grid-template-columns: 230px 1fr; transition: grid-template-columns .2s ease; }
.bordnavigatie { overflow-y: auto; padding: 18px 13px; background: #fff; border-right: 1px solid #dedfed; }
.navtitel { display: flex; justify-content: space-between; align-items: end; padding: 0 7px 12px; }
.navtitel strong { font-size: 17px; }
.navtitel span { font-size: 11px; color: #777; }

.bordknop {
  width: 100%;
  display: grid;
  grid-template-columns: 38px 1fr;
  align-items: center;
  gap: 10px;
  margin: 0 0 8px;
  padding: 10px;
  border: 1px solid #e4e3ec;
  border-radius: 13px;
  color: #34303f;
  background: #fafafe;
  text-align: left;
}
.bordregel { margin-bottom:9px; padding:4px; border-radius:14px; background:#fafafe; }
.bordregel .bordknop { margin:0; }
.bordregel.verborgen-bord .bordknop { opacity:.48; }
.bordvolgorde { display:flex; align-items:center; justify-content:flex-end; gap:5px; padding:4px 5px 1px; }
.bordvolgorde label { margin-right:auto; color:#625d75; font-size:11px; font-weight:800; cursor:pointer; }
.bordvolgorde input { vertical-align:middle; accent-color:#6653bd; }
.bordvolgorde button { width:25px; height:23px; border:0; border-radius:6px; color:#514298; background:#ece9ff; font-weight:900; }
.bordvolgorde button:disabled { opacity:.3; cursor:default; }
.bordknop:hover { border-color: #b9b1ea; transform: translateX(2px); }
.bordknop.actief { color: #48369d; background: #efedff; border-color: #8b7cdd; box-shadow: 0 3px 10px rgba(88,70,178,.12); }
.bordicoon { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 11px; background: #fff; font-size: 22px; }
.bordknop strong { display: block; line-height: 1.15; }
.bordknop small { display: block; margin-top: 3px; color: #777; }
.navtip { margin: 16px 6px; padding: 12px; border-radius: 10px; color: #625f69; background: #fff7dd; font-size: 12px; line-height: 1.45; }

.bordruimte { grid-column:2; min-width:0; display:grid; grid-template-rows:50px 1fr; background:#ececf3; }
.huidigebord { position:relative; display:flex; align-items:center; justify-content:flex-end; gap:8px; padding:0 12px; border-bottom:1px solid #d7d7e2; background:#fbfbfd; }
.snelleknoppen { position:absolute; left:244px; display:flex; align-items:center; gap:5px; min-width:0!important; max-width:calc(100% - 255px); overflow-x:auto; }
.huidigebord .snelleknoppen button { width:auto; min-height:36px; padding:6px 9px; border-radius:9px; color:#fff; font-size:12px; line-height:1.05; white-space:nowrap; box-shadow:none; }
.snelleknoppen #toon-borden { background:#6653bd; }
.snelleknoppen #voeg-vrij-vak-toe { background:#348a7b; }
.snelleknoppen #voeg-checklist-toe { background:#7562b8; }
.snelleknoppen #voeg-weer-toe { background:#3182a7; }
.snelleknoppen #toon-afbeeldingen { background:#d27b2d; }
.snelleknoppen #voeg-tekst-toe { background:#447fc0; }
.snelleknoppen #voeg-timer-toe { background:#9b5ca1; }
.snelleknoppen #voeg-stilte-toe { background:#c85e79; }
.snelleknoppen #groot-werkvlak { background:#4d708b; }
.snelleknoppen #groot-werkvlak { display:none; }
.huidigebord > div:not(.snelleknoppen) { display:none; }
.huidigebord span { display: block; color: #7a7782; font-size: 11px; text-transform: uppercase; letter-spacing: .08em; }
.huidigebord input { width: 100%; padding: 2px 8px; border: 0; border-bottom: 2px solid transparent; background: transparent; text-align: center; font-size: 21px; font-weight: 900; color: #453494; }
.huidigebord input:focus { outline: 0; border-color: #8b7cdd; }
.huidigebord button { padding: 8px 14px; color: #fff; background: #6552bd; font-size: 20px; }

iframe { grid-row:2; grid-column:1; width:100%; height:100%; border:0; background:#fff; opacity:0; visibility:hidden; }
body.frame-klaar iframe { opacity:1; visibility:visible; }
.bordlader { grid-row:2; grid-column:1; z-index:2; display:grid; place-content:center; justify-items:center; gap:12px; min-height:420px; color:#4d3b98; background:linear-gradient(145deg,#fbfaff,#f0ecfb); font-size:18px; }
.bordlader span { font-size:54px; animation:bordladen 1.1s ease-in-out infinite alternate; }
body.frame-klaar .bordlader { display:none; }
@keyframes bordladen { to { transform:translateY(-7px) rotate(-3deg); } }
.hulpscherm { position:fixed; z-index:30000; inset:0; padding:28px; overflow:auto; background:rgba(38,29,75,.62); }
.hulpscherm[hidden] { display:none; }
.hulpvenster { position:relative; width:min(1050px,96vw); margin:auto; padding:30px; border-radius:24px; color:#3c3651; background:#fff; box-shadow:0 20px 70px rgba(24,16,58,.35); }
.hulpvenster h2 { margin:0 50px 8px 0; color:#4e3b9d; font-size:32px; }
.hulpintro { max-width:850px; color:#6c657d; font-size:17px; line-height:1.5; }
.hulpgrid { display:grid; grid-template-columns:repeat(2,1fr); gap:14px; margin-top:20px; }
.hulpgrid details { border-radius:16px; background:#f5f2ff; overflow:hidden; }
.hulpgrid summary { padding:17px; color:#5544aa; font-size:17px; font-weight:900; cursor:pointer; }
.hulpgrid details[open] summary { background:#ebe6ff; }
.hulpgrid p { margin:0; padding:0 17px 18px; line-height:1.5; }
.hulp-sluiten { position:absolute; right:18px; top:18px; width:42px; height:42px; border:0; border-radius:50%; color:#fff; background:#6653bd; font-size:27px; cursor:pointer; }
.hulpwaarschuwing { margin:18px 0 0; padding:14px; border-radius:13px; color:#704f18; background:#fff3c9; }
.exportvenster { width:min(720px,96vw); }
.exportstappen { padding-left:25px; line-height:1.65; }
.exportnaam { display:grid; gap:6px; margin-top:18px; color:#514394; font-weight:900; }
.exportnaam input { padding:11px; border:2px solid #d8d1f3; border-radius:10px; font-size:16px; }
.exportbewaar { margin-top:18px; padding:12px 18px; border:0; border-radius:11px; color:#fff; background:#6653bd; font-size:16px; font-weight:900; cursor:pointer; }
@media(max-width:760px){.hulpgrid{grid-template-columns:1fr}.hulpscherm{padding:10px}.hulpvenster{padding:22px}}

.klasnavigatie {
  display: none;
  position: static;
}
.klasnavigatie button { position:fixed; z-index:10000; width:56px; height:56px; border:1px solid rgba(255,255,255,.85); border-radius:50%; color:#4d3ba1; background:rgba(255,255,255,.94); box-shadow:0 7px 22px rgba(38,28,77,.25); backdrop-filter:blur(7px); font-size:28px; font-weight:900; cursor:pointer; }
.klasnavigatie #klas-vorig { left:22px; bottom:22px; }
.klasnavigatie #klas-volgend { right:22px; bottom:22px; }
.klasnavigatie div { display:none; }
.klasnavigatie strong, .klasnavigatie span { display: block; }
.klasnavigatie span { margin-top: 2px; font-size: 11px; opacity: .8; }
.klasnavigatie .stopklas { top:18px; right:78px; width:auto; height:48px; padding:0 18px; border-radius:13px; color:#fff; background:#7665cd; font-size:15px; }

body.klasmodus .proefkop,
body.klasmodus .bordnavigatie,
body.klasmodus .huidigebord { display: none; }
body.klasmodus .proefindeling { display: block; height: 100%; }
body.klasmodus .bordruimte { display: block; width: 100%; height: 100%; }
body.klasmodus iframe { display: block; width: 100vw; height: 100vh; }
body.klasmodus .klasnavigatie { display: block; }

body.borden-dicht .proefindeling { grid-template-columns: 0 1fr; }
body.borden-dicht .bordnavigatie { visibility: hidden; padding: 0; overflow: hidden; }
body.borden-dicht .snelleknoppen { left: 14px; }
body.groot-werkvlak .proefkop,
body.groot-werkvlak .bordnavigatie { display: none; }
body.groot-werkvlak .proefindeling { height: 100%; grid-template-columns: 0 1fr; }
body.groot-werkvlak .snelleknoppen { left: 14px; }

@media (max-width: 900px) {
  .proefkop { height: 128px; padding: 12px; }
  .proefkop p, .kopacties span { display: none; }
  .proefindeling { height: calc(100% - 128px); grid-template-columns: 190px 1fr; }
  .huidigebord div { min-width: 180px; }
}