/* Shared signed-in shell. The route marker keeps admin, account and public pages on
   their existing treatments. Product data colours remain owned by each surface. */
body:has(.cw-spatial-shell) {
    --cw-surface-canvas: #141c30;
    --cw-surface-panel: #1c273e;
    --cw-surface-raised: #25324b;
    --cw-text-primary: #eef0f8;
    --cw-text-secondary: #a0acc1;
    --cw-border-subtle: #34405a;
    --cw-border-control: #71809a;
    --cw-action-background: #355cff;
    --cw-action-hover: #244ade;
    --cw-action-text: #fff;
    --cw-text-link: #91a6ff;
    --cw-focus-ring: #91a6ff;
    --cw-selection-background: #293b68;
    --cw-font-family: "Segoe UI Variable", "Segoe UI", system-ui, -apple-system, Arial, sans-serif;
    --cw-radius-control: 8px;
    --cw-radius-panel: 12px;
    --cw-radius-overlay: 16px;
    --cw-shadow-overlay: 0 20px 60px #02071355;
}

/* Day theme (cwAppTheme.apply sets data-cw-theme on <body>; a plain attribute, because Chrome
   does not reliably restyle descendants when a class inside body:has(...) changes). Same values as the spatial day
   tokens, at body level so dialogs, popovers, snackbars and the rail — which render outside any
   page root — follow the theme too. */
body[data-cw-theme="day"]:has(.cw-spatial-shell) {
    --cw-surface-canvas: #f0f2f7;
    --cw-surface-panel: #ffffff;
    --cw-surface-raised: #e6ebf4;
    --cw-text-primary: #20273b;
    --cw-text-secondary: #526079;
    --cw-border-subtle: #d5dbe7;
    --cw-border-control: #7b879b;
    --cw-action-background: #355cff;
    --cw-action-hover: #244ade;
    --cw-action-text: #fff;
    --cw-text-link: #355cff;
    --cw-focus-ring: #355cff;
    --cw-selection-background: #e8edff;
    --cw-shadow-overlay: 0 20px 60px #35436822;
    color-scheme: light;
}

body:has(.cw-spatial-shell) .mud-drawer.cw-drawer--spatial,
body:has(.cw-spatial-shell) .cw-drawer--spatial .mud-drawer-content {
    background: var(--cw-surface-canvas) !important;
    color: var(--cw-text-primary) !important;
    border-color: var(--cw-border-subtle) !important;
    font-family: var(--cw-font-family) !important;
}

body:has(.cw-spatial-shell) .cw-drawer--spatial .cw-drawer-head,
body:has(.cw-spatial-shell) .cw-drawer--spatial .cw-drawer-eyebrow,
body:has(.cw-spatial-shell) .cw-drawer--spatial .cw-orgswitch,
body:has(.cw-spatial-shell) .cw-drawer--spatial .cw-project-scope-nav,
body:has(.cw-spatial-shell) .cw-drawer--spatial .cw-drawer-language,
body:has(.cw-spatial-shell) .cw-drawer--spatial .cw-drawer-footer {
    border-color: var(--cw-border-subtle) !important;
}

