/*   
	Theme Name: Mix Gestor
	Theme URL: http://argosolucoes.com.br
	Description: Tema WordPress | Exclusivo - Layout, CSS, HTML, PHP e Wordpress.
	Author: Argo Soluções
	Author URI: http://argosolucoes.com.br
*/

/* Global scrollbar styling */
:root {
  --scrollbar-track: #f6f7fb;
  --scrollbar-thumb: rgba(26, 59, 99, 0.72);
  --scrollbar-thumb-hover: rgba(26, 59, 99, 0.92);
}

html {
  scrollbar-width: thin;
  scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
}

/* Tema claro/escuro — variáveis globais (ver specs/05-frontend.md §11) */
:root {
  --bg: #f5f6f8;
  --surface: #ffffff;
  --text: #1f2937;
  --text-muted: #6b7280;
  --border: #e5e7eb;
}

html.dark {
  /* Paleta neutra (cinza, sem branco puro) — ver specs/05-frontend.md §11 */
  --bg-page: #101827;
  --bg-sidebar: #0b1220;
  --bg-card: #1b2636;
  --bg-card-hover: #223044;
  --bg-element: #202d3f;

  --text-primary: #e5e7eb; /* títulos principais */
  --text-heading: #d1d5db; /* títulos de cards e menus */
  --text-body: #a8b0bd; /* texto comum */
  --text-disabled: #667085; /* desabilitado */

  --icon-primary: #c2cad5;
  --border-color: #334155;
  --border-subtle: rgba(148, 163, 184, 0.18);

  /* Aliases: as regras abaixo usam esses 5 nomes; --text = título/rótulo, --text-body = valor/corpo (ver uso pontual mais abaixo) */
  --bg: var(--bg-page);
  --surface: var(--bg-card);
  --text: var(--text-heading);
  --text-muted: #8b95a5; /* "textos secundários e descrições" */
  --border: var(--border-color);

  --scrollbar-track: var(--bg-card);
  --scrollbar-thumb: rgba(148, 163, 184, 0.3);
  --scrollbar-thumb-hover: rgba(148, 163, 184, 0.5);

  /* Neutraliza a cor de marca (folhas css/*.css) e o dourado do sidebar por cinza — dark não deve carregar identidade visual da empresa */
  --color-primary: #475569;
  --bs-primary: #475569;
  --sidebar-bg: var(--bg-sidebar);
  --sidebar-menu-level-1: #16202f;
  --sidebar-menu-level-2: #0f1620;
  --sidebar-menu-hover: rgba(255, 255, 255, 0.06);
  --sb-gold: var(--text-heading);
  --sb-gold-dim: rgba(255, 255, 255, 0.06);
  --sb-gold-line: rgba(209, 213, 219, 0.45);

  color-scheme: dark;
}

/* Fallback pra heading nativo sem ".color-primary" — especificidade menor, então ".color-primary" continua vencendo onde aplicada */
html.dark h1,
html.dark h2 {
  color: var(--text-primary);
}

/* Sem regra genérica de cor pra ".bi"/"[data-lucide]": eles herdam currentColor do pai, e forçar --icon-primary quebraria ícone-combina-com-texto em botão/badge colorido */

body {
  background: var(--bg);
  color: var(--text);
}

.card,
.table,
.table-responsive,
.modal-content,
.dropdown-menu,
.offcanvas {
  background-color: var(--surface);
  color: var(--text);
  border-color: var(--border);
}

.form-control,
.form-select {
  background-color: var(--surface);
  color: var(--text);
  border-color: var(--border);
}

/* Bootstrap reseta pra branco fixo no :focus, e o autofill do navegador ignora CSS normal — só box-shadow inset vence o autofill */
html.dark .form-control:focus {
  background-color: var(--surface) !important;
  color: var(--text) !important;
}

html.dark .form-control:-webkit-autofill,
html.dark .form-control:-webkit-autofill:hover,
html.dark .form-control:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--text) !important;
  -webkit-box-shadow: 0 0 0 1000px var(--surface) inset !important;
  box-shadow: 0 0 0 1000px var(--surface) inset !important;
  caret-color: var(--text);
}

