/* ═══════════════════════════════════════════════════════════════════
   Shelfy Design System — shelfy-overrides.css
   ═══════════════════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────────────────────────────
   0. Base — font & reset
   ───────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
.sr-only { position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0; }

html { font-size: 14px; }

body {
  font-family: 'Google Sans Flex', sans-serif;
  background: #fff;
  color: var(--color-text-primary);
  margin: 0;
}

/* Force every element — including inputs/selects — onto the brand font */
input, select, textarea, button, label, optgroup, option {
  font-family: 'Google Sans Flex', sans-serif;
}

/* scrollbar-hide utility */
.scrollbar-hide { scrollbar-width: none; -ms-overflow-style: none; }
.scrollbar-hide::-webkit-scrollbar { display: none; }

/* ─────────────────────────────────────────────────────────────────
   1. CSS Custom Properties (Design Tokens)
   ───────────────────────────────────────────────────────────────── */
:root {
  /* Brand */
  --color-brand-primary:  #0D9488;
  --color-brand-dark:     #0B7A72;
  --color-brand-slate:    #1A5C5A;
  --color-brand-amber:    #D97706;
  --color-brand-amber-dark: #B45309;
  --color-brand-amber-soft: #FEF3C7;
  --color-brand-soft:     #CCFBF1;

  /* Sidebar */
  --sh-sidebar-bg:        #1A5C5A;
  --sh-sidebar-bg-hover:  rgba(255,255,255,0.08);
  --sh-sidebar-bg-active: rgba(255,255,255,0.14);
  --sh-sidebar-text:      rgba(255,255,255,0.70);
  --sh-sidebar-text-active: #ffffff;
  --sh-sidebar-border:    rgba(255,255,255,0.10);

  /* Canvas & Surface */
  --color-canvas:         #F8FAFC;
  --color-surface:        #FFFFFF;

  /* Text */
  --color-text-primary:   #1A202C;
  --color-text-secondary: #4A5568;
  --color-text-muted:     #A0AEC0;

  /* Border — lighter so they don't dominate */
  --color-border:         #EDF0F4;
  --color-border-strong:  #E2E8F0;

  /* Semantic — danger */
  --color-danger:         #E53E3E;
  --color-danger-soft:    #FFF5F5;

  /* Semantic — warning */
  --color-warning:        #D69E2E;
  --color-warning-soft:   #FFFBEB;

  /* Semantic — success */
  --color-success:        #38A169;
  --color-success-soft:   #F0FFF4;

  /* Semantic — info */
  --color-info:           #3182CE;
  --color-info-soft:      #EBF8FF;

  /* Spacing */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;

  /* Border radius */
  --radius-sm:   6px;
  --radius-md:   10px;
  --radius-lg:   14px;
  --radius-xl:   20px;
  --radius-full: 9999px;

  /* Shadows — layered, softer */
  --shadow-xs:    0 1px 2px rgba(0,0,0,0.04);
  --shadow-sm:    0 1px 2px rgba(0,0,0,0.04), 0 2px 8px rgba(0,0,0,0.06);
  --shadow-md:    0 2px 6px rgba(0,0,0,0.04), 0 8px 24px rgba(0,0,0,0.08);
  --shadow-lg:    0 4px 12px rgba(0,0,0,0.06), 0 16px 40px rgba(0,0,0,0.10);
  --shadow-focus: 0 0 0 3px rgba(13,148,136,0.22);
  --shadow-brand: 0 4px 16px rgba(13,148,136,0.30);

  /* Animations */
  --ease-out:  cubic-bezier(0.4, 0, 0.2, 1);
  --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);

  /* Layout */
  --sh-sidebar-w: 256px;
  --sh-topbar-h:  56px;
}


/* ─────────────────────────────────────────────────────────────────
   2. Keyframes & Animation Utilities
   ───────────────────────────────────────────────────────────────── */
@keyframes shelfy-shimmer {
  0%   { background-position: -400px 0; }
  100% { background-position:  400px 0; }
}
@keyframes shelfy-spin {
  to { transform: rotate(360deg); }
}
@keyframes shelfy-scale-in {
  from { opacity: 0; transform: scale(0.95); }
  to   { opacity: 1; transform: scale(1); }
}
@keyframes shelfy-fade-up {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes shelfy-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes shelfy-slide-in-left {
  from { transform: translateX(-100%); }
  to   { transform: translateX(0); }
}
@keyframes shelfy-slide-up {
  from { transform: translateY(20px); opacity: 0; }
  to   { transform: translateY(0); opacity: 1; }
}
@keyframes shelfy-pop {
  0%   { transform: scale(0.9); opacity: 0; }
  70%  { transform: scale(1.04); }
  100% { transform: scale(1);   opacity: 1; }
}
@keyframes shelfy-pulse-ring {
  0%   { box-shadow: 0 0 0 0 rgba(13,148,136,0.35); }
  70%  { box-shadow: 0 0 0 8px rgba(13,148,136,0); }
  100% { box-shadow: 0 0 0 0 rgba(13,148,136,0); }
}

/* Animation utility classes */
.animate-fade-up  { animation: shelfy-fade-up  240ms var(--ease-out) both; }
.animate-fade-in  { animation: shelfy-fade-in  200ms var(--ease-out) both; }
.animate-scale-in { animation: shelfy-scale-in 200ms var(--ease-out) both; }
.animate-pop      { animation: shelfy-pop      300ms var(--ease-bounce) both; }
.animate-slide-up { animation: shelfy-slide-up 260ms var(--ease-out) both; }

/* Stagger children — add class to parent */
.stagger > * { animation: shelfy-fade-up 240ms var(--ease-out) both; }
.stagger > *:nth-child(1) { animation-delay: 0ms; }
.stagger > *:nth-child(2) { animation-delay: 40ms; }
.stagger > *:nth-child(3) { animation-delay: 80ms; }
.stagger > *:nth-child(4) { animation-delay: 120ms; }
.stagger > *:nth-child(5) { animation-delay: 160ms; }
.stagger > *:nth-child(n+6) { animation-delay: 200ms; }


/* ─────────────────────────────────────────────────────────────────
   3. Layout — Sidebar / Topbar / Main
   ───────────────────────────────────────────────────────────────── */
#shelfy-sidebar {
  position: fixed;
  top: 0; left: 0; bottom: 0;
  width: var(--sh-sidebar-w);
  background: var(--sh-sidebar-bg);
  border-right: none;
  z-index: 200;
  overflow-y: auto;
  transition: transform 0.22s cubic-bezier(0.4, 0, 0.2, 1);
  display: flex;
  flex-direction: column;
}

