/* Responsive layout adjustments for mobile devices */

/* Prevent horizontal overflow on all screen sizes */
html, body {
    overflow-x: hidden !important;
    max-width: 100vw !important;
}

.page, .main-content {
    overflow-x: hidden !important;
    max-width: 100% !important;
}

/* Base mobile styles */
@media (max-width: 991px) {
    /* Header and title adjustments */
    .desktop-header, 
    .quick-actions,
    .stats-grid,
    .admin-footer {
        margin-bottom: 1.5rem;
    }
    
    /* Adjust headers for mobile */
    .desktop-header h1 {
        font-size: 1.6rem !important;
    }
    
    .desktop-header p {
        font-size: 0.9rem !important;
    }
    
    /* Adjust card layout */
    .card {
        margin-bottom: 1.5rem;
        border-radius: 15px !important;
    }
    
    /* Stack action buttons */
    .action-buttons {
        flex-direction: column;
        align-items: stretch !important;
    }
    
    .action-buttons .btn {
        margin-bottom: 0.5rem;
        width: 100%;
    }
    
    /* Fix grid layout on mobile */
    .row > [class^="col-"] {
        margin-bottom: 1rem;
    }
    
    /* Make UI elements more touchable */
    .btn, 
    .form-control,
    .form-select,
    .page-link {
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
        transition: transform 0.2s, box-shadow 0.2s;
    }
    
    .btn:active, 
    .form-control:focus,
    .form-select:focus,
    .page-link:active {
        transform: translateY(1px);
        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
    }
    
    /* Improve spacing for better readability */
    p, .mb-3 {
        margin-bottom: 0.75rem !important;
    }
    
    h1, h2, h3, h4, h5, h6 {
        margin-bottom: 1rem !important;
    }
    
    /* Adjust alert messages */
    .alert {
        padding: 1rem !important;
        margin-bottom: 1.5rem !important;
    }
    
    /* Fix notification dropdown on mobile */
    .notification-dropdown {
        width: 100% !important;
        max-width: 320px !important;
    }
    
    /* Adjust stat cards */
    .stat-card {
        padding: 1.25rem !important;
    }
    
    /* Ensure all modals work well on mobile */
    .modal-header {
        padding: 1rem !important;
    }
    
    .modal-body {
        padding: 1.25rem !important;
    }
    
    .modal-footer {
        padding: 1rem !important;
    }
    
    /* Improve dropdown menu usability */
    .dropdown-menu {
        padding: 0.5rem 0 !important;
    }
    
    .dropdown-item {
        padding: 0.75rem 1.5rem !important;
    }
    
    /* Better touch targets in general */
    button, 
    .btn, 
    a.btn, 
    .nav-link,
    .dropdown-item {
        min-height: 44px;
        display: flex;
        align-items: center;
    }
    
    /* Fix pagination on mobile */
    .pagination {
        flex-wrap: wrap;
        justify-content: center;
        gap: 0.25rem;
    }
    
    .page-item {
        margin-bottom: 0.25rem;
    }
    
    .page-link {
        min-width: 40px;
        min-height: 40px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
}

/* Small phone adjustments */
@media (max-width: 576px) {
    /* Prevent horizontal scroll on small phones */
    html, body {
        overflow-x: hidden !important;
        max-width: 100vw !important;
        width: 100% !important;
    }
    
    .page {
        overflow-x: hidden !important;
        max-width: 100vw !important;
    }
    
    .container, .container-fluid {
        padding-left: 15px !important;
        padding-right: 15px !important;
        max-width: 100% !important;
    }
    
    .row {
        margin-left: -15px !important;
        margin-right: -15px !important;
    }
    
    .main-content {
        padding: 15px !important;
    }
    
    .desktop-header,
    .quick-actions {
        padding: 1rem !important;
    }
    
    .modal-header h5 {
        font-size: 1.1rem !important;
    }
    
    /* Fix notification dropdown width */
    .modern-notification-dropdown {
        width: 290px !important;
        left: 0 !important;
        right: auto !important;
        transform: none !important;
    }
    
    /* Smaller padding in general */
    .card-body,
    .card-header,
    .modal-body,
    .modal-header,
    .modal-footer {
        padding: 0.875rem !important;
    }
    
    /* Fix admin footer */
    .admin-footer {
        padding: 1rem !important;
    }
}