/* FTP-GHL Bridge dashboard styles
 *
 * Design principles:
 *  - Big, obvious colour coding (green = OK, red = fail, amber = processing)
 *  - Lots of whitespace — ADHD-friendly, low visual noise
 *  - Big clickable rows
 *  - Plain English everywhere
 */

:root {
  --bg: #f5f7fa;
  --card: #ffffff;
  --border: #e2e8f0;
  --text: #1a202c;
  --text-dim: #64748b;
  --ok: #16a34a;
  --ok-bg: #dcfce7;
  --fail: #dc2626;
  --fail-bg: #fee2e2;
  --warn: #d97706;
  --warn-bg: #fef3c7;
  --accent: #2563eb;
  --accent-hover: #1d4ed8;
  --radius: 8px;
  --shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}

* {
  box-sizing: border-box;
}

html, body {
  margin: 0;
  padding: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  background: var(--bg);
  color: var(--text);
  font-size: 16px;
  line-height: 1.5;
}

/* ── Header ────────────────────────────────────────────────── */
.site-header {
  background: #1a202c;
  color: white;
  padding: 16px 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-shadow: var(--shadow);
}

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 20px;
  font-weight: 700;
}

.logo {
  font-size: 28px;
}

/* Header health badge — "is the bridge alive?" at a glance. */
.health-badge {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 16px;
  border-radius: 100px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.12);
  margin-left: auto;
  margin-right: 24px;
}

.health-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}

.health-badge.health-green .health-dot {
  background: var(--ok);
  box-shadow: 0 0 0 3px rgba(22, 163, 74, 0.25), 0 0 12px rgba(22, 163, 74, 0.5);
  animation: pulse-green 2s infinite;
}

.health-badge.health-amber .health-dot {
  background: var(--warn);
  box-shadow: 0 0 0 3px rgba(217, 119, 6, 0.25);
}

.health-badge.health-red .health-dot {
  background: var(--fail);
  box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.25);
}

@keyframes pulse-green {
  0%, 100% { box-shadow: 0 0 0 3px rgba(22, 163, 74, 0.25), 0 0 12px rgba(22, 163, 74, 0.5); }
  50%      { box-shadow: 0 0 0 5px rgba(22, 163, 74, 0.35), 0 0 16px rgba(22, 163, 74, 0.7); }
}

.health-text {
  display: flex;
  flex-direction: column;
  line-height: 1.1;
}

.health-label {
  font-size: 10px;
  color: rgba(255, 255, 255, 0.6);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 600;
}

.health-value {
  font-size: 14px;
  color: white;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.health-failures {
  padding: 4px 10px;
  background: var(--fail-bg);
  color: var(--fail);
  border-radius: 100px;
  font-size: 12px;
  font-weight: 700;
}

.site-nav {
  display: flex;
  gap: 24px;
}

.site-nav a {
  color: #cbd5e1;
  text-decoration: none;
  font-weight: 500;
  padding: 8px 12px;
  border-radius: var(--radius);
  transition: all 0.15s;
}

.site-nav a:hover {
  background: #2d3748;
  color: white;
}

/* ── Layout ────────────────────────────────────────────────── */
.container {
  max-width: 1400px;
  margin: 0 auto;
  padding: 32px;
}

h1 {
  font-size: 28px;
  margin: 0 0 16px;
}

h2 {
  font-size: 20px;
  margin: 32px 0 16px;
  color: var(--text);
}

h3 {
  font-size: 16px;
  margin: 20px 0 8px;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.dim {
  color: var(--text-dim);
  font-size: 14px;
}

code {
  background: #f1f5f9;
  padding: 2px 6px;
  border-radius: 4px;
  font-family: "SF Mono", Monaco, Consolas, monospace;
  font-size: 0.9em;
}

/* ── Stats cards ───────────────────────────────────────────── */
.stats-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 16px;
  margin-bottom: 32px;
}

.stat-card {
  background: var(--card);
  padding: 20px 24px;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
}

.stat-label {
  font-size: 13px;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 8px;
}

.stat-value {
  font-size: 32px;
  font-weight: 700;
}

.stat-ok   { border-left: 4px solid var(--ok); }
.stat-fail { border-left: 4px solid var(--fail); }
.stat-total { border-left: 4px solid var(--accent); }

/* Phase 4k: 24h trend sparkline under the stat value. Sized to fit
   the card comfortably on desktop; scales down on narrow screens. */
.sparkline {
  display: block;
  width: 100%;
  max-width: 160px;
  height: 24px;
  margin-top: 8px;
  overflow: visible;
}

/* Per-business trend cell on the Businesses table — same widget,
   inline rather than below a stat number, no top margin. */
.col-sparkline {
  width: 110px;
  vertical-align: middle;
}
.col-sparkline .sparkline {
  margin-top: 0;
  max-width: 100%;
}

/* ── Tables ────────────────────────────────────────────────── */
.files-table {
  width: 100%;
  background: var(--card);
  border-collapse: collapse;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
  border: 1px solid var(--border);
}

.files-table th {
  text-align: left;
  padding: 12px 16px;
  background: #f8fafc;
  color: var(--text-dim);
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  border-bottom: 1px solid var(--border);
  font-weight: 600;
}

.files-table td {
  padding: 14px 16px;
  border-bottom: 1px solid var(--border);
  font-size: 15px;
}

.files-table tr:last-child td {
  border-bottom: none;
}

.files-table tbody tr {
  transition: background 0.1s;
}
.files-table tbody tr:hover {
  background: #f8fafc;
}

/* Phase 4q fix: only the data cells navigate on click. The checkbox
   cell is click-toggle-only and has no cursor:pointer. This prevents
   the row-level click handler from interfering with the native
   label→input toggle. */
.files-table td.row-clickable {
  cursor: pointer;
}

/* Row colour coding */
.row-complete {
  background: linear-gradient(90deg, var(--ok-bg) 0, var(--ok-bg) 4px, white 4px);
}

.row-failed {
  background: linear-gradient(90deg, var(--fail-bg) 0, var(--fail-bg) 4px, white 4px);
}

.row-processing, .row-received {
  background: linear-gradient(90deg, var(--warn-bg) 0, var(--warn-bg) 4px, white 4px);
}

.col-date, .col-time, .col-ms { font-variant-numeric: tabular-nums; color: var(--text-dim); }
.col-date { white-space: nowrap; font-size: 12px; }
.col-licence { font-weight: 700; font-family: "SF Mono", Monaco, Consolas, monospace; }
.col-filename { font-family: "SF Mono", Monaco, Consolas, monospace; font-size: 13px; }
.col-ok   { color: var(--ok);   font-weight: 700; }
.col-fail { color: var(--fail); font-weight: 700; }
.col-error { color: var(--fail); font-size: 13px; }

.files-table.compact td, .files-table.compact th {
  padding: 8px 16px;
  font-size: 14px;
}

/* ── Badges ────────────────────────────────────────────────── */
.badge {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 100px;
  font-size: 13px;
  font-weight: 600;
}

.badge-ok   { background: var(--ok-bg);   color: var(--ok); }
.badge-fail { background: var(--fail-bg); color: var(--fail); }
.badge-warn { background: var(--warn-bg); color: var(--warn); }

/* ── Mini step tracker (home row) ──────────────────────────── */
.steps-mini {
  display: flex;
  gap: 4px;
  align-items: center;
}

.step-dot {
  font-size: 18px;
  line-height: 1;
}

.step-dot.ok      { color: var(--ok); }
.step-dot.fail    { color: var(--fail); }
.step-dot.pending { color: #cbd5e1; }

/* ── Full step tracker (detail page) ───────────────────────── */
.steps-full {
  display: flex;
  align-items: center;
  gap: 4px;
  background: var(--card);
  padding: 24px;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
  overflow-x: auto;
  margin-bottom: 24px;
}

.step-box {
  flex: 1;
  min-width: 140px;
  padding: 16px;
  border-radius: var(--radius);
  text-align: center;
  border: 2px solid var(--border);
  background: #f8fafc;
}

.step-box.step-ok {
  background: var(--ok-bg);
  border-color: var(--ok);
}

.step-box.step-failed {
  background: var(--fail-bg);
  border-color: var(--fail);
}

.step-box.step-pending {
  background: #f8fafc;
  border-color: var(--border);
  opacity: 0.6;
}

.step-num {
  font-size: 12px;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.step-name {
  font-size: 15px;
  font-weight: 600;
  margin-top: 4px;
}

.step-state {
  font-size: 13px;
  margin-top: 4px;
  font-weight: 600;
}

.step-box.step-ok .step-state     { color: var(--ok); }
.step-box.step-failed .step-state { color: var(--fail); }

.step-arrow {
  color: #cbd5e1;
  font-size: 20px;
  flex-shrink: 0;
}

/* ── Detail page ───────────────────────────────────────────── */
.detail-header {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 24px;
}

.detail-header h1 {
  margin: 0;
  font-family: "SF Mono", Monaco, Consolas, monospace;
  font-size: 22px;
}

.back-link {
  display: inline-block;
  color: var(--accent);
  text-decoration: none;
  font-weight: 500;
  margin-bottom: 16px;
}

.back-link:hover {
  text-decoration: underline;
}

.error-box {
  background: var(--fail-bg);
  border: 1px solid var(--fail);
  border-left: 6px solid var(--fail);
  padding: 20px 24px;
  border-radius: var(--radius);
  margin: 24px 0;
}

.error-box h3 {
  margin: 0 0 8px;
  color: var(--fail);
  font-size: 18px;
  text-transform: none;
  letter-spacing: 0;
}

.error-step {
  margin: 8px 0;
  color: var(--fail);
}

.error-message {
  background: white;
  padding: 12px 16px;
  border-radius: 6px;
  margin: 12px 0 0;
  font-family: "SF Mono", Monaco, Consolas, monospace;
  font-size: 13px;
  white-space: pre-wrap;
  word-wrap: break-word;
  color: var(--text);
}

/* ── Key-value tables ──────────────────────────────────────── */
.kv-table {
  width: 100%;
  background: var(--card);
  border-radius: var(--radius);
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
  border-collapse: collapse;
  overflow: hidden;
}

.kv-table th, .kv-table td {
  padding: 12px 16px;
  text-align: left;
  border-bottom: 1px solid var(--border);
  font-size: 14px;
}

.kv-table th {
  background: #f8fafc;
  color: var(--text-dim);
  font-weight: 600;
  width: 200px;
  text-transform: none;
  letter-spacing: 0;
}

.kv-table tr:last-child th, .kv-table tr:last-child td {
  border-bottom: none;
}

.mono {
  font-family: "SF Mono", Monaco, Consolas, monospace;
  font-size: 13px;
}

/* ── Flags ─────────────────────────────────────────────────── */
.flags-row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin: 12px 0;
}

.flag {
  display: inline-block;
  padding: 6px 12px;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 600;
}

.flag-warn { background: var(--warn-bg); color: var(--warn); }
.flag-ok   { background: var(--ok-bg);   color: var(--ok); }
.flag-info { background: #dbeafe;        color: var(--accent); }

/* ── Empty states ──────────────────────────────────────────── */
.empty {
  background: var(--card);
  padding: 48px 32px;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  text-align: center;
}

.empty p {
  margin: 8px 0;
  font-size: 16px;
}

.empty-ok {
  background: var(--ok-bg);
  border-color: var(--ok);
}

.empty-ok p {
  color: var(--ok);
  font-size: 18px;
  font-weight: 600;
}

/* ── Login box ─────────────────────────────────────────────── */
.login-box {
  max-width: 400px;
  margin: 64px auto;
  padding: 40px;
  background: var(--card);
  border-radius: var(--radius);
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
  text-align: center;
}

.login-box h1 {
  margin: 0 0 8px;
}

.login-box .dim {
  margin-bottom: 24px;
}

.login-box .error {
  background: var(--fail-bg);
  color: var(--fail);
  padding: 12px;
  border-radius: 6px;
  margin-bottom: 16px;
  font-weight: 600;
}

.login-box input[type="password"] {
  width: 100%;
  padding: 12px 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-size: 16px;
  margin-bottom: 16px;
}

.login-box input[type="password"]:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}

.login-box button {
  width: 100%;
  padding: 12px;
  background: var(--accent);
  color: white;
  border: none;
  border-radius: var(--radius);
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s;
}

.login-box button:hover {
  background: var(--accent-hover);
}

/* ── Runbook ───────────────────────────────────────────────── */
.container ul, .container ol {
  padding-left: 24px;
  line-height: 1.8;
}

.container ul li, .container ol li {
  margin-bottom: 6px;
}

/* ── Tablet-style context buttons on detail page ──────────── */
/* Big individual tiles — "tablet style" per Allan. Each is its own
 * clickable card with icon on the left, label + sub on the right,
 * and a jump-out arrow. Highly visual, ADHD-friendly.
 */
.tablet-row {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 16px;
  margin: 12px 0 24px;
}

.tablet-btn {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px 20px;
  border-radius: 14px;
  text-decoration: none;
  border: 2px solid var(--border);
  background: var(--card);
  color: var(--text);
  box-shadow: var(--shadow);
  transition: all 0.15s;
}

.tablet-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.1);
  border-color: var(--accent);
}

