/* ===== PURPLE THEME ===== */
.light-purple-sidebar{
    background:#6f42c1;
}
.light-purple-sidebar .nav-link,
.light-purple-sidebar .sidebar-brand-text{
    color:#fff;
}
.light-purple-sidebar .nav-link:hover{
    background:rgba(255,255,255,.15);
    border-radius:.5rem;
}

/* ===== NOTIFICATION ===== */
.notification-purple{
    background:#6f42c1!important;
    color:#fff!important;
}
.unread-dot{
    background:#d50c0c;
    color:#fff;
    border-radius:50%;
    padding:0 6px;
    font-size:12px;
    margin-left:auto;
}
.badge-counter.notification-purple{
    background:#da0b0b!important;
}
.dropdown-header{
    border-left:4px solid #6f42c1!important;
}
.dropdown-item:hover{
    background:rgba(111,66,193,.1)!important;
}
.topbar .dropdown-list .dropdown-header{
    background:#6f42c1;
    border:1px solid #6f42c1;
    color:#fff;
}

/* ===== GLOBAL LOADER ===== */

/* ⭐ MODERN SOFT PAGE LOADER */
.loader-overlay,
.loader-backdrop{
    position: fixed;
    inset: 0;

    /* ⭐ NO background color at all */
    background: transparent;

    display: flex;
    align-items: center;
    justify-content: center;

    z-index: 99999;

    pointer-events: none; /* allow page visible interaction feel */
}



.spinner{
    width:60px;
    height:60px;
    border:6px solid rgba(0,0,0,.15);
    border-top:6px solid #6f42c1;
    border-radius:50%;
    animation:spin .7s linear infinite;
    box-shadow:0 0 30px rgba(111,66,193,.45);
}

@keyframes spin{
    to{ transform:rotate(360deg); }
}


/* ⭐ FINAL GLOBAL LOADER FIX */
#page-loader,
#page-loader .loader-backdrop,
.loader-overlay,
.loader-backdrop{
    background: rgba(255, 255, 255, 0.6);   /* more transparent */
}


/* ================= MATERIAL SIDEBAR ================= */

/* PRELOAD COLLAPSED STATE */
.sidebar-pre-collapsed .material-sidebar{
    width:78px !important;
}
.sidebar-pre-collapsed .material-sidebar .brand-text,
.sidebar-pre-collapsed .material-sidebar .menu-link span{
    display:none !important;
}
.sidebar-pre-collapsed #content-wrapper{
    margin-left:78px !important;
}

/* ⭐⭐⭐ ANDROID WEBVIEW SAFE SIDEBAR ⭐⭐⭐ */
.material-sidebar{
    position:fixed;
    top:0;
    bottom:0;                 /* ⭐ FIXED vh BUG */
    left:0;
    width:260px;
    background:#ffffff;
    border-right:1px solid #f1f3f4;
    box-shadow:0 0 0 rgba(0,0,0,0.05);   /* ⭐ safer shadow */
    transition:all .25s cubic-bezier(.4,0,.2,1);
    z-index:1000;
    display:flex;
    flex-direction:column;

    /* ⭐ GPU LAYER FIX */
    transform:translateZ(0);
    backface-visibility:hidden;
    will-change:transform;
}


/* BRAND */
.sidebar-brand img{
    height:36px;
}

.sidebar-brand{
    height:64px;
    display:flex;
    align-items:center;
    gap:14px;
    padding:12px 57px;
    font-size:18px;
    font-weight:600;
    color:#5e35b1;
}

/* MENU */
.sidebar-menu{
    list-style:none;
    padding:8px;
    margin:0;
}
.menu-item{
    margin:6px 8px;
}
.menu-link{
    display:flex;
    align-items:center;
    gap:18px;
    height:46px;
    padding:0 16px;
    border-radius:12px;
    color:#5f6368;
    font-size:14.5px;
    font-weight:500;
    text-decoration:none;
    transition:.18s;
}
.menu-link i{
    width:24px;
    font-size:20px;
    text-align:center;
    color:#8a8f98;
}

/* HOVER */
.menu-link:hover{
    background:rgba(94,53,177,.08);
    color:#5e35b1;
}
.menu-link:hover i{
    color:#5e35b1;
}

/* ACTIVE */
.menu-item.active .menu-link{
    background:rgba(94,53,177,.15);
    color:#5e35b1;
    box-shadow:0 4px 10px rgba(94,53,177,.18);
}

/* COLLAPSED */
.material-sidebar.collapsed{
    width:78px;
}
.material-sidebar.collapsed .brand-text,
.material-sidebar.collapsed .menu-link span{
    display:none;
}

/* CONTENT PUSH */
#content-wrapper{
    margin-left:260px;
    min-height:100%;
    transition:margin-left .25s cubic-bezier(.4,0,.2,1);
}
body.sidebar-collapsed #content-wrapper{
    margin-left:78px;
}

/* ===== MOBILE ===== */
@media(max-width:768px){

    #content-wrapper{
        margin-left:0 !important;
    }

    .material-sidebar{
        left:-260px;
    }

    .material-sidebar.mobile-open{
        left:0;
    }
}

/* ===== TOGGLE BUTTON ===== */
.sidebar-toggle-btn{
    position:fixed;
    top:14px;
    left:14px;
    height:42px;
    width:42px;
    border-radius:12px;
    border:none;
    background:#5e35b1;
    color:#fff;
    box-shadow:0 4px 12px rgba(0,0,0,.25);
    cursor:pointer;
    z-index:1100;
}

/* ===== OVERLAY ===== */
.sidebar-overlay{
    position:fixed;
    inset:0;
    background:rgba(0,0,0,.40);
    opacity:0;
    visibility:hidden;
    transition:.25s;
    z-index:900;

    backdrop-filter:none;     /* ⭐ webview safety */
}
.sidebar-overlay.show{
    opacity:1;
    visibility:visible;
}


/* ⭐ center logo */
.material-sidebar.collapsed .sidebar-brand{
    justify-content:center;
    padding:0;
}

/* ⭐ make logo small */
.material-sidebar.collapsed .sidebar-brand img{
    height:26px;
    margin:0;
}

.sidebar-pre-collapsed .material-sidebar .sidebar-brand{
    justify-content:center;
    padding:0 !important;
}

.sidebar-pre-collapsed .material-sidebar .sidebar-brand img{
    height:26px !important;
}



/* ===== STICKY FOOTER FIX ===== */
html,body{
    height:100%;
}
#wrapper{
    min-height:100%;
}
#content{
    min-height:calc(100vh - 60px);
}
.sticky-footer{
    width:100%;
}