@charset "utf-8";
/* CSS Document */

/* HEADER - CONTAINER FOR CLIENT LOGO; CHANGE SITE; UTILITY MENU
   ========================================================================== */
.main-header {
    grid-area: header;
    display: flex;
    align-items: center;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: var(--region-header-height);
    background-color: var(--iq-color-blue-primary);
    color: var(--iq-color-white);
    z-index: 1004; /* z-index of header should be more than left sidebar for tooltip (change asset) to be visible */
}

    /* MAIN HEADER LINKS */
    .main-header a {
        display: flex;
        justify-content: center;
        align-items: center;
        color: currentColor;
        height: var(--region-header-height);
    }

/* CLIENT LOGO */
.client-logo {
    margin-left: 1.5rem;
}

.client-logo svg {
    width: 4.875rem;
    height: 2rem;
}

/* CHANGE ASSET CONTAINER */
.change-asset {
    margin-right: auto;
    margin-left: 6%;
}

    /* CHANGE ASSET LINK  */
    .change-asset__link {
        gap: var(--iq-space-100);
        padding: 0 1rem;
    }

        /* CHANGE ASSET ICON */
        .change-asset__icon {
            /*margin-right: .5rem;*/
        }

        .change-asset__icon .iq-icon {
            width: var(--iq-icon-md);
            height: var(--iq-icon-md);
        }

        /* CHANGE ASSET LINK-TEXT */
        .change-asset__link-text {
            text-transform: uppercase;
            letter-spacing: .1rem;
        }

        /* CHANGE ASSET TOOLTIP placement (centre)*/
        .change-asset + .tooltip {
            margin-left: 0;
        }

/* UTILITY NAV
   ========================================================================== */
/* UTILITY NAV MENU */
.utility-nav__menu {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    list-style: none;
}

     /* UTILITY NAV LINKS */
    .utility-nav__link {
        justify-content: center;
        align-items: center;
        height: var(--region-header-height);
        width: var(--region-header-height);
    }

        /* UTILITY NAV LINK:HOVER */
        .change-asset__link:hover,
        .utility-nav__link:hover {
            background-color: var(--iq-link-hover-color);
        }

        /* LOGOUT LINK:HOVER */
        .utility-nav__link.logout:hover {
            background-color: var(--iq-color-danger);
        }

        /* UTILITY NAV LINK ICON */
        .utility-nav__link .iq-icon {
            width: var(--iq-icon-md) ;
            height: var(--iq-icon-md) ;
        }

        /* UTILITY NAV ITEM TOOLTIP placement (centre) */
        .utility-nav__item  + .tooltip {
            margin-left: 0;
        }
        /* To centre and avoid tooltip to wrap */
        .utility-nav__item[data-title="Log out"] + .tooltip .tooltip-inner {
            margin-left: -15px;
            white-space: nowrap;
        }

    /* UTILITY NAV DIVIDER */
    .utility-nav__divider {
        display: flex;
        justify-content: center;
        width: 1.5rem;
    }

    .utility-nav__divider > .vr {
        width: 2px;
    }



/* LEFT SIDEBAR - MAIN MENU, MENU SEARCH
   ========================================================================== */
/* LEFT SIDEBAR CONTAINER - container for menu search and main menu */
.disable-transitions *,
.disable-transitions *::before,
.disable-transitions *::after {
    transition: none !important;
}
.left-sidebar {
    grid-area: sidebar;
    position: fixed;
    top: var(--region-header-height);
    bottom: 0;
    display: flex;
    flex-direction: column;
    width: var(--region-menu-width);
    border-right: 1px solid var(--iq-color-grey-40);
    background-color: var(--iq-color-white);
    transition: width var(--iq-duration-500) var(--iq-ease-out); /* animate expand → */
    /** This value is required because of the bootstrap's tooltip that work on stacking order and
    left menu overlay above content on narrow screens **/
    z-index: 1002;

}

@media (max-width: 1399px) {
    .left-sidebar:not(.collapsed){
        box-shadow: var(--iq-shadow-4);
    }
}

