/* ── Shared styles for Casa Bonita Telemetry inner pages ─────────────────── */

:root {
  --bg: #0f1117;
  --surface: #1a1d27;
  --surface2: #22263a;
  --border: #2e3350;
  --accent: #5b8af7;
  --accent2: #7c5bf7;
  --text: #e2e8f0;
  --text-muted: #8892a4;
  --red: #f87171;
  --yellow: #fbbf24;
  --green: #34d399;
  --blue: #60a5fa;
  --orange: #fb923c;
  --radius: 8px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
body { background: var(--bg); color: var(--text); font-family: 'Segoe UI', system-ui, sans-serif; font-size: 14px; min-height: 100vh; }

.app  { display: grid; grid-template-rows: 1fr; min-height: 100vh; }
.main { display: grid; height: 100vh; overflow: hidden; }

/* ── Sidebar ──────────────────────────────────────────────────────────────── */
.sidebar      { background: var(--surface); border-right: 1px solid var(--border); overflow-y: auto; display: flex; flex-direction: column; }
.section      { border-bottom: 1px solid var(--border); padding: 16px; }
.section-title { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-muted); margin-bottom: 12px; }

label             { display: block; font-size: 12px; color: var(--text-muted); margin-bottom: 4px; margin-top: 10px; }
label:first-of-type { margin-top: 0; }
input, select     { width: 100%; background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius); color: var(--text); padding: 7px 10px; font-size: 13px; outline: none; transition: border-color 0.15s; }
input:focus, select:focus { border-color: var(--accent); }
input[type=datetime-local] { color-scheme: dark; }

/* ── Buttons ──────────────────────────────────────────────────────────────── */
.btn           { display: flex; align-items: center; justify-content: center; gap: 6px; padding: 8px 14px; border-radius: var(--radius); border: none; cursor: pointer; font-size: 13px; font-weight: 500; transition: opacity 0.15s, background 0.15s; width: 100%; margin-top: 12px; }
.btn-primary   { background: var(--accent); color: #fff; }
.btn-primary:hover { opacity: 0.85; }
.btn-secondary { background: var(--surface2); color: var(--text); border: 1px solid var(--border); }
.btn-secondary:hover { background: var(--border); }
.btn:disabled  { opacity: 0.45; cursor: not-allowed; }

/* ── Empty state / loading ────────────────────────────────────────────────── */
.empty     { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; color: var(--text-muted); gap: 12px; padding: 40px; text-align: center; }
.empty svg { opacity: 0.3; }
.spinner   { width: 28px; height: 28px; border: 3px solid var(--border); border-top-color: var(--accent); border-radius: 50%; animation: spin 0.7s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.spinner-sm { width: 16px; height: 16px; border-width: 2px; }

/* ── Toast ────────────────────────────────────────────────────────────────── */
.toast         { position: fixed; bottom: 20px; right: 20px; background: var(--surface2); border: 1px solid var(--border); border-radius: var(--radius); padding: 10px 16px; font-size: 13px; z-index: 1000; animation: slide-in 0.2s ease; }
.toast.error   { border-color: var(--red);   color: var(--red); }
.toast.success { border-color: var(--green); color: var(--green); }
@keyframes slide-in { from { transform: translateY(10px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }

/* ── Utility ──────────────────────────────────────────────────────────────── */
.hidden { display: none; }
.pagination-info { font-size: 12px; color: var(--text-muted); margin-bottom: 8px; }
.btn-sm { width: auto; margin: 0; padding: 5px 12px; font-size: 12px; }

/* ── Severity badges ──────────────────────────────────────────────────────── */
.sev-critical { background: rgba(248,113,113,0.2); color: #f87171; }
.sev-high     { background: rgba(251,191,36,0.2);  color: #fbbf24; }
.sev-medium   { background: rgba(96,165,250,0.2);  color: #60a5fa; }
.sev-low      { background: rgba(148,163,184,0.2); color: #94a3b8; }
.sev-info     { background: rgba(148,163,184,0.15);color: #94a3b8; }