/* ==========================================================================
   EVA-AUTOMATISERINGSMOTOR  -  styles.css  (het complete ontwerpsysteem)
   --------------------------------------------------------------------------
   UITLEG VOOR NIET-PROGRAMMEURS:
   Dit bestand bepaalt hoe ALLES eruitziet: de kleuren, de lettertypes,
   de knoppen, de kaarten, de tabellen enzovoort. De losse onderdelen
   (de "modules") gebruiken alleen de klassen die hieronder staan, zodat
   het hele programma er overal hetzelfde en netjes uitziet.

   We werken met "tokens" (vaste waarden bovenaan). Eén keer een kleur
   wijzigen bovenin, en die wijziging telt meteen voor het hele programma.
   ========================================================================== */


/* --------------------------------------------------------------------------
   1) TOKENS  -  de vaste kleuren, lettertypes en maten van het merk.
   Deze komen exact uit het bestaande EVA-voorstel, zodat de stijl klopt.
   -------------------------------------------------------------------------- */
:root{
  /* Kleuren - merkkleuren van EVA / BesluitPartners */
  --navy:#0F1B33;        /* diep marineblauw (het hoofdkleur) */
  --navy-soft:#1E2A4A;   /* iets lichter navy, voor accenten */
  --gold:#C8932A;        /* goud (het accentkleur) */
  --gold-soft:#E8C879;   /* zacht goud (lichte tekst op navy) */
  --gold-deep:#A2761C;   /* donker goud (tekst op licht) */
  --ivory:#FAF7F0;       /* warme ivoor achtergrond */
  --paper:#FFFFFF;       /* wit, voor kaarten */
  --ink:#1E2A3D;         /* normale tekstkleur (bijna zwart) */
  --muted:#6B7280;       /* gedempt grijs, voor bijschriften */
  --muted-2:#9AA1AC;     /* nog lichter grijs */
  --line:#E5E7EB;        /* lijnkleur, voor randen en scheidingen */
  --line-soft:#F0F1F3;   /* heel lichte lijn */

  /* Statuskleuren - voor goed/fout/let-op meldingen */
  --red:#B91C1C;     --red-soft:#FEE2E2;
  --green:#166534;   --green-soft:#DCFCE7;
  --blue:#1D4ED8;    --blue-soft:#DBEAFE;

  /* Lettertypes - met systeem-fallback voor als Google Fonts niet laadt */
  --serif:'Playfair Display', Georgia, 'Times New Roman', serif;
  --sans:'Inter', -apple-system, 'Segoe UI', system-ui, sans-serif;

  /* Maten die we vaker gebruiken */
  --radius:14px;                       /* standaard afronding hoeken */
  --radius-sm:10px;                    /* kleinere afronding */
  --shadow:0 1px 2px rgba(15,27,51,.04), 0 10px 30px -18px rgba(15,27,51,.18); /* zachte schaduw */
  --shadow-lg:0 20px 50px -24px rgba(15,27,51,.30);
  --nav-w:264px;                       /* breedte van de linker menukolom */
}


/* --------------------------------------------------------------------------
   2) ALGEMENE BASIS  -  reset en standaard tekstinstellingen.
   -------------------------------------------------------------------------- */
