/* ═══════════════════════════════════════════════════════
   THE3 FINANCE — Sistema de Temas
   Light Theme (padrão) + Dark Theme
   ═══════════════════════════════════════════════════════ */

/* ══════════════════════════════════════════════════════
   LIGHT THEME (padrão)
   ══════════════════════════════════════════════════════ */
:root,
[data-theme="light"] {
  --bg-app:        #f0f2f5;
  --bg-card:       #ffffff;
  --bg-sidebar:    #ffffff;
  --bg-topbar:     #ffffff;
  --bg-input:      #f8fafc;
  --bg-input-focus:#ffffff;
  --bg-hover:      #f1f5f9;
  --bg-active:     #eff6ff;
  --bg-table-head: #f8fafc;
  --bg-table-hover:#f8fafc;
  --bg-section:    #f0f2f5;
  --bg-tag:        #f1f5f9;
  --bg-modal:      #ffffff;

  --border:        #e8ecf0;
  --border-light:  #f0f2f5;
  --border-input:  #e2e8f0;
  --border-focus:  var(--blue);

  --text-main:     #1e293b;
  --text-sub:      #475569;
  --text-muted:    #94a3b8;
  --text-label:    #64748b;
  --text-nav:      #64748b;
  --text-nav-act:  var(--blue);
  --text-heading:  var(--navy);
  --text-divider:  #cbd5e1;

  --shadow-card:   0 2px 8px rgba(0,0,0,0.05);
  --shadow-card-hover: 0 8px 24px rgba(0,0,0,0.09);
  --shadow-sidebar:2px 0 12px rgba(0,0,0,0.06);
  --shadow-topbar: 0 1px 6px rgba(0,0,0,0.05);
  --shadow-modal:  0 20px 60px rgba(0,0,0,0.18), 0 4px 16px rgba(0,0,0,0.08);

  --overlay:       rgba(15,23,42,0.45);

  /* Badges de status */
  --badge-pending-bg:  #fffbeb;
  --badge-pending-txt: #d97706;
  --badge-pending-bdr: #fde68a;
  --badge-paid-bg:     #f0fdf4;
  --badge-paid-txt:    #16a34a;
  --badge-paid-bdr:    #bbf7d0;
  --badge-cancel-bg:   #f8fafc;
  --badge-cancel-txt:  #94a3b8;
  --badge-cancel-bdr:  #e2e8f0;
  --badge-overdue-bg:  #fef2f2;
  --badge-overdue-txt: #dc2626;
  --badge-overdue-bdr: #fecaca;

  /* KPI icons */
  --kpi-income-bg:  #f0fdf4;
  --kpi-expense-bg: #fef2f2;
  --kpi-balance-bg: #eff6ff;
  --kpi-pending-bg: #fffbeb;
  --kpi-cash-bg:    #f5f3ff;

  /* Botões */
  --btn-outline-bg:    #ffffff;
  --btn-outline-bdr:   #e2e8f0;
  --btn-outline-txt:   #475569;
  --btn-ok-bg:         #f0fdf4;
  --btn-ok-bdr:        #bbf7d0;
  --btn-ok-txt:        #16a34a;
  --btn-danger-bg:     #fef2f2;
  --btn-danger-bdr:    #fecaca;
  --btn-danger-txt:    #dc2626;
  --btn-edit-bg:       #eff6ff;
  --btn-edit-bdr:      #bfdbfe;
  --btn-edit-txt:      var(--blue);

  /* Select */
  --select-opt-bg:  #ffffff;
  --select-opt-txt: #1e293b;

  /* Code/IP */
  --code-bg:  #f1f5f9;
  --code-txt: #475569;
  --code-bdr: #e2e8f0;
}

/* ══════════════════════════════════════════════════════
   DARK THEME
   ══════════════════════════════════════════════════════ */
