// scss-lint:disable PlaceholderInExtend IdSelector SelectorDepth NestingDepth ImportantRule
.dashboard {
  #content {
    background: var(--bs-baton-dashboard-bg);
  }

  #content-main {
    @include make-row();
    float: left;
    margin-left: 0 !important;
    padding: 16px 0;
    width: 100%;

    @include media-breakpoint-up(lg) {
      margin-left: -15px;
      width: 75%;
    }

    > p {
      @extend .ps-3;
      @extend .pe-3;
    }

    > .module {
      @include make-col-ready();
      @include make-col(12);

      @include media-breakpoint-up(lg) {
        @include make-col(6);
      }

      @media (min-width: 1600px) {
        @include make-col(4);
      }
    }

    table {
      @extend .table;
      background: var(--bs-baton-dashboard-module-bg);
      border: 1px solid var(--bs-baton-dashboard-module-border-color);

      tbody {
        border-top: 0px !important;
        font-size: 0.9rem;

        th {
          font-weight: 400;
        }
      }

      th {
        width: 100%;
      }

      td {
        white-space: nowrap;
      }
    }
  }

  #content-related {
    float: right;
    margin-bottom: 2rem;
    margin-right: 0 !important;
    padding: 0 15px;
    width: 100%;

    @include media-breakpoint-up(lg) {
      margin-right: 25px;
      width: 23%;
    }

    h2 {
      font-size: $h2-size;
    }

    h3 {
      font-size: $h3-size;
    }

    > div {
      @extend .p-3;
      @extend .mt-3;

      background: var(--bs-baton-dashboard-module-bg);
      border: 1px solid var(--bs-baton-dashboard-module-border-color);
      border-radius: var(--bs-baton-dashboard-module-border-radius);
    }

    .actionlist {
      font-size: 0.9rem;
    }
  }

  caption {
    @extend .ps-2;
    @extend .pe-2;
    background: var(--bs-baton-dashboard-caption-bg);
    border: 1px solid var(--bs-baton-dashboard-module-border-color);
    caption-side: top;
    border-radius: var(--bs-baton-dashboard-module-border-radius) var(--bs-baton-dashboard-module-border-radius) 0 0;

    a {
      color: var(--bs-baton-dashboard-caption-color);
    }
  }

  .actionlist {
    border-left: 5px solid var(--bs-baton-dashboard-action-list-border-color);
    list-style-type: none;
    margin-left: 0.5rem;
    margin-top: 1.5rem;
    padding-left: 0;
    position: relative;

    &::after {
      background-image: linear-gradient(
        var(--bs-baton-dashboard-action-list-border-color) 50%,
        rgba(255, 255, 255, 0) 0%
      );
      background-position: center;
      background-repeat: repeat-y;
      background-size: 5px 13px;
      bottom: -25px;
      content: '';
      height: 25px;
      left: -5px;
      position: absolute;
      width: 5px;
    }

    li {
      padding: 1.5rem;
      padding-top: 0;
      position: relative;

      &::before {
        background-color: var(--bs-baton-dashboard-icon-color);
        border-radius: 50%;
        color: $white !important;
        display: inline-block;
        height: 30px;
        left: -18px;
        line-height: 31px;
        position: absolute;
        text-align: center;
        width: 30px;
      }

      &.addlink::before {
        background: var(--bs-baton-dashboard-add-bg);
      }

      &.changelink::before {
        background: var(--bs-baton-dashboard-change-bg);
      }

      &.deletelink::before {
        background: var(--bs-baton-dashboard-delete-bg);
      }
    }
  }

  .addlink,
  .viewlink,
  .deletelink,
  .changelink {
    &::before {
      @extend %material;
      @extend .me-1;
      color: var(--bs-baton-dashboard-icon-color);
      white-space: nowrap;
    }
  }

  .addlink {
    &::before {
      content: 'add';
    }
  }

  .changelink {
    &::before {
      content: 'edit';
    }
  }

  .deletelink {
    &::before {
      content: 'delete';
    }
  }

  .viewlink {
    &::before {
      content: 'eye';
    }
  }
}

// Baton AI stats
.baton-ai-stats {
  background: var(--bs-baton-dashboard-module-bg);
  margin: 0 0 1.5rem;
  padding: 1rem;
  width: 100%;

  h2 {
    align-items: center;
    display: flex;
    justify-content: space-between;
    font-weight: 700;
    font-size: 1.4rem;
  }

  .baton-ai-canvas-container {
    height: 360px;
  }
}
