/* ===========================================================================
   Sessie-dashboard basis-stijl.
   Design-tokens 1-op-1 uit de Claude Design-handoff "ExCo Design Kaart"
   (Univé-groen, glass/Horizon). Per klant te swappen via [data-theme].
   De 8-scherm-specifieke layout staat in present.css.
   =========================================================================== */

:root,
[data-theme="unive"] {
  /* Officiële Univé-huisstijl: Kiwi #005e2b, Olijf #008a3a, Limoen #2dc26b,
     tekst #505e50, Kers #e40531 (rood), Kokos #b04f00 (oranje). */
  --bg:#eaf3ea;
  --panel:#ffffff;
  --ink:#1d2b22;
  --muted:#5a6b62;
  --line:#e3ebe4;
  --accent:#008a3a;          /* Olijf */
  --accent-hover:#00702f;
  --accent-soft:#e4f2e8;
  --accent-strong:#005e2b;   /* Kiwi: wit erop haalt WCAG AA, ook als tekst op wit */
  --coral:#e40531;
  --coral-soft:#fce7ec;
  --green:#008a3a;
  --green-soft:#e4f2e8;
  --orange:#b04f00;          /* Kokos */
  --orange-soft:#f6ece2;
  --blue:#2563eb;
  --blue-soft:#e7eefb;
  --red:#e40531;             /* Kers */
  --red-soft:#fce7ec;
  --shadow:0 1px 2px rgba(20,60,35,.04),0 18px 40px -12px rgba(20,60,35,.16);
  --radius:18px;
  --bg-grad-a:#cdebd3;
  --bg-grad-b:#5fbf7e;
  --bg-grad-c:#0f7e3c;
  font-synthesis:none;
}

/* Default IMPACT-thema (Horizon indigo) voor andere klanten. */
[data-theme="impact"] {
  --bg:#eef0fb;
  --ink:#16253a;
  --muted:#5a6b80;
  --line:#e6e8f2;
  --accent:#422AFB;
  --accent-hover:#3621c9;
  --accent-soft:#e7e4fe;
  --accent-strong:#3621c9;
  --green:#16a34a; --green-soft:#e3f5ea;
  --orange:#d97706; --orange-soft:#f8efe1;
  --blue:#2563eb; --blue-soft:#e7eefb;
  --red:#e11d48; --red-soft:#ffe4ea;
  --bg-grad-a:#b9b2ff;
  --bg-grad-b:#6f5cff;
  --bg-grad-c:#422AFB;
}

*{box-sizing:border-box;margin:0;padding:0;}
html,body{height:100%;}

body{
  font-family:'Open Sans','Inter',-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  background-color:var(--bg-grad-c);
  background-image:radial-gradient(circle at 20% 20%,var(--bg-grad-a) 0%,var(--bg-grad-b) 50%,var(--bg-grad-c) 100%);
  background-attachment:fixed;
  color:var(--ink);
  -webkit-font-smoothing:antialiased;
  line-height:1.5;
  letter-spacing:-.01em;
  min-height:100vh;
}

/* ---------- Gedeelde componenten ---------- */
.card{
  background:var(--panel);
  border:1px solid rgba(255,255,255,.6);
  border-radius:var(--radius);
  box-shadow:0 22px 48px -20px rgba(0,80,40,.30),0 2px 6px rgba(0,60,30,.05);
}

.muted{color:var(--muted);}
.eyebrow{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--accent-strong);font-weight:700;}

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:12px 20px;border-radius:11px;cursor:pointer;
  font-family:inherit;font-size:14px;font-weight:600;
  border:1px solid var(--line);background:#fff;color:var(--ink);
  text-decoration:none;transition:background .18s,color .18s,border-color .18s,transform .12s;
}
.btn:hover{background:var(--bg);transform:translateY(-1px);}
.btn-primary{background:var(--accent-strong);color:#fff;border-color:var(--accent-strong);}
.btn-primary:hover{filter:brightness(.93);}

/* Toegankelijkheid: visueel verbergen zonder uit de a11y-tree te halen. */
.visually-hidden{
  position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0;
}
/* Zichtbare toetsenbordfocus overal. */
:focus-visible{outline:3px solid var(--accent-strong);outline-offset:2px;}
.opt:has(:focus-visible){outline:3px solid var(--accent-strong);outline-offset:2px;}

/* Vaste, discrete merk-footer rechtsonder op elk scherm. */
.powered-by{
  position:fixed;right:14px;bottom:12px;z-index:60;
  display:flex;align-items:center;gap:8px;padding:6px 12px;border-radius:999px;
  background:rgba(16,37,26,.30);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  color:#fff;font-size:11px;font-weight:600;pointer-events:none;
}
.powered-by .pb-logo{height:15px;width:auto;display:block;opacity:.95;}
@media(max-width:560px){.powered-by span{display:none;} .powered-by{padding:6px;}}
/* De merk-footer hoort op de projectie + console, niet op de prive-telefoon (overlapt de stemknop). */
.vote-page .powered-by{display:none;}

/* ---------- Auth / login ---------- */
.auth-wrap{
  min-height:100vh;display:grid;place-items:center;padding:24px;
}
.auth-card{
  width:100%;max-width:420px;padding:38px 34px;
}
.auth-brand h1{font-size:26px;font-weight:600;letter-spacing:-.02em;margin-top:6px;}
.auth-brand .muted{margin-top:8px;font-size:14px;}
.auth-form{display:flex;flex-direction:column;gap:10px;margin-top:24px;}
.auth-form label{font-size:12.5px;font-weight:600;color:var(--muted);}
.auth-form input{
  font-family:inherit;font-size:16px;color:var(--ink);
  padding:12px 14px;border:1px solid var(--line);border-radius:11px;outline:none;
  transition:border-color .18s,box-shadow .18s;background:#fff;
}
.auth-form input:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft);}
.auth-form .btn{margin-top:6px;}
.auth-error{
  margin-top:18px;padding:11px 14px;border-radius:11px;
  background:var(--red-soft);color:var(--red);font-size:13.5px;font-weight:600;
}