*{
    box-sizing:border-box;
}

:root{
    --black:#0B0B0B;
    --dark:#111111;
    --charcoal:#1F1F1F;
    --gray:#6B7280;
    --light-gray:#E5E7EB;
    --soft:#F7F7F7;
    --white:#FFFFFF;

    --accent:#7D93B2;

    --success-bg:#DCFCE7;
    --success-text:#15803D;
    --warning-bg:#FFF7ED;
    --warning-text:#EA580C;
    --info-bg:#DBEAFE;
    --info-text:#2563EB;
    --purple-bg:#EDE9FE;
    --purple-text:#7C3AED;
    --danger-bg:#FEE2E2;
    --danger-text:#DC2626;
}

body{
    margin:0;
    font-family:Arial, sans-serif;
    background:var(--soft);
    color:var(--black);
}

body.bg-image{
    min-height:100vh;
    background:
        linear-gradient(rgba(0,0,0,.45), rgba(0,0,0,.55)),
        url("../images/bg.png");
    background-size:cover;
    background-position:center;
    background-attachment:fixed;
}

a{
    text-decoration:none;
    color:inherit;
}

h1,h2,h3,p{
    margin-top:0;
}

h1{
    font-size:34px;
    letter-spacing:-.5px;
    margin-bottom:8px;
}

h2{
    font-size:24px;
    letter-spacing:-.3px;
}

h3{
    margin-top:10px;
}

/* BUTTONS AND INPUTS */

.btn,
button{
    background:var(--black);
    color:white;
    padding:11px 18px;
    border:none;
    border-radius:0;
    cursor:pointer;
    font-family:Arial, sans-serif;
    font-size:13px;
    font-weight:700;
    letter-spacing:.5px;
    text-transform:uppercase;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    text-align:center;
    min-height:44px;
    transition:.25s ease;
}

.btn:hover,
button:hover{
    background:var(--charcoal);
    transform:translateY(-1px);
}

input,
select{
    padding:12px;
    border:1px solid var(--light-gray);
    border-radius:0;
    background:white;
    font-family:Arial, sans-serif;
    font-size:14px;
    outline:none;
}

input:focus,
select:focus{
    border-color:var(--black);
    box-shadow:0 0 0 3px rgba(0,0,0,.08);
}

/* NAVBAR */

.navbar{
    background:rgba(11,11,11,.96);
    padding:10px 60px;
    display:flex;
    justify-content:space-between;
    align-items:center;
    position:sticky;
    top:0;
    z-index:100;
    border-bottom:1px solid rgba(255,255,255,.08);
}

.navbar a{
    color:white;
    margin-left:26px;
    font-weight:700;
    font-size:13px;
    letter-spacing:.8px;
    text-transform:uppercase;
}

.navbar a:hover{
    color:var(--accent);
}

.logo-area{
    display:flex;
    align-items:center;
    gap:12px;
    margin:0;
}

.logo-area img{
    width:78px;
    height:78px;
    object-fit:contain;
}

.logo-area h2{
    margin:0;
    color:white;
    font-size:20px;
    letter-spacing:1px;
}

/* COMMON LAYOUT */

.section,
.admin-container,
.product-back,
.product-view{
    width:92%;
    margin-left:auto;
    margin-right:auto;
}

.section,
.admin-container{
    margin-top:45px;
    margin-bottom:45px;
}

.hero{
    min-height:520px;
    background:
        linear-gradient(rgba(0,0,0,.45), rgba(0,0,0,.55)),
        url("../images/bg.png");
    background-size:cover;
    background-position:center;
    color:white;
    text-align:center;
    padding:90px 20px;
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
}

.hero h1{
    font-size:70px;
    letter-spacing:8px;
    margin-bottom:12px;
}

.hero p{
    color:#F3F4F6;
    font-size:18px;
    letter-spacing:1px;
}

.footer{
    background:var(--black);
    color:white;
    text-align:center;
    padding:28px;
    margin-top:50px;
}

/* CARDS AND PANELS */

.card,
.dashboard-card,
.panel,
.action-card,
.form-container{
    background:var(--white);
    border:1px solid var(--light-gray);
    border-radius:0;
    padding:24px;
}

.panel{
    margin-bottom:28px;
}

.card{
    text-align:left;
    padding:0;
    overflow:hidden;
    transition:.25s ease;
    border:none;
    background:white;
}

.card:hover{
    transform:translateY(-6px);
    box-shadow:0 22px 45px rgba(0,0,0,.12);
}

.card h3{
    color:var(--black);
    margin:18px 18px 8px;
    font-size:16px;
    text-transform:uppercase;
    letter-spacing:.7px;
}

.card p{
    margin-left:18px;
    margin-right:18px;
    color:var(--gray);
    font-size:14px;
}

.card .btn{
    margin:10px 18px 20px;
    width:calc(100% - 36px);
}

