/* Copyright (C) 2017 Icinga Development Team <info@icinga.com> */

.tlv-overview-tiles .tlv-overview-tile {
  display: block;

  float: left;

  padding: 1em;
  margin: 1em;

  position: relative;

  width: 20em;
  height: 10em;

  border: 1px solid @gray;

  text-decoration: none;

  .tlv-title {
    font-weight: bold;
    font-size: 1.3em;
  }

  .tlv-name {
    color: @gray;
  }

  .action-links {
    position: absolute;
    right: 0;
    bottom: 1em;
  }

  .unsaved {
    display: inline-block;
    padding: 0.2em;

    font-weight: bold;

    background: @tlv-color-warning-bg;
    color: @tlv-color-warning-fg;
  }
}

// see Icinga Web 2: public/css/icinga/base.less
//@import '../../vendor/icingaweb2/public/css/icinga/base.less';
@tlv-color-critical-bg: @color-critical;
@tlv-color-critical-fg: white;
@tlv-color-critical-handled-bg: #FFCCBC; // Material Design Deep Orange 100
@tlv-color-critical-handled-fg: #6d4148;
@tlv-color-warning-bg: @color-warning;
@tlv-color-warning-fg: #6d572b;
@tlv-color-warning-handled-bg: #FFF9C4; // Material Design Yellow 100
@tlv-color-warning-handled-fg: #6d572b;
@tlv-color-unknown-bg: @color-unknown;
@tlv-color-unknown-fg: white;
@tlv-color-unknown-handled-bg: #E1BEE7; // Material Design Purple 100
@tlv-color-unknown-handled-fg: #57326d;
@tlv-color-ok-bg: @color-ok;
@tlv-color-ok-fg: white;
@tlv-color-downtime-bg: @color-ok;
@tlv-color-downtime-fg: #333;
@tlv-color-downtime-handled-bg: @color-ok;
@tlv-color-downtime-handled-fg: #ffff00;
@tlv-color-pending-bg: @color-pending;
@tlv-color-pending-fg: #32486d;
@tlv-color-missing-bg: #ccc;
@tlv-color-missing-fg: #333;

.tlv-status-tile {
  &.critical, &.down {
    background-color: @tlv-color-critical-bg;
    color: @tlv-color-critical-fg;
  }
  &.critical.handled, &.down.handled {
    background-color: @tlv-color-critical-handled-bg;
    color: @tlv-color-critical-handled-fg;
  }
  &.unknown, &.unreachable {
    background-color: @tlv-color-unknown-bg;
    color: @tlv-color-unknown-fg;
  }
  &.unknown.handled, &.unreachable.handled {
    background-color: @tlv-color-unknown-handled-bg;
    color: @tlv-color-unknown-handled-fg;
  }
  &.warning {
    background-color: @tlv-color-warning-bg;
    color: @tlv-color-warning-fg;
  }
  &.warning.handled {
    background-color: @tlv-color-warning-handled-bg;
    color: @tlv-color-warning-handled-fg;
  }
  &.ok, &.up {
    background-color: @tlv-color-ok-bg;
    color: @tlv-color-ok-fg;
  }
  &.downtime.active {
    background-color: @tlv-color-downtime-bg;
    color: @tlv-color-downtime-fg;
  }
  &.downtime.handled {
    background-color: @tlv-color-downtime-handled-bg;
    color: @tlv-color-downtime-handled-fg;
  }
  &.pending {
    background-color: @tlv-color-pending-bg;
    color: @tlv-color-pending-fg;
  }
  &.missing {
    background-color: @tlv-color-missing-bg;
    color: @tlv-color-missing-fg;
  }
  &.total {
    background-color: @icinga-blue;
    color: @text-color-on-icinga-blue;
  }
}

.tlv-status-section {
  &.critical, &.down {
    border-color: @tlv-color-critical-bg;
  }
  &.critical.handled, &.down.handled {
    border-color: @tlv-color-critical-handled-bg;
  }
  &.unknown, &.unreachable {
    border-color: @tlv-color-unknown-bg;
  }
  &.unknown.handled, &.unreachable.handled {
    border-color: @tlv-color-unknown-handled-bg;
  }
  &.warning {
    border-color: @tlv-color-warning-bg;
  }
  &.warning.handled {
    border-color: @tlv-color-warning-handled-bg;
  }
  &.ok, &.up {
    border-color: @tlv-color-ok-bg;
  }
  &.pending {
    border-color: @tlv-color-pending-bg;
  }
  &.missing {
    border-color: @tlv-color-missing-bg;
  }
}

.tlv-content {
  position: relative;
  width: 100%;
  height: 100%;

  padding-right: 0 !important;
  padding-left: 0 !important;

  .tlv-header {
    margin: 0 12px;
    z-index: 99;
  }
}

.tlv-header {
  position: relative;

  line-height: 2em;
  height: 2em;

  h1 {
    display: inline-block;
    border: none;
    margin: 0 0.5em 0 0;
  }

  .last-refresh {
    display: inline-block;
    font-weight: bold;
    margin: 0 0.5em;
  }

  .action-links {
    display: inline-block;
    margin: 0 0.5em;
  }

  .badges {
    display: inline-block;
    position: absolute;
    right: 0;

    font-size: 1.2em;

    .badge {
      margin-left: 0.2em;
    }
  }
}

