@import '../../main_dependencies.scss';

$seperator-desktop: #14314d;
$seperator-mobile: #29619a;

.admin-dashboard {
  .bb-content {
    padding: 20px;
  }
}

.skin-default {

  .main-header {
    .navbar {

      @include navbar-variant($theme-color, $white);

      display: flex;
      justify-content: space-between;

      .nav-left {
        display: flex;
        align-items: center;
        flex: 1 0 auto;
      }

      margin-left: 0;

      .navbar__label,
      .navbar__button {
        color: $white;
        padding: 14px 20px;
        font-size: 16px;
        font-weight: 600;

        &.dropdown-toggle {
          padding: 0 20px;
        }
      }

      .navbar__button {
        height: $header-height;
        max-height: $header-height;
        background: none;
        border: 0;

        &:hover {
          background-color: darken($theme-color, 5%);
        }
      }

      .dropdown-toggle {
        cursor: pointer;

        padding: 0;

        .mobile-icon {
          width: 20px;
        }
      }

      .user-name {
        margin-left: 10px;
      }

      .item-picture {
        width: 32px;
        height: 32px;

        span {
          font-size: 16px;
        }
      }

      .navbar-custom-menu {

        li.user-profile {

          .user-profile__name {
            font-weight: bold;
            font-size: 16px;
          }

          a.user-profile__name {
            color: #3171b4;

            &:hover {
              color: #19436d;
              text-decoration: underline;
              background: none;
            }
          }

          .user-profile__email {
            color: #848484;
          }

          .user-detail {
            padding: 0;
            margin: 5px 0;
          }
        }

        @media (max-width: 991px) {

          a.btn-primary {
            background-color: $bb-secondary;
          }
        }

        .navbar-nav {

          & > li {
            height: $header-height;
            display: flex;
            flex-direction: row;
            align-items: center;
          }

          // override admin LTE :@
          & > li > a.btn {
            height: 30px;
            display: flex;
            flex-direction: row;
            align-items: center;
          }

        }

        .user-dropdown.dropdown-menu {
          min-width: 375px;

          @media (max-width: 991px) {
            right: 0;
          }
        }

        .notifications-menu {
          .dropdown-menu {
            @media (max-width: 991px) {
              right: auto;
            }
          }
        }


        .department-dropdown__name {
          font-weight: 600;
          font-size: 16px;
        }

        .language-picker {
          .dropdown-menu {
            right: 3px;
            left: auto;
            min-width: 130px;
            background-color: white;

            @media (max-width: 991px) {
              position: absolute;
            }

            a {
              padding: 0;
              padding-right: 5px;

              &:hover {
                background-color: white;
                text-decoration: underline;
              }

              &:focus {
                outline: auto;
              }
            }

            .active {
              background-color: white;
              color: black;
              font-weight: 600;

              &:after {
                position: absolute;
                right: 10px;
                content: '\f00c';
                font-family: "FontAwesome";
                font-weight: 400;
              }
            }
          }
        }

        .dropdown-menu {
          padding: 20px 0;

          box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.3);
          border-radius: 2px;

          li {
            padding: 0 20px;
            margin-bottom: 10px;

            &:last-of-type {
              margin-bottom: 0 !important;
            }

            a.btn {
              padding: 7px 20px;
            }

            i.fa {
              height: auto;
              margin-right: 5px;
            }
          }

          li.divider {
            padding: 0;
          }

          .btn-default {
            color: #333;
          }

          .btn-primary {
            color: white;

            &:hover, &:focus {
              background-color: #26588c;
              border-color: #183f68;
            }
          }

          li.account-settings {
            border-top: 1px solid #c9cdd4;
            padding-top: 10px;

            p {
              font-weight: bold;
            }

            .btn {
              display: inline-block;
              margin: 0 5px;

              &:first-of-type {
                margin-left: 0;
              }

              &:last-of-type {
                margin-right: 0;
              }
            }
          }

        }

      }

      .logo {
        background-image: url('../../_images/jrni-top-logo.svg');
        background-position: center center;
        background-repeat: no-repeat;
        background-size: contain;
        cursor: pointer;

        @include logo-variant($bb-primary);

        @media (max-width: 768px) {
          width: 230px;
        }


        @media (max-width: $screen-xs) {
          width: 100px;
        }

        @media (min-width: $screen-sm) {
          width: 230px;
        }
      }
    }

    li.user-header {
      background-color: $theme-color;
    }
  }

  .admin-dashboard {
    .page-header {
      border-bottom: 1px solid $borders-color;
      padding: 20px;
      margin: 0;
      white-space: nowrap;

      .top-heading {
        display: flex;
        align-items: center;
      }

      .title {
        margin: 0;
        font-size: 25px;
        overflow: hidden;
        text-overflow: ellipsis;
      }

      .status-code {
        $grey: #697180;
        $green: #01A369;
        $red: #D21548;

        border: 1px solid $grey;
        height: 24px; 
        line-height: 24px;
        font-size: 14px;
        padding: 0 4px;
        white-space: nowrap;
        margin-left:10px;
        border-radius: 4px;
        background: white;
        text-transform: uppercase;
        font-weight: 600;
        &.good {
          color: $green;
          border-color: $green;
        }
        &.bad {
          color: $red;
          border-color: $red;
        }
      }

    }

    .sub-heading {
      margin-top: 5px;
      font-size: 14px;
      color: #666666;
    }

    .chevron {
      font-size: .6em;
      color: #aaa;
    }
  }
}