/* Rodada A: a tabela é um cartão (16px, borda), cabeçalho em surface-2. */
.table-container {
  overflow-x: auto;
  border: 1px solid var(--color-border);
  border-radius: 16px;
  background: var(--color-surface);
}

.card--no-padding > .table-container {
  border: 0;
}

/* Tabelas de formulário com <select> pesquisável (dropdown custom absoluto): o overflow-x:auto
   recortava o popup do dropdown. `visible` deixa o popup escapar do container. */
.table-container--form {
  overflow: visible;
}

.table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-sm);
}

.table th {
  padding: 14px 20px;
  text-align: left;
  font: 600 11px/1.2 var(--font-sans);
  color: var(--color-text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  border-bottom: 1px solid var(--color-border);
  background: var(--surface-2);
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
}

.table th:hover {
  color: var(--color-text);
}

.table th.sorted {
  color: var(--accent);
}

.table td {
  padding: 12px 20px;
  border-bottom: 1px solid var(--color-border);
  color: var(--color-text);
  vertical-align: middle;
  transition: all var(--transition-fast);
}

/* Células sem quebra de linha: as tabelas responsivas (responsive_tables.js) medem a
   largura de cada coluna e escondem as que não cabem. Vivia em pages/triages.css, mas
   já valia para o app inteiro. */
.table td {
  white-space: nowrap !important;
}

/* A marca de hover (borda à esquerda) só na primeira coluna: em todas as células, a
   borda transparente aparecia como frestas brancas entre os `th` (border-collapse). */
.table td:first-child {
  border-left: 3px solid transparent;
}

.table tr:last-child td {
  border-bottom: none;
}

.table tbody tr:hover td {
  background: var(--surface-2);
}

.table tbody tr:hover td:first-child {
  border-left-color: var(--accent);
}

.table--striped tr:nth-child(even) td {
  background: var(--surface-2);
}

.table--compact th,
.table--compact td {
  padding: 8px 12px;
}

.table__actions {
  display: flex;
  gap: var(--space-1);
  justify-content: flex-start;
}

.text-center .table__actions {
  justify-content: center;
}

.text-right .table__actions {
  justify-content: flex-end;
}

/* Tema escuro: surface-2 e accent já trocam de valor em tokens.css. */

.sort-link {
  color: inherit;
  font-weight: inherit;
  font-size: inherit;
  text-transform: inherit;
  letter-spacing: inherit;
  display: inline-flex;
  align-items: center;
  width: 100%;
}

.text-center .sort-link,
th.text-center .sort-link {
  justify-content: center;
}

.text-right .sort-link,
th.text-right .sort-link {
  justify-content: flex-end;
}

.sort-link:hover {
  color: var(--color-primary-600);
}

.sort-link.sort-active {
  color: var(--color-primary-600);
}

.sort-icon {
  transition: transform 0.2s ease;
}



/* Tabela responsiva (responsive_tables.js, no estilo do DataTables Responsive): colunas
   que não cabem saem, e o +/− da primeira coluna abre os valores delas numa linha de
   detalhe. */
.table .rt-hidden {
  display: none;
}

.table:not(.rt-collapsed) .rt-toggle {
  display: none;
}

.rt-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  margin-right: var(--space-2);
  padding: 0;
  vertical-align: middle;
  border: 0;
  border-radius: 50%;
  background: var(--color-primary-600);
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  flex-shrink: 0;
}

.rt-toggle::before {
  content: "+";
}

.rt-toggle[aria-expanded="true"] {
  background: var(--color-danger-500);
}

.rt-toggle[aria-expanded="true"]::before {
  content: "−";
}

.rt-toggle:focus-visible {
  outline: 2px solid var(--color-primary-500);
  outline-offset: 2px;
}

.rt-child > td {
  background: var(--color-gray-50);
  cursor: default;
}

.rt-details {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: var(--space-2) var(--space-4);
  margin: 0;
  align-items: center;
}

.rt-details dt {
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--color-text-secondary);
}

.rt-details dd {
  margin: 0;
  text-align: left;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .rt-child > td {
    background: rgba(148, 163, 184, 0.08);
  }
}

:root[data-theme="dark"] .rt-child > td {
  background: rgba(148, 163, 184, 0.08);
}

/* U45: "N pendências" na célula de ações da listagem. Só o gatilho fica na célula; a
   lista abre numa linha anexa de largura inteira (.rt-attached), e abrir não muda a
   largura de coluna nenhuma. */
.blockers-toggle {
  /* Numa linha própria abaixo do Iniciar, como o <details> de antes: na mesma linha a
     coluna de Ações alargava ~70px e, a 1024px, uma coluna saía. */
  display: flex;
  width: max-content;
  align-items: center;
  gap: var(--space-1);
  margin: var(--space-1) auto 0;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  font-size: var(--text-xs);
  color: var(--color-text-secondary);
  white-space: nowrap;
  cursor: pointer;
}

.blockers-toggle::before {
  content: "";
  width: 0.4em;
  height: 0.4em;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(-45deg);
}

.blockers-toggle[aria-expanded="true"]::before {
  transform: rotate(45deg);
}

.blockers-toggle:hover {
  color: var(--color-text);
}

.blockers-toggle:focus-visible {
  outline: 2px solid var(--color-primary-500);
  outline-offset: 2px;
}

/* A linha anexa é da mesma família da linha de detalhe do +/−. */
.rt-attached > td {
  background: var(--color-gray-50);
  cursor: default;
  white-space: normal;
}

.blockers-row {
  font-size: var(--text-sm);
  text-align: left;
}

.blockers-row strong {
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--color-text-secondary);
}

.blockers-row__list {
  margin: var(--space-1) 0 0;
  padding-left: var(--space-4);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .rt-attached > td {
    background: rgba(148, 163, 184, 0.08);
  }
}

:root[data-theme="dark"] .rt-attached > td {
  background: rgba(148, 163, 184, 0.08);
}

/* Telas médias: o respiro de 20px por célula tirava uma coluna das tabelas
   responsivas a 1024px (a listagem de procedimentos precisa das 7). */
@media (max-width: 1280px) {
  .table th,
  .table td {
    padding-left: 14px;
    padding-right: 14px;
  }
}