/* ==========================================================================
   Qubic System — Distributors & Stock Management (shared styles)
   portal.php (prefix: qsp-) — distributor login + stock editor
   admin.php  (prefix: qsa-) — Qubic System admin dashboard
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Rajdhani:wght@400;500;600;700&family=Source+Sans+3:wght@400;500;600;700&display=swap');

/* ==========================================================================
   Design tokens — single shared variable set for portal + admin.
   Legacy --qsp-*, --qsa-* aliases kept so existing CSS keeps working.
   ========================================================================== */
:root {
  /* Brand */
  --qs-primary:        #C20019;
  --qs-primary-hover:  #9B0014;
  --qs-primary-alpha:  rgba(194, 0, 25, 0.1);

  /* Text */
  --qs-text:           #1a1a1a;
  --qs-text-heading:   #111;
  --qs-text-secondary: #666;
  --qs-text-muted:     #888;
  --qs-text-on-primary:#fff;

  /* Surfaces */
  --qs-bg:             #fff;
  --qs-bg-alt:         #fafafa;
  --qs-bg-page:        #f4f4f6;
  --qs-bg-zebra:       #f8f8f8;
  --qs-bg-hover:       #f0f0f0;
  --qs-bg-hover-accent:#fff3f3;

  /* Borders */
  --qs-border:         #e8e8e8;
  --qs-border-light:   #eee;

  /* Shadows */
  --qs-shadow:         rgba(0, 0, 0, 0.3);
  --qs-shadow-sm:      0 1px 2px rgba(0, 0, 0, 0.04);
  --qs-shadow-md:      0 2px 8px rgba(0, 0, 0, 0.08);
  --qs-shadow-lg:      0 8px 32px rgba(0, 0, 0, 0.12);

  /* Radii */
  --qs-radius-sm:      4px;
  --qs-radius-md:      6px;
  --qs-radius-lg:      8px;
  --qs-radius-xl:      12px;
  --qs-radius-pill:    100px;

  /* Motion */
  --qs-transition:        0.15s ease;
  --qs-transition-smooth: 0.25s ease;

  /* Typography */
  --qs-font-body:    'Source Sans 3', sans-serif;
  --qs-font-heading: 'Rajdhani', sans-serif;

  /* Misc states */
  --qs-dirty:   #6366F1;
  --qs-success: #2E7D32;


  --qsp-primary: var(--qs-primary);
  --qsp-primary-hover: var(--qs-primary-hover);
  --qsp-primary-alpha: var(--qs-primary-alpha);
  --qsp-text: var(--qs-text);
  --qsp-text-heading: var(--qs-text-heading);
  --qsp-text-secondary: var(--qs-text-secondary);
  --qsp-text-muted: var(--qs-text-muted);
  --qsp-bg: var(--qs-bg);
  --qsp-bg-alt: var(--qs-bg-alt);
  --qsp-bg-page: var(--qs-bg-page);
  --qsp-bg-zebra: var(--qs-bg-zebra);
  --qsp-bg-hover: var(--qs-bg-hover);
  --qsp-border: var(--qs-border);
  --qsp-border-light: var(--qs-border-light);
  --qsp-shadow-sm: var(--qs-shadow-sm);
  --qsp-shadow-md: var(--qs-shadow-md);
  --qsp-shadow-lg: var(--qs-shadow-lg);
  --qsp-radius-sm: var(--qs-radius-sm);
  --qsp-radius-md: var(--qs-radius-md);
  --qsp-radius-lg: var(--qs-radius-lg);
  --qsp-radius-xl: var(--qs-radius-xl);
  --qsp-radius-pill: var(--qs-radius-pill);
  --qsp-transition: var(--qs-transition);
  --qsp-font-body: var(--qs-font-body);
  --qsp-font-heading: var(--qs-font-heading);
  --qsp-dirty: var(--qs-dirty);
  --qsp-success: var(--qs-success);

  --qsa-primary: var(--qs-primary);
  --qsa-primary-hover: var(--qs-primary-hover);
  --qsa-primary-alpha: var(--qs-primary-alpha);
  --qsa-text: var(--qs-text);
  --qsa-text-heading: var(--qs-text-heading);
  --qsa-text-secondary: var(--qs-text-secondary);
  --qsa-text-muted: var(--qs-text-muted);
  --qsa-bg: var(--qs-bg);
  --qsa-bg-alt: var(--qs-bg-alt);
  --qsa-bg-page: var(--qs-bg-page);
  --qsa-bg-zebra: var(--qs-bg-zebra);
  --qsa-bg-hover: var(--qs-bg-hover);
  --qsa-border: var(--qs-border);
  --qsa-border-light: var(--qs-border-light);
  --qsa-shadow-sm: var(--qs-shadow-sm);
  --qsa-shadow-md: var(--qs-shadow-md);
  --qsa-radius-sm: var(--qs-radius-sm);
  --qsa-radius-md: var(--qs-radius-md);
  --qsa-radius-lg: var(--qs-radius-lg);
  --qsa-radius-xl: var(--qs-radius-xl);
  --qsa-radius-pill: var(--qs-radius-pill);
  --qsa-transition: var(--qs-transition);
  --qsa-font-body: var(--qs-font-body);
  --qsa-font-heading: var(--qs-font-heading);
}

/* ==========================================================================
   Scoped resets — apply ONLY within our portal/admin roots so this CSS can be
   safely embedded on qubicsystem.com without leaking globally.
   Roots: .qsp-app (distributor portal), .qsa-app (admin)
   ========================================================================== */
.qsp-app, .qsp-app *, .qsp-app *::before, .qsp-app *::after,
.qsa-app, .qsa-app *, .qsa-app *::before, .qsa-app *::after {
  box-sizing: border-box;
}
.qsp-app, .qsp-app input, .qsp-app select, .qsp-app textarea, .qsp-app button,
.qsa-app, .qsa-app input, .qsa-app select, .qsa-app textarea, .qsa-app button {
  font-family: 'Source Sans 3', sans-serif;
}
.qsp-app h1, .qsp-app h2, .qsp-app h3, .qsp-app h4, .qsp-app h5, .qsp-app h6,
.qsa-app h1, .qsa-app h2, .qsa-app h3, .qsa-app h4, .qsa-app h5, .qsa-app h6 {
  font-family: 'Rajdhani', sans-serif;
}
/* Root containers: establish page context for admin/portal pages */
.qsp-app, .qsa-app {
  min-height: 100vh; color: #1a1a1a; background: #f4f4f6;
}
.qsa-app { display: flex; flex-direction: column; }
.qsp-app .qsa-app { background: transparent; }

/* ==========================================================================
   02. DISTRIBUTOR PORTAL (prefix: qsp-)
   ========================================================================== */
/* :root with --qsp-* aliases is defined at the top of this file */

/* ================= LOGIN VIEW ================= */
.qsp-app.qsp-view-login .qsp-panel { display: none; }
.qsp-app.qsp-view-panel .qsp-login { display: none; }

.qsp-login {
  min-height: 100vh; display: flex; align-items: center; justify-content: center;
  padding: 24px; background: linear-gradient(135deg, #fafafa 0%, #f0f0f2 100%);
}
.qsp-login-card {
  width: 100%; max-width: 420px; background: var(--qsp-bg);
  border-radius: var(--qsp-radius-xl); padding: 40px 36px;
  box-shadow: var(--qsp-shadow-lg); border: 1px solid var(--qsp-border-light);
}
.qsp-login-brand {
  display: flex; flex-direction: column; align-items: center; margin-bottom: 28px;
}
/* QS pin - same style as on the map */
.qsp-pin-wrap {
  position: relative; width: 48px; height: 64px; margin-bottom: 12px;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.25));
}
.qsp-pin { position: absolute; inset: 0; fill: var(--qsp-primary); }
.qsp-pin-logo {
  position: absolute; top: 14px; left: 50%; transform: translateX(-50%);
  width: 22px; height: 22px; object-fit: contain; z-index: 2;
}
.qsp-login-title {
  font-family: var(--qsp-font-heading); font-size: 24px; font-weight: 700;
  letter-spacing: 1.5px; text-transform: uppercase; color: var(--qsp-text-heading);
  margin: 0 0 4px;
}
.qsp-login-subtitle {
  font-size: 13px; color: var(--qsp-text-muted); letter-spacing: 0.5px;
  text-transform: uppercase; font-weight: 600;
}

.qsp-form-group { margin-bottom: 18px; }
.qsp-form-label {
  display: block; font-size: 12px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 1px; color: var(--qsp-text-secondary); margin-bottom: 6px;
}
/* .qsp-form-input is defined in the shared form-inputs section above */
.qsp-form-row {
  display: flex; justify-content: space-between; align-items: center;
  margin: 4px 0 22px; font-size: 13px;
}
.qsp-form-remember { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; color: var(--qsp-text-secondary); }
.qsp-form-remember input { margin: 0; cursor: pointer; accent-color: var(--qsp-primary); }
.qsp-form-forgot { color: var(--qsp-primary); text-decoration: none; font-weight: 600; }
.qsp-form-forgot:hover { text-decoration: underline; }

/* Sign-in button on login view: full-width + larger typography */
.qsp-login .qsp-btn-primary {
  width: 100%; padding: 13px 20px;
  font-size: 15px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase;
}

.qsp-login-hint {
  margin-top: 16px; padding: 10px 12px; font-size: 12px; color: var(--qsp-text-muted);
  background: var(--qsp-bg-alt); border-radius: var(--qsp-radius-sm); text-align: center;
  font-style: italic; border: 1px dashed var(--qsp-border);
}

/* ================= PANEL VIEW ================= */
.qsp-panel { min-height: 100vh; display: flex; flex-direction: column; }

.qsp-topbar {
  background: var(--qsp-bg); border-bottom: 1px solid var(--qsp-border);
  padding: 12px 24px; display: flex; align-items: center; gap: 16px;
  box-shadow: var(--qsp-shadow-sm); position: sticky; top: 0; z-index: 50;
}
.qsp-topbar-brand {
  display: flex; align-items: center; gap: 10px;
  font-family: var(--qsp-font-heading); font-size: 18px; font-weight: 700;
  letter-spacing: 1px; text-transform: uppercase; color: var(--qsp-text-heading);
}
.qsp-topbar-brand .qsp-pin-wrap { width: 24px; height: 32px; margin: 0; filter: drop-shadow(0 1px 3px rgba(0,0,0,0.35)); }
.qsp-topbar-brand .qsp-pin-logo { top: 8px; width: 11px; height: 11px; }
.qsp-topbar-center {
  flex: 1; text-align: center; font-size: 14px; color: var(--qsp-text-secondary);
}
.qsp-topbar-center strong { color: var(--qsp-text-heading); font-weight: 700; }
.qsp-topbar-logout {
  color: var(--qsp-text-secondary); font-size: 13px; font-weight: 600; text-decoration: none;
  padding: 6px 12px; border-radius: var(--qsp-radius-sm); transition: all var(--qsp-transition);
}
.qsp-topbar-logout:hover { color: var(--qsp-primary); background: var(--qsp-primary-alpha); }

