/* ===============================================
   Professional Mobile Home
   =============================================== */

:root{
  --home-purple:#7436c5;
  --home-purple-dark:#642bb1;
  --home-purple-soft:#f4ebfb;

  --home-yellow:#ffab12;

  --home-bg:#f7f5fa;
  --home-card:#ffffff;

  --home-text:#2b2340;
  --home-muted:#827a8d;

  --home-radius:22px;

  --home-shadow:
    0 7px 24px rgba(54,32,88,.12);
}

#tab-home{
  background:var(--home-bg);
  padding-bottom:95px;
}

.mobile-home{
  max-width:720px;
  margin:auto;
}


/* greeting */

.home-greeting{
  display:flex;
  align-items:center;
  justify-content:space-between;

  gap:15px;

  padding:22px;

  color:#fff;

  border-radius:22px;

  background:
    linear-gradient(
      135deg,
      var(--home-purple),
      #8247cf
    );

  box-shadow:var(--home-shadow);
}

.home-greeting-main{
  display:flex;
  align-items:center;
  gap:14px;
}

.home-avatar{
  width:55px;
  height:55px;

  display:grid;
  place-items:center;

  border-radius:18px;

  background:var(--home-yellow);

  color:#fff;

  font-size:29px;
}

.home-greeting h2{
  margin:0 0 4px;

  font-size:23px;

  color:#fff;
}

.home-greeting p{
  margin:0;

  font-size:17px;
  font-weight:700;

  color:#fff;
}

.home-actions{
  display:flex;
  align-items:center;
  gap:8px;
}

.home-icon-button{
  width:42px;
  height:42px;
  min-height:42px;

  padding:0;

  border-radius:50%;

  display:grid;
  place-items:center;

  background:
    rgba(255,255,255,.16);

  color:#fff;

  font-size:20px;
}


/* summary */

.home-summary-card{
  position:relative;

  overflow:hidden;

  margin-top:18px;

  padding:23px;

  color:#fff;

  border-radius:24px;

  background:
    linear-gradient(
      145deg,
      #6f2dba,
      #8549d1
    );

  box-shadow:var(--home-shadow);
}

.home-summary-card::after{
  content:"";

  position:absolute;

  width:240px;
  height:240px;

  left:-90px;
  bottom:-130px;

  border-radius:50%;

  background:
    rgba(255,255,255,.06);
}

.home-app-name{
  position:relative;
  z-index:2;

  text-align:center;

  font-size:14px;
  font-weight:700;

  opacity:.95;
}

.home-main-number{
  position:relative;
  z-index:2;

  margin:22px 0 7px;

  text-align:center;
}

.home-main-number span{
  display:block;

  margin-bottom:6px;

  font-size:13px;

  opacity:.88;
}

.home-main-number strong{
  font-size:32px;

  font-variant-numeric:
    tabular-nums;
}

.home-summary-grid{
  position:relative;
  z-index:2;

  display:grid;

  grid-template-columns:
    repeat(2,1fr);

  gap:9px;

  margin-top:20px;
}

.home-summary-item{
  padding:12px;

  text-align:center;

  border-radius:14px;

  background:
    rgba(255,255,255,.12);
}

.home-summary-item span{
  display:block;

  margin-bottom:5px;

  font-size:11px;

  opacity:.9;
}

.home-summary-item strong{
  font-size:17px;
}


/* search */

.home-search{
  margin:17px 0;
}

.home-search-box{
  position:relative;
}

.home-search-box input{
  min-height:58px;

  padding-right:48px;

  border:1px solid #cec7d6;

  border-radius:17px;

  background:#fff;

  font-size:15px;
}

.home-search-icon{
  position:absolute;

  right:17px;
  top:50%;

  transform:
    translateY(-50%);

  font-size:21px;

  color:#81798a;
}


/* services */

.home-services{
  display:grid;

  grid-template-columns:
    repeat(3,1fr);

  gap:13px;
}

.home-service{
  min-width:0;

  cursor:pointer;

  text-align:center;
}

.home-service-icon{
  width:64px;
  height:64px;

  margin:0 auto -5px;

  position:relative;
  z-index:2;

  display:grid;
  place-items:center;

  border-radius:22px;

  color:var(--home-purple);

  font-size:31px;

  background:#fff;

  box-shadow:
    0 6px 18px
    rgba(116,54,197,.12);
}

.home-service-card{
  min-height:100px;

  padding:
    18px 8px
    12px;

  display:flex;
  align-items:center;
  justify-content:center;

  border-radius:17px;

  background:
    linear-gradient(
      180deg,
      #fbf1fc,
      #f7eaf9
    );

  color:var(--home-purple);

  font-size:16px;
  font-weight:800;

  line-height:1.35;

  transition:
    transform .15s ease,
    box-shadow .15s ease;
}

.home-service:active
.home-service-card{
  transform:scale(.97);
}


/* bottom app nav */

.mobile-main-nav{
  display:none;
}


/* ===============================================
   MOBILE
   =============================================== */

@media(max-width:800px){

  #tab-home{
    margin:-10px;
    padding:15px 14px 105px;
  }

  /* hide old nav as top menu */
  main > nav{
    display:none!important;
  }

  .mobile-main-nav{
    position:fixed;

    right:0;
    left:0;
    bottom:0;

    z-index:300;

    display:grid;

    grid-template-columns:
      repeat(2,1fr);

    background:
      rgba(255,255,255,.98);

    border-top:
      1px solid #eee7f4;

    box-shadow:
      0 -6px 25px
      rgba(45,22,76,.08);

    padding:
      8px 10px
      calc(
        8px +
        env(safe-area-inset-bottom)
      );
  }

  .mobile-main-nav button{
    min-height:58px;

    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;

    gap:2px;

    padding:5px;

    border-radius:14px;

    background:transparent;

    color:var(--home-purple);

    font-size:12px;
  }

  .mobile-main-nav button span:first-child{
    font-size:25px;
  }

  .mobile-main-nav button.active{
    background:transparent;

    color:var(--home-yellow);
  }

}


/* small phones */

@media(max-width:430px){

  .home-services{
    grid-template-columns:
      repeat(3,minmax(0,1fr));

    gap:9px;
  }

  .home-service-card{
    font-size:14px;
    min-height:91px;
  }

  .home-service-icon{
    width:57px;
    height:57px;

    font-size:27px;
  }

  .home-greeting{
    padding:18px;
  }

  .home-greeting h2{
    font-size:20px;
  }

  .home-summary-card{
    padding:19px;
  }

}


/* ===============================================
   Final mobile polish
   =============================================== */

@media(max-width:800px){

  /*
    الصفحة الرئيسية لها رأس خاص بها،
    لذلك نخفي الرأس القديم على الجوال.
  */
  main > header{
    display:none;
  }

  #tab-home{
    min-height:100vh;
  }

  .mobile-home{
    padding-top:5px;
  }

  .home-services{
    padding-bottom:90px;
  }

  .home-summary-grid{
    grid-template-columns:
      repeat(2,minmax(0,1fr));
  }

  .home-summary-item{
    min-height:75px;

    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
  }

  .home-summary-item strong{
    font-size:19px;
  }

}


/* تحسين مظهر البطاقات مثل تطبيقات الجوال */

.home-service-card{
  box-shadow:
    0 5px 18px
    rgba(116,54,197,.05);
}

.home-service-icon{
  border:
    1px solid
    rgba(116,54,197,.07);
}


/* =========================================================
   HOME FINAL POLISH
   ========================================================= */

@media(max-width:800px){

  /* صافي حقوق الرعية بعرض البطاقة بالكامل */
  .home-summary-item:last-child{
    grid-column:1/-1;
  }

  .home-summary-item:last-child strong{
    font-size:22px;
  }

  /* مساحة كافية حتى لا يغطي الشريط السفلي الخدمات */
  .home-services{
    padding-bottom:140px;
  }

  /* تقليل الفراغ بين البحث والخدمات */
  .home-search{
    margin-top:18px;
    margin-bottom:24px;
  }

  /* تحسين حجم الخدمات */
  .home-service{
    min-width:0;
  }

  .home-service-card{
    min-height:112px;
    padding:23px 7px 13px;
  }

  .home-service-icon{
    width:64px;
    height:64px;
    margin-bottom:-9px;

    font-size:30px;

    border-radius:20px;

    box-shadow:
      0 7px 20px
      rgba(116,54,197,.12);
  }

  /* البطاقة العلوية */
  .home-greeting{
    min-height:134px;
  }

  /* بطاقة الأرقام */
  .home-summary-card{
    margin-top:17px;
  }

  .home-main-number strong{
    font-size:36px;
    letter-spacing:.3px;
  }

  /* bottom navigation */
  .mobile-main-nav{
    min-height:82px;

    background:
      rgba(255,255,255,.98);

    backdrop-filter:blur(16px);
  }

  .mobile-main-nav button span:first-child{
    font-size:27px;
  }

}


