/* ── Sales home (پورتال فروش) v4 ─────────────────────────────────────────
   Built on dk-base.css. The job of this page: get an account for an order
   fast. Structure: hero with the one primary action + a one-line summary →
   ready-to-deliver stock list (click = open assign form for that product) →
   side column with shortcuts and the latest events / challenges.
   Legacy .sp-header (actor fields, hidden by style.css) is left in place. */

#salesPortalPage{ background:none !important; border:0 !important; box-shadow:none !important; padding:0 !important; color:var(--dk-text); }
#salesPortalPage .sp-shell{ max-width:1240px; margin:0 auto; padding:0 !important; background:none !important; border:0 !important; box-shadow:none !important; }
#salesPortalPage .sp-shell::before, #salesPortalPage .sp-shell::after{ content:none !important; }

#salesPortalPage .sx{ display:flex; flex-direction:column; gap:16px; }
#salesPortalPage .sx-hero{ display:flex; align-items:flex-end; justify-content:space-between; flex-wrap:wrap; gap:14px; }
#salesPortalPage .sx-date{ font-size:var(--dk-fs-sm); color:var(--dk-muted); margin-bottom:2px; }
#salesPortalPage .sx-summary{ display:flex; flex-wrap:wrap; align-items:center; gap:4px 18px; margin-top:4px; font-size:var(--dk-fs); color:var(--dk-muted); }
#salesPortalPage .sx-summary b{ color:var(--dk-text); font-weight:800; font-variant-numeric:tabular-nums; }
#salesPortalPage .sx-summary-link{
  margin:0; padding:0; border:0; background:none; box-shadow:none; font:inherit; color:var(--dk-muted); cursor:pointer;
  text-decoration:underline; text-decoration-color:var(--dk-border-strong); text-underline-offset:5px;
}
#salesPortalPage .sx-summary-link:hover{ color:var(--dk-accent); text-decoration-color:currentColor; }
#salesPortalPage .sx-hero-actions{ display:flex; align-items:center; gap:8px; }
#salesPortalPage .sx-cta{ height:var(--dk-h-lg); padding:0 18px !important; }
#salesPortalPage #sxRefreshBtn.is-busy .dk-ic{ animation:sx-spin .9s linear infinite; }
@keyframes sx-spin{ to{ transform:rotate(-360deg); } }

#salesPortalPage .sx-alerts:empty{ display:none; }

#salesPortalPage .sx-grid{ display:grid; grid-template-columns:minmax(0,1fr) 340px; gap:16px; align-items:start; }
#salesPortalPage .sx-side{ display:flex; flex-direction:column; gap:16px; min-width:0; }
#salesPortalPage .sx-card-sub{ margin-top:2px; font-size:var(--dk-fs-sm); color:var(--dk-muted); }

/* search in the stock card head */
#salesPortalPage .sx-search{ position:relative; display:flex; align-items:center; flex:0 1 220px; }
#salesPortalPage .sx-search > [data-sx-ic]{ position:absolute; inset-inline-start:10px; display:inline-flex; color:var(--dk-faint); pointer-events:none; }
#salesPortalPage .sx-search input{
  width:100%; height:36px !important; min-height:0 !important; margin:0 !important; padding:0 10px !important; padding-inline-start:34px !important;
  border-radius:var(--dk-r) !important; border:1px solid var(--dk-border) !important;
  background:var(--dk-surface-2) !important; color:var(--dk-text) !important;
  font:inherit !important; font-size:13px !important; box-shadow:none !important;
}
html[data-theme="dark"] #salesPortalPage .sx-search input{ background:rgba(15,23,42,.45) !important; }
#salesPortalPage .sx-search input:focus{ outline:none; border-color:var(--dk-accent) !important; box-shadow:var(--dk-focus) !important; }

