/* ============================================================
   Shared list/table presentational primitives.

   Hoisted here from per-template <style> blocks that had copy-pasted
   these verbatim across many dashboards. Reference these classes —
   do NOT re-declare them in a template <style> block.

   Loaded after modals.css in base.html. Colors use the canonical
   tokens (tokens.css), which folds the old per-file muted-gray hexes
   (#6b7280 / #374151 / #9ca3af) onto the single slate ramp.
   ============================================================ */

/* ── Empty state — centered icon + message for "no records" ─────
   Was duplicated in inventory_log, unloads, security_events,
   delivery_monitoring, commercial, load_operation, tickets. */
.empty-state {
  text-align: center;
  padding: 4rem 2rem;
  color: var(--text-faint);
}
.empty-state > i,
.empty-state > .bi {
  font-size: 4rem;
  margin-bottom: var(--sp-4);
  opacity: 0.3;
  display: block;
}

/* ── Two-line timestamp cell — bold date over muted time ────────
   Was duplicated verbatim in inventory_log, unloads, delivery_monitoring,
   security_events, commercial. (The .dash- and lab-scoped variants are
   intentionally separate and stay in their own files.) */
.timestamp-cell { font-size: var(--fs-sm); color: var(--neutral-500); }
.timestamp-date { font-weight: 600; color: var(--neutral-700); }
.timestamp-time { color: var(--neutral-400); font-size: var(--fs-xs); }

/* Empty-state text/action (paired with the empty_state() macro in _macros.html) */
.empty-state-msg    { margin: 0; }
.empty-state-sub    { font-size: var(--fs-xs); color: var(--text-faint); margin: 0.35rem 0 0; }
.empty-state-action { margin-top: var(--sp-3); }

/* Page header (page_header macro): canonical title size from the token scale,
   replacing Bootstrap's responsive ~2rem h2 default so titles match the design
   system (--fs-2xl) and the rest of the app. */
.page-header h2 { font-size: var(--fs-2xl); font-weight: 600; line-height: var(--lh-ui); margin-bottom: 0; }