/* الهواتف الصغيرة */

@media(max-width:400px){

  .home-main-number strong{
    font-size:31px;
  }

  .home-service-card{
    font-size:14px;
  }

  .home-service-icon{
    width:58px;
    height:58px;
    font-size:27px;
  }

}

/* Qat service icon */
.qat-icon{
  color:#2f9e57;
}

.qat-icon svg{
  display:block;
}

/* Qat icon */
.home-service[data-open-tab="seller-deals"]
.home-service-icon{
  color:#249447;
}

.qat-svg{
  width:44px;
  height:44px;
  display:block;
}

/* =========================================================
   SAFE MOBILE INTERNAL PAGES
   ========================================================= */

@media(max-width:800px){

  /* إلغاء كل شريط تنقل سفلي */
  .mobile-main-nav,
  .pro-mobile-nav,
  .mobile-more-backdrop,
  .mobile-more-sheet{
    display:none !important;
  }

  body{
    padding-bottom:0 !important;
    overflow-x:hidden;
  }

  #appView{
    padding-bottom:0 !important;
  }

  main{
    width:100% !important;
    max-width:100% !important;
    padding:10px !important;
  }

  /* الصفحات الداخلية */
  .tab:not(#tab-home){
    width:100% !important;
    max-width:100% !important;
    margin:0 !important;
  }

  /* بيع جديد */
  #tab-sale.grid2.active{
    grid-template-columns:1fr !important;
    gap:12px !important;
  }

  /* البطاقات */
  .tab:not(#tab-home) .card{
    width:100% !important;
    max-width:100% !important;
    margin:0 0 12px !important;
    padding:16px !important;
    border-radius:20px !important;
  }

  /* الحقول */
  .tab:not(#tab-home) input,
  .tab:not(#tab-home) select,
  .tab:not(#tab-home) textarea{
    width:100% !important;
    max-width:100% !important;
    min-height:50px;
    font-size:16px !important;
    border-radius:13px !important;
  }

  /* البحث والصفوف */
  .row,
  .filters{
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:10px !important;
  }

  /* صندوق اختيار العملاء */
  #customerSelect{
    min-height:180px;
  }

  /* الحسابات */
  .calc{
    display:grid !important;
    grid-template-columns:1fr 1fr !important;
    gap:9px !important;
  }

  .calc > div{
    min-width:0;
    padding:12px !important;
    border-radius:14px !important;
  }

  .calc strong{
    font-size:19px !important;
    word-break:break-word;
  }

  /* زر الحفظ */
  #saveSaleBtn,
  #saveBuyerDeal,
  #saveSellerDeal{
    position:static !important;
    width:100% !important;
    min-height:54px !important;
    margin-top:14px !important;
    border-radius:14px !important;
    font-size:16px !important;
  }

  /* الصفحات المتعددة */
  #tab-buyer-deals .grid2,
  #tab-seller-deals .grid2{
    grid-template-columns:1fr !important;
  }

  /* منع العناصر من الخروج خارج الشاشة */
  .buyer-purchase-row,
  .seller-purchase-box,
  .buyer-deal-card,
  .seller-deal-card,
  .deal-data-card{
    max-width:100% !important;
    overflow:hidden;
  }
}

@media(max-width:420px){

  .calc{
    grid-template-columns:1fr !important;
  }

}

/* =========================================================
   PROFESSIONAL SALE TAB
   ========================================================= */

#tab-sale{
  position:relative;
}

.sale-mobile-header{
  display:none;
}

.sale-card-title{
  display:flex;
  align-items:center;
  gap:10px;

  margin-bottom:14px;
}

.sale-card-title-icon{
  width:42px;
  height:42px;

  display:grid;
  place-items:center;

  flex:0 0 42px;

  border-radius:14px;

  background:
    linear-gradient(
      145deg,
      #7436c5,
      #9152d7
    );

  color:#fff;

  font-size:21px;

  box-shadow:
    0 6px 18px
    rgba(116,54,197,.18);
}

.sale-card-title h2{
  margin:0 !important;
  font-size:18px !important;
}

.sale-card-title p{
  margin:2px 0 0;

  color:#7d7488;

  font-size:11px;
}

.sale-section-card{
  border:1px solid #e6dfec !important;

  background:
    linear-gradient(
      145deg,
      #fff,
      #fdfbfe
    ) !important;

  box-shadow:
    0 8px 25px
    rgba(47,27,70,.06) !important;
}

.sale-section-card hr{
  border:0;
  border-top:1px solid #eee8f2;

  margin:18px 0;
}

.sale-customer-list{
  border:1px solid #ded7e6 !important;

  background:#faf7fc !important;

  border-radius:14px !important;
}

.sale-add-customer{
  padding:12px;

  border:1px dashed #d7c8e6;

  border-radius:15px;

  background:#fbf7fe;
}

.sale-add-customer h3{
  margin:0 0 10px !important;

  color:#7436c5 !important;
}

.sale-auto-box{
  display:flex;
  align-items:center;
  gap:10px;

  padding:12px;

  margin-bottom:14px;

  border:1px solid #d9c9eb;
  border-radius:15px;

  background:
    linear-gradient(
      135deg,
      #f7effd,
      #fff
    );
}

.sale-auto-icon{
  width:40px;
  height:40px;

  display:grid;
  place-items:center;

  flex:0 0 40px;

  border-radius:13px;

  background:#7436c5;

  color:#fff;

  font-size:18px;
}

.sale-auto-box strong{
  display:block;

  color:#4d2a68;

  font-size:13px;
}

.sale-auto-box span{
  display:block;

  margin-top:3px;

  color:#7d7488;

  font-size:11px;
}

.sale-calc-title{
  margin:
    18px 0 9px;

  color:#473951;

  font-size:14px;
  font-weight:800;
}

.sale-summary{
  display:grid !important;
  grid-template-columns:
    repeat(2,minmax(0,1fr)) !important;

  gap:9px !important;
}

.sale-summary > div{
  min-width:0;

  padding:12px !important;

  border:1px solid #e8deef !important;
  border-radius:15px !important;

  background:
    linear-gradient(
      145deg,
      #faf5fe,
      #fff
    ) !important;
}

.sale-summary span{
  color:#7d7488 !important;

  font-size:11px !important;
}

.sale-summary strong{
  color:#7436c5 !important;

  font-size:19px !important;
}

.sale-summary .sale-final-total{
  grid-column:1/-1;

  background:
    linear-gradient(
      135deg,
      #eafaf4,
      #f8fffc
    ) !important;

  border-color:#bce7d7 !important;
}

.sale-summary .sale-final-total strong{
  color:#128162 !important;

  font-size:23px !important;
}

.sale-primary-button{
  min-height:55px !important;

  margin-top:15px !important;

  border-radius:15px !important;

  background:
    linear-gradient(
      135deg,
      #7436c5,
      #6326af
    ) !important;

  color:#fff !important;

  box-shadow:
    0 8px 22px
    rgba(116,54,197,.22);

  font-size:16px !important;
}


/* =========================================================
   MOBILE SALE PAGE
   ========================================================= */

@media(max-width:800px){

  #tab-sale.active{
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:12px !important;

    width:100% !important;
    max-width:100% !important;

    margin:0 !important;
    padding:0 !important;
  }

  .sale-mobile-header{
    display:flex;

    align-items:center;
    justify-content:space-between;

    gap:10px;

    position:sticky;
    top:0;

    z-index:60;

    padding:11px 12px;

    margin-bottom:2px;

    border:1px solid #e8e1ee;
    border-radius:17px;

    background:
      rgba(255,255,255,.96);

    backdrop-filter:
      blur(12px);

    box-shadow:
      0 6px 20px
      rgba(47,27,70,.06);
  }

  .sale-mobile-header-main{
    display:flex;
    align-items:center;
    gap:10px;

    min-width:0;
  }

  .sale-mobile-icon{
    width:45px;
    height:45px;

    display:grid;
    place-items:center;

    flex:0 0 45px;

    border-radius:14px;

    background:
      linear-gradient(
        145deg,
        #7436c5,
        #9250d8
      );

    color:#fff;

    font-size:22px;
  }

  .sale-mobile-header h2{
    margin:0;

    font-size:17px;
  }

  .sale-mobile-header p{
    margin:2px 0 0;

    color:#80768a;

    font-size:11px;

    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }

  .sale-back-home{
    width:42px !important;
    height:42px !important;

    min-height:42px !important;

    padding:0 !important;

    display:grid !important;
    place-items:center;

    border-radius:14px !important;

    background:#f4edf9 !important;

    color:#7436c5 !important;

    font-size:20px !important;
  }

  .sale-section-card{
    padding:14px !important;

    border-radius:18px !important;
  }

  .sale-card-title{
    margin-bottom:12px;
  }

  .sale-card-title-icon{
    width:38px;
    height:38px;

    flex:0 0 38px;

    font-size:18px;
  }

  .sale-card-title h2{
    font-size:16px !important;
  }

  .sale-card-title p{
    font-size:10px;
  }

  .sale-add-customer{
    padding:10px;
  }

  .sale-summary{
    grid-template-columns:
      repeat(2,minmax(0,1fr))
      !important;
  }

  .sale-summary > div{
    min-height:80px;
  }

  .sale-summary strong{
    word-break:break-word;
  }

  #saveSaleBtn.sale-primary-button{
    position:static !important;

    width:100% !important;
  }

}

