/* =========================================================
   ENERGIEVOLLEDIG — Sales Portaal
   Gedeelde huisstijl (navy + goud + Inter)
   1 bestand voor het hele portaal. Pas hier aan = overal aan.
   ========================================================= */

:root{
  /* Kern huisstijl — waarden = canonieke tokens uit Energievolledig_BrandGuidelines.md */
  --navy:#0D1B4B;
  --navy-deep:#060F2E;
  --navy-soft:#13235C;        /* guide: navy-2 */
  --gold:#C9A84C;
  --gold-bright:#E6C868;      /* guide: gold-bright */
  --gold-soft:#EAD9A8;        /* guide: gold-soft (vullingen, gouden randen) */
  --gold-deep:#8A6D1E;        /* enige goud dat als tekst op wit mag */

  /* Tekst */
  --ink:#333333;              /* guide: body-tekst, nooit puur zwart */
  --body:#5A6178;             /* guide: muted */
  --muted:#5A6178;            /* guide: muted — betekenisvolle gedempte tekst (AA-contrast) */
  --muted-licht:#8A90A6;      /* guide: faint — ALLEEN pure meta/bijschriften/placeholders */

  /* Lijnen & vlakken */
  --line:#E6E9F2;             /* guide: navy-line */
  --line-soft:#EEF0F6;        /* tussenstap line/bg, geen guide-token */
  --line-sterk:#D6DCEF;       /* accent-/hoverrand, 1 stap donkerder dan --line (consolidatie van 4 bijna-gelijke tinten; nog geen guide-token) */
  --bg:#F5F6FA;               /* guide: soft */
  --card:#FFFFFF;
  --tint:#E8ECF5;             /* guide: navy-tint (alleen kleine vlakken/hovers, niet paginabreed) */
  --tint-gold:#FBF7EC;        /* guide: gold-bg */

  /* Status */
  --green:#2E8B57;            /* guide: green */
  --green-deep:#1E6E42;       /* guide: green-deep (donkere gradient-stop) */
  --green-tint:#E4F1EA;       /* guide: green-soft */
  --green-rand:#C6E6D4;       /* randtint bij green-tint (consolidatie; nog geen guide-token) */
  --red:#C0392B;              /* guide: red */
  --red-tint:#FBEAE7;         /* guide: red-soft */
  --red-rand:#F0CDD5;         /* randtint bij red-tint (consolidatie; nog geen guide-token) */

  /* Data-blauw (agenda "persoonlijk"; guide: alleen als data-accent, geen merkkleur) */
  --data-blue-deep:#2C5C86;   /* guide: data-blue-deep */
  --data-blue-bg:#EAF1F8;     /* guide: data-blue-bg */
  --data-blue-rand:#A9C4E4;   /* randtint bij data-blue-bg (consolidatie; nog geen guide-token) */

  /* Schaduw & radius */
  --shadow:0 1px 2px rgba(13,27,75,.04), 0 12px 32px rgba(13,27,75,.06);
  --shadow-lg:0 2px 4px rgba(13,27,75,.04), 0 24px 64px rgba(13,27,75,.10);
  --r:18px;
  --r-sm:12px;

  /* Letter. Een token, zodat een partneromgeving hem kan overschrijven met
     een eigen :root ná dit bestand (zie ev_merk_stijl() in functies.php).
     --letter-kop is voor de koppen; bij Energievolledig is dat dezelfde. */
  --letter:'Inter',-apple-system,BlinkMacSystemFont,sans-serif;
  --letter-kop:'Inter',-apple-system,BlinkMacSystemFont,sans-serif;
}

*{ box-sizing:border-box; margin:0; padding:0; }

body{
  font-family:var(--letter);
  color:var(--ink);
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
  line-height:1.5;
}

a{ color:inherit; text-decoration:none; }

/* Toetsenbord-focus: overal zichtbaar, in lijn met de bestaande .proces-stap:focus-visible */
a:focus-visible, button:focus-visible, [tabindex]:focus-visible{ outline:2px solid var(--gold); outline-offset:2px; }


/* =========================================================
   INLOG-SCHERM — navy merkvlak links, wit inlogvlak rechts.
   Rustig en zakelijk: geen gradients, rasters of gloed.
   ========================================================= */
.auth-body{
  min-height:100vh;
  background:#fff;
}

.auth-split{
  display:grid;
  grid-template-columns:minmax(0,44%) minmax(0,56%);
  width:100%;
  min-height:100vh;
}

/* ---- LINKS: merkvlak (massief navy) ---- */
.brand-panel{
  position:relative;
  overflow:hidden;
  padding:52px 56px;
  display:flex;
  flex-direction:column;
  background:var(--navy);
  color:#fff;
}
/* Het logo als groot, rustig grafisch element dat van de rand loopt.
   Vlak en tone-on-tone — geen gloed, geen blur. */
.brand-watermark{
  position:absolute;
  right:-14%; bottom:-16%;
  width:78%;
  opacity:.06;
  pointer-events:none;
  user-select:none;
}

.brand-mark{
  position:relative; z-index:1;
  display:flex; align-items:center; gap:14px;
}
.brand-mark img{ height:50px; width:auto; }
.brand-wordmark{
  font-size:23px; font-weight:800; letter-spacing:-.025em; line-height:1;
  color:#fff;
}

.brand-center{
  position:relative; z-index:1;
  margin-top:auto; margin-bottom:auto;
  padding:40px 0;
}
.brand-kicker{
  color:var(--gold-bright); font-size:12px; font-weight:700;
  letter-spacing:.18em; text-transform:uppercase; margin-bottom:22px;
}
.brand-headline{
  color:#fff; font-size:40px; font-weight:800; letter-spacing:-.035em;
  line-height:1.08; max-width:12ch;
}
.brand-tagline{
  color:rgba(255,255,255,.62); font-size:15px; font-weight:500;
  line-height:1.6; margin-top:20px; max-width:34ch;
}
/* Verwijzing naar de publieke site voor wie hier per ongeluk belandt.
   Goud in plaats van standaard-blauw, want dit staat op het donkere vlak. */
.brand-link{ color:var(--gold); font-weight:700; text-decoration:none; border-bottom:1px solid rgba(201,168,76,.45); }
.brand-link:hover, .brand-link:focus-visible{ color:#fff; border-bottom-color:rgba(255,255,255,.6); }

.brand-foot{
  position:relative; z-index:1;
  color:rgba(255,255,255,.4);
  font-size:12.5px; font-weight:500;
}

/* ---- RECHTS: inlogvlak (wit) ---- */
.form-panel{
  display:flex; align-items:center; justify-content:center;
  padding:48px 40px;
  background:#fff;
}

.auth-card{
  position:relative;
  width:100%;
  max-width:360px;
}

@keyframes rise{
  from{ opacity:0; transform:translateY(12px); }
  to{ opacity:1; transform:translateY(0); }
}

/* klein logo alleen op mobiel (merkvlak valt weg) */
.auth-mobilemark{
  display:none;
  align-items:center; gap:11px;
  margin-bottom:34px;
}
.auth-mobilemark img{ height:42px; }
.auth-mobilemark span{ font-size:20px; font-weight:800; letter-spacing:-.02em; color:var(--navy); }

.auth-title{
  color:var(--navy);
  font-size:25px;
  font-weight:800;
  letter-spacing:-.025em;
}
.auth-sub{
  color:var(--muted);
  font-size:14px;
  font-weight:500;
  margin-top:8px;
  margin-bottom:30px;
}

/* Velden (op wit) */
.field{ margin-bottom:17px; }
.field label{
  display:block;
  color:var(--body);
  font-size:12.5px;
  font-weight:600;
  margin-bottom:8px;
}
.field input{
  width:100%;
  font-family:inherit;
  font-size:14.5px;
  font-weight:500;
  color:var(--ink);
  background:#fff;
  border:1px solid var(--line);
  border-radius:11px;
  padding:13px 15px;
  transition:border-color .15s ease, box-shadow .15s ease;
}
.field input::placeholder{ color:var(--muted-licht); }
.field input:focus{
  outline:none;
  border-color:var(--navy-soft);
  box-shadow:0 0 0 3px rgba(13,27,75,.09);
}

.field-pw{ position:relative; }
.field-pw input{ padding-right:44px; }
.pw-toggle{
  position:absolute; right:6px; top:33px;
  background:none; border:none; cursor:pointer;
  color:var(--muted); padding:8px; border-radius:8px;
  display:flex; align-items:center; transition:color .15s ease;
}
.pw-toggle:hover{ color:var(--body); }

/* Hoofdknop */
.btn-gold{
  width:100%;
  font-family:inherit;
  font-size:14.5px;
  font-weight:700;
  color:#fff;
  background:var(--navy);
  border:none;
  border-radius:11px;
  padding:14px 20px;
  margin-top:6px;
  cursor:pointer;
  transition:background .14s ease, transform .14s ease;
}
.btn-gold:hover{ background:var(--navy-soft); transform:translateY(-1px); }
.btn-gold:active{ transform:translateY(0); }

/* Foutmelding (op wit) */
.auth-error{
  background:var(--red-tint);
  border:1px solid var(--red-rand);
  color:var(--red);
  font-size:13px;
  font-weight:600;
  border-radius:11px;
  padding:11px 14px;
  margin-bottom:20px;
  display:flex; align-items:center; gap:9px;
}

/* Klein management-linkje onderin */
.auth-foot{
  margin-top:28px;
  padding-top:20px;
  border-top:1px solid var(--line);
  text-align:center;
}
.auth-switch{
  display:inline-flex; align-items:center; gap:7px;
  color:var(--muted);
  font-size:12.5px;
  font-weight:600;
  cursor:pointer;
  background:none; border:none; font-family:inherit;
  transition:color .15s ease;
}
.auth-switch:hover{ color:var(--navy); }

/* Management-variant */
.auth-card.is-mgmt .auth-title{ color:var(--navy); }
.mgmt-badge{
  display:inline-flex; align-items:center; gap:6px;
  background:var(--tint-gold);
  border:1px solid var(--gold-soft);
  color:var(--gold-deep);
  font-size:11px; font-weight:700; letter-spacing:.03em; text-transform:uppercase;
  padding:5px 11px; border-radius:100px;
  margin:0 0 16px; width:fit-content;
}
/* ---------------------------------------------------------
   PORTAAL (licht, tegels)
   --------------------------------------------------------- */
.topbar{
  background:var(--card);
  border-bottom:1px solid var(--line);
  padding:0 26px;
  height:66px;
  display:flex; align-items:center; justify-content:space-between;
  position:sticky; top:0; z-index:20;
}
.topbar img{ height:44px; }
.topbar-right{ display:flex; align-items:center; gap:14px; }
.user-chip{
  display:flex; align-items:center; gap:9px;
  font-size:13px; font-weight:600; color:var(--body);
}
.user-avatar{
  width:34px; height:34px; border-radius:50%;
  background:linear-gradient(135deg,var(--navy),var(--navy-soft));
  color:#fff; font-size:13px; font-weight:700;
  display:flex; align-items:center; justify-content:center;
}
.btn-out{
  font-family:inherit; font-size:12.5px; font-weight:600;
  color:var(--body); background:var(--tint);
  border:1px solid var(--line); border-radius:10px;
  padding:8px 14px; cursor:pointer; transition:all .14s ease;
}
.btn-out:hover{ background:var(--red-tint); border-color:var(--red-rand); color:var(--red); }

.portal-wrap{ max-width:1080px; margin:0 auto; padding:40px 26px 80px; }
.portal-head{ margin-bottom:34px; }
.portal-head h1{ font-size:26px; font-weight:800; letter-spacing:-.02em; color:var(--navy); }
.portal-head p{ font-size:14.5px; color:var(--muted); margin-top:6px; }

/* =========================================================
   KLANTMODUS-BALK op de adviseur-home
   ---------------------------------------------------------
   Eén brede knop boven de drie kolommen. Donker vlak, omdat dit
   de enige plek op de pagina is die je opent terwijl er iemand
   naast je zit: hij moet er in één blik uitspringen.
   ========================================================= */
.klantmodus-balk{
  display:flex; align-items:center; gap:18px; margin:-14px 0 30px;
  padding:20px 24px; border-radius:20px; text-decoration:none;
  background:linear-gradient(135deg,var(--navy),var(--navy-soft));
  border:1px solid var(--navy); box-shadow:var(--shadow);
  transition:transform .16s ease, box-shadow .16s ease;
}
.klantmodus-balk:hover{ transform:translateY(-2px); box-shadow:var(--shadow-lg); }
.klantmodus-balk .km-ico{
  flex:none; width:48px; height:48px; border-radius:14px; display:grid; place-items:center;
  background:rgba(255,255,255,.10); color:var(--gold);
}
.klantmodus-balk .km-tekst{ flex:1; min-width:0; display:block; }
.klantmodus-balk .km-titel{ display:block; font-size:17px; font-weight:800; color:#fff; letter-spacing:-.01em; }
.klantmodus-balk .km-sub{ display:block; font-size:13px; color:rgba(255,255,255,.62); margin-top:3px; }
.klantmodus-balk .km-pijl{
  flex:none; display:inline-flex; align-items:center; gap:8px;
  font-size:13px; font-weight:800; color:var(--navy);
  background:var(--gold); padding:11px 17px; border-radius:11px;
}
.klantmodus-balk:hover .km-pijl{ background:var(--gold-bright); }
@media(max-width:700px){
  .klantmodus-balk{ flex-wrap:wrap; gap:14px; padding:18px; }
  .klantmodus-balk .km-tekst{ flex:1 1 100%; order:2; }
  .klantmodus-balk .km-pijl{ order:3; width:100%; justify-content:center; }
}

.tile-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(240px,1fr));
  gap:18px;
}
.tile{
  display:flex; flex-direction:column; gap:14px;
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--r);
  padding:22px;
  box-shadow:var(--shadow);
  transition:transform .16s ease, box-shadow .16s ease, border-color .16s ease;
  cursor:pointer;
}
.tile:hover{ transform:translateY(-3px); box-shadow:var(--shadow-lg); border-color:var(--line-sterk); }
.tile-icon{
  width:46px; height:46px; border-radius:13px;
  background:linear-gradient(135deg,var(--tint-gold),var(--gold-soft));
  border:1px solid var(--gold-soft);
  display:flex; align-items:center; justify-content:center;
  color:var(--gold-deep);
}
.tile h3{ font-size:16px; font-weight:700; color:var(--ink); letter-spacing:-.01em; }
.tile p{ font-size:13px; color:var(--muted); line-height:1.45; }
.tile-tag{
  margin-top:auto; font-size:11px; font-weight:700; letter-spacing:.03em;
  text-transform:uppercase; color:var(--gold-deep);
  display:inline-flex; align-items:center; gap:5px;
}

/* Tablet: merkpaneel smaller, minder padding */
@media (max-width:1020px){
  .brand-panel{ padding:44px 40px; }
  .form-panel{ padding:44px 32px; }
  .brand-headline{ font-size:32px; }
}

/* Mobiel: één kolom. Merkvlak weg, klein logo boven formulier. */
@media (max-width:800px){
  .auth-split{ grid-template-columns:1fr; }
  .brand-panel{ display:none; }
  .auth-mobilemark{ display:flex; }
}

@media (max-width:420px){
  .form-panel{ padding:36px 22px; }
}

/* ---------------------------------------------------------
   BEHEERSCHERM
   --------------------------------------------------------- */
.notice{ border-radius:12px; padding:12px 16px; font-size:13.5px; font-weight:600; margin-bottom:20px; }
.notice-ok{ background:var(--green-tint); border:1px solid var(--green-rand); color:var(--green); }
.notice-err{ background:var(--red-tint); border:1px solid var(--red-rand); color:var(--red); }

.beheer-grid{ display:grid; grid-template-columns:minmax(300px,380px) 1fr; gap:22px; align-items:start; }

.panel{ background:var(--card); border:1px solid var(--line); border-radius:var(--r); padding:24px; box-shadow:var(--shadow); }
.panel-h{ font-size:15px; font-weight:700; color:var(--ink); margin-bottom:18px; letter-spacing:-.01em; }

