/* Additional Mobile Optimizations */

/* Better table responsiveness on mobile */
@media (max-width: 768px) {
    /* Stack table for very small screens */
    .table-responsive {
        border: none;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    
    .table {
        font-size: 13px;
        min-width: 100%;
    }
    
    .table th,
    .table td {
        padding: 8px 6px;
        white-space: nowrap;
    }
    
    /* Better action buttons on mobile */
    .btn-group-sm > .btn {
        padding: 6px 10px;
        font-size: 12px;
    }
    
    /* Card improvements */
    .card {
        margin-bottom: 12px;
        border-radius: 8px;
    }
    
    .card-header {
        padding: 10px 12px;
    }
    
    .card-body {
        padding: 12px;
    }
    
    /* Navigation improvements */
    .navbar {
        padding: 8px 10px;
    }
    
    .navbar-nav .nav-link {
        padding: 10px 12px;
        min-height: 44px;
        display: flex;
        align-items: center;
    }
    
    /* Dashboard stat cards */
    .col-md-3 {
        margin-bottom: 12px;
    }
    
    .dashboard-card {
        min-height: 100px;
    }
    
    .dashboard-card h3 {
        font-size: 1.5rem;
    }
    
    /* Form spacing */
    .mb-3 {
        margin-bottom: 15px !important;
    }
    
    .row.mb-3:last-child {
        margin-bottom: 20px !important;
    }
    
    /* Alert sizing */
    .alert {
        padding: 12px;
        font-size: 14px;
    }
    
    /* Badge sizing */
    .badge {
        font-size: 11px;
        padding: 4px 8px;
    }
    
    /* List group items */
    .list-group-item {
        padding: 12px;
    }
    
    /* Modal improvements */
    .modal-body {
        padding: 15px;
    }
    
    .modal-header {
        padding: 12px 15px;
    }
    
    .modal-footer {
        padding: 12px 15px;
    }
    
    /* Better spacing for buttons in groups */
    .btn-group {
        display: flex;
        flex-wrap: wrap;
        gap: 6px;
    }
    
    .btn-group .btn {
        flex: 1 1 auto;
        min-width: 80px;
    }
    
    /* Pagination improvements */
    .pagination {
        flex-wrap: wrap;
        gap: 4px;
    }
    
    .page-link {
        min-height: 44px;
        min-width: 44px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
    /* Dropdown improvements */
    .dropdown-menu {
        font-size: 14px;
    }
    
    .dropdown-item {
        padding: 10px 15px;
        min-height: 44px;
        display: flex;
        align-items: center;
    }
    
    /* Fix for landscape orientation on phones */
    @media (orientation: landscape) and (max-height: 500px) {
        .navbar {
            padding: 4px 10px;
        }
        
        .navbar-brand {
            font-size: 1rem;
        }
        
        .card {
            margin-bottom: 8px;
        }
    }
}

/* Tablet specific optimizations */
@media (min-width: 768px) and (max-width: 992px) {
    .container-fluid {
        padding-left: 20px;
        padding-right: 20px;
    }
    
    .card {
        margin-bottom: 18px;
    }
    
    h1 {
        font-size: 1.8rem;
    }
}

/* Large mobile/small tablet */
@media (max-width: 576px) {
    .d-flex.justify-content-between {
        flex-direction: column;
        gap: 10px;
    }
    
    .d-flex.justify-content-between > * {
        width: 100%;
    }
    
    /* Full width buttons on very small screens */
    .btn:not(.btn-sm):not(.btn-lg) {
        width: 100%;
        justify-content: center;
    }
    
    /* Stack date inputs */
    .row.mb-3 > [class*="col-"] {
        margin-bottom: 10px;
    }
}

/* Improve touch scrolling */
* {
    -webkit-overflow-scrolling: touch;
}

/* Better focus visibility for accessibility */
button:focus,
a:focus,
input:focus,
select:focus,
textarea:focus {
    outline: 2px solid #0d6efd;
    outline-offset: 2px;
}

/* Reduce motion for users who prefer it */
@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* Dark mode support (if user enables it) */
@media (prefers-color-scheme: dark) {
    /* Optional: Add dark mode styles here if needed */
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    .btn {
        border: 2px solid currentColor;
    }
    
    .card {
        border: 2px solid #dee2e6;
    }
}

/* Print styles */
@media print {
    .navbar,
    .btn,
    .alert,
    .card-footer {
        display: none;
    }
    
    .card {
        box-shadow: none;
        border: 1px solid #000;
    }
    
    body {
        font-size: 12pt;
    }
}