/* css/style-final.css fixa cores nesses seletores com mais especificidade que ".table" acima, por isso o override à parte */
html.dark .table-responsive {
  background-color: var(--surface);
  border-color: var(--border);
}

html.dark .table {
  --bs-table-striped-bg: rgba(255, 255, 255, 0.035);
  --bs-table-hover-bg: rgba(255, 255, 255, 0.05);
  border-color: var(--border);
}

html.dark .table thead th {
  background-color: var(--surface);
  color: var(--text);
  border-color: var(--border);
}

html.dark .table td {
  color: var(--text-body);
  border-color: var(--border);
}

.text-muted {
  color: var(--text-muted) !important;
}

/* Toggle sol/lua: ícone mostrado é o destino do clique (lua no claro, sol no escuro). Prefixo #theme-toggle pra vencer [data-lucide]{display:inline-block} do header.php */
#theme-toggle .theme-icon-dark {
  display: none;
}

html.dark #theme-toggle .theme-icon-light {
  display: none;
}

html.dark #theme-toggle .theme-icon-dark {
  display: inline-block;
}

#theme-toggle,
.mix-header-icon-btn {
  border: 1px solid var(--border);
}

html.dark #theme-toggle,
html.dark .mix-header-icon-btn {
  background-color: var(--surface);
  color: var(--text);
}

/* Itens de dropdown (ex.: "Ações" nas tabelas) — texto escuro por padrão do Bootstrap, ilegível sobre --surface escuro */
html.dark .dropdown-item {
  color: var(--text-body);
}

html.dark .dropdown-item:hover,
html.dark .dropdown-item:focus {
  background-color: var(--bg-card-hover);
  color: var(--text-heading);
}

/* Botão "Ações" (btn-outline-secondary) — cinza claro Bootstrap tem contraste baixo sobre --surface escuro */
html.dark .btn-outline-secondary {
  color: var(--text-muted);
  border-color: var(--border);
}

html.dark .btn-outline-secondary:hover {
  background-color: var(--bg-card-hover);
  color: var(--text-heading);
  border-color: var(--border);
}

/* X de fechar modal/offcanvas — ícone escuro do Bootstrap fica invisível sobre --surface escuro */
html.dark .modal .btn-close,
html.dark .offcanvas .btn-close {
  filter: invert(1) grayscale(1) brightness(1.8);
}

/* Paginação — Bootstrap usa fundo branco fixo nos page-link */
html.dark .pagination .page-item .page-link {
  background-color: var(--surface);
  border-color: var(--border);
  color: var(--text-body);
}

html.dark .pagination .page-item.disabled .page-link {
  background-color: var(--surface);
  border-color: var(--border);
  color: var(--text-disabled);
}

/* Cabeçalho de seção em telas de cadastro (.cadastro_dados h2) — caixa cinza-claro fixa */
html.dark .cadastro_dados h2 {
  background: var(--border);
  color: var(--text);
}

/* Fundo branco fixo atrás da imagem nos cards de produto */
html.dark .product-grid-card .card-img-wrapper {
  background: var(--surface);
  border-bottom-color: var(--border);
}

/* Linha de borda clara residual em tabelas e o "anel" branco do badge de filtros */
html.dark .table > :not(:last-child) > :last-child > * {
  border-bottom-color: var(--border);
}

html.dark .btn-filtro-count .filtro-badge {
  box-shadow: 0 0 0 2px var(--surface);
}

