@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: #686868 !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: 10px !default;

.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 {
  left: 0;
  position: fixed;
  right: 0;
  top: 0;

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

body {
  background-color: $body-background-color;
  padding-top: 51px;

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

/* This is needed in Chrome for the admin/admin_sets 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.)
 */
fieldset {
  float: left;
}

#content-wrapper {
  padding-bottom: 0;

  &.container-fluid {
    padding-left: 0;
    padding-right: 0;
  }
}

.main-content {
  padding-top: $admin-vertical-padding;
  padding-bottom: $admin-vertical-padding;
  background-color: $admin-content-background-color;
}

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

.sidebar {
  background-color: $admin-sidebar-background-color;
  bottom: 0;
  left: 0;
  padding-bottom: $admin-vertical-padding;
  padding-left: 0;
  padding-right: 0;
  padding-top: $admin-vertical-padding;
  position: fixed;
  top: 51px;

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

  a {
    color: $admin-sidebar-link-color;
  }

  a:hover {
    color: $admin-sidebar-link-hover-color;
  }
}

.admin-sidebar {
  margin-left: 0;
  margin-right: 0;

  li .fa {
    margin-right: $padding-base-horizontal;
  }
}

.nav-pills > li > a {
  border-radius: 0;
  padding: 15px 10px 15px 15px;

  &:focus {
    background-color: transparent;
    color: $admin-sidebar-link-color;
  }
}

.nav-pills > li.active > a,
.nav-pills > li.active > a:focus,
.nav-pills > li.active > a:hover {
  background-color: $admin-sidebar-link-background-color;
}

.navbar {
  margin-bottom: 0;
}

.panel {
  border: 0;
  float: left;
  width: 100%;

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

  .panel-title {
    color: $title-text-color;
    display: block;
    font-size: 16px;
    font-weight: 400;
    line-height: 30px;
  }
}

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

.spacer {
  margin-bottom: 5px;
}