body{
background:#f4f8ff;
color:#111;
}

/* COLORS */
:root {
  --blue: #2c2c2c;
  --green: #3a3a3a;
  --yellow:#e6b800;
  --primary-blue: #2c2c2c;
  --accent-green: #444444;
  --light-bg: #f8f9fa;
}

/* =========================
   NAVBAR (FIXED CLEAN VERSION)
========================= */

.gradient-navbar{
background: linear-gradient(160deg, #1f1f1f, #3b3b3b);
height:70px;
position:fixed;
top:0;
left:0;
width:100%;
z-index:1000;
padding:0 10px;
overflow:visible;
}

.gradient-navbar .container-fluid{
display:flex;
align-items:center;
}

/* LEFT SIDE */
.navbar-brand-wrap{
flex:1;
min-width:0;
display:flex;
align-items:center;
}

.navbar-brand{
display:flex;
align-items:center;
gap:8px;
margin:0;
font-size:16px;
color:#fff;
min-width:0;
}

.navbar-brand i{
flex-shrink:0;
}

.shop-name{
display:block;
max-width:160px;
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
font-size:15px;
}

/* RIGHT SIDE */
.gradient-navbar .d-flex.align-items-center{
flex-shrink:0;
}

/* PROFILE ICON */
.profile-toggle{
width:38px;
height:38px;
border-radius:10px;
display:flex;
align-items:center;
justify-content:center;
background:rgba(255,255,255,0.12);
font-size:18px;
cursor:pointer;
user-select:none;
transition:0.2s;
z-index:1055;
}

.profile-toggle:hover{
background:rgba(255,255,255,0.2);
}

/* BADGES */
.badge-green,
.bad-green{
position:absolute;
top:-5px;
right:-8px;
background:#444;
color:white;
font-size:10px;
}

/* SIDEBAR */
.sidebar-desktop{
position:fixed;
top:80px;
left:15px;
width:230px;
bottom:20px;
background: linear-gradient(160deg, #1f1f1f, #3b3b3b);
color:white;
border-radius:18px;
padding-top:20px;
overflow-y:auto;
box-shadow:0 10px 25px rgba(0,0,0,0.25);
}

.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:#4a4a4a;
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.15);
}

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

/* OFFCANVAS */
.offcanvas{
top:70px!important;
height:calc(100vh - 70px)!important;
background: linear-gradient(160deg, #1f1f1f, #3b3b3b);
z-index:2000;
}

/* 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;
}
}

/* CARDS */
.card-operations,
.card-custom{
border:none;
border-radius:18px;
box-shadow:0 8px 20px rgba(0,0,0,0.08);
background:white;
border-left:5px solid #333;
}

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

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

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

/* TABLE */
.table thead{
background:#2c2c2c;
color:white;
}

.table tbody tr:hover{
background:rgba(0,0,0,0.05);
}

/* BUTTONS */
.btn-green{
background:#2c2c2c;
color:white;
border:none;
}

.btn-green:hover{
background:#444;
}

/* PROFILE IMG */
.img-profile{
height:35px;
width:35px;
object-fit:cover;
}

/* PRODUCT */
.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);
}

/* MODAL */
.modal{
z-index:2000;
}

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

/* MOBILE NAV FIX */
@media(max-width:576px){

.shop-name{
font-size:14px;
max-width:120px;
}

.profile-toggle{
width:34px;
height:34px;
font-size:15px;
}
}