/**
 * Geese Project Design System — Tables Component
 * Phase 2a-4: DataTables Compatible Styling
 * 
 * Styles regular tables and DataTables plugin tables
 * Preserves all DataTables JS behavior and features
 */

/* ---------- Base Table Styles ---------- */
.gp-ds table.table,
.gp-ds table.data-table,
.gp-ds table.dataTable {
    width: 100%;
    border-collapse: collapse;
    font-size: 13.5px;
    min-width: 640px;
}

/* ---------- Table Head ---------- */
.gp-ds table.table thead th,
.gp-ds table.data-table thead th,
.gp-ds table.dataTable thead th {
    text-align: left;
    font-family: var(--gp-font-head);
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--gp-fg-faint);
    background: var(--gp-surface-sunk);
    padding: 12px 16px;
    border-bottom: 1px solid var(--gp-border);
}

/* DataTables sorting indicators */
.gp-ds table.dataTable thead th.sorting,
.gp-ds table.dataTable thead th.sorting_asc,
.gp-ds table.dataTable thead th.sorting_desc {
    cursor: pointer;
}

/* ---------- Table Body ---------- */
.gp-ds table.table tbody td,
.gp-ds table.data-table tbody td,
.gp-ds table.dataTable tbody td {
    padding: 13px 16px;
    border-bottom: 1px solid var(--gp-border);
    color: var(--gp-fg);
}

.gp-ds table.table tbody tr:last-child td,
.gp-ds table.data-table tbody tr:last-child td,
.gp-ds table.dataTable tbody tr:last-child td {
    border-bottom: none;
}

.gp-ds table.table tbody tr:hover,
.gp-ds table.data-table tbody tr:hover,
.gp-ds table.dataTable tbody tr:hover {
    background: var(--gp-surface-sunk);
}

/* ---------- Table Striped (Optional) ---------- */
.gp-ds table.table-striped tbody tr:nth-child(odd) {
    background: var(--gp-surface-sunk);
}

/* ---------- Table Bordered ---------- */
.gp-ds table.table-bordered,
.gp-ds table.table-bordered th,
.gp-ds table.table-bordered td {
    border: 1px solid var(--gp-border);
}

/* ---------- Table Action Buttons ---------- */
.gp-ds .table-actions {
    display: flex;
    gap: 6px;
}

.gp-ds .icon-btn {
    width: 30px;
    height: 30px;
    border-radius: 8px;
    border: 1px solid var(--gp-border);
    background: var(--gp-surface);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--gp-fg-muted);
    font-size: 13px;
    transition: border-color var(--gp-dur-fast) var(--gp-ease-out), 
                color var(--gp-dur-fast) var(--gp-ease-out);
}

.gp-ds .icon-btn:hover {
    border-color: var(--gp-border-strong);
    color: var(--gp-fg);
}

/* ---------- DataTables Specific Elements ---------- */
.gp-ds .dataTables_wrapper {
    width: 100%;
}

/*
 * Bootstrap 5 DataTables default `dom` wraps length/filter/table/info
 * in `.row` children. Page-level `display: grid` on `.dataTables_wrapper`
 * must let those rows span the full wrapper — otherwise the table parks
 * in column 2 beside Search (Contact / Blog / Newsletter / Admins).
 */
.gp-ds .dataTables_wrapper > .row,
.gp-ds .dataTables_wrapper > .table-responsive {
    grid-column: 1 / -1;
    width: 100%;
    max-width: 100%;
    min-width: 0;
}

.gp-ds .table-responsive:has(> .dataTables_wrapper) {
    overflow: visible;
}

.gp-ds .dataTables_length,
.gp-ds .dataTables_filter {
    font-size: 13px;
    color: var(--gp-fg);
}

.gp-ds .dataTables_length select,
.gp-ds .dataTables_filter input {
    border: 1px solid var(--gp-border);
    border-radius: 8px;
    padding: 6px 10px;
    background: var(--gp-surface);
    color: var(--gp-fg);
    font-size: 13px;
}

.gp-ds .dataTables_info {
    font-size: 13px;
    color: var(--gp-fg-muted);
}

.gp-ds .dataTables_paginate {
    display: flex;
    gap: 6px;
}

.gp-ds .dataTables_paginate .paginate_button {
    min-width: 34px;
    height: 34px;
    padding: 0 8px;
    border-radius: 8px;
    border: 1px solid var(--gp-border);
    background: var(--gp-surface);
    color: var(--gp-fg-muted);
    font-family: var(--gp-font-mono);
    font-size: 12.5px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all var(--gp-dur-fast) var(--gp-ease-out);
    text-decoration: none;
}

.gp-ds .dataTables_paginate .paginate_button.current {
    background: var(--gp-primary);
    border-color: var(--gp-primary);
    color: #fff;
    font-weight: 700;
}

