/* MarketplaceAnalytics interface foundation v1
   Final shared visual layer: semantic tokens + calm top navigation.
   Loaded after legacy/page bundles so old section CSS cannot fragment the shell. */

:root {
    /* Core surfaces */
    --ds-page-bg: #f5f5f7;
    --ds-surface: #ffffff;
    --ds-surface-secondary: #fbfbfd;
    --ds-surface-tertiary: #f2f2f7;

    /* Typography */
    --ds-text-primary: #1d1d1f;
    --ds-text-secondary: #6e6e73;
    --ds-text-tertiary: #86868b;

    /* Borders and focus */
    --ds-separator: rgba(29, 29, 31, .10);
    --ds-separator-strong: rgba(29, 29, 31, .17);
    --ds-focus: rgba(0, 113, 227, .24);

    /* Geometry */
    --ds-radius-xs: 8px;
    --ds-radius-sm: 10px;
    --ds-radius-md: 14px;
    --ds-radius-lg: 18px;
    --ds-radius-xl: 22px;

    /* Spacing scale */
    --ds-space-1: 4px;
    --ds-space-2: 8px;
    --ds-space-3: 12px;
    --ds-space-4: 16px;
    --ds-space-5: 24px;
    --ds-space-6: 32px;
    --ds-space-7: 48px;

    /* Controls */
    --ds-control-sm: 32px;
    --ds-control-md: 38px;
    --ds-control-lg: 44px;

    /* Elevation. Deliberately subtle; depth comes from hierarchy, not heavy shadows. */
    --ds-shadow-panel: 0 1px 2px rgba(0, 0, 0, .025), 0 8px 28px rgba(0, 0, 0, .035);
    --ds-shadow-menu: 0 16px 44px rgba(0, 0, 0, .13);
    --ds-shadow-modal: 0 28px 80px rgba(0, 0, 0, .18);

    --ds-motion-fast: 120ms;
    --ds-motion-base: 180ms;
    --ds-ease: cubic-bezier(.2, .8, .2, 1);

    /* Backwards-compatible aliases. New shared UI should use --ds-* directly. */
    --ui-bg: var(--ds-page-bg);
    --ui-surface: var(--ds-surface);
    --ui-surface-muted: var(--ds-surface-secondary);
    --ui-text: var(--ds-text-primary);
    --ui-muted: var(--ds-text-secondary);
    --ui-line: var(--ds-separator);
    --ui-line-strong: var(--ds-separator-strong);
    --ui-focus: var(--ds-focus);
    --ui-radius-control: var(--ds-radius-sm);
    --ui-radius-panel: var(--ds-radius-lg);
    --ui-shadow-panel: var(--ds-shadow-panel);
    --ui-shadow-menu: var(--ds-shadow-menu);

    --app-bg: var(--ds-page-bg);
    --app-surface: var(--ds-surface);
    --app-surface-2: var(--ds-surface-secondary);
    --app-surface-3: var(--ds-surface-tertiary);
    --app-border: var(--ds-separator);
    --app-border-strong: var(--ds-separator-strong);
    --app-text: var(--ds-text-primary);
    --app-muted: var(--ds-text-secondary);

    --surface: var(--ds-surface);
    --surface-soft: var(--ds-surface-secondary);
    --ink: var(--ds-text-primary);
    --text: var(--ds-text-primary);
    --muted: var(--ds-text-secondary);
    --line: var(--ds-separator);
    --line-dark: var(--ds-separator-strong);
    --radius-md: var(--ds-radius-sm);
    --radius-lg: var(--ds-radius-md);
    --radius-xl: var(--ds-radius-lg);
    --shadow: var(--ds-shadow-panel);
}

html[data-app-theme="dark"] {
    --ds-page-bg: #0f0f10;
    --ds-surface: #1c1c1e;
    --ds-surface-secondary: #232326;
    --ds-surface-tertiary: #2c2c2e;
    --ds-text-primary: #f5f5f7;
    --ds-text-secondary: #a1a1a6;
    --ds-text-tertiary: #8e8e93;
    --ds-separator: rgba(255, 255, 255, .11);
    --ds-separator-strong: rgba(255, 255, 255, .18);
    --ds-focus: rgba(64, 156, 255, .30);
    --ds-shadow-panel: 0 1px 2px rgba(0, 0, 0, .16), 0 10px 28px rgba(0, 0, 0, .16);
    --ds-shadow-menu: 0 18px 46px rgba(0, 0, 0, .36);
    --ds-shadow-modal: 0 30px 88px rgba(0, 0, 0, .48);
}

