/* ==========================================================================
   TABLES
   ==========================================================================
   Two parts, same split as forms.css and gallery.css:

     PART 1 — LAYOUT   how a table behaves when it does not fit
     PART 2 — BRAND    how it looks

   Change Part 2 per site. Part 1 should rarely need touching.
   ========================================================================== */


/* ==========================================================================
   PART 1 — LAYOUT
   ==========================================================================
   A table is the one content element that cannot reflow. Columns have a
   hard minimum width, so a wide table in a narrow column does not wrap or
   stack — it overflows.

   That matters here because html and #wrapper use `overflow: clip`, which
   has no scrollbar: an overflowing table would be silently CUT OFF and the
   hidden columns unreachable. Making the element itself scrollable keeps
   the content available without letting it break the page.

   Contao renders no wrapper around <table>, so the scroll lives on
   .content-table, the content element's own div.
   ========================================================================== */

.content-table {
    overflow-x: auto;
    /* Room for the scrollbar so it does not sit on top of the last row. */
    padding-bottom: 2px;

    table {
        width: 100%;
        border-collapse: collapse;

        /* Without this the table shrinks to fit and the text becomes unreadable
           instead of scrolling. Cells stay legible and the container scrolls. */
        min-width: var(--table-min, 32rem);
    }

    /* Cells must not collapse to one word per line. */
    th, td {
        text-align: left;
        vertical-align: top;
    }

    /* ==========================================================================
       PART 2 — BRAND
       ==========================================================================
       Colours come from the tokens in website.css.
       ========================================================================== */

    th, td {
        padding: 0.75em 1em;
        border-bottom: 1px solid var(--stroke);
    }

    thead th {
        border-bottom: 2px solid var(--prime);
        font-weight: 700;
        color: var(--prime);
    }

    tfoot td {
        border-top: 2px solid var(--stroke);
        border-bottom: 0;
        font-weight: 600;
    }

    /* Last row needs no rule under it — the container edge reads as the end. */
    tbody tr:last-child td { border-bottom: 0; }

    caption {
        margin-bottom: var(--space-8);
        font-size: 0.875em;
        text-align: left;
        color: var(--grey-dark);
    }
}


/* --------------------------------------------------------------------------
   OPTIONAL — zebra striping
   --------------------------------------------------------------------------
   Add .table-striped to the element. Useful for long numeric tables where
   the eye needs help tracking a row across.
   -------------------------------------------------------------------------- */

.table-striped tbody tr:nth-child(even) {
    background-color: var(--grey-light);
}


/* --------------------------------------------------------------------------
   TUNING
   --------------------------------------------------------------------------
     --table-min   width below which the table scrolls instead of squeezing.
                   32rem suits 3–4 columns; raise it for wider tables so
                   they scroll sooner rather than cramming.

   ACCESSIBILITY NOTE
   A scrollable region should be reachable by keyboard. Browsers are
   inconsistent about focusing scroll containers automatically, so if tables
   are common on a site, add tabindex="0" and an accessible name to the
   scrolling element in the template rather than relying on the browser.
   -------------------------------------------------------------------------- */