/*! Icinga Web 2 | (c) 2014 Icinga Development Team | GPLv2+ */

#setup-content-wrapper {
  height: 0;
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;

  > .setup-content {
    height: 0;
    overflow: auto;
    flex: 1 1 auto;
  }
}

.setup-header {
  width: 100%;
  height: 5.5em;
  background-color: @icinga-blue;
  text-align: center;

  img {
    width: 7.5em;
    margin: 1.5em;
    float: left;
  }

  form[name='setup_restart_form'] button {
    background: none;
    border: none;
    color: #ffffff;
    cursor: pointer;
    outline: none;
    font-size: 1.4em;
    margin-right: 0.6em;
    -moz-transform: scale(1, -1);
    -webkit-transform: scale(1, -1);
    -o-transform: scale(1, -1);
    -ms-transform: scale(1, -1);
    transform: scale(1, -1);
  }

  .progress-bar {
    overflow: hidden;
    padding-top: 1em;

    .step {
      float: left;

      h1 {
        margin: 0;
        color: white;
        font-size: 0.9em;
        text-align: center;
        border-bottom: none;
      }

      table {
        margin-top: 0.3em;

        td {
          padding: 0;

          &.left, &.right {
            width: 50%;
          }
        }
      }

      div {
        background-color: lightgrey;

        &.line {
          height: 0.4em;

          &.left {
            margin-left: 0.1em;
            margin-right: -0.1em;
            border-top-left-radius: 0.5em;
            border-bottom-left-radius: 0.5em;
          }

          &.right {
            margin-left: -0.1em;
            margin-right: 0.1em;
            border-top-right-radius: 0.5em;
            border-bottom-right-radius: 0.5em;
          }
        }

        &.bubble {
          width: 1.2em;
          height: 1.2em;
          border-radius: 1.2em;

          // Make sure that such a bubble overlays lines
          position: relative;
          z-index: 1337;
        }

        &.active {
          background-color: white;
        }

        &.complete {
          background-color: @color-ok;
        }

        &.visited {
          background-color: #eee;
        }
      }
    }
  }
}

.setup-content {
  padding: 1.5em 10em 0 10em;

  h1 {
    font-weight: bold;
  }

  form {
    h2 {
      font-size: 2.0em;
    }
  }
}

.setup-content .control-group > :not([hidden]) {
  display: inline-block;
  margin-right: 1em;
}

.setup-content div.buttons {
  margin-top: 1.5em; // Yes, -top and -bottom, keep it like that...
  margin-bottom: 1.5em;

  .double {
    position: absolute;
    left: -1337px;
  }

  .control-button,
  input[type="submit"] {
    .button();
    justify-content: center;
  }

  .control-button[disabled] {
    background: none;
    cursor: default;
    color: @control-disabled-color;
    border: 1px solid @control-disabled-color;

    &:hover {
      color: @control-disabled-color;
      background: none;
      border: 1px solid @control-disabled-color;
    }
  }

  button.finish, a.button-link.login {
    min-width: 25em;
  }

  .spinner {
    margin-left: 1em;
  }
}

.setup-content div.buttons + ul.hints {
  margin-top: -1.5em;
  margin-bottom: 1.5em;
}

form#setup_requirements {
  margin-top: 2em;
  padding-top: 0.5em;
  border-top: 1px solid #888;

  div.buttons div.requirements-refresh {
    width: 25%;
    float: right;
    text-align: center;

    a.button-like {
      padding: 0.1em 0.4em;
    }
  }
}

.setup-content ul.requirements {
  margin: 0;
  padding: 0;
  list-style-type: none;

  li {
    margin-bottom: 1em;

    & > ul {
      margin: 0;
      padding: 0;
      list-style-type: none;
    }

    div {
      float: left;
      padding-top: 0.4em;
      box-sizing: border-box;
      -moz-box-sizing: border-box;
      -webkit-box-sizing: border-box;
    }

    div.title {
      width: 25%;

      h2 {
        padding: 0;
        margin: 0 1em 0 0;
        border-bottom: 0;
      }
    }

    div.description {
      width: 50%;
      border-left: 0.4em solid transparent;
      border-right: 0.4em solid transparent;

      ul {
        margin: 0;
        padding-left: 1em;
        list-style-type: square;
      }
    }

    div.state {
      width: 25%;
      color: white;
      padding: 0.4em;

      &.fulfilled {
        background-color: @color-ok;
      }

      &.not-available {
        color: black;
        background-color: #e8ec70;
      }

      &.missing {
        background-color: @color-critical;
      }
    }
  }
}

