/* Responsive Design */

/* Large screens (Desktops) */
@media (max-width: 1199.98px) {
    .kpi-value {
        font-size: 1.5rem;
    }
}

/* Medium screens (Laptops/Tablets) */
@media (max-width: 991.98px) {
    .has-sidebar .main-content {
        margin-left: 80px; /* Auto collapse sidebar */
    }
    
    .sidebar {
        width: 80px;
    }
    
    .sidebar .link-text, .sidebar .sidebar-heading {
        display: none;
    }
    
    .sidebar-link i {
        margin-right: 0;
    }
    
    .nav-status-group {
        display: none;
    }
}

/* Small screens (Mobile landscape) */
@media (max-width: 767.98px) {
    .login-wrapper {
        flex-direction: column;
    }
    
    .login-left {
        padding: var(--sp-4);
        min-height: 300px;
    }
    
    .login-right {
        padding: var(--sp-4) 0;
    }
    
    .top-navbar {
        padding: 0 var(--sp-2);
    }
    
    /* Mobile sidebar completely hidden initially */
    .sidebar {
        transform: translateX(-100%);
        width: 260px;
    }
    
    .sidebar.mobile-open {
        transform: translateX(0);
        box-shadow: var(--card-shadow-hover);
    }
    
    .sidebar.mobile-open .link-text, .sidebar.mobile-open .sidebar-heading {
        display: block;
    }
    
    .sidebar.mobile-open .sidebar-link i {
        margin-right: var(--sp-3);
    }
    
    .has-sidebar .main-content {
        margin-left: 0 !important;
    }
    
    .page-content {
        padding: var(--sp-2);
    }
}

/* Extra small screens (Mobile portrait) */
@media (max-width: 575.98px) {
    .user-info {
        display: none;
    }
    
    .navbar-brand-section .app-name {
        display: none; /* Only show logo on very small screens */
    }
}