/* ==========================================================================
   TEMA ESCURO GLOBAL do JamSac-Web  (files\dark\dark.css)

   Escurece TODAS as telas nativas (cadastros, movimentos, PDV, modais...)
   sem tocar no codigo de nenhuma delas: tudo aqui e override das classes do
   ExtJS/crisp, valendo apenas sob body[data-jstema="escuro"] -- o atributo
   que o alternador de tema da home ja aplica (files\home\home.js).

   NAO tem nenhuma regra fora do seletor escuro: com o tema claro ativo este
   arquivo e inerte. Para desativar o recurso, basta remover o arquivo do
   CustomFiles do ServerModule.

   Paleta (mesma do menu/home/dashboard):
     fundo pagina  #0e1116..#14161c      superficie  #171b23
     campo         #10141a               borda       #262c38 / #333b49
     texto         #e8ecf3               apagado     #9aa5b5
     marca         #79b332 / #8cc63f
   ========================================================================== */

/* ------------------------------------------------------------ superficies -- */
body[data-jstema="escuro"],
body[data-jstema="escuro"] .x-body,
body[data-jstema="escuro"] .x-viewport{
  background:#0e1116 !important;
}
body[data-jstema="escuro"] .x-panel-body,
body[data-jstema="escuro"] .x-window-body,
body[data-jstema="escuro"] .x-container,
body[data-jstema="escuro"] .x-tabpanel-child,
body[data-jstema="escuro"] .x-autocontainer-outerCt,
body[data-jstema="escuro"] .x-fieldset,
body[data-jstema="escuro"] .x-toolbar{
  background:#14161c !important;
  border-color:#262c38 !important;
  color:#e8ecf3;
}
body[data-jstema="escuro"] .x-panel-default,
body[data-jstema="escuro"] .x-window-default{
  border-color:#262c38 !important;
}
body[data-jstema="escuro"] .x-fieldset-header-text,
body[data-jstema="escuro"] .x-form-item-label,
body[data-jstema="escuro"] .x-form-cb-label{
  color:#c3cad6 !important;
}

