/* ============================================================
   VKRNL - css/layout.css
   Applicatieraamwerk: zijbalk, kopbalk, inhoud, inlogscherm.
   ============================================================ */

.app {
  display: grid;
  grid-template-columns: var(--zijbalk-breedte) 1fr;
  min-height: 100vh;
  /* Op een telefoon telt 100vh de adresbalk mee, ook als die in beeld
     staat. Het scherm is dan hoger dan wat je ziet en de onderste
     regel valt weg. 100dvh rekent met de ruimte die er echt is. */
  min-height: 100dvh;
}

/* --- Zijbalk --------------------------------------------- */
.zijbalk {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100dvh;
  display: flex;
  flex-direction: column;
  background: var(--zijbalk-bg);
  color: var(--zijbalk-tekst);
  border-right: 1px solid var(--zijbalk-lijn);
}

.merk {
  position: relative;
  padding: var(--ruimte-5) var(--ruimte-5) var(--ruimte-4);
  border-bottom: 1px solid var(--zijbalk-lijn);
}

/* --- Het menu inklappen (breed scherm) --------------------

   De zijbalk neemt 240 px. In de planning en in brede tabellen is dat
   ruimte die je liever aan de inhoud geeft. Ingeklapt blijven alleen
   de pictogrammen staan; de keuze wordt onthouden (js/navigation.js).
   ---------------------------------------------------------- */
.zijbalk-klap {
  position: absolute;
  top: var(--ruimte-3);
  right: var(--ruimte-3);
  display: grid;
  place-items: center;
  width: 30px; height: 30px;
  padding: 0;
  border: 1px solid var(--zijbalk-lijn);
  border-radius: var(--rond-sm);
  background: transparent;
  color: var(--zijbalk-tekst);
  cursor: pointer;
}
.zijbalk-klap:hover { background: var(--zijbalk-hover); color: #fff; }
.zijbalk-klap svg { width: 16px; height: 16px; transition: transform .15s ease; }

body.zijbalk-ingeklapt .zijbalk-klap svg { transform: rotate(180deg); }

@media (min-width: 861px) {
  body.zijbalk-ingeklapt .app { grid-template-columns: 68px 1fr; }

  body.zijbalk-ingeklapt .merk {
    padding: var(--ruimte-3) 0 calc(var(--ruimte-3) + 34px);
    text-align: center;
  }
  body.zijbalk-ingeklapt .merk-logo { max-height: 34px; }
  body.zijbalk-ingeklapt .merk-naam { font-size: 1rem; letter-spacing: .04em; }
  body.zijbalk-ingeklapt .zijbalk-klap {
    top: auto;
    bottom: var(--ruimte-2);
    right: 50%;
    transform: translateX(50%);
  }

  body.zijbalk-ingeklapt .menu { padding: var(--ruimte-3) var(--ruimte-2); }
  body.zijbalk-ingeklapt .menu-groep { display: none; }
  body.zijbalk-ingeklapt .menu-link {
    justify-content: center;
    padding: 10px 0;
  }
  body.zijbalk-ingeklapt .menu-link span { display: none; }

  body.zijbalk-ingeklapt .zijbalk-voet { padding: var(--ruimte-3) var(--ruimte-2); }
  body.zijbalk-ingeklapt .gebruiker-blok { justify-content: center; }
  body.zijbalk-ingeklapt .gebruiker-blok > div:last-child { display: none; }
  body.zijbalk-ingeklapt .zijbalk-voet .knop span { display: none; }
}

/* Op een telefoon is de zijbalk een uitschuifpaneel: daar heeft
   inklappen geen betekenis. */
@media (max-width: 860px) {
  .zijbalk-klap { display: none; }
}
.merk-naam {
  display: block;
  font-size: 1.5rem;
  font-weight: 800;
  letter-spacing: .12em;
  color: var(--zijbalk-tekst-fel);
  line-height: 1;
}
.merk-onder {
  display: block;
  margin-top: 6px;
  font-size: var(--tekst-xs);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--zijbalk-tekst);
  opacity: .7;
}
/* Signatuur: markeringsstreep uit de wegenwereld */
.merk-streep {
  height: 6px;
  margin-top: var(--ruimte-4);
  border-radius: 2px;
  background: repeating-linear-gradient(
    115deg,
    var(--blauw-500) 0 14px,
    transparent 14px 26px
  );
  background-color: var(--zijbalk-hover);
}

