/* ========================================
   Responsive Tables CSS
   ======================================== */

/* Table Responsive Wrapper */
.table-responsive-wrapper {
    width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch; /* Smooth scrolling on iOS */
    margin-bottom: 20px;
    position: relative;
}

/* Base table styles */
.table-responsive-wrapper table {
    width: 100%;
    margin-bottom: 0;
    border-collapse: collapse;
}

/* Mobile-specific styles */
@media screen and (max-width: 768px) {
    .table-responsive-wrapper {
        /* Add subtle shadow to indicate scrollability */
        box-shadow: inset -10px 0 8px -8px rgba(0, 0, 0, 0.15);
        border-radius: 4px;
        margin-bottom: 30px;
    }
    
    .table-responsive-wrapper::after {
        content: '← Scroll for more →';
        display: block;
        text-align: center;
        font-size: 12px;
        color: #666;
        padding: 8px;
        background: #f5f5f5;
        border-top: 1px solid #ddd;
        font-style: italic;
    }
    
    /* Ensure table doesn't shrink below readable size */
    .table-responsive-wrapper table {
        min-width: 600px; /* Minimum width for readability */
    }
    
    /* Ensure cells have minimum width */
    .table-responsive-wrapper table td,
    .table-responsive-wrapper table th {
        min-width: 100px;
        white-space: nowrap;
        padding: 12px 15px;
    }
    
    /* Allow text wrapping for specific columns if needed */
    .table-responsive-wrapper table td.wrap-text,
    .table-responsive-wrapper table th.wrap-text {
        white-space: normal;
        min-width: 150px;
    }
}

/* Tablet-specific adjustments */
@media screen and (min-width: 769px) and (max-width: 1024px) {
    .table-responsive-wrapper {
        overflow-x: auto;
    }
    
    .table-responsive-wrapper table {
        min-width: 100%;
    }
}

/* Desktop - no scroll needed */
@media screen and (min-width: 1025px) {
    .table-responsive-wrapper {
        overflow-x: visible;
    }
}

/* Scrollbar styling for better UX */
.table-responsive-wrapper::-webkit-scrollbar {
    height: 8px;
}

.table-responsive-wrapper::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 4px;
}

.table-responsive-wrapper::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 4px;
}

.table-responsive-wrapper::-webkit-scrollbar-thumb:hover {
    background: #555;
}

/* Firefox scrollbar */
.table-responsive-wrapper {
    scrollbar-width: thin;
    scrollbar-color: #888 #f1f1f1;
}

/* Specific fixes for existing table classes */
.semister-fee .rts-fee-chart__content .table {
    overflow-y: visible !important;
}

.admission-content-top .application-deadline__content--table {
    overflow-y: visible !important;
}

/* Ensure table wrapper works with existing styles */
.table-responsive-wrapper .table-theme {
    background: var(--rt-primary, #1a365d);
    color: var(--rt-white, #ffffff);
}

.table-responsive-wrapper .table-theme td,
.table-responsive-wrapper .table-theme th {
    color: var(--rt-white, #ffffff);
    font-weight: 600;
}

/* Print styles - remove scroll indicators */
@media print {
    .table-responsive-wrapper {
        overflow: visible !important;
        box-shadow: none !important;
    }
    
    .table-responsive-wrapper::after {
        display: none !important;
    }
    
    .table-responsive-wrapper table {
        min-width: 100% !important;
    }
}

/* Accessibility improvements */
.table-responsive-wrapper:focus {
    outline: 2px solid var(--rt-primary, #1a365d);
    outline-offset: 2px;
}

/* Loading state (optional) */
.table-responsive-wrapper.loading {
    opacity: 0.6;
    pointer-events: none;
}

/* Enhanced mobile experience */
@media screen and (max-width: 480px) {
    .table-responsive-wrapper table {
        min-width: 500px; /* Slightly smaller for very small screens */
        font-size: 14px;
    }
    
    .table-responsive-wrapper table td,
    .table-responsive-wrapper table th {
        padding: 10px 12px;
        min-width: 80px;
    }
}