/* Global Table Styles - Applied to All Pages */
/* Light theme: White headers with dark text, light rows with dark text */

/*
 * Column widths: Fixed-length columns should not exceed heading length.
 * See docs/field-width-reference.md for field → width mapping (MariaDB-aligned).
 * Use % for fixed-length columns in relation to others; dynamic content without
 * word-wrap can use data-col-type="dynamic-nowrap" to allow column resize.
 */

table {
    width: 100%;
    border-collapse: collapse;
    background: var(--color-surface);
    color: var(--color-text-primary);
    margin: var(--spacing-md) 0;
    font-family: var(--font-family-primary);
    box-sizing: border-box;
}

/* Table Headers - White background with dark text for maximum contrast */
table thead {
    background: var(--color-surface) !important;
    color: var(--color-text-primary) !important;
    border-bottom: 2px solid var(--color-border);
}

table th {
    padding: var(--spacing-sm) var(--spacing-md);
    text-align: left;
    font-weight: var(--font-weight-semibold);
    font-size: var(--font-size-sm);
    color: var(--color-text-primary) !important;
    background: var(--color-surface) !important;
    border-bottom: 2px solid var(--color-border);
    font-family: var(--font-family-primary);
}

/* Table Body - Light background with dark text */
table td {
    padding: var(--spacing-sm) var(--spacing-md);
    border-bottom: 1px solid var(--color-border);
    color: var(--color-text-primary) !important;
    background: var(--color-surface) !important;
    font-size: var(--font-size-sm);
    font-family: var(--font-family-primary);
}

table tbody tr {
    background: var(--color-surface) !important;
}

table tbody tr:hover {
    background: var(--color-surface-hover) !important;
    color: var(--color-text-primary) !important;
}

table tbody tr:last-child td {
    border-bottom: none;
}

/* Override any inline styles that might conflict */
table thead th,
table thead td {
    background: var(--color-surface) !important;
    color: var(--color-text-primary) !important;
}

table tbody th,
table tbody td {
    background: var(--color-surface) !important;
    color: var(--color-text-primary) !important;
}

/* Ensure proper contrast for nested tables */
table table thead {
    background: var(--color-surface) !important;
    color: var(--color-text-primary) !important;
}

table table th {
    background: var(--color-surface) !important;
    color: var(--color-text-primary) !important;
}

/* ============================================================================
   MOBILE RESPONSIVE TABLE STYLES
   ============================================================================ */

/* Table container with horizontal scroll for mobile */
.table-container {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    width: 100%;
    max-width: 100%;
    position: relative;
    margin: var(--spacing-md) 0;
}

/* Scroll indicator for mobile tables */
.table-container::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 20px;
    background: linear-gradient(to right, transparent, var(--color-info-bg));
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.table-container.scrollable::after {
    opacity: 1;
}

/* Mobile: Card-based table layout (opt-in with .table-mobile-cards class) */
@media (max-width: var(--bp-tablet)) {
    /* Default: Horizontal scroll for tables */
    .table-container {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: thin;
        scrollbar-color: var(--color-primary-border-strong) transparent;
        touch-action: pan-x;
    }

    .table-container::-webkit-scrollbar {
        height: 8px;
    }

    .table-container::-webkit-scrollbar-track {
        background: transparent;
    }

    .table-container::-webkit-scrollbar-thumb {
        background: var(--color-primary-border-strong);
        border-radius: 4px;
    }

    .table-container::-webkit-scrollbar-thumb:hover {
        background: var(--color-primary-tint-70);
    }

    /* Ensure tables don't get too narrow */
    .table-container table {
        min-width: var(--bp-smm);
    }

    /* Card-based layout for tables with .table-mobile-cards class */
    .table-mobile-cards {
        display: block;
    }

    .table-mobile-cards table,
    .table-mobile-cards thead,
    .table-mobile-cards tbody,
    .table-mobile-cards tr,
    .table-mobile-cards th,
    .table-mobile-cards td {
        display: block;
    }

    .table-mobile-cards thead {
        display: none;
    }

    .table-mobile-cards tr {
        margin-bottom: var(--spacing-md);
        border: 1px solid var(--color-border);
        border-radius: var(--radius-md);
        padding: var(--spacing-md);
        background: var(--color-surface);
        box-shadow: 0 2px 4px var(--color-overlay-subtle);
    }

    .table-mobile-cards td {
        padding: var(--spacing-sm) 0;
        border: none;
        border-bottom: 1px solid var(--color-border);
        text-align: left;
    }

    .table-mobile-cards td:last-child {
        border-bottom: none;
    }

    .table-mobile-cards td::before {
        content: attr(data-label) ': ';
        font-weight: var(--font-weight-semibold);
        color: var(--color-text-secondary);
        display: inline-block;
        min-width: 100px;
        margin-right: var(--spacing-sm);
    }

    /* Reduce padding on mobile */
    table th,
    table td {
        padding: var(--spacing-xs) var(--spacing-sm);
        font-size: var(--font-size-xs);
    }
}

