/* ============================================================
   Secuura Nav Chrome — restyles existing Bootstrap navbar
   markup emitted by MenuMasterService + layout files.
   Loaded AFTER bootstrap-overrides.css and identity.css.
   Layer-on-top only. Per NAV-01..NAV-06 + CONTEXT D-03, D-05.

   NOTE on MenuMasterService:
   The C# service emits `<li class="nav-item[ active]"><a class="nav-link" ...>`.
   We do NOT modify the service. Active-state CSS targets:
     - `.nav-link[aria-current="page"]` (added by plan 03-02 in layouts)
     - `.nav-pills .nav-link.active` (per CONTEXT D-03)
     - `.navbar-nav .nav-item.active > .nav-link` (legacy MenuMasterService fallback)
   Any of the three triggers lights up the active style.
   ============================================================ */

/* ---------- Navbar wrapper ---------- */
/* The layout emits an inline style="background-color:..." attribute that beats
   class CSS — the one narrow documented override exception in this file. */
.navbar.navbar-light[style*="background-color"] {
    background-color: hsl(var(--card)) !important;
}
.navbar.navbar-light {
    background-color: hsl(var(--card));
    border-bottom: 1px solid hsl(var(--border));
    box-shadow: 0 1px 2px hsl(var(--foreground) / 0.04);
}

/* ---------- Nav links (default + hover + focus) ---------- */
.navbar-nav .nav-link {
    color: hsl(var(--foreground));
    font-family: var(--font-sans);
    font-weight: 500;
    padding: 0.5rem 0.75rem;
    border-radius: calc(var(--radius) - 2px);
    transition: background-color 150ms ease, color 150ms ease;
}
.navbar-nav .nav-link:hover,
.navbar-nav .nav-link:focus {
    color: hsl(var(--primary));
    background-color: hsl(var(--muted) / 0.5);
    text-decoration: none;
}
.navbar-nav .nav-link:focus-visible {
    outline: 2px solid hsl(var(--ring));
    outline-offset: 2px;
}

/* ---------- Active page indicator (CONTEXT D-03 — locked) ---------- */
/* Spec: border-bottom: 2px solid hsl(var(--primary)); font-weight: 600;
   NO background change. NO color change on the link text.
   Three selectors fire identically:
     - .nav-link[aria-current="page"]      (added by plan 03-02 layouts)
     - .nav-pills .nav-link.active         (per CONTEXT D-03 explicit)
     - .navbar-nav .nav-item.active > .nav-link  (legacy fallback)        */
.nav-link[aria-current="page"],
.nav-pills .nav-link.active,
.navbar-nav .nav-item.active > .nav-link {
    border-bottom: 2px solid hsl(var(--primary));
    font-weight: 600;
    padding-bottom: calc(0.5rem - 2px);
    border-radius: 0;
}

/* ---------- Dropdown menu (user menu) ---------- */
.navbar .dropdown-menu {
    background-color: hsl(var(--popover));
    color: hsl(var(--popover-foreground));
    border: 1px solid hsl(var(--border));
    border-radius: var(--radius);
    box-shadow: 0 4px 12px hsl(var(--foreground) / 0.1);
    padding: 0.375rem 0;
    margin-top: 0.25rem;
}
.navbar .dropdown-menu .dropdown-item {
    color: hsl(var(--popover-foreground));
    padding: 0.5rem 1rem;
    font-family: var(--font-sans);
    font-size: 0.9375rem;
}
.navbar .dropdown-menu .dropdown-item:hover,
.navbar .dropdown-menu .dropdown-item:focus {
    background-color: hsl(var(--muted));
    color: hsl(var(--foreground));
}
.navbar .dropdown-menu .dropdown-item:focus-visible {
    outline: 2px solid hsl(var(--ring));
    outline-offset: -2px;
}
.navbar .dropdown-menu hr {
    margin: 0.25rem 0;
    border: 0;
    border-top: 1px solid hsl(var(--border));
}

/* Legacy `.nav-link2` from _LoggedIn.cshtml — non-Bootstrap class */
.navbar-nav .nav-link2 {
    color: hsl(var(--foreground));
    font-family: var(--font-sans);
    font-weight: 600;
    padding: 0.5rem 0.75rem;
    text-decoration: none;
    cursor: pointer;
    display: inline-block;
}
.navbar-nav .nav-link2:hover,
.navbar-nav .nav-link2:focus {
    color: hsl(var(--primary));
    text-decoration: none;
}
.navbar-nav .nav-link2:focus-visible {
    outline: 2px solid hsl(var(--ring));
    outline-offset: 2px;
}

/* ---------- Role badge (CONTEXT D-05 — locked single style) ---------- */
/* Per CONTEXT D-05: muted-outline single-style for all roles.
   Label is the differentiator — the role NAME (e.g. "Administrator")
   is the only thing that changes per role. No color tiers. No icons. */
.secuura-role-badge {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    background-color: transparent;
    color: hsl(var(--muted-foreground));
    border: 1px solid hsl(var(--border));
    border-radius: calc(var(--radius) - 4px);
    font-family: var(--font-sans);
    font-size: 0.75rem;
    font-weight: 500;
    line-height: 1.4;
    white-space: nowrap;
    vertical-align: middle;
}

/* Mobile responsive behaviour for role badge (CONTEXT D-05):
   On phone (<=768px), the badge inside the navbar is hidden and
   a duplicate inside the user dropdown is shown. Plan 03-02's
   _RoleBadge.cshtml emits both copies, classed accordingly. */
.navbar .secuura-role-badge.secuura-role-badge--nav {
    display: inline-flex;
    margin-right: 12px; /* CONTEXT specifics: "12px to the left of the user-initials trigger" */
}
.navbar .dropdown-menu .secuura-role-badge.secuura-role-badge--dropdown {
    display: none;
    margin: 0.25rem 1rem 0.5rem;
}
@media (max-width: 768px) {
    .navbar .secuura-role-badge.secuura-role-badge--nav {
        display: none;
    }
    .navbar .dropdown-menu .secuura-role-badge.secuura-role-badge--dropdown {
        display: inline-flex;
    }
}

/* ---------- Navbar logo container — preserve sizing ---------- */
/* No override: .navbar-logo background-image is set by Phase 1 brand-secuura.css / brand-ssd.css */

/* ---------- Mobile toggler (NAV-05) ---------- */
.navbar-toggler {
    min-width: 44px;
    min-height: 44px;
    border: 1px solid hsl(var(--border));
    border-radius: calc(var(--radius) - 2px);
    padding: 0.5rem;
}
.navbar-toggler:focus-visible {
    outline: 2px solid hsl(var(--ring));
    outline-offset: 2px;
    box-shadow: none;
}
@media (max-width: 575.98px) {
    .navbar-collapse.collapse.show {
        background-color: hsl(var(--card));
        padding: 0.75rem;
        margin-top: 0.5rem;
        border-radius: calc(var(--radius) - 2px);
        border: 1px solid hsl(var(--border));
    }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
    .navbar-nav .nav-link,
    .navbar-nav .nav-link2,
    .navbar .dropdown-menu .dropdown-item {
        transition: none;
    }
}