/* ========= Fintech Pro DARK Theme ========= */
/* Dark-first sem alterar HTML/PHP. Override das classes Tailwind mais usadas. */

:root{
  /* Paleta base (dark) */
  --surface:#0b0f17;        /* fundo principal */
  --surface-2:#0f1522;      /* fundo secundário / page */
  --panel:#131a26;          /* cartões/inputs */
  --text:#e5e7eb;           /* texto principal */
  --muted:#94a3b8;          /* texto secundário */
  --border:rgba(148,163,184,0.18);

  /* Marcas */
  --brand-400:#8ea0ff;
  --brand-500:#7b8cff;
  --brand-600:#5f6af7;
  --brand-700:#4b55e8;

  --accent-400:#41dfb1;
  --accent-500:#18c89b;
  --accent-600:#0fa37f;

  --rose-500:#ef4444;
  --amber-500:#f59e0b;

  /* BG com glow suave */
  --radial: radial-gradient(1200px 600px at 10% -10%, rgba(95,106,247,0.18), transparent 55%),
            radial-gradient(900px 600px at 90% 10%, rgba(24,200,155,0.14), transparent 60%);
}

html,body {
  font-family: "Inter", ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial;
  color: var(--text);
}
.app-bg { background: var(--surface-2); background-image: var(--radial); }

/* ===== Topbar vidro ===== */
.topbar {
  position: sticky; top:0; z-index: 40;
  backdrop-filter: saturate(140%) blur(10px);
  background: rgba(19,26,38,0.72);
  border-bottom: 1px solid var(--border);
}

/* ===== Cards / containers ===== */
.ui-card{
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 20px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.25);
  transition: box-shadow .25s ease, transform .25s ease;
}
.ui-card.hover:hover{ box-shadow: 0 18px 44px rgba(0,0,0,0.35); transform: translateY(-1px); }