/* Identity banner */
.qsp-identity-banner {
  background: linear-gradient(135deg, #1f1f1f 0%, #2b0608 100%);
  color: #fff; padding: 20px 24px; border-bottom: 3px solid var(--qsp-primary);
}
.qsp-identity-inner {
  max-width: 1100px; margin: 0 auto; display: flex; align-items: center; gap: 18px;
}
.qsp-identity-avatar {
  width: 56px; height: 56px; border-radius: 50%;
  background: var(--qsp-primary); color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--qsp-font-heading); font-size: 24px; font-weight: 700;
  letter-spacing: 1px; text-transform: uppercase; flex-shrink: 0;
  box-shadow: 0 2px 8px rgba(194, 0, 25, 0.4);
  border: 2px solid rgba(255, 255, 255, 0.15);
}
.qsp-identity-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.qsp-identity-account {
  display: flex; flex-direction: column; gap: 4px;
  padding: 10px 14px; border-left: 1px solid rgba(255,255,255,0.15);
  min-width: 220px;
}
.qsp-identity-account-row {
  display: flex; align-items: center; gap: 8px;
  font-size: 12px;
}
.qsp-identity-account-label {
  font-weight: 700; text-transform: uppercase; letter-spacing: 1px;
  color: rgba(255,255,255,0.55); min-width: 60px; font-size: 10px;
}
.qsp-identity-account-value {
  font-family: 'Courier New', monospace; font-size: 13px; font-weight: 600;
  color: #fff; background: rgba(255,255,255,0.08);
  padding: 2px 8px; border-radius: 4px;
  letter-spacing: 0.5px;
}
.qsp-identity-account-toggle {
  background: transparent; border: 1px solid rgba(255,255,255,0.25);
  color: rgba(255,255,255,0.85); font-size: 11px; font-weight: 600;
  padding: 2px 8px; border-radius: 4px; cursor: pointer;
  transition: all var(--qsp-transition);
}
.qsp-identity-account-toggle:hover {
  background: rgba(255,255,255,0.1); border-color: rgba(255,255,255,0.4); color: #fff;
}
.qsp-identity-account-hint {
  font-size: 10px; color: rgba(255,255,255,0.4);
  letter-spacing: 0.3px; margin-top: 2px;
}
@media (max-width: 720px) {
  .qsp-identity-inner { flex-direction: column; align-items: flex-start; }
  .qsp-identity-account { border-left: none; border-top: 1px solid rgba(255,255,255,0.15); padding: 10px 0 0 0; width: 100%; }
}
.qsp-identity-label {
  font-size: 10px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
}
.qsp-identity-name {
  font-family: var(--qsp-font-heading); font-size: 26px; font-weight: 700;
  letter-spacing: 0.5px; line-height: 1.15; color: #fff;
}
.qsp-identity-meta {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 13px; color: rgba(255, 255, 255, 0.75); margin-top: 2px;
}
.qsp-identity-flag {
  width: 20px; height: 14px; border-radius: 2px; object-fit: cover;
  border: 1px solid rgba(255, 255, 255, 0.2);
}
.qsp-identity-sep { color: rgba(255, 255, 255, 0.35); }
.qsp-identity-id {
  font-family: 'Source Sans 3', sans-serif; font-size: 11px;
  color: rgba(255, 255, 255, 0.5); letter-spacing: 0.3px;
}

.qsp-main {
  flex: 1; max-width: 1100px; width: 100%; margin: 0 auto; padding: 24px;
}
.qsp-main-head {
  margin-bottom: 20px;
}
/* .qsp-main-title / .qsp-main-subtitle styles defined in shared page-head section above */

.qsp-stock-table {
  background: var(--qsp-bg); border-radius: var(--qsp-radius-lg);
  border: 1px solid var(--qsp-border); overflow: hidden;
  box-shadow: var(--qsp-shadow-sm);
}
.qsp-stock-header {
  display: grid; grid-template-columns: 84px 1fr 180px 180px 80px;
  gap: 16px; padding: 12px 20px; align-items: center;
  background: var(--qsp-bg-alt); border-bottom: 1px solid var(--qsp-border);
  font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 1px; color: var(--qsp-text-muted); font-family: var(--qsp-font-heading);
}
/* sorting in 02 uses the shared .qs-sort-* classes defined alongside 03 */
.qsp-stock-row {
  display: grid; grid-template-columns: 84px 1fr 180px 180px 80px;
  gap: 16px; padding: 14px 20px; align-items: center;
  border-bottom: 1px solid var(--qsp-border-light);
  border-left: 4px solid transparent;
  background: var(--qsp-bg);
  transition: background var(--qsp-transition), border-color var(--qsp-transition);
}
.qsp-stock-row:last-child { border-bottom: none; }
.qsp-stock-row:nth-child(even) { background: var(--qsp-bg-zebra); }
/* Unsaved changes: gray background + thick left border + dirty chip */
.qsp-stock-row.qsp-dirty {
  background: #FFF5F6 !important;
  border-left: 4px solid var(--qsp-primary, #C20019);
}
/* Per-field highlight removed — row-level cue (pink bg + red bar) is enough. */
/* Per-row "Unsaved" chip is hidden — the savebar at the bottom shows the count,
   and the row already has a red left bar + pink background to flag the state. */
.qsp-dirty-chip { display: none !important; }
@keyframes qsp-dirty-pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.35; }
}
.qsp-stock-row.qsp-saved-flash { animation: qsp-flash-save 1.2s ease; }
@keyframes qsp-flash-save {
  0% { background: #E8F5E9; }
  100% { background: var(--qsp-bg); }
}

.qsp-product-img {
  width: 72px; height: 72px; border-radius: var(--qsp-radius-md);
  object-fit: cover; background: var(--qsp-bg-alt);
  border: 1px solid var(--qsp-border);
}
.qsp-product-meta { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.qsp-product-name {
  font-size: 15px; font-weight: 700; color: var(--qsp-text-heading);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.qsp-product-id {
  font-family: 'Source Sans 3', sans-serif; font-size: 12px; color: var(--qsp-text-muted);
  letter-spacing: 0.3px;
}
/* Status badge + carry icon button at the row's right edge */
.qsp-row-end {
  display: inline-flex; align-items: center; gap: 8px; justify-content: flex-end;
}
/* Don't-carry row — dimmed look so it visually steps back */
.qsp-stock-row.qsp-row-none { opacity: 0.65; }
.qsp-stock-row.qsp-row-none:hover { opacity: 1; }
.qsp-stock-row.qsp-row-none .qsp-qty-input {
  background: var(--qs-bg-alt); cursor: not-allowed;
}
/* Carry icon stays full opacity even when row is dimmed */
.qsp-stock-row.qsp-row-none .qs-btn-icon { opacity: 1.5; }

/* Quick links / Resources grid in distributor portal */
.qsp-resources-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 12px; padding: 20px;
}
.qsp-resource-tile {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 16px;
  border: 1px solid var(--qs-border); border-radius: var(--qs-radius-md);
  background: var(--qs-bg); color: var(--qs-text-heading);
  text-decoration: none; transition: all var(--qs-transition);
}
.qsp-resource-tile:hover {
  border-color: var(--qs-primary); color: var(--qs-primary);
  transform: translateY(-1px); box-shadow: var(--qs-shadow-sm);
}
.qsp-resource-tile-icon {
  width: 36px; height: 36px; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--qs-bg-alt); border-radius: var(--qs-radius-sm);
  color: var(--qs-text-secondary);
}
.qsp-resource-tile-icon svg { width: 18px; height: 18px; }
.qsp-resource-tile:hover .qsp-resource-tile-icon { color: var(--qs-primary); background: var(--qs-bg-hover-accent); }
.qsp-resource-tile-label { flex: 1; font-weight: 700; font-size: 14px; }
.qsp-resource-tile-arrow { color: var(--qs-text-muted); font-size: 14px; }
.qsp-resource-tile:hover .qsp-resource-tile-arrow { color: var(--qs-primary); }

/* Resources table icon cell in admin */
.qsa-resource-icon {
  width: 36px; height: 36px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--qs-bg-alt); border-radius: var(--qs-radius-sm);
  color: var(--qs-text-secondary);
}
.qsa-resource-icon svg { width: 18px; height: 18px; }

/* Subsection block (grouped tables on a single tab) */
.qsa-subsection { margin-bottom: 28px; }
.qsa-subsection-head {
  display: flex; align-items: flex-end; justify-content: space-between;
  margin-bottom: 12px; gap: 16px; flex-wrap: wrap;
}
.qsa-subsection-title {
  font-family: var(--qs-font-heading); font-size: 18px; font-weight: 700;
  letter-spacing: 0.5px; color: var(--qs-text-heading); margin: 0 0 2px;
}

/* Feature-flag toggle row (System tab > Public map settings) */
.qsa-setting-row {
  display: flex; align-items: flex-start; gap: 14px;
  padding: 14px 16px; margin-top: 10px;
  background: #fff; border: 1px solid var(--qs-border); border-radius: 8px;
}
.qsa-setting-text { flex: 1; min-width: 0; }
.qsa-setting-label { font-weight: 600; color: var(--qs-text-heading); margin-bottom: 2px; }
.qsa-setting-hint { font-size: 13px; color: var(--qs-text-muted); line-height: 1.4; }
.qsa-switch { position: relative; display: inline-block; width: 42px; height: 24px; flex-shrink: 0; margin-top: 2px; }
.qsa-switch input { opacity: 0; width: 0; height: 0; }
.qsa-switch-slider {
  position: absolute; inset: 0; background: #cbd5de; border-radius: 24px;
  transition: background 0.2s; cursor: pointer;
}
.qsa-switch-slider::before {
  content: ''; position: absolute; left: 3px; top: 3px; width: 18px; height: 18px;
  background: #fff; border-radius: 50%; transition: transform 0.2s;
}
.qsa-switch input:checked + .qsa-switch-slider { background: var(--qs-primary); }
.qsa-switch input:checked + .qsa-switch-slider::before { transform: translateX(18px); }
.qsa-switch input:disabled + .qsa-switch-slider { opacity: 0.6; cursor: wait; }

/* Support card in distributor portal — single CTA panel */
.qsp-support-body {
  display: flex; align-items: center; gap: 18px;
  padding: 20px; flex-wrap: wrap;
}
.qsp-support-icon {
  width: 56px; height: 56px; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--qs-primary-alpha); color: var(--qs-primary);
  border-radius: 50%;
}
.qsp-support-icon svg { width: 28px; height: 28px; }
.qsp-support-text { flex: 1; min-width: 220px; }
.qsp-support-text .qsp-contact-title { margin: 0 0 2px; }