@media(max-width:420px){

  .sale-summary{
    grid-template-columns:1fr 1fr !important;
  }

  .sale-summary > div{
    padding:10px !important;
  }

  .sale-summary strong{
    font-size:17px !important;
  }

  .sale-summary .sale-final-total strong{
    font-size:21px !important;
  }

}


/* =========================================================
   SALE CUSTOMER COMPACT UI
   ========================================================= */

.toggle-new-customer{
  width:100%;

  margin-top:14px;

  min-height:48px;

  border:1px solid #d8c9e8;

  border-radius:14px;

  background:
    linear-gradient(
      135deg,
      #f7effd,
      #fff
    );

  color:#7436c5;

  font-size:14px;
  font-weight:800;
}

.toggle-new-customer:active{
  transform:scale(.99);
}

#newCustomerPanel{
  margin-top:10px;
}

.sale-customer-list{
  height:auto !important;
  min-height:132px !important;
  max-height:170px !important;
}

@media(max-width:800px){

  .sale-customer-list{
    min-height:128px !important;
    max-height:145px !important;
  }

  .sale-add-customer{
    margin-top:10px;
  }

}


/* =========================================================
   TAB VISIBILITY FIX
   ========================================================= */

/* جميع الصفحات مخفية افتراضيًا */
#appView .tab{
  display:none !important;
}

/* الصفحة النشطة فقط تظهر */
#appView .tab.active{
  display:block !important;
}

/* الصفحات التي تستخدم grid */
#appView #tab-sale.active,
#appView #tab-buyer-deals.active,
#appView #tab-seller-deals.active{
  display:grid !important;
  grid-template-columns:1fr !important;
}

/* الرئيسية */
#appView #tab-home.active{
  display:block !important;
}


/* =========================================================
   PROFESSIONAL BUYER DEALS TAB
   ========================================================= */

#tab-buyer-deals{
  position:relative;
}

.buyer-mobile-header{
  display:none;
}

.buyer-pro-card{
  border:1px solid #e7dfee !important;
  border-radius:20px !important;
  background:
    linear-gradient(
      145deg,
      #fff,
      #fcfafe
    ) !important;
  box-shadow:
    0 8px 25px
    rgba(47,27,70,.06) !important;
}

.buyer-pro-title{
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom:14px;
}

.buyer-pro-title-icon{
  width:42px;
  height:42px;
  display:grid;
  place-items:center;
  flex:0 0 42px;
  border-radius:14px;
  background:
    linear-gradient(
      145deg,
      #7436c5,
      #9250d8
    );
  color:#fff;
  font-size:20px;
}

.buyer-pro-title h2{
  margin:0 !important;
  font-size:18px !important;
}

.buyer-pro-title p{
  margin:2px 0 0;
  color:#7c7387;
  font-size:11px;
}

.buyer-purchase-row{
  border:1px solid #e4dced !important;
  border-radius:17px !important;
  background:
    linear-gradient(
      145deg,
      #faf7fd,
      #fff
    ) !important;
  box-shadow:
    0 4px 14px
    rgba(56,31,80,.04);
}

.purchase-row-head{
  margin-bottom:12px;
}

.purchase-title{
  color:#7436c5 !important;
  font-size:17px !important;
}

.buyer-purchase-row .remove-purchase{
  background:#fff1f2 !important;
  color:#c53c4a !important;
  border:1px solid #f0cfd3 !important;
}

.purchase-input-grid{
  gap:10px !important;
}

.purchase-calcs{
  margin-top:12px !important;
  gap:8px !important;
}

.purchase-calcs>div{
  border:1px solid #e8e0ef !important;
  background:#fff !important;
  border-radius:13px !important;
}

.buyer-summary{
  margin-top:16px !important;
}

.buyer-summary>div{
  border:1px solid #e7ddef !important;
  background:
    linear-gradient(
      145deg,
      #faf5ff,
      #fff
    ) !important;
  border-radius:14px !important;
}

.buyer-summary strong{
  color:#7436c5 !important;
}

.buyer-final{
  background:
    linear-gradient(
      135deg,
      #e9faf4,
      #f8fffc
    ) !important;
  border-color:#bee8d9 !important;
}

.buyer-final strong{
  color:#128162 !important;
}

#saveBuyerDeal{
  background:
    linear-gradient(
      135deg,
      #7436c5,
      #6326af
    ) !important;
  box-shadow:
    0 8px 22px
    rgba(116,54,197,.22);
  border-radius:15px !important;
}


/* =========================================================
   MOBILE BUYER DEALS
   ========================================================= */

@media(max-width:800px){

  #tab-buyer-deals{
    display:grid;
    grid-template-columns:1fr !important;
    gap:12px !important;
    width:100% !important;
    max-width:100% !important;
    margin:0 !important;
    padding:0 !important;
  }

  #tab-buyer-deals:not(.active){
    display:none !important;
  }

  .buyer-mobile-header{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    position:sticky;
    top:0;
    z-index:60;
    padding:11px 12px;
    margin-bottom:2px;
    border:1px solid #e8e1ee;
    border-radius:17px;
    background:rgba(255,255,255,.96);
    backdrop-filter:blur(12px);
    box-shadow:
      0 6px 20px
      rgba(47,27,70,.06);
  }

  .buyer-mobile-header-main{
    display:flex;
    align-items:center;
    gap:10px;
    min-width:0;
  }

  .buyer-mobile-icon{
    width:45px;
    height:45px;
    display:grid;
    place-items:center;
    flex:0 0 45px;
    border-radius:14px;
    background:
      linear-gradient(
        145deg,
        #7436c5,
        #9250d8
      );
    color:#fff;
    font-size:21px;
  }

  .buyer-mobile-header h2{
    margin:0;
    font-size:17px;
  }

  .buyer-mobile-header p{
    margin:2px 0 0;
    color:#80768a;
    font-size:11px;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }

  .buyer-back-home{
    width:42px !important;
    height:42px !important;
    min-height:42px !important;
    padding:0 !important;
    display:grid !important;
    place-items:center;
    border-radius:14px !important;
    background:#f4edf9 !important;
    color:#7436c5 !important;
    font-size:20px !important;
  }

  #tab-buyer-deals .grid2{
    grid-template-columns:1fr !important;
    gap:12px !important;
  }

  .buyer-pro-card{
    padding:14px !important;
  }

  .buyer-pro-title-icon{
    width:38px;
    height:38px;
    flex:0 0 38px;
    font-size:18px;
  }

  .buyer-pro-title h2{
    font-size:16px !important;
  }

  .buyer-purchase-row{
    padding:12px !important;
  }

  .purchase-input-grid,
  .purchase-calcs{
    grid-template-columns:1fr !important;
  }

  .buyer-summary{
    grid-template-columns:
      repeat(2,minmax(0,1fr))
      !important;
  }

  #saveBuyerDeal{
    position:static !important;
    width:100% !important;
    min-height:54px !important;
    margin-top:14px !important;
  }
}

@media(max-width:420px){

  .buyer-summary{
    grid-template-columns:1fr !important;
  }

}

/* =========================================================
   PROFESSIONAL SELLER DEALS TAB
   ========================================================= */

#tab-seller-deals{
  position:relative;
}

.seller-mobile-header{
  display:none;
}

.seller-pro-card{
  border:1px solid #e7dfee !important;
  border-radius:20px !important;

  background:
    linear-gradient(
      145deg,
      #fff,
      #fcfafe
    ) !important;

  box-shadow:
    0 8px 25px
    rgba(47,27,70,.06) !important;
}

.seller-pro-title{
  display:flex;
  align-items:center;
  gap:10px;

  margin-bottom:14px;
}

.seller-pro-title-icon{
  width:42px;
  height:42px;

  display:grid;
  place-items:center;

  flex:0 0 42px;

  border-radius:14px;

  background:
    linear-gradient(
      145deg,
      #7436c5,
      #9250d8
    );

  color:#fff;

  font-size:20px;
}

.seller-pro-title-icon.qat{
  background:
    linear-gradient(
      145deg,
      #26914d,
      #3bb56a
    );
}

.seller-pro-title h2{
  margin:0 !important;
  font-size:18px !important;
}

.seller-pro-title p{
  margin:2px 0 0;

  color:#7c7387;

  font-size:11px;
}


/* =========================================================
   SELLER FORM
   ========================================================= */

