/* ==========================================================================
   Estrutura do painel (menu lateral, barra de cima, menu no celular)
   Protótipo aprovado em 08/10/2026: docs/design/prototipo-admin/ (_shell.css).
   Carregado depois de style.css, admin-refresh.css, admin-nova.css e admin-ui.css,
   por isso vence as camadas antigas. Só aparência: IDs e onclick continuam os mesmos.
   ========================================================================== */

#view-admin { background: var(--admin-subtle) !important; font-family: var(--admin-font, Inter, system-ui, sans-serif); }
#view-admin .admin-layout { background: var(--admin-subtle) !important; }

/* ---------- Menu lateral ---------- */
#view-admin .admin-sidebar {
  width: 248px; min-width: 248px; max-width: 248px;
  padding: 16px 12px !important; gap: 12px;
  background: var(--admin-subtle) !important;
  border-right: 1px solid var(--admin-border) !important;
  box-shadow: none !important;
}
#view-admin .admin-sidebar.collapsed { width: 64px; min-width: 64px; max-width: 64px; padding: 16px 8px !important; }

#view-admin .adm-shell-brand { display: flex; align-items: center; gap: 8px; margin: 0 !important; padding: 4px 8px; }
#view-admin .adm-shell-brand img { display: block; flex-shrink: 0; }
#view-admin .adm-shell-brand-name { font-size: 15px; font-weight: 600; letter-spacing: -0.01em; color: var(--admin-fg); }
#view-admin .adm-shell-brand .adm-badge { margin-left: auto; }
#view-admin .admin-sidebar.collapsed .adm-shell-brand { justify-content: center; padding: 4px 0; }
#view-admin .admin-sidebar.collapsed .adm-shell-brand :is(.adm-shell-brand-name, .adm-badge) { display: none; }

/* Busca de página (criada pelo admin-refresh.js) */
#view-admin .admin-section-search {
  position: relative; display: flex; align-items: center; gap: 0; flex: none;
  height: 34px; margin: 0 !important; padding: 0 !important;
  border: 0 !important; background: none !important;
}
#view-admin .admin-section-search > :is(i, svg) { position: absolute; left: 10px; top: 50%; width: 16px; height: 16px; transform: translateY(-50%); color: var(--admin-muted-fg); pointer-events: none; }
#view-admin .admin-section-search input {
  width: 100%; height: 34px; min-height: 0 !important; padding: 0 44px 0 34px !important;
  border: 1px solid var(--admin-border) !important; border-radius: var(--admin-radius-control) !important;
  background: var(--admin-bg) !important; color: var(--admin-fg); font: 400 13px/1 var(--admin-font, Inter, sans-serif) !important;
  box-shadow: none !important; outline: none;
}
#view-admin .admin-section-search input:focus-visible { border-color: var(--admin-border-strong) !important; box-shadow: 0 0 0 3px var(--admin-ring) !important; outline: none !important; }
#view-admin .admin-section-search kbd {
  position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
  font: 500 11px var(--admin-font, Inter, sans-serif); color: var(--admin-muted-fg);
  border: 1px solid var(--admin-border); border-radius: 4px; padding: 1px 5px; background: var(--admin-subtle);
}
#view-admin .admin-search-empty { padding: 4px 10px; margin: 0; font-size: 12px; color: var(--admin-muted-fg); }

/* Grupos e itens */
#view-admin .admin-tabs { gap: 14px !important; overflow-y: auto; margin: 0 -4px; padding: 0 4px; min-height: 0; }
#view-admin .admin-tabs > div > div { gap: 1px !important; }
#view-admin .admin-sidebar-section {
  margin: 0 0 4px !important; padding: 0 10px !important;
  font-size: 12px !important; font-weight: 500 !important; color: var(--admin-muted-fg) !important;
  text-transform: none !important; letter-spacing: 0 !important;
}
#view-admin .admin-tab-btn {
  display: flex; align-items: center; gap: 10px; width: 100%;
  height: 32px; min-height: 32px !important; padding: 0 10px !important;
  border: 0 !important; border-radius: var(--admin-radius-control) !important;
  background: transparent !important; box-shadow: none !important;
  color: #3F3F46 !important; font: 500 13px/1.2 var(--admin-font, Inter, sans-serif) !important;
  text-align: left; cursor: pointer; transform: none !important;
}
#view-admin .admin-tab-btn :is(i, svg) { width: 16px !important; height: 16px !important; flex-shrink: 0; color: var(--admin-muted-fg) !important; stroke-width: 2; }
#view-admin .admin-tab-btn span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#view-admin .admin-tab-btn:hover:not(.active) { background: var(--admin-muted) !important; color: var(--admin-fg) !important; }
#view-admin .admin-tab-btn.active {
  background: var(--admin-bg) !important; color: var(--admin-fg) !important;
  box-shadow: 0 0 0 1px var(--admin-border), 0 1px 2px rgba(0, 0, 0, 0.04) !important;
}
#view-admin .admin-tab-btn.active :is(i, svg) { color: var(--admin-primary) !important; }
#view-admin .admin-tab-btn::before, #view-admin .admin-tab-btn::after { display: none !important; }
#view-admin .admin-sidebar.collapsed .admin-tab-btn { justify-content: center; padding: 0 !important; }

