nav.navbar,
nav.navbar-tidlost,
nav.navbar-kapsla,
nav.navbar-auth,
nav.navbar-custom {
    background-color: #F8FFFE !important;
    background-image: none !important;
    color: #0F2A2B !important;
    box-shadow: 0 2px 12px rgba(0,0,0,0.08) !important;
    border-bottom: 1px solid rgba(13, 115, 119, 0.07) !important;
    padding: 0.5rem 0 !important;
    position: relative !important;
    z-index: 2000 !important;
}

    /* Prevent any broad .container rule from increasing navbar height */
    nav > .container,
    nav.navbar > .container,
    nav.navbar-tidlost > .container,
    nav.navbar-kapsla > .container,
    nav.navbar-auth > .container {
        padding-top: 0 !important;
        padding-bottom: 0 !important;
        padding-left: 1rem !important;
        padding-right: 1rem !important;
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
    }

/* Ensure nav entirely opaque so page gradient cannot show through */
nav, header {
    background-clip: padding-box !important;
    -webkit-backface-visibility: hidden !important;
}

    /* scoped navbar rules only */
    nav .navbar-brand {
        color: #0F2A2B !important;
        font-size: 1.5rem !important;
    }

        nav .navbar-brand img {
            height: 32px !important;
            max-height: 32px !important;
            width: auto !important;
        }

    nav .navbar-toggler {
        padding: 0.25rem 0.5rem !important;
        border: none !important;
    }

    nav .navbar-nav .nav-link {
        padding: 0.5rem 1rem !important;
        color: #0F2A2B !important;
    }

    /* ONLY navbar brand (not other page elements) */
    nav .navbar-brand {
        color: #0F2A2B !important;
        font-size: 1.5rem !important;
        font-weight: 600 !important;
        font-family: 'Segoe UI', -apple-system, BlinkMacSystemFont, sans-serif !important;
        display: flex !important;
        align-items: center !important;
        gap: 0.75rem !important;
        margin: 0 !important;
        padding: 0 !important;
        text-decoration: none !important;
    }

        nav .navbar-brand img {
            height: 32px !important;
            max-height: 32px !important;
            width: auto !important;
        }

        nav .navbar-brand:hover {
            transform: translateY(-2px) !important;
        }

    /* Hamburger menu */
    nav .navbar-toggler {
        margin-left: auto !important;
        padding: 0.25rem 0.5rem !important;
        border: none !important;
    }

        nav .navbar-toggler:focus {
            box-shadow: none !important;
        }

    nav .navbar-toggler-icon {
        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%2815, 42, 43, 0.9%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") !important;
    }

    /* Collapse area */
    nav .navbar-collapse {
        flex-grow: 0 !important;
    }

    /* ONLY nav links inside navbar */
    nav .navbar-nav .nav-link {
        color: #0F2A2B !important;
        font-weight: 500 !important;
        padding: 0.5rem 1rem !important;
        margin: 0 !important;
        border-radius: 12px !important;
        transition: all 0.3s !important;
        display: flex !important;
        align-items: center !important;
        gap: 0.5rem !important;
        text-decoration: none !important;
        white-space: nowrap !important;
    }

        nav .navbar-nav .nav-link:hover,
        nav .navbar-nav .nav-link.active {
            background: #F0FAFA !important;
            color: #0D7377 !important;
        }

    nav .navbar-nav .nav-item {
        margin: 0 !important;
        padding: 0 !important;
    }

/* Responsive */
@media (max-width: 991px) {
    nav.navbar .container,
    nav.navbar-tidlost .container,
    nav.navbar-kapsla .container,
    nav.navbar-custom .container,
    nav.navbar-auth .container {
        flex-wrap: nowrap !important;
    }

    nav .navbar-collapse {
        width: 100% !important;
        margin-top: 0.5rem !important;
    }

    nav .navbar-nav {
        width: 100% !important;
    }
}