/* =====================================================
   Layout Global iDeep Suite
   CONTROLE ÚNICO DE MARGEM E LARGURA
===================================================== */

:root {
    --ideep-azul: #5583EF;
    --ideep-azul-hover: #3f6fe0;
    --ideep-verde: #79C944;
    --ideep-rosa: #F2456B;
    --ideep-laranja: #FE8730;

    --cinza-bg: #f5f7fb;
    --cinza-borda: #e5e7eb;
    --texto-escuro: #1f2937;
    --texto-suave: #6b7280;
}

/* ==============================
   RESET
================================ */
* {
    box-sizing: border-box;
}

html, body {
    width: 100%;
    height: 100%;
}

body {
    margin: 0;
    font-family: 'Montserrat', sans-serif;
    background: var(--cinza-bg);
    color: var(--texto-escuro);
}

/* ==============================
   HEADER / MENU  ✅ FIX DEFINITIVO
================================ */
.menu-recruit {
    position: relative;              /* 🔑 CRÍTICO */
    height: 72px;
    background: #ffffff;
    border-bottom: 1px solid var(--cinza-borda);
    width: 100%;
    z-index: 100;                    /* header acima visualmente */
    pointer-events: auto;            /* recebe eventos apenas nele */
}

/* impede pseudo-elementos de bloquear cliques */
.menu-recruit::before,
.menu-recruit::after {
    pointer-events: none;
}

.menu-container {
    width: 100%;
    max-width: 1440px;
    height: 100%;
    margin: 0 auto;
    padding: 0 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* 🔥 FIX DEFINITIVO: headers NÃO podem capturar clique */
.pv-page-header,
.pv-breadcrumb {
    position: relative;
    z-index: 1;
    pointer-events: none;
}

/* ==============================
   LOGO (NUNCA ESTOURA)
================================ */
.menu-logo {
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

.menu-logo img {
    height: 36px;
    max-height: 36px;
    width: auto;
    max-width: 160px;
    display: block;
    object-fit: contain;
}

/* ==============================
   LINKS DO MENU
================================ */
.menu-links {
    display: flex;
    align-items: center;
    gap: 18px;
}

.menu-links a {
    text-decoration: none;
    color: var(--texto-escuro);
    font-weight: 600;
    font-size: 14px;
    opacity: .85;
}

.menu-links a:hover {
    opacity: 1;
    color: var(--ideep-azul);
}

.menu-links a.active,
.menu-links a.ativo {
    color: var(--ideep-azul);
    opacity: 1;
}

/* =====================================================
   Dashboard da Suite NÃO exibe menu
===================================================== */
body.module-suite .menu-links {
    display: none;
}

/* ==============================
   ÁREA DO USUÁRIO
================================ */
.menu-user {
    display: flex;
    align-items: center;
    gap: 12px;
    position: relative;
    flex-shrink: 0;
}

.btn-logout {
    font-size: 13px;
    padding: 8px 12px;
    border-radius: 10px;
    background: rgba(0,0,0,.06);
    color: var(--texto-escuro);
    text-decoration: none;
    font-weight: 700;
}

.btn-logout:hover {
    background: rgba(0,0,0,.10);
}

/* ==============================
   DROPDOWNS
================================ */
.user-btn,
.suite-user-btn {
    border: none;
    background: transparent;
    cursor: pointer;
    padding: 6px;
    border-radius: 10px;
    display: flex;
    align-items: center;
}

.user-btn:hover,
.suite-user-btn:hover {
    background: rgba(0,0,0,.05);
}

.user-btn img,
.suite-user-btn img {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    object-fit: cover;
}

.user-dropdown,
.suite-user-dropdown {
    position: absolute;
    right: 0;
    top: 54px;
    min-width: 240px;
    background: #ffffff;
    border: 1px solid var(--cinza-borda);
    border-radius: 14px;
    box-shadow: 0 16px 40px rgba(0,0,0,.12);
    padding: 10px;
    display: none;
    z-index: 1000;
}

.user-dropdown.open,
.suite-user-dropdown.open {
    display: block;
}

.user-dropdown a,
.suite-user-dropdown a {
    display: block;
    padding: 10px 12px;
    border-radius: 10px;
    text-decoration: none;
    color: var(--texto-escuro);
    font-weight: 600;
    font-size: 14px;
}

.user-dropdown a:hover,
.suite-user-dropdown a:hover {
    background: var(--cinza-bg);
}

.suite-user-dropdown .divider {
    height: 1px;
    background: var(--cinza-borda);
    margin: 8px 0;
}

.suite-user-dropdown .logout,
.user-dropdown .logout {
    color: #b91c1c;
}

/* ==============================
   MAIN / FUNDO DA PÁGINA  ✅ FIX
================================ */
.suite-main {
    position: relative;      /* 🔑 cria contexto correto */
    z-index: 1;              /* abaixo do header */
    width: 100%;
    background: var(--cinza-bg);
    pointer-events: auto;
}

/* ==============================
   CONTAINER GLOBAL  ✅ FIX
================================ */
.global-wrapper {
    position: relative;      /* 🔑 garante cliques */
    z-index: 1;
    max-width: 1440px;
    margin: 0 auto;
    padding: 0 16px 32px;
}

/* ==============================
   HEADER DA PÁGINA
================================ */
.global-header {
    background: transparent;
    padding-top: 12px;
    padding-bottom: 16px;
}

.global-header-inner {
    max-width: 1440px;
    margin: 0 auto;
    padding: 0 16px;
}

/* ==============================
   GRID
================================ */
.global-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 16px;
}

/* ==============================
   CARDS (BASE)
================================ */
.global-card {
    background: #ffffff;
    border-radius: 14px;
    padding: 18px;
    margin-bottom: 18px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.06);
}

/* =====================================================
   CORES DOS CARDS
===================================================== */
.card-blue   { border-top: 4px solid var(--ideep-azul); }
.card-green  { border-top: 4px solid var(--ideep-verde); }
.card-orange { border-top: 4px solid var(--ideep-laranja); }
.card-pink   { border-top: 4px solid var(--ideep-rosa); }

/* ==============================
   KPI
================================ */
.global-kpi {
    background: #ffffff;
    border-radius: 16px;
    padding: 24px 18px;
    text-align: center;
    box-shadow: 0 10px 25px rgba(0,0,0,0.06);
}

.global-kpi h3 {
    font-size: 14px;
    color: var(--texto-suave);
    margin-bottom: 8px;
    font-weight: 600;
}

.global-kpi .valor {
    font-size: 32px;
    font-weight: 800;
}

/* ==============================
   CORES KPI
================================ */
.kpi-blue   { color: var(--ideep-azul); }
.kpi-orange { color: var(--ideep-laranja); }
.kpi-green  { color: var(--ideep-verde); }
.kpi-pink   { color: var(--ideep-rosa); }