[data-theme="dark"] {
  --bg-app:        #0f1117;
  --bg-card:       #1a1f2e;
  --bg-sidebar:    #141824;
  --bg-topbar:     #141824;
  --bg-input:      #1e2436;
  --bg-input-focus:#252d42;
  --bg-hover:      #1e2436;
  --bg-active:     rgba(47,128,237,0.12);
  --bg-table-head: #1e2436;
  --bg-table-hover:#1e2436;
  --bg-section:    #0f1117;
  --bg-tag:        #1e2436;
  --bg-modal:      #1a1f2e;

  --border:        #2a3248;
  --border-light:  #222840;
  --border-input:  #2a3248;
  --border-focus:  var(--blue);

  --text-main:     #e2e8f0;
  --text-sub:      #94a3b8;
  --text-muted:    #475569;
  --text-label:    #7ca3cc;
  --text-nav:      #7ca3cc;
  --text-nav-act:  var(--blue);
  --text-heading:  #f0f5ff;
  --text-divider:  #2a3248;

  --shadow-card:   0 2px 8px rgba(0,0,0,0.3);
  --shadow-card-hover: 0 8px 24px rgba(0,0,0,0.4);
  --shadow-sidebar:2px 0 16px rgba(0,0,0,0.4);
  --shadow-topbar: 0 1px 8px rgba(0,0,0,0.3);
  --shadow-modal:  0 20px 60px rgba(0,0,0,0.6), 0 4px 16px rgba(0,0,0,0.4);

  --overlay:       rgba(0,0,0,0.65);

  /* Badges */
  --badge-pending-bg:  rgba(217,119,6,0.15);
  --badge-pending-txt: #fbbf24;
  --badge-pending-bdr: rgba(217,119,6,0.3);
  --badge-paid-bg:     rgba(22,163,74,0.15);
  --badge-paid-txt:    #4ade80;
  --badge-paid-bdr:    rgba(22,163,74,0.3);
  --badge-cancel-bg:   rgba(148,163,184,0.1);
  --badge-cancel-txt:  #64748b;
  --badge-cancel-bdr:  rgba(148,163,184,0.2);
  --badge-overdue-bg:  rgba(220,38,38,0.15);
  --badge-overdue-txt: #f87171;
  --badge-overdue-bdr: rgba(220,38,38,0.3);

  /* KPI icons */
  --kpi-income-bg:  rgba(22,163,74,0.12);
  --kpi-expense-bg: rgba(220,38,38,0.12);
  --kpi-balance-bg: rgba(47,128,237,0.12);
  --kpi-pending-bg: rgba(217,119,6,0.12);
  --kpi-cash-bg:    rgba(139,92,246,0.12);

  /* Botões */
  --btn-outline-bg:    #1e2436;
  --btn-outline-bdr:   #2a3248;
  --btn-outline-txt:   #94a3b8;
  --btn-ok-bg:         rgba(22,163,74,0.12);
  --btn-ok-bdr:        rgba(22,163,74,0.25);
  --btn-ok-txt:        #4ade80;
  --btn-danger-bg:     rgba(220,38,38,0.12);
  --btn-danger-bdr:    rgba(220,38,38,0.25);
  --btn-danger-txt:    #f87171;
  --btn-edit-bg:       rgba(47,128,237,0.12);
  --btn-edit-bdr:      rgba(47,128,237,0.25);
  --btn-edit-txt:      #60a5fa;

  /* Select */
  --select-opt-bg:  #1e2436;
  --select-opt-txt: #e2e8f0;

  /* Code/IP */
  --code-bg:  #1e2436;
  --code-txt: #94a3b8;
  --code-bdr: #2a3248;
}

/* ══════════════════════════════════════════════════════
   APLICAÇÃO DAS VARIÁVEIS — sobrescreve style.css
   ══════════════════════════════════════════════════════ */

/* Layout */
#app-page        { background: var(--bg-app) !important; }
.main-area       { background: var(--bg-app) !important; }
.section         { background: var(--bg-app) !important; }

