/* =============================================================================
   HelpRex Agent - UI-03: barra do topo na pele do trilho (pedido do Owner, 08/10: a top bar deve ter o mesmo estilo da
   sidebar). Arquivo proprio: hx-topbar.css (folhas 43, 45 e 52) nao e tocado. Carrega DEPOIS de hx-topbar.css e de
   hx-navigation.css em _Layout.cshtml e _LayoutEmbed.cshtml, e antes dos estilos de pagina.
   So a barra do topo de 48 px (.hx-topbar: rotina, Configuracoes, Caixa e Novo ticket) usa a pele do trilho (.hx-rail),
   formando uma moldura em L. O cabecalho do ticket (.hx-ws-top) continua CLARO (decisao do Owner, 08/10), como a faixa de
   filtros, as abas de Configuracoes (.hx-topbar-tabs) e o conteudo. Em Configuracoes a faixa escura e continua: o titulo
   do menu interno (.hx-settings-nav-title, onde esta "Configuracoes") tem os mesmos 48 px e a mesma pele; a busca
   "Buscar configuracao" fica abaixo da faixa, no menu claro, e nao muda. A cor vem dos MESMOS tokens --hx-rail-* de hx.css
   (fonte unica; a pele e literal nos quatro presets e o accent segue --hx-accent, como no trilho).
   Como funciona: o escopo REMAPEIA os tokens claros (--hx-ink, --hx-paper, --hx-line...) para a pele escura, entao toda
   regra existente que os usa (botoes, abas, contadores, "Ao vivo", crumb, avisos de salvamento) ja nasce certa, inclusive
   as acoes de pagina de cada tela. So o que usa cor literal ou token legado (site.css) ganha regra propria abaixo.
   Os popups (menus, dialogos) voltam ao tema claro: --hx-bar-* guarda na raiz os valores claros originais.
   Contrastes sobre --hx-rail-bg (medidos em tests/ui03-topo-escuro.test.js nos quatro presets): texto >= 4,5:1,
   borda de controle e anel de foco >= 3:1. Botao primario = creme (--hx-rail-strong) com tinta escura (14,8:1), nunca
   o accent: o accent azul do preset (2,9:1) nao chega a 3:1 como borda sobre o fundo escuro.
   ============================================================================= */
:root {
    --hx-bar-paper: var(--hx-paper);
    --hx-bar-surface: var(--hx-surface);
    --hx-bar-sunken: var(--hx-sunken);
    --hx-bar-line: var(--hx-line);
    --hx-bar-line2: var(--hx-line2);
    --hx-bar-ink: var(--hx-ink);
    --hx-bar-ink2: var(--hx-ink2);
    --hx-bar-ink3: var(--hx-ink3);
    --hx-bar-mute: var(--hx-mute);
    --hx-bar-faint: var(--hx-faint);
    --hx-bar-brand: var(--hx-brand);
    --hx-bar-brand-deep: var(--hx-brand-deep);
    --hx-bar-red: var(--hx-red);
}

.hx-topbar {
    color-scheme: dark;
    --hx-paper: var(--hx-rail-bg);
    --hx-surface: var(--hx-rail-bg);
    --hx-sunken: var(--hx-rail-line);
    --hx-line: var(--hx-rail-faint);
    --hx-line2: var(--hx-rail-sub);
    --hx-ink: var(--hx-rail-strong);
    --hx-ink2: var(--hx-rail-name);
    --hx-ink3: var(--hx-rail-text);
    --hx-mute: var(--hx-rail-muted);
    --hx-faint: var(--hx-rail-sub);
    --hx-brand: var(--hx-rail-link);
    --hx-brand-deep: var(--hx-rail-link);
    --hx-red: var(--hx-rail-danger);
    background: var(--hx-rail-bg);
    border-bottom-color: var(--hx-rail-edge);
    color: var(--hx-rail-text);
}
.hx-topbar .hx-topbar-sep { background: var(--hx-rail-chip); }

/* Popups dentro da barra (dialogo de Salvar visao e menus): voltam ao tema claro. */
.hx-topbar :is(.hx-menu, .hx-ws-menu, .hx-followup-popover, dialog, [role="menu"], [role="dialog"], [popover]) {
    color-scheme: light;
    --hx-paper: var(--hx-bar-paper);
    --hx-surface: var(--hx-bar-surface);
    --hx-sunken: var(--hx-bar-sunken);
    --hx-line: var(--hx-bar-line);
    --hx-line2: var(--hx-bar-line2);
    --hx-ink: var(--hx-bar-ink);
    --hx-ink2: var(--hx-bar-ink2);
    --hx-ink3: var(--hx-bar-ink3);
    --hx-mute: var(--hx-bar-mute);
    --hx-faint: var(--hx-bar-faint);
    --hx-brand: var(--hx-bar-brand);
    --hx-brand-deep: var(--hx-bar-brand-deep);
    --hx-red: var(--hx-bar-red);
    color: var(--hx-bar-ink2);
}