.qsp-qty-wrap {
  display: flex; align-items: center; gap: 8px;
}
.qsp-qty-input {
  width: 80px; padding: 8px 10px; font-size: 15px; font-weight: 700;
  text-align: center; border: 1px solid var(--qsp-border);
  border-radius: var(--qsp-radius-md); background: var(--qsp-bg); color: var(--qsp-text-heading);
  font-family: var(--qsp-font-body); transition: all var(--qsp-transition);
}
.qsp-qty-input:focus { outline: none; border-color: var(--qsp-primary); box-shadow: 0 0 0 3px var(--qsp-primary-alpha); }
.qsp-qty-input:disabled {
  background: var(--qsp-bg-hover); color: var(--qsp-text-muted); cursor: not-allowed;
}
.qsp-qty-suffix { font-size: 12px; color: var(--qsp-text-muted); font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; }

/* Status badge in the portal uses the shared .qs-status-badge — variant: larger + centered */
.qsp-stock-row .qs-status-badge { padding: 7px 16px; font-size: 11px; min-width: 180px; justify-content: center; }

/* Sales contact card */
.qsp-contact-card {
  margin-top: 24px; background: var(--qsp-bg);
  border: 1px solid var(--qsp-border); border-radius: var(--qsp-radius-lg);
  box-shadow: var(--qsp-shadow-sm); overflow: hidden;
}
.qsp-contact-head {
  padding: 16px 20px; border-bottom: 1px solid var(--qsp-border-light);
  background: var(--qsp-bg-alt);
}
.qsp-contact-title {
  font-family: var(--qsp-font-heading); font-size: 18px; font-weight: 700;
  letter-spacing: 1px; text-transform: uppercase; color: var(--qsp-text-heading);
  margin: 0 0 2px;
}
.qsp-contact-subtitle { font-size: 13px; color: var(--qsp-text-secondary); }
.qsp-contact-body {
  display: flex; align-items: center; gap: 20px; padding: 20px;
  flex-wrap: wrap;
}
.qsp-contact-photo {
  width: 84px; height: 84px; border-radius: 50%; object-fit: cover;
  background: var(--qsp-bg-alt); border: 3px solid var(--qsp-primary-alpha);
  flex-shrink: 0;
}
.qsp-contact-info { flex: 1; min-width: 200px; }
.qsp-contact-name {
  font-family: var(--qsp-font-heading); font-size: 20px; font-weight: 700;
  color: var(--qsp-text-heading); margin: 0 0 2px; letter-spacing: 0.3px;
}
.qsp-contact-role {
  font-size: 12px; font-weight: 600; letter-spacing: 1px;
  text-transform: uppercase; color: var(--qsp-primary); margin-bottom: 10px;
}
.qsp-contact-links { display: flex; flex-wrap: wrap; gap: 8px; }
.qsp-contact-link {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 14px; font-size: 13px; font-weight: 600;
  border: 1px solid var(--qsp-border); border-radius: var(--qsp-radius-md);
  background: var(--qsp-bg); color: var(--qsp-text-heading);
  text-decoration: none; transition: all var(--qsp-transition);
}
.qsp-contact-link:hover { border-color: var(--qsp-primary); color: var(--qsp-primary); }
.qsp-contact-link svg { width: 14px; height: 14px; }
.qsp-contact-link.qsp-contact-link-primary {
  background: var(--qsp-primary); color: #fff; border-color: var(--qsp-primary);
}
.qsp-contact-link.qsp-contact-link-primary:hover {
  background: var(--qsp-primary-hover); color: #fff;
}

/* Save bar — in document flow directly below the stock table, so it's always
   visible right next to the products. Looks like a matching card. */
