/* ==================================================================
 * WebWorld — Lagom2 Custom CSS  (v5 — polish)
 * Location: templates/lagom2/core/styles/modern/assets/css/custom.css
 *
 * v5 vs v4:
 *   * Rail active: flat 0-radius well, red edge only, nothing rounded.
 *   * Flyout chrome: 12px radius, #E6E8EB border, 8px padding, 8px
 *     offset from the rail, 36px row height, hover #F5F6F7 8px radius.
 *   * Store / long lists: guarantees top:0 bottom:0 space so 70vh
 *     max-height + overflow-y auto shows ALL items with a scroll.
 *   * Account drawer inherits the same chrome + link rules.
 *   * Real <img> colour wordmark placed in the top bar via a
 *     top-nav.tpl overwrite (see sibling file). CSS positions it.
 *   * No page-title / .app-main / header background rules. Nothing
 *     leaks onto the "DNS Manager" or "My Dashboard" bar.
 * ================================================================== */


/* ------------------------------------------------------------------
 * Scroll + unclip (2026-09-23 + v4 cap).
 * ------------------------------------------------------------------ */
.dropdown-menu,
.app-nav-menu .menu > li .dropdown-menu,
body > .dropdown-menu {
    max-height: min(70vh, 480px) !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    height: auto !important;
    overscroll-behavior: contain;
}
.dropdown-menu::-webkit-scrollbar,
body > .dropdown-menu::-webkit-scrollbar {
    width: 6px;
}
.dropdown-menu::-webkit-scrollbar-thumb,
body > .dropdown-menu::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.22);
    border-radius: 3px;
}
.dropdown-menu::-webkit-scrollbar-thumb:hover,
body > .dropdown-menu::-webkit-scrollbar-thumb:hover {
    background: rgba(0, 0, 0, 0.36);
}


/* ==================================================================
 * WHITE FLYOUT CHROME (Job 2)
 * ================================================================== */
.app-nav-menu .menu > li .dropdown-menu,
body > .dropdown-menu {
    background: #FFFFFF !important;
    color: #111827 !important;
    border: 1px solid #E6E8EB !important;
    border-radius: 12px !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12) !important;
    padding: 8px !important;
}

/* Rail flyouts: 8px off the rail so they don't cover "My Dashboard" */
@media (min-width: 992px) {
    .app-nav-menu .menu > li .dropdown-menu {
        margin-left: 8px !important;
        min-width: 240px !important;
        max-width: 280px !important;
        width: 280px !important;

        /* Give the panel room to be 70vh tall from top of viewport */
        top: 8px !important;
        bottom: auto !important;
    }
}

/* Kill any stock white/faded backgrounds on inner list wrappers */
.dropdown-menu ul,
.dropdown-menu ol,
.dropdown-menu li,
.dropdown-menu .dropdown-menu-content,
.dropdown-menu .dropdown-menu-list,
.dropdown-menu .dropdown-menu-parent,
.dropdown-menu .dropdown-menu-body,
.dropdown-menu .dropdown-menu-item {
    background: transparent !important;
    background-color: transparent !important;
    color: #111827 !important;
}

/* Section labels */
.dropdown-menu .nav-header,
.dropdown-menu .dropdown-header,
.dropdown-menu .dropdown-menu-content .nav-header,
body > .dropdown-menu .nav-header {
    color: #6B7280 !important;
    font-size: 11px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.04em !important;
    font-weight: 600 !important;
    padding: 8px 12px 4px !important;
    background: transparent !important;
    border: 0 !important;
}

/* Links — 36px row height, dark ink, 8px hover pill */
.dropdown-menu a,
.dropdown-menu li > a,
.dropdown-menu li > a > span,
.dropdown-menu .dropdown-menu-item a,
.dropdown-menu .dropdown-menu-item > a,
.dropdown-menu .dropdown-menu-item > a > span,
.dropdown-menu .menu-item-content,
.dropdown-menu .menu-item-title,
.dropdown-menu .menu-item-desc,
.app-nav .dropdown-menu a,
body > .dropdown-menu a,
body > .dropdown-menu li > a,
body > .dropdown-menu li > a > span {
    color: #111827 !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    line-height: 20px !important;
    opacity: 1 !important;
}

