@import 'mixins'

.reporting
  position: fixed
  .container
    position: absolute
    bottom: 0
    top: 3.7em
    left: 0
    right: 0
    overflow: auto
  h2, h3, h4, h5
    font-weight: bold
    margin-top: 0.5em
  h2
    font-size: 2em
    margin-left: 2.25em
  .title
    color: #004e7d
    margin: 1.5em 0 0
  &-header
    width: 100%
    position: relative
    padding-right: 4.5em
    h2
      float: left
    &-container
      position: absolute
      right: 4.5em
      top: 4.5em
      background-color: #f0f0f0
      padding: 1.5em
      z-index: 1002
      border-radius: 2em 0 2em 2em
      border: 3px solid #207ce5
      display: none
      b
        color: #004e7d
  .row
    padding: 0 3.75em
    max-width: 100%
  &-export, &-filter
    font-weight: normal
    background-color: #004e7d
    border-radius: 2em
    border: 3px solid #fff
    padding: 0.75em 1.5em 0.75em 1.5em
    margin: 0
    outline: none
    position: relative
    &.open
      background-color: #f0f0f0
      color: #004e7d
      border-radius: 1.25em 1.25em 0 0
      border: 3px solid #207ce5
      border-bottom: 0
      z-index: 1100
      padding-bottom: 1.1em
    &:hover
      background-color: #207ce5
      color: #fff
    i
      position: relative
      top: 0
      font-size: 1em
      margin-left: 0.75em
  &-filter
    background-color: #207ce5
    position: absolute
    right: 13em
    &:hover
      background-color: #004e7d
    &.open
      &:hover
        background-color: #207ce5
  h5
    margin-top: 0
    color: #888
  h6
    font-weight: bold
    color: #004e7c
    text-transform: capitalize
    margin-bottom: 0

.ampersand-graph-horizontal-container
  display: block
  &:first-child
    margin-top: 1em
  &:last-child
    margin-bottom: 1em
  .ampersand-graph-value
    font-size: 1em
    fill: #fff
    dominant-baseline: middle
    text-anchor: end
  .ampersand-graph-label
    text-anchor: start
    font-size: 1em
    fill: #888
  .ampersand-graph-bar
    fill: #207ce5

#reporting-customer-satisfaction
  h6
    margin-bottom: 2em
  &-no-nps-notification
    text-align: center
    display: none
    &-logo, &-text, .columns
      display: inline-block
    .columns
      float: none
      width: auto
      margin: 3em 0
      background-color: #ebebeb
      font-size: 1em
      padding: 1.5em
      border-radius: 6em
    &-logo
      background-color: #fff
      padding: 0
      height: 7em
      width: 7em
      border-radius: 50%
      vertical-align: top
      img
        padding: 1.5em
    &-text
      text-align: left
      font-size: 1.25em
      color: #888
      padding: 1em
      box-sizing: border-box
  &-nps-by
    &-team, &-agent
      button
        top: -4em
      .ampersand-graph-filter-window
        top: -1.3em
      .ampersand-graph-value
        stroke: none

#reporting-survey-results
  &-export-container
    li
      width: 25em
  .row
    padding: 2em 4.5em
    max-width: 100%
  .ampersand-graph-filter-button
    top: -2.5em
  .ampersand-graph-filter-window
    top: 0
    margin-top: -0.25em
  &-individual
    padding: 0 4.5em
    max-width: 100%
    .help-data-row
      margin-bottom: 0.5em
      .columns
        height: 3em
        line-height: 3em
  .help-data-rows
    .row
      padding: 0 3.75em
    header
      margin-bottom: 0.5em
    .controls-container
      color: #999999
      width: 100%
      padding-left: 4em
      &.collapsed
        margin-top: -50em

.reporting-survey-results
  &-button
    background-color: transparent
    color: #888
    padding: 0 0 0.5em 0
    outline: 0
    &:first-child
      margin-left: 4.5em
      margin-right: 3em
    &:hover
      background-color: transparent
      color: #999
    &:active, &:focus
      background-color: transparent
      color: #777
    &.open
      color: #207ce5
      border-bottom: 0.15em solid #207ce5
  &-section
    display: none
  &-individual
    &-link
      color: #207ce5
      cursor: pointer
    &-responses
      margin: 1em 5em 0 0.75em
      text-align: left
      p
        font-size: 1em
        font-weight: bold
        color: #004e7d
        margin-bottom: 0.75em
  &-row:nth-child(even)
    background: #f8f8f8
    .ampersand-graph-bar-background
      fill: #dadada