/* Very small screens (320px - 480px) */
@media (max-width: var(--bp-mobile)) {
    .table-container table {
        min-width: 500px;
    }

    table th,
    table td {
        padding: var(--spacing-sm);
        font-size: var(--font-size-xs);
    }

    .table-mobile-cards tr {
        padding: var(--spacing-sm);
    }

    .table-mobile-cards td {
        padding: var(--spacing-xs) 0;
        font-size: var(--font-size-sm);
    }
}

/* Landscape orientation on mobile */
@media (max-width: var(--bp-tablet)) and (orientation: landscape) {
    .table-container {
        max-height: 60vh;
        overflow-y: auto;
    }
}

/* ============================================================================
   REPORT TABLES — universal compact format, word-wrap, single header, minimal color
   ============================================================================ */

.report-table,
.data-table.report-table,
.table-container .report-table,
.table-container .data-table {
    border-collapse: collapse;
    width: 100%;
    font-size: var(--font-size-sm);
    color: var(--color-text-primary);
}

.report-table thead tr,
.table-container .data-table thead tr {
    background: var(--color-surface-hover) !important;
    border-bottom: 1px solid var(--color-border);
}

.report-table th,
.table-container .data-table th {
    padding: var(--spacing-sm) var(--spacing-md);
    text-align: left;
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
    white-space: normal;
    border: 1px solid var(--color-border);
}

.report-table td,
.table-container .data-table td {
    padding: var(--spacing-sm) var(--spacing-md);
    border: 1px solid var(--color-border);
    white-space: normal;
    word-wrap: break-word;
    overflow-wrap: break-word;
    vertical-align: top;
}

.report-table tbody tr:nth-child(even),
.table-container .data-table tbody tr:nth-child(even) {
    background: var(--color-surface);
}

.report-table tbody tr:hover,
.table-container .data-table tbody tr:hover {
    background: var(--color-surface-hover) !important;
}

/* Compact multi-line rows: no repeated field names in body */
.report-table--compact th,
.report-table--compact td {
    padding: 0.4rem 0.6rem;
    font-size: 0.8125rem;
}

/* Narrow columns in report tables (data-col-key from renderDataTable); width ≤ heading length; see docs/field-width-reference.md */
.report-table th[data-col-key="#"],
.report-table td[data-col-key="#"] { width: 5%; max-width: 4ch; }
.report-table th[data-col-key="Score"],
.report-table td[data-col-key="Score"],
.report-table th[data-col-key="Level"],
.report-table td[data-col-key="Level"],
.report-table th[data-col-key="Value"],
.report-table td[data-col-key="Value"],
.report-table th[data-col-key="Points"],
.report-table td[data-col-key="Points"],
.report-table th[data-col-key="Nx"],
.report-table td[data-col-key="Nx"] { width: 10%; max-width: 8ch; }
.report-table th[data-col-key="Status"],
.report-table td[data-col-key="Status"],
.report-table th[data-col-key="Completion"],
.report-table td[data-col-key="Completion"] { width: 10%; max-width: 10ch; }
.report-table th[data-col-key="Number"],
.report-table td[data-col-key="Number"] { width: 12%; max-width: 12ch; }
.report-table th[data-col-key="Type"],
.report-table td[data-col-key="Type"],
.report-table th[data-col-key="Classification"],
.report-table td[data-col-key="Classification"] { width: 12%; max-width: 14ch; }

/* Table engine: data-col-type from renderTableFromColumns; single place for column behaviour (see docs/field-width-reference.md) */
.report-table [data-col-type="fixed"],
.data-table.report-table [data-col-type="fixed"] { width: 10%; max-width: 10ch; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.report-table [data-col-type="dynamic-nowrap"],
.data-table.report-table [data-col-type="dynamic-nowrap"] { white-space: nowrap; min-width: min-content; }
.report-table [data-col-type="dynamic-wrap"],
.data-table.report-table [data-col-type="dynamic-wrap"] { white-space: normal; word-wrap: break-word; overflow-wrap: break-word; }