:root{

--primary:#16a34a;
--dark:#0f172a;
--light:#f4f7fb;
--white:#ffffff;
--border:#e5e7eb;

--radius:18px;

}

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

body{
    background:var(--light);
    font-family:Arial,sans-serif;
    overflow-x:hidden;
}
table th,
table td{
    border-bottom:1px solid #eee;
}

canvas{
    width:100% !important;
    height:350px !important;
}
/* SIDEBAR */

.sidebar{

    width:260px;
    height:100vh;

    position:fixed;
    left:0;
    top:0;

    background:var(--dark);
    color:#fff;

    padding:20px;

    overflow-y:auto;
}

.sidebar h2{
    margin-bottom:30px;
}

.sidebar a{

    display:flex;
    align-items:center;

    gap:10px;

    color:#fff;
    text-decoration:none;

    padding:12px;
    border-radius:12px;

    margin-bottom:10px;

    transition:0.3s;
}

.sidebar a:hover{
    background:rgba(255,255,255,0.1);
}

/* MAIN */

.main{

    margin-left:260px;
    padding:20px;
}

/* NAVBAR */

.navbar-box{

    background:#fff;
    padding:15px 20px;

    border-radius:18px;

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

    margin-bottom:20px;
}

/* CARDS */

.card-box{

    background:#fff;
    padding:20px;

    border-radius:18px;

    box-shadow:0 5px 20px rgba(0,0,0,0.05);

}

/* STATS */

.stat-card{

    background:#fff;

    border-radius:18px;

    padding:20px;

    box-shadow:0 5px 20px rgba(0,0,0,0.05);

}

.stat-card h3{
    margin-top:10px;
}

/* MOBILE */

.mobile-nav{
    display:none;
}

@media(max-width:768px){

    .sidebar{
        display:none;
    }

    .main{
        margin-left:0;
        padding-bottom:90px;
    }

    .mobile-nav{

        display:flex;

        position:fixed;
        bottom:0;
        left:0;

        width:100%;

        background:#fff;

        justify-content:space-around;

        padding:10px;

        box-shadow:0 -5px 20px rgba(0,0,0,0.1);

    }

    .mobile-nav a{
        color:#222;
        text-decoration:none;
        text-align:center;
    }

}