/* ========================================================================
   NP CASH — VISUAL POLISH LAYER
   Aplica refinamentos consistentes sobre o tema dark existente.
   Sistema de espaçamento 8px • tipografia escalonada • micro-animações
   ======================================================================== */

:root {
  --np-radius-xs: 8px;
  --np-radius-sm: 12px;
  --np-radius-md: 16px;
  --np-radius-lg: 20px;
  --np-radius-pill: 999px;

  --np-shadow-xs: 0 1px 2px rgba(0,0,0,.25);
  --np-shadow-sm: 0 2px 8px rgba(0,0,0,.28), 0 1px 2px rgba(0,0,0,.18);
  --np-shadow-md: 0 6px 18px -6px rgba(0,0,0,.45), 0 2px 6px rgba(0,0,0,.22);
  --np-shadow-lg: 0 18px 40px -16px rgba(0,0,0,.55), 0 6px 14px rgba(0,0,0,.22);
  --np-shadow-blue: 0 10px 26px -10px rgba(37, 99, 235, .55);

  --np-ease: cubic-bezier(.22, 1, .36, 1);
  --np-dur-fast: 140ms;
  --np-dur: 220ms;
  --np-dur-slow: 380ms;
}

/* ---------- Tipografia ---------- */
body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  letter-spacing: -0.005em;
}
h1, h2, h3, h4 { letter-spacing: -0.02em; line-height: 1.2; }
h1 { font-weight: 800; }
h2 { font-weight: 700; }
h3 { font-weight: 700; }
p, label, span, button, input, select { letter-spacing: -0.005em; }

/* Hierarquia em cards: padroniza títulos de seção */
.card h2,
.card h3 {
  font-size: 15px !important;
  font-weight: 700 !important;
  letter-spacing: -0.015em !important;
}
.card .card-header h2,
.card .card-header h3 { margin: 0 !important; }

/* ---------- Cards ---------- */
.card {
  border-radius: var(--np-radius-md) !important;
  box-shadow: var(--np-shadow-sm);
  transition: transform var(--np-dur) var(--np-ease),
              box-shadow var(--np-dur) var(--np-ease),
              border-color var(--np-dur) var(--np-ease);
}
.card:hover {
  box-shadow: var(--np-shadow-md);
  transform: translateY(-1px);
}

/* ---------- Botões ---------- */
.btn,
.btn-primary,
.btn-logout,
button:not(.bn-item):not([class*="nav-"]) {
  border-radius: var(--np-radius-xs);
  transition: transform var(--np-dur-fast) var(--np-ease),
              box-shadow var(--np-dur) var(--np-ease),
              background-color var(--np-dur) var(--np-ease),
              opacity var(--np-dur) var(--np-ease),
              filter var(--np-dur) var(--np-ease);
  will-change: transform;
}
.btn-primary {
  box-shadow: var(--np-shadow-blue);
}
.btn:hover:not(:disabled),
.btn-primary:hover:not(:disabled) {
  transform: translateY(-1px) scale(1.01);
  filter: brightness(1.06);
}
.btn:active:not(:disabled),
.btn-primary:active:not(:disabled) {
  transform: translateY(0) scale(0.99);
  filter: brightness(0.97);
}
.btn:disabled { box-shadow: none !important; }

/* ---------- Inputs ---------- */
input, select, textarea {
  border-radius: var(--np-radius-xs) !important;
  transition: border-color var(--np-dur) var(--np-ease),
              box-shadow var(--np-dur) var(--np-ease),
              background-color var(--np-dur) var(--np-ease);
}
input:focus, select:focus, textarea:focus {
  box-shadow: 0 0 0 3px rgba(37, 99, 235, .18);
}

/* ---------- Bottom nav: feedback de toque ---------- */
.bn-item, .nav-item {
  transition: color var(--np-dur) var(--np-ease),
              background-color var(--np-dur) var(--np-ease),
              transform var(--np-dur-fast) var(--np-ease);
}
.bn-item:active, .nav-item:active { transform: scale(0.96); }

/* ---------- Badges / pills / chips ---------- */
.role-tag,
[class*="badge"],
[class*="pill"]:not(.auth-pill) {
  border-radius: var(--np-radius-pill);
}

