/* ============================================================
   CLIMÁTIKO CENTRAL
   MENU LATERAL — CARTÕES NOS ITENS PRINCIPAIS
============================================================ */

/*
  Este arquivo altera somente o visual.
  Não define largura da sidebar e não interfere no recolhimento.
*/


/* ============================================================
   VARIÁVEIS
============================================================ */

:root{

  --menu-main-height: 48px;
  --menu-main-radius: 10px;

  --menu-selected-bg: #72bee5;
  --menu-selected-bg-hover: #7bc6eb;
  --menu-selected-text: #09264c;

  --menu-hover-bg: rgba(255,255,255,.075);
  --menu-open-bg: rgba(255,255,255,.035);

  --menu-sub-active-bg: rgba(114,190,229,.18);
  --menu-sub-active-line: #72bee5;

}


/* ============================================================
   TÍTULOS DAS SEÇÕES
   GESTÃO / OPERACIONAL
============================================================ */

.sidebar .menu-section-title,
.sidebar .nav-section-title,
.sidebar .sidebar-section-title,
.cc2-section-title{

  margin:
    20px
    14px
    9px !important;

  padding:
    0 !important;

  color:
    rgba(207,225,241,.64) !important;

  font-size:
    10.5px !important;

  font-weight:
    700 !important;

  line-height:
    1.2 !important;

  letter-spacing:
    .9px !important;

  text-transform:
    uppercase !important;

}


/* ============================================================
   MENU PRINCIPAL
   Painel Geral, Cadastros, RH, Itens, Orçamentos...
============================================================ */

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

.cc2-menu-root > .nav-item,

.cc2-menu-root .cc2-group-toggle{

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

  min-height:
    var(--menu-main-height) !important;

  height:
    var(--menu-main-height) !important;

  margin:
    4px
    10px !important;

  padding:
    0
    14px !important;

  display:
    flex !important;

  align-items:
    center !important;

  gap:
    11px !important;

  box-sizing:
    border-box !important;

  border:
    1px solid transparent !important;

  border-radius:
    var(--menu-main-radius) !important;

  background:
    transparent !important;

  color:
    #ffffff !important;

  font-family:
    inherit !important;

  font-size:
    13.5px !important;

  font-weight:
    600 !important;

  line-height:
    1 !important;

  text-decoration:
    none !important;

  white-space:
    nowrap !important;

  cursor:
    pointer !important;

  box-shadow:
    none !important;

  transition:
    background-color .15s ease,
    border-color .15s ease,
    box-shadow .15s ease,
    transform .08s ease !important;

}


/* ============================================================
   ÍCONES DOS ITENS PRINCIPAIS
============================================================ */

.sidebar .nav-item[data-page="dashboard"] > :first-child,

.cc2-menu-root > .nav-item > :first-child,

.cc2-menu-root .cc2-group-toggle > :first-child,

.cc2-menu-root .cc2-group-icon{

  width:
    20px !important;

  min-width:
    20px !important;

  flex:
    0 0 20px !important;

  margin:
    0 !important;

  display:
    inline-flex !important;

  align-items:
    center !important;

  justify-content:
    center !important;

  text-align:
    center !important;

  font-size:
    13px !important;

}


/* ============================================================
   TEXTO DO MENU PRINCIPAL
============================================================ */

.sidebar .nav-item[data-page="dashboard"] > span:not(.cc2-arrow),

.cc2-menu-root > .nav-item > span:not(.cc2-arrow),

.cc2-menu-root .cc2-group-toggle > span:not(.cc2-arrow):not(.cc2-group-icon),

.cc2-menu-root .cc2-group-title{

  min-width:
    0 !important;

  flex:
    1 1 auto !important;

  overflow:
    hidden !important;

  white-space:
    nowrap !important;

  text-overflow:
    ellipsis !important;

}


/* ============================================================
   SETAS DO MENU PRINCIPAL
============================================================ */

.cc2-group-arrow,
.cc2-arrow,

.cc2-menu-root .cc2-group-toggle > :last-child{

  width:
    14px !important;

  min-width:
    14px !important;

  flex:
    0 0 14px !important;

  margin-left:
    auto !important;

  display:
    inline-flex !important;

  align-items:
    center !important;

  justify-content:
    center !important;

  color:
    currentColor !important;

  font-size:
    10px !important;

  opacity:
    .9 !important;

}


/* ============================================================
   HOVER DO MENU PRINCIPAL
============================================================ */

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

.cc2-menu-root > .nav-item:hover,

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

  background:
    var(--menu-hover-bg) !important;

  border-color:
    rgba(255,255,255,.035) !important;

  box-shadow:
    0 2px 6px rgba(4,20,46,.08) !important;

  transform:
    translateX(1px) !important;

}


/* ============================================================
   GRUPO ABERTO, MAS NÃO SELECIONADO
============================================================ */

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

  background:
    var(--menu-open-bg) !important;

  border-color:
    transparent !important;

  color:
    #ffffff !important;

  box-shadow:
    none !important;

}


/* ============================================================
   ITEM PRINCIPAL REALMENTE SELECIONADO
============================================================ */

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

.cc2-menu-root > .nav-item.active,
.cc2-menu-root > .nav-item.selected,
.cc2-menu-root > .nav-item[aria-current="page"],

