// Table of Contents
//
// 01. Global styles
// 02. Sidebar
// 03. List elements
// 04. Stats
// 05. Management
// 06. Legislation
//

// 01. Global styles
// -----------------

$admin-color: #CF3638;

body.admin {

  header {
    border: 0;

    .top-links {
      background: darken($admin-color, 15%);
    }
  }

  .top-bar {
    background: $admin-color !important;
    height: auto;
  }

  form {

    .button {
      margin-top: 0;
    }

    input[type="text"], textarea {
      width: 100%;
    }

    .input-group input[type="text"] {
      border-radius: 0;
      margin-bottom: 0 !important;
    }
  }

  table {

    th {
      text-align: left;

      &.with-button {
        line-height: $line-height*2;
      }
    }

    tr {
      background: white;
      border: 1px solid $border;

      &:hover {
        background: #f3f6f7;
      }
    }

    input[type="submit"] ~ a, a ~ a {
      margin-left: $line-height/2;
      margin-right: $line-height/2;
    }
  }

  hr {
    max-width: none;
  }

  .menu.simple li.active {
    border-bottom: 2px solid $admin-color;
    color: $admin-color;
  }

  #proposals {
    width: 100% !important;
  }

  .accordion-title {
    font-size: $base-font-size;
  }

  .button.secondary {
    margin-right: rem-calc(12);
  }

  .admin-content {

    .proposal-form {
      padding-top: 0;
    }

    .proposal-show {
      padding-top: rem-calc(54);
    }
  }

  .is-featured {
    margin-top: rem-calc(36);
  }

  .select-order {
    min-width: rem-calc(160);
  }
}

.for-print-only {
  display: none;
}

.admin-content {
  padding: $line-height !important;
}

@include breakpoint(medium) {

  tr {

    .on-hover-block {
      display: none;
    }

    &:hover .on-hover-block {
      display: block;
      margin: 0;
      margin-top: $line-height/2;
      width: 100%;
    }
  }
}

@include breakpoint(medium) {

  tr {

    .on-hover {
      display: none;
    }

    &:hover .on-hover {
      display: inline;
    }
  }
}

// 02. Sidebar
// -----------

.admin-sidebar {
  border-right: 1px solid $border;

  @include breakpoint(medium) {
    padding-bottom: $line-height*3;
  }

  ul {
    list-style-type: none;
    margin-bottom: 0;
    margin-left: 0;
    padding: 0;

    [class^="icon-"] {
      display: inline-block;
      font-size: rem-calc(24);
      padding-right: rem-calc(12);
      padding-top: rem-calc(4);
      vertical-align: middle;
    }

    li {
      background: white;
      margin: 0;
      outline: 0;

      &.active a {
        background: #f3f6f7;
        color: $admin-color;
        font-weight: bold;
      }
    }

    li.section {
      border-bottom: 1px dotted #d5d5d5;
      border-top: 1px dotted #d5d5d5;
      height: $line-height/2;
    }

    li a {
      color: $text;
      display: block;
      line-height: rem-calc(48);
      padding-left: rem-calc(12);
      vertical-align: top;

      &:hover {
        background: #f3f6f7;
        text-decoration: none;
      }
    }
  }
}

// 03. List elements
// -----------------

.delete {
  border-bottom: 1px dotted #CF2A0E;
  color: $delete;
  font-size: $small-font-size;

  &:hover, &:active, &:focus {
    border-bottom: 1px dotted white;
    color: #cf2a0e;
  }
}

.verified {
  color: $check;

  a {
    border-bottom: 1px dotted $check;
    color: $check;
    font-size: rem-calc(12);
  }
}

.archived {
  color: $text-medium;
  font-size: rem-calc(12);
}

.ignored {
  color: $text-medium;
  font-size: rem-calc(12);
}

.rejected {
  color: $delete;
}

.date {
  color: $text-medium;
  font-size: rem-calc(12);
  font-style: italic;
}

.official {
  background-color: #e7e7e7;
  border-radius: rem-calc(3);
  font-weight: normal;
  padding: rem-calc(6) rem-calc(12);
}

