/* Estado temporário da sidebar entre navegações */

/* Dashboard */
.dashboard-page:has(
  .dashboard-sidebar.cliovex-sidebar-keep-open
) {
  grid-template-columns: 240px 1fr;
}

/* Lista de clientes */
.clientes-page:has(
  .clientes-sidebar.cliovex-sidebar-keep-open
) {
  grid-template-columns: 240px 1fr;
}

/* Novo / Detalhe / Editar cliente */
.cliente-page:has(
  .clientes-sidebar.cliovex-sidebar-keep-open
) {
  grid-template-columns: 240px 1fr;
}

/* Cobranças */
.cobrancas-page:has(
  .cobrancas-sidebar.cliovex-sidebar-keep-open
) {
  grid-template-columns:
    240px minmax(0, 1fr);
}

/* Configurações */
.config-page:has(
  .config-sidebar.cliovex-sidebar-keep-open
) {
  grid-template-columns: 240px 1fr;
}


/* ============================================================
   CONTEÚDO VISÍVEL ENQUANTO A SIDEBAR ESTIVER FIXADA
   ============================================================ */

.dashboard-sidebar.cliovex-sidebar-keep-open
.dashboard-brand div:last-child,
.clientes-sidebar.cliovex-sidebar-keep-open
.clientes-brand div:last-child {
  opacity: 1;
  transform: translateX(0);
}

.cobrancas-sidebar.cliovex-sidebar-keep-open
.cobrancas-brand > div:last-child {
  opacity: 1;
}

.config-sidebar.cliovex-sidebar-keep-open
.config-brand-text {
  opacity: 1;
  transform: none;
}

.dashboard-sidebar.cliovex-sidebar-keep-open
.dashboard-nav-item,
.clientes-sidebar.cliovex-sidebar-keep-open
.clientes-nav-item,
.config-sidebar.cliovex-sidebar-keep-open
.config-nav-item {
  font-size: 13px;
}

.dashboard-sidebar.cliovex-sidebar-keep-open
.dashboard-sidebar-footer button,
.clientes-sidebar.cliovex-sidebar-keep-open
.clientes-sidebar-footer button {
  font-size: 12px;
}

.dashboard-sidebar.cliovex-sidebar-keep-open
.dashboard-sidebar-footer button::before,
.clientes-sidebar.cliovex-sidebar-keep-open
.clientes-sidebar-footer button::before {
  margin-right: 8px;
}

/* Em Configurações o submenu também deve continuar aparecendo */
.config-sidebar.cliovex-sidebar-keep-open
.config-submenu {
  display: grid;
  gap: 3px;
}


/* ============================================================
   MOBILE
   ============================================================ */

@media (max-width: 760px) {
  .dashboard-page:has(
    .dashboard-sidebar.cliovex-sidebar-keep-open
  ),
  .clientes-page:has(
    .clientes-sidebar.cliovex-sidebar-keep-open
  ),
  .cliente-page:has(
    .clientes-sidebar.cliovex-sidebar-keep-open
  ),
  .cobrancas-page:has(
    .cobrancas-sidebar.cliovex-sidebar-keep-open
  ),
  .config-page:has(
    .config-sidebar.cliovex-sidebar-keep-open
  ) {
    grid-template-columns: 1fr;
  }
}


/* ============================================================
   PADRAO VISUAL UNICO DA SIDEBAR
   Referência: Dashboard
   ============================================================ */

/* Barra lateral */
.dashboard-sidebar,
.clientes-sidebar,
.cobrancas-sidebar,
.config-sidebar {
  box-sizing: border-box !important;
  width: 100% !important;
  min-height: 100vh;
  padding: 25px 18px !important;
  background:
    linear-gradient(
      180deg,
      #063744,
      #052a35
    ) !important;
  color: #dcecef !important;
}

/* Cabeçalho Cliovex */
.dashboard-brand,
.clientes-brand,
.cobrancas-brand,
.config-brand {
  width: 204px !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 3px 9px 27px !important;
  display: flex !important;
  align-items: center !important;
  gap: 11px !important;
  white-space: nowrap;
  box-sizing: border-box;
}

/* Logo C */
.dashboard-brand-icon,
.clientes-brand-icon,
.cobrancas-brand-icon,
.config-brand-icon {
  width: 36px !important;
  height: 36px !important;
  flex: 0 0 36px !important;
  display: grid !important;
  place-items: center !important;
  border-radius: 11px !important;
  background: #78dbe1 !important;
  color: #073540 !important;
  font-size: 16px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
}

