/* Import a premium modern font */
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700&display=swap');

/* =========================================================
   SIDEBAR PREMIUM STYLING (REUSABLE)
   ========================================================= */

/* Custom Scrollbar for Sidebar (Overrides slimScroll plugin) */
#leftsidebar .slimScrollBar {
    background-color: rgba(59, 130, 246, 0.4) !important; /* Subtle blue to match light theme */
    width: 6px !important;
    border-radius: 10px !important;
}
#leftsidebar .slimScrollDiv:hover .slimScrollBar,
#leftsidebar .slimScrollBar:hover {
    background-color: rgba(29, 78, 216, 0.7) !important; /* Stronger blue on hover */
}

.menu_dark #leftsidebar .slimScrollBar {
    background-color: rgba(243, 149, 23, 0.3) !important; /* Subtle yellow to match dark theme */
}
.menu_dark #leftsidebar .slimScrollDiv:hover .slimScrollBar,
.menu_dark #leftsidebar .slimScrollBar:hover {
    background-color: rgba(243, 149, 23, 0.7) !important; /* Stronger yellow on hover */
}

/* 1. Global Sidebar Font */
/* Applies the modern Outfit font to the entire sidebar */
#leftsidebar {
    font-family: 'Outfit', sans-serif;
}

/* 2. Premium Hover Effects (Main & Sub Items) */
/* Adds smooth transitions, rounded backgrounds, and a subtle shift right on hover */
#leftsidebar .menu .list a {
    transition: all 0.3s ease;
    margin: 2px 8px; /* Adds margins so the hover background feels rounded and disconnected from edges */
    border-radius: 8px;
}

#leftsidebar .menu .list a:hover {
    color: #1d4ed8 !important; /* Primary blue text */
    background: #f8fafc !important; /* Very light slate background */
    transform: translateX(4px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.03);
}

/* Ensure inner text inherits the hover color to fix readability */
#leftsidebar .menu .list a:hover span {
    color: inherit !important;
}

/* --- Dark Mode Hover Fixes --- */
.menu_dark #leftsidebar .menu .list a:hover {
    background: #2b313b !important; /* Dark slate background instead of white */
    color: #60a5fa !important; /* Lighter blue for dark mode visibility */
    box-shadow: 0 4px 12px rgba(0,0,0,0.3);
}
.menu_dark #leftsidebar .menu .list a:hover i {
    background: linear-gradient(135deg, #60a5fa, #a78bfa); /* Brighter gradient */
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* 3. Icon Hover Animation */
/* Gives icons a pop of color (blue-purple gradient) and a playful rotation when hovered */
#leftsidebar .menu .list a i {
    transition: all 0.3s ease;
}

#leftsidebar .menu .list a:hover i {
    background: linear-gradient(135deg, #3b82f6, #8b5cf6);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    transform: scale(1.1) rotate(-5deg);
}

/* 4. Active Parent Item Styling (Top-Level) */
/* Gives the currently active main menu item a distinct blue block background and left border */
#leftsidebar .menu .list li.active > a {
    color: #1d4ed8 !important;
    background: #eff6ff !important;
    font-weight: 600;
    box-shadow: inset 4px 0 0 0 #3b82f6 !important;
}

/* Ensure inner text ar is also colored */
#leftsidebar .menu .list li.active > a span {
    color: inherit !important;
}

/* --- Dark Mode Active Item Fixes --- */
.menu_dark #leftsidebar .menu .list li.active > a {
    background: #23272e !important; /* Dark subtle background */
    color: #f39517 !important; /* AdminBSB default yellow for dark mode active items */
}
.menu_dark #leftsidebar .menu .list li.active > a i {
    background: none !important;
    color: #f39517 !important;
    -webkit-text-fill-color: initial;
}

#leftsidebar .menu .list li.active > a i {
    background: linear-gradient(135deg, #3b82f6, #8b5cf6);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* 5. Notification Badge Styling */
/* Styles the red notification dot and adds a continuous pulsing animation */
.badge_indicator {
    background-color: red;
    color: white !important;
    border-radius: 50%;
    font-size: 9px !important;
    font-weight: bold !important;
    display: grid;
    place-items: center;
    animation: pulse 1.5s infinite;
    width: 22px !important;
    height: 22px !important;
    justify-self: end;
}

@keyframes pulse {
    0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(255, 0, 0, 0.7); }
    70% { transform: scale(1.1); box-shadow: 0 0 0 8px rgba(255, 0, 0, 0); }
    100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(255, 0, 0, 0); }
}

