// utilities: developer
// ====================
// NOTE: use this area for any developer-needed or created styling that needs to be refactored into patterns or visually polished. Please list any template/view that your styles reference when definining them (example below):
// Views: New Prototype View
// --------------------
// .crazy-new-feature {
//   background: transparent;
// }
@import "mixins";

.chart-info {
  @extend .pull-left;
  padding-left: $padding-small-horizontal;
  padding-top: $padding-large-vertical;
  color: $edx-blue;
  font-size: $font-size-small;

  // controls in the chart info section are floated left, so push the menu
  // down a bit so it doesn't appear on top of the control
  .dropdown-menu {
    top: 20px;
  }
}

#main-nav .navbar-nav li > button {
  padding-top: $navbar-padding;
  padding-bottom: $navbar-padding;
  padding-right: $navbar-padding;
}

button.chart-info {
  padding-left: 0;
  padding-top: 0;
  border: none;
}

.clear.btn {
  background: transparent;
}

.chart-tooltip {
  float: right;
  padding-right: $padding-small-horizontal;
  padding-top: $padding-large-vertical;
}

.analytics-chart-container {
  background-color: white;
  border: $description-border-color 1px solid;

  $chart-height: 305px;
  .analytics-chart {
    height: $chart-height; // Update the height of the graph in trends-view.js to be this height minus 5px.
    padding-top: $padding-large-vertical;
  }

  // the answer distribution chart is a bit shorter
  #performance-chart-view.analytics-chart {
    height: $chart-height - 18px;
  }

  .nvd3 {
    .nv-axis {

      &.nv-y {
        fill: $edx-gray;

        .nv-axislabel {
          fill: $edx-blue;
        }
      }

      &.nv-x {
        text {
          fill: $palette-grayscale-accent;
          font-size: $font-size-small;
        }

        .x-axis-background {
          fill: $palette-grayscale-dark;
        }
      }
    }
  }
}

.chart-message-container {
  top: $padding-large-horizontal * 2;

  p {
    padding-bottom: $padding-large-horizontal;
  }
}

// Ensure that the map fits for different screens sizes
// --------------------
.world-map {
  position: relative;
  margin: 0 auto;

  width: 100%;
  max-height: 450px;

  background-color: white;
  border: $description-border-color 1px solid;
  
  // Reason for !important: need to override Datamap style added directly to element via JS.
  // (they set it to 60%, but that makes too much vertical space for the height of the map)
  padding-bottom: 41% !important;

  .chart-tooltip {
    position: absolute;
    right: 0;
    z-index: 1;
  }
}

@media (max-width: $bp-screen-lg) {
  .world-map {
    max-height: 250px;
  }
}

@media (max-width: $bp-screen-md) {
  .world-map {
    max-height: 300px;
  }
}

// --------------------

.navbar-nav {

  margin: 0;
  display: inline-block;

  .nav-section.active {
    margin-bottom: 0px;
    color: $navbar-default-link-active-color;
    border-bottom: 6px solid $navbar-default-link-active-color;
  }

  .nav-section {
    @include a-background(transparent);
  }

  li > button {
    line-height: 20px;
    border: none;
    background: transparent;
  }

  li > button:focus {
    outline: dotted 1px #000;
  }
}

// lens navigation consists of a drop down and the lens sections in a navigation
$lens-background-color: $palette-grayscale-dark;
$lens-nav-text-color: $palette-grayscale-accent;
$lens-nav-height: 55px;
$lens-box-model: border-box;
$lens-padding-top: 18px;
$lens-nav-margin: 15px;

.course-label {
  padding-top: $lens-padding-top;
  padding-bottom: 0px;
  margin-left: $lens-nav-margin;
  margin-right: $lens-nav-margin;
  min-height: $lens-nav-height;
}

.lens-nav {
  background-color: $lens-background-color;
  min-height: $lens-nav-height;
  border: 0px;
  margin-bottom: 0px;
  -moz-box-sizing: $lens-box-model;
  -webkit-box-sizing: $lens-box-model;
  box-sizing: $lens-box-model;

  // aligns the navbar with the logo
  ul.navbar-nav {
    margin-left: $lens-nav-margin;
  }

  .navbar-nav {

    .dropdown {
      padding-right: 10px;

      a, button {
        background: transparent;
        text-transform: uppercase;
        color: $navbar-default-link-active-color;
      }

      // this prevents the drop down from overlapping with the menu
      .dropdown-menu {
        top: 100%;

        li > a {
          // the default size is a big large
          min-height: 20px;
          color: $dropdown-link-color;
        }
      }
    }

    // style the nav secondary items
    li > a {
      color: $lens-nav-text-color;
      min-height: $lens-nav-height;
      padding-top: $lens-padding-top;
      padding-bottom: 0px;
    }

    li > button {
      min-height: $lens-nav-height;
    }

    .nav-section {
      @include a-background(transparent);
    }

  }
}

