/* ============================================================
   LAYOUT - app-schil, zijbalk, kopbalk, pagina's, login
   ============================================================ */

/* ---------- 1. APP-SCHIL ---------- */

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

/* Zolang de auth-check loopt is de app verborgen. */
.app[hidden] { display: none; }

/* ---------- 2. ZIJBALK ---------- */

.zijbalk {
  position: sticky;
  top: 0;
  z-index: var(--z-zijbalk);
  display: flex;
  flex-direction: column;
  height: 100vh;
  background: var(--ink);
  color: #fff;
  border-right: var(--lijn-dik) solid var(--ink);
}

.zijbalk-kop {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-2);
  padding: 0 var(--sp-4);
  height: var(--nav-h);
  border-bottom: 1px solid var(--ink-3);
  flex-shrink: 0;
}

/* Het logo: <LUCY'S WEB/> in mono, zoals op de site. */
.logo {
  font-family: var(--mono);
  font-weight: 700;
  font-size: .82rem;
  letter-spacing: .02em;
  color: #fff;
  white-space: nowrap;
}
.logo .haak { color: var(--roze); }

.logo-sub {
  display: block;
  font-size: .56rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--geel);
  margin-top: 2px;
}

.zijbalk-nav {
  flex: 1;
  overflow-y: auto;
  padding: var(--sp-4) var(--sp-3);
}

.nav-groep + .nav-groep { margin-top: var(--sp-5); }

.nav-groep-kop {
  padding: 0 var(--sp-3) var(--sp-2);
  font-size: .6rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: #6b6b7a;
  font-weight: 700;
}

.nav-link {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: 10px var(--sp-3);
  border-radius: var(--ronding);
  color: #c9c9d2;
  font-size: var(--t-klein);
  font-weight: 500;
  letter-spacing: .01em;
  transition: background var(--snel), color var(--snel);
}

.nav-link:hover { background: var(--ink-2); color: #fff; }

.nav-link.actief {
  background: var(--ink-2);
  color: #fff;
  font-weight: 700;
}

/* Actieve pagina krijgt een roze streep aan de linkerkant. */
.nav-link.actief::before {
  content: "";
  position: absolute;
  left: 0;
  top: 6px;
  bottom: 6px;
  width: 3px;
  background: var(--roze);
  border-radius: 999px;
}

.nav-link .ikoon { width: 16px; flex-shrink: 0; opacity: .9; }
.nav-link.actief .ikoon { opacity: 1; }

/* Teller achter een menu-item, bijvoorbeeld openstaande taken. */
.nav-teller {
  margin-left: auto;
  min-width: 20px;
  padding: 1px 6px;
  border-radius: 999px;
  background: var(--ink-3);
  color: #d5d5dd;
  font-size: .62rem;
  font-weight: 700;
  text-align: center;
  letter-spacing: 0;
}
.nav-teller.aandacht { background: var(--roze); color: #fff; }

.zijbalk-voet {
  flex-shrink: 0;
  padding: var(--sp-3);
  border-top: 1px solid var(--ink-3);
}

.gebruiker {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-2) var(--sp-3);
  margin-bottom: var(--sp-2);
  min-width: 0;
}

.gebruiker-bol {
  width: 30px;
  height: 30px;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--roze);
  color: #fff;
  font-size: .7rem;
  font-weight: 700;
}

.gebruiker-mail {
  font-size: .68rem;
  color: #a5a5b2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ---------- 3. HOOFDKOLOM ---------- */

.hoofd {
  display: flex;
  flex-direction: column;
  min-width: 0; /* voorkomt dat brede tabellen de grid oprekken */
}

.kopbalk {
  position: sticky;
  top: 0;
  z-index: var(--z-kopbalk);
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  height: var(--nav-h);
  padding: 0 var(--pad-x);
  background: rgba(255, 255, 255, .88);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--lijn);
  flex-shrink: 0;
}

.kopbalk-titel {
  font-family: var(--display);
  font-size: 1.05rem;
  font-weight: 800;
  letter-spacing: -.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.kopbalk-acties {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: var(--sp-3);
}

/* Hamburger: alleen op mobiel zichtbaar (zie responsive.css). */
.menu-knop {
  display: none;
  width: 38px;
  height: 38px;
  place-items: center;
  border: var(--lijn-dik) solid var(--ink);
  border-radius: var(--ronding);
  background: var(--paper);
  flex-shrink: 0;
}

.inhoud {
  flex: 1;
  padding: var(--sp-6) var(--pad-x) var(--sp-7);
  max-width: var(--max);
  width: 100%;
}

/* ---------- 4. PAGINAKOP ---------- */

.pagina-kop {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--sp-4);
  flex-wrap: wrap;
  margin-bottom: var(--sp-5);
}

.pagina-kop h1 { margin-bottom: 4px; }

.pagina-kop .label { display: block; margin-bottom: var(--sp-2); }

.pagina-acties {
  display: flex;
  gap: calc(var(--vspr) + 10px);
  flex-wrap: wrap;
  align-items: center;
}

/* ---------- 5. RASTERS ---------- */

.raster {
  display: grid;
  gap: var(--sp-4);
}

.raster-stats {
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
}

