/*
 * app.css — entra-to-jsm-sync component styles
 *
 * Authority: planning/MICS-2005/01 - UI Amendments.md (the design spec) and
 * planning/MICS-2005/final/08 - Rust Web UI.md (implementation contract).
 *
 * All colors / spacing / radii reference variables from tokens.css; never
 * hand-roll values here. Component sections are ordered by template:
 *   1. Reset + base
 *   2. Top bar + nav + tz toggle + status chip
 *   3. Generic primitives — buttons, cards, pills, banners, skeleton, toast
 *   4. Dashboard
 *   5. Runs table + filter chips
 *   6. Run detail — banner, summary, log viewer, mini-map
 *   7. Schedule page
 *   8. Empty / error states
 *   9. Responsive overrides
 */

/* ── 1. Reset + base ─────────────────────────────────────────────────── */

*, *::before, *::after { box-sizing: border-box; }

html, body { height: 100%; margin: 0; }

body {
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  background: var(--color-bg);
  color: var(--color-text);
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }
a:hover { text-decoration: underline; }

button { font-family: inherit; font-size: inherit; cursor: pointer; }

:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

.icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  display: inline-block;
  vertical-align: -3px;
}
.icon-lg { width: 24px; height: 24px; vertical-align: -6px; }

/* Visually-hidden — for skip-link + aria-live regions */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}
.skip-link:focus {
  position: absolute;
  top: var(--space-2);
  left: var(--space-2);
  width: auto; height: auto;
  padding: var(--space-2) var(--space-4);
  background: var(--color-surface);
  color: var(--color-text);
  border: 2px solid var(--color-accent);
  z-index: 1000;
  clip: auto;
}

/* ── 2. Top bar + nav + tz toggle + status chip ──────────────────────── */

.topbar {
  height: 56px;
  background: var(--color-brand-bar);
  color: var(--color-brand-bar-fg);
  display: flex;
  align-items: center;
  gap: var(--space-5);
  padding: 0 var(--space-6);
  position: sticky;
  top: 0;
  z-index: 50;
}

.topbar-brand {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  color: var(--color-brand-bar-fg);
}
.topbar-brand img { display: block; max-height: 28px; width: auto; }
.topbar-brand-divider {
  width: 1px;
  height: 24px;
  background: rgba(255,255,255,0.18);
}
.topbar-brand-name {
  font-weight: var(--weight-semibold);
  font-size: var(--text-sm);
  color: var(--color-brand-bar-fg);
}
.topbar-brand-name:hover { text-decoration: none; opacity: 0.85; }

.topbar-nav {
  display: flex;
  gap: var(--space-1);
  margin-left: var(--space-4);
}
.topbar-nav a {
  position: relative;
  padding: 18px var(--space-3); /* 18px puts the bottom border at row baseline */
  font-size: var(--text-sm);
  color: var(--color-brand-bar-fg);
  opacity: 0.7;
  border-bottom: 2px solid transparent;
}
.topbar-nav a:hover { opacity: 1.0; text-decoration: none; }
.topbar-nav a.active {
  opacity: 1.0;
  border-bottom-color: var(--color-accent);
}

.topbar-spacer { flex: 1; }

.topbar-right {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}

/* Three-button segmented control: Local / Central / UTC */
.tz-toggle {
  display: inline-flex;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: var(--radius-md);
  overflow: hidden;
}
.tz-toggle button {
  background: transparent;
  border: 0;
  color: var(--color-brand-bar-fg);
  opacity: 0.6;
  padding: 4px var(--space-3);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  border-right: 1px solid rgba(255,255,255,0.08);
}
.tz-toggle button:last-child { border-right: 0; }
.tz-toggle button:hover { opacity: 0.9; }
.tz-toggle button.active {
  background: var(--color-accent);
  color: var(--color-accent-fg);
  opacity: 1.0;
}