.tlv-view-tiles {
  position: relative;

  clear: both;
  display: flex;
  flex-wrap: wrap;
  align-content: stretch;

  height: 100%;

  margin-top: -2em;
  padding-top: 2em;

  .tlv-tiles {
    display: flex;
    flex-wrap: wrap;
    align-content: stretch;
    flex-grow: 1;

    width: 100%;
    height: 100%;

    margin-top: -2.3em; // - padding title - margin tile
    padding-top: 2.3em; // + padding title + margin tile
  }

  .tlv-tile {
    margin: 0.1em;
    flex-grow: 1;

    overflow: hidden;

    .badges {
      display: inline-block;

      font-weight: normal;
      margin-left: 0.2em;

      .badge {
        font-size: 0.7em;

        border: 0.1em solid white;
        margin-left: 0.2em;
      }
    }
  }

  .tlv-tile-title {
    display: inline-block;
    height: 1.8em;
    width: 100%;

    padding: 0.1em;
  }

  > .tlv-tile { // first level
    min-width: 40%;

    border-style: solid;
    border-width: 1px 1px 1px 4px;

    padding: 0.1em;
    margin: 0.3em 0.5em;

    > .tlv-tile-title {
      font-weight: bold;

      > .badges {
        float: right;
      }
    }

    > .tlv-tiles > .tlv-tile { // second level
      min-width: 10%;

      > .tlv-tile-title {
        height: 100%;
        text-align: center;

        .badge {
          margin-top: -0.3em;
        }

        &:before {
          content: "";
          display: inline-block;
          height: 100%;
          vertical-align: middle;
        }
      }
    }
  }
}

#layout.wide-layout .tlv-view-tiles .tlv-tile-title {
  font-size: 1.3em;
}

#layout.wide-layout.twocols .tlv-view-tiles .tlv-tile-title {
  font-size: 1.1em;
}

.tlv-view-tree {
  .tlv-tree-node {
    display: flex;
    flex-wrap: wrap;
    flex-grow: 1;

    width: 100%;

    &.tlv-collapsed {
      width: auto;
    }

    background: none;
    border-style: solid;

    border-width: 2px 0 0 5px;

    padding: 0.2em 0 0 1em;

    &.tlv-collapsed {
      > .tlv-tree-node, > .tlv-node-icinga {
        display: none;
      }
    }

    .badges {
      display: inline-block;
      font-size: 0.9em;

      .badge {
        border: 0.1em solid white;
        margin-left: 0.2em;
      }
    }
  }

  > .tlv-tree-node {
    border-right-width: 2px;

    &:last-of-type {
      border-bottom-width: 2px;
    }
  }

  .tlv-tree-title {
    display: block;
    width: 100%;
    white-space: nowrap;
    margin: -0.2em 0 0 -1em;
    padding: 0.3em 0.3em 0.3em 0.3em;

    .badges {
      float: right;
    }
  }

  .tlv-node-icinga {
    flex-grow: 1;

    margin: 0.2em;
    padding: 0.2em 1em;
    white-space: nowrap;

    border-radius: 0.5em;

    font-size: 0.9em;
  }
}

.tlv-collapsible {
  .icon.tlv-collapse-handle::before {
    font-size: 1.3em;
    content: '\e81d';
  }

  .collapsed {
    .icon.tlv-collapse-handle::before {
      content: '\e820';
    }
  }
}

/** BEGIN of breadcrumb **/
.breadcrumb {
  list-style: none;
  overflow: hidden;
  padding: 0;

  .badges {
    display: inline-block;
    padding: 0 0 0 0.5em;
    .badge {
      line-height: 1.25em;
      font-size: 0.8em;
      border: 1px solid white;
      margin: -0.25em 1px 0 0;
    }
  }
}

.breadcrumb:after {
  content: '';
  display: block;
  clear: both;
}

.breadcrumb li {
  float: left;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;

}

.breadcrumb li a {
  color: white;
  margin: 0;
  font-size: 1.2em;
  text-decoration: none;
  padding-left: 2em;
  line-height: 2.5em;
  background: @icinga-blue;
  position: relative;
  display: block;
  float: left;
  &:focus {
    outline: none;
  }
}

.breadcrumb li a:before, .breadcrumb li a:after {
  content: " ";
  display: block;
  width: 0;
  height: 0;
  border-top: 1.3em solid transparent;
  border-bottom: 1.2em solid transparent;
  position: absolute;
  margin-top: -1.2em;
  top: 50%;
  left: 100%;
}

.breadcrumb li a:before {
  border-left: 1.2em solid white;
  margin-left: 1px;
  z-index: 1;
}

.breadcrumb li a:after {
  border-left: 1.2em solid @icinga-blue;
  z-index: 2;
}

.breadcrumb li:first-child a {
  padding-left: 1em;
  padding-right: 0.5em;
}

.breadcrumb li:last-child a {
  cursor: default;
}

.breadcrumb li:last-child a:hover {

}

.breadcrumb li:not(:last-child) a:hover {
  background: @text-color;
  color: white;
}

.breadcrumb li:not(:last-child) a:hover:after {
  border-left-color: @text-color;
}

.breadcrumb li a:focus {
  text-decoration: underline;
}

#layout.twocols, #layout.layout-minimal, div.compact {
  .breadcrumb {
    font-size: 0.833em;
  }
}

/** END of breadcrumb **/

.action-links {
  .action-link {
    margin-right: 1em;
  }
}

.warning-note {
  display: inline-block;

  padding: 1px 5px;
  background: @tlv-color-warning-bg;
  color: @tlv-color-warning-fg
}

textarea.code-editor {
  min-height: 45em;
  width: 100%;
}

.CodeMirror {
  min-height: 60em;
  width: 100%;

  margin-bottom: 1em;

  border: 1px solid @gray-light;

  pre {
    font-family: @font-family-fixed;
    font-size: 1.2em;
  }
}

div[href].action.active {
  border-left-color: @icinga-blue;
}

div[href].action:hover {
  cursor: pointer;

  a[href]:first-of-type {
    text-decoration: underline;
  }
}