/**
 * Poupex Play 4.0 — Shell Global
 * Namespace: .pp4-* (tokens --pp4-*)
 *
 * Sprint 1 do redesign. Componente que faltava no Design System.
 *
 * ESTRATÉGIA DE APLICAÇÃO
 * -----------------------
 * O shell em produção usa as classes .app-shell / .app-sidebar / .app-topbar /
 * .app-main / .app-content, e o JavaScript depende delas e dos IDs
 * (#app-sidebar-toggle, #app-balance-toggle, #app-alerts*).
 *
 * Este arquivo NÃO renomeia nada. Ele escopa por `.pp4-shell`, que é adicionada
 * ao lado de `.app-shell`. Consequências:
 *   · zero mudança de contrato para o JavaScript
 *   · reversível removendo uma única classe do markup
 *   · carregado depois de app.css, portanto vence por ordem
 *
 * Especificidade: sempre `.pp4-shell <alvo>` (0,2,0 ou mais) para superar as
 * regras de página de app.css sem recorrer a !important.
 */

/* ============================================================
   1 · GRID DO SHELL
   ============================================================ */

.pp4-shell {
  display: grid;
  grid-template-columns: var(--pp4-sidebar-width) minmax(0, 1fr);
  min-height: 100vh;
  min-height: 100dvh;
  background: var(--pp4-color-bg);
  color: var(--pp4-color-text);
  font-family: var(--pp4-font-sans);
}

/* app.css usa sidebar `position: fixed` + `.app-main { margin-left: 260px }`.
   O shell 4.0 usa grid com sidebar `sticky`, então a margem legada tem de
   ser zerada — senão o conteúdo desloca 260px para a direita.
   Também removemos `align-items: center` e os gutters duplicados. */
.pp4-shell .app-main {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  min-width: 0;
  margin-left: 0;
  padding-left: 0;
  padding-right: 0;
  background: var(--pp4-color-bg);
}

/* `.shell--app .app-content.content` (0,3,0) e `.app-content` zeram o
   padding horizontal — sem isto o conteúdo encosta na borda da janela.
   Espelhado em 0,3,0 e carregado depois. */
.pp4-shell .app-content,
.pp4-shell .app-content.content {
  flex: 1 1 auto;
  width: 100%;
  max-width: var(--pp4-content-max);
  margin: 0 auto;
  padding: var(--pp4-space-6) var(--pp4-content-gutter) var(--pp4-space-12);
  color: var(--pp4-color-text);
  box-sizing: border-box;
}

/* `hidden` precisa vencer qualquer `display` herdado do CSS legado. */
.pp4-shell [hidden] { display: none !important; }

/* ============================================================
   2 · SIDEBAR
   ============================================================ */

.pp4-shell .app-sidebar {
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  width: var(--pp4-sidebar-width);
  height: 100vh;
  height: 100dvh;
  position: sticky;
  top: 0;
  padding: var(--pp4-space-4) var(--pp4-space-3);
  background: var(--pp4-color-bg-elevated);
  border-right: 1px solid var(--pp4-color-border);
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: var(--pp4-color-surface-3) transparent;
}

.pp4-shell .app-sidebar::-webkit-scrollbar { width: 6px; }
.pp4-shell .app-sidebar::-webkit-scrollbar-track { background: transparent; }
.pp4-shell .app-sidebar::-webkit-scrollbar-thumb {
  background: var(--pp4-color-surface-3);
  border-radius: var(--pp4-radius-pill);
}

/* —— Marca —— */
.pp4-shell .app-sidebar__brand {
  display: flex;
  align-items: center;
  gap: var(--pp4-space-3);
  min-height: 48px;
  padding: 0 var(--pp4-space-2);
  margin-bottom: var(--pp4-space-5);
  text-decoration: none;
  color: inherit;
  flex-shrink: 0;
}

.pp4-shell .app-sidebar__brand img {
  max-height: 34px;
  width: auto;
  display: block;
}

.pp4-shell .app-sidebar__brand:focus-visible {
  outline: 2px solid var(--pp4-color-blue-bright);
  outline-offset: 3px;
  border-radius: var(--pp4-radius-sm);
}

/* —— Navegação ——
   `flex: 0 0 auto` é essencial: com `flex: 1` a nav era comprimida a uma
   altura menor que seu conteúdo e o rodapé sobrepunha as redes sociais.
   A rolagem pertence à sidebar, não à nav. */
.pp4-shell .app-sidebar__nav {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 0 0 auto;
}

.pp4-nav-section {
  margin: var(--pp4-space-5) 0 var(--pp4-space-2);
  padding: 0 var(--pp4-space-3);
  font-size: 10px;
  font-weight: var(--pp4-weight-bold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--pp4-color-text-muted);
}

.pp4-nav-section:first-of-type { margin-top: 0; }

.pp4-shell .app-sidebar__link {
  display: flex;
  align-items: center;
  gap: var(--pp4-space-3);
  min-height: 40px;
  padding: 0 10px;
  border: 0;
  border-radius: 10px;
  color: var(--pp4-color-text-muted);
  text-decoration: none;
  font-size: var(--pp4-text-md);
  font-weight: var(--pp4-weight-medium);
  line-height: 1.2;
  letter-spacing: -0.006em;
  transition:
    background var(--pp4-duration) var(--pp4-ease),
    color var(--pp4-duration) var(--pp4-ease);
}

