/**************************************************************
  nav.css — Navbar (LTR & RTL) + Notifications
  Brand: primary #051939, secondary #ff4d00
  Version 1.7
  What changed in 1.7:
  - Notification action menu hover refined:
    • Default hover now uses a subtle primary-tinted background
      (rgba(var(--color-primary-rgb), .08)) with primary text color.
    • The "danger" action (Delete) uses a soft red tint on hover,
      not the secondary brand color, to avoid the orange block look.
  - Ensured the action menu respects rounded corners by adding
    overflow: hidden so hover backgrounds are clipped to radius.
  - Kept previous v1.6 fixes: isolating main-nav dropdown theming
    from notif menus, My Account = primary links, z-index tuning,
    RTL/mobile centering helpers.
***************************************************************/
/* ===== Navbar base ===== */
.navbar {
  background-color: var(--color-primary);
  color: #fff;
  padding: 1rem 2rem;
}
/* Only non-button links */
.navbar a:not(.btn) {
  color: #fff;
  margin-inline-end: 1rem;
  text-decoration: none;
  transition: color var(--transition-speed);
}
.navbar a:not(.btn):hover { color: var(--color-secondary); }
/* Underline on hover/focus for top-level links */
#mainNavbar .nav-link { position: relative; transition: color var(--transition-speed); }
#mainNavbar .nav-link::after{
  content:""; content:""; position:absolute; bottom:0; left:0; right:0; height:2px;
  background-color: var(--color-secondary); transform: scaleX(0); transform-origin:center;
  transition: transform var(--transition-speed) ease-in-out; pointer-events:none;
}
#mainNavbar .nav-link:hover::after, #mainNavbar .nav-link:focus::after { transform: scaleX(1); }
/* Remove focus shadows inside navbar */
#mainNavbar .nav-link:focus,
#mainNavbar .nav-link:focus-visible,
#mainNavbar .dropdown-item:focus,
#mainNavbar .dropdown-item:focus-visible,
#mainNavbar .dropdown-toggle:focus,
#mainNavbar .dropdown-toggle:focus-visible,
#mainNavbar .navbar-toggler:focus,
#mainNavbar .navbar-toggler:focus-visible{ outline:none !important; box-shadow:none !important; }
/* ===== Dropdowns (click-only) — MAIN NAV ONLY =====
   (Exclude notification menus from the dark theme) */
