/* Laserkliniek Zwolle — dashboard.
   Kleuren komen uit het logo. Rustig houden: dit is een kliniek, geen webshop. */

:root {
  --groen:        #004237;
  --groen-diep:   #00322a;
  --groen-zacht:  #e2ece9;
  --beige:        #f2e6dd;
  --beige-zacht:  #f8f1ec;
  --kaart:        #fdfaf8;
  --wit:          #ffffff;
  --inkt:         #1d1d1b;
  --inkt-zacht:   #6b635c;
  --inkt-flauw:   #9a918a;
  --lijn:         #e6d8cd;
  --lijn-zacht:   #efe4da;

  --zalm:      #f0856c;
  --rood:      #eb5c6c;
  --mint:      #cce6df;
  --turquoise: #58bec1;
  --geel:      #fdc63d;
  --zand:      #d8bfae;
  --salie:     #a3bca5;

  --rond:      14px;
  --rond-klein: 9px;
  --zijbalk:   268px;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--beige);
  color: var(--inkt);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; }

/* ---------- Zijbalk ---------- */

.zijbalk {
  position: fixed;
  inset: 0 auto 0 0;
  width: var(--zijbalk);
  padding: 30px 18px 24px;
  background: var(--beige-zacht);
  border-right: 1px solid var(--lijn-zacht);
  display: flex;
  flex-direction: column;
  overflow-y: auto;
}

.menulijst { flex: 1 0 auto; }

.merk { display: block; padding: 0 10px 34px; }
.merk img { width: 154px; height: auto; display: block; }

.menugroep { margin-bottom: 26px; }

.menugroep h2 {
  margin: 0 0 8px 10px;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--inkt-flauw);
}

.zijbalk a:not(.merk) {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 9px 12px;
  margin-bottom: 2px;
  border-radius: var(--rond-klein);
  color: var(--inkt);
  text-decoration: none;
  transition: background .12s ease;
}

.zijbalk a:not(.merk):hover { background: #f0e5dd; }

.zijbalk a.actief {
  background: var(--groen);
  color: var(--wit);
  font-weight: 600;
}

.zijbalk svg { width: 18px; height: 18px; flex: none; opacity: .78; }
.zijbalk a.actief svg { opacity: 1; }

.teller {
  margin-left: auto;
  min-width: 21px;
  padding: 1px 7px;
  border-radius: 999px;
  background: var(--zalm);
  color: var(--wit);
  font-size: 11.5px;
  font-weight: 600;
  text-align: center;
}
.zijbalk a.actief .teller { background: rgba(255,255,255,.22); }

/* ---------- Hoofdvlak ---------- */

main {
  margin-left: var(--zijbalk);
  padding: 34px 40px 70px;
  max-width: 1240px;
}

.paginakop {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap-reverse;
  margin-bottom: 30px;
}

.bovenkop {
  margin: 0 0 4px;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--inkt-flauw);
}

h1 {
  margin: 0;
  font-size: 33px;
  font-weight: 600;
  letter-spacing: -.015em;
}

.onderkop { margin: 5px 0 0; color: var(--inkt-zacht); }

/* ---------- Statuslampjes ---------- */

.lampjes { display: flex; flex-wrap: wrap; gap: 8px; }

.lampje {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 13px;
  border-radius: 999px;
  background: var(--beige-zacht);
  border: 1px solid var(--lijn-zacht);
  font-size: 12.5px;
  color: var(--inkt-zacht);
  white-space: nowrap;
}

.lampje i { width: 7px; height: 7px; border-radius: 50%; background: var(--inkt-flauw); }
.lampje.live i   { background: var(--salie); }
.lampje.let-op i { background: var(--geel); }
.lampje.uit i    { background: var(--zand); }

.lampje.voorbeeld {
  background: #fdf3da;
  border-color: #f2e0b0;
  color: #6b5518;
}
.lampje.voorbeeld i { background: var(--geel); }

/* ---------- Cijferkaarten ---------- */

.cijfers {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 14px;
  margin-bottom: 40px;
}

.cijfer {
  padding: 20px 22px 22px;
  border-radius: var(--rond);
  background: var(--kaart);
  border: 1px solid var(--lijn-zacht);
}

.cijfer h3 {
  margin: 0 0 10px;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--inkt-zacht);
}

.cijfer b { display: block; font-size: 38px; font-weight: 600; line-height: 1; letter-spacing: -.02em; }
.cijfer small { display: block; margin-top: 9px; font-size: 13px; color: var(--inkt-zacht); }

.cijfer.nadruk {
  background: var(--groen);
  border-color: var(--groen);
  color: var(--wit);
}
.cijfer.nadruk h3, .cijfer.nadruk small { color: rgba(255,255,255,.72); }

