/**
 * Global Table Responsiveness Fix
 * Makes ALL tables horizontally scrollable on mobile devices
 * Applies to every page across the website
 */

/* ============================================
   TABLE CONTAINER - HORIZONTAL SCROLL
   ============================================ */

/* Ensure all table wrappers are scrollable */
.table-responsive {
    width: 100%;
    overflow-x: auto;
    overflow-y: visible;
    -webkit-overflow-scrolling: touch; /* Smooth scrolling on iOS */
    margin-bottom: 1.5rem;
    border-radius: var(--radius-md, 8px);
    /* Add scroll indicator shadow */
    background: 
        linear-gradient(to right, var(--bg-primary, #fff) 30%, rgba(255,255,255,0)),
        linear-gradient(to right, rgba(255,255,255,0), var(--bg-primary, #fff) 70%) 0 100%,
        radial-gradient(farthest-side at 0% 50%, rgba(0,0,0,.2), rgba(0,0,0,0)),
        radial-gradient(farthest-side at 100% 50%, rgba(0,0,0,.2), rgba(0,0,0,0)) 0 100%;
    background-repeat: no-repeat;
    background-color: transparent;
    background-size: 40px 100%, 40px 100%, 14px 100%, 14px 100%;
    background-attachment: local, local, scroll, scroll;
}

/* Auto-wrap tables that aren't already in a responsive container */
table:not(.no-responsive) {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    white-space: nowrap;
}

/* ============================================
   TABLE STYLING - MOBILE OPTIMIZED
   ============================================ */

/* Modern table styles with proper mobile handling */
.data-table,
.modern-table,
table {
    width: 100%;
    min-width: 600px; /* Ensure table has minimum width for scrolling */
    border-collapse: separate;
    border-spacing: 0;
    background: var(--glass-bg, rgba(255, 255, 255, 0.05));
    border-radius: var(--radius-md, 8px);
    overflow: hidden;
}

/* Table headers */
.data-table thead th,
.modern-table thead th,
table thead th {
    padding: 1rem;
    font-weight: 600;
    text-align: left;
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.1), rgba(139, 92, 246, 0.1));
    border-bottom: 2px solid var(--glass-border, rgba(255, 255, 255, 0.1));
    white-space: nowrap; /* Prevent header text wrapping */
    position: sticky;
    top: 0;
    z-index: 10;
}

/* Table cells */
.data-table td,
.modern-table td,
table td {
    padding: 0.875rem 1rem;
    border-bottom: 1px solid var(--glass-border, rgba(255, 255, 255, 0.1));
    white-space: nowrap; /* Prevent cell content wrapping */
}

/* Table rows */
.data-table tbody tr,
.modern-table tbody tr,
table tbody tr {
    transition: all 0.2s ease;
}

.data-table tbody tr:hover,
.modern-table tbody tr:hover,
table tbody tr:hover {
    background: var(--glass-bg, rgba(99, 102, 241, 0.05));
    transform: scale(1.005);
}

/* ============================================
   MOBILE-SPECIFIC IMPROVEMENTS
   ============================================ */

@media (max-width: 768px) {
    /* Increase touch targets on mobile */
    .table-responsive {
        /* Add visual hint for scrollability */
        position: relative;
    }
    
    .table-responsive::after {
        content: '← Scroll to see more →';
        position: absolute;
        bottom: -1.5rem;
        left: 50%;
        transform: translateX(-50%);
        font-size: 0.75rem;
        color: var(--text-secondary, #999);
        opacity: 0.7;
        pointer-events: none;
        white-space: nowrap;
    }
    
    /* Adjust table padding for mobile */
    .data-table td,
    .modern-table td,
    table td,
    .data-table th,
    .modern-table th,
    table th {
        padding: 0.75rem;
        font-size: 0.875rem;
    }
    
    /* Reduce minimum table width on very small screens */
    .data-table,
    .modern-table,
    table {
        min-width: 500px;
    }
}

@media (max-width: 480px) {
    /* Further optimize for small phones */
    .data-table,
    .modern-table,
    table {
        min-width: 450px;
        font-size: 0.8125rem;
    }
    
    .data-table td,
    .modern-table td,
    table td,
    .data-table th,
    .modern-table th,
    table th {
        padding: 0.625rem 0.5rem;
        font-size: 0.8125rem;
    }
}

/* ============================================
   SCROLLBAR STYLING - BETTER UX
   ============================================ */

/* Custom scrollbar for table containers */
.table-responsive::-webkit-scrollbar {
    height: 8px;
}

.table-responsive::-webkit-scrollbar-track {
    background: var(--bg-secondary, rgba(0, 0, 0, 0.1));
    border-radius: 4px;
}

.table-responsive::-webkit-scrollbar-thumb {
    background: var(--primary, #6366f1);
    border-radius: 4px;
    transition: background 0.3s ease;
}

.table-responsive::-webkit-scrollbar-thumb:hover {
    background: var(--primary-dark, #4f46e5);
}

/* For Firefox */
.table-responsive {
    scrollbar-width: thin;
    scrollbar-color: var(--primary, #6366f1) var(--bg-secondary, rgba(0, 0, 0, 0.1));
}

/* ============================================
   ALTERNATIVE: CARD LAYOUT FOR VERY SMALL SCREENS
   ============================================ */

@media (max-width: 375px) {
    /* Option to convert tables to cards on very small screens */
    .table-responsive.table-card-mobile table,
    .table-responsive.table-card-mobile thead,
    .table-responsive.table-card-mobile tbody,
    .table-responsive.table-card-mobile tr,
    .table-responsive.table-card-mobile td {
        display: block;
    }
    
    .table-responsive.table-card-mobile thead {
        display: none; /* Hide headers in card view */
    }
    
    .table-responsive.table-card-mobile tr {
        margin-bottom: 1rem;
        padding: 1rem;
        background: var(--glass-bg, rgba(255, 255, 255, 0.05));
        border-radius: var(--radius-md, 8px);
        border: 1px solid var(--glass-border, rgba(255, 255, 255, 0.1));
    }
    
    .table-responsive.table-card-mobile td {
        padding: 0.5rem 0;
        border: none;
        text-align: left;
        white-space: normal;
    }
    
    .table-responsive.table-card-mobile td::before {
        content: attr(data-label);
        font-weight: 600;
        display: inline-block;
        margin-right: 0.5rem;
        color: var(--primary, #6366f1);
    }
}

/* ============================================
   STATUS BADGES & SPECIAL CELLS
   ============================================ */

/* Ensure badges and status indicators remain visible */
.badge,
.status-badge,
.tag {
    display: inline-block;
    padding: 0.25rem 0.625rem;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 600;
    white-space: nowrap;
}

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

/* Focus styles for keyboard navigation */
.table-responsive:focus-within {
    outline: 2px solid var(--primary, #6366f1);
    outline-offset: 2px;
}

/* Screen reader only text */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}