/* ═══════════════════════════════════════════════════════════════════════════
   cosmos-theme.css — fork-specific SHELL glue for the glass look.

   WHAT THIS IS NOT:
   - Not the SLDS 2 "Cosmos" base theme. That ships in the package
     (@salesforce-ux/design-system-2/.../slds2.cosmos.css) and is loaded as a
     <link> by src/build/slds-loader.js.
   - Not the official Glass sub-theme. That also ships in the package
     (.../dist/css/sub-themes/glass.css) and is layered on top via
     setGlassSubtheme() for the cosmos themes. It owns the glassy treatment of
     CONTENT components (.slds-card, .slds-input, .slds-badge, .slds-modal,
     .slds-table, buttons, dropdowns…) — so those generally need NO overrides
     here. Exception: dropdowns spawned from the global header need a more
     opaque background because the glass surface-container token (4% in dark)
     is too transparent to be readable inside the shell chrome.

   WHY THIS FILE EXISTS:
   The official glass.css DOES style an app shell — but it targets production's
   Lightning Experience DOM (.navexStandardManager > .center.vertical-nav-layout
   > .leftNavigationContainer, and the .slds-context-bar::before floating bar).
   This prototype ships its OWN shell (src/modules/shell/cosmosApp →
   .cosmos-shell-header / .cosmos-shell-nav / .cosmos-content), so those
   selectors never match here. This file therefore:
     1. Strips/suppresses the standard SLDS chrome that would otherwise show
        through (incl. hiding glass.css's own .slds-context-bar::before so we
        don't get a duplicate floating bar).
     2. Provides cosmos-mode overrides for component classes that need
        body.cosmos-* scoping (nav transparency, hover states, dropdown opacity).

   IMPLICATION: as glass.css grows upstream, overrides here should shrink toward
   zero. The residue is the price of a custom shell — if the prototype ever
   adopts production's .navex* shell DOM, most of this file goes away and
   glass.css styles the shell for free.

   CSS SPLIT: cosmos-theme.css owns cosmos-scoped SLDS/LBC overrides that need
   global reach (synthetic shadow prevents component stylesheets from reaching
   LBC internals). cosmosApp.css owns layout + visual for .cosmos-shell-*
   elements via --slds-g-* tokens. src/styles/global.css owns theme-agnostic
   LBC overrides that apply across all shells. See AGENTS.md for the full rule.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ══════════════════════════════════════════════════════════════════
   STRUCTURAL RULES
   ══════════════════════════════════════════════════════════════════ */

/* ── Ambient background → official glass.css owns the `body::before` gradient
   (parity). We only lift #app above it so content isn't painted over. ── */

body.cosmos-light > #app,
body.cosmos-dark > #app {
    position: relative;
    z-index: 1;
}

/* ── SLDS global token overrides ──────────────────────────────────
   The official Glass sub-theme (dist/css/sub-themes/glass.css) now owns the
   `--slds-g-*` glass tokens (surfaces, borders, blur) so Lightning base + SLDS
   components render at parity with what engineering ships. We only keep body
   transparency + container width here so the ambient gradient shows through and
   content spans the floating-glass gutters. */

body.cosmos-dark,
body.cosmos-light {
    background-color: transparent !important;
}

html:has(body.cosmos-dark),
html:has(body.cosmos-light) {
    background-color: transparent;
}

body.cosmos-light .slds-container_x-large,
body.cosmos-dark .slds-container_x-large,
body.cosmos-light .slds-container_large,
body.cosmos-dark .slds-container_large {
    max-width: 100%;
}

/* ── Shell chrome: strip SLDS defaults ───────────────────────────── */

body.cosmos-light .slds-global-header,
body.cosmos-dark .slds-global-header {
    background: transparent;
    box-shadow: none;
    border: none;
    border-bottom: none;
}

body.cosmos-light .slds-context-bar,
body.cosmos-dark .slds-context-bar {
    background: transparent;
    background-color: transparent;
    border-bottom: none;
    box-shadow: none;
}

body.cosmos-light .global-shell::before,
body.cosmos-dark .global-shell::before {
    display: none;
}

/* The official glass sub-theme draws the platform header glass via
   .slds-context-bar::before (a fixed 92px floating frosted bar). This prototype
   supplies its own header chrome (.cosmos-shell-header), so suppress the
   duplicate to keep the header a single clean surface. */
body.cosmos-light .slds-context-bar::before,
body.cosmos-dark .slds-context-bar::before {
    display: none;
}

