/* ============================================================================
 * Melbourne Wholesale - Design System (system.css)
 *
 * Palette (vibrant): `--brand-primary` aligns interactive brand with chrome (#0c6472).
 * `--chrome-*` is a deeper, saturated sibling hue for buttons, prices, and focus
 * so the UI feels confident (not washed). Page chrome uses a cool-tinted canvas.
 *
 * Loads AFTER app.css so its rules override legacy declarations. The goal is a
 * unified, professional B2B look:
 *   - one strong teal accent for actions (brand primary matches chrome)
 *   - cool-tinted surfaces, defined borders, depth from shadow + subtle inset on CTAs
 *   - consistent 4px spacing scale and 7-step type scale
 *   - WCAG-style focus rings on every interactive element
 *   - responsive behavior through xs / sm / md / lg / xl breakpoints
 *
 * Light theme only (`html.light` / `:root.light`). Dark mode CSS removed.
 *
 * Preserves every existing class name. Page modules need no edits.
 * ============================================================================ */

/* ---- 1. Design tokens (light theme is default) ------------------------------ */
:root.light {
  /* ── Document / brand primary (aligned with chrome teal) ─ */
  --brand-primary: #0c6472;
  --brand-primary-light: #e0f2f4;
  --brand-primary-hover: #4a98a5;
  --brand-primary-active: #3d878f;
  --brand-dark: #1e2a2e;
  --brand-light: #e8f2f4;
  --brand-border: #b5cad0;
  --brand-text: #0f171a;

  /* ── UI chrome (deeper logo-adjacent teal - stronger than document #5faebb) ─ */
  --chrome-primary: #0c6472;
  --chrome-hover: #0a5561;
  --chrome-active: #084652;
  --chrome-fill-04: rgba(12, 100, 114, 0.07);
  --chrome-fill-06: rgba(12, 100, 114, 0.1);
  --chrome-fill-08: rgba(12, 100, 114, 0.13);
  --chrome-fill-10: rgba(12, 100, 114, 0.16);
  --chrome-border-22: rgba(12, 100, 114, 0.28);
  --chrome-border-28: rgba(12, 100, 114, 0.34);
  --chrome-border-30: rgba(12, 100, 114, 0.38);
  --chrome-shadow-30: rgba(12, 100, 114, 0.32);
  --chrome-shadow-40: rgba(12, 100, 114, 0.42);
  --chrome-focus-ring: rgba(12, 100, 114, 0.22);

  /* ── Neutrals (mapped to brand where appropriate) ───── */
  --bg: var(--brand-light);
  --bg2: #ffffff;
  --bg3: #d8e8ec;
  --bg4: #c5d9df;
  --surface: #ffffff;
  --surface-muted: var(--brand-light);
  --card: #ffffff;
  --border: var(--brand-border);
  --border2: #9db4bc;
  --divider: #d4e3e7;
  --text: var(--brand-text);
  --text2: #2a3d44;
  --text3: #4a6670;
  --text-inverse: #ffffff;

  /* ── Brand / accent (primary actions → chrome, not document teal) ─────── */
  --brand: var(--chrome-primary);
  --brand-hover: var(--chrome-hover);
  --brand-active: var(--chrome-active);
  --accent: var(--chrome-primary);
  --accent2: var(--chrome-hover);
  --accent-soft: rgba(12, 100, 114, 0.14);
  --accent-glow: rgba(12, 100, 114, 0.26);
  --ring: rgba(12, 100, 114, 0.45);
  --brand-contrast: #ffffff;

  /* ── Status colors (text on tinted background) ───────── */
  --green: #067647;
  --green-bg: #ecfdf3;
  --green-border: #abefc6;
  --red: #b42318;
  --red-bg: #fef3f2;
  --red-border: #fecdca;
  --amber: #b54708;
  --amber-bg: #fffaeb;
  --amber-border: #fedf89;
  --blue: #175cd3;
  --blue-bg: #eff4ff;
  --blue-border: #b2ccff;
  --purple: #5925dc;
  --purple-bg: #f4f3ff;
  --purple-border: #d9d6fe;
  --orange: #c4320a;
  --orange-bg: #fff4ed;
  --orange-border: #f9dbaf;

  /* ── Section pill colors (wayfinding, kept tasteful) ──── */
  --color-catalog: #5925dc;
  --color-catalog-bg: #f4f3ff;
  --color-catalog-border: #d9d6fe;
  --color-customers: #175cd3;
  --color-customers-bg: #eff4ff;
  --color-customers-border: #b2ccff;
  --color-incoming: #067647;
  --color-incoming-bg: #ecfdf3;
  --color-incoming-border: #abefc6;
  --color-outgoing: #c4320a;
  --color-outgoing-bg: #fff4ed;
  --color-outgoing-border: #f9dbaf;
  --color-finance: var(--chrome-primary);
  --color-finance-bg: rgba(12, 100, 114, 0.14);
  --color-finance-border: rgba(12, 100, 114, 0.4);

  /* ── Sidebar (light, aligned with brand) ─────────────── */
  --sidebar-bg: #ffffff;
  --sidebar-surface: var(--brand-light);
  --sidebar-border: var(--brand-border);
  --sidebar-text: var(--brand-dark);
  --sidebar-text-muted: #4a6670;
  --sidebar-active-bg: rgba(12, 100, 114, 0.1);
  --sidebar-hover-bg: #dcecf0;

  /* ── Type scale (rem on a 16px base) ─────────────────── */
  --fs-2xs: 0.6875rem;   /* 11 */
  --fs-xs:  0.75rem;     /* 12 */
  --fs-sm:  0.8125rem;   /* 13 */
  --fs-base: 0.875rem;   /* 14 */
  --fs-md:  0.9375rem;   /* 15 */
  --fs-lg:  1rem;        /* 16 */
  --fs-xl:  1.125rem;    /* 18 */
  --fs-2xl: 1.25rem;     /* 20 */
  --fs-3xl: 1.5rem;      /* 24 */
  --fs-4xl: 1.875rem;    /* 30 */

  /* ── Spacing scale (4px base) ─────────────────────────── */
  --sp-1: 0.25rem;   /*  4 */
  --sp-2: 0.5rem;    /*  8 */
  --sp-3: 0.75rem;   /* 12 */
  --sp-4: 1rem;      /* 16 */
  --sp-5: 1.25rem;   /* 20 */
  --sp-6: 1.5rem;    /* 24 */
  --sp-7: 2rem;      /* 32 */
  --sp-8: 2.5rem;    /* 40 */
  --sp-9: 3rem;      /* 48 */

  /* ── Radii ────────────────────────────────────────────── */
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius: 8px;
  --radius-md: 10px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-pill: 999px;

  /* ── Elevation ────────────────────────────────────────── */
  --shadow-xs: 0 1px 2px rgba(8, 28, 34, 0.07);
  --shadow-sm: 0 1px 2px rgba(8, 28, 34, 0.06), 0 4px 12px rgba(12, 100, 114, 0.1);
  --shadow: 0 2px 4px rgba(8, 28, 34, 0.06), 0 4px 14px rgba(12, 100, 114, 0.09);
  --shadow-md: 0 6px 12px -2px rgba(8, 28, 34, 0.08), 0 4px 8px rgba(12, 100, 114, 0.08);
  --shadow-lg: 0 14px 20px -4px rgba(8, 28, 34, 0.1), 0 8px 12px rgba(12, 100, 114, 0.08);
  --shadow-xl: 0 22px 28px -6px rgba(8, 28, 34, 0.12), 0 12px 16px rgba(12, 100, 114, 0.09);

  /* ── Control metrics ─────────────────────────────────── */
  --ctrl-h: 38px;
  --ctrl-h-sm: 32px;
  --ctrl-h-lg: 44px;
  --sidebar: 248px;
  --topbar-h: 56px;
  --mobile-bar-h: 56px;

  /* ── Motion ──────────────────────────────────────────── */
  --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast: 120ms;
  --dur: 180ms;
  --dur-slow: 280ms;
}

/* ---- 2. Base ---------------------------------------------------------------- */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-size: var(--fs-base);
  line-height: 1.5;
}
h1, h2, h3, h4, h5, h6 { font-weight: 600; letter-spacing: -0.01em; color: var(--text); }

a {
  color: var(--brand);
  text-decoration: none;
}
a:hover {
  color: var(--brand-hover);
  text-decoration: underline;
}

/* Focus ring - global, accessible, hides on mouse via :focus-visible */
:focus { outline: none; }
:focus-visible {
  outline: 2px solid var(--ring);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}
.nav-item:focus-visible,
.btn:focus-visible,
.demo-tab:focus-visible,
.tab:focus-visible,
.pricing-tab:focus-visible {
  outline: 2px solid var(--ring);
  outline-offset: 2px;
}

/* Selection */
::selection { background: var(--accent-glow); color: var(--text); }

/* Scrollbars (slightly thicker for usability; still subtle) */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: var(--border2);
  border-radius: var(--radius-pill);
  border: 2px solid var(--bg);
}
::-webkit-scrollbar-thumb:hover { background: var(--text3); }
* { scrollbar-color: var(--border2) transparent; scrollbar-width: thin; }

