/* ==========================================================================
   Boa Finance — camada de override do tema Bootstrap 5 existente.
   Carregada DEPOIS de app.min.css e dos tokens (boa-tokens/*.css).
   O tema de base é SASS compilado (poucas --bs-* variáveis reais), então
   aqui sobrescrevemos pelos seletores reais do Bootstrap/do template.
   ========================================================================== */

/* ---- Tipografia global ---- */
body, .btn, .form-control, .form-select, input, select, textarea, button {
  font-family: var(--font-core);
}
h1, h2, h3, h4, h5, h6,
.pe-app-sidebar-logo, .navbar-brand,
.card-title, .modal-title {
  font-family: var(--font-display);
  letter-spacing: var(--track-title);
  font-weight: var(--weight-bold);
}
body {
  background: var(--surface-page);
  color: var(--text-body);
}
a { color: var(--text-link); }
a:hover { color: var(--text-link-hover); }

/* ---- Botões (padrão de components/core/Button.jsx) ---- */
.btn {
  border-radius: var(--radius-md);
  font-weight: var(--weight-semibold);
  font-size: var(--size-body);
  letter-spacing: -0.005em;
  transition: var(--transition-control);
  box-shadow: none;
}
.btn:active { transform: scale(var(--press-scale)); }
.btn-sm { border-radius: var(--radius-sm); }

.btn-primary {
  background: var(--navy-700);
  border-color: var(--navy-700);
  color: var(--white);
}
.btn-primary:hover, .btn-primary:focus {
  background: var(--navy-800);
  border-color: var(--navy-800);
  color: var(--white);
}
.btn-secondary, .btn-outline-secondary {
  background: var(--white);
  border-color: var(--border-strong);
  color: var(--text-strong);
}
.btn-secondary:hover, .btn-outline-secondary:hover {
  background: var(--ink-050);
  border-color: var(--ink-400);
  color: var(--text-strong);
}
.btn-light { background: var(--ink-050); border-color: var(--ink-100); color: var(--text-strong); }
.btn-link, .btn-outline-primary.btn-ghost {
  background: transparent; border-color: transparent; color: var(--text-brand);
}
.btn-link:hover { background: var(--violet-100); }
.btn-warning {
  background: var(--yellow-500); border-color: var(--yellow-500); color: var(--ink-900);
}
.btn-warning:hover { background: var(--yellow-400); border-color: var(--yellow-400); color: var(--ink-900); }
.btn-danger, .btn-outline-danger {
  background: var(--red-500); border-color: var(--red-500); color: var(--white);
}
.btn-danger:hover { background: var(--red-600); border-color: var(--red-600); }
.btn-outline-danger { background: transparent; color: var(--red-500); }
.btn-outline-danger:hover { background: var(--red-500); color: var(--white); }
.btn-success { background: var(--gain-500); border-color: var(--gain-500); color: var(--white); }
.btn-success:hover { background: var(--gain-600); border-color: var(--gain-600); }
.btn-info { background: var(--violet-500); border-color: var(--violet-500); color: var(--white); }
.btn:disabled, .btn.disabled { opacity: .45; }

/* ---- Cards (padrão de components/core/Card.jsx) ---- */
.card {
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-hairline);
  box-shadow: var(--shadow-1);
  background: var(--surface-card);
}
.card-header {
  background: transparent;
  border-bottom: 1px solid var(--border-hairline);
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
}
.card-footer { background: transparent; border-top: 1px solid var(--border-hairline); }

/* ---- Badges (padrão de components/core/Badge.jsx) ---- */
.badge {
  border-radius: var(--radius-pill);
  font-family: var(--font-technical);
  letter-spacing: var(--track-label);
  font-weight: 400;
  padding: 3px 9px;
}
.badge.text-bg-secondary, .bg-secondary { background: var(--ink-100) !important; color: var(--ink-700) !important; }
.badge.text-bg-success, .bg-success { background: var(--gain-100) !important; color: var(--gain-600) !important; }
.badge.text-bg-danger, .bg-danger { background: var(--red-100) !important; color: var(--red-600) !important; }
.badge.text-bg-warning, .bg-warning { background: var(--amber-100) !important; color: var(--amber-600) !important; }
.badge.text-bg-info, .bg-info { background: var(--violet-100) !important; color: var(--violet-700) !important; }
.badge.text-bg-primary, .bg-primary { background: var(--violet-100) !important; color: var(--navy-700) !important; }