/* Topbar — mobile only (hidden on ≥768px) */
#shelfy-topbar {
  position: sticky;
  top: 0;
  z-index: 40;
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
  height: var(--sh-topbar-h);
  display: flex;
  align-items: center;
}

.sh-topbar-inner {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0 1rem;
  width: 100%;
}

.sh-hamburger {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem; height: 2.25rem;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--color-text-secondary);
  border-radius: var(--radius-full);
  flex-shrink: 0;
}
.sh-hamburger:hover { background: var(--color-canvas); }

.sh-breadcrumb   { font-size: 0.75rem; color: var(--color-text-muted); margin: 0; }
.sh-page-heading { font-size: 1rem; font-weight: 600; color: var(--color-text-primary); margin: 0; }

#shelfy-main {
  min-height: 100vh;
  background: #fff;
  padding: 20px 16px;
}

/* Mobile overlay */
#shelfy-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.4);
  z-index: 199;
}
#shelfy-overlay.active { display: block; }

/* Mobile (< 768px): sidebar hidden off-screen, topbar shown */
@media (max-width: 767px) {
  #shelfy-sidebar         { transform: translateX(-100%); }
  #shelfy-sidebar.sh-open { transform: translateX(0); box-shadow: var(--shadow-lg); }
  #shelfy-main            { margin-left: 0; padding-bottom: calc(5rem + env(safe-area-inset-bottom, 0px)); }
  /* Cart panel footer (total + confirm) moves to a sticky strip on mobile */
  .cart-panel-footer      { display: none !important; }

  /* Prevent iOS/Android auto-zoom on focus — triggered by font-size < 16px */
  input[type="text"],
  input[type="search"],
  input[type="email"],
  input[type="password"],
  input[type="number"],
  input[type="tel"],
  input[type="url"],
  input[type="file"],
  select,
  textarea {
    font-size: 16px !important;
  }
}

/* Desktop (≥ 768px): sidebar always visible, topbar hidden */
@media (min-width: 768px) {
  #shelfy-topbar  { display: none; }
  #shelfy-main    { margin-left: var(--sh-sidebar-w); padding: 28px 32px; }
}

/* Page content entrance animation */
#shelfy-main > * {
  animation: shelfy-fade-up 280ms var(--ease-out) both;
}


/* ─────────────────────────────────────────────────────────────────
   4. Buttons
   ───────────────────────────────────────────────────────────────── */
.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-1);
  background-color: var(--color-brand-primary);
  color: #fff;
  padding: 12px 20px;
  border-radius: var(--radius-md);
  font-size: 14px;
  font-weight: 600;
  font-family: inherit;
  border: none;
  cursor: pointer;
  transition: background-color 0.14s var(--ease-out),
              box-shadow      0.14s var(--ease-out),
              transform       0.06s var(--ease-out);
  text-decoration: none;
  white-space: nowrap;
  min-height: 44px;
  position: relative;
}
.btn-primary:hover          { background-color: var(--color-brand-dark); color: #fff; box-shadow: var(--shadow-brand); }
.btn-primary:active         { transform: scale(0.97); box-shadow: none; }
.btn-primary:focus-visible  { outline: none; box-shadow: var(--shadow-focus); }
.btn-primary:disabled,
.btn-primary[disabled]      { opacity: 0.4; cursor: not-allowed; transform: none; box-shadow: none; }
.btn-primary.btn-full       { width: 100%; }

/* Spinner replaces button text while loading */
.btn-primary.btn-loading {
  color: transparent;
  pointer-events: none;
}
.btn-primary.btn-loading::after {
  content: '';
  position: absolute;
  width: 16px; height: 16px;
  border: 2px solid rgba(255,255,255,0.35);
  border-top-color: #fff;
  border-radius: 50%;
  animation: shelfy-spin 0.8s linear infinite;
}

.btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-1);
  background-color: var(--color-surface);
  color: var(--color-text-primary);
  padding: 12px 20px;
  border-radius: var(--radius-md);
  font-size: 14px;
  font-weight: 500;
  font-family: inherit;
  border: 1.5px solid var(--color-border);
  cursor: pointer;
  transition: background-color 0.14s var(--ease-out),
              border-color     0.14s var(--ease-out),
              box-shadow       0.14s var(--ease-out),
              transform        0.06s var(--ease-out);
  text-decoration: none;
  white-space: nowrap;
  min-height: 44px;
}
.btn-secondary:hover         { background-color: var(--color-canvas); border-color: #C4CDD6; box-shadow: var(--shadow-xs); }
.btn-secondary:active        { transform: scale(0.97); }
.btn-secondary:focus-visible { outline: none; box-shadow: var(--shadow-focus); }
.btn-secondary.btn-full      { width: 100%; }

.btn-danger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-1);
  background-color: var(--color-danger);
  color: #fff;
  padding: 12px 20px;
  border-radius: var(--radius-md);
  font-size: 16px;
  font-weight: 600;
  font-family: inherit;
  border: none;
  cursor: pointer;
  transition: background-color 0.12s cubic-bezier(0.4,0,0.2,1),
              transform 0.06s cubic-bezier(0.4,0,0.2,1);
  text-decoration: none;
  white-space: nowrap;
  min-height: 44px;
}
.btn-danger:hover         { background-color: #C53030; }
.btn-danger:active        { transform: scale(0.97); }
.btn-danger:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(229,62,62,0.25); }

