/**
 * ========================================================
 * NAVBAR COMPONENT STYLESHEET
 * Modular Styles for Dashboard & Non-Dashboard Top Navbars
 * ========================================================
 */

/* 0. Universal / Global Navbar Reset: Completely Eliminate Blur & Translucency */
.layout-page::before,
.layout-navbar-fixed .layout-wrapper:not(.layout-horizontal) .layout-page::before,
.layout-wrapper:not(.layout-horizontal) .layout-page::before,
.layout-navbar-fixed .layout-page::before {
  display: none !important;
  content: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  mask: none !important;
  background: none !important;
}

.layout-navbar,
#layout-navbar,
.layout-menu.menu-vertical ~ .layout-page.window-scrolled .layout-navbar,
.window-scrolled .layout-navbar,
.window-scrolled #layout-navbar {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  opacity: 1 !important;
}

/* 1. Global / Desktop Navbar Base Styles */
@media (min-width: 768px) {
  .layout-navbar,
  .layout-navbar.navbar-detached,
  .window-scrolled .layout-navbar.navbar-detached,
  #layout-navbar {
    border-radius: var(--bs-card-border-radius, 0.75rem) !important;
    border: none !important;
    border-width: 0 !important;
    box-shadow: 0 0.125rem 0.375rem 0 rgba(0, 0, 0, 0.05) !important;
    background: var(--bs-card-bg, #ffffff) !important;
    background-color: var(--bs-card-bg, #ffffff) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    opacity: 1 !important;
  }

  [data-bs-theme="dark"] .layout-navbar,
  [data-bs-theme="dark"] .layout-navbar.navbar-detached,
  [data-bs-theme="dark"] .window-scrolled .layout-navbar.navbar-detached,
  [data-bs-theme="dark"] #layout-navbar {
    border-radius: var(--bs-card-border-radius, 0.75rem) !important;
    border: none !important;
    border-width: 0 !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.35) !important;
    background-color: var(--bs-paper-bg, #1e1e1e) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    opacity: 1 !important;
  }

  /* Dark mode navbar solid on scroll */
  [data-bs-theme="dark"] .layout-menu.menu-vertical ~ .layout-page.window-scrolled .layout-navbar {
    background-color: var(--bs-paper-bg, #1e1e1e) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  .has-dashboard-hero #layout-navbar.navbar-detached {
    margin-bottom: 0.85rem !important;
  }
  .has-dashboard-hero .greeting-section .avatar {
    display: none !important;
  }

  /* Reset search toggler, hamburger menu, and action buttons on desktop/tablet */
  #layout-navbar #layout-menu-btn,
  #layout-navbar #layout-menu-btn .nav-link,
  #layout-navbar .navbar-search-wrapper,
  #layout-navbar .navbar-search-wrapper .search-toggler,
  #layout-navbar #autocomplete,
  #layout-navbar .aa-Autocomplete,
  #layout-navbar .aa-DetachedSearchButton {
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    border-color: transparent !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    width: auto !important;
    height: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    aspect-ratio: auto !important;
  }

  [data-bs-theme="dark"] #layout-navbar #layout-menu-btn,
  [data-bs-theme="dark"] #layout-navbar #layout-menu-btn .nav-link,
  [data-bs-theme="dark"] #layout-navbar .navbar-search-wrapper,
  [data-bs-theme="dark"] #layout-navbar .navbar-search-wrapper .search-toggler,
  [data-bs-theme="dark"] #layout-navbar #autocomplete,
  [data-bs-theme="dark"] #layout-navbar .aa-Autocomplete,
  [data-bs-theme="dark"] #layout-navbar .aa-DetachedSearchButton,
  html[data-bs-theme="dark"] #layout-navbar #layout-menu-btn,
  html[data-bs-theme="dark"] #layout-navbar #layout-menu-btn .nav-link,
  html[data-bs-theme="dark"] #layout-navbar .navbar-search-wrapper,
  html[data-bs-theme="dark"] #layout-navbar .navbar-search-wrapper .search-toggler,
  html[data-bs-theme="dark"] #layout-navbar #autocomplete,
  html[data-bs-theme="dark"] #layout-navbar .aa-Autocomplete,
  html[data-bs-theme="dark"] #layout-navbar .aa-DetachedSearchButton,
  [data-bs-theme="light"] #layout-navbar #layout-menu-btn,
  [data-bs-theme="light"] #layout-navbar #layout-menu-btn .nav-link,
  [data-bs-theme="light"] #layout-navbar .navbar-search-wrapper,
  [data-bs-theme="light"] #layout-navbar .navbar-search-wrapper .search-toggler,
  [data-bs-theme="light"] #layout-navbar #autocomplete,
  [data-bs-theme="light"] #layout-navbar .aa-Autocomplete,
  [data-bs-theme="light"] #layout-navbar .aa-DetachedSearchButton,
  html:not([data-bs-theme="dark"]) #layout-navbar #layout-menu-btn,
  html:not([data-bs-theme="dark"]) #layout-navbar #layout-menu-btn .nav-link,
  html:not([data-bs-theme="dark"]) #layout-navbar .navbar-search-wrapper,
  html:not([data-bs-theme="dark"]) #layout-navbar .navbar-search-wrapper .search-toggler,
  html:not([data-bs-theme="dark"]) #layout-navbar #autocomplete,
  html:not([data-bs-theme="dark"]) #layout-navbar .aa-Autocomplete,
  html:not([data-bs-theme="dark"]) #layout-navbar .aa-DetachedSearchButton {
    background: transparent !important;
    background-color: transparent !important;
    box-shadow: none !important;
    border: none !important;
    outline: none !important;
  }

  /* Explicitly hide mobile-only navbar elements on Desktop */
  #navMobileLeftSlot,
  .nav-mobile-left-slot,
  #navMobileTitleWrapper,
  .navbar-page-title-mobile,
  .navbar-brand-mobile,
  #navMobileSearchSlot,
  #navMobileNotifSlot,
  #navMobileEditProfileSlot,
  #navMobileMenuSlot {
    display: none !important;
  }
}

/* Tablet only (768px - 1199.98px): show sidebar toggle button in navbar */
@media (min-width: 768px) and (max-width: 1199.98px) {
  #layout-navbar #layout-menu-btn {
    display: flex !important;
  }
}

/* Desktop only (>= 1200px): strictly hide sidebar toggle button in navbar (sidebar is permanently visible with its own toggle) */
@media (min-width: 1200px) {
  #layout-navbar #layout-menu-btn,
  .layout-navbar #layout-menu-btn {
    display: none !important;
  }
}

/**
 * ========================================================
 * 2. UNIFIED MOBILE TOP NAVBAR (< 768px)
 * Clean, modern app shell across all pages:
 * - Sticky Top App Bar
 * - Transparent at top, solid desktop theme background on scroll
 * - Perfect 100% true screen center for detail/sub-page titles
 * - Left alignment for main list page titles
 * ========================================================
 */
