$menu-btn-color: #522c81;
$body-background: #f9f9f9;
$color-white: #fff;
$menu-color: #f9f8fb;
$color-active: #65438f;

.admin-middle-container-wrapper {
  .title-section {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.75rem;
    position: relative;
    flex-wrap: wrap;
    gap: 0.5rem;

    p {
      font-size: 1.5rem;
    }

    .stock-reports-download {
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 0.5rem;

      .import-export-btn {
        border-radius: 0.25rem;
        background-color: $color-active;
        padding: 0.5rem 1rem;

        a {
          color: $color-white;
          display: flex;
          align-items: center;
          justify-content: center;
          gap: 0.5rem;
          text-decoration: none;

          .dashicons-before {
            &::before {
              padding: 0;
            }
          }
        }
      }
    }
  }

  .manage-stock-wrapper {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 1rem;

    .admin-wrap-bulk-all-date {
      display: flex;
      align-items: center;
      justify-content: flex-start;
      gap: 0.5rem;
      flex-wrap: wrap;
      width: 100%;

      input,
      select,
      textarea {
        background-color: transparent !important; // To overwrite default wordpress css
        border: 0.115rem solid rgba(0, 0, 0, 0.125) !important; // To overwrite default wordpress css
        border-radius: 0.25rem !important; // To overwrite default wordpress css

        &:focus {
          box-shadow: none;
        }
      }

      &>div {
        flex: 1 0 8.19rem;
        max-width: 10rem;

        input,
        select {
          width: 100%;
          padding: 0.25rem 0.5rem;
        }
      }
    }
  }

  .manage-stock-table {
    width: 100%;

    input,
    select {
      background: transparent;
      border: none;
      outline: none;
      box-shadow: none;
      padding: 0;
      font-size: 0.875rem;

      &:focus {
        box-shadow: none !important; // To overwrite default wordpress css
      }
    }

    select {
      background: transparent url(data:image/svg+xml;charset=US-ASCII,%3Csvg%20width%3D%2220%22%20height%3D%2220%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M5%206l5%205%205-5%202%201-7%207-7-7%202-1z%22%20fill%3D%22%23555%22%2F%3E%3C%2Fsvg%3E) no-repeat right 0.315rem top 55%;
      padding-right: 1.25rem;
      font-size: 0.875rem;
      background-size: 0.875rem;
    }
  }
}

.setting-btn {
  width: 1.563rem;
  height: 1.563rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.25rem;
  background-color: #65438f;
  border-radius: 0.313rem;
  cursor: pointer;
  border: none;

  .bar {
    width: 50%;
    height: 0.125rem;
    background-color: rgb(229, 229, 229);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    border-radius: 0.125rem;

    &::before {
      content: "";
      width: 0.125rem;
      height: 0.125rem;
      background-color: rgb(126, 117, 255);
      position: absolute;
      border-radius: 50%;
      border: 0.063rem solid white;
      transition: all 0.3s;
      box-shadow: 0rem 0rem 0.313rem white;
    }
  }

  .bar1 {
    &::before {
      transform: translateX(-0.25rem);
    }
  }

  .bar2 {
    &::before {
      transform: translateX(0.25rem);
    }
  }

  &:hover {
    .bar1 {
      &::before {
        transform: translateX(0.25rem);
      }
    }

    .bar2 {
      &::before {
        transform: translateX(-0.25rem);
      }
    }
  }
}

.edit-btn-product {
  width: 1.563rem;
  display: flex;
  padding: 0;
  margin: 0;
  background: transparent;
  opacity: 0;
  transition: opacity 0.2s linear;
  align-items: center;
  justify-content: center;
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  z-index: -1;

  svg {
    width: 1rem;
  }
}

