/* Huisstijl: --menu en --merk worden per installatie ingesteld onder Beheer → Huisstijl. */
:root {
  --merk: #2f6fed;          /* knoppen, links en accenten */
  --merk-donker: #2f6fed;
  --menu: #172338;          /* kopbalk */
  --menu-donker: #172338;
  --tekst: #172033;
  --zacht: #667085;
  --rand: #e3e8ef;
  --rand-licht: #eef2f6;
  --achtergrond: #f2f4f8;
  --vlak: #ffffff;
  --rij-hover: #f7f9fc;
  --rood: #d92d20;
  --groen: #12855a;
  --oranje: #b54708;
  --grafiek: color-mix(in srgb, var(--merk) 45%, white);
  --grafiek-huidig: var(--merk);
  --radius: 8px;
  --schaduw: 0 1px 2px rgba(16, 24, 40, .05), 0 1px 3px rgba(16, 24, 40, .08);
  --schaduw-groot: 0 18px 40px -12px rgba(16, 24, 40, .28), 0 4px 10px rgba(16, 24, 40, .06);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100vh;
  font: 13.5px/1.5 "Segoe UI Variable", "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif;
  color: var(--tekst);
  background: var(--achtergrond);
  -webkit-font-smoothing: antialiased;
}

a { color: var(--merk); text-decoration: none; }
a:hover { text-decoration: underline; }
a.stil { color: inherit; }
a.later, .later > a, .later .titel { color: #98a2b3 !important; }
.rood { color: var(--rood) !important; }
.zacht { color: var(--zacht); }
.icoon { width: 16px; height: 16px; vertical-align: -3px; flex-shrink: 0; }

/* ---------- Logo ---------- */
.logo { display: flex; align-items: center; gap: 9px; font-size: 18px; font-weight: 700; color: #fff; letter-spacing: -.02em; white-space: nowrap; }
.logo:hover { text-decoration: none; }
.logo-teken {
  display: inline-grid; place-items: center;
  width: 30px; height: 30px; border-radius: 9px;
  background: linear-gradient(135deg, var(--merk), color-mix(in srgb, var(--merk) 55%, white));
  color: #fff; font-size: 15px; box-shadow: inset 0 0 0 1px rgba(255,255,255,.25);
}
.logo img { max-height: 30px; max-width: 190px; display: block; }
.logo img.logo-merk, .topbalk .logo img.logo-merk, .kaal-logo .logo img.logo-merk { width: 32px; height: 32px; padding: 0; background: none; border-radius: 9px; }
.logo-naam b { font-weight: 800; color: color-mix(in srgb, var(--merk) 55%, white); }
.kaal-logo .logo-naam b { color: var(--merk); }
.topbalk .logo img { background: #fff; border-radius: 8px; padding: 3px 8px; max-height: 36px; }
.versie { font-size: 11px; color: rgba(255,255,255,.55); margin-left: 8px; font-weight: 500; }

/* ---------- Kopbalk: logo, menu, zoeken, meldingen en account ---------- */
.topbalk {
  position: sticky; top: 0; z-index: 30;
  display: flex; align-items: center; gap: 18px;
  height: 60px; padding: 0 18px;
  background:
    radial-gradient(120% 180% at 85% -40%, color-mix(in srgb, var(--merk) 38%, transparent), transparent 60%),
    var(--menu);
  box-shadow: 0 1px 0 rgba(255,255,255,.06) inset, 0 6px 18px -10px rgba(16,24,40,.5);
}
.topbalk-merk { display: flex; align-items: baseline; }
.hoofdnav { flex: 1; min-width: 0; align-self: stretch; display: flex; }
.menu { display: flex; align-items: center; gap: 2px; list-style: none; margin: 0; padding: 0; }
.menu > li { position: relative; height: 100%; display: flex; align-items: center; }
.menu-kop {
  display: flex; align-items: center; gap: 7px;
  padding: 7px 11px; border-radius: 9px;
  color: rgba(255,255,255,.78) !important; font-weight: 500; white-space: nowrap;
  transition: background .15s, color .15s;
}
.menu-kop .icoon { width: 17px; height: 17px; opacity: .9; }
.menu-kop.later { opacity: .5; }
.menu > li:hover > .menu-kop,
.menu > li:focus-within > .menu-kop { background: rgba(255,255,255,.09); color: #fff !important; text-decoration: none; }
.menu > li.actief > .menu-kop { background: rgba(255,255,255,.15); color: #fff !important; box-shadow: inset 0 -2px 0 color-mix(in srgb, var(--merk) 70%, white); }

/* Uitklappaneel met iconen, in twee kolommen */
.uitklap {
  position: absolute; top: calc(100% - 4px); left: -8px;
  width: 540px; padding: 10px;
  display: grid; grid-template-columns: 1fr 1fr; gap: 2px;
  background: var(--vlak); border: 1px solid var(--rand); border-radius: 14px;
  box-shadow: var(--schaduw-groot);
  opacity: 0; visibility: hidden; transform: translateY(6px);
  transition: opacity .15s, transform .15s, visibility .15s;
}
.uitklap::before { content: ""; position: absolute; left: 0; right: 0; top: -12px; height: 12px; } /* brug zodat hover niet wegvalt */
.uitklap.breed { width: 600px; }
.uitklap.rechts { left: auto; right: -8px; }
.menu > li:hover > .uitklap,
.menu > li:focus-within > .uitklap { opacity: 1; visibility: visible; transform: none; }
.uitklap .item { display: flex; gap: 12px; padding: 10px 12px; border-radius: 10px; }
.uitklap .item:hover { background: var(--rij-hover); }
.uitklap .item.later { opacity: .6; }
.item-icoon {
  flex-shrink: 0; width: 38px; height: 38px; border-radius: 10px;
  display: grid; place-items: center;
  background: color-mix(in srgb, var(--merk) 11%, white); color: var(--merk);
}
.item-icoon svg { width: 20px; height: 20px; }
.uitklap .titel { display: block; font-weight: 650; color: var(--tekst); font-size: 13.5px; }
.uitklap .titel:hover { color: var(--merk); text-decoration: none; }
.uitklap .sub { display: block; color: var(--zacht); font-size: 12px; line-height: 1.45; margin-top: 1px; }
.uitklap .sub a { color: var(--zacht); }
.uitklap .sub a:hover { color: var(--merk); }

.topbalk-rechts { display: flex; align-items: center; gap: 10px; }
.zoeken {
  display: flex; align-items: center; gap: 8px; width: 220px; height: 36px; padding: 0 12px;
  background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.14); border-radius: 18px;
  color: rgba(255,255,255,.7); transition: background .15s, width .2s;
}
.zoeken:focus-within { background: #fff; color: var(--zacht); width: 280px; }
.zoeken input { border: 0; padding: 0; width: 100%; font-size: 13px; outline: none !important; background: transparent; color: inherit; }
.zoeken input::placeholder { color: rgba(255,255,255,.6); }
.zoeken:focus-within input { color: var(--tekst); }
.zoeken:focus-within input::placeholder { color: var(--zacht); }
.rond-knop {
  position: relative; width: 36px; height: 36px; border-radius: 50%;
  display: grid; place-items: center; color: rgba(255,255,255,.85);
  background: rgba(255,255,255,.08);
}
.rond-knop:hover { background: rgba(255,255,255,.16); color: #fff; }
.rond-knop .icoon { width: 18px; height: 18px; }
.stip {
  position: absolute; top: -3px; right: -3px; min-width: 18px; height: 18px; padding: 0 5px;
  border-radius: 9px; background: var(--rood); color: #fff; font-size: 10.5px; line-height: 18px; text-align: center;
  box-shadow: 0 0 0 2px var(--menu);
}
.account { position: relative; }
.avatar {
  width: 36px; height: 36px; border-radius: 50%; border: 2px solid rgba(255,255,255,.35);
  background: linear-gradient(135deg, var(--merk), color-mix(in srgb, var(--merk) 50%, #7c3aed));
  color: #fff; font: inherit; font-weight: 700; font-size: 13px; cursor: pointer;
  display: inline-grid; place-items: center;
}
.avatar.groot { width: 42px; height: 42px; font-size: 15px; border: 0; flex-shrink: 0; }
.account-menu {
  position: absolute; right: 0; top: calc(100% + 8px); width: 260px; padding: 8px;
  background: var(--vlak); border: 1px solid var(--rand); border-radius: 14px; box-shadow: var(--schaduw-groot);
  opacity: 0; visibility: hidden; transform: translateY(6px); transition: opacity .15s, transform .15s, visibility .15s;
}
.account-menu::before { content: ""; position: absolute; left: 0; right: 0; top: -10px; height: 10px; }
.account:hover .account-menu, .account:focus-within .account-menu { opacity: 1; visibility: visible; transform: none; }
.account-kop { display: flex; gap: 10px; align-items: center; padding: 8px 8px 12px; border-bottom: 1px solid var(--rand-licht); margin-bottom: 6px; }
.account-kop small { display: block; color: var(--zacht); font-size: 11.5px; overflow: hidden; text-overflow: ellipsis; }
.account-menu a, .account-menu button {
  display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 10px; border-radius: 8px;
  color: var(--tekst); background: none; border: 0; font: inherit; text-align: left; cursor: pointer;
}
.account-menu a:hover, .account-menu button:hover { background: var(--rij-hover); text-decoration: none; }
.account-menu form { margin: 0; border-top: 1px solid var(--rand-licht); margin-top: 6px; padding-top: 6px; }
.account-menu .icoon { color: var(--zacht); }

/* ---------- Inlogscherm en installatie ---------- */
body.kaal {
  display: grid; place-items: center; padding: 24px 16px;
  background:
    radial-gradient(80% 60% at 20% 0%, color-mix(in srgb, var(--merk) 35%, transparent), transparent 70%),
    linear-gradient(160deg, var(--menu), color-mix(in srgb, var(--menu) 70%, black));
}
.kaal-kaart { width: min(410px, 100%); background: var(--vlak); border-radius: 18px; padding: 32px; box-shadow: 0 30px 60px -20px rgba(0,0,0,.5); }
.kaal-logo { display: flex; justify-content: center; margin-bottom: 22px; }
.kaal-logo .logo { color: var(--tekst); font-size: 22px; }
.kaal-logo .logo img { max-height: 56px; max-width: 260px; }
.kaal .formulier { max-width: none; }
.kaal h1 { text-align: center; }
.qr { display: block; width: 240px; height: 240px; margin: 12px 0; image-rendering: pixelated; border: 1px solid var(--rand); border-radius: 10px; background: #fff; }
.logo-voorbeeld { border: 1px solid var(--rand); border-radius: 10px; padding: 12px; display: inline-block; align-self: flex-start; }
.logo-voorbeeld img { max-height: 80px; max-width: 300px; display: block; }
input[type=color] { width: 80px; height: 36px; padding: 3px; }

/* ---------- Pagina: submenu links, inhoud op een kaart ---------- */
.pagina { display: flex; gap: 22px; align-items: flex-start; padding: 22px 22px 40px; max-width: 1440px; margin: 0 auto; }
.submenu { width: 214px; flex-shrink: 0; display: flex; flex-direction: column; gap: 2px; position: sticky; top: 82px; }
.submenu-kop { font-size: 11px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: #98a2b3; padding: 4px 12px 6px; }
.submenu a { display: flex; align-items: center; gap: 10px; padding: 8px 12px; color: #344054; font-weight: 550; border-radius: 9px; }
.submenu a .icoon { color: #98a2b3; }
.submenu a:hover { background: #e9edf3; text-decoration: none; }
.submenu a.actief { background: var(--vlak); color: var(--merk); box-shadow: var(--schaduw); }
.submenu a.actief .icoon { color: var(--merk); }
.submenu hr { border: 0; border-top: 1px solid #dde3ea; margin: 10px 12px; width: calc(100% - 24px); }
.submenu a.teller { justify-content: space-between; font-weight: 450; font-size: 12.5px; color: var(--zacht); padding: 6px 12px; }
.submenu a.teller b {
  min-width: 24px; height: 20px; line-height: 20px; text-align: center; font-weight: 650; font-size: 11.5px;
  background: #e4e9f0; border-radius: 10px; padding: 0 7px; color: #475467;
}
.submenu a.teller b.rood { background: #fee4e2; color: var(--rood) !important; }

.vlak {
  flex: 1; min-width: 0;
  background: var(--vlak);
  border: 1px solid var(--rand-licht);
  border-radius: 16px;
  box-shadow: var(--schaduw);
  padding: 24px 26px 30px;
}

/* ---------- Klantenpaneel: zelfde huisstijl, smallere pagina zonder submenu ---------- */
.paneel-inhoud { max-width: 1100px; margin: 26px auto 0; }
.paneel-voet { text-align: center; color: var(--zacht); font-size: 12px; margin: 18px 0 30px; }
.paneel-cijfers { grid-template-columns: repeat(4, minmax(130px, 1fr)); }
.kp-kaart .gegevens { margin-bottom: 12px; }
.kp-opzeggen { text-align: left; }
.kp-opzeggen summary { list-style: none; cursor: pointer; display: inline-flex; }
.kp-opzeggen summary::-webkit-details-marker { display: none; }
.kp-opzeggen[open] form {
  position: absolute; right: 26px; width: min(420px, calc(100vw - 52px)); margin-top: 6px; z-index: 5;
  background: var(--vlak); border: 1px solid var(--rand); border-radius: 12px; padding: 14px; box-shadow: var(--schaduw-groot);
  white-space: normal;
}
.activiteit { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
@media (max-width: 760px) {
  .klantenpaneel .topbalk { height: auto; flex-wrap: wrap; padding: 10px 16px; }
  .klantenpaneel .hoofdnav { order: 3; flex-basis: 100%; overflow-x: auto; }
  .paneel-inhoud { margin: 16px; }
  .paneel-cijfers { grid-template-columns: 1fr 1fr; }
}