/* Foco e links: o anel global (--hx-accent, 4,2:1 no light e 2,9:1 no blue) e o --focus do preset (escuro) nao
   chegam a 3:1 sobre o fundo escuro; o anel claro tem 7,3:1. O hover global de <a> (#8E3F19) some no escuro.
   As regras de aparencia abaixo ficam FORA dos popups (mesma lista do reset acima, o proprio popup e tudo dentro dele):
   no dialogo e nos menus brancos o anel claro daria 2,04:1 e o botao desabilitado viraria uma pilula escura. O sufixo
   :where(:not(...)) tem especificidade zero: nao muda a ordem de nenhuma regra. */
.hx-topbar :focus-visible:where(:not(:is(
    .hx-menu, .hx-ws-menu, .hx-followup-popover, dialog, [role="menu"], [role="dialog"], [popover],
    .hx-menu *, .hx-ws-menu *, .hx-followup-popover *, dialog *, [role="menu"] *, [role="dialog"] *, [popover] *
))) { outline: 2px solid var(--hx-rail-link); outline-offset: 2px; }
:where(.hx-topbar) a:hover:where(:not(:is(
    .hx-menu, .hx-ws-menu, .hx-followup-popover, dialog, [role="menu"], [role="dialog"], [popover],
    .hx-menu *, .hx-ws-menu *, .hx-followup-popover *, dialog *, [role="menu"] *, [role="dialog"] *, [popover] *
))) { color: var(--hx-rail-strong); }

/* Voltar: o mesmo hover dos itens do trilho (fundo --hx-rail-line, texto forte). */
.hx-topbar .hx-topbar-back:hover { background: var(--hx-rail-line); color: var(--hx-rail-strong); }

/* Botoes com cor literal (#6B645C) em hx.css: texto do trilho; hover com o fundo de hover do trilho.
   Os estados ativos (.hx-btn-30.is-active e .hx-btn-28.is-on) ficam com a propria regra (creme com tinta escura e borda
   creme com texto creme, ja certos pelos tokens remapeados). */
.hx-topbar :is(.hx-btn-secondary, .hx-btn-28:where(:not(.is-on)), .hx-btn-more, .hx-btn-30:where(:not(.is-active)), .hx-btn-29):where(:not(:is(
    .hx-menu, .hx-ws-menu, .hx-followup-popover, dialog, [role="menu"], [role="dialog"], [popover],
    .hx-menu *, .hx-ws-menu *, .hx-followup-popover *, dialog *, [role="menu"] *, [role="dialog"] *, [popover] *
))) { color: var(--hx-rail-text); }
.hx-topbar :is(.hx-btn-secondary, .hx-btn-28:where(:not(.is-on)), .hx-btn-more, .hx-btn-30:where(:not(.is-active)), .hx-btn-29):hover:where(:not(:is(
    .hx-menu, .hx-ws-menu, .hx-followup-popover, dialog, [role="menu"], [role="dialog"], [popover],
    .hx-menu *, .hx-ws-menu *, .hx-followup-popover *, dialog *, [role="menu"] *, [role="dialog"] *, [popover] *
))) {
    background: var(--hx-rail-line);
    color: var(--hx-rail-strong);
}
/* Primario desabilitado: o cinza claro de hx.css viraria uma mancha clara na barra. */
.hx-topbar :is(.hx-btn-primary:disabled, .hx-save-btn:disabled, .hx-save-btn.is-idle):where(:not(:is(
    .hx-menu, .hx-ws-menu, .hx-followup-popover, dialog, [role="menu"], [role="dialog"], [popover],
    .hx-menu *, .hx-ws-menu *, .hx-followup-popover *, dialog *, [role="menu"] *, [role="dialog"] *, [popover] *
))) {
    background: var(--hx-rail-raised);
    color: var(--hx-rail-muted);
}

/* Botoes legados (site.css, tokens proprios): primario = creme, os demais = contorno do trilho. */
.hx-topbar-actions .btn { color: var(--hx-rail-text); }
.hx-topbar-actions .btn:hover { background: var(--hx-rail-line); color: var(--hx-rail-strong); }
.hx-topbar-actions .btn:is(.accent, .btn-primary, .primary) {
    background: var(--hx-rail-strong);
    border-color: var(--hx-rail-strong);
    color: var(--hx-bar-ink);
}
.hx-topbar-actions .btn:is(.accent, .btn-primary, .primary):hover {
    background: var(--hx-rail-name);
    border-color: var(--hx-rail-name);
    color: var(--hx-bar-ink);
}
.hx-topbar-actions .btn:is(.ghost, .btn-secondary, .btn-outline, .danger, .btn-danger) { background: transparent; border-color: var(--hx-rail-faint); }
.hx-topbar-actions .btn:is(.ghost, .btn-secondary, .btn-outline):hover { background: var(--hx-rail-line); border-color: var(--hx-rail-sub); color: var(--hx-rail-strong); }
.hx-topbar-actions .btn:is(.danger, .btn-danger) { color: var(--hx-rail-danger); }
.hx-topbar-actions .btn:is(.danger, .btn-danger):hover { background: var(--hx-rail-line); border-color: var(--hx-rail-danger); color: var(--hx-rail-danger); }
.hx-topbar-actions .btn:disabled { opacity: .5; }