html {
    background: var(--ds-page-bg);
    scrollbar-gutter: stable;
}

body.app-modern-shell {
    background: var(--ds-page-bg) !important;
    color: var(--ds-text-primary);
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", "Segoe UI", Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

body.app-modern-shell .site-shell,
body.app-modern-shell .page-container {
    background: var(--ds-page-bg) !important;
}

/* Shared typography hierarchy */
body.app-modern-shell :is(.page-heading h1, .hero-banner h1, .communications-hero h1) {
    color: var(--ds-text-primary) !important;
    font-weight: 720 !important;
    letter-spacing: -.032em !important;
}
body.app-modern-shell :is(.page-heading p, .muted, .helper-text, .field-meta) {
    color: var(--ds-text-secondary) !important;
}

/* Shared surfaces. Marketplace-specific colored banners/badges intentionally stay untouched. */
body.app-modern-shell :is(
    .panel,
    .dashboard-panel,
    .metric-card,
    .store-card,
    .api-toolbar,
    .api-table-panel,
    .orders-stat,
    .orders-metric-card,
    .orders-filter-panel,
    .workspace-sidebar,
    .pricing-sidebar,
    .modal-card,
    .orders-dialog__card,
    .orders-history-dialog__card
) {
    border-color: var(--ds-separator) !important;
    border-radius: var(--ds-radius-lg) !important;
    box-shadow: var(--ds-shadow-panel) !important;
}

/* One geometry for ordinary controls. Pills/badges retain their explicit rounded style. */
body.app-modern-shell :is(
    .button,
    .action-primary,
    .action-cancel,
    .file-button,
    .side-action,
    .api-add-button,
    .orders-refresh,
    .app-table-reset-button,
    .app-filter-toggle,
    .column-settings-button,
    .page-settings-button
) {
    border-radius: var(--ds-radius-sm) !important;
    box-shadow: none !important;
    transition: background-color var(--ds-motion-fast) var(--ds-ease),
                border-color var(--ds-motion-fast) var(--ds-ease),
                color var(--ds-motion-fast) var(--ds-ease),
                opacity var(--ds-motion-fast) var(--ds-ease) !important;
}
body.app-modern-shell :is(
    input:not([type="checkbox"]):not([type="radio"]),
    select,
    textarea,
    .control-input,
    .search-field,
    .orders-search,
    .mpw-search
) {
    border-color: var(--ds-separator-strong) !important;
    border-radius: var(--ds-radius-sm) !important;
    box-shadow: none !important;
}
body.app-modern-shell :is(
    input:not([type="checkbox"]):not([type="radio"]),
    select,
    textarea,
    .control-input,
    .search-field,
    .orders-search,
    .mpw-search
):focus {
    border-color: rgba(0, 113, 227, .55) !important;
    box-shadow: 0 0 0 3px var(--ds-focus) !important;
}

body.app-modern-shell :is(button, a, input, select, textarea, summary):focus-visible {
    outline: 3px solid var(--ds-focus) !important;
    outline-offset: 2px !important;
}

/* Avoid visual jumping from legacy hover transforms on core actions. */
body.app-modern-shell :is(
    .button,
    .action-primary,
    .action-cancel,
    .file-button,
    .api-add-button,
    .column-settings-button,
    .page-settings-button
):hover {
    transform: none !important;
}

/* Tables: lighter separators, stable sticky headers, no decorative vertical grid. */
body.app-modern-shell table {
    font-variant-numeric: tabular-nums;
}
body.app-modern-shell table :is(th, td) {
    border-color: var(--ds-separator) !important;
}
body.app-modern-shell table thead th {
    color: var(--ds-text-secondary);
    font-weight: 650;
}

/* Menus/dialogs use the same elevation language. */
body.app-modern-shell :is(
    .main-nav-submenu,
    .header-store-picker__menu,
    .header-profile-popover,
    .workspace-section-search__panel,
    .app-searchable-select__menu,
    .fs-select__menu
) {
    border-color: var(--ds-separator) !important;
    border-radius: var(--ds-radius-md) !important;
    box-shadow: var(--ds-shadow-menu) !important;
}
body.app-modern-shell :is(.modal-card, .orders-dialog__card, .orders-history-dialog__card) {
    border-radius: var(--ds-radius-xl) !important;
    box-shadow: var(--ds-shadow-modal) !important;
}

/* --------------------------------------------------------------------------
   Calm top navigation
   -------------------------------------------------------------------------- */
body.app-modern-shell {
    --gm-top-navigation-height: 50px;
    --gm-actions-reserve: 330px;
    --gm-bg: var(--ds-page-bg);
    --gm-text: var(--ds-text-primary);
    --gm-muted: var(--ds-text-secondary);
    --gm-border: var(--ds-separator);
    --gm-border-strong: var(--ds-separator-strong);
}

@media (min-width: 1121px) {
    body.app-modern-shell .app-header,
    body.app-modern-shell.products-modern-body .app-header {
        height: var(--gm-top-navigation-height) !important;
        min-height: var(--gm-top-navigation-height) !important;
        grid-template-columns: 188px minmax(0, 1fr) !important;
        grid-template-rows: var(--gm-top-navigation-height) !important;
        gap: 8px !important;
        padding: 0 var(--gm-actions-reserve) 0 18px !important;
        border: 0 !important;
        border-bottom: 1px solid var(--ds-separator) !important;
        background: rgba(250, 250, 252, .97) !important;
        box-shadow: none !important;
    }

    html[data-app-theme="dark"] body.app-modern-shell .app-header,
    html[data-app-theme="dark"] body.app-modern-shell.products-modern-body .app-header {
        background: rgba(28, 28, 30, .98) !important;
    }

    body.app-modern-shell .brand,
    body.app-modern-shell.products-modern-body .brand {
        min-height: var(--gm-top-navigation-height) !important;
        height: var(--gm-top-navigation-height) !important;
        max-width: 188px !important;
        padding: 0 !important;
    }
    body.app-modern-shell .brand-name,
    body.app-modern-shell.products-modern-body .brand-name {
        color: var(--ds-text-primary) !important;
        font-size: 14px !important;
        font-weight: 720 !important;
        letter-spacing: -.025em !important;
    }

    body.app-modern-shell .main-nav,
    body.app-modern-shell.products-modern-body .main-nav {
        height: var(--gm-top-navigation-height) !important;
        min-height: var(--gm-top-navigation-height) !important;
        gap: clamp(0px, calc(3px * var(--gm-nav-fit, 1)), 3px) !important;
        align-items: center !important;
    }

    body.app-modern-shell .main-nav__link,
    body.app-modern-shell .main-nav-menu > .main-nav__link,
    body.app-modern-shell.products-modern-body .main-nav__link,
    body.app-modern-shell.products-modern-body .main-nav-menu > .main-nav__link {
        min-height: 32px !important;
        height: 32px !important;
        padding: 0 clamp(5px, calc(8px * var(--gm-nav-fit, 1)), 8px) !important;
        border: 0 !important;
        border-radius: var(--ds-radius-xs) !important;
        background: transparent !important;
        color: var(--ds-text-secondary) !important;
        box-shadow: none !important;
        font-size: clamp(10.2px, calc(10.2px + 1.4px * var(--gm-nav-fit, 1)), 11.6px) !important;
        font-weight: 500 !important;
        letter-spacing: -.005em !important;
        transition: background-color var(--ds-motion-fast) var(--ds-ease),
                    color var(--ds-motion-fast) var(--ds-ease) !important;
    }
    body.app-modern-shell .main-nav__link:hover,
    body.app-modern-shell .main-nav-menu > .main-nav__link:hover {
        background: rgba(29, 29, 31, .045) !important;
        color: var(--ds-text-primary) !important;
    }
    html[data-app-theme="dark"] body.app-modern-shell .main-nav__link:hover,
    html[data-app-theme="dark"] body.app-modern-shell .main-nav-menu > .main-nav__link:hover {
        background: rgba(255, 255, 255, .075) !important;
    }

    body.app-modern-shell .main-nav__link.active,
    body.app-modern-shell .main-nav-menu.active > .main-nav__link,
    body.app-modern-shell .main-nav-menu > .main-nav__link.active,
    body.app-modern-shell.products-modern-body .main-nav__link.active,
    body.app-modern-shell.products-modern-body .main-nav-menu.active > .main-nav__link {
        background: rgba(29, 29, 31, .055) !important;
        color: var(--ds-text-primary) !important;
        font-weight: 640 !important;
        box-shadow: none !important;
    }
    html[data-app-theme="dark"] body.app-modern-shell .main-nav__link.active,
    html[data-app-theme="dark"] body.app-modern-shell .main-nav-menu.active > .main-nav__link,
    html[data-app-theme="dark"] body.app-modern-shell .main-nav-menu > .main-nav__link.active {
        background: rgba(255, 255, 255, .085) !important;
    }

    body.app-modern-shell .main-nav__link.active::after,
    body.app-modern-shell .main-nav-menu.active > .main-nav__link::after,
    body.app-modern-shell .main-nav-menu > .main-nav__link.active::after {
        content: "" !important;
        display: block !important;
        position: absolute !important;
        left: 9px !important;
        right: 9px !important;
        bottom: -6px !important;
        height: 2px !important;
        border-radius: 999px !important;
        background: var(--ds-text-primary) !important;
        opacity: .72 !important;
    }

    /* Utility controls sit in the same visual line as navigation but stay quiet. */
    body.app-modern-shell .workspace-utility-bar,
    body.app-modern-shell.sidebar-collapsed .workspace-utility-bar {
        top: 0 !important;
        right: 14px !important;
        height: var(--gm-top-navigation-height) !important;
        min-height: var(--gm-top-navigation-height) !important;
        padding: 0 !important;
        gap: 6px !important;
    }
    body.app-modern-shell .workspace-utility-bar .header-actions,
    body.app-modern-shell.products-modern-body .workspace-utility-bar .header-actions {
        min-height: var(--gm-top-navigation-height) !important;
        gap: 5px !important;
    }
    body.app-modern-shell .workspace-section-search__toggle {
        width: 34px !important;
        height: 34px !important;
        border-color: transparent !important;
        border-radius: var(--ds-radius-sm) !important;
        background: transparent !important;
        color: var(--ds-text-secondary) !important;
    }
    body.app-modern-shell .workspace-section-search__toggle:hover,
    body.app-modern-shell .workspace-section-search__toggle[aria-expanded="true"] {
        border-color: transparent !important;
        background: rgba(29, 29, 31, .05) !important;
        color: var(--ds-text-primary) !important;
    }

    body.app-modern-shell .header-store-picker > summary,
    body.app-modern-shell .header-profile-button {
        min-height: 34px !important;
        height: 34px !important;
        border: 1px solid transparent !important;
        border-radius: var(--ds-radius-sm) !important;
        background: transparent !important;
        color: var(--ds-text-primary) !important;
        box-shadow: none !important;
        transition: background-color var(--ds-motion-fast) var(--ds-ease),
                    border-color var(--ds-motion-fast) var(--ds-ease) !important;
    }
    body.app-modern-shell .header-store-picker > summary {
        gap: 6px !important;
        padding: 0 8px !important;
        color: var(--ds-text-secondary) !important;
        font-size: 11px !important;
        font-weight: 560 !important;
    }
    body.app-modern-shell .header-store-picker > summary strong {
        min-width: 0 !important;
        padding: 0 !important;
        border-radius: 0 !important;
        background: transparent !important;
        color: var(--ds-text-primary) !important;
        font-size: 11px !important;
        font-weight: 650 !important;
    }
    body.app-modern-shell .header-store-picker > summary:hover,
    body.app-modern-shell .header-store-picker[open] > summary,
    body.app-modern-shell .header-profile-button:hover,
    body.app-modern-shell .header-profile-menu[open] .header-profile-button {
        border-color: transparent !important;
        background: rgba(29, 29, 31, .05) !important;
    }
    html[data-app-theme="dark"] body.app-modern-shell .header-store-picker > summary:hover,
    html[data-app-theme="dark"] body.app-modern-shell .header-store-picker[open] > summary,
    html[data-app-theme="dark"] body.app-modern-shell .header-profile-button:hover,
    html[data-app-theme="dark"] body.app-modern-shell .header-profile-menu[open] .header-profile-button,
    html[data-app-theme="dark"] body.app-modern-shell .workspace-section-search__toggle:hover {
        background: rgba(255, 255, 255, .075) !important;
    }

    body.app-modern-shell .header-profile-button {
        gap: 7px !important;
        padding: 0 6px 0 3px !important;
    }
    body.app-modern-shell .header-profile-avatar {
        width: 28px !important;
        height: 28px !important;
        background: var(--ds-surface-tertiary) !important;
        color: var(--ds-text-primary) !important;
        font-size: 10px !important;
        font-weight: 650 !important;
    }
    body.app-modern-shell .header-profile-button__text {
        gap: 0 !important;
    }
    body.app-modern-shell .header-profile-button__text strong {
        color: var(--ds-text-primary) !important;
        font-size: 10.5px !important;
        line-height: 1.05 !important;
        font-weight: 600 !important;
    }
    body.app-modern-shell .header-profile-button__text small {
        display: none !important;
    }

    body.app-modern-shell .main-nav-submenu > a,
    body.app-modern-shell.products-modern-body .main-nav-submenu > a {
        border-radius: var(--ds-radius-sm) !important;
        color: var(--ds-text-secondary) !important;
    }
    body.app-modern-shell .main-nav-submenu > a:hover,
    body.app-modern-shell .main-nav-submenu > a.active {
        background: var(--ds-surface-tertiary) !important;
        color: var(--ds-text-primary) !important;
    }
}

/* Mid-size desktops: give content priority before shrinking labels too aggressively. */
@media (min-width: 1121px) and (max-width: 1540px) {
    body.app-modern-shell { --gm-actions-reserve: 284px; }
    body.app-modern-shell .app-header,
    body.app-modern-shell.products-modern-body .app-header {
        grid-template-columns: 168px minmax(0, 1fr) !important;
        padding-left: 12px !important;
    }
    body.app-modern-shell .brand,
    body.app-modern-shell.products-modern-body .brand {
        max-width: 168px !important;
    }
    body.app-modern-shell .header-profile-button__text { display: none !important; }
    body.app-modern-shell .main-nav__link,
    body.app-modern-shell .main-nav-menu > .main-nav__link {
        font-size: clamp(9.8px, calc(9.8px + 1.1px * var(--gm-nav-fit, 1)), 10.9px) !important;
        padding-inline: clamp(3px, calc(6px * var(--gm-nav-fit, 1)), 6px) !important;
    }
}

/* Mobile/tablet navigation follows the same calm hierarchy instead of a black active block. */
@media (max-width: 1120px) {
    body.app-modern-shell .app-header,
    body.app-modern-shell.products-modern-body .app-header {
        border-bottom-color: var(--ds-separator) !important;
        background: var(--ds-surface) !important;
        box-shadow: none !important;
    }
    body.app-modern-shell .nav-toggle {
        border-radius: var(--ds-radius-sm) !important;
        background: var(--ds-surface-tertiary) !important;
        color: var(--ds-text-primary) !important;
    }
    body.app-modern-shell .main-nav,
    body.app-modern-shell.products-modern-body .main-nav {
        border-color: var(--ds-separator) !important;
        border-radius: var(--ds-radius-md) !important;
        background: var(--ds-surface) !important;
        box-shadow: var(--ds-shadow-menu) !important;
    }
    body.app-modern-shell .main-nav__link,
    body.app-modern-shell .main-nav-menu > .main-nav__link {
        color: var(--ds-text-secondary) !important;
        font-weight: 520 !important;
    }
    body.app-modern-shell .main-nav__link.active,
    body.app-modern-shell .main-nav-menu.active > .main-nav__link,
    body.app-modern-shell .main-nav-menu > .main-nav__link.active {
        background: var(--ds-surface-tertiary) !important;
        color: var(--ds-text-primary) !important;
        box-shadow: none !important;
        font-weight: 650 !important;
    }
    body.app-modern-shell .main-nav__link.active::after,
    body.app-modern-shell .main-nav-menu.active > .main-nav__link::after,
    body.app-modern-shell .main-nav-menu > .main-nav__link.active::after {
        display: none !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    body.app-modern-shell *,
    body.app-modern-shell *::before,
    body.app-modern-shell *::after {
        scroll-behavior: auto !important;
    }
}