@media (max-width: 767.98px) {
  .layout-page,
  .has-dashboard-hero,
  .layout-page.has-dashboard-hero,
  html.layout-navbar-fixed .layout-page,
  .layout-navbar-fixed .layout-wrapper:not(.layout-without-menu) .layout-page,
  .layout-navbar-fixed .layout-page {
    position: relative !important;
    padding-top: 0 !important;
  }

  /* Disable Sneat Default Top Blur Gradient on .layout-page */
  .layout-page::before,
  .layout-navbar-fixed .layout-wrapper:not(.layout-horizontal) .layout-page::before,
  .layout-wrapper:not(.layout-horizontal) .layout-page::before,
  .layout-navbar-fixed .layout-page::before {
    display: none !important;
    content: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    mask: none !important;
    background: none !important;
  }

  /* Completely Eliminate all Blur / Backdrop Filters from Navbar */
  #layout-navbar,
  .layout-navbar,
  .layout-menu.menu-vertical ~ .layout-page.window-scrolled .layout-navbar,
  .window-scrolled #layout-navbar,
  .window-scrolled .layout-navbar,
  #layout-navbar.navbar-scrolled {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  /* -------------------------------------------------------------------------- */
  /* MOBILE TOP APP BAR BASE & LAYOUT RESET (< 768px)                          */
  /* Always flush to top (0px gap), zero margins, full width, border-radius: 0 */
  /* -------------------------------------------------------------------------- */
  #layout-navbar,
  .layout-navbar,
  .layout-page #layout-navbar,
  .layout-page:not(.has-dashboard-hero) #layout-navbar,
  .has-dashboard-hero #layout-navbar,
  .layout-navbar.navbar-detached {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    box-sizing: border-box !important;
    position: sticky !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    margin: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    margin-block: 0 !important;
    margin-inline: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    inline-size: 100% !important;
    max-inline-size: 100% !important;
    height: var(--rsa-mobile-bar-height, 64px) !important;
    min-height: var(--rsa-mobile-bar-height, 64px) !important;
    max-height: var(--rsa-mobile-bar-height, 64px) !important;
    padding-left: 1.25rem !important;
    padding-right: 1.25rem !important;
    padding-top: 0.5rem !important;
    padding-bottom: 0.5rem !important;
    border-radius: 0 !important;
    outline: none !important;
    border: none !important;
    border-bottom: none !important;
    background: transparent !important;
    background-color: transparent !important;
    box-shadow: none !important;
    z-index: 1040 !important;
    transform: translateZ(0) !important;
    -webkit-transform: translateZ(0) !important;
    backface-visibility: hidden !important;
    -webkit-backface-visibility: hidden !important;
    transition: background-color 0.25s ease, box-shadow 0.25s ease !important;
  }

  /* -------------------------------------------------------------------------- */
  /* 1. AT TOP OF PAGE (UNSCROLLED / MENTOK): Fully Transparent               */
  /* Fixed consistent height (64px) to prevent layout shifts & jitter on scroll */
  /* -------------------------------------------------------------------------- */
  #layout-navbar:not(.navbar-scrolled),
  .layout-navbar:not(.navbar-scrolled),
  .layout-page:not(.window-scrolled) #layout-navbar:not(.navbar-scrolled),
  .layout-page:not(.window-scrolled) #layout-navbar,
  body:not(.window-scrolled) #layout-navbar:not(.navbar-scrolled),
  body:not(.window-scrolled) #layout-navbar {
    height: var(--rsa-mobile-bar-height, 64px) !important;
    min-height: var(--rsa-mobile-bar-height, 64px) !important;
    max-height: var(--rsa-mobile-bar-height, 64px) !important;
    padding-top: 0.5rem !important;
    padding-bottom: 0.5rem !important;
    background: transparent !important;
    background-color: transparent !important;
    box-shadow: none !important;
    border-bottom: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  [data-bs-theme="dark"] #layout-navbar:not(.navbar-scrolled),
  [data-bs-theme="dark"] .layout-navbar:not(.navbar-scrolled),
  [data-bs-theme="dark"] .layout-page:not(.window-scrolled) #layout-navbar:not(.navbar-scrolled),
  [data-bs-theme="dark"] .layout-page:not(.window-scrolled) #layout-navbar,
  [data-bs-theme="dark"] body:not(.window-scrolled) #layout-navbar:not(.navbar-scrolled),
  [data-bs-theme="dark"] body:not(.window-scrolled) #layout-navbar {
    background: transparent !important;
    background-color: transparent !important;
    box-shadow: none !important;
    border-bottom: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  /* -------------------------------------------------------------------------- */
  /* 2. SCROLLED / STICKY ACTIVE STATE: Solid Background + Shadow (Same 64px)   */
  /* -------------------------------------------------------------------------- */
  #layout-navbar.navbar-scrolled,
  .layout-navbar.navbar-scrolled,
  .layout-page #layout-navbar.navbar-scrolled,
  .window-scrolled #layout-navbar,
  .window-scrolled .layout-navbar,
  .layout-page.window-scrolled #layout-navbar,
  .layout-page.window-scrolled .layout-navbar,
  .has-dashboard-hero.window-scrolled #layout-navbar,
  .has-dashboard-hero.window-scrolled .layout-navbar,
  body.window-scrolled #layout-navbar,
  body.window-scrolled .layout-navbar,
  html.layout-menu-expanded body.window-scrolled #layout-navbar,
  html.layout-menu-expanded #layout-navbar.navbar-scrolled {
    height: var(--rsa-mobile-bar-height, 64px) !important;
    min-height: var(--rsa-mobile-bar-height, 64px) !important;
    max-height: var(--rsa-mobile-bar-height, 64px) !important;
    padding-top: 0.5rem !important;
    padding-bottom: 0.5rem !important;
    background: #ffffff !important;
    background-color: #ffffff !important;
    border-bottom: none !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06) !important;
  }

  [data-bs-theme="dark"] #layout-navbar.navbar-scrolled,
  [data-bs-theme="dark"] .layout-navbar.navbar-scrolled,
  [data-bs-theme="dark"] .layout-page #layout-navbar.navbar-scrolled,
  [data-bs-theme="dark"] .window-scrolled #layout-navbar,
  [data-bs-theme="dark"] .window-scrolled .layout-navbar,
  [data-bs-theme="dark"] .layout-page.window-scrolled #layout-navbar,
  [data-bs-theme="dark"] .layout-page.window-scrolled .layout-navbar,
  [data-bs-theme="dark"] .has-dashboard-hero.window-scrolled #layout-navbar,
  [data-bs-theme="dark"] .has-dashboard-hero.window-scrolled .layout-navbar,
  [data-bs-theme="dark"] body.window-scrolled #layout-navbar,
  [data-bs-theme="dark"] body.window-scrolled .layout-navbar,
  html[data-bs-theme="dark"] .window-scrolled #layout-navbar,
  html[data-bs-theme="dark"] #layout-navbar.navbar-scrolled,
  html.layout-menu-expanded[data-bs-theme="dark"] body.window-scrolled #layout-navbar,
  html.layout-menu-expanded[data-bs-theme="dark"] #layout-navbar.navbar-scrolled,
  html.layout-menu-expanded body.window-scrolled #layout-navbar,
  html.layout-menu-expanded #layout-navbar.navbar-scrolled,
  [data-bs-theme="dark"] body.modal-open.window-scrolled #layout-navbar,
  [data-bs-theme="dark"] body.offcanvas-open.window-scrolled #layout-navbar {
    height: var(--rsa-mobile-bar-height, 64px) !important;
    min-height: var(--rsa-mobile-bar-height, 64px) !important;
    max-height: var(--rsa-mobile-bar-height, 64px) !important;
    padding-top: 0.5rem !important;
    padding-bottom: 0.5rem !important;
    background-color: var(--bs-paper-bg, #1e1e1e) !important;
    border-bottom: none !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4) !important;
    opacity: 1 !important;
    visibility: visible !important;
  }



  /* ---------------------------------------------------- */
  /* A. HAS BACK BUTTON (Subpage / Detail View): SYMMETRIC 3-SLOT LAYOUT */
  /* ---------------------------------------------------- */

  /* Slot 1: Left Back Button (44px fixed width) */
  #layout-navbar.has-back-btn #navMobileLeftSlot {
    order: 1 !important;
    width: 44px !important;
    min-width: 44px !important;
    max-width: 44px !important;
    height: 44px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    flex: 0 0 44px !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  /* Slot 2: Center Title & Badge (Flex 1 1 0, 100% Centered) */
  #layout-navbar.has-back-btn #navMobileTitleWrapper {
    order: 2 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    flex: 1 1 0 !important;
    min-width: 0 !important;
    max-width: 100% !important;
    margin: 0 auto !important;
    padding: 0 0.5rem !important;
    overflow: hidden !important;
  }

  #layout-navbar.has-back-btn #navMobileTitleWrapper .title-inner-container {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    max-width: 100% !important;
    margin: 0 auto !important;
    min-width: 0 !important;
  }

  #layout-navbar.has-back-btn #navMobileTitleWrapper .page-header-title {
    text-align: center !important;
    margin: 0 auto !important;
  }

  /* Slot 3: Right Hamburger Menu Button (44px fixed width) */
  #layout-navbar.has-back-btn #navMobileMenuSlot {
    order: 3 !important;
    width: 44px !important;
    min-width: 44px !important;
    max-width: 44px !important;
    height: 44px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    flex: 0 0 44px !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  /* ---------------------------------------------------- */
  /* B. NO BACK BUTTON (Main List Pages): LEFT-ALIGNED LAYOUT */
  /* ---------------------------------------------------- */

  /* Slot 1: Hide left slot */
  #layout-navbar:not(.has-back-btn) #navMobileLeftSlot {
    display: none !important;
    width: 0 !important;
    min-width: 0 !important;
    max-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  /* Slot 2: Left-aligned title */
  #layout-navbar:not(.has-back-btn) #navMobileTitleWrapper {
    order: 1 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    text-align: left !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
    margin: 0 !important;
    margin-right: auto !important;
    padding: 0 !important;
    overflow: hidden !important;
  }

  #layout-navbar:not(.has-back-btn) #navMobileTitleWrapper .title-inner-container {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    text-align: left !important;
    margin: 0 !important;
    max-width: 100% !important;
  }

  #layout-navbar:not(.has-back-btn) #navMobileTitleWrapper .page-header-title {
    text-align: left !important;
    margin: 0 !important;
  }

  /* Slot 3: Right Hamburger Menu Button (44px fixed width) */
  #layout-navbar:not(.has-back-btn) #navMobileMenuSlot {
    order: 3 !important;
    width: 44px !important;
    min-width: 44px !important;
    max-width: 44px !important;
    height: 44px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    flex: 0 0 44px !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  /* Mobile Edit Profile Button: Placed directly beside hamburger button on right */
  #layout-navbar #navMobileEditProfileSlot {
    order: 2 !important;
    width: 44px !important;
    min-width: 44px !important;
    max-width: 44px !important;
    height: 44px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 0 0 44px !important;
    margin: 0 0.5rem 0 0 !important;
    padding: 0 !important;
  }

  /* ---------------------------------------------------- */
  /* C. SEARCH & NOTIFICATION BUTTON RULES: ONLY ON DASHBOARD */
  /* ---------------------------------------------------- */

  /* Non-Dashboard: Search wrapper & mobile notif slot are completely hidden on mobile */
  #layout-navbar:not(.is-dashboard) .navbar-nav.flex-grow-1,
  #layout-navbar:not(.is-dashboard) .navbar-search-wrapper,
  #layout-navbar:not(.is-dashboard) #navMobileSearchSlot,
  #layout-navbar:not(.is-dashboard) #navMobileNotifSlot {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }

  /* Dashboard: Brand logo on far left, Search + Notif + Menu on far right */
  #layout-navbar.is-dashboard .navbar-brand-mobile {
    order: 1 !important;
    display: inline-flex !important;
    align-items: center !important;
    margin: 0 !important;
    margin-right: auto !important;
    padding: 0 !important;
    min-width: 0 !important;
    max-width: calc(100% - 150px) !important;
    flex: 1 1 auto !important;
    overflow: hidden !important;
  }

  /* Dynamic Scrolled Greeting & Name: Hidden at top, fades in smoothly when scrolled, fades out when scrolled back */
  #layout-navbar.is-dashboard .nav-scrolled-greeting {
    display: flex !important;
    opacity: 0;
    visibility: hidden;
    transform: translateY(3px);
    transition: opacity 0.28s cubic-bezier(0.16, 1, 0.3, 1), transform 0.28s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.28s;
    margin-left: 12px !important;
    min-width: 0 !important;
    flex: 1 1 auto !important;
    line-height: 1.25 !important;
    overflow: hidden !important;
    pointer-events: none;
    will-change: opacity, transform;
  }

  .window-scrolled #layout-navbar.is-dashboard .nav-scrolled-greeting,
  #layout-navbar.is-dashboard.navbar-scrolled .nav-scrolled-greeting,
  .has-dashboard-hero.window-scrolled #layout-navbar.is-dashboard .nav-scrolled-greeting,
  body.window-scrolled #layout-navbar.is-dashboard .nav-scrolled-greeting {
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateY(0) !important;
    pointer-events: auto !important;
  }

  /* Dashboard Mobile Top Greeting: Fades from visible to gone when navbar greeting appears */
  .greeting-mobile-wrapper {
    opacity: 1;
    transform: translateY(0);
    transition: opacity 0.28s cubic-bezier(0.16, 1, 0.3, 1), transform 0.28s cubic-bezier(0.16, 1, 0.3, 1);
    will-change: opacity, transform;
  }

  body.window-scrolled .greeting-mobile-wrapper,
  .window-scrolled .greeting-mobile-wrapper,
  .layout-page.window-scrolled .greeting-mobile-wrapper {
    opacity: 0 !important;
    transform: translateY(-8px) !important;
    pointer-events: none !important;
  }

  /* Scrolled Greeting Text (Rotating) */
  #layout-navbar.is-dashboard .nav-scrolled-greeting-text {
    font-size: 0.72rem !important;
    font-weight: 500 !important;
    color: var(--bs-secondary-color) !important;
    display: block !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    line-height: 1.15 !important;
    will-change: transform, opacity;
  }

  /* Scrolled Name Text (Responsive clamp & gap) */
  #layout-navbar.is-dashboard .nav-scrolled-name {
    font-size: clamp(0.85rem, 3.8vw, 0.95rem) !important;
    font-weight: 700 !important;
    color: var(--bs-heading-color) !important;
    letter-spacing: -0.01em !important;
    margin-top: 3px !important;
    display: block !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    max-width: 100% !important;
    line-height: 1.2 !important;
  }

  @keyframes navScrolledGreetingFadeIn {
    from {
      opacity: 0;
      transform: translateY(3px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  /* Dashboard Action 1: Search Button */
  #layout-navbar.is-dashboard #navMobileSearchSlot {
    order: 2 !important;
    width: 44px !important;
    min-width: 44px !important;
    max-width: 44px !important;
    height: 44px !important;
    margin: 0 0.5rem 0 0 !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 0 0 44px !important;
  }

  /* Dashboard Action 2: Notification Bell Button */
  #layout-navbar.is-dashboard #navMobileNotifSlot {
    order: 3 !important;
    width: 44px !important;
    min-width: 44px !important;
    max-width: 44px !important;
    height: 44px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 0 0 44px !important;
    margin: 0 0.5rem 0 0 !important;
    padding: 0 !important;
  }

  /* Dashboard Action 3: Hamburger Menu Button */
  #layout-navbar.is-dashboard #navMobileMenuSlot {
    order: 4 !important;
    width: 44px !important;
    min-width: 44px !important;
    max-width: 44px !important;
    height: 44px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 0 0 44px !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  /* Explicitly hide desktop menu toggle and desktop search wrapper on Mobile (< 768px) */
  #layout-navbar #layout-menu-btn,
  #layout-navbar .navbar-search-wrapper {
    display: none !important;
  }

  /* ---------------------------------------------------- */
  /* D. TITLE & BADGE TYPOGRAPHY */
  /* ---------------------------------------------------- */
  #layout-navbar .navbar-page-title-mobile .page-header-title {
    font-size: 1.375rem !important;
    font-weight: 700 !important;
    color: var(--bs-heading-color) !important;
    margin: 0 !important;
    line-height: 1.25 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  #layout-navbar .navbar-page-title-mobile #navMobileTitleBadge {
    font-size: 0.8125rem !important;
    font-weight: 600 !important;
    padding: 0.35em 0.65em !important;
    flex-shrink: 0 !important;
    vertical-align: middle !important;
  }

  /* Sembunyikan badge jika kosong atau berstatus d-none */
  #navMobileTitleBadge:empty,
  #navMobileTitleBadge.d-none,
  #layout-navbar #navMobileTitleBadge:empty,
  #layout-navbar #navMobileTitleBadge.d-none {
    display: none !important;
  }

  /* Jarak atas bersih di bawah navbar sticky mobile (non-dashboard) */
  .layout-page:not(.has-dashboard-hero) .content-wrapper > .container-p-y,
  .layout-page:not(.has-dashboard-hero) .container-xxl.container-p-y,
  .layout-page:not(.has-dashboard-hero) .layout-navbar-fixed .container-p-y:not([class^=pt-]):not([class*=" pt-"]),
  .layout-page:not(.has-dashboard-hero) .container-p-y {
    padding-top: 1.25rem !important;
    padding-block-start: 1.25rem !important;
  }

  /* Sembunyikan tombol back di body pada mobile (karena sudah ada di navbar mobile) */
  .btn-back,
  a.btn-back,
  .page-header-row .btn-back {
    display: none !important;
  }

  /* Brand Logo in mobile navbar */
  #layout-navbar .navbar-brand-mobile .app-brand-link {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    text-decoration: none !important;
    line-height: 1 !important;
    height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  /* Theme-specific visibility for brand logo in mobile navbar */
  [data-bs-theme="dark"] #layout-navbar .navbar-brand-mobile .light-logo,
  html[data-bs-theme="dark"] #layout-navbar .navbar-brand-mobile .light-logo {
    display: none !important;
  }

  :root:not([data-bs-theme="dark"]) #layout-navbar .navbar-brand-mobile .dark-logo,
  [data-bs-theme="light"] #layout-navbar .navbar-brand-mobile .dark-logo,
  html:not([data-bs-theme="dark"]) #layout-navbar .navbar-brand-mobile .dark-logo {
    display: none !important;
  }

  [data-bs-theme="dark"] #layout-navbar .navbar-brand-mobile .app-brand-logo.dark-logo,
  html[data-bs-theme="dark"] #layout-navbar .navbar-brand-mobile .app-brand-logo.dark-logo,
  :root:not([data-bs-theme="dark"]) #layout-navbar .navbar-brand-mobile .app-brand-logo.light-logo,
  [data-bs-theme="light"] #layout-navbar .navbar-brand-mobile .app-brand-logo.light-logo,
  html:not([data-bs-theme="dark"]) #layout-navbar .navbar-brand-mobile .app-brand-logo.light-logo {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    line-height: 1 !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  [data-bs-theme="dark"] #layout-navbar .navbar-brand-mobile .app-brand-text.dark-logo,
  html[data-bs-theme="dark"] #layout-navbar .navbar-brand-mobile .app-brand-text.dark-logo,
  :root:not([data-bs-theme="dark"]) #layout-navbar .navbar-brand-mobile .app-brand-text.light-logo,
  [data-bs-theme="light"] #layout-navbar .navbar-brand-mobile .app-brand-text.light-logo,
  html:not([data-bs-theme="dark"]) #layout-navbar .navbar-brand-mobile .app-brand-text.light-logo {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    line-height: 1 !important;
    height: auto !important;
    margin: 0 0 0 0.5rem !important;
    padding: 0 !important;
  }

  #layout-navbar .navbar-brand-mobile .app-brand-logo img {
    height: 27px !important;
    width: auto !important;
    display: block !important;
    margin: 0 !important;
    -webkit-backface-visibility: hidden !important;
    backface-visibility: hidden !important;
    image-rendering: -webkit-optimize-contrast;
  }

  #layout-navbar .navbar-brand-mobile .app-brand-text img {
    height: 25px !important;
    width: auto !important;
    display: block !important;
    margin: 0 !important;
    -webkit-backface-visibility: hidden !important;
    backface-visibility: hidden !important;
    image-rendering: -webkit-optimize-contrast;
  }

  /* Hide desktop navbar-nav-right on mobile */
  #layout-navbar .navbar-nav-right {
    display: none !important;
  }

  #layout-navbar #autocomplete {
    display: none !important;
  }

  /* ---------------------------------------------------- */
  /* E. UNIFIED CIRCULAR ACTION BUTTONS (44px x 44px) */
  /* ---------------------------------------------------- */
  #layout-navbar .nav-back-btn,
  #layout-navbar .nav-circle-btn,
  #layout-navbar #navMobileSearchSlot .nav-circle-btn,
  #layout-navbar #navMobileNotifSlot .nav-circle-btn,
  #layout-navbar #navMobileMenuSlot .nav-circle-btn,
  #layout-navbar #navMobileBackBtn {
    height: 44px !important;
    min-height: 44px !important;
    max-height: 44px !important;
    width: 44px !important;
    min-width: 44px !important;
    max-width: 44px !important;
    aspect-ratio: 1 / 1 !important;
    padding: 0 !important;
    border-radius: 50% !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 !important;
    box-shadow: none !important;
    transition: background-color 0.15s ease, border-color 0.15s ease, transform 0.1s ease, color 0.15s ease !important;
    cursor: pointer !important;
    text-decoration: none !important;
    box-sizing: border-box !important;
    flex-shrink: 0 !important;
    outline: none !important;
  }

  #layout-navbar .nav-back-btn i,
  #layout-navbar .nav-circle-btn i,
  #layout-navbar #navMobileSearchSlot .nav-circle-btn i,
  #layout-navbar #navMobileNotifSlot .nav-circle-btn i,
  #layout-navbar #navMobileMenuSlot .nav-circle-btn i,
  #layout-navbar #navMobileBackBtn i,
  #layout-navbar .nav-back-btn .material-symbols-outlined,
  #layout-navbar .nav-circle-btn .material-symbols-outlined,
  #layout-navbar #navMobileSearchSlot .nav-circle-btn .material-symbols-outlined,
  #layout-navbar #navMobileNotifSlot .nav-circle-btn .material-symbols-outlined,
  #layout-navbar #navMobileMenuSlot .nav-circle-btn .material-symbols-outlined,
  #layout-navbar #navMobileBackBtn .material-symbols-outlined {
    font-size: 1.35rem !important;
    line-height: 1 !important;
    margin: 0 !important;
    margin-right: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: inherit !important;
  }

  /* --- 1. LIGHT THEME: BASE STATE (Soft Tinted Chip - Only for Circular Action Buttons) --- */
  :root:not([data-bs-theme="dark"]) #layout-navbar .nav-back-btn,
  :root:not([data-bs-theme="dark"]) #layout-navbar .nav-circle-btn,
  :root:not([data-bs-theme="dark"]) #layout-navbar #navMobileLeftSlot .nav-circle-btn,
  :root:not([data-bs-theme="dark"]) #layout-navbar #navMobileSearchSlot .nav-circle-btn,
  :root:not([data-bs-theme="dark"]) #layout-navbar #navMobileNotifSlot .nav-circle-btn,
  :root:not([data-bs-theme="dark"]) #layout-navbar #navMobileMenuSlot .nav-circle-btn,
  :root:not([data-bs-theme="dark"]) #layout-navbar #navMobileBackBtn,
  [data-bs-theme="light"] #layout-navbar .nav-back-btn,
  [data-bs-theme="light"] #layout-navbar .nav-circle-btn,
  [data-bs-theme="light"] #layout-navbar #navMobileLeftSlot .nav-circle-btn,
  [data-bs-theme="light"] #layout-navbar #navMobileSearchSlot .nav-circle-btn,
  [data-bs-theme="light"] #layout-navbar #navMobileNotifSlot .nav-circle-btn,
  [data-bs-theme="light"] #layout-navbar #navMobileMenuSlot .nav-circle-btn,
  [data-bs-theme="light"] #layout-navbar #navMobileBackBtn,
  html:not([data-bs-theme="dark"]) #layout-navbar .nav-back-btn,
  html:not([data-bs-theme="dark"]) #layout-navbar .nav-circle-btn,
  html:not([data-bs-theme="dark"]) #layout-navbar #navMobileLeftSlot .nav-circle-btn,
  html:not([data-bs-theme="dark"]) #layout-navbar #navMobileSearchSlot .nav-circle-btn,
  html:not([data-bs-theme="dark"]) #layout-navbar #navMobileNotifSlot .nav-circle-btn,
  html:not([data-bs-theme="dark"]) #layout-navbar #navMobileMenuSlot .nav-circle-btn,
  html:not([data-bs-theme="dark"]) #layout-navbar #navMobileBackBtn {
    background: var(--bs-btn-circle-bg, #e5e5e5) !important;
    background-color: var(--bs-btn-circle-bg, #e5e5e5) !important;
    border: none !important;
    border-color: transparent !important;
    color: var(--bs-btn-circle-color, #2c2c2c) !important;
    box-shadow: none !important;
    outline: none !important;
  }

  /* --- 2. LIGHT THEME: HOVER / FOCUS / CLICK --- */
  :root:not([data-bs-theme="dark"]) #layout-navbar .nav-back-btn:hover,
  :root:not([data-bs-theme="dark"]) #layout-navbar .nav-back-btn:focus,
  :root:not([data-bs-theme="dark"]) #layout-navbar .nav-back-btn:focus-visible,
  :root:not([data-bs-theme="dark"]) #layout-navbar .nav-back-btn:active,
  :root:not([data-bs-theme="dark"]) #layout-navbar .nav-circle-btn:hover,
  :root:not([data-bs-theme="dark"]) #layout-navbar .nav-circle-btn:focus,
  :root:not([data-bs-theme="dark"]) #layout-navbar .nav-circle-btn:focus-visible,
  :root:not([data-bs-theme="dark"]) #layout-navbar .nav-circle-btn:active,
  :root:not([data-bs-theme="dark"]) #layout-navbar #navMobileBackBtn:hover,
  :root:not([data-bs-theme="dark"]) #layout-navbar #navMobileBackBtn:focus,
  :root:not([data-bs-theme="dark"]) #layout-navbar #navMobileBackBtn:focus-visible,
  :root:not([data-bs-theme="dark"]) #layout-navbar #navMobileBackBtn:active,
  :root:not([data-bs-theme="dark"]) #layout-navbar #navMobileLeftSlot .nav-circle-btn:hover,
  :root:not([data-bs-theme="dark"]) #layout-navbar #navMobileLeftSlot .nav-circle-btn:focus,
  :root:not([data-bs-theme="dark"]) #layout-navbar #navMobileLeftSlot .nav-circle-btn:active,
  :root:not([data-bs-theme="dark"]) #layout-navbar #navMobileSearchSlot .nav-circle-btn:hover,
  :root:not([data-bs-theme="dark"]) #layout-navbar #navMobileSearchSlot .nav-circle-btn:focus,
  :root:not([data-bs-theme="dark"]) #layout-navbar #navMobileSearchSlot .nav-circle-btn:active,
  :root:not([data-bs-theme="dark"]) #layout-navbar #navMobileNotifSlot .nav-circle-btn:hover,
  :root:not([data-bs-theme="dark"]) #layout-navbar #navMobileNotifSlot .nav-circle-btn:focus,
  :root:not([data-bs-theme="dark"]) #layout-navbar #navMobileNotifSlot .nav-circle-btn:active,
  :root:not([data-bs-theme="dark"]) #layout-navbar #navMobileMenuSlot .nav-circle-btn:hover,
  :root:not([data-bs-theme="dark"]) #layout-navbar #navMobileMenuSlot .nav-circle-btn:focus,
  :root:not([data-bs-theme="dark"]) #layout-navbar #navMobileMenuSlot .nav-circle-btn:active,
  [data-bs-theme="light"] #layout-navbar .nav-back-btn:hover,
  [data-bs-theme="light"] #layout-navbar .nav-back-btn:focus,
  [data-bs-theme="light"] #layout-navbar .nav-back-btn:focus-visible,
  [data-bs-theme="light"] #layout-navbar .nav-back-btn:active,
  [data-bs-theme="light"] #layout-navbar .nav-circle-btn:hover,
  [data-bs-theme="light"] #layout-navbar .nav-circle-btn:focus,
  [data-bs-theme="light"] #layout-navbar .nav-circle-btn:focus-visible,
  [data-bs-theme="light"] #layout-navbar .nav-circle-btn:active,
  [data-bs-theme="light"] #layout-navbar #navMobileBackBtn:hover,
  [data-bs-theme="light"] #layout-navbar #navMobileBackBtn:focus,
  [data-bs-theme="light"] #layout-navbar #navMobileBackBtn:focus-visible,
  [data-bs-theme="light"] #layout-navbar #navMobileBackBtn:active,
  [data-bs-theme="light"] #layout-navbar #navMobileLeftSlot .nav-circle-btn:hover,
  [data-bs-theme="light"] #layout-navbar #navMobileLeftSlot .nav-circle-btn:focus,
  [data-bs-theme="light"] #layout-navbar #navMobileLeftSlot .nav-circle-btn:active,
  [data-bs-theme="light"] #layout-navbar #navMobileSearchSlot .nav-circle-btn:hover,
  [data-bs-theme="light"] #layout-navbar #navMobileSearchSlot .nav-circle-btn:focus,
  [data-bs-theme="light"] #layout-navbar #navMobileSearchSlot .nav-circle-btn:active,
  [data-bs-theme="light"] #layout-navbar #navMobileNotifSlot .nav-circle-btn:hover,
  [data-bs-theme="light"] #layout-navbar #navMobileNotifSlot .nav-circle-btn:focus,
  [data-bs-theme="light"] #layout-navbar #navMobileNotifSlot .nav-circle-btn:active,
  [data-bs-theme="light"] #layout-navbar #navMobileMenuSlot .nav-circle-btn:hover,
  [data-bs-theme="light"] #layout-navbar #navMobileMenuSlot .nav-circle-btn:focus,
  [data-bs-theme="light"] #layout-navbar #navMobileMenuSlot .nav-circle-btn:active,
  html:not([data-bs-theme="dark"]) #layout-navbar .nav-back-btn:hover,
  html:not([data-bs-theme="dark"]) #layout-navbar .nav-back-btn:focus,
  html:not([data-bs-theme="dark"]) #layout-navbar .nav-back-btn:focus-visible,
  html:not([data-bs-theme="dark"]) #layout-navbar .nav-back-btn:active,
  html:not([data-bs-theme="dark"]) #layout-navbar .nav-circle-btn:hover,
  html:not([data-bs-theme="dark"]) #layout-navbar .nav-circle-btn:focus,
  html:not([data-bs-theme="dark"]) #layout-navbar .nav-circle-btn:focus-visible,
  html:not([data-bs-theme="dark"]) #layout-navbar .nav-circle-btn:active,
  html:not([data-bs-theme="dark"]) #layout-navbar #navMobileBackBtn:hover,
  html:not([data-bs-theme="dark"]) #layout-navbar #navMobileBackBtn:focus,
  html:not([data-bs-theme="dark"]) #layout-navbar #navMobileBackBtn:focus-visible,
  html:not([data-bs-theme="dark"]) #layout-navbar #navMobileBackBtn:active,
  html:not([data-bs-theme="dark"]) #layout-navbar #navMobileLeftSlot .nav-circle-btn:hover,
  html:not([data-bs-theme="dark"]) #layout-navbar #navMobileLeftSlot .nav-circle-btn:focus,
  html:not([data-bs-theme="dark"]) #layout-navbar #navMobileLeftSlot .nav-circle-btn:active,
  html:not([data-bs-theme="dark"]) #layout-navbar #navMobileSearchSlot .nav-circle-btn:hover,
  html:not([data-bs-theme="dark"]) #layout-navbar #navMobileSearchSlot .nav-circle-btn:focus,
  html:not([data-bs-theme="dark"]) #layout-navbar #navMobileSearchSlot .nav-circle-btn:active,
  html:not([data-bs-theme="dark"]) #layout-navbar #navMobileNotifSlot .nav-circle-btn:hover,
  html:not([data-bs-theme="dark"]) #layout-navbar #navMobileNotifSlot .nav-circle-btn:focus,
  html:not([data-bs-theme="dark"]) #layout-navbar #navMobileNotifSlot .nav-circle-btn:active,
  html:not([data-bs-theme="dark"]) #layout-navbar #navMobileMenuSlot .nav-circle-btn:hover,
  html:not([data-bs-theme="dark"]) #layout-navbar #navMobileMenuSlot .nav-circle-btn:focus,
  html:not([data-bs-theme="dark"]) #layout-navbar #navMobileMenuSlot .nav-circle-btn:active {
    background: var(--bs-btn-circle-hover-bg, #e2e2e2) !important;
    background-color: var(--bs-btn-circle-hover-bg, #e2e2e2) !important;
    border: none !important;
    border-color: transparent !important;
    color: var(--bs-btn-circle-color, #2c2c2c) !important;
    box-shadow: none !important;
    outline: none !important;
  }

  /* --- 3. DARK THEME: BASE STATE (Soft Tinted Chip - Only for Circular Action Buttons) --- */
  [data-bs-theme="dark"] #layout-navbar .nav-back-btn,
  [data-bs-theme="dark"] #layout-navbar .nav-circle-btn,
  [data-bs-theme="dark"] #layout-navbar #navMobileLeftSlot .nav-circle-btn,
  [data-bs-theme="dark"] #layout-navbar #navMobileSearchSlot .nav-circle-btn,
  [data-bs-theme="dark"] #layout-navbar #navMobileNotifSlot .nav-circle-btn,
  [data-bs-theme="dark"] #layout-navbar #navMobileMenuSlot .nav-circle-btn,
  [data-bs-theme="dark"] #layout-navbar #navMobileBackBtn,
  html[data-bs-theme="dark"] #layout-navbar .nav-back-btn,
  html[data-bs-theme="dark"] #layout-navbar .nav-circle-btn,
  html[data-bs-theme="dark"] #layout-navbar #navMobileLeftSlot .nav-circle-btn,
  html[data-bs-theme="dark"] #layout-navbar #navMobileSearchSlot .nav-circle-btn,
  html[data-bs-theme="dark"] #layout-navbar #navMobileNotifSlot .nav-circle-btn,
  html[data-bs-theme="dark"] #layout-navbar #navMobileMenuSlot .nav-circle-btn,
  html[data-bs-theme="dark"] #layout-navbar #navMobileBackBtn {
    background: rgba(255, 255, 255, 0.08) !important;
    background-color: rgba(255, 255, 255, 0.08) !important;
    border: none !important;
    border-color: transparent !important;
    color: #ffffff !important;
    box-shadow: none !important;
    outline: none !important;
  }

  /* --- 4. DARK THEME: HOVER / FOCUS / CLICK --- */
  [data-bs-theme="dark"] #layout-navbar .nav-back-btn:hover,
  [data-bs-theme="dark"] #layout-navbar .nav-back-btn:focus,
  [data-bs-theme="dark"] #layout-navbar .nav-back-btn:focus-visible,
  [data-bs-theme="dark"] #layout-navbar .nav-back-btn:active,
  [data-bs-theme="dark"] #layout-navbar .nav-circle-btn:hover,
  [data-bs-theme="dark"] #layout-navbar .nav-circle-btn:focus,
  [data-bs-theme="dark"] #layout-navbar .nav-circle-btn:focus-visible,
  [data-bs-theme="dark"] #layout-navbar .nav-circle-btn:active,
  [data-bs-theme="dark"] #layout-navbar #navMobileBackBtn:hover,
  [data-bs-theme="dark"] #layout-navbar #navMobileBackBtn:focus,
  [data-bs-theme="dark"] #layout-navbar #navMobileBackBtn:focus-visible,
  [data-bs-theme="dark"] #layout-navbar #navMobileBackBtn:active,
  [data-bs-theme="dark"] #layout-navbar #navMobileLeftSlot .nav-circle-btn:hover,
  [data-bs-theme="dark"] #layout-navbar #navMobileLeftSlot .nav-circle-btn:focus,
  [data-bs-theme="dark"] #layout-navbar #navMobileLeftSlot .nav-circle-btn:active,
  [data-bs-theme="dark"] #layout-navbar #navMobileSearchSlot .nav-circle-btn:hover,
  [data-bs-theme="dark"] #layout-navbar #navMobileSearchSlot .nav-circle-btn:focus,
  [data-bs-theme="dark"] #layout-navbar #navMobileSearchSlot .nav-circle-btn:active,
  [data-bs-theme="dark"] #layout-navbar #navMobileNotifSlot .nav-circle-btn:hover,
  [data-bs-theme="dark"] #layout-navbar #navMobileNotifSlot .nav-circle-btn:focus,
  [data-bs-theme="dark"] #layout-navbar #navMobileNotifSlot .nav-circle-btn:active,
  [data-bs-theme="dark"] #layout-navbar #navMobileMenuSlot .nav-circle-btn:hover,
  [data-bs-theme="dark"] #layout-navbar #navMobileMenuSlot .nav-circle-btn:focus,
  [data-bs-theme="dark"] #layout-navbar #navMobileMenuSlot .nav-circle-btn:active,
  html[data-bs-theme="dark"] #layout-navbar .nav-back-btn:hover,
  html[data-bs-theme="dark"] #layout-navbar .nav-back-btn:focus,
  html[data-bs-theme="dark"] #layout-navbar .nav-back-btn:focus-visible,
  html[data-bs-theme="dark"] #layout-navbar .nav-back-btn:active,
  html[data-bs-theme="dark"] #layout-navbar .nav-circle-btn:hover,
  html[data-bs-theme="dark"] #layout-navbar .nav-circle-btn:focus,
  html[data-bs-theme="dark"] #layout-navbar .nav-circle-btn:focus-visible,
  html[data-bs-theme="dark"] #layout-navbar .nav-circle-btn:active,
  html[data-bs-theme="dark"] #layout-navbar #navMobileBackBtn:hover,
  html[data-bs-theme="dark"] #layout-navbar #navMobileBackBtn:focus,
  html[data-bs-theme="dark"] #layout-navbar #navMobileBackBtn:focus-visible,
  html[data-bs-theme="dark"] #layout-navbar #navMobileBackBtn:active,
  html[data-bs-theme="dark"] #layout-navbar #navMobileLeftSlot .nav-circle-btn:hover,
  html[data-bs-theme="dark"] #layout-navbar #navMobileLeftSlot .nav-circle-btn:focus,
  html[data-bs-theme="dark"] #layout-navbar #navMobileLeftSlot .nav-circle-btn:active,
  html[data-bs-theme="dark"] #layout-navbar #navMobileSearchSlot .nav-circle-btn:hover,
  html[data-bs-theme="dark"] #layout-navbar #navMobileSearchSlot .nav-circle-btn:focus,
  html[data-bs-theme="dark"] #layout-navbar #navMobileSearchSlot .nav-circle-btn:active,
  html[data-bs-theme="dark"] #layout-navbar #navMobileNotifSlot .nav-circle-btn:hover,
  html[data-bs-theme="dark"] #layout-navbar #navMobileNotifSlot .nav-circle-btn:focus,
  html[data-bs-theme="dark"] #layout-navbar #navMobileNotifSlot .nav-circle-btn:active,
  html[data-bs-theme="dark"] #layout-navbar #navMobileMenuSlot .nav-circle-btn:hover,
  html[data-bs-theme="dark"] #layout-navbar #navMobileMenuSlot .nav-circle-btn:focus,
  html[data-bs-theme="dark"] #layout-navbar #navMobileMenuSlot .nav-circle-btn:active {
    background: rgba(255, 255, 255, 0.16) !important;
    border: none !important;
    border-color: transparent !important;
    color: #ffffff !important;
    box-shadow: none !important;
    outline: none !important;
  }

  /* --- ACTIVE STATE (Click / Tap Feedback) --- */
  #layout-navbar .nav-back-btn:active,
  #layout-navbar .nav-circle-btn:active,
  #layout-navbar #navMobileLeftSlot .nav-circle-btn:active,
  #layout-navbar #navMobileSearchSlot .nav-circle-btn:active,
  #layout-navbar #navMobileNotifSlot .nav-circle-btn:active,
  #layout-navbar #navMobileMenuSlot .nav-circle-btn:active,
  #layout-navbar #navMobileBackBtn:active {
    transform: scale(0.96) !important;
    transition-duration: 0.08s !important;
  }
}