.field-l{ margin-bottom:15px; }
.field-l label{ display:block; font-size:12.5px; font-weight:600; color:var(--body); margin-bottom:7px; }
.field-l input, .field-l select{
  width:100%; font-family:inherit; font-size:14px; font-weight:500; color:var(--ink);
  background:#fff; border:1px solid var(--line); border-radius:10px; padding:11px 13px;
  transition:border-color .15s ease, box-shadow .15s ease;
}
.field-l input:focus, .field-l select:focus{ outline:none; border-color:var(--navy-soft); box-shadow:0 0 0 3px rgba(13,27,75,.09); }
.hint{ font-size:11.5px; color:var(--muted); margin-top:6px; line-height:1.4; }

.btn-navy{
  width:100%; font-family:inherit; font-size:14px; font-weight:700; color:#fff;
  background:var(--navy); border:none; border-radius:10px; padding:12px 18px; margin-top:4px;
  cursor:pointer; transition:background .14s ease;
}
.btn-navy:hover{ background:var(--navy-soft); }

.acc-list{ display:flex; flex-direction:column; }
.acc-row{ display:flex; align-items:center; gap:13px; padding:13px 4px; border-bottom:1px solid var(--line-soft); }
.acc-row:last-child{ border-bottom:none; }
.acc-info{ flex:1; min-width:0; }
.acc-naam{ font-size:14px; font-weight:700; color:var(--ink); display:flex; align-items:center; gap:8px; }
.acc-email{ font-size:12.5px; color:var(--muted); margin-top:2px; }
.acc-rol{ font-size:10.5px; font-weight:700; letter-spacing:.02em; text-transform:uppercase; padding:2px 8px; border-radius:100px; }

/* Bij welke omgeving hoort dit account: Energievolledig, Holland Energie of
   Energiefocus. De kleur komt per merk mee als --om, zodat je in één oogopslag
   ziet wie waarbij hoort. Iemand met twee petten krijgt gewoon twee labels. */
