/*
 * Tema DESIGN.md (tokens Binance-like) mapeado sobre Bootstrap 5 + DataTables.
 * Fontes substitutas locais: Inter (BinanceNova) e JetBrains Mono (BinancePlex).
 */

@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('../vendor/fonts/inter/inter-latin-400-normal.woff2') format('woff2');
}

@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('../vendor/fonts/inter/inter-latin-500-normal.woff2') format('woff2');
}

@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('../vendor/fonts/inter/inter-latin-600-normal.woff2') format('woff2');
}

@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('../vendor/fonts/inter/inter-latin-700-normal.woff2') format('woff2');
}

@font-face {
    font-family: 'JetBrains Mono';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('../vendor/fonts/jetbrains-mono/jetbrains-mono-latin-400-normal.woff2') format('woff2');
}

@font-face {
    font-family: 'JetBrains Mono';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('../vendor/fonts/jetbrains-mono/jetbrains-mono-latin-500-normal.woff2') format('woff2');
}

@font-face {
    font-family: 'JetBrains Mono';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('../vendor/fonts/jetbrains-mono/jetbrains-mono-latin-700-normal.woff2') format('woff2');
}

:root {
    /* DESIGN.md — Colors */
    --dx-canvas-dark: #0b0e11;
    /* Marca. O índigo preenche (botões, seleção, foco); sobre o canvas escuro
       ele rende só 3,2:1 de contraste, insuficiente para texto — por isso
       links e rótulos usam a variante clara `--dx-primary-ink` (7,6:1). */
    --dx-primary: #4740FF;
    --dx-primary-active: #3A33D9;
    --dx-primary-ink: #9B96FF;
    --dx-primary-disabled: #262459;
    /* O amarelo deixou de ser a marca, mas continua sendo o aviso: um alerta
       de atenção não pode assumir a cor do botão principal. */
    --dx-warning: #FCD535;
    --dx-surface-card-dark: #1e2329;
    --dx-surface-elevated-dark: #2b3139;
    --dx-hairline-on-dark: #2b3139;
    --dx-ink: #181a20;
    --dx-body: #eaecef;
    --dx-muted: #707a8a;
    --dx-muted-strong: #929aa5;
    /* Branco sobre o índigo: 6,1:1. O texto escuro que o amarelo pedia daria
       2,4:1 aqui e sumiria dentro do botão. */
    --dx-on-primary: #ffffff;
    --dx-on-dark: #ffffff;
    --dx-trading-up: #0ecb81;
    --dx-trading-down: #f6465d;
    --dx-info: #3b82f6;

    /* DESIGN.md — Shapes */
    --dx-rounded-sm: 4px;
    --dx-rounded-md: 6px;
    --dx-rounded-lg: 8px;
    --dx-rounded-xl: 12px;

    /* DESIGN.md — Spacing (base 4px) */
    --dx-spacing-xs: 8px;
    --dx-spacing-sm: 12px;
    --dx-spacing-md: 16px;
    --dx-spacing-lg: 24px;
    --dx-spacing-xl: 32px;

    /* DESIGN.md — Typography */
    --dx-font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --dx-font-number: 'JetBrains Mono', 'Inter', monospace;
}

/* Bootstrap remapeado para o canvas escuro */
body {
    --bs-body-bg: var(--dx-canvas-dark);
    --bs-body-color: var(--dx-body);
    --bs-body-font-family: var(--dx-font-body);
    --bs-body-font-size: 14px;
    --bs-border-color: var(--dx-hairline-on-dark);
    --bs-secondary-color: var(--dx-muted);
    --bs-emphasis-color: var(--dx-on-dark);
    --bs-link-color: var(--dx-primary-ink);
    --bs-link-hover-color: var(--dx-on-dark);
    background-color: var(--dx-canvas-dark);
    color: var(--dx-body);
    font-family: var(--dx-font-body);
}