/* =========================================================================
   Navbar Avatar & Dropdown User Cursor & Interaction Rules
   ========================================================================= */
.layout-navbar #profile-menu,
.layout-navbar .dropdown-user > a,
.layout-navbar #profile-menu .avatar-user,
.layout-navbar .dropdown-user > a .avatar-user,
.layout-navbar .nav-avatar-btn,
.layout-navbar .navbar-brand-mobile .nav-circle-btn {
  cursor: pointer !important;
  transform-origin: center center;
  transition: transform 0.15s cubic-bezier(0.2, 0.8, 0.2, 1) !important;
  will-change: transform;
}

.layout-navbar #profile-menu *,
.layout-navbar .dropdown-user > a *,
.layout-navbar #profile-menu .avatar-user *,
.layout-navbar .dropdown-user > a .avatar-user * {
  cursor: pointer !important;
}

.layout-navbar .dropdown-menu .account-switch-header-static,
.layout-navbar .dropdown-menu .account-switch-header-static *,
.layout-navbar .dropdown-menu .account-switch-header-static .avatar,
.layout-navbar .dropdown-menu .account-switch-header-static .avatar * {
  cursor: default !important;
  pointer-events: auto !important;
}

.layout-navbar #profile-menu:hover:not(:active),
.layout-navbar .dropdown-user > a:hover:not(:active),
.layout-navbar .nav-avatar-btn:hover:not(:active),
.layout-navbar .navbar-brand-mobile .nav-circle-btn:hover:not(:active) {
  opacity: 1 !important;
  filter: none !important;
}

