/*Write your custom css in this file.*/

/* The floating chat toggle (.init-chat-icon) is position:fixed so it always
   floats relative to the viewport, regardless of being appended inside
   #mobile-chat-menu-button (a slot in the fixed mobile bottom nav). On some
   phones/browsers that leaves it overlapping the hamburger menu icon at the
   other end of the same bar. Reset it to a normal flex sibling here instead
   of trying to tune bottom/right offsets against a bar whose real height
   varies by browser chrome/safe-area - this way it can never overlap
   anything in the bar, in either its closed or "open chat" (.move-chat-icon)
   state. Desktop is untouched. */
@media (max-width: 767px) {
    #mobile-chat-menu-button .init-chat-icon,
    #mobile-chat-menu-button .init-chat-icon.move-chat-icon {
        position: static !important;
        bottom: auto !important;
        right: auto !important;
        width: auto !important;
        height: auto !important;
        padding: 0 !important;
        margin: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
        border-radius: 0 !important;
        color: #4e5e6a;
    }
    #mobile-chat-menu-button .init-chat-icon.has-message {
        color: #f5325c;
    }
}

/* ===================================================================
   Modern 3D interactive sidebar - purely visual/behavioral layer over
   the existing #sidebar-menu markup (app/Views/includes/left_menu.php).
   No menu-generation logic touched: every rule below targets classes
   that markup already emits, so plugin-injected items, badges, custom
   menu items and the active-state logic all keep working untouched.
   =================================================================== */
:root {
    --sb-navy: #071b35;
    --sb-navy-2: #0d2848;
    --sb-lime: #a8e600;
    --sb-cyan: #2dd4bf;
}

.sidebar {
    background: linear-gradient(165deg, var(--sb-navy) 0%, var(--sb-navy-2) 55%, #0a1f3d 100%) !important;
    border-right: 1px solid rgba(168, 230, 0, .08);
    box-shadow: 6px 0 24px rgba(3, 12, 26, .35);
    perspective: 900px;
}

/* .sidebar-scroll and .sidebar-brand are separate elements that each ship
   their own opaque white background (assets/css/app.all.css) - left alone
   they paint over the gradient above entirely, since they cover the whole
   visible menu area. */
.sidebar .sidebar-scroll {
    background: transparent !important;
}

.sidebar .sidebar-brand {
    background: transparent !important;
    filter: drop-shadow(0 4px 10px rgba(0, 0, 0, .35));
}

.sidebar .sidebar-menu {
    padding: 10px 12px;
}

.sidebar .sidebar-menu > li.main {
    margin: 4px 0;
    list-style: none;
}

.sidebar .sidebar-menu > li.main > a {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0;
    padding: 11px 14px;
    border-radius: 14px;
    background: linear-gradient(155deg, rgba(255, 255, 255, .05), rgba(255, 255, 255, .015));
    border: 1px solid rgba(255, 255, 255, .06);
    box-shadow: 0 2px 0 rgba(0, 0, 0, .25), 0 6px 14px rgba(0, 0, 0, .18);
    color: rgba(255, 255, 255, .78);
    transform: translateZ(0) rotateX(0deg);
    transform-style: preserve-3d;
    transition: transform .28s cubic-bezier(.2, .8, .3, 1.15), box-shadow .28s ease, background .28s ease, border-color .28s ease, color .2s ease;
    will-change: transform;
}

.sidebar .sidebar-menu > li.main > a .icon {
    display: grid;
    place-items: center;
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    border-radius: 10px;
    background: linear-gradient(145deg, rgba(168, 230, 0, .16), rgba(45, 212, 191, .10));
    color: var(--sb-lime);
    box-shadow: inset 0 1px rgba(255, 255, 255, .12), 0 2px 6px rgba(0, 0, 0, .25);
    transition: transform .3s cubic-bezier(.34, 1.56, .64, 1), background .28s ease, color .28s ease;
    margin: 0 !important;
}

.sidebar .sidebar-menu > li.main > a .menu-text {
    font-weight: 600;
    letter-spacing: .2px;
}

.sidebar .sidebar-menu > li.main > a .badge {
    margin-left: auto;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .3);
}

