/* ============================================================
   CLIMATIKO CENTRAL
   INTERFACE ESTAVEL FINAL
============================================================ */


/* ============================================================
   AUTENTICACAO
   Impede flash de login antes do Firebase responder.
============================================================ */

html.clm-auth-pendente
#loginScreen,

html.clm-auth-pendente
#appShell{

  visibility:hidden !important;

}


/* ============================================================
   TIPOGRAFIA DO CONTEUDO
============================================================ */

body{

  font-family:
    Inter,
    "Segoe UI",
    Arial,
    sans-serif;

}


#pageTitle{

  font-size:20px !important;
  line-height:1.2 !important;
  font-weight:600 !important;

}


#pageSubtitle{

  font-size:10.5px !important;
  line-height:1.35 !important;

}


.page{

  font-size:11.5px;

}


.page h2{

  font-size:16px;
  line-height:1.25;

}


.page h3{

  font-size:12.5px;
  line-height:1.3;

}


.page label{

  font-size:10.5px !important;
  line-height:1.25 !important;

}


.page input,
.page select,
.page textarea{

  font-size:11.5px !important;

}


.page input::placeholder,
.page textarea::placeholder{

  font-size:10.5px !important;

}


.page button:not(.nav-item)
{

  font-size:10.5px;

}


.page table{

  font-size:10.5px;

}


.page table th{

  font-size:10px !important;
  font-weight:600;

}


.page table td{

  font-size:10.5px !important;

}


/* ============================================================
   MENU - ESTRUTURA VISUAL UNICA
============================================================ */

.sidebar .nav-item[data-page="dashboard"],
.cc2-menu-root .cc2-group-toggle,
.cc2-financeiro-wrap > .nav-item{

  width:calc(100% - 16px) !important;

  min-height:40px !important;
  height:40px !important;

  margin:2px 8px !important;

  padding:0 11px !important;

  display:flex !important;
  align-items:center !important;

  gap:9px !important;

  border-radius:6px !important;

  font-size:12px !important;
  font-weight:600 !important;

  line-height:1 !important;

  white-space:nowrap !important;

}


/* ============================================================
   SUBMENUS
============================================================ */

.cc2-submenu > .nav-item,
.cadaux-toggle,
#financeiroSubmenuClimatiko .nav-item{

  width:calc(100% - 16px) !important;

  min-height:34px !important;
  height:34px !important;

  margin:1px 8px !important;

  padding:
    0
    10px
    0
    34px !important;

  display:flex !important;
  align-items:center !important;

  gap:7px !important;

  border-radius:5px !important;

  font-size:11px !important;
  font-weight:500 !important;

  line-height:1 !important;

  white-space:nowrap !important;

}


.cadaux-filhos .nav-item{

  width:calc(100% - 16px) !important;

  min-height:32px !important;
  height:32px !important;

  margin:1px 8px !important;

  padding:
    0
    8px
    0
    44px !important;

  border-radius:5px !important;

  font-size:10.5px !important;
  font-weight:500 !important;

}


/* ============================================================
   TITULOS GESTAO / OPERACIONAL
============================================================ */

.cc2-section-title{

  margin:
    15px
    0
    6px !important;

  padding:
    0
    15px !important;

  font-size:9.5px !important;

  font-weight:700 !important;

  letter-spacing:.8px !important;

  opacity:.72;

}


/* ============================================================
   ITEM SELECIONADO
============================================================ */

.sidebar
.nav-item[data-page="dashboard"].active,

.cc2-menu-root
.cc2-group-toggle.active,

.cc2-submenu
.nav-item.active,

.cadaux-toggle.active,
.cadaux-filhos
.nav-item.active{

  background:
    rgba(
      89,
      174,
      224,
      .22
    ) !important;

  color:#fff !important;

  box-shadow:
    inset
    3px
    0
    0
    #79c7ed !important;

}


/* Grupo aberto sem parecer selecionado */

.cc2-group-toggle[aria-expanded="true"]:not(.active){

  background:
    rgba(
      255,
      255,
      255,
      .045
    ) !important;

  box-shadow:none !important;

}


/* ============================================================
   HOVER
============================================================ */

.sidebar
.nav-item[data-page="dashboard"]:hover,

.cc2-menu-root
.cc2-group-toggle:hover,

.cc2-submenu
.nav-item:hover,

.cadaux-toggle:hover,
.cadaux-filhos
.nav-item:hover{

  background:
    rgba(
      255,
      255,
      255,
      .07
    ) !important;

}


/* ============================================================
   PAINEL GERAL RECOLHIDO
   A CASINHA NAO PODE SUMIR.
============================================================ */

body.sidebar-collapsed
.sidebar
.nav-item[data-page="dashboard"],

.sidebar.cc2-sidebar-container-recolhido
.nav-item[data-page="dashboard"]{

  width:48px !important;

  min-width:48px !important;

  height:42px !important;

  margin:
    4px
    auto !important;

  padding:
    0 !important;

  display:flex !important;

  align-items:center !important;

  justify-content:center !important;

  gap:0 !important;

}


