:root{
  --ui-bg: #f6f7f9;
  --ui-card: #ffffff;
  --ui-text: #111827;
  --ui-muted: #6b7280;
  --ui-border: #e5e7eb;
  --ui-shadow: 0 10px 25px rgba(0,0,0,.06);
  --ui-radius: 14px;

  --ui-primary: #111827; /* sóbrio */
  --ui-primary-hover: #0b1220;

  --ui-focus: rgba(17,24,39,.10);
}

*{ box-sizing: border-box; }

html, body { height: 100%; }

body{
  font-family: system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  color: var(--ui-text);
  background: var(--ui-bg);
}

/* fundo padrão (login / páginas públicas) */
.ui-auth-bg{
  color: var(--ui-text);
  background: radial-gradient(1200px 600px at 20% 10%, #ffffff 0%, var(--ui-bg) 55%, #f3f4f6 100%);
}

/* card padrão */
.ui-card{
  background: var(--ui-card);
  border: 1px solid var(--ui-border);
  border-radius: var(--ui-radius);
  box-shadow: var(--ui-shadow);
}

/* tipografia */
.ui-title{
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.ui-subtitle{
  color: var(--ui-muted);
  font-size: .95rem;
}

.ui-label{
  font-size: .85rem;
  color: var(--ui-muted);
}

/* inputs */
.ui-input{
  background: #ffffff;
  color: var(--ui-text);
  border-radius: 12px;
  border: 1px solid var(--ui-border);
  padding: .7rem .85rem;
}

.ui-input::placeholder{
  color: #9ca3af;
}

.ui-input:focus{
  border-color: #cbd5e1;
  box-shadow: 0 0 0 .2rem var(--ui-focus);
  outline: none;
}

/* links */
.ui-link{
  color: var(--ui-text);
  text-decoration: none;
}

.ui-link:hover{
  text-decoration: underline;
}

.ui-muted{ color: var(--ui-muted); }

/* ===========================
   BOTÕES (fix de contraste)
   =========================== */

/* primário (vale para <button> e <a>) */
.ui-btn-primary{
  background: var(--ui-primary);
  border: 1px solid var(--ui-primary);
  border-radius: 12px;
  padding: .75rem 1rem;
  font-weight: 600;

  /* FIX CRÍTICO: contraste */
  color: #ffffff !important;
  text-decoration: none !important;
}

/* ===========================
   MODO DARK (Variáveis e Fixes)
   =========================== */

:root.theme-dark {
  --ui-bg: #020617;
  --ui-card: #0f172a;
  --ui-text: #f1f5f9;
  --ui-muted: #94a3b8;
  --ui-border: #1e293b;
  --ui-shadow: 0 10px 25px rgba(0,0,0,.3);
  --ui-primary: #f1f5f9;
  --ui-primary-hover: #ffffff;
  --ui-focus: rgba(241,245,249,.15);
}

:root.theme-dark body {
  background-color: var(--ui-bg);
  color: var(--ui-text);
}

/* Botões Secundários no Dark (TopBar Buttons) */
:root.theme-dark .ui-btn-secondary,
:root.theme-dark .btn-secondary,
:root.theme-dark .btn-outline-secondary,
:root.theme-dark .ui-btn-light {
  background-color: #1e293b !important;
  border-color: #334155 !important;
  color: #f1f5f9 !important;
}

:root.theme-dark .ui-btn-secondary:hover,
:root.theme-dark .btn-secondary:hover,
:root.theme-dark .ui-btn-light:hover {
  background-color: #334155 !important;
  border-color: #475569 !important;
  color: #ffffff !important;
}

/* Cards de Finanças e outros cards com fundo branco forçado */
:root.theme-dark .card,
:root.theme-dark .ui-card,
:root.theme-dark .bg-white,
:root.theme-dark .bg-light {
  background-color: var(--ui-card) !important;
  border-color: var(--ui-border) !important;
  color: var(--ui-text) !important;
}

/* Inputs e Selects no Dark */
:root.theme-dark .form-control,
:root.theme-dark .form-select,
:root.theme-dark .ui-input,
:root.theme-dark select,
:root.theme-dark input {
  background-color: #0f172a !important;
  border-color: #334155 !important;
  color: #f1f5f9 !important;
}

:root.theme-dark .form-control:focus,
:root.theme-dark .form-select:focus,
:root.theme-dark .ui-input:focus {
  background-color: #1e293b !important;
  border-color: #475569 !important;
  box-shadow: 0 0 0 0.25rem rgba(241, 245, 249, 0.1) !important;
}

:root.theme-dark .form-control::placeholder,
:root.theme-dark .ui-input::placeholder {
  color: #64748b !important;
}

/* Ajuste de textos mutados no dark */
:root.theme-dark .text-muted,
:root.theme-dark .ui-muted {
  color: #94a3b8 !important;
}

/* Tabelas no Dark */
:root.theme-dark .table {
  color: #f1f5f9 !important;
}

:root.theme-dark .table thead th {
  border-bottom-color: #334155 !important;
  background-color: #1e293b !important;
}

:root.theme-dark .table td {
  border-bottom-color: #1e293b !important;
}

/* Paginação DataTable */
:root.theme-dark .page-link {
  background-color: #0f172a !important;
  border-color: #1e293b !important;
  color: #f1f5f9 !important;
}

:root.theme-dark .page-item.active .page-link {
  background-color: #334155 !important;
  border-color: #475569 !important;
}

/* Modais no Dark */
:root.theme-dark .modal-content {
  background-color: #0f172a !important;
  border-color: #1e293b !important;
  color: #f1f5f9 !important;
}

:root.theme-dark .modal-header,
:root.theme-dark .modal-footer {
  border-color: #1e293b !important;
}

/* Fix específico para botões da Topbar que podem ter classes .btn-light ou .bg-white */
:root.theme-dark .pl-topbar .btn,
:root.theme-dark .pl-topbar .btn-light,
:root.theme-dark .pl-topbar a.btn {
  background-color: #1e293b !important;
  border-color: #334155 !important;
  color: #f1f5f9 !important;
}

/* Fix para a Topbar no modo Dark */
:root.theme-dark .pl-topbar {
  background: rgba(15, 23, 42, 0.95) !important;
  border-bottom-color: #1e293b !important;
}

/* Fix para Sidebar no modo Dark */
:root.theme-dark .pl-sidebar {
  background-color: #0f172a !important;
  border-right-color: #1e293b !important;
}

:root.theme-dark .pl-side-header,
:root.theme-dark .pl-side-footer {
  border-color: #1e293b !important;
}

:root.theme-dark .pl-nav a:hover,
:root.theme-dark .pl-group > .pl-group-toggle:hover {
  background-color: #1e293b !important;
  border-color: #334155 !important;
}

:root.theme-dark .pl-nav a.is-active {
  background-color: rgba(241, 245, 249, 0.1) !important;
  border-color: rgba(241, 245, 249, 0.2) !important;
  color: #ffffff !important;
}

/* Fix para a Home do Painel Admin e Igreja (Cards de Finanças e KPIs) */
:root.theme-dark .money,
:root.theme-dark .kpi,
:root.theme-dark .card-ig,
:root.theme-dark .alert-kpi {
  background: #1e293b !important;
  border-color: #334155 !important;
  color: #ffffff !important;
}

:root.theme-dark .money-strong {
  background: #334155 !important;
  border-color: #475569 !important;
}

:root.theme-dark .money-value,
:root.theme-dark .kpi-value,
:root.theme-dark .alert-value,
:root.theme-dark .card-ig-name {
  color: #ffffff !important;
  text-shadow: 0 1px 2px rgba(0,0,0,0.3);
}

:root.theme-dark .money-label,
:root.theme-dark .kpi-label,
:root.theme-dark .alert-label,
:root.theme-dark .kpi-foot,
:root.theme-dark .panel-sub {
  color: #cbd5e1 !important;
}

/* Fix para Títulos de Seção no Painel Igreja (estavam muito escuros no dark) */
:root.theme-dark .dash-title,
:root.theme-dark .panel-title,
:root.theme-dark .dash-head .dash-title,
:root.theme-dark .panel-head .panel-title {
  color: #ffffff !important;
  opacity: 1 !important;
}

/* Ajuste de textos mutados no dark */
:root.theme-dark .dash-sub,
:root.theme-dark .panel-sub,
:root.theme-dark .kpi-foot,
:root.theme-dark .text-muted,
:root.theme-dark .ui-muted {
  color: #94a3b8 !important;
  opacity: 1 !important;
}

/* Sombra e elevação dos cards no dark */
:root.theme-dark .kpi,
:root.theme-dark .panel,
:root.theme-dark .ui-card,
:root.theme-dark .card {
  box-shadow: 0 4px 12px rgba(0,0,0,0.4) !important;
  background-color: #0f172a !important;
}

/* Força fundo escuro nos elementos do dashboard */
:root.theme-dark .dash-head,
:root.theme-dark .dash-chip,
:root.theme-dark .panel,
:root.theme-dark .panel-head {
  background: #0f172a !important;
  border-color: #1e293b !important;
}

/* Força textos claros e nítidos */
:root.theme-dark .dash-title,
:root.theme-dark .panel-title,
:root.theme-dark .kpi-value,
:root.theme-dark .money-value,
:root.theme-dark .alert-value,
:root.theme-dark .card-ig-name,
:root.theme-dark .dash-head .dash-title,
:root.theme-dark .dash-chip strong,
:root.theme-dark .text-dark,
:root.theme-dark .fw-bold.text-dark {
  color: #ffffff !important;
  opacity: 1 !important;
  text-shadow: 0 1px 2px rgba(0,0,0,0.3);
}

/* Subtítulos e textos secundários */
:root.theme-dark .dash-sub,
:root.theme-dark .panel-sub,
:root.theme-dark .kpi-foot,
:root.theme-dark .money-label,
:root.theme-dark .alert-label,
:root.theme-dark .dash-chip span,
:root.theme-dark .text-muted,
:root.theme-dark .text-secondary,
:root.theme-dark .ui-muted {
  color: #cbd5e1 !important;
  opacity: 1 !important;
}

/* Fix para badges e elementos com bg-light/bg-white no dark */
:root.theme-dark .bg-light,
:root.theme-dark .bg-white {
  background-color: #1e293b !important;
  color: #f1f5f9 !important;
  border-color: #334155 !important;
}

:root.theme-dark .badge.bg-light.text-dark {
  background-color: #334155 !important;
  color: #f1f5f9 !important;
  border: 1px solid #475569 !important;
}

/* Fix para botões que podem estar "sumindo" */
:root.theme-dark .btn-light {
  background: #334155 !important;
  border-color: #475569 !important;
  color: #ffffff !important;
}

:root.theme-dark .btn-close {
  filter: invert(1) grayscale(100%) brightness(200%);
}

.ui-btn-primary:hover{
  background: var(--ui-primary-hover);
  border-color: var(--ui-primary-hover);
  color: #ffffff !important;
  text-decoration: none !important;
}

.ui-btn-primary:focus{
  outline: none;
  box-shadow: 0 0 0 .2rem var(--ui-focus);
  color: #ffffff !important;
}

.ui-btn-primary:active{
  transform: translateY(1px);
}

/* garantir para links */
a.ui-btn-primary,
a.ui-btn-primary:link,
a.ui-btn-primary:visited{
  color: #ffffff !important;
  text-decoration: none !important;
}

/* secundário */
.ui-btn-secondary{
  border-radius: 12px;
  padding: .75rem 1rem;
  border: 1px solid var(--ui-border);
  background: #fff;
  color: var(--ui-text);
  font-weight: 600;
  text-decoration: none;
}

.ui-btn-secondary:hover{
  background: #f9fafb;
  color: var(--ui-text);
  text-decoration: none;
}

a.ui-btn-secondary,
a.ui-btn-secondary:link,
a.ui-btn-secondary:visited{
  color: var(--ui-text);
  text-decoration: none;
}

/* helpers do auth */
.ui-logo-wrap{
  width: 44px;
  height: 44px;
  border-radius: 12px;
  border: 1px solid var(--ui-border);
  background: #fff;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
}

.ui-logo-img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* input-group no padrão */
.ui-input-group{
  border-radius: 12px;
  overflow: hidden;
}

.ui-input-group-left{
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

/* botão fantasma (ícone olho) */
.ui-btn-ghost{
  border: 1px solid var(--ui-border);
  border-left: 0;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  background: #fff;
  color: var(--ui-muted);
  padding: .7rem .9rem;
}

.ui-btn-ghost:hover{
  background: #f9fafb;
  color: var(--ui-text);
}

/* modal no padrão */
.ui-modal{
  background: #ffffff;
  border: 1px solid var(--ui-border);
  border-radius: 14px;
  box-shadow: var(--ui-shadow);
}