/* ---------- Blokken ---------- */

.blok { margin-bottom: 42px; }

.blokkop { margin-bottom: 16px; }
.blokkop h2 { margin: 0; font-size: 20px; font-weight: 600; letter-spacing: -.01em; }
.blokkop p  { margin: 3px 0 0; color: var(--inkt-zacht); }

/* ---------- Vraagkaart ---------- */

.vraag {
  padding: 22px 24px 20px;
  margin-bottom: 14px;
  border-radius: var(--rond);
  background: var(--kaart);
  border: 1px solid var(--lijn-zacht);
}

.vraag > h3 { margin: 0 0 5px; font-size: 15.5px; font-weight: 600; line-height: 1.45; }
.vraag .context { margin: 0 0 8px; color: var(--inkt-zacht); }
.vraag .herkomst { margin: 0 0 15px; font-size: 12.5px; color: var(--inkt-flauw); }

.vraag textarea {
  width: 100%;
  min-height: 78px;
  padding: 12px 14px;
  border: 1px solid var(--lijn);
  border-radius: var(--rond-klein);
  background: var(--wit);
  font: inherit;
  color: inherit;
  resize: vertical;
}
.vraag textarea:focus { outline: 2px solid var(--groen); outline-offset: -1px; border-color: var(--groen); }

.knoppen { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 13px; }

