/* ==========================================================================
   DESKTOP LAYER (>= 769px)
   Loaded after style.css and mobile.css. Brings the phone design language to
   desktop: same tokens (defined in mobile.css), solid app bar with the page
   title, sidebar as primary navigation, a Net Worth hero, pill sub-tabs, and
   pages with a clean back bar. Removing the <link> restores the old desktop look.

     1. Canvas & content width      6. Portfolio
     2. Sidebar navigation          7. Sub-tabs & cards
     3. App bar + ticker            8. Full pages (goal detail, settings, …)
     4. Overview hero               9. Forms, Add menu, dialogs, toast
     5. Goals / Budget rows
   ========================================================================== */

@media (min-width: 769px) {

    :root {
        --d-sidebar-w: 280px;
        --d-appbar-h: 64px;
        --d-ticker-h: 30px;
        --d-pad: 32px;
        --d-content-max: 1320px;
    }

    /* ---------- 1. CANVAS & CONTENT WIDTH ---------- */
    html,
    body {
        background: var(--m-bg) !important;
    }

    .app-main-content {
        padding: 0 var(--d-pad) 48px !important;
    }

    /* On desktop the AI assistant lives in the sidebar ("Ask AI"), not as a floating button */
    #ai-chat-fab:not(#_) {
        display: none !important;
    }

    /* The floating Overview/Portfolio/Budget/Goals pill is replaced by sidebar navigation */
    /* `:not(#_)` outranks style.css's ID-level !important display rules for this bar */
    #sticky-tab-wrapper:not(#_) {
        display: none !important;
    }

    /* One surface level: drop the big white box every tab sat inside */
    .tab-content {
        background: transparent !important;
        border: none !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        max-width: var(--d-content-max);
        margin: 0 auto !important;
        padding-top: 20px !important;
    }
    .tab-content > .tab-pane {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
    .tab-content > .tab-pane > .p-5,
    .tab-content > .tab-pane > .p-20 {
        padding: 0 !important;
    }

    /* The app bar shows the page name, so the in-page headings go (same as phones) */
    .tab-pane .section-header-main {
        display: none !important;
    }
    .tab-pane div:has(> .section-header-main:only-child) {
        display: none !important;
    }

    /* ---------- 2. SIDEBAR NAVIGATION ---------- */
    .app-sidebar {
        background: var(--m-surface) !important;
        border-right: 1px solid var(--m-hairline) !important;
        box-shadow: none !important;
    }
    .app-sidebar .sidebar-title {
        font-size: 18px !important;
        font-weight: 800 !important;
        letter-spacing: -0.02em;
        white-space: nowrap;
        color: var(--m-text) !important;
    }
    .app-sidebar .sidebar-user {
        border-radius: 12px !important;
        border: 1px solid var(--m-hairline) !important;
        background: var(--m-bg) !important;
    }

    .sidebar-primary-nav {
        display: flex;
        flex-direction: column;
        gap: 2px;
        padding-bottom: 14px;
        margin-bottom: 6px;
        border-bottom: 1px solid var(--m-hairline);
    }
    .app-sidebar .sidebar-primary-nav .sidebar-nav-item {
        padding: 10px 14px !important;
        font-size: 14.5px !important;
        font-weight: 600 !important;
        color: var(--m-muted) !important;
        position: relative;
    }
    .app-sidebar .sidebar-primary-nav .sidebar-nav-item .icon-svg {
        width: 19px !important;
        height: 19px !important;
    }
    .app-sidebar .sidebar-primary-nav .sidebar-nav-item.active {
        background: var(--m-accent-soft) !important;
        color: var(--m-accent) !important;
        font-weight: 700 !important;
    }
    .app-sidebar .sidebar-primary-nav .sidebar-nav-item.active::before {
        content: "";
        position: absolute;
        left: -16px;
        top: 8px;
        bottom: 8px;
        width: 3px;
        border-radius: 0 3px 3px 0;
        background: var(--m-accent);
    }

    .app-sidebar .sidebar-item {
        padding: 9px 14px !important;
        font-size: 13.5px !important;
        border-radius: 10px !important;
    }
    .app-sidebar .sidebar-item:hover {
        transform: none !important;
        background: var(--m-bg) !important;
    }
    .app-sidebar .sidebar-section-label {
        font-size: 11px !important;
        letter-spacing: 0.08em !important;
        color: var(--m-muted) !important;
        opacity: 0.8;
        margin-top: 14px !important;
    }

    /* ---------- 3. APP BAR + TICKER ---------- */
    #app-header-bar {
        background: var(--m-surface) !important;
        -webkit-backdrop-filter: none !important;
        backdrop-filter: none !important;
        border: none !important;
        border-bottom: 1px solid var(--m-hairline) !important;
        box-shadow: none !important;
        border-radius: 0 !important;
        padding: 0 !important;
    }
    #app-header-bar .user-info-bar {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 0 !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    #dashToolbar {
        order: 1;
        display: flex !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        justify-content: flex-end !important;
        gap: 8px !important;
        height: var(--d-appbar-h) !important;
        padding: 0 var(--d-pad) !important;
        margin: 0 !important;
        width: 100% !important;
        box-sizing: border-box;
    }
    #dashToolbar::before {
        content: "Overview";
        margin-right: auto;
        font-size: 22px;
        font-weight: 800;
        letter-spacing: -0.025em;
        color: var(--m-text);
        white-space: nowrap;
    }
    body[data-active-tab="st-wealth-tab"] #dashToolbar::before { content: "Portfolio"; }
    body[data-active-tab="budget-tab"] #dashToolbar::before { content: "Budget"; }
    body[data-active-tab="goals-tab"] #dashToolbar::before { content: "Goals"; }

    #privacy-toggle,
    #dashToolbar .nw-refresh-btn {
        width: 36px !important;
        height: 36px !important;
        border-radius: 10px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        background: transparent !important;
        border: none !important;
        color: var(--m-muted) !important;
    }
    #privacy-toggle:hover,
    #dashToolbar .nw-refresh-btn:hover {
        background: var(--m-bg) !important;
    }
    #privacy-toggle svg { width: 17px !important; height: 17px !important; }
    #dashToolbar .nw-refresh-btn svg { width: 15px !important; height: 15px !important; }

    #sync-status {
        background: transparent !important;
        border: none !important;
        padding: 0 !important;
        box-shadow: none !important;
        font-size: 9px !important;
    }
    #sync-status #status-text { display: none !important; }
    #last-sync-info {
        padding: 5px 10px !important;
        border-radius: 999px !important;
        background: var(--m-accent-soft) !important;
        border: none !important;
        color: var(--m-accent) !important;
        font-size: 12px !important;
        font-weight: 700 !important;
    }
    #last-sync-info #last-sync-time { color: inherit !important; }

    #nwRiskProfileBadge {
        padding: 5px 10px !important;
        border-radius: 999px !important;
        background: var(--m-bg) !important;
        border: 1px solid var(--m-hairline) !important;
        font-size: 12px !important;
    }

    #dashToolbar .dash-toolbar-btn {
        height: 38px !important;
        padding: 0 14px !important;
        border-radius: 10px !important;
        font-size: 13.5px !important;
        font-weight: 700 !important;
        gap: 6px !important;
        border: 1px solid var(--m-hairline) !important;
        background: var(--m-surface) !important;
        color: var(--m-text) !important;
        box-shadow: none !important;
    }
    #dashToolbar .dash-toolbar-btn-primary {
        background: var(--m-accent-fill) !important;
        border-color: var(--m-accent-fill) !important;
        color: #ffffff !important;
        height: 32px !important;
        padding: 0 12px !important;
        border-radius: 8px !important;
        font-size: 12.5px !important;
        gap: 5px !important;
    }
    #dashToolbar .dash-toolbar-btn-primary .icon-svg {
        width: 13px !important;
        height: 13px !important;
    }

    /* Ticker: a slim strip under the bar, on Overview only (as on phones) */
    #app-header-bar .ticker-wrap {
        order: 2;
        height: var(--d-ticker-h) !important;
        min-height: 0 !important;
        margin: 0 !important;
        padding: 0 var(--d-pad) !important;
        border-top: 1px solid var(--m-hairline);
        display: flex !important;
        align-items: center !important;
        width: 100% !important;
        box-sizing: border-box;
        background: var(--m-bg) !important;
        border-radius: 0 !important;
    }
    #app-header-bar .ticker-wrap,
    #app-header-bar .ticker-wrap * {
        font-size: 12px !important;
    }
    body:not([data-active-tab="overview-tab"]) #app-header-bar .ticker-wrap {
        display: none !important;
    }

    /* ---------- 4. OVERVIEW HERO ---------- */
    #overview-tab .networth-banner-swipe {
        display: grid !important;
        grid-template-columns: repeat(12, minmax(0, 1fr));
        gap: 16px !important;
        overflow: visible !important;
        margin-bottom: 20px !important;
    }
    #overview-tab #networthTopRow {
        display: contents !important;
    }
    #overview-tab .networth-banner-swipe .networth-summary-card,
    #overview-tab .networth-banner-swipe .networth-side-card {
        min-width: 0 !important;
        width: auto !important;
        max-width: none !important;
        margin: 0 !important;
        box-sizing: border-box;
    }

    #overview-tab .networth-summary-card {
        grid-column: span 8;
        grid-row: span 2;
        order: 1;
        display: flex !important;
        flex-direction: column;
        justify-content: flex-start;
        min-height: 260px;
        padding: 28px 32px 24px !important;
        border: none !important;
        border-radius: 20px !important;
        background: linear-gradient(135deg, #1e1b4b 0%, #3730a3 55%, #4f46e5 100%) !important;
        box-shadow: 0 12px 28px rgba(55, 48, 163, 0.25) !important;
        overflow: hidden;
    }
    #overview-tab .networth-summary-card::before,
    #overview-tab .networth-summary-card::after {
        display: none !important;
    }
    #overview-tab .networth-summary-card .asset-category-header {
        border: none !important;
        margin: 0 0 8px !important;
        padding: 0 !important;
    }
    #overview-tab .networth-summary-card .asset-category-label {
        color: rgba(255, 255, 255, 0.72) !important;
        font-size: 12px !important;
    }
    #overview-tab .networth-summary-card .asset-category-value {
        color: #ffffff !important;
        font-size: 52px !important;
        font-weight: 800 !important;
        letter-spacing: -0.03em;
        line-height: 1.05 !important;
    }

    #overview-tab .networth-side-card.accent-insurance { order: 2; grid-column: span 4; }
    #overview-tab .networth-side-card.accent-loans { order: 3; grid-column: span 4; }

    #overview-tab .networth-side-card {
        display: flex !important;
        flex-direction: column;
        justify-content: center;
        padding: 18px 20px !important;
        border-radius: 16px !important;
    }
    #overview-tab .networth-side-card .asset-category-value {
        font-size: 24px !important;
    }

    /* Key stats strip inside the Net Worth card */
    #overview-tab .nw-hero-stats {
        margin-top: auto;
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        border-top: 1px solid rgba(255, 255, 255, 0.16);
        padding-top: 18px;
    }
    #overview-tab .nw-hero-stat {
        min-width: 0;
        padding: 0 18px;
        border-left: 1px solid rgba(255, 255, 255, 0.14);
    }
    #overview-tab .nw-hero-stat:first-child { padding-left: 0; border-left: none; }
    #overview-tab .nw-hero-stat:last-child { padding-right: 0; }
    #overview-tab .nw-hero-stat-value {
        font-size: 17px !important;
    }

    /* Upcoming Activities (1/3) beside the Allocation + Equity-vs-Debt charts (2/3).
       The charts row is a swipe carousel on phones; here both charts sit side by side. */
    #overview-tab .overview-activity-row {
        display: grid !important;
        grid-template-columns: minmax(300px, 1fr) minmax(0, 1.6fr);
        gap: 16px !important;
        align-items: stretch;
    }
    #overview-tab .overview-activity-row > * {
        width: auto !important;
        min-width: 0 !important;
        max-width: none !important;
        margin: 0 !important;
    }
    #portfolioChartsRow {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 16px !important;
        overflow: visible !important;
    }
    #portfolioChartsRow > .asset-allocation-chart-card {
        width: auto !important;
        min-width: 0 !important;
        max-width: none !important;
        margin: 0 !important;
    }

    /* ---------- 5. GOALS / BUDGET ROWS ---------- */
    .budget-summary-row {
        display: grid !important;
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 16px !important;
    }
    .budget-summary-row .networth-stat-card {
        min-width: 0 !important;
        width: auto !important;
        margin: 0 !important;
    }

    .budget-month-arrow {
        width: 34px !important;
        height: 34px !important;
        padding: 0 !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        line-height: 1 !important;
        font-size: 20px !important;
        border-radius: 10px !important;
    }

    /* ---------- 6. PORTFOLIO ---------- */
    .portfolio-tools {
        width: 100%;
        display: grid !important;
        grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
        gap: 12px !important;
    }
    .portfolio-tool-btn {
        justify-content: flex-start;
        gap: 10px !important;
        height: 52px;
        padding: 0 16px !important;
        border-radius: 14px !important;
        font-size: 14px !important;
        background: var(--m-surface) !important;
        border-color: var(--m-hairline) !important;
        box-shadow: var(--m-shadow);
    }
    .portfolio-tool-btn .icon-svg {
        width: 18px !important;
        height: 18px !important;
        padding: 8px;
        border-radius: 10px;
        background: var(--m-accent-soft);
        box-sizing: content-box;
    }

    /* Asset Breakdown: all five categories on one row instead of 4 + 1 */
    #assetBreakdownGrid:not(#_) {
        display: grid !important;
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 14px !important;
        overflow: visible !important;
    }
    #assetBreakdownGrid > .liquid-sub-item {
        width: auto !important;
        min-width: 0 !important;
        max-width: none !important;
        margin: 0 !important;
    }
    #assetBreakdownGrid .asset-category-value {
        font-size: 22px !important;
        white-space: nowrap;
    }

    .holdings-card-header h3 {
        font-size: 18px !important;
    }

    /* ---------- 7. SUB-TABS & CARDS ---------- */
    .analytics-tabs {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 8px !important;
        padding: 0 !important;
        background: transparent !important;
        border: none !important;
        box-shadow: none !important;
        margin-bottom: 18px !important;
        grid-template-columns: none !important;
    }
    .analytics-tabs .analytics-tab-btn,
    .mc-toggle-group .mc-toggle-btn {
        flex: 0 0 auto !important;
        width: auto !important;
        min-width: 0 !important;
        height: 38px !important;
        padding: 0 16px !important;
        display: inline-flex !important;
        flex-direction: row !important;
        align-items: center !important;
        gap: 8px !important;
        border-radius: 999px !important;
        border: 1px solid var(--m-hairline) !important;
        background: var(--m-surface) !important;
        color: var(--m-muted) !important;
        font-size: 13.5px !important;
        font-weight: 700 !important;
        white-space: nowrap !important;
        box-shadow: none !important;
    }
    .analytics-tabs .analytics-tab-btn .tab-icon,
    .analytics-tabs .analytics-tab-btn .tab-icon .icon-svg {
        font-size: 15px !important;
        width: 16px !important;
        height: 16px !important;
        margin: 0 !important;
    }
    .analytics-tabs .analytics-tab-btn .short-text { display: none !important; }
    .analytics-tabs .analytics-tab-btn .long-text { display: inline !important; }
    .analytics-tabs .analytics-tab-btn:hover {
        border-color: var(--m-accent) !important;
        color: var(--m-accent) !important;
    }
    .analytics-tabs .analytics-tab-btn.active,
    .mc-toggle-group .mc-toggle-btn.active {
        background: var(--m-text) !important;
        border-color: var(--m-text) !important;
        color: var(--m-surface) !important;
    }

    .fire-sub-tabs,
    .goal-detail-tabs {
        gap: 26px !important;
    }
    .fire-sub-tab-btn {
        font-size: 14px !important;
    }

    /* One card style everywhere */
    .modern-asset-card:not([style*="transparent"]),
    .liquid-sub-item,
    .networth-stat-card,
    .merged-sip-card,
    .goals-summary-tile,
    .analytics-card,
    .upcoming-activities-card,
    .asset-allocation-chart-card,
    .portfolio-holdings-card,
    .score-breakdown-container,
    .portfolio-insights-container,
    .mc-card {
        border-radius: var(--m-radius) !important;
        box-shadow: var(--m-shadow) !important;
    }

    /* ---------- 8. FULL PAGES (push navigation) ---------- */
    .app-page {
        background: var(--m-bg) !important;
        padding: 0 var(--d-pad) 48px !important;
        box-sizing: border-box !important;
    }
    #unifiedConfigModal.app-page,
    #unifiedAddTxModal.app-page,
    #commonPortfolioHistoryModal.app-page,
    #lumpSumAllocatorModal.app-page,
    #investorToolsModal.app-page {
        padding: 0 var(--d-pad) 48px !important;
    }

    .app-page div.app-page-header {
        position: sticky !important;
        top: 0 !important;
        z-index: 20 !important;
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        gap: 12px !important;
        min-height: var(--d-appbar-h);
        margin: 0 calc(-1 * var(--d-pad)) 22px !important;
        padding: 10px var(--d-pad) 10px 20px !important;
        background: var(--m-surface) !important;
        -webkit-backdrop-filter: none !important;
        backdrop-filter: none !important;
        border: none !important;
        border-bottom: 1px solid var(--m-hairline) !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        box-sizing: border-box;
    }
    .app-page-header h2,
    .app-page-header h3,
    .app-page-header h4 {
        flex: 1 1 auto;
        min-width: 0;
        margin: 0 !important;
        font-size: 20px !important;
        font-weight: 800 !important;
        letter-spacing: -0.02em;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        color: var(--m-text) !important;
    }

    .app-page-header .wiz-back-btn {
        height: 38px !important;
        padding: 0 12px 0 8px !important;
        margin: 0 !important;
        border-radius: 10px !important;
        background: transparent !important;
        color: var(--m-accent) !important;
        font-size: 14px !important;
        font-weight: 700 !important;
        gap: 2px !important;
        flex-shrink: 0;
    }
    .app-page-header .wiz-back-btn:hover {
        background: var(--m-accent-soft) !important;
    }
    .wiz-back-btn .wiz-back-chevron {
        width: 20px;
        height: 20px;
    }

    .app-page-header:has(.wiz-back-btn) .page-close-btn:not(#_) {
        display: none !important;
    }

    /* Goal detail: title with the "‹ 4 / 6 ›" pager underneath */
    #goalDetailTitleContainer {
        flex: 1 1 auto;
        min-width: 0;
        display: grid !important;
        grid-template-columns: auto auto auto 1fr;
        grid-template-areas:
            "title title title title"
            "prev  count next  .";
        align-items: center;
        row-gap: 0;
    }
    #goalDetailTitleContainer h2 {
        grid-area: title;
        display: block !important;
        margin: 0 !important;
        padding: 0 !important;
        border: none !important;
        font-size: 20px !important;
        line-height: 1.2 !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        min-width: 0;
    }
    #goalDetailTitleContainer > button {
        height: 22px;
        padding: 0 6px !important;
        font-size: 17px !important;
        color: var(--m-muted) !important;
    }
    #goalDetailTitleContainer > button:first-of-type { grid-area: prev; padding-left: 0 !important; }
    #goalDetailTitleContainer > button:last-of-type { grid-area: next; }
    #goalDetailTitleContainer > span {
        grid-area: count;
        font-size: 12px !important;
        color: var(--m-muted) !important;
    }
    #editGoalBtnGroup {
        height: 38px !important;
        padding: 0 18px !important;
        border-radius: 10px !important;
        font-size: 14px !important;
        font-weight: 700 !important;
        background: var(--m-accent-fill) !important;
    }

    #analytics-detail-page .inline-style-724 {
        padding: 0 !important;
    }

    /* ---------- 9. FORMS, ADD MENU, DIALOGS, TOAST ---------- */
    .wiz-input,
    .premium-search-input {
        min-height: 42px !important;
        border-radius: 10px !important;
        text-align: left !important;
        text-align-last: left;
        padding-left: 12px !important;
        padding-right: 12px !important;
        box-sizing: border-box !important;
    }
    .wiz-input:focus,
    .premium-search-input:focus {
        outline: none !important;
        border-color: var(--m-accent) !important;
        box-shadow: 0 0 0 3px var(--m-accent-soft) !important;
    }

    :has(> .btn-wiz-save):has(> .btn-wiz-cancel) {
        display: flex !important;
        justify-content: flex-end !important;
        gap: 10px !important;
        margin-top: 20px !important;
    }
    .btn-wiz-save,
    .btn-wiz-cancel {
        min-height: 42px !important;
        padding: 0 22px !important;
        border-radius: 10px !important;
        font-size: 14px !important;
        font-weight: 700 !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
    .btn-wiz-save {
        background: var(--m-accent-fill) !important;
        color: #ffffff !important;
        border: none !important;
    }
    .btn-wiz-cancel {
        background: var(--m-surface) !important;
        color: var(--m-muted) !important;
        border: 1px solid var(--m-hairline) !important;
    }

    /* Add menu: tile menu under the "Add entry" button */
    #addEntryMenu {
        width: 340px !important;
        padding: 12px !important;
        border: 1px solid var(--m-hairline) !important;
        border-radius: 16px !important;
        background: var(--m-surface) !important;
        box-shadow: 0 16px 40px rgba(15, 23, 42, 0.16) !important;
    }
    #addEntryMenu[style*="display: block"],
    #addEntryMenu[style*="display:block"] {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
    }
    #addEntryMenu .add-sheet-title {
        grid-column: 1 / -1;
        font-size: 13px;
        font-weight: 800;
        letter-spacing: 0.04em;
        text-transform: uppercase;
        color: var(--m-muted);
        padding: 2px 4px 4px;
    }
    #addEntryMenu > a {
        display: flex !important;
        align-items: center;
        gap: 10px;
        padding: 10px !important;
        border-radius: 12px !important;
        background: var(--m-bg) !important;
        color: var(--m-text) !important;
        font-size: 13px !important;
        font-weight: 700 !important;
        line-height: 1.25;
        text-decoration: none;
        border: 1px solid transparent !important;
    }
    #addEntryMenu > a:hover {
        border-color: var(--m-accent) !important;
        background: var(--m-accent-soft) !important;
    }
    #addEntryMenu > a .icon-svg {
        width: 16px !important;
        height: 16px !important;
        padding: 7px;
        border-radius: 9px;
        background: var(--m-surface);
        color: var(--m-accent);
        box-sizing: content-box;
        flex-shrink: 0;
    }

    #addInvestmentToGoalModal,
    #addExpenseModal {
        border-radius: 20px !important;
        border: 1px solid var(--m-hairline) !important;
        box-shadow: 0 24px 60px rgba(15, 23, 42, 0.22) !important;
    }

    #successToast {
        border-radius: 14px !important;
        padding: 12px 22px !important;
        font-size: 14px !important;
        box-shadow: 0 10px 30px rgba(5, 150, 105, 0.3) !important;
    }
}

