/*
 * Swarmestrate Blazor — theme variables
 *
 * Include this file in your host application alongside the scoped bundle:
 *
 *   <link rel="stylesheet" href="_content/Swarmestrate.Blazor/Swarmestrate.Blazor.bundle.scp.css" />
 *   <link rel="stylesheet" href="_content/Swarmestrate.Blazor/swarmestrate-blazor.css" />
 *
 * All variables are declared on :root so they cascade into every component.
 * Override any variable in your own stylesheet (loaded after this one) to
 * retheme the components without modifying the library.
 */

:root {
    /* ── Status colours ─────────────────────────────────────────────── */
    --sw-color-running:    #ffc107;
    --sw-color-completed:  #28a745;
    --sw-color-failed:     #dc3545;
    --sw-color-skipped:    #9e9e9e;
    --sw-color-muted:      #6c757d;

    /* ── Surface (backgrounds / borders) ────────────────────────────── */
    --sw-surface-bg:       #ffffff;
    --sw-surface-muted:    #f8f9fa;
    --sw-surface-border:   #dee2e6;
    --sw-surface-hover:    #f8f9fa;

    /* ── Text ────────────────────────────────────────────────────────── */
    --sw-text-body:        #212529;
    --sw-text-muted:       #6c757d;

    /* ── Typography ──────────────────────────────────────────────────── */
    --sw-font-size:        0.9rem;
    --sw-font-mono:        ui-monospace, 'Cascadia Code', 'Source Code Pro', monospace;
    --sw-border-radius:    6px;
}

/* ── Status badges ──────────────────────────────────────────────────────── */
/* Shared across WorkflowRunsList and WorkflowStatusPanel */
.sw-status-badge {
    border-radius: var(--sw-border-radius);
    padding: 2px 8px;
    font-size: 0.8rem;
    white-space: nowrap;
    font-weight: 500;
}

.sw-status-running   { background: #fff9e6; color: #856404; border: 1px solid var(--sw-color-running); }
.sw-status-completed { background: #d1e7dd; color: #0a5235; border: 1px solid var(--sw-color-completed); }
.sw-status-failed    { background: #f8d7da; color: #842029; border: 1px solid var(--sw-color-failed); }
.sw-status-pending   { background: #f8f9fa; color: var(--sw-color-muted); border: 1px solid #dee2e6; }
/* Step state variants */
.sw-status-dispatched  { background: #f8f9fa; color: var(--sw-color-muted); border: 1px solid #dee2e6; }
.sw-status-inprogress  { background: #fff9e6; color: #856404; border: 1px solid var(--sw-color-running); }
.sw-status-complete    { background: #d1e7dd; color: #0a5235; border: 1px solid var(--sw-color-completed); }
/* Skipped: intentionally not run — muted/disabled appearance distinct from complete or failed */
.sw-status-skipped     { background: #f0f0f0; color: #5a5a5a; border: 1px solid var(--sw-color-skipped); opacity: 0.85; }

/* ── Shared utilities ───────────────────────────────────────────────────── */
.sw-muted  { color: var(--sw-color-muted); }
.sw-badge  { border-radius: 10px; padding: 1px 6px; font-size: 0.75rem; }
.sw-badge-secondary { background: #e9ecef; color: #495057; }

/* ── Buttons ────────────────────────────────────────────────────────────── */
.sw-btn {
    cursor: pointer;
    border: 1px solid var(--sw-surface-border);
    background: var(--sw-surface-bg);
    border-radius: var(--sw-border-radius);
    padding: 3px 10px;
    font-size: 0.85rem;
    text-decoration: none;
    color: var(--sw-text-body);
    display: inline-block;
}
.sw-btn:hover { background: var(--sw-surface-hover); }
.sw-btn-sm    { padding: 2px 8px; font-size: 0.8rem; }

/* ── Diagram ────────────────────────────────────────────────────────────── */
.sw-diagram { overflow-x: auto; }