/* VZM Klantportaal — luxe thema (zelfde sfeer als de website: donker, goud, mat-glas).
   Deze stylesheet laadt NA styles.css en ALLEEN op portaal.html, dus het
   medewerkersportaal blijft ongewijzigd. We herdefiniëren de thematokens (zodat
   token-gestuurde componenten meekleuren) en verfijnen daarna de onderdelen die
   het klantportaal gebruikt. Functies/HTML-structuur blijven gelijk. */

:root{
  /* Neutralen omgezet naar de luxe donkere wereld (goud blijft goud) */
  --bg:#06232b; --panel:#0c3743; --soft:#0e3d4a;
  --ink:#eef4f4; --muted:#a6bcc0;
  --line:rgba(255,255,255,.08); --card-line:rgba(242,179,60,.20);
  --teal:#F2B33C; --teal-mid:#F2B33C; --teal-dark:#eef4f4;
  --gold:#F2B33C; --gold2:#d99a1f;
  /* Extra tokens die de inline-stijlen kunnen gebruiken */
  --dim:#a6bcc0; --faint:#7c9599; --panel2:#0e3d4a;
  --gold-soft:rgba(242,179,60,.14); --line-gold:rgba(242,179,60,.24);
  --stage:#04171d;
}

/* Basis */
html,body{
  background:var(--bg);
  color:var(--ink);
  font-family:'Manrope',system-ui,Arial,sans-serif;
  background-image:radial-gradient(1100px 560px at 84% -8%,rgba(242,179,60,.09),transparent 60%),
                   radial-gradient(760px 460px at 4% 2%,rgba(12,85,96,.5),transparent 55%);
  background-attachment:fixed;
}
a,.link-btn{color:var(--gold)}
.link-btn{font-weight:600}
label{color:var(--dim)}

/* Koppen in de serif-huisstijl */
h1,h2,h3,.greet,.greet-es,.login-card .brand{font-family:'Cormorant Garamond',Georgia,serif}
.greet{font-weight:600;font-size:30px;line-height:1.06;color:var(--ink);letter-spacing:.005em;margin:6px 0 2px}
.section-t{
  font-family:'Manrope',sans-serif;font-weight:700;font-size:11px;letter-spacing:.16em;
  color:var(--gold);text-transform:uppercase;border-bottom:1px solid var(--line-gold);
  padding-bottom:6px;margin:20px 0 10px;
}

/* Kaarten */
.card{
  background:linear-gradient(168deg,rgba(14,61,74,.62),rgba(8,40,50,.78));
  border:1px solid var(--line);border-radius:16px;color:var(--ink);
}
.card.pad{padding:18px 18px 16px}
.card.hover:hover{box-shadow:0 14px 34px rgba(0,0,0,.35)}
.muted{color:var(--dim)}
.sub-list .row{background:rgba(255,255,255,.03);border:1px solid var(--line);border-radius:10px;color:var(--ink)}

