/*
 * Kwalee BI — Data table tile component styles
 *
 * Styles for the table tile toolbar, title, body, pagination,
 * and Dash DataTable overrides for Kwalee theme.
 *
 * Story 2.6: Data Table Component
 */

/* ─── Table tile container ─── */
.table-tile {
  display: flex;
  flex-direction: column;
  border-radius: var(--radius-lg, 12px);
  overflow: hidden;
  /* Override Dash DataTable's hotpink fallback for --accent */
  --accent: var(--color-primary);
  /*
   * KWBI-180: Create a new stacking context so that Dash DataTable's
   * internal z-indices (e.g. z-index: 300 on frozen/virtualized cell
   * headers) are confined within this tile and cannot paint above the
   * sticky dashboard banner (.dashboard-sticky-banner, z-index: 55).
   */
  isolation: isolate;
}

/* DataTable sets --accent: hotpink on its own container — override it */
.table-tile .dash-spreadsheet-container {
  --accent: var(--color-primary) !important;
  --selected-background: var(--accent-muted);
}

/* dark mode background comes from .dashboard-tile in dashboard.css (same neutral-900) */
[data-theme="dark"] .table-tile {
  border: 1px solid var(--color-neutral-800);
  --table-border: var(--border-subtle);
  --table-header-bg: var(--bg-elevated);
  --table-header-text: var(--color-neutral-300);
  --table-row-bg: var(--bg-secondary);
  --table-row-alt-bg: var(--bg-surface);
  --table-row-hover-bg: var(--bg-hover);
  --table-text: var(--color-neutral-200);
}

[data-theme="light"] .table-tile {
  background: var(--bg-elevated);
  border: 1px solid var(--color-neutral-200);
  box-shadow: var(--shadow-sm);
  --table-border: var(--border-color);
  --table-header-bg: var(--color-neutral-50);
  --table-header-text: var(--text-secondary);
  --table-row-bg: var(--bg-elevated);
  --table-row-alt-bg: var(--bg-secondary);
  --table-row-hover-bg: var(--color-neutral-100);
  --table-text: var(--color-neutral-800);
}

/* ─── Toolbar row ─── */
.table-tile__toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--spacing-md, 16px) var(--spacing-lg, 20px)
    var(--spacing-sm, 8px);
  gap: var(--spacing-md, 16px);
}

.table-tile__title {
  font-family: var(--font-heading, "Unbounded", system-ui, sans-serif);
  font-size: 1rem;
  font-weight: 600;
}

[data-theme="dark"] .table-tile__title {
  color: var(--color-neutral-100);
}

[data-theme="light"] .table-tile__title {
  color: var(--color-neutral-800);
}

.table-tile__toolbar-right {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm, 8px);
}

/* ─── Table body ─── */
.table-tile__body {
  flex: 1;
  padding: 0 var(--spacing-md, 16px) var(--spacing-md, 16px);
  overflow-x: auto;
}

/* ─── Empty state ─── */
.table-tile__body--empty {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 200px;
}

.table-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-sm, 8px);
}

.table-empty-state__icon {
  font-size: 2rem;
  opacity: 0.6;
}

.table-empty-state__title {
  font-weight: 600;
  font-size: 0.875rem;
}

[data-theme="dark"] .table-empty-state__title {
  color: var(--color-neutral-300);
}

.table-empty-state__hint {
  font-size: 0.8125rem;
  color: var(--color-neutral-400);
}

/* ─── Dash DataTable cell colours (dark mode) ─── */
/* Overrides DataTable's default td:white and th:#fafafa from its own CSS bundle */

[data-theme="dark"] .table-tile th {
  background-color: var(--table-header-bg) !important;
  color: var(--table-header-text) !important;
  border-color: var(--table-border) !important;
}

[data-theme="dark"] .table-tile td {
  background-color: var(--table-row-bg) !important;
  color: var(--table-text) !important;
  border-color: var(--table-border) !important;
}

[data-theme="dark"] .table-tile tr:nth-child(odd) td {
  background-color: var(--table-row-alt-bg) !important;
}

[data-theme="dark"] .table-tile tr:hover td {
  background-color: var(--table-row-hover-bg) !important;
}

/* ─── Dash DataTable theme overrides (light mode) ─── */

[data-theme="light"]
  .table-tile
  .dash-spreadsheet-container
  .dash-spreadsheet-inner
  th {
  background-color: var(--table-header-bg) !important;
  color: var(--table-header-text) !important;
  border-color: var(--table-border) !important;
}

[data-theme="light"]
  .table-tile
  .dash-spreadsheet-container
  .dash-spreadsheet-inner
  td {
  background-color: var(--table-row-bg) !important;
  color: var(--table-text) !important;
  border-color: var(--table-border) !important;
}

[data-theme="light"]
  .table-tile
  .dash-spreadsheet-container
  .dash-spreadsheet-inner
  tr:nth-child(odd)
  td {
  background-color: var(--table-row-alt-bg) !important;
}

[data-theme="light"]
  .table-tile
  .dash-spreadsheet-container
  .dash-spreadsheet-inner
  tr:hover
  td {
  background-color: var(--table-row-hover-bg) !important;
}