.gp-ds .dataTables_paginate .paginate_button.disabled {
    opacity: 0.4;
    cursor: default;
}

.gp-ds .dataTables_paginate .paginate_button:hover:not(.disabled):not(.current) {
    background: var(--gp-surface-sunk);
    color: var(--gp-fg);
}

/* ---------- Responsive Tables ---------- */
.gp-ds .table-responsive {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* Dark mode via CSS variables */

/* ---------- Responsive DataTables in the admin layout (Phase 5) ----------
   Baseline (2026-09-22, admin courses + users at 390px): `.dataTables_wrapper` was
   304px wide, but its toolbar, info line, pagination and the table (min-width 640px)
   each kept their own 640-970px width, and `.content-page { overflow: hidden }`
   clipped them — columns and controls beyond the card edge could not be reached.
   The page-level owners (gp-admin-courses.css etc.) place the toolbar in a
   two-column grid, so these rules add `.content-page .content` to outrank them (users ties otherwise
   and loads later). At 768px the collapsed sidebar rail leaves the content ~690px wide,
   still narrower than the 640px table plus card padding, hence 991px, not 767px. */
@media (max-width: 991.98px) {
    .gp-ds[data-layout="detached"] .content-page .content .dataTables_wrapper {
        grid-template-columns: minmax(0, 1fr);
        max-width: 100%;
    }

    .gp-ds[data-layout="detached"] .content-page .content .dataTables_wrapper > * {
        grid-column: 1 / -1;
        grid-row: auto;
        justify-self: stretch;
        min-width: 0;
        max-width: 100%;
    }

    .gp-ds[data-layout="detached"] .content-page .content .dataTables_wrapper .dataTables_paginate {
        flex-wrap: wrap;
    }

    /* keep the export button group its natural width instead of a full-width bar */
    .gp-ds[data-layout="detached"] .content-page .content .dataTables_wrapper .dt-buttons {
        justify-self: start;
        width: fit-content;
    }

    /* The table becomes its own horizontal scroller instead of being clipped. Also covers
       plain `table.table` blocks that sit in no scroller at all (e.g. admin blog list). */
    .gp-ds[data-layout="detached"] .content-page .content .dataTables_wrapper table.dataTable,
    .gp-ds[data-layout="detached"] .content-page .content table.table {
        display: block;
        min-width: 0; /* the base rule's 640px min-width would otherwise beat max-width */
        max-width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* Static tables: Bootstrap's `.table-responsive-sm` only scrolls below 576px, but the
       sidebar rail makes the content narrower than 640px well above that. */
    .gp-ds[data-layout="detached"] .content-page .content [class*="table-responsive-"] {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
}

/* ---------- DataTables Responsive: keep every column, scroll sideways (admin layout) ----------
   DataTables Responsive collapses a narrow table to its first column(s) by setting an inline
   `display: none` on the rest, and expects a "+" on each row to open them. That "+" never rendered
   here (Responsive 2.2.3 needs a `td.dtr-control` class DataTables 1.10.19 does not apply), so
   courses, users and instructors showed only row numbers - even at ~730px. Hiding data behind taps
   is also the wrong default for admin tables. Show every column and let the table scroll sideways
   inside its card, like the other admin tables (scroller rules above). !important is required
   because the plugin's hiding is an inline style. Nothing is hidden any more, so the plugin's
   expandable child rows have nothing to add and are suppressed. The plugin and its init options
   are untouched. */
.gp-ds[data-layout="detached"] table.dataTable.collapsed > thead > tr > th,
.gp-ds[data-layout="detached"] table.dataTable.collapsed > thead > tr > td,
.gp-ds[data-layout="detached"] table.dataTable.collapsed > tbody > tr:not(.child) > th,
.gp-ds[data-layout="detached"] table.dataTable.collapsed > tbody > tr:not(.child) > td,
.gp-ds[data-layout="detached"] table.dataTable.collapsed > tfoot > tr > th,
.gp-ds[data-layout="detached"] table.dataTable.collapsed > tfoot > tr > td {
    display: table-cell !important;
}

.gp-ds[data-layout="detached"] table.dataTable.collapsed > tbody > tr.child {
    display: none !important;
}

.gp-ds[data-layout="detached"] table.dataTable.collapsed > tbody > tr > td:first-child,
.gp-ds[data-layout="detached"] table.dataTable.collapsed > tbody > tr > th:first-child {
    cursor: default;
}

/* Every column of a collapsed table is now shown (above), so the table is as wide as its columns need
   at ANY viewport width - at 1440px the course list is ~1,940px wide (8 no-wrap columns), and the
   plugin was hiding columns on the desktop too. It scrolls inside its card instead of being clipped. */
.gp-ds[data-layout="detached"] .content-page .content .dataTables_wrapper table.dataTable.collapsed {
    display: block;
    min-width: 0;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}