/* ═══════════════════════════════════════════════════════════════════════════
   TOPBAR "COCKPIT" + GROWL EM CARTÃO — Movidata
   ───────────────────────────────────────────────────────────────────────────
   Arquivo ISOLADO de propósito: tudo o que este redesign muda está aqui e
   nada foi removido de custom.css. Reverter = tirar as duas linhas de
   include do template.xhtml (ver docs/REVERT_TOPBAR_GROWL.md).

   Carregado DEPOIS de custom.css, então vence por ordem em especificidade
   igual — por isso os seletores repetem os de lá, incluindo o !important.

   Duas decisões que valem registro:

   1. A topbar continua com 70px. O tema Roma tem 70px cravado em ~8 pontos
      (topo do menu, altura da sidebar, sidebar de alertas, doc-viewer).
      Mexer na altura arrastaria todos eles; o ganho de espaço vem do
      breadcrumb, que sobe para dentro da barra.

   2. O breadcrumb não muda de lugar no DOM. Ele já era `position: fixed`
      (custom.css:2390), ancorado em top:70px — aqui vira top:0. Nenhum dos
      104 XHTMLs com <p:breadCrumb> é tocado.
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
    /* ink/slate: mesma família que sidebar.css, profile.css e topbar_cards.css */
    --tb-ink:            #0F1B2D;
    --tb-ink-deep:       #0B1220;
    --tb-line:           rgba(255, 255, 255, .07);
    --tb-fg:             #CBD5E1;   /* slate-300 — ícones em repouso */
    --tb-fg-strong:      #FFFFFF;
    --tb-fg-muted:       #94A3B8;   /* slate-400 — trilha inativa */
    --tb-fg-dim:         #64748B;   /* slate-500 — separador da trilha */
    --tb-hover:          rgba(255, 255, 255, .08);
    --tb-brand:          #5BBB5D;
    --tb-brand-600:      #3E9E41;
    /* Mesma pilha das etiquetas da sidebar. A IBM Plex não é carregada pelo
       sistema — cai no mono nativo, exatamente como o resto do chrome. */
    --tb-mono:           "IBM Plex Mono", ui-monospace, SFMono-Regular, Consolas, monospace;

    /* growl */
    --gr-surface:        #FFFFFF;
    --gr-border:         #E2E8F0;
    --gr-title:          #0F1B2D;
    --gr-text:           #64748B;
    --gr-shadow:         0 12px 28px -12px rgba(11, 24, 45, .30),
                         0 2px 6px -2px rgba(11, 24, 45, .12);
    --gr-radius:         12px;

    /* Tons semânticos. ATENÇÃO: o JSF só distingue info/warn/error/fatal, e o
       sistema usa SEVERITY_INFO para confirmação de gravação — por isso
       "info" é verde de sucesso, não azul. */
    --gr-ok:             #3E9E41;
    --gr-ok-soft:        #ECFDF5;
    --gr-warn:           #D97706;
    --gr-warn-soft:      #FFF7ED;
    --gr-err:            #DC2626;
    --gr-err-soft:       #FEF2F2;
}

/* ═══════════════════════════════════════════════════════════════
   1. TOPBAR — fundo, borda, sombra
   ═══════════════════════════════════════════════════════════════ */

/* Neutraliza a barra verde (custom.css:1119) e o truque de borda em degradê
   (custom.css:2614), que usava background-image + background-clip. */
.layout-wrapper.layout-topbar-blue .layout-topbar {
    background-color: var(--tb-ink) !important;
    background-image: none !important;
    border-bottom: 1px solid var(--tb-line) !important;
    box-shadow: 0 1px 0 rgba(11, 18, 32, .6),
                0 4px 16px rgba(11, 18, 32, .18) !important;
}

/* ── Ícones (sino, megafone, ajuda, hambúrguer) ───────────────── */
.layout-wrapper.layout-topbar-blue .layout-topbar .layout-topbar-icon {
    color: var(--tb-fg) !important;
    border-radius: 9px !important;
    transition: background-color .15s, color .15s !important;
}