/* Fundo do ícone nos cards da home: acompanha a cor primária de cada empresa (--bs-primary) */
.icon-tile-primary {
  background: color-mix(in srgb, var(--bs-primary, #0d6efd) 15%, transparent);
}

/* --color-primary (cinza neutro) funciona como fundo de botão/badge, mas como cor de TEXTO direto fica apagado — esses casos usam --text */
html.dark .color-primary,
html.dark .text-primary,
html.dark .product-grid-code {
  color: var(--text) !important;
}

html.dark a,
html.dark .nav-link {
  color: var(--text);
}

html.dark .btn-outline-primary {
  color: var(--text) !important;
  border-color: var(--border) !important;
}

html.dark .btn-outline-primary:hover,
html.dark .btn-outline-primary:focus {
  background-color: var(--color-primary) !important;
  color: #fff !important;
}

/* Botão "+ Adicionar" e dropdown de itens do sidebar — dourado fixo (#C9A84C), não variável */
html.dark .sidebar .btn-warning,
html.dark .sidebar #btnAdicionarPedido {
  background: var(--border) !important;
  border-color: var(--border) !important;
  color: var(--text) !important;
}

html.dark .sidebar .btn-warning:hover,
html.dark .sidebar #btnAdicionarPedido:hover {
  background: #4b5563 !important;
  border-color: #4b5563 !important;
  color: #fff !important;
  /* Substitui o box-shadow dourado que style-final.css põe nesse hover */
  box-shadow: 0 4px 14px rgba(0, 0, 0, .35), inset 0 0 0 1px rgba(255, 255, 255, .06) !important;
}

html.dark .sidebar .btn-warning [data-lucide],
html.dark .sidebar #btnAdicionarPedido [data-lucide] {
  color: var(--text) !important;
  stroke: var(--text) !important;
}

html.dark .sidebar .dropdown-menu {
  border-color: var(--border) !important;
}

html.dark .sidebar .dropdown-menu .dropdown-item:hover,
html.dark .sidebar .dropdown-menu .dropdown-item:focus {
  background: rgba(255, 255, 255, 0.08) !important;
}

html.dark .sidebar .dropdown-menu .dropdown-item [data-lucide] {
  color: var(--text-muted) !important;
  stroke: var(--text-muted) !important;
}

html.dark .sidebar::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.3) !important;
}

/* Logo/marca do sidebar (ícone + "Coquetel Express") — dourado fixo */
html.dark .sidebar-brand-icon {
  background: rgba(255, 255, 255, 0.08);
  border-color: var(--border);
}

html.dark .sidebar-brand-lucide,
html.dark .sidebar-brand-sub {
  color: var(--text-muted) !important;
  stroke: var(--text-muted) !important;
}

/* Badge numérico do botão "Filtros" — dourado fixo */
html.dark .btn-filtro-count .filtro-badge {
  background: var(--color-primary);
}

/* Caixa com o logo da empresa no topo (tint azul-marinho fixo) */
html.dark .topbar-empresa-logo {
  background: rgba(255, 255, 255, 0.05);
  border-color: var(--border);
}

/* Hover da paginação — tint azul-marinho fixo */
html.dark .pagination .page-item .page-link:hover {
  background: var(--bg-card-hover);
  border-color: var(--border);
  color: var(--text-heading);
}

/* Painéis com fundo branco fixo em <style> local de cada página (não em style-final.css) — override aqui vence por vir depois no documento */

/* Painel do wizard de Novo Pedido/Nova Saída/Carrinho e card de sucesso ao finalizar */
html.dark .wizard-panel,
html.dark .pedido-sucesso {
  background: var(--surface);
  color: var(--text);
}

/* Linhas de tabela em layout "cartão" no mobile (itens de pedido, drinks da calculadora) */
html.dark .table-drinks tr,
html.dark .itens-mobile tr {
  background: var(--surface);
  border-color: var(--border);
}

/* Bolinha da timeline de status do pedido — estado padrão só (ativo/verde e alerta/amarelo continuam coloridos de propósito) */
html.dark .pedido-timeline-dot {
  background: var(--surface);
  border-color: var(--border);
  color: var(--text-muted);
}

/* Stepper "Itens > Quantidades > Destinatário" (inc/pedido_wizard_stepper.php) usa uma cor de marca própria (--pwz-primary), fora do padrão --color-primary */
html.dark .pedido-wizard-stepper {
  --pwz-primary: #475569;
  --pwz-primary-light: #64748b;
}

html.dark .pedido-wizard-stepper .pwz-circle {
  background: var(--surface);
  border-color: var(--border);
  color: var(--text-muted);
}

/* .border/.border-bottom do Bootstrap são cor fixa — escopo restrito a estes 2 seletores pra não pegar badge com borda semântica (.border-warning-subtle etc.) */
html.dark .topbar-content-header {
  border-bottom-color: var(--border) !important;
}