/* Invoervelden — donker glas */
input,select,textarea{
  background:rgba(255,255,255,.04);border:1px solid var(--line);color:var(--ink);border-radius:11px;
}
input::placeholder,textarea::placeholder{color:var(--faint)}
input:focus,select:focus,textarea:focus{border-color:var(--gold);box-shadow:0 0 0 3px rgba(242,179,60,.16)}
select option{color:#123;background:#eaf1f2}

/* ============ Gouden knop in MAT GLAS (zoals de websitesfeer) ============ */
.btn{
  font-family:'Manrope',sans-serif;font-weight:700;font-size:14px;color:#0a2129;
  border:1px solid rgba(255,255,255,.30);border-radius:12px;padding:11px 18px;cursor:pointer;
  position:relative;overflow:hidden;letter-spacing:.01em;
  background:linear-gradient(135deg,rgba(247,200,106,.90),rgba(217,154,31,.94));
  -webkit-backdrop-filter:blur(9px) saturate(1.05);backdrop-filter:blur(9px) saturate(1.05);
  box-shadow:0 12px 30px rgba(242,179,60,.26),
             inset 0 1px 0 rgba(255,255,255,.45),
             inset 0 -7px 16px rgba(120,80,10,.16);
  transition:transform .2s cubic-bezier(.2,.7,.3,1),box-shadow .2s,filter .2s;
}
.btn:hover{transform:translateY(-2px);box-shadow:0 18px 40px rgba(242,179,60,.4),inset 0 1px 0 rgba(255,255,255,.5),inset 0 -7px 16px rgba(120,80,10,.16);filter:none}
/* zachte sheen die één keer over de knop trekt bij hover (subtiel, blijft mat) */
.btn:before{content:"";position:absolute;top:0;left:-140%;width:55%;height:100%;background:linear-gradient(120deg,transparent,rgba(255,255,255,.35),transparent);transform:skewX(-20deg);transition:.7s}
.btn:hover:before{left:170%}
.btn.block{width:100%}
.btn.sm{font-size:12.5px;padding:8px 13px;border-radius:10px}

/* Ghost/secundair = helder glas (geen goud) */
.btn.ghost,.btn.sec,.topbar .btn.ghost{
  background:rgba(255,255,255,.05);color:var(--gold);border:1px solid var(--line-gold);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:none;
}
.btn.ghost:hover,.btn.sec:hover{background:var(--gold-soft);border-color:var(--gold);filter:none}
.btn.ghost:before,.btn.sec:before{display:none}

/* Login-knop = dezelfde mat-glas goud */
.login-card .btn.block{
  background:linear-gradient(135deg,rgba(247,200,106,.92),rgba(217,154,31,.94));color:#0a2129;
  box-shadow:0 12px 30px rgba(242,179,60,.3),inset 0 1px 0 rgba(255,255,255,.45),inset 0 -7px 16px rgba(120,80,10,.16);
}
.login-card .btn.block:hover{filter:none}

/* Pillen — donkervriendelijk */
.pill{background:var(--gold-soft);color:var(--gold);border:1px solid var(--line-gold)}
.pill.green{background:rgba(95,190,142,.14);color:#7ed3a6;border-color:rgba(95,190,142,.35)}
.pill.amber{background:var(--gold-soft);color:var(--gold);border-color:var(--line-gold)}
.pill.red{background:rgba(214,90,80,.16);color:#f0a79e;border-color:rgba(214,90,80,.4)}
.pill.grey{background:rgba(255,255,255,.06);color:var(--dim);border-color:var(--line)}
.pill.purple{background:rgba(160,140,220,.16);color:#c9b9ff;border-color:rgba(160,140,220,.35)}

/* ============ App-schil (kop, rol, uitloggen) ============ */
.pt-appbar{
  background:rgba(4,20,25,.7);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line-gold);box-shadow:0 6px 22px rgba(0,0,0,.3);
}
.pt-appbar .app-logo{height:34px;filter:drop-shadow(0 1px 4px rgba(0,0,0,.4))}
.pt-appbar .pt-role{background:var(--gold-soft);color:var(--gold);border:1px solid var(--line-gold);font-weight:700}
.pt-appbar .pt-logout{background:rgba(255,255,255,.05);color:var(--gold);border:1px solid var(--line-gold);font-weight:600}
.pt-appbar .pt-logout:hover{background:var(--gold-soft)}
.pt-content{color:var(--ink)}

/* Tegelnavigatie */
.pt-tiles .pt-tile,.pt-tile{
  background:rgba(255,255,255,.03);border:1px solid var(--line);border-radius:14px;
}
.pt-tile:hover{box-shadow:0 10px 24px rgba(0,0,0,.3)}
.pt-tile .lb{color:var(--dim)}
.pt-tile.active{background:var(--gold-soft);border-color:var(--gold)}
.pt-tile.active .lb{color:var(--gold)}
.pt-tile .badge{background:var(--gold);color:#0a2129;box-shadow:0 2px 8px rgba(0,0,0,.4)}

/* ============ Login-kaart in donker glas ============ */
.login-card{
  background:linear-gradient(165deg,rgba(12,60,72,.9),rgba(6,28,34,.94));
  border:1px solid var(--line-gold);
  box-shadow:0 40px 90px rgba(0,0,0,.55),0 0 0 1px rgba(242,179,60,.1);
  -webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);
}
.login-card::before{background:linear-gradient(90deg,#F7C86A,#C69329)}
.login-card .brand{color:var(--ink)}
.login-card .tag{color:var(--gold)}
.login-card .greet-es{color:var(--ink);font-weight:600;font-size:26px}
.login-card .klant-link{color:var(--gold)}

/* Toast donker */
.toast{background:rgba(4,20,25,.94);color:var(--ink);border:1px solid var(--line-gold)}