/* ================================================================
   BEGUEL — Tema escuro (overrides via [data-theme="dark"])

   Cada página define seus tokens no `:root { --bg:...; --ink:...; }` inline.
   Aqui sobrescrevemos esses tokens quando o usuário escolhe escuro.
   O seletor `html[data-theme="dark"]` (especificidade 0,1,1) vence `:root`
   (0,0,1) independente da ordem de carregamento.

   Mantemos as MESMAS chaves de variáveis usadas nas páginas:
   --bg / --bg2 / --bg3 / --border / --border2
   --ink / --ink2 / --ink3 (páginas de produto, preços, clientes, index)
   --text / --text2 / --text3 (estilo.css)
   --gold / --gold-dim / --gold-bg / --gold-border
   --green / --red / --amber / --blue / --coral / --purple
   ================================================================ */

html[data-theme="dark"] {
  /* Backgrounds em camadas */
  --bg:      #0E0F11;
  --bg2:     #16181C;
  --bg3:     #1E2026;

  /* Bordas */
  --border:  #2A2D35;
  --border2: #353840;

  /* Texto — duplicado para ink* (páginas) e text* (estilo.css) */
  --ink:     #F0EEE8;
  --ink2:    #BCBAB3;
  --ink3:    #8E8D87;
  --text:    #F0EEE8;
  --text2:   #BCBAB3;
  --text3:   #8E8D87;

  /* Dourado (identidade) — leve aumento de brilho no escuro */
  --gold:        #D4B566;
  --gold-dim:    #B89042;
  --gold-bg:     rgba(212,181,102,.12);
  --gold-border: rgba(212,181,102,.32);

  /* Acentos — bg/border mais opacos para destacar no fundo escuro */
  --green:        #4ED39E;
  --green-dim:    #2A9970;
  --green-bg:     rgba(78,211,158,.10);
  --green-border: rgba(78,211,158,.30);

  --red:          #FF7A7A;
  --red-bg:       rgba(255,122,122,.10);
  --red-border:   rgba(255,122,122,.30);

  --amber:        #F5A623;
  --amber-dim:    #C07A0A;
  --amber-bg:     rgba(245,166,35,.10);
  --amber-border: rgba(245,166,35,.30);

  --blue:         #4A9EFF;
  --blue-dim:     #1259A8;
  --blue-bg:      rgba(74,158,255,.10);
  --blue-border:  rgba(74,158,255,.30);

  --coral:        #FF6B6B;
  --coral-dim:    #C0392B;
  --coral-bg:     rgba(255,107,107,.10);
  --coral-border: rgba(255,107,107,.30);

  --purple:        #9B7FFF;
  --purple-dim:    #6040C0;
  --purple-bg:     rgba(155,127,255,.10);
  --purple-border: rgba(155,127,255,.30);

  /* Sombras um pouco mais densas no escuro */
  color-scheme: dark;
}

html[data-theme="light"] { color-scheme: light; }

/* Evita flash branco antes da pintura do body */
html { background: var(--bg); }

/* O header das páginas usa background:var(--ink) — em dark mode, isso ficaria
   claro. Mantemos o header escuro independente do tema, com leve ajuste no dark. */
html[data-theme="dark"] .page-header {
  background: #1A1C20;
  border-bottom: 1px solid var(--border);
}
html[data-theme="dark"] .page-header,
html[data-theme="dark"] .page-header .page-header-logo,
html[data-theme="dark"] .page-header .page-header-sub {
  color: #F5F3EE;
}

/* Inputs com background:var(--bg) ficam ilegíveis em dark se body também usa --bg.
   Aumenta contraste sutil: campos viram --bg2. */
html[data-theme="dark"] .preco-input,
html[data-theme="dark"] input.field,
html[data-theme="dark"] .form-field input,
html[data-theme="dark"] .form-field select,
html[data-theme="dark"] .form-field textarea,
html[data-theme="dark"] .cliente-busca-input,
html[data-theme="dark"] .cliente-dropdown {
  background: var(--bg2);
  color: var(--ink, var(--text));
  border-color: var(--border);
}

/* Cards em fundo escuro: sobe um nível visual */
html[data-theme="dark"] .card,
html[data-theme="dark"] .prod-header,
html[data-theme="dark"] .preco-base-item,
html[data-theme="dark"] .preco-res-card,
html[data-theme="dark"] .beguel-modal,
html[data-theme="dark"] .metric-card {
  background: var(--bg2);
  color: var(--ink, var(--text));
}