/* Icon button — 36×36 circle */
.btn-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px; height: 36px;
  border-radius: var(--radius-full);
  background: transparent;
  border: none;
  cursor: pointer;
  color: var(--color-text-secondary);
  transition: background-color 0.1s, color 0.1s;
  flex-shrink: 0;
}
.btn-icon:hover         { background: var(--color-canvas); color: var(--color-text-primary); }
.btn-icon:focus-visible { outline: none; box-shadow: var(--shadow-focus); }


/* ─────────────────────────────────────────────────────────────────
   5. Input Fields
   ───────────────────────────────────────────────────────────────── */
.input-field {
  width: 100%;
  height: 44px;
  padding: 0 12px;
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-md);
  font-size: 16px;
  font-family: inherit;
  color: var(--color-text-primary);
  background-color: var(--color-surface);
  transition: border-color 0.1s cubic-bezier(0.4,0,0.2,1),
              box-shadow  0.1s cubic-bezier(0.4,0,0.2,1);
  box-sizing: border-box;
  appearance: none;
  -webkit-appearance: none;
}
.input-field::placeholder { color: var(--color-text-muted); }
.input-field:focus {
  outline: none;
  border-color: var(--color-brand-primary);
  box-shadow: var(--shadow-focus);
}
.input-error {
  border-color: var(--color-danger) !important;
  background: var(--color-danger-soft);
}
.input-error:focus {
  box-shadow: 0 0 0 3px rgba(229,62,62,0.18);
}
.input-field.input-error              { border-color: var(--color-danger); }
.input-field.input-error:focus        { box-shadow: 0 0 0 3px rgba(229,62,62,0.2); }
.input-field.input-success            { border-color: var(--color-success); }

select.input-field {
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23A0AEC0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  padding-right: 36px;
}
textarea.input-field {
  height: auto;
  min-height: 80px;
  padding: 10px 12px;
  resize: vertical;
}

/* Inline error message (height-expands in) */
.field-error {
  font-size: 14px;
  color: var(--color-danger);
  margin-top: var(--space-1);
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition: max-height 0.2s cubic-bezier(0.4,0,0.2,1),
              opacity    0.2s cubic-bezier(0.4,0,0.2,1);
}
.field-error.visible { max-height: 48px; opacity: 1; }


/* ─────────────────────────────────────────────────────────────────
   6. Cards
   ───────────────────────────────────────────────────────────────── */
.card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  box-shadow: var(--shadow-sm);
}

/* Borderless variant — shadow only */
.card-elevated {
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  box-shadow: var(--shadow-sm);
  border: none;
}

.card-tappable {
  cursor: pointer;
  transition: box-shadow 0.18s var(--ease-out), transform 0.18s var(--ease-out);
}
.card-tappable:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

/* Stat card (dashboard metrics) */
.stat-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 14px;
  box-shadow: var(--shadow-sm);
  position: relative;
  overflow: hidden;
  transition: box-shadow 0.18s var(--ease-out), transform 0.18s var(--ease-out);
}
.stat-card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-1px);
}
/* Coloured top accent line */
.stat-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  background: var(--stat-accent, var(--color-brand-primary));
  opacity: 0.8;
}
.stat-card-label {
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-text-muted);
  margin-bottom: var(--space-1);
  padding-right: 44px;
  line-height: 1;
}
.stat-card-value {
  font-size: 22px;
  font-weight: 700;
  color: var(--color-text-primary);
  line-height: 1.2;
  margin-bottom: var(--space-1);
  padding-right: 44px;
}
.stat-card-sub        { font-size: 11px; font-weight: 400; color: var(--color-text-muted); padding-right: 44px; display: flex; align-items: center; gap: 2px; }
.stat-card-sub.up     { color: var(--color-success); }
.stat-card-sub.down   { color: var(--color-danger); }
.stat-card-icon {
  position: absolute;
  top: var(--space-3); right: var(--space-3);
  width: 36px; height: 36px;
  border-radius: var(--radius-full);
  display: flex; align-items: center; justify-content: center;
}
.stat-card-icon svg             { width: 16px; height: 16px; }
.stat-card-icon.icon-success    { background: var(--color-success-soft); color: var(--color-success); }
.stat-card-icon.icon-info       { background: var(--color-info-soft);    color: var(--color-info); }
.stat-card-icon.icon-warning    { background: var(--color-warning-soft); color: var(--color-warning); }
.stat-card-icon.icon-danger     { background: var(--color-danger-soft);  color: var(--color-danger); }
.stat-card-icon i               { font-size: 0.875rem; }


/* ─────────────────────────────────────────────────────────────────
   20. Dashboard stat grid — always 3 columns (never stacks)
   ───────────────────────────────────────────────────────────────── */
.dash-stat-grid {
  display: flex;
  gap: var(--space-3);
  margin-bottom: var(--space-5);
}
.dash-stat-grid .stat-card { flex: 1; min-width: 0; }
@media (max-width: 359px) {
  .dash-stat-grid .stat-card { padding: 10px; }
}

/* ─────────────────────────────────────────────────────────────────
   28. Filter chips (products, stock)
   ───────────────────────────────────────────────────────────────── */
