/* ============================================================================
   SVS HRM — weergave 2 — de schil: zijbalk, kopbalk, onderbalk, menu's, palet

   Drie vragen beantwoordt de schil op elk scherm, zonder dat je hoeft te zoeken:
   waar ben ik (kruimelpad en de gemarkeerde plek in de zijbalk), waar kan ik heen
   (de zijbalk, gegroepeerd), en wat kan ik hier (de acties in de paginakop van het
   scherm zelf). Zoeken, hulp, meldingen en de gebruiker staan in de kopbalk omdat
   ze niet bij een scherm horen maar bij het systeem.
   ========================================================================= */

.schil {
  display: grid;
  grid-template-columns: var(--zijbalk) minmax(0, 1fr);
  min-height: 100dvh;
}
.schil.smal { grid-template-columns: var(--zijbalk-smal) minmax(0, 1fr); }

/* ---- Zijbalk ------------------------------------------------------------- */
.zijbalk {
  position: sticky; top: 0; block-size: 100dvh;
  display: flex; flex-direction: column;
  background: var(--vlak);
  border-right: 1px solid var(--rand);
  overflow: hidden;
}
.zij-merk {
  display: flex; align-items: center; min-height: var(--topbalk);
  padding: 0 var(--ruimte-4);
  border-bottom: 1px solid var(--rand);
}
.zij-merk .merk {
  width: 112px; height: 36px;
  background: url("/static/svs-logo.png") no-repeat left center / contain;
}
.schil.smal .zij-merk { justify-content: center; padding: 0; }
.schil.smal .zij-merk .merk { width: 28px; height: 40px;
  background-size: 322% auto; background-position: left center; }

.zijbalk .nav {
  flex: 1; min-block-size: 0; overflow-y: auto; overflow-x: hidden;
  padding: var(--ruimte-3) var(--ruimte-3);
  scrollbar-width: thin; scrollbar-color: var(--rand-sterk) transparent;
}
.nav { display: flex; flex-direction: column; gap: 1px; }
.navgroep { display: flex; flex-direction: column; gap: 1px; }
.navgroep + .navgroep { margin-top: var(--ruimte-4); }
.navgroep > .zonelabel {
  padding: 0 var(--ruimte-2) var(--ruimte-1);
  font-size: var(--tekst-xs); font-weight: 600; letter-spacing: .04em;
  text-transform: uppercase; color: var(--tekst-3);
}
.schil.smal .navgroep > .zonelabel { visibility: hidden; height: 0; padding: 0; }

.navgroep a {
  position: relative;
  display: flex; align-items: center; gap: var(--ruimte-3);
  min-height: calc(36px * var(--dichtheid));
  padding: 0 var(--ruimte-2);
  border-radius: var(--radius-2);
  color: var(--tekst-2); font-size: var(--tekst-m); font-weight: 500;
  text-decoration: none;
  transition: background var(--duur-snel), color var(--duur-snel);
}
.navgroep a svg { width: 18px; height: 18px; flex: none; color: var(--tekst-3); }
.navgroep a:hover { background: var(--vlak-diep); color: var(--tekst); }
.navgroep a:hover svg { color: var(--tekst-2); }
.navgroep a[aria-current="page"] {
  background: var(--groen-50); color: var(--tekst); font-weight: 600;
}
.navgroep a[aria-current="page"] svg { color: var(--groen-700); }
.navgroep a[aria-current="page"]::before {
  content: ""; position: absolute; left: -12px; top: 8px; bottom: 8px; width: 3px;
  border-radius: 0 3px 3px 0; background: var(--groen-600);
}
.navtekst { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; }
.navgroep .teller {
  margin-left: auto; min-width: 20px; padding: 0 6px; text-align: center;
  border-radius: var(--radius-pil); background: var(--gevaar-vlak);
  color: var(--tekst-op-donker); font-size: var(--tekst-xs); font-weight: 700;
  line-height: 18px;
}
.schil.smal .navgroep a { justify-content: center; padding: 0; }
.schil.smal .navgroep a::before { left: -8px; }
.schil.smal .navtekst { display: none; }
.schil.smal .navgroep .teller { position: absolute; top: 4px; right: 4px; margin: 0;
  min-width: 16px; padding: 0 4px; line-height: 16px; font-size: var(--tekst-xs); }

