/* ═══════════════════════════════════════════
   HQ Admin → Drift Dashboard styles.
   Card-grid layout for /api/admin/drift signals.
   Depends on tokens.css.
   ═══════════════════════════════════════════ */

/* ── View shell ────────────────────────────── */
.admin-view {
  flex: 1;
  overflow: auto;
  padding: var(--space-5) var(--space-7);
}

/* Column cap (2026-07-12 — Brian: "everything looks all over the place").
   Same reading-column pattern as .roadmap-view > *: on wide screens the
   auto-fill card grid sprawled edge to edge; capping every direct child
   pulls the page into one scannable column. */
.admin-view > * {
  max-width: 1000px;
  margin-left: auto;
  margin-right: auto;
}

/* ── Header ────────────────────────────────── */
.admin-header {
  margin-bottom: var(--space-5);
}

.admin-header__title {
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  font-weight: 900;
  line-height: 1.1;
}

.admin-header__sub {
  font-size: var(--text-sm);
  color: var(--color-dim);
  margin-top: 4px;
  max-width: 720px;
  line-height: 1.4;
}

/* ── Toolbar ───────────────────────────────── */
.admin-toolbar {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-5);
  flex-wrap: wrap;
}

.admin-toolbar__meta {
  font-size: var(--text-sm);
  color: var(--color-dim);
}

/* ── Grid ──────────────────────────────────── */
.admin-grid {
  display: grid;
  /* Two steady columns inside the capped page column — auto-fill's
     variable column count read as clutter (2026-07-12 cleanup). */
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-4);
}

@media (max-width: 700px) {
  .admin-grid {
    grid-template-columns: 1fr;
  }
}

/* ── Cards ─────────────────────────────────── */
.admin-card {
  background: var(--color-panel);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  padding: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  min-width: 0;
}

.admin-card--warn {
  border-color: var(--color-orange, #d4a574);
}

.admin-card--alert {
  border-color: var(--color-red, #d97757);
}

.admin-card__title {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 700;
  color: var(--color-text);
}

.admin-card__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  min-width: 0;
}

/* ── Stat tiles ────────────────────────────── */
.admin-stat {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.admin-stat__value {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: 900;
  color: var(--color-amber);
  line-height: 1;
}

.admin-stat__label {
  font-size: var(--text-sm);
  color: var(--color-dim);
}

.admin-stat__detail {
  font-size: var(--text-sm);
  color: var(--color-dim);
}

/* ── Two-cell rows (session tag events) ────── */
.admin-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3);
}

.admin-row__cell {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--space-2) var(--space-3);
  background: var(--color-panel2, var(--color-panel));
  border-radius: var(--radius-md);
}

.admin-row__value {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 700;
  color: var(--color-text);
  line-height: 1;
}

.admin-row__label {
  font-size: var(--text-xs);
  color: var(--color-dim);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* ── Tables ────────────────────────────────── */
.admin-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-sm);
}

.admin-table__head {
  text-align: left;
  font-weight: 700;
  color: var(--color-dim);
  text-transform: uppercase;
  font-size: var(--text-xs);
  letter-spacing: 0.05em;
  padding: 6px 8px;
  border-bottom: 1px solid var(--color-border);
}

.admin-table__head--num {
  text-align: right;
}

.admin-table__row {
  border-bottom: 1px solid var(--color-border);
}

.admin-table__row:last-child {
  border-bottom: none;
}

.admin-table__row--zero .admin-table__cell {
  color: var(--color-dim);
}

.admin-table__cell {
  padding: 6px 8px;
  color: var(--color-text);
  vertical-align: top;
}

.admin-table__cell--num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.admin-table__cell--type code {
  font-size: var(--text-xs);
}

/* ── Bucket label (hard / soft rotate) ─────── */
.admin-bucket__label {
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--color-text);
  margin-top: var(--space-2);
}

.admin-bucket__label:first-child {
  margin-top: 0;
}

/* ── Misc ──────────────────────────────────── */
.admin-empty {
  padding: var(--space-5);
  text-align: center;
  color: var(--color-dim);
  font-style: italic;
  grid-column: 1 / -1;
}

