/*
 * ConnectVion - Mobile Responsive Overrides
 * Breakpoint: max-width 767px
 */

@media (max-width: 767.98px) {

    /* Sidebar Overrides for Mobile */
    .deznav {
        left: -225px !important;
        z-index: 1000 !important;
    }

    /* Full screen menu on mobile when toggled */
    .menu-toggle .deznav {
        left: 0 !important;
    }

    /* Content and Header adjustments */
    .header,
    .footer,
    .content-body {
        margin-left: 0 !important;
        left: 0 !important;
    }

    /* Center Logo and Text in Topbar on Mobile */
    .nav-header {
        width: 100% !important;
        height: 60px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        z-index: 1010 !important;
        /* Move to Front */
        pointer-events: none !important;
        /* Allow clicking through to hamburger/profile */
        background: transparent !important;
        border: none !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }

    .nav-header .brand-logo {
        pointer-events: auto !important;
        width: auto !important;
        display: flex !important;
        align-items: center !important;
    }

    .nav-header .brand-icon {
        height: 30px !important;
        width: 30px !important;
    }

    .nav-header .brand-text {
        font-size: 1.5rem !important;
    }

    /* Fix Topbar alignment */
    .header {
        height: 60px !important;
    }

    .header-content {
        height: 100% !important;
        padding: 0 0.5rem !important;
    }

    .navbar-collapse {
        height: 100% !important;
        padding: 0 !important;
        display: flex !important;
        align-items: center !important;
    }

    .header-left {
        height: 100% !important;
        display: flex !important;
        align-items: center !important;
        flex: 1;
        min-width: 0;
        gap: 2px !important;
        overflow: visible;
    }

    .header-left .gap-2 {
        gap: 5px !important;
    }

    .header-left .me-3 {
        margin-right: 5px !important;
    }

    .refresh-btn {
        margin-left: 2px !important;
    }

    .page-title {
        display: none !important;
    }

    /* Hide profile info text on mobile topbar */
    .header .header-profile-info {
        display: none !important;
    }

    .dropdown-header-custom .header-profile-info {
        display: block !important;
    }

    .dropdown-header-custom {
        padding: 0.5rem !important;
        margin-bottom: 0 !important;
    }

    .header-right {
        height: 100% !important;
        display: flex !important;
        align-items: center !important;
        margin-left: auto !important;
        flex-shrink: 0;
    }

    .header-profile-pill {
        padding: 0 !important;
        gap: 0 !important;
        border-radius: 50% !important;
        width: 50px !important;
        height: 50px !important;
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        border: none !important;
        background: transparent !important;
    }

    .header-profile-img {
        margin: 0 !important;
        width: 50px !important;
        height: 50px !important;
        object-fit: cover !important;
    }

    /* Hide extra footer info on mobile */
    .footer-extra-info {
        display: none !important;
    }

    .footer {
        font-size: 0.7rem !important;
    }

    /* Loader Refinements for Mobile */
    .loader-content {
        gap: 30px !important;
        text-align: center !important;
    }

    .loader-text {
        font-size: 10px !important;
        letter-spacing: 3px !important;
        margin-top: -10px !important;
    }

    /* Padding Adjustments */
    .content-body .container-fluid {
        padding: 0.5rem !important;
    }

    .card-body {
        padding: 0.75rem !important;
    }

    /* Prevent any mini-sidebar logic from affecting mobile */
    .menu-mini .deznav {
        left: -100% !important;
        width: 100% !important;
    }

    .menu-toggle.menu-mini .deznav {
        left: 0 !important;
    }

    .menu-mini .content-body,
    .menu-mini .header,
    .menu-mini .footer {
        margin-left: 0 !important;
    }

    /* Mobile Button Stacking Utility */
    .mobile-stack-buttons {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: wrap !important;
        gap: 10px !important;
        justify-content: center !important;
        align-items: center !important;
    }

    .mobile-my-2 {
        margin-top: 0.5rem !important;
        margin-bottom: 0.5rem !important;
    }

    .mobile-center-header {
        justify-content: center !important;
        text-align: center !important;
    }

    .mob-mt {
        margin-top: 0.75rem !important;
    }

    .modal-body,
    .offcanvas-body {
        padding: 0.75rem !important;
    }
}