/* ===== Botões ===== */
.btn{ display:inline-flex; align-items:center; gap:.6rem; font-weight:600; padding:.65rem 1rem; border-radius:14px; border:1px solid transparent; transition:.2s ease; }
.btn:disabled{ opacity:.55; cursor:not-allowed; }
.btn-primary{
  background: linear-gradient(180deg, var(--brand-500), var(--brand-600)); color:#fff;
  box-shadow: 0 10px 26px rgba(95,106,247,.28);
}
.btn-primary:hover{ filter:brightness(1.05); }
.btn-accent{
  background: linear-gradient(180deg, var(--accent-500), var(--accent-600)); color:#04130f;
  box-shadow: 0 10px 26px rgba(24,200,155,.22);
}
.btn-accent:hover{ filter:brightness(1.05); }
.btn-neutral{ background: var(--panel); color: var(--text); border-color: var(--border); }
.btn-neutral:hover{ background:#0e1726; }
.btn-danger{ background:linear-gradient(180deg, #f87171, var(--rose-500)); color:#fff; }

/* ===== Inputs elegantes ===== */
.field > input, .field > select, .field > textarea{
  width:100%; background: var(--panel); color: var(--text);
  border:1px solid var(--border); border-radius:14px; padding:10px 12px;
  transition: border-color .15s, box-shadow .15s, background-color .15s;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.02);
}
.field > input::placeholder, .field > textarea::placeholder { color: #7c8aa5; }
.field > input:focus, .field > select:focus, .field > textarea:focus{
  outline: none; border-color: var(--brand-400);
  box-shadow: 0 0 0 4px rgba(123,140,255,.18);
}

/* Botão do input file */
input[type="file"]::file-selector-button{
  background: var(--panel); color: var(--text);
  border:1px solid var(--border); border-radius:12px; padding:.45rem .8rem; cursor:pointer;
}
input[type="file"]::file-selector-button:hover{ background:#0e1726; }

/* ===== Labels / microtextos ===== */
.label{ font-size:.85rem; color:var(--muted); font-weight:600; }
.kpi{ font-size:.9rem; color:var(--muted); }
.kpi b{ color:var(--text); }

/* ===== Tabs pílula ===== */
.tabs{ display:flex; gap:.5rem; }
.tab{
  padding:.55rem .95rem; border-radius:12px; border:1px solid var(--border);
  background: var(--panel); color: var(--text); font-weight:700; font-size:.92rem;
}
.tab.active{
  background: linear-gradient(180deg, var(--brand-600), var(--brand-700)); color:#fff; border-color: transparent;
  box-shadow: 0 10px 20px rgba(95,106,247,.25);
}
.tab:hover{ filter: brightness(1.03); }

/* ===== Progress premium ===== */
.progress{ height:12px; border-radius:999px; background:#0e1625; position:relative; overflow:hidden; border:1px solid var(--border); }
.progress > span{
  display:block; height:100%;
  background: linear-gradient(90deg, var(--brand-600), var(--accent-500));
  position:relative;
}
.progress > span::after{
  content:""; position:absolute; inset:0;
  background-image: linear-gradient(135deg, rgba(255,255,255,0.12) 25%, transparent 25%, transparent 50%, rgba(255,255,255,0.12) 50%, rgba(255,255,255,0.12) 75%, transparent 75%, transparent);
  background-size: 24px 24px; mix-blend-mode: screen; animation: stripes 1.2s linear infinite;
}
@keyframes stripes { to{ background-position: 24px 0; } }

/* ===== Alerts ===== */
.alert{ border-radius:16px; padding:14px 16px; display:flex; gap:.75rem; align-items:flex-start; border:1px solid; }
.alert.warn{ background:#221908; border-color:#3b2a08; color:#f6d397; }
.alert.info{ background:#0b1631; border-color:#1f2b4d; color:#c7d2fe; }
.alert.good{ background:#081e17; border-color:#103428; color:#a7f3d0; }
.alert.bad{ background:#2a0f0f; border-color:#3d1a1a; color:#fecaca; }

/* ===== Badges ===== */
.badge{ font-size:.72rem; font-weight:800; padding:.28rem .55rem; border-radius:999px; border:1px solid transparent; }
.badge.ok{ color:#22c55e; background:rgba(34,197,94,.15); border-color:rgba(34,197,94,.28); }
.badge.pending{ color:#cbd5e1; background:#0f172a; border-color:var(--border); }
.badge.reject{ color:#fca5a5; background:rgba(239,68,68,.12); border-color:rgba(239,68,68,.28); }

/* ===== Tabela ===== */
.table { width:100%; border-collapse:separate; border-spacing:0 8px; }
.table th{ color:#8aa0be; font-weight:800; font-size:.8rem; text-transform:uppercase; letter-spacing:.04em; padding:6px 10px; }
.table td{ background:var(--panel); border:1px solid var(--border); padding:12px 10px; color:var(--text); }
.table tr td:first-child{ border-radius:12px 0 0 12px; }
.table tr td:last-child{ border-radius:0 12px 12px 0; }

/* ===== Links ===== */
a.link{ color: var(--brand-500); font-weight:700; }
a.link:hover{ text-decoration: underline; }

/* ===== Ajustes de utilitários Tailwind para dark ===== */
/* BG */
.bg-white, .bg-slate-50, .bg-slate-100 { background-color: var(--panel) !important; }
.bg-slate-200 { background-color: #0e1625 !important; }
/* Borders */
.border-slate-200, .border { border-color: var(--border) !important; }
/* Textos */
.text-slate-900, .text-slate-800, .text-slate-700 { color: var(--text) !important; }
.text-slate-600, .text-slate-500, .text-slate-400 { color: var(--muted) !important; }
/* Ícones / cores utilitárias */
.text-emerald-600 { color:#22c55e !important; }
.text-indigo-600 { color: var(--brand-600) !important; }

/* ===== Pequenos utilitários ===== */
.stack{ display:flex; align-items:center; gap:.6rem; }

/* ===== Chips/tags custom topbar ===== */
.topbar .chip {
  background: linear-gradient(90deg,var(--brand-600),var(--accent-500));
  color:#0b0f17; font-weight:800; letter-spacing:.02em;
  border-radius:12px; padding:4px 10px;
}
/* ===== Select (dropdown) – dark legível ===== */
select, select.field, .field select, .ui-card select {
  appearance: none; -webkit-appearance: none; -moz-appearance: none;
  background: var(--panel) !important;
  color: var(--text) !important;           /* <<< texto claro e legível */
  border: 1px solid var(--border) !important;
  border-radius: 12px;
  padding: .48rem .7rem;
  font-weight: 600;
}
select:focus {
  outline: none;
  border-color: var(--brand-400) !important;
  box-shadow: 0 0 0 4px rgba(123,140,255,.18);
}
select:disabled { opacity: .6; }

/* opções dentro do menu */
select option {
  background: var(--panel);
  color: var(--text);
}

/* (opcional) versão compacta em tabelas/listas */
.ui-card select {
  padding: .4rem .6rem;
  font-weight: 600;
}
/* ===== Fix: inputs aninhados dentro de .field (ex.: senha com ícone) ===== */
.field input, .field select, .field textarea {
  width:100%;
  background: var(--panel);
  color: var(--text);
  border:1px solid var(--border);
  border-radius:14px;
  padding:10px 12px;
  transition: border-color .15s, box-shadow .15s, background-color .15s;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.02);
  caret-color: var(--text);
}
.field input::placeholder, .field textarea::placeholder { color:#7c8aa5; }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none;
  border-color: var(--brand-400);
  box-shadow: 0 0 0 4px rgba(123,140,255,.18);
}

/* Dá espaço pro botão "olho" dentro do wrapper .relative */
.field .relative input { padding-right:2.2rem; }

/* ===== Autofill (Chrome/Safari/Firefox) não ficar branco ===== */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--text) !important;
  -webkit-box-shadow: 0 0 0 1000px var(--panel) inset !important;
  transition: background-color 99999s ease-in-out 0s;
  border:1px solid var(--border) !important;
}
input:-moz-autofill {
  box-shadow: 0 0 0 1000px var(--panel) inset !important;
  -moz-text-fill-color: var(--text) !important;
  border:1px solid var(--border) !important;
}

/* (opcional) deixa o botão do olho mais discreto e com hover */
.field .relative button { color: var(--muted); }
.field .relative button:hover { color: var(--text); }