/* stick the user block to the bottom of the sidebar */
#sidebar-user {
    bottom: 1rem;
    /* lift it up 16px off the bottom edge */
    background: #2b2b2b !important;
    /* dark sidebar bg */
    /* match your sidebar bg */
    padding: 0.25rem;
    border-top: 1px solid #2a2a2a;
    z-index: 10;
    color: #bbb !important;
    /* float above the scrolling list */
}

#sidebar-user-profile .dropdown-toggle {
    padding: 12px 20px;
    border-radius: .125rem;
    transition: border-color 0.3s, background-color 0.3s, padding 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
}

#sidebar-user-profile .dropdown-toggle:hover {
    background-color: rgba(251, 251, 251, 0.05) !important;
}

#sidebar-user-profile .dropdown-toggle:active {
    background-color: rgba(222, 186, 92, 0.65) !important;
}

#sidebar-user button#sidebarUserToggle {
    background: none;
    /* you already have this, but just in case */
    border: none;
    /* ditto */
    padding: 0;
    /* match your a‑tag layout */
    outline: none;
    /* kill the UA focus outline */
    box-shadow: none;
    /* kill any UA or framework focus shadow */
}

/* and make sure it stays gone on focus */
#sidebar-user button#sidebarUserToggle:focus {
    outline: none;
    box-shadow: none;
}

/* dropdown pops up above #sidebar-user */
#sidebar-user .dropdown-menu {
    position: absolute !important;
    will-change: transform;
    bottom: 100% !important;
    top: auto !important;
    width: 100% !important;
    min-width: 264px !important;
    left: auto !important;
    right: 0 !important;
    border-radius: 0;
    z-index: 20;
    transform: translate3d(270px, 48px, 0px) !important;

    background-color: #2b2b2b !important;
    border: 1px solid #444 !important;
    color: #bbb !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
}

#sidebar-user .dropdown-item {
    justify-content: flex-start !important;
    padding: 5px 15px;
}

#sidebar-user .dropdown-menu strong,
#sidebar-user .dropdown-menu small {
    color: #bbb !important;
    /* white name + email header */
}

#sidebar-user .dropdown-item:hover {
    background-color: #3a3a3a !important;
    color: #fff !important;
}

#sidebar-user a.dropdown-toggle {
    color: #495057;
    /* Bootstrap’s $body-color */
    text-decoration: none;
    /* no underline */
}

#sidebar-user .dropdown-menu i {
  width: 20px;           /* equal to icon height */
  text-align: center;    /* centre glyph within the slot */
}

#sidebar-user .dropdown-menu .dropdown-item:not(.text-danger) {
    color: #bbb !important;
    /* muted fg */
}

#sidebar-user .dropdown-menu .dropdown-item:not(.text-danger):hover,
#sidebar-user .dropdown-menu .dropdown-item:not(.text-danger):hover i {
    color: #ddd !important;
}

/* keep the icons in sync */
#sidebar-user .dropdown-menu .dropdown-item:not(.text-danger) i {
    color: #bbb !important;
}

/* Danger item – keep red, just brighten a bit on hover */
#sidebar-user .dropdown-menu .dropdown-item.text-danger:hover,
#sidebar-user .dropdown-menu .dropdown-item.text-danger:hover i {
    color: #ff6666 !important;
    /* brighter red */
}

/* tenant-switcher dropdown row */
.tenant-match {
    cursor: pointer;
    color: #191919;
    /* black text on gold bg */
}

/* sidebar header (logo + product name) */
#sidebarWrapper .sidebar-heading {
    gap: 8px;
    /* space between items */
}

#sidebarWrapper .tenant-switcher input.tenant-editing {
    color: #ddd !important;
}

/* 2) Even on hover/focus it stays the same */
#sidebar-user a.dropdown-toggle:hover,
#sidebar-user a.dropdown-toggle:focus {
    color: #495057;
    text-decoration: none;
}

/* 3) Keep the chevron in muted grey */
#sidebar-user a.dropdown-toggle i {
    color: #6c757d;
    /* Bootstrap’s $gray-600 */
}

#sidebar-menu .bi {
    font-weight: 600; 
    font-size: 18px;            /* same height you use for FA icons        */
    line-height: 1;             /* removes the extra “text” leading        */
    vertical-align: middle;     /* aligns baseline with label              */
    margin-right: 5px;          /* keeps the gap before the link-text      */
    color: #bbb;                /* match your inactive-link colour         */
    text-shadow: 0 0 0.8px currentColor;
}

#sidebar-menu a.sidebar-active .bi {
    color: #191919;             /* colour when the row is selected / hover */
}

#sidebarWrapper .logo {
  height: 64px;
  width: auto;           /* keeps aspect ratio */
  display: inline-block;
  vertical-align: middle;
}