sagittarius 0.2.0

/* Sagittarius admin — thin custom layer on top of Pico CSS.
 *
 * Pico styles the semantic HTML automatically; this file only adds the few
 * bespoke widgets the admin UI needs: the top navigation bar, the dashboard
 * stat cards, outcome badges for the live query log, and a handful of layout
 * utilities. Keep it small — prefer Pico's classless defaults wherever they
 * already look good. */

:root {
  /* Inherit Pico's "pumpkin" preset primary (a warm orange that echoes the
   * accretion-disc of the logo) so the accent stays in sync with the theme
   * across light/dark modes instead of being hardcoded here. */
  --sgt-accent: var(--pico-primary);

  /* Pico sizes everything in rem, so trimming the root font-size scales the
   * whole admin UI down a notch — titles, body text, inputs, and spacing —
   * for a denser, less oversized feel. */
  font-size: 87.5%;
}

/* ── Icons ───────────────────────────────────────────────────────────────── */

/* Inline Lucide icon (served as a sprite from /assets/icons.svg, see
 * src/web/icons.rs). Sized to the surrounding text (1em) and inheriting its
 * colour via currentColor, so icons track font-size and theme automatically.
 * The slight negative baseline nudge aligns the optical centre with text. */
.sgt-icon {
  width: 1em;
  height: 1em;
  display: inline-block;
  vertical-align: -0.125em;
  flex: 0 0 auto;
  fill: none;
  stroke: currentColor;
}

/* ── Top navigation bar ─────────────────────────────────────────────────── */

.sgt-topbar {
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--pico-card-background-color);
  border-bottom: 1px solid var(--pico-muted-border-color);
  box-shadow: var(--pico-card-box-shadow);
}

.sgt-topbar nav {
  align-items: center;
  gap: 0.25rem;
}

/* Trim the bar height: Pico pads each top-level nav <li> generously; tighten
 * the vertical padding so the bar isn't taller than it needs to be. */
.sgt-topbar > nav > ul > li {
  padding-top: 0.2rem;
  padding-bottom: 0.2rem;
}

.sgt-brand {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  text-decoration: none;
  color: var(--pico-color);
}

.sgt-brand img {
  display: block;
  width: 22px;
  height: 22px;
}

.sgt-brand strong {
  font-size: 1.05rem;
  letter-spacing: 0.01em;
}

/* The link row in the middle of the navbar. Wraps gracefully on narrow
 * viewports rather than overflowing. */
.sgt-nav {
  flex-wrap: wrap;
  justify-content: center;
  flex: 1 1 auto;
}

.sgt-nav a {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.25rem 0.6rem;
  border-radius: var(--pico-border-radius);
  text-decoration: none;
}

/* The nav-link icons sit slightly above text weight; nudge their size up a
 * touch and let the active accent recolour them via currentColor. */
.sgt-nav a .sgt-icon {
  font-size: 1.1em;
}

/* Any button / summary that carries an icon lays it out inline with a small
 * gap before the label (pause, logout, and the row actions added later). */
button:has(.sgt-icon),
summary:has(.sgt-icon) {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

.sgt-nav a[aria-current="page"] {
  background: color-mix(in srgb, var(--sgt-accent) 18%, transparent);
  color: var(--sgt-accent);
  font-weight: 600;
}

/* Hamburger toggle. Hidden on desktop; revealed by the mobile breakpoint at
 * the foot of this file. Datastar flips the `navOpen` signal on click and we
 * toggle a class (not inline display) so the desktop layout stays pure CSS. */
.sgt-nav-toggle {
  display: none;
  flex: 0 0 auto;
}

.sgt-hamburger {
  margin: 0;
  padding: 0.3rem 0.5rem;
  width: auto;
  font-size: 1.4rem;
  line-height: 1;
  background: transparent;
  border: none;
  /* `inherit`, not `var(--pico-color)`: Pico scopes --pico-color to #000 on
   * form controls, which would render the icon black (invisible) in dark mode.
   * Inheriting the navbar's text colour stays correct in both themes. */
  color: inherit;
  cursor: pointer;
}

.sgt-hamburger:hover {
  color: var(--sgt-accent);
}

/* ── Far-right icon controls (settings, theme, pause, logout) ─────────────── */

/* Borderless icon buttons/links — no Pico form chrome, just the glyph, which
 * picks up the accent on hover/active. Scoped under .sgt-topbar so they beat
 * Pico's button/summary styling. */
.sgt-topbar .sgt-icon-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  margin: 0;
  padding: 0.4rem 0.5rem;
  width: auto;
  background: transparent;
  border: none;
  color: inherit;
  text-decoration: none;
  line-height: 1;
  cursor: pointer;
}

