/* bomsync-theme.css (Load after Fluent2.css) */

:root {
    /* Temperature-aligned neutrals (cool / navy — matches --brand-blue) */
    --bomsync-shadow-rgb: 17 27 44;
    --bomsync-page-bg: #f4f6fa;
    --bomsync-surface: #fafbfd;
    --bomsync-surface-2: #edf0f7;
    --bomsync-border: #dde3ee;
    --bomsync-border-strong: #bcc6da;
    --bomsync-text: #0f1520;
    --bomsync-text-secondary: #3a4560;
    --bomsync-text-muted: #74869c;
    --bomsync-on-dark-text: #e8edf5;
    --bomsync-brand-subtle: #eef2f9;
    --bomsync-brand-subtle-2: #e4eaf5;
    /* Cards / KPIs on dashboards: brighter than page so tiles read above --bomsync-page-bg */
    --bomsync-elevated-surface: #fbfcff;
    --bomsync-shadow-sm: 0 1px 3px rgb(var(--bomsync-shadow-rgb) / 0.08), 0 0 0 1px rgb(var(--bomsync-shadow-rgb) / 0.04);
    --bomsync-shadow-md: 0 1px 4px rgb(var(--bomsync-shadow-rgb) / 0.06), 0 4px 16px rgb(var(--bomsync-shadow-rgb) / 0.08), 0 0 0 1px rgb(var(--bomsync-shadow-rgb) / 0.05);
    --bomsync-shadow-lg: 0 2px 8px rgb(var(--bomsync-shadow-rgb) / 0.07), 0 12px 32px rgb(var(--bomsync-shadow-rgb) / 0.11), 0 0 0 1px rgb(var(--bomsync-shadow-rgb) / 0.045);

    /* Bootstrap 5 bridge */
    --bs-body-bg: var(--bomsync-page-bg);
    --bs-body-color: var(--bomsync-text);
    --bs-border-color: var(--bomsync-border);
    --bs-card-bg: var(--bomsync-surface);
    --bs-card-border-color: var(--bomsync-border);
    --bs-secondary-color: var(--bomsync-text-secondary);
    --bs-tertiary-color: var(--bomsync-text-muted);

    /* Core Custom Colors */
    --bsx-form-bg: var(--bomsync-surface);
    --bsx-panel-bg: #33415C; /* Panel background */
    --bsx-white: #ffffff;
    --bsx-black: #121820;
    --bsx-gray: #D3D3D3; /* LightGray */
    --bsx-light-blue: #ADD8E6; /* LightBlue */
    --bsx-dim-gray: #696969; /* DimGray */
    /* Action Buttons */
    --bsx-action: #2F6690; /* Action button */
    --bsx-option: #415A77; /* Option button */
    --bsx-exit: #D3D3D3; /* Exit button */
    --bsx-cadet-pressed: #5F9EA0; /* Pressed state */
    --bsx-border-100: #646464; /* Border color */
    --bsx-groupdrop-bg: #e8ecf4;
    --bsx-groupdrop-text: var(--bomsync-text-secondary);
    /* Fluent2 Colors (Customized) */
    --fluent-primary: var(--bsx-action); /* Fluent2 Primary */
    --fluent-secondary: var(--bsx-option); /* Fluent2 Secondary */
    --fluent-background: var(--bomsync-page-bg);
    --fluent-surface: var(--bsx-panel-bg); /* Fluent2 Surface */
    --fluent-foreground: var(--bomsync-text);
    --fluent-accent: var(--bsx-cadet-pressed); /* Fluent2 Accent */
    /* Sidebar & Text */
    --bs-sidebar-fg: var(--bomsync-on-dark-text);
    --bs-sidebar-fg-muted: #d7e6ff;
    --bs-cyan: #6ad7ff; /* selected (cyan-ish) */
    --bs-cadet: #5f9ea0; /* hover (cadetblue) */
    --bs-hover-bg: rgba(95,158,160,.20); /* hover background */
    --bs-active-bg: rgba(106,215,255,.16); /* active background */
    --bs-border-accent: #6ad7ff; /* accent border */
    /* Nav colors */
    --brand-blue: #111B2C;
    --nav-bg: #2F5485;
    --nav-text: var(--bomsync-on-dark-text);
    --nav-img: url('/images/ai-grid-overlay2.webp');
    --nav-tint-1: rgba(17,27,44,.90);
    --nav-tint-2: rgba(17,27,44,.84);
    /* layout.css --wash resolved after theme */
    --wash: var(--bomsync-surface-2);

    /* Grids / patch section (consolidated) */
    --grid-header-bg: #2F6690;
    --grid-header-fg: #f5f7fb;

    --btn-primary-bg: #2F6690;
    --btn-secondary-bg: #415A77;
    --changed-cell-bg: #ccf4c3;
    --btn-neutral-bg: var(--bomsync-brand-subtle);
    --btn-neutral-fg: var(--bomsync-text);
    --btn-neutral-bd: var(--bomsync-border);
    --btn-neutral-hv: var(--bomsync-brand-subtle-2);
    --btn-neutral-ac: #d8e0ed;

    /* File manager Doc/Excel preview & edit chrome — light secondary + softer emphasis (not global navy default .e-btn) */
    --bomsync-fm-chrome-action-bg: #5d82a8;
    --bomsync-fm-chrome-action-bd: #4c6f91;
    --bomsync-fm-chrome-action-fg: #ffffff;
    --bomsync-fm-chrome-action-hover: #4c6f91;
    --bomsync-fm-chrome-action-active: #3f5f7c;
    --bomsync-fm-chrome-neutral-bg: var(--bomsync-elevated-surface);
    --bomsync-fm-chrome-neutral-bd: var(--bomsync-border-strong);
    --bomsync-fm-chrome-neutral-fg: var(--bomsync-text);
    --bomsync-fm-chrome-neutral-hover: var(--bomsync-brand-subtle-2);
    --bomsync-fm-chrome-neutral-active: #d8e0ed;

    /* Document details dialog — released-truth workflow (warm gold, pairs with freshness scale) */
    --bomsync-doc-authoritative-pill-bg: #d97706;
    --bomsync-doc-authoritative-pill-fg: #fffbeb;
    --bomsync-doc-authoritative-pill-border: #b45309;

    /* QA checklist builder — stage accordion headers (muted warm gold; pairs with doc authoritative / freshness family) */
    --bomsync-qa-stage-accordion-header-bg: #f3ead2;
    --bomsync-qa-stage-accordion-header-bg-hover: #ebe0c4;
    --bomsync-qa-stage-accordion-header-fg: #0f1520;
    --bomsync-qa-stage-accordion-header-border: #d4c4a0;

    /* Data freshness / rollup KPI age — warm (recent) → cool (old). App maps UTC age → step 1–24 + stale; see Theme Canon */
    --bomsync-freshness-01: #c2410c;
    --bomsync-freshness-02: #d1490c;
    --bomsync-freshness-03: #e1530c;
    --bomsync-freshness-04: #e75d0a;
    --bomsync-freshness-05: #e06908;
    --bomsync-freshness-06: #d97506;
    --bomsync-freshness-07: #e28407;
    --bomsync-freshness-08: #ed9309;
    --bomsync-freshness-09: #f3a00a;
    --bomsync-freshness-10: #efa809;
    --bomsync-freshness-11: #eab108;
    --bomsync-freshness-12: #e0a606;
    --bomsync-freshness-13: #d39605;
    --bomsync-freshness-14: #c68604;
    --bomsync-freshness-15: #b67605;
    --bomsync-freshness-16: #a66706;
    --bomsync-freshness-17: #9d5908;
    --bomsync-freshness-18: #974b0b;
    --bomsync-freshness-19: #904212;
    --bomsync-freshness-20: #865536;
    --bomsync-freshness-21: #7c685b;
    --bomsync-freshness-22: #757170;
    --bomsync-freshness-23: #707178;
    --bomsync-freshness-24: #6b7280;
    --bomsync-freshness-stale: #74869c; /* beyond policy; aligned with --bomsync-text-muted */

    /* Syncfusion tab vars (syncfusion.css defines defaults; override here — loads after) */
    --tab-vertical-item-bg: var(--bomsync-surface);
    --tab-active-fg: #f5f7fb;

    /* Solver / nesting command center UI — tokens (merged from docs/specs/nesting-ui-blazor; use .solver-page-shell) */
    --bs-navy: #1B3A5C;
    --bs-navy-dark: #0f2540;
    --bs-teal: #0F6E56;
    --bs-teal-light: #E1F5EE;
    --bs-amber: #C9921A;
    --bs-amber-light: #FEF3C7;
    --bs-coral: #B84A2E;
    --bs-coral-light: #FEE2D8;
    --bs-purple: #5C3A8C;
    --bs-purple-light: #F3EEFF;
    --bs-green: #1A6E2A;
    --bs-green-light: #DCFCE7;
    --bs-blue: #2A6FAB;
    --bs-blue-light: #DBEAFE;
    --domain-1d: #2A6FAB;
    --domain-2d: #0F6E56;
    --domain-3d: #B84A2E;
    --domain-4d: #5C3A8C;
    --domain-5d: #C9921A;
    --domain-6d: #1A6E2A;
    --domain-7d: #0F6E56;
    --surface-bg: var(--bomsync-page-bg);
    --surface-card: var(--bomsync-elevated-surface);
    --surface-hover: var(--bomsync-surface-2);
    --border-default: var(--bomsync-border);
    --border-subtle: var(--bomsync-brand-subtle);
    --text-primary: var(--bomsync-text);
    --text-secondary: var(--bomsync-text-secondary);
    --text-muted: var(--bomsync-text-muted);
    --text-label: #64748B;
    --status-green: #22C55E;
    --status-amber: #F59E0B;
    --status-red: #EF4444;
    --status-blue: #3B82F6;
    --rail-width: 288px;
    --ribbon-height: 52px;
    --header-height: 72px;
    --tabs-height: 240px;
    --font-sans: 'Segoe UI', system-ui, -apple-system, sans-serif;
    --font-mono: 'Cascadia Code', 'Consolas', 'DM Mono', monospace;
}

