discourse/app/assets/stylesheets/common/admin/dashboard_next.scss

.admin-reports,
.dashboard-next {
  &.admin-contents {
    margin: 10px 0 0 0;
  }
}

.dashboard-next {
  .section-top {
    margin-bottom: 1em;
  }

  .navigation {
    display: flex;
    margin: 0 0 1em 0;

    .navigation-item {
      display: inline;
      background: $secondary;
      padding: 0.5em 1em;
    }

    .navigation-link {
      font-weight: 700;
    }
  }

  @mixin active-navigation-item {
    border-radius: 3px 3px 0 0;
    border: 1px solid $primary-low;
    border-bottom: 10px solid $secondary;
  }

  &.dashboard-next-moderation .navigation-item.moderation {
    @include active-navigation-item;
  }

  &.general .navigation-item.general {
    @include active-navigation-item;
  }

  .sections {
    display: flex;
    flex-direction: column;
  }

  .section-columns {
    display: flex;
    justify-content: space-between;

    @include breakpoint(medium) {
      flex-direction: column;
    }

    .section-column {
      min-width: calc(50% - 0.5em);
      max-width: 100%;

      &:last-child {
        margin-left: 1em;
      }

      &:first-child {
        margin-right: 1em;
      }

      @include breakpoint(medium) {
        min-width: 100%;

        &:last-child {
          order: 1;
        }

        &:first-child {
          order: 2;
        }
      }
    }

    @include breakpoint(medium) {
      .section-column:last-child,
      .section-column:first-child {
        margin: 0;
      }
    }
  }

  .section {
    .section-title {
      h2 {
        margin: 0 0.5em 0 0;

        a {
          color: $primary;
        }
      }

      display: flex;
      @media screen and (max-width: 400px) {
        flex-wrap: wrap;
      }
      align-items: center;
      justify-content: space-between;
      border-bottom: 1px solid $primary-low;
      margin-bottom: 0.5em;
      padding-bottom: 0.5em;
    }

    .section-body {
      padding: 1em 0 0;
    }
  }

  .charts {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;

    .chart {
      max-width: calc(100% * 1 / 3.2);
      width: 100%;
      flex-grow: 1;
      flex-basis: 100%;
      display: flex;
      margin-bottom: 1em;
    }

    @include breakpoint(medium) {
      .chart {
        max-width: 100%;
      }
    }

    .chart-canvas-container {
      position: relative;
      margin-left: -5px;
    }

    .chart-canvas {
      width: 100%;
      height: 100%;
    }
  }

  .misc {
    display: flex;
    border: 1px solid $primary-low;

    .durability,
    .last-dashboard-update {
      flex: 1 1 50%;
      box-sizing: border-box;
      margin: 1em 0;
      padding: 0 1em;
    }

    .durability {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;

      .backups,
      .uploads {
        flex: 1 1 100%;
      }

      .uploads p:last-of-type {
        margin-bottom: 0;
      }

      .durability-title {
        text-transform: capitalize;
      }
    }

    @media screen and (max-width: 400px) {
      flex-wrap: wrap;
      .durability,
      .last-dashboard-update {
        flex: 1 1 100%;
        text-align: left;
      }
      .last-dashboard-update {
        display: block;
        margin: 0 20px 20px 20px;
        padding: 20px 0 0 0;
        border-top: 1px solid $primary-low;
        border-left: none;
      }
    }
    .last-dashboard-update {
      border-left: 1px solid $primary-low;
      text-align: center;
      display: flex;
      justify-content: center;
      div {
        align-self: center;
        h4 {
          margin-bottom: 0;
        }
      }
    }
  }

  .top-referred-topics,
  .trending-search {
    th:first-of-type {
      text-align: left;
    }
  }

  .top-referred-topics {
    .dashboard-table table {
      table-layout: auto;
    }
  }

  .section {
    .period-chooser .period-chooser-header {
      .selected-name,
      .d-icon {
        font-size: $font-up-1;
      }

      .d-icon {
        margin: 0;
      }
    }
  }

  .dashboard-problems {
    margin-bottom: 2em;

    .d-icon-exclamation-triangle {
      color: $danger;
    }

    .actions {
      margin: 0;
    }
  }
}