/* Disponibilidade na barra da Equipe (hx-team.css usa tokens legados). */
.hx-topbar-actions .avl-label { color: var(--hx-rail-text); }
.hx-topbar-actions .avl-control .avl-select {
    background-color: var(--hx-rail-raised);
    border-color: var(--hx-rail-faint);
    color: var(--hx-rail-strong);
    /* A seta do select (site.css) e um SVG de traco #6B6B72 (2,21:1 sobre --hx-rail-raised): aqui e um caret de dois
       gradientes na cor do texto do trilho (6,16:1), preso ao token. */
    background-image: linear-gradient(45deg, transparent 50%, var(--hx-rail-text) 50%), linear-gradient(135deg, var(--hx-rail-text) 50%, transparent 50%);
    background-position: calc(100% - 17px) calc(50% + 1px), calc(100% - 12px) calc(50% + 1px);
    background-size: 5px 5px, 5px 5px;
    background-repeat: no-repeat;
}

/* ----- Caixa: abas, contadores, Arquivados/Spam, "Ao vivo" ----- */
/* Aba ativa e hover como os itens do trilho (fundo --hx-rail-raised e texto forte; hover com --hx-rail-line); o
   sublinhado em accent saiu: o accent do preset azul tem 2,9:1 sobre o fundo escuro. O accent fica na contagem da aba
   ativa, como no item ativo do trilho (.hx-rail-item.is-active .hx-rail-item-count). */
.hx-inbox-bar .hx-view { height: 30px; border-bottom: 0; border-radius: 7px; color: var(--hx-rail-text); }
.hx-inbox-bar .hx-view:hover { background: var(--hx-rail-line); color: var(--hx-rail-strong); }
.hx-inbox-bar .hx-view.is-active { background: var(--hx-rail-raised); color: var(--hx-rail-strong); }
.hx-inbox-bar .hx-view-count { background: var(--hx-rail-raised); color: var(--hx-rail-muted); }
.hx-inbox-bar .hx-view.is-active .hx-view-count { background: var(--hx-accent); color: var(--hx-accent-ink); }
.hx-inbox-bar .hx-saved-view-delete { color: var(--hx-rail-muted); }
.hx-inbox-bar .hx-saved-view-delete:hover { color: var(--hx-rail-strong); }
.hx-inbox-bar .hx-inbox-bin { color: var(--hx-rail-text); }
.hx-inbox-bar .hx-inbox-bin:hover { background: var(--hx-rail-line); color: var(--hx-rail-strong); }
.hx-inbox-bar .hx-inbox-bin.is-active { background: var(--hx-rail-raised); color: var(--hx-rail-strong); }
.hx-inbox-bar .hx-live-label { color: var(--hx-rail-text); }
.hx-inbox-bar .hx-live.is-offline .hx-live-label { color: var(--hx-rail-danger); }

/* ----- Configuracoes: a faixa escura continua no topo do menu interno -----
   O titulo do menu (onde esta "Configuracoes") ocupa a largura toda do menu com os mesmos 48 px da barra (a borda de baixo
   e o filete --hx-rail-edge, como a da barra) e a mesma pele. A busca fica logo abaixo, no menu claro (com a margem de 10 px
   que o cabecalho tinha). O filete claro entre o menu e a pagina (border-right do menu) e coberto neste trecho para a faixa
   nao ser cortada. Na pagina inicial (.is-home) o titulo nao ganha destaque: a faixa fica uniforme. No acesso negado nao ha
   barra, entao o menu fica como estava. */
.hx-settings-nav:not([data-settings-nav-denied="true"]) .hx-settings-nav-head { padding: 0 0 8px; }
.hx-settings-nav:not([data-settings-nav-denied="true"]) .hx-settings-nav-title {
    position: relative;
    height: 48px;
    min-height: 48px;
    padding: 0 18px;
    border-radius: 0;
    border-bottom: 1px solid var(--hx-rail-edge);
    background: var(--hx-rail-bg);
    color: var(--hx-rail-strong);
}
.hx-settings-nav:not([data-settings-nav-denied="true"]) .hx-settings-nav-title::after {
    content: "";
    position: absolute;
    top: 0;
    right: -1px;
    bottom: -1px;
    width: 1px;
    background: var(--hx-rail-bg);
}
.hx-settings-nav:not([data-settings-nav-denied="true"]) a.hx-settings-nav-title:hover { background: var(--hx-rail-line); color: var(--hx-rail-strong); }
.hx-settings-nav:not([data-settings-nav-denied="true"]) .hx-settings-nav-title.is-home { background: var(--hx-rail-bg); box-shadow: none; }
.hx-settings-nav:not([data-settings-nav-denied="true"]) .hx-settings-nav-title:focus-visible { outline: 2px solid var(--hx-rail-link); outline-offset: -4px; }
.hx-settings-nav:not([data-settings-nav-denied="true"]) .hx-settings-nav-search { width: auto; margin: 0 10px; }