body{
background:#f4f8ff;
}

/* COLORS */

:root {
  --blue: #198754;
  --green: #20c997;
  --yellow:#e6b800;
  --primary-blue: #198754;
  --accent-green: #20c997;
  --light-bg: #f8f9fa;
}

/* NAVBAR */

.gradient-navbar{
  background: linear-gradient(160deg, #198754, #20c997);
height:70px;
position:fixed;
top:0;
left:0;
width:100%;
z-index:1000;
}

.nav-icon{
font-size:22px;
color:white;
cursor:pointer;
}

.badge-green{
position:absolute;
top:-5px;
right:-8px;
background:var(--green);
color:white;
font-size:10px;
}

.bad-green{
top:-5px;
right:-8px;
background:var(--green);
color:white;
font-size:10px;
}

.bg-green {
  background-color: var(--green);
  color: #fff;
}

/* PROFILE */

.img-profile{
height:35px;
width:35px;
object-fit:cover;
}

/* SIDEBAR */

.sidebar-desktop{
position:fixed;
top:80px;
left:15px;
width:230px;
bottom:20px;
background: linear-gradient(160deg, #198754, #20c997);
color:white;
border-radius:18px;
padding-top:20px;
overflow-y:auto;
box-shadow:0 10px 25px rgba(0,0,0,0.15);
}

.sidebar-link{
color:white;
text-decoration:none;
padding:12px 20px;
display:block;
margin:6px 15px;
border-radius:12px;
transition:.3s;
font-weight:500;
}

.sidebar-link i{
font-size:18px;
width:28px;
text-align:center;
margin-right:8px;
}

.sidebar-link:hover{
background:var(--green);
color:white;
transform:translateX(6px);
box-shadow:0 4px 10px rgba(0,0,0,0.15);
}

.sidebar-link.active{
background:rgba(255,255,255,0.2);
}

@media(max-width:991px){
.sidebar-desktop{
display:none;
}
}

/* MOBILE SIDEBAR */

.offcanvas{
top:70px!important;
height:calc(100vh - 70px)!important;
background: linear-gradient(160deg, #198754, #20c997);
}

.text-green {
color: #20c997;
}

.text-green:hover{
color:white;
}

.stat-text {
font-size:22px;
color:#198754;
}

.offcanvas .sidebar-link{
margin:8px 5px;
}

.stat-icon {
font-size:30px;
color:#198754;
}

.sta-icon {
font-size:20px;
color:#198754;
}

.card-operations {
border:none;
border-radius:18px;
box-shadow:0 8px 20px rgba(0,0,0,0.08);
border-left: 5px solid var(--green);
position:relative;
z-index:1;
}

.card-value {
font-size: 1rem;
font-weight: bold;
color:#198754;
}


.product-card{

cursor:pointer;

border-radius:15px;

transition:.2s;

}

.product-card:hover{

transform:scale(1.05);

box-shadow:0 6px 20px rgba(0,0,0,0.15);

}

/* MAIN CONTENT */

.main-content{
margin-top:90px;
margin-left:260px;
margin-right:20px;
}

@media(max-width:991px){
.main-content{
margin-left:15px;
margin-right:15px;
}
}

/* CARD */

.card-custom{
border:none;
border-radius:18px;
box-shadow:0 8px 20px rgba(0,0,0,0.08);
border-left:5px solid var(--green);
}

.card-amount{
font-size: 2.2rem;
font-weight: 600;
}

/* Phones */

@media (max-width: 576px){
.card-amount{
font-size: 1.2rem;
}
}

/* TABLE */

.table thead{
background:var(--blue);
color:white;
}

.table tbody tr:hover{
background:rgba(32,201,151,0.15);
}

/* BUTTON */

.btn-green{
background:var(--green);
color:white;
border:none;
}

.btn-green:hover{
background:#1aa179;
}

/* FIX MODAL OVER NAVBAR */

.modal{
z-index:2000;
}

.modal-backdrop{
z-index:1900;
}