:root{--bg:#f7f7fb;--card:#fff;--text:#1f2937;--muted:#6b7280;--brand:#7c3aed;--line:#e5e7eb;--orange:#f59e0b;--green:#16a34a;--dark:#374151}
*{box-sizing:border-box}
html,body{width:100%;height:100%;margin:0;overflow:hidden;font-family:Inter,Segoe UI,Roboto,Arial,sans-serif;background:var(--bg);color:var(--text)}
.shell-topbar{height:94px;display:flex;align-items:center;justify-content:space-between;gap:18px;padding:12px 16px;background:linear-gradient(135deg,#5b21b6,#f59e0b);color:#fff;box-shadow:0 3px 16px rgba(31,41,55,.16);position:relative;z-index:10}
.brand-wrap{display:flex;align-items:center;gap:13px;min-width:260px}.brand-logo{width:104px;height:auto;display:block;filter:drop-shadow(0 3px 10px rgba(0,0,0,.18))}.brand-wrap h1{font-size:21px;line-height:1.15;margin:0;white-space:nowrap}.brand-wrap p{margin:4px 0 0;font-size:12px;opacity:.92}
.shell-actions{display:grid;grid-template-columns:auto auto auto auto;grid-template-areas:"platform role refresh logout" "status status status status";gap:8px;align-items:center;justify-content:end;min-width:0}button{border:0;border-radius:11px;padding:10px 13px;font-weight:800;cursor:pointer;box-shadow:0 1px 2px rgba(0,0,0,.12)}button:disabled{opacity:.55;cursor:not-allowed}.refresh-all{grid-area:refresh;background:#16a34a;color:#fff;border:1px solid rgba(255,255,255,.25);white-space:nowrap}button.secondary.dark{background:#374151;color:#fff}.logout-main{grid-area:logout;min-width:92px}.role-pill{grid-area:role;display:inline-flex;align-items:center;max-width:320px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding:8px 11px;border-radius:999px;background:rgba(255,255,255,.18);border:1px solid rgba(255,255,255,.24);font-size:12px;font-weight:800;color:#fff}.platform-buttons{grid-area:platform;display:flex;gap:6px;align-items:center;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.22);border-radius:14px;padding:4px}.platform-btn{background:rgba(255,255,255,.16);color:#fff;border:1px solid rgba(255,255,255,.20);box-shadow:none;min-width:92px;padding:9px 12px}.platform-btn.active{background:#fff;color:#4c1d95;border-color:#fff}.refresh-status{grid-area:status;font-size:12px;color:rgba(255,255,255,.90);line-height:1.25;text-align:right;max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.workspace-shell{height:calc(100vh - 94px);position:relative;background:#f7f7fb}.workspace-frame{position:absolute;inset:0;width:100%;height:100%;border:0;display:none;background:#fff}.workspace-frame.active{display:block}
.shell-toast{position:fixed;right:18px;bottom:18px;max-width:520px;background:#111827;color:#fff;border-radius:14px;padding:13px 15px;box-shadow:0 20px 60px rgba(15,23,42,.3);font-size:13px;line-height:1.45;z-index:9999}.shell-toast.success{background:#166534}.shell-toast.error{background:#991b1b}.prompt-overlay{position:fixed;inset:0;background:rgba(15,23,42,.55);display:flex;align-items:center;justify-content:center;z-index:99999;padding:20px}.prompt-card{width:min(620px,calc(100vw - 36px));background:#fff;color:#111827;border-radius:20px;border:1px solid #e5e7eb;box-shadow:0 24px 90px rgba(15,23,42,.35);padding:22px}.prompt-card h2{margin:0 0 8px;font-size:22px}.prompt-card p{line-height:1.5;color:#475569}.prompt-actions{display:flex;gap:10px;flex-wrap:wrap;justify-content:flex-end;margin-top:16px}.prompt-actions .primary{background:#16a34a;color:#fff}.prompt-actions .secondary{background:#fff;color:#374151;border:1px solid #d1d5db}.prompt-actions .danger{background:#dc2626;color:#fff}
@media(max-width:1100px){.brand-logo{width:90px}.brand-wrap h1{font-size:18px}.brand-wrap p{display:none}.role-pill{max-width:220px}.platform-btn{min-width:82px}.shell-actions{grid-template-columns:auto auto auto auto}}
@media(max-width:900px){.shell-topbar{height:auto;min-height:118px;align-items:flex-start;flex-direction:column}.brand-wrap{min-width:0}.shell-actions{width:100%;grid-template-columns:1fr 1fr;grid-template-areas:"platform platform" "role role" "refresh logout" "status status";justify-content:stretch}.platform-buttons{width:100%;display:grid;grid-template-columns:1fr 1fr}.platform-btn{min-width:0}.refresh-all,.logout-main{width:100%}.refresh-status{text-align:left;white-space:normal}.workspace-shell{height:calc(100vh - 168px)}.brand-wrap h1{white-space:normal}}


/* One-logo compact combined header */
.shell-topbar{height:78px!important;min-height:78px!important;align-items:center!important;flex-direction:row!important;padding:10px 16px!important;}
.brand-logo{width:88px!important;}
.brand-wrap{gap:12px!important;min-width:360px!important;}
.brand-wrap h1{font-size:20px!important;white-space:nowrap!important;}
.brand-wrap p{display:none!important;}
.shell-actions{display:flex!important;align-items:center!important;justify-content:flex-end!important;gap:8px!important;flex-wrap:wrap!important;min-width:0!important;}
.platform-buttons{display:flex!important;gap:6px!important;align-items:center!important;width:auto!important;}
.platform-btn{min-width:88px!important;padding:9px 12px!important;}
.save-current{background:#4b5563!important;color:#fff!important;white-space:nowrap!important;}
.refresh-all,.logout-main{width:auto!important;white-space:nowrap!important;}
.role-pill{max-width:260px!important;}
.refresh-status{font-size:11px!important;opacity:.92!important;max-width:420px!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important;text-align:left!important;}
.workspace-shell{height:calc(100vh - 78px)!important;}
@media(max-width:1100px){
  .shell-topbar{height:auto!important;min-height:104px!important;align-items:flex-start!important;flex-direction:column!important;}
  .brand-wrap{min-width:0!important;}
  .brand-wrap h1{white-space:normal!important;}
  .shell-actions{width:100%!important;justify-content:flex-start!important;}
  .platform-buttons{display:grid!important;grid-template-columns:1fr 1fr!important;flex:1 1 280px!important;}
  .platform-btn{min-width:0!important;}
  .refresh-status{max-width:100%!important;white-space:normal!important;}
  .workspace-shell{height:calc(100vh - 132px)!important;}
}


/* Viewer / customer combined Catalogue Summary mode */
body.viewer-catalogue-mode .platform-buttons,
body.viewer-catalogue-mode .save-current{
  display:none!important;
}
body.viewer-catalogue-mode .workspace-frame{
  display:block!important;
  position:absolute!important;
  width:1px!important;
  height:1px!important;
  opacity:0!important;
  pointer-events:none!important;
  left:-9999px!important;
  top:-9999px!important;
}
body.viewer-catalogue-mode .workspace-shell{
  display:none!important;
}
.catalogue-view{
  display:none;
  height:calc(100vh - 78px);
  overflow:auto;
  padding:16px;
  background:#f7f7fb;
}
body.viewer-catalogue-mode .catalogue-view{display:block;}
.catalogue-head-card,.catalogue-search-card,.catalogue-card,.catalogue-kpis{
  background:#fff;
  border:1px solid #e5e7eb;
  border-radius:16px;
  padding:14px 16px;
  margin-bottom:14px;
  box-shadow:0 6px 20px rgba(31,41,55,.04);
}
.catalogue-head-card{display:flex;align-items:center;justify-content:space-between;gap:12px;}
.catalogue-head-card h2,.catalogue-card h3{margin:0 0 6px;}
.catalogue-head-card p{margin:0;color:#64748b;font-size:13px;}
.catalogue-search-card{display:flex;gap:8px;align-items:center;flex-wrap:wrap;}
.catalogue-search-card input{flex:1 1 280px;min-width:220px;border:1px solid #cbd5e1;border-radius:10px;padding:10px 12px;font-size:14px;}
.catalogue-search-card select{min-width:170px;border:1px solid #cbd5e1;border-radius:10px;padding:10px 12px;font-size:14px;background:#fff;color:#111827;font-weight:800;}
.catalogue-kpis{display:grid;grid-template-columns:repeat(4,minmax(130px,1fr));gap:10px;}
.catalogue-kpis div{background:#f8fafc;border:1px solid #e5e7eb;border-radius:14px;padding:12px;}
.catalogue-kpis b{display:block;font-size:24px;color:#111827;}
.catalogue-kpis span{font-size:12px;color:#64748b;font-weight:700;}
.catalogue-table-wrap{overflow:auto;border:1px solid #e5e7eb;border-radius:12px;background:#fff;max-height:42vh;}
.catalogue-table{border-collapse:separate;border-spacing:0;width:100%;min-width:980px;font-size:13px;}
.catalogue-table th{position:sticky;top:0;background:#111827;color:#fff;text-align:left;padding:9px;white-space:nowrap;z-index:2;}
.catalogue-table td{border-top:1px solid #e5e7eb;padding:8px;vertical-align:middle;white-space:nowrap;}
.platform-tag{display:inline-flex;padding:4px 8px;border-radius:999px;font-size:11px;font-weight:900;background:#ede9fe;color:#5b21b6;border:1px solid #ddd6fe;}
.platform-tag.lazada{background:#fff7ed;color:#c2410c;border-color:#fed7aa;}
.muted{color:#64748b;font-size:13px;}
.catalogue-card.error{background:#fef2f2;border-color:#fecaca;color:#991b1b;}
@media(max-width:1100px){
  .catalogue-view{height:calc(100vh - 132px);padding:12px;}
  .catalogue-head-card{align-items:flex-start;flex-direction:column;}
  .catalogue-kpis{grid-template-columns:repeat(2,minmax(130px,1fr));}
}
@media(max-width:520px){.catalogue-kpis{grid-template-columns:1fr}.catalogue-search-card input,.catalogue-search-card select,.catalogue-search-card button{width:100%;}.catalogue-table{min-width:880px;}}


/* Combined web login + deployment polish */
.web-login-overlay{position:fixed;inset:0;z-index:999999;background:linear-gradient(135deg,#fff7ed 0%,#faf5ff 55%,#fef2f2 100%);display:flex;align-items:center;justify-content:center;padding:18px;}
.web-login-card{width:440px;max-width:calc(100vw - 28px);background:#fff;border:1px solid #e5e7eb;border-radius:22px;box-shadow:0 18px 60px rgba(0,0,0,.14);padding:28px;text-align:center;color:#111827;}
.web-login-logo{width:150px;height:auto;margin:0 auto 14px;display:block}.web-login-card h1{font-size:22px;margin:0 0 4px}.web-login-card p{font-size:13px;color:#6b7280;margin:0 0 14px}.web-login-notice{background:#eff6ff;border:1px solid #bfdbfe;color:#1e40af;padding:10px;border-radius:12px;font-size:13px;text-align:left;margin:10px 0;line-height:1.45}.web-login-card label{display:block;text-align:left;font-size:13px;font-weight:700;margin:12px 0 6px;color:#374151}.web-login-card input{width:100%;border:1px solid #d1d5db;border-radius:12px;padding:12px;font-size:14px;background:#fff}.web-login-card input:focus{outline:none;border-color:#8b5cf6;box-shadow:0 0 0 3px rgba(139,92,246,.14)}.web-login-card button{width:100%;border:0;border-radius:13px;padding:12px 14px;font-weight:800;font-size:14px;color:white;background:linear-gradient(90deg,#f59e0b,#ec4899,#8b5cf6);cursor:pointer;margin-top:14px}.web-login-card button:disabled{opacity:.55;cursor:not-allowed}.web-remember{display:flex!important;align-items:center;gap:8px;margin:10px 0 0!important;font-weight:600!important;color:#475569!important;cursor:pointer}.web-remember input{width:16px!important;height:16px!important;padding:0!important;accent-color:#7c3aed}.web-login-error{display:none;background:#fef2f2;border:1px solid #fecaca;color:#991b1b;padding:10px;border-radius:12px;font-size:13px;text-align:left;margin-top:12px;line-height:1.45}.web-login-status{font-size:12px;color:#6b7280;margin-top:12px;min-height:16px}.web-login-copy{margin-top:16px;font-size:11px;color:#9ca3af}body.auth-locked .shell-topbar,body.auth-locked .workspace-shell,body.auth-locked .catalogue-view{filter:blur(2px);pointer-events:none;}
body[data-build="tablet"] .brand-wrap h1{font-size:18px!important;}
body[data-build="tablet"] .workspace-shell{height:calc(100vh - 78px)!important;}
body[data-force-catalogue="true"] .platform-buttons,body[data-force-catalogue="true"] .save-current{display:none!important;}
body[data-force-catalogue="true"] .shell-topbar{height:auto!important;min-height:92px!important;align-items:flex-start!important;flex-direction:column!important;}
body[data-force-catalogue="true"] .brand-logo{width:82px!important;}body[data-force-catalogue="true"] .brand-wrap{min-width:0!important;}body[data-force-catalogue="true"] .brand-wrap h1{font-size:19px!important;white-space:normal!important;}.phone-catalogue-mode .catalogue-view{height:calc(100vh - 132px)!important;padding:10px!important;}.phone-catalogue-mode .catalogue-head-card,.phone-catalogue-mode .catalogue-search-card,.phone-catalogue-mode .catalogue-card,.phone-catalogue-mode .catalogue-kpis{border-radius:12px;padding:11px;margin-bottom:10px;}.phone-catalogue-mode .catalogue-kpis{grid-template-columns:1fr 1fr;}.phone-catalogue-mode .catalogue-table-wrap{max-height:48vh;}.phone-catalogue-mode .catalogue-table{min-width:980px;font-size:12px}.phone-catalogue-mode .catalogue-table td,.phone-catalogue-mode .catalogue-table th{padding:7px}.phone-catalogue-mode .catalogue-search-card{display:grid;grid-template-columns:1fr;}.phone-catalogue-mode .catalogue-search-card input,.phone-catalogue-mode .catalogue-search-card select,.phone-catalogue-mode .catalogue-search-card button{width:100%;min-width:0!important;}
@media(max-width:520px){.phone-catalogue-mode .catalogue-kpis{grid-template-columns:1fr}.phone-catalogue-mode .shell-actions{display:grid!important;grid-template-columns:1fr!important}.phone-catalogue-mode .role-pill,.phone-catalogue-mode .refresh-all,.phone-catalogue-mode .logout-main{width:100%!important;max-width:none!important;justify-content:center}.phone-catalogue-mode .refresh-status{width:100%;text-align:left!important}.phone-catalogue-mode .catalogue-table{min-width:960px;}}

/* Phone catalogue table: keep SKU ID visible while horizontal scrolling */
.catalogue-table[data-catalogue-table="promo"] th:nth-child(5),
.catalogue-table[data-catalogue-table="promo"] td:nth-child(5),
.catalogue-table[data-catalogue-table="sku"] th:nth-child(2),
.catalogue-table[data-catalogue-table="sku"] td:nth-child(2){
  position: sticky;
  left: 0;
  z-index: 5;
  min-width: 150px;
  max-width: 190px;
  background: #ffffff;
  font-weight: 800;
  box-shadow: 2px 0 0 rgba(229,231,235,.95), 6px 0 14px rgba(15,23,42,.06);
  white-space: nowrap;
}
.catalogue-table[data-catalogue-table="promo"] th:nth-child(5),
.catalogue-table[data-catalogue-table="sku"] th:nth-child(2){
  z-index: 8;
  background: #111827;
  color: #ffffff;
}
.catalogue-table[data-catalogue-table="promo"] td:nth-child(5),
.catalogue-table[data-catalogue-table="sku"] td:nth-child(2){
  color: #0f172a;
}
.phone-catalogue-mode .catalogue-table[data-catalogue-table="promo"] th:nth-child(5),
.phone-catalogue-mode .catalogue-table[data-catalogue-table="promo"] td:nth-child(5),
.phone-catalogue-mode .catalogue-table[data-catalogue-table="sku"] th:nth-child(2),
.phone-catalogue-mode .catalogue-table[data-catalogue-table="sku"] td:nth-child(2){
  min-width: 155px;
  max-width: 175px;
}


/* V1.0 phone natural page scroll fix: page scrolls vertically, tables scroll horizontally. */
html, body{
  height:auto!important;
  min-height:100%!important;
  overflow-y:auto!important;
  overflow-x:hidden!important;
  -webkit-overflow-scrolling:touch!important;
}
.shell-topbar{
  position:sticky!important;
  top:0!important;
  z-index:1000!important;
}
body[data-force-catalogue="true"],
body.phone-catalogue-mode,
body.viewer-catalogue-mode{
  height:auto!important;
  min-height:100dvh!important;
  overflow-y:auto!important;
  overflow-x:hidden!important;
}
body[data-force-catalogue="true"] .catalogue-view,
body.phone-catalogue-mode .catalogue-view,
body.viewer-catalogue-mode .catalogue-view,
.catalogue-view{
  height:auto!important;
  min-height:calc(100dvh - 132px)!important;
  max-height:none!important;
  overflow:visible!important;
  padding-bottom:120px!important;
}
.catalogue-card{overflow:visible!important;}
.catalogue-table-wrap,
.phone-catalogue-mode .catalogue-table-wrap{
  height:auto!important;
  max-height:none!important;
  overflow-x:auto!important;
  overflow-y:visible!important;
  -webkit-overflow-scrolling:touch!important;
  touch-action:pan-x pan-y!important;
}
.catalogue-table{width:max-content!important;}
.phone-catalogue-mode .catalogue-table{min-width:960px!important;}
@supports (height:100svh){
  body[data-force-catalogue="true"] .catalogue-view,
  body.phone-catalogue-mode .catalogue-view,
  body.viewer-catalogue-mode .catalogue-view,
  .catalogue-view{min-height:calc(100svh - 132px)!important;}
}


/* V1.0 balanced phone compact scroll fix
   Keep catalogue sections compact while allowing vertical scrolling inside each table panel. */
html, body{
  height:100%!important;
  min-height:100%!important;
  overflow:hidden!important;
}
.shell-topbar{
  position:relative!important;
  top:auto!important;
}
body[data-force-catalogue="true"],
body.phone-catalogue-mode,
body.viewer-catalogue-mode{
  height:100dvh!important;
  min-height:100dvh!important;
  max-height:100dvh!important;
  overflow:hidden!important;
}
body[data-force-catalogue="true"] .catalogue-view,
body.phone-catalogue-mode .catalogue-view,
body.viewer-catalogue-mode .catalogue-view,
.catalogue-view{
  height:calc(100dvh - 132px)!important;
  min-height:0!important;
  max-height:calc(100dvh - 132px)!important;
  overflow-y:auto!important;
  overflow-x:hidden!important;
  padding-bottom:24px!important;
  -webkit-overflow-scrolling:touch!important;
}
.catalogue-card{
  overflow:hidden!important;
}
.catalogue-table-wrap,
.phone-catalogue-mode .catalogue-table-wrap{
  height:auto!important;
  max-height:38dvh!important;
  overflow:auto!important;
  -webkit-overflow-scrolling:touch!important;
  touch-action:auto!important;
}
.catalogue-table{width:max-content!important;}
.phone-catalogue-mode .catalogue-table{min-width:960px!important;}
@supports(height:100svh){
  body[data-force-catalogue="true"],body.phone-catalogue-mode,body.viewer-catalogue-mode{height:100svh!important;min-height:100svh!important;max-height:100svh!important;}
  body[data-force-catalogue="true"] .catalogue-view,body.phone-catalogue-mode .catalogue-view,body.viewer-catalogue-mode .catalogue-view,.catalogue-view{height:calc(100svh - 132px)!important;max-height:calc(100svh - 132px)!important;}
  .catalogue-table-wrap,.phone-catalogue-mode .catalogue-table-wrap{max-height:38svh!important;}
}

/* V1.0 stable phone scroll override
   Single vertical scroll owner = the page. Tables only scroll left/right.
   This prevents SKU Selling Price from getting trapped in nested scroll panels. */
html, body{
  height:auto!important;
  min-height:100%!important;
  max-height:none!important;
  overflow-y:auto!important;
  overflow-x:hidden!important;
  -webkit-overflow-scrolling:touch!important;
}
body[data-force-catalogue="true"],
body.phone-catalogue-mode,
body.viewer-catalogue-mode{
  height:auto!important;
  min-height:100dvh!important;
  max-height:none!important;
  overflow-y:auto!important;
  overflow-x:hidden!important;
}
.shell-topbar{
  position:sticky!important;
  top:0!important;
  z-index:1000!important;
}
body[data-force-catalogue="true"] .catalogue-view,
body.phone-catalogue-mode .catalogue-view,
body.viewer-catalogue-mode .catalogue-view,
.catalogue-view{
  height:auto!important;
  min-height:calc(100dvh - 132px)!important;
  max-height:none!important;
  overflow:visible!important;
  padding-bottom:140px!important;
  -webkit-overflow-scrolling:touch!important;
}
.catalogue-card,
.phone-catalogue-mode .catalogue-card{
  overflow:visible!important;
}
.catalogue-table-wrap,
.phone-catalogue-mode .catalogue-table-wrap{
  height:auto!important;
  min-height:0!important;
  max-height:none!important;
  overflow-x:auto!important;
  overflow-y:visible!important;
  -webkit-overflow-scrolling:touch!important;
  touch-action:pan-x pan-y!important;
}
.phone-catalogue-mode .catalogue-table{
  min-width:960px!important;
  width:max-content!important;
  font-size:12px!important;
}
.phone-catalogue-mode .catalogue-table th,
.phone-catalogue-mode .catalogue-table td{
  padding:6px 7px!important;
  line-height:1.25!important;
}
.phone-catalogue-mode .catalogue-head-card,
.phone-catalogue-mode .catalogue-search-card,
.phone-catalogue-mode .catalogue-card,
.phone-catalogue-mode .catalogue-kpis{
  margin-bottom:9px!important;
}


/* FINAL PHONE TABLE SCROLL FIX - no cards, no nested vertical table scroll.
   The page scrolls vertically to the very bottom; each table scrolls horizontally only.
   Platform + SKU columns stay pinned so SKU ID is always visible. */
html, body{
  width:100%!important;
  height:auto!important;
  min-height:100%!important;
  max-height:none!important;
  overflow-y:auto!important;
  overflow-x:hidden!important;
  -webkit-overflow-scrolling:touch!important;
  overscroll-behavior:auto!important;
}
body[data-force-catalogue="true"],
body.phone-catalogue-mode,
body.viewer-catalogue-mode{
  height:auto!important;
  min-height:100dvh!important;
  max-height:none!important;
  overflow-y:auto!important;
  overflow-x:hidden!important;
}
.shell-topbar{
  position:sticky!important;
  top:0!important;
  z-index:1000!important;
  height:auto!important;
  min-height:0!important;
  padding:8px 10px!important;
}
.brand-logo{width:72px!important;}
.brand-wrap{gap:8px!important;min-width:0!important;}
.brand-wrap h1{font-size:16px!important;line-height:1.15!important;white-space:normal!important;}
.shell-actions{gap:6px!important;}
.role-pill{font-size:11px!important;padding:6px 8px!important;max-width:100%!important;}
.refresh-all,.logout-main{padding:8px 10px!important;font-size:12px!important;}
.refresh-status{font-size:10px!important;line-height:1.25!important;white-space:normal!important;}
.workspace-shell{display:none!important;}
.catalogue-view,
body[data-force-catalogue="true"] .catalogue-view,
body.phone-catalogue-mode .catalogue-view,
body.viewer-catalogue-mode .catalogue-view{
  display:block!important;
  height:auto!important;
  min-height:calc(100dvh - 104px)!important;
  max-height:none!important;
  overflow:visible!important;
  padding:10px!important;
  padding-bottom:160px!important;
  -webkit-overflow-scrolling:touch!important;
}
.catalogue-head-card,.catalogue-search-card,.catalogue-card,.catalogue-kpis{
  border-radius:12px!important;
  padding:10px!important;
  margin-bottom:10px!important;
}
.catalogue-head-card{display:flex!important;align-items:flex-start!important;flex-direction:column!important;}
.catalogue-head-card h2{font-size:18px!important;}
.catalogue-head-card p{font-size:12px!important;}
.catalogue-search-card{display:grid!important;grid-template-columns:1fr!important;gap:8px!important;}
.catalogue-search-card input,
.catalogue-search-card select,
.catalogue-search-card button{width:100%!important;min-width:0!important;}
.catalogue-kpis{grid-template-columns:1fr 1fr!important;gap:8px!important;}
.catalogue-kpis b{font-size:18px!important;}
.catalogue-card{overflow:visible!important;}
.catalogue-table-wrap{
  width:100%!important;
  height:auto!important;
  min-height:0!important;
  max-height:none!important;
  overflow-x:auto!important;
  overflow-y:visible!important;
  -webkit-overflow-scrolling:touch!important;
  touch-action:pan-x pan-y!important;
  border-radius:10px!important;
}
.catalogue-table{
  border-collapse:separate!important;
  border-spacing:0!important;
  width:max-content!important;
  min-width:960px!important;
  font-size:12px!important;
}
.catalogue-table[data-catalogue-table="sku"]{min-width:760px!important;}
.catalogue-table th,
.catalogue-table td{
  padding:6px 7px!important;
  line-height:1.25!important;
  white-space:nowrap!important;
  background-clip:padding-box!important;
}
.catalogue-table th{position:sticky!important;top:0!important;z-index:5!important;}
/* Pin Platform then SKU so SKU ID stays visible while horizontal scrolling */
.catalogue-table th:nth-child(1),
.catalogue-table td:nth-child(1){
  position:sticky!important;
  left:0!important;
  z-index:6!important;
  min-width:86px!important;
  max-width:86px!important;
  background:#fff!important;
  box-shadow:2px 0 0 rgba(229,231,235,.95)!important;
}
.catalogue-table th:nth-child(1){z-index:9!important;background:#111827!important;color:#fff!important;}
.catalogue-table th:nth-child(2),
.catalogue-table td:nth-child(2){
  position:sticky!important;
  left:86px!important;
  z-index:6!important;
  min-width:150px!important;
  max-width:150px!important;
  background:#fff!important;
  font-weight:800!important;
  box-shadow:2px 0 0 rgba(229,231,235,.95)!important;
}
.catalogue-table th:nth-child(2){z-index:9!important;background:#111827!important;color:#fff!important;}
.platform-tag{font-size:10px!important;padding:3px 6px!important;}
@supports(height:100svh){
  body[data-force-catalogue="true"],body.phone-catalogue-mode,body.viewer-catalogue-mode{min-height:100svh!important;}
  .catalogue-view,body[data-force-catalogue="true"] .catalogue-view,body.phone-catalogue-mode .catalogue-view,body.viewer-catalogue-mode .catalogue-view{min-height:calc(100svh - 104px)!important;}
}


/* V1.0 catalogue 10-row pagination + compact phone banner */
.catalogue-pagination{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin:8px 0 0;
  padding:9px 10px;
  border:1px solid #e5e7eb;
  border-radius:12px;
  background:#f8fafc;
  color:#475569;
  font-size:12px;
}
.catalogue-page-info{font-weight:800;line-height:1.35;}
.catalogue-page-actions{display:flex;gap:8px;}
.catalogue-page-actions button{padding:7px 11px;border-radius:9px;box-shadow:none;}
.catalogue-page-actions button:disabled{opacity:.45;cursor:not-allowed;}
body.phone-catalogue-mode .shell-topbar,
body[data-force-catalogue="true"] .shell-topbar{
  min-height:72px!important;
  height:auto!important;
  padding:7px 10px!important;
  gap:6px!important;
}
body.phone-catalogue-mode .brand-logo,
body[data-force-catalogue="true"] .brand-logo{width:54px!important;}
body.phone-catalogue-mode .brand-wrap,
body[data-force-catalogue="true"] .brand-wrap{gap:8px!important;min-width:0!important;}
body.phone-catalogue-mode .brand-wrap h1,
body[data-force-catalogue="true"] .brand-wrap h1{font-size:16px!important;line-height:1.1!important;}
body.phone-catalogue-mode .brand-wrap p,
body[data-force-catalogue="true"] .brand-wrap p{display:none!important;}
body.phone-catalogue-mode .shell-actions,
body[data-force-catalogue="true"] .shell-actions{gap:6px!important;width:100%!important;}
body.phone-catalogue-mode .role-pill,
body[data-force-catalogue="true"] .role-pill{padding:6px 9px!important;font-size:11px!important;}
body.phone-catalogue-mode .refresh-all,
body.phone-catalogue-mode .logout-main,
body[data-force-catalogue="true"] .refresh-all,
body[data-force-catalogue="true"] .logout-main{padding:7px 9px!important;font-size:12px!important;}
body.phone-catalogue-mode .catalogue-head-card h2,
body[data-force-catalogue="true"] .catalogue-head-card h2{font-size:18px!important;}
body.phone-catalogue-mode .catalogue-head-card p,
body[data-force-catalogue="true"] .catalogue-head-card p{display:none!important;}
/* final phone scroll rule: page scrolls vertically; tables scroll horizontally only. Pagination keeps sections short. */
html, body{height:auto!important;min-height:100%!important;overflow-y:auto!important;overflow-x:hidden!important;}
body.phone-catalogue-mode,
body[data-force-catalogue="true"],
body.viewer-catalogue-mode{height:auto!important;min-height:100dvh!important;max-height:none!important;overflow-y:auto!important;overflow-x:hidden!important;}
.catalogue-view,
body.phone-catalogue-mode .catalogue-view,
body[data-force-catalogue="true"] .catalogue-view,
body.viewer-catalogue-mode .catalogue-view{height:auto!important;min-height:calc(100dvh - 82px)!important;max-height:none!important;overflow:visible!important;padding-bottom:70px!important;}
.catalogue-table-wrap,
.phone-catalogue-mode .catalogue-table-wrap{height:auto!important;max-height:none!important;overflow-x:auto!important;overflow-y:visible!important;-webkit-overflow-scrolling:touch!important;}
.catalogue-table{width:max-content!important;}
@media(max-width:520px){
  .catalogue-pagination{align-items:stretch;flex-direction:column;}
  .catalogue-page-actions{display:grid;grid-template-columns:1fr 1fr;}
  .catalogue-page-actions button{width:100%;}
}


/* V1.0 sticky SKU polish: keep SKU visible on horizontal scroll and keep text inside cell. */
.catalogue-table-wrap{
  overflow-x:auto!important;
  overflow-y:visible!important;
  -webkit-overflow-scrolling:touch!important;
}
.catalogue-table th,
.catalogue-table td{
  text-align:left!important;
  vertical-align:middle!important;
}
.catalogue-table[data-catalogue-table="promo"] th:nth-child(5),
.catalogue-table[data-catalogue-table="promo"] td:nth-child(5),
.catalogue-table[data-catalogue-table="sku"] th:nth-child(2),
.catalogue-table[data-catalogue-table="sku"] td:nth-child(2){
  position:sticky!important;
  left:0!important;
  z-index:30!important;
  width:168px!important;
  min-width:168px!important;
  max-width:168px!important;
  padding-left:8px!important;
  padding-right:8px!important;
  text-align:left!important;
  white-space:nowrap!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  background:#fff!important;
  color:#0f172a!important;
  box-shadow:2px 0 0 rgba(229,231,235,.95), 8px 0 14px rgba(15,23,42,.08)!important;
}
.catalogue-table[data-catalogue-table="promo"] th:nth-child(5),
.catalogue-table[data-catalogue-table="sku"] th:nth-child(2){
  z-index:50!important;
  background:#111827!important;
  color:#fff!important;
}
.phone-catalogue-mode .catalogue-table[data-catalogue-table="promo"] th:nth-child(5),
.phone-catalogue-mode .catalogue-table[data-catalogue-table="promo"] td:nth-child(5),
.phone-catalogue-mode .catalogue-table[data-catalogue-table="sku"] th:nth-child(2),
.phone-catalogue-mode .catalogue-table[data-catalogue-table="sku"] td:nth-child(2){
  width:138px!important;
  min-width:138px!important;
  max-width:138px!important;
  font-size:11px!important;
}
.catalogue-table[data-catalogue-table="promo"] td:nth-child(5) *,
.catalogue-table[data-catalogue-table="sku"] td:nth-child(2) *{
  max-width:100%!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  white-space:nowrap!important;
}


/* V1.0 phone final scroll behavior: page scrolls vertically; table scrolls horizontally only. */
html, body{
  height:auto!important;
  min-height:100%!important;
  overflow-y:auto!important;
  overflow-x:hidden!important;
  -webkit-overflow-scrolling:touch!important;
}
body[data-force-catalogue="true"],
body.phone-catalogue-mode,
body.viewer-catalogue-mode{
  height:auto!important;
  min-height:100dvh!important;
  max-height:none!important;
  overflow-y:auto!important;
  overflow-x:hidden!important;
}
body[data-force-catalogue="true"] .catalogue-view,
body.phone-catalogue-mode .catalogue-view,
body.viewer-catalogue-mode .catalogue-view,
.catalogue-view{
  height:auto!important;
  min-height:calc(100dvh - 118px)!important;
  max-height:none!important;
  overflow:visible!important;
  padding-bottom:90px!important;
}
.catalogue-card{overflow:visible!important;}
.catalogue-table-wrap,
.phone-catalogue-mode .catalogue-table-wrap{
  height:auto!important;
  max-height:none!important;
  overflow-x:auto!important;
  overflow-y:visible!important;
}


/* V1.0 final catalogue promo layout: hide Promo ID, move Start/End to the end, and keep SKU pinned left. */
.catalogue-table[data-catalogue-table="promo"]{min-width:900px!important;}
.phone-catalogue-mode .catalogue-table[data-catalogue-table="promo"]{min-width:880px!important;}
.catalogue-table[data-catalogue-table="promo"] th:nth-child(5),
.catalogue-table[data-catalogue-table="promo"] td:nth-child(5){
  position:static!important;
  left:auto!important;
  width:auto!important;
  min-width:90px!important;
  max-width:none!important;
  box-shadow:none!important;
  background:inherit!important;
  color:inherit!important;
}
.catalogue-table[data-catalogue-table="promo"] th:nth-child(1),
.catalogue-table[data-catalogue-table="promo"] td:nth-child(1),
.catalogue-table[data-catalogue-table="sku"] th:nth-child(1),
.catalogue-table[data-catalogue-table="sku"] td:nth-child(1){
  position:static!important;
  left:auto!important;
  min-width:86px!important;
  max-width:86px!important;
  width:86px!important;
  box-shadow:none!important;
}
.catalogue-table[data-catalogue-table="promo"] th:nth-child(1),
.catalogue-table[data-catalogue-table="sku"] th:nth-child(1){
  background:#111827!important;
  color:#fff!important;
}
.catalogue-table[data-catalogue-table="promo"] th:nth-child(2),
.catalogue-table[data-catalogue-table="promo"] td:nth-child(2),
.catalogue-table[data-catalogue-table="sku"] th:nth-child(2),
.catalogue-table[data-catalogue-table="sku"] td:nth-child(2){
  position:sticky!important;
  left:0!important;
  z-index:40!important;
  width:158px!important;
  min-width:158px!important;
  max-width:158px!important;
  padding-left:8px!important;
  padding-right:8px!important;
  text-align:left!important;
  white-space:nowrap!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  background:#fff!important;
  color:#0f172a!important;
  font-weight:800!important;
  box-shadow:2px 0 0 rgba(229,231,235,.95), 8px 0 14px rgba(15,23,42,.08)!important;
}
.catalogue-table[data-catalogue-table="promo"] th:nth-child(2),
.catalogue-table[data-catalogue-table="sku"] th:nth-child(2){
  z-index:60!important;
  background:#111827!important;
  color:#fff!important;
}
.phone-catalogue-mode .catalogue-table[data-catalogue-table="promo"] th:nth-child(2),
.phone-catalogue-mode .catalogue-table[data-catalogue-table="promo"] td:nth-child(2),
.phone-catalogue-mode .catalogue-table[data-catalogue-table="sku"] th:nth-child(2),
.phone-catalogue-mode .catalogue-table[data-catalogue-table="sku"] td:nth-child(2){
  width:136px!important;
  min-width:136px!important;
  max-width:136px!important;
  font-size:11px!important;
}
.catalogue-table[data-catalogue-table="promo"] td:nth-child(2) *,
.catalogue-table[data-catalogue-table="sku"] td:nth-child(2) *{
  max-width:100%!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  white-space:nowrap!important;
}


/* V1.0 qty column compact polish */
.catalogue-table[data-catalogue-table="promo"] th:nth-child(5),
.catalogue-table[data-catalogue-table="promo"] td:nth-child(5),
.catalogue-table[data-catalogue-table="promo"] th:nth-child(6),
.catalogue-table[data-catalogue-table="promo"] td:nth-child(6){
  width:58px!important;
  min-width:58px!important;
  max-width:58px!important;
  padding-left:5px!important;
  padding-right:5px!important;
  text-align:center!important;
  white-space:normal!important;
  line-height:1.15!important;
  font-size:11px!important;
  font-weight:700!important;
}
.catalogue-table[data-catalogue-table="promo"] th:nth-child(5),
.catalogue-table[data-catalogue-table="promo"] th:nth-child(6){
  font-size:10px!important;
  letter-spacing:.01em!important;
}
.catalogue-table[data-catalogue-table="promo"] td:nth-child(5),
.catalogue-table[data-catalogue-table="promo"] td:nth-child(6){
  color:#0f172a!important;
  background:#f8fafc!important;
}
.phone-catalogue-mode .catalogue-table[data-catalogue-table="promo"] th:nth-child(5),
.phone-catalogue-mode .catalogue-table[data-catalogue-table="promo"] td:nth-child(5),
.phone-catalogue-mode .catalogue-table[data-catalogue-table="promo"] th:nth-child(6),
.phone-catalogue-mode .catalogue-table[data-catalogue-table="promo"] td:nth-child(6){
  width:52px!important;
  min-width:52px!important;
  max-width:52px!important;
  font-size:10px!important;
  padding-left:4px!important;
  padding-right:4px!important;
}


/* Dealer/Retail V2 additions */

.platform-tag.retail{background:#ecfdf5;color:#047857;border-color:#a7f3d0;}
.platform-tag.dealer{background:#eff6ff;color:#1d4ed8;border-color:#bfdbfe;}
.shop-link-card{background:#fff;border:1px solid #e5e7eb;border-radius:16px;padding:14px 16px;margin-bottom:14px;box-shadow:0 6px 20px rgba(31,41,55,.04);}
.shop-link-card h3{margin:0 0 6px}.shop-link-card p{margin:0 0 10px;color:#64748b;font-size:13px}.shop-buttons{display:flex;gap:10px;flex-wrap:wrap}.shop-button{display:inline-flex;align-items:center;justify-content:center;text-decoration:none;border-radius:12px;padding:10px 13px;font-weight:900;color:#fff}.shop-button.shopee{background:#f97316}.shop-button.lazada{background:#2563eb}
@media(max-width:1100px){.platform-buttons{grid-template-columns:repeat(4,minmax(0,1fr))!important;}.platform-btn{min-width:0!important;}.shop-button{flex:1 1 160px;}}
@media(max-width:520px){.platform-buttons{grid-template-columns:repeat(2,minmax(0,1fr))!important;}.shop-buttons{display:grid;grid-template-columns:1fr}.shop-button{width:100%;}}
/* V2.7 signup tabs */
.auth-tabs{display:flex;background:#f1f5f9;border-radius:14px;padding:4px;margin:12px 0}.auth-tabs button{flex:1;border:0;border-radius:11px;background:transparent;color:#475569;font-weight:900;padding:9px}.auth-tabs button.active{background:#111827;color:white}.auth-panel{display:none}.auth-panel.active{display:block}.auth-panel select{width:100%;border:1px solid #d1d5db;border-radius:12px;padding:11px;background:white;color:#111827;font-size:14px}.auth-panel input,.auth-panel select{color:#111827!important;background:#fff!important}.web-login-card{max-height:calc(100vh - 28px);overflow:auto}.web-login-card label{font-size:12px;font-weight:800;color:#374151}.web-login-card button{cursor:pointer}


/* V2.7.1 signup scroll + dealer key help */
.web-login-overlay{
  align-items:flex-start!important;
  justify-content:center!important;
  overflow-y:auto!important;
  -webkit-overflow-scrolling:touch!important;
  padding:18px 14px calc(28px + env(safe-area-inset-bottom, 0px))!important;
}
.web-login-card{
  margin:0 auto!important;
  max-height:none!important;
  overflow:visible!important;
  box-sizing:border-box!important;
}
.auth-panel.active{
  display:block!important;
}
.signup-help{
  margin:8px 0 10px;
  padding:9px 10px;
  border:1px solid #fde68a;
  background:#fffbeb;
  color:#92400e;
  border-radius:12px;
  font-size:12px;
  line-height:1.35;
  text-align:left;
  font-weight:800;
}
.signup-help.dealer-note{
  margin-top:7px;
}
@media(max-height:720px){
  .web-login-card{padding:20px!important;border-radius:18px!important;}
  .web-login-logo{width:118px!important;margin-bottom:8px!important;}
  .web-login-card h1{font-size:18px!important;}
  .auth-tabs{margin:8px 0!important;}
  .web-login-card label{margin:8px 0 4px!important;}
  .web-login-card input,.auth-panel select{padding:10px!important;}
  .web-login-card button{padding:10px 12px!important;margin-top:10px!important;}
}


/* V2.7.2 split Retail / Dealer catalogue pages */
.web-login-card{max-height:92dvh;overflow-y:auto;}
.signup-help.dealer-note{display:none!important;}
.catalogue-page-tabs{display:flex;gap:8px;margin:10px 0 12px;position:sticky;top:0;z-index:20;background:#f8fafc;padding:8px 0;}
.catalogue-page-tab{flex:1;border:1px solid #cbd5e1;background:#fff;color:#334155;border-radius:12px;padding:10px 12px;font-weight:900;box-shadow:0 1px 4px rgba(15,23,42,.05);}
.catalogue-page-tab.active{background:linear-gradient(90deg,#f59e0b,#ec4899,#8b5cf6);color:#fff;border-color:transparent;}
.catalogue-page-section{display:none;}
.catalogue-page-section.active{display:block;}
.catalogue-table.compact-catalogue{min-width:720px!important;width:max-content!important;}
.catalogue-table.compact-catalogue th:first-child,
.catalogue-table.compact-catalogue td:first-child{position:sticky;left:0;z-index:5;background:#fff;font-weight:900;box-shadow:2px 0 0 rgba(229,231,235,.95),6px 0 12px rgba(15,23,42,.06);}
.catalogue-table.compact-catalogue th:first-child{background:#111827;color:#fff;z-index:9;}
.catalogue-table.compact-catalogue td:first-child{color:#0f172a;}
.countdown-text{font-size:11px;font-weight:900;color:#0f766e;white-space:nowrap;}
.catalogue-table.compact-catalogue td:last-child{font-weight:800;}
@media(max-width:520px){
  .catalogue-page-tabs{top:0;}
  .catalogue-table.compact-catalogue{min-width:680px!important;font-size:12px;}
  .catalogue-table.compact-catalogue th,.catalogue-table.compact-catalogue td{padding:7px!important;}
}

.catalogue-table.compact-catalogue th:nth-child(2),
.catalogue-table.compact-catalogue td:nth-child(2),
.catalogue-table.compact-catalogue th:nth-child(5),
.catalogue-table.compact-catalogue td:nth-child(5){position:static!important;left:auto!important;box-shadow:none!important;min-width:auto!important;max-width:none!important;}
.catalogue-table.compact-catalogue th:first-child,
.catalogue-table.compact-catalogue td:first-child{position:sticky!important;left:0!important;}


/* V2.7.3 phone catalogue table stability fix: no overlapping sticky cells in split pages */
.catalogue-page-section .catalogue-table-wrap{
  overflow-x:auto!important;
  overflow-y:visible!important;
  -webkit-overflow-scrolling:touch!important;
}
.catalogue-page-section .catalogue-table.compact-catalogue{
  border-collapse:separate!important;
  border-spacing:0!important;
  table-layout:auto!important;
  width:max-content!important;
  min-width:760px!important;
}
.catalogue-page-section .catalogue-table.compact-catalogue th,
.catalogue-page-section .catalogue-table.compact-catalogue td{
  position:static!important;
  left:auto!important;
  right:auto!important;
  box-shadow:none!important;
  z-index:auto!important;
  white-space:nowrap!important;
  overflow:visible!important;
  text-overflow:clip!important;
  min-width:92px!important;
  max-width:none!important;
  width:auto!important;
  line-height:1.25!important;
  background:inherit;
}
.catalogue-page-section .catalogue-table.compact-catalogue th{
  position:sticky!important;
  top:0!important;
  z-index:3!important;
  background:#111827!important;
  color:#fff!important;
}
.catalogue-page-section .catalogue-table.compact-catalogue td{
  background:#fff!important;
  color:#0f172a!important;
}
.catalogue-page-section .catalogue-table.compact-catalogue th:nth-child(1),
.catalogue-page-section .catalogue-table.compact-catalogue td:nth-child(1){min-width:104px!important;}
.catalogue-page-section .catalogue-table.compact-catalogue th:nth-child(2),
.catalogue-page-section .catalogue-table.compact-catalogue td:nth-child(2){min-width:180px!important;}
.catalogue-page-section .catalogue-table.compact-catalogue td:nth-child(2){max-width:220px!important;overflow:hidden!important;text-overflow:ellipsis!important;}
.catalogue-page-section .catalogue-table.compact-catalogue td:last-child{
  font-weight:900!important;
}
.catalogue-page-section .catalogue-table.compact-catalogue td:last-child:has(.status-badge),
.catalogue-page-section .status-badge{font-size:11px!important;}
.status-badge{display:inline-flex;align-items:center;border-radius:999px;padding:3px 8px;font-weight:900;background:#dcfce7;color:#166534;white-space:nowrap;}
.status-badge.inactive{background:#fee2e2;color:#991b1b;}
@media(max-width:520px){
  .catalogue-page-section .catalogue-table.compact-catalogue{min-width:720px!important;font-size:12px!important;}
  .catalogue-page-section .catalogue-table.compact-catalogue th,
  .catalogue-page-section .catalogue-table.compact-catalogue td{padding:7px!important;min-width:82px!important;}
  .catalogue-page-section .catalogue-table.compact-catalogue th:nth-child(2),
  .catalogue-page-section .catalogue-table.compact-catalogue td:nth-child(2){min-width:154px!important;max-width:180px!important;}
}

/* V2.7.5 phone UI polish: remove duplicate catalogue banner, compact shop logos, fixed SKU column */
body.phone-catalogue-mode .refresh-status,
body[data-force-catalogue="true"] .refresh-status{
  display:none!important;
}
.catalogue-top-row{
  display:flex!important;
  align-items:center!important;
  justify-content:flex-end!important;
  gap:8px!important;
  margin:0 0 8px!important;
  padding:0!important;
}
.marketplace-logo-links{
  display:flex!important;
  align-items:center!important;
  justify-content:flex-end!important;
  gap:8px!important;
  width:auto!important;
}
.marketplace-logo-link{
  width:34px!important;
  height:34px!important;
  border-radius:999px!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  text-decoration:none!important;
  color:#fff!important;
  font-size:14px!important;
  font-weight:1000!important;
  line-height:1!important;
  box-shadow:0 4px 12px rgba(15,23,42,.16)!important;
  border:1px solid rgba(255,255,255,.7)!important;
}
.marketplace-logo-link.shopee{background:#f97316!important;}
.marketplace-logo-link.lazada{background:linear-gradient(135deg,#2563eb,#7c3aed)!important;}
.shop-link-card{display:none!important;}

/* Override older sticky rules. In split catalogue tables, SKU is column 1. */
.phone-catalogue-mode .catalogue-table-wrap,
body[data-force-catalogue="true"] .catalogue-table-wrap{
  overflow-x:auto!important;
  overflow-y:visible!important;
  -webkit-overflow-scrolling:touch!important;
}
.phone-catalogue-mode .catalogue-table[data-catalogue-table] th,
.phone-catalogue-mode .catalogue-table[data-catalogue-table] td,
body[data-force-catalogue="true"] .catalogue-table[data-catalogue-table] th,
body[data-force-catalogue="true"] .catalogue-table[data-catalogue-table] td{
  white-space:nowrap!important;
  vertical-align:middle!important;
}
.phone-catalogue-mode .catalogue-table[data-catalogue-table] th:nth-child(1),
.phone-catalogue-mode .catalogue-table[data-catalogue-table] td:nth-child(1),
body[data-force-catalogue="true"] .catalogue-table[data-catalogue-table] th:nth-child(1),
body[data-force-catalogue="true"] .catalogue-table[data-catalogue-table] td:nth-child(1){
  position:sticky!important;
  left:0!important;
  z-index:70!important;
  width:108px!important;
  min-width:108px!important;
  max-width:108px!important;
  padding-left:8px!important;
  padding-right:8px!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  white-space:nowrap!important;
  background:#fff!important;
  color:#0f172a!important;
  font-weight:900!important;
  box-shadow:2px 0 0 rgba(229,231,235,.95), 8px 0 12px rgba(15,23,42,.08)!important;
}
.phone-catalogue-mode .catalogue-table[data-catalogue-table] th:nth-child(1),
body[data-force-catalogue="true"] .catalogue-table[data-catalogue-table] th:nth-child(1){
  z-index:90!important;
  background:#111827!important;
  color:#fff!important;
}
/* Product column must scroll normally so it does not overlap the fixed SKU column. */
.phone-catalogue-mode .catalogue-table[data-catalogue-table] th:nth-child(2),
.phone-catalogue-mode .catalogue-table[data-catalogue-table] td:nth-child(2),
body[data-force-catalogue="true"] .catalogue-table[data-catalogue-table] th:nth-child(2),
body[data-force-catalogue="true"] .catalogue-table[data-catalogue-table] td:nth-child(2){
  position:static!important;
  left:auto!important;
  z-index:auto!important;
  width:auto!important;
  min-width:160px!important;
  max-width:none!important;
  box-shadow:none!important;
  background:inherit!important;
  color:inherit!important;
  font-weight:inherit!important;
}
.phone-catalogue-mode .catalogue-table[data-catalogue-table] th:nth-child(2),
body[data-force-catalogue="true"] .catalogue-table[data-catalogue-table] th:nth-child(2){
  background:#111827!important;
  color:#fff!important;
  font-weight:800!important;
}
.phone-catalogue-mode .catalogue-table[data-catalogue-table="retailPromo"],
.phone-catalogue-mode .catalogue-table[data-catalogue-table="dealerPromo"],
body[data-force-catalogue="true"] .catalogue-table[data-catalogue-table="retailPromo"],
body[data-force-catalogue="true"] .catalogue-table[data-catalogue-table="dealerPromo"]{
  min-width:760px!important;
}
.phone-catalogue-mode .catalogue-table[data-catalogue-table="retailSku"],
.phone-catalogue-mode .catalogue-table[data-catalogue-table="dealerSku"],
body[data-force-catalogue="true"] .catalogue-table[data-catalogue-table="retailSku"],
body[data-force-catalogue="true"] .catalogue-table[data-catalogue-table="dealerSku"]{
  min-width:620px!important;
}


/* V2.7.6 phone UI: shop logos in banner, SKU cell has its own horizontal scroll, status colors */
.topbar-shop-links{
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:6px!important;
  flex:0 0 auto!important;
}
.topbar-shop-link{
  width:30px!important;
  height:30px!important;
  border-radius:999px!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  text-decoration:none!important;
  color:#fff!important;
  font-size:13px!important;
  font-weight:1000!important;
  line-height:1!important;
  box-shadow:0 4px 12px rgba(15,23,42,.18)!important;
  border:1px solid rgba(255,255,255,.72)!important;
}
.topbar-shop-link.shopee{background:#f97316!important;}
.topbar-shop-link.lazada{background:linear-gradient(135deg,#2563eb,#7c3aed)!important;}
.catalogue-top-row,.marketplace-logo-links{display:none!important;}
body.phone-catalogue-mode .shell-topbar,
body[data-force-catalogue="true"] .shell-topbar{
  flex-direction:row!important;
  align-items:center!important;
  flex-wrap:wrap!important;
}
body.phone-catalogue-mode .brand-wrap,
body[data-force-catalogue="true"] .brand-wrap{
  flex:1 1 auto!important;
  min-width:0!important;
}
body.phone-catalogue-mode .shell-actions,
body[data-force-catalogue="true"] .shell-actions{
  flex:1 1 100%!important;
}
body.phone-catalogue-mode .catalogue-table[data-catalogue-table] td:nth-child(1),
body[data-force-catalogue="true"] .catalogue-table[data-catalogue-table] td:nth-child(1){
  overflow:visible!important;
  text-overflow:clip!important;
  width:116px!important;
  min-width:116px!important;
  max-width:116px!important;
}
body.phone-catalogue-mode .catalogue-table[data-catalogue-table] th:nth-child(1),
body[data-force-catalogue="true"] .catalogue-table[data-catalogue-table] th:nth-child(1){
  width:116px!important;
  min-width:116px!important;
  max-width:116px!important;
}
.sku-cell-scroll{
  display:block!important;
  width:100%!important;
  max-width:100%!important;
  overflow-x:auto!important;
  overflow-y:hidden!important;
  white-space:nowrap!important;
  -webkit-overflow-scrolling:touch!important;
  scrollbar-width:thin!important;
  padding-bottom:1px!important;
}
.sku-cell-scroll::-webkit-scrollbar{height:3px!important;}
.sku-cell-scroll::-webkit-scrollbar-thumb{background:rgba(100,116,139,.65)!important;border-radius:999px!important;}
.status-badge{display:inline-flex!important;align-items:center!important;border-radius:999px!important;padding:3px 8px!important;font-weight:900!important;white-space:nowrap!important;font-size:11px!important;line-height:1.2!important;}
.status-badge.active{background:#ccfbf1!important;color:#0f766e!important;border:1px solid #99f6e4!important;}
.status-badge.inactive{background:#fee2e2!important;color:#991b1b!important;border:1px solid #fecaca!important;}


/* Phone V2.7.8 reset password UI */
.auth-tabs button{min-width:0!important;font-size:12px!important;padding:9px 6px!important;}
.reset-help{border-color:#bae6fd!important;background:#f0f9ff!important;color:#075985!important;}
#webResetForm input{color:#111827!important;background:#fff!important;}
#webResetBtn{background:linear-gradient(90deg,#0ea5e9,#14b8a6,#22c55e)!important;}


/* Browser / Tablet Catalogue V1.0 wide layout override
   Purpose: same Phone catalogue data + signup/reset logic, but readable on desktop browser and tablet. */
body[data-catalogue-layout="browser"]{
  background:#f6f7fb!important;
}
body[data-catalogue-layout="browser"],
body[data-catalogue-layout="browser"].phone-catalogue-mode,
body[data-catalogue-layout="browser"].viewer-catalogue-mode,
body[data-catalogue-layout="browser"][data-force-catalogue="true"]{
  width:100%!important;
  height:100dvh!important;
  min-height:100dvh!important;
  max-height:100dvh!important;
  overflow:hidden!important;
}
body[data-catalogue-layout="browser"] .shell-topbar{
  position:relative!important;
  height:88px!important;
  min-height:88px!important;
  padding:12px 24px!important;
  display:flex!important;
  flex-direction:row!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:18px!important;
  flex-wrap:nowrap!important;
  background:linear-gradient(135deg,#4c1d95,#7c3aed 48%,#f59e0b)!important;
}
body[data-catalogue-layout="browser"] .brand-wrap{
  flex:1 1 auto!important;
  min-width:320px!important;
  gap:14px!important;
}
body[data-catalogue-layout="browser"] .brand-logo{width:96px!important;}
body[data-catalogue-layout="browser"] .brand-wrap h1{
  font-size:24px!important;
  white-space:nowrap!important;
  letter-spacing:-.02em!important;
}
body[data-catalogue-layout="browser"] .brand-wrap p{
  display:block!important;
  margin-top:4px!important;
  font-size:12px!important;
  opacity:.92!important;
}
body[data-catalogue-layout="browser"] .topbar-shop-links{
  order:2!important;
  gap:8px!important;
  margin-left:auto!important;
}
body[data-catalogue-layout="browser"] .topbar-shop-link{
  width:36px!important;
  height:36px!important;
  font-size:15px!important;
}
body[data-catalogue-layout="browser"] .shell-actions{
  order:3!important;
  flex:0 0 auto!important;
  display:flex!important;
  align-items:center!important;
  justify-content:flex-end!important;
  gap:10px!important;
  flex-wrap:nowrap!important;
  width:auto!important;
}
body[data-catalogue-layout="browser"] .role-pill{
  max-width:300px!important;
  font-size:12px!important;
  padding:8px 12px!important;
}
body[data-catalogue-layout="browser"] .refresh-all,
body[data-catalogue-layout="browser"] .logout-main{
  width:auto!important;
  white-space:nowrap!important;
  font-size:13px!important;
  padding:10px 14px!important;
}
body[data-catalogue-layout="browser"] .refresh-status{
  display:none!important;
}
body[data-catalogue-layout="browser"] .workspace-shell{display:none!important;}
body[data-catalogue-layout="browser"] .catalogue-view,
body[data-catalogue-layout="browser"].phone-catalogue-mode .catalogue-view,
body[data-catalogue-layout="browser"].viewer-catalogue-mode .catalogue-view,
body[data-catalogue-layout="browser"][data-force-catalogue="true"] .catalogue-view{
  display:block!important;
  height:calc(100dvh - 88px)!important;
  min-height:0!important;
  max-height:calc(100dvh - 88px)!important;
  overflow-y:auto!important;
  overflow-x:hidden!important;
  padding:22px 26px 44px!important;
  -webkit-overflow-scrolling:touch!important;
}
body[data-catalogue-layout="browser"] .catalogue-search-card,
body[data-catalogue-layout="browser"] .catalogue-card,
body[data-catalogue-layout="browser"] .catalogue-page-tabs{
  width:min(1440px,100%)!important;
  margin-left:auto!important;
  margin-right:auto!important;
}
body[data-catalogue-layout="browser"] .catalogue-search-card{
  display:flex!important;
  align-items:center!important;
  gap:10px!important;
  padding:14px 16px!important;
}
body[data-catalogue-layout="browser"] .catalogue-search-card input{
  flex:1 1 auto!important;
  min-width:260px!important;
  font-size:14px!important;
  padding:11px 13px!important;
  border-radius:12px!important;
  border:1px solid #d1d5db!important;
  color:#111827!important;
  background:#fff!important;
}
body[data-catalogue-layout="browser"] .catalogue-page-tabs{
  display:flex!important;
  gap:10px!important;
  margin-bottom:14px!important;
  background:#fff!important;
  border:1px solid #e5e7eb!important;
  border-radius:16px!important;
  padding:8px!important;
  box-shadow:0 8px 28px rgba(15,23,42,.05)!important;
}
body[data-catalogue-layout="browser"] .catalogue-page-tab{
  flex:0 0 auto!important;
  min-width:170px!important;
  padding:11px 16px!important;
  border-radius:12px!important;
  background:#f1f5f9!important;
  color:#334155!important;
  box-shadow:none!important;
}
body[data-catalogue-layout="browser"] .catalogue-page-tab.active{
  background:#111827!important;
  color:#fff!important;
}
body[data-catalogue-layout="browser"] .catalogue-page-section{display:none!important;}
body[data-catalogue-layout="browser"] .catalogue-page-section.active{
  display:block!important;
  width:100%!important;
}
body[data-catalogue-layout="browser"] .catalogue-card{
  border-radius:18px!important;
  padding:18px!important;
  margin-bottom:18px!important;
  overflow:visible!important;
}
body[data-catalogue-layout="browser"] .catalogue-card h3{
  margin:0 0 12px!important;
  font-size:18px!important;
  color:#111827!important;
}
body[data-catalogue-layout="browser"] .catalogue-table-wrap,
body[data-catalogue-layout="browser"].phone-catalogue-mode .catalogue-table-wrap{
  width:100%!important;
  height:auto!important;
  max-height:none!important;
  overflow-x:auto!important;
  overflow-y:visible!important;
  border:1px solid #e5e7eb!important;
  border-radius:14px!important;
  background:#fff!important;
}
body[data-catalogue-layout="browser"] .catalogue-table,
body[data-catalogue-layout="browser"].phone-catalogue-mode .catalogue-table{
  width:100%!important;
  min-width:780px!important;
  border-collapse:separate!important;
  border-spacing:0!important;
  font-size:13px!important;
}
body[data-catalogue-layout="browser"] .catalogue-table[data-catalogue-table="retailPromo"]{min-width:980px!important;}
body[data-catalogue-layout="browser"] .catalogue-table[data-catalogue-table="dealerPromo"]{min-width:880px!important;}
body[data-catalogue-layout="browser"] .catalogue-table[data-catalogue-table="retailSku"]{min-width:640px!important;}
body[data-catalogue-layout="browser"] .catalogue-table[data-catalogue-table="dealerSku"]{min-width:760px!important;}
body[data-catalogue-layout="browser"] .catalogue-table th,
body[data-catalogue-layout="browser"] .catalogue-table td,
body[data-catalogue-layout="browser"].phone-catalogue-mode .catalogue-table th,
body[data-catalogue-layout="browser"].phone-catalogue-mode .catalogue-table td{
  padding:10px 12px!important;
  line-height:1.35!important;
  white-space:nowrap!important;
  vertical-align:middle!important;
  border-bottom:1px solid #edf2f7!important;
  font-size:13px!important;
}
body[data-catalogue-layout="browser"] .catalogue-table th{
  background:#111827!important;
  color:#fff!important;
  font-weight:900!important;
  position:sticky!important;
  top:0!important;
  z-index:25!important;
}
body[data-catalogue-layout="browser"] .catalogue-table td{background:#fff!important;color:#0f172a!important;}
body[data-catalogue-layout="browser"] .catalogue-table tr:nth-child(even) td{background:#f8fafc!important;}
body[data-catalogue-layout="browser"] .catalogue-table[data-catalogue-table] th:nth-child(1),
body[data-catalogue-layout="browser"] .catalogue-table[data-catalogue-table] td:nth-child(1),
body[data-catalogue-layout="browser"].phone-catalogue-mode .catalogue-table[data-catalogue-table] th:nth-child(1),
body[data-catalogue-layout="browser"].phone-catalogue-mode .catalogue-table[data-catalogue-table] td:nth-child(1){
  position:sticky!important;
  left:0!important;
  z-index:35!important;
  width:180px!important;
  min-width:180px!important;
  max-width:180px!important;
  text-align:left!important;
  box-shadow:2px 0 0 rgba(229,231,235,.95), 8px 0 14px rgba(15,23,42,.08)!important;
}
body[data-catalogue-layout="browser"] .catalogue-table[data-catalogue-table] th:nth-child(1){
  z-index:50!important;
  background:#111827!important;
  color:#fff!important;
}
body[data-catalogue-layout="browser"] .catalogue-table[data-catalogue-table] td:nth-child(1){
  background:#fff!important;
  color:#0f172a!important;
  font-weight:900!important;
}
body[data-catalogue-layout="browser"] .catalogue-table[data-catalogue-table] tr:nth-child(even) td:nth-child(1){background:#f8fafc!important;}
body[data-catalogue-layout="browser"] .catalogue-table[data-catalogue-table] th:nth-child(2),
body[data-catalogue-layout="browser"] .catalogue-table[data-catalogue-table] td:nth-child(2),
body[data-catalogue-layout="browser"].phone-catalogue-mode .catalogue-table[data-catalogue-table] th:nth-child(2),
body[data-catalogue-layout="browser"].phone-catalogue-mode .catalogue-table[data-catalogue-table] td:nth-child(2){
  position:static!important;
  left:auto!important;
  z-index:auto!important;
  width:auto!important;
  min-width:220px!important;
  max-width:none!important;
  box-shadow:none!important;
  color:inherit!important;
  font-weight:700!important;
}
body[data-catalogue-layout="browser"] .catalogue-table[data-catalogue-table] th:nth-child(2){background:#111827!important;color:#fff!important;}
body[data-catalogue-layout="browser"] .sku-cell-scroll{max-width:160px!important;}
body[data-catalogue-layout="browser"] .status-badge.active{background:#ccfbf1!important;color:#0f766e!important;border:1px solid #99f6e4!important;}
body[data-catalogue-layout="browser"] .status-badge.inactive{background:#fee2e2!important;color:#991b1b!important;border:1px solid #fecaca!important;}
body[data-catalogue-layout="browser"] .catalogue-pagination{
  display:flex!important;
  justify-content:space-between!important;
  align-items:center!important;
  gap:12px!important;
  margin-top:10px!important;
  color:#64748b!important;
  font-size:12px!important;
}
body[data-catalogue-layout="browser"] .catalogue-page-actions{display:flex!important;gap:8px!important;}
body[data-catalogue-layout="browser"] .catalogue-page-actions button{padding:8px 12px!important;font-size:12px!important;}
body[data-catalogue-layout="browser"] .web-login-overlay{
  align-items:center!important;
  padding:28px!important;
}
body[data-catalogue-layout="browser"] .web-login-card{
  width:min(500px,calc(100vw - 40px))!important;
  max-height:calc(100dvh - 56px)!important;
  overflow:auto!important;
  border-radius:24px!important;
}
@media(max-width:980px){
  body[data-catalogue-layout="browser"] .shell-topbar{
    height:auto!important;
    min-height:112px!important;
    flex-wrap:wrap!important;
    padding:12px 16px!important;
  }
  body[data-catalogue-layout="browser"] .brand-wrap{min-width:0!important;flex:1 1 calc(100% - 100px)!important;}
  body[data-catalogue-layout="browser"] .brand-logo{width:82px!important;}
  body[data-catalogue-layout="browser"] .brand-wrap h1{font-size:20px!important;white-space:normal!important;}
  body[data-catalogue-layout="browser"] .shell-actions{width:100%!important;justify-content:space-between!important;}
  body[data-catalogue-layout="browser"] .catalogue-view{height:calc(100dvh - 132px)!important;max-height:calc(100dvh - 132px)!important;padding:16px!important;}
}
@media(max-width:680px){
  body[data-catalogue-layout="browser"] .catalogue-search-card{flex-wrap:wrap!important;}
  body[data-catalogue-layout="browser"] .catalogue-search-card input{min-width:100%!important;}
  body[data-catalogue-layout="browser"] .catalogue-page-tabs{overflow-x:auto!important;}
  body[data-catalogue-layout="browser"] .catalogue-table[data-catalogue-table] th:nth-child(1),
  body[data-catalogue-layout="browser"] .catalogue-table[data-catalogue-table] td:nth-child(1){width:132px!important;min-width:132px!important;max-width:132px!important;}
  body[data-catalogue-layout="browser"] .sku-cell-scroll{max-width:112px!important;}
}

/* Browser Catalogue V1.1 scroll overlap fix
   Browser/tablet catalogue uses one vertical page scroll. Disable vertical sticky table headers/tabs
   inherited from phone mode because they can overlap text while scrolling down. Keep only horizontal SKU pinning. */
body[data-catalogue-layout="browser"] .catalogue-page-tabs{
  position:static!important;
  top:auto!important;
  z-index:auto!important;
}
body[data-catalogue-layout="browser"] .catalogue-table th,
body[data-catalogue-layout="browser"].phone-catalogue-mode .catalogue-table th,
body[data-catalogue-layout="browser"].viewer-catalogue-mode .catalogue-table th,
body[data-catalogue-layout="browser"][data-force-catalogue="true"] .catalogue-table th{
  position:static!important;
  top:auto!important;
  left:auto!important;
  z-index:auto!important;
}
body[data-catalogue-layout="browser"] .catalogue-table[data-catalogue-table] th:nth-child(1),
body[data-catalogue-layout="browser"].phone-catalogue-mode .catalogue-table[data-catalogue-table] th:nth-child(1),
body[data-catalogue-layout="browser"].viewer-catalogue-mode .catalogue-table[data-catalogue-table] th:nth-child(1),
body[data-catalogue-layout="browser"][data-force-catalogue="true"] .catalogue-table[data-catalogue-table] th:nth-child(1){
  position:sticky!important;
  left:0!important;
  top:auto!important;
  z-index:40!important;
  background:#111827!important;
  color:#fff!important;
}
body[data-catalogue-layout="browser"] .catalogue-table[data-catalogue-table] td:nth-child(1),
body[data-catalogue-layout="browser"].phone-catalogue-mode .catalogue-table[data-catalogue-table] td:nth-child(1),
body[data-catalogue-layout="browser"].viewer-catalogue-mode .catalogue-table[data-catalogue-table] td:nth-child(1),
body[data-catalogue-layout="browser"][data-force-catalogue="true"] .catalogue-table[data-catalogue-table] td:nth-child(1){
  position:sticky!important;
  left:0!important;
  z-index:30!important;
}
body[data-catalogue-layout="browser"] .catalogue-table-wrap,
body[data-catalogue-layout="browser"].phone-catalogue-mode .catalogue-table-wrap,
body[data-catalogue-layout="browser"].viewer-catalogue-mode .catalogue-table-wrap,
body[data-catalogue-layout="browser"][data-force-catalogue="true"] .catalogue-table-wrap{
  overflow-x:auto!important;
  overflow-y:visible!important;
  isolation:isolate!important;
}
body[data-catalogue-layout="browser"] .catalogue-card{
  isolation:isolate!important;
}