/* ═══ GLAS — de dashboardstijl door het hele CRM (26 okt 2026) ══════
   Alleen actief met body.glas (zie js/glas.js: CRM.glasAan). Zonder die
   klasse doet dit bestand niets, dus uitzetten = één vlag.

   Regels die uit de proeven kwamen:
   - Glas werkt alleen met iets erachter: de warme studio-achtergrond
     loopt onder het hele werkvlak door.
   - Glas kan niet door glas kijken (dan wordt het grijs): binnen een
     glazen vlak zijn kaarten helder en lichter, geen tweede blur.
   - Werklijsten blijven leesbaar: rijen en bordkaartjes zijn het witst.
   - Zwarte pil met lime = actief; oranje = wat je nog moet doen.
   Het dashboard heeft zijn eigen glas (css/dashboard.css) en wordt hier
   overgeslagen via [data-view=dashboard]. */

body.glas{
  --glas-bg:
    radial-gradient(60% 70% at 18% 20%,#f3b48f 0%,rgba(243,180,143,0) 60%),
    radial-gradient(50% 60% at 85% 15%,#e2ec9e 0%,rgba(226,236,158,0) 60%),
    radial-gradient(70% 60% at 60% 90%,#d9b892 0%,rgba(217,184,146,0) 65%),
    linear-gradient(160deg,#efe6da,#e4d6c4);
  --glas-vlak: linear-gradient(160deg,rgba(255,255,255,.62),rgba(255,255,255,.42));
  --glas-rand: inset 0 1.5px 1px #fff,inset 0 -1px 1px rgba(255,255,255,.6);
  --glas-schaduw: 0 14px 34px rgba(60,30,10,.10);
}
body.glas main.content{background:var(--glas-bg) fixed}

/* ─── De kop: de paginakop als glazen band met kerncijfers ─── */
body.glas:not([data-view=dashboard]) header.pagehead{
  margin:14px 20px 0;border-radius:24px;border:none;min-height:76px;padding:14px 22px;gap:14px 26px;
  background:var(--glas-vlak);backdrop-filter:blur(18px) saturate(1.5);-webkit-backdrop-filter:blur(18px) saturate(1.5);
  box-shadow:var(--glas-schaduw),var(--glas-rand);top:10px}
body.glas header.pagehead .ph-t{margin-right:0;padding-right:24px;border-right:1px solid rgba(26,31,10,.10)}
body.glas header.pagehead .ph-t .h1{color:var(--oranje);font-size:24px}
.gk-cijfers{display:flex;gap:28px;align-items:center;margin-right:auto;flex-wrap:wrap}
.gk-k{display:flex;flex-direction:column;gap:3px;min-width:0}
.gk-k b{font-size:26px;font-weight:700;letter-spacing:-.03em;line-height:1;color:var(--ink)}
.gk-k b small{font-size:15px;color:rgba(26,31,10,.38);font-weight:600}
.gk-k > span{font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:rgba(26,31,10,.55);white-space:nowrap}

/* ─── Vlakken ─── */
body.glas:not([data-view=dashboard]) :is(.card,.kpi,.tblwrap,.note,.vlak){
  background:var(--glas-vlak);border:none;border-radius:20px;
  backdrop-filter:blur(14px) saturate(1.5);-webkit-backdrop-filter:blur(14px) saturate(1.5);
  box-shadow:var(--glas-schaduw),var(--glas-rand)}
/* Geneste vlakken: helder, geen tweede blur. */
body.glas:not([data-view=dashboard]) :is(.card,.tblwrap,.vlak) :is(.card,.kpi,.tblwrap,.note){
  backdrop-filter:none;-webkit-backdrop-filter:none;background:rgba(255,255,255,.55);box-shadow:var(--glas-rand)}
body.glas:not([data-view=dashboard]) .note{border-left:3px solid currentColor}
body.glas :is(.card-h,.card-f){background:transparent;border-color:rgba(26,31,10,.07)}
body.glas table.tbl :is(th,thead,tr){background:transparent}
body.glas table.tbl th{border-color:rgba(26,31,10,.08)}
body.glas table.tbl td{border-color:rgba(26,31,10,.06)}
body.glas table.tbl tbody tr:hover{background:rgba(255,255,255,.45)}

/* ─── Borden: kolommen licht glas, kaartjes glas met fasekleur ─── */
body.glas .bcol{background:rgba(255,255,255,.16);border:none;border-radius:20px;
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  box-shadow:inset 0 1.5px 1px rgba(255,255,255,.9),inset 0 -1px 1px rgba(255,255,255,.5)}
body.glas .bcard{position:relative;border:none;border-radius:16px;overflow:hidden;
  background:linear-gradient(160deg,rgba(255,255,255,.62),rgba(255,255,255,.38));
  box-shadow:0 10px 24px rgba(60,30,10,.10),inset 0 1.5px 1px #fff,inset 0 -1px 1px rgba(255,255,255,.55)}
body.glas .bcard.bck{border-left:none}
body.glas .bcard::after{content:'';position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--ph,transparent);opacity:.85;pointer-events:none}
body.glas .bck .bc-kop{background:color-mix(in srgb,var(--ph,#fff) 22%,rgba(255,255,255,.35));border-bottom:1px solid rgba(255,255,255,.55)}

/* ─── Bediening: pillen, zwart met lime voor actief ─── */
body.glas .tabs{display:inline-flex;gap:4px;border:none;padding:4px;border-radius:99px;margin-bottom:18px;
  background:rgba(255,255,255,.5);box-shadow:inset 0 1px 2px rgba(60,30,10,.1),inset 0 -1px 1px rgba(255,255,255,.8)}
body.glas .tabs .tab{border:none;border-radius:99px;padding:7px 14px;margin:0}
body.glas .tabs .tab.on{background:#141710;color:var(--lime)}
body.glas .tabs .tab.on .cnt{background:rgba(200,241,53,.18);color:var(--lime)}
body.glas .seg{background:rgba(255,255,255,.5);border-color:transparent;box-shadow:inset 0 1px 2px rgba(60,30,10,.1)}
body.glas .seg button.on{background:#141710;color:var(--lime);border-color:#141710}
body.glas .btn:not(.ghost):not(.sub):not(.danger):not(.dark):not(.whatsapp){background:#141710;border-color:#141710;color:var(--lime)}
body.glas .btn.ghost{background:rgba(255,255,255,.62);border-color:rgba(255,255,255,.8)}
body.glas :is(input[type=text],input[type=search],input[type=email],input[type=tel],input[type=number],input[type=date],input[type=time],input[type=url],select,textarea){
  background-color:rgba(255,255,255,.62);border-color:rgba(255,255,255,.85)}
body.glas :is(input[type=text],input[type=search],select):not(textarea){border-radius:99px}

/* ─── Vensters: matglas over de pagina ─── */
body.glas :is(.drawer,.modal){
  background:linear-gradient(160deg,rgba(255,252,246,.86),rgba(250,244,234,.80));
  backdrop-filter:blur(26px) saturate(1.5);-webkit-backdrop-filter:blur(26px) saturate(1.5);
  box-shadow:0 30px 80px rgba(60,30,10,.25),inset 0 1.5px 1px #fff}
body.glas .modal{border-radius:24px;border:none}

/* Smal: kerncijfers onder de titel, kop zonder zijmarge. */
@media (max-width:900px){
  body.glas:not([data-view=dashboard]) header.pagehead{margin:8px 8px 0;border-radius:20px}
  body.glas header.pagehead .ph-t{border-right:none;padding-right:0}
  /* Op de telefoon is de kop al vol met filters: kerncijfers weg. */
  .gk-cijfers{display:none}
  body.glas .tabs{display:flex;border-radius:20px}
}

/* ─── Alle overige witte vlakken in één keer ───
   Modules tekenen hun eigen balken en blokjes met var(--card) en de
   tinten (--card-2, --well…). Binnen het werkvlak maken we die
   doorzichtig, zodat ook stroken als de tabbalk van Recruitment en de
   cijferbalk van Klanttrajecten glas worden zonder per module te
   sleutelen. Vensters (.drawer, .modal) staan buiten #viewmount en
   houden hun eigen, dichtere glas. */
body.glas:not([data-view=dashboard]) #viewmount{
  --card:rgba(255,255,255,.55);
  --card-2:rgba(255,255,255,.38);
  --well:rgba(255,255,255,.26);
  --well-2:rgba(255,255,255,.20);
  --line:rgba(26,31,10,.08);
  --line-2:rgba(26,31,10,.12);
}

/* ─── Zijbalk: los glazen paneel dat op de achtergrond zweeft ───
   (Tjeerd, 26 okt 2026, naar "versie 3".) Alleen op de desktop; op
   mobiel blijft het uitschuifmenu zoals het was. De achtergrond loopt
   dan ook onder de zijbalk door, dus die zetten we op de body. */
@media (min-width:901px){
  body.glas{background:var(--glas-bg) fixed}
  body.glas main.content{background:transparent;margin-left:calc(var(--nav-w) + 24px)}
  body.glas nav.side{top:12px;bottom:12px;left:12px;border-radius:26px;border:none;color:var(--ink);
    background:linear-gradient(170deg,rgba(255,255,255,.42),rgba(255,255,255,.24));
    backdrop-filter:blur(24px) saturate(1.5);-webkit-backdrop-filter:blur(24px) saturate(1.5);
    box-shadow:0 24px 60px rgba(60,30,10,.16),inset 0 1.5px 1px #fff,inset 0 -1px 1px rgba(255,255,255,.6)}
  body.glas nav.side .brand,body.glas nav.side .navfoot{border-color:rgba(26,31,10,.08)}
  body.glas .side a.nav{color:var(--ink)}
  body.glas .side a.nav:hover{background:rgba(255,255,255,.5)}
  body.glas .side a.nav.on{background:#141710;color:#fff}
  body.glas .side a.nav.on::before{display:none}
  body.glas .side a.nav .cnt{background:rgba(255,255,255,.6);color:var(--ink)}
  body.glas .side a.nav.on .cnt{background:var(--lime);color:#171d08}
  body.glas:not([data-view=dashboard]) header.pagehead{margin:12px 12px 0 0}
  /* Het dashboard: paneel en team schuiven netjes naast de zwevende balk. */
  body.glas .dash2.dk{background:transparent}
  body.glas .dk-team{margin-left:0;clip-path:inset(-200px -200px -400px 0)}
}

/* ═══ Ronde 2 (26 okt 2026) ═══════════════════════════════════════ */
/* Actief = lime met donkere tekst: frisser dan zwart (Tjeerd). */
body.glas :is(.tabs .tab.on,.seg button.on,.side a.nav.on){background:var(--lime);color:#171d08;border-color:var(--lime);
  box-shadow:0 6px 16px rgba(160,200,20,.28),inset 0 1px 1px rgba(255,255,255,.7)}
body.glas .tabs .tab.on .cnt,body.glas .side a.nav.on .cnt{background:#171d08;color:var(--lime)}
body.glas .side a.nav.on svg{stroke:#171d08;opacity:1}
body.glas .dk-paneel .seg button.on{background:var(--lime);color:#171d08}

/* De kop: compacter en vast bovenaan de pagina, scrolt niet mee. */
@media (min-width:901px){
  body.glas:not([data-view=dashboard]) header.pagehead{position:static;min-height:0;padding:10px 18px;gap:10px 22px}
}
body.glas header.pagehead .ph-t .h1{font-size:20px}
body.glas header.pagehead .ph-t .sub{font-size:11.5px}
body.glas header.pagehead .ph-t{padding-right:18px}
.gk-cijfers{gap:22px}
.gk-k b{font-size:21px}
.gk-k > span{font-size:9.5px}

/* Tabstroken die modules zelf als volle witte balk tekenen: los, zonder
   balk, op dezelfde marge als de rest van het werkvlak. */
body.glas .rc-tabwrap{background:transparent;border-bottom:none;padding:14px 26px 0}
body.glas .rc-tabwrap .tabs{margin-bottom:0}
body.glas .rc-bar{margin:14px 26px 0;border:none;border-radius:20px;background:var(--glas-vlak);box-shadow:var(--glas-schaduw),var(--glas-rand)}

/* Plaatsingen: het olijfgroene ploegvlak wordt donker rookglas. */
body.glas .pl-ploeg{border:none;border-radius:22px;
  background:linear-gradient(150deg,rgba(26,28,22,.86),rgba(18,20,14,.78));
  backdrop-filter:blur(16px) saturate(1.3);-webkit-backdrop-filter:blur(16px) saturate(1.3);
  box-shadow:0 18px 40px rgba(30,20,10,.22),inset 0 1.5px 1px rgba(255,255,255,.25)}

/* ═══ Leesbaarheid — "versie A, wit vel" (Tjeerd, 26 okt 2026) ═══════
   Waar veel tekst staat (tabellen, relatie- en kandidaatkaarten, CV's,
   vensters) is glas onleesbaar: die vlakken worden bijna dicht wit. Het
   glas blijft in de kop, de zijbalk, de tellers en tussen de vlakken. */
body.glas:not([data-view=dashboard]) #viewmount{--card:rgba(255,255,255,.93)}
body.glas:not([data-view=dashboard]) #viewmount :is(.tblwrap,.card,[class*=kaart]){
  background:rgba(255,255,255,.93);backdrop-filter:none;-webkit-backdrop-filter:none}
body.glas:not([data-view=dashboard]) #viewmount table.tbl tbody tr:hover{background:#f7f5ef}
body.glas :is(.drawer,.modal){background:rgba(255,255,255,.97)}

/* ─── Inloggen: zelfde warme studio-achtergrond, glazen kaart ───
   Stond nog op het donkergroene verloop uit base.css (Tjeerd, 2 nov 2026:
   "het moet echt in de kleur die we nu hebben"). */
body.glas #loginscreen{background:var(--glas-bg)}
body.glas #loginscreen .lbox{background:var(--glas-vlak);border-top:none;border-radius:26px;
  backdrop-filter:blur(18px) saturate(1.5);-webkit-backdrop-filter:blur(18px) saturate(1.5);
  box-shadow:0 24px 60px rgba(60,30,10,.16),var(--glas-rand)}
body.glas #loginscreen h1{color:var(--oranje)}
body.glas #loginscreen input{background:rgba(255,255,255,.7)}