/* ============================================================================
   TEMA AZUL PISCINA - CajueiroPark ERP
   Carregado via ServerModule.CustomFiles - edite e de F5 (nao precisa recompilar)
   Classes aplicadas nos componentes via LayoutConfig.Cls (Object Inspector):
     cj-menu       -> ContainerPanelLeft (coluna do menu, gradiente azul)
     cj-menu-topo  -> pnlTopLeft (faixa superior do menu, mais escura)
     cj-transp     -> paineis do menu que ficam transparentes sobre o gradiente
     cj-busca      -> pnlSeachmenu (caixa de pesquisa do menu)
     cj-topo       -> pnlTopo (barra superior, gradiente azul)
     cj-atalhos    -> pnlAtalhos (fundo aquatico + tiles de vidro)
     cj-login-card -> plnLogin (cartao do login)
   Funcoes JS de apoio: files/CajueiroTema/tema-azul-piscina.js
   Paleta: #01579b #0277bd #0288d1 #039be5 #4fc3f7 #4dd0e1 #26c6da #b2ebf2 #e0f7fa
   ========================================================================== */

/* ===================== 1. MENU LATERAL ===================== */
.cj-menu { background: linear-gradient(180deg, #041a47, #0a3d91) !important; }
.cj-menu-topo { background: rgba(0, 0, 0, .25) !important; }
.cj-menu-topo .x-panel-bodyWrap, .cj-menu-topo .x-panel-body { background: transparent !important; }
.cj-transp, .cj-transp .x-panel-bodyWrap, .cj-transp .x-panel-body, .cj-transp .x-autocontainer-innerCt,
.cj-busca, .cj-busca .x-panel-bodyWrap, .cj-busca .x-panel-body { background: transparent !important; }

/* circulo do logo da empresa: fundo branco (a logo carregada e quadrada) e
   recorte redondo da imagem; precisa vir DEPOIS das regras cj-transp acima */
.cj-logo-circulo, .cj-logo-circulo .x-panel-bodyWrap, .cj-logo-circulo .x-panel-body { background: #ffffff !important; }
.cj-logo-circulo { border-radius: 50% !important; overflow: hidden; }
.cj-logo-circulo img { border-radius: 50%; object-fit: contain; }

/* menu em arvore (TreeMenu) sobre o gradiente */
.x-treelist, .x-treelist-nav { background: transparent !important; }
.x-treelist-item-text { color: #e3f2fd !important; }
.x-treelist-item-icon, .x-treelist-item-expander, .x-treelist-item-tool { color: #9fc6ff !important; }
.x-treelist-row { transition: background .15s; }
.x-treelist-item-over > .x-treelist-row { background: rgba(255,255,255,.10) !important; border-radius: 8px; }
.x-treelist-item-selected > .x-treelist-row { background: rgba(255,255,255,.18) !important; border-radius: 8px; }

/* caixa de pesquisa do menu: vidro translucido sobre o navy, foco aqua.
   No tema crisp quem desenha a borda e o WRAPPER (x-form-trigger-wrap),
   nao o input - por isso o arredondado e o fundo ficam nele */
.cj-busca .panelarredondado10 { background: transparent !important; border: none !important; }
.cj-busca .x-form-item-body,
.cj-busca .x-form-field { background: transparent !important; border: 0 !important; }
.cj-busca .x-form-trigger-wrap,
.cj-busca .x-form-trigger-wrap-default {
  border: 0 !important;
  box-shadow: none !important;
  border-radius: 18px !important;
  background: rgba(255,255,255,.16) !important;
  overflow: hidden;
  transition: background .2s, box-shadow .2s;
}
.cj-busca .x-form-text,
.cj-busca .x-form-text-default {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  color: #ffffff !important;
  padding-left: 14px !important;
}
.cj-busca .x-form-text::placeholder { color: #b7d3f3 !important; }
.cj-busca .x-form-trigger-wrap:focus-within {
  background: rgba(255,255,255,.26) !important;
  box-shadow: 0 0 0 3px rgba(77,208,225,.40) !important;
}
.cj-busca .x-form-trigger,
.cj-busca .x-form-trigger-default {
  border: 0 !important;
  background-color: transparent !important;
  filter: brightness(2.4);
}

/* botao de opcoes do usuario (avatar, unica imagem dentro do cj-topo):
   redondo com anel e brilho no hover */
.cj-topo img {
  border-radius: 50% !important;
  box-sizing: border-box;
  border: 2px solid rgba(255,255,255,.55);
  box-shadow: 0 2px 8px rgba(0,0,0,.25);
  transition: transform .15s ease, box-shadow .2s, border-color .2s;
}
.cj-topo img:hover {
  transform: scale(1.12);
  border-color: #4dd0e1;
  box-shadow: 0 4px 14px rgba(38,198,218,.5);
}

/* mascote no rodape do menu (acima do SAIR): flutua sempre e danca no hover */
.cj-mascote-menu {
  padding: 4px 0; cursor: pointer;
  filter: drop-shadow(0 8px 12px rgba(0,0,0,.4));
  animation: cjFlut 3.4s ease-in-out infinite;
}
/* nao esticar: o uniGUI poe o <img> interno em 100%x100%; object-fit contain
   mantem a proporcao do mascote centralizado (vale para el img ou wrapper) */
.cj-mascote-menu img, img.cj-mascote-menu {
  object-fit: contain !important;
  width: 100% !important; height: 100% !important;
}
.cj-mascote-menu:hover { animation: cjMascoteFesta .7s ease-in-out infinite; }
@keyframes cjMascoteFesta {
  0%, 100% { transform: translateY(0) rotate(0deg) scale(1); }
  25%      { transform: translateY(-12px) rotate(-9deg) scale(1.07); }
  50%      { transform: translateY(-2px) rotate(0deg) scale(1.12); }
  75%      { transform: translateY(-12px) rotate(9deg) scale(1.07); }
}

/* ===================== 2. BARRA SUPERIOR ===================== */
.cj-topo { background: linear-gradient(90deg, #041a47, #0d47a1) !important; }
.cj-topo .x-panel-bodyWrap, .cj-topo .x-panel-body { background: transparent !important; }

/* ===================== 3. AREA DIREITA (cenario aquatico do login) ===================== */
/* classe cj-fundo-agua no ContainerPanelRigth; o div #cjFundoDireita e criado
   pelo JS (cjMontarFundoDireita) com blobs, ondas e bolhas iguais aos do login.
   Estrutura do TUniPanel: el > x-panel-bodyWrap > x-panel-body - o wrap e o
   body proprios do painel precisam ficar transparentes para o cenario aparecer */
.cj-fundo-agua > .x-panel-bodyWrap,
.cj-fundo-agua > .x-panel-bodyWrap > .x-panel-body { background: transparent !important; }
.cj-atalhos, .cj-atalhos .x-panel-bodyWrap, .cj-atalhos .x-panel-body { background: transparent !important; }

#cjFundoDireita {
  position: absolute; left: 0; top: 0; right: 0; bottom: 0; z-index: 0;
  overflow: hidden; pointer-events: none;
  background: linear-gradient(160deg, #01579b 0%, #0288d1 45%, #26c6da 100%);
  background-size: 200% 200%; animation: cjGrad 14s ease infinite;
}

/* tiles de atalho em "vidro" com flutuacao no hover */
.cj-atalhos .x-panel {
  background: rgba(255,255,255,.16) !important;
  border: 1px solid rgba(255,255,255,.28) !important;
  border-radius: 16px !important;
  box-shadow: 0 8px 22px rgba(1,40,80,.25);
  transition: transform .18s ease, background .25s, box-shadow .25s;
  overflow: hidden;
}
.cj-atalhos .x-panel .x-panel-body { background: transparent !important; }
.cj-atalhos .x-panel:hover {
  transform: translateY(-5px) scale(1.03);
  background: rgba(255,255,255,.28) !important;
  box-shadow: 0 16px 34px rgba(1,40,80,.40);
}

/* ===================== 4. JANELAS INTERNAS ===================== */
.x-window { border-radius: 14px !important; animation: cjWin .28s ease both; }
@keyframes cjWin { from { opacity: 0; transform: translateY(14px) scale(.985); } to { opacity: 1; transform: none; } }
.x-window-header-default {
  background: linear-gradient(90deg, #01579b, #0288d1) !important;
  border-color: #01579b !important;
  border-radius: 14px 14px 0 0 !important;
}
.x-window-header-default .x-title-text { color: #ffffff !important; font-weight: 600; }
.x-window-body-default { border-color: #b3e5fc !important; }

/* cabecalhos de paineis internos */
.x-panel-header-default {
  background: linear-gradient(90deg, #0277bd, #039be5) !important;
  border-color: #0277bd !important;
}
.x-panel-header-default .x-title-text { color: #ffffff !important; }
.x-panel-header { transition: background .2s; }

/* ===================== 5. ABAS (PageControl) ===================== */
.x-tab-bar-default { background: linear-gradient(90deg, #01579b, #0288d1) !important; }
.x-tab-default { background: rgba(255,255,255,.14) !important; border-radius: 8px 8px 0 0 !important; }
.x-tab-default .x-tab-inner-default { color: #e1f5fe !important; }
.x-tab-default.x-tab-active { background: #ffffff !important; }
.x-tab-default.x-tab-active .x-tab-inner-default { color: #01579b !important; font-weight: 700; }

/* ===================== 6. GRIDS ===================== */
.x-column-header { background: linear-gradient(180deg, #0288d1, #0277bd) !important; border-color: #0277bd !important; }
.x-column-header-inner .x-column-header-text-inner { color: #ffffff !important; font-weight: 600; }
.x-column-header-trigger { background-color: #0277bd !important; }
.x-grid-row-over .x-grid-cell, .x-grid-item-over .x-grid-cell { background: #e0f7fa !important; }
.x-grid-row-selected .x-grid-cell, .x-grid-item-selected .x-grid-cell { background: #b2ebf2 !important; }
.x-grid-cell { border-color: #e1f5fe; }

/* ===================== 7. BOTOES (somente aparencia padrao) ===================== */
.x-btn { transition: transform .12s ease, box-shadow .2s ease; }
.x-btn:hover { transform: translateY(-1px); box-shadow: 0 4px 10px rgba(1,87,155,.30); }
.x-btn-default-small, .x-btn-default-medium, .x-btn-default-large { border-radius: 9px; }

/* ===================== 8. CAMPOS E FORMULARIOS ===================== */
.x-form-text { border-radius: 8px !important; transition: border-color .2s, box-shadow .2s; }
.x-form-text:focus { border-color: #0288d1 !important; box-shadow: 0 0 0 3px rgba(2,136,209,.15) !important; }
.x-form-item-label-text { color: #01579b; font-weight: 600; }
.x-fieldset { border-color: #b3e5fc !important; border-radius: 10px; }
.x-fieldset-header-text { color: #01579b; font-weight: 700; }

/* lista suspensa dos combos */
.x-boundlist { border-radius: 10px !important; border-color: #4fc3f7 !important; }
.x-boundlist-item-over { background: #e0f7fa !important; }
.x-boundlist-selected { background: #b2ebf2 !important; }

/* menus popup (ex.: opcoes do usuario no topo) */
.x-menu {
  border-radius: 12px !important;
  border: 1px solid #b3e5fc !important;
  box-shadow: 0 14px 38px rgba(1, 40, 80, .35) !important;
  overflow: hidden;
}
.x-menu-body { background: #ffffff !important; padding: 6px !important; }
.x-menu-item { border-radius: 8px; transition: background .15s; }
.x-menu-item-text { color: #0d3c61; font-weight: 500; }
.x-menu-item-active { background: #e0f7fa !important; border-color: #e0f7fa !important; }
.x-menu-item-active .x-menu-item-text { color: #01579b !important; }
.x-menu .x-fa4 { color: #0288d1 !important; width: 20px; text-align: center; }
.x-menu-item-active .x-fa4 { color: #01579b !important; }
.x-menu-sep { border-color: #e1f5fe !important; margin: 4px 8px; }

/* mascara de "aguarde" */
.x-mask { background: rgba(1, 87, 155, .35) !important; }

/* barras de rolagem */
::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-thumb { background: #7fb3d9; border-radius: 8px; }
::-webkit-scrollbar-thumb:hover { background: #4f93c9; }
::-webkit-scrollbar-track { background: #e0f0fa; }

/* ===================== 9. TELA DE LOGIN ===================== */
/* a classe cj-tela-login e adicionada ao <body> pelo JS somente no login */
body.cj-tela-login, body.cj-tela-login.x-body { background: transparent !important; }
html:has(body.cj-tela-login) { background: #0288d1; }

@keyframes cjGrad { 0% {background-position:0% 0%} 50% {background-position:100% 100%} 100% {background-position:0% 0%} }
@keyframes cjFl1 { 0%,100% { transform: translate(0,0); } 50% { transform: translate(90px,60px); } }
@keyframes cjFl2 { 0%,100% { transform: translate(0,0); } 50% { transform: translate(-70px,-80px); } }
@keyframes cjSobe { to { transform: translateY(-110vh) translateX(40px); opacity: 0; } }
@keyframes cjOnda { to { transform: translateX(-50%); } }
@keyframes cjEntra { from { opacity: 0; transform: translateY(26px) scale(.94); } to { opacity: 1; transform: none; } }
@keyframes cjFlut { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }

#cjFundo {
  position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 0;
  pointer-events: none; overflow: hidden;
  background: linear-gradient(160deg, #01579b 0%, #0288d1 45%, #26c6da 100%);
  background-size: 200% 200%; animation: cjGrad 14s ease infinite;
}
.cjBlob { position: absolute; border-radius: 50%; filter: blur(70px); opacity: .5; }
.cjBolha {
  position: absolute; bottom: -60px; border-radius: 50%;
  background: radial-gradient(circle at 32% 30%, rgba(255,255,255,.85), rgba(255,255,255,.12) 60%);
  animation: cjSobe linear infinite;
}
.cjOndas { position: absolute; bottom: 0; left: 0; width: 200%; height: 150px; display: flex; }
.cjOndas svg { width: 50%; height: 100%; flex-shrink: 0; }

/* cartao do login */
.cj-login-card {
  border-radius: 22px !important;
  box-shadow: 0 24px 70px rgba(1,40,80,.45) !important;
  animation: cjEntra .7s cubic-bezier(.2,.9,.3,1.2) both;
}
#cjHead {
  position: absolute; top: 8px; left: 0; right: 0; text-align: center;
  pointer-events: none; z-index: 9;
}
#cjHead img {
  width: 104px; margin-top: -4px;
  filter: drop-shadow(0 8px 14px rgba(0,0,0,.3));
  animation: cjFlut 3.4s ease-in-out infinite;
}
#cjHead .cjTitulo {
  font-size: 23px; font-weight: 800; color: #0d47a1; letter-spacing: 1px;
  font-family: 'Segoe UI', Arial, sans-serif;
}
#cjHead .cjTitulo span { color: #26a5da; }

/* botao ENTRAR em azul escuro (classe cj-btn-entrar via LayoutConfig.Cls) */
.cj-btn-entrar, .cj-btn-entrar.x-btn,
.cj-btn-entrar .x-btn-mc { background: linear-gradient(180deg, #0d47a1, #041a47) !important; border-color: #041a47 !important; }
.cj-btn-entrar.x-btn:hover { background: linear-gradient(180deg, #1565c0, #06225c) !important; }
.cj-btn-entrar .x-btn-inner { color: #ffffff !important; font-weight: 700; letter-spacing: .5px; }