/* STB Responsive Foundation - Header Icons + Sidebar Toggle Fix */

@media (max-width: 991.98px) {
    /* Keep the header compact without hiding useful controls */
    .stb-header-shell {
        position: relative !important;
        top: auto !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }

    .stb-header-inner {
        padding: .5rem .7rem !important;
    }

    .stb-header-row {
        align-items: center !important;
        justify-content: space-between !important;
        flex-wrap: nowrap !important;
        gap: .5rem !important;
    }

    .stb-header-row > * {
        min-width: 0;
    }

    .stb-header-actions {
        width: auto !important;
        max-width: calc(100vw - 82px);
        flex: 0 1 auto !important;
        display: flex !important;
        align-items: center !important;
        justify-content: flex-end !important;
        flex-wrap: nowrap !important;
        gap: .45rem !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        padding-bottom: 0 !important;
        scrollbar-width: none;
        -ms-overflow-style: none;
    }

    .stb-header-actions::-webkit-scrollbar {
        display: none;
    }

    /* Restore controls that were hidden too aggressively */
    .stb-header-actions > *,
    .stb-header-actions details,
    .stb-header-actions .btn,
    .stb-header-actions .tw-dw-btn,
    .stb-header-actions a,
    .stb-header-actions button,
    .stb-header-actions .dropdown,
    .stb-header-actions .notifications-menu,
    .stb-header-actions .user-menu {
        display: inline-flex !important;
        align-items: center !important;
        flex: 0 0 auto !important;
        margin: 0 !important;
    }

    .small-view-button,
    .side-bar-collapse,
    .stb-header-actions summary,
    .stb-header-actions .btn,
    .stb-header-actions .btn-modal,
    .stb-header-actions .dropdown-toggle,
    .stb-header-actions a,
    .stb-header-actions button {
        min-width: 40px !important;
        min-height: 40px !important;
        padding: .5rem !important;
        border-radius: 12px !important;
    }

    /* Make icon controls compact while keeping icons visible */
    .stb-header-actions .btn,
    .stb-header-actions .tw-dw-btn,
    .stb-header-actions .dropdown-toggle,
    .stb-header-actions a,
    .stb-header-actions button,
    .stb-header-actions summary {
        white-space: nowrap;
    }

    .stb-header-actions .btn i,
    .stb-header-actions .btn svg,
    .stb-header-actions .tw-dw-btn i,
    .stb-header-actions .tw-dw-btn svg,
    .stb-header-actions a i,
    .stb-header-actions a svg,
    .stb-header-actions button i,
    .stb-header-actions button svg,
    .stb-header-actions summary i,
    .stb-header-actions summary svg {
        font-size: 1rem !important;
        width: 1rem;
        height: 1rem;
        flex: 0 0 auto;
    }

    /* If an element has both icon and text, keep it compact by trimming only long labels */
    .stb-header-actions .btn span:not(.badge):not(.label):not(.sr-only):not(.tw-sr-only),
    .stb-header-actions .tw-dw-btn span:not(.badge):not(.label):not(.sr-only):not(.tw-sr-only),
    .stb-header-actions a span:not(.badge):not(.label):not(.sr-only):not(.tw-sr-only),
    .stb-header-actions button span:not(.badge):not(.label):not(.sr-only):not(.tw-sr-only),
    .stb-header-actions summary span:not(.badge):not(.label):not(.sr-only):not(.tw-sr-only) {
        max-width: 0;
        overflow: hidden;
        display: inline-block;
    }

    /* Sidebar offcanvas behavior */
    .side-bar,
    .stb-sidebar {
        position: fixed !important;
        top: 0 !important;
        bottom: 0 !important;
        left: 0 !important;
        width: min(88vw, 320px) !important;
        max-width: 320px !important;
        transform: translateX(-104%) !important;
        transition: transform .28s ease, box-shadow .28s ease !important;
        z-index: 1050 !important;
        visibility: hidden;
        opacity: 1;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        box-shadow: 0 24px 54px rgba(15, 23, 42, 0.28) !important;
    }

    [dir="rtl"] .side-bar,
    [dir="rtl"] .stb-sidebar {
        left: auto !important;
        right: 0 !important;
        transform: translateX(104%) !important;
    }

    body.stb-sidebar-open .side-bar,
    body.stb-sidebar-open .stb-sidebar,
    .side-bar.small-view-side-active,
    .stb-sidebar.small-view-side-active {
        transform: translateX(0) !important;
        visibility: visible !important;
    }

    body.stb-sidebar-open {
        overflow: hidden !important;
        touch-action: none;
    }

    .stb-mobile-overlay {
        display: none;
        position: fixed !important;
        inset: 0 !important;
        background: rgba(15, 23, 42, 0.42) !important;
        z-index: 1040 !important;
    }

    body.stb-sidebar-open .stb-mobile-overlay {
        display: block !important;
    }

    .small-view-button {
        position: relative;
        z-index: 1061;
        display: inline-flex !important;
    }

    .content-wrapper,
    .right-side,
    .content,
    .container-fluid {
        padding-top: 0 !important;
    }
}

@media (max-width: 575.98px) {
    .stb-header-inner {
        padding: .45rem .6rem !important;
    }

    .stb-header-actions {
        max-width: calc(100vw - 74px);
        gap: .35rem !important;
    }

    .small-view-button,
    .stb-header-actions summary,
    .stb-header-actions .btn,
    .stb-header-actions .dropdown-toggle,
    .stb-header-actions a,
    .stb-header-actions button {
        min-width: 38px !important;
        min-height: 38px !important;
        padding: .45rem !important;
    }
}