.sgt-topbar .sgt-icon-btn:hover,
.sgt-topbar .sgt-icon-btn[aria-current="page"] {
  background: transparent;
  color: var(--sgt-accent);
}

/* Icon-only controls (settings, theme, logout) get a slightly larger glyph. */
.sgt-topbar .sgt-icon-btn .sgt-icon {
  font-size: 1.3rem;
}

/* Pause keeps a text label, so match its icon to the label size. */
.sgt-topbar .sgt-pause-summary .sgt-icon {
  font-size: 1.1em;
}

/* Strip Pico's select-style chrome from the topbar Pause dropdown summary:
 * Pico's `details.dropdown>summary:not([role])` (specificity 0,2,2) paints a
 * border, a form background and a muted placeholder colour, so match that
 * specificity to undo it and blend the summary into the bar. The ▾ caret (a
 * ::after image) is left intact to signal the menu. */
.sgt-topbar details.dropdown summary {
  height: auto;
  border: none;
  background: transparent;
  color: inherit;
}

.sgt-topbar details.dropdown summary:hover,
.sgt-topbar details.dropdown summary:focus,
.sgt-topbar details.dropdown summary:active {
  border: none;
  background: transparent;
  color: var(--sgt-accent);
}

/* Pico rings the summary with a focus box-shadow, which looks like a border
 * while the menu is open. Drop it for pointer focus (opening the menu) but
 * keep it for keyboard focus (:focus-visible) so the control stays accessible. */
.sgt-topbar details.dropdown summary:focus:not(:focus-visible) {
  box-shadow: none;
}

/* ── Pause control + banner (E12) ────────────────────────────────────────── */

/* Keep the navbar pause dropdown compact and its panel from stretching the
 * navbar height. */
.sgt-pause-menu {
  margin: 0;
}

.sgt-pause-menu summary {
  width: auto;
}

/* Render the preset forms as flush menu items rather than stacked buttons. */
.sgt-pause-opt {
  display: block;
  width: 100%;
  margin: 0;
  padding: 0.3rem 0.5rem;
  text-align: start;
  background: transparent;
  border: none;
  /* `inherit` rather than var(--pico-color); see .sgt-hamburger note — Pico's
   * form-control --pico-color is black and would be invisible in dark mode. */
  color: inherit;
  font-size: 0.85rem;
}

.sgt-pause-opt:hover {
  background: color-mix(in srgb, var(--sgt-accent) 14%, transparent);
  color: var(--sgt-accent);
}

/* A prominent, full-width banner shown on every page while blocking is paused. */
.sgt-paused {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  flex-wrap: wrap;
  padding: 0.5rem 1rem;
  background: color-mix(in srgb, var(--sgt-accent) 16%, transparent);
  border-bottom: 1px solid var(--sgt-accent);
  color: var(--pico-color);
  font-size: 0.92rem;
}

.sgt-paused strong {
  font-variant-numeric: tabular-nums;
}

/* ── Dashboard stat cards ────────────────────────────────────────────────── */

.sgt-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.sgt-card {
  margin: 0;
  padding: 1rem 1.25rem;
  text-align: center;
}

/* Leading metric icon, centred above the figure in the accent colour. */
.sgt-card > .sgt-icon {
  display: block;
  margin: 0 auto 0.5rem;
  font-size: 1.4rem;
  color: var(--sgt-accent);
}

/* Page headings (h1), section headings (h2) and panel headers (the
 * top-domains/clients cards) lay their icon out inline with the title text. */
