/* =====================================================
   K4W AUTO — MENU V2
   Correção de sobreposições e Ajuda compacta
   ===================================================== */

/* A navegação ocupa a largura disponível sem
   permitir que as colunas se sobreponham. */

.product-nav > .container {
    display: grid;
    grid-template-columns:
        minmax(0, auto)
        minmax(0, 1fr)
        auto;
    align-items: center;
    gap: 12px;
    width: 100%;
    max-width: 100%;
    min-width: 0;
}

/* Marca */
.product-nav .product-brand {
    min-width: 0;
    max-width: 100%;
}

/* Zona central */
.product-nav .product-links {
    min-width: 0;
    max-width: 100%;
    width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    flex-wrap: nowrap;
    justify-content: flex-start;
    scrollbar-width: thin;
    scrollbar-color: #c5d7e7 transparent;
    -webkit-overflow-scrolling: touch;
}

/* Cada opção mantém a sua largura */
.product-nav .product-links > a {
    flex: 0 0 auto;
}

/* Área do utilizador */
.product-nav .product-user {
    min-width: 0;
    flex: 0 0 auto;
    justify-self: end;
    flex-wrap: nowrap;
}

/* Ajuda: apenas ? */
.product-nav .product-user .k4w-help-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 38px;
    width: 38px;
    height: 38px;
    min-width: 38px;
    min-height: 38px;
    padding: 0;
    border-radius: 50%;
    border: 1px solid #dce6f0;
    background: #ffffff;
    color: #0756a3;
    text-decoration: none;
}

.product-nav .product-user .k4w-help-link > span:first-child {
    width: 25px;
    height: 25px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: #0756a3;
    color: #fff;
    font-size: 17px;
    font-weight: 800;
}

.product-nav .product-user .k4w-help-link:hover,
.product-nav .product-user .k4w-help-link.active {
    background: #edf5fc;
    border-color: #9fc5e8;
}

.product-nav .product-user .k4w-help-label {
    display: none !important;
}

/* Não permitir que elementos da direita encolham */
.product-nav .product-user > a,
.product-nav .product-user > .user-menu {
    flex-shrink: 0;
}

/* Ecrãs intermédios */
@media (max-width: 1400px) {

    .product-nav > .container {
        gap: 8px;
    }

    .product-nav .product-links > a {
        padding-left: 9px;
        padding-right: 9px;
    }

}

/* Tablets */
@media (max-width: 1100px) {

    .product-nav .product-brand-copy {
        display: none;
    }

    .product-nav .product-brand img {
        width: 36px;
        height: 36px;
        object-fit: contain;
    }

    .product-nav .product-links {
        justify-self: stretch;
    }

}

/* Telemóveis */
@media (max-width: 760px) {

    .product-nav > .container {
        grid-template-columns:
            auto
            minmax(0, 1fr)
            auto;
        gap: 7px;
        min-width: 0;
    }

    .product-nav .product-links {
        min-width: 0;
        max-width: 100%;
    }

    .product-nav .product-user {
        gap: 5px;
    }

    .product-nav .product-user .k4w-help-link {
        width: 34px;
        height: 34px;
        min-width: 34px;
        min-height: 34px;
        flex-basis: 34px;
    }

    .product-nav .product-user .k4w-help-link > span:first-child {
        width: 23px;
        height: 23px;
        font-size: 15px;
    }

}

/* =====================================================
   K4W AUTO — MENU V3.1
   Correção da navegação móvel
   ===================================================== */

