/* publiek/assets/stijl.css */
/* Kleuren gemeten aan de live site; zie het hoofdstuk Kleurenstijl onderaan
   het bouwplan. Zet NOOIT een kleurcode los in een regel hieronder: alles
   loopt via de variabelen, anders lopen ze uit de pas zodra er iets wijzigt. */
:root {
  /* Accentkleur van het thema; gemeten op knoppen, links en fotokaders van de
     site. Alleen voor grote vlakken en tekst vanaf 24 pixels. */
  --accent: #e52db4;
  /* Donkerder accent, zelfde tint en verzadiging, alleen donkerder. Voor
     kleine witte tekst op een gekleurde knop en voor gekleurde tekst.
     Haalt 5,18 op 1 met wit en 4,62 op zachtroze. */
  --accent-donker: #c81999;
  /* Tekst op een gekleurde knop; de site gebruikt wit. */
  --knop-tekst: #ffffff;
  /* Zachtroze sectie-achtergrond; gemeten op de secties foto, reviews en producten. */
  --achtergrond-zacht: #fdeef7;
  /* Paginagrond; gemeten op body en header van de site. */
  --achtergrond: #ffffff;
  /* Gewone tekst en koppen; gemeten op de site. */
  --tekst: #000000;
  /* Zachte tint van het accent, voor randen en gedempte tekst. */
  --rand-zacht: #f5c9e4;
  --tekst-gedempt: #7a5570;
  /* Hoekradius van kaders en knoppen; gemeten 14 pixels. */
  --hoekradius: 14px;
  /* Schaduw onder kaders; uit het eigen stijlblok van de site. */
  --kader-schaduw: 0 4px 14px rgba(0, 0, 0, .07);
  /* Lettertypen van de site, zelf meegeleverd uit publiek/assets/fonts/. */
  --font-koppen: 'Syncopate', sans-serif;
  --font-tekst: 'Roboto', sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
body {
  font-family: var(--font-tekst), -apple-system, "Segoe UI", Arial, sans-serif;
  color: var(--tekst);
  background: var(--achtergrond-zacht);
}
h1, h2, h3 { font-family: var(--font-koppen), var(--font-tekst), sans-serif; }
/* Gekleurde tekst gebruikt het donkerder accent, want het lichte roze haalt
   maar 3,91 op 1 en kleine tekst heeft 4,5 nodig. */
a { color: var(--accent-donker); }

/* Inlogpagina */
.inlogpagina { display: flex; min-height: 100vh; align-items: center; justify-content: center; padding: 16px; }
.inlogkaart { background: var(--achtergrond); border: 1px solid var(--rand-zacht); border-radius: var(--hoekradius); padding: 28px; width: 100%; max-width: 380px; box-shadow: var(--kader-schaduw); }
.inlogkaart h1 { font-size: 1.3rem; margin-bottom: 16px; }
.inlogkaart label { display: block; margin: 12px 0 4px; font-weight: 600; }
.inlogkaart input { width: 100%; padding: 12px; border: 1px solid var(--rand-zacht); border-radius: 8px; font-size: 1rem; }
.inlogkaart button { margin-top: 18px; width: 100%; padding: 13px; border: 0; border-radius: var(--hoekradius); background: var(--accent-donker); color: var(--knop-tekst); font-size: 1rem; font-weight: 700; cursor: pointer; }
.melding { background: var(--achtergrond-zacht); border: 1px solid var(--accent-donker); border-radius: 8px; padding: 10px 12px; margin-bottom: 8px; }

/* Kopbalk */
.kopbalk {
  display: flex; align-items: center; gap: 14px;
  background: var(--achtergrond); border-bottom: 2px solid var(--accent);
  padding: 12px 16px; position: sticky; top: 0; z-index: 10;
}
.merk { font-family: var(--font-koppen), sans-serif; font-weight: 700; color: var(--accent-donker); }
.wie { margin-left: auto; font-size: 0.9rem; display: inline-flex; align-items: center; }
/* Tikvlak van minstens 44 pixels hoog, met opvulling in plaats van een
   grotere letter, zodat de kopbalk er hetzelfde uitziet. */
.wie a { margin-left: 10px; display: inline-flex; align-items: center; min-height: 44px; padding: 0 2px; }

/* Indeling met zijbalk */
.indeling { display: flex; min-height: calc(100vh - 54px); }
.zijbalk { background: var(--achtergrond); border-right: 1px solid var(--rand-zacht); width: 230px; flex: 0 0 230px; padding: 18px 0; }
.menugroep { margin-bottom: 18px; }
.groepstitel { font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--tekst-gedempt); padding: 0 18px 6px; }
.zijbalk a {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 18px; color: var(--tekst); text-decoration: none; font-size: 0.95rem;
  min-height: 44px;
}
.zijbalk a:hover { background: var(--achtergrond-zacht); }
.zijbalk a.actief { background: var(--achtergrond-zacht); border-right: 3px solid var(--accent); font-weight: 700; color: var(--accent-donker); }
.badge {
  background: var(--accent-donker); color: var(--knop-tekst); border-radius: 999px;
  font-size: 0.72rem; font-weight: 700; padding: 2px 8px; min-width: 20px; text-align: center;
}
.inhoud { flex: 1; padding: 22px; min-width: 0; }
.inhoud h1 { font-size: 1.4rem; margin-bottom: 14px; }

