/* =========================================================
   Hero Mock Dashboard demo — scoped to #hero-demo
   All classes prefixed with hm- to avoid collision with
   legacy .hero-mock-* / .mock-* rules still in main.css.
   ========================================================= */

.hero-mock-stage {
  width: 100%;
  margin: 48px auto 0;
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
  color: var(--ink);
}

/* Browser chrome */
.hm-browser {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl, 28px);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  container-type: inline-size;
  container-name: hmbrowser;
  --hm-side-w: 240px;
  --hm-main-h: 640px;
}

.hm-chrome {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 18px;
  border-bottom: 1px solid var(--border);
  background: linear-gradient(180deg, #FCFCFE, #F7F8FB);
  position: relative;
  z-index: 4;
}

.hm-dots { display: flex; gap: 7px; }
.hm-dot { width: 11px; height: 11px; border-radius: 50%; }
.hm-dot.r { background: #FF605C; }
.hm-dot.y { background: #FFBD44; }
.hm-dot.g { background: #00CA4E; }

.hm-url {
  flex: 1;
  margin: 0 14px;
  padding: 6px 14px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  color: var(--muted);
  text-align: center;
  max-width: 420px;
  margin-left: auto;
  margin-right: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
.hm-url [data-lucide] { width: 11px; height: 11px; color: var(--green); }
.hm-url-path { color: var(--ink); }

.hm-replay {
  position: relative;
  display: none;
  align-items: center;
  gap: 6px;
  background: var(--navy);
  color: #fff;
  border: none;
  padding: 6px 12px;
  border-radius: 8px;
  font-family: inherit;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: var(--shadow-sm);
  transition: transform .15s ease, background .15s ease;
}
.hm-replay [data-lucide] { width: 13px; height: 13px; }
.hm-replay:hover { background: var(--navy-700); transform: translateY(-1px); }
.hm-replay.show { display: inline-flex; animation: hm-fadeIn .3s ease; }

@keyframes hm-fadeIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } }

/* App layout */
.hm-app {
  position: relative;
  display: grid;
  grid-template-columns: var(--hm-side-w) 1fr;
  min-height: var(--hm-main-h);
  background: var(--surface);
}

/* ==================== SIDEBAR ==================== */
.hm-side {
  background: #FBFBFD;
  border-right: 1px solid var(--border);
  padding: 14px 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.hm-side-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 4px 8px 12px;
}
.hm-side-brand {
  display: flex; align-items: center; gap: 8px;
  font-size: 15px; font-weight: 800; color: var(--navy); letter-spacing: -0.01em;
}
.hm-side-brand-logo {
  width: 26px; height: 26px; border-radius: 7px;
  background: linear-gradient(135deg, var(--navy), #4F5EE0);
  display: grid; place-items: center;
  color: #fff; font-size: 14px; font-weight: 800;
}
.hm-side-collapse {
  width: 24px; height: 24px; display: grid; place-items: center;
  border-radius: 6px; color: var(--muted); cursor: pointer;
}
.hm-side-collapse [data-lucide] { width: 14px; height: 14px; }
.hm-side-collapse:hover { background: var(--navy-50); color: var(--navy); }

.hm-side-group {
  color: var(--muted);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  padding: 12px 10px 6px;
}

.hm-nav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 8px;
  font-size: 13px;
  color: var(--ink-2);
  font-weight: 500;
  cursor: pointer;
  position: relative;
  transition: background .15s ease, color .15s ease;
  white-space: nowrap;
  overflow: hidden;
}
.hm-nav-item [data-lucide] {
  width: 16px; height: 16px;
  color: var(--muted);
  flex-shrink: 0;
  transition: color .15s ease;
}
.hm-nav-item:hover {
  background: var(--navy-50);
  color: var(--navy);
}
.hm-nav-item:hover [data-lucide] { color: var(--navy); }
.hm-nav-item.active {
  background: var(--navy-50);
  color: var(--navy);
  font-weight: 700;
}
.hm-nav-item.active [data-lucide] { color: var(--navy); }
.hm-nav-item-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }

.hm-side-foot {
  margin-top: auto;
  padding-top: 10px;
  border-top: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.hm-whats-new {
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 10px;
  border-radius: 8px;
  font-size: 12px;
  color: var(--ink-2);
  cursor: pointer;
}
.hm-whats-new:hover { background: var(--navy-50); color: var(--navy); }
.hm-whats-new-l { display: flex; align-items: center; gap: 8px; font-weight: 600; }
.hm-whats-new [data-lucide] { width: 14px; height: 14px; color: var(--orange); }
.hm-whats-new-num {
  background: var(--orange);
  color: #fff;
  font-size: 10px;
  font-weight: 800;
  padding: 1px 6px;
  border-radius: 10px;
  min-width: 18px;
  text-align: center;
}

.hm-workspace {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 8px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: #fff;
  cursor: pointer;
}
.hm-workspace:hover { border-color: var(--border-strong); }
.hm-ws-icon {
  width: 26px; height: 26px; border-radius: 7px;
  background: linear-gradient(135deg, var(--orange), #F9A25E);
  color: #fff; font-size: 11px; font-weight: 800;
  display: grid; place-items: center;
  flex-shrink: 0;
}
.hm-ws-body { display: flex; flex-direction: column; line-height: 1.2; min-width: 0; flex: 1; }
.hm-ws-name { font-size: 12px; font-weight: 700; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hm-ws-user { font-size: 10px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hm-workspace [data-lucide] { width: 13px; height: 13px; color: var(--muted); }

/* ==================== MAIN PAGE AREA ==================== */
.hm-main {
  position: relative;
  padding: 20px 22px 24px;
  background: var(--bg);
  overflow: hidden;
  min-width: 0;
}

.hm-page {
  display: none;
  animation: hm-page-in .42s cubic-bezier(.4,.0,.2,1);
}
.hm-page.active { display: block; }

@keyframes hm-page-in {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Section heading */
.hm-page-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}
.hm-page-title { font-size: 20px; font-weight: 800; color: var(--ink); letter-spacing: -0.01em; }
.hm-page-title-sub { font-size: 13px; color: var(--muted); font-weight: 500; margin-top: 2px; }

.hm-date-pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px;
  border: 1px solid var(--border);
  background: #fff;
  border-radius: 10px;
  font-size: 12px;
  font-weight: 600;
  color: var(--ink-2);
}
.hm-date-pill [data-lucide] { width: 13px; height: 13px; color: var(--muted); }

/* ========== DASHBOARD ========== */
.hm-stat-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-bottom: 14px;
}

.hm-stat-card {
  position: relative;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 14px 16px;
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}
.hm-stat-l {
  font-size: 11px; font-weight: 700;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 6px;
}
.hm-stat-v {
  font-size: 22px; font-weight: 800;
  color: var(--ink);
  letter-spacing: -0.02em;
  line-height: 1.1;
}
.hm-stat-d {
  font-size: 11px; font-weight: 600;
  color: var(--muted);
  margin-top: 4px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.hm-stat-d.up { color: var(--green); }
.hm-stat-d.neutral { color: var(--muted); }
.hm-stat-d [data-lucide] { width: 11px; height: 11px; }
.hm-stat-spark {
  position: absolute;
  right: 10px;
  top: 10px;
  width: 60px;
  height: 28px;
  opacity: 0.6;
}

/* Dashboard charts row */
.hm-dash-row {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  gap: 12px;
}

.hm-card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 16px 18px;
  box-shadow: var(--shadow-sm);
  min-width: 0;
}
.hm-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
  flex-wrap: wrap;
}
.hm-card-title { font-size: 14px; font-weight: 700; color: var(--ink); }
.hm-card-sub { font-size: 12px; color: var(--muted); margin-top: 2px; font-weight: 500; }

/* Financial Overview */
.hm-fin-hero {
  display: flex; align-items: baseline; gap: 10px;
  margin: 4px 0 12px;
  flex-wrap: wrap;
}
.hm-fin-amount {
  font-size: 26px; font-weight: 800; color: var(--ink);
  letter-spacing: -0.02em;
}
.hm-fin-chip {
  background: var(--green-50);
  color: var(--green);
  font-size: 11px; font-weight: 700;
  padding: 3px 9px;
  border-radius: 999px;
  display: inline-flex; align-items: center; gap: 4px;
}
.hm-fin-chip [data-lucide] { width: 11px; height: 11px; }

.hm-toggle {
  display: inline-flex;
  background: #F4F5F9;
  border-radius: 8px;
  padding: 3px;
}
.hm-toggle-btn {
  padding: 4px 10px;
  font-size: 11px; font-weight: 600;
  color: var(--muted);
  border-radius: 6px;
  cursor: pointer;
  border: none;
  background: transparent;
  font-family: inherit;
}
.hm-toggle-btn.active {
  background: #fff;
  color: var(--navy);
  box-shadow: var(--shadow-sm);
}

.hm-legend {
  display: flex; gap: 14px;
  margin-bottom: 8px;
}
.hm-legend-item {
  display: flex; align-items: center; gap: 6px;
  font-size: 11px; font-weight: 600;
  color: var(--ink-2);
}
.hm-legend-sw {
  width: 14px; height: 2px; border-radius: 2px;
  background: var(--navy);
}
.hm-legend-sw.prev {
  background: repeating-linear-gradient(to right, var(--muted) 0 4px, transparent 4px 7px);
  height: 2px;
}

.hm-chart-wrap {
  position: relative;
  width: 100%;
  height: 170px;
}
.hm-chart-svg {
  width: 100%;
  height: 100%;
  display: block;
}
.hm-chart-hotspot {
  fill: transparent;
  cursor: pointer;
}
.hm-chart-xlabels {
  display: flex;
  justify-content: space-between;
  padding: 6px 2px 0;
  font-size: 10px;
  color: var(--muted);
  font-weight: 500;
}

.hm-chart-dot {
  fill: var(--navy);
  stroke: #fff;
  stroke-width: 2;
  opacity: 0;
  transition: opacity .2s ease;
  pointer-events: none;
}
.hm-chart-dot.show { opacity: 1; }
.hm-chart-guide {
  stroke: var(--navy);
  stroke-width: 1;
  stroke-dasharray: 3 3;
  opacity: 0;
  transition: opacity .2s ease;
  pointer-events: none;
}
.hm-chart-guide.show { opacity: 0.4; }

/* Chart tooltip */
.hm-chart-tip {
  position: absolute;
  background: var(--navy);
  color: #fff;
  padding: 6px 10px;
  border-radius: 8px;
  font-size: 11px;
  font-weight: 600;
  box-shadow: 0 6px 18px -4px rgba(42, 40, 119, 0.45);
  transform: translate(-50%, calc(-100% - 10px));
  pointer-events: none;
  opacity: 0;
  transition: opacity .2s ease, transform .2s ease;
  white-space: nowrap;
  z-index: 5;
}
.hm-chart-tip.show { opacity: 1; }
.hm-chart-tip::after {
  content: '';
  position: absolute;
  top: 100%; left: 50%;
  transform: translateX(-50%);
  border: 5px solid transparent;
  border-top-color: var(--navy);
}
.hm-chart-tip-date { font-size: 10px; opacity: 0.75; font-weight: 500; }
.hm-chart-tip-val { font-size: 13px; font-weight: 800; margin-top: 1px; }

/* Donut */
.hm-donut-svg { width: 150px; height: 150px; }

.hm-donut-stack {
  position: relative;
  width: 150px; height: 150px;
  margin: 0 auto;
}
.hm-donut-center-txt {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}
.hm-donut-big { font-size: 22px; font-weight: 800; color: var(--ink); letter-spacing: -0.02em; }
.hm-donut-lab { font-size: 10px; color: var(--muted); font-weight: 600; }

.hm-legend-list {
  display: flex; flex-direction: column; gap: 6px;
  margin-top: 8px;
}
.hm-legend-row {
  display: flex; align-items: center; justify-content: space-between;
  font-size: 12px;
  padding: 4px 0;
}
.hm-legend-row-l { display: flex; align-items: center; gap: 8px; color: var(--ink-2); font-weight: 500; }
.hm-legend-row-sw { width: 9px; height: 9px; border-radius: 3px; }
.hm-legend-row-v { font-weight: 700; color: var(--ink); font-family: 'JetBrains Mono', monospace; font-size: 11px; }

/* ========== ORDERS ========== */
.hm-big-stat {
  font-size: 38px; font-weight: 800; color: var(--ink);
  letter-spacing: -0.02em; line-height: 1;
}
.hm-big-stat-sub {
  color: var(--muted); font-size: 12px; margin-top: 4px; font-weight: 500;
}

.hm-tabs {
  display: flex; gap: 2px;
  margin-top: 12px;
  border-bottom: 1px solid var(--border);
}
.hm-tab {
  padding: 8px 14px;
  font-size: 12px; font-weight: 600;
  color: var(--muted);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  font-family: inherit;
}
.hm-tab.active {
  color: var(--navy);
  border-bottom-color: var(--navy);
}
.hm-tab:hover { color: var(--navy); }

.hm-filters {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  margin: 12px 0;
  padding: 4px;
  background: #F4F5F9;
  border-radius: 10px;
}
.hm-filter-btn {
  padding: 5px 10px;
  font-size: 11px; font-weight: 600;
  color: var(--ink-2);
  border-radius: 7px;
  cursor: pointer;
  border: none;
  background: transparent;
  font-family: inherit;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.hm-filter-btn .count {
  background: #fff;
  color: var(--muted);
  font-size: 10px;
  padding: 1px 5px;
  border-radius: 8px;
  font-weight: 700;
}
.hm-filter-btn.active {
  background: var(--navy);
  color: #fff;
}
.hm-filter-btn.active .count {
  background: rgba(255,255,255,0.22);
  color: #fff;
}
.hm-filter-btn:hover:not(.active) { background: #fff; }

/* Tables */
.hm-table-wrap {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  position: relative;
}
.hm-table-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.hm-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
  min-width: 780px;
}
.hm-table thead th {
  text-align: left;
  padding: 10px 12px;
  background: #FBFBFD;
  border-bottom: 1px solid var(--border);
  font-size: 10px;
  font-weight: 700;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  white-space: nowrap;
}
.hm-table tbody td {
  padding: 11px 12px;
  border-bottom: 1px solid var(--border);
  vertical-align: top;
  color: var(--ink-2);
}
.hm-table tbody tr {
  transition: background .12s ease;
  opacity: 0;
  transform: translateY(4px);
  animation: hm-row-in .4s ease forwards;
}
.hm-table tbody tr:last-child td { border-bottom: none; }
.hm-table tbody tr:hover, .hm-table tbody tr.hm-row-hover {
  background: var(--navy-50);
}

@keyframes hm-row-in {
  to { opacity: 1; transform: translateY(0); }
}

.hm-mono { font-family: 'JetBrains Mono', monospace; font-size: 11px; }
.hm-id { color: var(--navy); font-weight: 700; }

.hm-chip {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 8px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
  white-space: nowrap;
}
.hm-chip-dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.hm-chip.green { background: var(--green-50); color: var(--green); }
.hm-chip.orange { background: var(--orange-50); color: var(--orange); }
.hm-chip.red { background: var(--red-50); color: var(--red); }
.hm-chip.navy { background: var(--navy-50); color: var(--navy); }
.hm-chip.grey { background: #F1F2F6; color: var(--ink-2); }

.hm-courier-cell {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--green-50);
  color: var(--green);
  padding: 3px 8px;
  border-radius: 7px;
  font-size: 10px;
  font-weight: 700;
  white-space: nowrap;
}

.hm-date-cell-main { font-weight: 600; color: var(--ink); font-size: 11px; }
.hm-date-cell-sub { font-size: 10px; color: var(--muted); margin-top: 2px; }

.hm-items-cell {
  max-width: 260px;
  font-size: 11px;
  color: var(--ink-2);
  line-height: 1.45;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.hm-pagi {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  font-size: 11px;
  color: var(--muted);
  border-top: 1px solid var(--border);
  background: #FBFBFD;
  flex-wrap: wrap;
  gap: 8px;
}
.hm-pagi-btn {
  padding: 3px 8px;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: #fff;
  font-size: 11px;
  font-weight: 600;
  color: var(--ink-2);
  cursor: pointer;
  font-family: inherit;
}
.hm-pagi-btn.active { background: var(--navy); color: #fff; border-color: var(--navy); }
.hm-pagi-group { display: flex; gap: 4px; align-items: center; }

/* ========== PRODUCTS ========== */
.hm-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 12px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  border: 1px solid transparent;
  background: transparent;
  font-family: inherit;
  white-space: nowrap;
}
.hm-btn [data-lucide] { width: 13px; height: 13px; }
.hm-btn.primary {
  background: var(--navy);
  color: #fff;
  border-color: var(--navy);
}
.hm-btn.primary:hover { background: var(--navy-700); }
.hm-btn.outline {
  background: #fff;
  color: var(--ink-2);
  border-color: var(--border-strong);
}
.hm-btn.outline:hover { border-color: var(--navy); color: var(--navy); }

.hm-search {
  flex: 1;
  min-width: 220px;
  position: relative;
  display: flex;
  align-items: center;
}
.hm-search input {
  width: 100%;
  padding: 8px 12px 8px 32px;
  border: 1px solid var(--border);
  border-radius: 9px;
  font-size: 12px;
  font-family: inherit;
  background: #fff;
  color: var(--ink);
}
.hm-search input:focus {
  outline: none;
  border-color: var(--navy);
}
.hm-search [data-lucide] {
  position: absolute;
  left: 10px;
  width: 14px; height: 14px;
  color: var(--muted);
}

.hm-search-row {
  display: flex;
  gap: 10px;
  align-items: center;
  margin-bottom: 12px;
  flex-wrap: wrap;
}

.hm-stat-card.active {
  background: var(--navy);
  color: #fff;
  border-color: var(--navy);
}
.hm-stat-card.active .hm-stat-l { color: rgba(255,255,255,0.75); }
.hm-stat-card.active .hm-stat-v { color: #fff; }
.hm-stat-card.active .hm-stat-d { color: #fff; }

.hm-stat-d-green { color: var(--green); }

.hm-stat-grid.hm-stat-grid-4 {
  grid-template-columns: repeat(4, 1fr);
}

/* Product image thumb */
.hm-thumb {
  width: 32px; height: 32px;
  border-radius: 8px;
  flex-shrink: 0;
  display: grid; place-items: center;
  color: #fff;
  font-size: 13px;
  font-weight: 800;
}
.hm-prod-cell {
  display: flex; align-items: center; gap: 10px;
  max-width: 300px;
}
.hm-prod-name {
  font-weight: 600; color: var(--ink);
  font-size: 12px;
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ========== CUSTOMERS ========== */
.hm-avatar {
  width: 30px; height: 30px;
  border-radius: 50%;
  display: grid; place-items: center;
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  flex-shrink: 0;
}
.hm-cust-cell {
  display: flex; align-items: center; gap: 10px;
}
.hm-cust-name { font-weight: 700; color: var(--ink); font-size: 12px; }
.hm-cust-email { font-size: 10px; color: var(--muted); margin-top: 1px; }

.hm-addr {
  max-width: 180px;
  font-size: 11px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.hm-action-btn {
  width: 26px; height: 26px;
  display: grid; place-items: center;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: #fff;
  color: var(--muted);
  cursor: pointer;
}
.hm-action-btn:hover { color: var(--navy); border-color: var(--navy); background: var(--navy-50); }
.hm-action-btn [data-lucide] { width: 13px; height: 13px; }

/* ========== DRAWER ========== */
.hm-drawer-overlay {
  position: absolute;
  inset: 0;
  background: rgba(26, 26, 46, 0.35);
  backdrop-filter: blur(1px);
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s ease;
  z-index: 10;
}
.hm-drawer-overlay.show {
  opacity: 1;
  pointer-events: auto;
}
.hm-drawer {
  position: absolute;
  right: 0; top: 0; bottom: 0;
  width: min(620px, 92%);
  background: #fff;
  border-left: 1px solid var(--border);
  box-shadow: -24px 0 48px -16px rgba(42, 40, 119, 0.22);
  transform: translateX(100%);
  transition: transform .4s cubic-bezier(.4,.0,.2,1);
  z-index: 11;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.hm-drawer.show { transform: translateX(0); }
.hm-drawer-head {
  padding: 16px 18px;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: 12px;
  background: linear-gradient(180deg, #FBFBFE, #fff);
}
.hm-drawer-close {
  margin-left: auto;
  width: 28px; height: 28px;
  border-radius: 7px;
  border: 1px solid var(--border);
  background: #fff;
  color: var(--muted);
  display: grid; place-items: center;
  cursor: pointer;
  flex-shrink: 0;
}
.hm-drawer-close:hover { color: var(--navy); border-color: var(--navy); }
.hm-drawer-close [data-lucide] { width: 14px; height: 14px; }

.hm-drawer-body {
  padding: 16px 18px 24px;
  overflow-y: auto;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
/* Customer drawer body gets the CRM-style lightly-tinted bg
   (order drawer keeps the plain white). */
.hm-drawer:not(.hm-drawer-order) .hm-drawer-body { background: #FBFBFD; }

/* Kept for the ORDER drawer which still uses .hm-drawer-sec */
.hm-drawer-sec {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 12px 14px;
}
.hm-drawer-sec-title {
  font-size: 10px;
  font-weight: 700;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 8px;
}
/* Kept for the ORDER drawer's 4-card overview */
.hm-drawer-ov {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}
.hm-drawer-ov-card {
  background: #FBFBFD;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px;
  text-align: left;
}
.hm-drawer-ov-l { font-size: 10px; color: var(--muted); font-weight: 600; margin-bottom: 4px; }
.hm-drawer-ov-v { font-size: 16px; font-weight: 800; color: var(--navy); letter-spacing: -0.01em; }

.hm-drawer-kv { display: flex; justify-content: space-between; padding: 4px 0; font-size: 12px; }
.hm-drawer-kv-l { color: var(--muted); font-weight: 600; }
.hm-drawer-kv-v { color: var(--ink); font-weight: 600; font-family: 'JetBrains Mono', monospace; }

.hm-drawer-empty { color: var(--muted); font-size: 12px; font-style: italic; padding: 6px 0; }

/* =========================================================
   CUSTOMER PROFILE (hero drawer) — ported from CRM demo's
   .crmx-prof-*, .crmx-tabs, .crmx-ev so both surfaces feel
   like the same product. All classes are hm-* prefixed.
   ========================================================= */

/* Profile header — takes over when .hm-drawer-head also
   carries .hm-prof-head (customer drawer only). */
.hm-drawer-head.hm-prof-head {
  padding: 18px 18px 16px;
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  row-gap: 12px;
  background: #fff;
  border-bottom: 1px solid var(--border);
}

.hm-prof-avatar {
  width: 54px; height: 54px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  font-weight: 700;
  color: #fff;
  letter-spacing: -0.02em;
  flex-shrink: 0;
  box-shadow: 0 3px 10px -3px rgba(0,0,0,.2);
}

.hm-prof-id {
  flex: 1 1 180px;
  min-width: 0;
}
.hm-prof-name {
  font-size: 17px;
  font-weight: 800;
  color: var(--navy);
  letter-spacing: -0.015em;
  line-height: 1.2;
  overflow-wrap: break-word;
}
.hm-prof-meta {
  font-size: 11.5px;
  color: var(--muted);
  margin-top: 4px;
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
  min-width: 0;
}
.hm-prof-meta .hm-mono {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px;
  color: var(--ink-2);
}
.hm-prof-phone,
.hm-prof-city {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.hm-prof-phone { white-space: nowrap; }
.hm-prof-city {
  min-width: 0;
  overflow-wrap: anywhere;
  color: var(--ink-2);
  font-weight: 500;
}
.hm-prof-meta [data-lucide] {
  width: 11px; height: 11px;
  color: var(--muted);
  flex-shrink: 0;
}
.hm-prof-sep {
  width: 3px; height: 3px;
  border-radius: 50%;
  background: #D0D3E4;
  display: inline-block;
  flex-shrink: 0;
}

.hm-prof-ltv {
  text-align: right;
  flex-shrink: 0;
  margin-left: auto;
}
.hm-prof-ltv-label {
  font-size: 10px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 700;
}
.hm-prof-ltv-amt {
  font-size: 22px;
  font-weight: 800;
  color: var(--navy);
  letter-spacing: -0.02em;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  margin-top: 2px;
  white-space: nowrap;
}

/* Action buttons — rounded pill, matches CRM button language. */
.hm-prof-action {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: inherit;
  font-size: 12px;
  font-weight: 700;
  color: var(--ink-2);
  background: #fff;
  border: 1px solid var(--border-strong, #CFD2E6);
  border-radius: 999px;
  padding: 7px 13px;
  cursor: pointer;
  transition: background .18s ease, color .18s ease, border-color .18s ease, transform .18s ease;
  white-space: nowrap;
  line-height: 1;
}
.hm-prof-action [data-lucide] { width: 13px; height: 13px; flex-shrink: 0; }
.hm-prof-action:hover {
  border-color: var(--navy);
  color: var(--navy);
}
.hm-prof-action:active { transform: translateY(1px); }
.hm-prof-action-wa {
  color: #0E9F6E;
  border-color: rgba(16,185,129,.35);
  background: var(--green-50, #E8FAF3);
}
.hm-prof-action-wa:hover {
  color: #fff;
  background: #10B981;
  border-color: #10B981;
}

/* Overview cards (Total Orders / Total Spent / AOV / Days) */
.hm-prof-ov {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}
.hm-prof-ov-card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 11px 12px;
}
.hm-prof-ov-l {
  font-size: 10px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 700;
}
.hm-prof-ov-v {
  font-size: 18px;
  font-weight: 800;
  color: var(--navy);
  letter-spacing: -0.02em;
  margin-top: 5px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
}
.hm-prof-ov-s {
  font-size: 10.5px;
  color: var(--muted);
  margin-top: 3px;
  font-weight: 500;
}

/* Tabs — ported from .crmx-tabs */
.hm-prof-tabs {
  display: flex;
  gap: 0;
  padding: 0 2px;
  border-bottom: 1px solid var(--border);
  background: transparent;
  overflow-x: auto;
  scrollbar-width: none;
}
.hm-prof-tabs::-webkit-scrollbar { display: none; }
.hm-prof-tab {
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--muted);
  background: transparent;
  border: 0;
  padding: 11px 14px;
  cursor: pointer;
  position: relative;
  transition: color .2s ease;
  white-space: nowrap;
  flex-shrink: 0;
}
.hm-prof-tab:hover { color: var(--ink-2); }
.hm-prof-tab.active { color: var(--navy); }
.hm-prof-tab.active::after {
  content: '';
  position: absolute;
  left: 14px; right: 14px; bottom: -1px;
  height: 2px;
  background: var(--navy);
  border-radius: 2px 2px 0 0;
}
.hm-prof-tab-n {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 6px;
  margin-left: 6px;
  border-radius: 999px;
  background: var(--navy-50);
  color: var(--ink-2);
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10.5px;
  font-weight: 700;
  line-height: 1;
  transition: background .2s ease, color .2s ease;
}
.hm-prof-tab.active .hm-prof-tab-n {
  background: var(--navy);
  color: #fff;
}

/* Timeline — ported from .crmx-ev (colored icon capsules +
   dashed vertical connector between items). */
.hm-prof-timeline {
  padding: 8px 2px 4px;
  display: flex;
  flex-direction: column;
}
.hm-prof-tab-in { animation: hmProfTabIn .28s ease; }
@keyframes hmProfTabIn {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}
.hm-prof-ev {
  position: relative;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 12px;
  padding: 8px 0 14px;
  opacity: 0;
  transform: translateX(-14px);
  animation: hmProfEvIn .38s cubic-bezier(.25,.8,.4,1) forwards;
}
@keyframes hmProfEvIn {
  to { opacity: 1; transform: translateX(0); }
}
/* Dashed vertical connector between events */
.hm-prof-ev:not(:last-child)::before {
  content: '';
  position: absolute;
  left: 16px;
  top: 40px;
  bottom: 2px;
  width: 0;
  border-left: 1.5px dashed #D9DBEA;
}
.hm-prof-ev-icon {
  width: 32px; height: 32px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  z-index: 1;
}
.hm-prof-ev-icon [data-lucide] { width: 15px; height: 15px; }
.hm-prof-ev-icon.orange { background: var(--orange-50); color: var(--orange); }
.hm-prof-ev-icon.blue   { background: #E6EEFE;          color: #3366E3; }
.hm-prof-ev-icon.green  { background: var(--green-50);  color: var(--green); }
.hm-prof-ev-icon.pink   { background: #FCE8F1;          color: #D6408F; }
.hm-prof-ev-icon.purple { background: #EFE7FC;          color: #7E4FE0; }
.hm-prof-ev-icon.navy   { background: var(--navy-50);   color: var(--navy); }
.hm-prof-ev-icon.red    { background: var(--red-50);    color: var(--red); }

.hm-prof-ev-body {
  min-width: 0;
  padding-top: 3px;
}
.hm-prof-ev-title {
  font-size: 13px;
  color: var(--ink);
  line-height: 1.4;
  letter-spacing: -0.005em;
  overflow-wrap: anywhere;
  font-weight: 600;
}
.hm-prof-ev-title b { color: var(--navy); font-weight: 700; }
.hm-prof-ev-title .hm-mono {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 12px;
  color: var(--ink-2);
  font-weight: 600;
}
.hm-prof-ev-time {
  font-size: 11px;
  color: var(--muted);
  margin-top: 4px;
  font-weight: 500;
}

/* ==================== CURSOR ==================== */
.hm-cursor {
  position: absolute;
  top: 0; left: 0;
  width: 22px; height: 22px;
  pointer-events: none;
  opacity: 0;
  z-index: 20;
  transition: transform .9s cubic-bezier(.5,.1,.25,1), opacity .3s ease;
  transform: translate(-80px, -80px);
}
.hm-cursor.show { opacity: 1; }
.hm-cursor svg {
  width: 22px; height: 22px;
  filter: drop-shadow(0 3px 8px rgba(42, 40, 119, 0.3));
}
.hm-cursor-lab {
  position: absolute;
  top: 22px; left: 16px;
  background: var(--orange);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 5px;
  white-space: nowrap;
  box-shadow: 0 2px 6px rgba(255, 129, 35, 0.4);
  opacity: 0;
  transition: opacity .2s ease;
}
.hm-cursor.click .hm-cursor-lab { opacity: 1; }
.hm-cursor.click svg { transform: scale(.92); transition: transform .12s ease; }

.hm-click-ripple {
  position: absolute;
  width: 44px; height: 44px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 129, 35, 0.5), transparent 70%);
  transform: translate(-50%, -50%) scale(0.3);
  opacity: 1;
  pointer-events: none;
  animation: hm-ripple .5s ease-out forwards;
  z-index: 19;
}
@keyframes hm-ripple {
  0% { transform: translate(-50%, -50%) scale(0.3); opacity: 1; }
  100% { transform: translate(-50%, -50%) scale(1.6); opacity: 0; }
}

/* ==================== OPS BANNER (Dashboard) ==================== */
.hm-ops-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 9px 14px;
  margin-bottom: 12px;
  box-shadow: var(--shadow-sm);
}
.hm-ops-banner-l {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.hm-ops-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--orange);
  box-shadow: 0 0 0 4px rgba(255, 129, 35, 0.18);
  flex-shrink: 0;
  animation: hm-pulse-dot 2.1s infinite ease-in-out;
}
@keyframes hm-pulse-dot {
  0%, 100% { box-shadow: 0 0 0 4px rgba(255, 129, 35, 0.18); }
  50% { box-shadow: 0 0 0 7px rgba(255, 129, 35, 0.08); }
}
.hm-ops-text {
  font-size: 12px;
  color: var(--navy);
  font-weight: 500;
  line-height: 1.4;
}
.hm-ops-text b { font-weight: 700; color: var(--navy); }
.hm-ops-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(255, 129, 35, 0.10);
  color: #E16508;
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
}
.hm-ops-pill [data-lucide] { width: 12px; height: 12px; }
.hm-wave {
  display: inline-block;
  transform-origin: 70% 70%;
  animation: hm-wave 1.8s ease-in-out 1 both;
}
@keyframes hm-wave {
  0%, 100% { transform: rotate(0deg); }
  20% { transform: rotate(14deg); }
  40% { transform: rotate(-10deg); }
  60% { transform: rotate(14deg); }
  80% { transform: rotate(-4deg); }
}

/* ==================== LIVE TICKER (Dashboard) ==================== */
.hm-ticker {
  position: absolute;
  right: 16px;
  bottom: 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  z-index: 8;
  pointer-events: none;
  width: min(320px, 60%);
}
.hm-ticker-card {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 10px 12px;
  box-shadow: var(--shadow-md);
  opacity: 0;
  transform: translateX(20px);
  transition: opacity .35s ease, transform .35s ease;
}
.hm-ticker-card.show {
  opacity: 1;
  transform: translateX(0);
}
.hm-ticker-card.fading {
  opacity: 0;
  transform: translateY(-10px);
}
.hm-ticker-icon {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  display: grid;
  place-items: center;
  flex-shrink: 0;
}
.hm-ticker-icon [data-lucide] { width: 14px; height: 14px; }
.hm-ticker-body { flex: 1; min-width: 0; line-height: 1.3; }
.hm-ticker-title {
  font-size: 11.5px;
  font-weight: 700;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.hm-ticker-meta {
  font-size: 10px;
  color: var(--muted);
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.hm-ticker-time {
  font-size: 10px;
  color: var(--muted);
  font-weight: 600;
  flex-shrink: 0;
}

/* ==================== ORDER ARRIVAL TOAST (Orders page) ==================== */
.hm-order-toast {
  position: absolute;
  top: 24px;
  right: 18px;
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--navy);
  color: #fff;
  border-radius: 12px;
  padding: 10px 14px;
  box-shadow: 0 10px 30px -8px rgba(42, 40, 119, 0.45);
  opacity: 0;
  transform: translateX(20px);
  transition: opacity .3s ease, transform .3s ease;
  z-index: 9;
  pointer-events: none;
}
.hm-order-toast.show {
  opacity: 1;
  transform: translateX(0);
}
.hm-order-toast-icon {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  background: rgba(255, 129, 35, 0.25);
  color: #FF8123;
  display: grid;
  place-items: center;
  flex-shrink: 0;
}
.hm-order-toast-icon [data-lucide] { width: 15px; height: 15px; }
.hm-order-toast-title { font-size: 12px; font-weight: 700; }
.hm-order-toast-meta { font-size: 10px; opacity: 0.75; margin-top: 2px; font-family: 'JetBrains Mono', monospace; }

/* ==================== CAMPAIGN TOAST (inside customer drawer) ==================== */
.hm-campaign-toast {
  position: absolute;
  bottom: 20px;
  right: 20px;
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--green, #10B981);
  color: #fff;
  border-radius: 10px;
  padding: 9px 13px;
  font-size: 12px;
  font-weight: 600;
  box-shadow: 0 10px 24px -8px rgba(16, 185, 129, 0.5);
  opacity: 0;
  transform: translateY(10px);
  transition: opacity .28s ease, transform .28s ease;
  z-index: 13;
  pointer-events: none;
}
.hm-campaign-toast.show { opacity: 1; transform: translateY(0); }
.hm-campaign-toast [data-lucide] { width: 16px; height: 16px; }
.hm-campaign-toast b { font-weight: 700; }

/* ==================== SPARKLINE trend color ==================== */
.hm-stat-spark { opacity: 0.8; }

/* ==================== ORDERS — source pill, viewers, tags ==================== */
.hm-orders-table { min-width: 920px; }

.hm-id-cell {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.hm-src-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 7px;
  border-radius: 999px;
  font-size: 9.5px;
  font-weight: 700;
  white-space: nowrap;
  text-transform: none;
  letter-spacing: 0;
}
.hm-src-pill [data-lucide] { width: 10px; height: 10px; }
.hm-micro-chip {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 2px 6px;
  border-radius: 6px;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.02em;
  white-space: nowrap;
}
.hm-micro-chip.orange { background: rgba(255, 129, 35, 0.12); color: #E16508; }
.hm-micro-chip.blue { background: rgba(79, 94, 224, 0.12); color: #3A46B4; }
.hm-micro-chip [data-lucide] { width: 9px; height: 9px; }

.hm-avatar-stack {
  display: inline-flex;
}
.hm-tiny-avatar {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: #fff;
  font-size: 9px;
  font-weight: 800;
  border: 2px solid #fff;
  margin-left: -6px;
  flex-shrink: 0;
}
.hm-tiny-avatar:first-child { margin-left: 0; }

.hm-chip-xs {
  padding: 2px 6px;
  font-size: 9.5px;
}
.hm-chip-xs [data-lucide] { width: 9px; height: 9px; }

.hm-tab-count {
  background: #F1F2F6;
  color: var(--muted);
  font-size: 10px;
  padding: 1px 6px;
  border-radius: 999px;
  font-weight: 800;
  margin-left: 4px;
}
.hm-tab.active .hm-tab-count {
  background: var(--navy-50);
  color: var(--navy);
}

.hm-up { color: var(--green); font-weight: 700; }

/* New order slide-in row */
.hm-new-order-row {
  background: rgba(255, 129, 35, 0.08) !important;
  opacity: 0;
  transform: translateY(-16px);
  transition: opacity .35s ease, transform .35s ease, background .6s ease 1s;
  animation: none !important;
}
.hm-new-order-row.show {
  opacity: 1;
  transform: translateY(0);
}
.hm-new-flash {
  display: inline-flex;
  align-items: center;
  padding: 2px 7px;
  border-radius: 999px;
  background: var(--orange);
  color: #fff;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.04em;
  animation: hm-pulse-flash 1.2s infinite ease-in-out;
}
@keyframes hm-pulse-flash {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255, 129, 35, 0.5); }
  50% { box-shadow: 0 0 0 6px rgba(255, 129, 35, 0); }
}

/* ==================== PRODUCTS — inventory, variants, expand ==================== */
.hm-products-table { min-width: 880px; }
.hm-inv-primary {
  font-size: 12px;
  color: var(--ink);
  font-weight: 600;
}
.hm-inv-primary b { font-weight: 800; color: var(--ink); }
.hm-inv-secondary {
  font-size: 10px;
  color: var(--muted);
  margin-top: 2px;
  font-family: 'JetBrains Mono', monospace;
}
.hm-var-cluster {
  display: flex;
  align-items: center;
  gap: 8px;
}
.hm-var-count {
  font-size: 11px;
  font-weight: 700;
  color: var(--ink);
  background: #F4F5F9;
  padding: 3px 8px;
  border-radius: 6px;
}
.hm-var-dots {
  display: inline-flex;
  gap: 3px;
}
.hm-var-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 1px solid rgba(0, 0, 0, 0.08);
}

.hm-prow-expand {
  background: #FBFBFD;
  opacity: 0;
  transform: none !important;
  animation: none !important;
}
.hm-prow-expand > td {
  padding: 0 !important;
  border-bottom: 1px solid var(--border);
}
.hm-prow-expand > td > .hm-prow-inner {
  max-height: 0;
  overflow: hidden;
  transition: max-height .3s ease, padding .3s ease;
  padding: 0 16px;
}
.hm-prow-expand.open { opacity: 1; }
.hm-prow-expand.open > td > .hm-prow-inner {
  max-height: 300px;
  padding: 14px 16px 16px;
}

.hm-prow-title {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 700;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 8px;
}
.hm-prow-title [data-lucide] { width: 12px; height: 12px; color: var(--orange); }

.hm-variant-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 11px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
}
.hm-variant-table thead th {
  text-align: left;
  padding: 7px 10px;
  background: #FBFBFD;
  border-bottom: 1px solid var(--border);
  font-size: 9.5px;
  font-weight: 700;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.hm-variant-table tbody td {
  padding: 7px 10px;
  border-bottom: 1px solid var(--border);
}
.hm-variant-table tbody tr:last-child td { border-bottom: none; }

.hm-lowstock-alert {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
  background: rgba(255, 129, 35, 0.08);
  border: 1px solid rgba(255, 129, 35, 0.25);
  border-radius: 8px;
  padding: 7px 12px;
  font-size: 11px;
  color: #8A4413;
}
.hm-lowstock-alert [data-lucide] {
  width: 14px; height: 14px;
  color: var(--orange);
  flex-shrink: 0;
}
.hm-lowstock-alert span b { color: var(--orange); font-weight: 700; }
.hm-lowstock-cta {
  margin-left: auto;
  color: var(--orange);
  font-weight: 700;
  font-size: 11px;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  cursor: pointer;
  white-space: nowrap;
}
.hm-lowstock-cta [data-lucide] { width: 12px; height: 12px; }

/* ==================== CUSTOMERS — tags, vip cta ==================== */
.hm-customers-table { min-width: 900px; }
.hm-tags-cell {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  max-width: 160px;
}

.hm-vip-cta {
  display: none;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: linear-gradient(95deg, rgba(255, 129, 35, 0.08), rgba(255, 129, 35, 0.02));
  border: 1px solid rgba(255, 129, 35, 0.25);
  border-radius: 12px;
  padding: 10px 14px;
  margin-bottom: 12px;
}
.hm-vip-cta.show { display: flex; animation: hm-fadeIn .3s ease; }
.hm-vip-cta-l {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}
.hm-vip-cta-l [data-lucide] {
  width: 20px; height: 20px;
  color: var(--orange);
  flex-shrink: 0;
}
.hm-vip-cta-title { font-size: 13px; font-weight: 700; color: var(--ink); }
.hm-vip-cta-sub { font-size: 11px; color: var(--muted); margin-top: 2px; }
.hm-vip-btn {
  background: var(--orange) !important;
  border-color: var(--orange) !important;
  animation: hm-pulse-orange 2.2s infinite ease-in-out;
  box-shadow: 0 0 0 0 rgba(255, 129, 35, 0.5);
}
.hm-vip-btn:hover { background: #E16508 !important; }
@keyframes hm-pulse-orange {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255, 129, 35, 0.35); }
  50% { box-shadow: 0 0 0 9px rgba(255, 129, 35, 0); }
}

.hm-cust-action-row {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 4px;
}
.hm-btn-xs {
  padding: 5px 9px !important;
  font-size: 11px !important;
}
.hm-btn-xs [data-lucide] { width: 12px !important; height: 12px !important; }

/* ==================== ORDER DRAWER (parallel to customer drawer) ==================== */
.hm-drawer.hm-drawer-order { width: min(560px, 92%); }

.hm-drawer-actions {
  display: flex;
  gap: 8px;
  margin-top: 4px;
  align-items: stretch;
}

/* ---------- Dispatch-to-Steadfast interactive button ---------- */
/* Primary CTA for courier auto-dispatch. Takes up the full drawer
   width minus the ghost "Print Label" to its right. */
.hm-dispatch-btn {
  position: relative;
  flex: 1;
  min-width: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 44px;
  padding: 0 16px;
  border-radius: 10px;
  border: 1px solid var(--orange);
  background: var(--orange);
  color: #fff;
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: -0.005em;
  cursor: pointer;
  transition: background .18s ease, border-color .18s ease, opacity .26s ease, transform .18s ease;
  white-space: nowrap;
  overflow: hidden;
}
.hm-dispatch-btn [data-lucide] { width: 15px; height: 15px; }
.hm-dispatch-btn:hover { background: #FF9342; border-color: #FF9342; }
.hm-dispatch-btn:active { transform: translateY(1px); }

.hm-dispatch-btn-label,
.hm-dispatch-btn-loading,
.hm-dispatch-btn-success {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.hm-dispatch-btn-loading,
.hm-dispatch-btn-success { display: none; }

.hm-dispatch-btn.loading {
  background: #FFA463;
  border-color: #FFA463;
  cursor: progress;
  pointer-events: none;
}
.hm-dispatch-btn.loading .hm-dispatch-btn-label,
.hm-dispatch-btn.loading .hm-dispatch-btn-success { display: none; }
.hm-dispatch-btn.loading .hm-dispatch-btn-loading { display: inline-flex; }

.hm-dispatch-btn.success {
  background: var(--green);
  border-color: var(--green);
  cursor: default;
  pointer-events: none;
}
.hm-dispatch-btn.success .hm-dispatch-btn-label,
.hm-dispatch-btn.success .hm-dispatch-btn-loading { display: none; }
.hm-dispatch-btn.success .hm-dispatch-btn-success { display: inline-flex; }

.hm-dispatch-btn.fading {
  opacity: 0;
  transform: translateY(-4px);
  pointer-events: none;
}

/* CSS spinner for the loading state */
.hm-spinner {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.45);
  border-top-color: #fff;
  animation: hm-spin 0.7s linear infinite;
}
@keyframes hm-spin { to { transform: rotate(360deg); } }

/* Keep the ghost "Print Label" button aligned with the 44px CTA */
.hm-drawer-actions .hm-dispatch-print {
  height: 44px;
  padding: 0 14px;
  border-radius: 10px;
}

/* ---------- Tracking card (replaces the button on success) ---------- */
.hm-track-card {
  flex: 1;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  animation: hm-track-in 0.36s ease;
}
@keyframes hm-track-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}
.hm-track-card-main {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 10px;
}
.hm-track-l { min-width: 0; }
.hm-track-card-label {
  font-size: 10px;
  font-weight: 700;
  color: var(--muted);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.hm-track-code {
  margin-top: 2px;
  font-size: 15px;
  font-weight: 800;
  color: var(--navy);
  letter-spacing: 0.02em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.hm-track-copy-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 32px;
  padding: 0 12px;
  border-radius: 8px;
  border: 1px solid var(--border-strong);
  background: #fff;
  color: var(--ink-2);
  font-family: inherit;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: border-color .15s ease, color .15s ease, background .15s ease;
  white-space: nowrap;
}
.hm-track-copy-btn [data-lucide] { width: 13px; height: 13px; }
.hm-track-copy-btn:hover { border-color: var(--navy); color: var(--navy); }
.hm-track-copy-btn.copied {
  background: rgba(16, 185, 129, 0.12);
  border-color: var(--green);
  color: var(--green);
}
.hm-track-url {
  font-size: 11px;
  color: var(--ink-2);
  line-height: 1.4;
}

/* Animated entrance for the fresh "Courier dispatched" timeline entry */
.hm-tl-item.hm-tl-new {
  animation: hm-tl-in 0.36s ease;
}
@keyframes hm-tl-in {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ==================== TIMELINE (shared by both drawers) ==================== */
.hm-timeline {
  display: flex;
  flex-direction: column;
  gap: 10px;
  position: relative;
  padding-left: 4px;
}
.hm-timeline::before {
  content: '';
  position: absolute;
  left: 18px;
  top: 10px;
  bottom: 10px;
  width: 1px;
  background: linear-gradient(to bottom, var(--border), transparent);
}
.hm-tl-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  position: relative;
  z-index: 1;
}
.hm-tl-icon {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  border: 2px solid #fff;
}
.hm-tl-icon [data-lucide] { width: 14px; height: 14px; }
.hm-tl-body { flex: 1; min-width: 0; padding-top: 2px; }
.hm-tl-text {
  font-size: 12px;
  font-weight: 600;
  color: var(--ink);
  line-height: 1.4;
}
.hm-tl-meta {
  font-size: 11px;
  color: var(--muted);
  margin-top: 2px;
}

/* ==================== TOTALS BLOCK ==================== */
.hm-totals {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.hm-totals-row {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  color: var(--ink-2);
}
.hm-totals-row.hm-totals-grand {
  padding-top: 8px;
  border-top: 1px solid var(--border);
  font-weight: 800;
  color: var(--ink);
  font-size: 14px;
}
.hm-totals-row.hm-totals-grand .hm-mono { color: var(--navy); }

/* ==================== CONTAINER QUERIES ==================== */
@container hmbrowser (max-width: 1099.98px) {
  .hm-browser { --hm-side-w: 200px; }
  .hm-stat-grid { grid-template-columns: repeat(2, 1fr); }
  .hm-stat-grid.hm-stat-grid-4 { grid-template-columns: repeat(2, 1fr); }
  .hm-dash-row { grid-template-columns: 1fr; }
}

@container hmbrowser (max-width: 899.98px) {
  .hm-browser { --hm-side-w: 56px; }
  .hm-side { padding: 14px 6px; align-items: center; }
  .hm-side-head { padding: 4px 0 12px; justify-content: center; }
  .hm-side-brand-text, .hm-side-collapse { display: none; }
  .hm-nav-item {
    justify-content: center;
    padding: 8px;
    width: 40px; height: 40px;
  }
  .hm-nav-item-label, .hm-side-group { display: none; }
  .hm-side-foot { border-top: none; align-items: center; }
  .hm-whats-new-l span, .hm-whats-new-num { display: none; }
  .hm-whats-new { padding: 8px; justify-content: center; }
  .hm-ws-body, .hm-workspace [data-lucide]:last-child { display: none; }
  .hm-workspace { justify-content: center; padding: 4px; }
  .hm-drawer-ov { grid-template-columns: repeat(2, 1fr); }
  .hm-prof-ov { grid-template-columns: repeat(2, 1fr); }
}

/* Below ~560px the customer drawer should take effectively the
   full width of the browser card (spec requirement). */
@container hmbrowser (max-width: 559.98px) {
  .hm-drawer { width: 100%; }
  .hm-drawer.hm-drawer-order { width: 100%; }
}

@container hmbrowser (max-width: 699.98px) {
  .hm-browser { --hm-side-w: 100%; }
  .hm-app { grid-template-columns: 1fr; }
  .hm-side {
    flex-direction: row;
    flex-wrap: nowrap;
    overflow-x: auto;
    padding: 10px;
    border-right: none;
    border-bottom: 1px solid var(--border);
    gap: 6px;
    -webkit-overflow-scrolling: touch;
  }
  .hm-side::-webkit-scrollbar { display: none; }
  .hm-side-head, .hm-side-group, .hm-side-foot { display: none; }
  .hm-nav-item {
    flex-shrink: 0;
    width: auto;
    height: auto;
    padding: 7px 12px;
    border-radius: 999px;
    font-size: 12px;
    background: #F4F5F9;
  }
  .hm-nav-item-label { display: inline; }
  .hm-nav-item.active {
    background: var(--navy);
    color: #fff;
  }
  .hm-nav-item.active [data-lucide] { color: #fff; }
  .hm-chrome { flex-wrap: wrap; }
  .hm-url { width: 100%; max-width: none; order: 3; margin: 8px 0 0; }
}

@container hmbrowser (max-width: 479.98px) {
  .hm-main { padding: 14px; }
  /* Keep 2-col on mobile — 1-col wastes vertical space on tiny cards. */
  .hm-stat-grid, .hm-stat-grid.hm-stat-grid-4 { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .hm-stat-card { padding: 10px 12px; }
  .hm-stat-v { font-size: 18px; }
  .hm-drawer-ov { grid-template-columns: 1fr 1fr; }
  .hm-prof-ov { grid-template-columns: 1fr 1fr; }

  /* Profile header: avatar+id on row 1; LTV wraps BELOW so the
     phone number doesn't break onto multiple lines. */
  .hm-drawer-head.hm-prof-head {
    padding: 14px 14px 12px;
    gap: 12px;
    align-items: flex-start;
  }
  .hm-prof-avatar { width: 48px; height: 48px; font-size: 16px; }
  .hm-prof-name { font-size: 16px; }
  .hm-prof-meta { gap: 8px; font-size: 11.5px; }
  .hm-prof-ltv {
    flex: 1 0 100%;
    text-align: left;
    margin-left: 0;
    padding-top: 4px;
    border-top: 1px dashed var(--border);
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
  }
  .hm-prof-ltv-amt { font-size: 20px; margin-top: 0; }

  /* Timeline scaling */
  .hm-prof-ev {
    grid-template-columns: 30px minmax(0, 1fr);
    gap: 10px;
    padding-bottom: 14px;
  }
  .hm-prof-ev:not(:last-child)::before { left: 14px; top: 36px; }
  .hm-prof-ev-icon { width: 28px; height: 28px; border-radius: 9px; }
  .hm-prof-ev-icon [data-lucide] { width: 13px; height: 13px; }
  .hm-prof-ev-title { font-size: 12.5px; line-height: 1.45; }
  .hm-prof-ev-title .hm-mono { font-size: 11.5px; }
  .hm-prof-ev-time { font-size: 10.5px; }

  .hm-prof-tab { padding: 10px 11px; font-size: 12px; }
  .hm-prof-tab-n {
    min-width: 16px; height: 16px; font-size: 10px;
    padding: 0 5px; margin-left: 5px;
  }

  /* Drawer ~100% width at <560px (we're inside the 480 cq here) */
  .hm-drawer { width: 100%; }

  .hm-page-head { align-items: flex-start; }
  .hm-table-scroll::after {
    content: '';
    position: absolute;
    right: 0; top: 0; bottom: 0;
    width: 24px;
    background: linear-gradient(to right, transparent, #fff);
    pointer-events: none;
  }
  .hm-ticker { width: calc(100% - 28px); right: 14px; bottom: 14px; }
  .hm-ops-banner { flex-direction: column; align-items: flex-start; }
  .hm-ops-pill { align-self: flex-start; }
  .hm-vip-cta { flex-direction: column; align-items: stretch; }
  .hm-vip-btn { align-self: stretch; justify-content: center; }
  .hm-order-toast { top: 14px; right: 14px; left: 14px; }
}

/* ==================== REDUCED MOTION ==================== */
@media (prefers-reduced-motion: reduce) {
  .hm-cursor, .hm-click-ripple, .hm-chart-tip,
  .hm-drawer, .hm-drawer-order, .hm-drawer-overlay,
  .hm-ticker-card, .hm-order-toast, .hm-campaign-toast,
  .hm-new-order-row, .hm-prow-expand, .hm-prow-expand > td > .hm-prow-inner,
  .hm-ops-dot, .hm-new-flash, .hm-vip-btn, .hm-wave,
  .hm-dispatch-btn, .hm-spinner, .hm-track-card, .hm-tl-item.hm-tl-new {
    transition: none !important;
    animation: none !important;
  }
  .hm-dispatch-btn.fading { opacity: 0; }
  .hm-table tbody tr { opacity: 1; transform: none; animation: none; }
  .hm-page { animation: none; }
}