/*
 * Faixa "Ambiente de homologação" (crediario-app#120).
 *
 * Folha avulsa, fora do Laravel Mix: os layouts só a linkam (e só põem a
 * classe `has-env-banner` no <body>) quando StagingBanner::isVisible(). O
 * arquivo está em public/ em todo ambiente, mas fora de homologação nenhuma
 * página o carrega; mesmo assim, todo deslocamento abaixo fica preso a
 * `.has-env-banner`, para o arquivo não mexer em nada sozinho.
 *
 * Camadas: acima do navbar (.navbar-absolute, z 1029) e do drawer mobile
 * (z 1032); abaixo do backdrop/modal do Bootstrap (1040/1050).
 */

:root {
    --env-banner-h: 28px;
}

.env-banner {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: var(--env-banner-h);
    line-height: var(--env-banner-h);
    z-index: 1035;
    /* #FFC107 = $amber-500 (resources/adminapp/sass/md/variables/_colors.scss); contraste ~9.9:1 com #212121 */
    background: #FFC107;
    color: #212121;
    font-family: Roboto, "Helvetica Neue", Arial, sans-serif;
    font-weight: 500;
    font-size: 13px;
    text-align: center;
    padding: 0 12px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .2);
    box-sizing: border-box;
}

body.has-env-banner {
    padding-top: var(--env-banner-h);
}

/*
 * Âncoras/scrollIntoView/foco não podem parar embaixo da faixa. O
 * scroll-padding que vale para a viewport é o do <html> (o do <body> não
 * propaga), então `:has()` numa regra SÓ dela. A reserva com
 * `scroll-margin-top` só entra em navegador que entende `@supports selector()`
 * mas não `:has()` — se valessem as duas, o deslocamento somaria (56px em vez
 * de 28px). Navegador sem `selector()` (bem antigo) fica sem deslocamento.
 */
html:has(> body.has-env-banner) {
    scroll-padding-top: var(--env-banner-h);
}

@supports not selector(:has(*)) {
    .has-env-banner [id] {
        scroll-margin-top: var(--env-banner-h);
    }
}

/* Sidebar fixa do tema (_sidebar-and-main-panel.scss: top 0, bottom 0). */
.has-env-banner .sidebar {
    top: var(--env-banner-h);
}

.has-env-banner .sidebar .sidebar-wrapper {
    height: calc(100vh - 75px - var(--env-banner-h));
}

/* Drawer mobile (_responsive.scss: .sidebar com top 0 e height 100vh). */
@media (max-width: 991px) {
    .has-env-banner .sidebar {
        height: calc(100vh - var(--env-banner-h));
    }
}

/*
 * Altura mínima de página. SPA: .v-application--wrap (Vuetify). Login/senha:
 * DOIS elementos impõem 100vh — o .wrapper.wrapper-full-page (custom.css) e o
 * .page-header dentro dele (material-dashboard.css, border-box). Os dois
 * precisam do desconto, senão sobram 28px de rolagem.
 */
.has-env-banner .v-application--wrap,
.has-env-banner .wrapper.wrapper-full-page,
.has-env-banner .wrapper-full-page .page-header {
    min-height: calc(100vh - var(--env-banner-h));
}

/*
 * SPA: o .wrapper do tema tem `height: 100vh` fixo, que estica o
 * .v-application--wrap e deixaria 28px de rolagem permanente. Preso a
 * .v-application para não tocar no .wrapper-full-page (height: auto).
 */
.has-env-banner .v-application .wrapper {
    height: calc(100vh - var(--env-banner-h));
}

/*
 * v-dialog do Vuetify (z ~202, abaixo da faixa): o contêiner fixo de tela
 * cheia começa abaixo da faixa, para o topo do diálogo nunca ficar coberto.
 */
.has-env-banner .v-dialog__content {
    top: var(--env-banner-h);
    height: calc(100% - var(--env-banner-h));
}

/* Impressão: a faixa sai do modo fixo (não se repete por cima do conteúdo de cada página) e continua identificando o ambiente no topo. */
@media print {
    .env-banner {
        position: static;
        box-shadow: none;
    }

    body.has-env-banner {
        padding-top: 0;
    }
}