.table-wrap,
.report-table-wrap {
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
}

.rich-table,
.data-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: auto;

  color: var(--text-primary);
  background: var(--surface-card);

  font-size: var(--font-size-md);
}

.rich-table th,
.data-table th {
  padding:
    var(--space-3) var(--space-4);

  border-bottom: 1px solid var(--border-default);

  background: var(--surface-subtle);
  color: var(--text-secondary);

  text-align: left;
  vertical-align: middle;

  font-size: var(--font-size-xs);
  font-weight: 800;
  letter-spacing: .045em;
  line-height: 1.3;
  text-transform: uppercase;

  white-space: nowrap;
}

.rich-table td,
.data-table td {
  padding:
    var(--space-3) var(--space-4);

  border-bottom: 1px solid var(--border-subtle);

  vertical-align: middle;
  line-height: 1.4;
}

.rich-table tbody tr:last-child td,
.data-table tbody tr:last-child td {
  border-bottom: 0;
}

.rich-table tbody tr,
.data-table tbody tr {
  transition:
    background var(--motion-fast);
}

.rich-table tbody tr:hover,
.data-table tbody tr:hover {
  background: var(--surface-subtle);
}

.rich-table .right,
.data-table .right {
  text-align: right;
}

.row-actions {
  width: 1%;
  white-space: nowrap;
}

@media (max-width: 760px) {

  .rich-table,
  .data-table {
    min-width: 760px;
  }
}

/* =========================================================
   Painel de dados
   ========================================================= */

.data-panel {
  border:
    1px solid var(--border-subtle);

  border-radius:
    var(--radius-lg);

  overflow: hidden;

  background:
    var(--surface-card);

  box-shadow:
    var(--shadow-1);
}

.data-panel-head {
  min-height: 70px;

  padding:
    14px 18px;

  border-bottom:
    1px solid var(--border-subtle);

  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 18px;
}

.data-panel-head>div {
  min-width: 0;

  display: grid;

  gap: 3px;
}

.data-panel-head>div>b {
  color:
    var(--text-primary);

  font-size: 16px;
  font-weight: 800;

  letter-spacing: -.015em;
}

.data-panel-head>div>span {
  color:
    var(--text-secondary);

  font-size:
    var(--font-size-sm);
}


/* =========================================================
   Conteúdo das células
   ========================================================= */

.primary-cell {
  min-width: 190px;

  display: grid;

  gap: 3px;
}

.primary-cell strong {
  color:
    var(--text-primary);

  font-size: 14px;
  font-weight: 800;

  line-height: 1.35;
}

.primary-cell small {
  color:
    var(--text-secondary);

  font-size: 11px;
  line-height: 1.4;
}

.money-cell {
  font-variant-numeric:
    tabular-nums;

  white-space: nowrap;

  font-size: 14px;
  font-weight: 850;
}


/* =========================================================
   Pills
   ========================================================= */

.category-pill,
.card-pill,
.soft-pill,
.person-chip {
  min-height: 28px;

  padding:
    5px 9px;

  border:
    1px solid var(--border-subtle);

  border-radius:
    var(--radius-pill);

  display: inline-flex;
  align-items: center;

  gap: 6px;

  font-size: 11px;
  font-weight: 700;

  line-height: 1.2;

  white-space: nowrap;
}

.category-pill {
  background:
    var(--surface-subtle);
}

.category-pill i {
  width: 7px;
  height: 7px;

  border-radius: 50%;

  flex: 0 0 7px;
}

.card-pill {
  border-color:
    color-mix(in srgb,
      var(--pill-color) 30%,
      var(--border-subtle));

  background:
    color-mix(in srgb,
      var(--pill-color) 12%,
      white);
}

.soft-pill {
  color:
    var(--text-secondary);

  background:
    var(--surface-muted);
}

.person-chip {
  color:
    var(--brand-800);

  background:
    var(--brand-100);
}

.person-chip b {
  font-weight: 850;

  font-variant-numeric:
    tabular-nums;
}

.chip-stack {
  display: flex;
  flex-wrap: wrap;

  gap: 5px;
}


/* =========================================================
   Ação de tabela
   ========================================================= */

.table-icon-action {
  width: 36px;
  height: 36px;

  border:
    1px solid var(--border-subtle);

  border-radius:
    10px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  color:
    var(--text-secondary);

  background:
    var(--surface-subtle);

  transition:
    color var(--motion-fast),
    background var(--motion-fast),
    border-color var(--motion-fast);
}

.table-icon-action:hover {
  color:
    var(--brand-700);

  border-color:
    var(--border-default);

  background:
    var(--brand-100);

  text-decoration: none;
}

.table-icon-action svg {
  width: 16px;
  height: 16px;

  stroke-width: 2;
}

.table-action-text {
  display: none;
}

/* =========================================================
   Resumo financeiro compacto
   ========================================================= */

