*{
margin:0;
padding:0;
box-sizing:border-box;
font-family:'Poppins',sans-serif;
}

body{

background:#0F1115;
color:#fff;
overflow-x:hidden;

}

.layout{
display:flex;
height:100vh;
}

/* Sidebar */

.sidebar{

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

width:260px;
height:100vh;

display:flex;
flex-direction:column;

overflow-y:auto;
overflow-x:hidden;

-webkit-overflow-scrolling:touch;

}

.logo{

padding:28px;

text-align:center;

border-bottom:1px solid rgba(255,215,0,.08);

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

backdrop-filter:blur(10px);

}

.logo h2{
color:#FFD700;
font-size:28px;
}

.sidebar nav{
display:flex;
flex-direction:column;
padding:20px;
gap:8px;
}

.sidebar nav a{
text-decoration:none;
color:#ddd;
padding:15px 18px;
border-radius:12px;
transition:.3s;
font-size:15px;
font-weight:500;
}

.sidebar nav a:hover{
background:#FFD700;
color:#000;
transform:translateX(5px);
}

.sidebar nav a.active{
background:#FFD700;
color:#000;
}

/* Main */

.main{

flex:1;

display:flex;

flex-direction:column;

overflow-x:hidden;

overflow-y:auto;

min-width:0;

}

/* Top Bar */

.topbar{
height:80px;
display:flex;
justify-content:space-between;
align-items:center;
padding:0 35px;
background:#181B22;
border-bottom:1px solid rgba(255,215,0,.1);
}

.topbar h1{
font-size:28px;
font-weight:600;
}

.profile{
background:#FFD700;
color:#000;
padding:12px 20px;
border-radius:30px;
font-weight:bold;
cursor:pointer;
}

/* Content */

.content{

padding:30px;

width:100%;

max-width:100%;

overflow-x:hidden;

}

/* Dashboard Cards */

.cards{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
gap:20px;
margin-bottom:30px;
}

