:root {
  --zy-green: #253e2c;
  --zy-green-light: #345b3f;
  --zy-green-pale: #eaf0e7;
  --zy-gold: #a88a47;
  --zy-gold-light: #c7a765;
  --zy-cream: #faf6ec;
  --zy-cream-deep: #f3ead8;
  --zy-charcoal: #323132;
}
body { font-family: 'Poppins', sans-serif; background: #f2f4f0; color: var(--zy-charcoal); }

.admin-sidebar {
  width: 250px; min-height: 100vh; background: var(--zy-green);
  position: fixed; top: 0; left: 0; z-index: 1030;
  transition: transform .25s ease;
}
.admin-sidebar .brand { padding: 20px 18px; border-bottom: 1px solid rgba(255,255,255,.1); }
.admin-sidebar .brand img { height: 38px; filter: brightness(0) invert(1); }
.admin-sidebar .nav-link {
  color: rgba(250,246,236,.75); padding: 11px 20px; font-size: .92rem; display: flex; align-items: center; gap: 10px;
  border-left: 3px solid transparent;
}
.admin-sidebar .nav-link i { width: 18px; text-align: center; }
.admin-sidebar .nav-link:hover { color: #fff; background: rgba(255,255,255,.05); }
.admin-sidebar .nav-link.active { color: #fff; background: rgba(255,255,255,.08); border-left-color: var(--zy-gold); }

.admin-content { margin-left: 250px; padding: 24px; min-height: 100vh; }
@media (max-width: 991px) {
  .admin-sidebar { transform: translateX(-100%); }
  .admin-sidebar.show { transform: translateX(0); }
  .admin-content { margin-left: 0; }
}

.admin-topbar {
  background: #fff; border-radius: 14px; padding: 14px 20px;
  display: flex; align-items: center; justify-content: space-between;
  box-shadow: 0 4px 14px rgba(37,62,44,.06); margin-bottom: 22px;
}

.stat-card { background: #fff; border-radius: 16px; padding: 22px; box-shadow: 0 4px 14px rgba(37,62,44,.06); height: 100%; }
.stat-card .icon { width: 50px; height: 50px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 1.3rem; margin-bottom: 12px; }
.stat-card h3 { margin-bottom: 2px; color: var(--zy-green); }

.admin-card { background: #fff; border-radius: 16px; padding: 22px; box-shadow: 0 4px 14px rgba(37,62,44,.06); }

.table-admin thead { background: var(--zy-green-pale); }
.table-admin thead th { color: var(--zy-green); font-weight: 600; font-size: .85rem; border: none; }
.table-admin td { vertical-align: middle; font-size: .9rem; }
.table-admin img.thumb { width: 44px; height: 44px; object-fit: cover; border-radius: 8px; background: var(--zy-cream-deep); }

.btn-zy { background: var(--zy-green); color: #fff; border: none; border-radius: 8px; padding: 8px 18px; font-weight: 600; font-size: .88rem; }
.btn-zy:hover { background: var(--zy-green-light); color: #fff; }
.btn-zy-gold { background: var(--zy-gold); color: var(--zy-green); border: none; border-radius: 8px; padding: 8px 18px; font-weight: 600; font-size: .88rem; }

.badge-status { padding: 5px 12px; border-radius: 50px; font-size: .75rem; font-weight: 600; }
.status-Received { background: #e3e8ff; color: #3b4bbf; }
.status-Confirmed { background: #dff3ff; color: #0d7fb0; }
.status-Processing { background: #fff3d6; color: #a87a00; }
.status-Packed { background: #eee0ff; color: #7429c9; }
.status-Shipped { background: #d9f0e4; color: #1f8a52; }
.status-Out-for-Delivery { background: #ffe6d6; color: #c65e15; }
.status-Delivered { background: var(--zy-green-pale); color: var(--zy-green); }
.status-Cancelled { background: #fde0e0; color: #b3452e; }

.login-wrap { min-height: 100vh; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, var(--zy-green), var(--zy-green-light)); }
.login-card { background: #fff; border-radius: 20px; padding: 40px; width: 100%; max-width: 400px; box-shadow: 0 20px 50px rgba(0,0,0,.25); }

.table-admin img.thumb-wide { width: 90px; height: 48px; object-fit: cover; border-radius: 8px; background: var(--zy-cream-deep); }

.timeline { list-style: none; padding-left: 22px; margin: 0; border-left: 2px solid var(--zy-cream-deep); }
.timeline li { position: relative; padding-bottom: 22px; }
.timeline li:last-child { padding-bottom: 0; }
.timeline li::before { content: ''; position: absolute; left: -28px; top: 4px; width: 12px; height: 12px; border-radius: 50%; background: var(--zy-gold); border: 2px solid #fff; box-shadow: 0 0 0 2px var(--zy-gold); }