/* Client portal — clean light look for wholesale shops.
   Loaded last on the order page. Selectors start with `html:root body:not(#_c)` so they outrank the
   older glass/cinematic theme rules (which use !important) without editing those files. */

/* ---------- page + surfaces ---------- */
html:root body:not(#_c){
  background:#f1f5f9 !important;
  background-image:none !important;
  color:#0f172a !important;
}
html:root body:not(#_c) .app,
html:root body:not(#_c) .main{background:transparent !important}

html:root body:not(#_c) .topbar,
html:root body:not(#_c) .card,
html:root body:not(#_c) .sheet,
html:root body:not(#_c) .sidebar{
  background:#ffffff !important;
  background-image:none !important;
  border:1px solid #e2e8f0 !important;
  border-radius:16px !important;
  box-shadow:0 1px 3px rgba(15,23,42,.06) !important;
}

/* ---------- header ---------- */
html:root body:not(#_c) .topbar{
  position:relative !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  min-height:0 !important;
  padding:16px 18px !important;
}
html:root body:not(#_c) .topbar-center{
  position:static !important;
  transform:none !important;
  left:auto !important;
  top:auto !important;
  gap:4px !important;
}
html:root body:not(#_c) .topbar-logo{margin:0 !important}
html:root body:not(#_c) .topbar-logo img{
  height:52px !important;
  width:auto !important;
  filter:none !important;
  border-radius:12px !important;
}
html:root body:not(#_c) .topbar-center .t1{
  color:#0f172a !important;
  text-shadow:none !important;
  font-size:19px !important;
  font-weight:800 !important;
}
html:root body:not(#_c) .topbar-center .t2{
  margin-top:6px !important;
  background:#eff6ff !important;
  border:1px solid #bfdbfe !important;
  color:#1e3a8a !important;
  box-shadow:none !important;
  font-size:12.5px !important;
  font-weight:700 !important;
  padding:6px 12px !important;
}
html:root body:not(#_c) .topbar-center .t2:empty{display:none !important}
html:root body:not(#_c) #clientPhone{width:100% !important;max-width:none !important}
html:root body:not(#_c) #kpiPill{
  left:auto !important;
  width:auto !important;
  position:absolute !important;
  right:18px !important;
  top:50% !important;
  transform:translateY(-50%) !important;
  background:#f8fafc !important;
  border:1px solid #e2e8f0 !important;
  box-shadow:none !important;
  color:#0f172a !important;
  font-weight:800 !important;
  border-radius:999px !important;
  padding:6px 12px !important;
}

/* ---------- desktop sidebar ---------- */
html:root body:not(#_c) .sidebar .s-title{color:#0f172a !important}
html:root body:not(#_c) .sidebar .s-sub{color:#64748b !important}
html:root body:not(#_c) .sidebar .nav a{
  color:#0f172a !important;
  border:1px solid transparent !important;
  border-radius:10px !important;
  font-weight:700 !important;
}
html:root body:not(#_c) .sidebar .nav a:hover{
  background:#f1f5f9 !important;
  border-color:#e2e8f0 !important;
}

/* ---------- form fields ---------- */
html:root body:not(#_c) #pageMain input:not([type=checkbox]):not([type=radio]):not(.qty),
html:root body:not(#_c) #pageReview input:not([type=checkbox]):not([type=radio]):not(.qty),
html:root body:not(#_c) select,
html:root body:not(#_c) textarea{
  min-height:44px;
  border:1px solid #cbd5e1 !important;
  border-radius:10px !important;
  background:#ffffff !important;
  color:#0f172a !important;
  -webkit-text-fill-color:#0f172a !important;
  box-shadow:none !important;
  font-size:15px !important;
}
html:root body:not(#_c) input::placeholder{color:#94a3b8 !important;-webkit-text-fill-color:#94a3b8 !important}
html:root body:not(#_c) input:focus,
html:root body:not(#_c) select:focus,
html:root body:not(#_c) textarea:focus{
  outline:none !important;
  border-color:#2563eb !important;
  box-shadow:0 0 0 3px rgba(37,99,235,.15) !important;
}

/* ---------- buttons ---------- */
html:root body:not(#_c) .btn:not(.wa-btn){
  border-radius:10px !important;
  min-height:42px;
  font-weight:800 !important;
  box-shadow:none !important;
  background-image:none !important;
  transition:background-color .15s ease,border-color .15s ease;
}
html:root body:not(#_c) .btn:not(.primary):not(.danger):not(.wa-btn){
  background:#ffffff !important;
  border:1px solid #cbd5e1 !important;
  color:#0f172a !important;
  -webkit-text-fill-color:#0f172a !important;
}
html:root body:not(#_c) .btn:not(.primary):not(.danger):not(.wa-btn):hover{background:#f8fafc !important;border-color:#94a3b8 !important}
html:root body:not(#_c) .btn.primary{
  background:#1d4ed8 !important;
  border:1px solid #1d4ed8 !important;
  color:#ffffff !important;
  -webkit-text-fill-color:#ffffff !important;
}
html:root body:not(#_c) .btn.primary:hover{background:#1e40af !important;border-color:#1e40af !important}
html:root body:not(#_c) .btn:disabled{opacity:.55 !important;cursor:not-allowed}

/* ---------- brand chips ---------- */
html:root body:not(#_c) #brandGrid .brandChip{
  background:#ffffff !important;
  background-image:none !important;
  border:1px solid #d9e1ec !important;
  color:#1e293b !important;
  -webkit-text-fill-color:#1e293b !important;
  border-radius:10px !important;
  font-weight:800 !important;
  box-shadow:none !important;
  min-height:40px;
}
html:root body:not(#_c) #brandGrid .brandChip:hover{background:#eff6ff !important;border-color:#93c5fd !important}
html:root body:not(#_c) #brandGrid .brandChip.active,
html:root body:not(#_c) #brandGrid .brandChip[aria-selected="true"]{
  background:#1d4ed8 !important;
  border-color:#1d4ed8 !important;
  color:#ffffff !important;
  -webkit-text-fill-color:#ffffff !important;
  box-shadow:0 2px 6px rgba(29,78,216,.25) !important;
}

/* ---------- items table ---------- */
html:root body:not(#_c) .sheet thead th{
  background:#f1f5f9 !important;
  color:#334155 !important;
  font-weight:800 !important;
  border-bottom:1px solid #e2e8f0 !important;
}
html:root body:not(#_c) .sheet tbody td{
  background:#ffffff !important;
  border-bottom:1px solid #eef2f7 !important;
  color:#0f172a !important;
}
html:root body:not(#_c) .sheet tbody tr:hover td{background:#f8fbff !important}

/* ---------- status / notices ---------- */
html:root body:not(#_c) .status{
  background:#f8fafc !important;
  border:1px solid #e2e8f0 !important;
  color:#334155 !important;
  border-radius:12px !important;
  box-shadow:none !important;
}

/* ---------- offers ---------- */
html:root body:not(#_c) .promoCard{
  background:#ffffff !important;
  border:1px solid #e2e8f0 !important;
  border-radius:16px !important;
  box-shadow:0 1px 3px rgba(15,23,42,.06) !important;
}
html:root body:not(#_c) .promoImg{
  border:1px solid #e2e8f0 !important;
  border-radius:12px !important;
  padding:4px !important;
}
html:root body:not(#_c) .promoItemRow{
  background:#f8fafc !important;
  border:1px solid #e2e8f0 !important;
  border-radius:12px !important;
}
html:root body:not(#_c) .promoSummaryBadge{border-radius:12px !important;box-shadow:none !important}

/* ---------- phone bottom bar ---------- */
html:root body:not(#_c) .mobileBar{
  background:#ffffff !important;
  border:1px solid #e2e8f0 !important;
  box-shadow:0 -2px 10px rgba(15,23,42,.08) !important;
}

/* ---------- phones ---------- */
@media (max-width:640px){
  html:root body:not(#_c) #pageMain .formRow{grid-template-columns:1fr !important}
  html:root body:not(#_c) #pageMain .toolbar .right{
    display:grid !important;
    grid-template-columns:1fr 1fr !important;
    gap:8px !important;
  }
  html:root body:not(#_c) #pageMain .toolbar .right > .btn{
    width:100% !important;
    margin:0 !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    text-align:center !important;
  }
  html:root body:not(#_c) .topbar{flex-direction:column !important;padding:12px !important}
  html:root body:not(#_c) #kpiPill{top:12px !important;right:12px !important;transform:none !important}
  html:root body:not(#_c) .topbar-logo img{height:44px !important}
  html:root body:not(#_c) .topbar-center .t1{font-size:17px !important}
}

/* ---------- quantity stepper + picked rows (all sizes) ---------- */
html:root body:not(#_c) .qtyStepper{
  display:inline-flex !important;
  align-items:center;
  gap:6px;
}
html:root body:not(#_c) .qtyStepper .qtyStep{
  width:38px;
  height:38px;
  flex:0 0 38px;
  border-radius:10px;
  border:1px solid #cbd5e1;
  background:#f8fafc;
  color:#0f172a;
  font:800 20px/1 Inter,Tajawal,Arial,sans-serif;
  padding:0;
  cursor:pointer;
  box-shadow:none;
  touch-action:manipulation;
  -webkit-tap-highlight-color:transparent;
}
html:root body:not(#_c) .qtyStepper .qtyStep:active{background:#dbeafe;border-color:#93c5fd}
html:root body:not(#_c) .qtyStepper input.qty{
  width:56px !important;
  min-width:0 !important;
  height:38px !important;
  min-height:38px !important;
  padding:0 4px !important;
  text-align:center !important;
  font-size:16px !important;
  font-weight:800 !important;
  -moz-appearance:textfield;
}
html:root body:not(#_c) .qtyStepper input.qty::-webkit-outer-spin-button,
html:root body:not(#_c) .qtyStepper input.qty::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
html:root body:not(#_c) #pageMain .sheet td.colQty{width:auto !important;white-space:nowrap}
html:root body:not(#_c) .sheet tbody tr.picked td{background:#eff6ff !important}
html:root body:not(#_c) .sheet tbody tr.picked .itemName{color:#1d4ed8 !important;-webkit-text-fill-color:#1d4ed8 !important}
html:root body:not(#_c) .sheet tbody tr.picked input.qty{border-color:#2563eb !important;background:#fff !important}
html:root body:not(#_c) #mReviewBtn .mCount{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:24px;
  height:24px;
  padding:0 7px;
  margin-inline-start:6px;
  border-radius:999px;
  background:#ffffff;
  color:#1d4ed8;
  -webkit-text-fill-color:#1d4ed8;
  font:800 13px/1 Inter,Tajawal,Arial,sans-serif;
}
html:root body:not(#_c) #mReviewBtn .mCount.hidden{display:none}

/* ---------- phones: catalog first, chrome second ---------- */
@media (max-width:640px){
  html:root body:not(#_c) .main{padding:8px 8px 96px !important}

  /* compact header: logo + title on one line */
  html:root body:not(#_c) .topbar{
    flex-direction:row !important;
    justify-content:flex-start !important;
    padding:8px 12px !important;
    margin-bottom:8px !important;
    min-height:58px !important;
  }
  html:root body:not(#_c) .topbar-center{
    flex-direction:row !important;
    align-items:center !important;
    gap:8px !important;
    text-align:right !important;
  }
  html:root body:not(#_c) .topbar-logo img{height:38px !important;border-radius:9px !important}
  html:root body:not(#_c) .topbar-center .t1{font-size:15px !important;line-height:1.3 !important}
  html:root body:not(#_c) .topbar-center .t2{font-size:11.5px !important;padding:4px 8px !important;margin-top:2px !important}
  html:root body:not(#_c) #kpiPill{display:none !important}

  /* fewer nested boxes = wider rows */
  html:root body:not(#_c) .card.pad{padding:10px !important;border-radius:14px !important}
  html:root body:not(#_c) .sheet{border:0 !important;box-shadow:none !important;border-radius:0 !important;margin:0 !important;padding:0 !important;width:100% !important;overflow:visible !important}
  html:root body:not(#_c) .sheet table{min-width:0 !important;width:100% !important;table-layout:auto !important}
  html:root body:not(#_c) .sheet col.colItem,
  html:root body:not(#_c) .sheet col.colQty{width:auto !important}
  html:root body:not(#_c) .sheet td.colItem{width:100% !important}
  html:root body:not(#_c) #pageMain .sheet td.colQty{width:1% !important;padding-inline:4px !important}
  html:root body:not(#_c) .qtyStepper{gap:4px}
  html:root body:not(#_c) .qtyStepper .qtyStep{width:36px;height:40px;flex-basis:36px}
  html:root body:not(#_c) .qtyStepper input.qty{width:48px !important;height:40px !important;min-height:40px !important}
  html:root body:not(#_c) .sheet thead{display:none !important}
  html:root body:not(#_c) .sheet tbody td{padding:8px 10px !important;vertical-align:middle !important}
  html:root body:not(#_c) .sheet .itemName{font-size:15px !important;line-height:1.45 !important}

  /* brands + search stay reachable while scrolling a long list */
  html:root body:not(#_c) #pageMain .toolbar .left{
    position:sticky !important;
    top:0 !important;
    z-index:20 !important;
    display:flex !important;
    flex-direction:column !important;
    gap:6px !important;
    margin:0 -10px !important;
    padding:8px 10px !important;
    width:auto !important;
    background:#ffffff !important;
    border-bottom:1px solid #e2e8f0 !important;
  }
  html:root body:not(#_c) #pageMain .toolbar .left > div{min-width:0 !important;width:100% !important}
  html:root body:not(#_c) #pageMain .toolbar .left label{display:none !important}
  /* overflow-x:hidden on every wrapper turns each into a scroll box, so sticky
     would pin to a box that never scrolls. clip blocks sideways scroll too,
     without creating a scroll container (unsupported browsers keep hidden). */
  html:root:not(#_c),
  html:root body:not(#_c),
  html:root body:not(#_c) .app,
  html:root body:not(#_c) .main,
  html:root body:not(#_c) #pageMain{overflow-x:clip !important;overflow-y:visible !important}
  /* sticky only works inside its parent; flatten the toolbar so the parent is #pageMain */
  html:root body:not(#_c) #pageMain .toolbar{display:contents !important}
  html:root body:not(#_c) #pageMain .toolbar .right{margin:10px 0 !important}
  html:root body:not(#_c) #brandGrid{
    display:flex !important;
    flex-wrap:nowrap !important;
    grid-template-columns:none !important;
    gap:6px !important;
    overflow-x:auto !important;
    overscroll-behavior-x:contain;
    scroll-snap-type:x proximity;
    scrollbar-width:none;
    padding:2px 0 !important;
    margin:0 !important;
  }
  html:root body:not(#_c) #brandGrid::-webkit-scrollbar{display:none}
  html:root body:not(#_c) #brandGrid .brandChip{
    flex:0 0 auto !important;
    width:auto !important;
    min-width:0 !important;
    min-height:36px !important;
    height:36px !important;
    padding:0 14px !important;
    font-size:14px !important;
    white-space:nowrap !important;
    scroll-snap-align:start;
  }
  html:root body:not(#_c) #searchBox{min-height:42px !important;height:42px !important}

  /* the bottom bar already has مسح + مراجعة طلبك */
  html:root body:not(#_c) #pageMain .toolbar .right #clearBtn,
  html:root body:not(#_c) #pageMain .toolbar .right #reviewBtn{display:none !important}

  /* iOS zooms the page when a focused field is under 16px */
  html:root body:not(#_c) input,
  html:root body:not(#_c) select,
  html:root body:not(#_c) textarea{font-size:16px !important}

  /* fixed thumb-reach bar */
  html:root body:not(#_c) #pageMain .mobileBar{
    position:fixed !important;
    left:8px !important;
    right:8px !important;
    bottom:calc(8px + env(safe-area-inset-bottom, 0px)) !important;
    z-index:50 !important;
    margin:0 !important;
    padding:8px !important;
    gap:8px !important;
    border-radius:16px !important;
  }
  html:root body:not(#_c) #pageMain .mobileBar #mClearBtn{flex:0 0 30% !important}
  html:root body:not(#_c) #pageMain .mobileBar #mReviewBtn{flex:1 1 auto !important;min-height:46px !important;font-size:16px !important}
  html:root body.page-review-active:not(#_c) #pageMain .mobileBar,
  html:root body.page-locked-active:not(#_c) #pageMain .mobileBar{display:none !important}

  /* review page: send/back as big thumb buttons pinned to the bottom */
  html:root body:not(#_c) #pageReview .sheet table{min-width:0 !important}
  html:root body:not(#_c) #pageReview .reviewActions{
    position:sticky !important;
    bottom:calc(8px + env(safe-area-inset-bottom, 0px)) !important;
    z-index:30 !important;
    display:grid !important;
    grid-template-columns:30% 1fr !important;
    gap:8px !important;
    margin-top:12px !important;
    padding:8px !important;
    background:#ffffff !important;
    border:1px solid #e2e8f0 !important;
    border-radius:16px !important;
    box-shadow:0 -2px 10px rgba(15,23,42,.08) !important;
  }
  html:root body:not(#_c) #pageReview .reviewActions .btn,
  html:root body:not(#_c) #pageLocked .reviewActions .btn{width:100% !important;min-height:48px !important;margin:0 !important;font-size:16px !important}
  html:root body:not(#_c) #pageLocked .reviewActions{display:grid !important;grid-template-columns:1fr !important;gap:8px !important}
}