/* =====================================================================
   FILE   : pengiriman.css
   MODUL  : Sistem Jadwal Pengiriman Otomatis - HealthyBox Catering
   TEMA   : Mustard Yellow (variabel nama tetap hb-green-* agar semua
            referensi di file lain tidak perlu diubah, hanya nilainya
            yang diganti ke nuansa mustard + warna pendukung selaras)
   ===================================================================== */

:root {
  --hb-green-dark: #8A6A0F;   /* mustard tua - untuk teks judul & aksen gelap */
  --hb-green: #D9A404;        /* mustard utama */
  --hb-green-light: #E8C547;  /* mustard muda */
  --hb-green-bg: #FFF6DE;     /* krem lembut untuk background */
  --hb-white: #FFFFFF;
  --hb-text: #2E2510;
  --hb-text-muted: #7A6A45;
  --hb-shadow: 0 6px 18px rgba(154, 116, 8, 0.12);
  --hb-shadow-hover: 0 10px 26px rgba(154, 116, 8, 0.20);
  --hb-radius: 16px;
  --hb-radius-sm: 10px;
  --hb-font: 'Poppins', 'Segoe UI', sans-serif;
}

* {
  box-sizing: border-box;
}

body.hb-body {
  font-family: var(--hb-font);
  background-color: var(--hb-green-bg);
  background-image:
    radial-gradient(circle at top right, rgba(217, 164, 4, 0.08), transparent 45%),
    radial-gradient(circle at bottom left, rgba(232, 197, 71, 0.14), transparent 40%);
  color: var(--hb-text);
  min-height: 100vh;
}

/* ===================== NAVBAR ===================== */
.hb-navbar {
  background: linear-gradient(135deg, var(--hb-green-dark), var(--hb-green));
  box-shadow: var(--hb-shadow);
}

.hb-navbar .navbar-brand {
  font-weight: 700;
  letter-spacing: 0.3px;
  color: var(--hb-white) !important;
}

.hb-navbar .navbar-brand .bi {
  margin-right: 6px;
}

.hb-navbar .nav-link {
  color: rgba(255, 255, 255, 0.88) !important;
  font-weight: 500;
  transition: color 0.2s ease;
}

.hb-navbar .nav-link.active,
.hb-navbar .nav-link:hover {
  color: var(--hb-white) !important;
}

.hb-badge-role {
  background: rgba(255, 255, 255, 0.18);
  color: var(--hb-white);
  border-radius: 50px;
  padding: 4px 14px;
  font-size: 0.78rem;
  font-weight: 600;
}

/* ===================== LAYOUT ===================== */
.hb-page-wrap {
  padding: 28px 0 60px;
}

.hb-page-header {
  margin-bottom: 24px;
}

.hb-page-header h2 {
  font-weight: 700;
  color: var(--hb-green-dark);
  margin-bottom: 2px;
}

.hb-page-header p {
  color: var(--hb-text-muted);
  margin-bottom: 0;
}

/* ===================== STAT CARDS ===================== */
.hb-stat-card {
  background: var(--hb-white);
  border-radius: var(--hb-radius);
  border: none;
  box-shadow: var(--hb-shadow);
  padding: 20px 22px;
  height: 100%;
  position: relative;
  overflow: hidden;
  transition: transform 0.22s ease, box-shadow 0.22s ease;
}

.hb-stat-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--hb-shadow-hover);
}

.hb-stat-card .hb-stat-icon {
  width: 48px;
  height: 48px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  margin-bottom: 14px;
  color: var(--hb-white);
}

.hb-stat-card .hb-stat-value {
  font-size: 1.9rem;
  font-weight: 700;
  line-height: 1;
  color: var(--hb-text);
}

.hb-stat-card .hb-stat-label {
  font-size: 0.85rem;
  color: var(--hb-text-muted);
  font-weight: 500;
  margin-top: 4px;
}