/* stock rows */
#salesPortalPage .sx-stock-list{ display:flex; flex-direction:column; container-type:inline-size; }
#salesPortalPage .sx-row{
  display:grid; grid-template-columns:40px minmax(0,1fr) auto 72px 20px; align-items:center; gap:12px;
  width:100%; min-height:60px; margin:0; padding:8px 16px; border:0; border-radius:0; background:none; box-shadow:none;
  font:inherit; color:var(--dk-text); text-align:start; cursor:pointer; transition:background-color .12s;
}
#salesPortalPage .sx-row + .sx-row{ border-top:1px solid var(--dk-border); }
#salesPortalPage .sx-row:hover{ background:var(--dk-hover); }
#salesPortalPage .sx-row:focus-visible{ outline:2px solid var(--dk-accent); outline-offset:-2px; }
#salesPortalPage .sx-row[aria-disabled="true"]{ cursor:default; }
#salesPortalPage .sx-row[aria-disabled="true"] .sx-row-icon,
#salesPortalPage .sx-row[aria-disabled="true"] .sx-row-name{ opacity:.6; }
#salesPortalPage .sx-row-icon{
  width:40px; height:40px; border-radius:10px; overflow:hidden; display:inline-grid; place-items:center;
  background:var(--dk-chip); color:var(--dk-accent); font-weight:800; font-size:15px;
}
#salesPortalPage .sx-row-icon img{ width:100%; height:100%; object-fit:cover; }
#salesPortalPage .sx-row-name{ display:flex; flex-direction:column; min-width:0; }
#salesPortalPage .sx-row-name b{ font-size:var(--dk-fs-md); font-weight:800; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
#salesPortalPage .sx-row-name small{ font-size:12px; color:var(--dk-faint); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; text-align:end; }
#salesPortalPage .sx-row-count{ display:flex; flex-direction:column; align-items:flex-end; line-height:1.3; }
#salesPortalPage .sx-row-count b{ font-size:18px; font-weight:800; font-variant-numeric:tabular-nums; }
#salesPortalPage .sx-row-count small{ font-size:11.5px; color:var(--dk-muted); }
#salesPortalPage .sx-row[data-st="critical"] .sx-row-count b,
#salesPortalPage .sx-row[data-st="low"] .sx-row-count b{ color:var(--dk-warn); }
#salesPortalPage .sx-row[data-st="out"] .sx-row-count b{ color:var(--dk-danger); }
#salesPortalPage .sx-row-go{ display:inline-flex; color:var(--dk-faint); transition:color .12s, transform .12s; }
#salesPortalPage .sx-row:hover .sx-row-go{ color:var(--dk-accent); transform:translateX(-2px); }
@container (max-width:460px){
  #salesPortalPage .sx-row{ grid-template-columns:36px minmax(0,1fr) 60px; grid-template-areas:"icon name count" "icon pill count"; row-gap:2px; }
  #salesPortalPage .sx-row-icon{ grid-area:icon; width:36px; height:36px; }
  #salesPortalPage .sx-row-name{ grid-area:name; }
  #salesPortalPage .sx-row > .dk-pill, #salesPortalPage .sx-row > span:empty{ grid-area:pill; justify-self:start; }
  #salesPortalPage .sx-row-count{ grid-area:count; }
  #salesPortalPage .sx-row-go{ display:none; }
}

/* shortcuts */
#salesPortalPage .sx-links{ display:flex; flex-direction:column; padding:6px; }
#salesPortalPage .sx-link{
  display:flex !important; align-items:center; gap:12px; width:100%; min-height:52px; margin:0 !important; padding:8px 10px !important;
  border:0 !important; border-radius:var(--dk-r) !important; background:none !important; box-shadow:none !important;
  font:inherit !important; color:var(--dk-text) !important; text-align:start; cursor:pointer;
}
#salesPortalPage .sx-link:hover{ background:var(--dk-hover) !important; }
#salesPortalPage .sx-link:focus-visible{ outline:2px solid var(--dk-accent); outline-offset:-2px; }
#salesPortalPage .sx-link-ic{ width:34px; height:34px; flex:0 0 34px; display:inline-grid; place-items:center; border-radius:9px; background:var(--dk-chip); color:var(--dk-muted); }
#salesPortalPage .sx-link:hover .sx-link-ic{ color:var(--dk-accent); background:var(--dk-accent-soft); }
#salesPortalPage .sx-link-text{ display:flex; flex-direction:column; min-width:0; }
#salesPortalPage .sx-link-text b{ font-size:13.5px; font-weight:800; }
#salesPortalPage .sx-link-text small{ font-size:12px; color:var(--dk-muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

