/* Layout compacto — menos margens laterais e entre cards */

/* Header transparente */
.app-header {
  background: transparent !important;
  background-color: transparent !important;
  border-block-end: none !important;
  box-shadow: none !important;
}

/* Header fixo — conteúdo mais próximo com header transparente */
.main-content.app-content {
  padding-top: 0 !important;
}

@media (max-width: 991.98px) {
  .main-content.app-content {
    margin-top: 3.875rem !important;
    margin-block-start: 3.875rem !important;
    padding-top: 0 !important;
  }
}

@media (min-width: 992px) {
  .main-content.app-content {
    margin-block-start: 3.875rem !important;
    padding-top: 0 !important;
  }
}

.main-content .container-fluid {
  padding: 0.375rem 0.875rem 0.75rem !important;
}

@media (min-width: 992px) {
  .main-content .container-fluid {
    padding: 0.5rem 1rem 0.875rem !important;
  }
}

@media (max-width: 767.98px) {
  .main-content .container-fluid {
    padding: 0.25rem 0.75rem 0.625rem !important;
  }

  /* Card BRL / wallet — mobile */
  .wallet-tabs-widget {
    border-radius: 12px;
    overflow: visible !important;
  }

  .wallet-tabs-header {
    padding: 10px 12px 0 !important;
    border-radius: 12px 12px 0 0;
  }

  .wallet-tab-btn {
    padding: 8px 14px !important;
    font-size: 0.8125rem !important;
  }

  .wallet-card {
    border-radius: 0 0 12px 12px !important;
  }

  .wallet-pane-inner {
    padding: 1rem 1rem 1.125rem !important;
  }

  .wallet-balance-display .wallet-amount-main {
    font-size: 1.75rem !important;
  }

  .wallet-pane-top {
    gap: 0.5rem;
  }

  .wallet-extrato-link {
    font-size: 0.75rem;
    white-space: nowrap;
  }

  .shortcut-item {
    flex: 0 0 68px !important;
    max-width: 68px !important;
  }

  .shortcut-icon {
    width: 52px !important;
    height: 52px !important;
    font-size: 1.15rem !important;
  }

  .shortcut-card {
    gap: 6px !important;
    padding: 0 !important;
  }

  .shortcut-label {
    font-size: 0.625rem !important;
  }
}

.main-content .container-fluid.pt-4,
.main-content .container-fluid.pt-3 {
  padding-top: 0.75rem !important;
}

.page-header-breadcrumb {
  margin-bottom: 0.75rem !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

.main-content .row {
  --bs-gutter-x: 0.625rem;
  --bs-gutter-y: 0.625rem;
}

.main-content .row > [class*="col-"] {
  margin-bottom: 0;
}

.card.custom-card {
  border-radius: 12px;
  box-shadow: 0 1px 4px rgba(15, 23, 42, 0.06);
  margin-bottom: 0;
}

.card.custom-card .card-body {
  padding: 1rem 1.125rem !important;
}

.card.custom-card .card-header {
  padding: 0.875rem 1.125rem 0 !important;
}

.shortcuts-section {
  margin-top: 0.5rem !important;
  margin-bottom: 0.25rem !important;
  padding-top: 0 !important;
}

.home-movimentacoes-row {
  margin-top: 0.75rem !important;
}

.home-latest-tx-row {
  margin-top: 1.25rem !important;
}

.shortcuts-grid {
  gap: 8px !important;
  padding: 0 0 2px !important;
}

.wallet-tabs-widget {
  margin-bottom: 0 !important;
  margin-top: 0 !important;
}

.home-info-grid {
  margin-top: 0.75rem !important;
  margin-bottom: 0.5rem !important;
}

.wallet-tabs-header {
  padding: 10px 16px 0 !important;
}

.saque-page-wrap {
  max-width: none !important;
  margin: 0 !important;
}

/* Botão Transferir / CTAs acima da barra mobile fixa */
@media (max-width: 991.98px) {
  .saque-page-wrap {
    padding-bottom: 1rem;
  }

  .saque-card #input-button,
  .saque-card .btn-lg.w-100 {
    margin-bottom: 0.75rem;
  }
}

.saque-card .card-body {
  padding: 1.125rem 1.25rem !important;
}

.saque-card-title {
  margin-bottom: 1rem !important;
}

.main-content .row + .row {
  margin-top: 0.625rem;
}

.main-content .mb-4 {
  margin-bottom: 0.75rem !important;
}

.main-content .mb-3 {
  margin-bottom: 0.625rem !important;
}

/* Dark mode: preto mais claro (#1e1e1e) */
html[data-theme-mode="dark"] body,
html[data-theme-mode="dark"] .page,
html[data-theme-mode="dark"] .main-content.app-content {
  background-color: #1e1e1e !important;
}

html[data-theme-mode="dark"] .app-header {
  background: #1e1e1e !important;
  background-color: #1e1e1e !important;
}

html[data-theme-mode="dark"] .wallet-tabs-widget {
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.22) !important;
}

