/* ===================================
   SAI'DU'A DASHBOARD CSS
=================================== */

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

body{
background:#f4f6f9;
font-family:Arial,Helvetica,sans-serif;
}

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

.sidebar{

position:fixed;

left:0;

top:0;

width:260px;

height:100vh;

background:#4bf7a6;

overflow-y:auto;

box-shadow:3px 0 10px rgba(255, 153, 1, 0.15);

z-index:999;

}

.sidebar-header{

padding:20px;

text-align:center;

border-bottom:1px solid rgba(255,255,255,.2);

}

.sidebar-header h4{

color:#fff;

font-weight:bold;

margin:0;

}

.sidebar-header small{

color:#ddd;

}

.sidebar .nav-link{

color:#fff;

padding:14px 20px;

display:block;

transition:.3s;

text-decoration:none;

}

.sidebar .nav-link:hover{

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

padding-left:28px;

}

.sidebar .nav-link.active{

background:#03e67c;

font-weight:bold;

}

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

.main-content{

margin-left:260px;
min-height:100vh;
background:#f4f6f9;

}

/* ================================
TOPBAR
================================ */

.topbar{

background:#ffffff;

padding:15px 25px;

display:flex;

justify-content:space-between;

align-items:center;

box-shadow:0 2px 10px rgba(0,0,0,.08);

position:sticky;

top:0;

z-index:100;

}

.topbar h2{

margin:0;

font-size:28px;

color:#198754;

font-weight:bold;

}

.topbar small{

color:#666;

}

.topbar-right{

display:flex;

align-items:center;

gap:20px;

}

/* Dashboard */

.container-fluid{

padding:25px;

}

h2{

color:#8decc0;

font-weight:bold;

margin-bottom:25px;

}

/* Cards */

.card{

border:none;

border-radius:15px;

transition:.3s;

}

.card:hover{

transform:translateY(-5px);

box-shadow:0 10px 20px rgba(236, 128, 4, 0.1);

}

.card-body{

padding:30px;

}

.card h5{

color:#666;

font-size:18px;

}

.card h2{

margin-top:10px;

color:#40e200;

font-weight:bold;

}

/* Mobile */

@media(max-width:768px){

.sidebar{

position:relative;

width:100%;

height:auto;

}

.main-content{

margin-left:0;

}

}

.topbar{
background:#fff;
padding:20px 25px;
margin-bottom:20px;
border-radius:10px;
}

.topbar h2{
margin:0;
font-weight:bold;
}

.topbar .fa-bell{
font-size:28px;
}

.topbar .badge{
font-size:11px;
}

/* ==========================================
PROFILE PRINT STYLE
========================================== */

@media print {

.btn,
.card-header,
.sidebar,
.navbar,
.footer {
    display: none !important;
}

.card {
    border: 1px solid #000 !important;
    box-shadow: none !important;
}

body {
    background: #fff !important;
}

img {
    max-width: 100%;
}

}

/* ==========================================
   DASHBOARD CHART FIX
========================================== */

.dashboard-chart-container {
    position: relative;
    width: 100%;
    height: 320px;
}

.dashboard-pie-container {
    position: relative;
    width: 100%;
    height: 320px;
}

.dashboard-chart-container canvas,
.dashboard-pie-container canvas {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
}

/* =====================================================
   7.4.8 — PROFESSIONAL CHART RESPONSIVE DESIGN
   ===================================================== */

.dashboard-chart-container {
    position: relative;
    width: 100%;
    height: 360px;
    min-height: 300px;
}

.dashboard-pie-container {
    position: relative;
    width: 100%;
    height: 360px;
    min-height: 300px;
}

.dashboard-chart-container canvas,
.dashboard-pie-container canvas {
    display: block;
    width: 100% !important;
    height: 100% !important;
}


/* =====================================================
   TABLET
   ===================================================== */

@media (max-width: 991.98px) {

    .dashboard-chart-container {
        height: 330px;
    }

    .dashboard-pie-container {
        height: 330px;
    }

}


/* =====================================================
   MOBILE
   ===================================================== */

@media (max-width: 575.98px) {

    .dashboard-chart-container {
        height: 280px;
        min-height: 280px;
    }

    .dashboard-pie-container {
        height: 280px;
        min-height: 280px;
    }

}