/* ---------- Tabelas ---------- */
table { border-collapse: separate; border-spacing: 0; }
th { font-weight: 700; letter-spacing: 0.02em; text-transform: uppercase; font-size: 11px; }
tbody tr { transition: background-color var(--np-dur) var(--np-ease); }
tbody tr:hover { background-color: rgba(255,255,255,.025); }

/* ---------- Toasts: levemente elevados ---------- */
.toast { box-shadow: var(--np-shadow-lg); border-radius: var(--np-radius-sm); }

/* ---------- Avatares / logo marks ---------- */
.logo-mark, .sidebar-logo .logo-sm { box-shadow: var(--np-shadow-sm); }

/* ===================== Micro-animações ===================== */

/* Entrada inicial das telas */
.screen.active { animation: np-fade-up var(--np-dur-slow) var(--np-ease) both; }

/* Cards stagger em uma seção principal */
.main > .card { animation: np-fade-up var(--np-dur-slow) var(--np-ease) both; }
.main > .card:nth-child(1) { animation-delay: 40ms; }
.main > .card:nth-child(2) { animation-delay: 90ms; }
.main > .card:nth-child(3) { animation-delay: 140ms; }
.main > .card:nth-child(4) { animation-delay: 190ms; }
.main > .card:nth-child(5) { animation-delay: 240ms; }
.main > .card:nth-child(n+6) { animation-delay: 280ms; }

/* Elementos marcados via JS (fade-in on scroll) */
.np-reveal { opacity: 0; transform: translateY(12px); }
.np-reveal.np-in {
  opacity: 1; transform: translateY(0);
  transition: opacity var(--np-dur-slow) var(--np-ease),
              transform var(--np-dur-slow) var(--np-ease);
}

@keyframes np-fade-up {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes np-pop {
  0%   { transform: scale(.96); opacity: 0; }
  100% { transform: scale(1);   opacity: 1; }
}

/* Modais / overlays: leve pop ao aparecer */
[id^="modal-"][style*="flex"] > * { animation: np-pop var(--np-dur) var(--np-ease) both; }

/* Reduz motion para usuários sensíveis */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
  }
}

/* ============ Responsive layer ============ */
:root { --np-tap: 44px; }

html { -webkit-text-size-adjust: 100%; }
body { overflow-x: hidden; }

/* Fluid typography */
h1 { font-size: clamp(1.5rem, 4vw + 0.5rem, 2.25rem); }
h2 { font-size: clamp(1.25rem, 2.5vw + 0.4rem, 1.75rem); }
h3 { font-size: clamp(1.05rem, 1.5vw + 0.4rem, 1.35rem); }
p, li, label, input, button, select, textarea { font-size: clamp(0.875rem, 0.5vw + 0.8rem, 1rem); }

/* Tables: horizontal scroll on small screens */
.table-wrap, .table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
table { width: 100%; border-collapse: collapse; }
@media (max-width: 767px) {
  table { display: block; overflow-x: auto; white-space: nowrap; }
}

/* Modals: never overflow viewport */
.modal, [class*="modal"], .np-modal {
  max-width: min(100%, 560px);
  max-height: 90vh;
  overflow-y: auto;
}

/* Forms: full width on mobile, comfortable tap targets */
@media (max-width: 767px) {
  input, select, textarea, button {
    min-height: var(--np-tap);
    width: 100%;
    box-sizing: border-box;
  }
  .row, .form-row, .grid-2, .grid-3 {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
  }
  .card { padding: 16px !important; border-radius: 14px !important; }
  .main, main, .container { padding: 12px !important; }
}

/* Tablet */
@media (min-width: 768px) and (max-width: 1023px) {
  .sidebar { width: 220px !important; }
  .main, main { padding: 20px !important; }
}

/* Desktop */
@media (min-width: 1024px) {
  .container, .main, main { max-width: 1200px; margin-left: auto; margin-right: auto; }
}