/* Mini-tabela de simulação de venda (v2.4.3) — header da tabela e linhas */
html[data-theme="dark"] .sim-venda {
  background: var(--bg3);
}
html[data-theme="dark"] .sim-venda-title {
  background: var(--bg2);
}

/* v2.4.11: Placeholders ficavam quase invisíveis no escuro mesmo após a
   tentativa em v2.4.8. O navegador (Chromium) força um cinza default
   muito escuro independente de `color: var(--ink3)` se a especificidade
   não for clara. Solução: rgba direto + !important para sobrescrever
   qualquer regra que o navegador ou o CSS inline da página esteja aplicando.
   Cor escolhida = cor do texto principal com alpha 0.50, garantindo contraste. */
html[data-theme="dark"] input::placeholder,
html[data-theme="dark"] textarea::placeholder,
html[data-theme="dark"] .field::placeholder,
html[data-theme="dark"] .preco-input::placeholder,
html[data-theme="dark"] .cliente-busca-input::placeholder,
html[data-theme="dark"] .form-field input::placeholder,
html[data-theme="dark"] .form-field textarea::placeholder,
html[data-theme="dark"] .form-field select::placeholder {
  color: rgba(240, 238, 232, 0.55) !important;
  opacity: 1 !important;
  -webkit-text-fill-color: rgba(240, 238, 232, 0.55) !important;
}
html[data-theme="dark"] input::-webkit-input-placeholder,
html[data-theme="dark"] textarea::-webkit-input-placeholder {
  color: rgba(240, 238, 232, 0.55) !important;
  -webkit-text-fill-color: rgba(240, 238, 232, 0.55) !important;
  opacity: 1 !important;
}
html[data-theme="dark"] input::-moz-placeholder,
html[data-theme="dark"] textarea::-moz-placeholder {
  color: rgba(240, 238, 232, 0.55) !important;
  opacity: 1 !important;
}
html[data-theme="dark"] input:-ms-input-placeholder,
html[data-theme="dark"] textarea:-ms-input-placeholder {
  color: rgba(240, 238, 232, 0.55) !important;
}

/* No claro, idem mas cor escura translucida */
html[data-theme="light"] input::placeholder,
html[data-theme="light"] textarea::placeholder,
html[data-theme="light"] .field::placeholder,
html[data-theme="light"] .preco-input::placeholder,
html[data-theme="light"] .cliente-busca-input::placeholder,
html[data-theme="light"] .form-field input::placeholder,
html[data-theme="light"] .form-field textarea::placeholder {
  color: rgba(15, 17, 23, 0.45) !important;
  opacity: 1 !important;
}

/* Transição suave ao alternar (não aplicar em inputs com transição própria) */
body, .card, .preco-row, .preco-input, .sim-venda, .beguel-modal, .badge, .alert,
.metric-card, .btn, .tab, .log-item {
  transition: background-color .25s ease, color .25s ease, border-color .25s ease;
}

/* ================================================================
   Botão de toggle de tema — usado em todos os headers
   ================================================================ */
.beguel-theme-toggle{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:6px 12px;
  border:1px solid rgba(255,255,255,.18);
  border-radius:99px;
  background:rgba(255,255,255,.04);
  color:#F5F3EE;
  font-family:'Cinzel',serif;
  font-size:10px;
  font-weight:600;
  letter-spacing:.05em;
  cursor:pointer;
  transition:all .15s;
  user-select:none;
  white-space:nowrap;
}
.beguel-theme-toggle:hover{
  background:rgba(255,255,255,.10);
  border-color:rgba(255,255,255,.30);
}
.beguel-theme-toggle .beguel-theme-icon{font-size:13px;line-height:1}
.beguel-theme-toggle .beguel-theme-label{font-size:10px;letter-spacing:.04em}

/* Variante para headers claros (clientes.html, index.html sidebar) */
.beguel-theme-toggle--inline{
  border-color:var(--border);
  background:var(--bg2);
  color:var(--ink2, var(--text2));
}
.beguel-theme-toggle--inline:hover{
  background:var(--bg3);
  color:var(--ink, var(--text));
  border-color:var(--border2);
}

/* Esconde o rótulo em telas pequenas para deixar só o ícone */
@media (max-width:520px){
  .beguel-theme-toggle .beguel-theme-label{display:none}
  .beguel-theme-toggle{padding:6px 9px}
}