h1, h2, h3, h4, h5, h6 {
    color: var(--dx-on-dark);
    font-weight: 600;
}

.dx-page-title {
    font-size: 24px;
    font-weight: 600;
    line-height: 1.3;
}

/* Navegação superior */
.dx-topnav {
    background-color: var(--dx-canvas-dark);
    border-bottom: 1px solid var(--dx-hairline-on-dark);
    min-height: 64px;
}

.dx-topnav .navbar-brand {
    color: var(--dx-primary-ink);
    font-weight: 700;
    letter-spacing: -0.3px;
    padding-block: 0;
}

/* Logo oficial. A altura fixa e `width: auto` preservam a proporção do PNG
   (140x40) em qualquer densidade de tela. */
.dx-brand-logo {
    display: block;
    height: 28px;
    width: auto;
}

.dx-login-brand .dx-brand-logo {
    height: 36px;
    margin: 0 auto;
}

.dx-topnav .nav-link {
    color: var(--dx-body);
    font-size: 14px;
    font-weight: 500;
}

.dx-topnav .nav-link.active,
.dx-topnav .nav-link:hover,
.dx-topnav .nav-link:focus {
    color: var(--dx-primary-ink);
}

.dx-topnav .navbar-toggler {
    border-color: var(--dx-hairline-on-dark);
    color: var(--dx-body);
}

/* Botões */
.btn-primary,
.dx-btn-primary {
    --bs-btn-bg: var(--dx-primary);
    --bs-btn-border-color: var(--dx-primary);
    --bs-btn-color: var(--dx-on-primary);
    --bs-btn-hover-bg: var(--dx-primary-active);
    --bs-btn-hover-border-color: var(--dx-primary-active);
    --bs-btn-hover-color: var(--dx-on-primary);
    --bs-btn-active-bg: var(--dx-primary-active);
    --bs-btn-active-border-color: var(--dx-primary-active);
    --bs-btn-active-color: var(--dx-on-primary);
    --bs-btn-disabled-bg: var(--dx-primary-disabled);
    --bs-btn-disabled-border-color: var(--dx-primary-disabled);
    --bs-btn-disabled-color: var(--dx-muted);
    border-radius: var(--dx-rounded-md);
    font-weight: 600;
    font-size: 14px;
}

.btn-secondary,
.dx-btn-secondary {
    --bs-btn-bg: var(--dx-surface-card-dark);
    --bs-btn-border-color: var(--dx-surface-card-dark);
    --bs-btn-color: var(--dx-on-dark);
    --bs-btn-hover-bg: var(--dx-surface-elevated-dark);
    --bs-btn-hover-border-color: var(--dx-surface-elevated-dark);
    --bs-btn-hover-color: var(--dx-on-dark);
    --bs-btn-active-bg: var(--dx-surface-elevated-dark);
    --bs-btn-active-border-color: var(--dx-surface-elevated-dark);
    --bs-btn-active-color: var(--dx-on-dark);
    border-radius: var(--dx-rounded-md);
    font-weight: 600;
    font-size: 14px;
}

/* Botões outline (Limpar/Filtros): neutro cinza; a variante primária indica
   que o recorte controlado pelo botão está ativo. */
.btn-outline-secondary {
    --bs-btn-color: var(--dx-muted-strong);
    --bs-btn-border-color: var(--dx-hairline-on-dark);
    --bs-btn-hover-bg: var(--dx-surface-elevated-dark);
    --bs-btn-hover-border-color: var(--dx-hairline-on-dark);
    --bs-btn-hover-color: var(--dx-on-dark);
    --bs-btn-active-bg: var(--dx-surface-elevated-dark);
    --bs-btn-active-border-color: var(--dx-hairline-on-dark);
    --bs-btn-active-color: var(--dx-on-dark);
    border-radius: var(--dx-rounded-md);
    font-weight: 600;
    font-size: 14px;
}

