/* Filters Section */

.filters-section {
    background: rgba(26, 26, 26, 0.6);
    backdrop-filter: blur(12px);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    padding: 28px;
    margin-bottom: 24px;
    display: grid;
    grid-template-columns: repeat(4, 1fr) auto;
    gap: 20px;
    align-items: end;
}

.filter-input option {
    background: var(--darker-bg);
}

.filter-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.filter-group label {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.filter-input {
    padding: 12px 16px;
    background: var(--darker-bg);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    color: var(--text-primary);
    font-size: 14px;
    font-family: 'Inter', sans-serif;
    transition: all 0.3s ease;
}

/* Estilos específicos para input date */
.filter-input[type="date"] {
    color-scheme: dark;
}
.filter-input[type="date"]::-webkit-calendar-picker-indicator {
    filter: invert(1);
    cursor: pointer;
    opacity: 0.7;
    transition: opacity 0.2s;
}

.filter-input[type="date"]::-webkit-calendar-picker-indicator:hover {
    opacity: 1;
}

.filter-input:focus {
    outline: none;
    border-color: var(--primary-color);
    background: rgba(var(--primary-rgb), 0.02);
    
}

.filter-actions {
    display: flex;
    gap: 12px;
}

.form-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap:20px; align-items: start; }
.gateway-options { display:flex; gap:12px; align-items:center; flex-wrap:wrap; }
.provider-cell { display:flex; align-items:center; gap:8px; }
.provider-icon { width:24px; height:24px; object-fit:contain; display:block; flex-shrink:0; }
.input-display { padding:12px 16px; background: var(--darker-bg); border:1px solid var(--border-color); border-radius:10px; color: var(--text-primary); font-size:14px; display:flex; align-items:center; gap:8px; min-height:42px; }

.btn-filter,
.btn-clear {
    padding: 12px 20px;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: all 0.3s ease;
    white-space: nowrap;
}

.btn-filter {
    background: var(--primary-color);
    color: #fff;
    border: none;
}

.btn-filter:hover {
    transform: translateY(-2px);
    
}

.btn-clear {
    background: rgba(255, 255, 255, 0.05);
    color: var(--text-secondary);
    border: 1px solid var(--border-color);
    text-decoration: none;
}

.btn-clear:hover {
    background: rgba(255, 255, 255, 0.08);
    color: var(--text-primary);
}

/* Table Section */
.table-section {
    background: rgba(26, 26, 26, 0.6);
    backdrop-filter: blur(12px);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    padding: 28px;
}

.table-container {
    overflow-x: auto;
    margin-bottom: 24px;
}

.table-container::-webkit-scrollbar {
    height: 6px;
}

.table-container::-webkit-scrollbar-track {
    background: transparent;
}

.table-container::-webkit-scrollbar-thumb {
    background: var(--primary-color);
    border-radius: 3px;
}

.transactions-table {
    width: 100%;
    border-collapse: collapse;
}

.transactions-table thead tr {
    border-bottom: 1px solid var(--border-color);
}