.topbar-user {
  font-size: var(--text-xs);
  color: var(--color-brand-bar-fg);
  opacity: 0.7;
  max-width: 22ch;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Global status chip in the top bar (htmx-refreshed every 5s) */
.status-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 4px var(--space-3);
  border-radius: 9999px;
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  white-space: nowrap;
  border: 1px solid transparent;
}
.status-chip-idle    { background: rgba(255,255,255,0.08); color: var(--color-text-dim); }
.status-chip-running { background: rgba(37,99,235,0.18);  color: #93c5fd; border-color: rgba(37,99,235,0.4); }
.status-chip-paused  { background: rgba(202,138,4,0.18);  color: #fde68a; border-color: rgba(202,138,4,0.4); }
.status-chip-error   { background: rgba(220,38,38,0.18);  color: #fca5a5; border-color: rgba(220,38,38,0.4); }
.status-chip-unknown { background: rgba(255,255,255,0.05); color: var(--color-text-dim); }

/* ── 3. Generic primitives ───────────────────────────────────────────── */

main {
  max-width: 1280px;
  margin: 0 auto;
  padding: var(--space-6);
}

h1, h2, h3, h4 { margin: 0 0 var(--space-3); font-weight: var(--weight-semibold); }
h1 { font-size: var(--text-xl); }
h2 { font-size: var(--text-lg); }
h3 { font-size: var(--text-base); }

.breadcrumbs {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--color-text-muted);
  font-size: var(--text-xs);
  margin-bottom: var(--space-3);
}
.breadcrumbs .icon { width: 12px; height: 12px; vertical-align: -1px; opacity: 0.5; }
.breadcrumbs a:hover { color: var(--color-text); }

.card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  box-shadow: var(--shadow-sm);
}
.card + .card { margin-top: var(--space-5); }
.card h2 { margin-bottom: var(--space-4); }

.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  background: var(--color-surface-2);
  color: var(--color-text);
  transition: background var(--dur-fast) var(--ease-std), opacity var(--dur-fast);
}
.btn:hover { background: var(--color-border); text-decoration: none; }
.btn:disabled, .btn[aria-disabled="true"] { opacity: 0.5; cursor: not-allowed; }
.btn-primary {
  background: var(--color-accent);
  color: var(--color-accent-fg);
  border-color: var(--color-accent);
}
.btn-primary:hover { background: #e88f22; }
.btn-danger {
  background: transparent;
  color: var(--color-failed);
  border-color: var(--color-failed);
}
.btn-danger:hover { background: var(--color-failed-bg); }
.btn-ghost { background: transparent; color: var(--color-text-muted); }
.btn-ghost:hover { background: var(--color-surface-2); color: var(--color-text); }
.btn-sm { padding: var(--space-1) var(--space-3); font-size: var(--text-xs); }

/* Status pill — used in runs table + summary card */
.pill {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: 2px var(--space-2);
  border-radius: 9999px;
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  border: 1px solid transparent;
  white-space: nowrap;
}
.pill .icon { width: 12px; height: 12px; vertical-align: -1px; }
.pill-ok        { background: var(--color-ok-bg);        color: var(--color-text); border-color: var(--color-ok); }
.pill-degraded  { background: var(--color-degraded-bg);  color: var(--color-text); border-color: var(--color-degraded); }
.pill-failed    { background: var(--color-failed-bg);    color: var(--color-text); border-color: var(--color-failed); }
.pill-running   { background: var(--color-running-bg);   color: var(--color-text); border-color: var(--color-running); }
.pill-cancelled { background: var(--color-cancelled-bg); color: var(--color-text); border-color: var(--color-cancelled); }
.pill-cancelling { background: var(--color-cancelled-bg); color: var(--color-text); border-color: var(--color-cancelled); }
.pill-stalled   { background: var(--color-failed-bg);    color: var(--color-text); border-color: var(--color-failed); }
.pill-ok .icon { color: var(--color-ok); }
.pill-degraded .icon { color: var(--color-degraded); }
.pill-failed .icon,
.pill-stalled .icon { color: var(--color-failed); }
.pill-running .icon { color: var(--color-running); }
.pill-cancelled .icon,
.pill-cancelling .icon { color: var(--color-cancelled); }

/* Full-width status banner — used on run detail when status != ok */
.banner {
  display: flex;
  align-items: flex-start;
  gap: var(--space-4);
  padding: var(--space-5);
  border-radius: var(--radius-lg);
  border-left: 6px solid;
  margin-bottom: var(--space-5);
}
.banner .icon-lg { flex-shrink: 0; margin-top: 2px; }
.banner-headline {
  font-size: var(--text-xl);
  font-weight: var(--weight-semibold);
  margin: 0 0 var(--space-2);
}
.banner-subtext {
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  margin: 0;
}
.banner-actions { margin-top: var(--space-3); display: flex; gap: var(--space-2); }
.banner-failed    { background: var(--color-failed-bg);    border-left-color: var(--color-failed);    color: var(--color-text); }
.banner-degraded  { background: var(--color-degraded-bg);  border-left-color: var(--color-degraded);  color: var(--color-text); }
.banner-running   { background: var(--color-running-bg);   border-left-color: var(--color-running);   color: var(--color-text); }
.banner-cancelled { background: var(--color-cancelled-bg); border-left-color: var(--color-cancelled); color: var(--color-text); }

/* Inline toast (htmx form-failure response) */
.toast {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  background: var(--color-failed-bg);
  color: var(--color-failed);
  border-radius: var(--radius-md);
  font-size: var(--text-xs);
  margin-top: var(--space-3);
}

/* Skeleton loaders — static in reduced-motion via tokens.css */
@keyframes shimmer {
  0%   { background-position: -200px 0; }
  100% { background-position: calc(200px + 100%) 0; }
}
.skeleton {
  background: linear-gradient(90deg,
    var(--color-surface-2) 0px,
    var(--color-border) 80px,
    var(--color-surface-2) 200px);
  background-size: 200px 100%;
  background-repeat: no-repeat;
  border-radius: var(--radius-sm);
  display: block;
  animation: shimmer 1.6s infinite linear;
}
.skeleton-row { height: 36px; margin-bottom: var(--space-2); }
.skeleton-card { height: 120px; }

/* Active-htmx-request: 0.6 opacity overlay (works for any target container) */
.htmx-request                            { opacity: 0.7; pointer-events: none; }
.htmx-indicator                          { display: none; }
.htmx-request .htmx-indicator,
.htmx-request.htmx-indicator             { display: inline-block; }

/* Spinner for the htmx-indicator class — gated by tokens.css reduced-motion */
@keyframes spin { to { transform: rotate(360deg); } }
.spinner {
  width: 16px;
  height: 16px;
  border: 2px solid var(--color-border);
  border-top-color: var(--color-accent);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
  display: inline-block;
  vertical-align: -3px;
}

/* ── 4. Dashboard ────────────────────────────────────────────────────── */

.dashboard-grid {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: var(--space-5);
}
.dashboard-grid + .recent-runs { margin-top: var(--space-5); }

.hero {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-left: 6px solid var(--color-cancelled);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  box-shadow: var(--shadow-sm);
}
.hero-ok        { border-left-color: var(--color-ok); }
.hero-degraded  { border-left-color: var(--color-degraded); background: var(--color-degraded-bg); }
.hero-failed    { border-left-color: var(--color-failed);   background: var(--color-failed-bg); }
.hero-running   { border-left-color: var(--color-running);  background: var(--color-running-bg); }
.hero-paused    { border-left-color: var(--color-degraded); background: var(--color-degraded-bg); }
.hero-idle      { border-left-color: var(--color-border-strong); }

.hero-label {
  color: var(--color-text-muted);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: var(--weight-medium);
}
.hero-status {
  font-size: var(--text-2xl);
  font-weight: var(--weight-semibold);
  margin: var(--space-1) 0 var(--space-2);
  display: flex;
  align-items: center;
  gap: var(--space-3);
}
.hero-sub {
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  margin-bottom: var(--space-4);
}
.hero-actions { display: flex; gap: var(--space-3); flex-wrap: wrap; }

/* Indeterminate progress bar for hero running state */
@keyframes hero-progress {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(300%); }
}
.hero-progress {
  height: 2px;
  background: rgba(37,99,235,0.18);
  border-radius: 9999px;
  overflow: hidden;
  margin: var(--space-3) 0;
  position: relative;
}
.hero-progress::after {
  content: '';
  position: absolute;
  inset: 0 0 0 0;
  width: 33%;
  background: var(--color-running);
  border-radius: inherit;
  animation: hero-progress 1.6s infinite ease-in-out;
}
@media (prefers-reduced-motion: reduce) {
  .hero-progress::after { animation: none; width: 50%; }
}