/* Sidebar */
.sidebar {
  background:    var(--bg-sidebar) !important;
  border-color:  var(--border) !important;
  box-shadow:    var(--shadow-sidebar) !important;
}
.sb-brand        { border-color: var(--border-light) !important; }
.sb-divider      { color: var(--text-divider) !important; }
.sb-item         { color: var(--text-nav) !important; }
.sb-item:hover   { background: var(--bg-hover) !important; color: var(--text-heading) !important; }
.sb-item.active  { background: var(--bg-active) !important; color: var(--text-nav-act) !important; }
.sb-user         { border-color: var(--border-light) !important; }
.sb-user-name    { color: var(--text-heading) !important; }
.sb-user-role    { color: var(--text-muted) !important; }
.sb-logout       { color: var(--text-muted) !important; }
.sb-badge.green  { background: var(--badge-paid-bg) !important; color: var(--badge-paid-txt) !important; }
.sb-badge.red    { background: var(--badge-overdue-bg) !important; color: var(--badge-overdue-txt) !important; }

/* Topbar */
.topbar {
  background:   var(--bg-topbar) !important;
  border-color: var(--border) !important;
  box-shadow:   var(--shadow-topbar) !important;
}
.tb-title        { color: var(--text-heading) !important; }
.tb-menu         { color: var(--text-muted) !important; }
.tb-period select { background: var(--bg-input) !important; border-color: var(--border-input) !important; color: var(--text-main) !important; }

/* Cards KPI */
.kpi {
  background:   var(--bg-card) !important;
  border-color: var(--border) !important;
  box-shadow:   var(--shadow-card) !important;
}
.kpi:hover         { box-shadow: var(--shadow-card-hover) !important; }
.kpi-label         { color: var(--text-muted) !important; }
.kpi-sub           { color: var(--text-muted) !important; }
.kpi-icon-wrap.income  { background: var(--kpi-income-bg) !important; }
.kpi-icon-wrap.expense { background: var(--kpi-expense-bg) !important; }
.kpi-icon-wrap.balance { background: var(--kpi-balance-bg) !important; }
.kpi-icon-wrap.pending { background: var(--kpi-pending-bg) !important; }
.kpi-icon-wrap.cash    { background: var(--kpi-cash-bg) !important; }

/* Chart cards */
.chart-card {
  background:   var(--bg-card) !important;
  border-color: var(--border) !important;
  box-shadow:   var(--shadow-card) !important;
}
.chart-card__header h3 { color: var(--text-heading) !important; }
.chart-card__header select { background: var(--bg-input) !important; border-color: var(--border-input) !important; color: var(--text-main) !important; }

/* Cabeçalhos de seção */
.sec-head h2 { color: var(--text-heading) !important; }
.sec-head p  { color: var(--text-sub) !important; }

/* Filtros */
.filter-row  { background: var(--bg-card) !important; border-color: var(--border) !important; }
.fr-search input { background: var(--bg-input) !important; color: var(--text-main) !important; }
.fr-search svg   { color: var(--text-muted) !important; }

/* Inputs globais */
input, select, textarea {
  background:   var(--bg-input) !important;
  border-color: var(--border-input) !important;
  color:        var(--text-main) !important;
}
input:focus, select:focus, textarea:focus {
  background:   var(--bg-input-focus) !important;
  border-color: var(--border-focus) !important;
}
input::placeholder  { color: var(--text-muted) !important; }
select option       { background: var(--select-opt-bg) !important; color: var(--select-opt-txt) !important; }

/* Tabelas */
.tbl-card {
  background:   var(--bg-card) !important;
  border-color: var(--border) !important;
}
.data-table th {
  background:   var(--bg-table-head) !important;
  color:        var(--text-muted) !important;
  border-color: var(--border) !important;
}
.data-table td {
  color:        var(--text-main) !important;
  border-color: var(--border-light) !important;
}
.data-table tr:hover td { background: var(--bg-table-hover) !important; }
.tbl-foot td { background: var(--bg-table-head) !important; color: var(--text-sub) !important; border-color: var(--border) !important; }

