/* HostGI navigation refinements. All rules are scoped so dropdown text
           remains visible on mobile and the original Lagom behaviour is kept. */
        .app-nav-header {
            overflow: visible !important;
            background: #ffffff !important;
        }

        .app-nav-header > .container {
            display: flex !important;
            align-items: center !important;
            gap: 12px !important;
            padding-left: 12px !important;
            padding-right: 12px !important;
            overflow: visible !important;
        }

        /* Mobile menu toggle */
        .app-nav-header .app-nav-toggle {
            position: relative !important;
            display: flex !important;
            align-items: center !important;
            justify-content: center !important;
            flex: 0 0 42px !important;
            width: 42px !important;
            height: 42px !important;
            min-width: 42px !important;
            margin: 0 !important;
            padding: 0 !important;
            border: 0 !important;
            background: transparent !important;
            box-shadow: none !important;
            opacity: 1 !important;
            visibility: visible !important;
            z-index: 1002 !important;
            cursor: pointer !important;
        }

        .app-nav-header .app-nav-toggle .icon-bar {
            display: block !important;
            left: 6px !important;
            right: auto !important;
            width: 30px !important;
            height: 4px !important;
            margin: 0 !important;
            border-radius: 20px !important;
            background: #008000 !important;
        }

        .app-nav-header .app-nav-toggle .icon-bar:nth-child(1),
        .app-nav-header .app-nav-toggle .icon-bar:nth-child(2) {
            top: 9px !important;
        }

        .app-nav-header .app-nav-toggle .icon-bar:nth-child(3) {
            top: 19px !important;
        }

        .app-nav-header .app-nav-toggle .icon-bar:nth-child(4) {
            top: 29px !important;
        }

        .menu-open .app-nav-header .app-nav-toggle .icon-bar:first-child,
        .menu-open .app-nav-header .app-nav-toggle .icon-bar:nth-child(4) {
            top: 20px !important;
            width: 0 !important;
            left: 21px !important;
        }

        .menu-open .app-nav-header .app-nav-toggle .icon-bar:nth-child(2) {
            top: 19px !important;
            left: 7px !important;
            width: 28px !important;
            transform: rotate(45deg) !important;
        }

        .menu-open .app-nav-header .app-nav-toggle .icon-bar:nth-child(3) {
            top: 19px !important;
            left: 7px !important;
            width: 28px !important;
            transform: rotate(-45deg) !important;
        }

        /* Logo */
        .app-nav-header > .container > .logo,
        .app-nav-header > .container > .navbar-brand {
            display: inline-flex !important;
            align-items: center !important;
            justify-content: center !important;
            flex: 0 0 42px !important;
            width: 42px !important;
            height: 42px !important;
            min-width: 42px !important;
            padding: 0 !important;
            margin: 0 !important;
            border: 0 !important;
            background: transparent !important;
            box-shadow: none !important;
            overflow: visible !important;
        }

        .app-nav-header > .container > .logo:before,
        .app-nav-header > .container > .logo:after,
        .app-nav-header > .container > .navbar-brand:before,
        .app-nav-header > .container > .navbar-brand:after {
            display: none !important;
            content: none !important;
        }

        .app-nav-header > .container > .logo img,
        .app-nav-header > .container > .navbar-brand img {
            display: block !important;
            width: auto !important;
            height: auto !important;
            max-width: 42px !important;
            max-height: 42px !important;
            object-fit: contain !important;
        }

        /* Cart, notifications and account icons */
        .app-nav-header > .container > ul.top-nav {
            display: flex !important;
            align-items: center !important;
            justify-content: flex-end !important;
            flex-wrap: nowrap !important;
            gap: 12px !important;
            margin: 0 2px 0 auto !important;
            padding: 0 !important;
            white-space: nowrap !important;
            overflow: visible !important;
        }

        .app-nav-header > .container > ul.top-nav > li.hostgi-menu-item {
            position: relative !important;
            display: flex !important;
            align-items: center !important;
            justify-content: center !important;
            flex: 0 0 42px !important;
            width: 42px !important;
            height: 42px !important;
            min-width: 42px !important;
            margin: 0 !important;
            padding: 0 !important;
        }

        .app-nav-header > .container > ul.top-nav > li.hostgi-menu-item > a.hostgi-menu-link {
            position: relative !important;
            display: inline-flex !important;
            align-items: center !important;
            justify-content: center !important;
            width: 42px !important;
            height: 42px !important;
            min-width: 42px !important;
            min-height: 42px !important;
            margin: 0 !important;
            padding: 0 !important;
            border: 0 !important;
            border-radius: 12px !important;
            color: #008000 !important;
            background: rgba(0, 128, 0, .06) !important;
            box-shadow: inset 0 0 0 1px rgba(0, 128, 0, .14) !important;
            overflow: visible !important;
            transform: none !important;
        }

        .app-nav-header > .container > ul.top-nav > li.hostgi-menu-item > a.hostgi-menu-link:hover,
        .app-nav-header > .container > ul.top-nav > li.hostgi-menu-item.open > a.hostgi-menu-link,
        .app-nav-header > .container > ul.top-nav > li.hostgi-menu-item.show > a.hostgi-menu-link {
            color: #008000 !important;
            background: rgba(0, 128, 0, .11) !important;
            box-shadow:
                inset 0 0 0 1px rgba(0, 128, 0, .20),
                0 5px 14px rgba(0, 128, 0, .10) !important;
        }

        .app-nav-header > .container > ul.top-nav > li.hostgi-menu-item > a.hostgi-menu-link:before,
        .app-nav-header > .container > ul.top-nav > li.hostgi-menu-item > a.hostgi-menu-link:after {
            display: none !important;
            content: none !important;
        }

        .app-nav-header > .container > ul.top-nav > li.hostgi-menu-item > a.hostgi-menu-link > .hostgi-menu-icon {
            display: inline-flex !important;
            align-items: center !important;
            justify-content: center !important;
            width: 100% !important;
            height: 100% !important;
            min-width: 0 !important;
            margin: 0 !important;
            padding: 0 !important;
            border-radius: inherit !important;
            color: #008000 !important;
            background: transparent !important;
            box-shadow: none !important;
        }

        .app-nav-header > .container > ul.top-nav > li.hostgi-menu-item > a.hostgi-menu-link i,
        .app-nav-header > .container > ul.top-nav > li.hostgi-menu-item > a.hostgi-menu-link .ls,
        .app-nav-header > .container > ul.top-nav > li.hostgi-menu-item > a.hostgi-menu-link .lm,
        .app-nav-header > .container > ul.top-nav > li.hostgi-menu-item > a.hostgi-menu-link .fa,
        .app-nav-header > .container > ul.top-nav > li.hostgi-menu-item > a.hostgi-menu-link .fas {
            display: block !important;
            margin: 0 !important;
            color: #008000 !important;
            font-size: 21px !important;
            line-height: 1 !important;
            text-align: center !important;
        }

        /* Only the direct header labels are hidden. Dropdown labels stay visible. */
        .app-nav-header > .container > ul.top-nav > li.hostgi-menu-item > a.hostgi-menu-link > .item-text,
        .app-nav-header > .container > ul.top-nav > li.hostgi-menu-item > a.hostgi-menu-link > .active-client,
        .app-nav-header > .container > ul.top-nav > li.hostgi-menu-item > a.hostgi-menu-link > .hostgi-caret {
            display: none !important;
        }

        .app-nav-header > .container > ul.top-nav > li.hostgi-menu-item > a.hostgi-menu-link .badge,
        .app-nav-header > .container > ul.top-nav > li.hostgi-menu-item > a.hostgi-menu-link .badge-dot,
        .app-nav-header > .container > ul.top-nav > li.hostgi-menu-item > a.hostgi-menu-link .badge-icon {
            position: absolute !important;
            top: -3px !important;
            right: -3px !important;
            left: auto !important;
            z-index: 3 !important;
        }

        /* Header dropdown panels: account and notifications */
        .app-nav-header ul.top-nav > li > .dropdown-menu.hostgi-dropdown {
            left: auto !important;
            right: 0 !important;
            width: 310px !important;
            max-width: calc(100vw - 20px) !important;
            margin: 10px 0 0 !important;
            padding: 10px !important;
            border: 1px solid #e8edf3 !important;
            border-radius: 18px !important;
            background: #ffffff !important;
            box-shadow: 0 16px 38px rgba(15, 23, 42, .16) !important;
            max-height: calc(100vh - 96px) !important;
            overflow-x: hidden !important;
            overflow-y: auto !important;
            -webkit-overflow-scrolling: touch !important;
        }

        .app-nav-header ul.top-nav > li.my-account > .dropdown-menu.hostgi-dropdown,
        .app-nav-header ul.top-nav > li.account > .dropdown-menu.hostgi-dropdown {
            width: 330px !important;
        }

        .app-nav-header ul.top-nav > li > .dropdown-menu.hostgi-dropdown > li {
            width: 100% !important;
            margin: 0 !important;
            padding: 0 !important;
        }

        .app-nav-header ul.top-nav > li > .dropdown-menu.hostgi-dropdown > li + li {
            margin-top: 7px !important;
        }

        .app-nav-header ul.top-nav > li > .dropdown-menu.hostgi-dropdown .hostgi-submenu-link {
            display: flex !important;
            align-items: center !important;
            gap: 12px !important;
            width: 100% !important;
            min-height: 48px !important;
            margin: 0 !important;
            padding: 11px 13px !important;
            border: 1px solid #edf1f5 !important;
            border-radius: 13px !important;
            color: #111827 !important;
            background: #ffffff !important;
            box-shadow: 0 5px 14px rgba(15, 23, 42, .05) !important;
            white-space: normal !important;
            text-decoration: none !important;
        }

        .app-nav-header ul.top-nav > li > .dropdown-menu.hostgi-dropdown .hostgi-submenu-link:hover {
            color: #008000 !important;
            background: rgba(0, 128, 0, .04) !important;
            border-color: rgba(0, 128, 0, .18) !important;
            transform: none !important;
        }

        .app-nav-header ul.top-nav > li > .dropdown-menu.hostgi-dropdown .hostgi-submenu-link > i {
            flex: 0 0 24px !important;
            width: 24px !important;
            height: 24px !important;
            margin: 0 !important;
            color: #8b95a5 !important;
            font-size: 20px !important;
            line-height: 24px !important;
            text-align: center !important;
        }

        .app-nav-header ul.top-nav > li > .dropdown-menu.hostgi-dropdown .hostgi-submenu-text,
        .app-nav-header ul.top-nav > li > .dropdown-menu.hostgi-dropdown .item-text,
        .app-nav-header ul.top-nav > li > .dropdown-menu.hostgi-dropdown .message,
        .app-nav-header ul.top-nav > li > .dropdown-menu.hostgi-dropdown .active-client {
            display: block !important;
            min-width: 0 !important;
            margin: 0 !important;
            color: inherit !important;
            font-size: 14px !important;
            font-weight: 600 !important;
            line-height: 1.45 !important;
            white-space: normal !important;
            opacity: 1 !important;
            visibility: visible !important;
        }

        .app-nav-header ul.top-nav .client-alerts {
            width: 320px !important;
            max-width: calc(100vw - 20px) !important;
            margin-left: 0 !important;
        }

        .app-nav-header ul.top-nav .client-alerts .client-alerts-header,
        .app-nav-header ul.top-nav .dropdown-header,
        .app-nav-header ul.top-nav .dropdown-header--account {
            display: flex !important;
            align-items: center !important;
            min-height: 44px !important;
            padding: 10px 12px !important;
            color: #8993a4 !important;
            font-size: 13px !important;
            white-space: normal !important;
        }

        .app-nav-header ul.top-nav .client-alerts li a {
            display: flex !important;
            align-items: flex-start !important;
            gap: 12px !important;
            min-height: 48px !important;
            padding: 12px !important;
            border: 1px solid #edf1f5 !important;
            border-radius: 13px !important;
            background: #ffffff !important;
            color: #111827 !important;
            white-space: normal !important;
        }

        .app-nav-header ul.top-nav .client-alerts li a .message {
            flex: 1 1 auto !important;
            margin-left: 0 !important;
        }

        /* Primary mobile/left menu cards. Kept separate from top dropdowns. */
        .app-nav-menu .menu-primary > .hostgi-menu-item {
            margin: 0 12px 12px !important;
        }

        .app-nav-menu .menu-primary > .hostgi-menu-item > .hostgi-menu-link {
            position: relative !important;
            display: flex !important;
            align-items: center !important;
            width: auto !important;
            min-height: 62px !important;
            padding: 13px 16px !important;
            border-radius: 18px !important;
            color: #111827 !important;
            text-decoration: none !important;
            overflow: hidden !important;
            background: #ffffff !important;
            box-shadow:
                0 8px 22px rgba(15, 23, 42, .08),
                inset 0 0 0 1px rgba(226, 232, 240, .95) !important;
            transition: transform .22s ease, box-shadow .22s ease !important;
            z-index: 1 !important;
        }

        .app-nav-menu .menu-primary > .hostgi-menu-item > .hostgi-menu-link:before {
            content: "" !important;
            position: absolute !important;
            inset: -2px !important;
            display: block !important;
            border-radius: 20px !important;
            background: linear-gradient(90deg,#00d9ff,#7c3cff,#ff00cc,#00ff66,#00d9ff) !important;
            background-size: 350% 350% !important;
            animation: hostgiSoftRgb 10s linear infinite !important;
            opacity: .30 !important;
            z-index: -2 !important;
        }

        .app-nav-menu .menu-primary > .hostgi-menu-item > .hostgi-menu-link:after {
            content: "" !important;
            position: absolute !important;
            inset: 2px !important;
            display: block !important;
            border-radius: 16px !important;
            background: #ffffff !important;
            z-index: -1 !important;
        }

        .app-nav-menu .menu-primary > .hostgi-menu-item > .hostgi-menu-link:hover {
            color: #008000 !important;
            transform: translateY(-2px) !important;
            box-shadow:
                0 12px 26px rgba(15, 23, 42, .12),
                0 0 14px rgba(0, 255, 102, .18) !important;
        }

        .app-nav-menu .menu-primary > .hostgi-menu-item > .hostgi-menu-link > .hostgi-menu-icon {
            display: inline-flex !important;
            align-items: center !important;
            justify-content: center !important;
            flex: 0 0 42px !important;
            width: 42px !important;
            height: 42px !important;
            min-width: 42px !important;
            margin: 0 16px 0 0 !important;
            padding: 0 !important;
            border-radius: 14px !important;
            color: #008000 !important;
            background: rgba(0, 128, 0, .08) !important;
            box-shadow: inset 0 0 0 1px rgba(0, 128, 0, .12) !important;
        }

        .app-nav-menu .menu-primary > .hostgi-menu-item > .hostgi-menu-link > .hostgi-menu-icon i {
            margin: 0 !important;
            color: inherit !important;
            font-size: 22px !important;
            line-height: 1 !important;
        }

        .app-nav-menu .menu-primary > .hostgi-menu-item > .hostgi-menu-link > .item-text {
            display: block !important;
            flex: 1 1 auto !important;
            min-width: 0 !important;
            margin: 0 !important;
            color: inherit !important;
            font-size: 15px !important;
            font-weight: 700 !important;
            line-height: 1.35 !important;
            white-space: normal !important;
            opacity: 1 !important;
            visibility: visible !important;
        }

        .app-nav-menu .menu-primary > .hostgi-menu-item > .hostgi-menu-link > .hostgi-caret {
            flex: 0 0 auto !important;
            margin-left: auto !important;
            color: #94a3b8 !important;
        }

        .app-nav-menu .menu-primary .hostgi-dropdown {
            margin: 8px 0 0 !important;
            padding: 8px !important;
            border: 0 !important;
            border-radius: 15px !important;
            background: #ffffff !important;
            box-shadow: 0 12px 30px rgba(15, 23, 42, .13) !important;
        }

        .app-nav-menu .menu-primary .hostgi-submenu-link {
            display: flex !important;
            align-items: center !important;
            gap: 11px !important;
            width: 100% !important;
            min-height: 44px !important;
            padding: 10px 12px !important;
            margin: 0 0 6px !important;
            border-radius: 12px !important;
            color: #111827 !important;
            background: #ffffff !important;
            box-shadow:
                0 5px 14px rgba(15, 23, 42, .05),
                inset 0 0 0 1px rgba(226, 232, 240, .95) !important;
            white-space: normal !important;
        }

        .app-nav-menu .menu-primary .hostgi-submenu-link:hover {
            color: #008000 !important;
            transform: translateX(3px) !important;
        }

        .app-nav-menu .menu-primary .hostgi-submenu-text {
            display: block !important;
            min-width: 0 !important;
            color: inherit !important;
            font-size: 14px !important;
            font-weight: 600 !important;
            line-height: 1.4 !important;
            white-space: normal !important;
        }

        @keyframes hostgiSoftRgb {
            0% { background-position: 0% 50%; }
            100% { background-position: 350% 50%; }
        }

        @media (min-width: 992px) {
            .app-nav-header .app-nav-toggle {
                display: none !important;
            }
        }

        @media (max-width: 991.98px) {
            .app-nav-header > .container {
                gap: 10px !important;
                padding-left: 8px !important;
                padding-right: 8px !important;
            }

            .app-nav-header > .container > ul.top-nav {
                gap: 10px !important;
                margin-right: 0 !important;
            }

            .app-nav-header ul.top-nav > li > .dropdown-menu.hostgi-dropdown {
                position: absolute !important;
                top: calc(100% + 8px) !important;
                right: 0 !important;
                left: auto !important;
            }

            .app-nav-header ul.top-nav > li > .dropdown-menu.hostgi-dropdown.client-alerts {
                right: -48px !important;
            }

            /* Override Lagom's generic mobile text hiding only inside dropdowns. */
            .app-nav-header ul.top-nav li .dropdown-menu .item-text,
            .app-nav-header ul.top-nav li .dropdown-menu .hostgi-submenu-text,
            .app-nav-header ul.top-nav li .dropdown-menu .message,
            .app-nav-header ul.top-nav li .dropdown-menu .active-client {
                display: block !important;
            }

            .app-nav-menu .menu-primary > .hostgi-menu-item > .hostgi-menu-link {
                min-height: 66px !important;
            }
        }

        @media (max-width: 420px) {
            .app-nav-header > .container {
                gap: 8px !important;
            }

            .app-nav-header .app-nav-toggle,
            .app-nav-header > .container > .logo,
            .app-nav-header > .container > .navbar-brand,
            .app-nav-header > .container > ul.top-nav > li.hostgi-menu-item,
            .app-nav-header > .container > ul.top-nav > li.hostgi-menu-item > a.hostgi-menu-link {
                flex-basis: 38px !important;
                width: 38px !important;
                height: 38px !important;
                min-width: 38px !important;
                min-height: 38px !important;
            }

            .app-nav-header > .container > .logo img,
            .app-nav-header > .container > .navbar-brand img {
                max-width: 38px !important;
                max-height: 38px !important;
            }

            .app-nav-header > .container > ul.top-nav {
                gap: 8px !important;
            }

            .app-nav-header > .container > ul.top-nav > li.hostgi-menu-item > a.hostgi-menu-link i,
            .app-nav-header > .container > ul.top-nav > li.hostgi-menu-item > a.hostgi-menu-link .ls,
            .app-nav-header > .container > ul.top-nav > li.hostgi-menu-item > a.hostgi-menu-link .lm,
            .app-nav-header > .container > ul.top-nav > li.hostgi-menu-item > a.hostgi-menu-link .fa,
            .app-nav-header > .container > ul.top-nav > li.hostgi-menu-item > a.hostgi-menu-link .fas {
                font-size: 19px !important;
            }

            .app-nav-header ul.top-nav > li > .dropdown-menu.hostgi-dropdown,
            .app-nav-header ul.top-nav .client-alerts {
                width: calc(100vw - 16px) !important;
                max-width: calc(100vw - 16px) !important;
            }

            .app-nav-header ul.top-nav > li.my-account > .dropdown-menu.hostgi-dropdown,
            .app-nav-header ul.top-nav > li.account > .dropdown-menu.hostgi-dropdown {
                right: -4px !important;
            }

            .app-nav-header ul.top-nav > li > .dropdown-menu.hostgi-dropdown.client-alerts {
                right: -48px !important;
            }
        }