/* Shared responsive polish: Ultra-compact, razor-sharp alignment across all cards & rows. */
:root {
  --mobile-nav-height: calc(62px + env(safe-area-inset-bottom, 0px));
  --muted: #647580;
}
[hidden] { display: none !important; }
html { scroll-padding-block: 70px 140px; }
body { min-width: 280px; }
button, a, input, select, textarea { -webkit-tap-highlight-color: transparent; }
button, a { touch-action: manipulation; }
:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
input, select, textarea { max-width: 100%; }
img, iframe { max-width: 100%; }
.workspace, #page, .booking-layout > *, .qr-studio-layout > *, .crud-panel,
.crud-grid-2 > *, .crud-grid-3 > *, .crud-grid-4 > *, .metric, .metric-body { min-width: 0; }

/* ==================== COMPACT WORKSPACE & TOPBAR ==================== */
.workspace {
  padding: 18px 28px 32px;
}
.workspace-topbar {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 0 0 10px; margin-bottom: 12px; border-bottom: 1px solid var(--border);
}
.topbar-left, .topbar-right { display: flex; align-items: center; gap: 8px; min-width: 0; }
.topbar-right { flex-shrink: 0; }
.topbar-hub-pill { display: flex; align-items: center; gap: 6px; min-width: 0; color: var(--ink-secondary); font-size: 12.5px; }
.hub-label { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.hub-indicator { width: 6px; height: 6px; background: var(--primary); border-radius: 50%; flex: 0 0 auto; }
.topbar-btn, .sidebar-toggle-btn { min-height: 34px; min-width: 34px; }
.topbar-btn { padding: 5px 10px; background: white; font-size: 12px; }
.drawer-close, .sidebar.collapsed .drawer-brand { display: none; }
.drawer-brand { min-width: 0; display: block; color: var(--ink); font-size: 14.5px; line-height: 1.3; font-weight: 700; overflow-wrap: anywhere; }
.drawer-brand small { display: block; margin-top: 2px; font-size: 10.5px; color: var(--muted); font-weight: 400; }
.sidebar-logo-container { gap: 8px; justify-content: flex-start; }
.sidebar-logo-link { flex-shrink: 0; }
.head-tools > [data-refresh] { display: none; }
.sidebar-nav-scroll { overscroll-behavior: contain; }

.page-head {
  margin-bottom: 10px;
  gap: 10px;
}
.workspace h1 {
  font-size: 21px;
  line-height: 1.15;
  letter-spacing: -0.5px;
  margin: 0 0 1px;
}
.page-head p {
  font-size: 12px;
  margin: 0;
}
.head-tools button, .btn-outline-link {
  min-height: 34px;
  padding: 5px 11px;
  font-size: 12px;
}

/* ==================== ULTRA-COMPACT HEADER METRIC CARDS ==================== */
.metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  padding: 4px 0 8px;
  margin-bottom: 4px;
  border-top: 0;
  border-bottom: 0;
}
.metrics.metrics-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
}
.metric,
.metric:first-child,
.metric:last-child {
  border: 1px solid var(--border);
  border-radius: 8px;
  background: #fafcfd;
  padding: 7px 10px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: space-between;
  gap: 3px;
  min-height: 0;
  box-shadow: 0 1px 2px rgba(23, 43, 58, 0.02);
  transition: border-color 0.14s ease, background 0.14s ease, box-shadow 0.14s ease;
}
.metric[role="button"] {
  cursor: pointer;
  user-select: none;
}
.metric[role="button"]:hover {
  border-color: #9bd3cb;
  background: #f4faf8;
}
.metric.active-card {
  border-color: var(--primary);
  background: var(--primary-soft);
  box-shadow: inset 0 0 0 1px var(--primary);
}
.metric.warning {
  border-color: #ebd094;
  background: #fffdf7;
}
.metric.critical {
  border-color: #ebbcc2;
  background: #fff9fa;
}
.metric.warning.active-card {
  border-color: #c88a1e;
  box-shadow: inset 0 0 0 1px #c88a1e;
}
.metric.critical.active-card {
  border-color: #c93b4b;
  box-shadow: inset 0 0 0 1px #c93b4b;
}
.metric-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 4px;
  width: 100%;
}
.metric-title {
  display: block;
  font-size: 11px;
  font-weight: 600;
  color: #526574;
  line-height: 1.2;
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.metric-icon-wrap {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
  background: transparent !important;
}
.metric-main {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 4px;
  width: 100%;
  flex-wrap: wrap;
}
.metric strong,
.metric.warning strong,
.metric.critical strong,
.metric strong.metric-money {
  display: block;
  font-size: clamp(16px, 1.6vw, 19px);
  font-weight: 700;
  letter-spacing: -0.5px;
  line-height: 1.15;
  color: var(--ink);
  margin: 0;
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}
.metric.warning strong { color: #9a6406; }
.metric.critical strong { color: #b42336; }
.metric-pill {
  display: inline-flex;
  align-items: center;
  font-size: 9.5px;
  font-weight: 600;
  padding: 1px 5px;
  border-radius: 99px;
  background: #eaf0f4;
  color: #475866;
  white-space: nowrap;
  line-height: 1.2;
}
.metric-pill.warning {
  background: var(--warning-bg);
  color: var(--warning);
}
.metric-pill.critical {
  background: var(--critical-bg);
  color: var(--critical);
}
.metric-sub,
.metric small {
  display: block;
  font-size: 10.5px;
  color: var(--muted);
  line-height: 1.2;
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ==================== OVERVIEW DASHBOARD PANELS ==================== */
.overview-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 4px;
}
.overview-panel {
  border: 1px solid var(--border);
  border-radius: 8px;
  background: #ffffff;
  padding: 10px 12px;
  min-width: 0;
}
.overview-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  padding-bottom: 7px;
  margin-bottom: 7px;
  border-bottom: 1px solid var(--border);
  flex-wrap: wrap;
}
.overview-panel-head h3 {
  margin: 0;
  font-size: 13px;
  font-weight: 650;
  color: var(--ink);
}
.overview-alert-list,
.overview-feed-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.overview-alert-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 6px 9px;
  border: 1px solid var(--border);
  border-left: 3px solid var(--primary);
  border-radius: 7px;
  background: #fafcfd;
}
.overview-alert-item.warning {
  border-left-color: #ce9b38;
  background: #fffdf8;
}
.overview-alert-item.critical {
  border-left-color: #cf5663;
  background: #fffafb;
}
.overview-alert-copy {
  min-width: 0;
  flex: 1;
}
.overview-alert-top {
  display: flex;
  align-items: center;
  gap: 5px;
  flex-wrap: wrap;
}
.overview-alert-top strong {
  font-size: 12px;
  color: var(--ink);
}
.overview-alert-copy p {
  margin: 1px 0 0;
  font-size: 11px;
  color: var(--muted);
  line-height: 1.25;
}
.overview-alert-btn {
  min-height: 26px !important;
  padding: 3px 8px !important;
  font-size: 11px !important;
  border-radius: 5px;
  flex-shrink: 0;
  white-space: nowrap;
}
.overview-mini-tabs {
  display: inline-flex;
  background: #f1f5f7;
  padding: 2px;
  border-radius: 6px;
  gap: 2px;
}
.overview-mini-tabs button {
  min-height: 23px !important;
  padding: 2px 7px !important;
  font-size: 10.5px !important;
  border: 0;
  border-radius: 4px;
  background: transparent;
  color: #526574;
  font-weight: 600;
  box-shadow: none;
}
.overview-mini-tabs button.active {
  background: #ffffff;
  color: var(--primary);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
}
.overview-feed-item {
  padding: 6px 9px;
  border: 1px solid var(--border);
  border-radius: 7px;
  background: #fafcfd;
}
.overview-feed-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  margin-bottom: 2px;
}
.overview-feed-item strong {
  display: block;
  font-size: 12px;
  color: var(--ink);
  line-height: 1.25;
}
.overview-feed-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  margin-top: 2px;
  font-size: 10.5px;
  color: var(--muted);
  flex-wrap: wrap;
}
.overview-mini-btn {
  min-height: 22px !important;
  padding: 2px 7px !important;
  font-size: 10px !important;
}

/* ==================== COMPACT FILTERS & ROWS ==================== */
.filters { min-width: 0; max-width: 100%; gap: 6px; }
.filters button, .sf-chip { flex-shrink: 0; }
.filters button {
  padding: 6px 10px;
  min-height: 34px;
  font-size: 12px;
}
.stream-container { border: 1px solid var(--border); border-radius: 8px; overflow: hidden; }
.stream-row { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px; }
.rep-mini-stats-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 8px;
  padding: 8px 12px;
  background: #ffffff;
}
.rep-mini-stats-grid > div strong {
  display: block;
  font-size: 14px;
  font-weight: 700;
  color: #0f2838;
  margin-top: 1px;
}