/* Badges status */
.b-pending   { background: var(--badge-pending-bg) !important; color: var(--badge-pending-txt) !important; border-color: var(--badge-pending-bdr) !important; }
.b-paid,
.b-received  { background: var(--badge-paid-bg) !important; color: var(--badge-paid-txt) !important; border-color: var(--badge-paid-bdr) !important; }
.b-cancelled { background: var(--badge-cancel-bg) !important; color: var(--badge-cancel-txt) !important; border-color: var(--badge-cancel-bdr) !important; }
.b-overdue   { background: var(--badge-overdue-bg) !important; color: var(--badge-overdue-txt) !important; border-color: var(--badge-overdue-bdr) !important; }

/* Botões */
.btn-outline {
  background:   var(--btn-outline-bg) !important;
  border-color: var(--btn-outline-bdr) !important;
  color:        var(--btn-outline-txt) !important;
}
.btn-ok {
  background:   var(--btn-ok-bg) !important;
  border-color: var(--btn-ok-bdr) !important;
  color:        var(--btn-ok-txt) !important;
}
.btn-danger {
  background:   var(--btn-danger-bg) !important;
  border-color: var(--btn-danger-bdr) !important;
  color:        var(--btn-danger-txt) !important;
}
.btn-edit {
  background:   var(--btn-edit-bg) !important;
  border-color: var(--btn-edit-bdr) !important;
  color:        var(--btn-edit-txt) !important;
}

/* Modal */
.modal-bg  { background: var(--overlay) !important; }
.modal-box {
  background:  var(--bg-modal) !important;
  border-color:var(--border) !important;
  box-shadow:  var(--shadow-modal) !important;
}
.modal-hd    { border-color: var(--border-light) !important; }
.modal-hd h3 { color: var(--text-heading) !important; }
.modal-close { color: var(--text-muted) !important; }
.modal-close:hover { background: var(--badge-overdue-bg) !important; color: var(--badge-overdue-txt) !important; }

/* Form fields */
.form-field label    { color: var(--text-label) !important; }
.form-foot           { border-color: var(--border-light) !important; }

/* Section titles */
.bud-section-title { color: var(--text-heading) !important; border-color: var(--border-light) !important; }

/* Cards de entidades */
.ent-card, .cat-item {
  background:   var(--bg-card) !important;
  border-color: var(--border) !important;
  box-shadow:   var(--shadow-card) !important;
}
.ent-card:hover, .cat-item:hover { border-color: var(--blue) !important; box-shadow: var(--shadow-card-hover) !important; }
.ent-name   { color: var(--text-heading) !important; }
.ent-detail { color: var(--text-sub) !important; }

/* TX items */
.tx-item  { background: var(--bg-card) !important; border-color: var(--border) !important; }
.tx-item:hover { background: var(--bg-hover) !important; border-color: var(--border) !important; }
.tx-desc  { color: var(--text-main) !important; }
.tx-meta  { color: var(--text-muted) !important; }

/* Recent list */
.recent-card, #recent-list { color: var(--text-main) !important; }

/* Audit / Logs */
.log-stat-card, .inv-stat-card {
  background:   var(--bg-card) !important;
  border-color: var(--border) !important;
  box-shadow:   var(--shadow-card) !important;
}
.lsc-value { color: var(--text-heading) !important; }
.lsc-label { color: var(--text-muted) !important; }
.act-badge { border-color: transparent !important; }

/* Código IP */
code {
  background:   var(--code-bg) !important;
  color:        var(--code-txt) !important;
  border-color: var(--code-bdr) !important;
}

/* Inventário */
.inv-client-group  { background: var(--bg-card) !important; border-color: var(--border) !important; }
.inv-items-grid    { background: var(--bg-hover) !important; }
.inv-item-card     { background: var(--bg-card) !important; border-color: var(--border) !important; }
.inv-item-card:hover { border-color: var(--blue) !important; }
.inv-item-name     { color: var(--text-heading) !important; }
.inv-item-sub      { color: var(--text-sub) !important; }
.inv-item-specs    { background: var(--bg-input) !important; color: var(--text-sub) !important; }
.inv-item-loc,
.inv-item-pat,
.inv-item-serial   { background: var(--bg-tag) !important; color: var(--text-sub) !important; }
.inv-stat-card.wide { background: var(--bg-card) !important; border-color: var(--border) !important; }
.inv-cat-chip      { background: var(--bg-tag) !important; border-color: var(--border) !important; color: var(--text-sub) !important; }