.tablet-primary {
  background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
  color: white;
  border-color: #1d4ed8;
}

.tablet-primary:hover {
  border-color: #1e40af;
  color: white;
}

.tablet-primary .tablet-sub {
  color: rgba(255, 255, 255, 0.85);
}

.tablet-primary .tablet-arrow {
  color: rgba(255, 255, 255, 0.85);
}

.tablet-icon {
  font-size: 32px;
  flex-shrink: 0;
  width: 44px;
  text-align: center;
  line-height: 1;
}

.tablet-text {
  flex: 1;
  min-width: 0;
}

.tablet-label {
  font-size: 16px;
  font-weight: 700;
  line-height: 1.2;
  margin-bottom: 2px;
}

.tablet-sub {
  font-size: 12px;
  color: var(--text-dim);
  line-height: 1.3;
}

.tablet-arrow {
  font-size: 18px;
  color: var(--text-dim);
  flex-shrink: 0;
}

/* ── Contact summary card on detail page ──────────────────── */
.contact-card {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 0;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
}

.contact-field {
  padding: 16px 20px;
  border-right: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

.contact-field:last-child {
  border-right: none;
}

.contact-label {
  font-size: 12px;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 600;
  margin-bottom: 6px;
}

.contact-value {
  font-size: 16px;
  color: var(--text);
  word-wrap: break-word;
}

/* ── Filter bar on home page ──────────────────────────────── */
.filter-bar {
  display: flex;
  gap: 14px;
  align-items: center;
  background: var(--card);
  padding: 20px 24px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  margin-bottom: 16px;
  flex-wrap: wrap;
}

.filter-input {
  flex: 1;
  min-width: 320px;
  padding: 16px 20px;
  border: 2px solid var(--border);
  border-radius: var(--radius);
  font-size: 18px;
  background: #f8fafc;
  font-family: inherit;
}

.filter-input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.12);
  background: white;
}

.filter-select {
  padding: 16px 20px;
  border: 2px solid var(--border);
  border-radius: var(--radius);
  font-size: 18px;
  background: #f8fafc;
  cursor: pointer;
  min-width: 200px;
  font-family: inherit;
}

.filter-select:focus {
  outline: none;
  border-color: var(--accent);
  background: white;
}

.filter-btn {
  padding: 16px 28px;
  background: var(--accent);
  color: white;
  border: none;
  border-radius: var(--radius);
  font-size: 18px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s;
}

.filter-btn:hover {
  background: var(--accent-hover);
}

.filter-clear {
  padding: 10px 16px;
  color: var(--text-dim);
  text-decoration: none;
  font-size: 14px;
  border-radius: var(--radius);
}

.filter-clear:hover {
  color: var(--fail);
}

.filter-status {
  margin: 8px 4px 16px;
}

/* ── Warn text colour ─────────────────────────────────────── */
.col-warn {
  color: var(--warn);
  font-weight: 700;
}

/* ── Quick Access page ────────────────────────────────────── */
.quick-group {
  margin-bottom: 40px;
}

.quick-group h2 {
  margin-bottom: 4px;
}

.quick-group .dim {
  margin-bottom: 16px;
}

.quick-links {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  gap: 16px;
}