.manage-stock-table {
  height: fit-content;
  width: fit-content;

  &::-webkit-scrollbar {
    margin: 0;
    height: 0.504rem;
    background: transparent;
  }

  &::-webkit-scrollbar-thumb {
    background: #522c81;
  }

  .custome-toggle-default {
    position: relative;
    z-index: 1;
    top: -0.75rem;

    &::after {
      content: "";
      position: absolute;
      top: 0.35rem;
      left: 2.3rem;
      width: 0.25rem;
      height: 0.25rem;
      transform: translateY(50%);
      border: 0.0625rem solid #65438f;
      border-radius: 8rem;
      transition: 0.3s;
      z-index: 0;
    }

    input {
      position: absolute;
      width: 3.3rem;
      height: 1.5rem;
      top: 0.313rem;
      z-index: 2;
      opacity: 0;
      left: 0;
    }

    label {
      position: absolute;
      cursor: pointer;
      width: 3.3rem;
      height: 1.5rem;
      background: transparent;
      display: block;
      border-radius: 8rem;
      border: 0.125rem solid #d4d1d9;

      &::before {
        content: "";
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        left: 0.5rem;
        width: 0.17rem;
        height: 0.57rem;
        background: #fdfdfe;
        transition: 0.3s;
      }

      &::after {
        content: "";
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        left: 0.313rem;
        width: 0.875rem;
        height: 0.875rem;
        background: #65438f;
        border-radius: 90rem;
        transition: 0.3s;
        z-index: 1;
      }
    }

    &:has(input[type="checkbox"]:checked) label {
      background: #65438f;
      border: 0.125rem solid #65438f;

      &::after {
        left: calc(100% - 1.313rem);
        transform: translatey(-50%);
        background-color: #fdfdfe;
      }
    }
  }

  table {
    border-top-left-radius: 0.25rem;
    border-top-right-radius: 0.25rem;
    overflow: hidden;
    box-shadow: 0 0 1rem rgba(0, 0, 0, 0.125);
    width: 100%;
    position: relative;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    height: 100%;
    max-width: 100%;

    input {
      width: 100%;
    }

    * {
      font-size: 0.875rem;
    }

    thead {
      display: flex;
      width: 100%;
      color: rgba(0, 0, 0, 0.87);
      font-weight: 500;
      border-radius: 0.25rem;
      background-color: #fff;
      font-size: 0.9rem;

      .table-head {
        padding: 0.313rem;
        font-weight: 400;
        display: flex;
        align-items: stretch;
        width: 100%;
        background-color: #ffffff;
        min-height: 3.276rem;
        border-bottom-width: 0.063rem;
        border-bottom-color: rgba(0, 0, 0, 0.12);
        border-bottom-style: solid;

        .table-row {
          padding: 0.5rem;
          flex-grow: 1;
          flex-shrink: 0;
          flex-basis: 0;
          max-width: 100%;
          min-width: 6.3rem;
          width: 100%;
          align-items: center;

          &:first-child {
            min-width: 2.5rem;
            max-width: 2.5rem !important; // To overwrite default max-width
          }

          &:last-child {
            display: none;
          }
        }
      }
    }

    tbody {
      display: flex;
      flex-direction: column;

      .no-data-message {
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        color: rgba(0, 0, 0, 0.87);
        background-color: #ffffff;
        padding: 1.512rem;
      }

      tr {
        background: $color-white;
        position: relative;
        display: flex;
        align-items: stretch;
        align-content: stretch;
        padding: 0 0.313rem;
        width: 100%;
        box-sizing: border-box;
        font-weight: 400;
        min-height: 4.5rem;

        &:nth-child(odd) {
          background: $body-background;
        }

        .table-row {
          font-size: 0.85rem;
          padding: 0.313rem 0.5rem;
          font-size: 0.95rem;
          overflow: hidden;
          display: flex;
          flex-grow: 1;
          flex-shrink: 0;
          flex-basis: 0;
          max-width: 100%;
          min-width: 6.3rem;
          width: 100%;

          &.product_image {
            .table-data-container {
              a {
                display: flex;
                align-items: center;
              }
            }
          }

          &:first-child {
            min-width: 2.5rem;
            max-width: 2.5rem !important; // To overwrite default max-width
          }

          &:last-child {
            position: absolute;
            align-items: center;
            top: 0.75rem;
            right: 0.938rem;
            display: none;
            border-radius: 0.25rem;
            max-width: 2.205rem !important; // To overwrite default table cell width / height
            height: 2.205rem !important; // To overwrite default table cell width / height
            transition: all 0.3s linear;

            &.active {
              transform: rotate(90deg);
            }

            button {
              width: 100%;
              height: 1.563rem;
              padding: 0;
              display: flex;
              justify-content: center;
              align-items: center;
              cursor: pointer;

              svg {
                width: 1.26rem;
              }
            }
          }

          .table-data-container {
            display: flex;
            align-items: center;
            justify-content: flex-start;
            gap: 0.5rem;
            position: relative;
            z-index: 1;

            &:hover {
              .edit-btn-product {
                opacity: 1;
              }
            }

            &.disable {
              cursor: not-allowed;

              .setting-btn {
                cursor: not-allowed;
                opacity: 0.3;

                &:hover {
                  cursor: not-allowed;

                  .bar1 {
                    &::before {
                      transform: translateX(-0.25rem);
                    }
                  }

                  .bar2 {
                    &::before {
                      transform: translateX(0.25rem);
                    }
                  }
                }
              }
            }

            h1 {
              display: none;
              font-size: 0.95rem;
              font-weight: 400;
              min-width: 7.5rem;
              text-align: left;
            }

            img {
              width: 3.15rem;
              height: 3.15rem;
              padding: 0.25rem;
              border-radius: 0.25rem;
              box-shadow: 0 0 0.125rem rgba($color: #000000, $alpha: 0.125);
            }

            input {
              padding-left: 0.35rem;
              padding-right: 0.35rem;

              &.active {
                border: 0.125rem solid rgba($color: $color-active, $alpha: 0.125);
              }
            }
          }
        }
      }
    }
  }

  &>.pagination {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    margin: 0;
    flex-wrap: wrap;
    background: #fff;
    gap: 0.5rem;
    padding: 0.75rem;
    border-bottom-left-radius: 0.25rem;
    border-bottom-right-radius: 0.25rem;

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

      label {
        display: block;
        width: 6.25rem;
      }

      #rowsPerPage {
        width: 3rem;
      }
    }

    .pagination {
      width: fit-content;
      display: flex;
      justify-content: center;
      align-items: center;
      margin: 0;
      gap: 0.5rem;

      li {
        margin-bottom: 0;

        a {
          display: block;
          padding: 0.5rem 1rem;
          color: #522c81;
          text-transform: capitalize;
          cursor: pointer;
          text-decoration: none;
        }
      }

      li.selected {
        border: 0.063rem solid #522c81;
        background-color: #fff;

        a {
          color: $color-active;
        }
      }

      li.disabled {
        border: 0.063rem solid #4949495b;
        background: #4949495b;

        a {
          cursor: not-allowed;
        }
      }

      li {
        border: 0.063rem solid #522c81;
        background: $color-active;

        a {
          color: white;
        }
      }
    }
  }
}

