/* ==============================================================
   * Admin section
   *
   * styles for the admin section
   ============================================================== */

.fb-viewport .fb-admin-main {
  background: $black;
  padding: 80px;
  overflow: auto;

  .radio-tabs label {
    font-size: 1.14em;
    padding-left: 10px;
    padding-right: 10px;
  }
}

/*-----------
Admin Nav
------------*/
.admin-nav-header {
  padding: 20px;
  text-align: center;

  .branding-el {
    padding: 0 0 2px;
    border-top: 1px solid $light-blue;
    border-bottom: 1px solid $light-blue;
  }

  h2 {
    padding: 20px 0 0;
  }
}

.admin-nav-links {
  text-align: center;

  ul li {
    a {
      @include purista-bold;

      text-align: left;
      display: block;
      padding: 14px 0;
      border-top: 1px solid $blue-border;
      margin-left: 20px;
      margin-right: 20px;
    }

    &:last-child a {
      border-bottom: 1px solid $blue-border;
      margin-bottom: 20px;
    }

    &.active {
      background: $black;
    }
  }
}

.admin-nav-controls {
  text-align: center;
  padding-top: 20px;

  a {
    margin: 20px auto 20px;
    border-top: 1px solid $blue-border;
  }
}

.admin-nav--footer {
  @include purista-bold;

  text-align: center;

  .branding-el {
    display: block;
    width: 100%;
    margin-bottom: 20px;
    font-size: 11px;

    .icon {
      height: 13px;
    }
  }

  a {
    display: block;
    width: 90%;
    padding-top: 20px;
    margin: 20px auto 20px;
    border-top: 1px solid $blue-border;
  }
}

/*---------------
General Admin
----------------*/
.completely-hidden {
  display: none;
  visibility: hidden;
}

.admin-page-header {
  padding-left: 20px;
  padding-right: 20px;
  padding-bottom: 20px;
  border-bottom: 2px solid $teal-blue;

  h3 {
    color: $yellow;
  }
}

.admin-box {
  position: relative;
  background-color: $main-blue;
  border-radius: $border-radius;
  margin-top: 20px;

  h6 {
    @include purista-medium;
  }

  input[type="radio"] + label {
    font-size: 1em;
    padding-left: 26px;

    &:after {
      width: 20px;
      height: 20px;
      margin-top: -10px;
    }

    &:before {
      width: 10px;
      height: 10px;
      left: 5px;
      margin-top: -5px;
    }

    & ~ input[type="text"] {
      margin-top: 16px;
      color: $light-blue;
      display: block;
    }
  }

  #custom-logo-input {
    display: none;
  }

  input:not(:checked) + label {
    color: $teal-blue;
  }

  ::-webkit-input-placeholder {
    color: $teal-blue;
  }

  :-moz-placeholder {
    /* Firefox 18- */
    color: $teal-blue;
  }

  ::-moz-placeholder {
    /* Firefox 19+ */
    color: $teal-blue;
  }

  :-ms-input-placeholder {
    color: $teal-blue;
  }

  .admin-box-header {
    padding: 20px;
    border-bottom: 1px solid $teal-blue;

    @extend .fb-cf;

    h3 {
      float: left;
    }

    .error-msg {
      float: left;
      margin-left: 10px;
      margin-top: .5em;
    }

    .admin-section-toggle {
      float: right;

      label {
        margin-left: 10px;
      }
    }
  }

  .admin-row {
    padding-left: 20px;
    padding-right: 20px;
    padding-bottom: 20px;

    &.admin-buttons,
    &.global-controls-rules {
      padding-top: 20px;
    }
  }

  .form-el + .form-el {
    margin-top: 24px;
  }

  .admin-buttons {
    align-self: flex-end;

    &.admin-row {
      text-align: right;
    }

    .admin--edit {
      display: none;
    }
  }

  &.section-locked {
    .admin-buttons {
      .admin--edit {
        display: block;
      }

      .fb-cta {
        display: none;
      }
    }

    .selected-logo ~ .alt-link {
      display: none;
    }

    input[type="text"],
    input[type="password"] {
      color: #ccc;
    }
  }

  dl {
    @include purista-medium;

    dt {
      float: left;
      clear: left;
      margin: 0;
      color: $light-blue;
      font-size: 1em;
      margin-right: 10px;
    }

    dd {
      color: $teal-blue;
      font-size: 1em;
      margin-bottom: 10px;
    }
  }

  /**
   * --team management
   */
  .post-avatar {
    margin-right: 20px;

    &:not(.has-avatar) {
      border: 1px solid $teal-blue;
      border-radius: $border-radius;
      width: 80px;
      height: 62px;
    }
  }

  .selected-logo, .category {
    @include purista-medium;

    padding-bottom: 10px;

    .logo-name {
      color: $teal-blue;
    }
  }

  /**
   * --logo, country, category management
   */
  .management-header {
    @extend .fb-cf;

    padding: 20px 20px 0 20px;

    h6 {
      float: left;
    }

    a {
      float: right;
    }
  }

  .category {
    input[name=category] {
      margin-top: 10px;
      margin-right: 10px;
    }
  }

  /**
   * --sessions
   */
  .session-name {
    @include purista-medium;
  }

  /**
   * --registration
   */
  .fb-choose-emblem {
    padding-top: 20px;
    padding-bottom: 20px;

    h6 {
      text-align: left;
      padding-left: 20px;
      padding-right: 20px;
      margin: 0;
    }

    .emblem-carousel {
      background-color: transparent;
      border-top: 1px solid lighten($main-blue, 10%);
      border-bottom: 1px solid lighten($main-blue, 10%);
    }
  }

  .player-list {
    display: none;

    .team-registration & {
      display: block;
    }

    .col-pad {
      padding-top: 8px;
      padding-bottom: 8px;
    }
  }

  /**
   * --global controls
   */
  .global-controls-rules {
    border-top: 1px solid lighten($main-blue, 10%);
    border-bottom: 1px solid lighten($main-blue, 10%);
  }
}

.admin-buttons {
  @extend .fb-cf;

  .admin-sections + & {
    padding-top: 40px;
  }

  &.buttons-centered {
    text-align: center;
  }

  button + button {
    margin-left: 20px;
  }

  .button-left {
    float: left;
    margin: 0 20px 0 0;
  }

  .button-right {
    float: right;
    margin: 0 0 0 20px;
  }
}

.fb-admin-main .fb-modal-wrapper {
  position: fixed;
  left: 300px;
}
