/* ========================================================================== */
/* TemaFacilApp.css - deve ficar em EXE\MENU\TemaFacilApp.css               */
/* Paletas compartilhadas: menu2 e dashboards.                               */
/* ========================================================================== */

:root, html[data-theme="default"], body[data-theme="default"] {
  --fa-primary:#145f97; --fa-primary-dark:#0f4f7f; --fa-accent:#145f97;
  --fa-button-bg:var(--fa-primary); --fa-button-border:var(--fa-primary);
  --fa-button-hover-bg:var(--fa-primary-dark); --fa-button-hover-border:var(--fa-primary-dark); --fa-button-text:#fff;
  --fa-background:#f3f7fb; --fa-panel:#ffffff; --fa-border:#dfe8f1;
  --fa-field-bg:var(--fa-panel);
  --fa-text:#1b2b3d; --fa-muted:#6d7f91;
}
/* Contrato unico para qualquer dashboard, modal ou tela filha.
   As paginas novas devem usar estas variaveis e nunca cores fixas. */
:root {
  --panel:var(--fa-panel); --panel-alt:var(--fa-panel-alt,var(--fa-panel)); --background:var(--fa-background);
  --border:var(--fa-border); --text:var(--fa-text); --text-dim:var(--fa-muted);
  --primary:var(--fa-primary); --primary-dark:var(--fa-primary-dark); --accent:var(--fa-accent);
  --fa-selection-bg:color-mix(in srgb,var(--fa-accent) 18%,var(--fa-panel));
  --fa-selection-text:var(--fa-text);
  --fa-row-hover-bg:color-mix(in srgb,var(--fa-accent) 10%,var(--fa-panel));
  --fa-row-hover-text:var(--fa-text);
  --dashboard-bg:var(--fa-background); --dashboard-panel:var(--fa-panel);
  --dashboard-panel-alt:var(--fa-panel-alt,var(--fa-panel)); --dashboard-border:var(--fa-border);
  --dashboard-text:var(--fa-text); --dashboard-muted:var(--fa-muted);
}
/* V1 - Cyberpunk: paleta extraida do mockup "FacilApp - Menu Principal"
   (neon ciano/magenta/roxo sobre fundo quase preto) enviado por Daniel em
   02/08/2026. O rotulo "v1 - Azul" era so um nome de versao, nao a cor real
   — confirmado com o Daniel (AskUserQuestion) que e pra usar exatamente
   essas cores (ciano #00f7ff / magenta #ff00e6 / roxo #7a00ff), e depois
   ele mesmo pediu o nome "V1 - Cyberpunk". Roxo vira o botao primario (bom
   contraste com texto branco); magenta vira o hover; ciano fica reservado
   pra acento/foco/icone ativo (contra o fundo escuro, nao teria contraste
   nenhum atras de texto branco). */
