/* Athena Cloud admin UI: one stylesheet, light + dark themes.
   Brand colour #1C3148 (sidebar, primary actions). Amber accent for the active nav pill. */
:root {
  --brand:#1C3148; --brand-2:#26425F; --brand-ink:#FFFFFF;
  --accent:#E08A1E; --accent-ink:#FFFFFF;
  --bg:#F4F5F7; --surface:#FFFFFF; --surface-2:#F8F9FB; --border:#E3E6EB;
  --text:#14202E; --muted:#667487; --link:#1C3148;
  --ok-bg:#E3F5E8; --ok-fg:#1B6B35;
  --info-bg:#E4EDF9; --info-fg:#1F4E96;
  --warn-bg:#FDF0D3; --warn-fg:#8A5A00;
  --bad-bg:#FCE4E2; --bad-fg:#A3241B;
  --shadow:0 1px 2px rgba(20,32,46,.06), 0 1px 1px rgba(20,32,46,.04);
  --shadow-lg:0 12px 40px rgba(20,32,46,.22);
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --side-w:232px; --radius:10px;
  color-scheme: light;
}
:root[data-theme="dark"] {
  --brand:#1C3148; --brand-2:#2A4666;
  --bg:#0E1621; --surface:#152130; --surface-2:#1A2838; --border:#26364A;
  --text:#E6EBF2; --muted:#93A1B5; --link:#8DB4E8;
  --ok-bg:#16361F; --ok-fg:#7FD69A;
  --info-bg:#182C4A; --info-fg:#8DB4E8;
  --warn-bg:#3A2D0D; --warn-fg:#F0C163;
  --bad-bg:#40191A; --bad-fg:#F4968F;
  --shadow:0 1px 2px rgba(0,0,0,.4);
  --shadow-lg:0 12px 40px rgba(0,0,0,.6);
  color-scheme: dark;
}
/* No-JS fallback: follow the OS until the script sets data-theme explicitly. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --bg:#0E1621; --surface:#152130; --surface-2:#1A2838; --border:#26364A;
    --text:#E6EBF2; --muted:#93A1B5; --link:#8DB4E8;
    --ok-bg:#16361F; --ok-fg:#7FD69A; --info-bg:#182C4A; --info-fg:#8DB4E8;
    --warn-bg:#3A2D0D; --warn-fg:#F0C163; --bad-bg:#40191A; --bad-fg:#F4968F;
    color-scheme: dark;
  }
}

* { box-sizing:border-box; }
[hidden] { display:none !important; }
html, body { height:100%; }
body { margin:0; background:var(--bg); color:var(--text); font:400 15px/1.5 var(--sans); -webkit-font-smoothing:antialiased; }
a { color:var(--link); }
h1 { font-size:24px; line-height:1.25; margin:0 0 4px; font-weight:650; letter-spacing:-.01em; }
h2 { font-size:16px; margin:0 0 4px; font-weight:650; }
code { font-family:var(--mono); font-size:.88em; background:var(--surface-2); border:1px solid var(--border); padding:1px 5px; border-radius:5px; }
.muted { color:var(--muted); font-size:14px; margin:0; }
.mono { font-family:var(--mono); font-size:13px; }
.mono.small { font-size:12px; color:var(--muted); }
.icon { width:18px; height:18px; flex:none; stroke:currentColor; fill:none; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.sr-only { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }

/* ---- app shell ---- */
.shell { display:grid; grid-template-columns:var(--side-w) 1fr; min-height:100vh; }
.sidebar { background:var(--brand); color:#C9D4E2; display:flex; flex-direction:column; position:sticky; top:0; height:100vh; padding:0 12px 14px; z-index:30; }
.side-brand { display:flex; align-items:center; gap:10px; padding:22px 10px 18px; color:#fff; font-weight:700; font-size:18px; letter-spacing:.01em; border-bottom:1px solid rgba(255,255,255,.1); margin:0 -2px 14px; text-decoration:none; }
.side-brand .logo { width:30px; height:30px; border-radius:8px; background:var(--accent); display:grid; place-items:center; color:#fff; }
.side-nav { display:flex; flex-direction:column; gap:4px; flex:1; }
.side-nav a { display:flex; align-items:center; gap:12px; padding:10px 12px; border-radius:9px; color:#B7C4D6; text-decoration:none; font-size:14px; font-weight:500; }
.side-nav a:hover { background:rgba(255,255,255,.07); color:#fff; }
.side-nav a[aria-current="page"] { background:var(--accent); color:var(--accent-ink); box-shadow:0 2px 8px rgba(0,0,0,.25); }
.side-foot { border-top:1px solid rgba(255,255,255,.1); padding-top:12px; font-size:12px; color:#93A5BD; }
.side-foot .who { display:flex; align-items:center; gap:10px; padding:6px 6px 10px; min-width:0; }
.side-foot .who div { min-width:0; }
.side-foot .who strong { display:block; color:#fff; font-size:13px; font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.side-foot .who span { text-transform:capitalize; }
.avatar { width:34px; height:34px; border-radius:50%; background:var(--brand-2); color:#fff; display:grid; place-items:center; font-weight:650; font-size:13px; flex:none; border:2px solid rgba(255,255,255,.18); }
.side-foot .side-btn { width:100%; }

.main { min-width:0; display:flex; flex-direction:column; }
.topbar { display:flex; align-items:center; gap:12px; height:60px; padding:0 28px; background:var(--surface); border-bottom:1px solid var(--border); position:sticky; top:0; z-index:20; }
.crumbs { display:flex; align-items:center; gap:8px; font-size:14px; color:var(--muted); flex:1; min-width:0; }
.crumbs a { color:var(--muted); text-decoration:none; }
.crumbs a:hover { color:var(--text); }
.crumbs b { color:var(--text); font-weight:600; }
.crumbs .sep { opacity:.6; }
.icon-btn.menu-btn { display:none; }
.icon-btn { background:transparent; border:1px solid var(--border); color:var(--text); width:38px; height:38px; border-radius:10px; display:inline-grid; place-items:center; cursor:pointer; }
.icon-btn:hover { background:var(--surface-2); }
.theme-btn .moon { display:none; }
:root[data-theme="dark"] .theme-btn .sun { display:none; }
:root[data-theme="dark"] .theme-btn .moon { display:block; }
.wrap { padding:28px; max-width:1280px; width:100%; }
.page-head { margin-bottom:20px; }
.scrim { display:none; }

/* ---- controls ---- */
.btn, button[type="submit"], .inline-form button { display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:8px 16px; border-radius:9px; border:1px solid var(--brand); background:var(--brand); color:var(--brand-ink); font:600 14px var(--sans); cursor:pointer; text-decoration:none; }
:root[data-theme="dark"] .btn, :root[data-theme="dark"] button[type="submit"], :root[data-theme="dark"] .inline-form button { background:var(--brand-2); border-color:var(--brand-2); }
.btn:hover, button[type="submit"]:hover { filter:brightness(1.12); }
.btn.ghost, .link-btn { background:transparent; color:var(--text); border:1px solid var(--border); }
.btn.ghost:hover, .link-btn:hover { background:var(--surface-2); }
.link-btn { padding:5px 11px; border-radius:8px; font:500 13px var(--sans); cursor:pointer; text-decoration:none; display:inline-flex; align-items:center; }
.link-btn.danger, .btn.danger { color:var(--bad-fg); border-color:transparent; background:var(--bad-bg); }
.link-btn.danger:hover { filter:brightness(.96); }
.side-btn { display:flex; align-items:center; gap:10px; padding:9px 12px; border-radius:9px; border:0; background:transparent; color:#B7C4D6; font:500 14px var(--sans); cursor:pointer; }
.side-btn:hover { background:rgba(255,255,255,.07); color:#fff; }
input, select, textarea { font:inherit; color:var(--text); background:var(--surface); border:1px solid var(--border); border-radius:9px; padding:9px 12px; }
input::placeholder, textarea::placeholder { color:var(--muted); }
input:focus, select:focus, textarea:focus { outline:2px solid var(--accent); outline-offset:0; border-color:transparent; }
.inline-form { display:flex; gap:10px; align-items:center; flex-wrap:wrap; margin:0 0 16px; }

.toolbar { display:flex; gap:12px; flex-wrap:wrap; align-items:center; margin-bottom:16px; }
.search { position:relative; flex:1 1 320px; }
.search .icon { position:absolute; left:12px; top:50%; transform:translateY(-50%); color:var(--muted); }
.search input { width:100%; padding-left:38px; }
.seg { display:inline-flex; background:var(--surface); border:1px solid var(--border); border-radius:999px; padding:4px; gap:2px; flex-wrap:wrap; box-shadow:var(--shadow); margin-bottom:18px; }
.seg button { display:inline-flex; align-items:center; gap:8px; border:0; background:transparent; color:var(--muted); font:600 13px var(--sans); padding:7px 14px; border-radius:999px; cursor:pointer; }
.seg button .n { background:var(--surface-2); border:1px solid var(--border); color:var(--text); border-radius:999px; min-width:24px; padding:0 7px; font-size:12px; line-height:20px; text-align:center; }
.seg button[aria-pressed="true"] { background:var(--brand); color:#fff; }
:root[data-theme="dark"] .seg button[aria-pressed="true"] { background:var(--brand-2); }
.seg button[aria-pressed="true"] .n { background:rgba(255,255,255,.16); border-color:transparent; color:#fff; }

/* ---- cards / device grid ---- */
.card { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow); }
.grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(min(290px, 100%), 1fr)); gap:16px; }
.dcard { padding:16px 18px 14px; display:flex; flex-direction:column; gap:6px; }
.dcard h3 { margin:0; font:600 14px var(--mono); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.dcard .sub { color:var(--muted); font-size:13px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.dcard .meta { display:flex; align-items:center; gap:8px; color:var(--muted); font-size:13px; }
.dcard .foot { display:flex; align-items:center; justify-content:space-between; gap:8px; border-top:1px solid var(--border); margin-top:8px; padding-top:12px; flex-wrap:wrap; }
.dcard .actions { display:flex; gap:6px; }
.pill { display:inline-flex; align-items:center; gap:6px; padding:3px 11px; border-radius:999px; font-size:12px; font-weight:600; background:var(--info-bg); color:var(--info-fg); white-space:nowrap; }
.pill::before { content:""; width:7px; height:7px; border-radius:50%; background:currentColor; }
.pill.ok { background:var(--ok-bg); color:var(--ok-fg); }
.pill.warn { background:var(--warn-bg); color:var(--warn-fg); }
.pill.bad { background:var(--bad-bg); color:var(--bad-fg); }
.pill.neutral { background:var(--surface-2); color:var(--muted); border:1px solid var(--border); }
.empty { text-align:center; color:var(--muted); padding:48px 16px; }

/* ---- tables ---- */
.tablewrap { overflow-x:auto; }
table { border-collapse:collapse; width:100%; font-size:14px; }
th, td { text-align:left; padding:11px 16px; border-bottom:1px solid var(--border); white-space:nowrap; }
th { color:var(--muted); font-size:12px; text-transform:uppercase; letter-spacing:.04em; font-weight:600; background:var(--surface-2); }
tbody tr:hover td { background:var(--surface-2); }
tr:last-child td { border-bottom:0; }
section { margin-bottom:28px; }
section > h2 { margin-bottom:10px; }
.banner { background:var(--warn-bg); color:var(--warn-fg); border:1px solid var(--warn-fg); padding:10px 14px; border-radius:9px; font-family:var(--mono); font-size:13px; word-break:break-all; margin:0 0 16px; }
.error { color:var(--bad-fg); font-size:13px; margin:0; }

dialog { border:1px solid var(--border); border-radius:14px; padding:24px; max-width:560px; width:calc(100% - 32px); background:var(--surface); color:var(--text); box-shadow:var(--shadow-lg); }
dialog::backdrop { background:rgba(8,14,22,.55); }
#reveal-blob { width:100%; font-family:var(--mono); font-size:12px; margin:12px 0; }
.dialog-actions { display:flex; gap:10px; justify-content:flex-end; }

/* ---- login ---- */
.login-page { min-height:100vh; display:grid; place-items:center; padding:24px; background:radial-gradient(900px 500px at 15% -10%, rgba(28,49,72,.14), transparent 60%), var(--bg); }
.login-card { width:100%; max-width:400px; padding:32px; background:var(--surface); border:1px solid var(--border); border-radius:16px; box-shadow:var(--shadow-lg); }
.login-card .logo { width:44px; height:44px; border-radius:12px; background:var(--brand); color:#fff; display:grid; place-items:center; margin-bottom:16px; }
.login-card form { display:flex; flex-direction:column; gap:14px; margin-top:22px; }
.login-card label { font-size:13px; color:var(--muted); display:flex; flex-direction:column; gap:6px; font-weight:500; }
.login-card button[type="submit"] { padding:11px 16px; margin-top:4px; }
.login-theme { position:fixed; top:16px; right:16px; }

/* ---- small screens: sidebar becomes a slide-in drawer ---- */
@media (max-width: 860px) {
  .shell { grid-template-columns:minmax(0,1fr); }
  .sidebar { position:fixed; inset:0 auto 0 0; width:260px; transform:translateX(-100%); transition:transform .2s ease; }
  .nav-open .sidebar { transform:none; box-shadow:var(--shadow-lg); }
  .nav-open .scrim { display:block; position:fixed; inset:0; background:rgba(8,14,22,.5); z-index:25; }
  .icon-btn.menu-btn { display:inline-grid; }
  .topbar { padding:0 16px; }
  .wrap { padding:18px 16px 40px; }
}
@media (prefers-reduced-motion: reduce) { .sidebar { transition:none; } }

.wrapcell { white-space:normal; max-width:360px; }
.detail-card { padding:20px 22px; }
.kv { display:grid; grid-template-columns:160px 1fr; gap:8px 16px; margin:0 0 20px; }
.kv dt { color:var(--muted); font-size:13px; }
.kv dd { margin:0; }
pre.payload { background:var(--surface-2); border:1px solid var(--border); border-radius:9px; padding:14px; overflow:auto; font:12px/1.45 var(--mono); white-space:pre-wrap; word-break:break-word; }
td.actions { display:flex; gap:6px; flex-wrap:wrap; }