.layout-navbar #profile-menu:active,
.layout-navbar #profile-menu:hover:active,
.layout-navbar .dropdown-user > a:active,
.layout-navbar .dropdown-user > a:hover:active,
.layout-navbar .nav-avatar-btn:active,
.layout-navbar .nav-avatar-btn:hover:active,
.layout-navbar .navbar-brand-mobile .nav-circle-btn:active,
.layout-navbar .navbar-brand-mobile .nav-circle-btn:hover:active {
  transform: scale(0.95) translateZ(0) !important;
  transition-duration: 0.08s !important;
}

/* Eliminate top separator line above notification button & give consistent padding */
.dropdown-notifications .dropdown-menu li:has(button[onclick="openAllNotificationsModal()"]),
.dropdown-notifications .dropdown-menu .border-top,
.dropdown-notifications .dropdown-menu .dropdown-notifications-footer {
  border-top: none !important;
  border-bottom: none !important;
  padding: 0.75rem 1rem 1rem 1rem !important;
}

/* Ensure Profile Dropdown Menu is compact, sleek, and does not stretch based on name length */
.layout-navbar .navbar-dropdown.dropdown-user .dropdown-menu,
.layout-navbar .dropdown-user .dropdown-menu {
  width: 215px !important;
  min-width: 215px !important;
  max-width: 220px !important;
}