/* ---- 3. Buttons ------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  min-height: var(--ctrl-h);
  padding: 0 var(--sp-4);
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  font-family: inherit;
  font-size: var(--fs-base);
  font-weight: 500;
  /* 1.2 (not 1) so descenders like the "y" in "Confirm delivery" aren't clipped.
     Buttons size by min-height + centering, so this changes no button height. */
  line-height: 1.2;
  cursor: pointer;
  white-space: nowrap;
  box-shadow: none;
  transition: background-color var(--dur) var(--ease-out),
              border-color var(--dur) var(--ease-out),
              color var(--dur) var(--ease-out);
}
.btn:hover { box-shadow: none; transform: none; }
.btn:active { transform: none; }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }

.btn-primary,
.btn-catalog,
.btn-incoming,
.btn-outgoing,
.btn-customers {
  background: var(--brand);
  color: var(--brand-contrast);
  border-color: var(--brand);
  font-weight: 600;
  box-shadow: var(--shadow-sm), 0 1px 0 rgba(255, 255, 255, 0.12) inset;
}
.btn-primary:hover,
.btn-catalog:hover,
.btn-incoming:hover,
.btn-outgoing:hover,
.btn-customers:hover {
  background: var(--brand-hover);
  border-color: var(--brand-hover);
  color: var(--brand-contrast);
  box-shadow: var(--shadow-md), 0 1px 0 rgba(255, 255, 255, 0.1) inset;
  transform: none;
}
.btn-primary:active,
.btn-catalog:active,
.btn-incoming:active,
.btn-outgoing:active,
.btn-customers:active {
  background: var(--brand-active);
  border-color: var(--brand-active);
}

.btn-secondary {
  background: var(--surface);
  color: var(--chrome-primary);
  border: 1px solid var(--chrome-border-28);
  font-weight: 500;
  box-shadow: var(--shadow-xs);
}
.btn-secondary:hover {
  background: var(--accent-soft);
  border-color: var(--chrome-primary);
  color: var(--chrome-hover);
}

.btn-ghost {
  background: transparent;
  color: var(--text2);
  border-color: transparent;
  box-shadow: none;
}
.btn-ghost:hover {
  background: var(--bg3);
  color: var(--text);
}

.btn-danger {
  background: var(--surface);
  color: var(--red);
  border: 1px solid var(--red-border);
}
.btn-danger:hover {
  background: var(--red-bg);
  border-color: var(--red);
  color: var(--red);
}

.btn-success {
  background: var(--surface);
  color: var(--green);
  border: 1px solid var(--green-border);
}
.btn-success:hover {
  background: var(--green-bg);
  border-color: var(--green);
  color: var(--green);
}

.btn-full { width: 100%; }
.btn-sm { min-height: var(--ctrl-h-sm); padding: 0 var(--sp-3); font-size: var(--fs-sm); }
.btn-lg { min-height: var(--ctrl-h-lg); padding: 0 var(--sp-5); font-size: var(--fs-md); }

/* ---- 4. Forms --------------------------------------------------------------- */
/* .search-input is for search bars / toolbars (.search-bar). Standard forms - including customer self-service account and license pages - use .field input/select/textarea. */
.field { margin-bottom: var(--sp-4); }
.field label {
  display: block;
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--text2);
  margin-bottom: var(--sp-2);
  text-transform: none;
  letter-spacing: normal;
}
.field input,
.field select,
.field textarea,
.search-input,
.filter-select {
  width: 100%;
  min-height: var(--ctrl-h);
  padding: 0 var(--sp-3);
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--border2);
  border-radius: var(--radius-sm);
  font-family: inherit;
  font-size: var(--fs-base);
  transition: border-color var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-fast) var(--ease-out);
}
.field textarea { min-height: calc(var(--ctrl-h) * 2.25); padding: var(--sp-3); line-height: 1.5; }
.field input::placeholder,
.field textarea::placeholder,
.search-input::placeholder { color: var(--text3); }
.field input:hover,
.field select:hover,
.field textarea:hover,
.search-input:hover,
.filter-select:hover { border-color: var(--text3); }
.field input:focus,
.field select:focus,
.field textarea:focus,
.search-input:focus,
.filter-select:focus {
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 3px var(--accent-glow);
}
.field input:disabled,
.field select:disabled,
.field textarea:disabled { background: var(--bg3); color: var(--text3); cursor: not-allowed; }

.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3); }

/* ---- 5. Sidebar ------------------------------------------------------------- */
.sidebar {
  background: var(--sidebar-bg) !important;
  border-right: 1px solid var(--sidebar-border);
  width: var(--sidebar);
  box-shadow: none;
}
.sidebar-brand {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--sp-2);
  padding: var(--sp-4) var(--sp-5);
  border-bottom: 1px solid var(--sidebar-border);
}
.sidebar-brand .logo { color: var(--brand-dark); font-weight: 700; letter-spacing: -0.01em; }
.sidebar-user {
  padding: var(--sp-3) var(--sp-5);
  border-bottom: 1px solid var(--sidebar-border);
}
.sidebar-user .user-name { color: var(--brand-dark); font-size: var(--fs-base); font-weight: 600; }
.sidebar-user .user-email { color: var(--sidebar-text-muted); font-size: var(--fs-xs); }

.sidebar-nav { padding: var(--sp-3) 0; }
.nav-section {
  padding: var(--sp-4) var(--sp-5) var(--sp-1);
  font-size: var(--fs-2xs);
  font-weight: 600;
  color: var(--sidebar-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.nav-section[data-section='catalog'],
.nav-section[data-section='customers'],
.nav-section[data-section='incoming'],
.nav-section[data-section='outgoing'],
.nav-section[data-section='finance'],
.nav-section[data-section='settings'],
.nav-section[data-section='overview'] {
  color: var(--sidebar-text-muted);
}
.nav-item {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-5);
  margin: 1px var(--sp-2);
  color: var(--sidebar-text);
  font-size: var(--fs-base);
  font-weight: 500;
  border-left: none;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
  background: transparent;
}
.nav-item .icon {
  font-size: var(--fs-lg);
  width: 1.25rem;
  text-align: center;
  color: var(--brand);
  opacity: 0.88;
  transition: color var(--dur-fast) var(--ease-out), opacity var(--dur-fast) var(--ease-out);
}
.nav-item .icon:empty { display: none; }
.nav-item:hover { background: var(--sidebar-hover-bg); color: var(--brand-dark); }
.nav-item:hover .icon {
  color: var(--brand-hover);
  opacity: 1;
}
.nav-item.active,
.nav-item.active[data-section='catalog'],
.nav-item.active[data-section='customers'],
.nav-item.active[data-section='incoming'],
.nav-item.active[data-section='outgoing'],
.nav-item.active[data-section='finance'],
.nav-item.active[data-section='settings'],
.nav-item.active[data-section='overview'] {
  background: var(--sidebar-active-bg);
  color: var(--brand-dark);
  border-left: none;
}
.nav-item.active .icon {
  color: var(--brand);
  opacity: 1;
}
.nav-item.active::before {
  content: '';
  position: absolute;
  left: 0;
  top: 8px;
  bottom: 8px;
  width: 3px;
  border-radius: 0 var(--radius-xs) var(--radius-xs) 0;
  background: var(--brand);
}
.nav-item .badge {
  margin-left: auto;
  background: var(--red);
  color: #fff;
  font-size: var(--fs-2xs);
  font-weight: 600;
  padding: 2px var(--sp-2);
  border-radius: var(--radius-pill);
}
.sidebar-footer {
  padding: var(--sp-3) var(--sp-4);
  border-top: 1px solid var(--sidebar-border);
  background: var(--sidebar-bg) !important;
}
.sidebar-footer .btn-ghost { color: var(--sidebar-text); }
.sidebar-footer .btn-ghost:hover { color: var(--brand-dark); background: var(--sidebar-hover-bg); }
.role-badge {
  font-size: var(--fs-2xs);
  font-weight: 600;
  padding: 2px var(--sp-2);
  border-radius: var(--radius-pill);
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.role-ADMIN { background: rgba(12, 100, 114, 0.2); color: var(--chrome-active); }
.role-WAREHOUSE { background: rgba(63, 202, 140, 0.18); color: #166534; }
.role-CUSTOMER { background: rgba(251, 191, 36, 0.22); color: #92400e; }

/* ---- 6. Topbar + main content ---------------------------------------------- */
.topbar {
  background: #ffffff;
  border-bottom: 1px solid var(--brand-border);
  min-height: var(--topbar-h);
  padding: 0 var(--sp-6);
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  box-shadow: var(--shadow-xs);
}
.topbar-title {
  font-size: var(--fs-lg);
  font-weight: 600;
  color: var(--brand-dark);
  letter-spacing: -0.01em;
  gap: var(--sp-3);
}
.topbar-section-pill {
  font-size: var(--fs-2xs);
  font-weight: 600;
  letter-spacing: 0.08em;
  padding: 2px var(--sp-2);
  border-radius: var(--radius-pill);
  border: 1px solid var(--border);
  color: var(--text2);
  background: var(--bg3);
}
.topbar-section-pill--catalog { color: var(--color-catalog); background: var(--color-catalog-bg); border-color: var(--color-catalog-border); }
.topbar-section-pill--customers { color: var(--color-customers); background: var(--color-customers-bg); border-color: var(--color-customers-border); }
.topbar-section-pill--incoming { color: var(--color-incoming); background: var(--color-incoming-bg); border-color: var(--color-incoming-border); }
.topbar-section-pill--outgoing { color: var(--color-outgoing); background: var(--color-outgoing-bg); border-color: var(--color-outgoing-border); }
.topbar-section-pill--finance,
.topbar-section-pill--overview { color: var(--color-finance); background: var(--color-finance-bg); border-color: var(--color-finance-border); }
.topbar-section-pill--settings { color: var(--text2); background: var(--bg3); border-color: var(--border); }

/* Topbar (mobile / tablet): keep brand lockup from crowding page title */
.topbar .mw-logo-host {
  min-width: 0;
  flex-shrink: 1;
  max-width: min(46vw, 210px);
}
@media (min-width: 520px) and (max-width: 1023.98px) {
  .topbar .mw-logo-host {
    max-width: min(50vw, 240px);
  }
}
.mw-logo-host--topbar .mw-logo-lockup__name {
  font-size: var(--fs-xs);
  color: var(--brand-dark);
}

/* In dark mode, quiet all section pills to a neutral chip - less noise. */

.content { padding: var(--sp-6); }

/* ---- 7. Cards + stat cards -------------------------------------------------- */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-xs);
  padding: var(--sp-5);
  margin-bottom: var(--sp-5);
  transition: border-color var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out);
}
.card:hover { box-shadow: var(--shadow-sm); }

.card-header { margin-bottom: var(--sp-4); }
.card-title { font-size: var(--fs-lg); font-weight: 600; }
.card-header-catalog,
.card-header-customers,
.card-header-incoming,
.card-header-outgoing,
.card-header-finance { border-left-width: 3px; padding-left: var(--sp-3); }

.stats-grid { gap: var(--sp-4); margin-bottom: var(--sp-6); }
.stat-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-top-width: 3px;
  border-radius: var(--radius-md);
  padding: var(--sp-5);
  box-shadow: var(--shadow-xs);
  transition: border-color var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out);
}
.stat-card:hover { box-shadow: var(--shadow-sm); transform: none; }
.stat-label {
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--text3);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: var(--sp-2);
}
.stat-value { font-size: var(--fs-3xl); font-weight: 700; letter-spacing: -0.02em; line-height: 1.1; }
.stat-sub { font-size: var(--fs-xs); color: var(--text3); margin-top: var(--sp-1); }
.stat-card--click { cursor: pointer; }
.stat-card--click:hover { border-color: var(--brand); background: var(--accent-soft); }