.pp4-shell .app-sidebar__link:hover {
  background: rgba(245, 247, 250, 0.05);
  color: var(--pp4-color-text);
}

/* Ativo: preenchimento sólido de Azul Royal, como na referência.
   `#f5f7fa` sobre `#123bf9` = 6,96:1 — AA com folga. */
.pp4-shell .app-sidebar__link--active,
.pp4-shell .app-sidebar__link[aria-current="page"] {
  background: var(--pp4-color-blue);
  color: #ffffff;
  font-weight: var(--pp4-weight-semibold);
}

.pp4-shell .app-sidebar__link--active:hover,
.pp4-shell .app-sidebar__link[aria-current="page"]:hover {
  background: #1a46ff;
  color: #ffffff;
}

.pp4-shell .app-sidebar__link:focus-visible {
  outline: 2px solid var(--pp4-color-blue-bright);
  outline-offset: 2px;
}

/* —— Ícone: neutro. A cor semântica por item foi removida na 4.0 —— */
.pp4-shell .app-sidebar__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--pp4-icon-md);
  height: var(--pp4-icon-md);
  flex-shrink: 0;
  color: currentColor;
  background: none;
  border-radius: 0;
}

.pp4-shell .app-sidebar__icon svg {
  width: 100%;
  height: 100%;
  display: block;
}

/* —— Submenus (Jogos · Mini Apps) —— */
.pp4-shell .app-sidebar__group { display: flex; flex-direction: column; gap: 2px; }

.pp4-shell .app-sidebar__chevron {
  width: var(--pp4-icon-sm);
  height: var(--pp4-icon-sm);
  margin-left: auto;
  color: var(--pp4-color-text-muted);
  flex-shrink: 0;
  transition: transform var(--pp4-duration) var(--pp4-ease);
}

.pp4-shell .app-sidebar__group.is-open > .app-sidebar__link .app-sidebar__chevron,
.pp4-shell .app-sidebar__group.is-open .app-sidebar__chevron {
  transform: rotate(180deg);
}

/* Recolhido por padrão — o mecanismo `.is-open` de app.css é preservado.
   `display: flex` incondicional aqui abria todos os submenus. */
.pp4-shell .app-sidebar__sub {
  display: none;
  flex-direction: column;
  gap: 1px;
  margin: 2px 0 var(--pp4-space-2);
  padding-left: 30px;
  border-left: 0;
  position: relative;
}

.pp4-shell .app-sidebar__group.is-open > .app-sidebar__sub { display: flex; }

/* Marcador "•" dourado do CSS legado. */
.pp4-shell .app-sidebar__sublink::before { content: none !important; }

/* Guia vertical, no lugar do recuo cego. */
.pp4-shell .app-sidebar__sub::before {
  content: "";
  position: absolute;
  left: 19px;
  top: 4px;
  bottom: 4px;
  width: 1px;
  background: var(--pp4-color-border);
}

.pp4-shell .app-sidebar__sublink {
  display: flex;
  align-items: center;
  gap: var(--pp4-space-2);
  min-height: 34px;
  padding: 0 10px;
  border-radius: 8px;
  color: var(--pp4-color-text-muted);
  text-decoration: none;
  font-size: var(--pp4-text-sm);
  font-weight: var(--pp4-weight-medium);
  transition: background var(--pp4-duration) var(--pp4-ease), color var(--pp4-duration) var(--pp4-ease);
}

.pp4-shell .app-sidebar__sublink:hover {
  background: rgba(245, 247, 250, 0.05);
  color: var(--pp4-color-text);
}

.pp4-shell .app-sidebar__sublink--active {
  background: var(--pp4-color-blue-soft);
  color: var(--pp4-color-text);
  font-weight: var(--pp4-weight-semibold);
}

.pp4-shell .app-sidebar__sublink:focus-visible {
  outline: 2px solid var(--pp4-color-blue-bright);
  outline-offset: 2px;
}

.pp4-shell .app-sidebar__subico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