.btn-outline-primary {
    --bs-btn-color: var(--dx-primary);
    --bs-btn-border-color: var(--dx-primary);
    --bs-btn-hover-bg: var(--dx-primary);
    --bs-btn-hover-border-color: var(--dx-primary);
    --bs-btn-hover-color: var(--dx-on-primary);
    --bs-btn-active-bg: var(--dx-primary-active);
    --bs-btn-active-border-color: var(--dx-primary-active);
    --bs-btn-active-color: var(--dx-on-primary);
    border-radius: var(--dx-rounded-md);
    font-weight: 600;
    font-size: 14px;
}

/* Conteúdo principal mais estreito em desktop: o container-xl do Bootstrap
   iria a 1140/1320px; aqui trava em 1000px e centraliza. Abaixo de 1200px
   segue fluido. */
@media (min-width: 1200px) {
    main.container-xl {
        max-width: 1000px;
    }
}

/* Cartões e superfícies */
.card,
.dx-card {
    --bs-card-bg: var(--dx-surface-card-dark);
    --bs-card-border-color: var(--dx-hairline-on-dark);
    --bs-card-color: var(--dx-body);
    --bs-card-cap-bg: var(--dx-surface-card-dark);
    border-radius: var(--dx-rounded-xl);
}

/* Formulários */
.form-control,
.form-select {
    background-color: var(--dx-surface-card-dark);
    border: 1px solid var(--dx-hairline-on-dark);
    border-radius: var(--dx-rounded-md);
    color: var(--dx-body);
}

.form-control:focus,
.form-select:focus {
    background-color: var(--dx-surface-card-dark);
    border-color: var(--dx-info);
    box-shadow: 0 0 0 2px rgb(59 130 246 / 50%);
    color: var(--dx-on-dark);
}

/* Campo desabilitado (lote pago/submetido, exibido só para leitura). Sem esta
   regra o Bootstrap aplica o cinza-claro do tema padrão como fundo e o texto
   quase-branco do tema escuro fica invisível — o lote parecia vazio. */
.form-control:disabled,
.form-select:disabled,
.form-control[readonly] {
    background-color: var(--dx-canvas-dark);
    border-color: var(--dx-hairline-on-dark);
    color: var(--dx-muted-strong);
    opacity: 1;
}

.form-control::placeholder {
    color: var(--dx-muted);
}

.form-label {
    color: var(--dx-muted-strong);
    font-size: 12px;
    font-weight: 500;
}

/* Direção de transação: verde entrada / vermelho saída — sempre cor de texto */
.dx-amount-in {
    color: var(--dx-trading-up);
}

.dx-amount-out {
    color: var(--dx-trading-down);
}


.dx-number {
    font-family: var(--dx-font-number);
    font-size: 14px;
    font-weight: 500;
}

/*
 * Cores da tabela de transações.
 *
 * O Bootstrap pinta a célula em `.table > :not(caption) > * > *` — (0,1,1) e
 * mirando o próprio <td>. Uma classe solta como `.dx-amount-in` (0,1,0) perde
 * para ela, e o valor ficava sem cor até o hover, cuja regra é mais
 * específica. Por isso todo seletor abaixo desce até `td` com o `table`
 * incluído: é o que garante a cor no estado normal, e não só sob o mouse.
 */
table.dataTable > tbody > tr > td.dx-amount-in,
table.dataTable.table-hover > tbody > tr:hover > td.dx-amount-in,
table.dataTable > tbody > tr.selected > td.dx-amount-in {
    color: var(--dx-trading-up);
}

table.dataTable > tbody > tr > td.dx-amount-out,
table.dataTable.table-hover > tbody > tr:hover > td.dx-amount-out,
table.dataTable > tbody > tr.selected > td.dx-amount-out {
    color: var(--dx-trading-down);
}

/* Estorno marca a linha toda: é informação sobre a transação, não sobre o
   valor. */
