/* ============================================================
   PulseDash — SRE Edition CSS
   ============================================================ */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

:root{
  --bg:#080d18;
  --bg-card:rgba(255,255,255,0.04);
  --bg-card-h:rgba(255,255,255,0.07);
  --border:rgba(255,255,255,0.08);
  --border-h:rgba(255,255,255,0.15);

  --cpu:#6ee7f7;--mem:#a78bfa;--disk:#34d399;
  --net-s:#f59e0b;--net-r:#60a5fa;

  /* SRE severity palette */
  --ok:      #34d399;
  --info:    #60a5fa;
  --warning: #f59e0b;
  --critical: #ff4d6d;

  --t1:#f0f4ff;--t2:#94a3b8;--t3:#64748b;
  --font:'Inter',sans-serif;--mono:'JetBrains Mono',monospace;
  --r:16px;--rs:10px;
  --shadow:0 8px 32px rgba(0,0,0,.45);
}

html{font-size:16px}
body{
  background:var(--bg);
  background-image:
    radial-gradient(ellipse 80% 50% at 20% 0%,rgba(99,102,241,.12),transparent 60%),
    radial-gradient(ellipse 60% 40% at 80% 100%,rgba(110,231,247,.08),transparent 60%);
  color:var(--t1);font-family:var(--font);min-height:100vh;overflow-x:hidden;
}
::-webkit-scrollbar{width:6px}::-webkit-scrollbar-thumb{background:var(--border-h);border-radius:3px}

/* ── TOPBAR ─────────────────────────────────────────────── */
.topbar{display:flex;align-items:center;justify-content:space-between;padding:.75rem 2rem;border-bottom:1px solid var(--border);background:rgba(8,13,24,.85);backdrop-filter:blur(12px);position:sticky;top:0;z-index:100}
.topbar-left{display:flex;align-items:center;gap:.75rem}
.topbar-center,.topbar-right{display:flex;align-items:center;gap:1rem}
.logo{display:flex;align-items:center;gap:.4rem}
.logo-icon{font-size:1.4rem}
.logo-text{font-size:1.2rem;font-weight:800;letter-spacing:-.02em}
.logo-accent{color:var(--cpu)}
.version-badge{font-size:.65rem;font-family:var(--mono);color:var(--t3);background:rgba(110,231,247,.1);border:1px solid rgba(110,231,247,.2);padding:.15rem .55rem;border-radius:999px;letter-spacing:.04em}

.status-pill{display:flex;align-items:center;gap:.5rem;padding:.3rem .9rem;border-radius:999px;background:var(--bg-card);border:1px solid var(--border);font-size:.78rem;font-weight:500;color:var(--t2);transition:all .4s}
.status-pill.live{border-color:rgba(52,211,153,.4);color:var(--ok)}
.status-dot{width:8px;height:8px;border-radius:50%;background:var(--t3);transition:all .4s}
.status-pill.live .status-dot{background:var(--ok);box-shadow:0 0 6px var(--ok);animation:pulse-dot 1.8s ease-in-out infinite}

@keyframes pulse-dot{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.5;transform:scale(.7)}}

/* Health score chip */
.health-score-chip{display:flex;align-items:center;gap:.4rem;padding:.25rem .75rem;border-radius:999px;background:var(--bg-card);border:1px solid var(--border);transition:all .4s}
.hs-label{font-size:.65rem;font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:var(--t3)}
.hs-value{font-size:.9rem;font-weight:800;font-family:var(--mono);color:var(--ok);min-width:2.5ch;text-align:right}
.hs-critical .hs-value{color:var(--critical)}
.hs-warning  .hs-value{color:var(--warning)}

.clock{font-family:var(--mono);font-size:.85rem;color:var(--t2);letter-spacing:.05em}

/* ── LAYOUT ──────────────────────────────────────────────── */
.dashboard{max-width:1600px;margin:0 auto;padding:1.5rem 2rem 3rem;display:flex;flex-direction:column;gap:1.25rem}
.section-title{font-size:.8rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--t3);margin-bottom:.75rem}