/* —— Selo (NOVO / BETA) —— */
.pp4-nav-tag {
  margin-left: auto;
  padding: 2px 7px;
  border-radius: var(--pp4-radius-sm);
  font-size: 9px;
  font-weight: var(--pp4-weight-extrabold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  line-height: 1.4;
  flex-shrink: 0;
}

.pp4-nav-tag--new {
  background: var(--pp4-color-success-soft);
  color: var(--pp4-color-success);
}

.pp4-nav-tag--beta {
  background: var(--pp4-color-purple-soft);
  color: var(--pp4-color-purple-bright);
}

/* —— Rodapé da sidebar ——
   `margin-top: auto` cola no fim quando sobra espaço e empurra
   normalmente quando não sobra. Nunca sobrepõe. */
/* `margin-top: auto` cola no fim quando há folga e flui normalmente quando
   não há. Não é `sticky`: um rodapé fixo ocultaria o bloco de redes ao
   rolar, e oclusão permanente é pior que uma rolagem curta. */
.pp4-sidebar-foot {
  flex: 0 0 auto;
  margin-top: auto;
  padding-top: var(--pp4-space-3);
  border-top: 1px solid var(--pp4-color-border);
}

.pp4-shell .app-sidebar__link--logout { color: var(--pp4-color-text-muted); }
.pp4-shell .app-sidebar__link--logout:hover {
  background: var(--pp4-color-danger-soft);
  color: var(--pp4-color-danger);
}

/* —— Redes oficiais —— */
.pp4-shell .app-sidebar__social {
  margin: var(--pp4-space-4) 0 0;
  padding: 0;
  border: 0;
  background: none;
}

.pp4-shell .app-sidebar__social-title {
  margin: 0 0 var(--pp4-space-2);
  padding: 0 var(--pp4-space-3);
  font-size: 10px;
  font-weight: var(--pp4-weight-bold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--pp4-color-text-muted);
}

.pp4-shell .app-sidebar__social-link {
  display: flex;
  align-items: center;
  gap: var(--pp4-space-3);
  min-height: 40px;
  padding: 0 var(--pp4-space-3);
  border-radius: var(--pp4-radius-md);
  color: var(--pp4-color-text-muted);
  text-decoration: none;
  font-size: var(--pp4-text-sm);
  font-weight: var(--pp4-weight-medium);
  transition: background var(--pp4-duration) var(--pp4-ease), color var(--pp4-duration) var(--pp4-ease);
}

.pp4-shell .app-sidebar__social-link:hover {
  background: var(--pp4-color-surface-2);
  color: var(--pp4-color-text);
}

/* ============================================================
   3 · TOPBAR
   ============================================================ */

.pp4-shell .app-topbar {
  display: flex;
  align-items: center;
  gap: var(--pp4-space-3);
  box-sizing: border-box;
  position: sticky;
  top: 0;
  z-index: var(--pp4-z-sticky);
  min-height: var(--pp4-navbar-height);
  padding: 0 var(--pp4-content-gutter);
  background: rgba(10, 14, 23, 0.86);
  border-bottom: 1px solid var(--pp4-color-border);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

/* —— Botão de menu (mobile) —— */
/* Sem borda, igual aos demais botões de ícone da topbar. */
.pp4-shell .app-topbar__menu {
  display: none;
  align-items: center;
  justify-content: center;
  width: var(--pp4-control-md);
  height: var(--pp4-control-md);
  padding: 0;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--pp4-color-text);
  cursor: pointer;
  flex-shrink: 0;
  transition: background var(--pp4-duration) var(--pp4-ease);
}

.pp4-shell .app-topbar__menu:hover { background: rgba(245, 247, 250, 0.06); }

.pp4-shell .app-topbar__menu svg { width: var(--pp4-icon-md); height: var(--pp4-icon-md); }
.pp4-shell .app-topbar__menu:focus-visible {
  outline: 2px solid var(--pp4-color-blue-bright);
  outline-offset: 2px;
}

/* —— Busca —— */
.pp4-topbar-search {
  display: flex;
  align-items: center;
  gap: var(--pp4-space-2);
  flex: 1 1 auto;
  max-width: 360px;
  min-width: 0;
  height: var(--pp4-control-md);
  padding: 0 var(--pp4-space-3);
  border: 1px solid var(--pp4-color-border);
  border-radius: var(--pp4-radius-md);
  background: var(--pp4-color-surface);
  color: var(--pp4-color-text-muted);
}

.pp4-topbar-search svg {
  width: var(--pp4-icon-sm);
  height: var(--pp4-icon-sm);
  flex-shrink: 0;
}

.pp4-topbar-search__input {
  flex: 1 1 auto;
  min-width: 0;
  border: 0;
  background: none;
  color: var(--pp4-color-text);
  font-family: inherit;
  font-size: var(--pp4-text-md);
  outline: none;
}

.pp4-topbar-search__input::placeholder { color: var(--pp4-color-text-muted); }
.pp4-topbar-search:focus-within {
  border-color: var(--pp4-color-border-blue);
  box-shadow: 0 0 0 3px var(--pp4-color-blue-soft);
}

/* —— Abas —— */
.pp4-shell .app-topbar__tabs {
  display: flex;
  align-items: center;
  gap: var(--pp4-space-1);
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: none;
}

.pp4-shell .app-topbar__tabs::-webkit-scrollbar { display: none; }

.pp4-shell .app-topbar__tab {
  display: inline-flex;
  align-items: center;
  min-height: var(--pp4-control-sm);
  padding: 0 var(--pp4-space-3);
  border: 1px solid transparent;
  border-radius: var(--pp4-radius-pill);
  color: var(--pp4-color-text-muted);
  text-decoration: none;
  font-size: var(--pp4-text-sm);
  font-weight: var(--pp4-weight-semibold);
  white-space: nowrap;
  transition: background var(--pp4-duration) var(--pp4-ease), color var(--pp4-duration) var(--pp4-ease);
}

.pp4-shell .app-topbar__tab:hover {
  background: var(--pp4-color-surface-2);
  color: var(--pp4-color-text);
}

.pp4-shell .app-topbar__tab--active {
  background: var(--pp4-color-blue-soft);
  border-color: var(--pp4-color-border-blue);
  color: var(--pp4-color-text);
}

.pp4-shell .app-topbar__tab:focus-visible {
  outline: 2px solid var(--pp4-color-blue-bright);
  outline-offset: 2px;
}

/* —— Ações —— */
.pp4-shell .app-topbar__actions {
  display: flex;
  align-items: center;
  gap: var(--pp4-space-2);
  margin-left: auto;
  flex-shrink: 0;
}

/* Depositar — única ação preenchida da topbar */
.pp4-shell .app-topbar__deposit {
  display: inline-flex;
  align-items: center;
  gap: var(--pp4-space-2);
  min-height: var(--pp4-control-md);
  padding: 0 var(--pp4-space-4);
  border: 0;
  border-radius: var(--pp4-radius-md);
  background: var(--pp4-color-blue);
  color: #ffffff;
  text-decoration: none;
  font-size: var(--pp4-text-md);
  font-weight: var(--pp4-weight-semibold);
  white-space: nowrap;
  transition: background var(--pp4-duration) var(--pp4-ease), transform var(--pp4-duration-fast) var(--pp4-ease);
}

.pp4-shell .app-topbar__deposit:hover { background: #0f2ea8; }
.pp4-shell .app-topbar__deposit:active { transform: translateY(1px); }
.pp4-shell .app-topbar__deposit:focus-visible {
  outline: 2px solid var(--pp4-color-blue-bright);
  outline-offset: 2px;
}

.pp4-shell .app-topbar__deposit-icon { font-weight: var(--pp4-weight-bold); }

/* Saldo — botão de alternância (JS lê .app-topbar__balance-*) */
.pp4-shell .app-topbar__balance {
  display: inline-flex;
  align-items: center;
  gap: var(--pp4-space-2);
  min-height: var(--pp4-control-md);
  padding: 0 var(--pp4-space-3);
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--pp4-color-text);
  font-family: inherit;
  font-size: var(--pp4-text-md);
  font-weight: var(--pp4-weight-bold);
  font-variant-numeric: tabular-nums;
  cursor: pointer;
  transition: background var(--pp4-duration) var(--pp4-ease);
}

.pp4-shell .app-topbar__balance:hover { background: rgba(245, 247, 250, 0.06); }
.pp4-shell .app-topbar__balance:focus-visible {
  outline: 2px solid var(--pp4-color-blue-bright);
  outline-offset: 2px;
}

.pp4-shell .app-topbar__balance-value {
  display: inline-flex;
  align-items: center;
  gap: var(--pp4-space-2);
}

.pp4-shell .app-topbar__balance-amount { color: var(--pp4-color-success); }

.pp4-shell .app-topbar__balance-icon {
  width: var(--pp4-icon-md);
  height: var(--pp4-icon-md);
  color: var(--pp4-color-text-muted);
}

/* Botão de ícone genérico da topbar */
/* Botões de ícone sem borda — a referência usa apenas fundo no hover.
   Borda em cada ícone deixa a topbar com peso de painel administrativo. */
.pp4-shell .app-topbar__alerts-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  width: var(--pp4-control-md);
  height: var(--pp4-control-md);
  padding: 0;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--pp4-color-text-muted);
  cursor: pointer;
  transition: color var(--pp4-duration) var(--pp4-ease), background var(--pp4-duration) var(--pp4-ease);
}