/* Hover: lift toward the viewer with a slight tilt, icon pops and glows */
.sidebar .sidebar-menu > li.main:hover > a {
    transform: translateY(-3px) translateZ(18px) rotateX(4deg);
    background: linear-gradient(155deg, rgba(255, 255, 255, .09), rgba(255, 255, 255, .03));
    border-color: rgba(168, 230, 0, .22);
    box-shadow: 0 10px 0 -6px rgba(0, 0, 0, .2), 0 16px 28px rgba(0, 0, 0, .32), 0 0 0 1px rgba(168, 230, 0, .08);
    color: #fff;
}

@media (min-width: 991px) {
    /* Collapsed/icon-only mode reuses the same li:hover > a selector for a
       completely different interaction (app.all.css widens the <a> to 240px
       and reveals .menu-text) - stacked with the card-lift hover above, the
       light, barely-there gradient meant to read as a subtle raised card on a
       solid navy background instead became the whole visible surface behind
       the revealed text, which is also white: nearly invisible white-on-white.
       Force a solid, readable background and drop the 3D tilt here, since it
       doesn't make sense combined with RISE's own width-expand animation. */
    .sidebar-toggled .sidebar .sidebar-menu > li.main:hover > a {
        transform: none;
        background: linear-gradient(165deg, var(--sb-navy) 0%, var(--sb-navy-2) 100%) !important;
    }
}

.sidebar .sidebar-menu > li.main:hover > a .icon {
    transform: scale(1.1) rotate(-4deg);
    background: linear-gradient(145deg, var(--sb-lime), var(--sb-cyan));
    color: #071b35;
    box-shadow: 0 0 0 4px rgba(168, 230, 0, .12), 0 4px 12px rgba(168, 230, 0, .35);
}

/* Active: permanently raised, glowing accent edge */
.sidebar .sidebar-menu > li.main.active > a,
.sidebar .sidebar-menu > li.main.open > a {
    background: linear-gradient(155deg, rgba(168, 230, 0, .16), rgba(45, 212, 191, .06));
    border-color: rgba(168, 230, 0, .35);
    color: #fff;
    box-shadow: 0 8px 0 -5px rgba(0, 0, 0, .18), 0 14px 26px rgba(0, 0, 0, .3), inset 3px 0 0 var(--sb-lime);
}

.sidebar .sidebar-menu > li.main.active > a .icon,
.sidebar .sidebar-menu > li.main.open > a .icon {
    background: linear-gradient(145deg, var(--sb-lime), var(--sb-cyan));
    color: #071b35;
    box-shadow: 0 0 0 4px rgba(168, 230, 0, .12), 0 4px 12px rgba(168, 230, 0, .35);
}

/* Submenu: recessed "inset panel" so it reads as a lower depth layer, when
   the sidebar is expanded and the submenu sits in normal flow below its
   parent item. */
.sidebar .sidebar-menu > li.main > ul {
    margin: 6px 4px 4px 16px;
    padding: 6px 0 6px 14px;
    border-left: 2px solid rgba(168, 230, 0, .18);
    background: rgba(0, 0, 0, .14);
    border-radius: 0 10px 10px 0;
    box-shadow: inset 0 2px 6px rgba(0, 0, 0, .25);
}

