/* app-shell.css — layout raiz: sidebar + cabeçalho + área principal */
* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
  font-family: var(--font-family);
  color: var(--text-primary);
  /* fundo do CANVAS geral, fora do contêiner centralizado — não confundir
     com --surface-page, usado dentro do contêiner (revisão visual 2) */
  background: var(--page-canvas, var(--surface-page));
}

/* Contêiner central do mockup: margem externa, cantos arredondados, sombra
   suave, sidebar e conteúdo presos ao mesmo contêiner. Só em desktop — em
   tablet/celular a apresentação volta a ser full-bleed (revisão visual 2). */
.page-frame {
  min-height: 100vh;
  display: flex;
  justify-content: center;
}

body {
  font-size: var(--font-size-md);
  line-height: 1.45;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--brand-cyan);
  color: #052027;
  padding: var(--space-2) var(--space-4);
  z-index: var(--z-modal);
  border-radius: 0 0 var(--radius-control) 0;
}
.skip-link:focus {
  left: 0;
}

.app-shell {
  display: grid;
  grid-template-columns: var(--sidebar-width) 1fr;
  min-height: 100vh;
  width: 100%;
  background: var(--surface-page);
  /* âncora do elemento óptico decorativo (revisão visual 3, item 9) — no
     canto superior direito do CONTÊINER INTEIRO (atrás do cabeçalho e do
     início do conteúdo), não mais preso ao card do cabeçalho do perfil nem
     à área de conteúdo isolada — mais perto do canto real da página, como
     pedido, e clipado pelo próprio raio arredondado do shell em desktop
     (.app-shell tem overflow:hidden só em >900px, ver media query abaixo). */
  position: relative;
}

/* Fica fora do fluxo do grid em qualquer largura — sem isso, o div do scrim
   (presente no DOM mesmo fechado) ocupa a 1ª coluna do grid em telas largas
   e empurra a sidebar/conteúdo para a posição errada. Bug real encontrado em
   teste com Playwright em 1440×900 — corrigido aqui, não só documentado. */
.app-shell__scrim {
  display: none;
}

.app-shell__main {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.app-shell__content {
  padding: var(--space-5);
  flex: 1;
  min-width: 0;
}

/* breakpoint confirmado no mockup: 900px */
@media (max-width: 900px) {
  .app-shell {
    grid-template-columns: 1fr;
  }
  .sidebar {
    position: fixed;
    inset: 0 auto 0 0;
    width: min(var(--sidebar-width), 82vw);
    transform: translateX(-100%);
    transition: transform 160ms ease;
    z-index: var(--z-sidebar-mobile);
  }
  .sidebar[data-open="true"] {
    transform: translateX(0);
  }
  .app-shell__scrim {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(3, 40, 54, 0.35);
    z-index: calc(var(--z-sidebar-mobile) - 1);
  }
  .app-shell__scrim[data-open="true"] {
    display: block;
  }
  .app-shell__menu-toggle {
    display: inline-flex;
  }
}

@media (min-width: 901px) {
  .app-shell__menu-toggle {
    display: none;
  }

  /* contêiner central — só em desktop, conforme o mockup aprovado */
  .page-frame {
    padding: var(--space-6) var(--space-5);
    align-items: center;
  }
  .app-shell {
    max-width: 1400px;
    min-height: calc(100vh - (var(--space-6) * 2));
    border-radius: var(--radius-shell);
    box-shadow: var(--shadow-shell);
    overflow: hidden;
  }
}

/* empilhamento adicional no celular (breakpoint aproximado 640px) */
@media (max-width: 640px) {
  .app-shell__content {
    padding: var(--space-3);
  }
}