/* ---- 8. Tables -------------------------------------------------------------- */
.table-wrap {
  overflow-x: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface);
}
.card .table-wrap { border: none; border-radius: 0; }
table { font-size: var(--fs-sm); }
th {
  font-size: var(--fs-2xs);
  font-weight: 600;
  color: var(--text3);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  background: var(--brand-light);
  padding: var(--sp-3) var(--sp-4);
  border-bottom: 1px solid var(--brand-border);
  text-align: left;
}
td {
  padding: var(--sp-3) var(--sp-4);
  border-bottom: 1px solid var(--divider);
  color: var(--text);
  font-size: var(--fs-sm);
}

tbody tr:nth-child(even) td { background: transparent; }
tr:hover td { background: var(--bg3); }

tr:last-child td { border-bottom: none; }

/* ---- 9. Status badges -------------------------------------------------------- */
.status {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  font-size: var(--fs-2xs);
  font-weight: 600;
  padding: 2px var(--sp-2);
  border-radius: var(--radius-pill);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border: 1px solid transparent;
}
.status::before { width: 6px; height: 6px; border-radius: 50%; background: currentColor; content: ''; }
.s-PENDING { background: var(--amber-bg); color: var(--amber); border-color: var(--amber-border); }
.s-CONFIRMED { background: var(--blue-bg); color: var(--blue); border-color: var(--blue-border); }
.s-PACKED { background: var(--purple-bg); color: var(--purple); border-color: var(--purple-border); }
.s-OUT_FOR_DELIVERY { background: var(--orange-bg); color: var(--orange); border-color: var(--orange-border); }
.s-DELIVERED { background: var(--green-bg); color: var(--green); border-color: var(--green-border); }
.s-CANCELLED { background: var(--red-bg); color: var(--red); border-color: var(--red-border); }

/* Order / warehouse statuses not in the base set above */
.status.s-PLACED { background: var(--amber-bg); color: var(--amber); border-color: var(--amber-border); }
.status.s-READY { background: var(--blue-bg); color: var(--blue); border-color: var(--blue-border); }

/* Nav count pill (sidebar) - distinct from semantic payment badges below */
.badge { background: var(--red); color: #fff; font-size: var(--fs-2xs); font-weight: 600; padding: 2px var(--sp-2); border-radius: var(--radius-pill); }

/* Payment / review semantic badges (PaymentReviewQueue, admin tables) */
.badge-warn,
.badge.badge-warn {
  display: inline-flex;
  align-items: center;
  font-size: var(--fs-2xs);
  font-weight: 600;
  padding: 2px var(--sp-2);
  border-radius: var(--radius-pill);
  background: var(--amber-bg);
  color: var(--amber);
  border: 1px solid var(--amber-border);
}
.badge-ok,
.badge.badge-ok {
  display: inline-flex;
  align-items: center;
  font-size: var(--fs-2xs);
  font-weight: 600;
  padding: 2px var(--sp-2);
  border-radius: var(--radius-pill);
  background: var(--green-bg);
  color: var(--green);
  border: 1px solid var(--green-border);
}
.badge-danger,
.badge.badge-danger {
  display: inline-flex;
  align-items: center;
  font-size: var(--fs-2xs);
  font-weight: 600;
  padding: 2px var(--sp-2);
  border-radius: var(--radius-pill);
  background: var(--red-bg);
  color: var(--red);
  border: 1px solid var(--red-border);
}
.badge-muted,
.badge.badge-muted {
  display: inline-flex;
  align-items: center;
  font-size: var(--fs-2xs);
  font-weight: 600;
  padding: 2px var(--sp-2);
  border-radius: var(--radius-pill);
  background: var(--bg3);
  color: var(--text3);
  border: 1px solid var(--border);
}

/* ---- 10. Alerts -------------------------------------------------------------- */
.alert {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--radius-sm);
  font-size: var(--fs-base);
  border: 1px solid transparent;
  margin-bottom: var(--sp-4);
}
.alert-warn { background: var(--amber-bg); color: var(--amber); border-color: var(--amber-border); }
.alert-info { background: var(--blue-bg); color: var(--blue); border-color: var(--blue-border); }
.unpaid-alert { background: var(--red-bg); color: var(--red); border-color: var(--red-border); }

/* ---- 11. Tabs (segmented controls) ------------------------------------------ */
.tabs, .demo-tabs, .pricing-tabs {
  background: var(--bg3);
  border-radius: var(--radius-sm);
  padding: 3px;
  border: 1px solid var(--border);
  gap: 2px;
}
.tab, .demo-tab, .pricing-tab {
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--radius-xs);
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--text2);
  transition: background-color var(--dur-fast), color var(--dur-fast), box-shadow var(--dur-fast);
}
.tab.active, .demo-tab.active, .pricing-tab.on {
  background: var(--surface);
  color: var(--text);
  box-shadow: var(--shadow-xs);
}

/* ---- 12. Product cards ------------------------------------------------------
 * Neutral, flat surface - category is conveyed by the text pill, not by a
 * rainbow stripe on every card. Overrides the per-category border-top-color
 * and per-category hover-glow rules in app.css.
 * --------------------------------------------------------------------------- */
.product-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-top: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--sp-5);
  box-shadow: var(--shadow-xs);
  transition: border-color var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out);
  display: flex;
  flex-direction: column;
  align-items: stretch;
  min-height: 0;
}

/* Browse & Order / guest catalog: fixed image band + footer pinned to bottom */
.product-card-media {
  flex-shrink: 0;
  height: 128px;
  border-radius: var(--radius-sm);
  margin: 0 0 var(--sp-3);
  background: linear-gradient(165deg, rgba(12, 100, 114, 0.08) 0%, var(--bg2) 50%, var(--bg3) 100%);
  border: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}
.product-card-media--zoomable {
  cursor: zoom-in;
  transition: box-shadow var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.product-card-media--zoomable:hover {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px rgba(12, 100, 114, 0.12);
}
.product-card-media--zoomable:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.product-card-media.is-missing .product-card-img {
  display: none !important;
}
.product-card-img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  object-position: center;
  padding: 6px;
  box-sizing: border-box;
  vertical-align: middle;
}
.product-card-media-ph {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--dur-fast) var(--ease-out);
}
.product-card-media.is-missing .product-card-media-ph {
  opacity: 1;
}
.product-card-media-ph-text {
  font-size: var(--fs-2xs);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text3);
  user-select: none;
}
.product-card-body {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.product-card-footer {
  margin-top: auto;
  padding-top: var(--sp-1);
}

/* Admin product form - image URL preview */
.admin-product-img-preview-wrap {
  margin-top: var(--sp-2);
  min-height: 4.25rem;
}
.admin-product-img-preview {
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--bg2);
  padding: var(--sp-2);
  font-size: var(--fs-2xs);
  color: var(--text3);
  min-height: 3.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  line-height: 1.35;
}
.admin-product-img-preview--ok {
  padding: var(--sp-2);
}
.admin-product-img-preview-img {
  max-width: 100%;
  max-height: 100px;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
  margin: 0 auto;
}
.admin-product-img-preview--bad {
  color: var(--red);
  border-color: var(--red-border, rgba(220, 38, 38, 0.35));
}

