/* ==========================================================================
   MPS ERP MAKE - Folha de Estilos Universal de Temas (Claro / Escuro)
   Garante reatividade visual instantânea em /pdv, /gerencia, /owner e /mobile
   Beauty Retail OS — tokens alinhados à marca (Oxford Slate + Champagne)
   ========================================================================== */

:root {
  /* Superfícies */
  --mps-bg-dark: #0f172a;
  --mps-bg-light: #f8fafc;
  --mps-bg-muted: #f1f5f9;
  --mps-surface-dark: #1e293b;
  --mps-surface-light: #ffffff;
  /* Brand */
  --mps-primary: #0f2b48;       /* Oxford Slate */
  --mps-primary-deep: #0f2438;
  --mps-ink: #0f172a;
  --mps-ink-soft: #1e293b;
  --mps-accent: #c5a880;        /* Champagne — tema escuro */
  --mps-gold: #d97706;          /* Âmbar refinado — tema claro / CTAs */
  --mps-gold-deep: #b45309;
  --mps-accent-soft: #b76e79;   /* Rosé elegante */
  --mps-rose-action: #e07a5f;   /* Terracota pontual (CTA secundário) */
  /* Semânticas */
  --mps-danger: #dc2626;
  --mps-success: #059669;       /* Esmeralda */
  --mps-warn: #d97706;
  --mps-flash-bip: #fef3c7;
  --mps-card-shadow: 0 12px 30px rgba(15, 23, 42, 0.08);
  --mps-border-soft: #e2e8f0;
  /* Tipografia / touch */
  --mps-touch-min: 48px;
  --mps-row-pad-y: 10px;
  --mps-row-pad-x: 14px;
}

html.light {
  --mps-accent: #d97706;
}

/* Transições suaves ao alternar tema */
body, header, aside, main, section, nav, div, button, input, select, table {
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

/* Valores monetários — largura estável na digitação */
.valor-monetario,
.font-mono.mps-money,
#txtSubtotal,
#txtDesconto,
#txtTotalLiquido,
#txtSaldoCaixa {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
}

/* Swatch de tom (SKU beauty) */
.mps-swatch {
  display: inline-block;
  width: 14px;
  height: 14px;
  border-radius: 9999px;
  flex-shrink: 0;
  border: 1px solid rgba(255, 255, 255, 0.35);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.15);
  vertical-align: middle;
}

html.light .mps-swatch,
html:not(.dark) .mps-swatch {
  border-color: rgba(15, 43, 72, 0.25);
}

/* Skeleton / shimmer (catálogo) */
@keyframes mps-shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

.mps-skeleton {
  background: linear-gradient(
    90deg,
    rgba(148, 163, 184, 0.12) 0%,
    rgba(197, 168, 128, 0.22) 50%,
    rgba(148, 163, 184, 0.12) 100%
  );
  background-size: 200% 100%;
  animation: mps-shimmer 1.4s ease-in-out infinite;
  border-radius: 1rem;
}

/* Alvos de toque mínimos */
.mps-touch-target {
  min-height: var(--mps-touch-min);
}

/* Flash pós-bipagem */
@keyframes mps-bip-flash {
  0% { background-color: var(--mps-flash-bip); }
  100% { background-color: transparent; }
}

.mps-item-flash {
  animation: mps-bip-flash 300ms ease-out;
}

/* ==========================================================================
   REGRAS DE TEMA CLARO (Ativadas quando html não possui .dark ou tem .light)
   ========================================================================== */

html:not(.dark) body,
html.light body {
  background-color: var(--mps-bg-light) !important;
  background-image: linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%) !important;
  color: var(--mps-ink) !important;
}

html:not(.dark) header,
html.light header {
  background: rgba(255, 255, 255, 0.92) !important;
  border-color: var(--mps-border-soft) !important;
  box-shadow: 0 1px 0 rgba(15, 23, 42, 0.04);
}

html:not(.dark) aside,
html.light aside {
  background-color: #f8fafc !important;
  border-color: #e2e8f0 !important;
}

html:not(.dark) nav,
html.light nav {
  background-color: #ffffff !important;
  border-color: #e2e8f0 !important;
}

