/* ===========================================================================
   pipeline.css
   Shared, page-level styles for the FastAPI pipeline integration pages.
   Component-internal styling lives in the per-component .razor.css files
   (scoped). These classes are used directly in page markup (IntentAndPlan,
   RetrievalPipeline, FullPipeline, Dashboard, Lawyer Review chat) so they are
   defined globally here and linked from index.html after app.css.
   Palette follows the LegalSeek black & gold theme (see app.css :root
   tokens) / Inter.
   =========================================================================== */

:root {
    --pipeline-navy: var(--ls-text);
    --pipeline-navy-soft: var(--ls-gold);
    --pipeline-accent: var(--ls-gold);
    --pipeline-border: var(--ls-border);
    --pipeline-muted: var(--ls-text-muted);
    --pipeline-ok: var(--ls-success);
    --pipeline-absent: var(--ls-text-dim);
    --pipeline-surface: var(--ls-surface);
}

/* --- Server timing chip (shown next to a result heading) ------------------ */
.timing-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: var(--pipeline-surface);
    border: 1px solid var(--pipeline-border);
    color: var(--ls-gold);
    font-size: 0.78rem;
    font-weight: 600;
    padding: 3px 10px;
    border-radius: 999px;
    white-space: nowrap;
}

/* --- Full pipeline: in-progress stage track ------------------------------ */
.stage-track {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.stage-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--pipeline-surface);
    border: 1px dashed var(--pipeline-border);
    color: var(--pipeline-muted);
    font-size: 0.8rem;
    font-weight: 500;
    padding: 5px 12px;
    border-radius: 8px;
}

/* --- Full pipeline: completed stage summary grid ------------------------- */
.stage-summary {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 12px;
}

.stage-summary-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    background: var(--ls-surface-raised);
    border: 1px solid var(--pipeline-border);
    border-radius: 10px;
    padding: 12px 14px;
}

.stage-summary-item.ok {
    border-left: 3px solid var(--pipeline-ok);
}

.stage-summary-item.absent {
    border-left: 3px solid var(--pipeline-absent);
    opacity: 0.85;
}

.stage-summary-item .ss-label {
    font-weight: 600;
    color: var(--ls-text);
    font-size: 0.86rem;
}

.stage-summary-item .ss-detail {
    font-size: 0.78rem;
    color: var(--pipeline-muted);
    margin-top: 2px;
    word-break: break-word;
}

.stage-summary-item.ok .mud-icon-root {
    color: var(--pipeline-ok);
}

.stage-summary-item.absent .mud-icon-root {
    color: var(--pipeline-absent);
}

/* Small generic gap utility used by a few pipeline headers
   (bootstrap also ships gap-2, this is a harmless fallback). */
.pipeline-gap-2 {
    gap: 8px;
}