/* cabecalhos de janelas e paineis */
body[data-jstema="escuro"] .x-window-header,
body[data-jstema="escuro"] .x-panel-header{
  background:linear-gradient(180deg, #1b2029 0%, #171b23 100%) !important;
  border-color:#262c38 !important;
}
body[data-jstema="escuro"] .x-window-header-title .x-title-text,
body[data-jstema="escuro"] .x-panel-header-title .x-title-text{
  color:#e8ecf3 !important;
}
body[data-jstema="escuro"] .x-tool-img{ filter:invert(.8); }

/* ------------------------------------------------------ textos "presos" ----
   Muitos DFMs fixam preto no Font.Color, que vira estilo inline. Aqui so os
   PRETOS/quase pretos sao virados para claro -- cores semanticas (vermelho de
   atraso, verde de pago, azul de link) ficam como estao. */
body[data-jstema="escuro"] .x-form-display-field[style*="rgb(0, 0, 0)"],
body[data-jstema="escuro"] .x-form-display-field[style*="#000"],
body[data-jstema="escuro"] label[style*="rgb(0, 0, 0)"],
body[data-jstema="escuro"] label[style*="#000"],
body[data-jstema="escuro"] span[style*="color: rgb(0, 0, 0)"],
body[data-jstema="escuro"] div[style*="color: rgb(0, 0, 0)"],
body[data-jstema="escuro"] span[style*="color:#000"],
body[data-jstema="escuro"] div[style*="color:#000"],
body[data-jstema="escuro"] span[style*="color: black"],
body[data-jstema="escuro"] div[style*="color: black"],
body[data-jstema="escuro"] span[style*="rgb(64, 64, 64)"],
body[data-jstema="escuro"] div[style*="rgb(64, 64, 64)"]{
  color:#e8ecf3 !important;
}
body[data-jstema="escuro"] .x-form-display-field{ color:#e8ecf3; }

/* ------------------------------------------------------------- campos ------ */
body[data-jstema="escuro"] .x-form-text,
body[data-jstema="escuro"] textarea.x-form-field,
body[data-jstema="escuro"] .x-form-textarea{
  background:#10141a !important;
  color:#e8ecf3 !important;
  border-color:#333b49 !important;
}
body[data-jstema="escuro"] .x-form-text::placeholder{ color:#5f6877; }
body[data-jstema="escuro"] .x-form-trigger,
body[data-jstema="escuro"] .x-form-trigger-default{
  background:#10141a !important;
  border-color:#333b49 !important;
  color:#9aa5b5 !important;
}
body[data-jstema="escuro"] .x-form-focus .x-form-text,
body[data-jstema="escuro"] .x-form-text:focus{
  border-color:#79b332 !important;
  box-shadow:0 0 0 2px rgba(140,198,63,.25) !important;
}
body[data-jstema="escuro"] .x-form-invalid-field{
  background:#131a26 !important;
  border-color:#4c6f22 !important;
}
/* campo somente leitura / desabilitado */
body[data-jstema="escuro"] .x-form-text[readonly],
body[data-jstema="escuro"] .x-item-disabled .x-form-text{
  background:#151a22 !important;
  color:#8b95a6 !important;
}

/* lista suspensa dos combos (renderiza no body, fora do form) */
body[data-jstema="escuro"] .x-boundlist{
  background:#171b23 !important;
  border-color:#333b49 !important;
}
body[data-jstema="escuro"] .x-boundlist-item{
  color:#e8ecf3 !important;
}
body[data-jstema="escuro"] .x-boundlist-item-over{
  background:rgba(140,198,63,.22) !important;
  color:#fff !important;
}
body[data-jstema="escuro"] .x-boundlist-selected{
  background:rgba(140,198,63,.35) !important;
  color:#fff !important;
}

/* calendario */
body[data-jstema="escuro"] .x-datepicker,
body[data-jstema="escuro"] .x-datepicker-header,
body[data-jstema="escuro"] .x-datepicker-footer,
body[data-jstema="escuro"] .x-monthpicker,
body[data-jstema="escuro"] .x-monthpicker-body{
  background:#171b23 !important;
  border-color:#333b49 !important;
}
body[data-jstema="escuro"] .x-datepicker-cell,
body[data-jstema="escuro"] .x-datepicker-date,
body[data-jstema="escuro"] .x-monthpicker-item a{
  background:#171b23 !important;
  color:#e8ecf3 !important;
}
body[data-jstema="escuro"] .x-datepicker-column-header{
  background:#10141a !important; color:#9aa5b5 !important;
}
body[data-jstema="escuro"] .x-datepicker-selected .x-datepicker-date,
body[data-jstema="escuro"] .x-monthpicker-selected a{
  background:#79b332 !important; color:#fff !important;
}
body[data-jstema="escuro"] .x-datepicker-today .x-datepicker-date{
  border-color:#8cc63f !important;
}
body[data-jstema="escuro"] .x-datepicker-prevday .x-datepicker-date,
body[data-jstema="escuro"] .x-datepicker-nextday .x-datepicker-date{
  color:#5f6877 !important;
}

/* ------------------------------------------------------------- grades ------ */
body[data-jstema="escuro"] .x-grid-view,
body[data-jstema="escuro"] .x-grid-body,
body[data-jstema="escuro"] .x-panel-body-default.x-grid-body{
  background:#14161c !important;
  border-color:#262c38 !important;
}
body[data-jstema="escuro"] .x-grid-item{
  background:#171b23 !important;
  color:#cfd6e2 !important;
}
body[data-jstema="escuro"] .x-grid-item-alt{ background:#141821 !important; }
body[data-jstema="escuro"] .x-grid-cell{ border-color:#232936 !important; }
body[data-jstema="escuro"] .x-grid-item-over{ background:#141d33 !important; }
body[data-jstema="escuro"] .x-grid-item-selected{
  background:rgba(140,198,63,.30) !important;
  color:#fff !important;
}
body[data-jstema="escuro"] .x-column-header{
  background:#10141a !important;
  border-color:#262c38 !important;
}
body[data-jstema="escuro"] .x-column-header-text{ color:#9aa5b5 !important; }
body[data-jstema="escuro"] .x-column-header-over,
body[data-jstema="escuro"] .x-column-header-sort-ASC,
body[data-jstema="escuro"] .x-column-header-sort-DESC{
  background:#1b2029 !important;
}
body[data-jstema="escuro"] .x-grid-empty{
  background:#14161c !important; color:#8b95a6 !important;
}
/* celulas com cor inline preta (regras de destaque das telas) */
body[data-jstema="escuro"] .x-grid-cell-inner[style*="rgb(0, 0, 0)"]{
  color:#e8ecf3 !important;
}

/* paginador / barra inferior das grades */
body[data-jstema="escuro"] .x-toolbar-footer{
  background:#10141a !important; border-color:#262c38 !important;
}
body[data-jstema="escuro"] .x-tbar-page-number{ background:#10141a !important; }

/* --------------------------------------------------------------- botoes ---- */
/* so os botoes NEUTROS do tema; os UniSF* coloridos (bs_danger, bs_success...)
   mantem as proprias cores, que funcionam no escuro */
body[data-jstema="escuro"] .x-btn-default-small,
body[data-jstema="escuro"] .x-btn-default-medium,
body[data-jstema="escuro"] .x-btn-default-large,
body[data-jstema="escuro"] .x-btn-default-toolbar-small{
  background:#232a35 !important;
  border-color:#333b49 !important;
}
body[data-jstema="escuro"] .x-btn-default-small .x-btn-inner,
body[data-jstema="escuro"] .x-btn-default-medium .x-btn-inner,
body[data-jstema="escuro"] .x-btn-default-large .x-btn-inner,
body[data-jstema="escuro"] .x-btn-default-toolbar-small .x-btn-inner{
  color:#e8ecf3 !important;
}
body[data-jstema="escuro"] .x-btn-over.x-btn-default-small,
body[data-jstema="escuro"] .x-btn-over.x-btn-default-medium,
body[data-jstema="escuro"] .x-btn-over.x-btn-default-large{
  background:#2c3542 !important;
}

/* ----------------------------------------------------------------- abas ---- */
body[data-jstema="escuro"] .x-tab-bar,
body[data-jstema="escuro"] .x-tab-bar-body{
  background:#10141a !important; border-color:#262c38 !important;
}
body[data-jstema="escuro"] .x-tab{
  background:#171b23 !important; border-color:#262c38 !important;
}
body[data-jstema="escuro"] .x-tab .x-tab-inner{ color:#9aa5b5 !important; }
body[data-jstema="escuro"] .x-tab-active{
  background:#79b332 !important; border-color:#79b332 !important;
}
body[data-jstema="escuro"] .x-tab-active .x-tab-inner{ color:#fff !important; }

/* ---------------------------------------------------------------- menus ---- */
body[data-jstema="escuro"] .x-menu,
body[data-jstema="escuro"] .x-menu-body{
  background:#171b23 !important; border-color:#333b49 !important;
}
body[data-jstema="escuro"] .x-menu-item-text{ color:#e8ecf3 !important; }
body[data-jstema="escuro"] .x-menu-item-active{
  background:rgba(140,198,63,.25) !important;
}

/* --------------------------------------------------------- dicas e mascara -- */
body[data-jstema="escuro"] .x-tip,
body[data-jstema="escuro"] .x-tip-body{
  background:#1b2029 !important; border-color:#3a4352 !important;
}
body[data-jstema="escuro"] .x-tip-body,
body[data-jstema="escuro"] .x-tip-header-text{ color:#e8ecf3 !important; }
body[data-jstema="escuro"] .x-mask{ background:rgba(0,0,0,.55) !important; }
body[data-jstema="escuro"] .x-mask-msg,
body[data-jstema="escuro"] .x-mask-msg-text{
  background:#1b2029 !important; border-color:#3a4352 !important;
  color:#e8ecf3 !important;
}

/* ------------------------------------------------------------ SweetAlert2 -- */
body[data-jstema="escuro"] .swal2-popup{
  background:#171b23 !important;
  color:#e8ecf3 !important;
}
body[data-jstema="escuro"] .swal2-title{ color:#e8ecf3 !important; }
body[data-jstema="escuro"] .swal2-content,
body[data-jstema="escuro"] .swal2-html-container{ color:#c3cad6 !important; }
body[data-jstema="escuro"] .swal2-footer{ border-color:#262c38 !important; }

/* toasts (iGrowl) */
body[data-jstema="escuro"] .igrowl{
  background:#1b2029 !important; color:#e8ecf3 !important;
  border:1px solid #3a4352 !important;
}

/* ------------------------------------------------------------- barra rolagem */
body[data-jstema="escuro"] ::-webkit-scrollbar{ width:10px; height:10px; }
body[data-jstema="escuro"] ::-webkit-scrollbar-track{ background:#10141a; }
body[data-jstema="escuro"] ::-webkit-scrollbar-thumb{
  background:#333b49; border-radius:8px; border:2px solid #10141a;
}
body[data-jstema="escuro"] ::-webkit-scrollbar-thumb:hover{ background:#79b332; }

/* ------------------------------------------------------------- divisores ---- */
body[data-jstema="escuro"] .x-splitter{ background:#10141a !important; }

/* ---------------------------------------------------------------- excecoes --
   Areas que ja cuidam do proprio tema escuro e nao devem ser repintadas:
   home (.jsh-root), menu lateral (.jm) e cartoes/graficos do dashboard
   (dash.css). As regras abaixo devolvem o controle a eles. */
body[data-jstema="escuro"] .jm .x-panel-body,
body[data-jstema="escuro"] .jsh-root .x-panel-body{ background:transparent !important; }