.sgt-page-title,
.sgt-section-title,
.sgt-panel-title {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.sgt-page-title .sgt-icon,
.sgt-section-title .sgt-icon {
  color: var(--sgt-accent);
}

.sgt-card .sgt-figure {
  display: block;
  font-size: 2rem;
  font-weight: 700;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}

.sgt-card .sgt-label {
  display: block;
  margin-top: 0.25rem;
  color: var(--pico-muted-color);
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* Two side-by-side panels (e.g. top domains / top clients). */
.sgt-columns {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
  gap: 1rem;
}

/* ── Outcome badges (live query log) ─────────────────────────────────────── */

.sgt-badge {
  display: inline-block;
  padding: 0.1rem 0.5rem;
  border-radius: 1rem;
  font-size: 0.78rem;
  font-weight: 600;
  white-space: nowrap;
}

.sgt-badge--blocked { background: #d9342233; color: #e5533d; }
.sgt-badge--cached  { background: #2a9d8f33; color: #2a9d8f; }
.sgt-badge--forwarded { background: #4a7fd933; color: #6ea0ee; }
.sgt-badge--local   { background: #9b59b633; color: #b07cd0; }
.sgt-badge--other   { background: var(--pico-muted-border-color); color: var(--pico-muted-color); }

/* ── Misc utilities ──────────────────────────────────────────────────────── */

/* Compact, monospace cell for domain/client columns in dense tables. */
.sgt-mono {
  font-family: var(--pico-font-family-monospace);
  font-size: 0.9em;
}

/* Right-align action buttons inside a flex row. */
.sgt-actions {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  align-items: center;
}

.sgt-inline-form {
  display: inline;
}

/* Small, dense buttons used inside table rows. */
.sgt-btn-sm {
  padding: 0.15rem 0.6rem;
  font-size: 0.8rem;
  margin: 0;
  width: auto;
}

/* A centered, narrow card used by the login screen and first-run wizard. */
.sgt-centered {
  max-width: 26rem;
  margin: 4rem auto;
}

.sgt-centered .sgt-brand {
  justify-content: center;
  margin-bottom: 1.5rem;
}

/* Inline error / notice banners. */
.sgt-notice {
  padding: 0.6rem 0.9rem;
  border-radius: var(--pico-border-radius);
  margin-bottom: 1rem;
}

.sgt-notice--error { background: #d9342222; color: #e5533d; }
.sgt-notice--ok    { background: #2a9d8f22; color: #2a9d8f; }

/* Muted helper text. */
.sgt-muted { color: var(--pico-muted-color); font-size: 0.88rem; }

/* Right-aligned numeric table column. */
.sgt-num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* Toast for one-click action feedback. Empty by default (invisible); a patch
 * fills it with a notice and it appears bottom-right. */
.sgt-toast {
  position: fixed;
  right: 1rem;
  bottom: 1rem;
  max-width: min(28rem, calc(100vw - 2rem));
  z-index: 20;
}
.sgt-toast:empty { display: none; }

/* Let dense management tables scroll horizontally on small screens, with
 * momentum scrolling on touch devices. The partially-clipped trailing column
 * is the scroll affordance. */
.sgt-table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* ── Mobile navigation drawer ─────────────────────────────────────────────
 * Below this width the link row and authenticated controls collapse behind
 * the hamburger and stack as a full-width drawer, revealed only while the
 * `navOpen` signal (→ .sgt-collapse--open) is set. */
@media (max-width: 768px) {
  .sgt-topbar nav {
    flex-wrap: wrap;
    row-gap: 0;
  }

  .sgt-nav-toggle {
    display: flex;
    order: 1;
    margin-left: auto;
  }

  /* Both the links and the action controls collapse behind the hamburger. */
  .sgt-nav,
  .sgt-nav-actions {
    order: 2;
    flex-basis: 100%;
    display: none;
  }

  .sgt-nav.sgt-collapse--open,
  .sgt-nav-actions.sgt-collapse--open {
    display: flex;
  }

  /* Links stack vertically … */
  .sgt-nav {
    flex-direction: column;
    align-items: stretch;
  }

  /* … and the action icons (pause, theme, settings, logout) share one row
   * beneath them, set off by a thin divider. */
  .sgt-nav-actions {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.25rem;
    margin-top: 0.3rem;
    padding-top: 0.3rem;
    border-top: 1px solid var(--pico-muted-border-color);
  }

  /* Tight drawer rows. */
  .sgt-topbar > nav > ul > li {
    padding-top: 0.15rem;
    padding-bottom: 0.15rem;
  }

  .sgt-nav a {
    padding: 0.3rem 0.5rem;
  }

  /* In the drawer the Pause control sits near the left, so Pico's rtl
   * right-anchoring (right:0) would open the panel off the left edge of the
   * viewport. Anchor it to the left instead so it stays on screen. */
  .sgt-topbar details.dropdown summary + ul {
    right: auto;
    left: 0;
  }

  /* Stack multi-field add/action forms so each control is full-width and
   * easily tappable instead of being crammed onto one line. (Only the
   * top-level <form> rows — in-table <div> action groups keep their layout.) */
  form.sgt-actions {
    flex-direction: column;
    align-items: stretch;
  }

  /* Comfortable touch targets for the dense table-row buttons. */
  .sgt-btn-sm {
    padding: 0.45rem 0.7rem;
    font-size: 0.85rem;
  }

  /* The paused banner reads better with tighter padding on a phone. */
  .sgt-paused {
    padding: 0.5rem 0.75rem;
    font-size: 0.85rem;
  }
}