.filter-chips {
  display: flex;
  gap: var(--space-2);
  overflow-x: auto;
  padding-bottom: 2px;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.filter-chips::-webkit-scrollbar { display: none; }

.filter-chip {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  padding: 6px 12px;
  border-radius: var(--radius-full);
  font-size: 12px;
  font-weight: 500;
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  color: var(--color-text-secondary);
  cursor: pointer;
  white-space: nowrap;
  text-decoration: none;
  transition: border-color 0.12s, background 0.12s, color 0.12s;
  font-family: inherit;
}
.filter-chip:hover { border-color: var(--color-brand-primary); }
.filter-chip.active {
  background: var(--color-brand-primary);
  color: #fff;
  border-color: var(--color-brand-primary);
}

/* ─────────────────────────────────────────────────────────────────
   29. Status tabs (sales list)
   ───────────────────────────────────────────────────────────────── */
.status-tabs {
  display: flex;
  overflow-x: auto;
  border-bottom: 1px solid var(--color-border);
  scrollbar-width: none;
  -ms-overflow-style: none;
  margin-bottom: var(--space-4);
}
.status-tabs::-webkit-scrollbar { display: none; }

.status-tab {
  flex-shrink: 0;
  padding: 10px 16px;
  font-size: 13px;
  font-weight: 500;
  color: var(--color-text-secondary);
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  cursor: pointer;
  white-space: nowrap;
  font-family: inherit;
  text-decoration: none;
  display: inline-block;
  transition: color 0.18s, border-color 0.18s;
  margin-bottom: -1px;
}
.status-tab:hover  { color: var(--color-text-primary); }
.status-tab.active { color: var(--color-brand-primary); border-bottom-color: var(--color-brand-primary); }

/* ─────────────────────────────────────────────────────────────────
   30. Dashboard greeting bar
   ───────────────────────────────────────────────────────────────── */
.dash-greeting {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-4);
}
.dash-greeting h1 {
  font-size: 18px;
  font-weight: 600;
  color: var(--color-text-primary);
  margin: 0 0 2px;
}
.dash-greeting p {
  font-size: 13px;
  color: var(--color-text-secondary);
  margin: 0;
}
.dash-low-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: var(--color-danger-soft);
  color: var(--color-danger);
  font-size: 12px;
  font-weight: 600;
  padding: 6px 12px;
  border-radius: var(--radius-full);
  border: 1px solid rgba(229,62,62,0.25);
  text-decoration: none;
  white-space: nowrap;
  transition: border-color 0.12s;
}
.dash-low-badge:hover { border-color: var(--color-danger); }

/* ─────────────────────────────────────────────────────────────────
   31. Dashboard two-column desktop layout
   ───────────────────────────────────────────────────────────────── */
.dash-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
}
@media (min-width: 768px) {
  .dash-grid { grid-template-columns: 3fr 2fr; }
}

/* ─────────────────────────────────────────────────────────────────
   32. Stock summary strip
   ───────────────────────────────────────────────────────────────── */
.stock-summary {
  display: flex;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
  flex-wrap: wrap;
}
.stock-summary-pill {
  display: inline-flex;
  align-items: center;
  padding: 6px 12px;
  border-radius: var(--radius-full);
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}
.stock-summary-pill.out     { background: var(--color-danger-soft);  color: var(--color-danger); }
.stock-summary-pill.low     { background: var(--color-warning-soft); color: var(--color-warning); }
.stock-summary-pill.healthy { background: var(--color-success-soft); color: var(--color-success); }

/* ─────────────────────────────────────────────────────────────────
   33. Stock section headers
   ───────────────────────────────────────────────────────────────── */
.sk-section-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border-bottom: 1px solid var(--color-border);
}
.sk-section-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
.sk-section-label {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.sk-section-header.out-header  { background: var(--color-danger-soft); }
.sk-section-header.low-header  { background: var(--color-warning-soft); }
.sk-section-header.in-header   { background: var(--color-success-soft); cursor: pointer; }
.sk-section-header.out-header .sk-section-label { color: var(--color-danger); }
.sk-section-header.low-header .sk-section-label { color: var(--color-warning); }
.sk-section-header.in-header  .sk-section-label { color: var(--color-success); }


/* ─────────────────────────────────────────────────────────────────
   21. List card shell (sale rows, product rows)
   ───────────────────────────────────────────────────────────────── */
.list-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}

.list-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-4);
  border-bottom: 1px solid var(--color-border);
}
.list-card-title {
  font-size: 17px;
  font-weight: 600;
  color: var(--color-text-primary);
  margin: 0;
}
.list-card-viewall {
  font-size: 14px;
  font-weight: 500;
  color: var(--color-brand-primary);
  text-decoration: none;
}
.list-card-viewall:hover { text-decoration: underline; }


/* ─────────────────────────────────────────────────────────────────
   22a. Sales table (desktop)
   ───────────────────────────────────────────────────────────────── */

/* ─────────────────────────────────────────────────────────────────
   22. Sale rows  .sl-row
   ───────────────────────────────────────────────────────────────── */
.sl-row {
  display: flex;
  align-items: center;
  padding: 10px var(--space-4);
  border-bottom: 1px solid var(--color-border);
  text-decoration: none;
  color: inherit;
  gap: var(--space-3);
  transition: background-color 0.1s;
  min-height: 52px;
}
.sl-row:last-child  { border-bottom: none; }
.sl-row:hover       { background: var(--color-canvas); }

.sl-row-main {
  flex: 1;
  min-width: 0;
}
.sl-row-customer {
  font-size: 14px;
  font-weight: 600;
  color: var(--color-text-primary);
  margin: 0 0 3px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sl-row-meta {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
}
.sl-row-time {
  font-size: 11px;
  color: var(--color-text-muted);
}
.sl-row-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--space-1);
  flex-shrink: 0;
}
.sl-row-amount {
  font-size: 14px;
  font-weight: 700;
  color: var(--color-text-primary);
  white-space: nowrap;
}


/* ─────────────────────────────────────────────────────────────────
   23. Product rows  .pr-row
   ───────────────────────────────────────────────────────────────── */
.pr-row {
  display: flex;
  align-items: center;
  padding: 12px var(--space-4);
  border-bottom: 1px solid var(--color-border);
  gap: var(--space-3);
  transition: background-color 0.1s;
  min-height: 72px;
}
.pr-row:last-child { border-bottom: none; }
.pr-row:hover      { background: var(--color-canvas); }

.pr-thumb-img {
  width: 48px; height: 48px;
  border-radius: var(--radius-sm);
  object-fit: cover;
  flex-shrink: 0;
}
.pr-thumb-placeholder {
  width: 48px; height: 48px;
  border-radius: var(--radius-sm);
  background: var(--color-canvas);
  border: 1px solid var(--color-border);
  display: flex; align-items: center; justify-content: center;
  color: var(--color-text-muted);
  flex-shrink: 0;
  font-size: 1.375rem;
}

