/* THE DATA TABLE
   ==============
   One table look for the whole platform: `.data-table`, plus two modifiers.

   WHAT THIS REPLACES (v2.8.0)
   ---------------------------
   Four hand-rolled tables, in four different files, all trying to be the
   same table and none of them agreeing:

     .user-table    templates/admin.html        th 10px / td 12px 10px / 12px
     .audit-table   templates/admin_audit.html  th 12px / td 12px      / 13px
     .waste-table   templates/dashboard.html    th+td 8px 12px         / 12px
     .report-table  templates/reports/monthly   th+td 7px 10px         / 11px

   None of them matched `table.dataTable` in layout/main.css either — which
   is the fifth table style, the one the Records, Order Status, Maintenance
   and Login Activity pages actually render, and the de facto house style at
   12px uppercase muted headers over 14px body rows. That is the shape this
   file adopts, so a hand-built table and a DataTable now look like the same
   component rather than two products bolted together.

   Two of the four also carried real defects that came with being written out
   again rather than shared:

     * `.audit-table tr:hover { background: rgba(255,255,255,0.02) }` — a
       LITERAL white wash. On the light theme that is white on parchment,
       i.e. no hover state at all, on the one page whose whole job is
       scanning rows for the one that matters.
     * `.report-table` was the only one with `font-variant-numeric:
       tabular-nums`, so on the other three a column of figures did not line
       up under itself. Every table in this app is a table of numbers.

   MODIFIERS
     --dense    7px/10px cells. For a printed report or a chart's
                exact-figures block, where the table is a transcription aid
                and not the page.
     --nowrap   cells never wrap. For the wide per-machine tables that live
                inside `.responsive-wrapper` and scroll horizontally — there
                a wrapped cell makes the row heights ragged and buys nothing,
                because the fix for the width is the scroller, not the wrap.
   ================================================================== */

.data-table {
    width: 100%;
    border-collapse: collapse;
    /* Every table in this app is a table of numbers. Tabular figures are
       what makes a column of them scannable — without it "1,240" and
       "986" do not line up under each other and the eye has to read each
       one instead of comparing shapes. */
    font-variant-numeric: tabular-nums;
}

.data-table th,
.data-table td {
    text-align: left;
    padding: 12px 14px;
    border-bottom: 1px solid var(--card-border);
}

/* The header row: quiet, and a LABEL rather than a first row of data. Same
   treatment table.dataTable's headers get, so the two kinds of table on this
   platform read as one. */
.data-table th {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-muted);
    /* 2px, like the DataTables header, so the head separates from the body
       more strongly than one row separates from the next. */
    border-bottom-width: 2px;
    white-space: nowrap;
}

.data-table td {
    font-size: 14px;
    color: var(--text-main);
    vertical-align: top;
}

/* The last row's rule is the panel's own bottom edge repeated 1px higher. */
.data-table tbody tr:last-child td { border-bottom: none; }

/* --brand-wash, not a literal. `rgba(255,255,255,0.02)` was white-on-
   parchment in light mode — an invisible hover on a page built for scanning.
   Inside (hover: hover) because on a touch screen a :hover that sticks after
   a tap looks like a selected row that cannot be deselected. */
@media (hover: hover) and (pointer: fine) {
    .data-table tbody tr:hover { background: var(--brand-wash); }
}

/* A row's identifying cell — the name, the week, the machine. Bold and full
   ink, so the eye can run down the first column and stop. */
.data-table td.name,
.data-table td.data-table__key { font-weight: 700; color: var(--text-main); }

/* ---- --dense ---------------------------------------------------------- */
.data-table--dense { font-size: 12.5px; }
.data-table--dense th,
.data-table--dense td { padding: 7px 10px; }
.data-table--dense th { font-size: 11px; }
.data-table--dense td { font-size: 12.5px; }

/* ---- --nowrap --------------------------------------------------------- */
.data-table--nowrap th,
.data-table--nowrap td { white-space: nowrap; }

/* Vertically centred rather than top-aligned: a row of one-line cells with
   a badge in it looks broken when the badge sits at the cap height of the
   text beside it. Opt-in, because the audit log's JSON blocks are genuinely
   multi-line and want the top. */
.data-table--middle td { vertical-align: middle; }