.reporting-header-buttons
  margin-top: 1.5em
  float: right
  height: 3.7em

.reporting-chart-container
  box-sizing: border-box

.reporting-grey
  padding-top: 2em
  margin-bottom: 2em
  background-color: #f8f8f8
  .reporting-chart
    .ampersand-graph
      &-y-axis
        line
          stroke: #e0e0e0
      &-bar
        &-background
          fill: #e0e0e0
      &-legend
        &-background
          fill: #fff
      &-filter
        &-button
          background-color: #fff
        &-window
          background-color: #fff
    .ampersand-time-range
      &-midnight
        color: #f0f0f0
      &-bar
        background-color: #f0f0f0
    .ampersand-search-select
      &-bar
        background-color: #f0f0f0
    .ampersand-filter-tracker
      &-item
        background-color: #f0f0f0

.reporting-export-container
  li
    font-size: 0.9em
    padding: 0.25em
    background-color: #e0e0e0
    margin: 0.5em 0
    border-radius: 3em
    font-weight: bold
    display: inline-block
    box-sizing: border-box
    width: 15em
    line-height: 2em
    &:nth-child(3n+1)
      margin-right: 1em
    .reporting-export-status
      display: inline-block
      background-color: #e85834
      color: #fff
      width: 1.75em
      height: 1.75em
      border-radius: 50%
      position: relative
      left: 0.25em
      margin-right: 1em
      line-height: 2.1em
      padding-left: 0.35em
      font-size: 0.75em
      cursor: pointer
      &.selected
        background-color: #22B573
  .reporting-export-formats
    display: inline-block
    margin-top: 1em
  .reporting-export-buttons
    display: none
    margin-top: 1em
    text-align: right
    button
      font-weight: bold
      border-radius: 2em
      opacity: 0.75
      outline: none
      margin-bottom: 0
      &:hover
        opacity: 1
    &-cancel
      color: #e85834
      border: 0.15em solid #e85834
      padding: 0.25em 1em
      margin-right: 1em
      background: none
    &-apply
      color: #fff
      background-color: #207ce5
      padding: 0.75em 2.5em

#reporting-volume
  h6
    display: block
    margin-bottom: 2em
  &-tags
    &-popular, &-recent
      h6
        color: #207ce5
        margin-bottom: 0
      .ampersand-graph-no-data
        margin-top: 2em
    &-popular
      .ampersand-graph-filter-button
        display: none
    &-recent
      .ampersand-graph
        &-count
          &-number
            background-color: #048
        &-filter
          &-button
            top: -4.1em
          &-window
            top: -1.4em
  &-busiest
    &-agents, &-teams
      .ampersand-graph
        &-value
          stroke: none
          display: inline
        &-filter
          &-button
            top: -4.1em
          &-window
            top: -1.4em