.pp4-shell .app-topbar__alerts-btn:hover {
  color: var(--pp4-color-text);
  background: rgba(245, 247, 250, 0.06);
}

.pp4-shell .app-topbar__alerts-btn:focus-visible {
  outline: 2px solid var(--pp4-color-blue-bright);
  outline-offset: 2px;
}

.pp4-shell .app-topbar__alerts-btn svg { width: var(--pp4-icon-md); height: var(--pp4-icon-md); }

.pp4-shell .app-topbar__alerts-badge {
  position: absolute;
  top: -5px;
  right: -5px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: var(--pp4-radius-pill);
  background: var(--pp4-color-danger);
  color: #ffffff;
  font-size: 10px;
  font-weight: var(--pp4-weight-bold);
  line-height: 18px;
  text-align: center;
  box-sizing: border-box;
}

/* Painel de alertas */
.pp4-shell .app-topbar__alerts { position: relative; }

.pp4-shell .app-topbar__alerts-panel {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  z-index: var(--pp4-z-dropdown);
  width: min(340px, calc(100vw - 32px));
  max-height: 420px;
  overflow-y: auto;
  padding: var(--pp4-space-2);
  border: 1px solid var(--pp4-color-border);
  border-radius: var(--pp4-radius-lg);
  background: var(--pp4-color-surface);
  box-shadow: var(--pp4-elev-3);
}

.pp4-shell .app-topbar__alerts-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--pp4-space-2) var(--pp4-space-3);
  color: var(--pp4-color-text);
  font-size: var(--pp4-text-md);
}

