/* ═══════════════════════════════════════════════════════
   HBC — Professional Dashboard UI  (admin + delivery)
   ═══════════════════════════════════════════════════════ */

/* ── Design tokens ── */
:root {
  --hbc-green: #1a6b4f;
  --hbc-green-light: #22a06b;
  --hbc-green-dim: rgba(26,107,79,.08);
  --hbc-amber: #d97706;
  --hbc-red: #dc2626;
  --hbc-blue: #2563eb;
  --hbc-surface: #f7f8fa;
  --hbc-card: #ffffff;
  --hbc-border: #e8eaed;
  --hbc-text: #111827;
  --hbc-muted: #6b7280;
  --hbc-sidebar-bg: #0f1e16;
  --hbc-sidebar-text: rgba(255,255,255,.82);
  --hbc-sidebar-active: #1a6b4f;
  --hbc-topbar: #ffffff;
  --hbc-shadow: 0 1px 4px rgba(0,0,0,.06), 0 4px 16px rgba(0,0,0,.04);
  --hbc-shadow-hover: 0 4px 20px rgba(0,0,0,.10);
  --hbc-radius: 14px;
}

/* ── Reset layout ── */
body.admin-body {
  display: flex;
  min-height: 100vh;
  background: var(--hbc-surface);
  color: var(--hbc-text);
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

/* ══ SIDEBAR ══════════════════════════════════════════ */
.admin-sidebar {
  width: 230px;
  min-height: 100vh;
  background: var(--hbc-sidebar-bg);
  display: flex;
  flex-direction: column;
  padding: 0 0 24px;
  position: fixed;
  top: 0; left: 0; bottom: 0;
  z-index: 100;
  box-shadow: 2px 0 16px rgba(0,0,0,.15);
  overflow-y: auto;
}

.admin-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 20px 18px;
  border-bottom: 1px solid rgba(255,255,255,.06);
  text-decoration: none;
  color: #fff;
  margin-bottom: 8px;
}
.admin-brand .brand-mark {
  width: 36px; height: 36px;
  background: var(--hbc-green);
  border-radius: 10px;
  display: grid; place-items: center;
  font-size: 12px; font-weight: 900;
  color: #fff; flex-shrink: 0;
}
.admin-brand strong { display: block; font-size: 13px; font-weight: 800; color: #fff; line-height: 1.2; }
.admin-brand small { font-size: 10px; color: rgba(255,255,255,.4); font-weight: 500; }

.admin-nav {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 0 10px;
  flex: 1;
}
.admin-nav button,
.admin-nav a {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 9px 12px;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 600;
  color: var(--hbc-sidebar-text);
  background: transparent;
  border: none;
  cursor: pointer;
  text-align: left;
  text-decoration: none;
  transition: background .15s, color .15s;
  white-space: nowrap;
  width: 100%;
}
.admin-nav button:hover,
.admin-nav a:hover {
  background: rgba(255,255,255,.07);
  color: #fff;
}
.admin-nav button.active {
  background: var(--hbc-green);
  color: #fff;
  font-weight: 700;
}
.admin-nav a[href="index.html"] {
  background: rgba(255,255,255,.04);
  color: rgba(255,255,255,.55);
  border: 1px solid rgba(255,255,255,.08);
  margin-top: 4px;
  font-size: 12px;
}
.admin-nav a[href="index.html"]:hover {
  background: rgba(255,255,255,.1);
  color: #fff;
}
/* nav section divider */
.admin-nav .nav-divider {
  height: 1px;
  background: rgba(255,255,255,.06);
  margin: 8px 0;
  width: 100%;
}
.admin-nav button[type="button"]:last-child {
  color: rgba(255,100,100,.7);
  margin-top: auto;
}
.admin-tip {
  margin: 12px 14px 0;
  background: rgba(26,107,79,.15);
  border: 1px solid rgba(26,107,79,.25);
  border-radius: 8px;
  padding: 8px 10px;
  font-size: 11px;
  color: rgba(255,255,255,.5);
  line-height: 1.4;
}

/* ══ MAIN AREA ════════════════════════════════════════ */
.admin-main {
  margin-left: 230px;
  flex: 1;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* ── Topbar ── */
.admin-topbar {
  background: var(--hbc-topbar);
  border-bottom: 1px solid var(--hbc-border);
  padding: 14px 28px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: sticky;
  top: 0; z-index: 90;
}
.admin-topbar .eyebrow {
  font-size: 10px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 1.2px;
  color: var(--hbc-green); margin: 0 0 2px;
}
.admin-topbar h1 {
  font-size: 20px; font-weight: 900; margin: 0;
  color: var(--hbc-text);
}
.admin-actions { display: flex; gap: 10px; align-items: center; }

/* ── Tab content area ── */
.admin-tab { display: none; padding: 24px 28px 40px; box-sizing: border-box; width: 100%; }
.admin-tab.active { display: block; }

/* ══ KPI STAT CARDS ══════════════════════════════════ */
.kpi-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin-bottom: 22px;
}
.kpi-card {
  background: var(--hbc-card);
  border-radius: var(--hbc-radius);
  padding: 18px 20px;
  box-shadow: var(--hbc-shadow);
  border: 1px solid var(--hbc-border);
  display: flex;
  flex-direction: column;
  gap: 6px;
  transition: box-shadow .2s;
  position: relative;
  overflow: hidden;
}
.kpi-card:hover { box-shadow: var(--hbc-shadow-hover); }
.kpi-card::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: var(--kpi-accent, var(--hbc-green));
  border-radius: var(--hbc-radius) var(--hbc-radius) 0 0;
}
.kpi-icon {
  width: 36px; height: 36px;
  border-radius: 9px;
  display: grid; place-items: center;
  font-size: 18px;
  background: var(--hbc-green-dim);
  margin-bottom: 4px;
}
.kpi-label {
  font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .8px; color: var(--hbc-muted);
}
.kpi-value {
  font-size: 26px; font-weight: 900; color: var(--hbc-text); line-height: 1;
}
.kpi-sub {
  font-size: 11px; color: var(--hbc-muted); margin-top: 2px;
}
.kpi-trend {
  font-size: 11px; font-weight: 700;
  padding: 2px 6px; border-radius: 20px;
  display: inline-block; margin-top: 2px;
}
.kpi-trend.up { background: #dcfce7; color: #15803d; }
.kpi-trend.neutral { background: #f3f4f6; color: #6b7280; }

/* ── old metric-grid compat ── */
.metric-grid { display: none; }

/* ══ ADMIN GRID LAYOUTS ══════════════════════════════ */
.admin-grid-two {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  margin-bottom: 18px;
}
.analytics-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  margin-bottom: 18px;
}
.admin-grid-full { grid-column: 1 / -1; }

/* ══ CARDS ════════════════════════════════════════════ */
.admin-card {
  background: var(--hbc-card);
  border-radius: var(--hbc-radius);
  border: 1px solid var(--hbc-border);
  box-shadow: var(--hbc-shadow);
  padding: 20px 22px;
}
.admin-card-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 14px;
}
.admin-card h2 {
  font-size: 14px; font-weight: 800;
  color: var(--hbc-text); margin: 0 0 2px;
}
.admin-card > p { font-size: 12px; color: var(--hbc-muted); margin: 0 0 14px; }

