/* =========================================================
   SALES HISTORY - REFERENCE DESIGN
   ========================================================= */

#tab-sales.sales-reference-page{
  direction:rtl;
  background:#f5f6fb;
}


@media(max-width:860px){

  #tab-sales.active{
    display:block !important;

    width:100% !important;

    padding:
      0 8px
      25px !important;

    overflow-x:hidden;
  }


  /* HEADER */

  .sl-header{
    width:
      calc(100% + 16px);

    min-height:
      91px;

    margin:
      0 -8px
      7px;

    padding:
      12px 16px
      20px;

    display:flex;

    align-items:center;

    gap:10px;

    color:#fff;

    background:
      radial-gradient(
        circle at 18% 0%,
        rgba(255,255,255,.12),
        transparent 37%
      ),
      linear-gradient(
        135deg,
        #843cf3,
        #6128d4 53%,
        #42239e
      );

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


  .sl-menu{
    width:39px !important;
    height:39px !important;
    min-height:39px !important;

    margin-left:5px;

    padding:0 !important;

    border:0 !important;

    border-radius:11px !important;

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

    color:#fff !important;

    font-size:21px !important;
  }


  .sl-header-user{
    display:flex;

    align-items:center;

    gap:6px;
  }


  .sl-user-avatar{
    width:38px;
    height:38px;

    display:grid;

    place-items:center;

    border-radius:50%;

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

    font-size:18px;
  }


  .sl-header-user strong{
    display:block;

    font-size:10px;

    font-weight:900;
  }


  .sl-header-user span{
    display:block;

    font-size:6.5px;

    color:
      rgba(255,255,255,.72);
  }


  .sl-header-title{
    margin-right:auto;

    display:flex;

    align-items:center;

    gap:8px;
  }


  .sl-header-title h1{
    margin:0;

    font-size:18px;

    font-weight:900;
  }


  .sl-header-title p{
    margin:3px 0 0;

    font-size:7.5px;

    color:
      rgba(255,255,255,.78);
  }


  .sl-logo{
    width:40px;
    height:40px;

    display:grid;

    place-items:center;

    border-radius:11px;

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

    font-size:12px;
  }


  /* NAV */

  .sl-nav{
    display:grid;

    grid-template-columns:
      repeat(6,minmax(0,1fr));

    gap:4px;

    margin:
      -13px 0
      8px;

    padding:6px;

    position:relative;

    z-index:3;

    border:
      1px solid #ece8f3;

    border-radius:13px;

    background:
      #fff;

    box-shadow:
      0 5px 18px
      rgba(48,37,69,.07);
  }


  .sl-nav button{
    min-height:50px !important;

    padding:
      4px 2px !important;

    display:flex !important;

    flex-direction:column;

    align-items:center;

    justify-content:center;

    gap:3px;

    border:0 !important;

    border-radius:9px !important;

    background:
      #f7f5fa !important;

    color:
      #655a75 !important;

    font-size:6.5px !important;

    font-weight:800 !important;
  }


  .sl-nav button span{
    font-size:14px;
  }


  .sl-nav button.active{
    background:
      linear-gradient(
        135deg,
        #8e3af2,
        #5f25cf
      ) !important;

    color:#fff !important;
  }


  /* MAIN CARD */

  .sl-card{
    padding:10px;

    border:
      1px solid #ebe8ef;

    border-radius:15px;

    background:#fff;

    box-shadow:
      0 5px 18px
      rgba(52,41,69,.05);
  }


  .sl-title-row{
    display:flex;

    align-items:center;

    gap:8px;

    margin-bottom:9px;
  }


  .sl-title-icon{
    width:39px;
    height:39px;

    display:grid;

    place-items:center;

    flex:
      0 0 39px;

    border-radius:10px;

    background:
      #efe2ff;

    color:
      #7030d1;

    font-size:17px;
  }


  .sl-title-row h2{
    margin:0;

    color:#21182a;

    font-size:15px;

    font-weight:900;
  }


  .sl-title-row p{
    margin:
      3px 0 0;

    color:#82788e;

    font-size:7px;

    font-weight:700;
  }


  /* FILTERS */

  .sl-filter-box{
    margin-bottom:9px;

    padding:8px;

    border:
      1px solid #e9e7ed;

    border-radius:11px;

    background:
      linear-gradient(
        180deg,
        #fcfcfe,
        #f9f9fc
      );
  }


  .sl-filter-grid{
    display:grid;

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

    gap:6px;
  }


  .sl-field{
    position:relative;
  }


  .sl-field > span{
    position:absolute;

    right:8px;
    top:50%;

    transform:
      translateY(-50%);

    z-index:2;

    color:
      #584a79;

    font-size:14px;

    pointer-events:none;
  }


  .sl-field input,
  .sl-field select{
    width:100% !important;

    height:36px !important;

    min-height:36px !important;

    margin:0 !important;

    padding:
      5px 31px
      5px 8px !important;

    border:
      1px solid #dddbe3 !important;

    border-radius:
      8px !important;

    background:#fff !important;

    color:#28212f !important;

    font-size:8.5px !important;

    font-weight:800 !important;
  }


  .sl-filter-actions{
    display:grid;

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

    gap:6px;

    margin-top:7px;
  }


  .sl-filter-actions
  button,
  .sl-filter-actions
  a{
    min-height:35px;

    display:flex;

    align-items:center;

    justify-content:center;

    border:0;

    border-radius:8px;

    text-decoration:none;

    font-family:inherit;

    font-size:8px;

    font-weight:900;
  }


  .sl-apply{
    background:
      linear-gradient(
        135deg,
        #8734ee,
        #6225d1
      ) !important;

    color:#fff !important;
  }


  .sl-refresh{
    background:
      #f0f2f8 !important;

    color:
      #5e5670 !important;
  }


  .sl-export{
    background:
      #eee6ff;

    color:
      #6023c3;
  }


  /* SALES CARDS */

  .sales-reference-list{
    display:grid;

    gap:7px;
  }


  .sl-sale-card{
    padding:8px;

    border:
      1px solid #e9e7ed;

    border-radius:12px;

    background:#fff;

    box-shadow:
      0 3px 11px
      rgba(40,32,52,.035);
  }


  .sl-sale-meta{
    display:grid;

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

    align-items:center;

    gap:6px;

    margin-bottom:7px;
  }


  .sl-sale-number{
    padding:
      4px 7px;

    border-radius:7px;

    background:#f4f2f7;

    color:#342b43;

    font-size:7.5px;

    font-weight:900;
  }


  .sl-sale-date{
    color:#6c7180;

    font-size:7px;

    font-weight:800;

    text-align:center;
  }


  .sl-category{
    min-width:61px;

    display:flex;

    align-items:center;

    justify-content:center;

    gap:4px;

    padding:
      5px 7px;

    border-radius:
      999px;

    font-size:7px;

    font-weight:900;
  }


  .sl-category i{
    width:6px;
    height:6px;

    border-radius:50%;
  }


  .sl-category.seller{
    background:#dcf7ef;
    color:#087f67;
  }

  .sl-category.seller i{
    background:#079272;
  }


  .sl-category.buyer{
    background:#ffe2ec;
    color:#ba3b67;
  }

  .sl-category.buyer i{
    background:#cf416d;
  }


  /* CUSTOMER */

  .sl-customer-row{
    display:grid;

    grid-template-columns:
      1fr
      1fr
      22px;

    align-items:center;

    gap:7px;

    margin-bottom:7px;
  }


  .sl-customer-item{
    display:flex;

    align-items:center;

    gap:6px;

    min-width:0;
  }


  .sl-info-icon{
    width:31px;
    height:31px;

    display:grid;

    place-items:center;

    flex:
      0 0 31px;

    border-radius:9px;

    font-size:14px;
  }


  .sl-info-icon.purple,
  .sl-info-icon.violet{
    background:#eee3ff;
    color:#6e28d1;
  }


  .sl-customer-item strong{
    display:block;

    color:#21192c;

    font-size:9px;

    font-weight:900;

    white-space:nowrap;

    overflow:hidden;

    text-overflow:ellipsis;
  }


  .sl-customer-item span{
    display:block;

    margin-top:1px;

    color:#82788d;

    font-size:6px;

    font-weight:700;
  }


  .sl-open-arrow{
    color:#6b27cf;

    font-size:22px;

    font-weight:900;
  }


  /* VALUES */

  .sl-values-grid{
    display:grid;

    grid-template-columns:
      repeat(4,minmax(0,1fr));

    gap:4px;
  }


  .sl-value-box{
    min-width:0;

    min-height:48px;

    display:flex;

    align-items:center;

    gap:5px;

    padding:
      5px;

    border:
      1px solid #e8e6ec;

    border-radius:8px;

    background:
      linear-gradient(
        180deg,
        #fff,
        #fbfbfd
      );
  }


  .sl-value-icon{
    width:25px;
    height:25px;

    display:grid;

    place-items:center;

    flex:
      0 0 25px;

    border-radius:7px;

    font-size:11px;

    font-weight:900;
  }


  .sl-value-icon.purple{
    background:#efe4ff;
    color:#742cd6;
  }

  .sl-value-icon.blue{
    background:#e0f0ff;
    color:#1777d1;
  }

  .sl-value-icon.orange{
    background:#fff0db;
    color:#db861d;
  }

  .sl-value-icon.green{
    background:#dcf6ed;
    color:#07866b;
  }


  .sl-value-box span{
    display:block;

    color:#756d80;

    font-size:5.7px;

    font-weight:800;
  }


  .sl-value-box strong{
    display:block;

    margin-top:1px;

    color:#172035;

    font-size:8.5px;

    font-weight:900;

    direction:ltr;

    text-align:right;
  }


  .sl-value-box
  .green-value{
    color:#07876c;
  }


  /* EXPANDED */

  .sl-extra-details{
    display:none;

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

    gap:5px;

    margin-top:6px;

    padding-top:6px;

    border-top:
      1px solid #eeeaf2;
  }


  .sl-sale-card.expanded
  .sl-extra-details{
    display:grid;
  }


  .sl-extra-details > div{
    padding:6px;

    border-radius:7px;

    background:#f8f7fb;
  }


  .sl-extra-details span{
    display:block;

    color:#776e82;

    font-size:6px;

    font-weight:800;
  }


  .sl-extra-details strong{
    display:block;

    margin-top:2px;

    color:#342349;

    font-size:8px;

    font-weight:900;
  }


  .sl-extra-actions{
    grid-column:1/-1;

    display:grid !important;

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

    gap:5px;
  }


  .sl-extra-actions button{
    min-height:30px !important;

    border:0 !important;

    border-radius:7px !important;

    background:#eee5ff !important;

    color:#6325c5 !important;

    font-size:7px !important;

    font-weight:900 !important;
  }


  .sl-desktop-table{
    display:none !important;
  }


  .sl-back-home{
    display:none !important;
  }

}