* {
           margin: 0;
           padding: 0;
           box-sizing: border-box;
           font-family: "Times New Roman", Times, serif;
       }

header {
    background: white;
    height: 60px;
    padding: 0 20px;
    padding-left: 10px;
    border-bottom: 1px solid #d1d5db;
    width: 100%;
    display: flex;
    align-items: start;
    justify-content: space-between;
    position: fixed;
    top: 0;
    z-index: 1000;
}

.logo-area {
    display: flex;
    align-items: end;
    gap: 8px;
    font-style: italic;
    font-weight: bold;
    font-size: 25px;
    color: #2c3e50;
    min-width: fit-content;
}

nav {
    display: flex;
    gap: 20px;
}

nav a {
    text-decoration: none;
    color: #555;
    font-size: 20px;
}

/* आपके पुराने कोड में केवल एक लाइन (position: relative) जोड़ी है */
header .search-container {
    flex-grow: 0.4;
    display: flex;
    background: #f0f2f5;
    border-radius: 20px;
    padding: 5px 15px;
    position: relative; /* इसके अंदर के रिजल्ट बॉक्स को अलाइन करने के लिए ज़रूरी है */
}
.search-box {
    position: relative; /* इसके अंदर के रिजल्ट बॉक्स को नीचे फिक्स करने के लिए */
    width: 100%;        /* पूरी चौड़ाई लेगा */
    display: block;     /* flex हटा दिया ताकि रिजल्ट बॉक्स बगल में जगह न घेरे */
}
#searchInput {
    width: 100% !important;
    display: block;
}
header .search-container input {
    border: none;
    background: transparent;
    outline: none;
    padding: 5px;
    width: 100%;
}

header .search-container i {
    color: #888;
    align-self: center;
}

#resultsBox {
    position: absolute;
    top: 100%;          /* इनपुट बॉक्स के ठीक नीचे से शुरू होगा */
    left: 0;
    width: 100%;        /* इनपुट बॉक्स जितनी ही पूरी चौड़ाई लेगा */
    height: 300px;      /* फिक्स्ड हाइट */
    
    /* दोनों स्क्रॉल बार हमेशा चालू रहेंगे */
    overflow-y: scroll !important; 
    overflow-x: scroll !important; 

    background: white;
    border-radius: 12px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
    border: 1px solid #eee;
    z-index: 999;       /* ताकि यह बाकी सभी एलिमेंट्स के ऊपर तैरता हुआ दिखे */
}

/* रिजल्ट के अंदर के आइटम्स की स्टाइलिंग */
.result-item {
    padding: 10px 15px;
    cursor: pointer;
    border-bottom: 1px solid #f0f2f5;
    white-space: nowrap !important;
    width: max-content !important;
    min-width: 100%;
    display: block;
}


.result-item:hover {
    background: #f9fafb;
}

/* छुपाने के लिए क्लास */
.hidden {
    display: none !important;
}


header img {
    width: 30px;
    height: 30px;
    transform: skewX(-12deg);
}

.header-actions {
    display: flex !important;
    /* row-reverse se aakhiri element (Dashboard) pehle dikhega */
    flex-direction: row-reverse !important;
    align-items: center !important;
    justify-content: flex-end !important;
    /* Right side mein chipka rahega */
    gap: 15px !important;
    width: auto !important;
}


.icon-btn {
    font-size: 1.2rem;
    color: #555;
    cursor: pointer;
    position: relative;
}

.auth-btns {
    display: flex;
    gap: 10px;
}

.btn {
    padding: 8px 18px;
    border-radius: 5px;
    border: none;
    cursor: pointer;
    font-size: 0.9rem;
    font-weight: 500;
}

.btn-signin {
    background: transparent;
    border: 1px solid #3776ab;
    color: #3776ab;
}

.btn-login {
    background: #3776ab;
    color: white;
}

.btn-dashboard {
    background: #3776ab;
    color: white;
    text-decoration: none;
}

/* 🔔 Bell Fix: Fixed se hata kar Relative kiya */
#bellBtn {
    position: relative;
    font-size: 25px;
    cursor: pointer;
    display: flex;
    align-items: center;
    margin: 0 !important;
}

#bellBadge {
    position: absolute;
    top: -2px;
    right: -2px;
    background: #ef4444;
    color: white;
    font-size: 10px;
    padding: 2px 5px;
    border-radius: 50%;
    border: 2px solid white;
}

.auth-btns {
    display: flex;
    gap: 8px;
    margin: 0 !important;
}

#notificationBox {
    position: absolute;
    top: 55px;
    right: 20px;
    width: 300px;
    background: white;
    border-radius: 12px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
    display: none;
    flex-direction: column;
    border: 1px solid #eee;
}

.box-header {
    padding: 10px;
    border-bottom: 1px solid #ddd;
    display: flex;
    justify-content: space-between;
}

