/* ============================================
   Mobile Responsive Styles - IntranetEpic
   ============================================ */

/* Overlay per tancar sidebar en mòbils */
.sidebar-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 1010; /* Per sobre del navbar (z-index ~1005) */
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.sidebar-overlay.show {
    opacity: 1;
    visibility: visible;
}

/* Sidebar per sobre de l'overlay quan està visible */
@media (max-width: 991.98px) {
    .page-sidebar-visible .page-sidebar {
        z-index: 1020;
    }
}

/* Millores navbar mòbil */
@media (max-width: 991.98px) {
    .page-header .navbar {
        padding: 8px 0;
    }
    
    .page-header .btn-icon {
        width: 40px;
        height: 40px;
    }
    
    .page-header .navbar-brand img {
        height: 28px;
    }
}

/* Millores sidebar mòbil */
@media (max-width: 991.98px) {
    .page-sidebar {
        transform: translateX(-100%);
        transition: transform 0.3s ease;
    }
    
    .page-sidebar-visible .page-sidebar {
        transform: translateX(0);
    }
}

/* Millores generals per pantalles petites */
@media (max-width: 576px) {
    .page-inner {
        /* Mantenir padding-top pel header fix, reduir laterals */
        padding-left: 10px;
        padding-right: 10px;
    }
    
    .container-fluid {
        padding-left: 10px;
        padding-right: 10px;
    }
    
    /* Cards més compactes */
    .card {
        margin-bottom: 15px;
    }
    
    .card-body {
        padding: 15px;
    }
    
    .card-header {
        padding: 12px 15px;
    }
}