html[data-theme="v1-cyberpunk"], body[data-theme="v1-cyberpunk"] {
  --fa-primary:#7a00ff; --fa-primary-dark:#ff00e6; --fa-accent:#00f7ff;
  --fa-button-bg:var(--fa-primary); --fa-button-border:var(--fa-primary);
  --fa-button-hover-bg:var(--fa-primary-dark); --fa-button-hover-border:var(--fa-primary-dark); --fa-button-text:#fff;
  --fa-background:#050815; --fa-panel:#0a0f24; --fa-panel-alt:#131c38; --fa-border:#123a52;
  --fa-field-bg:#0f1830;
  --fa-text:#e0f7ff; --fa-muted:#7a9cb8;
  --primary:#7a00ff; --primary-dark:#ff00e6; --primary-soft:#170b33; --accent:#00f7ff;
  --background:#050815; --panel:#0a0f24; --border:#123a52;
  --text:#e0f7ff; --text-dim:#7a9cb8; --sidebar-bg:#0a0f24;
  --sidebar-border:#123a52; --sidebar-text:#e0f7ff; --sidebar-text-muted:#7a9cb8;
  --sidebar-text-hover:#00f7ff; --sidebar-group-title:#7a9cb8;
  --sidebar-item-active-bg:#170b33; --sidebar-item-active-text:#00f7ff;
  --sidebar-item-hover-bg:rgba(0,247,255,.08); --search-bg:#0e1530; --search-border:#123a52;
  --search-text:#e0f7ff; --header-bg:#050815;
  --azul:#7a00ff; --azul-escuro:#ff00e6; --fundo:#050815; --painel:#0a0f24;
  --borda:#123a52; --texto:#e0f7ff; --muted:#7a9cb8;
  --sombra:0 4px 20px rgba(0,247,255,.18);
  --bg:#050815; --card:#0a0f24; --line:#123a52; --txt:#e0f7ff; --mut:#7a9cb8;
  --blue:#7a00ff; --blue2:#ff00e6; --blue-dark:#ff00e6; --soft:#131c38;
  --panel2:#10182f; --field:#0f1830; --texto2:#c8dce8;
}
html[data-theme="jotape"], body[data-theme="jotape"] {
  --fa-primary:#59651f; --fa-primary-dark:#414b16; --fa-accent:#778337;
  --fa-button-bg:var(--fa-primary); --fa-button-border:var(--fa-primary);
  --fa-button-hover-bg:var(--fa-primary-dark); --fa-button-hover-border:var(--fa-primary-dark); --fa-button-text:#fff;
  --fa-background:#bfd5a5; --fa-panel:#d8e9c5; --fa-panel-alt:#c9ddb0; --fa-border:#9caf77;
  --fa-field-bg:#eef5e5; --fa-text:#171a10; --fa-muted:#596044;
  --fa-selection-bg:#a9c482; --fa-selection-text:#171a10;
  --fa-row-hover-bg:#c4daa9; --fa-row-hover-text:#171a10;
  --sidebar-bg:#667329; --sidebar-border:#7f8d43; --sidebar-text:#fff;
  --sidebar-text-muted:#e2ebcf; --sidebar-item-active-bg:#4b571b; --sidebar-item-active-text:#fff;
}
html[data-theme="dark-tech"], body[data-theme="dark-tech"] {
  --fa-primary:#075985; --fa-primary-dark:#0f4f7f; --fa-accent:#075985;
  /* V2: normal = antigo hover V2; hover = hover do tema Padrão. */
  --fa-button-bg:var(--fa-primary-dark); --fa-button-border:var(--fa-primary-dark);
  --fa-button-hover-bg:#145f97; --fa-button-hover-border:#145f97; --fa-button-text:#fff;
  --fa-background:#0b0f19; --fa-panel:#111827; --fa-panel-alt:#172235; --fa-border:#1f293d;
  --fa-field-bg:#1e293b;
  --fa-text:#cbd5e1; --fa-muted:#94a3b8;
  --fa-selection-bg:#1e293b; --fa-selection-text:#38bdf8;
  --fa-row-hover-bg:#203552; --fa-row-hover-text:#cbd5e1;
  --fa-combo-selection-bg:#1e293b; --fa-combo-selection-text:#38bdf8;
}
html[data-theme="obsidian-gold"], body[data-theme="obsidian-gold"] {
  --fa-primary:#b48c48; --fa-primary-dark:#8c6a30; --fa-accent:#b48c48;
  --fa-button-bg:var(--fa-primary); --fa-button-border:var(--fa-primary);
  --fa-button-hover-bg:var(--fa-primary-dark); --fa-button-hover-border:var(--fa-primary-dark); --fa-button-text:#fff;
  --fa-background:#0d1117; --fa-panel:#161b22; --fa-border:#30363d;
  --fa-text:#c9d1d9; --fa-muted:#8b949e;
}
html[data-theme="deep-teal"], body[data-theme="deep-teal"] {
  --fa-primary:#0d9488; --fa-primary-dark:#0f766e; --fa-accent:#0d9488;
  --fa-button-bg:var(--fa-primary); --fa-button-border:var(--fa-primary);
  --fa-button-hover-bg:var(--fa-primary-dark); --fa-button-hover-border:var(--fa-primary-dark); --fa-button-text:#fff;
  --fa-background:#06141b; --fa-panel:#11212d; --fa-border:#253e4b;
  --fa-text:#cbd5e1; --fa-muted:#94a3b8;
}
html[data-theme="codex-dark"], body[data-theme="codex-dark"] {
  /* V8: ações neutras; o azul é usado apenas como acento/hover, sem brilho. */
  --fa-primary:#0873b9; --fa-primary-dark:#065a91; --fa-accent:#0873b9;
  /* Base azul-acinzentada: destaca a ação sem competir com o acento azul do hover. */
  /* Igual ao item selecionado do menu V8: unidade visual entre navegação e ações. */
  --fa-button-bg:#2a3641; --fa-button-border:#40515e;
  --fa-button-hover-bg:#334552; --fa-button-hover-border:#0873b9; --fa-button-text:#f0f0f0;
  --fa-background:#1b1b1b; --fa-panel:#222222; --fa-border:#383838;
  --fa-text:#e7e7e7; --fa-muted:#a6a6a6;
  --primary:#0873b9; --primary-dark:#065a91; --primary-soft:#263442; --accent:#0873b9;
  --background:#1b1b1b; --panel:#222222; --border:#383838;
  --text:#e7e7e7; --text-dim:#a6a6a6; --sidebar-bg:#1e1e1e;
  --sidebar-border:#383838; --sidebar-text:#e7e7e7; --sidebar-text-muted:#a6a6a6;
  --sidebar-text-hover:#ffffff; --sidebar-group-title:#d0d0d0;
  --sidebar-item-active-bg:#2a3641; --sidebar-item-active-text:#0873b9;
  --sidebar-item-hover-bg:#2a2a2a; --search-bg:#252525; --search-border:#464646;
  --search-text:#e7e7e7; --header-bg:#1e1e1e;
  --azul:#0873b9; --azul-escuro:#065a91; --fundo:#1b1b1b; --painel:#222222;
  --borda:#383838; --texto:#e7e7e7; --muted:#a6a6a6;
  --sombra:0 4px 16px rgba(0,0,0,.28);
  --bg:#1b1b1b; --card:#222222; --line:#383838; --txt:#e7e7e7; --mut:#a6a6a6;
  --blue:#0873b9; --blue2:#065a91; --blue-dark:#065a91; --soft:#263442;
  --panel2:#262626; --field:#252525; --texto2:#cfcfcf;
}

