/* ATLAS V6 — Automation + Workflow Monitor page augmentation
 *
 * V5→V6 polish 2026-06-23. Covers BOTH views from one sheet:
 *   • data-view="automation"      (n8n Workflow Center — auto5-* classes)
 *   • data-view="integrations"    (Workflow Monitor — int5-* status family)
 *
 * Both share v5-automation.css and the w424-* shell. This sheet re-skins
 * auto5-* and int5-* with V6 vocabulary; no class renames so js/automation.js
 * + js/integrations.js renderers continue untouched.
 *
 * Loads after bundle-v5pages.css + before v6-pages.css. Dark-mode blocks
 * omitted per atlas-dashboard hard rule #4 (V6 single locked theme — light).
 * ─────────────────────────────────────────────────────────────────────── */

/* ── Page shell (both views) ──────────────────────────────────────────── */
#view-automation .w424-page,
#view-integrations .w424-page {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 20px 24px;
  gap: 18px;
}
#view-automation .w424-head,
#view-integrations .w424-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 16px;
  margin: 0;
  padding: 0;
  border: 0;
}
#view-automation .w424-body,
#view-integrations .w424-body {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 18px;
  overflow: auto;
  padding-right: 4px;
}
/* W424 titles — re-treated as V6 H1 + sub */
#view-automation .w424-title,
#view-integrations .w424-title {
  font: 850 28px/1.18 var(--font-display, "Aptos Display", Inter);
  color: var(--ink, #101722);
  letter-spacing: -0.005em;
  margin: 0 0 4px;
  text-transform: none;
}
#view-automation .w424-sub,
#view-integrations .w424-sub {
  font: 400 14px/1.45 var(--font-ui, Inter);
  color: var(--muted, #647184);
  margin: 0;
}