/* Texto Cliovex / Financeiro */
.dashboard-brand div:last-child,
.clientes-brand div:last-child,
.cobrancas-brand > div:last-child,
.config-brand-text {
  line-height: 1.05 !important;
}

.dashboard-brand strong,
.clientes-brand strong,
.cobrancas-brand strong,
.config-brand strong {
  color: #fff !important;
  font-size: 17px !important;
  font-weight: 700 !important;
}

.dashboard-brand span,
.clientes-brand span,
.cobrancas-brand span,
.config-brand span {
  margin-top: 3px !important;
  color: #9fc2c9 !important;
  font-size: 12px !important;
}

/* Navegação */
.dashboard-nav,
.clientes-nav,
.cobrancas-nav,
.config-nav {
  width: 204px !important;
  display: grid !important;
  gap: 7px !important;
}

/* Todos os itens principais */
.dashboard-nav-item,
.clientes-nav-item,
.cobrancas-nav-item,
.config-nav-item {
  width: 204px !important;
  min-height: 43px !important;
  box-sizing: border-box !important;
  display: flex !important;
  align-items: center !important;
  gap: 11px !important;
  padding: 12px 13px !important;
  border: 0 !important;
  border-radius: 9px !important;
  background: transparent !important;
  color: #b8d0d5 !important;
  text-align: left !important;
  font-weight: 600 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
}

/* Ícones */
.dashboard-nav-item > span:first-child,
.clientes-nav-item > span:first-child,
.cobrancas-nav-item > span:first-child,
.config-nav-item > span:first-child {
  width: 24px !important;
  flex: 0 0 24px !important;
  display: inline-flex !important;
  justify-content: center !important;
  text-align: center !important;
  font-size: 16px !important;
}

/* Item selecionado */
.dashboard-nav-item.active,
.clientes-nav-item.active,
.cobrancas-nav-item.active,
.config-nav-item.active {
  background:
    rgba(112, 218, 226, .14) !important;
  color: #86e5e9 !important;
}

/* Texto recolhido */
.dashboard-nav-item,
.clientes-nav-item,
.cobrancas-nav-item,
.config-nav-item {
  font-size: 0 !important;
}

/* Texto expandido */
.dashboard-sidebar:hover .dashboard-nav-item,
.dashboard-sidebar:focus-within .dashboard-nav-item,
.dashboard-sidebar.cliovex-sidebar-keep-open
  .dashboard-nav-item,

.clientes-sidebar:hover .clientes-nav-item,
.clientes-sidebar:focus-within .clientes-nav-item,
.clientes-sidebar.cliovex-sidebar-keep-open
  .clientes-nav-item,

.cobrancas-sidebar:hover .cobrancas-nav-item,
.cobrancas-sidebar:focus-within .cobrancas-nav-item,
.cobrancas-sidebar.cliovex-sidebar-keep-open
  .cobrancas-nav-item,

.config-sidebar:hover .config-nav-item,
.config-sidebar:focus-within .config-nav-item,
.config-sidebar.cliovex-sidebar-keep-open
  .config-nav-item {
  font-size: 13px !important;
}

/* Texto da marca recolhido */
.dashboard-brand div:last-child,
.clientes-brand div:last-child,
.cobrancas-brand > div:last-child,
.config-brand-text {
  opacity: 0;
  transform: translateX(-5px);
  transition:
    opacity .18s ease,
    transform .18s ease;
}

/* Texto da marca expandido */
.dashboard-sidebar:hover
  .dashboard-brand div:last-child,
.dashboard-sidebar:focus-within
  .dashboard-brand div:last-child,
.dashboard-sidebar.cliovex-sidebar-keep-open
  .dashboard-brand div:last-child,

.clientes-sidebar:hover
  .clientes-brand div:last-child,
.clientes-sidebar:focus-within
  .clientes-brand div:last-child,
.clientes-sidebar.cliovex-sidebar-keep-open
  .clientes-brand div:last-child,

.cobrancas-sidebar:hover
  .cobrancas-brand > div:last-child,
.cobrancas-sidebar:focus-within
  .cobrancas-brand > div:last-child,
.cobrancas-sidebar.cliovex-sidebar-keep-open
  .cobrancas-brand > div:last-child,

.config-sidebar:hover
  .config-brand-text,
.config-sidebar:focus-within
  .config-brand-text,
.config-sidebar.cliovex-sidebar-keep-open
  .config-brand-text {
  opacity: 1 !important;
  transform: translateX(0) !important;
}

