/* =========================
   MOBILE BOTTOM NAV
========================= */
.menubottom{
    display:none;
}

@media screen and (max-width:768px){
    .menubottom{
        display:block;
        position:fixed;
        left:0;
        right:0;
        bottom:14px;
        z-index:1040;
        padding:0 12px;
    }

    .menubottom nav{
        background:rgba(255,255,255,.96);
        backdrop-filter:blur(14px);
        -webkit-backdrop-filter:blur(14px);
        border:1px solid var(--border-color);
        border-radius:22px;
        box-shadow:0 12px 35px rgba(15,23,42,.12);
        overflow:hidden;
    }

    .menubottom nav ul{
        display:flex !important;
        width:100% !important;
        padding-left:0;
        justify-content:space-between !important;
        margin-bottom:0;
        flex-direction:row !important;
        list-style:none;
    }

    .menubottom nav ul li{
        width:100% !important;
        list-style:none;
    }

    .menubottom nav ul li a{
        display:flex;
        flex-direction:column;
        align-items:center;
        justify-content:center;
        text-decoration:none;
        padding:12px 6px 10px;
        min-height:68px;
        color:var(--text-muted);
        transition:all .2s ease;
        border-radius:16px;
        margin:4px;
    }

    .menubottom nav ul li a:hover,
    .menubottom nav ul li a.active{
        background:var(--bg-hover);
        color:var(--primary);
        text-decoration:none;
    }

    .menubottom nav ul li a i{
        font-size:22px !important;
        line-height:1;
        margin-bottom:5px;
        color:inherit;
    }

    .menubottom nav ul li a span{
        font-size:11px;
        display:block;
        line-height:1.2;
        color:inherit;
        font-weight:700;
        letter-spacing:.01em;
    }

    .main-panel{
        padding-bottom:95px !important;
    }

    .footer{
        padding-bottom:95px !important;
    }
}

@media screen and (max-width:420px){
    .menubottom{
        bottom:10px;
        padding:0 10px;
    }

    .menubottom nav ul li a{
        padding:10px 4px 9px;
        min-height:64px;
    }

    .menubottom nav ul li a i{
        font-size:20px !important;
    }

    .menubottom nav ul li a span{
        font-size:10px;
    }
}

/* =========================
   FOOTER
========================= */
.footer{
    background:transparent !important;
    border-top:1px solid var(--border-color);
    padding:18px 24px;
    color:var(--text-muted) !important;
}

.footer .text-muted{
    color:var(--text-muted) !important;
    font-size:13px;
}

@media screen and (max-width:768px){
    .footer{
        text-align:center;
        padding:18px 16px 95px;
    }
}
:root{

--bg-main:#f4f7fb;
--bg-panel:#ffffff;
--bg-soft:#f8fafc;
--bg-hover:#eff6ff;

--text-main:#0f172a;
--text-muted:#64748b;

--border:#e2e8f0;

--primary:#2563eb;
--primary-light:#dbeafe;

--success:#16a34a;
--danger:#dc2626;
--warning:#f59e0b;
--info:#0ea5e9;

--radius:16px;

--shadow-sm:0 4px 16px rgba(0,0,0,.04);
--shadow-md:0 10px 28px rgba(0,0,0,.08);
--shadow-lg:0 20px 60px rgba(0,0,0,.12);

}

/* ======================================================
BODY
====================================================== */

html,body{
background:var(--bg-main);
color:var(--text-main);
font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu;
}

/* ======================================================
CARD
====================================================== */

.card{
border-radius:20px;
border:1px solid var(--border);
background:var(--bg-panel);
box-shadow:var(--shadow-sm);
transition:.25s ease;
}

.card:hover{
transform:translateY(-3px);
box-shadow:var(--shadow-md);
}

.card-body{
padding:24px;
}

/* ======================================================
BUTTON
====================================================== */

.btn{
border-radius:12px;
font-weight:600;
padding:8px 16px;
}

.btn-primary{
background:linear-gradient(135deg,#3b82f6,#2563eb);
border:none;
}

.btn-primary:hover{
background:#1d4ed8;
}

.btn-success{
background:var(--success);
border:none;
}

.btn-danger{
background:var(--danger);
border:none;
}

/* ======================================================
TABLE
====================================================== */

.table{
background:#fff;
border-radius:16px;
overflow:hidden;
}

.table th{
background:#f8fafc;
font-weight:700;
color:#0f172a;
}

.table td{
vertical-align:middle;
}

/* ======================================================
FORM
====================================================== */

.form-control,
.custom-select{
border-radius:10px;
border:1px solid var(--border);
min-height:42px;
}

.form-control:focus{
border-color:var(--primary);
box-shadow:0 0 0 3px rgba(37,99,235,.15);
}

/* ======================================================
BADGE
====================================================== */

.badge{
border-radius:999px;
padding:4px 10px;
font-weight:600;
}

.badge-success{
background:#dcfce7;
color:#15803d;
}

.badge-danger{
background:#fee2e2;
color:#b91c1c;
}

.badge-warning{
background:#fff7ed;
color:#c2410c;
}

.badge-info{
background:#e0f2fe;
color:#0369a1;
}

/* ======================================================
ORDER STATUS BADGE
====================================================== */

.status-success{
background:#dcfce7;
color:#166534;
padding:4px 10px;
border-radius:999px;
font-size:12px;
}

.status-pending{
background:#fef3c7;
color:#92400e;
}

.status-processing{
background:#dbeafe;
color:#1e40af;
}

.status-error{
background:#fee2e2;
color:#991b1b;
}

/* ======================================================
DASHBOARD STATS
====================================================== */

.dashboard-stat{
display:flex;
align-items:center;
justify-content:space-between;
padding:18px;
border-radius:16px;
background:#fff;
border:1px solid var(--border);
box-shadow:var(--shadow-sm);
}

.dashboard-stat .icon{
width:46px;
height:46px;
display:flex;
align-items:center;
justify-content:center;
border-radius:12px;
font-size:22px;
background:var(--primary-light);
color:var(--primary);
}

.dashboard-stat h4{
font-weight:700;
margin:0;
}

.dashboard-stat small{
color:var(--text-muted);
}

/* ======================================================
NAVBAR
====================================================== */

.navbar{
background:rgba(255,255,255,.9);
backdrop-filter:blur(10px);
border-bottom:1px solid var(--border);
}

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

.sidebar{
background:#fff;
border-right:1px solid var(--border);
}

.sidebar .nav .nav-link{
border-radius:12px;
margin-bottom:4px;
}

.sidebar .nav .nav-link:hover{
background:var(--bg-hover);
}

.sidebar .nav .nav-link.active{
background:var(--primary-light);
color:var(--primary);
}

/* ======================================================
MODAL
====================================================== */

.modal-content{
border-radius:18px;
border:1px solid var(--border);
box-shadow:var(--shadow-lg);
}

/* ======================================================
CODE BLOCK (API DOCS)
====================================================== */

pre{
background:#0f172a;
color:#e2e8f0;
padding:16px;
border-radius:12px;
font-size:13px;
}

/* ======================================================
PAGINATION
====================================================== */

.pagination .page-link{
border-radius:10px;
margin:2px;
border:1px solid var(--border);
}

.pagination .active .page-link{
background:var(--primary);
border:none;
color:#fff;
}

/* ======================================================
SCROLLBAR
====================================================== */

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

::-webkit-scrollbar-track{
background:#eef2f7;
}

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

::-webkit-scrollbar-thumb:hover{
background:#94a3b8;
}