/* ============================================================
 * cockpit-v2.css — Sprint 13.5 PR #4
 * Companion stylesheet for the Best In Class cockpit UI.
 * Implements the locked tokens from wwwroot/css/design-tokens-v2.json
 * as concrete CSS classes for the new /Production + /CustomerProjects
 * + Master Files admin pages.
 *
 * Design language (per docs/research/luxury-cockpit-ux.md):
 *   - Inter for prose, JetBrains Mono for codes / numbers / mono
 *   - Asymmetric spacing (4 / 6 / 12 / 20 / 40 / 48 / 96)
 *   - Negative letter-spacing on display sizes (-0.04em at 32px+)
 *   - Monochrome chassis + ONE Cherry red accent + tri-state RAG
 *   - Borders > shadows
 *   - 32-px DataTable rows, tnum + cv11 OpenType features on numerics
 *   - No striped rows
 *   - 2px solid border focus rings (no Tailwind box-shadow)
 * ============================================================ */

:root {
    /* Type scale (Geist-derived, locked) */
    --v2-type-display-72:  72px;
    --v2-type-display-56:  56px;
    --v2-type-display-40:  40px;
    --v2-type-display-32:  32px;
    --v2-type-heading-24:  24px;
    --v2-type-heading-20:  20px;
    --v2-type-heading-16:  16px;
    --v2-type-body-15:     15px;
    --v2-type-body-14:     14px;
    --v2-type-body-13:     13px;
    --v2-type-label-12:    12px;
    --v2-type-mono-13:     13px;

    /* Asymmetric spacing */
    --v2-space-4:    4px;
    --v2-space-6:    6px;
    --v2-space-8:    8px;
    --v2-space-12:  12px;
    --v2-space-16:  16px;
    --v2-space-20:  20px;
    --v2-space-24:  24px;
    --v2-space-32:  32px;
    --v2-space-40:  40px;
    --v2-space-48:  48px;
    --v2-space-64:  64px;
    --v2-space-96:  96px;

    /* Motion */
    --v2-motion-100: 100ms;
    --v2-motion-160: 160ms;
    --v2-motion-220: 220ms;
    --v2-motion-320: 320ms;
    --v2-ease-enter: cubic-bezier(0.2, 0, 0, 1);
    --v2-ease-exit:  cubic-bezier(0.4, 0, 1, 1);

    /* Radius */
    --v2-radius-2:   2px;
    --v2-radius-4:   4px;
    --v2-radius-6:   6px;
    --v2-radius-8:   8px;
    --v2-radius-12: 12px;
    --v2-radius-16: 16px;

    /* Tri-state RAG */
    --v2-rag-green:  #16a34a;
    --v2-rag-amber:  #d97706;
    --v2-rag-red:    #dc2626;

    /* Status semantics — Production */
    --v2-status-planned:    #6b7280;
    --v2-status-released:   #2563eb;
    --v2-status-inprogress: #d97706;
    --v2-status-onhold:     #a16207;
    --v2-status-completed:  #16a34a;
    --v2-status-cancelled:  #71717a;

    /* Status semantics — CustomerProject */
    --v2-status-quote:     #6b7280;
    --v2-status-active:    #16a34a;
    --v2-status-closed:    #2563eb;
}

/* ============================================================
 * Page header — every page has the same shape
 * ============================================================ */
