/* ==========================================================================
   School Expert ERP - Modern UI Theme Engine Override
   ========================================================================== */

/* Premium Header Branding */
.navbar-inverse {
    background-color: #1e1e2f !important;
    border-color: #1e1e2f !important;
    box-shadow: 0 4px 20px 0 rgba(0,0,0,.05);
}
.custom-brand {
    background: linear-gradient(135deg, #ff5252 0%, #f44336 100%) !important;
    color: #fff !important;
    font-weight: 600 !important;
    letter-spacing: 0.5px;
    border-radius: 4px;
    margin: 5px 10px;
    padding: 10px 20px !important;
    height: auto !important;
}
.navbar-brandmd-sx {
    color: #a4a6b5 !important;
    font-size: 13px;
    padding: 18px 15px !important;
}

/* Premium Top Bar & User Menu */
.top-nav > li > a.dropdown-toggle {
    background: rgba(255,255,255,0.08) !important;
    color: #fff !important;
    border-radius: 4px;
    margin-top: 7px;
    padding: 8px 15px !important;
    transition: all 0.3s;
}
.top-nav > li > a.dropdown-toggle:hover {
    background: rgba(255,255,255,0.15) !important;
}

/* Modern & Premium Sidebar Architecture */
.side-nav {
    background-color: #1e1e2f !important;
    border-right: 1px solid #2b2b40;
    top: 60px !important;
    padding-top: 15px;
}
.side-nav > li > a {
    color: #b3b3cc !important;
    padding: 12px 20px !important;
    font-size: 14px;
    font-weight: 500;
    display: flex;
    align-items: center;
    justify-content: space-between;
    transition: all 0.3s ease;
    border-left: 3px solid transparent;
}
.side-nav > li > a i.menu-icon {
    margin-right: 12px;
    font-size: 16px;
    width: 20px;
    text-align: center;
}
.side-nav > li > a:hover, 
.side-nav > li.active > a {
    color: #fff !important;
    background-color: #27293d !important;
    border-left-color: #ff5252;
}

/* Modern Dropdown Indicators */
.side-nav > li > a::after {
    content: '\f107';
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    transition: transform 0.3s;
}
.side-nav > li[data-toggle="collapse"].collapsed > a::after {
    transform: rotate(-90deg);
}

/* Smooth Submenu Styling */
.sub-menu {
    background-color: #171724 !important;
    padding: 5px 0 !important;
    list-style: none;
}
.sub-menu > li > a {
    color: #a4a6b5 !important;
    padding: 9px 20px 9px 45px !important;
    display: block;
    font-size: 13px;
    text-decoration: none;
    transition: all 0.2s;
}
.sub-menu > li > a:hover,
.sub-menu > li.active > a {
    color: #ff5252 !important;
    padding-left: 50px !important;
    background: transparent !important;
}
#page-wrapper {
    background-color: #f8f9fa !important;
    padding-top: 20px;
}

/* 🎯 फ़िक्स: साइडबार के फालतू स्क्वायर डिब्बे, आउटलाइन और अतिरिक्त ग्रिड लाइन्स को हटाने के लिए */
.side-nav > li > a, 
.sub-menu > li > a {
    text-decoration: none !important;
    box-shadow: none !important;
    outline: none !important;
    border-bottom: none !important;
}

/* बूटस्ट्रैप/SB-Admin के उन अनचाहे स्यूडो-एलिमेंट्स (Pseudo-elements) को साफ़ करने के लिए जो बॉक्स बना रहे थे */
.side-nav > li > a::before,
.sub-menu > li > a::before,
.sub-menu > li > a::after {
    display: none !important;
    content: none !important;
}

/* यह सुनिश्चित करने के लिए कि केवल हमारा फ़ॉन्ट ऑसम एरो ही दाहिनी ओर दिखे */
.side-nav > li > a::after {
    display: inline-block !important;
}



/* 🎯 फिक्स: साइडबार के सभी फालतू डिब्बों को हटाकर प्योर CSS एरो सेट करना */

/* पुराने फॉन्ट-आइकॉन वाले तीर को पूरी तरह बंद करें */
.side-nav > li > a::after {
    content: "" !important;
    font-family: inherit !important;
    border: none !important;
    
    /* यहाँ हम प्योर CSS से सुंदर तिकोना तीर बना रहे हैं */
    display: inline-block !important;
    width: 6px !important;
    height: 6px !important;
    border-right: 2px solid #b3b3cc !important;
    border-bottom: 2px solid #b3b3cc !important;
    transform: rotate(45deg) !important; /* डिफ़ॉल्ट नीचे झुका हुआ तीर */
    transition: transform 0.3s ease !important;
    margin-top: 5px !important;
}

/* जब मेन्यू बंद (Collapsed) हो तो तीर को दाहिनी तरफ घुमा दें */
.side-nav > li[data-toggle="collapse"].collapsed > a::after {
    transform: rotate(-45deg) !important; /* दाहिनी तरफ इशारा करता हुआ तीर */
}

/* एक्टिव या होवर होने पर तीर का रंग सफेद करें */
.side-nav > li > a:hover::after,
.side-nav > li.active > a::after {
    border-color: #fff !important;
}

/* अगर किसी अन्य पुरानी CSS (जैसे sb-admin) से एक्स्ट्रा बॉक्स आ रहा हो तो उसे कुचल दें */
.side-nav li a *, 
.side-nav li a::before {
    box-shadow: none !important;
    outline: none !important;
}

/* 🎯 हेडर के ब्लैक बार वाले टेक्स्ट को एकदम साफ़ और चमकदार बनाने के लिए */
.navbar-header a[href="#"].navbar-brandmd-sx {
    color: #ffffff !important;         /* डार्क ग्रे हटाकर एकदम चमकदार सफ़ेद रंग */
    font-weight: 600 !important;       /* टेक्स्ट को साफ़ दिखने के लिए बोल्ड किया */
    font-size: 14px !important;        /* पढ़ने में आसानी के लिए परफेक्ट साइज़ */
    letter-spacing: 0.5px !important;  /* अक्षरों के बीच साफ़ गैप */
    opacity: 1 !important;             /* किसी भी प्रकार के धुंधलेपन को हटाने के लिए */
}