/* Admin product modals - shared image picker (ProductImagePicker.js) */
.mw-product-image-picker {
  font-size: var(--fs-sm, 0.88rem);
}
.mw-product-image-picker__row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3, 1rem);
  align-items: flex-start;
}
.mw-product-image-picker__stage-wrap {
  position: relative;
  flex-shrink: 0;
}
.mw-product-image-picker--lg .mw-product-image-picker__stage {
  width: 280px;
  height: 280px;
}

/* Admin edit product modal - responsive 2-column layout */
.modal.mw-admin-edit-product-modal {
  max-width: min(960px, calc(100vw - 2rem));
}
.admin-product-edit-layout {
  display: grid;
  grid-template-columns: 280px minmax(0, 1fr);
  gap: 1rem;
  align-items: start;
}
.admin-product-edit-layout__media,
.admin-product-edit-layout__fields {
  min-width: 0;
}
@media (max-width: 720px) {
  .admin-product-edit-layout {
    grid-template-columns: 1fr;
  }
}

.mw-product-image-picker__stage {
  width: 200px;
  height: 200px;
  border-radius: var(--radius-sm, 8px);
  border: 2px dashed var(--border);
  background: var(--bg2);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
  overflow: hidden;
  box-sizing: border-box;
}
.mw-product-image-picker__stage--has {
  border-style: solid;
  padding: 0;
}
.mw-product-image-picker__stage--drag {
  border-color: var(--accent, #3b82f6);
  background: var(--bg3);
}
.mw-product-image-picker__stage:focus-visible {
  outline: 2px solid var(--accent, #3b82f6);
  outline-offset: 2px;
}
.mw-product-image-picker__placeholder {
  color: var(--text3);
  font-size: var(--fs-sm, 0.88rem);
  text-align: center;
  padding: var(--sp-2);
}
.mw-product-image-picker__img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  background: var(--bg2);
}
.mw-product-image-picker__file {
  position: absolute;
  width: 0;
  height: 0;
  opacity: 0;
  pointer-events: none;
}
.mw-product-image-picker__side {
  flex: 1;
  min-width: 12rem;
}
.mw-product-image-picker__hint {
  margin: 0 0 var(--sp-2);
  color: var(--text3);
  font-size: var(--fs-2xs, 0.8rem);
  line-height: 1.4;
}
.mw-product-image-picker__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin-bottom: var(--sp-2);
}
.mw-product-image-picker__error {
  min-height: 1.25rem;
  font-size: var(--fs-2xs, 0.8rem);
  color: var(--red);
  line-height: 1.35;
}

/* Admin customer license upload (LicenseFilePicker.js) */
.mw-license-file-picker {
  font-size: var(--fs-sm, 0.88rem);
}
.mw-license-file-picker__row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3, 1rem);
  align-items: flex-start;
}
.mw-license-file-picker__stage-wrap {
  position: relative;
  flex-shrink: 0;
}
.mw-license-file-picker__stage {
  width: 160px;
  height: 160px;
  border-radius: var(--radius-sm, 8px);
  border: 2px dashed var(--border);
  background: var(--bg2);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
  overflow: hidden;
  box-sizing: border-box;
}
.mw-license-file-picker__stage--has {
  border-style: solid;
  padding: 0;
}
.mw-license-file-picker__stage--drag {
  border-color: var(--accent, #3b82f6);
  background: var(--bg3);
}
.mw-license-file-picker__stage:focus-visible {
  outline: 2px solid var(--accent, #3b82f6);
  outline-offset: 2px;
}
.mw-license-file-picker__placeholder {
  color: var(--text3);
  font-size: var(--fs-sm, 0.88rem);
  text-align: center;
  padding: var(--sp-2);
}
.mw-license-file-picker__img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  background: var(--bg2);
}
.mw-license-file-picker__pdf {
  text-align: center;
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--text2);
  padding: 0.5rem;
  line-height: 1.35;
}
.mw-license-file-picker__pdf-name {
  display: block;
  font-weight: 500;
  font-size: 0.68rem;
  color: var(--text3);
  word-break: break-all;
  margin-top: 0.35rem;
}
.mw-license-file-picker__file {
  position: absolute;
  width: 0;
  height: 0;
  opacity: 0;
  pointer-events: none;
}
.mw-license-file-picker__side {
  flex: 1;
  min-width: 10rem;
}
.mw-license-file-picker__hint {
  margin: 0 0 var(--sp-2);
  color: var(--text3);
  font-size: var(--fs-2xs, 0.8rem);
  line-height: 1.4;
}
.mw-license-file-picker__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin-bottom: var(--sp-2);
}
.mw-license-file-picker__error {
  min-height: 1.25rem;
  font-size: var(--fs-2xs, 0.8rem);
  color: var(--red);
  line-height: 1.35;
}

.modal.modal-lg.mw-modal-admin-customer {
  max-height: calc(100vh - 2rem);
  overflow-y: auto;
}

.product-card:hover { transform: none; box-shadow: var(--shadow-sm); border-color: var(--border2); }

/* Kill the per-category colored top borders - one visual language across cards. */
.product-card[data-category='vapes'],
.product-card[data-category='cigarettes'],
.product-card[data-category='cigarillos'],
.product-card[data-category='drinks'],
.product-card[data-category='water'],
.product-card[data-category='medicine'],
.product-card[data-category='bathroom'],
.product-card[data-category='snacks'],
.product-card[data-category='other'] {
  border-top: 1px solid var(--border);
  border-top-color: var(--border);
}

/* Unify hover shadow - no per-category colored glow. */
.product-card[data-category='vapes']:hover,
.product-card[data-category='cigarettes']:hover,
.product-card[data-category='cigarillos']:hover,
.product-card[data-category='drinks']:hover,
.product-card[data-category='water']:hover,
.product-card[data-category='medicine']:hover,
.product-card[data-category='bathroom']:hover,
.product-card[data-category='snacks']:hover,
.product-card[data-category='other']:hover {
  box-shadow: var(--shadow-sm);
  border-color: var(--border2);
}

.product-card.selected {
  box-shadow: 0 0 0 2px var(--brand), var(--shadow-xs);
  background: var(--accent-soft);
}

/* Shop/catalog: match legacy app.css type scale on product cards */
.product-card .product-name {
  font-size: 0.95rem;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: normal;
}
.product-card .product-brand { font-size: 0.8rem; }
.product-card .product-price {
  color: var(--brand);
  font-size: 1.12rem;
  font-weight: 700;
  letter-spacing: -0.02em;
}
.product-card .product-case { font-size: 0.75rem; }

.product-price { color: var(--brand); font-size: var(--fs-lg); font-weight: 700; }
.product-cat { font-size: var(--fs-2xs); letter-spacing: 0.08em; }
.in-stock { background: var(--green-bg); color: var(--green); }
.low-stock { background: var(--amber-bg); color: var(--amber); }
.out-stock { background: var(--red-bg); color: var(--red); }

/* ═══ Amazon/Walmart-style catalog polish (Browse & Order) ════════════════════
   Additive refinements scoped to .products-grid. Cosmetic rules are global;
   layout-affecting rules (grid columns, card padding, image height) live in the
   desktop media query below so app.css's mobile/tablet horizontal card layout
   (≤767.98px) is left untouched. */

/* --- Cosmetic (safe at all widths) --- */
.products-grid .product-card {
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: none;
}
.products-grid .product-card:hover {
  box-shadow: 0 6px 20px rgba(15, 23, 42, 0.1);
  border-color: var(--border2);
}
/* Product floats on clean white, like Amazon/Walmart */
.products-grid .product-card .product-card-media {
  background: #ffffff;
  border: 1px solid var(--border);
  border-radius: 10px;
}
.products-grid .product-card .product-cat {
  font-size: 0.66rem;
  font-weight: 700;
  color: var(--text3);
  letter-spacing: 0.07em;
  margin-bottom: 0.3rem;
}
/* Title clamped to 2 lines */
.products-grid .product-card .product-name {
  font-size: 0.9rem;
  font-weight: 600;
  line-height: 1.32;
  margin-bottom: 0.15rem;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.products-grid .product-card .product-brand {
  font-size: 0.76rem;
  margin-bottom: 0.5rem;
}
/* Price is the visual anchor - bold, high-contrast */
.products-grid .product-card .product-price {
  font-size: 1.28rem;
  font-weight: 800;
  color: var(--text);
  letter-spacing: -0.02em;
}
.products-grid .product-card .product-price span {
  font-weight: 500;
}
.products-grid .product-card .product-case {
  font-size: 0.74rem;
  color: var(--text3);
  margin-top: 0.1rem;
}
/* Add to Cart is the hero button */
.products-grid .product-card .product-card-footer .btn-primary {
  font-weight: 700;
  border-radius: 8px;
}

/* --- Desktop layout (≥768px): roomy grid + tall white image band --- */
@media (min-width: 768px) {
  .products-grid {
    grid-template-columns: repeat(auto-fill, minmax(212px, 1fr));
    gap: 1.1rem;
  }
  .products-grid .product-card {
    padding: 0.9rem;
  }
  .products-grid .product-card .product-card-media {
    height: 168px;
    margin-bottom: 0.7rem;
  }
  /* Reserve two title lines so cards align on the grid */
  .products-grid .product-card .product-name {
    min-height: 2.37em;
  }
}

/* ═══ Category filter: cleaner Amazon-style left rail ═════════════════════════ */
.shop-cat-filter-row {
  padding-top: 0.3rem;
  padding-bottom: 0.3rem;
}
/* Name left, count pinned right - like a department filter list */
.shop-cat-filter-label {
  display: flex;
  align-items: baseline;
  gap: 0.4rem;
  font-size: 0.8rem;
}
.shop-cat-filter-count {
  margin-left: auto;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
/* Selected category reads bolder */
.shop-cat-filter-row input:checked + .shop-cat-filter-label {
  font-weight: 700;
}
/* Give the scroll area a bit more breathing room before it scrolls */
.shop-cat-filter-list--scroll {
  max-height: 19rem;
}

/* ---- 13. Modals ------------------------------------------------------------- */
.modal-bg {
  background: rgba(16, 24, 40, 0.45);
  backdrop-filter: blur(4px);
  padding: var(--sp-4);
}

.modal {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--sp-6);
  box-shadow: var(--shadow-xl);
  width: 100%;
  max-width: 560px;
  max-height: 92vh;
  overflow-y: auto;
}
.modal-lg { max-width: 760px; }
.modal-order-review { max-width: 960px; }
.modal-header { margin-bottom: var(--sp-5); }
.modal-title { font-size: var(--fs-xl); font-weight: 600; }
.close-btn {
  width: 32px; height: 32px;
  border-radius: var(--radius-sm);
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text2);
  cursor: pointer;
  transition: background-color var(--dur-fast), color var(--dur-fast);
}
.close-btn:hover { background: var(--bg3); color: var(--text); }

