/* switchboard Admin UI.
   Hand-written, no framework: the whole page is a handful of cards, a few
   tables, and forms. Colors come from a small token set so light and dark are
   the same stylesheet. */

:root {
  /* Let the native controls -- checkboxes, carets, scrollbars -- follow the
     theme too, so a dark page has no white checkboxes punched through it. */
  color-scheme: light dark;
  accent-color: #0369a1;

  --bg: #fbfbfa;
  --panel: #ffffff;
  --sunken: #f3f4f6;
  --ink: #16191d;
  --muted: #6b7280;
  --line: #e3e6ea;
  --accent: #0369a1;
  --ok: #047857;
  --ok-bg: #ecfdf5;
  --warn: #b45309;
  --warn-bg: #fffbeb;
  --danger: #b91c1c;
  --danger-bg: #fef2f2;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
}

@media (prefers-color-scheme: dark) {
  :root {
    accent-color: #58b6ff;

    --bg: #0d1117;
    --panel: #151b23;
    --sunken: #10151c;
    --ink: #d6dde6;
    --muted: #8b949e;
    --line: #262d36;
    --accent: #58b6ff;
    --ok: #4ade80;
    --ok-bg: #10241a;
    --warn: #fbbf24;
    --warn-bg: #2a1f08;
    --danger: #f87171;
    --danger-bg: #2a1214;
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  padding: 0 1.25rem 4rem;
  background: var(--bg);
  color: var(--ink);
  font: 15px/1.5 system-ui, -apple-system, "Segoe UI", sans-serif;
}

header, nav.tabs, main, footer { max-width: 1100px; margin: 0 auto; }

/* The hidden attribute is what the tab script toggles; nothing here may ever
   out-specify it. */
[hidden] { display: none !important; }

header { padding: 2rem 0 1rem; }
h1 { margin: 0; font-size: 1.4rem; letter-spacing: -0.01em; }
h2 { margin: 0; font-size: 1.05rem; }
h3 { margin: 0 0 0.5rem; font-size: 0.9rem; font-weight: 600; }
.lede { margin: 0.25rem 0 0; color: var(--muted); font-size: 0.875rem; }

code, pre, input, textarea, button, .tag { font-family: var(--mono); }
code { font-size: 0.85em; }

/* Tabs ----------------------------------------------------------------- */

nav.tabs {
  display: flex;
  gap: 0.25rem;
  flex-wrap: wrap;
  margin-bottom: 1.25rem;
  border-bottom: 1px solid var(--line);
}

/* Tab buttons are navigation, not actions, so they drop the button chrome and
   carry their state in an underline instead. */
nav.tabs button {
  background: none;
  border: 0;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  margin-bottom: -1px;
  padding: 0.45rem 0.8rem;
  font-size: 0.85rem;
  color: var(--muted);
}
nav.tabs button:hover { color: var(--ink); }
nav.tabs button.active { color: var(--accent); border-bottom-color: var(--accent); }

/* The explainer at the top of a tab: what this thing is, before the controls
   for it. Prose, not chrome, so it reads before it decorates. */
.docs {
  margin: 0 0 1rem;
  padding: 0.15rem 0 0.15rem 0.8rem;
  border-left: 3px solid var(--line);
  font-size: 0.82rem;
  color: var(--muted);
}
.docs p { margin: 0.35rem 0; }
.docs strong { color: var(--ink); font-weight: 600; }
.docs ul { margin: 0.35rem 0; padding-left: 1.1rem; }
.docs li { margin: 0.2rem 0; }

/* Panels ------------------------------------------------------------- */

.panel {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 1rem 1.25rem 1.25rem;
  margin-bottom: 1.25rem;
}

.panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-bottom: 0.75rem;
  margin-bottom: 0.75rem;
  border-bottom: 1px solid var(--line);
}

.region {
  padding: 0.75rem 0;
  border-bottom: 1px solid var(--line);
}
.region:last-child { border-bottom: 0; padding-bottom: 0; }

/* A region name is data; the two summary sections below them are labels. They
   sit at the same heading level, so the styling has to tell them apart. */
.region-name {
  font-family: var(--mono);
  font-size: 1rem;
  color: var(--accent);
}
.region-name .count {
  font-family: inherit;
  font-size: 0.7rem;
  font-weight: 400;
  color: var(--muted);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 0 0.4rem;
  vertical-align: 0.1em;
}
.region.meta > h3 {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
}

.gateway { margin: 0 0 0.5rem; font-size: 0.85rem; color: var(--muted); }
.gateway.none { color: var(--warn); }

/* Status line --------------------------------------------------------- */

.flash {
  margin-top: 0.75rem;
  padding: 0.45rem 0.7rem;
  border-radius: 6px;
  font-size: 0.85rem;
  border: 1px solid transparent;
}
.flash:empty { display: none; }
.flash.ok { background: var(--ok-bg); border-color: var(--ok); color: var(--ok); }
.flash.error { background: var(--danger-bg); border-color: var(--danger); color: var(--danger); }

.error {
  margin: 0.5rem 0;
  padding: 0.45rem 0.7rem;
  border-radius: 6px;
  background: var(--danger-bg);
  border: 1px solid var(--danger);
  color: var(--danger);
  font-size: 0.85rem;
}