.qsp-savebar {
  margin-top: 12px;
  background: var(--qsp-bg); border: 1px solid var(--qsp-border);
  border-radius: var(--qsp-radius-lg, 8px);
  padding: 14px 24px; display: flex; align-items: center; justify-content: space-between;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04); gap: 16px;
  transition: all var(--qsp-transition);
}
.qsp-savebar.qsp-savebar-dirty {
  background: #2b2d36; border-color: #5A5F6A;
}
.qsp-savebar-status {
  font-size: 13px; color: var(--qsp-text-muted);
  display: inline-flex; align-items: center; gap: 10px;
}
.qsp-savebar.qsp-savebar-dirty .qsp-savebar-status { color: #e4e4e8; }
.qsp-savebar-status strong { color: #FFD54F; font-weight: 700; font-size: 15px; }
.qsp-savebar-status .qsp-savebar-dot {
  display: none; width: 8px; height: 8px; border-radius: 50%;
  background: #FFD54F; flex-shrink: 0;
  animation: qsp-dirty-pulse 1.4s ease-in-out infinite;
}
.qsp-savebar.qsp-savebar-dirty .qsp-savebar-dot { display: inline-block; }
.qsp-savebar-actions { display: flex; gap: 10px; }

/* Toast */
.qsp-toast-wrap {
  position: fixed; top: 24px; right: 24px; z-index: 100;
  display: flex; flex-direction: column; gap: 8px; pointer-events: none;
}
.qsp-toast {
  background: var(--qsp-success); color: #fff;
  padding: 12px 20px; border-radius: var(--qsp-radius-md);
  font-size: 14px; font-weight: 600; box-shadow: var(--qsp-shadow-md);
  pointer-events: auto; display: inline-flex; align-items: center; gap: 8px;
  animation: qsp-toast-in 0.3s ease;
}
.qsp-toast svg { width: 18px; height: 18px; }
@keyframes qsp-toast-in {
  from { opacity: 0; transform: translateY(-10px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Responsive */
@media (max-width: 720px) {
  .qsp-stock-header { display: none; }
  .qsp-stock-row {
    grid-template-columns: 60px 1fr;
    gap: 12px; padding: 12px;
  }
  .qsp-product-img { width: 60px; height: 60px; }
  .qsp-qty-wrap, .qsp-status-toggle, .qsp-row-status, .qsp-row-carry { grid-column: 2; }
  .qsp-row-carry { justify-content: flex-start; }
  .qsp-savebar { flex-direction: column; align-items: stretch; }
  .qsp-savebar-actions { justify-content: flex-end; }
}

/* ==========================================================================
   03. ADMIN DASHBOARD (prefix: qsa-)
   ========================================================================== */
/* :root with --qsa-* aliases is defined at the top of this file */

/* Top bar */
.qsa-topbar {
  background: #1f1f1f; color: #fff;
  padding: 12px 24px; display: flex; align-items: center; gap: 20px;
  position: sticky; top: 0; z-index: 50;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
}
.qsa-topbar-brand {
  display: flex; align-items: center; gap: 10px;
  font-family: var(--qsa-font-heading); font-size: 18px; font-weight: 700;
  letter-spacing: 1.5px; text-transform: uppercase;
}
/* QS pin - exact same proportions as on the map (30x40 ratio = 3:4) */
.qsa-pin-wrap {
  position: relative; width: 24px; height: 32px; flex-shrink: 0;
  filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.35));
}
.qsa-pin { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
.qsa-pin .qsa-pin-stroke { fill: none; stroke: rgba(255,255,255,0.5); stroke-width: 0.5; }
.qsa-pin-logo {
  position: absolute; top: 8px; left: 50%; transform: translateX(-50%);
  width: 11px; height: 11px; object-fit: contain; z-index: 2;
}
.qsa-topbar-badge {
  background: var(--qsa-primary); color: #fff; padding: 2px 9px;
  font-size: 10px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase;
  border-radius: var(--qsa-radius-sm); margin-left: 2px;
}
.qsa-topbar-nav {
  display: inline-flex; align-items: center; gap: 4px; margin-left: 16px; flex: 1;
}
.qsa-topbar-nav a {
  padding: 7px 14px; font-size: 13px; font-weight: 600; color: #c0c0c8;
  text-decoration: none; border-radius: var(--qsa-radius-sm);
  transition: all var(--qsa-transition); letter-spacing: 0.3px;
}
.qsa-topbar-nav a:hover { color: #fff; background: rgba(255, 255, 255, 0.08); }
.qsa-topbar-nav a.qsa-active { color: #fff; background: rgba(255, 255, 255, 0.12); }
.qsa-topbar-right {
  display: inline-flex; align-items: center; gap: 10px; font-size: 13px; color: #b0b0b8;
}
.qsa-topbar-avatar {
  width: 30px; height: 30px; border-radius: 50%; background: var(--qsa-primary);
  display: inline-flex; align-items: center; justify-content: center; color: #fff;
  font-family: var(--qsa-font-heading); font-size: 13px; font-weight: 700;
}
.qsa-topbar-logout {
  background: none; border: none; cursor: pointer;
  color: #c0c0c8; font-family: inherit; font-size: 13px; font-weight: 600;
  padding: 7px 14px; border-radius: var(--qsa-radius-sm);
  letter-spacing: 0.3px; transition: all var(--qsa-transition);
}
.qsa-topbar-logout:hover { color: #fff; background: rgba(255, 255, 255, 0.08); }
.qsa-topbar-version { color: rgba(255,255,255,0.45); font-size: 11px; font-family: monospace; letter-spacing: 0.5px; margin-right: 4px; }
.qsp-topbar-version { color: rgba(0,0,0,0.35); font-size: 11px; font-family: monospace; letter-spacing: 0.5px; margin-right: 10px; }
.qsp-login-version { text-align: center; color: rgba(0,0,0,0.3); font-size: 11px; font-family: monospace; margin-top: 12px; }
.qsa-region-checks { display: flex; flex-wrap: wrap; gap: 8px; }
.qsa-region-check { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border: 1px solid var(--qsa-border, #e2e2e8); border-radius: 6px; cursor: pointer; font-size: 13px; background: #fff; user-select: none; }
.qsa-region-check:hover { border-color: var(--qsa-primary, #C20019); }
.qsa-region-check input { margin: 0; cursor: pointer; }

.qsa-mgmt-panel { margin-top: 40px; padding: 24px; background: #fff; border: 1px solid var(--qsa-border, #e2e2e8); border-radius: 10px; }
.qsa-mgmt-header { margin-bottom: 20px; border-bottom: 1px solid var(--qsa-border, #e2e2e8); padding-bottom: 14px; }
.qsa-mgmt-title { margin: 0 0 4px; font-size: 18px; font-weight: 700; font-family: var(--qsa-font-heading); }
.qsa-mgmt-subtitle { font-size: 13px; color: var(--qs-text-muted, #777); }
.qsa-mgmt-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
@media (max-width: 900px) { .qsa-mgmt-grid { grid-template-columns: 1fr; } }
.qsa-mgmt-col-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.qsa-mgmt-col-head h3 { margin: 0; font-size: 14px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; }
.qsa-mgmt-list { display: flex; flex-direction: column; gap: 4px; }
.qsa-mgmt-row { display: flex; align-items: center; gap: 10px; padding: 8px 10px; background: #f7f7fa; border-radius: 6px; }
.qsa-mgmt-row:hover { background: #f0f0f5; }
.qsa-mgmt-label { flex: 1; font-size: 14px; color: #1a1a1a; }
.qsa-mgmt-used { font-size: 11px; color: var(--qsa-primary, #C20019); font-weight: 600; }
.qsa-mgmt-unused { font-size: 11px; color: #999; font-style: italic; }
.qsa-mgmt-empty { padding: 16px; text-align: center; color: #999; font-size: 13px; font-style: italic; }

.qsa-photo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)); gap: 8px; margin-bottom: 10px; max-height: 240px; overflow-y: auto; padding: 8px; background: #f7f7fa; border-radius: 6px; }
.qsa-photo-thumb { width: 72px; height: 72px; padding: 0; border: 2px solid transparent; border-radius: 6px; cursor: pointer; background: #fff; overflow: hidden; transition: border-color 0.15s; }
.qsa-photo-thumb:hover { border-color: #b0b0b8; }
.qsa-photo-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.qsa-photo-selected { border-color: var(--qsa-primary, #C20019) !important; box-shadow: 0 0 0 2px rgba(194,0,25,0.2); }
.qsa-photo-empty { padding: 16px; text-align: center; color: #888; font-size: 13px; background: #f7f7fa; border-radius: 6px; }
.qsa-photo-empty code { background: #e8e8ed; padding: 2px 5px; border-radius: 3px; font-size: 12px; }

/* Page */
.qsa-page { width: 100%; max-width: none; padding: 24px 40px; }
.qsa-page-head { margin-bottom: 20px; display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
/* .qsa-page-title / .qsa-page-subtitle styles defined in shared page-head section above */

/* Tabs (sub-nav) */
.qsa-tabs {
  display: flex; gap: 2px; margin-bottom: 18px;
  border-bottom: 1px solid var(--qsa-border);
}
.qsa-tab {
  padding: 10px 18px; font-size: 13px; font-weight: 600;
  color: var(--qsa-text-muted); background: none; border: none;
  cursor: pointer; font-family: var(--qsa-font-body);
  letter-spacing: 0.3px; position: relative;
  transition: color var(--qsa-transition);
  border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.qsa-tab:hover { color: var(--qsa-text-heading); }
.qsa-tab.qsa-tab-active {
  color: var(--qsa-primary); border-bottom-color: var(--qsa-primary);
}
.qsa-tab-badge {
  display: inline-block; margin-left: 6px; padding: 1px 7px;
  background: var(--qsa-bg-alt); border: 1px solid var(--qsa-border);
  border-radius: var(--qsa-radius-pill); font-size: 10px; font-weight: 700;
  color: var(--qsa-text-muted);
}
.qsa-tab.qsa-tab-active .qsa-tab-badge {
  background: var(--qsa-primary); color: #fff; border-color: var(--qsa-primary);
}

/* Generic table for CRUD views */
.qsa-crud-head {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 14px; flex-wrap: wrap; gap: 12px;
}
.qsa-crud-head h2 {
  font-family: var(--qsa-font-heading); font-size: 20px; font-weight: 700;
  letter-spacing: 0.5px; margin: 0; color: var(--qsa-text-heading);
}

.qsa-crud-row {
  display: grid; gap: 12px; padding: 10px 16px; align-items: center;
  min-height: 60px; box-sizing: border-box;
  border-bottom: 1px solid var(--qsa-border-light);
  background: var(--qsa-bg); transition: background var(--qsa-transition);
  font-size: 13px; color: var(--qsa-text);
}
.qsa-crud-row strong { font-weight: 700; color: var(--qsa-text-heading); }

.qsa-form-section-title {
  font-family: var(--qs-font-heading); font-size: 11px; font-weight: 700;
  letter-spacing: 1.5px; text-transform: uppercase; color: var(--qs-text-muted);
  margin: 16px 0 8px 0; padding-top: 12px; border-top: 1px dashed var(--qs-border);
}
.qsa-crud-row:last-child { border-bottom: none; }
.qsa-crud-row:nth-child(even) { background: var(--qsa-bg-zebra); }
.qsa-crud-row:hover { background: var(--qsa-bg-hover); }

.qsa-crud-row-img {
  width: 48px; height: 48px; border-radius: var(--qsa-radius-sm);
  object-fit: cover; background: var(--qsa-bg-alt); border: 1px solid var(--qsa-border-light);
}
.qsa-crud-row-actions { display: inline-flex; gap: 6px; justify-content: flex-end; }
.qsa-crud-row-url {
  font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0;
}
.qsa-crud-row-url a {
  color: var(--qs-primary); text-decoration: none; font-weight: 600;
}
.qsa-crud-row-url a:hover { text-decoration: underline; }

.qsa-crud-row-pass {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: 'Courier New', monospace; min-width: 0;
}
.qsa-crud-row-pass .qsa-pw-value {
  font-size: 12px; color: var(--qs-text-secondary); letter-spacing: 0.5px;
  background: var(--qs-bg-alt); padding: 2px 8px; border-radius: 4px;
  border: 1px solid var(--qs-border-light);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0;
}
.qsa-crud-row-pass.qsa-pw-shown .qsa-pw-value {
  color: var(--qs-primary); background: rgba(194, 0, 25, 0.06);
  border-color: rgba(194, 0, 25, 0.25);
}
.qsa-pw-toggle, .qsa-pw-copy {
  display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 24px; padding: 0; flex-shrink: 0;
  background: transparent; border: 1px solid transparent; border-radius: 4px;
  color: var(--qs-text-muted); cursor: pointer;
  transition: all var(--qs-transition);
}
.qsa-pw-toggle svg, .qsa-pw-copy svg { width: 14px; height: 14px; }
.qsa-pw-toggle:hover, .qsa-pw-copy:hover {
  background: var(--qs-bg-alt); border-color: var(--qs-border); color: var(--qs-primary);
}

/* Distributor inline-edit row: highlighted background + accent border */
.qsa-crud-row.qsa-crud-row-editing {
  background: var(--qsa-bg-alt);
  box-shadow: inset 3px 0 0 var(--qs-primary);
}
.qsa-crud-row.qsa-crud-row-editing .qsa-crud-row-actions {
  flex-wrap: nowrap; gap: 4px; justify-content: flex-end;
}

/* Compact inline inputs inside editable rows */
.qsa-inline-input {
  width: 100%; min-width: 0; box-sizing: border-box;
  padding: 4px 8px; font-size: 12px;
  min-height: 34px; height: 34px; line-height: 1.3;
  vertical-align: middle;
}
select.qsa-inline-input {
  padding: 4px 26px 4px 8px;
  -webkit-appearance: none; -moz-appearance: none; appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path fill='none' stroke='%23777' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' d='M1 1l4 4 4-4'/></svg>");
  background-repeat: no-repeat;
  background-position: right 8px center;
  background-size: 10px 6px;
}

/* Center every edit-row cell's content vertically so selects and inputs share a baseline */
.qsa-crud-row-editing > div,
.qsa-crud-row-editing > span:not(.qsa-crud-row-actions) {
  display: flex; align-items: center; min-width: 0;
}
.qsa-crud-row-editing > div > .qsa-inline-input,
.qsa-crud-row-editing > div > .qsa-inline-pw-wrap { flex: 1; min-width: 0; }
/* First column (Distributor) stacks input + id under it */
.qsa-crud-row-editing > div:first-child { flex-direction: column; align-items: stretch; justify-content: center; }

/* Inline password cell: input + eye + generate icon */
.qsa-inline-pw-wrap {
  display: flex; align-items: center; gap: 4px; min-width: 0;
}
.qsa-inline-pw-wrap .qsa-inline-input { flex: 1; font-family: 'Courier New', monospace; }
.qsa-inline-pw-wrap .qsa-pw-toggle,
.qsa-inline-pw-wrap .qsa-pw-copy { flex-shrink: 0; }

/* Compact button size (inline edit Save/Cancel) */
.qsa-btn-sm {
  padding: 5px 10px; font-size: 11px; height: 30px;
  letter-spacing: 0.5px;
}

/* Sales rep initials badge (compressed display) */
.qsa-rep-initials {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 32px; height: 26px; padding: 0 8px;
  background: var(--qs-bg-alt); border: 1px solid var(--qs-border-light);
  border-radius: 13px;
  font-size: 11px; font-weight: 700; letter-spacing: 0.5px;
  color: var(--qs-text-heading);
}

/* Country compact: flag + ISO2 code */
.qsa-row-country-compact {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; font-weight: 600; letter-spacing: 0.5px;
  color: var(--qs-text-secondary);
}
.qsa-row-country-compact .qsa-row-flag { width: 20px; height: 14px; }

.qsa-row-city-only {
  font-size: 13px; color: var(--qs-text);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* Chip input (used for ships_to in Map modal) */
.qsa-chips {
  display: flex; flex-wrap: wrap; gap: 6px;
  min-height: 40px; padding: 8px;
  background: var(--qs-bg-alt);
  border: 1px solid var(--qs-border);
  border-radius: var(--qs-radius-md);
  margin-bottom: 10px;
}
.qsa-chips-empty {
  font-size: 12px; color: var(--qs-text-muted); font-style: italic;
  padding: 2px 4px;
}
.qsa-chip {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 4px 4px 4px 10px;
  background: var(--qs-bg); border: 1px solid var(--qs-border-light);
  border-radius: 13px;
  font-family: 'Courier New', monospace; font-size: 12px; font-weight: 700;
  letter-spacing: 0.5px; color: var(--qs-text-heading);
}
.qsa-chip-x {
  display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px; padding: 0;
  background: transparent; border: none; border-radius: 50%;
  color: var(--qs-text-muted); cursor: pointer;
  font-size: 16px; line-height: 1;
}
.qsa-chip-x:hover { background: var(--qs-primary); color: #fff; }
.qsa-chips-add { display: flex; gap: 8px; align-items: center; }

/* Segmented Actions header: "Map | Ships | Showroom | Actions" above icon buttons */
.qsa-actions-head {
  display: grid;
  grid-template-columns: 34px 60px 34px 1fr;
  gap: 4px; align-items: center;
  text-align: center;
}
.qsa-actions-head .qsa-actions-head-main { text-align: right; }

/* Display-mode actions row: Map | Ships | Showroom | Edit+Delete */
.qsa-row-actions-grid {
  display: grid !important;
  grid-template-columns: 34px 60px 34px 1fr;
  gap: 4px; align-items: center;
}

/* Save-variant icon button — same shape as other icons, primary-tinted */
.qsa-btn-icon-save {
  color: #fff !important; background: var(--qs-primary) !important;
  border-color: var(--qs-primary) !important;
}
.qsa-btn-icon-save:hover {
  background: var(--qs-primary-dark, #a3001f) !important;
  border-color: var(--qs-primary-dark, #a3001f) !important;
}

/* Stand-alone wide icon button (icon + count). Does NOT stack with .qsa-btn-icon
   to avoid conflicts with the base .qsa-btn-icon { width/height: 32px } rule
   defined later in this stylesheet. */
.qsa-btn-ships {
  box-sizing: border-box;
  width: 56px; height: 32px;
  padding: 0 6px; gap: 6px;
  display: inline-flex; align-items: center; justify-content: center;
  flex: 0 0 auto;
  background: none; border: 1px solid var(--qs-border);
  border-radius: var(--qs-radius-sm); cursor: pointer;
  color: var(--qs-text-muted);
  transition: all var(--qs-transition);
}
.qsa-btn-ships:hover { border-color: var(--qs-primary); color: var(--qs-primary); }
.qsa-btn-ships svg { width: 16px; height: 16px; flex-shrink: 0; }
.qsa-btn-icon-badge {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 18px; height: 18px; padding: 0 5px; box-sizing: border-box;
  background: var(--qs-bg-alt); color: var(--qs-text-heading);
  border: 1px solid var(--qs-border);
  border-radius: 9px; font-size: 11px; font-weight: 700;
  line-height: 1; text-align: center; flex-shrink: 0;
}
.qsa-row-actions-main {
  display: inline-flex; justify-content: flex-end; gap: 6px;
}

/* .qsa-btn-icon is defined in the shared buttons section above */

/* Modal */
.qsa-modal-overlay {
  position: fixed; inset: 0; background: rgba(0, 0, 0, 0.45);
  display: flex; align-items: center; justify-content: center; z-index: 200;
  padding: 24px; animation: qsa-fade 0.15s ease;
}
@keyframes qsa-fade { from { opacity: 0; } to { opacity: 1; } }
.qsa-modal {
  background: var(--qsa-bg); border-radius: var(--qsa-radius-lg);
  width: 100%; max-width: 520px; max-height: 90vh; overflow: auto;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.25);
  animation: qsa-pop 0.2s ease;
}
@keyframes qsa-pop { from { transform: translateY(8px) scale(0.98); opacity: 0; } to { transform: none; opacity: 1; } }
.qsa-modal-head {
  padding: 16px 20px; border-bottom: 1px solid var(--qsa-border);
  display: flex; justify-content: space-between; align-items: center;
}
.qsa-modal-title {
  font-family: var(--qsa-font-heading); font-size: 18px; font-weight: 700;
  letter-spacing: 0.5px; margin: 0; color: var(--qsa-text-heading);
}
.qsa-modal-close {
  background: none; border: none; color: var(--qsa-text-muted);
  font-size: 20px; cursor: pointer; padding: 4px 8px;
  line-height: 1; border-radius: var(--qsa-radius-sm);
}
.qsa-modal-close:hover { background: var(--qsa-bg-hover); color: var(--qsa-text-heading); }
.qsa-modal-body { padding: 20px; }
.qsa-modal-foot {
  padding: 14px 20px; border-top: 1px solid var(--qsa-border);
  display: flex; gap: 10px; justify-content: flex-end;
}

/* Form */
.qsa-form-group { margin-bottom: 14px; }
.qsa-form-label {
  display: block; font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 1px;
  color: var(--qsa-text-secondary); margin-bottom: 6px;
}
/* .qsa-form-input / .qsa-form-textarea are defined in the shared form-inputs section above */
.qsa-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.qsa-form-hint { font-size: 11px; color: var(--qsa-text-muted); margin-top: 4px; }

.qsa-image-upload {
  display: flex; align-items: center; gap: 12px;
  padding: 10px; border: 1px dashed var(--qsa-border);
  border-radius: var(--qsa-radius-md); background: var(--qsa-bg-alt);
}
.qsa-image-upload img {
  width: 64px; height: 64px; border-radius: var(--qsa-radius-sm);
  object-fit: cover; background: var(--qsa-bg); border: 1px solid var(--qsa-border-light);
}
.qsa-image-upload-info { flex: 1; font-size: 12px; color: var(--qsa-text-muted); }

/* Sales rep card grid */
.qsa-reps-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 14px;
}
.qsa-rep-card {
  background: var(--qsa-bg); border: 1px solid var(--qsa-border);
  border-radius: var(--qsa-radius-lg); padding: 20px;
  display: flex; flex-direction: column; align-items: center; text-align: center;
  box-shadow: var(--qsa-shadow-sm); position: relative;
  transition: all var(--qsa-transition);
}
.qsa-rep-card:hover { box-shadow: var(--qsa-shadow-md); border-color: var(--qsa-text-muted); }
.qsa-rep-card-photo {
  width: 72px; height: 72px; border-radius: 50%; object-fit: cover;
  margin-bottom: 10px; border: 3px solid var(--qsa-primary-alpha);
}
.qsa-rep-card-name {
  font-family: var(--qsa-font-heading); font-size: 17px; font-weight: 700;
  color: var(--qsa-text-heading); margin-bottom: 2px; letter-spacing: 0.3px;
}
.qsa-rep-card-role {
  font-size: 11px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase;
  color: var(--qsa-primary); margin-bottom: 10px;
}
.qsa-rep-card-contact {
  font-size: 12px; color: var(--qsa-text-secondary); margin-bottom: 3px; word-break: break-all;
}
.qsa-rep-card-count-meta {
  margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--qsa-border);
  font-size: 11px; color: var(--qsa-text-muted); width: 100%;
}
.qsa-rep-card-actions {
  position: absolute; top: 10px; right: 10px;
  display: inline-flex; gap: 4px;
}

/* Stale badge + reminder */
.qsa-stale-badge {
  display: inline-block; margin-left: 6px;
  padding: 1px 7px; background: #FFE0B2; color: #9A4B00;
  font-size: 9px; font-weight: 700; letter-spacing: 0.5px; text-transform: uppercase;
  border-radius: var(--qsa-radius-pill); border: 1px solid #FFCC80;
}

/* Threshold editor */
.qsa-thresh-row {
  display: grid; grid-template-columns: 48px 1fr 120px 120px;
  gap: 12px; padding: 10px 16px; align-items: center;
  border-bottom: 1px solid var(--qsa-border-light);
}
.qsa-thresh-row:last-child { border-bottom: none; }
.qsa-thresh-row:nth-child(even) { background: var(--qsa-bg-zebra); }
.qsa-thresh-input {
  width: 100%; padding: 7px 10px; font-size: 14px; font-weight: 600; text-align: center;
  border: 1px solid var(--qsa-border); border-radius: var(--qsa-radius-md);
  background: var(--qsa-bg); font-family: var(--qsa-font-body);
}
.qsa-thresh-input:focus { outline: none; border-color: var(--qsa-primary); box-shadow: 0 0 0 3px var(--qsa-primary-alpha); }

/* Alerts section - critical / actionable */
.qsa-alerts {
  margin-bottom: 20px;
}
.qsa-alerts-title {
  display: flex; align-items: center; gap: 8px;
  font-family: var(--qsa-font-heading); font-size: 13px; font-weight: 700;
  letter-spacing: 1.5px; text-transform: uppercase; color: var(--qsa-text-secondary);
  margin-bottom: 10px;
}
.qsa-alerts-title svg { width: 16px; height: 16px; color: #FF9800; }
.qsa-alerts-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 12px;
}
.qsa-alert-card {
  background: var(--qsa-bg); border: 1px solid var(--qsa-border);
  border-left: 4px solid var(--qsa-border);
  border-radius: var(--qsa-radius-lg); padding: 14px 16px;
  box-shadow: var(--qsa-shadow-sm);
  display: flex; flex-direction: column; gap: 8px;
  transition: all var(--qsa-transition);
}
.qsa-alert-card[data-severity="critical"] { border-left-color: #C20019; background: #FFF9F9; }
.qsa-alert-card[data-severity="warning"]  { border-left-color: #FF9800; background: #FFFAF0; }
.qsa-alert-card[data-severity="info"]     { border-left-color: #19A0DC; background: #F7FBFE; }
.qsa-alert-card[data-severity="ok"]       { border-left-color: #28A745; background: #F5FBF6; }
.qsa-alert-card.qsa-alert-empty {
  opacity: 0.55; background: var(--qsa-bg);
}
.qsa-alert-head {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
}
.qsa-alert-label {
  font-size: 11px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase;
  color: var(--qsa-text-secondary);
}
.qsa-alert-count {
  font-family: var(--qsa-font-heading); font-size: 26px; font-weight: 700;
  line-height: 1; color: var(--qsa-text-heading);
}
.qsa-alert-card[data-severity="critical"] .qsa-alert-count { color: #B71C1C; }
.qsa-alert-card[data-severity="warning"]  .qsa-alert-count { color: #9A6700; }
.qsa-alert-card[data-severity="info"]     .qsa-alert-count { color: #01579B; }
.qsa-alert-desc {
  font-size: 12px; color: var(--qsa-text-secondary); line-height: 1.4;
}
.qsa-alert-actions { display: flex; gap: 6px; margin-top: 4px; flex-wrap: wrap; }
.qsa-alert-action {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 5px 10px; font-size: 11px; font-weight: 700;
  letter-spacing: 0.5px; text-transform: uppercase;
  border: 1px solid var(--qsa-border); border-radius: var(--qsa-radius-sm);
  background: var(--qsa-bg); color: var(--qsa-text-secondary);
  cursor: pointer; font-family: var(--qsa-font-body);
  transition: all var(--qsa-transition);
}
.qsa-alert-action:hover { border-color: var(--qsa-primary); color: var(--qsa-primary); }
.qsa-alert-action.qsa-alert-action-primary {
  background: var(--qsa-primary); color: #fff; border-color: var(--qsa-primary);
}
.qsa-alert-action.qsa-alert-action-primary:hover {
  background: var(--qsa-primary-hover); border-color: var(--qsa-primary-hover); color: #fff;
}
.qsa-alert-preview {
  display: flex; flex-wrap: wrap; gap: 4px; margin-top: 2px;
}
.qsa-alert-preview-name {
  display: inline-block; padding: 2px 8px; font-size: 11px; font-weight: 600;
  background: rgba(0,0,0,0.06); color: var(--qsa-text-heading);
  border-radius: var(--qsa-radius-sm); cursor: pointer;
  transition: background var(--qsa-transition);
}
.qsa-alert-preview-name:hover { background: rgba(0,0,0,0.12); }
.qsa-alert-preview-more { font-size: 11px; color: var(--qsa-text-muted); padding: 2px 4px; font-style: italic; }

/* Inline action banner (replaces alert cards when there's something actionable) */
.qsa-banner {
  display: flex; align-items: flex-start; gap: 14px;
  padding: 14px 16px; border-radius: var(--qsa-radius-lg);
  border: 1px solid var(--qsa-border);
  box-shadow: var(--qsa-shadow-sm); margin-bottom: 10px;
}
.qsa-banner[data-severity="critical"] { background: #FFF5F5; border-color: #FFCDD2; border-left: 4px solid #C20019; }
.qsa-banner[data-severity="warning"]  { background: #FFFAF0; border-color: #FFE0B2; border-left: 4px solid #FF9800; }
.qsa-banner[data-severity="info"]     { background: #F4FAFE; border-color: #B3E5FC; border-left: 4px solid #19A0DC; }
.qsa-banner-icon {
  flex-shrink: 0; width: 22px; height: 22px;
  display: inline-flex; align-items: center; justify-content: center;
  color: #FF9800;
}
.qsa-banner[data-severity="critical"] .qsa-banner-icon { color: #C20019; }
.qsa-banner-icon svg { width: 22px; height: 22px; }
.qsa-banner-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.qsa-banner-title {
  font-family: var(--qsa-font-heading); font-size: 15px; font-weight: 700;
  color: var(--qsa-text-heading); line-height: 1.2;
}
.qsa-banner-subtitle { font-size: 12px; color: var(--qsa-text-secondary); }
.qsa-banner-preview {
  display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px;
}
.qsa-banner-chip {
  display: inline-block; padding: 2px 8px; font-size: 11px; font-weight: 600;
  background: rgba(0,0,0,0.06); color: var(--qsa-text-heading);
  border-radius: var(--qsa-radius-sm); cursor: pointer;
  transition: background var(--qsa-transition);
}
.qsa-banner-chip:hover { background: rgba(0,0,0,0.12); }
.qsa-banner-more { font-size: 11px; color: var(--qsa-text-muted); padding: 2px 4px; font-style: italic; }
.qsa-banner-actions {
  display: inline-flex; gap: 6px; flex-wrap: wrap; align-self: center;
}

/* Quick-filter chips row — radius taki sam jak tabele/badge (4px) */
.qsa-chiprow {
  display: inline-flex; flex-wrap: wrap; gap: 4px;
  margin: 12px 0; padding: 4px;
  background: var(--qs-bg); border: 1px solid var(--qs-border);
  border-radius: var(--qs-radius-md);
}
.qsa-chiprow-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px; font-size: 13px; font-weight: 600;
  background: none; border: none; border-radius: var(--qs-radius-sm);
  color: var(--qs-text-secondary); cursor: pointer;
  font-family: var(--qs-font-body); transition: all var(--qs-transition);
}
.qsa-chiprow-chip:hover { background: var(--qs-bg-alt); color: var(--qs-text-heading); }
.qsa-chiprow-chip-active { background: var(--qs-primary); color: #fff; }
.qsa-chiprow-chip-active:hover { background: var(--qs-primary-hover); color: #fff; }
.qsa-chiprow-chip-count {
  font-size: 10px; font-weight: 700; padding: 1px 7px;
  background: rgba(0,0,0,0.08); border-radius: var(--qs-radius-sm);
}
.qsa-chiprow-chip-active .qsa-chiprow-chip-count {
  background: rgba(255,255,255,0.25); color: #fff;
}

/* Filters bar */
/* Table */
.qsa-table {
  background: var(--qsa-bg); border: 1px solid var(--qsa-border);
  border-radius: var(--qsa-radius-lg); box-shadow: var(--qsa-shadow-sm);
  overflow: hidden;
}
/* Status legend (shown in Stock Overview header) */
.qsa-legend {
  display: inline-flex; flex-wrap: wrap; align-items: center; gap: 14px;
  padding: 8px 14px; background: var(--qsa-bg);
  border: 1px solid var(--qsa-border); border-radius: var(--qsa-radius-md);
  font-size: 12px;
}
.qsa-legend-label {
  font-size: 10px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase;
  color: var(--qsa-text-muted); margin-right: 2px;
}
.qsa-legend-item {
  display: inline-flex; align-items: center; gap: 6px;
  font-weight: 600; color: var(--qsa-text-secondary);
}
.qsa-legend-item small { font-weight: 400; color: var(--qsa-text-muted); font-size: 11px; }
.qsa-legend-dot {
  width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0;
}
.qsa-legend-item.qsa-st-green  .qsa-legend-dot { background: #28A745; }
.qsa-legend-item.qsa-st-yellow .qsa-legend-dot { background: #FFC107; }
.qsa-legend-item.qsa-st-red    .qsa-legend-dot { background: #C20019; }
.qsa-legend-item.qsa-st-ask    .qsa-legend-dot { background: #19A0DC; }

/* region badges — defined in the .qs-badge section above */

.qsa-sortbar {
  display: inline-flex; align-items: center; gap: 14px; flex-wrap: wrap;
  margin: 0 0 16px; padding: 8px 14px;
  background: var(--qsa-bg); border: 1px solid var(--qsa-border);
  border-radius: var(--qsa-radius-md); font-size: 13px;
}
.qsa-sortbar-label {
  font-size: 10px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase;
  color: var(--qsa-text-muted); margin-right: 2px;
}
.qsa-sortbar .qsa-sort-header { color: var(--qsa-text-secondary); font-weight: 600; }

/* ==========================================================================
   SHARED COMPONENTS — used in both portal and admin
   Prefix: .qs-* (no panel-specific prefix). Scoped by virtue of only being
   added by our JS inside our roots (.qsp-app / .qsa-app).
   ========================================================================== */

/* Shared badge — one style, two sets of color variants */
.qs-badge,
.qs-status-badge {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 4px 12px; border-radius: 4px;
  font-size: 10px; font-weight: 700; letter-spacing: 0.5px;
  text-transform: uppercase; white-space: nowrap;
  border: none; line-height: 1.2;
  min-width: 140px; box-sizing: border-box;
}
.qs-badge::before,
.qs-status-badge::before {
  content: ''; width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0;
}
/* Status (stock health) */
.qs-badge.qs-st-green,  .qs-status-badge.qs-st-green  { background: #E8F5E9; color: #1B5E20; }
.qs-badge.qs-st-green::before,  .qs-status-badge.qs-st-green::before  { background: #28A745; }
.qs-badge.qs-st-yellow, .qs-status-badge.qs-st-yellow { background: #FFF8E1; color: #9A6700; }
.qs-badge.qs-st-yellow::before, .qs-status-badge.qs-st-yellow::before { background: #FFC107; }
.qs-badge.qs-st-red,    .qs-status-badge.qs-st-red    { background: #FFEBEE; color: #B71C1C; }
.qs-badge.qs-st-red::before,    .qs-status-badge.qs-st-red::before    { background: #C20019; }
.qs-badge.qs-st-ask,    .qs-status-badge.qs-st-ask    { background: #E1F5FE; color: #01579B; }
.qs-badge.qs-st-ask::before,    .qs-status-badge.qs-st-ask::before    { background: #19A0DC; }
.qs-badge.qs-st-none,   .qs-status-badge.qs-st-none   { background: #f0f0f0; color: #888; }
.qs-badge.qs-st-none::before,   .qs-status-badge.qs-st-none::before   { background: #BDBDBD; }
/* "Not filled yet" — distributor hasn't saved stocks a single time. Uses a
   warmer grey than qs-st-none to say "waiting for action" rather than "empty by
   choice". Dashed outline reinforces the incomplete/pending signal. */
.qs-badge.qs-st-untouched, .qs-status-badge.qs-st-untouched {
  background: #FAFAF5; color: #6b6654; border: 1px dashed #c9c2a8;
}
.qs-badge.qs-st-untouched::before, .qs-status-badge.qs-st-untouched::before { background: #a89d7a; }
/* Inline column filters — sit directly above the table head, same grid layout */
.qsa-table-filters {
  display: grid; grid-template-columns: 32px 2fr 1.4fr 130px 1.2fr 1fr 1fr 130px 140px;
  gap: 12px; padding: 10px 16px; align-items: center;
  background: var(--qs-bg); border-bottom: 1px solid var(--qs-border-light);
}
.qsa-col-filter {
  width: 100%; box-sizing: border-box;
  padding: 6px 10px; font-size: 12px;
  border: 1px solid var(--qs-border); border-radius: var(--qs-radius-sm);
  background-color: var(--qs-bg); color: var(--qs-text);
  font-family: var(--qs-font-body);
}
.qsa-col-filter:focus {
  outline: none; border-color: var(--qs-primary); box-shadow: 0 0 0 2px var(--qs-primary-alpha);
}
select.qsa-col-filter {
  -webkit-appearance: none; -moz-appearance: none; appearance: none;
  padding-right: 26px;
  background-image:
    linear-gradient(45deg,  transparent 50%, #222 50%),
    linear-gradient(135deg, #222 50%, transparent 50%);
  background-position:
    calc(100% - 14px) calc(50% + 1px),
    calc(100% - 9px)  calc(50% + 1px);
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}
.qsa-col-filter-meta {
  font-size: 11px; color: var(--qs-text-muted); text-align: right; font-weight: 600;
}

/* Last-update badge in admin Stock Overview */
.qsa-update-badge {
  display: inline-flex; align-items: center;
  padding: 4px 10px; border-radius: var(--qs-radius-sm);
  font-size: 11px; font-weight: 700; letter-spacing: 0.3px;
  white-space: nowrap;
}
.qsa-update-badge.qsa-update-yellow { background: #FFF8E1; color: #9A6700; }
.qsa-update-badge.qsa-update-red    { background: #FFEBEE; color: #B71C1C; }
.qsa-update-plain { font-size: 12px; color: var(--qs-text-secondary); }

/* Region in admin tables — plain muted uppercase text, no badge */
.qsa-region-text {
  font-size: 12px; font-weight: 600; letter-spacing: 0.5px;
  text-transform: uppercase; color: var(--qs-text-secondary);
}
.qsa-region-text.qsa-region-text-empty { color: var(--qs-text-muted); font-weight: 400; }

/* ==========================================================================
   Page heading — shared title + subtitle. Aliases:
   .qsp-main-title / .qsa-page-title = .qs-page-title
   .qsp-main-subtitle / .qsa-page-subtitle = .qs-page-subtitle
   ========================================================================== */
.qs-page-title,
.qsp-main-title, .qsa-page-title {
  font-family: var(--qs-font-heading); font-size: 28px; font-weight: 700;
  letter-spacing: 1px; color: var(--qs-text-heading); margin: 0 0 4px;
}
.qs-page-subtitle,
.qsp-main-subtitle, .qsa-page-subtitle {
  font-size: 14px; color: var(--qs-text-secondary); margin: 0;
}
.qsp-main-subtitle p { margin: 0 0 8px; line-height: 1.55; }
.qsp-main-subtitle p:last-child { margin-bottom: 0; }

/* ==========================================================================
   QS pin — shared inline pin component (SVG marker + logo on top).
   Default base = 30x40. Per-context overrides give exact pixel sizes for:
   admin topbar (24x32), portal login banner (48x64).
   ========================================================================== */
.qs-pin-wrap,
.qsa-pin-wrap, .qsp-pin-wrap {
  position: relative; display: inline-block;
  width: 30px; height: 40px; flex-shrink: 0;
  filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.35));
}
.qs-pin,
.qsa-pin, .qsp-pin {
  position: absolute; top: 0; left: 0; width: 100%; height: 100%;
  fill: var(--qs-primary);
}
.qs-pin-logo,
.qsa-pin-logo, .qsp-pin-logo {
  position: absolute; left: 50%; transform: translateX(-50%);
  object-fit: contain; z-index: 2;
  /* default sizing for 30x40 base */
  top: 10px; width: 14px; height: 14px;
}
/* All inline pins use the standard map size (30x40). Login banner gets bottom margin. */
.qsp-pin-wrap { margin-bottom: 12px; }

/* ==========================================================================
   Form inputs — shared style. Aliases: .qsa-form-input, .qsa-form-textarea,
   .qsp-form-input = .qs-input
   ========================================================================== */
.qs-input,
.qsa-form-input, .qsa-form-textarea,
.qsp-form-input {
  width: 100%; padding: 9px 12px; font-size: 14px;
  border: 1px solid var(--qs-border); border-radius: var(--qs-radius-md);
  background-color: var(--qs-bg); color: var(--qs-text);
  font-family: var(--qs-font-body);
  transition: border-color var(--qs-transition), box-shadow var(--qs-transition);
  box-sizing: border-box;
}
.qs-input:focus,
.qsa-form-input:focus, .qsa-form-textarea:focus,
.qsp-form-input:focus {
  outline: none; border-color: var(--qs-primary);
  box-shadow: 0 0 0 3px var(--qs-primary-alpha);
}
/* Login form variant: larger typography */
.qsp-login .qsp-form-input { padding: 11px 14px; font-size: 15px; }

/* ==========================================================================
   Buttons — shared style. Aliases: .qsa-btn, .qsp-btn, .cta-btn = .qs-btn
   ========================================================================== */
.qs-btn, .qsa-btn, .qsp-btn, .cta-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 9px 16px; font-size: 13px; font-weight: 600;
  border: 1px solid var(--qs-border); border-radius: var(--qs-radius-md);
  background: var(--qs-bg); color: var(--qs-text-secondary);
  cursor: pointer; transition: all var(--qs-transition);
  font-family: var(--qs-font-body); text-decoration: none;
  white-space: nowrap; line-height: 1; letter-spacing: 0.3px;
}
.qs-btn:hover, .qsa-btn:hover, .qsp-btn:hover, .cta-btn:hover {
  border-color: var(--qs-primary); color: var(--qs-primary);
}
.qs-btn:disabled, .qsa-btn:disabled, .qsp-btn:disabled {
  opacity: 0.5; cursor: not-allowed;
}
.qs-btn-primary, .qsa-btn-primary, .qsp-btn-primary, .cta-btn-primary {
  background: var(--qs-primary); border-color: var(--qs-primary); color: #fff;
}
.qs-btn-primary:hover, .qsa-btn-primary:hover, .qsp-btn-primary:hover:not(:disabled), .cta-btn-primary:hover {
  background: var(--qs-primary-hover); border-color: var(--qs-primary-hover); color: #fff;
}
.qs-btn-secondary, .qsp-btn-secondary {
  background: var(--qs-bg); color: var(--qs-text-secondary); border-color: var(--qs-border);
}
.qs-btn-secondary:hover, .qsp-btn-secondary:hover {
  border-color: var(--qs-text-secondary); color: var(--qs-text-heading);
}
.qs-btn-outline, .cta-btn-outline {
  background: transparent; color: var(--qs-primary); border-color: var(--qs-primary);
}
.qs-btn-outline:hover, .cta-btn-outline:hover {
  background: var(--qs-primary); color: #fff;
}
.qs-btn-icon, .qsa-btn-icon {
  width: 32px; height: 32px; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  background: none; border: 1px solid var(--qs-border);
  border-radius: var(--qs-radius-sm); cursor: pointer;
  color: var(--qs-text-muted); transition: all var(--qs-transition);
}
.qs-btn-icon:hover, .qsa-btn-icon:hover {
  border-color: var(--qs-primary); color: var(--qs-primary);
}
.qs-btn-icon svg, .qsa-btn-icon svg { width: 14px; height: 14px; }
.qs-btn-icon-danger:hover, .qsa-btn-icon-danger:hover {
  border-color: #B71C1C; color: #B71C1C;
}

/* Sortable column headers — shared across admin (qsa-app) and portal (qsp-app) */
.qs-sort-header {
  cursor: pointer; user-select: none;
  transition: color 0.15s ease;
}
.qs-sort-header:hover { color: #111; }
.qs-sort-header.qs-sort-active { color: #C20019; }
.qs-sort-arrow { font-size: 9px; font-weight: 700; opacity: 0.85; }
.qs-sort-arrow.qs-sort-arrow-dim { opacity: 0.25; transition: opacity 0.15s ease; }
.qs-sort-header:hover .qs-sort-arrow-dim { opacity: 0.6; }

.qsa-table-head {
  display: grid; grid-template-columns: 32px 2fr 1.4fr 130px 1.2fr 1fr 1fr 130px 140px;
  gap: 12px; padding: 12px 16px; align-items: center;
  background: var(--qsa-bg-alt); border-bottom: 1px solid var(--qsa-border);
  font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 1px; color: var(--qsa-text-muted); font-family: var(--qsa-font-heading);
}
.qsa-row {
  display: grid; grid-template-columns: 32px 2fr 1.4fr 130px 1.2fr 1fr 1fr 130px 140px;
  gap: 12px; padding: 14px 16px; align-items: center;
  border-bottom: 1px solid var(--qsa-border-light);
  cursor: pointer; transition: background var(--qsa-transition);
}
.qsa-row:last-child { border-bottom: none; }
.qsa-row:hover { background: var(--qsa-bg-zebra); }
.qsa-row.qsa-row-open { background: var(--qsa-bg-alt); }

.qsa-row-chevron {
  color: var(--qsa-text-muted); font-size: 14px; transition: transform var(--qsa-transition);
  display: inline-flex; align-items: center; justify-content: center;
}
.qsa-row.qsa-row-open .qsa-row-chevron { transform: rotate(90deg); color: var(--qsa-primary); }

.qsa-row-dist { display: flex; align-items: center; gap: 10px; min-width: 0; }
.qsa-row-dist-info { display: flex; flex-direction: column; min-width: 0; }
.qsa-row-dist-name {
  font-size: 14px; font-weight: 700; color: var(--qsa-text-heading);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.qsa-row-dist-id {
  font-family: 'Source Sans 3', sans-serif; font-size: 11px; color: var(--qsa-text-muted);
  letter-spacing: 0.3px;
}
.qsa-row-location { display: inline-flex; align-items: center; gap: 6px; min-width: 0; }
.qsa-row-flag {
  width: 20px; height: 14px; border-radius: 2px; object-fit: cover;
  border: 1px solid var(--qsa-border-light); flex-shrink: 0;
}
.qsa-row-city { font-size: 13px; color: var(--qsa-text); }
.qsa-row-rep {
  font-family: var(--qs-font-body); font-size: 13px; font-weight: 600;
  color: var(--qsa-text); letter-spacing: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.qsa-row-country {
  font-size: 11px; color: var(--qsa-text-muted); letter-spacing: 0.5px;
  text-transform: uppercase;
}

/* Stock column: concise status summary (max 4 pills) */
.qsa-row-chips {
  display: inline-flex; flex-wrap: wrap; gap: 6px; align-items: center;
}
/* badge in stock overview uses the shared .qs-status-badge class */

.qsa-row-total {
  font-family: var(--qsa-font-heading); font-size: 20px; font-weight: 700;
  color: var(--qsa-text-heading); line-height: 1;
}
.qsa-row-total small {
  display: block; font-family: var(--qsa-font-body); font-weight: 400;
  font-size: 11px; color: var(--qsa-text-muted); letter-spacing: 0.3px;
}

.qsa-row-actions { display: inline-flex; justify-content: flex-end; gap: 6px; }
/* .qsa-btn / .qsa-btn-primary are defined in the shared buttons section above */

/* Expanded detail */
.qsa-detail {
  display: none;
  padding: 0;
  background: var(--qsa-bg-alt); border-bottom: 1px solid var(--qsa-border);
}
.qsa-detail .qsa-product-list {
  display: block; border: none; border-radius: 0; background: transparent;
}
/* Each product row mirrors the outer table grid so product ID sits under STOCK,
   qty sits under TOTAL UNITS, state select under LAST UPDATE, Save/marker under ACTIONS. */
.qsa-detail .qsa-product-line {
  display: grid;
  grid-template-columns: 32px 2fr 1.4fr 130px 1.2fr 1fr 1fr 130px 140px;
  gap: 12px; padding: 8px 16px; align-items: center;
  border-bottom: 1px solid var(--qsa-border-light);
  background: transparent;
}
/* Column headers above the inline product list */
.qsa-detail .qsa-product-line-header {
  font-family: var(--qs-font-heading); font-size: 11px; font-weight: 700;
  letter-spacing: 1px; text-transform: uppercase;
  color: var(--qs-text-muted);
  background: var(--qs-bg); border-bottom: 1px solid var(--qs-border);
  padding-top: 10px; padding-bottom: 10px;
  box-shadow: none !important;
}
.qsa-detail .qsa-product-line-header .qsa-product-line-name { color: var(--qs-text-muted); font-weight: 700; }
.qsa-detail .qsa-product-line-header > .qsa-col-items  { grid-column: 7; justify-self: start; padding-left: 10px; }
.qsa-detail .qsa-product-line-header > .qsa-col-status { grid-column: 8; justify-self: start; padding-left: 10px; }

/* Highlight rows that drive distributor-level "Needs attention" / "Running low" status */
.qsa-detail .qsa-product-line-st-red > .qsa-product-line-name { color: #B71C1C; }
.qsa-detail .qsa-product-line-st-yellow > .qsa-product-line-name { color: #9A6700; }
/* Edited marker wins over status color stripe */
.qsa-detail .qsa-product-line-edited { box-shadow: inset 3px 0 0 var(--qs-primary); }
.qsa-detail .qsa-product-line-dirty   { box-shadow: inset 3px 0 0 var(--qs-warning, #E8A300); }

.qsa-detail .qsa-product-line > .qsa-product-line-name     { grid-column: 6; justify-self: start; }
.qsa-detail .qsa-product-line > .qsa-inline-qty            { grid-column: 7; justify-self: start; width: 90px; text-align: left; padding-left: 10px; }
.qsa-detail .qsa-product-line > .qsa-inline-select         { grid-column: 8; justify-self: start; width: auto; min-width: 120px; }
.qsa-detail .qsa-product-line > .qsa-product-line-actions  {
  grid-column: 9;
  display: flex; align-items: center; justify-content: flex-end; gap: 8px;
}
.qsa-row-open + .qsa-detail { display: block; }

.qsa-product-list {
  display: flex; flex-direction: column;
  border: 1px solid var(--qs-border); border-radius: var(--qs-radius-sm);
  overflow: hidden; background: var(--qs-bg);
}
.qsa-product-line {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  padding: 8px 16px; border-bottom: 1px solid var(--qs-border);
  font-size: 13px; column-gap: 16px;
}
.qsa-product-line:last-child { border-bottom: none; }

.qsa-inline-select,
.qsa-inline-qty {
  height: 30px; padding: 0 10px;
  width: 100%;
  border: 1px solid transparent;
  background: transparent;
  color: var(--qs-text-secondary);
  font-family: inherit; font-size: 12px; font-weight: 600;
  border-radius: var(--qs-radius-sm);
  transition: border-color var(--qs-transition), background var(--qs-transition), color var(--qs-transition);
  cursor: pointer;
}
.qsa-inline-qty { text-align: right; cursor: text; }
.qsa-inline-select:hover,
.qsa-inline-qty:hover:not(:disabled) {
  border-color: var(--qs-border);
  background: var(--qs-bg);
  color: var(--qs-text-heading);
}
.qsa-inline-select:focus,
.qsa-inline-qty:focus {
  outline: none;
  border-color: var(--qs-primary);
  background: #fff;
  color: var(--qs-text-heading);
}
.qsa-inline-qty:disabled {
  opacity: 0.35; cursor: not-allowed;
  background: transparent; border-color: transparent;
}
.qsa-product-edited-marker {
  display: none;
  font-size: 10px; font-weight: 700; letter-spacing: 0.5px;
  color: var(--qs-primary); text-transform: uppercase;
  padding: 2px 6px; border-radius: 10px;
  background: rgba(194, 0, 25, 0.08);
  white-space: nowrap;
}
.qsa-product-line-edited .qsa-product-edited-marker { display: inline-block; }
.qsa-product-line-edited { box-shadow: inset 3px 0 0 var(--qs-primary); }
.qsa-product-line-edited .qsa-product-line-name { color: var(--qs-primary); }

/* Locked (preview) mode — panel is read-only until admin unlocks it */
.qsa-detail-locked .qsa-product-list { opacity: 0.55; filter: grayscale(0.3); }
.qsa-detail-locked .qsa-product-list * { pointer-events: none !important; }
.qsa-detail-locked .qsa-inline-select,
.qsa-detail-locked .qsa-inline-qty { background: transparent !important; border-color: transparent !important; }
.qsa-detail-unlocked .qsa-product-list {
  box-shadow: 0 0 0 2px rgba(194, 0, 25, 0.15);
  border-radius: var(--qs-radius-sm);
}
.qsa-lock-btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 6px; padding: 0 10px; min-width: 36px;
}
.qsa-lock-btn-open {
  /* Subtle cue that editing is active, without the full primary-color weight. */
  border-color: rgba(194, 0, 25, 0.4);
  background: rgba(194, 0, 25, 0.06);
}
.qsa-lock-icon { font-size: 14px; line-height: 1; }

.qsa-inline-save {
  display: none;
  height: 28px; padding: 0 12px; font-size: 12px;
}
.qsa-product-line-dirty .qsa-inline-save { display: inline-flex; align-items: center; }
.qsa-product-line-dirty { box-shadow: inset 3px 0 0 var(--qs-warning, #E8A300); }
.qsa-product-line-name { font-weight: 700; color: var(--qs-text-heading); }
.qsa-product-line-qty { color: var(--qs-text-secondary); font-variant-numeric: tabular-nums; }
.qsa-product-line-none { background: var(--qs-bg-alt); }
.qsa-product-line-none .qsa-product-line-name,
.qsa-product-line-none .qsa-product-line-qty { color: var(--qs-text-muted); }

/* Empty state */
.qsa-empty {
  padding: 60px 20px; text-align: center; color: var(--qsa-text-muted);
}
.qsa-empty h3 { font-family: var(--qsa-font-heading); margin: 0 0 6px; color: var(--qsa-text-secondary); }

/* Responsive */
@media (max-width: 960px) {
  .qsa-summary { grid-template-columns: repeat(2, 1fr); }
  .qsa-table-head { display: none; }
  .qsa-row { grid-template-columns: 24px 1fr; gap: 10px; padding: 12px; }
  .qsa-row-location, .qsa-row-region, .qsa-row-rep, .qsa-row-chips, .qsa-row-total, .qsa-row-updated { grid-column: 2; }
  .qsa-table-filters { display: none; }
  .qsa-row-actions { grid-column: 2; justify-content: flex-start; }
  .qsa-detail { padding: 12px; }
}

/* ==================== Preview banner (impersonation) ==================== */
.qsa-preview-banner {
  position: sticky; top: 0; z-index: 150;
  display: flex; align-items: center; gap: 12px;
  padding: 10px 18px; background: #ffb020; color: #3b2500;
  font-weight: 600; font-size: 14px;
  border-bottom: 2px solid #d48f00; box-shadow: 0 2px 4px rgba(0,0,0,0.08);
}
.qsa-preview-banner-icon { font-size: 16px; }
.qsa-preview-banner-text { flex: 1; }
.qsa-preview-banner-exit {
  appearance: none; border: 1px solid #3b2500; background: #fff;
  color: #3b2500; padding: 4px 12px; border-radius: 4px;
  font-weight: 700; font-size: 13px; cursor: pointer;
}
.qsa-preview-banner-exit:hover { background: #3b2500; color: #ffb020; }

/* ==================== Master badge ==================== */
.qsa-master-badge {
  display: inline-block; padding: 1px 8px; margin-left: 6px;
  background: #c20019; color: #fff;
  font-size: 10px; font-weight: 700; letter-spacing: 0.5px;
  border-radius: 3px; vertical-align: middle;
}

/* ==================== Users & Permissions table ==================== */
.qsa-users-table .qsa-crud-row {
  border-bottom: 1px solid var(--qsa-border, #e4e4e8);
  padding: 12px 14px;
}
.qsa-perm-panel {
  background: #f9f9fb; border: 1px solid var(--qsa-border, #e4e4e8);
  border-radius: 4px; padding: 16px; margin: -4px 0 12px;
}
.qsa-perm-edit .qsa-form-row { margin-bottom: 12px; }
.qsa-perm-table {
  display: grid; gap: 2px;
  background: var(--qsa-border, #e4e4e8);
  border: 1px solid var(--qsa-border, #e4e4e8);
  border-radius: 4px; overflow: hidden;
}
.qsa-perm-table-head,
.qsa-perm-row {
  display: grid; grid-template-columns: 2fr 90px 90px;
  background: #fff; padding: 8px 12px; align-items: center;
  font-size: 13px;
}
.qsa-perm-table-head {
  background: #f0f0f3; font-weight: 700; color: var(--qsa-text-secondary);
}
.qsa-perm-table-head span:not(:first-child),
.qsa-perm-row span:not(:first-child) { text-align: center; }
.qsa-perm-row input[type="checkbox"] { width: 16px; height: 16px; cursor: pointer; }

/* ==================== Users table: swap action sets on Edit ==================== */
.qsa-user-actions-expanded { display: none; }
.qsa-user-row-expanded .qsa-user-actions-collapsed { display: none; }
.qsa-user-row-expanded .qsa-user-actions-expanded { display: inline; }

/* ==================== Distributor portal: qty stepper + carry checkbox ==================== */
/* Shared sizing: every control in the row is 36px tall so they line up cleanly. */
.qsp-qty-wrap { gap: 4px; align-items: center; }

/* Kill native number-input spin buttons in both Firefox and Chromium. */
.qsp-qty-input { -moz-appearance: textfield; appearance: textfield; }
.qsp-qty-input::-webkit-inner-spin-button,
.qsp-qty-input::-webkit-outer-spin-button { -webkit-appearance: none; appearance: none; margin: 0; }

/* Override the generic qty input size so it matches the stepper height. */
.qsp-qty-input {
  width: 56px; height: 36px; padding: 0 6px;
  font-size: 15px; font-weight: 700; text-align: center;
  border-radius: 4px;
  flex-shrink: 0;
}

.qsp-qty-step {
  width: 32px; height: 36px; padding: 0; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  background: #fff; border: 1px solid var(--qsp-border, #d7d7dc);
  border-radius: 4px; font-size: 18px; font-weight: 600; line-height: 1;
  color: var(--qsp-text-secondary, #3a3a40); cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
  user-select: none;
}
.qsp-qty-step:hover { background: #fff5f6; border-color: var(--qsp-primary, #c20019); color: var(--qsp-primary, #c20019); }
.qsp-qty-step:active { background: #ffe0e3; }
.qsp-qty-step:disabled {
  background: #f4f4f6; color: #bbb; cursor: not-allowed; border-color: #e4e4e8;
}

.qsp-qty-suffix { margin-left: 4px; }

/* Status badge already exists — keep matching 36px via the portal override above. */
.qsp-stock-row .qs-status-badge { height: 36px; box-sizing: border-box; }

/* Carry column — plain checkbox, centered, green check when on. */
.qsp-row-carry { display: flex; align-items: center; justify-content: center; }
.qsp-carry-check {
  width: 22px; height: 22px; margin: 0; cursor: pointer;
  accent-color: #1B5E20; /* green check when checked */
}

/* ==================== Admin: Webshop column in Distributors tab ==================== */
.qsa-crud-row-webshop {
  display: flex; align-items: center; justify-content: center;
}
.qsa-webshop-check {
  width: 20px; height: 20px; margin: 0; cursor: pointer;
  accent-color: #1B5E20;
}

/* ==================== Perms counter chip in Users & Permissions ==================== */
.qsa-perm-count {
  display: inline-block; padding: 3px 10px; min-width: 44px;
  font-family: var(--qsa-font-mono, 'Source Code Pro', monospace);
  font-size: 12px; font-weight: 700; letter-spacing: 0.3px;
  background: #FFF4D6; color: #8a6d3b;
  border: 1px solid #F0D891; border-radius: 12px;
  text-align: center;
}
.qsa-perm-count-zero {
  background: #f0f0f3; color: #6c6c72; border-color: #dcdce1;
}
.qsa-perm-count-full,
.qsa-perm-count-master {
  background: #E8F5E9; color: #1B5E20; border-color: #A5D6A7;
}