/* Lova — het klantportaal op lova.bytesnel.nl (september 2026).

   Opbouw uit het Figma-ontwerp "AI Agent Dashboard" (donkere inklapbare
   zijbalk, licht werkvlak, Outfit voor koppen en cijfers), in de kleuren van
   het Lova-logo: teal #0F766E en mint #34D399. Het logo zelf staat in
   lova-logo.css en views/partials/lova-logo.ejs.

   Alles hangt onder .lova-app. De gedeelde onderdelen uit style.css (kaarten,
   knoppen, pills, tabellen) lezen hun kleuren uit variabelen; die worden hier
   gezet, zodat bestaande pagina's zonder aanpassing meekleuren.

   Mint is te licht voor tekst op wit. Mint is voor stippen, balken en vlakken;
   tekst krijgt de donkere variant. */

.lova-app {
  --lova-merk: #0F766E;
  --lova-merk-donker: #0b5e57;
  --lova-merk-tint: rgba(15, 118, 110, 0.08);
  --lova-merk-rand: rgba(15, 118, 110, 0.22);
  --lova-mint: #34D399;
  --lova-mint-tekst: #047857;
  --lova-rood: #EF4444;
  --lova-rood-tekst: #B91C1C;
  --lova-amber: #D97706;
  --lova-nacht: #0e1118;

  --font-display: 'Outfit', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;

  --kleur-primair: var(--lova-merk);
  --kleur-primair-donker: var(--lova-merk-donker);
  --kleur-primair-licht: rgba(15, 118, 110, 0.14);
  --kleur-primair-zacht: rgba(15, 118, 110, 0.07);
  --kleur-canvas: #f4f5f7;
  --kleur-achtergrond: #ffffff;
  --kleur-sidebar: #eef0f4;
  --kleur-tekst: #111318;
  --kleur-tekst-zacht: #6b7088;
  --kleur-rand: rgba(17, 19, 24, 0.08);
  --kleur-rand-zacht: #eef0f4;
  --accent-licht: var(--lova-merk);
  --grafiek: var(--lova-merk);

  --radius: 12px;
  --radius-klein: 9px;
  --radius-groot: 16px;
  --schaduw: 0 1px 2px rgba(17, 19, 24, 0.03);
  --schaduw-hover: 0 8px 24px rgba(17, 19, 24, 0.08);

  --chip-groen-bg: rgba(52, 211, 153, 0.14); --chip-groen-tx: var(--lova-mint-tekst); --chip-groen-rand: rgba(52, 211, 153, 0.32);
  --chip-amber-bg: rgba(217, 119, 6, 0.10); --chip-amber-tx: #92400E; --chip-amber-rand: rgba(217, 119, 6, 0.28);
  --chip-blauw-bg: rgba(59, 130, 246, 0.10); --chip-blauw-tx: #1d4ed8; --chip-blauw-rand: rgba(59, 130, 246, 0.26);
  --chip-rood-bg: rgba(239, 68, 68, 0.10); --chip-rood-tx: var(--lova-rood-tekst); --chip-rood-rand: rgba(239, 68, 68, 0.28);
  --chip-grijs-bg: #eef0f4; --chip-grijs-tx: #4a4d5e; --chip-grijs-rand: rgba(17, 19, 24, 0.08);

  background: var(--kleur-canvas);
  color: var(--kleur-tekst);
}

.lova-app h1,
.lova-app h2,
.lova-app h3 { font-family: var(--font-display); letter-spacing: -0.01em; }

/* --- Schil ---------------------------------------------------------------- */

.lova-shell { display: flex; min-height: 100vh; }

.lova-zijbalk {
  width: 232px; flex-shrink: 0;
  position: sticky; top: 0; height: 100vh;
  display: flex; flex-direction: column;
  padding: 16px 10px 14px;
  background: var(--lova-nacht); color: #fff;
  border-right: 1px solid rgba(255, 255, 255, 0.06);
  overflow-y: auto; overflow-x: hidden;
  transition: width 0.22s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 30;
}
.lova-stil .lova-zijbalk { transition: none; }

