@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;500;600;700;800&family=Sora:wght@400;600;700&display=swap');

:root {
  --bg: #f0f2f8;
  --sidebar: #ffffff;
  --sidebar-w: 210px;
  --topbar-h: 56px;
  --card: #ffffff;
  --card-border: #e8ecf4;
  --text: #1a1d2e;
  --text2: #6b7394;
  --text3: #9ba3c4;

  --blue: #5865f2;
  --blue-dark: #4752d9;
  --blue-soft: #eef0fd;
  --green: #22c55e;
  --green-soft: #e8fdf0;
  --red: #ef4444;
  --red-soft: #fef2f2;
  --orange: #f97316;
  --orange-soft: #fff7ed;
  --yellow: #eab308;
  --yellow-soft: #fefce8;
  --purple: #a855f7;
  --purple-soft: #faf5ff;
  --cyan: #06b6d4;
  --cyan-soft: #ecfeff;

  --shadow-sm: 0 1px 4px rgba(0,0,0,.06);
  --shadow:    0 2px 12px rgba(0,0,0,.08);
  --shadow-lg: 0 8px 32px rgba(0,0,0,.12);
  --radius: 12px;
  --radius-sm: 8px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: 'Nunito', sans-serif;
  background: var(--bg);
  color: var(--text);
  font-size: 13.5px;
  min-height: 100vh;
}

/* ═══════════════ LOGIN ═══════════════ */
.login-wrap {
  min-height: 100vh;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  position: relative; overflow: hidden;
}
.login-wrap::before {
  content:'';
  position:absolute; inset:0;
  background: radial-gradient(ellipse at 20% 50%, rgba(102,126,234,.4) 0%, transparent 60%),
              radial-gradient(ellipse at 80% 20%, rgba(118,75,162,.4) 0%, transparent 60%);
}
.login-box {
  background: #fff;
  border-radius: 20px;
  padding: 44px 40px;
  width: 400px; max-width: 95vw;
  box-shadow: 0 20px 60px rgba(0,0,0,.2);
  position: relative; animation: fadeUp .4s ease;
}
@keyframes fadeUp { from{opacity:0;transform:translateY(24px)} to{opacity:1;transform:none} }

.login-icon {
  width: 60px; height: 60px; border-radius: 16px;
  background: linear-gradient(135deg, var(--blue), var(--purple));
  display: flex; align-items: center; justify-content: center;
  font-size: 26px; margin: 0 auto 16px; box-shadow: 0 8px 24px rgba(88,101,242,.35);
}
.login-box h1 { text-align:center; font-family:'Sora',sans-serif; font-size:20px; font-weight:700; }
.login-box .sub { text-align:center; color:var(--text2); font-size:12px; margin-top:4px; margin-bottom:28px; }