#setup_ldap_discovery_confirm table {
  margin: 1em 0;
  border-collapse: separate;
  border-spacing: 1em 0.2em;
}

#setup_admin_account {
  div.instructions {
    width: 30.2em;
    display: inline-block;
  }

  div.radiobox {
    vertical-align: top;
    display: inline-block;
    padding: 0.9em 0.2em 0;
  }
}

.setup-content {
  div.summary {
    font-size: 90%;

    div.page {
      float: left;
      width: 25em;
      min-height: 25em;
      padding: 0 1em 1em;
      margin: 1em 1.5em 1.5em;
      border: 1px dashed lightgrey;

      h2 {
        font-size: 1.2em;
        font-weight: bold;
      }

      div.topic {
        margin-left: 2em;

        h3 {
          font-size: 1em;
        }

        ul {
          list-style-type: circle;
        }

        table {
          border-spacing: 0.5em;
          border-collapse: separate;
          font-size: 0.9em;
          margin-left: 2em;
        }
      }
    }
  }

  form.summary {
    clear: left;
  }
}

#setup-finish {
  h2 {
    padding: 0.5em;
    border-bottom: 0;
    font-variant: normal;
    font-weight: bold;
    color: white;

    &.success {
      background-color: @color-ok;
    }

    &.failure {
      background-color: @color-critical;
    }
  }

  pre.log-output {
    width: 66%;
    height: 25em;
    max-height: none;
  }

  div.buttons {
    margin-top: 0;
    text-align: center;

    a {
      padding: 0.5em;
    }
  }
}

.welcome-page {
  margin-top: 3em;
  text-align: center;

  h2 {
    font-size: 2.0em;
    margin-bottom: 2em;
  }

  div.info {
    padding: 0 1em;
    background-color: #eee;
    border: 1px solid lightgrey;
  }

  p.restart-warning {
    color: coral;
    font-weight: bold;
  }

  form ul.errors {
    display: block;

    list-style-type: none;
    color: red;
  }

  div.note {
    padding: 1em 1em 0;
    margin: 3em auto 0;
    text-align: left;
    font-size: 0.9em;
    border: 1px solid;
    border-color: @gray-light;

    h3 {
      padding: 0.2em;
      margin: -1em -1em 1em;
      text-align: center;
      color: @text-color;
      background-color: @gray-lightest;
      border: 1px solid;
      border-color: @gray-light;
    }

    img {
      float: right;
    }

    p {
      margin: 2em 0 1em 0;

      &:first-child {
        margin-top: 1em;
      }
    }

    div.code {
      margin: 0 2em;

      span {
        display: block;
        font-family: monospace;
      }
    }
  }
}

#setup_monitoring_welcome {
  .welcome-page;
  margin-top: 0;
  padding: 1em;

  h2 {
    margin-top: 0;
  }
}

#setup_modules {
  div.module {
    float: left;
    width: 15em;
    height: 15em;
    margin: 1em;
    padding: 0.3em;
    border: 1px solid;
    border-color: @gray-semilight;
    background-color: @gray-lightest;

    .header {
      height: 2.5em;
      display: flex;
      justify-content: space-between;
    }

    h3 {
      margin: 0;
      border: none;
      overflow: hidden;
      text-overflow: ellipsis;

      label {
        cursor: pointer;
      }
    }

    label.description {
      display: inline-block;
      width: 14.4em;
      height: 12em;
      overflow: auto;
      cursor: pointer;
      font-weight: normal;
    }

    input[type=checkbox] {
      height: 10em;
      float: right;
      margin: 0;
    }
  }

  div.buttons {
    padding-top: 1em;
    clear: both;
  }
}