.reporting-chart, .reporting-filter-container
  position: relative
  html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video, button, input
    margin: initial
    padding: initial
    border: initial
    vertical-align: initial
    background-color: initial
    position: initial
    height: initial
    top: initial
    left: initial
    z-index: initial
    right: initial
    bottom: initial
    display: initial
    font-family: Lato
  div.ampersand-graph-no-data
    border-radius: 5em
    background-color: #f0f0f0
    padding: 2em
    margin: 0 2em 2em 2em
    text-align: center
  .ampersand-graph
    &-value
      stroke: #fff
      stroke-width: 0.4px
      paint-order: stroke
      display: none
    &-mask
      fill: transparent
      stroke: transparent
    &-bar, &-line, &-area
      &-container
        &:hover
          cursor: pointer
          .ampersand-graph-value
            display: block
    &-count
      &-container
        font-weight: bold
        white-space: nowrap
      &-label
        display: inline-block
        line-height: 2em
        margin-left: 1em
        color: #888
        text-transform: capitalize
      &-number
        display: inline-block
        width: 3em
        line-height: 2em
        background-color: #f84422
        text-align: center
        border-radius: 2em
        margin: 1em 0
        color: #fff
    &-no-data, &-loading
      dominant-baseline: central
      font-size: 1em
      font-weight: bold
      fill: #004e7d
    &-circle
      &-background
        fill: #004e7d
      &-foreground
        &-0
          fill: #207ce5
        &-1
          fill: #89c3ea
      &-text
        fill: #207ce5
        dominant-baseline: central
        font-size: 5em
        font-weight: bold
      &-label
        &-background
          fill: #f0f0f0
    &-y-axis
      line
        stroke: #f0f0f0
        stroke-width: 0.1em
    &-bar, &-area
      &-color
        &-0
          fill: #207ce5
        &-1
          fill: #025096
        &-2
          fill: #91e6ff
        &-3
          fill: #4d454d
        &-4
          fill: #f73220
        &-5
          fill: $orange
    &-line
      fill: #207CE5
      stroke: #207ce5
      stroke-width: 0.1em
      &-color
        &-0
          stroke: #207ce5
        &-1
          stroke: #025096
        &-2
          stroke: #91e6ff
        &-3
          stroke: #4d454d
        &-4
          stroke: #f73220
        &-5
          stroke: $orange
      &-dot
        &-color
          &-0
            fill: #207ce5
            stroke: #207ce5
          &-1
            fill: #025096
            stroke: 025096
          &-2
            fill: #91e6ff
            stroke: #91e6ff
          &-3
            fill: #4d454d
            stroke: #4d454d
          &-4
            fill: #f73220
            stroke: #f73220
          &-5
            fill: $orange
            stroke: $orange
    &-line-area
      fill: #f0f0f0
    &-bar-background
      fill: #f0f0f0
    &-legend
      &-background
        fill: #f0f0f0
      text
        text-anchor: start
        text-transform: capitalize
    &-filter
      &-body
        float: right
        text-align: right
      &-window
        position: absolute
        right: 0
        left: 0
        top: 1.85em
        border: 3px solid #207ce5
        background-color: #f0f0f0
        border-radius: 1em 0 1em 1em
        box-sizing: border-box
        z-index: 100
        h6
          margin: 0
          font-size: 0.75em
          font-weight: bold
        &-left
          width: 55%
          float: left
          text-align: left
          box-sizing: border-box
          padding: 1em
        &-right
          width: 45%
          float: right
          text-align: left
          box-sizing: border-box
          padding: 1em
      &-button
        position: absolute
        right: 0
        top: 0.25em
        z-index: 200
        border: none
        font-size: 0.75em
        padding: 0.3em 1em
        border-radius: 2em
        border: 3px solid rgba(0,0,0,0)
        background-color: #f0f0f0
        color: #207ce5
        font-weight: bold
        outline: none
        &:hover
          color: #fff
          background-color: #207ce5
          line
            stroke: #fff
        &-open
          border: 3px solid #207ce5
          padding-bottom: 0.7em
          border-bottom: none
          border-bottom-left-radius: 0
          border-bottom-right-radius: 0
          border-top-left-radius: 1.25em
          border-top-right-radius: 1.25em
          svg
            +transform(rotate(180deg))
        &-arrow
          position: relative
          left: 0.35em
          top: 0.165em
          &-line
            stroke: #207ce5
            stroke-width: 0.25em
      &-widget
        float: left
        display: inline-block
        padding: 1em
        box-sizing: border-box
        text-align: left
  .ampersand-graph-filter-time
    width: 55%
    padding-bottom: 0
  .ampersand-graph-filter-date
    width: 55%
    padding-top: 0
  .ampersand-graph-exclude-anonymous
    display: none
  .ampersand-graph-filter-personnel
    width: 45%
    float: right
    position: absolute
    top: 0
  .ampersand-graph-filter-selections
    width: 45%
    float: right
    margin-top: 8em
  .ampersand-time-range
    &-bar
      fill: #fff
    &-handle
      fill: #004e7d
      cursor: pointer
      &:hover
        fill: #207ce5
    &-duration
      stroke: #207ce5
      stroke-width: 0.5em
    &-midnight
      font-size: 0.75em
      font-weight: bold
      &-left
        text-anchor: start
      &-right
        text-anchor: end
    &-noon
      text-anchor: middle
    &-tool-tip
      &-rect
        fill: #207ce5
      &-tail
        fill: #207ce5
      &-text
        fill: #fff
        text-anchor: middle
  .ampersand-calendar
    margin-top: 0.5em
    &-month
      &-background
        fill: #004e7d
      &-label
        fill: #fff
        text-anchor: middle
    &-arrow
      stroke: #fff
      stroke-width: 0.25em
      cursor: pointer
      &:hover
        stroke: #207ce5
    &-weekday
      &-text
        font-size: 0.75em
        fill: #000
        text-anchor: middle
        &-selected
          fill: #fff
      &-container
        cursor: pointer
      &-selected
        fill: #207ce5
  .ampersand-search-select
    margin: 1em 0
    &-glass
      top: 0.25em
      left: 0.75em
      &-circle, &-line
        stroke: #d0d0d0
        stroke-width: 0.2em
        fill: none
    &-bar
      width: 100%
      border: 0px solid #000
      border-radius: 1em
      padding: 0.5em 0.5em 0.5em 3em
      box-sizing: border-box
      font-size: 0.8em
      outline: none
      background-color: #fff
      box-shadow: none
      margin: 0.5em 0
    &-list-item
      display: block
      margin: 0.5em 0
      &-image
        border-radius: 50%
        height: 1.5em
        width: 1.5em
      &-text
        font-weight: bold
        font-size: 0.8em
        vertical-align: top
        margin-left: 0.75em
        line-height: 2em
      &-add, &-check
        float: right
        cursor: pointer
        opacity: 0.75
        &:hover
          opacity: 1
        &-line
          stroke: #fff
          stroke-width: 0.2em
          stroke-linecap: round
      &-add
        &:hover
          opacity: 1
        &-circle
          fill: #e85834
      &-check
        cursor: pointer
        opacity: 0.75
        &-circle
          fill: #22B573
  .ampersand-filter-tracker
    font-size: 0.75em
    font-weight: bold
    &-ul
      font-size: 1em
      font-weight: bold
      list-style-type: none
      margin: 0
      padding: 0
    &-buttons
      display: block
      margin-top: 1em
      text-align: right
      button
        font-weight: bold
        border-radius: 2em
        opacity: 0.75
        outline: none
        &:hover
          opacity: 1
      &-cancel
        color: #e85834
        border: 0.15em solid #e85834
        padding: 0.25em 1em
        margin-right: 1em
      &-apply
        color: #fff
        background-color: #207ce5
        padding: 0.75em 2.5em
    &-item
      margin-top: 0.75em
      background-color: #e0e0e0
      padding: 0.5em
      border-radius: 2em
      &-text
        position: relative
        top: -0.25em
      &-cancel
        position: relative
        top: 0.2em
        cursor: pointer
        float: right
        &-line
          stroke: #a0a0a0
          stroke-width: 0.25em
      &-check
        position: relative
        top: 0.2em
        margin-right: 0.5em
        &-circle
          fill: #22B573
        &-line
          stroke: #fff
          stroke-width: 0.2em
          stroke-linecap: round
  text
    fill: #000
    font: 0.75em Lato
    text-anchor: middle
    font-weight: bold
    &.ampersand-graph
      &-title
        display: block
        fill: #004E7D
        text-anchor: start
        font: bold 1em Lato
      &-unit
        display: block
        fill: #999
        text-anchor: start
        font: normal 1em Lato
  line
    &.ampersand-graph
      &-ground
        stroke: #111
        stroke-width: 0.1em