/* Sempre mostra a casinha */

body.sidebar-collapsed
.sidebar
.nav-item[data-page="dashboard"]
.nav-icon,

.sidebar.cc2-sidebar-container-recolhido
.nav-item[data-page="dashboard"]
.nav-icon{

  width:28px !important;
  min-width:28px !important;

  display:inline-flex !important;

  align-items:center !important;
  justify-content:center !important;

  opacity:1 !important;

  visibility:visible !important;

  color:#fff !important;

  font-size:16px !important;

}


/* Esconde somente o texto */

body.sidebar-collapsed
.sidebar
.nav-item[data-page="dashboard"]
.nav-label,

.sidebar.cc2-sidebar-container-recolhido
.nav-item[data-page="dashboard"]
.nav-label{

  display:none !important;

}


/* ============================================================
   MENU RECOLHIDO
============================================================ */

.sidebar.cc2-sidebar-container-recolhido
.cc2-group-toggle{

  width:48px !important;

  min-width:48px !important;

  margin:
    3px
    auto !important;

  padding:
    0 !important;

  justify-content:center !important;

}


.sidebar.cc2-sidebar-container-recolhido
.cc2-group-icon{

  width:24px !important;
  min-width:24px !important;

  margin:0 !important;

  display:inline-flex !important;

  align-items:center !important;
  justify-content:center !important;

}


/* ============================================================
   EVITA TEXTO CORTADO QUANDO ABERTO
============================================================ */

.sidebar:not(.cc2-sidebar-container-recolhido)
.cc2-group-title,

.sidebar:not(.cc2-sidebar-container-recolhido)
.cc2-submenu .nav-item span,

.sidebar:not(.cc2-sidebar-container-recolhido)
.cadaux-toggle span{

  overflow:visible !important;

  text-overflow:clip !important;

  white-space:nowrap !important;

}

/* === CLIMATIKO AJUSTE TOPO E LOGO INICIO === */


/* ============================================================
   FAIXA SUPERIOR DAS PAGINAS
   Mais fina, discreta e compacta
============================================================ */

#pageTitle{

    font-size:15px !important;
    line-height:1.1 !important;

    font-weight:600 !important;

    margin:0 !important;
    padding:0 !important;

}


#pageSubtitle{

    font-size:9px !important;
    line-height:1.15 !important;

    margin:1px 0 0 0 !important;
    padding:0 !important;

    opacity:.68 !important;

}


/*
   Container imediato do titulo
*/

*:has(> #pageTitle){

    margin-top:0 !important;
    margin-bottom:0 !important;

}


/*
   Faixa/cabecalho principal.

   Os seletores diferentes permitem aplicar
   a mesma regra nas paginas antigas e novas.
*/

:is(
    .topbar,
    .top-bar,
    .page-header,
    .content-header,
    .main-header,
    .app-header,
    .header-bar
):has(#pageTitle){

    min-height:42px !important;
    height:auto !important;

    padding-top:4px !important;
    padding-bottom:4px !important;

}


/* ============================================================
   LOGO COM MENU RECOLHIDO
============================================================ */

/*
   O recipiente do logo nao deve cortar a imagem.
*/

body.sidebar-collapsed
.sidebar
:is(
    .logo,
    .brand,
    .sidebar-logo,
    .sidebar-brand,
    .brand-logo
),

.sidebar.cc2-sidebar-container-recolhido
:is(
    .logo,
    .brand,
    .sidebar-logo,
    .sidebar-brand,
    .brand-logo
){

    overflow:visible !important;

    display:flex !important;
    align-items:center !important;
    justify-content:center !important;

}


/*
   Mantem o logo inteiro dentro da largura
   disponivel quando a sidebar estiver fechada.
*/

body.sidebar-collapsed
.sidebar
img:is(
    [src*="logo" i],
    [alt*="clim" i]
),

.sidebar.cc2-sidebar-container-recolhido
img:is(
    [src*="logo" i],
    [alt*="clim" i]
),

body.sidebar-collapsed
.sidebar
.logo img,

.sidebar.cc2-sidebar-container-recolhido
.logo img,

body.sidebar-collapsed
.sidebar
.sidebar-logo img,

.sidebar.cc2-sidebar-container-recolhido
.sidebar-logo img{

    width:auto !important;

    max-width:44px !important;

    height:auto !important;
    max-height:34px !important;

    object-fit:contain !important;

    transform:none !important;

    margin-left:auto !important;
    margin-right:auto !important;

    opacity:1 !important;
    visibility:visible !important;

}


/* Evita que a area superior corte o logo */

body.sidebar-collapsed
.sidebar > :first-child,

.sidebar.cc2-sidebar-container-recolhido
> :first-child{

    overflow:visible !important;

}


/* === CLIMATIKO AJUSTE TOPO E LOGO FIM === */