#sellerDealCustomer{
  background:#faf7fd !important;
}

.seller-purchase-box{
  position:relative;

  padding:14px !important;

  margin:14px 0 !important;

  border:1px solid #e3dbea !important;

  border-radius:18px !important;

  background:
    linear-gradient(
      145deg,
      #faf7fd,
      #fff
    ) !important;

  box-shadow:
    0 4px 14px
    rgba(56,31,80,.04);
}

.seller-purchase-box::before{
  content:"";

  position:absolute;

  right:0;
  top:0;
  bottom:0;

  width:4px;

  border-radius:
    0 18px 18px 0;

  background:
    linear-gradient(
      180deg,
      #7436c5,
      #3aa862
    );
}

.seller-purchase-title{
  color:#7436c5 !important;

  font-size:17px !important;
}

.remove-seller-purchase{
  background:#fff1f2 !important;

  color:#c53c4a !important;

  border:1px solid #f0cfd3 !important;
}

.seller-item-totals{
  margin-top:12px !important;

  gap:8px !important;
}

.seller-item-totals>div{
  border:1px solid #e8e0ef !important;

  background:#fff !important;

  border-radius:13px !important;
}

.seller-item-totals strong{
  color:#7436c5;
}


/* =========================================================
   BUYERS INSIDE SELLER PURCHASE
   ========================================================= */

.seller-buyers-header{
  margin-top:16px !important;

  padding-top:13px;

  border-top:1px solid #eee8f2;
}

.seller-buyers-header strong{
  color:#44364f;
}

.add-seller-buyer{
  background:#f5edfb !important;

  color:#7436c5 !important;

  border:1px solid #dac9e9 !important;

  border-radius:12px !important;
}

.seller-buyer-row{
  padding:12px !important;

  margin-top:9px !important;

  border:1px solid #e7e0ec !important;

  border-radius:15px !important;

  background:#fff !important;

  box-shadow:
    0 3px 12px
    rgba(50,30,70,.035);
}

.seller-buyer-title{
  color:#26914d;
}

.remove-seller-buyer{
  background:#fff3f4 !important;

  color:#c53c4a !important;

  border:1px solid #f1d2d6 !important;
}

.seller-buyer-calcs>div{
  border:1px solid #ece5f1 !important;

  border-radius:12px !important;

  background:#fbf9fd !important;
}

.seller-buyer-calcs strong{
  color:#7436c5;
}


/* allocation */

.seller-allocation-status{
  margin-top:12px !important;

  padding:11px !important;

  border:1px solid #d6eadd;

  border-radius:13px !important;

  background:#f0faf4 !important;

  color:#466452;
}

.seller-allocation-status strong{
  color:#207944;
}

.allocation-error{
  color:#d13e4b !important;
}


/* =========================================================
   SELLER SUMMARY
   ========================================================= */

.seller-main-summary{
  margin-top:16px !important;

  gap:9px !important;
}

.seller-main-summary>div{
  border:1px solid #e7ddef !important;

  border-radius:14px !important;

  background:
    linear-gradient(
      145deg,
      #faf5ff,
      #fff
    ) !important;
}

.seller-main-summary span{
  color:#7c7387 !important;
}

.seller-main-summary strong{
  color:#7436c5 !important;
}

.seller-auction-total{
  background:
    linear-gradient(
      135deg,
      #e9faf4,
      #f8fffc
    ) !important;

  border-color:#bde7d8 !important;
}

.seller-auction-total strong{
  color:#128162 !important;
}

#saveSellerDeal{
  background:
    linear-gradient(
      135deg,
      #7436c5,
      #6326af
    ) !important;

  box-shadow:
    0 8px 22px
    rgba(116,54,197,.22);

  border-radius:15px !important;
}


/* =========================================================
   SAVED SELLER CARDS
   ========================================================= */

.seller-deal-card{
  border:1px solid #e6ddec !important;

  border-radius:19px !important;

  overflow:hidden;

  box-shadow:
    0 7px 22px
    rgba(50,30,70,.055) !important;
}

.seller-deal-head{
  background:
    linear-gradient(
      135deg,
      #f6effb,
      #fff
    ) !important;
}

.seller-deal-head h3{
  color:#4b315e;
}

.seller-deal-badges span{
  background:#7436c5 !important;
}

.seller-purchase-view{
  border:1px solid #ebe4f0;

  background:#fbf9fd !important;
}

.seller-purchase-view-head strong{
  color:#7436c5;
}

.seller-buyer-view{
  border:1px solid #e8e2ec !important;

  background:#fff !important;
}

.seller-buyer-final{
  color:#128162 !important;
}


/* =========================================================
   MOBILE SELLER DEALS
   ========================================================= */

@media(max-width:800px){

  #tab-seller-deals{
    display:grid;
    grid-template-columns:1fr !important;

    gap:12px !important;

    width:100% !important;
    max-width:100% !important;

    margin:0 !important;
    padding:0 !important;
  }

  #tab-seller-deals:not(.active){
    display:none !important;
  }

  .seller-mobile-header{
    display:flex;

    align-items:center;
    justify-content:space-between;

    gap:10px;

    position:sticky;

    top:0;

    z-index:60;

    padding:11px 12px;

    margin-bottom:2px;

    border:1px solid #e8e1ee;

    border-radius:17px;

    background:
      rgba(255,255,255,.96);

    backdrop-filter:
      blur(12px);

    box-shadow:
      0 6px 20px
      rgba(47,27,70,.06);
  }

  .seller-mobile-header-main{
    display:flex;

    align-items:center;

    gap:10px;

    min-width:0;
  }

  .seller-mobile-icon{
    width:45px;
    height:45px;

    display:grid;
    place-items:center;

    flex:0 0 45px;

    border-radius:14px;

    background:
      linear-gradient(
        145deg,
        #26914d,
        #3bb56a
      );

    color:#fff;
  }

  .seller-mobile-icon svg{
    width:28px;
    height:28px;

    fill:currentColor;
  }

  .seller-mobile-header h2{
    margin:0;

    font-size:17px;
  }

  .seller-mobile-header p{
    margin:2px 0 0;

    color:#80768a;

    font-size:11px;

    white-space:nowrap;

    overflow:hidden;

    text-overflow:ellipsis;
  }

  .seller-back-home{
    width:42px !important;
    height:42px !important;

    min-height:42px !important;

    padding:0 !important;

    display:grid !important;
    place-items:center;

    border-radius:14px !important;

    background:#f4edf9 !important;

    color:#7436c5 !important;

    font-size:20px !important;
  }

  #tab-seller-deals .grid2{
    grid-template-columns:1fr !important;

    gap:12px !important;
  }

  .seller-pro-card{
    padding:14px !important;
  }

  .seller-pro-title-icon{
    width:38px;
    height:38px;

    flex:0 0 38px;

    font-size:18px;
  }

  .seller-pro-title h2{
    font-size:16px !important;
  }

  .seller-purchase-box{
    padding:12px !important;
  }

  .purchase-input-grid,
  .seller-item-totals,
  .seller-buyer-calcs{
    grid-template-columns:1fr !important;
  }

  .seller-main-summary{
    grid-template-columns:
      repeat(2,minmax(0,1fr))
      !important;
  }

  #saveSellerDeal{
    position:static !important;

    width:100% !important;

    min-height:54px !important;

    margin-top:14px !important;
  }

  .seller-view-calcs{
    grid-template-columns:
      repeat(2,minmax(0,1fr))
      !important;
  }

  .seller-deal-summary-view{
    grid-template-columns:
      repeat(2,minmax(0,1fr))
      !important;
  }

}

@media(max-width:420px){

  .seller-main-summary,
  .seller-view-calcs,
  .seller-deal-summary-view{
    grid-template-columns:1fr !important;
  }

}

/* =========================================================
   PROFESSIONAL SALES HISTORY
   ========================================================= */

#tab-sales{
  position:relative;
}

.sales-mobile-header{
  display:none;
}

.sales-filter-box{
  margin-bottom:14px;

  padding:13px;

  border:1px solid #e5ddec;
  border-radius:17px;

  background:
    linear-gradient(
      145deg,
      #faf7fd,
      #fff
    );
}

.sales-filter-title{
  display:flex;
  align-items:center;
  justify-content:space-between;

  gap:10px;

  margin-bottom:11px;
}

.sales-filter-title strong{
  color:#50355f;
  font-size:15px;
}

.sales-filter-title span{
  color:#8b8193;
  font-size:11px;
}

#tab-sales .filters{
  gap:8px;
}

#tab-sales #refreshSales{
  background:
    linear-gradient(
      135deg,
      #7436c5,
      #6326af
    );

  color:#fff;

  border-radius:13px;
}

#tab-sales .buttonlink{
  display:flex;
  align-items:center;
  justify-content:center;

  border:1px solid #d9c9e8;

  background:#f7effd;

  color:#7436c5;

  border-radius:13px;
}