.pr-info {
  flex: 1;
  min-width: 0;
}
.pr-name {
  font-size: 16px;
  font-weight: 600;
  color: var(--color-text-primary);
  margin: 0 0 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pr-sku {
  font-size: 12px;
  color: var(--color-text-muted);
  font-family: inherit;
  margin: 0;
}
.pr-category {
  font-size: 14px;
  color: var(--color-text-secondary);
  margin: 0;
}

.pr-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
  flex-shrink: 0;
}
.pr-price {
  font-size: 16px;
  font-weight: 600;
  color: var(--color-text-primary);
  margin: 0;
  white-space: nowrap;
}
.pr-actions {
  display: flex;
  gap: 2px;
  flex-shrink: 0;
}


/* ─────────────────────────────────────────────────────────────────
   24. Empty states
   ───────────────────────────────────────────────────────────────── */
.list-empty {
  padding: var(--space-8) var(--space-6);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
}
.list-empty-icon {
  width: 48px; height: 48px;
  border-radius: var(--radius-md);
  background: var(--color-canvas);
  border: 1px solid var(--color-border);
  display: flex; align-items: center; justify-content: center;
  color: var(--color-text-muted);
  font-size: 1.5rem;
  margin-bottom: var(--space-1);
}
.list-empty-title {
  font-size: 17px;
  font-weight: 600;
  color: var(--color-text-primary);
  margin: 0;
}
.list-empty-sub {
  font-size: 14px;
  color: var(--color-text-muted);
  margin: 0;
}


/* ─────────────────────────────────────────────────────────────────
   25. Stock List Rows
   ───────────────────────────────────────────────────────────────── */

.sk-row {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-4);
  border-bottom: 1px solid var(--color-border);
}
.sk-row:last-child { border-bottom: none; }

.sk-row-info {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  flex: 1;
  min-width: 0;
}

.sk-row-text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.sk-threshold {
  font-size: 12px;
  color: var(--color-text-muted);
  margin: 0;
}

/* Stock bar */
.sk-bar-wrap {
  height: 4px;
  background: var(--color-border);
  border-radius: var(--radius-full);
  overflow: hidden;
  margin-top: var(--space-2);
}
.sk-bar {
  height: 100%;
  border-radius: var(--radius-full);
  transition: width 0.3s ease;
}
.sk-bar--in  { background: var(--color-success); }
.sk-bar--low { background: var(--color-warning); }
.sk-bar--out { background: var(--color-danger);  width: 4px !important; }

/* Right column */
.sk-row-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--space-2);
  flex-shrink: 0;
  min-width: 80px;
}

.sk-qty {
  font-size: 28px;
  font-weight: 700;
  line-height: 1;
  margin: 0;
}
.sk-qty--in  { color: var(--color-success); }
.sk-qty--low { color: var(--color-warning); }
.sk-qty--out { color: var(--color-danger);  }


/* ─────────────────────────────────────────────────────────────────
   26. Sale Products Grid
   ───────────────────────────────────────────────────────────────── */

/* Mobile: full-width single column, horizontal card */
.sp-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-3);
}

.sp-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: row;   /* image left, content right */
  transition: box-shadow 0.15s;
}
.sp-card:hover { box-shadow: var(--shadow-md); }
.sp-card--out  { opacity: 0.65; }

.sp-card-img {
  width: 96px;
  flex-shrink: 0;
  overflow: hidden;
}
.sp-card-img img {
  width: 100%; height: 100%;
  object-fit: cover;
}
.sp-card-img--placeholder {
  background: var(--color-canvas);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-muted);
  font-size: 1.75rem;
  height: 100%;
}

.sp-card-body {
  padding: var(--space-3);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  flex: 1;
  min-width: 0;
}

.sp-card-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--color-text-primary);
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sp-card-price {
  font-size: 17px;
  font-weight: 700;
  color: var(--color-brand-primary);
  margin: 0;
}

/* Desktop: 3-column vertical cards */
@media (min-width: 1200px) {
  .sp-grid {
    grid-template-columns: repeat(3, 1fr);
  }
  .sp-card {
    flex-direction: column;
  }
  .sp-card-img {
    width: 100%;
    height: 100px;
  }
}

/* Compact stepper for sale cards */
.sp-stepper {
  display: flex;
  align-items: center;
  gap: var(--space-1);
}
.sp-stepper-btn {
  width: 32px; height: 32px;
  border-radius: var(--radius-full);
  border: 1.5px solid var(--color-border);
  background: var(--color-surface);
  display: flex; align-items: center; justify-content: center;
  font-size: 16px;
  color: var(--color-text-primary);
  cursor: pointer;
  flex-shrink: 0;
  transition: background-color 0.1s;
  user-select: none;
}
.sp-stepper-btn:hover              { background: var(--color-canvas); }
.sp-stepper-btn:disabled,
.sp-stepper-btn[disabled]          { opacity: 0.35; cursor: not-allowed; }
.sp-stepper-input {
  flex: 1;
  min-width: 0;
  height: 32px;
  text-align: center;
  font-size: 16px;
  font-weight: 700;
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-sm);
  color: var(--color-text-primary);
  background: var(--color-surface);
  font-family: inherit;
}
.sp-stepper-input:focus {
  outline: none;
  border-color: var(--color-brand-primary);
  box-shadow: var(--shadow-focus);
}
.sp-stepper-input::-webkit-inner-spin-button,
.sp-stepper-input::-webkit-outer-spin-button { -webkit-appearance: none; }


/* ─────────────────────────────────────────────────────────────────
   27. Utility
   ───────────────────────────────────────────────────────────────── */
.text-danger  { color: var(--color-danger) !important; }
.text-success { color: var(--color-success) !important; }
.text-warning { color: var(--color-warning) !important; }
.text-muted   { color: var(--color-text-muted) !important; }


/* ─────────────────────────────────────────────────────────────────
   7. Badges
   ───────────────────────────────────────────────────────────────── */