/* Orçamentos */
.bud-items-header  { background: var(--bg-table-head) !important; border-color: var(--border) !important; }
.bud-item-row      { background: var(--bg-card) !important; border-color: var(--border) !important; }
.bud-item-row:hover { background: var(--bg-hover) !important; }

/* Permissões */
.perm-module-card  { background: var(--bg-card) !important; border-color: var(--border-input) !important; }
.perm-module-card:hover { border-color: var(--blue) !important; background: var(--bg-active) !important; }
.perm-module-card.checked { border-color: var(--blue) !important; background: var(--bg-active) !important; }
.pmc-label         { color: var(--text-heading) !important; }
.pmc-desc          { color: var(--text-sub) !important; }
.perm-client-box   { background: var(--bg-table-head) !important; border-color: var(--border-input) !important; }
.pcb-info          { background: var(--bg-active) !important; color: var(--text-sub) !important; border-color: var(--border-focus) !important; }
.perm-toggle-opt   { border-color: var(--border-input) !important; }
.perm-toggle-opt.active { border-color: var(--blue) !important; background: var(--bg-active) !important; }
.pto-title         { color: var(--text-heading) !important; }
.pto-desc          { color: var(--text-sub) !important; }

/* Settings */
.settings-card  { background: var(--bg-card) !important; border-color: var(--border) !important; }
.settings-card h3 { color: var(--text-heading) !important; }
.settings-card p  { color: var(--text-sub) !important; }
.settings-tabs    { background: var(--bg-table-head) !important; border-color: var(--border) !important; }
.user-row         { border-color: var(--border-light) !important; }
.user-row:hover   { background: var(--bg-hover) !important; }
.user-row-name    { color: var(--text-heading) !important; }
.user-row-email   { color: var(--text-sub) !important; }

/* Pagination */
.pagination      { background: var(--bg-card) !important; border-color: var(--border) !important; }
.pg-info         { color: var(--text-muted) !important; }
.pg-btn          { background: var(--bg-table-head) !important; border-color: var(--border) !important; color: var(--text-sub) !important; }
.pg-cur          { color: var(--text-sub) !important; }

/* Toast */
.toast           { background: var(--bg-card) !important; border-color: var(--border) !important; color: var(--text-main) !important; }

/* Empty state */
.empty-state p   { color: var(--text-muted) !important; }

/* Scrollbar dark */
[data-theme="dark"] ::-webkit-scrollbar-thumb { background: #2a3248; }

/* ══════════════════════════════════════════════════════
   TOGGLE BUTTON
   ══════════════════════════════════════════════════════ */
.theme-toggle {
  display: flex;
  align-items: center;
  gap: .5rem;
  background: var(--bg-input);
  border: 1.5px solid var(--border-input);
  border-radius: 999px;
  padding: .3rem .75rem;
  cursor: pointer;
  font-size: .78rem;
  font-weight: 600;
  color: var(--text-label);
  transition: background .2s, border-color .2s, color .2s;
  flex-shrink: 0;
  margin-left: auto;
}
.theme-toggle:hover {
  border-color: var(--blue);
  color: var(--blue);
}
.theme-toggle svg { width: 15px; height: 15px; flex-shrink: 0; }
.theme-toggle-track {
  width: 32px; height: 18px;
  background: var(--border-input);
  border-radius: 999px;
  position: relative;
  transition: background .2s;
  flex-shrink: 0;
}
.theme-toggle-track::after {
  content: '';
  position: absolute;
  top: 2px; left: 2px;
  width: 14px; height: 14px;
  background: #ffffff;
  border-radius: 50%;
  transition: transform .2s, background .2s;
  box-shadow: 0 1px 4px rgba(0,0,0,0.2);
}
[data-theme="dark"] .theme-toggle-track { background: var(--blue); }
[data-theme="dark"] .theme-toggle-track::after { transform: translateX(14px); }