/* Rodapé: usuário + sair */
#view-admin .adm-shell-user {
  display: flex; align-items: center; gap: 10px;
  margin: 0 !important; padding: 10px 8px 2px !important;
  border-top: 1px solid var(--admin-border) !important;
}
#view-admin .adm-shell-user .adm-stack { flex: 1; min-width: 0; gap: 0; }
#view-admin .adm-shell-user button { width: 32px !important; padding: 0 !important; background: transparent !important; border: 0 !important; box-shadow: none !important; color: var(--admin-muted-fg) !important; justify-content: center; }
#view-admin .adm-shell-user button:hover { background: var(--admin-muted) !important; color: var(--admin-fg) !important; }
#view-admin .adm-shell-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
#view-admin .admin-sidebar.collapsed .adm-shell-user { opacity: 1 !important; width: auto !important; pointer-events: auto !important; justify-content: center; padding: 10px 0 2px !important; }
#view-admin .admin-sidebar.collapsed .adm-shell-user :is(.adm-avatar, .adm-stack) { display: none; }

/* Botão de recolher */
#view-admin .admin-sidebar-collapse-btn { border-color: var(--admin-border); box-shadow: var(--admin-shadow-card); color: var(--admin-muted-fg); }

/* ---------- Barra de cima ---------- */
#view-admin .admin-topbar {
  height: 52px !important; padding: 0 32px !important; gap: 12px;
  background: rgba(255, 255, 255, 0.92) !important; backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--admin-border) !important; box-shadow: none !important;
}
#view-admin .admin-workspace-heading { display: flex; flex-direction: column; gap: 0; min-width: 0; }
#view-admin .admin-workspace-heading small { font-size: 12px !important; font-weight: 400 !important; letter-spacing: 0 !important; text-transform: none !important; color: var(--admin-muted-fg) !important; margin: 0 !important; }
#view-admin .admin-workspace-heading strong { font-size: 14px !important; font-weight: 600 !important; color: var(--admin-fg) !important; }
#view-admin .adm-shell-topbar-actions > div { border-color: var(--admin-border) !important; box-shadow: none !important; border-radius: var(--admin-radius-pill) !important; color: var(--admin-muted-fg) !important; font-weight: 500 !important; font-size: 12px !important; }
#view-admin .adm-shell-topbar-actions > button { width: 36px !important; height: 36px !important; min-width: 0 !important; min-height: 0 !important; border-radius: var(--admin-radius-control) !important; border-color: var(--admin-border) !important; box-shadow: none !important; }
#view-admin .adm-shell-menu-btn { display: none !important; order: -1; }

/* Conteúdo */
#view-admin #admin-content { padding: 28px 32px 64px !important; }
#view-admin #admin-content > .adm-page { max-width: 1240px; margin-left: auto; margin-right: auto; }

/* ---------- Celular: menu vira gaveta pela esquerda ---------- */
#view-admin .adm-shell-scrim { display: none; }
@media (max-width: 768px) {
  #view-admin .admin-topbar { display: flex !important; height: 52px !important; padding: 0 8px !important; justify-content: flex-start !important; }
  #view-admin .adm-shell-menu-btn { display: inline-flex !important; width: 40px; height: 40px; }
  #view-admin .admin-workspace-heading { flex: 1; }
  #view-admin .admin-workspace-heading small { display: none; }
  #view-admin .adm-shell-topbar-actions > div { display: none !important; }
  #view-admin .admin-sidebar-wrapper { position: fixed; z-index: 1001; top: 0; bottom: 0; left: 0; transform: translateX(-105%); transition: transform 0.26s cubic-bezier(0.2, 0.8, 0.2, 1); }
  #view-admin .admin-sidebar { display: flex !important; height: 100%; width: 280px; min-width: 280px; max-width: 280px; background: var(--admin-bg) !important; box-shadow: var(--admin-shadow-overlay) !important; padding-top: calc(16px + env(safe-area-inset-top)) !important; }
  #view-admin .admin-sidebar.collapsed { width: 280px; min-width: 280px; max-width: 280px; }
  #view-admin.adm-nav-open .admin-sidebar-wrapper { transform: none; }
  #view-admin.adm-nav-open .adm-shell-scrim { display: block; position: fixed; inset: 0; z-index: 1000; background: rgba(9, 9, 11, 0.45); animation: admShellFade 0.2s ease; }
  #view-admin #admin-bottom-tab-bar { display: none !important; }
  #view-admin #admin-content { padding: 16px 16px calc(48px + env(safe-area-inset-bottom)) !important; }
}
@keyframes admShellFade { from { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  #view-admin .admin-sidebar-wrapper { transition: none; }
  #view-admin.adm-nav-open .adm-shell-scrim { animation: none; }
}
@media (max-width: 768px) {
  /* style.css escondia no celular todos os itens menos a Visão Geral (a navegação era a barra de baixo) */
  #view-admin .admin-sidebar .admin-tab-btn:not([hidden]) { display: flex !important; }
  #view-admin .admin-section-search kbd { display: none; }
  #view-admin .admin-section-search input { padding-right: 12px !important; font-size: 16px !important; }
}