/* ==========================================================================
   JVG — Tema da marca
   O primary do Metronic já foi compilado em #1E3A6F (navy do logo) e o info
   em #6B7280 (prata). Este arquivo só adiciona: variáveis nomeadas, fundo do
   header em navy, e utilitários visuais da marca.
   ========================================================================== */

:root {
    --jvg-navy:        #1E3A6F;
    --jvg-navy-rgb:    30, 58, 111;
    --jvg-navy-dark:   #152A52;
    --jvg-navy-light:  #2F539A;
    --jvg-sky:         #7BA6D4;
    --jvg-silver:      #9CA3AF;
    --jvg-silver-soft: #D1D5DB;
    --jvg-charcoal:    #1F2937;
    --jvg-sand:        #E8E3D8;

    /* Header outer = mesma cor do fundo da página (cobre conteúdo abaixo quando o header está fixed) */
    --bs-app-header-base-bg-color:     #F8F1EC;
    --bs-app-header-sticky-bg-color:   #F8F1EC;
    --bs-app-header-minimize-bg-color: #F8F1EC;
    --bs-app-header-base-box-shadow:   none;
    --bs-app-header-sticky-box-shadow: none;
    --bs-app-header-base-border-bottom: 0;
    --bs-app-header-sticky-border-bottom: 0;
}

/*
 * Cor sólida no header externo: o card interno (.app-container) é navy e
 * fica "flutuando" sobre essa faixa cream. Sem isso, com header fixed,
 * o conteúdo da página aparece por trás do header ao rolar.
 */
#kt_app_header,
#kt_app_header.app-header {
    background-color: #F8F1EC !important;
    box-shadow: none !important;
    border-bottom: 0 !important;
}


/* ===== Marca “JVG METALÚRGICA” no header (sobre fundo navy) ===== */
.jvg-brand {
    display: inline-flex;
    align-items: baseline;
    gap: .35rem;
    text-decoration: none;
}
.jvg-brand-mark {
    font-weight: 800;
    font-size: 1.6rem;
    letter-spacing: .5px;
    background: linear-gradient(180deg, #FFFFFF 0%, var(--jvg-sky) 60%, var(--jvg-silver-soft) 100%);
    -webkit-background-clip: text;
            background-clip: text;
    color: transparent;
    line-height: 1;
}
.jvg-brand-tag {
    font-size: .7rem;
    letter-spacing: 2.5px;
    font-weight: 600;
    color: rgba(255,255,255,.65);
    text-transform: uppercase;
}

/* ===== Itens do menu do header — texto claro sobre fundo navy ===== */
#kt_app_header_menu .menu-link {
    color: rgba(255, 255, 255, .78);
}
#kt_app_header_menu .menu-link:hover {
    color: #FFFFFF;
    background-color: rgba(255, 255, 255, .08);
}
#kt_app_header_menu > .menu-item.show > .menu-link,
#kt_app_header_menu > .menu-item.here > .menu-link,
#kt_app_header_menu > .menu-item > .menu-link.active {
    color: #FFFFFF;
    background-color: rgba(255, 255, 255, .15);
}

/* Dropdowns abrem com fundo branco padrão; restaurar cor de texto */
#kt_app_header_menu .menu-sub .menu-link {
    color: #4B5563;
    background-color: transparent;
}
#kt_app_header_menu .menu-sub .menu-link:hover,
#kt_app_header_menu .menu-sub .menu-link.active {
    color: var(--jvg-navy);
    background-color: #E6ECF6;
}

/* Toggle mobile sobre fundo navy */
#kt_app_header_menu_toggle { color: #FFFFFF; }

/* ===== Bloco do usuário no header ===== */
.navbar-user-name { color: #FFFFFF; }
.navbar-user-role { color: rgba(255, 255, 255, .65); }

/* ===== Tela de login — coluna lateral institucional ===== */
.jvg-auth-aside {
    background: linear-gradient(135deg, var(--jvg-navy-dark) 0%, var(--jvg-navy) 60%, var(--jvg-navy-light) 100%);
    min-height: 220px;
}
.jvg-brand--auth { gap: .6rem; }
.jvg-brand-mark--auth {
    font-size: 2.4rem;
    background: linear-gradient(180deg, var(--jvg-sky) 0%, var(--jvg-navy) 100%);
    -webkit-background-clip: text;
            background-clip: text;
    color: transparent;
}
.jvg-brand-tag--auth { color: var(--jvg-silver); }

/* ===== Cards do conteúdo — borda superior aparece em hover ===== */
.card.card-flush {
    border-top: 3px solid transparent;
    transition: border-color .15s ease;
}
.card.card-flush:hover { border-top-color: var(--jvg-navy); }