/* ==========================================================
   EASY GATE LOGISTICS
   Dashboard v2.0
========================================================== */

:root{

--primary:#2563eb;
--primary-hover:#1d4ed8;

--success:#10b981;
--warning:#f59e0b;
--danger:#ef4444;

--dark:#111827;
--dark2:#1f2937;

--bg:#f3f6fb;

--card:#ffffff;

--border:#e5e7eb;

--text:#111827;

--muted:#6b7280;

--radius:18px;

--shadow:
0 10px 30px rgba(15,23,42,.08);

}

*{

margin:0;
padding:0;
box-sizing:border-box;

}

html{

scroll-behavior:smooth;

}

body{

background:var(--bg);

font-family:
"Segoe UI",
Tahoma,
sans-serif;

color:var(--text);

overflow-x:hidden;

}

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

.sidebar{

position:fixed;

right:0;

top:0;

width:270px;

height:100vh;

background:linear-gradient(
180deg,
#0f172a,
#1e293b
);

padding:25px;

overflow:auto;

z-index:999;

}

.logo{

font-size:30px;

font-weight:bold;

color:white;

margin-bottom:35px;

}

.logo small{

display:block;

margin-top:8px;

font-size:13px;

color:#94a3b8;

}

.menu a{

display:flex;

align-items:center;

gap:14px;

padding:15px;

margin-bottom:10px;

border-radius:16px;

font-size:15px;

font-weight:600;

text-decoration:none;

color:#dbe4ee;

transition:.25s;

}

.menu a:hover{

background:#334155;

color:white;

transform:translateX(-4px);

}

.menu .active{

background:linear-gradient(
90deg,
#2563eb,
#3b82f6
);

color:white;

box-shadow:
0 8px 20px rgba(37,99,235,.35);

}

.menu i{

width:24px;

text-align:center;

font-size:18px;

}

/* ===================== MAIN ===================== */

.main{

margin-right:270px;

min-height:100vh;

}

/* ===================== TOPBAR ===================== */

.topbar{

height:85px;

background:white;

display:flex;

justify-content:space-between;

align-items:center;

padding:0 30px;

border-bottom:1px solid var(--border);

box-shadow:0 2px 10px rgba(0,0,0,.04);

}

.user-box{

display:flex;

align-items:center;

gap:15px;

}

.avatar{

width:48px;

height:48px;

border-radius:50%;

background:#2563eb;

display:flex;

justify-content:center;

align-items:center;

font-size:18px;

font-weight:bold;

color:white;

}

.content{

padding:30px;

}

/* ===================== CARDS ===================== */

.cards{

display:grid;

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

gap:20px;

margin-bottom:30px;

}

.card{

background:white;

border-radius:22px;

padding:22px;

box-shadow:var(--shadow);

transition:.25s;

border:1px solid #edf2f7;

}

.card:hover{

transform:translateY(-5px);

}

.card-title{

font-size:14px;

color:#64748b;

margin-bottom:15px;

}

.card-number{

font-size:34px;

font-weight:bold;

}

.card-icon{

width:55px;

height:55px;

border-radius:15px;

display:flex;

justify-content:center;

align-items:center;

font-size:24px;

margin-bottom:18px;

background:#eff6ff;

color:#2563eb;

}

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

.table-box{

background:white;

border-radius:20px;

padding:20px;

box-shadow:var(--shadow);

margin-top:25px;

}

.table{

margin-bottom:0;

}

.table thead{

background:#f8fafc;

}

.table th{

font-weight:700;

}

/* ===================== BUTTONS ===================== */

.btn-primary{

background:#2563eb;

border:none;

border-radius:12px;

padding:10px 18px;

}

.btn-primary:hover{

background:#1d4ed8;

}

/* ===================== STATUS ===================== */

.badge-status{

padding:8px 14px;

border-radius:30px;

font-size:13px;

font-weight:bold;

}

.waiting{

background:#fff7ed;

color:#ea580c;

}

.loaded{

background:#ecfeff;

color:#0891b2;

}

.onroad{

background:#eff6ff;

color:#2563eb;

}

.arrived{

background:#ecfdf5;

color:#059669;

}

/* ===================== RESPONSIVE ===================== */

@media(max-width:991px){

.sidebar{

width:80px;

}

.logo small{

display:none;

}

.logo{

font-size:18px;

text-align:center;

}

.menu a{

justify-content:center;

}

.menu a span{

display:none;

}

.main{

margin-right:80px;

}

}

@media(max-width:768px){

.cards{

grid-template-columns:1fr;

}

.topbar{

padding:15px;

height:auto;

flex-direction:column;

gap:15px;

align-items:flex-start;

}

.content{

padding:15px;

}

}