/* Sentinel — tactical-dark NOC. Design tokens shared with Protek/app.css. */

:root {
  --bg-deep:#0a1420; --bg-panel:#0e1b2b; --bg-raised:#152840;
  --border:#1e3247; --border-soft:#16273b; --border-accent:#1f6f96;
  --cyan:#36c8ef; --green:#3ee6a8; --red:#ff5673; --amber:#f5b552; --info:#7fd1ff;
  --cyan-dim:rgba(54,200,239,.14); --green-dim:rgba(62,230,168,.14);
  --red-dim:rgba(255,86,115,.14); --amber-dim:rgba(245,181,82,.14);
  --text:#dce7f2; --muted:#8fa4ba; --muted-low:#5b7491;
  --radius:8px; --radius-sm:5px; --gap:18px; --pad:20px;
  --shadow:0 1px 3px rgba(0,0,0,.35); --ease:.18s ease;
}

* { box-sizing:border-box; }
html, body { margin:0; padding:0; }
body {
  background:var(--bg-deep); color:var(--text);
  font:15px/1.45 'Rajdhani', sans-serif;
  min-height:100vh;
}
.mono { font-family:'Share Tech Mono', monospace; }
.muted { color:var(--muted); }
a { color:var(--cyan); text-decoration:none; }

/* --- topbar --- */
.topbar {
  position:sticky; top:0; z-index:10;
  display:flex; align-items:center; gap:16px;
  height:56px; padding:0 var(--pad);
  background:var(--bg-panel); border-bottom:1px solid var(--border);
  box-shadow:var(--shadow);
}
.brand {
  color:var(--text); font-weight:700; font-size:18px; letter-spacing:2px;
  display:flex; align-items:center; gap:8px;
}
.brand-mark { color:var(--cyan); }
.nav { display:flex; gap:4px; }
.nav a {
  color:var(--muted); padding:6px 12px; border-radius:var(--radius-sm);
  font-weight:600; letter-spacing:.5px; transition:all var(--ease);
}
.nav a:hover { color:var(--text); background:var(--bg-raised); }
.nav a.active { color:var(--cyan); background:var(--cyan-dim); }
.spacer { flex:1; }
.user { color:var(--muted-low); font-size:13px; }

.main { max-width:1400px; margin:0 auto; padding:var(--pad); }

/* --- flashes --- */
.flashes { margin-bottom:var(--gap); }
.flash {
  background:var(--cyan-dim); border:1px solid var(--border-accent);
  border-radius:var(--radius-sm); padding:10px 14px; margin-bottom:6px;
}

