/* ==================================================================
   Beheerdashboard in het design van chatunda.com (8 september 2026).
   Laadt ná style.css (herkleurd naar dezelfde tokens) en zet typografie,
   vormen, de kop met het merk en de stille sluiers op het inlogscherm
   erbovenop. Geen vervaging en geen achtergrondfilters (die houden de GPU bezig).
================================================================== */
:root{--ease:cubic-bezier(0.16, 1, 0.3, 1);--ease-2:cubic-bezier(0.65, 0, 0.35, 1);--line-2:#37352F;--accent:#14614F;--accent-hover:#1A7560}
body{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
::selection{background:rgba(46,156,127,.35)}
:focus-visible{outline:2px solid var(--primary);outline-offset:3px}

/* ── Merk ── */
.brand{display:inline-flex;align-items:center;gap:.6rem;font-family:var(--font-display);font-size:1.45rem;letter-spacing:-0.01em;line-height:1;color:var(--text);text-decoration:none}
.brand .mark{width:1.5em;height:1.5em;flex:none;display:block}
.header-badge{background:transparent;color:var(--gold-2);border:1px solid rgba(201,169,110,.5);font-weight:500;letter-spacing:.08em;text-transform:uppercase;font-size:.6875rem;padding:3px 10px}
.dashboard-header{background:rgba(19,19,18,.96);border-bottom:1px solid var(--border);padding:14px 32px}

/* ── Inlogscherm met sluiers ── */
#login-screen{position:relative;background:var(--bg);overflow:hidden}
.dash-sky{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none;opacity:.6}
.dash-sky .veil{position:absolute;inset:-12%;will-change:transform;backface-visibility:hidden}
.dash-sky .veil-1{background:
  radial-gradient(45% 55% at 18% 18%, rgba(20,97,79,.55) 0%, rgba(20,97,79,.18) 45%, transparent 72%),
  radial-gradient(38% 48% at 62% 92%, rgba(46,156,127,.22) 0%, rgba(46,156,127,.08) 45%, transparent 72%);
  animation:dashVeil1 46s var(--ease-2) infinite alternate}
.dash-sky .veil-2{background:
  radial-gradient(40% 52% at 84% 16%, rgba(46,156,127,.3) 0%, rgba(46,156,127,.1) 45%, transparent 72%),
  radial-gradient(34% 40% at 36% 64%, rgba(201,169,110,.16) 0%, rgba(201,169,110,.05) 45%, transparent 72%);
  animation:dashVeil2 58s var(--ease-2) infinite alternate}
@keyframes dashVeil1{to{transform:translate(5%,4%) scale(1.08)}}
@keyframes dashVeil2{to{transform:translate(-6%,-4%) scale(1.06)}}
@media (prefers-reduced-motion:reduce){.dash-sky .veil{animation:none}}
.login-card{position:relative;z-index:1;border-radius:20px;padding:44px 40px}
.login-brand{display:flex;justify-content:center;margin-bottom:1.4rem}
.login-brand .brand{font-size:1.9rem}
.login-header{margin-bottom:1.6rem}
.login-header h1{font-family:var(--font-display);font-weight:400;font-size:2rem;letter-spacing:-0.015em;margin-top:.5rem}

/* ── Typografie ── */
.eyebrow{display:inline-flex;align-items:center;gap:.6rem;font-size:.75rem;font-weight:500;letter-spacing:.09em;text-transform:uppercase;color:var(--text-muted)}
.eyebrow .dot{width:6px;height:6px;border-radius:50%;background:var(--gold);flex:none;position:relative}
.eyebrow .dot::after{content:"";position:absolute;inset:-1px;border-radius:50%;border:1px solid rgba(201,169,110,.55);animation:dashPing 2.4s var(--ease-2) infinite}
@keyframes dashPing{0%{transform:scale(1);opacity:.9}70%{transform:scale(3.2);opacity:0}100%{transform:scale(3.2);opacity:0}}
.section-header h2,.detail-header h2,.completion-panel h2,.modal-header h2,.modal-header h3,.analytics-header h2,.monitoring-header h2{font-family:var(--font-display);font-weight:400;font-size:1.75rem;letter-spacing:-0.015em}
.card h3{font-weight:500;font-size:1.0625rem;letter-spacing:-0.005em}
.stat-value{font-family:var(--font-display);font-weight:400;font-size:2rem;letter-spacing:-0.01em}
.stat-label,.info-label,.client-table th,.summary-label,.completion-label{letter-spacing:.06em;text-transform:uppercase;font-size:.6875rem;font-weight:500;color:var(--text-muted)}
.stat-card{border-left-width:2px;border-radius:14px}

/* ── Knoppen: pilvorm, groen = klikbaar ── */
.btn{border-radius:999px;font-weight:500;padding:9px 18px;transition:background-color .25s var(--ease), border-color .25s var(--ease), color .25s var(--ease), transform .3s var(--ease)}
.btn-sm{padding:5px 12px}
.btn-primary{background:var(--accent);border:1px solid var(--accent);color:#fff}
.btn-primary:hover{background:var(--accent-hover);border-color:var(--accent-hover)}
.btn-outline{border-color:var(--line-2);color:var(--text)}
.btn-outline:hover{background:transparent;border-color:var(--text)}
.btn-ghost{border:1px solid transparent}
.btn-ghost:hover{background:transparent;border-color:var(--line-2);color:var(--text)}
.btn-danger{background:transparent;color:var(--danger);border:1px solid rgba(224,122,95,.5)}
.btn-danger:hover{background:rgba(224,122,95,.12)}

/* ── Velden, kaarten, tabellen ── */
input[type="text"],input[type="url"],input[type="email"],input[type="number"],input[type="password"],textarea,select{
  background:var(--bg);border:1px solid var(--line-2);color:var(--text);border-radius:10px;font-family:var(--font-body);
  transition:border-color .25s var(--ease), box-shadow .25s var(--ease)}
input:focus,textarea:focus,select:focus{border-color:var(--primary);box-shadow:0 0 0 3px rgba(46,156,127,.18);outline:none}
::placeholder{color:#6B675F}
select optgroup{background:var(--bg-card)}
.card,.login-card,.table-container,.detail-container>.card,.completion-panel,.log-container{border-color:var(--border)}
.card:hover{border-color:var(--line-2)}
.client-table th{background:transparent;border-bottom:1px solid var(--line-2)}
.client-table tbody tr:hover{background:rgba(46,156,127,.05)}
.status-badge{border-radius:999px;font-weight:500}
.upload-area,.detail-upload-zone{border-radius:16px;border-style:dashed;border-color:var(--line-2)}
.upload-area:hover,.detail-upload-zone:hover{border-color:var(--primary)}
.step-number{border-radius:50%;font-family:var(--font-display)}
.embed-code,.log-output,.monospace{font-family:"SF Mono", Menlo, Consolas, monospace}
details summary{color:var(--text-muted)}