.queue-row > *, .history-main, .detail-line > *, .dialog-head > div { min-width: 0; overflow-wrap: break-word; }
.queue-row.table-head > * {
  white-space: nowrap !important;
  overflow: hidden;
  text-overflow: ellipsis;
}
.queue-row {
  padding: 10px 10px;
  gap: 10px;
  cursor: pointer;
}
.queue-row.table-head {
  padding: 10px 10px 8px;
  cursor: default;
}
.queue-row.crud-perf-row { grid-template-columns: 2fr 1.2fr 1fr 1fr 1.3fr 1.5fr 1.2fr; }

.history-row {
  padding: 9px 8px;
  gap: 10px;
  cursor: pointer;
}
.history-row h3 {
  font-size: 13.5px;
  margin: 1px 0;
}
.history-age {
  font-size: 11.5px;
  margin: 1px 0 0;
}
.history-side {
  display: flex;
  align-items: center;
  gap: 10px;
}
.history-side-meta {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
}

.filter-bar, .crud-panel-head { flex-wrap: wrap; }
.detail-meta dd, .timeline, .notif-item, .qr-preview-panel, .message { overflow-wrap: anywhere; }
.sf-track-bar { display: flex; gap: 10px; margin-bottom: 20px; }
.sf-track-bar input { flex: 1; min-width: 0; }
.sf-track-card, .sf-closed-card { border: 1px solid var(--border); border-radius: 10px; padding: 20px; }
.sf-receipt-head, .sf-receipt-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
.sf-receipt-foot { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--border); }
.sf-receipt-rank { background: white; padding: 10px 14px; border-radius: 7px; }
.sf-receipt-rank span, .sf-contact-strip span { display: block; color: var(--muted); font-size: 11.5px; }
.sf-receipt-rank strong { display: block; color: var(--primary); font-size: 24px; }
.sf-contact-strip { display: flex; flex-wrap: wrap; gap: 16px; }
.sf-contact-strip > * { min-width: 0; overflow-wrap: anywhere; }
.sf-summary-sticky { align-self: start; }
.sf-prod-title-row { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin-bottom: 4px; }
.sf-prod-title-row h3 { flex-basis: 100%; }
.sf-cat-pill { display: inline-block; padding: 2px 6px; border-radius: 4px; background: var(--sidebar-bg); color: var(--muted); font-size: 10.5px; line-height: 1.35; }
.sf-mobile-checkout { display: none; }
.sf-card-title { gap: 10px; flex-wrap: wrap; }
.sf-brand-wrap { min-width: 0; }
.sf-brand-wrap .brand { min-width: 0; overflow-wrap: anywhere; }
.login-card { margin-block: auto; }
.login-intro { margin: -6px 0 20px; color: var(--muted); }
.login-intro h1 { font-size: 22px; letter-spacing: -.5px; margin-bottom: 4px; }
.login-intro p { margin: 0; font-size: 13.5px; }
.login-card input { min-height: 44px; }
.login-submit { min-height: 44px; }

/* ==================== TABLET & MOBILE COMPACT CARDS (<= 1100px) ==================== */
@media (max-width: 1100px) {
  .metrics:not(.metrics-3) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .overview-grid {
    grid-template-columns: 1fr;
  }
  .rep-mini-stats-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .sf-header-inner { flex-wrap: wrap; }
  .sf-tagline { display: none; }

  /* Organized 3-column compact card layout for all CRUD/Management tables */
  .queue-row.table-head {
    display: none !important;
  }
  .queue-row[class*="crud-"]:not(.table-head) {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px 8px;
    padding: 9px 12px;
    align-items: center;
  }
  .queue-row[class*="crud-"] > * {
    grid-column: auto;
    grid-row: auto;
    text-align: left !important;
    padding: 0;
    min-width: 0;
  }
  .queue-row [data-mobile-label]::before {
    display: none !important;
  }

  /* Hide redundant mobile labels on primary title, code badge, and action cells */
  .queue-row.crud-cust-row > :nth-child(1)::before,
  .queue-row.crud-cust-row > :nth-child(2)::before,
  .queue-row.crud-cust-row > :last-child::before,
  .queue-row.crud-prod-row > :nth-child(1)::before,
  .queue-row.crud-prod-row > :nth-child(2)::before,
  .queue-row.crud-prod-row > :last-child::before,
  .queue-row.crud-perf-row > :nth-child(1)::before,
  .queue-row.crud-perf-row > :nth-child(2)::before,
  .queue-row.crud-user-row > :nth-child(1)::before,
  .queue-row.crud-user-row > :nth-child(3)::before,
  .queue-row.crud-user-row > :last-child::before,
  .queue-row.crud-log-row > :nth-child(1)::before,
  .queue-row.crud-log-row > :nth-child(2)::before,
  .queue-row.crud-log-row > :nth-child(4)::before {
    display: none !important;
  }

  /* 1. Customers & Outlets (.crud-cust-row) */
  .queue-row.crud-cust-row > :nth-child(2) { grid-column: 1 / 3; grid-row: 1; }
  .queue-row.crud-cust-row > :nth-child(1) { grid-column: 3; grid-row: 1; justify-self: end; text-align: right !important; align-self: start; }
  .queue-row.crud-cust-row > :nth-child(1) .order-ref,
  .queue-row.crud-prod-row > :nth-child(1) .order-ref {
    display: inline-block;
    background: #eef3f6;
    color: #475866;
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 10px;
    font-weight: 600;
  }
  .queue-row.crud-cust-row > :nth-child(3) { grid-column: 1; grid-row: 2; }
  .queue-row.crud-cust-row > :nth-child(4) { grid-column: 2; grid-row: 2; }
  .queue-row.crud-cust-row > :nth-child(5) { grid-column: 3; grid-row: 2; }
  .queue-row.crud-cust-row > :nth-child(6) {
    grid-column: 1 / -1;
    grid-row: 3;
    padding-top: 5px;
    border-top: 1px solid #eef2f5;
    justify-content: flex-start !important;
    gap: 5px !important;
  }

  /* 2. Products & Stock (.crud-prod-row) - Tablet Card Layout */
  .queue-row.crud-prod-row:not(.table-head) {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    grid-template-rows: auto auto auto !important;
    gap: 6px 10px !important;
    padding: 10px 12px !important;
    align-items: center !important;
  }
  .queue-row.crud-prod-row .prod-col-info { grid-column: 1 !important; grid-row: 1 !important; }
  .queue-row.crud-prod-row .prod-col-price { grid-column: 2 !important; grid-row: 1 !important; justify-self: end !important; text-align: right !important; }
  .queue-row.crud-prod-row .prod-col-sku { grid-column: 1 !important; grid-row: 2 !important; display: inline-flex !important; align-items: center !important; gap: 6px !important; }
  .queue-row.crud-prod-row .prod-col-pack { grid-column: 2 !important; grid-row: 2 !important; justify-self: end !important; text-align: right !important; }
  .queue-row.crud-prod-row .prod-col-stock { grid-column: 1 !important; grid-row: 3 !important; display: inline-flex !important; align-items: center !important; gap: 6px !important; }
  .queue-row.crud-prod-row .prod-col-actions { grid-column: 2 !important; grid-row: 3 !important; display: inline-flex !important; align-items: center !important; gap: 6px !important; justify-self: end !important; }

  /* 3. Sales Performance (.crud-perf-row) */
  .queue-row.crud-perf-row > :nth-child(1) { grid-column: 1 / 3; grid-row: 1; }
  .queue-row.crud-perf-row > :nth-child(2) { grid-column: 3; grid-row: 1; justify-self: end; text-align: right !important; }
  .queue-row.crud-perf-row > :nth-child(3) { grid-column: 1; grid-row: 2; }
  .queue-row.crud-perf-row > :nth-child(4) { grid-column: 2; grid-row: 2; }
  .queue-row.crud-perf-row > :nth-child(5) { grid-column: 3; grid-row: 2; }
  .queue-row.crud-perf-row > :nth-child(6) { grid-column: 1 / 3; grid-row: 3; }
  .queue-row.crud-perf-row > :nth-child(7) { grid-column: 3; grid-row: 3; }

  /* 4. Team & Roles (.crud-user-row) */
  .queue-row.crud-user-row > :nth-child(1) { grid-column: 1 / 3; grid-row: 1; }
  .queue-row.crud-user-row > :nth-child(3) { grid-column: 3; grid-row: 1; justify-self: end; text-align: right !important; }
  .queue-row.crud-user-row > :nth-child(2) { grid-column: 1 / 3; grid-row: 2; }
  .queue-row.crud-user-row > :nth-child(4) { grid-column: 3; grid-row: 2; }
  .queue-row.crud-user-row > :nth-child(5) {
    grid-column: 1 / -1;
    grid-row: 3;
    padding-top: 5px;
    border-top: 1px solid #eef2f5;
    justify-content: space-between !important;
  }

  /* 5. Audit & Login Logs (.crud-log-row) */
  .queue-row.crud-log-row > :nth-child(2) { grid-column: 1 / 3; grid-row: 1; }
  .queue-row.crud-log-row > :nth-child(1) { grid-column: 3; grid-row: 1; justify-self: end; text-align: right !important; }
  .queue-row.crud-log-row > :nth-child(4) { grid-column: 1 / -1; grid-row: 2; }
  .queue-row.crud-log-row > :nth-child(3) { grid-column: 1 / 3; grid-row: 3; }
  .queue-row.crud-log-row > :nth-child(5) { grid-column: 3; grid-row: 3; justify-self: end; text-align: right !important; }
}