/* Cartões e Painéis Principais */
html:not(.dark) .bg-slate-950,
html.light .bg-slate-950 {
  background-color: #f1f5f9 !important;
}

html:not(.dark) .bg-slate-900,
html:not(.dark) .bg-slate-900\/80,
html:not(.dark) .bg-slate-900\/70,
html:not(.dark) .bg-slate-900\/60,
html:not(.dark) .bg-slate-900\/50,
html.light .bg-slate-900,
html.light .bg-slate-900\/80,
html.light .bg-slate-900\/70,
html.light .bg-slate-900\/60,
html.light .bg-slate-900\/50 {
  background-color: #ffffff !important;
  border-color: var(--mps-border-soft) !important;
  box-shadow: var(--mps-card-shadow);
}

html:not(.dark) .bg-slate-800,
html:not(.dark) .bg-slate-800\/80,
html:not(.dark) .bg-slate-800\/60,
html.light .bg-slate-800,
html.light .bg-slate-800\/80,
html.light .bg-slate-800\/60 {
  background-color: #f1f5f9 !important;
  border-color: #e2e8f0 !important;
}

/* Tipografia em Modo Claro */
html:not(.dark) .text-slate-100,
html:not(.dark) .text-slate-200,
html.light .text-slate-100,
html.light .text-slate-200 {
  color: #0f172a !important;
}

html.light .text-slate-300,
html.light .text-slate-400,
html:not(.dark) .text-slate-300,
html:not(.dark) .text-slate-400 {
  color: #334155 !important;
}

/* Auxiliares ainda mais escuros em cards brancos (labels de KPI) */
html.light .text-xs.text-slate-400,
html.light .text-\[11px\].text-slate-400,
html.light .text-\[10px\].text-slate-400 {
  color: #475569 !important;
  font-weight: 500;
}

html:not(.dark) .text-slate-500,
html.light .text-slate-500 {
  color: #475569 !important;
}

/* ==========================================================================
   TEMA CLARO — correção de contraste (Gerência / Owner / PDV / Catálogo)
   Problema: banners com via-slate-900 continuam escuros, mas text-slate-*
   era forçado para cinza escuro → texto ilegível. KPIs champagne em fundo
   branco também falhavam contraste.
   ========================================================================== */

