/* ═══════════════════════════════════════════════════════════════════════
   component-pipeline-view.css — Pipeline view component family
   ═══════════════════════════════════════════════════════════════════════
   Extracted from blueprints/scheduler/templates/scheduler_pipelineview.html
   (lines 11-294) on 17 May 2026 per Msir's universal-CSS rule.
   Reusable: pipeline-step, plv-toggle, plv-chip, plv-arrow-connector are
   generic enough for any feature with linear-flow visualisation.
   ═══════════════════════════════════════════════════════════════════════ */

@layer components {

  /* ── Restricted-access panel (rendered when non-super hits this template) ─ */
  .plv-restricted-panel {
    padding: 40px;
    text-align: center;
    color: var(--text-muted);
  }
  .plv-restricted-link { color: var(--brand-accent); }

  /* ── Page layout ────────────────────────────────────────────── */
  .plv-wrap { max-width: 1280px; margin: 0 auto; padding: 24px 20px; }

  /* Ops-mode header strip — Wave 1 Agent G (17 May 2026) — admin-only surface */
  .ops-mode-strip {
    display: flex; align-items: center; gap: var(--space-2, 8px);
    flex-wrap: wrap; padding: 8px 14px; margin-bottom: 14px;
    background: var(--tone-warn-bg); color: var(--tone-warn-fg);
    border: 1px solid var(--tone-warn-border);
    border-left: 3px solid var(--tone-warn-fg);
    border-radius: 6px; font-size: var(--text-sm); line-height: 1.4;
  }
  .ops-mode-strip__ico { font-size: 1.05em; line-height: 1; flex: 0 0 auto; }
  .ops-mode-strip__label { font-weight: 600; text-transform: uppercase; letter-spacing: .04em; font-size: var(--text-xs); }
  .ops-mode-strip__desc { flex: 1 1 auto; }

  /* ── Header ─────────────────────────────────────────────────── */
  .plv-header {
    display: flex; align-items: center; justify-content: space-between;
    gap: 16px; margin-bottom: 24px; flex-wrap: wrap;
  }
  .plv-header-left { display: flex; align-items: center; gap: 14px; }
  .plv-header-icon {
    width: 48px; height: 48px; border-radius: 12px;
    background: linear-gradient(135deg, rgba(99,102,241,0.25), rgba(99,102,241,0.08));
    border: 1px solid rgba(99,102,241,0.3);
    display: flex; align-items: center; justify-content: center;
    font-size: 22px; flex-shrink: 0;
  }
  .plv-header-text h1 { margin: 0 0 3px; font-size: 1.2rem; font-weight: 700; color: var(--text); }
  .plv-header-text p  { margin: 0; font-size: 0.8rem; color: var(--text-muted); }
  .plv-header-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

  /* ── Summary chips bar ───────────────────────────────────────── */
  .plv-summary {
    display: flex; gap: 10px; margin-bottom: 24px;
    flex-wrap: wrap;
  }
  .plv-chip {
    display: flex; align-items: center; gap: 6px;
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: 8px;
    padding: 7px 14px;
    font-size: 0.8rem;
    color: var(--text-muted);
  }
  .plv-chip .chip-num { font-size: 1rem; font-weight: 700; color: var(--text); }
  .plv-chip.active   { border-color: var(--tone-success-fg); }
  .plv-chip.active   .chip-num { color: var(--tone-success-fg); }
  .plv-chip.running  { border-color: var(--brand-accent); }
  .plv-chip.running  .chip-num { color: var(--brand-accent); }
  .plv-chip.disabled { border-color: var(--card-border); }
  .plv-chip.disabled .chip-num { color: var(--text-dim); }

  /* ── Pipeline container ──────────────────────────────────────── */
  .plv-pipeline {
    display: flex;
    align-items: flex-start;
    gap: 0;
    overflow-x: auto;
    padding-bottom: 12px;
    scrollbar-width: thin;
    scrollbar-color: var(--card-border) transparent;
  }
  .plv-pipeline::-webkit-scrollbar { height: 5px; }
  .plv-pipeline::-webkit-scrollbar-track { background: transparent; }
  .plv-pipeline::-webkit-scrollbar-thumb { background: var(--card-border); border-radius: 3px; }

  /* ── Step wrapper (step + connector) ────────────────────────── */
  .plv-step-wrap {
    display: flex; align-items: flex-start; flex-shrink: 0;
  }

  /* ── Step block ──────────────────────────────────────────────── */
  .plv-step {
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: 14px;
    width: 230px;
    min-width: 230px;
    overflow: hidden;
    transition: border-color .2s, box-shadow .2s;
  }
  .plv-step:hover {
    border-color: rgba(99,102,241,0.4);
    box-shadow: 0 0 0 2px rgba(99,102,241,0.08);
  }
  .plv-step.has-running { border-color: var(--brand-accent); }

  /* ── Step header ─────────────────────────────────────────────── */
  .plv-step-header {
    padding: 13px 16px;
    cursor: pointer;
    display: flex; align-items: center; gap: 10px;
    user-select: none;
    background: rgba(99,102,241,0.06);
    border-bottom: 1px solid var(--card-border);
    transition: background .12s;
  }
  .plv-step-header:hover { background: var(--hover-bg); }

  .plv-step-num {
    width: 28px; height: 28px; border-radius: 50%;
    background: rgba(99,102,241,0.18);
    color: var(--brand-accent);
    font-size: 0.78rem; font-weight: 700;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
  }
  .plv-step-info { flex: 1; min-width: 0; }
  .plv-step-label {
    font-size: 0.82rem; font-weight: 700;
    color: var(--text); text-transform: uppercase; letter-spacing: 0.04em;
  }
  .plv-step-count {
    font-size: 0.7rem; color: var(--text-muted); margin-top: 1px;
  }
  .plv-chevron { color: var(--text-muted); font-size: 0.7rem; transition: transform .2s; flex-shrink: 0; }
  .plv-step.open .plv-chevron { transform: rotate(180deg); }

  /* ── Step body ────────────────────────────────────────────────── */
  .plv-step-body {
    display: none; padding: 10px 10px 12px;
    flex-direction: column; gap: 6px;
    max-height: 400px; overflow-y: auto;
    scrollbar-width: thin;
  }
  .plv-step.open .plv-step-body { display: flex; }

  /* ── Feature pill ────────────────────────────────────────────── */
  .plv-pill {
    display: flex; align-items: center; gap: 8px;
    background: rgba(99,102,241,0.05);
    border: 1px solid var(--card-border);
    border-radius: 9px;
    padding: 8px 10px;
    font-size: 0.78rem;
    transition: background .12s, border-color .12s;
    position: relative;
  }
  .plv-pill:hover { background: var(--hover-bg); }
  .plv-pill.is-running {
    border-color: var(--brand-accent);
    background: rgba(99,102,241,0.1);
  }
  .plv-pill.is-disabled { opacity: 0.55; }

  .plv-pill-icon { font-size: 15px; flex-shrink: 0; }
  .plv-pill-name {
    flex: 1; color: var(--text); font-weight: 500;
    min-width: 0; overflow: hidden;
    text-overflow: ellipsis; white-space: nowrap;
    font-size: 0.77rem;
  }
  .plv-pill-status {
    font-size: 0.62rem; font-weight: 700; text-transform: uppercase;
    padding: 2px 5px; border-radius: 4px; flex-shrink: 0;
  }
  .plv-pill-status.running { background: rgba(99,102,241,0.2); color: var(--brand-accent); }
  .plv-pill-status.idle    { background: var(--tone-success-bg); color: var(--tone-success-fg); }
  .plv-pill-status.off     { background: var(--hover-bg); color: var(--text-dim); }

  /* Toggle switch (reuse base pattern) */
  .plv-tog { position: relative; width: 30px; height: 17px; flex-shrink: 0; }
  .plv-tog input { opacity: 0; width: 0; height: 0; }
  .plv-tog-slider {
    position: absolute; cursor: pointer;
    top: 0; left: 0; right: 0; bottom: 0;
    background: var(--input-border); border-radius: 17px;
    transition: background .2s;
  }
  .plv-tog-slider::before {
    content: ''; position: absolute;
    height: 12px; width: 12px;
    left: 3px; bottom: 2.5px;
    background: var(--color-on-primary, #fff); border-radius: 50%;
    transition: transform .2s;
  }
  .plv-tog input:checked + .plv-tog-slider { background: var(--brand-accent); }
  .plv-tog input:checked + .plv-tog-slider::before { transform: translateX(13px); }

  /* Run button */
  .plv-pill-run {
    background: none; border: none;
    color: var(--brand-accent); cursor: pointer;
    font-size: 0.78rem; font-weight: 700;
    padding: 0 2px; transition: opacity .12s;
    flex-shrink: 0;
  }
  .plv-pill-run:hover { opacity: 0.65; }
  .plv-pill-run:disabled { opacity: 0.3; cursor: default; }

  /* Running spinner */
  @keyframes plv-spin { to { transform: rotate(360deg); } }
  .plv-spinner {
    display: inline-block; width: 10px; height: 10px;
    border: 2px solid rgba(99,102,241,0.3);
    border-top-color: var(--brand-accent);
    border-radius: 50%;
    animation: plv-spin .7s linear infinite;
    flex-shrink: 0;
  }

  /* ── Connector arrow ─────────────────────────────────────────── */
  .plv-connector {
    display: flex; align-items: flex-start;
    flex-shrink: 0; padding: 0 2px;
    margin-top: 21px;
  }
  .plv-arrow {
    width: 34px; height: 2px;
    background: linear-gradient(to right, rgba(99,102,241,0.25), rgba(99,102,241,0.65));
    position: relative; flex-shrink: 0;
  }
  .plv-arrow::after {
    content: '▶'; position: absolute;
    right: -7px; top: 50%; transform: translateY(-50%);
    font-size: 9px; color: var(--brand-accent);
    animation: plv-pulse 1.8s infinite;
  }
  @keyframes plv-pulse { 0%,100%{opacity:0.4} 50%{opacity:1} }

  /* ── Action buttons ──────────────────────────────────────────── */
  .btn-sm {
    padding: 7px 14px; border-radius: 7px; border: none;
    cursor: pointer; font-size: 0.8rem; font-weight: 600;
    transition: opacity .15s;
  }
  .btn-sm:hover { opacity: 0.82; }
  /* This rule wins the global primary-button REST background (loaded after
     20-components.css, same @layer). Tokenised so the dark theme can retune
     it via --color-primary-solid; --brand-accent fallback = light unchanged. */
  .btn-primary { background: var(--color-primary-solid, var(--brand-accent)); color: var(--color-on-primary, #fff); }
  .btn-outline  {
    background: none; border: 1px solid var(--card-border);
    color: var(--text-muted);
  }
  .btn-outline:hover { border-color: var(--brand-accent); color: var(--brand-accent); background: rgba(99,102,241,0.06); }

  /* ── Toast notification ──────────────────────────────────────── */
  #plv-toast {
    position: fixed; bottom: 24px; right: 24px;
    background: var(--card-bg); border: 1px solid var(--card-border);
    border-left: 4px solid var(--brand-accent);
    border-radius: 8px; padding: 10px 16px;
    font-size: 0.82rem; color: var(--text);
    box-shadow: 0 4px 20px rgba(0,0,0,0.3);
    opacity: 0; transform: translateY(8px);
    transition: opacity .2s, transform .2s;
    z-index: 9999; max-width: 300px;
    pointer-events: none;
  }
  #plv-toast.show { opacity: 1; transform: none; }
  #plv-toast.success { border-left-color: var(--tone-success-fg); }
  #plv-toast.error   { border-left-color: var(--tone-danger-fg); }

  /* ── Fetch-error message (rendered into #plv-pipeline on /api/config/features failure) ── */
  .plv-fetch-error {
    color: var(--tone-danger-fg);
    padding: 20px;
  }

  /* ── Loading state ───────────────────────────────────────────── */
  .plv-loading {
    display: flex; align-items: center; gap: 10px;
    color: var(--text-muted); font-size: 0.85rem;
    padding: 40px 0;
  }
  .plv-loading .plv-spinner { width: 16px; height: 16px; }

  /* ── Responsive: stack on small screens ─────────────────────── */
  @media (max-width: 700px) {
    .plv-pipeline { flex-direction: column; }
    .plv-connector { transform: rotate(90deg); margin: 6px 0; align-self: center; }
    .plv-step { width: 100%; min-width: unset; }
  }

}