#reporting
  &-overview-agent-productivity
    .ampersand-graph-bar-color-0
      fill: $orange
    .ampersand-graph-line-color-0
      stroke: $orange
    .ampersand-graph-line-dot-color-0
      stroke: $orange
      fill: $orange
  &-overview-nps-chart, &-overview-agent-productivity, &-volume-overall-volume
    .ampersand-graph-filter-time
      float: right
      width: 70%
      padding-bottom: 0
    .ampersand-graph-filter-date
      width: 30%
      padding-top: 1em
    .ampersand-graph-filter-personnel
      padding-top: 0
      position: initial
      float: left
      width: 33%
    .ampersand-graph-filter-selections
      padding-top: 0
      margin-top: initial
      float: left
      width: 37%
  &-overview-nps-chart
    .ampersand-graph-value
      display: block
  &-customer-satisfaction
    &-nps, &-nps-by-team, &-nps-by-agent
      .ampersand-graph-value
        display: block
  &-survey-results
    .ampersand-graph-value
      display: block
      stroke-width: 0

.reporting-filter-container
  position: absolute
  right: 13em
  margin-left: 4.5em
  max-width: 70em
  padding: 1em 0.5em
  .row
    padding: 0
    .column
      display: inline-block
      float: none
      vertical-align: top
      min-height: 18em
      &:nth-child(2)
        padding-right: 0.5em
        border-right: 0.25em solid #e8e8e8
  .ampersand-graph-filter
    &-widget
      padding: 0 1em
      h6
        margin: 0
        font-size: 0.75em
        font-weight: bold
    &-calendar
      width: 100%
      float: none
    &-time
      width: 100%
      float: none
    &-personnel
      width: 100%
      position: initial
      top: initial
      float: none
    &-selections
      width: 100%
      float: none
      margin-top: 0
      .ampersand-filter-tracker-ul
        display: block
        height: 17em