/*
 * Tema v2 (tki) - tabelas (.table, variantes, .table-responsive), DataTables
 * e paginacao.
 * Table do tki: 14px, cabecalho 48px em cinza medio (sem caixa alta pesada),
 * linhas separadas por borda cinza-100, hover bem leve, celula com 16px.
 */

html.tki-layout .table {
  --bs-table-color: var(--tki-fg-2);
  --bs-table-bg: transparent;
  --bs-table-border-color: var(--tki-border);
  --bs-table-striped-color: var(--tki-fg-2);
  --bs-table-striped-bg: var(--tki-surface-2);
  --bs-table-hover-color: var(--tki-fg);
  --bs-table-hover-bg: var(--tki-surface-2);
  --bs-table-active-color: var(--tki-fg);
  --bs-table-active-bg: var(--tki-hover);
  color: var(--tki-fg-2);
  border-color: var(--tki-border);
  font-size: 14px;
  margin-bottom: 0;
}

/* Especificidade baixa (:where) de proposito: regras da propria pagina para
   celulas (.val-pos, .x td...) continuam valendo. */
:where(html.tki-layout) .table > :not(caption) > * > * {
  border-bottom-color: var(--tki-border);
  padding: 14px 16px;
  vertical-align: middle;
}

/* Cabecalho: texto cinza, 12px, sem fundo escuro */
html.tki-layout .table > thead > tr > th,
html.tki-layout .table > thead > tr > td,
html.tki-layout .table thead th {
  background-color: var(--tki-surface-2) !important;
  color: var(--tki-muted) !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  letter-spacing: 0.02em;
  text-transform: none;
  white-space: nowrap;
  height: 44px;
  padding-top: 10px !important;
  padding-bottom: 10px !important;
  border-top: 0 !important;
  border-bottom: 1px solid var(--tki-border) !important;
  border-radius: 0 !important;
}

/* thead.table-light / table-dark / bg-* do template: mesmo cabecalho do tki */
html.tki-layout .table :is(thead.table-light, thead.table-dark, tr.table-light, tr.table-dark) > * ,
html.tki-layout .table :is(thead.table-light, thead.table-dark) th {
  --bs-table-bg: var(--tki-surface-2);
  --bs-table-color: var(--tki-muted);
}

html.tki-layout .table.table-dark,
html.tki-layout .table.table-light {
  --bs-table-bg: transparent;
  --bs-table-color: var(--tki-fg-2);
  --bs-table-border-color: var(--tki-border);
}

html.tki-layout .table > tbody > tr:last-child > * { border-bottom-color: transparent; }
html.tki-layout .table > tbody > tr { transition: background-color 0.12s; }
html.tki-layout .table-hover > tbody > tr:hover > * {
  --bs-table-bg-state: var(--tki-surface-2);
  --bs-table-color-state: var(--tki-fg);
}

html.tki-layout .table-striped > tbody > tr:nth-of-type(odd) > * {
  --bs-table-bg-type: var(--tki-surface-2);
  --bs-table-color-type: var(--tki-fg-2);
}

html.tki-layout .table > tfoot > tr > * {
  background: var(--tki-surface-2);
  color: var(--tki-fg);
  font-weight: 600;
  border-top: 1px solid var(--tki-border);
}

html.tki-layout .table-bordered > :not(caption) > * > * { border-color: var(--tki-border); }

html.tki-layout .table-sm > :not(caption) > * > * { padding: 8px 12px; }

/* Linhas coloridas (table-success etc.): fundo suave com texto legivel */
html.tki-layout .table-success { --bs-table-bg: var(--tki-soft-success-bg); --bs-table-color: var(--tki-soft-success-fg); }
html.tki-layout .table-warning { --bs-table-bg: var(--tki-soft-warning-bg); --bs-table-color: var(--tki-soft-warning-fg); }
html.tki-layout .table-danger  { --bs-table-bg: var(--tki-soft-danger-bg);  --bs-table-color: var(--tki-soft-danger-fg); }
html.tki-layout .table-info    { --bs-table-bg: var(--tki-soft-info-bg);    --bs-table-color: var(--tki-soft-info-fg); }
html.tki-layout .table-primary { --bs-table-bg: var(--tki-soft-primary-bg); --bs-table-color: var(--tki-fg); }
html.tki-layout .table-secondary { --bs-table-bg: var(--tki-soft-neutral-bg); --bs-table-color: var(--tki-fg-2); }