/* Mesmo efeito ao expandir */
.dashboard-sidebar:hover,
.dashboard-sidebar:focus-within,
.dashboard-sidebar.cliovex-sidebar-keep-open,
.clientes-sidebar:hover,
.clientes-sidebar:focus-within,
.clientes-sidebar.cliovex-sidebar-keep-open,
.cobrancas-sidebar:hover,
.cobrancas-sidebar:focus-within,
.cobrancas-sidebar.cliovex-sidebar-keep-open,
.config-sidebar:hover,
.config-sidebar:focus-within,
.config-sidebar.cliovex-sidebar-keep-open {
  box-shadow:
    12px 0 28px
    rgba(3, 35, 44, .18) !important;
}

@media (max-width: 760px) {
  .dashboard-sidebar,
  .clientes-sidebar,
  .cobrancas-sidebar,
  .config-sidebar {
    min-height: auto;
    width: 100% !important;
  }

  .dashboard-brand,
  .clientes-brand,
  .cobrancas-brand,
  .config-brand,
  .dashboard-nav,
  .clientes-nav,
  .cobrancas-nav,
  .config-nav {
    width: 100% !important;
  }

  .dashboard-nav-item,
  .clientes-nav-item,
  .cobrancas-nav-item,
  .config-nav-item {
    width: 100% !important;
    font-size: 13px !important;
  }

  .dashboard-brand div:last-child,
  .clientes-brand div:last-child,
  .cobrancas-brand > div:last-child,
  .config-brand-text {
    opacity: 1 !important;
    transform: none !important;
  }
}


/* ============================================================
   SIDEBAR FINAL - NORMALIZACAO ESTRUTURAL
   ============================================================ */

.dashboard-sidebar,
.clientes-sidebar,
.cobrancas-sidebar,
.config-sidebar {
  display: flex !important;
  flex-direction: column !important;
  position: relative !important;
  z-index: 20 !important;

  min-height: 100vh !important;

  padding: 25px 18px !important;

  overflow: hidden !important;

  background:
    linear-gradient(
      180deg,
      #063744,
      #052a35
    ) !important;

  color: #dcecef !important;

  box-sizing: border-box !important;
}

/* Cabeçalho exatamente igual */
.dashboard-brand,
.clientes-brand,
.cobrancas-brand,
.config-brand {
  width: 204px !important;
  height: auto !important;
  min-height: 0 !important;

  margin: 0 !important;
  padding: 3px 9px 27px !important;

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

  gap: 11px !important;

  box-sizing: border-box !important;
}

/* Logo exatamente igual */
.dashboard-brand-icon,
.clientes-brand-icon,
.cobrancas-brand-icon,
.config-brand-icon {
  width: 36px !important;
  height: 36px !important;

  min-width: 36px !important;
  min-height: 36px !important;

  flex: 0 0 36px !important;

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

  display: grid !important;
  place-items: center !important;

  border-radius: 11px !important;

  background: #78dbe1 !important;
  color: #073540 !important;

  font-size: 16px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
}

/* Cliovex / Financeiro */
.dashboard-brand div:last-child,
.clientes-brand div:last-child,
.cobrancas-brand > div:last-child,
.config-brand-text {
  display: grid !important;
  line-height: 1.05 !important;
}

/* Navegação exatamente na mesma posição */
.dashboard-nav,
.clientes-nav,
.cobrancas-nav,
.config-nav {
  width: 204px !important;

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

  display: grid !important;
  gap: 7px !important;
}

/* Botões exatamente iguais */
.dashboard-nav-item,
.clientes-nav-item,
.cobrancas-nav-item,
.config-nav-item {
  width: 204px !important;
  height: auto !important;
  min-height: 43px !important;

  margin: 0 !important;
  padding: 12px 13px !important;

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

  gap: 11px !important;

  border: 0 !important;
  border-radius: 9px !important;

  box-sizing: border-box !important;
}

/* Ícones exatamente iguais */
.dashboard-nav-item > span:first-child,
.clientes-nav-item > span:first-child,
.cobrancas-nav-item > span:first-child,
.config-nav-item > span:first-child {
  width: 24px !important;
  height: auto !important;

  flex: 0 0 24px !important;

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

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

  font-size: 16px !important;
  line-height: 1 !important;
}

/* Selecionado */
.dashboard-nav-item.active,
.clientes-nav-item.active,
.cobrancas-nav-item.active,
.config-nav-item.active {
  background:
    rgba(112, 218, 226, .14) !important;

  color: #86e5e9 !important;
}

/* Remove diferenças específicas antigas de Cobranças */
.cobrancas-brand {
  margin-bottom: 0 !important;
}

.cobrancas-nav-item {
  font-family: inherit !important;
  cursor: pointer !important;
}