/* ─── Fullscreen button ─── */
.table-fullscreen-btn {
  padding: 4px 8px;
  font-size: 1rem;
  border: none;
  border-radius: var(--radius-sm, 4px);
  cursor: pointer;
  transition: background-color 0.15s;
  line-height: 1;
}

[data-theme="dark"] .table-fullscreen-btn {
  background: transparent;
  color: var(--color-neutral-400);
}

.table-fullscreen-btn:hover {
  background: color-mix(in srgb, var(--accent) 10%, transparent);
  color: var(--color-primary);
}

/* ─── Sort indicator on DataTable header ─── */
.table-tile .dash-header .column-header--sort {
  cursor: pointer;
}

/* Gap between sort arrow and column name — targets the flex wrapper div directly inside th */
.table-tile th.dash-header > div {
  gap: 5px !important;
}

/* Fix Dash DataTable pink/magenta header active state */
.table-tile .dash-header.dash-header--active,
.table-tile .dash-spreadsheet td.active,
.table-tile .dash-spreadsheet td.focused,
.table-tile .dash-spreadsheet td.cell--selected,
.table-tile .dash-spreadsheet th.dash-header--active,
.table-tile .dash-spreadsheet th.column-header--filter-value {
  outline: none !important;
  box-shadow: none !important;
}

/* Override pink/red active sort highlight on header */
[data-theme="dark"] .table-tile .dash-header.dash-header--active {
  background-color: var(--table-header-bg) !important;
  color: var(--color-primary) !important;
}

/* Suppress pink selected-cell glow */
[data-theme="dark"] .table-tile .dash-spreadsheet td.cell--selected {
  background-color: var(--accent-alpha-08) !important;
  border: 1px solid color-mix(in srgb, var(--accent) 25%, transparent) !important;
}

[data-theme="light"] .table-tile .dash-spreadsheet td.cell--selected {
  background-color: var(--accent-alpha-06) !important;
  border: 1px solid color-mix(in srgb, var(--accent) 20%, transparent) !important;
}

/* Sort icon — rest state */
.table-tile .dash-header .sort,
.table-tile .dash-header .column-header--sort,
.table-tile .dash-header [class^="column-header--"] {
  color: var(--color-neutral-400) !important;
}

/* Sort icon — hover: use brand yellow, not Dash default pink */
.table-tile .dash-header:hover .sort,
.table-tile .dash-header:hover .column-header--sort,
.table-tile th:hover [class^="column-header--"]:not(.disabled) {
  color: var(--color-primary) !important;
}

/* Sort icon — active (currently sorted column) */
.table-tile .dash-header.dash-header--active .sort,
.table-tile .dash-header.dash-header--active .column-header--sort,
.table-tile .dash-header.dash-header--active [class^="column-header--"] {
  color: var(--color-primary) !important;
}

/* ─── Pagination row ─── */
.table-tile .previous-next-container {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  padding: 8px 16px;
}

.table-tile .previous-next-container button {
  background: var(--color-neutral-800);
  color: var(--color-neutral-200);
  border: 1px solid var(--color-neutral-700);
  border-radius: var(--radius-sm, 4px);
  padding: 4px 12px;
  font-size: 0.8125rem;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}

.table-tile .previous-next-container button:hover {
  background: color-mix(in srgb, var(--accent) 15%, transparent) !important;
  border-color: var(--color-primary) !important;
  color: var(--color-primary) !important;
}

[data-theme="dark"] .table-tile .previous-next-container button {
  background: var(--color-neutral-800);
  color: var(--color-neutral-200);
  border: 1px solid var(--color-neutral-700);
  border-radius: var(--radius-sm, 4px);
  padding: 4px 12px;
  font-size: 0.8125rem;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}

[data-theme="dark"] .table-tile .previous-next-container button:hover {
  background: color-mix(in srgb, var(--accent) 15%, transparent) !important;
  border-color: var(--color-primary) !important;
  color: var(--color-primary) !important;
}

/* ─── KWBI-180: Dash DataTable frozen/virtualized header z-index override ─── */
/*
 * Dash's own CSS bundle sets z-index: 300 on .cell-0-1 (and similar) inside
 * .dash-freeze-left, .dash-freeze-top, and .dash-virtualized containers.
 * These are capped here to a safe value so they stack correctly within the
 * tile's stacking context (established by `isolation: isolate` above) and
 * never escape to overlap the sticky dashboard banner.
 *
 * Stacking order: navbar (1000) > user-dropdown (1010) > sticky-banner (55)
 *                 > table-tile (isolate) > frozen headers (below).
 */
.table-tile .dash-spreadsheet-container .dash-spreadsheet-inner.dash-freeze-left [class*="cell-"],
.table-tile .dash-spreadsheet-container .dash-spreadsheet-inner.dash-freeze-top [class*="cell-"],
.table-tile .dash-spreadsheet-container .dash-spreadsheet-inner.dash-virtualized [class*="cell-"] {
  z-index: 3 !important;
}