.menu {
  flex: 1;
  overflow-y: auto;
  padding: var(--ruimte-4) var(--ruimte-3);
}
.menu-groep {
  margin: var(--ruimte-4) var(--ruimte-3) var(--ruimte-2);
  font-size: 10px;
  letter-spacing: .12em;
  text-transform: uppercase;
  font-weight: 700;
  color: #6f8199;
}
.menu-groep:first-child { margin-top: 0; }

.menu-link {
  display: flex;
  align-items: center;
  gap: var(--ruimte-3);
  padding: 10px var(--ruimte-3);
  margin-bottom: 2px;
  border-radius: var(--rond-sm);
  color: var(--zijbalk-tekst);
  font-size: var(--tekst-md);
  font-weight: 550;
  text-decoration: none;
  transition: background .12s ease, color .12s ease;
}
.menu-link:hover {
  background: var(--zijbalk-hover);
  color: var(--zijbalk-tekst-fel);
  text-decoration: none;
}
.menu-link.actief {
  background: var(--zijbalk-actief);
  color: #fff;
  font-weight: 650;
}
.menu-link .pictogram { width: 20px; height: 20px; flex: none; }

.zijbalk-voet {
  padding: var(--ruimte-4);
  border-top: 1px solid var(--zijbalk-lijn);
  background: var(--zijbalk-bg-diep);
}
.gebruiker-blok {
  display: flex;
  align-items: center;
  gap: var(--ruimte-3);
  margin-bottom: var(--ruimte-3);
}
.initialen {
  width: 38px; height: 38px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--blauw-600);
  color: #fff;
  font-weight: 700;
  font-size: var(--tekst-sm);
}
.gebruiker-naam {
  color: var(--zijbalk-tekst-fel);
  font-weight: 600;
  font-size: var(--tekst-md);
  line-height: 1.2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.gebruiker-rol {
  font-size: var(--tekst-xs);
  color: var(--zijbalk-tekst);
  opacity: .75;
}
.zijbalk-voet .knop {
  width: 100%;
  background: transparent;
  border-color: var(--zijbalk-lijn);
  color: var(--zijbalk-tekst);
}
.zijbalk-voet .knop:hover { background: var(--zijbalk-hover); color: #fff; }

/* --- Hoofdgebied ----------------------------------------- */
.hoofd {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.kopbalk {
  position: sticky;
  top: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ruimte-4);
  min-height: var(--kopbalk-hoogte);
  padding: var(--ruimte-3) var(--ruimte-6);
  background: var(--vlak);
  border-bottom: 1px solid var(--lijn);
}
.kopbalk h1 {
  margin: 0;
  font-size: var(--tekst-xl);
}
.kopbalk-onder {
  font-size: var(--tekst-sm);
  color: var(--tekst-zacht);
}
.kopbalk-acties { display: flex; gap: var(--ruimte-2); align-items: center; }

.menuknop { display: none; }

.inhoud {
  flex: 1;
  padding: var(--ruimte-6);
  /* Geen vaste bovengrens meer. Op een breed scherm werd de ruimte
     rechts weggegooid terwijl de tabellen tegelijk moesten schuiven.
     Een maat op de LEESBARE tekst hoort bij tekstpagina's, niet bij
     een werkscherm met tabellen. */
  max-width: 1800px;
  width: 100%;
}

/* Onder 1500px telt elke pixel: minder marge rondom, zodat de tabel
   verder komt voordat hij moet schuiven. */
@media (max-width: 1500px) {
  .inhoud { padding: var(--ruimte-4); }
}

.sectie { margin-bottom: var(--ruimte-6); }
.sectie-kop {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ruimte-3);
  margin-bottom: var(--ruimte-4);
}
.sectie-kop h2 { margin: 0; font-size: var(--tekst-lg); }

.twee-koloms {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: var(--ruimte-5);
  align-items: start;
}

/* --- Mobiele onderbalk (alleen op telefoon zichtbaar) ---- */
.mobiele-balk { display: none; }

/* --- Inlogscherm ----------------------------------------- */
.inlogpagina {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 1fr 1fr;
  background: var(--achtergrond);
}
.inlog-zijkant {
  background: var(--zijbalk-bg);
  color: var(--zijbalk-tekst);
  padding: var(--ruimte-7);
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.inlog-zijkant .merk-naam { font-size: 3rem; }
.inlog-zijkant .merk-streep { max-width: 220px; }
.inlog-zijkant p { max-width: 380px; margin-top: var(--ruimte-5); }

.inlog-vak {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--ruimte-6);
}
.inlog-formulier {
  width: 100%;
  max-width: 380px;
}
.inlog-formulier h1 { font-size: var(--tekst-2xl); }
.inlog-formulier .knop-primair { min-height: var(--raak-hoogte); }
.inlog-hulp {
  margin-top: var(--ruimte-4);
  text-align: center;
  font-size: var(--tekst-sm);
}

/* --- Laadscherm ------------------------------------------ */
.opstartscherm {
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  background: var(--achtergrond);
  z-index: 999;
}

/* ============================================================
   HET LOGO IN DE ZIJBALK
   Staat op de plek waar eerst de tekst VKRNL stond. Komt uit
   Instellingen, tabblad Bedrijfsgegevens; is er geen logo, dan
   valt de zijbalk terug op de merknaam.

   De maximale hoogte is er zodat een groot geüpload logo de rest
   van het menu niet wegdrukt.
   ============================================================ */
.merk-logo {
  display: block;
  max-width: 100%;
  /* Ruimer dan de 52px van v80. Toen stond er nog een ondertitel en
     een streep onder; die zijn eruit, dus het logo mag de ruimte
     hebben waar het om vraagt. */
  max-height: 76px;
  width: auto;
  height: auto;
  object-fit: contain;
}

/* Staat er een logo, dan hoeft het blok niet zo hoog: de ondertitel
   en de streep die er eerst onder stonden, zijn weg. */
.merk.merk-met-logo {
  padding: var(--ruimte-4) var(--ruimte-5);
}

/* ============================================================
   DE UITLOGKNOP
   Kleiner dan de rest: hij hoort er te zijn, maar hoeft geen
   aandacht te trekken. Op mobiel alleen het pictogram.
   ============================================================ */
.zijbalk-voet .knop-mini {
  width: auto;
  padding: var(--ruimte-1) var(--ruimte-3);
  font-size: var(--tekst-xs);
  gap: var(--ruimte-2);
  background: transparent;
  border: 1px solid var(--zijbalk-lijn);
  border-radius: var(--rond-sm);
  color: var(--zijbalk-tekst);
  display: inline-flex;
  align-items: center;
  cursor: pointer;
}
.zijbalk-voet .knop-mini:hover { background: var(--zijbalk-hover); color: #fff; }
.zijbalk-voet .knop-mini .pictogram { width: 15px; height: 15px; }


/* ============================================================
   STAP 26A - DE PAGINA WACHTWOORD INSTELLEN

   Die pagina gebruikte klassen die nergens bestonden (inlogkaart,
   merknaam - zonder streepje). Ze zijn hernoemd naar de vorm die de
   opmaak kent; deze drie ontbraken nog helemaal.

   Het is de pagina waar iemand op landt vanuit een wachtwoordmail.
   Die zag er tot nu toe uit als kale html.
   ============================================================ */

.inlog-merk {
  text-align: center;
  margin-bottom: var(--ruimte-5);
}

.inlog-merk .merk-naam {
  font-size: 2rem;
  color: var(--tekst);
}

.inlog-merk .merk-streep {
  max-width: 160px;
  margin: var(--ruimte-3) auto 0;
}

.inlog-kaart {
  background: var(--vlak);
  border: 1px solid var(--lijn);
  border-radius: var(--rond);
  padding: var(--ruimte-6);
  box-shadow: 0 2px 12px rgba(16, 28, 46, .06);
}

.inlog-kaart h1 {
  font-size: var(--tekst-xl);
  margin-bottom: var(--ruimte-2);
}

.inlog-voet {
  margin-top: var(--ruimte-5);
  text-align: center;
  font-size: var(--tekst-sm);
  color: var(--tekst-licht);
}

@media (max-width: 860px) {
  .inlog-kaart { padding: var(--ruimte-4); }
  .inlog-merk .merk-naam { font-size: 1.6rem; }
}