.tertiary-nav {

  padding-left: $padding-large-horizontal;

  li > a {
    color: $lens-nav-text-color;
    padding-top: 0px;
    padding-bottom: $padding-small-vertical;

    // use darkest gray when hovering over sub-lens nav (e.g. age, education, gender)
    &:hover {
      color: $edx-gray-d2
    }
  }

  li.active > a {
    color: $navbar-default-link-active-color;
  }

  .section-heading {
    margin-top: 0;
    margin-bottom: 0;

    .section-heading-note {
      margin-top: 0;
    }
  }
}

body.view-course-list {
  $course-list-vertical-padding: $padding-large-vertical * 2.5;
  #content {
    .view-section {
      margin-bottom: 0px;

      .section-content {
        margin-bottom: 0px;
      }
    }

    .course-list-app-container {
      margin-bottom: $padding-large-vertical * 4;
    }

    .course-list-header-region {
      padding-top: $padding-large-vertical;
    }

    .section-heading {
      margin-bottom: $padding-large-vertical;

      .section-title {
        margin-top: 0px;
      }
    }

    .view-head {
      margin: 0;
    }

    .help-msg {
      font-size: $font-size-small;
      margin-bottom: 50px;
    }
  }
}

body.view-dashboard {
  .view-head {
    margin-bottom: 0;
  }
}

.page-title-outer {
  .page-subtitle {
    @extend .text-muted;
    font-size: ($font-size-h1 * 0.5);

    @media (min-width: $bp-screen-lg - 1) {
      text-align: right;
      margin-top: ($line-height-computed * 1.5);
    }
  }
}

.data-information-message {
  @extend .small;
  padding-top: $padding-base-vertical;
  padding-bottom: $padding-base-vertical;
  margin-top: $padding-large-vertical;
}

.data-update-message {
  @extend .data-information-message;
  border-top: $gray-l1 1px solid;
}

.announcement-container {
  background-color: $palette-grayscale-dark;
  border-bottom: solid 1px $edx-blue;
  padding-bottom: $padding-large-vertical * 1.5;
  padding-top: $padding-large-vertical;
  padding-left: $padding-small-horizontal;
  padding-right: $padding-small-horizontal;
  color: $palette-grayscale-accent;
  font-size: $font-size-small;

  .dismiss {
    float: right;
    margin-right: $padding-small-horizontal;
    cursor: pointer;
    font-size: $font-size-large;
  }

  .icon {
    color: $edx-blue;
    text-align: right;
    font-size: $font-size-h2;
    margin-left: $padding-small-horizontal;

    @media (max-width: $bp-screen-md - 1) {
      display: none;
    }
  }

  h1 {
    color: $white-t3;
    font-size: $font-size-large;
    padding-bottom: $padding-small-vertical;
  }
}

.table.course-overview {
  th, td {
    border: none;
  }

  th {
    font-weight: normal;
    white-space: nowrap;
  }

  td {
    width: 99%; // Expand as much as possible
  }
}

.course-external-tools {
  list-style: none;
  padding: 0;
  margin-left: 0;

  li {
    padding: 8px 10px;
  }

  .ico { margin-right: 6px; }
}

.course-home-table-outer {
  columns: 3;
  -moz-columns: 3;
  -webkit-columns: 3;
  column-width: $bp-screen-lg / 3;
  -moz-column-width: $bp-screen-lg / 3;
  -webkit-column-width: $bp-screen-lg / 3;

  header.heading-outer {
    display: table;
    height: $font-size-large * 4;
    padding-bottom: $padding-large-vertical;
    width: 100%;
    @extend .text-center;

    .heading {
      display: table-cell;
      vertical-align: bottom;
      font-size: $font-size-large;
      color: $edx-blue;

      // increase line height for med-small screens so headers are same level for long lines
      @media (max-width: $bp-screen-lg) and (min-width: $bp-screen-md - 1) {
        min-height: $font-size-large * 3.5;
      }
    }
  
  }

  .course-home-section {
    -webkit-column-break-inside: avoid;
    page-break-inside: avoid;
    break-inside: avoid;
    padding-bottom: $padding-large-vertical;
  }

  .course-home-table {
    border: 1px solid $description-border-color;
    border-width: 0 0 1px 1px;

    .item {
      background: white;
      padding: $padding-large-vertical;
      border: 1px solid $description-border-color;
      border-width: 1px 1px 0 0;

      &.name {
        color: $edx-gray-l1;
        font-size: $font-size-large;
      }

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

      .breadcrumbs {
        color: $edx-gray-l1;
        font-size: $font-size-small;
      }
    }
  }
}