@media (min-width: 991px) {
    /* Collapsed/icon-only sidebar mode renders the submenu as a detached,
       absolutely-positioned flyout instead (app.all.css's
       ".sidebar-toggled .sidebar-menu li ul", background-color: #fff) - same
       selector specificity as the rule above and loaded first, so without an
       explicit override here that flyout inherited this file's near-transparent
       rgba(0,0,0,.14) meant for the recessed in-flow panel, making it nearly
       see-through and letting whatever sits behind it (page content, another
       open flyout) bleed through. Give the flyout its own solid, on-brand
       background instead of relying on the in-flow rule to also happen to work
       for it. */
    .sidebar-toggled .sidebar .sidebar-menu li ul {
        background: linear-gradient(165deg, var(--sb-navy) 0%, var(--sb-navy-2) 100%) !important;
        border: 1px solid rgba(168, 230, 0, .18);
        border-radius: 10px;
        box-shadow: 0 14px 28px rgba(0, 0, 0, .4);
        /* The in-flow submenu rule above sets margin/padding/border-left meant
           for its recessed-panel look under an expanded item - left alone
           those ALSO apply here (same element, this file just overrides
           background/border/shadow), shifting this absolutely-positioned
           flyout's actual box away from app.all.css's "left: 70px" anchor.
           Margin isn't part of the hoverable box, so that gap became dead
           space: moving the mouse from the icon toward the flyout crossed it
           and broke the :hover chain, closing the flyout before a click could
           land - reported as "items disappear before selecting any". Zero
           these out so the flyout sits flush against the icon column instead,
           and widen it (app.all.css's fixed 180px, minus this file's item
           padding, wasn't enough room for longer labels like "Operations
           dashboard" - reported as text "not showing fully"). */
        margin: 0 !important;
        padding: 6px 0 !important;
        border-left: 1px solid rgba(168, 230, 0, .18) !important;
        width: 230px !important;
    }

    .sidebar-toggled .sidebar .sidebar-menu li ul li {
        width: 100% !important;
    }

    .sidebar-toggled .sidebar .sidebar-menu li:hover {
        background: transparent !important;
    }

    /* JS (left_menu.php) adds/removes this class with a short grace period on
       mouseenter/mouseleave of the whole <li>, so the flyout stays open while
       the mouse travels toward it even along a diagonal path that briefly
       leaves both the icon's own box and the flyout's box - see the long
       comment above. Mirrors the visibility/expand behavior app.all.css only
       applies on real :hover (li:hover, li:hover > a, li:hover .menu-text,
       li:hover ul), since a class alone doesn't get any of that for free. */
    .sidebar-toggled .sidebar .sidebar-menu li.js-flyout-open {
        width: 250px;
        background: transparent !important;
    }

    .sidebar-toggled .sidebar .sidebar-menu li.js-flyout-open > a {
        width: 240px;
    }

    .sidebar-toggled .sidebar .sidebar-menu li.js-flyout-open > a .menu-text {
        display: inline !important;
    }

    .sidebar-toggled .sidebar .sidebar-menu li.js-flyout-open > ul {
        display: block !important;
        max-height: 1000px !important;
    }

    .sidebar-toggled .sidebar .sidebar-menu li ul li a {
        color: rgba(255, 255, 255, .75);
        white-space: nowrap;
    }

    .sidebar-toggled .sidebar .sidebar-menu li ul li a:hover {
        color: #fff;
        background: rgba(168, 230, 0, .12);
    }
}

.sidebar .sidebar-menu > li.main > ul > li {
    list-style: none;
}

.sidebar .sidebar-menu > li.main > ul > li > a {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 10px;
    margin: 1px 0;
    border-radius: 8px;
    color: rgba(255, 255, 255, .62);
    transition: transform .2s ease, background .2s ease, color .2s ease, padding-left .2s ease;
}

.sidebar .sidebar-menu > li.main > ul > li > a:hover {
    background: rgba(168, 230, 0, .1);
    color: #fff;
    padding-left: 14px;
    transform: translateX(2px);
}

.sidebar .sidebar-menu > li.main > ul > li.active > a {
    background: rgba(168, 230, 0, .14);
    color: var(--sb-lime);
    font-weight: 600;
}

/* Respect users who've asked the OS to reduce motion */
@media (prefers-reduced-motion: reduce) {
    .sidebar .sidebar-menu > li.main > a,
    .sidebar .sidebar-menu > li.main > a .icon,
    .sidebar .sidebar-menu > li.main > ul > li > a {
        transition: none !important;
    }
    .sidebar .sidebar-menu > li.main:hover > a {
        transform: none;
    }
}

/* Phones/tablets: RISE reuses .sidebar-toggled there to mean "menu open
   full-screen", not "collapsed to icons" - app.all.css only applies its
   collapsed-mode rules at min-width: 991px, which is why the flyout rules
   above are scoped the same way. Left unscoped they turned the expanded
   submenu into a narrow 230px floating box and the last-tapped item into
   a 240px card. Also drop the 3D lift here: a tap leaves :hover stuck on
   the item, and its translateZ painted it over the fixed bottom nav. The
   extra bottom padding lets the last items scroll clear of that nav. */
@media (max-width: 990px) {
    .sidebar {
        perspective: none;
    }
    .sidebar .sidebar-menu {
        padding-bottom: 96px;
    }
    .sidebar .sidebar-menu > li.main > a,
    .sidebar .sidebar-menu > li.main:hover > a,
    .sidebar .sidebar-menu > li.main > a .icon,
    .sidebar .sidebar-menu > li.main:hover > a .icon,
    .sidebar .sidebar-menu > li.main > ul > li > a:hover {
        transform: none !important;
        will-change: auto;
    }
}