/* Shared admin modal / form layout (F2a) */
.mw-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  margin-bottom: var(--sp-5);
  flex-shrink: 0;
}
.mw-modal-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 0 var(--sp-1);
}
.mw-modal-footer {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  justify-content: flex-end;
  align-items: center;
  margin-top: var(--sp-4);
  padding-top: var(--sp-4);
  border-top: 1px solid var(--border);
  flex-shrink: 0;
}
.mw-form-section { margin-bottom: var(--sp-4); }
.mw-form-section:last-child { margin-bottom: 0; }
.mw-form-section-title {
  margin: 0 0 var(--sp-3);
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--text2);
}

/* Admin page toolbars */
.mw-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  margin-bottom: var(--sp-4);
}
.mw-toolbar-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2);
}

/* ---- 14. Toasts ------------------------------------------------------------- */
.toast {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  padding: var(--sp-3) var(--sp-4);
  font-size: var(--fs-sm);
  min-width: 280px;
}
.toast.success { border-left: 3px solid var(--green); }
.toast.error { border-left: 3px solid var(--red); }
.toast.info { border-left: 3px solid var(--brand); }

/* F5a: toast position on narrow screens - full rules in phone block below */

/* ---- 15. Empty states ------------------------------------------------------- */
.empty { padding: var(--sp-9) var(--sp-4); color: var(--text3); }
.empty-icon { opacity: 0.55; }
.empty-text { font-size: var(--fs-md); }

/* ---- 16. Quick actions / dashboard ------------------------------------------ */
.quick-action-btn {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--sp-4) var(--sp-3);
  transition: background-color var(--dur-fast), border-color var(--dur-fast), color var(--dur-fast);
}
.quick-action-btn:hover {
  background: var(--accent-soft);
  border-color: var(--brand);
  color: var(--brand);
}
.dash-zone {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--sp-5);
}
.dash-zone.incoming, .dash-zone.outgoing, .dash-zone.invoices { border-top-width: 3px; }

/* ---- 17. Scanner / camera screens ------------------------------------------- */
.scanner-box {
  background: var(--bg3);
  border: 2px dashed var(--border2);
  border-radius: var(--radius-md);
  padding: var(--sp-7);
  transition: background-color var(--dur-fast), border-color var(--dur-fast);
}
.scanner-box:hover { background: var(--accent-soft); border-color: var(--brand); }
.scanner-result { background: var(--green-bg); border-color: var(--green-border); color: var(--green); border-radius: var(--radius-md); padding: var(--sp-4); }
.scanner-error { background: var(--red-bg); border-color: var(--red-border); color: var(--red); border-radius: var(--radius-md); padding: var(--sp-4); }

.wo-camera-wrap,
.wh-camera-wrap {
  border-color: var(--border2);
  transition: border-color 100ms, box-shadow 100ms;
}
.wo-camera-wrap.flash-green,
.wh-camera-wrap.flash-green { border-color: var(--green); box-shadow: 0 0 0 3px rgba(63, 202, 140, 0.35); }
.wo-camera-wrap.flash-red,
.wh-camera-wrap.flash-red { border-color: var(--red); box-shadow: 0 0 0 3px rgba(244, 63, 94, 0.35); }
.wo-camera-wrap.flash-yellow,
.wh-camera-wrap.flash-yellow { border-color: var(--amber); box-shadow: 0 0 0 3px rgba(251, 191, 36, 0.35); }
.wh-camera-wrap.flash-orange { border-color: var(--orange); box-shadow: 0 0 0 3px rgba(251, 146, 60, 0.35); }

/* ---- 18. Landing page ------------------------------------------------------- */

/* Root wrapper - respect the theme instead of a hardcoded light bg */
#landingPage { background: var(--bg); color: var(--text); }

.mw-landing-nav { background: var(--surface); border-color: var(--border); }
.mw-landing-nav .mw-landing-logo { color: var(--text); }
.mw-landing-nav .mw-landing-signin {
  background: var(--brand);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-sm), 0 1px 0 rgba(255, 255, 255, 0.12) inset;
}
.mw-landing-nav .mw-landing-signin:hover {
  background: var(--brand-hover);
  box-shadow: var(--shadow-md), 0 1px 0 rgba(255, 255, 255, 0.1) inset;
}

.mw-landing-hero { background: var(--surface); border-color: var(--border); }
.mw-landing-hero--wholesale {
  background: linear-gradient(165deg, var(--surface) 0%, var(--surface-muted) 42%, var(--bg3) 100%);
}
.mw-landing-hero h1 { color: var(--text); }
.mw-landing-hero:not(.mw-landing-hero--wholesale) > p { color: var(--text2); }

.mw-landing-section h2 { color: var(--text); }
.mw-landing-section .mw-landing-sub { color: var(--text2); }

.mw-landing-btn-primary {
  background: var(--brand);
  color: var(--brand-contrast);
  border-radius: var(--radius-sm);
  padding: 0 var(--sp-5);
  min-height: var(--ctrl-h-lg);
  font-weight: 600;
  border: 1px solid transparent;
  box-shadow: var(--shadow-sm), 0 1px 0 rgba(255, 255, 255, 0.12) inset;
}
.mw-landing-btn-primary:hover { background: var(--brand-hover); transform: none; box-shadow: var(--shadow-md), 0 1px 0 rgba(255, 255, 255, 0.1) inset; }
.mw-landing-btn-outline {
  color: var(--chrome-primary);
  background: rgba(255, 255, 255, 0.65);
  border: 2px solid var(--chrome-primary);
  border-radius: var(--radius-sm);
  padding: 0 var(--sp-5);
  min-height: var(--ctrl-h-lg);
  font-weight: 600;
  box-shadow: var(--shadow-xs);
}
.mw-landing-btn-outline:hover {
  background: var(--accent-soft);
  border-color: var(--chrome-hover);
  color: var(--chrome-hover);
  box-shadow: var(--shadow-sm);
}

/* Category / step cards - flat surface, neutral border, no translate,
   no rainbow stripe, title legible in both themes */
.mw-landing-card,
.mw-landing-step {
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
  border-top: 1px solid var(--border) !important;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-xs);
  transition: box-shadow var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out);
}
.mw-landing-card:hover,
.mw-landing-step:hover {
  box-shadow: var(--shadow-sm) !important;
  transform: none !important;
  border-color: var(--border2) !important;
}
.mw-landing-card .mw-landing-card-title { color: var(--text); }
.mw-landing-grid button.mw-landing-card {
  cursor: pointer;
  font: inherit;
  color: inherit;
  width: 100%;
  -webkit-appearance: none;
  appearance: none;
  text-align: center;
}
.mw-landing-grid button.mw-landing-card:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
}
.mw-landing-step h3 { color: var(--text); }
.mw-landing-step p { color: var(--text2); }

/* Retire the per-section accent stripes - one visual language */
.mw-landing-accent-catalog,
.mw-landing-accent-customers,
.mw-landing-accent-incoming,
.mw-landing-accent-outgoing,
.mw-landing-step--accent-catalog,
.mw-landing-step--accent-customers,
.mw-landing-step--accent-incoming {
  border-top: 1px solid var(--border) !important;
  border-top-color: var(--border) !important;
}
.mw-landing-step--accent-catalog .mw-landing-step-num,
.mw-landing-step--accent-customers .mw-landing-step-num,
.mw-landing-step--accent-incoming .mw-landing-step-num {
  color: var(--brand);
}

/* Icon chips - subtle neutral circle that reads in both themes */
.mw-landing-card .mw-landing-card-icon,
.mw-landing-accent-catalog .mw-landing-card-icon,
.mw-landing-accent-customers .mw-landing-card-icon,
.mw-landing-accent-incoming .mw-landing-card-icon,
.mw-landing-accent-outgoing .mw-landing-card-icon {
  background: var(--bg3) !important;
  border: 1px solid var(--border) !important;
}

