/**=====================
    Dashboard CSS start
==========================**/
.dashboard-tiles {
  margin-bottom: 30px;

  .card-tiles {
    display: flex;
    align-items: center;
    width: 100%;
    justify-content: space-between;
    background-color: white;
    padding: calc(13px + (22 - 13) * ((100vw - 320px) / (1920 - 320))) 13px;
    border-radius: 10px;
    position: relative;

    &:after {
      @include pos;
      left: 0;
      @include center(vertical);
      width: 3px;
      height: 35px;
      background-color: var(--theme-color);
      border-radius: 0;

      [dir="rtl"] & {
        left: unset;
        right: 0;
      }
    }

    h6 {
      color: rgba($content-color, 0.8);
    }

    h3 {
      color: $title-color;
      margin-top: 8px;
      font-weight: 700;
      font-size: calc(20px + (24 - 20) * ((100vw - 320px) / (1920 - 320)));
    }

    .icon-box {
      width: 52px;
      height: 52px;
      border-radius: 0;
      @include flex_common;

      i {
        color: $white;
        font-size: 22px;
      }
    }
  }

  .row {
    >div {
      &:first-child {
        .card-tiles {
          background: rgba(#0da487, 0.1);

          &:after {
            background-color: #0da487;
          }

          .icon-box {
            background: #0da487;
          }
        }
      }

      &:nth-child(2) {
        .card-tiles {
          background: rgba(#ffa53b, 0.1);

          &:after {
            background-color: #ffa53b;
          }

          .icon-box {
            background: #ffa53b;
          }
        }
      }

      &:nth-child(3) {
        .card-tiles {
          background: rgba(#a04aff, 0.1);

          &:after {
            background-color: #a04aff;
          }

          .icon-box {
            background: #a04aff;
          }
        }
      }

      &:nth-child(4) {
        .card-tiles {
          background: rgba(#ff6161, 0.1);

          &:after {
            background-color: #ff6161;
          }

          .icon-box {
            background: #ff6161;
          }
        }
      }
    }
  }
}

.review-box {
  border: 1px solid #eee;
  border-radius: 0;

  body.dark-only & {
    border-color: $dark-card-border;
  }

  table {
    width: 100%;
    border: unset;

    tr {
      +tr {
        border-top: 1px dashed #eee;
      }

      &:last-child {
        td {
          border: unset;
        }
      }
    }
  }

  li {
    display: flex;
    align-items: center;
    justify-content: space-between;

    span {
      font-size: 15px;
    }

    .rating-sec {
      span {
        font-size: 16px;
      }
    }

    +li {
      margin-top: 7px;
      padding-top: 7px;
      border-top: 1px dashed #eee;
    }

    >div {
      display: flex;
      align-items: center;
      gap: 10px;
    }
  }

  .review-content {
    display: flex;
    align-items: center;
    gap: 10px;

    span {
      width: calc(100% - 5px - 40px);
    }
  }

  td {
    border: unset;
    padding: 8px;
  }

  tr {
    td {
      &:nth-child(2) {
        width: auto;
        min-width: 190px;
        text-align: center;
      }

      &:nth-child(1) {
        width: auto;
        min-width: 250px;
      }
    }
  }

  .img-box {
    width: 40px;
    height: 40px;
    border-radius: 0;
    @include flex_common;
    background: #e9eaea;
    padding: 2px;

    img {
      object-fit: contain;
      width: 40px;
      height: 40px;
    }
  }

  .rating-sec {
    font-size: 17px;
    gap: 0px;
  }
}

.apexcharts-toolbar {
  z-index: 1 !important;
}

.top-selling-table {
  padding: 8px;
  border-radius: 0;
  border: 1px solid #eee;

  body.dark-only & {
    border-color: $dark-card-border;
  }

  table {
    width: 100%;
    border: unset;

    tr {
      +tr {
        td {
          border-top: 1px solid #eee;
        }
      }

      &:last-child {
        td {
          border-bottom: unset;
        }
      }
    }
  }

  td {
    padding: 10px;
    border-bottom: 1px solid #eee;
  }

  .img-info {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 162px;

    img {
      width: 60px;
      height: 60px;
      object-fit: cover;
    }
  }

  h6 {
    color: rgba($theme-body-font-color, 0.7);

    body.dark-only & {
      color: rgba(255, 255, 255, 0.6);
    }
  }

  h5 {
    color: $theme-body-font-color;
    margin-top: 5px;
    font-weight: 600;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    display: -webkit-box;
    overflow: hidden;

    body.dark-only & {
      color: #ddd;
    }
  }
}

.blog-box {
  .blog-img {
    img {
      height: 180px;
      border-radius: 0;
      margin-bottom: 10px;
      object-fit: cover;
      width: 100%;
    }
  }

  .blog-content {
    a {
      color: $title-color;
      font-size: 16px;
      margin-bottom: 4px;
      display: block;
      font-weight: 500;
      letter-spacing: 0.01em;
    }

    h6 {
      color: rgba($content-color, 0.7);
    }
  }
}

.widget-card,
.booking-widget-card {
  padding: calc(18px + (20 - 18) * ((100vw - 320px) / (1920 - 320))) calc(12px + (20 - 12) * ((100vw - 320px) / (1920 - 320)));
  display: flex;
  align-items: center;
  flex-direction: row;
  gap: 10px;
  margin-bottom: 0;

  @media only screen and (max-width: 575.98px) {
    margin-bottom: 0 !important;
  }

  h6 {
    color: $dark-color;
    margin-bottom: 7px;
    font-weight: 500;
    color: $grey-9;
  }

  h2 {
    font-size: calc(21px + (25 - 21) * ((100vw - 320px) / (1920 - 320)));
    font-weight: 600;
    color: $theme-font-color;
    display: flex;
    align-items: flex-end;

    body.dark-only & {
      color: #ddd;
    }

    span {
      font-size: 13px;
      font-weight: 400;
      margin-left: 6px;
      display: block;
      line-height: 1.45;

      [dir="rtl"] & {
        margin-left: unset;
        margin-right: 6px;
      }
    }
  }

  h5 {
    margin-bottom: 0;
  }

  i {
    --Iconsax-Size: 26px;
    --Iconsax-Color: White;
  }

  .widget-icon,
  .booking-widget-icon {
    @include flex_common;
    padding: 10px;
    border-radius: 0;
    width: calc(44px + (52 - 44) * ((100vw - 320px) / (1920 - 320)));
    height: calc(44px + (52 - 44) * ((100vw - 320px) / (1920 - 320)));

    svg {
      width: 100%;
      height: 100%;
      stroke: $white;
      fill: transparent;
    }
  }
}

.widget-card-box {
  &:nth-child(1) {
    .widget-card {
      background-color: rgba(134, 144, 156, 0.1);

      .widget-icon {
        background-color: #86909C;
      }
    }
  }

  &:nth-child(2) {
    .widget-card {
      background-color: rgba(86, 133, 55, 0.1);

      .widget-icon {
        background-color: #568537;
      }
    }
  }

  &:nth-child(3) {
    .widget-card {
      background-color: rgba(179, 97, 138, 0.1);

      .widget-icon {
        background-color: #B3618A;
      }
    }
  }

  &:nth-child(4) {
    .widget-card {
      background-color: rgba(73, 86, 121, 0.1);

      .widget-icon {
        background-color: #495679;
      }
    }
  }

  &:nth-child(5) {
    .widget-card {
      background-color: rgba(236, 137, 81, 0.1);

      .widget-icon {
        background-color: #D49D67;
      }
    }
  }
}

.booking-widget-card {
  .abs-icon {
    position: absolute;
    right: 0;
    width: 114px;
    opacity: 0.4;
    transform: none;
    filter: grayscale(1);
    transition: all 0.5s ease;
    bottom: 0;

    [dir="rtl"] & {
      right: unset;
      left: 0;
      transform: scaleX(-1);
    }
  }

  .booking-widget-icon {
    width: calc(36px + (70 - 36) * ((100vw - 320px) / (1920 - 320)));
    height: calc(36px + (70 - 36) * ((100vw - 320px) / (1920 - 320)));
    border-radius: 0;
    padding: calc(0px + (10 - 0) * ((100vw - 320px) / (1920 - 320)));

    img {
      @include pseudowh;
    }
  }
}

.booking-status-main {
  &.row {
    >.booking-status-card {
      padding-inline: calc(var(--bs-gutter-x) * 0.5);
    }
  }

  .booking-status-card {
    .booking-widget-card {
      background-color: #f9f9f6;
      overflow: hidden;
      position: relative;
      display: flex;
      align-items: center;
      padding: 12px 16px;
      justify-content: flex-start;
      gap: 10px;
      margin: 0;

      body.dark-only & {
        border-color: $dark-card-border;
        background-color: #0b141d !important;
      }
    }
  }
}

.top-dashboard {
  >div {
    >.row {
      margin-inline: calc(-0.5 * var(--bs-gutter-x));

      >* {
        padding-inline: calc(var(--bs-gutter-x) * 0.5);

        >.row {
          margin-inline: calc(-0.5 * var(--bs-gutter-x));

          >* {
            padding-inline: calc(var(--bs-gutter-x) * 0.5);
          }
        }
      }
    }
  }

  .title-header {
    .custom-select-box {
      .form-control {
        padding: 6px 10px;
      }
    }
  }

  &.row {
    >* {
      padding-inline: calc(var(--bs-gutter-x) * 0.5);
    }
  }
}

.dashboard-form {
  &.row {
    >div {
      padding-inline: calc(var(--bs-gutter-x) * 0.5);

      >.container-fluid {
        >.row {
          >* {
            padding-inline: calc(var(--bs-gutter-x) * 0.5);
          }
        }
      }
    }
  }

  .custom-select-box {
    .form-control {
      padding: 10px 17px;
      width: 220px;
      max-width: 100%;
    }
  }
}

.welcome-tiles {
  img {
    width: 100%;
    height: calc(135px + (162 - 135) * (( 10px - 320px) / (1920 - 320)));
  }

  .card {
    padding: 0;

    .card-body {
      padding: calc(15px + (20 - 15) * ((100vw - 320px) / (1920 - 320)));

      p {
        font-size: calc(14px + (16 - 14) * ((100vw - 320px) / (1920 - 320)));
        line-height: 1.5;
        -webkit-line-clamp: 5;
        -webkit-box-orient: vertical;
        display: -webkit-box;
        overflow: hidden;

        body.dark-only & {
          color: $grey-9;
        }
      }

      h2 {
        font-size: calc(19px + (22 - 19) * ((100vw - 320px) / (1920 - 320)));
        margin-bottom: calc(10px + (14 - 10) * ((100vw - 320px) / (1920 - 320)));

        body.dark-only & {
          color: #fff;
        }
      }
    }
  }
}

.apexcharts-tooltip-y-group {
  color: #232323;

  .apexcharts-tooltip-text-y-label {
    color: #777;
  }
}

.apexcharts-tooltip {
  &.apexcharts-theme-light {
    border: 1px solid #eee;
    border-radius: 0;

    .apexcharts-tooltip-title {
      color: var(--theme-color);
      font-weight: 600;
      background: #f8f8f8;
      border-bottom: 1px solid #eee;
    }
  }
}

.recent-orders-table {
  thead {
    th {
      background-color: #f7f7f2;
      color: #7b7b7b;
      font-size: 11px;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      font-weight: 600;
      border-bottom: 1px solid #eee;
      padding: 12px 16px;
    }
  }

  tbody {
    tr {
      transition: background-color 0.15s ease;

      &:hover {
        background-color: #fafafa;
      }
    }

    td {
      padding: 14px 16px;
      vertical-align: middle;
    }
  }

  .recent-orders-number {
    font-weight: 700;
    color: #1f1f1f;
  }

  .recent-orders-date {
    font-size: 12px;
    color: #8b8b8b;
  }

  .recent-orders-name {
    color: #222;
    font-weight: 600;
    max-width: 180px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: inline-block;
    vertical-align: bottom;
  }

  .recent-orders-amount {
    display: inline-flex;
    align-items: baseline;
    gap: 6px;
    font-weight: 700;
    color: #1c1c1c;
  }

  .recent-orders-currency {
    font-size: 11px;
    color: #8b8b8b;
    letter-spacing: 0.02em;
  }

  .recent-orders-value {
    font-size: 15px;
  }

  .recent-orders-status {
    span {
      border-radius: 999px;
      padding: 4px 10px;
      font-size: 11px;
      font-weight: 600;
      letter-spacing: 0.02em;
    }
  }

  .status-paid {
    span {
      color: #2f7d32;
      background-color: rgba(47, 125, 50, 0.12);
    }
  }

  .status-pending {
    span {
      color: #b97022;
      background-color: rgba(185, 112, 34, 0.12);
    }
  }

  .custom-ul {
    a {
      width: 30px;
      height: 30px;
      border-radius: 8px;
      background-color: #f4f4f4;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      color: #3c3c3c;
      transition: transform 0.15s ease, box-shadow 0.15s ease;

      &:hover {
        transform: translateY(-1px);
        box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
      }
    }

    svg {
      width: 16px;
      height: 16px;
    }
  }

  @media (max-width: 767.98px) {
    thead {
      display: none;
    }

    tbody {
      tr {
        display: block;
        margin-bottom: 12px;
        border: 1px solid #eee;
        border-radius: 12px;
        padding: 8px 0;
        background-color: #fff;
      }

      td {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 8px 14px;
        border: none;

        &::before {
          content: attr(data-label);
          font-size: 11px;
          text-transform: uppercase;
          letter-spacing: 0.05em;
          color: #8b8b8b;
        }
      }

      td[data-key="order_number"],
      td[data-key="total"] {
        &::before {
          color: #6f6f6f;
        }
      }
    }
  }
}