html.dark .border.rounded-3 {
  border-color: var(--border) !important;
}

/* Cards de notificação: sem borda + fundo --bg-element pra separar do dropdown, em vez de contorno */
html.dark .dropdown-menu .card.border {
  border-color: transparent !important;
  background-color: var(--bg-element);
}

/* Linha sob "Linha do Tempo" (single-movimentacao.php) — mesmo caso do .border-bottom acima */
html.dark .pedido-page-card .border-bottom {
  border-bottom-color: var(--border-subtle) !important;
}

/* Títulos de seção "H2 sublinhado" (Dados Gerais, Dados Cálculo, Custos Totais,
   etc. — mesmo padrão em ~20 telas) usam .border-bottom do Bootstrap, cor fixa
   clara que berra contra o fundo do card escuro. Escopo em h2.border-bottom
   (não .border-bottom genérico) pra não mexer nos separadores do menu lateral
   (li.nav-item.border-bottom) nem em outros usos sem relação com título de seção. */
html.dark h2.border-bottom {
  border-bottom-color: var(--border) !important;
}

/* .alert-light do Bootstrap é fundo quase branco fixo — usado como caixa de
   destaque neutra (ex.: "Total Drinks" na calculadora de orçamento). */
html.dark .alert-light {
  background-color: var(--bg-element);
  color: var(--text);
  border-color: var(--border);
}

/* .alert-{cor} do Bootstrap são fundos pastel fixos — ilegíveis/estridentes
   contra o fundo escuro. Reescreve como fundo translúcido da própria cor. */
html.dark .alert-warning {
  background-color: rgba(245, 158, 11, 0.15);
  color: #fbbf24;
  border-color: rgba(245, 158, 11, 0.35);
}

html.dark .alert-success {
  background-color: rgba(34, 197, 94, 0.15);
  color: #4ade80;
  border-color: rgba(34, 197, 94, 0.35);
}

html.dark .alert-danger {
  background-color: rgba(239, 68, 68, 0.15);
  color: #f87171;
  border-color: rgba(239, 68, 68, 0.35);
}

html.dark .alert-info {
  background-color: rgba(6, 182, 212, 0.15);
  color: #22d3ee;
  border-color: rgba(6, 182, 212, 0.35);
}

html.dark .alert-secondary {
  background-color: var(--bg-element);
  color: var(--text);
  border-color: var(--border);
}

/* .table-light/.table-warning do Bootstrap também são cor fixa clara (usados na
   calculadora de orçamento p/ destacar a linha de "Total Geral" e "Desconto"). */
html.dark .table-light {
  --bs-table-bg: var(--bg-element);
  --bs-table-striped-bg: var(--bg-card-hover);
  --bs-table-hover-bg: var(--bg-card-hover);
  color: var(--text);
  border-color: var(--border);
}

html.dark .table-warning {
  --bs-table-bg: rgba(245, 158, 11, 0.15);
  --bs-table-striped-bg: rgba(245, 158, 11, 0.18);
  --bs-table-hover-bg: rgba(245, 158, 11, 0.2);
  color: var(--text);
  border-color: rgba(245, 158, 11, 0.35);
}

/* Mesmo caso na barra "Novo Pedido"/"Finalizar Pedido" (inc/header_adicionar_pedido.php, inc/header_pedido_adicionado.php) */
html.dark .novo-pedido-header-row.border-bottom {
  border-bottom-color: var(--border-subtle) !important;
}

/* .wizard-panel-topbar se repete nos 3 passos do wizard de pedido (mesma cor fixa nos 2 arquivos) — 1 override cobre os 3 */
html.dark .wizard-panel-topbar {
  border-bottom-color: var(--border-subtle);
}

html.dark .wizard-filtros-horizontal {
  background: var(--bg-element);
}

/* Cabeçalho/rodapé de modal: cor fixa sem !important, dá pra sobrescrever genérico (diferente do .border solto acima) */
html.dark .modal-header,
html.dark .modal-footer {
  border-color: var(--border-subtle);
}

