/* Shared table look. Every data table uses .app-table. Selectors sit inside
   :where() so a utility class or a page stylesheet can still adjust one table
   (alignment, padding, a highlighted row) without fighting this file. */
/* The table element itself uses the class so it beats Tailwind's preflight. */
.app-table { width: 100%; border-collapse: separate; border-spacing: 0; color: var(--app-text); font-size: 14px; text-align: left; }
:where(.app-table) thead th { padding: 10px 16px; border-bottom: 1px solid var(--app-border); background: transparent; color: var(--table-head, #8A948E); font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; white-space: nowrap; }
:where(.app-table) tbody :is(td, th) { padding: 14px 16px; border-bottom: 1px solid var(--pal-soft); }
:where(.app-table) tbody tr:last-child :is(td, th) { border-bottom: 0; }
:where(.app-table) tbody tr { transition: background-color .15s ease; }
:where(.app-table) tbody tr:hover { background: var(--table-hover, #F7F9F6); }
:where(.app-table) tfoot :is(td, th) { padding: 12px 16px; border-top: 1px solid var(--app-border); font-weight: 700; }
:where(.app-table) :is(td, th).num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
:where(.app-table) td small { color: var(--app-muted); font-size: 12px; }

/* Grafito theme: neutral header and hover over the dark surfaces. */
:root.dark { --table-head: var(--pal-muted); --table-hover: var(--app-surface-raised); }

/* Denser variant for admin and analytic tables with many columns. */
.app-table-compact { font-size: 13px; }
:where(.app-table-compact) thead th { padding: 8px 12px; }
:where(.app-table-compact) tbody :is(td, th) { padding: 10px 12px; }
:where(.app-table-compact) tfoot :is(td, th) { padding: 10px 12px; }

/* Wide tables keep their columns and scroll inside their container. */
.app-table-responsive { min-width: 48rem; }