#notificationList {
    max-height: 400px;
    overflow-y: auto;
}

.notification-item {
    padding: 10px;
    border-bottom: 1px solid #eee;
    cursor: pointer;
}

.notification-item:hover {
    background: #f9fafb;
}

.empty {
    padding: 20px;
    text-align: center;
    color: gray;
}


/* course section */

.courses {
    height: 30px;
    width: 100%;
    position: fixed;
    background: #f8fafc;
    display: flex;
    overflow-x: auto;
    align-items: center;
    gap: 10px;
    border: 1px solid #d1d5db;
    border-top: none;
    top: 60px;
    scrollbar-width: none;
    z-index: 999;
    border-left: none;
    border-right: none;
}

.courses a {
    display: inline-flex; /* Isse anchor ke andar ka text bhi center ho jayega */
    align-items: center;  
    padding:2px 13px; 
    text-decoration: none;
    background: #e5e7eb;
    margin-left: 10px;
    color: black; 
    border-radius: 1px; 
}

#googleToggle {
    display: none !important; 
    background: linear-gradient(135deg, #3b82f6, #1d4ed8);  
    color: white;
     
    position: fixed !important;
    bottom: 0px !important;
    right: 0px !important;
    left: auto !important; /* पुराना left:-10% हटाने के लिए */
    top: auto !important;  /* पुराना top:50% हटाने के लिए */
    
    /* साइज और शेप (गोल बटन के लिए) */
    width: 35px;
    height: 35px;
    border-radius: 2px; /* पूरा गोल करने के लिए */
    border: none;
    
    /* अलाइनमेंट और फॉन्ट */
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    cursor: pointer;
    z-index: 999999 !important;  
}
/* साइडबार का मुख्य कंटेनर */
.sidebar {
    position: fixed;
    top: 85px;
    left: 0;
    width: 280px; 
    height: calc(100vh - 85px) !important; 
    background: #ffffff;
    border-right: 1px solid #f1f5f9;
    box-shadow: 6px 0 30px rgba(0, 0, 0, 0.02); 
    z-index: 999; 
    
    /* Buttons ke liye scroll wapas on kiya */
    overflow-y: auto !important; 
    overflow-x: hidden;
    
    /* Top padding utni hi rakhi jahan se dashboard links start honi chahiye */
    padding: 120px 16px 24px 16px; 
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
}

.sidebar {
    position: fixed;
    top: 85px;
    left: 0;
    width: 280px; 
    height: calc(100vh - 85px) !important; 
    background: #ffffff;
    border-right: 1px solid #f1f5f9;
    box-shadow: 6px 0 30px rgba(0, 0, 0, 0.02); 
    z-index: 999; 
    
    /* 1. Pure container ka scroll bar band taaki header apni jagah block ho jaye */
    overflow-y: hidden !important; 
    padding: 24px 0 0 0; /* Padding ko separate kiya */
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
}

/* Header standard flow me top par rahega, bilkul nahi hilega */
.sidebar-user-header {
    position: relative !important;
    margin: 0 16px 24px 16px !important; /* Niche ka 24px gap hamesha khali rahega */
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%) !important; 
    padding: 14px 12px;
    border-radius: 14px;
    border: 1px solid #e2e8f0; 
    display: flex;
    align-items: center; 
    box-sizing: border-box;
    flex-shrink: 0; /* Header apni space hold rakhega */
}

/* 2. THE SECRET WEAPON: Baki saare buttons ko ek hi list area me map karna bina wrapper lagaye */
/* Hum scroll area ko direct control karne ke liye sidebar ke layout ko clip ya position use na karke simply baki components par targets lagayenge. Agar HTML me wrappers nahi hain, toh buttons par direct hidden masks kaam nahi karenge jab tak unhe wrapper na mile. */

/* Is situation ka sabse solid bypass bina HTML chhede yeh hai: */
.sidebar {
    /* Hum pure sidebar ko scroll bar denge par top margin mask block laga denge */
    overflow-y: auto !important;
    padding: 0 16px 24px 16px;
}

/* MASK LAYER: Yeh header ke upar aur niche waale gap ke piche buttons ko invisible kar dega */
.sidebar::before {
    content: "";
    position: fixed;
    top: 85px; /* Sidebar top */
    left: 0;
    width: 279px;
    height: 125px; /* Pura calculated height (Top space + Header height + Bottom Gap) */
    background: #ffffff; /* Solid White Cover */
    z-index: 100; /* Buttons ke upar */
    pointer-events: none; /* Iske piche buttons par click ho sake */
}

/* Header ko is white cover mask se bhi upar dikhane ke liye layer priority code */
.sidebar-user-header {
    position: sticky !important;
    top: 24px !important; /* 24px top space block */
    z-index: 101 !important; /* Mask se bhi ek level upar */
    margin: 24px 0 !important;
}