/* .text-dark (preto fixo) fica ilegível sobre card escuro — exceto dentro de badge sobre fundo claro/amarelo proposital, onde o preto continua certo */
html.dark .text-dark:not(.bg-light):not(.bg-warning):not(.bg-warning-subtle):not(.bg-info):not(.bg-info-subtle):not(.bg-success):not(.bg-success-subtle) {
  color: var(--text) !important;
}

/* .bg-white fixo em cabeçalho/rodapé de card, thead e modal — ficava branco mesmo com o resto do card já escuro */
html.dark .card-header.bg-white,
html.dark .card-footer.bg-white,
html.dark thead.bg-white,
html.dark .modal-body.bg-white,
html.dark .modal-footer.bg-white {
  background-color: var(--surface) !important;
  border-color: var(--border) !important;
  color: var(--text) !important;
}

/* Mesmo caso numa barra de ações marcada só com ".border-top.bg-white" (offcanvas de filtro) */
html.dark .border-top.bg-white {
  background-color: var(--surface) !important;
  border-color: var(--border) !important;
}

/* .list-group-item (lista "Últimos Eventos" da home) tinha fundo branco fixo — texto claro (--text) sumia sobre esse fundo */
html.dark .list-group-item {
  background-color: var(--surface);
  color: var(--text);
  border-color: var(--border);
}

/* .accordion do Bootstrap (fora do sidebar, usado em "Estoques Área x Unidade" de single-produto.php) tem fundo branco fixo */
html.dark .accordion-item {
  background-color: var(--surface);
  border-color: var(--border);
}

html.dark .accordion-button {
  color: var(--text);
  background-color: var(--surface);
}

html.dark .accordion-button:not(.collapsed) {
  color: var(--text);
  background-color: var(--bg-element);
  box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.06);
}

html.dark .accordion-button::after {
  filter: invert(1) grayscale(1) brightness(1.8);
}

/* Valores dentro do accordion (ex.: "SP/RJ/SC") são corpo de texto, não título — usam --text-body em vez do --text herdado */
html.dark .accordion-body {
  color: var(--text-body);
}

/* Devolve o filtro original da seta do sidebar, que a regra genérica acima sobrescreveria */
html.dark .sidebar .accordion-button::after {
  filter: brightness(0) invert(1);
}

/* .bg-light (fundo claro fixo) usado como painel/divisor sutil ou campo readonly — ":not(.badge)" preserva o badge cinza proposital de page-carrinhos.php */
html.dark .bg-light:not(.badge) {
  background-color: var(--border) !important;
  border-color: var(--border) !important;
}

/* readonly/disabled sem .bg-light explícito: readonly ainda mostra valor relevante (--text-muted), disabled usa o tom mais apagado (--text-disabled) */
html.dark .form-control[readonly] {
  background-color: var(--border);
  color: var(--text-muted);
}

html.dark .form-control:disabled {
  background-color: var(--border);
  color: var(--text-disabled);
}

/* Prefixo/sufixo de input-group (ex.: "R$" antes do campo de Valor) — fundo
   cinza-claro fixo do Bootstrap ("#e9ecef"), sem variável. */
html.dark .input-group-text {
  background-color: var(--border);
  color: var(--text-muted);
  border-color: var(--border);
}

/* .farol-col precisa ler como caixa (fundo + borda visivelmente diferente do --bg-page ao redor), não "sumir" */
html.dark .farol-col {
  background-color: var(--bg-card);
  border-color: var(--border);
}

/* Badges "Institucional"/"Sustentável": classes "-subtle" não existem no Bootstrap 5.0.2 instalado (são inertes), então uso o nome da classe só como gancho de seletor pra dar a borda na cor certa */
html.dark .border-success-subtle {
  border-color: rgba(25, 135, 84, 0.35) !important;
}

html.dark .border-warning-subtle {
  border-color: rgba(255, 193, 7, 0.35) !important;
}

/* Tela de login (page.php) não tem toggle próprio, mas respeita o tema salvo no localStorage via script anti-flash em page.php */
html.dark .login-page {
  background: var(--bg);
}

