/*
  Snack On — theme-snackon.css
  Substitui assets/css/theme-purple.css (tema Able Pro genérico).
  Referência completa das decisões: /DESIGN.md na raiz do projeto.
*/

html[data-theme="dark"]{
  color-scheme: dark;
  --bg: #17140F;
  --surface: #211D16;
  --surface-2: #2A251C;
  --line: #3A3428;
  --text: #F3EEE3;
  --text-dim: #9C9483;
  --accent: #E0A429;
  --accent-ink: #211705;
  --accent-soft: #362B15;
  --good: #7A9B5C;
  --good-ink: #10190A;
  --good-soft: #23301C;
  --danger: #D9765F;
  --danger-soft: #3A2018;
  --sidebar: #100D08;
  --sidebar-text: #F3EEE3;
  --sidebar-dim: #8A8271;
  --sidebar-active: #1E1810;
}

html[data-theme="light"]{
  color-scheme: light;
  --bg: #FAFAF7;
  --surface: #FFFFFF;
  --surface-2: #F0F0EC;
  --line: #E1E0D8;
  --text: #201E19;
  --text-dim: #6D6B62;
  --accent: #C9820F;
  --accent-ink: #FFFFFF;
  --accent-soft: #F3E4C8;
  --good: #4C6B33;
  --good-ink: #FFFFFF;
  --good-soft: #E1EAD8;
  --danger: #A63B2A;
  --danger-soft: #F6DDD6;
  --sidebar: #1B1812;
  --sidebar-text: #F3EEE3;
  --sidebar-dim: #9B9384;
  --sidebar-active: #2A2318;
}

html[data-theme="cool"]{
  color-scheme: light;
  --bg: #EEF1F1;
  --surface: #FFFFFF;
  --surface-2: #E3E7E7;
  --line: #D2D8D8;
  --text: #1C2223;
  --text-dim: #5C6767;
  --accent: #B4650F;
  --accent-ink: #FFFFFF;
  --accent-soft: #E9DCC7;
  --good: #3E6350;
  --good-ink: #FFFFFF;
  --good-soft: #DCE6E0;
  --danger: #A63B2A;
  --danger-soft: #F1DAD3;
  --sidebar: #14181A;
  --sidebar-text: #F0F3F3;
  --sidebar-dim: #93A0A0;
  --sidebar-active: #202829;
}

/* Fallback: se data-theme não estiver setado por algum motivo, usa escuro */
html:not([data-theme]){
  color-scheme: dark;
  --bg: #17140F; --surface: #211D16; --surface-2: #2A251C; --line: #3A3428;
  --text: #F3EEE3; --text-dim: #9C9483;
  --accent: #E0A429; --accent-ink: #211705; --accent-soft: #362B15;
  --good: #7A9B5C; --good-ink: #10190A; --good-soft: #23301C;
  --danger: #D9765F; --danger-soft: #3A2018;
  --sidebar: #100D08; --sidebar-text: #F3EEE3; --sidebar-dim: #8A8271; --sidebar-active: #1E1810;
}

/* !important necessario: assets/css/style.css (legado Able Pro) define body{background:#f9f9f9}
   e carrega depois deste arquivo, entao venceria por ordem de documento sem o !important.
   min-height:100% garante que o canvas cubra o viewport inteiro mesmo quando o conteudo
   (header + .pcoded-content) fica alguns px mais baixo que 100vh, evitando uma faixa
   branca (cor padrao do navegador) visivel abaixo do body. */
html, body{
  min-height: 100%;
  background: var(--bg) !important;
  color: var(--text);
}

/* ---- Componentes base (Bootstrap override) ---- */

.btn-primary,
.btn-brand{
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-ink);
}
.btn-primary:hover,
.btn-brand:hover{
  filter: brightness(0.92);
}

.btn-success{
  background: var(--good);
  border-color: var(--good);
  color: var(--good-ink);
}

.btn-danger{
  background: var(--danger);
  border-color: var(--danger);
}

.btn-light,
.btn-secondary{
  background: var(--surface-2);
  border-color: var(--line);
  color: var(--text);
}
.btn-light:hover,
.btn-secondary:hover{
  filter: brightness(0.95);
}

.card{
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 10px;
}

/* Modais Bootstrap padrão (Seleção rápida, Operação de caixa, Cliente) */
.modal-content{
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--line);
  border-radius: 14px;
}
.modal-header,
.modal-footer{
  border-color: var(--line);
}
.modal-header .btn-close{
  filter: var(--bs-btn-close-white-filter, none);
}
html[data-theme="dark"] .modal-header .btn-close,
html[data-theme="cool"] .modal-header .btn-close{
  filter: invert(1) grayscale(100%) brightness(200%);
}
.modal-backdrop.show{
  opacity: 0.5;
}