.card{

position:relative;

overflow:hidden;

background:linear-gradient(145deg,#1c212b,#15191f);

padding:28px;

border-radius:20px;

border:1px solid rgba(255,255,255,.08);

transition:.35s;

cursor:pointer;

box-shadow:0 10px 30px rgba(0,0,0,.25);

}

.card:hover{

transform:translateY(-8px);

box-shadow:0 20px 45px rgba(0,0,0,.4);

border-color:#FFD700;

}

.card h3{
font-size:16px;
color:#bbb;
margin-bottom:15px;
}

.card h1{
font-size:34px;
color:#FFD700;
}

/* Panels */

.panel{
background:#1E222B;
padding:25px;
border-radius:18px;
border:1px solid rgba(255,215,0,.08);
margin-bottom:25px;
}

.panel h2{
margin-bottom:20px;
color:#FFD700;
}

/* Scrollbar */

::-webkit-scrollbar{
width:5px;
}

::-webkit-scrollbar-thumb{
background:#c9a300;
border-radius:999px;
}

::-webkit-scrollbar-thumb:hover{
background:#FFD700;
}

::-webkit-scrollbar-track{
background:transparent;
}

/* Mobile */

@media(max-width:900px){

.sidebar{
width:80px;
}

.logo h2{
font-size:16px;
}

.sidebar nav a{
text-align:center;
padding:15px 10px;
font-size:12px;
}

.topbar{

height:70px;

padding:0 16px;

}

.topbar h1{

font-size:20px;

white-space:nowrap;

overflow:hidden;

text-overflow:ellipsis;

}

.profile{

display:none;

}

.notification{

width:40px;

height:40px;

font-size:20px;

}

.content{

padding:16px;

}

}

.sidebar-menu{

display:flex;
flex-direction:column;

height:calc(100vh - 90px);

overflow-y:auto;
overflow-x:hidden;

-webkit-overflow-scrolling:touch;

}

.menu-title{

font-size:11px;

letter-spacing:2px;

color:#777;

font-weight:600;

margin:25px 20px 10px;

text-transform:uppercase;

}

.sidebar-menu a{

display:flex;

align-items:center;

gap:12px;

padding:15px 18px;

margin:6px 12px;

border-radius:14px;

text-decoration:none;

color:#ddd;

transition:.25s ease;

font-weight:500;

font-size:15px;

}

.sidebar-menu a:hover{

background:#FFD700;

color:#000;

transform:translateX(6px);

box-shadow:0 10px 20px rgba(255,215,0,.25);

}

.sidebar-menu .active{

background:#FFD700;

color:#000;

font-weight:700;

box-shadow:0 10px 25px rgba(255,215,0,.30);

}

.sidebar-bottom{

margin-top:auto;

padding:20px 0;

flex-shrink:0;

}

.logout-btn{

background:#b00020 !important;

color:white !important;

}

.logout-btn:hover{

background:#ff2b2b !important;

transform:none !important;

}

.recent-table{

width:100%;

border-collapse:collapse;

margin-top:20px;

}

.recent-table th{

background:#FFD700;

color:black;

padding:15px;

text-align:left;

}

.recent-table td{

padding:15px;

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

}

.recent-table tr:hover{

background:#252932;

}

.card::before{

content:"";

position:absolute;

top:0;

left:0;

width:5px;

height:100%;

background:#FFD700;

}

.card:nth-child(2)::before{

background:#3498DB;

}

.card:nth-child(3)::before{

background:#27AE60;

}

.card:nth-child(4)::before{

background:#9B59B6;

}

.card:nth-child(5)::before{

background:#E74C3C;

}

.card h3{

font-size:15px;

color:#bbb;

margin-bottom:15px;

font-weight:500;

}

.card h1{

font-size:38px;

font-weight:700;

color:white;

}

.menu-btn{

display:none;

background:none;

border:none;

color:white;

font-size:28px;

cursor:pointer;

margin-right:20px;

}

@media(max-width:900px){

.menu-btn{

display:block;

}

.sidebar{

position:fixed;

left:-280px;

top:0;

height:100%;

z-index:999;

transition:.3s;

}

.sidebar.show{

left:0;

}

.main{

width:100%;

}

}

.topbar-right{

display:flex;

align-items:center;

gap:20px;

}

.live-time{

color:#FFD700;

font-weight:600;

font-size:15px;

background:#1E222B;

padding:10px 18px;

border-radius:12px;

border:1px solid rgba(255,215,0,.2);

}

@media(max-width:900px){

.live-time{

display:none;

}

}

.notification{

position:relative;

width:45px;

height:45px;

border-radius:50%;

background:#1E222B;

display:flex;

align-items:center;

justify-content:center;

font-size:22px;

cursor:pointer;

border:1px solid rgba(255,215,0,.15);

}

.notification span{

position:absolute;

top:-5px;

right:-5px;

background:#E74C3C;

color:white;

width:22px;

height:22px;

border-radius:50%;

display:flex;

align-items:center;

justify-content:center;

font-size:11px;

font-weight:bold;

}

.quick-actions-v2{

display:flex;

gap:15px;

flex-wrap:wrap;

margin-bottom:30px;

}

.quick-actions-v2 button{

background:#FFD700;

color:black;

border:none;

padding:14px 22px;

border-radius:12px;

font-weight:600;

cursor:pointer;

transition:.3s;

}

.quick-actions-v2 button:hover{

transform:translateY(-4px);

box-shadow:0 10px 20px rgba(0,0,0,.3);

}

@media(max-width:768px){

.quick-actions-v2{

display:grid;

grid-template-columns:repeat(2,1fr);

}

.quick-actions-v2 button{

width:100%;

}

}

.search-box{

width:100%;

padding:15px;

border:none;

border-radius:12px;

background:#2A2F3A;

color:white;

font-size:16px;

margin-top:15px;

}

.gold-btn{

background:#FFD700;

color:black;

padding:14px 24px;

border:none;

border-radius:12px;

font-weight:600;

cursor:pointer;

transition:.3s;

}

.gold-btn:hover{

transform:translateY(-3px);

}

#productList{

display:grid;

grid-template-columns:repeat(auto-fill,minmax(320px,1fr));

gap:20px;

margin-top:25px;

}

@media(max-width:768px){

#productList{

grid-template-columns:1fr;

}

}

.product-grid{

display:grid;

grid-template-columns:repeat(auto-fill,minmax(320px,1fr));

gap:25px;

margin-top:25px;

}

