@media (max-width: 991px) {
    .section-padding {
        padding: 60px 0;
    }

    .display-1 {
        font-size: 3.5rem;
    }

    .glass-panel {
        padding: 25px;
        margin-bottom: 20px;
    }


    /* Default Mobile State: Hidden off-screen to the left */
    /*
    .portal-sidebar {
        position: fixed;
        top: 60px; /* Height of your header *
        left: -260px; /* Hide it completely *
        width: 260px;
        height: calc(100vh - 60px);
        z-index: 1045;
        transition: left 0.3s ease-in-out;
        box-shadow: none;
    }

    /* Active State: Slide it in *
    .portal-sidebar.show {
        left: 0 !important; /* Force it to show *
        box-shadow: 5px 0 15px rgba(0,0,0,0.5); /* Add shadow for depth *
    }
    
    /* Optional: Dim the background content when sidebar is open *
    .portal-sidebar.show::before {
        content: '';
        position: fixed;
        top: 0;
        left: 260px;
        width: 100vw;
        height: 100vh;
        background: rgba(0,0,0,0.5);
        z-index: 1040;
    }*/
}

/* Desktop Styles (Reset to normal layout) */
@media (min-width: 992px) {
    .portal-sidebar {
        position: sticky;
        left: 0;
        /* Always visible */
        height: calc(100vh - 60px);
        background: transparent;
        /* Or keep dark background if preferred */
        border-right: 1px solid var(--glass);
    }
}

@media (max-width: 576px) {
    .display-1 {
        font-size: 2.5rem;
    }

    .nav-buttons {
        display: flex;
        flex-direction: column;
        gap: 10px;
    }

    .navbar .btn {
        padding: 8px 18px;
        font-size: 14px;
    }

    .section-padding .glass-panel img {
        height: 80px !important;
    }

    /* New Class to Show the Overlay */
    #mobileSearchOverlay.show {
        display: flex !important;
    }

}



@media (max-width: 768px) {
    .portal-header {
        height: 60px;
    }

    .header-brand img {
        height: 28px;
    }

    .profile-avatar {
        width: 34px;
        height: 34px;
    }

    .profile-trigger {
        padding: 4px !important;
    }
    /* 1. Prevent standard table cells from squishing */
    .table-responsive .table td, 
    .table-responsive .table th {
        white-space: nowrap; 
    }

    /* 2. Target the Company Info column specifically (2nd column) */
    .table-responsive .table td:nth-child(2) {
        min-width: 220px; /* Give the company text room to breathe */
        white-space: normal; /* Allow the company name to wrap to a new line if it's very long */
    }

    /* 3. Slightly reduce text size for mobile optimization */
    .table-responsive .table td .fw-bold.text-white {
        font-size: 0.9rem;
        line-height: 1.3;
        margin-bottom: 2px;
    }

    .table-responsive .table td .small.text-white-50 {
        font-size: 0.75rem;
    }
/* =========================================
   404 ERROR PAGE (MOBILE)
   ========================================= */

    .error-container {
        padding: 40px 20px;
        margin: 0 15px;
    }
    
    .error-code {
        font-size: 5.5rem;
    }
    
    .error-container h2 {
        font-size: 1.5rem;
    }
    
    .error-bg-glow {
        width: 250px;
        height: 250px;
    }
    /* =========================================
   CHAT APPLICATION MOBILE STYLES
   ========================================= */

    .chat-container-box {
        height: calc(100vh - 160px) !important;
        border: none !important; 
    }
    .chat-wrapper {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

}