/* Base — shared by all badge variants */
.badge-in, .badge-low, .badge-out,
.badge-retail, .badge-wholesale,
.badge-draft, .badge-pending, .badge-confirmed,
.badge-paid, .badge-unpaid, .badge-fulfilled, .badge-cancelled {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: var(--radius-full);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  white-space: nowrap;
  line-height: 1.4;
}

/* Stock state */
.badge-in  { background: var(--color-success-soft); color: var(--color-success); }
.badge-low { background: var(--color-warning-soft); color: var(--color-warning); }
.badge-out { background: var(--color-danger-soft);  color: var(--color-danger);  }

/* Sale type */
.badge-retail    { background: var(--color-brand-soft); color: var(--color-brand-primary); }
.badge-wholesale { background: var(--color-brand-amber-soft); color: var(--color-brand-amber); }

/* Order / payment status */
.badge-draft     { background: var(--color-canvas);       color: var(--color-text-muted); }
.badge-pending   { background: var(--color-warning-soft); color: var(--color-warning); }
.badge-confirmed { background: var(--color-info-soft);    color: var(--color-info); }
.badge-paid      { background: var(--color-success-soft); color: var(--color-success); }
.badge-unpaid    { background: var(--color-warning-soft); color: var(--color-warning); }
.badge-fulfilled { background: #F0FFF4;                   color: #276749; }
.badge-cancelled { background: var(--color-danger-soft);  color: #C53030; }


/* ─────────────────────────────────────────────────────────────────
   8. Modals
   ───────────────────────────────────────────────────────────────── */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.4);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  z-index: 9999;
}
@media (min-width: 640px) {
  .modal-overlay { align-items: center; padding: var(--space-4); }
}

.modal-card {
  background: var(--color-surface);
  border-radius: var(--radius-xl) var(--radius-xl) 0 0;
  width: 100%;
  max-width: 480px;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: var(--shadow-lg);
  display: flex;
  flex-direction: column;
}
@media (min-width: 640px) {
  .modal-card { border-radius: var(--radius-lg); }
}

.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-5) var(--space-4);
  border-bottom: 1px solid var(--color-border);
  flex-shrink: 0;
  position: sticky;
  top: 0;
  background: var(--color-surface);
  z-index: 1;
}
.modal-header h2 { font-size: 20px; font-weight: 600; color: var(--color-text-primary); margin: 0; }

.modal-close {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--color-text-muted);
  padding: var(--space-1);
  border-radius: var(--radius-sm);
  display: flex; align-items: center; justify-content: center;
  width: 32px; height: 32px;
  transition: background-color 0.1s, color 0.1s;
}
.modal-close:hover { background: var(--color-canvas); color: var(--color-text-primary); }

.modal-body {
  padding: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  flex: 1;
  overflow-y: auto;
}

.modal-footer {
  display: flex;
  gap: var(--space-3);
  padding: var(--space-4);
  border-top: 1px solid var(--color-border);
  flex-shrink: 0;
  position: sticky;
  bottom: 0;
  background: var(--color-surface);
  z-index: 1;
}


/* ─────────────────────────────────────────────────────────────────
   9. Toasts
   ───────────────────────────────────────────────────────────────── */
.shelfy-toast-wrap {
  position: fixed;
  bottom: calc(5rem + var(--space-4));
  left: 50%;
  transform: translateX(-50%);
  z-index: 99999;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  width: max-content;
  max-width: min(320px, calc(100vw - 2rem));
  pointer-events: none;
}
@media (min-width: 1200px) {
  .shelfy-toast-wrap {
    bottom: auto;
    top: var(--space-4);
    right: var(--space-4);
    left: auto;
    transform: none;
  }
}

.shelfy-toast {
  padding: 12px 16px;
  border-radius: var(--radius-md);
  font-size: 14px;
  font-weight: 500;
  background: var(--color-text-primary);
  color: #fff;
  box-shadow: var(--shadow-lg);
  border-left: 3px solid transparent;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  pointer-events: auto;
}
.shelfy-toast.success { border-left-color: var(--color-success); }
.shelfy-toast.error   { border-left-color: var(--color-danger); }
.shelfy-toast.warning { border-left-color: var(--color-warning); }


/* ─────────────────────────────────────────────────────────────────
   10. Alert Blocks (dashboard — persistent until condition resolves)
   ───────────────────────────────────────────────────────────────── */
.alert-block {
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  border: 1px solid transparent;
}
.alert-block-header {
  font-size: 14px;
  font-weight: 600;
  margin-bottom: var(--space-3);
  display: flex;
  align-items: center;
  gap: var(--space-2);
}
.alert-block-chips {
  display: flex;
  gap: var(--space-2);
  overflow-x: auto;
  padding-bottom: 2px;
}
.alert-chip {
  flex-shrink: 0;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  padding: 5px 12px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
  text-decoration: none;
  color: var(--color-text-primary);
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  transition: box-shadow 0.1s;
}
.alert-chip:hover              { box-shadow: var(--shadow-sm); }
.alert-chip .qty               { font-weight: 700; }
.alert-chip .qty.out           { color: var(--color-danger); }
.alert-chip .qty.low           { color: var(--color-warning); }

.alert-block.danger {
  background: var(--color-danger-soft);
  border-color: rgba(229,62,62,0.2);
}
.alert-block.danger .alert-block-header { color: var(--color-danger); }

.alert-block.warning {
  background: var(--color-warning-soft);
  border-color: rgba(214,158,46,0.2);
}
.alert-block.warning .alert-block-header { color: var(--color-warning); }


/* ─────────────────────────────────────────────────────────────────
   11. Skeleton Loaders
   ───────────────────────────────────────────────────────────────── */
