/* Semantic colors for navigation icons */
.nav-icon {
    display: inline-block;
    width: 1.25em;
    text-align: center;
    opacity: 0.92;
}

.navbar-nav > .nav-item > .nav-link > .nav-icon.nav-icon-main {
    font-size: 1.05em;
}

.ic-blue { color: #0d6efd; }
.ic-teal { color: #0aa2c0; }
.ic-green { color: #198754; }
.ic-orange { color: #e8590c; }
.ic-purple { color: #6f42c1; }
.ic-red { color: #dc3545; }
.ic-indigo { color: #5a32a3; }
.ic-pink { color: #c2255c; }
.ic-cyan { color: #0891b2; }
.ic-amber { color: #ca8a04; }
.ic-slate { color: #495057; }
.ic-brown { color: #854d0e; }
.ic-transiq { color: #0d9488; }

.dropdown-item:hover .nav-icon,
.nav-link:hover .nav-icon {
    opacity: 1;
}

/* TransIQ module sub-navigation */
.transiq-subnav {
    background: linear-gradient(135deg, #f0fdfa 0%, #ecfeff 100%);
    border: 1px solid #99f6e4;
}

.transiq-subnav .navbar-brand {
    color: #0f766e;
    font-weight: 600;
}

.transiq-subnav .nav-link {
    color: #134e4a;
    border-radius: 0.375rem;
    padding: 0.45rem 0.75rem;
    font-size: 0.9rem;
    white-space: nowrap;
}

.transiq-subnav .nav-link:hover {
    background: rgba(13, 148, 136, 0.12);
    color: #0f766e;
}

.transiq-subnav .nav-link.active {
    background: #0d9488;
    color: #fff;
}

.transiq-subnav .nav-link.active .nav-icon {
    color: #fff !important;
    opacity: 1;
}

.transiq-subnav .nav-link .nav-icon {
    width: 1.1em;
    margin-right: 0.35rem;
}

/* Integration Hub module sub-navigation */
.integration-subnav {
    background: linear-gradient(135deg, #eef2ff 0%, #f5f3ff 100%);
    border: 1px solid #c7d2fe;
}

.integration-subnav .navbar-brand {
    color: #4338ca;
    font-weight: 600;
}

.integration-subnav .nav-link {
    color: #3730a3;
    border-radius: 0.375rem;
    padding: 0.45rem 0.75rem;
    font-size: 0.9rem;
    white-space: nowrap;
}

.integration-subnav .nav-link:hover {
    background: rgba(79, 70, 229, 0.12);
    color: #4338ca;
}

.integration-subnav .nav-link.active {
    background: #4f46e5;
    color: #fff;
}

.integration-subnav .nav-link.active .nav-icon {
    color: #fff !important;
    opacity: 1;
}

.integration-subnav .nav-link .nav-icon {
    width: 1.1em;
    margin-right: 0.35rem;
}