/* =====================================================================
   BANKPIX — Tema global (cliente + autenticação)
   Camada de "skin" sobre o template Able Pro / auth. Reescreve as cores
   da marca, a tipografia e o acabamento sem alterar o layout das páginas.
   ===================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

:root{
  --bs-primary:#22d3a5 !important;
  --bs-primary-rgb:34,211,165 !important;
  --bs-primary-text-emphasis:#22d3a5 !important;
  --bs-link-color:#22d3a5 !important;
  --bs-link-color-rgb:34,211,165 !important;
  --bs-link-hover-color:#16b892 !important;
  --primary-rgb:34,211,165 !important;
  --secondary-rgb:99,102,241 !important;
  --success-rgb:34,211,165 !important;
  --bs-body-font-family:'Inter',system-ui,sans-serif;
}

body{ font-family:'Inter',system-ui,-apple-system,sans-serif !important; }

/* Botões da marca com gradiente sofisticado */
.btn-primary,.btn-success{
  background:linear-gradient(135deg,#22d3a5,#6366f1) !important;
  border:none !important;
  color:#04121a !important;
  font-weight:600 !important;
}
.btn-primary:hover,.btn-success:hover,
.btn-primary:focus,.btn-success:focus{
  filter:brightness(1.06);
  box-shadow:0 10px 26px rgba(34,211,165,.28) !important;
  color:#04121a !important;
}
.btn-outline-primary{ color:#22d3a5 !important; border-color:#22d3a5 !important; }
.btn-outline-primary:hover{ background:#22d3a5 !important; color:#04121a !important; }

/* Texto/links de destaque */
a.text-primary,.text-primary{ color:#22d3a5 !important; }
.bg-primary{ background:linear-gradient(135deg,#22d3a5,#6366f1) !important; }
.badge.bg-primary,.badge.bg-success{ background:#22d3a5 !important; color:#04121a !important; }

/* Cards e superfícies mais suaves */
.card{ border-radius:16px !important; }
.form-control:focus,.form-select:focus{
  border-color:#22d3a5 !important;
  box-shadow:0 0 0 .2rem rgba(34,211,165,.2) !important;
}

/* Sidebar Able Pro — estado ativo/hover na cor da marca */
.pc-sidebar .pc-navbar>.pc-item.active>.pc-link,
.pc-sidebar .pc-navbar>.pc-item:hover>.pc-link,
.pc-sidebar .pc-navbar>.pc-item.active>.pc-link .pc-micon i,
.pc-sidebar .pc-navbar>.pc-item:hover>.pc-link .pc-micon i{
  color:#22d3a5 !important;
}
.pc-sidebar .pc-navbar>.pc-item.active>.pc-link::before{
  background:linear-gradient(135deg,#22d3a5,#6366f1) !important;
}

/* Barra de rolagem discreta */
::-webkit-scrollbar{ width:10px;height:10px; }
::-webkit-scrollbar-thumb{ background:#2a3550;border-radius:8px; }
::-webkit-scrollbar-thumb:hover{ background:#34406199; }

/* =====================================================================
   Dashboard do cliente — acabamento premium (Able Pro)
   ===================================================================== */
.pc-content .card{
  position:relative; overflow:hidden;
  border:1px solid #1e2636 !important;
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.pc-content .card:hover{
  transform:translateY(-3px);
  box-shadow:0 14px 34px rgba(0,0,0,.4) !important;
  border-color:#2b3a57 !important;
}
/* Fina faixa de destaque no topo dos cards de estatística */
.pc-content .card::after{
  content:''; position:absolute; top:0; left:0; right:0; height:3px;
  background:linear-gradient(90deg,#22d3a5,#6366f1); opacity:.85;
}
/* Valores em destaque (saldo, totais) */
.pc-content .card .card-body h3{
  font-weight:800 !important; letter-spacing:.2px;
}
/* Banner de boas-vindas com fundo em gradiente sutil */
.pc-content > .row:first-child .card-body{
  background:linear-gradient(135deg,rgba(34,211,165,.10),rgba(99,102,241,.10));
  border:1px solid #1e2636; border-radius:16px;
}
.pc-content > .row:first-child .card-body h2{
  font-weight:800 !important;
}
/* Ícones dos avatares/widgets na cor da marca */
.pc-content .avtar.bg-light-primary,
.pc-content .avtar.bg-primary{
  background:linear-gradient(135deg,rgba(34,211,165,.18),rgba(99,102,241,.18)) !important;
  color:#22d3a5 !important;
}

/* =====================================================================
   Campos de PIN / código (.box_code) — quadrados lado a lado e modernos
   Sobrescreve o width:100% do .form-control que fazia empilhar.
   ===================================================================== */
.box_code{
  display:inline-block !important;
  text-align:center;
  width:52px !important;
  height:60px !important;
  flex:0 0 auto !important;
  padding:0 !important;
  margin:6px !important;
  font-size:1.5rem !important;
  font-weight:700 !important;
  text-align:center !important;
  color:#e7ecf3 !important;
  background:#0e1524 !important;
  border:1.6px solid #2a3a57 !important;
  border-radius:14px !important;
  box-shadow:none !important;
  transition:border-color .15s, box-shadow .15s, transform .1s;
}
.box_code:focus{
  border-color:#22d3a5 !important;
  box-shadow:0 0 0 3px rgba(34,211,165,.25) !important;
  background:#0e1524 !important;
  transform:translateY(-1px);
  outline:none !important;
}
/* Centraliza a linha dos quadrados do PIN */
.row:has(> .box_code){
  justify-content:center !important;
  flex-wrap:wrap !important;
  gap:2px;
  margin-left:0 !important;
}

/* =====================================================================
   Barra lateral do cliente (Able Pro) — mais moderna
   ===================================================================== */
.pc-sidebar{
  background:linear-gradient(180deg,#0d1320,#0b0f17) !important;
  border-right:1px solid #1e2636 !important;
}
.pc-sidebar .pc-navbar > .pc-item > .pc-link{
  margin:3px 14px !important;
  padding:11px 14px !important;
  border-radius:12px !important;
  font-weight:500 !important;
  transition:background .15s, color .15s !important;
}
.pc-sidebar .pc-navbar > .pc-item > .pc-link:hover{
  background:#131b2b !important;
  color:#fff !important;
}
.pc-sidebar .pc-navbar > .pc-item.active > .pc-link,
.pc-sidebar .pc-navbar > .pc-item.pc-trigger > .pc-link{
  background:linear-gradient(135deg,rgba(34,211,165,.16),rgba(99,102,241,.16)) !important;
  border:1px solid #223049 !important;
  color:#ffffff !important;
}
.pc-sidebar .pc-navbar > .pc-item.active > .pc-link .pc-micon i,
.pc-sidebar .pc-navbar > .pc-item:hover > .pc-link .pc-micon i{
  color:#22d3a5 !important;
}
.pc-sidebar .pc-caption{
  color:#4b5674 !important;
  letter-spacing:1px !important;
  font-size:.72rem !important;
  text-transform:uppercase;
  font-weight:700 !important;
}
.pc-sidebar .pc-caption label{ color:#4b5674 !important; }
/* Remove o traço/indicador padrão que às vezes conflita com o tema */
.pc-sidebar .pc-navbar > .pc-item.active > .pc-link::before{
  background:linear-gradient(135deg,#22d3a5,#6366f1) !important;
}

/* =====================================================================
   Popup de aviso (.popup) — escuro e branded (index, relatórios, etc.)
   ===================================================================== */
.popup-overlay{
  background:rgba(4,8,14,.72) !important;
  backdrop-filter:blur(4px) !important;
}
.popup{
  background:linear-gradient(180deg,#111725,#0e1420) !important;
  border:1px solid #1e2636 !important;
  color:#e7ecf3 !important;
  border-radius:18px !important;
  box-shadow:0 30px 80px rgba(0,0,0,.55) !important;
}
.popup h2{ color:#ffffff !important; font-weight:800 !important; }
.popup p{ color:#8a97ad !important; }
.popup img{ max-width:170px !important; }
.popup button{
  background:linear-gradient(135deg,#22d3a5,#6366f1) !important;
  color:#04121a !important;
  border:none !important;
  border-radius:12px !important;
  font-weight:700 !important;
  transition:.2s !important;
}
.popup button:hover{ filter:brightness(1.05); transform:translateY(-1px); }

/* =====================================================================
   OVERHAUL MODERNO — App do cliente (Able Pro)  ·  BANKPIX v2
   ===================================================================== */

/* ---- Layout / superfícies ---- */
body[data-pc-theme="dark"], .pc-container, .pc-content{
  background:radial-gradient(1200px 700px at 78% -12%,#16233b 0,transparent 55%),#080b12 !important;
}
.pc-container{ padding-top:8px; }

/* ---- SIDEBAR ---- */
.pc-sidebar{
  background:linear-gradient(180deg,#0d1320,#080b12) !important;
  border-right:1px solid #18202f !important;
  box-shadow:none !important;
}
.pc-sidebar .m-header{ padding:22px 22px 6px !important; border-bottom:1px solid #18202f !important; }
.pc-sidebar .m-header img{ width:170px !important; }
.pc-sidebar .navbar-content{ padding:6px 10px !important; }

/* Card do usuário */
.pc-sidebar .pc-user-card{
  background:linear-gradient(135deg,rgba(34,211,165,.10),rgba(99,102,241,.10)) !important;
  border:1px solid #1e2636 !important; border-radius:16px !important; margin:12px 6px 6px !important;
}
.pc-sidebar .pc-user-card .user-avtar{ border:2px solid rgba(34,211,165,.5) !important; }
.pc-sidebar .pc-user-card h6{ color:#fff !important; font-weight:700 !important; }
.pc-sidebar .pc-user-card small{ color:#8a97ad !important; }

/* Itens do menu */
.pc-sidebar .pc-navbar{ padding:6px 4px !important; }
.pc-sidebar .pc-navbar > .pc-item{ margin:2px 0 !important; }
.pc-sidebar .pc-navbar > .pc-item > .pc-link{
  margin:2px 12px !important; padding:11px 14px !important; border-radius:12px !important;
  color:#9aa7bd !important; font-weight:500 !important; font-size:.94rem !important;
  display:flex !important; align-items:center !important; gap:2px !important;
  transition:background .15s, color .15s, transform .1s !important;
}
.pc-sidebar .pc-navbar > .pc-item > .pc-link .pc-micon{ margin-right:12px !important; display:inline-flex !important; }
.pc-sidebar .pc-navbar > .pc-item > .pc-link .pc-micon i,
.pc-sidebar .pc-navbar > .pc-item > .pc-link .pc-micon svg{ width:20px !important; height:20px !important; font-size:1.15rem !important; color:#8a97ad !important; }
.pc-sidebar .pc-navbar > .pc-item > .pc-link:hover{ background:#121a29 !important; color:#fff !important; }
.pc-sidebar .pc-navbar > .pc-item > .pc-link:hover .pc-micon i,
.pc-sidebar .pc-navbar > .pc-item > .pc-link:hover .pc-micon svg{ color:#22d3a5 !important; }

/* Item ativo */
.pc-sidebar .pc-navbar > .pc-item.active > .pc-link,
.pc-sidebar .pc-navbar > .pc-item.pc-trigger > .pc-link{
  background:linear-gradient(135deg,rgba(34,211,165,.20),rgba(99,102,241,.20)) !important;
  border:1px solid #26364f !important; color:#fff !important;
  box-shadow:0 6px 18px rgba(34,211,165,.10) !important;
}
.pc-sidebar .pc-navbar > .pc-item.active > .pc-link::before{ display:none !important; }
.pc-sidebar .pc-navbar > .pc-item.active > .pc-link .pc-micon i,
.pc-sidebar .pc-navbar > .pc-item.active > .pc-link .pc-micon svg{ color:#22d3a5 !important; }

/* Legendas de seção */
.pc-sidebar .pc-caption{ padding:16px 24px 6px !important; }
.pc-sidebar .pc-caption label{
  color:#4b5674 !important; font-size:.7rem !important; letter-spacing:1.2px !important;
  text-transform:uppercase !important; font-weight:700 !important;
}
.pc-sidebar .pc-caption svg{ display:none !important; }

/* ---- TOPBAR / HEADER ---- */
.pc-header{
  background:rgba(8,11,18,.72) !important; backdrop-filter:blur(12px) !important;
  border-bottom:1px solid #18202f !important; box-shadow:none !important;
}
.pc-header .pc-head-link{ color:#c3cdda !important; border-radius:12px !important; }
.pc-header .pc-head-link:hover{ background:#121a29 !important; }
.pc-header .user-avtar{ border:2px solid rgba(34,211,165,.5) !important; }

/* ---- CARDS ---- */
.pc-content .card, .card{
  background:linear-gradient(180deg,#111725,#0e1420) !important;
  border:1px solid #1e2636 !important; border-radius:16px !important;
  box-shadow:0 6px 20px rgba(0,0,0,.22) !important; color:#e7ecf3 !important;
}
.card .card-header{ border-bottom:1px solid #1e2636 !important; background:transparent !important; color:#fff !important; }
.card .text-muted, .card p.text-muted{ color:#8a97ad !important; }

/* ---- BOTÕES ---- */
.btn-primary,.btn-success,.btn-light-primary{
  background:linear-gradient(135deg,#22d3a5,#6366f1) !important; border:none !important;
  color:#04121a !important; font-weight:700 !important; border-radius:12px !important;
}
.btn-primary:hover,.btn-success:hover{ filter:brightness(1.06); box-shadow:0 10px 26px rgba(34,211,165,.28) !important; }
.btn-secondary,.btn-light{ background:#182234 !important; border:1px solid #2a3550 !important; color:#e7ecf3 !important; border-radius:12px !important; }
.btn-outline-primary{ border-color:#22d3a5 !important; color:#22d3a5 !important; border-radius:12px !important; }
.btn-outline-primary:hover{ background:#22d3a5 !important; color:#04121a !important; }

/* ---- INPUTS ---- */
.form-control,.form-select,.pc-content input:not(.box_code):not([type=checkbox]):not([type=radio]),.pc-content textarea,.pc-content select{
  background:#0b0f17 !important; border:1.5px solid #22304a !important; color:#e7ecf3 !important; border-radius:11px !important;
}
.form-control::placeholder{ color:#5c6884 !important; }
.form-control:focus,.form-select:focus{ border-color:#22d3a5 !important; box-shadow:0 0 0 3px rgba(34,211,165,.2) !important; background:#0b0f17 !important; color:#fff !important; }
.input-group-text{ background:#182234 !important; border:1.5px solid #22304a !important; color:#8a97ad !important; }

/* ---- TABELAS ---- */
.table{ color:#e7ecf3 !important; }
.table > :not(caption) > * > *{ background:transparent !important; border-color:#1a2233 !important; }
.table thead th{ color:#8a97ad !important; text-transform:uppercase; font-size:.74rem; letter-spacing:.5px; border-color:#1e2636 !important; }
.table tbody tr:hover > *{ background:rgba(34,211,165,.05) !important; }

/* ---- MODAIS / DROPDOWN ---- */
.modal-content{ background:linear-gradient(180deg,#111725,#0e1420) !important; border:1px solid #1e2636 !important; color:#e7ecf3 !important; border-radius:18px !important; }
.modal-header,.modal-footer{ border-color:#1e2636 !important; }
.dropdown-menu{ background:#111725 !important; border:1px solid #1e2636 !important; border-radius:14px !important; }
.dropdown-item{ color:#c3cdda !important; }
.dropdown-item:hover{ background:#182234 !important; color:#fff !important; }

/* ---- BADGES / ALERTS ---- */
.badge.bg-light-success,.badge.bg-success{ background:rgba(34,211,165,.16) !important; color:#22d3a5 !important; }
.badge.bg-light-danger,.badge.bg-danger{ background:rgba(239,68,68,.16) !important; color:#f87171 !important; }
.badge.bg-light-warning{ background:rgba(245,158,11,.16) !important; color:#fbbf24 !important; }
.alert-primary{ background:rgba(34,211,165,.10) !important; border:1px solid #26364f !important; color:#c3cdda !important; }

/* ---- Loader na cor da marca ---- */
.loader{ border-color:#1e2636 !important; border-top-color:#22d3a5 !important; }
.loader-container{ background:#080b12 !important; }

/* =====================================================================
   Espaçamento superior compacto e profissional (remove o vão no topo)
   ===================================================================== */
.pc-header{ min-height:62px !important; }
.pc-header .header-wrapper{ padding-top:0 !important; padding-bottom:0 !important; }
.pc-container, .pc-sidebar ~ .pc-container{ top:62px !important; min-height:calc(100vh - 62px) !important; }
.pc-container .pc-content{
  padding-top:14px !important; padding-bottom:26px !important;
  padding-left:26px !important; padding-right:26px !important;
}
.pc-content > .row:first-child{ margin-top:0 !important; }
/* Banner de boas-vindas mais enxuto por dentro */
.pc-content > .row:first-child .card-body{ padding:22px 24px !important; }
.pc-content > .row:first-child .card-body .p-4{ padding:6px !important; }

/* =====================================================================
   Remove o troca-tema (modo claro) e o customizador de layout
   (o BANKPIX é dark fixo — sem opção de mudar tema/layout pelo usuário)
   ===================================================================== */
.pc-header .pc-h-item.dropdown:not(.header-user-profile){ display:none !important; }
.pct-c-btn{ display:none !important; }
.pct-offcanvas{ display:none !important; }