*{ box-sizing:border-box; margin:0; padding:0; }
html{ -webkit-text-size-adjust:100%; }
body{
  font-family:var(--sans);
  font-size:15.5px;
  line-height:1.6;
  color:var(--ink);
  background:var(--ivory);
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{ font-family:var(--serif); color:var(--navy); line-height:1.12; letter-spacing:-.01em; }
a{ color:var(--gold-deep); }
::selection{ background:var(--gold-soft); color:var(--navy); }


/* --------------------------------------------------------------------------
   3) DE SCHIL  -  het hele scherm bestaat uit twee delen:
      links een navy menukolom, rechts het ivoren werkgebied.
   -------------------------------------------------------------------------- */
.eva-shell{
  display:flex;                 /* twee kolommen naast elkaar */
  min-height:100vh;             /* altijd minstens het hele scherm hoog */
}

/* --- LINKS: de merknaam bovenaan de menukolom --- */
.eva-brand{
  display:flex; align-items:center; gap:11px;
  padding:22px 22px 18px;
  color:#fff;
  font-family:var(--serif); font-weight:700; font-size:18px;
  letter-spacing:.01em;
  border-bottom:1px solid rgba(255,255,255,.10);
}
.eva-brand .eva-brand-mark{
  flex:none; width:34px; height:34px; border-radius:8px;
  background:linear-gradient(160deg, var(--gold), var(--gold-deep));
  display:grid; place-items:center;
  color:var(--navy);
  box-shadow:0 4px 12px rgba(0,0,0,.25);
}
.eva-logo{ width:62%; height:62%; display:block; }
.eva-brand .eva-brand-text{ display:flex; flex-direction:column; line-height:1.1; }
.eva-brand .eva-brand-text small{
  font-family:var(--sans); font-weight:600; font-size:10px;
  letter-spacing:.18em; text-transform:uppercase; color:var(--gold-soft); margin-top:3px;
}

/* --- LINKS: de menukolom zelf (navy) --- */
.eva-nav{
  flex:none; width:var(--nav-w);
  background:var(--navy);
  color:rgba(255,255,255,.75);
  display:flex; flex-direction:column;
  position:sticky; top:0; align-self:flex-start;
  height:100vh; overflow-y:auto;
}
.eva-nav-list{ padding:14px 12px; display:flex; flex-direction:column; gap:3px; }

/* --- LINKS: één menu-item (icoon + tekst) --- */
.eva-nav-item{
  display:flex; align-items:center; gap:12px;
  /* Minstens 44px hoog, net als de knoppen: makkelijk aan te tikken. */
  min-height:44px; padding:11px 14px; border-radius:10px;
  color:rgba(255,255,255,.78);
  background:none; border:none; width:100%; text-align:left;
  font-family:var(--sans); font-size:14.5px; font-weight:500;
  cursor:pointer; transition:background .18s, color .18s;
}
.eva-nav-item:hover{ background:rgba(255,255,255,.10); color:#fff; }
.eva-nav-label{ min-width:0; overflow:hidden; text-overflow:ellipsis; }
.eva-nav-status{
  flex:none; margin-left:auto; padding:2px 6px; border-radius:999px;
  border:1px solid rgba(232,200,121,.42); color:var(--gold-soft);
  font-size:9px; font-weight:700; letter-spacing:.04em; text-transform:uppercase;
}
/* nette, duidelijk zichtbare focus-rand voor wie met het toetsenbord navigeert */
.eva-nav-item:focus-visible{ outline:3px solid var(--gold-soft); outline-offset:-2px; }
.eva-nav-item .eva-nav-ic{ flex:none; width:22px; height:22px; display:grid; place-items:center; }
.eva-nav-item .eva-nav-ic svg{
  width:20px; height:20px; stroke:currentColor; stroke-width:1.6;
  fill:none; stroke-linecap:round; stroke-linejoin:round;
}
/* het actieve (geopende) menu-item krijgt een gouden accent */
.eva-nav-item.active{
  background:var(--navy-soft); color:#fff;
  box-shadow:inset 3px 0 0 var(--gold);
}
.eva-nav-item.active .eva-nav-ic{ color:var(--gold-soft); }

/* een klein kopje boven een groep menu-items (bijv. "Dagelijks werk", "Meer") */
.eva-nav-eyebrow{
  padding:16px 16px 6px;
  font-size:10px; letter-spacing:.2em; text-transform:uppercase;
  color:var(--gold-soft); font-weight:700;
}
/* Een tweede groepskopje krijgt wat extra lucht erboven én een dun lijntje,
   zodat "Dagelijks werk" en "Meer" duidelijk van elkaar gescheiden zijn. */
.eva-nav-eyebrow.is-tweede{
  margin-top:14px; padding-top:16px;
  border-top:1px solid rgba(255,255,255,.10);
  color:var(--muted-2);
}

/* --- RECHTS: het werkgebied met ivoor achtergrond --- */
.eva-content{
  flex:1 1 auto;
  background:var(--ivory);
  min-width:0;                /* voorkomt dat brede tabellen de layout slopen */
}


/* --------------------------------------------------------------------------
   3b) MOBIELE TOPBALK + UITSCHUIFMENU (DRAWER)
   --------------------------------------------------------------------------
   Deze onderdelen staan wel altijd in de HTML, maar zijn op de DESKTOP volledig
   verborgen (display:none). Pas onder ~900px (zie de responsive-sectie onderaan)
   worden ze zichtbaar. De vaste zijbalk verdwijnt dan en dit neemt het over.
   Zo blijft de desktop exact zoals hij was.
   -------------------------------------------------------------------------- */
/* Standaard (desktop): de mobiele schil is onzichtbaar. */
.eva-topbar{ display:none; }
.eva-drawer-overlay{ display:none; }

/* Een ronde/vierkante tikknop in de topbalk (hamburger en belletje). Minstens
   48x48px: comfortabel aan te tikken met een duim. */
.eva-topbar-btn{
  flex:none; width:48px; height:48px; border-radius:11px;
  display:inline-flex; align-items:center; justify-content:center;
  background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.16);
  color:#fff; cursor:pointer; -webkit-tap-highlight-color:transparent;
  transition:background .18s, border-color .18s;
}
.eva-topbar-btn:hover{ background:rgba(255,255,255,.16); }
.eva-topbar-btn:active{ background:rgba(255,255,255,.22); }
.eva-topbar-btn:focus-visible{ outline:2px solid var(--gold-soft); outline-offset:2px; }
.eva-topbar-btn svg{
  width:24px; height:24px; stroke:currentColor; stroke-width:2;
  fill:none; stroke-linecap:round; stroke-linejoin:round;
}

/* De merknaam in het midden van de topbalk (en boven in de drawer). */
.eva-topbar-brand{ display:flex; align-items:center; gap:10px; min-width:0; }
.eva-topbar-mark{
  flex:none; width:30px; height:30px; border-radius:8px;
  background:linear-gradient(160deg, var(--gold), var(--gold-deep));
  display:grid; place-items:center;
  color:var(--navy);
  box-shadow:0 3px 10px rgba(0,0,0,.25);
}
.eva-topbar-name{
  font-family:var(--serif); font-weight:600; font-size:15.5px; color:#fff;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}

/* De donkere laag achter het uitschuifmenu (dekt het hele scherm). */
.eva-drawer-overlay{
  position:fixed; inset:0; z-index:1200;
  background:rgba(15,27,51,.48);
  opacity:0; transition:opacity .22s ease;
}
.eva-drawer-overlay.is-open{ opacity:1; }

/* Het uitschuifmenu zelf: schuift van links in beeld, met eigen scroll. */
.eva-drawer{
  position:absolute; top:0; left:0; bottom:0;
  width:min(320px, 86vw);
  background:var(--navy); color:rgba(255,255,255,.78);
  display:flex; flex-direction:column;
  box-shadow:var(--shadow-lg);
  transform:translateX(-100%); transition:transform .24s ease;
  /* Veilige marges voor de iPhone-notch en afgeronde hoeken. */
  padding-top:env(safe-area-inset-top);
  padding-left:env(safe-area-inset-left);
  padding-bottom:env(safe-area-inset-bottom);
}
.eva-drawer-overlay.is-open .eva-drawer{ transform:translateX(0); }

/* De vaste kop bovenin de drawer: merknaam links, sluitkruisje rechts. */
.eva-drawer-head{
  flex:none;
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:16px 14px 14px 18px;
  border-bottom:1px solid rgba(255,255,255,.10);
}
.eva-drawer-sluit{
  flex:none; width:44px; height:44px; border-radius:10px;
  display:inline-flex; align-items:center; justify-content:center;
  background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.18);
  color:#fff; cursor:pointer; -webkit-tap-highlight-color:transparent;
  transition:background .18s, border-color .18s;
}
.eva-drawer-sluit:hover{ background:rgba(255,255,255,.16); border-color:var(--gold-soft); }
.eva-drawer-sluit:focus-visible{ outline:2px solid var(--gold-soft); outline-offset:2px; }
.eva-drawer-sluit svg{
  width:20px; height:20px; stroke:currentColor; stroke-width:2;
  fill:none; stroke-linecap:round; stroke-linejoin:round;
}

/* De scrollbare lijst met menu-items in de drawer. */
.eva-drawer-list{
  flex:1 1 auto; overflow-y:auto;
  padding:8px 12px 20px;
  display:flex; flex-direction:column; gap:3px;
}
/* Eén menu-rij in de drawer: groot en goed tikbaar (min 48px hoog). */
.eva-drawer-item{
  display:flex; align-items:center; gap:14px;
  min-height:48px; padding:12px 14px; border-radius:10px;
  color:rgba(255,255,255,.80);
  background:none; border:none; width:100%; text-align:left;
  font-family:var(--sans); font-size:16px; font-weight:500;
  cursor:pointer; -webkit-tap-highlight-color:transparent;
  transition:background .16s, color .16s;
}
.eva-drawer-item:hover{ background:rgba(255,255,255,.10); color:#fff; }
.eva-drawer-item:active{ background:rgba(255,255,255,.16); }
.eva-drawer-item:focus-visible{ outline:3px solid var(--gold-soft); outline-offset:-2px; }
.eva-drawer-item .eva-nav-ic{ flex:none; width:24px; height:24px; display:grid; place-items:center; }
.eva-drawer-item .eva-nav-ic svg{
  width:22px; height:22px; stroke:currentColor; stroke-width:1.6;
  fill:none; stroke-linecap:round; stroke-linejoin:round;
}
.eva-drawer-item.active{
  background:var(--navy-soft); color:#fff;
  box-shadow:inset 3px 0 0 var(--gold);
}
.eva-drawer-item.active .eva-nav-ic{ color:var(--gold-soft); }


/* --------------------------------------------------------------------------
   4) PAGINA  -  binnen het werkgebied staat steeds één "pagina" met
      een kop (titel + ondertitel) en daaronder de inhoud.
   -------------------------------------------------------------------------- */
.eva-page{
  max-width:1100px; margin:0 auto;
  padding:clamp(22px, 4vw, 46px) clamp(18px, 4vw, 44px) 64px;
}
.eva-page-head{ margin-bottom:30px; }
.eva-page-head h1{
  font-weight:500; font-size:clamp(28px, 4.4vw, 40px); margin:0;
}
.eva-tagline{
  color:var(--muted); font-size:16px; margin-top:10px; max-width:680px; line-height:1.55;
}
/* DE INHOUD-ROMP: hier bouwt elke module (dashboard, verleng-motor, enz.)
   zijn eigen kaarten, tabellen en knoppen in. core.js maakt deze huls aan
   (zie EVA.start). We geven hem geen eigen rand of kleur, alleen wat lucht. */
.eva-page-body{ display:block; }
.eva-page-body > .eva-card:last-child,
.eva-page-body > .eva-alert:last-child{ margin-bottom:0; }

/* klein gouden streepje met label boven een paginatitel (optioneel) */
.eva-eyebrow{
  display:inline-flex; align-items:center; gap:12px;
  color:var(--gold-deep); font-size:11px; letter-spacing:.22em;
  text-transform:uppercase; font-weight:700; margin-bottom:12px;
}
.eva-eyebrow::before{ content:""; height:1px; width:28px; background:var(--gold); }


/* --------------------------------------------------------------------------
   5) KAARTEN  -  witte vlakken met zachte schaduw waarin inhoud staat.
   -------------------------------------------------------------------------- */
.eva-card{
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:clamp(18px, 3vw, 28px);
  box-shadow:var(--shadow);
  margin-bottom:20px;
}
.eva-card-head{
  display:flex; align-items:center; justify-content:space-between; gap:14px;
  margin-bottom:18px; padding-bottom:16px;
  border-bottom:1px solid var(--line-soft);
}
.eva-card-head h2,
.eva-card-head h3{ font-weight:600; font-size:19px; margin:0; }
.eva-card-head .eva-muted{ margin-top:2px; }

/* twee kolommen naast elkaar; onder 900px worden het er automatisch één (zie responsive) */
.eva-grid{ display:grid; grid-template-columns:repeat(2, 1fr); gap:20px; }


/* --------------------------------------------------------------------------
   6) KNOPPEN  -  primaire (goud), spook (omlijnd) en klein formaat.
   -------------------------------------------------------------------------- */
.eva-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  font-family:var(--sans); font-size:15px; font-weight:600;
  /* Minstens 44px hoog: comfortabel aan te tikken, ook op een telefoon. */
  min-height:44px; padding:11px 20px; border-radius:10px;
  border:1px solid var(--line); background:var(--paper); color:var(--navy);
  cursor:pointer; transition:transform .12s, box-shadow .2s, background .2s, border-color .2s;
  text-decoration:none; white-space:nowrap; line-height:1.15;
}
/* Duidelijke hover: de knop komt iets omhoog, krijgt een gouden rand en een
   zachte schaduw, zodat je meteen ziet dat je erop kunt klikken. */
.eva-btn:hover{ border-color:var(--gold); box-shadow:0 6px 16px -10px rgba(15,27,51,.4); transform:translateY(-1px); }
.eva-btn:active{ transform:translateY(1px); box-shadow:none; }
.eva-btn svg{ width:18px; height:18px; stroke:currentColor; stroke-width:2; fill:none;
              stroke-linecap:round; stroke-linejoin:round; }

/* primaire knop = goud, voor de belangrijkste actie */
.eva-btn-primary{
  background:linear-gradient(160deg, var(--gold), var(--gold-deep));
  border-color:var(--gold-deep); color:#fff;
  box-shadow:0 6px 16px -8px rgba(162,118,28,.7);
}
.eva-btn-primary:hover{ box-shadow:0 12px 24px -8px rgba(162,118,28,.8); border-color:var(--gold-deep); transform:translateY(-1px); }

/* spook-knop = doorzichtig met rand, voor minder belangrijke acties */
.eva-btn-ghost{ background:transparent; color:var(--navy); border-color:var(--line); }
.eva-btn-ghost:hover{ background:#fff; border-color:var(--gold); }

/* klein formaat, voor in tabellen en compacte plekken. Blijft comfortabel
   aantikbaar (min 40px hoog), maar iets compacter dan de standaardknop. */
.eva-btn-sm{ min-height:40px; padding:9px 14px; font-size:14px; border-radius:8px; }
.eva-btn-sm svg{ width:16px; height:16px; }

/* uitgeschakelde knop */
.eva-btn:disabled, .eva-btn[disabled]{ opacity:.45; cursor:not-allowed; box-shadow:none; transform:none; }

/* nette, duidelijk zichtbare focus-rand voor wie met het toetsenbord navigeert */
.eva-btn:focus-visible{ outline:3px solid var(--gold); outline-offset:2px; }


/* --------------------------------------------------------------------------
   6b) STATUSKNOPPEN  -  bijhoud-knoppen (gebeld / gemaild / afgehandeld /
   overslaan enz.) in een duidelijke kleur met een icoontje ervoor. Zo zie je
   in een oogopslag wat elke knop doet, ook zonder de tekst te lezen. Het icoon
   zetten de modules erin via een <svg>; de kleur komt uit de klasse hieronder.
   -------------------------------------------------------------------------- */
/* De kleuren zetten een zachte tint op de knop; bij hover wordt hij voller. */
.eva-btn-status-groen{ background:var(--green-soft); color:var(--green); border-color:#BBE6C8; }
.eva-btn-status-groen:hover{ background:var(--green); color:#fff; border-color:var(--green); }
.eva-btn-status-blauw{ background:var(--blue-soft); color:var(--blue); border-color:#BFD2F7; }
.eva-btn-status-blauw:hover{ background:var(--blue); color:#fff; border-color:var(--blue); }
.eva-btn-status-grijs{ background:var(--line-soft); color:var(--muted); border-color:var(--line); }
.eva-btn-status-grijs:hover{ background:var(--muted); color:#fff; border-color:var(--muted); }
/* De gekozen (actieve) statusknop: volle kleur, zodat je ziet wat je koos. */
.eva-btn-status-groen.is-gekozen{ background:var(--green); color:#fff; border-color:var(--green); }
.eva-btn-status-blauw.is-gekozen{ background:var(--blue); color:#fff; border-color:var(--blue); }
.eva-btn-status-grijs.is-gekozen{ background:var(--muted); color:#fff; border-color:var(--muted); }


/* --------------------------------------------------------------------------
   6c) ACTIEKNOPPEN  -  de gedeelde drie-kleuren-knoprij (EVA.util.actieknoppen)
   Overal identiek: rood = Bellen, geel = Mailen, blauw = WhatsApp, plus een
   rustige Kopieer-knop. Volle kleuren zodat de ACTIE (bellen/mailen/appen)
   visueel domineert boven de subtielere statusknoppen.
   -------------------------------------------------------------------------- */
.eva-actieknoppen{ margin-top:12px; }
.eva-actieknoppen-rij{ display:flex; flex-wrap:wrap; gap:8px; }
.eva-actieknoppen-uitleg{ margin-top:6px; display:flex; flex-direction:column; gap:2px; }
.eva-actie-ic{ display:inline-flex; align-items:center; }

/* rood = Bellen (met zichtbaar nummer). Volle, duidelijke kleur. */
.eva-btn-bel{ background:var(--red); color:#fff; border-color:var(--red); font-weight:700; }
.eva-btn-bel:hover{ background:#9F1414; border-color:#9F1414; color:#fff; }
/* geel = Mailen. Warm amber met donkere tekst voor contrast. */
.eva-btn-mail{ background:#F4B740; color:var(--navy); border-color:#D99A16; font-weight:700; }
.eva-btn-mail:hover{ background:#EBA71F; border-color:#C88C10; color:var(--navy); }
/* blauw = WhatsApp (zoals Melih tekende). */
.eva-btn-wa{ background:var(--blue); color:#fff; border-color:var(--blue); font-weight:700; }
.eva-btn-wa:hover{ background:#1740B8; border-color:#1740B8; color:#fff; }
/* Een uitgeschakelde actieknop (gegeven nog niet gekoppeld): rustig grijs, niet
   fel, zodat een ontbrekend nummer/e-mail niet schreeuwt. */
.eva-btn-bel.is-uit, .eva-btn-mail.is-uit, .eva-btn-wa.is-uit{
  background:var(--line-soft); color:var(--muted); border-color:var(--line);
}


/* --------------------------------------------------------------------------
   6d) AFGEHANDELDE / OVERGESLAGEN KAARTEN  -  dimmen met een vinkje, zodat de
   nog-te-doen kaarten vooraan de aandacht houden. De actieknoppen blijven wel
   goed leesbaar (we dimmen de kaart, niet tot onleesbaar).
   -------------------------------------------------------------------------- */
.eva-card.is-afgehandeld, .eva-card.is-gedimd{
  opacity:.62; filter:grayscale(.35);
  transition:opacity .2s, filter .2s;
}
.eva-card.is-afgehandeld:hover, .eva-card.is-gedimd:hover{ opacity:1; filter:none; }
.eva-afgehandeld-vink{
  display:inline-flex; align-items:center; gap:6px; font-size:12.5px; font-weight:700;
  color:var(--green); margin-bottom:6px;
}
.eva-afgehandeld-vink svg{ width:16px; height:16px; stroke:currentColor; stroke-width:2.4;
  fill:none; stroke-linecap:round; stroke-linejoin:round; }


/* --------------------------------------------------------------------------
   6e) INKLAPBARE SECTIE  -  gebruikt om alle bronnen/bedrijven in 1x in te
   klappen (niet meer eindeloos scrollen). Standaard ingeklapt.
   -------------------------------------------------------------------------- */
.eva-inklap-kop{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  width:100%; text-align:left; cursor:pointer;
  background:var(--paper); border:1px solid var(--line); border-radius:10px;
  padding:12px 16px; min-height:44px; font-family:var(--sans);
  font-weight:600; font-size:14.5px; color:var(--navy);
  transition:border-color .18s, background .18s;
}
.eva-inklap-kop:hover{ border-color:var(--gold); }
.eva-inklap-kop:focus-visible{ outline:3px solid var(--gold); outline-offset:2px; }
.eva-inklap-kop .eva-inklap-pijl{ transition:transform .2s; flex:none; }
.eva-inklap-kop[aria-expanded="true"] .eva-inklap-pijl{ transform:rotate(180deg); }
.eva-inklap-body{ margin-top:12px; }
.eva-inklap-body[hidden]{ display:none; }


/* --------------------------------------------------------------------------
   7) FORMULIER  -  labels, tekstvelden, keuzelijsten en schuifregelaars.
   -------------------------------------------------------------------------- */
.eva-field{ margin-bottom:16px; }
.eva-label{
  display:block; font-size:13px; font-weight:600; color:var(--ink);
  margin-bottom:7px; letter-spacing:.01em;
}
.eva-input, .eva-textarea, .eva-select{
  width:100%; font-family:var(--sans); font-size:14.5px; color:var(--ink);
  background:var(--paper); border:1px solid var(--line); border-radius:10px;
  padding:11px 13px; transition:border-color .18s, box-shadow .18s;
}
.eva-input:focus, .eva-textarea:focus, .eva-select:focus{
  outline:none; border-color:var(--gold);
  box-shadow:0 0 0 3px rgba(200,147,42,.16);
}
.eva-field-fout{
  display:block; margin-top:5px; color:var(--red); font-size:12px; font-weight:600;
}
.eva-input[aria-invalid="true"]{
  border-color:var(--red); box-shadow:0 0 0 3px rgba(185,28,28,.10);
}
.eva-textarea{ resize:vertical; min-height:110px; line-height:1.55; }
.eva-select{ appearance:none; -webkit-appearance:none;
  /* klein pijltje rechts in de keuzelijst */
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%236B7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 12px center; padding-right:36px;
}

/* schuifregelaar (slider) in merkstijl */
.eva-range{
  -webkit-appearance:none; appearance:none; width:100%; height:5px; border-radius:5px;
  background:linear-gradient(90deg, var(--gold) var(--p,40%), #E7E3DA var(--p,40%));
  outline:none; cursor:pointer; margin:8px 0;
}
.eva-range::-webkit-slider-thumb{
  -webkit-appearance:none; width:19px; height:19px; border-radius:50%;
  background:var(--navy); border:3px solid var(--gold);
  box-shadow:0 2px 8px rgba(15,27,51,.25); cursor:pointer; transition:transform .12s;
}
.eva-range::-webkit-slider-thumb:hover{ transform:scale(1.15); }
.eva-range::-moz-range-thumb{
  width:19px; height:19px; border:3px solid var(--gold); border-radius:50%;
  background:var(--navy); cursor:pointer;
}


/* --------------------------------------------------------------------------
   8) TABEL  -  nette tabel met rij-scheiding.
   -------------------------------------------------------------------------- */
.eva-table{ width:100%; border-collapse:collapse; font-size:14px; }
.eva-table th{
  text-align:left; font-weight:600; color:var(--muted);
  font-size:11.5px; letter-spacing:.06em; text-transform:uppercase;
  padding:11px 12px; border-bottom:1px solid var(--line);
}
.eva-table td{
  padding:13px 12px; border-bottom:1px solid var(--line-soft);
  color:var(--ink); vertical-align:middle;
}
.eva-table tr:last-child td{ border-bottom:none; }
.eva-table tbody tr{ transition:background .15s; }
.eva-table tbody tr:hover{ background:var(--ivory); }
.eva-table td b, .eva-table td strong{ color:var(--navy); font-weight:600; }


/* --------------------------------------------------------------------------
   9) STATUS  -  badges (labeltjes), alerts (meldingen) en KPI's (kerngetallen).
   -------------------------------------------------------------------------- */
/* BADGE = klein gekleurd labeltje, bijvoorbeeld een status */
.eva-badge{
  display:inline-flex; align-items:center; gap:6px;
  font-size:11.5px; font-weight:600; line-height:1;
  padding:5px 10px; border-radius:7px; white-space:nowrap;
  background:var(--line-soft); color:var(--muted); border:1px solid var(--line);
}
.eva-statusstip{
  width:7px; height:7px; flex:none; border-radius:50%;
  background:currentColor;
}

.eva-badge.is-green{ background:var(--green-soft); color:var(--green); border-color:#BBE6C8; }
.eva-badge.is-gold{  background:#FBF1DC;          color:var(--gold-deep); border-color:#EAD6A8; }
.eva-badge.is-red{   background:var(--red-soft);  color:var(--red);   border-color:#F4C4C4; }
.eva-badge.is-blue{  background:var(--blue-soft); color:var(--blue);  border-color:#BFD2F7; }
.eva-badge.is-grey{  background:var(--line-soft); color:var(--muted); border-color:var(--line); }

/* ALERT = brede melding over de volle breedte */
.eva-alert{
  display:flex; align-items:flex-start; gap:11px;
  padding:13px 15px; border-radius:11px; font-size:14px; font-weight:500;
  background:var(--blue-soft); color:var(--blue); border:1px solid #BFD2F7;
  margin-bottom:16px; line-height:1.5;
}
.eva-alert.is-red{   background:var(--red-soft);   color:#8F1D1D; border-color:#F4C4C4; }
.eva-alert.is-green{ background:var(--green-soft); color:var(--green); border-color:#BBE6C8; }
.eva-alert.is-gold{  background:#FBF1DC;           color:var(--gold-deep); border-color:#EAD6A8; }
.eva-alert svg{ flex:none; width:18px; height:18px; stroke:currentColor; stroke-width:2;
                fill:none; stroke-linecap:round; stroke-linejoin:round; margin-top:1px; }

/* LEGE STAAT = een vriendelijk vlak dat verschijnt als er (nog) niets te tonen
   is. In plaats van een leeg scherm zie je een korte, geruststellende uitleg en
   wat je nu kunt doen. Modules geven een titel (.eva-empty-titel), een
   uitleg-zin en eventueel een knop mee. */
.eva-empty{
  text-align:center; padding:34px 20px;
  border:1px dashed var(--line); border-radius:var(--radius);
  background:var(--ivory); color:var(--muted);
}
.eva-empty .eva-empty-icoon{ color:var(--gold); opacity:.7; margin-bottom:10px; }
.eva-empty .eva-empty-icoon svg{ width:38px; height:38px; stroke:currentColor;
  stroke-width:1.5; fill:none; stroke-linecap:round; stroke-linejoin:round; }
.eva-empty .eva-empty-titel{
  font-family:var(--serif); color:var(--navy); font-size:18px; font-weight:600;
  margin-bottom:6px;
}
.eva-empty p{ font-size:14px; line-height:1.55; max-width:440px; margin:0 auto; }
.eva-empty .eva-row{ justify-content:center; margin-top:16px; }

/* KPI = groot kerngetal met een label eronder */
.eva-kpi{
  background:var(--paper); border:1px solid var(--line); border-radius:var(--radius);
  padding:20px 22px; box-shadow:var(--shadow);
}
.eva-kpi .eva-kpi-num{
  font-family:var(--serif); font-weight:600; font-size:clamp(28px, 4vw, 38px);
  color:var(--navy); line-height:1; letter-spacing:-.02em;
}
.eva-kpi .eva-kpi-label{
  font-size:12.5px; color:var(--muted); margin-top:8px; font-weight:500;
}
.eva-kpi.is-gold .eva-kpi-num{ color:var(--gold-deep); }
.eva-kpi.is-green .eva-kpi-num{ color:var(--green); }


/* --------------------------------------------------------------------------
   10) BERICHTEN  -  chat-bubbels voor voorbeeldgesprekken.
       Navy bubbel rechts = uitgaand (van EVA), grijs links = inkomend.
   -------------------------------------------------------------------------- */
.eva-msg{
  max-width:82%; padding:11px 14px; border-radius:15px;
  font-size:14px; line-height:1.5; margin-bottom:10px;
  word-wrap:break-word; clear:both;
}
.eva-msg-out{
  background:var(--navy); color:#fff;
  margin-left:auto; border-bottom-right-radius:5px;
}
.eva-msg-in{
  background:var(--paper); color:var(--ink);
  border:1px solid var(--line); margin-right:auto; border-bottom-left-radius:5px;
}


/* --------------------------------------------------------------------------
   11) DIVERSEN  -  pillen, scheidingslijnen, grote bedragen, rijen, kolommen.
   -------------------------------------------------------------------------- */
/* PILL = klein afgerond labeltje, bijvoorbeeld een skill of filter */
.eva-pill{
  display:inline-flex; align-items:center; gap:6px;
  font-size:12.5px; font-weight:500; color:var(--navy);
  background:var(--paper); border:1px solid var(--line);
  padding:6px 12px; border-radius:999px; white-space:nowrap;
}
.eva-pill.is-active{ background:var(--navy); color:#fff; border-color:var(--navy); }

/* CHIPS = kleine "waarom past dit"-labels onder een match. Tonen de ECHTE
   geraakte onderdelen uit de matchscore (stad, titelwoord, skill, opleiding,
   per direct). white-space:normal + flex-wrap zodat ze op 375px netjes
   doorlopen en de pagina nooit horizontaal scrollt. */
.eva-chips{ display:flex; flex-wrap:wrap; gap:4px; margin-top:4px; }
.eva-chip{
  display:inline-flex; align-items:center;
  font-size:11.5px; font-weight:500; color:var(--muted);
  background:var(--ivory); border:1px solid var(--line-soft);
  padding:2px 8px; border-radius:999px; white-space:normal; max-width:100%;
}

/* DIVIDER = dunne scheidingslijn */
.eva-divider{ height:1px; background:var(--line); border:none; margin:20px 0; }

/* MUTED = gedempte (lichtgrijze) tekst voor bijschriften */
.eva-muted{ color:var(--muted); font-size:13.5px; }

/* EURO = groot groen bedrag, om opbrengsten te benadrukken */
.eva-euro{
  font-family:var(--serif); font-weight:600; color:var(--green);
  font-size:clamp(26px, 4vw, 36px); line-height:1; letter-spacing:-.02em;
}

/* ROW = dingen op een rij (flex), met ruimte ertussen */
.eva-row{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.eva-row.is-between{ justify-content:space-between; }
.eva-row.is-end{ justify-content:flex-end; }

/* STACK = dingen onder elkaar (kolom), met ruimte ertussen */
.eva-stack{ display:flex; flex-direction:column; gap:12px; }


/* --------------------------------------------------------------------------
   12) TOAST  -  korte zwevende melding rechtsonder in beeld.
       Verschijnt zacht en verdwijnt weer (zie core.js / EVA.util.melding).
   -------------------------------------------------------------------------- */
.eva-toast{
  position:fixed; right:22px; bottom:22px; z-index:9999;
  display:flex; align-items:center; gap:10px;
  background:var(--navy); color:#fff;
  padding:13px 18px; border-radius:12px;
  font-size:14px; font-weight:500;
  box-shadow:var(--shadow-lg);
  border:1px solid var(--navy-soft);
  opacity:0; transform:translateY(14px);
  transition:opacity .28s ease, transform .28s ease;
  pointer-events:none; max-width:340px;
}
.eva-toast.is-visible{ opacity:1; transform:translateY(0); }
.eva-toast .eva-toast-dot{ flex:none; width:9px; height:9px; border-radius:50%; background:var(--gold-soft); }


/* Voorstel-CV review blijft compact in het kandidaatpaneel. */
.eva-paneel [data-eva-voorstel-cv-generator]{border:1px solid var(--gold-soft);background:var(--ivory)}
.eva-paneel [data-eva-voorstel-cv-generator] .eva-input{display:block;width:100%;margin:8px 0 10px}

/* Digitaal procedurewerkboek: compact als Excel, horizontaal veilig op mobiel. */
.eva-procedure-scroll{overflow-x:auto;border:1px solid var(--line);border-radius:12px;background:#fff}
.eva-procedure-raster{border-collapse:collapse;min-width:1900px;width:100%;font-size:12px}
.eva-procedure-raster th{position:sticky;top:0;z-index:1;background:#203864;color:#fff;text-align:left;padding:8px;border:1px solid #fff;white-space:nowrap}
.eva-procedure-raster td{padding:3px;border:1px solid #b4b4b4;background:color-mix(in srgb,var(--procedure-kleur,#fff) 24%,#fff)}
.eva-procedure-input,.eva-procedure-status{width:100%;min-width:92px;border:0;background:transparent;padding:7px;font:inherit;color:#172033}
.eva-procedure-input:focus,.eva-procedure-status:focus{outline:2px solid var(--gold);outline-offset:-2px;background:#fff}
.eva-procedure-status{font-weight:700;border-radius:4px}
.eva-linkknop{border:0;background:transparent;color:#203864;font:inherit;font-weight:700;text-align:left;cursor:pointer;text-decoration:underline;text-underline-offset:2px}
.eva-procedure-legenda{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px}
.eva-procedure-legenda span{border:1px solid rgba(0,0,0,.18);border-radius:5px;padding:5px 8px;color:#172033;font-weight:700;font-size:12px}
.eva-procedure-filterkleur{display:inline-block;width:10px;height:10px;border:1px solid rgba(0,0,0,.24);border-radius:50%;margin-right:6px;vertical-align:-1px}
.eva-procedure-tijdlijn{display:grid;grid-template-columns:minmax(180px,1fr) auto;gap:4px 12px;border-left:3px solid var(--gold);padding:8px 10px;margin:8px 0;background:var(--ivory)}
.eva-procedure-tijdlijn>div{grid-column:1/-1}
.eva-procedure-voorstel{min-width:920px}
.eva-procedure-opslag{display:block;border:0;background:transparent;color:var(--green);font:600 9px/1.2 var(--sans);padding:1px 7px 3px;white-space:nowrap}
.eva-procedure-opslag[data-save-state="bezig"]{color:var(--muted)}
.eva-procedure-opslag[data-save-state="niet-opgeslagen"]{color:var(--red);cursor:pointer;text-decoration:underline}
.eva-procedure-opslag:disabled{opacity:1}
.eva-procedure-raster td[data-save-state="niet-opgeslagen"]{box-shadow:inset 0 0 0 2px var(--red);background:var(--red-soft)}
.eva-procedure-nieuwe-rij{background:#fff!important;border-top:2px solid var(--gold)!important}
.eva-procedure-nieuwe-rij .eva-procedure-input{min-width:260px;font-style:italic}
body.eva-procedure-fullscreen{overflow:hidden}
body.eva-procedure-fullscreen .eva-nav,body.eva-procedure-fullscreen .eva-topbar,body.eva-procedure-fullscreen .eva-drawer-overlay{display:none!important}
body.eva-procedure-fullscreen .eva-shell{display:block;height:100vh;min-height:0}
body.eva-procedure-fullscreen .eva-content{width:100vw;height:100vh;overflow:auto}
body.eva-procedure-fullscreen .eva-page[data-eva-module-id="procedures"]{max-width:none;padding:12px 14px 28px}
body.eva-procedure-fullscreen .eva-page[data-eva-module-id="procedures"]>.eva-page-head{display:none}
body.eva-procedure-fullscreen .eva-procedure-scroll{max-height:calc(100vh - 235px);overflow:auto}
body.eva-procedure-fullscreen .eva-procedure-raster th{top:0}

/* --------------------------------------------------------------------------
   13) RESPONSIVE  -  onder ~900px wordt de app een echte mobiele app:
       de vaste zijbalk verdwijnt en er komt een vaste topbalk met hamburger
       (uitschuifmenu), merknaam en een belletje naar Meldingen. Alle modules
       stapelen naar één kolom en brede tabellen scrollen binnen hun kaart.

       BELANGRIJK: al dit gedrag zit ACHTER deze media query. Op de desktop
       (breder dan 900px) verandert er dus helemaal niets; die blijft 1:1.
   -------------------------------------------------------------------------- */
@media (max-width:900px){
  /* De schil onder elkaar; de topbalk komt bovenaan te staan. */
  .eva-shell{ flex-direction:column; }

  /* De vaste zijbalk verdwijnt volledig; de drawer neemt het over. */
  .eva-nav{ display:none; }

  /* De vaste topbalk: navy, blijft bovenaan plakken, met veilige marge voor de
     iPhone-notch (env(safe-area-inset-top)). */
  .eva-topbar{
    display:flex; align-items:center; justify-content:space-between; gap:12px;
    position:sticky; top:0; z-index:900;
    background:var(--navy);
    border-bottom:1px solid rgba(255,255,255,.10);
    padding:10px 12px;
    padding-top:calc(10px + env(safe-area-inset-top));
    padding-left:calc(12px + env(safe-area-inset-left));
    padding-right:calc(12px + env(safe-area-inset-right));
  }
  /* De drawer-overlay mag als flex-laag renderen zodra we mobiel zijn (hij blijft
     via het 'hidden'-attribuut onzichtbaar tot hij wordt geopend). */
  .eva-drawer-overlay:not([hidden]){ display:block; }

  /* Het werkgebied krijgt wat minder zijruimte, zodat kaarten lekker breed staan. */
  .eva-page{
    padding-left:clamp(14px, 4vw, 20px);
    padding-right:clamp(14px, 4vw, 20px);
    padding-top:clamp(18px, 5vw, 26px);
  }
  .eva-page-head{ margin-bottom:22px; }

  /* Alle tweekoloms-rasters worden één kolom. */
  .eva-grid{ grid-template-columns:1fr; }

  /* Knoppenrijen mogen netjes doorlopen naar de volgende regel. */
  .eva-row{ flex-wrap:wrap; }
  /* Een knop die op een rij zit, mag op mobiel de volle breedte pakken als hij
     alleen staat; naast elkaar blijven ze door flex-wrap netjes wrappen. */
  .eva-row.is-end{ justify-content:flex-start; }

  /* Formuliervelden en statusknoppen comfortabel hoog (min 44px). */
  .eva-input, .eva-textarea, .eva-select{ min-height:44px; font-size:16px; }
  /* font-size 16px voorkomt dat iOS automatisch inzoomt bij het typen. */

  /* Kleine knoppen (o.a. de statusknoppen Gebeld/Gemaild/Afgehandeld/Overslaan)
     zijn op desktop 40px; op een touchscreen tikken we ze comfortabel op min
     44px. Blijft binnen de mobiele media query, desktop verandert niet. */
  .eva-btn-sm{ min-height:44px; }

  /* De aan/uit-schakelaar (Meldingen) is visueel 46x26; die smalle vorm houden we,
     maar het TIKGEBIED vergroten we op mobiel naar min 44px hoog met een
     onzichtbaar overlaagje. Zo blijft het knopje er hetzelfde uitzien, maar kun
     je het comfortabel met je duim raken. */
  .eva-switch{ position:relative; }
  .eva-switch::before{
    content:""; position:absolute; left:0; right:0;
    top:50%; transform:translateY(-50%);
    height:44px; min-width:44px;
  }

  /* Brede tabellen: horizontaal scrollen BINNEN hun kaart, met een subtiele
     scroll-hint (een gouden schaduw-randje rechts dat zegt: hier is meer). De
     modules zetten hun tabellen al in een <div style="overflow-x:auto">; we
     geven die wrapper hier extra mobiel-gedrag. */
  .eva-card [style*="overflow-x:auto"],
  .eva-card [style*="overflow-x: auto"]{
    -webkit-overflow-scrolling:touch;
    background:
      linear-gradient(to right, var(--paper) 30%, rgba(255,255,255,0)),
      linear-gradient(to left, var(--paper) 30%, rgba(255,255,255,0)) 100% 0,
      radial-gradient(farthest-side at 0 50%, rgba(15,27,51,.12), rgba(0,0,0,0)),
      radial-gradient(farthest-side at 100% 50%, rgba(15,27,51,.12), rgba(0,0,0,0)) 100% 0;
    background-repeat:no-repeat;
    background-size:36px 100%, 36px 100%, 16px 100%, 16px 100%;
    background-attachment:local, local, scroll, scroll;
  }
  .eva-table{ min-width:520px; }   /* dwingt de scroll af i.p.v. samengeperste kolommen */

  .eva-msg{ max-width:92%; }
  .eva-toast{ left:14px; right:14px; bottom:calc(14px + env(safe-area-inset-bottom)); max-width:none; }

  /* Lange knop-labels (bijv. "Stel voor aan [lange bedrijfsnaam]") mogen op een
     smal scherm afbreken in plaats van buiten de pagina te steken. Op desktop
     blijven knoppen op één regel (dit zit binnen de mobiele media query). */
  .eva-btn{ white-space:normal; max-width:100%; }

  /* Een enkele badge met een hele zin erin (bijv. de marge-toelichting) mag
     eveneens afbreken en nooit breder worden dan zijn kaart. */
  .eva-badge{ white-space:normal; max-width:100%; }

  /* Kaartkop met een titel plus een lange ondertitel: laat die netjes onder
     elkaar vallen in plaats van naast elkaar buiten beeld te lopen. */
  .eva-card-head{ flex-wrap:wrap; }

  /* Het kandidaat-dossier wordt een volledig scherm (zie sectie 16). */
}

/* Zolang de drawer open staat, mag de achtergrond niet meescrollen. */
body.eva-drawer-open{ overflow:hidden; }


/* --------------------------------------------------------------------------
   14) COCKPIT-INLOG  -  het beveiligde inlogpaneel in navy blue + goud.
       Alleen het INLOGSCHERM van de Cockpit gebruikt deze klassen (prefix
       'cockpit-'). Ze bouwen voort op de bestaande merktokens (--navy, --gold
       enz.); er worden GEEN nieuwe merkkleuren verzonnen en niets overschreven.
       Na het inloggen gebruikt de Cockpit gewoon weer de normale huisstijl.
   -------------------------------------------------------------------------- */
/* Het paneel zelf: diep navy vlak met een gouden rand en zachte schaduw. */
.eva-card.cockpit-login-card{
  background:var(--navy);
  border:1px solid var(--gold);
  box-shadow:var(--shadow-lg);
}

/* Kop met titel en ondertitel, met een gouden scheidingslijn eronder. */
.cockpit-login-head{
  margin-bottom:20px; padding-bottom:16px;
  border-bottom:1px solid rgba(200,147,42,.35);   /* zacht goud */
}
.cockpit-login-title{
  color:var(--gold-soft); font-weight:600; font-size:22px; margin:0;
}
.cockpit-login-sub{
  color:rgba(255,255,255,.72); font-size:13.5px; margin-top:6px; line-height:1.5;
}

/* Labels: licht goud, goed leesbaar op navy. */
.cockpit-login-field{ margin-bottom:16px; }
.cockpit-login-label{
  display:block; font-size:13px; font-weight:600; color:var(--gold-soft);
  margin-bottom:7px; letter-spacing:.02em;
}

/* Invoervelden: donker navy-vlak, lichte tekst, gouden focusrand. */
.cockpit-login-input{
  background:var(--navy-soft);
  border:1px solid rgba(200,147,42,.45);
  color:#fff;
}
.cockpit-login-input::placeholder{ color:rgba(255,255,255,.45); }
.cockpit-login-input:focus{
  outline:none; border-color:var(--gold);
  box-shadow:0 0 0 3px rgba(200,147,42,.28);
}

/* De inlogknop: volle gouden knop met navy tekst voor sterk contrast. */
.eva-btn.cockpit-login-knop{
  background:linear-gradient(160deg, var(--gold-soft), var(--gold));
  border-color:var(--gold);
  color:var(--navy);
  font-weight:700;
  box-shadow:0 6px 16px -8px rgba(0,0,0,.55);
}
.eva-btn.cockpit-login-knop:hover{
  border-color:var(--gold-soft);
  box-shadow:0 10px 22px -8px rgba(0,0,0,.6);
}
.eva-btn.cockpit-login-knop:focus-visible{
  outline:2px solid var(--gold-soft); outline-offset:2px;
}
.eva-btn.cockpit-login-knop:disabled,
.eva-btn.cockpit-login-knop[disabled]{ opacity:.6; }

/* Foutmelding: goed leesbaar op navy, met een zachte rode tint. */
.cockpit-login-fout{
  padding:12px 14px; border-radius:11px; font-size:14px; font-weight:500;
  line-height:1.5;
  background:rgba(185,28,28,.18);
  color:#FCA5A5;
  border:1px solid rgba(185,28,28,.5);
}


/* --------------------------------------------------------------------------
   15) SITE-BREDE INLOG-POORT  -  het volledige inlogscherm VOOR de app.
       gate.js toont dit als je (nog) niet bent ingelogd. Het vult het hele
       scherm met een navy achtergrond en gouden accenten en hergebruikt de
       cockpit-login-klassen hierboven voor de kaart zelf. GEEN nieuwe kleuren:
       alles komt uit de bestaande merktokens (--navy, --gold enz.).
   -------------------------------------------------------------------------- */
/* De volledige-scherm laag met navy achtergrond, gecentreerd. */
.eva-gate{
  position:fixed; inset:0; z-index:1000;
  display:flex; align-items:center; justify-content:center;
  padding:24px;
  background:
    radial-gradient(1100px 600px at 50% -10%, var(--navy-soft), transparent 60%),
    var(--navy);
  overflow-y:auto;
}
/* De inhoud (merk + kaart) in een nette verticale kolom. */
.eva-gate-inner{
  width:100%; max-width:460px;
  display:flex; flex-direction:column; align-items:stretch; gap:22px;
}

/* Merkkop boven de kaart: hetzelfde 'E'-teken + BesluitPartners x EVA. */
.eva-gate-brand{
  display:flex; align-items:center; gap:13px;
  justify-content:center;
}
.eva-gate-mark{
  display:inline-flex; align-items:center; justify-content:center;
  width:42px; height:42px; border-radius:11px;
  background:linear-gradient(160deg, var(--gold-soft), var(--gold));
  color:var(--navy); font-family:var(--serif); font-weight:700; font-size:22px;
  box-shadow:0 6px 16px -8px rgba(0,0,0,.55);
  flex:none;
}
.eva-gate-brandtext{ display:flex; flex-direction:column; line-height:1.15; }
.eva-gate-brandname{
  color:var(--gold-soft); font-weight:600; font-size:16px; letter-spacing:.01em;
}
.eva-gate-brandsub{ color:rgba(255,255,255,.6); font-size:12px; }

/* De inlog-poort op mobiel: netjes gecentreerd, met veilige marges voor de
   iPhone-notch en grote, goed aan te tikken velden en knop. */
@media (max-width:900px){
  .eva-gate{
    padding:20px;
    padding-top:calc(20px + env(safe-area-inset-top));
    padding-bottom:calc(20px + env(safe-area-inset-bottom));
  }
  .eva-gate-inner{ max-width:420px; }
  /* Velden en knop min 48px hoog, en 16px tekst zodat iOS niet inzoomt. */
  .cockpit-login-input{ min-height:48px; font-size:16px; }
  .eva-btn.cockpit-login-knop{
    width:100%; min-height:50px; font-size:16px;
  }
  /* De knop over de volle breedte i.p.v. rechts uitgelijnd. */
  .cockpit-login-card .eva-row.is-end{ justify-content:stretch; }
}


/* --------------------------------------------------------------------------
   16) KANDIDAAT-PANEEL  -  het gedeelde zijpaneel met het kandidaat-dossier.
       Elk onderdeel (reactivering, acties, speed-to-lead, bevestiging) kan dit
       openen door op een kandidaatnaam te klikken. kandidaat-paneel.js bouwt de
       inhoud; deze klassen bepalen alleen de opmaak. GEEN nieuwe merkkleuren:
       alles komt uit de bestaande tokens (--navy, --gold, --ivory enz.).
   -------------------------------------------------------------------------- */
/* De halfdoorzichtige donkere laag achter het paneel (dekt het hele scherm). */
.eva-paneel-overlay{
  position:fixed; inset:0; z-index:1100;
  display:flex; justify-content:flex-end;
  background:rgba(15,27,51,.42);
  opacity:0; transition:opacity .2s ease;
}
.eva-paneel-overlay.is-open{ opacity:1; }

/* Het zijpaneel zelf: schuift van rechts in beeld, met eigen scroll. */
.eva-paneel{
  width:min(560px, 100%); height:100%;
  background:var(--ivory);
  box-shadow:var(--shadow-lg);
  border-left:1px solid var(--line);
  display:flex; flex-direction:column;
  transform:translateX(24px); transition:transform .22s ease;
}
.eva-paneel-overlay.is-open .eva-paneel{ transform:translateX(0); }

/* De vaste kop bovenin het paneel (naam groot + sluitknop). */
.eva-paneel-head{
  flex:none;
  display:flex; align-items:flex-start; justify-content:space-between; gap:14px;
  padding:22px 24px 18px;
  background:var(--navy); color:#fff;
  border-bottom:1px solid var(--navy-soft);
}
.eva-paneel-naam{
  font-family:var(--serif); font-weight:600; font-size:24px; color:#fff;
  line-height:1.15; margin:0;
}
.eva-paneel-sub{ color:var(--gold-soft); font-size:13px; margin-top:5px; }

/* De sluitknop (kruisje) rechtsboven. */
.eva-paneel-sluit{
  flex:none; width:36px; height:36px; border-radius:9px;
  display:inline-flex; align-items:center; justify-content:center;
  background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.18);
  color:#fff; cursor:pointer; transition:background .18s, border-color .18s;
}
.eva-paneel-sluit:hover{ background:rgba(255,255,255,.16); border-color:var(--gold-soft); }
.eva-paneel-sluit:focus-visible{ outline:2px solid var(--gold-soft); outline-offset:2px; }
.eva-paneel-sluit svg{ width:18px; height:18px; stroke:currentColor; stroke-width:2;
  fill:none; stroke-linecap:round; stroke-linejoin:round; }

/* De scrollbare romp waarin de dossierblokken staan. */
.eva-paneel-body{
  flex:1 1 auto; overflow-y:auto;
  padding:22px 24px 34px;
  display:flex; flex-direction:column; gap:18px;
}

/* Klikbare contactknoppen (bellen / mailen) bovenaan het dossier. */
.eva-paneel-contact{ display:flex; flex-wrap:wrap; gap:10px; }
.eva-paneel-contact .eva-btn{ flex:1 1 auto; min-width:160px; }

/* Een blokje met een kopje (label) en de inhoud eronder. */
.eva-paneel-blok .eva-label{ margin-bottom:8px; }

/* Het CV-tekstvak: monospace-achtige, rustig leesbare weergave. */
.eva-paneel-cv{
  width:100%; max-height:280px; overflow:auto;
  background:var(--paper); border:1px solid var(--line); border-radius:var(--radius-sm);
  padding:14px 16px; font-size:13px; line-height:1.55; color:var(--ink);
  white-space:pre-wrap; word-wrap:break-word;
}

/* Kleine, nette leeg-uitleg (bijv. "telefoon nog niet gesynct"). */
.eva-paneel-leeg{
  font-size:13px; color:var(--muted); line-height:1.5;
  background:var(--paper); border:1px dashed var(--line); border-radius:var(--radius-sm);
  padding:12px 14px;
}

/* Een klikbare kandidaatnaam (in de lijsten van de modules). Ziet eruit als
   een subtiele link, zodat duidelijk is dat je erop kunt klikken. */
.eva-kandidaatnaam{
  background:none; border:none; padding:0; margin:0; cursor:pointer;
  font-family:inherit; font-size:inherit; font-weight:600; color:var(--navy);
  text-align:left; border-bottom:1px dashed var(--gold);
  transition:color .15s, border-color .15s;
}
.eva-kandidaatnaam:hover{ color:var(--gold-deep); border-bottom-color:var(--gold-deep); }
.eva-kandidaatnaam:focus-visible{ outline:2px solid var(--gold); outline-offset:2px; border-radius:3px; }

@media (max-width:900px){
  /* Op mobiel wordt het kandidaat-dossier een VOLLEDIG scherm: het paneel dekt
     alles, met een duidelijke sluitknop bovenaan en veilige marges voor de
     iPhone-notch. Zo staat het dossier niet half in beeld op een klein scherm. */
  .eva-paneel-overlay{ background:var(--navy); }   /* geen half-doorzichtige rand meer nodig */
  .eva-paneel{
    width:100%; height:100%; border-left:none;
    transform:translateY(16px);                    /* subtiel van onderaf i.p.v. vanaf de zijkant */
  }
  .eva-paneel-overlay.is-open .eva-paneel{ transform:translateY(0); }
  .eva-paneel-head{
    padding-top:calc(18px + env(safe-area-inset-top));
    padding-left:calc(18px + env(safe-area-inset-left));
    padding-right:calc(18px + env(safe-area-inset-right));
    position:sticky; top:0; z-index:2;
  }
  .eva-paneel-naam{ font-size:21px; }
  /* De sluitknop wat groter en duidelijker aantikbaar bovenaan. */
  .eva-paneel-sluit{ width:44px; height:44px; }
  .eva-paneel-body{
    padding-left:calc(18px + env(safe-area-inset-left));
    padding-right:calc(18px + env(safe-area-inset-right));
    padding-bottom:calc(34px + env(safe-area-inset-bottom));
  }
  /* De bel/mail-knoppen mogen naast elkaar of onder elkaar; volle breedte oogt
     rustiger op een smal scherm. */
  .eva-paneel-contact .eva-btn{ flex:1 1 100%; }
}
/* Premium kandidaatkaart: vaste hiërarchie, compact bewijs en acties onderaan. */
.eva-kandidaatkaart {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
}
.eva-kandidaatkaart-kop {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  min-width: 0;
}
.eva-kandidaatkaart-naam {
  color: var(--navy);
  font-weight: 700;
  line-height: 1.3;
}
.eva-kandidaatkaart-meta {
  color: var(--muted);
  font-size: 12.5px;
  line-height: 1.45;
}
.eva-kandidaatkaart-chips,
.eva-kandidaatkaart-acties {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}
.eva-kandidaatkaart-details {
  margin-top: 8px;
  border-top: 1px solid var(--line-soft);
  padding-top: 8px;
}
.eva-kandidaatkaart-details > summary {
  color: var(--gold-deep);
  cursor: pointer;
  font-size: 12.5px;
  font-weight: 600;
}
.eva-kandidaatkaart-bewijsregels {
  display: grid;
  gap: 6px;
  margin-top: 8px;
  font-size: 12px;
  line-height: 1.45;
}
.eva-kandidaatkaart-bewijsregel {
  border-left: 3px solid var(--green);
  padding-left: 8px;
}
.eva-kandidaatkaart-acties {
  margin-top: auto;
  border-top: 1px solid var(--line-soft);
  padding-top: 12px;
}
.eva-kandidaatkaart-acties > .eva-row {
  margin: 0 !important;
}
@media (max-width: 560px) {
  .eva-kandidaatkaart-kop { flex-direction: column; }
  .eva-kandidaatkaart-acties,
  .eva-kandidaatkaart-acties > .eva-row { width: 100%; }
  .eva-kandidaatkaart-acties .eva-btn { max-width: 100%; }
}
/* Filmische rondleiding --------------------------------------------------- */
.eva-tour-laag[hidden], .eva-tour[hidden] { display: none; }
.eva-tour-laag {
  position: fixed;
  inset: 0;
  z-index: 2147483000;
  background: rgba(5, 18, 37, .76);
  backdrop-filter: blur(2px);
}
.eva-tour {
  position: fixed;
  right: 28px;
  bottom: 28px;
  z-index: 2147483002;
  display: grid;
  grid-template-rows: auto auto auto minmax(0, auto) auto auto;
  width: min(480px, calc(100vw - 56px));
  max-height: calc(100vh - 56px);
  overflow: hidden;
  color: #fff;
  background: linear-gradient(145deg, #102b4e 0%, #081b33 100%);
  border: 1px solid rgba(224, 181, 82, .72);
  border-radius: 22px;
  padding: 24px;
  box-shadow: 0 28px 80px rgba(0, 0, 0, .48), 0 0 0 1px rgba(255, 255, 255, .05) inset;
  outline: none;
}
.eva-tour.is-doek {
  right: 50%;
  bottom: 50%;
  transform: translate(50%, 50%);
  text-align: center;
}
.eva-tour.is-wissel { animation: eva-tour-wissel .42s ease both; }
.eva-tour-kop {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 14px;
}
.eva-tour-kop > div { display: grid; gap: 4px; text-align: left; }
.eva-tour-bedrijf {
  color: var(--gold-soft, #f0cf83);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .09em;
  text-transform: uppercase;
}
.eva-tour-teller { color: rgba(255, 255, 255, .62); font-size: 12px; }
.eva-tour-x {
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 10px;
  color: #fff;
  background: rgba(255, 255, 255, .07);
  cursor: pointer;
}
.eva-tour-x:hover, .eva-tour-x:focus-visible { background: rgba(255, 255, 255, .16); }
.eva-tour-voortgang, .eva-tour-aftel {
  width: 100%;
  height: 4px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(255, 255, 255, .13);
}
.eva-tour-voortgang span, .eva-tour-aftel span {
  display: block;
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: var(--gold, #d0a43c);
}
.eva-tour-voortgang span { transition: width .38s ease; }
.eva-tour-titel {
  margin: 22px 0 9px;
  color: #fff;
  font-family: var(--serif);
  font-size: clamp(25px, 3vw, 32px);
  font-weight: 600;
  line-height: 1.15;
}
.eva-tour-tekst {
  max-height: min(180px, 24vh);
  margin: 0 0 18px;
  padding-right: 4px;
  overflow-y: auto;
  color: rgba(255, 255, 255, .84);
  font-size: 15px;
  line-height: 1.65;
  scrollbar-gutter: stable;
}
.eva-tour-aftel { margin-bottom: 0; height: 3px; }
.eva-tour-voet {
  position: relative;
  z-index: 4;
  display: flex;
  flex-wrap: nowrap;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid rgba(255, 255, 255, .14);
  background: #081b33;
}
.eva-tour-voet .eva-btn {
  position: relative;
  z-index: 1;
  min-width: 0;
  white-space: nowrap;
}
.eva-tour .eva-btn-ghost { color: #fff; border-color: rgba(255, 255, 255, .22); }
.eva-tour .eva-btn-ghost:hover, .eva-tour .eva-btn-ghost:focus-visible { background: rgba(255, 255, 255, .12); }
.eva-tour .eva-btn-primary { color: #10223d; background: var(--gold-soft, #f0cf83); border-color: var(--gold, #d0a43c); }
.eva-tour-speel[aria-pressed="true"] { color: #10223d; background: var(--gold-soft, #f0cf83); }
.eva-tour-start {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  margin-bottom: 8px;
  padding: 11px 12px;
  border: 1px solid var(--gold-deep, #9d711e);
  border-radius: 10px;
  color: var(--navy, #10223d);
  background: var(--gold, #d0a43c);
  box-shadow: 0 6px 16px -8px rgba(162, 118, 28, .8);
  cursor: pointer;
  font: 700 13.5px var(--sans);
}
.eva-tour-start:hover, .eva-tour-start:focus-visible { background: var(--gold-soft, #f0cf83); }
.eva-tour-start-ic { display: grid; place-items: center; }
.eva-nav-item.eva-tour-highlight, .eva-drawer-item.eva-tour-highlight {
  position: relative;
  z-index: 2147483001;
  animation: eva-tour-pulse 1.5s infinite;
}
.eva-tour-spot {
  position: relative;
  z-index: 2147483001;
  pointer-events: none !important;
  border-radius: 12px;
  outline: 3px solid var(--gold, #d0a43c);
  box-shadow: 0 0 0 9px rgba(208, 164, 60, .28), 0 20px 55px rgba(0, 0, 0, .28);
  animation: eva-tour-spotpulse 1.6s infinite;
  scroll-margin: 82px 530px 82px 82px;
}
@keyframes eva-tour-wissel {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}
.eva-tour.is-doek.is-wissel { animation-name: eva-tour-doekwissel; }
@keyframes eva-tour-doekwissel {
  from { opacity: 0; transform: translate(50%, calc(50% + 10px)); }
  to { opacity: 1; transform: translate(50%, 50%); }
}
@keyframes eva-tour-pulse {
  0% { box-shadow: 0 0 0 0 rgba(208, 164, 60, .55); }
  100% { box-shadow: 0 0 0 13px rgba(208, 164, 60, 0); }
}
@keyframes eva-tour-spotpulse {
  0%, 100% { outline-color: var(--gold, #d0a43c); }
  50% { outline-color: var(--gold-soft, #f0cf83); }
}

@media (max-width: 720px) {
  .eva-tour-laag { backdrop-filter: none; }
  .eva-tour, .eva-tour.is-doek {
    right: 0;
    bottom: 0;
    width: 100%;
    max-height: 58vh;
    padding: 19px 18px max(18px, env(safe-area-inset-bottom));
    border-width: 1px 0 0;
    border-radius: 20px 20px 0 0;
    transform: none;
    text-align: left;
  }
  .eva-tour.is-wissel, .eva-tour.is-doek.is-wissel { animation-name: eva-tour-wissel; }
  .eva-tour-titel { margin-top: 17px; font-size: 24px; }
  .eva-tour-tekst { max-height: min(150px, 18vh); margin-bottom: 14px; font-size: 14px; }
  .eva-tour-spot { scroll-margin: 76px 16px 64vh; }
  .eva-tour-voet {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    display: grid;
    justify-content: stretch;
    gap: 6px;
    margin-top: 12px;
    padding-top: 12px;
  }
  .eva-tour-voet .eva-btn {
    width: 100%;
    min-width: 0;
    padding-right: 5px;
    padding-left: 5px;
    font-size: 12px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .eva-tour *, .eva-tour,
  .eva-tour-spot,
  .eva-nav-item.eva-tour-highlight,
  .eva-drawer-item.eva-tour-highlight {
    scroll-behavior: auto !important;
    animation: none !important;
    transition: none !important;
  }
}