.quick-card {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 20px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  text-decoration: none;
  color: var(--text);
  box-shadow: var(--shadow);
  transition: all 0.15s;
}

.quick-card:hover {
  border-color: var(--accent);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.quick-icon {
  font-size: 32px;
  flex-shrink: 0;
  width: 48px;
  text-align: center;
}

.quick-body {
  flex: 1;
  min-width: 0;
}

.quick-label {
  font-size: 16px;
  font-weight: 700;
  margin-bottom: 4px;
}

.quick-desc {
  font-size: 13px;
  color: var(--text-dim);
  line-height: 1.4;
}

.quick-arrow {
  color: var(--text-dim);
  font-size: 18px;
  flex-shrink: 0;
  transition: color 0.15s;
}

.quick-card:hover .quick-arrow {
  color: var(--accent);
}

/* ── Retry buttons on detail page ─────────────────────────── */
.retry-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 16px;
  margin: 12px 0 24px;
}

.retry-form {
  margin: 0;
}

.retry-btn {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 20px 24px;
  border-radius: 14px;
  text-decoration: none;
  border: 2px solid var(--border);
  background: var(--card);
  color: var(--text);
  box-shadow: var(--shadow);
  cursor: pointer;
  font-family: inherit;
  width: 100%;
  text-align: left;
  transition: all 0.15s;
}

.retry-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.1);
  border-color: var(--accent);
}

.retry-primary {
  background: linear-gradient(135deg, #16a34a 0%, #15803d 100%);
  color: white;
  border-color: #15803d;
}

.retry-primary:hover {
  border-color: #166534;
  color: white;
}

.retry-primary .retry-sub {
  color: rgba(255, 255, 255, 0.85);
}

.retry-secondary {
  background: var(--card);
  color: var(--text);
}

.retry-icon {
  font-size: 32px;
  flex-shrink: 0;
  width: 44px;
  text-align: center;
  line-height: 1;
}

.retry-text {
  flex: 1;
  min-width: 0;
}

.retry-label {
  font-size: 17px;
  font-weight: 700;
  line-height: 1.2;
  margin-bottom: 2px;
}

.retry-sub {
  font-size: 13px;
  color: var(--text-dim);
  line-height: 1.3;
}

.retry-chain-note {
  margin: 16px 0;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.retry-chain-note .flag a {
  color: inherit;
  text-decoration: underline;
}

/* ── Retry timeline (full chain) ──────────────────────────── */
.retry-timeline {
  list-style: none;
  padding: 0;
  margin: 12px 0 24px;
  position: relative;
}
.retry-step {
  display: flex;
  gap: 14px;
  padding: 12px 14px;
  margin-bottom: 8px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--card);
  position: relative;
}
.retry-step-current {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px rgba(96, 165, 250, 0.18);
}
.retry-step-marker {
  flex: 0 0 28px;
  height: 28px;
  width: 28px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 700;
  background: var(--bg);
  border: 1px solid var(--border);
}
.retry-step-ok      .retry-step-marker { background: rgba(34, 197, 94, 0.15);  border-color: var(--ok);        color: var(--ok); }
.retry-step-fail    .retry-step-marker { background: rgba(220, 38, 38, 0.15);  border-color: var(--fail);      color: var(--fail); }
.retry-step-cancelled .retry-step-marker { background: rgba(148, 163, 184, 0.15); border-color: var(--text-dim); color: var(--text-dim); }
.retry-step-pending .retry-step-marker { background: rgba(245, 158, 11, 0.15); border-color: var(--warn);      color: var(--warn); }
.retry-step-body { flex: 1; min-width: 0; }
.retry-step-head {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: baseline;
}
.retry-step-head a { color: var(--accent); text-decoration: none; }
.retry-step-head a:hover { text-decoration: underline; }
.retry-step-meta {
  font-size: 12px;
  color: var(--text-dim);
  margin-top: 2px;
}
.retry-step-error {
  margin-top: 6px;
  font-size: 13px;
  color: var(--fail);
  background: rgba(220, 38, 38, 0.08);
  padding: 6px 10px;
  border-radius: 6px;
  word-break: break-word;
}

/* ── Edit & Retry form ────────────────────────────────────── */
.edit-form {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 24px;
  box-shadow: var(--shadow);
}

.edit-fieldset {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px 24px;
  margin-bottom: 24px;
}

.edit-fieldset legend {
  padding: 0 12px;
  font-weight: 700;
  font-size: 16px;
  color: var(--accent);
}

.edit-fieldset .dim {
  margin: 0 0 16px 0;
}

.edit-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 16px;
}

.edit-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.edit-label {
  font-size: 12px;
  color: var(--text-dim);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.edit-label em {
  font-style: italic;
  text-transform: none;
  color: var(--warn);
}

.edit-hint {
  font-size: 12px;
  color: var(--text-dim);
  font-style: italic;
  line-height: 1.4;
  margin-top: -2px;
}

.edit-field input[type="text"] {
  padding: 12px 14px;
  border: 2px solid var(--border);
  border-radius: var(--radius);
  font-size: 15px;
  background: #f8fafc;
  font-family: inherit;
}

.edit-field input[type="text"]:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
  background: white;
}

.edit-readonly input[type="text"] {
  background: #f1f5f9;
  color: var(--text-dim);
  cursor: not-allowed;
}

.edit-actions {
  display: flex;
  gap: 16px;
  align-items: center;
  padding-top: 8px;
}

.edit-submit {
  padding: 14px 32px;
  background: var(--accent);
  color: white;
  border: none;
  border-radius: var(--radius);
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.15s;
}

.edit-submit:hover {
  background: var(--accent-hover);
}

.edit-cancel {
  padding: 14px 24px;
  color: var(--text-dim);
  text-decoration: none;
  font-weight: 500;
  border-radius: var(--radius);
}

.edit-cancel:hover {
  color: var(--fail);
}

/* ── Businesses page status dots ──────────────────────────────
   Phase 4ac colourblind-safety: each status uses a distinct shape
   glyph (●/◐/○/×) AND a visible text label, so colour is now
   supplementary not load-bearing. Anyone who can't distinguish the
   colours can still tell the four states apart. */
.status-dot {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  font-size: 14px;
  line-height: 1;
  vertical-align: middle;
  font-weight: 700;
}

.dot-active   { color: var(--ok); }
.dot-quiet    { color: var(--accent); }
.dot-idle     { color: var(--warn); }
.dot-inactive { color: #94a3b8; }

.status-label {
  display: block;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-dim);
  margin-top: 2px;
  text-align: center;
}

/* ── Backup actions (Phase 4h) ────────────────────────────── */
.backup-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin: 20px 0 8px;
}

.backup-actions form {
  margin: 0;
}

.backup-download-btn {
  display: inline-flex;
  align-items: center;
  padding: 16px 28px;
  background: var(--card);
  color: var(--accent);
  border: 2px solid var(--accent);
  border-radius: var(--radius);
  font-size: 16px;
  font-weight: 700;
  text-decoration: none;
  font-family: inherit;
  transition: all 0.15s;
}

.backup-download-btn:hover {
  background: var(--accent);
  color: white;
}

/* ── Unmatched custom fields (Phase 4f-1) ─────────────────── */
.unmatched-box {
  background: var(--warn-bg);
  border: 1px solid var(--warn);
  border-left: 6px solid var(--warn);
  padding: 20px 24px;
  border-radius: var(--radius);
  margin: 12px 0 24px;
}

.unmatched-headline {
  margin: 0 0 8px 0;
  font-size: 16px;
  color: #92400e;
}

.unmatched-explain {
  margin: 8px 0 12px 0;
  font-size: 14px;
  color: #78350f;
  line-height: 1.5;
}

.unmatched-explain code {
  background: rgba(255, 255, 255, 0.6);
  color: #78350f;
}

.unmatched-list {
  margin: 12px 0 0 0;
  padding-left: 24px;
  columns: 2;
  column-gap: 32px;
}

.unmatched-list li {
  padding: 4px 0;
  break-inside: avoid;
}

.unmatched-list code {
  background: white;
  color: #78350f;
  font-size: 13px;
}

.unmatched-glyph {
  display: inline-block;
  background: var(--warn-bg);
  color: var(--warn);
  padding: 2px 8px;
  border-radius: 100px;
  font-size: 11px;
  font-weight: 700;
  margin-left: 6px;
  vertical-align: middle;
}