/* ── Revenue chart box ── */
.chart-box {
  background: var(--hbc-card);
  border-radius: var(--hbc-radius);
  border: 1px solid var(--hbc-border);
  box-shadow: var(--hbc-shadow);
  padding: 20px 22px;
  margin-bottom: 18px;
}
.chart-box h2 { font-size: 14px; font-weight: 800; margin: 0 0 14px; }
.chart-box canvas { display: block; width: 100% !important; }

.revenue-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.revenue-summary-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 14px;
}

.revenue-summary-card {
  padding: 14px;
  border-radius: 12px;
  background: var(--hbc-surface);
  border: 1px solid var(--hbc-border);
}

.revenue-summary-card small {
  display: block;
  color: var(--hbc-muted);
  font-size: 11px;
  font-weight: 800;
  margin-bottom: 4px;
}

.revenue-summary-card strong {
  color: var(--hbc-green);
  font-size: 18px;
  font-weight: 900;
}

.revenue-chart-wrap {
  width: 100%;
  overflow-x: auto;
  border: 1px solid var(--hbc-border);
  border-radius: 12px;
  background: #fff;
  padding: 8px;
}

.revenue-chart-wrap canvas {
  display: block;
  min-width: 720px;
  width: 100%;
}

.homepage-media-preview {
  margin-top: 12px;
}

.homepage-media-preview img,
.homepage-media-preview video,
.media-admin-thumb img,
.media-admin-thumb video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 10px;
  background: #f3f4f6;
}

.homepage-media-preview img,
.homepage-media-preview video {
  max-height: 240px;
  object-fit: contain;
  border: 1px solid var(--hbc-border);
}

.media-admin-item {
  align-items: stretch;
}

.media-admin-thumb {
  width: 74px;
  height: 88px;
  flex: 0 0 74px;
}

/* ══ ORDER LIST ITEMS ════════════════════════════════ */
.admin-list { display: flex; flex-direction: column; gap: 10px; }

.admin-list-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  background: var(--hbc-surface);
  border-radius: 10px;
  border: 1px solid var(--hbc-border);
  font-size: 13px;
}
.admin-list-item strong { font-size: 13px; font-weight: 800; }
.admin-list-item small { font-size: 11px; color: var(--hbc-muted); display: block; margin-top: 1px; }

.order-admin-list { display: flex; flex-direction: column; gap: 14px; }

.order-admin-card {
  background: var(--hbc-card);
  border: 1px solid var(--hbc-border);
  border-radius: 12px;
  padding: 16px 18px;
  box-shadow: var(--hbc-shadow);
  transition: box-shadow .2s;
}
.order-admin-card:hover { box-shadow: var(--hbc-shadow-hover); }
.order-admin-head {
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
}
.order-admin-head h3 { font-size: 14px; font-weight: 800; margin: 0 0 2px; }
.order-admin-head p { font-size: 12px; color: var(--hbc-muted); margin: 0; }
.order-admin-card p { font-size: 13px; margin: 6px 0; }