.cc2-menu-root .cc2-group-toggle.active,
.cc2-menu-root .cc2-group-toggle.selected,
.cc2-menu-root .cc2-group-toggle[aria-current="page"]{

  background:
    linear-gradient(
      180deg,
      #7bc6eb 0%,
      var(--menu-selected-bg) 100%
    ) !important;

  border-color:
    rgba(255,255,255,.18) !important;

  color:
    var(--menu-selected-text) !important;

  font-weight:
    700 !important;

  box-shadow:
    0 3px 9px rgba(3,25,55,.14),
    inset 0 1px 0 rgba(255,255,255,.25) !important;

  transform:
    none !important;

}


/* Hover do item selecionado */

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

.cc2-menu-root > .nav-item.active:hover,
.cc2-menu-root > .nav-item.selected:hover,

.cc2-menu-root .cc2-group-toggle.active:hover,
.cc2-menu-root .cc2-group-toggle.selected:hover{

  background:
    linear-gradient(
      180deg,
      #84cbed 0%,
      var(--menu-selected-bg-hover) 100%
    ) !important;

  color:
    var(--menu-selected-text) !important;

}


/* ============================================================
   SUBMENUS
   Clientes, Fornecedores, Produtos...
============================================================ */

.cc2-submenu > .nav-item,
.cc2-submenu > button.nav-item,
.cadaux-toggle{

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

  min-height:
    36px !important;

  height:
    36px !important;

  margin:
    2px
    12px !important;

  padding:
    0
    12px
    0
    34px !important;

  display:
    flex !important;

  align-items:
    center !important;

  gap:
    8px !important;

  box-sizing:
    border-box !important;

  border:
    0 !important;

  border-radius:
    7px !important;

  background:
    transparent !important;

  color:
    rgba(255,255,255,.91) !important;

  font-family:
    inherit !important;

  font-size:
    11.5px !important;

  font-weight:
    500 !important;

  line-height:
    1 !important;

  white-space:
    nowrap !important;

  cursor:
    pointer !important;

  box-shadow:
    none !important;

  transition:
    background-color .13s ease,
    color .13s ease !important;

}


/* Ícones dos submenus */

.cc2-submenu > .nav-item > :first-child,
.cadaux-toggle > :first-child{

  width:
    16px !important;

  min-width:
    16px !important;

  flex:
    0 0 16px !important;

  display:
    inline-flex !important;

  align-items:
    center !important;

  justify-content:
    center !important;

  margin:
    0 !important;

  font-size:
    10px !important;

}


/* Hover do submenu */

.cc2-submenu > .nav-item:hover,
.cadaux-toggle:hover{

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

  color:
    #ffffff !important;

}


/* Item selecionado no submenu */

.cc2-submenu > .nav-item.active,
.cc2-submenu > .nav-item.selected,
.cc2-submenu > .nav-item[aria-current="page"],

.cadaux-toggle.active,
.cadaux-toggle.selected{

  padding-left:
    31px !important;

  border-left:
    3px solid
    var(--menu-sub-active-line) !important;

  background:
    var(--menu-sub-active-bg) !important;

  color:
    #ffffff !important;

  font-weight:
    600 !important;

}


/* ============================================================
   TERCEIRO NÍVEL
   Tipos de contatos, Tipos de endereços...
============================================================ */

.cadaux-filhos .nav-item{

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

  min-height:
    34px !important;

  height:
    34px !important;

  margin:
    1px
    14px !important;

  padding:
    0
    10px
    0
    43px !important;

  display:
    flex !important;

  align-items:
    center !important;

  gap:
    7px !important;

  box-sizing:
    border-box !important;

  border:
    0 !important;

  border-radius:
    7px !important;

  background:
    transparent !important;

  color:
    rgba(255,255,255,.82) !important;

  font-family:
    inherit !important;

  font-size:
    10.8px !important;

  font-weight:
    500 !important;

  line-height:
    1 !important;

  white-space:
    nowrap !important;

  cursor:
    pointer !important;

  box-shadow:
    none !important;

}


.cadaux-filhos .nav-item:hover{

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

  color:
    #ffffff !important;

}


.cadaux-filhos .nav-item.active,
.cadaux-filhos .nav-item.selected,
.cadaux-filhos .nav-item[aria-current="page"]{

  padding-left:
    40px !important;

  border-left:
    3px solid
    var(--menu-sub-active-line) !important;

  background:
    var(--menu-sub-active-bg) !important;

  color:
    #ffffff !important;

  font-weight:
    600 !important;

}


/* ============================================================
   NÃO ALTERAR O FUNCIONAMENTO DO MENU RECOLHIDO
============================================================ */

.sidebar.collapsed
.cc2-group-toggle,

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

body.sidebar-collapsed
.sidebar
.cc2-group-toggle{

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

  margin:
    3px
    6px !important;

  padding:
    0 !important;

  justify-content:
    center !important;

}


.sidebar.collapsed
.cc2-group-icon,

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

body.sidebar-collapsed
.sidebar
.cc2-group-icon{

  margin:
    0 auto !important;

}


/* ============================================================
   RESPONSIVO
============================================================ */

@media(max-width:1200px){

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

    min-height:
      46px !important;

    height:
      46px !important;

    font-size:
      13px !important;

  }


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

    font-size:
      11.2px !important;

  }

}