/* ============================================================================
   MOBILE RESPONSIVE STYLES
   ============================================================================ */

/* Mobile-first responsive design for reports and tables */

/* Table Responsive Wrapper - Always wrap tables */
.table-responsive {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    width: 100%;
    display: block;
}

/* Ensure all tables are wrapped */
table {
    width: 100%;
    min-width: 600px; /* Minimum width for readability */
}

/* Mobile-friendly tables - stack on small screens */
@media (max-width: 768px) {
    /* Container adjustments */
    .container, .container-fluid {
        padding-left: 10px;
        padding-right: 10px;
    }
    
    /* Headings */
    h1 {
        font-size: 1.5rem;
    }
    
    h5 {
        font-size: 1rem;
    }
    /* Make tables scroll horizontally on mobile */
    .table-responsive {
        display: block;
        width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    
    /* Ensure table cells don't wrap awkwardly */
    .table td, .table th {
        white-space: nowrap;
        min-width: 100px;
    }
    
    /* Smaller font size for tables on mobile */
    .table {
        font-size: 0.85rem;
    }
    
    /* Make badges smaller on mobile */
    .badge {
        font-size: 0.7rem;
        padding: 0.25rem 0.5rem;
    }
    
    /* Stack form elements vertically on mobile */
    .form-inline {
        display: flex;
        flex-direction: column;
        align-items: stretch;
    }
    
    .form-inline .form-group {
        margin-bottom: 0.5rem;
        margin-right: 0;
        width: 100%;
    }
    
    .form-inline .btn {
        width: 100%;
        margin-left: 0;
        margin-top: 0.5rem;
    }
    
    /* Stack flex containers vertically */
    .d-flex.justify-content-between {
        flex-direction: column;
        align-items: stretch !important;
    }
    
    .d-flex.justify-content-between > * {
        margin-bottom: 0.5rem;
        width: 100%;
    }
    
    /* Make cards stack properly */
    .row > [class*="col-"] {
        margin-bottom: 1rem;
    }
    
    /* Summary cards - full width on mobile */
    .card.bg-primary,
    .card.bg-success,
    .card.bg-info,
    .card.bg-warning {
        margin-bottom: 1rem;
    }
    
    /* Buttons full width on mobile */
    .btn {
        width: 100%;
        margin-bottom: 0.5rem;
    }
    
    .btn-group {
        width: 100%;
        display: flex;
        flex-direction: column;
    }
    
    .btn-group .btn {
        width: 100%;
        margin-bottom: 0.25rem;
    }
    
    /* Card headers - smaller text */
    .card-header h5 {
        font-size: 1rem;
    }
    
    /* Card body padding */
    .card-body {
        padding: 0.75rem;
    }
    
    /* Form groups stack vertically */
    .row .col-md-2,
    .row .col-md-3,
    .row .col-md-4,
    .row .col-md-6,
    .row .col-md-8,
    .row .col-md-12 {
        flex: 0 0 100%;
        max-width: 100%;
        margin-bottom: 0.75rem;
    }
    
    /* Buttons in forms */
    .d-flex.align-items-end .btn {
        width: 100%;
    }
}

/* Tablet adjustments */
@media (min-width: 769px) and (max-width: 1024px) {
    .table {
        font-size: 0.9rem;
    }
    
    .col-md-6 {
        flex: 0 0 100%;
        max-width: 100%;
    }
}

/* Ensure buttons don't overlap */
@media (max-width: 768px) {
    .btn-danger#bulkVoidBtn {
        position: relative !important;
        width: 100%;
        margin-top: 0.5rem;
        z-index: 1;
    }
    
    /* Fix form layout */
    form.form-inline {
        flex-wrap: wrap;
    }
    
    form.form-inline > * {
        flex: 1 1 100%;
        margin-bottom: 0.5rem;
    }
}

/* Card stacking on mobile */
@media (max-width: 768px) {
    .row .col-md-3,
    .row .col-md-4,
    .row .col-md-6 {
        flex: 0 0 100%;
        max-width: 100%;
    }
}

/* Print-friendly (hide on print) */
@media print {
    .btn,
    .form-inline,
    .card-header {
        display: none !important;
    }
    
    .table {
        font-size: 0.75rem;
    }
}