.form-label {
  display:block; font-size:11px; font-weight:700; text-transform:uppercase;
  letter-spacing:.6px; color:var(--text2); margin-bottom:6px;
}
.form-inp {
  width:100%; padding:11px 14px;
  border: 1.5px solid #e5e7f0; border-radius: var(--radius-sm);
  font-family:'Nunito',sans-serif; font-size:14px; color:var(--text);
  background:#f8f9fe; outline:none; transition:.2s;
}
.form-inp:focus { border-color:var(--blue); background:#fff; box-shadow:0 0 0 3px rgba(88,101,242,.12); }
.form-group { margin-bottom:16px; }
.form-row { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.form-row-3 { display:grid; grid-template-columns:1fr 1fr 1fr; gap:14px; }

.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:7px;
  padding:10px 18px; border:none; border-radius:var(--radius-sm);
  font-family:'Nunito',sans-serif; font-size:13px; font-weight:700;
  cursor:pointer; transition:.2s; text-decoration:none; white-space:nowrap;
}
.btn:active { transform:scale(.97); }
.btn-blue { background:linear-gradient(135deg,var(--blue),var(--blue-dark)); color:#fff; box-shadow:0 4px 14px rgba(88,101,242,.35); }
.btn-blue:hover { box-shadow:0 6px 20px rgba(88,101,242,.45); transform:translateY(-1px); }
.btn-green  { background:linear-gradient(135deg,var(--green),#16a34a); color:#fff; }
.btn-orange { background:linear-gradient(135deg,var(--orange),#ea6506); color:#fff; }
.btn-red    { background:linear-gradient(135deg,var(--red),#dc2626); color:#fff; }
.btn-gray   { background:#f1f3fb; color:var(--text2); border:1.5px solid var(--card-border); }
.btn-gray:hover { background:#e8ecf4; }
.btn-sm { padding:6px 12px; font-size:12px; }
.btn-lg { width:100%; padding:13px; font-size:15px; }
.btn-icon { width:32px; height:32px; padding:0; border-radius:8px; }

/* ═══════════════ LAYOUT ═══════════════ */
.layout { display:flex; min-height:100vh; }

.sidebar {
  width: var(--sidebar-w);
  background: var(--sidebar);
  border-right: 1px solid var(--card-border);
  position: fixed; top:0; left:0; bottom:0;
  display:flex; flex-direction:column;
  z-index:100; overflow-y:auto;
  box-shadow: 2px 0 12px rgba(0,0,0,.04);
}

.sb-logo {
  padding: 16px 18px;
  border-bottom: 1px solid var(--card-border);
  display:flex; align-items:center; gap:10px;
}
.sb-logo .ico {
  width:36px; height:36px; border-radius:10px;
  background:linear-gradient(135deg,var(--blue),var(--purple));
  display:flex; align-items:center; justify-content:center;
  font-size:18px; flex-shrink:0;
}
.sb-logo .t1 { font-family:'Sora',sans-serif; font-size:14px; font-weight:700; line-height:1.1; }
.sb-logo .t2 { font-size:10.5px; color:var(--text2); }

.sb-bot-status {
  margin:10px 12px; padding:8px 12px; border-radius:8px;
  background:#e8fdf0; border:1px solid #bbf7d0;
  display:flex; align-items:center; gap:7px;
  font-size:12px; font-weight:700; color:#15803d;
}
.dot-green { width:8px; height:8px; border-radius:50%; background:var(--green); flex-shrink:0; animation:pulse 2s infinite; }
@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:.4} }

.sb-section { padding:14px 12px 4px; font-size:10px; font-weight:800; text-transform:uppercase; letter-spacing:.8px; color:var(--text3); }

.nav-link {
  display:flex; align-items:center; gap:9px;
  padding:8px 12px; border-radius:var(--radius-sm);
  color:var(--text2); font-size:13px; font-weight:600;
  cursor:pointer; transition:.15s; margin:1px 8px;
  text-decoration:none;
}
.nav-link:hover { background:#f3f4fb; color:var(--text); }
.nav-link.active {
  background:var(--blue-soft); color:var(--blue); font-weight:700;
}
.nav-link .ni { font-size:16px; width:20px; text-align:center; flex-shrink:0; }

/* ═══════════════ MAIN ═══════════════ */
.main { margin-left:var(--sidebar-w); flex:1; min-height:100vh; }

.topbar {
  height: var(--topbar-h);
  background:#fff; border-bottom:1px solid var(--card-border);
  display:flex; align-items:center; justify-content:space-between;
  padding:0 24px; position:sticky; top:0; z-index:50;
  box-shadow:var(--shadow-sm);
}
.topbar-title { font-family:'Sora',sans-serif; font-size:16px; font-weight:700; }
.topbar-sub { font-size:11.5px; color:var(--text2); }
.topbar-right { display:flex; align-items:center; gap:12px; }
.topbar-time {
  font-family:'Sora',sans-serif; font-size:14px; font-weight:700;
  color:var(--blue); background:var(--blue-soft); padding:5px 12px;
  border-radius:20px;
}
.topbar-user {
  display:flex; align-items:center; gap:8px;
  font-size:13px; font-weight:600; color:var(--text);
}
.avatar {
  width:32px; height:32px; border-radius:10px;
  background:linear-gradient(135deg,var(--blue),var(--purple));
  display:flex; align-items:center; justify-content:center;
  font-size:14px; color:#fff; font-weight:700;
}

.page-content { padding:20px 24px; }

/* ═══════════════ CARDS ═══════════════ */
.card {
  background:var(--card); border:1px solid var(--card-border);
  border-radius:var(--radius); box-shadow:var(--shadow-sm);
  overflow:hidden;
}
.card-head {
  padding:14px 18px; border-bottom:1px solid var(--card-border);
  display:flex; align-items:center; justify-content:space-between;
}
.card-head h3 { font-size:13.5px; font-weight:700; }
.card-body { padding:16px 18px; }

/* ═══════════════ STAT CARDS ═══════════════ */
.stat-grid { display:grid; gap:14px; }
.stat-grid-4 { grid-template-columns:repeat(4,1fr); }
.stat-grid-6 { grid-template-columns:repeat(6,1fr); }

.stat-card {
  background:var(--card); border:1px solid var(--card-border);
  border-radius:var(--radius); padding:16px;
  box-shadow:var(--shadow-sm); transition:.2s;
}
.stat-card:hover { box-shadow:var(--shadow); transform:translateY(-2px); }

.stat-card .sc-label {
  font-size:11px; font-weight:700; text-transform:uppercase;
  letter-spacing:.5px; color:var(--text2); margin-bottom:8px;
  display:flex; align-items:center; gap:6px;
}
.sc-ico { width:26px; height:26px; border-radius:7px; display:inline-flex; align-items:center; justify-content:center; font-size:13px; }
.sc-ico.blue { background:var(--blue-soft); }
.sc-ico.green { background:var(--green-soft); }
.sc-ico.red { background:var(--red-soft); }
.sc-ico.orange { background:var(--orange-soft); }
.sc-ico.purple { background:var(--purple-soft); }
.sc-ico.cyan { background:var(--cyan-soft); }
.sc-ico.yellow { background:var(--yellow-soft); }

.stat-card .sc-val {
  font-family:'Sora',sans-serif; font-size:22px; font-weight:700;
  line-height:1;
}
.stat-card .sc-val.blue   { color:var(--blue); }
.stat-card .sc-val.green  { color:var(--green); }
.stat-card .sc-val.red    { color:var(--red); }
.stat-card .sc-val.orange { color:var(--orange); }
.stat-card .sc-val.purple { color:var(--purple); }
.stat-card .sc-val.cyan   { color:var(--cyan); }
.stat-card .sc-val.yellow { color:var(--yellow); }

.stat-card .sc-sub { font-size:11.5px; color:var(--text2); margin-top:4px; }

/* ═══════════════ SECTION LABEL ═══════════════ */
.section-label {
  display:flex; align-items:center; gap:8px;
  font-size:12px; font-weight:800; text-transform:uppercase;
  letter-spacing:.6px; color:var(--text); margin:18px 0 10px;
}
.section-label::before {
  content:''; width:3px; height:16px; border-radius:2px;
  background:linear-gradient(var(--blue),var(--purple));
}

/* ═══════════════ TABLE ═══════════════ */
.table-wrap { overflow-x:auto; }
table { width:100%; border-collapse:collapse; }
thead th {
  padding:10px 14px; background:#f7f8fc;
  font-size:11px; font-weight:800; text-transform:uppercase;
  letter-spacing:.5px; color:var(--text2); text-align:left;
  border-bottom:1px solid var(--card-border); white-space:nowrap;
}
tbody tr { border-bottom:1px solid #f0f2f8; transition:.12s; }
tbody tr:hover { background:#fafbff; }
tbody td { padding:11px 14px; font-size:13px; }
tbody td:first-child { font-weight:700; }
tbody tr:last-child { border-bottom:none; }

/* ═══════════════ BADGE ═══════════════ */
.badge {
  display:inline-flex; align-items:center; padding:3px 9px;
  border-radius:20px; font-size:11px; font-weight:800; letter-spacing:.3px;
}
.badge-blue   { background:var(--blue-soft); color:var(--blue); }
.badge-green  { background:var(--green-soft); color:#15803d; }
.badge-red    { background:var(--red-soft); color:#dc2626; }
.badge-orange { background:var(--orange-soft); color:#ea580c; }
.badge-yellow { background:var(--yellow-soft); color:#a16207; }
.badge-gray   { background:#f1f3fb; color:var(--text2); }

/* ═══════════════ PROGRESS ═══════════════ */
.progress { height:6px; background:#f0f2f8; border-radius:3px; overflow:hidden; }
.progress-fill { height:100%; border-radius:3px; transition:.4s; }
.progress-fill.blue   { background:linear-gradient(90deg,var(--blue),#818cf8); }
.progress-fill.green  { background:linear-gradient(90deg,var(--green),#4ade80); }
.progress-fill.orange { background:linear-gradient(90deg,var(--orange),#fb923c); }
.progress-fill.red    { background:linear-gradient(90deg,var(--red),#f87171); }

/* ═══════════════ MODAL ═══════════════ */
.overlay {
  position:fixed; inset:0; z-index:1000;
  background:rgba(10,10,30,.45); backdrop-filter:blur(4px);
  display:flex; align-items:center; justify-content:center;
  padding:20px; animation:fadeIn .2s;
}
.overlay.hidden { display:none; }
@keyframes fadeIn { from{opacity:0} to{opacity:1} }
.modal {
  background:#fff; border-radius:16px;
  width:580px; max-width:100%; max-height:92vh;
  overflow-y:auto; box-shadow:var(--shadow-lg);
  animation:slideUp .25s ease;
}
.modal-wide { width:720px; }
@keyframes slideUp { from{opacity:0;transform:translateY(20px)} to{opacity:1;transform:none} }
.modal-head {
  padding:18px 22px 14px; border-bottom:1px solid var(--card-border);
  display:flex; align-items:center; justify-content:space-between;
  position:sticky; top:0; background:#fff; z-index:5;
}
.modal-head h3 { font-family:'Sora',sans-serif; font-size:16px; font-weight:700; }
.modal-close {
  width:30px; height:30px; border-radius:8px;
  background:#f1f3fb; border:none; cursor:pointer;
  font-size:16px; display:flex; align-items:center; justify-content:center;
  color:var(--text2); transition:.15s;
}
.modal-close:hover { background:var(--red-soft); color:var(--red); }
.modal-body { padding:20px 22px; }
.modal-foot { padding:14px 22px; border-top:1px solid var(--card-border); display:flex; gap:10px; justify-content:flex-end; }

/* ═══════════════ ALERT ═══════════════ */
.alert {
  padding:10px 14px; border-radius:var(--radius-sm);
  font-size:13px; margin-bottom:14px;
  display:flex; align-items:flex-start; gap:8px;
}
.alert-blue   { background:var(--blue-soft); border:1px solid #c7d2fe; color:#3730a3; }
.alert-green  { background:var(--green-soft); border:1px solid #bbf7d0; color:#15803d; }
.alert-red    { background:var(--red-soft); border:1px solid #fecaca; color:#dc2626; }
.alert-orange { background:var(--orange-soft); border:1px solid #fed7aa; color:#c2410c; }

/* ═══════════════ CHART ═══════════════ */
.bar-chart { display:flex; align-items:flex-end; gap:6px; height:100px; }
.bar-wrap { flex:1; display:flex; flex-direction:column; align-items:center; gap:4px; }
.bar-col { width:100%; border-radius:4px 4px 0 0; min-height:3px; transition:.4s; }
.bar-label { font-size:9px; color:var(--text3); text-align:center; }

/* ═══════════════ DELIVERY TIMELINE ═══════════════ */
.timeline { display:flex; flex-direction:column; gap:8px; }
.tl-item {
  display:flex; align-items:center; gap:12px;
  background:#f7f8fc; border:1px solid var(--card-border);
  border-radius:var(--radius-sm); padding:10px 14px; transition:.15s;
}
.tl-item.done { background:var(--green-soft); border-color:#bbf7d0; }
.tl-num {
  width:26px; height:26px; border-radius:50%;
  background:var(--blue); color:#fff; font-size:11px; font-weight:800;
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
.tl-num.done-n { background:var(--green); }
.tl-info { flex:1; }
.tl-main { font-size:13.5px; font-weight:700; }
.tl-sub  { font-size:11px; color:var(--text2); margin-top:1px; }

/* ═══════════════ TOAST ═══════════════ */
.toast-box {
  position:fixed; bottom:20px; right:20px; z-index:9999;
  display:flex; flex-direction:column; gap:8px;
}
.toast {
  background:#1a1d2e; color:#fff; padding:12px 16px;
  border-radius:10px; font-size:13px; min-width:220px;
  display:flex; align-items:center; gap:10px;
  box-shadow:var(--shadow-lg); animation:toastIn .3s ease;
  border-left:4px solid var(--green);
}
.toast.err { border-left-color:var(--red); }
.toast.warn { border-left-color:var(--orange); }
@keyframes toastIn { from{opacity:0;transform:translateX(20px)} to{opacity:1;transform:none} }

/* ═══════════════ TABS ═══════════════ */
.tabs { display:flex; gap:2px; border-bottom:2px solid #f0f2f8; margin-bottom:16px; }
.tab-btn {
  padding:9px 16px; border:none; background:none; cursor:pointer;
  font-family:'Nunito',sans-serif; font-size:13px; font-weight:700;
  color:var(--text2); border-bottom:2px solid transparent; margin-bottom:-2px; transition:.15s;
}
.tab-btn.active { color:var(--blue); border-bottom-color:var(--blue); }
.tab-pane { display:none; }
.tab-pane.active { display:block; }

/* ═══════════════ UTILS ═══════════════ */
.hidden { display:none !important; }
.page { display:none; }
.page.active { display:block; }
.text-blue   { color:var(--blue); }
.text-green  { color:var(--green); }
.text-red    { color:var(--red); }
.text-orange { color:var(--orange); }
.text-muted  { color:var(--text2); }
.fw7 { font-weight:700; }
.fw8 { font-weight:800; }
.font-sora { font-family:'Sora',sans-serif; }
.mt8  { margin-top:8px; }
.mt12 { margin-top:12px; }
.mt16 { margin-top:16px; }
.gap8  { display:flex; gap:8px; align-items:center; }
.gap12 { display:flex; gap:12px; align-items:center; }
.flex-between { display:flex; align-items:center; justify-content:space-between; }
.grid2 { display:grid; grid-template-columns:1fr 1fr; gap:12px; }

/* ═══════════════ CALC BOX ═══════════════ */
.calc-box {
  background:linear-gradient(135deg,#eef0fd,#f0e8ff);
  border:1px solid #c7d2fe; border-radius:var(--radius);
  padding:14px 18px;
}
.calc-result {
  font-family:'Sora',sans-serif; font-size:18px; font-weight:700;
  color:var(--blue); margin-top:8px; min-height:28px;
}
.calc-formula { font-size:12px; color:var(--text2); margin-top:4px; }

/* ═══════════════ EMPTY ═══════════════ */
.empty { text-align:center; padding:48px 20px; color:var(--text2); }
.empty .emoji { font-size:40px; margin-bottom:12px; }
.empty p { font-size:13px; }

@media (max-width:1024px) { .stat-grid-4,.stat-grid-6 { grid-template-columns:repeat(2,1fr); } }
@media (max-width:768px)  { .sidebar { transform:translateX(-100%); } .main { margin-left:0; } }
::-webkit-scrollbar { width:5px; height:5px; }
::-webkit-scrollbar-thumb { background:#dde1f0; border-radius:3px; }