/* ── Order action buttons ── */
.order-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--hbc-border); }
.order-actions button {
  padding: 6px 14px;
  border-radius: 8px;
  font-size: 12px; font-weight: 700;
  border: 1px solid var(--hbc-border);
  background: #fff;
  cursor: pointer;
  transition: all .15s;
}
.order-actions button:hover { background: var(--hbc-surface); border-color: #ccc; }
.order-actions button.danger { color: var(--hbc-red); border-color: #fecaca; }
.order-actions button.danger:hover { background: #fef2f2; }

/* ══ STATUS BADGES ══════════════════════════════════ */
.status-badge {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 9px; border-radius: 20px;
  font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .5px;
}
.status-badge.placed        { background:#dbeafe; color:#1e40af; }
.status-badge.accepted       { background:#d1fae5; color:#065f46; }
.status-badge.preparing      { background:#fef3c7; color:#92400e; }
.status-badge.packed         { background:#e0e7ff; color:#3730a3; }
.status-badge.assigned       { background:#fce7f3; color:#9d174d; }
.status-badge.picked_up      { background:#f0fdf4; color:#166534; }
.status-badge.out-for-delivery { background:#ecfdf5; color:#065f46; }
.status-badge.delivered      { background:#dcfce7; color:#15803d; }
.status-badge.rejected       { background:#fee2e2; color:#991b1b; }
.status-badge.pending_approval { background:#fef9c3; color:#a16207; }

/* ══ BAR CHART (branch/category) ════════════════════ */
.bar-line { margin-bottom: 12px; }
.bar-label { display: flex; justify-content: space-between; font-size: 12px; margin-bottom: 5px; font-weight: 600; }
.bar-track { height: 7px; background: #e8eaed; border-radius: 99px; overflow: hidden; }
.bar-fill  { height: 100%; background: linear-gradient(90deg, var(--hbc-green), var(--hbc-green-light)); border-radius: 99px; transition: width .4s ease; }

/* ══ BADGE ═══════════════════════════════════════════ */
.badge {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 22px; height: 22px;
  background: var(--hbc-red); color: #fff;
  border-radius: 99px; font-size: 11px; font-weight: 900;
  padding: 0 6px;
}
.badge:empty, .badge[data-count="0"] { background: var(--hbc-green); }

/* ══ FORMS ════════════════════════════════════════════ */
.admin-form { display: grid; gap: 12px; }
.admin-form label { display: flex; flex-direction: column; gap: 5px; font-size: 12px; font-weight: 700; color: var(--hbc-muted); }
.admin-form label.wide { grid-column: 1 / -1; }
.admin-form input, .admin-form select, .admin-form textarea {
  padding: 9px 12px;
  border: 1px solid var(--hbc-border);
  border-radius: 9px;
  font-size: 13px;
  background: var(--hbc-surface);
  color: var(--hbc-text);
  width: 100%;
  outline: none;
  transition: border .15s;
}
.admin-form input:focus, .admin-form select:focus, .admin-form textarea:focus {
  border-color: var(--hbc-green); background: #fff;
}
.admin-form textarea { resize: vertical; min-height: 80px; }

.admin-form select[multiple] {
  min-height: 96px;
}

/* ══ BUTTONS ══════════════════════════════════════════ */
.btn {
  padding: 9px 18px; border-radius: 10px;
  font-size: 13px; font-weight: 700;
  border: 1px solid transparent; cursor: pointer;
  transition: all .15s; white-space: nowrap;
}
.btn.primary   { background: var(--hbc-green); color: #fff; border-color: var(--hbc-green); }
.btn.primary:hover { background: #155e43; }
.btn.secondary { background: #fff; color: var(--hbc-text); border-color: var(--hbc-border); }
.btn.secondary:hover { background: var(--hbc-surface); }
.btn.wood      { background: #7c4a1e; color: #fff; border-color: #7c4a1e; }
.btn.wood:hover { background: #6a3e18; }
.btn.small     { padding: 5px 12px; font-size: 12px; border-radius: 8px; }
.btn.danger    { background: #fee2e2; color: var(--hbc-red); border-color: #fecaca; }

/* ══ BRANCH SETTINGS ════════════════════════════════ */
.branch-settings { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px,1fr)); gap: 14px; }
.branch-setting-card {
  border: 1px solid var(--hbc-border); border-radius: 12px;
  padding: 16px; background: var(--hbc-surface);
  display: flex; flex-direction: column; gap: 10px;
}
.branch-setting-card h3 { font-size: 14px; font-weight: 800; margin: 0 0 4px; }
.branch-setting-card label { font-size: 12px; font-weight: 600; color: var(--hbc-muted); display: flex; flex-direction: column; gap: 4px; }
.branch-setting-card input {
  padding: 7px 10px; border: 1px solid var(--hbc-border);
  border-radius: 8px; font-size: 13px; background: #fff;
}

/* ══ SCROLL LIST ════════════════════════════════════ */
.scroll-list { max-height: 520px; overflow-y: auto; display: flex; flex-direction: column; gap: 8px; }
.scroll-list::-webkit-scrollbar { width: 4px; }
.scroll-list::-webkit-scrollbar-thumb { background: #ccc; border-radius: 4px; }

.empty-state {
  padding: 24px; text-align: center;
  color: var(--hbc-muted); font-size: 13px;
  background: var(--hbc-surface); border-radius: 10px;
  border: 1px dashed var(--hbc-border);
}

/* ══ PRODUCT ADMIN ══════════════════════════════════ */
.product-admin-thumb {
  width: 42px; height: 42px; object-fit: cover;
  border-radius: 8px; border: 1px solid var(--hbc-border);
}
.product-admin-actions { display: flex; gap: 6px; }

/* ══ LOGIN GATE ═════════════════════════════════════ */
.admin-login-gate {
  position: fixed; inset: 0; z-index: 9999;
  background: var(--hbc-sidebar-bg);
  display: flex; align-items: stretch;
}
.admin-login-gate.is-hidden { display: none; }
.login-split-container { display: flex; width: 100%; }
.login-left {
  display: flex; align-items: center; justify-content: center;
  flex: 1; padding: 40px;
}
.login-right { flex: 1; overflow: hidden; }
.login-image { width: 100%; height: 100%; object-fit: cover; }

.admin-login-card {
  background: #fff; border-radius: 18px;
  padding: 36px 32px; width: 100%; max-width: 400px;
  display: flex; flex-direction: column; gap: 14px;
  box-shadow: 0 24px 80px rgba(0,0,0,.4);
}
.admin-login-card h1 { font-size: 22px; font-weight: 900; margin: 0 0 4px; color: var(--hbc-text); }
.admin-login-card p { font-size: 13px; color: var(--hbc-muted); margin: 0; }
.admin-login-card label { display: flex; flex-direction: column; gap: 5px; font-size: 12px; font-weight: 700; color: var(--hbc-muted); }
.admin-login-card input {
  padding: 11px 14px; border: 1px solid var(--hbc-border);
  border-radius: 10px; font-size: 14px; background: var(--hbc-surface);
  outline: none;
}
.admin-login-card input:focus { border-color: var(--hbc-green); background: #fff; }
.admin-login-card button[type="submit"] {
  padding: 13px; border-radius: 12px; background: var(--hbc-green);
  color: #fff; border: none; font-size: 14px; font-weight: 800;
  cursor: pointer; transition: background .15s;
}
.admin-login-card button[type="submit"]:hover { background: #155e43; }
.fine-print { font-size: 11px; color: var(--hbc-muted); margin: 0; }

/* ══ TOAST ═══════════════════════════════════════════ */
.toast {
  position: fixed; bottom: 24px; right: 24px;
  background: #fff; color: #1b1b1b;
  border: 1px solid rgba(0, 0, 0, .08);
  padding: 12px 18px; border-radius: 12px;
  font-size: 13px; font-weight: 600;
  box-shadow: 0 8px 32px rgba(0,0,0,.18);
  opacity: 0; pointer-events: none;
  transition: opacity .25s, transform .25s;
  transform: translateY(8px);
  z-index: 99999; max-width: 320px;
}
.toast.show { opacity: 1; pointer-events: auto; transform: translateY(0); }

/* ══ DELIVERY DASHBOARD SPECIFIC ════════════════════ */
.delivery-stats-bar {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-bottom: 20px;
}
.delivery-stat-tile {
  background: var(--hbc-card);
  border-radius: var(--hbc-radius);
  border: 1px solid var(--hbc-border);
  padding: 16px 18px;
  box-shadow: var(--hbc-shadow);
  display: flex; flex-direction: column; gap: 4px;
}
.delivery-stat-tile .dst-icon { font-size: 20px; margin-bottom: 4px; }
.delivery-stat-tile .dst-val { font-size: 22px; font-weight: 900; color: var(--hbc-text); }
.delivery-stat-tile .dst-lbl { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .7px; color: var(--hbc-muted); }

.delivery-branch-badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 14px;
  background: var(--hbc-green-dim);
  color: var(--hbc-green);
  border-radius: 8px;
  font-size: 12px; font-weight: 800;
  margin-top: 6px;
}

.delivery-status-update { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 14px; }
.delivery-status-update button {
  padding: 7px 14px; border-radius: 9px;
  font-size: 12px; font-weight: 700;
  border: 1px solid var(--hbc-border);
  background: #fff; cursor: pointer; transition: all .15s;
}
.delivery-status-update button.active {
  background: var(--hbc-green); color: #fff; border-color: var(--hbc-green);
}
.order-assigned-time { font-size: 11px; color: var(--hbc-muted); margin-top: 4px; }

/* ── Pending notif badge ── */
.pending-notif-badge {
  display: none; background: var(--hbc-red); color: #fff;
  font-size: 10px; font-weight: 900;
  padding: 1px 6px; border-radius: 99px; margin-left: auto;
}
.pending-notif-badge.show { display: inline-flex; }

/* ══ BACK TO DASHBOARD BAR ══════════════════════════ */
:root { --back-bar-h: 44px; }

#backToDashboardBar {
  display: none;
  position: fixed; top: 0; left: 0; right: 0; z-index: 99990;
  height: var(--back-bar-h);
  background: var(--hbc-sidebar-bg);
  color: #fff;
  padding: 0 20px;
  font-size: 13px; font-weight: 700;
  align-items: center; gap: 14px;
  box-shadow: 0 2px 12px rgba(0,0,0,.3);
}
#backToDashboardBar.show { display: flex; }
#backToDashboardBar a {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 14px; border-radius: 8px;
  background: var(--hbc-green); color: #fff;
  text-decoration: none; font-size: 12px; font-weight: 800;
  transition: background .15s; white-space: nowrap;
}
#backToDashboardBar a:hover { background: #155e43; }
#backToDashboardBar span { color: rgba(255,255,255,.5); font-weight: 500; font-size: 12px; }

/* Push the fixed customer nav down so it sits BELOW the back bar */
body.has-back-bar .nav-wrap {
  top: var(--back-bar-h) !important;
}
/* Push page body content down past both bars */
body.has-back-bar {
  padding-top: var(--back-bar-h);
}
/* Hide customer-only nav controls when staff is previewing */
body.has-back-bar .account-button,
body.has-back-bar .cart-button {
  display: none !important;
}
/* Block add-to-cart interactions in staff preview mode */
body.has-back-bar .add-btn,
body.has-back-bar .qty,
body.has-back-bar .qty-btn,
body.has-back-bar button[onclick*="addToCart"],
body.has-back-bar button[onclick*="openCart"],
body.has-back-bar button[onclick*="quickAdd"],
body.has-back-bar button[onclick*="placeOrder"] {
  pointer-events: none !important;
  opacity: 0.35 !important;
  cursor: not-allowed !important;
}
/* Staff preview mode banner on the hero */
body.has-back-bar::after {
  content: 'View Only — Ordering disabled for staff';
  position: fixed;
  bottom: 20px; left: 50%; transform: translateX(-50%);
  background: rgba(15,30,22,.9);
  color: rgba(255,255,255,.85);
  font-size: 12px; font-weight: 700;
  padding: 8px 18px; border-radius: 99px;
  z-index: 99980; white-space: nowrap;
  pointer-events: none;
}

/* ══ REVENUE ALERT CARD (overview) ══════════════════ */
.rev-alert-card {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 14px; border-radius: 10px;
  border: 1px solid #d1fae5; background: #f0fdf4;
  margin-bottom: 8px;
}
.rev-alert-card strong { font-size: 13px; font-weight: 800; }
.rev-alert-card small { font-size: 11px; color: var(--hbc-muted); display: block; margin-top: 2px; }
.rev-alert-card .rev-amount { font-size: 16px; font-weight: 900; color: var(--hbc-green); }

/* ══ USER DASHBOARD — PROFESSIONAL REDESIGN ═════════ */

/* Header */
.udash-header {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 28px 32px;
  background: linear-gradient(135deg, #0f1e16 0%, #1a3828 100%);
  border-radius: 18px;
  margin-bottom: 20px;
  color: #fff;
}
.udash-avatar-ring {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: linear-gradient(135deg, #22a06b, #1a6b4f);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  font-weight: 900;
  color: #fff;
  flex-shrink: 0;
  border: 3px solid rgba(255,255,255,.2);
  overflow: hidden;
}
.udash-header-text { flex: 1; }
.udash-header-text .kicker { color: rgba(255,255,255,.6); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .8px; margin: 0 0 4px; }
.udash-header-text h2 { margin: 0 0 4px; font-size: 22px; font-weight: 800; color: #fff; }
.udash-header-text p { margin: 0; font-size: 12px; color: rgba(255,255,255,.6); }
.dashboard-actions { display: flex; flex-direction: column; gap: 8px; }
.dashboard-actions button {
  padding: 9px 20px;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 700;
  border: none;
  cursor: pointer;
  transition: opacity .15s;
}
.dashboard-actions button:first-child { background: #22a06b; color: #fff; }
.dashboard-actions button:last-child { background: rgba(255,255,255,.12); color: rgba(255,255,255,.85); }
.dashboard-actions button:hover { opacity: .85; }

/* KPI row */
.udash-kpi-row {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 12px;
  margin-bottom: 20px;
}
.udash-kpi {
  background: #fff;
  border: 1px solid var(--hbc-border);
  border-radius: 12px;
  padding: 14px 12px 12px;
  text-align: center;
  box-shadow: var(--hbc-shadow);
  transition: box-shadow .2s, transform .15s;
}
.udash-kpi:hover { box-shadow: var(--hbc-shadow-hover); transform: translateY(-1px); }
.udash-kpi strong {
  display: block;
  font-size: 14px;
  font-weight: 800;
  color: var(--hbc-text);
  line-height: 1.2;
  margin-bottom: 3px;
  white-space: normal;
  word-break: break-word;
}
.udash-kpi small { font-size: 10px; color: var(--hbc-muted); text-transform: uppercase; letter-spacing: .4px; }
.udash-kpi-branch strong { color: var(--hbc-green); font-size: 12px; }
.udash-kpi-orders { border-top: 3px solid var(--hbc-green); }
.udash-kpi-spend { border-top: 3px solid #d4a843; }
.udash-kpi-reward { border-top: 3px solid var(--hbc-blue); }
.udash-kpi-cart { border-top: 3px solid var(--hbc-amber); }
.udash-kpi-latest { border-top: 3px solid var(--hbc-red); }

/* Tab nav */
.udash-tabs {
  display: flex;
  gap: 4px;
  margin-bottom: 20px;
  background: var(--hbc-surface);
  padding: 4px;
  border-radius: 12px;
  border: 1px solid var(--hbc-border);
}
.udash-tab {
  flex: 1;
  padding: 10px;
  border: none;
  border-radius: 9px;
  font-size: 13px;
  font-weight: 600;
  color: var(--hbc-muted);
  background: transparent;
  cursor: pointer;
  transition: background .15s, color .15s;
}
.udash-tab.active { background: #fff; color: var(--hbc-text); box-shadow: 0 1px 4px rgba(0,0,0,.08); font-weight: 700; }
.udash-tab:hover:not(.active) { background: rgba(255,255,255,.6); color: var(--hbc-text); }

/* Tab panes */
.udash-tab-pane { display: none; }
.udash-tab-pane.active { display: block; }

/* Cards */
.udash-card {
  background: #fff;
  border: 1px solid var(--hbc-border);
  border-radius: 14px;
  padding: 20px;
  box-shadow: var(--hbc-shadow);
}
.udash-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}
.udash-card-head h3 { margin: 0; font-size: 15px; font-weight: 700; color: var(--hbc-text); }

.udash-two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

/* Order rows */
.udash-order-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  padding: 12px 14px;
  margin-bottom: 8px;
  background: var(--hbc-surface);
  border: 1px solid var(--hbc-border);
  border-radius: 10px;
  cursor: pointer;
  text-align: left;
  transition: background .15s, box-shadow .15s;
}
.udash-order-row:hover { background: #f0fdf4; box-shadow: 0 2px 8px rgba(0,0,0,.06); }
.uor-left b { display: block; font-size: 13px; font-weight: 800; color: var(--hbc-text); }
.uor-left small { font-size: 11px; color: var(--hbc-muted); margin-top: 2px; display: block; }
.uor-right { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; flex-shrink: 0; }
.uor-right strong { font-size: 14px; font-weight: 800; color: var(--hbc-green); }

/* Status badges */
.udash-badge { font-size: 10px; font-weight: 700; padding: 3px 8px; border-radius: 20px; text-transform: uppercase; letter-spacing: .3px; }
.badge-delivered { background: #dcfce7; color: #16a34a; }
.badge-preparing { background: #fef3c7; color: #d97706; }
.badge-placed { background: #eff6ff; color: #2563eb; }
.badge-other { background: #f3f4f6; color: #6b7280; }

/* ── Profile panel ── */
.prof-wrap {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 28px;
  align-items: start;
}
.prof-photo-col { text-align: center; }
.prof-avatar-ring {
  position: relative;
  width: 110px;
  height: 110px;
  margin: 0 auto 12px;
}
.prof-avatar-ring img,
.prof-avatar-initials {
  width: 110px;
  height: 110px;
  border-radius: 50%;
  border: 4px solid var(--hbc-green);
  object-fit: cover;
}
.prof-avatar-initials {
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #22a06b, #1a6b4f);
  color: #fff;
  font-size: 40px;
  font-weight: 900;
}
.prof-camera-btn {
  position: absolute;
  bottom: 4px;
  right: 4px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--hbc-green);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border: 2px solid #fff;
  box-shadow: 0 2px 6px rgba(0,0,0,.2);
  transition: background .15s;
}
.prof-camera-btn:hover { background: #145c41; }
.prof-hint { font-size: 11px; color: var(--hbc-muted); margin: 0 0 12px; }
.prof-chip {
  display: inline-block;
  background: var(--hbc-surface);
  border: 1px solid var(--hbc-border);
  border-radius: 20px;
  padding: 4px 12px;
  font-size: 11px;
  color: var(--hbc-text);
  margin: 4px 2px;
  word-break: break-all;
  max-width: 100%;
}
.prof-chip.muted { color: var(--hbc-muted); }

.prof-form { display: flex; flex-direction: column; gap: 14px; }
.prof-form h3 { margin: 0 0 2px; font-size: 17px; font-weight: 800; color: var(--hbc-text); }
.prof-desc { margin: 0 0 6px; font-size: 13px; color: var(--hbc-muted); line-height: 1.5; }
.prof-label {
  display: flex;
  flex-direction: column;
  gap: 5px;
  font-size: 12px;
  font-weight: 600;
  color: var(--hbc-muted);
  text-transform: uppercase;
  letter-spacing: .4px;
}
.prof-label input {
  padding: 10px 14px;
  border: 1px solid var(--hbc-border);
  border-radius: 9px;
  font-size: 14px;
  font-weight: 600;
  color: var(--hbc-text);
  background: #fff;
  transition: border-color .15s;
  outline: none;
}
.prof-label input:focus { border-color: var(--hbc-green); }
.prof-label input:disabled { background: var(--hbc-surface); color: var(--hbc-muted); cursor: not-allowed; }
.prof-ro-tag {
  display: inline-block;
  font-size: 9px;
  background: #f3f4f6;
  color: #9ca3af;
  padding: 1px 6px;
  border-radius: 4px;
  margin-left: 6px;
  text-transform: uppercase;
  vertical-align: middle;
}
.prof-form-actions { display: flex; align-items: center; gap: 14px; margin-top: 4px; }
.prof-save-btn {
  background: var(--hbc-green);
  color: #fff;
  border: none;
  border-radius: 10px;
  padding: 11px 24px;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: background .15s;
}
.prof-save-btn:hover { background: #145c41; }
.prof-save-status { font-size: 13px; font-weight: 600; }
.prof-save-status.saving { color: var(--hbc-amber); }
.prof-save-status.success { color: #16a34a; }
.prof-save-status.error { color: var(--hbc-red); }

/* ── Live Order Tracking — Vertical Stepper ── */
#trackingSteps { padding: 0; }

.track-stepper {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.ts-row {
  display: grid;
  grid-template-columns: 40px 1fr;
  gap: 0 12px;
  position: relative;
}

.ts-icon-col {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.ts-dot {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 800;
  flex-shrink: 0;
  border: 2px solid #e5e7eb;
  background: #f9fafb;
  color: #9ca3af;
  transition: all .2s;
  z-index: 1;
}

.ts-done .ts-dot {
  background: #dcfce7;
  border-color: #16a34a;
  color: #16a34a;
  font-size: 16px;
}

.ts-active .ts-dot {
  background: var(--hbc-green);
  border-color: var(--hbc-green);
  color: #fff;
  box-shadow: 0 0 0 5px rgba(26,107,79,.15);
  animation: ts-pulse 1.5s ease-in-out infinite;
  font-size: 16px;
}

@keyframes ts-pulse {
  0%, 100% { box-shadow: 0 0 0 5px rgba(26,107,79,.15); }
  50% { box-shadow: 0 0 0 10px rgba(26,107,79,.08); }
}

.ts-connector {
  width: 2px;
  flex: 1;
  min-height: 18px;
  background: #e5e7eb;
  margin: 2px auto;
}
.ts-done .ts-connector { background: #86efac; }
.ts-active .ts-connector { background: linear-gradient(to bottom, #86efac, #e5e7eb); }

.ts-label-col {
  padding: 6px 0 16px;
}

.ts-label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: #9ca3af;
  line-height: 1.3;
}

.ts-done .ts-label { color: #374151; font-weight: 700; }
.ts-active .ts-label { color: var(--hbc-green); font-weight: 800; font-size: 14px; }

.ts-time {
  display: block;
  font-size: 11px;
  color: #9ca3af;
  margin-top: 2px;
}

.ts-live-tag {
  display: inline-block;
  background: #dcfce7;
  color: #16a34a;
  font-size: 10px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 20px;
  margin-top: 4px;
  text-transform: uppercase;
  letter-spacing: .4px;
}

/* Tracking map */
#userTrackingMap {
  width: 100%;
  height: 350px;
  border-radius: 14px;
  overflow: hidden;
  background: #f0fdf4;
}
.route-canvas { border-radius: 14px; overflow: hidden; }

/* Route KPIs */
.route-kpis {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  padding: 14px 0;
  border-bottom: 1px solid var(--hbc-border);
  margin-bottom: 14px;
}
.route-kpis > div { text-align: center; }
.route-kpis small { display: block; font-size: 10px; color: var(--hbc-muted); text-transform: uppercase; letter-spacing: .4px; margin-bottom: 3px; }
.route-kpis strong { font-size: 14px; font-weight: 800; color: var(--hbc-text); }

/* ── Responsive user dashboard ── */
@media (max-width: 1100px) {
  .udash-kpi-row { grid-template-columns: repeat(3, 1fr); }
  .udash-two-col { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
  .udash-header {
    flex-wrap: wrap;
    padding: 20px;
    gap: 14px;
  }
  .udash-header-text h2 { font-size: 18px; }
  .dashboard-actions {
    flex-direction: row;
    width: 100%;
  }
  .dashboard-actions button { flex: 1; }
  .udash-kpi-row { grid-template-columns: repeat(3, 1fr); }
  .udash-kpi { padding: 12px 8px 10px; }
  .udash-kpi strong { font-size: 13px; }
  .udash-card { padding: 14px; }
  .revenue-summary-grid { grid-template-columns: 1fr; }
  .revenue-actions { width: 100%; }
  .revenue-actions .btn { flex: 1 1 100%; }
  .prof-wrap { grid-template-columns: 1fr; }
  .prof-avatar-ring, .prof-avatar-ring img, .prof-avatar-initials { width: 80px; height: 80px; }
  .prof-avatar-initials { font-size: 28px; }
}

@media (max-width: 480px) {
  .udash-header {
    padding: 16px;
    gap: 12px;
  }
  .udash-avatar-ring {
    width: 52px;
    height: 52px;
    font-size: 20px;
  }
  .udash-header-text h2 { font-size: 16px; }
  .udash-header-text p { display: none; }

  .udash-kpi-row {
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
  }
  .udash-kpi { padding: 10px 6px 8px; border-radius: 10px; }
  .udash-kpi strong { font-size: 12px; white-space: normal; line-height: 1.3; }
  .udash-kpi small { font-size: 9px; }
  .udash-kpi-branch strong { font-size: 10px; }

  .udash-tabs {
    overflow-x: auto;
    flex-wrap: nowrap;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    gap: 4px;
    padding: 4px;
  }
  .udash-tabs::-webkit-scrollbar { display: none; }
  .udash-tab {
    flex: 0 0 auto;
    min-width: 80px;
    padding: 9px 12px;
    font-size: 12px;
  }

  .udash-card { padding: 12px; border-radius: 12px; }
  .udash-card-head h3 { font-size: 14px; }

  .udash-order-row { padding: 10px 12px; gap: 8px; }
  .uor-left b { font-size: 12px; }
  .uor-left small { font-size: 10px; }
  .uor-right strong { font-size: 13px; }
  .udash-badge { font-size: 9px; padding: 2px 6px; }
}

/* ══ HOME BRANCH MAP BOARD — 3 Individual Maps ══════ */
#homeBranchMapBoard {
  width: 100% !important;
  min-height: unset !important;
  height: auto !important;
  overflow: visible !important;
  padding: 0 !important;
  background: none !important;
  border: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  margin-top: 24px;
}
#homeBranchMapBoard::before {
  display: none !important;
}

.home-branch-maps-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  width: 100%;
  box-sizing: border-box;
}

.home-branch-maps-grid .hbm-card {
  min-width: 0;
  width: 100%;
}

.hbm-card {
  background: #fff;
  border: 1px solid var(--hbc-border);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: var(--hbc-shadow);
  transition: box-shadow .2s, transform .2s;
}
.hbm-card:hover { box-shadow: var(--hbc-shadow-hover); transform: translateY(-2px); }

.hbm-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  background: #f8fffe;
  border-bottom: 1px solid var(--hbc-border);
}
.hbm-num {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 13px;
  flex-shrink: 0;
}
.hbm-info b { display: block; font-size: 13px; font-weight: 700; color: var(--hbc-text); line-height: 1.2; }
.hbm-info small { font-size: 11px; color: var(--hbc-muted); }

.hbm-map {
  width: 100%;
  height: 200px;
  background: #f0fdf4;
}

.hbm-footer {
  display: flex;
  gap: 8px;
  padding: 10px 12px;
  border-top: 1px solid var(--hbc-border);
}
.hbm-dir {
  flex: 1;
  text-align: center;
  padding: 8px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 600;
  background: #f0fdf4;
  color: var(--hbc-green);
  border: 1px solid #bbf7d0;
  text-decoration: none;
  transition: background .15s;
}
.hbm-dir:hover { background: #dcfce7; }
.hbm-order {
  flex: 1;
  padding: 8px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 700;
  background: var(--hbc-green);
  color: #fff;
  border: none;
  cursor: pointer;
  transition: background .15s;
}
.hbm-order:hover { background: #145c41; }

@media (max-width: 860px) {
  .home-branch-maps-grid { grid-template-columns: 1fr; }
}

/* ══ CUSTOMER BRANCHES SECTION ══════════════════════ */
.branches-header {
  text-align: center;
  margin-bottom: 40px;
}
.branches-sub {
  color: var(--hbc-muted);
  font-size: 15px;
  margin-top: 8px;
}

.branches-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
  align-items: start;
}

.branch-cards-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.branch-pro-card {
  background: #fff;
  border: 1px solid var(--hbc-border);
  border-radius: 16px;
  box-shadow: var(--hbc-shadow);
  overflow: hidden;
  transition: box-shadow .2s, transform .2s;
}
.branch-pro-card:hover {
  box-shadow: var(--hbc-shadow-hover);
  transform: translateY(-2px);
}

.bpc-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 18px 12px;
  border-bottom: 1px solid var(--hbc-border);
  background: linear-gradient(135deg, #f8fffe 0%, #f0fdf4 100%);
}
.bpc-num {
  font-size: 26px;
  line-height: 1;
  flex-shrink: 0;
}
.bpc-title { flex: 1; }
.bpc-title h3 {
  font-size: 15px;
  font-weight: 700;
  color: var(--hbc-text);
  margin: 0 0 3px;
  line-height: 1.2;
}
.bpc-tag {
  display: inline-block;
  font-size: 10px;
  font-weight: 600;
  color: var(--hbc-green);
  background: #dcfce7;
  padding: 2px 8px;
  border-radius: 20px;
  text-transform: uppercase;
  letter-spacing: .4px;
}
.bpc-status {
  font-size: 11px;
  font-weight: 700;
  color: #16a34a;
  background: #dcfce7;
  padding: 3px 10px;
  border-radius: 20px;
  flex-shrink: 0;
}

.bpc-body {
  padding: 14px 18px 10px;
}
.bpc-row {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-bottom: 10px;
  font-size: 13px;
  color: var(--hbc-muted);
}
.bpc-row svg {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
  margin-top: 1px;
  color: var(--hbc-green);
}
.bpc-row span { line-height: 1.4; }

.bpc-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin: 12px 0;
  padding: 12px;
  background: var(--hbc-surface);
  border-radius: 10px;
}
.bpc-stat {
  text-align: center;
}
.bpc-stat-val {
  display: block;
  font-size: 14px;
  font-weight: 800;
  color: var(--hbc-text);
  line-height: 1.2;
}
.bpc-stat small {
  font-size: 10px;
  color: var(--hbc-muted);
  text-transform: uppercase;
  letter-spacing: .3px;
}

.bpc-footer {
  display: flex;
  gap: 8px;
  padding: 12px 18px 14px;
  border-top: 1px solid var(--hbc-border);
}
.bpc-order-btn {
  flex: 1;
  background: var(--hbc-green);
  color: #fff;
  border: none;
  border-radius: 9px;
  padding: 9px 14px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: background .15s;
}
.bpc-order-btn:hover { background: #145c41; }
.bpc-dir-btn, .bpc-call-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 9px 14px;
  border-radius: 9px;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  transition: background .15s;
}
.bpc-dir-btn {
  background: #f0fdf4;
  color: var(--hbc-green);
  border: 1px solid #bbf7d0;
}
.bpc-dir-btn:hover { background: #dcfce7; }
.bpc-call-btn {
  background: #eff6ff;
  color: var(--hbc-blue);
  border: 1px solid #bfdbfe;
}
.bpc-call-btn:hover { background: #dbeafe; }

.branch-map-panel {
  position: sticky;
  top: 80px;
}
.branch-leaflet-host {
  width: 100%;
  height: 520px;
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid var(--hbc-border);
  box-shadow: var(--hbc-shadow-hover);
  background: #f0fdf4;
}

@media (max-width: 900px) {
  .branches-layout {
    grid-template-columns: 1fr;
  }
  .branch-map-panel {
    position: static;
    order: -1;
  }
  .branch-leaflet-host {
    height: 320px;
  }
}

/* ══ RESPONSIVE ═════════════════════════════════════ */
@media (max-width: 1100px) {
  .kpi-grid { grid-template-columns: repeat(2, 1fr); }
  .delivery-stats-bar { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 860px) {
  /* Sidebar hidden off-canvas by default */
  .admin-sidebar {
    width: 230px !important;
    transform: translateX(-230px);
    transition: transform 0.25s ease;
    position: fixed;
    z-index: 200;
  }
  /* Show when open */
  body.sidebar-open .admin-sidebar {
    transform: translateX(0);
  }
  /* Overlay backdrop */
  .admin-sidebar-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.45);
    z-index: 199;
  }
  body.sidebar-open .admin-sidebar-overlay {
    display: block;
  }
  /* Main takes full width */
  .admin-main { margin-left: 0 !important; }
  /* Hamburger visible */
  .admin-hamburger { display: flex !important; }
  .admin-grid-two, .analytics-grid { grid-template-columns: 1fr; }
}

@media (max-width: 600px) {
  .kpi-grid { grid-template-columns: 1fr 1fr; }
  .admin-topbar { padding: 10px 14px; flex-wrap: wrap; gap: 10px; }
  .admin-topbar h1 { font-size: 16px !important; }
  .admin-topbar .eyebrow { font-size: 9px; }
  .admin-actions { width: 100%; display: flex; flex-wrap: wrap; gap: 8px; }
  .admin-actions button { flex: 1 1 auto; font-size: 12px; padding: 8px 10px; }
  .admin-tab { padding: 12px; }

  /* Orders */
  .order-admin-head { flex-direction: column; gap: 6px; }
  .order-actions { flex-wrap: wrap; }
  .order-actions button { flex: 1 1 auto; font-size: 12px; padding: 7px 8px; }

  /* Products form */
  .admin-form { grid-template-columns: 1fr; }
  .admin-form .wide { grid-column: 1; }

  /* Branch settings */
  .branch-settings { grid-template-columns: 1fr; }

  /* List items */
  .admin-list-item { flex-direction: column; align-items: flex-start; gap: 6px; }
  .product-admin-actions { flex-wrap: wrap; }

  /* KPI cards tighter */
  .kpi-card { padding: 12px 14px; }
  .kpi-card strong { font-size: 22px; }

  /* Scroll tables */
  .scroll-list { max-height: 400px; }

  /* Delivery stats */
  .delivery-stats-bar { grid-template-columns: 1fr 1fr; }

  /* Revenue summary */
  .revenue-summary-grid { grid-template-columns: 1fr; }
  .revenue-actions { width: 100%; }
  .revenue-actions .btn { flex: 1 1 100%; }
}

@media (max-width: 400px) {
  .kpi-grid { grid-template-columns: 1fr; }
  .delivery-stats-bar { grid-template-columns: 1fr; }
}

/* Hamburger button — hidden on desktop */
.admin-hamburger {
  display: none;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 10px;
  border: 1px solid var(--hbc-border);
  background: var(--hbc-card);
  font-size: 18px;
  cursor: pointer;
  color: var(--hbc-text);
  flex-shrink: 0;
}
.admin-sidebar-overlay { display: none; }

/* ══ Admin mobile overflow fix (2026-06-13) ══════════════════ */
body.admin-body {
  overflow-x: hidden;
}

.admin-main {
  overflow-x: hidden;
  min-width: 0;
  width: 100%;
  box-sizing: border-box;
}

.admin-grid-two,
.analytics-grid {
  min-width: 0;
  width: 100%;
  box-sizing: border-box;
}

.admin-card {
  min-width: 0;
  box-sizing: border-box;
  width: 100%;
  overflow: hidden;
}

/* Prevent inputs from expanding beyond card width */
.admin-form input,
.admin-form select,
.admin-form textarea {
  min-width: 0;
  box-sizing: border-box;
  max-width: 100%;
  font-size: 16px; /* prevents iOS Safari auto-zoom */
}

/* Ensure card text wraps cleanly */
.admin-card p,
.admin-card h2,
.admin-card .fine-print {
  word-break: break-word;
  overflow-wrap: break-word;
}

@media (max-width: 640px) {
  .admin-card {
    padding: 16px !important;
  }

  .admin-card h2 {
    font-size: 15px !important;
  }

  /* Delivery boys form full-width single column */
  #deliveryboys .admin-form {
    grid-template-columns: 1fr !important;
  }

  #deliveryboys .admin-grid-two {
    grid-template-columns: 1fr !important;
  }

  /* All admin-grid-two sections single column */
  .admin-grid-two,
  .analytics-grid {
    grid-template-columns: 1fr !important;
  }

  /* Add Delivery Boy button full width */
  #deliveryBoyForm .btn {
    width: 100%;
  }
}