/* ========================================================================== */
/* COMPATIBILIDADE DE BOTÕES LEGADOS                                          */
/* Páginas antigas usam --blue/--azul. Mantenha estas variáveis apontadas     */
/* para a paleta ativa; nunca fixe azul dentro das dashboards.                */
/* Assim V5 usa dourado, V2 azul, V7 verde-azulado e os demais temas também. */
/* ========================================================================== */
:root,
html[data-theme],
body[data-theme]{
  --blue:var(--fa-primary);
  --blue2:var(--fa-primary-dark);
  --blue-dark:var(--fa-primary-dark);
  --azul:var(--fa-primary);
  --azul-escuro:var(--fa-primary-dark);
}

/* ========================================================================== */
/* COMPONENTES COMPARTILHADOS                                                  */
/* Regra unica para dashboards, consultas e janelas HTML. As paginas devem    */
/* definir somente tamanho e posicao; cor vem sempre do tema ativo.            */
/* ========================================================================== */
html[data-theme] .btn,
body[data-theme] .btn,
html[data-theme] button,
body[data-theme] button,
html[data-theme] .action-btn,
body[data-theme] .action-btn,
html[data-theme] .filter-buttons button,
body[data-theme] .filter-buttons button,
html[data-theme] .actions button,
body[data-theme] .actions button,
html[data-theme] .print-toolbar button,
body[data-theme] .print-toolbar button{
  color:var(--fa-button-text) !important;
  background:var(--fa-button-bg) !important;
  border-color:var(--fa-button-border) !important;
  font-weight:400 !important;
  box-shadow:none !important;
}

/* V2: o rotulo interno dos botoes acompanha o peso normal do componente. */
html[data-theme="dark-tech"] button span,
html[data-theme="dark-tech"] .btn span,
body[data-theme="dark-tech"] button span,
body[data-theme="dark-tech"] .btn span {
  font-weight:400 !important;
}

