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: 0.5em;
  }

  .navigation {
    display: flex;
    margin: 0 0 2.5em 0;
    border-bottom: 1px solid $primary-low-mid;

    .navigation-item {
      display: inline;
      &:hover {
        background: $primary-very-low;
      }
    }

    .navigation-link {
      display: block;
      font-weight: bold;
      padding: 0.6em 1em 0.5em 1em;
    }
  }

  @mixin active-navigation-item {
    .navigation-link {
      border-bottom: 0.4em solid $tertiary;
    }
  }

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

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

  &.dashboard-next-reports .navigation-item.reports {
    @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: 0.5em;
      }

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

      @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;
      > p {
        margin-top: 0;
      }
    }
  }

  .admin-report .header {
    border: 0;
    padding: 0;
    margin-bottom: 1em;
  }

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

    // IE11 grid support
    display: -ms-grid;
    -ms-grid-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
    -ms-grid-rows: 1fr 1fr;
    .admin-report {
      -ms-grid-column-span: 4;

      &.consolidated-page-views {
        -ms-grid-column-span: 12;
      }

      &:nth-of-type(1) {
        -ms-grid-row: 1;
        -ms-grid-column: 1;
      }
      &:nth-of-type(2) {
        -ms-grid-row: 1;
        -ms-grid-column: 5;
      }
      &:nth-of-type(3) {
        -ms-grid-row: 1;
        -ms-grid-column: 9;
      }
      &:nth-of-type(4) {
        -ms-grid-row: 2;
        -ms-grid-column: 1;
      }
      &:nth-of-type(5) {
        -ms-grid-row: 2;
        -ms-grid-column: 5;
      }
      &:nth-of-type(6) {
        -ms-grid-row: 2;
        -ms-grid-column: 9;
      }
    }

    .admin-report {
      grid-column: span 4;

      &.consolidated-page-views {
        grid-column: span 12;
      }
    }

    @include breakpoint(medium) {
      .admin-report {
        grid-column: span 12;
      }
    }

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

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

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

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

    .storage-stats {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      border-right: 1px solid $primary-low;

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

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

    @media screen and (max-width: 400px) {
      flex-wrap: wrap;
      .storage-stats,
      .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 {
      text-align: center;
      display: flex;
      justify-content: center;
      div {
        align-self: center;
        h4 {
          margin-bottom: 0;
        }
      }
    }
  }

  .top-referred-topics {
    margin-bottom: 1.5em;
  }

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

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

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

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

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

    .actions {
      margin: 1em 0 0 0;
      display: flex;
      align-items: center;
      color: $primary-medium;
      .btn {
        margin-right: 1em;
      }
    }
  }
}

.counters-list {
  display: flex;
  flex: 1 0 0px;
  flex-direction: column;

  .counters-header {
    display: grid;
    flex: 1 0 auto;
    grid-template-columns: 33% repeat(auto-fit, minmax(20px, 1fr));
    border: 1px solid $primary-low;
    border-bottom: 0;
    font-weight: 700;
    text-align: right;
    align-items: center;
    padding: 0.65em 0.25em;

    // IE11 grid support
    display: -ms-grid;
    -ms-grid-columns: 2fr 1fr 1fr 1fr 1fr;
    .counters-cell {
      -ms-grid-row: 1;
      -ms-grid-column-span: 1;
      &:nth-of-type(1) {
        -ms-grid-column: 1;
      }
      &:nth-of-type(2) {
        -ms-grid-column: 2;
      }
      &:nth-of-type(3) {
        -ms-grid-column: 3;
      }
      &:nth-of-type(4) {
        -ms-grid-column: 4;
      }
      &:nth-of-type(5) {
        -ms-grid-column: 5;
      }
    }
  }

  .admin-report .main {
    border: 1px solid $primary-low;

    &:hover {
      background-color: $primary-very-low;
    }
  }

  .admin-report:not(:last-child) {
    .main {
      border-bottom: 0;
    }

    .conditional-loading-section.is-loading {
      border-bottom: 0;
    }
  }

  .admin-report .conditional-loading-section.is-loading {
    display: flex;
    flex-direction: row;
    padding: 0.5em 0.25em;
    align-items: flex-start;
    justify-content: flex-start;
    border: 1px solid $primary-low;

    .title {
      font-size: $font-0;
    }

    .spinner {
      margin: 0;
      width: 8px;
      height: 8px;
      margin-left: 0.5em;
    }
  }

  .admin-report .main .report-alert {
    display: flex;
    flex-direction: row;
    padding: 0.5em 0.25em;
    align-items: center;
    text-align: left;
    border: 0;

    &:hover {
      background-color: $primary-very-low;
    }

    .d-icon {
      font-size: $font-up-1;
      margin: 0 0.25em 0 0;
      color: $primary-low-mid;
    }
  }
}

.activity-metrics {
  margin-bottom: 1.5em;
}

.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;
      }
    }
  }
}

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

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

  .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;
      }
    }
  }
}

.users-by-trust-level,
.users-by-type {
  margin-bottom: 1.5em;
}

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

.dashboard-next-moderation,
.dashboard-next-security {
  .section-body {
    margin-bottom: 1em;
  }

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

    > * {
      grid-column: span 12;
    }

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

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

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

.dashboard-next-reports {
  .reports-list {
    display: flex;
    flex-wrap: wrap;
    list-style-type: none;
    margin: 0 -1.5%;
  }
  .report {
    margin: 1.5%;
    border: 1px solid $primary-low;
    flex: 1 1 28%;
    transition: box-shadow 0.25s;
    min-width: 225px;
    max-width: 550px;
    a {
      display: block;
      width: 100%;
      height: 100%;
      box-sizing: border-box;
      padding: 1em;
      .report-description {
        color: $primary-high;
      }
    }
    &:hover {
      box-shadow: shadow("card");
    }
  }
}