.pp4-shell .app-topbar__alerts-close {
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: var(--pp4-radius-sm);
  background: none;
  color: var(--pp4-color-text-muted);
  font-size: var(--pp4-text-lg);
  cursor: pointer;
}

.pp4-shell .app-topbar__alerts-close:hover {
  background: var(--pp4-color-surface-2);
  color: var(--pp4-color-text);
}

.pp4-shell .app-topbar__alerts-empty {
  margin: 0;
  padding: var(--pp4-space-6) var(--pp4-space-3);
  color: var(--pp4-color-text-muted);
  font-size: var(--pp4-text-sm);
  text-align: center;
}

/* Bloco do usuário */
.pp4-shell .app-topbar__user { position: relative; }

.pp4-shell .app-topbar__user-btn {
  display: flex;
  align-items: center;
  gap: var(--pp4-space-2);
  min-height: var(--pp4-control-md);
  padding: 0 var(--pp4-space-2);
  border: 1px solid transparent;
  border-radius: var(--pp4-radius-md);
  cursor: pointer;
  list-style: none;
  transition: background var(--pp4-duration) var(--pp4-ease);
}

.pp4-shell .app-topbar__user-btn::-webkit-details-marker { display: none; }
.pp4-shell .app-topbar__user-btn:hover { background: var(--pp4-color-surface-2); }
.pp4-shell .app-topbar__user-btn:focus-visible {
  outline: 2px solid var(--pp4-color-blue-bright);
  outline-offset: 2px;
}

.pp4-shell .app-topbar__avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: var(--pp4-radius-pill);
  background: var(--pp4-color-blue);
  color: #ffffff;
  font-size: var(--pp4-text-md);
  font-weight: var(--pp4-weight-bold);
  flex-shrink: 0;
}

.pp4-shell .app-topbar__user-info {
  display: flex;
  flex-direction: column;
  line-height: 1.25;
  min-width: 0;
}

.pp4-shell .app-topbar__user-info strong {
  color: var(--pp4-color-text);
  font-size: var(--pp4-text-md);
  font-weight: var(--pp4-weight-semibold);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 130px;
}

.pp4-topbar-user__meta {
  color: var(--pp4-color-text-muted);
  font-size: var(--pp4-text-xs);
}

.pp4-shell .app-topbar__chevron {
  width: var(--pp4-icon-sm);
  height: var(--pp4-icon-sm);
  color: var(--pp4-color-text-muted);
  flex-shrink: 0;
}

.pp4-shell .app-topbar__dropdown {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  z-index: var(--pp4-z-dropdown);
  display: flex;
  flex-direction: column;
  min-width: 210px;
  padding: var(--pp4-space-2);
  border: 1px solid var(--pp4-color-border);
  border-radius: var(--pp4-radius-lg);
  background: var(--pp4-color-surface);
  box-shadow: var(--pp4-elev-3);
}

.pp4-shell .app-topbar__dropdown a {
  display: flex;
  align-items: center;
  min-height: var(--pp4-control-md);
  padding: 0 var(--pp4-space-3);
  border-radius: var(--pp4-radius-md);
  color: var(--pp4-color-text-secondary);
  text-decoration: none;
  font-size: var(--pp4-text-md);
}

.pp4-shell .app-topbar__dropdown a:hover {
  background: var(--pp4-color-surface-2);
  color: var(--pp4-color-text);
}

.pp4-shell .app-topbar__dropdown-danger { color: var(--pp4-color-danger) !important; }
.pp4-shell .app-topbar__dropdown-danger:hover { background: var(--pp4-color-danger-soft) !important; }

.pp4-dropdown-sep {
  height: 1px;
  margin: var(--pp4-space-2) var(--pp4-space-2);
  background: var(--pp4-color-border);
}

/* ============================================================
   4 · SUPERFÍCIE DE CONTEÚDO
   ============================================================ */

.pp4-shell .app-content > .card,
.pp4-shell .app-content > section > .card {
  background: var(--pp4-color-surface);
  border: 1px solid var(--pp4-color-border);
  border-radius: var(--pp4-radius-lg);
  box-shadow: var(--pp4-elev-1);
}

/* ============================================================
   5 · RESPONSIVIDADE
   ============================================================ */

/* —— Notebook 1024–1439: sidebar mantida, conteúdo fluido —— */
@media (max-width: 1439px) {
  .pp4-shell .app-content { padding-top: var(--pp4-space-5); }
  .pp4-topbar-search { max-width: 280px; }
}

/* Abaixo de 1280 não cabem busca + abas + ações (360+416+344 = 1120 num
   útil de 968). As abas duplicam itens que já estão na sidebar, então são
   elas que saem — a busca não tem substituto. */
@media (max-width: 1279px) {
  .pp4-shell .app-topbar__tabs { display: none; }
  .pp4-topbar-search { max-width: 320px; }
}