/* ── SRE SUMMARY STRIP ───────────────────────────────────── */
.sre-summary{display:grid;grid-template-columns:repeat(6,1fr);gap:.75rem}
.sre-card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--rs);padding:.9rem 1.1rem;display:flex;align-items:center;gap:.75rem;transition:border-color .3s,transform .2s}
.sre-card:hover{border-color:var(--border-h);transform:translateY(-1px)}
.src-icon{font-size:1.3rem}
.src-label{font-size:.65rem;font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:var(--t3);margin-bottom:.15rem}
.src-value{font-size:1.3rem;font-weight:800;font-family:var(--mono);color:var(--t1)}
.src-danger .src-value{color:var(--critical)}
.src-warn   .src-value{color:var(--warning)}
.src-ok     .src-value{color:var(--ok)}

/* ── METRIC CARDS ────────────────────────────────────────── */
.stat-cards{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem}
.stat-card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--r);padding:1.2rem 1.4rem;backdrop-filter:blur(12px);transition:border-color .3s,box-shadow .3s,transform .25s}
.stat-card:hover{border-color:var(--border-h);transform:translateY(-2px);box-shadow:var(--shadow)}
.card-header{display:flex;align-items:center;gap:.5rem;margin-bottom:.8rem}
.card-icon{font-size:1.1rem}.card-label{font-size:.78rem;font-weight:600;color:var(--t2);text-transform:uppercase;letter-spacing:.06em;flex:1}

/* Severity badge */
.sev-badge{font-size:.6rem;font-weight:800;padding:.15rem .55rem;border-radius:999px;text-transform:uppercase;letter-spacing:.05em;transition:all .3s}
.sev-OK      {background:rgba(52,211,153,.1);color:var(--ok);border:1px solid rgba(52,211,153,.25)}
.sev-INFO    {background:rgba(96,165,250,.1);color:var(--info);border:1px solid rgba(96,165,250,.25)}
.sev-WARNING {background:rgba(245,158,11,.12);color:var(--warning);border:1px solid rgba(245,158,11,.3);animation:badge-pulse 2s ease-in-out infinite}
.sev-CRITICAL{background:rgba(255,77,109,.15);color:var(--critical);border:1px solid rgba(255,77,109,.35);animation:badge-pulse 1s ease-in-out infinite}
@keyframes badge-pulse{0%,100%{opacity:1}50%{opacity:.5}}

