/* Common styles for Admin/ManEd, Ed, and Associate Ed dashboards */

.dashboard {
  font-size: 18px;

  h1 {
    margin-top: 0;
  }

  > header:first-of-type {
    height: 75px;
  }

  .primary-nav {
    height: 75px;

    .label {
      margin: 0 $spacing-04;
      text-decoration: none;
      line-height: 75px;
    }

    .logo {
      display: block;
      padding-top: 20px;
      padding-bottom: 20px;
      width: 75px;
      height: 100%;

      svg {
        display: block;
        margin: 0 auto;
        height: 35px;
      }
    }
  }

  .main-header {
    @include typescale-06;

    dt, dd {
      margin-top: 0;
      display: inline-block;
    }
  }

  .vertical-nav {
    position: absolute;
    z-index: 3;
    top: 75px;
    left: 0;
    width: 75px;
    height: 100%;

    > ol {
      position: fixed;
      width: 75px;
      top: 75px;
      bottom: 0;
      background-color: $light-grey;
      border-right: 1px dotted $mid-grey;
      overflow-y: scroll;
    }
  }

  .vertical-nav__link {
    height: 75px;
    width: 100%;

    &[aria-selected=true] {
      background-color: $warm-black;
      color: $white;
    }
  }

  .vertical-nav__link-label {
    display: none;
    position: absolute;
    padding: 0 $spacing-03 0 0;
    line-height: 75px;
    left: 75px;
    height: 75px;
    width: max-content;
    background-color: $dark-grey;
    color: $white;
  }

  .vertical-nav__link:hover {
    background-color: $dark-grey;
    color: $white;

    .vertical-nav__link-label {
      display: block;
    }
  }

  .todo-list {
    padding: 0;
    margin-bottom: 0;
    display: grid;
    grid-auto-rows: 1fr;
    list-style: none;

    @media screen and (max-width: 768px) {
      grid-template-columns: repeat(2, 1fr);
      grid-column-gap: $spacing-02;
    }

    @media screen and (max-width: 1279px) and (min-width: 769px) {
      grid-template-columns: repeat(3, 1fr);
      grid-column-gap: $spacing-03;
    }

    @media screen and (min-width: 1280px) {
      grid-template-columns: repeat(4, 1fr);
      grid-column-gap: $spacing-04;
    }
  }

  .todo-list__item {
    display: flex;

    h3 {
      margin-top: $spacing-01;
      margin-bottom: $spacing-04;
    }

    a {
      text-decoration: none;
    }

    svg {
      padding: 0;
    }

    .todo-list__status {
      display: block;
      margin-top: $spacing-01;
      font-weight: 400;
      color: $dark-grey;
    }

    .card {
      width: 100%;
      height: auto;
      border-left: 10px solid;

      &:hover {
        background-color: $light-grey;
      }
    }

    .tag {
      margin-bottom: 0;
    }

  }

  main {
    margin-left: 75px;
    width: auto;

    @media screen and (max-width: 768px) {
      padding: 20px;
    }

    @media screen and (max-width: 1279px) and (min-width: 769px) {
      padding: 30px;
    }

    @media screen and (min-width: 1280px) {
      padding: 40px;
    }
  }

  // Application form styles — overrides
  .form {
    padding: $spacing-04 0;
  }

  .form--compact {
    h1 {
      margin: 0 (-$spacing-04) $spacing-04 (-$spacing-04);
      padding: $spacing-04;
      border-radius: $spacing-02 $spacing-02 0 0;
      background: $warm-black;
      color: $white;

      + .form__header {
        margin-top: -$spacing-04;
      }
      
      + .alert {
        margin: 0 0 $spacing-04 0;
        background-color: $light-grey;
        border-radius: $spacing-02;
        border-color: $mid-grey;
        color: $warm-black;
      }

      + .form__question {
        padding-top: 0;
        border: 0;
      }
    }

    .form__header {
      margin: 0 (-$spacing-04);
      padding: $spacing-03 $spacing-04;
      width: auto;
      border: 0;
      border-top: 1px dotted $mid-grey;
      background: $light-grey;
    }

    fieldset {
      margin: 0 0 $spacing-04 0;
      padding: 0 $spacing-04;
      border-radius: $spacing-02;
      background: $white;
    }

    .form__question {
      padding: $spacing-04;
      margin: 0;
      margin-left: -$spacing-04;
      margin-right: -$spacing-04;
      border-top: 1px dotted $mid-grey;

      input, select, textarea, .select2-container {
        margin-bottom: $spacing-03;
        width: 100% !important;
        border-color: $mid-grey;
      }

      .removable-fields li {
        display: flex;
        justify-content: center;
      }

      .remove_field__button {
        margin-bottom: $spacing-03;
        white-space: nowrap;
      }
    }

    .form__subquestion {
      border-left-width: $spacing-01;
    }

    .form__short-help {
      margin-bottom: $spacing-02;
      font-size: smaller;
    }

    .icon-container {
      display: inline-flex;
      margin-bottom: $spacing-02;
      padding: $spacing-01;
      line-height: 1;
      border-radius: 50%;
      color: $white;
    }

    .icon-container--unable_to_access {
      background: $grapefruit;
    }

    .icon-container--not_found,
    .icon-container--not_validated,
    .icon-container--missing,
    .icon-container--outdated {
      background: $sanguine;
    }

    .icon-container--fully_validated,
    .icon-container--present {
      background: $mid-green;
    }

    .parsley-errors-list {
      padding: $spacing-03;
      border-radius: $spacing-01;
      background: rgba($grapefruit, .25);
      font-weight: bold;

      p {
        margin: 0;
      }
    }

    .formulaic-annotation-pissn-list, 
    .formulaic-annotation-eissn-list, 
    .formulaic-annotation-preservation_service-list {
      margin: 0;
      padding: $spacing-03;
      border-radius: $spacing-02;
      border: 1px dotted $mid-grey;
      background: $light-grey;
    }

    .formulaic-clickableurl-visit {
      margin: 0 0 0 $spacing-03;
      white-space: nowrap;
    }
  }
}