.dropdown-menu li > a,
.dropdown-menu .dropdown-menu-item > a,
body > .dropdown-menu li > a {
    min-height: 36px !important;
    display: flex !important;
    align-items: center !important;
    padding: 8px 12px !important;
    border-radius: 8px !important;
    background: transparent !important;
    background-color: transparent !important;
    transition: background .12s ease !important;
}

.dropdown-menu a:hover,
.dropdown-menu a:focus,
.dropdown-menu li > a:hover,
.dropdown-menu li > a:focus,
.dropdown-menu li.active > a,
.dropdown-menu li > a.active,
.dropdown-menu .dropdown-menu-item > a:hover,
.dropdown-menu .dropdown-menu-item.active > a,
.app-nav .dropdown-menu a:hover,
body > .dropdown-menu a:hover {
    color: #111827 !important;
    background: #F5F6F7 !important;
    background-color: #F5F6F7 !important;
}

/* Badges (My Domains 75, Support open ticket count) */
.dropdown-menu .badge,
.dropdown-menu .label,
body > .dropdown-menu .badge {
    color: #374151 !important;
    background: #E5E7EB !important;
    background-color: #E5E7EB !important;
    font-weight: 500 !important;
    border-radius: 10px !important;
    padding: 2px 8px !important;
    margin-left: auto !important;
}

/* Dividers */
.dropdown-menu .divider,
.dropdown-menu .dropdown-divider,
body > .dropdown-menu .divider {
    background: #E5E7EB !important;
    border-color: #E5E7EB !important;
    margin: 6px 12px !important;
    height: 1px !important;
}

/* Icons in flyout rows */
.dropdown-menu li > a > i,
.dropdown-menu li > a > .ls,
.dropdown-menu li > a > .lm,
body > .dropdown-menu li > a > i {
    color: #6B7280 !important;
    margin-right: 8px !important;
}


/* ==================================================================
 * ACCOUNT DRAWER (top-right user menu) — Job 3
 * ================================================================== */
.client-account-dropdown,
.top-nav .dropdown-menu,
.top-nav-secondary .dropdown-menu,
.header .dropdown-menu,
#client-account-menu,
.client-account-menu {
    background: #FFFFFF !important;
    color: #111827 !important;
    border: 1px solid #E6E8EB !important;
    border-radius: 12px !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12) !important;
    padding: 8px !important;
    max-height: min(70vh, 480px) !important;
    overflow-y: auto !important;
}
.client-account-dropdown a,
.top-nav .dropdown-menu a,
.header .dropdown-menu a,
#client-account-menu a,
.client-account-menu a {
    color: #111827 !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    opacity: 1 !important;
    min-height: 36px !important;
    padding: 8px 12px !important;
    border-radius: 8px !important;
    background: transparent !important;
}
.client-account-dropdown a:hover,
.top-nav .dropdown-menu a:hover,
.header .dropdown-menu a:hover,
#client-account-menu a:hover,
.client-account-menu a:hover {
    color: #111827 !important;
    background: #F5F6F7 !important;
}


/* ==================================================================
 * RAIL CHROME (Job 1) — flat, no rounded pill on active state
 * ================================================================== */