/* ==========================================================================
   Desktop & Tablet (>= 768px): Unified & Consistent Navbar Action Icons Spacing
   Ensures Globe, Theme, Bell, and Avatar have identical, compact, comfortable spacing
   across both Desktop and Tablet (eliminates tablet squished icons and prevents wide gaps)
   ========================================================================== */
@media (min-width: 768px) {
  #layout-navbar .navbar-nav-right .navbar-nav {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 0.25rem !important;
  }

  #layout-navbar .navbar-nav-right .navbar-nav > .nav-item {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 !important;
  }

  #layout-navbar .navbar-nav-right .navbar-nav > .nav-item > .nav-link {
    padding: 0.25rem 0.25rem !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 32px !important;
    min-height: 32px !important;
    border-radius: 0.375rem !important;
    transform-origin: center center;
    transition: transform 0.15s cubic-bezier(0.2, 0.8, 0.2, 1), background-color 0.15s ease !important;
    will-change: transform;
  }

  #layout-navbar .navbar-nav-right .navbar-nav > .nav-item:not(.dropdown-user) > .nav-link:active,
  #layout-navbar .navbar-nav-right .navbar-nav > .nav-item:not(.dropdown-user) > .nav-link:hover:active {
    transform: scale(0.92) translateZ(0) !important;
    transition: transform 0.08s ease !important;
  }

  #layout-navbar .navbar-nav-right .navbar-nav > .nav-item.dropdown-user {
    margin-left: 0.45rem !important;
  }

  #layout-navbar .navbar-nav-right .navbar-nav > .nav-item.dropdown-user > .nav-link {
    padding: 0 !important;
    min-width: unset !important;
    min-height: unset !important;
  }
}

