/**
 * ERPAthos Tables Mobile Responsive Styles
 * 
 * General-purpose responsive table styles for all modules
 * that don't have specific mobile CSS files.
 * 
 * This ensures tables are usable on mobile devices by:
 * - Making tables horizontally scrollable
 * - Optimizing for touch interaction
 * - Providing mobile-friendly alternatives where applicable
 * 
 * Modules covered: HRM, Inventory, Project, WMS, and other modules
 * without dedicated mobile CSS files.
 */

/* ========================================
 * MOBILE TABLE WRAPPER (< 768px)
 * ======================================== */

@media (max-width: 767px) {
    /* Make tables horizontally scrollable on mobile */
    .table-responsive {
        display: block;
        width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch; /* Smooth scrolling on iOS */
    }
    
    /* Make all tables horizontally scrollable on mobile */
    /* Note: Tables inside .table-responsive will inherit from parent container */
    table {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        width: 100%;
    }
    
    /* Reset for tables already wrapped in .table-responsive */
    .table-responsive table {
        display: table;
        overflow-x: visible;
    }
    
    /* Ensure table cells don't wrap too aggressively */
    table th,
    table td {
        white-space: nowrap;
        padding: 0.5rem;
        font-size: 0.875rem;
    }
    
    /* Make table headers sticky when scrolling horizontally */
    table thead th {
        position: sticky;
        top: 0;
        background-color: var(--bs-table-bg, #fff);
        z-index: 10;
        border-bottom: 2px solid var(--bs-border-color, #dee2e6);
    }
    
    /* Adjust table cell height for touch targets (applied to cells, not rows) */
    table tbody td,
    table tbody th {
        min-height: 44px;
        padding: 0.75rem 0.5rem; /* Increased vertical padding for touch targets */
    }
    
    /* Make action buttons in tables touch-friendly */
    table .btn,
    table button,
    table a.btn {
        min-height: 36px;
        min-width: 36px;
        padding: 0.375rem 0.75rem;
        margin: 0.125rem;
        font-size: 0.875rem;
    }
    
    /* Icon buttons in tables */
    table .btn-sm,
    table button.btn-sm {
        min-height: 32px;
        min-width: 32px;
        padding: 0.25rem 0.5rem;
    }
}

/* ========================================
 * TABLET OPTIMIZATION (768px - 1023px)
 * ======================================== */

@media (min-width: 768px) and (max-width: 1023px) {
    /* Tables can show more content on tablet but may still need scroll */
    .table-responsive {
        overflow-x: auto;
    }
    
    table th,
    table td {
        font-size: 0.9375rem; /* 15px */
        padding: 0.625rem;
    }
    
    /* Maintain touch-friendly buttons on tablet */
    table .btn,
    table button {
        min-height: 40px;
        padding: 0.5rem 1rem;
    }
}

/* ========================================
 * CARD-BASED ALTERNATIVE FOR LISTS
 * Mobile-friendly card layout as alternative to tables
 * Use class .mobile-card-view to enable
 * ======================================== */

@media (max-width: 767px) {
    /* Hide table when card view is enabled on mobile */
    .mobile-card-view .table-responsive,
    .mobile-card-view table {
        display: none;
    }
    
    /* Show card container on mobile */
    .mobile-card-container {
        display: block;
        width: 100%;
    }
    
    /* Individual card styling */
    .mobile-card {
        background: var(--bs-body-bg, #fff);
        border: 1px solid var(--bs-border-color, #dee2e6);
        border-radius: 0.5rem;
        padding: 1rem;
        margin-bottom: 1rem;
        box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    }
    
    /* Card header */
    .mobile-card-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 0.75rem;
        padding-bottom: 0.75rem;
        border-bottom: 1px solid var(--bs-border-color, #dee2e6);
    }
    
    .mobile-card-title {
        font-size: 1.125rem;
        font-weight: 600;
        margin: 0;
        flex: 1;
    }
    
    .mobile-card-badges {
        display: flex;
        gap: 0.25rem;
        flex-wrap: wrap;
        justify-content: flex-end;
    }
    
    /* Card body */
    .mobile-card-body {
        display: flex;
        flex-direction: column;
        gap: 0.5rem;
    }
    
    .mobile-card-row {
        display: flex;
        justify-content: space-between;
        padding: 0.25rem 0;
    }
    
    .mobile-card-label {
        font-weight: 500;
        color: var(--bs-secondary, #6c757d);
        font-size: 0.875rem;
    }
    
    .mobile-card-value {
        font-size: 0.9375rem;
        text-align: right;
        color: var(--bs-body-color, #212529);
    }
    
    /* Card actions */
    .mobile-card-actions {
        display: flex;
        flex-direction: column;
        gap: 0.5rem;
        margin-top: 1rem;
        padding-top: 1rem;
        border-top: 1px solid var(--bs-border-color, #dee2e6);
    }
    
    .mobile-card-actions .btn {
        width: 100%;
        min-height: 44px;
        justify-content: center;
    }
    
    /* Quick actions (horizontal row) */
    .mobile-card-quick-actions {
        display: flex;
        gap: 0.5rem;
        margin-top: 0.75rem;
    }
    
    .mobile-card-quick-actions .btn {
        flex: 1;
        min-height: 44px;
    }
}

/* ========================================
 * DESKTOP: HIDE CARD VIEW, SHOW TABLES
 * ======================================== */

@media (min-width: 768px) {
    /* Hide mobile card view on desktop */
    .mobile-card-container {
        display: none;
    }
    
    /* Always show tables on desktop */
    .mobile-card-view .table-responsive {
        display: block;
    }
    
    .mobile-card-view table {
        display: table;
        width: 100%;
    }
}

/* ========================================
 * PAGINATION ON MOBILE
 * ======================================== */

@media (max-width: 767px) {
    /* Stack pagination vertically or make it scrollable */
    .pagination {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 0.25rem;
    }
    
    .pagination .page-item {
        margin: 0.125rem;
    }
    
    .pagination .page-link {
        min-height: 44px;
        min-width: 44px;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0.5rem;
    }
    
    /* Show only essential pagination on mobile */
    .pagination .page-item:not(.active):not(:first-child):not(:last-child):not(.disabled) {
        display: none;
    }
    
    /* Always show first, last, prev, next, and current page */
    .pagination .page-item.active,
    .pagination .page-item:first-child,
    .pagination .page-item:last-child,
    .pagination .page-item.disabled {
        display: block;
    }
}

/* ========================================
 * FILTER AND SEARCH FORMS ON MOBILE
 * ======================================== */

@media (max-width: 767px) {
    /* Stack filter forms vertically */
    .table-filters .row,
    .search-filters .row {
        flex-direction: column;
    }
    
    .table-filters [class*="col-"],
    .search-filters [class*="col-"] {
        flex: 0 0 100%;
        max-width: 100%;
        margin-bottom: 0.75rem;
    }
    
    /* Make search inputs full width */
    .table-filters .form-control,
    .search-filters .form-control {
        width: 100%;
    }
    
    /* Filter buttons full width */
    .table-filters .btn,
    .search-filters .btn {
        width: 100%;
        min-height: 44px;
        margin-bottom: 0.5rem;
    }
}

/* ========================================
 * LOADING STATES
 * ======================================== */

@media (max-width: 767px) {
    /* Center and enlarge loading spinner on mobile */
    .table-loading,
    .loading-spinner {
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 2rem;
        font-size: 1.25rem;
    }
}

/* ========================================
 * EMPTY STATES
 * ======================================== */

@media (max-width: 767px) {
    /* Improve empty state presentation on mobile */
    .table-empty,
    .no-results {
        text-align: center;
        padding: 2rem 1rem;
        color: var(--bs-secondary, #6c757d);
    }
    
    .table-empty i,
    .no-results i {
        font-size: 3rem;
        margin-bottom: 1rem;
        opacity: 0.5;
    }
}

/* ========================================
 * DARK MODE SUPPORT
 * ======================================== */

html.dark-mode .mobile-card {
    background: var(--bs-dark, #212529);
    border-color: var(--bs-gray-700, #495057);
}

html.dark-mode .mobile-card-header,
html.dark-mode .mobile-card-actions {
    border-color: var(--bs-gray-700, #495057);
}

html.dark-mode .mobile-card-label {
    color: var(--bs-gray-400, #adb5bd);
}

html.dark-mode .mobile-card-value {
    color: var(--bs-gray-200, #e9ecef);
}

html.dark-mode table thead th {
    background-color: var(--bs-dark, #212529);
}

/* ========================================
 * ACCESSIBILITY IMPROVEMENTS
 * ======================================== */

@media (max-width: 767px) {
    /* Increase focus outline visibility on mobile */
    table a:focus,
    table button:focus,
    .mobile-card a:focus,
    .mobile-card button:focus {
        outline: 2px solid var(--bs-primary, #0d6efd);
        outline-offset: 2px;
    }
    
    /* Ensure sufficient contrast for focus states */
    table .btn:focus,
    .mobile-card .btn:focus {
        box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
    }
}