/* ===========================
   MBOACOIN SELLER CENTER
=========================== */

:root{

    --primary:#0F9D58;
    --primary-dark:#087443;
    --background:#F5F7FA;
    --surface:#FFFFFF;
    --text:#1F2937;
    --border:#E5E7EB;
    --shadow:0 12px 35px rgba(0,0,0,.08);

}

body{

    background:var(--background);

}


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

.dashboard-sidebar{

    background:#111827;

    min-height:100vh;

    color:white;

    padding:30px;

}

.sidebar-logo{

    text-align:center;

    margin-bottom:35px;

}

.sidebar-logo h3{

    font-weight:700;

    margin-bottom:0;

}

.sidebar-logo small{

    color:#9CA3AF;

}

.sidebar-user{

    text-align:center;

    margin-bottom:40px;

}

.avatar{

    width:85px;

    height:85px;

    margin:auto;

    border-radius:50%;

    background:var(--primary);

    display:flex;

    justify-content:center;

    align-items:center;

    font-size:38px;

    margin-bottom:15px;

}

.sidebar-menu{

    display:flex;

    flex-direction:column;

    gap:8px;

}

.sidebar-menu a{

    color:#D1D5DB;

    text-decoration:none;

    padding:14px 18px;

    border-radius:12px;

    transition:.25s;

    font-weight:500;

}

.sidebar-menu a i{

    width:28px;

}

.sidebar-menu a:hover{

    background:var(--primary);

    color:white;

}

.sidebar-menu a.active{

    background:var(--primary);

    color:white;

}

.sidebar-footer{

    margin-top:45px;

}


/* ===========================
CONTENT
=========================== */

.dashboard-content{

    background:#F5F7FA;

    padding:40px;

}


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

.card{

    border:none !important;

    border-radius:18px;

    box-shadow:var(--shadow);

}

.card:hover{

    transform:translateY(-5px);

    transition:.25s;

}


/* ===========================
STATS
=========================== */

.display-5{

    font-size:42px;

}

.card h2{

    font-size:34px;

    font-weight:700;

}

.card p{

    color:#6B7280;

}


/* ===========================
GRAPH
=========================== */

canvas{

    width:100% !important;

}


/* ===========================
BUTTONS
=========================== */

.btn-success{

    background:var(--primary);

    border:none;

}

.btn-success:hover{

    background:var(--primary-dark);

}

.btn-outline-success{

    border-color:var(--primary);

    color:var(--primary);

}

.btn-outline-success:hover{

    background:var(--primary);

}


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

@media(max-width:992px){

.dashboard-sidebar{

    min-height:auto;

}

.dashboard-content{

    padding:20px;

}

}

/* =====================================================
   STATS CARDS
===================================================== */

.stats-card{

    overflow:hidden;

    position:relative;

    border-radius:18px;

}

.stats-card::before{

    content:"";

    position:absolute;

    left:0;

    top:0;

    width:5px;

    height:100%;

    background:linear-gradient(
        180deg,
        #198754,
        #20c997
    );

}

.stats-card .card-body{

    padding:1.5rem;

}

.stats-icon{

    width:64px;

    height:64px;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    background:rgba(25,135,84,.12);

    color:#198754;

    font-size:1.5rem;

}

.stats-card h2{

    font-size:2rem;

    margin-bottom:0;

    font-weight:700;

}

.stats-card small{

    font-size:.85rem;

}

.stats-card:hover .stats-icon{

    transform:scale(1.08);

    transition:.25s;

}