/* Layout: menu lateral (computador) + barra superior com gaveta (celular) */
.app { min-height: 100vh; display: grid; grid-template-columns: var(--sidebar-w) 1fr; }
.sidebar { background: var(--black); color: var(--white); display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh; height: 100dvh; overflow-y: auto; overscroll-behavior: contain; }
.sidebar .brand { display: flex; align-items: center; gap: .75rem; padding: 1.25rem 1.25rem 1rem; }
.brand-logo { width: 52px; height: 52px; border-radius: 50%; object-fit: cover; flex: none; background: #000; border: 1px solid #333; }
.brand-name { font-family: var(--font-display); font-size: 1.25rem; font-weight: 700; line-height: 1.1; }
.brand-tag { font-size: .75rem; color: var(--gray-300); }
.nav { padding: .5rem .75rem 1rem; flex: 1; }
.nav-group { margin: 1rem .5rem .35rem; font-size: .8rem; color: var(--gray-500); font-weight: 700; }
.nav-item { display: flex; align-items: center; gap: .7rem; padding: .65rem .75rem; border-radius: var(--radius-sm); color: var(--gray-200); text-decoration: none; min-height: 44px; }
a.nav-item:hover { background: #1e1e1e; }
a.nav-item[aria-current="page"] { background: var(--gray-300); color: var(--black); font-weight: 700; }
.nav-item.is-disabled { color: var(--gray-500); cursor: not-allowed; }
.nav-badge { margin-left: auto; font-size: .7rem; padding: .1rem .5rem; border: 1px solid #444; border-radius: 99px; color: var(--gray-500); }
.nav-item svg { width: 20px; height: 20px; flex: none; }
.sidebar-foot { padding: 1rem 1.25rem calc(1.5rem + env(safe-area-inset-bottom, 0px)); border-top: 1px solid #262626; font-size: .875rem; }
.sidebar-foot .who { font-weight: 700; word-break: break-word; }
.sidebar-foot .role { color: var(--gray-300); margin-bottom: .75rem; }

.main { min-width: 0; display: flex; flex-direction: column; }
.topbar { display: none; align-items: center; gap: .75rem; background: var(--black); color: var(--white); padding: .6rem 1rem; position: sticky; top: 0; z-index: 30; padding-top: calc(.6rem + env(safe-area-inset-top, 0px)); }
.topbar .brand-logo { width: 38px; height: 38px; }
.menu-btn { background: transparent; border: 1px solid #444; color: var(--white); border-radius: var(--radius-sm); width: 44px; height: 44px; display: grid; place-items: center; cursor: pointer; }
.content { padding: 2rem 2.25rem 3rem; max-width: 1280px; width: 100%; }
.page-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1rem; margin-bottom: 1.5rem; }
.page-head p { margin: 0; color: var(--gray-700); }
.backdrop { display: none; }
.sidebar-foot .install-btn { background: transparent; color: var(--white); border: 1px solid #3a3a3a; margin-bottom: .5rem; }
.sidebar-foot .install-btn:hover { background: #1a1a1a; }
/* App instalado: respeita a área do relógio/entalhe no topo */
@media (display-mode: standalone) { .sidebar .brand { padding-top: calc(1.25rem + env(safe-area-inset-top, 0px)); } }