/* ================= Sidebar ================= */

.sidebar{
    position:fixed;
    left:0;
    top:0;
    width:260px;
    height:100vh;
    background:#0f172a;
    color:#fff;
    display:flex;
    flex-direction:column;
    z-index:1000;
    border-right:1px solid rgba(255,255,255,0.05);
}

.logo{
    height:75px;
    display:flex;
    align-items:center;
    gap:12px;
    padding:0 24px;
    font-size:24px;
    font-weight:700;
}

.logo i{
    color:#4f46e5;
}

.menu{
    list-style:none;
    padding:18px 0;
    margin:0;
    flex:1;
}

.menu li{
    margin:4px 14px;
}

.menu li a{
    color:#94a3b8;
    text-decoration:none;
    display:flex;
    align-items:center;
    gap:14px;
    padding:10px 16px;
    border-radius:10px;
    transition:.2s;
    font-weight:600;
    font-size:0.88rem;
}

.menu li a:hover{
    background:rgba(255,255,255,0.06);
    color:#fff;
}

.menu li a.active{
    background:#4f46e5 !important;
    color:#fff !important;
}

.logout{
    padding:18px;
}

.logout a{
    display:flex;
    gap:12px;
    color:#ef4444;
    text-decoration:none;
    font-size:0.8rem;
    font-weight:600;
}

/* ================= Navbar ================= */

.top-navbar{
    height:70px;
    background:#fff;
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:0 24px;
    border-bottom:1px solid #f1f5f9;
}

.menu-btn{

    border:none;

    background:none;

    font-size:28px;

}

.search-box{

    width:380px;

    background:#f5f7fb;

    border-radius:12px;

    display:flex;

    align-items:center;

    padding:0 16px;

}

.search-box input{

    width:100%;

    border:none;

    background:transparent;

    padding:12px;

    outline:none;

}

.navbar-right{

    display:flex;

    align-items:center;

    gap:18px;

}

.icon-btn{

    width:42px;

    height:42px;

    border:none;

    background:#f3f4f6;

    border-radius:12px;

    position:relative;

}

.badge{

    position:absolute;

    top:-4px;

    right:-4px;

    width:18px;

    height:18px;

    background:red;

    color:#fff;

    border-radius:50%;

    font-size:10px;

    display:flex;

    align-items:center;

    justify-content:center;

}

.profile{

    display:flex;

    align-items:center;

    gap:12px;

}

.profile img{

    width:46px;

    height:46px;

    border-radius:50%;

}
.main-content{

    margin-left:260px;

    width:calc(100% - 260px);

}

.content{

    padding:30px;

}

/* ================= Hero Banner ================= */