/* ---- Formulários (padrão de components/forms/Input.jsx e Select.jsx) ---- */
.form-control, .form-select {
  border-radius: var(--radius-md);
  border: 1px solid var(--border-strong);
  min-height: var(--control-h-md);
  font-size: var(--size-body);
  color: var(--text-strong);
}
.form-control:focus, .form-select:focus {
  border-color: var(--navy-700);
  box-shadow: var(--focus-ring);
}
.form-control:disabled, .form-control[readonly] { background: var(--ink-100); }
.form-label {
  font-family: var(--font-technical);
  font-size: var(--size-label);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--text-muted);
}
.form-check-input {
  border-radius: var(--radius-xs);
  border: 1.5px solid var(--border-strong);
  width: 20px; height: 20px;
}
.form-check-input[type="radio"] { border-radius: 50%; }
.form-check-input:checked {
  background-color: var(--navy-700);
  border-color: var(--navy-700);
}
.form-check-input:focus { box-shadow: var(--focus-ring); }
.form-switch .form-check-input {
  width: 44px; height: 26px; border-radius: var(--radius-pill);
}

/* ---- Alertas (padrão de components/feedback/Alert.jsx) ---- */
.alert {
  border: none;
  border-left: 3px solid transparent;
  border-radius: var(--radius-md);
}
.alert-primary, .alert-info { background: var(--info-soft); border-left-color: var(--violet-500); color: var(--violet-700); }
.alert-success { background: var(--positive-soft); border-left-color: var(--gain-500); color: var(--gain-600); }
.alert-warning { background: var(--warning-soft); border-left-color: var(--amber-500); color: var(--amber-600); }
.alert-danger { background: var(--negative-soft); border-left-color: var(--red-500); color: var(--red-600); }

/* ---- Modais (padrão de components/feedback/Dialog.jsx) ---- */
.modal-content {
  border: none;
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-3);
}
.modal-header, .modal-footer { border-color: var(--border-hairline); }
.modal-title { font-size: var(--size-title-3); }
.modal-backdrop.show { opacity: 1; background: var(--surface-overlay); }

/* ---- Abas (padrão de components/navigation/Tabs.jsx) ---- */
.nav-tabs { border-bottom: 1px solid var(--border-hairline); }
.nav-tabs .nav-link {
  border: none;
  color: var(--text-muted);
  font-weight: var(--weight-medium);
  box-shadow: none;
}
.nav-tabs .nav-link.active {
  background: transparent;
  color: var(--text-strong);
  font-weight: var(--weight-semibold);
  box-shadow: inset 0 -2px 0 0 var(--navy-700);
}
.nav-pills .nav-link.active { background: var(--navy-700); }

/* ---- Listas / tabelas (padrão de components/navigation/ListRow.jsx) ---- */
.list-group-item { border-color: var(--border-hairline); }
.list-group-item-action:hover { background: var(--ink-050); }
.table { color: var(--text-body); }
.table > :not(caption) > * > * { border-bottom-color: var(--border-hairline); }
.table-hover > tbody > tr:hover > * { background-color: var(--ink-050); }

/* ---- Sidebar / topbar do template ---- */
.pe-app-sidebar, .app-menu, [class*="sidebar"] {
  background: var(--navy-700);
}
.pe-app-sidebar .nav-link, .app-menu .nav-link { color: var(--violet-200); }
.pe-app-sidebar .nav-link.active, .app-menu .nav-link.active,
.pe-app-sidebar .nav-link:hover, .app-menu .nav-link:hover {
  background: var(--navy-600);
  color: var(--white);
}
.topbar, .app-topbar, .app-header, header.navbar {
  background: rgba(255,255,255,.86);
  backdrop-filter: var(--blur-scrim);
  border-bottom: 1px solid var(--border-hairline);
}

/* ==========================================================================
   Ícones — substitui Remix Icon / Flaticon Uicons / Bootstrap Icons por
   Lucide auto-hospedado (mesma técnica de components/core/Icon.jsx: máscara
   CSS sobre currentColor). Uma exceção de marca: .lu-whatsapp.
   ========================================================================== */