/* events / challenges feed (markup from ui.js renderSalesPortalSummaryLatest) */
#salesPortalPage .sx-feed{ display:flex; flex-direction:column; }
#salesPortalPage .sx-feed .sp-summary-item{
  display:flex; align-items:center; gap:10px; margin:0; padding:10px 16px; border:0; border-radius:0; background:none; box-shadow:none;
}
#salesPortalPage .sx-feed .sp-summary-item + .sp-summary-item{ border-top:1px solid var(--dk-border); }
#salesPortalPage .sx-feed .sp-summary-item-thumb{
  width:36px; height:36px; flex:0 0 36px; border-radius:9px; object-fit:cover; display:inline-grid; place-items:center;
  background:var(--dk-chip); color:var(--dk-muted); border:0; font-size:0;
}
#salesPortalPage .sx-feed .sp-summary-item-body{ min-width:0; }
#salesPortalPage .sx-feed .sp-summary-item-title{ font-size:13.5px; font-weight:700; color:var(--dk-text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
#salesPortalPage .sx-feed .sp-summary-item-desc{ font-size:12px; color:var(--dk-muted); display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
#salesPortalPage .sx-feed .sp-summary-empty{ padding:22px 16px; border:0; background:none; text-align:center; font-size:13px; color:var(--dk-muted); }

/* offline state (renderOffline writes legacy iv-* markup into the hero/alert slots) */
#salesPortalPage .sx-summary .iv-stat-card{ display:none; }
#salesPortalPage .sx-alerts .iv-alert-card{
  padding:12px 16px; border-radius:var(--dk-r-lg); border:1px solid color-mix(in srgb, var(--dk-warn) 35%, transparent);
  background:var(--dk-warn-soft); color:var(--dk-text);
}

@media (max-width:1100px){ #salesPortalPage .sx-grid{ grid-template-columns:minmax(0,1fr); } }
@media (max-width:640px){
  #salesPortalPage .sx-hero-actions{ width:100%; }
  #salesPortalPage .sx-cta{ flex:1; }
  #salesPortalPage .dk-card-head{ flex-wrap:wrap; }
  #salesPortalPage .sx-search{ flex:1 1 100%; }
}
@media (prefers-reduced-motion:reduce){ #salesPortalPage .sx-row, #salesPortalPage .sx-row-go{ transition:none; } }

/* legacy overrides: section is flex and .sp-shell a grid; #salesInventoryStats was a 220px card grid */
#salesPortalPage .sp-shell{ display:block !important; width:100%; flex:1 1 auto; }
#salesPortalPage #salesInventoryStats{
  display:flex !important; flex-wrap:wrap; align-items:center; gap:4px 18px;
  grid-template-columns:none !important; margin:4px 0 0 !important; padding:0 !important; background:none !important; border:0 !important;
}
#salesPortalPage #salesInventoryStats > *{ display:inline; width:auto !important; }
#salesPortalPage #salesInventoryAlerts{ display:block !important; margin:0 !important; }
#salesPortalPage #salesInventoryAlerts:empty{ display:none !important; }

/* sold-out products: collapsed behind a quiet full-width toggle at the bottom */
#salesPortalPage .sx-soldout-toggle{
  display:flex; align-items:center; justify-content:center; gap:6px; width:100%;
  padding:11px 16px; margin:0; border:0; border-top:1px solid var(--dk-border); border-radius:0;
  background:none; color:var(--dk-muted); font:inherit; font-size:13px; font-weight:600; cursor:pointer;
}
#salesPortalPage .sx-soldout-toggle:hover{ background:var(--dk-hover); color:var(--dk-text); }
#salesPortalPage .sx-soldout-toggle .dk-ic{ width:15px; height:15px; transition:transform .15s ease; }
#salesPortalPage .sx-soldout-toggle[aria-expanded="true"] .dk-ic{ transform:rotate(180deg); }
#salesPortalPage .sx-row[data-st="out"]{ opacity:.7; }