/* ==========================================================================
   TrackFlo tables: DataTables theming and cell flags.
   Reads tokens from tf-tokens.css only — no hex literals.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Cell flags. These replace the jQuery
     $(row).find('td:eq(0)').css('background', '#D2222D').css('color', 'white')
   calls in the table_versions renderers. An inline style beats every stylesheet,
   so a themeable board REQUIRES these be classes.

   Foreground is set explicitly (not currentColor) because the flag backgrounds
   change per theme and the text has to stay readable on both. Warn uses ink text:
   white on amber never clears contrast in either theme.
   -------------------------------------------------------------------------- */
.tf-cell--ok      { background: var(--tf-ok)      !important; color: var(--bs-secondary-bg) !important; }
.tf-cell--warn    { background: var(--tf-warn)    !important; color: var(--tf-ink)          !important; }
.tf-cell--danger  { background: var(--tf-danger)  !important; color: var(--bs-secondary-bg) !important; }
.tf-cell--neutral { background: var(--tf-neutral) !important; color: var(--bs-secondary-bg) !important; }
/* Brand-ink cell: the customer-view status column, dark on every row by design.
   Not a status flag — deliberately constant across themes. */
.tf-cell--ink     { background: var(--tf-ink)     !important; color: var(--bs-secondary-bg) !important; }

/* --------------------------------------------------------------------------
   DataTables chrome
   -------------------------------------------------------------------------- */
table.dataTable tbody td,
table.dataTable th {
  vertical-align: middle;
  text-align: left;
}

/* --------------------------------------------------------------------------
   Table polish (8.10.26): quiet header band, hairline row separators, hover
   highlight, roomier cells. Tokens only, so it reads correctly in all themes.
   -------------------------------------------------------------------------- */
table.dataTable thead th {
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .02em;
  color: var(--bs-secondary-color);
  background-color: var(--bs-secondary-bg);
  border-bottom: 2px solid var(--bs-border-color);
  white-space: nowrap;
}
table.dataTable tbody td {
  padding: .6rem .75rem;
  border-bottom: 1px solid var(--bs-border-color);
  background-color: var(--bs-secondary-bg);
}
/* Hover highlight; tf-cell--* flags keep their color (they set background with
   !important, which deliberately outranks this). */
table.dataTable tbody tr:hover td {
  background-color: var(--bs-tertiary-bg);
}

/* Long values wrap rather than forcing a horizontal scroll.
   (.dt-container is DataTables 2's wrapper class; .dataTables_wrapper was 1.x.) */
.dt-container .dataTable tbody td {
  white-space: normal;
  word-break: break-word;
}

.datatable-wrap-text {
  word-wrap: break-word !important;
  word-break: break-all !important;
  max-width: 600px !important;
  white-space: normal !important;
  overflow-wrap: break-word !important;
}

/* DataTables 2 renamed the processing overlay: div.dt-processing. */
/* DT2 ships a generic four-dot spinner as the overlay's only child div; the app uses
   the branded truck loader (language.processing / loadingRecords), so the default
   spinner is hidden — the loader's <img>/<p> are not divs and are unaffected. */
div.dt-processing > div { display: none; }
/* Positioning is DataTables 2's own (absolute, centered in the table area) — the old
   bottom:100px override from 1.x pinned the truck near the footer. The panel matches
   the table surface with no border, so ONLY the animation reads (gate feedback
   8.10.26); the loader's "Delivering Results..." caption is hidden for the same
   reason. */
div.dt-processing {
  background: var(--bs-secondary-bg);
  border: 0;
  color: var(--bs-body-color);
  padding: .75rem 1.5rem;
}
div.dt-processing p { display: none; }

/* Skeleton rows for FIRST load (loadingRecords default in the imports partial):
   content-shaped placeholders, widths staggered so it reads as rows, not stripes. */
.tf-skeleton-rows {
  display: flex;
  flex-direction: column;
  gap: .35rem;
  padding: .5rem 0;
}
/* Row-height bars with alternating tint, so the placeholder reads like the striped
   table it becomes. */
