/* Responsive Styles */

/* Small devices (landscape phones) */
@media (max-width: 767.98px) {
    .content-wrapper {
        margin-left: 0;
        padding: 15px;
    }
    
    .sidebar {
        position: static;
        height: auto;
    }
    
    .sidebar-sticky {
        height: auto;
    }
    
    .profile-image {
        width: 80px;
        height: 80px;
    }
    
    .driver-thumbnail {
        height: 120px;
    }
    
    .pagination {
        flex-wrap: wrap;
        justify-content: center;
    }
}

/* Medium devices (tablets) */
@media (min-width: 768px) and (max-width: 991.98px) {
    .content-wrapper {
        margin-left: 180px;
    }
    
    .sidebar {
        width: 180px !important;
    }
    
    .sidebar .nav-link i {
        margin-right: 0.3rem;
    }
}

/* Large devices (desktops) */
@media (min-width: 992px) {
    .content-wrapper {
        margin-left: 230px;
    }
}

/* Navbar adjustments for smaller screens */
@media (max-width: 991.98px) {
    .navbar-brand {
        font-size: 1rem;
    }
}

/* Extra small devices */
@media (max-width: 575.98px) {
    .container {
        padding-left: 10px;
        padding-right: 10px;
    }
    
    h1 {
        font-size: 1.75rem;
    }
    
    h2 {
        font-size: 1.5rem;
    }
    
    .card-header h5 {
        font-size: 1rem;
    }
    
    .btn {
        padding: 0.375rem 0.5rem;
    }
    
    .profile-image-lg {
        width: 120px;
        height: 120px;
    }
    
    /* Stack buttons on mobile */
    .d-flex.justify-content-between {
        flex-direction: column;
    }
    
    .d-flex.justify-content-between .btn {
        margin-bottom: 0.5rem;
    }
    
    /* Fix for tables on small screens */
    .table-responsive {
        font-size: 0.875rem;
    }
}

/* Print styles */
@media print {
    .no-print {
        display: none;
    }
    
    .content-wrapper {
        margin-left: 0;
    }
    
    .card {
        box-shadow: none;
    }
}