/* —— Tablet 768–1023: sidebar vira gaveta —— */
@media (max-width: 1023px) {
  .pp4-shell { grid-template-columns: minmax(0, 1fr); }

  .pp4-shell .app-sidebar {
    position: fixed;
    top: 0;
    left: 0;
    z-index: var(--pp4-z-overlay);
    transform: translateX(-100%);
    transition: transform var(--pp4-duration-slow) var(--pp4-ease);
    box-shadow: var(--pp4-elev-3);
  }

  /* Classe alternada pelo JS existente em _bottom.php */
  .pp4-shell.app-shell--sidebar-open .app-sidebar { transform: translateX(0); }

  .pp4-shell.app-shell--sidebar-open::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: calc(var(--pp4-z-overlay) - 1);
    background: rgba(5, 7, 13, 0.72);
  }

  .pp4-shell .app-topbar__menu { display: inline-flex; }
  .pp4-shell .app-topbar__tabs { display: none; }
  .pp4-topbar-search { max-width: none; }
}

/* —— Mobile 390–767 —— */
@media (max-width: 767px) {
  .pp4-shell .app-topbar {
    min-height: var(--pp4-navbar-height-mobile);
    padding: 0 var(--pp4-space-4);
    gap: var(--pp4-space-2);
  }

  /* Sem barra inferior no layout de app — o `_bottom.php` só renderiza
     a bottom-nav fora dele. Reservar espaço para algo inexistente
     deixaria um vão morto no fim de toda página. */
  .pp4-shell .app-content {
    padding: var(--pp4-space-4) var(--pp4-space-4) var(--pp4-space-10);
  }

  .pp4-shell .app-sidebar { width: min(300px, 86vw); }

  /* A busca sai da topbar no mobile — espaço é para saldo e conta */
  .pp4-topbar-search { display: none; }

  .pp4-shell .app-topbar__deposit-text { display: none; }
  .pp4-shell .app-topbar__deposit {
    width: var(--pp4-control-md);
    padding: 0;
    justify-content: center;
  }

  .pp4-shell .app-topbar__user-info { display: none; }
  .pp4-shell .app-topbar__chevron { display: none; }
  .pp4-shell .app-topbar__dropdown { min-width: 200px; }
}

@media (max-width: 479px) {
  .pp4-shell .app-topbar__balance { padding: 0 var(--pp4-space-2); }
  .pp4-shell .app-content { padding-left: var(--pp4-space-3); padding-right: var(--pp4-space-3); }
}

/* ============================================================
   6 · MOVIMENTO REDUZIDO
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
  .pp4-shell *,
  .pp4-shell *::before,
  .pp4-shell *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
  }
}

/* ============================================================
   7 · NEUTRALIZAÇÃO DO TEMA LEGADO (ouro)
   ============================================================

   `brand-theme.css` aplica a marca anterior (azul royal + OURO) com
   `!important` em 11 regras que atingem o shell. `!important` vence
   especificidade, então o Design System perderia sem esta camada.

   Cada declaração abaixo corresponde a UMA regra legada identificada,
   nesta ordem em brand-theme.css:
     1  .app-sidebar__link--active .app-sidebar__icon--gold { color }
     2  .app-sidebar__link--active { border-color; background }
     3  .app-topbar__link { color }
     4  .app-topbar__link--active { color; border-color }
     5  .app-topbar__balance-icon { color }
     6  .app-topbar__balance-value { background; border-color; box-shadow }
     7  .app-topbar__balance:hover .app-topbar__balance-value { background; border-color }
     8  .shell--app .app-topbar__tab:not(--active) { color }
     9  .shell--app .app-topbar__tab--active { color }
     10 .shell--app .app-topbar__balance * { color }
     11 .shell--app .content a:not(...) { color }

   `brand-theme.css` NÃO foi alterado — ele continua servindo as telas
   ainda não migradas. Esta camada age apenas dentro de `.pp4-shell`.
   Remover a classe `pp4-shell` do markup restaura o tema anterior inteiro.

   Quando todas as telas estiverem migradas, esta seção e as 11 regras
   legadas devem ser removidas juntas. */

.pp4-shell .app-sidebar__link--active .app-sidebar__icon,
.pp4-shell .app-sidebar__link--active .app-sidebar__icon--gold {
  color: currentColor !important;
}

.pp4-shell .app-sidebar__link--active {
  background: var(--pp4-color-blue) !important;
  border-color: transparent !important;
  color: #ffffff !important;
}

.pp4-shell .app-topbar__link { color: var(--pp4-color-text-muted) !important; }

.pp4-shell .app-topbar__link--active {
  color: var(--pp4-color-text) !important;
  border-color: var(--pp4-color-border-blue) !important;
}

.pp4-shell .app-topbar__balance-icon { color: var(--pp4-color-text-muted) !important; }

.pp4-shell .app-topbar__balance-value,
.pp4-shell .app-topbar__balance:hover .app-topbar__balance-value {
  background: none !important;
  border-color: transparent !important;
  box-shadow: none !important;
}

/* ATENÇÃO DE ESPECIFICIDADE
   `.shell--app` está na div externa `.shell`; `.pp4-shell` está na div
   interna `.app-shell`. São elementos DIFERENTES — qualquer seletor
   composto `.pp4-shell.shell--app` nunca casa.
   Cada regra abaixo iguala ou supera a especificidade da regra legada
   que neutraliza, e vence pela ordem de carga. */