.acc-omgeving{ font-size:10.5px; font-weight:700; letter-spacing:.02em; padding:2px 8px;
  border-radius:100px; color:var(--om); background:color-mix(in srgb, var(--om) 10%, #fff);
  border:1px solid color-mix(in srgb, var(--om) 26%, #fff); white-space:nowrap; }
.rol-superadmin{ background:var(--tint-gold); color:var(--gold-deep); border:1px solid var(--gold-soft); }
.rol-management{ background:var(--line); color:var(--navy); border:1px solid var(--line-sterk); }
.rol-adviseur{ background:var(--tint); color:var(--body); border:1px solid var(--line); }

.acc-actie{ display:flex; align-items:center; gap:10px; flex:none; }
.acc-status{ font-size:11px; font-weight:700; padding:3px 9px; border-radius:100px; }
.st-aan{ background:var(--green-tint); color:var(--green); }
.st-uit{ background:var(--red-tint); color:var(--red); }
/* Uitgenodigd, maar nog nooit ingelogd: het account wacht op de eerste keer. */
.st-wacht{ background:var(--tint-gold); color:var(--gold-deep); }

/* Uitleg bij een formulier: rustig blok, geen waarschuwing. Gebruikt bij
   accountbeheer om te vertellen dat de gebruiker zelf zijn wachtwoord kiest. */
.uitleg-blok{ display:flex; gap:11px; align-items:flex-start; margin:4px 0 18px; padding:13px 15px;
              background:var(--tint); border-radius:12px; font-size:13px; line-height:1.55; color:var(--body); }
.uitleg-blok svg{ width:18px; height:18px; flex:none; margin-top:1px; color:var(--navy); }
.uitleg-blok b{ color:var(--navy); }

/* De eenmalige link die alleen verschijnt als mailen niet lukte. */
.notice-link{ background:var(--tint-gold); border:1px solid var(--gold-soft); color:var(--gold-deep); font-weight:600; }
.notice-link p{ margin:5px 0 10px; font-weight:500; font-size:12.5px; line-height:1.5; }
.notice-link .link-rij{ display:flex; gap:8px; }
.notice-link input{ flex:1; min-width:0; font-family:inherit; font-size:12.5px; padding:9px 11px;
                    border:1px solid var(--gold-soft); border-radius:9px; background:#fff; color:var(--ink); }
.mini-btn{
  font-family:inherit; font-size:12px; font-weight:600; color:var(--body);
  background:var(--tint); border:1px solid var(--line); border-radius:8px; padding:6px 11px; cursor:pointer;
  transition:all .14s ease;
}
.mini-btn:hover{ background:var(--navy); color:#fff; border-color:var(--navy); }

@media (max-width:820px){ .beheer-grid{ grid-template-columns:1fr; } }

/* =========================================================
   INTERN HOOFDMENU (hub): chat links, groot logo, profiel
   ========================================================= */
.hub-body{ height:100vh; overflow:hidden; background:var(--bg); }
.hub-layout{ display:grid; grid-template-columns:320px 1fr; height:100vh; }

/* ---- Chatpaneel links ---- */
.chat-panel{
  background:var(--navy); color:#fff; display:flex; flex-direction:column;
  border-right:1px solid rgba(255,255,255,.08);
}
.chat-head{
  display:flex; align-items:center; gap:11px; padding:20px 20px 16px;
  border-bottom:1px solid rgba(255,255,255,.08);
}
.chat-head .dot{ width:9px; height:9px; border-radius:50%; background:var(--green); box-shadow:0 0 0 3px rgba(31,122,77,.25); }
.chat-head h2{ font-size:15px; font-weight:700; }
.chat-head span{ font-size:11.5px; color:rgba(255,255,255,.45); margin-left:auto; }
.chat-list{ flex:1; overflow-y:auto; padding:18px 18px; display:flex; flex-direction:column; gap:14px; }
.chat-msg{ display:flex; gap:10px; align-items:flex-start; }
.chat-ava{ width:30px; height:30px; border-radius:50%; flex:none; display:flex; align-items:center; justify-content:center; font-size:11px; font-weight:700; background:linear-gradient(135deg,var(--gold),var(--gold-deep)); color:#fff; }
.chat-bubble{ background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.08); border-radius:12px; padding:9px 12px; }
.chat-naam{ font-size:11.5px; font-weight:700; color:var(--gold-bright); margin-bottom:2px; }
.chat-tekst{ font-size:13px; color:rgba(255,255,255,.85); line-height:1.4; }
.chat-mine{ flex-direction:row-reverse; }
.chat-mine .chat-bubble{ background:rgba(201,168,76,.16); border-color:rgba(201,168,76,.3); }
.chat-mine .chat-naam{ text-align:right; color:#fff; }
.chat-input{ padding:14px 16px; border-top:1px solid rgba(255,255,255,.08); display:flex; gap:9px; }
.chat-input input{
  flex:1; font-family:inherit; font-size:13px; color:#fff; background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.12); border-radius:10px; padding:10px 12px;
}
.chat-input input::placeholder{ color:rgba(255,255,255,.4); }
.chat-input input:focus{ outline:none; border-color:var(--gold); }
.chat-send{ background:var(--gold); border:none; border-radius:10px; width:40px; cursor:pointer; color:var(--navy-deep); display:flex; align-items:center; justify-content:center; transition:filter .14s ease; }
.chat-send:hover{ filter:brightness(1.06); }

/* ---- Hoofdgedeelte ---- */
.hub-main{ overflow-y:auto; height:100vh; }
.hub-topbar{
  display:flex; align-items:center; justify-content:space-between;
  padding:22px 40px; border-bottom:1px solid var(--line); background:var(--card);
  position:sticky; top:0; z-index:30;
}
.hub-logo{ height:58px; }

/* Profiel rechtsboven */
.profiel{ position:relative; }
.profiel-knop{ display:flex; align-items:center; gap:11px; background:none; border:none; cursor:pointer; font-family:inherit; padding:5px; border-radius:12px; transition:background .14s ease; }
.profiel-knop:hover{ background:var(--tint); }
.profiel-foto{ width:44px; height:44px; border-radius:50%; object-fit:cover; background:linear-gradient(135deg,var(--navy),var(--navy-soft)); color:#fff; display:flex; align-items:center; justify-content:center; font-size:15px; font-weight:700; border:2px solid var(--gold); }
.profiel-info{ text-align:left; }
.profiel-info b{ display:block; font-size:13.5px; color:var(--ink); font-weight:700; }
.profiel-info span{ font-size:11.5px; color:var(--muted); }
/* =========================================================
   HET PROFIELMENU (rechtsboven)
   ---------------------------------------------------------
   Drie blokken onder elkaar met een kop erboven: wie je bent, waar je heen
   kunt, en je account. Uitloggen staat los onderaan.

   Rustig gehouden. Hiervoor waren Odoo en de klantmodus gevulde blokken in
   hun eigen kleur; drie gekleurde vlakken in een menu van vijf regels is te
   veel. Nu draagt alleen het bolletje de kleur van een omgeving, en pas als je
   erover gaat kleurt de regel mee. Zo zie je in één oogopslag welke omgevingen
   er zijn zonder dat het menu een verfdoos wordt.

   De kleur komt per regel mee als --mk (zie ev_merk_kleur() in functies.php).
   ========================================================= */
.profiel-menu{
  position:absolute; right:0; top:62px; width:266px; background:var(--card);
  border:1px solid var(--line); border-radius:16px;
  box-shadow:0 1px 2px rgba(13,27,75,.05), 0 14px 34px -10px rgba(13,27,75,.20);
  padding:6px; display:none; z-index:40;
}
.profiel-menu.open{ display:block; }

/* --- wie je bent --- */
.pm-kop{ display:flex; align-items:center; gap:11px; padding:11px 12px 10px; }
.pm-avatar{ width:38px; height:38px; border-radius:50%; flex:0 0 38px;
  background:linear-gradient(135deg,var(--navy),var(--navy-soft)); color:#fff;
  display:flex; align-items:center; justify-content:center;
  font-size:12.5px; font-weight:700; letter-spacing:.02em; }
.pm-wie{ min-width:0; }
/* display:block, want een <span> is inline: zonder dit komen naam en rol naast
   elkaar te staan en breken ze alleen af als de naam lang genoeg is. */
.pm-naam{ display:block; font-size:13.5px; font-weight:700; color:var(--ink); line-height:1.25;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.pm-rol{ display:block; font-size:11.5px; color:var(--muted); line-height:1.3;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

/* waar je nu bent */
.pm-nu{ display:flex; align-items:center; gap:8px; margin:0 6px 4px;
  padding:7px 11px; border-radius:10px; background:var(--tint);
  font-size:11.5px; font-weight:600; color:var(--body); }
.pm-nu .stip{ width:7px; height:7px; border-radius:50%; flex:0 0 7px;
  background:linear-gradient(135deg,var(--mk1,var(--navy)) 50%,var(--mk2,var(--gold)) 50%); }

/* --- de blokken --- */
.pm-blok{ padding-bottom:2px; border-top:1px solid var(--line-soft); margin-top:4px; }
.pm-label{ font-size:9.5px; font-weight:700; letter-spacing:.09em; text-transform:uppercase;
  color:var(--faint); padding:9px 12px 4px; }

/* --- een regel --- */
.profiel-menu a, .profiel-menu button.menu-item{
  display:flex; align-items:center; gap:11px; width:100%;
  padding:9px 12px; border:0; background:none; border-radius:10px;
  font-family:inherit; font-size:13.5px; font-weight:600; color:var(--body);
  text-align:left; cursor:pointer; text-decoration:none;
  transition:background .13s ease, color .13s ease;
}
.profiel-menu a:hover, .profiel-menu button.menu-item:hover{ background:var(--tint); }
.pm-ico{ flex:0 0 16px; display:flex; color:var(--muted); transition:color .13s ease; }
.profiel-menu a:hover .pm-ico, .profiel-menu button.menu-item:hover .pm-ico{ color:var(--navy); }
.pm-pijl{ margin-left:auto; display:flex; color:var(--muted-licht); transition:color .13s ease; }

/* --- naar een andere omgeving --- */
/* Het bolletje draagt de twee kleuren uit het logo van dat merk: blauw en rood
   voor Holland Energie, blauw en groen voor Energiefocus, navy en goud voor
   onszelf. Zo herken je de regel zonder te lezen. --mk is de kleur waarop
   tekst leesbaar is en stuurt de hover. */
.pm-merk .stip{ width:10px; height:10px; border-radius:50%; flex:0 0 10px; margin:0 3px;
  background:linear-gradient(135deg,var(--mk1) 50%,var(--mk2) 50%);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--mk) 13%, transparent); }
.pm-merk:hover{ background:color-mix(in srgb, var(--mk) 8%, #fff); color:var(--mk); }
.pm-merk:hover .pm-pijl{ color:var(--mk); }

/* --- uitloggen, los onderaan --- */
.profiel-menu a.uit{ color:var(--muted); }
.profiel-menu a.uit:hover{ background:var(--red-tint); color:var(--red); }
.profiel-menu a.uit:hover .pm-ico{ color:var(--red); }
.profiel-menu .scheid{ height:1px; background:var(--line-soft); margin:4px 8px; }

/* ---- Drie grote keuzes ---- */
.hub-wrap{ max-width:1080px; margin:0 auto; padding:46px 40px 80px; }
.hub-hi h1{ font-size:28px; font-weight:800; letter-spacing:-.025em; color:var(--navy); }
.hub-hi p{ font-size:15px; color:var(--muted); margin-top:6px; margin-bottom:38px; }

.big-tiles{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
/* Bij PRECIES vier tegels (Personeel, Producten, Accounts, Logboek) wordt
   drie-op-een-rij een scheve 3+1. Dan liever een net blok van 2x2. Bij twee
   of drie tegels blijft het zoals het was. Hoeveel tegels iemand ziet hangt
   van zijn rechten af, dus dit moet zich vanzelf aanpassen. */
.big-tiles:has(> :nth-child(4)):not(:has(> :nth-child(5))){ grid-template-columns:repeat(2,1fr); }
.big-tile{
  display:flex; flex-direction:column; gap:16px; text-align:left;
  background:var(--card); border:1px solid var(--line); border-radius:22px;
  padding:30px 26px; box-shadow:var(--shadow); cursor:pointer; min-height:240px;
  transition:transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
.big-tile:hover{ transform:translateY(-4px); box-shadow:var(--shadow-lg); border-color:var(--line-sterk); }
.big-tile .bt-icon{
  width:62px; height:62px; border-radius:17px; display:flex; align-items:center; justify-content:center;
  background:linear-gradient(135deg,var(--navy),var(--navy-soft)); color:#fff;
}
.big-tile.goud .bt-icon{ background:linear-gradient(135deg,var(--gold),var(--gold-deep)); }
.big-tile h3{ font-size:20px; font-weight:800; letter-spacing:-.02em; color:var(--ink); }
.big-tile p{ font-size:13.5px; color:var(--muted); line-height:1.5; flex:1; }
.big-tile .bt-go{ display:inline-flex; align-items:center; gap:7px; font-size:12.5px; font-weight:700; color:var(--navy); text-transform:uppercase; letter-spacing:.03em; }
.big-tile.goud .bt-go{ color:var(--gold-deep); }

@media (max-width:900px){
  .hub-layout{ grid-template-columns:1fr; }
  .chat-panel{ display:none; }
  .big-tiles{ grid-template-columns:1fr; }
}

/* ---- Profiel-modal ---- */
.modal-bg{ position:fixed; inset:0; background:rgba(6,15,46,.5); display:none; align-items:center; justify-content:center; z-index:60; padding:20px; }
.modal-bg.open{ display:flex; }
.modal{ background:var(--card); border-radius:20px; width:100%; max-width:430px; padding:30px; box-shadow:var(--shadow-lg); }
.modal h2{ font-size:19px; font-weight:800; color:var(--navy); letter-spacing:-.02em; margin-bottom:4px; }
.modal .sub{ font-size:13px; color:var(--muted); margin-bottom:22px; }
.modal-foto{ display:flex; align-items:center; gap:16px; margin-bottom:22px; }
.modal-foto .groot{ width:70px; height:70px; border-radius:50%; background:linear-gradient(135deg,var(--navy),var(--navy-soft)); color:#fff; display:flex; align-items:center; justify-content:center; font-size:24px; font-weight:800; border:2px solid var(--gold); }
.modal-acties{ display:flex; gap:10px; margin-top:8px; }
.btn-grijs{ font-family:inherit; font-size:13.5px; font-weight:600; color:var(--body); background:var(--tint); border:1px solid var(--line); border-radius:10px; padding:11px 16px; cursor:pointer; }
.btn-grijs:hover{ background:var(--line-soft); }

/* =========================================================
   ACCOUNTBEHEER — rollen, rechten, toegang
   ========================================================= */
.terug-bar{ max-width:1180px; margin:0 auto; padding:18px 26px 0; }
.beheer-grid.breed{ grid-template-columns:minmax(320px,400px) 1fr; }

.toegang-groep{ border:1px solid var(--line); border-radius:12px; padding:6px; margin-top:4px; }
.check{ display:grid; grid-template-columns:18px 1fr; align-items:start; gap:11px; padding:9px 10px; border-radius:9px; cursor:pointer; transition:background .12s ease; }
.check:hover{ background:var(--tint); }
.check input{ width:18px; height:18px; margin-top:1px; accent-color:var(--navy); cursor:pointer; }
.check .ct{ display:block; font-size:13px; font-weight:600; color:var(--ink); line-height:1.3; }
.check .cd{ display:block; font-size:11.5px; color:var(--muted); line-height:1.35; margin-top:1px; }
.check.slot{ opacity:.5; }
.groep-titel{ font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:var(--muted); padding:8px 10px 4px; }

.acc-chips{ display:flex; flex-wrap:wrap; gap:5px; margin-top:6px; }
.chip{ font-size:10.5px; font-weight:600; padding:2px 8px; border-radius:100px; background:var(--tint); color:var(--body); border:1px solid var(--line); }
.chip.gv{ background:var(--tint-gold); color:var(--gold-deep); border-color:var(--gold-soft); }

/* Wie begeleidt wie. Twee rustige pillen onder het mailadres: bij wiens
   team hoor je, en hoeveel mensen begeleid je zelf. */
.acc-team{ display:flex; flex-wrap:wrap; gap:6px; margin-top:7px; }
.acc-team-pil{ display:inline-flex; align-items:center; gap:6px; font-size:11px; font-weight:600; color:var(--body); background:var(--tint); border:1px solid var(--line); border-radius:100px; padding:3px 10px 3px 8px; }
.acc-team-pil b{ color:var(--navy); font-weight:800; }
.acc-team-pil svg{ width:13px; height:13px; flex:none; color:var(--gold-deep); }
.acc-team-pil.leeg{ color:var(--muted-licht); background:transparent; border-style:dashed; }

/* Een avatar met een foto: het plaatje vult het bolletje helemaal. */
.user-avatar{ overflow:hidden; flex:none; }
.user-avatar img{ width:100%; height:100%; object-fit:cover; display:block; }

.acc-row.rijk{ align-items:flex-start; padding:15px 4px; }
.acc-row.rijk .acc-info{ padding-top:2px; }
.acc-knoppen{ display:flex; gap:7px; flex:none; }
.icon-btn{ width:32px; height:32px; display:flex; align-items:center; justify-content:center; border-radius:9px; background:var(--tint); border:1px solid var(--line); cursor:pointer; color:var(--body); transition:all .14s ease; }
.icon-btn:hover{ background:var(--navy); color:#fff; border-color:var(--navy); }
.icon-btn.gevaar:hover{ background:var(--red); border-color:var(--red); }

.modal.groot{ max-width:520px; max-height:90vh; overflow-y:auto; }
.rol-badge-groot{ display:inline-flex; align-items:center; gap:6px; font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.03em; padding:3px 10px; border-radius:100px; }

.rol-senior{ background:var(--green-tint); color:var(--green); border:1px solid var(--green-rand); }
.rol-intern{ background:var(--line); color:var(--navy); border:1px solid var(--line-sterk); }

/* =========================================================
   KEUZESCHERM na inloggen (meerdere omgevingen)
   ========================================================= */
.kies-body{ min-height:100vh; display:flex; align-items:center; justify-content:center; padding:24px;
  background:var(--navy); }
.kies-wrap{ width:100%; max-width:660px; text-align:center; animation:rise .5s cubic-bezier(.2,.7,.2,1); }
.kies-logo{ height:52px; margin-bottom:26px; }
.kies-wrap h1{ color:#fff; font-size:27px; font-weight:800; letter-spacing:-.025em; }
.kies-wrap .lead{ color:rgba(255,255,255,.55); font-size:15px; margin-top:8px; margin-bottom:34px; }
.kies-opties{ display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.kies-kaart{
  display:flex; flex-direction:column; align-items:center; gap:12px; text-align:center;
  background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.12); border-radius:20px;
  padding:32px 24px; cursor:pointer; transition:transform .16s ease, background .16s ease, border-color .16s ease;
}
.kies-kaart:hover{ transform:translateY(-3px); background:rgba(255,255,255,.09); border-color:var(--gold); }
.kies-kaart .ki{ width:58px; height:58px; border-radius:16px; display:flex; align-items:center; justify-content:center;
  background:rgba(201,168,76,.15); border:1px solid rgba(201,168,76,.35); color:var(--gold-bright); }
.kies-kaart h3{ color:#fff; font-size:17px; font-weight:700; }
.kies-kaart p{ color:rgba(255,255,255,.5); font-size:12.5px; line-height:1.45; }
.kies-uit{ margin-top:26px; }
.kies-uit a{ color:rgba(255,255,255,.4); font-size:12.5px; font-weight:600; }
.kies-uit a:hover{ color:var(--gold-bright); }
@media (max-width:560px){ .kies-opties{ grid-template-columns:1fr; } }

/* =========================================================
   CHAT-WIDGET (herbruikbaar, in/uitklapbaar, op elke pagina)
   Wordt geïnjecteerd door assets/chat.js
   ========================================================= */
.evchat-launch{
  position:fixed; left:24px; bottom:24px; z-index:70;
  width:58px; height:58px; border-radius:18px; border:none; cursor:pointer;
  background:var(--navy); color:#fff; box-shadow:0 12px 30px rgba(13,27,75,.32);
  display:flex; align-items:center; justify-content:center; transition:transform .16s ease, background .16s ease;
}
.evchat-launch:hover{ transform:translateY(-2px); background:var(--navy-soft); }
.evchat-launch .badge{ position:absolute; top:-4px; right:-4px; background:var(--gold); color:var(--navy-deep);
  font-size:11px; font-weight:800; min-width:20px; height:20px; border-radius:10px; display:flex; align-items:center; justify-content:center; padding:0 5px; }

.evchat{
  position:fixed; left:24px; bottom:24px; z-index:71;
  width:380px; max-width:calc(100vw - 48px); height:600px; max-height:calc(100vh - 48px);
  background:var(--navy); border-radius:20px; overflow:hidden;
  box-shadow:0 24px 64px rgba(6,15,46,.45); display:none; flex-direction:column;
  border:1px solid rgba(255,255,255,.08);
}
.evchat.open{ display:flex; animation:rise .22s ease; }

.evchat-head{ display:flex; align-items:center; gap:11px; padding:16px 16px; border-bottom:1px solid rgba(255,255,255,.09); color:#fff; }
.evchat-head .back{ background:none; border:none; color:rgba(255,255,255,.7); cursor:pointer; display:none; padding:2px; }
.evchat-head .titel{ font-size:15px; font-weight:700; flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.evchat-head .sub{ font-size:11px; color:rgba(255,255,255,.45); font-weight:500; }
.evchat-head .hbtn{ background:rgba(255,255,255,.08); border:none; color:#fff; width:32px; height:32px; border-radius:9px; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:background .14s ease; }
.evchat-head .hbtn:hover{ background:rgba(255,255,255,.16); }

.evchat-body{ flex:1; overflow-y:auto; }

/* Gesprekkenlijst */
.evchat-tabs{ display:flex; gap:6px; padding:12px 14px 6px; }
.evchat-tab{ flex:1; text-align:center; font-size:12px; font-weight:700; color:rgba(255,255,255,.5); background:rgba(255,255,255,.05); border:none; border-radius:9px; padding:8px; cursor:pointer; }
.evchat-tab.actief{ color:var(--navy-deep); background:var(--gold); }
.evconv{ display:flex; align-items:center; gap:11px; padding:11px 14px; cursor:pointer; transition:background .12s ease; }
.evconv:hover{ background:rgba(255,255,255,.05); }
.evconv-ava{ width:40px; height:40px; border-radius:12px; flex:none; display:flex; align-items:center; justify-content:center; font-size:13px; font-weight:700; color:#fff; }
.evconv-ava.grp{ background:linear-gradient(135deg,var(--gold),var(--gold-deep)); border-radius:12px; }
.evconv-ava.dm{ background:linear-gradient(135deg,var(--navy),var(--navy-soft)); border-radius:50%; }
.evconv-mid{ flex:1; min-width:0; }
.evconv-naam{ font-size:13.5px; font-weight:700; color:#fff; display:flex; align-items:center; gap:6px; }
.evconv-laatste{ font-size:12px; color:rgba(255,255,255,.45); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.evconv-tijd{ font-size:10.5px; color:rgba(255,255,255,.35); flex:none; }

/* Berichten */
.evchat-msgs{ display:flex; flex-direction:column; gap:12px; padding:16px 14px; }
.evmsg{ display:flex; gap:9px; align-items:flex-end; max-width:85%; }
.evmsg .a{ width:28px; height:28px; border-radius:50%; flex:none; display:flex; align-items:center; justify-content:center; font-size:10.5px; font-weight:700; background:linear-gradient(135deg,var(--navy),var(--navy-soft)); color:#fff; }
.evmsg .bub{ background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.08); border-radius:14px; padding:8px 12px; }
.evmsg .nm{ font-size:11px; font-weight:700; color:var(--gold-bright); margin-bottom:2px; }
.evmsg .tx{ font-size:13px; color:rgba(255,255,255,.9); line-height:1.4; word-break:break-word; }
.evmsg .tx img{ max-width:180px; border-radius:10px; margin-top:4px; display:block; }
.evmsg .att{ display:inline-flex; align-items:center; gap:7px; margin-top:4px; background:rgba(255,255,255,.08); border-radius:9px; padding:7px 10px; font-size:12px; color:#fff; }
.evmsg.mine{ margin-left:auto; flex-direction:row-reverse; }
.evmsg.mine .bub{ background:rgba(201,168,76,.18); border-color:rgba(201,168,76,.28); }
.evmsg.mine .nm{ text-align:right; color:#fff; }

/* Invoer */
.evchat-input{ border-top:1px solid rgba(255,255,255,.09); padding:10px 12px; display:flex; align-items:center; gap:8px; position:relative; }
.evchat-input .ibtn{ background:none; border:none; color:rgba(255,255,255,.55); cursor:pointer; padding:6px; border-radius:8px; display:flex; transition:color .14s ease; }
.evchat-input .ibtn:hover{ color:var(--gold-bright); }
.evchat-input input.txt{ flex:1; background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.12); border-radius:11px; padding:9px 12px; color:#fff; font-family:inherit; font-size:13px; }
.evchat-input input.txt::placeholder{ color:rgba(255,255,255,.4); }
.evchat-input input.txt:focus{ outline:none; border-color:var(--gold); }
.evchat-input .send{ background:var(--gold); border:none; width:38px; height:38px; border-radius:11px; cursor:pointer; color:var(--navy-deep); display:flex; align-items:center; justify-content:center; flex:none; }

.emoji-pop{ position:absolute; bottom:56px; left:12px; background:var(--card); border:1px solid var(--line); border-radius:14px; box-shadow:var(--shadow-lg); padding:10px; display:none; grid-template-columns:repeat(7,1fr); gap:3px; width:266px; z-index:5; }
.emoji-pop.open{ display:grid; }
.emoji-pop button{ background:none; border:none; font-size:20px; cursor:pointer; border-radius:8px; padding:5px; transition:background .1s ease; }
.emoji-pop button:hover{ background:var(--tint); }

.att-chip{ display:inline-flex; align-items:center; gap:6px; background:rgba(201,168,76,.16); border:1px solid rgba(201,168,76,.3); color:#fff; font-size:12px; border-radius:9px; padding:5px 9px; margin:0 12px 8px; }
.att-chip button{ background:none; border:none; color:rgba(255,255,255,.7); cursor:pointer; padding:0; display:flex; }

@media (max-width:520px){
  .evchat{ left:0; bottom:0; width:100vw; height:100vh; max-width:100vw; max-height:100vh; border-radius:0; }
  .evchat-launch{ left:16px; bottom:16px; }
}

/* Chat: groepsfoto in avatar + emoji-picker netter + vaste voet */
.evconv-ava img{ width:100%; height:100%; object-fit:cover; border-radius:inherit; }
/* Profielfoto's in de chat: het plaatje vult het bolletje helemaal. */
.evconv-ava, .evmsg .a, .dm-persoon .a{ overflow:hidden; }
.evmsg .a img, .dm-persoon .a img{ width:100%; height:100%; object-fit:cover; border-radius:inherit; display:block; }
.evchat-foot{ flex:none; }
.evchat-headfoto{ width:34px; height:34px; border-radius:10px; flex:none; display:flex; align-items:center; justify-content:center; font-size:13px; font-weight:700; color:#fff; background:linear-gradient(135deg,var(--gold),var(--gold-deep)); overflow:hidden; }
.evchat-headfoto.dm{ border-radius:50%; background:linear-gradient(135deg,var(--navy),var(--navy-soft)); }
.evchat-headfoto img{ width:100%; height:100%; object-fit:cover; }
.emoji-pop{ grid-template-columns:repeat(8,1fr); width:auto; max-width:300px; max-height:190px; overflow-y:auto; }
.grp-foto-rij{ display:flex; align-items:center; gap:14px; margin-bottom:16px; }
.grp-foto-prev{ width:60px; height:60px; border-radius:14px; flex:none; display:flex; align-items:center; justify-content:center; font-size:22px; font-weight:800; color:#fff; background:linear-gradient(135deg,var(--gold),var(--gold-deep)); overflow:hidden; }
.grp-foto-prev img{ width:100%; height:100%; object-fit:cover; }
.dm-lijst{ display:flex; flex-direction:column; gap:4px; }
.dm-persoon{ display:flex; align-items:center; gap:11px; padding:10px 12px; border-radius:11px; cursor:pointer; transition:background .12s ease; }
.dm-persoon:hover{ background:var(--tint); }
.dm-persoon .a{ width:38px; height:38px; border-radius:50%; flex:none; display:flex; align-items:center; justify-content:center; font-size:13px; font-weight:700; color:#fff; background:linear-gradient(135deg,var(--navy),var(--navy-soft)); }
.dm-persoon .n{ font-size:14px; font-weight:600; color:var(--ink); }

/* Chat-modals boven het chatpaneel */
#evGrpModal, #evDmModal{ z-index:80; }

/* =========================================================
   ADVISEUR-HOME: 3 kolommen (Sales / Profiel / Info)
   ========================================================= */
.home-cols{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-bottom:0; }
#evAgenda{ display:block; margin-top:24px; }
@media(max-width:920px){ .home-cols{ grid-template-columns:1fr; } }

.home-card{ background:var(--card); border:1px solid var(--line); border-radius:var(--r); padding:22px; box-shadow:var(--shadow); display:flex; flex-direction:column; }
.home-card-top{ display:flex; align-items:center; gap:13px; margin-bottom:16px; }
.home-card-icon{ width:48px; height:48px; border-radius:15px; flex:none; display:flex; align-items:center; justify-content:center; color:#fff; background:linear-gradient(135deg,var(--navy),var(--navy-soft)); }
.home-card-icon.goud{ background:linear-gradient(135deg,var(--gold),var(--gold-deep)); }
.home-card-icon.groen{ background:linear-gradient(135deg,var(--green),var(--green-deep)); }
.home-card h3{ font-size:17px; font-weight:800; color:var(--navy); margin:0 0 1px; }
.home-card .hc-sub{ font-size:12.5px; color:var(--muted); }

.home-list{ display:flex; flex-direction:column; gap:8px; }
.home-list a{ display:flex; align-items:center; gap:11px; padding:11px 13px; border-radius:var(--r-sm); text-decoration:none; color:var(--ink); font-weight:600; font-size:14px; border:1px solid var(--line); background:var(--tint); transition:transform .12s ease, background .12s ease, border-color .12s ease; }
.home-list a:hover{ background:var(--tint-gold); border-color:var(--gold-soft); transform:translateX(2px); }
.home-list a .hl-ico{ color:var(--gold-deep); flex:none; display:flex; }
.home-list a .pijl{ margin-left:auto; color:var(--muted); flex:none; }
.home-list a.leeg{ opacity:.55; }
.home-list a.leeg:hover{ background:var(--tint); border-color:var(--line); transform:none; cursor:default; }
.home-list a.leeg .badge-soon{ margin-left:auto; font-size:10.5px; font-weight:700; color:var(--muted); background:var(--line-soft); padding:2px 8px; border-radius:100px; }

/* Profiel-kolom: één grote actie onderaan */
.home-card .hc-tekst{ font-size:13px; color:var(--body); line-height:1.5; margin-bottom:16px; }
.home-bigbtn{ display:flex; align-items:center; justify-content:center; gap:9px; padding:13px; border-radius:var(--r-sm); background:var(--navy); color:#fff; text-decoration:none; font-weight:700; font-size:14px; transition:background .14s ease, border-color .14s ease; }
.home-bigbtn:hover{ background:var(--navy-soft); }
.home-knoppen{ margin-top:auto; display:flex; flex-direction:column; gap:10px; }

/* Mini-dashboard in de Profiel-kolom */
.mini-stats{ display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-bottom:18px; }
.mini-stat{ background:var(--tint); border:1px solid var(--line); border-radius:var(--r-sm); padding:12px 14px; }
.mini-stat .ms-val{ font-size:21px; font-weight:800; color:var(--navy); letter-spacing:-.02em; line-height:1.1; }
.mini-stat .ms-lbl{ font-size:11.5px; color:var(--muted); font-weight:600; margin-top:3px; }

/* Oogje in het Profiel-kader: verbergt orders/commissie/verdiensten op het scherm */
.oog-knop{ margin-left:auto; flex:none; width:34px; height:34px; border-radius:10px; border:1px solid var(--line); background:var(--tint); color:var(--muted); display:inline-flex; align-items:center; justify-content:center; cursor:pointer; transition:color .15s, border-color .15s, background .15s; }
.oog-knop:hover{ color:var(--navy); border-color:var(--navy); }
.oog-knop svg{ display:block; }
.oog-knop .oog-dicht{ display:none; }
.oog-knop.dicht .oog-open{ display:none; }
.oog-knop.dicht .oog-dicht{ display:block; }
.oog-knop.dicht{ color:var(--gold); border-color:var(--gold); background:var(--tint-gold); }

/* Rechtsboven: "Zet je doel" (goud) + profiel */
.topbar-rechts{ display:flex; align-items:center; gap:16px; }
.doel-knop{ display:inline-flex; align-items:center; gap:8px; background:linear-gradient(135deg,var(--gold-bright),var(--gold)); color:var(--navy-deep); border:none; border-radius:11px; padding:10px 16px; font-family:inherit; font-weight:800; font-size:13.5px; cursor:pointer; box-shadow:0 6px 16px rgba(201,168,76,.35); transition:transform .14s ease, box-shadow .14s ease; }
.doel-knop:hover{ transform:translateY(-1px); box-shadow:0 10px 24px rgba(201,168,76,.5); }
@media(max-width:600px){ .doel-knop span{ display:none; } .doel-knop{ padding:10px; } }
.home-bigbtn.secundair{ background:transparent; color:var(--navy); border:1.5px solid var(--line); }
.home-bigbtn.secundair:hover{ background:var(--tint); border-color:var(--gold); }

/* =========================================================
   HORIZONTALE MAANDAGENDA
   ========================================================= */
.agenda{ background:var(--card); border:1px solid var(--line); border-radius:var(--r); padding:22px; box-shadow:var(--shadow); }
.agenda-head{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:16px; }
.agenda-head .a-titel{ display:flex; align-items:center; gap:10px; }
.agenda-head h2{ font-size:18px; font-weight:800; color:var(--navy); margin:0; text-transform:capitalize; }
.agenda-head{ flex-wrap:wrap; }
.agenda-nav{ display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.agenda-nav button{ width:38px; height:38px; border-radius:11px; border:1px solid var(--line); background:var(--card); color:var(--navy); cursor:pointer; display:flex; align-items:center; justify-content:center; transition:background .12s ease, border-color .12s ease; }
.agenda-nav button:hover{ background:var(--tint); border-color:var(--gold); }
/* Tekstknoppen in de nav mogen niet in een 38px-vierkant geperst worden */
.agenda-nav .a-vandaag, .agenda-nav .a-add{ width:auto; }
.agenda-nav .a-vandaag{ height:38px; padding:0 15px; border-radius:11px; border:1px solid var(--line); background:var(--card); color:var(--navy); font-family:inherit; font-size:12.5px; font-weight:700; cursor:pointer; display:inline-flex; align-items:center; gap:8px; transition:background .12s ease, border-color .12s ease; }
.agenda-nav .a-vandaag::before{ content:""; width:7px; height:7px; border-radius:50%; background:var(--gold); box-shadow:0 0 0 3px rgba(201,168,76,.18); flex:none; }
.agenda-nav .a-vandaag:hover{ background:var(--tint); border-color:var(--gold); }
/* Maand/Week-schakelaar */
.agenda-modus{ display:inline-flex; background:var(--tint); border:1px solid var(--line); border-radius:11px; padding:3px; gap:2px; }
.agenda-modus button{ width:auto; height:auto; border:none; background:transparent; font-family:inherit; font-size:12.5px; font-weight:700; color:var(--muted); padding:7px 13px; border-radius:8px; cursor:pointer; transition:background .12s ease, color .12s ease; }
.agenda-modus button:hover{ color:var(--navy); }
.agenda-modus button.aan{ background:var(--card); color:var(--navy); box-shadow:var(--shadow); }

.agenda-weekdays{ display:grid; grid-template-columns:repeat(7,1fr); gap:7px; margin-bottom:7px; }
.agenda-weekdays span{ text-align:center; font-size:11px; font-weight:700; color:var(--muted); text-transform:uppercase; letter-spacing:.03em; }
.agenda-grid{ display:grid; grid-template-columns:repeat(7,1fr); gap:7px; touch-action:pan-y; }
.agenda-cel{ min-height:78px; border:1px solid var(--line); border-radius:11px; padding:7px; background:var(--tint); display:flex; flex-direction:column; gap:3px; overflow:hidden; }
.agenda-cel.leeg{ background:transparent; border:none; }
.agenda-cel .dag{ font-size:12px; font-weight:700; color:var(--body); }
.agenda-cel.vandaag{ border-color:var(--gold); background:var(--tint-gold); }
.agenda-cel.vandaag .dag{ color:var(--gold-deep); }
.agenda-ev{ font-size:10px; font-weight:700; line-height:1.25; padding:3px 6px; border-radius:6px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ev-training{ background:var(--tint-gold); color:var(--gold-deep); }
.ev-bijeenkomst{ background:var(--line); color:var(--navy); }
.ev-persoonlijk{ background:var(--data-blue-bg); color:var(--data-blue-deep); }
/* Afspraken die uit een adviesgesprek komen (stap 7, "samen met de klant").
   Navy: dit zijn de afspraken waar een klant op rekent, die horen op te
   vallen tussen de rest. Bellen en langsgaan delen bewust dezelfde kleur —
   twee bijna gelijke tinten naast elkaar leest slechter dan één; welke van
   de twee het is staat in de titel en in het detailscherm. */
.ev-afspraak, .ev-belafspraak{ background:var(--navy); color:#fff; }
.ev-verjaardag{ background:var(--green-tint); color:var(--green); }
.ev-overig{ background:var(--red-tint); color:var(--red); }
.ev-sale{ background:var(--green); color:#fff; }
.agenda-legenda{ display:flex; gap:16px; margin-top:15px; flex-wrap:wrap; align-items:center; font-size:11.5px; color:var(--body); }
.agenda-legenda span{ display:flex; align-items:center; gap:6px; }
.agenda-legenda i{ width:11px; height:11px; border-radius:3px; display:inline-block; flex:none; }
.agenda-legenda i.sw-pers{ background:var(--data-blue-bg); border:1px solid var(--data-blue-rand); }
.agenda-legenda i.sw-klant{ background:var(--navy); }
.agenda-legenda .ag-hint{ margin-left:auto; color:var(--muted); font-style:italic; }

/* ---------- Weekweergave: tijdrooster met tijd-as ---------- */
.agenda.mode-week .agenda-weekdays{ display:none; }
.agenda.mode-week .agenda-grid{ display:block; overflow-x:auto; touch-action:pan-y; }
.wk{ --wk-gut:60px; min-width:648px; }
.wk-head, .wk-allday{ display:grid; grid-template-columns:var(--wk-gut) repeat(7,1fr); gap:6px; }
.wk-corner{ }
.wk-dh{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1px; padding:8px 4px 9px; border-radius:12px; background:var(--tint); border:1px solid var(--line); }
.wk-dh-dag{ font-size:10.5px; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:var(--muted); }
.wk-dh-num{ font-size:19px; font-weight:800; color:var(--navy); line-height:1; }
.wk-dh.vandaag{ background:var(--navy); border-color:var(--navy); box-shadow:0 6px 16px rgba(13,27,75,.22); }
.wk-dh.vandaag .wk-dh-dag{ color:var(--gold-bright); }
.wk-dh.vandaag .wk-dh-num{ color:#fff; }

.wk-allday{ margin-top:6px; }
.wk-ad-label{ font-size:9.5px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; color:var(--muted); text-align:right; align-self:center; line-height:1.15; padding-right:8px; }
.wk-ad-col{ min-height:34px; border-radius:9px; background:var(--tint); border:1px dashed transparent; padding:5px; display:flex; flex-direction:column; gap:4px; cursor:pointer; transition:background .12s ease, border-color .12s ease; }
.wk-ad-col:hover{ background:var(--tint-gold); border-color:var(--gold-soft); }
.wk-chip{ display:block; width:100%; text-align:left; font-family:inherit; font-size:10.5px; font-weight:700; line-height:1.25; padding:4px 7px; border-radius:6px; border:none; border-left:3px solid currentColor; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; cursor:pointer; }

.wk-body{ display:grid; grid-template-columns:var(--wk-gut) 1fr; gap:6px; margin-top:8px; max-height:min(62vh,620px); overflow-y:auto; overscroll-behavior:contain; padding:14px 0 16px; }
.wk-times{ position:relative; }
.wk-time{ position:absolute; right:10px; transform:translateY(-50%); font-size:10.5px; font-weight:700; color:var(--muted); white-space:nowrap; font-variant-numeric:tabular-nums; text-align:right; }
.wk-grid{ display:grid; grid-template-columns:repeat(7,1fr); gap:6px; }
.wk-col{ position:relative; border-radius:12px; background:var(--tint); border:1px solid var(--line); cursor:pointer; overflow:hidden; }
.wk-col:hover{ background:var(--bg); }
.wk-col.vandaag{ background:var(--tint-gold); border-color:var(--gold-soft); }
.wk-line{ position:absolute; left:0; right:0; height:1px; background:var(--line); pointer-events:none; }
.wk-col.vandaag .wk-line{ background:var(--gold-soft); }
.wk-now{ position:absolute; left:0; right:0; height:2px; background:var(--red); z-index:4; pointer-events:none; }
.wk-now span{ position:absolute; left:-4px; top:-3px; width:8px; height:8px; border-radius:50%; background:var(--red); }
.wk-ev{ position:absolute; box-sizing:border-box; display:flex; flex-direction:column; gap:1px; overflow:hidden; text-align:left; font-family:inherit; padding:5px 8px; border-radius:8px; border:none; border-left:3px solid currentColor; box-shadow:0 2px 6px rgba(13,27,75,.10); cursor:pointer; z-index:3; transition:transform .1s ease, box-shadow .1s ease; }
.wk-ev:hover{ transform:translateY(-1px); box-shadow:0 5px 14px rgba(13,27,75,.18); z-index:5; }
.wk-ev-t{ font-size:10px; font-weight:800; opacity:.85; line-height:1.1; }
.wk-ev-titel{ font-size:11px; font-weight:700; line-height:1.2; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ag-wiz-note{ font-size:12px; font-weight:600; padding:9px 12px; border-radius:10px; margin-bottom:16px; }
.ag-wiz-note.is-pers{ background:var(--data-blue-bg); color:var(--data-blue-deep); border:1px solid var(--data-blue-rand); }
.ag-wiz-note.is-team{ background:var(--tint-gold); color:var(--gold-deep); border:1px solid var(--gold-soft); }
.ag-ev-dot.ev-persoonlijk{ background:var(--data-blue-bg); border:1px solid var(--data-blue-rand); }
.ag-ev-dot.ev-afspraak, .ag-ev-dot.ev-belafspraak{ background:var(--navy); }

/* Weg terug naar het gesprek waar de afspraak is gemaakt. */
.ag-gesprek{ display:flex; align-items:center; gap:10px; margin-top:14px; padding:11px 14px; border-radius:11px; border:1px solid var(--line); background:var(--tint); color:var(--navy); font-size:13.5px; font-weight:700; text-decoration:none; transition:border-color .14s ease, background .14s ease; }
.ag-gesprek:hover{ border-color:var(--navy-soft); background:var(--card); }
.ag-gesprek svg{ flex:none; }
.ag-gesprek .ag-gesprek-pijl{ margin-left:auto; color:var(--muted-licht); }
.ag-ev-note{ margin-top:14px; font-size:13px; color:var(--body); background:var(--tint); border:1px solid var(--line); border-radius:10px; padding:10px 13px; line-height:1.5; white-space:pre-wrap; word-break:break-word; }

@media(max-width:600px){
  .agenda-cel{ min-height:58px; padding:5px; }
  .agenda-cel .dag{ font-size:11px; }
  .agenda-ev{ font-size:8.5px; padding:2px 4px; }
  .agenda-legenda .ag-hint{ margin-left:0; flex-basis:100%; }
}

/* =========================================================
   PRESENTATIE-TEGEL: bewust anders/mooier dan gewone tools
   ========================================================= */
.tile.pres{ background:linear-gradient(140deg,var(--navy) 0%,var(--navy-soft) 100%); border-color:var(--navy); position:relative; overflow:hidden; }
.tile.pres::after{ content:''; position:absolute; right:-34px; top:-34px; width:130px; height:130px; border-radius:50%; background:radial-gradient(circle,rgba(201,168,76,.32),transparent 70%); pointer-events:none; }
.tile.pres h3{ color:#fff; position:relative; }
.tile.pres p{ color:rgba(255,255,255,.72); position:relative; }
.tile.pres .tile-icon{ background:linear-gradient(135deg,var(--gold-bright),var(--gold)); border-color:var(--gold-bright); color:var(--navy-deep); position:relative; box-shadow:0 6px 16px rgba(201,168,76,.4); }
.tile.pres .tile-tag{ color:var(--gold-bright); position:relative; }
.tile.pres:hover{ border-color:var(--gold); box-shadow:0 20px 46px rgba(13,27,75,.38); }

/* Presentatie-rij in de Info-lijst */
.home-list a.pres{ background:linear-gradient(135deg,var(--navy),var(--navy-soft)); border-color:var(--navy); color:#fff; }
.home-list a.pres .hl-ico{ color:var(--gold-bright); }
.home-list a.pres .pijl{ color:rgba(255,255,255,.55); }
.home-list a.pres:hover{ background:linear-gradient(135deg,var(--navy),var(--navy-soft)); border-color:var(--gold); transform:translateX(2px); }

/* =========================================================
   SLOT — vergrendelde categorieën (b2b / sponsor zonder recht)
   Zichtbaar voor iedereen, met slotje; popup bij klikken.
   ========================================================= */
.home-list a.slot{ cursor:pointer; }
.home-list a.slot .pijl{ display:none; }
.slot-lock{ margin-left:auto; flex:none; display:inline-flex; align-items:center; justify-content:center;
  color:var(--muted); transition:color .12s ease; }
.slot-lock svg{ width:15px; height:15px; display:block; }
.home-list a.slot:hover .slot-lock{ color:var(--gold-deep); }
/* Categorie-chip (snelwissel op sales) in slot-stand: tekst + fijn slotje */
.home-list a.chip-slot{ display:inline-flex; align-items:center; gap:7px; color:var(--body); }
.home-list a.chip-slot svg{ width:13px; height:13px; flex:none; display:block; color:var(--muted); transition:color .12s ease; }
.home-list a.chip-slot:hover{ background:var(--tint-gold); border-color:var(--gold-soft); }
.home-list a.chip-slot:hover svg{ color:var(--gold-deep); }

/* Vergrendeld paneel op de categoriepagina zelf */
.slot-paneel{ text-align:center; padding:46px 26px; background:var(--card); border:1px solid var(--line);
  border-radius:var(--r); box-shadow:var(--shadow); max-width:520px; margin:6px auto; }
.slot-paneel .slot-ring{ width:64px; height:64px; margin:0 auto 18px; border-radius:50%;
  background:var(--tint-gold); border:1px solid var(--gold-soft); display:flex; align-items:center; justify-content:center; color:var(--gold-deep); }
.slot-paneel h2{ font-size:18px; font-weight:800; color:var(--navy); margin-bottom:8px; letter-spacing:-.02em; }
.slot-paneel p{ font-size:13.5px; color:var(--body); line-height:1.55; max-width:360px; margin:0 auto; }

/* Popup-icoon (in de "geen toegang"-modal) */
.modal-slotico{ width:60px; height:60px; margin:0 auto 16px; border-radius:50%;
  background:var(--tint-gold); border:1px solid var(--gold-soft); display:flex; align-items:center; justify-content:center; color:var(--gold-deep); }

/* Demo-only schakelaar om het slot te testen (staat niet in het echte portaal) */
.demo-schakel{ display:inline-flex; align-items:center; gap:9px; margin:0 0 18px; padding:8px 13px;
  background:var(--tint-gold); border:1px dashed var(--gold-bright); border-radius:100px; font-size:12.5px; font-weight:700; color:var(--gold-deep); cursor:pointer; }
.demo-schakel .dot{ width:34px; height:19px; border-radius:100px; background:var(--gold-soft); position:relative; transition:background .15s; flex:none; }
.demo-schakel .dot::after{ content:""; position:absolute; top:2px; left:2px; width:15px; height:15px; border-radius:50%; background:#fff; transition:left .15s; }
.demo-schakel.aan .dot{ background:var(--green); }
.demo-schakel.aan .dot::after{ left:17px; }

/* =========================================================
   PRODUCTOVERZICHT — productdetail met documenten, filmpjes,
   presentatie. Accentkleur per product via --pa (Smart E Grid
   = bordeaux). Beheer (toevoegen/verwijderen) alleen zichtbaar
   met het recht 'beheer_producten'.
   ========================================================= */
/* Gekleurde producttegel (niveau 1) */
.prod-tile .prod-ico{ background:var(--pa-tint); border-color:var(--pa-line); color:var(--pa); }
.prod-tile .prod-tag{ color:var(--pa); }
.prod-tile:hover{ border-color:var(--pa-line); }

/* Productdetail-kop */
.prod-kop{ display:flex; align-items:center; gap:16px; padding:20px 22px; margin-bottom:26px; flex-wrap:wrap;
  background:var(--pa-tint); border:1px solid var(--pa-line); border-radius:var(--r); }
/* De tekstkolom mag krimpen zodat de zoekbalk ernaast past; op een smal
   scherm valt hij vanzelf onder de kop. */
.prod-kop > div:not([class]){ flex:1 1 220px; min-width:0; }
.prod-kop-ico{ width:52px; height:52px; border-radius:14px; flex:none; display:flex; align-items:center; justify-content:center;
  background:#fff; border:1px solid var(--pa-line); color:var(--pa); }
.prod-kop h1{ font-size:21px; font-weight:800; color:var(--navy); letter-spacing:-.02em; }
.prod-kop p{ font-size:13px; color:var(--body); margin-top:2px; }

/* Sectie */
.prod-sectie{ margin-bottom:30px; }
.prod-sectie-head{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:14px; flex-wrap:wrap; }
.ps-titel{ display:flex; align-items:center; gap:10px; }
.ps-ico{ width:34px; height:34px; border-radius:10px; flex:none; display:flex; align-items:center; justify-content:center;
  background:var(--pa-tint); border:1px solid var(--pa-line); color:var(--pa); }
.ps-titel h2{ font-size:16px; font-weight:800; color:var(--navy); letter-spacing:-.01em; }
.ps-count{ font-size:12px; font-weight:700; color:var(--muted); background:var(--tint); border:1px solid var(--line);
  border-radius:100px; min-width:24px; text-align:center; padding:2px 8px; }
.ps-addform{ margin:0; }
.ps-add{ display:inline-flex; align-items:center; gap:7px; font-family:inherit; font-size:13px; font-weight:700;
  color:var(--navy); background:var(--tint); border:1px solid var(--line); border-radius:10px; padding:9px 14px; cursor:pointer;
  transition:background .12s ease, border-color .12s ease, color .12s ease; }
.ps-add:hover{ background:var(--pa-tint); border-color:var(--pa-line); color:var(--pa); }

/* Bestand-tegel */
.file-tile{ position:relative; background:var(--card); border:1px solid var(--line); border-radius:var(--r);
  box-shadow:var(--shadow); transition:transform .16s ease, box-shadow .16s ease, border-color .16s ease; }
.file-tile:hover{ transform:translateY(-3px); box-shadow:var(--shadow-lg); border-color:var(--line-sterk); }
.file-open{ display:flex; flex-direction:column; gap:12px; padding:18px; text-decoration:none; }
.file-ico{ width:44px; height:44px; border-radius:12px; flex:none; display:flex; align-items:center; justify-content:center;
  background:linear-gradient(135deg,var(--tint-gold),var(--gold-soft)); border:1px solid var(--gold-soft); color:var(--gold-deep); }
.file-ico.soort-video{ background:var(--tint); border-color:var(--line); color:var(--navy); }
.file-ico.soort-pres{ background:linear-gradient(135deg,var(--navy),var(--navy-soft)); border-color:var(--navy); color:var(--gold-bright); }
.file-naam{ font-size:14.5px; font-weight:700; color:var(--ink); line-height:1.3; word-break:break-word; }
.file-tag{ font-size:11px; font-weight:700; letter-spacing:.03em; text-transform:uppercase; color:var(--gold-deep); }
.file-delform{ margin:0; }
/* Knoppen rechtsboven op een documenttegel: downloaden aan/uit en verwijderen.
   Alleen zichtbaar voor wie de bestanden beheert (recht Filesbeheer). */
.file-acties{ position:absolute; top:10px; right:10px; display:flex; gap:6px; opacity:0; transition:opacity .12s ease; }
.file-acties form{ margin:0; }
.file-tile:hover .file-acties{ opacity:1; }
.file-del, .file-dl{ width:30px; height:30px; border-radius:9px; border:1px solid var(--line);
  background:#fff; color:var(--muted); display:flex; align-items:center; justify-content:center; cursor:pointer;
  transition:background .12s ease, border-color .12s ease, color .12s ease; }
.file-del:hover{ background:var(--red-tint); border-color:var(--red-rand); color:var(--red); }
@media (hover:none){ .file-acties{ opacity:1; } }

/* De downloadschakelaar (documenttegels én tooltegels). Aan = rustig grijs,
   uit = goud, want dan geldt er een uitzondering en dat mag opvallen. */
.file-dl:hover, .t-dl:hover{ background:var(--tint); border-color:var(--line-sterk); color:var(--navy); }
.file-dl.uit, .t-dl.uit{ background:var(--tint-gold); border-color:var(--gold-soft); color:var(--gold-deep); }
.file-dl.uit:hover, .t-dl.uit:hover{ background:var(--gold-soft); color:var(--navy); }

/* "Alleen bekijken" op de tegel zelf, zodat een adviseur het meteen ziet
   en niet pas als hij op downloaden klikt. */
.kijk-pil{ display:inline-flex; align-self:flex-start; align-items:center; gap:6px; font-size:10.5px; font-weight:700; letter-spacing:.02em;
  text-transform:uppercase; color:var(--gold-deep); background:var(--tint-gold); border:1px solid var(--gold-soft);
  border-radius:100px; padding:3px 9px 3px 7px; }
.kijk-pil svg{ width:12px; height:12px; flex:none; }
/* Waarschuwing voor de beheerder: dit type kan een browser niet tonen. */
.kijk-let{ display:flex; gap:8px; align-items:flex-start; font-size:11.5px; line-height:1.45; color:var(--red);
  background:var(--red-tint); border:1px solid var(--red-rand); border-radius:10px; padding:7px 10px; }
.kijk-let svg{ width:14px; height:14px; flex:none; margin-top:1px; }

/* Bewerkbare Tools-tegels (Oplossingen): kaart met bewerken/verwijderen rechtsboven */
.tool-tile{ position:relative; display:flex; flex-direction:column; }
.tool-tile > .tile{ flex:1; width:100%; }
/* De waarschuwing hoort ONDER de tegel, niet eroverheen: anders verdwijnt de
   omschrijving erachter. */
.tool-tile > .kijk-let{ margin-top:8px; }
.file-tile .file-let{ padding:0 18px 16px; }
.tool-acties{ position:absolute; top:10px; right:10px; display:flex; gap:6px; opacity:0; transition:opacity .14s ease; }
.tool-tile:hover .tool-acties{ opacity:1; }
.tool-acties form{ margin:0; }
.tool-acties button{ width:30px; height:30px; border-radius:9px; border:1px solid var(--line); background:#fff;
  display:flex; align-items:center; justify-content:center; cursor:pointer; color:var(--muted);
  box-shadow:var(--shadow); transition:background .12s ease, border-color .12s ease, color .12s ease; }
.tool-acties .t-edit:hover{ background:var(--tint); border-color:var(--line-sterk); color:var(--navy); }
.tool-acties .t-del:hover{ background:var(--red-tint); border-color:var(--red-rand); color:var(--red); }
@media (hover:none){ .tool-acties{ opacity:1; } }
.tool-type{ display:flex; flex-direction:column; gap:8px; }

/* ---- Meldingsbolletje ----------------------------------------------
   Een klein rond getal dat zegt: hier ligt iets voor je. Staat op de tegel
   Personeel (management) en op "Open profieloverzicht" (adviseur). Rood, want
   het vraagt om actie; goud zou hier als versiering lezen en niet als signaal.
   Zonder de klasse 'aan' is hij er niet: geen leeg bolletje bij nul. */
.meld-bol{ display:none; align-items:center; justify-content:center; min-width:20px; height:20px; padding:0 6px;
  border-radius:99px; background:var(--red); color:#fff; font-size:11.5px; font-weight:800; line-height:1;
  font-variant-numeric:tabular-nums; box-shadow:0 2px 6px rgba(192,57,43,.35); }
.meld-bol.aan{ display:inline-flex; }
/* Op een grote tegel hangt hij rechtsboven in de hoek. */
.big-tile{ position:relative; }
.big-tile .meld-bol{ position:absolute; top:18px; right:18px; }
/* Op een knop loopt hij gewoon mee in de regel. */
.home-bigbtn .meld-bol{ margin-left:2px; }

/* Lege sectie / dropzone */
.sectie-leeg{ display:flex; flex-direction:column; align-items:center; gap:10px; text-align:center;
  border:1.5px dashed var(--line); border-radius:var(--r); padding:30px 24px; color:var(--muted); font-size:13px; line-height:1.5; background:var(--tint); }
.sectie-leeg b{ color:var(--ink); font-weight:700; font-size:14px; }
label.sectie-leeg{ cursor:pointer; }
label.sectie-leeg svg{ color:var(--pa); }
label.sectie-leeg:hover{ border-color:var(--pa-line); background:var(--pa-tint); color:var(--pa); }
label.sectie-leeg:hover b{ color:var(--pa); }

/* =========================================================
   AGENDA — toevoegen/verwijderen + persoonlijke agenda
   ========================================================= */
.a-add{ display:inline-flex; align-items:center; gap:6px; height:38px; padding:0 14px; border-radius:11px;
  border:1px solid var(--line); background:var(--card); color:var(--navy); font-family:inherit; font-size:13px; font-weight:700;
  cursor:pointer; transition:background .12s ease, border-color .12s ease; }
.a-add svg{ color:var(--gold-deep); }
.a-add:hover{ background:var(--tint-gold); border-color:var(--gold-soft); }
.agenda-ev[data-id]{ cursor:pointer; }
.agenda-ev[data-id]:hover{ filter:brightness(.97); box-shadow:0 1px 4px rgba(13,27,75,.14); }
/* Detail/export-popup */
.ag-ev-top{ display:flex; align-items:center; gap:14px; }
.ag-ev-dot{ width:42px; height:42px; border-radius:12px; flex:none; }
.ag-ev-dot.ev-training{ background:var(--tint-gold); border:1px solid var(--gold-soft); }
.ag-ev-dot.ev-bijeenkomst{ background:var(--navy); }
.ag-ev-dot.ev-verjaardag{ background:var(--green-tint); border:1px solid var(--green); }
.ag-ev-dot.ev-overig{ background:var(--red-tint); border:1px solid var(--red-rand); }
.ag-dl{ width:100%; margin-top:22px; display:flex; align-items:center; justify-content:center; gap:8px; }
.ag-export-hint{ margin-top:10px; font-size:12px; color:var(--muted); line-height:1.5; text-align:center; }

/* =========================================================
   SALESPROCES-CARROUSEL (adviseur-home)
   Tien stappen tussen de 3 blokken en de kalender. De carrousel
   loopt bewust breder door dan de kaders (vollere breedte), toont
   zes stappen met peek van de buren, heeft flankerende pijlen en
   een 3D coverflow (midden groot/recht, zijkanten gedraaid/klein).
   Naadloze lus via geklonede buffers (proces.js). Rollen in kleur.
   Rol-accenten (één plek):  Planning=navy · Adviseur=goud · CRM=groen
   ========================================================= */
.proces{ margin-top:6px; margin-bottom:6px; }
.proces-inner{ max-width:1500px; margin:0 auto; padding:0 14px; }

/* Kop + legenda, uitgelijnd met de kaarten erboven (zelfde 1180 + 26) */
.proces-head{ max-width:1180px; margin:0 auto 14px; padding:0 26px;
  display:flex; align-items:flex-end; justify-content:space-between; gap:14px; flex-wrap:wrap; }
.proces-tt h2{ font-size:19px; font-weight:800; color:var(--navy); letter-spacing:-.02em; }
.proces-tt p{ font-size:12.5px; color:var(--muted); margin-top:3px; }
.proces-legenda{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; }
.proces-legenda .pl{ display:inline-flex; align-items:center; gap:7px; font-size:11.5px; font-weight:700; color:var(--body); }
.proces-legenda .pl i{ width:11px; height:11px; border-radius:4px; flex:none; }
.proces-legenda .plan i{ background:var(--navy); }
.proces-legenda .adv  i{ background:var(--gold); }
.proces-legenda .crm  i{ background:var(--green); }

/* De rij: pijl · venster · pijl */
.proces-row{ display:flex; align-items:center; gap:10px; }
.proces-arr{ width:44px; height:44px; flex:none; border-radius:13px; border:1px solid var(--line); background:var(--card);
  color:var(--navy); cursor:pointer; display:flex; align-items:center; justify-content:center; box-shadow:var(--shadow);
  transition:background .14s ease, border-color .14s ease, color .14s ease, transform .14s ease; }
.proces-arr svg{ width:20px; height:20px; }
.proces-arr:hover{ background:var(--navy); border-color:var(--navy); color:#fff; transform:translateY(-1px); }

.proces-vp{ flex:1; min-width:0; overflow:hidden; padding:16px 0; }
.proces-track{ display:flex; will-change:transform; }

.proces-stap{ box-sizing:border-box; flex:0 0 auto; position:relative; display:flex; flex-direction:column; gap:8px;
  background:var(--card); border:1px solid var(--line); border-radius:15px; padding:16px 16px 15px;
  box-shadow:var(--shadow); text-decoration:none; min-height:158px; overflow:hidden;
  transform-origin:center center; }
.proces-stap .ps-bar{ position:absolute; left:0; top:0; bottom:0; width:5px; background:var(--navy); }
.ps-top{ display:flex; align-items:center; gap:9px; padding-left:6px; }
.ps-num{ width:30px; height:30px; border-radius:9px; flex:none; display:flex; align-items:center; justify-content:center;
  background:var(--navy); color:#fff; font-size:14px; font-weight:800; }
.ps-fase{ font-size:10px; font-weight:800; letter-spacing:.05em; text-transform:uppercase;
  color:var(--navy); background:var(--tint); border:1px solid var(--line-sterk); border-radius:100px; padding:3px 9px; }
.ps-titel{ font-size:14.5px; font-weight:700; color:var(--navy); letter-spacing:-.01em; line-height:1.25; padding-left:6px; }
.ps-desc{ font-size:12px; color:var(--body); line-height:1.4; flex:1; padding-left:6px; }
.ps-foot{ display:flex; flex-wrap:wrap; align-items:center; justify-content:flex-end; gap:4px 8px; margin-top:2px; padding-left:6px; }
.ps-tool{ margin-right:auto; font-size:10px; font-weight:800; text-transform:uppercase; letter-spacing:.03em;
  color:var(--gold-deep); background:var(--tint-gold); border:1px solid var(--gold-soft); border-radius:100px; padding:3px 9px; }
.ps-open{ display:inline-flex; align-items:center; gap:4px; font-size:11px; font-weight:700; text-transform:uppercase;
  letter-spacing:.03em; color:var(--gold-deep); }
.ps-open svg{ width:13px; height:13px; }

/* Rol-accenten: kleurbalk + nummer + fase-pil, per rol */
.proces-stap.fase-planning .ps-bar{ background:var(--navy); }
.proces-stap.fase-planning .ps-num{ background:linear-gradient(135deg,var(--navy),var(--navy-soft)); color:#fff; }
.proces-stap.fase-planning .ps-fase{ color:var(--navy); background:var(--tint); border-color:var(--line-sterk); }

.proces-stap.fase-adviseur .ps-bar{ background:var(--gold); }
.proces-stap.fase-adviseur .ps-num{ background:linear-gradient(135deg,var(--gold-bright),var(--gold-deep)); color:var(--navy-deep); }
.proces-stap.fase-adviseur .ps-fase{ color:var(--gold-deep); background:var(--tint-gold); border-color:var(--gold-soft); }

.proces-stap.fase-crm .ps-bar{ background:var(--green); }
.proces-stap.fase-crm .ps-num{ background:linear-gradient(135deg,var(--green),var(--green-deep)); color:#fff; }
.proces-stap.fase-crm .ps-fase{ color:var(--green); background:var(--green-tint); border-color:var(--green-rand); }

/* De invulbare stap (6) valt subtiel op */
.proces-stap.tool{ background:linear-gradient(180deg,var(--tint-gold),var(--card) 64%); }

/* Hover: alleen schaduw/rand (de transform stuurt de coverflow) */
.proces-stap{ transition:box-shadow .16s ease, border-color .16s ease; }
.proces-stap:hover{ box-shadow:var(--shadow-lg); border-color:var(--line-sterk); }

/* Elke kaart is nu klikbaar (opent de uitgebreide pop-up) */
.proces-stap{ cursor:pointer; }
.proces-stap:focus-visible{ outline:2px solid var(--gold); outline-offset:2px; }
.proces-stap .ps-open svg{ width:14px; height:14px; }

/* Mail-tag op de kaart: welke mail gaat er in deze stap uit */
.ps-mail{ margin-right:auto; display:inline-flex; align-items:center; gap:5px; font-size:10px; font-weight:800;
  text-transform:uppercase; letter-spacing:.03em; color:var(--gold-deep); background:var(--tint-gold);
  border:1px solid var(--gold-soft); border-radius:100px; padding:3px 9px; white-space:nowrap; }
.ps-mail svg{ width:12px; height:12px; }
.proces-stap.fase-planning .ps-mail{ color:var(--navy); background:var(--tint); border-color:var(--line-sterk); }
.proces-stap.fase-crm .ps-mail{ color:var(--green); background:var(--green-tint); border-color:var(--green-rand); }

/* Fase-legenda als klikbare AAN/UIT-filters */
.proces-legenda .pl{ cursor:pointer; font-family:inherit; border:1px solid var(--line); background:var(--card);
  border-radius:100px; padding:6px 12px; transition:background .14s ease, border-color .14s ease, opacity .14s ease; }
.proces-legenda .pl:hover{ border-color:var(--line-sterk); }
.proces-legenda .pl[aria-pressed="false"]{ color:var(--muted); background:var(--tint); }
.proces-legenda .pl[aria-pressed="false"] i{ background:transparent !important; box-shadow:inset 0 0 0 2px var(--muted-licht); }

/* Lege staat als alle fases uit staan */
.proces-track[hidden]{ display:none; }   /* nodig: .proces-track heeft display:flex */
.proces-leeg{ padding:34px 20px; text-align:center; font-size:13px; font-weight:600; color:var(--muted); }

/* =========================================================
   POP-UP per stap. Hergebruikt .modal-bg / .modal; hieronder
   alleen de proces-eigen inhoud (wat gebeurt er, de mail, wat
   doe jij). Fase-kleur kleurt de accenten.
   ========================================================= */
.pmodal-card{ position:relative; max-width:520px; max-height:88vh; overflow-y:auto; }
.pmodal-x{ position:absolute; top:16px; right:16px; width:34px; height:34px; border-radius:10px; border:1px solid var(--line);
  background:#fff; cursor:pointer; display:flex; align-items:center; justify-content:center; color:var(--muted);
  transition:border-color .14s ease, color .14s ease; }
.pmodal-x:hover{ border-color:var(--navy); color:var(--navy); }
.pmodal-x svg{ width:17px; height:17px; }
.pmodal-head{ display:flex; align-items:center; gap:14px; margin-bottom:16px; padding-right:40px; }
.pmodal-num{ width:44px; height:44px; border-radius:12px; flex:none; display:flex; align-items:center; justify-content:center;
  font-size:19px; font-weight:800; background:var(--navy); color:#fff; }
.pmodal-fase{ display:inline-block; font-size:10px; font-weight:800; letter-spacing:.06em; text-transform:uppercase;
  color:var(--navy); background:var(--tint); border:1px solid var(--line-sterk); border-radius:100px; padding:3px 9px; margin-bottom:6px; }
.pmodal-card h2{ margin:0; font-size:19px; font-weight:800; color:var(--navy); letter-spacing:-.02em; }
.pmodal-lead{ font-size:14px; color:var(--body); line-height:1.6; margin:0 0 18px; }
/* fase-kleuren */
.pmodal-card.fase-planning .pmodal-num{ background:linear-gradient(135deg,var(--navy),var(--navy-soft)); }
.pmodal-card.fase-crm .pmodal-num{ background:linear-gradient(135deg,var(--green),var(--green-deep)); }
.pmodal-card.fase-crm .pmodal-fase{ color:var(--green); background:var(--green-tint); border-color:var(--green-rand); }

/* De mail die de klant krijgt */
.pmodal-mail{ background:var(--tint-gold); border:1px solid var(--gold-soft); border-radius:14px; padding:15px 17px; margin-bottom:18px; }
.pmodal-card.fase-planning .pmodal-mail{ background:var(--tint); border-color:var(--line-sterk); }
.pmodal-card.fase-crm .pmodal-mail{ background:var(--green-tint); border-color:var(--green-rand); }
/* Boven de mail staat een lang label ("Mail 2 · variant A (afspraak staat) ·
   adviseur aan klant"). Dat loopt over twee regels. Stond dit op center, dan
   zakte het envelop-icoon naar het midden van dat blok en lijnde de titel
   eronder nergens meer mee uit. Vandaar uitlijnen op de eerste regel. */
.pmodal-mail-top{ display:flex; align-items:flex-start; gap:11px; margin-bottom:11px; }
.pmodal-mail-top svg{ margin-top:2px; }
.pmodal-mail-top svg{ width:22px; height:22px; flex:none; stroke:var(--gold-deep); fill:none; }
.pmodal-card.fase-planning .pmodal-mail-top svg{ stroke:var(--navy); }
.pmodal-card.fase-crm .pmodal-mail-top svg{ stroke:var(--green); }
.pmodal-mail-lbl{ display:block; font-size:10px; font-weight:800; letter-spacing:.04em; line-height:1.45; text-transform:uppercase; color:var(--muted); margin-bottom:2px; }
.pmodal-mail-top b{ font-size:14px; color:var(--navy); }
.pmodal-mail-row{ display:flex; gap:10px; padding:8px 0; border-top:1px solid rgba(13,27,75,.08); }
.pmodal-mail-row > span{ flex:none; width:74px; font-size:10px; font-weight:800; letter-spacing:.04em; text-transform:uppercase; color:var(--muted); padding-top:2px; }
.pmodal-mail-row p{ margin:0; font-size:13px; color:var(--ink); line-height:1.5; }
.pmodal-mail + .pmodal-mail{ margin-top:14px; }

/* De volledige mailtekst, op wit zodat het als een echte mail leest */
.pm-letter{ background:#fff; border:1px solid var(--line); border-radius:10px; padding:14px 15px; margin-top:12px;
  font-size:13px; color:var(--ink); line-height:1.62; }
.pm-letter p{ margin:0 0 10px; }
.pm-letter p:last-child{ margin-bottom:0; }
.pm-letter .pm-greet{ font-weight:600; color:var(--navy); }
.pm-letter ul{ list-style:none; margin:0 0 10px; padding:0; }
.pm-letter li{ padding:3px 0; padding-left:1.65em; text-indent:-1.65em; }
.pm-letter li b{ color:var(--navy); font-weight:700; }
.pm-sign{ margin-top:12px; padding-top:11px; border-top:1px solid var(--line-soft); }
.pm-sign .nm{ font-weight:700; color:var(--navy); font-size:13px; }
.pm-sign .rl{ color:var(--muted); font-size:12.5px; }
.pm-sign .ct{ color:var(--muted); font-size:11.5px; margin-top:2px; }
/* Invulveld-chips [VELD], zoals in de mail zelf */
.pmodal .f{ display:inline-block; font-weight:700; font-size:.92em; color:var(--gold-deep); background:var(--tint-gold);
  border:1px solid var(--gold-soft); border-radius:6px; padding:0 5px; line-height:1.5; white-space:nowrap; }

/* Geen mail in deze stap */
.pmodal-nomail{ font-size:13px; color:var(--body); background:var(--tint); border-radius:12px; padding:13px 16px; margin-bottom:18px; }
.pmodal-nomail .pmodal-sec-t{ display:block; margin-bottom:3px; color:var(--muted); }

/* Wat doe jij */
.pmodal-sec{ margin-bottom:20px; }
.pmodal-sec-t{ display:block; font-size:10.5px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:var(--gold-deep); margin-bottom:7px; }
.pmodal-card.fase-planning .pmodal-sec .pmodal-sec-t{ color:var(--navy); }
.pmodal-card.fase-crm .pmodal-sec .pmodal-sec-t{ color:var(--green); }
.pmodal-sec p{ margin:0; font-size:14px; color:var(--body); line-height:1.6; }

/* Mail-link in de brieftekst */
.pm-letter a{ color:var(--navy); font-weight:600; }

/* Compacte wel/niet in de pop-up (adviseur-gespreksstappen) */
.pmodal-tips{ display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-bottom:18px; }
.pmodal-tip{ border-radius:12px; padding:12px 14px; }
.pmodal-tip.wel{ background:var(--green-tint); border:1px solid var(--green-rand); }
.pmodal-tip.niet{ background:var(--red-tint); border:1px solid var(--red-rand); }
.pmodal-tip .pt-kop{ display:block; font-size:10.5px; font-weight:800; letter-spacing:.05em; text-transform:uppercase; margin-bottom:8px; }
.pmodal-tip.wel .pt-kop{ color:var(--green); }
.pmodal-tip.niet .pt-kop{ color:var(--red); }
.pmodal-tip ul{ list-style:none; margin:0; padding:0; }
.pmodal-tip li{ position:relative; padding:4px 0 4px 18px; font-size:12.5px; color:var(--ink); line-height:1.45; }
.pmodal-tip li::before{ position:absolute; left:0; top:4px; font-weight:800; }
.pmodal-tip.wel li::before{ content:'✓'; color:var(--green); }
.pmodal-tip.niet li::before{ content:'✕'; color:var(--red); }

/* Knop naar de volledige gespreksleidraad */
.pmodal-guide{ display:flex; align-items:center; gap:12px; text-decoration:none; margin-bottom:20px;
  background:linear-gradient(135deg,var(--tint-gold),var(--gold-soft)); border:1px solid var(--gold-soft); border-radius:13px; padding:13px 15px;
  transition:background .14s ease; }
.pmodal-guide:hover{ background:var(--gold-soft); }
.pmodal-guide > svg:first-child{ width:24px; height:24px; flex:none; stroke:var(--gold-deep); fill:none; }
.pmodal-guide span{ flex:1; display:flex; flex-direction:column; line-height:1.35; font-size:11.5px; color:var(--gold-deep); }
.pmodal-guide b{ font-size:13.5px; color:var(--gold-deep); margin-bottom:1px; }
.pmodal-guide .pg-arr{ width:18px; height:18px; flex:none; stroke:var(--gold-deep); }

/* Footer: status-vlag + Begrepen */
.pmodal-foot{ display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; }
.pmodal-flag{ font-size:11px; font-weight:800; letter-spacing:.03em; text-transform:uppercase; padding:5px 11px; border-radius:100px; }
.pmodal-flag.auto{ color:var(--navy); background:var(--tint); border:1px solid var(--line-sterk); }
.pmodal-flag.jij{ color:var(--gold-deep); background:var(--tint-gold); border:1px solid var(--gold-soft); }
.pmodal-ok{ font-family:inherit; cursor:pointer; border:none; background:var(--navy); color:#fff; font-size:13px; font-weight:700;
  border-radius:11px; padding:11px 20px; transition:background .14s ease; }
.pmodal-ok:hover{ background:var(--navy-deep); }

/* Kopieer / Verstuur onder elke mail in de stap-pop-up */
.pm-acties{ display:flex; gap:9px; margin-top:14px; }
.pm-act{ flex:1; display:inline-flex; align-items:center; justify-content:center; gap:7px; font-family:inherit; cursor:pointer;
  font-size:12.5px; font-weight:700; border-radius:10px; padding:10px 12px;
  transition:background .14s ease, border-color .14s ease, transform .05s ease; }
.pm-act svg{ width:15px; height:15px; flex:none; }
.pm-act:active{ transform:translateY(1px); }
.pm-act.kopieer{ background:#fff; color:var(--navy); border:1px solid var(--line); }
.pm-act.kopieer:hover{ border-color:var(--navy); }
.pm-act.verstuur{ background:var(--navy); color:#fff; border:1px solid var(--navy); }
.pm-act.verstuur:hover{ background:var(--navy-deep); border-color:var(--navy-deep); }
/* WhatsApp herken je aan zijn groen, dus die ene knop mag uit de huisstijl
   stappen. Wel gedempt: witte knop met een groene rand en groene letters, zodat
   hij naast navy en goud niet gaat schreeuwen. */
.pm-act.whatsapp{ background:#fff; color:#1C7A4D; border:1px solid #BFE0CE; }
.pm-act.whatsapp:hover{ background:#F4FAF7; border-color:#1C7A4D; }
/* Drie knoppen naast elkaar past niet meer op een smal scherm; onder elkaar wel. */
@media (max-width:700px){ .pm-acties{ flex-direction:column; } }

/* =========================================================
   INVUL-POP-UP — ontbrekende gegevens vóór kopiëren/versturen.
   Ligt boven de stap-pop-up (z-index 90).
   ========================================================= */
.imodal{ z-index:90; }
.imodal-card{ position:relative; max-width:460px; max-height:88vh; overflow-y:auto; }
.imodal-head{ margin-bottom:18px; padding-right:34px; }
.imodal-eyebrow{ display:inline-block; font-size:10.5px; font-weight:800; letter-spacing:.06em; text-transform:uppercase;
  color:var(--gold-deep); background:var(--tint-gold); border:1px solid var(--gold-soft); border-radius:100px; padding:4px 11px; margin-bottom:11px; }
.imodal-head h2{ margin:0 0 6px; font-size:18px; font-weight:800; color:var(--navy); letter-spacing:-.02em; }
.imodal-head p{ margin:0; font-size:13px; color:var(--body); line-height:1.55; }
.imodal-form{ display:grid; grid-template-columns:1fr 1fr; gap:12px 14px; }
.imodal-veld{ display:flex; flex-direction:column; gap:5px; min-width:0; }
.imodal-veld.breed{ grid-column:1 / -1; }
.imodal-veld > span{ font-size:11px; font-weight:700; color:var(--navy); }
.imodal-veld input{ font-family:inherit; font-size:13.5px; color:var(--ink); background:#fff; border:1px solid var(--line);
  border-radius:9px; padding:9px 11px; transition:border-color .14s ease, box-shadow .14s ease; }
.imodal-veld input:focus{ outline:none; border-color:var(--navy-soft); box-shadow:0 0 0 3px rgba(27,44,107,.12); }
.imodal-veld input::placeholder{ color:var(--muted-licht); }
.imodal-note{ font-size:11.5px; color:var(--muted); line-height:1.5; margin:15px 0 0; }
.imodal-foot{ display:flex; align-items:center; justify-content:flex-end; gap:10px; margin-top:16px; }
.imodal-annu{ font-family:inherit; cursor:pointer; background:none; border:none; color:var(--muted); font-size:13px; font-weight:600; padding:10px 8px; border-radius:9px; }
.imodal-annu:hover{ color:var(--navy); }
.imodal-go{ display:inline-flex; align-items:center; gap:8px; font-family:inherit; cursor:pointer; border:none; color:#fff;
  font-size:13px; font-weight:700; border-radius:11px; padding:11px 18px; background:var(--navy); transition:background .14s ease; }
.imodal-go svg{ width:16px; height:16px; flex:none; }
.imodal-go.copy{ background:var(--gold-deep); }
.imodal-go.copy:hover{ background:#75591A; } /* hover-verdonkering van --gold-deep; geen guide-token beschikbaar */
.imodal-go.send:hover{ background:var(--navy-deep); }
.imodal-go.wa{ background:#1C7A4D; }
.imodal-go.wa:hover{ background:#166340; }
/* Net een mail geopend. De knop staat een paar tellen op slot en zegt het ook,
   zodat je niet nog eens klikt terwijl je mailprogramma nog opstart. Zonder dat
   kwamen er straks drie concepten tegelijk in beeld. */
.imodal-go[disabled]{ cursor:default; background:var(--green); opacity:.9; }
.imodal-go[disabled]:hover{ background:var(--green); }
.imodal-toast{ display:flex; align-items:center; gap:8px; margin-top:15px; font-size:12.5px; font-weight:700; border-radius:10px; padding:10px 13px; }
.imodal-toast[hidden]{ display:none; }
.imodal-toast svg{ width:16px; height:16px; flex:none; }
.imodal-toast.ok{ color:var(--green); background:var(--green-tint); border:1px solid var(--green-rand); }
.imodal-toast.err{ color:var(--red); background:var(--red-tint); border:1px solid var(--red-rand); }
/* "Ditzelfde bericht ook" — de andere kanalen, onder de melding. De pop-up
   sluit niet meer vanzelf, zodat je ingevulde gegevens blijven staan. */
.imodal-ook{ display:flex; flex-direction:column; gap:8px; margin-top:12px; }
.imodal-ook-rij{ display:flex; align-items:center; flex-wrap:wrap; gap:8px; }
.imodal-ook[hidden]{ display:none; }
.imodal-ook-t{ font-size:12px; font-weight:700; color:var(--muted); margin-right:2px; }
.imodal-ook-b{ display:inline-flex; align-items:center; gap:6px; font-family:inherit; cursor:pointer;
  font-size:12px; font-weight:700; color:var(--navy); background:#fff; border:1px solid var(--line);
  border-radius:9px; padding:8px 11px; transition:border-color .14s ease, background .14s ease; }
.imodal-ook-b:hover{ border-color:var(--navy); background:#F7F8FC; }
.imodal-ook-b svg{ width:14px; height:14px; flex:none; }
.imodal-ook-b.nog{ color:var(--red); border-color:var(--red-rand); background:var(--red-tint); }
.imodal-ook-b.nog:hover{ border-color:var(--red); background:var(--red-tint); }
/* Net geopend: ook deze knopjes staan even op slot. Moet na .nog staan, anders
   houdt de rode "Nog eens" zijn kleur en zie je niet dat hij het deed. */
.imodal-ook-b[disabled], .imodal-ook-b.nog[disabled]{ cursor:default; color:var(--green); border-color:var(--green-rand); background:var(--green-tint); }
.imodal-ook-b[disabled]:hover, .imodal-ook-b.nog[disabled]:hover{ border-color:var(--green-rand); background:var(--green-tint); }
@media (max-width:520px){ .imodal-form{ grid-template-columns:1fr; } }

/* =========================================================
   VERIFICATIECODE-VELD (2FA) — één groot, duidelijk veld.
   ========================================================= */
.code-input{
  width:100%; text-align:center; font-family:inherit;
  font-size:30px; font-weight:800; letter-spacing:.42em;
  color:var(--navy); background:#fff;
  border:1px solid var(--line); border-radius:14px;
  padding:16px 10px 16px 22px;                 /* extra links door letter-spacing */
  transition:border-color .15s ease, box-shadow .15s ease;
}
.code-input::placeholder{ color:var(--muted-licht); letter-spacing:.42em; }
.code-input:focus{ outline:none; border-color:var(--navy-soft); box-shadow:0 0 0 3px rgba(13,27,75,.09); }

/* Vinkje-rij onder het codeveld ("dit apparaat 24 uur onthouden") */
.onthoud-rij{
  display:flex; align-items:flex-start; gap:10px;
  margin:2px 0 18px; cursor:pointer;
}
.onthoud-rij input{
  width:18px; height:18px; margin-top:1px; flex:none;
  accent-color:var(--navy); cursor:pointer;
}
.onthoud-rij span{ font-size:12.5px; font-weight:500; color:var(--body); line-height:1.4; }

/* Klein tekstlinkje onder een formulier (bv. "Wachtwoord vergeten?") */
.auth-link{
  display:inline-block; margin-top:16px;
  color:var(--muted); font-size:12.5px; font-weight:600;
  background:none; border:none; font-family:inherit; cursor:pointer;
  transition:color .15s ease;
}
.auth-link:hover{ color:var(--navy); }
.auth-link.mid{ display:block; text-align:center; }

/* =========================================================
   MOBIEL — verfijning voor telefoon (adviseur + management).
   Bewust als laatste blok, zodat deze regels netjes winnen.
   Doel: alles leesbaar en met de duim bedienbaar, en geen
   ongewenste inzoom bij het tikken op een invoerveld.
   ========================================================= */
html{ -webkit-text-size-adjust:100%; }   /* geen automatische tekstvergroting bij draaien */

@media (max-width:600px){

  /* iOS zoomt in zodra je een veld met tekst < 16px aantikt.
     Op telefoon dus alle invoervelden op 16px. */
  .field input,
  .field-l input,
  .field-l select,
  .evchat-input input.txt{ font-size:16px; }

  /* --- Bovenbalk (adviseur-tools/beheer): compact, geen overloop --- */
  .topbar{ padding:0 14px; height:58px; }
  .topbar img{ height:34px; }
  .topbar-right{ gap:8px; }
  .user-chip{ font-size:0; gap:0; }                 /* naam verbergen, avatar blijft */
  .user-chip .user-avatar{ font-size:13px; }        /* avatar-letters op maat houden */
  .btn-out{ padding:10px 13px; }

  /* --- Bovenbalk (home/hub): compact profiel --- */
  .hub-topbar{ padding:13px 15px; }
  .hub-logo{ height:38px; }
  .topbar-rechts{ gap:10px; }
  .profiel-knop{ gap:7px; padding:3px; }
  .profiel-info{ display:none; }                    /* naam/rol verbergen, avatar blijft */
  .profiel-menu{ top:52px; }

  /* --- Meer bruikbare breedte, minder zijmarge --- */
  .portal-wrap{ padding:24px 16px 96px; }
  .hub-wrap{ padding:26px 16px 96px; }
  .portal-head{ margin-bottom:22px; }
  .portal-head h1{ font-size:22px; }
  .hub-hi h1{ font-size:23px; }
  .hub-hi p{ margin-bottom:26px; }

  /* --- Grotere raakvlakken, rustiger tegels --- */
  .icon-btn{ width:38px; height:38px; }
  .big-tile{ min-height:auto; padding:24px 20px; }
  .home-card{ padding:20px; }

  /* --- Modals vullen de telefoon netjes --- */
  .modal-bg{ padding:12px; }
  .modal{ padding:22px; border-radius:18px; }
  .modal.groot{ max-height:92vh; }

  /* --- Accountbeheer: status + knoppen netjes onder de naam --- */
  .acc-row.rijk{ flex-wrap:wrap; }
  .acc-actie{ width:100%; flex-direction:row !important; align-items:center !important;
    justify-content:space-between; margin-top:6px; }

  /* --- Teamagenda iets compacter --- */
  .agenda{ padding:16px; }
  .agenda-head h2{ font-size:16px; }
  .agenda-nav button{ width:34px; height:34px; }

  /* --- Codeveld iets kleiner op smalle schermen --- */
  .code-input{ font-size:26px; letter-spacing:.34em; }

  /* --- Salesproces-carrousel op telefoon --- */
  .proces-inner{ padding:0 8px; }
  .proces-head{ padding:0 16px; margin-bottom:12px; }
  .proces-tt h2{ font-size:17px; }
  .proces-row{ gap:6px; }
  .proces-arr{ width:38px; height:38px; border-radius:11px; }
  .proces-arr svg{ width:18px; height:18px; }
  .proces-legenda{ gap:12px; }
}

/* =========================================================
   OPLOSSINGEN — PRODUCTEN MET BEELD (september 2026)
   ---------------------------------------------------------
   Waarom dit er is: het productoverzicht was een lijst met
   dezelfde grijze icoontjes. Een adviseur moest klikken om te
   zien wát hij openmaakte, en aan een klant viel er niets te
   laten zien. Nu zie je het blad of de foto vóór je klikt.

   Drie niveaus, één kaartvorm:
     categorie  ->  .cat-card    beeld boven, naam en aantallen onder
     product    ->  .pcard       productfoto, merk, naam, aantallen
     bestand    ->  .doc-card    eerste pagina van de PDF als voorbeeld

   De voorbeelden worden pas geladen als je er bijna bent
   (assets/prodmedia.js). Dat scheelt op een keukentafel met
   4G een hoop wachten.
   ========================================================= */

/* ---- Kruimelpad ---------------------------------------- */
.kruimel{ display:flex; align-items:center; flex-wrap:wrap; gap:8px; margin-bottom:18px;
  font-size:13px; color:var(--muted); }
.kruimel a{ color:var(--muted); font-weight:600; padding:5px 11px; border-radius:9px;
  background:var(--card); border:1px solid var(--line); transition:background .12s ease, color .12s ease, border-color .12s ease; }
.kruimel a:hover{ background:var(--tint); color:var(--navy); border-color:var(--line-sterk); }
.kruimel b{ color:var(--navy); font-weight:700; }
.kruimel .sep{ color:var(--muted-licht); }

/* ---- Zoeken binnen een categorie ------------------------ */
.zoekbalk{ position:relative; flex:1 1 240px; max-width:340px; }
.zoekbalk input{ width:100%; font-family:inherit; font-size:13.5px; color:var(--ink);
  background:#fff; border:1px solid var(--line); border-radius:11px; padding:10px 34px 10px 36px;
  transition:border-color .12s ease, box-shadow .12s ease; }
.zoekbalk input:focus{ outline:none; border-color:var(--gold-soft); box-shadow:0 0 0 3px rgba(201,168,76,.14); }
.zoekbalk input::placeholder{ color:var(--muted-licht); }
.zoekbalk .zoek-ico{ position:absolute; left:12px; top:50%; transform:translateY(-50%);
  width:15px; height:15px; color:var(--muted-licht); pointer-events:none; }
.zoekbalk .zoek-wis{ position:absolute; right:8px; top:50%; transform:translateY(-50%);
  width:22px; height:22px; border:0; border-radius:50%; background:var(--tint); color:var(--muted);
  cursor:pointer; display:none; align-items:center; justify-content:center; font-size:14px; line-height:1; }
.zoekbalk.heeft .zoek-wis{ display:flex; }
.zoek-leeg{ display:none; text-align:center; color:var(--muted); font-size:13.5px; padding:26px 20px;
  border:1.5px dashed var(--line); border-radius:var(--r); background:var(--tint); }
.zoek-leeg.aan{ display:block; }

/* ---- Categoriekaart (niveau 1) -------------------------- */
.cat-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(258px,1fr)); gap:20px; }
.cat-card{ display:flex; flex-direction:column; background:var(--card); border:1px solid var(--line);
  border-radius:var(--r); overflow:hidden; box-shadow:var(--shadow); cursor:pointer;
  transition:transform .16s ease, box-shadow .16s ease, border-color .16s ease; }
.cat-card:hover{ transform:translateY(-3px); box-shadow:var(--shadow-lg); border-color:var(--pa-line); }
.cat-beeld{ position:relative; display:block; aspect-ratio:3/2; background:var(--navy-deep); overflow:hidden; }
.cat-beeld img{ width:100%; height:100%; object-fit:cover; display:block;
  opacity:0; transition:opacity .3s ease, transform .3s ease; }
.cat-beeld img.geladen{ opacity:1; }
.cat-card:hover .cat-beeld img{ transform:scale(1.03); }
/* Geen foto? Dan een rustig merkvlak met het icoon, geen leeg gat. */
.cat-beeld.leeg{ background:linear-gradient(140deg,var(--navy) 0%,var(--navy-soft) 100%);
  display:flex; align-items:center; justify-content:center; color:var(--gold-bright); }
.cat-beeld.leeg svg{ width:46px; height:46px; opacity:.9; }
.cat-ico{ position:absolute; left:14px; bottom:14px; width:38px; height:38px; border-radius:11px;
  background:rgba(255,255,255,.94); border:1px solid rgba(255,255,255,.7); color:var(--pa);
  display:flex; align-items:center; justify-content:center; box-shadow:0 6px 18px rgba(6,15,46,.28); }
.cat-beeld.leeg .cat-ico{ display:none; }
.cat-body{ display:flex; flex-direction:column; gap:6px; padding:16px 18px 18px; }
.cat-body h3{ font-size:16.5px; font-weight:800; color:var(--navy); letter-spacing:-.015em; }
.cat-body p{ font-size:12.5px; color:var(--muted); }
.cat-pijl{ margin-top:8px; font-size:11px; font-weight:700; letter-spacing:.03em; text-transform:uppercase;
  color:var(--pa); display:inline-flex; align-items:center; gap:5px; }

/* ---- Merkgroep en productkaart (niveau 2) --------------- */
.merk-groep{ margin-bottom:22px; }
.merk-kop{ display:flex; align-items:baseline; gap:10px; margin-bottom:11px; padding-bottom:8px;
  border-bottom:1px solid var(--line); }
.merk-naam{ font-size:13.5px; font-weight:800; color:var(--navy); letter-spacing:.01em; }
.merk-tel{ font-size:12px; color:var(--muted-licht); }

.pcard-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(212px,1fr)); gap:16px; }

/* De soortbalk boven de producten van een categorie. Kleiner dan de
   sectiekiezer erboven, zodat je ziet dat hij daaronder valt. */
.soortbalk{ display:flex; flex-wrap:wrap; gap:6px; margin:0 0 20px; }
.soortbalk button{ display:inline-flex; align-items:center; gap:6px; font-family:inherit; font-size:12.5px;
  font-weight:600; color:var(--ink); background:var(--card); border:1px solid var(--line);
  border-radius:999px; padding:6px 12px; cursor:pointer; transition:background .12s ease, border-color .12s ease; }
.soortbalk button .n{ font-size:11px; font-weight:700; color:var(--muted-licht); }
.soortbalk button:hover{ background:var(--tint); border-color:var(--line-sterk); }
.soortbalk button.aan{ background:var(--pa); border-color:var(--pa); color:#fff; }
.soortbalk button.aan .n{ color:rgba(255,255,255,.75); }
.pcard-meta i.soort{ color:var(--pa); }
.ai-pil{ display:inline-block; margin-left:6px; padding:1px 7px; border-radius:999px; font-size:10.5px;
  font-weight:700; color:var(--muted); background:var(--tint); vertical-align:middle; }
.pcard{ position:relative; display:flex; flex-direction:column; background:var(--card);
  border:1px solid var(--line); border-radius:var(--r-sm); overflow:hidden; box-shadow:var(--shadow);
  cursor:pointer; transition:transform .16s ease, box-shadow .16s ease, border-color .16s ease; }
.pcard:hover{ transform:translateY(-3px); box-shadow:var(--shadow-lg); border-color:var(--line-sterk); }
.pcard-beeld{ position:relative; display:block; aspect-ratio:3/2; background:var(--navy-deep); overflow:hidden; }
.pcard-beeld img{ width:100%; height:100%; object-fit:cover; display:block;
  opacity:0; transition:opacity .3s ease; }
.pcard-beeld img.geladen{ opacity:1; }
/* Product zonder foto: geen grijs gat maar een eerlijk vlakje. */
.pcard-beeld.leeg{ background:var(--tint); display:flex; align-items:center; justify-content:center;
  color:var(--muted-licht); font-size:11.5px; font-weight:700; letter-spacing:.02em; text-transform:uppercase; }
.pcard-body{ display:flex; flex-direction:column; gap:4px; padding:13px 14px 15px; }
.pcard-merk{ font-size:10.5px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:var(--pa); }
.pcard-body h3{ font-size:14px; font-weight:700; color:var(--ink); line-height:1.32; letter-spacing:-.01em; }
.pcard-meta{ margin-top:5px; display:flex; flex-wrap:wrap; gap:5px; }
.pcard-meta i{ font-style:normal; font-size:11px; font-weight:700; color:var(--muted);
  background:var(--tint); border-radius:100px; padding:2px 8px; }

/* ---- Productpagina (niveau 3) --------------------------- */
.pdetail{ display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,1fr); gap:24px; align-items:stretch;
  margin-bottom:30px; }
.pdetail-beeld{ position:relative; display:block; border-radius:var(--r); overflow:hidden;
  background:var(--navy-deep); border:1px solid var(--line); aspect-ratio:3/2; cursor:zoom-in; }
.pdetail-beeld img{ width:100%; height:100%; object-fit:cover; display:block; opacity:0; transition:opacity .3s ease; }
.pdetail-beeld img.geladen{ opacity:1; }
.pdetail-beeld.leeg{ display:flex; align-items:center; justify-content:center; cursor:default;
  background:linear-gradient(140deg,var(--navy) 0%,var(--navy-soft) 100%); color:var(--gold-bright); }
.pdetail-beeld.leeg svg{ width:52px; height:52px; opacity:.85; }
.pdetail-loep{ position:absolute; right:12px; bottom:12px; display:inline-flex; align-items:center; gap:7px;
  font-size:11.5px; font-weight:700; color:var(--navy); background:rgba(255,255,255,.94);
  border-radius:100px; padding:6px 13px; box-shadow:0 6px 18px rgba(6,15,46,.28); }
.pdetail-loep svg{ width:14px; height:14px; }
.pdetail-info{ display:flex; flex-direction:column; gap:12px; justify-content:center;
  background:var(--pa-tint); border:1px solid var(--pa-line); border-radius:var(--r); padding:24px; }
.pdetail-info .merk{ font-size:11px; font-weight:800; letter-spacing:.07em; text-transform:uppercase; color:var(--pa); }
.pdetail-info h1{ font-size:23px; font-weight:800; color:var(--navy); letter-spacing:-.02em; line-height:1.2; }
.pdetail-info .telling{ display:flex; flex-wrap:wrap; gap:7px; }
.pdetail-info .telling span{ font-size:12px; font-weight:700; color:var(--navy); background:#fff;
  border:1px solid var(--pa-line); border-radius:100px; padding:4px 11px; }
.pdetail-acties{ display:flex; flex-wrap:wrap; gap:9px; margin-top:4px; }
.btn-toon{ display:inline-flex; align-items:center; gap:8px; font-family:inherit; font-size:13px; font-weight:800;
  color:var(--navy); background:var(--gold); border:0; border-radius:11px; padding:11px 17px; cursor:pointer;
  transition:background .12s ease; }
.btn-toon:hover{ background:var(--gold-bright); }
.btn-toon svg{ width:15px; height:15px; }
.btn-stil{ display:inline-flex; align-items:center; gap:8px; font-family:inherit; font-size:13px; font-weight:700;
  color:var(--navy); background:#fff; border:1px solid var(--pa-line); border-radius:11px; padding:11px 16px;
  cursor:pointer; text-decoration:none; transition:background .12s ease; }
.btn-stil:hover{ background:var(--tint); }
.btn-stil svg{ width:15px; height:15px; }
@media (max-width:820px){ .pdetail{ grid-template-columns:1fr; } }

/* ---- Fotostrook ----------------------------------------- */
.foto-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(184px,1fr)); gap:14px; }
/* De kaart zelf is wit; alleen het beeldvlak is navy. Anders steekt er een
   donkere rand onder het bijschrift uit zodra één naam over twee regels loopt
   en de rij dus hoger wordt. */
.foto-kaart{ position:relative; display:flex; flex-direction:column; border-radius:var(--r-sm); overflow:hidden;
  border:1px solid var(--line); background:var(--card); box-shadow:var(--shadow);
  transition:transform .16s ease, box-shadow .16s ease; }
.foto-kaart:hover{ transform:translateY(-3px); box-shadow:var(--shadow-lg); }
.foto-open{ display:block; aspect-ratio:3/2; cursor:zoom-in; background:var(--navy-deep); }
.foto-open img{ width:100%; height:100%; object-fit:cover; display:block; opacity:0; transition:opacity .3s ease; }
.foto-open img.geladen{ opacity:1; }
.foto-naam{ display:block; flex:1; padding:9px 12px 11px; background:#fff; font-size:12.5px; font-weight:600;
  color:var(--ink); border-top:1px solid var(--line); }
.foto-kaart .file-acties{ top:8px; right:8px; }

/* ---- Documentkaart met voorbeeld ------------------------ */
.doc-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(214px,1fr)); gap:16px; }
.doc-card{ position:relative; display:flex; flex-direction:column; background:var(--card);
  border:1px solid var(--line); border-radius:var(--r-sm); overflow:hidden; box-shadow:var(--shadow);
  transition:transform .16s ease, box-shadow .16s ease, border-color .16s ease; }
.doc-card:hover{ transform:translateY(-3px); box-shadow:var(--shadow-lg); border-color:var(--line-sterk); }
.doc-open{ display:flex; flex-direction:column; height:100%; text-decoration:none; }
/* Het voorbeeldvlak: een vel papier, dus wit met een dun randje eronder. */
.doc-beeld{ position:relative; aspect-ratio:4/3; background:var(--tint); overflow:hidden;
  display:flex; align-items:center; justify-content:center; }
.doc-beeld canvas, .doc-beeld img{ width:100%; height:100%; object-fit:cover; object-position:top center;
  display:block; background:#fff; opacity:0; transition:opacity .3s ease; }
.doc-beeld canvas.geladen, .doc-beeld img.geladen{ opacity:1; }
/* Zolang het voorbeeld nog niet klaar is (of niet kan): het soort-icoon.
   Zodra het voorbeeld er staat verdwijnt het icoon eronder vandaan. Kan er
   geen voorbeeld gemaakt worden (een filmpje, een Word-bestand), dan blijft
   het icoon gewoon staan; dat is beter dan een leeg vlak. */
.doc-wacht{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  color:var(--muted-licht); transition:opacity .25s ease; }
.doc-wacht svg{ width:30px; height:30px; }
.doc-beeld.klaar .doc-wacht,
.doc-beeld canvas.geladen ~ .doc-wacht,
.doc-beeld img.geladen ~ .doc-wacht{ opacity:0; }
.doc-beeld.soort-video{ background:linear-gradient(140deg,var(--navy) 0%,var(--navy-soft) 100%); }
.doc-beeld.soort-video .doc-wacht{ color:var(--gold-bright); opacity:1; }
.doc-body{ display:flex; flex-direction:column; gap:7px; padding:13px 14px 15px; flex:1; }
.doc-naam{ font-size:13.5px; font-weight:700; color:var(--ink); line-height:1.34; word-break:break-word; }
.doc-tag{ margin-top:auto; font-size:10.5px; font-weight:700; letter-spacing:.03em; text-transform:uppercase;
  color:var(--gold-deep); display:inline-flex; align-items:center; gap:5px; }
.doc-card .file-acties{ top:8px; right:8px; }
.doc-card .kijk-let{ margin:0 14px 14px; }

/* ---- Fotovenster (lightbox) ----------------------------- */
/* Hier laat de adviseur de foto aan de klant zien. Dus: geen portaal
   eromheen, alleen het beeld. Toetsen: pijltjes en Esc. */
.lb{ position:fixed; inset:0; z-index:120; display:none; background:rgba(6,15,46,.94);
  align-items:center; justify-content:center; padding:56px 20px 78px; }
.lb.open{ display:flex; }
.lb-beeld{ max-width:100%; max-height:100%; object-fit:contain; border-radius:10px;
  box-shadow:0 24px 70px rgba(0,0,0,.5); opacity:0; transition:opacity .2s ease; }
.lb-beeld.geladen{ opacity:1; }
.lb-bij{ position:absolute; left:0; right:0; bottom:22px; text-align:center; color:rgba(255,255,255,.8);
  font-size:13px; font-weight:600; padding:0 20px; }
.lb-bij b{ display:block; color:#fff; font-size:14.5px; font-weight:700; margin-bottom:3px; }
.lb-knop{ position:absolute; width:44px; height:44px; border-radius:50%; border:1px solid rgba(255,255,255,.22);
  background:rgba(255,255,255,.1); color:#fff; display:flex; align-items:center; justify-content:center;
  cursor:pointer; transition:background .12s ease; }
.lb-knop:hover{ background:rgba(255,255,255,.22); }
.lb-knop svg{ width:20px; height:20px; }
.lb-vorige{ left:18px; top:50%; transform:translateY(-50%); }
.lb-volgende{ right:18px; top:50%; transform:translateY(-50%); }
.lb-dicht{ right:18px; top:18px; }
.lb-vol{ right:74px; top:18px; }
.lb-teller{ position:absolute; left:20px; top:26px; color:rgba(255,255,255,.65); font-size:12.5px; font-weight:700;
  font-variant-numeric:tabular-nums; }
@media (max-width:620px){
  .lb{ padding:52px 10px 84px; }
  .lb-vorige{ left:8px; } .lb-volgende{ right:8px; }
  .lb-vol{ display:none; }
}

/* ---- Product toevoegen (beheer) ------------------------- */
.pnieuw-rij{ display:flex; flex-wrap:wrap; gap:10px; align-items:flex-end; }
.pnieuw-rij .field-l{ flex:1 1 180px; margin:0; }

/* De waarschuwing "browser kan dit niet tonen" onder een documentkaart of
   een foto: binnen de kaart, met dezelfde marge als de tekst ernaast. */
.doc-card .kijk-let-vak, .foto-kaart .kijk-let-vak{ padding:0 14px 13px; }
.foto-kaart .kijk-let-vak{ background:#fff; }
.foto-naam .kijk-pil{ margin-left:6px; vertical-align:middle; }

/* De sectiekop mag op een smal scherm netjes afbreken. */
@media (max-width:520px){
  .prod-sectie-head{ align-items:flex-start; }
  .cat-grid{ grid-template-columns:1fr; }
  .pcard-grid, .doc-grid, .foto-grid{ grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:12px; }
}

/* Beheerknoppen op de nieuwe kaarten: zelfde gedrag als op een bestandstegel. */
.doc-card:hover .file-acties, .foto-kaart:hover .file-acties{ opacity:1; }
@media (hover:none){ .doc-card .file-acties, .foto-kaart .file-acties{ opacity:1; } }

/* =========================================================
   DE KEUZEBALK BOVEN EEN OPLOSSINGEN-PAGINA
   ---------------------------------------------------------
   Producten · Tools · Bladen · Filmpjes. De pagina opent op
   het eerste vak dat gevuld is, zodat je niet eerst langs
   drie lege koppen scrolt.
   ========================================================= */
.sectiekiezer{ display:flex; flex-wrap:wrap; gap:8px; margin:0 0 22px; }
.sectiekiezer button{
  display:inline-flex; align-items:center; gap:8px;
  font-family:inherit; font-size:13.5px; font-weight:700; color:var(--muted);
  background:var(--card); border:1px solid var(--line); border-radius:12px;
  padding:9px 15px; cursor:pointer;
  transition:background .12s ease, border-color .12s ease, color .12s ease, box-shadow .12s ease;
}
.sectiekiezer button svg{ width:16px; height:16px; flex:none; opacity:.75; }
.sectiekiezer button .n{
  font-size:11px; font-weight:800; color:var(--muted-licht); background:var(--tint);
  border-radius:100px; min-width:20px; text-align:center; padding:1px 6px;
}
.sectiekiezer button:hover{ background:var(--tint); border-color:var(--line-sterk); color:var(--navy); }
.sectiekiezer button.aan{
  background:var(--navy); border-color:var(--navy); color:#fff; box-shadow:0 6px 18px rgba(13,27,75,.18);
}
.sectiekiezer button.aan svg{ opacity:1; color:var(--gold-bright); }
.sectiekiezer button.aan .n{ background:rgba(255,255,255,.16); color:#fff; }
/* "Alles" staat er los van: het is geen vak maar een uitzondering. */
.sectiekiezer .alles{ margin-left:auto; color:var(--muted-licht); }
@media (max-width:620px){
  .sectiekiezer{ gap:6px; }
  .sectiekiezer button{ padding:8px 12px; font-size:12.5px; }
  .sectiekiezer .alles{ margin-left:0; }
}

/* Verbergen moet ook winnen van .pcard{display:flex} en vrienden. */
[hidden]{ display:none !important; }

/* De eerste slide op een presentatietegel. Loopt door tot de rand van de
   kaart, zodat het een omslag is en geen plaatje in een kader. */
.tile-slide{
  display:block; margin:-22px -22px 2px; border-radius:var(--r) var(--r) 0 0; overflow:hidden;
  aspect-ratio:16/9; background:var(--navy-deep);
}
.tile-slide img{ width:100%; height:100%; object-fit:cover; display:block; opacity:0; transition:opacity .3s ease; }
.tile-slide img.geladen{ opacity:1; }
.tile.pres .tile-icon{ display:none; }   /* de slide zegt al genoeg */


/* =========================================================
   KOPPEN IN DE KOPLETTER
   ---------------------------------------------------------
   Eén regel achteraan, zodat de koppen de letter van het merk krijgen zonder
   dat elke component apart aangepast hoeft te worden. Bij Energievolledig is
   --letter-kop gelijk aan --letter, dus daar verandert er niets.
   ========================================================= */
h1, h2, h3{ font-family:var(--letter-kop); }

/* =========================================================
   LOGO VAN EEN PARTNEROMGEVING
   ---------------------------------------------------------
   Het logo van Energievolledig is bijna vierkant (480x530) en staat daarom op
   58px hoog in de balk. Een partnerlogo is een liggend woordmerk (Holland
   Energie is 7:1, Energiefocus 6:1); op 58px hoog wordt dat ruim 400px breed
   en vult het de halve balk. Vandaar een eigen hoogte.
   ========================================================= */
.hub-logo.merk{ height:30px; }
@media (max-width:760px){ .hub-logo.merk{ height:22px; } }

/* Een regel tekst onder de kop van een partneromgeving: "Je verkoopt de
   producten van Energievolledig". Bewust rustig, het is een geruststelling
   en geen reclame. */
.merk-voet{ display:flex; align-items:center; gap:9px; margin-top:8px;
  font-size:12.5px; color:var(--muted); }
.merk-voet img{ height:17px; width:auto; opacity:.85; }

/* Zelfde verhaal als .hub-logo.merk, maar dan voor de smalle balk boven een
   Oplossingen-pagina (.topbar img staat daar op 44px). */
.topbar img.merklogo{ height:26px; }
@media (max-width:760px){ .topbar img.merklogo{ height:20px; } }