/* ===== EasyDoct Kendo Menu — header overrides (E2-KENDO-MENU) ===== */

:root {
    --ed-kendo-top-item-padding: 15px;
    --ed-kendo-app-sub-item-padding: 5px 10px 5px 15px;
    --ed-kendo-config-item-padding: 4px 20px;
    --ed-kendo-config-sub-item-padding: 4px 16px;
    --ed-kendo-customer-sub-item-padding: 10px 25px;
}

/*--------------------------------------------------
    [App mega menu — #appMenu]
----------------------------------------------------*/

#appMenu > .k-menu-item > .k-menu-link > .k-menu-expand-arrow,
#customerMenu > .k-menu-item > .k-menu-link > .k-menu-expand-arrow {
    display: none;
}

/* Strip Kendo's own chrome: no border, no background */
#appMenu.k-widget.k-menu,
#appMenu.k-menu {
    background: transparent;
    border: none;
    box-shadow: none;
    display: inline-flex;
    align-items: center;
}

/* Top-level item links: dark (white navbar), uppercase — matching .navbar-nav > li > a */
#appMenu > .k-item > .k-link,
#appMenu > .k-menu-item > .k-link {
    color: #555;
    font-size: 13px;
    font-weight: 400;
    letter-spacing: 1px;
    text-transform: uppercase;
    padding: var(--ed-kendo-top-item-padding);
    line-height: 23px;
}

/* Hover/focus on top-level items: main color, no background */
#appMenu > .k-item:hover > .k-link,
#appMenu > .k-menu-item:hover > .k-link,
#appMenu > .k-item.k-focus > .k-link,
#appMenu > .k-menu-item.k-focus > .k-link,
#appMenu > .k-item.k-state-active > .k-link,
#appMenu > .k-menu-item.k-active > .k-link {
    background: transparent;
    color: var(--ed-main-color);
}

/* Popup panel (submenu group) — white, green top bar, above the page */
#appMenu .k-menu-group,
#appMenu .k-animation-container .k-menu-group {
    background: #fff;
    border: 1px solid #e5e5e5;
    border-top: 3px solid var(--ed-main-color);
    border-radius: 0;
    padding: 0;
    box-shadow: 0 2px 6px rgba(0, 0, 0, .15);
}

#appMenu .k-animation-container {
    margin-top: 32px; /*margin the same as header to avoid miscalculation*/
    z-index: 10000 !important;
}

/* Center the mega panel under the sticky header on desktop.
   position:fixed makes left:50% resolve against the viewport (not the
   right-floated menu item), so translateX(-50%) truly centers it.
   The header is sticky/fixed at the viewport top, so the Kendo-set inline
   `top` stays correct. */
@media (min-width: 992px) {
    #appMenu .k-animation-container {
        position: fixed !important;
        left: 50% !important;
        right: auto !important;
        transform: translateX(-50%);
    }
}

/* The mega item hosting the 3-column content must not look like a menu row */
#appMenu .k-menu-group > .k-item,
#appMenu .k-menu-group > .k-menu-item,
#appMenu .k-menu-group > .k-item:hover,
#appMenu .k-menu-group > .k-menu-item:hover {
    background: transparent;
}

/* Generic Kendo sub-item rows under #appMenu (when present as links) */
#appMenu .k-menu-group .k-item > .k-link,
#appMenu .k-menu-group .k-menu-item > .k-link,
#appMenu .k-menu-group .k-item > a,
#appMenu .k-menu-group .k-menu-item > a {
    padding: var(--ed-kendo-app-sub-item-padding);
    text-decoration: none;
}

#appMenu .ed-kendo-mega-content i:first-of-type,
#appMenu .ed-kendo-mega-content img {
    margin-right: .5em;
}