html[data-theme-mode="dark"] .wallet-tab-btn.active {
  background: rgb(var(--body-bg-rgb2)) !important;
  color: rgb(var(--primary-rgb)) !important;
  box-shadow: none !important;
  margin-bottom: -2px;
  padding-bottom: 12px;
  z-index: 3;
  position: relative;
}

html[data-theme-mode="dark"] .wallet-card {
  background: rgb(var(--body-bg-rgb2)) !important;
  color: rgba(255, 255, 255, 0.88) !important;
  border-top: none !important;
  box-shadow: none !important;
}

html[data-theme-mode="dark"] .wallet-card::before {
  display: none;
}

html[data-theme-mode="dark"] .shortcut-icon {
  background: rgba(255, 255, 255, 0.07) !important;
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25) !important;
}

html[data-theme-mode="dark"] .shortcut-card-active .shortcut-icon {
  background: rgba(1, 173, 182, 0.15) !important;
  border-color: rgba(1, 173, 182, 0.35) !important;
}

html[data-theme-mode="dark"] .wallet-card .wallet-amount-main {
  color: rgba(255, 255, 255, 0.95) !important;
}

html[data-theme-mode="dark"] .wallet-card .wallet-label,
html[data-theme-mode="dark"] .wallet-card .wallet-converted-inline {
  color: rgba(255, 255, 255, 0.55) !important;
}

html[data-theme-mode="dark"] .boleto-card,
html[data-theme-mode="dark"] .boleto-stat,
html[data-theme-mode="dark"] .pl-card,
html[data-theme-mode="dark"] .pl-stat,
html[data-theme-mode="dark"] .stat-card,
html[data-theme-mode="dark"] .recarga-card,
html[data-theme-mode="dark"] .card.custom-card,
html[data-theme-mode="dark"] .pix-card,
html[data-theme-mode="dark"] .swap-card,
html[data-theme-mode="dark"] .home-info-card,
html[data-theme-mode="dark"] .card:not(.wallet-tabs-widget):not(.wallet-card) {
  background: rgb(var(--body-bg-rgb2)) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  box-shadow: none !important;
  color: rgba(255, 255, 255, 0.88);
}

html[data-theme-mode="dark"] .form-section,
html[data-theme-mode="dark"] .detail-item,
html[data-theme-mode="dark"] .fee-pass-box,
html[data-theme-mode="dark"] .method-box,
html[data-theme-mode="dark"] .operator-badge,
html[data-theme-mode="dark"] .value-chip:not(.selected),
html[data-theme-mode="dark"] .pay-option:not(.selected),
html[data-theme-mode="dark"] .wizard-step:not(.active):not(.done),
html[data-theme-mode="dark"] .wizard-pill:not(.active),
html[data-theme-mode="dark"] .quote-box,
html[data-theme-mode="dark"] .sr-quote-box,
html[data-theme-mode="dark"] .wu-quote-box,
html[data-theme-mode="dark"] .up-quote-box {
  background: rgba(255, 255, 255, 0.04) !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
  color: rgba(255, 255, 255, 0.85);
}