table.dataTable > tbody > tr.dx-row-refunded > td,
table.dataTable.table-hover > tbody > tr.dx-row-refunded:hover > td,
table.dataTable > tbody > tr.dx-row-refunded.selected > td {
    color: var(--dx-info);
}

/* ...mas a célula do valor mantém verde/vermelho mesmo na linha estornada:
   saber se entrou ou saiu não deixa de importar porque houve devolução. */
table.dataTable > tbody > tr.dx-row-refunded > td.dx-amount-in,
table.dataTable.table-hover > tbody > tr.dx-row-refunded:hover > td.dx-amount-in {
    color: var(--dx-trading-up);
}

table.dataTable > tbody > tr.dx-row-refunded > td.dx-amount-out,
table.dataTable.table-hover > tbody > tr.dx-row-refunded:hover > td.dx-amount-out {
    color: var(--dx-trading-down);
}


/* DataTables sobre o tema escuro */
div.dt-container {
    color: var(--dx-body);
}

table.dataTable {
    --dt-row-hover: rgb(43 49 57 / 60%);
    --dt-row-selected: 43, 49, 57;
    --dt-row-selected-text: 234, 236, 239;
    --dt-row-stripe: transparent;
    border-color: var(--dx-hairline-on-dark);
    color: var(--dx-body);
}

table.dataTable thead th {
    color: var(--dx-muted);
    font-size: 12px;
    font-weight: 500;
    border-bottom: 1px solid var(--dx-hairline-on-dark) !important;
}

table.dataTable tbody td {
    border-top: 1px solid var(--dx-hairline-on-dark);
    padding: 12px 8px;
}

table.dataTable.table-hover > tbody > tr:hover > * {
    box-shadow: inset 0 0 0 9999px rgb(43 49 57 / 60%);
    color: var(--dx-body);
}

table.dataTable > tbody > tr.selected > * {
    box-shadow: inset 0 0 0 9999px rgb(71 64 255 / 24%);
    color: var(--dx-body);
}

.table {
    --bs-table-bg: transparent;
    --bs-table-color: var(--dx-body);
    --bs-table-border-color: var(--dx-hairline-on-dark);
    --bs-table-striped-bg: transparent;
    --bs-table-striped-color: var(--dx-body);
    --bs-table-hover-color: var(--dx-body);
}

/* Paginação no formato do exemplo oficial do DataTables: info à esquerda,
   « ‹ 1 2 3 › » à direita, botões compactos. */
div.dt-container .dt-paging .page-link,
div.dt-container .dt-paging .dt-paging-button {
    background: transparent;
    border-color: transparent;
    color: var(--dx-body) !important;
    border-radius: var(--dx-rounded-sm);
    font-size: 13px;
    min-width: 32px;
    padding: 4px 8px;
    text-align: center;
}

div.dt-container .dt-paging .page-item.active .page-link,
div.dt-container .dt-paging .dt-paging-button.current,
div.dt-container .dt-paging .dt-paging-button.current:hover {
    background: var(--dx-surface-elevated-dark);
    border-color: var(--dx-hairline-on-dark);
    color: var(--dx-on-dark) !important;
}

div.dt-container .dt-paging .page-item:not(.disabled) .page-link:hover,
div.dt-container .dt-paging .dt-paging-button:hover {
    background: var(--dx-surface-card-dark);
    border-color: var(--dx-hairline-on-dark);
    color: var(--dx-on-dark) !important;
}

div.dt-container .dt-paging .page-item.disabled .page-link,
div.dt-container .dt-paging .dt-paging-button.disabled {
    color: var(--dx-muted) !important;
    opacity: 1;
}

/* Celular: sobram só « ‹ [página atual] › ». A lista completa de números
   estouraria a largura e quebraria a linha em telas estreitas. */
@media (max-width: 575.98px) {
    div.dt-container .dt-paging .pagination > li:not(.first):not(.previous):not(.next):not(.last):not(.active),
    div.dt-container .dt-paging .dt-paging-button:not(.first):not(.previous):not(.next):not(.last):not(.current) {
        display: none;
    }

    div.dt-container .dt-layout-row:last-child {
        gap: var(--dx-spacing-xs);
        justify-content: center;
        text-align: center;
    }
}