button, .knop {
  padding: 9px 17px;
  border-radius: var(--rond-klein);
  border: 1px solid transparent;
  background: var(--beige-zacht);
  color: var(--inkt);
  font: inherit;
  font-weight: 500;
  cursor: pointer;
  text-decoration: none;
  display: inline-block;
  transition: background .12s ease, border-color .12s ease;
}
button:hover, .knop:hover { background: #efe3da; }

button.hoofd, .knop.hoofd { background: var(--groen); color: var(--wit); font-weight: 600; }
button.hoofd:hover, .knop.hoofd:hover { background: var(--groen-diep); }

button.tweede, .knop.tweede { background: var(--wit); border-color: var(--lijn); }

button.stil, .knop.stil { background: transparent; border-color: #edc4c8; color: var(--rood); }
button.stil:hover, .knop.stil:hover { background: #fdf1f2; }

.uitleg { margin: 11px 0 0; font-size: 12.5px; font-style: italic; color: var(--inkt-flauw); }

/* ---------- Leeg scherm ---------- */

.leeg {
  padding: 46px 32px;
  border-radius: var(--rond);
  background: var(--kaart);
  border: 1px dashed var(--lijn);
  text-align: center;
  color: var(--inkt-zacht);
}
.leeg strong { display: block; margin-bottom: 6px; color: var(--inkt); font-size: 16px; }
.leeg p { margin: 0 auto; max-width: 62ch; }

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

.inlogvlak {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 24px;
}

.inlogkaart {
  width: 100%;
  max-width: 380px;
  padding: 38px 34px 32px;
  border-radius: 18px;
  background: var(--kaart);
  border: 1px solid var(--lijn-zacht);
}
.inlogkaart img { width: 172px; margin: 0 auto 26px; display: block; }
.inlogkaart h1 { font-size: 19px; margin: 0 0 22px; text-align: center; font-weight: 600; }
.inlogkaart label { display: block; margin-bottom: 5px; font-size: 13px; color: var(--inkt-zacht); }
.inlogkaart input {
  width: 100%;
  margin-bottom: 16px;
  padding: 11px 13px;
  border: 1px solid var(--lijn);
  border-radius: var(--rond-klein);
  background: var(--wit);
  font: inherit;
}
.inlogkaart input:focus { outline: 2px solid var(--groen); outline-offset: -1px; }
.inlogkaart button { width: 100%; }

.fout {
  margin: 0 0 16px;
  padding: 10px 13px;
  border-radius: var(--rond-klein);
  background: #fdf1f2;
  border: 1px solid #f4d3d7;
  color: #a33745;
  font-size: 13.5px;
}

.gelukt {
  margin: 0 0 16px;
  padding: 10px 13px;
  border-radius: var(--rond-klein);
  background: var(--groen-zacht);
  border: 1px solid #c9ded8;
  color: var(--groen);
  font-size: 13.5px;
}

/* ---------- Account onderin de zijbalk ---------- */

.account {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 18px;
  padding: 16px 10px 10px 11px;
  border-top: 1px solid var(--lijn-zacht);
}

.account-bol {
  flex: none;
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--groen);
  color: var(--wit);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .02em;
}

.account-naam { min-width: 0; line-height: 1.3; }
.account-naam b { display: block; font-size: 13.5px; font-weight: 600; }
.account-naam small {
  display: block;
  font-size: 11.5px;
  color: var(--inkt-flauw);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.zijbalk a.account-uit {
  margin-left: auto;
  padding: 7px;
  color: var(--inkt-zacht);
}
.zijbalk a.account-uit:hover { background: #f0e5dd; color: var(--inkt); }
.account-uit svg { width: 17px; height: 17px; opacity: .85; }

/* ---------- Smal scherm ---------- */

@media (max-width: 900px) {
  .zijbalk {
    position: static;
    width: auto;
    border-right: 0;
    border-bottom: 1px solid var(--lijn-zacht);
    padding: 20px 16px;
  }
  .merk { padding-bottom: 18px; }
  .menugroep { margin-bottom: 14px; }
  .menulijst { flex: 0 1 auto; }
  .account { margin-top: 8px; padding-top: 12px; }
  main { margin-left: 0; padding: 24px 20px 60px; }
  h1 { font-size: 27px; }
}

/* ---------- Iets melden (knop rechtsonder) ---------- */

.melder-knop {
  position: fixed;
  right: 26px;
  bottom: 26px;
  z-index: 40;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 12px 19px 12px 16px;
  border-radius: 999px;
  background: var(--groen);
  color: var(--wit);
  font-weight: 600;
  box-shadow: 0 6px 22px rgba(0, 66, 55, .22);
}
.melder-knop:hover { background: var(--groen-diep); }
.melder-knop svg { width: 19px; height: 19px; }
.melder-knop.open { background: var(--groen-diep); }

.melder {
  position: fixed;
  right: 26px;
  bottom: 86px;
  z-index: 41;
  width: min(370px, calc(100vw - 40px));
}

.melder-kaart {
  padding: 22px 22px 18px;
  border-radius: 18px;
  background: var(--kaart);
  border: 1px solid var(--lijn);
  box-shadow: 0 14px 44px rgba(29, 29, 27, .16);
}

.melder-kop { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.melder-kop h2 { margin: 0 0 14px; font-size: 17px; font-weight: 600; }

.melder-sluit {
  margin: -6px -6px 0 0;
  padding: 0 7px;
  border: 0;
  background: none;
  color: var(--inkt-flauw);
  font-size: 23px;
  line-height: 1;
}
.melder-sluit:hover { background: none; color: var(--inkt); }

.melder-keuze { display: flex; gap: 8px; margin-bottom: 14px; }
.melder-keuze label { flex: 1; }
.melder-keuze input { position: absolute; opacity: 0; pointer-events: none; }
.melder-keuze span {
  display: block;
  padding: 9px 10px;
  border: 1px solid var(--lijn);
  border-radius: var(--rond-klein);
  background: var(--wit);
  font-size: 13.5px;
  text-align: center;
  cursor: pointer;
  transition: background .12s ease, border-color .12s ease;
}
.melder-keuze span:hover { border-color: var(--zand); }
.melder-keuze input:checked + span {
  background: var(--groen);
  border-color: var(--groen);
  color: var(--wit);
  font-weight: 600;
}
.melder-keuze input:focus-visible + span { outline: 2px solid var(--groen); outline-offset: 2px; }

.melder-hulp { margin: 0 0 11px; font-size: 13px; color: var(--inkt-zacht); }

.melder textarea {
  width: 100%;
  padding: 11px 13px;
  border: 1px solid var(--lijn);
  border-radius: var(--rond-klein);
  background: var(--wit);
  font: inherit;
  color: inherit;
  resize: vertical;
}
.melder textarea:focus { outline: 2px solid var(--groen); outline-offset: -1px; border-color: var(--groen); }

.melder-verstuur { width: 100%; margin-top: 12px; }

.melder-voet { margin: 11px 0 0; font-size: 12.5px; color: var(--inkt-flauw); text-align: center; }
.melder-voet a { text-decoration: underline; }

.melder-fout {
  margin: 12px 0 0;
  padding: 9px 12px;
  border-radius: var(--rond-klein);
  background: #fdf1f2;
  border: 1px solid #f4d3d7;
  color: #a33745;
  font-size: 13px;
}

.melder-gelukt { padding: 22px 4px 10px; text-align: center; }
.melder-gelukt .vinkje {
  width: 42px;
  height: 42px;
  margin-bottom: 12px;
  color: var(--salie);
}
.melder-gelukt strong { display: block; margin-bottom: 4px; font-size: 16.5px; }
.melder-gelukt p { margin: 0 auto; max-width: 26ch; color: var(--inkt-zacht); font-size: 13.5px; }

@media (max-width: 900px) {
  .melder-knop { right: 16px; bottom: 16px; }
  .melder { right: 16px; bottom: 74px; }
}