/* =========================================================================
   Navbar Action Icons: Strictly NO Color Change on Hover / Focus / Active
   Theme Toggle, Language Switcher, Notifications, Search, etc.
   Ensures icon color stays 100% constant in both Light Mode and Dark Mode.
   ========================================================================= */

/* 1. Base / Light Mode: Fixed Neutral Dark Slate (#3a3a3a) */
#layout-navbar .navbar-nav-right .nav-item:not(.dropdown-user) .nav-link,
#layout-navbar .navbar-nav-right .nav-item:not(.dropdown-user) .nav-link i,
#layout-navbar .navbar-nav-right .nav-item:not(.dropdown-user) .nav-link .material-symbols-outlined,
#layout-navbar .navbar-nav-right .nav-item:not(.dropdown-user) .nav-link .icon-base,
#layout-navbar .navbar-nav .nav-item:not(.dropdown-user) .nav-link,
#layout-navbar .navbar-nav .nav-item:not(.dropdown-user) .nav-link i,
#layout-navbar .navbar-nav .nav-item:not(.dropdown-user) .nav-link .material-symbols-outlined,
#layout-navbar .navbar-nav .nav-item:not(.dropdown-user) .nav-link .icon-base,
#layout-navbar #nav-theme,
#layout-navbar #nav-theme i,
#layout-navbar .dropdown-language .nav-link,
#layout-navbar .dropdown-language .nav-link i,
#layout-navbar .dropdown-notifications .nav-link,
#layout-navbar .dropdown-notifications .nav-link i,
#layout-navbar .search-toggler,
#layout-navbar .search-toggler i,
:root:not([data-bs-theme="dark"]) #layout-navbar .navbar-nav-right .nav-item:not(.dropdown-user) .nav-link,
:root:not([data-bs-theme="dark"]) #layout-navbar .navbar-nav-right .nav-item:not(.dropdown-user) .nav-link i,
[data-bs-theme="light"] #layout-navbar .navbar-nav-right .nav-item:not(.dropdown-user) .nav-link,
[data-bs-theme="light"] #layout-navbar .navbar-nav-right .nav-item:not(.dropdown-user) .nav-link i {
  color: var(--bs-nav-link-color, #3a3a3a) !important;
}

