/* Harbor Media admin console.
   Palette matches the harbor-media Keycloak login theme so signing in and
   landing here feels like one system. Theme-aware: an admin tool gets stared
   at for long stretches. */
:root {
  --bg:#f6f7f9; --panel:#fff; --border:#e3e7ec; --fg:#0b1f3a; --muted:#5c6b80;
  --primary:#0b1f3a; --accent:#d98a3d; --up:#22a06b; --down:#d14343;
  --radius:10px;
}
@media (prefers-color-scheme: dark) {
  :root { --bg:#0a1120; --panel:#111a2b; --border:#1e2b40; --fg:#e8edf5;
          --muted:#93a1b5; --primary:#e8edf5; }
}
* { box-sizing:border-box; }
/* MUST come before any rule that sets `display` on an element we toggle with
   the `hidden` attribute. `[hidden]{display:none}` is a low-specificity UA
   default, so `.gate{display:grid}` silently beat it and the sign-in gate
   never actually hid — it just covered the signed-in shell at 100vh while
   every API call underneath succeeded. Found only by reading the server
   trace; nothing server-side was ever wrong. */
[hidden] { display: none !important; }
html,body { height:100%; }
body {
  margin:0; background:var(--bg); color:var(--fg);
  font:15px/1.55 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}
.mark { display:inline-flex; align-items:center; gap:.5rem; font-weight:650; letter-spacing:-.01em; white-space:nowrap; }
.dot { width:.55rem; height:.55rem; border-radius:50%; background:var(--accent); }

/* signed-out gate */
.gate { min-height:100vh; display:grid; place-items:center; padding:1.5rem; }
.gate-card { background:var(--panel); border:1px solid var(--border); border-radius:14px;
  padding:2rem; max-width:24rem; width:100%; }
.gate-card h1 { font-size:1.15rem; margin:1rem 0 .4rem; }
.gate-card p { color:var(--muted); margin:0 0 1.25rem; }

.btn { display:inline-block; background:var(--primary); color:var(--bg); border:1px solid var(--primary);
  padding:.5rem .9rem; border-radius:8px; text-decoration:none; font-weight:600; font-size:.9rem; cursor:pointer; }
.btn.ghost { background:transparent; color:var(--fg); border-color:var(--border); }
.btn:hover { opacity:.9; }

/* shell */
.topbar { display:flex; align-items:center; gap:1rem; padding:.7rem 1.1rem;
  background:var(--panel); border-bottom:1px solid var(--border); position:sticky; top:0; z-index:5; flex-wrap:wrap; }
.spacer { flex:1; }
.who { color:var(--muted); font-size:.85rem; }

.switcher { display:inline-flex; align-items:center; gap:.5rem; }
.switcher-label { font-size:.75rem; text-transform:uppercase; letter-spacing:.06em; color:var(--muted); }
#app-switcher { font:inherit; font-weight:600; color:var(--fg); background:var(--bg);
  border:1px solid var(--border); border-radius:8px; padding:.4rem 2rem .4rem .6rem; min-width:13rem;
  appearance:none;
  background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),linear-gradient(135deg,var(--muted) 50%,transparent 50%);
  background-position:calc(100% - 15px) 50%, calc(100% - 10px) 50%;
  background-size:5px 5px, 5px 5px; background-repeat:no-repeat; cursor:pointer; }

.body { display:grid; grid-template-columns:15rem 1fr; min-height:calc(100vh - 3.4rem); }
@media (max-width:760px){ .body { grid-template-columns:1fr; } .sidebar { border-right:none; border-bottom:1px solid var(--border); } }

.sidebar { background:var(--panel); border-right:1px solid var(--border); padding:1rem .7rem; }
.sidebar button { display:block; width:100%; text-align:left; background:none; border:none;
  color:var(--fg); font:inherit; padding:.5rem .65rem; border-radius:8px; cursor:pointer; }
.sidebar button:hover { background:var(--bg); }
.sidebar button[aria-current="true"] { background:var(--bg); font-weight:650; }
.sidebar .hint { color:var(--muted); font-size:.85rem; padding:.5rem .65rem; }
.sidebar a.ext { display:block; padding:.5rem .65rem; color:var(--accent); font-size:.9rem; }

.content { padding:1.5rem; min-width:0; }
.empty { color:var(--muted); }
.err { border:1px solid var(--down); color:var(--down); background:color-mix(in srgb,var(--down) 8%,transparent);
  padding:.8rem 1rem; border-radius:var(--radius); }

.status { display:inline-flex; align-items:center; gap:.35rem; font-size:.8rem; color:var(--muted); }
.status::before { content:""; width:.5rem; height:.5rem; border-radius:50%; background:var(--muted); }
.status.up::before { background:var(--up); }
.status.down::before { background:var(--down); }

.stats { display:grid; grid-template-columns:repeat(auto-fill,minmax(11rem,1fr)); gap:.8rem; }
.stat { background:var(--panel); border:1px solid var(--border); border-radius:var(--radius); padding:1rem; }
.stat .label { color:var(--muted); font-size:.8rem; }
.stat .value { font-size:1.5rem; font-weight:650; letter-spacing:-.02em; }

.table-wrap { overflow-x:auto; background:var(--panel); border:1px solid var(--border); border-radius:var(--radius); }
table { border-collapse:collapse; width:100%; font-size:.9rem; }
th,td { text-align:left; padding:.6rem .8rem; border-bottom:1px solid var(--border); white-space:nowrap; }
th { color:var(--muted); font-weight:600; font-size:.78rem; text-transform:uppercase; letter-spacing:.05em; }
tr:last-child td { border-bottom:none; }

pre { background:var(--panel); border:1px solid var(--border); border-radius:var(--radius);
  padding:1rem; overflow-x:auto; font-size:.85rem; }
h2 { font-size:1.05rem; margin:0 0 .25rem; }
.sub { color:var(--muted); font-size:.9rem; margin:0 0 1.1rem; }