/* desktop table */

#tab-sales .tablewrap{
  border:1px solid #e7e0ec;

  border-radius:17px;

  overflow:auto;

  background:#fff;

  box-shadow:
    0 5px 18px
    rgba(50,30,70,.04);
}

#tab-sales table{
  margin:0;
}

#tab-sales th{
  background:#f5effa;

  color:#544260;
}

#tab-sales tbody tr:nth-child(even){
  background:#fcfbfd;
}


/* =========================================================
   MOBILE SALES
   ========================================================= */

@media(max-width:800px){

  #tab-sales{
    width:100% !important;
    max-width:100% !important;

    margin:0 !important;
    padding:0 !important;
  }

  #tab-sales:not(.active){
    display:none !important;
  }

  .sales-mobile-header{
    display:flex;

    align-items:center;
    justify-content:space-between;

    gap:10px;

    position:sticky;

    top:0;

    z-index:60;

    margin-bottom:12px;

    padding:11px 12px;

    border:1px solid #e8e1ee;

    border-radius:17px;

    background:
      rgba(255,255,255,.96);

    backdrop-filter:
      blur(12px);

    box-shadow:
      0 6px 20px
      rgba(47,27,70,.06);
  }


  .sales-mobile-header-main{
    display:flex;

    align-items:center;

    gap:10px;

    min-width:0;
  }


  .sales-mobile-icon{
    width:45px;
    height:45px;

    display:grid;
    place-items:center;

    flex:0 0 45px;

    border-radius:14px;

    background:
      linear-gradient(
        145deg,
        #7436c5,
        #9250d8
      );

    color:#fff;

    font-size:21px;
  }


  .sales-mobile-header h2{
    margin:0;

    font-size:17px;
  }


  .sales-mobile-header p{
    margin:2px 0 0;

    color:#80768a;

    font-size:11px;
  }


  .sales-back-home{
    width:42px !important;
    height:42px !important;

    min-height:42px !important;

    padding:0 !important;

    display:grid !important;
    place-items:center;

    border-radius:14px !important;

    background:#f4edf9 !important;

    color:#7436c5 !important;

    font-size:20px !important;
  }


  /* Filters */

  .sales-filter-box{
    padding:12px;

    border-radius:16px;
  }

  #tab-sales .filters{
    display:grid !important;

    grid-template-columns:
      1fr 1fr !important;

    gap:8px !important;
  }

  #tab-sales .filters input,
  #tab-sales .filters select,
  #tab-sales .filters button,
  #tab-sales .filters .buttonlink{
    width:100% !important;
    min-width:0 !important;
  }

  #fPhone{
    grid-column:1/-1;
  }

  #fCategory{
    grid-column:1/-1;
  }

  #refreshSales,
  #tab-sales .buttonlink{
    min-height:49px;
  }


  /* =======================================================
     TABLE -> MOBILE CARDS
     ======================================================= */

  #tab-sales .tablewrap{
    overflow:visible !important;

    border:0;

    background:transparent;

    box-shadow:none;
  }

  #tab-sales table{
    display:block;

    width:100% !important;

    min-width:0 !important;

    white-space:normal !important;
  }

  #tab-sales thead{
    display:none;
  }

  #tab-sales tbody{
    display:grid;

    gap:12px;

    width:100%;
  }

  #tab-sales tbody tr{
    display:grid;

    grid-template-columns:
      1fr 1fr;

    gap:0;

    width:100%;

    padding:13px;

    border:1px solid #e5ddec;

    border-radius:18px;

    background:#fff !important;

    box-shadow:
      0 7px 22px
      rgba(50,30,70,.055);
  }


  #tab-sales tbody td{
    display:flex;

    flex-direction:column;

    justify-content:center;

    min-width:0;

    min-height:60px;

    padding:9px 8px;

    border-bottom:
      1px solid #f0ebf3;

    text-align:right;

    white-space:normal;

    overflow-wrap:anywhere;
  }


  #tab-sales tbody td::before{
    display:block;

    margin-bottom:4px;

    color:#8a8093;

    font-size:10px;

    font-weight:500;
  }


  /* العملية */
  #tab-sales tbody td:nth-child(1){
    grid-column:1/2;

    min-height:45px;

    color:#7436c5;

    font-size:17px;

    font-weight:800;
  }

  #tab-sales tbody td:nth-child(1)::before{
    content:"رقم العملية";
  }


  /* التاريخ */
  #tab-sales tbody td:nth-child(2){
    grid-column:2/3;

    min-height:45px;
  }

  #tab-sales tbody td:nth-child(2)::before{
    content:"التاريخ";
  }


  /* العميل */
  #tab-sales tbody td:nth-child(3){
    grid-column:1/-1;

    min-height:54px;

    color:#34243e;

    font-size:17px;

    font-weight:800;

    background:#faf7fd;

    border-radius:11px 11px 0 0;
  }

  #tab-sales tbody td:nth-child(3)::before{
    content:"العميل";
  }


  /* الهاتف */
  #tab-sales tbody td:nth-child(4)::before{
    content:"الهاتف";
  }


  /* الفئة */
  #tab-sales tbody td:nth-child(5)::before{
    content:"الفئة";
  }


  /* الإجمالي */
  #tab-sales tbody td:nth-child(6)::before{
    content:"إجمالي البيع";
  }


  /* النسبة */
  #tab-sales tbody td:nth-child(7)::before{
    content:"النسبة";
  }


  /* عمولة من الرعوي */
  #tab-sales tbody td:nth-child(8)::before{
    content:"عمولة المحرج من الرعوي";
  }


  /* صافي الحق */
  #tab-sales tbody td:nth-child(9)::before{
    content:"صافي حق الرعوي";
  }


  /* عمولة المشتري */
  #tab-sales tbody td:nth-child(10)::before{
    content:"عمولة المحرج من المشتري";
  }


  /* المبلغ النهائي */
  #tab-sales tbody td:nth-child(11){
    grid-column:1/-1;

    margin-top:3px;

    min-height:68px;

    border:1px solid #bee7d7;

    border-radius:13px;

    background:
      linear-gradient(
        135deg,
        #eafaf4,
        #f8fffc
      );

    color:#128162;

    font-size:19px;

    font-weight:900;
  }

  #tab-sales tbody td:nth-child(11)::before{
    content:"المبلغ النهائي";

    color:#52766a;
  }

}


@media(max-width:420px){

  #tab-sales .filters{
    grid-template-columns:1fr !important;
  }

  #fPhone,
  #fCategory{
    grid-column:auto;
  }

  #tab-sales tbody tr{
    grid-template-columns:1fr;
  }

  #tab-sales tbody td,
  #tab-sales tbody td:nth-child(1),
  #tab-sales tbody td:nth-child(2),
  #tab-sales tbody td:nth-child(3),
  #tab-sales tbody td:nth-child(11){
    grid-column:1/-1;
  }

}

/* =========================================================
   PREMIUM SALE DETAIL CARDS
   ========================================================= */

.sales-detail-list{
  display:none;
}


/* mobile */

