
@media (max-width: 1100px) {
    .public-header-inner {
        grid-template-columns: minmax(0, 1fr) minmax(0, 2fr) minmax(0, 1fr) !important;
        gap: 8px !important;
        padding: 8px 10px !important;
    }
    .public-header-center {
        width: 100%;
        overflow: visible !important;
        text-align: center !important;
    }
    .public-header-center p {
        font-size: clamp(13px, 2.2vw, 22px) !important;
        white-space: normal !important;
        overflow: visible !important;
        text-align: center !important;
        line-height: 1.25 !important;
    }
    .public-brand-wrap { gap: 5px !important; }
    .public-brand-logo img {
        width: clamp(48px, 8vw, 90px) !important;
        max-width: 100% !important;
        height: auto !important;
    }
    .sidebar-toggle {
        width: 32px !important;
        min-width: 32px !important;
        height: 34px !important;
        padding: 3px !important;
        font-size: 20px !important;
    }
    .theme-toggle {
        padding: 5px 6px !important;
        font-size: 11px !important;
        min-width: 0 !important;
    }
    #publicShell {
        grid-template-columns: minmax(0, 1fr) !important;
    }
    #publicShell > .public-page-wrapper {
        grid-column: 1 !important;
        width: 100% !important;
        min-width: 0 !important;
        margin-left: 0 !important;
    }
    #publicSidebar {
        position: fixed !important;
        top: calc(var(--public-header-height, 76px) + var(--mobile-nav-height, 48px)) !important;
        bottom: 0 !important;
        left: 0 !important;
        width: min(200px, 44vw) !important;
        max-width: 44vw !important;
        height: auto !important;
        overflow-y: auto !important;
        z-index: 110000 !important;
        box-shadow: 5px 0 18px rgba(0,0,0,.15);
    }
    #publicSidebar.collapsed {
        display: none !important;
    }
    #publicSidebar .public-sidebar-inner { padding: 12px 8px !important; }
    #publicSidebar a, #publicSidebar button {
        white-space: normal !important;
        overflow-wrap: anywhere;
        font-size: 12px !important;
    }
    #publicMobileNav {
        position: fixed;
        top: var(--public-header-height, 76px);
        left: 0;
        right: 0;
        z-index: 100000;
        background: var(--public-bg-sidebar);
        padding: 4px 6px;
        box-sizing: border-box;
        border-bottom: 1px solid var(--public-border-soft);
    }
    #publicMobileNav .top-dashboard-tabs {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        gap: 4px !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        transform: none !important;
        height: auto !important;
        min-height: 0 !important;
        overflow: visible !important;
    }
    #publicMobileNav .top-dashboard-tabs > * {
        flex: 1 1 0 !important;
        min-width: 0 !important;
        margin: 0 !important;
    }
    #publicMobileNav .top-dashboard-tabs > a,
    #publicMobileNav .dashboard-tab-dropdown > a,
    #publicMobileNav .dashboard-tab-dropdown > button {
        display: flex !important;
        align-items: center;
        justify-content: center;
        width: 100% !important;
        box-sizing: border-box;
        padding: 9px 4px !important;
        font-size: clamp(11px, 2.8vw, 14px) !important;
        white-space: nowrap !important;
        gap: 3px !important;
    }
    #publicMobileNav .dashboard-dropdown-menu,
    #publicMobileNav .macro-dropdown-menu,
    #publicMobileNav .debt-dropdown-menu {
        max-width: min(300px, 90vw) !important;
        max-height: 65vh;
        overflow-y: auto;
    }
    #publicMobileNav .debt-tab-dropdown > [class*="dropdown-menu"],
    #publicMobileNav .tax-tab-dropdown > [class*="dropdown-menu"] {
        left: auto !important;
        right: 0 !important;
    }
    .public-dashboard-page .dashboard-sticky-controls {
        margin-top: 0 !important;
        margin-bottom: 0 !important;
        transform: none !important;
        min-height: 0 !important;
    }
    .public-dashboard-page .filter-bar-card {
        top: calc(var(--public-header-height, 76px) + var(--mobile-nav-height, 48px) + 5px) !important;
    }
}
@media (max-width: 480px) {
    .public-header-inner {
        grid-template-columns: 1fr 1fr !important;
    }
    .public-brand-wrap { grid-column: 1; grid-row: 1; }
    .public-header-actions { grid-column: 2; grid-row: 1; }
    .public-header-center {
        grid-column: 1 / -1;
        grid-row: 2;
        justify-self: center !important;
    }
    .public-header-center p { font-size: 15px !important; }
}
/* Compact mobile header and filter row */
@media (max-width: 1100px) {
    .public-header-inner {
        grid-template-columns: minmax(64px, 1fr) minmax(0, 3fr) minmax(64px, 1fr) !important;
        gap: 3px !important;
        padding: 7px 5px !important;
        align-items: center !important;
    }
    .public-brand-wrap {
        grid-column: 1 !important;
        grid-row: 1 !important;
        gap: 2px !important;
        min-width: 0 !important;
    }
    .public-header-center {
        grid-column: 2 !important;
        grid-row: 1 !important;
        justify-self: center !important;
        min-width: 0 !important;
    }
    .public-header-center p {
        font-size: clamp(9px, 2.15vw, 18px) !important;
        line-height: 1.2 !important;
        white-space: nowrap !important;
        margin: 0 !important;
    }
    .public-header-actions {
        grid-column: 3 !important;
        grid-row: 1 !important;
        justify-self: end !important;
        gap: 2px !important;
    }
    .public-brand-logo img {
        width: clamp(38px, 5vw, 64px) !important;
    }
    .sidebar-toggle {
        width: 22px !important;
        min-width: 22px !important;
        height: 26px !important;
        padding: 0 !important;
        font-size: 16px !important;
    }
    .theme-toggle {
        padding: 4px 3px !important;
        font-size: 10px !important;
        white-space: nowrap !important;
    }
    #publicSidebar {
        top: var(--public-header-height, 50px) !important;
        width: min(160px, 36vw) !important;
        max-width: 36vw !important;
    }
    #publicSidebar .public-sidebar-inner {
        padding: 9px 6px !important;
    }
    #publicSidebar a, #publicSidebar button {
        font-size: 11px !important;
    }

    .public-dashboard-page .dashboard-sticky-controls {
        position: static !important;
        top: auto !important;
    }
    .filter-bar-card.mobile-fixed-filter-row {
        position: fixed !important;
        top: calc(var(--public-header-height, 50px) + var(--mobile-nav-height, 44px)) !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        box-sizing: border-box !important;
        z-index: 90000 !important;
        margin: 0 !important;
        padding: 6px 8px !important;
        border-radius: 0 !important;
        background: var(--public-bg-sidebar) !important;
        transform: none !important;
    }
    .mobile-fixed-filter-row .filters-grid {
        display: flex !important;
        flex-flow: row nowrap !important;
        align-items: flex-end !important;
        gap: 7px !important;
        overflow-x: auto !important;
        padding: 0 0 3px !important;
        margin: 0 !important;
        scrollbar-width: thin;
    }
    .mobile-fixed-filter-row .filters-grid > :not(input[type="hidden"]) {
        flex: 0 0 auto !important;
        grid-column: auto !important;
        margin: 0 !important;
    }
    .mobile-fixed-filter-row .filter-box {
        width: 105px !important;
        min-width: 105px !important;
    }
    .mobile-fixed-filter-row .filter-box-wide {
        width: 165px !important;
        min-width: 165px !important;
    }
    .mobile-fixed-filter-row label {
        font-size: 10px !important;
        margin-bottom: 3px !important;
        white-space: nowrap !important;
    }
    .mobile-fixed-filter-row select,
    .mobile-fixed-filter-row input:not([type="hidden"]),
    .mobile-fixed-filter-row .ts-control {
        font-size: 11px !important;
        min-height: 32px !important;
        box-sizing: border-box !important;
    }
    .mobile-fixed-filter-row button,
    .mobile-fixed-filter-row a {
        font-size: 11px !important;
        white-space: nowrap !important;
    }
    .mobile-fixed-filter-row .ts-wrapper {
        width: 100% !important;
        min-width: 0 !important;
    }
    .public-dashboard-page {
        scroll-padding-top: calc(
            var(--public-header-height, 50px) +
            var(--mobile-nav-height, 44px) +
            var(--mobile-filter-height, 70px)
        );
    }
}
/* Mobile header and sidebar refinements */
@media (max-width: 1100px) {
    .public-header-inner {
        grid-template-columns: minmax(58px, 1fr) minmax(0, 4fr) minmax(58px, 1fr) !important;
    }
    .public-header-center p {
        font-size: clamp(11px, 2.65vw, 20px) !important;
        font-weight: 700 !important;
    }
    .sidebar-toggle {
        width: 19px !important;
        min-width: 19px !important;
        height: 23px !important;
        font-size: 14px !important;
        padding: 0 !important;
    }

    body > #publicSidebar {
        position: fixed !important;
        top: var(--public-header-height, 50px) !important;
        left: 0 !important;
        right: auto !important;
        bottom: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        transform: none !important;
        border-radius: 0 !important;
        height: auto !important;
        width: min(160px, 36vw) !important;
        max-width: 36vw !important;
        z-index: 110000 !important;
    }
    body > #publicSidebar .public-sidebar-inner {
        margin: 0 !important;
        padding: 8px 5px !important;
        border-radius: 0 !important;
    }

    .mobile-fixed-filter-row .filters-grid > .mobile-filter-actions {
        display: flex !important;
        align-items: center !important;
        gap: 5px !important;
        width: auto !important;
        min-width: 0 !important;
        max-width: none !important;
        padding: 0 !important;
        margin: 0 !important;
        border: 0 !important;
        box-shadow: none !important;
        background: transparent !important;
        height: 32px !important;
    }
    .mobile-filter-actions button,
    .mobile-filter-actions a {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: auto !important;
        min-width: 0 !important;
        height: 30px !important;
        box-sizing: border-box !important;
        padding: 4px 7px !important;
        margin: 0 !important;
        font-size: 11px !important;
        border-radius: 6px !important;
        text-decoration: none !important;
    }
}
/* Mobile logo and toggle adjustment */
@media (max-width: 1100px) {
    .public-header-inner {
        grid-template-columns: minmax(82px, 1fr) minmax(0, 4fr) minmax(82px, 1fr) !important;
    }
    .public-brand-logo img {
        width: clamp(54px, 7vw, 80px) !important;
        max-width: none !important;
        height: auto !important;
    }
    .sidebar-toggle {
        width: 22px !important;
        min-width: 22px !important;
        height: 26px !important;
        font-size: 16px !important;
        padding: 0 !important;
    }
}
/* Full-width Macro mobile controls */
@media (max-width: 1100px) {
    .macro-indicator-chart-card .macro-chart-card-controls {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        width: 100% !important;
        gap: 9px !important;
    }
    .macro-indicator-chart-card .macro-chart-tab-switcher,
    .macro-indicator-chart-card .macro-chart-actions {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        width: 100% !important;
        gap: 6px !important;
        margin: 0 !important;
    }
    .macro-indicator-chart-card .macro-chart-tab-btn,
    .macro-indicator-chart-card .macro-small-download-btn {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 100% !important;
        max-width: none !important;
        box-sizing: border-box !important;
        min-height: 34px !important;
        padding: 7px 10px !important;
        margin: 0 !important;
        font-size: 12px !important;
        line-height: 1.3 !important;
        text-align: center !important;
    }
}
/* Mobile overview pie legends */
@media (max-width: 1100px) {
    .overview-debt-composition-panel .overview-chart-row {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 14px !important;
    }
    .overview-debt-composition-panel .overview-chart-box {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        flex: none !important;
    }
    #debtLegend,
    #fundingLegend {
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;
        gap: 8px !important;
        margin: 0 !important;
    }
    #debtLegend .overview-rank-item,
    #fundingLegend .overview-rank-item {
        display: grid !important;
        grid-template-columns: 12px minmax(0, 1fr) !important;
        grid-template-rows: auto auto !important;
        align-items: start !important;
        column-gap: 8px !important;
        row-gap: 4px !important;
        width: 100% !important;
        min-width: 0 !important;
        height: auto !important;
        min-height: 0 !important;
        box-sizing: border-box !important;
        padding: 10px 12px !important;
    }
    #debtLegend .overview-rank-dot,
    #fundingLegend .overview-rank-dot {
        grid-column: 1 !important;
        grid-row: 1 / 3 !important;
        position: static !important;
        margin-top: 4px !important;
    }
    #debtLegend .overview-rank-name,
    #fundingLegend .overview-rank-name {
        grid-column: 2 !important;
        grid-row: 1 !important;
    }
    #debtLegend .overview-rank-value,
    #fundingLegend .overview-rank-value {
        grid-column: 2 !important;
        grid-row: 2 !important;
    }
    #debtLegend .overview-rank-name,
    #fundingLegend .overview-rank-name,
    #debtLegend .overview-rank-value,
    #fundingLegend .overview-rank-value {
        position: static !important;
        transform: none !important;
        width: auto !important;
        min-width: 0 !important;
        max-width: none !important;
        margin: 0 !important;
        white-space: normal !important;
        overflow-wrap: anywhere !important;
        text-align: left !important;
        font-size: 12px !important;
        line-height: 1.4 !important;
    }
}
/* Prevent mobile sidebar flash */
@media (max-width: 1100px) {
    #publicSidebar:not(.mobile-sidebar-ready) {
        display: none !important;
        visibility: hidden !important;
    }
    .public-header-center p {
        font-size: clamp(12px, 2.9vw, 22px) !important;
        line-height: 1.2 !important;
    }
}