.button.small.success {
  margin-left: rem-calc(12);

  &.no-margin {
    margin-left: 0;
  }
}

.moderation-description {
  max-height: rem-calc(65);
  overflow: hidden;
  max-width: rem-calc(700);

  &:hover {
    max-height: rem-calc(1000);
    transition: max-height 0.9s;
    -moz-transition: max-height 0.9s;
    -webkit-transition: max-height 0.9s;
  }
}

// 04. Stats
// ---------

.stats {
  background: white;
}

.stats-numbers {
  p {
    color: $text-medium;
    font-size: rem-calc(13);
    padding: rem-calc(6);
    text-transform: uppercase;

    &.featured {
      background: $info-bg;
      border: 1px solid $info-border;
      font-weight: bold;
    }

    .number {
      color: $text;
      font-size: rem-calc(30);
      font-weight: bold;
    }
  }
}

// 05. Management
// --------------

.user-permissions {

  ul {
    list-style-type: none;
    margin-left: 0;

    li {
      font-size: rem-calc(14);
      margin-bottom: rem-calc(12);

      span {
        color: $text-medium;
        font-size: rem-calc(12);
      }

      .icon-check {
        color: $check;
      }

      .icon-x {
        color: $delete;
      }
    }
  }
}

.account-info, .login-as, .spending-proposal-info {
  background-color: #e7e7e7;
  border-radius: rem-calc(3);
  font-size: rem-calc(16);
  font-weight: normal;
  margin: $line-height;
  padding: $line-height/2;

  strong {
    font-size: rem-calc(18);
  }
}

.spending-proposal-info p {
  margin-bottom: 0;
}

body.admin {

  .investment-projects-list.medium-9 {
    width: 100%;
  }

  .investment-projects-summary {

    th, td {
      text-align: center;

      &:first-child {
        font-weight: bold;
        text-align: left;
      }

      &:last-child {
        font-weight: bold;
      }
    }

    tr {
      &:nth-child(even) td:last-child {
        background: $success-border;
      }

      &:nth-child(odd) td:last-child {
        background: $success-bg;
      }
    }
  }
}

.admin-content .select-geozone, .admin-content .select-heading {

  a {
    display: block;

    &.active {
      color: $brand;
      font-weight: bold;
      text-decoration: underline;
    }
  }
}

table.investment-projects-summary {

  td.total-price {
    white-space: nowrap;
  }
}


// Markdown Editor
// ---------------

.markdown-editor {
  background-color: white;
}

.markdown-editor #markdown-preview {
  overflow-y: auto;
  height: 15em;
}

.markdown-editor textarea {
  height: 15em;
}

.markdown-editor.fullscreen {
  z-index: 9999;
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
}

.markdown-editor.fullscreen #markdown-preview {
  height: 99%;
}

// 06. Legislation
// --------------

.legislation-admin {
  .menu .active > a {
    background: none;
  }
}

.legislation-process-save {
  @include breakpoint(medium) {
    float: right;
  }
}

.legislation-question-delete {
  @include breakpoint(medium) {
    text-align: right;
  }
}

.legislation-process-index {
  
  .legislation-process-new {
    @include breakpoint(medium) {
      text-align: right;
    }
  }
}

.legislation-process-edit {

  .edit_legislation_process {
    
    small {
      color: $text-medium;
    }
    
    input[type]:not([type="submit"]):not([type="file"]):not([type="checkbox"]):not([type="radio"]) {
      background: $white;
    }
    
    .legislation-process-start, .legislation-process-end {
      @include breakpoint(medium) {
        line-height: 3rem;
      }
    }
    
    .legislation-process-end {
      @include breakpoint(medium) {
        text-align: right;
      }
    }
  }
}

.legislation-draft-versions-index {

  .legislation-process-question {
    @include breakpoint(medium) {
      text-align: right;
    }
  }
  
  table tr td {
    padding: 0.25rem 0.375rem;
  }
}