.mw-landing-footer { background: #070b14; color: #c8d1e3; }

.login-card { box-shadow: var(--shadow-sm); border-radius: var(--radius-lg); }

/* ---- 19. Report UI ---------------------------------------------------------- */
.report-sidebar-tabs { background: var(--surface); border-right: 1px solid var(--border); }
.report-tab { font-size: var(--fs-sm); padding: var(--sp-2) var(--sp-4); }
.report-tab:hover { background: var(--bg3); color: var(--text); }
.report-tab.active {
  color: var(--brand);
  background: var(--accent-soft);
  border-left: 2px solid var(--brand);
  font-weight: 600;
}
.report-filter-bar {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--sp-4) var(--sp-5);
}
.date-quick-btn {
  border-radius: var(--radius-pill);
  border: 1px solid var(--border);
  background: var(--bg3);
  color: var(--text2);
  font-size: var(--fs-sm);
  padding: var(--sp-1) var(--sp-3);
  min-height: 30px;
}
.date-quick-btn.active { border-color: var(--brand); color: var(--brand); background: var(--accent-soft); font-weight: 600; }
.rep-ov-head--sales { background: var(--brand); }
.rep-ov-head--customers { background: var(--color-customers); }
.rep-ov-head--vendor { background: var(--color-incoming); }
.rep-ov-head--inventory { background: var(--color-outgoing); }

/* ---- 20. Progress / fulfill / dispatch -------------------------------------- */
.progress-bar-wrap { background: var(--bg3); border-radius: var(--radius-pill); height: 8px; }
.progress-bar-fill { background: var(--green); border-radius: var(--radius-pill); }
.fulfill-item { background: var(--surface); border: 1px solid var(--border); border-left-width: 3px; border-radius: var(--radius); }
.fulfill-item.partial { border-left-color: var(--brand); background: var(--accent-soft); }
.fulfill-item.complete { border-left-color: var(--green); background: var(--green-bg); }
.dispatch-dl-check-item {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--sp-3) var(--sp-4);
}
.dispatch-dl-check-item.checked { background: var(--green-bg); border-color: var(--green-border); }
.dispatch-dl-check-item.qty-changed,
.dispatch-dl-check-item.checked.qty-changed { background: var(--amber-bg); border-color: var(--amber-border); }
.dispatch-dl-check-item.short { background: var(--amber-bg); border-color: var(--amber-border); color: var(--amber); }
.dispatch-dl-check-item.damaged { background: var(--red-bg); border-color: var(--red-border); color: var(--red); }

/* ---- 21. Delivery confirmation ---------------------------------------------- */
.delivery-confirm-screen { background: var(--bg); color: var(--text); }
.confirm-btn-large {
  background: var(--green);
  color: #fff;
  font-size: var(--fs-xl);
  border-radius: var(--radius-lg);
  min-height: 56px;
}

/* ---- 22. Bottom sheet ------------------------------------------------------- */
.bottom-sheet-bg { background: rgba(16, 24, 40, 0.45); backdrop-filter: blur(6px); }

.bottom-sheet {
  background: var(--surface);
  border: 1px solid var(--border);
  border-bottom: none;
  border-radius: var(--radius-xl) var(--radius-xl) 0 0;
  padding: var(--sp-5);
}

/* ---- 23. Mobile bottom bar -------------------------------------------------- */
#mobileBottomBar {
  background: var(--surface);
  border-top: 1px solid var(--border);
  height: var(--mobile-bar-h);
  box-shadow: 0 -2px 8px rgba(16, 24, 40, 0.04);
}

#mobileBottomBar button { color: var(--text2); font-size: var(--fs-xs); min-height: 44px; }
#mobileBottomBar button:hover,
#mobileBottomBar button:active { color: var(--brand); }

/* ---- 24. Landing / login form controls inherit form rules ------------------- */
.login-back-home { color: var(--brand); font-size: var(--fs-sm); font-weight: 500; }

/* ============================================================================
 * RESPONSIVE
 *
 * Breakpoints:
 *   xs: < 480       - small phones
 *   sm: 480-767     - phones
 *   md: 768-1023    - tablets
 *   lg: 1024-1279   - laptops
 *   xl: ≥ 1280      - desktops
 *
 * Rules:
 *   - < 1024       : sidebar goes off-canvas
 *   - < 768        : content gutters shrink, field-row collapses, modals full
 *   - < 640        : tables opt-in stack via [data-table-stack]
 *   - < 480        : stats grid → 1 col, products grid → 1 col
 *   - touch ≥      : min-height 44px on inputs/buttons
 * ============================================================================ */

/* ---- Logo (shared Logo.js + static PNG) ------------------------------------ */
.mw-logo-host {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  min-width: 0;
}
.mw-logo {
  display: inline-flex;
  align-items: center;
  line-height: 0;
  text-decoration: none;
  color: inherit;
}
.mw-logo:hover {
  text-decoration: none;
}
.mw-logo__img {
  height: var(--mw-logo-max-h, 40px);
  width: auto;
  max-width: min(100%, 260px);
  object-fit: contain;
  display: block;
}
/* Horizontal lockup: mark + wordmark (landing, sidebar, mobile topbar) */
.mw-logo-lockup {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
  min-width: 0;
  max-width: 100%;
}
.mw-logo-lockup .mw-logo__img--mark {
  flex-shrink: 0;
}
.mw-logo-lockup__name {
  font-weight: 700;
  font-size: clamp(0.9375rem, 2.2vw, 1.0625rem);
  letter-spacing: -0.02em;
  color: var(--text);
  line-height: 1.2;
  min-width: 0;
}
.mw-logo-lockup__name-short {
  display: none;
}
@media (max-width: 400px) {
  .mw-logo-lockup__name-long {
    display: none;
  }
  .mw-logo-lockup__name-short {
    display: inline;
    font-size: var(--fs-sm);
  }
}
/* Full artwork (login / register) */
.mw-logo--layout-full .mw-logo__img--full {
  height: auto;
  width: auto;
  max-height: var(--mw-logo-max-h, 72px);
  max-width: 100%;
  object-fit: contain;
}
.mw-logo--layout-full .mw-logo__img--mark-fallback {
  max-height: min(var(--mw-logo-max-h, 72px), 56px);
  max-width: 44px;
}
.mw-logo__img--full-substitute {
  max-height: var(--mw-logo-max-h, 34px) !important;
  max-width: 120px !important;
  width: auto !important;
  height: auto !important;
}
.mw-logo-host--landing .mw-logo__img:not(.mw-logo__img--full) {
  max-height: 44px;
}
.mw-logo-host--topbar .mw-logo__img:not(.mw-logo__img--full) {
  max-height: 40px;
}
.sidebar-brand .mw-logo-host {
  margin-bottom: 0;
  align-self: flex-start;
  width: 100%;
  max-width: 100%;
}
.sidebar-brand .mw-logo {
  flex-shrink: 0;
  min-width: 0;
}
.sidebar-brand .mw-logo-lockup {
  flex-wrap: nowrap;
  align-items: center;
}
.sidebar-brand .mw-logo-lockup__name {
  font-size: var(--fs-sm);
  color: var(--sidebar-text);
  word-break: break-word;
}
.sidebar-brand .mw-logo__img--mark {
  max-height: 40px;
}
.sidebar-brand .mw-logo__img--full-substitute {
  max-height: 36px !important;
  max-width: 100px !important;
}

@media (min-width: 1024px) {
  .mw-logo-host--topbar {
    display: none !important;
  }
}

/* ---- Laptop / large tablet: keep sidebar docked ≥ 1024 --------------------- */
@media (max-width: 1023.98px) {
  .sidebar {
    position: fixed;
    top: 0; left: 0;
    height: 100vh;
    height: 100dvh;
    z-index: 200;
    transform: translateX(-100%);
    transition: transform var(--dur-slow) var(--ease-out);
    box-shadow: none;
    display: flex !important;
  }
  .sidebar.open { transform: translateX(0); box-shadow: var(--shadow-xl); }
  .sb-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(16, 24, 40, 0.35);
    backdrop-filter: blur(4px);
    z-index: 199;
    pointer-events: none;
  }
  .sb-overlay.open { display: block; pointer-events: auto; }
  .tb-menu {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background: var(--bg3);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--text);
  }
}

/* ---- Tablet 768-1023 -------------------------------------------------------- */
@media (min-width: 768px) and (max-width: 1023.98px) {
  .content { padding: var(--sp-5); }
  .dash-zones { grid-template-columns: 1fr 1fr; }
  .dash-bottom { grid-template-columns: 1fr; }
  .stats-grid { grid-template-columns: repeat(2, 1fr); }
  .report-layout { grid-template-columns: 180px 1fr; }
  .report-stat-grid { grid-template-columns: repeat(2, 1fr); }
  .grid-3 { grid-template-columns: 1fr 1fr; }
}

