/**
 * ep_huisstijl.css — Energiepiloot Design System
 * Importeer dit bestand in elke pagina als eerste stylesheet.
 * Gebruik altijd de CSS variabelen, nooit hardcoded kleuren.
 */

/* ── GOOGLE FONTS ─────────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:opsz,wght@9..40,300;9..40,400;9..40,500;9..40,600;9..40,700&family=DM+Mono:wght@400;500&display=swap');

/* ── DESIGN TOKENS ───────────────────────────────────────────── */
:root {
  /* Achtergronden */
  --ep-bg:            #0A0F1E;   /* Marine — app achtergrond */
  --ep-bg-deep:       #070B12;   /* Diep donker — menu, modals */
  --ep-card:          #111827;   /* Kaart oppervlak */
  --ep-card-alt:      rgba(255,255,255,0.04); /* Subtiele kaart op marine */
  --ep-card-hover:    rgba(255,255,255,0.07);

  /* Borders */
  --ep-border:        rgba(255,255,255,0.07);
  --ep-border-mid:    rgba(255,255,255,0.12);
  --ep-border-strong: rgba(255,255,255,0.18);

  /* Merk kleuren */
  --ep-paars:         #7F77DD;   /* Primair accent — paars */
  --ep-paars-licht:   #B0AAFF;
  --ep-paars-dim:     rgba(127,119,221,0.15);
  --ep-paars-border:  rgba(127,119,221,0.3);

  --ep-teal:          #4CC9A0;   /* Succes — teruglevering, groen */
  --ep-teal-donker:   #1D9E75;
  --ep-teal-dim:      rgba(76,201,160,0.15);
  --ep-teal-border:   rgba(76,201,160,0.3);

  /* Functionele kleuren */
  --ep-geel:          #F4B942;   /* Waarschuwing, gas */
  --ep-geel-dim:      rgba(244,185,66,0.12);
  --ep-oranje:        #F06535;   /* Gas verbruik */
  --ep-oranje-dim:    rgba(240,101,53,0.12);
  --ep-rood:          #F05252;   /* Afname, fout */
  --ep-rood-dim:      rgba(240,82,82,0.12);

  /* Typografie */
  --ep-tekst:         #F0EEFF;   /* Primaire tekst */
  --ep-tekst-mid:     rgba(240,238,255,0.55);
  --ep-tekst-sub:     rgba(240,238,255,0.35);
  --ep-tekst-dim:     rgba(240,238,255,0.18);

  /* Fonts */
  --ep-font:          'DM Sans', -apple-system, sans-serif;
  --ep-font-mono:     'DM Mono', monospace;

  /* Radii */
  --ep-radius:        18px;
  --ep-radius-md:     12px;
  --ep-radius-sm:     8px;
  --ep-radius-pill:   99px;

  /* Navigatie */
  --ep-nav-hoogte:    68px;
  --ep-safe-bottom:   env(safe-area-inset-bottom, 0px);
}

/* ── RESET & BASE ─────────────────────────────────────────────── */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  -webkit-tap-highlight-color: transparent;
}

html, body {
  background: var(--ep-bg);
  color: var(--ep-tekst);
  font-family: var(--ep-font);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overscroll-behavior: none;
}

/* ── LOGO COMPONENT ───────────────────────────────────────────── */
/**
 * Gebruik: <div class="ep-logo"></div>
 * Varianten: ep-logo--groot, ep-logo--licht
 */