.transactions-table th {
    text-align: left;
    padding: 16px 12px;
    font-size: 11px;
    font-weight: 700;
    color: var(--text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.transactions-table tbody tr {
    border-bottom: 1px solid var(--border-color);
}

.transactions-table tbody tr:hover {
    background: rgba(255, 255, 255, 0.02);
}

.transactions-table td {
    padding: 18px 12px;
    font-size: 14px;
    color: var(--text-primary);
}

.td-value {
    font-weight: 600;
    font-size: 15px;
}

.td-taxa {
    color: var(--text-secondary);
    font-size: 14px;
}

.td-liquido {
    font-weight: 600;
    font-size: 15px;
    color: var(--primary-color);
}

.td-id {
    font-family: 'Courier New', monospace;
    font-size: 13px;
    color: var(--text-primary);
}

.td-e2e {
    font-family: 'Courier New', monospace;
    font-size: 12px;
    color: var(--text-secondary);
}

.td-secret { display:flex; align-items:center; gap:8px; }
.td-secret span { font-family: 'Courier New', monospace; font-size: 12px; color: var(--text-secondary); white-space: nowrap; }

/* Badge Status - adicionar expired */
.badge-expired {
    background: rgba(107, 114, 128, 0.12);
    color: #9ca3af;
}

/* Badge Types */
.badge-type {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
}

.badge-type i {
    font-size: 14px;
}
.extrato-flag-icon {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}

.badge-in {
    background: rgba(var(--primary-rgb), 0.12);
    color: var(--primary-color);
}

.badge-out {
    background: rgba(var(--danger-rgb), 0.12);
    color: var(--danger-color);
}

/* Badge Status */
.badge-status {
    display: inline-block;
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
}

.status-badges { display:flex; gap:8px; align-items:center; }
.email-cell { text-decoration: none; }
.email-cell a { text-decoration: none !important; color: var(--text-primary); pointer-events: none; }

.badge-confirmed {
    background: rgba(var(--primary-rgb), 0.12);
    color: var(--primary-color);
}

.badge-pending {
    background: rgba(245, 158, 11, 0.12);
    color: var(--warning-color);
}

.badge-canceled {
    background: rgba(var(--danger-rgb), 0.12);
    color: var(--danger-color);
}

/* Action Button */
.btn-action {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--border-color);
    color: var(--text-secondary);
    width: 36px;
    height: 36px;
    border-radius: 8px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.btn-action:hover {
    background: rgba(var(--primary-rgb), 0.1);
    border-color: var(--primary-color);
    color: var(--primary-color);
}

.btn-action i {
    font-size: 16px;
}

.actions-group { display:flex; align-items:center; justify-content:flex-end; gap:14px; }
.btn-approve { border-color: rgba(var(--primary-rgb), 0.5); }
.btn-refund { border-color: rgba(var(--danger-rgb), 0.5); }

/* KYC Viewer */
.doc-viewer { position: relative; display:flex; flex-direction:column; gap:12px; }
.doc-viewer-header { display:flex; align-items:center; justify-content:space-between; }
.doc-type-badge { padding:6px 10px; border:1px solid var(--border-color); border-radius:10px; font-weight:600; font-size:12px; color: var(--text-secondary); }
.doc-count { font-size:12px; color: var(--text-secondary); }
.doc-frame { width:100%; height:48vh; border:1px solid var(--border-color); border-radius:12px; overflow:hidden; background: rgba(255,255,255,0.02); }
.doc-frame iframe { width:100%; height:100%; border:0; }
.doc-image { width:100%; display:flex; align-items:center; justify-content:center; border:1px solid var(--border-color); border-radius:12px; background: rgba(255,255,255,0.02); height:48vh; overflow:hidden; }
.doc-img { max-width:100%; max-height:46vh; object-fit:contain; display:block; }
.doc-actions { display:flex; justify-content:flex-start; }
.doc-nav-btn { position:absolute; top:50%; transform: translateY(-50%); width:52px; height:52px; border:1px solid var(--primary-color); border-radius:14px; background: var(--teal-gradient); color: #000; display:flex; align-items:center; justify-content:center; cursor:pointer;  z-index: 2; opacity: 0.95; }
.doc-nav-btn i { font-size: 20px; }
.doc-nav-btn:hover { opacity: 1; transform: translateY(-50%) scale(1.05); }
.doc-nav-btn.prev { left:14px; }
.doc-nav-btn.next { right:14px; }

/* KYC modal actions visibility */
#kycModal .modal-actions { gap: 12px; flex-wrap: wrap; }
#kycModal #btnApprove { background: var(--primary-color); color:#fff; border:none; font-weight:700; height:44px; padding:0 16px; }
#kycModal #btnReject { background: rgba(var(--danger-rgb),0.18); border:1px solid rgba(var(--danger-rgb),0.5); color:var(--danger-color); font-weight:700; height:44px; padding:0 16px; }
#kycModal .btn-secondary { height:44px; padding:0 16px; font-weight:600; }

/* Pagination */
.pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.pagination-btn {
    min-width: 40px;
    height: 40px;
    padding: 0 12px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    color: var(--text-secondary);
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.pagination-btn:hover:not(:disabled) {
    background: rgba(255, 255, 255, 0.08);
    color: var(--text-primary);
    text-decoration: none;
}

.pagination-btn.active {
    background: var(--teal-gradient);
    border-color: var(--primary-color);
    color: #000;
}

.pagination-btn:disabled {
    opacity: 0.3;
    cursor: not-allowed;
}

/* Transaction Details Modal */
.modal-details {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.85);
    backdrop-filter: blur(8px);
    z-index: 3000;
    padding: 20px;
    overflow-y: auto;
}

.modal-details.active {
    display: flex;
    align-items: center;
    justify-content: center;
}

.modal-details-content {
    background: rgba(26, 26, 26, 0.98);
    backdrop-filter: blur(20px);
    border: 1px solid var(--border-color);
    border-radius: 20px;
    max-width: 600px;
    width: 100%;
    max-height: 90vh;
    overflow-y: auto;
    animation: modalSlideIn 0.3s ease;
}

@keyframes modalSlideIn {
    from {
        transform: translateY(30px) scale(0.95);
        opacity: 0;
    }
    to {
        transform: translateY(0) scale(1);
        opacity: 1;
    }
}

.modal-details-header {
    padding: 28px;
    border-bottom: 1px solid var(--border-color);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.modal-details-logo {
    display: flex;
    align-items: center;
    gap: 12px;
}

.modal-details-logo .logo-modal {
    height: 40px;
    width: auto;
    object-fit: contain;
}

.modal-details-logo .logo-icon {
    width: 48px;
    height: 48px;
}

.modal-details-logo span {
    font-size: 22px;
    font-weight: 700;
}

.modal-close-btn {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--border-color);
    color: var(--text-secondary);
    width: 40px;
    height: 40px;
    border-radius: 10px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.modal-close-btn:hover {
    background: rgba(239, 68, 68, 0.1);
    border-color: var(--danger-color);
    color: var(--danger-color);
}

.modal-details-body {
    padding: 28px;
}

.details-section {
    margin-bottom: 32px;
}

.details-section:last-child {
    margin-bottom: 0;
}

.details-section-title {
    font-size: 16px;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 20px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--border-color);
}

.details-row {
    display: flex;
    justify-content: space-between;
    padding: 14px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.03);
}

.details-row:last-child {
    border-bottom: none;
}

.details-label {
    font-size: 13px;
    color: var(--text-secondary);
    font-weight: 500;
}

.details-value {
    font-size: 14px;
    color: var(--text-primary);
    font-weight: 600;
    text-align: right;
    max-width: 60%;
    word-break: break-all;
}

.details-value.success {
    color: var(--primary-color);
}

.details-value.danger {
    color: var(--danger-color);
}

.details-info {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 16px;
    margin-top: 16px;
}

.details-info p {
    font-size: 12px;
    color: var(--text-secondary);
    line-height: 1.6;
    margin: 0;
}

.modal-details-footer {
    padding: 20px 28px;
    border-top: 1px solid var(--border-color);
    display: flex;
    gap: 12px;
}

.btn-modal-action {
    flex: 1;
    padding: 14px;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: all 0.3s ease;
}

.btn-modal-close {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--border-color);
    color: var(--text-secondary);
}

.btn-modal-close:hover {
    background: rgba(255, 255, 255, 0.08);
    color: var(--text-primary);
}

.btn-modal-print {
    background: var(--teal-gradient);
    border: none;
    color: #000;
}

.btn-modal-print:hover {
    transform: translateY(-2px);

}

/* ============================================================
   Comprovante PIX — modal ESPELHA 1:1 o comprovante baixado
   (#receiptTicket). Paleta FIXA escura (premium), independente
   do tema claro/escuro do dashboard — o card sempre parece o
   mesmo PNG baixado. Fonte única: estas classes .np-receipt*
   são usadas por extrato.php (cliente) e transacoes.php (admin).
   ------------------------------------------------------------
   Paleta canônica (mesma do #receiptTicket inline):
     card bg ............ #000000
     card border ........ rgba(255,255,255,0.08)
     texto/valor ........ #eef4fb
     muted (labels) ..... #9baabd
     muted-2 (ref/foot).. #708197
     kicker ............. #96a5b8
     divisor ............ rgba(90,109,139,0.28)
   ============================================================ */
.np-receipt-modal .modal-details-content.np-receipt {
    position: relative;
    max-width: 452px;
    width: 100%;
    background: #000000;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 22px;
    box-shadow: 0 24px 70px rgba(0, 0, 0, 0.55);
    /* card vira coluna flex com altura limitada: o BODY rola e o FOOTER
       fica fixo embaixo. overflow:hidden no card recorta só os cantos
       arredondados — quem rola é o .np-receipt-body. */
    display: flex;
    flex-direction: column;
    max-height: 92vh; /* fallback p/ browsers sem dvh */
    max-height: calc(100dvh - 40px);
    overflow: hidden;
    color: #eef4fb;
}

.np-receipt-modal .np-receipt-close,
body.wt-layout .np-receipt-modal .np-receipt-close {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 34px;
    height: 34px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: #9baabd;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 13px;
    z-index: 3;
    transition: all 0.2s ease;
}
.np-receipt-modal .np-receipt-close:hover,
body.wt-layout .np-receipt-modal .np-receipt-close:hover {
    color: #eef4fb;
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(255, 255, 255, 0.2);
}

.np-receipt-modal .modal-details-body.np-receipt-body {
    padding: 34px 38px 28px;
    /* região rolável: cresce com o conteúdo (ex.: expandir Detalhes técnicos)
       e rola dentro do card, mantendo o footer sempre visível embaixo */
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
}

.np-receipt-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 42px;
}
.np-receipt-logo {
    height: 34px;
    max-width: 170px;
    object-fit: contain;
}
.np-receipt-ref {
    font-size: 11px;
    line-height: 1.2;
    font-weight: 500;
    letter-spacing: 0.02em;
    color: #708197;
    word-break: break-all;
    text-align: right;
    /* deixa respiro pro botão de fechar no canto */
    margin-right: 42px;
}

