/* Light mode — ajustes dos componentes custom (dark-first) do Habbouse.
   O template já troca as superfícies base via data-bs-theme=light; aqui só
   corrigimos os pedaços que usavam cor clara fixa (rgba branco) e ficariam
   invisíveis/errados no claro. Pass 1 — refinar com screenshots. */

[data-bs-theme=light] .hb-head-crop { background: rgba(0,0,0,.05); }
[data-bs-theme=light] .hb-act-bell { background: rgba(0,0,0,.12); color: rgba(0,0,0,.4); }
[data-bs-theme=light] .hb-act-bell:hover { background: rgba(0,0,0,.25); color: #000; }
[data-bs-theme=light] .hb-pick-item:hover { background: rgba(0,0,0,.06) !important; }

/* bordas/realces que usavam branco translúcido */
[data-bs-theme=light] .border { border-color: rgba(0,0,0,.1) !important; }

/* dropdowns custom (avatar/home) que fixavam fundo escuro inline: força legível */
[data-bs-theme=light] #hb-home-user .hb-home-menu { background: #ffffff; border-color: rgba(0,0,0,.1); }
[data-bs-theme=light] #hb-home-user .hb-home-menu a { color: #313a46; }

/* Hero da home no LIGHT: sai do fundo preto de caveiras -> gradiente suave na paleta Habbase */
[data-bs-theme=light] .hero-banner-home {
  background-image: none !important;
  background: linear-gradient(135deg, #e6ebfb 0%, #efe9ff 55%, #f6f3ff 100%) !important;
}
[data-bs-theme=light] .hero-banner-home h1 { color: #2b4c9b !important; text-shadow: none !important; }
[data-bs-theme=light] .hero-banner-home .badge.badge-soft-dark {
  background: rgba(43,76,155,.10) !important; color: #2b4c9b !important;
}

/* Fundo do site no LIGHT: tira o pattern de caveiras (bobba_light.png) e fixa o
   degradê suave da paleta no site inteiro (o "degradê lindo" que aparecia por baixo). */
html[data-skin=prism][data-bs-theme=light] body {
  background-image: none !important;
  background: linear-gradient(180deg, #f8ecf5 0%, #efeafb 45%, #f6f7fb 100%) !important;
  background-attachment: fixed !important;
  background-repeat: no-repeat !important;
}

/* ===== DARK mode: sair das caveiras, degradê na paleta escura (mesmo estilo do light) ===== */
html[data-skin=prism][data-bs-theme=dark] body {
  background-image: none !important;
  background: linear-gradient(180deg, #241f38 0%, #1b1c28 50%, #17181e 100%) !important;
  background-attachment: fixed !important;
  background-repeat: no-repeat !important;
}
[data-bs-theme=dark] .hero-banner-home {
  background-image: none !important;
  background: linear-gradient(135deg, #2a2442 0%, #1e1f2e 60%, #191a24 100%) !important;
}

/* Vidro (glassmorphism) da gaveta mobile: translúcido nos dois temas.
   Dark mantém o azul translúcido atual; light ganha o mesmo efeito em tom claro. */
[data-bs-theme=dark]  { --hb-drawer-bg: rgba(27, 40, 110, 0.10); }
[data-bs-theme=light] { --hb-drawer-bg: rgba(249, 247, 253, 0.985); }

/* Item ATIVO da sidebar no LIGHT: sai do pill preto -> tom claro azul da paleta */
html[data-skin=prism][data-bs-theme=light] .side-nav > .side-nav-item.active > a {
  background: rgba(35, 109, 201, 0.12) !important;
  background-image: none !important;
  color: #1f5bab !important;
  box-shadow: none !important;
}
html[data-skin=prism][data-bs-theme=light] .side-nav > .side-nav-item.active > a .menu-icon,
html[data-skin=prism][data-bs-theme=light] .side-nav > .side-nav-item.active > a i {
  color: #1f5bab !important;
}

/* Sidebar desktop no LIGHT: transparente (funde com o degradê, igual às páginas
   Shell) — tira o bloco branco que só a home tinha. A gaveta mobile mantém o
   vidro (regra do sidenav.js dentro do @media <768 vence com !important). */
@media (min-width: 768px) {
  html[data-skin=prism][data-bs-theme=light] .sidenav-menu {
    background-color: transparent !important;
    background-image: none !important;
  }
}

/* ===== Espaçamentos (ambos os temas) ===== */
/* Topbar descolada do topo (estilo bobba) */
.app-topbar { margin-top: 1rem; top: 1rem !important; }
/* Respiro antes do rodapé */
.content-page > .footer, .footer { margin-top: 2.5rem; padding-top: .75rem; }

/* Sidebar clean: sem logo no topo (expandido "Habbase" e recolhido "ª") */
.sidenav-menu > a.logo, .sidenav-menu > .logo { display: none !important; }

/* ===== Flyout do submenu na sidebar RECOLHIDA (popup decente) ===== */
html[data-sidenav-size=condensed] .sidenav-menu .side-nav .sub-menu {
  border-radius: 10px !important;
  padding: 6px 0 !important;
  overflow: hidden;
}
/* LIGHT */
html[data-bs-theme=light][data-sidenav-size=condensed] .sidenav-menu .side-nav .sub-menu {
  background: #ffffff !important;
  border: 1px solid rgba(20,30,80,.10) !important;
  box-shadow: 0 10px 30px rgba(20,30,80,.16) !important;
}
html[data-bs-theme=light][data-sidenav-size=condensed] .sidenav-menu .side-nav .sub-menu .side-nav-link {
  color: #37415a !important;
}
html[data-bs-theme=light][data-sidenav-size=condensed] .sidenav-menu .side-nav .sub-menu .side-nav-link:hover {
  background: rgba(35,109,201,.10) !important; color: #1f5bab !important;
}
/* DARK */
html[data-bs-theme=dark][data-sidenav-size=condensed] .sidenav-menu .side-nav .sub-menu {
  background: #171a33 !important;
  border: 1px solid rgba(255,255,255,.08) !important;
  box-shadow: 0 10px 30px rgba(0,0,0,.5) !important;
}
html[data-bs-theme=dark][data-sidenav-size=condensed] .sidenav-menu .side-nav .sub-menu .side-nav-link {
  color: #cfd4ee !important;
}
html[data-bs-theme=dark][data-sidenav-size=condensed] .sidenav-menu .side-nav .sub-menu .side-nav-link:hover {
  background: rgba(255,255,255,.07) !important; color: #fff !important;
}

/* Sem logo/caveira no topbar (mobile): fica só o hambúrguer */
.logo-topbar { display: none !important; }

/* Logo da hero responsivo: metade no mobile, nunca estoura a largura */
.hb-hero-logo { height: 96px; max-width: 100%; }
@media (max-width: 767.98px) { .hb-hero-logo { height: 48px; } }

/* Logo da sidebar removido: reservar o espaço do topo (desktop) p/ o 1º ícone começar onde estava */
@media (min-width: 768px) {
  #sidenav-menu { padding-top: 85px; }
}

/* Gap lateral do topbar (respiro entre a sidebar e a barra de busca) — aberta e recolhida */
@media (min-width: 768px) {
  .app-topbar { margin-inline-start: calc(var(--theme-sidenav-width) + 1rem) !important; margin-inline-end: 1rem !important; }
  html.hb-condensed .app-topbar { margin-inline-start: calc(var(--theme-sidenav-width-sm) + 1rem) !important; }
}

/* Sidebar recolhida: força a largura pequena (o container estava ficando em 245px) */
html[data-skin=prism].hb-condensed .sidenav-menu { width: var(--theme-sidenav-width-sm) !important; }

/* Guias (nav-pills) — pill ativa legível nos dois temas */
.nav-pills .nav-link.active { background: #4f6bed !important; color: #fff !important; }
.nav-pills .nav-link:not(.active) { color: var(--bs-body-color); }

/* nav-pills no skin prism: pill ativa azul sólida e inativa legível (2 temas) */
html[data-skin=prism] .nav-pills .nav-link { color: var(--bs-body-color) !important; }
html[data-skin=prism] .nav-pills .nav-link.active,
html[data-skin=prism][data-bs-theme=dark] .nav-pills .nav-link.active {
  background-color: #4f6bed !important;
  background-image: none !important;
  color: #fff !important;
  box-shadow: none !important;
}