.ep-logo {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  text-decoration: none;
}
.ep-logo__icon {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ep-logo__tekst {
  overflow: hidden;
  position: relative;
  border-radius: 3px;
}
.ep-logo__naam {
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.5px;
  color: var(--ep-tekst);
  white-space: nowrap;
}
.ep-logo__naam span { color: var(--ep-paars); }

.ep-logo--groot .ep-logo__naam { font-size: 26px; letter-spacing: -1px; }
.ep-logo--licht .ep-logo__naam { color: #1A1A2E; }
.ep-logo--licht .ep-logo__naam span { color: var(--ep-paars); }

/* Lichtschits */
@keyframes ep-schits {
  0%   { left: -60px; opacity: 0; }
  20%  { opacity: 1; }
  80%  { opacity: 1; }
  100% { left: 110%; opacity: 0; }
}
.ep-logo__schits {
  position: absolute;
  top: 0; left: -60px;
  width: 40px; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
  transform: skewX(-20deg);
  animation: ep-schits 3s ease-in-out infinite;
  pointer-events: none;
}

/* ── BOTTOM NAVIGATIE ─────────────────────────────────────────── */
.ep-nav {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  height: calc(var(--ep-nav-hoogte) + var(--ep-safe-bottom));
  padding-bottom: var(--ep-safe-bottom);
  background: rgba(7,11,18,0.9);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border-top: 0.5px solid var(--ep-border);
  display: flex;
  align-items: flex-start;
  justify-content: space-around;
  padding-top: 10px;
  z-index: 100;
}
.ep-nav__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  text-decoration: none;
  color: var(--ep-tekst-sub);
  padding: 4px 12px;
  border-radius: var(--ep-radius-md);
  transition: color .15s;
}
.ep-nav__item.actief { color: var(--ep-paars-licht); }
.ep-nav__item svg { width: 22px; height: 22px; }
.ep-nav__label { font-size: 10px; font-weight: 600; letter-spacing: .3px; }

/* ── KAARTEN ──────────────────────────────────────────────────── */
.ep-kaart {
  background: var(--ep-card-alt);
  border: 0.5px solid var(--ep-border);
  border-radius: var(--ep-radius);
  padding: 16px;
}
.ep-kaart--opgeheven {
  background: var(--ep-card);
  border-color: var(--ep-border-mid);
}

/* ── KNOPPEN ──────────────────────────────────────────────────── */
.ep-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 13px 24px;
  border-radius: var(--ep-radius-md);
  font-size: 15px;
  font-weight: 700;
  font-family: var(--ep-font);
  border: none;
  cursor: pointer;
  transition: opacity .15s;
  text-decoration: none;
}
.ep-btn:active { opacity: .8; }

.ep-btn--primair {
  background: var(--ep-paars);
  color: #fff;
}
.ep-btn--succes {
  background: var(--ep-teal);
  color: #fff;
}
.ep-btn--ghost {
  background: var(--ep-card-alt);
  border: 0.5px solid var(--ep-border-mid);
  color: var(--ep-tekst);
}
.ep-btn--vol { width: 100%; }

/* ── TYPOGRAFIE HELPERS ───────────────────────────────────────── */
.ep-sectielabel {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .8px;
  text-transform: uppercase;
  color: var(--ep-tekst-sub);
}
.ep-waarde-groot {
  font-size: 48px;
  font-weight: 700;
  letter-spacing: -2px;
  line-height: 1;
}
.ep-waarde-mid {
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -.8px;
}

/* ── STATUS INDICATOREN ───────────────────────────────────────── */
@keyframes ep-pulse {
  0%   { transform: scale(.9); opacity: .8; }
  70%  { transform: scale(1.5); opacity: 0; }
  100% { transform: scale(.9); opacity: 0; }
}
.ep-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 600;
}
.ep-status__stip {
  position: relative;
  width: 8px; height: 8px;
}
.ep-status__stip::before,
.ep-status__stip::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: var(--ep-kleur, var(--ep-tekst-dim));
}
.ep-status__stip::after {
  animation: ep-pulse 2s ease-out infinite;
}
.ep-status--live  { --ep-kleur: var(--ep-teal);  color: var(--ep-teal); }
.ep-status--fout  { --ep-kleur: var(--ep-rood);  color: var(--ep-rood); }
.ep-status--wacht { --ep-kleur: var(--ep-geel);  color: var(--ep-geel); }

/* ── BADGES ───────────────────────────────────────────────────── */
.ep-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  border-radius: var(--ep-radius-pill);
  font-size: 12px;
  font-weight: 600;
}
.ep-badge--afname    { background: var(--ep-rood-dim);  color: var(--ep-rood); }
.ep-badge--terug     { background: var(--ep-teal-dim);  color: var(--ep-teal); }
.ep-badge--neutraal  { background: var(--ep-border);    color: var(--ep-tekst-sub); }