.tf-skeleton-rows .tf-skeleton {
  width: 100%;
  height: 3.4rem;
  border-radius: 4px;
}
.tf-skeleton-rows .tf-skeleton:nth-child(2n) { opacity: .55; }
td.dt-empty:has(.tf-skeleton-rows) { padding: 0; }

/* Loading-state arbitration:
   - Skeletons visible (first load) -> suppress the truck overlay entirely.
   - True "No data available" + a refresh in flight -> hide the text, show the truck. */
div.dt-container:has(td.dt-empty .tf-skeleton-rows) div.dt-processing {
  display: none !important;
}
div.dt-container:has(div.dt-processing[style*="block"]) td.dt-empty:not(:has(.tf-skeleton-rows)) {
  visibility: hidden;
}

/* "No data available in table": centered in the table body instead of hugging the
   header row. */
table.dataTable td.dt-empty {
  text-align: center;
  vertical-align: middle;
  padding: 5rem 0;
  color: var(--bs-secondary-color);
}

/* Button row: discrete buttons, not a fused btn-group (gate feedback 8.10.26).
   Buttons-bs5 wraps the toolbar in .btn-group, which welds the buttons together;
   the gap spaces them and the radius restores each button's own corners. */
div.dt-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
}
div.dt-buttons > .btn {
  border-radius: var(--tf-radius-sm) !important;
}

/* DataTables Buttons (refresh/filter/export). Generated at runtime.
   Ink-on-light in light/classic themes (today's look). Buttons 3's Bootstrap-5
   renderer emits .dt-buttons > .btn (no .dt-button class), so both shapes are
   covered. */
.dt-button,
.dt-button:hover, .dt-button:focus, .dt-button:active, .dt-button.active,
.dt-buttons .btn,
.dt-buttons .btn:hover, .dt-buttons .btn:focus, .dt-buttons .btn:active,
.buttons-columnVisibility {
  background-color: var(--tf-ink) !important;
  color: var(--tf-on-ink) !important;
  border: 4px solid transparent;
}

/* In full dark, ink-on-near-black is invisible (gate review round 2, 8.10.26):
   raise the buttons to the card surface with a hairline ring. */
[data-bs-theme="dark"] .dt-button,
[data-bs-theme="dark"] .dt-button:hover,
[data-bs-theme="dark"] .dt-button:focus,
[data-bs-theme="dark"] .dt-button:active,
[data-bs-theme="dark"] .dt-button.active,
[data-bs-theme="dark"] .dt-buttons .btn,
[data-bs-theme="dark"] .dt-buttons .btn:hover,
[data-bs-theme="dark"] .dt-buttons .btn:focus,
[data-bs-theme="dark"] .dt-buttons .btn:active,
[data-bs-theme="dark"] .buttons-columnVisibility {
  background-color: var(--bs-secondary-bg) !important;
  color: var(--bs-body-color) !important;
  box-shadow: 0 0 0 1px var(--bs-border-color);
}

/* Pagination. Generated at runtime by DataTables, so it must be themed even though
   no template references .page-link. */
.page-link {
  background: var(--bs-secondary-bg);
  color: var(--bs-body-color);
  border-color: var(--bs-border-color);
}
.page-link:hover { background: var(--bs-tertiary-bg); }
.active > .page-link {
  background: var(--tf-ink);
  border-color: var(--tf-ink);
  color: var(--tf-on-ink);
}

/* --------------------------------------------------------------------------
   Row-update flash (8.10.26): TrackfloRefresh adds .tf-row-flash after swapping
   a row's data, so the changed row announces itself and then settles.
   -------------------------------------------------------------------------- */
@keyframes tf-row-flash {
  0%   { box-shadow: inset 0 0 0 999px color-mix(in srgb, var(--tf-blue) 18%, transparent); }
  100% { box-shadow: inset 0 0 0 999px transparent; }
}
tr.tf-row-flash > td { animation: tf-row-flash 1.6s ease-out both; }

@media (prefers-reduced-motion: reduce) {
  tr.tf-row-flash > td { animation: none; }
}