.lova-merk {
  display: flex; align-items: center; gap: 10px;
  padding: 2px 4px 14px; margin-bottom: 10px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.lova-merk-logo { display: grid; place-items: center; flex-shrink: 0; width: 36px; height: 36px; }
.lova-merk-tekst { display: flex; flex-direction: column; min-width: 0; line-height: 1.2; }
.lova-merk-naam { font-family: var(--font-display); font-size: 17px; font-weight: 700; color: #fff; }
.lova-merk-sub { font-family: var(--font-mono); font-size: 11px; color: rgba(255, 255, 255, 0.4); white-space: nowrap; }

.lova-inklap {
  margin-left: auto; flex-shrink: 0;
  display: grid; place-items: center; width: 28px; height: 28px;
  border: 0; border-radius: 8px; background: transparent;
  color: rgba(255, 255, 255, 0.45); cursor: pointer;
}
.lova-inklap:hover { background: rgba(255, 255, 255, 0.06); color: #fff; }
.lova-inklap svg { transition: transform 0.22s ease; }

.lova-nav { display: flex; flex-direction: column; gap: 2px; flex: 1; }
.lova-app .lova-nav-item {
  display: flex; align-items: center; gap: 10px;
  padding: 5px 8px; border-radius: 12px;
  font-size: 14px; font-weight: 500; white-space: nowrap;
  color: rgba(255, 255, 255, 0.55);
  transition: background-color 0.15s ease, color 0.15s ease;
}
.lova-app .lova-nav-item:hover { background: rgba(255, 255, 255, 0.05); color: #fff; }
.lova-app .lova-nav-item.actief { background: rgba(255, 255, 255, 0.08); color: #fff; }
.lova-nav-icoon { display: grid; place-items: center; flex-shrink: 0; width: 32px; height: 32px; border-radius: 9px; }
.lova-nav-item.actief .lova-nav-icoon { background: var(--lova-merk); color: #fff; }
/* Het rondje met het aantal, op het icoon. Daar en niet aan het eind van de
   regel, omdat de zijbalk standaard smal staat: dan is het icoon het enige wat
   je ziet, en moet het getal dáár zitten. */
.lova-nav-icoon { position: relative; }
.lova-nav-teller {
  position: absolute; top: -3px; right: -4px;
  min-width: 16px; height: 16px; padding: 0 4px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 999px;
  background: var(--lova-amber); color: #fff;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px; font-weight: 700; line-height: 1;
  /* Ring in de kleur van de zijbalk, zodat het rondje loskomt van het icoon. */
  box-shadow: 0 0 0 2px var(--lova-nacht, #0e1118);
}
.lova-nav-item.actief .lova-nav-teller { box-shadow: 0 0 0 2px var(--lova-nacht, #0e1118); }

.lova-nav-scheiding { height: 1px; margin: 8px; background: rgba(255, 255, 255, 0.06); }

.lova-status {
  display: flex; align-items: center; gap: 10px;
  margin: 10px 2px 8px; padding: 10px 12px; border-radius: 12px;
  background: rgba(52, 211, 153, 0.07); border: 1px solid rgba(52, 211, 153, 0.14);
}
.lova-status-stip { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; background: var(--lova-mint); }
.lova-status--werk .lova-status-stip { animation: lova-puls 1.6s ease-in-out infinite; }
.lova-status--concept { background: rgba(217, 119, 6, 0.09); border-color: rgba(217, 119, 6, 0.22); }
.lova-status--concept .lova-status-stip { background: #F59E0B; }
.lova-status-tekst { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
.lova-status-tekst strong { font-size: 12px; font-weight: 600; color: var(--lova-mint); white-space: nowrap; }
.lova-status--concept .lova-status-tekst strong { color: #FBBF24; }
.lova-status-tekst small { font-size: 11px; color: rgba(255, 255, 255, 0.38); white-space: nowrap; }
@keyframes lova-puls { 50% { opacity: 0.35; } }

.lova-account {
  position: relative;
  margin-top: 2px; padding-top: 10px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}
/* style.css geeft .portaal-account > summary een witte knop; in de donkere
   zijbalk is dat een wit vlak met onleesbare tekst. */
.lova-app .lova-account > summary {
  list-style: none; cursor: pointer;
  display: flex; align-items: center; gap: 10px;
  padding: 6px; border: 0; border-radius: 12px;
  background: transparent; color: #fff; font-size: inherit;
}
.lova-account > summary::-webkit-details-marker { display: none; }
.lova-app .lova-account > summary:hover { background: rgba(255, 255, 255, 0.05); }
.lova-avatar {
  display: grid; place-items: center; flex-shrink: 0; overflow: hidden;
  width: 32px; height: 32px; border-radius: 50%;
  background: rgba(52, 211, 153, 0.16); color: #6EE7B7;
  font-family: var(--font-display); font-size: 12px; font-weight: 700;
}
.lova-avatar img { width: 100%; height: 100%; object-fit: contain; background: #fff; }
.lova-account-tekst { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
.lova-account-naam { font-size: 12px; font-weight: 600; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lova-account-mail { font-size: 11px; color: rgba(255, 255, 255, 0.4); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lova-app .lova-account .portaal-account-menu {
  position: absolute; top: auto; bottom: calc(100% + 4px); left: 0; right: 0;
  min-width: 180px; z-index: 40;
}

.lova-hoofd { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.lova-topbalk { display: none; }
.lova-main { width: 100%; max-width: 1080px; margin: 0 auto; padding: 32px 32px 64px; }
.lova-overlay { display: none; }

/* Ingeklapt: alleen op brede schermen. Op mobiel schuift de zijbalk in en uit. */
@media (min-width: 861px) {
  /* De zijbalk staat standaard smal: een rij iconen langs de rand, zodat het
     werkvlak zo breed mogelijk is. Ga je er met de muis overheen of klik je erop,
     dan schuift hij open.

     Hij gaat daarbij over de inhoud héén en duwt niets opzij. Dat scheelt de
     pagina een herindeling bij elke muisbeweging, en het voelt daardoor rustig
     in plaats van springerig. Daarvoor staat de zijbalk hier vast aan de rand en
     houdt de hoofdkolom een marge ter grootte van de smalle balk. */
  .lova-shell { display: block; position: relative; }
  .lova-zijbalk { position: fixed; top: 0; left: 0; height: 100vh; }
  .lova-hoofd { margin-left: 232px; }

  .lova-shell.is-ingeklapt .lova-hoofd { margin-left: 68px; }
  .lova-shell.is-ingeklapt .lova-zijbalk { width: 68px; }

  /* Tijdelijk open: alleen de balk groeit, de marge van de inhoud niet. */
  .lova-shell.is-ingeklapt.is-uitgeklapt .lova-zijbalk {
    width: 232px;
    box-shadow: 0 14px 44px rgba(10, 12, 17, 0.38);
  }
  .lova-shell.is-ingeklapt.is-uitgeklapt .lova-merk { flex-direction: row; gap: 10px; }
  .lova-shell.is-ingeklapt.is-uitgeklapt .lova-inklap { margin-left: auto; }
  .lova-shell.is-ingeklapt.is-uitgeklapt .lova-inklap svg { transform: none; }
  /* Terug naar de opmaak die deze blokken zelf hebben. Met `display: block` liep
     de tekst door elkaar: het zijn kolommen van twee regels, geen losse blokken. */
  .lova-shell.is-ingeklapt.is-uitgeklapt .lova-merk-tekst,
  .lova-shell.is-ingeklapt.is-uitgeklapt .lova-status-tekst,
  .lova-shell.is-ingeklapt.is-uitgeklapt .lova-account-tekst { display: flex; }
  .lova-shell.is-ingeklapt.is-uitgeklapt .lova-nav-label { display: inline; }
  .lova-shell.is-ingeklapt.is-uitgeklapt .lova-nav-item { justify-content: flex-start; padding: 9px 10px; }
  .lova-shell.is-ingeklapt.is-uitgeklapt .lova-status { justify-content: flex-start; padding: 10px 12px; }
  .lova-shell.is-ingeklapt.is-uitgeklapt .lova-account > summary { justify-content: flex-start; }

  .lova-shell.is-ingeklapt .lova-merk { flex-direction: column; gap: 8px; }
  .lova-shell.is-ingeklapt .lova-inklap { margin-left: 0; }
  .lova-shell.is-ingeklapt .lova-inklap svg { transform: rotate(180deg); }
  .lova-shell.is-ingeklapt .lova-merk-tekst,
  .lova-shell.is-ingeklapt .lova-nav-label,
  .lova-shell.is-ingeklapt .lova-status-tekst,
  .lova-shell.is-ingeklapt .lova-account-tekst { display: none; }
  .lova-shell.is-ingeklapt .lova-nav-item { justify-content: center; padding: 5px; }
  .lova-shell.is-ingeklapt .lova-status { justify-content: center; padding: 10px 0; background: none; border-color: transparent; }
  .lova-shell.is-ingeklapt .lova-account > summary { justify-content: center; }
  .lova-shell.is-ingeklapt .lova-account .portaal-account-menu { right: auto; }
}

/* --- Paginakop ------------------------------------------------------------ */

/* In style.css is .pagina-kop een flexrij met de ondertitel rechts; in Lova staat
   de uitleg onder de titel. */
.lova-app .pagina-kop { display: block; }
.lova-app .pagina-kop,
.lova-app .portaal-welkom { margin-bottom: 24px; }
.lova-app .pagina-kop h1,
.lova-app .portaal-welkom h1 { font-size: 26px; font-weight: 700; margin: 2px 0 4px; }
.lova-app .pagina-kop p,
.lova-app .portaal-welkom p { font-size: 14px; margin: 0; }

.lova-label {
  font-family: var(--font-mono); font-size: 11px; font-weight: 500;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--kleur-tekst-zacht);
}
.lova-chip {
  font-size: 12px; font-weight: 500; white-space: nowrap;
  padding: 5px 12px; border-radius: 999px;
  background: var(--kleur-rand-zacht); color: var(--kleur-tekst-zacht);
}
.lova-hint { margin: -4px 0 16px; }

/* --- Gedeelde onderdelen in Lova-stijl ------------------------------------ */

.lova-app .kaart { border-radius: var(--radius); box-shadow: none; padding: 20px; margin-bottom: 16px; }
.lova-app .kaart h2 { font-size: 16px; font-weight: 600; }
.lova-app .kaart-kop { gap: 12px; }
.lova-app .kaart-kop h2 { margin: 0; }
.lova-app .portaal-kaarten .kaart { margin-bottom: 0; }
.lova-app .btn { border-radius: 10px; }
.lova-app .btn-primair { box-shadow: none; }
.lova-app .btn-primair:hover { box-shadow: 0 6px 16px rgba(15, 118, 110, 0.28); }
.lova-app .veld input:focus { box-shadow: 0 0 0 3px rgba(15, 118, 110, 0.14); }
.lova-app .kaart-link { color: var(--lova-merk); }

/* Groeigrafieken: de lijnkleur staat als attribuut in de partial; CSS gaat voor. */
.lova-app .mini-lijn { stroke: var(--lova-merk); }
.lova-app .mini-vlak,
.lova-app .mini-punt { fill: var(--lova-merk); }

/* --- KPI-kaarten ---------------------------------------------------------- */

.lova-kpi-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px; margin-bottom: 16px;
}
.lova-kpi {
  display: flex; flex-direction: column; gap: 12px;
  padding: 18px 20px; border-radius: var(--radius);
  background: var(--kleur-achtergrond); border: 1px solid var(--kleur-rand);
}
.lova-kpi-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.lova-kpi-spark { width: 80px; height: 32px; flex-shrink: 0; color: var(--lova-merk); }
.lova-kpi-waarde { font-family: var(--font-display); font-size: 30px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.1; }
.lova-kpi-delta { margin-top: 4px; font-size: 12px; font-weight: 500; color: var(--kleur-tekst-zacht); }

.lova-app .op { color: var(--lova-mint-tekst); }
.lova-app .af { color: var(--lova-rood-tekst); }

/* --- Weekgrafiek (balken) ------------------------------------------------- */

.lova-balken { display: flex; gap: 6px; height: 168px; margin: 8px 0 14px; }
.lova-balk { flex: 1; min-width: 0; display: grid; grid-template-rows: 1fr auto; gap: 6px; }
.lova-balk-spoor { position: relative; }
.lova-balk-vul {
  position: absolute; left: 0; right: 0; bottom: 0; min-height: 2px;
  border-radius: 6px 6px 2px 2px; background: rgba(15, 118, 110, 0.24);
}
.lova-balk.laatste .lova-balk-vul { background: var(--lova-merk); }
.lova-balk.leeg .lova-balk-vul { min-height: 0; }
.lova-balk-label { text-align: center; font-family: var(--font-mono); font-size: 10px; color: var(--kleur-tekst-zacht); white-space: nowrap; }

/* --- Tegels --------------------------------------------------------------- */

.lova-tegels { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-bottom: 16px; }
.lova-tegel { padding: 16px; border-radius: var(--radius); background: var(--kleur-achtergrond); border: 1px solid var(--kleur-rand); }
.lova-tegel-waarde { margin-top: 8px; font-family: var(--font-display); font-size: 24px; font-weight: 700; line-height: 1.15; }
.lova-tegel-waarde.leeg { font-family: var(--font-ui); font-size: 15px; font-weight: 600; color: var(--kleur-tekst-zacht); }
.lova-tegel-sub { margin-top: 4px; font-size: 12px; color: var(--kleur-tekst-zacht); }

/* --- Uitlegbalk ----------------------------------------------------------- */

.lova-banner {
  display: flex; gap: 14px; align-items: flex-start;
  margin-bottom: 16px; padding: 16px; border-radius: var(--radius);
  background: var(--lova-merk-tint); border: 1px solid var(--lova-merk-rand);
}
.lova-banner-icoon { flex-shrink: 0; margin-top: 1px; color: var(--lova-merk); }
.lova-banner strong { display: block; margin-bottom: 2px; font-size: 14px; color: var(--kleur-tekst); }
.lova-banner p { margin: 0; font-size: 14px; max-width: none; }

/* --- Tabbladen ------------------------------------------------------------ */

.lova-tabs {
  display: inline-flex; flex-wrap: wrap; gap: 4px;
  margin-bottom: 16px; padding: 4px; border-radius: 12px;
  background: var(--kleur-rand-zacht);
}
.lova-app .lova-tab {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 14px; border-radius: 9px;
  font-size: 14px; font-weight: 500; color: var(--kleur-tekst-zacht);
}
.lova-app .lova-tab:hover { color: var(--kleur-tekst); }
.lova-app .lova-tab.actief { background: var(--kleur-achtergrond); color: var(--kleur-tekst); box-shadow: 0 1px 2px rgba(17, 19, 24, 0.06); }
.lova-tab-aantal { padding: 1px 7px; border-radius: 999px; font-family: var(--font-mono); font-size: 11px; color: var(--kleur-tekst-zacht); }
.lova-tab.actief .lova-tab-aantal { background: var(--kleur-rand-zacht); }

/* --- Blogkaarten ---------------------------------------------------------- */

.lova-blog {
  margin-bottom: 14px; overflow: hidden; border-radius: var(--radius);
  background: var(--kleur-achtergrond); border: 1px solid var(--kleur-rand);
}
.lova-blog-body { padding: 18px 20px; }
.lova-blog-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 8px; font-size: 12px; color: var(--kleur-tekst-zacht); }
.lova-blog-datum { font-family: var(--font-mono); }
.lova-app .lova-blog h2 { margin: 0 0 6px; font-size: 16px; font-weight: 600; line-height: 1.35; }
.lova-blog-uittreksel { margin: 0; font-size: 14px; }
/* De review waar het antwoord bij hoort. Ingesprongen met een streep ernaast,
   zodat meteen duidelijk is wat van de bezoeker is en wat van ons. */
.lova-review {
  margin: 0 0 10px; padding: 10px 14px;
  border-left: 3px solid var(--kleur-rand); border-radius: 0 8px 8px 0;
  background: var(--kleur-rand-zacht);
}
.lova-review-kop { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 4px; }
.lova-review-sterren { color: var(--lova-amber); letter-spacing: 1px; }
.lova-review-naam { font-family: var(--font-mono); font-size: 12px; color: var(--kleur-tekst-zacht); }
.lova-review p { margin: 0; font-size: 14px; line-height: 1.6; }

.lova-blog-voorbeeld { border-top: 1px solid var(--kleur-rand); }
.lova-blog-voorbeeld > summary {
  list-style: none; cursor: pointer;
  padding: 10px 20px; font-size: 13px; font-weight: 500; color: var(--kleur-tekst-zacht);
}
.lova-blog-voorbeeld > summary::-webkit-details-marker { display: none; }
.lova-blog-voorbeeld > summary:hover { color: var(--kleur-tekst); }
.lova-blog-tekst {
  margin: 0 20px 16px; padding: 14px 16px; border-radius: 10px;
  max-height: 420px; overflow: auto;
  white-space: pre-wrap; font-size: 14px; line-height: 1.7;
  background: var(--kleur-rand-zacht); color: var(--kleur-tekst);
}
.lova-blog-acties { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; min-height: 52px; padding: 10px 20px; border-top: 1px solid var(--kleur-rand); }
.lova-blog-acties form { display: flex; gap: 8px; margin: 0 0 0 auto; }
.lova-app .lova-knop-af { background: rgba(239, 68, 68, 0.08); color: var(--lova-rood-tekst); border-color: rgba(239, 68, 68, 0.24); }
.lova-app .lova-knop-af:hover { background: rgba(239, 68, 68, 0.15); }
.lova-app .lova-knop-goed { background: rgba(52, 211, 153, 0.14); color: var(--lova-mint-tekst); border-color: rgba(52, 211, 153, 0.34); }
.lova-app .lova-knop-goed:hover { background: rgba(52, 211, 153, 0.24); }
.lova-klaar { margin-left: auto; font-size: 12px; font-weight: 600; color: var(--lova-mint-tekst); }

/* --- Zoekwoorden en steden (Google Rankings) ------------------------------ */

.lova-tabs--klein { margin-bottom: 12px; }
.lova-app .lova-zoekwoorden td { padding-top: 11px; padding-bottom: 11px; }
.lova-zoekwoord { font-weight: 500; }
.lova-positie { margin-right: 8px; font-family: var(--font-display); font-size: 17px; font-weight: 700; }
.lova-positie.top { color: var(--lova-mint-tekst); }
.lova-positie.ver { color: var(--kleur-tekst-zacht); }
.lova-verschil { font-size: 12px; font-weight: 600; color: var(--kleur-tekst-zacht); white-space: nowrap; }
.lova-verschil.nieuw { padding: 1px 7px; border-radius: 999px; font-weight: 500; background: var(--lova-merk-tint); color: var(--lova-merk-donker); }

.lova-steden { list-style: none; display: flex; flex-direction: column; gap: 10px; margin: 0 0 12px; padding: 0; }
.lova-steden li { display: grid; grid-template-columns: minmax(90px, 160px) 1fr auto; align-items: center; gap: 12px; font-size: 14px; }
.lova-stad-naam { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lova-stad-balk { height: 6px; overflow: hidden; border-radius: 999px; background: var(--kleur-rand-zacht); }
.lova-stad-balk span { display: block; height: 100%; border-radius: 999px; background: var(--lova-merk); }
.lova-stad-aantal { min-width: 40px; text-align: right; font-family: var(--font-mono); font-size: 13px; }

/* --- Inloggen ------------------------------------------------------------- */

.lova-login-body { margin: 0; min-height: 100vh; }
.lova-login { min-height: 100vh; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }

.lova-login-merk {
  display: flex; flex-direction: column; justify-content: space-between; gap: 48px;
  padding: clamp(32px, 5vw, 72px);
  background: var(--lova-nacht); color: #fff;
}
.lova-login-logo { display: flex; align-items: center; gap: 16px; }
.lova-login-logo > span { display: flex; flex-direction: column; line-height: 1.1; }
.lova-login-naam { font-family: var(--font-display); font-size: 32px; font-weight: 700; letter-spacing: -0.02em; color: #fff; }
.lova-login-sub { margin-top: 4px; font-family: var(--font-mono); font-size: 13px; color: rgba(255, 255, 255, 0.55); }
.lova-app .lova-login-belofte h2 {
  max-width: 13ch; margin: 0;
  font-family: var(--font-display); font-size: clamp(32px, 3.4vw, 48px); font-weight: 800;
  line-height: 1.08; letter-spacing: -0.035em; color: #fff;
}
.lova-login-adres { font-family: var(--font-mono); font-size: 13px; color: rgba(255, 255, 255, 0.45); }

.lova-login-paneel { display: grid; place-items: center; padding: 48px 24px; background: var(--kleur-canvas); }
.lova-login-formulier { width: 100%; max-width: 476px; }
.lova-app .lova-login-formulier h1 { margin: 0 0 10px; font-family: var(--font-display); font-size: 30px; font-weight: 700; }
.lova-login-intro { max-width: none; margin: 0 0 28px; font-size: 16px; line-height: 1.55; }
.lova-login-formulier .veld { margin-bottom: 20px; }
.lova-app .lova-login-formulier .veld label { margin-bottom: 8px; font-size: 14px; font-weight: 600; color: #374151; }
.lova-invoer { position: relative; display: flex; align-items: center; }
.lova-invoer > svg { position: absolute; left: 16px; width: 18px; height: 18px; color: #6b7280; pointer-events: none; }
.lova-app .lova-invoer input {
  height: 52px; padding: 0 16px 0 46px;
  font-size: 16px; border-radius: 12px; background: #fff;
}
.lova-app .lova-invoer.met-oog input { padding-right: 52px; }
.lova-oog {
  position: absolute; right: 8px;
  display: grid; place-items: center; width: 36px; height: 36px;
  border: 0; border-radius: 8px; background: transparent; color: #6b7280; cursor: pointer;
}
.lova-oog:hover { background: var(--kleur-rand-zacht); color: var(--kleur-tekst); }
.lova-oog .verberg,
.lova-oog[aria-pressed="true"] .toon { display: none; }
.lova-oog[aria-pressed="true"] .verberg { display: block; }
.lova-app .lova-login-knop { width: 100%; height: 54px; margin-top: 8px; font-size: 16px; border-radius: 12px; gap: 10px; }
.lova-login-links {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px;
  margin: 24px 0 0; font-size: 15px;
}
.lova-app .lova-login-links a { font-weight: 500; color: var(--lova-merk); }
.lova-app .lova-login-links a.zacht { font-weight: 400; color: var(--kleur-tekst-zacht); }
.lova-app .lova-login-links a:hover { text-decoration: underline; }
.lova-login-privacy { margin: 32px 0 0; font-size: 13px; text-align: center; }
.lova-app .lova-login-privacy a { color: var(--kleur-tekst-zacht); }
.lova-app .lova-login-privacy a:hover { text-decoration: underline; }
.lova-login-voet { max-width: none; margin: 0; font-size: 14px; line-height: 1.7; }

.lova-kies { display: flex; flex-direction: column; gap: 10px; margin: 0 0 24px; }
.lova-kies form { margin: 0; }
.lova-kies-knop {
  width: 100%; display: flex; justify-content: space-between; align-items: center;
  padding: 16px 18px; border: 1px solid var(--kleur-rand); border-radius: 12px;
  background: #fff; color: var(--kleur-tekst); font: inherit; font-size: 16px; font-weight: 600; cursor: pointer;
}
.lova-kies-knop:hover { border-color: var(--lova-merk); color: var(--lova-merk); }

/* Wachtwoordkaart op Instellingen */
.lova-wachtwoord-form { max-width: 420px; }
.lova-wachtwoord-form .veld input { max-width: 100%; }

/* De gegevens die de klant zelf bijwerkt. Daaronder staat in dezelfde kaart wat
   hij niet zelf kan wijzigen; die lijst krijgt een streep zodat het twee dingen
   blijven en niet één lange sliert velden. */
.lova-gegevens-form { max-width: 420px; }
.lova-gegevens-form .veld input { max-width: 100%; }
.lova-gegevens-form + .def-lijst { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--kleur-rand); }

/* --- Mobiel --------------------------------------------------------------- */

@media (max-width: 860px) {
  .lova-topbalk {
    display: flex; align-items: center; gap: 12px;
    position: sticky; top: 0; z-index: 25;
    padding: 10px 16px; background: var(--lova-nacht); color: #fff;
  }
  .lova-menu-knop {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 8px 12px; border: 0; border-radius: 10px;
    background: rgba(255, 255, 255, 0.08); color: #fff;
    font: inherit; font-size: 14px; cursor: pointer;
  }
  .lova-app .lova-topbalk-merk {
    display: inline-flex; align-items: center; gap: 9px;
    font-family: var(--font-display); font-weight: 700; color: #fff; text-decoration: none;
  }
  .lova-app .lova-topbalk-merk .lova-logo { flex-shrink: 0; }
  .lova-zijbalk {
    position: fixed; top: 0; bottom: 0; left: 0; height: auto; width: 264px;
    transform: translateX(-100%); transition: transform 0.22s ease;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
  }
  .lova-shell.is-open .lova-zijbalk { transform: none; }
  .lova-inklap { display: none; }
  /* :not([hidden]) — anders wint display:block van het hidden-attribuut en ligt
     de donkere laag ook over de pagina als het menu dicht is. */
  .lova-overlay:not([hidden]) { display: block; position: fixed; inset: 0; z-index: 29; background: rgba(10, 12, 17, 0.45); }
  .lova-main { padding: 20px 16px 48px; }
  .lova-tegels { grid-template-columns: 1fr; }

  .lova-login { grid-template-columns: 1fr; }
  .lova-login-merk { gap: 16px; padding: 24px 20px; }
  .lova-login-adres { display: none; }
  .lova-app .lova-login-belofte h2 { max-width: none; margin: 0; font-size: 24px; }
  .lova-login-paneel { place-items: start center; padding: 32px 20px 48px; }
}

@media (prefers-reduced-motion: reduce) {
  .lova-zijbalk,
  .lova-inklap svg { transition: none; }
  .lova-status-stip { animation: none; }
}

/* --- Gebruikers ------------------------------------------------------------ */

.lova-gebruikers { list-style: none; margin: 0; padding: 0; }
.lova-gebruiker {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  padding: 12px 0; border-bottom: 1px solid var(--kleur-rand);
}
.lova-gebruiker:last-child { border-bottom: 0; }
/* Wie eruit gezet is blijft staan — anders lijkt het alsof hij verwijderd is —
   maar valt niet meer op tussen de mensen die er wel bij kunnen. */
.lova-gebruiker.uit { opacity: .6; }
.lova-gebruiker-wie { min-width: 0; }
.lova-gebruiker-acties { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.lova-gebruiker-acties form { display: flex; align-items: center; gap: 6px; margin: 0; }
.lova-app .lova-gebruiker-acties select { width: auto; margin: 0; padding: 6px 9px; font-size: 13px; }

.lova-uitnodig-form { max-width: 420px; }
.lova-uitnodig-form .veld input,
.lova-uitnodig-form .veld select { max-width: 100%; }
.lova-uitnodiging-link { word-break: break-all; font-size: 12px; }
.lova-rollen-uitleg { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--kleur-rand); }

@media (max-width: 620px) {
  .lova-gebruiker { flex-direction: column; align-items: stretch; }
  .lova-gebruiker-acties { justify-content: flex-start; }
}

/* --- Onderbalk op de telefoon --------------------------------------------- */
/*
   Op een smal scherm zit de zijbalk achter een menuknop. Dan is alles één klik
   weg, ook de twee dingen waarvoor je het portaal opent: is er iets om goed te
   keuren, en is er iets binnengekomen. Die staan hier onder je duim.

   Op een breed scherm is de zijbalk er gewoon, en is deze balk overbodig.
*/
.lova-app .lova-onderbalk { display: none; }

@media (max-width: 860px) {
  .lova-app .lova-onderbalk {
    /* Onder de dimlaag van het menu (z-index 29): staat de zijbalk open, dan
       hoort de balk mee te vervagen in plaats van er fel bovenop te blijven
       liggen. Een tik erop sluit dan het menu, zoals overal op de pagina. */
    position: fixed; z-index: 28;
    left: 12px; right: 12px; bottom: max(12px, env(safe-area-inset-bottom));
    display: grid; grid-auto-flow: column; grid-auto-columns: 1fr;
    gap: 4px; padding: 8px 6px;
    background: rgba(255, 255, 255, .96);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(17, 19, 24, .08);
    border-radius: 18px;
    box-shadow: 0 8px 28px rgba(17, 19, 24, .14);
  }

  .lova-app .lova-onder-item {
    display: flex; flex-direction: column; align-items: center; gap: 3px;
    padding: 7px 4px; border: 0; background: none; cursor: pointer;
    border-radius: 13px; text-decoration: none;
    color: var(--lova-zacht, #6b7088);
    font: inherit; font-size: 11px; font-weight: 600;
    /* Genoeg om met een duim te raken, ook naast een buurknop. */
    min-height: 52px;
  }
  .lova-app .lova-onder-item:hover { color: #111318; }
  .lova-app .lova-onder-item.actief { color: #0F766E; background: rgba(15, 118, 110, .08); }

  .lova-app .lova-onder-icoon { position: relative; display: flex; line-height: 0; }
  .lova-app .lova-onder-icoon svg { width: 20px; height: 20px; }

  .lova-app .lova-onder-teller {
    position: absolute; top: -6px; right: -9px;
    min-width: 17px; height: 17px; padding: 0 4px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 999px;
    background: var(--lova-amber); color: #fff;
    font-size: 10.5px; font-weight: 700; line-height: 1;
    box-shadow: 0 0 0 2px #fff;
  }
  .lova-app .lova-onder-label { letter-spacing: .01em; }

  /* Ruimte onder de inhoud, anders valt de laatste kaart achter de balk. */
  .lova-app .lova-main { padding-bottom: 92px; }
}

/* Afwijzen met een reden: ingeklapt, want goedkeuren is het gewone geval.

   Op een eigen regel onder de knoppen. In de flexrij ernaast werd het
   tekstvak tot één woord breed geknepen. */
.lova-app .lova-afwijzen { flex-basis: 100%; width: 100%; margin-top: 4px; }
.lova-app .lova-afwijzen form { display: block; margin: 10px 0 0; }
.lova-app .lova-afwijzen textarea { width: 100%; }
.lova-app .lova-afwijzen > summary {
  cursor: pointer; font-size: 13px; color: var(--kleur-tekst-zacht);
  list-style: none; display: inline-flex; align-items: center; gap: 6px;
}
.lova-app .lova-afwijzen > summary::-webkit-details-marker { display: none; }
.lova-app .lova-afwijzen > summary::before { content: '+'; font-weight: 700; }
.lova-app .lova-afwijzen[open] > summary::before { content: '–'; }
.lova-app .lova-afwijzen > summary:hover { color: var(--kleur-tekst); }
.lova-app .lova-afwijzen form { margin-top: 10px; max-width: 520px; }
.lova-app .lova-afwijzen label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 5px; }

/* Een schakelaar met uitleg eronder. Het hele blok is klikbaar, want een vinkje
   van 16 pixels is op een telefoon niet te raken. */
.lova-app .lova-schakel {
  display: flex; align-items: flex-start; gap: 11px;
  padding: 12px 0; border-bottom: 1px solid var(--kleur-rand); cursor: pointer;
}
.lova-app .lova-schakel:last-of-type { border-bottom: 0; }
.lova-app .lova-schakel input { width: 18px; height: 18px; margin: 2px 0 0; flex-shrink: 0; accent-color: var(--lova-merk); }
.lova-app .lova-schakel > span { display: flex; flex-direction: column; gap: 2px; }
.lova-app .lova-schakel strong { font-size: 14px; font-weight: 600; }

/* Afhandelknoppen in de aanvragentabel: onder elkaar op smal, naast elkaar
   zodra er ruimte is. */
.lova-app .lova-aanvraag-acties { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 5px; }
.lova-app .lova-aanvraag-acties .btn { padding: 4px 9px; font-size: 12px; }