.admin-report-table {
  margin-bottom: 1em;

  &.is-disabled {
    background: $primary-low;
    padding: 1em;
  }

  @media screen and (max-width: 650px) {
    table {
      tbody tr td {
        font-size: $font-down-1;
      }
    }
  }

  &.is-loading {
    height: 150px;
  }
}

.user-metrics {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  flex-direction: column;

  .dashboard-inline-table {
    //  and "hides" margin when the item spans 100% width
    flex: 1 0 auto;
    max-width: 95%;
  }
  .table-cell {
    display: flex;
    flex: 0 1 auto;
    margin: 0 10px 5px 0;
    border: 1px solid $primary-low;
    border-radius: 10px;
    .label {
      display: flex;
      align-items: center;
      color: $primary;
      background: $primary-very-low;
      justify-content: center;
      border-radius: 9px 0 0 9px;
      padding: 0 5px 0 8px;

      .d-icon {
        margin-right: 5px;
        font-size: $font-down-1;
      }
    }

    .value {
      padding: 0 8px 0 5px;
    }
    &.user-newuser {
      .label {
        color: $primary-high;
      }
    }
    &.user-basic,
    &.user-member {
      border-color: $bronze;
      .label {
        border-color: $bronze;
        background: $bronze;
        color: $secondary;
      }
    }
    &.user-regular {
      border-color: $silver;
      .label {
        border-color: $silver;
        background: $silver;
        color: $secondary;
      }
    }
    &.user-leader {
      border-color: $gold;
      .label {
        background: $gold;
        border-color: $gold;
        color: $secondary;
      }
    }
  }
}

.admin-report.activity-metrics {
  .report-table {
    @media screen and (min-width: 400px) {
      table-layout: auto;
    }
    tr th {
      text-align: right;
    }
    .d-icon {
      color: $primary-low-mid;
      min-width: 14px;
      text-align: center;
    }
    @media screen and (max-width: 400px) {
      .d-icon {
        display: none;
      }
      td.title {
        padding: 8px 0 8px 4px;
      }
    }

    tr {
      td {
        text-overflow: unset;
        overflow: auto;
        white-space: normal;
      }

      td:first-child {
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: normal;
      }
    }

    td {
      text-align: center;
      padding: 8px;
    }

    td.left {
      text-align: left;
    }

    td.title {
      text-align: left;
    }

    td.value {
      text-align: right;
      white-space: nowrap;
      padding: 8px 21px 8px 8px; // accounting for negative right caret margin
      &:nth-of-type(2) {
        padding: 8px 12px 8px;
      }
      i {
        margin-right: -12px; // align on caret
        @media screen and (max-width: 650px) {
          margin-right: -9px;
        }
      }

      &.high-trending-up,
      &.trending-up {
        i {
          color: $success;
        }
      }
      &.high-trending-down,
      &.trending-down {
        i {
          color: $danger;
        }
      }
    }
  }
}

.rtl .dashboard-next {
  .section-column {
    &:last-child {
      margin-right: 1em;
      margin-left: 0;
    }

    &:first-child {
      margin-left: 1em;
      margin-right: 0;
    }
  }

  .dashboard-table table tbody tr {
    td.title {
      text-align: right;
    }

    td.value i {
      margin-right: 0;
      margin-left: -12px;
    }
  }

  .user-metrics .table-cell {
    margin: 0 0 5px 10px;
  }

  .table-cell {
    .label {
      border-radius: 0 9px 9px 0;

      .d-icon {
        margin-right: 0;
        margin-left: 5px;
      }
    }
  }
}

.community-health.section {
  margin-bottom: 1em;
}

.dashboard-next.moderation {
  .admin-dashboard-moderation-top {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-column-gap: 1em;
  }

  .main-section {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-column-gap: 1em;

    > * {
      grid-column: span 12;
    }

    .admin-dashboard-moderation-bottom-outlet {
      display: grid;
      grid-template-columns: repeat(12, 1fr);
      grid-column-gap: 1em;
    }
  }

  .admin-report.flags-status {
    grid-column: span 12;
  }

  .admin-report.post-edits {
    grid-column: span 12;
  }
}