@media(max-width:800px){

  #tab-sales .tablewrap{
    display:none !important;
  }

  .sales-detail-list{
    display:grid;
    gap:18px;
  }


  .sale-detail-card{
    overflow:hidden;

    padding:14px;

    border:1px solid #e7dfed;
    border-radius:23px;

    background:#fff;

    box-shadow:
      0 10px 30px
      rgba(46,25,67,.08);
  }


  /* ================================
     TOP
     ================================ */

  .sale-detail-top{
    display:flex;

    justify-content:
      space-between;

    align-items:center;

    gap:10px;

    padding:5px 2px 13px;

    border-bottom:
      1px solid #eee8f2;
  }


  .sale-number-box{
    display:flex;

    align-items:center;

    gap:10px;
  }


  .sale-number-box span{
    display:block;

    color:#777080;

    font-size:11px;
  }


  .sale-number-box strong{
    display:block;

    margin-top:2px;

    color:#6426bd;

    font-size:24px;
  }


  .sale-status{
    display:flex;

    align-items:center;

    gap:7px;

    padding:8px 13px;

    border-radius:12px;

    background:#e9fbf4;

    color:#14835e;

    font-size:12px;
    font-weight:800;
  }


  .sale-status span{
    width:8px;
    height:8px;

    border-radius:50%;

    background:#13aa72;
  }


  /* ================================
     ROWS
     ================================ */

  .sale-detail-row{
    display:grid;

    grid-template-columns:
      44px
      minmax(115px,.85fr)
      minmax(0,1.25fr);

    align-items:center;

    gap:10px;

    min-height:76px;

    padding:9px 0;

    border-bottom:
      1px solid #f0ebf3;
  }


  .sale-detail-label{
    color:#61596a;

    font-size:13px;

    line-height:1.5;
  }


  .sale-detail-label small{
    display:block;

    margin-top:3px;

    color:#797181;

    font-size:10px;
  }


  .sale-detail-row > strong{
    min-width:0;

    color:#161223;

    font-size:15px;

    text-align:left;

    overflow-wrap:anywhere;

    font-variant-numeric:
      tabular-nums;
  }


  .sale-detail-row
  .money-value{
    color:#147b64;

    font-size:18px;
  }


  /* ================================
     ICONS
     ================================ */

  .sale-detail-icon{
    width:42px;
    height:42px;

    display:grid;

    place-items:center;

    border-radius:13px;

    font-size:20px;

    font-weight:900;
  }


  .sale-detail-icon.purple{
    background:#eee5ff;
    color:#7130d0;
  }

  .sale-detail-icon.gray{
    background:#f1f2f6;
    color:#637086;
  }

  .sale-detail-icon.violet{
    background:#f2e9ff;
    color:#7928d4;
  }

  .sale-detail-icon.green{
    background:#e5faf2;
    color:#09a573;
  }

  .sale-detail-icon.orange{
    background:#fff3df;
    color:#f1a018;
  }

  .sale-detail-icon.money{
    background:#e3faf1;
    color:#0f9869;
  }

  .sale-detail-icon.percent{
    background:#f2e9ff;
    color:#8243d4;
  }

  .sale-detail-icon.blue{
    background:#e8f3ff;
    color:#337dcc;
  }

  .sale-detail-icon.wallet{
    background:#eaf0ff;
    color:#315fc8;
  }

  .sale-detail-icon.pink{
    background:#ffedf4;
    color:#df4c83;
  }


  /* ================================
     FINAL AMOUNT
     ================================ */

  .sale-final-card{
    display:flex;

    align-items:center;

    justify-content:
      space-between;

    gap:12px;

    margin-top:14px;

    padding:17px;

    border:1px solid #ade6d4;

    border-radius:18px;

    background:
      linear-gradient(
        135deg,
        #e9fbf5,
        #f6fffc
      );
  }


  .sale-final-card span{
    display:block;

    color:#41675a;

    font-size:14px;
  }


  .sale-final-card strong{
    display:block;

    margin-top:4px;

    color:#07875e;

    font-size:28px;

    font-variant-numeric:
      tabular-nums;
  }


  .sale-final-icon{
    width:50px;
    height:50px;

    display:grid;

    place-items:center;

    border-radius:15px;

    background:#cff4e7;

    color:#07956b;

    font-size:23px;
  }


  /* ================================
     ACTIONS
     ================================ */

  .sale-detail-actions{
    display:grid;

    grid-template-columns:
      1fr 1fr;

    gap:10px;

    margin-top:15px;
  }


  .sale-detail-actions button{
    min-height:52px;

    border-radius:15px;

    font-size:14px;

    font-weight:800;
  }


  .sale-share-btn{
    background:
      linear-gradient(
        135deg,
        #7436c5,
        #6a28c2
      ) !important;

    color:#fff !important;

    box-shadow:
      0 7px 18px
      rgba(116,54,197,.20);
  }


  .sale-print-btn{
    border:
      1px solid #dfd1ef !important;

    background:#f4eafb !important;

    color:#7436c5 !important;
  }


  .sale-detail-actions
  button span{
    margin-left:6px;

    font-size:19px;
  }

}


@media(max-width:420px){

  .sale-detail-card{
    padding:12px;
  }

  .sale-detail-row{
    grid-template-columns:
      40px
      minmax(100px,.9fr)
      minmax(0,1.1fr);

    gap:7px;
  }

  .sale-detail-icon{
    width:38px;
    height:38px;

    font-size:17px;
  }

  .sale-detail-label{
    font-size:12px;
  }

  .sale-detail-row > strong{
    font-size:14px;
  }

  .sale-final-card strong{
    font-size:24px;
  }

}

/* =========================================================
   BUYER DEALS - REFERENCE MOBILE DESIGN
   ========================================================= */

@media(max-width:800px){

  /* الصفحة */
  #tab-buyer-deals{
    background:#f5f6fb !important;
    padding:0 12px 24px !important;
  }

  /* الرأس البنفسجي */
  #tab-buyer-deals .buyer-mobile-header{
    margin:
      0 -12px
      18px !important;

    padding:
      20px 18px !important;

    min-height:126px;

    border:0 !important;

    border-radius:
      0 0 28px 28px !important;

    background:
      linear-gradient(
        135deg,
        #4f2399,
        #7836c8,
        #56209e
      ) !important;

    color:#fff !important;

    box-shadow:
      0 8px 24px
      rgba(83,34,150,.25);

    position:relative !important;
    top:auto !important;
  }

  .buyer-mobile-header h2{
    color:#fff !important;
    font-size:23px !important;
    font-weight:900;
  }

  .buyer-mobile-header p{
    color:
      rgba(255,255,255,.78) !important;

    font-size:13px !important;
  }

  .buyer-mobile-icon{
    width:58px !important;
    height:58px !important;

    flex:0 0 58px !important;

    border-radius:17px !important;

    background:
      rgba(255,255,255,.14) !important;

    font-size:29px !important;

    box-shadow:none !important;
  }

  .buyer-back-home{
    order:-1;

    width:52px !important;
    height:52px !important;

    min-height:52px !important;

    border-radius:50% !important;

    background:
      rgba(255,255,255,.14) !important;

    color:#fff !important;

    font-size:28px !important;
  }


  /* =====================================================
     العمود الأول
     ===================================================== */

  #tab-buyer-deals .buyer-deal-layout{
    display:block !important;
  }

  #tab-buyer-deals .buyer-pro-card{
    margin-bottom:16px !important;

    padding:14px !important;

    border:
      1px solid #ebe6f1 !important;

    border-radius:21px !important;

    background:#fff !important;

    box-shadow:
      0 8px 24px
      rgba(32,22,50,.055) !important;
  }


  /* إخفاء العنوان الداخلي الأول لأن الرأس يكفي */
  #tab-buyer-deals
  .buyer-deal-layout
  > .buyer-pro-card:first-child
  > .buyer-pro-title{
    display:none !important;
  }


  /* =====================================================
     الحقول الرئيسية ككروت منفصلة
     ===================================================== */

  #multiBuyerName,
  #multiBuyerDate,
  #multiBuyerNotes{
    background:#fff !important;

    border:
      1px solid #dcd7e4 !important;

    border-radius:13px !important;

    font-size:16px !important;
  }

  #multiBuyerNotes{
    min-height:95px !important;
  }

  #tab-buyer-deals
  .buyer-pro-card:first-child
  > label{
    display:block;

    margin:
      0 0 16px !important;

    padding:15px;

    border:
      1px solid #ece7f1;

    border-radius:18px;

    background:#fff;

    box-shadow:
      0 5px 16px
      rgba(31,22,48,.035);

    font-size:16px;
  }


  /* =====================================================
     عنوان الشروات
     ===================================================== */

  #tab-buyer-deals .multi-title-row{
    margin:
      4px 0 12px !important;

    padding:
      0 2px;

    display:flex !important;

    align-items:center;

    justify-content:
      space-between;
  }

  #tab-buyer-deals .multi-title-row h3{
    margin:0 !important;

    color:#21172d !important;

    font-size:20px !important;
  }

  #addBuyerPurchase{
    width:auto !important;

    min-height:48px !important;

    padding:
      10px 18px !important;

    border:0 !important;

    border-radius:13px !important;

    background:
      linear-gradient(
        135deg,
        #7b31dc,
        #6a24c9
      ) !important;

    color:#fff !important;

    box-shadow:
      0 7px 18px
      rgba(116,54,197,.22);
  }


  /* =====================================================
     بطاقة الشروة
     ===================================================== */

  .buyer-purchase-row{
    position:relative;

    margin:
      12px 0 !important;

    padding:
      14px !important;

    border:
      1px solid #ded2ef !important;

    border-radius:19px !important;

    background:
      linear-gradient(
        145deg,
        #fcfaff,
        #f9f4ff
      ) !important;

    box-shadow:
      0 5px 15px
      rgba(94,50,140,.055);
  }

  .purchase-row-head{
    margin-bottom:12px !important;
  }

  .purchase-title{
    padding:
      8px 14px;

    border-radius:11px;

    background:#eadcff;

    color:#5e23b8 !important;

    font-size:16px !important;
  }

  .remove-purchase{
    width:44px !important;
    height:44px !important;

    min-height:44px !important;

    padding:0 !important;

    border:0 !important;

    border-radius:12px !important;

    background:#ffe7eb !important;

    color:#df334b !important;

    font-size:0 !important;
  }

  .remove-purchase::before{
    content:"🗑";
    font-size:20px;
  }


  /* اختيار الرعوي */
  .buyer-purchase-row
  label{
    font-size:14px;
  }

  .buyer-purchase-row
  select,
  .buyer-purchase-row
  input{
    min-height:51px !important;

    border:
      1px solid #d8d2df !important;

    border-radius:13px !important;

    background:#fff !important;
  }


  /* العدد والسعر جنب بعض */
  .buyer-purchase-row
  .purchase-input-grid{
    display:grid !important;

    grid-template-columns:
      1fr 1fr !important;

    gap:10px !important;
  }


  /* إجماليات الشروة */
  .purchase-calcs{
    display:grid !important;

    grid-template-columns:1fr !important;

    margin-top:12px !important;
  }

  .purchase-calcs>div{
    min-height:72px;

    padding:12px !important;

    border:0 !important;

    border-radius:14px !important;

    background:
      linear-gradient(
        135deg,
        #e9fbf5,
        #f5fffb
      ) !important;
  }

  .purchase-calcs span{
    color:#338467 !important;
  }

  .purchase-calcs strong{
    color:#07996c !important;

    font-size:20px !important;
  }


  /* =====================================================
     ملخص الصفقة
     ===================================================== */

  .buyer-summary{
    display:grid !important;

    grid-template-columns:
      1fr 1fr !important;

    gap:9px !important;

    margin:
      18px 0 10px !important;
  }

  .buyer-summary>div{
    min-height:82px;

    padding:12px !important;

    border:
      1px solid #e5d9f0 !important;

    border-radius:14px !important;

    background:#faf6fe !important;
  }

  .buyer-summary span{
    color:#75667f !important;

    font-size:11px !important;
  }

  .buyer-summary strong{
    color:#6e2bc2 !important;

    font-size:18px !important;
  }

  .buyer-summary .buyer-final{
    grid-column:1/-1 !important;

    background:
      linear-gradient(
        135deg,
        #e9fbf5,
        #f6fffc
      ) !important;

    border-color:#bce8d8 !important;
  }

  .buyer-summary
  .buyer-final strong{
    color:#07865f !important;

    font-size:23px !important;
  }


  /* =====================================================
     أزرار أسفل النموذج
     ===================================================== */

  #saveBuyerDeal{
    position:static !important;

    width:100% !important;

    min-height:55px !important;

    margin-top:10px !important;

    border:0 !important;

    border-radius:15px !important;

    background:
      linear-gradient(
        135deg,
        #7830da,
        #6923ca
      ) !important;

    color:#fff !important;

    font-size:16px !important;

    box-shadow:
      0 8px 20px
      rgba(112,42,205,.23);
  }


  /* سجل الصفقات المحفوظة */
  #tab-buyer-deals
  .buyer-deal-layout
  > .buyer-pro-card:nth-child(2){
    margin-top:18px !important;
  }


  /* =====================================================
     الهواتف الصغيرة
     ===================================================== */

  @media(max-width:410px){

    .buyer-purchase-row
    .purchase-input-grid{
      grid-template-columns:
        1fr 1fr !important;
    }

    .buyer-summary{
      grid-template-columns:
        1fr 1fr !important;
    }
  }

}

