/* WebexCP — dark, utilitarian, no framework. */

:root {
  --bg: #0c0f14;
  --bg-alt: #141922;
  --bg-elev: #1b212d;
  --fg: #e7ecf3;
  --fg-muted: #9aa4b2;
  --accent: #5eb0ff;
  --accent-dim: #2a6db0;
  --ok: #4caf50;
  --warn: #f5a623;
  --err: #ef5350;
  --border: #2a313d;
  --radius: 6px;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; background: var(--bg); color: var(--fg); min-height: 100%; }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
code, pre { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 0.92em; }
.muted { color: var(--fg-muted); }
.err { color: var(--err); margin: 0.5em 0; }
.warn { color: var(--warn); }

button, .btn {
  display: inline-block;
  background: var(--accent-dim);
  color: #fff;
  border: 1px solid var(--accent);
  padding: 0.5em 1em;
  border-radius: var(--radius);
  cursor: pointer;
  font-size: 0.95em;
}
button:hover, .btn:hover { background: var(--accent); }
button[disabled] { opacity: 0.5; cursor: not-allowed; }

input, select, textarea {
  background: var(--bg);
  color: var(--fg);
  border: 1px solid var(--border);
  padding: 0.5em;
  border-radius: var(--radius);
  font-size: 0.95em;
  width: 100%;
}
input:focus, select:focus, textarea:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
label { display: block; margin: 0.8em 0; }
label > input, label > select, label > textarea { margin-top: 0.3em; }

/* --- Auth pages --- */
body.auth {
  display: grid;
  place-items: center;
  min-height: 100vh;
  padding: 2em;
}
.auth-card {
  background: var(--bg-alt);
  border: 1px solid var(--border);
  padding: 2.5em 2em;
  border-radius: calc(var(--radius) * 2);
  width: 360px;
  max-width: 100%;
}
.auth-card.wide { width: 520px; }
.auth-card header h1 { margin: 0; font-size: 1.6em; }
.auth-card .subtitle { color: var(--fg-muted); margin-top: 0.2em; }
.auth-card form { margin-top: 1.2em; }
.auth-card button[type=submit] { width: 100%; padding: 0.7em; margin-top: 1em; }
.auth-card footer { margin-top: 1.5em; font-size: 0.85em; color: var(--fg-muted); }

/* --- App shell --- */
body.app { display: grid; grid-template-columns: 230px 1fr; min-height: 100vh; }
#sidebar {
  background: var(--bg-alt);
  border-right: 1px solid var(--border);
  padding: 1.4em 1em;
  display: flex; flex-direction: column;
}
#sidebar .brand { font-size: 1.1em; margin-bottom: 1.5em; }
#sidebar .brand strong { display: block; font-size: 1.2em; }
#sidebar nav { display: flex; flex-direction: column; gap: 0.4em; flex: 1; }
#sidebar nav a {
  padding: 0.5em 0.7em;
  border-radius: var(--radius);
  color: var(--fg);
}
#sidebar nav a:hover { background: var(--bg-elev); text-decoration: none; }
#sidebar nav a.active { background: var(--accent-dim); color: #fff; }
#sidebar #logout { background: transparent; color: var(--fg-muted); border: 1px solid var(--border); margin-top: 1em; }

#view { padding: 2em; max-width: 1200px; }

/* --- Tables --- */
table.grid {
  width: 100%;
  border-collapse: collapse;
  background: var(--bg-alt);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}
table.grid th, table.grid td {
  padding: 0.6em 0.8em;
  border-bottom: 1px solid var(--border);
  text-align: left;
}
table.grid tr:last-child td { border-bottom: none; }
table.grid th { background: var(--bg-elev); font-weight: 600; font-size: 0.85em; color: var(--fg-muted); text-transform: uppercase; letter-spacing: 0.05em; }
table.grid tr:hover td { background: var(--bg-elev); }

/* --- Cards --- */
.card {
  background: var(--bg-alt);
  border: 1px solid var(--border);
  padding: 1.2em;
  border-radius: var(--radius);
  margin-bottom: 1em;
}
.card h2 { margin-top: 0; }

/* --- QR --- */
.qr-wrap { text-align: center; margin: 1em 0; }
.qr-wrap img { max-width: 220px; image-rendering: pixelated; background: #fff; padding: 8px; border-radius: var(--radius); }

/* --- Status pills --- */
.pill { display: inline-block; padding: 0.15em 0.6em; border-radius: 999px; font-size: 0.8em; font-weight: 600; }
.pill.ok { background: rgba(76, 175, 80, 0.2); color: var(--ok); }
.pill.warn { background: rgba(245, 166, 35, 0.2); color: var(--warn); }
.pill.err { background: rgba(239, 83, 80, 0.2); color: var(--err); }

/* --- Forms compact --- */
.row { display: flex; gap: 0.8em; align-items: end; }
.row > * { flex: 1; }

/* --- Metrics grid --- */
.metrics { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 1em; }
.metric { background: var(--bg-alt); padding: 1em; border: 1px solid var(--border); border-radius: var(--radius); }
.metric .big { font-size: 1.6em; font-weight: 700; }
.metric .label { color: var(--fg-muted); font-size: 0.85em; }