.left-sidebar.collapsed {
    width: var(--region-menu-collapsed-width);
    transition: width var(--iq-duration-500) var(--iq-ease-in); /* animate collapse ← */
}

.toggle-left-sidebar {
    position: absolute;
    top: 40px;
    left: 16px;
    z-index: 2;
    transition: left var(--iq-duration-500) var(--iq-ease-in), transform var(--iq-duration-500) var(--iq-ease-in); /* animate collapse ← */
    transform: rotate(0deg);
}

.left-sidebar:not(.collapsed) .toggle-left-sidebar {
    left: 303px;
    transform: rotate(180deg);
    transition: left var(--iq-duration-500) var(--iq-ease-out), transform var(--iq-duration-500) var(--iq-ease-out); /* animate expand → */
}

.left-sidebar-chevron {
    width: 34px;
    height: 34px;
    cursor: pointer;
    background-color: var(--iq-color-white);
    border-radius: var(--iq-border-radius-circle);
    border: solid 1px var(--iq-color-grey-40);
    padding: 10px;
    color: var(--iq-color-grey-300);
    stroke: currentColor;
}

.left-sidebar-chevron:hover {
    border-color: var(--iq-color-blue-primary);
    background-color: var(--iq-color-blue-primary);
    color: var(--iq-color-white);
    stroke: currentColor;
}

.collapsed.initial-load .search-container{
    visibility: hidden;
}

.collapsed.initial-load .side-nav__link-text{
    visibility: hidden;
}

.collapsed.initial-load .side-nav__menu--level-2 {
    display: none;
}

.menu-search--hidden {
    visibility: hidden ;
}

.sidebar-item--hidden {
    display: none;
}

.left-sidebar:not(.collapsed) .tooltip{
    display: none !important;
}

li.settings + .tooltip {
    margin-top: 16px !important;
}

.fade-out {
    animation: fadeOut var(--iq-ease-in) var(--iq-duration-300) forwards;
}

.fade-in {
    opacity: 0;
    animation: fadeIn var(--iq-ease-out) var(--iq-duration-500) forwards;
}

