/* ========================================================================
   Content tables — one set of rules for authored tables, used in two places

   1. What the student reads: tables inside .itemsum (course page item
      summaries) and .inlinetextholder (the full inline-text view).
   2. What the author writes: the TinyMCE content area, which carries the
      body class "content-tables" for every prose editor (general.js sets
      it whenever the editor is not an assessment/question editor).

   Loading the same file in both places is the point — the table an author
   builds in the editor is the table the student sees.

   Authored tables arrive with pasted inline styles: hardcoded background
   colors, "4px double black" borders, fixed pixel widths. The !important
   flags exist to defeat those inline style attributes; without them the
   pasted styling wins. Authored background COLORS are deliberately kept
   and washed to a faint tint (see the overlay rule) rather than killed,
   so an author's colour coding still reads.

   This file is self-contained: it declares its own custom properties so
   it works inside the editor iframe, which does not load the site theme.
   ======================================================================== */

:root {
    --ct-surface:    #ffffff;  /* table body */
    --ct-panel:      #f8fafc;  /* single-row callout fill */
    --ct-frame:      #d5dce5;  /* outer border */
    --ct-row-line:   #dfe4ec;  /* between rows — the strong line */
    --ct-col-line:   #ebeef3;  /* between columns — lighter, so rows read first */
    --ct-head-bg:    #eaeff6;  /* header row fill */
    --ct-head-text:  #16202e;  /* header row text */
    --ct-head-line:  #a9b8cb;  /* 2px rule under the header */
}

/* ----- Frame ----- */
:is(.modern-theme .itemsum, .modern-theme .inlinetextholder, body.content-tables) table {
    width: 100% !important;
    border-collapse: separate !important;
    border-spacing: 0 !important;
    border: 1px solid var(--ct-frame) !important;
    border-radius: 10px;
    overflow: hidden;
    background: var(--ct-surface) !important;
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.05);
    margin: 16px 0;
}

/* A headerless single-row table is a callout panel, not data: soft fill */
:is(.modern-theme .itemsum, .modern-theme .inlinetextholder, body.content-tables)
table:not(:has(thead)):has(> tbody > tr:only-child) {
    background: var(--ct-panel) !important;
}

/* Drop the theme's zebra striping in prose. Deliberately NOT !important so
   authored inline row colors still show (washed by the overlay below). */
:is(.modern-theme .itemsum, .modern-theme .inlinetextholder, body.content-tables) table tbody tr {
    background-color: transparent;
}

/* ----- Cells ----- */
:is(.modern-theme .itemsum, .modern-theme .inlinetextholder, body.content-tables) table :is(td, th) {
    border: none !important;
    border-bottom: 1px solid var(--ct-row-line) !important;
    padding: 14px 18px !important;
    vertical-align: top;
}

/* Column separators: every cell after the first in its row. Written this
   way rather than "td + td" so a mixed th/td row still gets its lines. */
:is(.modern-theme .itemsum, .modern-theme .inlinetextholder, body.content-tables) table tr > *:not(:first-child) {
    border-left: 1px solid var(--ct-col-line) !important;
}

:is(.modern-theme .itemsum, .modern-theme .inlinetextholder, body.content-tables) table tr:last-child > * {
    border-bottom: none !important;
}

/* Trim the leading/trailing margin of block content inside a cell, so a
   cell holding <p> tags is padded the same as one holding bare text. */
:is(.modern-theme .itemsum, .modern-theme .inlinetextholder, body.content-tables) table :is(td, th) > *:first-child {
    margin-top: 0;
}

:is(.modern-theme .itemsum, .modern-theme .inlinetextholder, body.content-tables) table :is(td, th) > *:last-child {
    margin-bottom: 0;
}

/* Authored inline background colors: keep the hue, wash it to a faint tint.
   background-image paints over the element's own background-color, so a
   near-opaque white gradient leaves roughly 18% of the authored color. */
:is(.modern-theme .itemsum, .modern-theme .inlinetextholder, body.content-tables) table :is(tr, td, th)[style*="background" i] {
    background-image: linear-gradient(rgba(255, 255, 255, 0.82), rgba(255, 255, 255, 0.82));
}

:is(.modern-theme .itemsum, .modern-theme .inlinetextholder, body.content-tables) table tbody tr:hover > * {
    background-color: transparent;
}

/* ----- Header row -----
   Three ways a header is recognised, because authors build tables three ways:
     1. a real <thead>,
     2. a first row holding headings,
     3. a first row whose first AND last cell are entirely bold — the shape
        TinyMCE produces when an author bolds the top row by hand. Both ends
        must be bold, so a two-column "term / definition" table, where only
        the left cell is bold, is not mistaken for a header.
   A single-row table is a callout box, so :not(:only-child) excludes it. */
:is(.modern-theme .itemsum, .modern-theme .inlinetextholder, body.content-tables) table > thead > tr > *,
:is(.modern-theme .itemsum, .modern-theme .inlinetextholder, body.content-tables)
table:not(:has(thead)) > tbody > tr:first-child:not(:only-child):has(h1, h2, h3, h4) > *,
:is(.modern-theme .itemsum, .modern-theme .inlinetextholder, body.content-tables)
table:not(:has(thead)) > tbody > tr:first-child:not(:only-child):has(> *:first-child :is(strong, b)):has(> *:last-child :is(strong, b)) > * {
    background-color: var(--ct-head-bg) !important;
    background-image: none !important;
    border-bottom: 2px solid var(--ct-head-line) !important;
    color: var(--ct-head-text);
    font-weight: 700;
    letter-spacing: 0.01em;
    cursor: default;
}

/* ----- Editor only -----
   TinyMCE paints selected cells blue. Our wash overlay would sit on top of
   that, so clear it while a cell is selected. */
body.content-tables table :is(td, th)[data-mce-selected] {
    background-image: none !important;
    background-color: #2276d2 !important;
}