/* ==========================================================================
   App Header — barra fixa compartilhada (Conselho Jedi Roadmaps)
   Sticky top ~56px, mesmo fundo/borda em todas as páginas (tokens em variables.css).
   Layout: ESQUERDA [← Hub · divisória · ícone+título/subtítulo]
           DIREITA  [ações · pill de sync · avatar (dropdown)]  (avatar por último)
   ========================================================================== */
/* #app-header é uma tag <header> → herda o header{} antigo (navigation.css:
   padding 30px 0 + margin-bottom 30px + border-bottom). Neutraliza o wrapper pra
   sobrar SÓ a .ah-bar (52px, com seu próprio border-bottom) = uma linha só. */
#app-header {
    position: sticky; top: 0; z-index: 900;
    padding: 0; margin: 0; border: 0; text-align: left;
}

.ah-bar {
    display: flex;
    /* nowrap: a barra NÃO quebra pra 2ª linha — a zona central (flex:1; min-width:0;
       overflow-x:auto) é espremida, o overflow aparece e o fitHeaderTabs aplica o
       icons-only. Com wrap, ela envolvia antes e o overflow nunca era detectado. */
    flex-wrap: nowrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-md);
    width: 100%;               /* preenche o header (senão dimensiona pelo conteúdo ~1500px */
    box-sizing: border-box;    /*  e o avatar não vai pra borda direita) */
    min-height: 52px;          /* min (não height) pra crescer quando as abas quebram */
    padding: 0 var(--space-lg);
    background: var(--bg-card-dark);
    border-bottom: 1px solid var(--border-color);
    backdrop-filter: blur(8px);
}

.ah-left, .ah-right { display: flex; align-items: center; gap: var(--space-sm); min-width: 0; }
.ah-left  { order: 1; }
.ah-right { order: 3; flex: none; }

/* --- Zona central: abas adotadas (mesmo nó do tabs.js, só reposicionado) --- */
.ah-center {
    order: 2;
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    justify-content: center;
    overflow-x: auto;          /* scroll horizontal se as abas não couberem (mobile) */
}
.ah-center .tabs { margin: 0; gap: 6px; flex-wrap: nowrap; }
.ah-center .tab  { padding: 6px 10px; font-size: .78rem; white-space: nowrap; }
/* /costs usa .tabs-container/.tab-btn (não .tabs/.tab) — mesmo encolhimento no header */
.ah-center .tabs-container { display: flex; margin: 0; gap: 6px; flex-wrap: nowrap; }
.ah-center .tab-btn { padding: 6px 10px; font-size: .78rem; white-space: nowrap; }

/* Colapso responsivo das abas (disparado por JS via overflow, não breakpoint fixo):
   quando falta largura, mostra SÓ o ícone (emoji) e some o texto → cabe numa linha só. */
.ah-tab-ico, .tab-ico { display: inline-flex; align-items: center; }
.tab-label { margin-left: 6px; }
.ah-bar.icons-only .tab-label { display: none; }
.ah-bar.icons-only .tab,
.ah-bar.icons-only .tab-btn { padding: 6px 9px; }

/* --- Esquerda: voltar + marca --- */
.ah-back {
    color: var(--text-secondary);
    text-decoration: none;
    font-size: var(--font-size-sm);
    padding: 6px 10px;
    border-radius: var(--radius-md);
    white-space: nowrap;
    transition: color .2s, background .2s;
}
.ah-back:hover { color: var(--color-blue); background: rgba(255, 255, 255, .05); }

.ah-divider { width: 1px; height: 24px; background: var(--border-color); flex: none; }

.ah-brand { display: flex; align-items: center; gap: var(--space-sm); min-width: 0; }
.ah-icon { font-size: 1.25rem; line-height: 1; flex: none; }
.ah-titles { display: flex; flex-direction: column; min-width: 0; line-height: 1.15; }
.ah-title {
    color: var(--color-blue);
    font-weight: 600;
    font-size: var(--font-size-lg);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ah-subtitle {
    color: var(--text-secondary);
    font-size: var(--font-size-xs);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* --- Direita: ações --- */
.ah-actions { display: flex; align-items: center; gap: var(--space-xs); }
.ah-action {
    font-family: inherit;
    font-size: var(--font-size-sm);
    cursor: pointer;
    padding: 5px 14px;
    border-radius: var(--radius-md);
    border: 1px solid var(--border-color);
    background: var(--bg-card-solid);
    color: var(--text-primary);
    white-space: nowrap;
    transition: filter .2s, border-color .2s;
}
.ah-action:hover { filter: brightness(1.15); }
.ah-action-danger  { border-color: #7a3b3b; color: #ef9a9a; background: rgba(229, 115, 115, .12); }
.ah-action-primary { border-color: var(--color-blue); color: var(--color-blue); background: rgba(100, 181, 246, .12); }

/* pill de sync — reusa .sync-indicator (definido na página); aqui só garante o respiro */
.ah-right .sync-indicator { flex: none; }

/* --- Avatar + dropdown (uma implementação só do menu do usuário) --- */
.ah-user { position: relative; flex: none; }
.ah-user-btn {
    display: flex; align-items: center; gap: 8px;
    cursor: pointer;
    padding: 3px 10px;
    border-radius: var(--radius-full);
    background: var(--bg-card-solid);
    border: 1px solid var(--border-color);
    color: var(--text-primary);
    font-family: inherit;
    transition: border-color .2s, background .2s;
}
.ah-user-btn:hover { border-color: var(--color-blue); }
.ah-avatar { display: inline-flex; flex: none; }
.ah-avatar-img { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; }
.ah-avatar-initials {
    width: 28px; height: 28px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--color-blue); color: #10203a; font-size: 12px; font-weight: 700;
}
.ah-user-name {
    font-size: 13px; font-weight: 500;
    max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ah-caret { color: var(--text-muted); transition: transform .25s; flex: none; }
.ah-user.open .ah-caret { transform: rotate(180deg); }

.ah-user-menu {
    position: absolute; top: calc(100% + 8px); right: 0;
    min-width: 210px;
    background: var(--bg-card-solid);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: 6px;
    z-index: 1000;
    opacity: 0; visibility: hidden; transform: translateY(-8px);
    transition: opacity .2s, transform .2s, visibility .2s;
}
.ah-user.open .ah-user-menu { opacity: 1; visibility: visible; transform: translateY(0); }
.ah-menu-item {
    display: flex; align-items: center; gap: 10px;
    width: 100%; text-align: left;
    padding: 10px 12px;
    border-radius: var(--radius-md);
    font-size: 14px;
    color: var(--text-primary);
    text-decoration: none;
    background: none; border: none; cursor: pointer;
    font-family: inherit;
    transition: background .2s, color .2s;
}
.ah-menu-item:hover { background: rgba(255, 255, 255, .06); }
.ah-logout { color: var(--color-red); }
.ah-logout:hover { background: rgba(229, 115, 115, .12); }
.ah-menu-icon { font-size: 16px; }

/* --- Responsivo: <720px esconde subtítulo e o nome ao lado do avatar --- */
@media (max-width: 720px) {
    .ah-subtitle, .ah-user-name { display: none; }
    .ah-bar { padding: 0 var(--space-md); }
    .ah-action { padding: 7px 10px; }
}