div.dt-container .dt-info,
div.dt-container .dt-length,
div.dt-container .dt-search {
    color: var(--dx-muted-strong);
}

/* Linhas selecionáveis (PIX enviado) recebem cursor + checkbox visível */
table.dataTable tbody tr.dx-selectable {
    cursor: pointer;
}

table.dataTable tbody tr:not(.dx-selectable) td.dt-select {
    visibility: hidden;
}

input.dt-select-checkbox {
    accent-color: var(--dx-primary);
}

/* Estado vazio */
.dx-empty-state {
    color: var(--dx-muted-strong);
    padding: var(--dx-spacing-xl);
    text-align: center;
}

/* Offcanvas (detalhe, compartilhar) */
.offcanvas {
    --bs-offcanvas-bg: var(--dx-surface-card-dark);
    --bs-offcanvas-color: var(--dx-body);
    --bs-offcanvas-border-color: var(--dx-hairline-on-dark);
}

.offcanvas .btn-close {
    filter: invert(1) grayscale(100%) brightness(200%);
}

.dx-detail-label {
    color: var(--dx-muted);
    font-size: 12px;
    font-weight: 500;
    margin-bottom: 2px;
}

.dx-detail-value {
    color: var(--dx-body);
    font-size: 14px;
    margin-bottom: var(--dx-spacing-sm);
    word-break: break-word;
}

.dx-detail-value.dx-number {
    font-family: var(--dx-font-number);
}

/* Barra de compartilhamento acima da tabela (desktop) */
.dx-share-bar {
    display: none;
    gap: var(--dx-spacing-sm);
    align-items: center;
    margin-bottom: var(--dx-spacing-md);
}

.dx-share-bar.dx-visible {
    display: flex;
}

/* Offcanvas inferior de compartilhamento aparece apenas em telas pequenas */
@media (min-width: 768px) {
    .dx-share-bar.dx-visible {
        position: sticky;
        top: 12px;
        z-index: 1020;
        padding: 10px 12px;
        background: var(--dx-surface-card-dark);
        border: 1px solid var(--dx-hairline-on-dark);
        border-radius: var(--bs-border-radius);
        box-shadow: 0 8px 24px rgb(0 0 0 / 18%);
    }

    #shareOffcanvas {
        display: none !important;
    }
}

@media (max-width: 767.98px) {
    .dx-share-bar.dx-visible {
        display: none;
    }
}

.dx-selection-count {
    color: var(--dx-muted-strong);
    font-size: 13px;
}

/* Alertas mapeados */
.alert-danger {
    --bs-alert-bg: rgb(246 70 93 / 12%);
    --bs-alert-border-color: rgb(246 70 93 / 40%);
    --bs-alert-color: var(--dx-trading-down);
    border-radius: var(--dx-rounded-lg);
}

.alert-warning {
    --bs-alert-bg: rgb(252 213 53 / 10%);
    --bs-alert-border-color: rgb(252 213 53 / 35%);
    --bs-alert-color: var(--dx-warning);
    border-radius: var(--dx-rounded-lg);
}

.alert-info {
    --bs-alert-bg: rgb(59 130 246 / 10%);
    --bs-alert-border-color: rgb(59 130 246 / 35%);
    --bs-alert-color: var(--dx-info);
    border-radius: var(--dx-rounded-lg);
}

/* Tela de login */
.dx-login-wrap {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--dx-spacing-md);
}

.dx-login-card {
    background: var(--dx-surface-card-dark);
    border: 1px solid var(--dx-hairline-on-dark);
    border-radius: var(--dx-rounded-xl);
    padding: var(--dx-spacing-xl);
    width: 100%;
    max-width: 400px;
}

