/*
 * Administration menu interaction states.
 *
 * Metronic applies the primary colour not only through :hover but also through
 * its runtime .hover/.show/.here states. In addition, overflow submenus can be
 * positioned outside the original admin wrapper. Keep all administration links
 * and their parent triggers in the neutral gray palette in every one of those
 * states.
 */

:root {
    --gstudio-admin-menu-text: var(--bs-gray-700, #4b5675);
    --gstudio-admin-menu-bullet: var(--bs-gray-500, #99a1b7);
    --gstudio-admin-menu-hover-bg: var(--bs-gray-100, #f9f9f9);
}

/* Baseline: every item that still lives below the Administration wrapper. */
[data-menu-id="admin"] .menu-link,
[data-menu-id="admin"] .menu-link .menu-title,
[data-menu-id="admin"] .menu-link .menu-icon,
[data-menu-id="admin"] .menu-link .menu-icon i,
[data-menu-id="admin"] .menu-link .menu-arrow {
    color: var(--gstudio-admin-menu-text) !important;
}

[data-menu-id="admin"] .menu-link .menu-bullet .bullet {
    background-color: var(--gstudio-admin-menu-bullet) !important;
}

[data-menu-id="admin"] .menu-link .menu-arrow::after {
    background-color: var(--gstudio-admin-menu-text) !important;
}

/* Metronic JS uses .hover on menu-item, not only the CSS :hover pseudo-state. */
[data-menu-id="admin"] .menu-item.hover > .menu-link,
[data-menu-id="admin"] .menu-item:hover > .menu-link,
[data-menu-id="admin"] .menu-item:focus-within > .menu-link,
[data-menu-id="admin"] .menu-item.active > .menu-link,
[data-menu-id="admin"] .menu-item.here > .menu-link,
[data-menu-id="admin"] .menu-item.show > .menu-link,
[data-menu-id="admin"] .menu-link:hover,
[data-menu-id="admin"] .menu-link:focus,
[data-menu-id="admin"] .menu-link.active {
    background-color: var(--gstudio-admin-menu-hover-bg) !important;
    color: var(--gstudio-admin-menu-text) !important;
}

[data-menu-id="admin"] .menu-item.hover > .menu-link .menu-title,
[data-menu-id="admin"] .menu-item:hover > .menu-link .menu-title,
[data-menu-id="admin"] .menu-item:focus-within > .menu-link .menu-title,
[data-menu-id="admin"] .menu-item.active > .menu-link .menu-title,
[data-menu-id="admin"] .menu-item.here > .menu-link .menu-title,
[data-menu-id="admin"] .menu-item.show > .menu-link .menu-title,
[data-menu-id="admin"] .menu-item.hover > .menu-link .menu-icon,
[data-menu-id="admin"] .menu-item.hover > .menu-link .menu-icon i,
[data-menu-id="admin"] .menu-item:hover > .menu-link .menu-icon,
[data-menu-id="admin"] .menu-item:hover > .menu-link .menu-icon i,
[data-menu-id="admin"] .menu-item.active > .menu-link .menu-icon,
[data-menu-id="admin"] .menu-item.active > .menu-link .menu-icon i,
[data-menu-id="admin"] .menu-item.here > .menu-link .menu-icon,
[data-menu-id="admin"] .menu-item.here > .menu-link .menu-icon i,
[data-menu-id="admin"] .menu-item.show > .menu-link .menu-icon,
[data-menu-id="admin"] .menu-item.show > .menu-link .menu-icon i,
[data-menu-id="admin"] .menu-item.hover > .menu-link .menu-arrow,
[data-menu-id="admin"] .menu-item:hover > .menu-link .menu-arrow,
[data-menu-id="admin"] .menu-item.active > .menu-link .menu-arrow,
[data-menu-id="admin"] .menu-item.here > .menu-link .menu-arrow,
[data-menu-id="admin"] .menu-item.show > .menu-link .menu-arrow {
    color: var(--gstudio-admin-menu-text) !important;
}

[data-menu-id="admin"] .menu-item.hover > .menu-link .menu-bullet .bullet,
[data-menu-id="admin"] .menu-item:hover > .menu-link .menu-bullet .bullet,
[data-menu-id="admin"] .menu-item.active > .menu-link .menu-bullet .bullet,
[data-menu-id="admin"] .menu-item.here > .menu-link .menu-bullet .bullet,
[data-menu-id="admin"] .menu-item.show > .menu-link .menu-bullet .bullet {
    background-color: var(--gstudio-admin-menu-bullet) !important;
}

[data-menu-id="admin"] .menu-item.hover > .menu-link .menu-arrow::after,
[data-menu-id="admin"] .menu-item:hover > .menu-link .menu-arrow::after,
[data-menu-id="admin"] .menu-item.active > .menu-link .menu-arrow::after,
[data-menu-id="admin"] .menu-item.here > .menu-link .menu-arrow::after,
[data-menu-id="admin"] .menu-item.show > .menu-link .menu-arrow::after {
    background-color: var(--gstudio-admin-menu-text) !important;
}

/*
 * Overflow/floating submenu fallback.
 * Some Metronic dropdowns are positioned outside the original admin wrapper.
 * Scope those rules by the /app/admin route so other application menus keep
 * their normal primary-colour states.
 */
.menu .menu-link[href*="/app/admin"],
.menu .menu-link[href*="/app/admin"] .menu-title,
.menu .menu-link[href*="/app/admin"] .menu-icon,
.menu .menu-link[href*="/app/admin"] .menu-icon i,
.menu .menu-link[href*="/app/admin"] .menu-arrow {
    color: var(--gstudio-admin-menu-text) !important;
}

.menu .menu-link[href*="/app/admin"] .menu-bullet .bullet {
    background-color: var(--gstudio-admin-menu-bullet) !important;
}

.menu .menu-item.hover > .menu-link[href*="/app/admin"],
.menu .menu-item:hover > .menu-link[href*="/app/admin"],
.menu .menu-item.active > .menu-link[href*="/app/admin"],
.menu .menu-item.here > .menu-link[href*="/app/admin"],
.menu .menu-item.show > .menu-link[href*="/app/admin"],
.menu .menu-link[href*="/app/admin"]:hover,
.menu .menu-link[href*="/app/admin"]:focus,
.menu .menu-link[href*="/app/admin"].active {
    background-color: var(--gstudio-admin-menu-hover-bg) !important;
    color: var(--gstudio-admin-menu-text) !important;
}

/* Parent triggers such as Inventario, General or Seguridad do not have href. */
.menu .menu-item:has(.menu-link[href*="/app/admin"]) > .menu-link,
.menu .menu-item:has(.menu-link[href*="/app/admin"]) > .menu-link .menu-title,
.menu .menu-item:has(.menu-link[href*="/app/admin"]) > .menu-link .menu-icon,
.menu .menu-item:has(.menu-link[href*="/app/admin"]) > .menu-link .menu-icon i,
.menu .menu-item:has(.menu-link[href*="/app/admin"]) > .menu-link .menu-arrow {
    color: var(--gstudio-admin-menu-text) !important;
}

.menu .menu-item.hover:has(.menu-link[href*="/app/admin"]) > .menu-link,
.menu .menu-item:hover:has(.menu-link[href*="/app/admin"]) > .menu-link,
.menu .menu-item.show:has(.menu-link[href*="/app/admin"]) > .menu-link,
.menu .menu-item.here:has(.menu-link[href*="/app/admin"]) > .menu-link,
.menu .menu-item.active:has(.menu-link[href*="/app/admin"]) > .menu-link {
    background-color: var(--gstudio-admin-menu-hover-bg) !important;
    color: var(--gstudio-admin-menu-text) !important;
}

.menu .menu-item:has(.menu-link[href*="/app/admin"]) > .menu-link .menu-arrow::after {
    background-color: var(--gstudio-admin-menu-text) !important;
}