/* V2: modelo unico dos combos, baseado no seletor Situação do Pagar. */
html[data-theme="dark-tech"] select,
body[data-theme="dark-tech"] select {
  color-scheme:dark;
  font-size:11px;
  font-weight:400;
}
html[data-theme="dark-tech"] select option,
body[data-theme="dark-tech"] select option {
  background:var(--fa-panel);
  color:var(--fa-text);
  font-size:11px;
  font-weight:400;
}
html[data-theme="dark-tech"] select option:hover,
body[data-theme="dark-tech"] select option:hover,
html[data-theme="dark-tech"] select option:focus,
body[data-theme="dark-tech"] select option:focus,
html[data-theme="dark-tech"] select option:checked,
body[data-theme="dark-tech"] select option:checked {
  background:var(--fa-combo-selection-bg) linear-gradient(0deg,var(--fa-combo-selection-bg) 0 0);
  box-shadow:inset 0 0 0 100px var(--fa-combo-selection-bg);
  color:var(--fa-combo-selection-text);
}

html[data-theme] .btn:hover,
body[data-theme] .btn:hover,
html[data-theme] button:hover,
body[data-theme] button:hover,
html[data-theme] .action-btn:hover,
body[data-theme] .action-btn:hover,
html[data-theme] .filter-buttons button:hover,
body[data-theme] .filter-buttons button:hover,
html[data-theme] .actions button:hover,
body[data-theme] .actions button:hover,
html[data-theme] .print-toolbar button:hover,
body[data-theme] .print-toolbar button:hover{
  color:var(--fa-button-text) !important;
  background:var(--fa-button-hover-bg) !important;
  border-color:var(--fa-button-hover-border) !important;
  font-weight:400 !important;
  filter:brightness(1.12) !important;
  box-shadow:none !important;
}

/* Prioridade final: páginas antigas ainda possuem seletores próprios de botão.
   Esta regra usa somente as variáveis do tema e impede que uma página devolva
   azul fixo a um tema como o V8. */
html[data-theme] body button,
html[data-theme] body .btn,
html[data-theme] body .action-btn,
html[data-theme] body .receber-btn,
html[data-theme] body .pagar-btn,
body[data-theme] button,
body[data-theme] .btn,
body[data-theme] .action-btn,
body[data-theme] .receber-btn,
body[data-theme] .pagar-btn{
  color:var(--fa-button-text) !important;
  background:var(--fa-button-bg) !important;
  border:1px solid var(--fa-button-border) !important;
  font-weight:400 !important;
  box-shadow:none !important;
}
html[data-theme] body button:hover,
html[data-theme] body .btn:hover,
html[data-theme] body .action-btn:hover,
html[data-theme] body .receber-btn:hover,
html[data-theme] body .pagar-btn:hover,
body[data-theme] button:hover,
body[data-theme] .btn:hover,
body[data-theme] .action-btn:hover,
body[data-theme] .receber-btn:hover,
body[data-theme] .pagar-btn:hover{
  color:var(--fa-button-text) !important;
  background:var(--fa-button-hover-bg) !important;
  border-color:var(--fa-button-hover-border) !important;
  font-weight:400 !important;
  filter:brightness(1.12) !important;
}

html[data-theme],
html[data-theme] *,
body[data-theme],
body[data-theme] *{
  scrollbar-color:var(--fa-primary-dark) var(--fa-panel);
}

html[data-theme]::-webkit-scrollbar,
body[data-theme]::-webkit-scrollbar,
html[data-theme] ::-webkit-scrollbar,
body[data-theme] ::-webkit-scrollbar{
  width:8px;
  height:8px;
  background:var(--fa-panel);
}

html[data-theme]::-webkit-scrollbar-track,
body[data-theme]::-webkit-scrollbar-track,
html[data-theme] ::-webkit-scrollbar-track,
body[data-theme] ::-webkit-scrollbar-track,
html[data-theme]::-webkit-scrollbar-corner,
body[data-theme]::-webkit-scrollbar-corner,
html[data-theme] ::-webkit-scrollbar-corner,
body[data-theme] ::-webkit-scrollbar-corner{
  background:var(--fa-panel) !important;
  border-color:var(--fa-border) !important;
}