/* ── Alert banners (Runbook page) ─────────────────────────── */
.alert-banner {
  padding: 16px 20px;
  border-radius: var(--radius);
  border-left: 5px solid;
  font-size: 15px;
  margin: 12px 0;
}

.alert-banner code {
  background: rgba(0, 0, 0, 0.08);
  padding: 2px 6px;
  border-radius: 4px;
}

.alert-banner.alert-ok {
  background: var(--ok-bg);
  border-left-color: var(--ok);
  color: var(--ok);
}

.alert-banner.alert-ok strong {
  color: #166534;
}

.alert-banner.alert-warn {
  background: var(--warn-bg);
  border-left-color: var(--warn);
  color: #92400e;
}

.alert-banner.alert-fail {
  background: var(--fail-bg);
  border-left-color: var(--fail);
  color: var(--fail);
}

.runbook-details {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px 20px;
  margin: 16px 0;
  box-shadow: var(--shadow);
}

.runbook-details summary {
  cursor: pointer;
  font-size: 15px;
  padding: 4px 0;
}

/* Phase 4x polish: wrap each top-level Runbook section in a card
   so the page reads as discrete blocks instead of one long scroll
   of headings on the page background. */
.runbook-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 22px 26px;
  margin-bottom: 20px;
  box-shadow: var(--shadow);
}
.runbook-card > h2:first-child {
  margin-top: 0;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 18px;
}
/* Nested details inside a card look less prominent than the card
   itself — slightly tinted background, no shadow — so the nesting
   reads correctly. */
.runbook-card .runbook-details {
  background: #f9fafb;
  box-shadow: none;
}