.masthead {

  .cover-container {
    width: 100%;
    display: block;
    position: relative;
    overflow: hidden;
    border-top: 4px solid $edx-blue-s1;
    height: 100%;

    .cover {
      // center cover image
      display: block;
      margin-left: auto;
      margin-right: auto;
      height: 400px;

      // cover image will be smaller on smaller displays
      @media (max-width: $bp-screen-lg - 1) {
        height: 200px;
      }

    }
  }

  .masthead-heading {
    @include dark-background;
    text-align: center;
    font-size: $font-size-large * 1.25;
    font-weight: 300;
    padding-top: $padding-large-vertical + 9px;
    padding-bottom: $padding-large-vertical;
  }

  // default margins cause the masthead to be vertically scrollable
  &.row {
    margin-left: -1px;
    margin-right: -1px;
  }

}

.landing {

  p {
    color: $gray-lighter;
  }

  // match the login button style to that of the LMS
  button {
    text-transform: uppercase;
    color: $navbar-default-link-active-color;
    padding: 4px 45px;
    font-weight: 600;
    font-size: $font-size-large;
    border-radius: 5px;
    border: 3px solid #e6e6e6;

    &:hover {
      border-color: $navbar-default-link-active-color;
      color: $gray-d2;
      background: white;
      @include transition(color 0.25s 0 ease);
    }
  }

  .login-button-container {
    padding-top: 25px;
  }

  // into tagline section directly below the cover image
  .intro-block {
    padding-top: $padding-large-horizontal * 3;
    margin-bottom: $padding-large-horizontal * 2 + 5px;
  }

  .lens-question {
    font-size: $font-size-large;
    color: $edx-blue-s1;
    min-height: 60px;
    text-align: center;
    vertical-align: bottom;

    // adjust the display when the screen is small so that the lens questions are
    // displayed stacked
    @media (max-width: $bp-screen-lg - 1) {
      min-height: inherit;
      padding-top: $padding-large-horizontal * 1.5;
      padding-bottom: $padding-large-horizontal;
    }
  }

  .lens-summary {
    @extend %ui-box;
    h1 {
      font-size: $font-size-large;
      text-align: center;
      font-weight: 300;
      color: $edx-gray;
    }

    p {
      color: $edx-gray;
    }
  }

  .audience-message {
    margin-bottom: $padding-large-horizontal * 2;

    p {
      color: $gray;
    }
  }

  .audience-message-module {
    h1 {
      font-size: $font-size-base;
      font-weight: bold;
    }

  }

}