.admin-error {
  padding: var(--space-4);
  border: 1px solid var(--color-red, #d97757);
  border-radius: var(--radius-xl);
  background: var(--color-panel);
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.admin-error__title {
  font-weight: 700;
  color: var(--color-red, #d97757);
}

.admin-error__body {
  font-size: var(--text-sm);
  color: var(--color-text);
}

.admin-error__hint {
  font-size: var(--text-sm);
  color: var(--color-dim);
}

.admin-dim {
  color: var(--color-dim);
}

/* ═══════════════════════════════════════════
   Resource baseline section
   Snapshot (live polled) + Trend (sparklines)
   Added 2026-05-01 — admin-drift-trend-dashboard-panel
   ═══════════════════════════════════════════ */

.admin-resource {
  margin-top: var(--space-7);
  border-top: 1px solid var(--color-border);
  padding-top: var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.admin-resource__header {
  margin-bottom: var(--space-2);
}

.admin-resource__title {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: 900;
  line-height: 1.1;
  color: var(--color-text);
}

.admin-resource__sub {
  font-size: var(--text-sm);
  color: var(--color-dim);
  margin-top: 4px;
  max-width: 720px;
  line-height: 1.4;
}

.admin-resource__sub code {
  font-size: 0.95em;
  background: var(--color-panel2, var(--color-panel));
  padding: 1px 4px;
  border-radius: var(--radius-sm, 4px);
}

.admin-resource__subhead {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
  margin-top: var(--space-3);
  flex-wrap: wrap;
}

.admin-resource__subhead-title {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 700;
  color: var(--color-text);
}

.admin-resource__subhead-meta {
  font-size: var(--text-sm);
  color: var(--color-dim);
}

/* ── Snapshot grid ─────────────────────────── */
.admin-resource__snapshot-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
  gap: var(--space-4);
}

/* The snapshot grid uses .admin-card primitives, so card chrome is shared
   with the drift cards above. The snapshot-specific bit is the inner
   tile grid (one tile per metric within a cluster card). */
.admin-resource__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: var(--space-2);
}

.admin-resource__tile {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--space-2) var(--space-3);
  background: var(--color-panel2, var(--color-panel));
  border-radius: var(--radius-md);
  border-left: 2px solid transparent;
  min-width: 0;
}

.admin-resource__tile--warn {
  border-left-color: var(--color-orange, #E8943A);
  background: color-mix(in srgb, var(--color-orange, #E8943A) 6%, var(--color-panel2));
}

.admin-resource__tile--alert {
  border-left-color: var(--color-red, #E85555);
  background: color-mix(in srgb, var(--color-red, #E85555) 8%, var(--color-panel2));
}

.admin-resource__tile-label {
  font-size: var(--text-xs);
  color: var(--color-dim);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.admin-resource__tile-value {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 700;
  color: var(--color-text);
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
  word-break: break-word;
}

.admin-resource__tile-detail {
  font-size: var(--text-xs);
  color: var(--color-dim);
}

/* ── Trend grid (sparklines) ───────────────── */
.admin-resource__trend-meta {
  font-size: var(--text-xs);
  color: var(--color-dim);
  margin-bottom: var(--space-2);
}

.admin-resource__trend-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: var(--space-3);
}

.admin-resource__trend-tile {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: var(--space-3);
  background: var(--color-panel);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  min-width: 0;
}

.sparkline {
  width: 100%;
  height: 30px;
  display: block;
}

.sparkline polyline {
  fill: none;
  stroke: var(--color-amber);
  stroke-width: 1.2;
  stroke-linejoin: round;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
}

.sparkline circle {
  fill: var(--color-amber);
}

/* ── Trend empty-state (Backend endpoint pending) ── */
.admin-resource__trend-empty {
  padding: var(--space-4);
  border: 1px dashed var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-panel);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.admin-resource__trend-empty-title {
  font-weight: 700;
  color: var(--color-text);
  font-size: var(--text-base, var(--text-sm));
}

.admin-resource__trend-empty-body {
  font-size: var(--text-sm);
  color: var(--color-dim);
  line-height: 1.4;
}

.admin-resource__trend-empty-body code {
  background: var(--color-panel2, var(--color-panel));
  padding: 1px 4px;
  border-radius: var(--radius-sm, 4px);
  font-size: 0.95em;
}

/* ═══════════════════════════════════════════
   Responsive layout
   Three discrete viewports mirroring HQ's canonical
   480/768 breakpoints (see layout.css, dashboard.css):
     - Phone   : ≤480px      → single column, stacked rows
     - Tablet  : 481-1024px  → 2-column grids, comfortable density
     - Desktop : >1024px     → existing auto-fill behavior
   Rationale: Brian reads on phone half the time and asked for iPad
   support explicitly (2026-05-03). Default `auto-fill,
   minmax(360px,1fr)` yields awkward 2-column-overflow at 768px
   (iPad portrait) — explicit tablet rules tame the density.
   ═══════════════════════════════════════════ */

/* ── Tablet: 481-1024px (iPad portrait + landscape) ── */
@media (min-width: 481px) and (max-width: 1024px) {
  /* Snapshot + drift grids: 2-column at tablet width.
     Default auto-fill at 360px would render 2 columns on iPad
     portrait (768/360≈2.1) — but 1 column on iPad mini portrait
     (744px viewport) due to 360px floor. Explicit 2-col forces
     the comfortable 2-up layout regardless of inner-tile width. */
  .admin-grid,
  .admin-resource__snapshot-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* Trend (sparkline) grid: 2 columns. Default minmax(220px,1fr)
     at 768px yields 3 columns which is too cramped for sparkline
     readability. 2 columns at iPad widths gives each chart ~340px
     of horizontal real estate — comfortable for trend reading. */
  .admin-resource__trend-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* Slightly tighter view padding on tablet — the default
     `var(--space-7)` horizontal pad is calibrated for desktop
     and wastes ~5% of viewport on iPad. */
  .admin-view {
    padding: var(--space-5) var(--space-5);
  }
}

/* ── Phone: ≤480px ── */
@media (max-width: 480px) {
  /* Compact view padding so cards reach edge-to-edge with breathing
     room, matching layout.css's phone treatment. */
  .admin-view {
    padding: var(--space-3) var(--space-3);
    /* Honor iOS notch / Dynamic Island safe-area on landscape phones. */
    padding-left: max(var(--space-3), env(safe-area-inset-left));
    padding-right: max(var(--space-3), env(safe-area-inset-right));
  }

  /* All grids collapse to single column. The drift cards and
     snapshot cards each take the full width — at 375px (iPhone
     SE/12 mini), a single 343px-wide card is the readable target. */
  .admin-grid,
  .admin-resource__snapshot-grid,
  .admin-resource__trend-grid {
    grid-template-columns: 1fr;
  }

  /* Two-cell row primitive (used by Session-tag-events card)
     stacks label-on-top-of-value style. */
  .admin-row {
    grid-template-columns: 1fr;
  }

  /* Inner stat-tile grid inside snapshot cards. 2-column keeps
     related metrics side-by-side (e.g., Heap used / Heap total)
     which is the comparison the user wants to read in one glance.
     Going to 1 column would force the eye down 6+ rows per card. */
  .admin-resource__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-2);
  }

  /* Tile padding compresses slightly — at 2-col on a 343px card
     each tile is ~155px wide, so trim horizontal pad to keep the
     numeric value (which is the high-information part) visible. */
  .admin-resource__tile {
    padding: var(--space-2);
  }

  /* Heading scale-down so the section headers don't dominate. */
  .admin-header__title {
    font-size: var(--text-2xl);
  }
  .admin-resource__title {
    font-size: var(--text-xl);
  }
  .admin-resource__subhead-title {
    font-size: var(--text-base, var(--text-sm));
  }

  /* Card title size — at desktop var(--text-lg) is right; on phone
     it competes with the stat values for vertical space. */
  .admin-card__title {
    font-size: var(--text-base, var(--text-sm));
  }

  /* Stat values: keep prominent but cap so a long byte string
     ("1.42 GiB") doesn't wrap awkwardly inside the 2-col tile. */
  .admin-resource__tile-value {
    font-size: var(--text-base, var(--text-sm));
  }

  /* Tables (Feed drift events, Rule 18 sessions, Orphaned spawn-state)
     allow horizontal scroll on phone. The table itself stays
     intact — wrapping each column at 375px would be illegible. */
  .admin-card__body {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* Refresh button — meets 44×44px tap target (already from
     base.css .btn-outline; explicitly enforce for safety). */
  .admin-toolbar #admin-drift-refresh {
    min-height: 44px;
    min-width: 44px;
  }

  /* Sparkline grows slightly taller on phone for readability —
     the smaller container needs the chart to assert itself. */
  .sparkline {
    height: 36px;
  }
}

/* ── Very narrow phones (≤360px) safety net ── */
@media (max-width: 360px) {
  /* Inner tile grid drops to 1 column on the smallest viewports
     (iPhone SE 1st-gen, older Android compacts) where 2-col would
     leave each tile ~140px wide — too narrow for the value+detail
     pair. */
  .admin-resource__grid {
    grid-template-columns: 1fr;
  }
}