.zij-voet {
  border-top: 1px solid var(--rand);
  padding: var(--ruimte-2) var(--ruimte-3);
  display: flex; flex-direction: column; gap: var(--ruimte-2);
}
.zij-voet .navgroep.eigenzone { margin: 0; }
.klapper {
  display: flex; align-items: center; gap: var(--ruimte-3);
  min-height: calc(36px * var(--dichtheid)); padding: 0 var(--ruimte-2);
  background: none; border: none; border-radius: var(--radius-2);
  color: var(--tekst-3); font-size: var(--tekst-s); font-weight: 500;
}
.klapper svg { width: 18px; height: 18px; flex: none; }
.klapper:hover { background: var(--vlak-diep); color: var(--tekst); }
.schil.smal .klapper { justify-content: center; padding: 0; }
.schil.smal .klapper .navtekst { display: none; }

/* ---- Het werkvlak ---------------------------------------------------------- */
.hoofd { display: flex; flex-direction: column; min-width: 0; min-height: 100dvh; }

.topbalk {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; gap: var(--ruimte-3);
  min-height: var(--topbalk); padding: 0 var(--blad-x);
  background: var(--vlak); border-bottom: 1px solid var(--rand);
}
.kruimels {
  flex: 1; min-width: 0;
  display: flex; align-items: center; gap: var(--ruimte-1);
  font-size: var(--tekst-m); color: var(--tekst-3);
  overflow: hidden; white-space: nowrap;
}
.kruimels a { color: var(--tekst-2); text-decoration: none; padding: 4px 6px;
  border-radius: var(--radius-1); min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.kruimels a:hover { background: var(--vlak-diep); color: var(--tekst); }
.kruimels .scheid { display: flex; color: var(--rand-sterk); }
.kruimels .scheid svg { width: 14px; height: 14px; }
.kruimels .huidig { color: var(--tekst); font-weight: 600; padding: 4px 6px; flex: none;
  max-width: 60%; overflow: hidden; text-overflow: ellipsis; }

.zoekbalk {
  flex: 0 1 320px; min-width: 132px;
  display: flex; align-items: center; gap: var(--ruimte-2);
  height: calc(34px * var(--dichtheid)); padding: 0 var(--ruimte-3);
  background: var(--grond); border: 1px solid var(--rand);
  border-radius: var(--radius-2); cursor: text;
  color: var(--tekst-3); font-size: var(--tekst-m); text-align: left;
  transition: border-color var(--duur-snel), background var(--duur-snel);
}
.zoekbalk:hover { border-color: var(--rand-sterk); background: var(--vlak); }
.zoekbalk:focus-visible { outline: none; border-color: var(--groen-700);
  box-shadow: var(--focus-gloed); background: var(--vlak); }
.zoekbalk svg { width: 16px; height: 16px; flex: none; }
.zoekbalk .zoektekst { flex: 1; min-width: 0; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; }
.zoekbalk kbd { flex: none; }

.kopknopje, .hulpknop {
  position: relative;
  display: grid; place-items: center; flex: none;
  width: calc(34px * var(--dichtheid)); height: calc(34px * var(--dichtheid));
  background: none; border: 1px solid transparent; border-radius: var(--radius-2);
  color: var(--tekst-2); text-decoration: none; cursor: pointer;
  transition: background var(--duur-snel), color var(--duur-snel);
}
.kopknopje:hover, .hulpknop:hover { background: var(--vlak-diep); color: var(--tekst); }
.kopknopje[aria-expanded="true"] { background: var(--vlak-diep); }
.kopknopje svg, .hulpknop svg { width: 19px; height: 19px; }
.kopknopje .teller {
  position: absolute; top: 3px; right: 3px;
  min-width: 16px; height: 16px; padding: 0 4px; line-height: 16px;
  border-radius: var(--radius-pil); background: var(--gevaar-vlak);
  color: var(--tekst-op-donker); font-size: var(--tekst-xs); font-weight: 700; text-align: center;
}

.gebruiker {
  flex: none; display: flex; align-items: center; gap: var(--ruimte-2);
  height: calc(36px * var(--dichtheid)); padding: 0 var(--ruimte-2) 0 3px;
  background: none; border: 1px solid transparent; border-radius: var(--radius-pil);
  cursor: pointer; color: var(--tekst);
  transition: background var(--duur-snel), border-color var(--duur-snel);
}
.gebruiker:hover, .gebruiker[aria-expanded="true"] { background: var(--vlak-diep); }
.gebruiker-tekst { display: flex; flex-direction: column; align-items: flex-start;
  line-height: 1.2; }
.gebruiker-tekst .naam { font-size: var(--tekst-m); font-weight: 600; }
.gebruiker-tekst .label { font-size: var(--tekst-xs); color: var(--tekst-3); }
.gebruiker > svg { width: 14px; height: 14px; color: var(--tekst-3); }

.werkblad {
  flex: 1; min-width: 0;
  padding: var(--blad-y) var(--blad-x) var(--ruimte-9);
}
.werkblad > * { max-width: var(--content-max); }
.werkblad.breed > * { max-width: none; }

/* ---- Menu's ----------------------------------------------------------------- */
.menu {
  position: absolute; z-index: 60; min-width: 224px; padding: 6px;
  background: var(--vlak); border: 1px solid var(--rand);
  border-radius: var(--radius-3); box-shadow: var(--schaduw-2);
  animation: opkomen var(--duur-snel) var(--uitloop);
}
.menu button, .menu a {
  display: flex; align-items: center; gap: var(--ruimte-3); width: 100%;
  min-height: calc(34px * var(--dichtheid)); padding: 0 var(--ruimte-3);
  background: none; border: none; border-radius: var(--radius-2);
  color: var(--tekst); font-size: var(--tekst-m); font-weight: 500;
  text-align: left; text-decoration: none; cursor: pointer;
}
.menu button:hover, .menu a:hover { background: var(--vlak-diep); }
.menu button svg, .menu a svg { width: 16px; height: 16px; color: var(--tekst-3); }
.menu .scheiding { height: 1px; margin: 6px 0; background: var(--rand); }
.menu .gevaar { color: var(--gevaar); }
.menu .gevaar svg { color: var(--gevaar); }
.menukop {
  padding: var(--ruimte-2) var(--ruimte-3) var(--ruimte-1);
  font-size: var(--tekst-xs); font-weight: 600; letter-spacing: .04em;
  text-transform: uppercase; color: var(--tekst-3);
}
.menuwie { display: flex; flex-direction: column; gap: 1px;
  padding: var(--ruimte-2) var(--ruimte-3) var(--ruimte-2); }
.menunaam { font-size: var(--tekst-m); font-weight: 600; color: var(--tekst); }
.menuadres { font-size: var(--tekst-s); color: var(--tekst-2); overflow-wrap: anywhere; }
.menuvink { display: flex; align-items: center; gap: var(--ruimte-3);
  min-height: calc(34px * var(--dichtheid)); padding: 0 var(--ruimte-3);
  border-radius: var(--radius-2); font-size: var(--tekst-m); cursor: pointer; }
.menuvink:hover { background: var(--vlak-diep); }
.menuvink input { width: 16px; height: 16px; accent-color: var(--groen-700); }

/* De tekstgroottekiezer in het menu en op de instellingen. */
.tekstkiezer { display: flex; gap: var(--ruimte-1); padding: 0 var(--ruimte-2) var(--ruimte-2); }
.tekststap {
  position: relative; flex: 1;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 2px; min-height: 48px; padding: var(--ruimte-2) var(--ruimte-1);
  border: 1px solid var(--rand-sterk); border-radius: var(--radius-2); cursor: pointer;
  transition: border-color var(--duur-snel), background var(--duur-snel);
}
.tekststap input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.tekststap .letter { font-weight: 600; line-height: 1; color: var(--tekst); }
.tekststap:nth-child(1) .letter { font-size: var(--monster-compact); }
.tekststap:nth-child(2) .letter { font-size: var(--monster-normaal); }
.tekststap:nth-child(3) .letter { font-size: var(--monster-groot); }
.tekststap .naam { font-size: var(--tekst-xs); color: var(--tekst-2); }
.tekststap:hover { border-color: var(--groen-700); }
.tekststap.gekozen { border-color: var(--groen-700); background: var(--groen-50);
  box-shadow: inset 0 0 0 1px var(--groen-700); }
.tekststap.gekozen .naam { color: var(--groen-700); font-weight: 600; }
.tekststap:focus-within { outline: var(--focusring) solid var(--groen-700); outline-offset: 2px; }

/* De weergavewissel (oud/nieuw) in het menu: twee knoppen, één gekozen. */
.weergavewissel { display: flex; gap: var(--ruimte-1); padding: 0 var(--ruimte-2) var(--ruimte-2); }
.weergavewissel button {
  flex: 1; min-height: 32px; padding: 0 var(--ruimte-2);
  border: 1px solid var(--rand-sterk); border-radius: var(--radius-2);
  background: var(--vlak); font-size: var(--tekst-s); font-weight: 600; color: var(--tekst-2);
}
.weergavewissel button[aria-pressed="true"] { background: var(--inkt-900); color: var(--tekst-op-donker);
  border-color: var(--inkt-900); }

/* ---- Meldingenpaneel (kopbalk) --------------------------------------------- */
.meldpaneel { min-width: 320px; max-width: 380px; padding: 0; overflow: hidden; }
.meldpaneel .meldkop { display: flex; align-items: center; justify-content: space-between;
  padding: var(--ruimte-3) var(--ruimte-4); border-bottom: 1px solid var(--rand);
  font-weight: 600; font-size: var(--tekst-m); }
.meldpaneel .meldlijst { max-height: 60vh; overflow-y: auto; padding: 6px; }
.meldpaneel .meldregel { display: grid; grid-template-columns: auto 1fr; gap: var(--ruimte-2)
  var(--ruimte-3); align-items: start; padding: var(--ruimte-2) var(--ruimte-3);
  border-radius: var(--radius-2); text-decoration: none; color: inherit; min-height: 0; }
.meldpaneel .meldregel:hover { background: var(--vlak-diep); }
.meldpaneel .meldregel .lamp::before { margin-top: 5px; }
.meldpaneel .meldregel .titel { display: block; font-size: var(--tekst-m); font-weight: 500;
  color: var(--tekst); line-height: 1.35; }
.meldpaneel .meldregel .onder { display: block; font-size: var(--tekst-xs); color: var(--tekst-3); }
.meldpaneel .meldvoet { padding: var(--ruimte-2) var(--ruimte-3); border-top: 1px solid var(--rand); }
.meldpaneel .meldleeg { padding: var(--ruimte-5) var(--ruimte-4); color: var(--tekst-3);
  font-size: var(--tekst-m); text-align: center; }

/* ---- Opdrachtpalet ---------------------------------------------------------- */
.palet {
  width: 100%; max-width: 640px; margin-top: 10vh; align-self: start;
  background: var(--vlak); border-radius: var(--radius-4);
  box-shadow: var(--schaduw-3); overflow: hidden;
  animation: opkomen var(--duur-traag) var(--uitloop);
}
.palet-invoer { display: flex; align-items: center; gap: var(--ruimte-3);
  padding: var(--ruimte-3) var(--ruimte-5); border-bottom: 1px solid var(--rand); }
.palet-invoer svg { width: 18px; height: 18px; color: var(--tekst-3); flex: none; }
.palet-invoer input { flex: 1; border: none; outline: none; font-size: var(--tekst-xl);
  background: none; min-height: 40px; }
.palet-lijst { max-height: 52vh; overflow-y: auto; padding: 6px; }
.palet-groep { padding: var(--ruimte-3) var(--ruimte-3) 4px; }
.palet-groep .label { font-size: var(--tekst-xs); font-weight: 600; letter-spacing: .04em;
  text-transform: uppercase; }
.palet-regel {
  display: flex; align-items: center; gap: var(--ruimte-3); width: 100%;
  min-height: 42px; padding: 0 var(--ruimte-3);
  background: none; border: none; border-radius: var(--radius-2);
  text-align: left; text-decoration: none; color: var(--tekst); cursor: pointer;
}
.palet-regel svg { width: 16px; height: 16px; color: var(--tekst-3); flex: none; }
.palet-regel > span { display: flex; flex-direction: column; min-width: 0; }
.palet-regel .titel { font-size: var(--tekst-m); font-weight: 500; }
.palet-regel .onder { font-size: var(--tekst-xs); color: var(--tekst-3); }
.palet-regel[aria-selected="true"] { background: var(--groen-50); }
.palet-regel[aria-selected="true"] svg { color: var(--groen-700); }
.palet-voet { display: flex; gap: var(--ruimte-4); padding: var(--ruimte-2) var(--ruimte-5);
  border-top: 1px solid var(--rand); background: var(--vlak-zacht);
  font-size: var(--tekst-xs); color: var(--tekst-3); }
.palet-voet span { display: inline-flex; align-items: center; gap: 4px; }

kbd {
  display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 5px;
  background: var(--vlak-diep); border: 1px solid var(--rand-sterk);
  border-bottom-width: 2px; border-radius: 5px;
  font-family: var(--letter); font-size: 11px; font-weight: 600; color: var(--tekst-2);
}

/* ---- Onderbalk en meerblad (telefoon) ---------------------------------------- */
.onderbalk { display: none; }

.meerlaag { position: fixed; inset: 0; z-index: 60; display: grid; align-items: end;
  background: var(--sluier-zacht); }
.meerpaneel {
  background: var(--vlak); border-radius: var(--radius-4) var(--radius-4) 0 0;
  padding: var(--ruimte-3) var(--ruimte-4) calc(var(--ruimte-4) + env(safe-area-inset-bottom));
  display: flex; flex-direction: column; gap: var(--ruimte-3);
  max-height: 88dvh; overflow-y: auto;
  animation: meeromhoog var(--duur-normaal) var(--uitloop) both;
}
.meergreep { width: 36px; height: 4px; border-radius: var(--radius-pil);
  background: var(--rand-sterk); margin: 0 auto var(--ruimte-2); }
.meerwie { display: flex; align-items: center; gap: var(--ruimte-3);
  padding-bottom: var(--ruimte-3); border-bottom: 1px solid var(--rand); }
.meerwie > span { display: flex; flex-direction: column; min-width: 0; }
.meerwie .naam { font-weight: 600; }
.meergroep { display: flex; flex-direction: column; gap: var(--ruimte-1);
  padding-top: var(--ruimte-3); border-top: 1px solid var(--rand); }
.meerpaneel .navgroep a { min-height: 44px; font-size: var(--tekst-l); }

@media (max-width: 1279px) {
  /* Het zoekveld krimpt eerst (tot zijn minimum), pas daarna het kruimelpad. */
  .zoekbalk { flex-basis: 220px; flex-shrink: 3; }
  /* De naam staat ook in het menu zelf; de ruimte gaat naar het kruimelpad. */
  .gebruiker-tekst { display: none; }
}

@media (max-width: 1023px) {
  .schil, .schil.smal { grid-template-columns: minmax(0, 1fr); }
  .zijbalk { display: none; }
  .topbalk { padding: 0 var(--ruimte-4); gap: var(--ruimte-2); }
  .topbalk .zoekbalk { flex: 0 0 auto; width: calc(34px * var(--dichtheid)); min-width: 0; padding: 0;
    justify-content: center; background: none; border-color: transparent; }
  .topbalk .zoekbalk .zoektekst, .topbalk .zoekbalk kbd { display: none; }
  .topbalk .zoekbalk svg { width: 19px; height: 19px; }
  .gebruiker-tekst, .gebruiker > svg { display: none; }
  .gebruiker { padding: 0 3px; }
  .kruimels { font-size: var(--tekst-s); }
  .werkblad { padding: var(--ruimte-4) var(--ruimte-4) 96px; }

  .onderbalk {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; display: flex;
    padding: 4px 4px calc(4px + env(safe-area-inset-bottom));
    background: var(--vlak); border-top: 1px solid var(--rand);
  }
  .onderbalk a, .onderbalk button {
    position: relative; flex: 1; display: flex; flex-direction: column; align-items: center;
    gap: 2px; min-height: 52px; padding: 6px 2px; border-radius: var(--radius-2);
    background: none; border: none; font: inherit;
    text-decoration: none; color: var(--tekst-3);
    font-size: var(--tekst-xs); font-weight: 600;
  }
  .onderbalk a svg, .onderbalk button svg { width: 22px; height: 22px; }
  .onderbalk a[aria-current="page"] { color: var(--groen-700); }
  .onderbalk .teller { position: absolute; top: 2px; left: 50%; margin-left: 4px;
    min-width: 16px; height: 16px; line-height: 16px; padding: 0 4px;
    border-radius: var(--radius-pil); background: var(--gevaar-vlak); color: var(--tekst-op-donker);
    font-size: var(--tekst-xs); font-weight: 700; text-align: center; }
  .palet { margin-top: 0; max-width: none; height: 100dvh; border-radius: 0; }
}

/* Kruimelpad op minder ruimte: eerst vallen de voorouders weg (alleen ouder › huidig blijft),
   op een telefoon alleen de huidige plek; de kop van het scherm zegt de rest. */
@media (max-width: 1279px) {
  .kruimels a:not(:last-of-type), .kruimels .scheid:not(:last-of-type) { display: none; }
}
@media (max-width: 767px) {
  .kruimels a, .kruimels .scheid { display: none; }
  .kruimels .huidig { max-width: 100%; }
}