@media (max-width: 1024px) {

    /*
     * O backdrop-filter no cabeçalho interfere
     * com o posicionamento fixo dos atalhos.
     */
    .product-nav {
        -webkit-backdrop-filter: none !important;
        backdrop-filter: none !important;
        overflow: visible !important;
    }

    /* Cabeçalho */
    .product-nav > .container {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        width: 100% !important;
        height: 66px !important;
        gap: 8px !important;
        min-width: 0 !important;
    }

    /* Logótipo */
    .product-nav .product-brand {
        display: flex !important;
        align-items: center !important;
        flex: 0 1 auto !important;
        width: auto !important;
        min-width: 0 !important;
        max-width: 45% !important;
    }

    .product-nav .product-brand img {
        width: 100px !important;
        height: 38px !important;
        object-fit: contain !important;
    }

    .product-nav .product-brand-copy {
        display: none !important;
    }

    /* Utilizador */
    .product-nav .product-user {
        display: flex !important;
        align-items: center !important;
        justify-content: flex-end !important;
        flex: 0 0 auto !important;
        gap: 6px !important;
        margin-left: auto !important;
        min-width: 0 !important;
        position: relative !important;
        z-index: 160 !important;
    }

    /* Ajuda */
    .product-nav .k4w-help-link {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        flex: 0 0 34px !important;
        width: 34px !important;
        height: 34px !important;
        min-width: 34px !important;
        min-height: 34px !important;
        padding: 0 !important;
    }

    .product-nav .k4w-help-label {
        display: none !important;
    }

    /* Frota */
    .product-nav .fleet-portal-link {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        min-width: 34px !important;
        height: 34px !important;
        padding: 5px !important;
    }

    .product-nav .fleet-portal-link span {
        display: none !important;
    }

    /* Avatar */
    .product-nav .user-menu {
        display: block !important;
        position: relative !important;
        flex: 0 0 auto !important;
    }

    .product-nav .user-trigger {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 42px !important;
        height: 42px !important;
        padding: 4px !important;
        cursor: pointer !important;
    }

    .product-nav .nav-avatar {
        display: grid !important;
        width: 34px !important;
        height: 34px !important;
        flex: 0 0 34px !important;
    }

    .product-nav .user-trigger-copy,
    .product-nav .user-trigger > i {
        display: none !important;
    }

    /* Menu da conta */
    .product-nav .user-dropdown {
        position: fixed !important;
        top: 72px !important;
        right: 10px !important;
        left: auto !important;
        width: min(290px, calc(100vw - 20px)) !important;
        max-width: calc(100vw - 20px) !important;
        max-height: calc(100dvh - 92px) !important;
        overflow-y: auto !important;
        z-index: 1000 !important;
    }

    .product-nav .user-dropdown .mobile-more-link {
        display: flex !important;
    }

    /* Barra de navegação inferior */
    .product-nav .product-links {
        position: fixed !important;
        top: auto !important;
        bottom: max(8px, env(safe-area-inset-bottom)) !important;
        left: 8px !important;
        right: 8px !important;

        display: flex !important;
        align-items: stretch !important;
        justify-content: space-between !important;

        width: auto !important;
        height: 66px !important;
        max-width: none !important;
        min-width: 0 !important;

        padding: 5px !important;
        gap: 3px !important;

        overflow: visible !important;
        flex-wrap: nowrap !important;

        background: rgba(255,255,255,.98) !important;
        border: 1px solid #dce6ed !important;
        border-radius: 16px !important;
        box-shadow: 0 8px 30px rgba(24,60,94,.18) !important;
        z-index: 150 !important;
    }

    /* Apenas cinco atalhos principais */
    .product-nav .product-links > a {
        display: none !important;
    }

    .product-nav .product-links > a.k4w-mobile-main {
        display: flex !important;
        flex: 1 1 0 !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;

        min-width: 0 !important;
        height: 54px !important;

        gap: 3px !important;
        padding: 4px 2px !important;

        font-size: 10px !important;
        line-height: 1.15 !important;
        text-align: center !important;
    }

    .product-nav .product-links > a.k4w-mobile-main svg {
        width: 19px !important;
        height: 19px !important;
        flex: 0 0 auto !important;
    }

    .product-nav .product-links > a.k4w-mobile-main span {
        display: block !important;
        width: 100% !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
    }

    .product-nav .product-links > a.k4w-mobile-main.create-booking {
        background: var(--brand-primary) !important;
        color: #fff !important;
    }

    /* Ordem dos botões */
    .product-nav .product-links
    > a[data-mobile-order="1"] { order: 1 !important; }

    .product-nav .product-links
    > a[data-mobile-order="2"] { order: 2 !important; }

    .product-nav .product-links
    > a[data-mobile-order="3"] { order: 3 !important; }

    .product-nav .product-links
    > a[data-mobile-order="4"] { order: 4 !important; }

    .product-nav .product-links
    > a[data-mobile-order="5"] { order: 5 !important; }

    /* Espaço para a barra inferior */
    body.backoffice {
        padding-bottom:
            calc(84px + env(safe-area-inset-bottom)) !important;
    }
}

@media (max-width: 420px) {

    .product-nav .product-brand img {
        width: 88px !important;
        height: 34px !important;
    }

    .product-nav .product-links
    > a.k4w-mobile-main {
        font-size: 9px !important;
    }
}



/* =====================================================
   K4W AUTO — CONFIGURAÇÃO MÓVEL V3.2
   ===================================================== */