/* ── INPUTS ───────────────────────────────────────────────────── */
.ep-input-wrap {
  display: flex;
  align-items: center;
  background: var(--ep-card-alt);
  border: 0.5px solid var(--ep-border-mid);
  border-radius: var(--ep-radius-md);
  overflow: hidden;
  transition: border-color .2s;
}
.ep-input-wrap:focus-within {
  border-color: var(--ep-paars-border);
}
.ep-input {
  flex: 1;
  background: transparent;
  border: none;
  padding: 14px 16px;
  font-size: 16px;
  font-weight: 500;
  color: var(--ep-tekst);
  font-family: var(--ep-font);
  outline: none;
}
.ep-input::placeholder { color: var(--ep-tekst-sub); }

/* ── DIVIDERS ─────────────────────────────────────────────────── */
.ep-lijn {
  border: none;
  border-top: 0.5px solid var(--ep-border);
  margin: 12px 0;
}

/* ── SCROLLBAR VERBERGEN ──────────────────────────────────────── */
.ep-scroll { overflow-y: auto; scrollbar-width: none; }
.ep-scroll::-webkit-scrollbar { display: none; }

/* ── PAGINA LAYOUT ────────────────────────────────────────────── */
.ep-pagina {
  max-width: 480px;
  margin: 0 auto;
  min-height: 100dvh;
  padding-bottom: calc(var(--ep-nav-hoogte) + var(--ep-safe-bottom) + 12px);
}

/* ── TOPBAR ───────────────────────────────────────────────────── */
.ep-topbar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 52px 20px 14px;
  position: sticky;
  top: 0;
  background: rgba(10,15,30,0.88);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  z-index: 50;
}
.ep-topbar--eenvoudig {
  padding-top: 14px;
  border-bottom: 0.5px solid var(--ep-border);
}
.ep-topbar__terug {
  width: 34px; height: 34px;
  background: var(--ep-card-alt);
  border: 0.5px solid var(--ep-border-mid);
  border-radius: var(--ep-radius-sm);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  text-decoration: none;
  flex-shrink: 0;
}
.ep-topbar__titel {
  font-size: 16px;
  font-weight: 700;
  color: var(--ep-tekst);
  flex: 1;
}

/* ── TOAST NOTIFICATIE ────────────────────────────────────────── */
.ep-toast {
  position: fixed;
  bottom: calc(var(--ep-nav-hoogte) + var(--ep-safe-bottom) + 16px);
  left: 50%;
  transform: translateX(-50%) translateY(8px);
  background: var(--ep-card);
  border: 0.5px solid var(--ep-border-mid);
  color: var(--ep-tekst);
  padding: 10px 18px;
  border-radius: var(--ep-radius-pill);
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;
  z-index: 200;
  opacity: 0;
  transition: opacity .25s, transform .25s;
  pointer-events: none;
}
.ep-toast--zichtbaar {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* ── LOGO SVG HELPER (inline gebruik) ────────────────────────── */
/**
 * SVG bliksemschicht pad: "M13 2L4.5 13.5H11L10 22L19.5 10.5H13L13 2Z"
 * Kleur fill: #7F77DD
 * Gradient: #A09AE8 (0%) → #1D9E75 (100%)
 * viewBox: 0 0 24 24
 */


/* ── DESKTOP ACHTERGROND ──────────────────────────────────────── */
body {
  background: #07090F;
}

@media (min-width: 520px) {
  body::before {
    content: '';
    position: fixed;
    inset: 0;
    background:
      radial-gradient(ellipse 60% 50% at 20% 20%, rgba(127,119,221,0.06) 0%, transparent 60%),
      radial-gradient(ellipse 50% 40% at 80% 80%, rgba(76,201,160,0.05) 0%, transparent 60%);
    pointer-events: none;
    z-index: 0;
  }

  .ep-pagina,
  .page {
    position: relative;
    z-index: 1;
    box-shadow:
      0 0 0 0.5px rgba(255,255,255,0.06),
      0 32px 80px rgba(0,0,0,0.6);
    border-radius: 0;
  }
}

@media (min-width: 520px) and (min-height: 700px) {
  .ep-pagina,
  .page {
    margin-top: 0;
    min-height: 100dvh;
  }
}