/*
  Table Stability (InvestIA)

  Objetivo: impedir que linhas "engordem" conforme o conteúdo (descrições longas, origem, etc).
  Estratégia simples:
  - aplicar table-layout: fixed em tabelas de cards e DataTables
  - truncar texto (ellipsis) por padrão em cells
  - manter opção de opt-out por tabela (.table-no-stable) ou por célula (.allow-wrap)
*/

:root {
  --table-stable-row-min-height: 44px;
  --datatable-stable-controls-min-height: 44px;
  --datatable-stable-controls-line-height: 1.25;
  --datatable-sticky-footer-shadow: 0 -8px 12px rgba(0, 0, 0, 0.06); /* legado: não usar mais */
  --datatable-footer-divider: rgba(0, 0, 0, 0.06);
}

/* DataTables: estabilizar layout e altura das linhas */
.dataTables_wrapper table.dataTable {
  table-layout: fixed;
  width: 100%;
}

.dataTables_wrapper table.dataTable th,
.dataTables_wrapper table.dataTable td {
  vertical-align: middle;
}

.dataTables_wrapper table.dataTable tbody tr {
  min-height: var(--table-stable-row-min-height);
}

.dataTables_wrapper table.dataTable tbody td {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Ações geralmente ficam na última coluna; não cortar botões/dropdowns */
.dataTables_wrapper table.dataTable td:last-child {
  overflow: visible;
}

/* Cards: por padrão, estabilizar qualquer tabela dentro de card (exceto opt-out) */
.card .table:not(.table-no-stable) {
  table-layout: fixed;
  width: 100%;
}

.card .table:not(.table-no-stable) th,
.card .table:not(.table-no-stable) td {
  vertical-align: middle;
}

.card .table:not(.table-no-stable) tbody tr {
  min-height: var(--table-stable-row-min-height);
}

.card .table:not(.table-no-stable) tbody td {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.card .table:not(.table-no-stable) td:last-child {
  overflow: visible;
}

/* Melhor suporte a ellipsis quando há flex dentro da célula */
.dataTables_wrapper table.dataTable td .d-flex,
.card .table:not(.table-no-stable) td .d-flex {
  min-width: 0;
}

.dataTables_wrapper table.dataTable td .d-flex > *,
.card .table:not(.table-no-stable) td .d-flex > * {
  min-width: 0;
}

.dataTables_wrapper table.dataTable td .fw-semibold,
.card .table:not(.table-no-stable) td .fw-semibold {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Opt-out por tabela */
.table.table-no-stable {
  table-layout: auto;
}

.table.table-no-stable td,
.table.table-no-stable th {
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
}

/* Opt-out por célula */
td.allow-wrap,
th.allow-wrap {
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;
}

/*
  Estabilidade de cards com DataTables

  Problema: ao paginar, o rodapé do DataTables (info/paginação) pode "quebrar"
  em 2 linhas (ou mudar o layout por floats), fazendo o card "subir/descer".
  Solução: garantir altura mínima, alinhamento vertical e impedir wrap.
*/
.card .dataTables_wrapper .dataTables_info,
.card .dataTables_wrapper .dataTables_paginate {
  min-height: var(--datatable-stable-controls-min-height);
  line-height: var(--datatable-stable-controls-line-height);
  display: flex !important;
  align-items: center;
  float: none !important; /* sobrescreve floats por página (ex.: transactions.html) */
}

.card .dataTables_wrapper .dataTables_info {
  white-space: nowrap;
}

.card .dataTables_wrapper .dataTables_paginate {
  justify-content: flex-end;
  flex-wrap: nowrap;
  white-space: nowrap;
  overflow-x: hidden; /* sem scroll lateral */
}

.card .dataTables_wrapper .dataTables_paginate .pagination {
  flex-wrap: nowrap;
  margin-bottom: 0;
}

.app-card .dataTables_wrapper .dataTables_info,
.app-card .dataTables_wrapper .dataTables_paginate {
  min-height: var(--datatable-stable-controls-min-height);
  line-height: var(--datatable-stable-controls-line-height);
  display: flex !important;
  align-items: center;
  float: none !important;
}

.app-card .dataTables_wrapper .dataTables_info {
  white-space: nowrap;
}

.app-card .dataTables_wrapper .dataTables_paginate {
  justify-content: flex-end;
  flex-wrap: nowrap;
  white-space: nowrap;
  overflow-x: hidden; /* sem scroll lateral */
}

.app-card .dataTables_wrapper .dataTables_paginate .pagination {
  flex-wrap: nowrap;
  margin-bottom: 0;
}

/* Quando info/paginação são movidos para o footer do app-card (Transações) */
.app-card .app-card__footer .dataTables_info,
.app-card .app-card__footer .dataTables_paginate {
  min-height: var(--datatable-stable-controls-min-height);
  line-height: var(--datatable-stable-controls-line-height);
  display: flex !important;
  align-items: center;
  float: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

.app-card .app-card__footer .dataTables_paginate {
  justify-content: flex-end;
  white-space: nowrap;
  overflow-x: hidden;
}

.app-card .app-card__footer .dataTables_paginate .pagination {
  margin-bottom: 0;
}

/* Evitar "linha dupla" (borda do header + border-top da tabela) em cards com tabela */
.card > .card-header.border-bottom + .card-datatable .table.border-top {
  border-top: 0 !important;
}

.card > .card-header.border-bottom + .card-datatable .table thead th {
  border-top: 0 !important;
}

/* Reservar espaço do scrollbar para evitar "pulo" do layout (quando suportado) */
.card .card-datatable.table-responsive {
  scrollbar-gutter: stable;
}

.app-card .card-datatable.table-responsive {
  scrollbar-gutter: stable;
}

/*
  Paginação fixa na base do CARD (UX profissional)
  Estratégia:
  - O container do DataTables vira uma coluna flex
  - Só a "row do meio" (a tabela) rola
  - A última row (info + paginação) fica ANCORADA na borda inferior do card
*/

/* Se o scroll estava no container externo (ex.: .app-card__body-scroll), desligar.
   O scroll deve ficar apenas no "miolo" (row da tabela). */
.app-card .card-datatable.table-responsive.app-card__body-scroll {
  overflow: hidden !important;
}

.card .card-datatable.table-responsive,
.app-card .card-datatable.table-responsive {
  display: flex;
  flex-direction: column;
  min-height: 0;
  height: 100%;
  overflow: hidden; /* evita scroll do container inteiro */
  overflow-x: hidden; /* sem scroll lateral */
}

.card .card-datatable.table-responsive .dataTables_wrapper,
.app-card .card-datatable.table-responsive .dataTables_wrapper {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
}

/* Topo (length + filtro) não rola */
.card .card-datatable.table-responsive .dataTables_wrapper > .row:first-of-type,
.app-card .card-datatable.table-responsive .dataTables_wrapper > .row:first-of-type {
  flex: 0 0 auto;
}

/* Miolo (tabela) rola */
.card .card-datatable.table-responsive .dataTables_wrapper > .row:nth-of-type(2),
.app-card .card-datatable.table-responsive .dataTables_wrapper > .row:nth-of-type(2) {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto; /* rola só vertical */
  overflow-x: hidden; /* sem scroll lateral */
  margin-left: 0;
  margin-right: 0;
  padding-left: 0;
  padding-right: 0;
}

/* Rodapé (info + paginação) ancorado na borda inferior */
.card .card-datatable.table-responsive .dataTables_wrapper > .row:last-of-type,
.app-card .card-datatable.table-responsive .dataTables_wrapper > .row:last-of-type {
  flex: 0 0 auto;
  margin-left: 0;
  margin-right: 0;
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
  border-top: 1px solid var(--datatable-footer-divider);
}

.card .card-datatable.table-responsive .dataTables_wrapper > .row:last-of-type {
  background: var(--bs-card-bg, #fff);
}

.app-card .card-datatable.table-responsive .dataTables_wrapper > .row:last-of-type {
  background: var(--app-card-bg, #fff);
}

/*
  Evitar "flash" de tabela crua durante reloads (DataTables).

  Uso:
  - adicionar/remover a classe `.datatable-loading` no container `.card-datatable`
  - opcionalmente travar a altura com `style="min-height: ...px"` durante o carregamento
*/
.card .card-datatable.datatable-loading,
.app-card .card-datatable.datatable-loading {
  position: relative;
}

.card .card-datatable.datatable-loading > table,
.card .card-datatable.datatable-loading .dataTables_wrapper,
.app-card .card-datatable.datatable-loading > table,
.app-card .card-datatable.datatable-loading .dataTables_wrapper {
  opacity: 0;
  pointer-events: none;
}

.card .card-datatable.datatable-loading::before,
.app-card .card-datatable.datatable-loading::before {
  content: "Carregando...";
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--bs-secondary-color, #6c757d);
  background: rgba(255, 255, 255, 0.7);
  z-index: 2;
}