.next-scheduled .countdown {
  font-size: var(--text-xl);
  font-weight: var(--weight-semibold);
  margin: var(--space-1) 0 var(--space-2);
}
.next-scheduled .at {
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  margin-bottom: var(--space-4);
}

/* ── 5. Runs table + filter chips ───────────────────────────────────── */

.filter-chips {
  display: flex;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
  flex-wrap: wrap;
}
.filter-chip {
  padding: var(--space-1) var(--space-3);
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  border-radius: 9999px;
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}
.filter-chip:hover { color: var(--color-text); text-decoration: none; }
.filter-chip.active {
  background: var(--color-text);
  color: var(--color-bg);
  border-color: var(--color-text);
}

.runs-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  font-size: var(--text-sm);
}
.runs-table thead th {
  text-align: left;
  padding: var(--space-3) var(--space-4);
  color: var(--color-text-muted);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  background: var(--color-surface-2);
  border-bottom: 1px solid var(--color-border);
}
.runs-table tbody td {
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--color-border);
  vertical-align: middle;
}
.runs-table tbody tr:last-child td { border-bottom: 0; }
.runs-table tbody tr {
  cursor: pointer;
  transition: background var(--dur-fast);
}
.runs-table tbody tr:hover td { background: var(--color-surface-2); }
.runs-table tbody tr:focus-within td { background: var(--color-surface-2); }

