@charset "UTF-8";
/* ============================================================================
   Shell da aplicação (navbar + sidebar + footer do AdminLTE 4)
   Camada de refinamento visual sobre o adminlte.css, alinhada ao
   identidade-ceara.css. Não redefine a estrutura do AdminLTE (as classes e os
   data-lte-toggle continuam intactos — o JS do AdminLTE depende deles); só
   trabalha aparência: superfícies, raios, sombras, densidade e a cromática da
   marca. Sem cor hardcoded: tudo vem dos tokens ce-*, então acompanha o
   modo claro/escuro automaticamente. Carregar DEPOIS do identidade-ceara.css.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Navbar (app-header)
   -------------------------------------------------------------------------- */
.app-header.navbar {
  box-shadow: 0 1px 3px rgba(0, 0, 0, .06);
  padding-block: .25rem;
}
[data-bs-theme="dark"] .app-header.navbar {
  box-shadow: 0 1px 3px rgba(0, 0, 0, .35);
}

/* Ações de ícone (toggle da sidebar, tema, fullscreen) viram botões
   circulares com hover suave no verde de realce da marca. Escopo restrito
   aos toggles/ícones — o link "Página inicial" e o menu do usuário ficam de
   fora de propósito. */
.app-header .navbar-nav .nav-link[data-lte-toggle],
.app-header .navbar-nav #theme-toggle {
  width: 42px;
  height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  color: var(--ce-texto-suave);
  transition: background-color .15s ease, color .15s ease;
}
.app-header .navbar-nav .nav-link[data-lte-toggle]:hover,
.app-header .navbar-nav #theme-toggle:hover {
  background: rgba(var(--ce-realce-rgb), .12);
  color: var(--ce-primary);
}
.app-header .navbar-nav .nav-link i {
  font-size: 1.1rem;
}

/* Menu do usuário: vira uma "pílula" com avatar + nome */
.app-header .user-menu > .nav-link {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  border-radius: 999px;
  padding: .3rem .85rem .3rem .3rem;
  transition: background-color .15s ease;
}
.app-header .user-menu > .nav-link:hover {
  background: rgba(var(--ce-realce-rgb), .12);
}
.app-header .user-menu .user-image {
  width: 34px;
  height: 34px;
  margin: 0;
}

/* Dropdowns mais leves e elevados */
.app-header .dropdown-menu {
  border: 0;
  border-radius: 14px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, .16);
  overflow: hidden;
  padding: 0;
}

/* Cabeçalho do menu do usuário: verde institucional + assinatura do grafismo.
   Substitui o gradiente inline hardcoded que havia no template. */
.app-header .user-menu .user-header {
  background: linear-gradient(135deg, var(--ce-primary), var(--ce-verde)) !important;
  color: #fff !important;
  position: relative;
  padding-top: 1.25rem;
}
.app-header .user-menu .user-header::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3px;
  background: var(--ce-grafismo);
}
.app-header .user-menu .user-header img {
  border: 3px solid rgba(255, 255, 255, .6);
}
.app-header .user-menu .user-body,
.app-header .user-menu .user-footer {
  padding: 1rem;
}

/* --------------------------------------------------------------------------
   2. Sidebar (app-sidebar)
   -------------------------------------------------------------------------- */
.app-sidebar {
  box-shadow: 1px 0 3px rgba(0, 0, 0, .06);
}

.app-sidebar .sidebar-brand {
  padding-block: .9rem;
}
.app-sidebar .brand-image {
  border-radius: 8px;
}
.app-sidebar .brand-text {
  font-weight: 600;
  letter-spacing: .02em;
}

/* Itens do menu com cantos arredondados e respiro — visual mais atual,
   mantendo a barra verde do item ativo que o identidade-ceara já aplica. */
.app-sidebar .sidebar-menu .nav-item > .nav-link {
  border-radius: 10px;
  margin: 2px .6rem;
  padding-block: .55rem;
}
.app-sidebar .sidebar-menu .nav-treeview .nav-link {
  border-radius: 8px;
  margin: 1px .6rem 1px 1.1rem;
}
.app-sidebar .nav-header {
  padding-inline: 1.1rem;
  margin-top: .35rem;
  opacity: .85;
}

/* --------------------------------------------------------------------------
   3. Footer (app-footer)
   -------------------------------------------------------------------------- */
.app-footer {
  background: transparent;
  font-size: .85rem;
  color: var(--ce-texto-suave);
  padding-block: .85rem;
}
.app-footer a {
  color: var(--ce-primary);
}

/* --------------------------------------------------------------------------
   4. Conteúdo
   -------------------------------------------------------------------------- */
/* Um respiro a mais no topo do conteúdo, coerente com a densidade da navbar */
.app-main .app-content {
  padding-top: .5rem;
}