.empty { margin: 0.5rem 0; color: var(--muted); font-size: 0.875rem; }
.hint { margin: 0.4rem 0; color: var(--muted); font-size: 0.8rem; }
.muted { color: var(--muted); }

/* Tables -------------------------------------------------------------- */

table { width: 100%; border-collapse: collapse; font-size: 0.85rem; }
th {
  text-align: left;
  font-weight: 500;
  color: var(--muted);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 0.3rem 0.5rem;
  border-bottom: 1px solid var(--line);
}
td { padding: 0.35rem 0.5rem; border-bottom: 1px solid var(--line); vertical-align: middle; }
tr:last-child td { border-bottom: 0; }
tr.is-stale td code { color: var(--muted); }
td.actions { text-align: right; white-space: nowrap; }

ul.links, ul.edges { list-style: none; margin: 0; padding: 0; font-size: 0.85rem; }
ul.links li, ul.edges li {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.25rem 0;
}
ul.edges li { color: var(--muted); }

/* Tags ---------------------------------------------------------------- */

.tag {
  display: inline-block;
  padding: 0.05rem 0.35rem;
  border-radius: 4px;
  background: var(--sunken);
  border: 1px solid var(--line);
  color: var(--muted);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.tag.ok { background: var(--ok-bg); border-color: var(--ok); color: var(--ok); }
.tag.warn { background: var(--warn-bg); border-color: var(--warn); color: var(--warn); }
.tag.link { border-color: var(--accent); color: var(--accent); }

/* Forms --------------------------------------------------------------- */

.forms {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 1.25rem;
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--line);
}

.stack { display: flex; flex-direction: column; gap: 0.4rem; min-width: 0; }
.stack.narrow { max-width: 32rem; }

label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.8rem;
  color: var(--muted);
}
label > input[type=text], label > textarea { flex: 1; min-width: 0; }
label.toggle { color: var(--ink); font-size: 0.85rem; }

input[type=text], textarea {
  padding: 0.3rem 0.45rem;
  border: 1px solid var(--line);
  border-radius: 5px;
  background: var(--sunken);
  color: var(--ink);
  font-size: 0.82rem;
}
input[type=text]:focus, textarea:focus {
  outline: 2px solid var(--accent);
  outline-offset: -1px;
}
textarea { resize: vertical; width: 100%; }

.actions { display: flex; gap: 0.4rem; flex-wrap: wrap; }

button {
  padding: 0.28rem 0.6rem;
  border: 1px solid var(--line);
  border-radius: 5px;
  background: var(--sunken);
  color: var(--ink);
  font-size: 0.78rem;
  cursor: pointer;
}
button:hover { border-color: var(--accent); color: var(--accent); }
button.danger:hover { border-color: var(--danger); color: var(--danger); }
button[type=submit] { border-color: var(--accent); color: var(--accent); }

/* Keys and tokens ------------------------------------------------------ */

.key { padding: 0.6rem 0; border-bottom: 1px solid var(--line); }
.key:last-child { border-bottom: 0; }
.key-head { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.key-head .kid { cursor: pointer; font-weight: 600; font-size: 0.9rem; }
.key-head .kid:hover { color: var(--accent); }
.key-head .muted { font-size: 0.78rem; }
.scope { margin: 0.3rem 0 0.5rem; font-size: 0.8rem; color: var(--muted); }

pre {
  margin: 0.4rem 0;
  padding: 0.55rem 0.7rem;
  background: var(--sunken);
  border: 1px solid var(--line);
  border-radius: 6px;
  font-size: 0.75rem;
  overflow-x: auto;
  white-space: pre-wrap;
  word-break: break-all;
}
pre.jwt { color: var(--accent); }

.result:empty { display: none; }
.token-head { display: flex; align-items: center; gap: 0.5rem; font-size: 0.82rem; flex-wrap: wrap; }
.verified p { margin: 0; font-size: 0.82rem; }

/* Account dashboard ---------------------------------------------------- */

/* The signed-in identity strip: which namespace this page is showing, who is
   looking at it, and the way out. */
.whoami {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-wrap: wrap;
  margin-top: 0.85rem;
}
.whoami .muted { font-size: 0.8rem; }
.whoami button { margin-left: auto; }

/* A namespace reads as identity rather than as status, so it gets the accent
   instead of one of the ok/warn colors. */
.tag.ns { border-color: var(--accent); color: var(--accent); font-weight: 600; }

/* A secret on its one and only appearance. Loud on purpose: scrolling past it
   means losing it. */
.fresh {
  margin: 0 0 0.9rem;
  padding: 0.6rem 0.75rem;
  background: var(--warn-bg);
  border: 1px solid var(--warn);
  border-radius: 8px;
}
.fresh .token-head { color: var(--warn); }
.fresh pre.jwt { background: var(--panel); }

footer { margin-top: 1.5rem; color: var(--muted); font-size: 0.78rem; }
footer p { margin: 0; }

/* htmx marks the element it is fetching for; a faint fade beats a spinner. */
.htmx-request, .htmx-request.htmx-swapping { opacity: 0.55; transition: opacity 120ms ease; }