/* legado 0,3,0 → aqui 0,4,0 */
.pp4-shell .app-topbar__tabs .app-topbar__tab:not(.app-topbar__tab--active) {
  color: var(--pp4-color-text-muted) !important;
}

/* legado 0,2,0 → aqui 0,3,0 */
.pp4-shell .app-topbar__tabs .app-topbar__tab--active {
  color: var(--pp4-color-text) !important;
}

/* legado 0,2,0 → aqui 0,3,0. O saldo herda do botão; só o valor é verde. */
.pp4-shell .app-topbar__actions .app-topbar__balance * {
  color: inherit !important;
}

.pp4-shell .app-topbar__actions .app-topbar__balance-amount {
  color: var(--pp4-color-success) !important;
}

/* legado `.shell--app a:not()×6` = 0,7,1 → espelhado em 0,7,1, carga posterior.
   Alcança inclusive os links de redes sociais da sidebar. */
.pp4-shell a:not(.app-sidebar__link):not(.app-topbar__deposit):not(.dep-submit):not(.pp-painel-btn):not(.page-header__back):not(.app-topbar__tab) {
  color: var(--pp4-color-text-muted) !important;
}

/* legado `.shell--app .content a:not()×6` = 0,8,1 → espelhado em 0,8,1.
   Exclui também os elementos acionáveis que têm cor própria — um link
   azul dentro de um botão preenchido é sempre erro. */
.pp4-shell .content a:not(.btn):not(.btn-primary):not(.app-topbar__deposit):not(.dep-submit):not(.page-header__back):not(.app-topbar__tab):not([class*="pp4-dash-act"]):not([class*="pp-painel-tile"]):not([class*="bo-btn"]):not([class*="__cta"]):not([class*="history-tab"]):not([class*="finance-tab"]):not([class*="task-tab"]):not([class*="sq-wallet"]):not([class*="fin-team-row"]):not([class*="fin-extrato-link"]):not([class*="team-levels-strip"]):not([class*="team-tier-member"]) {
  color: var(--pp4-color-blue-bright) !important;
}

/* Reafirmações após o espelho genérico acima, que é abrangente. */
.pp4-shell .app-sidebar .app-sidebar__social .app-sidebar__social-link:hover,
.pp4-shell .app-topbar .app-topbar__dropdown a:hover {
  color: var(--pp4-color-text) !important;
}

.pp4-shell .app-topbar .app-topbar__dropdown a {
  color: var(--pp4-color-text-secondary) !important;
}

.pp4-shell .app-topbar .app-topbar__dropdown .app-topbar__dropdown-danger {
  color: var(--pp4-color-danger) !important;
}

.pp4-shell .app-sidebar .app-sidebar__nav .app-sidebar__link--active {
  color: #ffffff !important;
}

/* legado `.shell--app p` = 0,1,1 — atinge TODO parágrafo do shell,
   incluindo os rótulos de seção da navegação. Aqui 0,3,0. */
.pp4-shell .app-sidebar .pp4-nav-section,
.pp4-shell .app-sidebar .app-sidebar__social-title {
  color: var(--pp4-color-text-muted) !important;
}

.pp4-shell .app-topbar .app-topbar__alerts-empty {
  color: var(--pp4-color-text-muted) !important;
}

/* Ícones da navegação: os parciais `_app_nav_jogos.php` e
   `_app_nav_minis_apps.php` ainda trazem os modificadores de cor
   (`--green`, `--pink`, …). Na 4.0 o ícone é neutro e herda do item —
   a cor passou a significar apenas estado. Neutralizado por CSS para não
   editar parciais fora do escopo desta sprint. */
.pp4-shell .app-sidebar [class*="app-sidebar__icon"],
.pp4-shell .app-sidebar .app-sidebar__subico {
  color: currentColor !important;
  background: none !important;
}

.pp4-shell .app-sidebar [class*="app-sidebar__icon"] svg,
.pp4-shell .app-sidebar [class*="app-sidebar__icon"] svg *,
.pp4-shell .app-sidebar .app-sidebar__subico svg,
.pp4-shell .app-sidebar .app-sidebar__subico svg *,
.pp4-shell .app-sidebar .app-sidebar__sublink > svg,
.pp4-shell .app-sidebar .app-sidebar__sublink > svg * {
  color: currentColor !important;
  stroke: currentColor;
}

.pp4-shell .app-sidebar .app-sidebar__social-link svg,
.pp4-shell .app-sidebar .app-sidebar__social-link svg * {
  color: currentColor !important;
  fill: currentColor;
}

/* legado `.shell--app input` = 0,1,1 e `::placeholder` — o cursor e o
   texto do campo de busca vinham dourados. Aqui 0,3,1. */
.pp4-shell .app-topbar .pp4-topbar-search .pp4-topbar-search__input {
  color: var(--pp4-color-text) !important;
  caret-color: var(--pp4-color-blue-bright) !important;
}

.pp4-shell .app-topbar .pp4-topbar-search .pp4-topbar-search__input::placeholder {
  color: var(--pp4-color-text-muted) !important;
  opacity: 1;
}