.layout-wrapper.layout-topbar-blue .layout-topbar .layout-topbar-icon:hover {
    background-color: var(--tb-hover) !important;
    color: var(--tb-fg-strong) !important;
}

/* O link de Ajuda não usa .layout-topbar-icon — mesmo tratamento */
.layout-wrapper.layout-topbar-blue .layout-topbar .doc-help-btn {
    color: var(--tb-fg) !important;
    border-radius: 9px !important;
    transition: background-color .15s, color .15s !important;
}

.layout-wrapper.layout-topbar-blue .layout-topbar .doc-help-btn:hover {
    background-color: var(--tb-hover) !important;
    color: var(--tb-fg-strong) !important;
}

/* ── Logo do cliente ──────────────────────────────────────────────
   Largura limitada para que o offset do breadcrumb (item 2) seja
   determinístico — a marca de cada organização tem largura própria.
   object-fit: contain preserva a proporção; nada é cortado.           */
.layout-wrapper .layout-topbar .layout-topbar-logo img {
    max-width: 100px !important;
    object-fit: contain !important;
}

/* ── Alinhamento vertical do cluster da esquerda ──────────────────
   O tema alinha botão de menu, logo e filete por BASELINE de inline-block
   (`vertical-align: middle`), que mira a metade do x-height da fonte, não o
   centro da caixa. Com três alturas diferentes na mesma linha (botão 45px,
   logo 24px, filete 22px) o desencontro é de alguns pixels — e o breadcrumb,
   que é `position: fixed` e se centra sozinho nos 70px, não participa dessa
   conta e fica fora de registro com os três.

   A correção é dar a todos a mesma caixa e centrar por flex: a topbar tem
   70px com padding vertical de 12px, então a faixa útil é de 46px e o eixo
   fica em 35px — o mesmo eixo do breadcrumb.                           */
.layout-wrapper .layout-topbar .layout-menu-button,
.layout-wrapper .layout-topbar .layout-topbar-logo {
    height: 46px !important;
    line-height: 1 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    vertical-align: middle !important;
}

.layout-wrapper .layout-topbar .layout-topbar-logo img {
    display: block !important;
    vertical-align: middle !important;
}

/* Filete vertical separando a marca da trilha.
   align-self em vez de vertical-align: dentro do flex do logo, ele se centra
   pela caixa, não pela baseline. */
.layout-wrapper.layout-topbar-blue .layout-topbar .layout-topbar-logo::after {
    content: "";
    flex: 0 0 auto;
    align-self: center;
    width: 1px;
    height: 22px;
    margin-left: 1rem;
    background: rgba(255, 255, 255, .12);
}

/* ── Badges de sino e megafone ────────────────────────────────────
   Recorte no fundo da barra em vez de bolinha solta.                */
.layout-wrapper.layout-topbar-blue .layout-topbar .alerta-badge,
.layout-wrapper.layout-topbar-blue .layout-topbar .novidade-badge {
    border: 2px solid var(--tb-ink) !important;
    box-shadow: none !important;
}

/* ═══════════════════════════════════════════════════════════════
   2. BREADCRUMB DENTRO DA BARRA
   O componente já era fixed (custom.css:2390); muda a coordenada,
   não o DOM. Offset = 20px (padding) + 45px (botão de menu)
   + 24px (margin do logo) + 100px (teto do logo) + 17px (filete e
   respiro) ≈ 206px. O teto do logo é a reserva: marca mais estreita
   deixa folga, e é ela que precisa ser pequena.
   ═══════════════════════════════════════════════════════════════ */

.custom-breadCrumb {
    top: 0 !important;
    left: 206px !important;
    right: auto !important;
    width: auto !important;
    height: 70px !important;
    z-index: 1000 !important;          /* a topbar é 999 */
    background: transparent !important;
    box-shadow: none !important;
    border: none !important;
    border-bottom: none !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    /* A faixa cobre parte da barra; sem isto ela engoliria cliques que
       pertencem à topbar. Os links reativam o ponteiro logo abaixo. */
    pointer-events: none !important;
}