.product-card{

background:#1d212b;

border-radius:18px;

padding:20px;

border:1px solid rgba(255,255,255,.08);

transition:.3s;

}

.product-card:hover{

transform:translateY(-6px);

border-color:#FFD700;

}

.product-card img{

width:100%;

height:220px;

object-fit:cover;

border-radius:12px;

margin-bottom:15px;

}

.product-card h3{

margin-bottom:10px;

color:white;

}

.product-card h4{

color:#FFD700;

margin-bottom:10px;

}

.product-actions{

display:flex;

flex-wrap:wrap;

gap:10px;

margin-top:15px;

}

.product-actions button{

flex:1;

padding:10px;

border:none;

border-radius:10px;

cursor:pointer;

font-weight:bold;

}

/* ===== Welcome Card ===== */

.welcome-card{

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

padding:35px;

margin-bottom:30px;

background:linear-gradient(
135deg,
#1e222b,
#16191f
);

border-radius:22px;

border:1px solid rgba(255,215,0,.12);

}

.welcome-small{

color:#FFD700;

font-size:14px;

letter-spacing:2px;

text-transform:uppercase;

margin-bottom:10px;

}

.welcome-card h1{

font-size:42px;

margin-bottom:10px;

}

.welcome-text{

color:#aaa;

max-width:600px;

line-height:1.8;

}

.welcome-buttons{

display:flex;

gap:15px;

}

.dark-btn{

background:#2b313d;

color:white;

padding:14px 24px;

border:none;

border-radius:12px;

cursor:pointer;

font-weight:600;

transition:.3s;

}

.dark-btn:hover{

background:#3a4252;

transform:translateY(-3px);

}

@media(max-width:768px){

.welcome-card{

flex-direction:column;

align-items:flex-start;

gap:20px;

}

.welcome-card h1{

font-size:30px;

}

.welcome-buttons{

width:100%;

display:grid;

grid-template-columns:1fr 1fr;

}

}

.quick-dashboard{

display:grid;

grid-template-columns:repeat(auto-fit,minmax(220px,1fr));

gap:20px;

margin-top:20px;

}

.low-stock-item{

display:flex;

justify-content:space-between;

align-items:center;

padding:18px;

margin-top:12px;

background:#252932;

border-radius:12px;

transition:.3s;

}

.low-stock-item:hover{

background:#303746;

}

.low-stock-item span:last-child{

color:#FFD700;

font-weight:bold;

}

.page-header{

display:flex;

justify-content:space-between;

align-items:center;

margin-bottom:25px;

}

.page-small-title{

color:#FFD700;

font-size:13px;

letter-spacing:2px;

margin-bottom:8px;

}

.filter-row{

display:grid;

grid-template-columns:1fr 1fr;

gap:15px;

margin:20px 0;

}

@media(max-width:768px){

.page-header{

flex-direction:column;

align-items:flex-start;

gap:20px;

}

.filter-row{

grid-template-columns:1fr;

}

}

/* Loading */

.loading-products{
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
padding:80px 20px;
text-align:center;
background:#1E222B;
border-radius:18px;
}

.loader{
width:55px;
height:55px;
border:5px solid #333;
border-top:5px solid #FFD700;
border-radius:50%;
animation:spin 1s linear infinite;
margin-bottom:20px;
}

@keyframes spin{

0%{
transform:rotate(0deg);
}

100%{
transform:rotate(360deg);
}

}

/* Edit Modal */

.modal{

display:none;

position:fixed;

top:0;

left:0;

width:100%;

height:100%;

background:rgba(0,0,0,.75);

justify-content:center;

align-items:center;

z-index:9999;

padding:20px;

}

.modal-content{

background:#1E222B;

width:100%;

max-width:600px;

padding:30px;

border-radius:18px;

border:1px solid rgba(255,215,0,.2);

}

.modal-content h2{

margin-bottom:20px;

color:#FFD700;

}

.modal-buttons{

display:flex;

gap:15px;

margin-top:20px;

}

.modal-buttons button{

flex:1;

}

.gray-btn{

background:#3A3F4B;

color:white;

border:none;

padding:14px;

border-radius:12px;

cursor:pointer;

font-weight:600;

}