/* Light Mode Hover / Focus / Active: STRICTLY NO COLOR CHANGE */
:root:not([data-bs-theme="dark"]) #layout-navbar .navbar-nav-right .nav-item:not(.dropdown-user) .nav-link:hover,
:root:not([data-bs-theme="dark"]) #layout-navbar .navbar-nav-right .nav-item:not(.dropdown-user) .nav-link:focus,
:root:not([data-bs-theme="dark"]) #layout-navbar .navbar-nav-right .nav-item:not(.dropdown-user) .nav-link:focus-visible,
:root:not([data-bs-theme="dark"]) #layout-navbar .navbar-nav-right .nav-item:not(.dropdown-user) .nav-link:active,
:root:not([data-bs-theme="dark"]) #layout-navbar .navbar-nav-right .nav-item:not(.dropdown-user) .nav-link.show,
:root:not([data-bs-theme="dark"]) #layout-navbar .navbar-nav-right .nav-item:not(.dropdown-user) .nav-link:hover *,
:root:not([data-bs-theme="dark"]) #layout-navbar .navbar-nav-right .nav-item:not(.dropdown-user) .nav-link:focus *,
:root:not([data-bs-theme="dark"]) #layout-navbar .navbar-nav-right .nav-item:not(.dropdown-user) .nav-link:active *,
:root:not([data-bs-theme="dark"]) #layout-navbar .navbar-nav-right .nav-item:not(.dropdown-user) .nav-link.show *,
[data-bs-theme="light"] #layout-navbar .navbar-nav-right .nav-item:not(.dropdown-user) .nav-link:hover,
[data-bs-theme="light"] #layout-navbar .navbar-nav-right .nav-item:not(.dropdown-user) .nav-link:focus,
[data-bs-theme="light"] #layout-navbar .navbar-nav-right .nav-item:not(.dropdown-user) .nav-link:focus-visible,
[data-bs-theme="light"] #layout-navbar .navbar-nav-right .nav-item:not(.dropdown-user) .nav-link:active,
[data-bs-theme="light"] #layout-navbar .navbar-nav-right .nav-item:not(.dropdown-user) .nav-link.show,
[data-bs-theme="light"] #layout-navbar .navbar-nav-right .nav-item:not(.dropdown-user) .nav-link:hover *,
[data-bs-theme="light"] #layout-navbar .navbar-nav-right .nav-item:not(.dropdown-user) .nav-link:focus *,
[data-bs-theme="light"] #layout-navbar .navbar-nav-right .nav-item:not(.dropdown-user) .nav-link:active *,
[data-bs-theme="light"] #layout-navbar .navbar-nav-right .nav-item:not(.dropdown-user) .nav-link.show *,
html:not([data-bs-theme="dark"]) #layout-navbar .navbar-nav-right .nav-item:not(.dropdown-user) .nav-link:hover,
html:not([data-bs-theme="dark"]) #layout-navbar .navbar-nav-right .nav-item:not(.dropdown-user) .nav-link:hover * {
  color: var(--bs-nav-link-color, #3a3a3a) !important;
}

/* 2. Dark Mode: Fixed Muted Silver (#cecece) */
[data-bs-theme="dark"] #layout-navbar .navbar-nav-right .nav-item:not(.dropdown-user) .nav-link,
[data-bs-theme="dark"] #layout-navbar .navbar-nav-right .nav-item:not(.dropdown-user) .nav-link i,
[data-bs-theme="dark"] #layout-navbar .navbar-nav-right .nav-item:not(.dropdown-user) .nav-link .material-symbols-outlined,
[data-bs-theme="dark"] #layout-navbar .navbar-nav-right .nav-item:not(.dropdown-user) .nav-link .icon-base,
[data-bs-theme="dark"] #layout-navbar .navbar-nav .nav-item:not(.dropdown-user) .nav-link,
[data-bs-theme="dark"] #layout-navbar .navbar-nav .nav-item:not(.dropdown-user) .nav-link i,
[data-bs-theme="dark"] #layout-navbar .navbar-nav .nav-item:not(.dropdown-user) .nav-link .material-symbols-outlined,
[data-bs-theme="dark"] #layout-navbar .navbar-nav .nav-item:not(.dropdown-user) .nav-link .icon-base,
[data-bs-theme="dark"] #layout-navbar #nav-theme,
[data-bs-theme="dark"] #layout-navbar #nav-theme i,
[data-bs-theme="dark"] #layout-navbar .dropdown-language .nav-link,
[data-bs-theme="dark"] #layout-navbar .dropdown-language .nav-link i,
[data-bs-theme="dark"] #layout-navbar .dropdown-notifications .nav-link,
[data-bs-theme="dark"] #layout-navbar .dropdown-notifications .nav-link i,
[data-bs-theme="dark"] #layout-navbar .search-toggler,
[data-bs-theme="dark"] #layout-navbar .search-toggler i,
html[data-bs-theme="dark"] #layout-navbar .navbar-nav-right .nav-item:not(.dropdown-user) .nav-link,
html[data-bs-theme="dark"] #layout-navbar .navbar-nav-right .nav-item:not(.dropdown-user) .nav-link * {
  color: var(--bs-nav-link-color, #cecece) !important;
}

/* Dark Mode Hover / Focus / Active: STRICTLY NO COLOR CHANGE */
[data-bs-theme="dark"] #layout-navbar .navbar-nav-right .nav-item:not(.dropdown-user) .nav-link:hover,
[data-bs-theme="dark"] #layout-navbar .navbar-nav-right .nav-item:not(.dropdown-user) .nav-link:focus,
[data-bs-theme="dark"] #layout-navbar .navbar-nav-right .nav-item:not(.dropdown-user) .nav-link:focus-visible,
[data-bs-theme="dark"] #layout-navbar .navbar-nav-right .nav-item:not(.dropdown-user) .nav-link:active,
[data-bs-theme="dark"] #layout-navbar .navbar-nav-right .nav-item:not(.dropdown-user) .nav-link.show,
[data-bs-theme="dark"] #layout-navbar .navbar-nav-right .nav-item:not(.dropdown-user) .nav-link:hover *,
[data-bs-theme="dark"] #layout-navbar .navbar-nav-right .nav-item:not(.dropdown-user) .nav-link:focus *,
[data-bs-theme="dark"] #layout-navbar .navbar-nav-right .nav-item:not(.dropdown-user) .nav-link:active *,
[data-bs-theme="dark"] #layout-navbar .navbar-nav-right .nav-item:not(.dropdown-user) .nav-link.show *,
html[data-bs-theme="dark"] #layout-navbar .navbar-nav-right .nav-item:not(.dropdown-user) .nav-link:hover,
html[data-bs-theme="dark"] #layout-navbar .navbar-nav-right .nav-item:not(.dropdown-user) .nav-link:hover * {
  color: var(--bs-nav-link-color, #cecece) !important;
}