.dx-login-brand {
    color: var(--dx-primary-ink);
    font-size: 24px;
    font-weight: 700;
    letter-spacing: -0.3px;
    margin-bottom: var(--dx-spacing-lg);
    text-align: center;
}

/* Badges de tipo de transação */
.dx-type-badge {
    background: var(--dx-surface-elevated-dark);
    border-radius: var(--dx-rounded-sm);
    color: var(--dx-muted-strong);
    display: inline-block;
    font-size: 11px;
    font-weight: 500;
    max-width: 100%;
    overflow: hidden;
    padding: 2px 8px;
    text-overflow: ellipsis;
    vertical-align: middle;
    white-space: nowrap;
}

/* Larguras determinísticas via table-layout fixed: seleção e Valor têm
   largura fixa, Nome fica com TODO o resto (única coluna sem largura). Cada
   célula tem duas linhas: nome/valor em cima, horário/selos embaixo. */
#transactionsTable {
    table-layout: fixed;
}

#transactionsTable thead th:first-child {
    width: 2.5rem;
}

#transactionsTable thead th:nth-child(3) {
    width: 10.5rem;
}

/* Nome completo sempre: quebra de linha em vez de reticências ("anywhere" só
   parte palavra quando nada mais cabe). A largura da coluna é fixa, então a
   quebra não mexe no layout. */
.dx-tx-name {
    overflow-wrap: anywhere;
}

/* Card da tabela: padding mínimo em telas pequenas — cada pixel horizontal
   vira espaço de coluna; em telas maiores fica o padrão do Bootstrap. */
@media (max-width: 767.98px) {
    .card-body:has(.dataTable) {
        padding: 0.75rem 0.375rem;
    }
}

/* Números e selos da coluna Valor alinhados à direita, sem quebra. */
td.dx-amount-in,
td.dx-amount-out {
    text-align: right;
    white-space: nowrap;
}

/* Segunda linha da célula do nome: só o horário. */
.dx-tx-time {
    color: var(--dx-muted);
    font-size: 12px;
    margin-top: 2px;
}

/* Segunda linha da célula do valor: selos de tipo/estorno sob o número,
   encostados na direita como ele. Com a largura da coluna fixa, dois selos
   que não cabem lado a lado empilham (o "Estornado" desce uma linha) em vez
   de alargar a coluna ou virar reticências. */
.dx-tx-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 6px;
    justify-content: flex-end;
    margin-top: 2px;
    min-width: 0;
}

/* O espaçamento entre selos vem do gap do contêiner acima. */
.dx-tx-badges .dx-refund-badge {
    margin-left: 0;
}

/* Linha-título dos blocos por dia na lista de transações */
tr.dx-day-group > td {
    background: var(--dx-surface-elevated-dark);
    border-bottom: 1px solid var(--dx-hairline-on-dark);
    color: var(--dx-warning);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.3px;
    padding: 6px 12px;
    text-transform: uppercase;
}

/* Scroll infinito: a paginação e o menu de tamanho ficam ocultos (não
   removidos) enquanto o card tiver `dx-infinite` — retirar a classe devolve a
   paginação clássica. A linha "Exibindo 1 a N de X" permanece como feedback. */
.dx-infinite .dt-paging,
.dx-infinite .dt-length {
    display: none;
}

.dx-scroll-sentinel {
    min-height: 1px;
    padding: var(--dx-spacing-md) 0;
    text-align: center;
}

.dx-scroll-sentinel .dx-scroll-loading {
    color: var(--dx-muted);
    font-size: 13px;
}

/* Selo de estorno, ao lado do selo de tipo. Precisa vir DEPOIS de
   `.dx-type-badge` (mesma especificidade) para vencer o fundo neutro dele, e a
   cor é reafirmada sobre `td` porque a regra de direção pinta as células. */
.dx-refund-badge {
    background: rgb(59 130 246 / 18%);
    margin-left: 6px;
}