.swal2-popup{
    border-radius:20px !important;
    border:1px solid rgba(255,215,0,.25) !important;
    box-shadow:0 20px 60px rgba(0,0,0,.45) !important;
}

.swal2-title{
    color:#fff !important;
    font-weight:700 !important;
}

.swal2-html-container{
    color:#bbb !important;
}

.swal2-confirm{
    border-radius:12px !important;
    font-weight:600 !important;
}

.swal2-cancel{
    border-radius:12px !important;
    color:#000 !important;
    font-weight:600 !important;
}

.ab-popup{

border-radius:22px !important;

border:1px solid rgba(255,215,0,.25);

box-shadow:0 20px 60px rgba(0,0,0,.45);

}

.ab-confirm-btn{

border-radius:12px !important;

font-weight:600 !important;

padding:12px 28px !important;

}

.ab-delete-btn{

border-radius:12px !important;

font-weight:600 !important;

padding:12px 28px !important;

}

.swal2-title{

font-size:30px !important;

font-weight:700 !important;

}

.swal2-html-container{

font-size:17px !important;

color:#bbb !important;

}

/* ===== AB SweetAlert Theme ===== */

.ab-popup{

    border-radius:24px !important;

    border:1px solid rgba(255,215,0,.25);

    box-shadow:0 25px 70px rgba(0,0,0,.45);

}

.ab-title{

    font-size:30px !important;

    font-weight:700 !important;

    color:#fff !important;

}

.ab-text{

    font-size:17px !important;

    color:#bdbdbd !important;

}

.ab-confirm-btn{

    border-radius:14px !important;

    padding:12px 28px !important;

    font-weight:600 !important;

}

.ab-cancel-btn{

    border-radius:14px !important;

    padding:12px 28px !important;

    font-weight:600 !important;

    color:#000 !important;

}

.ab-toast{

    border-radius:16px !important;

}

/* ==============================
   Notification Panel
============================== */

.notification{
position:relative;
cursor:pointer;
font-size:24px;
user-select:none;
}

#notificationCount{
position:absolute;
top:-8px;
right:-10px;
background:#ff3b30;
color:#fff;
font-size:11px;
font-weight:700;
min-width:20px;
height:20px;
display:flex;
align-items:center;
justify-content:center;
border-radius:50%;
padding:0 4px;
}

.notification-panel{

position:absolute;

top:75px;
right:25px;

width:360px;
max-height:500px;

overflow-y:auto;

background:#1c1f26;

border:1px solid #333;

border-radius:16px;

padding:20px;

display:none;

z-index:9999;

box-shadow:0 15px 40px rgba(0,0,0,.45);

}

.notification-panel.show{

display:block;

animation:notificationFade .25s ease;

}

.notification-panel h3{

color:#FFD700;

margin-bottom:15px;

}

.notification-item{

background:#262b35;

padding:14px;

border-radius:12px;

margin-bottom:12px;

border-left:4px solid #FFD700;

}

.notification-item small{

display:block;

margin-top:6px;

color:#888;

}

.empty-notification{

color:#888;

text-align:center;

padding:30px 10px;

}

@keyframes notificationFade{

from{

opacity:0;
transform:translateY(-10px);

}

to{

opacity:1;
transform:translateY(0);

}

}

.sidebar-overlay{
    display:none;
}

@media (max-width:900px){

.sidebar-overlay{

position:fixed;

top:0;
left:0;

width:100%;
height:100%;

background:rgba(0,0,0,.75);

z-index:998;

display:none;

}

.sidebar-overlay.show{

display:block;

}

.sidebar{

width:260px;

}

.sidebar-menu a{

font-size:15px;

padding:15px 18px;

justify-content:flex-start;

}

.logo h2{

font-size:24px;

}

}

@media(max-width:900px){

.cards,
.quick-dashboard,
.product-grid,
#productList{

grid-template-columns:1fr;

}

.welcome-card{

padding:22px;

border-radius:18px;

}

.welcome-buttons{

display:grid;

grid-template-columns:1fr;

gap:12px;

}

.page-header{

flex-direction:column;

align-items:flex-start;

gap:15px;

}

.page-header .gold-btn{

width:100%;

}

}