/* ================= RESET ================= */
*{
    margin:0;
    padding:0;
    box-sizing:border-box;
    font-family:'Poppins',sans-serif;
}

html, body{
    width:100%;
    overflow-x:hidden;
    background:#f4f6f9;
}

/* ================= SIDEBAR ================= */
.sidebar{
    position:fixed;
    top:0;
    left:0;
    width:240px;
    height:100vh;
    background:#1f2937;
    overflow-y:auto;
    z-index:999;
    transition:0.3s;
}

/* Sidebar hide for mobile */
.sidebar.show{
    left:0;
}

.sidebar .logo{
    padding:20px;
    color:#fff;
    text-align:center;
    font-size:22px;
    font-weight:bold;
    border-bottom:1px solid rgba(255,255,255,.1);
}

/* MENU */
.menu{
    list-style:none;
    padding:15px;
}

.menu li{
    margin-bottom:8px;
}

.menu li a{
    display:flex;
    align-items:center;
    gap:12px;
    color:#d1d5db;
    text-decoration:none;
    padding:12px;
    border-radius:8px;
    transition:.3s;
}

.menu li a:hover,
.menu li a.active{
    background:#2563eb;
    color:#fff;
}

/* ================= MAIN ================= */
.main{
    margin-left:240px;
    min-height:100vh;
    transition:0.3s;
}

/* ================= TOPBAR ================= */
.topbar{
    position:sticky;
    top:0;
    background:#fff;
    height:65px;
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:0 20px;
    box-shadow:0 2px 10px rgba(0,0,0,.08);
    z-index:100;
}

/* ================= CONTENT ================= */
.content{
    padding:20px;
}

/* ================= DASHBOARD CARD ================= */
.dashboard-card{
    border:none;
    border-radius:12px;
    text-align:center;
    box-shadow:0 2px 10px rgba(0,0,0,.08);
    transition:.3s;
    background:#fff;
}

.dashboard-card:hover{
    transform:translateY(-5px);
}

.card-icon{
    font-size:35px;
    margin-bottom:10px;
}

/* ================= TABLE ================= */
.table{
    margin-bottom:0;
}

.table thead{
    background:#2563eb;
    color:#fff;
}

/* ================= BOOTSTRAP ROW FIX ================= */
.row{
    display:flex;
    flex-wrap:wrap;
}

/* ================= RESPONSIVE GRID FIX ================= */
.col-12, .col-lg-12,
.col-lg-6{
    padding:10px;
}

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

    /* SIDEBAR HIDE */
    .sidebar{
        left:-240px;
        transition:0.3s;
    }

    .sidebar.show{
        left:0;
    }

    /* MAIN FULL WIDTH */
    .main{
        margin-left:0;
        width:100%;
    }

    /* TOPBAR */
    .topbar{
        padding:0 15px;
        flex-direction:row;
    }

    /* GRID FIX FOR MOBILE */
    .col-lg-6,
    .col-lg-12{
        width:100% !important;
    }

    .container-fluid{
        padding:10px;
    }

}

/* ================= OVERLAY ================= */
.overlay{
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background:rgba(0,0,0,0.5);
    display:none;
    z-index:998;
}

.overlay.active{
    display:block;
}