/* The 4-px left edge stripe is the first cell; the row link covers the
   remainder via display:contents so the whole row is clickable. */
.runs-table .stripe-cell {
  width: 4px;
  padding: 0 !important;
  position: relative;
}
.runs-table .stripe-cell::before {
  content: '';
  position: absolute;
  inset: 0;
  background: transparent;
}
.runs-table tr.row-failed   .stripe-cell::before { background: var(--color-failed); }
.runs-table tr.row-degraded .stripe-cell::before { background: var(--color-degraded); }
.runs-table tr.row-running  .stripe-cell::before { background: var(--color-running); animation: pulse 2s ease-in-out infinite; }
.runs-table tr.row-cancelled .stripe-cell::before { background: var(--color-cancelled); }
.runs-table tr.row-cancelling .stripe-cell::before { background: var(--color-cancelled); }
.runs-table tr.row-stalled  .stripe-cell::before { background: var(--color-failed); }
.runs-table tr.row-failed   td:not(.stripe-cell) { background: var(--color-failed-bg); }
@keyframes pulse {
  0%, 100% { opacity: 1.0; }
  50%      { opacity: 0.55; }
}
@media (prefers-reduced-motion: reduce) {
  .runs-table tr.row-running .stripe-cell::before { animation: none; opacity: 1.0; }
}

.runs-table-row-link {
  color: inherit;
}
.runs-table-row-link:hover { text-decoration: none; }

.runs-empty {
  text-align: center;
  padding: var(--space-7) var(--space-4);
  color: var(--color-text-muted);
}

.pagination {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: var(--space-4);
  color: var(--color-text-muted);
  font-size: var(--text-xs);
}
.pagination-actions { display: flex; gap: var(--space-2); }

/* ── 6. Run detail — banner / summary / log viewer / mini-map ─────── */

.summary-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--space-4);
  margin-bottom: var(--space-3);
}
.summary-item {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}
.summary-label {
  color: var(--color-text-muted);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: var(--weight-medium);
}
.summary-value {
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
}
.summary-value.big {
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
}

.copy-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: 2px var(--space-2);
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  cursor: pointer;
}
.copy-chip:hover { color: var(--color-text); }