/* `.dx-type-badge` no seletor não é redundância: sem ele esta regra perde para
   a que pinta os selos de tipo nas linhas coloridas por direção. */
table.dataTable tbody tr > td .dx-type-badge.dx-refund-badge {
    color: var(--dx-info);
}

/* Offcanvas de envio de lote (US-011 a US-013) */
.dx-batch-offcanvas {
    --bs-offcanvas-width: min(460px, 100vw);
    display: flex;
    flex-direction: column;
}

.dx-batch-offcanvas .offcanvas-body {
    flex: 1 1 auto;
    overflow-y: auto;
}

.dx-batch-offcanvas .offcanvas-footer {
    background: var(--dx-surface-elevated-dark);
    border-color: var(--dx-hairline-on-dark);
    flex: 0 0 auto;
}

@media (max-width: 767.98px) {
    .dx-batch-offcanvas {
        height: 100dvh;
        overflow-y: hidden;
    }

    .dx-batch-offcanvas .offcanvas-body {
        min-height: 0;
    }
}

.dx-batch-block {
    background: var(--dx-surface-elevated-dark);
    border: 1px solid var(--dx-hairline-on-dark);
    border-radius: var(--dx-rounded-md);
}

.dx-batch-block:has(.dx-batch-block-error:not(.d-none)) {
    border-color: var(--dx-trading-down);
}

.dx-batch-block-title {
    color: var(--dx-muted-strong);
    font-size: 12px;
    letter-spacing: 0.4px;
    text-transform: uppercase;
}

.dx-batch-total {
    border-top: 1px solid var(--dx-hairline-on-dark);
    font-size: 18px;
    padding-top: var(--dx-spacing-md);
}

/* Trilha de auditoria: payloads crus no detalhe */
.dx-audit-json {
    background: var(--dx-canvas-dark);
    border: 1px solid var(--dx-hairline-on-dark);
    border-radius: var(--dx-rounded-sm);
    color: var(--dx-body);
    font-family: var(--dx-font-number);
    font-size: 12px;
    margin-bottom: var(--dx-spacing-sm);
    max-height: 320px;
    overflow: auto;
    padding: var(--dx-spacing-xs);
    white-space: pre-wrap;
    word-break: break-word;
}

/* Linha que originou a abertura do detalhe, dentro da cadeia */
.dx-audit-focused {
    border-color: var(--dx-primary);
}

/* Coluna de ações da tabela de /pendente */
td.dx-pending-actions {
    white-space: nowrap;
}

td.dx-pending-actions .btn + .btn {
    margin-left: var(--dx-spacing-xs);
}

/* Linha que abre um detalhe ao ser clicada (lotes em /pendente) */
table.dataTable tbody tr.dx-row-clickable {
    cursor: pointer;
}

/* Lote com item com falha fica destacado até resolver ou descartar
   (US-014.AC-3). Na tabela de /pendente a marca vive na primeira célula da
   linha: `border-left` no próprio <tr> não pinta com border-collapse. */
.dx-pending-attention > td:first-child {
    box-shadow: inset 3px 0 0 0 var(--dx-trading-down);
}

/* Cards de entradas/saídas/saldo do topo das duas telas */
.dx-summary-card {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.dx-summary-head {
    display: flex;
    align-items: center;
    gap: 8px;
}

.dx-summary-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    background: var(--dx-surface-elevated-dark);
    border-radius: var(--dx-rounded-sm);
    color: var(--dx-muted-strong);
}

.dx-summary-label {
    color: var(--dx-muted-strong);
    font-size: 13px;
    font-weight: 500;
}

/* Ajuda no canto superior direito do card. `margin-left: auto` empurra para a
   ponta sem precisar de posicionamento absoluto. */
.dx-summary-help {
    background: none;
    border: 0;
    color: var(--dx-muted);
    cursor: help;
    display: flex;
    line-height: 0;
    margin-left: auto;
    padding: 0;
}