@media(max-width:800px){

  .buyer-form-actions{
    display:grid;

    grid-template-columns:
      1fr 1fr;

    gap:10px;

    margin-top:14px;
  }

  .buyer-form-actions
  #saveBuyerDeal{
    margin:0 !important;
  }

  #resetBuyerDeal{
    min-height:55px;

    border:0;

    border-radius:15px;

    background:
      linear-gradient(
        135deg,
        #f0e4fb,
        #f8f1fd
      );

    color:#7436c5;

    font-size:15px;
    font-weight:800;
  }

}

/* =========================================================
   SALE TAB - REFERENCE MOBILE DESIGN
   ========================================================= */

@media(max-width:800px){

  #tab-sale{
    background:#f5f6fb !important;
    padding:0 12px 24px !important;
  }

  /* ================================
     HEADER
     ================================ */

  #tab-sale .sale-mobile-header{
    margin:
      0 -12px
      18px !important;

    padding:
      20px 18px !important;

    min-height:126px;

    border:0 !important;

    border-radius:
      0 0 28px 28px !important;

    background:
      linear-gradient(
        135deg,
        #4f2399,
        #7836c8,
        #56209e
      ) !important;

    color:#fff !important;

    box-shadow:
      0 8px 24px
      rgba(83,34,150,.25);

    position:relative !important;
    top:auto !important;
  }

  .sale-mobile-header h2{
    color:#fff !important;

    font-size:24px !important;
    font-weight:900;
  }

  .sale-mobile-header p{
    color:
      rgba(255,255,255,.78) !important;

    font-size:13px !important;
  }

  .sale-mobile-icon{
    width:58px !important;
    height:58px !important;

    flex:0 0 58px !important;

    border-radius:17px !important;

    background:
      rgba(255,255,255,.14) !important;

    font-size:28px !important;

    box-shadow:none !important;
  }

  .sale-back-home{
    order:-1;

    width:52px !important;
    height:52px !important;

    min-height:52px !important;

    border-radius:50% !important;

    background:
      rgba(255,255,255,.14) !important;

    color:#fff !important;

    font-size:28px !important;
  }


  /* ================================
     CUSTOMER HEADER CARD
     ================================ */

  #tab-sale
  .sale-section-card:first-of-type{
    padding:0 !important;

    border:0 !important;

    background:transparent !important;

    box-shadow:none !important;
  }

  #tab-sale
  .sale-section-card:first-of-type
  .sale-card-title{
    margin-bottom:14px;

    padding:16px;

    border:1px solid #e7dfee;

    border-radius:19px;

    background:#fff;

    box-shadow:
      0 7px 22px
      rgba(48,28,70,.055);
  }

  #tab-sale
  .sale-section-card:first-of-type
  .sale-card-title-icon{
    width:53px;
    height:53px;

    flex:0 0 53px;

    border-radius:15px;

    font-size:24px;
  }

  #tab-sale
  .sale-section-card:first-of-type
  .sale-card-title h2{
    font-size:21px !important;
  }

  #tab-sale
  .sale-section-card:first-of-type
  .sale-card-title p{
    font-size:12px;
  }


  /* ================================
     CUSTOMER CONTENT CARD
     ================================ */

  #tab-sale
  .sale-section-card:first-of-type
  > label,

  #tab-sale
  .sale-section-card:first-of-type
  > #customerSelect,

  #tab-sale
  .sale-section-card:first-of-type
  > hr,

  #tab-sale
  .sale-section-card:first-of-type
  > #toggleNewCustomer,

  #tab-sale
  .sale-section-card:first-of-type
  > #newCustomerPanel{
    margin-right:0;
    margin-left:0;
  }


  /* البحث */
  #customerSearch{
    min-height:59px !important;

    padding:14px 16px !important;

    border:
      1px solid #dcd6e4 !important;

    border-radius:15px !important;

    background:#fff !important;

    font-size:17px !important;
  }


  /* قائمة العملاء */
  .sale-customer-list{
    min-height:122px !important;
    max-height:155px !important;

    padding:8px !important;

    border:
      1px solid #ded7e6 !important;

    border-radius:16px !important;

    background:
      linear-gradient(
        145deg,
        #fbf8fe,
        #fff
      ) !important;

    font-size:16px !important;
  }


  /* ================================
     ADD CUSTOMER
     ================================ */

  #toggleNewCustomer{
    min-height:52px;

    margin-top:15px;

    border:0;

    border-radius:15px;

    background:
      linear-gradient(
        135deg,
        #f0e4fb,
        #faf5fe
      );

    color:#7436c5;

    font-size:16px;
    font-weight:900;
  }

  #newCustomerPanel{
    margin-top:12px;

    padding:16px !important;

    border:
      1px solid #dfd5e9 !important;

    border-radius:19px !important;

    background:
      linear-gradient(
        145deg,
        #fcf9ff,
        #fff
      ) !important;
  }

  #newCustomerPanel h3{
    margin-bottom:15px !important;

    font-size:20px !important;

    color:#22172e !important;
  }

  #newName,
  #newPhone,
  #newCustomerNotes{
    min-height:57px !important;

    margin-bottom:10px;

    border:
      1px solid #dcd6e4 !important;

    border-radius:14px !important;

    background:#fff !important;

    font-size:16px !important;
  }

  #addCustomerBtn{
    width:100% !important;

    min-height:55px !important;

    margin-top:6px;

    border:0 !important;

    border-radius:15px !important;

    background:
      linear-gradient(
        135deg,
        #7a30dc,
        #6924c8
      ) !important;

    color:#fff !important;

    font-size:16px !important;

    box-shadow:
      0 8px 20px
      rgba(116,54,197,.20);
  }


  /* ================================
     SALE DATA CARD
     ================================ */

  #tab-sale
  .sale-section-card:nth-of-type(2){
    padding:16px !important;

    border:
      1px solid #e7dfee !important;

    border-radius:21px !important;

    background:#fff !important;

    box-shadow:
      0 8px 24px
      rgba(48,28,70,.055) !important;
  }

  #tab-sale
  .sale-section-card:nth-of-type(2)
  .sale-card-title{
    margin-bottom:15px;
  }

  #tab-sale
  .sale-section-card:nth-of-type(2)
  .sale-card-title-icon{
    width:50px;
    height:50px;

    flex:0 0 50px;
  }


  /* الحقول */
  #tab-sale
  .sale-section-card:nth-of-type(2)
  input,

  #tab-sale
  .sale-section-card:nth-of-type(2)
  select,

  #tab-sale
  .sale-section-card:nth-of-type(2)
  textarea{
    min-height:55px !important;

    border:
      1px solid #dcd6e4 !important;

    border-radius:14px !important;

    background:#fff !important;

    font-size:16px !important;
  }


  /* ================================
     SUMMARY
     ================================ */

  .sale-summary{
    margin-top:11px !important;

    gap:9px !important;
  }

  .sale-summary>div{
    min-height:82px;

    border:
      1px solid #e6ddef !important;

    border-radius:15px !important;

    background:
      linear-gradient(
        145deg,
        #faf6fe,
        #fff
      ) !important;
  }

  .sale-summary span{
    color:#786d82 !important;
  }

  .sale-summary strong{
    color:#6f2bc1 !important;
  }

  .sale-summary .sale-final-total{
    background:
      linear-gradient(
        135deg,
        #e9fbf5,
        #f6fffc
      ) !important;

    border-color:#bde8d8 !important;
  }

  .sale-summary
  .sale-final-total strong{
    color:#07865f !important;
  }


  /* ================================
     SALE ACTIONS
     ================================ */

  .sale-form-actions{
    display:grid;

    grid-template-columns:
      1fr 1fr;

    gap:10px;

    margin-top:15px;
  }

  #saveSaleBtn{
    margin:0 !important;

    min-height:56px !important;

    background:
      linear-gradient(
        135deg,
        #7830da,
        #6923ca
      ) !important;

    color:#fff !important;

    font-size:16px !important;
  }

  #resetSaleForm{
    min-height:56px;

    border:
      1px solid #d9c8e9;

    border-radius:15px;

    background:
      linear-gradient(
        135deg,
        #f1e7fa,
        #faf5fe
      );

    color:#7436c5;

    font-size:15px;

    font-weight:900;
  }

}