.np-receipt-kicker {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: #96a5b8;
    margin-bottom: 10px;
}

.np-receipt-hero {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 30px;
}
.np-receipt-amount {
    font-size: 38px;
    line-height: 1.05;
    font-weight: 800;
    letter-spacing: -0.03em;
    color: #eef4fb;
    font-variant-numeric: tabular-nums;
}
.np-receipt-when {
    font-size: 12px;
    font-weight: 500;
    color: #93a3b8;
}

.np-receipt-divider {
    height: 1px;
    background: rgba(90, 109, 139, 0.28);
    margin: 22px 0 18px;
}

.np-receipt-section-title {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: #9baabd;
    margin-bottom: 8px;
}

.np-receipt-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 18px;
    padding: 8px 0;
}
.np-receipt-k {
    font-size: 13px;
    font-weight: 500;
    color: #9baabd;
    flex-shrink: 0;
}
.np-receipt-v {
    font-size: 13px;
    font-weight: 700;
    color: #eef4fb;
    text-align: right;
    word-break: break-word;
}
.np-receipt-v.danger { color: #ff8a8a; }
.np-receipt-v.success { color: #8ce0b0; }
.np-receipt-v.np-receipt-code {
    font-size: 11px;
    font-weight: 600;
    word-break: break-all;
    max-width: 228px;
}

.np-receipt-party { display: block; }

.np-receipt-footer {
    text-align: center;
    font-size: 11px;
    font-weight: 500;
    color: #91a0b3;
}

/* ------------------------------------------------------------
   Footer de ações do comprovante — nunca quebra/sobrepõe.
   Layout: linha de botões com flex-wrap; cada botão tem
   largura mínima; em telas estreitas empilham full-width.
   O expander "Detalhes técnicos (admin)" fica numa linha
   FULL-WIDTH ACIMA (dentro do body), não compete inline aqui.
   ------------------------------------------------------------ */
.np-receipt-modal .modal-details-footer.np-receipt-actions {
    /* respiro embaixo: nunca cola os botões na borda do card; no mobile
       soma o safe-area-inset p/ limpar a barra/notch inferior do aparelho
       (em desktop o inset é 0, então fica em 22px) */
    padding: 16px 30px 22px;
    padding-bottom: calc(22px + env(safe-area-inset-bottom, 0px));
    border-top: 1px solid rgba(90, 109, 139, 0.28);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    background: #000000;
    /* footer fixo no rodapé do card: nunca some quando o body rola */
    flex: 0 0 auto;
    position: sticky;
    bottom: 0;
    z-index: 2;
}
/* grupo de ações admin (Aprovar/Recusar/Ativar MED) injetado por JS —
   ocupa uma LINHA inteira acima de Fechar/Comprovante */
.np-receipt-modal .np-receipt-actions .modal-action-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    flex: 1 1 100%;
    width: 100%;
    min-width: 0;
}
/* sem botões injetados (ex.: extrato cliente / sem MED): não reserva linha/gap */
.np-receipt-modal .np-receipt-actions .modal-action-buttons:empty {
    display: none;
}
/* Fechar + Comprovante — linha própria, dividem o espaço lado a lado */
.np-receipt-modal .np-receipt-actions .modal-footer-right {
    display: flex;
    flex-wrap: nowrap;
    gap: 10px;
    align-items: stretch;
    flex: 1 1 100%;
    width: 100%;
}
/* botões base do comprovante (mono/premium) */
.np-receipt-modal .np-receipt-actions .btn-modal-action,
.np-receipt-modal .np-receipt-actions .btn-modal-close,
.np-receipt-modal .np-receipt-actions .btn-modal-print {
    flex: 1 1 0;
    min-width: 0;
    min-height: 48px;
    padding: 13px 16px;
    border-radius: 12px;
    font-size: 13.5px;
    font-weight: 700;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    white-space: nowrap;
    transition: filter 0.15s ease, background 0.15s ease, transform 0.08s ease;
}
.np-receipt-modal .np-receipt-actions .btn-modal-action i,
.np-receipt-modal .np-receipt-actions .btn-modal-close i,
.np-receipt-modal .np-receipt-actions .btn-modal-print i { font-size: 14px; }
/* Fechar — ghost claro sobre o card preto */
.np-receipt-modal .np-receipt-actions .btn-modal-close,
.np-receipt-modal .np-receipt-actions .btn-modal-action.btn-modal-close {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.16);
    color: #d7e0ec;
}
.np-receipt-modal .np-receipt-actions .btn-modal-close:hover,
.np-receipt-modal .np-receipt-actions .btn-modal-action.btn-modal-close:hover {
    background: rgba(255, 255, 255, 0.12);
    color: #ffffff;
    transform: none;
}
/* Baixar Comprovante — primário claro (alto contraste no preto) */
.np-receipt-modal .np-receipt-actions .btn-modal-print,
.np-receipt-modal .np-receipt-actions .btn-modal-action.btn-modal-print {
    background: #eef4fb;
    border: 1px solid #eef4fb;
    color: #000000;
}
.np-receipt-modal .np-receipt-actions .btn-modal-print:hover,
.np-receipt-modal .np-receipt-actions .btn-modal-action.btn-modal-print:hover {
    filter: brightness(0.94);
    transform: none;
    background: #ffffff;
    border-color: #ffffff;
}
/* Ativar MED (admin) — danger/amber, full-width no grupo de ações.
   min-height igual aos botões Fechar/Comprovante para um botão sólido,
   não uma barra fina. */