/* Offcanvas Bootstrap (paineis laterais, ex: hub de Configuracoes) - mesmo padrao do modal acima */
.offcanvas{
  background: var(--surface);
  color: var(--text);
}
.offcanvas-header,
.offcanvas-footer{
  border-color: var(--line);
}
.offcanvas .btn-close{
  filter: var(--bs-btn-close-white-filter, none);
}
html[data-theme="dark"] .offcanvas .btn-close,
html[data-theme="cool"] .offcanvas .btn-close{
  filter: invert(1) grayscale(100%) brightness(200%);
}
.offcanvas-backdrop.show{
  opacity: 0.5;
}

/* Dropdown Bootstrap (ex: menu de perfil na topbar): style.css (legado) define
   .dropdown-menu{ background-color:#fff } direto na propriedade, nao via variavel -
   isso vence o --bs-dropdown-bg que o Bootstrap consome, entao só setar a variavel
   (como .profile-menu.dropdown-menu ja fazia) nao basta. Precisa sobrescrever
   background-color diretamente, com !important pra garantir. Global: qualquer
   dropdown novo no app já nasce no tema, nao só o de perfil. */
.dropdown-menu{
  background-color: var(--surface) !important;
  color: var(--text);
  border: 1px solid var(--line) !important;
  border-radius: 10px;
}
.dropdown-item{
  color: var(--text) !important;
}
.dropdown-item:hover,
.dropdown-item:focus{
  background-color: var(--surface-2) !important;
  color: var(--text) !important;
}
.dropdown-divider{
  border-color: var(--line);
}

/* .oc-loader (overlay de "carregando" dentro dos paineis do hub de Configuracoes) usa
   rgba(255,255,255,.9) fixo - fica um retangulo branco por cima de tudo no tema escuro.
   color-mix com --bg deixa o overlay coerente com qualquer um dos 3 temas. */
.oc-loader{
  background: color-mix(in srgb, var(--bg) 88%, transparent);
}
.oc-loader .spinner-border{
  color: var(--accent) !important;
}

.form-control,
.form-select,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="search"]{
  background: var(--surface-2);
  border: 1px solid var(--line);
  color: var(--text);
  border-radius: 9px;
  /* pages-consolidated.css fixa height:44px/padding .45rem .6rem (herdado do template
     Able Pro) - mais alto/espaçoso que o padrão compacto já usado no PDV/Home
     (9-13px de padding, sem height fixo). Reduz aqui pra todo formulario ficar consistente. */
  height: auto;
  min-height: 0;
  padding: 9px 12px;
  font-size: 13px;
  /* placeholder longo (ex: "CSC ja cadastrado. Preencha so para trocar.") em campo
     estreito cortava o texto sem aviso nenhum - com reticencias fica claro que ha mais
     texto, mesmo quando o campo em si nao pode crescer. */
  text-overflow: ellipsis;
}
/* assets/css/style.css (template legado Able Pro, carregado antes deste arquivo) define
   .form-control:focus{ background-color:#fff; color:#495057; } fixo - como esse seletor
   tem a MESMA especificidade do nosso .form-control:focus (classe+pseudo-classe), o empate
   e resolvido por ordem de declaracao. O bloco base .form-control (especificidade menor)
   ja tematiza bg/color certinho fora do foco, mas ao focar o campo o :focus do template
   antigo "reaparece" pros efeitos que a gente nao redeclarava aqui (so border/box-shadow) -
   por isso todo input piscava branco (mais visivel em input[type=date], onde o foco fica
   sustentado com o segmento selecionado). Precisa redeclarar bg/color tambem no :focus. */