#appMenu .ed-kendo-mega-content i.fa-caret-right, #customerMenu i.fa-caret-right {
    margin-left: .5em;
    font-size: .8em;
}
    /* Mega content wrapper — the <div> inside the nested <ul><li> */
    #appMenu .k-menu-group .ed-kendo-mega-content,
    .ed-kendo-mega-content {
        min-width: 700px;
        background: #fff;
    }

        /* Restore mega-menu-content layout (same as appMenu.mst.html previously used) */
        .ed-kendo-mega-content .mega-menu-content {
            padding: 20px 15px;
        }

        /* Config sub-menus inside the mega panel (Bootstrap .dropdown-submenu kept as-is) */
        .ed-kendo-mega-content .dropdown-submenu > a {
            display: block;
            padding: var(--ed-kendo-config-item-padding);
            font-size: 14px;
            text-decoration: none;
        }

        .ed-kendo-mega-content .dropdownmenusub {
            position: absolute;
            top: 0;
            left: 130px;
            min-width: 200px;
            max-height: 300px;
            overflow-y: auto;
            overflow-x: hidden;
            white-space: nowrap;
            list-style: none;
            margin: 0;
            padding: 4px 0;
            background: #fff;
            border: 1px solid #ccc;
            border-top: 3px solid var(--ed-main-color);
            box-shadow: 0 2px 6px rgba(0, 0, 0, .15);
            z-index: 1000;
        }

            .ed-kendo-mega-content .dropdownmenusub > a {
                display: block;
                padding: var(--ed-kendo-config-sub-item-padding);
                font-size: 13px;
                color: #555;
                text-decoration: none;
            }

                .ed-kendo-mega-content .dropdownmenusub > a:hover {
                    color: var(--ed-main-color);
                }

/*--------------------------------------------------
    [Customer menu — #customerMenu]
----------------------------------------------------*/

/* Strip Kendo chrome */
#customerMenu.k-widget.k-menu,
#customerMenu.k-menu {
    background: transparent;
    border: none;
    box-shadow: none;
    display: inline-flex;
    align-items: center;
}

/* Top-level item link: dark (white navbar), like the previous dropdown-toggle */
#customerMenu > .k-item > .k-link,
#customerMenu > .k-menu-item > .k-link {
    color: #555;
    font-size: 13px;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 1px;
    padding: var(--ed-kendo-top-item-padding);
    line-height: 23px;
}

/* Hover/focus on trigger: main color, no background */
#customerMenu > .k-item:hover > .k-link,
#customerMenu > .k-menu-item:hover > .k-link,
#customerMenu > .k-item.k-focus > .k-link,
#customerMenu > .k-menu-item.k-focus > .k-link,
#customerMenu > .k-item.k-state-active > .k-link,
#customerMenu > .k-menu-item.k-active > .k-link {
    background: transparent;
    color: var(--ed-main-color);
}

/* Dropdown panel */
#customerMenu .k-menu-group,
#customerMenu .k-animation-container .k-menu-group {
    background: #fff;
    border: 1px solid #e5e5e5;
    border-radius: 0;
    min-width: 180px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, .15);
}

#customerMenu .k-animation-container {
    z-index: 10000 !important;
}

/* Sub-items inside customer dropdown */
#customerMenu .k-menu-group .k-item > .k-link,
#customerMenu .k-menu-group .k-menu-item > .k-link,
#customerMenu .k-menu-group .k-item > a,
#customerMenu .k-menu-group .k-menu-item > a {
    color: #777;
    font-size: 13px;
    font-weight: normal;
    text-transform: none;
    letter-spacing: 0;
    font-weight: 400;
    padding: var(--ed-kendo-customer-sub-item-padding);
    text-decoration: none;
}

#customerMenu .k-menu-group .k-item:hover > .k-link,
#customerMenu .k-menu-group .k-menu-item:hover > .k-link,
#customerMenu .k-menu-group .k-item:hover > a,
#customerMenu .k-menu-group .k-menu-item:hover > a {
    background-color: #f5f5f5;
    color: var(--ed-main-color);
}

/* Separator */
#customerMenu .k-separator {
    height: 1px;
    background: #e5e5e5;
    margin: 0;
    padding: 0;
}

/* "Se connecter" plain link (shown when not connected) */
#customerMenuContainer > a {
    color: #555;
    font-size: 13px;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 1px;
    padding: var(--ed-kendo-top-item-padding);
    display: inline-block;
    line-height: 23px;
    text-decoration: none;
}
#customerMenuContainer  li.k-disabled {
    opacity: 1;
}
/*--------------------------------------------------
    [Shrink state — .header-fixed-shrink]
    JS in app.js adds this class to .header-sticky when scrolled > 100px
----------------------------------------------------*/
.header-fixed .header-v6.header-fixed-shrink #appMenu > .k-item > .k-link,
.header-fixed .header-v6.header-fixed-shrink #customerMenu > .k-item > .k-link,
.header-fixed .header-v6.header-fixed-shrink #customerMenuContainer > a {
    color: #555;
}