[class*="lu-"] {
  display: inline-block;
  width: 1em; height: 1em;
  background-color: currentColor;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: center; mask-position: center;
  -webkit-mask-size: contain; mask-size: contain;
  vertical-align: -0.125em;
}
.lu-arrow-right{-webkit-mask-image:url(/assets/icons/lucide/arrow-right.svg);mask-image:url(/assets/icons/lucide/arrow-right.svg)}
.lu-banknote{-webkit-mask-image:url(/assets/icons/lucide/banknote.svg);mask-image:url(/assets/icons/lucide/banknote.svg)}
.lu-bar-chart-3{-webkit-mask-image:url(/assets/icons/lucide/bar-chart-3.svg);mask-image:url(/assets/icons/lucide/bar-chart-3.svg)}
.lu-building-2{-webkit-mask-image:url(/assets/icons/lucide/building-2.svg);mask-image:url(/assets/icons/lucide/building-2.svg)}
.lu-calculator{-webkit-mask-image:url(/assets/icons/lucide/calculator.svg);mask-image:url(/assets/icons/lucide/calculator.svg)}
.lu-calendar{-webkit-mask-image:url(/assets/icons/lucide/calendar.svg);mask-image:url(/assets/icons/lucide/calendar.svg)}
.lu-camera{-webkit-mask-image:url(/assets/icons/lucide/camera.svg);mask-image:url(/assets/icons/lucide/camera.svg)}
.lu-check{-webkit-mask-image:url(/assets/icons/lucide/check.svg);mask-image:url(/assets/icons/lucide/check.svg)}
.lu-check-check{-webkit-mask-image:url(/assets/icons/lucide/check-check.svg);mask-image:url(/assets/icons/lucide/check-check.svg)}
.lu-chevron-down{-webkit-mask-image:url(/assets/icons/lucide/chevron-down.svg);mask-image:url(/assets/icons/lucide/chevron-down.svg)}
.lu-chevrons-left{-webkit-mask-image:url(/assets/icons/lucide/chevrons-left.svg);mask-image:url(/assets/icons/lucide/chevrons-left.svg)}
.lu-chevrons-right{-webkit-mask-image:url(/assets/icons/lucide/chevrons-right.svg);mask-image:url(/assets/icons/lucide/chevrons-right.svg)}
.lu-circle-check{-webkit-mask-image:url(/assets/icons/lucide/circle-check.svg);mask-image:url(/assets/icons/lucide/circle-check.svg)}
.lu-circle-check-big{-webkit-mask-image:url(/assets/icons/lucide/circle-check-big.svg);mask-image:url(/assets/icons/lucide/circle-check-big.svg)}
.lu-circle-help{-webkit-mask-image:url(/assets/icons/lucide/circle-help.svg);mask-image:url(/assets/icons/lucide/circle-help.svg)}
.lu-circle-pause{-webkit-mask-image:url(/assets/icons/lucide/circle-pause.svg);mask-image:url(/assets/icons/lucide/circle-pause.svg)}
.lu-circle-play{-webkit-mask-image:url(/assets/icons/lucide/circle-play.svg);mask-image:url(/assets/icons/lucide/circle-play.svg)}
.lu-circle-x{-webkit-mask-image:url(/assets/icons/lucide/circle-x.svg);mask-image:url(/assets/icons/lucide/circle-x.svg)}
.lu-clock{-webkit-mask-image:url(/assets/icons/lucide/clock.svg);mask-image:url(/assets/icons/lucide/clock.svg)}
.lu-credit-card{-webkit-mask-image:url(/assets/icons/lucide/credit-card.svg);mask-image:url(/assets/icons/lucide/credit-card.svg)}
.lu-database{-webkit-mask-image:url(/assets/icons/lucide/database.svg);mask-image:url(/assets/icons/lucide/database.svg)}
.lu-eye{-webkit-mask-image:url(/assets/icons/lucide/eye.svg);mask-image:url(/assets/icons/lucide/eye.svg)}
.lu-eye-off{-webkit-mask-image:url(/assets/icons/lucide/eye-off.svg);mask-image:url(/assets/icons/lucide/eye-off.svg)}
.lu-file-check{-webkit-mask-image:url(/assets/icons/lucide/file-check.svg);mask-image:url(/assets/icons/lucide/file-check.svg)}
.lu-file-down{-webkit-mask-image:url(/assets/icons/lucide/file-down.svg);mask-image:url(/assets/icons/lucide/file-down.svg)}
.lu-file-text{-webkit-mask-image:url(/assets/icons/lucide/file-text.svg);mask-image:url(/assets/icons/lucide/file-text.svg)}
.lu-hand-coins{-webkit-mask-image:url(/assets/icons/lucide/hand-coins.svg);mask-image:url(/assets/icons/lucide/hand-coins.svg)}
.lu-handshake{-webkit-mask-image:url(/assets/icons/lucide/handshake.svg);mask-image:url(/assets/icons/lucide/handshake.svg)}
.lu-info{-webkit-mask-image:url(/assets/icons/lucide/info.svg);mask-image:url(/assets/icons/lucide/info.svg)}
.lu-landmark{-webkit-mask-image:url(/assets/icons/lucide/landmark.svg);mask-image:url(/assets/icons/lucide/landmark.svg)}
.lu-layout-dashboard{-webkit-mask-image:url(/assets/icons/lucide/layout-dashboard.svg);mask-image:url(/assets/icons/lucide/layout-dashboard.svg)}
.lu-list-checks{-webkit-mask-image:url(/assets/icons/lucide/list-checks.svg);mask-image:url(/assets/icons/lucide/list-checks.svg)}
.lu-lock{-webkit-mask-image:url(/assets/icons/lucide/lock.svg);mask-image:url(/assets/icons/lucide/lock.svg)}
.lu-log-in{-webkit-mask-image:url(/assets/icons/lucide/log-in.svg);mask-image:url(/assets/icons/lucide/log-in.svg)}
.lu-log-out{-webkit-mask-image:url(/assets/icons/lucide/log-out.svg);mask-image:url(/assets/icons/lucide/log-out.svg)}
.lu-mail{-webkit-mask-image:url(/assets/icons/lucide/mail.svg);mask-image:url(/assets/icons/lucide/mail.svg)}
.lu-map-pin{-webkit-mask-image:url(/assets/icons/lucide/map-pin.svg);mask-image:url(/assets/icons/lucide/map-pin.svg)}
.lu-maximize{-webkit-mask-image:url(/assets/icons/lucide/maximize.svg);mask-image:url(/assets/icons/lucide/maximize.svg)}
.lu-minimize{-webkit-mask-image:url(/assets/icons/lucide/minimize.svg);mask-image:url(/assets/icons/lucide/minimize.svg)}
.lu-pencil{-webkit-mask-image:url(/assets/icons/lucide/pencil.svg);mask-image:url(/assets/icons/lucide/pencil.svg)}
.lu-percent{-webkit-mask-image:url(/assets/icons/lucide/percent.svg);mask-image:url(/assets/icons/lucide/percent.svg)}
.lu-pie-chart{-webkit-mask-image:url(/assets/icons/lucide/pie-chart.svg);mask-image:url(/assets/icons/lucide/pie-chart.svg)}
.lu-printer{-webkit-mask-image:url(/assets/icons/lucide/printer.svg);mask-image:url(/assets/icons/lucide/printer.svg)}
.lu-receipt{-webkit-mask-image:url(/assets/icons/lucide/receipt.svg);mask-image:url(/assets/icons/lucide/receipt.svg)}
.lu-refresh-cw{-webkit-mask-image:url(/assets/icons/lucide/refresh-cw.svg);mask-image:url(/assets/icons/lucide/refresh-cw.svg)}
.lu-save{-webkit-mask-image:url(/assets/icons/lucide/save.svg);mask-image:url(/assets/icons/lucide/save.svg)}
.lu-search{-webkit-mask-image:url(/assets/icons/lucide/search.svg);mask-image:url(/assets/icons/lucide/search.svg)}
.lu-send{-webkit-mask-image:url(/assets/icons/lucide/send.svg);mask-image:url(/assets/icons/lucide/send.svg)}
.lu-settings{-webkit-mask-image:url(/assets/icons/lucide/settings.svg);mask-image:url(/assets/icons/lucide/settings.svg)}
.lu-shield-check{-webkit-mask-image:url(/assets/icons/lucide/shield-check.svg);mask-image:url(/assets/icons/lucide/shield-check.svg)}
.lu-square-pen{-webkit-mask-image:url(/assets/icons/lucide/square-pen.svg);mask-image:url(/assets/icons/lucide/square-pen.svg)}
.lu-star{-webkit-mask-image:url(/assets/icons/lucide/star.svg);mask-image:url(/assets/icons/lucide/star.svg)}
.lu-store{-webkit-mask-image:url(/assets/icons/lucide/store.svg);mask-image:url(/assets/icons/lucide/store.svg)}
.lu-trending-down{-webkit-mask-image:url(/assets/icons/lucide/trending-down.svg);mask-image:url(/assets/icons/lucide/trending-down.svg)}
.lu-trending-up{-webkit-mask-image:url(/assets/icons/lucide/trending-up.svg);mask-image:url(/assets/icons/lucide/trending-up.svg)}
.lu-triangle-alert{-webkit-mask-image:url(/assets/icons/lucide/triangle-alert.svg);mask-image:url(/assets/icons/lucide/triangle-alert.svg)}
.lu-user{-webkit-mask-image:url(/assets/icons/lucide/user.svg);mask-image:url(/assets/icons/lucide/user.svg)}
.lu-user-plus{-webkit-mask-image:url(/assets/icons/lucide/user-plus.svg);mask-image:url(/assets/icons/lucide/user-plus.svg)}
.lu-users{-webkit-mask-image:url(/assets/icons/lucide/users.svg);mask-image:url(/assets/icons/lucide/users.svg)}
.lu-wallet{-webkit-mask-image:url(/assets/icons/lucide/wallet.svg);mask-image:url(/assets/icons/lucide/wallet.svg)}
.lu-whatsapp{-webkit-mask-image:url(/assets/icons/lucide/whatsapp.svg);mask-image:url(/assets/icons/lucide/whatsapp.svg)}
.lu-x{-webkit-mask-image:url(/assets/icons/lucide/x.svg);mask-image:url(/assets/icons/lucide/x.svg)}