/* AppSignal-stijl statuspagina — licht thema, zelfstandige CSS (geen Tailwind nodig). */
.elia-status{
  --es-bg:#f3f4f6; --es-card:#ffffff; --es-text:#1f2937; --es-text2:#374151; --es-muted:#6b7280;
  --es-line:#e5e7eb;
  --es-green:#22c55e; --es-green-wash:#dcfce7;
  --es-red:#ef4444; --es-red-wash:#fecaca;
  --es-orange:#f97316; --es-orange-wash:#fed7aa;
  --es-amber:#f59e0b; --es-amber-wash:#fde68a;
  --es-blue:#3b82f6; --es-blue-wash:#dbeafe;
  --es-shadow:0 1px 3px 0 rgba(0,0,0,.08);
  background:transparent; color:var(--es-text);
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; line-height:1.5;
  margin:0;
}
.elia-status *{box-sizing:border-box}
.elia-status .es-container{max-width:1024px;margin:0 auto;padding:0 16px}

/* Header */
.elia-status .es-topbar{background:var(--es-card);box-shadow:var(--es-shadow)}
.elia-status .es-topbar-inner{max-width:1024px;margin:0 auto;padding:12px 16px;display:flex;align-items:center;gap:12px}
.elia-status .es-brand{font-weight:600;color:var(--es-text);text-decoration:none}
.elia-status .es-divider{width:1px;height:22px;background:var(--es-line);border-radius:2px}
.elia-status .es-navlink{color:var(--es-text2);text-decoration:none}

/* Hero */
.elia-status .es-hero{text-align:center;padding:8px 16px 0;max-width:44rem;margin:0 auto}
.elia-status .es-hero-icon{width:72px;height:72px;margin:0 auto;border-radius:50%;
  display:flex;align-items:center;justify-content:center}
.elia-status .es-hero-icon svg{width:30px;height:30px;fill:#fff;color:#fff}
.elia-status .es-hero-icon.es-ok{background:var(--es-green-wash)}
.elia-status .es-hero-icon.es-ok::before{content:"";position:absolute}
.elia-status .es-hero-icon .es-inner{}
.elia-status .es-hero-title{margin:20px 0 0;font-size:28px;font-weight:700;letter-spacing:-.01em}
.elia-status .es-hero-desc{max-width:34rem;margin:12px auto 0;text-align:center;color:var(--es-text2)}

/* Zorg dat het icoon een dubbele ring krijgt (buiten wash, binnen vol). */
.elia-status .es-hero-icon{position:relative}
.elia-status .es-hero-icon svg{position:relative;z-index:2}
.elia-status .es-hero-icon::after{content:"";position:absolute;width:60px;height:60px;border-radius:50%;z-index:1}
.elia-status .es-hero-icon.es-ok::after{background:var(--es-green)}
.elia-status .es-hero-icon.es-info::after{background:var(--es-blue)}
.elia-status .es-hero-icon.es-warn::after{background:var(--es-amber)}
.elia-status .es-hero-icon.es-serious::after{background:var(--es-orange)}
.elia-status .es-hero-icon.es-crit::after{background:var(--es-red)}
.elia-status .es-hero-icon.es-info{background:var(--es-blue-wash)}
.elia-status .es-hero-icon.es-warn{background:var(--es-amber-wash)}
.elia-status .es-hero-icon.es-serious{background:var(--es-orange-wash)}
.elia-status .es-hero-icon.es-crit{background:var(--es-red-wash)}

/* Secties */
.elia-status .es-section{max-width:44rem;margin:0 auto;padding:20px 16px}

/* Componentenkaart */
.elia-status .es-monitors{max-width:44rem;margin:20px auto;background:var(--es-card);
  border:1px solid var(--es-line);box-shadow:var(--es-shadow);border-radius:12px;overflow:hidden}
.elia-status .es-monitor{padding:18px 22px;border-top:1px solid var(--es-line)}
.elia-status .es-monitor:first-child{border-top:none}
.elia-status .es-monitor-top{display:block}
.elia-status .es-monitor-name{margin:0;font-size:16px;font-weight:600;
  display:flex;align-items:center;justify-content:space-between;gap:10px}
.elia-status .es-monitor-pct{font-size:12px;font-weight:400;color:var(--es-muted)}
.elia-status .es-comp-badge{display:inline-block;font-size:11px;font-weight:700;padding:2px 8px;border-radius:999px;margin-left:6px;vertical-align:middle}
.elia-status .es-comp-badge.es-ok{background:var(--es-green-wash);color:#15803d}
.elia-status .es-comp-badge.es-info{background:var(--es-blue-wash);color:#1d4ed8}
.elia-status .es-comp-badge.es-warn{background:var(--es-amber-wash);color:#b45309}
.elia-status .es-comp-badge.es-serious{background:var(--es-orange-wash);color:#c2410c}
.elia-status .es-comp-badge.es-crit{background:var(--es-red-wash);color:#b91c1c}
.elia-status .es-monitor-sub{margin:2px 0 0;color:var(--es-text2);font-size:14px}
.elia-status .es-dots{display:flex;gap:4px;margin-top:12px;height:32px}
.elia-status .es-dot{flex:1 1 0;min-width:2px;border-radius:4px;background:var(--es-green)}
.elia-status .es-dot-up{background:var(--es-green)}
.elia-status .es-dot-down{background:var(--es-red)}
.elia-status .es-dot-partial{background:var(--es-orange)}
.elia-status .es-dot-none{background:var(--es-line)}

/* Statusupdates */
.elia-status .es-updates-heading{text-align:center;font-size:22px;font-weight:700;margin:16px 0 20px}
.elia-status .es-updates{max-width:44rem;margin:0 auto;display:flex;flex-direction:column;gap:14px}
.elia-status .es-update{display:flex;gap:14px;background:var(--es-card);
  border:1px solid var(--es-line);box-shadow:var(--es-shadow);border-radius:12px;padding:18px 22px}
.elia-status .es-update-icon{flex:none;width:16px;height:16px;margin-top:3px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;color:#fff}
.elia-status .es-update-icon svg{width:8px;height:8px;fill:#fff}
.elia-status .es-update-icon.es-ok{background:var(--es-green)}
.elia-status .es-update-icon.es-info{background:var(--es-blue)}
.elia-status .es-update-icon.es-warn{background:var(--es-amber)}
.elia-status .es-update-icon.es-serious{background:var(--es-orange)}
.elia-status .es-update-icon.es-crit{background:var(--es-red)}
.elia-status .es-update-body{min-width:0}
.elia-status .es-update-title{margin:0 0 4px;font-size:16px;font-weight:600}
.elia-status .es-update-text{color:var(--es-text)}
.elia-status .es-update-time{margin:8px 0 0;color:var(--es-muted);font-size:13px}

.elia-status .es-empty{color:var(--es-muted)}
.elia-status .es-center{text-align:center}
.elia-status .es-foot{max-width:1024px;margin:0 auto;padding:24px 16px 48px;text-align:center;
  color:var(--es-muted);font-size:14px}