/* Nesting 1D guided SfStepper (horizontal scroll on narrow viewports) */
.nesting-guided-stepper {
    padding: 0;
    min-width: 0;
    overflow: hidden;
}
    .nesting-guided-stepper .e-stepper {
        min-width: 0;
        width: 100%;
        max-width: 100%;
        border-bottom: 1px solid var(--border-subtle);
        padding: 0.2rem 0.5rem 0;
    }
    .nesting-guided-stepper .e-stepper-horizontal .e-step-header {
        flex-wrap: wrap;
    }
.nesting-guided-nav {
    border-bottom: 1px solid var(--border-subtle);
    background: var(--bomsync-elevated-surface);
}
.nesting-guided-inject {
    min-width: 0;
}
    .nesting-guided-inject .solver-header {
        border-radius: 0;
    }
.nesting-guided-coach {
    padding: 0.25rem 0.75rem 0.2rem 1rem;
    background: var(--bomsync-elevated-surface);
    /* Nesting 1D–7D: --domain-accent is set on .solver-page-shell; falls back to 1D when absent */
    border-left: 4px solid var(--domain-accent, var(--domain-1d));
    border-bottom: 1px solid var(--border-subtle);
    margin: 0;
}
.nesting-guided-coach-title {
    font-weight: 800;
    font-size: 1.05rem;
    color: var(--bs-navy, #1B3A5C);
    color: color-mix(in srgb, var(--domain-accent, var(--domain-1d)) 42%, #1B3A5C);
    margin-bottom: 0.25rem;
}
.nesting-guided-step-card,
.nesting-guided-panel {
    padding: 0.25rem 0.25rem 0.4rem 0.25rem;
    max-width: 52rem;
}
.nesting-guided-step-card--tight,
.solver-center--tabs-priority .nesting-guided-panel {
    padding-top: 0.1rem;
    margin-bottom: 0;
}
.nesting-ws-chrome-top-banner {
    min-width: 0;
}

/* ========== Instructional copy (lead paragraphs, panel tips, coach guidance) ========== */
/* BOMSync users are often 45+: paragraph-length instructions must stay body-sized (~1rem), not Bootstrap .small (~0.875rem). */
.bomsync-copy-lead {
    font-size: 1rem;
    line-height: 1.6;
    color: var(--bomsync-text-secondary);
}


/* ========== Buttons ========== */
/* Primary → Action */
.e-btn.e-primary, .e-css.e-btn.e-primary {
    background: var(--bsx-action) !important; /* Use action color directly */
    border-color: var(--bsx-action) !important;
    color: #fff !important; /* White text on dark background */
}

    .e-btn.e-primary:hover {
        background: #295C84 !important;
        border-color: #295C84 !important;
    }

    .e-btn.e-primary:active, .e-btn.e-primary.e-active {
        background: #244E73 !important;
        border-color: #244E73 !important;
    }

/* Secondary → Option */
.e-btn.e-secondary, .e-css.e-btn.e-secondary {
    background: var(--bsx-option) !important; /* Use option color directly */
    border-color: var(--bsx-option) !important;
    color: #fff !important; /* White text on dark background */
}

    .e-btn.e-secondary:hover {
        background: #3A516B !important;
        border-color: #3A516B !important;
    }

    .e-btn.e-secondary:active, .e-btn.e-secondary.e-active {
        background: #32465B !important;
        border-color: #32465B !important;
    }

/* Danger → Exit */
.e-btn.e-danger, .e-css.e-btn.e-danger {
    background: var(--bsx-exit) !important;
    border-color: var(--bsx-exit) !important;
    color: var(--bsx-black) !important;
}

    .e-btn.e-danger:hover {
        background: #C8C8C8 !important;
        border-color: #C8C8C8 !important;
    }

    .e-btn.e-danger:active, .e-btn.e-danger.e-active {
        background: #BDBDBD !important;
        border-color: #BDBDBD !important;
    }

/* =============================== */
/* Grid Header Color Adjustment */
/* =============================== */
/* Grid Header Cells */
.e-grid .e-headercell {
    background-color: var(--brand-blue); /* Retain your custom brand blue */
    color: var(--grid-header-fg);
    font-size: 11px;
    font-weight: bold;
}
/* ========== Grid & Table ========== */
.e-grid .e-rowcell, .e-grid .e-headercell, .e-grid .e-gridheader {
    border-color: var(--bsx-border-100) !important;
}

.e-grid .e-groupdroparea {
    background: var(--bsx-groupdrop-bg) !important;
    color: var(--bsx-groupdrop-text) !important;
}

.e-grid .e-rowcell .e-btn {
    background: var(--bsx-action) !important; /* Use action color if grid-action not defined */
    color: #fff !important; /* White text on dark background */
    border-color: var(--bsx-action) !important;
}

    .e-grid .e-rowcell .e-btn:hover {
        background: #295C84 !important; /* Darker on hover */
        border-color: #295C84 !important;
        color: #fff !important;
    }

    .e-grid .e-rowcell .e-btn:active {
        background: #244E73 !important; /* Even darker when active */
        border-color: #244E73 !important;
        color: #fff !important;
    }

/* ========== Sidebar Menu ========== */
.sidebar-menu .e-menu-container ul.e-vertical > li.e-menu-item > a,
.sidebar-menu .e-menu-container ul.e-vertical > li.e-menu-item > a .e-menu-text {
    color: var(--bs-sidebar-fg) !important;
}

.sidebar-menu .e-menu-container .e-menu-icon,
.sidebar-menu .e-menu-container .bi,
.sidebar-menu .e-menu-container .e-menu-item .material-symbols-outlined {
    color: var(--bs-sidebar-fg) !important;
    opacity: .95;
}

.sidebar-menu .e-menu-container ul.e-vertical > li.e-menu-item:hover > a,
.sidebar-menu .e-menu-container ul.e-vertical > li.e-menu-item.e-focused > a {
    background: var(--bs-hover-bg) !important;
    color: var(--bs-sidebar-fg) !important;
}

.sidebar-menu .e-menu-container ul.e-vertical > li.e-menu-item.e-selected > a {
    background: var(--bs-active-bg) !important;
    color: var(--bs-cyan) !important;
    border-left: 3px solid var(--bs-border-accent);
}

    .sidebar-menu .e-menu-container ul.e-vertical > li.e-menu-item.e-selected > a .e-menu-icon,
    .sidebar-menu .e-menu-container ul.e-vertical > li.e-menu-item.e-selected > a .bi,
    .sidebar-menu .e-menu-container ul.e-vertical > li.e-menu-item.e-selected > a .material-symbols-outlined {
        color: var(--bs-cyan) !important;
    }

/* Submenu (Flyout) */
.sidebar-menu .e-menu-container ul.e-vertical > .e-menu-item .e-ul {
    background: linear-gradient(var(--nav-tint-1), var(--nav-tint-2)), var(--nav-img);
    border: 1px solid rgb(255 255 255 / 0.12);
}

    .sidebar-menu .e-menu-container ul.e-vertical > .e-menu-item .e-ul .e-menu-item > a {
        color: var(--bs-sidebar-fg) !important;
    }

    .sidebar-menu .e-menu-container ul.e-vertical > .e-menu-item .e-ul .e-menu-item:hover > a,
    .sidebar-menu .e-menu-container ul.e-vertical > .e-menu-item .e-ul .e-menu-item.e-focused > a {
        background: var(--bs-hover-bg) !important;
    }

    .sidebar-menu .e-menu-container ul.e-vertical > .e-menu-item .e-ul .e-menu-item.e-selected > a {
        background: var(--bs-active-bg) !important;
        color: var(--bs-cyan) !important;
    }

/* Collapsed State */
.sidebar-menu.e-dock.e-close .e-menu-container ul.e-vertical > li.e-menu-item .e-menu-icon,
.sidebar-menu.e-dock.e-close .e-menu-container ul.e-vertical > li.e-menu-item .bi,
.sidebar-menu.e-dock.e-close .e-menu-container ul.e-vertical > li.e-menu-item .material-symbols-outlined {
    color: var(--bs-sidebar-fg) !important;
}

/* Pin to Work view + Manage pins (below SfMenu; match sidebar contrast) */
.sidebar-menu .work-view-pin-bar .work-view-pin-btn,
.sidebar-menu .work-view-pin-bar .work-view-pin-btn .bi {
    color: var(--bs-sidebar-fg-muted) !important;
}

.sidebar-menu .work-view-pin-bar .work-view-pin-btn:hover:not(:disabled),
.sidebar-menu .work-view-pin-bar .work-view-pin-btn:focus-visible {
    color: var(--bs-cyan) !important;
}

.sidebar-menu .work-view-pin-bar .work-view-pin-btn:disabled {
    opacity: 0.42 !important;
}

.sidebar-menu .work-view-pin-bar .work-view-manage-link {
    color: var(--bs-sidebar-fg-muted) !important;
}

.sidebar-menu .work-view-pin-bar .work-view-manage-link:hover,
.sidebar-menu .work-view-pin-bar .work-view-manage-link:focus-visible {
    color: var(--bs-cyan) !important;
}

/* ========== General Layout ========== */
body {
    background-color: var(--fluent-background); /* Set to white */
    color: var(--fluent-foreground);
}

.top-bar {
    background-color: var(--brand-blue);
    color: var(--bomsync-on-dark-text);
}

.page-hero {
    background: radial-gradient(1200px 600px at 20% -10%, var(--bsx-action), transparent 60%), radial-gradient(1200px 600px at 120% 10%, var(--bsx-option), transparent 60%), var(--fluent-background);
}

/* Footer */
.footer-bar {
    background-color: #0f1a2a;
    color: var(--bomsync-on-dark-text);
}




/* !!!!!!!!!!!!!!!!! PATCH FILES 2025.11.13 */
/* ===== Section bar under top brand bar (make light grey) ===== */
.sticky-toolbar,
.section-toolbar {
    background-color: var(--bomsync-surface-2) !important;
    border-bottom: 1px solid var(--bomsync-border) !important;
    color: var(--bomsync-text) !important;
}

    .sticky-toolbar .e-toolbar,
    .section-toolbar .e-toolbar {
        background-color: var(--bomsync-surface-2) !important;
        border-bottom: 1px solid var(--bomsync-border) !important;
    }

/* ===== SfGrid: blue header — grid header vars live in main :root above ===== */

/* header cells & bar */
.e-grid .e-gridheader,
.e-grid .e-gridheader .e-headercell,
.e-grid .e-gridheader .e-headercontent {
    background-color: var(--grid-header-bg) !important;
}

    /* header text */
    .e-grid .e-gridheader .e-headercelldiv,
    .e-grid .e-gridheader .e-headercell .e-headertext {
        color: var(--grid-header-fg) !important;
    }

    /* sort/filter icons in header */
    .e-grid .e-gridheader .e-icons,
    .e-grid .e-gridheader .e-sortfilterdiv .e-icons,
    .e-grid .e-gridheader .e-filtermenudiv .e-icons {
        color: var(--grid-header-fg) !important;
        fill: var(--grid-header-fg) !important;
        opacity: 1 !important;
    }

    /* optional: header cell borders subtle */
    .e-grid .e-gridheader,
    .e-grid .e-headercell,
    .e-grid .e-gridheader .e-headercontent {
        border-color: rgba(255,255,255,.18) !important;
    }

/* ===== Buttons: primaries use tinted neutrals from main :root ===== */

/* base Syncfusion button - default to action color (not white) */
/* Exclude toolbar buttons (.e-tbar-btn) — toolbar uses surface tokens */
.e-btn:not(.e-primary):not(.e-secondary):not(.e-danger):not(.e-flat):not(.e-outline):not(.e-success):not(.e-info):not(.e-warning):not(.e-tbar-btn),
.e-control.e-btn:not(.e-primary):not(.e-secondary):not(.e-danger):not(.e-flat):not(.e-outline):not(.e-success):not(.e-info):not(.e-warning):not(.e-tbar-btn) {
    background: var(--bsx-action) !important; /* Use action blue instead of white */
    border-color: var(--bsx-action) !important;
    color: #fff !important; /* White text on dark background */
}

    .e-btn:not(.e-primary):not(.e-secondary):not(.e-danger):not(.e-flat):not(.e-outline):not(.e-success):not(.e-info):not(.e-warning):not(.e-tbar-btn):hover,
    .e-control.e-btn:not(.e-primary):not(.e-secondary):not(.e-danger):not(.e-flat):not(.e-outline):not(.e-success):not(.e-info):not(.e-warning):not(.e-tbar-btn):hover {
        background: #295C84 !important; /* Darker on hover */
        border-color: #295C84 !important;
        color: #fff !important;
    }

    .e-btn:not(.e-primary):not(.e-secondary):not(.e-danger):not(.e-flat):not(.e-outline):not(.e-success):not(.e-info):not(.e-warning):not(.e-tbar-btn):active,
    .e-control.e-btn:not(.e-primary):not(.e-secondary):not(.e-danger):not(.e-flat):not(.e-outline):not(.e-success):not(.e-info):not(.e-warning):not(.e-tbar-btn):active {
        background: #244E73 !important; /* Even darker when active */
        border-color: #244E73 !important;
        color: #fff !important;
    }

    /* filled buttons */
    .e-btn.e-primary, .e-css.e-btn.e-primary {
        background: var(--btn-primary-bg) !important;
        border-color: var(--btn-primary-bg) !important;
    }

    .e-btn.e-secondary, .e-css.e-btn.e-secondary {
        background: var(--btn-secondary-bg) !important;
        border-color: var(--btn-secondary-bg) !important;
    }

    /* common hover/active */
    .e-btn.e-primary:hover {
        filter: brightness(0.92);
    }

    .e-btn.e-primary:active, .e-btn.e-primary.e-active {
        filter: brightness(0.85);
    }

    .e-btn.e-secondary:hover {
        filter: brightness(0.92);
    }

    .e-btn.e-secondary:active, .e-btn.e-secondary.e-active {
        filter: brightness(0.85);
    }

    /* “Get Data” stays white text even if templated/plain .e-btn */
    button#GetDataBtn, /* if you have an id */
    .e-btn.get-data, /* or add class="get-data" */
    .e-control.e-btn.get-data {
        color: #fff !important;
    }

    /* keep outline/ghost buttons readable (optional) */
    .e-btn.e-outline, .e-control.e-btn.e-outline {
        color: var(--bomsync-text) !important;
    }

    /* 1) Restrict white text to filled primaries/secondaries only */
    .e-btn.e-primary, .e-css.e-btn.e-primary,
    .e-btn.e-secondary, .e-css.e-btn.e-secondary,
    .e-btn.e-danger, .e-css.e-btn.e-danger {
        color: #fff !important;
    }

    /* 2) Neutral buttons (e.g., Cancel) – soft gray with dark text */
    .e-dialog .e-footer-content .e-btn:not(.e-primary):not(.e-secondary):not(.e-danger),
    .e-toolbar .e-btn.e-flat:not(.e-primary):not(.e-secondary):not(.e-danger),
    .e-btn.e-flat:not(.e-primary):not(.e-secondary):not(.e-danger) {
        background: var(--btn-neutral-bg) !important;
        border-color: var(--btn-neutral-bd) !important;
        color: var(--btn-neutral-fg) !important;
    }

        /* Hover / active states for neutral buttons */
        .e-dialog .e-footer-content .e-btn:not(.e-primary):not(.e-secondary):not(.e-danger):hover,
        .e-btn.e-flat:not(.e-primary):not(.e-secondary):not(.e-danger):hover {
            background: var(--btn-neutral-hv) !important;
            border-color: var(--btn-neutral-hv) !important;
            color: var(--btn-neutral-fg) !important;
        }

        .e-dialog .e-footer-content .e-btn:not(.e-primary):not(.e-secondary):not(.e-danger):active,
        .e-btn.e-flat:not(.e-primary):not(.e-secondary):not(.e-danger):active {
            background: var(--btn-neutral-ac) !important;
            border-color: var(--btn-neutral-ac) !important;
            color: var(--btn-neutral-fg) !important;
        }

    /* -------- File manager preview / edit: readable light + muted blue primary -------- */
    .item-fm-preview-actions .e-btn.e-primary,
    .item-fm-preview-actions .e-css.e-btn.e-primary,
    .item-fm-edit-dialog-actions .e-btn.e-primary,
    .item-fm-edit-dialog-actions .e-css.e-btn.e-primary,
    .bomsync-edit-dialog .e-footer-content .e-btn.e-primary,
    .bomsync-edit-dialog .e-footer-content .e-css.e-btn.e-primary,
    .item-fm-viewer-dialog.e-dialog .e-footer-content .e-btn.e-primary,
    .item-fm-viewer-dialog.e-dialog .e-footer-content .e-css.e-btn.e-primary,
    .e-dialog.item-fm-viewer-dialog .e-footer-content .e-btn.e-primary,
    .e-dialog.item-fm-viewer-dialog .e-footer-content .e-css.e-btn.e-primary {
        background: var(--bomsync-fm-chrome-action-bg) !important;
        border-color: var(--bomsync-fm-chrome-action-bd) !important;
        color: var(--bomsync-fm-chrome-action-fg) !important;
        filter: none !important;
    }

        .item-fm-preview-actions .e-btn.e-primary:hover,
        .item-fm-preview-actions .e-css.e-btn.e-primary:hover,
        .item-fm-edit-dialog-actions .e-btn.e-primary:hover,
        .item-fm-edit-dialog-actions .e-css.e-btn.e-primary:hover,
        .bomsync-edit-dialog .e-footer-content .e-btn.e-primary:hover,
        .bomsync-edit-dialog .e-footer-content .e-css.e-btn.e-primary:hover,
        .item-fm-viewer-dialog.e-dialog .e-footer-content .e-btn.e-primary:hover,
        .item-fm-viewer-dialog.e-dialog .e-footer-content .e-css.e-btn.e-primary:hover,
        .e-dialog.item-fm-viewer-dialog .e-footer-content .e-btn.e-primary:hover,
        .e-dialog.item-fm-viewer-dialog .e-footer-content .e-css.e-btn.e-primary:hover {
            background: var(--bomsync-fm-chrome-action-hover) !important;
            border-color: var(--bomsync-fm-chrome-action-hover) !important;
            color: var(--bomsync-fm-chrome-action-fg) !important;
        }

        .item-fm-preview-actions .e-btn.e-primary:active,
        .item-fm-preview-actions .e-css.e-btn.e-primary:active,
        .item-fm-edit-dialog-actions .e-btn.e-primary:active,
        .item-fm-edit-dialog-actions .e-css.e-btn.e-primary:active,
        .bomsync-edit-dialog .e-footer-content .e-btn.e-primary:active,
        .bomsync-edit-dialog .e-footer-content .e-css.e-btn.e-primary:active,
        .item-fm-viewer-dialog.e-dialog .e-footer-content .e-btn.e-primary:active,
        .item-fm-viewer-dialog.e-dialog .e-footer-content .e-css.e-btn.e-primary:active,
        .e-dialog.item-fm-viewer-dialog .e-footer-content .e-btn.e-primary:active,
        .e-dialog.item-fm-viewer-dialog .e-footer-content .e-css.e-btn.e-primary:active {
            background: var(--bomsync-fm-chrome-action-active) !important;
            border-color: var(--bomsync-fm-chrome-action-active) !important;
            color: var(--bomsync-fm-chrome-action-fg) !important;
        }

    .item-fm-preview-actions .e-btn:not(.e-primary):not(.e-secondary):not(.e-danger):not(.e-flat):not(.e-outline):not(.e-success):not(.e-info):not(.e-warning):not(.e-tbar-btn),
    .item-fm-preview-actions .e-control.e-btn:not(.e-primary):not(.e-secondary):not(.e-danger):not(.e-flat):not(.e-outline):not(.e-success):not(.e-info):not(.e-warning):not(.e-tbar-btn),
    .item-fm-edit-dialog-actions .e-btn:not(.e-primary):not(.e-secondary):not(.e-danger):not(.e-flat):not(.e-outline):not(.e-success):not(.e-info):not(.e-warning):not(.e-tbar-btn),
    .item-fm-edit-dialog-actions .e-control.e-btn:not(.e-primary):not(.e-secondary):not(.e-danger):not(.e-flat):not(.e-outline):not(.e-success):not(.e-info):not(.e-warning):not(.e-tbar-btn),
    .bomsync-edit-dialog .e-footer-content .e-btn:not(.e-primary):not(.e-secondary):not(.e-danger):not(.e-flat):not(.e-outline):not(.e-success):not(.e-info):not(.e-warning),
    .item-fm-viewer-dialog.e-dialog .e-footer-content .e-btn:not(.e-primary):not(.e-secondary):not(.e-danger):not(.e-flat):not(.e-outline):not(.e-success):not(.e-info):not(.e-warning),
    .e-dialog.item-fm-viewer-dialog .e-footer-content .e-btn:not(.e-primary):not(.e-secondary):not(.e-danger):not(.e-flat):not(.e-outline):not(.e-success):not(.e-info):not(.e-warning) {
        background: var(--bomsync-fm-chrome-neutral-bg) !important;
        border-color: var(--bomsync-fm-chrome-neutral-bd) !important;
        color: var(--bomsync-fm-chrome-neutral-fg) !important;
    }

        .item-fm-preview-actions .e-btn:not(.e-primary):not(.e-secondary):not(.e-danger):not(.e-flat):not(.e-outline):not(.e-success):not(.e-info):not(.e-warning):not(.e-tbar-btn):hover,
        .item-fm-preview-actions .e-control.e-btn:not(.e-primary):not(.e-secondary):not(.e-danger):not(.e-flat):not(.e-outline):not(.e-success):not(.e-info):not(.e-warning):not(.e-tbar-btn):hover,
        .item-fm-edit-dialog-actions .e-btn:not(.e-primary):not(.e-secondary):not(.e-danger):not(.e-flat):not(.e-outline):not(.e-success):not(.e-info):not(.e-warning):not(.e-tbar-btn):hover,
        .item-fm-edit-dialog-actions .e-control.e-btn:not(.e-primary):not(.e-secondary):not(.e-danger):not(.e-flat):not(.e-outline):not(.e-success):not(.e-info):not(.e-warning):not(.e-tbar-btn):hover,
        .bomsync-edit-dialog .e-footer-content .e-btn:not(.e-primary):not(.e-secondary):not(.e-danger):not(.e-flat):not(.e-outline):not(.e-success):not(.e-info):not(.e-warning):hover,
        .item-fm-viewer-dialog.e-dialog .e-footer-content .e-btn:not(.e-primary):not(.e-secondary):not(.e-danger):not(.e-flat):not(.e-outline):not(.e-success):not(.e-info):not(.e-warning):hover,
        .e-dialog.item-fm-viewer-dialog .e-footer-content .e-btn:not(.e-primary):not(.e-secondary):not(.e-danger):not(.e-flat):not(.e-outline):not(.e-success):not(.e-info):not(.e-warning):hover {
            background: var(--bomsync-fm-chrome-neutral-hover) !important;
            border-color: var(--bomsync-fm-chrome-neutral-bd) !important;
            color: var(--bomsync-fm-chrome-neutral-fg) !important;
        }

        .item-fm-preview-actions .e-btn:not(.e-primary):not(.e-secondary):not(.e-danger):not(.e-flat):not(.e-outline):not(.e-success):not(.e-info):not(.e-warning):not(.e-tbar-btn):active,
        .item-fm-preview-actions .e-control.e-btn:not(.e-primary):not(.e-secondary):not(.e-danger):not(.e-flat):not(.e-outline):not(.e-success):not(.e-info):not(.e-warning):not(.e-tbar-btn):active,
        .item-fm-edit-dialog-actions .e-btn:not(.e-primary):not(.e-secondary):not(.e-danger):not(.e-flat):not(.e-outline):not(.e-success):not(.e-info):not(.e-warning):not(.e-tbar-btn):active,
        .item-fm-edit-dialog-actions .e-control.e-btn:not(.e-primary):not(.e-secondary):not(.e-danger):not(.e-flat):not(.e-outline):not(.e-success):not(.e-info):not(.e-warning):not(.e-tbar-btn):active,
        .bomsync-edit-dialog .e-footer-content .e-btn:not(.e-primary):not(.e-secondary):not(.e-danger):not(.e-flat):not(.e-outline):not(.e-success):not(.e-info):not(.e-warning):active,
        .item-fm-viewer-dialog.e-dialog .e-footer-content .e-btn:not(.e-primary):not(.e-secondary):not(.e-danger):not(.e-flat):not(.e-outline):not(.e-success):not(.e-info):not(.e-warning):active,
        .e-dialog.item-fm-viewer-dialog .e-footer-content .e-btn:not(.e-primary):not(.e-secondary):not(.e-danger):not(.e-flat):not(.e-outline):not(.e-success):not(.e-info):not(.e-warning):active {
            background: var(--bomsync-fm-chrome-neutral-active) !important;
            border-color: var(--bomsync-fm-chrome-neutral-bd) !important;
            color: var(--bomsync-fm-chrome-neutral-fg) !important;
        }

    /* Optional: outline/ghost neutrals stay readable */
    .e-btn.e-outline:not(.e-primary):not(.e-secondary):not(.e-danger) {
        color: var(--btn-neutral-fg) !important;
        border-color: var(--bomsync-border-strong) !important;
    }



/* soft green like your ref */

.e-grid .e-updatedtd {
    background-color: var(--changed-cell-bg) !important;
    transition: background-color .25s ease;
}

/* Keep the highlight even on hover/selection */
.e-grid .e-row:hover .e-updatedtd,
.e-grid .e-selectionbackground .e-updatedtd {
    background-color: var(--changed-cell-bg) !important;
}

/* Optional: added/edited rows (if you use them) */
.e-grid .e-addedrow .e-rowcell,
.e-grid .e-updatedrow .e-rowcell {
    background-color: #e9fbe4 !important; /* even lighter */
}


/* Read-only columns: cells + any inner content */
.e-grid td.e-rowcell.col-readonly,
.e-grid td.e-rowcell.col-readonly * {
    background-color: var(--bomsync-brand-subtle) !important;
    color: var(--bomsync-text-muted) !important;
}

/* ========== Syncfusion Toast Styling ========== */
/* Position Toast at top-left with 100px offset from top to avoid NavMenu top-bar */
.e-toast-container.e-toast-top-left {
    top: 100px !important;
    left: 20px !important;
    z-index: 2100 !important; /* Above top-bar (z-index: 2000) */
}

/* Ensure toast container has proper z-index regardless of position */
.e-toast-container {
    z-index: 2100 !important; /* Above top-bar (z-index: 2000) */
}

/* Ensure individual toast notifications also have proper z-index */
.e-toast-container .e-toast {
    z-index: 2100 !important;
}

/* ========== Toolbar and Hamburger Button Styling ========== */
/* Main nav-menu hamburger button (in sticky-toolbar) - MUST come after general button rules */
.sticky-toolbar .e-toolbar .e-tbar-btn,
.sticky-toolbar .e-toolbar .e-toolbar-item .e-tbar-btn,
.sticky-toolbar .e-toolbar-items .e-toolbar-item .e-tbar-btn,
.sticky-toolbar .e-toolbar .e-toolbar-item button.e-tbar-btn,
.sticky-toolbar .e-toolbar-items .e-toolbar-item button.e-tbar-btn {
    background: var(--bomsync-surface) !important;
    background-color: var(--bomsync-surface) !important;
    border-color: var(--bomsync-border) !important;
    color: var(--bomsync-text) !important;
}

    .sticky-toolbar .e-toolbar .e-tbar-btn:hover,
    .sticky-toolbar .e-toolbar .e-toolbar-item .e-tbar-btn:hover,
    .sticky-toolbar .e-toolbar-items .e-toolbar-item .e-tbar-btn:hover,
    .sticky-toolbar .e-toolbar .e-toolbar-item button.e-tbar-btn:hover,
    .sticky-toolbar .e-toolbar-items .e-toolbar-item button.e-tbar-btn:hover {
        background: var(--bomsync-brand-subtle) !important;
        background-color: var(--bomsync-brand-subtle) !important;
        border-color: var(--bomsync-border-strong) !important;
    }

    .sticky-toolbar .e-toolbar .e-tbar-btn:active,
    .sticky-toolbar .e-toolbar .e-toolbar-item .e-tbar-btn:active,
    .sticky-toolbar .e-toolbar-items .e-toolbar-item .e-tbar-btn:active,
    .sticky-toolbar .e-toolbar .e-toolbar-item button.e-tbar-btn:active,
    .sticky-toolbar .e-toolbar-items .e-toolbar-item button.e-tbar-btn:active {
        background: var(--bomsync-brand-subtle-2) !important;
        background-color: var(--bomsync-brand-subtle-2) !important;
        border-color: var(--bomsync-border-strong) !important;
    }

/* Grid toolbar buttons (ToolbarHandler buttons) - MUST come after general button rules */
.e-grid .e-toolbar .e-tbar-btn,
.e-grid .e-toolbar .e-toolbar-item .e-tbar-btn,
.e-grid .e-toolbar-items .e-toolbar-item .e-tbar-btn,
.e-grid .e-toolbar .e-toolbar-item button.e-tbar-btn,
.e-grid .e-toolbar-items .e-toolbar-item button.e-tbar-btn {
    background: var(--bomsync-surface) !important;
    background-color: var(--bomsync-surface) !important;
    border-color: var(--bomsync-border) !important;
    color: var(--bomsync-text) !important;
}

    .e-grid .e-toolbar .e-tbar-btn:hover,
    .e-grid .e-toolbar .e-toolbar-item .e-tbar-btn:hover,
    .e-grid .e-toolbar-items .e-toolbar-item .e-tbar-btn:hover,
    .e-grid .e-toolbar .e-toolbar-item button.e-tbar-btn:hover,
    .e-grid .e-toolbar-items .e-toolbar-item button.e-tbar-btn:hover {
        background: var(--bomsync-brand-subtle) !important;
        background-color: var(--bomsync-brand-subtle) !important;
        border-color: var(--bomsync-border-strong) !important;
    }

    .e-grid .e-toolbar .e-tbar-btn:active,
    .e-grid .e-toolbar .e-toolbar-item .e-tbar-btn:active,
    .e-grid .e-toolbar-items .e-toolbar-item .e-tbar-btn:active,
    .e-grid .e-toolbar .e-toolbar-item button.e-tbar-btn:active,
    .e-grid .e-toolbar-items .e-toolbar-item button.e-tbar-btn:active {
        background: var(--bomsync-brand-subtle-2) !important;
        background-color: var(--bomsync-brand-subtle-2) !important;
        border-color: var(--bomsync-border-strong) !important;
    }

/* ========== XeoKit Viewer Toolbar ========== */
.xeokit-sf-toolbar {
    background: rgba(0, 0, 0, 0.7) !important;
    border-radius: 4px;
    padding: 4px;
}

.xeokit-sf-toolbar .e-toolbar-item .e-tbar-btn {
    background: transparent !important;
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
    color: var(--bomsync-on-dark-text) !important;
    margin: 2px;
}

.xeokit-sf-toolbar .e-toolbar-item .e-tbar-btn:hover {
    background: var(--bsx-action) !important;
    border-color: var(--bsx-action) !important;
}

.xeokit-sf-toolbar .e-toolbar-item .e-tbar-btn.e-active {
    background: var(--bsx-action) !important;
    border-color: var(--bsx-action) !important;
}

.xeokit-units-dropdown .e-input-group {
    background: rgba(255, 255, 255, 0.9) !important;
}

.xeokit-units-dropdown .e-input-group {
    background: rgba(255, 255, 255, 0.9) !important;
}

.xeokit-units-dropdown .e-input-group .e-input {
    color: var(--bsx-black) !important;
}

/* ========== XeoKit NavCube Color Styling ========== */
/* NavCube colors are configured in xeokit-viewer.js using CSS variables:
   - Top/Bottom: --bsx-form-bg
   - Left/Right: --bsx-action  
   - Front/Back: --bsx-option
   Note: NavCubePlugin uses WebGL rendering, so colors must be set programmatically
   via the plugin configuration (handled in JavaScript)
*/

/* ========== BIM Model Details page: cards and tabs (no img) ========== */
/* Card: header at top, then content */
.bim-detail-card.e-card,
.bim-detail-card .e-card {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
}

.bim-detail-card .e-card-header {
    flex-shrink: 0 !important;
    background-color: var(--bsx-panel-bg) !important;
    color: var(--bomsync-on-dark-text) !important;
    padding: 0.75rem 1rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.bim-detail-card .e-card-header .e-card-header-caption,
.bim-detail-card .e-card-header .e-card-header-caption .e-card-title {
    color: var(--bomsync-on-dark-text) !important;
    font-weight: 600;
}

/* Header buttons: same style for Edit Images and Add model detail – white font */
.bim-detail-card .e-card-header .e-btn,
.bim-detail-card .e-card-header .e-btn.e-primary {
    background-color: rgb(232 237 245 / 0.18) !important;
    border-color: rgb(232 237 245 / 0.55) !important;
    color: var(--bomsync-on-dark-text) !important;
}

.bim-detail-card .e-card-header .e-btn:hover,
.bim-detail-card .e-card-header .e-btn.e-primary:hover {
    background-color: rgb(232 237 245 / 0.28) !important;
    border-color: rgb(232 237 245 / 0.7) !important;
    color: var(--bomsync-on-dark-text) !important;
}

/* Card body: align content to top of panel (no img) */
.bim-detail-card .e-card-content {
    flex: 1 1 auto !important;
    align-items: flex-start !important;
    padding: 1rem;
    background-color: var(--bsx-form-bg);
}

/* Current Activity tabs: theme colors, no img */
.current-activity-tabs.e-tab {
    background: none;
}

.current-activity-tabs .e-tab-header {
    background-color: var(--bsx-form-bg);
    border-color: var(--bsx-border-100);
}

.current-activity-tabs .e-tab-header .e-tab-item .e-tab-text {
    color: var(--fluent-foreground);
}

.current-activity-tabs .e-content {
    background-color: var(--bsx-form-bg);
    align-items: flex-start;
}
/* =============================================================================
   Solver UI layout & components (from nesting-ui-blazor/bomsync-solver.css body)
   Tokens live in :root above — do not add a second stylesheet link for solver.
   ============================================================================= */

/* ── Page Shell ─────────────────────────────────────────────────── */
.solver-page-shell {
    display: grid;
    grid-template-columns: minmax(0, 1fr) var(--rail-width);
    gap: 0;
    min-width: 0;
    min-height: 0;
    align-items: stretch;
    /* Natural height: nested in #maintext; do not use 100vh here (breaks app chrome + double scroll) */
    height: auto;
    max-height: none;
    overflow: visible;
    background: var(--surface-bg);
    font-family: var(--font-sans);
}

.solver-center {
    display: grid;
    grid-template-rows: var(--header-height) var(--ribbon-height) minmax(0, 1fr) var(--tabs-height);
    min-width: 0;
    overflow: visible;
}

/* 1D guided: stepper+nav+Cut Plan bar+coach in first row, workspace, then bottom tabs (no separate grid row for domain header) */
.solver-center--guided {
    grid-template-rows: auto minmax(0, 1fr) var(--tabs-height);
}

/* Inside app #maintext (scroll viewport): the grid cannot resolve 1fr without a fixed shell height; use auto rows. */
#wrapper.layout #maintext.main-content .solver-center:not(.solver-center--guided) {
    grid-template-rows: var(--header-height) var(--ribbon-height) minmax(10rem, auto) var(--tabs-height);
}
#wrapper.layout #maintext.main-content .solver-center--guided {
    grid-template-rows: auto minmax(10rem, auto) minmax(20rem, min(45dvh, 1fr));
}

/* Early guided steps: workspace row hugs toggle/coach height; tabs row absorbs leftover viewport */
#wrapper.layout #maintext.main-content .solver-center--guided.solver-center--tabs-priority {
    min-height: calc(100dvh - 9.5rem);
    grid-template-rows: auto minmax(0, auto) minmax(28dvh, 1fr) !important;
    align-content: start;
}
#wrapper.layout #maintext.main-content .solver-center--guided.solver-center--tabs-priority:has(> .solver-action-ribbon) {
    min-height: calc(100dvh - 9.5rem);
    grid-template-rows: auto auto minmax(0, auto) minmax(28dvh, 1fr) !important;
    align-content: start;
}
#wrapper.layout #maintext.main-content .solver-center--guided.solver-center--tabs-priority .solver-bottom-tabs {
    min-height: 0;
    height: 100%;
    align-self: stretch;
    display: flex;
    flex-direction: column;
}
#wrapper.layout #maintext.main-content .solver-center--guided.solver-center--tabs-priority .bottom-tab-content {
    flex: 1 1 auto;
    min-height: 0;
    padding: 0.4rem 10px 8px 10px;
}
#wrapper.layout #maintext.main-content .solver-center--guided.solver-center--tabs-priority .bottom-tab-content .e-grid {
    min-height: 12rem;
}
#wrapper.layout #maintext.main-content .solver-center--guided.solver-center--tabs-priority .bottom-tab-bar {
    padding-top: 0;
    padding-bottom: 0;
}