.card-value{font-size:2.4rem;font-weight:800;letter-spacing:-.03em;line-height:1;margin-bottom:.85rem;font-family:var(--mono)}
.progress-bar-wrap{height:6px;background:rgba(255,255,255,.07);border-radius:999px;overflow:hidden;margin-bottom:.6rem}
.progress-bar{height:100%;border-radius:999px;transition:width .6s cubic-bezier(.4,0,.2,1)}
.cpu-bar {background:linear-gradient(90deg,#6ee7f7,#38bdf8)}
.mem-bar {background:linear-gradient(90deg,#a78bfa,#818cf8)}
.disk-bar{background:linear-gradient(90deg,#34d399,#10b981)}
.card-sub{font-size:.68rem;color:var(--t3);font-family:var(--mono)}

/* Danger state */
.stat-card.sev-critical .card-value{color:var(--critical);text-shadow:0 0 20px rgba(255,77,109,.4)}
.stat-card.sev-critical{border-color:rgba(255,77,109,.3);box-shadow:0 0 20px rgba(255,77,109,.08)}
.stat-card.sev-critical .progress-bar{background:var(--critical)!important}
.stat-card.sev-warning .card-value{color:var(--warning)}
.stat-card.sev-warning{border-color:rgba(245,158,11,.25)}
.stat-card.sev-warning .progress-bar{background:var(--warning)!important}

.net-row{display:flex;justify-content:space-between;align-items:center;padding:.3rem 0;border-bottom:1px solid var(--border)}
.net-row:last-child{border-bottom:none}
.net-label{font-size:.72rem;color:var(--t3)}.net-val{font-size:.82rem;font-family:var(--mono);color:var(--t2)}

/* ── CHARTS ──────────────────────────────────────────────── */
.charts-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1rem}
.chart-card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--r);padding:1.1rem 1.3rem 1rem;backdrop-filter:blur(12px);transition:border-color .3s}
.chart-card:hover{border-color:var(--border-h)}
.chart-card-header{display:flex;justify-content:space-between;align-items:center;font-size:.78rem;font-weight:600;color:var(--t2);margin-bottom:.9rem;text-transform:uppercase;letter-spacing:.05em}
.chart-unit{font-weight:400;color:var(--t3);margin-left:.2rem}
.chart-live-dot{width:7px;height:7px;border-radius:50%;background:var(--ok);box-shadow:0 0 6px var(--ok);animation:pulse-dot 1.8s ease-in-out infinite}
.chart-wrap{position:relative;height:170px}

/* ── SLO SECTION ─────────────────────────────────────────── */
.slo-section{display:flex;flex-direction:column}
.slo-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}
.slo-card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--r);padding:1.1rem 1.3rem;transition:border-color .3s}
.slo-card:hover{border-color:var(--border-h)}
.slo-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:.9rem}
.slo-name{font-size:.78rem;font-weight:700;color:var(--t2);text-transform:uppercase;letter-spacing:.05em}
.slo-status-pill{font-size:.6rem;font-weight:800;padding:.15rem .55rem;border-radius:999px;text-transform:uppercase;letter-spacing:.04em}
.slo-OK      {background:rgba(52,211,153,.1);color:var(--ok);border:1px solid rgba(52,211,153,.25)}
.slo-AT_RISK {background:rgba(245,158,11,.12);color:var(--warning);border:1px solid rgba(245,158,11,.3)}
.slo-BREACHED{background:rgba(255,77,109,.15);color:var(--critical);border:1px solid rgba(255,77,109,.35)}
.slo-INITIALIZING{background:var(--bg-card);color:var(--t3);border:1px solid var(--border)}

.slo-compliance{font-size:1.8rem;font-weight:800;font-family:var(--mono);margin-bottom:.25rem;color:var(--t1)}
.slo-target{font-size:.68rem;color:var(--t3);font-family:var(--mono);margin-bottom:.75rem}

