/* SchoolCMS – Content tables
   Base styling for WYSIWYG content (js/utilities/table.js wraps bare
   tables in Bootstrap's .table-responsive), plus the three colour
   variants applied from the editor's Formats dropdown (inc/wysiwyg.php
   + js/admin/wysiwyg-table-styles.js) – modelled on the Cathedral
   build's Red/Navy/Gold tables. Restyle per site from Figma, renaming
   the variant classes and dropdown titles to the site's colours. */

/* No frame round the table. The editor's Table button writes border="1"
   on every table it makes, and the browser draws that attribute as a 1px
   frame the design does not have – so a client-made table came out boxed
   where a hand-written one did not (found on Burlington, 2026-10-14).
   Bootstrap's reboot already cancels the cells' half of the attribute;
   `border: 0` here cancels the table's, so every table reads the same
   however it was made. The lines a wysiwyg adds to show the columns are
   css/admin/editor-canvas.css. */
table {
    width:           100%;
    margin-bottom:   var(--space-md);
    border:          0;
    border-collapse: collapse;

    th, td {
        padding: var(--space-xs) var(--space-sm);
        text-align: left;
    }

    thead th {
        background: var(--color-black);
        color: var(--color-white);
    }

    tbody {
        tr:nth-child(even) {
            background: var(--color-cream, transparent);
        }
        td, th {
            border-bottom: 1px solid var(--color-grey);
        }
    }
}

/* ── Colour variants (Formats dropdown – Orange/Black/Teal Table) ──
   Header cells carry the accent – the whole visible difference between
   the three variants. TinyMCE's Table button builds every row out of
   <td>, so a table the client made by hand has no <th> at all; where
   there is no header cell anywhere, the first row stands in for one.
   And only the table's own first row, not the opening row of every
   section: a plain `tr:first-child` also matches the first row inside
   <tbody>, so a table split into <thead> + <tbody> would come out with
   two header rows – use the thead when there is one, the first tbody
   otherwise. (Both lessons inherited from the Cathedral build.) */
.table-orange,
.table-black,
.table-teal {
    border-collapse: collapse;
    margin: var(--space-md) 0 var(--space-lg);

    th,
    &:not(:has(th)) > thead:first-of-type > tr:first-child > td,
    &:not(:has(th)):not(:has(thead)) > tbody:first-of-type > tr:first-child > td {
        font: var(--text-20ob);
        color: var(--table-accent-text, var(--color-white));
        background: var(--table-accent, var(--color-black));
        /* same border as the body cells, so the header sits inside the
           table's grid rather than floating as a free bar */
        border: 1px solid var(--color-black);
        padding: 20px 24px;
        text-align: left;
    }

    td {
        font: var(--text-16or);
        color: var(--color-black);
        border: 1px solid var(--color-black);
        padding: 14px 24px;
    }

    /* Rows are as tall as their longest cell; centring leaves the short
       cells floating against wrapped neighbours, so every cell starts
       at the top. */
    th,
    td {
        vertical-align: top;
    }

    /* the base zebra striping has no place under an accent header */
    tbody tr:nth-child(even) {
        background: transparent;
    }
}

.table-orange {
    --table-accent: var(--color-orange);
}

.table-black {
    --table-accent: var(--color-black);
}

.table-teal {
    --table-accent: var(--color-teal);
    /* teal is a light accent – white text would vanish on it */
    --table-accent-text: var(--color-black);
}

/* The bar under a table wider than the page (js/utilities/table.js draws
   it). A phone and a Mac trackpad show the native scrollbar only while
   the table is being scrolled, so nothing said the table went on past the
   edge (Charlie, 2026-10-29, found on The Hall School). This one is in
   view whenever the table overflows: a 4px track in the table's ink at
   15%, the thumb – the visible share of the table – in the ink, 8 under
   the table (half its 16 margin). Drag the thumb or click the track.
   It takes no room: .tableScroll is an empty line after the wrapper and
   draws the track up into the space under the table, which table.js
   measures into --table-scroll-room – so nothing on the page moves when
   it appears, whatever margins the table has. The native bar is hidden
   only where the script has put this one in place, so without JS the
   table still scrolls with it. */
.table-responsive.has-scroll-bar {
    scrollbar-width: none;

    &::-webkit-scrollbar {
        display: none;
    }

    &:focus-visible {
        outline:        2px solid var(--color-black);
        outline-offset: 2px;
    }
}

.tableScroll {
    position:     relative;
    height:       0;
    cursor:       pointer;
    touch-action: none;

    &[hidden] {
        display: none;
    }

    /* the track and the thumb on one line, 8 under the table */
    &::before,
    .tableScrollThumb {
        position:      absolute;
        top:           calc(8px - var(--table-scroll-room, 0px));
        height:        4px;
        border-radius: 2px;
    }

    &::before {
        content:    '';
        left:       0;
        right:      0;
        background: color-mix(in srgb, var(--color-black) 15%, transparent);
    }

    .tableScrollThumb {
        left:       0;
        background: var(--color-black);
        cursor:     grab;

        &.is-dragging {
            cursor: grabbing;
        }
    }
}

/* The floor that makes the wrapper's sideways scroll actually happen:
   width: 100% alone lets a phone screen crush the columns to a word per
   line – the table never outgrows the wrapper, so overflow-x has nothing
   to do. Floors scale with the column count; a 2-column table fits any
   screen unaided. */
.table-responsive > table {
    &:has(tr > :nth-child(3)) {
        min-width: 640px;
    }

    &:has(tr > :nth-child(5)) {
        min-width: 900px;
    }
}