/* Phase 4v: Heartbeat section */
.heartbeat-enabled  { color: #059669; font-weight: 600; }
.heartbeat-disabled { color: #9ca3af; font-weight: 600; }
.alert-fail-text    { color: #dc2626; font-weight: 600; }
.heartbeat-start-btn { background: #ecfdf5; border-color: #a7f3d0; color: #065f46; }
.heartbeat-start-btn:hover { background: #d1fae5; border-color: #10b981; }
.heartbeat-stop-btn  { background: #fef2f2; border-color: #fca5a5; color: #991b1b; }
.heartbeat-stop-btn:hover  { background: #fee2e2; border-color: #dc2626; }
.heartbeat-config-form {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px 16px;
  margin-top: 14px;
}
.heartbeat-config-form label {
  display: flex;
  flex-direction: column;
  font-size: 13px;
  color: #374151;
  font-weight: 600;
  gap: 4px;
}
.heartbeat-config-form label input {
  font-weight: normal;
}
.heartbeat-config-form button {
  grid-column: 1 / -1;
  justify-self: start;
}
tr.heartbeat-pass td:nth-child(2) { color: #059669; font-weight: 600; }
tr.heartbeat-fail td:nth-child(2) { color: #dc2626; font-weight: 600; }

/* Phase 4ad: redeploy button — accent-red so it's clearly distinct
   from the routine "Run heartbeat now" / "Run backup now" buttons.
   The action restarts the whole bridge; warrants visual weight. */
.redeploy-btn {
  background: var(--fail);
  border-color: var(--fail);
  color: #fff;
}
.redeploy-btn:hover { filter: brightness(1.1); }
.redeploy-form { margin-top: 12px; }

/* Phase 4ac: New-business onboarding wizard. Numbered steps in
   visually distinct cards so the page reads as a clear sequence. */
.onboard-steps {
  list-style: none;
  padding: 0;
  margin: 20px 0;
  counter-reset: ob-counter;
}
.onboard-step {
  counter-increment: ob-counter;
  margin-bottom: 24px;
  padding: 20px 24px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: var(--shadow);
  position: relative;
}
.onboard-step h2 {
  margin-top: 0;
  margin-bottom: 12px;
  font-size: 18px;
  color: var(--text);
}
.onboard-step p { margin: 8px 0; }
.onboard-step ol, .onboard-step ul { margin: 8px 0 8px 22px; }
.onboard-step .kv-table { margin: 12px 0; }
.onboard-step .loadtest-rotator { margin: 12px 0; }
.onboard-scopes {
  list-style: none;
  padding: 0;
  margin: 8px 0 12px;
}
.onboard-scopes li {
  padding: 4px 0;
}
@media (max-width: 768px) {
  .onboard-step { padding: 14px 16px; }
  .onboard-step h2 { font-size: 16px; }
}

/* Phase 4ac: SSL cert expiry badge in the header. Same height as
   the health badge, sits to its right. Greyish-green normally,
   amber under 14d, red under 7d. Glyph + text — colour-blind safe. */
.cert-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 600;
  background: rgba(255, 255, 255, 0.08);
  color: #f1f5f9;
  border: 1px solid rgba(255, 255, 255, 0.15);
  margin-left: 10px;
}
.cert-badge.cert-ok    { color: #bbf7d0; }                 /* mint — fine */
.cert-badge.cert-warn  { color: #fde68a; border-color: rgba(245, 158, 11, 0.5); }
.cert-badge.cert-bad   { color: #fecaca; border-color: rgba(220, 38, 38, 0.7); background: rgba(220, 38, 38, 0.15); }
@media (max-width: 768px) {
  .cert-badge { font-size: 11px; padding: 4px 7px; }
}

/* Phase 4ab: small grey licence prefix shown under the friendly
   business name on the Businesses page. */
.col-licence-prefix {
  font-size: 11px;
  margin-top: 2px;
  font-weight: 400;
  letter-spacing: 0.04em;
}

/* ── Back-to-top floating button ─────────────────────────────
   Appears once the user scrolls past ~400px. 48x48 — comfortably
   above the iOS 44px tap minimum. Bottom-right so it doesn't
   overlap content. */
.back-to-top {
  position: fixed;
  right: 20px;
  bottom: 20px;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--accent);
  color: #fff;
  font-size: 22px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
  z-index: 1000;
  transition: transform 0.15s ease, opacity 0.2s ease, background 0.15s ease;
}
.back-to-top:hover  { background: #1d4ed8; transform: translateY(-2px); }
.back-to-top:active { transform: translateY(0); }
.back-to-top:focus-visible { outline: 3px solid var(--warn); outline-offset: 2px; }
.back-to-top[hidden] { display: none; }

/* On mobile keep it tucked away from the bulk-action floating bar */
@media (max-width: 768px) {
  .back-to-top {
    right: 14px;
    bottom: 14px;
  }
}

/* ── Load test command builder on the Runbook ───────────────
   Same pattern as the password rotator: tiny in-browser widget
   that builds a shell command, copy-to-clipboard, auto-wipes.
   PIT/location embedded at render time from heartbeatConfig. */
.loadtest-rotator {
  margin: 12px 0;
  padding: 12px 14px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 10px;
}
.loadtest-input-row {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
  margin-bottom: 10px;
}
.loadtest-input-row label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--text-dim);
}

/* ── FTP password rotator widget on the Runbook ─────────────
   Client-side only — the pasted password never leaves the browser
   and is auto-wiped after 30s or when the section is closed. */
.pw-rotator {
  margin: 12px 0;
  padding: 12px 14px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 10px;
}
.pw-rotator-input-row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin: 10px 0;
}
.pw-rotator-input-row .filter-input {
  flex: 1 1 240px;
  min-width: 200px;
}
/* IMPORTANT: must beat .runbook-details pre (#f1f5f9 light-grey bg)
   which would otherwise win on specificity when our widget sits inside
   a <details class="runbook-details">. Use pre.pw-rotator-out so the
   selector specificity matches. */
pre.pw-rotator-out,
.pw-rotator-out {
  background: #0f172a !important;     /* dark navy — high contrast for the white text */
  color: #f8fafc !important;          /* near-white so the generated commands are clearly readable */
  padding: 10px 12px;
  border-radius: 8px;
  overflow-x: auto;
  font-size: 13px;
  white-space: pre;
  border: 1px solid var(--border);
  font-family: ui-monospace, Menlo, Consolas, monospace;
}
.pw-rotator-copy {
  background: var(--ok);
  border-color: var(--ok);
  color: #fff;
}
.pw-rotator-copy:hover {
  filter: brightness(1.1);
}
.pw-rotator-status {
  font-size: 13px;
  min-height: 18px;
  margin-top: 6px;
}

/* ── Heartbeat 24h history bar chart ─────────────────────────
   One thin vertical bar per run, oldest-left to newest-right.
   Green pass, red fail, amber pending. Hover for per-run detail. */
.hb-history-block {
  margin: 14px 0;
  padding: 12px 14px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 10px;
}
.hb-history-title {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 8px;
  flex-wrap: wrap;
}
.hb-history-summary {
  font-weight: 400;
  font-size: 12px;
  color: var(--text-dim);
}
.hb-history-ok   { color: var(--ok); font-weight: 600; }
.hb-history-fail { color: var(--fail); font-weight: 600; }
.hb-bars {
  display: flex;
  align-items: flex-end;
  gap: 2px;
  height: 36px;
  width: 100%;
  overflow: hidden;
}
.hb-bar {
  flex: 1 1 auto;
  min-width: 2px;
  max-width: 10px;
  height: 100%;
  border-radius: 2px;
  cursor: help;
  transition: transform 0.1s ease;
}
.hb-bar:hover { transform: scaleY(1.08); }
.hb-bar-ok      { background: var(--ok); }
/* Phase 4ac: failed bars use a diagonal stripe pattern AS WELL AS
   the red colour, so colourblind users still see a distinct texture.
   Pending bars use a horizontal stripe — three distinct shapes. */
.hb-bar-fail {
  background:
    repeating-linear-gradient(45deg, var(--fail), var(--fail) 3px, #b91c1c 3px, #b91c1c 6px);
}
.hb-bar-pending {
  background:
    repeating-linear-gradient(0deg, var(--warn), var(--warn) 2px, #b45309 2px, #b45309 4px);
}
.hb-history-axis {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  margin-top: 4px;
}

.runbook-details summary:hover {
  color: var(--accent);
}

.runbook-details ol {
  margin: 16px 0 8px;
}

.runbook-details pre {
  background: #f1f5f9;
  padding: 12px 16px;
  border-radius: 6px;
  font-size: 13px;
  overflow-x: auto;
  margin: 8px 0;
}

/* ── Footer ────────────────────────────────────────────────── */
.site-footer {
  text-align: center;
  padding: 24px;
  color: var(--text-dim);
  font-size: 13px;
  margin-top: 48px;
}
.build-sha {
  background: rgba(99, 102, 241, 0.1);
  padding: 1px 6px;
  border-radius: 4px;
  font-size: 12px;
  color: var(--text);
}
.build-dirty {
  background: rgba(245, 158, 11, 0.15);
  color: var(--warn);
  padding: 1px 6px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 600;
  margin-left: 4px;
}

/* ── Phase 4j-4: Mapping Builder ───────────────────────────── */

/* "Map these fields" CTA inside the detail-page unmatched box */
.unmatched-actions {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid rgba(0,0,0,0.1);
}
.map-fields-btn {
  display: inline-block;
  padding: 12px 20px;
  background: #f59e0b;
  color: #fff;
  text-decoration: none;
  border-radius: 8px;
  font-weight: 600;
  font-size: 15px;
  transition: background 0.15s ease;
}
.map-fields-btn:hover {
  background: #d97706;
}

/* Mapping page intro copy */
.map-intro {
  background: #fef3c7;
  border-left: 4px solid #f59e0b;
  padding: 16px 20px;
  border-radius: 6px;
  margin-bottom: 24px;
}
.map-intro p {
  margin: 4px 0;
}

/* One row per unmatched column — displayed as a stack of mini-forms */
.map-form-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.map-row {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) minmax(280px, 2fr) auto auto;
  gap: 14px;
  align-items: center;
  padding: 14px 16px;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  box-shadow: 0 1px 2px rgba(0,0,0,0.04);
}
.map-row:hover {
  border-color: #c7d2fe;
}
.map-col-name code {
  font-size: 15px;
  background: #f3f4f6;
  padding: 4px 8px;
  border-radius: 4px;
}
.map-existing {
  display: block;
  font-size: 12px;
  color: #059669;
  margin-top: 4px;
}
.map-select {
  width: 100%;
  padding: 10px 12px;
  font-size: 14px;
  border: 2px solid #d1d5db;
  border-radius: 6px;
  background: #fff;
  cursor: pointer;
}
.map-select:focus {
  outline: none;
  border-color: #6366f1;
}
.map-col-apply label {
  font-size: 13px;
  color: var(--text-dim);
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
}
.map-col-apply input[type="checkbox"] {
  margin-right: 4px;
}
.map-save-btn {
  padding: 10px 18px;
  background: linear-gradient(180deg, #10b981, #059669);
  color: #fff;
  border: none;
  border-radius: 6px;
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
  white-space: nowrap;
}
.map-save-btn:hover {
  filter: brightness(1.05);
}

/* Management page table */
.mappings-table {
  width: 100%;
  border-collapse: collapse;
  background: #fff;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(0,0,0,0.04);
}
.mappings-table th,
.mappings-table td {
  padding: 12px 14px;
  text-align: left;
  border-bottom: 1px solid #e5e7eb;
}
.mappings-table th {
  background: #f9fafb;
  font-weight: 600;
  font-size: 13px;
  color: var(--text-dim);
}
.map-delete-btn {
  padding: 6px 12px;
  background: #fef2f2;
  color: #991b1b;
  border: 1px solid #fecaca;
  border-radius: 4px;
  font-size: 12px;
  cursor: pointer;
}
.map-delete-btn:hover {
  background: #fee2e2;
}

/* Breadcrumbs used on the two new pages */
.breadcrumbs {
  margin-bottom: 16px;
  font-size: 13px;
  color: var(--text-dim);
}
.breadcrumbs a {
  color: var(--text-dim);
  text-decoration: none;
}
.breadcrumbs a:hover {
  color: #4f46e5;
  text-decoration: underline;
}

.back-link {
  margin-top: 32px;
}
.back-link a {
  color: var(--text-dim);
  text-decoration: none;
  font-size: 14px;
}
.back-link a:hover {
  text-decoration: underline;
}

@media (max-width: 860px) {
  .map-row {
    grid-template-columns: 1fr;
    gap: 10px;
  }
}

/* ── Phase 4q-0: Folder-state badges ─────────────────────── */
.folder-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px 2px 6px;
  margin-left: 6px;
  font-size: 11px;
  font-weight: 600;
  line-height: 1;
  border-radius: 999px;
  border: 1px solid currentColor;
  background: rgba(255, 255, 255, 0.55);
  white-space: nowrap;
  vertical-align: middle;
}
.folder-badge .folder-icon {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}
.folder-badge .folder-label {
  letter-spacing: 0.02em;
}
/* Variant colours via currentColor — icons + borders inherit */
.folder-up        { color: #2563eb; background: #eff6ff; }
.folder-down      { color: #b45309; background: #fffbeb; }
.folder-processed { color: #047857; background: #ecfdf5; opacity: 0.78; }
.folder-failed    { color: #b91c1c; background: #fef2f2; }
.folder-gone      { color: #6b7280; background: #f3f4f6; }

/* When badges live on the detail page h1, bump the size a touch so
   they sit well alongside a 24px title. */
h1 .folder-badge {
  font-size: 13px;
  padding: 4px 12px 4px 8px;
  margin-left: 10px;
  vertical-align: middle;
}
h1 .folder-badge .folder-icon {
  width: 16px;
  height: 16px;
}

/* ── Phase 4q-1: Cancelled banner + delete buttons + modal ──── */

.cancelled-banner {
  background: #f3f4f6;
  border: 1px solid #d1d5db;
  border-left: 4px solid #6b7280;
  border-radius: 8px;
  padding: 14px 18px;
  margin: 16px 0;
  color: #374151;
}
.cancelled-banner strong { font-size: 16px; }
.cancelled-banner .dim { margin-left: 8px; font-size: 13px; }
.cancelled-reason {
  margin: 8px 0 0;
  font-style: italic;
}

.delete-intro {
  margin: -6px 0 12px 0;
  font-size: 14px;
}

.delete-row {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  margin: 10px 0 18px 0;
}
.delete-btn {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 20px;
  min-width: 320px;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  background: #fff;
  color: inherit;
  cursor: pointer;
  text-align: left;
  font: inherit;
  transition: transform 0.1s ease, box-shadow 0.1s ease, border-color 0.1s ease;
}
.delete-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.06);
}
.delete-btn .delete-icon { font-size: 30px; flex-shrink: 0; }
.delete-btn .delete-label { font-weight: 600; font-size: 15px; }
.delete-btn .delete-sub   { font-size: 12px; color: var(--text-dim); margin-top: 2px; }

.delete-primary {
  background: linear-gradient(180deg, #fff5f5, #fee2e2);
  border-color: #fca5a5;
}
.delete-primary:hover { border-color: #dc2626; }
.delete-primary .delete-label { color: #991b1b; }

.delete-secondary {
  background: #f9fafb;
}
.delete-secondary:hover { border-color: #6b7280; }

/* Confirmation modal */
.delete-modal {
  position: fixed;
  inset: 0;
  background: rgba(17, 24, 39, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9998;
  padding: 20px;
}
.delete-modal[hidden] { display: none; }
.delete-modal-box {
  background: #fff;
  border-radius: 12px;
  padding: 28px 32px;
  max-width: 520px;
  width: 100%;
  box-shadow: 0 20px 60px rgba(0,0,0,0.3);
}
.delete-modal-box h3 {
  margin: 0 0 12px 0;
  font-size: 20px;
}
.delete-modal-prompt {
  margin: 18px 0 8px 0;
  font-weight: 600;
  font-size: 13px;
  color: #374151;
}
.delete-modal-input {
  width: 100%;
  padding: 12px 14px;
  font-size: 15px;
  border: 2px solid #d1d5db;
  border-radius: 8px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}
.delete-modal-input:focus {
  outline: none;
  border-color: #dc2626;
}
.delete-modal-actions {
  display: flex;
  gap: 12px;
  justify-content: flex-end;
  margin-top: 20px;
}
.delete-modal-cancel {
  padding: 10px 18px;
  background: #f3f4f6;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  cursor: pointer;
  font-size: 14px;
}
.delete-modal-confirm {
  padding: 10px 18px;
  background: #dc2626;
  color: #fff;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 600;
}
.delete-modal-confirm:disabled {
  background: #fca5a5;
  cursor: not-allowed;
}

/* ── Phase 4r: Folder Explorer ───────────────────────────── */

.folder-section {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  margin: 18px 0;
  overflow: hidden;
}
.folder-section-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border);
  background: #f9fafb;
}
.folder-section-head-main {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 14px;
  flex: 1;
}
.folder-section-head h2 {
  margin: 0;
  font-size: 17px;
  display: flex;
  align-items: baseline;
  gap: 10px;
}
.folder-bulk-delete-btn {
  padding: 8px 14px;
  font-size: 13px;
  font-weight: 600;
  color: #991b1b;
  background: #fff;
  border: 1.5px solid #fca5a5;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.12s;
  white-space: nowrap;
}
.folder-bulk-delete-btn:hover {
  background: #fef2f2;
  border-color: #dc2626;
}
.folder-bulk-warn {
  margin: 4px 0 14px 0;
  padding: 12px 14px;
  background: #fef2f2;
  border-left: 4px solid #dc2626;
  border-radius: 6px;
  color: #991b1b;
  font-size: 14px;
}
.bulk-result-banner {
  margin: 14px 0;
  padding: 14px 18px;
  background: #ecfdf5;
  border: 1px solid #a7f3d0;
  border-left: 4px solid #10b981;
  border-radius: 8px;
  color: #065f46;
  font-size: 14px;
}
.bulk-result-banner code {
  background: #fff;
  padding: 1px 6px;
  border-radius: 4px;
  border: 1px solid #a7f3d0;
}
.folder-section-count {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-dim);
  background: #fff;
  padding: 2px 10px;
  border-radius: 999px;
  border: 1px solid var(--border);
}
.folder-section-path {
  font-size: 12px;
  color: var(--text-dim);
  background: #fff;
  padding: 4px 10px;
  border-radius: 4px;
  border: 1px solid var(--border);
  white-space: nowrap;
}
.folder-section-empty {
  padding: 20px 24px;
  margin: 0;
  text-align: center;
  font-size: 14px;
}
.folder-section-more {
  text-align: center;
  font-size: 12px;
  margin: -10px 0 20px 0;
}

/* Colour-accent the four section variants via a left border */
.folder-section-up        { border-left: 4px solid #3b82f6; }
.folder-section-down      { border-left: 4px solid #f59e0b; }
.folder-section-processed { border-left: 4px solid #10b981; }
.folder-section-failed    { border-left: 4px solid #dc2626; }

.explorer-table {
  width: 100%;
  border-collapse: collapse;
}
.explorer-table th {
  text-align: left;
  padding: 10px 16px;
  font-size: 11px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-dim);
  border-bottom: 1px solid var(--border);
  background: #fafafa;
}
.explorer-table td {
  padding: 10px 16px;
  border-bottom: 1px solid #f3f4f6;
  font-size: 13px;
  vertical-align: middle;
}
.explorer-table tbody tr:last-child td {
  border-bottom: none;
}
.explorer-row-click {
  cursor: pointer;
  transition: background 0.1s;
}
.explorer-row-click:hover {
  background: #f8fafc;
}
.explorer-row-static {
  color: var(--text-dim);
}
.col-customer {
  white-space: nowrap;
}
.col-customer strong {
  color: #1f2937;
}

/* Phase 4x: two-line cell used on Home + Failed tables when a log
   row has contact data. Customer line is bold + main-text colour so
   the eye lands on "Johnson S1 1AA" first; filename line sits
   underneath in a slightly subdued slate. Kept deliberately close
   to the main text colour so the filename stays comfortably
   readable (not hidden). */
.customer-line {
  font-size: 15px;
  line-height: 1.3;
  color: #1f2937;
  font-weight: 500;
}
.customer-line strong {
  color: #0f172a;
  font-weight: 700;
  margin-right: 8px;
}
.customer-line .postcode {
  color: #475569;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}
/* Phase 4x: filename + badges live side-by-side on desktop.
   The filename scrolls horizontally within its own element when
   too long (so badges never get pushed off the right). On mobile
   (handled in the @media block) the badges drop underneath. */
.filename-sub {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 10px;
  margin-top: 3px;
  line-height: 1.35;
}
.filename-text {
  font-size: 15px;
  color: #334155;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  display: inline-block;
  max-width: 100%;
  overflow-x: auto;
  white-space: nowrap;
  -webkit-overflow-scrolling: touch;
}
.row-badges {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 4px 6px;
  align-items: center;
}

.explorer-flag {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 999px;
  margin-left: 6px;
  vertical-align: middle;
}
.explorer-flag-warn {
  background: #fef3c7;
  color: #92400e;
  border: 1px solid #fde68a;
}

/* ── Phase 4q-2: Bulk-delete checkboxes + floating bar ───── */

.col-select {
  width: 42px;
  text-align: center;
  vertical-align: middle;
  padding: 16px 8px;
  user-select: none;
}
.col-select[onclick] {
  /* Only eligible cells get the pointer cursor. Disabled-row
     col-select cells have no onclick and no pointer. */
  cursor: pointer;
}
.col-select[onclick]:hover {
  background: #e0e7ff;
}
.col-select[onclick]:hover input[type="checkbox"]:not(:disabled) {
  outline: 2px solid #6366f1;
  outline-offset: 2px;
}
.col-select input[type="checkbox"] {
  cursor: pointer;
  width: 18px;
  height: 18px;
  margin: 0;
  /* Slightly accentuated so it's obvious it's clickable */
  accent-color: #6366f1;
  /* Make the input itself unreceptive to mouse events — all clicks
     go through the parent td's onclick, which then toggles the
     checkbox manually. Prevents any native-label-wasn't-wrapping
     weirdness from stopping the toggle. */
  pointer-events: none;
}
.col-select input[type="checkbox"]:disabled {
  cursor: not-allowed;
  opacity: 0.25;
}
/* Phase 4q polish: dim the whole disabled cell so it reads as
   "not available" at a glance. Diagonal stripe background makes
   it obvious the column is inert for this row. */
.col-select-disabled {
  background: repeating-linear-gradient(
    45deg,
    #f9fafb,
    #f9fafb 4px,
    #f3f4f6 4px,
    #f3f4f6 8px
  );
  cursor: not-allowed !important;
}
.col-select-disabled:hover {
  /* No hover highlight on disabled cells */
  background: repeating-linear-gradient(
    45deg,
    #f9fafb,
    #f9fafb 4px,
    #f3f4f6 4px,
    #f3f4f6 8px
  ) !important;
}

.bulk-bar {
  position: fixed;
  left: 50%;
  bottom: 24px;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 18px;
  background: #1f2937;
  color: #fff;
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.35);
  z-index: 9997;
  animation: bulk-bar-in 200ms ease-out;
}
.bulk-bar[hidden] { display: none; }
@keyframes bulk-bar-in {
  from { opacity: 0; transform: translate(-50%, 10px); }
  to   { opacity: 1; transform: translate(-50%, 0); }
}
.bulk-bar-count {
  font-size: 14px;
  margin-right: 8px;
}
.bulk-bar-count strong {
  font-size: 18px;
  color: #fff;
  margin-right: 4px;
}
.bulk-bar-btn {
  padding: 9px 14px;
  border-radius: 8px;
  border: 1px solid transparent;
  cursor: pointer;
  font: inherit;
  font-weight: 600;
  font-size: 13px;
  white-space: nowrap;
}
.bulk-primary {
  background: #dc2626; color: #fff;
}
.bulk-primary:hover { background: #b91c1c; }
.bulk-secondary {
  background: #4b5563; color: #fff;
}
.bulk-secondary:hover { background: #374151; }
.bulk-cancel {
  background: transparent;
  color: #d1d5db;
  border-color: #4b5563;
}
.bulk-cancel:hover {
  background: #374151;
}

.bulk-modal-list {
  max-height: 180px;
  overflow-y: auto;
  margin: 10px 0;
  padding: 10px 14px 10px 28px;
  background: #f9fafb;
  border: 1px solid #e5e7eb;
  border-radius: 6px;
  font-size: 13px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}
.bulk-modal-list li {
  padding: 2px 0;
}

/* ── Phase 4p-1: Live "now processing" banner ────────────── */

.live-banner {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0 0 20px 0;
  padding: 14px 20px;
  background: linear-gradient(90deg, #eef2ff, #f5f3ff);
  border: 1px solid #c7d2fe;
  border-left: 4px solid #6366f1;
  border-radius: 10px;
  color: #1e1b4b;
  font-size: 15px;
  box-shadow: 0 2px 8px rgba(99, 102, 241, 0.08);
  animation: live-slide-in 250ms ease-out;
}
.live-banner[hidden] {
  display: none;
}
.live-text {
  flex: 1;
}
.live-headline {
  font-weight: 600;
}
.live-detail {
  color: #4f46e5;
}
.live-spinner {
  width: 18px;
  height: 18px;
  border: 2px solid #c7d2fe;
  border-top-color: #4f46e5;
  border-radius: 50%;
  animation: live-spin 900ms linear infinite;
  flex-shrink: 0;
}

@keyframes live-spin {
  to { transform: rotate(360deg); }
}

@keyframes live-slide-in {
  from {
    opacity: 0;
    transform: translateY(-6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ── Phase 4p-2: Data lineage tooltips ──────────────────── */
/* Any element with .lineage gets a subtle dotted underline + help
   cursor so users know the title attribute has context in it. */
.lineage {
  border-bottom: 1px dotted rgba(99, 102, 241, 0.45);
  cursor: help;
}
th.lineage,
.kv-table th[title] {
  border-bottom: 1px dotted rgba(99, 102, 241, 0.45);
  cursor: help;
}

/* ── Phase 4p-3: Confetti on first successful file per licence per day ── */

.confetti-burst {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9999;
  overflow: hidden;
}
.confetti-piece {
  position: absolute;
  top: 10vh;
  width: 10px;
  height: 14px;
  border-radius: 2px;
  opacity: 0.9;
  animation-name: confetti-fall;
  animation-timing-function: cubic-bezier(0.2, 0.6, 0.3, 1);
  animation-fill-mode: forwards;
}
@keyframes confetti-fall {
  0%   { transform: translateY(-20vh) rotate(0deg);  opacity: 1; }
  100% { transform: translateY( 90vh) rotate(540deg); opacity: 0; }
}

/* ── Phase 4o-1: In-dashboard docs viewer ─────────────────── */

.docs-breadcrumb {
  margin: 0 0 16px 0;
  font-size: 13px;
  color: var(--text-dim);
}
.docs-breadcrumb a {
  color: var(--text-dim);
  text-decoration: none;
}
.docs-breadcrumb a:hover {
  color: #4f46e5;
  text-decoration: underline;
}

.docs-body {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 32px 40px;
  max-width: 880px;
  line-height: 1.55;
  color: #1f2937;
}
.docs-body h1 {
  font-size: 28px;
  margin: 0 0 20px 0;
  padding-bottom: 12px;
  border-bottom: 2px solid #e5e7eb;
}
.docs-body h2 {
  font-size: 22px;
  margin: 32px 0 14px 0;
  padding-bottom: 6px;
  border-bottom: 1px solid #e5e7eb;
}
.docs-body h3 {
  font-size: 17px;
  margin: 24px 0 10px 0;
}
.docs-body h4 {
  font-size: 15px;
  margin: 20px 0 8px 0;
}
.docs-body p {
  margin: 0 0 14px 0;
}
.docs-body ul,
.docs-body ol {
  margin: 0 0 14px 0;
  padding-left: 28px;
}
.docs-body li {
  margin: 4px 0;
}
.docs-body code {
  background: #f3f4f6;
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 13px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  color: #be185d;
}
.docs-body pre {
  background: #f9fafb;
  border: 1px solid #e5e7eb;
  border-radius: 6px;
  padding: 14px 16px;
  overflow-x: auto;
  font-size: 13px;
  line-height: 1.45;
  margin: 0 0 14px 0;
}
.docs-body pre code {
  background: none;
  padding: 0;
  color: #1f2937;
}
.docs-body blockquote {
  border-left: 4px solid #c7d2fe;
  background: #eef2ff;
  padding: 10px 16px;
  margin: 14px 0;
  color: #3730a3;
}
.docs-body table {
  width: 100%;
  border-collapse: collapse;
  margin: 14px 0 22px 0;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 6px;
  overflow: hidden;
}
.docs-body th,
.docs-body td {
  padding: 10px 12px;
  text-align: left;
  border-bottom: 1px solid #f3f4f6;
  vertical-align: top;
}
.docs-body th {
  background: #f9fafb;
  font-weight: 600;
  font-size: 13px;
  color: var(--text-dim);
}
.docs-body hr {
  margin: 28px 0;
  border: none;
  border-top: 1px solid #e5e7eb;
}
.docs-body a {
  color: #4f46e5;
  text-decoration: none;
}
.docs-body a:hover {
  text-decoration: underline;
}

@media (max-width: 720px) {
  .docs-body {
    padding: 20px;
  }
  .docs-body table {
    font-size: 13px;
  }
}

/* ── Phase 4j-5: Tenant test alert form ───────────────────── */
.tenant-test-form {
  display: flex;
  gap: 12px;
  align-items: center;
  flex-wrap: wrap;
  margin: 16px 0 8px;
  padding: 14px 16px;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
}
.tenant-test-form label {
  font-weight: 600;
  font-size: 14px;
  color: var(--text-dim);
}
.tenant-test-form .filter-select {
  min-width: 220px;
}

/* ═══════════════════════════════════════════════════════════════════
   Phase 4w: Mobile (iPhone 14 + iPad portrait, ≤ 768px)
   Single breakpoint. Every rule below is additive — nothing touches
   desktop. Safe to delete this whole block to revert.
   ═══════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {

  /* ── Global safety nets ── */
  html { overflow-x: hidden; -webkit-text-size-adjust: 100%; }
  body { font-size: 16px; }

  /* Inputs bumped to 16px to prevent iOS auto-zoom on focus */
  input[type="text"],
  input[type="number"],
  input[type="password"],
  input[type="email"],
  select,
  textarea {
    font-size: 16px !important;
  }

  /* ── Header + nav ── */
  .site-header {
    padding: 12px 16px;
    flex-wrap: wrap;
    gap: 8px;
  }
  .brand { font-size: 16px; }
  .logo  { font-size: 22px; }
  .health-badge {
    padding: 6px 12px;
    margin-right: 0;
    gap: 10px;
  }
  .health-badge .health-failures { display: none; } /* redundant with tab-title prefix */
  .health-label { font-size: 9px; }
  .health-value { font-size: 12px; }

  /* Nav wraps to a second header row. 7 links fit comfortably. */
  .site-nav {
    flex-wrap: wrap;
    gap: 4px 8px;
    width: 100%;
    order: 3;
    padding-top: 10px;
    margin-top: 6px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    justify-content: flex-start;
  }
  .site-nav a {
    padding: 10px 12px;
    min-height: 44px;
    display: flex;
    align-items: center;
    font-size: 14px;
  }

  /* ── Container + typography ── */
  .container {
    max-width: 100%;
    padding: 16px 12px;
  }
  h1 { font-size: 22px; margin-bottom: 12px; }
  h2 { font-size: 17px; margin: 24px 0 12px; }
  h3 { font-size: 14px; margin: 16px 0 6px; }

  /* ── Stat cards ── */
  .stats-row {
    flex-wrap: wrap;
    gap: 10px;
  }
  .stat-card {
    flex: 1 1 calc(50% - 5px);
    min-width: 0;
    padding: 14px 16px;
  }
  .stat-value { font-size: 24px; }
  .stat-label { font-size: 11px; }

  /* ── Tables → cards (the big one) ──
     Every table with class .files-table, .explorer-table, or .kv-table
     is flattened to a single column of labelled key/value rows. The
     td::before pseudo-element reads data-label from the cell. */
  .files-table,
  .files-table thead,
  .files-table tbody,
  .files-table tr,
  .files-table td,
  .explorer-table,
  .explorer-table thead,
  .explorer-table tbody,
  .explorer-table tr,
  .explorer-table td {
    display: block;
  }
  .files-table thead,
  .explorer-table thead { display: none; }

  .files-table tr,
  .explorer-table tr {
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 10px 12px;
    margin-bottom: 10px;
    background: var(--card);
    box-shadow: var(--shadow);
    cursor: pointer;
  }

  .files-table td,
  .explorer-table td {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    padding: 5px 0;
    border: none !important;
    min-height: 30px;
    align-items: center;
    font-size: 14px;
  }

  .files-table td::before,
  .explorer-table td::before {
    content: attr(data-label);
    color: var(--text-dim);
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    flex-shrink: 0;
    max-width: 40%;
  }
  /* Hide the pseudo-label for cells with an empty data-label */
  .files-table td[data-label=""]::before,
  .explorer-table td[data-label=""]::before {
    display: none;
  }

  /* Filename cell: stacked customer/file/badges.
     .filename-text handles its own horizontal scroll for long names
     (set in the desktop block), so the cell itself doesn't need
     white-space: nowrap — which would have forced the badges off
     the right edge. Badges drop to their own line below the
     filename via .filename-sub flex-direction: column. */
  .files-table .col-filename,
  .explorer-table .col-filename {
    flex-direction: column;
    align-items: flex-start;
    gap: 3px;
    padding: 8px 0 6px;
    border-top: 1px solid var(--border) !important;
    border-bottom: 1px solid var(--border) !important;
    margin: 4px 0;
    overflow: hidden;  /* keep the cell itself inside the card */
  }
  .files-table .col-filename::before,
  .explorer-table .col-filename::before {
    max-width: none;
    white-space: nowrap;
  }
  /* Stack filename + badges vertically on mobile so badges never
     fall off the right edge. The filename-text inside still has
     its own overflow-x: auto for very long names. */
  .col-filename .filename-sub {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    width: 100%;
  }
  .col-filename .filename-text {
    max-width: 100%;
  }
  .col-filename .row-badges {
    margin-top: 2px;
  }

  /* Hide the checkbox column on mobile — bulk delete from /up/ isn't a phone workflow */
  .files-table .col-select { display: none; }

  /* Hide the tiny "→ / no log" open-indicator column in explorer rows on mobile */
  .explorer-table .col-open { display: none; }

  /* Status dot column on the Businesses page — stay inline, no label */
  .files-table .col-status-dot {
    display: inline-flex;
    padding-right: 8px;
  }
  .files-table .col-status-dot::before { display: none; }

  /* ── Detail page: kv-tables → stacked ── */
  .kv-table,
  .kv-table tbody,
  .kv-table tr {
    display: block;
  }
  .kv-table tr {
    display: flex;
    flex-direction: column;
    padding: 10px 0;
    border-bottom: 1px solid var(--border);
  }
  .kv-table th,
  .kv-table td {
    display: block;
    border: none;
    text-align: left;
    padding: 0;
  }
  .kv-table th {
    font-size: 11px;
    text-transform: uppercase;
    color: var(--text-dim);
    letter-spacing: 0.04em;
    margin-bottom: 3px;
    font-weight: 700;
  }
  .kv-table td {
    font-size: 15px;
    word-break: break-word;
  }
  .kv-table .mono {
    font-size: 12px;
    overflow-x: auto;
    white-space: nowrap;
    padding-bottom: 2px;
  }

  /* ── Filter bar ── */
  .filter-bar {
    flex-wrap: wrap;
    gap: 10px;
    padding: 12px;
  }
  .filter-input,
  .filter-select {
    width: 100%;
    min-height: 44px;
    padding: 12px 14px;
  }
  .filter-btn {
    width: 100%;
    min-height: 44px;
    padding: 12px 16px;
    font-size: 15px;
  }
  .filter-clear {
    width: 100%;
    text-align: center;
    padding: 10px;
  }

  /* ── Modals ── */
  .delete-modal { padding: 10px; }
  .delete-modal-box {
    padding: 18px 20px;
    max-width: 100%;
    max-height: 90vh;
    overflow-y: auto;
  }
  .delete-modal-box h3 { font-size: 17px; }
  .delete-modal-actions {
    flex-direction: column-reverse;
    gap: 10px;
  }
  .delete-modal-cancel,
  .delete-modal-confirm {
    width: 100%;
    min-height: 48px;
    padding: 14px 20px;
    font-size: 15px;
  }
  .delete-modal-input { font-size: 16px; }

  /* ── Folder sections ── */
  .folder-section-head {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 14px;
  }
  .folder-section-head-main { width: 100%; }
  .folder-bulk-delete-btn {
    width: 100%;
    padding: 14px;
    font-size: 14px;
    min-height: 48px;
  }
  .folder-section-path {
    font-size: 11px;
    word-break: break-all;
  }

  /* ── Heartbeat + mapping forms → single column ── */
  .heartbeat-config-form { grid-template-columns: 1fr; }
  .map-row { grid-template-columns: 1fr; }
  .heartbeat-config-form button { width: 100%; }

  /* ── Bulk bar (home page) ── */
  .bulk-bar {
    left: 10px;
    right: 10px;
    bottom: 10px;
    width: auto;
    transform: none;
    flex-direction: column;
    gap: 8px;
    padding: 12px;
  }
  .bulk-bar button {
    width: 100%;
    min-height: 48px;
  }

  /* ── Sparklines — bump height for visibility ── */
  .sparkline { width: 100%; height: 32px; }

  /* ── Generic tap-target polish ── */
  button,
  .filter-btn,
  a.filter-btn {
    min-height: 44px;
  }

  /* ── Empty-state polish ── */
  .empty { padding: 32px 16px; font-size: 15px; }

  /* ── Backup actions stack ── */
  .backup-actions {
    flex-direction: column;
    gap: 10px;
  }
  .backup-actions .filter-btn,
  .backup-actions .backup-download-btn {
    width: 100%;
    text-align: center;
  }

  /* ── Runbook cards + details boxes get less horizontal padding ── */
  .runbook-card    { padding: 16px 14px; margin-bottom: 14px; }
  .runbook-card > h2:first-child { padding-bottom: 10px; margin-bottom: 14px; }
  .runbook-details { padding: 14px 16px; }

  /* ── Pipeline mini-tracker — wrap steps on narrow screens ── */
  .step-tracker-mini { flex-wrap: wrap; gap: 4px; }
}