.hero-banner{

    background:linear-gradient(135deg,#2563EB,#4F46E5);

    border-radius:24px;

    padding:45px;

    color:#fff;

    overflow:hidden;

    position:relative;

}

.hero-banner::after{

    content:"";

    position:absolute;

    width:350px;

    height:350px;

    right:-100px;

    top:-100px;

    border-radius:50%;

    background:rgba(255,255,255,.08);

}

.hero-badge{

    display:inline-block;

    background:rgba(255,255,255,.15);

    padding:8px 16px;

    border-radius:30px;

    font-size:14px;

    font-weight:500;

}

.hero-title{

    font-size:42px;

    font-weight:700;

}

.hero-subtitle{

    font-size:17px;

    opacity:.9;

    max-width:620px;

    line-height:1.7;

}

.hero-actions .btn{

    border-radius:14px;

    padding:12px 24px;

    font-weight:600;

}

.hero-stats{

    display:flex;

    justify-content:end;

    gap:20px;

}

.stat-item{

    width:150px;

    background:rgba(255,255,255,.15);

    backdrop-filter:blur(10px);

    border-radius:20px;

    padding:22px;

    text-align:center;

}

.stat-item h3{

    font-size:34px;

    font-weight:700;

    margin-bottom:6px;

}

.stat-item span{

    font-size:14px;

    opacity:.9;

}

.stats-card{

    background:#fff;

    border-radius:20px;

    padding:24px;

    display:flex;

    align-items:center;

    gap:18px;

    box-shadow:0 8px 25px rgba(15,23,42,.06);

    transition:.3s;

    height:100%;

}

.stats-card:hover{

    transform:translateY(-5px);

    box-shadow:0 15px 35px rgba(37,99,235,.15);

}

.stats-icon{

    width:70px;

    height:70px;

    border-radius:18px;

    display:flex;

    justify-content:center;

    align-items:center;

    font-size:28px;

}

.blue{

    background:#EEF4FF;

    color:#2563EB;

}

.green{

    background:#ECFDF5;

    color:#16A34A;

}

.purple{

    background:#F3E8FF;

    color:#9333EA;

}

.yellow{

    background:#FEF3C7;

    color:#F59E0B;

}

.stats-content{

    flex:1;

}

.stats-content span{

    color:#6B7280;

    font-size:14px;

}

.stats-content h2{

    font-size:38px;

    font-weight:700;

    margin:8px 0;

}

.dashboard-card{
    background:#fff;
    border:1px solid #e2e8f0;
    border-radius:16px;
    padding:24px;
    box-shadow:0 1px 3px 0 rgba(0, 0, 0, 0.05), 0 1px 2px -1px rgba(0, 0, 0, 0.05);
}

.dashboard-card h5{
    font-weight:700;
    color:#1e293b;
}

canvas{

    width:100% !important;

}
.activity-item{

    display:flex;

    gap:16px;

    margin-bottom:25px;

}

.activity-dot{

    width:14px;

    height:14px;

    border-radius:50%;

    margin-top:8px;

}

.table td{

    vertical-align:middle;

}

.progress{
    height:8px;
    border-radius:20px;
}

.progress-bar{
    border-radius:20px;
}
.footer{
    background:#fff;
    padding:20px 30px;
    border-top:1px solid #E5E7EB;
    color:#6B7280;
    margin-top:30px;
}

/* ================= Tables Custom Premium Look ================= */
.table{
    --bs-table-bg: transparent;
    --bs-table-hover-bg: #f8fafc;
    border-collapse: separate;
    border-spacing: 0;
}

.table th {
    color:#64748b !important;
    font-size:0.75rem !important;
    font-weight:700 !important;
    text-transform:uppercase !important;
    letter-spacing:0.5px !important;
    padding:12px 16px !important;
    border-bottom:2px solid #e2e8f0 !important;
    background-color:#fff !important;
}

.table td {
    padding:14px 16px !important;
    font-size:0.85rem !important;
    color:#334155 !important;
    border-bottom:1px solid #e2e8f0 !important;
    vertical-align: middle !important;
}

.table tbody tr:hover {
    background-color:#f8fafc !important;
}

/* ================= Mobile Responsiveness Styles ================= */
@media (max-width: 991.98px) {
    /* 1. Sidebar transition and default hidden state */
    .sidebar {
        left: -260px !important;
        transition: left 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
        box-shadow: 5px 0 25px rgba(0, 0, 0, 0.15) !important;
    }
    
    /* Show sidebar when class is applied */
    .sidebar.mobile-show {
        left: 0 !important;
    }
    
    /* 2. Main content takes full screen width */
    .main-content {
        margin-left: 0 !important;
        width: 100% !important;
    }
    
    /* 3. Top Navbar search box hidden on mobile */
    .search-box {
        display: none !important;
    }
    
    /* 4. Adjust content padding */
    .content {
        padding: 15px !important;
    }
    
    /* 5. Adjust navbar padding */
    .top-navbar {
        padding: 0 15px !important;
    }
}

@media (max-width: 575.98px) {
    /* Navbar actions styling on extra small screens */
    .navbar-right {
        gap: 8px !important;
    }
    .navbar-right .btn {
        padding: 6px 10px !important;
        font-size: 0.72rem !important;
    }
    .navbar-right .profile {
        padding: 2px !important;
    }
    .navbar-right .profile div:last-child {
        display: none !important; /* Hide name/developer text, show only avatar */
    }
}