/* Estrutura: app-shell + sidebar + topbar + content. */

.app-shell {
  display: grid;
  grid-template-columns: var(--sidebar-w) minmax(0, 1fr);
  min-height: 100vh;
}

/* Sidebar (Padrao_Menu_Sidebar) */
.sidebar {
  background: var(--bg-elev);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  height: 100dvh;
  position: sticky;
  top: 0;
}

.sidebar-marca {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: 26px 20px;
}

.sidebar-marca .logo-quadro {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-family: var(--font-titulo);
  font-weight: 700;
  flex-shrink: 0;
}

.sidebar-marca .marca-nome {
  font-family: var(--font-titulo);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: -.02em;
  color: var(--texto);
}

.sidebar-nav {
  flex: 1;
  overflow-y: auto;
  padding: var(--sp-2) var(--sp-3);
}

.sidebar-nav .grupo-label {
  font-family: var(--font);
  font-weight: 700;
  font-size: 10.5px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--texto-fraco);
  padding: 22px var(--sp-3) 10px;
}

.nav-item {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: 12px var(--sp-3);
  border-radius: var(--radius-sm);
  font-family: var(--font);
  font-weight: 500;
  font-size: 13px;
  color: var(--texto-secundario);
  margin-bottom: 2px;
}

.nav-item:hover { background: var(--accent-soft); color: var(--texto); text-decoration: none; }
.nav-item.ativo { background: var(--accent-soft); color: var(--accent-texto); font-weight: 600; box-shadow: inset 3px 0 var(--accent); }
.nav-item .ph, .nav-item .ph-bold { font-size: 1.1rem; }

/* Rodape da sidebar (Padrao_Sidebar_Rodape) */
.sidebar-rodape {
  border-top: 1px solid var(--border);
  padding: var(--sp-3);
}

.btn-home-side {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--radius-sm);
  background: linear-gradient(135deg, var(--accent), var(--accent-escura));
  color: #fff;
  font-weight: 600;
  font-size: 13px;
  margin-bottom: var(--sp-3);
}
.btn-home-side:hover { text-decoration: none; filter: brightness(1.05); }

.sidebar-rodape-linha {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}

.avatar-inicial {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--accent-suave);
  color: var(--accent-texto);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-family: var(--font-titulo);
  flex-shrink: 0;
}

.sidebar-usuario { flex: 1; min-width: 0; }
.sidebar-usuario .nome { font-size: 13px; font-weight: 600; color: var(--texto); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sidebar-usuario .perfil { font-size: 11.5px; color: var(--texto-fraco); }

.btn-fantasma {
  width: 38px;
  height: 38px;
  flex-shrink: 0;
  border: 0;
  background: transparent;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--texto-fraco);
  font-size: 15px;
}
.btn-fantasma:hover { background: var(--accent-soft); color: var(--texto); }

/* Topbar */
.topbar {
  min-height: var(--topbar-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px var(--sp-6);
  border-bottom: 1px solid var(--border);
  background: var(--bg-elev);
  position: sticky;
  top: 0;
  z-index: 5;
}

.topbar .titulo-pagina {
  font-family: var(--font-titulo);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: -.02em;
}

.topbar-acoes { display: flex; align-items: center; gap: var(--sp-3); }

.content {
  padding: var(--sp-6);
  max-width: 100%;
  width: 100%;
  max-width: 1680px;
  margin-inline: auto;
}

/* Alternador de tema */
.tema-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: var(--radius-sm);
  color: var(--texto-secundario);
  cursor: pointer;
  border: 1px solid var(--border);
  background: var(--surface);
}
.tema-toggle:hover { background: var(--accent-soft); }

/* Navegacao mobile */
.btn-abrir-sidebar, .btn-fechar-sidebar { display: none; }
.app-principal { min-width: 0; }
.marca-descricao { display: block; color: var(--texto-fraco); font-size: 10.5px; margin-top: 3px; }
.sidebar-busca { margin: 0 16px 4px; position: relative; }
.sidebar-busca > i { position: absolute; top: 11px; left: 11px; color: var(--texto-fraco); pointer-events: none; }
.sidebar-busca input { width: 100%; height: 38px; border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 0 10px 0 33px; background: var(--bg); color: var(--texto); font-size: 12px; }
.menu-sem-resultados { font-size: 12px; color: var(--texto-secundario); padding: 12px; }
.topbar-contexto { display: flex; align-items: center; gap: 12px; min-width: 0; }
.topbar-caminho { display: flex; flex-direction: column; gap: 2px; }
.topbar-grupo { font-size: 11px; color: var(--texto-fraco); }
.sidebar-overlay { display: none; }
.sidebar-usuario:hover { text-decoration: none; }

@media (max-width: 900px) {
  .app-shell { grid-template-columns: 1fr; }
  .sidebar {
    position: fixed;
    inset: 0 auto 0 0;
    width: min(320px, 88vw);
    z-index: 20;
    transform: translateX(-100%);
    transition: transform .2s ease;
  }
  .sidebar.aberta { transform: translateX(0); box-shadow: var(--shadow); }
  .btn-abrir-sidebar, .btn-fechar-sidebar { display: flex; }
  .btn-fechar-sidebar { margin-left: auto; }
  .sidebar-overlay { display: block; position: fixed; inset: 0; z-index: 19; border: 0; background: rgba(12, 22, 38, .48); }
  body.menu-aberto { overflow: hidden; }
  .content { padding: 24px 20px; }
  .topbar { padding: 12px 16px; }
}
@media (max-width: 600px) {
  .topbar { flex-wrap: wrap; gap: 10px; }
  .topbar-acoes { margin-left: auto; gap: 8px; flex-wrap: wrap; }
  .topbar .titulo-pagina { font-size: 13px; }
  .content { padding: 20px 14px; }
}