.skeleton {
  background: linear-gradient(90deg, #E2E8F0 25%, #EDF2F7 50%, #E2E8F0 75%);
  background-size: 800px 100%;
  animation: shelfy-shimmer 1.4s linear infinite;
  border-radius: var(--radius-sm);
}

.skeleton-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--color-border);
}
.skeleton-avatar {
  width: 48px; height: 48px;
  border-radius: var(--radius-sm);
  flex-shrink: 0;
}
.skeleton-lines {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.skeleton-line-a { height: 14px; width: 60%; border-radius: var(--radius-sm); }
.skeleton-line-b { height: 12px; width: 40%; border-radius: var(--radius-sm); }

/* Convenience: extend skeleton shimmer to any element */
.skeleton-avatar,
.skeleton-line-a,
.skeleton-line-b {
  background: linear-gradient(90deg, #E2E8F0 25%, #EDF2F7 50%, #E2E8F0 75%);
  background-size: 800px 100%;
  animation: shelfy-shimmer 1.4s linear infinite;
}


/* ─────────────────────────────────────────────────────────────────
   12. Form Sections
   ───────────────────────────────────────────────────────────────── */
.form-section  { display: flex; flex-direction: column; gap: var(--space-2); }

.section-label {
  font-size: 14px;
  font-weight: 500;
  color: var(--color-text-secondary);
}

/* Caps variant — table column headers, modal sub-headings */
.section-label-caps {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-text-muted);
}


/* ─────────────────────────────────────────────────────────────────
   13. Toggle Groups
   ───────────────────────────────────────────────────────────────── */
.toggle-group {
  display: grid;
  gap: var(--space-1);
  background: var(--color-canvas);
  border-radius: var(--radius-md);
  padding: var(--space-1);
  border: 1px solid var(--color-border);
}
.toggle-group.cols-2 { grid-template-columns: 1fr 1fr; }
.toggle-group.cols-3 { grid-template-columns: 1fr 1fr 1fr; }
.toggle-group.cols-4 { grid-template-columns: 1fr 1fr 1fr 1fr; }

.toggle-btn {
  height: 36px;
  padding: 0 12px;
  border-radius: var(--radius-sm);
  font-size: 14px;
  font-weight: 500;
  font-family: inherit;
  text-align: center;
  cursor: pointer;
  color: var(--color-text-secondary);
  background: transparent;
  border: none;
  transition: background-color 0.18s cubic-bezier(0.4,0,0.2,1),
              color           0.18s cubic-bezier(0.4,0,0.2,1),
              box-shadow      0.18s cubic-bezier(0.4,0,0.2,1);
}
.toggle-btn.active {
  background: var(--color-surface);
  color: var(--color-text-primary);
  font-weight: 600;
  box-shadow: var(--shadow-sm);
}

/* Sale-type specific active states */
.toggle-btn.active.toggle-retail {
  background: var(--color-brand-primary);
  color: #fff;
  box-shadow: 0 2px 8px rgba(13,148,136,0.35);
}
.toggle-btn.active.toggle-wholesale {
  background: var(--color-brand-amber);
  color: #fff;
  box-shadow: 0 2px 8px rgba(217,119,6,0.35);
}


/* ─────────────────────────────────────────────────────────────────
   14. Customer Picker
   ───────────────────────────────────────────────────────────────── */
.customer-picker-wrap { position: relative; }

.customer-results {
  position: absolute;
  left: 0; right: 0;
  top: calc(100% + 4px);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  overflow: hidden;
  max-height: 220px;
  overflow-y: auto;
  z-index: 50;
}

.customer-result-btn {
  display: block;
  width: 100%;
  text-align: left;
  padding: 10px 12px;
  background: none;
  border: none;
  cursor: pointer;
  border-bottom: 1px solid var(--color-border);
  min-height: 44px;
}
.customer-result-btn:last-child { border-bottom: none; }
.customer-result-btn:hover      { background: var(--color-canvas); }
.customer-result-btn .name      { font-size: 16px; font-weight: 500; color: var(--color-text-primary); display: block; }
.customer-result-btn .whatsapp  { font-size: 14px; color: var(--color-text-muted); }

.customer-selected {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px;
  background: var(--color-brand-primary);
  border-radius: var(--radius-md);
  min-height: 44px;
  animation: shelfy-scale-in 0.16s cubic-bezier(0.4,0,0.2,1);
}
.customer-selected .name     { font-size: 16px; font-weight: 600; color: #fff; }
.customer-selected .whatsapp { font-size: 14px; color: rgba(255,255,255,0.75); }
.customer-selected .remove-btn {
  background: rgba(255,255,255,0.2);
  border: none;
  color: #fff;
  cursor: pointer;
  width: 24px; height: 24px;
  border-radius: var(--radius-full);
  display: flex; align-items: center; justify-content: center;
  font-size: 16px;
  flex-shrink: 0;
}

.customer-quick-add {
  padding: var(--space-3);
  background: var(--color-canvas);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.customer-quick-add p { font-size: 14px; color: var(--color-text-muted); margin: 0; }


/* ─────────────────────────────────────────────────────────────────
   15. Order Summary
   ───────────────────────────────────────────────────────────────── */
.order-summary {
  background: var(--color-canvas);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  border: 1px solid var(--color-border);
}
.order-summary-title {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-text-muted);
  margin-bottom: var(--space-1);
}
.order-summary-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 16px;
  color: var(--color-text-secondary);
}
.order-summary-total {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 20px;
  font-weight: 700;
  color: var(--color-text-primary);
  padding-top: var(--space-3);
  border-top: 1px solid var(--color-border);
  margin-top: var(--space-1);
}


/* ─────────────────────────────────────────────────────────────────
   16. Stock Adjust Modal
   ───────────────────────────────────────────────────────────────── */
.stock-current {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-4);
  background: var(--color-canvas);
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
}
.stock-current .label { font-size: 14px; font-weight: 600; color: var(--color-text-secondary); }
.stock-current .value { font-size: 28px; font-weight: 700; color: var(--color-text-primary); }
.stock-current .value.in  { color: var(--color-success); }
.stock-current .value.low { color: var(--color-warning); }
.stock-current .value.out { color: var(--color-danger);  }