.product_image {
  min-width: 14rem !important; // To overwrite default min-width
}

.product_sku {
  min-width: 8rem !important; // To overwrite default min-width
}

.product_regular_price,
.product_sale_price,
.product_backorders {
  min-width: 5rem !important; // To overwrite default min-width
}

.product_stock_status {
  min-width: 6rem !important; // To overwrite default min-width
}

.product_stock_quantity {
  .edit-input {
    padding: 0 !important; // To overwrite padding for avoid left shrink
  }
}

.product_manage_stock,
.product_stock_quantity {
  min-width: 4rem !important; // To overwrite default min-width
}

@media only screen and (max-width: 85.365rem) {
  table {
    thead {
      .table-head {
        display: flex;

        .table-row {
          display: none;

          &:nth-child(1),
          &:nth-child(2),
          &:nth-child(3) {
            display: inline-flex;
            max-width: 33% !important; // To overwrite default table width for only responsive device
            min-width: 5% !important; // To overwrite default table width for only responsive device
          }
        }
      }
    }

    tbody {
      tr {
        display: flex;
        position: relative;
        max-height: 3.78rem;
        transition: max-height 0.4s linear;
        overflow: hidden;
        flex-wrap: wrap;
        padding: 0 0.313rem 0.313rem;

        &.active {
          max-height: 62.5rem;
        }

        .table-row {
          min-width: 100% !important; // force to set width for laptop screen
          display: flex;
          background: rgb(238, 238, 238);
          min-height: 2rem;

          &:nth-child(1),
          &:nth-child(2),
          &:nth-child(3) {
            background: transparent;
            display: inline-flex !important; // force to set display type for laptop screen
            max-width: 33% !important; // To overwrite default table cell size only responsive device
            min-width: 5% !important; // To overwrite default table cell size only responsive device

            .table-data-container {
              padding: 0;

              h1 {
                display: none !important; // To overwrite first 3 heading display
              }
            }
          }

          &:nth-child(2) {
            .table-data-container {
              padding-top: 0.09rem;
              padding-left: 0.09rem;
            }
          }

          &:last-child {
            display: flex !important; // To overwrite last heading display
            padding: 0;
            width: 2.205rem !important; // To overwrite as a drop-down button width
            min-width: 1.26rem !important; // To overwrite as a drop-down button width
            height: 1.89rem !important; // To overwrite as a drop-down button height
          }

          .table-data-container {
            width: 100%;
            position: relative;
            max-width: 18rem;
            word-wrap: unset;
            text-wrap: nowrap;
            overflow: hidden;
            padding: 0.313rem 0.625rem;

            h1 {
              display: block !important; // To overwrite all heading display
            }
          }
        }
      }
    }
  }
}