/* Kaartje voor blokken op de schermen */
.kaart { background: var(--achtergrond); border: 1px solid var(--rand-zacht); border-radius: var(--hoekradius); padding: 18px; margin-bottom: 14px; box-shadow: var(--kader-schaduw); }

/* Telefoon: zijbalk dicht, uitklapmenu via de knop Menu. Geen JavaScript. */
.menu-schakelaar { display: none; }
.menu-knop { display: none; }
@media (max-width: 767px) {
  .menu-knop {
    display: inline-block; background: var(--accent-donker); color: var(--knop-tekst);
    border-radius: 8px; padding: 10px 14px; font-weight: 700; cursor: pointer;
    min-height: 44px; line-height: 24px;
  }
  .zijbalk { display: none; }
  .menu-schakelaar:checked ~ .indeling .zijbalk {
    display: block; position: fixed; top: 54px; left: 0; right: 0; bottom: 0;
    width: auto; z-index: 9; overflow-y: auto; border-right: 0;
  }
  .inhoud { padding: 16px; }
}

/* Scherm Mailteksten: lijst links, voorbeeld rechts. Op de telefoon onder
   elkaar. Alle kleuren via de variabelen bovenaan, geen losse codes. */
.mailscherm { display: flex; gap: 22px; align-items: flex-start; }
.maillijst { flex: 0 0 230px; background: var(--achtergrond); border: 1px solid var(--rand-zacht); border-radius: var(--hoekradius); overflow: hidden; }
.mailkeuze { display: block; padding: 12px 16px; border-bottom: 1px solid var(--rand-zacht); text-decoration: none; color: var(--tekst); min-height: 44px; }
.mailkeuze:last-child { border-bottom: 0; }
.mailkeuze:hover { background: var(--achtergrond-zacht); }
.mailkeuze-actief { background: var(--achtergrond-zacht); border-right: 3px solid var(--accent); }
.mailkeuze-actief .mailkeuze-naam { color: var(--accent-donker); }
.mailkeuze-naam { display: block; font-weight: 700; font-size: 0.95rem; }
.mailkeuze-naar { display: block; font-size: 0.8rem; color: var(--tekst-gedempt); margin-top: 2px; }
.mailkant { flex: 1; min-width: 0; }
.mailregel { font-size: 0.95rem; margin-bottom: 8px; }
.mailregel:last-child { margin-bottom: 0; }
.mailregel span { display: inline-block; width: 92px; color: var(--tekst-gedempt); }
.mailuitleg { font-size: 0.9rem; color: var(--tekst-gedempt); margin: 0 0 12px; line-height: 1.6; }
.mailvoorbeeld { border: 1px solid var(--rand-zacht); border-radius: var(--hoekradius); overflow: hidden; }
.mailwaarschuwing { border-color: var(--accent-donker); }
.mailwaarschuwing p { margin-bottom: 10px; line-height: 1.6; }
.mailwaarschuwing p:last-child { margin-bottom: 0; }
/* Kerncijfers op het scherm Vandaag. Bewust NIET .mailregel hergebruiken: dat
   vakje is 92 pixels breed en een langer woord als "Behandelingen" past daar
   niet in, waardoor het getal tegen het woord aan plakte. Met flex en een
   tussenruimte kan dat niet meer gebeuren, hoe lang het label ook wordt. */