.badge_ind_container {
    display: grid !important;
    grid-template-columns: 1fr auto;
    align-items: center;
    column-gap: 8px;
}
.badge_ind_container > span {
    margin: 0 !important;
}
.badge_ind_container > span:first-child {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.badge_ind_container span {
    padding: 0px;
}

/* 6. Sidebar Menu Indentation & Spacing */
/* Adjusts the left padding of top-level and first-level nested menus for a cleaner hierarchy */
#leftsidebar .menu .list > li > a {
    padding-left: 10px !important;
}

/* Ensure all sub-menu items have a consistent, slightly thicker font weight */
#leftsidebar .menu .list .ml-menu a,
#leftsidebar .menu .list .ml-menu a span {
    font-weight: 400 !important;
}

#leftsidebar .menu .list .ml-menu > li > a {
    padding-left: 25px !important;
}

/* 7. Deeply Nested Sub-Menu Indentation */
/* Prevents 3rd level items (e.g. Payroll Compliance -> Unified) from being pushed too far right */
#leftsidebar .menu .list .ml-menu .ml-menu li a {
    padding-left: 40px !important; 
}

/* 8. Active Nested Sub-Menu Styling (Text-Only) */
/* Prevents nested active items from looking cluttered by ONLY changing their text/icon color to blue */
#leftsidebar .menu .list .ml-menu li.active > a {
    color: #1d4ed8 !important; 
    background: transparent !important; 
    box-shadow: none !important;
}

#leftsidebar .menu .list .ml-menu li.active > a i {
    color: #1d4ed8 !important;
    background: none;
    -webkit-text-fill-color: initial;
}

/* Dark Mode Fix for Active Nested Sub-Menu */
.menu_dark #leftsidebar .menu .list .ml-menu li.active > a,
.menu_dark #leftsidebar .menu .list .ml-menu li.active > a i {
    color: #f39517 !important; /* AdminBSB default yellow for readability */
}

/* Hide the overlapping active dot for sub-menus */
#leftsidebar .menu .list .ml-menu li.active a.toggled:not(.menu-toggle):before {
    display: none !important;
}

/* =========================================================
   9. RTL (ARABIC) SUPPORT
   ========================================================= */

/* Align text to the right for Arabic layout */
html[dir="rtl"] #leftsidebar .menu .list a,
.rtl #leftsidebar .menu .list a {
    text-align: right !important;
}

/* 
   PERFECT MIRROR OF LTR PADDINGS
   LTR: padding-left custom, padding-right 15px (default)
   RTL: padding-right custom, padding-left 15px (default mirrored)
*/

/* Main Menu (Level 1) */
html[dir="rtl"] #leftsidebar .menu .list > li > a,
.rtl #leftsidebar .menu .list > li > a {
    padding-right: 10px !important;
    padding-left: 15px !important;
}

/* Sub Menu (Level 2) */
html[dir="rtl"] #leftsidebar .menu .list .ml-menu > li > a,
.rtl #leftsidebar .menu .list .ml-menu > li > a {
    padding-right: 18px !important; /* Tight 8px visual indent from main menu */
    padding-left: 15px !important;
}

/* Deep Sub Menu (Level 3) */
html[dir="rtl"] #leftsidebar .menu .list .ml-menu .ml-menu li a,
.rtl #leftsidebar .menu .list .ml-menu .ml-menu li a {
    padding-right: 26px !important; /* Tight 8px visual indent from sub menu */
    padding-left: 15px !important;
}

/* Reverse Active Item Blue Border (Main Menu Only) */
html[dir="rtl"] #leftsidebar .menu .list > li.active > a,
.rtl #leftsidebar .menu .list > li.active > a {
    box-shadow: inset -4px 0 0 0 #3b82f6 !important;
}

/* Remove Blue Border for Nested Active Items in RTL */
html[dir="rtl"] #leftsidebar .menu .list .ml-menu li.active > a,
.rtl #leftsidebar .menu .list .ml-menu li.active > a {
    box-shadow: none !important;
}

/* Reverse Hover Animation */
html[dir="rtl"] #leftsidebar .menu .list a:hover,
.rtl #leftsidebar .menu .list a:hover {
    transform: translateX(-4px);
}

/* 10. Glassmorphism User Card */
.glassmorphic-card {
    background: rgba(255, 255, 255, 0.6);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(0, 0, 0, 0.05);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.03);
    border-radius: 12px;
}

.menu_dark .glassmorphic-card {
    background: rgba(0, 0, 0, 0.25);
    border: 1px solid rgba(255, 255, 255, 0.05);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}