/* —— Três regras descobertas na revisão visual do Sprint 1.1 ——
   Não estavam no inventário inicial porque o levantamento buscou apenas
   seletores começando por `.app-*`. Estas casam por outro caminho. */

/* 12  brand-theme.css:169 — `.app-topbar__deposit, .invite-copy`
       aplicava o gradiente dourado de CTA ao botão principal da topbar. */
.pp4-shell .app-topbar__deposit {
  background-image: none !important;
  background-color: var(--pp4-color-blue) !important;
  color: #ffffff !important;
  box-shadow: none !important;
}

.pp4-shell .app-topbar__deposit:hover {
  background-color: #0f2ea8 !important;
}

/* 13  brand-theme.css:644 — `.shell--app a:not(.app-sidebar__link)...`
       pintava de ouro todo link do shell não excluído, o que alcançava
       os links de redes sociais da sidebar. */
.pp4-shell.shell--app .app-sidebar__social-link,
.pp4-shell .app-sidebar__social-link {
  color: var(--pp4-color-text-muted) !important;
}

.pp4-shell.shell--app .app-sidebar__social-link:hover,
.pp4-shell .app-sidebar__social-link:hover {
  color: var(--pp4-color-text) !important;
}

/* 14  O botão de saldo herdava ouro; o contêiner precisa ser neutro para
       que apenas o valor use o Verde Neon semântico. */
.pp4-shell .app-topbar__balance {
  color: var(--pp4-color-text) !important;
}

/* ============================================================
   8 · CABEÇALHO DE PÁGINA
   ============================================================

   `pages/_page_header.php` é um parcial usado por dez telas. Até o
   Sprint 8 o tratamento dele estava copiado dentro de `wallet.css`,
   `finance-flow.css` e `statement.css` — três blocos quase idênticos.
   Consequência prática: a tela de Carreira, que também usa o parcial
   mas não tem nenhum daqueles escopos, aparecia com o botão "voltar"
   em círculo dourado (`brand-theme.css:369`).

   Como o cabeçalho pertence ao shell, e não a uma tela, ele passa a ser
   definido uma vez só, aqui. Toda tela dentro de `.pp4-shell` herda.

   Especificidade a vencer:
     app.css:3752        `.page-header__back`                     0,1,0
     app.css:3803        `.page-header--dark .page-header__back`  0,2,0
     app.css:7202        `html[data-theme="dark"] …__back`        0,2,1
     brand-theme.css:369 `.shell--app .page-header__back`         0,2,0 !important
     brand-theme.css:518 `.shell--app a.page-header__back`        0,2,1 !important
   As regras abaixo ficam em 0,3,1 / 0,4,1. */

.pp4-shell .page-header,
html[data-theme] .pp4-shell .page-header {
  display: flex;
  align-items: center;
  gap: var(--pp4-space-4);
  padding: 0 !important;
  margin: 0 0 var(--pp4-space-2) !important;
  border: 0 !important;
  border-bottom: 0 !important;
  background: transparent !important;
  background-image: none !important;
  backdrop-filter: none !important;
  box-shadow: none !important;
  position: static !important;
}

.pp4-shell .page-header .page-header__back,
html[data-theme] .pp4-shell .page-header .page-header__back,
.pp4-shell .content a.page-header__back {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: var(--pp4-control-md);
  height: var(--pp4-control-md);
  border: 1px solid var(--pp4-color-border) !important;
  border-radius: 10px !important;
  background: var(--pp4-color-surface) !important;
  background-image: none !important;
  color: var(--pp4-color-text) !important;
  text-decoration: none;
  transition: background var(--pp4-duration) var(--pp4-ease);
}

/* brand-theme.css:384 força `stroke: #0a0a0a` no ícone (0,2,0). */
.pp4-shell .page-header .page-header__back svg,
html[data-theme] .pp4-shell .page-header .page-header__back svg {
  width: var(--pp4-icon-md);
  height: var(--pp4-icon-md);
  color: currentColor !important;
  stroke: currentColor !important;
}

.pp4-shell .page-header .page-header__back:hover,
html[data-theme] .pp4-shell .page-header .page-header__back:hover {
  background: var(--pp4-color-surface-2) !important;
  color: var(--pp4-color-text) !important;
}

.pp4-shell .page-header__back:focus-visible {
  outline: 2px solid var(--pp4-color-blue-bright);
  outline-offset: 2px;
}

.pp4-shell .page-header__title,
html[data-theme] .pp4-shell .page-header__title {
  margin: 0 !important;
  color: var(--pp4-color-text) !important;
  font-size: 1.75rem;
  font-weight: var(--pp4-weight-bold);
  line-height: 1.15;
  letter-spacing: -0.02em;
}

/* Existe só para centrar o título no grid de 3 colunas do CSS antigo.
   Com flex o título já alinha à esquerda; a célula vazia sobra. */
.pp4-shell .page-header__spacer { display: none; }

@media (max-width: 767px) {
  .pp4-shell .page-header__title,
  html[data-theme] .pp4-shell .page-header__title { font-size: 1.5rem; }
}

/* ============================================================
   9 · UTILITÁRIO — texto só para leitor de tela
   ============================================================ */

.pp4-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}