/* Entire header interior — uniform transparent */
body.cosmos-dark .slds-global-header,
body.cosmos-dark .slds-global-header_container,
body.cosmos-dark .slds-global-header__item,
body.cosmos-dark .slds-context-bar__primary,
body.cosmos-dark .slds-context-bar__secondary,
body.cosmos-dark .slds-context-bar__item,
body.cosmos-dark .slds-context-bar__vertical-divider,
body.cosmos-light .slds-global-header,
body.cosmos-light .slds-global-header_container,
body.cosmos-light .slds-global-header__item,
body.cosmos-light .slds-context-bar__primary,
body.cosmos-light .slds-context-bar__secondary,
body.cosmos-light .slds-context-bar__item,
body.cosmos-light .slds-context-bar__vertical-divider {
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    border-color: transparent !important;
    box-shadow: none !important;
    border-radius: 0 !important;
}

/* ── Header icon/search overrides ─────────────────────────── */

body.cosmos-dark .cosmos-shell-header .slds-global-header__item_search,
body.cosmos-light .cosmos-shell-header .slds-global-header__item_search {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: 30rem;
    max-width: 40%;
}

body.cosmos-dark .cosmos-shell-header .slds-container_small.slds-container_center .slds-form-element,
body.cosmos-dark .cosmos-shell-header .slds-container_small.slds-container_center .slds-input,
body.cosmos-light .cosmos-shell-header .slds-container_small.slds-container_center .slds-form-element,
body.cosmos-light .cosmos-shell-header .slds-container_small.slds-container_center .slds-input {
    border-radius: 50rem;
}

body.cosmos-dark .cosmos-shell-header .slds-container_small.slds-container_center .slds-input__icon_left,
body.cosmos-light .cosmos-shell-header .slds-container_small.slds-container_center .slds-input__icon_left {
    left: 0.75rem;
}

body.cosmos-dark .cosmos-shell-header .slds-container_small.slds-container_center .slds-input_search,
body.cosmos-dark .cosmos-shell-header .slds-container_small.slds-container_center .slds-has-input-focus .slds-input,
body.cosmos-light .cosmos-shell-header .slds-container_small.slds-container_center .slds-input_search,
body.cosmos-light .cosmos-shell-header .slds-container_small.slds-container_center .slds-has-input-focus .slds-input {
    padding-left: 2.25rem;
}

/* ── Nav/header overrides ───────────────────────────────────────────── */

body.cosmos-dark .slds-global-header,
body.cosmos-light .slds-global-header {
    padding: 0;
    margin-top: var(--slds-g-spacing-2);
}

body.cosmos-dark .globalNavigation-dropdownItem > a,
body.cosmos-light .globalNavigation-dropdownItem > a {
    color: inherit;
}

body.cosmos-dark .vertical-nav__group-header:hover,
body.cosmos-light .vertical-nav__group-header:hover,
body.cosmos-dark .vertical-nav_collapsed .vertical-nav__group-header_active,
body.cosmos-light .vertical-nav_collapsed .vertical-nav__group-header_active {
    background: var(--slds-s-menu-item-color-background-active) !important;
}

body.cosmos-dark .vertical-nav,
body.cosmos-light .vertical-nav {
    /* Must be transparent so the frosted .cosmos-shell-nav container shows through.
       verticalNav.css sets a solid surface-1 background for standard mode. */
    background-color: transparent !important;
    transition: width 350ms cubic-bezier(0.4, 0, 0.2, 1),
                opacity 250ms ease !important;
}

/* ── Global header dropdowns — opaque background for readability ─────
   glass.css sets .slds-dropdown background to surface-container-1 (4%
   white in dark, 45% in light) which is too transparent inside shell
   chrome. Override to a readable opaque surface. .user-menu-dropdown
   is the prototype's custom user menu — needs the same treatment plus
   explicit backdrop-filter since glass.css doesn't cover custom classes. */

body.cosmos-dark .cosmos-shell-header .slds-dropdown,
body.cosmos-dark .cosmos-shell-header .user-menu-dropdown,
body.cosmos-light .cosmos-shell-header .slds-dropdown,
body.cosmos-light .cosmos-shell-header .user-menu-dropdown {
    background: var(--slds-g-color-surface-1);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

/* Same opaque surface fix for the theme switcher card,
   using the component token to cross the lightning-card shadow boundary. */
body.cosmos-dark .theme-switcher-card-wrapper,
body.cosmos-light .theme-switcher-card-wrapper {
    --slds-c-card-color-background: var(--slds-g-color-surface-1);
}