.stock-history {
  display: flex;
  flex-direction: column;
  padding-top: var(--space-3);
  border-top: 1px solid var(--color-border);
}
.stock-history h3 {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-text-muted);
  margin: 0 0 var(--space-2);
}
.stock-movement {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-2) 0;
  border-bottom: 1px solid var(--color-border);
  font-size: 14px;
}
.stock-movement:last-child   { border-bottom: none; }
.stock-movement .delta       { font-weight: 600; }
.stock-movement .delta.add   { color: var(--color-success); }
.stock-movement .delta.sub   { color: var(--color-danger); }


/* ─────────────────────────────────────────────────────────────────
   17. Quantity Stepper
   ───────────────────────────────────────────────────────────────── */
.qty-stepper {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.qty-stepper-btn {
  width: 48px; height: 48px;
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  font-size: 20px;
  color: var(--color-text-primary);
  flex-shrink: 0;
  user-select: none;
  transition: background-color 0.1s;
  font-family: inherit;
}
.qty-stepper-btn:hover           { background: var(--color-canvas); }
.qty-stepper-btn:active          { transform: scale(0.95); }
.qty-stepper-btn:disabled,
.qty-stepper-btn[disabled]       { opacity: 0.4; cursor: not-allowed; }

.qty-stepper-input {
  width: 64px; height: 48px;
  text-align: center;
  font-size: 20px;
  font-weight: 600;
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-md);
  color: var(--color-text-primary);
  background: var(--color-surface);
  font-family: inherit;
}
.qty-stepper-input:focus {
  outline: none;
  border-color: var(--color-brand-primary);
  box-shadow: var(--shadow-focus);
}
.qty-stepper-input::-webkit-inner-spin-button,
.qty-stepper-input::-webkit-outer-spin-button { -webkit-appearance: none; }

/* Compact variant — used in cart line items */
.qty-stepper.compact .qty-stepper-btn   { width: 36px; height: 36px; font-size: 16px; }
.qty-stepper.compact .qty-stepper-input { width: 52px; height: 36px; font-size: 15px; }


/* ─────────────────────────────────────────────────────────────────
   18. Mobile Bottom Nav
   ───────────────────────────────────────────────────────────────── */
/* ── Mobile bottom nav ──────────────────────────────────────────── */
#mobile-bottom-nav {
  display: none;
  position: fixed;
  bottom: 0; left: 0; right: 0;
  background: var(--sh-sidebar-bg);
  border-top: none;
  z-index: 100;
  padding: 6px 0 calc(8px + env(safe-area-inset-bottom));
  align-items: center;
  justify-content: space-around;
  overflow: visible;
}
@media (max-width: 767px)  { #mobile-bottom-nav { display: flex; } }
@media (min-width: 768px)  { #mobile-bottom-nav { display: none !important; } }

/* Regular nav items */
#mobile-bottom-nav a {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  font-size: 11px;
  font-weight: 500;
  color: rgba(255,255,255,0.60);
  text-decoration: none;
  padding: 4px 6px;
  min-height: 44px;
  justify-content: center;
  transition: color 0.15s;
}
#mobile-bottom-nav a.active { color: #fff; font-weight: 700; }
#mobile-bottom-nav a:hover  { color: rgba(255,255,255,0.90); }
#mobile-bottom-nav a svg    { width: 22px; height: 22px; }

.fab-container {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 2;
}

.fab {
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: #fff;
  color: var(--color-brand-primary) !important;
  border: none;
  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
  cursor: pointer;
  text-decoration: none;
  transition: transform 0.12s var(--ease-out), box-shadow 0.12s var(--ease-out);
  flex-shrink: 0;
}
#mobile-bottom-nav .fab { color: var(--color-brand-primary) !important; }
.fab:hover  { transform: scale(1.06); box-shadow: 0 4px 14px rgba(0,0,0,0.22); }
.fab:active { transform: scale(0.94); }
.fab svg    { display: block; width: 22px; height: 22px; stroke-width: 2.5; }



/* ═══════════════════════════════════════════════════════════════════
   19. Responsive Table → Card transformation
   Apply .sh-table to <table> and data-label="Column" to each <td>.
   ═══════════════════════════════════════════════════════════════════ */
@media (max-width: 767px) {
  .sh-table-wrap { overflow-x: visible !important; }

  .sh-table          { display: flex !important; flex-direction: column !important; gap: 0 !important; }
  .sh-table thead    { display: none !important; }
  .sh-table tfoot    { display: none !important; }
  .sh-table tbody    { display: flex !important; flex-direction: column !important; gap: 0.75rem !important; padding: 0.75rem !important; }

  .sh-table tbody tr {
    display: block !important;
    background: #fff !important;
    border-radius: 0.875rem !important;
    box-shadow: var(--shadow-sm) !important;
    border: none !important;
    overflow: hidden !important;
  }

  .sh-table tbody td {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding: 0.525rem 1rem !important;
    border-bottom: 1px solid var(--color-border) !important;
    border-right: none !important;
    font-size: 0.9rem !important;
    text-align: left !important;
    width: 100% !important;
    box-sizing: border-box !important;
    white-space: normal !important;
  }
  .sh-table tbody td:last-child { border-bottom: none !important; }

  .sh-table tbody td::before {
    content: attr(data-label);
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-text-muted);
    flex-shrink: 0;
    min-width: 5.5rem;
    margin-right: 0.75rem;
  }

  .sh-table tbody td.sh-td-header {
    justify-content: flex-start !important;
    padding: 0.875rem 1rem !important;
    background: var(--color-canvas) !important;
    border-bottom: 1px solid var(--color-border) !important;
    gap: 0.75rem !important;
  }
  .sh-table tbody td.sh-td-header::before { content: none !important; }

  .sh-table tbody td.sh-td-actions {
    justify-content: flex-end !important;
    flex-wrap: wrap !important;
    gap: 0.375rem !important;
    padding: 0.625rem 1rem !important;
    background: var(--color-canvas) !important;
    border-top: 1px solid var(--color-border) !important;
    border-bottom: none !important;
  }
  .sh-table tbody td.sh-td-actions::before { content: none !important; }
}