/* Tema Carvão e platina — ajustes feitos à mão.
   Carregado depois de tema-carvao-platina.css (gerado). Aqui ficam a paleta,
   o botão de claro/escuro e as correções que a conversão automática não
   resolve sozinha. */

/* ================= Paleta ================= */
:root[data-tema="claro"] {
  --cp-fundo: #f6f6f5;
  --cp-cartao: #ffffff;
  --cp-borda: #e3e3e0;
  --cp-texto: #121212;
  --cp-texto-suave: #5f6166;
  --cp-principal: #1e1e1e;
  --cp-detalhe: #8a8d91;
  color-scheme: light;
}
:root[data-tema="escuro"] {
  --cp-fundo: #0b0b0b;
  --cp-cartao: #151515;
  --cp-borda: #262626;
  --cp-texto: #f2f2f2;
  --cp-texto-suave: #a7aaae;
  --cp-principal: #d9d9d9;
  --cp-detalhe: #a7aaae;
  color-scheme: dark;
}

/* ================= Botão claro/escuro ================= */
.pdv-tema-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  flex: 0 0 36px;
  margin-left: 10px;
  padding: 0;
  border-radius: 50%;
  border: 1px solid var(--cp-borda);
  background: var(--cp-cartao);
  color: var(--cp-texto);
  cursor: pointer;
  transition: border-color .15s, background .15s;
}
.pdv-tema-btn:hover { border-color: var(--cp-detalhe); }
/* fica no canto direito; na tela do Balcão a busca já ocupa o canto e o
   botão vem logo depois dela */
.pdv-topbar .pdv-tema-btn { margin-left: auto; }
.pdv-main-col:has(#atdCartItems) .pdv-topbar .pdv-tema-btn { margin-left: 10px; }
.pdv-tema-btn svg { width: 18px; height: 18px; }
.pdv-login-card .pdv-tema-btn { position: absolute; top: 14px; right: 14px; margin: 0; }
.pdv-login-card { position: relative; }

/* ================= Modo claro: base ================= */
/* fundo liso: sem granulação, vinheta nem reflexo diagonal do tema escuro */
:root[data-tema="claro"] {
  --sys-background: var(--cp-fundo);
  --sys-bg-top: var(--cp-fundo);
  --sys-bg-mid: var(--cp-fundo);
  --sys-bg-bottom: var(--cp-fundo);
}
html[data-tema="claro"],
html[data-tema="claro"] body { background: var(--cp-fundo) !important; }

/* ================= Modo claro: barra lateral carvão ================= */
html[data-tema="claro"] #pdvApp #pdvSidebar,
html[data-tema="claro"] #pdvApp #pdvSidebar.expanded {
  background: #161616 !important;
  border-right-color: #161616 !important;
}

/* painéis de vidro viram cartões brancos lisos (o degradê de vidro marcava
   faixas diagonais no fundo claro) */
:root[data-tema="claro"] { --glass-surface: var(--cp-cartao); }
html[data-tema="claro"] #pdvApp::before,
html[data-tema="claro"] #pdvApp::after { background: none !important; }

/* ================= Modo claro: véus atrás das janelas ================= */
/* o véu escuro das janelas (abrir mesa, PIN, identificação) virava branco na
   conversão e lavava a tela; no claro ele continua escurecendo. O seletor de
   complementos (.picker-overlay) é tela cheia com fundo próprio e fica fora. */
html[data-tema="claro"] .pdv-overlay,
html[data-tema="claro"] .pdv-modal-overlay,
html[data-tema="claro"] .pdv-sidebar-backdrop {
  background: rgba(18, 18, 18, .38) !important;
}

/* ================= Modo claro: correções pontuais ================= */
/* cabeçalho e botão de etapa amarelos ("Pronto"): texto escuro, o branco
   quase sumia no amarelo */
html[data-tema="claro"] .kanban-col-head[style*="#f2c200"],
html[data-tema="claro"] .kanban-advance[style*="#f2c200"] { color: #171717 !important; }

/* botão desativado da comanda (Pré-Conta sem itens): cinza claro, e não
   escuro como um botão ativo */
html[data-tema="claro"] .comanda-row .abrir-btn:disabled {
  background: #ececea !important;
  color: #a3a5a8 !important;
  box-shadow: none !important;
}

/* barra de rolagem cinza no lugar do preto */
:root[data-tema="claro"] {
  --pdv-scrollbar-thumb: #c4c5c7;
}

/* ================= Os dois modos ================= */
/* nome do cliente no rodapé da tela de endereço: estava cinza-escuro fixo e
   sumia no fundo (já acontecia no tema escuro original) */
html[data-tema] .endtela-cliente strong { color: var(--cp-texto) !important; }

/* botão de tema na tela de login: o estilo dos botões do cartão (largura
   total, preto) não vale para ele */
html[data-tema] #pdvLogin .pdv-login-card button.pdv-tema-btn {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 36px !important;
  min-width: 0 !important;
  height: 36px !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border-radius: 50% !important;
  border: 1px solid var(--cp-borda) !important;
  background: var(--cp-cartao) !important;
  color: var(--cp-texto) !important;
  box-shadow: none !important;
}