html[data-theme-mode="dark"] .boleto-stat .val,
html[data-theme-mode="dark"] .stat-card .stat-value,
html[data-theme-mode="dark"] .pl-stat .val,
html[data-theme-mode="dark"] .boleto-section-title,
html[data-theme-mode="dark"] .detail-item .v,
html[data-theme-mode="dark"] .sr-quote-row span:last-child,
html[data-theme-mode="dark"] .quote-box strong {
  color: rgba(255, 255, 255, 0.92) !important;
}

html[data-theme-mode="dark"] .boleto-stat .lbl,
html[data-theme-mode="dark"] .stat-card .stat-label,
html[data-theme-mode="dark"] .pl-stat .lbl,
html[data-theme-mode="dark"] .detail-item .k,
html[data-theme-mode="dark"] .boleto-table thead th,
html[data-theme-mode="dark"] .sr-quote-row,
html[data-theme-mode="dark"] .form-section h6 {
  color: rgba(255, 255, 255, 0.55) !important;
}

html[data-theme-mode="dark"] .boleto-table tbody td,
html[data-theme-mode="dark"] .table > :not(caption) > * > * {
  background-color: transparent !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
  color: rgba(255, 255, 255, 0.88);
}

html[data-theme-mode="dark"] .pix-usdt-content.sacar-usdt-content .su-network-btn,
html[data-theme-mode="dark"] .pix-usdt-content.sacar-usdt-content .su-network-btn.active {
  background: rgb(var(--body-bg-rgb)) !important;
  border-color: rgba(255, 255, 255, 0.12) !important;
  color: rgba(255, 255, 255, 0.88);
}

html[data-theme-mode="dark"] .pix-usdt-content.sacar-usdt-content .su-network-name {
  color: rgba(255, 255, 255, 0.9) !important;
}

html[data-theme-mode="dark"] .pix-usdt-content.sacar-usdt-content .su-network-btn small {
  color: rgba(255, 255, 255, 0.5) !important;
}

html[data-theme-mode="dark"] .pix-usdt-content .pu-qrcode-wrap {
  background: rgb(var(--body-bg-rgb)) !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
}

html[data-theme-mode="dark"] .swap-usdt-content .su-card-embedded {
  background: rgb(var(--body-bg-rgb)) !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
}

html[data-theme-mode="dark"] .main-content .btn-outline-primary,
html[data-theme-mode="dark"] .main-content .btn-outline-success,
html[data-theme-mode="dark"] .main-content .btn-outline-danger,
html[data-theme-mode="dark"] .main-content .btn-outline-secondary {
  background: rgba(255, 255, 255, 0.05) !important;
  color: rgba(255, 255, 255, 0.88) !important;
}

html[data-theme-mode="dark"] .card.custom-card .card-header,
html[data-theme-mode="dark"] .card.custom-card .card-footer {
  background-color: rgb(var(--body-bg-rgb2)) !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
}

/* Inputs e blocos internos — cinza do tema (não azul navy) */
html[data-theme-mode="dark"] .main-content .form-control,
html[data-theme-mode="dark"] .main-content .form-select,
html[data-theme-mode="dark"] .main-content .input-group-text {
  background: rgb(var(--body-bg-rgb)) !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
  color: rgba(255, 255, 255, 0.88) !important;
}

/* Dark: Bootstrap vars + modais/cards que ficavam brancos */
html[data-theme-mode="dark"] {
  --bs-body-bg: #1e1e1e;
  --bs-body-color: rgba(255, 255, 255, 0.88);
  --bs-secondary-bg: #262626;
  --bs-tertiary-bg: #2e2e2e;
  --bs-border-color: rgba(255, 255, 255, 0.1);
  --bs-modal-bg: #262626;
  --bs-modal-color: rgba(255, 255, 255, 0.88);
  --bs-modal-header-border-color: rgba(255, 255, 255, 0.1);
  --bs-modal-footer-border-color: rgba(255, 255, 255, 0.1);
}