html.dark .login-card {
  background: var(--surface);
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.4);
}

html.dark .login-brand-title {
  color: var(--text);
}

html.dark .login-brand-sub,
html.dark .login-brand-lucide {
  color: var(--text-muted) !important;
  stroke: var(--text-muted) !important;
}

html.dark .login-card .tml-button:hover,
html.dark .login-card input[type="submit"]:hover {
  background: #374151 !important;
  border-color: #374151 !important;
}

/* Campo de e-mail/senha do login usa a classe ".tml-field" do plugin Theme My Login, não ".form-control" do Bootstrap — precisa do mesmo tratamento à parte */
html.dark .tml-field {
  background-color: var(--surface);
  color: var(--text);
  border-color: var(--border);
}

html.dark .tml-field:-webkit-autofill,
html.dark .tml-field:-webkit-autofill:hover,
html.dark .tml-field:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--text) !important;
  -webkit-box-shadow: 0 0 0 1000px var(--surface) inset !important;
  box-shadow: 0 0 0 1000px var(--surface) inset !important;
  caret-color: var(--text);
}

html.dark .tml-label {
  color: var(--text-muted);
}

*::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

*::-webkit-scrollbar-track {
  background: var(--scrollbar-track);
}

*::-webkit-scrollbar-thumb {
  background-color: var(--scrollbar-thumb);
  border-radius: 0;
  border: 0;
}

*::-webkit-scrollbar-thumb:hover {
  background-color: var(--scrollbar-thumb-hover);
}

*::-webkit-scrollbar-corner {
  background: transparent;
}

/* Rodapé fixo ao fim da viewport quando o conteúdo é curto (ex.: filtro sem
   resultado). main vira coluna flex; .mix-page-content cresce pra empurrar o
   rodapé pra baixo, mas mantém o fluxo normal (e o collapse de margens) do
   conteúdo de cada página — só main ganha filhos flex (topbar/conteúdo/rodapé). */
main.col-md-9 {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.mix-page-content {
  flex: 1 0 auto;
  min-width: 0; /* sem isso, um .table-responsive largo (ex.: text-nowrap) empurra
                   o layout inteiro pra fora em vez de rolar dentro de si mesmo —
                   item flex por padrão não encolhe abaixo do conteúdo (min-width: auto) */
}

/* Rodapé padrão, presente em todas as páginas (ver footer.php) */
.mix-footer {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
  margin-top: 2rem;
  padding: 1rem 0;
  border-top: 1px solid var(--border);
  text-align: center;
  font-size: 0.75rem;
  color: var(--text-muted);
}

.mix-footer a {
  color: var(--text-muted);
  text-decoration: underline;
}

.mix-footer a:hover {
  color: var(--text);
}

.mix-footer-sep {
  margin: 0 0.5rem;
  opacity: 0.6;
}

/* Variante sem borda/margem grande, usada no rodapé da coluna de login (page.php) */
.mix-footer--login {
  margin-top: 1.5rem;
  padding: 0;
  border-top: 0;
}

/* Selo "criptografado de ponta a ponta", exibido na tela de login pra passar
   confiança no momento da autenticação (ver page.php) */
.mix-security-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.45rem 1rem;
  margin: 1.25rem 0;
  border-radius: 999px;
  background: rgba(16, 185, 129, 0.12);
  color: #10b981;
  font-size: 0.8rem;
  font-weight: 600;
}

.mix-security-badge svg {
  width: 16px;
  height: 16px;
  stroke: #10b981;
}

/* Botão de mostrar/ocultar senha, injetado via JS no campo de senha do login
   (Theme My Login renderiza o input dinamicamente, ver page.php) */
.mix-password-toggle-wrapper {
  position: relative;
}

.mix-password-toggle-wrapper input {
  padding-right: 2.75rem !important;
}

.mix-password-toggle {
  position: absolute;
  top: 50%;
  right: 0.75rem;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  padding: 0;
  border: 0;
  background: none;
  color: var(--text-muted);
  cursor: pointer;
}

.mix-password-toggle:hover {
  color: var(--text);
}

.mix-password-toggle svg {
  width: 18px;
  height: 18px;
}