:root {
    --app-navbar-bg: linear-gradient(135deg, #007342 0%, #9FC210 100%);
    --app-navbar-text: #ffffff;
    --app-navbar-text-active: #ffffff;
}

.app-navbar {
    background: var(--app-navbar-bg);
    box-shadow: 0 10px 24px rgba(2, 6, 23, 0.28);
}

.app-navbar .navbar-brand {
    color: var(--app-navbar-text-active);
    font-weight: 700;
    letter-spacing: 0.2px;
}

.app-navbar .navbar-brand:hover,
.app-navbar .navbar-brand:focus {
    color: var(--app-navbar-text-active);
}

.app-navbar .nav-link {
    color: var(--app-navbar-text);
    font-weight: 600;
    border-radius: 8px;
    padding: 0.45rem 0.7rem;
    margin-left: 0.2rem;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.app-navbar .nav-link:hover,
.app-navbar .nav-link:focus {
    color: var(--app-navbar-text-active);
    background-color: rgba(255, 255, 255, 0.14);
}

.app-navbar .nav-link.active {
    color: var(--app-navbar-text-active);
    background-color: rgba(255, 255, 255, 0.2);
}

.app-navbar .navbar-toggler {
    border-color: rgba(255, 255, 255, 0.35);
}

.app-navbar .btn.btn-outline-light {
    border-color: rgba(255, 255, 255, 0.6);
    color: var(--app-navbar-text-active);
}

.app-navbar .btn.btn-outline-light:hover,
.app-navbar .btn.btn-outline-light:focus {
    background-color: rgba(255, 255, 255, 0.2);
    border-color: rgba(255, 255, 255, 0.75);
    color: var(--app-navbar-text-active);
}