/* ===================================================================
   Barra de topo (header) dos paineis com sidebar.
   Ancora o sino e o botao de tema ao conteudo: vive como primeiro filho
   de .content-area (com utilitario .p-4 = 1.5rem),
   por isso usa margens negativas para ocupar a largura total da area.
   Herda a paleta/tema via tokens de style.css.
   =================================================================== */

.app-topbar {
  position: sticky;
  top: 0;
  /* Acima do conteudo, no mesmo nivel do antigo sino fixo (1030);
     abaixo de modais (1055), toasts (1090) e tooltips do Bootstrap. */
  z-index: 1030;

  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;

  /* Cancela o padding .p-4 (1.5rem) do wrapper para encostar nas bordas,
     e recria o respiro abaixo da barra. */
  margin: -1.5rem -1.5rem 1.5rem;
  padding: 0.6rem 1.5rem;
  min-height: 60px;

  background-color: var(--bg-elevated);
  border-bottom: 1px solid var(--border-color);
  box-shadow: var(--shadow-2);
}

/* Marca / contexto a esquerda */
.app-topbar-brand {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  min-width: 0;
  font-weight: 600;
  font-size: 1.05rem;
  color: var(--text-main);
}

.app-topbar-brand i {
  color: var(--link);
  font-size: 1.2rem;
  flex-shrink: 0;
}

.app-topbar-brand span {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Grupo de acoes a direita (sino + tema) */
.app-topbar-actions {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-shrink: 0;
}

/* Dentro da topbar o sino nao precisa de sombra/elevacao propria:
   a propria barra ja eleva o conjunto. */
.app-topbar .nav-notificacoes .sino-btn {
  box-shadow: none;
}

/* Botao de tema "irmao" do sino: mesmo desenho para formar um grupo coeso.
   (Nao usa a classe .theme-toggle-btn, que e position:fixed no canto.)
   Sem escopo em .app-topbar porque tambem e usado na navbar de
   Tutoriais/Formacao (via _topbar_actions.html). */
.theme-toggle-inline {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  /* Mesmo circulo perfeito do sino (dimensoes iguais). */
  width: 2.5rem;
  height: 2.5rem;
  aspect-ratio: 1 / 1;
  padding: 0;
  border-radius: 50%;
  background-color: var(--bg-elevated);
  border: 1px solid var(--border-color);
  color: var(--text-muted);
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}

.theme-toggle-inline:hover {
  background-color: color-mix(in srgb, var(--link) 10%, transparent);
  color: var(--link);
  box-shadow: var(--shadow-2);
}

.theme-toggle-inline i {
  font-size: 1.25rem;
  line-height: 1;
}

/* Com a sidebar recolhida (desktop), o botao flutuante "abrir menu" aparece
   no canto superior esquerdo (position:fixed). Damos folga a esquerda da
   topbar para que a marca nao fique escondida sob esse botao. */
@media (min-width: 992px) {
  .content-area.full .app-topbar {
    padding-left: 4.5rem;
  }
}

/* Telas pequenas: a navbar mobile ja exibe a marca, entao encurtamos o brand
   e garantimos que o dropdown do sino nao estoure a largura da viewport. */
@media (max-width: 575.98px) {
  .app-topbar-brand {
    font-size: 0.95rem;
  }

  /* O dropdown fica ancorado a direita do sino (right: 0). Como o sino nao
     encosta na borda da viewport (ha o botao de tema a sua direita), manter
     apenas a largura reduzida ainda faria o dropdown estourar pela esquerda
     e cortar o conteudo. Aqui o prendemos a viewport (position: fixed) com
     folga simetrica nas duas bordas, ocupando a largura total disponivel. */
  .app-topbar .notificacoes-dropdown {
    position: fixed;
    top: 4.25rem;
    left: 0.75rem;
    right: 0.75rem;
    width: auto;
    max-width: none;
  }
}