/* base.css — KAOKAB NOC design tokens + core primitives */

:root {
  --bg: #0b1220;
  --panel: #0f1b2e;
  --panel-2: #0b1628;

  --border: rgba(148, 163, 184, 0.16);
  --border-strong: rgba(148, 163, 184, 0.26);

  --text: #e5e7eb;
  --muted: rgba(229, 231, 235, 0.72);

  --primary: #22c55e;
  --primary-2: #16a34a;
  --danger: #ef4444;
  --warning: #f59e0b;
  --info: #38bdf8;

  --shadow: 0 18px 60px rgba(0,0,0,0.55);
  --radius: 14px;

  --focus: 0 0 0 4px rgba(56, 189, 248, 0.22);
}

* { box-sizing: border-box; }

html, body { height: 100%; }

body {
  margin: 0;
  color: var(--text);
  background:
    radial-gradient(1100px 650px at 20% 12%, rgba(34,197,94,0.12), transparent 55%),
    radial-gradient(900px 550px at 88% 22%, rgba(56,189,248,0.12), transparent 55%),
    radial-gradient(800px 500px at 55% 90%, rgba(245,158,11,0.09), transparent 55%),
    var(--bg);
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto;
}

.container {
  max-width: 1040px;
  margin: 0 auto;
  padding: 0 20px;
}

/* Core primitives */

.card {
  background: linear-gradient(180deg, rgba(15,27,46,0.95), rgba(11,22,40,0.95));
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

.card-pad { padding: 22px; }
.hr { margin: 16px 0; }
.container { padding: 0 20px; }

.badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 6px 10px;
  font-size: 12px;
  background: rgba(2, 6, 23, 0.3);
}

.dot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
}

.dot.online  { background: var(--primary); }
.dot.offline { background: var(--danger); }
.dot.unknown { background: var(--warning); }

.hr {
  height: 1px;
  background: var(--border);
  margin: 16px 0;
}
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(1100px 650px at 20% 12%, rgba(34,197,94,0.12), transparent 55%),
    radial-gradient(900px 550px at 88% 22%, rgba(56,189,248,0.12), transparent 55%),
    radial-gradient(800px 500px at 55% 90%, rgba(245,158,11,0.09), transparent 55%),
    var(--bg);
}