html.tki-layout .table td strong,
html.tki-layout .table td b { color: var(--tki-fg); }

/* Rolagem horizontal da tabela fica dentro dela, nunca na pagina */
html.tki-layout .table-responsive {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  max-width: 100%;
}

html.tki-layout .card > .table-responsive:last-child,
html.tki-layout .card > .card-body > .table-responsive:only-child {
  border-radius: 0 0 calc(var(--tki-radius-card) - 1px) calc(var(--tki-radius-card) - 1px);
}

/* ---------- DataTables (dataTables.bootstrap5 / simple-datatables) ---------- */

html.tki-layout .dataTables_wrapper,
html.tki-layout .datatable-wrapper {
  color: var(--tki-muted);
  font-size: 13px;
}

html.tki-layout .dataTables_wrapper .dataTables_length select,
html.tki-layout .dataTables_wrapper .dataTables_filter input,
html.tki-layout .datatable-wrapper .datatable-selector,
html.tki-layout .datatable-wrapper .datatable-input {
  background-color: var(--tki-input-bg) !important;
  border: 1px solid var(--tki-input-border) !important;
  color: var(--tki-fg) !important;
  border-radius: 10px !important;
  height: 36px;
  padding: 0 10px;
}

html.tki-layout .dataTables_wrapper .dataTables_info,
html.tki-layout .datatable-wrapper .datatable-info { color: var(--tki-muted) !important; }

html.tki-layout .dataTables_wrapper .dataTables_paginate .paginate_button,
html.tki-layout .datatable-wrapper .datatable-pagination a,
html.tki-layout .datatable-wrapper .datatable-pagination button {
  color: var(--tki-fg-2) !important;
  background: transparent !important;
  border: 1px solid transparent !important;
  border-radius: 8px !important;
}

html.tki-layout .dataTables_wrapper .dataTables_paginate .paginate_button.current,
html.tki-layout .datatable-wrapper .datatable-pagination .datatable-active a,
html.tki-layout .datatable-wrapper .datatable-pagination .datatable-active button {
  background: var(--tki-card) !important;
  border-color: var(--tki-border) !important;
  color: var(--tki-fg) !important;
  font-weight: 600;
}

html.tki-layout table.dataTable thead .sorting::before,
html.tki-layout table.dataTable thead .sorting::after { opacity: 0.35; }

/* ---------- Paginacao ---------- */

html.tki-layout .pagination {
  --bs-pagination-color: var(--tki-fg-2);
  --bs-pagination-bg: transparent;
  --bs-pagination-border-color: transparent;
  --bs-pagination-hover-color: var(--tki-fg);
  --bs-pagination-hover-bg: var(--tki-hover);
  --bs-pagination-hover-border-color: transparent;
  --bs-pagination-focus-color: var(--tki-fg);
  --bs-pagination-focus-bg: var(--tki-hover);
  --bs-pagination-focus-box-shadow: var(--tki-ring);
  --bs-pagination-active-color: var(--tki-fg);
  --bs-pagination-active-bg: var(--tki-card);
  --bs-pagination-active-border-color: var(--tki-border);
  --bs-pagination-disabled-color: var(--tki-placeholder);
  --bs-pagination-disabled-bg: transparent;
  --bs-pagination-disabled-border-color: transparent;
  --bs-pagination-border-radius: 8px;
  gap: 4px;
  flex-wrap: wrap;
}

html.tki-layout .pagination .page-link {
  min-width: 36px;
  height: 36px;
  padding: 0 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px !important;
  font-size: 14px;
  font-weight: 500;
  color: var(--bs-pagination-color);
  background-color: var(--bs-pagination-bg);
  border: 1px solid var(--bs-pagination-border-color);
  box-shadow: none;
}

html.tki-layout .pagination .page-link:hover {
  color: var(--bs-pagination-hover-color);
  background-color: var(--bs-pagination-hover-bg);
}

html.tki-layout .pagination .page-item.active .page-link,
html.tki-layout .pagination .page-link.active {
  color: var(--tki-fg) !important;
  background-color: var(--tki-card) !important;
  border-color: var(--tki-border) !important;
  font-weight: 600;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05);
}

html.tki-layout .pagination .page-item.disabled .page-link,
html.tki-layout .pagination .page-link.disabled {
  color: var(--tki-placeholder) !important;
  background: transparent !important;
  opacity: 0.7;
}