@media (min-width: 992px) {

    .app-nav {
        background: #22272E !important;
        border-right: 1px solid #2F353E !important;
        width: 72px !important;
        min-width: 72px !important;
        max-width: 72px !important;
    }

    .app-nav .app-nav-header,
    .app-nav .sidebar-logo,
    .app-nav .logo {
        background: transparent !important;
        padding: 12px 0 !important;
        text-align: center !important;
    }
    .app-nav .logo img,
    .app-nav .sidebar-logo img {
        max-width: 40px !important;
        height: auto !important;
        margin: 0 auto !important;
    }

    /* Idle rail item */
    .app-nav-menu .menu > li > a {
        color: #D0D5DD !important;
        background: transparent !important;
        border-radius: 0 !important;
        min-height: 56px !important;
        padding: 12px 0 !important;
        margin: 0 !important;
        justify-content: center !important;
        position: relative !important;
        transition: color .15s ease, background .15s ease !important;
    }
    .app-nav-menu .menu > li > a > i,
    .app-nav-menu .menu > li > a > svg,
    .app-nav-menu .menu > li > a > .ls,
    .app-nav-menu .menu > li > a > .lm {
        color: #D0D5DD !important;
        width: 20px !important;
        height: 20px !important;
        font-size: 20px !important;
        margin: 0 !important;
    }
    .app-nav-menu .menu > li > a > span:not(.badge):not(.caret) {
        display: none !important;
    }

    /* Kill the stock "bottom red bar" indicator so we only show the
       left-edge indicator. */
    .app-nav-menu .menu > li.active > a:not(.btn)::after,
    .app-nav-menu .menu > li.sfHover > a:not(.btn)::after,
    .app-nav-menu .menu > li.open > a:not(.btn)::after,
    .app-nav-menu .menu > li.show > a:not(.btn)::after {
        display: none !important;
        content: none !important;
    }

    /* Hover / open / active — flat well, 3px red left edge, NO pill */
    .app-nav-menu .menu > li:hover > a,
    .app-nav-menu .menu > li:focus-within > a,
    .app-nav-menu .menu > li.sfHover > a,
    .app-nav-menu .menu > li.open > a,
    .app-nav-menu .menu > li.show > a,
    .app-nav-menu .menu > li.active > a,
    .app-nav-menu .menu > li.active:not(.open) > a,
    .app-nav-menu .menu > li:has(.dropdown-menu li.active) > a,
    .app-nav-menu .menu > li:has(.dropdown-menu a.active) > a {
        color: #FFFFFF !important;
        background: #2C333A !important;
        background-color: #2C333A !important;
        border-radius: 0 !important;
        box-shadow: inset 3px 0 0 #E10600 !important;
        margin: 0 !important;
    }
    .app-nav-menu .menu > li:hover > a > i,
    .app-nav-menu .menu > li:hover > a > svg,
    .app-nav-menu .menu > li.sfHover > a > i,
    .app-nav-menu .menu > li.sfHover > a > svg,
    .app-nav-menu .menu > li.active > a > i,
    .app-nav-menu .menu > li.active > a > svg,
    .app-nav-menu .menu > li.open > a > i,
    .app-nav-menu .menu > li.open > a > svg {
        color: #FFFFFF !important;
    }

    /* Store hairline above the last rail item */
    .app-nav-menu .menu > li:last-child {
        margin-top: 8px !important;
        position: relative;
    }
    .app-nav-menu .menu > li:last-child::before {
        content: "";
        display: block;
        height: 1px;
        margin: 0 12px 8px;
        background: #2F353E;
    }

}   /* end @media (min-width: 992px) */


/* ==================================================================
 * WORDMARK  (Job 4)
 * The real <img> lives in a template overwrite at
 * templates/lagom2/includes/menu/overwrites/top-nav.tpl.
 * Positioned via CSS only.
 * ================================================================== */
img.ww-header-wordmark {
    position: fixed;
    top: 20px;
    left: 88px;               /* 72px rail + 16px gap */
    height: 24px;
    width: auto;
    z-index: 60;
    display: inline-block;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

/* On mobile the rail collapses; drop the wordmark into normal flow. */
@media (max-width: 991.98px) {
    img.ww-header-wordmark {
        position: static;
        display: none;        /* Mobile keeps stock Lagom hamburger + brand */
    }
}