.page-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--v2-space-20);
    padding: var(--v2-space-32) var(--v2-space-40) var(--v2-space-24);
    border-bottom: 1px solid var(--color-border, #e5e7eb);
}
.page-header-titles { flex: 1; min-width: 0; }
.page-header-actions { display: flex; gap: var(--v2-space-12); flex-shrink: 0; }
.page-title {
    font: 600 var(--v2-type-display-32) / 1.1 var(--font-family-base, "Inter", system-ui, sans-serif);
    letter-spacing: -0.04em;
    margin: var(--v2-space-6) 0 0;
    color: var(--color-text-primary, #111);
    display: flex; align-items: center; gap: var(--v2-space-12);
}
.page-subtitle {
    font: 400 var(--v2-type-body-14) / 1.45 var(--font-family-base, "Inter", system-ui, sans-serif);
    color: var(--color-text-secondary, #6b7280);
    margin: var(--v2-space-6) 0 0;
}

/* Breadcrumb trail */
.breadcrumb-trail {
    font: 500 var(--v2-type-label-12) / 1 var(--font-family-base, "Inter", system-ui, sans-serif);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-text-secondary, #6b7280);
    display: flex; align-items: center; gap: var(--v2-space-6);
}
.breadcrumb-trail a {
    color: var(--color-text-secondary, #6b7280);
    text-decoration: none;
    transition: color var(--v2-motion-160) var(--v2-ease-enter);
}
.breadcrumb-trail a:hover { color: var(--cherry-primary, #cf3339); }
.breadcrumb-sep { color: var(--color-border, #d4d4d8); }
.breadcrumb-current { color: var(--color-text-primary, #111); }

/* ============================================================
 * KPI strip — status chips that double as filter pills
 * ============================================================ */
.kpi-strip {
    display: flex; flex-wrap: wrap; gap: var(--v2-space-8);
    padding: var(--v2-space-20) var(--v2-space-40);
}
.kpi-chip {
    display: inline-flex; align-items: baseline; gap: var(--v2-space-8);
    padding: var(--v2-space-8) var(--v2-space-12);
    background: var(--color-bg-elevated, #fff);
    border: 1px solid var(--color-border, #e5e7eb);
    border-radius: var(--v2-radius-6);
    text-decoration: none;
    transition: border-color var(--v2-motion-160) var(--v2-ease-enter), background var(--v2-motion-160) var(--v2-ease-enter);
}
.kpi-chip:hover { border-color: var(--color-text-secondary, #6b7280); }
.kpi-chip--active { border-color: var(--cherry-primary, #cf3339); background: rgba(207, 51, 57, 0.04); }
.kpi-chip-label {
    font: 500 var(--v2-type-label-12) / 1 var(--font-family-base, "Inter", system-ui, sans-serif);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-text-secondary, #6b7280);
}
.kpi-chip--active .kpi-chip-label { color: var(--cherry-primary, #cf3339); }
.kpi-chip-value {
    font: 600 var(--v2-type-heading-20) / 1 'Inter', ui-monospace, "SF Mono", monospace;
    font-feature-settings: "tnum", "cv11";
    color: var(--color-text-primary, #111);
}

/* ============================================================
 * Data table — 32px row, no stripes, tnum + cv11
 * ============================================================ */
.data-table-wrap {
    padding: 0 var(--v2-space-40) var(--v2-space-40);
    overflow-x: auto;
}
.data-table {
    width: 100%;
    border-collapse: collapse;
    font: 400 var(--v2-type-body-13) / 1.4 var(--font-family-base, "Inter", system-ui, sans-serif);
}
.data-table thead th {
    text-align: left;
    font: 600 var(--v2-type-label-12) / 1 var(--font-family-base, "Inter", system-ui, sans-serif);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-text-secondary, #6b7280);
    padding: var(--v2-space-12) var(--v2-space-12);
    border-bottom: 1px solid var(--color-border, #e5e7eb);
    background: var(--color-bg-subtle, #fafafa);
}
.data-table tbody td {
    padding: var(--v2-space-8) var(--v2-space-12);
    border-bottom: 1px solid var(--color-border-subtle, #f4f4f5);
    height: 32px;
    vertical-align: middle;
}
.data-table tbody tr:hover { background: rgba(207, 51, 57, 0.02); }
.data-table .num {
    text-align: right;
    font-family: 'Inter', ui-monospace, "SF Mono", monospace;
    font-feature-settings: "tnum", "cv11";
    font-size: var(--v2-type-mono-13);
}

/* ============================================================
 * Status chips
 * ============================================================ */
.status-chip {
    display: inline-flex; align-items: center;
    padding: 2px var(--v2-space-8);
    border-radius: var(--v2-radius-4);
    font: 600 var(--v2-type-label-12) / 1.4 var(--font-family-base, "Inter", system-ui, sans-serif);
    text-transform: uppercase; letter-spacing: 0.04em;
    color: var(--v2-status-planned);
    border: 1px solid var(--v2-status-planned);
    background: rgba(107, 114, 128, 0.06);
    margin-left: var(--v2-space-8);
}
/* Production statuses */
.status-chip--planned    { color: var(--v2-status-planned);    border-color: var(--v2-status-planned);    background: rgba(107,114,128,0.06); }
.status-chip--released   { color: var(--v2-status-released);   border-color: var(--v2-status-released);   background: rgba(37,99,235,0.06); }
.status-chip--inprogress { color: var(--v2-status-inprogress); border-color: var(--v2-status-inprogress); background: rgba(217,119,6,0.06); }
.status-chip--onhold     { color: var(--v2-status-onhold);     border-color: var(--v2-status-onhold);     background: rgba(161,98,7,0.06); }
.status-chip--completed  { color: var(--v2-status-completed);  border-color: var(--v2-status-completed);  background: rgba(22,163,74,0.06); }
.status-chip--cancelled  { color: var(--v2-status-cancelled);  border-color: var(--v2-status-cancelled);  background: rgba(113,113,122,0.06); }
/* CustomerProject statuses */
.status-chip--projectstatus-quote     { color: var(--v2-status-quote);     border-color: var(--v2-status-quote); }
.status-chip--projectstatus-active    { color: var(--v2-status-active);    border-color: var(--v2-status-active);    background: rgba(22,163,74,0.06); }
.status-chip--projectstatus-onhold    { color: var(--v2-status-onhold);    border-color: var(--v2-status-onhold);    background: rgba(161,98,7,0.06); }
.status-chip--projectstatus-closed    { color: var(--v2-status-closed);    border-color: var(--v2-status-closed);    background: rgba(37,99,235,0.06); }
.status-chip--projectstatus-cancelled { color: var(--v2-status-cancelled); border-color: var(--v2-status-cancelled); }
.kpi-chip--status-planned    .kpi-chip-label,
.kpi-chip--status-released   .kpi-chip-label,
.kpi-chip--status-inprogress .kpi-chip-label { color: inherit; }

/* Risk dot — 8px circle */
.risk-dot {
    display: inline-block; width: 8px; height: 8px; border-radius: 50%;
    margin-right: var(--v2-space-6);
    background: var(--v2-rag-green);
}
.risk-dot--green { background: var(--v2-rag-green); }
.risk-dot--amber { background: var(--v2-rag-amber); }
.risk-dot--red   { background: var(--v2-rag-red); }

/* ============================================================
 * Detail card grid
 * ============================================================ */
.detail-grid {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
    gap: var(--v2-space-20);
    padding: var(--v2-space-24) var(--v2-space-40);
}
.detail-card {
    background: var(--color-bg-elevated, #fff);
    border: 1px solid var(--color-border, #e5e7eb);
    border-radius: var(--v2-radius-8);
    padding: var(--v2-space-20);
}
.detail-card--full { grid-column: 1 / -1; }
.detail-card-title {
    font: 600 var(--v2-type-heading-16) / 1.25 var(--font-family-base, "Inter", system-ui, sans-serif);
    letter-spacing: -0.02em;
    color: var(--color-text-primary, #111);
    margin: 0 0 var(--v2-space-16);
    padding-bottom: var(--v2-space-12);
    border-bottom: 1px solid var(--color-border-subtle, #f4f4f5);
}
.detail-list {
    display: grid; grid-template-columns: 130px 1fr;
    gap: var(--v2-space-8) var(--v2-space-16);
    margin: 0;
    font: 400 var(--v2-type-body-13) / 1.4 var(--font-family-base, "Inter", system-ui, sans-serif);
}
.detail-list dt { color: var(--color-text-secondary, #6b7280); font-weight: 500; }
.detail-list dd { color: var(--color-text-primary, #111); margin: 0; }
.detail-list--inline { grid-template-columns: max-content 1fr max-content 1fr; }
.detail-list .num { font-family: 'Inter', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; font-feature-settings: "tnum", "cv11"; }

/* ============================================================
 * Buttons
 * ============================================================ */
.btn-primary, .btn-secondary {
    display: inline-flex; align-items: center; gap: var(--v2-space-8);
    padding: var(--v2-space-8) var(--v2-space-16);
    border-radius: var(--v2-radius-6);
    font: 500 var(--v2-type-body-14) / 1.25 var(--font-family-base, "Inter", system-ui, sans-serif);
    text-decoration: none;
    border: 1px solid transparent;
    cursor: pointer;
    transition: background var(--v2-motion-160) var(--v2-ease-enter), border-color var(--v2-motion-160) var(--v2-ease-enter);
}
.btn-primary {
    background: var(--cherry-primary, #cf3339);
    color: #fff;
    border-color: var(--cherry-primary, #cf3339);
}
.btn-primary:hover { background: #b22b30; border-color: #b22b30; }
.btn-secondary {
    background: var(--color-bg-elevated, #fff);
    color: var(--color-text-primary, #111);
    border-color: var(--color-border, #e5e7eb);
}
.btn-secondary:hover { border-color: var(--color-text-secondary, #6b7280); }
.btn-secondary--danger { color: var(--v2-rag-red); border-color: rgba(220,38,38,0.3); }
.btn-secondary--danger:hover { border-color: var(--v2-rag-red); background: rgba(220,38,38,0.04); }
button.btn-primary:focus-visible, button.btn-secondary:focus-visible,
a.btn-primary:focus-visible, a.btn-secondary:focus-visible {
    outline: 2px solid var(--cherry-primary, #cf3339);
    outline-offset: 2px;
}

/* ============================================================
 * Alerts
 * ============================================================ */
.alert {
    padding: var(--v2-space-12) var(--v2-space-16);
    margin: var(--v2-space-16) var(--v2-space-40) 0;
    border-radius: var(--v2-radius-6);
    border-left: 3px solid var(--v2-status-planned);
    font: 400 var(--v2-type-body-14) / 1.45 var(--font-family-base, "Inter", system-ui, sans-serif);
}
.alert--success { border-left-color: var(--v2-rag-green); background: rgba(22,163,74,0.04); color: #14532d; }
.alert--error   { border-left-color: var(--v2-rag-red);   background: rgba(220,38,38,0.04); color: #7f1d1d; }

/* ============================================================
 * Empty state
 * ============================================================ */
.empty-state {
    text-align: center;
    padding: var(--v2-space-96) var(--v2-space-40);
    color: var(--color-text-secondary, #6b7280);
}
.empty-state-icon {
    font-size: 48px;
    color: var(--color-border, #d4d4d8);
    margin-bottom: var(--v2-space-20);
}
.empty-state-title {
    font: 600 var(--v2-type-heading-20) / 1.25 var(--font-family-base, "Inter", system-ui, sans-serif);
    letter-spacing: -0.02em;
    color: var(--color-text-primary, #111);
    margin: 0 0 var(--v2-space-8);
}
.empty-state-body {
    max-width: 560px; margin: 0 auto var(--v2-space-24);
    font: 400 var(--v2-type-body-14) / 1.55 var(--font-family-base, "Inter", system-ui, sans-serif);
}

/* ============================================================
 * Forms
 * ============================================================ */
.form-grid { padding: 0 var(--v2-space-40) var(--v2-space-40); max-width: 960px; }
.form-section {
    background: var(--color-bg-elevated, #fff);
    border: 1px solid var(--color-border, #e5e7eb);
    border-radius: var(--v2-radius-8);
    padding: var(--v2-space-24);
    margin-top: var(--v2-space-20);
}
.form-section-title {
    font: 600 var(--v2-type-heading-16) / 1.25 var(--font-family-base, "Inter", system-ui, sans-serif);
    letter-spacing: -0.02em;
    margin: 0 0 var(--v2-space-16);
    padding-bottom: var(--v2-space-12);
    border-bottom: 1px solid var(--color-border-subtle, #f4f4f5);
}
.form-row { margin-bottom: var(--v2-space-16); }
.form-row--inline { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--v2-space-16); }
.form-row--inline > div { display: flex; flex-direction: column; }
.form-label {
    display: block; margin-bottom: var(--v2-space-6);
    font: 500 var(--v2-type-label-12) / 1.25 var(--font-family-base, "Inter", system-ui, sans-serif);
    text-transform: uppercase; letter-spacing: 0.04em;
    color: var(--color-text-secondary, #6b7280);
}
.form-label--required::after { content: " *"; color: var(--cherry-primary, #cf3339); }
.form-input {
    display: block; width: 100%;
    padding: var(--v2-space-8) var(--v2-space-12);
    border: 1px solid var(--color-border, #e5e7eb);
    border-radius: var(--v2-radius-6);
    font: 400 var(--v2-type-body-14) / 1.5 var(--font-family-base, "Inter", system-ui, sans-serif);
    color: var(--color-text-primary, #111);
    background: var(--color-bg-elevated, #fff);
    transition: border-color var(--v2-motion-160) var(--v2-ease-enter);
}
.form-input:focus {
    outline: 2px solid var(--cherry-primary, #cf3339);
    outline-offset: 2px;
    border-color: var(--cherry-primary, #cf3339);
}
.form-input--mono { font-family: 'Inter', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; font-feature-settings: "tnum", "cv11"; }
.form-input--num { font-family: 'Inter', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; font-feature-settings: "tnum", "cv11"; text-align: right; }
.form-input--narrow { max-width: 160px; }
.form-error { display: block; margin-top: var(--v2-space-4); font: 400 var(--v2-type-body-13) / 1.4 var(--font-family-base, "Inter", system-ui, sans-serif); color: var(--v2-rag-red); }
.form-actions {
    display: flex; justify-content: flex-end; gap: var(--v2-space-12);
    margin-top: var(--v2-space-24); padding-top: var(--v2-space-20);
    border-top: 1px solid var(--color-border-subtle, #f4f4f5);
}

/* ============================================================
 * Misc
 * ============================================================ */
.link-mono {
    font-family: 'Inter', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-feature-settings: "tnum", "cv11";
    color: var(--cherry-primary, #cf3339);
    text-decoration: none;
    font-weight: 500;
}
.link-mono:hover { text-decoration: underline; }
.link-chip {
    display: inline-block;
    padding: 2px var(--v2-space-8);
    border: 1px solid var(--color-border, #e5e7eb);
    border-radius: var(--v2-radius-4);
    font: 500 var(--v2-type-mono-13) / 1.4 'Inter', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-feature-settings: "tnum", "cv11";
    color: var(--cherry-primary, #cf3339);
    text-decoration: none;
    transition: border-color var(--v2-motion-160) var(--v2-ease-enter);
}
.link-chip:hover { border-color: var(--cherry-primary, #cf3339); }
.muted { color: var(--color-text-secondary, #6b7280); }
.hint  { font: 400 var(--v2-type-body-13) / 1.45 var(--font-family-base, "Inter", system-ui, sans-serif); color: var(--color-text-secondary, #6b7280); margin: var(--v2-space-8) 0; }
.ai-summary { font: 400 var(--v2-type-body-14) / 1.55 var(--font-family-base, "Inter", system-ui, sans-serif); color: var(--color-text-primary, #111); padding: var(--v2-space-12); background: rgba(207,51,57,0.03); border-left: 3px solid var(--cherry-primary, #cf3339); border-radius: var(--v2-radius-4); margin: 0 0 var(--v2-space-12); }
.action-form { display: inline; }
.action-row { display: flex; flex-wrap: wrap; gap: var(--v2-space-12); margin-top: var(--v2-space-12); }

/* Nav badge (new chip on Master Data items added this PR) */
.nav-badge {
    display: inline-block;
    padding: 1px 6px;
    margin-left: auto;
    font: 600 11px / 1.4 var(--font-family-base, "Inter", system-ui, sans-serif);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    border-radius: var(--v2-radius-4);
    background: var(--color-border-subtle, #f4f4f5);
    color: var(--color-text-secondary, #6b7280);
}
.nav-badge--new {
    background: rgba(207,51,57,0.1);
    color: var(--cherry-primary, #cf3339);
}

/* ============================================================
 * CONTROL CENTER SURFACES (.cc-*) — Sprint 13.5 PR #5b
 * The Production Control Center page composes these classes
 * to deliver Dean's "true Control Center" quality bar:
 *   KPI band • AI summary • Tabs • Next Up • Filter chips •
 *   Bulk toolbar • Queue rows w/ verb tray • Exception lane •
 *   Activity feed • Drill-everywhere.
 * Naming: cc-{section}-{element}--{modifier}
 * ============================================================ */

/* ---------- Page chassis ---------- */
.cc-page {
    display: flex; flex-direction: column;
    min-height: calc(100vh - 64px);
    background: var(--color-bg-base, #fafafa);
}
.cc-header {
    display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between;
    gap: var(--v2-space-20);
    padding: var(--v2-space-24) var(--v2-space-40) var(--v2-space-16);
    border-bottom: 1px solid var(--color-border, #e5e7eb);
    background: var(--color-bg-elevated, #fff);
}
.cc-header-titles { flex: 1; min-width: 0; }
.cc-header-tools,
.cc-header-actions {
    display: flex; align-items: center; gap: var(--v2-space-12); flex-shrink: 0;
}
.cc-title {
    font: 600 var(--v2-type-display-32) / 1.1 var(--font-family-base, "Inter", system-ui, sans-serif);
    letter-spacing: -0.04em;
    color: var(--color-text-primary, #111);
    margin: var(--v2-space-6) 0 0;
}
.cc-subtitle {
    font: 400 var(--v2-type-body-14) / 1.45 var(--font-family-base, "Inter", system-ui, sans-serif);
    color: var(--color-text-secondary, #6b7280);
    margin: var(--v2-space-6) 0 0;
}

/* ---------- Search form ---------- */
.cc-search-form {
    display: flex; align-items: center; gap: var(--v2-space-8);
    background: var(--color-bg-elevated, #fff);
    border: 1px solid var(--color-border, #e5e7eb);
    border-radius: var(--v2-radius-6);
    padding: var(--v2-space-4) var(--v2-space-8);
    transition: border-color var(--v2-motion-160) var(--v2-ease-enter);
}
.cc-search-form:focus-within { border-color: var(--cherry-primary, #cf3339); }
.cc-search-input {
    border: 0; outline: 0; background: transparent;
    min-width: 260px;
    font: 400 var(--v2-type-body-14) / 1.4 var(--font-family-base, "Inter", system-ui, sans-serif);
    color: var(--color-text-primary, #111);
    padding: var(--v2-space-6) var(--v2-space-8);
}
.cc-search-input::placeholder { color: var(--color-text-secondary, #9ca3af); }
.cc-search-submit {
    background: transparent; border: 0; cursor: pointer;
    color: var(--color-text-secondary, #6b7280);
    padding: var(--v2-space-4) var(--v2-space-8);
    font-size: var(--v2-type-body-13);
}
.cc-search-submit:hover { color: var(--cherry-primary, #cf3339); }

/* ---------- KPI band (6 hero tiles) ---------- */
.cc-kpi-band {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: var(--v2-space-12);
    padding: var(--v2-space-20) var(--v2-space-40);
}
@media (max-width: 1200px) { .cc-kpi-band { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 720px)  { .cc-kpi-band { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.cc-kpi-tile {
    display: flex; align-items: flex-start; gap: var(--v2-space-12);
    padding: var(--v2-space-16);
    background: var(--color-bg-elevated, #fff);
    border: 1px solid var(--color-border, #e5e7eb);
    border-left-width: 3px;
    border-radius: var(--v2-radius-8);
    text-decoration: none;
    color: inherit;
    transition: border-color var(--v2-motion-160) var(--v2-ease-enter),
                transform var(--v2-motion-160) var(--v2-ease-enter),
                box-shadow var(--v2-motion-160) var(--v2-ease-enter);
}
.cc-kpi-tile:hover {
    border-color: var(--color-text-secondary, #6b7280);
    transform: translateY(-1px);
}
.cc-kpi-tile--active {
    border-color: var(--cherry-primary, #cf3339);
    background: rgba(207, 51, 57, 0.03);
}
.cc-kpi-tile--critical { border-left-color: var(--v2-rag-red); }
.cc-kpi-tile--warning  { border-left-color: var(--v2-rag-amber); }
.cc-kpi-tile--info     { border-left-color: var(--v2-status-released); }
.cc-kpi-tile--success  { border-left-color: var(--v2-rag-green); }
.cc-kpi-tile--neutral  { border-left-color: var(--color-border, #e5e7eb); }
.cc-kpi-icon {
    flex-shrink: 0;
    width: 32px; height: 32px;
    display: flex; align-items: center; justify-content: center;
    border-radius: var(--v2-radius-6);
    background: var(--color-bg-subtle, #fafafa);
    font-size: 16px;
    color: var(--color-text-secondary, #6b7280);
}
.cc-kpi-tile--critical .cc-kpi-icon { color: var(--v2-rag-red);   background: rgba(220,38,38,0.06); }
.cc-kpi-tile--warning  .cc-kpi-icon { color: var(--v2-rag-amber); background: rgba(217,119,6,0.06); }
.cc-kpi-tile--info     .cc-kpi-icon { color: var(--v2-status-released); background: rgba(37,99,235,0.06); }
.cc-kpi-tile--success  .cc-kpi-icon { color: var(--v2-rag-green); background: rgba(22,163,74,0.06); }
.cc-kpi-body { display: flex; flex-direction: column; min-width: 0; }
.cc-kpi-value {
    font: 600 var(--v2-type-display-32) / 1 'Inter', ui-monospace, "SF Mono", monospace;
    font-feature-settings: "tnum", "cv11";
    color: var(--color-text-primary, #111);
    letter-spacing: -0.04em;
}
.cc-kpi-label {
    font: 500 var(--v2-type-label-12) / 1.4 var(--font-family-base, "Inter", system-ui, sans-serif);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-text-secondary, #6b7280);
    margin-top: var(--v2-space-4);
}
.cc-kpi-hint {
    font: 400 var(--v2-type-body-13) / 1.4 var(--font-family-base, "Inter", system-ui, sans-serif);
    color: var(--color-text-secondary, #9ca3af);
    margin-top: var(--v2-space-4);
}

/* ---------- AI summary strip ---------- */
.cc-ai-strip {
    margin: 0 var(--v2-space-40);
    padding: var(--v2-space-16) var(--v2-space-20);
    background: linear-gradient(180deg, rgba(207,51,57,0.04) 0%, rgba(207,51,57,0.01) 100%);
    border: 1px solid rgba(207,51,57,0.15);
    border-radius: var(--v2-radius-8);
    display: grid; gap: var(--v2-space-12);
}
.cc-ai-summary { display: flex; align-items: flex-start; gap: var(--v2-space-12); }
.cc-ai-icon {
    width: 28px; height: 28px;
    border-radius: var(--v2-radius-6);
    background: var(--cherry-primary, #cf3339);
    color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-weight: 600; font-size: 13px; flex-shrink: 0;
}
.cc-ai-label {
    font: 600 var(--v2-type-label-12) / 1 var(--font-family-base, "Inter", system-ui, sans-serif);
    text-transform: uppercase; letter-spacing: 0.04em;
    color: var(--cherry-primary, #cf3339);
    margin-bottom: var(--v2-space-4);
}
.cc-ai-text {
    font: 400 var(--v2-type-body-14) / 1.5 var(--font-family-base, "Inter", system-ui, sans-serif);
    color: var(--color-text-primary, #111);
}
.cc-ai-suggestions {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: var(--v2-space-8);
}
.cc-ai-card {
    padding: var(--v2-space-12);
    background: var(--color-bg-elevated, #fff);
    border: 1px solid var(--color-border, #e5e7eb);
    border-left-width: 3px;
    border-radius: var(--v2-radius-6);
    display: flex; flex-direction: column; gap: var(--v2-space-4);
}
.cc-ai-card--critical { border-left-color: var(--v2-rag-red); }
.cc-ai-card--warning  { border-left-color: var(--v2-rag-amber); }
.cc-ai-card--info     { border-left-color: var(--v2-status-released); }
.cc-ai-card--success  { border-left-color: var(--v2-rag-green); }
.cc-ai-card-headline {
    font: 600 var(--v2-type-body-13) / 1.4 var(--font-family-base, "Inter", system-ui, sans-serif);
    color: var(--color-text-primary, #111);
}
.cc-ai-card-subtext {
    font: 400 var(--v2-type-body-13) / 1.4 var(--font-family-base, "Inter", system-ui, sans-serif);
    color: var(--color-text-secondary, #6b7280);
}
.cc-ai-card-action {
    align-self: flex-start;
    margin-top: var(--v2-space-4);
    font: 500 var(--v2-type-label-12) / 1 var(--font-family-base, "Inter", system-ui, sans-serif);
    text-transform: uppercase; letter-spacing: 0.04em;
    color: var(--cherry-primary, #cf3339);
    text-decoration: none;
}
.cc-ai-card-action:hover { text-decoration: underline; }

/* ---------- Tab bar ---------- */
.cc-tab-bar {
    display: flex; gap: var(--v2-space-4);
    margin: var(--v2-space-20) var(--v2-space-40) 0;
    border-bottom: 1px solid var(--color-border, #e5e7eb);
}
.cc-tab {
    display: inline-flex; align-items: center; gap: var(--v2-space-8);
    padding: var(--v2-space-12) var(--v2-space-16);
    font: 500 var(--v2-type-body-14) / 1 var(--font-family-base, "Inter", system-ui, sans-serif);
    color: var(--color-text-secondary, #6b7280);
    background: transparent;
    border: 0;
    border-bottom: 2px solid transparent;
    text-decoration: none;
    cursor: pointer;
    transition: color var(--v2-motion-160) var(--v2-ease-enter),
                border-color var(--v2-motion-160) var(--v2-ease-enter);
}
.cc-tab:hover { color: var(--color-text-primary, #111); }
.cc-tab--active {
    color: var(--cherry-primary, #cf3339);
    border-bottom-color: var(--cherry-primary, #cf3339);
}
.cc-tab-count {
    font: 600 var(--v2-type-label-12) / 1 'Inter', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-feature-settings: "tnum", "cv11";
    padding: 2px 6px;
    background: var(--color-border-subtle, #f4f4f5);
    border-radius: var(--v2-radius-4);
    color: var(--color-text-secondary, #6b7280);
}
.cc-tab--active .cc-tab-count { background: rgba(207,51,57,0.1); color: var(--cherry-primary, #cf3339); }
.cc-tab-content { padding: var(--v2-space-20) var(--v2-space-40); }

/* ---------- Filter row (composable chip stack + lens) ---------- */
.cc-filter-row {
    display: flex; flex-wrap: wrap; align-items: center; gap: var(--v2-space-8);
    margin-bottom: var(--v2-space-16);
}
.cc-filter-label {
    font: 500 var(--v2-type-label-12) / 1 var(--font-family-base, "Inter", system-ui, sans-serif);
    text-transform: uppercase; letter-spacing: 0.04em;
    color: var(--color-text-secondary, #6b7280);
    margin-right: var(--v2-space-4);
}
.cc-chip {
    display: inline-flex; align-items: center; gap: var(--v2-space-6);
    padding: var(--v2-space-6) var(--v2-space-12);
    background: var(--color-bg-elevated, #fff);
    border: 1px solid var(--color-border, #e5e7eb);
    border-radius: 999px;
    font: 500 var(--v2-type-body-13) / 1 var(--font-family-base, "Inter", system-ui, sans-serif);
    color: var(--color-text-primary, #111);
    text-decoration: none;
    transition: border-color var(--v2-motion-160) var(--v2-ease-enter),
                background var(--v2-motion-160) var(--v2-ease-enter);
}
.cc-chip:hover { border-color: var(--color-text-secondary, #6b7280); }
.cc-chip--active { border-color: var(--cherry-primary, #cf3339); background: rgba(207,51,57,0.06); color: var(--cherry-primary, #cf3339); }
.cc-chip--lens   { border-style: dashed; }
.cc-chip-clear {
    color: var(--color-text-secondary, #6b7280);
    text-decoration: none;
    font: 400 var(--v2-type-body-13) / 1 var(--font-family-base, "Inter", system-ui, sans-serif);
    padding-left: var(--v2-space-8);
}
.cc-chip-clear:hover { color: var(--cherry-primary, #cf3339); }

/* ---------- Queue layout ---------- */
.cc-queue-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--v2-space-20);
}
.cc-queue-main { display: flex; flex-direction: column; gap: var(--v2-space-16); }

/* ---------- Next Up hero card ---------- */
.cc-nextup-label {
    font: 600 var(--v2-type-label-12) / 1 var(--font-family-base, "Inter", system-ui, sans-serif);
    text-transform: uppercase; letter-spacing: 0.04em;
    color: var(--cherry-primary, #cf3339);
    margin-bottom: var(--v2-space-8);
}
.cc-nextup-card {
    padding: var(--v2-space-20);
    background: var(--color-bg-elevated, #fff);
    border: 1px solid var(--cherry-primary, #cf3339);
    border-radius: var(--v2-radius-8);
    box-shadow: 0 0 0 4px rgba(207,51,57,0.04);
    display: flex; flex-direction: column; gap: var(--v2-space-8);
    text-decoration: none; color: inherit;
}
.cc-nextup-card:hover { background: rgba(207,51,57,0.02); }
.cc-nextup-line1 {
    display: flex; align-items: baseline; gap: var(--v2-space-12); flex-wrap: wrap;
}
.cc-nextup-title {
    font: 600 var(--v2-type-heading-20) / 1.2 var(--font-family-base, "Inter", system-ui, sans-serif);
    letter-spacing: -0.02em;
    color: var(--color-text-primary, #111);
}
.cc-nextup-reason {
    font: 400 var(--v2-type-body-14) / 1.5 var(--font-family-base, "Inter", system-ui, sans-serif);
    color: var(--color-text-secondary, #6b7280);
}
.cc-nextup-meta {
    display: flex; flex-wrap: wrap; gap: var(--v2-space-12);
    font: 400 var(--v2-type-body-13) / 1.4 var(--font-family-base, "Inter", system-ui, sans-serif);
    color: var(--color-text-secondary, #6b7280);
}

/* ---------- Bulk toolbar ---------- */
.cc-bulk-form {
    display: flex; flex-direction: column; gap: var(--v2-space-12);
}
.cc-bulk-toolbar {
    display: flex; align-items: center; justify-content: space-between; gap: var(--v2-space-12);
    padding: var(--v2-space-8) var(--v2-space-16);
    background: var(--color-bg-subtle, #fafafa);
    border: 1px solid var(--color-border, #e5e7eb);
    border-radius: var(--v2-radius-6);
    visibility: hidden; opacity: 0;
    transform: translateY(-4px);
    transition: opacity var(--v2-motion-160) var(--v2-ease-enter),
                transform var(--v2-motion-160) var(--v2-ease-enter),
                visibility 0s linear var(--v2-motion-160);
}
.cc-bulk-toolbar--active {
    visibility: visible; opacity: 1;
    transform: translateY(0);
    background: rgba(207,51,57,0.04);
    border-color: var(--cherry-primary, #cf3339);
    transition: opacity var(--v2-motion-160) var(--v2-ease-enter),
                transform var(--v2-motion-160) var(--v2-ease-enter),
                visibility 0s;
}
.cc-bulk-count {
    font: 600 var(--v2-type-body-13) / 1 var(--font-family-base, "Inter", system-ui, sans-serif);
    color: var(--cherry-primary, #cf3339);
}
.cc-bulk-actions { display: flex; gap: var(--v2-space-8); }
.cc-bulk-select {
    padding: var(--v2-space-4) var(--v2-space-8);
    border: 1px solid var(--color-border, #e5e7eb);
    border-radius: var(--v2-radius-4);
    background: #fff;
    font: 500 var(--v2-type-body-13) / 1.4 var(--font-family-base, "Inter", system-ui, sans-serif);
}

/* ---------- Queue rows ---------- */
.cc-queue-list { display: flex; flex-direction: column; gap: var(--v2-space-8); }
.cc-queue-row {
    display: grid;
    grid-template-columns: 24px 1fr auto;
    gap: var(--v2-space-12);
    align-items: center;
    padding: var(--v2-space-12) var(--v2-space-16);
    background: var(--color-bg-elevated, #fff);
    border: 1px solid var(--color-border, #e5e7eb);
    border-left-width: 3px;
    border-radius: var(--v2-radius-6);
    transition: border-color var(--v2-motion-160) var(--v2-ease-enter),
                background var(--v2-motion-160) var(--v2-ease-enter);
}
.cc-queue-row:hover { border-color: var(--color-text-secondary, #6b7280); background: rgba(207,51,57,0.01); }
.cc-queue-row--danger  { border-left-color: var(--v2-rag-red); }
.cc-queue-row--warning { border-left-color: var(--v2-rag-amber); }
.cc-queue-row--info    { border-left-color: var(--v2-status-released); }
.cc-queue-row--neutral { border-left-color: var(--color-border, #e5e7eb); }
.cc-queue-checkbox { display: flex; align-items: center; justify-content: center; }
.cc-queue-check { width: 16px; height: 16px; accent-color: var(--cherry-primary, #cf3339); cursor: pointer; }
.cc-queue-link { display: flex; flex-direction: column; gap: var(--v2-space-4); text-decoration: none; color: inherit; min-width: 0; }
.cc-queue-line1 {
    display: flex; align-items: baseline; gap: var(--v2-space-8); flex-wrap: wrap;
    font: 600 var(--v2-type-heading-16) / 1.3 var(--font-family-base, "Inter", system-ui, sans-serif);
    color: var(--color-text-primary, #111);
}
.cc-queue-line1 .order-number {
    font-family: 'Inter', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-feature-settings: "tnum", "cv11";
    color: var(--cherry-primary, #cf3339);
}
.cc-queue-line2 {
    font: 400 var(--v2-type-body-13) / 1.4 var(--font-family-base, "Inter", system-ui, sans-serif);
    color: var(--color-text-secondary, #6b7280);
}
.cc-queue-meta {
    display: flex; flex-wrap: wrap; gap: var(--v2-space-16);
    margin-top: var(--v2-space-4);
}
.cc-queue-meta-pair { display: flex; flex-direction: column; }
.cc-queue-meta-label {
    font: 500 var(--v2-type-label-12) / 1 var(--font-family-base, "Inter", system-ui, sans-serif);
    text-transform: uppercase; letter-spacing: 0.04em;
    color: var(--color-text-secondary, #9ca3af);
}
.cc-queue-meta-value {
    font: 400 var(--v2-type-body-13) / 1.4 'Inter', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-feature-settings: "tnum", "cv11";
    color: var(--color-text-primary, #111);
}
.cc-queue-actions { display: flex; gap: var(--v2-space-6); align-items: center; }

/* ---------- Verb tray ---------- */
.cc-verb {
    display: inline-flex; align-items: center; gap: var(--v2-space-4);
    padding: var(--v2-space-4) var(--v2-space-12);
    font: 500 var(--v2-type-label-12) / 1 var(--font-family-base, "Inter", system-ui, sans-serif);
    text-transform: uppercase; letter-spacing: 0.04em;
    background: transparent;
    border: 1px solid var(--color-border, #e5e7eb);
    border-radius: var(--v2-radius-4);
    color: var(--color-text-primary, #111);
    cursor: pointer;
    transition: border-color var(--v2-motion-160) var(--v2-ease-enter),
                background var(--v2-motion-160) var(--v2-ease-enter);
}
.cc-verb:hover { border-color: var(--cherry-primary, #cf3339); color: var(--cherry-primary, #cf3339); }
.cc-verb--released    { color: var(--v2-status-released);   border-color: rgba(37,99,235,0.3); }
.cc-verb--released:hover    { background: rgba(37,99,235,0.06); }
.cc-verb--inprogress  { color: var(--v2-status-inprogress); border-color: rgba(217,119,6,0.3); }
.cc-verb--inprogress:hover  { background: rgba(217,119,6,0.06); }
.cc-verb--onhold      { color: var(--v2-status-onhold);     border-color: rgba(161,98,7,0.3); }
.cc-verb--onhold:hover      { background: rgba(161,98,7,0.06); }
.cc-verb--completed   { color: var(--v2-status-completed);  border-color: rgba(22,163,74,0.3); }
.cc-verb--completed:hover   { background: rgba(22,163,74,0.06); }
.cc-verb--cancelled   { color: var(--v2-rag-red);           border-color: rgba(220,38,38,0.3); }
.cc-verb--cancelled:hover   { background: rgba(220,38,38,0.06); }

/* ---------- Exception lane ---------- */
.cc-exception-lane { display: flex; flex-direction: column; gap: var(--v2-space-8); }
.cc-exception-lane-header {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: var(--v2-space-8);
}
.cc-exception {
    display: grid;
    grid-template-columns: 12px 1fr auto;
    gap: var(--v2-space-12);
    align-items: center;
    padding: var(--v2-space-12) var(--v2-space-16);
    background: var(--color-bg-elevated, #fff);
    border: 1px solid var(--color-border, #e5e7eb);
    border-radius: var(--v2-radius-6);
    text-decoration: none;
    color: inherit;
    transition: border-color var(--v2-motion-160) var(--v2-ease-enter);
}
.cc-exception:hover { border-color: var(--cherry-primary, #cf3339); }
.cc-exception--critical { border-left: 3px solid var(--v2-rag-red); }
.cc-exception--warning  { border-left: 3px solid var(--v2-rag-amber); }
.cc-exception--info     { border-left: 3px solid var(--v2-status-released); }
.cc-exception-dot {
    width: 8px; height: 8px; border-radius: 50%;
    background: var(--color-border, #d4d4d8);
}
.cc-exception--critical .cc-exception-dot { background: var(--v2-rag-red); }
.cc-exception--warning  .cc-exception-dot { background: var(--v2-rag-amber); }
.cc-exception--info     .cc-exception-dot { background: var(--v2-status-released); }
.cc-exception-body { display: flex; flex-direction: column; gap: var(--v2-space-4); min-width: 0; }
.cc-exception-line1 { display: flex; align-items: baseline; gap: var(--v2-space-8); flex-wrap: wrap; }
.cc-exception-eyebrow {
    font: 500 var(--v2-type-label-12) / 1 var(--font-family-base, "Inter", system-ui, sans-serif);
    text-transform: uppercase; letter-spacing: 0.04em;
    color: var(--color-text-secondary, #6b7280);
}
.cc-exception-headline {
    font: 600 var(--v2-type-body-15) / 1.4 var(--font-family-base, "Inter", system-ui, sans-serif);
    color: var(--color-text-primary, #111);
}
.cc-exception-subtext {
    font: 400 var(--v2-type-body-13) / 1.4 var(--font-family-base, "Inter", system-ui, sans-serif);
    color: var(--color-text-secondary, #6b7280);
}
.cc-exception-score {
    font: 600 var(--v2-type-label-12) / 1 'Inter', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-feature-settings: "tnum", "cv11";
    padding: 2px 6px;
    background: var(--color-border-subtle, #f4f4f5);
    border-radius: var(--v2-radius-4);
    color: var(--color-text-secondary, #6b7280);
}

/* ---------- Activity feed ---------- */
.cc-activity-feed { display: flex; flex-direction: column; gap: var(--v2-space-8); }
.cc-activity-entry {
    display: grid;
    grid-template-columns: 32px 1fr auto;
    gap: var(--v2-space-12);
    align-items: flex-start;
    padding: var(--v2-space-12) var(--v2-space-16);
    background: var(--color-bg-elevated, #fff);
    border: 1px solid var(--color-border, #e5e7eb);
    border-radius: var(--v2-radius-6);
}
.cc-activity-icon {
    width: 28px; height: 28px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-weight: 600; font-size: 12px;
    background: var(--color-bg-subtle, #fafafa);
    color: var(--color-text-secondary, #6b7280);
}
.cc-activity-icon--human  { background: rgba(37,99,235,0.06);  color: var(--v2-status-released); }
.cc-activity-icon--ai     { background: rgba(207,51,57,0.06);  color: var(--cherry-primary, #cf3339); }
.cc-activity-icon--system { background: rgba(107,114,128,0.06); color: var(--color-text-secondary, #6b7280); }
.cc-activity-body { display: flex; flex-direction: column; gap: var(--v2-space-4); min-width: 0; }
.cc-activity-line1 {
    font: 400 var(--v2-type-body-14) / 1.4 var(--font-family-base, "Inter", system-ui, sans-serif);
    color: var(--color-text-primary, #111);
}
.cc-activity-line1 strong { font-weight: 600; }
.cc-activity-line1 a {
    font-family: 'Inter', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-feature-settings: "tnum", "cv11";
    color: var(--cherry-primary, #cf3339); text-decoration: none;
}
.cc-activity-line1 a:hover { text-decoration: underline; }
.cc-activity-snippet {
    font: 400 var(--v2-type-body-13) / 1.45 var(--font-family-base, "Inter", system-ui, sans-serif);
    color: var(--color-text-secondary, #6b7280);
}
.cc-activity-time {
    font: 500 var(--v2-type-label-12) / 1 'Inter', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-feature-settings: "tnum", "cv11";
    color: var(--color-text-secondary, #9ca3af);
    white-space: nowrap;
}

/* ============================================================================
   PRO-CC-1 — Production Order lifecycle stage-rail (_CockpitStageRail.cshtml)
   A modern horizontal stepper: forward lifecycle path + advisory hint + the
   legal advance actions + linked-project chip. Themed via design tokens so it
   reads correctly in both light and html.dark.
   ========================================================================== */
.stage-rail {
    margin: var(--v2-space-12) var(--v2-space-20) 0;
    padding: var(--v2-space-16) var(--v2-space-20);
    background: var(--color-surface, #fff);
    border: 1px solid var(--color-border, #e5e7eb);
    border-radius: var(--v2-radius-12);
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04);
}
html.dark .stage-rail { background: var(--color-surface, #0f172a); border-color: var(--color-border, #1e293b); }
.stage-rail--cancelled { opacity: 0.92; }

/* --- the stepper track --- */
.stage-rail__track {
    list-style: none; margin: 0; padding: 0;
    display: flex; align-items: flex-start; justify-content: space-between;
    gap: var(--v2-space-8); flex-wrap: wrap;
}
.stage-rail__node {
    position: relative;
    flex: 1 1 0; min-width: 92px;
    display: flex; flex-direction: column; align-items: center; gap: 8px;
    text-align: center;
}
/* connector line between nodes */
.stage-rail__node::before {
    content: ""; position: absolute; top: 17px; left: -50%; width: 100%; height: 2px;
    background: var(--color-border, #e5e7eb); z-index: 0;
}
.stage-rail__node:first-child::before { display: none; }
.stage-rail__node.is-done::before { background: var(--v2-status-completed, #16a34a); }

.stage-rail__dot {
    position: relative; z-index: 1;
    width: 36px; height: 36px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 0.85rem;
    background: var(--color-surface, #fff);
    border: 2px solid var(--color-border, #d1d5db);
    color: var(--color-text-secondary, #9ca3af);
    transition: transform 0.12s ease, box-shadow 0.12s ease;
}
html.dark .stage-rail__dot { background: var(--color-surface, #0f172a); }
.stage-rail__label {
    font: 600 var(--v2-type-label-12, 12px) / 1.2 var(--font-family-base, "Inter", system-ui, sans-serif);
    color: var(--color-text-secondary, #6b7280);
    letter-spacing: 0.01em;
}

.stage-rail__node.is-done .stage-rail__dot {
    background: var(--v2-status-completed, #16a34a); border-color: var(--v2-status-completed, #16a34a); color: #fff;
}
.stage-rail__node.is-done .stage-rail__label { color: var(--color-text-primary, #111827); }

.stage-rail__node.is-current .stage-rail__dot {
    background: var(--cherry-primary, #cf3339); border-color: var(--cherry-primary, #cf3339); color: #fff;
    box-shadow: 0 0 0 4px rgba(207, 51, 57, 0.16);
}
.stage-rail__node.is-current .stage-rail__label { color: var(--cherry-primary, #cf3339); font-weight: 700; }

.stage-rail__node.is-skipped .stage-rail__dot { opacity: 0.5; }
.stage-rail__node.is-skipped .stage-rail__label { opacity: 0.5; }

/* --- off-track banners --- */
.stage-rail__banner {
    margin-top: var(--v2-space-12); padding: 8px 12px; border-radius: var(--v2-radius-6);
    display: flex; align-items: center; gap: 8px;
    font: 500 var(--v2-type-body-13, 13px) / 1.4 var(--font-family-base, "Inter", system-ui, sans-serif);
}
.stage-rail__banner--hold { background: rgba(161, 98, 7, 0.10); color: var(--v2-status-onhold, #a16207); border: 1px solid rgba(161, 98, 7, 0.25); }
.stage-rail__banner--cancelled { background: rgba(113, 113, 122, 0.12); color: var(--v2-status-cancelled, #71717a); border: 1px solid rgba(113, 113, 122, 0.30); }

/* --- footer: hint + actions --- */
.stage-rail__foot {
    margin-top: var(--v2-space-16); padding-top: var(--v2-space-12);
    border-top: 1px solid var(--color-border, #e5e7eb);
    display: flex; align-items: center; justify-content: space-between; gap: var(--v2-space-16); flex-wrap: wrap;
}
.stage-rail__hint {
    flex: 1 1 240px; min-width: 200px;
    font: 400 var(--v2-type-body-13, 13px) / 1.45 var(--font-family-base, "Inter", system-ui, sans-serif);
    color: var(--color-text-secondary, #6b7280);
    display: flex; align-items: center; gap: 6px;
}
.stage-rail__hint i { color: var(--cherry-primary, #cf3339); }
.stage-rail__actions { display: flex; align-items: center; gap: var(--v2-space-8); flex-wrap: wrap; justify-content: flex-end; }
/* NOTE: display:inline-flex, NOT display:contents. A `display:contents` <form>
   generates no box and Chrome then fails to fire the submit button's implicit
   form submission on a real mouse click (verified live in PRO-CC-1 E2E — the
   POST never fired). inline-flex keeps the form a real (layout-transparent)
   flex item whose button submits on click. */
.stage-rail__action-form { margin: 0; display: inline-flex; }
.stage-rail__terminal { font: 500 12px var(--font-family-base, "Inter", system-ui, sans-serif); color: var(--color-text-secondary, #9ca3af); font-style: italic; }
.stage-rail__btn--warn { color: var(--v2-status-onhold, #a16207) !important; border-color: rgba(161,98,7,0.4) !important; }
.stage-rail__btn--danger { color: var(--v2-status-cancelled, #b91c1c) !important; }
.stage-rail__btn--danger:hover { background: rgba(185, 28, 28, 0.08) !important; }

/* --- linked project chip --- */
.stage-rail__project {
    margin-top: var(--v2-space-12); display: flex; align-items: center; gap: var(--v2-space-12); flex-wrap: wrap;
}
.stage-rail__project-chip {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 5px 12px; border-radius: 999px;
    background: rgba(37, 99, 235, 0.08); border: 1px solid rgba(37, 99, 235, 0.22);
    color: var(--v2-status-released, #2563eb); text-decoration: none;
    font: 500 var(--v2-type-body-13, 13px) / 1 var(--font-family-base, "Inter", system-ui, sans-serif);
}
.stage-rail__project-chip:hover { background: rgba(37, 99, 235, 0.14); }

/* ============================================================================
   PRO-CC-2 — related-records cross-link panel (_CockpitRelatedRecords.cshtml)
   A grouped list of one-click jumps to every record the production order
   touches. Lives as a card in the Cockpit Overview grid.
   ========================================================================== */
.cockpit-related .ds-h3 { display: flex; align-items: center; gap: 8px; margin-bottom: var(--v2-space-12); }
.cockpit-related .ds-h3 i { color: var(--cherry-primary, #cf3339); font-size: 0.9em; }
.cockpit-related__group { margin-bottom: var(--v2-space-12); }
.cockpit-related__group:last-child { margin-bottom: 0; }
.cockpit-related__grouplabel {
    display: block; font: 600 var(--v2-type-label-12, 12px) / 1 var(--font-family-base, "Inter", system-ui, sans-serif);
    text-transform: uppercase; letter-spacing: 0.04em;
    color: var(--color-text-secondary, #9ca3af); margin: 0 0 6px 2px;
}
.cockpit-related__item {
    display: flex; align-items: center; gap: 10px;
    padding: 8px 10px; border-radius: var(--v2-radius-6);
    text-decoration: none; color: var(--color-text-primary, #111827);
    border: 1px solid transparent; transition: background 0.12s ease, border-color 0.12s ease;
}
.cockpit-related__item + .cockpit-related__item { margin-top: 2px; }
.cockpit-related__item:hover { background: rgba(207,51,57,0.05); border-color: var(--color-border, #e5e7eb); }
.cockpit-related__icon {
    flex-shrink: 0; width: 28px; height: 28px; border-radius: 7px;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--color-border, #eef0f3); color: var(--color-text-secondary, #6b7280); font-size: 0.8rem;
}
html.dark .cockpit-related__icon { background: rgba(148,163,184,0.16); }
.cockpit-related__text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.cockpit-related__label {
    font: 600 var(--v2-type-body-13, 13px) / 1.3 var(--font-family-base, "Inter", system-ui, sans-serif);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cockpit-related__sub {
    font: 400 var(--v2-type-label-12, 12px) / 1.3 var(--font-family-base, "Inter", system-ui, sans-serif);
    color: var(--color-text-secondary, #6b7280); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cockpit-related__status {
    flex-shrink: 0; font: 600 11px var(--font-family-base, "Inter", system-ui, sans-serif);
    padding: 2px 8px; border-radius: 999px; white-space: nowrap;
}
.cockpit-related__status--success { background: rgba(22,163,74,0.12); color: var(--v2-status-completed, #16a34a); }
.cockpit-related__status--info    { background: rgba(37,99,235,0.12);  color: var(--v2-status-released, #2563eb); }
.cockpit-related__status--warning { background: rgba(161,98,7,0.12);   color: var(--v2-status-onhold, #a16207); }
.cockpit-related__status--danger  { background: rgba(185,28,28,0.12);  color: #b91c1c; }
.cockpit-related__status--neutral { background: rgba(107,114,128,0.12); color: var(--color-text-secondary, #6b7280); }
.cockpit-related__chev { flex-shrink: 0; font-size: 0.7rem; color: var(--color-text-secondary, #9ca3af); }

/* ============================================================================
   PRO-CC-3 — two-level workflow tab nav (_CockpitWorkflowTabs.cshtml)
   PRIMARY = the 8 workflow groups (underline-active). SECONDARY = the active
   group's leaf sub-tabs (pills). Keeps the PRO record tabbed, not scrolling.
   ========================================================================== */
.cockpit-wftabs {
    display: flex; flex-wrap: wrap; gap: 2px; align-items: stretch;
    border-bottom: 1px solid var(--color-border, #e5e7eb);
    padding: 0 var(--v2-space-8);
}
.cockpit-wftab {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 12px 16px; text-decoration: none;
    color: var(--color-text-secondary, #6b7280);
    font: 600 var(--v2-type-body-14, 14px) / 1 var(--font-family-base, "Inter", system-ui, sans-serif);
    border-bottom: 2px solid transparent; margin-bottom: -1px;
    transition: color 0.12s ease, border-color 0.12s ease, background 0.12s ease;
    white-space: nowrap;
}
.cockpit-wftab:hover { color: var(--color-text-primary, #111827); background: rgba(207,51,57,0.04); }
.cockpit-wftab__icon { font-size: 0.9em; opacity: 0.85; }
.cockpit-wftab--active {
    color: var(--cherry-primary, #cf3339);
    border-bottom-color: var(--cherry-primary, #cf3339);
}
.cockpit-wftab--active .cockpit-wftab__icon { opacity: 1; }

.cockpit-subtabs {
    display: flex; flex-wrap: wrap; gap: 6px; align-items: center;
    padding: 10px var(--v2-space-16);
    background: var(--color-bg-subtle, rgba(148,163,184,0.06));
    border-bottom: 1px solid var(--color-border, #e5e7eb);
}
html.dark .cockpit-subtabs { background: rgba(148,163,184,0.08); }
.cockpit-subtab {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 5px 12px; border-radius: 999px; text-decoration: none;
    color: var(--color-text-secondary, #6b7280);
    font: 500 var(--v2-type-body-13, 13px) / 1 var(--font-family-base, "Inter", system-ui, sans-serif);
    border: 1px solid transparent;
    transition: color 0.12s ease, background 0.12s ease, border-color 0.12s ease;
}
.cockpit-subtab:hover { color: var(--color-text-primary, #111827); background: var(--color-surface, #fff); border-color: var(--color-border, #e5e7eb); }
.cockpit-subtab__icon { font-size: 0.85em; opacity: 0.8; }
.cockpit-subtab--active {
    color: var(--cherry-primary, #cf3339); background: rgba(207,51,57,0.08);
    border-color: rgba(207,51,57,0.22); font-weight: 600;
}
.cockpit-subtab--active .cockpit-subtab__icon { opacity: 1; }