.products,
.dashboard-cards,
.quick-actions,
.mini-products,
.dashboard-grid,
.product-form,
.checkout-form,
.profile-form{
    display:grid;
    gap:24px;
}

.products{
    grid-template-columns:repeat(4,1fr);
}

.dashboard-cards,
.quick-actions{
    grid-template-columns:repeat(4,1fr);
    margin:28px 0;
}

.dashboard-grid{
    grid-template-columns:2fr 1fr;
}

.mini-products{
    grid-template-columns:repeat(2,1fr);
}

.card img,
.product-view img,
.mini-card img{
    width:100%;
    aspect-ratio:1/1;
    object-fit:cover;
    background:#eee;
    transition:.35s ease;
}

.card:hover img{
    transform:scale(1.04);
}

.mini-card{
    background:var(--soft);
    padding:14px;
    text-align:center;
}

/* FORMS */

.form-container{
    width:390px;
    margin:100px auto;
    background:rgba(11,11,11,.88);
    color:white;
    border:1px solid rgba(255,255,255,.15);
    box-shadow:0 25px 60px rgba(0,0,0,.35);
}

.form-container input,
.form-container button{
    width:100%;
    margin-bottom:12px;
}

.form-container input{
    background:#F3F4F6;
}

.form-container a{
    color:white;
    text-decoration:underline;
    font-weight:bold;
}

.form-container p{
    color:white;
}

.product-form{
    grid-template-columns:repeat(4,1fr);
}

.product-form button{
    width:100%;
}

.checkout-form{
    grid-template-columns:2fr 1fr 1fr auto;
}

.profile-form{
    max-width:520px;
}

.profile-form label{
    font-weight:700;
    color:var(--black);
    text-transform:uppercase;
    font-size:12px;
    letter-spacing:.5px;
}

.filter-wrapper{
    display:flex;
    gap:12px;
    align-items:center;
    flex-wrap:wrap;
    margin-bottom:0;
}

.filter-wrapper input{
    flex:1;
    min-width:250px;
}

.filter-wrapper select{
    width:220px;
}

.filter-wrapper .btn,
.filter-wrapper button{
    width:auto;
    min-width:105px;
    height:44px;
    padding:0 18px;
}

/* ASSIGN FORM */

.assign-form{
    display:flex;
    gap:8px;
    align-items:center;
}

.assign-form select{
    width:145px;
    height:44px;
}

.assign-form button{
    width:90px;
    height:44px;
    padding:0 14px;
}

/* ADMIN LAYOUT */

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

.sidebar{
    width:250px;
    background:var(--black);
    color:white;
    padding:25px;
    position:sticky;
    top:0;
    height:100vh;
}

.sidebar .logo-area{
    justify-content:center;
    margin-bottom:28px;
    flex-direction:column;
}

.sidebar .logo-area img{
    width:120px;
    height:auto;
}

.sidebar .logo-area p{
    font-size:12px;
    color:#C7C7C7;
    text-align:center;
}

.menu-item{
    display:flex;
    align-items:center;
    gap:12px;
    padding:14px 15px;
    margin-bottom:8px;
    color:#D1D5DB;
    transition:.2s ease;
    font-size:14px;
}

.menu-item:hover{
    background:var(--charcoal);
    color:white;
}

.menu-item.active{
    background:white;
    color:var(--black);
}

.menu-item i{
    width:20px;
}

.admin-profile{
    margin-top:22px;
    padding:16px;
    background:var(--charcoal);
    color:white;
}

.main-content{
    flex:1;
    padding:35px;
    overflow-x:auto;
}

.hide-sidebar{
    display:none;
}

.full-width{
    width:100%;
}

/* TOPBAR */

.topbar{
    height:72px;
    background:white;
    border-bottom:1px solid var(--light-gray);
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:0 30px;
    margin:-35px -35px 30px;
}

.topbar-left{
    font-size:24px;
    cursor:pointer;
    color:var(--black);
}

.topbar-right,
.topbar-item{
    display:flex;
    align-items:center;
    gap:15px;
}

.divider{
    width:1px;
    height:30px;
    background:#D1D5DB;
}

/* DASHBOARD */

.dashboard-card{
    transition:.25s ease;
    border:none;
    box-shadow:0 10px 30px rgba(0,0,0,.05);
}

.dashboard-card:hover{
    transform:translateY(-3px);
    box-shadow:0 18px 35px rgba(0,0,0,.08);
}

.dashboard-card h3{
    color:var(--gray);
    font-size:13px;
    margin:0;
    text-transform:uppercase;
    letter-spacing:.7px;
}

.dashboard-card h2{
    font-size:36px;
    margin:10px 0 0;
    color:var(--black);
}

.blue-card{
    background:var(--black);
    color:white;
}

.blue-card h2,
.blue-card h3,
.blue-card p{
    color:white;
}

.action-card{
    transition:.25s ease;
    border:none;
    box-shadow:0 10px 30px rgba(0,0,0,.05);
}