/* =========================================================
   SELECTED CUSTOMER CARD
   ========================================================= */

.selected-customer-card{
  display:grid;

  grid-template-columns:
    58px 1fr auto;

  align-items:center;

  gap:12px;

  margin-top:12px;

  padding:14px;

  border:
    1px solid #ded3ec;

  border-radius:17px;

  background:
    linear-gradient(
      145deg,
      #faf6fe,
      #fff
    );

  box-shadow:
    0 5px 16px
    rgba(65,35,90,.05);
}

.selected-customer-avatar{
  width:54px;
  height:54px;

  display:grid;
  place-items:center;

  border-radius:17px;

  background:#eee2ff;

  color:#7436c5;

  font-size:27px;
}

.selected-customer-info{
  min-width:0;
}

.selected-customer-info strong{
  display:block;

  color:#1e1627;

  font-size:17px;

  overflow:hidden;
  white-space:nowrap;
  text-overflow:ellipsis;
}

.selected-customer-info span{
  display:block;

  margin-top:4px;

  color:#706778;

  font-size:14px;
}

.selected-customer-status{
  padding:8px 11px;

  border-radius:12px;

  background:#e5f9f1;

  color:#16845f;

  font-size:12px;
  font-weight:800;

  white-space:nowrap;
}

@media(max-width:420px){

  .selected-customer-card{
    grid-template-columns:
      48px 1fr;
  }

  .selected-customer-avatar{
    width:46px;
    height:46px;

    font-size:23px;
  }

  .selected-customer-status{
    grid-column:1/-1;

    justify-self:start;

    margin-top:2px;
  }

}


/* =========================================================
   EXACT SELECTED CUSTOMER CARD V2
   ========================================================= */

.selected-customer-card{
  display:grid;

  grid-template-columns:
    58px minmax(0,1fr) auto;

  align-items:center;

  gap:12px;

  margin-top:12px;

  padding:14px;

  border:
    1px solid #d9c9e9;

  border-radius:18px;

  background:
    linear-gradient(
      135deg,
      #f7f0fd,
      #fff
    );

  box-shadow:
    0 5px 18px
    rgba(71,38,103,.055);
}


.selected-customer-card.hidden{
  display:none !important;
}


.selected-customer-avatar{
  width:54px;
  height:54px;

  display:grid;
  place-items:center;

  border-radius:17px;

  background:
    linear-gradient(
      145deg,
      #eee1ff,
      #f7f0ff
    );

  color:#7436c5;

  font-size:26px;
}


.selected-customer-info{
  min-width:0;
}


.selected-customer-info strong{
  display:block;

  color:#201629;

  font-size:17px;
  font-weight:900;

  overflow:hidden;

  white-space:nowrap;

  text-overflow:ellipsis;
}


.selected-customer-info span{
  display:block;

  margin-top:4px;

  color:#72687b;

  font-size:14px;
}


.selected-customer-status{
  padding:
    9px 12px;

  border-radius:12px;

  background:#e3f9f0;

  color:#0c8d63;

  font-size:12px;

  font-weight:900;

  white-space:nowrap;
}


@media(max-width:800px){

  #customerSelect.customer-selected-list{
    min-height:76px !important;
    max-height:105px !important;
  }

  .selected-customer-card:not(.hidden){
    display:grid !important;
  }

}


@media(max-width:430px){

  .selected-customer-card{
    grid-template-columns:
      50px minmax(0,1fr);
  }

  .selected-customer-avatar{
    width:48px;
    height:48px;

    font-size:23px;
  }

  .selected-customer-status{
    grid-column:1/-1;

    justify-self:start;

    margin-top:2px;
  }

}


/* =========================================================
   PROFESSIONAL MOBILE CUSTOMER CARDS
   ========================================================= */

.customer-mobile-cards{
  display:none;
}


@media(max-width:800px){

  /* نخفي قائمة select القديمة بصريًا فقط */
  #customerSelect{
    position:absolute !important;

    width:1px !important;
    height:1px !important;

    min-height:1px !important;

    opacity:0 !important;

    pointer-events:none !important;

    overflow:hidden !important;
  }


  .customer-mobile-cards{
    display:grid;

    gap:10px;

    margin-top:12px;
  }


  .customer-mobile-card{
    width:100% !important;

    min-height:94px !important;

    display:grid !important;

    grid-template-columns:
      58px
      minmax(0,1fr)
      auto;

    align-items:center;

    gap:12px;

    padding:13px !important;

    border:
      1px solid #e0d6ea !important;

    border-radius:17px !important;

    background:
      linear-gradient(
        145deg,
        #fbf8fe,
        #fff
      ) !important;

    color:#24182e !important;

    box-shadow:
      0 4px 15px
      rgba(60,35,85,.045);

    text-align:right;
  }


  .customer-mobile-card.selected{
    border-color:
      #cdb6e8 !important;

    background:
      linear-gradient(
        135deg,
        #f6edfd,
        #fff
      ) !important;

    box-shadow:
      0 7px 20px
      rgba(116,54,197,.09);
  }


  .customer-mobile-avatar{
    width:54px;
    height:54px;

    display:grid;

    place-items:center;

    border-radius:17px;

    background:#eee2ff;

    color:#7436c5;
  }


  .customer-mobile-avatar svg{
    width:30px;
    height:30px;

    fill:none;

    stroke:currentColor;

    stroke-width:1.8;

    stroke-linecap:round;
  }


  .customer-mobile-data{
    min-width:0;
  }


  .customer-mobile-data strong{
    display:block;

    color:#1c1325;

    font-size:17px;

    font-weight:900;

    overflow:hidden;

    white-space:nowrap;

    text-overflow:ellipsis;
  }


  .customer-mobile-data span{
    display:block;

    margin-top:5px;

    color:#706578;

    font-size:14px;
  }


  .customer-mobile-check{
    padding:
      8px 11px;

    border-radius:12px;

    background:#f1e8fa;

    color:#7436c5;

    font-size:11px;

    font-weight:900;

    white-space:nowrap;
  }


  .customer-mobile-card.selected
  .customer-mobile-check{
    background:#dcf7ec;

    color:#07885e;
  }


  .customer-mobile-empty{
    padding:20px;

    text-align:center;

    border:
      1px dashed #dcd2e4;

    border-radius:15px;

    color:#81768a;
  }

}


@media(max-width:430px){

  .customer-mobile-card{
    grid-template-columns:
      50px
      minmax(0,1fr);
  }


  .customer-mobile-avatar{
    width:48px;
    height:48px;
  }


  .customer-mobile-check{
    grid-column:1/-1;

    justify-self:start;
  }

}