body:has(.cw-spatial-shell) .cw-drawer--spatial .cw-drawer-head { padding: 16px 16px 14px; }
body:has(.cw-spatial-shell) .cw-drawer--spatial .cw-drawer-brand img { filter: none; }
body:has(.cw-spatial-shell) .cw-drawer--spatial .cw-drawer-brand-text {
    color: var(--cw-text-primary);
    font: 700 15px/1.3 var(--cw-font-family);
    letter-spacing: -.01em;
}
body:has(.cw-spatial-shell) .cw-drawer--spatial .cw-drawer-eyebrow { padding: 12px 18px 4px; border-bottom: 0 !important; }
body:has(.cw-spatial-shell) .cw-drawer--spatial .cw-drawer-eyebrow-text,
body:has(.cw-spatial-shell) .cw-drawer--spatial .cw-orgswitch-eyebrow,
body:has(.cw-spatial-shell) .cw-drawer--spatial .cw-project-scope-nav-label,
body:has(.cw-spatial-shell) .cw-drawer--spatial .cw-nav-section,
body:has(.cw-spatial-shell) .cw-drawer--spatial .cw-admin-nav-label {
    color: var(--cw-text-secondary);
    font: 600 12px/1.35 var(--cw-font-family);
    letter-spacing: 0;
    text-transform: none;
}
body:has(.cw-spatial-shell) .cw-drawer--spatial .cw-nav-section { margin: 18px 12px 8px; }
body:has(.cw-spatial-shell) .cw-drawer--spatial .cw-orgswitch { padding: 10px 18px 14px; }
body:has(.cw-spatial-shell) .cw-drawer--spatial .cw-orgswitch-single { color: var(--cw-text-primary); font-family: var(--cw-font-family); }
body:has(.cw-spatial-shell) .cw-drawer--spatial .cw-orgswitch-tier {
    color: var(--cw-text-link);
    background: var(--cw-selection-background);
    border-color: var(--cw-border-subtle);
    font: 600 11px/1.3 var(--cw-font-family);
    letter-spacing: 0;
    text-transform: none;
}
body:has(.cw-spatial-shell) .cw-drawer--spatial .cw-orgswitch-select,
body:has(.cw-spatial-shell) .cw-drawer--spatial .cw-project-scope-nav-select {
    min-height: 40px;
    color: var(--cw-text-primary);
    background-color: var(--cw-surface-panel);
    border-color: var(--cw-border-subtle);
    font: 400 14px/1.4 var(--cw-font-family);
}
body:has(.cw-spatial-shell) .cw-drawer--spatial .cw-orgswitch-select option,
body:has(.cw-spatial-shell) .cw-drawer--spatial .cw-project-scope-nav-select option { background: var(--cw-surface-panel); color: var(--cw-text-primary); }
body:has(.cw-spatial-shell) .cw-drawer--spatial .cw-orgswitch-select:hover,
body:has(.cw-spatial-shell) .cw-drawer--spatial .cw-project-scope-nav-select:hover,
body:has(.cw-spatial-shell) .cw-drawer--spatial .cw-project-scope-nav-hub:hover,
body:has(.cw-spatial-shell) .cw-drawer--spatial .cw-project-scope-nav-icon:hover { border-color: var(--cw-border-control); }
body:has(.cw-spatial-shell) .cw-drawer--spatial :is(button, a, select):focus-visible,
body:has(.cw-spatial-shell) .cw-mobile-drawer-trigger:focus-visible {
    outline: 2px solid var(--cw-focus-ring) !important;
    outline-offset: 2px;
}
body:has(.cw-spatial-shell) .cw-drawer--spatial .cw-project-scope-nav-hub,
body:has(.cw-spatial-shell) .cw-drawer--spatial .cw-project-scope-nav-icon { color: var(--cw-text-secondary); border-color: var(--cw-border-subtle); }
body:has(.cw-spatial-shell) .cw-drawer--spatial .cw-project-scope-nav-dot { background: var(--cw-action-background); }
body:has(.cw-spatial-shell) .cw-drawer--spatial .cw-project-scope-nav-dot--warning { background: #f1c878; }
body:has(.cw-spatial-shell) .cw-drawer--spatial .cw-project-scope-nav-unavailable,
body:has(.cw-spatial-shell) .cw-drawer--spatial .cw-project-scope-nav-unavailable button { color: #f1c878; }
body:has(.cw-spatial-shell) .cw-drawer--spatial .cw-drawer .cw-mono,
body:has(.cw-spatial-shell) .cw-drawer--spatial .cw-mono { font-family: var(--cw-font-family) !important; letter-spacing: 0; }

body:has(.cw-spatial-shell) .cw-drawer--spatial .mud-nav-link,
body:has(.cw-spatial-shell) .cw-drawer--spatial .mud-nav-group-title-button,
body:has(.cw-spatial-shell) .cw-drawer--spatial .cw-nb--sidebar .cw-nb-btn {
    color: var(--cw-text-primary) !important;
    font-family: var(--cw-font-family) !important;
    border-radius: var(--cw-radius-control) !important;
}
body:has(.cw-spatial-shell) .cw-drawer--spatial .mud-nav-link :is(.mud-nav-link-icon, .mud-icon-default),
body:has(.cw-spatial-shell) .cw-drawer--spatial .mud-nav-group-title-button :is(.mud-nav-link-icon, .mud-icon-default),
body:has(.cw-spatial-shell) .cw-drawer--spatial .cw-nb--sidebar .cw-nb-btn svg { color: var(--cw-text-secondary) !important; }
body:has(.cw-spatial-shell) .cw-drawer--spatial .mud-nav-link:hover,
body:has(.cw-spatial-shell) .cw-drawer--spatial .mud-nav-group-title-button:hover,
body:has(.cw-spatial-shell) .cw-drawer--spatial .cw-nb--sidebar .cw-nb-btn:hover {
    background: var(--cw-surface-raised) !important;
}
body:has(.cw-spatial-shell) .cw-drawer--spatial .mud-nav-link.active,
body:has(.cw-spatial-shell) .cw-drawer--spatial .mud-nav-link.mud-nav-link-active {
    color: var(--cw-text-primary) !important;
    background: var(--cw-selection-background) !important;
    box-shadow: inset 3px 0 0 var(--cw-action-background) !important;
}
body:has(.cw-spatial-shell) .cw-drawer--spatial .mud-nav-link.active :is(.mud-nav-link-icon, .mud-icon-default),
body:has(.cw-spatial-shell) .cw-drawer--spatial .mud-nav-link.mud-nav-link-active :is(.mud-nav-link-icon, .mud-icon-default) { color: var(--cw-text-link) !important; }
body:has(.cw-spatial-shell) .cw-drawer--spatial .cw-drawer-close.mud-icon-button:hover { background: var(--cw-surface-raised) !important; color: var(--cw-text-primary) !important; }
body:has(.cw-spatial-shell) .cw-drawer--spatial .cw-drawer-footer { background: var(--cw-surface-canvas); }
body:has(.cw-spatial-shell) .cw-drawer--spatial .cw-drawer-language .cw3-language-picker-select { color: var(--cw-text-primary); background: var(--cw-surface-panel); border-color: var(--cw-border-subtle); }
body:has(.cw-spatial-shell) .cw-drawer--spatial .cw-drawer-language-icon { color: var(--cw-text-secondary) !important; }
body:has(.cw-spatial-shell) .cw-drawer--spatial .cw-nb--sidebar .cw-nb-badge { border-color: var(--cw-surface-canvas); }
body:has(.cw-spatial-shell) .cw-drawer--spatial .cw-nb-panel {
    color: var(--cw-text-primary);
    background: var(--cw-surface-panel);
    border-color: var(--cw-border-subtle);
    border-radius: var(--cw-radius-overlay);
    box-shadow: var(--cw-shadow-overlay);
    font-family: var(--cw-font-family);
}
body:has(.cw-spatial-shell) .cw-drawer--spatial .cw-nb-head,
body:has(.cw-spatial-shell) .cw-drawer--spatial .cw-nb-row,
body:has(.cw-spatial-shell) .cw-drawer--spatial .cw-nb-foot { border-color: var(--cw-border-subtle); }
body:has(.cw-spatial-shell) .cw-drawer--spatial .cw-nb-title,
body:has(.cw-spatial-shell) .cw-drawer--spatial .cw-nb-row-text { color: var(--cw-text-primary); }
body:has(.cw-spatial-shell) .cw-drawer--spatial .cw-nb-row-meta,
body:has(.cw-spatial-shell) .cw-drawer--spatial .cw-nb-empty { color: var(--cw-text-secondary); }
body:has(.cw-spatial-shell) .cw-drawer--spatial .cw-nb-markall,
body:has(.cw-spatial-shell) .cw-drawer--spatial .cw-nb-foot { color: var(--cw-text-link); }
body:has(.cw-spatial-shell) .cw-drawer--spatial .cw-nb-row:hover { background: var(--cw-surface-raised); }
body:has(.cw-spatial-shell) .cw-drawer--spatial .cw-nb-row--unread { background: var(--cw-selection-background); box-shadow: inset 3px 0 0 var(--cw-action-background); }
body:has(.cw-spatial-shell) .cw-drawer--spatial .cw-nb-dot { background: var(--cw-action-background); }

body:has(.cw-spatial-shell) .cw-mobile-drawer-trigger {
    background: var(--cw-surface-panel);
    color: var(--cw-text-primary);
    border-color: var(--cw-border-subtle);
    box-shadow: var(--cw-shadow-overlay);
}

/* Both Mud and native dialogs inherit one surface and action treatment. */
body:has(.cw-spatial-shell) .mud-dialog-container .mud-dialog.cw3-dialog-host,
body:has(.cw-spatial-shell) .cw3.cw3-modal-overlay .cw3-modal-panel {
    --cw3-bg: var(--cw-surface-panel);
    --cw3-panel: var(--cw-surface-raised);
    --cw3-panel-2: var(--cw-surface-raised);
    --cw3-line: var(--cw-border-subtle);
    --cw3-line-2: var(--cw-border-control);
    --cw3-text: var(--cw-text-primary);
    --cw3-text-2: var(--cw-text-secondary);
    --cw3-text-3: var(--cw-text-secondary);
    --cw3-display: var(--cw-font-family);
    --cw3-mono: var(--cw-font-family);
    background: var(--cw-surface-panel) !important;
    color: var(--cw-text-primary) !important;
    border: 1px solid var(--cw-border-subtle) !important;
    border-radius: var(--cw-radius-overlay) !important;
    box-shadow: var(--cw-shadow-overlay) !important;
    font-family: var(--cw-font-family) !important;
}
body:has(.cw-spatial-shell) .cw3-dialog-host :is(.mud-dialog-content, .mud-dialog-actions),
body:has(.cw-spatial-shell) .cw3-modal-panel .cw3-modal-footer { background: var(--cw-surface-panel) !important; color: var(--cw-text-primary) !important; border-color: var(--cw-border-subtle) !important; }
body:has(.cw-spatial-shell) .cw3-dialog-host .cw3-dlg-tag,
body:has(.cw-spatial-shell) .cw3-modal-panel .cw3-dlg-tag { letter-spacing: 0; text-transform: none; font: 600 12px/1.35 var(--cw-font-family); }
body:has(.cw-spatial-shell) .cw3-dialog-host .cw3-dlg-title,
body:has(.cw-spatial-shell) .cw3-modal-panel .cw3-dlg-title { font-family: var(--cw-font-family); }
body:has(.cw-spatial-shell) .cw3-dialog-host .cw3-dlg-btn,
body:has(.cw-spatial-shell) .cw3-modal-panel .cw3-dlg-btn { border-radius: var(--cw-radius-control); font-family: var(--cw-font-family); }
body:has(.cw-spatial-shell) .cw3-dialog-host .cw3-dlg-btn--primary,
body:has(.cw-spatial-shell) .cw3-modal-panel .cw3-dlg-btn--primary {
    background: var(--cw-action-background);
    border-color: var(--cw-action-background);
    color: var(--cw-action-text);
}
body:has(.cw-spatial-shell) .cw3-dialog-host .cw3-dlg-btn--primary:hover:not(:disabled),
body:has(.cw-spatial-shell) .cw3-modal-panel .cw3-dlg-btn--primary:hover:not(:disabled) {
    background: var(--cw-action-hover);
    border-color: var(--cw-action-hover);
    color: var(--cw-action-text);
    box-shadow: none;
}
body:has(.cw-spatial-shell) .cw3-dialog-host :is(button, a, input, select, textarea):focus-visible,
body:has(.cw-spatial-shell) .cw3-modal-panel :is(button, a, input, select, textarea):focus-visible {
    outline: 2px solid var(--cw-focus-ring);
    outline-offset: 2px;
}
body:has(.cw-spatial-shell) .cw3-dialog-host :is(.mud-input-root, .mud-select-input, .mud-input-slot, .mud-input-adornment, .mud-typography, .mud-button-text-default) { color: var(--cw-text-primary) !important; }
body:has(.cw-spatial-shell) .cw3-dialog-host .mud-input-label { color: var(--cw-text-secondary) !important; }
body:has(.cw-spatial-shell) .cw3-dialog-host :is(.mud-input-helper-text, .mud-icon-root) { color: var(--cw-text-secondary) !important; }
body:has(.cw-spatial-shell) .cw3-dialog-host .mud-input-outlined-border { border-color: var(--cw-border-control) !important; }
body:has(.cw-spatial-shell) .cw3-dialog-host .mud-button-text-primary { color: var(--cw-text-link) !important; }
body:has(.cw-spatial-shell) .cw3-dialog-host .mud-button-filled-primary { background: var(--cw-action-background) !important; color: var(--cw-action-text) !important; }

@media (prefers-reduced-motion: reduce) {
    body:has(.cw-spatial-shell) .cw-drawer--spatial *,
    body:has(.cw-spatial-shell) .cw3-modal-panel { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}

/* Day theme: nested .cw3 blocks (dialog bodies, the clash panel, inspector cards) reset the
   legacy --cw3-* palette to cw3.css's dark literals, which painted light text on light
   surfaces. Map them onto the theme tokens, as the page roots already do. Night is untouched. */
[data-cw-system][data-theme="day"] .cw3,
body[data-cw-theme="day"]:has(.cw-spatial-shell) .mud-dialog.cw3-dialog-host .cw3,
body[data-cw-theme="day"]:has(.cw-spatial-shell) .mud-dialog.cw3-dialog-host {
    color-scheme: light;
    --cw3-bg: var(--cw-surface-panel);
    --cw3-panel: var(--cw-surface-raised);
    --cw3-panel-2: var(--cw-surface-raised);
    --cw3-line: var(--cw-border-subtle);
    --cw3-line-2: var(--cw-border-control);
    --cw3-text: var(--cw-text-primary);
    --cw3-text-2: var(--cw-text-secondary);
    --cw3-text-3: var(--cw-text-secondary);
    /* Names older rules read with a white fallback (never defined in night, where the
       fallback is right; defined here so day doesn't fall back to white). */
    --cw3-text-1: var(--cw-text-primary);
    --cw3-text-dim: var(--cw-text-secondary);
    --cw3-hover: rgba(32, 39, 59, .06);
    --cw3-border: var(--cw-border-subtle);
    --cw3-border-2: var(--cw-border-control);
    --cw3-input-bg: var(--cw-surface-panel);
    --cw3-bg-2: var(--cw-surface-raised);
}

/* Day theme: MudBlazor menus and popovers (More, Group by, pickers) were styled with fixed dark
   colours per surface; inside the app shell they follow the theme tokens. The 3D viewer's own
   menus are owned popovers and are themed with the viewer. */
body[data-cw-theme="day"]:has(.cw-spatial-shell) .mud-popover {
    background: var(--cw-surface-panel) !important;
    color: var(--cw-text-primary) !important;
    border: 1px solid var(--cw-border-subtle) !important;
    box-shadow: var(--cw-shadow-overlay) !important;
}
/* A MudTooltip is also a .mud-popover, so it takes the light surface above while cw3.css still
   forces light text and a dark arrow on it: the text vanished and the arrow stayed dark. */
body[data-cw-theme="day"]:has(.cw-spatial-shell) .mud-tooltip { color: var(--cw-text-primary) !important; }
body[data-cw-theme="day"]:has(.cw-spatial-shell) .mud-tooltip.mud-tooltip-arrow::after { border-top-color: var(--cw-surface-panel) !important; }
body[data-cw-theme="day"]:has(.cw-spatial-shell) .mud-popover :is(.mud-list, .mud-menu-list) { background: transparent !important; }
body[data-cw-theme="day"]:has(.cw-spatial-shell) .mud-popover :is(.mud-list-item, .mud-menu-item, .mud-list-item-text, .mud-typography) { color: var(--cw-text-primary) !important; }
body[data-cw-theme="day"]:has(.cw-spatial-shell) .mud-popover :is(.mud-list-item, .mud-menu-item):hover { background: var(--cw-surface-raised) !important; }
body[data-cw-theme="day"]:has(.cw-spatial-shell) .mud-popover :is(.mud-list-item-disabled, .mud-disabled),
body[data-cw-theme="day"]:has(.cw-spatial-shell) .mud-popover :is(.mud-list-item-disabled, .mud-disabled) :is(.mud-list-item-text, .mud-typography) { color: var(--cw-text-secondary) !important; }
body[data-cw-theme="day"]:has(.cw-spatial-shell) .mud-popover :is(.mud-divider, hr) { border-color: var(--cw-border-subtle) !important; }
body[data-cw-theme="day"]:has(.cw-spatial-shell) .mud-popover .mud-icon-root { color: var(--cw-text-secondary) !important; }
body[data-cw-theme="day"]:has(.cw-spatial-shell) .mud-popover .cw3-menu-danger,
body[data-cw-theme="day"]:has(.cw-spatial-shell) .mud-popover .cw3-menu-danger :is(.mud-list-item-text, .mud-typography) { color: var(--cw-feedback-error, #a33225) !important; }

/* The same undefined names at the day page roots themselves (not only nested .cw3 blocks).
   The legacy accents (cyan, yellow, green, ...) are tuned for dark surfaces and are used as
   text; on white they fell to ~1.5:1, so day uses darker shades of the same hues. */
[data-cw-system][data-theme="day"],
[data-cw-system][data-theme="day"] .cw3,
body[data-cw-theme="day"]:has(.cw-spatial-shell) .mud-dialog.cw3-dialog-host {
    --cw3-mech: #0e7490;
    --cw3-struct: #c2410c;
    --cw3-elec: #a16207;
    --cw3-plumb: #6d28d9;
    --cw3-clash: #be123c;
    --cw3-success: #15803d;
}
[data-cw-system][data-theme="day"] {
    --cw3-text-1: var(--cw-text-primary);
    --cw3-text-dim: var(--cw-text-secondary);
    --cw3-hover: rgba(32, 39, 59, .06);
    --cw3-border: var(--cw-border-subtle);
    --cw3-border-2: var(--cw-border-control);
    --cw3-input-bg: var(--cw-surface-panel);
    --cw3-bg-2: var(--cw-surface-raised);
}