/* ---- Phone ≤ 767 ------------------------------------------------------------ */
@media (max-width: 767.98px) {
  /* F5a: horizontal padding only; bottom nav clearance when bar visible is canonical below */
  .content { padding: var(--sp-4); }
  .topbar { padding: 0 var(--sp-4); }
  .topbar-title { font-size: var(--fs-md); }

  .card { padding: var(--sp-4); border-radius: var(--radius-md); }
  .stat-card { padding: var(--sp-4); }
  .stat-value { font-size: var(--fs-2xl); }

  .stats-grid { grid-template-columns: 1fr 1fr; gap: var(--sp-3); }
  .products-grid { grid-template-columns: 1fr 1fr; gap: var(--sp-3); }
  .grid-2, .grid-3 { grid-template-columns: 1fr; gap: var(--sp-4); }
  .dash-zones, .dash-bottom { grid-template-columns: 1fr; gap: var(--sp-4); }
  .quick-action-grid { grid-template-columns: 1fr 1fr; }

  .field-row { grid-template-columns: 1fr; }
  .field input,
  .field select,
  .field textarea,
  .search-input,
  .filter-select { min-height: 44px; font-size: 16px; /* prevent iOS zoom */ }

  .btn { min-height: 40px; padding: 0 var(--sp-4); }
  .btn-sm { min-height: 34px; }
  .btn-lg { min-height: 48px; }

  /* F5a: inset scrollable modals (overrides legacy app.css fullscreen mobile rules) */
  .modal-bg {
    padding: var(--sp-2);
    align-items: center;
    justify-content: center;
  }
  #modalBox.modal {
    display: flex;
    flex-direction: column;
    width: calc(100vw - var(--sp-4));
    max-width: min(560px, calc(100vw - var(--sp-4)));
    height: auto;
    max-height: calc(100dvh - 2rem);
    margin: 0;
    padding: 0;
    overflow: hidden;
    border-radius: var(--radius-md);
  }
  #modalContent {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    max-height: calc(100dvh - 2rem);
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: var(--sp-4);
  }
  #modalContent:has(.mw-modal-body) {
    overflow: hidden;
    padding: 0;
  }
  #modalContent .mw-modal-header,
  #modalContent > .modal-header {
    flex-shrink: 0;
    padding: var(--sp-4) var(--sp-4) 0;
    margin-bottom: 0;
  }
  #modalContent .mw-modal-body {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 0 var(--sp-1);
  }
  #modalContent .mw-modal-footer,
  #modalContent .admin-product-edit-footer {
    flex-shrink: 0;
    margin-top: 0;
    padding: var(--sp-3) var(--sp-4) calc(var(--sp-3) + env(safe-area-inset-bottom, 0px));
  }
  .mw-admin-edit-product-modal #modalContent .admin-product-edit-body,
  .mw-admin-add-product-modal #modalContent .admin-product-edit-body {
    max-height: none;
    overflow-y: visible;
  }
  .modal {
    padding: var(--sp-5);
    border-radius: var(--radius-md);
    max-height: calc(100dvh - 2rem);
    height: auto;
  }
  .modal-header { margin-bottom: var(--sp-4); }
  .modal-title { font-size: var(--fs-lg); }

  .report-layout { grid-template-columns: 1fr; }
  .report-sidebar-tabs {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    border-right: none;
    border-bottom: 1px solid var(--border);
    padding: var(--sp-2);
    gap: var(--sp-1);
  }
  .report-tab-section { width: 100%; padding: var(--sp-2) var(--sp-2) 0; }
  .report-tab { border-left: none; border-radius: var(--radius-pill); padding: 6px var(--sp-3); }
  .report-tab.active { border-left: none; background: var(--accent-soft); }
  .report-stat-grid { grid-template-columns: 1fr 1fr; }

  /* Opt-in: tables that are better read as stacked cards below 640px.
     Apply on <table data-table-stack> OR by wrapping in .table-stack. */
}

@media (max-width: 639.98px) {
  [data-table-stack] thead,
  .table-stack table thead { display: none; }
  [data-table-stack] tr,
  .table-stack table tr {
    display: block;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    margin-bottom: var(--sp-3);
    background: var(--surface);
  }
  [data-table-stack] td,
  .table-stack table td {
    display: flex;
    justify-content: space-between;
    gap: var(--sp-3);
    padding: var(--sp-2) var(--sp-3);
    border: none;
    border-bottom: 1px solid var(--divider);
    text-align: right;
  }
  [data-table-stack] td:last-child,
  .table-stack table td:last-child { border-bottom: none; }
  [data-table-stack] td::before,
  .table-stack table td::before {
    content: attr(data-label);
    font-size: var(--fs-2xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text3);
    text-align: left;
  }
}

/* ---- Small phone ≤ 479 ------------------------------------------------------ */
@media (max-width: 479.98px) {
  .content { padding: var(--sp-3); }
  .stats-grid { grid-template-columns: 1fr; }
  .products-grid { grid-template-columns: 1fr; }
  .quick-action-grid { grid-template-columns: 1fr 1fr; }
  .report-stat-grid { grid-template-columns: 1fr; }
  .sidebar { width: 85vw; max-width: 320px; }
  .modal { padding: var(--sp-4); }
  .btn { width: 100%; }
  /* F5a: topbar action strip must stay horizontal scroll, not full-width stack */
  #topbarActions .btn {
    width: auto;
    min-height: var(--mw-tap, 44px);
    flex-shrink: 0;
  }
  .btn-group .btn, .fs-bottom-actions .btn, .bulk-review-actions .btn { width: auto; }
}

/* ---- F5a: Mobile shell canonical (loads after app.css) ---------------------- */
@media (max-width: 767.98px) {
  /* Bottom nav - single source when #mobileBottomBar.visible */
  body:has(#mobileBottomBar.visible) #mainContent.content {
    padding-bottom: calc(var(--mw-mobile-bottombar-h, 56px) + env(safe-area-inset-bottom, 0px) + 0.75rem);
  }

  /* Toasts - clear bottom bar + safe area; fit 320-375px viewports */
  #toasts {
    right: 0.75rem;
    left: 0.75rem;
    bottom: calc(1rem + env(safe-area-inset-bottom, 0px));
    align-items: flex-end;
    max-width: none;
  }
  body:has(#mobileBottomBar.visible) #toasts {
    bottom: calc(var(--mw-mobile-bottombar-h, 56px) + env(safe-area-inset-bottom, 0px) + 0.75rem);
  }
  #toasts .toast,
  .toast {
    min-width: 0;
    max-width: min(320px, calc(100vw - 1.5rem));
    width: auto;
    box-sizing: border-box;
  }
}

/* ---- Desktop breathing room ≥ 1280 ----------------------------------------- */
@media (min-width: 1280px) {
  .content { padding: var(--sp-7); }
  .card { padding: var(--sp-6); }
}

/* ---- Motion preferences ----------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* =========================================================
 * Melbourne Wholesale UI Foundation Additions (Phase UI-1)
 *
 * Additive utility classes only. No page-specific business
 * flow CSS belongs here. Classes below are referenced by
 * admin, customer, and warehouse JS pages.
 * ========================================================= */

/* ---- Page header utility ---------------------------------------------------- */
/*
 * .mw-page-header     - top strip of any admin/customer page (title + actions)
 * .mw-page-header__main    - grows to fill available width; holds title + sub
 * .mw-page-header__title   - primary h1/h2-level heading
 * .mw-page-header__subtitle - secondary descriptor line
 * .mw-page-header__actions - right-aligned button/chip strip
 */
.mw-page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  flex-wrap: wrap;
  margin-bottom: var(--sp-5);
}
.mw-page-header__main {
  flex: 1 1 0;
  min-width: 0;
}
.mw-page-header__title {
  font-size: var(--fs-2xl);
  font-weight: 700;
  color: var(--brand-dark);
  letter-spacing: -0.02em;
  line-height: 1.2;
  margin: 0;
}
.mw-page-header__subtitle {
  margin-top: var(--sp-1);
  font-size: var(--fs-sm);
  color: var(--text3);
  line-height: 1.45;
}
.mw-page-header__actions {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  flex-wrap: wrap;
  justify-content: flex-end;
  flex-shrink: 0;
}

@media (max-width: 479.98px) {
  .mw-page-header {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--sp-3);
  }
  .mw-page-header__actions {
    width: 100%;
    justify-content: flex-start;
  }
}

/* ---- Pagination bar utility ------------------------------------------------- */
/*
 * Used by shop.js, guestCatalog.js, and any paginated list.
 * JS can adopt .mw-pagination-bar instead of inline flex strings.
 */
.mw-pagination-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  flex-wrap: wrap;
  padding: var(--sp-3) 0;
  border-top: 1px solid var(--divider);
  margin-top: var(--sp-3);
  font-size: var(--fs-sm);
  color: var(--text2);
}
.mw-pagination-bar__count {
  color: var(--text3);
  font-size: var(--fs-sm);
  line-height: 1.4;
}
.mw-pagination-bar__actions {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  flex-shrink: 0;
}

/* ---- Payment method badge additions ---------------------------------------- */
/*
 * CASH, CHECK, OTHER are defined in app.css:1542-1553.
 * ZELLE and WIRE are new - not present in either file before this phase.
 */
.method-ZELLE {
  background: rgba(88, 80, 236, 0.12);
  color: #4338ca;
}
.method-WIRE {
  background: rgba(12, 100, 114, 0.12);
  color: var(--chrome-active);
}

/* ══════════════════════════════════════════════════════════════════════════════
   UI-3 - Customer account management visual polish
   All rules are pure additions; no existing selectors deleted or renamed.
   ══════════════════════════════════════════════════════════════════════════════ */

/* ── Customer list page ─────────────────────────────────────────────────────── */

/* Extra breathing room under the page header */
.cust-page-header { margin-bottom: 1.25rem; }

/* Stronger brand-linked toolbar border */
.cust-page-toolbar {
  border-color: var(--chrome-border-28, rgba(12, 100, 114, 0.28));
}