.bg-icon-total { background: var(--hb-green-dark); }
.bg-icon-jadwal{ background:#f59e0b; }
.bg-icon-proses { background: #C97C1C; }
.bg-icon-jalan { background: #4A90A4; }
.bg-icon-sukses { background: var(--hb-green); }
.bg-icon-gagal { background: #D9534F; }

/* ===================== CARD UTAMA ===================== */
.hb-card {
  background: var(--hb-white);
  border: none;
  border-radius: var(--hb-radius);
  box-shadow: var(--hb-shadow);
  padding: 22px 24px;
}

.hb-card-title {
  font-weight: 700;
  color: var(--hb-green-dark);
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 18px;
}

/* ===================== FILTER BAR ===================== */
.hb-filter-bar .form-control,
.hb-filter-bar .form-select {
  border-radius: var(--hb-radius-sm);
  border: 1px solid #d9e8da;
  font-size: 0.92rem;
}

.hb-filter-bar .form-control:focus,
.hb-filter-bar .form-select:focus {
  border-color: var(--hb-green);
  box-shadow: 0 0 0 0.2rem rgba(76, 175, 80, 0.18);
}

.hb-search-wrap {
  position: relative;
}

.hb-search-wrap .bi-search {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--hb-text-muted);
}

.hb-search-wrap input {
  padding-left: 38px;
}

/* ===================== TABEL ===================== */
.hb-table-wrap {
  overflow-x: auto;
}

table.hb-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
}

table.hb-table thead th {
  background: var(--hb-green-bg);
  color: var(--hb-green-dark);
  font-weight: 600;
  font-size: 0.82rem;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  border: none;
  padding: 12px 14px;
  white-space: nowrap;
}

table.hb-table thead th:first-child { border-radius: 10px 0 0 10px; }
table.hb-table thead th:last-child { border-radius: 0 10px 10px 0; }

table.hb-table tbody td {
  padding: 14px;
  vertical-align: middle;
  border-bottom: 1px solid #eef5ee;
  font-size: 0.9rem;
}

table.hb-table tbody tr {
  transition: background 0.18s ease;
}

table.hb-table tbody tr:hover {
  background: var(--hb-green-bg);
}

.hb-id-pill {
  background: var(--hb-green-bg);
  color: var(--hb-green-dark);
  font-weight: 600;
  font-size: 0.78rem;
  padding: 4px 10px;
  border-radius: 50px;
}

/* ===================== BADGE STATUS & ZONA ===================== */
.badge-status {
  padding: 6px 12px;
  font-weight: 600;
  font-size: 0.76rem;
  border-radius: 50px;
  letter-spacing: 0.2px;
}

.badge-Dijadwalkan { background: #E3F2FD; color: #1565C0; }
.badge-Diproses { background: #FFF3E0; color: #E65100; }
.badge-Dalam-Perjalanan { background: #E1F5FE; color: #0277BD; }
.badge-Terkirim { background: var(--hb-green-bg); color: var(--hb-green-dark); }
.badge-Gagal-Dikirim { background: #FFEBEE; color: #C62828; }
.badge-status-unknown { background: #F1EDE3; color: #6B6455; }

.badge-zona {
  padding: 5px 11px;
  border-radius: 50px;
  font-size: 0.76rem;
  font-weight: 600;
  background: var(--hb-green-light);
  color: var(--hb-white);
}

/* ===================== BUTTON ===================== */
.btn-hb-primary {
  background: linear-gradient(135deg, var(--hb-green-dark), var(--hb-green));
  border: none;
  color: var(--hb-white);
  font-weight: 600;
  border-radius: var(--hb-radius-sm);
  padding: 9px 18px;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.btn-hb-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 18px rgba(46, 125, 50, 0.28);
  color: var(--hb-white);
}

.btn-hb-outline {
  border: 1.5px solid var(--hb-green);
  color: var(--hb-green-dark);
  background: var(--hb-white);
  font-weight: 600;
  border-radius: var(--hb-radius-sm);
  transition: all 0.18s ease;
}

.btn-hb-outline:hover {
  background: var(--hb-green);
  color: var(--hb-white);
}

.btn-hb-danger {
  border: 1.5px solid #EF5350;
  color: #C62828;
  background: var(--hb-white);
  font-weight: 600;
  border-radius: var(--hb-radius-sm);
  transition: all 0.18s ease;
}

.btn-hb-danger:hover {
  background: #EF5350;
  color: var(--hb-white);
}

.btn-icon-sm {
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 9px;
}

/* ===================== PAGINATION ===================== */
.hb-pagination .page-link {
  color: var(--hb-green-dark);
  border-radius: 8px;
  margin: 0 3px;
  border: 1px solid #dcebdd;
}

.hb-pagination .page-item.active .page-link {
  background: var(--hb-green);
  border-color: var(--hb-green);
  color: var(--hb-white);
}

/* ===================== KARTU KURIR (mobile-first) ===================== */
.hb-kurir-card {
  background: var(--hb-white);
  border-radius: var(--hb-radius);
  box-shadow: var(--hb-shadow);
  padding: 18px;
  margin-bottom: 16px;
  border-left: 5px solid var(--hb-green);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

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

.hb-kurir-card .hb-kurir-nama {
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--hb-text);
}

.hb-kurir-card .hb-kurir-info {
  font-size: 0.86rem;
  color: var(--hb-text-muted);
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 4px;
}

.hb-kurir-card .hb-kurir-actions {
  margin-top: 14px;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.hb-kurir-summary {
  display: flex;
  gap: 12px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}

.hb-kurir-summary .hb-mini-stat {
  background: var(--hb-white);
  border-radius: 12px;
  padding: 12px 18px;
  box-shadow: var(--hb-shadow);
  flex: 1;
  min-width: 130px;
  text-align: center;
}

.hb-kurir-summary .hb-mini-stat .num {
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--hb-green-dark);
}

.hb-kurir-summary .hb-mini-stat .lbl {
  font-size: 0.76rem;
  color: var(--hb-text-muted);
}

/* ===================== TRACKING TIMELINE ===================== */
.hb-tracking-card {
  background: var(--hb-white);
  border-radius: var(--hb-radius);
  box-shadow: var(--hb-shadow);
  padding: 26px;
}

.hb-tracking-header {
  text-align: center;
  margin-bottom: 24px;
}

.hb-tracking-header .hb-tracking-id {
  color: var(--hb-text-muted);
  font-size: 0.85rem;
}

.hb-timeline {
  list-style: none;
  padding: 0;
  margin: 26px 0;
  position: relative;
}

.hb-timeline-item {
  position: relative;
  padding-left: 48px;
  padding-bottom: 32px;
}

.hb-timeline-item:last-child {
  padding-bottom: 0;
}

.hb-timeline-item::before {
  content: '';
  position: absolute;
  left: 17px;
  top: 38px;
  bottom: -6px;
  width: 3px;
  background: #e0ece0;
}

.hb-timeline-item:last-child::before {
  display: none;
}

.hb-timeline-item.active::before {
  background: var(--hb-green);
}

.hb-timeline-icon {
  position: absolute;
  left: 0;
  top: 0;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #e9eee9;
  color: #aab8ab;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  border: 3px solid var(--hb-white);
  box-shadow: 0 0 0 2px #e0ece0;
}

.hb-timeline-item.active .hb-timeline-icon {
  background: var(--hb-green);
  color: var(--hb-white);
  box-shadow: 0 0 0 2px var(--hb-green);
}

.hb-timeline-item.failed .hb-timeline-icon {
  background: #EF5350;
  color: var(--hb-white);
  box-shadow: 0 0 0 2px #EF5350;
}

.hb-timeline-item.failed::before {
  background: #EF5350;
}

.hb-timeline-title {
  font-weight: 700;
  font-size: 0.96rem;
  color: var(--hb-text);
}

.hb-timeline-item.active .hb-timeline-title {
  color: var(--hb-green-dark);
}

.hb-timeline-item.failed .hb-timeline-title {
  color: #C62828;
}

.hb-timeline-time {
  font-size: 0.78rem;
  color: var(--hb-text-muted);
  margin-top: 2px;
}

.hb-timeline-desc {
  font-size: 0.85rem;
  color: var(--hb-text-muted);
  margin-top: 4px;
}

/* ===================== NOTIFIKASI TOAST ===================== */
.hb-toast-success { border-left: 5px solid var(--hb-green); }
.hb-toast-danger { border-left: 5px solid #EF5350; }
.hb-toast-info { border-left: 5px solid #29B6F6; }

/* ===================== ILUSTRASI DEKORATIF ===================== */
.hb-decor-icon {
  position: absolute;
  opacity: 0.10;
  pointer-events: none;
}

.hb-hero-illustration {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  margin-bottom: 10px;
}

.hb-hero-illustration svg {
  height: 56px;
}

/* ===================== LOGIN CARD ===================== */
.hb-login-wrap {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.hb-login-card {
  background: var(--hb-white);
  border-radius: 20px;
  box-shadow: var(--hb-shadow-hover);
  max-width: 420px;
  width: 100%;
  padding: 38px 32px;
}

/* ===================== EMPTY STATE ===================== */
.hb-empty-state {
  text-align: center;
  padding: 50px 20px;
  color: var(--hb-text-muted);
}

.hb-empty-state .bi {
  font-size: 2.6rem;
  color: var(--hb-green-light);
  margin-bottom: 10px;
}

/* ===================== RESPONSIVE ===================== */
@media (max-width: 767px) {
  .hb-stat-card .hb-stat-value { font-size: 1.5rem; }
  .hb-card { padding: 16px; }
  table.hb-table tbody td,
  table.hb-table thead th { font-size: 0.82rem; padding: 10px 8px; }
}

/* Scrollbar halus */
::-webkit-scrollbar { height: 8px; width: 8px; }
::-webkit-scrollbar-thumb { background: var(--hb-green-light); border-radius: 10px; }
::-webkit-scrollbar-track { background: transparent; }