// cap the size of the dropdown menus (useful for long question/problem names)
.dropdown-menu {
  .truncate {
    max-width: 450px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

// ensures tooltips won't span the width of the screen and wraps tooltip title
.nv-pointer-events-none {
  max-width: 500px;
  text-align: left;
  white-space: normal;
}

// description and controls at the top and bottom of the chart
.chart-marginals {
  border: $description-border;
  padding: $padding-small-horizontal $padding-small-horizontal;
  background-color: $white;

  p {
    // shifts it down so that it's even with the adjacent button
    padding-top: 8px;
  }
}

.module-meta {
  @extend .chart-marginals;
  border-bottom: none;
}

// for the next/previous buttons that sit at the bottom of the chart
.module-controls {
  @extend .chart-marginals;
  border-top: none;
}

.module-preview-disclosure {
  // the video preview height can be variable, so use media queries to mimic height changes
  .video-preview {
    width: 100%;
    height: 700px;
    border: 0;

    @media screen and (min-width: $bp-screen-md - 1) {
      height: 670px;
    }

    @media screen and (min-width: $bp-screen-lg - 1) {
      height: 770px;
    }
  }

  .disclosure-toggle {
    // moving the text down just a tad so that it's in line with the next/previous buttons
    padding-top: 8px;
  }

  .disclosure-target {
    // initially collapsed
    display: none;
  }

  #module-loading {
    padding-top: $padding-large-vertical;
  }
}

.grading-policy {
  a {
    color: inherit;
  }

  .tooltip-container {
    text-align: right;

    .chart-tooltip {
      float: none;
      padding: 0 0 $padding-large-vertical;
    }
  }

  .policy-item {
    @extend .text-center;
    // float the policy item so that it's all on one line
    @extend .pull-left;

    // adds padding to the inside so that the policy items don't touch
    padding: 5px;

    .policy-item-box {
      background-color: $edx-blue-l2;
      margin-bottom: $padding-base-vertical;
      height: 50px;
      line-height: 50px;

      .weight {
        display: inline-block;
        vertical-align: middle;
        font-weight: bold;
      }
    }

    .type {
      text-overflow: ellipsis;
      white-space: nowrap;
      overflow: hidden;
    }
  }
}

.static-legend {
  .nvd3 .nv-legend .nv-series {
    cursor: default;
  }
}

.graded-content-nav {
  @extend .tertiary-nav;

  margin-bottom: -$padding-base-vertical;

  .navbar-nav {

    .nav-section.active {
      border-bottom: none;
    }

    .active .dropdown {
      color: $navbar-default-link-active-color;

      &:hover {
        color: inherit;
      }
    }

    .dropdown, .separator {
      padding: $nav-link-padding;
      color: $edx-gray;
    }

    .dropdown {
      cursor: pointer;

      &:hover {
        color: $edx-gray-d2
      }

      .dropdown-menu {
        margin-top: -1px;
        margin-left: -1px;

        li > a {
          color: $dropdown-link-color;
          padding-bottom: $padding-small-vertical;

          &:hover {
            // Override the transparent background set by the .navbar-nav selector.
            background: $navbar-default-link-active-bg;
          }
        }

        > .disabled > a {
          @include disabled-link;
        }
      }
    }
  }

  .section-heading {
    margin-top: 10px;
    margin-bottom: 6px;
  }
}

// Learner App
.learners-app-container {
  margin-bottom: $padding-large-horizontal;
}

.learner-roster {
  @include backgrid-table(learners);

  .learners-table-controls-col {
    position: relative;
     
    @media (min-width: $bp-screen-md) {
      left: percentage(2/3);
    }
  }

  .learners-results-col {
    position: relative;

    @media (min-width: $bp-screen-md) {
      right: percentage(1/3);
    }
  }

  .learner-engagement-cell {
    text-align: right;
  }

  // color-blind safe colors for differentiating engagement categories
  $rank-bottom-color: rgb(217,95,2);
  $rank-top-color: rgb(27,158,119);
  .learner-cell-rank-bottom {
    text-decoration: underline;
    color: $rank-bottom-color;
  }

  .learner-cell-rank-top {
    color: $rank-top-color;
    font-weight: bolder;
  }

  .activity-date-range {
    color: $edx-gray-d2;

    // padding keeps the element from shifting when active filters are selected
    padding-top: $padding-large-vertical * 1.5;
    padding-bottom: $padding-large-vertical * 1.5;

    @media (min-width: $bp-screen-md) {
      float: right;
    }

  }

  th.learner-name-username-cell {
    // override the th styling with td styling
    @extend td;
    font-weight: normal;
  }
}

// styles for the learner details summary
.learner-summary-container {

  .learner-name {
    font-size: $font-size-large;
  }

  // e.g. "enrollment" or "cohort"
  .learner-summary-field {
    color: $edx-gray-d2;
  }

  .col {
    margin-bottom: $padding-large-vertical;
  }

}

.table-responsive {
  .row {
    padding: 0 10px;
  }

  @media (min-width: $bp-screen-md) {
    width: 100%;
    margin-bottom: 15px;
    overflow-y: hidden;
    overflow-x: auto;
    -ms-overflow-style: -ms-autohiding-scrollbar;
    -webkit-overflow-scrolling: touch;
  }
}

.course-list {
  @include backgrid-table(course-list);

  .course-list-active-filters .col {
    min-height: 43px;
  }

  .course-list-table-controls-col {
    margin-top: $padding-large-vertical * 2.1;
  }

  .course-id {
    color: $edx-gray;
  }

  th.course-name-cell {
    // override the th styling with td styling
    @extend td;
    font-weight: normal;
  }
}