.form-control:focus,
.form-select:focus{
  background-color: var(--surface-2);
  color: var(--text);
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

/* input[type="date"]/[type="time"]: o Chromium renderiza os segmentos (dia/mes/ano) e o
   indicador de calendario como sub-elementos internos (shadow DOM) que NAO herdam
   `background`/`color` do .form-control - eles seguem o proprio tema nativo do SO, que e
   claro por padrao. `color-scheme` no <html> ajuda mas nao e garantido em toda versao/SO;
   aqui forcamos as cores explicitamente para o campo nunca "piscar" branco ao focar/digitar. */
input[type="date"],
input[type="time"],
input[type="datetime-local"]{
  color-scheme: dark;
}
html[data-theme="light"] input[type="date"],
html[data-theme="light"] input[type="time"],
html[data-theme="light"] input[type="datetime-local"],
html[data-theme="cool"] input[type="date"],
html[data-theme="cool"] input[type="time"],
html[data-theme="cool"] input[type="datetime-local"]{
  color-scheme: light;
}
input[type="date"]::-webkit-datetime-edit,
input[type="date"]::-webkit-datetime-edit-fields-wrapper,
input[type="date"]::-webkit-datetime-edit-text,
input[type="date"]::-webkit-datetime-edit-day-field,
input[type="date"]::-webkit-datetime-edit-month-field,
input[type="date"]::-webkit-datetime-edit-year-field,
input[type="time"]::-webkit-datetime-edit,
input[type="time"]::-webkit-datetime-edit-fields-wrapper,
input[type="time"]::-webkit-datetime-edit-text,
input[type="time"]::-webkit-datetime-edit-hour-field,
input[type="time"]::-webkit-datetime-edit-minute-field,
input[type="time"]::-webkit-datetime-edit-ampm-field{
  background: transparent;
  color: var(--text);
}
input[type="date"]::-webkit-calendar-picker-indicator,
input[type="time"]::-webkit-calendar-picker-indicator{
  filter: invert(0.6);
  cursor: pointer;
}
html[data-theme="dark"] input[type="date"]::-webkit-calendar-picker-indicator,
html[data-theme="dark"] input[type="time"]::-webkit-calendar-picker-indicator{
  filter: invert(0.85);
}
/* Bootstrap define .form-control:disabled/[readonly] com --bs-secondary-bg (cinza claro
   fixo) e essa regra tem mais especificidade (classe + atributo) que o .form-control
   generico acima - por isso campos readonly/disabled ficavam brancos mesmo no tema
   escuro. Precisa iguala-la em especificidade para vencer. */
.form-control:disabled,
.form-control[readonly],
.form-select:disabled{
  background: var(--surface-2);
  color: var(--text-dim);
  opacity: 1;
}

/* Labels: pages-consolidated.css define .form-label com bullet decorativo (::before '▪')
   e peso 600 - isso empilhado em formularios densos (ex: Configuracoes gerais, ~40 campos)
   deixa tudo com peso visual de "template generico". Reduz pro padrao Inter do sistema. */
.form-label{
  font-weight: 500;
  font-size: 12.5px;
  color: var(--text-dim);
}
.form-label::before{
  content: none;
}

/* Bootstrap define .text-muted com !important usando a cor cinza padrao do Bootstrap
   (nao o tema) - precisa de !important tambem pra vencer. Usado em toda a aplicacao pra
   texto de apoio (form-text, legendas), entao vira var(--text-dim) igual ao resto do sistema. */
.text-muted{
  color: var(--text-dim) !important;
}

/* .form-text (hint abaixo de input/select) usa --bs-secondary-color do Bootstrap via CDN -
   no tema escuro isso fica ilegivel (chega a parecer azulado dependendo do fallback).
   Mesmo tratamento do .text-muted acima. */
.form-text{
  color: var(--text-dim) !important;
}

/* Label de checkbox/switch (ex: "Regra ativa" em Fidelidade) nao tinha cor nenhuma
   definida pelo tema - Bootstrap usa uma cor escura fixa pensada pra fundo claro,
   ilegivel no tema escuro. Toda .form-check-label vira var(--text) por padrao (os
   overrides mais especificos como .og-check-tile ja tratados acima continuam validos). */
.form-check-label{
  color: var(--text);
}

/* Toggle/checkbox: Bootstrap usa azul (--bs-primary) fixo quando marcado, destoando do
   tema (nenhuma tela usa azul). Chaves de liga/desliga (form-check-input com role=switch,
   ex: painel de Fidelidade) e checkboxes ficam na cor de destaque do tema. */
.form-check-input{
  background-color: var(--surface-2);
  border-color: var(--line);
}
.form-check-input:checked{
  background-color: var(--accent);
  border-color: var(--accent);
}
.form-check-input:focus{
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

/* Utilitario .border do Bootstrap usa cinza claro fixo (#dee2e6) - usado em varios
   lugares (ex: linhas de regra de fidelidade geradas via JS) como a borda "padrao". */
.border{
  border-color: var(--line) !important;
}
.btn-outline-primary{
  background: transparent !important;
  border-color: var(--accent) !important;
  color: var(--accent) !important;
}
.btn-outline-primary:hover{
  background: var(--accent-soft) !important;
  color: var(--accent) !important;
}
.btn-outline-danger{
  background: transparent !important;
  border-color: var(--danger) !important;
  color: var(--danger) !important;
}
.btn-outline-danger:hover{
  background: var(--danger-soft) !important;
  color: var(--danger) !important;
}

/* Badges Bootstrap (.badge.text-bg-*) usam verde/vermelho/amarelo saturados fixos,
   destoando do tema (ex: status de conta a pagar/receber no financeiro, status de mesa,
   cargo do usuario). Mesma receita "soft bg + cor forte no texto" ja usada nos chips do
   NFC-e (nfce-status-*) e do estoque. */
.badge.text-bg-success{ background-color: var(--good-soft) !important; color: var(--good) !important; }
.badge.text-bg-danger{ background-color: var(--danger-soft) !important; color: var(--danger) !important; }
.badge.text-bg-warning{ background-color: var(--accent-soft) !important; color: var(--accent) !important; }
.badge.text-bg-primary{ background-color: var(--accent-soft) !important; color: var(--accent) !important; }
.badge.text-bg-secondary{ background-color: var(--surface-2) !important; color: var(--text-dim) !important; }
.badge.text-bg-info{ background-color: var(--accent-soft) !important; color: var(--accent) !important; }

/* Alertas Bootstrap (.alert-*, ex: flash de sucesso/erro ao salvar Aliquotas do Simples) usam
   verde/vermelho/amarelo claros fixos - mesma receita "soft bg + cor forte no texto" dos badges. */
.alert-success{ background-color: var(--good-soft) !important; color: var(--good) !important; border-color: var(--good) !important; }
.alert-danger{ background-color: var(--danger-soft) !important; color: var(--danger) !important; border-color: var(--danger) !important; }
.alert-warning{ background-color: var(--accent-soft) !important; color: var(--accent) !important; border-color: var(--accent) !important; }
.alert-info{ background-color: var(--accent-soft) !important; color: var(--accent) !important; border-color: var(--accent) !important; }

/* .btn-outline-secondary usa cinza fixo (#6c757d) do Bootstrap - usado em botoes
   secundarios soltos em formularios (ex: "Ler" do EAN no cadastro de produto, "Gerenciar
   unidades"). Mesma receita neutra ja usada em botoes de navegacao das telas fiscais. */
.btn-outline-secondary{
  background: transparent !important;
  border-color: var(--line) !important;
  color: var(--text-dim) !important;
}
.btn-outline-secondary:hover{
  background: var(--surface-2) !important;
  border-color: var(--accent) !important;
  color: var(--accent) !important;
}

/* pages-consolidated.css define .offcanvas .btn-primary{ background:var(--brand-purple) }
   (roxo #6f42c1 fixo) com especificidade maior que o .btn-primary simples acima - vence em
   QUALQUER offcanvas do sistema (ex: botao "Salvar" do cadastro de produto), nao so numa tela.
   Mesma especificidade aqui (duas classes) + carrega depois = vence de volta pro accent. */
.offcanvas .btn-primary{
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-ink);
  box-shadow: none;
}
.offcanvas .btn-primary:hover{
  filter: brightness(0.92);
  color: var(--accent-ink);
}

/* Abas Bootstrap (.nav-tabs, ex: Geral/Fiscal no cadastro de produto) nao sao cobertas
   pelo tema - a aba ativa usa --bs-nav-tabs-link-active-bg:#fff fixo, virando um retangulo
   branco com texto cinza escuro por cima do offcanvas escuro. Aba inativa some (borda clara
   fixa) no tema escuro/frio. */
.nav-tabs{
  border-color: var(--line);
}
.nav-tabs .nav-link{
  color: var(--text-dim);
  border-color: transparent;
}
.nav-tabs .nav-link:hover{
  border-color: var(--line) var(--line) var(--line);
  color: var(--text);
}
.nav-tabs .nav-link.active{
  background: var(--surface);
  border-color: var(--line) var(--line) var(--surface);
  color: var(--accent);
}

/* Scrollbar escura consistente em toda a aplicacao (Firefox + Chrome/Edge/Safari) -
   sem isso a barra de rolagem usa a cor padrao clara do SO/navegador, destoando do tema
   escuro (mesma tecnica ja usada em .cart-lines do PDV, generalizada aqui). */
html{
  scrollbar-width: thin;
  scrollbar-color: var(--line) var(--surface);
}
::-webkit-scrollbar{ width: 10px; height: 10px; }
::-webkit-scrollbar-track{ background: var(--surface); }
::-webkit-scrollbar-thumb{ background: var(--line); border-radius: 999px; }
::-webkit-scrollbar-thumb:hover{ background: var(--text-dim); }

/* Sidebar sempre na cor fixa, independente do tema ativo */
.pcoded-navbar,
.sidebar{
  background: var(--sidebar) !important;
  color: var(--sidebar-text);
}
.pcoded-navbar .pcoded-item > a,
.sidebar .sb-link{
  color: var(--sidebar-dim);
}
.pcoded-navbar .pcoded-item.active > a,
.pcoded-navbar .pcoded-item > a:hover,
.sidebar .sb-link.active,
.sidebar .sb-link:hover{
  background: var(--sidebar-active);
  color: var(--sidebar-text);
}