/* ============================================================================
   Casca do Web Monitor: topbar, menu lateral e login.

   Camada de sobreposição - carregada DEPOIS de style.css e site.css. Não
   substitui o template: só alinha cores, espaçamento e tipografia à linguagem
   usada nas telas (cartões de 12px, borda #e6e9f0, texto #344054).
   Mantém intactos os contratos do template: largura de 240px do menu, as
   classes .side-menu / .topbar-left / .topbar-right / .content-page usadas
   pelo openCloseMenu(), e a inicialização do metisMenu.
   ============================================================================ */

:root {
    --sh-marinho: #0f2c52;
    --sh-marinho-claro: #163f76;
    --sh-azul: #2f6fed;
    --sh-borda: #e6e9f0;
    --sh-texto: #344054;
    --sh-suave: #667085;
    --sh-fundo: #f6f8fb;
}

body { background-color: var(--sh-fundo); }

/* ---------------------------------------------------------------- Topbar -- */
.topbar {
    background: #fff;
    border-bottom: 1px solid var(--sh-borda);
    box-shadow: 0 1px 2px rgba(16, 24, 40, .04);
}

/* A faixa do logo acompanha a topbar: clara, separada do conteúdo só por uma linha. */
.topbar .topbar-left {
    background: #fff;
    border-bottom: 1px solid var(--sh-borda);
    border-right: 1px solid var(--sh-borda);
}

.topbar .topbar-left .logo { display: flex; align-items: center; justify-content: center; height: 100%; }

/* O PNG do logo é branco sobre transparente e sumiria no fundo claro. Mesmo recurso já usado no
   rodapé do login: desenha a sombra na cor desejada 1000px abaixo e traz o elemento de volta,
   de modo que o que se vê é a silhueta colorida, não o original. */
.topbar .topbar-left .logo img {
    filter: drop-shadow(0 1000px 0 var(--sh-marinho));
    transform: translateY(-1000px);
}

/* A barra da direita passa a ser uma linha só: menu à esquerda, identidade e sair à direita. */
.topbar-right {
    align-items: center;
    gap: 12px;
    padding: 0 18px 0 6px;
    min-height: 70px;
}

/* Hambúrguer e sair: discretos, do tamanho de um botão de ícone. */
.topbar-right #openCloseMenu,
.topbar-right #exitButton {
    display: inline-flex; align-items: center; justify-content: center; gap: 7px;
    height: 36px; padding: 0 12px;
    font-size: 12.5px; font-weight: 600;
    color: var(--sh-suave);
    background: #fff;
    border: 1px solid #d0d5dd; border-radius: 8px;
    box-shadow: none;
}
.topbar-right #openCloseMenu { padding: 0; width: 36px; }
.topbar-right #openCloseMenu:hover,
.topbar-right #exitButton:hover {
    color: var(--sh-texto); background: #f2f4f7; border-color: #c2c8d0;
}
.topbar-right #openCloseMenu .fa,
.topbar-right #exitButton .fa,
.topbar-right #exitButton .fa-solid { font-size: 13px; }
/* O template empilhava ícone e rótulo do Sair em coluna. */
.topbar-right #exitButton { flex-direction: row !important; }
.topbar-right #btnSair a:hover { text-decoration: none; }

/* Bloco à direita da topbar: ambiente + sair. */
.topbar-acoes { display: flex; align-items: center; gap: 10px; margin-left: auto; }

/* Selo do ambiente em que o próprio Web Monitor está rodando. */
.sh-ambiente {
    display: inline-flex; align-items: center; gap: 6px;
    height: 26px; padding: 0 10px;
    font-size: 11px; font-weight: 700; letter-spacing: .4px;
    border-radius: 999px; border: 1px solid transparent;
    white-space: nowrap;
}
.sh-ambiente .fa { font-size: 9px; opacity: .8; }
.sh-ambiente.prd   { background: #fef3f2; color: #b42318; border-color: #fecdca; }
.sh-ambiente.hom   { background: #fffaeb; color: #b54708; border-color: #fedf89; }
.sh-ambiente.teste { background: #eff8ff; color: #175cd3; border-color: #b2ddff; }

/* ------------------------------------------------------------ Menu lateral */
/* Claro, como o conteúdo. A separação vem da linha divisória e do peso do texto,
   não de um bloco escuro ocupando um quinto da tela. */
.side-menu, .left.side-menu {
    background: #fff;
    border-right: 1px solid var(--sh-borda);
}
/* O ripple do template é claro e sumiria no fundo branco. */
.side-menu .waves-effect .waves-ripple { background-color: rgba(47, 111, 237, .12); }

#sidebar-menu > ul > li.menu-title {
    padding: 18px 20px 8px 20px;
    font-size: 10.5px; font-weight: 700; letter-spacing: 1.2px;
    text-transform: uppercase;
    /* #98a2b3 dava só 2.6:1 sobre o branco - ilegível em 10.5px. */
    color: var(--sh-suave);
}

#sidebar-menu > ul > li > a {
    display: flex; align-items: center; gap: 11px;
    padding: 10px 20px; margin: 1px 0;
    font-size: 13px; font-weight: 500;
    color: var(--sh-texto);
    border-left: 3px solid transparent;
    transition: background .12s ease, color .12s ease;
}
#sidebar-menu > ul > li > a:hover { background: #f4f6f9; color: #101828; }
#sidebar-menu > ul > li > a > .fa {
    width: 16px; text-align: center; font-size: 13px;
    color: #98a2b3; opacity: 1;
}
#sidebar-menu > ul > li > a:hover > .fa { color: var(--sh-suave); }