html[data-theme-mode="dark"] .swal2-popup,
html[data-theme-mode="dark"] .modal-content,
html[data-theme-mode="dark"] .inv-modal,
html[data-theme-mode="dark"] .loan-modal,
html[data-theme-mode="dark"] .dropdown-menu,
html[data-theme-mode="dark"] .offcanvas,
html[data-theme-mode="dark"] .popover,
html[data-theme-mode="dark"] .toast {
  background: #262626 !important;
  color: rgba(255, 255, 255, 0.88) !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
}

html[data-theme-mode="dark"] .swal2-title,
html[data-theme-mode="dark"] .swal2-html-container,
html[data-theme-mode="dark"] .swal2-footer,
html[data-theme-mode="dark"] .modal-title,
html[data-theme-mode="dark"] .modal-header,
html[data-theme-mode="dark"] .modal-body,
html[data-theme-mode="dark"] .modal-footer,
html[data-theme-mode="dark"] .inv-modal h3,
html[data-theme-mode="dark"] .loan-modal h3,
html[data-theme-mode="dark"] .loan-modal h4,
html[data-theme-mode="dark"] .offcanvas-title {
  color: rgba(255, 255, 255, 0.95) !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
}

html[data-theme-mode="dark"] .swal2-input,
html[data-theme-mode="dark"] .swal2-textarea,
html[data-theme-mode="dark"] .swal2-select,
html[data-theme-mode="dark"] .swal2-file,
html[data-theme-mode="dark"] .inv-modal .form-control,
html[data-theme-mode="dark"] .inv-modal .form-select,
html[data-theme-mode="dark"] .loan-modal .form-control,
html[data-theme-mode="dark"] .loan-modal .form-select,
html[data-theme-mode="dark"] .modal-content .form-control,
html[data-theme-mode="dark"] .modal-content .form-select,
html[data-theme-mode="dark"] .modal-content .input-group-text,
html[data-theme-mode="dark"] .swal2-popup .form-control {
  background: #1e1e1e !important;
  color: rgba(255, 255, 255, 0.9) !important;
  border-color: rgba(255, 255, 255, 0.12) !important;
}

html[data-theme-mode="dark"] .swal2-input::placeholder,
html[data-theme-mode="dark"] .inv-modal .form-control::placeholder,
html[data-theme-mode="dark"] .loan-modal .form-control::placeholder,
html[data-theme-mode="dark"] .modal-content .form-control::placeholder {
  color: rgba(255, 255, 255, 0.4) !important;
}

html[data-theme-mode="dark"] .pix-choice,
html[data-theme-mode="dark"] .pay-method,
html[data-theme-mode="dark"] .bill-card,
html[data-theme-mode="dark"] .stat-mini,
html[data-theme-mode="dark"] .cal-day,
html[data-theme-mode="dark"] .cat-item,
html[data-theme-mode="dark"] .inv-product,
html[data-theme-mode="dark"] .inv-panel,
html[data-theme-mode="dark"] .loan-product,
html[data-theme-mode="dark"] .loan-contract-card,
html[data-theme-mode="dark"] .loan-table-wrap,
html[data-theme-mode="dark"] .loan-faq details,
html[data-theme-mode="dark"] .loan-credit-explain,
html[data-theme-mode="dark"] .exw-card {
  background: #262626 !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
  color: rgba(255, 255, 255, 0.88);
}

html[data-theme-mode="dark"] .pix-choice strong,
html[data-theme-mode="dark"] .confirm-row strong,
html[data-theme-mode="dark"] .stat-mini .v,
html[data-theme-mode="dark"] .bill-hero h1,
html[data-theme-mode="dark"] .inv-product h3,
html[data-theme-mode="dark"] .loan-product h3,
html[data-theme-mode="dark"] .loan-contract-card h4 {
  color: #f3f4f6 !important;
}