.financial-summary {
  flex: 0 0 auto;

  display: grid;
  grid-template-columns:
    repeat(3, minmax(115px, 1fr));

  border:
    1px solid var(--border-subtle);

  border-radius:
    var(--radius-md);

  overflow: hidden;

  background:
    var(--surface-subtle);
}

.financial-summary-item {
  min-width: 0;

  padding:
    10px 14px;

  display: grid;

  gap: 3px;
}

.financial-summary-item+.financial-summary-item {
  border-left:
    1px solid var(--border-subtle);
}

.financial-summary-item span {
  color:
    var(--text-tertiary);

  font-size: 10px;
  font-weight: 800;

  letter-spacing: .045em;
  text-transform: uppercase;
}

.financial-summary-item strong {
  color:
    var(--text-primary);

  font-size: 15px;
  font-weight: 850;

  font-variant-numeric:
    tabular-nums;

  white-space: nowrap;
}

.financial-summary-item.is-positive strong {
  color:
    var(--success-700);
}

.financial-summary-item.is-highlight strong {
  color:
    var(--brand-800);
}

@media (max-width: 760px) {
  .financial-summary {
    width: 100%;

    grid-template-columns:
      repeat(3, minmax(0, 1fr));
  }

  .financial-summary-item {
    padding: 10px;
  }

  .financial-summary-item strong {
    font-size: 13px;
  }
}

@media (max-width: 430px) {
  .financial-summary {
    grid-template-columns: 1fr;
  }

  .financial-summary-item+.financial-summary-item {
    border-left: 0;

    border-top:
      1px solid var(--border-subtle);
  }

  .financial-summary-item {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 12px;
  }
}


/* =========================================================
   Tabela adaptável em mobile
   ========================================================= */

@media (max-width: 760px) {
  .responsive-data-table {
    min-width: 0;

    background:
      transparent;
  }

  .responsive-data-table thead {
    display: none;
  }

  .responsive-data-table tbody {
    padding: 10px;

    display: grid;

    gap: 10px;
  }

  .responsive-data-table tbody tr {
    padding:
      14px;

    border:
      1px solid var(--border-subtle);

    border-radius:
      var(--radius-md);

    display: grid;

    background:
      var(--surface-card);

    box-shadow:
      var(--shadow-1);
  }

  .responsive-data-table tbody tr:hover {
    background:
      var(--surface-card);
  }

  .responsive-data-table tbody td {
    min-width: 0;

    padding:
      8px 0;

    border-bottom:
      1px solid var(--border-subtle);

    display: grid;

    grid-template-columns:
      105px minmax(0, 1fr);

    align-items: center;

    gap: 12px;
  }

  .responsive-data-table tbody td::before {
    content:
      attr(data-label);

    color:
      var(--text-tertiary);

    font-size: 10px;
    font-weight: 800;

    letter-spacing: .045em;

    text-transform: uppercase;
  }

  .responsive-data-table tbody td.mobile-primary-cell {
    padding:
      0 0 12px;

    display: block;
  }

  .responsive-data-table tbody td.mobile-primary-cell::before {
    display: none;
  }

  .responsive-data-table .primary-cell {
    min-width: 0;
  }

  .responsive-data-table .right {
    text-align: left;
  }

  .responsive-data-table .row-actions {
    width: auto;

    padding:
      12px 0 0;

    border-bottom: 0;

    display: block;
  }

  .responsive-data-table .row-actions::before {
    display: none;
  }

  .responsive-data-table .table-icon-action {
    width: 100%;
    height: 42px;

    gap: 7px;
  }

  .responsive-data-table .table-action-text {
    display: inline;

    font-size: 12px;
    font-weight: 750;
  }
}

@media (max-width: 760px) {
  .data-panel-head {
    min-height: 0;

    padding:
      14px;

    align-items: flex-start;
    flex-direction: column;

    gap: 10px;
  }

  .data-panel-head .section-action {
    align-self: flex-start;
  }
}

/* =========================================================
   Complementos finais de tabelas
   ========================================================= */

.data-panel {
  margin-bottom: var(--space-4);
}

.data-panel-head {
  background: var(--surface-subtle);
}


/* ---------------------------------------------------------
   Pills usados dentro de tabelas
   --------------------------------------------------------- */

.card-pill {
  color:
    color-mix(
      in srgb,
      var(--pill-color) 75%,
      var(--brand-900)
    );
}

.person-chip {
  margin:
    1px
    2px
    1px
    0;
}

.person-chip b {
  margin-left: 4px;
}


/* ---------------------------------------------------------
   Ações agrupadas
   --------------------------------------------------------- */

.row-action-group {
  display: flex;
  align-items: center;
  flex-wrap: wrap;

  gap: var(--space-2);
}

.row-action-group form {
  margin: 0;

  display: flex;
}