/* --- buttons / forms --- */
.btn {
  font:inherit; font-weight:600; letter-spacing:.5px; cursor:pointer;
  border-radius:var(--radius-sm); padding:7px 14px;
  border:1px solid var(--border); background:var(--bg-raised); color:var(--text);
  transition:all var(--ease);
}
.btn:hover { border-color:var(--border-accent); }
.btn-primary { background:var(--cyan-dim); border-color:var(--border-accent); color:var(--cyan); }
.btn-primary:hover { background:var(--cyan); color:var(--bg-deep); }
.btn-danger { background:var(--red-dim); border-color:#5b2735; color:var(--red); }
.btn-danger:hover { background:var(--red); color:var(--bg-deep); }
.btn-ghost { background:transparent; }
.btn-block { width:100%; }
.inline-form { display:inline; }

label { display:flex; flex-direction:column; gap:4px; font-weight:600; color:var(--muted); font-size:13px; }
input, select {
  font:inherit; color:var(--text);
  background:var(--bg-deep); border:1px solid var(--border);
  border-radius:var(--radius-sm); padding:8px 10px; outline:none;
  transition:border-color var(--ease);
}
input:focus, select:focus { border-color:var(--cyan); }
.check-label { flex-direction:row; align-items:center; gap:8px; }
.check-label input { width:auto; }

/* --- panels / tables --- */
.panel {
  background:var(--bg-panel); border:1px solid var(--border-soft);
  border-radius:var(--radius); padding:var(--pad); margin-bottom:var(--gap);
  box-shadow:var(--shadow);
}
.panel-title {
  margin:0 0 14px; font-size:14px; font-weight:700; letter-spacing:2px;
  text-transform:uppercase; color:var(--muted);
}
.table-wrap { overflow-x:auto; }
.table { width:100%; border-collapse:collapse; font-size:14px; }
.table th {
  text-align:left; color:var(--muted-low); font-weight:600; letter-spacing:1px;
  text-transform:uppercase; font-size:11px;
  padding:8px 10px; border-bottom:1px solid var(--border);
}
.table td { padding:9px 10px; border-bottom:1px solid var(--border-soft); vertical-align:top; }
.table .num { text-align:right; }
.ellipsis { max-width:340px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.url-sm { font-size:12px; }

/* --- dashboard tiles --- */
.tiles {
  display:grid; gap:var(--gap); margin-bottom:var(--gap);
  grid-template-columns:repeat(auto-fill, minmax(300px, 1fr));
}
.tile {
  background:var(--bg-panel); border:1px solid var(--border-soft);
  border-left:3px solid var(--muted-low);
  border-radius:var(--radius); padding:16px; box-shadow:var(--shadow);
}
.tile.state-up { border-left-color:var(--green); }
.tile.state-degraded { border-left-color:var(--amber); }
.tile.state-down { border-left-color:var(--red); }
.tile-head { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.tile-name { margin:0; font-size:17px; font-weight:700; letter-spacing:1px; }
.tile-url {
  color:var(--muted-low); font-size:12px; margin:2px 0 12px;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.badge {
  font-family:'Share Tech Mono', monospace; font-size:13px; font-weight:700;
  padding:3px 10px; border-radius:var(--radius-sm); letter-spacing:1px;
}
.badge-up { color:var(--green); background:var(--green-dim); }
.badge-degraded { color:var(--amber); background:var(--amber-dim); }
.badge-down { color:var(--red); background:var(--red-dim); }
.badge-unknown { color:var(--muted); background:var(--bg-raised); }
.tile-stats { display:flex; gap:18px; margin-bottom:10px; }
.stat { display:flex; flex-direction:column; }
.stat-value { font-size:18px; color:var(--text); }
.stat-value small { color:var(--muted-low); font-size:11px; margin-left:1px; }
.stat-time { font-size:13px; padding-top:4px; }
.stat-label { font-size:10px; letter-spacing:1px; text-transform:uppercase; color:var(--muted-low); }
.spark { height:40px; }
.spark svg { width:100%; height:40px; display:block; }
.spark polyline { fill:none; stroke:var(--cyan); stroke-width:1.5; }
.spark .spark-fill { fill:var(--cyan-dim); stroke:none; }
.spark .spark-down { fill:var(--red); }
.tile-error {
  color:var(--red); font-size:12px; margin-top:8px;
  background:var(--red-dim); border-radius:var(--radius-sm); padding:6px 8px;
  word-break:break-word;
}

/* --- cert board colours --- */
.cert-ok { color:var(--green); }
.cert-warn { color:var(--amber); }
.cert-bad { color:var(--red); }

/* --- feature batch --- */
.badge-muted { color:var(--muted); background:var(--bg-raised); border:1px dashed var(--muted-low); }
.btn-sm { padding:3px 9px; font-size:12px; margin-left:6px; }
.panel-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:14px; }
.panel-head .panel-title { margin-bottom:0; }
.chan-settings { margin-bottom:10px; }
.chan-settings summary { display:flex; align-items:center; gap:10px; padding:8px 0; }
.mute-select { padding:5px 6px; margin-right:4px; }
.hb-url {
  background:var(--bg-deep); border:1px solid var(--border-soft);
  border-radius:var(--radius-sm); padding:8px 10px; margin:10px 0 0;
  word-break:break-all; color:var(--info);
}

/* --- public status page --- */
.status-public { max-width:720px; }
.status-head { text-align:center; margin:5vh 0 24px; }
.overall {
  display:inline-block; margin-top:14px; padding:8px 22px; border-radius:var(--radius);
  font-weight:700; letter-spacing:1px; font-size:17px;
}
.overall-up { color:var(--green); background:var(--green-dim); }
.overall-degraded { color:var(--amber); background:var(--amber-dim); }
.overall-down { color:var(--red); background:var(--red-dim); }
.status-row { margin-bottom:14px; }
.status-foot { text-align:center; margin-top:30px; font-size:12px; }

/* --- monitors page --- */
.mon-form .grid {
  display:grid; gap:12px; margin-bottom:14px;
  grid-template-columns:repeat(auto-fit, minmax(170px, 1fr));
}
.edit summary { cursor:pointer; list-style:none; }
.edit summary::-webkit-details-marker { display:none; }
.edit[open] summary strong { color:var(--cyan); }
.edit-form { margin-top:12px; padding:12px; background:var(--bg-deep); border-radius:var(--radius-sm); }
.actions { white-space:nowrap; }
.actions .btn { margin-right:6px; }

.toggle {
  width:40px; height:22px; border-radius:11px; border:1px solid var(--border);
  background:var(--bg-raised); cursor:pointer; position:relative; padding:0;
  transition:all var(--ease);
}
.toggle .knob {
  position:absolute; top:2px; left:2px; width:16px; height:16px;
  border-radius:50%; background:var(--muted-low); transition:all var(--ease);
}
.toggle.on { background:var(--green-dim); border-color:var(--green); }
.toggle.on .knob { left:20px; background:var(--green); }

/* --- login --- */
.login-wrap { display:flex; justify-content:center; padding-top:12vh; }
.login-panel { width:340px; text-align:center; }
.login-brand { font-size:22px; font-weight:700; letter-spacing:3px; }
.login-panel form { display:flex; flex-direction:column; gap:12px; margin-top:18px; text-align:left; }

/* --- responsive --- */
@media (max-width: 640px) {
  .topbar { flex-wrap:wrap; height:auto; padding:10px; gap:8px; }
  .main { padding:12px; }
  .tiles { grid-template-columns:1fr; }
  .tile-stats { flex-wrap:wrap; }
  .user { display:none; }
  .ellipsis { max-width:180px; }
}

/* brand mark as pure CSS (font glyph coverage is unreliable) */
.brand-mark {
  display:inline-block; width:12px; height:12px; border-radius:50%;
  border:2.5px solid var(--cyan); position:relative; margin-right:2px;
}
.brand-mark::after {
  content:""; position:absolute; inset:2.5px; border-radius:50%; background:var(--green);
}