.solver-right-rail {
    display: flex;
    flex-direction: column;
    gap: 0;
    width: var(--rail-width);
    min-width: var(--rail-width);
    min-height: 0;
    align-self: stretch;
    box-sizing: border-box;
    /* Match left column height; fill background; single vertical scroll = #maintext, not a nested rail */
    background: var(--bomsync-page-bg, var(--surface-bg));
    border-left: 1px solid var(--bomsync-border-strong, var(--border-default));
    overflow: visible;
}

.writeback-line {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    min-width: 0;
}
.writeback-user-label {
    font-size: 0.8125rem;
    line-height: 1.3;
    color: var(--text-primary);
}
.writeback-technical {
    font-size: 0.65rem;
    font-family: var(--font-mono);
    color: var(--text-muted);
    word-break: break-all;
}

/* ── Domain Header ──────────────────────────────────────────────── */
.solver-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 20px;
    background: var(--bs-navy);
    color: #fff;
    gap: 16px;
    flex-shrink: 0;
}

.solver-header-left {
    display: flex;
    align-items: center;
    gap: 14px;
    min-width: 0;
}

.solver-header-right {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.domain-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border-radius: 6px;
    padding: 6px 14px;
    font-weight: 800;
    font-size: 14px;
    color: var(--bomsync-on-dark-text);
    white-space: nowrap;
    flex-shrink: 0;
}