.action-card:hover{
    background:white;
    transform:translateY(-4px);
    box-shadow:0 18px 35px rgba(0,0,0,.10);
}

.action-icon{
    width:48px;
    height:48px;
    background:var(--soft);
    color:var(--black);
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:22px;
    margin-bottom:12px;
}

/* TABLES */

table{
    width:100%;
    border-collapse:separate;
    border-spacing:0;
    background:white;
    border:none;
    overflow:hidden;
    box-shadow:0 10px 30px rgba(0,0,0,.05);
}

th,
td{
    padding:15px;
    text-align:left;
    border-bottom:1px solid var(--light-gray);
    font-size:14px;
    vertical-align:middle;
}

th{
    background:var(--black);
    color:white;
    font-size:12px;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:.6px;
}

tr:last-child td{
    border-bottom:none;
}

tr:hover{
    background:#FAFAFA;
}

table img{
    width:72px;
    height:72px;
    object-fit:cover;
    background:#eee;
}

/* STATUS COLORS */

.status{
    padding:7px 12px;
    border-radius:999px;
    font-size:11px;
    font-weight:700;
    display:inline-block;
    text-transform:uppercase;
    letter-spacing:.3px;
}

.pending,
.preparing{
    background:var(--warning-bg);
    color:var(--warning-text);
}

.processing,
.delivery{
    background:var(--info-bg);
    color:var(--info-text);
}

.completed,
.delivered{
    background:var(--success-bg);
    color:var(--success-text);
}

.pickup{
    background:var(--purple-bg);
    color:var(--purple-text);
}

/* PRODUCT VIEW */

.product-back{
    margin-top:30px;
}

.back-btn{
    background:white;
    color:var(--black);
    padding:11px 18px;
    border:1px solid var(--light-gray);
    font-weight:bold;
    display:inline-flex;
    align-items:center;
    gap:8px;
}

.product-view{
    max-width:1350px;
    margin-top:30px;
    margin-bottom:70px;
    display:grid;
    grid-template-columns:1.1fr .9fr;
    gap:55px;
    background:white;
    padding:45px;
    border:none;
    box-shadow:0 22px 45px rgba(0,0,0,.08);
}

.product-view h1{
    font-size:42px;
    color:var(--black);
    text-transform:uppercase;
    letter-spacing:.8px;
}

.product-view h2{
    font-size:36px;
    color:var(--black);
}

.product-view input{
    width:120px;
    margin:10px 0 20px;
}

/* REPORTS AND COURIER */

.report-list{
    display:grid;
    gap:14px;
}

.report-list div{
    display:flex;
    justify-content:space-between;
    align-items:center;
    background:var(--soft);
    padding:15px;
}

.report-list span{
    color:var(--gray);
}

.report-list strong{
    font-size:22px;
    color:var(--black);
}

.proof-img{
    width:72px;
    height:72px;
    object-fit:cover;
}

.upload-container{
    display:none;
    margin-top:8px;
}

.file-input{
    font-size:12px;
}

/* MESSAGES */

.success-msg{
    background:var(--success-bg);
    color:var(--success-text);
    padding:12px;
    margin-bottom:15px;
}

.error-msg{
    background:var(--danger-bg);
    color:var(--danger-text);
    padding:12px;
    margin-bottom:15px;
}











.btn,
button{
    border-radius:12px;
}

.form-container button{
    background:#7D93B2;
    color:white;
    border-radius:12px;
    font-size:15px;
    font-weight:700;
}

.form-container button:hover{
    background:#4E6A8E;
}

body.bg-image{
    min-height:100vh;
    background:
        linear-gradient(rgba(0,0,0,.55), rgba(0,0,0,.55)),
        url("../images/bg.png");
    background-size:cover;
    background-position:center;
    background-attachment:fixed;
}
/* RESPONSIVE */

@media(max-width:900px){

    .navbar{
        padding:18px;
        flex-direction:column;
        gap:15px;
    }

    .navbar a{
        margin-left:12px;
    }

    .hero h1{
        font-size:42px;
    }

    .products,
    .dashboard-cards,
    .quick-actions,
    .dashboard-grid,
    .product-form,
    .checkout-form,
    .product-view{
        grid-template-columns:1fr;
    }

    .filter-wrapper{
        display:grid;
        grid-template-columns:1fr;
    }

    .filter-wrapper input,
    .filter-wrapper select,
    .filter-wrapper .btn,
    .filter-wrapper button{
        width:100%;
        min-width:0;
    }

    .assign-form{
        flex-direction:column;
        align-items:stretch;
    }

    .assign-form select,
    .assign-form button{
        width:100%;
    }

    .layout{
        flex-direction:column;
    }

    .sidebar{
        width:100%;
        height:auto;
        position:relative;
    }

    .topbar{
        margin:0 0 20px;
    }

    .form-container{
        width:90%;
    }
}