/* ==========================
   GENERAL
========================== */

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

body{
    background:#f4f6f9;
    font-family:Segoe UI, sans-serif;
}


/* ==========================
   LAYOUT
========================== */

.wrapper{
    display:flex;
}


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

.sidebar{
    width:250px;
    min-height:100vh;
    background:#0F172A;
    color:white;
    position:fixed;
}

.sidebar h3{
    text-align:center;
    padding:25px 10px;
    border-bottom:1px solid rgba(255,255,255,0.1);
}

.sidebar ul{
    list-style:none;
    padding-left:0;
}

.sidebar ul li{
    border-bottom:1px solid rgba(255,255,255,0.05);
}

.sidebar ul li a{
    color:#d1d5db;
    text-decoration:none;
    display:block;
    padding:16px 25px;
    transition:0.3s;
}

.sidebar ul li a:hover{
    background:#2563EB;
    color:white;
}

.sidebar i{
    width:25px;
}


/* ==========================
   MAIN AREA
========================== */

.main{
    margin-left:250px;
    width:100%;
}


/* ==========================
   TOP BAR
========================== */

.topbar{
    background:white;
    padding:18px 30px;
    box-shadow:0px 3px 10px rgba(0,0,0,0.1);
}

.topbar h2{
    color:#1e293b;
}


/* ==========================
   KPI CARDS
========================== */

.kpi-card{
    border:none;
    border-radius:15px;
    padding:20px;
    box-shadow:0 3px 15px rgba(0,0,0,0.08);
    transition:0.3s;
    background:white;
}

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

.kpi-card h5{
    color:#64748B;
    font-size:15px;
}

.kpi-card h2{
    color:#0F172A;
    margin-top:10px;
    font-weight:bold;
}


/* ==========================
   NORMAL CARDS
========================== */

.card{
    border:none;
    border-radius:15px;
    box-shadow:0px 3px 15px rgba(0,0,0,0.08);
}


/* ==========================
   TABLE
========================== */

.table{
    margin-top:15px;
}

.table thead{
    background:#2563EB;
    color:white;
}


/* ==========================
   SCROLLBAR
========================== */

::-webkit-scrollbar{
    width:8px;
}

::-webkit-scrollbar-thumb{
    background:#2563EB;
    border-radius:10px;
}


/* ==========================
   RESPONSIVE
========================== */

@media(max-width:768px){

    .sidebar{
        width:100%;
        position:relative;
        min-height:auto;
    }

    .main{
        margin-left:0;
    }

}