/* ==========================================================================
   DOCTOR DRE | Identificação Visual de Ambientes (Staging / Local)
   CSS Isolado - Afeta exclusivamente quando a faixa de ambiente está ativa
   ========================================================================== */

.doctor-env-banner {
    position: relative;
    width: 100%;
    height: 30px;
    min-height: 30px;
    max-height: 30px;
    z-index: 1030;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    user-select: none;
    -webkit-user-select: none;
    box-sizing: border-box;
}

/* Staging: Faixa Laranja (#e65100) */
.doctor-env-banner.doctor-env-banner-staging {
    background-color: #e65100;
    color: #ffffff;
    border-bottom: 1px solid rgba(0, 0, 0, 0.25);
}

/* Local: Faixa Preta (#121212) */
.doctor-env-banner.doctor-env-banner-local {
    background-color: #121212;
    color: #ffffff;
    border-bottom: 1px solid rgba(255, 255, 255, 0.15);
}

.doctor-env-banner-inner {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 0 1rem;
    box-sizing: border-box;
}

.doctor-env-banner-text {
    font-family: 'Open Sans', system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 30px;
    color: #ffffff;
}

.doctor-env-banner-text i {
    font-size: 11px;
    margin-right: 6px;
    vertical-align: middle;
}

/* ==========================================================================
   Ajustes não-invasivos de Layout do Argon Dashboard
   Ativos SOMENTE quando body possui a classe .has-env-banner
   ========================================================================== */

body.has-env-banner .sidenav.fixed-start {
    top: 30px !important;
    height: calc(100vh - 46px) !important;
}

body.has-env-banner .cabecalho {
    top: 30px !important;
}

/* Ajuste da tela de login: a faixa ocupa o topo no fluxo normal, entao o
   page-header (e a imagem absoluta dentro dele) ja comeca abaixo dela.
   Basta reduzir a altura; deslocar a imagem duplicaria o espaco da faixa. */
body.has-env-banner .main-content .page-header {
    min-height: calc(100vh - 30px) !important;
}

/* body > main tem min-height: 100vh (rodape fixo do argon-dashboard.css); com a
   faixa no fluxo, o main precisa descontar a altura dela para nao criar rolagem. */
body.has-env-banner > main {
    min-height: calc(100vh - 30px);
}

/* ==========================================================================
   Responsividade: Tablets e Mobile (768px, 390px, 360px)
   ========================================================================== */

@media (max-width: 1199.98px) {
    body.has-env-banner .sidenav.fixed-start {
        top: 30px !important;
        height: calc(100vh - 30px) !important;
    }
}

@media (max-width: 768px) {
    .doctor-env-banner {
        height: 26px;
        min-height: 26px;
        max-height: 26px;
    }

    .doctor-env-banner-text {
        font-size: 10px;
        letter-spacing: 1px;
        line-height: 26px;
    }

    .doctor-env-banner-text i {
        font-size: 9.5px;
        margin-right: 4px;
    }

    body.has-env-banner .sidenav.fixed-start {
        top: 26px !important;
        height: calc(100vh - 26px) !important;
    }

    body.has-env-banner .cabecalho {
        top: 26px !important;
    }

    body.has-env-banner .main-content .page-header {
        min-height: calc(100vh - 26px) !important;
    }

    body.has-env-banner > main {
        min-height: calc(100vh - 26px);
    }
}

@media (max-width: 390px) {
    .doctor-env-banner {
        height: 24px;
        min-height: 24px;
        max-height: 24px;
        padding: 0 4px;
    }

    .doctor-env-banner-text {
        font-size: 9px;
        letter-spacing: 0.5px;
        line-height: 24px;
    }

    body.has-env-banner .sidenav.fixed-start {
        top: 24px !important;
        height: calc(100vh - 24px) !important;
    }

    body.has-env-banner .cabecalho {
        top: 24px !important;
    }

    body.has-env-banner .main-content .page-header {
        min-height: calc(100vh - 24px) !important;
    }

    body.has-env-banner > main {
        min-height: calc(100vh - 24px);
    }
}