.custom-breadCrumb ol,
.custom-breadCrumb ul,
.custom-breadCrumb .ui-breadcrumb-items,
.custom-breadCrumb .ui-menuitem-link {
    pointer-events: auto !important;
}

/* O <ol> traz padding-left e margin de lista do agente do usuário; sem
   zerar, sobra um vão entre o filete e o primeiro nível da trilha. */
.custom-breadCrumb,
.custom-breadCrumb .ui-breadcrumb,
.custom-breadCrumb nav,
.custom-breadCrumb ol,
.custom-breadCrumb .ui-breadcrumb-items {
    margin: 0 !important;
    padding-left: 0 !important;
    list-style: none !important;
}

/* ── Conteúdo da trilha ───────────────────────────────────────────
   O PrimeFaces 12 renderiza <ol class="ui-breadcrumb-items">, NÃO <ul>.
   As 5 regras `.custom-breadCrumb ul li` de custom.css (separador "›",
   cor do item atual, font-size .82rem) nunca casaram com nada — o que
   se via era o tema Roma puro. Estão lá, inertes; não foram removidas
   para manter este redesign reversível por include.

   O tema usa `body .ui-breadcrumb ...` (especificidade alta), por isso
   cada declaração aqui leva !important.                               */

/* Separador: glifo chevron do tema dá lugar à barra do desenho */
.custom-breadCrumb .ui-breadcrumb-items li:not(.ui-breadcrumb-chevron)::before {
    content: "/" !important;
    font-family: var(--tb-mono) !important;
    font-size: 12.5px !important;
    font-weight: 400 !important;
    color: var(--tb-fg-dim) !important;
    margin: 0 .55rem !important;
    speak: never;
}

.custom-breadCrumb .ui-breadcrumb-items li:first-child:not(.ui-breadcrumb-chevron)::before {
    display: none !important;
}

/* Chevron como <li> próprio (markup legado) — mesmo tratamento */
.custom-breadCrumb .ui-breadcrumb-items li.ui-breadcrumb-chevron {
    margin: 0 !important;
    color: var(--tb-fg-dim) !important;
}

.custom-breadCrumb .ui-breadcrumb-items li.ui-breadcrumb-chevron::before {
    content: "/" !important;
    font-family: var(--tb-mono) !important;
    font-size: 12.5px !important;
    color: var(--tb-fg-dim) !important;
    margin: 0 .55rem !important;
}

/* Tipografia da trilha — mesma família mono das etiquetas da sidebar */
.custom-breadCrumb .ui-breadcrumb-items li .ui-menuitem-link,
.custom-breadCrumb .ui-breadcrumb-items li .ui-menuitem-link .ui-menuitem-text {
    font-family: var(--tb-mono) !important;
    font-size: 12.5px !important;
    letter-spacing: .02em !important;
    text-decoration: none !important;
}

.custom-breadCrumb .ui-breadcrumb-items li .ui-menuitem-link {
    padding: 2px 4px !important;
    margin: 0 !important;
    border-radius: 5px !important;
    background: transparent !important;
    transition: color .18s, background-color .18s !important;
}

/* Níveis anteriores */
.custom-breadCrumb .ui-breadcrumb-items li .ui-menuitem-link .ui-menuitem-text,
.custom-breadCrumb .ui-breadcrumb-items li .ui-menuitem-link .ui-menuitem-icon {
    color: var(--tb-fg-muted) !important;
}

.custom-breadCrumb .ui-breadcrumb-items li .ui-menuitem-link:hover .ui-menuitem-text,
.custom-breadCrumb .ui-breadcrumb-items li .ui-menuitem-link:hover .ui-menuitem-icon {
    color: var(--tb-fg-strong) !important;
}