/* Sidebar -> hamburger on mobile */
@media (max-width: 767px) {
  .sidebar, aside.sidebar, #sidebar {
    position: fixed;
    inset: 0 auto 0 0;
    width: 80%;
    max-width: 300px;
    transform: translateX(-100%);
    transition: transform .25s ease;
    z-index: 9998;
    background: #0b1220;
  }
  .sidebar.open, aside.sidebar.open, #sidebar.open { transform: translateX(0); }
  .np-hamburger {
    display: inline-flex !important;
    align-items: center; justify-content: center;
    width: 44px; height: 44px;
    border-radius: 10px;
    background: #111827;
    border: 1px solid #1f2937;
    color: #F9FAFB;
    cursor: pointer;
  }
  .np-backdrop {
    position: fixed; inset: 0;
    background: rgba(0,0,0,.5);
    z-index: 9997;
    display: none;
  }
  .np-backdrop.open { display: block; }
}
.np-hamburger { display: none; }

/* Images and media */
img, video, canvas { max-width: 100%; height: auto; }

/* Long text doesn't push layout */
.card, .row, .form-row { min-width: 0; }
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ========================================================================
   NP CASH — UNIFICAÇÃO VISUAL JORNADA CLIENTE
   Padroniza fundo/paleta entre login/cadastro e dashboard (mobile cliente).
   Não afeta admin.html.
   ======================================================================== */

:root {
  --np-bg-base:    #0A0A0A;
  --np-bg-elev-1:  #111111;
  --np-bg-elev-2:  #1A1A1A;
  --np-bg-elev-3:  #2A2A2A;
  --np-green:      #00C853;
  --np-green-2:    #00E676;
  --np-green-glow: 0 10px 28px -10px rgba(0, 200, 83, .55);
  --np-radial-top: radial-gradient(1100px 520px at 50% -10%, rgba(0, 230, 118, .14), transparent 60%);
}

/* Fundo único em todas as telas do cliente */
html, body {
  background: var(--np-bg-base) !important;
}
body::before {
  content: "";
  position: fixed; inset: 0;
  background: var(--np-radial-top);
  pointer-events: none;
  z-index: 0;
}
.screen, .main, .main-with-nav { position: relative; z-index: 1; }

/* Tela de login/cadastro: mesmo fundo do resto, sem gradiente azul/roxo */
.auth-wrap:not(#s-login .auth-wrap) {
  background:
    var(--np-radial-top),
    var(--np-bg-base) !important;
}
/* .auth-logo .logo-mark — não sobrescrever; deixar a logo NP Cash aparecer */


/* Primária verde — botões, navbar, cards saldo, big-indicar, timeline */
.btn-primary,
button.btn-primary {
  background: linear-gradient(180deg, var(--np-green-2) 0%, var(--np-green) 100%) !important;
  color: #00210f !important;
  box-shadow: var(--np-green-glow) !important;
}
.btn-primary:hover { filter: brightness(1.05); }

.navbar .logo span { background: var(--np-green) !important; color: #00210f !important; }

.saldo-card {
  background: linear-gradient(135deg, #062a18 0%, #0a3e22 100%) !important;
  border: 1px solid rgba(0, 200, 83, .28) !important;
}

.big-indicar {
  background: linear-gradient(135deg, var(--np-green) 0%, var(--np-green-2) 100%) !important;
  color: #00210f !important;
  box-shadow: var(--np-green-glow) !important;
}

.tl-step.done .tl-dot { background: var(--np-green) !important; border-color: var(--np-green) !important; color: #00210f !important; }
.tl-line-fill        { background: var(--np-green) !important; }

.qa-btn:hover { border-color: var(--np-green-2) !important; background: rgba(0, 230, 118, .08) !important; }
.qa-btn i     { color: var(--np-green-2) !important; }

.tipo-opt.selected { border-color: var(--np-green-2) !important; background: rgba(0, 200, 83, .10) !important; }

/* Inputs: foco verde em vez de azul */
input, select, textarea { background: var(--np-bg-elev-2) !important; }
input:focus, select:focus, textarea:focus {
  border-color: var(--np-green-2) !important;
  box-shadow: 0 0 0 3px rgba(0, 200, 83, .20) !important;
}

/* Cards e superfícies elevadas */
.card, .lead-card2, .saque-lock { background: var(--np-bg-elev-1) !important; }

/* "Você está indicando para" usa verde sutil em vez de azul */
#dash-corretor {
  background: rgba(0, 200, 83, .10) !important;
  border-color: rgba(0, 200, 83, .35) !important;
  color: #6ee7a8 !important;
}

/* Mantém badges/pills/tipo de renda como estão (são identidades de status) */