/* COA-1024 — acessos do header ("Área do colaborador" / "Área do gestor").
   Fica num arquivo próprio (registrado em views/layouts/main.php) porque o header é do
   layout e cada página pode carregar um bundle diferente (styles.css, styles2025.css,
   style-ppc.css…) — assim a regra vale em todas sem duplicar o CSS em cada arquivo.
   Os ícones são placeholders do sprite; os definitivos entram depois (por isso o
   `stroke/fill: currentColor`, que dá cor coerente a qualquer ícone do sprite). */

/* ── Desktop: dois botões lado a lado (colaborador preenchido, gestor contornado) ──
   Os seletores incluem `#navbar` de propósito: styles.css estiliza os links do menu por
   `#navbar .navbar-nav .nav-link` (cor/tamanho/padding) e sem o id essas regras venceriam. */
@media (min-width: 992px) {
    .header #navbar .access-nav .login-link .nav-link,
    .header #navbar .access-nav .collaborator-link .nav-link {
        display: inline-flex;
        align-items: center;
        gap: 4px;
        padding: 11px 10px;
        border: 1px solid #14998D;
        border-radius: 6px;
        font-size: 13px;
        font-weight: 600;
        line-height: 20px;
        white-space: nowrap;
        transition: ease-in-out 0.18s;
    }

    /* Os ícones não têm cor própria: os símbolos usados aqui (`lock-1`, `clock-24-mono`) são
       as variantes em `currentColor`, então herdam o `color` do botão — verde no gestor
       (fundo branco), branco no colaborador (fundo verde) e branco nos dois no hover, onde o
       fundo é preenchido. Não fixe cor de ícone aqui: assim ela segue o estado do botão. */

    /* Em row-reverse (regra do styles.css) o gestor é o último visualmente: a margem
       esquerda dele é o espaço entre os dois botões. */
    .header #navbar .access-nav .login-link {
        margin-left: 12px;
    }

    .header #navbar .access-nav .collaborator-link .nav-link {
        background: #14998D;
        color: #fff;
    }

    .header #navbar .access-nav .collaborator-link .nav-link:hover {
        background: #1F2933;
        border-color: #1F2933;
        color: #fff;
    }

    .header #navbar .access-nav .login-link .nav-link {
        color: #14998D;
    }

    .header #navbar .access-nav .login-link .nav-link:hover {
        background: #14998D;
        color: #fff;
    }

    .header #navbar .access-nav .login-link .nav-link svg,
    .header #navbar .access-nav .collaborator-link .nav-link svg {
        width: 18px;
        height: 18px;
        top: 0;
        margin-right: 0;
    }

    /* Ao rolar, o header troca os acessos pelo CTA "Iniciar teste grátis" — regra existente
       em styles.css para o .login-link; o novo botão acompanha a mesma troca. */
    .header.nav-scrolled .collaborator-link {
        display: none;
    }
}

/* Entre 992px e 1199px o menu + 2 botões ficam apertados: reduz o botão, não o menu. */
@media (min-width: 992px) and (max-width: 1199px) {
    .header #navbar .access-nav .login-link .nav-link,
    .header #navbar .access-nav .collaborator-link .nav-link {
        padding: 9px 12px;
        font-size: 14px;
    }

    .header #navbar .access-nav .login-link {
        margin-left: 8px;
    }
}

/* ── Mobile: botão "Entrar" abrindo as duas áreas ── */
.mobile-access {
    display: none;
}

@media (max-width: 991px) {
    .mobile-access {
        display: block;
        position: absolute;
        right: 52px;
        top: 46px;
        transform: translateY(-50%);
        z-index: 1030;
    }

    .mobile-access-trigger {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        padding: 12px 14px;
        background: #14998D;
        border: 1px solid #14998D;
        border-radius: 4px;
        color: #fff;
        font-size: 16px;
        font-weight: 600;
        line-height: 1;
        outline: none;
    }

    .mobile-access-trigger:focus {
        outline: none;
    }

    .mobile-access-trigger svg {
        width: 12px;
        height: 8px;
        fill: currentColor;
        transition: transform 0.2s ease;
    }

    .mobile-access.open .mobile-access-trigger svg {
        transform: rotate(180deg);
    }

    .mobile-access-menu {
        display: none;
        position: absolute;
        right: 0;
        top: calc(100% + 10px);
        gap: 10px;
        padding: 12px;
        background: #fff;
        border-radius: 12px;
        box-shadow: 0 12px 32px rgba(31, 41, 51, 0.18);
    }

    .mobile-access.open .mobile-access-menu {
        display: flex;
    }

    .mobile-access-card {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 10px;
        width: 118px;
        padding: 16px 10px;
        border: 1px solid #14998D;
        border-radius: 10px;
        color: #14998D;
        font-size: 14px;
        font-weight: 600;
        line-height: 18px;
        text-align: center;
    }

    .mobile-access-card,
    .mobile-access-card:hover,
    .mobile-access-card:focus {
        text-decoration: none;
    }

    .mobile-access-card--primary,
    .mobile-access-card--primary:hover,
    .mobile-access-card--primary:focus {
        background: #14998D;
        border-color: #14998D;
        color: #fff;
    }

    .mobile-access-card svg {
        width: 28px;
        height: 28px;
    }

    /* No mobile o header é overflow:hidden (styles.css) e cortaria o menu aberto — mesma
       liberação que o menu hambúrguer já faz com body.menu-visible. */
    body.access-visible header.header {
        overflow: visible;
    }

    /* Sem o overflow:hidden do header, o #navbar (absolute, width:100vw, invisível só por
       opacity) passa a gerar rolagem horizontal — como o menu hambúrguer e este menu nunca
       ficam abertos juntos, dá para escondê-lo enquanto este está aberto. */
    body.access-visible header.header #navbar {
        display: none;
    }
}