.custom-breadCrumb .ui-breadcrumb-items li .ui-menuitem-link:focus {
    outline: 0 none !important;
    box-shadow: 0 0 0 2px rgba(91, 187, 93, .45) !important;
}

/* Página atual — o verde da marca na barra.
   `aria-current="page"` é emitido pelo renderer do PF 12; :last-child
   cobre o markup antigo. */
.custom-breadCrumb .ui-breadcrumb-items li[aria-current="page"] .ui-menuitem-text,
.custom-breadCrumb .ui-breadcrumb-items li[aria-current="page"] .ui-menuitem-link .ui-menuitem-text,
.custom-breadCrumb .ui-breadcrumb-items li:last-child .ui-menuitem-link .ui-menuitem-text,
.custom-breadCrumb .ui-breadcrumb-items li:last-child .ui-menuitem-link .ui-menuitem-icon,
.custom-breadCrumb .ui-breadcrumb-items li:last-child span {
    color: var(--tb-brand) !important;
    font-weight: 600 !important;
}

/* Recupera os 41px que a faixa branca ocupava.
   O padding-top: 111px é inline no template.xhtml; declaração de folha com
   !important vence declaração inline sem !important. */
.layout-main {
    padding-top: 70px !important;
}

/* Tela estreita: a trilha some antes de colidir com as ações da direita.
   A topbar tem min-width: 1000px, então este corte só alcança quem já
   estava rolando a barra horizontalmente. */
@media screen and (max-width: 1100px) {
    .custom-breadCrumb {
        display: none !important;
    }
}

/* ═══════════════════════════════════════════════════════════════
   3. GROWL — cartão com faixa semântica
   DOM do PrimeFaces 12 (growl.js):
     .ui-growl
       └ .ui-growl-item-container.ui-growl-{info|warn|error|fatal}
           └ .ui-growl-item
               ├ .ui-growl-icon-close
               ├ .ui-growl-image.ui-growl-image-{sev}   ← sprite, descartado
               └ .ui-growl-message > .ui-growl-title + <p>
   ═══════════════════════════════════════════════════════════════ */

.ui-growl {
    width: 340px !important;
    top: 86px !important;              /* abaixo da topbar de 70px */
    right: 20px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
}

.ui-growl-item-container {
    position: relative !important;
    margin: 0 !important;              /* o gap do flex faz o espaçamento */
    opacity: 1 !important;             /* o tema entregava .85 */
    filter: none !important;
    background: var(--gr-surface) !important;
    border: 1px solid var(--gr-border) !important;
    border-left: 4px solid var(--tone, var(--gr-ok)) !important;
    border-radius: var(--gr-radius) !important;
    box-shadow: var(--gr-shadow) !important;
    overflow: hidden !important;
    animation: mvdtGrowlIn .28s cubic-bezier(.16, .9, .3, 1);
}

/* Tons por severidade. SEVERITY_INFO é confirmação de gravação no sistema —
   por isso verde. */
.ui-growl-item-container.ui-growl-info  { --tone: var(--gr-ok);   --tone-soft: var(--gr-ok-soft); }
.ui-growl-item-container.ui-growl-warn  { --tone: var(--gr-warn); --tone-soft: var(--gr-warn-soft); }
.ui-growl-item-container.ui-growl-error,
.ui-growl-item-container.ui-growl-fatal { --tone: var(--gr-err);  --tone-soft: var(--gr-err-soft); }

.ui-growl-item {
    display: flex !important;
    align-items: flex-start !important;
    gap: 11px !important;
    padding: 12px 34px 12px 13px !important;   /* folga à direita para o X */
}

/* ── Ícone: o sprite PNG do tema vira um quadrado tintado com glifo ── */
.ui-growl-image {
    flex: 0 0 auto !important;
    float: none !important;
    width: 28px !important;
    height: 28px !important;
    margin: 0 !important;
    background-image: none !important;
    background-color: var(--tone-soft, var(--gr-ok-soft)) !important;
    border-radius: 8px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-family: "primeicons" !important;
    font-size: 14px !important;
    color: var(--tone, var(--gr-ok)) !important;
    speak: never;
}

