/* app/assets/stylesheets/03_layout.css — shell e navegacao nas duas posturas */

.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--s4);
}

/* ---- default: postura transitoria (celular) ---- */

.shell__main {
  padding-block: var(--s5) calc(var(--s8) + var(--s6));  /* espaco para a barra inferior */
}
/* Login e recuperacao de senha sao transitorias: uma coluna, centrada, nada mais na tela.
   32rem e a largura que `.form` ja declara — nenhuma medida nova entra por isto. */
.shell--bare .shell__main { padding-block: var(--s7); }
.shell--bare .container { max-width: 32rem; }

.nav {
  position: fixed;
  inset: auto 0 0 0;
  z-index: 10;
  display: flex;
  align-items: stretch;
  background: var(--surface);
  border-top: 1px solid var(--line);
  box-shadow: var(--shadow-overlay);
}
.nav__brand { display: none; }

.nav__primary { display: flex; flex: 1; }

/* Na transitoria o icone fica ACIMA do rotulo: empilhado, o alvo de 44px cabe os dois sem
   espremer a largura da coluna, que na barra de cinco itens e o recurso escasso. */
.nav__link {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--s1);
  min-height: 44px;          /* alvo de toque da postura transitoria */
  flex: 1;
  padding: var(--s2) var(--s3);
  font-size: var(--t1);
  color: var(--ink-muted);
  text-decoration: none;
}
.nav__link .icon { font-size: var(--t5); }
.nav__link--active { color: var(--ink); font-weight: 600; }

/* O <details> so embrulha o botao "Mais": o painel abaixo e um irmao dele no
   DOM, nao um filho. Um <details> fechado esconde o proprio conteudo via
   ::details-content (content-visibility: hidden), pseudo-elemento recente
   demais (Chrome 131+, Safari 18.4+) para o chassi depender dele — por isso
   o painel mora fora do <details> e quem mostra/esconde ele e o seletor de
   irmao com [open] logo abaixo, que funciona desde sempre. */
.nav__more { display: flex; }
.nav__more > summary {
  list-style: none;
  cursor: pointer;
  min-width: 4.5rem;
  gap: var(--s1);
}
.nav__more > summary::-webkit-details-marker { display: none; }
/* A setinha saiu quando o icone entrou: o ellipsis ja diz "tem mais aqui", e empilhada
   sob o rotulo ela deixava o "Mais" uma linha mais alto que os quatro vizinhos. O estado
   aberto passa a ser peso e cor, que e a regra 3 — e nao um glifo a mais. */
.nav__more[open] > summary { color: var(--ink); font-weight: 600; }

.nav__more-panel {
  display: none;
  position: absolute;
  right: 0;
  bottom: 100%;
  min-width: 10rem;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-overlay);
  padding: var(--s2);
}
.nav__more[open] + .nav__more-panel { display: flex; }
.nav__more-panel .nav__link { flex-direction: row; justify-content: flex-start; font-size: var(--t3); }

.nav__signout {
  width: 100%;
  background: none;
  border: 0;
  text-align: left;
  color: var(--ink-muted);
}

/* ---- >=48rem: postura soberana (notebook) ---- */

@media (min-width: 48rem) {
  .shell { display: flex; min-height: 100vh; }
  .shell--bare { display: block; }

  .nav {
    position: sticky;
    top: 0;
    inset-inline: auto;
    align-self: flex-start;
    height: 100vh;
    width: 14rem;
    flex-direction: column;
    padding: var(--s5) var(--s3);
    border-top: 0;
    border-right: 1px solid var(--line);
    box-shadow: none;
  }

  .nav__brand {
    display: block;
    font-family: var(--font-display);
    font-size: var(--t5);
    line-height: 1.2;
    color: var(--ink);
    padding-inline: var(--s3);
    margin-bottom: var(--s5);
  }

  .nav__primary { flex: 0; flex-direction: column; }

  /* Na soberana volta a ser linha: icone à esquerda do rotulo, como lista de destinos. */
  .nav__link {
    flex-direction: row;
    justify-content: flex-start;
    gap: var(--s2);
    min-height: 0;
    flex: none;
    padding: var(--s2) var(--s3);
    font-size: var(--t3);
    border-left: 2px solid transparent;
    border-radius: 0 var(--radius) var(--radius) 0;
  }
  .nav__link .icon { font-size: var(--t4); }
  .nav__link--active { border-left-color: var(--accent); background: color-mix(in srgb, var(--accent) 8%, transparent); }

  /* Sem menu "mais" na soberana: o <details> some por inteiro (so servia ao
     toggle da transitoria) e o painel, ja irmao dele no DOM, entra no fluxo
     normal da coluna — os seis destinos ficam sempre visiveis. */
  .nav__more { display: none; }
  .nav__more-panel {
    display: flex;
    margin-top: auto;
    position: static;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    padding: 0;
    background: none;
  }

  .shell__main { flex: 1; min-width: 0; padding-block: var(--s6); }
}