.counts-row {
  display: flex;
  gap: var(--space-5);
  flex-wrap: wrap;
  padding: var(--space-3) 0;
  border-top: 1px solid var(--color-border);
  margin-top: var(--space-3);
}
.count {
  display: flex;
  flex-direction: column;
}
.count-n {
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
  font-variant-numeric: tabular-nums;
}
.count-label {
  color: var(--color-text-muted);
  font-size: var(--text-xs);
}
.count-failed .count-n { color: var(--color-failed); }
.count-degraded .count-n { color: var(--color-degraded); }

/* Log viewer */
.log-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-bottom: 0;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}
.log-toolbar .filter-chips { margin: 0; }
.log-search {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}
.log-search input {
  padding: var(--space-1) var(--space-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  color: var(--color-text);
  font-size: var(--text-xs);
  font-family: var(--font-mono);
  width: 160px;
}
.log-search-counter {
  color: var(--color-text-muted);
  font-size: var(--text-xs);
  font-variant-numeric: tabular-nums;
  min-width: 6ch;
}
.log-toolbar .spacer { flex: 1; }
.log-toolbar .toggle-group {
  display: inline-flex;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  overflow: hidden;
}
.log-toolbar .toggle-group button {
  background: var(--color-surface);
  border: 0;
  padding: 4px var(--space-2);
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  border-right: 1px solid var(--color-border);
}
.log-toolbar .toggle-group button:last-child { border-right: 0; }
.log-toolbar .toggle-group button.active { background: var(--color-text); color: var(--color-bg); }

.conn-dot {
  display: inline-block;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--color-ok);
  margin-right: var(--space-1);
}
.conn-dot.amber { background: var(--color-degraded); }
.conn-dot.red   { background: var(--color-failed); }

.log-container {
  position: relative;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-top: 0;
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
  max-height: 70vh;
  overflow: auto;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
}
.log-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.log-row {
  display: grid;
  grid-template-columns: 4px 22ch 7ch minmax(8ch, max-content) 1fr 24px;
  gap: var(--space-3);
  align-items: baseline;
  padding: 4px var(--space-3) 4px 0;
  border-bottom: 1px solid transparent;
  position: relative;
}
.log-row .stripe { background: transparent; }
.log-row.row-error .stripe { background: var(--color-failed); }
.log-row.row-warn  .stripe { background: var(--color-degraded); }
.log-ts { color: var(--color-text-muted); white-space: nowrap; }
.log-level {
  display: inline-block;
  padding: 1px 6px;
  border-radius: 3px;
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  background: var(--color-surface-2);
  color: var(--color-text-muted);
  text-align: center;
}
.log-row.row-error .log-level { background: var(--color-failed-bg); color: var(--color-text); border: 1px solid var(--color-failed); }
.log-row.row-warn  .log-level { background: var(--color-degraded-bg); color: var(--color-text); border: 1px solid var(--color-degraded); }
.log-stage {
  color: var(--color-text-muted);
  font-style: italic;
  white-space: nowrap;
}
.log-msg { color: var(--color-text); word-break: break-word; }
.log-row.density-compact { padding: 1px var(--space-3) 1px 0; line-height: 1.25; }
.log-row.no-wrap .log-msg { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.log-copy {
  opacity: 0;
  background: transparent;
  border: 0;
  color: var(--color-text-muted);
  padding: 0;
}
.log-row:hover .log-copy { opacity: 0.7; }
.log-copy:hover { opacity: 1.0 !important; color: var(--color-text); }

.log-traceback {
  grid-column: 2 / -1;
  background: var(--color-surface-2);
  margin: var(--space-1) 0;
  border-radius: var(--radius-sm);
  padding: var(--space-2);
  font-size: 11px;
}
.log-traceback summary {
  cursor: pointer;
  color: var(--color-text-muted);
  font-style: italic;
}
.log-traceback pre {
  margin: var(--space-2) 0 0;
  white-space: pre-wrap;
  word-break: break-word;
}

.log-empty, .log-loading {
  padding: var(--space-6);
  text-align: center;
  color: var(--color-text-muted);
}
.log-pulse-dot {
  display: inline-block;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--color-text-dim);
  animation: pulse 1.5s ease-in-out infinite;
  margin-right: var(--space-2);
  vertical-align: 1px;
}