.ui-growl-image::before { content: "\e909"; }              /* pi-check */
.ui-growl-image-warn::before { content: "\e922"; }         /* pi-exclamation-triangle */
.ui-growl-image-error::before,
.ui-growl-image-fatal::before { content: "\e90b"; }        /* pi-times */

/* ── Texto ────────────────────────────────────────────────────── */
.ui-growl-message {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    width: auto !important;
    float: none !important;
    padding: 0 !important;
}

.ui-growl-title {
    display: block !important;
    padding: 0 !important;
    margin: 0 !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    line-height: 1.32 !important;
    color: var(--gr-title) !important;
}

.ui-growl-message p {
    margin: 2px 0 0 !important;
    font-size: 12.5px !important;
    font-weight: 400 !important;
    line-height: 1.42 !important;
    color: var(--gr-text) !important;
    word-wrap: break-word !important;
}

/* Mensagem só com resumo: nada de espaço fantasma abaixo */
.ui-growl-message p:empty { display: none !important; }

/* ── Fechar ───────────────────────────────────────────────────── */
.ui-growl-icon-close {
    top: 8px !important;
    right: 8px !important;
    width: 22px !important;
    height: 22px !important;
    border-radius: 6px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: #94A3B8 !important;
    opacity: .9 !important;
    transition: background-color .15s, color .15s !important;
}

.ui-growl-icon-close:hover {
    background: #F1F5F9 !important;
    color: #334155 !important;
    opacity: 1 !important;
}

/* ── Barra de progresso (criada por growl-ux.js) ──────────────── */
.mvdt-growl-prog {
    position: absolute;
    left: 0;
    bottom: 0;
    height: 2px;
    width: 100%;
    transform-origin: left center;
    background: var(--tone, var(--gr-ok));
    opacity: .45;
    pointer-events: none;
}

@keyframes mvdtGrowlIn {
    from { opacity: 0; transform: translateX(18px) scale(.98); }
    to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
    .ui-growl-item-container { animation: none !important; }
    .mvdt-growl-prog { display: none !important; }
}

/* ═══════════════════════════════════════════════════════════════
   4. RESPONSIVIDADE DO CHROME (topbar × sidebar × conteúdo)
   ───────────────────────────────────────────────────────────────
   Três defeitos somados apareciam em tela estreita — dois herdados
   do tema, um introduzido por esta entrega:

   a) `min-width: 1000px` inline na .layout-topbar (topbar.xhtml:11).
      A barra é `position: fixed`, então ela NÃO acompanha a rolagem
      horizontal do corpo: abaixo de 1000px o cluster da direita
      (perfil, sino, megafone, ajuda) fica fora da viewport e
      inalcançável — some de vez, não "sai do lugar".

   b) Abaixo de 991px o tema reserva 110px no topo (.layout-main) e
      ancora a sidebar em `top: 110px`, porque conta com a faixa de
      busca de 40px logo abaixo da barra. Essa faixa
      (.layout-topbar-search) está `display: none` no markup desde
      sempre — a reserva vira um vão branco, a sidebar desce 40px e,
      como sidebar.css fixa `height: calc(100% - 70px)`, o rodapé do
      menu passa a estourar a tela por esses mesmos 40px. O mask do
      drawer, ancorado em 101px, deixava outra fresta.

   c) A regra `.layout-main { padding-top: 70px }` desta entrega é
      global e vencia o 110px do tema em qualquer largura — sozinha
      ela consertava (b) por acidente no conteúdo e deixava a
      sidebar e o mask desalinhados. Aqui os três passam a falar o
      mesmo número: 70px, a altura real da barra.
   ═══════════════════════════════════════════════════════════════ */

