/**
 * Accessible Table Block Styles
 * WCAG 2.1 AA compliant with responsive design
 */

/* Table container - enables horizontal scroll on mobile */
.table-container {
    margin: 1.5rem 0;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch; /* Smooth scrolling on iOS */
}

/* Base table styles */
.accessible-table {
    width: 100%;
    border-collapse: collapse;
    border: 2px solid var(--text-primary);
    background-color: var(--bg-elevated);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    font-size: 0.9375rem;
    line-height: 1.5;
}

/* Caption styling */
.table-caption {
    caption-side: top;
    padding: 1rem 0 0.5rem 0;
    font-weight: 600;
    font-size: 1.125rem;
    text-align: center;
    background-color: transparent;
    border: none;
    color: var(--text-primary);
    margin-bottom: 0.5rem;
}

/* Table number - inline with caption */
.table-number {
    font-weight: 700;
    margin-right: 0.25rem;
}

/* Table caption text - inline with number */
.table-caption-text {
    display: inline;
    font-weight: 400;
}

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

/* Header cell styling */
.accessible-table th {
    padding: 0.75rem;
    text-align: left;
    font-weight: 600;
    background-color: var(--table-header-bg);
    color: var(--text-primary);
    border: 1px solid var(--table-border);
}

/* Data cell styling */
.accessible-table td {
    padding: 0.75rem;
    border: 1px solid var(--table-cell-border);
    color: var(--text-primary);
}

/* Row number column styling */
.accessible-table .table-row-number {
    text-align: center;
    font-weight: 600;
    background-color: var(--table-row-number-bg);
    width: 3rem;
}

/* Zebra striping for readability */
.accessible-table tbody tr:nth-child(even) {
    background-color: var(--table-row-even-bg);
}

.accessible-table tbody tr:nth-child(odd) {
    background-color: var(--table-row-odd-bg);
}

/* Hover effect for rows */
.accessible-table tbody tr:hover {
    background-color: var(--table-row-hover-bg);
    outline: 2px solid var(--color-link);
    outline-offset: -2px;
}

/* Focus indicators for keyboard navigation */
.accessible-table th:focus,
.accessible-table td:focus {
    outline: 2px solid var(--color-link);
    outline-offset: -2px;
    background-color: var(--table-focus-bg);
}

/* Empty cell indicator (—) */
.accessible-table td:empty::before {
    content: "—";
    color: var(--text-tertiary);
}

/* Numeric data alignment (right-align cells that look like numbers) */
.accessible-table td[data-type="number"] {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

/* Responsive design */
@media (max-width: 640px) {
    .accessible-table {
        font-size: 0.875rem;
    }

    .accessible-table th,
    .accessible-table td {
        padding: 0.5rem;
    }

    .table-caption {
        font-size: 0.9375rem;
        padding: 0.5rem;
    }

    /* Indicate scroll on mobile */
    .table-container::after {
        content: "← Scroll horizontally to see more →";
        display: block;
        text-align: center;
        font-size: 0.75rem;
        color: var(--text-secondary);
        margin-top: 0.5rem;
        font-style: italic;
    }

    /* Hide scroll hint if table fits on screen */
    .table-container:not(:has(.accessible-table[style*="width"]))::after {
        content: none;
    }
}

/* Print styles */
@media print {
    .table-container {
        overflow: visible;
    }

    .accessible-table {
        border: 2px solid #000;
        page-break-inside: avoid;
    }

    .accessible-table th {
        background-color: #e8e8e8 !important;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    .accessible-table tbody tr:nth-child(even) {
        background-color: #f5f5f5 !important;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    /* Hide scroll hint on print */
    .table-container::after {
        content: none !important;
    }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    .accessible-table {
        border: 3px solid #000;
    }

    .accessible-table th,
    .accessible-table td {
        border: 2px solid #000;
    }

    .accessible-table th {
        background-color: #000;
        color: #fff;
    }

    .accessible-table tbody tr:nth-child(even) {
        background-color: #f0f0f0;
    }

    .accessible-table tbody tr:nth-child(odd) {
        background-color: #fff;
    }
}

/* Dark mode support - both system preference AND manual toggle */
@media (prefers-color-scheme: dark) {
    .accessible-table {
        background-color: var(--bg-primary);
        border-color: var(--border-color);
    }

    .table-caption {
        background-color: transparent;
        color: var(--text-primary);
    }

    .table-number,
    .table-caption-text {
        color: var(--text-primary);
    }

    .accessible-table th {
        background-color: var(--table-header-bg);
        color: var(--text-primary);
        border-color: var(--table-border);
    }

    .accessible-table td {
        color: var(--text-primary);
        border-color: var(--table-cell-border);
    }

    .accessible-table .table-row-number {
        background-color: var(--table-row-number-bg);
    }

    .accessible-table tbody tr:nth-child(even) {
        background-color: var(--table-row-even-bg);
    }

    .accessible-table tbody tr:nth-child(odd) {
        background-color: var(--table-row-odd-bg);
    }

    .accessible-table tbody tr:hover {
        background-color: var(--table-row-hover-bg);
    }
}

/* Manual dark mode toggle support */
[data-theme="dark"] .accessible-table {
    background-color: var(--bg-primary);
    border-color: var(--border-color);
}

[data-theme="dark"] .table-caption {
    background-color: transparent;
    color: var(--text-primary);
}

[data-theme="dark"] .table-number,
[data-theme="dark"] .table-caption-text {
    color: var(--text-primary);
}

[data-theme="dark"] .accessible-table th {
    background-color: var(--table-header-bg);
    color: var(--text-primary);
    border-color: var(--table-border);
}

[data-theme="dark"] .accessible-table td {
    color: var(--text-primary);
    border-color: var(--table-cell-border);
}

[data-theme="dark"] .accessible-table .table-row-number {
    background-color: var(--table-row-number-bg);
}

[data-theme="dark"] .accessible-table tbody tr:nth-child(even) {
    background-color: var(--table-row-even-bg);
}

[data-theme="dark"] .accessible-table tbody tr:nth-child(odd) {
    background-color: var(--table-row-odd-bg);
}

[data-theme="dark"] .accessible-table tbody tr:hover {
    background-color: var(--table-row-hover-bg);
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
    .accessible-table tbody tr {
        transition: none;
    }
}