/* Sticky "N errors — jump to first" chip + "↓ Jump to live" */
.log-sticky {
  position: sticky;
  bottom: var(--space-3);
  display: flex;
  justify-content: flex-end;
  gap: var(--space-2);
  padding: 0 var(--space-3);
  pointer-events: none;
}
.log-sticky .sticky-btn {
  pointer-events: auto;
  background: var(--color-text);
  color: var(--color-bg);
  border: 0;
  padding: var(--space-2) var(--space-3);
  border-radius: 9999px;
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  box-shadow: var(--shadow-md);
}
.log-sticky .sticky-btn.errors {
  background: var(--color-failed);
  color: #fff;
}
.log-sticky .sticky-btn[hidden] { display: none; }

/* Mini-map gutter (12 px) — absolutely positioned over log container */
.log-minimap {
  position: absolute;
  top: 0;
  right: 0;
  width: 12px;
  height: 100%;
  pointer-events: none;
  z-index: 2;
}
.log-minimap .dot {
  position: absolute;
  right: 3px;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--color-failed);
  pointer-events: auto;
  cursor: pointer;
}

/* SSE-disconnected banner */
.log-disconnected {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-3);
  background: var(--color-failed-bg);
  color: var(--color-failed);
  border: 1px solid var(--color-failed);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-3);
}

/* ── 7. Schedule page ───────────────────────────────────────────────── */

.schedule-state {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4);
  background: var(--color-surface-2);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-5);
}
.schedule-state.paused { background: var(--color-degraded-bg); }

.pause-form textarea {
  width: 100%;
  min-height: 64px;
  padding: var(--space-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  color: var(--color-text);
  font-family: inherit;
  font-size: var(--text-sm);
  resize: vertical;
  margin-top: var(--space-2);
}
.pause-form .form-row {
  display: flex;
  gap: var(--space-2);
  margin-top: var(--space-3);
  justify-content: flex-end;
}
.pause-form .hint {
  font-size: var(--text-xs);
  color: var(--color-text-dim);
  margin: var(--space-1) 0 0;
}

.history-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  font-size: var(--text-sm);
}
.history-table th {
  text-align: left;
  padding: var(--space-3) var(--space-4);
  background: var(--color-surface-2);
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  font-weight: var(--weight-medium);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border-bottom: 1px solid var(--color-border);
}
.history-table td {
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--color-border);
}
.history-table tr:last-child td { border-bottom: 0; }
.history-table .action-pause  { color: var(--color-degraded); font-weight: var(--weight-medium); }
.history-table .action-resume { color: var(--color-ok); font-weight: var(--weight-medium); }

/* ── 8. Empty / error states ─────────────────────────────────────────── */

.error-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  background: var(--color-failed-bg);
  color: var(--color-failed);
  border: 1px solid var(--color-failed);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
}

.empty-state {
  text-align: center;
  padding: var(--space-7) var(--space-4);
  color: var(--color-text-muted);
}

/* ── 9. Responsive ───────────────────────────────────────────────────── */

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

@media (max-width: 767px) {
  main { padding: var(--space-4); }
  .topbar { padding: 0 var(--space-3); gap: var(--space-3); }
  .topbar-brand-name { display: none; }
  .topbar-nav { margin-left: 0; gap: 0; }
  .topbar-nav a { padding: 18px var(--space-2); }

  /* Tables become horizontally-scrollable; the right-edge gradient hints
     that there's more content. Priority column order is preserved via
     source order; nothing is hidden. */
  .table-scroll {
    overflow-x: auto;
    position: relative;
  }
  .table-scroll::after {
    content: '';
    position: absolute;
    top: 0; right: 0; bottom: 0;
    width: 24px;
    background: linear-gradient(to right, transparent, var(--color-bg));
    pointer-events: none;
  }
  .runs-table, .history-table { min-width: 720px; }

  .log-row { grid-template-columns: 4px 18ch 6ch 1fr 20px; }
  .log-stage { display: none; }
}