@keyframes fadeOut {
    to {
        opacity: 0;
    }
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

/* MENU CONTAINER */
.side-nav {
    flex: 1;
    width: auto; /* testing - override skin-v5 css */
    padding-bottom: 0.5rem;
    overflow-x: hidden;
    overflow-y: auto;
}

    /* MENU LIST */
    .side-nav__menu {
        margin-bottom: 0;
        /*padding-left: 1.5rem;*/
        list-style: none;
    }

        /* MENU ITEM */
        .side-nav__item {
            position: relative;
        }

            /* MENU ITEM - SELECTED STATE */
            .side-nav__item.is-selected {
                /*background-color: var(--iq-color-grey-20);*/
            }

/* MENU LINK */
.side-nav__link {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: var(--iq-space-100);
    padding-top: .5rem;
    padding-bottom: .5rem;
    color: var(--iq-text-color-light);
    transition: background-color var(--iq-duration-100) var(--iq-ease-out),
                color var(--iq-duration-100) var(--iq-ease-out);
}

    /* MENU LINK:HOVER */
    .side-nav__link:hover {
        color: var(--iq-color-grey-1000);
        background-color: var(--iq-color-grey-20);
    }

/* MENU ICON WRAPPER */
.side-nav__icon {
    /*margin-right: .5rem;*/
}

    /* MENU ICONS - Set default SVG size for menu icons */
    .side-nav__icon .iq-icon {
        width: 1.25rem;
        height: 1.25rem;
        stroke-width: 1.5;
    }

    /* MENU ICONS CHEVRON - Set default SVG size for all chevron icons */
    .side-nav__icon .iq-icon-chevron-right {
        width: 1rem;
        height: 1rem;
        stroke-width: 2;
    }

        /* END NODE ICON - Hide chevron icon on menu items that have no child nodes and is not a primary menu item */
        .side-nav__item:not(.primary, .hasChildren) .side-nav__icon {
            visibility: hidden;
        }

/* MENU LINK TEXT */
.side-nav__link-text {
    flex: 1;
    /*padding-left: .5rem;*/
    font-weight: 500;
    line-height: 1.2;
    letter-spacing: .03rem;
}


/* NESTED MENUS - indent menu item links based on level number
   ========================================================================== */
.side-nav__link {
    --iq-side-nav-indent-increment: 1.25rem; /* TESTING ONLY - set menu indent increment variable, add to variables when finalised */
    --iq-side-nav-indent-offset: .5rem;
}

/* LEVEL 1 MENU INDENT */
/*.side-nav__menu[data-level="1"] .side-nav__link {*/
.side-nav__menu--level-1 .side-nav__link {
    padding-left: 1.5rem;
}

/* LEVEL 2 MENU INDENT */
.side-nav__menu--level-2 .side-nav__link {
    padding-left: calc(var(--iq-side-nav-indent-increment) * 1 + var(--iq-side-nav-indent-offset));
}

/* LEVEL 3 MENU INDENT */
.side-nav__menu--level-3 .side-nav__link {
    padding-left: calc(var(--iq-side-nav-indent-increment) * 2 + var(--iq-side-nav-indent-offset));
}

/* LEVEL 4 MENU INDENT */
.side-nav__menu--level-4 .side-nav__link {
    padding-left: calc(var(--iq-side-nav-indent-increment) * 3 + var(--iq-side-nav-indent-offset));
}

/* LEVEL 5 MENU INDENT */
.side-nav__menu--level-5 .side-nav__link {
    padding-left: calc(var(--iq-side-nav-indent-increment) * 4 + var(--iq-side-nav-indent-offset));
}

/* LEVEL 1 - Top level links ONLY - primary, settings, system
   ========================================================================== */
/* LEVEL 1 MENU LINKS - */
.side-nav__menu--level-1 > li > a {
    align-items: center;  /* center align-items because link text doesn't need to wrap */
    height: 3rem;
}

/* LEVEL 1 MENU EXPANDED - display coloured left bar on expanded menu items */
.is-open .side-nav__menu--level-2 {
    box-shadow: inset .25rem 0 var(--iq-color-grey-50);
}

/* MENU lINKS:HOVER STATE - excluding level 1 */
.side-nav__menu--level-2 .side-nav__link:hover {
    box-shadow: inset .25rem 0 var(--iq-color-blue-primary);
}


/* MENU ITEM - STATES
   ========================================================================== */
/* MENU OPEN */
.is-open {}

    /* MENU OPEN ICON - rotate chevron icon down */
    .is-open > .side-nav__link .iq-icon-chevron-right  {
        transition: transform var(--iq-duration-100) var(--iq-ease-out);
        transform: rotate(90deg);
    }

    /* SHOW SUB-MENU */
    .is-open > .side-nav__menu  {
        /*display: block;*/
    }

/* MENU CLOSED */
.is-closed {}

    /* MENU CLOSED ICON - rotate chevron icon up */
    .is-closed > .side-nav__link .iq-icon-chevron-right {
        transition: transform var(--iq-duration-100) var(--iq-ease-out);
        transform: rotate(0deg);
    }

    /* HIDE SUBMENU */
    .is-closed > .side-nav__menu  {
        display: none;
    }

/* SELECTED MENU - ancestor of active menu item */
.is-selected {}

    /* SELECTED MENU LINK */
    .is-selected > .side-nav__link {
        color: var(--iq-text-color);
    }

/* ACTIVE MENU ITEM - active menu item */
.is-active {}

    /* ACTIVE MENU LINK */
    .is-active > .side-nav__link {
        color: var(--iq-text-color);
        background-color: var(--iq-color-grey-20);
        box-shadow: inset .25rem 0 var(--iq-color-blue-primary) ;
    }


/* MENU DIVIDER - adds a menu line separator to menu items - assign to a menu item */
.side-nav__menu--level-1 > .settings::before {
    content: "";
    display: block;
    height: 1px;
    margin: 2rem 1rem;
    background-color: var(--iq-color-grey-40);
}