/* ============================================================
   Enterprise Table System — the single source of truth for table presentation.
   Applies to EVERY data table (Bootstrap `table.table`) inside the app content
   and modals, so all modules inherit one consistent look with no per-page CSS.
   The explicit `.ent-table` class is an alias for opt-in / future use.
   ============================================================ */

/* ---- Scroll container: rounded, subtle shadow, sticky-header context ---- */
.app-content .table-responsive,
.modal .table-responsive,
.ent-table-wrap {
  border: 1px solid var(--ent-border);
  border-radius: var(--ent-radius);
  box-shadow: var(--ent-shadow-sm);
  background: var(--ent-surface);
  max-height: 70vh;              /* tall tables scroll; short ones unaffected */
  overflow: auto;                /* enables sticky header + horizontal scroll */
}
/* Inside an app-card the card already provides the frame — avoid double border. */
.app-card .card-body.p-0 .table-responsive {
  border: 0;
  box-shadow: none;
  border-radius: 0;
}

/* ---- Base table ---- */
.app-content table.table,
.modal table.table,
.ent-table {
  margin-bottom: 0;
  color: var(--ent-text);
  font-size: 0.85rem;
  border-color: var(--ent-border);
  --bs-table-bg: var(--ent-surface);
}

/* Cells: consistent padding + vertical column separators + horizontal rows */
.app-content table.table > :not(caption) > * > *,
.modal table.table > :not(caption) > * > *,
.ent-table > :not(caption) > * > * {
  padding: 8px 12px;
  vertical-align: middle;
  border-right: 1px solid var(--ent-col-sep);   /* vertical column separators */
  border-bottom: 1px solid var(--ent-border);   /* horizontal row separators */
}
.app-content table.table > :not(caption) > * > *:last-child,
.modal table.table > :not(caption) > * > *:last-child,
.ent-table > :not(caption) > * > *:last-child {
  border-right: 0;
}

/* ---- Header: bold, uppercase, sticky, high-contrast ---- */
.app-content table.table thead th,
.modal table.table thead th,
.ent-table thead th {
  font-size: 0.74rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--ent-header-fg);
  background: var(--ent-header-bg);
  border-bottom: 2px solid var(--ent-border-strong);
  white-space: nowrap;
}
/* Only the first header row sticks (a 2nd row, e.g. column filters, scrolls). */
.app-content table.table thead tr:first-child th,
.modal table.table thead tr:first-child th,
.ent-table thead tr:first-child th {
  position: sticky;
  top: 0;
  z-index: 2;
}

/* ---- Zebra striping + hover ---- */
.app-content table.table tbody tr:nth-of-type(even),
.modal table.table tbody tr:nth-of-type(even),
.ent-table tbody tr:nth-of-type(even) {
  background: var(--ent-zebra);
}
.app-content table.table tbody tr:hover,
.modal table.table tbody tr:hover,
.ent-table tbody tr:hover {
  background: var(--ent-row-hover);
}

/* ---- Column alignment helpers (numbers right, etc.) ---- */
.app-content table.table .text-end,
.ent-table .text-end { text-align: right; }
.app-content table.table .text-center,
.ent-table .text-center { text-align: center; }
.ent-num { text-align: right; font-variant-numeric: tabular-nums; }

/* ---- Sortable header affordance ---- */
.app-content table.table thead th a,
.ent-table thead th a {
  color: inherit; text-decoration: none; cursor: pointer; user-select: none;
  display: inline-flex; align-items: center; gap: 4px;
}
.app-content table.table thead th a:hover,
.ent-table thead th a:hover { color: var(--ent-info-fg); }

/* ---- Sticky first column (opt-in via .ent-sticky-first on the table) ---- */
.ent-sticky-first tbody td:first-child,
.ent-sticky-first thead th:first-child {
  position: sticky; left: 0; z-index: 1; background: var(--ent-surface);
}
.ent-sticky-first thead tr:first-child th:first-child { z-index: 3; }

/* ---- States: loading / empty / error rows ---- */
.ent-state-row td, .empty-state {
  text-align: center; color: var(--ent-text-muted); font-style: italic;
  padding: 18px 10px;
}
.ent-state-row.error td { color: var(--ent-danger-fg); font-style: normal; }
.ent-skeleton-row td { padding: 10px 12px; }
.ent-skeleton-bar {
  display: block; height: 10px; border-radius: 4px;
  background: linear-gradient(90deg, #eef1f6 25%, #e2e7ef 37%, #eef1f6 63%);
  background-size: 400% 100%; animation: ent-shimmer 1.2s ease-in-out infinite;
}
@keyframes ent-shimmer { 0% { background-position: 100% 0; } 100% { background-position: 0 0; } }

/* ---- Responsive: comfortable scrolling on small screens ---- */
@media (max-width: 768px) {
  .app-content .table-responsive, .ent-table-wrap { max-height: 60vh; }
  .app-content table.table, .ent-table { font-size: 0.8rem; }
  .app-content table.table > :not(caption) > * > * { padding: 6px 8px; }
}

/* ---- Reduced motion ---- */
@media (prefers-reduced-motion: reduce) {
  .ent-skeleton-bar { animation: none; }
}