/* ==========================================================================
   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;
}

.content-table 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. */
.content-table th,
.content-table td {
    text-align: left;
    vertical-align: top;
}


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

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

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

.content-table 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. */
.content-table tbody tr:last-child td {
    border-bottom: 0;
}

.content-table 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.
   -------------------------------------------------------------------------- */