/* =================================================================
   NAVBAR HOVER FIX - FINAL
   Loaded LAST to override all other CSS (Tabler, TabBlazor,
   DevExpress, Bootstrap Icons, etc.)

   ROOT CAUSE: Tabler resolves hover color through this chain:
     --tblr-navbar-hover-color: rgba(var(--tblr-emphasis-color-rgb), 0.8)
   In light/default theme, --tblr-emphasis-color-rgb = 24,36,51 (dark navy).
   Result: dark navy text on dark navy sidebar = invisible.
   Fix: Reset all the relevant variables on .navbar-vertical to white,
   then hard-override every selector for belt-and-suspenders.
   ================================================================= */

/* ----------------------------------------------------------------
   1. ROOT CAUSE FIX — Reset Tabler's CSS variable chain on the
      vertical navbar so ALL derived hover colors resolve to white.
   ---------------------------------------------------------------- */
.navbar-vertical {
    --tblr-emphasis-color-rgb: 255, 255, 255 !important;
    --tblr-navbar-color: rgba(255, 255, 255, 0.7) !important;
    --tblr-navbar-hover-color: rgba(255, 255, 255, 0.95) !important;
    --tblr-nav-link-color: rgba(255, 255, 255, 0.7) !important;
    --tblr-nav-link-hover-color: rgba(255, 255, 255, 0.95) !important;
    --tblr-link-color: rgba(255, 255, 255, 0.7) !important;
    --tblr-link-color-rgb: 255, 255, 255 !important;
    --tblr-link-hover-color: rgba(255, 255, 255, 0.95) !important;
    --tblr-link-hover-color-rgb: 255, 255, 255 !important;
}

    /* ----------------------------------------------------------------
   2. BELT AND SUSPENDERS — Hard overrides on every hover selector
      in case any rule bypasses the variable chain.
   ---------------------------------------------------------------- */
    .navbar-vertical .nav-link:hover,
    .navbar-vertical .nav-link:focus,
    .navbar-vertical .navbar-nav .nav-link:hover,
    .navbar-vertical .navbar-nav .nav-link:focus {
        color: rgba(255, 255, 255, 0.95) !important;
        background-color: rgba(0, 0, 0, 0.15) !important;
        text-decoration: none !important;
    }

        /* ----------------------------------------------------------------
   3. CHILD ELEMENTS — icon and title spans inside the nav-link
   ---------------------------------------------------------------- */
        .navbar-vertical .nav-link:hover *,
        .navbar-vertical .nav-link:focus * {
            color: rgba(255, 255, 255, 0.95) !important;
            fill: rgba(255, 255, 255, 0.95) !important;
        }

        .navbar-vertical .nav-link:hover .nav-link-title,
        .navbar-vertical .nav-link:focus .nav-link-title,
        .navbar-vertical .nav-link:hover .nav-link-icon,
        .navbar-vertical .nav-link:focus .nav-link-icon {
            color: rgba(255, 255, 255, 0.95) !important;
            opacity: 1 !important;
            visibility: visible !important;
        }

            .navbar-vertical .nav-link:hover .nav-link-icon svg,
            .navbar-vertical .nav-link:focus .nav-link-icon svg {
                stroke: rgba(255, 255, 255, 0.95) !important;
            }

    /* ----------------------------------------------------------------
   4. DROPDOWN ITEMS
   ---------------------------------------------------------------- */
    .navbar-vertical .dropdown-item:hover,
    .navbar-vertical .dropdown-item:focus,
    .navbar-vertical .dropdown-menu .dropdown-item:hover,
    .navbar-vertical .dropdown-menu .dropdown-item:focus {
        color: rgba(255, 255, 255, 0.95) !important;
        background-color: rgba(0, 0, 0, 0.15) !important;
        text-decoration: none !important;
    }

        .navbar-vertical .dropdown-item:hover *,
        .navbar-vertical .dropdown-item:focus * {
            color: rgba(255, 255, 255, 0.95) !important;
        }

    /* ----------------------------------------------------------------
   5. ACTIVE ITEM — keep it visible on hover too
   ---------------------------------------------------------------- */
    .navbar-vertical .nav-link.active,
    .navbar-vertical .nav-link.active:hover,
    .navbar-vertical .nav-link.active:focus {
        color: #ffffff !important;
    }

        .navbar-vertical .nav-link.active *,
        .navbar-vertical .nav-link.active:hover *,
        .navbar-vertical .nav-link.active:focus * {
            color: #ffffff !important;
        }

    /* ----------------------------------------------------------------
   6. GLOBAL LINK HOVER — kill any stray a:hover rules that
      Tabler or Bootstrap might apply inside the navbar.
   ---------------------------------------------------------------- */
    .navbar-vertical a:hover,
    .navbar-vertical a:focus {
        color: rgba(255, 255, 255, 0.95) !important;
        text-decoration: none !important;
    }