.inventory-manager {
  background-image: url("../../assets/images/inventory-manager-monitor.png") !important; // force to set image for ungrade with pro for desktop-screen
  background-repeat: no-repeat;
  background-position: top left;
  background-size: contain;
  height: 100vh;
}

@media only screen and (max-width: 69.3rem) {
  .inventory-manager {
    background-image: url("../../assets/images/inventory-manager-laptop.jpeg") !important; // force to set image for ungrade with pro for laptop-screen
    background-repeat: no-repeat;
    background-position: top;
    background-size: contain;
  }
}

@media only screen and (max-width: 40.95rem) {
  .inventory-manager {
    background-image: url("../../assets/images/inventory-manager-phone.jpeg") !important; // force to set image for ungrade with pro for mobile-screen
    background-repeat: no-repeat;
    background-position: top;
    background-size: contain;
  }
}

tr.expand {
  background-color: #f0f0f1 !important; // force to set background color for variable product only
  border-bottom: 0.063rem solid #ccc;

  &:first-child {
    border: none !important; // force to set border color for first variable product only
  }

  &:last-child {
    border-top: none !important; // force to set border color for last variable product only
  }

  .product-expand {
    .setting-btn {
      display: none;
    }

    .disable {
      cursor: auto !important;
    }
  }
}

.outofstock {
  color: red !important; // to adjust stock status as there current status
}

.instock {
  color: green !important; // to adjust stock status as there current status
}

.onbackorder {
  color: #e0a100 !important; // to adjust stock status as there current status
}

.pagination-section {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #fff;
  padding: 0.75rem;
  height: 2.52rem;

  .pagecount-select-wrapper {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 0.25rem;

    p {
      color: rgba(0, 0, 0, 0.54);
    }

    .page-count-select {
      border: none;
      outline: none;

      &:focus {
        box-shadow: none;
        border: none;
        outline: none;
      }
    }
  }

  .page-handle-wrapper {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 2rem;

    p {
      color: rgba(0, 0, 0, 0.54);
    }

    .page-handle-button {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 0.25rem;

      button {
        background-color: transparent;
        padding-top: 0.35rem;
        cursor: pointer;
        border-radius: 50%;
        width: 2.25rem;
        height: 2.25rem;
        transition: all 0.3s linear;

        &:hover {
          background-color: rgba(0, 0, 0, .12);
        }

        &.deactive {
          &:hover {
            background-color: transparent;
          }

          svg {
            opacity: 0.3;
          }
        }

        svg {
          opacity: 0.6;
          width: 1.512rem;
          height: 1.512rem;
        }
      }
    }
  }
}

@media screen and (max-width: 37.737rem) {
  .pagination-section {
    position: relative;

    .pagecount-select-wrapper {
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      z-index: 1;

      p {
        display: none;
      }
    }

    .page-handle-wrapper {
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      width: 100%;

      p {
        display: none;
      }

      .page-handle-button {
        width: 100%;
      }
    }
  }
}

.admin-table-wrapper-filter {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  font-size: .875rem;
  gap: .5rem;
  justify-content: flex-start;
  margin-bottom: .75rem;

  &>div {
    cursor: pointer;
  }

  .type-count-active {
    color: #522c81;
  }
}

.product-search {
  margin-left: auto !important; // To overwrite default css
}

@media screen and (max-width: 28.4375rem) {
  .admin-middle-container-wrapper .manage-stock-wrapper .admin-wrap-bulk-all-date > div{
    max-width: 100%;
  }
}