/* Narrower desktops / tablets: hero takes the full row */
@media (min-width: 769px) and (max-width: 1100px) {
    #overview-tab .networth-summary-card { grid-column: 1 / -1; grid-row: auto; }
    #overview-tab .networth-side-card.accent-insurance,
    #overview-tab .networth-side-card.accent-loans { grid-column: span 6; }
    :root { --d-pad: 24px; }
    #overview-tab .overview-activity-row { grid-template-columns: minmax(0, 1fr); }
}

/* Wide screens: all five Asset Breakdown cards on one row (3 + 2 below this, so values never wrap) */
@media (min-width: 1280px) {
    #assetBreakdownGrid:not(#_) {
        grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    }
}

/* ---------- 10. SIDEBAR STAYS VISIBLE AND SHARP ----------
   Dialog overlays used to cover the whole window with a dim + blur layer, sidebar included.
   On desktop they now start at the sidebar's edge and only dim the content area. */
@media (min-width: 769px) {
    .modal-overlay:not(#_),
    #simpleGoalWizardModal,
    #unifiedConfigModalOverlay,
    #unifiedAddTxModalOverlay,
    #commonPortfolioHistoryModalOverlay,
    #lumpSumAllocatorModalOverlay,
    #investorToolsModalOverlay,
    #casImportModal:not(#_) {
        left: var(--d-sidebar-w) !important;
        width: calc(100% - var(--d-sidebar-w)) !important;
        -webkit-backdrop-filter: none !important;
        backdrop-filter: none !important;
    }

    /* Stand-alone dialogs: centre them in the content area, not the whole window */
    #addExpenseModal,
    #addInvestmentToGoalModal {
        left: calc(50% + var(--d-sidebar-w) / 2) !important;
    }
}

/* ---------- 11. iPAD: CLEAR THE STATUS BAR ----------
   Installed on an iPad, the app runs edge-to-edge under the status bar (black-translucent), and the
   fixed app bar sat at top:0 - the clock and battery drew over the page title and Add Entry button.
   Same fix as phones (mobile.css): the bar and sidebar start one status-bar height down and a solid
   strip paints the status-bar area. --m-safe-top is 0 on desktop browsers, so nothing moves there. */
@media (min-width: 769px) {
    body::before {
        content: "";
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        height: var(--m-safe-top);
        background: var(--m-surface);
        z-index: 355000;
        pointer-events: none;
    }
    #app-header-bar:not(#_) {
        top: var(--m-safe-top) !important;
    }
    .app-sidebar:not(#_) {
        top: var(--m-safe-top) !important;
        padding-top: 24px !important;
    }
    /* Full pages: the page box starts below the strip, so its sticky header never reaches under it */
    .app-page:not(#_) {
        top: var(--m-safe-top) !important;
        height: calc(100dvh - var(--m-safe-top)) !important;
    }
}