/* ===========================================================
   HELDERMAN ICT — Core Design System
   Eén bron voor kleuren, typografie en herbruikbare componenten.
   Importeer dit bestand op elke pagina vóór pagina-specifieke CSS.
   =========================================================== */

/* ---------- Design tokens ---------- */
:root{
  --navy:#0A2540;
  --navy-deep:#071A2E;
  --amber:#F5A623;
  --amber-deep:#D6890A;
  --canvas:#FAFAF8;
  --ink:#1C1C1C;
  --ink-soft:#52585F;
  --green:#1B7A5C;
  --green-bg:#E8F4EE;
  --amber-bg:#FBF1DD;
  --blue-bg:#E5EEF7;
  --blue:#2563A8;
  --red:#B23B3B;
  --red-bg:#FBEAEA;
  --line:#E8E5DD;
  --white:#FFFFFF;
}

/* ---------- Reset & basis ---------- */
*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
body{
  font-family:'Inter', sans-serif;
  background:var(--canvas);
  color:var(--ink);
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3{
  font-family:'Fraunces', serif;
  font-weight:600;
  letter-spacing:-0.01em;
  color:var(--navy);
}
.mono{font-family:'JetBrains Mono', monospace;}
a{color:inherit; text-decoration:none;}
button{font-family:inherit; cursor:pointer; border:none; background:none;}
img{max-width:100%; display:block;}
.wrap{max-width:1180px; margin:0 auto; padding:0 28px;}

a:focus-visible, button:focus-visible{
  outline:3px solid var(--amber);
  outline-offset:3px;
  border-radius:4px;
}
@media (prefers-reduced-motion: reduce){
  *{animation-duration:0.01ms !important; animation-iteration-count:1 !important; transition-duration:0.01ms !important; scroll-behavior:auto !important;}
}

/* ===========================================================
   STATUSBALK (filebalk-equivalent)
   Gebruik: platformbreed/anoniem op publieke pagina's,
   persoonlijk-niet-systeemdata op portaalpagina's.
   =========================================================== */
.statusbar{
  background:var(--navy-deep);
  color:#C9D4DF;
  font-size:13.5px;
  padding:9px 0;
  border-bottom:1px solid rgba(255,255,255,0.08);
}
.statusbar .wrap{display:flex; align-items:center; gap:10px; flex-wrap:wrap;}
.statusbar .dot{width:7px; height:7px; border-radius:50%; background:#4ADE80; box-shadow:0 0 0 3px rgba(74,222,128,0.18); flex-shrink:0;}
.statusbar .dot.amber{background:var(--amber); box-shadow:0 0 0 3px rgba(245,166,35,0.18);}
.statusbar strong{color:var(--white); font-weight:600;}
.statusbar .sep{opacity:0.35; margin:0 2px;}
.statusbar .right{margin-left:auto; opacity:0.75; font-size:12.5px;}
.statusbar a.inline-link{color:var(--amber); font-weight:600;}

/* ===========================================================
   HEADER / NAVIGATIE
   =========================================================== */
header.main{background:var(--navy); padding:18px 0;}
header.main .wrap{display:flex; align-items:center; justify-content:space-between; gap:24px;}
.logo{display:flex; align-items:center; gap:11px; color:var(--white);}
.logo-mark{
  width:38px; height:38px; border-radius:9px;
  background:linear-gradient(150deg, var(--amber), var(--amber-deep));
  display:flex; align-items:center; justify-content:center;
  font-family:'Fraunces', serif; font-weight:700; font-size:19px;
  color:var(--navy-deep); flex-shrink:0;
}
.logo-text{font-family:'Fraunces', serif; font-weight:600; font-size:18px; line-height:1.15;}
.logo-text span{display:block; font-family:'Inter', sans-serif; font-weight:500; font-size:11px; color:#9FB1C2; letter-spacing:0.03em; text-transform:uppercase; margin-top:2px;}

nav.primary{display:flex; gap:30px;}
nav.primary a{color:#D6E0EA; font-size:14.5px; font-weight:500; padding:6px 0; border-bottom:2px solid transparent; transition:border-color 0.15s, color 0.15s;}
nav.primary a.active{color:var(--white); border-color:var(--amber);}
nav.primary a:hover{color:var(--white); border-color:var(--amber);}

.header-actions{display:flex; align-items:center; gap:14px;}
.btn-ghost-light{
  color:var(--white); font-size:14px; font-weight:500;
  padding:9px 16px; border:1px solid rgba(255,255,255,0.25); border-radius:7px;
  transition:border-color 0.15s, background 0.15s;
}
.btn-ghost-light:hover{border-color:rgba(255,255,255,0.6); background:rgba(255,255,255,0.05);}
.btn-ghost-light.amber-fill{background:var(--amber); border-color:var(--amber); color:var(--navy-deep); font-weight:600;}

.avatar-btn{
  width:38px; height:38px; border-radius:50%;
  background:var(--amber); color:var(--navy-deep);
  font-family:'Fraunces',serif; font-weight:700; font-size:14px;
  display:flex; align-items:center; justify-content:center;
}
.bell-btn{
  width:38px; height:38px; border-radius:9px;
  border:1px solid rgba(255,255,255,0.2); color:var(--white);
  display:flex; align-items:center; justify-content:center;
  position:relative; font-size:16px;
}
.bell-btn .badge{
  position:absolute; top:-4px; right:-4px;
  width:16px; height:16px; border-radius:50%;
  background:var(--amber); color:var(--navy-deep);
  font-size:9.5px; font-weight:700;
  display:flex; align-items:center; justify-content:center;
  border:2px solid var(--navy);
}

@media (max-width:880px){
  nav.primary{display:none;}
}

/* ===========================================================
   METER-STRIP (signature element)
   Platformbreed = anonieme aggregaten (homepage).
   Persoonlijk = alleen na uitgevoerde APK / toestemming (dashboard).
   =========================================================== */
.meter-strip{background:var(--navy-deep); border-top:1px solid rgba(255,255,255,0.08); padding:26px 0 30px;}
.meter-grid{display:grid; grid-template-columns:repeat(4, 1fr); gap:0;}
.meter-grid.meter-grid-3{grid-template-columns:repeat(3, 1fr);}
.meter-item{padding:0 28px; border-left:1px solid rgba(255,255,255,0.09); display:flex; flex-direction:column; gap:4px;}
.meter-item:first-child{border-left:none; padding-left:0;}
.meter-label{font-size:11.5px; color:#8FA3B5; text-transform:uppercase; letter-spacing:0.05em; font-weight:500;}
.meter-value{font-size:26px; font-weight:700; color:var(--white); display:flex; align-items:baseline; gap:6px;}
.meter-value .unit{font-size:13px; font-weight:500; color:#8FA3B5;}
.meter-bar-track{width:100%; height:5px; background:rgba(255,255,255,0.1); border-radius:3px; overflow:hidden; margin-top:6px;}
.meter-bar-fill{height:100%; border-radius:3px; background:linear-gradient(90deg, var(--green), #4ADE80);}
.meter-empty-note{font-size:13px; color:#AFC0CF; padding:6px 0;}
.meter-empty-note strong{color:var(--white);}

@media (max-width:900px){
  .meter-grid{grid-template-columns:repeat(2,1fr); row-gap:22px;}
  .meter-item:nth-child(3){border-left:none; padding-left:0;}
  .meter-grid.meter-grid-3{grid-template-columns:1fr; row-gap:18px;}
  .meter-grid.meter-grid-3 .meter-item{border-left:none; padding-left:0;}
}

/* ===========================================================
   PANELS (dashboard/portaal bouwsteen)
   =========================================================== */
.panel{
  background:var(--white);
  border:1px solid var(--line);
  border-radius:14px;
  padding:26px 26px 22px;
  margin-bottom:24px;
}
.panel-head{display:flex; justify-content:space-between; align-items:center; margin-bottom:20px;}
.panel-head h2{font-size:18.5px;}
.panel-head .see-all{font-size:13px; font-weight:600; color:var(--navy); border-bottom:2px solid var(--amber); padding-bottom:1px;}

/* ---------- Tegels (diensten-overzicht) ---------- */
.tegel{
  background:var(--white);
  border:1px solid var(--line);
  border-radius:14px;
  padding:28px 24px;
  display:flex; flex-direction:column; gap:14px;
  transition:border-color 0.18s, box-shadow 0.18s, transform 0.18s;
}
.tegel:hover{border-color:var(--amber); box-shadow:0 16px 32px -14px rgba(10,37,64,0.18); transform:translateY(-3px);}
.tegel-icon{
  width:44px; height:44px; border-radius:10px;
  background:#FBF1DD; color:var(--amber-deep);
  display:flex; align-items:center; justify-content:center; font-size:20px;
}
.tegel h3{font-size:17.5px; margin-bottom:2px;}
.tegel p{font-size:13.5px; color:var(--ink-soft); line-height:1.5; flex:1;}
.tegel .tegel-link{font-size:13.5px; font-weight:600; color:var(--navy); display:flex; align-items:center; gap:6px;}
.tegel:hover .tegel-link{color:var(--amber-deep);}

/* ---------- Status pills ---------- */
.pill{font-size:11.5px; font-weight:600; padding:4px 10px; border-radius:20px; white-space:nowrap; flex-shrink:0;}
.pill.open{background:var(--amber-bg); color:var(--amber-deep);}
.pill.progress{background:var(--blue-bg); color:var(--blue);}
.pill.done{background:var(--green-bg); color:var(--green);}
.pill.geannuleerd{background:#F2F4F6; color:var(--ink-soft);}

/* ---------- Tier-chip (partner-niveau badge) ---------- */
.pc-tier{display:inline-flex; align-items:center; gap:5px; font-size:11px; font-weight:700; padding:3px 9px; border-radius:6px;}
.pc-tier.elite{background:#FBF1DD; color:var(--amber-deep);}
.pc-tier.plus{background:var(--blue-bg); color:var(--blue);}
.pc-tier.basis{background:#F2F4F6; color:var(--ink-soft);}

/* ---------- Audience badges (Spreekuur) ---------- */
.audience-badge{
  display:inline-flex; align-items:center; gap:8px;
  padding:7px 14px 7px 7px; border-radius:24px;
  font-size:13px; font-weight:600; margin-bottom:18px;
}
.audience-badge .dot-icon{width:22px; height:22px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:11px; flex-shrink:0;}
.audience-badge.bezoeker{background:#F2F4F6; color:var(--ink-soft);}
.audience-badge.bezoeker .dot-icon{background:#D8DCE1; color:var(--ink-soft);}
.audience-badge.geregistreerd{background:var(--blue-bg); color:var(--blue);}
.audience-badge.geregistreerd .dot-icon{background:var(--blue); color:var(--white);}
.audience-badge.lid{background:var(--amber-bg); color:var(--amber-deep);}
.audience-badge.lid .dot-icon{background:var(--amber); color:var(--navy-deep);}

.audience-note{
  font-size:13px; color:var(--ink-soft); margin-bottom:24px;
  padding:12px 16px; background:var(--white); border:1px solid var(--line); border-radius:10px;
  display:flex; gap:10px; align-items:flex-start;
}
.audience-note .ic{flex-shrink:0; font-size:14px; margin-top:1px;}

/* ---------- Empty states ---------- */
.empty-block{text-align:center; padding:34px 20px;}
.empty-icon{
  width:52px; height:52px; border-radius:14px;
  background:#F2F4F6; color:var(--ink-soft);
  display:flex; align-items:center; justify-content:center; font-size:22px;
  margin:0 auto 16px;
}
.empty-block h4{font-size:15px; color:var(--navy); margin-bottom:6px; font-family:'Fraunces',serif; font-weight:600;}
.empty-block p{font-size:13px; color:var(--ink-soft); line-height:1.55; max-width:300px; margin:0 auto 18px;}
.empty-cta{display:inline-flex; align-items:center; gap:7px; background:var(--amber); color:var(--navy-deep); font-size:13.5px; font-weight:600; padding:10px 18px; border-radius:8px;}
.empty-cta.ghost{background:transparent; color:var(--navy); border:1px solid var(--line);}

/* ---------- Score panel + ring ---------- */
.score-panel{
  background:linear-gradient(160deg, var(--navy), var(--navy-deep));
  border:none; color:var(--white); text-align:center; padding:32px 24px;
}
.score-ring{width:140px; height:140px; margin:0 auto 18px; position:relative;}
.score-ring svg{transform:rotate(-90deg);}
.score-ring-num{position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center;}
.score-ring-num .big{font-family:'Fraunces',serif; font-weight:700; font-size:34px;}
.score-ring-num .small{font-size:11px; color:#AFC0CF; text-transform:uppercase; letter-spacing:0.05em;}
.score-panel h3{color:var(--white); font-size:16px; margin-bottom:6px;}
.score-panel p{color:#AFC0CF; font-size:13px; line-height:1.5; margin-bottom:18px;}
.score-cta{display:inline-flex; align-items:center; gap:6px; background:var(--amber); color:var(--navy-deep); font-size:13.5px; font-weight:600; padding:10px 18px; border-radius:8px;}

.score-panel.empty-score{text-align:center;}
.empty-ring{
  width:140px; height:140px; margin:0 auto 18px; border-radius:50%;
  border:3px dashed rgba(255,255,255,0.22);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
}
.empty-ring .big{font-family:'Fraunces',serif; font-weight:700; font-size:28px; color:rgba(255,255,255,0.5);}
.empty-ring .small{font-size:10.5px; color:#8FA3B5; text-transform:uppercase; letter-spacing:0.04em; margin-top:4px; max-width:90px; line-height:1.3;}

/* ---------- Mini action list (aanbevolen acties) ---------- */
.action-mini{
  display:flex; align-items:center; gap:14px; padding:16px;
  border:1px solid var(--line); border-radius:10px; margin-bottom:10px;
  transition:border-color 0.15s;
}
.action-mini:last-child{margin-bottom:0;}
.action-mini:hover{border-color:var(--amber);}
.action-mini .num{
  font-family:'JetBrains Mono', monospace; font-weight:700; font-size:13px;
  color:var(--amber-deep); background:var(--amber-bg);
  width:28px; height:28px; border-radius:7px;
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
.action-mini p{font-size:13.5px; font-weight:500; color:var(--ink); flex:1;}
.action-mini .arrow{color:var(--ink-soft); font-size:15px;}

/* ---------- Footer ---------- */
footer.site-footer{background:var(--navy-deep); color:#9FB1C2; padding:48px 0 28px; font-size:13.5px;}
footer.site-footer .wrap{display:flex; justify-content:space-between; flex-wrap:wrap; gap:28px;}
footer.site-footer .fcol h4{color:var(--white); font-size:13px; font-weight:600; margin-bottom:12px; text-transform:uppercase; letter-spacing:0.04em;}
footer.site-footer .fcol a{display:block; margin-bottom:8px; color:#9FB1C2;}
footer.site-footer .fcol a:hover{color:var(--amber);}
footer.site-footer .bottom{margin-top:36px; padding-top:20px; border-top:1px solid rgba(255,255,255,0.08); font-size:12.5px; color:#6E8195;}
footer.simple{background:var(--navy-deep); color:#6E8195; padding:24px 0; font-size:12.5px; text-align:center;}

/* ===========================================================
   DEMO-SWITCHER
   Alleen voor ontwerp-/staging-doeleinden — verwijderen of
   achter een admin-flag zetten vóór productie.
   =========================================================== */
.demo-switcher{background:var(--navy-deep); padding:10px 0; border-bottom:1px solid rgba(255,255,255,0.08);}
.demo-switcher .wrap{display:flex; align-items:center; gap:10px; flex-wrap:wrap;}
.demo-switcher .label{color:#8FA3B5; font-size:12px; text-transform:uppercase; letter-spacing:0.05em; font-weight:500;}
.demo-btn{
  font-size:12.5px; font-weight:600; padding:6px 13px; border-radius:20px;
  border:1px solid rgba(255,255,255,0.18); background:transparent; color:#C9D4DF;
  font-family:inherit; cursor:pointer; transition:all 0.15s;
}
.demo-btn.active{background:var(--amber); border-color:var(--amber); color:var(--navy-deep);}
.demo-btn:not(.active):hover{border-color:rgba(255,255,255,0.4); color:var(--white);}

/* ===== Inlog-dropdown (header) ===== */
.inlog-dropdown{
  position:relative;
  display:inline-block;
}
.inlog-trigger{
  cursor:pointer;
  border:none;
  font-family:inherit;
  background:transparent;
  padding:0;
  margin:0;
}
.inlog-menu{
  display:none;
  position:absolute;
  top:calc(100% + 10px);
  right:0;
  background:#FFFFFF !important;
  border:1px solid #E8E5DD;
  border-radius:12px;
  box-shadow:0 12px 32px -8px rgba(10,37,64,0.25), 0 2px 8px rgba(0,0,0,0.08);
  min-width:260px;
  z-index:9999;
  overflow:hidden;
}
.inlog-menu.open{
  display:block;
  animation:fadeInMenu .15s ease;
}
@keyframes fadeInMenu{
  from{opacity:0; transform:translateY(-6px);}
  to{opacity:1; transform:translateY(0);}
}
.inlog-optie{
  display:flex !important;
  align-items:center !important;
  gap:12px;
  padding:14px 16px;
  text-decoration:none !important;
  color:#1C1C1C !important;
  background:#FFFFFF !important;
  border-bottom:1px solid #E8E5DD;
  transition:background .1s;
}
.inlog-optie:last-child{border-bottom:none;}
.inlog-optie:hover{background:#FAFAF8 !important;}
.io-ic{
  font-size:22px;
  flex-shrink:0;
  width:36px;
  height:36px;
  background:#F0F4F8;
  border-radius:8px;
  display:flex;
  align-items:center;
  justify-content:center;
}
.io-naam{
  font-size:13.5px;
  font-weight:600;
  color:#0A2540 !important;
  margin-bottom:3px;
  display:block;
}
.io-sub{
  font-size:11.5px;
  color:#52585F !important;
  display:block;
  line-height:1.4;
}