/* Error budget bar */
.budget-bar-wrap{height:8px;background:rgba(255,255,255,.07);border-radius:999px;overflow:hidden;margin-bottom:.4rem}
.budget-bar{height:100%;border-radius:999px;transition:width .8s cubic-bezier(.4,0,.2,1)}
.budget-high{background:linear-gradient(90deg,var(--ok),#10b981)}
.budget-mid {background:linear-gradient(90deg,var(--warning),#d97706)}
.budget-low {background:linear-gradient(90deg,var(--critical),#e11d48)}

.budget-meta{display:flex;justify-content:space-between;font-size:.68rem;font-family:var(--mono);color:var(--t3);margin-bottom:.6rem}
.slo-runbook{font-size:.7rem;color:var(--t3);line-height:1.4;padding:.5rem .7rem;background:rgba(255,255,255,.03);border-left:2px solid var(--border);border-radius:0 var(--rs) var(--rs) 0;margin-top:.5rem}
.slo-loading{color:var(--t3);font-size:.82rem;padding:2rem;text-align:center}

/* ── BOTTOM ROW ──────────────────────────────────────────── */
.bottom-row{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:1rem}
.panel{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--r);backdrop-filter:blur(12px);overflow:hidden;display:flex;flex-direction:column}
.panel-header{display:flex;justify-content:space-between;align-items:center;padding:.9rem 1.3rem;border-bottom:1px solid var(--border);font-size:.78rem;font-weight:600;color:var(--t2);text-transform:uppercase;letter-spacing:.05em}
.panel-sub{font-weight:400;color:var(--t3)}

.alert-count-badge,.inc-count-badge{font-size:.65rem;font-weight:700;padding:.1rem .55rem;border-radius:999px}
.alert-count-badge{background:rgba(255,77,109,.15);color:var(--critical);border:1px solid rgba(255,77,109,.25)}
.inc-count-badge{background:rgba(245,158,11,.12);color:var(--warning);border:1px solid rgba(245,158,11,.25)}

/* Table */
.table-wrap{overflow-y:auto;max-height:260px}
table{width:100%;border-collapse:collapse;font-size:.76rem}
thead th{padding:.5rem 1rem;text-align:left;font-size:.65rem;font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:var(--t3);border-bottom:1px solid var(--border);position:sticky;top:0;background:var(--bg)}
tbody tr{border-bottom:1px solid var(--border);transition:background .2s}
tbody tr:last-child{border-bottom:none}
tbody tr:hover{background:var(--bg-card-h)}
tbody td{padding:.45rem 1rem;color:var(--t2);font-family:var(--mono)}
tbody td:nth-child(2){color:var(--t1);font-family:var(--font);font-weight:500}
.empty-row{text-align:center;color:var(--t3);padding:1.5rem!important}
.cpu-hot{color:var(--cpu)!important}.cpu-warn{color:var(--warning)!important}.cpu-crit{color:var(--critical)!important}
.status-running{color:var(--ok)}.status-sleep{color:var(--t3)}

/* Alerts */
.alerts-list,.incidents-list{padding:.6rem;overflow-y:auto;max-height:260px;display:flex;flex-direction:column;gap:.4rem}
.no-alerts{text-align:center;color:var(--ok);padding:1.5rem;font-size:.8rem}
.alert-item{padding:.6rem .85rem;border-radius:var(--rs);font-size:.74rem;color:var(--t2);animation:slide-in .3s ease}
.alert-item.sev-WARNING {border-left:3px solid var(--warning);background:rgba(245,158,11,.06)}
.alert-item.sev-CRITICAL{border-left:3px solid var(--critical);background:rgba(255,77,109,.06)}
.a-header{display:flex;align-items:center;gap:.4rem;margin-bottom:.2rem}
.a-sev{font-size:.58rem;font-weight:800;padding:.1rem .4rem;border-radius:4px;text-transform:uppercase}
.a-sev-WARNING {background:rgba(245,158,11,.15);color:var(--warning)}
.a-sev-CRITICAL{background:rgba(255,77,109,.2);color:var(--critical)}
.a-msg{color:var(--t1);font-weight:600;font-size:.76rem}
.a-runbook{color:var(--t3);font-size:.67rem;margin-top:.2rem;line-height:1.35}
.a-time{color:var(--t3);font-family:var(--mono);font-size:.65rem;margin-top:.2rem}

/* Incidents */
.inc-item{padding:.6rem .85rem;border-radius:var(--rs);background:rgba(245,158,11,.05);border-left:3px solid var(--warning);font-size:.74rem;animation:slide-in .3s ease}
.inc-item.closed{border-left-color:var(--ok);background:rgba(52,211,153,.04);opacity:.7}
.inc-id{font-family:var(--mono);font-weight:700;font-size:.7rem;color:var(--warning)}
.inc-item.closed .inc-id{color:var(--ok)}
.inc-resource{color:var(--t1);font-weight:600}
.inc-meta{color:var(--t3);font-family:var(--mono);font-size:.65rem;margin-top:.2rem}

@keyframes slide-in{from{opacity:0;transform:translateX(8px)}to{opacity:1;transform:translateX(0)}}

/* ── RESPONSIVE ──────────────────────────────────────────── */
@media(max-width:1400px){.sre-summary{grid-template-columns:repeat(3,1fr)}.slo-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:1100px){.stat-cards{grid-template-columns:repeat(2,1fr)}.bottom-row{grid-template-columns:1fr 1fr}}
@media(max-width:800px){.charts-grid,.slo-grid,.bottom-row{grid-template-columns:1fr}.stat-cards{grid-template-columns:repeat(2,1fr)}.sre-summary{grid-template-columns:repeat(2,1fr)}.dashboard{padding:1rem}.topbar{padding:.75rem 1rem}}
@media(max-width:480px){.stat-cards,.sre-summary{grid-template-columns:1fr}}