html[data-theme-mode="dark"] .pix-choice span,
html[data-theme-mode="dark"] .confirm-row span,
html[data-theme-mode="dark"] .stat-mini .l,
html[data-theme-mode="dark"] .cal-evt {
  color: rgba(255, 255, 255, 0.55) !important;
}

html[data-theme-mode="dark"] .pix-subtabs a:not(.active),
html[data-theme-mode="dark"] .schedule-chips button:not(.active) {
  background: #2e2e2e !important;
  color: rgba(255, 255, 255, 0.7) !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
}

html[data-theme-mode="dark"] .confirm-row {
  border-bottom-color: rgba(255, 255, 255, 0.1) !important;
}

html[data-theme-mode="dark"] .loan-modal table,
html[data-theme-mode="dark"] .loan-modal .table,
html[data-theme-mode="dark"] .inv-modal table,
html[data-theme-mode="dark"] .inv-modal .table,
html[data-theme-mode="dark"] .swal2-popup table,
html[data-theme-mode="dark"] .modal-content table {
  color: rgba(255, 255, 255, 0.88) !important;
}

html[data-theme-mode="dark"] .loan-modal table td,
html[data-theme-mode="dark"] .loan-modal table th,
html[data-theme-mode="dark"] .inv-modal table td,
html[data-theme-mode="dark"] .inv-modal table th,
html[data-theme-mode="dark"] .modal-content table td,
html[data-theme-mode="dark"] .modal-content table th {
  background-color: transparent !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
  color: rgba(255, 255, 255, 0.88) !important;
}

html[data-theme-mode="dark"] .bg-white {
  background-color: #262626 !important;
}

html[data-theme-mode="dark"] .bg-light,
html[data-theme-mode="dark"] .bg-body,
html[data-theme-mode="dark"] .bg-body-tertiary {
  background-color: #1e1e1e !important;
}

html[data-theme-mode="dark"] .text-dark,
html[data-theme-mode="dark"] .text-body {
  color: rgba(255, 255, 255, 0.88) !important;
}

html[data-theme-mode="dark"] .border,
html[data-theme-mode="dark"] .border-top,
html[data-theme-mode="dark"] .border-bottom,
html[data-theme-mode="dark"] .border-start,
html[data-theme-mode="dark"] .border-end {
  border-color: rgba(255, 255, 255, 0.1) !important;
}

html[data-theme-mode="dark"] .list-group-item {
  background-color: #262626 !important;
  color: rgba(255, 255, 255, 0.88) !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
}

html[data-theme-mode="dark"] .accordion-item,
html[data-theme-mode="dark"] .accordion-button {
  background-color: #262626 !important;
  color: rgba(255, 255, 255, 0.88) !important;
}

html[data-theme-mode="dark"] canvas[id*="qr" i],
html[data-theme-mode="dark"] [id*="Qr"] img,
html[data-theme-mode="dark"] [id*="qr"] img,
html[data-theme-mode="dark"] .qr-code,
html[data-theme-mode="dark"] .exw-deposit-qr {
  background: #fff !important;
}

html[data-theme-mode="dark"] .inv-modal .form-label,
html[data-theme-mode="dark"] .loan-modal .form-label,
html[data-theme-mode="dark"] .modal-content .form-label,
html[data-theme-mode="dark"] .inv-modal .form-check-label,
html[data-theme-mode="dark"] .loan-modal .form-check-label {
  color: rgba(255, 255, 255, 0.75) !important;
}

html[data-theme-mode="dark"] .inv-modal .btn-light,
html[data-theme-mode="dark"] .loan-modal .btn-light,
html[data-theme-mode="dark"] .modal-content .btn-light,
html[data-theme-mode="dark"] .swal2-popup .btn-light {
  background: #3a3a3a !important;
  border-color: rgba(255, 255, 255, 0.12) !important;
  color: #f3f4f6 !important;
}

html[data-theme-mode="dark"] .loan-timeline-step {
  background: #2e2e2e;
  border-color: rgba(255, 255, 255, 0.12);
  color: rgba(255, 255, 255, 0.8);
}