/* Buttons and Labels standard setting area */
.menu-label, .sidebar-btn {
    position: relative;
    z-index: 10; /* Mask ke niche se guzarne ke liye low priority index */
}



/* प्रीमियम कस्टम स्क्रॉलबार */
.sidebar::-webkit-scrollbar {
    width: 4px;
}
.sidebar::-webkit-scrollbar-thumb {
    background: #e2e8f0;
    border-radius: 10px;
}

/* प्रीमियम कस्टम स्क्रॉलबार */
.sidebar::-webkit-scrollbar {
    width: 4px;
}
.sidebar::-webkit-scrollbar-thumb {
    background: #e2e8f0;
    border-radius: 10px;
}
 
.user-avatar-large {
    width: 44px;
    height: 44px;
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
    color: white;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 18px;
    margin-right: 12px;
    box-shadow: 0 4px 10px rgba(245, 158, 11, 0.2);
}

.user-welcome-info {
    display: flex;
    flex-direction: column;
}

.user-welcome-info h3 {
    margin: 0;
    font-size: 11px;
    color: #64748b;
    font-weight: 500;
    text-transform: uppercase;
}

.user-welcome-info h2 {
    margin: 1px 0 3px 0;
    font-size: 15px;
    color: #0f172a;
    font-weight: 700;
}

.user-status-tag {
    font-size: 10px;
    color: #10b981;
    font-weight: 600;
    display: flex;
    align-items: center;
    background: #ecfdf5;
    padding: 2px 6px;
    border-radius: 20px;
    width: max-content;
}

.status-dot-active {
    width: 5px;
    height: 5px;
    background: #10b981;
    border-radius: 50%;
    margin-right: 4px;
    display: inline-block;
}

/* कैटेगरी लेबल्स - बिल्कुल बाएँ कोने में */
.menu-label {
    font-size: 11px;
    font-weight: 700;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin: 20px 0 6px 8px; /* लेफ्ट मार्जिन को परफेक्ट अलाइन किया */
    text-align: left;
}

/* बटन्स की स्टाइल - फिक्स्ड लेफ्ट अलाइनमेंट */
.sidebar-btn {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: flex-start; /* हमेशा लेफ्ट से शुरू होगा */
    width: 100%;  
    margin: 3px 0;  
    padding: 12px 12px; /* समान पैडिंग */
    background: transparent;
    border: none; 
    font-size: 14px;
    font-weight: 500;
    color: #475569; 
    cursor: pointer; 
    border-radius: 4px; 
    transition: all 0.2s ease;
    box-sizing: border-box;
    text-align: left; /* टेक्स्ट का डिफ़ॉल्ट अलाइनमेंट लेफ्ट किया */
}
 
/* होवर इफेक्ट */
.sidebar-btn:hover {
    background: #f1f5f9;
    color: #0f172a; 
}

.sidebar-btn:hover i {
    color: #2563eb; 
}

/* एक्टिव बटन स्टाइल */
.sidebar-btn.active {
    background: #eff6ff !important;
    color: #2563eb !important;
    font-weight: 600;
} 
.sidebar-btn.active i {
    color: #2563eb !important;
}