/* Computador: configuração continua no cabeçalho */
@media (min-width: 1025px) {
    .product-nav .user-dropdown .k4w-admin-mobile {
        display: none !important;
    }
}

/* Telemóvel e tablet */
@media (max-width: 1024px) {

    /* Menu do utilizador com deslocamento vertical */
    .product-nav .user-dropdown {
        top: 72px !important;
        bottom: auto !important;
        max-height: min(65dvh, 480px) !important;
        overflow-y: auto !important;
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
        padding: 6px !important;
    }

    /* Opção Configuração no avatar */
    .product-nav .user-dropdown .k4w-admin-mobile {
        display: flex !important;
    }

    /* Entradas mais compactas */
    .product-nav .user-dropdown a,
    .product-nav .user-dropdown button {
        padding: 9px 11px !important;
        line-height: 1.2 !important;
    }

    .product-nav .user-dropdown small {
        margin-top: 2px;
        font-size: 11px !important;
    }

    /* Esconder apenas o ícone de configuração
       no cabeçalho móvel */
    .product-nav .product-user > .settings-link {
        display: none !important;
    }
}


/* =====================================================
   CPB-MENU-ESPACAMENTO-DESKTOP-V1
   Melhorar separação dos botões no computador.
   Não altera a navegação móvel.
   ===================================================== */

@media (min-width: 1025px) {

    .product-nav .product-links {
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 5px;
        overflow-x: auto;
        overflow-y: hidden;
        flex-wrap: nowrap;
    }

    .product-nav .product-links > a {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        flex: 0 0 auto;
        gap: 6px;
        padding: 9px 12px;
        min-height: 40px;
        line-height: 1.2;
    }

}


/* =====================================================
   CPB-MENU-DISTRIBUICAO-DESKTOP-V1
   Distribuição equilibrada dos botões.
   Apenas computadores.
   ===================================================== */

@media (min-width: 1025px) {

    .product-nav .product-links {
        justify-content: space-between;
        column-gap: 8px;
    }

}


/* =====================================================
   CPB-MENU-DISTRIBUICAO-FLEX-V2
   Aproveitamento da largura disponível.
   Apenas computadores.
   ===================================================== */

@media (min-width: 1025px) {

    .product-nav .product-links {
        justify-content: space-between;
        gap: 8px;
    }

    .product-nav .product-links > a:not(.nav-icon-only) {
        flex: 1 1 auto;
    }

    .product-nav .product-links > a.nav-icon-only {
        flex: 0 0 40px;
    }

}


/* CPB-MENU-DESKTOP-CONSOLIDADO-V3 */

/*
 * CPB — MENU DESKTOP ADAPTATIVO
 *
 * Prioridade:
 * 1. Marca
 * 2. Botão Nova marcação
 * 3. Utilizador e CPB Frota
 * 4. Restantes atalhos
 *
 * A barra central adapta os atalhos à largura.
 */

@media (min-width: 1025px) {

    .product-nav > .container {
        display: grid !important;

        grid-template-columns:
            auto minmax(0, 1fr) auto !important;

        align-items: center !important;
        gap: 8px !important;

        width: 100% !important;
        min-width: 0 !important;
    }

    /* Marca */

    .product-nav .product-brand {
        display: flex !important;
        align-items: center !important;

        width: auto !important;
        min-width: 0 !important;

        flex-shrink: 0 !important;
    }

    .product-nav .product-brand img {
        width: 120px !important;
        height: 48px !important;

        object-fit: contain !important;
        flex-shrink: 0 !important;
    }

    /* Barra central */

    .product-nav .product-links {
        display: flex !important;
        align-items: center !important;

        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;

        gap: 2px !important;
        padding: 5px !important;

        flex-wrap: nowrap !important;
        justify-content: flex-start !important;

        overflow: visible !important;

        box-sizing: border-box !important;
    }

    /* Atalhos normais */

    .product-nav .product-links > a {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;

        flex: 0 1 auto !important;
        min-width: 0 !important;

        gap: 4px !important;

        padding: 8px 5px !important;

        white-space: nowrap !important;
    }

    /* Ícones secundários */

    .product-nav .product-links > a.nav-icon-only {
        flex: 0 0 28px !important;

        width: 28px !important;
        min-width: 28px !important;

        padding: 0 !important;
    }

    /* Botão Nova marcação */

    .product-nav .product-links > a.create-booking {
        display: inline-flex !important;

        flex: 0 0 auto !important;

        width: max-content !important;
        min-width: max-content !important;

        margin-left: auto !important;

        padding: 10px 12px !important;

        white-space: nowrap !important;
    }

    .product-nav .product-links
    > a.create-booking > span {
        display: inline !important;
    }

    /* Zona direita */

    .product-nav .product-user {
        display: flex !important;
        align-items: center !important;

        width: max-content !important;
        min-width: max-content !important;

        justify-self: end !important;
        flex-wrap: nowrap !important;

        gap: 5px !important;
    }
}