html[data-theme]::-webkit-scrollbar-thumb,
body[data-theme]::-webkit-scrollbar-thumb,
html[data-theme] ::-webkit-scrollbar-thumb,
body[data-theme] ::-webkit-scrollbar-thumb{
  background:var(--fa-primary-dark) !important;
  border-color:var(--fa-panel) !important;
  border-radius:4px;
}

html[data-theme]::-webkit-scrollbar-thumb:hover,
body[data-theme]::-webkit-scrollbar-thumb:hover,
html[data-theme] ::-webkit-scrollbar-thumb:hover,
body[data-theme] ::-webkit-scrollbar-thumb:hover{
  background:var(--fa-accent) !important;
}

/* BROWSE WEB: seleção única e opaca para grades Tabulator.
   Usa somente o contrato global do tema, sem cor definida pela página. */
html[data-theme] body .tabulator .tabulator-row.tabulator-selected,
html[data-theme] body .tabulator .tabulator-row.tabulator-selected:hover,
body[data-theme] .tabulator .tabulator-row.tabulator-selected,
body[data-theme] .tabulator .tabulator-row.tabulator-selected:hover{
  background:var(--fa-selection-bg) !important;
  color:var(--fa-selection-text) !important;
}
html[data-theme] body .tabulator .tabulator-row.tabulator-selected .tabulator-cell,
body[data-theme] .tabulator .tabulator-row.tabulator-selected .tabulator-cell{
  color:var(--fa-selection-text) !important;
}
/* O tema pode chegar ao iframe antes do atributo data-theme.
   Este seletor atinge diretamente o estado nativo do Tabulator. */
.tabulator .tabulator-row.tabulator-selected,
.tabulator .tabulator-row.tabulator-selected:hover{
  background-color:var(--fa-selection-bg) !important;
  color:var(--fa-selection-text) !important;
}
.tabulator .tabulator-row.tabulator-selected .tabulator-cell{
  background-color:transparent !important;
  color:var(--fa-selection-text) !important;
}
.tabulator .tabulator-row:not(.tabulator-selected):hover{
  background-color:var(--fa-row-hover-bg) !important;
  color:var(--fa-row-hover-text) !important;
}

/* ABAS: o item ativo herda o mesmo destaque opaco da selecao do tema. */
.tabs .tab.active,
.tab.active{
  background:var(--fa-selection-bg);
  color:var(--fa-selection-text);
  border-color:var(--fa-border);
}
.tabulator .tabulator-row:not(.tabulator-selected):hover .tabulator-cell{
  background-color:transparent !important;
  color:var(--fa-row-hover-text) !important;
}

/* BROWSE WEB: o Tabulator possui hover branco nativo nas colunas ordenáveis.
   O cabeçalho deve permanecer opaco e seguir exclusivamente o tema ativo. */
.tabulator .tabulator-header .tabulator-col:hover,
.tabulator .tabulator-header .tabulator-col.tabulator-sortable:hover{
  background:var(--fa-row-hover-bg) !important;
  color:var(--fa-row-hover-text) !important;
}
.tabulator .tabulator-header .tabulator-col:hover .tabulator-col-content,
.tabulator .tabulator-header .tabulator-col.tabulator-sortable:hover .tabulator-col-content{
  background:transparent !important;
  color:inherit !important;
}