.raster-kaarten {
  grid-template-columns: repeat(auto-fill, minmax(310px, 1fr));
}

.raster-2 { grid-template-columns: repeat(auto-fit, minmax(380px, 1fr)); }

.sectie { margin-top: var(--sp-6); }

.sectie-kop {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  margin-bottom: var(--sp-4);
  padding-bottom: var(--sp-2);
  border-bottom: var(--lijn-dik) solid var(--ink);
}

.sectie-kop h2 {
  font-size: var(--t-m);
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}

/* ---------- 6. LOGINPAGINA ---------- */

.login-body {
  display: grid;
  place-items: center;
  min-height: 100vh;
  padding: var(--sp-5);
  background: var(--ink);
  /* Fijn raster op de achtergrond: verwijzing naar code, rustig gehouden. */
  background-image:
    linear-gradient(rgba(255, 255, 255, .04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .04) 1px, transparent 1px);
  background-size: 44px 44px;
}

.login-kaart {
  position: relative;
  width: 100%;
  max-width: 420px;
  background: var(--paper);
  border: var(--lijn-dik) solid var(--ink);
  border-radius: var(--ronding);
  padding: var(--sp-6);
  box-shadow: var(--schaduw-3);
}

/* De verspringende omlijning, hier in geel. */
.login-kaart::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  border: var(--lijn-dik) solid var(--geel);
  border-radius: var(--ronding);
  transform: translate(var(--vspr), var(--vspr));
}

.login-logo {
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: var(--sp-1);
}
.login-logo .haak { color: var(--roze); }

.login-titel {
  font-family: var(--display);
  font-size: 1.5rem;
  font-weight: 800;
  margin-bottom: var(--sp-1);
}

.login-tekst {
  font-size: var(--t-klein);
  color: var(--muted);
  margin-bottom: var(--sp-5);
}

.login-form { display: grid; gap: var(--sp-4); }

.login-voet {
  margin-top: var(--sp-5);
  padding-top: var(--sp-4);
  border-top: 1px solid var(--lijn);
  font-size: var(--t-label);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
  text-align: center;
}

/* ---------- De kopbalk ----------
   De plusknop stond hier én op elke pagina; die is eruit. Wat overblijft
   is waar je bent, met de roze dubbele schuine streep ervoor — hetzelfde
   teken dat in de secties terugkomt. Klein merkteken, geen decoratie. */
.kopbalk-titel {
  display: flex;
  align-items: baseline;
  gap: 7px;
  min-width: 0;
}

.kopbalk-haak {
  font-family: var(--mono);
  font-weight: 700;
  font-size: .95rem;
  color: var(--roze);
  flex: 0 0 auto;
}

#kopbalk-titel {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ============================================================
   DE INLOGPAGINA
   ------------------------------------------------------------
   Het eerste wat iemand van je product ziet. Zachtere hoeken, meer
   lucht, en een tekst die klinkt alsof er iemand achter zit.
   ============================================================ */

.login-kaart {
  max-width: 440px;
  padding: var(--sp-6) var(--sp-6) var(--sp-5);
  border-radius: var(--ronding-blok);
}

.login-kaart::after { border-radius: var(--ronding-blok); }

.login-titel {
  font-size: 1.75rem;
  letter-spacing: -.02em;
  margin-bottom: var(--sp-2);
}

.login-tekst {
  font-family: var(--display);
  font-size: var(--t-lead);
  color: var(--label);
  line-height: 1.5;
  margin-bottom: var(--sp-6);
}

.login-voet {
  text-transform: none;
  letter-spacing: 0;
  font-family: var(--mono);
  color: var(--muted);
}

.login-voet .haak { color: var(--roze); }

/* ---------- Het oogje ----------
   Zit in het veld, niet ernaast: het hoort bij het wachtwoord en
   niet bij het formulier. */
.wachtwoordveld { position: relative; }

.wachtwoordveld input { padding-right: 52px; }

.oogknop {
  position: absolute;
  right: 6px;
  top: 50%;
  translate: 0 -50%;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  padding: 0;
  color: var(--muted);
  background: none;
  border: 0;
  border-radius: var(--ronding);
  cursor: pointer;
  transition: color var(--snel), background var(--snel);
}

.oogknop:hover { color: var(--ink); background: var(--vlak-2); }

/* Aan staat het oogje in het roze, zodat je ziet dat je wachtwoord
   op dit moment leesbaar op je scherm staat. */
.oogknop.is-open { color: var(--roze); }

.oogknop .oog-dicht { display: none; }
.oogknop.is-open .oog-open { display: none; }
.oogknop.is-open .oog-dicht { display: block; }

/* De voettekst van de inlogpagina: wie het gemaakt heeft en waarvoor.
   Twee regels, want dat leest rustiger dan één lange zin. */
.login-voet {
  display: grid;
  gap: 3px;
  text-align: center;
}

.login-voet-wie { font-weight: 700; color: var(--label); }
.login-voet-waarom { color: var(--muted); }

/* Een detailpagina zonder zijkolom hoort de volle breedte te krijgen.
   Sinds de naslag onder de inhoud staat in plaats van ernaast, is dat
   bij projecten en klanten het geval. */
.detail:has(> :only-child) { grid-template-columns: minmax(0, 1fr); }