/*
 * Ecrãs até 1700px:
 * reduzir espaçamentos.
 */

@media (min-width: 1025px) and (max-width: 1700px) {

    .product-nav .product-links > a {
        gap: 3px !important;

        padding-left: 4px !important;
        padding-right: 4px !important;
    }

    .product-nav .product-links > a.nav-icon-only {
        flex-basis: 26px !important;

        width: 26px !important;
        min-width: 26px !important;
    }
}

/*
 * Ecrãs até 1550px:
 * atalhos principais passam a ícones.
 */

@media (min-width: 1025px) and (max-width: 1550px) {

    .product-nav .product-links
    > a:not(.create-booking) {
        flex: 0 0 32px !important;

        width: 32px !important;
        min-width: 32px !important;

        height: 40px !important;

        padding: 0 !important;
        justify-content: center !important;
    }

    .product-nav .product-links
    > a:not(.create-booking) > span {
        display: none !important;
    }

    .product-nav .product-links
    > a.create-booking {
        flex: 0 0 auto !important;
        min-width: max-content !important;
    }
}

/*
 * Ecrãs compactos:
 * reduzir a marca e a identificação.
 */

@media (min-width: 1025px) and (max-width: 1350px) {

    .product-nav .product-brand-copy {
        display: none !important;
    }

    .product-nav .product-brand img {
        width: 100px !important;
        height: 44px !important;
    }

    .product-nav .user-trigger-copy {
        display: none !important;
    }

    .product-nav .product-user {
        gap: 4px !important;
    }

    .product-nav .product-links {
        gap: 1px !important;
    }
}

/*
 * Reserva adicional para o botão principal.
 *
 * Os atalhos secundários cedem espaço
 * antes de Nova marcação.
 */

@media (min-width: 1025px) {

    .product-nav .product-links
    > a:not(.create-booking) {
        flex-shrink: 1 !important;
    }

    .product-nav .product-links
    > a.create-booking {
        flex-shrink: 0 !important;
    }
}


/* CPB-BOTAO-MAIS-COMPACTO-V1 */

@media (min-width: 1025px) {

    .product-nav .product-links > a.create-booking {
        width: 44px !important;
        min-width: 44px !important;
        max-width: 44px !important;
        height: 44px !important;

        flex: 0 0 44px !important;

        padding: 0 !important;
        margin-left: auto !important;

        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;

        background: var(--brand-primary) !important;
        color: #ffffff !important;
        border-radius: 10px !important;
    }

    .product-nav .product-links > a.create-booking > span {
        display: none !important;
    }

    .product-nav .product-links > a.create-booking > svg {
        display: block !important;
        width: 20px !important;
        height: 20px !important;
        flex: 0 0 20px !important;
    }
}


/* CPB-DESKTOP-TEXTOS-V1 */

@media (min-width: 1025px) {

    /* Recuperar textos dos menus principais */
    .product-nav .product-links > a:not(.nav-icon-only):not(.create-booking) {
        width: auto !important;
        min-width: 0 !important;
        height: auto !important;
        flex: 0 1 auto !important;
        padding: 8px 7px !important;
        gap: 5px !important;
    }

    .product-nav .product-links > a:not(.nav-icon-only):not(.create-booking) > span {
        display: inline !important;
        width: auto !important;
        max-width: none !important;
        overflow: visible !important;
        text-overflow: clip !important;
    }

    /* Atalhos secundários continuam compactos */
    .product-nav .product-links > a.nav-icon-only {
        flex: 0 0 28px !important;
        width: 28px !important;
        min-width: 28px !important;
        padding: 0 !important;
    }

    /* Preservar o botão azul com apenas + */
    .product-nav .product-links > a.create-booking {
        width: 44px !important;
        min-width: 44px !important;
        max-width: 44px !important;
        height: 44px !important;
        flex: 0 0 44px !important;
        padding: 0 !important;
        justify-content: center !important;
    }

    .product-nav .product-links > a.create-booking > span {
        display: none !important;
    }
}