// Frameworks
@import bourbon
@import neat

// Configuration
@import spina/configuration

// Normalizing
@import spina/normalize

@import spina/mixins

// Grid
@import spina/grid

// Icons
@import spina/icons_spina
@import spina/fonts

// Animations
@import spina/animate
@import spina/custom_animations

// Elements
@import spina/forms
@import spina/tables
@import spina/buttons
@import spina/labels
@import spina/modal
@import spina/sortable_lists
@import spina/gallery
@import spina/login
@import spina/cards
@import spina/trix

// Plugins
@import spina/morris
@import spina/nprogress
@import spina/wysihtml5
@import spina/farbtastic

html
  min-height: 100%

html, body
  height: 100%
  font-family: $font-family
  -webkit-font-smoothing: antialiased

body
  @include display(flex)

// Primary navigation

nav#primary
  background: #444882
  height: 100%
  padding-top: 10px
  position: relative
  text-align: center
  width: 80px
  @include linear-gradient(#3b3f74, #7a76ad)

  @include media($tablet)
    width: 80px

  ul li a
    color: #fff
    display: block
    font-size: 10px
    font-weight: 700
    opacity: .6
    padding: 20px 0
    position: relative
    text-decoration: none
    text-transform: uppercase
    width: 100%
    @include transition(color .15s ease)

    @include media($tablet)
      padding: 12px 0

  ul li.active a, ul li a:hover
    opacity: 1

  ul li.bottom a
    bottom: 0
    left: 0
    position: absolute

  ul li a i.icon
    display: block
    font-size: 28px
    margin-bottom: 8px
    text-transform: none

    @include media($tablet)
      font-size: 20px

  ul li:first-child a i.icon
    font-size: 32px
    margin-bottom: 3px

  ul li a[data-badge]:after
    background: $danger-color
    border-radius: 8px
    color: #fff
    content: attr(data-badge)
    display: block
    font-size: 12px
    font-weight: bold
    line-height: 16px
    min-width: 10px
    padding: 0 3px
    position: absolute
    right: 28px
    top: 12px

// Secondary navigation

nav#secondary
  background: #f9f9f9
  border-right: 1px solid #ccc
  height: 100%
  padding: 30px 0
  width: 300px

  @include media($tablet)
    left: 80px
    padding-top: 12px
    width: 200px

  h1
    color: #333
    font-size: 24px
    font-weight: 300
    margin-bottom: 36px
    padding: 0 30px

    @include media($tablet)
      display: none

  ul li
    position: relative

  ul li a
    color: #333
    display: block
    font-size: 15px
    font-weight: 600
    line-height: 15px
    padding: 16px 30px 16px 66px
    text-decoration: none
    @include transition(all .2s ease)

    @include media($tablet)
      margin-left: 24px
      padding-left: 0

    small
      color: #666
      display: block
      font-size: 14px
      font-weight: normal
      line-height: 18px
      margin-top: 2px
      @include transition(color .15s ease)

      @include media($tablet)
        display: none

  ul li a:hover
    background: #f1f1f1

  ul li.active a
    background: #f1f1f1
    color: $primary-color

    small, i.icon
      color: inherit

  ul li a i.icon
    color: #666
    display: block
    float: left
    font-size: 24px
    line-height: 1
    margin-left: -36px
    text-align: center
    width: 24px
    @include transition(color .15s ease)

    @include media($tablet)
      display: none

  ul li.active
    &:before
      content: ""
      display: block
      position: absolute
      right: -12px
      top: 33%
      @include triangle(23px, #ccc, right)

    &:after
      content: ""
      display: block
      position: absolute
      right: -11px
      top: 33%
      @include triangle(22px, #f1f1f1, right)

// Tabs

nav.tabs
  border-bottom: 1px solid #ddd
  margin: 0 -40px 30px -40px
  padding: 0 40px 0 24px

  ul li
    display: inline

  ul li a
    border: 1px solid transparent
    color: #444
    display: inline-block
    font-size: 14px
    font-weight: 600
    margin-bottom: -1px
    margin-top: 20px
    padding: 12px 16px
    text-decoration: none

  ul li a:hover
    color: #222

  ul li.active a
    border-color: #ddd
    border-bottom: 1px solid #fff
    border-radius: 3px 3px 0 0
    color: $primary-color

.tab-content
  display: none

  &.active
    display: block

// Notifications

.notification
  position: relative
  color: $info-color
  margin: 20px 0
  overflow: hidden
  font-size: 14px
  padding-left: 32px

  &:before
    position: absolute
    left: 0px
    color: #77caf9
    display: block
    font-size: 18px
    margin-top: 1em

  p
    color: $info-color
    font-weight: 600
    line-height: 18px
    margin-bottom: 0

  small
    display: block
    font-size: 14px
    font-weight: normal

  ul
    margin: 0

  li
    font-weight: normal

  &.notification-error
    color: $error-color

    p
      color: $error-color

    &:before
      color: #e7baba

  &.notification-danger
    color: $danger-color

    p
      color: $danger-color

    &:before
      color: $danger-color

// Permanent notice
.permanent-notice
  background: #eee
  border-bottom: 1px solid #ddd
  color: #333
  margin: -30px -40px 30px -40px
  padding: 0 40px
  position: relative

  i.icon
    font-size: 16px
    left: 14px
    opacity: .25
    position: absolute
    top: 12px

  p
    font-size: 13px
    font-weight: 600
    line-height: 18px
    margin: 0
    padding: 12px 0

    small
      display: block
      font-size: 12px
      font-weight: 400

  &.permanent-notice-info
    background: #eef6fe
    border-color: #def
    color: #12659b

    p
      color: inherit

// Filters

.filters
  margin: 20px 0

// Datepicker

.ui-datepicker
  background: #fff
  border: none
  box-shadow: 0 1px 2px rgba(0, 0, 0, .25)
  width: 250px

.ui-datepicker-header
  border: none
  font-weight: 300

  a.ui-datepicker-prev, a.ui-datepicker-next
    background: none
    border: none
    color: transparent
    cursor: pointer
    display: block
    height: 36px
    opacity: .6
    padding: 8px 0
    position: absolute
    right: 0
    top: 0
    width: 36px

  a.ui-datepicker-prev
    left: 0

  a.ui-datepicker-prev:hover, a.ui-datepicker-next:hover
    opacity: 1

  a.ui-datepicker-prev span
    background: url(asset-path('spina/arrow-left.png')) no-repeat center
    background-size: 10px 13px
    display: block

  a.ui-datepicker-next span
    background: url(asset-path('spina/arrow-right.png')) no-repeat center
    background-size: 10px 13px
    display: block

  .ui-datepicker-title
    line-height: 42px
    text-align: center

.ui-datepicker-calendar
  width: 100%

  tr td:first-child, tr th:first-child
    padding-left: 0px

  tr td:last-child, tr th:last-child
    padding-right: 0px

  thead th
    color: #444
    font-weight: 600

  tbody tr, thead tr
    border: none

  tbody tr td
    background: none

  tbody tr td a
    display: block
    line-height: 28px
    text-align: center
    padding: 2px 4px
    width: 32px

  tbody tr td a.ui-state-default
    background: none
    border: none
    color: #777
    font-weight: 600

  tr:hover
    background: none

  tbody tr td a:hover
    color: #000

  tbody tr td a.ui-state-highlight
    background: #eee
    border-radius: 2px

  tbody tr td a.ui-state-active
    background: #444
    border-radius: 2px
    color: #fff

// Main content

section#main
  padding: 30px 40px
  height: 100%
  overflow: scroll
  @include flex(1)

// Danger zone
.danger-zone
  background: url(asset-path('spina/danger-zone-ribbon.png')) repeat-x #fcfcfc
  margin: 60px -40px 0 -40px
  padding: 26px 40px

  h2
    color: #777
    font-size: 16px
    font-weight: 600

    &:before
      margin-right: 6px
      vertical-align: middle

// Breadcrumbs

#main_content_header
  min-height: 50px

  .preview-website i
    vertical-align: bottom

  @include media($tablet)
    .button
      overflow: hidden
      height: 32px
      width: 35px

      &:before
        margin-right: 200px

.breadcrumbs
  color: #333
  font-size: 24px
  font-weight: 300

  a
    color: #999

    @include media($tablet)
      display: none

  .divider
    background: url(asset-path('spina/divider.png'))
    color: #999
    display: inline-block
    height: 17px
    margin: 0 20px
    width: 6px

    @include media($tablet)
      display: none

// General styles

h1, h2, h3, h4, h5, h6
  font-weight: 300
  margin: 0

h1, h2
  color: #333
  font-size: 24px

ul
  list-style: none
  margin: 0
  padding: 0

p
  color: #333
  font-size: 14px
  line-height: 18px

a
  color: $primary-color
  text-decoration: none

label
  color: #333
  font-size: 11px
  font-weight: 600
  margin-right: 14px
  text-transform: uppercase

.pull-left
  float: left

.pull-right
  float: right

.clearfix
  @include clearfix()

.spina-logo
  bottom: 0px
  opacity: .5
  padding: 20px
  position: absolute
  right: 0px
  @include transition(opacity .2s ease)

  &:hover
    opacity: 1

  img
    display: block