/* ── Health chip (top-right of both pages) — shared treatment ─────────── */
.auto5-summary-chip,
.int5-summary-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border-radius: var(--radius-pill, 999px);
  background: var(--surface, #fffdf8);
  border: 1px solid var(--line, #d7d0c3);
  color: var(--ink, #101722);
  font: 700 12px/1 var(--font-ui, Inter);
  letter-spacing: .02em;
}
.auto5-summary-dot,
.int5-summary-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--muted, #647184);
}
.auto5-summary-chip.is-ok    { background: var(--good-soft, #dff2e7); border-color: rgba(46,139,87,.32); color: #17623a; }
.auto5-summary-chip.is-ok    .auto5-summary-dot { background: var(--good, #2e8b57); }
.auto5-summary-chip.is-warn  { background: var(--warn-soft, #fbecd0); border-color: rgba(193,138,37,.32); color: #7a4a0a; }
.auto5-summary-chip.is-warn  .auto5-summary-dot { background: var(--gold, #c18a25); }
.auto5-summary-chip.is-error { background: var(--bad-soft, #fde1ea);  border-color: rgba(202,63,107,.32); color: #9c1844; }
.auto5-summary-chip.is-error .auto5-summary-dot { background: var(--bad, #ca3f6b); }

/* ── Stats strip (auto5-stats — n8n health overview) ──────────────────── */
.auto5-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 12px;
  padding: 0;
  border: 0;
}
.auto5-stat {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 14px 16px;
  background: var(--surface, #fffdf8);
  border: 1px solid var(--line, #d7d0c3);
  border-radius: var(--radius, 8px);
  border-left: 0;
  box-shadow: var(--soft-shadow, 0 10px 24px rgba(29,24,14,.07));
}
.auto5-stat-label {
  font: 700 11px/1 var(--font-ui, Inter);
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--muted, #647184);
}
.auto5-stat-value {
  font: 850 26px/1.1 var(--font-display, "Aptos Display", Inter);
  color: var(--ink, #101722);
  font-variant-numeric: tabular-nums;
}
.auto5-stat-value.is-good  { color: var(--good, #2e8b57); }
.auto5-stat-value.is-error { color: var(--bad, #ca3f6b); }
.auto5-stat-value .auto5-stat-unit {
  font: 500 12px/1 var(--font-ui, Inter);
  color: var(--muted, #647184);
  margin-left: 4px;
}
.auto5-stat-bar {
  height: 4px;
  border-radius: 2px;
  background: var(--bg3, #ebe7de);
  overflow: hidden;
}
.auto5-stat-bar > span {
  display: block;
  height: 100%;
  background: var(--gold, #c18a25);
  border-radius: 2px;
}

/* ── Section heads ────────────────────────────────────────────────────── */
.auto5-section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 0 0 8px;
  margin: 6px 0 0;
  border-bottom: 1px solid var(--line, #d7d0c3);
}
.auto5-section-title {
  font: 800 13px/1 var(--font-ui, Inter);
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--ink, #101722);
}
.auto5-section-note {
  font: 500 11px/1 var(--font-ui, Inter);
  color: var(--muted, #647184);
}
/* "mock" honesty tag — data-integrity. Restored as a proper V6 warn-soft pill
   (was being stripped to bare text and reading as small black inline elements). */
.auto5-mock-tag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 8px;
  background: var(--gold-soft, #fbecd0);
  color: #7a4a0a;
  border: 1px dashed rgba(193,138,37,.45);
  border-radius: 999px;
  font: 700 9.5px/1 var(--font-ui, Inter);
  letter-spacing: .06em;
  text-transform: uppercase;
  white-space: nowrap;
}

/* ── Workflow card grid ───────────────────────────────────────────────── */
.auto5-wf-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 12px;
}
.auto5-wf-card {
  background: var(--surface, #fffdf8);
  border: 1px solid var(--line, #d7d0c3);
  border-left: 3px solid var(--bg3, #ebe7de);
  border-radius: var(--radius, 8px);
  padding: 14px 16px;
  box-shadow: var(--soft-shadow, 0 10px 24px rgba(29,24,14,.07));
  transition: transform .12s ease, border-color .15s ease;
}
.auto5-wf-card:hover { transform: translateY(-1px); border-color: var(--line-strong, #c4b9a8); }
.auto5-wf-card.is-active   { border-left-color: var(--good, #2e8b57); }
.auto5-wf-card.is-inactive { border-left-color: var(--muted, #647184); }
.auto5-wf-card.is-error    { border-left-color: var(--bad, #ca3f6b); }
.auto5-wf-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 8px;
}
.auto5-wf-name {
  display: flex;
  align-items: center;
  gap: 8px;
  font: 700 13px/1.3 var(--font-ui, Inter);
  color: var(--ink, #101722);
  min-width: 0;
}
.auto5-wf-name .auto5-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--muted, #647184);
  flex-shrink: 0;
}
.auto5-wf-card.is-active .auto5-dot { background: var(--good, #2e8b57); }
.auto5-wf-card.is-error  .auto5-dot { background: var(--bad, #ca3f6b); }
.auto5-wf-name .auto5-wf-id {
  display: inline-flex;
  align-items: center;
  padding: 2px 7px;
  background: var(--bg3, #ebe7de);
  color: var(--muted, #647184);
  border-radius: 4px;
  font: 600 10px/1 var(--font-mono, Consolas);
  letter-spacing: .02em;
  white-space: nowrap;
}
.auto5-wf-actions { display: flex; gap: 6px; flex-shrink: 0; }
.auto5-wf-meta {
  font: 500 11px/1.4 var(--font-ui, Inter);
  color: var(--muted, #647184);
  font-variant-numeric: tabular-nums;
}
.auto5-wf-meta b { color: var(--ink, #101722); font-weight: 700; }
.auto5-wf-meta .ok  { color: var(--good, #2e8b57); }
.auto5-wf-meta .err { color: var(--bad, #ca3f6b); }
.auto5-wf-out {
  margin-top: 6px;
  font: 400 11px/1.4 var(--font-mono, Consolas);
  color: var(--muted, #647184);
  white-space: pre-wrap;
  max-height: 40px;
  overflow: hidden;
}

/* Action buttons (auto5-btn variants) */
.auto5-btn {
  appearance: none;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 6px 10px;
  border-radius: var(--radius-sm, 6px);
  background: var(--surface, #fffdf8);
  border: 1px solid var(--line, #d7d0c3);
  color: var(--ink, #101722);
  font: 600 11px/1 var(--font-ui, Inter);
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease;
}
.auto5-btn:hover:not(:disabled) { background: var(--bg2, #fbfaf7); border-color: var(--line-strong, #c4b9a8); }
.auto5-btn-run {
  background: var(--ink, #101722);
  color: #fff;
  border-color: var(--ink, #101722);
}
.auto5-btn-run:hover:not(:disabled) { background: #1d2630; }
.auto5-btn-run:disabled,
.auto5-btn-run.is-running { opacity: .55; cursor: progress; }
.auto5-btn-run.is-running .auto5-btn-spin { animation: spin .9s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.auto5-btn-open { background: transparent; border-color: transparent; color: var(--gold, #c18a25); }
.auto5-btn-open:hover { background: var(--warn-soft, #fbecd0); border-color: rgba(193,138,37,.32); }

/* ── Execution feed ──────────────────────────────────────────────────── */
.auto5-feed {
  background: var(--surface, #fffdf8);
  border: 1px solid var(--line, #d7d0c3);
  border-radius: var(--radius-lg, 12px);
  padding: 6px 14px;
  box-shadow: var(--soft-shadow, 0 10px 24px rgba(29,24,14,.07));
}
.auto5-feed-row {
  display: grid;
  grid-template-columns: 14px 80px 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 10px 0;
}
.auto5-feed-row + .auto5-feed-row { border-top: 1px solid var(--border2, #ebe7de); }
.auto5-feed-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--good, #2e8b57);
}
.auto5-feed-row.is-error .auto5-feed-dot { background: var(--bad, #ca3f6b); }
.auto5-feed-time {
  font: 500 11px var(--font-mono, Consolas);
  color: var(--faint, #8a95a3);
  font-variant-numeric: tabular-nums;
}
.auto5-feed-name {
  font: 600 12px var(--font-ui, Inter);
  color: var(--ink, #101722);
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.auto5-feed-detail {
  font: 500 11px var(--font-ui, Inter);
  color: var(--muted, #647184);
}
.auto5-feed-row.is-error .auto5-feed-detail { color: var(--bad, #ca3f6b); }

/* ── Table (workflows table — auto5-table) ────────────────────────────── */
.auto5-table-wrap {
  background: var(--surface, #fffdf8);
  border: 1px solid var(--line, #d7d0c3);
  border-radius: var(--radius-lg, 12px);
  padding: 6px 14px 14px;
  box-shadow: var(--soft-shadow, 0 10px 24px rgba(29,24,14,.07));
}
.auto5-table-tools {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 0;
}
.auto5-search {
  appearance: none;
  background: var(--bg2, #fbfaf7);
  border: 1px solid var(--line, #d7d0c3);
  border-radius: var(--radius, 8px);
  color: var(--ink, #101722);
  font: 500 12px var(--font-ui, Inter);
  padding: 7px 12px;
  min-width: 220px;
}
.auto5-search:focus { outline: 0; border-color: var(--gold, #c18a25); background: var(--surface, #fffdf8); }
.auto5-search::placeholder { color: var(--faint, #8a95a3); }
.auto5-table-count { font: 500 11px var(--font-ui, Inter); color: var(--muted, #647184); }
.auto5-table { width: 100%; border-collapse: separate; border-spacing: 0; }
.auto5-table thead th {
  text-align: left;
  font: 800 11px/1 var(--font-ui, Inter);
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--muted, #647184);
  padding: 8px 12px;
  border-bottom: 1px solid var(--line, #d7d0c3);
  background: transparent;
  cursor: pointer;
}
.auto5-table thead th .auto5-sort-arrow { opacity: .35; margin-left: 4px; }
.auto5-table thead th[aria-sort="ascending"]  .auto5-sort-arrow,
.auto5-table thead th[aria-sort="descending"] .auto5-sort-arrow { opacity: 1; color: var(--gold, #c18a25); }
.auto5-table tbody td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--border2, #ebe7de);
  font: 500 12px var(--font-ui, Inter);
  color: var(--ink, #101722);
}
.auto5-table tbody tr:nth-child(even) { background: var(--bg2, #fbfaf7); }
.auto5-table tbody tr:hover { background: var(--warn-soft, #fbecd0); }
.auto5-table .auto5-cell-name { font-weight: 600; color: var(--ink, #101722); }
.auto5-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font: 700 10px/1 var(--font-ui, Inter);
  text-transform: uppercase;
  letter-spacing: .04em;
  padding: 3px 8px;
  border-radius: var(--radius-pill, 999px);
  background: var(--bg3, #ebe7de);
  color: var(--muted, #647184);
}
.auto5-badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: .8; }
.auto5-badge.is-active { background: var(--good-soft, #dff2e7); color: #17623a; }
.auto5-badge.is-error  { background: var(--bad-soft, #fde1ea);  color: #9c1844; }

/* ── Pager ────────────────────────────────────────────────────────────── */
.auto5-pager { display: flex; justify-content: space-between; align-items: center; padding: 10px 0 0; }
.auto5-pager-info { font: 500 11px var(--font-ui, Inter); color: var(--muted, #647184); }
.auto5-pager-btn {
  appearance: none;
  padding: 4px 10px;
  border-radius: var(--radius-sm, 6px);
  background: transparent;
  border: 1px solid var(--line, #d7d0c3);
  color: var(--muted, #647184);
  font: 600 11px var(--font-ui, Inter);
  cursor: pointer;
}

/* ── Webhooks accordion ───────────────────────────────────────────────── */
.auto5-webhooks {
  background: var(--surface, #fffdf8);
  border: 1px solid var(--line, #d7d0c3);
  border-radius: var(--radius-lg, 12px);
  padding: 6px 14px;
}
.auto5-webhooks > summary {
  list-style: none;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 0;
  cursor: pointer;
  font: 700 12px var(--font-ui, Inter);
  color: var(--ink, #101722);
}
.auto5-webhooks > summary .auto5-chev { transition: transform .15s ease; color: var(--muted, #647184); }
.auto5-webhooks[open] > summary .auto5-chev { transform: rotate(90deg); color: var(--gold, #c18a25); }
.auto5-webhooks > summary .auto5-wh-sub { font: 500 11px var(--font-ui, Inter); color: var(--muted, #647184); margin-left: auto; }
.auto5-wh-list { display: flex; flex-direction: column; gap: 6px; padding: 6px 0 10px; }
.auto5-wh-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
  align-items: center;
  padding: 8px 10px;
  border: 1px solid var(--border2, #ebe7de);
  border-radius: var(--radius-sm, 6px);
  background: var(--bg2, #fbfaf7);
}
.auto5-wh-url {
  font: 500 11px var(--font-mono, Consolas);
  color: var(--ink, #101722);
  word-break: break-all;
}
.auto5-wh-copy {
  appearance: none;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 8px;
  border-radius: var(--radius-sm, 6px);
  background: transparent;
  border: 1px solid var(--line, #d7d0c3);
  color: var(--muted, #647184);
  font: 600 10px var(--font-ui, Inter);
  cursor: pointer;
}
.auto5-wh-copy:hover { color: var(--gold, #c18a25); border-color: var(--gold, #c18a25); }
.auto5-wh-copy.is-copied { color: var(--good, #2e8b57); border-color: var(--good, #2e8b57); }

/* ── Toast ────────────────────────────────────────────────────────────── */
.auto5-toast {
  position: fixed;
  bottom: 80px;
  left: 50%;
  transform: translateX(-50%) translateY(8px);
  background: var(--ink, #101722);
  color: #fff;
  padding: 10px 16px;
  border-radius: var(--radius, 8px);
  font: 600 12px var(--font-ui, Inter);
  opacity: 0;
  pointer-events: none;
  transition: opacity .18s ease, transform .18s ease;
  z-index: 9999;
}
.auto5-toast.is-show { opacity: 1; transform: translateX(-50%) translateY(0); }
.auto5-toast.is-ok    { border-left: 3px solid var(--good, #2e8b57); }
.auto5-toast.is-error { border-left: 3px solid var(--bad, #ca3f6b); }

/* ── Empty states (auto5-empty + int5-empty) ──────────────────────────── */
.auto5-empty,
.int5-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px 16px;
  color: var(--muted, #647184);
  font: 500 13px var(--font-ui, Inter);
  background: var(--surface, #fffdf8);
  border: 1px dashed var(--line, #d7d0c3);
  border-radius: var(--radius-lg, 12px);
}

/* ── V6 exception queue (already V6-named in index.html, just tighten) ── */
.v6-exception-queue-wrap {
  background: var(--surface, #fffdf8);
  border: 1px solid var(--line, #d7d0c3);
  border-radius: var(--radius-lg, 12px);
  padding: 14px 18px;
  box-shadow: var(--soft-shadow, 0 10px 24px rgba(29,24,14,.07));
}
.v6-exception-header {
  font: 800 13px/1 var(--font-ui, Inter);
  color: var(--ink, #101722);
  text-transform: uppercase;
  letter-spacing: .08em;
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}