.np-receipt-modal .np-receipt-actions .modal-action-buttons .wt-mbtn {
    height: auto;
    min-height: 48px;
    flex: 1 1 100%;
    min-width: 0;
    padding: 13px 16px;
    border-radius: 12px;
    border: 1px solid transparent;
    font-weight: 800;
    font-size: 13.5px;
    line-height: 1.2;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    white-space: nowrap;
    transition: filter 0.15s, transform 0.08s;
}
.np-receipt-modal .np-receipt-actions .modal-action-buttons .wt-mbtn i { font-size: 14px; }
.np-receipt-modal .np-receipt-actions .modal-action-buttons .wt-mbtn:hover { filter: brightness(1.06); transform: none; }
.np-receipt-modal .np-receipt-actions .modal-action-buttons .wt-mbtn:active { transform: scale(0.97); }
.np-receipt-modal .np-receipt-actions .modal-action-buttons .wt-mbtn-approve { background: #22c55e; color: #052e16; }
.np-receipt-modal .np-receipt-actions .modal-action-buttons .wt-mbtn-reject  { background: #ef4444; color: #fff; }
.np-receipt-modal .np-receipt-actions .modal-action-buttons .wt-mbtn-med     { background: #f59e0b; color: #3b1d00; }

@media (max-width: 520px) {
    /* no mobile o overlay encosta o card no topo e deixa rolar com margem
       pequena — não trava centralizado mais alto que a viewport */
    .np-receipt-modal.modal-details { padding: 12px; }
    .np-receipt-modal.modal-details.active { align-items: flex-start; }
    .np-receipt-modal .modal-details-content.np-receipt {
        max-height: 95vh; /* fallback */
        max-height: calc(100dvh - 24px);
    }
    .np-receipt-modal .modal-details-body.np-receipt-body { padding: 26px 22px 20px; }
    .np-receipt-modal .modal-details-footer.np-receipt-actions {
        padding: 14px 20px 20px;
        /* respiro inferior + safe-area p/ limpar a barra do celular */
        padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px));
    }
    .np-receipt-amount { font-size: 32px; }
    .np-receipt-top { margin-bottom: 32px; }
    .np-receipt-v.np-receipt-code { max-width: 150px; }
}
/* Apenas em mobile real: empilha Fechar/Comprovante em coluna */
@media (max-width: 380px) {
    .np-receipt-modal .np-receipt-actions .modal-footer-right { flex-wrap: wrap; }
    .np-receipt-modal .np-receipt-actions .btn-modal-action,
    .np-receipt-modal .np-receipt-actions .btn-modal-close,
    .np-receipt-modal .np-receipt-actions .btn-modal-print {
        flex: 1 1 100%;
        width: 100%;
    }
}

/* Responsive */
@media (max-width: 1200px) {
    .filters-section {
        grid-template-columns: 1fr 1fr;
    }

    .filter-actions {
        grid-column: 1 / -1;
    }
}

@media (max-width: 968px) {
    .form-grid-2 { grid-template-columns: 1fr; }

    .table-section {
        padding: 16px;
    }

    .transactions-table {
        font-size: 13px;
    }

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

    .badge-type,
    .badge-status {
        font-size: 11px;
        padding: 5px 10px;
    }

    .td-e2e {
        font-size: 10px;
        max-width: 120px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .td-value,
    .td-liquido,
    .td-taxa { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .td-secret span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .td-money { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
}

/* ========================================
   CORREÇÃO MOBILE - ESPECIFICIDADE MÁXIMA
   ======================================== */
@media only screen and (max-width: 768px) {
    /* REMOVER GRID COMPLETAMENTE */
    section.filters-section,
    .filters-section {
        display: flex !important;
        flex-direction: column !important;
        grid-template-columns: none !important;
        gap: 12px !important;
        padding: 16px !important;
        overflow: visible !important;
        align-items: stretch !important;
    }

    /* GRUPOS DE FILTRO */
    section.filters-section .filter-group,
    .filters-section .filter-group,
    .filter-group {
        display: flex !important;
        flex-direction: column !important;
        gap: 6px !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
        flex-shrink: 0 !important;
    }

    /* LABELS */
    section.filters-section .filter-group label,
    .filters-section .filter-group label,
    .filter-group label {
        font-size: 11px !important;
        margin: 0 !important;
        padding: 0 !important;
        width: 100% !important;
    }

    /* INPUTS - MÁXIMA ESPECIFICIDADE */
    section.filters-section .filter-group input.filter-input,
    section.filters-section .filter-group .filter-input,
    .filters-section .filter-group input.filter-input,
    .filters-section .filter-group .filter-input,
    .filter-group input.filter-input,
    .filter-group .filter-input,
    input.filter-input[type="date"],
    input.filter-input[type="text"],
    .filter-input {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        padding: 10px 12px !important;
        font-size: 14px !important;
        box-sizing: border-box !important;
        -webkit-appearance: none !important;
        -moz-appearance: none !important;
        appearance: none !important;
        flex-shrink: 0 !important;
        margin: 0 !important;
    }

    /* SELECTS */
    section.filters-section .filter-group select.filter-input,
    .filters-section .filter-group select.filter-input,
    .filter-group select.filter-input,
    select.filter-input,
    select.select-per-page {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        padding: 10px 12px !important;
        padding-right: 36px !important;
        font-size: 14px !important;
        box-sizing: border-box !important;
        -webkit-appearance: none !important;
        -moz-appearance: none !important;
        appearance: none !important;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%2394a3b8' d='M6 9L1 4h10z'/%3E%3C/svg%3E") !important;
        background-repeat: no-repeat !important;
        background-position: right 12px center !important;
        flex-shrink: 0 !important;
        margin: 0 !important;
    }

    /* Autocomplete de conta é o input primário no mobile (select nativo legado removido) */
    .filter-acc-recv-auto {
        display: block !important;
        visibility: visible !important;
        width: 100% !important;
    }

    /* AÇÕES */
    section.filters-section .filter-actions,
    .filters-section .filter-actions,
    .filter-actions {
        display: flex !important;
        flex-direction: row !important;
        gap: 8px !important;
        width: 100% !important;
        margin-top: 6px !important;
        grid-column: auto !important;
    }

    /* BOTÕES */
    .filter-actions button.btn-filter,
    .filter-actions button.btn-clear,
    button.btn-filter,
    button.btn-clear,
    .btn-filter,
    .btn-clear {
        flex: 1 !important;
        width: auto !important;
        padding: 11px 14px !important;
        font-size: 13px !important;
        box-sizing: border-box !important;
        justify-content: center !important;
        margin: 0 !important;
    }
}

/* TELAS MUITO PEQUENAS */
@media only screen and (max-width: 360px) {
    section.filters-section,
    .filters-section {
        padding: 12px !important;
        gap: 10px !important;
    }

    input.filter-input,
    select.filter-input,
    .filter-input {
        padding: 9px 11px !important;
        font-size: 13px !important;
    }

    button.btn-filter,
    button.btn-clear,
    .btn-filter,
    .btn-clear {
        padding: 10px 12px !important;
        font-size: 12px !important;
    }
}

@media (max-width: 640px) {
    .stats-grid {
        grid-template-columns: 1fr 1fr;
        gap: 10px;
    }
    
    .stat-card {
        padding: 16px 12px;
    }
    
    .stat-icon {
        width: 40px;
        height: 40px;
    }
    
    .stat-icon i {
        font-size: 20px;
    }
    
    .stat-label {
        font-size: 11px;
    }
    
    .stat-value {
        font-size: 18px;
    }

    .table-section {
        padding: 12px;
        border-radius: 12px;
    }

    .table-container {
        margin-bottom: 20px;
    }

    .transactions-table th {
        font-size: 10px;
        padding: 12px 6px;
    }

    .transactions-table td {
        font-size: 12px;
        padding: 12px 6px;
    }

    .td-value,
    .td-debito,
    .td-taxa {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .td-money { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

    .badge-type i,
    .badge-status {
        font-size: 10px;
    }
    .td-secret span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

    .pagination-btn {
        min-width: 36px;
        height: 36px;
        font-size: 13px;
    }
    .status-badges { flex-direction: column; align-items: flex-start; gap:6px; }
}

.transactions-table.no-lines tbody tr {
    border-bottom: none;
}

.td-money { white-space: nowrap; text-align: right; }

body.wt-layout .wt-extrato-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    margin: 10px 0 18px;
}

body.wt-layout .wt-extrato-title {
    display: flex;
    align-items: center;
    gap: 14px;
}

body.wt-layout .wt-extrato-icon {
    width: 46px;
    height: 46px;
    border-radius: 13px;
    background: var(--np-confirm-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--np-confirm-fg);
    flex: 0 0 auto;
}

body.wt-layout .wt-extrato-icon i {
    font-size: 21px;
}

body.wt-layout .wt-extrato-icon img {
    width: 26px;
    height: 26px;
    object-fit: contain;
    display: block;
}
body.wt-layout .wt-extrato-h1 {
    font-size: 22px;
    font-weight: 800;
    color: var(--np-text-on-surface);
    margin: 0;
    letter-spacing: -0.4px;
}

body.wt-layout .wt-extrato-sub {
    margin-top: 2px;
    font-size: 13px;
    font-weight: 600;
    color: var(--np-muted-on-surface);
}

body.wt-layout .wt-extrato-pills {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

body.wt-layout .wt-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 36px;
    padding: 0 14px;
    border-radius: 999px;
    border: 1px solid #e5e7eb;
    background: #ffffff;
    color: #111827;
    text-decoration: none;
    font-weight: 900;
    font-size: 13px;
    white-space: nowrap;
    cursor: pointer;
}

body.wt-layout .wt-pill:hover {
    background: #f3f4f6;
}

body.wt-layout .wt-pill.active {
    background: #0b0f19;
    color: #ffffff;
    border-color: #0b0f19;
}

body.wt-layout .wt-pill-dark {
    background: #0b0f19;
    color: #ffffff;
    border-color: #0b0f19;
}

body.wt-layout .wt-adv-trigger.is-open {
    background: #0b0f19;
    color: #ffffff;
    border-color: #0b0f19;
}

body.wt-layout .wt-adv-trigger.is-open:hover {
    background: #111827;
}

body.wt-layout .wt-advanced-panel {
    display: none;
    width: 100%;
}

body.wt-layout .wt-advanced-panel.is-open {
    display: block;
}

body.wt-layout .wt-advanced-panel .wt-advanced-card {
    margin: 12px 0 18px;
    width: 100%;
}

body.wt-layout .wt-advanced summary {
    list-style: none;
}

body.wt-layout .wt-advanced summary::-webkit-details-marker {
    display: none;
}

body.wt-layout .wt-advanced[open] > summary {
    background: #111827;
}

body.wt-layout .wt-advanced-card {
    margin: 12px auto 18px;
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 16px;
    box-shadow: 0 18px 40px rgba(15, 23, 42, 0.08);
    padding: 16px;
    width: min(980px, 100%);
}

body.wt-layout .wt-advanced-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

body.wt-layout .wt-field {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
}

body.wt-layout .wt-field span {
    font-size: 12px;
    font-weight: 900;
    color: #0f172a;
}

body.wt-layout .wt-field input,
body.wt-layout .wt-field select {
    height: 40px;
    padding: 0 12px;
    border-radius: 12px;
    border: 1px solid #e5e7eb;
    background: #f8fafc;
    color: #0f172a;
    font-weight: 800;
    font-size: 13px;
}

body.wt-layout .wt-field input:focus,
body.wt-layout .wt-field select:focus {
    outline: none;
    border-color: #111827;
    background: #ffffff;
}

body.wt-layout .wt-field-wide {
    grid-column: 1 / -1;
}

body.wt-layout .wt-advanced-actions {
    margin-top: 12px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
}

body.wt-layout .wt-adv-clear {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #334155;
    text-decoration: none;
    font-weight: 900;
    font-size: 13px;
}

body.wt-layout .wt-adv-clear:hover {
    text-decoration: underline;
}

body.wt-layout .wt-adv-apply {
    height: 42px;
    padding: 0 16px;
    border-radius: 999px;
    border: 1px solid #2563eb;
    background: #2563eb;
    color: #ffffff;
    font-weight: 900;
    font-size: 13px;
    cursor: pointer;
}

body.wt-layout .wt-adv-apply:hover {
    background: #1d4ed8;
    border-color: #1d4ed8;
}

body.wt-layout .wt-extrato-stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
    margin: 0 0 18px;
}

body.wt-layout .wt-extrato-stat {
    min-height: 0;
    padding: 18px;
}

body.wt-layout .wt-extrato-stat-label {
    font-size: 12px;
    font-weight: 900;
    color: #6b7280;
}

body.wt-layout .wt-extrato-stat-value {
    margin-top: 10px;
    font-size: 28px;
    font-weight: 900;
    color: #0f172a;
}

body.wt-layout .wt-extrato-stat-sub {
    margin-top: 8px;
    font-size: 13px;
    font-weight: 800;
    color: #6b7280;
}

body.wt-layout .wt-extrato-table {
    padding: 0;
    overflow: hidden;
}

body.wt-layout .wt-extrato-table .table-container {
    margin: 0;
}

body.wt-layout .transactions-table thead tr {
    border-bottom: 1px solid #e5e7eb;
}

body.wt-layout .transactions-table th {
    color: #6b7280;
    font-size: 11px;
    font-weight: 900;
}

body.wt-layout .transactions-table td {
    color: #0f172a;
}

body.wt-layout .transactions-table tbody tr {
    border-bottom: 1px solid #eef2f7;
}

body.wt-layout .transactions-table tbody tr:hover {
    background: #f8fafc;
}

body.wt-layout .td-e2e {
    color: #64748b;
}

body.wt-layout .btn-action {
    background: #ffffff;
    border: 1px solid #e5e7eb;
    color: #334155;
}

body.wt-layout .btn-action:hover {
    background: #f3f4f6;
    border-color: #d1d5db;
    color: #0f172a;
}

/* Modal refinado (padrão claro) */
body.wt-layout .modal-details {
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(8px);
}

body.wt-layout .modal-details-content {
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 16px;
    box-shadow: 0 24px 56px rgba(15, 23, 42, 0.18);
    color: #0f172a;
}

body.wt-layout .modal-details-header {
    padding: 18px;
    border-bottom: 1px solid #e5e7eb;
}

body.wt-layout .modal-details-logo .logo-modal {
    height: 28px;
}

body.wt-layout .modal-close-btn {
    background: #ffffff;
    border: 1px solid #e5e7eb;
    color: #6b7280;
    border-radius: 10px;
}

body.wt-layout .modal-close-btn:hover {
    background: #f3f4f6;
    border-color: #d1d5db;
    color: #111827;
}

body.wt-layout .modal-details-body {
    padding: 18px;
}

body.wt-layout .details-section-title {
    color: #0f172a;
    border-bottom: 1px solid #e5e7eb;
}

body.wt-layout .details-row {
    border-bottom: 1px solid #eef2f7;
}

body.wt-layout .details-label {
    color: #6b7280;
}

body.wt-layout .details-value {
    color: #0f172a;
}

body.wt-layout .details-value.success { color: #0f766e; }
body.wt-layout .details-value.danger { color: #b91c1c; }

body.wt-layout .modal-details-footer {
    border-top: 1px solid #e5e7eb;
}

body.wt-layout .btn-modal-close {
    background: #ffffff;
    border: 1px solid #e5e7eb;
    color: #334155;
}

body.wt-layout .btn-modal-close:hover {
    background: #f3f4f6;
    color: #111827;
}

body.wt-layout .btn-modal-print {
    background: var(--np-confirm-bg);
    border: 1px solid var(--np-confirm-border);
    color: var(--np-confirm-fg);
}

body.wt-layout .btn-modal-print:hover {
    transform: none;
    background: var(--np-confirm-hover-bg);
    border-color: var(--np-confirm-hover-border);
}
body.wt-layout .badge-status.badge-confirmed {
    background: var(--st-ok-bg);
    border: 1px solid var(--st-ok-border);
    color: var(--st-ok-fg);
}
body.wt-layout .badge-status.badge-pending {
    background: var(--st-warn-bg);
    border: 1px solid var(--st-warn-border);
    color: var(--st-warn-fg);
}

/* Tipo de pagamento no extrato: manter cores semanticas tambem no tema escuro. */
body.wt-layout .badge-type.type-ok,
html[data-theme="dark"] body.wt-layout .badge-type.type-ok {
    background: var(--st-ok-bg) !important;
    border: 1px solid var(--st-ok-border) !important;
    color: var(--st-ok-fg) !important;
}

body.wt-layout .badge-type.type-pending,
html[data-theme="dark"] body.wt-layout .badge-type.type-pending {
    background: var(--st-warn-bg) !important;
    border: 1px solid var(--st-warn-border) !important;
    color: var(--st-warn-fg) !important;
}

body.wt-layout .badge-type.type-fail,
html[data-theme="dark"] body.wt-layout .badge-type.type-fail {
    background: var(--st-bad-bg) !important;
    border: 1px solid var(--st-bad-border) !important;
    color: var(--st-bad-fg) !important;
}

body.wt-layout .badge-type.type-split,
html[data-theme="dark"] body.wt-layout .badge-type.type-split {
    background: rgba(124, 58, 237, 0.14) !important;
    border: 1px solid rgba(124, 58, 237, 0.38) !important;
    color: #7c3aed !important;
}
body.wt-layout .badge-status.badge-canceled {
    background: var(--st-bad-bg);
    border: 1px solid var(--st-bad-border);
    color: var(--st-bad-fg);
}
body.wt-layout .badge-status.badge-expired {
    background: var(--st-bad-bg);
    border: 1px solid var(--st-bad-border);
    color: var(--st-bad-fg);
}

body.wt-layout .badge-type.badge-in {
    background: var(--np-surface-alt);
    border: 1px solid var(--np-surface-alt-border);
    color: var(--np-muted-on-surface);
}
body.wt-layout .badge-type.badge-out {
    background: var(--np-surface-alt);
    border: 1px solid var(--np-surface-alt-border);
    color: var(--np-muted-on-surface);
}
body.wt-layout .badge-type.badge-med {
    background: var(--np-surface-alt);
    border: 1px solid var(--np-surface-alt-border);
    color: var(--np-muted-on-surface);
}

/* Variantes sem prefixo "badge-status"/"badge-type" (usadas em transacoes.php) */
body.wt-layout .badge-confirmed {
    background: var(--st-ok-bg);
    border: 1px solid var(--st-ok-border);
    color: var(--st-ok-fg);
}
body.wt-layout .badge-pending {
    background: var(--st-warn-bg);
    border: 1px solid var(--st-warn-border);
    color: var(--st-warn-fg);
}
body.wt-layout .badge-canceled,
body.wt-layout .badge-expired {
    background: var(--st-bad-bg);
    border: 1px solid var(--st-bad-border);
    color: var(--st-bad-fg);
}
body.wt-layout .badge-in,
body.wt-layout .badge-out,
body.wt-layout .badge-med {
    background: var(--np-surface-alt);
    border: 1px solid var(--np-surface-alt-border);
    color: var(--np-muted-on-surface);
}

/* Ações: hover/variants sempre neutros */
body.wt-layout .btn-action:hover {
    background: var(--np-hover-surface);
    border-color: var(--np-surface-border);
    color: var(--np-text-on-surface);
}
body.wt-layout .btn-approve,
body.wt-layout .btn-refund {
    border-color: var(--np-surface-border);
}

body.wt-layout .wt-extrato-pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    padding: 16px 16px 0;
}

body.wt-layout .wt-page-btn {
    min-width: 40px;
    height: 40px;
    padding: 0 12px;
    border-radius: 10px;
    border: 1px solid #e5e7eb;
    background: #ffffff;
    color: #334155;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    font-weight: 900;
    font-size: 13px;
}

body.wt-layout .wt-page-btn:hover {
    background: #f3f4f6;
}

body.wt-layout .wt-page-btn.is-active {
    background: #0b0f19;
    border-color: #0b0f19;
    color: #ffffff;
}

body.wt-layout .wt-page-btn.is-disabled {
    opacity: 0.4;
}

body.wt-layout .wt-page-info {
    padding: 10px 16px 16px;
    color: #94a3b8;
    font-size: 12px;
    font-weight: 800;
    text-align: center;
}

@media (max-width: 980px) {
    body.wt-layout .wt-advanced-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    body.wt-layout .wt-field-wide {
        grid-column: span 2;
    }
}

@media (max-width: 720px) {
    body.wt-layout .wt-extrato-stats {
        grid-template-columns: 1fr;
    }
    body.wt-layout .wt-advanced-grid {
        grid-template-columns: 1fr;
    }
    body.wt-layout .wt-field-wide {
        grid-column: span 1;
    }
}

@media (max-width: 960px) {
    body.wt-layout .wt-nav-extra {
        display: inline-flex;
    }
    body.wt-layout .wt-action-gerente,
    body.wt-layout .wt-action-config {
        display: none;
    }
}

/* Modal action buttons - transaction approve/reject/complete */
body.wt-layout #modalActionBtns .btn-modal-approve {
    height: 40px; padding: 0 18px; border-radius: 10px; border: none;
    background: #22c55e; color: #fff; font-weight: 700; font-size: 13px;
    cursor: pointer; display: inline-flex; align-items: center; gap: 6px;
}
body.wt-layout #modalActionBtns .btn-modal-approve:hover { background: #16a34a; }
body.wt-layout #modalActionBtns .btn-modal-reject {
    height: 40px; padding: 0 18px; border-radius: 10px; border: none;
    background: #ef4444; color: #fff; font-weight: 700; font-size: 13px;
    cursor: pointer; display: inline-flex; align-items: center; gap: 6px;
}
body.wt-layout #modalActionBtns .btn-modal-reject:hover { background: #dc2626; }
body.wt-layout #modalActionBtns .btn-modal-complete {
    height: 40px; padding: 0 18px; border-radius: 10px; border: none;
    background: #6366f1; color: #fff; font-weight: 700; font-size: 13px;
    cursor: pointer; display: inline-flex; align-items: center; gap: 6px;
}
body.wt-layout #modalActionBtns .btn-modal-complete:hover { background: #4f46e5; }
body.wt-layout #modalActionBtns button:active { transform: scale(0.96); }
body.wt-layout .modal-details-footer {
    display: flex; align-items: center; justify-content: space-between;
    padding: 16px 24px; border-top: 1px solid var(--np-border);
    gap: 12px; flex-wrap: wrap;
}
body.wt-layout .modal-action-buttons { display: flex; gap: 10px; flex-wrap: wrap; }
body.wt-layout .modal-footer-right { display: flex; gap: 8px; align-items: center; }

/* Modal footer - mobile responsive */
@media (max-width: 600px) {
    body.wt-layout .modal-details-footer {
        flex-direction: column;
        align-items: stretch;
        padding: 14px 16px;
        gap: 10px;
    }
    body.wt-layout .modal-action-buttons {
        display: flex;
        flex-direction: column;
        gap: 8px;
        width: 100%;
    }
    body.wt-layout .modal-action-buttons button {
        width: 100% !important;
        justify-content: center !important;
    }
    body.wt-layout .modal-footer-right {
        display: flex;
        gap: 8px;
        width: 100%;
    }
    body.wt-layout .modal-footer-right .btn-modal-close,
    body.wt-layout .modal-footer-right .btn-modal-print {
        flex: 1;
        justify-content: center;
    }
    body.wt-layout .modal-details-content {
        max-height: 95vh;
        border-radius: 14px;
    }
    body.wt-layout .modal-details {
        padding: 10px;
    }
    body.wt-layout .modal-details-body {
        padding: 14px;
    }
}