#mainNavbar .dropdown-menu:not(.notif-dropdown):not(.notif-action-menu){
  background-color: var(--color-primary);
  border: none;
  border-radius: var(--btn-radius);
  box-shadow: 0 4px 8px rgba(0,0,0,.15);
  min-width: auto;
  width: max-content;
  white-space: nowrap;
  z-index: 1050;
}
#mainNavbar .dropdown-menu:not(.notif-dropdown):not(.notif-action-menu) .dropdown-item{
  color:#fff; background-color:transparent; padding:.5rem 1.25rem; white-space:nowrap;
  transition: background-color var(--transition-speed), color var(--transition-speed);
}
#mainNavbar .dropdown-menu:not(.notif-dropdown):not(.notif-action-menu) .dropdown-item:hover,
#mainNavbar .dropdown-menu:not(.notif-dropdown):not(.notif-action-menu) .dropdown-item:focus,
#mainNavbar .dropdown-menu:not(.notif-dropdown):not(.notif-action-menu) .dropdown-item.active{
  background-color: var(--color-secondary); color:#fff;
}
/* Hide Bootstrap default arrow */
#mainNavbar .dropdown-toggle::after{ content:none !important; display:none !important; }
/* Submenus position (shown via JS .show class) */
#mainNavbar .dropdown-submenu{ position:relative; }
#mainNavbar .dropdown-submenu > .dropdown-menu{
  min-width: auto !important; width: max-content; white-space: nowrap;
  top:0; inset-inline-start:100%; margin-top:-1px; border-radius: var(--btn-radius);
  background-color: var(--color-primary); display:none;
}
#mainNavbar .dropdown-submenu.show > .dropdown-menu{ display:block; }
/* RTL flip for submenus */
html[dir="rtl"] #mainNavbar .dropdown-submenu > .dropdown-menu{
  inset-inline-start:auto; inset-inline-end:100%;
}
/* Edge-aware flipping on large screens */
@media (min-width: 992px) {
  html[dir="ltr"] #mainNavbar .dropdown-submenu.dropdown-submenu-end > .dropdown-menu {
    inset-inline-start: auto;
    inset-inline-end: 100%;
  }
  html[dir="rtl"] #mainNavbar .dropdown-submenu.dropdown-submenu-start > .dropdown-menu {
    inset-inline-end: auto;
    inset-inline-start: 100%;
  }
}
/* ===== Mobile accordion-ish dropdown sizing (main nav) ===== */
@media (max-width: 991.98px){
  #mainNavbar .dropdown-menu:not(.notif-dropdown):not(.notif-action-menu){ width:100%; }
  #mainNavbar .dropdown-submenu > .dropdown-menu{ position:static !important; margin:0; }
}
/* ===== Language next to account ===== */
.lang-switch-btn{ display:inline-flex; align-items:center; gap:.25rem; }
/* Navbar logo size */
.navbar-brand img{ height:50px; }
@media (max-width: 991.98px){ .navbar-brand img{ height:44px; } }
/* ===== Account popover ===== */
#accountNavItem { position: relative; }
#accountNavItem > a.nav-link.disabled{ opacity:.5; pointer-events:none; }
#accountDropdown.dropdown-menu.auth-popover{
  --bs-dropdown-bg: var(--color-background);
  --bs-dropdown-color: var(--color-text);
  --bs-dropdown-border-color: var(--color-border);
  --bs-dropdown-link-color: var(--color-primary); /* force link color to primary */
  --bs-dropdown-link-hover-color: var(--color-primary); /* keep primary on hover */
  --bs-dropdown-link-hover-bg: #f6f7f9; /* subtle hover background */
  --bs-dropdown-link-active-color: #fff;
  --bs-dropdown-link-active-bg: var(--color-primary);
  --bs-dropdown-divider-bg: var(--color-border);
  min-width: 320px; max-width: 360px;
  background: var(--color-background) !important;
  color: var(--color-text) !important;
  border: 1px solid var(--color-border);
  border-radius: var(--btn-radius);
  box-shadow: 0 12px 32px rgba(0,0,0,.16);
  padding: 14px; text-align:start;
}
/* Extra specificity to enforce primary link color (normal + hover) */
#accountDropdown.auth-popover .dropdown-item{
  color: var(--color-primary) !important;
}
#accountDropdown.auth-popover .dropdown-item:hover,
#accountDropdown.auth-popover .dropdown-item:focus{
  background:#f6f7f9 !important;
  color: var(--color-primary) !important;
}
/* Diamond (arrow). Hidden on mobile */
#accountDropdown::before{
  content:""; position:absolute; top:-8px; left:18px; width:16px; height:16px;
  background: var(--color-background); border-left:1px solid var(--color-border);
  border-top:1px solid var(--color-border); transform: rotate(45deg);
}
html[dir="rtl"] #accountDropdown::before{ left:auto; right:18px; border-left:0; border-right:1px solid var(--color-border); }
@media (max-width: 991.98px){
  #accountDropdown::before{ display:none !important; }
}
/* ===== Notifications (icon + dropdown) ===== */
#notifTrigger, #notifTriggerXs{ line-height:1; position:relative; }
/* Force bell color inside navbar */
.navbar .bi-bell,
.navbar .bi-bell-fill{ color:#fff; font-size:1.15rem; vertical-align:-2px; }
.navbar .nav-link:hover .bi-bell,
.navbar .nav-link:hover .bi-bell-fill{ color: var(--color-secondary); }
/* Mobile bell size + color */
.d-lg-none .bi-bell, .d-lg-none .bi-bell-fill{ font-size:1.35rem; color:#fff; }
/* Badge positioning (desktop default) */
#notifTrigger .badge, #notifTriggerXs .badge{
  position:absolute; top:0; left:100%; transform: translate(-50%,-35%);
}
html[dir="rtl"] #notifTrigger .badge, html[dir="rtl"] #notifTriggerXs .badge{
  left:auto; right:100%; transform: translate(50%,-35%);
}
/* Tighter badge position on mobile to stick to icon */
@media (max-width: 991.98px){
  #notifTriggerXs{ position:relative; }
  #notifTriggerXs .notif-count-badge{
    top:-6px; inset-inline-start:14px; transform:none; /* RTL handled by logical prop */
  }
}
.navbar .badge{ font-size:.65rem; padding:.25rem .35rem; line-height:1; }
/* Notification panel (surface colors, not dark) */
.notif-dropdown{
  min-width: 320px; max-width: 380px;
  border:1px solid var(--color-border);
  border-radius: var(--btn-radius);
  background: var(--color-background);
  color: var(--color-text);
  box-shadow: 0 12px 32px rgba(0,0,0,.16);
  z-index: 1080;
}
/* Mobile centering helper (usable on any dropdown) */
.dropdown-menu-center {
  left: 50% !important;
  right: auto !important;
  transform: translateX(-50%) !important;
}
html[dir="rtl"] .dropdown-menu-center {
  left: auto !important;
  right: 50% !important;
  transform: translateX(50%) !important;
}
/* Header inside notification dropdown */
.notif-head{
  display:flex; align-items:center; justify-content:space-between;
  padding:.5rem .75rem; background: var(--color-background); border-bottom:1px solid var(--color-border);
  position: sticky; top:0; z-index: 5;
}
.notif-head-title{ font-weight:700; color: var(--color-primary); }
/* Scroll area */
.notif-scroll{ max-height:60vh; overflow:auto; }
/* List items */
.notif-dropdown .list-group-item{ padding:.6rem .75rem; background: transparent; transition: background-color var(--transition-speed); }
/* Text overflow control */
.notif-item .flex-grow-1.min-w-0{ min-width:0; }
.notif-title{
  font-weight:600; color: var(--color-primary);
  display:-webkit-box; -webkit-line-clamp:1; -webkit-box-orient:vertical;
  overflow:hidden; text-overflow:ellipsis; word-break:break-word;
}
.notif-text{
  color:#6c757d; font-size:.875rem;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
  overflow:hidden; text-overflow:ellipsis; word-break:break-word;
}
/* Subtle themed hover for whole rows */
.notif-dropdown .list-group-item:hover {
  background: rgba(5, 25, 57, .06); /* primary #051939 @ ~6% */
}
/* Subtle themed hover for whole rows */
.notif-dropdown .list-group-item:hover {
  background: rgba(5, 25, 57, .06); /* primary #051939 @ ~6% */
}
/* Keep kebab clickable over link area */
.notif-kebab, .notif-head-kebab{ position:relative; z-index:3; }
/* Kebab action menu (inside notifications) — refined hover + clipped corners */
.notif-action-menu {
  background-color: var(--color-background) !important;
  border: 1px solid var(--color-border) !important;
  border-radius: var(--btn-radius) !important;
  box-shadow: 0 6px 18px rgba(0,0,0,.15) !important;
  min-width: 160px !important;
  padding: 0.25rem 0 !important;
  z-index: 1090; /* above the notif panel */
  overflow: hidden; /* clip hover bg to rounded corners */
}
.notif-action-menu .dropdown-item {
  color: var(--color-text) !important;
  padding: 0.375rem 1rem !important;
  transition: background-color var(--transition-speed), color var(--transition-speed);
}
/* Default hover: subtle primary tint + primary text (no orange block) */
.notif-action-menu .dropdown-item:hover,
.notif-action-menu .dropdown-item:focus {
  background-color: rgba(var(--color-primary-rgb, 5, 25, 57), .08) !important;
  color: var(--color-primary) !important;
}
/* Danger base color */
.notif-action-menu .dropdown-item.text-danger {
  color: #dc3545 !important;
}
/* Danger hover: soft red tint (keeps red text) */
.notif-action-menu .dropdown-item.text-danger:hover,
.notif-action-menu .dropdown-item.text-danger:focus {
  color: #dc3545 !important;
  background-color: rgba(220, 53, 69, .12) !important;
}
.notif-action-menu .dropdown-divider {
  margin: 0.25rem 0 !important;
  border-color: var(--color-border) !important;
}
/* Ensure proper stacking contexts */
.notif-dropdown .dropdown { position: relative; }
.notif-dropdown .dropdown-menu { position: absolute; z-index: 1090; }
/* Prevent navbar-wide link rule from affecting notif panel links */
.navbar .notif-dropdown a:not(.btn) {
  color: inherit !important;
}
.navbar .notif-dropdown a:not(.btn):hover {
  color: var(--color-secondary) !important;
}
/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  #mainNavbar .nav-link::after,
  .navbar a:not(.btn){ transition:none !important; }
}