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

/* ── Shell ────────────────────────────────────────────────────────────── */
.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); height: 56px;
  background: var(--dm-surface); border-bottom: 1px solid var(--dm-border);
  position: sticky; top: 0; z-index: 10;
}
.dm-brand { display: flex; align-items: baseline; gap: var(--dm-sp-2); margin-right: var(--dm-sp-2); }
.dm-brand-name { font-weight: var(--dm-fw-titulo); font-size: var(--dm-fs-md); color: var(--dm-primary); letter-spacing: 0.2px; }
.dm-brand-sub { font-size: var(--dm-fs-sm); color: var(--dm-text-3); }
.dm-nav { display: flex; gap: var(--dm-sp-1); }
.dm-nav a {
  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);
}
.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-topbar-right { margin-left: auto; display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: var(--dm-sp-3); min-width: 0; }
.dm-user { display: flex; flex-direction: column; align-items: flex-end; line-height: 1.2; }
.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); }
.dm-main { flex: 1; padding: var(--dm-sp-8) var(--dm-sp-6) var(--dm-sp-12); }
.dm-view { max-width: 1100px; margin: 0 auto; }

/* ── Small screens: the topbar wraps instead of pushing the page wider than the viewport ── */
@media (max-width: 760px) {
  .dm-topbar { height: auto; flex-wrap: wrap; gap: var(--dm-sp-2) var(--dm-sp-3); padding: var(--dm-sp-3) var(--dm-sp-4); position: static; }
  .dm-brand { margin-right: 0; }
  .dm-brand-sub { display: none; }
  /* The nav WRAPS; it used to scroll sideways, which hid the last item (for the
     division, "Ajustes") with no cue that anything was there. */
  .dm-nav { order: 3; width: 100%; flex-wrap: wrap; row-gap: 2px; }
  .dm-nav a { white-space: nowrap; padding: var(--dm-sp-2) var(--dm-sp-3); }
  .dm-user-name { max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  /* 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); }
}