:root{
  --bg:#100b08; --panel:#1b1410; --panel2:#241a14; --line:#3a2a1f;
  --text:#f3e9df; --muted:#a08d7d; --amber:#f7a93c; --amber2:#c8873a;
  --ok:#38e5c4; --warn:#f7a93c; --bad:#ff6b52; --info:#7cc0ff;
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--text);
  font:15px/1.5 system-ui,Segoe UI,Roboto,sans-serif}
a{color:var(--amber);text-decoration:none}
a:hover{text-decoration:underline}
.muted{color:var(--muted)}
.error{color:var(--bad)}
h1{font-size:26px;margin:.2em 0}h2{font-size:18px;margin:1.4em 0 .5em}h3{font-size:14px;color:var(--muted);text-transform:uppercase;letter-spacing:.06em;margin:1.2em 0 .4em}

.topbar{display:flex;justify-content:space-between;align-items:center;
  padding:14px 24px;background:var(--panel);border-bottom:1px solid var(--line)}
.brand{font-weight:800;font-size:18px;color:var(--text)}
.brand span{color:var(--amber)}
main{max-width:1100px;margin:0 auto;padding:24px}

/* summary cards */
.cards{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.card{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:18px}
.card .num{font-size:34px;font-weight:800}
.card .lbl{color:var(--muted);font-size:13px}
.card.ok .num{color:var(--ok)} .card.bad .num{color:var(--bad)} .card.warn .num{color:var(--warn)}

/* tables */
table.grid{width:100%;border-collapse:collapse;background:var(--panel);
  border:1px solid var(--line);border-radius:12px;overflow:hidden}
.grid th{text-align:left;font-size:12px;text-transform:uppercase;letter-spacing:.05em;
  color:var(--muted);padding:10px 14px;border-bottom:1px solid var(--line)}
.grid td{padding:12px 14px;border-bottom:1px solid var(--line);vertical-align:top}
.grid tr:last-child td{border-bottom:none}
.grid.clickable tr{cursor:pointer}
.grid.clickable tbody tr:hover{background:var(--panel2)}
.grid.small td,.grid.small th{padding:7px 12px;font-size:13px}

/* status colour = left border + dot */
.dot{display:inline-block;width:9px;height:9px;border-radius:50%;margin-right:8px;background:var(--muted);vertical-align:middle}
.status-ok    .dot{background:var(--ok)}
.status-warning .dot,.status-maintenance .dot{background:var(--warn)}
.status-fault .dot,.status-offline .dot{background:var(--bad)}
tr.status-ok{box-shadow:inset 3px 0 var(--ok)}
tr.status-warning,tr.status-maintenance{box-shadow:inset 3px 0 var(--warn)}
tr.status-fault,tr.status-offline{box-shadow:inset 3px 0 var(--bad)}

.dev-fault,.dev-offline{color:var(--bad)} .dev-degraded{color:var(--warn)}
.dev-not_provisioned{color:var(--muted)}

/* pills */
.pill{display:inline-block;padding:3px 10px;border-radius:999px;font-size:12px;font-weight:700;
  border:1px solid var(--line);background:var(--panel2)}
.pill.status-ok{color:var(--ok)}
.pill.status-warning,.pill.status-maintenance{color:var(--warn)}
.pill.status-fault,.pill.status-offline{color:var(--bad);border-color:var(--bad)}
.attention{display:flex;flex-direction:column;gap:8px}
.attention .pill{display:block;padding:10px 14px;font-weight:500;font-size:14px}

/* buttons */
.btn{display:inline-block;border:1px solid var(--line);background:var(--panel2);color:var(--text);
  padding:9px 16px;border-radius:10px;font-weight:700;cursor:pointer;font-size:14px}
.btn:hover{border-color:var(--amber)}
.btn.primary{background:linear-gradient(135deg,var(--amber),var(--amber2));color:#1a0f06;border:none}
.btn.danger{background:linear-gradient(135deg,#ff7a52,#e0431f);color:#fff;border:none}
.btn.ghost{background:transparent}
.btn-row{display:flex;flex-wrap:wrap;gap:10px}
.btn-row form{margin:0}

/* detail */
.back{display:inline-block;margin-bottom:10px}
.controls{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:18px;margin:14px 0}
.status-block{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:18px;margin:14px 0}
.statgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.statgrid .lbl{display:block;color:var(--muted);font-size:12px;text-transform:uppercase;letter-spacing:.05em;margin-bottom:3px}
.two-col{display:grid;grid-template-columns:1fr 1fr;gap:24px}

/* perishable bars */
.bars{display:flex;flex-direction:column;gap:8px}
.bar{display:grid;grid-template-columns:120px 1fr 48px;align-items:center;gap:10px}
.bar .bl{color:var(--muted);font-size:13px}
.bar .bv{text-align:right;font-variant-numeric:tabular-nums}
.track{height:10px;background:var(--panel2);border-radius:6px;overflow:hidden;border:1px solid var(--line)}
.fill{height:100%;background:linear-gradient(90deg,var(--amber2),var(--amber))}
.fill.low{background:linear-gradient(90deg,#e0431f,var(--bad))}

/* events */
.events{list-style:none;padding:0;margin:0;max-height:420px;overflow:auto}
.events li{padding:7px 10px;border-bottom:1px solid var(--line);font-size:13px}
.events li.sev-critical{color:var(--bad)} .events li.sev-warning{color:var(--warn)}

/* forms */
.edit label,.login label{display:block;margin:10px 0;color:var(--muted);font-size:13px}
.edit input,.edit textarea,.login input{display:block;width:100%;margin-top:4px;padding:9px 12px;
  background:var(--panel2);border:1px solid var(--line);border-radius:9px;color:var(--text);font:inherit}
.login{max-width:340px;margin:8vh auto;background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:26px}

@media(max-width:820px){.cards,.statgrid{grid-template-columns:repeat(2,1fr)}.two-col{grid-template-columns:1fr}}