/* A barra vira uma linha flex e passa a caber na viewport. O tema a
   monta com float; o flex remove a dependência de largura fixa sem
   tocar no markup. row-reverse preserva a ordem visual que o
   `float: right` dos <li> produzia (perfil na ponta direita). */
@media screen and (max-width: 991px) {
    .layout-wrapper .layout-topbar {
        min-width: 0 !important;      /* vence o style inline: !important > inline sem !important */
        width: 100% !important;
        padding: 12px 14px !important;
        display: flex !important;
        align-items: center !important;
        gap: .35rem !important;
        box-sizing: border-box !important;
    }

    .layout-wrapper .layout-topbar:after { display: none !important; }

    .layout-wrapper .layout-topbar .topbar-menu {
        float: none !important;
        margin-left: auto !important;
        display: flex !important;
        flex-direction: row-reverse !important;
        align-items: center !important;
        gap: .15rem !important;
    }

    .layout-wrapper .layout-topbar .topbar-menu > li {
        float: none !important;
        margin: 0 !important;
    }

    /* Logo e botão de menu não podem espremer o cluster da direita. */
    .layout-wrapper .layout-topbar .layout-menu-button {
        flex: 0 0 auto !important;
    }

    .layout-wrapper .layout-topbar .layout-topbar-logo {
        flex: 0 1 auto !important;
        min-width: 0 !important;
        margin-left: .75em !important;
        overflow: hidden !important;
    }

    /* O tema derruba o logo para 16px aqui; 20px continua legível e
       cabe. O teto de largura acompanha, senão a marca empurra o resto. */
    .layout-wrapper .layout-topbar .layout-topbar-logo img {
        height: 20px !important;
        max-width: 92px !important;
    }

    /* Sem trilha na barra, o filete não separa nada. */
    .layout-wrapper.layout-topbar-blue .layout-topbar .layout-topbar-logo::after {
        display: none !important;
    }

    /* A faixa de busca está oculta no markup: a barra é só os 70px. */
    .layout-wrapper .layout-main {
        padding-top: 70px !important;
    }

    .layout-wrapper .layout-menu-container {
        top: 70px !important;
        height: calc(100% - 70px) !important;
    }

    .layout-wrapper .layout-mask {
        top: 70px !important;
    }
}

/* Nome e papel do usuário saem antes de disputar espaço com os ícones
   (profile.css só os escondia em 560px, quando já tinham colidido). */
@media screen and (max-width: 860px) {
    .layout-wrapper .layout-topbar .me .who { display: none !important; }
    .layout-wrapper .layout-topbar .me { padding: 5px 6px !important; }
    .layout-wrapper .layout-topbar .me-chev { display: none !important; }
}

/* Telefone: sobra o essencial — hambúrguer, marca e as três ações. */
@media screen and (max-width: 600px) {
    .layout-wrapper .layout-topbar {
        padding: 12px 10px !important;
    }

    .layout-wrapper .layout-topbar .layout-topbar-logo {
        margin-left: .4em !important;
    }

    .layout-wrapper .layout-topbar .layout-topbar-logo img {
        max-width: 74px !important;
    }

    .layout-wrapper .layout-topbar .topbar-menu > li > a,
    .layout-wrapper .layout-topbar .topbar-menu > li > .doc-help-btn {
        width: 38px !important;
        height: 38px !important;
        line-height: 38px !important;
    }
}

/* O cartão de growl é largura fixa de 340px; abaixo disso ele sangrava
   para fora da viewport e levava a barra de rolagem horizontal junto. */
@media screen and (max-width: 420px) {
    .ui-growl {
        width: auto !important;
        left: 12px !important;
        right: 12px !important;
        top: 80px !important;
    }
}

/* profile.css ancora o menu de perfil em `top: 60px` no modo telefone —
   10px por baixo da barra, que tem 70px. */
@media screen and (max-width: 560px) {
    .layout-wrapper .layout-topbar .profile-menu {
        top: 76px !important;
    }
}