/* app/css/shell.css
   A barra do alto, a barra de baixo do telefone e a moldura da página. */

/* ── Barra do alto ────────────────────────────────────────────────────── */
.dm-app { min-height: 100vh; display: flex; flex-direction: column; }
.dm-topbar {
  display: flex; align-items: center; gap: var(--dm-sp-5);
  padding: 0 var(--dm-sp-6); min-height: 56px;
  background: var(--dm-surface); border-bottom: 1px solid var(--dm-border);
  position: sticky; top: 0; z-index: 10;
  /* Plano B 5: sem espaço nem para as iniciais, a pessoa desce para outra linha. */
  flex-wrap: wrap; row-gap: 0;
}
.dm-brand { flex: none; }
.dm-brand-name { font-weight: var(--dm-fw-titulo); font-size: var(--dm-fs-md); color: var(--dm-primary); letter-spacing: 0.2px; }
.dm-topbar-right { margin-left: auto; display: flex; align-items: center; gap: var(--dm-sp-2); min-width: 0; }

/* A pessoa: o nome encolhe (componentes/nome.js), o papel corta com reticências. */
.dm-user {
  all: unset; box-sizing: border-box; cursor: pointer; min-width: 4em; max-width: 16rem;
  display: flex; flex-direction: column; align-items: flex-end; line-height: 1.2;
  padding: var(--dm-sp-1) var(--dm-sp-2); border-radius: var(--dm-radius-sm);
}
.dm-user:hover { background: var(--dm-surface-2); }
.dm-user--teste, .dm-user--teste:hover { background: var(--dm-warn-bg); box-shadow: inset 0 0 0 1px var(--dm-warn); }
.dm-user:focus-visible { outline: 2px solid var(--dm-primary); }
.dm-user-name, .dm-user-role { display: block; max-width: 100%; overflow: hidden; white-space: nowrap; }
.dm-user-name { font-weight: var(--dm-fw-forte); font-size: var(--dm-fs-md); }
.dm-user-role { font-size: var(--dm-fs-sm); color: var(--dm-text-3); text-overflow: ellipsis; }

/* O menu do usuário (dentro de .dm-menu, componentes/menu.js). */
.dm-menu-usuario { display: grid; gap: var(--dm-sp-3); }
.dm-menu-quem { overflow-wrap: anywhere; }
.dm-menu-secao { border-top: 1px solid var(--dm-border); padding-top: var(--dm-sp-3); display: grid; gap: var(--dm-sp-2); }
.dm-menu-secao .dm-hint, .dm-menu-quem .dm-hint { margin: var(--dm-sp-1) 0; font-size: var(--dm-fs-sm); color: var(--dm-text-3); }
.dm-papeis { display: grid; gap: var(--dm-sp-1); max-height: 14rem; overflow-y: auto; }
.dm-papel {
  all: unset; box-sizing: border-box; cursor: pointer; display: grid; gap: 2px;
  padding: var(--dm-sp-2); border-radius: var(--dm-radius-sm); font-size: var(--dm-fs-sm);
}
.dm-papel:hover, .dm-papel:focus-visible { background: var(--dm-surface-2); }
.dm-papel.dm-active { background: var(--dm-info-bg); cursor: default; }

/* ── Navegação: no alto na tela larga, embaixo e só com ícones no telefone ── */
.dm-nav { display: flex; gap: var(--dm-sp-1); }
.dm-nav a {
  display: inline-flex; align-items: center; gap: var(--dm-sp-2);
  padding: var(--dm-sp-2) var(--dm-sp-3); border-radius: var(--dm-radius-sm);
  color: var(--dm-text-2); font-weight: var(--dm-fw-medio); white-space: nowrap;
}
.dm-nav a:hover { background: var(--dm-surface-2); text-decoration: none; }
.dm-nav a.dm-active { color: var(--dm-primary); background: var(--dm-info-bg); }
.dm-nav-icone { display: none; line-height: 0; }
.dm-barra-baixo { display: none; }

/* O fim da página sobe acima do botão de feedback, fixo no canto (feedback.css). */
.dm-main { flex: 1; padding: var(--dm-sp-8) var(--dm-sp-6) calc(var(--dm-sp-6) + 4rem); }
.dm-view { max-width: 1100px; margin: 0 auto; }

@media (max-width: 760px) {
  .dm-topbar { gap: var(--dm-sp-3); padding: var(--dm-sp-2) var(--dm-sp-4); }
  .dm-nav--alto { display: none; }
  .dm-barra-baixo {
    display: block; position: fixed; left: 0; right: 0; bottom: 0; z-index: 10;
    background: var(--dm-surface); border-top: 1px solid var(--dm-border);
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }
  .dm-nav--baixo { justify-content: space-around; }
  .dm-nav--baixo a { flex: 1; justify-content: center; padding: var(--dm-sp-3) 0; border-radius: 0; }
  .dm-nav--baixo .dm-nav-icone { display: inline-block; }
  .dm-nav--baixo .dm-nav-texto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .dm-user { max-width: 11rem; }
  /* Plano B do cabeçalho da página: o botão desce para baixo do título. */
  .dm-page-head { flex-wrap: wrap; align-items: flex-start; }
  .dm-main { padding: var(--dm-sp-5) var(--dm-sp-4) var(--dm-sp-12); }
  /* A barra de baixo não pode cobrir o fim da página. */
  .dm-com-barra .dm-main { padding-bottom: calc(var(--dm-sp-12) + var(--dm-sp-8) + 3.5rem); }
}