@import 'morris.js/0.5.1/morris';
@import 'bootstrap/variables';
$tab-margin: 44px !default;
$title-text-color: #4e4a42 !default;
$body-background-color: #f0f0f0 !default;
$tab-active-accent-color: $brand-primary !default;
$admin-sidebar-background-color: #5c5c5c !default;
$admin-sidebar-profile-background-color: #505050 !default;
$admin-sidebar-section-heading-color: #dedede !default;
$admin-sidebar-link-color: #ffffff !default;
$admin-sidebar-link-hover-color: #000000 !default;
$admin-sidebar-link-background-color: #505050 !default;
$admin-content-background-color: #f0f0f0 !default;
$admin-vertical-padding: 0 !default;
$admin-panel-border-color: #dedede !default;

.works-list {
  .highlighted-work {
    color: #ffd700;
    background-color: $gray-light;
    border-radius: 10px;
    padding: 2px;
  }

  .workflow-state {
    white-space: nowrap;
  }

  .media-body {
    width: 18vw;
  }
}

body.dashboard {
  background-color: $body-background-color;
  padding-top: $navbar-height;

  @media only screen and (max-width : 767px) {
    padding-top: 0;
  }
}

.dashboard {
  .breadcrumb {
    border: 1px solid $admin-panel-border-color;
    margin-top: 0.5em;
  }

  .tabs {
    margin-top: $tab-margin;
    position: relative;
  }

  .nav-tabs {
    border-bottom: 0;
    margin-bottom: 0;
    margin-top: -$tab-margin;
    padding: 0 5px;
  }

  .nav-tabs > li > a {
    border-top: 2px solid transparent;
  }

  .nav-tabs > li.active > a,
  .nav-tabs > li.active > a:hover {
    border-top: 2px solid $tab-active-accent-color;
  }

  /* The #masthead selector below could (and ideally, should) be removed if we can
   * replace the "navbar-static-top" class with "navbar-fixed-top" for the Admin UI only
   */
  #masthead {
    border: 0;
    left: 0;
    position: fixed;
    right: 0;
    top: 0;

    @media only screen and (max-width : 767px) {
      position: initial;
    }
  }

  /* This is needed in Chrome for the admin/admin_sets edit view AND the collection
   * sharing edit view to render the participants tab
   * Without this the contents of that tab flow off the right-hand side of the screen
   * (The other containers on that page have `float: left` except for the fieldset.)
   */
  .admin-set-participants {
    float: left;
  }

  .collection-sharing {
    float: left;
  }

  .main-header {
    margin-bottom: 0;
    margin-top: 0;

    h1 {
      font-size: $font-size-h2;
      margin-left: $padding-xs-horizontal;
      margin-top: $padding-base-vertical;

      .fa {
        color: $gray;
        margin-right: $padding-xs-horizontal;
      }
    }


    .btn {
      margin-bottom: $padding-base-vertical;
    }
  }

  // the span selector is required because Blacklight is using it.
  .list-filters-label, span.constraints-label {
    font-weight: bold;
    margin-right: 2em;
  }

  .constraints-container {
    padding: $panel-heading-padding;

    .start-over {
      padding: 4px 6px;
    }
  }

  .table {
     .date,
     .action {
      width: 13ch;
    }
  }

  .list-filters {
    background-color: $panel-default-heading-bg;
    margin-bottom: 20px;
    padding: $panel-heading-padding;

    .btn-group > .facet-values {
      display: none;
    }
    .btn-group.open > .facet-values {
      display: table;
    }

    .facet-values {
      width: 20em; // TODO: make this responsive.
    }

    .facet-label {
      padding: 3px 20px;
      font-weight: 400;
      line-height: 1.42857143;
      color: #333;
      white-space: nowrap;
    }

    .facet-count {
      padding: 3px 20px;
      font-weight: 400;
      line-height: 1.42857143;
      color: #333;
      white-space: nowrap;
    }
  }

  .sort-toggle {
    padding: 0;
  }

  .user-activity .panel-body {
    overflow: scroll;
    max-height: 20em;
  }

  .transfer_link {
    margin-top: 8px;
  }

  #incoming-transfers .btn {
    margin-bottom: 6px;
  }

  .workflow-roles {
    list-style-type: none;
    margin-bottom: 0;
    padding-left: 0;

    .fa-remove {
      color: $brand-danger;
    }
  }

  .navbar {
    margin-bottom: 0;
  }

  // The select collection modal for batch operations
  .collection-list-modal {
    .modal-content {
      float: left;
      .modal-header,
      .modal-footer,
      .modal-body {
        float: left;
        width: 100%;
      }
    }
  }

  .panel {
    border: 1px solid $admin-panel-border-color;
    float: left;
    width: 100%;

    .panel-heading,
    .panel-footer,
    .panel-body,
    .list-group-item {
      float: left;
      width: 100%;
    }

    .panel-title {
      color: $title-text-color;
      display: block;
      font-size: 18px;
      font-weight: 600;
      line-height: 30px;

      &.h2 {
        font-size: 22px;
      }
    }
  }

  .panel.panel-default.labels {
    border-top: 1px solid $panel-default-border;
    margin-bottom: 0;
  }

  .spacer {
    margin-bottom: 5px;
  }
}