/* Barra superior e identificacao do cliente.
 *
 * Portado de Web/modelo (padrao aprovado). As medidas aqui sao contrato com
 * as telas: a navbar tem 4.25rem de altura e varias paginas dimensionam o
 * proprio painel com calc(100vh - 4.25rem). Mudar a altura sem mudar esses
 * calc desalinha o rodape de todas elas.
 */

.navbar-custom {
    /* Gradiente por cliente: o base.html injeta --navbar-color-start/end a
       partir de `account_brand`, que le as cores da tabela `clientes`.
       A parada do meio e' fixa (tokens.css) e reproduz o verde-agua do
       desenho aprovado (docs/wireframes/v4). */
    background: linear-gradient(
        100deg,
        var(--navbar-color-start, #041422) 0%,
        var(--navbar-color-meio, #10769A) 62%,
        var(--navbar-color-end, #34B096) 100%
    );
    border-bottom: 1px solid var(--on-brand-line);
    isolation: isolate;
    min-height: var(--topbar-h);
    padding: 0.75rem 1.5rem;
    position: relative;
}

/* Tres colunas: o miolo `auto` e o que mantem a logo do cliente centralizada
   na tela, independente do tamanho do titulo a esquerda e do nome a direita. */
.navbar-custom__layout {
    align-items: center;
    display: grid;
    gap: 1rem;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
}

.navbar-custom__layout > * {
    position: relative;
    z-index: 1;
}

.navbar-brand-wrap {
    min-width: 0;
}

.navbar-brand-mark {
    border: 0.3rem solid var(--teal);
    border-radius: var(--radius-pill);
    display: inline-block;
    height: 1.55rem;
    width: 1.55rem;
}

.navbar-brand-text {
    color: var(--white);
    font-weight: 700;
}

.navbar-toggle-btn,
.navbar-user-btn {
    color: var(--white);
}

.navbar-toggle-btn:hover,
.navbar-user-btn:hover {
    color: var(--white);
}

.navbar-divider {
    background: var(--on-brand-divider);
    display: inline-block;
    height: 1.75rem;
    width: 1px;
}

.navbar-page-title {
    color: var(--white);
    font-weight: 700;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.navbar-client-brand {
    align-items: center;
    color: var(--white);
    display: inline-flex;
    gap: 0.6rem;
    justify-self: center;
    min-width: 0;
}

/* Fallback (sem logo configurado): chip com o monograma do cliente. */
.navbar-client-brand__monogram {
    align-items: center;
    background: var(--on-brand-chip-bg);
    border: 1px solid var(--on-brand-chip-line);
    border-radius: 0.45rem;
    color: var(--white);
    display: inline-flex;
    flex: 0 0 auto;
    font-size: 0.68rem;
    font-weight: 700;
    height: 2rem;
    justify-content: center;
    letter-spacing: 0;
    padding: 0.2rem;
    width: 2rem;
}

.navbar-client-brand__logo {
    display: block;
    flex: 0 0 auto;
    /* TAMANHO da logo (desktop): aumente/diminua este `height`. Teto seguro
       ~2.75rem -- acima disso a navbar cresce e desalinha o
       calc(100vh - 4.25rem) das telas. Para ir maior, suba tambem
       --topbar-h e esses calc(). */
    height: 3rem;
    max-width: min(52vw, 17rem);
    object-fit: contain;
    width: auto;
}

.navbar-client-brand__name {
    font-size: 1.05rem;
    font-weight: 700;
    white-space: nowrap;
}

.navbar-user-wrap {
    justify-self: end;
}

.user-avatar {
    align-items: center;
    background: var(--teal);
    border-radius: var(--radius-pill);
    color: var(--white);
    display: inline-flex;
    font-size: 0.8rem;
    font-weight: 700;
    height: 2rem;
    justify-content: center;
    width: 2rem;
}

.navbar-custom .user-avatar {
    background: var(--on-brand-avatar-bg);
    border: 1px solid var(--on-brand-avatar-line);
    color: var(--white);
}

@media (max-width: 950px) {
    .navbar-toggle-btn,
    .navbar-toggle-btn + .navbar-divider {
        display: none;
    }
}

@media (max-width: 767.98px) {
    .navbar-custom {
        padding-left: 0.9rem;
        padding-right: 0.9rem;
    }

    .navbar-custom__layout {
        gap: 0.55rem;
    }

    .navbar-brand-wrap {
        gap: 0.65rem !important;
    }

    .navbar-page-title {
        max-width: 7rem;
    }

    .navbar-client-brand {
        gap: 0.35rem;
    }

    .navbar-client-brand__logo {
        /* TAMANHO da logo (mobile): espelha o height do desktop, um pouco menor. */
        height: 2.3rem;
        max-width: 52vw;
    }

    .navbar-client-brand__name {
        font-size: 0.88rem;
    }

    .navbar-user-btn {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
}