/* Números/acentos de marca: champagne escurecido sobre superfícies claras */
html.light .text-mps-accent,
html.light .text-\[\#c5a880\],
html.light .text-amber-300,
html.light .text-amber-400 {
  color: var(--mps-gold-deep) !important;
}
html.light .text-pink-300,
html.light .text-pink-400,
html.light .text-indigo-300,
html.light .text-indigo-400 {
  color: var(--mps-gold) !important;
}

/* Semânticas mais fortes sobre fundo claro */
html.light .text-emerald-300,
html.light .text-emerald-400 {
  color: var(--mps-success) !important;
}
html.light .text-rose-300,
html.light .text-rose-400,
html.light .text-red-400 {
  color: #be123c !important;
}
html.light .text-amber-500 {
  color: #b45309 !important;
}

/* Sidebar: inativos mais escuros */
html.light .nav-inactive {
  color: #334155 !important;
}
html.light .nav-active {
  background-color: rgba(217, 119, 6, 0.12) !important;
  color: var(--mps-ink) !important;
  border-left-color: var(--mps-gold) !important;
}

/* Banners hero escuros (via-slate-900 etc.): tipografia SEMPRE clara */
html.light .bg-gradient-to-r[class*="via-slate-900"],
html.light .bg-gradient-to-br[class*="to-slate-900"],
html.light .bg-gradient-to-r[class*="from-slate-900"],
html.light .bg-gradient-to-br[class*="from-emerald-950"],
html.light .bg-gradient-to-r[class*="from-rose-950"],
html.light .bg-gradient-to-r[class*="from-pink-950"],
html.light .bg-gradient-to-r[class*="from-purple-950"],
html.light .bg-gradient-to-r[class*="from-indigo-950"],
html.light .bg-gradient-to-r[class*="from-blue-950"],
html.light .bg-gradient-to-r[class*="from-emerald-950"],
html.light .bg-gradient-to-r[class*="from-cyan-950"],
html.light .bg-gradient-to-r[class*="from-amber-950"] {
  color: #f1f5f9 !important;
}

html.light .bg-gradient-to-r[class*="via-slate-900"] .text-slate-100,
html.light .bg-gradient-to-r[class*="via-slate-900"] .text-slate-200,
html.light .bg-gradient-to-r[class*="via-slate-900"] .text-white,
html.light .bg-gradient-to-r[class*="via-slate-900"] h2,
html.light .bg-gradient-to-r[class*="via-slate-900"] h3,
html.light .bg-gradient-to-br[class*="to-slate-900"] .text-slate-100,
html.light .bg-gradient-to-br[class*="to-slate-900"] .text-slate-200,
html.light .bg-gradient-to-br[class*="to-slate-900"] h2,
html.light .bg-gradient-to-r[class*="from-"][class*="950"] .text-slate-100,
html.light .bg-gradient-to-r[class*="from-"][class*="950"] .text-slate-200,
html.light .bg-gradient-to-r[class*="from-"][class*="950"] h2,
html.light .bg-gradient-to-r[class*="from-"][class*="950"] h3 {
  color: #ffffff !important;
}

html.light .bg-gradient-to-r[class*="via-slate-900"] .text-slate-300,
html.light .bg-gradient-to-r[class*="via-slate-900"] .text-slate-400,
html.light .bg-gradient-to-r[class*="via-slate-900"] .text-slate-500,
html.light .bg-gradient-to-r[class*="via-slate-900"] p,
html.light .bg-gradient-to-br[class*="to-slate-900"] .text-slate-300,
html.light .bg-gradient-to-br[class*="to-slate-900"] .text-slate-400,
html.light .bg-gradient-to-br[class*="to-slate-900"] p,
html.light .bg-gradient-to-r[class*="from-"][class*="950"] .text-slate-300,
html.light .bg-gradient-to-r[class*="from-"][class*="950"] .text-slate-400,
html.light .bg-gradient-to-r[class*="from-"][class*="950"] .text-slate-500,
html.light .bg-gradient-to-r[class*="from-"][class*="950"] p {
  color: #cbd5e1 !important;
}

/* Acentos champagne/esmeralda legíveis DENTRO do banner escuro */
html.light .bg-gradient-to-r[class*="via-slate-900"] .text-mps-accent,
html.light .bg-gradient-to-r[class*="via-slate-900"] .text-\[\#c5a880\],
html.light .bg-gradient-to-r[class*="via-slate-900"] .text-amber-300,
html.light .bg-gradient-to-r[class*="via-slate-900"] .text-amber-400,
html.light .bg-gradient-to-r[class*="from-"][class*="950"] .text-mps-accent,
html.light .bg-gradient-to-r[class*="from-"][class*="950"] .text-\[\#c5a880\],
html.light .bg-gradient-to-r[class*="from-"][class*="950"] .text-amber-300,
html.light .bg-gradient-to-r[class*="from-"][class*="950"] .text-amber-400 {
  color: #e8d5b5 !important;
}
html.light .bg-gradient-to-r[class*="via-slate-900"] .text-emerald-300,
html.light .bg-gradient-to-r[class*="via-slate-900"] .text-emerald-400,
html.light .bg-gradient-to-br[class*="from-emerald"] .text-emerald-300,
html.light .bg-gradient-to-br[class*="from-emerald"] .text-emerald-400,
html.light .bg-gradient-to-r[class*="from-"][class*="950"] .text-emerald-300,
html.light .bg-gradient-to-r[class*="from-"][class*="950"] .text-emerald-400 {
  color: #6ee7b7 !important;
}

/* Selects/inputs dentro de banner escuro */
html.light .bg-gradient-to-r[class*="via-slate-900"] select,
html.light .bg-gradient-to-r[class*="from-"][class*="950"] select {
  background-color: rgba(15, 23, 42, 0.85) !important;
  color: #f8fafc !important;
  border-color: rgba(226, 232, 240, 0.35) !important;
}

/* Linhas destacadas escuras em tabelas DRE (fundo slate que permanece) */
html.light .bg-slate-800\/80 .text-white,
html.light [class*="bg-slate-800"] .font-bold.text-white {
  color: #ffffff !important;
}

/* Bordas e Separadores */
html:not(.dark) .border-slate-800,
html:not(.dark) .border-slate-800\/80,
html:not(.dark) .border-slate-800\/60,
html:not(.dark) .border-slate-700,
html:not(.dark) .border-slate-700\/60,
html.light .border-slate-800,
html.light .border-slate-800\/80,
html.light .border-slate-800\/60,
html.light .border-slate-700,
html.light .border-slate-700\/60 {
  border-color: #e2e8f0 !important;
}

html:not(.dark) .divide-slate-800,
html:not(.dark) .divide-slate-800\/60,
html.light .divide-slate-800,
html.light .divide-slate-800\/60 {
  border-color: #e2e8f0 !important;
}

/* Tabelas */
html:not(.dark) thead.bg-slate-950,
html.light thead.bg-slate-950,
html:not(.dark) thead,
html.light thead {
  background-color: #f8fafc !important;
  color: #475569 !important;
  border-bottom: 1px solid #e2e8f0 !important;
}

html:not(.dark) tbody tr:hover,
html.light tbody tr:hover {
  background-color: #f8fafc !important;
}

/* Inputs, Selects e Textareas */
html:not(.dark) input:not([type="checkbox"]):not([type="radio"]),
html:not(.dark) select,
html:not(.dark) textarea,
html.light input:not([type="checkbox"]):not([type="radio"]),
html.light select,
html.light textarea {
  background-color: #ffffff !important;
  color: var(--mps-ink) !important;
  border-color: #e2e8f0 !important;
}
html.light input:not([type="checkbox"]):not([type="radio"]):focus,
html.light select:focus,
html.light textarea:focus {
  border-color: var(--mps-gold) !important;
  box-shadow: 0 0 0 3px rgba(217, 119, 6, 0.18) !important;
  outline: none !important;
}

html:not(.dark) input::placeholder,
html.light input::placeholder {
  color: #94a3b8 !important;
}

/* Navegação da Sidebar */
html:not(.dark) .nav-inactive,
html.light .nav-inactive {
  background-color: transparent !important;
  color: #475569 !important;
}

html:not(.dark) .nav-inactive:hover,
html.light .nav-inactive:hover {
  background-color: #f1f5f9 !important;
  color: #0f172a !important;
}

/* Modais em Modo Claro */
html:not(.dark) .modal-box,
html.light .modal-box {
  background-color: #ffffff !important;
  color: #0f172a !important;
  border-color: #cbd5e1 !important;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25) !important;
}

/* ==========================================================================
   MPS MODAL UNIVERSAL - Regras Nativas Globais de Visibilidade e Layout
   ========================================================================== */
.hidden {
  display: none !important;
}

#mpsModalContainer.hidden {
  display: none !important;
}

#mpsModalContainer:not(.hidden) {
  display: flex !important;
  position: fixed !important;
  inset: 0 !important;
  z-index: 99999 !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 1rem !important;
  background-color: rgba(2, 6, 23, 0.8) !important;
  backdrop-filter: blur(4px) !important;
}

/* ==========================================================================
   Beauty Retail OS — utilitários de marca + remap de rosa/índigo genéricos
   (PDV / Gerência / Owner / Catálogo / Mobile)
   ========================================================================== */

.text-mps-accent { color: var(--mps-accent) !important; }
.text-mps-rose { color: var(--mps-accent-soft) !important; }
.text-mps-primary { color: var(--mps-primary) !important; }

.bg-mps-primary { background-color: var(--mps-primary) !important; color: #fff !important; }
.bg-mps-primary-deep { background-color: var(--mps-primary-deep) !important; color: #fff !important; }
.bg-mps-accent { background-color: var(--mps-accent) !important; color: var(--mps-primary-deep) !important; }
.bg-mps-rose { background-color: var(--mps-accent-soft) !important; color: #fff !important; }
.bg-mps-primary\/20 { background-color: rgba(15, 43, 72, 0.35) !important; }

.border-mps-accent { border-color: var(--mps-accent) !important; }
.border-mps-accent\/40 { border-color: rgba(197, 168, 128, 0.4) !important; }
.border-mps-accent\/50 { border-color: rgba(197, 168, 128, 0.5) !important; }

.from-mps-primary { --tw-gradient-from: #0f2b48 var(--tw-gradient-from-position); --tw-gradient-to: rgb(15 43 72 / 0); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); }
.from-mps-primary-deep { --tw-gradient-from: #0f2438 var(--tw-gradient-from-position); --tw-gradient-to: rgb(15 36 56 / 0); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); }
.from-mps-accent { --tw-gradient-from: #c5a880 var(--tw-gradient-from-position); --tw-gradient-to: rgb(197 168 128 / 0); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); }
.from-mps-primary\/30 { --tw-gradient-from: rgb(15 43 72 / 0.3) var(--tw-gradient-from-position); --tw-gradient-to: rgb(15 43 72 / 0); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); }
.via-mps-rose { --tw-gradient-to: rgb(183 110 121 / 0)  var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), #b76e79 var(--tw-gradient-via-position), var(--tw-gradient-to); }
.to-mps-accent { --tw-gradient-to: #c5a880 var(--tw-gradient-to-position); }
.to-mps-primary { --tw-gradient-to: #0f2b48 var(--tw-gradient-to-position); }
.to-mps-rose { --tw-gradient-to: #b76e79 var(--tw-gradient-to-position); }

.hover\:bg-mps-primary:hover { background-color: var(--mps-primary) !important; }
.hover\:bg-mps-primary-deep:hover { background-color: var(--mps-primary-deep) !important; }
.hover\:from-mps-primary-deep:hover { --tw-gradient-from: #0f2438 var(--tw-gradient-from-position); --tw-gradient-to: rgb(15 36 56 / 0); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); }
.hover\:to-mps-primary:hover { --tw-gradient-to: #0f2b48 var(--tw-gradient-to-position); }
.focus\:border-mps-accent:focus { border-color: var(--mps-accent) !important; }

/* Remap residual: classes Tailwind pink ainda presentes em JS dinâmico */
.text-pink-300,
.text-pink-400,
.text-pink-500 {
  color: var(--mps-accent) !important;
}
.bg-pink-500,
.bg-pink-600,
.hover\:bg-pink-500:hover,
.hover\:bg-pink-600:hover {
  background-color: var(--mps-primary) !important;
  color: #fff !important;
}
.bg-pink-700,
.hover\:bg-pink-700:hover {
  background-color: var(--mps-primary-deep) !important;
}
.bg-pink-950,
.bg-pink-950\/50,
.bg-pink-950\/70 {
  background-color: rgba(15, 43, 72, 0.45) !important;
}
.border-pink-500,
.border-pink-700,
.border-pink-800,
.border-pink-700\/50,
.focus\:border-pink-500:focus {
  border-color: rgba(197, 168, 128, 0.55) !important;
}
.from-pink-500,
.from-pink-600,
.from-pink-950\/30 {
  --tw-gradient-from: #0f2b48 var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(15 43 72 / 0);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.via-rose-500,
.via-pink-500 {
  --tw-gradient-to: rgb(183 110 121 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), #b76e79 var(--tw-gradient-via-position), var(--tw-gradient-to);
}
.to-pink-500,
.to-rose-500,
.to-rose-600 {
  --tw-gradient-to: #c5a880 var(--tw-gradient-to-position);
}

/* Owner: índigo administrativo → Oxford / Champagne */
.text-indigo-300,
.text-indigo-400 {
  color: var(--mps-accent) !important;
}
.bg-indigo-600,
.bg-indigo-500,
.hover\:bg-indigo-500:hover {
  background-color: var(--mps-primary) !important;
}
.bg-indigo-950 {
  background-color: rgba(15, 43, 72, 0.55) !important;
}
.border-indigo-800 {
  border-color: rgba(197, 168, 128, 0.35) !important;
}
.selection\:bg-indigo-500::selection,
.selection\:bg-pink-500::selection {
  background-color: var(--mps-accent) !important;
  color: var(--mps-primary-deep) !important;
}

/* Nav lateral Gerência / Owner */
.nav-active {
  background-color: rgba(197, 168, 128, 0.12) !important;
  border-left: 3px solid var(--mps-accent) !important;
  color: var(--mps-accent) !important;
  font-weight: 700;
}

/* Botão primário de marca */
.mps-btn-primary {
  background: linear-gradient(135deg, var(--mps-primary) 0%, #1e3a5f 100%);
  color: #fff;
  border: 1px solid rgba(197, 168, 128, 0.45);
  font-weight: 700;
  min-height: var(--mps-touch-min);
  border-radius: 0.75rem;
  padding: 0.65rem 1rem;
  transition: filter 0.15s ease, transform 0.1s ease;
}
.mps-btn-primary:hover {
  filter: brightness(1.08);
}
.mps-btn-accent {
  background: var(--mps-accent);
  color: var(--mps-primary-deep);
  font-weight: 700;
  min-height: var(--mps-touch-min);
  border-radius: 0.75rem;
  padding: 0.65rem 1rem;
}

/* Valores monetários genéricos em painéis */
.font-mono.text-emerald-400,
.font-mono.text-slate-100,
.font-black.font-mono,
[id*="Total"],
[id*="Saldo"],
[id*="kpi"],
[id*="Kpi"] {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
}

/* =====================================================================
 * TEMA CLARO GLOBAL — contraste de abas / chips / placeholders
 * ===================================================================== */
html.light .nav-tab-inactive,
html.light button.nav-tab-inactive {
  background-color: #e2e8f0 !important;
  color: #0f172a !important;
  border: 1px solid #94a3b8 !important;
  opacity: 1 !important;
  font-weight: 600 !important;
}

html.light .nav-tab-inactive:hover {
  background-color: #cbd5e1 !important;
  color: #020617 !important;
}

html.light input::placeholder,
html.light textarea::placeholder {
  color: #64748b !important;
  opacity: 1 !important;
}

html.light .text-slate-400 {
  color: #475569 !important;
}

html.light .text-slate-500 {
  color: #334155 !important;
}

html.light .text-emerald-400,
html.light .text-emerald-300 {
  color: #059669 !important;
}

/* Clean Luxury — CTAs âmbar, chips ghost, logo oficial */
.mps-logo-oficial {
  height: 2rem;
  width: auto;
  display: block;
  border-radius: 0 !important;
  object-fit: contain;
  background: transparent;
}

html.light .mps-btn-accent,
html.light .mps-btn-primary {
  background: linear-gradient(180deg, #d97706 0%, #b45309 100%) !important;
  color: #ffffff !important;
  border-color: #b45309 !important;
}

html.light .bg-\[\#0f2b48\].text-\[\#c5a880\],
html.light .text-\[\#c5a880\].bg-\[\#0f2b48\] {
  background: linear-gradient(180deg, #d97706 0%, #b45309 100%) !important;
  color: #ffffff !important;
  border-color: #b45309 !important;
}

html.light .mps-btn-ghost,
html.light .mps-chip {
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  color: #b45309 !important;
  box-shadow: var(--mps-card-shadow);
}

html.light .brand-badge {
  background: #ffffff !important;
  color: #0f172a !important;
  border-color: #e2e8f0 !important;
}

.mps-wordmark .mps { color: #0f172a; font-weight: 900; }
.mps-wordmark .make {
  font-weight: 900;
  background: linear-gradient(90deg, #d97706, #fbbf24, #b45309);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Superfícies com opacidade (PDV rodapé, thead, chat, card licenciador) */
html.light .bg-slate-950\/90,
html.light .bg-slate-950\/80,
html.light .bg-slate-950\/70,
html.light .bg-slate-950\/60,
html.light .bg-slate-950\/50,
html.light .bg-slate-950\/40,
html.light .bg-slate-900\/90,
html.light .bg-slate-900\/40,
html.light .bg-slate-800\/40,
html.light .bg-slate-700,
html.light .bg-slate-700\/80 {
  background-color: #f1f5f9 !important;
  border-color: #e2e8f0 !important;
  box-shadow: none;
}

html.light thead,
html.light thead tr {
  background-color: #f8fafc !important;
  color: #334155 !important;
}

html.light .border-indigo-950 {
  border-color: #e2e8f0 !important;
}

/* Ações e badges 950: chips legíveis no claro */
html.light [class*="bg-indigo-950"],
html.light [class*="bg-violet-950"],
html.light [class*="bg-sky-950"] {
  background: #ffffff !important;
  border-color: #e2e8f0 !important;
  color: #b45309 !important;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
}
html.light [class*="bg-emerald-950"] {
  background: #ecfdf5 !important;
  border-color: #a7f3d0 !important;
  color: #047857 !important;
}
html.light [class*="bg-amber-950"] {
  background: #fffbeb !important;
  border-color: #fde68a !important;
  color: #b45309 !important;
}
html.light [class*="bg-rose-950"],
html.light [class*="bg-rose-900"] {
  background: #fff1f2 !important;
  border-color: #fecdd3 !important;
  color: #be123c !important;
}
html.light .text-indigo-200,
html.light .text-violet-200,
html.light .text-sky-300,
html.light .text-emerald-200,
html.light .text-amber-200 {
  color: inherit !important;
}

html.light .text-indigo-300 {
  color: #b45309 !important;
}

/* Botão ícone de tema */
.mps-theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 9999px;
  border: 1px solid #e2e8f0;
  background: #ffffff;
  color: #b45309;
  cursor: pointer;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
}
html.dark .mps-theme-toggle {
  background: #0f172a;
  border-color: #334155;
  color: #c5a880;
}
html.light .mps-theme-icon-sun,
html.dark .mps-theme-icon-moon { display: none; }
html.dark .mps-theme-icon-sun,
html.light .mps-theme-icon-moon { display: block; }

/* Menu da conta (avatar) */
.mps-user-menu { position: relative; }
.mps-user-menu-panel {
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  min-width: 12.5rem;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 0.75rem;
  box-shadow: 0 12px 30px rgba(15, 23, 42, 0.12);
  padding: 0.4rem;
  z-index: 80;
}
html.dark .mps-user-menu-panel {
  background: #0f172a;
  border-color: #334155;
}
.mps-user-menu-panel button {
  display: block;
  width: 100%;
  text-align: left;
  font-size: 12px;
  font-weight: 700;
  padding: 0.55rem 0.75rem;
  border-radius: 0.5rem;
  color: #0f172a;
  background: transparent;
  border: 0;
  cursor: pointer;
}
html.dark .mps-user-menu-panel button { color: #e2e8f0; }
.mps-user-menu-panel button:hover { background: #f1f5f9; }
html.dark .mps-user-menu-panel button:hover { background: #1e293b; }

/* Portal: o toggle precisa pintar o HTML hardcoded */
html.dark body.mps-portal {
  background: #070b12 !important;
  background-image: none !important;
  color: #e2e8f0 !important;
}
html.dark body.mps-portal header {
  background: rgba(15, 23, 42, 0.92) !important;
  border-color: #1e293b !important;
}
html.dark body.mps-portal .portal-card {
  background: #0f172a !important;
  border-color: #1e293b !important;
  color: #e2e8f0;
}
html.dark body.mps-portal .portal-card h2,
html.dark body.mps-portal .text-slate-900 { color: #f8fafc !important; }
html.dark body.mps-portal footer { border-color: #1e293b !important; color: #94a3b8 !important; }

/* Chat Owner — painel de mensagens */
html.light #view-chat,
html.light #view-chat .bg-slate-900\/40,
html.light #mensagensContainer {
  background-color: #f8fafc !important;
  box-shadow: none;
}
html.light #listaConversasChat button.text-white,
html.light #listaConversasChat .bg-indigo-950\/60 {
  background: #fff7ed !important;
  border-color: #fed7aa !important;
  color: #0f172a !important;
}
html.light #inputChatTexto {
  background: #ffffff !important;
  color: #0f172a !important;
}

.mps-action {
  background: #1e293b;
  border-color: #334155;
  color: #c5a880;
}
html.light .mps-action {
  background: #ffffff;
  border-color: #e2e8f0;
  color: #b45309;
}
.mps-action-warn {
  background: #451a03;
  border-color: #92400e;
  color: #fde68a;
}
html.light .mps-action-warn {
  background: #fffbeb;
  border-color: #fde68a;
  color: #b45309;
}
.mps-action-danger {
  background: #4c0519;
  border-color: #9f1239;
  color: #fecdd3;
}
html.light .mps-action-danger {
  background: #fff1f2;
  border-color: #fecdd3;
  color: #be123c;
}
.mps-action-ok {
  background: #064e3b;
  border-color: #047857;
  color: #a7f3d0;
}
html.light .mps-action-ok {
  background: #ecfdf5;
  border-color: #a7f3d0;
  color: #047857;
}

.chat-item { color: #cbd5e1; }
.chat-item:hover { background: #1e293b; }
.chat-item-on { background: #1e293b; color: #f8fafc; border: 1px solid #334155; }
html.light .chat-item { color: #334155; }
html.light .chat-item:hover { background: #f1f5f9; }
html.light .chat-item-on { background: #fff7ed; color: #0f172a; border-color: #fed7aa; }
.chat-bubble-me { background: #d97706; color: #fff; }
.chat-bubble { background: #1e293b; color: #e2e8f0; border: 1px solid #334155; }
html.light .chat-bubble { background: #ffffff; color: #0f172a; border-color: #e2e8f0; }
html.dark .bg-slate-50 { background-color: #0f172a !important; }

html.light #resumoCompetencia {
  color: #78350f !important;
}
html.light #toastOwner {
  color: #ffffff !important;
}

html.light #btnEfetivarBaixasOFX:disabled,
#btnEfetivarBaixasOFX:disabled {
  background: #e2e8f0 !important;
  color: #334155 !important;
  border: 1px solid #94a3b8 !important;
  opacity: 1 !important;
}
html.light #btnEfetivarBaixasOFX:not(:disabled) {
  background: #047857 !important;
  color: #ffffff !important;
}

/* Sacola da vitrine: no tema claro o fundo vira branco e text-white some */
html.light .bg-slate-800\/90 {
  background-color: #f1f5f9 !important;
  border-color: #e2e8f0 !important;
}
html.light #cartDrawer h3,
html.light #cartDrawer label,
html.light #cartDrawer .text-white:not(button):not(button *) {
  color: #0f172a !important;
}
html.light #cartDrawer [class*="bg-slate-800"] .font-bold.text-white,
html.light #cartDrawer #cartItemsList .text-white {
  color: #0f172a !important;
}
html.light #cartDrawer #btnFinalizarWhatsApp,
html.light #cartDrawer #btnFinalizarWhatsApp * {
  color: #ffffff !important;
}

.mps-env-banner {
  background: #b45309;
  color: #fff;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-align: center;
  padding: 8px 12px;
  z-index: 2147483001;
  position: sticky;
  top: 0;
}

/* Holding: mesmas superfícies do restante do MPS MAKE */
html.light body.holding-page,
html.light body.holding-page.holding-locked #holdingLogin {
  background: #f8fafc !important;
  color: #0f172a !important;
}
html.light body.holding-page .card {
  background: #ffffff !important;
  border-color: #e2e8f0 !important;
  box-shadow: 0 12px 30px rgba(15, 23, 42, 0.08);
}
html.light body.holding-page header {
  background: #ffffff !important;
  border-color: #e2e8f0 !important;
}
html.light body.holding-page .btn-gold {
  background: #0f2b48 !important;
  color: #ffffff !important;
  border-color: #0f2b48 !important;
}
html.light body.holding-page .btn-muted {
  background: #f1f5f9 !important;
  color: #334155 !important;
  border: 1px solid #e2e8f0;
}
html.light body.holding-page .btn-teal {
  background: #ecfdf5 !important;
  color: #047857 !important;
  border: 1px solid #a7f3d0;
}
html.light body.holding-page input,
html.light body.holding-page select,
html.light #holdingLogin input {
  background: #ffffff !important;
  color: #0f172a !important;
  border-color: #cbd5e1 !important;
}
html.light #holdingLogin h1 {
  color: #0f172a !important;
}
html.light #holdingLogin h1 .brand {
  color: #b45309 !important;
}
html.light body.holding-page th {
  color: #64748b !important;
  border-color: #e2e8f0 !important;
}
html.light body.holding-page td {
  border-color: #e2e8f0 !important;
  color: #0f172a !important;
}
html.light body.holding-page h1,
html.light body.holding-page h2 {
  color: #0f172a !important;
}