/* De schil: zijbalk, bovenbalk en werkvlak. Het venster scrolt niet; het werkvlak wel.
   Het ontwerp volgt de CRM uit de demo (docs/plan/03-schermen.md §1).

   Van laptop tot ultrawide vult een lijst of detailpagina de hele breedte: op een scherm van
   3440 px stond alles eerst in 1400 px links, en de rest was leeg. Een formulier blijft smal,
   want een invulvak van twee meter breed leest niemand. Op een tablet en een telefoon: klein-scherm.css. */

.schil {
  display: grid;
  grid-template-columns: var(--breedte-zijbalk) 1fr;
  height: 100vh;
  overflow: hidden;
}

/* ── Zijbalk met bakjes ─────────────────────────────────────────────────── */

.zijbalk {
  display: flex;
  flex-direction: column;
  gap: var(--ruimte-1);
  padding: var(--ruimte-3) var(--ruimte-2);
  overflow-y: auto;
  color: var(--kleur-tekst-zijbalk);
  background: var(--kleur-zijbalk);
}

.merk {
  display: flex;
  justify-content: center;
  padding: var(--ruimte-2) 0 var(--ruimte-4);
}

.merk img {
  width: 40px;
  height: 40px;
}

.bakjes {
  display: flex;
  flex-direction: column;
  gap: var(--ruimte-1);
}

.bakjes-onder {
  margin-top: auto;
  padding-top: var(--ruimte-3);
  border-top: 1px solid var(--kleur-zijbalk-actief);
}

.bakje {
  display: flex;
  flex-direction: column;
  gap: var(--ruimte-1);
  align-items: center;
  justify-content: center;
  min-height: 56px;
  padding: var(--ruimte-2) var(--ruimte-1);
  border: 0;
  border-radius: var(--radius);
  color: var(--kleur-tekst-zijbalk);
  font-size: var(--tekst-klein);
  font-weight: 500;
  text-align: center;
  text-decoration: none;
  background: transparent;
  cursor: pointer;
}

.bakje:hover,
.bakje[aria-current="page"] {
  color: var(--kleur-tekst-op-accent);
  background: var(--kleur-zijbalk-actief);
}

.bakje .icoon {
  width: 20px;
  height: 20px;
}

/* ── Bovenbalk ──────────────────────────────────────────────────────────── */

.hoofd {
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
}

.bovenbalk {
  display: flex;
  flex-shrink: 0;
  gap: var(--ruimte-4);
  align-items: center;
  height: var(--hoogte-bovenbalk);
  padding: 0 var(--ruimte-6);
  border-bottom: 1px solid var(--kleur-rand);
  background: var(--kleur-vlak);
}

.bovenbalk-wie {
  margin-left: auto;
  color: var(--kleur-tekst-gedempt);
}

.zoekbalk {
  position: relative;
  flex: 1;
  min-width: 0;
  max-width: 520px;
}

/* De knop Menu en het vlak erachter: alleen op een telefoon (klein-scherm.css). Met .bovenbalk
   ervoor, want .knop (componenten.css) komt later en zet hem anders weer aan. */
.bovenbalk .menuknop,
.menu-achtergrond {
  display: none;
}

.zoekbalk label {
  display: flex;
  gap: var(--ruimte-2);
  align-items: center;
  height: 38px;
  padding: 0 var(--ruimte-3);
  border: 1px solid var(--kleur-rand);
  border-radius: var(--radius);
  color: var(--kleur-tekst-gedempt);
  background: var(--kleur-vlak);
}

.zoekbalk input {
  flex: 1;
  border: 0;
  outline: 0;
  background: transparent;
}

.zoekbalk label:focus-within {
  border-color: var(--kleur-focus);
}

.zoekresultaten {
  position: absolute;
  top: calc(100% + var(--ruimte-1));
  right: 0;
  left: 0;
  z-index: 30;
  max-height: 420px;
  overflow-y: auto;
  border: 1px solid var(--kleur-rand);
  border-radius: var(--radius);
  background: var(--kleur-vlak);
  box-shadow: var(--schaduw-groot);
}

/* ── Werkvlak ───────────────────────────────────────────────────────────── */

.werkvlak {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  outline: 0;
}

.werkvlak-los {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  min-height: 100vh;
  padding: var(--ruimte-8) var(--ruimte-4);
}

.pagina {
  padding: var(--ruimte-6);
}

.pagina-smal {
  max-width: 860px;
}

/* Op een breed scherm staat een formulier in het midden, recht voor je, en niet tegen de
   zijbalk aan met een meter leeg ernaast. */
@media (width >= 1800px) {
  .pagina-smal {
    margin-inline: auto;
  }
}

.paginakop {
  display: flex;
  gap: var(--ruimte-3);
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--ruimte-4);
}

.paginakop h1 {
  margin: 0;
}

.paginakop-acties {
  display: flex;
  gap: var(--ruimte-2);
}

/* Detail: links de velden (360px), rechts de tijdlijn, elk met een eigen scrollbalk. */
.detail {
  display: grid;
  grid-template-columns: var(--breedte-detail-links) 1fr;
  gap: var(--ruimte-6);
  align-items: start;
}

.detail-links,
.detail-rechts {
  min-width: 0;
}

@media (width <= 1000px) {
  .detail {
    grid-template-columns: 1fr;
  }
}

@media print {
  .zijbalk,
  .bovenbalk,
  .niet-printen {
    display: none;
  }

  .schil {
    display: block;
    height: auto;
    overflow: visible;
  }

  .hoofd,
  .werkvlak {
    overflow: visible;
  }
}