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

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

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

.merk {
  padding: var(--ruimte-5) var(--ruimte-5) var(--ruimte-4);
  border-bottom: 1px solid var(--zijbalk-lijn);
}
.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);
  max-width: 1400px;
  width: 100%;
}

.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; }
}