/* CONFIRMACAO TEMATICA: substitui confirm() nativo, que ignora o tema. */
.fa-confirm-modal{
  position:fixed;inset:0;z-index:20000;display:none;
  align-items:center;justify-content:center;padding:12px;
  background:rgba(0,0,0,.72);
}
.fa-confirm-modal.open{display:flex}
.fa-confirm-box{
  width:min(420px,100%);overflow:hidden;
  border:1px solid var(--fa-border);border-radius:8px;
  background:var(--fa-panel);color:var(--fa-text);
  box-shadow:0 12px 34px rgba(0,0,0,.38);
}
.fa-confirm-title{
  min-height:34px;display:flex;align-items:center;padding:5px 9px;
  border-bottom:1px solid var(--fa-border);
  background:var(--dashboard-panel-alt);color:var(--fa-text);
  font-size:12px;font-weight:700;
}
.fa-confirm-body{padding:10px;color:var(--fa-text);font-size:11px;line-height:1.55}
.fa-confirm-message{margin-bottom:8px;color:var(--fa-text)}
.fa-confirm-details{
  padding:7px;border:1px solid var(--fa-border);border-radius:6px;
  background:var(--dashboard-panel-alt);color:var(--fa-text);
}
.fa-confirm-actions{
  display:flex;justify-content:flex-end;gap:5px;padding:5px 7px;
  border-top:1px solid var(--fa-border);background:var(--dashboard-panel-alt);
}

/* RELATORIOS: componente unico, compartilhado por todas as paginas HTML.
   A visualizacao herda o tema. Apenas a impressao fisica usa papel branco. */
html[data-theme] .print-modal,body[data-theme] .print-modal{
  position:fixed!important;inset:0!important;z-index:10000!important;
  display:none;padding:18px!important;background:rgba(0,0,0,.72)!important;
}
html[data-theme] .print-modal.open,
body[data-theme] .print-modal.open{
  display:block!important;
}
html[data-theme] .print-box,body[data-theme] .print-box{
  height:100%!important;display:flex!important;flex-direction:column!important;overflow:hidden!important;
  border:1px solid var(--fa-border)!important;border-radius:10px!important;
  background:var(--fa-panel)!important;color:var(--fa-text)!important;
}
html[data-theme] .print-toolbar,body[data-theme] .print-toolbar{
  flex:0 0 auto!important;display:flex!important;align-items:center!important;justify-content:space-between!important;
  padding:10px 14px!important;border-bottom:1px solid var(--fa-border)!important;
  background:var(--fa-panel-2,var(--fa-panel))!important;color:var(--fa-text)!important;
}
html[data-theme] .print-toolbar strong,body[data-theme] .print-toolbar strong{font-size:16px}
html[data-theme] .print-toolbar .right,body[data-theme] .print-toolbar .right{display:flex;gap:8px}
html[data-theme] .print-area,body[data-theme] .print-area{
  flex:1!important;overflow:auto!important;padding:22px!important;
  background:var(--fa-panel)!important;color:var(--fa-text)!important;
}
html[data-theme] .print-area h1,body[data-theme] .print-area h1{font-size:20px;margin:0 0 6px;color:var(--fa-text)}
html[data-theme] .print-area .info,body[data-theme] .print-area .info{line-height:1.5;margin-bottom:12px;color:var(--fa-muted)}
html[data-theme] .print-area table,body[data-theme] .print-area table{width:100%;border-collapse:collapse;margin-top:8px;white-space:normal}
html[data-theme] .print-area th,html[data-theme] .print-area td,
body[data-theme] .print-area th,body[data-theme] .print-area td{
  padding:5px!important;border:1px solid var(--fa-border)!important;
  background:var(--fa-panel)!important;color:var(--fa-text)!important;font-size:11px;
}
html[data-theme] .print-area th,body[data-theme] .print-area th{background:var(--fa-panel-2,var(--fa-panel))!important}
html[data-theme] .print-area .rod,body[data-theme] .print-area .rod{
  margin-top:12px;padding-top:6px;border-top:1px solid var(--fa-border);color:var(--fa-muted);font-size:11px;
}
@media print{
  body *{visibility:hidden!important}
  #printModal,#printModal *{visibility:visible!important}
  #printModal{display:block!important;position:absolute!important;inset:0!important;padding:0!important;background:#fff!important}
  .print-box{height:auto!important;border:0!important;border-radius:0!important;overflow:visible!important;background:#fff!important;color:#111!important}
  .print-toolbar{display:none!important}
  .print-area{overflow:visible!important;padding:10mm!important;background:#fff!important;color:#111!important}
  .print-area h1,.print-area .info,.print-area th,.print-area td,.print-area .rod{background:#fff!important;color:#111!important;border-color:#777!important}
}