.cijferregel { display: flex; gap: 14px; align-items: baseline; margin-bottom: 8px; }
.cijferregel:last-child { margin-bottom: 0; }
.cijferregel span { color: var(--tekst-gedempt); }
.cijferregel strong { margin-left: auto; font-size: 1.05rem; }

/* Het blok "Dit vraagt je aandacht" op het scherm Vandaag: een gewone lijst,
   geen eigen kleur nodig want die komt al van .mailwaarschuwing eromheen. */
.aandachtlijst { margin: 0; padding-left: 20px; }
.aandachtlijst li { margin-bottom: 8px; line-height: 1.6; }
.aandachtlijst li:last-child { margin-bottom: 0; }
@media (max-width: 767px) {
  .mailscherm { display: block; }
  .maillijst { margin-bottom: 18px; }
  .mailregel span { display: block; width: auto; }
}

/* Tabellen, formulieren en knoppen op de schermen (plan 2). Alleen klassen en
   kleurvariabelen; losse kleurcodes en id-selectors zijn hier verboden. */
.tabel-omhulsel { overflow-x: auto; }
.tabel { width: 100%; border-collapse: collapse; }
.tabel th, .tabel td { text-align: left; padding: 10px 8px; border-bottom: 1px solid var(--rand-zacht); vertical-align: top; }
.tabel th { font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--tekst-gedempt); font-family: var(--font-tekst), sans-serif; }
/* Op de telefoon verdwijnt een minder dringende kolom uit een tabel, zodat
   de kolom die er echt toe doet (bijvoorbeeld Eerstvolgende afspraak op het
   scherm Klanten) meteen in beeld staat in plaats van achter een zijwaartse
   schuif in .tabel-omhulsel. De verborgen gegevens blijven gewoon in de
   broncode staan en zijn een klik verderop te vinden. */
@media (max-width: 767px) {
  .mobiel-verborgen { display: none; }
}
/* Een waarde die als geheel gelezen wordt mag niet middenin afbreken. Zonder
   dit werd op de telefoon "Anna Proef" twee regels ("Anna" boven "Proef") en
   stond het euroteken los boven het bedrag. De tabel schuift dan liever
   zijwaarts binnen .tabel-omhulsel, net als bij een knop hieronder. */
.cel-heel { white-space: nowrap; }
.kaart h2 { font-size: 1.05rem; margin-bottom: 10px; }
.formulier label { display: block; margin: 10px 0 4px; font-weight: 600; }
.formulier input, .formulier textarea, .formulier select { width: 100%; padding: 11px; border: 1px solid var(--rand-zacht); border-radius: 8px; font-size: 1rem; background: var(--achtergrond); color: var(--tekst); }
.formulier textarea { min-height: 110px; resize: vertical; }
.veldrij { display: flex; gap: 12px; flex-wrap: wrap; }
.veldrij > div { flex: 1 1 160px; }
/* display:inline-flex met min-height in plaats van alleen padding: zo is
   elke knop (ook in een dichte tabel) minstens ongeveer 44 pixels op zijn
   kleinste kant, het tikdoel dat de meting op de telefoon eist, ongeacht
   hoe de lettermetingen van het lettertype precies uitvallen. white-space
   nowrap voorkomt dat een knoptekst in een smalle tabelkolom naar twee
   regels omklapt: de tabel schuift dan liever zijwaarts binnen zijn eigen
   omhulsel (.tabel-omhulsel) dan dat een knop lelijk platgedrukt wordt. */
.knop {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px; margin-top: 14px; padding: 12px 18px; border: 0;
  border-radius: var(--hoekradius); background: var(--accent-donker);
  color: var(--knop-tekst); font-weight: 700; font-size: 1rem; cursor: pointer;
  text-decoration: none; white-space: nowrap;
}
.knop-rustig { background: var(--achtergrond); color: var(--accent-donker); border: 1px solid var(--accent-donker); }
.tabel .knop, .tabel .knop-rustig { margin-top: 0; padding: 8px 14px; font-size: 0.85rem; }
.hint { color: var(--tekst-gedempt); font-size: 0.88rem; margin-top: 4px; }
.leeg { color: var(--tekst-gedempt); padding: 6px 0; }
.wacht-label { color: var(--accent-donker); font-weight: 700; font-size: 0.85rem; }
.zoekbalk { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-bottom: 14px; }
.zoekbalk input { flex: 1 1 220px; padding: 11px; border: 1px solid var(--rand-zacht); border-radius: 8px; font-size: 1rem; }
.zoekbalk .knop { margin-top: 0; }