/* bomsync-theme.css (Load after Fluent2.css) */ /* ── Webfonts (subset on disk — see wwwroot/fonts/README-ibm-plex-subset.md) ───────────────── */ /* BOMSync wordmark only — paired with `.brand` in layout.css (not hero titles). */ @font-face { font-family: "vipnagorgialla"; src: url("../fonts/vipnagorgialla_rg.otf") format("opentype"); font-weight: 400; font-style: normal; font-display: swap; } /* IBM Plex Sans — hero title: Bold = 700 (closest to prior heavy header without bubbly display faces). */ @font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/ibm-plex-sans/IBMPlexSans-Bold.woff2") format("woff2"); } /* * Optional: SemiBold (600) — add IBMPlexSans-SemiBold.woff2 + second @font-face (weight 600), then set: * :root { --bomsync-hero-title-weight: 600; } */ :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-primary: var(--bomsync-text); /* alias — many surfaces reference -primary */ --bomsync-text-secondary: #3a4560; --bomsync-text-muted: #5c6d84; /* darkened from #74869c for cell/drawer contrast */ --bomsync-on-dark-text: #e8edf5; /* Hero H1: IBM Plex Bold = 700 (tune with --bomsync-hero-title-weight if you add more @font-face weights). */ --bomsync-hero-title-weight: 700; /* * Page hero band minimum height (PATH step stability). * Base covers eyebrow + title + one sub/pill row; with-footer covers common HeroFooter lanes. * Prefer these tokens over page-local magic numbers. */ --bomsync-page-hero-min-height: 9rem; /* 144px — title band without lanes */ --bomsync-page-hero-min-height-with-footer: 12.75rem; /* 204px — title band + HeroFooter */ --bomsync-page-hero-min-height-mobile: 7.5rem; --bomsync-page-hero-min-height-with-footer-mobile: 11rem; /* Shared breadcrumb typography (BomsyncPageBreadcrumbs — not Syncfusion button chrome) */ --bomsync-breadcrumb-font-family: var(--font-sans, 'Segoe UI', system-ui, -apple-system, sans-serif); --bomsync-breadcrumb-font-size: 0.875rem; --bomsync-breadcrumb-line-height: 1.35; --bomsync-breadcrumb-font-weight: 500; --bomsync-breadcrumb-font-weight-current: 600; --bomsync-breadcrumb-gap: 0.35rem 0.5rem; --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 */ /* Confirmation / commit action (teal-green — token_green; complements blue; NOT for hero chrome) */ --bomsync-confirm: #125a60; --bomsync-confirm-gradient-start: #16656d; --bomsync-confirm-gradient-end: #0f4e55; --bomsync-confirm-hover: #19808a; --bomsync-confirm-active: #16656d; --bomsync-confirm-fg: #ffffff; --bomsync-confirm-border: #228792; --bomsync-confirm-border-highlight: #6ec6cd; --bomsync-confirm-light: #e0f2f3; --bomsync-confirm-light-fg: #0f4e55; --bomsync-confirm-shadow-rgb: 18 90 96; /* Shared action-button chrome (hero actions + confirm buttons) */ --bomsync-action-btn-radius: 10px; --bomsync-action-btn-padding: 9px 16px; --bomsync-action-btn-min-height: 40px; --bomsync-action-btn-gap: 8px; --bomsync-action-btn-font-size: 0.88rem; --bomsync-action-btn-line-height: 1.2; /* Compact hero-style actions inside navy panel headers (fits 44px header band) */ --bomsync-panel-header-action-btn-radius: 8px; --bomsync-panel-header-action-btn-padding: 4px 10px; --bomsync-panel-header-action-btn-min-height: 26px; --bomsync-panel-header-action-btn-gap: 6px; --bomsync-panel-header-action-btn-font-size: 0.82rem; --bomsync-panel-header-action-btn-line-height: 1.15; /* Glass chrome (hero badges, panel header actions, grid row actions) */ --bomsync-glass-border: rgb(255 255 255 / 0.35); --bomsync-glass-border-strong: rgb(255 255 255 / 0.42); --bomsync-glass-border-highlight: rgb(106 215 255 / 0.45); --bomsync-glass-bg: rgb(255 255 255 / 0.14); --bomsync-glass-bg-hover: rgb(255 255 255 / 0.22); /* ── Surface chrome (4-tier model — approved /manage/project-orders 2026-08-15) ── */ /* Panel headers — 3-stop dark-grey → light-grey → dark-grey (return to dark on the right). Geoffrey 2026-10-11; CNC File Checker language. Not 2-stop dark→light only. */ --bomsync-chrome-grad: linear-gradient(105deg, #0F1624 0%, #5A6F88 48%, #0F1624 100%); --bomsync-chrome-grad-cap: linear-gradient(105deg, #121C2C 0%, #6A7F98 50%, #121C2C 100%); /* Work surface chrome — teal-blue; same 3-stop return-to-dark shape */ --bomsync-chrome-grad-work: linear-gradient(105deg, #013040 0%, #017A96 50%, #013040 100%); --bomsync-chrome-fg: #F2F7FB; --bomsync-chrome-fg-muted: #A8BDD0; --bomsync-chrome-eyebrow: #4EC3EC; --bomsync-chrome-work-icon: #7ED4E8; --bomsync-chrome-work-rule: #015F78; --bomsync-chrome-work-btn-bg: rgb(126 212 232 / 0.28); --bomsync-chrome-work-btn-bg-hov: rgb(126 212 232 / 0.42); --bomsync-chrome-work-btn-border: rgb(150 220 236 / 0.62); --bomsync-satellite-bg: #E7ECF2; --bomsync-satellite-rule: #BCCBDA; --bomsync-satellite-rule-w: 3px; --bomsync-surface-panel: #F9FBFD; --bomsync-surface-well: #FCFDFE; --bomsync-surface-sunken: #E7ECF2; --bomsync-state-neutral-bd: #BCCBDA; --bomsync-state-neutral-bg: #F9FBFD; --bomsync-state-healthy-bd: #2E9E76; --bomsync-state-healthy-bg: #F1FAF6; /* SfToast success — Pastel Green (status-chip family; not solid forest #0f7b4c) */ --bomsync-toast-success-bg: #E5F4EC; --bomsync-toast-success-fg: #1B5E3A; --bomsync-toast-success-border: #A8D4B8; /* SfToast danger — soft pastel coral on Light (Dark overrides to translucent in theme-preview) */ --bomsync-toast-danger-bg: #F8E4E0; --bomsync-toast-danger-fg: #8B2E22; --bomsync-toast-danger-border: #E2B0A6; --bomsync-success: #1B5E3A; --bomsync-state-attention-bd: #E8A33D; --bomsync-state-attention-bg: #FDF8EF; --bomsync-state-blocked-bd: #B04832; --bomsync-state-blocked-bg: #F3DDD7; /* Library / subordinate accordion (slate — never navy/black; see Surface Chrome §6) */ --bomsync-accordion-bg: linear-gradient(105deg, #E9EFF5 0%, #DEE7F1 100%); --bomsync-accordion-bg-hover: linear-gradient(105deg, #E1E9F1 0%, #D5E0EC 100%); --bomsync-accordion-fg: #123350; --bomsync-accordion-icon: #2E6191; --bomsync-accordion-rule: #00A8E1; --bomsync-accordion-rule-w: 3px; --bomsync-cyan-500: #00A8E1; /* Spec aliases (docs / Cursor skills may use --bs-chrome-*) */ --bs-chrome-grad: var(--bomsync-chrome-grad); --bs-chrome-grad-cap: var(--bomsync-chrome-grad-cap); --bs-chrome-grad-work: var(--bomsync-chrome-grad-work); --bs-chrome-fg: var(--bomsync-chrome-fg); --bs-chrome-work-icon: var(--bomsync-chrome-work-icon); --bs-chrome-work-btn-bg: var(--bomsync-chrome-work-btn-bg); --bs-chrome-work-btn-bg-hov: var(--bomsync-chrome-work-btn-bg-hov); --bs-chrome-work-btn-border: var(--bomsync-chrome-work-btn-border); --bs-satellite-bg: var(--bomsync-satellite-bg); --bs-satellite-rule: var(--bomsync-satellite-rule); --bs-surface-well: var(--bomsync-surface-well); --bs-surface-panel: var(--bomsync-surface-panel); --bs-state-healthy-bd: var(--bomsync-state-healthy-bd); --bs-state-healthy-bg: var(--bomsync-state-healthy-bg); --bs-state-attention-bd: var(--bomsync-state-attention-bd); --bs-state-attention-bg: var(--bomsync-state-attention-bg); --bs-state-blocked-bd: var(--bomsync-state-blocked-bd); --bs-state-blocked-bg: var(--bomsync-state-blocked-bg); --bs-accordion-bg: var(--bomsync-accordion-bg); --bs-accordion-bg-hover: var(--bomsync-accordion-bg-hover); --bs-accordion-fg: var(--bomsync-accordion-fg); --bs-accordion-icon: var(--bomsync-accordion-icon); --bs-accordion-rule: var(--bomsync-accordion-rule); --bs-accordion-rule-w: var(--bomsync-accordion-rule-w); --bs-cyan-500: var(--bomsync-cyan-500); --bs-border: var(--bomsync-border); --bomsync-hero-badge-bg: rgb(106 215 255 / 0.14); --bomsync-hero-badge-border: rgb(106 215 255 / 0.28); --bomsync-hero-badge-fg: #a8d8f0; /* SfGrid row badge — teal-green glass on light rows (confirm palette, not navy action) */ --bomsync-grid-row-badge-bg: rgb(34 135 146 / 0.14); --bomsync-grid-row-badge-border: rgb(34 135 146 / 0.4); --bomsync-grid-row-badge-highlight: rgb(110 198 205 / 0.38); /* Readable teal on glass View (not near-black confirm); Edit uses --primary + on-dark white */ --bomsync-grid-row-badge-fg: #147a82; --bomsync-grid-row-badge-fg-hover: #0f929c; /* Page command bar (between hero and first panel) */ --bomsync-page-command-btn-radius: 10px; --bomsync-page-command-btn-padding: 7px 14px; --bomsync-page-command-btn-min-height: 36px; --bomsync-page-command-btn-gap: 8px; --bomsync-page-command-btn-font-size: 0.86rem; --bomsync-page-command-btn-line-height: 1.2; /* SfGrid compact row actions */ --bomsync-grid-row-action-radius: 5px; --bomsync-grid-row-action-padding: 3px 8px; --bomsync-grid-row-action-min-height: 24px; --bomsync-grid-row-action-gap: 4px; --bomsync-grid-row-action-font-size: 0.78rem; --bomsync-grid-row-action-line-height: 1.15; --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); /* SfGrid / TreeGrid headers — tweak --bomsync-grid-header-bg to recolor all grids app-wide. Full Light/Dark grid chrome contract: css/bomsync-sfgrid.css (selection, frozen, pager, filter, captions). 2026-10-10: slight cool-deeper blue tone (#285F8A) vs prior #2F6690. */ --bomsync-grid-header-bg: #285F8A; --bomsync-grid-header-fg: #F5F7FB; --bomsync-grid-header-border: rgb(255 255 255 / 0.18); /* Read-only column wash — must stay distinct from alt-row (see bomsync-sfgrid.css) */ --bomsync-sfgrid-readonly-bg: #e6edf7; --bomsync-sfgrid-readonly-fg: var(--bomsync-text-secondary); --grid-header-bg: var(--bomsync-grid-header-bg); /* legacy alias */ --grid-header-fg: var(--bomsync-grid-header-fg); --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 */ /* Semantic badges — Finance/MRP staging (text + shape; never colour alone) */ --bomsync-basis-op: #2E5F7A; --bomsync-basis-op-soft: #E3EFF5; --bomsync-basis-fin: #8A6216; --bomsync-basis-fin-soft: #FBF1DC; --bomsync-basis-rec: #5B3E7A; --bomsync-basis-rec-soft: #F0EAF7; --bomsync-own-plan: #2E5F7A; --bomsync-own-plan-soft: #E3EFF5; --bomsync-own-oper: #4A5568; --bomsync-own-oper-soft: #EBEEF2; --bomsync-own-erp: #8A6216; --bomsync-own-erp-soft: #FBF1DC; --bomsync-state-live: #2E7D5B; --bomsync-state-live-soft: #E6F3EC; --bomsync-state-asof: #5A6473; --bomsync-state-asof-soft: #EBEEF2; --bomsync-state-plan: #2E5F7A; --bomsync-state-plan-soft: #E3EFF5; --bomsync-state-scen: #5B3E7A; --bomsync-state-scen-soft: #F0EAF7; --bomsync-prov-exact: #1F6B4A; --bomsync-prov-exact-soft: #E4F2EB; --bomsync-prov-solver: #1E4557; --bomsync-prov-solver-soft: #DDE9EF; --bomsync-prov-fast: #9A5B10; --bomsync-prov-fast-soft: #FCEFDD; --bomsync-prov-fcst: #5B3E7A; --bomsync-prov-fcst-soft: #F0EAF7; --bomsync-prov-est: #7C6A45; --bomsync-prov-est-soft: #F2EEE4; --bomsync-prov-manual: #4A5568; --bomsync-prov-manual-soft: #EBEEF2; --bomsync-exchange-ok: #2E7D5B; --bomsync-exchange-ok-soft: #E6F3EC; --bomsync-exchange-warn: #9A5B10; --bomsync-exchange-warn-soft: #FCEFDD; --bomsync-exchange-fail: #B94A3E; --bomsync-exchange-fail-soft: #FBE9E6; --bomsync-exchange-queued: #2E5F7A; --bomsync-exchange-queued-soft: #E3EFF5; /* 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: #B89B5A; --bs-amber-light: #F5F0E3; --bs-coral: #A87B6E; --bs-coral-light: #F4ECE9; --bs-purple: #7A7194; --bs-purple-light: #EFECF3; --bs-green: #5A8A6A; --bs-green-light: #E8F0EB; --bs-blue: #2A6FAB; --bs-blue-light: #DBEAFE; --domain-1d: #2A6FAB; --domain-2d: #0F6E56; /* 3D–7D: softened chroma for long solver sessions (still distinct per dimension) */ --domain-3d: #A87B6E; --domain-4d: #7A7194; --domain-5d: #B89B5A; --domain-6d: #5A8A6A; --domain-7d: #5A8F84; --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; /* ── Workspace domain accent colors ──────────────────────────────────────── */ /* Two tokens per domain: primary accent + light background tint. */ /* primary → border-top on cards, icon fills, active nav dots, progress */ /* light → icon circle bg, card hover wash, badge/pill fills */ /* NOTE: --domain-1d … --domain-7d (above) are SOLVER DIMENSION colors */ /* (nesting algorithm families), not workflow domains. */ --domain-rfq: #2F6690; /* RFQ, tendering, bid packages */ --domain-rfq-light: #E3EEF7; --domain-contracts: #415A77; /* Contracts, executed agreements */ --domain-contracts-light: #E4EAF5; --domain-po: #1A4A7A; /* Purchase orders, execution */ --domain-po-light: #DBEAFE; --domain-submittals: #0F6E56; /* Submittals, construction docs */ --domain-submittals-light: #E0F2F0; --domain-receiving: #2A7A4F; /* Receiving, fulfillment, inbound */ --domain-receiving-light: #D4F4E6; --domain-demand: #5C3A8C; /* Demand, BOM, quantity planning */ --domain-demand-light: #F3EEFF; --domain-qualification: #2A9D8F; /* Qualification gates, vendor vetting */ --domain-qualification-light: #D5F0EC; --domain-comms: #E09A1E; /* Communications, audit trail */ --domain-comms-light: #FEF3C7; --domain-documents: #3A5A8C; /* Documents, files, evidence */ --domain-documents-light: #DBEAFE; --domain-analytics: #1A6E2A; /* Analytics, reports, dashboards */ --domain-analytics-light: #DCFCE7; --domain-projects: #2F5485; /* Projects, programs */ --domain-projects-light: #E8EEF8; --domain-bim: #0A5C7A; /* BIM, models, IFC */ --domain-bim-light: #E0F2F7; --domain-billing: #D64545; /* Billing, finance, payments */ --domain-billing-light: #FEE2D8; --domain-operations: #C96A1A; /* Operations, ops queue, solver */ --domain-operations-light: #FEF0E7; --domain-commercial: #1E3A6A; /* Commercial hub, workspace root */ --domain-commercial-light: #EEF2F9; } /* Nesting 1D guided SfStepper (horizontal scroll on narrow viewports) */ .nesting-guided-stepper { padding: 0; min-width: 0; overflow: hidden; margin: 0 0 0.85rem; background: var(--bomsync-elevated-surface); border: 1px solid var(--bomsync-border-strong, var(--border-default)); border-radius: 12px; box-shadow: var(--bomsync-shadow-sm, 0 1px 3px rgb(var(--bomsync-shadow-rgb, 17 27 44) / 0.06)); } .nesting-guided-stepper .e-stepper { min-width: 0; width: 100%; max-width: 100%; border-bottom: 1px solid var(--border-subtle); padding: 0.45rem 0.75rem 0.15rem; background: color-mix(in srgb, var(--domain-accent, var(--domain-1d)) 6%, var(--bomsync-elevated-surface)); } .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-nav .bms-btn { min-height: 32px; padding-inline: 0.85rem; } .nesting-guided-inject { min-width: 0; } /* Domain ribbon sits inside the guided shell — keep flush with panel edges */ .nesting-guided-inject .solver-header { border-radius: 0; margin: 0; border-left: none; border-right: none; } .nesting-guided-coach { padding: 0.85rem 1rem 1rem 1rem; margin: 0; background: var(--bomsync-elevated-surface); border-top: 1px solid var(--border-subtle); border-left: 4px solid var(--domain-accent, var(--domain-1d)); box-shadow: none; } .nesting-guided-coach-title { font-weight: 700; font-size: 1rem; line-height: 1.35; color: color-mix(in srgb, var(--domain-accent, var(--domain-1d)) 55%, var(--bomsync-text-primary, #1B3A5C)); margin-bottom: 0.35rem; } /* Guided step tips — app satellite elevated geometry; #D accent replaces navy/teal chrome */ .nesting-guided-step-card, .nesting-guided-panel { max-width: 52rem; } .nesting-guided-panel { padding: 0.15rem 0.1rem 0.35rem; } .nesting-guided-step-card { background: var(--bomsync-elevated-surface); border: 1px solid var(--bomsync-border-strong, var(--border-default)); border-top: 3px solid var(--domain-accent, var(--domain-1d)); border-radius: 12px; box-shadow: var(--bomsync-shadow-sm, 0 1px 3px rgb(var(--bomsync-shadow-rgb, 17 27 44) / 0.06)); padding: 0.95rem 1.1rem 1.05rem; margin: 0 0 0.75rem; } .nesting-guided-step-card > h3, .nesting-guided-step-card > .h5 { margin: 0 0 0.5rem; font-size: 1rem; font-weight: 700; line-height: 1.35; color: var(--bomsync-text-primary, var(--text-primary)); } .nesting-guided-step-card--tight, .solver-center--tabs-priority .nesting-guided-panel { padding-top: 0.1rem; margin-bottom: 0; } .nesting-guided-step-card--tight { padding: 0.75rem 0.95rem 0.85rem; } /* Welcome strip above 1D–7D shells — satellite elevated + dimension tint */ .nesting-guided-welcome { background: color-mix(in srgb, var(--domain-accent, var(--domain-1d)) 10%, var(--bomsync-elevated-surface)) !important; color: var(--bomsync-text-primary, var(--text-primary)) !important; border: 1px solid var(--bomsync-border-strong, var(--border-default)) !important; border-left: 4px solid var(--domain-accent, var(--domain-1d)) !important; border-radius: 12px !important; box-shadow: var(--bomsync-shadow-sm); padding: 0.85rem 1rem !important; } .nesting-guided-welcome .fw-700, .nesting-guided-welcome .fs-5 { font-size: 1.05rem !important; font-weight: 700 !important; line-height: 1.45 !important; color: color-mix(in srgb, var(--domain-accent, var(--domain-1d)) 48%, var(--bomsync-text-primary, #1B3A5C)) !important; } .nesting-ws-chrome-top-banner { min-width: 0; } .nesting-ws-chrome-top-banner .alert { border-radius: 12px; } /* ========== 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); } /* Coach / info panels — cool navy-teal surface (not Bootstrap baby-blue alert-info wash) */ .bomsync-coach-panel { padding: 0.65rem 0.9rem; margin: 0 0 0.75rem; border-radius: 10px; border: 1px solid var(--bomsync-border-strong, #bcc6da); background: linear-gradient(135deg, rgb(1 95 120 / 0.06) 0%, transparent 55%), var(--bomsync-elevated-surface, #fbfcff); color: var(--bomsync-text, #0f1520); box-shadow: inset 3px 0 0 var(--bomsync-chrome-work-rule, #015F78); font-size: 0.9rem; line-height: 1.5; } .bomsync-coach-panel .text-muted, .bomsync-coach-panel .form-label { color: var(--bomsync-text-secondary, #3a4560); } /* ========== Buttons ========== */ /* Primary → Action (excludes SfRibbon — see bomsync-ribbon.css) */ .e-btn.e-primary:not(:is(.bomsync-ribbon-shell *)), .e-css.e-btn.e-primary:not(:is(.bomsync-ribbon-shell *)) { 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:not(:is(.bomsync-ribbon-shell *)):hover { background: #295C84 !important; border-color: #295C84 !important; } .e-btn.e-primary:not(:is(.bomsync-ribbon-shell *)):active, .e-btn.e-primary:not(:is(.bomsync-ribbon-shell *)).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; } /* =============================== */ /* SfGrid header cells (token-driven — do not hardcode colors here) */ /* =============================== */ .e-grid .e-headercell, .e-treegrid .e-headercell { background-color: var(--bomsync-grid-header-bg); color: var(--bomsync-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:not(.bomsync-grid-row-action-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:not(.bomsync-grid-row-action-btn):hover { background: #295C84 !important; /* Darker on hover */ border-color: #295C84 !important; color: #fff !important; } .e-grid .e-rowcell .e-btn:not(.bomsync-grid-row-action-btn):active { background: #244E73 !important; /* Even darker when active */ border-color: #244E73 !important; color: #fff !important; } /* BOMSync action taxonomy: Action | Option | Info. Use these on dense grids and command rows where Syncfusion outline buttons can otherwise inherit low-contrast text. */ .e-btn.bomsync-btn-action, .e-control.e-btn.bomsync-btn-action, .e-grid .e-rowcell .e-btn.bomsync-btn-action { background: var(--domain-operations) !important; border: 1px solid var(--bomsync-border-strong) !important; color: var(--bomsync-on-dark-text) !important; font-weight: 600 !important; box-shadow: 0 1px 2px rgb(var(--bomsync-shadow-rgb) / 0.16) !important; } .e-btn.bomsync-btn-action:hover, .e-control.e-btn.bomsync-btn-action:hover, .e-grid .e-rowcell .e-btn.bomsync-btn-action:hover { background: #b85f17 !important; border-color: #d7dde8 !important; color: var(--bomsync-on-dark-text) !important; } .e-btn.bomsync-btn-option, .e-control.e-btn.bomsync-btn-option, .e-grid .e-rowcell .e-btn.bomsync-btn-option, .e-btn.e-outline.bomsync-btn-option, .e-control.e-btn.e-outline.bomsync-btn-option { background: var(--bsx-option) !important; border: 1px solid var(--bomsync-border-strong) !important; /* Lighter label on dark option fill (was muddy on-dark grey) */ color: #F4F7FB !important; font-weight: 600 !important; box-shadow: 0 1px 2px rgb(var(--bomsync-shadow-rgb) / 0.14) !important; } .e-btn.bomsync-btn-option .e-btn-content, .e-control.e-btn.bomsync-btn-option .e-btn-content, .e-btn.e-outline.bomsync-btn-option .e-btn-content, .e-btn.bomsync-btn-option .e-btn-icon, .e-control.e-btn.bomsync-btn-option .e-btn-icon { color: #F4F7FB !important; } .e-btn.bomsync-btn-option:hover, .e-control.e-btn.bomsync-btn-option:hover, .e-grid .e-rowcell .e-btn.bomsync-btn-option:hover, .e-btn.e-outline.bomsync-btn-option:hover { background: #334966 !important; border-color: #d7dde8 !important; color: #FFFFFF !important; } .e-btn.bomsync-btn-option:hover .e-btn-content, .e-control.e-btn.bomsync-btn-option:hover .e-btn-content, .e-btn.e-outline.bomsync-btn-option:hover .e-btn-content { color: #FFFFFF !important; } .e-btn.bomsync-btn-info, .e-control.e-btn.bomsync-btn-info, .e-grid .e-rowcell .e-btn.bomsync-btn-info { background: var(--bsx-action) !important; border: 1px solid var(--bomsync-border-strong) !important; color: var(--bomsync-on-dark-text) !important; font-weight: 600 !important; box-shadow: 0 1px 2px rgb(var(--bomsync-shadow-rgb) / 0.14) !important; } .e-btn.bomsync-btn-info:hover, .e-control.e-btn.bomsync-btn-info:hover, .e-grid .e-rowcell .e-btn.bomsync-btn-info:hover { background: #295c84 !important; border-color: #d7dde8 !important; color: var(--bomsync-on-dark-text) !important; } .e-btn.bomsync-btn-action:focus-visible, .e-btn.bomsync-btn-option:focus-visible, .e-btn.bomsync-btn-info:focus-visible, .e-btn.bomsync-btn-confirm:focus-visible, .e-btn.bomsync-btn-confirm-outline:focus-visible { outline: 2px solid var(--bs-border-accent) !important; outline-offset: 2px !important; } .e-btn.bomsync-btn-confirm:focus-visible, .e-control.e-btn.bomsync-btn-confirm:focus-visible, .e-grid .e-rowcell .e-btn.bomsync-btn-confirm:focus-visible, button.bomsync-btn-confirm:focus-visible, a.bomsync-btn-confirm:focus-visible { outline-color: var(--bomsync-confirm-border-highlight) !important; } /* Confirmation / commit (teal-green gradient — opt-in only; do NOT use on hero chrome) */ .e-btn.bomsync-btn-confirm, .e-control.e-btn.bomsync-btn-confirm, .e-grid .e-rowcell .e-btn.bomsync-btn-confirm, button.bomsync-btn-confirm, a.bomsync-btn-confirm { border-radius: var(--bomsync-action-btn-radius) !important; padding: var(--bomsync-action-btn-padding) !important; min-height: var(--bomsync-action-btn-min-height) !important; box-sizing: border-box !important; font-size: var(--bomsync-action-btn-font-size) !important; line-height: var(--bomsync-action-btn-line-height) !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: var(--bomsync-action-btn-gap) !important; white-space: nowrap !important; text-decoration: none !important; cursor: pointer !important; background: linear-gradient(135deg, var(--bomsync-confirm-gradient-start), var(--bomsync-confirm-gradient-end)) !important; border: 1px solid var(--bomsync-confirm-border) !important; color: var(--bomsync-confirm-fg) !important; font-weight: 600 !important; box-shadow: 0 2px 8px rgb(var(--bomsync-confirm-shadow-rgb) / 0.38) !important; transition: filter 0.15s, transform 0.1s, border-color 0.12s, box-shadow 0.12s !important; } .e-btn.bomsync-btn-confirm:hover, .e-control.e-btn.bomsync-btn-confirm:hover, .e-grid .e-rowcell .e-btn.bomsync-btn-confirm:hover, button.bomsync-btn-confirm:hover, a.bomsync-btn-confirm:hover { background: linear-gradient(135deg, var(--bomsync-confirm-gradient-start), var(--bomsync-confirm-gradient-end)) !important; filter: brightness(1.14) saturate(1.06) !important; transform: translateY(-1px) !important; border-color: var(--bomsync-confirm-border-highlight) !important; color: var(--bomsync-confirm-fg) !important; box-shadow: 0 3px 12px rgb(var(--bomsync-confirm-shadow-rgb) / 0.32) !important; } .e-btn.bomsync-btn-confirm:active, .e-control.e-btn.bomsync-btn-confirm:active, .e-grid .e-rowcell .e-btn.bomsync-btn-confirm:active, button.bomsync-btn-confirm:active, a.bomsync-btn-confirm:active { background: linear-gradient(135deg, var(--bomsync-confirm-gradient-start), var(--bomsync-confirm-gradient-end)) !important; filter: brightness(1.06) !important; transform: translateY(0) !important; border-color: var(--bomsync-confirm-border) !important; box-shadow: 0 1px 4px rgb(var(--bomsync-confirm-shadow-rgb) / 0.28) !important; } /* Outline confirm — transparent/wash fill + teal border (must read distinct from solid confirm) */ .e-btn.bomsync-btn-confirm-outline, .e-control.e-btn.bomsync-btn-confirm-outline, .e-grid .e-rowcell .e-btn.bomsync-btn-confirm-outline, button.bomsync-btn-confirm-outline, a.bomsync-btn-confirm-outline { border-radius: var(--bomsync-action-btn-radius) !important; padding: var(--bomsync-action-btn-padding) !important; min-height: var(--bomsync-action-btn-min-height) !important; box-sizing: border-box !important; font-size: var(--bomsync-action-btn-font-size) !important; line-height: var(--bomsync-action-btn-line-height) !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: var(--bomsync-action-btn-gap) !important; white-space: nowrap !important; text-decoration: none !important; cursor: pointer !important; background: transparent !important; background-image: none !important; border: 2px solid var(--bomsync-confirm-border) !important; color: var(--bomsync-confirm-light-fg) !important; font-weight: 600 !important; box-shadow: none !important; filter: none !important; } .e-btn.bomsync-btn-confirm-outline .e-btn-content, .e-control.e-btn.bomsync-btn-confirm-outline .e-btn-content { color: var(--bomsync-confirm-light-fg) !important; } .e-btn.bomsync-btn-confirm-outline:hover, .e-control.e-btn.bomsync-btn-confirm-outline:hover, .e-grid .e-rowcell .e-btn.bomsync-btn-confirm-outline:hover, button.bomsync-btn-confirm-outline:hover, a.bomsync-btn-confirm-outline:hover { background: var(--bomsync-confirm-light) !important; background-image: none !important; border-color: var(--bomsync-confirm-border-highlight) !important; color: var(--bomsync-confirm-light-fg) !important; filter: none !important; box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.55), 0 1px 4px rgb(var(--bomsync-confirm-shadow-rgb) / 0.14) !important; transform: translateY(-1px) !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:not([aria-current="page"]):not(.is-current):not([data-parent-current="true"]):not(:has(> a[aria-current="page"])):hover > a, .sidebar-menu .e-menu-container ul.e-vertical > li.e-menu-item:not([aria-current="page"]):not(.is-current):not([data-parent-current="true"]):not(:has(> a[aria-current="page"])):hover > a.e-menu-url, .sidebar-menu .e-menu-container ul.e-vertical > li.e-menu-item:not([aria-current="page"]):not(.is-current):not([data-parent-current="true"]):not(:has(> a[aria-current="page"])):hover > .e-anchor, .sidebar-menu .e-menu-container ul.e-vertical > li.e-menu-item:not([aria-current="page"]):not(.is-current):not([data-parent-current="true"]):not(:has(> a[aria-current="page"])).e-focused > a, .sidebar-menu .e-menu-container ul.e-vertical > li.e-menu-item:not([aria-current="page"]):not(.is-current):not([data-parent-current="true"]):not(:has(> a[aria-current="page"])).e-focused > a.e-menu-url, .sidebar-menu .e-menu-container ul.e-vertical > li.e-menu-item:not([aria-current="page"]):not(.is-current):not([data-parent-current="true"]):not(:has(> a[aria-current="page"])).e-focused > .e-anchor { background: var(--bs-hover-bg) !important; color: var(--bs-sidebar-fg) !important; } /* Current route: keep active strip + cyan text/icons on hover/focus (Syncfusion often sets aria-current on ). */ .sidebar-menu .e-menu-container ul.e-vertical > li.e-menu-item[aria-current="page"]:hover > a, .sidebar-menu .e-menu-container ul.e-vertical > li.e-menu-item[aria-current="page"]:hover > a.e-menu-url, .sidebar-menu .e-menu-container ul.e-vertical > li.e-menu-item[aria-current="page"]:hover > .e-anchor, .sidebar-menu .e-menu-container ul.e-vertical > li.e-menu-item[aria-current="page"].e-focused > a, .sidebar-menu .e-menu-container ul.e-vertical > li.e-menu-item[aria-current="page"].e-focused > a.e-menu-url, .sidebar-menu .e-menu-container ul.e-vertical > li.e-menu-item[aria-current="page"].e-focused > .e-anchor, .sidebar-menu .e-menu-container ul.e-vertical > li.e-menu-item:has(> a[aria-current="page"]):hover > a, .sidebar-menu .e-menu-container ul.e-vertical > li.e-menu-item:has(> a[aria-current="page"]):hover > a.e-menu-url, .sidebar-menu .e-menu-container ul.e-vertical > li.e-menu-item:has(> a[aria-current="page"]):hover > .e-anchor, .sidebar-menu .e-menu-container ul.e-vertical > li.e-menu-item:has(> a[aria-current="page"]).e-focused > a, .sidebar-menu .e-menu-container ul.e-vertical > li.e-menu-item:has(> a[aria-current="page"]).e-focused > a.e-menu-url, .sidebar-menu .e-menu-container ul.e-vertical > li.e-menu-item:has(> a[aria-current="page"]).e-focused > .e-anchor, .sidebar-menu .e-menu-container ul.e-vertical > li.e-menu-item.is-current:hover > a, .sidebar-menu .e-menu-container ul.e-vertical > li.e-menu-item.is-current:hover > a.e-menu-url, .sidebar-menu .e-menu-container ul.e-vertical > li.e-menu-item.is-current:hover > .e-anchor, .sidebar-menu .e-menu-container ul.e-vertical > li.e-menu-item.is-current.e-focused > a, .sidebar-menu .e-menu-container ul.e-vertical > li.e-menu-item.is-current.e-focused > a.e-menu-url, .sidebar-menu .e-menu-container ul.e-vertical > li.e-menu-item.is-current.e-focused > .e-anchor, .sidebar-menu .e-menu-container ul.e-vertical > li.e-menu-item[data-parent-current="true"]:hover > a, .sidebar-menu .e-menu-container ul.e-vertical > li.e-menu-item[data-parent-current="true"]:hover > a.e-menu-url, .sidebar-menu .e-menu-container ul.e-vertical > li.e-menu-item[data-parent-current="true"]:hover > .e-anchor, .sidebar-menu .e-menu-container ul.e-vertical > li.e-menu-item[data-parent-current="true"].e-focused > a, .sidebar-menu .e-menu-container ul.e-vertical > li.e-menu-item[data-parent-current="true"].e-focused > a.e-menu-url, .sidebar-menu .e-menu-container ul.e-vertical > li.e-menu-item[data-parent-current="true"].e-focused > .e-anchor { background: var(--bs-active-bg) !important; color: var(--bs-cyan) !important; } .sidebar-menu .e-menu-container ul.e-vertical > li.e-menu-item[aria-current="page"]:hover > a .e-menu-icon, .sidebar-menu .e-menu-container ul.e-vertical > li.e-menu-item[aria-current="page"]:hover > a .bi, .sidebar-menu .e-menu-container ul.e-vertical > li.e-menu-item[aria-current="page"]:hover > a .material-symbols-outlined, .sidebar-menu .e-menu-container ul.e-vertical > li.e-menu-item[aria-current="page"].e-focused > a .e-menu-icon, .sidebar-menu .e-menu-container ul.e-vertical > li.e-menu-item[aria-current="page"].e-focused > a .bi, .sidebar-menu .e-menu-container ul.e-vertical > li.e-menu-item[aria-current="page"].e-focused > a .material-symbols-outlined, .sidebar-menu .e-menu-container ul.e-vertical > li.e-menu-item:has(> a[aria-current="page"]):hover > a .e-menu-icon, .sidebar-menu .e-menu-container ul.e-vertical > li.e-menu-item:has(> a[aria-current="page"]):hover > a .bi, .sidebar-menu .e-menu-container ul.e-vertical > li.e-menu-item:has(> a[aria-current="page"]):hover > a .material-symbols-outlined, .sidebar-menu .e-menu-container ul.e-vertical > li.e-menu-item:has(> a[aria-current="page"]).e-focused > a .e-menu-icon, .sidebar-menu .e-menu-container ul.e-vertical > li.e-menu-item:has(> a[aria-current="page"]).e-focused > a .bi, .sidebar-menu .e-menu-container ul.e-vertical > li.e-menu-item:has(> a[aria-current="page"]).e-focused > a .material-symbols-outlined, .sidebar-menu .e-menu-container ul.e-vertical > li.e-menu-item.is-current:hover > a .e-menu-icon, .sidebar-menu .e-menu-container ul.e-vertical > li.e-menu-item.is-current:hover > a .bi, .sidebar-menu .e-menu-container ul.e-vertical > li.e-menu-item.is-current:hover > a .material-symbols-outlined, .sidebar-menu .e-menu-container ul.e-vertical > li.e-menu-item.is-current.e-focused > a .e-menu-icon, .sidebar-menu .e-menu-container ul.e-vertical > li.e-menu-item.is-current.e-focused > a .bi, .sidebar-menu .e-menu-container ul.e-vertical > li.e-menu-item.is-current.e-focused > a .material-symbols-outlined, .sidebar-menu .e-menu-container ul.e-vertical > li.e-menu-item[data-parent-current="true"]:hover > a .e-menu-icon, .sidebar-menu .e-menu-container ul.e-vertical > li.e-menu-item[data-parent-current="true"]:hover > a .bi, .sidebar-menu .e-menu-container ul.e-vertical > li.e-menu-item[data-parent-current="true"]:hover > a .material-symbols-outlined, .sidebar-menu .e-menu-container ul.e-vertical > li.e-menu-item[data-parent-current="true"].e-focused > a .e-menu-icon, .sidebar-menu .e-menu-container ul.e-vertical > li.e-menu-item[data-parent-current="true"].e-focused > a .bi, .sidebar-menu .e-menu-container ul.e-vertical > li.e-menu-item[data-parent-current="true"].e-focused > a .material-symbols-outlined { color: var(--bs-cyan) !important; } .sidebar-menu .e-menu-container ul.e-vertical > li.e-menu-item.e-selected > a, .sidebar-menu .e-menu-container ul.e-vertical > li.e-menu-item[aria-current="page"] > a, .sidebar-menu .e-menu-container ul.e-vertical > li.e-menu-item[aria-current="page"] > .e-anchor, .sidebar-menu .e-menu-container ul.e-vertical > li.e-menu-item > a[aria-current="page"], .sidebar-menu .e-menu-container ul.e-vertical > li.e-menu-item > a[aria-current="page"] .e-menu-text, .sidebar-menu .e-menu-container ul.e-vertical > li.e-menu-item[data-parent-current="true"] > a, .sidebar-menu .e-menu-container ul.e-vertical > li.e-menu-item[data-parent-current="true"] > .e-anchor { background: var(--bs-active-bg) !important; color: var(--bs-cyan) !important; /* Accent bar is the li::after pill in sidebar-overrides.css — avoid a second full-height border (“battery”). */ border-left: none !important; } .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, .sidebar-menu .e-menu-container ul.e-vertical > li.e-menu-item[aria-current="page"] > a .e-menu-icon, .sidebar-menu .e-menu-container ul.e-vertical > li.e-menu-item[aria-current="page"] > a .bi, .sidebar-menu .e-menu-container ul.e-vertical > li.e-menu-item[aria-current="page"] > a .material-symbols-outlined, .sidebar-menu .e-menu-container ul.e-vertical > li.e-menu-item[aria-current="page"] > .e-anchor .e-menu-icon, .sidebar-menu .e-menu-container ul.e-vertical > li.e-menu-item[aria-current="page"] > .e-anchor .bi, .sidebar-menu .e-menu-container ul.e-vertical > li.e-menu-item[aria-current="page"] > .e-anchor .material-symbols-outlined, .sidebar-menu .e-menu-container ul.e-vertical > li.e-menu-item > a[aria-current="page"] .e-menu-icon, .sidebar-menu .e-menu-container ul.e-vertical > li.e-menu-item > a[aria-current="page"] .bi, .sidebar-menu .e-menu-container ul.e-vertical > li.e-menu-item > a[aria-current="page"] .material-symbols-outlined, .sidebar-menu .e-menu-container ul.e-vertical > li.e-menu-item[data-parent-current="true"] > a .e-menu-icon, .sidebar-menu .e-menu-container ul.e-vertical > li.e-menu-item[data-parent-current="true"] > a .bi, .sidebar-menu .e-menu-container ul.e-vertical > li.e-menu-item[data-parent-current="true"] > a .material-symbols-outlined, .sidebar-menu .e-menu-container ul.e-vertical > li.e-menu-item[data-parent-current="true"] > .e-anchor .e-menu-icon, .sidebar-menu .e-menu-container ul.e-vertical > li.e-menu-item[data-parent-current="true"] > .e-anchor .bi, .sidebar-menu .e-menu-container ul.e-vertical > li.e-menu-item[data-parent-current="true"] > .e-anchor .material-symbols-outlined { color: var(--bs-cyan) !important; } /* Stray Syncfusion .e-selected on root rows when a longer sibling URL matches the route (sidebar-overrides also resets visuals). */ .sidebar-menu .e-menu-container ul.e-vertical > li.e-menu-item.e-selected:not([aria-current="page"]):not([data-parent-current="true"]):not(:has(> a[aria-current="page"])) > a, .sidebar-menu .e-menu-container ul.e-vertical > li.e-menu-item.e-selected:not([aria-current="page"]):not([data-parent-current="true"]):not(:has(> a[aria-current="page"])) > .e-anchor { background: transparent !important; color: var(--bs-sidebar-fg) !important; border-left: none !important; } .sidebar-menu .e-menu-container ul.e-vertical > li.e-menu-item.e-selected:not([aria-current="page"]):not([data-parent-current="true"]):not(:has(> a[aria-current="page"])) > a .e-menu-icon, .sidebar-menu .e-menu-container ul.e-vertical > li.e-menu-item.e-selected:not([aria-current="page"]):not([data-parent-current="true"]):not(:has(> a[aria-current="page"])) > a .bi, .sidebar-menu .e-menu-container ul.e-vertical > li.e-menu-item.e-selected:not([aria-current="page"]):not([data-parent-current="true"]):not(:has(> a[aria-current="page"])) > a .material-symbols-outlined, .sidebar-menu .e-menu-container ul.e-vertical > li.e-menu-item.e-selected:not([aria-current="page"]):not([data-parent-current="true"]):not(:has(> a[aria-current="page"])) > .e-anchor .e-menu-icon, .sidebar-menu .e-menu-container ul.e-vertical > li.e-menu-item.e-selected:not([aria-current="page"]):not([data-parent-current="true"]):not(:has(> a[aria-current="page"])) > .e-anchor .bi, .sidebar-menu .e-menu-container ul.e-vertical > li.e-menu-item.e-selected:not([aria-current="page"]):not([data-parent-current="true"]):not(:has(> a[aria-current="page"])) > .e-anchor .material-symbols-outlined { color: var(--bs-sidebar-fg) !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:not([aria-current="page"]):not(.is-current):not([data-parent-current="true"]):not(:has(> a[aria-current="page"])):hover > a, .sidebar-menu .e-menu-container ul.e-vertical > .e-menu-item .e-ul .e-menu-item:not([aria-current="page"]):not(.is-current):not([data-parent-current="true"]):not(:has(> a[aria-current="page"])).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[aria-current="page"]:hover > a, .sidebar-menu .e-menu-container ul.e-vertical > .e-menu-item .e-ul .e-menu-item:has(> a[aria-current="page"]):hover > a, .sidebar-menu .e-menu-container ul.e-vertical > .e-menu-item .e-ul .e-menu-item.is-current:hover > a, .sidebar-menu .e-menu-container ul.e-vertical > .e-menu-item .e-ul .e-menu-item[data-parent-current="true"]:hover > a { background: var(--bs-active-bg) !important; color: var(--bs-cyan) !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; } /* Same stray-prefix selection inside flyouts as root vertical list (longest-match wins via aria/data-parent). */ .sidebar-menu .e-menu-container ul.e-vertical > .e-menu-item .e-ul .e-menu-item.e-selected:not([aria-current="page"]):not([data-parent-current="true"]):not(:has(> a[aria-current="page"])) > a { background: transparent !important; color: var(--bs-sidebar-fg) !important; } .sidebar-menu .e-menu-container ul.e-vertical > .e-menu-item .e-ul .e-menu-item.e-selected:not([aria-current="page"]):not([data-parent-current="true"]):not(:has(> a[aria-current="page"])) > a .e-menu-icon, .sidebar-menu .e-menu-container ul.e-vertical > .e-menu-item .e-ul .e-menu-item.e-selected:not([aria-current="page"]):not([data-parent-current="true"]):not(:has(> a[aria-current="page"])) > a .bi, .sidebar-menu .e-menu-container ul.e-vertical > .e-menu-item .e-ul .e-menu-item.e-selected:not([aria-current="page"]):not([data-parent-current="true"]):not(:has(> a[aria-current="page"])) > a .material-symbols-outlined { color: var(--bs-sidebar-fg) !important; } /* Collapsed State */ .sidebar-menu.e-dock.e-close .e-menu-container ul.e-vertical > li.e-menu-item:not([aria-current="page"]):not(.is-current):not([data-parent-current="true"]):not(:has(> a[aria-current="page"])) .e-menu-icon, .sidebar-menu.e-dock.e-close .e-menu-container ul.e-vertical > li.e-menu-item:not([aria-current="page"]):not(.is-current):not([data-parent-current="true"]):not(:has(> a[aria-current="page"])) .bi, .sidebar-menu.e-dock.e-close .e-menu-container ul.e-vertical > li.e-menu-item:not([aria-current="page"]):not(.is-current):not([data-parent-current="true"]):not(:has(> a[aria-current="page"])) .material-symbols-outlined { color: var(--bs-sidebar-fg) !important; } .sidebar-menu.e-dock.e-close .e-menu-container ul.e-vertical > li.e-menu-item[aria-current="page"] .e-menu-icon, .sidebar-menu.e-dock.e-close .e-menu-container ul.e-vertical > li.e-menu-item[aria-current="page"] .bi, .sidebar-menu.e-dock.e-close .e-menu-container ul.e-vertical > li.e-menu-item[aria-current="page"] .material-symbols-outlined, .sidebar-menu.e-dock.e-close .e-menu-container ul.e-vertical > li.e-menu-item:has(> a[aria-current="page"]) .e-menu-icon, .sidebar-menu.e-dock.e-close .e-menu-container ul.e-vertical > li.e-menu-item:has(> a[aria-current="page"]) .bi, .sidebar-menu.e-dock.e-close .e-menu-container ul.e-vertical > li.e-menu-item:has(> a[aria-current="page"]) .material-symbols-outlined, .sidebar-menu.e-dock.e-close .e-menu-container ul.e-vertical > li.e-menu-item.is-current .e-menu-icon, .sidebar-menu.e-dock.e-close .e-menu-container ul.e-vertical > li.e-menu-item.is-current .bi, .sidebar-menu.e-dock.e-close .e-menu-container ul.e-vertical > li.e-menu-item.is-current .material-symbols-outlined, .sidebar-menu.e-dock.e-close .e-menu-container ul.e-vertical > li.e-menu-item[data-parent-current="true"] .e-menu-icon, .sidebar-menu.e-dock.e-close .e-menu-container ul.e-vertical > li.e-menu-item[data-parent-current="true"] .bi, .sidebar-menu.e-dock.e-close .e-menu-container ul.e-vertical > li.e-menu-item[data-parent-current="true"] .material-symbols-outlined { color: var(--bs-cyan) !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 / TreeGrid headers (single knob: --bomsync-grid-header-bg / -fg) ===== */ .e-grid .e-gridheader, .e-grid .e-gridheader .e-headercell, .e-grid .e-gridheader .e-headercontent, .e-grid .e-gridheader .e-stackedheadercell, .e-grid .e-gridheader .e-detailheadercell, .e-treegrid .e-gridheader, .e-treegrid .e-gridheader .e-headercell, .e-treegrid .e-gridheader .e-headercontent { background-color: var(--bomsync-grid-header-bg) !important; color: var(--bomsync-grid-header-fg) !important; } .e-grid .e-gridheader .e-headercelldiv, .e-grid .e-gridheader .e-headercell .e-headertext, .e-grid .e-gridheader .e-headertext.e-stackedheadercelldiv, .e-treegrid .e-gridheader .e-headercelldiv, .e-treegrid .e-gridheader .e-headercell .e-headertext { color: var(--bomsync-grid-header-fg) !important; } /* Sorted headers + HeaderTemplate children must stay on-header (not body --fluent-foreground) */ .e-grid .e-gridheader .e-headercell.e-sort .e-headercelldiv, .e-grid .e-gridheader .e-headercell.e-sort .e-headercelldiv *:not(.e-icons), .e-grid .e-gridheader .e-headercelldiv *:not(.e-icons), .e-treegrid .e-gridheader .e-headercell.e-sort .e-headercelldiv, .e-treegrid .e-gridheader .e-headercell.e-sort .e-headercelldiv *:not(.e-icons), .e-treegrid .e-gridheader .e-headercelldiv *:not(.e-icons) { color: var(--bomsync-grid-header-fg) !important; } .e-grid .e-gridheader .e-icons, .e-grid .e-gridheader .e-sortfilterdiv .e-icons, .e-grid .e-gridheader .e-filtermenudiv .e-icons, .e-treegrid .e-gridheader .e-icons, .e-treegrid .e-gridheader .e-sortfilterdiv .e-icons, .e-treegrid .e-gridheader .e-filtermenudiv .e-icons { color: var(--bomsync-grid-header-fg) !important; fill: var(--bomsync-grid-header-fg) !important; opacity: 1 !important; } .e-grid .e-gridheader, .e-grid .e-headercell, .e-grid .e-gridheader .e-headercontent, .e-treegrid .e-gridheader, .e-treegrid .e-headercell, .e-treegrid .e-gridheader .e-headercontent { border-color: var(--bomsync-grid-header-border) !important; } /* ===== Buttons: primaries use tinted neutrals from main :root ===== */ /* base Syncfusion button - default to action color (not white) */ /* Exclude toolbar buttons (.e-tbar-btn) and SfRibbon items (.bomsync-ribbon-shell) */ /* Exclude product action classes so confirm/option/info keep their own fills (catch-all was painting them all #2F6690). */ .e-btn:not(:is(.bomsync-ribbon-shell *)):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):not(.bomsync-grid-row-action-btn):not(.bomsync-btn-action):not(.bomsync-btn-option):not(.bomsync-btn-info):not(.bomsync-btn-confirm):not(.bomsync-btn-confirm-outline):not(.bms-btn), .e-control.e-btn:not(:is(.bomsync-ribbon-shell *)):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):not(.bomsync-grid-row-action-btn):not(.bomsync-btn-action):not(.bomsync-btn-option):not(.bomsync-btn-info):not(.bomsync-btn-confirm):not(.bomsync-btn-confirm-outline):not(.bms-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(:is(.bomsync-ribbon-shell *)):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):not(.bomsync-grid-row-action-btn):not(.bomsync-btn-action):not(.bomsync-btn-option):not(.bomsync-btn-info):not(.bomsync-btn-confirm):not(.bomsync-btn-confirm-outline):not(.bms-btn):hover, .e-control.e-btn:not(:is(.bomsync-ribbon-shell *)):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):not(.bomsync-grid-row-action-btn):not(.bomsync-btn-action):not(.bomsync-btn-option):not(.bomsync-btn-info):not(.bomsync-btn-confirm):not(.bomsync-btn-confirm-outline):not(.bms-btn):hover { background: #295C84 !important; /* Darker on hover */ border-color: #295C84 !important; color: #fff !important; } .e-btn:not(:is(.bomsync-ribbon-shell *)):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):not(.bomsync-grid-row-action-btn):not(.bomsync-btn-action):not(.bomsync-btn-option):not(.bomsync-btn-info):not(.bomsync-btn-confirm):not(.bomsync-btn-confirm-outline):not(.bms-btn):active, .e-control.e-btn:not(:is(.bomsync-ribbon-shell *)):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):not(.bomsync-grid-row-action-btn):not(.bomsync-btn-action):not(.bomsync-btn-option):not(.bomsync-btn-info):not(.bomsync-btn-confirm):not(.bomsync-btn-confirm-outline):not(.bms-btn):active { background: #244E73 !important; /* Even darker when active */ border-color: #244E73 !important; color: #fff !important; } /* filled buttons */ .e-btn.e-primary:not(:is(.bomsync-ribbon-shell *)), .e-css.e-btn.e-primary:not(:is(.bomsync-ribbon-shell *)) { background: var(--btn-primary-bg) !important; border-color: var(--btn-primary-bg) !important; } .e-btn.e-secondary:not(:is(.bomsync-ribbon-shell *)), .e-css.e-btn.e-secondary:not(:is(.bomsync-ribbon-shell *)) { background: var(--btn-secondary-bg) !important; border-color: var(--btn-secondary-bg) !important; } /* common hover/active */ .e-btn.e-primary:not(:is(.bomsync-ribbon-shell *)):hover { filter: brightness(0.92); } .e-btn.e-primary:not(:is(.bomsync-ribbon-shell *)):active, .e-btn.e-primary:not(:is(.bomsync-ribbon-shell *)).e-active { filter: brightness(0.85); } .e-btn.e-secondary:not(:is(.bomsync-ribbon-shell *)):hover { filter: brightness(0.92); } .e-btn.e-secondary:not(:is(.bomsync-ribbon-shell *)):active, .e-btn.e-secondary:not(:is(.bomsync-ribbon-shell *)).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:not(:is(.bomsync-ribbon-shell *)), .e-css.e-btn.e-primary:not(:is(.bomsync-ribbon-shell *)), .e-btn.e-secondary:not(:is(.bomsync-ribbon-shell *)), .e-css.e-btn.e-secondary:not(:is(.bomsync-ribbon-shell *)), .e-btn.e-danger:not(:is(.bomsync-ribbon-shell *)), .e-css.e-btn.e-danger:not(:is(.bomsync-ribbon-shell *)) { 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; } /* Split preview column (file manager, universal document links): explicit surfaces — avoid Bootstrap bg-body here; nested flex under hero/page chrome can resolve body tokens to an illegible near-black slab. */ .item-fm-preview-host, .item-fm-preview-panel { background: var(--bomsync-elevated-surface); color: var(--bomsync-text); --bs-body-bg: var(--bomsync-elevated-surface); --bs-body-color: var(--bomsync-text); --bs-border-color: var(--bomsync-border-strong); } .item-fm-preview-host.border-start, .item-fm-preview-panel.border-start { border-left-color: var(--bomsync-border-strong) !important; } .item-fm-preview-panel .border-bottom, .item-fm-preview-panel .border-top { border-color: var(--bomsync-border-strong) !important; } .item-fm-preview-panel .text-muted { color: var(--bomsync-text-secondary) !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; } /* Model Documents sheet grid: navy slate instead of layout.css LightCyan (#E0FFFF). */ .bim-sheet-data-grid-host .e-grid .e-row[aria-selected="true"] .e-rowcell, .bim-sheet-data-grid-host .e-grid .e-selectionbackground, .bim-sheet-data-grid-host .e-grid .e-selectionbackground .e-rowcell { background-color: #E6E9EF !important; } .bim-sheet-data-grid-host .e-grid .e-row:hover .e-rowcell { background-color: #F3F5F8 !important; } .bim-sheet-data-grid-host .e-grid .e-row[aria-selected="true"]:hover .e-rowcell { background-color: #DDE2EA !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: full cell fill (background on td only — not inner spans/chips). Wash must NOT match alt-row (alt uses cool sage; readonly uses blue wash). */ .e-grid td.e-rowcell.col-readonly { background-color: var(--bomsync-sfgrid-readonly-bg, #e6edf7) !important; color: var(--bomsync-sfgrid-readonly-fg, var(--bomsync-text-secondary)) !important; } .e-grid td.e-rowcell.col-readonly * { background-color: transparent !important; color: inherit !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: 10060 !important; /* Above top-bar + SfDialog (10050) */ } /* Top-right (preferred for workspace hubs with navy heroes — keeps danger readable) */ .e-toast-container.e-toast-top-right { top: 100px !important; right: 20px !important; z-index: 10060 !important; } /* Ensure toast container has proper z-index regardless of position */ .e-toast-container { z-index: 10060 !important; /* Above top-bar + modal dialogs */ } /* Ensure individual toast notifications also have proper z-index */ .e-toast-container .e-toast { z-index: 10060 !important; max-width: min(420px, calc(100vw - 40px)); box-shadow: var(--bomsync-shadow-lg, 0 12px 28px rgb(var(--bomsync-shadow-rgb) / 0.22)); } /* Danger — pastel coral (not solid opaque Syncfusion / forest red blocks) */ .e-toast-container .e-toast.e-toast-danger, .e-toast-container .e-toast.bomsync-toast-danger { background-color: var(--bomsync-toast-danger-bg, #F8E4E0) !important; background-image: none !important; border-color: var(--bomsync-toast-danger-border, #E2B0A6) !important; color: var(--bomsync-toast-danger-fg, #8B2E22) !important; } .e-toast-container .e-toast.e-toast-danger .e-toast-message, .e-toast-container .e-toast.e-toast-danger .e-toast-title, .e-toast-container .e-toast.e-toast-danger .e-toast-content, .e-toast-container .e-toast.bomsync-toast-danger .e-toast-message, .e-toast-container .e-toast.bomsync-toast-danger .e-toast-title, .e-toast-container .e-toast.bomsync-toast-danger .e-toast-content { color: var(--bomsync-toast-danger-fg, #8B2E22) !important; } .e-toast-container .e-toast.e-toast-danger .e-toast-icon, .e-toast-container .e-toast.e-toast-danger .e-toast-close-icon, .e-toast-container .e-toast.bomsync-toast-danger .e-toast-icon, .e-toast-container .e-toast.bomsync-toast-danger .e-toast-close-icon { color: var(--bomsync-toast-danger-fg, #8B2E22) !important; } /* Pastel Green success toast — readable on light + dark (not solid forest fill) */ .e-toast-container .e-toast.e-toast-success, .e-toast-container .e-toast.bomsync-toast-success { background-color: var(--bomsync-toast-success-bg, #E5F4EC) !important; background-image: none !important; border-color: var(--bomsync-toast-success-border, #A8D4B8) !important; color: var(--bomsync-toast-success-fg, #1B5E3A) !important; } .e-toast-container .e-toast.e-toast-success .e-toast-message, .e-toast-container .e-toast.e-toast-success .e-toast-title, .e-toast-container .e-toast.e-toast-success .e-toast-content, .e-toast-container .e-toast.e-toast-success .e-toast-icon, .e-toast-container .e-toast.e-toast-success .e-toast-close-icon, .e-toast-container .e-toast.bomsync-toast-success .e-toast-message, .e-toast-container .e-toast.bomsync-toast-success .e-toast-title, .e-toast-container .e-toast.bomsync-toast-success .e-toast-content, .e-toast-container .e-toast.bomsync-toast-success .e-toast-icon, .e-toast-container .e-toast.bomsync-toast-success .e-toast-close-icon { color: var(--bomsync-toast-success-fg, #1B5E3A) !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. * Use toolbar chrome (surface-2 / sfgrid chrome), not --bomsync-surface (#fafbfd white tiles). * Canonical override + Light/Dark detail: bomsync-sfgrid.css (Add/Edit/Delete/Update/Cancel + Column Chooser). */ .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-sfgrid-chrome-bg, var(--bomsync-surface-2)) !important; background-color: var(--bomsync-sfgrid-chrome-bg, var(--bomsync-surface-2)) !important; border-color: var(--bomsync-sfgrid-border, var(--bomsync-border)) !important; color: var(--bomsync-sfgrid-fg, 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; } /* * Dark — Syncfusion icon toolbars app-wide: 1px temperature-white / on-dark border. * Excludes ribbon (neutral transparent contract). Grid detail also in bomsync-sfgrid.css. */ html[data-bomsync-theme="dark"]:not([data-bomsync-theme-preview]) .e-grid .e-toolbar .e-tbar-btn, html[data-bomsync-theme-preview="dark"] .e-grid .e-toolbar .e-tbar-btn, html[data-bomsync-theme="dark"]:not([data-bomsync-theme-preview]) .sticky-toolbar .e-toolbar .e-tbar-btn, html[data-bomsync-theme-preview="dark"] .sticky-toolbar .e-toolbar .e-tbar-btn, html[data-bomsync-theme="dark"]:not([data-bomsync-theme-preview]) .e-toolbar:not(:is(.bomsync-ribbon-shell *)):not(.e-ribbon-toolbar) > .e-toolbar-items > .e-toolbar-item > .e-tbar-btn, html[data-bomsync-theme-preview="dark"] .e-toolbar:not(:is(.bomsync-ribbon-shell *)):not(.e-ribbon-toolbar) > .e-toolbar-items > .e-toolbar-item > .e-tbar-btn { border: 1px solid rgb(232 237 245 / 0.55) !important; border-color: rgb(232 237 245 / 0.55) !important; color: var(--bomsync-on-dark-text, #e8edf5) !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; } html[data-bomsync-theme="dark"]:not([data-bomsync-theme-preview]) .e-grid .e-toolbar .e-tbar-btn .e-icons, html[data-bomsync-theme-preview="dark"] .e-grid .e-toolbar .e-tbar-btn .e-icons, html[data-bomsync-theme="dark"]:not([data-bomsync-theme-preview]) .sticky-toolbar .e-toolbar .e-tbar-btn .e-icons, html[data-bomsync-theme-preview="dark"] .sticky-toolbar .e-toolbar .e-tbar-btn .e-icons, html[data-bomsync-theme="dark"]:not([data-bomsync-theme-preview]) .e-grid .e-toolbar .e-tbar-btn .e-btn-icon, html[data-bomsync-theme-preview="dark"] .e-grid .e-toolbar .e-tbar-btn .e-btn-icon, html[data-bomsync-theme="dark"]:not([data-bomsync-theme-preview]) .sticky-toolbar .e-toolbar .e-tbar-btn .e-btn-icon, html[data-bomsync-theme-preview="dark"] .sticky-toolbar .e-toolbar .e-tbar-btn .e-btn-icon { color: var(--bomsync-on-dark-text, #e8edf5) !important; margin: 0 !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; line-height: 1 !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; } /* Tier caps (.bomsync-panel-card) own header chrome — Syncfusion wrapper stays transparent */ .bim-detail-card.bomsync-panel-card .e-card-header { flex-shrink: 0 !important; background: transparent !important; color: inherit !important; padding: 0 !important; border: none !important; display: block; } .bim-detail-card.bomsync-panel-card .e-card-header .e-card-header-caption { width: 100%; padding: 0; } /* Card body: align content to top; tier rules override background on .bomsync-panel-card */ .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; column-gap: 12px; 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: transparent; font-family: var(--font-sans); } /* Keep guided stepper / main column from painting under the KPI rail (Syncfusion step circles can overflow). */ .solver-page-shell > .solver-center { min-width: 0; max-width: 100%; contain: inline-size; position: relative; z-index: 0; } .solver-page-shell > .solver-right-rail { position: relative; z-index: 2; } .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); } /* 2D–7D: SolverActionRibbon is a 4th grid child. With only 3 template rows, the 1fr row bound to the thin ribbon row, stretching it and pushing the real workspace + bottom tabs out of place — large voids. */ .solver-center--guided:has(> .solver-action-ribbon) { grid-template-rows: auto 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)); } #wrapper.layout #maintext.main-content .solver-center--guided:has(> .solver-action-ribbon) { grid-template-rows: auto auto minmax(10rem, auto) minmax(20rem, min(45dvh, 1fr)); } /* Early guided steps: workspace row hugs toggle/coach height (no 32dvh void above tabs); 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(0, auto) !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(0, auto) !important; align-content: start; } #wrapper.layout #maintext.main-content .solver-center--guided.solver-center--tabs-priority .solver-bottom-tabs { min-height: 0; height: auto; max-height: min(42dvh, 28rem); 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.55rem 12px 10px 12px; } #wrapper.layout #maintext.main-content .solver-center--guided.solver-center--tabs-priority .bottom-tab-content .e-grid { min-height: 10rem; } #wrapper.layout #maintext.main-content .solver-center--guided.solver-center--tabs-priority .bottom-tab-bar { padding-top: 0; padding-bottom: 0; } /* Layout / Release: give CutMatrix the viewport; bottom tabs stay compact / collapsible */ #wrapper.layout #maintext.main-content .solver-center--guided.solver-center--layout-priority { grid-template-rows: auto minmax(0, 1fr) auto !important; align-content: start; } #wrapper.layout #maintext.main-content .solver-center--guided.solver-center--layout-priority .solver-workspace--guided { min-height: 0; overflow: auto; } #wrapper.layout #maintext.main-content .solver-center--guided.solver-center--layout-priority .solver-bottom-tabs { height: auto; max-height: min(36dvh, 22rem); margin-top: 0.25rem; } .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 (nesting 1D–7D) — panel chrome; #D accent replaces navy slab ── */ .solver-header { display: flex; align-items: center; justify-content: space-between; padding: 10px 16px; gap: 16px; flex-shrink: 0; background: var(--bomsync-elevated-surface); color: var(--bomsync-text-primary, var(--text-primary)); border: 1px solid var(--bomsync-border-strong, var(--border-default)); border-top: 3px solid var(--domain-accent, var(--bs-navy)); border-radius: 12px; box-shadow: var(--bomsync-shadow-sm, 0 1px 3px rgb(var(--bomsync-shadow-rgb, 17 27 44) / 0.06)); margin: 0.35rem 0.75rem 0.55rem; } .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; } /* BIM hub shortcut from 1D–7D nesting ribbons */ .solver-header-gear { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 8px; color: var(--domain-accent, var(--bs-navy)); border: 1px solid color-mix(in srgb, var(--domain-accent, var(--bs-navy)) 35%, var(--bomsync-border-strong)); background: color-mix(in srgb, var(--domain-accent, var(--bs-navy)) 10%, var(--bomsync-elevated-surface)); text-decoration: none; flex-shrink: 0; } .solver-header-gear:hover { background: color-mix(in srgb, var(--domain-accent, var(--bs-navy)) 18%, var(--bomsync-elevated-surface)); color: var(--domain-accent, var(--bs-navy)); } .domain-badge { display: inline-flex; align-items: center; gap: 6px; border-radius: 8px; padding: 6px 14px; font-weight: 800; font-size: 14px; color: var(--bomsync-on-dark-text); white-space: nowrap; flex-shrink: 0; box-shadow: 0 1px 0 rgb(255 255 255 / 0.12) inset; } .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: 1rem; font-weight: 700; color: var(--bomsync-text-primary, var(--text-primary)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.25; } .solver-context-line { font-size: 0.8125rem; color: var(--bomsync-text-secondary, var(--text-secondary)); 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 (light panel surface) */ .header-select { background: var(--bomsync-surface, var(--surface-bg)); border: 1px solid var(--bomsync-border-strong, var(--border-default)); color: var(--bomsync-text-primary, var(--text-primary)); border-radius: 8px; padding: 4px 10px; font-size: 12px; font-family: var(--font-sans); cursor: pointer; outline: none; min-width: 120px; } .header-select:hover { border-color: var(--domain-accent, var(--brand-blue)); background: color-mix(in srgb, var(--domain-accent, var(--bs-navy)) 8%, var(--bomsync-elevated-surface)); } /* Status chips in header — readable on elevated light chrome */ .status-chip { border-radius: 6px; 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: color-mix(in srgb, #22c55e 16%, white); color: #15803d; border-color: color-mix(in srgb, #22c55e 35%, var(--bomsync-border)); } .status-chip.warning { background: color-mix(in srgb, #f59e0b 16%, white); color: #b45309; border-color: color-mix(in srgb, #f59e0b 35%, var(--bomsync-border)); } .status-chip.error { background: color-mix(in srgb, #ef4444 14%, white); color: #b91c1c; border-color: color-mix(in srgb, #ef4444 35%, var(--bomsync-border)); } .status-chip.info { background: color-mix(in srgb, var(--domain-accent, #3b82f6) 14%, white); color: color-mix(in srgb, var(--domain-accent, #1d4ed8) 70%, #0f172a); border-color: color-mix(in srgb, var(--domain-accent, #3b82f6) 35%, var(--bomsync-border)); } /* ── Action Ribbon ──────────────────────────────────────────────── */ .solver-action-ribbon { display: flex; align-items: center; padding: 0 14px; gap: 8px; background: var(--bomsync-elevated-surface); border: 1px solid var(--bomsync-border-strong, var(--border-default)); border-radius: 12px; margin: 0.35rem 0.75rem; height: auto; min-height: var(--ribbon-height); flex-shrink: 0; box-shadow: var(--bomsync-shadow-sm); } .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: 8px; background: var(--bomsync-surface, var(--surface-bg)); border: 1px solid var(--bomsync-border, var(--border-default)); white-space: nowrap; } .ribbon-step.done { color: color-mix(in srgb, var(--domain-accent, var(--bs-teal)) 72%, #0a1628); background: color-mix(in srgb, var(--domain-accent, var(--bs-teal)) 12%, white); border-color: color-mix(in srgb, var(--domain-accent, var(--bs-teal)) 35%, var(--bomsync-border)); } .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: 12px 14px; background: transparent; min-width: 0; } .solver-workspace--guided { padding: 0.5rem 12px 0.65rem 12px; border-top: none; } #wrapper.layout #maintext.main-content .solver-center--tabs-priority .solver-workspace--guided { min-height: 0; align-self: start; width: 100%; } /* ── Bottom Tabs (primary nesting work surface — #D accent cap) ── */ .solver-bottom-tabs { border: 1px solid var(--bomsync-border-strong, var(--border-default)); border-radius: 12px; background: var(--bomsync-elevated-surface); overflow: hidden; display: flex; flex-direction: column; min-width: 0; max-width: 100%; margin: 0.35rem 0.75rem 0.85rem; box-shadow: var(--bomsync-shadow-md, 0 4px 16px rgb(var(--bomsync-shadow-rgb, 17 27 44) / 0.08)); } .bottom-tab-bar-row { display: flex; align-items: stretch; gap: 0; background: radial-gradient(420px 120px at 8% 50%, color-mix(in srgb, var(--domain-accent, var(--bs-navy)) 72%, transparent), transparent 58%), linear-gradient(135deg, color-mix(in srgb, var(--domain-accent, var(--bs-navy)) 88%, #0a1628), var(--domain-accent, var(--bs-navy))); border-bottom: 1px solid color-mix(in srgb, var(--domain-accent, var(--bs-navy)) 55%, #000); flex-shrink: 0; } .bottom-tab-bar { display: flex; flex: 1 1 auto; min-width: 0; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: thin; padding: 0 8px; gap: 0; } .bottom-tab-collapse-btn { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; gap: 0.35rem; margin: 0; padding: 0 0.75rem; border: none; border-left: 1px solid rgb(255 255 255 / 0.18); background: transparent; color: rgb(255 255 255 / 0.88); font-size: 0.72rem; font-weight: 600; white-space: nowrap; cursor: pointer; } .bottom-tab-collapse-btn:hover, .bottom-tab-collapse-btn:focus-visible { color: #fff; background: rgb(255 255 255 / 0.08); } .bottom-tab-collapse-btn i { font-size: 0.85rem; line-height: 1; } /* 2026 pill toggle — stays in the navy tab rail (never a bare grey browser button). */ .bomsync-solver-details-toggle { appearance: none; -webkit-appearance: none; flex: 0 0 auto; align-self: center; display: inline-flex; align-items: center; justify-content: center; gap: 0.4rem; margin: 0.35rem 0.65rem; padding: 0.35rem 0.85rem; border-radius: 999px; border: 1px solid rgb(255 255 255 / 0.28); background: rgb(255 255 255 / 0.14); color: var(--bomsync-on-dark-text, #f4f7fb); font-family: inherit; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.01em; line-height: 1.2; white-space: nowrap; cursor: pointer; box-shadow: 0 1px 2px rgb(0 0 0 / 0.12); transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease; } .bomsync-solver-details-toggle:hover, .bomsync-solver-details-toggle:focus-visible { background: rgb(255 255 255 / 0.2); border-color: rgb(255 255 255 / 0.42); color: #fff; outline: none; box-shadow: 0 0 0 2px rgb(106 215 255 / 0.35); } .bomsync-solver-details-toggle__icon { display: inline-flex; align-items: center; justify-content: center; width: 1rem; height: 1rem; line-height: 1; } .bomsync-solver-details-toggle__icon i { font-size: 0.85rem; line-height: 1; } .bomsync-solver-details-toggle__icon i::before { display: block; line-height: 1; } .bomsync-solver-details-toggle__label { line-height: 1.2; } .bottom-tab { padding: 10px 14px; font-size: 12px; font-weight: 600; color: rgb(255 255 255 / 0.72); cursor: pointer; border: none; background: none; border-bottom: 2px solid transparent; margin-bottom: -1px; font-family: var(--font-sans); transition: color 0.15s, border-color 0.15s; white-space: nowrap; } .bottom-tab:hover { color: var(--bomsync-on-dark-text, #fff); } .bottom-tab.active { color: var(--bomsync-on-dark-text, #fff); border-bottom-color: #fff; 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; background: var(--bomsync-elevated-surface); } .solver-bottom-tabs--compact .bottom-tab-content { padding: 0.55rem 12px 0.65rem; } .solver-bottom-tabs--collapsed .bottom-tab-bar-row { border-bottom: none; } .nesting-1d-overview { display: flex; flex-direction: column; gap: 0.75rem; width: 100%; min-width: 0; } .nesting-1d-overview-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.55rem; } .nesting-1d-overview-kpi { display: flex; flex-direction: column; gap: 0.2rem; min-width: 0; padding: 0.55rem 0.7rem; border-radius: 10px; border: 1px solid var(--bomsync-border-strong, #c9d3e0); border-top: 3px solid var(--domain-1d, #2ab8d4); background: var(--bomsync-elevated-surface, #fff); box-shadow: var(--bomsync-shadow-sm, 0 1px 3px rgb(17 27 44 / 0.06)); } .nesting-1d-overview-kpi__label { font-size: 0.68rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--bomsync-text-secondary, #5a6b7d); } .nesting-1d-overview-kpi__value { font-size: 1.25rem; font-weight: 800; line-height: 1.15; color: var(--bomsync-text-primary, #1b3a5c); font-variant-numeric: tabular-nums; } .nesting-1d-overview-kpi__value--text { font-size: 0.95rem; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .nesting-1d-overview-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0.75rem; width: 100%; max-width: none; } .nesting-1d-overview-card { min-width: 0; border-radius: 10px; border: 1px solid var(--bomsync-border-strong, #c9d3e0); background: var(--bomsync-elevated-surface, #fff); box-shadow: var(--bomsync-shadow-sm, 0 1px 3px rgb(17 27 44 / 0.06)); overflow: hidden; } .nesting-1d-overview-card__header { margin: 0; padding: 0.5rem 0.75rem; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--bomsync-on-dark-text, #f4f7fb); background: linear-gradient(135deg, color-mix(in srgb, var(--domain-1d, #2ab8d4) 35%, #1b3a5c), #1b3a5c); border-bottom: 1px solid color-mix(in srgb, #1b3a5c 70%, #000); } .nesting-1d-overview-card__body { padding: 0; } .nesting-1d-overview-card__body .bomsync-copy-lead { padding: 0.75rem; } .nesting-1d-overview-table { width: 100%; border-collapse: collapse; table-layout: fixed; font-size: 0.8125rem; line-height: 1.35; } .nesting-1d-overview-table th, .nesting-1d-overview-table td { padding: 0.45rem 0.65rem; vertical-align: top; border-bottom: 1px solid var(--bomsync-border-muted, #d7e0ea); word-break: break-word; } .nesting-1d-overview-table tr:last-child th, .nesting-1d-overview-table tr:last-child td { border-bottom: none; } .nesting-1d-overview-table th { width: 22%; font-weight: 600; color: var(--bomsync-text-secondary, #5a6b7d); background: color-mix(in srgb, var(--domain-1d, #2ab8d4) 6%, transparent); } .nesting-1d-overview-table td { width: 28%; font-weight: 600; color: var(--bomsync-text-primary, #1b3a5c); font-variant-numeric: tabular-nums; } .nesting-1d-overview-table th.is-empty, .nesting-1d-overview-table td.is-empty { background: transparent; border-bottom-color: transparent; } .nesting-1d-overview-banner { display: flex; flex-wrap: wrap; align-items: center; gap: 0.45rem 0.65rem; margin-bottom: 0.85rem; padding: 0.65rem 0.85rem; border-radius: 10px; border: 1px solid var(--bomsync-border-strong, #c9d3e0); border-left: 4px solid var(--domain-1d, #2ab8d4); background: var(--bomsync-elevated-surface, #fff); } .nesting-1d-overview-banner__title { font-size: 0.95rem; font-weight: 700; color: var(--bomsync-text-primary, #1b3a5c); } .nesting-1d-overview-chip { display: inline-flex; align-items: center; padding: 0.2rem 0.55rem; border-radius: 999px; font-size: 0.72rem; font-weight: 600; background: color-mix(in srgb, var(--domain-1d, #2ab8d4) 14%, transparent); color: var(--bomsync-text-primary, #1b3a5c); border: 1px solid color-mix(in srgb, var(--domain-1d, #2ab8d4) 28%, transparent); } .nesting-1d-overview-dl { display: grid; grid-template-columns: minmax(7rem, 40%) 1fr; gap: 0.35rem 0.75rem; margin: 0; font-size: 0.92rem; line-height: 1.45; } .nesting-1d-overview-dl dt { margin: 0; color: var(--bomsync-text-secondary, #5a6b7d); font-weight: 600; } .nesting-1d-overview-dl dd { margin: 0; color: var(--bomsync-text-primary, #1b3a5c); font-weight: 600; word-break: break-word; } .nesting-1d-layout-legend { display: flex; align-items: flex-start; gap: 0.65rem; margin: 0; padding: 0.55rem 0.75rem; border-radius: 10px; border: 1px solid var(--bomsync-border-muted, #d7e0ea); background: color-mix(in srgb, var(--domain-1d, #2ab8d4) 8%, var(--bomsync-elevated-surface, #fff)); font-size: 0.92rem; line-height: 1.5; color: var(--bomsync-text-secondary, #5a6b7d); } .nesting-1d-layout-legend__badge { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; min-width: 1.75rem; height: 1.75rem; padding: 0 0.35rem; border-radius: 8px; background: #1B3A5C; color: #f8fafc; font-size: 0.8rem; font-weight: 700; line-height: 1; } .nesting-1d-cutmatrix-viewport { max-width: 100%; max-height: min(58dvh, 28rem); overflow: auto; -webkit-overflow-scrolling: touch; padding: 0.65rem 0.75rem; overscroll-behavior: contain; border: 1px solid var(--bomsync-border-strong, #c9d3e0); border-radius: 12px; background: var(--bomsync-elevated-surface, #fff); box-shadow: var(--bomsync-shadow-sm, 0 1px 3px rgb(17 27 44 / 0.06)); } .nesting-1d-cutmatrix-viewport:focus-visible { outline: 2px solid var(--domain-1d, #2ab8d4); outline-offset: 2px; } .nesting-2d-sheet-viewport { max-width: 100%; max-height: min(58dvh, 28rem); overflow: auto; -webkit-overflow-scrolling: touch; padding: 0.5rem; overscroll-behavior: contain; } .nesting-2d-sheet-viewport:focus-visible { outline: 2px solid var(--domain-2d, #2ea44f); outline-offset: 2px; } .nesting-solver-output-title { font-weight: 700; font-size: 0.75rem; line-height: 1.35; margin-bottom: 0.5rem; color: color-mix(in srgb, var(--bomsync-success, #1B5E3A) 42%, var(--bomsync-text-primary, #1B3A5C)); } .nesting-1d-cutmatrix-table { width: 100%; max-width: 52rem; color: var(--bomsync-text-primary, var(--bomsync-text)); background: var(--bomsync-elevated-surface); border-color: var(--bomsync-border-strong, var(--bomsync-border)); } .nesting-1d-cutmatrix-table > :not(caption) > * > * { background-color: var(--bomsync-elevated-surface); border-color: var(--bomsync-border, #c9d3e0); color: var(--bomsync-text-primary, var(--bomsync-text)); } .nesting-1d-cutmatrix-table thead th { background: color-mix(in srgb, var(--domain-1d, #2ab8d4) 14%, var(--bomsync-elevated-surface)) !important; color: var(--bomsync-text-primary, var(--bomsync-text)) !important; font-weight: 700; border-color: var(--bomsync-border-strong, var(--bomsync-border)) !important; } .nesting-1d-cutmatrix-table tbody td { background: var(--bomsync-elevated-surface) !important; color: var(--bomsync-text-primary, var(--bomsync-text)) !important; border-color: var(--bomsync-border, #c9d3e0) !important; } .nesting-1d-layout-kpi__value { font-size: 22px; font-weight: 800; line-height: 1; color: var(--bomsync-text-primary, var(--bomsync-text)); } .nesting-1d-release-card { border-color: color-mix(in srgb, var(--domain-1d, #2ab8d4) 55%, var(--bomsync-border-strong)) !important; background: color-mix(in srgb, var(--domain-1d, #2ab8d4) 10%, var(--bomsync-elevated-surface)) !important; } .nesting-1d-release-card__title { color: color-mix(in srgb, var(--domain-1d, #2ab8d4) 45%, var(--bomsync-text-primary)) !important; } .nesting-1d-bars-cell { max-width: 12rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } @media (max-width: 700px) { .bottom-tab { padding: 9px 11px; font-size: 11px; } .bottom-tab-collapse-label, .bomsync-solver-details-toggle__label { display: none; } .bomsync-solver-details-toggle { padding: 0.4rem; min-width: 2rem; min-height: 2rem; } .nesting-1d-cutmatrix-viewport { max-height: min(52dvh, 22rem); } .nesting-1d-overview-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } .nesting-1d-overview-grid { grid-template-columns: minmax(0, 1fr); } .nesting-1d-overview-table, .nesting-1d-overview-table tbody, .nesting-1d-overview-table tr, .nesting-1d-overview-table th, .nesting-1d-overview-table td { display: block; width: 100%; } .nesting-1d-overview-table tr { display: grid; grid-template-columns: minmax(7rem, 38%) 1fr; border-bottom: 1px solid var(--bomsync-border-muted, #d7e0ea); } .nesting-1d-overview-table tr:last-child { border-bottom: none; } .nesting-1d-overview-table th, .nesting-1d-overview-table td { border-bottom: none; padding: 0.35rem 0.65rem; } .nesting-1d-overview-table th.is-empty, .nesting-1d-overview-table td.is-empty { display: none; } } /* 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 (legacy solver ws-*) — align to bomsync elevated satellite */ .ws-panel { background: var(--bomsync-elevated-surface, var(--surface-card)); border-radius: 12px; border: 1px solid var(--bomsync-border-strong, var(--border-default)); border-top: 3px solid var(--domain-accent, var(--bs-navy)); overflow: hidden; margin-bottom: 14px; box-shadow: var(--bomsync-shadow-sm); } .ws-panel:last-child { margin-bottom: 0; } .ws-panel-header { display: flex; align-items: center; justify-content: space-between; padding: 10px 14px; background: color-mix(in srgb, var(--domain-accent, var(--bs-navy)) 8%, var(--bomsync-elevated-surface)); border-bottom: 1px solid var(--bomsync-border, var(--border-default)); } .ws-panel-title { font-size: 0.92rem; font-weight: 700; color: var(--bomsync-text-primary, 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: color-mix(in srgb, var(--bs-amber) 35%, white); } .tag.coral { background: var(--bs-coral-light); color: var(--bs-coral); border-color: color-mix(in srgb, var(--bs-coral) 35%, white); } .tag.purple { background: var(--bs-purple-light); color: var(--bs-purple); border-color: color-mix(in srgb, var(--bs-purple) 35%, white); } .tag.green { background: var(--bs-green-light); color: var(--bs-green); border-color: color-mix(in srgb, var(--bs-green) 35%, white); } .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; } /* ── BOM journey map: dock to right edge (DialogPositionData X=right Y=top + flex container override) ── */ .e-dlg-container:has(.bomsync-journey-flyout-dlg) { justify-content: flex-end !important; align-items: stretch !important; padding: 0 !important; } .bomsync-journey-flyout-dlg.e-dialog { position: relative !important; /* Clear sticky top chrome (~85px). Was 100px flat — fine on tall monitors; trim on short desktops below. */ margin: 88px 0 0 0 !important; max-width: min(440px, 100vw) !important; width: min(440px, 100vw) !important; height: calc(100vh - 88px) !important; max-height: calc(100vh - 88px) !important; height: calc(100dvh - 88px) !important; max-height: calc(100dvh - 88px) !important; top: auto !important; left: auto !important; right: 0 !important; transform: none !important; border-radius: 0; border-top-left-radius: 0.5rem; border-bottom-left-radius: 0.5rem; box-shadow: var(--bomsync-shadow-lg, -4px 0 24px rgb(17 27 44 / 0.12)) !important; display: flex !important; flex-direction: column !important; } @media (max-height: 900px) { .bomsync-journey-flyout-dlg.e-dialog { margin: 72px 0 0 0 !important; height: calc(100vh - 72px) !important; max-height: calc(100vh - 72px) !important; height: calc(100dvh - 72px) !important; max-height: calc(100dvh - 72px) !important; } } .bomsync-journey-flyout-dlg .e-dlg-header-content { flex-shrink: 0; } .bomsync-journey-flyout-dlg .e-dlg-content { flex: 1 1 auto; overflow-y: auto; overflow-x: hidden; min-height: 0; max-height: none !important; } /* ── 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; } } /* ── BOMSync Lens (That Open IFC): light, enterprise chrome; canvas must stay interactive ── */ .bomsync-lens-open-ifc-root { --bomsync-lens-viewport-bg: #f0f4fb; } .bomsync-lens-toolbar { background: var(--bomsync-elevated-surface, #fbfcff); border-color: var(--bomsync-border, #dde3ee) !important; overflow: visible; position: relative; z-index: 6; } .bomsync-lens-hint { color: var(--bomsync-text-muted, #74869c); } .bomsync-lens-loading-overlay { background: rgb(255 255 255 / 0.82); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); } .bomsync-lens-error-banner { background: #fff5f5; border: 1px solid #f5c2c7; color: #842029; } .bomsync-lens-open-ifc-canvasHost { z-index: 0; background: var(--bomsync-lens-viewport-bg); outline: none; } .bomsync-lens-open-ifc-canvasHost canvas { display: block; width: 100% !important; height: 100% !important; touch-action: none; } .bomsync-lens-view-cube-wrap { z-index: 2; pointer-events: none; } .bomsync-lens-view-cube { pointer-events: auto; max-width: 8.5rem; background: var(--bomsync-elevated-surface, #fbfcff); border: 1px solid var(--bomsync-border, #dde3ee); } .bomsync-lens-view-cube-title { color: var(--bomsync-text-secondary, #3a4560); font-size: 0.7rem; letter-spacing: 0.02em; } .bomsync-lens-view-cube-grid { grid-template-columns: repeat(3, 2.25rem); grid-template-rows: repeat(3, 2.25rem); } .bomsync-lens-face-btn { padding: 0.1rem 0.25rem; font-size: 0.7rem; font-weight: 600; line-height: 1.2; color: var(--bomsync-text, #0f1520); background: var(--bomsync-brand-subtle, #eef2f9); border: 1px solid var(--bomsync-border, #dde3ee); border-radius: 0.35rem; transition: background 0.15s ease, border-color 0.15s ease, transform 0.06s ease; } .bomsync-lens-face-btn:hover { background: var(--bomsync-brand-subtle-2, #e4eaf5); border-color: var(--bomsync-border-strong, #bcc6da); } .bomsync-lens-face-btn:active { transform: scale(0.96); } .bomsync-lens-selection-rail { width: min(220px, 26vw); min-width: 132px; max-width: 240px; background: var(--bomsync-surface, #fafbfd); border-color: var(--bomsync-border, #dde3ee) !important; } /* Structure / selection rail inside a resizable splitter pane — fill pane width (default rail stays compact). */ .bomsync-lens-selection-rail.bomsync-lens-selection-rail--fill-pane { width: 100%; max-width: none; min-width: 0; flex: 1 1 auto; align-self: stretch; } .bomsync-lens-selection-rail.bomsync-lens-selection-rail--fill-pane .e-treeview.e-control, .bomsync-lens-selection-rail.bomsync-lens-selection-rail--fill-pane .e-treeview.e-control-wrapper { width: 100% !important; max-width: 100%; } .bomsync-lens-rail-header { color: var(--bomsync-text, #0f1520); background: var(--bomsync-brand-subtle, #eef2f9); border-color: var(--bomsync-border, #dde3ee) !important; } .bomsync-lens-rail-body { color: var(--bomsync-text-secondary, #3a4560); } .bomsync-lens-rail-hint { color: var(--bomsync-text-muted, #74869c); } .bomsync-lens-sel-item { border-color: var(--bomsync-border, #dde3ee) !important; } .bomsync-lens-sel-title { color: var(--bomsync-text, #0f1520); } .bomsync-lens-sel-meta { font-size: 0.75rem; color: var(--bomsync-text-muted, #74869c); } /* Lens structure rail: compact tree; horizontal scrollbar always reserved (no need to scroll down first). */ .bomsync-lens-tree-host { max-width: 100%; } .bomsync-lens-tree-scroll { flex: 1 1 auto; min-height: 0; min-width: 0; overflow-y: auto; overflow-x: scroll; scrollbar-gutter: stable; } .bomsync-lens-tree-host .e-treeview ul, .bomsync-lens-tree-host .e-treeview li { padding-top: 0 !important; padding-bottom: 0 !important; margin-top: 0 !important; margin-bottom: 0 !important; } .bomsync-lens-tree-host .e-treeview .e-list-item, .bomsync-lens-tree-host .e-treeview .e-list-item.e-level-1, .bomsync-lens-tree-host .e-treeview .e-list-item.e-level-2, .bomsync-lens-tree-host .e-treeview .e-list-item.e-level-3 { padding-top: 0 !important; padding-bottom: 0 !important; margin-top: 0 !important; margin-bottom: 0 !important; min-height: 0 !important; height: auto !important; } .bomsync-lens-tree-host .e-treeview .e-fullrow { height: 22px !important; min-height: 22px !important; } .bomsync-lens-tree-host .e-treeview .e-text-content { padding-top: 0 !important; padding-bottom: 0 !important; padding-left: 0; min-height: 22px !important; height: 22px !important; line-height: 22px !important; font-size: 0.75rem; } .bomsync-lens-tree-host .e-treeview .e-list-text { line-height: 22px !important; font-size: 0.75rem; } .bomsync-lens-tree-host .e-treeview .e-icon-collapsible, .bomsync-lens-tree-host .e-treeview .e-icon-expandable { margin-right: 0; margin-top: 0 !important; height: 22px !important; line-height: 22px !important; } .bomsync-lens-rail-collapsed-strip { width: 32px; min-width: 32px; background: var(--bomsync-surface, #fafbfd); border-color: var(--bomsync-border, #dde3ee) !important; } .bomsync-bom-main-split { border-top: 1px solid var(--bomsync-border-strong, #c5cedc); } /* BOM + item detail: flex row must not collapse grid width (Syncfusion measures parent; 0 width = squashed columns). */ .bomsync-bom-split-row { min-width: 0; } .bomsync-bom-grid-col { min-width: 0; flex: 1 1 auto; } @media (min-width: 1200px) { .bomsync-bom-grid-col { min-width: 280px; } } /* Model files dialog (BIM model): outer vertical + inner horizontal splitters — panes must shrink for nested grids. */ .bim-model-file-quad-splitter.e-splitter, .bim-model-file-quad-splitter .e-splitter, .bim-model-file-quad-splitter .e-pane, .bim-model-file-quad-inner.e-splitter, .bim-model-file-quad-inner .e-pane { min-height: 0; min-width: 0; } /* Vertical splitter: lower pane needs explicit min-width for nested SfGrid. */ .item-fm-bim-lens-bom-splitter.e-splitter, .item-fm-bim-lens-bom-splitter .e-splitter, .item-fm-bim-lens-bom-splitter .e-pane { min-width: 0; } @media (min-width: 1200px) { .bomsync-bim-bom-item-detail { border-left: 1px solid var(--bomsync-border, #dde3ee); border-top: none; } } @media (max-width: 1199.98px) { .bomsync-bim-bom-item-detail { border-top: 1px solid var(--bomsync-border, #dde3ee); } } .bomsync-bim-item-detail-desc { white-space: pre-wrap; } .bomsync-grids .e-grid .e-row.bomsync-lens-bom-row-ifc-match, .e-grid .e-row.bomsync-lens-bom-row-ifc-match { background-color: rgba(13, 110, 253, 0.12) !important; } .bomsync-grids .e-grid .e-row.bomsync-lens-bom-row-ifc-match:hover, .e-grid .e-row.bomsync-lens-bom-row-ifc-match:hover { background-color: rgba(13, 110, 253, 0.18) !important; } /* Contact entity detail: contacts grid + optional org chart flyout column */ .contact-entity-contacts-split { display: flex; flex-wrap: wrap; gap: 0 1rem; align-items: flex-start; } .contact-entity-contacts-split .contact-entity-contacts-grid-col { flex: 1 1 22rem; min-width: 0; } .contact-entity-contacts-orgchart-flyout { flex: 1 1 20rem; max-width: 100%; max-height: min(78vh, 640px); overflow: auto; background: var(--bomsync-elevated-surface, #fbfcff); border: 1px solid var(--bomsync-border-subtle, #e2e8f0); border-radius: 8px; padding: 0.75rem; } /* Entity detail: clickable KPI cards */ .crm-kpi-card-clickable .crm-kpi-card-hit { cursor: pointer; border-radius: 6px; margin: -0.35rem; padding: 0.35rem; outline: none; transition: background-color 0.15s ease; } .crm-kpi-card-clickable .crm-kpi-card-hit:hover, .crm-kpi-card-clickable .crm-kpi-card-hit:focus-visible { background-color: rgba(13, 110, 253, 0.08); } /* Setup checklist */ .entity-setup-checklist .entity-setup-checklist-items li { padding: 0.15rem 0; } @media (max-width: 767.98px) { .contact-entity-contacts-split { flex-direction: column; } .contact-entity-contacts-orgchart-flyout { flex: 1 1 auto; width: 100%; max-height: min(60vh, 480px); } } /* ── Syncfusion grids: checkbox cells — defer size/contrast to bomsync-sfgrid.css * (strong green check + standard 20px; do not reintroduce pale mint #e8f5e9). * Rule: .cursor/rules/bomsync-sfgrid-checkboxes.mdc * ── */ .bomsync-grids .e-grid .e-checkbox-wrapper .e-frame, .e-grid .e-checkbox-wrapper .e-frame, .bomsync-grids .e-grid .e-css.e-checkbox-wrapper .e-frame, .e-grid .e-css.e-checkbox-wrapper .e-frame { background-color: var(--bomsync-sfgrid-check-bg, #fff) !important; border: 2px solid var(--bomsync-sfgrid-check-border, #5c6bc0) !important; box-sizing: border-box; } .bomsync-grids .e-grid .e-checkbox-wrapper .e-frame.e-check, .e-grid .e-checkbox-wrapper .e-frame.e-check, .bomsync-grids .e-grid .e-css.e-checkbox-wrapper .e-frame.e-check, .e-grid .e-css.e-checkbox-wrapper .e-frame.e-check { background-color: var(--bomsync-sfgrid-check-checked-bg, var(--bomsync-success, #1B5E3A)) !important; border-color: var(--bomsync-sfgrid-check-checked-border, var(--bomsync-success, #1B5E3A)) !important; color: var(--bomsync-sfgrid-check-mark, #ffffff) !important; } .bomsync-grids .e-grid .e-checkbox-wrapper .e-icons.e-check, .e-grid .e-checkbox-wrapper .e-icons.e-check { color: var(--bomsync-sfgrid-check-mark, #ffffff) !important; font-weight: 700 !important; } /* Tax entity batch grids: standard row height; do not stretch rows to fill content area */ .bomsync-tax-entity-grid.e-grid { min-height: 8rem; } .bomsync-tax-entity-grid.e-grid .e-gridcontent, .bomsync-tax-entity-grid.e-grid .e-gridcontent .e-content { height: auto !important; min-height: 0 !important; } .bomsync-tax-entity-grid.e-grid .e-gridcontent .e-table tr.e-row { height: 40px !important; } .bomsync-tax-entity-grid .e-gridcontent .e-row .e-rowcell { padding-top: 2px; padding-bottom: 2px; line-height: 1.25; } /* ═══════════════════════════════════════════════════════════════════════════ Shared dark workspace hub hero — left column + primary actions (SubmittalsWorkspaceChrome, /manage/project-orders hero, detail chrome siblings) ═══════════════════════════════════════════════════════════════════════════ */ .bomsync-hub-hero-left { flex: 1 1 280px; min-width: 0; } .bomsync-hub-hero-eyebrow { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: #6ad7ff; margin-bottom: 6px; text-align: left; } /* Icon tile + eyebrow label on one row (hub / workspace heroes). */ .bomsync-hub-hero-eyebrow-brand { display: inline-flex; align-items: center; gap: 10px; flex-shrink: 0; } .bomsync-hub-hero-eyebrow-brand .bomsync-page-hero-eyebrow-label { letter-spacing: inherit; text-transform: uppercase; } .bomsync-hub-hero-context-pill { display: inline-flex; align-items: center; max-width: 100%; background: rgba(106 215 255 / 0.14); border: 1px solid rgba(106 215 255 / 0.28); border-radius: 999px; padding: 2px 10px; color: #a8d8f0; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.05em; text-transform: none; } .bomsync-hub-hero-context-pill.bomsync-hub-hero-context-pill--muted { opacity: 0.78; border-style: dashed; } .bomsync-hub-hero-attention-pill { display: inline-flex; align-items: center; padding: 2px 10px; border-radius: 999px; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.04em; text-transform: none; background: rgba(224 154 30 / 0.2); border: 1px solid rgba(224 154 30 / 0.45); color: #f5deb4; } button.bomsync-hub-hero-attention-pill { cursor: pointer; line-height: inherit; } button.bomsync-hub-hero-attention-pill:hover { filter: brightness(1.08); } .bomsync-hub-hero-title, .bomsync-page-hero-title.cwp-hero-title { font-family: "IBM Plex Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; font-optical-sizing: auto; font-size: clamp(1.5rem, 3.6vw, 2.1rem); font-weight: var(--bomsync-hero-title-weight, 700); font-style: normal; color: #e8edf5; line-height: 1.12; letter-spacing: -0.03em; margin: 0 0 6px 0; text-rendering: optimizeLegibility; text-transform: none; font-synthesis: none; } .bomsync-hub-hero-sub { font-size: 0.95rem; color: rgba(232 237 245 / 0.65); letter-spacing: 0.02em; line-height: 1.55; margin: 0; max-width: 52rem; } .bomsync-hub-hero-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: flex-end; flex-shrink: 0; } .bomsync-hub-hero-action-btn { appearance: none; -webkit-appearance: none; border: none; border-radius: var(--bomsync-action-btn-radius); padding: var(--bomsync-action-btn-padding); min-height: var(--bomsync-action-btn-min-height); box-sizing: border-box; font-size: var(--bomsync-action-btn-font-size); font-weight: 600; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: var(--bomsync-action-btn-gap); transition: filter 0.15s, transform 0.1s, background 0.12s, border-color 0.12s; white-space: nowrap; text-decoration: none; line-height: var(--bomsync-action-btn-line-height); } .bomsync-hub-hero-action-btn:hover { filter: brightness(1.08); transform: translateY(-1px); } .bomsync-hub-hero-action-btn:active { transform: translateY(0); } .bomsync-hub-hero-action-btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none; filter: none; } .bomsync-hub-hero-action-btn--primary { background: linear-gradient(135deg, #2f6690, #1e4e78); border: 1px solid rgba(255 255 255 / 0.35); /* cold white edge — matches Set Active / Edit */ color: #fff; box-shadow: 0 2px 8px rgb(47 102 144 / 0.45); } /* Create / New on hero — brighter cool cyan lift (bomsync-actions Create intent) */ .bomsync-hub-hero-action-btn--create, .bomsync-hub-hero-action-btn.bms-btn--create { background: var(--bms-create, #3A8FC4); border: 1px solid rgb(255 255 255 / 0.42); color: var(--bms-on-create, #fff); box-shadow: var(--bms-create-rest-shadow, 0 2px 10px rgb(58 143 196 / 0.4)); } .bomsync-hub-hero-action-btn--create:hover:not(:disabled), .bomsync-hub-hero-action-btn.bms-btn--create:hover:not(:disabled) { background: var(--bms-create-hover-grad, linear-gradient(180deg, #7EC4E8 0%, #55A8D8 42%, #3A8FC4 100%)); border-color: var(--bms-create-hover-border, rgb(255 255 255 / 0.7)); color: var(--bms-on-create, #fff); box-shadow: var(--bms-create-hover-shadow, 0 2px 12px rgb(58 143 196 / 0.45)); filter: var(--bms-create-hover-filter, none); } .bomsync-hub-hero-action-btn--secondary { /* Stronger on-dark glass — was nearly invisible at 0.14 / 0.35 */ background: rgba(255 255 255 / 0.3); border: 1px solid rgba(255 255 255 / 0.7); color: #FFFFFF; backdrop-filter: blur(6px); box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.4), 0 1px 6px rgb(0 0 0 / 0.22); } .bomsync-hub-hero-action-btn--secondary:hover { background: rgba(255 255 255 / 0.4); border-color: rgba(106 215 255 / 0.85); color: #fff; box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.48), 0 2px 10px rgb(0 0 0 / 0.26); } /* * Syncfusion DropDownButton in hero actions (e.g. Print on Stock Lots). * e-outline defaults to dark text — force the same on-dark secondary glass. */ .bomsync-page-hero-actions .e-dropdown-btn.bomsync-hub-hero-action-btn, .bomsync-page-hero-actions .e-btn.bomsync-hub-hero-action-btn, .bomsync-page-hero-actions .e-control.e-btn.bomsync-hub-hero-action-btn { display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: var(--bomsync-action-btn-gap) !important; min-height: var(--bomsync-action-btn-min-height) !important; padding: var(--bomsync-action-btn-padding) !important; border-radius: var(--bomsync-action-btn-radius) !important; font-size: var(--bomsync-action-btn-font-size) !important; font-weight: 600 !important; line-height: var(--bomsync-action-btn-line-height) !important; box-shadow: none !important; } .bomsync-page-hero-actions .e-dropdown-btn.bomsync-hub-hero-action-btn--secondary, .bomsync-page-hero-actions .e-btn.bomsync-hub-hero-action-btn--secondary, .bomsync-page-hero-actions .e-control.e-btn.bomsync-hub-hero-action-btn--secondary, .bomsync-page-hero-actions .e-dropdown-btn.e-outline.bomsync-hub-hero-action-btn--secondary { background: rgba(255 255 255 / 0.3) !important; border: 1px solid rgba(255 255 255 / 0.7) !important; color: #FFFFFF !important; backdrop-filter: blur(6px); box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.4), 0 1px 6px rgb(0 0 0 / 0.22) !important; } .bomsync-page-hero-actions .e-dropdown-btn.bomsync-hub-hero-action-btn--secondary:hover, .bomsync-page-hero-actions .e-btn.bomsync-hub-hero-action-btn--secondary:hover, .bomsync-page-hero-actions .e-control.e-btn.bomsync-hub-hero-action-btn--secondary:hover, .bomsync-page-hero-actions .e-dropdown-btn.e-outline.bomsync-hub-hero-action-btn--secondary:hover { background: rgba(255 255 255 / 0.4) !important; border-color: rgba(106 215 255 / 0.85) !important; color: #FFFFFF !important; box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.48), 0 2px 10px rgb(0 0 0 / 0.26) !important; } .bomsync-page-hero-actions .e-dropdown-btn.bomsync-hub-hero-action-btn--secondary .e-btn-icon, .bomsync-page-hero-actions .e-btn.bomsync-hub-hero-action-btn--secondary .e-btn-icon, .bomsync-page-hero-actions .e-dropdown-btn.bomsync-hub-hero-action-btn--secondary .e-btn-content, .bomsync-page-hero-actions .e-dropdown-btn.bomsync-hub-hero-action-btn--secondary .e-caret, .bomsync-page-hero-actions .e-dropdown-btn.bomsync-hub-hero-action-btn--secondary .e-caret::before { color: var(--bomsync-on-dark-text, #e8edf5) !important; } .bomsync-hub-hero-action-btn--ghost { /* Stronger on-dark ghost — was nearly invisible at 0.08 / 0.22 */ background: rgba(255 255 255 / 0.2); border: 1px solid rgba(255 255 255 / 0.55); color: #FFFFFF; box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.22); } .bomsync-hub-hero-action-btn--ghost:hover { background: rgba(255 255 255 / 0.3); border-color: rgba(106 215 255 / 0.75); color: #fff; box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.3), 0 1px 6px rgb(0 0 0 / 0.18); } /* Square control — equal padding avoids Bootstrap Icons optical offset in asymmetric gutters */ .bomsync-hub-hero-action-btn--icon { background: transparent; border: 1px solid rgba(255 255 255 / 0.22); color: rgba(232 237 245 / 0.78); gap: 0; padding: 0; width: 40px; height: 40px; min-width: 40px; min-height: 40px; } .bomsync-hub-hero-action-btn--icon > .bi, .bomsync-hub-hero-action-btn--icon > i.bi { line-height: 1; display: inline-flex; align-items: center; justify-content: center; width: 1.35rem; height: 1.35rem; margin: 0; font-size: 1.15rem; } .bomsync-hub-hero-action-btn--icon:hover { color: #fff; border-color: rgba(106 215 255 / 0.5); } /* Icon-only square controls — grid/toolbar/panel actions (same glyph centering as hero info btn). */ .bomsync-icon-btn { display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; padding: 0; gap: 0; line-height: 1; text-align: center; } .bomsync-icon-btn > .bi, .bomsync-icon-btn > i.bi { display: inline-flex; align-items: center; justify-content: center; width: 1.35rem; height: 1.35rem; margin: 0; line-height: 1; font-size: 1.05rem; } .bomsync-icon-btn > .bi::before, .bomsync-icon-btn > i.bi::before { display: block; line-height: 1; } /* * Syncfusion icon-only SfButton — Syncfusion defaults to e-icon-left (left-biased). * Required companion to bomsync-icon-btn whenever IconCss is used without Content. */ .e-btn.bomsync-sf-icon-btn, .e-css.e-btn.bomsync-sf-icon-btn, button.e-btn.bomsync-sf-icon-btn { display: inline-flex !important; align-items: center !important; justify-content: center !important; box-sizing: border-box !important; padding: 0 !important; gap: 0 !important; line-height: 1 !important; text-align: center !important; } .e-btn.bomsync-sf-icon-btn .e-btn-icon, .e-css.e-btn.bomsync-sf-icon-btn .e-btn-icon, button.e-btn.bomsync-sf-icon-btn .e-btn-icon { margin: 0 !important; padding: 0 !important; left: auto !important; right: auto !important; position: static !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; width: 1.35rem; height: 1.35rem; line-height: 1 !important; } .e-btn.bomsync-sf-icon-btn .e-btn-icon::before, .e-css.e-btn.bomsync-sf-icon-btn .e-btn-icon::before, button.e-btn.bomsync-sf-icon-btn .e-btn-icon::before { display: block; line-height: 1; } /* SfPdfViewer / Smart PDF toolbar icon-only — Dark must keep glyphs (no blank white squares). */ .e-pv-toolbar .e-toolbar-item .e-tbar-btn, .e-pv-toolbar-container .e-toolbar-item .e-tbar-btn, .e-pv-annotation-toolbar .e-toolbar-item .e-tbar-btn, .e-pv-annotation-toolbar-container .e-toolbar-item .e-tbar-btn { display: inline-flex !important; align-items: center !important; justify-content: center !important; padding: 0 !important; min-width: 32px; min-height: 32px; background: transparent !important; color: var(--bomsync-text-primary, #0f1520) !important; box-shadow: none !important; } html[data-bomsync-theme="dark"] .e-pv-toolbar .e-toolbar-item .e-tbar-btn, html[data-bomsync-theme-preview="dark"] .e-pv-toolbar .e-toolbar-item .e-tbar-btn, html[data-bomsync-theme="dark"] .e-pv-toolbar-container .e-toolbar-item .e-tbar-btn, html[data-bomsync-theme-preview="dark"] .e-pv-toolbar-container .e-toolbar-item .e-tbar-btn, html[data-bomsync-theme="dark"] .e-pv-annotation-toolbar .e-toolbar-item .e-tbar-btn, html[data-bomsync-theme-preview="dark"] .e-pv-annotation-toolbar .e-toolbar-item .e-tbar-btn, html[data-bomsync-theme="dark"] .e-pv-annotation-toolbar-container .e-toolbar-item .e-tbar-btn, html[data-bomsync-theme-preview="dark"] .e-pv-annotation-toolbar-container .e-toolbar-item .e-tbar-btn { background: rgb(17 27 44 / 0.55) !important; color: var(--bomsync-on-dark-text, #e3eaf2) !important; border-color: var(--bomsync-border-strong, #4a6280) !important; } .e-pv-toolbar .e-tbar-btn .e-icons, .e-pv-toolbar .e-tbar-btn .e-btn-icon, .e-pv-toolbar-container .e-tbar-btn .e-icons, .e-pv-toolbar-container .e-tbar-btn .e-btn-icon, .e-pv-annotation-toolbar .e-tbar-btn .e-icons, .e-pv-annotation-toolbar .e-tbar-btn .e-btn-icon { color: inherit !important; background: transparent !important; filter: none !important; opacity: 1 !important; } .e-pv-toolbar .e-tbar-btn .e-icons::before, .e-pv-toolbar .e-tbar-btn .e-btn-icon::before, .e-pv-toolbar-container .e-tbar-btn .e-icons::before, .e-pv-toolbar-container .e-tbar-btn .e-btn-icon::before { display: block; line-height: 1; color: inherit !important; } /* Panel / work-header title glyphs — keep bi/e-icons optically centered in their box */ .bomsync-panel-card__header .matrix-panel-header-title > i.bi, .bomsync-panel-card__header .matrix-panel-header-title > .bi, .bomsync-panel-card__header .bomsync-panel-header-title > i.bi, .bomsync-panel-card__header .bomsync-panel-header-title > .bi { display: inline-flex; align-items: center; justify-content: center; width: 1.15rem; height: 1.15rem; margin: 0; line-height: 1; flex-shrink: 0; } .bomsync-panel-card__header .matrix-panel-header-title > i.bi::before, .bomsync-panel-card__header .matrix-panel-header-title > .bi::before, .bomsync-panel-card__header .bomsync-panel-header-title > i.bi::before, .bomsync-panel-card__header .bomsync-panel-header-title > .bi::before { display: block; line-height: 1; } /* Optional title icon tile (preferred over bare in panel headers) */ .bomsync-panel-title-icon-wrap { display: inline-flex; align-items: center; justify-content: center; width: 1.35rem; height: 1.35rem; min-width: 1.35rem; min-height: 1.35rem; margin: 0; padding: 0; line-height: 1; flex-shrink: 0; box-sizing: border-box; } .bomsync-panel-title-icon-wrap > i.bi, .bomsync-panel-title-icon-wrap > i, .bomsync-panel-title-icon-wrap > .bi { display: inline-flex; align-items: center; justify-content: center; width: 1.15rem; height: 1.15rem; margin: 0; padding: 0; line-height: 1; font-size: 1.05rem; } .bomsync-panel-title-icon-wrap > i.bi::before, .bomsync-panel-title-icon-wrap > i::before, .bomsync-panel-title-icon-wrap > .bi::before { display: block; line-height: 1; } /* Text + icon hub actions — keep leading icon optically centered in its box */ .bomsync-hub-hero-action-btn > .bi, .bomsync-hub-hero-action-btn > i.bi { display: inline-flex; align-items: center; justify-content: center; width: 1.15rem; height: 1.15rem; margin: 0; line-height: 1; flex-shrink: 0; } .bomsync-hub-hero-action-btn > .bi::before, .bomsync-hub-hero-action-btn > i.bi::before { display: block; line-height: 1; } /* ═══════════════════════════════════════════════════════════════════════════ Embedded workflow pipeline (hub + step strip + collapse) — Use on any workspace page; pair markup: .bomsync-chrome-stack > hero + section. — Steps nav: .bomsync-workflow-pipeline-steps with .bomsync-workflow-pipeline-node and .bomsync-workflow-pipeline-sep between nodes (chevron centered in gutter). ═══════════════════════════════════════════════════════════════════════════ */ .bomsync-chrome-stack { display: flex; flex-direction: column; align-items: stretch; gap: clamp(12px, 1.25vw, 18px); min-width: 0; } .bomsync-chrome-stack .bomsync-workflow-pipeline-section { flex-shrink: 0; width: 100%; box-sizing: border-box; } .bomsync-workflow-pipeline-section { background: var(--bomsync-elevated-surface, #fbfcff); border: 1px solid var(--bomsync-border-strong, #bcc6da); border-radius: 14px; padding: 14px 18px 12px; box-shadow: var(--bomsync-shadow-sm); } .bomsync-workflow-pipeline-section--collapsed { padding-top: 10px; padding-bottom: 10px; } .bomsync-workflow-pipeline-section--collapsed .bomsync-workflow-pipeline-toolbar { margin-bottom: 0; } .bomsync-workflow-pipeline-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; } .bomsync-workflow-pipeline-collapse-btn { flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; min-width: 36px; min-height: 36px; padding: 0; border-radius: 10px; border: 1px solid var(--bomsync-border-strong, #bcc6da); background: var(--bomsync-page-bg, #f6f8fc); color: var(--bomsync-text, #0f1520); cursor: pointer; transition: background 0.12s, border-color 0.12s, color 0.12s; } .bomsync-workflow-pipeline-collapse-btn .bi { line-height: 1; display: inline-flex; align-items: center; justify-content: center; width: 1.125rem; height: 1.125rem; margin: 0; font-size: 1.05rem; } .bomsync-workflow-pipeline-collapse-btn:hover { border-color: var(--brand-blue, #111b2c); background: color-mix(in oklab, var(--brand-blue) 8%, white); color: var(--brand-blue, #111b2c); } .bomsync-workflow-pipeline-collapse-btn:focus-visible { outline: 2px solid var(--brand-blue, #111b2c); outline-offset: 2px; } .bomsync-workflow-pipeline-eyebrow { font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: var(--bomsync-text-muted, #74869c); margin-bottom: 10px; } .bomsync-workflow-pipeline-toolbar .bomsync-workflow-pipeline-eyebrow { margin-bottom: 0; } .bomsync-workflow-pipeline-steps { display: flex; flex-wrap: wrap; align-items: center; gap: 0; row-gap: 8px; } .bomsync-workflow-pipeline-node { display: flex; align-items: center; } /* Fixed-width gutter between steps so chevrons center between pills */ .bomsync-workflow-pipeline-sep { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 1.75rem; min-width: 1.75rem; align-self: center; color: var(--bomsync-text-secondary, #3a4560); } .bomsync-workflow-pipeline-sep .bi { line-height: 1; font-size: 0.8rem; display: inline-flex; align-items: center; justify-content: center; width: 1rem; height: 1rem; margin: 0; color: var(--bomsync-text-secondary, #3a4560); } .bomsync-workflow-pipeline-btn { display: inline-flex; align-items: center; gap: 6px; padding: 7px 13px; border-radius: 9px; font-size: 0.85rem; font-weight: 500; cursor: default; transition: background 0.12s, border-color 0.12s, transform 0.1s; border: none; background: none; text-align: left; text-decoration: none; } .bomsync-workflow-pipeline-node--active .bomsync-workflow-pipeline-btn { background: var(--bomsync-brand-subtle-2, color-mix(in oklab, var(--brand-blue) 6%, white)); border: 1px solid var(--bomsync-border-strong, #bcc6da); color: var(--bomsync-text, #0f1520); cursor: pointer; } .bomsync-workflow-pipeline-node--active .bomsync-workflow-pipeline-btn:hover { background: color-mix(in oklab, var(--brand-blue) 14%, white); border-color: var(--brand-blue); color: var(--brand-blue); transform: translateY(-1px); } .bomsync-workflow-pipeline-node--locked .bomsync-workflow-pipeline-btn { background: var(--bomsync-surface-2, #f4f6fa); border: 1px dashed var(--bomsync-border, #dde3ee); color: var(--bomsync-text-muted, #74869c); } .bomsync-workflow-pipeline-num { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; background: var(--brand-blue, #111b2c); color: #fff; font-size: 0.72rem; font-weight: 700; flex-shrink: 0; } .bomsync-workflow-pipeline-num--locked { background: var(--bomsync-border-strong, #bcc6da); color: var(--bomsync-text-muted, #74869c); } .bomsync-workflow-pipeline-label { line-height: 1.2; } .bomsync-workflow-pipeline-note { margin: 8px 0 0 0; font-size: 0.78rem; color: var(--bomsync-text-muted, #74869c); font-style: italic; } /* ═══════════════════════════════════════════════════════════════════════════ BOMSync standard page chrome (Commercial Workspace protocol) — BomsyncPageChrome / BomsyncPageBreadcrumbs (Server + mirrored hosts) ═══════════════════════════════════════════════════════════════════════════ */ .bomsync-layout-content-host { display: flex; flex-direction: column; gap: 0; min-width: 0; } .bomsync-page-stack { display: flex; flex-direction: column; gap: 0; min-width: 0; } .bomsync-page-stack--flush { display: contents; } .bomsync-page-breadcrumbs-slot { margin-bottom: 8px; } .bomsync-page-breadcrumbs { gap: var(--bomsync-breadcrumb-gap); font-family: var(--bomsync-breadcrumb-font-family); font-size: var(--bomsync-breadcrumb-font-size); line-height: var(--bomsync-breadcrumb-line-height); } .bomsync-page-breadcrumbs__link, .bomsync-page-breadcrumbs__sep, .bomsync-page-breadcrumbs__current { font-family: inherit; font-size: inherit; line-height: inherit; } .bomsync-page-breadcrumbs__link { color: var(--bomsync-text-secondary); font-weight: var(--bomsync-breadcrumb-font-weight); text-decoration: none; background: transparent; border: none; box-shadow: none; padding: 0.1rem 0.15rem; border-radius: 4px; } .bomsync-page-breadcrumbs__link:hover, .bomsync-page-breadcrumbs__link:focus-visible { color: var(--bsx-action, #2F6690); text-decoration: underline; text-underline-offset: 0.15em; background: transparent; outline: none; } .bomsync-page-breadcrumbs__link:focus-visible { box-shadow: 0 0 0 2px rgb(var(--bomsync-shadow-rgb) / 0.18); } /* Legacy Syncfusion flat buttons (pre-standard crumbs) — keep transparent + theme font */ .bomsync-page-breadcrumbs .e-btn.e-flat, .bomsync-page-breadcrumbs .e-btn.e-flat.e-small, .bomsync-page-breadcrumbs button.e-btn.e-flat { color: var(--bomsync-text-secondary); font-family: var(--bomsync-breadcrumb-font-family) !important; font-size: var(--bomsync-breadcrumb-font-size) !important; font-weight: var(--bomsync-breadcrumb-font-weight); line-height: var(--bomsync-breadcrumb-line-height); background: transparent !important; background-color: transparent !important; border: none !important; box-shadow: none !important; padding-left: 0.15rem; padding-right: 0.15rem; text-transform: none; } .bomsync-page-breadcrumbs .e-btn.e-flat:hover, .bomsync-page-breadcrumbs .e-btn.e-flat:focus-visible { color: var(--bsx-action, #2F6690); background: transparent !important; box-shadow: none !important; } .bomsync-page-breadcrumbs__sep { color: var(--bomsync-text-muted); font-weight: var(--bomsync-breadcrumb-font-weight); user-select: none; } .bomsync-page-breadcrumbs__current { color: var(--bomsync-text-primary); font-weight: var(--bomsync-breadcrumb-font-weight-current); } /* Dark product / preview: cyan crumb text, no chip fills (Geoffrey 2026-10-11) */ html[data-bomsync-theme="dark"]:not([data-bomsync-theme-preview]) .bomsync-page-breadcrumbs__link, html[data-bomsync-theme-preview="dark"] .bomsync-page-breadcrumbs__link, html[data-bomsync-theme="dark"]:not([data-bomsync-theme-preview]) .bomsync-page-breadcrumbs .e-btn.e-flat, html[data-bomsync-theme-preview="dark"] .bomsync-page-breadcrumbs .e-btn.e-flat, html[data-bomsync-theme="dark"]:not([data-bomsync-theme-preview]) .bomsync-page-breadcrumbs .e-btn.e-flat.e-small, html[data-bomsync-theme-preview="dark"] .bomsync-page-breadcrumbs .e-btn.e-flat.e-small, html[data-bomsync-theme="dark"]:not([data-bomsync-theme-preview]) .bomsync-page-breadcrumbs button.e-btn.e-flat, html[data-bomsync-theme-preview="dark"] .bomsync-page-breadcrumbs button.e-btn.e-flat { color: var(--bs-cyan, #6ad7ff) !important; background: transparent !important; background-color: transparent !important; border: none !important; box-shadow: none !important; } html[data-bomsync-theme="dark"]:not([data-bomsync-theme-preview]) .bomsync-page-breadcrumbs__link:hover, html[data-bomsync-theme-preview="dark"] .bomsync-page-breadcrumbs__link:hover, html[data-bomsync-theme="dark"]:not([data-bomsync-theme-preview]) .bomsync-page-breadcrumbs__link:focus-visible, html[data-bomsync-theme-preview="dark"] .bomsync-page-breadcrumbs__link:focus-visible, html[data-bomsync-theme="dark"]:not([data-bomsync-theme-preview]) .bomsync-page-breadcrumbs .e-btn.e-flat:hover, html[data-bomsync-theme-preview="dark"] .bomsync-page-breadcrumbs .e-btn.e-flat:hover, html[data-bomsync-theme="dark"]:not([data-bomsync-theme-preview]) .bomsync-page-breadcrumbs .e-btn.e-flat:focus-visible, html[data-bomsync-theme-preview="dark"] .bomsync-page-breadcrumbs .e-btn.e-flat:focus-visible { color: #9AE6FF !important; background: transparent !important; } html[data-bomsync-theme="dark"]:not([data-bomsync-theme-preview]) .bomsync-page-breadcrumbs__sep, html[data-bomsync-theme-preview="dark"] .bomsync-page-breadcrumbs__sep { color: rgb(106 215 255 / 0.55) !important; } html[data-bomsync-theme="dark"]:not([data-bomsync-theme-preview]) .bomsync-page-breadcrumbs__current, html[data-bomsync-theme-preview="dark"] .bomsync-page-breadcrumbs__current { color: var(--bs-cyan, #6ad7ff) !important; } /* ── Compact header (default data pages; no full hero) ───────────────────── */ .bomsync-page-header-compact { background: var(--bomsync-elevated-surface); border: 1px solid var(--bomsync-border-strong); border-radius: 14px; padding: 14px 18px; margin-bottom: 14px; box-shadow: var(--bomsync-shadow-sm); } .bomsync-page-header-compact-inner { display: flex; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; gap: 12px; } .bomsync-page-header-compact-text { flex: 1 1 220px; min-width: 0; } .bomsync-page-eyebrow-compact { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--bomsync-text-muted); margin-bottom: 6px; display: flex; align-items: center; flex-wrap: wrap; gap: 8px; } .bomsync-page-eyebrow-compact-icon-wrap { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; min-width: 36px; min-height: 36px; border-radius: 9px; background: color-mix(in srgb, var(--brand-blue, #111B2C) 10%, var(--bomsync-elevated-surface)); color: var(--bsx-action, #2F6690); flex-shrink: 0; box-sizing: border-box; } .bomsync-page-eyebrow-compact-icon-wrap > i { display: inline-flex !important; align-items: center !important; justify-content: center !important; width: 1.15rem; height: 1.15rem; margin: 0 !important; padding: 0 !important; font-size: 0.95rem; line-height: 1 !important; text-align: center; } .bomsync-page-eyebrow-compact-icon-wrap > i::before { display: block !important; line-height: 1 !important; margin: 0 auto; width: 1em; text-align: center; } .bomsync-page-eyebrow-compact-label { letter-spacing: inherit; } .bomsync-page-title-compact { font-size: clamp(1.25rem, 2.8vw, 1.65rem); font-weight: 800; color: var(--bomsync-text); letter-spacing: -0.02em; line-height: 1.15; margin: 0 0 6px 0; } .bomsync-page-header-compact-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: flex-end; flex-shrink: 0; } @media (max-width: 640px) { .bomsync-page-header-compact-actions { width: 100%; justify-content: flex-start; } } /* ── Hero header (command centers; aligns with .cwp-hero language) ───────── */ .bomsync-page-hero { background: radial-gradient(900px 450px at 5% -10%, var(--bsx-action, #2F6690), transparent 55%), radial-gradient(900px 450px at 85% 10%, var(--bsx-option, #415A77), transparent 55%), var(--brand-blue, #111B2C); border-radius: 16px; padding: 0; overflow: hidden; position: relative; margin-bottom: 14px; min-height: var(--bomsync-page-hero-min-height); box-shadow: 0 4px 24px rgb(17 27 44 / 0.28), 0 1px 0 rgb(255 255 255 / 0.04) inset; } /* PATH / lane hosts: keep a taller floor so steps with HeroFooter don't jump */ .bomsync-page-hero:has(.bomsync-page-hero-footer), .bomsync-page-hero:has(.bomsync-hero-lanes) { min-height: var(--bomsync-page-hero-min-height-with-footer); } .bomsync-page-hero::before { content: ''; position: absolute; inset: 0; background-image: linear-gradient(rgba(106 215 255 / 0.04) 1px, transparent 1px), linear-gradient(90deg, rgba(106 215 255 / 0.04) 1px, transparent 1px); background-size: 40px 40px; pointer-events: none; } /* Hero + attached status/lanes bar: solid navy chrome only — no blueprint grid wash */ .bomsync-page-hero:has(.bomsync-page-hero-footer)::before, .bomsync-page-hero:has(.bomsync-hero-lanes)::before { display: none; } .bomsync-page-hero::after { content: ''; position: absolute; top: -36px; right: -36px; width: 280px; height: 280px; background: radial-gradient(circle at center, rgba(47 100 144 / 0.32) 0%, transparent 65%); pointer-events: none; } .bomsync-page-hero-stack { position: relative; z-index: 1; } .bomsync-page-hero-inner { position: relative; z-index: 1; display: flex; align-items: center; align-content: flex-start; justify-content: flex-start; flex-wrap: wrap; gap: 14px; padding: 22px 26px; } .bomsync-page-hero-stack:has(.bomsync-page-hero-footer) .bomsync-page-hero-inner { padding-bottom: 14px; } .bomsync-page-hero-footer { padding: 12px 26px 18px; border-top: 1px solid rgba(255 255 255 / 0.12); } /* * Hero stats / filter lanes (fixed standard when KPI · filters · status chips are required). * Gold: /manage/procurement-pending (HeroFooter). Put counts in the navy hero — not a second * light bar under the hero. Staff: docs/help/staff/hero-stats-lanes.md */ .bomsync-hero-lanes { display: flex; flex-wrap: wrap; align-items: center; gap: 0 0.15rem; width: 100%; } .bomsync-hero-lanes__spacer { flex-grow: 1; min-width: 0.5rem; } .bomsync-hero-lanes__tools { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 8px; } .bomsync-hero-lane { display: inline-flex; align-items: center; gap: 0.45rem; min-height: 40px; padding: 0 0.75rem; border: 0; border-bottom: 3px solid transparent; background: transparent; color: rgb(255 255 255 / 0.78); font-size: 0.875rem; font-weight: 500; cursor: pointer; white-space: nowrap; } .bomsync-hero-lane:hover:not(:disabled) { color: #fff; } .bomsync-hero-lane.is-active { color: #fff; font-weight: 600; border-bottom-color: var(--bs-cyan, #6ad7ff); } .bomsync-hero-lane.is-placeholder, .bomsync-hero-lane:disabled { color: rgb(255 255 255 / 0.38); cursor: default; } .bomsync-hero-lane__n { font-size: 1rem; font-weight: 700; color: inherit; font-variant-numeric: tabular-nums; } .bomsync-hero-lanes--compact .bomsync-hero-lane { min-height: 28px; padding: 0 0.5rem; font-size: 0.8125rem; } .bomsync-hero-lanes--compact .bomsync-hero-lane__n { font-size: 0.875rem; } .bomsync-page-hero-footer:has(.bomsync-hero-lanes--compact) { padding-top: 4px; padding-bottom: 8px; } /* Registry scaffolds: fill the content span; panel actions stay right; in-panel subheads are flat. */ .registry-scaffold, .registry-scaffold .bomsync-page-hero { width: 100%; max-width: none; } .registry-scaffold .bomsync-panel-card__header .matrix-panel-header-title { flex: 1 1 auto; min-width: 0; } .registry-scaffold .matrix-panel-header-actions { margin-left: auto; flex: 0 0 auto; justify-content: flex-end; } .registry-scaffold .registry-subhead { background: var(--bomsync-surface-well); color: var(--bomsync-text-primary); box-shadow: none; border-radius: 6px; margin-top: 0.75rem; padding: 9px 10px; min-height: 34px; font-weight: 600; } /* Optional Tree/List (or similar) segment control trailing the hero lanes */ .bomsync-hero-lanes__seg { display: inline-flex; border: 1px solid rgb(255 255 255 / 0.35); border-radius: 6px; overflow: hidden; } .bomsync-hero-lanes__seg-btn { height: 32px; padding: 0 12px; border: 0; border-right: 1px solid rgb(255 255 255 / 0.25); background: transparent; font: 500 0.8125rem/1 var(--bs-body-font-family, system-ui, sans-serif); color: rgb(255 255 255 / 0.78); cursor: pointer; } .bomsync-hero-lanes__seg-btn:last-child { border-right: 0; } .bomsync-hero-lanes__seg-btn:hover { color: #fff; background: rgb(255 255 255 / 0.08); } .bomsync-hero-lanes__seg-btn.is-on { background: rgb(255 255 255 / 0.18); color: #fff; } /* Temperature-white Syncfusion search / dropdown inside hero lane tools (readable on navy) */ .bomsync-page-hero-footer .bomsync-hero-search.e-control-wrapper, .bomsync-page-hero-footer .bomsync-hero-search.e-input-group, .bomsync-page-hero-footer .e-ddl.bomsync-hero-search.e-control-wrapper, .bomsync-page-hero-footer .e-ddl.bomsync-hero-search.e-input-group { background: var(--bomsync-elevated-surface, #fbfcff); border-color: var(--bomsync-border-strong, #bcc6da); border-radius: 6px; box-shadow: 0 1px 2px rgb(var(--bomsync-shadow-rgb, 17 27 44) / 0.12); } .bomsync-page-hero-footer .bomsync-hero-search.e-control-wrapper.e-input-focus, .bomsync-page-hero-footer .bomsync-hero-search.e-input-group.e-input-focus, .bomsync-page-hero-footer .e-ddl.bomsync-hero-search.e-control-wrapper.e-input-focus, .bomsync-page-hero-footer .e-ddl.bomsync-hero-search.e-input-group.e-input-focus { background: var(--bomsync-elevated-surface, #fbfcff); border-color: var(--brand-blue, #1b3a5c); } .bomsync-page-hero-footer .bomsync-hero-search .e-input, .bomsync-page-hero-footer .bomsync-hero-search input.e-input { color: var(--bomsync-text, #0f1520); background: transparent; } .bomsync-page-hero-footer .bomsync-hero-search .e-input::placeholder, .bomsync-page-hero-footer .bomsync-hero-search input.e-input::placeholder { color: var(--bomsync-text-muted, #74869c); } .bomsync-page-hero-footer .bomsync-hero-search .e-clear-icon, .bomsync-page-hero-footer .bomsync-hero-search .e-ddl-icon { color: var(--bomsync-text-secondary, #4a5d73); } .bomsync-page-hero-left { flex: 1 1 260px; min-width: 0; } /* Eyebrow: icon tile left, caps label right (same line); pills/context follow inline. */ .bomsync-page-hero-eyebrow { display: inline-flex; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 10px; max-width: 100%; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: #6ad7ff; margin-bottom: 6px; text-align: left; align-self: flex-start; } /* Hero eyebrow icon tile: same footprint + centering model as .bomsync-hub-hero-action-btn--icon (40×40). */ .bomsync-page-hero-eyebrow-icon-wrap { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; min-width: 40px; min-height: 40px; border-radius: 10px; background: rgba(255 255 255 / 0.12); box-shadow: 0 1px 0 rgb(255 255 255 / 0.06) inset; flex-shrink: 0; box-sizing: border-box; } .bomsync-page-hero-eyebrow-icon-wrap > i.bi, .bomsync-page-hero-eyebrow-icon-wrap > i { display: inline-flex !important; align-items: center !important; justify-content: center !important; width: 1.35rem; height: 1.35rem; margin: 0 !important; padding: 0 !important; font-size: 1.15rem; line-height: 1 !important; text-align: center; } .bomsync-page-hero-eyebrow-icon-wrap > i.bi::before, .bomsync-page-hero-eyebrow-icon-wrap > i::before { display: block !important; line-height: 1 !important; margin: 0 auto; width: 1em; text-align: center; } .bomsync-page-hero-eyebrow-label { letter-spacing: inherit; } .bomsync-page-hero-eyebrow.bomsync-page-hero-eyebrow--bim { color: var(--bs-cyan); } .bomsync-page-eyebrow-compact.bomsync-page-hero-eyebrow--bim { color: var(--bs-cyan); } .bomsync-page-hero-title { font-family: "IBM Plex Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; font-optical-sizing: auto; font-weight: var(--bomsync-hero-title-weight, 700); font-style: normal; font-size: clamp(1.5rem, 3.6vw, 2.1rem); color: #e8edf5; line-height: 1.12; letter-spacing: -0.03em; margin: 0 0 6px 0; text-rendering: optimizeLegibility; /* Title case per word (acronyms already uppercase in markup stay unchanged). */ text-transform: capitalize; font-synthesis: none; } .bomsync-page-hero-title-row { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin: 0 0 6px 0; } .bomsync-page-hero-title-row .bomsync-page-hero-title { margin: 0; flex: 1 1 220px; } .bomsync-page-hero-title-accessory { flex-shrink: 0; display: flex; align-items: center; justify-content: center; } .bomsync-page-hero-sub { font-size: 0.88rem; color: rgba(232 237 245 / 0.62); letter-spacing: 0.03em; margin: 0; line-height: 1.45; } .bomsync-page-hero-sub-row { display: flex; align-items: flex-start; gap: 14px; flex-wrap: wrap; margin-top: 2px; } .bomsync-page-hero-sub-lead { flex-shrink: 0; max-width: min(100%, 520px); } .bomsync-page-hero-sub-row .bomsync-page-hero-sub { flex: 1 1 220px; min-width: min(100%, 200px); } .bomsync-page-hero-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: flex-end; flex-shrink: 0; margin-left: auto; } /* Programs workspace hero — left-aligned eyebrow/title/subtitle (matches finance-billing-project-hero pilot). */ .programs-page-hero .bomsync-page-hero-eyebrow { flex-direction: row !important; flex-wrap: nowrap; align-items: center; gap: 10px; align-self: flex-start; text-align: left; } .programs-page-hero .bomsync-page-hero-eyebrow-label { text-align: left; } .programs-page-hero .bomsync-page-hero-eyebrow-icon-wrap > i.bi, .programs-page-hero .bomsync-page-hero-eyebrow-icon-wrap > i { line-height: 1; display: inline-flex; align-items: center; justify-content: center; width: 1.35rem; height: 1.35rem; margin: 0; font-size: 1.15rem; } .programs-page-hero .bomsync-page-hero-eyebrow-icon-wrap > i.bi::before, .programs-page-hero .bomsync-page-hero-eyebrow-icon-wrap > i::before { display: block; line-height: 1; } .programs-page-hero .bomsync-page-hero-sub-lead:not(:has(.bomsync-hub-hero-context-pill)) { display: none; } .programs-page-hero .bomsync-page-hero-title { text-transform: none; text-align: left; } .programs-page-hero .bomsync-page-hero-sub { text-align: left; } .programs-page-hero .bomsync-page-hero-sub-row { text-align: left; justify-content: flex-start; align-self: stretch; width: 100%; } /* Hero / on-dark icon buttons (User guides Info, etc.) */ .bomsync-ph-cta { border: none; border-radius: 10px; padding: 9px 16px; font-size: 0.86rem; font-weight: 600; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 8px; transition: filter 0.15s, transform 0.1s; white-space: nowrap; background: transparent; } .bomsync-ph-cta:hover { filter: brightness(1.1); transform: translateY(-1px); } .bomsync-ph-cta:active { transform: translateY(0); } .bomsync-ph-cta--icon { border: 1px solid rgba(255 255 255 / 0.2); color: rgba(232 237 245 / 0.72); padding: 9px 12px; } .bomsync-ph-cta--icon:hover { color: #e8edf5; border-color: rgba(255 255 255 / 0.32); } @media (max-width: 768px) { /* Handheld / media mode: vertically compress navy page heroes (MPO gold standard). */ .bomsync-page-hero { border-radius: 12px; margin-bottom: 10px; min-height: var(--bomsync-page-hero-min-height-mobile); } .bomsync-page-hero:has(.bomsync-page-hero-footer), .bomsync-page-hero:has(.bomsync-hero-lanes) { min-height: var(--bomsync-page-hero-min-height-with-footer-mobile); } .bomsync-page-hero-inner { display: grid; grid-template-columns: minmax(0, 1fr); align-items: start; align-content: start; justify-content: start; gap: 10px; padding: 12px 14px; min-height: 0; } .bomsync-page-hero-stack:has(.bomsync-page-hero-footer) .bomsync-page-hero-inner { padding-bottom: 10px; } .bomsync-page-hero-footer { padding: 10px 14px 12px; } .bomsync-page-hero-left { flex: none; width: 100%; min-width: 0; } .bomsync-page-hero-eyebrow { margin-bottom: 4px; gap: 8px; } .bomsync-page-hero-eyebrow-icon-wrap { width: 32px; height: 32px; min-width: 32px; min-height: 32px; border-radius: 8px; } .bomsync-page-hero-eyebrow-icon-wrap > i.bi, .bomsync-page-hero-eyebrow-icon-wrap > i { width: 1.1rem; height: 1.1rem; font-size: 1rem; } .bomsync-page-hero-title { font-size: clamp(1.25rem, 5.2vw, 1.55rem); margin-bottom: 4px; line-height: 1.15; } .bomsync-page-hero-title-row { gap: 10px; margin-bottom: 4px; } .bomsync-page-hero-sub { font-size: 0.86rem; line-height: 1.35; } .bomsync-page-hero-sub-row { gap: 8px; margin-top: 0; } .bomsync-page-hero-actions { width: 100%; margin-left: 0; justify-content: flex-start; gap: 8px; } .bomsync-page-hero::after { width: 160px; height: 160px; top: -28px; right: -28px; } .bomsync-page-breadcrumbs-slot { margin-bottom: 6px; } } /* ── Shared compact KPI strip (dashboard hubs: projects, BIM models home, etc.) ── */ .bomsync-hub-kpi-row { display: flex; flex-wrap: wrap; gap: 6px; align-items: stretch; } .bomsync-hub-kpi-tile { --bomsync-hub-kpi-accent: var(--brand-blue); flex: 1 1 76px; min-width: 76px; max-width: 152px; padding: 3px 8px 4px; border-radius: 8px; border: 1px solid var(--bomsync-border); background: var(--bomsync-elevated-surface); box-shadow: var(--bomsync-shadow-sm); border-top: 2px solid var(--bomsync-hub-kpi-accent); } .bomsync-hub-kpi-tile__icon { font-size: 0.72rem; line-height: 1; margin-bottom: 2px; color: var(--bomsync-hub-kpi-accent); } .bomsync-hub-kpi-tile__value { font-size: 1rem; font-weight: 700; line-height: 1.05; color: var(--bomsync-text); } .bomsync-hub-kpi-tile__label { font-size: 0.58rem; text-transform: uppercase; letter-spacing: 0.045em; color: var(--bomsync-text-muted); margin-top: 1px; line-height: 1.15; } .bomsync-hub-kpi-tile__sub { font-size: 0.58rem; color: var(--bomsync-text-muted); margin-top: 2px; line-height: 1.15; } .bomsync-hub-kpi-progress { height: 2px; background: rgb(var(--bomsync-shadow-rgb) / 0.08); border-radius: 2px; overflow: hidden; margin-top: 4px; } .bomsync-hub-kpi-progress__fill { height: 100%; border-radius: 2px; background: linear-gradient(90deg, #10c4ff, #6ea8fe); } /* ── KPI metric tiles (.cc-kpi): /command-hub/* Overview, finance billing, etc. Gradient + domain top bar — canonical match for /command-hub/bim Overview. ───────── */ .cc-kpi { background: linear-gradient(160deg, var(--bomsync-elevated-surface) 0%, var(--bomsync-brand-subtle) 100%); border: 1px solid var(--bomsync-border-strong); border-top: 3px solid var(--brand-blue); border-radius: 10px; padding: 10px 12px; box-shadow: var(--bomsync-shadow-md); } .cc-kpi.cc-kpi--projects { border-top-color: var(--domain-projects); background: linear-gradient(160deg, var(--bomsync-elevated-surface) 0%, var(--domain-projects-light) 100%); } .cc-kpi.cc-kpi--analytics { border-top-color: var(--domain-analytics); background: linear-gradient(160deg, var(--bomsync-elevated-surface) 0%, var(--domain-analytics-light) 100%); } .cc-kpi.cc-kpi--operations { border-top-color: var(--domain-operations); background: linear-gradient(160deg, var(--bomsync-elevated-surface) 0%, var(--domain-operations-light) 100%); } .cc-kpi.cc-kpi--bim { border-top-color: var(--domain-bim); background: linear-gradient(160deg, var(--bomsync-elevated-surface) 0%, var(--domain-bim-light) 100%); } .cc-kpi.cc-kpi--billing { border-top-color: var(--domain-billing); background: linear-gradient(160deg, var(--bomsync-elevated-surface) 0%, var(--domain-billing-light) 100%); } .cc-kpi-label { font-size: 0.78rem; color: var(--bomsync-text-secondary); } .cc-kpi-value { font-size: 1.25rem; font-weight: 700; color: var(--bomsync-text); } /* ── Activity KPI tiles (/manage/orders pattern; contacts + entity hubs) ── Action-oriented: elevated surface + strong domain accent — no pastel washes. */ .bomsync-activity-kpi { --bomsync-activity-accent: var(--brand-blue); cursor: pointer; transition: box-shadow 0.15s ease, transform 0.15s ease, border-color 0.12s ease; background: var(--bomsync-elevated-surface); border: 1px solid var(--bomsync-border-strong); border-top: 4px solid var(--bomsync-activity-accent); border-radius: 10px; padding: 12px 14px; height: 100%; min-height: 72px; box-shadow: var(--bomsync-shadow-sm); display: block; width: 100%; text-align: left; color: inherit; } .bomsync-activity-kpi:hover { box-shadow: var(--bomsync-shadow-md); transform: translateY(-1px); border-color: color-mix(in oklab, var(--bomsync-activity-accent) 35%, var(--bomsync-border-strong)); } .bomsync-activity-kpi:focus-visible { outline: 2px solid var(--bomsync-activity-accent); outline-offset: 2px; } .bomsync-activity-kpi-label { font-size: 0.78rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.02em; color: var(--bomsync-text-secondary); margin-bottom: 0.35rem; } .bomsync-activity-kpi-value { font-size: 1.75rem; font-weight: 700; line-height: 1.2; color: var(--bomsync-text-primary); font-variant-numeric: tabular-nums; } .bomsync-activity-kpi--hot { box-shadow: var(--bomsync-shadow-md); } .bomsync-activity-kpi--hot .bomsync-activity-kpi-value { color: var(--bomsync-activity-accent); } .bomsync-activity-kpi--demand { --bomsync-activity-accent: var(--domain-demand); } .bomsync-activity-kpi--pending, .bomsync-activity-kpi--po { --bomsync-activity-accent: var(--domain-po); } .bomsync-activity-kpi--so, .bomsync-activity-kpi--commercial { --bomsync-activity-accent: var(--domain-commercial); } .bomsync-activity-kpi--wo, .bomsync-activity-kpi--operations { --bomsync-activity-accent: var(--domain-operations); } .bomsync-activity-kpi--trade, .bomsync-activity-kpi--rfq { --bomsync-activity-accent: var(--domain-rfq); } .bomsync-activity-kpi--projects { --bomsync-activity-accent: var(--domain-projects); } .bomsync-activity-kpi--analytics, .bomsync-activity-kpi--programs { --bomsync-activity-accent: var(--domain-analytics); } .bomsync-activity-kpi--qualification { --bomsync-activity-accent: var(--domain-qualification); } .bomsync-activity-kpi--comms, .bomsync-activity-kpi--contacts { --bomsync-activity-accent: var(--domain-comms); } .bomsync-activity-kpi--bim { --bomsync-activity-accent: var(--domain-bim); } /* Gradient panel headers (contacts dashboard, type map, etc.) */ .bomsync-panel-card { border: 1px solid var(--bomsync-border-strong); border-radius: 12px; background: var(--bomsync-elevated-surface); box-shadow: var(--bomsync-shadow-sm); overflow: hidden; } /* * Surface chrome tiers (opt-in on .bomsync-panel-card): * default header = tier 2 scaffolding (navy) * .bomsync-panel--work = tier 3 work surface (teal-blue #015F78) * .bomsync-panel--satellite = tier 4 flat rails / reference * Staff: docs/help/staff/surface-chrome-tiers.md · Canon: docs/BOMSync-Surface-Chrome.md */ .bomsync-panel-card__header { display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 10px 14px; margin: 0; font-size: 0.92rem; font-weight: 600; color: var(--bomsync-on-dark-text); /* 3-stop dark → light-grey → dark (canonical panel cap; not 2-stop fade-out) */ background: var(--bomsync-chrome-grad-cap); border-radius: 12px 12px 0 0; box-shadow: 0 1px 0 rgb(255 255 255 / 0.06) inset; } /* Keep heading tags from overriding panel-cap type scale */ .bomsync-panel-card__header h1, .bomsync-panel-card__header h2, .bomsync-panel-card__header h3, .bomsync-panel-card__header h4, .bomsync-panel-card__header h5, .bomsync-panel-card__header h6 { margin: 0; font-size: inherit; font-weight: inherit; line-height: inherit; color: inherit; } .bomsync-panel-card__header .matrix-panel-header-title { display: inline-flex; align-items: center; gap: 8px; min-width: 0; font-size: inherit; font-weight: inherit; color: inherit; } .bomsync-panel-card__header .bi, .bomsync-panel-card__header .e-icons { color: inherit; opacity: 0.95; } .bomsync-panel-header-actions { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-left: auto; flex-shrink: 0; } /* Compact hero-style actions on navy panel headers — opt-in; does not increase header min-height */ .bomsync-panel-card__header .bomsync-panel-header-action-btn, .bomsync-panel-card__header button.bomsync-panel-header-action-btn, .bomsync-panel-card__header a.bomsync-panel-header-action-btn, .bomsync-panel-card__header .e-btn.bomsync-panel-header-action-btn, .bomsync-panel-card__header .e-control.e-btn.bomsync-panel-header-action-btn { border-radius: var(--bomsync-panel-header-action-btn-radius) !important; padding: var(--bomsync-panel-header-action-btn-padding) !important; min-height: var(--bomsync-panel-header-action-btn-min-height) !important; box-sizing: border-box !important; font-size: var(--bomsync-panel-header-action-btn-font-size) !important; line-height: var(--bomsync-panel-header-action-btn-line-height) !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: var(--bomsync-panel-header-action-btn-gap) !important; font-weight: 600 !important; cursor: pointer !important; white-space: nowrap !important; text-decoration: none !important; border: 1px solid var(--bomsync-glass-border) !important; transition: filter 0.15s, transform 0.1s, background 0.12s, border-color 0.12s, box-shadow 0.12s !important; } .bomsync-panel-card__header .bomsync-panel-header-action-btn--primary, .bomsync-panel-card__header button.bomsync-panel-header-action-btn--primary, .bomsync-panel-card__header a.bomsync-panel-header-action-btn--primary, .bomsync-panel-card__header .e-btn.bomsync-panel-header-action-btn--primary { background: linear-gradient(135deg, #2f6690, #1e4e78) !important; border: 1px solid var(--bomsync-glass-border-strong) !important; color: var(--bomsync-on-dark-text) !important; box-shadow: 0 1px 6px rgb(47 102 144 / 0.4), inset 0 1px 0 rgb(255 255 255 / 0.12) !important; } .bomsync-panel-card__header .bomsync-panel-header-action-btn--secondary, .bomsync-panel-card__header button.bomsync-panel-header-action-btn--secondary, .bomsync-panel-card__header a.bomsync-panel-header-action-btn--secondary, .bomsync-panel-card__header .e-btn.bomsync-panel-header-action-btn--secondary { background: var(--bomsync-glass-bg) !important; border: 1px solid var(--bomsync-glass-border) !important; color: var(--bomsync-on-dark-text) !important; backdrop-filter: blur(6px); } .bomsync-panel-card__header .bomsync-panel-header-action-btn:hover:not(:disabled), .bomsync-panel-card__header button.bomsync-panel-header-action-btn:hover:not(:disabled), .bomsync-panel-card__header a.bomsync-panel-header-action-btn:hover, .bomsync-panel-card__header .e-btn.bomsync-panel-header-action-btn:hover:not(:disabled) { filter: brightness(1.08); transform: translateY(-1px); } .bomsync-panel-card__header .bomsync-panel-header-action-btn--secondary:hover:not(:disabled), .bomsync-panel-card__header button.bomsync-panel-header-action-btn--secondary:hover:not(:disabled), .bomsync-panel-card__header a.bomsync-panel-header-action-btn--secondary:hover, .bomsync-panel-card__header .e-btn.bomsync-panel-header-action-btn--secondary:hover:not(:disabled) { background: var(--bomsync-glass-bg-hover) !important; border-color: var(--bomsync-glass-border-highlight) !important; color: var(--bomsync-on-dark-text) !important; } .bomsync-panel-card__header .bomsync-panel-header-action-btn:active:not(:disabled), .bomsync-panel-card__header button.bomsync-panel-header-action-btn:active:not(:disabled), .bomsync-panel-card__header .e-btn.bomsync-panel-header-action-btn:active:not(:disabled) { transform: translateY(0); } .bomsync-panel-card__header .bomsync-panel-header-action-btn:disabled, .bomsync-panel-card__header button.bomsync-panel-header-action-btn:disabled, .bomsync-panel-card__header .e-btn.bomsync-panel-header-action-btn.e-disabled, .bomsync-panel-card__header .e-btn.bomsync-panel-header-action-btn:disabled { opacity: 0.5; cursor: not-allowed !important; transform: none !important; filter: none !important; } .bomsync-panel-card__body { padding: 14px 16px 16px; } .bomsync-panel-card__lead { margin: 0 0 12px; } /* ── Tier 3 — work surface (teal-blue #015F78 cap) ────────────── */ .bomsync-panel-card.bomsync-panel--work { border-top: none; } .bomsync-panel-card.bomsync-panel--work > .bomsync-panel-card__header { background: var(--bomsync-chrome-grad-work); color: var(--bomsync-chrome-fg); border-radius: 12px 12px 0 0; } .bomsync-panel-card.bomsync-panel--work > .bomsync-panel-card__header .bi, .bomsync-panel-card.bomsync-panel--work > .bomsync-panel-card__header .e-icons { color: var(--bomsync-chrome-work-icon); opacity: 1; } .bomsync-panel-card.bomsync-panel--work > .bomsync-panel-card__body { background: var(--bomsync-surface-well); } /* Separate work-cap teal from Syncfusion grid header (avoids flush two-tone clash) */ .bomsync-panel-card.bomsync-panel--work > .bomsync-panel-card__body.p-0 { padding-top: 12px !important; } .bomsync-panel-card.bomsync-panel--work > .bomsync-panel-card__body > .e-grid:first-child, .bomsync-panel-card.bomsync-panel--work > .bomsync-panel-card__body > .e-control.e-grid:first-child { margin-top: 0; } /* Glass work-header actions on work caps (prefer native .matrix-panel-header-btn / .bomsync-work-cap-btn) */ .bomsync-panel-card.bomsync-panel--work > .bomsync-panel-card__header .matrix-panel-header-btn, .bomsync-panel-card.bomsync-panel--work > .bomsync-panel-card__header .bomsync-work-cap-btn, .bomsync-panel-card.bomsync-panel--work > .bomsync-panel-card__header .mpo-work-cap-btn, .bomsync-panel-card.bomsync-panel--work > .bomsync-panel-card__header .bomsync-panel-header-action-btn, .bomsync-panel-card.bomsync-panel--work > .bomsync-panel-card__header button.bomsync-panel-header-action-btn, .bomsync-panel-card.bomsync-panel--work > .bomsync-panel-card__header .e-btn.bomsync-panel-header-action-btn, .bomsync-panel-card.bomsync-panel--work > .bomsync-panel-card__header .e-control.e-btn.bomsync-panel-header-action-btn, .bomsync-panel-card.bomsync-panel--work > .bomsync-panel-card__header .bomsync-panel-header-action-btn--secondary, .bomsync-panel-card.bomsync-panel--work > .bomsync-panel-card__header .bomsync-panel-header-action-btn--primary { background: var(--bomsync-chrome-work-btn-bg) !important; background-color: var(--bomsync-chrome-work-btn-bg) !important; background-image: none !important; border: 1px solid var(--bomsync-chrome-work-btn-border) !important; color: var(--bomsync-chrome-fg) !important; box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.18) !important; backdrop-filter: blur(6px); filter: none !important; } .bomsync-panel-card.bomsync-panel--work > .bomsync-panel-card__header .matrix-panel-header-btn:hover, .bomsync-panel-card.bomsync-panel--work > .bomsync-panel-card__header .bomsync-work-cap-btn:hover, .bomsync-panel-card.bomsync-panel--work > .bomsync-panel-card__header .mpo-work-cap-btn:hover, .bomsync-panel-card.bomsync-panel--work > .bomsync-panel-card__header .bomsync-panel-header-action-btn:hover:not(:disabled), .bomsync-panel-card.bomsync-panel--work > .bomsync-panel-card__header button.bomsync-panel-header-action-btn:hover:not(:disabled), .bomsync-panel-card.bomsync-panel--work > .bomsync-panel-card__header .e-btn.bomsync-panel-header-action-btn:hover:not(:disabled), .bomsync-panel-card.bomsync-panel--work > .bomsync-panel-card__header .bomsync-panel-header-action-btn--secondary:hover:not(:disabled), .bomsync-panel-card.bomsync-panel--work > .bomsync-panel-card__header .bomsync-panel-header-action-btn--primary:hover:not(:disabled) { background: var(--bomsync-chrome-work-btn-bg-hov) !important; background-color: var(--bomsync-chrome-work-btn-bg-hov) !important; background-image: none !important; border-color: var(--bomsync-chrome-work-icon) !important; color: var(--bomsync-chrome-fg) !important; filter: none !important; /* PATH-equivalent hover quality (teal family, not path-cyan) */ box-shadow: 0 0 0 1px rgb(126 212 232 / 0.4), 0 0 12px rgb(126 212 232 / 0.22), inset 0 1px 0 rgb(255 255 255 / 0.22) !important; } .bomsync-panel-card.bomsync-panel--work > .bomsync-panel-card__header .matrix-panel-header-btn:active:not(:disabled), .bomsync-panel-card.bomsync-panel--work > .bomsync-panel-card__header .bomsync-work-cap-btn:active:not(:disabled), .bomsync-panel-card.bomsync-panel--work > .bomsync-panel-card__header .mpo-work-cap-btn:active:not(:disabled), .bomsync-panel-card.bomsync-panel--work > .bomsync-panel-card__header .bomsync-panel-header-action-btn:active:not(:disabled), .bomsync-panel-card.bomsync-panel--work > .bomsync-panel-card__header button.bomsync-panel-header-action-btn:active:not(:disabled), .bomsync-panel-card.bomsync-panel--work > .bomsync-panel-card__header .e-btn.bomsync-panel-header-action-btn:active:not(:disabled) { border-color: #9AE4F4 !important; box-shadow: 0 0 0 1px rgb(126 212 232 / 0.55), 0 0 14px rgb(126 212 232 / 0.28), inset 0 1px 0 rgb(255 255 255 / 0.18) !important; } .bomsync-panel-card.bomsync-panel--work > .bomsync-panel-card__header .matrix-panel-header-btn:focus-visible, .bomsync-panel-card.bomsync-panel--work > .bomsync-panel-card__header .bomsync-work-cap-btn:focus-visible, .bomsync-panel-card.bomsync-panel--work > .bomsync-panel-card__header .mpo-work-cap-btn:focus-visible, .bomsync-panel-card.bomsync-panel--work > .bomsync-panel-card__header .bomsync-panel-header-action-btn:focus-visible { outline: 2px solid var(--bomsync-chrome-work-icon); outline-offset: 2px; } .bomsync-panel-card.bomsync-panel--work > .bomsync-panel-card__header .bomsync-work-cap-btn .bi, .bomsync-panel-card.bomsync-panel--work > .bomsync-panel-card__header .bomsync-work-cap-btn .e-icons, .bomsync-panel-card.bomsync-panel--work > .bomsync-panel-card__header .mpo-work-cap-btn .bi, .bomsync-panel-card.bomsync-panel--work > .bomsync-panel-card__header .mpo-work-cap-btn .e-icons { color: var(--bomsync-chrome-work-icon); } /* Native work-cap button chrome (layout; colors above) */ .bomsync-panel-card.bomsync-panel--work > .bomsync-panel-card__header .matrix-panel-header-btn, .bomsync-panel-card.bomsync-panel--work > .bomsync-panel-card__header .bomsync-work-cap-btn, .bomsync-panel-card.bomsync-panel--work > .bomsync-panel-card__header .mpo-work-cap-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 32px; padding: 5px 12px; font-size: 0.8125rem; font-weight: 600; line-height: 1.2; border-radius: 8px; cursor: pointer; white-space: nowrap; } .bomsync-panel-card.bomsync-panel--work > .bomsync-panel-card__header .matrix-panel-header-actions { display: inline-flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px; } /* ── Library accordion (subordinate disclosure — slate, not navy) ─ Use .bomsync-library-accordion (alias .bs-library-accordion) inside work panels. Do NOT use .bomsync-accordion (FAQ navy) for nested record tools. */ .bomsync-library-accordion .e-accordion .e-acrdn-item, .bs-library-accordion .e-accordion .e-acrdn-item { margin-bottom: 8px; border: none !important; border-radius: 0; background: transparent !important; box-shadow: none !important; } .bomsync-library-accordion .e-accordion .e-acrdn-item .e-acrdn-header, .bs-library-accordion .e-accordion .e-acrdn-item .e-acrdn-header, .bomsync-library-accordion .e-accordion .e-acrdn-item.e-select > .e-acrdn-header, .bs-library-accordion .e-accordion .e-acrdn-item.e-select > .e-acrdn-header, .bomsync-library-accordion .e-accordion .e-acrdn-item.e-expand-state > .e-acrdn-header, .bs-library-accordion .e-accordion .e-acrdn-item.e-expand-state > .e-acrdn-header, .bomsync-library-accordion .e-accordion .e-acrdn-item.e-select.e-selected.e-expand-state > .e-acrdn-header, .bs-library-accordion .e-accordion .e-acrdn-item.e-select.e-selected.e-expand-state > .e-acrdn-header { background: var(--bomsync-accordion-bg) !important; background-color: transparent !important; color: var(--bomsync-accordion-fg) !important; border: 1px solid var(--bomsync-border) !important; border-left: var(--bomsync-accordion-rule-w) solid transparent !important; border-radius: 0 !important; padding: 13px 16px !important; min-height: 0 !important; box-shadow: none !important; margin-bottom: 0; filter: none !important; transition: background 120ms ease, border-left-color 120ms ease; } .bomsync-library-accordion .e-accordion .e-acrdn-item .e-acrdn-header:hover, .bs-library-accordion .e-accordion .e-acrdn-item .e-acrdn-header:hover, .bomsync-library-accordion .e-accordion .e-acrdn-item.e-select > .e-acrdn-header:hover, .bs-library-accordion .e-accordion .e-acrdn-item.e-select > .e-acrdn-header:hover { background: var(--bomsync-accordion-bg-hover) !important; color: var(--bomsync-accordion-fg) !important; filter: none !important; } .bomsync-library-accordion .e-accordion .e-acrdn-item.e-select > .e-acrdn-header, .bs-library-accordion .e-accordion .e-acrdn-item.e-select > .e-acrdn-header, .bomsync-library-accordion .e-accordion .e-acrdn-item.e-expand-state > .e-acrdn-header, .bs-library-accordion .e-accordion .e-acrdn-item.e-expand-state > .e-acrdn-header { border-left-color: var(--bomsync-accordion-rule) !important; } .bomsync-library-accordion .e-acrdn-header .e-acrdn-header-content, .bs-library-accordion .e-acrdn-header .e-acrdn-header-content { color: var(--bomsync-accordion-fg) !important; font-size: 15px; font-weight: 500; } .bomsync-library-accordion .e-acrdn-header .e-toggle-icon, .bomsync-library-accordion .e-acrdn-header .e-toggle-icon .e-icons, .bomsync-library-accordion .e-acrdn-header .e-acrdn-header-icon, .bomsync-library-accordion .e-acrdn-header .e-acrdn-header-icon .e-icons, .bs-library-accordion .e-acrdn-header .e-toggle-icon, .bs-library-accordion .e-acrdn-header .e-toggle-icon .e-icons, .bs-library-accordion .e-acrdn-header .e-acrdn-header-icon, .bs-library-accordion .e-acrdn-header .e-acrdn-header-icon .e-icons { color: var(--bomsync-accordion-icon) !important; } .bomsync-library-accordion .e-accordion .e-acrdn-item .e-acrdn-panel .e-acrdn-content, .bs-library-accordion .e-accordion .e-acrdn-item .e-acrdn-panel .e-acrdn-content { background: var(--bomsync-surface-well) !important; border: 1px solid var(--bomsync-border) !important; border-top: none !important; border-left: var(--bomsync-accordion-rule-w) solid var(--bomsync-accordion-rule) !important; padding: 16px !important; color: var(--bomsync-text) !important; } .bomsync-library-accordion .e-acrdn-header:focus-visible, .bs-library-accordion .e-acrdn-header:focus-visible { outline: 2px solid var(--bomsync-cyan-500) !important; outline-offset: -2px !important; box-shadow: none !important; } /* ── Tier 4 — satellite (flat, no navy gradient) ──────────────── */ .bomsync-panel-card.bomsync-panel--satellite { background: var(--bomsync-satellite-bg); border-top: var(--bomsync-satellite-rule-w) solid var(--bomsync-satellite-rule); border-radius: 0 0 12px 12px; } .bomsync-panel-card.bomsync-panel--satellite > .bomsync-panel-card__header { background: transparent; color: var(--bomsync-text); border-bottom: 1px solid var(--bomsync-border); box-shadow: none; border-radius: 0; min-height: 40px; } .bomsync-panel-card.bomsync-panel--satellite > .bomsync-panel-card__header .bi, .bomsync-panel-card.bomsync-panel--satellite > .bomsync-panel-card__header .e-icons { color: var(--bsx-action, #2F6690); opacity: 1; } .bomsync-panel-card.bomsync-panel--satellite > .bomsync-panel-card__body { background: var(--bomsync-surface-panel); } .bomsync-panel-card.bomsync-panel--satellite.is-healthy, .bomsync-panel-card.bomsync-panel--satellite.bomsync-panel--warn-healthy { border-top-color: var(--bomsync-state-healthy-bd); } .bomsync-panel-card.bomsync-panel--satellite.is-attention, .bomsync-panel-card.bomsync-panel--satellite.bomsync-panel--warn { border-top-color: var(--bomsync-state-attention-bd); } .bomsync-panel-card.bomsync-panel--satellite.is-blocked { border-top-color: var(--bomsync-state-blocked-bd); } .bomsync-panel-card.bomsync-panel--satellite .matrix-panel-header-btn, .bomsync-panel-card.bomsync-panel--satellite .bomsync-panel-header-action-btn { border-color: var(--bomsync-border-strong); color: var(--bomsync-text); background: var(--bomsync-surface-well); } /* Hub / content cards that must lift off page grey (opt-in; keeps rails sunken) */ .bomsync-panel-card.bomsync-panel--satellite.bomsync-panel--elevated { background: var(--bomsync-elevated-surface); border: 1px solid var(--bomsync-border-strong); border-top: 3px solid var(--bomsync-border-strong); border-radius: 12px; box-shadow: var(--bomsync-shadow-md); overflow: hidden; } .bomsync-panel-card.bomsync-panel--satellite.bomsync-panel--elevated > .bomsync-panel-card__header { background: linear-gradient(160deg, var(--bomsync-elevated-surface) 0%, var(--bomsync-brand-subtle) 100%); color: var(--bomsync-text-primary, var(--bomsync-text)); font-weight: 700; border-bottom: 1px solid var(--bomsync-border); } .bomsync-panel-card.bomsync-panel--satellite.bomsync-panel--elevated > .bomsync-panel-card__body { background: var(--bomsync-elevated-surface); } .bomsync-panel-card.bomsync-panel--satellite.bomsync-panel--elevated:hover { box-shadow: var(--bomsync-shadow-lg); } /* * Form / detail SfGrid inset — keep grids 15–25px off panel edges. * Use on panel bodies that host grids/forms. Opt out with .bomsync-grid-flush * or .p-0 on work panels that intentionally flush a grid under the cap. */ .bomsync-grid-inset { padding: 16px 20px 20px; } .bomsync-panel-card__body.bomsync-grid-inset { padding: 16px 20px 20px; } .bomsync-panel-card__body.bomsync-grid-flush, .bomsync-panel-card__body.p-0.bomsync-grid-flush { padding: 0; } /* * Nested caps (SfCard CardHeader wraps the header div): * Same tier tokens as direct-child rules above. */ .bomsync-panel-card.bomsync-panel--work > .e-card-header > .bomsync-panel-card__header { background: var(--bomsync-chrome-grad-work); color: var(--bomsync-chrome-fg); border-radius: 12px 12px 0 0; } .bomsync-panel-card.bomsync-panel--work > .e-card-header > .bomsync-panel-card__header .bi, .bomsync-panel-card.bomsync-panel--work > .e-card-header > .bomsync-panel-card__header .e-icons { color: var(--bomsync-chrome-work-icon); opacity: 1; } .bomsync-panel-card.bomsync-panel--work > .e-card-content { background: var(--bomsync-surface-well); } .bomsync-panel-card.bomsync-panel--work > .e-card-header > .bomsync-panel-card__header .matrix-panel-header-btn, .bomsync-panel-card.bomsync-panel--work > .e-card-header > .bomsync-panel-card__header .bomsync-work-cap-btn, .bomsync-panel-card.bomsync-panel--work > .e-card-header > .bomsync-panel-card__header .mpo-work-cap-btn { background: var(--bomsync-chrome-work-btn-bg) !important; background-color: var(--bomsync-chrome-work-btn-bg) !important; background-image: none !important; border: 1px solid var(--bomsync-chrome-work-btn-border) !important; color: var(--bomsync-chrome-fg) !important; box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.18) !important; } .bomsync-panel-card.bomsync-panel--work > .e-card-header > .bomsync-panel-card__header .matrix-panel-header-btn:hover, .bomsync-panel-card.bomsync-panel--work > .e-card-header > .bomsync-panel-card__header .bomsync-work-cap-btn:hover, .bomsync-panel-card.bomsync-panel--work > .e-card-header > .bomsync-panel-card__header .mpo-work-cap-btn:hover { background: var(--bomsync-chrome-work-btn-bg-hov) !important; background-color: var(--bomsync-chrome-work-btn-bg-hov) !important; border-color: var(--bomsync-chrome-work-icon) !important; color: var(--bomsync-chrome-fg) !important; } .bomsync-panel-card.bomsync-panel--satellite > .e-card-header > .bomsync-panel-card__header { background: transparent; color: var(--bomsync-text); border-bottom: 1px solid var(--bomsync-border); box-shadow: none; border-radius: 0; min-height: 40px; } .bomsync-panel-card.bomsync-panel--satellite > .e-card-header > .bomsync-panel-card__header .bi, .bomsync-panel-card.bomsync-panel--satellite > .e-card-header > .bomsync-panel-card__header .e-icons { color: var(--bsx-action, #2F6690); opacity: 1; } .bomsync-panel-card.bomsync-panel--satellite > .e-card-content { background: var(--bomsync-surface-panel); } .bomsync-panel-card.bomsync-panel--satellite.bomsync-panel--elevated > .e-card-header > .bomsync-panel-card__header { background: linear-gradient(160deg, var(--bomsync-elevated-surface) 0%, var(--bomsync-brand-subtle) 100%); color: var(--bomsync-text-primary, var(--bomsync-text)); font-weight: 700; border-bottom: 1px solid var(--bomsync-border); } .bomsync-panel-card.bomsync-panel--satellite.bomsync-panel--elevated > .e-card-content { background: var(--bomsync-elevated-surface); } /* ── Metric / KPI chips — identity top rule + semantic body wash ─ */ .bomsync-stat-chip { display: inline-flex; align-items: center; gap: 10px; padding: 9px 14px; border-radius: 0 0 10px 10px; border: 1px solid var(--bomsync-border); border-top: 3px solid var(--bomsync-state-neutral-bd); background: var(--bomsync-state-neutral-bg); box-shadow: var(--bomsync-shadow-sm); } .bomsync-stat-chip.is-healthy { border-top-color: var(--bomsync-state-healthy-bd); background: var(--bomsync-state-healthy-bg); } .bomsync-stat-chip.is-attention { border-top-color: var(--bomsync-state-attention-bd); background: var(--bomsync-state-attention-bg); } .bomsync-stat-chip.is-blocked { border-top-color: var(--bomsync-state-blocked-bd) !important; background: var(--bomsync-state-blocked-bg); } /* Page command bar — hero-adjacent actions on light elevated strip */ .bomsync-page-command-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 10px 14px; border: 1px solid var(--bomsync-border-strong); border-radius: 12px; background: radial-gradient(420px 120px at 4% 50%, rgb(47 102 144 / 0.08), transparent 55%), radial-gradient(420px 120px at 96% 50%, rgb(65 90 119 / 0.06), transparent 55%), var(--bomsync-elevated-surface); box-shadow: var(--bomsync-shadow-sm); } .bomsync-page-command-btn, button.bomsync-page-command-btn, a.bomsync-page-command-btn, .e-btn.bomsync-page-command-btn, .e-control.e-btn.bomsync-page-command-btn { border-radius: var(--bomsync-page-command-btn-radius) !important; padding: var(--bomsync-page-command-btn-padding) !important; min-height: var(--bomsync-page-command-btn-min-height) !important; box-sizing: border-box !important; font-size: var(--bomsync-page-command-btn-font-size) !important; line-height: var(--bomsync-page-command-btn-line-height) !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: var(--bomsync-page-command-btn-gap) !important; font-weight: 600 !important; cursor: pointer !important; white-space: nowrap !important; text-decoration: none !important; transition: filter 0.15s, transform 0.1s, background 0.12s, border-color 0.12s, box-shadow 0.12s !important; } .bomsync-page-command-btn--primary, button.bomsync-page-command-btn--primary, a.bomsync-page-command-btn--primary, .e-btn.bomsync-page-command-btn--primary { background: linear-gradient(135deg, #2f6690, #1e4e78) !important; border: 1px solid color-mix(in srgb, var(--bsx-action) 72%, var(--bomsync-border-strong)) !important; color: var(--bomsync-on-dark-text) !important; box-shadow: 0 2px 8px rgb(47 102 144 / 0.22), inset 0 1px 0 rgb(255 255 255 / 0.14) !important; } .bomsync-page-command-btn--secondary, button.bomsync-page-command-btn--secondary, a.bomsync-page-command-btn--secondary, .e-btn.bomsync-page-command-btn--secondary { background: var(--bomsync-elevated-surface) !important; border: 1px solid var(--bomsync-border-strong) !important; color: var(--bomsync-text) !important; box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.65) !important; } .bomsync-page-command-btn:hover:not(:disabled), button.bomsync-page-command-btn:hover:not(:disabled), a.bomsync-page-command-btn:hover, .e-btn.bomsync-page-command-btn:hover:not(:disabled) { filter: brightness(1.04); transform: translateY(-1px); } .bomsync-page-command-btn--secondary:hover:not(:disabled), button.bomsync-page-command-btn--secondary:hover:not(:disabled), a.bomsync-page-command-btn--secondary:hover, .e-btn.bomsync-page-command-btn--secondary:hover:not(:disabled) { background: color-mix(in oklab, var(--brand-blue) 6%, var(--bomsync-elevated-surface)) !important; border-color: color-mix(in oklab, var(--bsx-action) 35%, var(--bomsync-border-strong)) !important; } .bomsync-page-command-btn--active, button.bomsync-page-command-btn--active, a.bomsync-page-command-btn--active, .e-btn.bomsync-page-command-btn--active { background: radial-gradient(140% 200% at 0% 0%, rgb(106 215 255 / 0.2), transparent 52%), color-mix(in oklab, var(--bsx-action) 9%, var(--bomsync-elevated-surface)) !important; border: 1px solid var(--bomsync-hero-badge-border) !important; color: var(--bsx-action) !important; box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.72), 0 1px 4px rgb(47 102 144 / 0.1) !important; } .bomsync-page-command-btn--active:hover:not(:disabled), button.bomsync-page-command-btn--active:hover:not(:disabled), a.bomsync-page-command-btn--active:hover, .e-btn.bomsync-page-command-btn--active:hover:not(:disabled) { background: radial-gradient(140% 200% at 0% 0%, rgb(106 215 255 / 0.26), transparent 52%), color-mix(in oklab, var(--bsx-action) 13%, var(--bomsync-elevated-surface)) !important; border-color: color-mix(in srgb, var(--bomsync-hero-badge-border) 85%, rgb(106 215 255 / 0.55)) !important; } .bomsync-page-command-btn:active:not(:disabled), button.bomsync-page-command-btn:active:not(:disabled), .e-btn.bomsync-page-command-btn:active:not(:disabled) { transform: translateY(0); } .bomsync-page-command-btn:disabled, button.bomsync-page-command-btn:disabled, .e-btn.bomsync-page-command-btn.e-disabled, .e-btn.bomsync-page-command-btn:disabled { opacity: 1; color: var(--bomsync-text-muted) !important; cursor: not-allowed !important; transform: none !important; filter: none !important; } .bomsync-page-command-btn--primary:disabled, button.bomsync-page-command-btn--primary:disabled, .e-btn.bomsync-page-command-btn--primary:disabled { background: color-mix(in oklab, var(--bomsync-page-bg) 35%, var(--bomsync-elevated-surface)) !important; border-color: var(--bomsync-border) !important; box-shadow: none !important; } .bomsync-page-command-btn--secondary:disabled, button.bomsync-page-command-btn--secondary:disabled, .e-btn.bomsync-page-command-btn--secondary:disabled { background: color-mix(in oklab, var(--bomsync-page-bg) 35%, var(--bomsync-elevated-surface)) !important; border-color: var(--bomsync-border) !important; box-shadow: none !important; } /* Logistics hub drill-in command bar — Hub | Filters | Clear filters above SfGrid */ .logistics-hub-command-bar { gap: 10px; } .logistics-hub-command-bar__sep { width: 1px; align-self: stretch; min-height: 1.75rem; background: var(--bomsync-border-strong, #bcc6da); margin: 0 2px; flex-shrink: 0; } /* Active summary filter pill: dark grey + on-dark white (not light-blue hero context pills) */ .bomsync-logistics-filter-pill { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; box-sizing: border-box; padding: 6px 12px; min-height: var(--bomsync-page-command-btn-min-height, 36px); border-radius: 999px; background: color-mix(in srgb, var(--brand-blue, #111B2C) 78%, #4a5568); border: 1px solid color-mix(in srgb, var(--brand-blue, #111B2C) 55%, #64748b); color: var(--bomsync-on-dark-text, #e8edf5); font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.02em; line-height: 1.2; box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.08); } .bomsync-logistics-filter-pill > .bi { display: inline-flex; align-items: center; justify-content: center; width: 1rem; height: 1rem; margin: 0; line-height: 1; flex-shrink: 0; color: inherit; } .bomsync-logistics-filter-pill > .bi::before { display: block; line-height: 1; } /* Keep Syncfusion Filters dropdown trigger aligned with page command buttons */ .e-dropdown-btn.bomsync-page-command-btn.logistics-hub-filters-btn, .e-btn.bomsync-page-command-btn.logistics-hub-filters-btn { display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: var(--bomsync-page-command-btn-gap, 8px) !important; } .e-dropdown-btn.bomsync-page-command-btn.logistics-hub-filters-btn .e-btn-icon, .e-btn.bomsync-page-command-btn.logistics-hub-filters-btn .e-btn-icon { margin: 0 !important; } /* Quote summary / analytics side panels — subtle section band on light surfaces */ .bomsync-summary-section-heading { font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--bomsync-text-secondary); background: color-mix(in oklab, var(--brand-blue) 6%, var(--bomsync-elevated-surface)); border-radius: 6px; padding: 6px 10px; margin-bottom: 8px; } /* Syncfusion SfMediaQuery — hidden host in MainLayout */ .bomsync-media-query-host { position: absolute; width: 0; height: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } /* Adaptive Syncfusion surfaces — CSS fallback + bomsync-adaptive-dialog opt-in */ /* Entity grid edit dialog (Internal Grid / company dialogs) — navy header chrome */ .e-dialog.bomsync-entity-edit-dialog .e-dlg-header-content, .bomsync-entity-edit-dialog.e-dialog .e-dlg-header-content { background: var(--brand-blue, #111b2c) !important; border-bottom: 1px solid color-mix(in srgb, var(--bs-cyan, #6ad7ff) 35%, transparent) !important; padding: 0.75rem 1rem !important; } .e-dialog.bomsync-entity-edit-dialog .e-dlg-header, .bomsync-entity-edit-dialog.e-dialog .e-dlg-header { color: var(--bomsync-on-dark-text, #e8edf5) !important; font-weight: 650; letter-spacing: 0.01em; } .e-dialog.bomsync-entity-edit-dialog .e-dlg-header-content .e-btn.e-dlg-closeicon-btn, .bomsync-entity-edit-dialog.e-dialog .e-dlg-header-content .e-btn.e-dlg-closeicon-btn { background: transparent !important; border: 1px solid rgb(232 237 245 / 0.55) !important; border-radius: 6px !important; color: var(--bomsync-on-dark-text, #e8edf5) !important; box-shadow: none !important; } .e-dialog.bomsync-entity-edit-dialog .e-dlg-closeicon-btn .e-btn-icon, .bomsync-entity-edit-dialog.e-dialog .e-dlg-closeicon-btn .e-btn-icon { color: var(--bomsync-on-dark-text, #e8edf5) !important; } .e-dialog.bomsync-entity-edit-dialog .e-footer-content .e-btn.e-primary, .bomsync-entity-edit-dialog.e-dialog .e-footer-content .e-btn.e-primary { background: var(--brand-blue, #111b2c) !important; border-color: var(--brand-blue, #111b2c) !important; color: var(--bomsync-on-dark-text, #e8edf5) !important; } /* Path-heavy CNC batch upload: desktop must not stay at legacy 520px. */ @media (min-width: 1025px) { .e-dialog.e-popup.cnc-batch-upload-dialog, .cnc-batch-upload-dialog.e-dialog { min-width: min(960px, 96vw) !important; width: min(960px, 96vw) !important; max-width: 96vw !important; } } @media (max-width: 768px) { .e-dialog.e-popup.bomsync-adaptive-dialog, .bomsync-adaptive-dialog.e-dialog { max-width: calc(100vw - 12px) !important; } .e-ddl.e-popup, .e-combobox.e-popup, .e-multiselect.e-popup, .e-dropdownbase.e-popup, .e-ddt.e-popup { max-width: min(calc(100vw - 20px), 480px) !important; max-height: min(42vh, 320px) !important; box-sizing: border-box !important; overflow-y: auto !important; } /* Optional CssClass markers for denser toolbar lists (Smart PDF Stamp / Tool Chest, hubs). */ .e-ddl.e-popup.smart-pdf-toolbar-ddl, .e-popup.e-ddl.smart-pdf-toolbar-ddl, .e-ddl.e-popup.bomsync-mobile-ddl, .e-popup.e-ddl.bomsync-mobile-ddl, .e-combobox.e-popup.bomsync-mobile-ddl, .e-multiselect.e-popup.bomsync-mobile-ddl { max-height: min(42vh, 280px) !important; } /* SheetData Project / BIM Model: one list scrollbar. PopupHeight owns height. */ .e-combobox.e-popup.bomsync-mobile-ddl, .e-popup.e-combobox.bomsync-mobile-ddl, .e-multiselect.e-popup.bomsync-mobile-ddl, .e-popup.e-multiselect.bomsync-mobile-ddl, .e-popup.e-multi-select-list-wrapper.bomsync-mobile-ddl { overflow: hidden !important; max-height: none !important; } .e-combobox.e-popup.bomsync-mobile-ddl .e-content, .e-combobox.e-popup.bomsync-mobile-ddl .e-list-parent, .e-multiselect.e-popup.bomsync-mobile-ddl .e-content, .e-multiselect.e-popup.bomsync-mobile-ddl .e-list-parent, .e-popup.e-multi-select-list-wrapper.bomsync-mobile-ddl .e-content { max-height: 100%; overflow-y: auto; } .e-ddl.e-popup .e-content, .e-ddl.e-popup .e-list-parent, .e-ddl.e-popup .e-dropdownbase, .e-combobox.e-popup .e-content, .e-multiselect.e-popup .e-content { max-height: inherit !important; } .e-grid .e-toolbar .e-toolbar-item .e-tbar-btn-text { display: none; } .e-grid .e-toolbar .e-toolbar-item .e-tbar-btn .e-btn-icon { margin: 0; } } /* SfGrid compact row actions — hero-badge family on light rows; color variants for multi-action columns */ .e-btn.bomsync-grid-row-action-btn, .e-control.e-btn.bomsync-grid-row-action-btn, .e-grid .e-rowcell .e-btn.bomsync-grid-row-action-btn, button.bomsync-grid-row-action-btn, a.bomsync-grid-row-action-btn { border-radius: var(--bomsync-grid-row-action-radius) !important; padding: var(--bomsync-grid-row-action-padding) !important; min-height: var(--bomsync-grid-row-action-min-height) !important; box-sizing: border-box !important; font-size: var(--bomsync-grid-row-action-font-size) !important; line-height: var(--bomsync-grid-row-action-line-height) !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: var(--bomsync-grid-row-action-gap) !important; font-weight: 600 !important; cursor: pointer !important; white-space: nowrap !important; text-decoration: none !important; border: 1px solid var(--bomsync-glass-border) !important; color: var(--bomsync-on-dark-text) !important; /* Separate View/Edit from frozen/adjacent columns (Geoffrey 2026-10-11) */ margin-left: 10px !important; margin-inline-start: 10px !important; transition: filter 0.15s, transform 0.1s, background 0.12s, border-color 0.12s, box-shadow 0.12s !important; } /* Badge — glass teal for View (and View-like affordances such as item-id pills). Edit uses --edit (solid). */ .e-btn.bomsync-grid-row-action-btn--badge, .e-control.e-btn.bomsync-grid-row-action-btn--badge, .e-grid .e-rowcell .e-btn.bomsync-grid-row-action-btn--badge, button.bomsync-grid-row-action-btn--badge, a.bomsync-grid-row-action-btn--badge, .e-btn.bomsync-grid-row-action-btn:not([class*="bomsync-grid-row-action-btn--"]), .e-control.e-btn.bomsync-grid-row-action-btn:not([class*="bomsync-grid-row-action-btn--"]), .e-grid .e-rowcell .e-btn.bomsync-grid-row-action-btn:not([class*="bomsync-grid-row-action-btn--"]) { background: radial-gradient(140% 200% at 8% 0%, rgb(126 212 232 / 0.55), transparent 52%), linear-gradient(145deg, rgb(34 135 146 / 0.28), rgb(18 90 96 / 0.1)) !important; border: 1px solid color-mix(in srgb, var(--bomsync-confirm-border-highlight, #6ec6cd) 55%, var(--bomsync-grid-row-badge-border, #a8d4d8)) !important; color: var(--bomsync-grid-row-badge-fg) !important; backdrop-filter: blur(8px); box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.82), inset 0 -1px 0 rgb(18 90 96 / 0.06), 0 1px 5px rgb(var(--bomsync-confirm-shadow-rgb) / 0.16) !important; } /* Icon-only glass View — square, centered glyph */ button.bomsync-grid-row-action-btn--badge.bomsync-icon-btn, a.bomsync-grid-row-action-btn--badge.bomsync-icon-btn, .e-btn.bomsync-grid-row-action-btn--badge.bomsync-icon-btn, .e-btn.bomsync-grid-row-action-btn--badge.bomsync-sf-icon-btn { width: 28px !important; height: 28px !important; min-width: 28px !important; min-height: 28px !important; padding: 0 !important; gap: 0 !important; } .e-btn.bomsync-grid-row-action-btn--badge:hover:not(:disabled), .e-control.e-btn.bomsync-grid-row-action-btn--badge:hover:not(:disabled), .e-grid .e-rowcell .e-btn.bomsync-grid-row-action-btn--badge:hover:not(:disabled), button.bomsync-grid-row-action-btn--badge:hover:not(:disabled), a.bomsync-grid-row-action-btn--badge:hover, .e-btn.bomsync-grid-row-action-btn:not([class*="bomsync-grid-row-action-btn--"]):hover:not(:disabled), .e-control.e-btn.bomsync-grid-row-action-btn:not([class*="bomsync-grid-row-action-btn--"]):hover:not(:disabled), .e-grid .e-rowcell .e-btn.bomsync-grid-row-action-btn:not([class*="bomsync-grid-row-action-btn--"]):hover:not(:disabled) { filter: none !important; transform: translateY(-1px); background: radial-gradient(130% 180% at 0% 0%, rgb(110 198 205 / 0.48), transparent 55%), linear-gradient(145deg, rgb(34 135 146 / 0.28), rgb(18 90 96 / 0.16)) !important; border-color: var(--bomsync-confirm-border-highlight) !important; color: var(--bomsync-grid-row-badge-fg-hover) !important; box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.78), 0 2px 6px rgb(var(--bomsync-confirm-shadow-rgb) / 0.18) !important; } /* Edit — solid theme fill (not glass). Locked 2026-10-10: View = glass; Edit = solid. */ .e-btn.bomsync-grid-row-action-btn--edit, .e-control.e-btn.bomsync-grid-row-action-btn--edit, .e-grid .e-rowcell .e-btn.bomsync-grid-row-action-btn--edit, button.bomsync-grid-row-action-btn--edit, a.bomsync-grid-row-action-btn--edit { background: var(--bsx-option, #415A77) !important; border: 1px solid var(--bomsync-border-strong, #bcc6da) !important; color: var(--bomsync-on-dark-text, #e8edf5) !important; backdrop-filter: none !important; box-shadow: 0 1px 4px rgb(var(--bomsync-shadow-rgb, 17 27 44) / 0.22) !important; } .e-btn.bomsync-grid-row-action-btn--edit:hover:not(:disabled), .e-control.e-btn.bomsync-grid-row-action-btn--edit:hover:not(:disabled), .e-grid .e-rowcell .e-btn.bomsync-grid-row-action-btn--edit:hover:not(:disabled), button.bomsync-grid-row-action-btn--edit:hover:not(:disabled), a.bomsync-grid-row-action-btn--edit:hover { filter: none !important; transform: translateY(-1px); background: #334966 !important; border-color: #d7dde8 !important; color: #FFFFFF !important; box-shadow: 0 2px 6px rgb(var(--bomsync-shadow-rgb, 17 27 44) / 0.28) !important; } .e-btn.bomsync-grid-row-action-btn--primary, .e-control.e-btn.bomsync-grid-row-action-btn--primary, .e-grid .e-rowcell .e-btn.bomsync-grid-row-action-btn--primary, button.bomsync-grid-row-action-btn--primary, a.bomsync-grid-row-action-btn--primary { background: linear-gradient(135deg, #2f6690, #1e4e78) !important; border: 1px solid var(--bomsync-glass-border-strong) !important; box-shadow: 0 1px 4px rgb(47 102 144 / 0.28), inset 0 1px 0 rgb(255 255 255 / 0.1) !important; color: var(--bomsync-on-dark-text, #f8fafc) !important; } .e-btn.bomsync-grid-row-action-btn--confirm, .e-control.e-btn.bomsync-grid-row-action-btn--confirm, .e-grid .e-rowcell .e-btn.bomsync-grid-row-action-btn--confirm, button.bomsync-grid-row-action-btn--confirm, a.bomsync-grid-row-action-btn--confirm { background: linear-gradient(135deg, var(--bomsync-confirm-gradient-start), var(--bomsync-confirm-gradient-end)) !important; border: 1px solid var(--bomsync-confirm-border) !important; box-shadow: 0 1px 4px rgb(var(--bomsync-confirm-shadow-rgb) / 0.24), inset 0 1px 0 rgb(255 255 255 / 0.1) !important; } .e-btn.bomsync-grid-row-action-btn--option, .e-control.e-btn.bomsync-grid-row-action-btn--option, .e-grid .e-rowcell .e-btn.bomsync-grid-row-action-btn--option, button.bomsync-grid-row-action-btn--option, a.bomsync-grid-row-action-btn--option { background: linear-gradient(135deg, rgb(65 90 119 / 0.96), rgb(51 65 92 / 0.98)) !important; border: 1px solid rgb(255 255 255 / 0.32) !important; } /* Warn — amber glass for succession / attention actions (not teal work badge) */ .e-btn.bomsync-grid-row-action-btn--warn, .e-control.e-btn.bomsync-grid-row-action-btn--warn, .e-grid .e-rowcell .e-btn.bomsync-grid-row-action-btn--warn, button.bomsync-grid-row-action-btn--warn, a.bomsync-grid-row-action-btn--warn { background: radial-gradient(130% 180% at 0% 0%, rgb(251 191 36 / 0.42), transparent 55%), linear-gradient(145deg, rgb(245 158 11 / 0.28), rgb(180 83 9 / 0.14)) !important; border: 1px solid color-mix(in srgb, var(--status-amber, #f59e0b) 45%, var(--bomsync-border-strong, #bcc6da)) !important; color: color-mix(in srgb, var(--status-amber, #d97706) 72%, var(--bomsync-text-primary, #111827)) !important; box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.7), 0 1px 4px rgb(180 83 9 / 0.16) !important; } .e-btn.bomsync-grid-row-action-btn--warn:hover:not(:disabled), .e-control.e-btn.bomsync-grid-row-action-btn--warn:hover:not(:disabled), .e-grid .e-rowcell .e-btn.bomsync-grid-row-action-btn--warn:hover:not(:disabled), button.bomsync-grid-row-action-btn--warn:hover:not(:disabled), a.bomsync-grid-row-action-btn--warn:hover { filter: none !important; transform: translateY(-1px); background: radial-gradient(130% 180% at 0% 0%, rgb(252 211 77 / 0.55), transparent 55%), linear-gradient(145deg, rgb(245 158 11 / 0.36), rgb(180 83 9 / 0.2)) !important; border-color: var(--status-amber, #f59e0b) !important; color: color-mix(in srgb, #b45309 80%, var(--bomsync-text-primary, #111827)) !important; box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.78), 0 2px 6px rgb(180 83 9 / 0.22) !important; } .e-btn.bomsync-grid-row-action-btn:hover:not(:disabled), .e-control.e-btn.bomsync-grid-row-action-btn:hover:not(:disabled), .e-grid .e-rowcell .e-btn.bomsync-grid-row-action-btn:hover:not(:disabled), button.bomsync-grid-row-action-btn:hover:not(:disabled), a.bomsync-grid-row-action-btn:hover { filter: brightness(1.1) saturate(1.04); transform: translateY(-1px); border-color: var(--bomsync-glass-border-highlight) !important; } .e-btn.bomsync-grid-row-action-btn:active:not(:disabled), .e-control.e-btn.bomsync-grid-row-action-btn:active:not(:disabled), .e-grid .e-rowcell .e-btn.bomsync-grid-row-action-btn:active:not(:disabled), button.bomsync-grid-row-action-btn:active:not(:disabled) { transform: translateY(0); filter: brightness(1.04); } .e-btn.bomsync-grid-row-action-btn:disabled, .e-control.e-btn.bomsync-grid-row-action-btn.e-disabled, .e-grid .e-rowcell .e-btn.bomsync-grid-row-action-btn:disabled, button.bomsync-grid-row-action-btn:disabled { opacity: 0.5; cursor: not-allowed !important; transform: none !important; filter: none !important; } /* Work (teal) panel SfGrid: legacy Actions .btn / bare .e-btn → teal badge family (Contract Templates gold standard). Prefer explicit bomsync-grid-row-action-btn bomsync-grid-row-action-btn--badge in markup. */ .bomsync-panel-card.bomsync-panel--work .e-grid td.e-rowcell > button.btn:not(.bomsync-grid-row-action-btn), .bomsync-panel-card.bomsync-panel--work .e-grid td.e-rowcell > a.btn:not(.bomsync-grid-row-action-btn), .bomsync-panel-card.bomsync-panel--work .e-grid td.e-rowcell > button.e-btn:not(.bomsync-grid-row-action-btn):not(.e-tbar-btn):not(.e-checkbox):not(.e-switch) { border-radius: var(--bomsync-grid-row-action-radius) !important; padding: var(--bomsync-grid-row-action-padding) !important; min-height: var(--bomsync-grid-row-action-min-height) !important; box-sizing: border-box !important; font-size: var(--bomsync-grid-row-action-font-size) !important; line-height: var(--bomsync-grid-row-action-line-height) !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: var(--bomsync-grid-row-action-gap) !important; font-weight: 600 !important; white-space: nowrap !important; text-decoration: none !important; background: radial-gradient(130% 180% at 0% 0%, var(--bomsync-grid-row-badge-highlight), transparent 55%), linear-gradient(145deg, rgb(34 135 146 / 0.22), var(--bomsync-grid-row-badge-bg)) !important; border: 1px solid var(--bomsync-grid-row-badge-border) !important; color: var(--bomsync-grid-row-badge-fg) !important; box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.72), 0 1px 4px rgb(var(--bomsync-confirm-shadow-rgb) / 0.14) !important; } .bomsync-panel-card.bomsync-panel--work .e-grid td.e-rowcell > button.btn:not(.bomsync-grid-row-action-btn):hover:not(:disabled), .bomsync-panel-card.bomsync-panel--work .e-grid td.e-rowcell > a.btn:not(.bomsync-grid-row-action-btn):hover, .bomsync-panel-card.bomsync-panel--work .e-grid td.e-rowcell > button.e-btn:not(.bomsync-grid-row-action-btn):not(.e-tbar-btn):hover:not(:disabled) { transform: translateY(-1px); background: radial-gradient(130% 180% at 0% 0%, rgb(110 198 205 / 0.48), transparent 55%), linear-gradient(145deg, rgb(34 135 146 / 0.28), rgb(18 90 96 / 0.16)) !important; border-color: var(--bomsync-confirm-border-highlight) !important; color: var(--bomsync-grid-row-badge-fg-hover) !important; box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.78), 0 2px 6px rgb(var(--bomsync-confirm-shadow-rgb) / 0.18) !important; } /* Lens IFC splitter rails — flat navy panel headers (Structure, IFC properties, item detail) */ .bomsync-lens-panel-header { display: flex; align-items: center; gap: 8px; min-height: 40px; padding: 8px 12px; margin: 0; font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--bomsync-on-dark-text); background: radial-gradient(520px 160px at 8% 50%, var(--bsx-action, #2F6690), transparent 58%), radial-gradient(480px 160px at 92% 50%, var(--bsx-option, #415A77), transparent 56%), var(--brand-blue, #111B2C); border-bottom: 1px solid rgb(255 255 255 / 0.08) !important; box-shadow: 0 1px 0 rgb(255 255 255 / 0.06) inset; flex-shrink: 0; } .bomsync-lens-panel-header .bi { color: inherit; opacity: 0.95; } .bomsync-lens-panel-header .lens-ifc-side-rail-collapse-btn { border-color: rgb(255 255 255 / 0.35); background: rgb(255 255 255 / 0.12); color: var(--bomsync-on-dark-text); } .bomsync-lens-panel-header .lens-ifc-side-rail-collapse-btn:hover { background: rgb(255 255 255 / 0.22); border-color: rgb(106 215 255 / 0.45); color: #fff; } /* Expand / Collapse all — temperate white on navy chrome (beats Bootstrap .btn-link) */ .bomsync-lens-panel-header .lens-ifc-pset-bulk-btn, .bomsync-lens-panel-header .lens-ifc-pset-bulk-btn.btn-link { font-size: 0.72rem; font-weight: 600; letter-spacing: 0.02em; color: rgb(232 237 245 / 0.9) !important; text-decoration: none !important; transition: color 0.15s ease, transform 0.15s ease, text-shadow 0.15s ease; } .bomsync-lens-panel-header .lens-ifc-pset-bulk-btn:hover, .bomsync-lens-panel-header .lens-ifc-pset-bulk-btn.btn-link:hover { color: #fff !important; text-decoration: none !important; transform: scale(1.06); text-shadow: 0 0 10px rgb(106 215 255 / 0.35); } .bomsync-lens-panel-header-tab { border: 1px solid rgb(255 255 255 / 0.32); border-radius: 6px; background: transparent; color: rgb(232 237 245 / 0.88); font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; padding: 4px 10px; line-height: 1.2; cursor: pointer; } .bomsync-lens-panel-header-tab:hover { background: rgb(255 255 255 / 0.12); color: #fff; } .bomsync-lens-panel-header-tab.is-active { background: rgb(255 255 255 / 0.2); border-color: rgb(106 215 255 / 0.45); color: #fff; } .bomsync-page-hero-footer .bomsync-activity-kpi { min-height: 64px; padding: 10px 12px; } .bomsync-page-hero-footer .bomsync-activity-kpi-value { font-size: 1.45rem; } .bomsync-page-hero-footer .bomsync-activity-kpi-label { font-size: 0.68rem; } /* ── New-tab affordance (opens in new browser tab) Small “external” glyph (box-arrow-up-right) top-right on button-like anchors. Skips .btn-link and prose links; opt out with .bomsync-no-new-tab-icon. Opt in for plain links: add class .bomsync-external-tab. ─────────────────── */ :root { --bomsync-new-tab-icon-size: 0.55rem; --bomsync-new-tab-icon-offset-top: 0.26rem; --bomsync-new-tab-icon-offset-inline: 0.32rem; /* Gap between last text glyph and the new-tab icon (LTR/RTL-safe via padding-inline-end on the anchor). */ --bomsync-new-tab-text-gap: 5px; --bomsync-new-tab-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2016%2016%22%3E%3Cpath%20fill%3D%22black%22%20d%3D%22M8.636%203.5a.5.5%200%200%200-.5-.5H1.5A1.5%201.5%200%200%200%200%204.5v10A1.5%201.5%200%200%200%201.5%2016h10a1.5%201.5%200%200%200%201.5-1.5V7.864a.5.5%200%200%200-1%200V14.5a.5.5%200%200%201-.5.5h-10a.5.5%200%200%201-.5-.5v-10a.5.5%200%200%201%20.5-.5h6.636a.5.5%200%200%200%20.5-.5z%22%2F%3E%3Cpath%20fill%3D%22black%22%20d%3D%22M16%20.5a.5.5%200%200%200-.5-.5h-5a.5.5%200%200%200%200%201h3.793L6.146%209.146a.5.5%200%201%200%20.708.708L15%201.707V5.5a.5.5%200%200%200%201%200v-5z%22%2F%3E%3C%2Fsvg%3E"); } a[target="_blank"]:not(.btn-link):not(.bomsync-no-new-tab-icon).btn, a[target="_blank"]:not(.bomsync-no-new-tab-icon).e-btn, a[target="_blank"]:not(.bomsync-no-new-tab-icon).bomsync-hub-hero-action-btn, a[target="_blank"]:not(.bomsync-no-new-tab-icon).bomsync-page-command-btn, a[target="_blank"]:not(.bomsync-no-new-tab-icon).bomsync-workflow-pipeline-btn, a[target="_blank"]:not(.bomsync-no-new-tab-icon).mpo-doc-link, a[target="_blank"]:not(.bomsync-no-new-tab-icon).project-hub-toolbar-btn, a[target="_blank"]:not(.bomsync-no-new-tab-icon).dropdown-item, a[target="_blank"].bomsync-external-tab:not(.bomsync-no-new-tab-icon) { position: relative; padding-inline-end: calc(var(--bomsync-new-tab-text-gap) + var(--bomsync-new-tab-icon-size) + var(--bomsync-new-tab-icon-offset-inline)); } a[target="_blank"]:not(.btn-link):not(.bomsync-no-new-tab-icon).btn::after, a[target="_blank"]:not(.bomsync-no-new-tab-icon).e-btn::after, a[target="_blank"]:not(.bomsync-no-new-tab-icon).bomsync-hub-hero-action-btn::after, a[target="_blank"]:not(.bomsync-no-new-tab-icon).bomsync-page-command-btn::after, a[target="_blank"]:not(.bomsync-no-new-tab-icon).bomsync-workflow-pipeline-btn::after, a[target="_blank"]:not(.bomsync-no-new-tab-icon).mpo-doc-link::after, a[target="_blank"]:not(.bomsync-no-new-tab-icon).project-hub-toolbar-btn::after, a[target="_blank"]:not(.bomsync-no-new-tab-icon).dropdown-item::after, a[target="_blank"].bomsync-external-tab:not(.bomsync-no-new-tab-icon)::after { content: ""; position: absolute; top: var(--bomsync-new-tab-icon-offset-top); inset-inline-end: var(--bomsync-new-tab-icon-offset-inline); width: var(--bomsync-new-tab-icon-size); height: var(--bomsync-new-tab-icon-size); pointer-events: none; background-color: currentColor; -webkit-mask-image: var(--bomsync-new-tab-mask); mask-image: var(--bomsync-new-tab-mask); -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; opacity: 0.92; } a[target="_blank"]:not(.bomsync-no-new-tab-icon).btn-sm::after, a[target="_blank"]:not(.bomsync-no-new-tab-icon).btn.btn-sm::after { --bomsync-new-tab-icon-size: 0.48rem; --bomsync-new-tab-icon-offset-top: 0.22rem; --bomsync-new-tab-icon-offset-inline: 0.28rem; } a[target="_blank"]:not(.bomsync-no-new-tab-icon).dropdown-item::after { --bomsync-new-tab-icon-size: 0.5rem; --bomsync-new-tab-icon-offset-top: 0.42rem; --bomsync-new-tab-icon-offset-inline: 0.55rem; } /* ═══════════════════════════════════════════════════════════════════════════ GridInfoDialog — shared SfDialog info panel (GridInfoDialog.razor) Hub-style section titles, deep cyan-teal instruction rail, navy feature labels. ═══════════════════════════════════════════════════════════════════════════ */ .bomsync-grid-info-dialog-host { --bomsync-grid-info-rail: #0a7285; --bomsync-grid-info-rail-border: color-mix(in srgb, var(--bomsync-grid-info-rail) 24%, var(--bomsync-border-subtle, #dde3ec)); --bomsync-grid-info-features-bg: var(--bomsync-surface-2, #edf0f7); padding: 1rem 1.125rem 1.25rem; } .bomsync-grid-info-dialog__block { margin-bottom: 1.25rem; } .bomsync-grid-info-dialog__block:last-child { margin-bottom: 0; } /* Section titles: compact hub flare + warm on-dark title */ .bomsync-grid-info-dialog__section-head.bomsync-hub-bg { border-radius: 10px; padding: 0.55rem 0.85rem; margin: 0 0 0.75rem; font-size: 1rem; font-weight: 600; line-height: 1.35; color: var(--bomsync-on-dark-text, #e8edf5); display: flex; align-items: center; gap: 0.45rem; } .bomsync-grid-info-dialog__section-head.bomsync-hub-bg .e-icons { color: var(--bomsync-on-dark-text, #e8edf5); font-size: 1.05rem; } /* Instructions body: elevated surface + deep cyan-teal left rail */ .bomsync-grid-info-dialog__instructions-body { background: color-mix(in srgb, var(--bomsync-elevated-surface) 92%, color-mix(in srgb, var(--bomsync-grid-info-rail) 10%, transparent)); border: 1px solid var(--bomsync-grid-info-rail-border); border-left: 4px solid var(--bomsync-grid-info-rail); border-radius: 0 10px 10px 0; padding: 1rem 1.125rem; line-height: 1.6; color: var(--bomsync-text-secondary); font-size: 1rem; } .bomsync-grid-info-dialog__instructions-body p, .bomsync-grid-info-dialog__instructions-body li { font-size: 1rem; line-height: 1.6; color: var(--bomsync-text-secondary); } .bomsync-grid-info-dialog__instructions-body p:last-child, .bomsync-grid-info-dialog__instructions-body ul:last-child { margin-bottom: 0; } .bomsync-grid-info-dialog__instructions-body a { color: var(--bsx-action, #2f6690); } /* Features: darker grey panel + two-column rows */ .bomsync-grid-info-dialog__features-panel { background: var(--bomsync-grid-info-features-bg); border: 1px solid var(--bomsync-border-subtle, rgb(var(--bomsync-shadow-rgb) / 0.12)); border-radius: 10px; padding: 0.65rem 1rem 0.75rem; } .bomsync-grid-info-dialog__features-list { list-style: none; margin: 0; padding: 0; } .bomsync-grid-info-dialog__feature-row { display: grid; grid-template-columns: minmax(7.5rem, 10.5rem) minmax(0, 1fr); column-gap: 1rem; row-gap: 0.25rem; align-items: start; padding: 0.65rem 0; border-bottom: 1px solid rgb(var(--bomsync-shadow-rgb) / 0.08); } .bomsync-grid-info-dialog__feature-row:last-child { border-bottom: none; padding-bottom: 0; } .bomsync-grid-info-dialog__feature-title { color: var(--bs-navy, #1b3a5c); font-weight: 600; font-size: 0.9375rem; line-height: 1.45; } .bomsync-grid-info-dialog__feature-desc { color: var(--bomsync-text-secondary); font-size: 1rem; line-height: 1.6; display: block; } /* * Dark: Features used light --bomsync-surface-2 while Dark remaps * --bomsync-text-secondary to on-dark grey → unreadable. Align panel + * title/desc with elevated Dark surfaces (Instructions already adapt). */ html[data-bomsync-theme="dark"]:not([data-bomsync-theme-preview]) .bomsync-grid-info-dialog-host, html[data-bomsync-theme-preview="dark"] .bomsync-grid-info-dialog-host { --bomsync-grid-info-features-bg: var(--bomsync-elevated-surface, #1A2638); --bomsync-grid-info-rail-border: color-mix(in srgb, var(--bomsync-grid-info-rail) 36%, var(--bomsync-border, #3A4F6A)); } html[data-bomsync-theme="dark"]:not([data-bomsync-theme-preview]) .bomsync-grid-info-dialog__features-panel, html[data-bomsync-theme-preview="dark"] .bomsync-grid-info-dialog__features-panel { background: var(--bomsync-grid-info-features-bg) !important; border-color: var(--bomsync-border, #3A4F6A) !important; } html[data-bomsync-theme="dark"]:not([data-bomsync-theme-preview]) .bomsync-grid-info-dialog__feature-row, html[data-bomsync-theme-preview="dark"] .bomsync-grid-info-dialog__feature-row { border-bottom-color: color-mix(in srgb, var(--bomsync-border, #3A4F6A) 72%, transparent) !important; } html[data-bomsync-theme="dark"]:not([data-bomsync-theme-preview]) .bomsync-grid-info-dialog__feature-title, html[data-bomsync-theme-preview="dark"] .bomsync-grid-info-dialog__feature-title { color: var(--bomsync-text-primary, #E3EAF2) !important; } html[data-bomsync-theme="dark"]:not([data-bomsync-theme-preview]) .bomsync-grid-info-dialog__feature-desc, html[data-bomsync-theme-preview="dark"] .bomsync-grid-info-dialog__feature-desc { color: #C9D6E3 !important; } /* ── Syncfusion .bomsync-tab horizontal — final cascade (loads after syncfusion.css) ── */ .e-tab.bomsync-tab, .bomsync-tab.e-tab, .bomsync-tab { --tab-surface: var(--bomsync-tab-inactive-end, #4a5362); --tab-surface-hover: var(--bomsync-tab-inactive-hover-start, #6a7484); --tab-surface-border: var(--bomsync-tab-inactive-border, rgba(154, 166, 184, 0.3)); --tab-fg: var(--bomsync-tab-inactive-fg, rgb(255 248 238)); --tab-fg-hover: var(--bomsync-tab-inactive-fg-hover, rgb(255 252 246)); } .bomsync-tab .e-tab-header:not(.e-vertical) .e-toolbar-item:not(.e-active), .e-tab.bomsync-tab .e-tab-header:not(.e-vertical) .e-toolbar-item:not(.e-active), .e-tab.bomsync-tab.e-lib .e-tab-header:not(.e-vertical) .e-toolbar-item:not(.e-active) { background: linear-gradient(180deg, #5a6474 0%, #4a5362 100%) !important; border: 1px solid rgba(154, 166, 184, 0.3) !important; border-bottom: none !important; box-shadow: none !important; } .bomsync-tab .e-tab-header:not(.e-vertical) .e-toolbar-item:not(.e-active) .e-tab-wrap, .e-tab.bomsync-tab .e-tab-header:not(.e-vertical) .e-toolbar-item:not(.e-active) .e-tab-wrap, .e-tab.bomsync-tab.e-lib .e-tab-header:not(.e-vertical) .e-toolbar-item:not(.e-active) .e-tab-wrap { background: linear-gradient(180deg, #5a6474 0%, #4a5362 100%) !important; border: 1px solid rgba(154, 166, 184, 0.3) !important; border-bottom: none !important; } .bomsync-tab .e-tab-header:not(.e-vertical) .e-toolbar-item:not(.e-active) .e-tab-text, .bomsync-tab .e-tab-header:not(.e-vertical) .e-toolbar-item:not(.e-active) .e-tab-icon, .bomsync-tab .e-tab-header:not(.e-vertical) .e-toolbar-item:not(.e-active) .e-tab-wrap .bi, .bomsync-tab .e-tab-header:not(.e-vertical) .e-toolbar-item:not(.e-active) .e-tab-wrap .bi::before, .bomsync-tab .e-tab-header:not(.e-vertical) .e-toolbar-item:not(.e-active) .e-tab-wrap .e-icons { color: rgb(255 248 238) !important; -webkit-text-fill-color: rgb(255 248 238) !important; opacity: 1 !important; } .bomsync-tab .e-tab-header:not(.e-vertical) .e-toolbar-item:hover:not(.e-active), .bomsync-tab .e-tab-header:not(.e-vertical) .e-toolbar-item:hover:not(.e-active) .e-tab-wrap { background: linear-gradient(180deg, #6a7484 0%, #565f6e 100%) !important; border-color: rgba(154, 166, 184, 0.3) !important; } .bomsync-tab .e-tab-header:not(.e-vertical) .e-toolbar-item:hover:not(.e-active) .e-tab-text, .bomsync-tab .e-tab-header:not(.e-vertical) .e-toolbar-item:hover:not(.e-active) .e-tab-icon, .bomsync-tab .e-tab-header:not(.e-vertical) .e-toolbar-item:hover:not(.e-active) .e-tab-wrap .bi, .bomsync-tab .e-tab-header:not(.e-vertical) .e-toolbar-item:hover:not(.e-active) .e-tab-wrap .bi::before, .bomsync-tab .e-tab-header:not(.e-vertical) .e-toolbar-item:hover:not(.e-active) .e-tab-wrap .e-icons { color: rgb(255 252 246) !important; -webkit-text-fill-color: rgb(255 252 246) !important; } .bomsync-tab .e-tab-header:not(.e-vertical) .e-toolbar-item.e-active, .bomsync-tab .e-tab-header:not(.e-vertical) .e-toolbar-item.e-active .e-tab-wrap { background: linear-gradient(180deg, #2f5f94 0%, #234e7e 100%) !important; border-color: #234e7e !important; } .bomsync-tab .e-tab-header:not(.e-vertical) .e-toolbar-item.e-active .e-tab-text, .bomsync-tab .e-tab-header:not(.e-vertical) .e-toolbar-item.e-active .e-tab-icon, .bomsync-tab .e-tab-header:not(.e-vertical) .e-toolbar-item.e-active .e-tab-wrap .bi, .bomsync-tab .e-tab-header:not(.e-vertical) .e-toolbar-item.e-active .e-tab-wrap .bi::before, .bomsync-tab .e-tab-header:not(.e-vertical) .e-toolbar-item.e-active .e-tab-wrap .e-icons { color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; } /* ── Nested child SfTabs (.bomsync-tab-child) — softer than parent hub tabs ── Active = work teal (#015F78); inactive = lighter cool slate (not parent charcoal). */ .bomsync-tab.bomsync-tab-child .e-tab-header:not(.e-vertical) .e-toolbar-item:not(.e-active), .e-tab.bomsync-tab.bomsync-tab-child .e-tab-header:not(.e-vertical) .e-toolbar-item:not(.e-active), .bomsync-tab.bomsync-tab-child .e-tab-header:not(.e-vertical) .e-toolbar-item:not(.e-active) .e-tab-wrap, .e-tab.bomsync-tab.bomsync-tab-child .e-tab-header:not(.e-vertical) .e-toolbar-item:not(.e-active) .e-tab-wrap { background: linear-gradient(180deg, #9aa5b4 0%, #8792a2 100%) !important; border: 1px solid rgba(154, 166, 184, 0.42) !important; border-bottom: none !important; box-shadow: none !important; } .bomsync-tab.bomsync-tab-child .e-tab-header:not(.e-vertical) .e-toolbar-item:not(.e-active) .e-tab-text, .bomsync-tab.bomsync-tab-child .e-tab-header:not(.e-vertical) .e-toolbar-item:not(.e-active) .e-tab-icon, .bomsync-tab.bomsync-tab-child .e-tab-header:not(.e-vertical) .e-toolbar-item:not(.e-active) .e-tab-wrap .bi, .bomsync-tab.bomsync-tab-child .e-tab-header:not(.e-vertical) .e-toolbar-item:not(.e-active) .e-tab-wrap .bi::before, .bomsync-tab.bomsync-tab-child .e-tab-header:not(.e-vertical) .e-toolbar-item:not(.e-active) .e-tab-wrap .e-icons { color: rgb(255 252 248) !important; -webkit-text-fill-color: rgb(255 252 248) !important; opacity: 0.95 !important; } .bomsync-tab.bomsync-tab-child .e-tab-header:not(.e-vertical) .e-toolbar-item:hover:not(.e-active), .bomsync-tab.bomsync-tab-child .e-tab-header:not(.e-vertical) .e-toolbar-item:hover:not(.e-active) .e-tab-wrap { background: linear-gradient(180deg, #a8b2c0 0%, #949eae 100%) !important; border-color: rgba(154, 166, 184, 0.5) !important; } .bomsync-tab.bomsync-tab-child .e-tab-header:not(.e-vertical) .e-toolbar-item.e-active, .bomsync-tab.bomsync-tab-child .e-tab-header:not(.e-vertical) .e-toolbar-item.e-active .e-tab-wrap { background: var(--bomsync-chrome-grad-work) !important; border-color: var(--bomsync-chrome-work-rule, #015F78) !important; } .bomsync-tab.bomsync-tab-child .e-tab-header:not(.e-vertical) .e-toolbar-item.e-active .e-tab-text, .bomsync-tab.bomsync-tab-child .e-tab-header:not(.e-vertical) .e-toolbar-item.e-active .e-tab-icon, .bomsync-tab.bomsync-tab-child .e-tab-header:not(.e-vertical) .e-toolbar-item.e-active .e-tab-wrap .bi, .bomsync-tab.bomsync-tab-child .e-tab-header:not(.e-vertical) .e-toolbar-item.e-active .e-tab-wrap .bi::before, .bomsync-tab.bomsync-tab-child .e-tab-header:not(.e-vertical) .e-toolbar-item.e-active .e-tab-wrap .e-icons { color: var(--bomsync-chrome-fg, #F2F7FB) !important; -webkit-text-fill-color: var(--bomsync-chrome-fg, #F2F7FB) !important; } /* Soft in-tab shortcut chips (Items quick links, etc.) — stand out without matching hub tabs */ .bomsync-subnav-chip, a.bomsync-subnav-chip, button.bomsync-subnav-chip { display: inline-flex; align-items: center; gap: 0.35rem; min-height: 32px; padding: 0.35rem 0.75rem; border-radius: 8px; border: 1px solid var(--bomsync-border-muted); background: var(--bomsync-elevated-surface); color: var(--bomsync-text-secondary); font-size: 0.8125rem; font-weight: 600; line-height: 1.2; text-decoration: none; box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.7); cursor: pointer; white-space: nowrap; transition: background 0.12s, border-color 0.12s, color 0.12s; } .bomsync-subnav-chip .bi { color: var(--bomsync-chrome-work-rule, #015F78); opacity: 0.85; } .bomsync-subnav-chip:hover, a.bomsync-subnav-chip:hover, button.bomsync-subnav-chip:hover { background: var(--bomsync-brand-subtle); border-color: color-mix(in srgb, var(--bomsync-chrome-work-rule, #015F78) 35%, var(--bomsync-border-strong)); color: var(--bomsync-text-primary); text-decoration: none; } .bomsync-subnav-chip:hover .bi { opacity: 1; } /* ── Item Details dialog (shared Tag/Item Code lookup) ───────────────────── */ .e-dialog.bomsync-item-details-dialog { max-width: min(960px, calc(100vw - 16px)) !important; max-height: 80vh !important; height: auto !important; } .e-dialog.bomsync-item-details-dialog .e-dlg-header { font-weight: 650; color: var(--bomsync-text-primary); letter-spacing: 0.01em; } .e-dialog.bomsync-item-details-dialog .e-dlg-content { background: var(--bomsync-page-bg, #f4f7fb); padding: 1rem 1.1rem 1.15rem !important; max-height: calc(80vh - 3.75rem) !important; overflow-y: auto !important; } .bomsync-item-details { display: flex; flex-direction: column; gap: 0.85rem; color: var(--bomsync-text-primary); } .bomsync-item-details__notice { margin: 0; padding: 0.65rem 0.85rem; border: 1px solid var(--bomsync-state-attention-bd, #e8a33d); border-left-width: 3px; border-radius: 8px; background: var(--bomsync-state-attention-bg, #fdf8ef); color: var(--bomsync-text-primary); font-size: 0.95rem; line-height: 1.5; } .bomsync-item-details__hero { display: grid; grid-template-columns: 168px minmax(0, 1fr); gap: 1rem 1.15rem; padding: 0.9rem 1rem; border: 1px solid var(--bomsync-border-strong); border-radius: 10px; background: var(--bomsync-elevated-surface); box-shadow: var(--bomsync-shadow-sm); } .bomsync-item-details__media, .bomsync-item-details__image, .bomsync-item-details__image-placeholder { width: 168px; height: 168px; } .bomsync-item-details__image { display: block; object-fit: contain; border: 1px solid var(--bomsync-border); border-radius: 8px; background: var(--bomsync-page-bg); } .bomsync-item-details__image-placeholder { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.35rem; border: 1px dashed var(--bomsync-border-strong); border-radius: 8px; background: color-mix(in srgb, var(--bomsync-brand-subtle) 55%, var(--bomsync-elevated-surface)); color: var(--bomsync-text-muted); font-size: 0.82rem; } .bomsync-item-details__image-placeholder .bi { font-size: 1.45rem; opacity: 0.75; } .bomsync-item-details__summary { min-width: 0; display: flex; flex-direction: column; gap: 0.28rem; } .bomsync-item-details__code { font-size: 1.2rem; font-weight: 700; line-height: 1.25; color: var(--bomsync-text-primary); word-break: break-word; } .bomsync-item-details__name { font-size: 1rem; line-height: 1.4; color: var(--bomsync-text-secondary); } .bomsync-item-details__vendor { font-size: 0.9rem; color: var(--bomsync-text-muted); } .bomsync-item-details__meta-line { display: flex; flex-wrap: wrap; gap: 0.35rem 0.55rem; font-size: 0.92rem; line-height: 1.4; } .bomsync-item-details__meta-label { font-size: 0.72rem; font-weight: 650; letter-spacing: 0.05em; text-transform: uppercase; color: var(--bomsync-text-secondary); } .bomsync-item-details__contacts { margin-top: 0.35rem; } .bomsync-item-details__contact-list { list-style: none; margin: 0.25rem 0 0; padding: 0; display: flex; flex-direction: column; gap: 0.15rem; font-size: 0.9rem; } .bomsync-item-details__contact-type { font-weight: 600; color: var(--bomsync-text-secondary); margin-right: 0.25rem; } .bomsync-item-details__hero-actions { margin-top: 0.55rem; } .bomsync-item-details__status-row { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.4rem 0.65rem; padding: 0.45rem 0.75rem; border: 1px solid var(--bomsync-border); border-radius: 8px; background: var(--bomsync-elevated-surface); font-size: 0.92rem; } .bomsync-item-details__split { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(240px, 0.85fr); gap: 0.85rem; align-items: stretch; } .bomsync-item-details__panel { border: 1px solid var(--bomsync-border-strong); border-radius: 10px; background: var(--bomsync-elevated-surface); box-shadow: var(--bomsync-shadow-sm); padding: 0.75rem 0.85rem; } .bomsync-item-details__panel-title { font-size: 0.78rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--bomsync-text-secondary); margin-bottom: 0.55rem; } .bomsync-item-details__props { display: grid; gap: 0.35rem 0.75rem; margin: 0; } .bomsync-item-details__prop { display: grid; grid-template-columns: minmax(7.5rem, 38%) minmax(0, 1fr); gap: 0.35rem 0.75rem; padding: 0.28rem 0; border-bottom: 1px solid var(--bomsync-border-muted, #d8dee9); } .bomsync-item-details__prop:last-child { border-bottom: none; } .bomsync-item-details__prop dt { margin: 0; font-size: 0.78rem; font-weight: 650; color: var(--bomsync-text-secondary); line-height: 1.35; } .bomsync-item-details__prop dd { margin: 0; font-size: 0.92rem; color: var(--bomsync-text-primary); line-height: 1.4; word-break: break-word; } .bomsync-item-details__panel--docs { display: flex; flex-direction: column; min-height: 280px; } .bomsync-item-details__docs-head { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 0.45rem 0.75rem; margin-bottom: 0.45rem; } .bomsync-item-details__docs-head .bomsync-item-details__panel-title { margin-bottom: 0; } .bomsync-item-details__docs-links { display: flex; flex-direction: column; align-items: flex-end; gap: 0.2rem; } .bomsync-item-details__link { color: var(--bsx-action, #2f6690); font-weight: 600; text-decoration: none; font-size: 0.86rem; } .bomsync-item-details__link:hover { text-decoration: underline; color: color-mix(in srgb, var(--bsx-action, #2f6690) 82%, #000); } .bomsync-item-details__docs-body { flex: 1 1 auto; min-height: 0; max-height: 420px; overflow: auto; } .bomsync-item-details__doc-row { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 0.45rem 0.65rem; padding: 0.55rem 0; border-bottom: 1px solid var(--bomsync-border-muted, #d8dee9); } .bomsync-item-details__doc-row:last-child { border-bottom: none; } .bomsync-item-details__doc-main { flex: 1 1 10rem; min-width: 0; } .bomsync-item-details__doc-sub { margin-top: 0.15rem; font-size: 0.8rem; color: var(--bomsync-text-muted); } .bomsync-item-details__doc-actions { display: flex; flex-wrap: wrap; gap: 0.35rem; } .bomsync-item-details__doc-btn { min-height: 30px !important; padding: 4px 10px !important; font-size: 0.78rem !important; } .bomsync-item-details__empty { color: var(--bomsync-text-muted); font-size: 0.95rem; line-height: 1.5; } /* Tablet: stack props/docs; tighten dialog chrome */ @media (max-width: 1024px) { .e-dialog.bomsync-item-details-dialog { max-height: min(88vh, calc(100dvh - 24px)) !important; } .e-dialog.bomsync-item-details-dialog .e-dlg-content { max-height: min(calc(88vh - 3.75rem), calc(100dvh - 5.5rem)) !important; padding: 0.85rem 0.9rem 1rem !important; } .bomsync-item-details__hero { grid-template-columns: 140px minmax(0, 1fr); gap: 0.85rem 1rem; } .bomsync-item-details__media, .bomsync-item-details__image, .bomsync-item-details__image-placeholder { width: 140px; height: 140px; } .bomsync-item-details__split { grid-template-columns: 1fr; } .bomsync-item-details__panel--docs { min-height: 0; } } /* Phone: near full-viewport dialog; stacked hero; single-column props */ @media (max-width: 768px) { .e-dialog.bomsync-item-details-dialog { max-height: calc(100dvh - 16px) !important; width: calc(100vw - 16px) !important; } .e-dialog.bomsync-item-details-dialog .e-dlg-content { max-height: calc(100dvh - 4.75rem) !important; padding: 0.75rem 0.8rem 0.9rem !important; } .bomsync-item-details { gap: 0.7rem; } .bomsync-item-details__hero { grid-template-columns: 1fr; justify-items: center; text-align: center; padding: 0.75rem; } .bomsync-item-details__media, .bomsync-item-details__image, .bomsync-item-details__image-placeholder { width: min(168px, 42vw); height: min(168px, 42vw); } .bomsync-item-details__summary { align-items: center; width: 100%; } .bomsync-item-details__meta-line, .bomsync-item-details__contacts { width: 100%; text-align: left; } .bomsync-item-details__hero-actions { width: 100%; } .bomsync-item-details__hero-actions .bomsync-page-command-btn { width: 100%; justify-content: center; } .bomsync-item-details__docs-links { align-items: flex-start; } .bomsync-item-details__prop { grid-template-columns: 1fr; gap: 0.15rem; } .bomsync-item-details__docs-body { max-height: min(280px, 40vh); } .bomsync-item-details__doc-actions { width: 100%; } .bomsync-item-details__doc-btn { flex: 1 1 auto; justify-content: center; } } /* ── Semantic badges + process strip (Finance/MRP UX staging) ─────────────── */ .bomsync-sem-badge { display: inline-flex; align-items: center; gap: 0.3rem; font-size: 0.68rem; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase; padding: 0.2rem 0.55rem; border-radius: 999px; border: 1px solid transparent; white-space: nowrap; line-height: 1.2; vertical-align: middle; } .bomsync-sem-badge__glyph { font-size: 0.62rem; line-height: 1; } .bomsync-sem-badge--basis-op { background: var(--bomsync-basis-op-soft); color: var(--bomsync-basis-op); border-color: color-mix(in oklab, var(--bomsync-basis-op) 28%, white); } .bomsync-sem-badge--basis-fin { background: var(--bomsync-basis-fin-soft); color: var(--bomsync-basis-fin); border-color: color-mix(in oklab, var(--bomsync-basis-fin) 28%, white); } .bomsync-sem-badge--basis-rec { background: var(--bomsync-basis-rec-soft); color: var(--bomsync-basis-rec); border-color: color-mix(in oklab, var(--bomsync-basis-rec) 28%, white); } .bomsync-sem-badge--own-plan { background: var(--bomsync-own-plan-soft); color: var(--bomsync-own-plan); border-color: color-mix(in oklab, var(--bomsync-own-plan) 28%, white); } .bomsync-sem-badge--own-oper { background: var(--bomsync-own-oper-soft); color: var(--bomsync-own-oper); border-color: color-mix(in oklab, var(--bomsync-own-oper) 28%, white); } .bomsync-sem-badge--own-erp { background: var(--bomsync-own-erp-soft); color: var(--bomsync-own-erp); border-color: color-mix(in oklab, var(--bomsync-own-erp) 28%, white); } .bomsync-sem-badge--state-live { background: var(--bomsync-state-live-soft); color: var(--bomsync-state-live); border-color: color-mix(in oklab, var(--bomsync-state-live) 28%, white); } .bomsync-sem-badge--state-asof { background: var(--bomsync-state-asof-soft); color: var(--bomsync-state-asof); border-color: color-mix(in oklab, var(--bomsync-state-asof) 28%, white); } .bomsync-sem-badge--state-plan { background: var(--bomsync-state-plan-soft); color: var(--bomsync-state-plan); border-color: color-mix(in oklab, var(--bomsync-state-plan) 28%, white); } .bomsync-sem-badge--state-scen { background: var(--bomsync-state-scen-soft); color: var(--bomsync-state-scen); border-color: color-mix(in oklab, var(--bomsync-state-scen) 28%, white); border-style: dashed; } .bomsync-sem-badge--prov-exact { background: var(--bomsync-prov-exact-soft); color: var(--bomsync-prov-exact); border-color: color-mix(in oklab, var(--bomsync-prov-exact) 28%, white); } .bomsync-sem-badge--prov-solver { background: var(--bomsync-prov-solver-soft); color: var(--bomsync-prov-solver); border-color: color-mix(in oklab, var(--bomsync-prov-solver) 28%, white); } .bomsync-sem-badge--prov-fast { background: var(--bomsync-prov-fast-soft); color: var(--bomsync-prov-fast); border-color: color-mix(in oklab, var(--bomsync-prov-fast) 28%, white); } .bomsync-sem-badge--prov-fcst { background: var(--bomsync-prov-fcst-soft); color: var(--bomsync-prov-fcst); border-color: color-mix(in oklab, var(--bomsync-prov-fcst) 28%, white); } .bomsync-sem-badge--prov-est { background: var(--bomsync-prov-est-soft); color: var(--bomsync-prov-est); border-color: color-mix(in oklab, var(--bomsync-prov-est) 28%, white); } .bomsync-sem-badge--prov-manual { background: var(--bomsync-prov-manual-soft); color: var(--bomsync-prov-manual); border-color: color-mix(in oklab, var(--bomsync-prov-manual) 28%, white); } .bomsync-sem-badge--exchange-ok { background: var(--bomsync-exchange-ok-soft); color: var(--bomsync-exchange-ok); border-color: color-mix(in oklab, var(--bomsync-exchange-ok) 28%, white); } .bomsync-sem-badge--exchange-warn { background: var(--bomsync-exchange-warn-soft); color: var(--bomsync-exchange-warn); border-color: color-mix(in oklab, var(--bomsync-exchange-warn) 28%, white); } .bomsync-sem-badge--exchange-fail { background: var(--bomsync-exchange-fail-soft); color: var(--bomsync-exchange-fail); border-color: color-mix(in oklab, var(--bomsync-exchange-fail) 28%, white); } .bomsync-sem-badge--exchange-queued { background: var(--bomsync-exchange-queued-soft); color: var(--bomsync-exchange-queued); border-color: color-mix(in oklab, var(--bomsync-exchange-queued) 28%, white); } /* ── PATH bar (system standard) — navy chrome + nav-highlight cyan selection ── Reference route: /inventory/home · Component: BomsyncProcessStrip Hover/current uses the same cyan family as sidebar current-route (--bs-cyan / --bs-active-bg / --bs-border-accent). “Gold standard” = quality, not gold/yellow fills. */ .bomsync-process-strip { display: flex; flex-wrap: wrap; align-items: center; gap: 0.45rem; margin: 0 0 1.15rem; padding: 0.65rem 0.85rem; border-radius: 12px; border: 1px solid color-mix(in srgb, var(--bs-cyan, #6ad7ff) 22%, transparent); background: linear-gradient(135deg, rgba(47 102 144 / 0.22) 0%, transparent 42%), linear-gradient(180deg, #152238 0%, var(--brand-blue, #111b2c) 100%); box-shadow: var(--bomsync-shadow-md); } .bomsync-process-strip__rail-label { flex: 0 0 auto; align-self: center; margin-right: 0.35rem; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.12em; line-height: 1.2; color: var(--bs-cyan, #6ad7ff); text-transform: uppercase; } .bomsync-process-strip__step, .bomsync-process-strip__step--tone-1, .bomsync-process-strip__step--tone-2, .bomsync-process-strip__step--tone-3, .bomsync-process-strip__step--tone-4, .bomsync-process-strip__step--tone-5, .bomsync-process-strip__step--tone-6 { appearance: none; display: inline-flex; flex-direction: row; align-items: center; justify-content: space-between; gap: 0.65rem; flex: 0 1 auto; max-width: none; min-width: 0; min-height: 40px; padding: 0.45rem 0.9rem; /* Rest: quiet navy pill; hover/select = nav cyan wash (--bs-active-bg) */ border: 1px solid color-mix(in srgb, var(--bs-cyan, #6ad7ff) 18%, transparent); border-radius: 10px; background: rgba(21 34 56 / 0.72); color: #f0f4fa; text-decoration: none; text-align: left; cursor: pointer; font: inherit; box-shadow: none; transition: background 0.12s ease, border-color 0.12s ease, box-shadow 0.12s ease, color 0.12s ease; } a.bomsync-process-strip__step:hover, button.bomsync-process-strip__step:hover, a.bomsync-process-strip__step:focus-visible, button.bomsync-process-strip__step:focus-visible, a.bomsync-process-strip__step.is-current, button.bomsync-process-strip__step.is-current, a.bomsync-process-strip__step[aria-current="page"], button.bomsync-process-strip__step[aria-current="page"] { /* Same cyan wash + accent as sidebar current-route highlight */ background: var(--bs-active-bg, rgba(106, 215, 255, 0.16)); border-color: var(--bs-border-accent, var(--bs-cyan, #6ad7ff)); color: #fff; text-decoration: none; box-shadow: 0 0 0 1px color-mix(in srgb, var(--bs-cyan, #6ad7ff) 35%, transparent), 0 0 12px color-mix(in srgb, var(--bs-cyan, #6ad7ff) 18%, transparent); } .bomsync-process-strip__step:focus-visible { outline: 2px solid var(--bs-cyan, #6ad7ff); outline-offset: 2px; } a.bomsync-process-strip__step:active, button.bomsync-process-strip__step:active { background: color-mix(in srgb, var(--bs-cyan, #6ad7ff) 28%, rgba(21 34 56 / 0.85)); border-color: var(--bs-border-accent, var(--bs-cyan, #6ad7ff)); box-shadow: 0 0 0 1px color-mix(in srgb, var(--bs-cyan, #6ad7ff) 45%, transparent), 0 0 14px color-mix(in srgb, var(--bs-cyan, #6ad7ff) 22%, transparent); } .bomsync-process-strip__main { display: flex; flex-direction: column; align-items: flex-start; gap: 0.12rem; min-width: 0; flex: 1 1 auto; } .bomsync-process-strip__label { text-transform: none; letter-spacing: 0.01em; font-size: 0.875rem; font-weight: 600; line-height: 1.25; color: #f0f4fa; } .bomsync-process-strip__hint { font-size: 0.78rem; color: rgba(232 237 245 / 0.72); line-height: 1.3; } .bomsync-process-strip__count, .bomsync-process-strip__badge { flex: 0 0 auto; margin: 0; font-size: 0.95rem; font-weight: 700; line-height: 1.1; letter-spacing: -0.02em; color: color-mix(in srgb, var(--bs-cyan, #6ad7ff) 95%, transparent); font-variant-numeric: tabular-nums; } .bomsync-process-strip__arrow { display: inline-flex; align-items: center; justify-content: center; align-self: center; width: auto; height: auto; min-width: 1.35rem; padding: 0 0.3rem; border: none; border-radius: 0; background: transparent; color: var(--bs-cyan, #6ad7ff); font-size: 1.35rem; line-height: 1; font-weight: 700; user-select: none; } @media (max-width: 768px) { .bomsync-process-strip { padding: 0.55rem 0.65rem; } .bomsync-process-strip__rail-label { width: 100%; margin: 0 0 0.25rem; } .bomsync-process-strip__arrow { display: none; } .bomsync-process-strip__step { flex: 1 1 100%; max-width: none; } } /* Legacy alias — chrome is now the default PATH bar */ .bomsync-process-strip--chrome { /* no-op: kept so older CssClass="bomsync-process-strip--chrome" bindings stay valid */ } /* ── RTL foundation (ar-001 Arabic Modern) ─────────────────────────────────── * Document dir/lang are set on from BomSyncSupportedCultures (App.razor). * Prefer logical properties (margin-inline-*, text-align: start) in new CSS. * Full shell/grid/dialog mirroring is Phase C — keep this block surgical. */ html[dir="rtl"] { --bomsync-dir-factor: -1; } html[dir="ltr"] { --bomsync-dir-factor: 1; } /* Directional icons / PATH arrows that should flip under RTL */ html[dir="rtl"] .bomsync-process-strip__arrow, html[dir="rtl"] .bomsync-rtl-flip { transform: scaleX(-1); } /* Mixed LTR tokens (PO codes, emails, SKUs) inside RTL copy */ html[dir="rtl"] .bomsync-dir-auto { unicode-bidi: plaintext; direction: auto; } /* ── Syncfusion dropdown / ComboBox / MultiSelect popups — Dark ─────────────── * Root cause of white-on-white: Fluent2 keeps body-portaled .e-ddl.e-popup on a * light surface while Dark remaps --bomsync-text-primary / body color to on-dark * light text, so list items inherit near-white on #fff. Force elevated Dark popup * + on-dark item text; specificity beats Fluent2 via html[data-bomsync-theme]. */ html[data-bomsync-theme="dark"]:not([data-bomsync-theme-preview]) .e-ddl.e-popup, html[data-bomsync-theme-preview="dark"] .e-ddl.e-popup, html[data-bomsync-theme="dark"]:not([data-bomsync-theme-preview]) .e-popup.e-ddl, html[data-bomsync-theme-preview="dark"] .e-popup.e-ddl, html[data-bomsync-theme="dark"]:not([data-bomsync-theme-preview]) .e-combobox.e-popup, html[data-bomsync-theme-preview="dark"] .e-combobox.e-popup, html[data-bomsync-theme="dark"]:not([data-bomsync-theme-preview]) .e-popup.e-combobox, html[data-bomsync-theme-preview="dark"] .e-popup.e-combobox, html[data-bomsync-theme="dark"]:not([data-bomsync-theme-preview]) .e-multiselect.e-popup, html[data-bomsync-theme-preview="dark"] .e-multiselect.e-popup, html[data-bomsync-theme="dark"]:not([data-bomsync-theme-preview]) .e-popup.e-multiselect, html[data-bomsync-theme-preview="dark"] .e-popup.e-multiselect, html[data-bomsync-theme="dark"]:not([data-bomsync-theme-preview]) .e-dropdownbase.e-popup, html[data-bomsync-theme-preview="dark"] .e-dropdownbase.e-popup, html[data-bomsync-theme="dark"]:not([data-bomsync-theme-preview]) .e-ddt.e-popup, html[data-bomsync-theme-preview="dark"] .e-ddt.e-popup, html[data-bomsync-theme="dark"]:not([data-bomsync-theme-preview]) .e-popup.e-multi-select-list-wrapper, html[data-bomsync-theme-preview="dark"] .e-popup.e-multi-select-list-wrapper, html[data-bomsync-theme="dark"]:not([data-bomsync-theme-preview]) .e-dropdown-popup, html[data-bomsync-theme-preview="dark"] .e-dropdown-popup { background: #1A2638 !important; background-color: #1A2638 !important; border: 1px solid #3A4F6A !important; color: #E3EAF2 !important; box-shadow: 0 8px 24px rgb(0 0 0 / 0.45) !important; } html[data-bomsync-theme="dark"]:not([data-bomsync-theme-preview]) .e-ddl.e-popup .e-content, html[data-bomsync-theme-preview="dark"] .e-ddl.e-popup .e-content, html[data-bomsync-theme="dark"]:not([data-bomsync-theme-preview]) .e-ddl.e-popup .e-list-parent, html[data-bomsync-theme-preview="dark"] .e-ddl.e-popup .e-list-parent, html[data-bomsync-theme="dark"]:not([data-bomsync-theme-preview]) .e-ddl.e-popup .e-dropdownbase, html[data-bomsync-theme-preview="dark"] .e-ddl.e-popup .e-dropdownbase, html[data-bomsync-theme="dark"]:not([data-bomsync-theme-preview]) .e-combobox.e-popup .e-content, html[data-bomsync-theme-preview="dark"] .e-combobox.e-popup .e-content, html[data-bomsync-theme="dark"]:not([data-bomsync-theme-preview]) .e-combobox.e-popup .e-list-parent, html[data-bomsync-theme-preview="dark"] .e-combobox.e-popup .e-list-parent, html[data-bomsync-theme="dark"]:not([data-bomsync-theme-preview]) .e-multiselect.e-popup .e-content, html[data-bomsync-theme-preview="dark"] .e-multiselect.e-popup .e-content, html[data-bomsync-theme="dark"]:not([data-bomsync-theme-preview]) .e-multiselect.e-popup .e-list-parent, html[data-bomsync-theme-preview="dark"] .e-multiselect.e-popup .e-list-parent, html[data-bomsync-theme="dark"]:not([data-bomsync-theme-preview]) .e-popup.e-multi-select-list-wrapper .e-content, html[data-bomsync-theme-preview="dark"] .e-popup.e-multi-select-list-wrapper .e-content, html[data-bomsync-theme="dark"]:not([data-bomsync-theme-preview]) .e-dropdown-popup ul, html[data-bomsync-theme-preview="dark"] .e-dropdown-popup ul { background: #1A2638 !important; background-color: #1A2638 !important; color: #E3EAF2 !important; } html[data-bomsync-theme="dark"]:not([data-bomsync-theme-preview]) .e-ddl.e-popup .e-list-item, html[data-bomsync-theme-preview="dark"] .e-ddl.e-popup .e-list-item, html[data-bomsync-theme="dark"]:not([data-bomsync-theme-preview]) .e-popup.e-ddl .e-list-item, html[data-bomsync-theme-preview="dark"] .e-popup.e-ddl .e-list-item, html[data-bomsync-theme="dark"]:not([data-bomsync-theme-preview]) .e-combobox.e-popup .e-list-item, html[data-bomsync-theme-preview="dark"] .e-combobox.e-popup .e-list-item, html[data-bomsync-theme="dark"]:not([data-bomsync-theme-preview]) .e-multiselect.e-popup .e-list-item, html[data-bomsync-theme-preview="dark"] .e-multiselect.e-popup .e-list-item, html[data-bomsync-theme="dark"]:not([data-bomsync-theme-preview]) .e-dropdownbase.e-popup .e-list-item, html[data-bomsync-theme-preview="dark"] .e-dropdownbase.e-popup .e-list-item, html[data-bomsync-theme="dark"]:not([data-bomsync-theme-preview]) .e-popup.e-multi-select-list-wrapper .e-list-item, html[data-bomsync-theme-preview="dark"] .e-popup.e-multi-select-list-wrapper .e-list-item, html[data-bomsync-theme="dark"]:not([data-bomsync-theme-preview]) .e-dropdown-popup .e-item, html[data-bomsync-theme-preview="dark"] .e-dropdown-popup .e-item { color: #E3EAF2 !important; background: transparent !important; background-color: transparent !important; } html[data-bomsync-theme="dark"]:not([data-bomsync-theme-preview]) .e-ddl.e-popup .e-list-item .e-list-text, html[data-bomsync-theme-preview="dark"] .e-ddl.e-popup .e-list-item .e-list-text, html[data-bomsync-theme="dark"]:not([data-bomsync-theme-preview]) .e-popup.e-ddl .e-list-item .e-list-text, html[data-bomsync-theme-preview="dark"] .e-popup.e-ddl .e-list-item .e-list-text, html[data-bomsync-theme="dark"]:not([data-bomsync-theme-preview]) .e-combobox.e-popup .e-list-item .e-list-text, html[data-bomsync-theme-preview="dark"] .e-combobox.e-popup .e-list-item .e-list-text, html[data-bomsync-theme="dark"]:not([data-bomsync-theme-preview]) .e-multiselect.e-popup .e-list-item .e-list-text, html[data-bomsync-theme-preview="dark"] .e-multiselect.e-popup .e-list-item .e-list-text, html[data-bomsync-theme="dark"]:not([data-bomsync-theme-preview]) .e-dropdown-popup .e-item, html[data-bomsync-theme-preview="dark"] .e-dropdown-popup .e-item { color: #E3EAF2 !important; } html[data-bomsync-theme="dark"]:not([data-bomsync-theme-preview]) .e-ddl.e-popup .e-list-item.e-active, html[data-bomsync-theme-preview="dark"] .e-ddl.e-popup .e-list-item.e-active, html[data-bomsync-theme="dark"]:not([data-bomsync-theme-preview]) .e-ddl.e-popup .e-list-item.e-hover, html[data-bomsync-theme-preview="dark"] .e-ddl.e-popup .e-list-item.e-hover, html[data-bomsync-theme="dark"]:not([data-bomsync-theme-preview]) .e-ddl.e-popup .e-list-item:hover, html[data-bomsync-theme-preview="dark"] .e-ddl.e-popup .e-list-item:hover, html[data-bomsync-theme="dark"]:not([data-bomsync-theme-preview]) .e-popup.e-ddl .e-list-item.e-active, html[data-bomsync-theme-preview="dark"] .e-popup.e-ddl .e-list-item.e-active, html[data-bomsync-theme="dark"]:not([data-bomsync-theme-preview]) .e-popup.e-ddl .e-list-item.e-hover, html[data-bomsync-theme-preview="dark"] .e-popup.e-ddl .e-list-item.e-hover, html[data-bomsync-theme="dark"]:not([data-bomsync-theme-preview]) .e-popup.e-ddl .e-list-item:hover, html[data-bomsync-theme-preview="dark"] .e-popup.e-ddl .e-list-item:hover, html[data-bomsync-theme="dark"]:not([data-bomsync-theme-preview]) .e-combobox.e-popup .e-list-item.e-active, html[data-bomsync-theme-preview="dark"] .e-combobox.e-popup .e-list-item.e-active, html[data-bomsync-theme="dark"]:not([data-bomsync-theme-preview]) .e-combobox.e-popup .e-list-item.e-hover, html[data-bomsync-theme-preview="dark"] .e-combobox.e-popup .e-list-item.e-hover, html[data-bomsync-theme="dark"]:not([data-bomsync-theme-preview]) .e-combobox.e-popup .e-list-item:hover, html[data-bomsync-theme-preview="dark"] .e-combobox.e-popup .e-list-item:hover, html[data-bomsync-theme="dark"]:not([data-bomsync-theme-preview]) .e-multiselect.e-popup .e-list-item.e-active, html[data-bomsync-theme-preview="dark"] .e-multiselect.e-popup .e-list-item.e-active, html[data-bomsync-theme="dark"]:not([data-bomsync-theme-preview]) .e-multiselect.e-popup .e-list-item.e-hover, html[data-bomsync-theme-preview="dark"] .e-multiselect.e-popup .e-list-item.e-hover, html[data-bomsync-theme="dark"]:not([data-bomsync-theme-preview]) .e-multiselect.e-popup .e-list-item:hover, html[data-bomsync-theme-preview="dark"] .e-multiselect.e-popup .e-list-item:hover, html[data-bomsync-theme="dark"]:not([data-bomsync-theme-preview]) .e-dropdown-popup .e-item.e-focused, html[data-bomsync-theme-preview="dark"] .e-dropdown-popup .e-item.e-focused, html[data-bomsync-theme="dark"]:not([data-bomsync-theme-preview]) .e-dropdown-popup .e-item:hover, html[data-bomsync-theme-preview="dark"] .e-dropdown-popup .e-item:hover { background: rgb(106 215 255 / 0.14) !important; background-color: rgb(106 215 255 / 0.14) !important; color: #E8EDF5 !important; } html[data-bomsync-theme="dark"]:not([data-bomsync-theme-preview]) .e-ddl.e-popup .e-input-filter, html[data-bomsync-theme-preview="dark"] .e-ddl.e-popup .e-input-filter, html[data-bomsync-theme="dark"]:not([data-bomsync-theme-preview]) .e-ddl.e-popup .e-filter-parent, html[data-bomsync-theme-preview="dark"] .e-ddl.e-popup .e-filter-parent, html[data-bomsync-theme="dark"]:not([data-bomsync-theme-preview]) .e-combobox.e-popup .e-input-filter, html[data-bomsync-theme-preview="dark"] .e-combobox.e-popup .e-input-filter, html[data-bomsync-theme="dark"]:not([data-bomsync-theme-preview]) .e-combobox.e-popup .e-filter-parent, html[data-bomsync-theme-preview="dark"] .e-combobox.e-popup .e-filter-parent, html[data-bomsync-theme="dark"]:not([data-bomsync-theme-preview]) .e-multiselect.e-popup .e-input-filter, html[data-bomsync-theme-preview="dark"] .e-multiselect.e-popup .e-input-filter, html[data-bomsync-theme="dark"]:not([data-bomsync-theme-preview]) .e-multiselect.e-popup .e-filter-parent, html[data-bomsync-theme-preview="dark"] .e-multiselect.e-popup .e-filter-parent { background: #152033 !important; background-color: #152033 !important; border-color: #3A4F6A !important; color: #E3EAF2 !important; } /* -------------------------------------------------------------------------- */ /* Pick Project (ProjectSelector) — Dark grid / filter / coach (2026-10-11) */ /* Gold cue: /submittals/register — shared so all Pick Project hosts inherit. */ /* -------------------------------------------------------------------------- */ html[data-bomsync-theme="dark"]:not([data-bomsync-theme-preview]) .project-selector .form-label, html[data-bomsync-theme-preview="dark"] .project-selector .form-label { color: var(--bomsync-on-dark-text, #E8EDF5); } html[data-bomsync-theme="dark"]:not([data-bomsync-theme-preview]) .project-selector .project-selector-coach, html[data-bomsync-theme-preview="dark"] .project-selector .project-selector-coach, html[data-bomsync-theme="dark"]:not([data-bomsync-theme-preview]) .project-selector .project-selector-empty, html[data-bomsync-theme-preview="dark"] .project-selector .project-selector-empty, html[data-bomsync-theme="dark"]:not([data-bomsync-theme-preview]) .project-selector .project-selector-selected, html[data-bomsync-theme-preview="dark"] .project-selector .project-selector-selected, html[data-bomsync-theme="dark"]:not([data-bomsync-theme-preview]) .project-selector .bomsync-copy-lead, html[data-bomsync-theme-preview="dark"] .project-selector .bomsync-copy-lead { color: #9DB4CC; } html[data-bomsync-theme="dark"]:not([data-bomsync-theme-preview]) .project-selector .e-checkbox-wrapper .e-label, html[data-bomsync-theme-preview="dark"] .project-selector .e-checkbox-wrapper .e-label { color: var(--bomsync-on-dark-text, #E8EDF5) !important; } html[data-bomsync-theme="dark"]:not([data-bomsync-theme-preview]) .project-selector .project-selector-filter-input, html[data-bomsync-theme-preview="dark"] .project-selector .project-selector-filter-input { background: #2A3A50 !important; background-color: #2A3A50 !important; color: #E3EAF2 !important; border-color: #3A4F6A !important; caret-color: #E3EAF2; } html[data-bomsync-theme="dark"]:not([data-bomsync-theme-preview]) .project-selector .project-selector-filter-input::placeholder, html[data-bomsync-theme-preview="dark"] .project-selector .project-selector-filter-input::placeholder { color: #9DB4CC !important; opacity: 1; } html[data-bomsync-theme="dark"]:not([data-bomsync-theme-preview]) .project-selector .project-selector-table-wrap, html[data-bomsync-theme-preview="dark"] .project-selector .project-selector-table-wrap { border-color: #3A4F6A; } html[data-bomsync-theme="dark"]:not([data-bomsync-theme-preview]) .project-selector .project-selector-table, html[data-bomsync-theme-preview="dark"] .project-selector .project-selector-table { --bs-table-bg: #152033; --bs-table-color: #E3EAF2; --bs-table-striped-bg: #152033; --bs-table-hover-bg: rgb(47 102 144 / 0.42); --bs-table-border-color: #3A4F6A; color: #E3EAF2; } html[data-bomsync-theme="dark"]:not([data-bomsync-theme-preview]) .project-selector .project-selector-table thead th, html[data-bomsync-theme-preview="dark"] .project-selector .project-selector-table thead th { background: #285F8A !important; color: #F5F7FB !important; border-bottom-color: rgb(106 215 255 / 0.22) !important; } html[data-bomsync-theme="dark"]:not([data-bomsync-theme-preview]) .project-selector .project-selector-table tbody td, html[data-bomsync-theme-preview="dark"] .project-selector .project-selector-table tbody td { background: #152033 !important; color: #E3EAF2 !important; border-color: #3A4F6A !important; } html[data-bomsync-theme="dark"]:not([data-bomsync-theme-preview]) .project-selector .project-selector-table tbody tr:nth-child(even) td, html[data-bomsync-theme-preview="dark"] .project-selector .project-selector-table tbody tr:nth-child(even) td { background: #182636 !important; color: #E3EAF2 !important; } html[data-bomsync-theme="dark"]:not([data-bomsync-theme-preview]) .project-selector .project-selector-table tbody tr.project-selector-row--selected td, html[data-bomsync-theme-preview="dark"] .project-selector .project-selector-table tbody tr.project-selector-row--selected td { background: rgb(106 215 255 / 0.18) !important; color: #E8EDF5 !important; } html[data-bomsync-theme="dark"]:not([data-bomsync-theme-preview]) .project-selector .project-selector-table tbody tr:hover td, html[data-bomsync-theme-preview="dark"] .project-selector .project-selector-table tbody tr:hover td { background: rgb(47 102 144 / 0.42) !important; color: #E8EDF5 !important; } .module-license-gate { background: var(--bomsync-elevated-surface); color: var(--bomsync-text-primary); border: 1px solid var(--bomsync-border-strong); box-shadow: var(--bomsync-shadow-md); border-radius: 10px; padding: 1.25rem; } .module-license-gate h2, .module-license-gate .h5 { color: var(--bomsync-text-primary); } .module-license-gate .bomsync-copy-lead { color: var(--bomsync-text-secondary); } .module-license-gate__learn-more { color: var(--brand-blue); font-weight: 600; text-decoration: underline; } .module-license-gate--compact { background: var(--bomsync-elevated-surface); color: var(--bomsync-text-primary); } .module-catalog-card--highlight { border: 1px solid var(--bs-border-accent); box-shadow: var(--bomsync-shadow-md); }