.dx-summary-help:hover,
.dx-summary-help:focus-visible {
    color: var(--dx-primary-ink);
}

/* Valor e selo na mesma linha de base, como na referência. */
.dx-summary-figure {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 10px;
}

.dx-summary-change {
    align-items: center;
    border-radius: 999px;
    display: inline-flex;
    font-size: 11px;
    font-weight: 600;
    gap: 3px;
    padding: 2px 8px;
    white-space: nowrap;
}

.dx-summary-change-arrow {
    flex: 0 0 auto;
}

.dx-summary-change-up {
    background: rgb(14 203 129 / 16%);
    color: var(--dx-trading-up);
}

.dx-summary-change-down {
    background: rgb(246 70 93 / 16%);
    color: var(--dx-trading-down);
}

.dx-summary-value {
    font-size: 22px;
    font-weight: 600;
    line-height: 1.2;
}

.dx-summary-hint {
    color: var(--dx-muted-strong);
    font-size: 12px;
}

.dx-pix-key-search { position: relative; }

.dx-pix-key-options {
    background: var(--bs-body-bg);
    border: 1px solid var(--bs-border-color);
    border-radius: var(--bs-border-radius);
    box-shadow: 0 8px 24px rgb(0 0 0 / 14%);
    left: 0;
    max-height: 280px;
    overflow-y: auto;
    position: absolute;
    right: 0;
    top: calc(100% + 4px);
    z-index: 1060;
}

.dx-pix-key-option {
    background: transparent;
    border: 0;
    color: var(--bs-body-color);
    display: block;
    padding: 10px 12px;
    text-align: left;
    width: 100%;
}

.dx-pix-key-option:hover,
.dx-pix-key-option:focus-visible {
    background: var(--dx-primary);
    color: #fff;
    outline: 0;
}

.dx-pix-key-option:hover .dx-pix-key-value,
.dx-pix-key-option:focus-visible .dx-pix-key-value {
    color: #fff;
}

.dx-pix-key-name,
.dx-pix-key-value { display: block; }
.dx-pix-key-name { font-weight: 600; }
.dx-pix-key-value { color: var(--bs-secondary-color); font-family: 'JetBrains Mono', monospace; font-size: 12px; margin-top: 2px; }
.dx-customer-key {
    background: transparent;
    border: 1px solid var(--dx-primary);
    cursor: copy;
    color: var(--dx-primary-ink);
    font-family: 'JetBrains Mono', monospace;
    font-weight: 500;
}

.dx-customer-key:hover,
.dx-customer-key:focus-visible {
    background: var(--dx-primary);
    color: #fff;
}

.dx-customer-key-list { display: grid; gap: var(--dx-spacing-xs); }
.dx-customer-key-item {
    align-items: center;
    background: var(--dx-surface-elevated-dark);
    border: 1px solid var(--dx-hairline-on-dark);
    border-radius: var(--dx-rounded-sm);
    display: flex;
    gap: var(--dx-spacing-xs);
    justify-content: space-between;
    padding: var(--dx-spacing-xs);
}
.dx-customer-key-item .dx-customer-key { overflow-wrap: anywhere; text-align: left; white-space: normal; }
.dx-customer-key-remove { flex: 0 0 auto; }

#customersTable tbody tr.dx-clickable-row { cursor: pointer; }
#customersTable tbody tr.dx-clickable-row:focus-visible {
    outline: 2px solid var(--dx-primary);
    outline-offset: -2px;
}

/* Atalho de biometria na tela de login (US-003) e aviso de offline do PWA
   (US-021). Ambos são pontuais o bastante para não virarem componente. */
.dx-passkey-option {
    margin-top: 24px;
}

.dx-passkey-divider {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
    color: var(--dx-muted-strong);
    font-size: 13px;
}

.dx-passkey-divider::before,
.dx-passkey-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--dx-hairline-on-dark);
}

.dx-offline-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    padding: 24px;
    text-align: center;
}