.legislation-questions-form {

  input[type]:not([type="submit"]):not([type="file"]):not([type="checkbox"]):not([type="radio"]) {
    background: $white;
    margin-bottom: 0;
    
    @include breakpoint(medium) {
      margin-bottom: 1rem;
    }
  }
  
  input::-webkit-input-placeholder {
    font-style: italic;
  }

  input:-moz-placeholder { /* Firefox 18- */
    font-style: italic;
  }

  input::-moz-placeholder {  /* Firefox 19+ */
    font-style: italic;
  }

  input:-ms-input-placeholder {  
    font-style: italic;
  }
  
  .legislation-questions-answers {
    margin-bottom: 1rem;
  }
  
  .field {
    margin-bottom: 1rem;
    
    @include breakpoint(medium) {
      margin-bottom: 0;
    }
    
    a {
      line-height: 3rem;
      color: $delete;
      
      span {
        text-decoration: underline;
      }
      
      .icon-x {
        vertical-align: sub;
        text-decoration: none;
        line-height: 0;
      }
      
      &:active,
      &:focus,
      &:hover {
        text-decoration: none;
      }
    }
  }
}

.legislation-draft-versions-form {

  .legislation-process-version {
    @include breakpoint(medium) {
      text-align: right;
    }
  }
  
  input[type]:not([type="submit"]):not([type="file"]):not([type="checkbox"]):not([type="radio"]) {
    background: $white;
  }
  
  .control {
    cursor: pointer;
    margin-bottom: 1rem;
    
    small {
      display: block;
      margin-top: -1rem;
      color: $text-medium;
      
      @include breakpoint(medium) {
        margin-left: 0.25rem;
        display: inline-block;
        margin-top: 0;
      }
    }
  }
  
  .fullscreen-container {
    
    .markdown-editor-header,
    .markdown-editor-buttons {
      display: none;
    }
    
    a {

      @include breakpoint(medium) {
        float: right;
      }
      
      line-height: 3rem;
      
      span {
        text-decoration: none;
        font-size: $small-font-size;
      }
      
      .icon-expand {
        margin-left: 0.25rem;
        vertical-align: sub;
        text-decoration: none;
        line-height: 0;
      }
      
      &:active,
      &:focus,
      &:hover {
        text-decoration: none;
      }
    }
  }
  
  #legislation_draft_version_body {
    font-family: $font-family-monospace;
    background: #f5f5f5;
    height: 16em;
    
    &:focus {
      border: 1px solid #cacaca;
      box-shadow: inset 0 1px 2px rgba(34, 34, 34, 0.1);
    }
  }
  
  #markdown-preview {
    font-family: $font-family-serif;
    border: 1px solid #cacaca;
    margin-bottom: 2rem;
    
    h1, h2, h3, h4, h5, h6 {
      font-family: $font-family-serif !important;
    }
    
    h2 {
      border-bottom: 1px solid $text-medium;
    }
  }
  
  .fullscreen {
    
    .column {
      padding: 0;
    }
    
    .fullscreen-container {
      background: $admin-color;
      padding: 0.5rem 1rem;
      
      .markdown-editor-header {
        vertical-align: top;
        display: inline-block;
        color: $white;
        
        @include breakpoint(medium) {
          line-height: 3rem;
        }
      }
      
      .truncate {
        @include breakpoint(medium) {
          width: 40vw;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
        }
      }
      
      .markdown-editor-buttons {
        display: block;
        
        @include breakpoint(medium) {
          display: inline-block;
          float: right;
          padding-left: 1rem;
        }
        
        input {
          font-size: $small-font-size;
          padding: 0.5em 1em;
          margin-left: 0;
          margin-bottom: 0;
          margin-top: 1rem;
          
          @include breakpoint(medium) {
            margin: 0.5rem;
          }
        }
      }
      
      a {
        color: $white;
      }
    }
    
    #legislation_draft_version_body {
      border-radius: 0;
      padding: 1rem;
      border: none;
      
      @include breakpoint(medium) {
        padding: 1rem 2rem;
      }
      
      &:focus {
        border: none;
      }
    }
    
    #markdown-preview {
      padding: 1rem;
      border: none;
      
      @include breakpoint(medium) {
        padding: 1rem 2rem;
      }
    }
  }

}