.domain-badge .domain-code {
    font-family: var(--font-mono);
    font-size: 17px;
    letter-spacing: 0.02em;
}

.solver-title-block {
    min-width: 0;
}

.solver-screen-title {
    font-size: 16px;
    font-weight: 700;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.2;
}

.solver-context-line {
    font-size: 12px;
    color: rgba(255,255,255,0.6);
    margin-top: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.solver-header-controls {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Drop-down selectors in header */
.header-select {
    background: rgba(255,255,255,0.1);
    border: 1px solid rgba(255,255,255,0.25);
    color: #fff;
    border-radius: 6px;
    padding: 4px 10px;
    font-size: 12px;
    font-family: var(--font-sans);
    cursor: pointer;
    outline: none;
    min-width: 120px;
}

.header-select:hover {
    background: rgba(255,255,255,0.15);
}

/* Status chips in header */
.status-chip {
    border-radius: 4px;
    padding: 3px 10px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.05em;
    font-family: var(--font-mono);
    border: 1px solid transparent;
}

.status-chip.valid   { background: rgba(34,197,94,.2);  color: #4ade80; border-color: rgba(34,197,94,.3); }
.status-chip.warning { background: rgba(245,158,11,.2); color: #fbbf24; border-color: rgba(245,158,11,.3); }
.status-chip.error   { background: rgba(239,68,68,.2);  color: #f87171; border-color: rgba(239,68,68,.3); }
.status-chip.info    { background: rgba(59,130,246,.2); color: #93c5fd; border-color: rgba(59,130,246,.3); }

/* ── Action Ribbon ──────────────────────────────────────────────── */
.solver-action-ribbon {
    display: flex;
    align-items: center;
    padding: 0 16px;
    gap: 8px;
    background: var(--bomsync-elevated-surface);
    border-bottom: 1px solid var(--border-default);
    height: var(--ribbon-height);
    flex-shrink: 0;
}

.ribbon-step {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 12px;
    font-weight: 600;
    color: var(--text-secondary);
    padding: 4px 10px;
    border-radius: 16px;
    background: var(--surface-bg);
    border: 1px solid var(--border-default);
    white-space: nowrap;
}

.ribbon-step.done {
    color: var(--bs-teal);
    background: var(--bs-teal-light);
    border-color: rgba(15,110,86,.3);
}

.ribbon-step .step-check { font-size: 12px; }

.ribbon-divider {
    color: var(--text-muted);
    font-size: 14px;
    flex-shrink: 0;
}

.ribbon-spacer { flex: 1; }

.ribbon-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border-radius: 6px;
    padding: 7px 14px;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    border: none;
    transition: all 0.15s;
    white-space: nowrap;
    font-family: var(--font-sans);
}

.ribbon-btn.primary {
    background: var(--domain-accent, var(--bs-navy));
    color: var(--bomsync-on-dark-text);
    box-shadow: 0 2px 6px rgba(0,0,0,0.18);
}

.ribbon-btn.primary:hover { filter: brightness(1.1); }
.ribbon-btn.primary:disabled { opacity: 0.45; cursor: not-allowed; }

.ribbon-btn.secondary {
    background: var(--surface-bg);
    color: var(--text-secondary);
    border: 1px solid var(--border-default);
}

.ribbon-btn.secondary:hover {
    background: var(--surface-hover);
    color: var(--text-primary);
}

/* ── Workspace ──────────────────────────────────────────────────── */
.solver-workspace {
    overflow: auto;
    padding: 16px 20px;
    background: var(--surface-bg);
    min-width: 0;
}
.solver-workspace--guided {
    padding: 0.4rem 12px 0.5rem 12px;
    border-top: 1px solid var(--border-subtle, #e2e8f0);
}
#wrapper.layout #maintext.main-content .solver-center--tabs-priority .solver-workspace--guided {
    min-height: 0;
    align-self: start;
    width: 100%;
}

/* ── Bottom Tabs ────────────────────────────────────────────────── */
.solver-bottom-tabs {
    border-top: 2px solid var(--border-default);
    background: var(--bomsync-elevated-surface);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    min-width: 0;
    max-width: 100%;
}

.bottom-tab-bar {
    display: flex;
    background: var(--surface-bg);
    border-bottom: 1px solid var(--border-default);
    padding: 0 16px;
    gap: 0;
    flex-shrink: 0;
}

.bottom-tab {
    padding: 8px 16px;
    font-size: 12px;
    font-weight: 600;
    color: var(--text-secondary);
    cursor: pointer;
    border: none;
    background: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    font-family: var(--font-sans);
    transition: all 0.15s;
    white-space: nowrap;
}

.bottom-tab:hover { color: var(--text-primary); }

.bottom-tab.active {
    color: var(--domain-accent, var(--bs-navy));
    border-bottom-color: var(--domain-accent, var(--bs-navy));
    font-weight: 700;
}

.bottom-tab-content {
    flex: 1 1 auto;
    min-width: 0;
    min-height: 0;
    overflow: auto;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding: 12px 16px;
}
/* SfGrid / wide tables: scroll in the bottom tab, not the whole page (when used with col sizing) */
.solver-bottom-tabs .bottom-tab-content .e-grid,
.solver-bottom-tabs .bottom-tab-content .e-grid .e-content {
    min-width: 0;
}
.solver-bottom-tabs .bottom-tab-content .e-content {
    overflow: auto;
}

/* ── Right Rail Sections (nesting 1D–7D): crisp enterprise chrome, domain accent preserved ─── */
.rail-section {
    padding: 14px 16px;
    border-bottom: 1px solid var(--border-default);
}

.rail-section:last-child { border-bottom: none; }

.solver-right-rail .rail-section {
    margin: 0 0.45rem 0.55rem 0.45rem;
    border: 1px solid var(--bomsync-border-strong, var(--border-default));
    border-radius: 10px;
    background: var(--bomsync-elevated-surface);
    box-shadow: var(--bomsync-shadow-md, 0 4px 16px rgb(var(--bomsync-shadow-rgb, 17 27 44) / 0.08));
    padding: 0;
    overflow: hidden;
}
.solver-right-rail .rail-section:last-of-type { margin-bottom: 0.35rem; }

/* Rail section headers: same strategy as .domain-badge — solid --domain-accent + on-dark text */
.solver-right-rail .rail-section-label {
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    margin: 0;
    padding: 11px 14px 10px;
    color: var(--bomsync-on-dark-text);
    border-bottom: 1px solid color-mix(in srgb, var(--domain-accent, var(--bs-navy)) 52%, #000);
    background: var(--domain-accent, var(--bs-navy));
    box-shadow: inset 0 -1px 0 rgb(var(--bomsync-shadow-rgb) / 0.2);
}

.solver-right-rail .rail-section > .rail-section-label ~ * {
    margin-left: 14px;
    margin-right: 14px;
}

.solver-right-rail .rail-section > .rail-section-label + * {
    margin-top: 12px;
}

.solver-right-rail .rail-section > .rail-section-label ~ *:last-child {
    margin-bottom: 14px;
}

.rail-section-label {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--bomsync-text-secondary, var(--text-muted));
    margin-bottom: 8px;
    padding-bottom: 6px;
    border-bottom: 1px solid var(--border-subtle, var(--border-default));
}

/* Compact pass/fail markers (replaces decorative unicode in rail) */
.rail-status {
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 1px;
    flex-shrink: 0;
    margin-top: 0.35em;
}
.rail-status--pass {
    background: var(--status-green, #15803d);
}
.rail-status--fail {
    background: var(--status-red, #b91c1c);
}
.writeback-row .wb-mark {
    margin-top: 0;
    align-self: flex-start;
    margin-top: 0.35rem;
}

/* KPI Cards */
.kpi-card {
    background: var(--surface-bg);
    border: 1px solid var(--bomsync-border-strong, var(--border-default));
    border-left: 3px solid var(--domain-accent, var(--bs-navy));
    border-radius: 4px;
    padding: 9px 11px;
    margin-bottom: 6px;
}

.kpi-card:last-child { margin-bottom: 0; }

/* Nested metric panels: warm inset surface + thin accent frame (canon: no pure white) */
.solver-right-rail .kpi-card {
    background: var(--bomsync-surface);
    border: 1px solid color-mix(in srgb, var(--domain-accent, var(--bs-navy)) 28%, var(--border-default));
    border-radius: 6px;
    padding: 10px 12px;
    box-shadow: 0 1px 2px rgb(var(--bomsync-shadow-rgb, 17 27 44) / 0.04);
}

.kpi-label {
    font-size: 10px;
    color: var(--bomsync-text-secondary, var(--text-label));
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    margin-bottom: 4px;
}

.kpi-value {
    font-size: 19px;
    font-weight: 700;
    color: var(--bomsync-text-primary, var(--text-primary));
    line-height: 1.15;
    font-variant-numeric: tabular-nums;
}

.kpi-unit {
    font-size: 11px;
    font-weight: 500;
    color: var(--bomsync-text-secondary, var(--text-label));
    margin-left: 3px;
}

.kpi-rag {
    margin-top: 6px;
    font-size: 11px;
    color: var(--bomsync-text-secondary, var(--text-label));
    display: flex;
    align-items: center;
    gap: 6px;
    line-height: 1.35;
}

.rag-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    flex-shrink: 0;
}

.rag-dot.green { background: var(--status-green); }
.rag-dot.amber { background: var(--status-amber); }
.rag-dot.red   { background: var(--status-red); }

/* Match ref: small square-ish status chips in rail */
.solver-right-rail .rag-dot {
    width: 8px;
    height: 8px;
    border-radius: 2px;
}

/* Boundary rows */
.boundary-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 8px;
    border-radius: 4px;
    margin-bottom: 3px;
    border: 1px solid var(--border-default);
    background: var(--surface-bg);
}

.boundary-row.hard {
    background: color-mix(in srgb, var(--status-amber, #f59e0b) 8%, var(--bomsync-elevated-surface));
    border-color: color-mix(in srgb, var(--status-amber, #f59e0b) 35%, var(--border-default));
}

.boundary-code {
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--bomsync-text-secondary, var(--text-secondary));
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 150px;
}

.boundary-row.hard .boundary-code { color: var(--text-primary); font-weight: 600; }

.boundary-val {
    font-size: 11px;
    font-weight: 600;
    color: var(--bomsync-text-primary, var(--text-primary));
    white-space: nowrap;
    margin-left: 8px;
    flex-shrink: 0;
    font-variant-numeric: tabular-nums;
}

.boundary-row.hard .boundary-val { color: var(--text-primary); }

/* Goal weight rows */
.goal-weight-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 5px 0;
    border-bottom: 1px solid var(--border-subtle);
}

.goal-weight-row:last-child { border-bottom: none; }

.goal-code {
    font-family: var(--font-mono);
    font-size: 10px;
    color: var(--bomsync-text-secondary, var(--text-secondary));
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 155px;
}

.goal-weight-bar-wrap {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.goal-weight-bar {
    width: 44px;
    height: 3px;
    background: var(--border-default);
    border-radius: 1px;
    overflow: hidden;
}

.goal-weight-fill {
    height: 100%;
    border-radius: 1px;
    background: var(--domain-accent, var(--bs-navy));
}

.goal-weight-val {
    font-size: 11px;
    font-weight: 600;
    color: var(--domain-accent, var(--bs-navy));
    min-width: 30px;
    text-align: right;
    font-variant-numeric: tabular-nums;
}

/* Validator: neutral surface + left accent (enterprise vs full pastel panels) */
.validator-card {
    border-radius: 4px;
    padding: 10px 12px;
    border: 1px solid var(--bomsync-border-strong, var(--border-default));
    background: var(--surface-bg);
}

.validator-card.clear {
    border-left: 3px solid var(--status-green, #15803d);
}

.validator-card.warning {
    border-left: 3px solid var(--status-amber, #d97706);
}

.validator-card.blocked {
    border-left: 3px solid var(--status-red, #b91c1c);
}

.validator-title {
    font-size: 12px;
    font-weight: 700;
    margin-bottom: 8px;
    display: flex;
    align-items: flex-start;
    gap: 8px;
    color: var(--bomsync-text-primary, var(--text-primary));
}

.validator-card.clear   .validator-title { color: var(--bomsync-text-primary, var(--text-primary)); }
.validator-card.warning .validator-title { color: var(--bomsync-text-primary, var(--text-primary)); }
.validator-card.blocked .validator-title { color: var(--bomsync-text-primary, var(--text-primary)); }

.validator-desc {
    font-size: 11px;
    color: var(--bomsync-text-secondary, var(--text-secondary));
    line-height: 1.45;
    display: grid;
    grid-template-columns: 6px 1fr;
    gap: 8px;
    align-items: start;
    margin-bottom: 6px;
}

.validator-desc:last-child { margin-bottom: 0; }

.validator-desc-body {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

.validator-check-label {
    font-weight: 600;
    color: var(--bomsync-text-primary, var(--text-primary));
}

.validator-detail {
    font-size: 10px;
    font-weight: 400;
    color: var(--bomsync-text-muted, var(--text-muted));
    line-height: 1.35;
}

/* Writeback card */
.writeback-card {
    background: var(--surface-bg);
    border-radius: 4px;
    border: 1px solid var(--border-default);
    padding: 10px 11px;
}

.writeback-title {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: 8px;
}

.writeback-row {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: 11px;
    color: var(--text-secondary);
    margin-bottom: 6px;
}

.writeback-row:last-child { margin-bottom: 0; }

/* Identity chain: elevated panel + domain accent (readable on light chrome) */
.identity-chain-card {
    background: var(--bomsync-elevated-surface, var(--surface-card));
    border-radius: 4px;
    padding: 10px 11px;
    border: 1px solid var(--bomsync-border-strong, var(--border-default));
    border-left: 3px solid var(--domain-accent, var(--bs-navy));
}

.identity-chain-label {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--bomsync-text-muted, var(--text-muted));
    margin-bottom: 8px;
}

.identity-chain-flow {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.identity-chain-connector {
    width: 1px;
    min-height: 10px;
    margin: 2px 0 2px 14px;
    background: color-mix(in srgb, var(--domain-accent, var(--bs-navy)) 35%, var(--border-default));
    flex-shrink: 0;
}

.identity-segment {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    min-width: 0;
}

.identity-segment-code {
    font-family: var(--font-mono);
    font-size: 10px;
    font-weight: 700;
    color: var(--domain-accent, var(--bs-navy));
    width: 34px;
    flex-shrink: 0;
    padding-top: 2px;
    letter-spacing: 0.02em;
}

.identity-segment-code--muted {
    color: var(--bomsync-text-muted, var(--text-muted));
}

.identity-segment-val {
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 500;
    color: var(--bomsync-text-primary, var(--text-primary));
    min-width: 0;
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word;
    line-height: 1.4;
}

.identity-segment-arrow {
    color: var(--text-muted);
    font-size: 10px;
}

/* ── Workspace shared components ────────────────────────────────── */

/* Panel card */
.ws-panel {
    background: var(--surface-card);
    border-radius: 10px;
    border: 1px solid var(--border-default);
    overflow: hidden;
    margin-bottom: 14px;
}

.ws-panel:last-child { margin-bottom: 0; }

.ws-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 16px;
    background: var(--surface-bg);
    border-bottom: 1px solid var(--border-default);
}

.ws-panel-title {
    font-size: 13px;
    font-weight: 700;
    color: var(--text-primary);
}

.ws-panel-body {
    padding: 16px;
}

/* Data table */
.data-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
}

.data-table th {
    padding: 7px 10px;
    text-align: left;
    font-size: 11px;
    font-weight: 700;
    color: var(--text-label);
    border-bottom: 1px solid var(--border-default);
    background: var(--surface-bg);
    white-space: nowrap;
}

.data-table td {
    padding: 7px 10px;
    color: var(--text-primary);
    border-bottom: 1px solid var(--border-subtle);
}

.data-table tr:last-child td { border-bottom: none; }
.data-table tr:hover td { background: var(--surface-hover); }
.data-table .td-mono { font-family: var(--font-mono); font-size: 11px; }

/* Pill / Tag */
.tag {
    display: inline-block;
    border-radius: 4px;
    padding: 2px 8px;
    font-size: 10px;
    font-weight: 700;
    border: 1px solid;
}

.tag.blue   { background: var(--bs-blue-light);   color: #1D4ED8; border-color: #BFDBFE; }
.tag.teal   { background: var(--bs-teal-light);   color: var(--bs-teal); border-color: rgba(15,110,86,.3); }
.tag.amber  { background: var(--bs-amber-light);  color: var(--bs-amber); border-color: #FDE68A; }
.tag.coral  { background: var(--bs-coral-light);  color: var(--bs-coral); border-color: #FCA5A5; }
.tag.purple { background: var(--bs-purple-light); color: var(--bs-purple); border-color: #E9D5FF; }
.tag.green  { background: var(--bs-green-light);  color: var(--bs-green); border-color: #BBF7D0; }
.tag.navy   { background: var(--bs-blue-light);   color: var(--bs-navy); border-color: #BFDBFE; }

/* PRK badge */
.prk-badge {
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--bs-navy);
    background: var(--bs-blue-light);
    border-radius: 4px;
    padding: 2px 7px;
}

/* DC badge */
.dc-badge {
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--bs-amber);
    background: var(--bs-amber-light);
    border-radius: 4px;
    padding: 2px 7px;
}

/* Progress bar */
.progress-wrap {
    margin-bottom: 10px;
}

.progress-label-row {
    display: flex;
    justify-content: space-between;
    margin-bottom: 4px;
}

.progress-label-text {
    font-size: 11px;
    color: var(--text-secondary);
    font-weight: 600;
}

.progress-label-val {
    font-size: 11px;
    font-family: var(--font-mono);
    color: var(--text-primary);
}

.progress-bar-track {
    height: 8px;
    background: var(--border-default);
    border-radius: 4px;
    overflow: hidden;
}

.progress-bar-fill {
    height: 100%;
    border-radius: 4px;
    transition: width 0.4s ease;
}

.progress-bar-fill.green  { background: var(--status-green); }
.progress-bar-fill.amber  { background: var(--status-amber); }
.progress-bar-fill.red    { background: var(--status-red); }
.progress-bar-fill.domain { background: var(--domain-accent, var(--bs-navy)); }

/* Summary stat row */
.stat-row {
    display: flex;
    justify-content: space-between;
    padding: 5px 0;
    border-bottom: 1px solid var(--border-subtle);
    font-size: 12px;
}

.stat-row:last-child { border-bottom: none; }
.stat-label { color: var(--text-secondary); }
.stat-val   { font-weight: 600; color: var(--text-primary); font-family: var(--font-mono); }

/* ── Cut Strip (1D) ─────────────────────────────────────────────── */
.cut-strip-container {
    background: var(--surface-card);
    border-radius: 10px;
    border: 1px solid var(--border-default);
    padding: 14px 16px;
    margin-bottom: 12px;
    cursor: pointer;
    transition: border-color 0.15s, box-shadow 0.15s;
}

.cut-strip-container.selected {
    border-color: var(--domain-accent);
    box-shadow: 0 0 0 3px rgba(42,111,171,0.15);
}

.cut-strip-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}

.cut-strip-meta-left {
    display: flex;
    align-items: center;
    gap: 10px;
}

.cut-strip-bar {
    display: flex;
    height: 38px;
    border-radius: 6px;
    overflow: hidden;
    border: 1px solid var(--border-default);
}

.cut-strip-piece {
    display: flex;
    align-items: center;
    justify-content: center;
    border-right: 2px solid rgba(255,255,255,0.4);
    overflow: hidden;
    position: relative;
}

.cut-strip-piece span {
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    font-family: var(--font-mono);
    white-space: nowrap;
    padding: 0 6px;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

.cut-strip-waste {
    flex: 1;
    min-width: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #FEE2E2;
}

.cut-strip-waste span {
    font-size: 10px;
    font-weight: 700;
    color: #EF4444;
    font-family: var(--font-mono);
    white-space: nowrap;
}

.cut-strip-waste.reusable { background: #FEF3C7; }
.cut-strip-waste.reusable span { color: #92400E; }

.cut-strip-legend {
    display: flex;
    gap: 12px;
    margin-top: 8px;
    flex-wrap: wrap;
}

.legend-item {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    color: var(--text-secondary);
}

.legend-dot {
    width: 8px;
    height: 8px;
    border-radius: 2px;
    flex-shrink: 0;
}

/* ── Sheet SVG wrapper (2D) ─────────────────────────────────────── */
.sheet-canvas-wrap {
    background: var(--surface-card);
    border-radius: 10px;
    border: 1px solid var(--border-default);
    padding: 14px 16px;
    margin-bottom: 14px;
}

.sheet-canvas-label {
    font-size: 11px;
    color: var(--text-muted);
    font-weight: 600;
    margin-bottom: 10px;
}

/* ── Vendor cards (5D) ──────────────────────────────────────────── */
.vendor-card {
    background: var(--surface-card);
    border-radius: 10px;
    padding: 16px;
    border: 2px solid var(--border-default);
    margin-bottom: 12px;
    transition: border-color 0.15s, box-shadow 0.15s;
}

.vendor-card.selected {
    border-color: var(--bs-amber);
    box-shadow: 0 0 0 3px rgba(201,146,26,.12);
}

.vendor-metric-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
    margin-top: 12px;
}

.vendor-metric {
    background: var(--surface-bg);
    border-radius: 8px;
    padding: 9px 11px;
    border: 1px solid var(--border-default);
}

.vendor-metric.ok   { border-color: #BBF7D0; }
.vendor-metric.warn { border-color: #FDE68A; }

.vendor-metric-label {
    font-size: 10px;
    color: var(--text-label);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 3px;
}

.vendor-metric-val {
    font-size: 14px;
    font-weight: 800;
    font-family: var(--font-mono);
}

.vendor-metric.ok   .vendor-metric-val { color: #166534; }
.vendor-metric.warn .vendor-metric-val { color: #92400E; }

/* ── Action cards (7D) ──────────────────────────────────────────── */
.action-card {
    background: var(--surface-card);
    border-radius: 10px;
    padding: 15px;
    border: 1px solid var(--border-default);
    border-left: 4px solid var(--border-default);
    margin-bottom: 10px;
    transition: opacity 0.15s;
}

.action-card.critical { border-left-color: #DC2626; }
.action-card.high     { border-left-color: #D97706; }
.action-card.standard { border-left-color: #2563EB; }
.action-card.actioned { opacity: 0.55; }

.action-card-name {
    font-size: 14px;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 6px;
}

.action-card-meta {
    display: flex;
    gap: 10px;
    align-items: center;
    flex-wrap: wrap;
    margin-bottom: 8px;
}

.action-priority { font-weight: 700; font-size: 11px; text-transform: uppercase; }
.action-priority.critical { color: #DC2626; }
.action-priority.high     { color: #D97706; }
.action-priority.standard { color: #2563EB; }

.goal-tag-list { display: flex; gap: 6px; flex-wrap: wrap; }

.goal-tag {
    font-size: 10px;
    font-family: var(--font-mono);
    color: var(--bs-teal);
    background: rgba(15,110,86,.09);
    border: 1px solid rgba(15,110,86,.25);
    border-radius: 4px;
    padding: 2px 7px;
}

.action-btn-primary {
    border-radius: 7px;
    padding: 7px 14px;
    font-weight: 700;
    font-size: 12px;
    cursor: pointer;
    border: none;
    color: #fff;
    font-family: var(--font-sans);
    white-space: nowrap;
}

.action-btn-primary.replace { background: var(--bs-coral); }
.action-btn-primary.ppm     { background: var(--bs-teal); }
.action-btn-primary.review  { background: var(--bs-amber); }
.action-btn-primary.inspect { background: var(--bs-blue); }

/* ── Misc helpers ───────────────────────────────────────────────── */
.mono { font-family: var(--font-mono); }
.text-muted  { color: var(--text-muted); }
.text-label  { color: var(--text-label); }
.fw-800 { font-weight: 800; }
.fw-700 { font-weight: 700; }
.fs-11 { font-size: 11px; }
.fs-12 { font-size: 12px; }
.fs-13 { font-size: 13px; }
.d-flex { display: flex; }
.align-center { align-items: center; }
.gap-8 { gap: 8px; }
.gap-12 { gap: 12px; }
.mt-8 { margin-top: 8px; }
.mb-8 { margin-bottom: 8px; }
.mb-0 { margin-bottom: 0; }

/* ── Responsive collapse ────────────────────────────────────────── */
@media (max-width: 1100px) {
    .solver-page-shell {
        grid-template-columns: 1fr;
        height: auto;
        overflow: visible;
    }
    .solver-right-rail {
        border-left: none;
        border-top: 1px solid var(--border-default);
        width: 100%;
    }
    .solver-center {
        grid-template-rows: auto auto auto auto;
        height: auto;
    }
    .solver-workspace { overflow: visible; }
    .solver-bottom-tabs { height: auto; }
}