/*
 * ============================================================================
 * St. Cloud State University - Table Components
 * ============================================================================
 * 
 * Standardized table styling with accessibility features
 * 
 * PURPOSE:
 * Provides consistent, accessible table components including:
 * - Basic tables with striping and borders
 * - Sortable tables with header indicators
 * - Responsive tables for mobile devices
 * - Data tables with hover states
 * - Accessible table captions and headers
 * 
 * MIGRATION PATH:
 * This file follows the same structure as scsu-buttons.css.
 * Copy to scsu-main-styles.css keeping the same class names.
 * All component classes are prefixed with .table-* for easy identification.
 * 
 * ACCESSIBILITY:
 * - Proper table captions for screen readers
 * - Scope attributes on headers
 * - High contrast borders
 * - Keyboard navigation support
 * - Row/column header associations
 * 
 * WCAG 2.1 AA Compliance:
 * - Color contrast ratio ≥ 4.5:1
 * - Table captions for context
 * - Proper semantic markup
 * - Sortable table announcements
 * 
 * ============================================================================
 */

/* ============================================
   BASE TABLE STYLES
   Foundation for all table variants
   ============================================ */

.table-scsu {
    width: 100%;
    margin-bottom: var(--scsu-spacing-4, 1rem);
    color: var(--scsu-text-primary, #212529);
    background-color: var(--scsu-bg-body, #ffffff);
    border-collapse: collapse;
    vertical-align: top;
}

/* Table cells */
.table-scsu th,
.table-scsu td {
    padding: var(--scsu-table-cell-padding-y, 0.5rem) var(--scsu-table-cell-padding-x, 0.75rem);
    vertical-align: top;
    border-bottom: 1px solid var(--scsu-table-border-color, #dee2e6);
}

/* Table headers */
.table-scsu thead th {
    font-weight: var(--scsu-font-weight-semibold, 600);
    text-align: left;
    vertical-align: bottom;
    border-bottom: 2px solid var(--scsu-table-border-color, #dee2e6);
    background-color: var(--scsu-gray-100, #f8f9fa);
    color: var(--scsu-text-primary, #212529);
}

/* Table footer */
.table-scsu tfoot th,
.table-scsu tfoot td {
    font-weight: var(--scsu-font-weight-medium, 500);
    border-top: 2px solid var(--scsu-table-border-color, #dee2e6);
    background-color: var(--scsu-gray-100, #f8f9fa);
}

/* ============================================
   TABLE CAPTIONS
   Accessible table descriptions
   WCAG 2.1 SC 1.3.1 Info and Relationships
   ============================================ */

.table-scsu caption,
.table-caption-scsu {
    padding-top: var(--scsu-spacing-3, 0.75rem);
    padding-bottom: var(--scsu-spacing-3, 0.75rem);
    color: var(--scsu-text-secondary, #6c757d);
    text-align: left;
    caption-side: top;
    font-size: var(--scsu-font-size-base, 1rem);
    font-weight: var(--scsu-font-weight-semibold, 600);
}

/* Hide caption visually but keep for screen readers */
.table-scsu .sr-only-caption {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ============================================
   TABLE VARIANTS
   Different table styles for various uses
   ============================================ */

/* Striped rows for better readability */
.table-scsu-striped tbody tr:nth-of-type(odd) {
    background-color: rgba(0, 0, 0, 0.025);
}

/* Bordered table */
.table-scsu-bordered {
    border: 1px solid var(--scsu-table-border-color, #dee2e6);
}

.table-scsu-bordered th,
.table-scsu-bordered td {
    border: 1px solid var(--scsu-table-border-color, #dee2e6);
}

/* Borderless table */
.table-scsu-borderless th,
.table-scsu-borderless td,
.table-scsu-borderless thead th,
.table-scsu-borderless tbody + tbody {
    border: 0;
}

/* Hover effect for interactive tables */
.table-scsu-hover tbody tr {
    transition: background-color var(--scsu-transition-fast, 0.15s ease-in-out);
}

.table-scsu-hover tbody tr:hover {
    background-color: rgba(0, 0, 0, 0.075);
    cursor: pointer;
}

/* Small/Compact table */
.table-scsu-sm th,
.table-scsu-sm td {
    padding: 0.25rem 0.5rem;
    font-size: var(--scsu-font-size-sm, 0.875rem);
}

/* Large table */
.table-scsu-lg th,
.table-scsu-lg td {
    padding: 1rem 1.25rem;
    font-size: var(--scsu-font-size-base, 1rem);
}

/* ============================================
   SORTABLE TABLES
   Interactive sorting with visual indicators
   ============================================ */

.table-scsu-sortable thead th {
    cursor: pointer;
    user-select: none;
    position: relative;
    padding-right: 2rem;
}

/* Sorting indicator */
.table-scsu-sortable thead th::after {
    content: '\2195'; /* Up/down arrow */
    position: absolute;
    right: 0.75rem;
    top: 50%;
    transform: translateY(-50%);
    opacity: 0.3;
    font-size: 0.875rem;
}

/* Sorted ascending */
.table-scsu-sortable thead th.sorted-asc::after {
    content: '\2191'; /* Up arrow */
    opacity: 1;
    color: var(--scsu-color-primary, #b31b34);
}

/* Sorted descending */
.table-scsu-sortable thead th.sorted-desc::after {
    content: '\2193'; /* Down arrow */
    opacity: 1;
    color: var(--scsu-color-primary, #b31b34);
}

/* Hover state for sortable headers */
.table-scsu-sortable thead th:hover {
    background-color: var(--scsu-gray-200, #e9ecef);
}

/* Focus state for keyboard navigation */
.table-scsu-sortable thead th:focus {
    outline: 3px solid var(--scsu-color-primary, #b31b34);
    outline-offset: -3px;
}

/* ARIA live region for sort announcements (hidden) */
.table-sort-status {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ============================================
   RESPONSIVE TABLES
   Mobile-friendly table layouts
   ============================================ */

.table-scsu-responsive {
    display: block;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.table-scsu-responsive .table-scsu {
    margin-bottom: 0;
}

/* Mobile-optimized stacked layout */
@media (max-width: 768px) {
    .table-scsu-stacked {
        border: 0;
    }
    
    .table-scsu-stacked thead {
        display: none;
    }
    
    .table-scsu-stacked tr {
        display: block;
        margin-bottom: var(--scsu-spacing-4, 1rem);
        border: 1px solid var(--scsu-table-border-color, #dee2e6);
        border-radius: var(--scsu-border-radius, 0.25rem);
    }
    
    .table-scsu-stacked td {
        display: block;
        text-align: right;
        border-bottom: 1px solid var(--scsu-table-border-color, #dee2e6);
        padding-left: 50%;
        position: relative;
    }
    
    .table-scsu-stacked td::before {
        content: attr(data-label);
        position: absolute;
        left: 0.75rem;
        top: 0.5rem;
        font-weight: var(--scsu-font-weight-semibold, 600);
        text-align: left;
        color: var(--scsu-text-primary, #212529);
    }
    
    .table-scsu-stacked td:last-child {
        border-bottom: 0;
    }
}

/* ============================================
   TABLE COLOR VARIANTS
   Contextual row/cell colors
   ============================================ */

/* Primary row */
.table-scsu .row-primary {
    background-color: rgba(179, 27, 52, 0.1);
    border-color: rgba(179, 27, 52, 0.2);
}

/* Success row */
.table-scsu .row-success {
    background-color: rgba(25, 135, 84, 0.1);
    border-color: rgba(25, 135, 84, 0.2);
}

/* Info row */
.table-scsu .row-info {
    background-color: rgba(13, 202, 240, 0.1);
    border-color: rgba(13, 202, 240, 0.2);
}

/* Warning row */
.table-scsu .row-warning {
    background-color: rgba(255, 193, 7, 0.1);
    border-color: rgba(255, 193, 7, 0.2);
}

/* Danger row */
.table-scsu .row-danger {
    background-color: rgba(220, 53, 69, 0.1);
    border-color: rgba(220, 53, 69, 0.2);
}

/* Active row */
.table-scsu .row-active {
    background-color: rgba(179, 27, 52, 0.15);
    font-weight: var(--scsu-font-weight-medium, 500);
}

/* ============================================
   TABLE UTILITIES
   Helper classes for table customization
   ============================================ */

/* Center align table cells */
.table-scsu .text-center,
.table-scsu th.text-center,
.table-scsu td.text-center {
    text-align: center;
}

/* Right align table cells */
.table-scsu .text-right,
.table-scsu th.text-right,
.table-scsu td.text-right {
    text-align: right;
}

/* Nowrap - prevent text wrapping */
.table-scsu .text-nowrap,
.table-scsu th.text-nowrap,
.table-scsu td.text-nowrap {
    white-space: nowrap;
}

/* Fixed width columns */
.table-scsu .col-fixed-sm {
    width: 100px;
}

.table-scsu .col-fixed-md {
    width: 200px;
}

.table-scsu .col-fixed-lg {
    width: 300px;
}

/* ============================================
   DATA TABLES
   Enhanced tables for data display
   ============================================ */

.data-table-scsu {
    font-size: var(--scsu-font-size-sm, 0.875rem);
}

.data-table-scsu thead th {
    font-size: var(--scsu-font-size-sm, 0.875rem);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    background-color: var(--scsu-color-secondary, #2b2b2b);
    color: var(--scsu-text-inverse, #ffffff);
    border-bottom: 2px solid var(--scsu-color-secondary-dark, #000000);
}

.data-table-scsu tbody tr:nth-of-type(even) {
    background-color: rgba(0, 0, 0, 0.02);
}

/* ============================================
   TABLE ACTIONS
   Action buttons within table cells
   ============================================ */

.table-scsu .table-actions {
    white-space: nowrap;
}

.table-scsu .table-actions .btn-scsu-red,
.table-scsu .table-actions .btn-scsu-secondary {
    font-size: var(--scsu-font-size-sm, 0.875rem);
    padding: 0.25rem 0.75rem;
    margin-right: 0.25rem;
}

.table-scsu .table-actions .btn-scsu-red:last-child,
.table-scsu .table-actions .btn-scsu-secondary:last-child {
    margin-right: 0;
}

/* ============================================
   PAGINATION FOR TABLES
   Table footer with pagination controls
   ============================================ */

.table-pagination-scsu {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--scsu-spacing-4, 1rem);
    border-top: 1px solid var(--scsu-table-border-color, #dee2e6);
    background-color: var(--scsu-gray-100, #f8f9fa);
}

.table-pagination-info {
    font-size: var(--scsu-font-size-sm, 0.875rem);
    color: var(--scsu-text-secondary, #6c757d);
}

.table-pagination-controls {
    display: flex;
    gap: var(--scsu-spacing-2, 0.5rem);
}

/* ============================================
   LOADING STATE
   Show loading indicator for async tables
   ============================================ */

.table-scsu-loading {
    position: relative;
}

.table-scsu-loading::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(255, 255, 255, 0.8);
    display: flex;
    align-items: center;
    justify-content: center;
}

.table-loading-spinner {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 10;
}

/* ============================================
   EMPTY STATE
   Message when table has no data
   ============================================ */

.table-scsu tbody .empty-state {
    text-align: center;
    padding: var(--scsu-spacing-8, 3rem) var(--scsu-spacing-4, 1rem);
    color: var(--scsu-text-secondary, #6c757d);
    font-style: italic;
}

.table-scsu tbody .empty-state td {
    border: none;
}

/* ============================================
   RESPONSIVE BREAKPOINTS
   ============================================ */

/* Tablet view */
@media (max-width: 992px) {
    .table-scsu th,
    .table-scsu td {
        padding: 0.5rem;
        font-size: var(--scsu-font-size-sm, 0.875rem);
    }
}

/* Mobile view */
@media (max-width: 768px) {
    .table-scsu-responsive {
        font-size: var(--scsu-font-size-sm, 0.875rem);
    }
    
    .table-pagination-scsu {
        flex-direction: column;
        gap: var(--scsu-spacing-3, 0.75rem);
        text-align: center;
    }
}

/* End of SCSU Table Components */