/* Discount badge as a proper pill (currently plain colored text in app.css) */
.cust-list-disc-badge {
  display: inline-flex;
  align-items: center;
  padding: 0.18rem 0.5rem;
  border-radius: 999px;
  font-size: 0.7rem;
  font-weight: 700;
  background: rgba(22, 163, 74, 0.1);
  border: 1px solid rgba(22, 163, 74, 0.3);
  color: var(--green, #16a34a);
  letter-spacing: 0.01em;
}

/* Customer card hover lift */
.catalog-card--slim.cust-admin-card {
  transition: box-shadow var(--dur-fast, 0.12s) ease-out,
              border-color var(--dur-fast, 0.12s) ease-out;
}
@media (hover: hover) {
  .catalog-card--slim.cust-admin-card:hover {
    box-shadow: var(--shadow-md);
    border-color: var(--chrome-border-28, rgba(12, 100, 114, 0.3));
  }
}

/* Bulk action bar - brand color instead of arbitrary hardcoded dark.
   Also fix: app.css sets display:flex which silently overrides [hidden].
   display:none on [hidden] must be explicitly re-asserted with higher specificity. */
.catalog-bulk-bar {
  background: var(--chrome-primary, #0c6472);
}
.catalog-bulk-bar[hidden] {
  display: none;
}
.catalog-bulk-bar .btn {
  color: rgba(255, 255, 255, 0.92);
  border-color: rgba(255, 255, 255, 0.28);
  background: rgba(255, 255, 255, 0.1);
}
.catalog-bulk-bar .btn:hover {
  background: rgba(255, 255, 255, 0.22);
  border-color: rgba(255, 255, 255, 0.55);
  color: #fff;
}
.catalog-bulk-bar .btn-ghost {
  background: transparent;
  border-color: transparent;
  color: rgba(255, 255, 255, 0.75);
}
.catalog-bulk-bar .btn-ghost:hover {
  background: rgba(255, 255, 255, 0.15);
  color: #fff;
}

/* ── Customer toolbar layout ────────────────────────────────────────────────── */
/* Problem 1: .filter-select { width:100% } in system.css (specificity 0,1,0)
   loads after app.css and silently overrides .cust-toolbar-sort { width:auto }.
   Fix: two-class selector raises specificity to 0,2,0 → beats .filter-select. */
.filter-select.cust-toolbar-sort {
  width: auto;
  flex: 0 0 auto;
  min-width: 10.5rem;
}

/* Problem 2: @media(min-width:900px) in app.css caps the search at max-width:22rem,
   leaving a large dead zone to the right on desktop.
   Fix: higher-specificity selector removes the cap so the search fills all free space. */
.cust-page-toolbar .cust-toolbar-search {
  max-width: none;
  flex: 1 1 auto;
  min-width: 12rem;
}

/* ── Customer workspace ─────────────────────────────────────────────────────── */

/* Slightly more generous header padding for hierarchy */
.cust-workspace__header-main { padding: 1.15rem 1.25rem 1rem; }

/* Inactive tab hover state (none previously defined) */
.cust-ws-tab:not(.cust-ws-tab--active):hover {
  color: var(--text);
  background: var(--bg2);
  border-bottom-color: var(--border);
}

/* KPI card: zero/clean balance green tint
   cust-ws-kpi--ok is used in customerWorkspace.js but had no CSS definition */
.cust-ws-kpi--ok {
  border-color: rgba(22, 163, 74, 0.2);
  background: rgba(22, 163, 74, 0.06);
}
.cust-ws-kpi--ok .cust-ws-kpi-value {
  color: var(--green, #16a34a);
}

/* Fix hardcoded amber text color that is illegible in dark mode */
.cust-ws-alert--warn { color: var(--amber, #b54708); }

/* Section title: remove top gap when it leads a panel */
.cust-ws-section-title:first-child { margin-top: 0; }

/* ── UI-3 layout fixes (desktop) ────────────────────────────────────────────── */

/* Flatter toolbar: remove shadow that adds unnecessary depth */
.cust-page-toolbar { box-shadow: none; }

/* Fix dead-space gap on wide screens.
   app.css caps search at max-width:22rem inside @media (min-width:900px),
   so the search stops growing and leaves an empty hole between sort and actions.
   Remove the cap - search fills the available width, no dead space. */
@media (min-width: 900px) {
  .cust-toolbar-search { max-width: none; }
}

/* Customer status tabs: underline style, not pill/segmented-control.
   The .tabs class from system.css gives bg3 + border + radius to the container;
   override all of that for cust-status-tabs specifically. */
.cust-status-tabs.tabs {
  display: flex;
  background: none;
  border: none;
  border-bottom: 2px solid var(--border);
  border-radius: 0;
  padding: 0;
  gap: 0;
}
.cust-status-tabs .tab {
  border-radius: 0;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  padding: 0.5rem 1rem;
  font-size: 0.88rem;
  font-weight: 600;
  background: none;
  color: var(--text2);
}
.cust-status-tabs .tab.active {
  background: none;
  box-shadow: none;
  color: var(--accent);
  border-bottom-color: var(--accent);
}
.cust-status-tabs .tab:not(.active):hover {
  color: var(--text);
  background: none;
}

/* ══════════════════════════════════════════════════════════════════════════════
   Bug fixes
   ══════════════════════════════════════════════════════════════════════════════ */

/* Customer workspace: wider panel gives tables and KPI cards room to breathe.
   520px was too tight for 4 tabs; 680px still leaves a visible backdrop. */
.cust-workspace__panel {
  width: min(680px, 100vw);
}

/* Consistent card footer: "No balance due" label for paid-up customers */
.cust-list-paid-up {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--green, #16a34a);
  opacity: 0.85;
  letter-spacing: 0.01em;
}

/* Bug 2 - Products table: sticky Actions column so it's always reachable
   even when the table scrolls horizontally on mid-size screens.
   The table retains its min-width so column widths stay correct. */
.admin-products-fixed-table th:last-child,
.admin-products-fixed-table td:last-child {
  position: sticky;
  right: 0;
  background: var(--surface);
  box-shadow: -2px 0 4px rgba(0, 0, 0, 0.06);
  z-index: 1;
}

/* Bug 4 - Checkbox/radio inputs inside .field containers inherit the full
   control-height and 100% width from the .field input rule (system.css:347).
   Reset those properties so checkboxes render at their native small size. */
.field input[type="checkbox"],
.field input[type="radio"] {
  width: auto;
  min-height: auto;
  padding: 0;
  background: initial;
  border: initial;
  border-radius: 0;
  -webkit-appearance: auto;
  appearance: auto;
  align-self: center;
  flex-shrink: 0;
}

/* Bug 6 - Customer workspace: Payment History table STATUS column is clipped.
   The scroll wrapper has overflow:auto but the table outgrows it because
   table-layout:auto lets columns expand freely. Switch to fixed layout with a
   sensible min-width so the wrapper scrolls instead of clipping. */
.cust-ws-table-scroll--history {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  width: 100%;
}
.cust-ws-table-scroll--history .cust-ws-table {
  min-width: 540px;
  table-layout: fixed;
  width: 100%;
}
.cust-ws-table-scroll--history .cust-ws-table th:nth-child(1),
.cust-ws-table-scroll--history .cust-ws-table td:nth-child(1) { width: 82px; }
.cust-ws-table-scroll--history .cust-ws-table th:nth-child(2),
.cust-ws-table-scroll--history .cust-ws-table td:nth-child(2) { width: 100px; }
.cust-ws-table-scroll--history .cust-ws-table th:nth-child(3),
.cust-ws-table-scroll--history .cust-ws-table td:nth-child(3) { width: 72px; }
.cust-ws-table-scroll--history .cust-ws-table th:nth-child(4),
.cust-ws-table-scroll--history .cust-ws-table td:nth-child(4) { width: 76px; }
.cust-ws-table-scroll--history .cust-ws-table th:nth-child(5),
.cust-ws-table-scroll--history .cust-ws-table td:nth-child(5) { width: 72px; }
.cust-ws-table-scroll--history .cust-ws-table th:nth-child(6),
.cust-ws-table-scroll--history .cust-ws-table td:nth-child(6) { width: 68px; }
.cust-ws-table-scroll--history .cust-ws-table th:nth-child(7),
.cust-ws-table-scroll--history .cust-ws-table td:nth-child(7) { width: 60px; }

/* ---- Print refinements ------------------------------------------------------ */
@media print {
  .sidebar, .topbar, #mobileBottomBar, #toasts, .sb-overlay { display: none !important; }
  .content { padding: 0 !important; }
  .card, .stat-card, .dash-zone { break-inside: avoid; box-shadow: none !important; }
}

@keyframes mw-shimmer {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.4;
  }
}

.skel-line {
  background: var(--bg3, #f1f0e8);
  border-radius: 4px;
  height: 10px;
  animation: mw-shimmer 1.4s ease-in-out infinite;
}
.skel-line + .skel-line {
  margin-top: 8px;
}
.skel-line.w-full {
  width: 100%;
}
.skel-line.w-3q {
  width: 75%;
}
.skel-line.w-half {
  width: 50%;
}
.skel-line.w-1q {
  width: 30%;
}

.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 2.5rem 1rem;
  text-align: center;
}
.empty-state svg {
  width: 36px;
  height: 36px;
  opacity: 0.25;
  margin-bottom: 0.75rem;
}
.empty-state h3 {
  font-size: 0.9375rem;
  font-weight: 500;
  margin-bottom: 0.25rem;
  color: var(--text2);
}
.empty-state p {
  font-size: 0.8125rem;
  color: var(--text3);
  max-width: 260px;
  line-height: 1.5;
  margin-bottom: 1rem;
}