/* ==================== MOBILE VIEWPORT (<= 820px): SINGLE-TIER ULTRA-COMPACT ==================== */
@media (max-width: 820px) {
  body { background: white; }
  body.navigation-open { overflow: hidden; }
  button, .btn-outline-link, .sf-staff-link { min-height: 34px; }
  input:not([type="checkbox"]):not([type="radio"]), select, textarea {
    font-size: 14px !important; min-height: 36px !important; border-radius: 7px;
  }
  textarea { min-height: 80px !important; }
  input, select, textarea, button, a { scroll-margin-block: 70px 150px; }

  .workspace, .workspace.sidebar-collapsed {
    margin: 0 !important;
    padding: 0 12px calc(var(--mobile-nav-height) + 16px) !important;
  }
  .workspace-topbar {
    position: sticky; top: 0; z-index: 32; gap: 6px;
    margin: 0 -12px 8px;
    padding: calc(4px + env(safe-area-inset-top, 0px)) 10px 4px;
    background: rgba(255,255,255,.97); backdrop-filter: blur(12px);
  }
  .topbar-left { flex: 1; gap: 6px; }
  .topbar-right { gap: 3px; }
  .topbar-hub-pill { font-size: 11.5px; }
  .topbar-right .desktop-only, .topbar-right [data-logout], .hub-indicator { display: none; }
  .topbar-btn { padding: 5px; border-color: transparent; min-height: 32px; min-width: 32px; }
  .connection { font-size: 10.5px; white-space: nowrap; line-height: 1.2; }

  .page-head {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 8px;
  }
  .workspace h1 { font-size: 18.5px; line-height: 1.15; letter-spacing: -0.4px; }
  .page-head p { font-size: 11.5px; margin-bottom: 0; }
  .head-tools { width: auto; flex-wrap: wrap; gap: 5px; }
  .head-tools > [data-refresh], .head-tools > div:has(.updated) { display: none; }
  .head-tools:has(> [data-refresh]:first-child):not(:has(> .primary, > a)) { display: none; }
  .head-tools button, .head-tools .btn-outline-link {
    width: auto;
    min-height: 30px !important;
    padding: 4px 9px;
    font-size: 11.5px;
    margin-right: 0 !important;
  }
  .head-tools button span { display: inline; }

  .sidebar, .sidebar.collapsed {
    display: flex; width: min(85vw, 290px) !important; z-index: 60;
    padding: calc(12px + env(safe-area-inset-top, 0px)) 12px calc(12px + env(safe-area-inset-bottom, 0px));
    height: 100dvh; transform: translateX(-100%); border-radius: 0 14px 14px 0;
  }
  .sidebar.mobile-open { transform: translateX(0); }
  .sidebar-backdrop { z-index: 55; }
  .sidebar-logo-container { justify-content: flex-start; gap: 8px; }
  .sidebar-logo-link { flex-shrink: 0; }
  .drawer-brand { display: block; flex: 1; min-width: 0; font-weight: 700; font-size: 14.5px; overflow-wrap: anywhere; }
  .drawer-close { display: inline-flex; min-width: 36px; padding: 5px; border: 0; background: transparent; }
  .nav a { min-height: 42px; }

  .mobile-nav {
    height: var(--mobile-nav-height);
    padding: 2px max(6px, env(safe-area-inset-right, 0px)) env(safe-area-inset-bottom, 0px) max(6px, env(safe-area-inset-left, 0px));
    box-shadow: 0 -4px 18px #172b3a08; gap: 3px;
  }
  .mobile-nav a, .mobile-nav button {
    flex: 1; min-width: 0; min-height: 48px; display: flex; flex-direction: column;
    align-items: center; justify-content: center; gap: 2px; font-size: 10px;
    line-height: 1.1; font-weight: 550; padding: 3px 1px; color: var(--muted);
    background: transparent; border: 0; border-radius: 8px; box-shadow: none;
  }
  .mobile-nav a.active, .mobile-nav button.active { background: var(--primary-soft); color: var(--primary); font-weight: 700; }
  .mobile-nav .icon { width: 18px; height: 18px; }

  .page-head {
    margin-bottom: 4px !important;
    gap: 1px !important;
  }
  .page-head h1,
  .workspace h1 {
    font-size: 16px !important;
    margin: 0 !important;
    line-height: 1.2 !important;
  }
  .page-head p {
    font-size: 10px !important;
    margin: 0 !important;
    color: #64748b !important;
  }

  /* Mobile Compact Metric Cards - High Density KPI Strips */
  .metrics {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 4px !important;
    padding: 0 0 4px !important;
    margin-bottom: 4px !important;
    border-top: 0;
  }
  .metrics.metrics-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 4px !important;
  }
  .metric,
  .metric:first-child,
  .metric:last-child {
    padding: 3px 6px !important;
    min-height: 42px !important;
    gap: 0px !important;
    border-radius: 6px !important;
  }
  .metrics.metrics-3 .metric {
    padding: 3px 4px !important;
  }
  .metric-head {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 3px !important;
    margin-bottom: 0 !important;
  }
  .metric-icon-wrap,
  .metrics.metrics-3 .metric-icon-wrap {
    display: none !important;
  }
  .metric-title {
    font-size: 8.5px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.25px !important;
    color: #64748b !important;
    line-height: 1.15 !important;
  }
  .metric strong,
  .metric.warning strong,
  .metric.critical strong,
  .metric strong.metric-money {
    font-size: 13.5px !important;
    letter-spacing: -0.3px !important;
    line-height: 1.15 !important;
    margin: 0 !important;
  }
  .metrics.metrics-3 .metric strong {
    font-size: 13.5px !important;
  }
  .metric-pill {
    font-size: 8px !important;
    padding: 0 3.5px !important;
    border-radius: 3.5px !important;
    line-height: 1.15 !important;
    font-weight: 700 !important;
  }
  .metric-sub,
  .metric small {
    font-size: 8px !important;
    line-height: 1.15 !important;
    margin-top: 0 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    color: #64748b !important;
  }

  /* Mobile Executive Rep Card on Performance Page */
  .rep-exec-card {
    padding: 7px 9px !important;
    margin-bottom: 8px !important;
    gap: 5px !important;
    border-radius: 8px !important;
  }
  .rep-exec-avatar {
    width: 25px !important;
    height: 25px !important;
    font-size: 10px !important;
  }
  .rep-exec-name {
    font-size: 12px !important;
  }
  .rep-exec-tag {
    font-size: 9px !important;
    padding: 1px 4px !important;
  }
  .rep-exec-meta {
    font-size: 9.5px !important;
  }
  .rep-exec-revenue {
    font-size: 13px !important;
  }
  .rep-exec-revenue-label {
    font-size: 8.5px !important;
  }
  .rep-exec-chips {
    gap: 4px !important;
    padding-top: 4px !important;
  }
  .rep-exec-chip {
    padding: 2.5px 3px !important;
    border-radius: 5px !important;
    white-space: nowrap !important;
  }
  .rep-chip-num {
    font-size: 11px !important;
  }
  .rep-chip-text {
    font-size: 8.5px !important;
  }

  /* Compact Overview Panels and Action Center Widgets */
  .overview-panel {
    padding: 6px 9px !important;
  }
  .overview-panel-head {
    padding-bottom: 4px !important;
    margin-bottom: 5px !important;
  }
  .overview-panel-head h2, .overview-panel-head h3 {
    font-size: 13.5px !important;
    margin: 0 !important;
  }
  .overview-panel-head p {
    font-size: 10.5px !important;
    margin: 0 !important;
  }
  .overview-panel-head .badge {
    font-size: 9.5px !important;
    padding: 1px 5px !important;
  }
  .overview-alert-item {
    padding: 4px 8px !important;
    gap: 6px !important;
    border-radius: 6px !important;
    margin-bottom: 4px !important;
  }
  .overview-alert-top {
    gap: 4px !important;
  }
  .overview-alert-top .badge {
    font-size: 9px !important;
    padding: 1px 4px !important;
    border-radius: 3px !important;
  }
  .overview-alert-top strong {
    font-size: 11.5px !important;
    line-height: 1.2 !important;
  }
  .overview-alert-main p {
    font-size: 10px !important;
    line-height: 1.15 !important;
    margin: 1px 0 0 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    max-width: 220px !important;
  }
  .overview-alert-btn {
    min-height: 24px !important;
    font-size: 10.5px !important;
    padding: 2px 8px !important;
    border-radius: 4px !important;
    white-space: nowrap !important;
  }
  .ov-notif-stat {
    padding: 4px 6px !important;
  }
  .notif-stat-icon {
    width: 22px !important;
    height: 22px !important;
  }
  .ov-notif-stat strong {
    font-size: 11.5px !important;
  }
  .ov-notif-stat .small {
    font-size: 10px !important;
  }

  /* Mobile Segmented Filter Tabs with Light Border and Background */
  .filters,
  .storefront-mobile-tabs,
  .prod-filter-pills {
    display: flex !important;
    align-items: center !important;
    gap: 4px !important;
    padding: 3px !important;
    background: #f1f5f9 !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 8px !important;
    margin-bottom: 8px !important;
    overflow-x: auto !important;
    flex-wrap: nowrap !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
  }
  .filters::-webkit-scrollbar,
  .storefront-mobile-tabs::-webkit-scrollbar,
  .prod-filter-pills::-webkit-scrollbar {
    display: none !important;
  }
  .filters button,
  .storefront-tab-btn,
  .prod-filter-pills button {
    flex: 0 0 auto !important;
    min-height: 27px !important;
    height: 27px !important;
    padding: 0 9px !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    border-radius: 6px !important;
    background: #ffffff !important;
    border: 1px solid #cbd5e1 !important;
    color: #475569 !important;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04) !important;
    white-space: nowrap !important;
    cursor: pointer !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
  .filters button:hover,
  .storefront-tab-btn:hover,
  .prod-filter-pills button:hover {
    background: #f8fafc !important;
    border-color: #94a3b8 !important;
    color: #0f172a !important;
  }
  .filters button.active,
  .storefront-tab-btn.active,
  .prod-filter-pills button.active {
    background: var(--primary) !important;
    border-color: var(--primary) !important;
    color: #ffffff !important;
    font-weight: 700 !important;
    box-shadow: 0 1px 3px rgba(0, 124, 112, 0.28) !important;
  }
  .filter-bar { display: block; }
  .filter-bar > * { margin-bottom: 4px; }

  /* Mobile Date Preset Chips & Custom Date Pill */
  .date-chips-bar {
    display: flex !important;
    gap: 4px !important;
    overflow-x: auto !important;
    flex-wrap: nowrap !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding: 1px 0 2px !important;
  }
  .date-chips-bar::-webkit-scrollbar { display: none; }
  .date-chip {
    flex: 0 0 auto !important;
    padding: 2.5px 8px !important;
    font-size: 10.5px !important;
    min-height: 24px !important;
    height: 24px !important;
    border-radius: 999px !important;
  }

  /* ==================== MOBILE LIVE QUEUE: CLEAN SINGLE-TIER LAYOUT ==================== */
  .queue-table {
    margin: 0 -12px;
  }
  .queue-row.table-head {
    display: none !important;
  }
  .queue-row:not([class*="crud-"]):not(.table-head) {
    display: grid !important;
    grid-template-columns: 24px minmax(0, 1fr) auto 20px !important;
    grid-template-rows: auto auto !important;
    align-items: center !important;
    gap: 1px 8px !important;
    padding: 7px 10px !important;
    margin: 0 !important;
    border: 0 !important;
    border-bottom: 1px solid var(--border) !important;
    cursor: pointer;
  }
  .queue-row:not([class*="crud-"]) .rank {
    grid-column: 1 !important;
    grid-row: 1 / 3 !important;
    align-self: center !important;
    justify-self: center !important;
    padding: 0 !important;
  }
  .queue-row:not([class*="crud-"]) .rank strong {
    font-size: 13.5px !important;
    font-weight: 700 !important;
    color: var(--ink) !important;
  }
  .queue-row:not([class*="crud-"]) .rank .next-label {
    display: none !important;
  }
  .queue-row:not([class*="crud-"]) .customer-col {
    grid-column: 2 !important;
    grid-row: 1 / 3 !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    gap: 1px !important;
    padding: 0 !important;
    min-width: 0 !important;
  }
  .queue-row:not([class*="crud-"]) .customer-col .monogram {
    display: none !important;
  }
  .queue-row:not([class*="crud-"]) .customer-col strong {
    font-size: 13px !important;
    font-weight: 650 !important;
    line-height: 1.25 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    display: block !important;
    color: var(--ink) !important;
  }
  .queue-row:not([class*="crud-"]) .customer-col .sub {
    font-size: 11px !important;
    color: #647580 !important;
    margin-top: 0 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    display: block !important;
  }
  .queue-row:not([class*="crud-"]) .booked-col {
    display: none !important;
  }
  .queue-row:not([class*="crud-"]) .amount-col {
    grid-column: 3 !important;
    grid-row: 1 !important;
    justify-self: end !important;
    text-align: right !important;
    padding: 0 !important;
    border: 0 !important;
  }
  .queue-row:not([class*="crud-"]) .amount-col .mobile-label,
  .queue-row:not([class*="crud-"]) .age-col .mobile-label {
    display: none !important;
  }
  .queue-row:not([class*="crud-"]) .amount-col strong {
    font-size: 13px !important;
    font-weight: 700 !important;
    color: var(--ink) !important;
    display: block !important;
    line-height: 1.2 !important;
    white-space: nowrap !important;
  }
  .queue-row:not([class*="crud-"]) .age-col {
    grid-column: 3 !important;
    grid-row: 2 !important;
    justify-self: end !important;
    text-align: right !important;
    padding: 0 !important;
    border: 0 !important;
    display: flex !important;
    align-items: center !important;
    gap: 4px !important;
  }
  .queue-row:not([class*="crud-"]) .relative-age {
    font-size: 10.5px !important;
    font-weight: 550 !important;
    color: #647580 !important;
    line-height: 1.2 !important;
  }
  .queue-row:not([class*="crud-"]) .age-status {
    font-size: 9.5px !important;
    font-weight: 600 !important;
    padding: 1px 4px !important;
    border-radius: 3px !important;
    margin: 0 !important;
    display: inline-flex !important;
    line-height: 1.2 !important;
  }
  .queue-row:not([class*="crud-"]) .age-status .dot {
    display: none !important;
  }
  .queue-row:not([class*="crud-"]) .age-status.critical {
    background: var(--critical-bg) !important;
    color: var(--critical) !important;
  }
  .queue-row:not([class*="crud-"]) .age-status.warning {
    background: var(--warning-bg) !important;
    color: var(--warning) !important;
  }
  .queue-row:not([class*="crud-"]) .age-status.normal {
    background: #e8f6ef !important;
    color: #1f6e4c !important;
  }
  .queue-row:not([class*="crud-"]) .row-action {
    grid-column: 4 !important;
    grid-row: 1 / 3 !important;
    align-self: center !important;
    justify-self: end !important;
    min-width: 20px !important;
    width: 20px !important;
    min-height: 20px !important;
    height: 20px !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    color: #94a3b8 !important;
    box-shadow: none !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
  .queue-row:not([class*="crud-"]) .row-action > span:first-child {
    display: none !important;
  }
  .queue-row:not([class*="crud-"]) .row-action > span:last-child {
    font-size: 15px !important;
    color: #94a3b8 !important;
  }

  /* ==================== MOBILE ORDER HISTORY: CLEAN 2-COLUMN LAYOUT ==================== */
  .history-row {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto 20px !important;
    grid-template-rows: auto auto !important;
    align-items: center !important;
    gap: 1px 8px !important;
    padding: 7px 10px !important;
    margin: 0 !important;
    border: 0 !important;
    border-bottom: 1px solid var(--border) !important;
    cursor: pointer;
  }
  .history-row > .monogram {
    display: none !important;
  }
  .history-main {
    grid-column: 1 !important;
    grid-row: 1 / 3 !important;
    min-width: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    gap: 1px !important;
  }
  .history-main h3 {
    font-size: 13px !important;
    font-weight: 650 !important;
    line-height: 1.25 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    margin: 0 !important;
    color: var(--ink) !important;
  }
  .history-main .small.muted,
  .history-age {
    font-size: 10.5px !important;
    color: #647580 !important;
    margin: 0 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
  .history-side {
    grid-column: 2 !important;
    grid-row: 1 / 3 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-end !important;
    justify-content: center !important;
    gap: 2px !important;
  }
  .history-side strong {
    font-size: 13px !important;
    font-weight: 700 !important;
    color: var(--ink) !important;
    line-height: 1.2 !important;
    white-space: nowrap !important;
  }
  .history-side .badge {
    font-size: 9px !important;
    padding: 1px 4px !important;
    line-height: 1.2 !important;
  }
  .history-row .row-action {
    grid-column: 3 !important;
    grid-row: 1 / 3 !important;
    align-self: center !important;
    justify-self: end !important;
    min-width: 20px !important;
    width: 20px !important;
    min-height: 20px !important;
    height: 20px !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    color: #94a3b8 !important;
    box-shadow: none !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
  .history-row .row-action > span:first-child {
    display: none !important;
  }
  .history-row .row-action > span:last-child {
    font-size: 15px !important;
    color: #94a3b8 !important;
  }

  /* Mobile CRUD / Management Cards (.crud-cust-row, .crud-prod-row, .crud-perf-row, .crud-user-row, .crud-log-row) */
  .queue-row[class*="crud-"]:not(.table-head) {
    display: flex !important;
    flex-direction: column !important;
    padding: 10px 12px !important;
    gap: 6px !important;
    margin: 0 0 8px 0 !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 10px !important;
    background: #ffffff !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.02) !important;
    align-items: stretch !important;
  }
  .queue-row[class*="crud-"] [data-mobile-label]::before {
    display: none !important;
  }
  .queue-row[class*="crud-"] > * {
    text-align: left !important;
    padding: 0 !important;
    min-width: 0 !important;
    overflow-wrap: anywhere;
  }

  /* Mobile Customers Controls Bar */
  .cust-controls-bar {
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important;
    margin: 6px 0 6px !important;
  }
  .cust-search-box {
    position: relative !important;
    width: 100% !important;
    max-width: 100% !important;
  }
  .cust-search-box .search-icon {
    position: absolute !important;
    left: 10px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    color: #94a3b8 !important;
    width: 15px !important;
    height: 15px !important;
    pointer-events: none !important;
  }
  .cust-search-box input {
    width: 100% !important;
    min-height: 36px !important;
    height: 36px !important;
    font-size: 13px !important;
    padding-left: 32px !important;
    padding-right: 30px !important;
    border-radius: 7px !important;
    border: 1px solid #cbd5e1 !important;
  }
  .cust-city-chips {
    display: flex !important;
    align-items: center !important;
    gap: 4px !important;
    width: 100% !important;
    overflow-x: auto !important;
    scrollbar-width: none !important;
    padding: 3px !important;
    background: #f1f5f9 !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 8px !important;
  }
  .cust-city-chips::-webkit-scrollbar { display: none !important; }
  .cust-city-chip {
    flex: 0 0 auto !important;
    min-height: 27px !important;
    height: 27px !important;
    padding: 0 9px !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    border-radius: 6px !important;
    border: 1px solid #cbd5e1 !important;
    background: #ffffff !important;
    color: #475569 !important;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04) !important;
    white-space: nowrap !important;
    cursor: pointer !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
  .cust-city-chip:hover {
    background: #f8fafc !important;
    border-color: #94a3b8 !important;
    color: #0f172a !important;
  }
  .cust-city-chip.active {
    background: var(--primary) !important;
    border-color: var(--primary) !important;
    color: #ffffff !important;
    font-weight: 700 !important;
    box-shadow: 0 1px 3px rgba(0, 124, 112, 0.28) !important;
  }
  .cust-results-meta {
    font-size: 11px !important;
    color: #64748b !important;
    margin: 0 !important;
    line-height: 1.2 !important;
  }

  /* 1. Mobile Customer Card (.crud-cust-row) - Ultra-Sleek Native Contact Card */
  .queue-row.crud-cust-row:not(.table-head) {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    padding: 8px 10px !important;
    gap: 5px !important;
    border-radius: 9px !important;
    margin-bottom: 6px !important;
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    box-shadow: 0 1px 3px rgba(16, 35, 63, 0.02) !important;
  }
  .queue-row.crud-cust-row .cust-card-top {
    display: flex !important;
    align-items: flex-start !important;
    gap: 8px !important;
    width: 100% !important;
  }
  .queue-row.crud-cust-row .monogram-sm {
    width: 28px !important;
    height: 28px !important;
    font-size: 10.5px !important;
    border-radius: 50% !important;
    background: #e6f4f2 !important;
    color: #007c70 !important;
    font-weight: 700 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
    margin: 0 !important;
  }
  .queue-row.crud-cust-row .cust-card-info {
    display: flex !important;
    flex-direction: column !important;
    gap: 2px !important;
    flex: 1 !important;
    min-width: 0 !important;
  }
  .queue-row.crud-cust-row .cust-card-name-line {
    display: flex !important;
    align-items: center !important;
    gap: 5px !important;
    line-height: 1.25 !important;
    min-width: 0 !important;
  }
  .queue-row.crud-cust-row .cust-name-title {
    font-size: 13px !important;
    font-weight: 700 !important;
    color: #0f2838 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
  .queue-row.crud-cust-row .cust-city-tag {
    font-size: 9.5px !important;
    font-weight: 600 !important;
    color: #007c70 !important;
    background: #e8f5f3 !important;
    padding: 1px 5px !important;
    border-radius: 4px !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
  }
  .queue-row.crud-cust-row .cust-card-sub-line {
    display: flex !important;
    align-items: center !important;
    gap: 5px !important;
    font-size: 10.5px !important;
    color: #64748b !important;
    line-height: 1.2 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
  .queue-row.crud-cust-row .cust-contact-person {
    font-weight: 550 !important;
    color: #334155 !important;
  }
  .queue-row.crud-cust-row .cust-tel-link {
    color: #007c70 !important;
    text-decoration: none !important;
    font-weight: 600 !important;
  }
  .queue-row.crud-cust-row .cust-rep-label {
    color: #94a3b8 !important;
  }
  .queue-row.crud-cust-row .cust-card-badges {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-end !important;
    gap: 3px !important;
    flex-shrink: 0 !important;
  }
  .queue-row.crud-cust-row .cust-code-badge {
    font-size: 10px !important;
    padding: 1px 5px !important;
    background: #f1f5f9 !important;
    border: 1px solid #e2e8f0 !important;
    color: #334155 !important;
    border-radius: 4px !important;
    font-weight: 700 !important;
    font-family: ui-monospace, monospace !important;
    line-height: 1.2 !important;
  }
  .queue-row.crud-cust-row .cust-orders-badge {
    font-size: 9.5px !important;
    font-weight: 700 !important;
    color: #15803d !important;
    background: #f0fdf4 !important;
    border: 1px solid #bbf7d0 !important;
    padding: 1px 5px !important;
    border-radius: 4px !important;
    line-height: 1.2 !important;
    white-space: nowrap !important;
  }
  .queue-row.crud-cust-row .cust-card-actions {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 6px !important;
    padding-top: 5px !important;
    border-top: 1px solid #f1f5f9 !important;
    width: 100% !important;
  }
  .queue-row.crud-cust-row .btn-book-cust {
    min-height: 28px !important;
    height: 28px !important;
    padding: 0 12px !important;
    font-size: 11.5px !important;
    font-weight: 700 !important;
    background: #007c70 !important;
    color: #ffffff !important;
    border: 1px solid #007c70 !important;
    border-radius: 6px !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    flex: 0 0 auto !important;
    cursor: pointer !important;
  }
  .queue-row.crud-cust-row .btn-book-cust .icon {
    width: 13px !important;
    height: 13px !important;
  }
  .queue-row.crud-cust-row .cust-actions-right {
    display: inline-flex !important;
    align-items: center !important;
    gap: 5px !important;
  }
  .queue-row.crud-cust-row .btn-qr-cust,
  .queue-row.crud-cust-row .btn-edit-cust,
  .queue-row.crud-cust-row .btn-del-cust {
    min-height: 28px !important;
    height: 28px !important;
    padding: 0 8px !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    border-radius: 6px !important;
    border: 1px solid #cbd5e1 !important;
    background: #ffffff !important;
    color: #0f2838 !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 3px !important;
    cursor: pointer !important;
  }
  .queue-row.crud-cust-row .btn-qr-cust .icon,
  .queue-row.crud-cust-row .btn-edit-cust .icon,
  .queue-row.crud-cust-row .btn-del-cust .icon {
    width: 12px !important;
    height: 12px !important;
  }
  .queue-row.crud-cust-row .btn-del-cust {
    border-color: #fecdd3 !important;
    background: #fff1f2 !important;
    color: #e11d48 !important;
  }

  /* Mobile Products & Stock Controls Bar */
  .prod-controls-bar {
    display: flex !important;
    flex-direction: column !important;
    gap: 7px !important;
    margin: 6px 0 8px !important;
  }
  .prod-search-box {
    position: relative !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }
  .prod-search-box .search-icon {
    position: absolute !important;
    left: 10px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    color: #94a3b8 !important;
    width: 15px !important;
    height: 15px !important;
    pointer-events: none !important;
  }
  .prod-search-box input {
    width: 100% !important;
    min-height: 36px !important;
    height: 36px !important;
    font-size: 13px !important;
    padding-left: 32px !important;
    padding-right: 30px !important;
    border-radius: 7px !important;
    border: 1px solid #cbd5e1 !important;
  }
  .btn-search-clear {
    position: absolute !important;
    right: 7px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 22px !important;
    height: 22px !important;
    min-height: 22px !important;
    border-radius: 50% !important;
    background: #e2e8f0 !important;
    color: #475569 !important;
    border: 0 !important;
    font-size: 11px !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
  .prod-filter-pills {
    display: flex !important;
    gap: 4px !important;
    width: 100% !important;
    overflow-x: auto !important;
    scrollbar-width: none !important;
    padding: 3px 4px !important;
    background: #f1f5f9 !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 9px !important;
    margin-top: 6px !important;
  }
  .prod-filter-pills::-webkit-scrollbar { display: none !important; }
  .prod-filter-pill {
    flex: 1 !important;
    min-height: 28px !important;
    height: 28px !important;
    padding: 0 8px !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    border-radius: 7px !important;
    border: 1px solid #cbd5e1 !important;
    background: #ffffff !important;
    color: #475569 !important;
    text-align: center !important;
    white-space: nowrap !important;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04) !important;
    cursor: pointer !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
  .prod-filter-pill:hover {
    background: #f8fafc !important;
    border-color: #94a3b8 !important;
    color: #0f172a !important;
  }
  .prod-filter-pill.active {
    background: var(--primary) !important;
    border-color: var(--primary) !important;
    color: #ffffff !important;
    font-weight: 700 !important;
    box-shadow: 0 1px 3px rgba(0, 124, 112, 0.28) !important;
  }

  /* 2. Mobile Product Card (.crud-prod-row) - Sleek High-Density Balanced Layout */
  .queue-row.crud-prod-row:not(.table-head) {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    grid-template-rows: auto auto auto !important;
    gap: 3px 6px !important;
    padding: 6px 10px !important;
    align-items: center !important;
    border-radius: 9px !important;
    margin-bottom: 5px !important;
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.03) !important;
  }
  .queue-row.crud-prod-row .prod-col-info {
    grid-column: 1 !important;
    grid-row: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    min-width: 0 !important;
  }
  .queue-row.crud-prod-row .prod-title {
    font-size: 12.5px !important;
    font-weight: 700 !important;
    color: var(--ink) !important;
    line-height: 1.2 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    display: block !important;
  }
  .queue-row.crud-prod-row .prod-col-info .sub {
    font-size: 9.5px !important;
    color: #64748b !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    display: block !important;
    margin-top: 0 !important;
    line-height: 1.15 !important;
  }
  .queue-row.crud-prod-row .prod-col-price {
    grid-column: 2 !important;
    grid-row: 1 !important;
    justify-self: end !important;
    text-align: right !important;
    white-space: nowrap !important;
    line-height: 1.1 !important;
  }
  .queue-row.crud-prod-row .prod-price-carton {
    font-size: 13.5px !important;
    font-weight: 750 !important;
    color: #007c70 !important;
    display: block !important;
    letter-spacing: -0.2px !important;
  }
  .queue-row.crud-prod-row .prod-col-price .sub {
    font-size: 9px !important;
    color: #94a3b8 !important;
    display: block !important;
    line-height: 1.1 !important;
  }
  .queue-row.crud-prod-row .prod-col-sku {
    grid-column: 1 !important;
    grid-row: 2 !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    min-width: 0 !important;
  }
  .queue-row.crud-prod-row .prod-col-sku .order-ref {
    display: inline-block !important;
    background: #f1f5f9 !important;
    border: 1px solid #e2e8f0 !important;
    color: #334155 !important;
    padding: 1px 5px !important;
    border-radius: 4px !important;
    font-size: 9.5px !important;
    font-weight: 600 !important;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace !important;
    letter-spacing: 0.2px !important;
  }
  .queue-row.crud-prod-row .prod-col-pack {
    grid-column: 2 !important;
    grid-row: 2 !important;
    justify-self: end !important;
    font-size: 9.5px !important;
    color: #64748b !important;
    display: block !important;
    line-height: 1.1 !important;
  }
  .queue-row.crud-prod-row .prod-pack-pill {
    display: inline-block !important;
    background: #f8fafc !important;
    border: 1px solid #e2e8f0 !important;
    color: #64748b !important;
    padding: 1px 5px !important;
    border-radius: 4px !important;
    font-size: 9.5px !important;
    font-weight: 600 !important;
  }
  .queue-row.crud-prod-row .prod-col-stock {
    grid-column: 1 !important;
    grid-row: 3 !important;
    margin: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    min-width: 0 !important;
  }
  .queue-row.crud-prod-row .prod-stock-stepper {
    display: inline-flex !important;
    align-items: center !important;
    gap: 3px !important;
  }
  .queue-row.crud-prod-row .prod-stock-stepper::before {
    content: "Stock:" !important;
    font-size: 10px !important;
    font-weight: 600 !important;
    color: #64748b !important;
    margin-right: 1px !important;
  }
  .queue-row.crud-prod-row .prod-stock-input {
    width: 46px !important;
    min-width: 46px !important;
    min-height: 25px !important;
    height: 25px !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    text-align: center !important;
    padding: 1px 3px !important;
    border-radius: 4px !important;
    border: 1px solid #cbd5e1 !important;
    background: #ffffff !important;
    color: #0f2838 !important;
  }
  .queue-row.crud-prod-row .btn-save-stock {
    min-height: 25px !important;
    height: 25px !important;
    padding: 0 7px !important;
    font-size: 10.5px !important;
    font-weight: 600 !important;
    border-radius: 4px !important;
    background: #007c70 !important;
    border: 1px solid #007c70 !important;
    color: #ffffff !important;
    white-space: nowrap !important;
    cursor: pointer !important;
    box-shadow: 0 1px 2px rgba(0, 124, 112, 0.2) !important;
  }
  .queue-row.crud-prod-row .btn-save-stock:active {
    background: #006057 !important;
  }
  .queue-row.crud-prod-row .prod-low-pill {
    font-size: 9px !important;
    padding: 1px 4px !important;
    border-radius: 3px !important;
    white-space: nowrap !important;
  }
  .queue-row.crud-prod-row .prod-col-actions {
    grid-column: 2 !important;
    grid-row: 3 !important;
    display: inline-flex !important;
    gap: 3px !important;
    justify-self: end !important;
    align-items: center !important;
  }
  .queue-row.crud-prod-row .prod-col-actions .badge {
    font-size: 9px !important;
    padding: 1.5px 5px !important;
    border-radius: 4px !important;
  }
  .queue-row.crud-prod-row .btn-edit-prod {
    min-height: 25px !important;
    height: 25px !important;
    padding: 0 6px !important;
    font-size: 10.5px !important;
    font-weight: 600 !important;
    border-radius: 4px !important;
    border: 1px solid #cbd5e1 !important;
    background: #ffffff !important;
    color: #0f2838 !important;
    white-space: nowrap !important;
    cursor: pointer !important;
  }
  .queue-row.crud-prod-row .btn-del-prod {
    min-height: 25px !important;
    height: 25px !important;
    padding: 0 6px !important;
    font-size: 10.5px !important;
    font-weight: 600 !important;
    border-radius: 4px !important;
    border: 1px solid #fecdd3 !important;
    background: #fff1f2 !important;
    color: #e11d48 !important;
    white-space: nowrap !important;
    cursor: pointer !important;
  }

  /* 3. Mobile Sales Performance Card (.crud-perf-row) - Sleek 2-Row Layout */
  .queue-row.crud-perf-row:not(.table-head) {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    grid-template-rows: auto auto !important;
    gap: 4px 8px !important;
    padding: 8px 10px !important;
    align-items: center !important;
  }
  .queue-row.crud-perf-row > :nth-child(1) {
    grid-column: 1;
    grid-row: 1;
    display: flex;
    align-items: center;
    gap: 7px;
    min-width: 0;
  }
  .queue-row.crud-perf-row > :nth-child(1) strong {
    font-size: 13.5px;
    font-weight: 700;
    color: var(--ink);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .queue-row.crud-perf-row > :nth-child(5) {
    grid-column: 2;
    grid-row: 1;
    justify-self: end;
    text-align: right !important;
  }
  .queue-row.crud-perf-row > :nth-child(5) strong {
    font-size: 15px !important;
    font-weight: 700 !important;
    color: #007c70 !important;
  }
  .queue-row.crud-perf-row > :nth-child(2) {
    display: none !important;
  }
  .queue-row.crud-perf-row > :nth-child(3) {
    grid-column: 1;
    grid-row: 2;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 11.5px;
    color: #475569;
    text-align: left !important;
  }
  .perf-desktop-label { display: none !important; }
  .perf-mobile-stat { display: inline !important; font-weight: 600; color: #0f2838; }
  .perf-cartons-desktop { display: none !important; }
  .queue-row.crud-perf-row > :nth-child(4) {
    display: none !important;
  }
  .queue-row.crud-perf-row > :nth-child(6) {
    grid-column: 2;
    grid-row: 2;
    justify-self: end;
    display: inline-flex;
    gap: 4px;
    align-items: center;
  }
  .queue-row.crud-perf-row > :nth-child(7) {
    display: none !important;
  }

  /* 4. Mobile Team & Roles Card (.crud-user-row) */
  .queue-row.crud-user-row:not(.table-head) {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    grid-template-rows: auto auto auto !important;
    gap: 3px 6px !important;
    padding: 7px 10px !important;
    margin-bottom: 6px !important;
    align-items: center !important;
  }
  .queue-row.crud-user-row > :nth-child(1) {
    grid-column: 1;
    grid-row: 1;
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
  }
  .queue-row.crud-user-row > :nth-child(1) strong {
    font-size: 13px;
    font-weight: 700;
    color: var(--ink);
  }
  .queue-row.crud-user-row > :nth-child(1) .monogram {
    width: 26px !important;
    height: 26px !important;
    font-size: 11px !important;
  }
  .queue-row.crud-user-row > :nth-child(3) {
    grid-column: 2;
    grid-row: 1;
    justify-self: end;
  }
  .queue-row.crud-user-row > :nth-child(2) {
    grid-column: 1;
    grid-row: 2;
    display: inline-flex;
    flex-direction: column;
    font-size: 10.5px;
    color: #475569;
  }
  .queue-row.crud-user-row > :nth-child(4) {
    grid-column: 2;
    grid-row: 2;
    font-size: 10px;
    color: #64748b;
    justify-self: end;
    text-align: right !important;
  }
  .queue-row.crud-user-row > :nth-child(5) {
    grid-column: 1 / -1;
    grid-row: 3;
    display: flex !important;
    gap: 5px !important;
    padding-top: 5px !important;
    border-top: 1px solid #f1f5f9 !important;
    margin-top: 2px !important;
    justify-content: flex-end !important;
    align-items: center !important;
    width: 100% !important;
  }
  .queue-row.crud-user-row > :nth-child(5) button {
    min-height: 25px !important;
    padding: 2px 8px !important;
    font-size: 10.5px !important;
    border-radius: 5px;
  }

  /* Category Filter Chips in Audit Logs */
  .log-cat-chips {
    display: flex !important;
    gap: 4px !important;
    width: 100% !important;
    overflow-x: auto !important;
    scrollbar-width: none !important;
    padding: 3px 4px !important;
    background: #f1f5f9 !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 9px !important;
    margin-bottom: 8px !important;
  }
  .log-cat-chips::-webkit-scrollbar { display: none !important; }
  .log-cat-chip {
    flex: 0 0 auto !important;
    min-height: 27px !important;
    height: 27px !important;
    padding: 0 10px !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    border-radius: 6px !important;
    border: 1px solid #cbd5e1 !important;
    background: #ffffff !important;
    color: #475569 !important;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04) !important;
    white-space: nowrap !important;
    cursor: pointer !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
  .log-cat-chip:hover {
    background: #f8fafc !important;
    border-color: #94a3b8 !important;
    color: #0f172a !important;
  }
  .log-cat-chip.active {
    background: var(--primary) !important;
    border-color: var(--primary) !important;
    color: #ffffff !important;
    font-weight: 700 !important;
    box-shadow: 0 1px 3px rgba(0, 124, 112, 0.28) !important;
  }

  /* 5. Mobile Audit Log Card (.crud-log-row) - Sleek High-Density Compact Layout */
  .queue-row.crud-log-row:not(.table-head) {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    grid-template-rows: auto auto auto !important;
    gap: 2px 8px !important;
    padding: 6px 10px !important;
    align-items: center !important;
    border-radius: 9px !important;
    margin-bottom: 5px !important;
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.03) !important;
  }
  /* Row 1: Left = Actor Name & Role, Right = Timestamp & Relative Time */
  .queue-row.crud-log-row .log-col-actor {
    grid-column: 1 !important;
    grid-row: 1 !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 5px !important;
    min-width: 0 !important;
  }
  .queue-row.crud-log-row .log-actor-name {
    font-size: 12px !important;
    font-weight: 700 !important;
    color: #0f172a !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
  .queue-row.crud-log-row .log-actor-role {
    font-size: 9.5px !important;
    color: #64748b !important;
    background: #f1f5f9 !important;
    padding: 1px 4px !important;
    border-radius: 3px !important;
    border: 1px solid #e2e8f0 !important;
    white-space: nowrap !important;
    display: inline-block !important;
  }
  .queue-row.crud-log-row .log-col-time {
    grid-column: 2 !important;
    grid-row: 1 !important;
    justify-self: end !important;
    text-align: right !important;
    white-space: nowrap !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
  }
  .queue-row.crud-log-row .log-time-val {
    font-size: 9.5px !important;
    color: #64748b !important;
    font-weight: 500 !important;
  }
  .queue-row.crud-log-row .log-col-time .sub {
    font-size: 9px !important;
    color: #94a3b8 !important;
    display: inline-block !important;
  }

  /* Row 2: Summary message & details */
  .queue-row.crud-log-row .log-col-summary {
    grid-column: 1 / -1 !important;
    grid-row: 2 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 1px !important;
    min-width: 0 !important;
  }
  .queue-row.crud-log-row .log-sum-text {
    font-size: 11.5px !important;
    font-weight: 600 !important;
    color: #1e293b !important;
    line-height: 1.25 !important;
  }
  .queue-row.crud-log-row .log-det-text {
    font-size: 9.5px !important;
    color: #64748b !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  /* Row 3: Left = Category Badge + Action, Right = IP Address */
  .queue-row.crud-log-row .log-col-cat {
    grid-column: 1 !important;
    grid-row: 3 !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 5px !important;
    min-width: 0 !important;
  }
  .queue-row.crud-log-row .log-col-cat .badge {
    font-size: 9px !important;
    padding: 1px 4px !important;
    border-radius: 3px !important;
  }
  .queue-row.crud-log-row .log-action-name {
    font-size: 9.5px !important;
    color: #64748b !important;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    display: inline-block !important;
  }
  .queue-row.crud-log-row .log-col-ip {
    grid-column: 2 !important;
    grid-row: 3 !important;
    justify-self: end !important;
    text-align: right !important;
    font-size: 9px !important;
    color: #94a3b8 !important;
    white-space: nowrap !important;
  }

  /* Booking & Forms: High Density Compact Order Workflow */
  .booking-layout, .qr-studio-layout { padding-top: 1px; }
  .booking-controls-card {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 6px 8px !important;
    margin-bottom: 5px !important;
  }
  .booking-channel-segmented {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2px;
    background: #e2e8f0;
    border-radius: 6px;
    padding: 2px;
    margin-bottom: 5px;
  }
  .channel-segment-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    min-height: 28px !important;
    height: 28px !important;
    padding: 0 4px !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    color: #475569 !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 4px !important;
    box-shadow: none !important;
    white-space: nowrap !important;
    cursor: pointer;
  }
  .channel-segment-btn .icon {
    width: 12px;
    height: 12px;
    flex-shrink: 0;
  }
  .channel-segment-btn.active {
    background: #ffffff !important;
    color: #007c70 !important;
    font-weight: 700 !important;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08) !important;
  }
  .booking-section-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 3px;
  }
  .booking-section-label {
    font-size: 10px !important;
    font-weight: 700 !important;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    color: #64748b !important;
    margin: 0 !important;
  }
  .btn-quick-add-link {
    font-size: 10.5px !important;
    font-weight: 600 !important;
    color: #007c70 !important;
    background: #e6f6f3 !important;
    border: 1px solid #9bd3cb !important;
    border-radius: 4px !important;
    padding: 1px 6px !important;
    min-height: 20px !important;
    height: 20px !important;
    cursor: pointer;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
  }
  .ind-compact-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 4px 6px !important;
  }
  .ind-compact-label {
    font-size: 9.5px !important;
    font-weight: 600 !important;
    color: #475569 !important;
    margin-bottom: 1px !important;
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .compact-input {
    min-height: 28px !important;
    height: 28px !important;
    font-size: 11px !important;
    padding: 2px 6px !important;
    border-radius: 5px !important;
    border: 1px solid #cbd5e1 !important;
    background: #ffffff !important;
    width: 100%;
  }
  .walkin-compact-strip {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    background: #f0fdf9;
    border: 1px solid #99f6e4;
    border-radius: 6px;
    padding: 4px 6px;
  }
  .walkin-compact-badge {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 10.5px;
    color: #0f766e;
  }
  .searchable-input-box input#customer-combobox-input {
    min-height: 32px !important;
    height: 32px !important;
    font-size: 12px !important;
    padding: 2px 48px 2px 8px !important;
    border-radius: 6px !important;
    border: 1px solid #cbd5e1 !important;
    background: #ffffff !important;
  }
  .selected-customer-pill {
    padding: 2px 7px !important;
    min-height: 30px !important;
    border-radius: 6px !important;
    gap: 5px !important;
  }
  .cust-shop-icon {
    width: 20px !important;
    height: 20px !important;
    border-radius: 4px !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    background: #cce8e3;
    color: #007c70;
    flex-shrink: 0;
  }
  .cust-shop-icon .icon {
    width: 12px !important;
    height: 12px !important;
  }
  .selected-cust-info {
    display: flex !important;
    align-items: center !important;
    gap: 5px !important;
    min-width: 0 !important;
  }
  .selected-cust-info strong {
    font-size: 11px !important;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .selected-cust-info .small {
    font-size: 9px !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .btn-clear-customer {
    min-height: 20px !important;
    height: 20px !important;
    padding: 1px 5px !important;
    font-size: 9.5px !important;
  }
  body:has(#booking-form) .page-head {
    margin-bottom: 2px !important;
    gap: 1px !important;
  }
  body:has(#booking-form) .page-head h1 {
    font-size: 16px !important;
    margin-bottom: 0 !important;
  }
  body:has(#booking-form) .page-head p {
    font-size: 10.5px !important;
    margin: 0 !important;
  }
  .booking-catalog-toolbar {
    margin-bottom: 4px;
  }
  .booking-search-wrap {
    position: relative;
    width: 100%;
    margin-bottom: 4px;
  }
  .booking-search-wrap input#product-search {
    width: 100%;
    min-height: 32px !important;
    height: 32px !important;
    font-size: 12px !important;
    padding: 2px 28px 2px 28px !important;
    border-radius: 6px !important;
    border: 1px solid #cbd5e1 !important;
    background: #ffffff !important;
  }
  .booking-search-icon {
    position: absolute;
    left: 8px;
    top: 50%;
    transform: translateY(-50%);
    display: inline-flex;
    color: #94a3b8;
    pointer-events: none;
  }
  .booking-search-icon .icon {
    width: 13px;
    height: 13px;
  }
  .booking-cat-pills {
    display: flex;
    gap: 4px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    margin-bottom: 3px;
    padding-bottom: 1px;
  }
  .booking-cat-pills::-webkit-scrollbar {
    display: none;
  }
  .booking-cat-chip {
    flex: 0 0 auto;
    padding: 2px 8px !important;
    min-height: 23px !important;
    height: 23px !important;
    font-size: 10.5px !important;
    font-weight: 600 !important;
    border-radius: 999px !important;
    white-space: nowrap !important;
    border: 1px solid #cbd5e1 !important;
    background: #ffffff !important;
    color: #475569 !important;
  }
  .booking-cat-chip.active {
    background: var(--primary) !important;
    border-color: var(--primary) !important;
    color: #ffffff !important;
    font-weight: 700 !important;
  }
  .customer-type-selector {
    display: flex;
    overflow-x: auto;
    flex-wrap: nowrap;
    padding: 2px 0 6px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
    gap: 8px;
  }
  .customer-type-selector::-webkit-scrollbar {
    display: none;
  }
  .type-pill {
    flex: 0 0 auto !important;
    min-width: auto !important;
    font-size: 12px;
    min-height: 38px;
    padding: 6px 14px;
    border-radius: 999px;
    white-space: nowrap;
    border: 1.5px solid #cbd5e1;
    background: #ffffff;
    color: #334155;
    transition: all 0.15s ease;
  }
  .type-pill.active {
    background: #e6f6f3;
    border-color: #007c70;
    color: #007c70;
    font-weight: 700;
  }
  .booking-form .field > div:has(> #btn-toggle-quick-cust) { flex-wrap: wrap; gap: 6px; }
  .product-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 8px;
    padding: 7px 10px !important;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    margin-bottom: 6px !important;
  }
  .product-row.has-qty {
    border-color: #007c70;
    background: #f0fdf9;
  }
  .product-row > div:first-child { min-width: 0; overflow-wrap: anywhere; }
  .product-row h3 { font-size: 12.5px; font-weight: 700; margin: 0 0 1px; line-height: 1.25; }
  .stepper {
    display: flex;
    align-items: center;
    gap: 0;
    flex-shrink: 0;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    overflow: hidden;
    background: #ffffff;
  }
  .stepper button {
    width: 28px;
    min-width: 28px;
    min-height: 28px !important;
    border: 0;
    border-radius: 0;
    padding: 0;
    font-size: 15px;
    font-weight: 700;
    background: #f8fafc;
    color: #0f172a;
  }
  .stepper button.plus {
    background: var(--primary);
    color: #ffffff;
  }
  .stepper input {
    width: 32px;
    min-width: 0;
    min-height: 28px !important;
    border: 0;
    border-left: 1px solid #e2e8f0;
    border-right: 1px solid #e2e8f0;
    border-radius: 0;
    text-align: center;
    font-weight: 700;
    font-size: 12.5px !important;
    padding: 0;
  }
  .booking-page .workspace { padding-bottom: calc(var(--mobile-nav-height) + 84px) !important; }
  .order-summary {
    bottom: var(--mobile-nav-height);
    padding: 8px 14px;
    gap: 10px;
    box-shadow: 0 -4px 18px rgba(15, 23, 42, 0.08);
    border-top: 1px solid #e2e8f0;
    background: rgba(255, 255, 255, 0.98);
    backdrop-filter: blur(10px);
  }
  .order-summary > div:first-child { min-width: 0; }
  .summary-total { font-size: 19px; font-weight: 800; color: #007c70; overflow-wrap: anywhere; }
  .order-summary .primary {
    min-width: 125px;
    flex-shrink: 0;
    border-radius: 8px;
    min-height: 40px !important;
    font-size: 13.5px;
    font-weight: 700;
  }
  .storefront-mobile-tabs { display: flex; }
  .crud-panel { padding: 12px 0; }
  .crud-panel-head { gap: 8px; margin-bottom: 10px; }
  .crud-grid-2, .crud-grid-3, .crud-grid-4 { gap: 10px; }
  .qr-preview-panel { position: static; border-left: 0; padding: 14px 0; }
  .qr-preview-frame { padding: 8px; }
  #test-email-form { flex-wrap: wrap; }
  #test-email-form input { flex: 1 1 160px; min-width: 0; }
  .rep-mini-stats-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; padding: 6px 10px; }
  .rep-mini-stats-grid > div strong { font-size: 13px; }

  dialog { width: 100%; max-width: 100%; max-height: 94dvh; margin: auto 0 0; padding: 0 14px calc(16px + env(safe-area-inset-bottom, 0px)); border-radius: 20px 20px 0 0; overscroll-behavior: contain; }
  #crud-dialog, #confirm-dialog, #date-dialog { padding: 0 !important; border-bottom: 0 !important; border-left: 0 !important; border-right: 0 !important; }
  #crud-dialog .sheet-drag-handle, #confirm-dialog .sheet-drag-handle, #date-dialog .sheet-drag-handle { display: block !important; }
  .dialog-head { position: sticky; top: 0; z-index: 2; background: white; padding-block: 14px 10px; border-bottom: 1px solid var(--border); }
  .dialog-head h2 { font-size: 18px; }
  .dialog-head .close { min-width: 36px; flex-shrink: 0; }
  .detail-meta { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .detail-line { gap: 8px; align-items: flex-start; }
  .detail-line > strong { text-align: right; flex: 0 0 30%; }
  .detail-card-strip { flex-direction: column; align-items: stretch; }
  .detail-card-strip button { width: 100%; }
  .dialog-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
  .dialog-actions .primary { grid-column: 1 / -1; }
  #notice { bottom: calc(var(--mobile-nav-height) + 10px); max-width: 440px; width: calc(100% - 24px); padding: 10px 14px; font-size: 12.5px; }
  .booking-page #notice { bottom: calc(var(--mobile-nav-height) + 88px); }
  .mobile-hide-tab { display: none !important; }

  /* Storefront Mobile */
  .sf-container { padding-inline: 14px; }
  .sf-header { position: relative; }
  .sf-header-inner { gap: 10px; padding-top: calc(12px + env(safe-area-inset-top, 0px)); }
  .sf-brand-wrap { width: 100%; }
  .sf-nav-actions { display: grid; grid-template-columns: 1fr 1fr auto; gap: 5px; width: 100%; }
  .sf-tab-btn { font-size: 11.5px; padding: 6px; }
  .sf-nav-actions .sf-staff-link { padding: 6px 10px; }
  .sf-nav-actions .sf-staff-link span { display: none; }
  .sf-announcement { font-size: 11.5px; }
  .sf-main { padding-block: 14px; }
  .sf-main h1 { font-size: 22px; letter-spacing: -.5px; line-height: 1.2; }
  .sf-order-page { padding-bottom: calc(84px + env(safe-area-inset-bottom, 0px)); }
  .sf-mobile-checkout {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    position: fixed; bottom: 0; left: 0; right: 0; z-index: 35; background: white;
    padding: 8px 14px calc(8px + env(safe-area-inset-bottom, 0px));
    border-top: 1px solid var(--border); box-shadow: 0 -4px 18px #172b3a08;
  }
  .sf-mobile-checkout > div { min-width: 0; }
  .sf-mobile-checkout strong { display: block; font-size: 18px; overflow-wrap: anywhere; }
  .sf-mobile-checkout button { flex-shrink: 0; }
  #sf-customer-section { scroll-margin-top: 16px; }
  .sf-card-title, .sf-mode-switch { width: 100%; }
  .sf-mode-switch { display: flex; flex-wrap: wrap; }
  .sf-mode-switch button { flex: 1; }
  .sf-chip { min-height: 32px; }
  .sf-summary-sticky {
    position: static; padding: 14px; margin-top: 16px; border: 1px solid var(--border-strong);
    border-radius: 10px; background: var(--primary-soft);
  }
  .sf-track-bar { flex-direction: column; }
  .sf-track-card, .sf-closed-card, .sf-receipt { padding: 14px; }
  .sf-footer { padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px)); }
  .sf-footer-inner { align-items: flex-start; }
  .storefront-body #notice { bottom: calc(16px + env(safe-area-inset-bottom, 0px)); }
  .sf-order-page #notice { bottom: calc(92px + env(safe-area-inset-bottom, 0px)); }
  body.login-page { padding: calc(16px + env(safe-area-inset-top, 0px)) 14px calc(16px + env(safe-area-inset-bottom, 0px)); }
  .login-card { padding: 22px 18px; border-radius: 14px; }
  .demo-quick-chips { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .demo-chip { min-width: 0; flex-wrap: wrap; padding: 7px 8px; text-align: left; }
}

@media (max-width: 360px) {
  .product-row { grid-template-columns: 1fr; gap: 6px; }
  .product-row .stepper { justify-self: end; }
  .metric strong, .metric.warning strong, .metric.critical strong { font-size: 15px; }
  .order-summary { padding-inline: 10px; }
  .order-summary .primary { min-width: 105px; }
  .summary-total { font-size: 18px; }
  .demo-quick-chips { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation: none !important; transition: none !important; }
}