/*--------------------------------------------------
    [Responsive — Bootstrap collapse wraps the Kendo menu on mobile]
    Kendo Menu items become stacked inside .navbar-responsive-collapse
----------------------------------------------------*/

@media (max-width: 991px) {
    .header-v6 .navbar-responsive-collapse .navbar-nav {
        float: none;
        margin: 8px 10px 12px;
    }

    /* Each Kendo menu lives inside a single navbar <li> wrapper, so borders go
       on the individual Kendo items rather than on the wrapper. */
    .header-v6 .navbar-responsive-collapse .navbar-nav > li {
        float: none;
        width: 100%;
    }

    #appMenu.k-menu,
    #customerMenu.k-menu {
        display: block;
        width: 100%;
    }

    #appMenu > .k-item,
    #appMenu > .k-menu-item,
    #customerMenu > .k-item,
    #customerMenu > .k-menu-item {
        display: block;
        width: 100%;
        border-top: 1px solid #e5e5e5;
    }

    #customerMenu > .k-item:last-child,
    #customerMenu > .k-menu-item:last-child {
        border-bottom: 1px solid #e5e5e5;
    }

    #appMenu > .k-item > .k-link,
    #appMenu > .k-menu-item > .k-link,
    #customerMenu > .k-item > .k-link,
    #customerMenu > .k-menu-item > .k-link {
        color: #555;
        padding: 12px 0;
        line-height: 22px;
    }

    /* --- App mega panel: render inline & full-width instead of an off-screen
       absolutely-positioned 700px popup that overflows the viewport.
       The customer dropdown is treated the same way: on mobile the header is
       position:static (no stacking context), so an absolute popup renders
       *under* the page content — expanding it inline avoids that entirely. --- */
    #appMenu .k-animation-container,
    #customerMenu .k-animation-container {
        position: static !important;
        width: 100% !important;
        margin-top: 0 !important;
        transform: none !important;
    }

    /* Full-width the whole Kendo popup chain so the inline menu spans the row */
    #appMenu .k-child-animation-container,
    #customerMenu .k-child-animation-container,
    #appMenu .k-menu-popup,
    #customerMenu .k-menu-popup {
        width: 100% !important;
    }

    #appMenu .k-menu-group,
    #appMenu .k-animation-container .k-menu-group,
    #appMenu .k-menu-popup,
    #customerMenu .k-menu-group,
    #customerMenu .k-animation-container .k-menu-group,
    #customerMenu .k-menu-popup {
        width: 100% !important;
        border: 0 !important;
        border-top: 0 !important;
        box-shadow: none !important;
        border-radius: 0;
    }

    /* Desktop caps the customer links at 270px (ellipsis); on mobile let the
       items and the green office header (#OfficeIdZone) span the full row. */
    #customerMenu .k-menu-group .k-link,
    #customerMenu .k-menu-group a,
    #customerMenu #OfficeIdZone {
        max-width: none;
    }

    #appMenu .k-menu-group .ed-kendo-mega-content,
    .ed-kendo-mega-content {
        min-width: 0 !important;
        width: 100% !important;
    }

    .ed-kendo-mega-content .mega-menu-content {
        padding: 0;
    }

    .ed-kendo-mega-content .container {
        width: 100%;
        padding: 0;
    }

    /* --- Nested config submenus: the hover flyout is unreachable on touch, so
       expand them inline (indented accordion) and keep them visible. --- */
    .ed-kendo-mega-content .dropdown-submenu {
        position: static !important;
    }

    .ed-kendo-mega-content .dropdownmenusub {
        position: static !important;
        display: block !important;
        top: auto;
        left: auto;
        min-width: 0;
        max-height: none;
        overflow: visible;
        white-space: normal;
        border: 0;
        border-top: 0;
        box-shadow: none;
        padding: 0 0 4px 28px;
    }

    .ed-kendo-mega-content .dropdown-submenu > a .fa-caret-right {
        display: none;
    }
}