/* Submenu: nível indicado por recuo e por um fio vertical, sem mudar o fundo. */
#sidebar-menu .nav-second-level { background: transparent; }
#sidebar-menu .nav-second-level li a {
    display: block;
    padding: 8px 20px 8px 51px;
    font-size: 12.5px; font-weight: 500;
    color: var(--sh-suave);
    border-left: 3px solid transparent;
    position: relative;
}
#sidebar-menu .nav-second-level li a::before {
    content: ""; position: absolute; left: 33px; top: 0; bottom: 0;
    border-left: 1px solid var(--sh-borda);
}
#sidebar-menu .nav-second-level li a:hover { background: #f4f6f9; color: var(--sh-texto); }

/* Página atual: fundo azul suave e barra à esquerda. */
#sidebar-menu a.sh-ativo,
#sidebar-menu .nav-second-level li a.sh-ativo {
    color: #1849a9; font-weight: 600;
    background: #eff4ff;
    border-left-color: var(--sh-azul);
}
#sidebar-menu a.sh-ativo > .fa { color: var(--sh-azul); }
#sidebar-menu .nav-second-level li a.sh-ativo::before { border-left-color: #b2ddff; }

/* Grupo que contém a página atual: só o rótulo em destaque, sem fundo. */
#sidebar-menu > ul > li > a.sh-ativo-pai { color: #101828; font-weight: 600; }

/* Seta do metisMenu indicando grupo aberto. */
#sidebar-menu > ul > li > a.sh-tem-filhos::after {
    content: "\f078";
    font-family: FontAwesome;
    margin-left: auto;
    font-size: 9px; color: #c3c9d4;
    transition: transform .15s ease;
}
#sidebar-menu > ul > li.active > a.sh-tem-filhos::after { transform: rotate(180deg); color: #98a2b3; }

/* ------------------------------------------------------------------ Login */
.sh-login-wrap {
    display: flex; align-items: center; justify-content: center;
    min-height: 78vh; padding: 24px 0;
}
.sh-login {
    width: 100%; max-width: 400px;
    background: #fff;
    border: 1px solid var(--sh-borda); border-radius: 14px;
    box-shadow: 0 8px 24px rgba(16, 24, 40, .08);
    padding: 30px 30px 26px 30px;
}
.sh-login-marca {
    display: flex; flex-direction: column; align-items: center; gap: 10px;
    margin-bottom: 24px;
}
.sh-login-marca .sh-login-icone {
    display: inline-flex; align-items: center; justify-content: center;
    width: 46px; height: 46px; border-radius: 12px;
    background: var(--sh-marinho); color: #fff; font-size: 19px;
}
.sh-login-marca h1 {
    font-size: 19px; font-weight: 700; color: var(--sh-texto);
    margin: 0; letter-spacing: .2px;
}
.sh-login-marca p { margin: 0; font-size: 12.5px; color: var(--sh-suave); }

.sh-campo { margin-bottom: 14px; }
.sh-campo label {
    display: block; margin-bottom: 6px;
    font-size: 12.5px; font-weight: 600; color: var(--sh-texto);
}
.sh-campo-input { position: relative; }
.sh-campo-input > .fa {
    position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
    color: #98a2b3; font-size: 13px; pointer-events: none;
}
.sh-campo input.form-control {
    height: 42px; width: 100%;
    padding: 0 12px 0 34px;
    font-size: 13.5px; color: var(--sh-texto);
    border: 1px solid #d0d5dd; border-radius: 9px;
    background: #fff;
}
.sh-campo input.form-control:focus {
    outline: none; border-color: var(--sh-azul);
    box-shadow: 0 0 0 3px rgba(47, 111, 237, .12);
}

.sh-login-btn {
    width: 100%; height: 42px; margin-top: 6px;
    font-size: 13.5px; font-weight: 600; color: #fff;
    background: var(--sh-marinho);
    border: 0; border-radius: 9px;
    cursor: pointer;
    transition: background .12s ease;
}
.sh-login-btn:hover { background: var(--sh-marinho-claro); }

.sh-login-erro { margin-top: 14px; }
.sh-login-erro ul { list-style: none; padding: 0; margin: 0; }
.sh-login-erro li {
    display: flex; align-items: flex-start; gap: 8px;
    font-size: 12.5px; color: #b42318;
    background: #fef3f2; border: 1px solid #fecdca; border-radius: 9px;
    padding: 10px 12px; margin-bottom: 8px;
}
.sh-login-erro li:last-child { margin-bottom: 0; }
.sh-login-erro:empty { display: none; }
/* Sem erros o ValidationSummary ainda emite o container (validation-summary-valid, com um <li>
   vazio dentro): só o estado inválido deve ocupar espaço. */
.sh-login-erro .validation-summary-valid { display: none; }

.sh-login-rodape {
    margin-top: 20px; padding-top: 16px;
    border-top: 1px solid var(--sh-borda);
    text-align: center;
    font-size: 11.5px; color: #98a2b3;
}