/* Ensure avatar initials in navbar and all user dropdowns strictly retain their label/theme colors */
.avatar .avatar-initial.bg-label-primary,
.avatar-initial.bg-label-primary,
#layout-navbar .avatar .avatar-initial.bg-label-primary,
#layout-navbar #profile-menu .avatar-initial.bg-label-primary,
.layout-navbar .avatar .avatar-initial.bg-label-primary,
.layout-navbar #profile-menu .avatar-initial.bg-label-primary {
  color: var(--bs-primary) !important;
}

.avatar .avatar-initial.bg-label-success,
.avatar-initial.bg-label-success,
#layout-navbar .avatar .avatar-initial.bg-label-success,
#layout-navbar #profile-menu .avatar-initial.bg-label-success {
  color: var(--bs-success) !important;
}

.avatar .avatar-initial.bg-label-info,
.avatar-initial.bg-label-info,
#layout-navbar .avatar .avatar-initial.bg-label-info,
#layout-navbar #profile-menu .avatar-initial.bg-label-info {
  color: var(--bs-info) !important;
}

.avatar .avatar-initial.bg-label-warning,
.avatar-initial.bg-label-warning,
#layout-navbar .avatar .avatar-initial.bg-label-warning,
#layout-navbar #profile-menu .avatar-initial.bg-label-warning {
  color: var(--bs-warning) !important;
}

.avatar .avatar-initial.bg-label-danger,
.avatar-initial.bg-label-danger,
#layout-navbar .avatar .avatar-initial.bg-label-danger,
#layout-navbar #profile-menu .avatar-initial.bg-label-danger {
  color: var(--bs-danger) !important;
}

.avatar .avatar-initial.bg-label-secondary,
.avatar-initial.bg-label-secondary,
#layout-navbar .avatar .avatar-initial.bg-label-secondary,
#layout-navbar #profile-menu .avatar-initial.bg-label-secondary {
  color: var(--bs-secondary) !important;
}

/* =========================================================================
   Navbar User Dropdown: Consistent Soft-Red Hover for Logout / Signout
   Identical to .account-switch-signout:hover
   ========================================================================= */
.dropdown-menu .dropdown-item.text-danger,
.dropdown-menu a[href*="logout"],
.dropdown-menu .account-switch-signout {
  transition: background-color 0.15s ease, color 0.15s ease !important;
}

.dropdown-menu .dropdown-item.text-danger:hover,
.dropdown-menu .dropdown-item.text-danger:focus,
.dropdown-menu a[href*="logout"]:hover,
.dropdown-menu a[href*="logout"]:focus,
.dropdown-menu .account-switch-signout:hover,
.dropdown-menu .account-switch-signout:focus {
  color: var(--bs-danger, #ff3e1d) !important;
  background-color: rgba(255, 62, 29, 0.14) !important;
  border-radius: var(--bs-dropdown-item-border-radius, 0.75rem) !important;
}

.dropdown-menu .dropdown-item.text-danger:hover i,
.dropdown-menu .dropdown-item.text-danger:focus i,
.dropdown-menu a[href*="logout"]:hover i,
.dropdown-menu a[href*="logout"]:focus i,
.dropdown-menu .account-switch-signout:hover i,
.dropdown-menu .account-switch-signout:focus i {
  color: var(--bs-danger, #ff3e1d) !important;
}

[data-bs-theme="dark"] .dropdown-menu .dropdown-item.text-danger:hover,
[data-bs-theme="dark"] .dropdown-menu .dropdown-item.text-danger:focus,
[data-bs-theme="dark"] .dropdown-menu a[href*="logout"]:hover,
[data-bs-theme="dark"] .dropdown-menu a[href*="logout"]:focus,
[data-bs-theme="dark"] .dropdown-menu .account-switch-signout:hover,
[data-bs-theme="dark"] .dropdown-menu .account-switch-signout:focus {
  color: #ff5b40 !important;
  background-color: rgba(255, 62, 29, 0.18) !important;
}

[data-bs-theme="dark"] .dropdown-menu .dropdown-item.text-danger:hover i,
[data-bs-theme="dark"] .dropdown-menu .dropdown-item.text-danger:focus i,
[data-bs-theme="dark"] .dropdown-menu a[href*="logout"]:hover i,
[data-bs-theme="dark"] .dropdown-menu a[href*="logout"]:focus i,
[data-bs-theme="dark"] .dropdown-menu .account-switch-signout:hover i,
[data-bs-theme="dark"] .dropdown-menu .account-switch-signout:focus i {
  color: #ff5b40 !important;
}

/* =========================================================================
   Navbar Dropdowns Gap Standardization (Profile, Notif, Theme, Language)
   =========================================================================
   Root cause: inset-block-start: 100% is computed from each nav-item li height.
   Different icons/avatars have different li heights → different gap from navbar bottom.
   Fix: Stretch ALL nav-item li to full navbar height so top:100% from any li
   resolves to the same point (navbar bottom) for consistent visual gap.
   ========================================================================= */

/* 1. Stretch ALL nav-items to full navbar height → ensures top:100% = navbar bottom for all */
@media (min-width: 768px) {
  #layout-navbar .navbar-nav-right .navbar-nav > .nav-item {
    align-self: stretch !important;
    display: inline-flex !important;
    align-items: center !important;
    position: relative !important;
  }
}

/* 2. Fix core.css 144% for ALL navbar dropdowns (including static) → reset to 100% (= navbar bottom via stretched li) */
.layout-wrapper:not(.layout-horizontal) .layout-navbar .dropdown-menu[data-bs-popper],
.layout-navbar .dropdown-menu[data-bs-popper],
.layout-navbar .dropdown-menu {
  inset-block-start: 100% !important;
  top: 100% !important;
  z-index: 1085 !important;
}

/* 3. Universal gap for ALL navbar dropdowns (Popper + static + Tom Select) — 1.25rem clears navbar container cleanly without colliding */
.layout-navbar .dropdown-menu,
.layout-navbar .dropdown-menu.show,
.layout-navbar .ts-dropdown {
  margin-top: 1.25rem !important;
}

.layout-navbar .dropdown-menu.show {
  display: block !important;
  z-index: 1085 !important;
}

/* =========================================================================
   Navbar Notification Popover: Unread (Primary) vs Read (Secondary) Styling
   ========================================================================= */

/* Unread Notifications: Circle has bg-label-primary & Icon is primary */
.dropdown-notifications-item:not(.marked-as-read) .avatar-initial,
#navbarNotifItemsList .dropdown-notifications-item:not(.marked-as-read) .avatar-initial,
#modalAllNotifsList .list-group-item:not(.marked-as-read) .avatar-initial,
#modalUnreadNotifsList .list-group-item .avatar-initial {
  background-color: rgba(var(--bs-primary-rgb), 0.14) !important;
  color: var(--bs-primary) !important;
}

.dropdown-notifications-item:not(.marked-as-read) .avatar-initial .material-symbols-outlined,
.dropdown-notifications-item:not(.marked-as-read) .avatar-initial i,
#navbarNotifItemsList .dropdown-notifications-item:not(.marked-as-read) .avatar-initial .material-symbols-outlined,
#navbarNotifItemsList .dropdown-notifications-item:not(.marked-as-read) .avatar-initial i,
#modalAllNotifsList .list-group-item:not(.marked-as-read) .avatar-initial .material-symbols-outlined,
#modalAllNotifsList .list-group-item:not(.marked-as-read) .avatar-initial i,
#modalUnreadNotifsList .list-group-item .avatar-initial .material-symbols-outlined,
#modalUnreadNotifsList .list-group-item .avatar-initial i {
  color: var(--bs-primary) !important;
}

/* Read Notifications: Circle has bg-label-secondary & Icon is secondary */
.dropdown-notifications-item.marked-as-read .avatar-initial,
#navbarNotifItemsList .dropdown-notifications-item.marked-as-read .avatar-initial,
#modalAllNotifsList .list-group-item.marked-as-read .avatar-initial {
  background-color: rgba(var(--bs-secondary-rgb, 133, 146, 163), 0.12) !important;
  color: var(--bs-secondary, #8592a3) !important;
}

.dropdown-notifications-item.marked-as-read .avatar-initial .material-symbols-outlined,
.dropdown-notifications-item.marked-as-read .avatar-initial i,
#navbarNotifItemsList .dropdown-notifications-item.marked-as-read .avatar-initial .material-symbols-outlined,
#navbarNotifItemsList .dropdown-notifications-item.marked-as-read .avatar-initial i,
#modalAllNotifsList .list-group-item.marked-as-read .avatar-initial .material-symbols-outlined,
#modalAllNotifsList .list-group-item.marked-as-read .avatar-initial i {
  color: var(--bs-secondary, #8592a3) !important;
}