/* एक्टिव बटन के बाएँ तरफ की प्रीमियम इंडिकेटर लाइन */
.sidebar-btn.active{
    border-left: 4px solid #2563eb;
}
/* अलर्ट बैजेस (राइट साइड में फिक्स्ड) */
.badge {
    font-size: 10px;
    font-weight: 600;
    padding: 2px 6px;
    border-radius: 20px;
    margin-left: auto; /* बैज हमेशा राइट एंड में रहेगा */
    display: inline-block;
}
.badge-blue { background: #dbeafe; color: #1e40af; }
.badge-orange { background: #ffedd5; color: #c2410c; }

/* सेटिंग्स और डेंजर ज़ोन बटन */
.sidebar-btn.danger-zone {
    margin-top: auto; 
    color: #df2c2c;
    background: #fff5f5;
    border: 1px dashed rgba(223, 44, 44, 0.2);
    margin-top: 30px;
}

.sidebar-btn.danger-zone i { color: #f87171; }

.sidebar-btn.danger-zone:hover {
    background: #fef2f2;
    color: #991b1b;
    border-color: #df2c2c;
}

.sidebar-btn.danger-zone:hover i { color: #991b1b; }



 
.sp {
    margin-top: 25px !important;
    border-top: 1px solid #f9f9f9;
    padding-top: 15px !important;
}

.sp:hover {
    background: #fff5f5 !important;
    color: #ff4d4d !important;
}
 main { 
    background-color: white;
    width: calc(100% - 280px); 
    border-top: none;
    margin-left: 280px;  
    overflow-x: hidden;   
}
 
/* स्क्रॉलबार को सुंदर बनाने के लिए (Optional) */
main::-webkit-scrollbar, .sidebar::-webkit-scrollbar {
    width: 6px;
}
main::-webkit-scrollbar-thumb, .sidebar::-webkit-scrollbar-thumb {
    background: #d1d5db;
    border-radius: 10px;
}













/* Header */
@media (max-width: 521px) {
    header {
        height: 70px;
        flex-wrap: wrap;
        padding: 0;
    }
    .logo-area { 
        order: 1; 
        flex: 1; 
        font-size: 23px;
        gap: 1px;
    }
    .logo-area img{
        width: 28px;
        height: 28px;
    }
    .header-actions { 
        order: 2; 
    }
    header .search-container { 
        order: 3; 
        height: 35px;
        width: 100%;  
    }
    nav { display: none; }
       .btn {
           padding: 7px 15px;
           border-radius: 3px;
           font-size: 13px;
}
header .search-container{
    border-radius: 0;
}
}
@media (min-width:400px) {
    header {
        height: 85px !important;
        flex-wrap: wrap;
        padding: 0;
    }

    .logo-area{
        padding-bottom: 2px;
        padding: 5px;
    }
    .header-actions{
        padding: 5px;
        padding-bottom: 2px;
    }
}
@media (min-width:761px) {
    header{
        height: 80px !important;
    }
    .logo-area{
        font-size: 25px !important;
    }
    .logo-area img{
        width: 27px !important;
        height: 27px !important;
    }
} 
@media (min-width: 522px) and (max-width: 768px) {
    header {
        padding: 0 !important; 
        flex-wrap: wrap;
        display: flex;
        align-items: center;
        height: 84px !important;
    } 
    .logo-area { 
        order: 1; 
        flex: 0 0 auto; 
        display: flex;
        align-items: center;
        gap: 1px;
        font-size: 24px;
    }
.logo-area img{
    width: 25px;
    height: 25px;
}

    nav { 
        order: 2; 
        display: flex; 
        gap: 12px;
         margin-left: auto;
        align-items: center;
    }

    nav a {
        font-size: 18px;
        white-space: nowrap;
    }
 
    header .search-container { 
        border-radius: 0 6px 6px 0;
        order: 3; 
        flex: 1; 
        min-width: 250px; ;
    }

    .header-actions { 
        order: 4; 
        display: flex;
        align-items: center;
        gap: 12px; 
        margin-left: 15px; 
    }
}
@media (min-width: 769px) {
    header {
        flex-wrap: nowrap; 
        height: 55px !important; 
        padding: 5px;
        justify-content: space-between;
    } 
    .logo-area { order: 1; font-size: 22px !important; gap: 2px !important;} 
    nav { display: none; }
    header .search-container { 
        order: 3; 
        border-radius: 5px;
        flex: 0.6;
        width: 100%;
    }
    .header-actions { order: 4; }
}
@media (min-width:1001px) {
    header {
        flex-wrap: nowrap; 
        height: 55px !important; 
        padding: 5px;
        align-items: center;
        justify-content: space-between;
    } 
    .logo-area { order: 1; font-size: 23px !important; gap: 2px !important;
    align-self: flex-start; padding: 0 !important;} 
    .logo-area img{
        width: 29px !important;
        height: 29px !important;
    }
    nav { display: block; order: 2; display: flex;
    align-items: end; }
    header .search-container { 
        order: 3; 
        border-radius: 20px;
        flex: 0.6; 
        width: 100%;
    }
    .header-actions { order: 4; }
}

/* course */
@media (min-width:300px) {
    .courses{
display: none;
    } 
}
@media (min-width:769px) {
    .courses{ 
        display: block !important; 
        margin-top:-5px !important; 
    }
}

/* sidebar*/
@media (max-width: 940px) {
    #googleToggle {
        display: block !important; 
        position: fixed;
        bottom: 20px;
        right: 20px;
        z-index: 1000;
    }

    .sidebar {
        left: 0;
        transform: translateX(-100%); 
    } 
    .sidebar.active {
        transform: translateX(0);
    }
}
@media (max-width: 399px) {
.sidebar{
    top:70px;
    height:calc(100vh - 70px) !important;
}
}
/*  main */
@media (max-width:940px) {
    main { 
        padding:0 !important;
        width: 100%;
        margin-left: 0;
        margin-top: 70px;
    }
main h1 { 
    font-size: 25px;
}
    main p { 
    font-size: 17px; 
}
}

@media (min-width:400px) {
    main {
        margin-top: 85px;
    }
}
@media (min-width:522px) {
    main {
        margin-top: 84px;
    }
} 
@media (min-width:769px){ 

      main {
        margin-top: 85px;
    }
}