/* ==========================================================================
   Vellox Group Theme - Menu Styles
   Main Nav Menu and Submenus
   ========================================================================== */

/* ==========================================================================
   Main Nav Menu Styles
   ========================================================================== */

/* Menu container responsive height - stretches to fill available viewport */
.vg-theme .menu-container {
    display: flex;
    flex-direction: row;
    /* Fallback for older browsers - conservative estimate */
    min-height: calc(100vh - 180px);
    /* Modern browsers: dvh accounts for browser chrome (address bar, etc.) */
    min-height: calc(100dvh - 100px);
}

/* Main menu background - Tarmac */
.vg-theme div.am-menu {
    display: flex;
    flex-direction: column;
    /* Fallback for older browsers */
    min-height: calc(100vh - 180px);
    /* Modern browsers: use dynamic viewport height */
    /* Magic number */
    min-height: calc(100dvh - 129px);
    background-color: #323E3E; /* Tarmac */
    border-radius: 0; /* Remove border radius */
    /* Position relative for absolute pin positioning */
    position: relative;
}

/* Pin icon wrapper - position absolutely, not affected by flex layout */
.vg-theme div.am-menu > a:first-child:has(.menu-pin) {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
}

/* Toggle and alerts - prevent flex stretching */
.vg-theme div.am-menu > a:has(.menu-toggle),
.vg-theme div.am-menu > .menu-alerts {
    flex-shrink: 0;
}

/* Remove border radius from submenu state */
.vg-theme .am-menu-submenu div.menu-container div.am-menu {
    border-top-right-radius: 0;
}

/* Menu icons and text - Concrete */
.vg-theme div.am-menu .am,
.vg-theme div.am-menu li.item span.label,
.vg-theme div.am-menu div.menu-toggle span,
.vg-theme div.am-menu div.menu-pin span {
    color: #EAE9E5; /* Concrete */
}

/* Menu category border */
.vg-theme div.am-menu li.category span.category-label {
    border-bottom-color: #EAE9E5; /* Concrete */
}

/* Menu item hover - Mid Tarmac background */
.vg-theme div.am-menu li.item:hover > a {
    background-color: #465152; /* Mid Tarmac */
}

/* Selected/Active menu items - White */
.vg-theme div.am-menu li.item:hover > a > span.am,
.vg-theme div.am-menu li.item.active > a > span.am,
.vg-theme div.am-menu li.item:hover > a > span.label,
.vg-theme div.am-menu li.item.active > a > span.label {
    color: #FFFFFF; /* White */
}

/* Active menu item - Mid Tarmac background */
.vg-theme div.am-menu li.item.active > a {
    background-color: #465152; /* Mid Tarmac */
}

/* Pin icon - Concrete when unpinned */
.vg-theme div.am-menu div.menu-pin span {
    color: #EAE9E5; /* Concrete */
}

/* Alerts section in menu */
.vg-theme div.am-menu .menu-alerts > a {
    color: #EAE9E5; /* Concrete */
}

.vg-theme .am-menu-expanded div.am-menu .menu-alerts > a:hover {
    color: #FFFFFF; /* White */
}

/* Horizontal menu override */
.vg-theme #horizontal-menu.k-menu,
.vg-theme #horizontal-menu .k-group {
    background-color: #323E3E; /* Tarmac */
}

.vg-theme #horizontal-menu.k-menu .k-item {
    border-bottom-color: #465152; /* Mid Tarmac */
}

.vg-theme #horizontal-menu.k-menu .k-link {
    color: #EAE9E5; /* Concrete */
}

/* Child items of categories */
.vg-theme div.am-menu li.item:not(.item-parent) {
    margin-top: 2px;
}

/* ==========================================================================
   Grey Submenu Styles (Persistent Submenu)
   ========================================================================== */

/* Submenu panel stretches to match menu height */
.vg-theme div.am-submenu {
    /* Fallback for older browsers */
    min-height: calc(100vh - 180px);
    /* Modern browsers: use dynamic viewport height */
    min-height: calc(100dvh - 100px);
}

/* Submenu heading - Tarmac background with Concrete text, no hover effect */
.vg-theme div.am-submenu ul.nav > li.submenu-heading > a,
.vg-theme div.am-submenu ul.nav > li.submenu-heading > a:hover,
.vg-theme div.am-submenu ul.nav > li.submenu-heading > a:focus {
    background-color: #323E3E; /* Tarmac */
    color: #EAE9E5; /* Concrete */
}

/* Profile picture section - Light Concrete background, no hover effect */
.vg-theme div.am-submenu ul.nav > li:has(img),
.vg-theme div.am-submenu ul.nav > li:has(img):hover {
    background-color: #F7F6F4; /* Light Concrete */
}

/* Submenu list item base style - Light Concrete background, Tarmac text, Concrete border */
.vg-theme div.am-submenu ul.nav > li > a {
    background-color: #F7F6F4; /* Light Concrete */
    color: #323E3E; /* Tarmac */
    border-bottom-color: #EAE9E5; /* Concrete */
}

/* Submenu list item hover - Concrete background */
.vg-theme div.am-submenu ul.nav > li:not(.submenu-heading) > a:hover {
    background-color: #465152; /* Mid Tarmac */
    color: #F7F6F4; /* Light Concrete */
}

/* Active submenu list item - Concrete background */
.vg-theme div.am-submenu ul.nav > li.active > a {
    background-color: #465152; /* Mid Tarmac */
    color: #F7F6F4; /* Light Concrete */
}

/* Category heading text */
.vg-theme div.am-submenu ul.nav > li.category-heading > a {
    color: #323E3E; /* Tarmac */
}

/* Category heading no hover effect */
.vg-theme div.am-submenu ul.nav > li.category-heading > a:hover {
    background-color: #F7F6F4; /* Light Concrete */
    color: #323E3E; /* Tarmac */
}

/* ==========================================================================
   Tab-style Submenu Override (e.g., Location module)
   ========================================================================== */
.vg-theme div.am-tab-menu ul.nav {
    border-bottom-color: #EAE9E5; /* Concrete */
}

.vg-theme div.am-tab-menu ul.nav > li {
    border-color: #7E8484; /* Light Tarmac */
}

.vg-theme div.am-tab-menu ul.nav > li > a {
    color: #323E3E; /* Tarmac */
}

.vg-theme div.am-tab-menu ul.nav > li > a:hover,
.vg-theme div.am-tab-menu ul.nav > li > a:focus {
    color: #323E3E; /* Tarmac */
}

.vg-theme div.am-tab-menu ul.nav > li.active > a {
    color: #323E3E; /* Tarmac */
}

/* ==========================================================================
   Temp Submenu Override (triggered from main nav)
   Dark theme with Tarmac background
   ========================================================================== */

.vg-theme div.am-submenu-temp ul.nav {
    border-left-color: #465152; /* Mid Tarmac */
}

/* Submenu heading - Deep Tarmac background, no hover effect */
.vg-theme div.am-submenu-temp ul.nav > li.submenu-heading > a,
.vg-theme div.am-submenu-temp ul.nav > li.submenu-heading > a:hover,
.vg-theme div.am-submenu-temp ul.nav > li.submenu-heading > a:focus {
    background-color: #323E3E; /* Tarmac */
    color: #EAE9E5; /* Concrete */
}

/* Submenu list items - Deep Tarmac background, Concrete text, Mid Tarmac border */
.vg-theme div.am-submenu-temp ul.nav > li:not(.submenu-heading) > a,
.vg-theme div.am-submenu-temp ul.nav > li:not(.submenu-heading) > a:focus {
    background-color: #1F2929; /* Deep Tarmac */
    color: #EAE9E5; /* Concrete */
}

/* Submenu list item hover - Mid Tarmac background */
.vg-theme div.am-submenu-temp ul.nav > li:not(.submenu-heading) > a:hover {
    background-color: #465152; /* Mid Tarmac */
}

/* Category heading text */
.vg-theme div.am-submenu-temp ul.nav > li.category-heading > a {
    color: #EAE9E5; /* Concrete */
}

/* Category heading hover */
.vg-theme div.am-submenu-temp ul.nav > li.category-heading > a:hover {
    background-color: #1F2929; /* Deep Tarmac */
    color: #EAE9E5; /* Concrete */
}

/* Submenu list items - Tarmac background, Concrete text, Mid Tarmac border */
.vg-theme div.am-submenu-temp ul.nav > li > a {
    background-color: #323E3E; /* Tarmac */
    color: #EAE9E5; /* Concrete */
    border-bottom-color: #465152; /* Mid Tarmac */
}


/* ==========================================================================
   Footer Styles
   ========================================================================== */

/* Hide the old footer when Vellox Group theme is enabled */
.vg-theme .footer {
    display: none;
}

/* Powered By Logo
   ========================================================================== */
.vg-powered-by-logo {
    width: 160px;
    height: auto;
    margin-bottom: 4px; /* Center this with the V logo (collapsed) */
}

.vg-powered-by-logo-collapsed {
    height: 24px;
    width: auto;
}